/* ============================================================
   パソコン教室ハッピークローバー - 共通スタイル
   style.css
   ============================================================ */

/* ── リセット ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS変数 ──────────────────────────────── */
:root {
  --green-dark:  #1b6e4f;
  --green-main:  #27a06e;
  --green-light: #4cc48f;
  --green-pale:  #e8f7f1;
  --green-pale2: #d0ede3;
  --white:       #ffffff;
  --gray-100:    #f8fafb;
  --gray-200:    #eef2f0;
  --gray-500:    #7a8f85;
  --gray-700:    #3d4f47;
  --gray-900:    #1a2621;
  --shadow-sm: 0 2px 8px rgba(39,160,110,.08);
  --shadow-md: 0 8px 24px rgba(39,160,110,.14);
  --shadow-lg: 0 16px 48px rgba(39,160,110,.18);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── ベース ───────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── NAVBAR ─────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(39,160,110,.1);
  transition: box-shadow .3s var(--ease);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }

.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px; height: 84px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.nav-logo-icon {
  width:40px; height:40px;
  background: linear-gradient(135deg,var(--green-main),var(--green-light));
  border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px;
}
.nav-logo-en { font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--green-dark); }
.nav-logo-ja { font-size:10px; color:var(--gray-500); }

.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
  display:block; padding:10px 14px; border-radius:var(--radius-sm);
  text-decoration:none; font-size:16px; font-weight:500; color:var(--gray-700);
  transition: all .25s var(--ease); white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active { color:var(--green-main); background:var(--green-pale); }
.nav-cta {
  background: linear-gradient(135deg,var(--green-main),var(--green-light)) !important;
  color: white !important; border-radius:24px !important; padding:8px 18px !important;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(39,160,110,.35) !important; background:none !important; background: linear-gradient(135deg,var(--green-dark),var(--green-main)) !important; }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; background:none; border:none;
}
.hamburger span { display:block; width:24px; height:2px; background:var(--gray-700); border-radius:2px; transition: all .3s; }

/* ── PAGE HERO（サブページ用）────────────── */
.page-hero {
  padding-top: 68px; min-height: 240px;
  background: linear-gradient(135deg, #0f3d2a 0%, #1b6e4f 50%, #27a06e 100%);
  display: flex; align-items: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:url('original.jpg'); background-size:cover; background-position:center 30%;
  filter:brightness(.25) saturate(.7);
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(15,45,30,.7),rgba(39,160,110,.3));
}
.page-hero-inner {
  width:100%; max-width:1200px; margin:0 auto; padding:56px 28px;
  position:relative; z-index:1;
}
.breadcrumb { display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:20px; }
.breadcrumb a { color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s; }
.breadcrumb a:hover { color:var(--green-light); }
.breadcrumb span { color:rgba(255,255,255,.35); }
.page-hero-label { font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green-light);margin-bottom:12px; }
.page-hero-title { font-size:clamp(28px,4vw,48px);font-weight:700;color:white;line-height:1.25;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.3); }
.page-hero-desc { font-size:16px;color:rgba(255,255,255,.72);max-width:500px;line-height:1.8; }

/* ── セクション共通 ──────────────────────── */
.section { padding: 88px 28px; }
.section-alt { background: var(--gray-100); }

.s-inner { max-width: 1200px; margin: 0 auto; }

.s-label {
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-main); background:var(--green-pale);
  border-radius:24px; padding:5px 14px; margin-bottom:14px;
}
.s-title { font-size:clamp(24px,3vw,38px); font-weight:700; color:var(--gray-900); margin-bottom:12px; line-height:1.3; }
.s-desc { font-size:16px; color:var(--gray-500); line-height:1.85; max-width:540px; }

.s-header { margin-bottom:56px; }
.s-header.center { text-align:center; }
.s-header.center .s-desc { margin: 0 auto; }

/* ── ウェーブ区切り ──────────────────────── */
.wave { line-height: 0; }
.wave svg { display: block; width: 100%; }

/* ── モバイルメニュー ────────────────────── */
.mobile-menu {
  display:none; position:fixed; top:68px;left:0;right:0;bottom:0;
  background:white; z-index:999; padding:20px 24px; overflow-y:auto;
}
.mobile-menu.open { display:block; }
.mobile-links { list-style:none; display:grid; gap:2px; }
.mobile-links a {
  display:block; padding:14px 16px; border-radius:var(--radius-sm);
  text-decoration:none; font-size:15px; font-weight:500; color:var(--gray-700);
  border-bottom:1px solid var(--gray-200);
}

/* ── アニメーション ──────────────────────── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.fade-up.vis { opacity:1; transform:translateY(0); }

.stagger > * { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.stagger.vis > *:nth-child(1){opacity:1;transform:none;transition-delay:0s}
.stagger.vis > *:nth-child(2){opacity:1;transform:none;transition-delay:.1s}
.stagger.vis > *:nth-child(3){opacity:1;transform:none;transition-delay:.2s}
.stagger.vis > *:nth-child(4){opacity:1;transform:none;transition-delay:.3s}
.stagger.vis > *:nth-child(5){opacity:1;transform:none;transition-delay:.4s}
.stagger.vis > *:nth-child(6){opacity:1;transform:none;transition-delay:.5s}
.stagger.vis > *:nth-child(7){opacity:1;transform:none;transition-delay:.6s}
.stagger.vis > *:nth-child(8){opacity:1;transform:none;transition-delay:.7s}
.stagger.vis > *:nth-child(9){opacity:1;transform:none;transition-delay:.8s}
.stagger.vis > *:nth-child(10){opacity:1;transform:none;transition-delay:.9s}

/* ── フッター ────────────────────────────── */
footer { background:var(--gray-900); color:rgba(255,255,255,.55); padding:64px 28px 28px; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }

.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; text-decoration:none; }
.footer-logo-icon { width:34px;height:34px;background:linear-gradient(135deg,var(--green-main),var(--green-light));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px; }
.footer-logo-name { font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:white; }
.footer-tagline { font-size:12px; line-height:1.8; margin-bottom:0; }

.footer-col-title { font-size:12px; font-weight:600; color:white; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.footer-links { list-style:none; display:grid; gap:9px; }
.footer-links a { font-size:12px; color:rgba(255,255,255,.45); text-decoration:none; transition:color .25s; }
.footer-links a:hover { color:var(--green-light); }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); padding-top:20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:11px;
}

/* ── レスポンシブ（共通部分）────────────── */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .section { padding: 60px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
}