/* =========================================================
   common.css ― 全ページ共通の土台
   （カラーパレット / リセット / ヘッダー / ボタン / フッター /
     ホバー演出 / レスポンシブ）
   ページ固有のスタイルは各ページのCSSに記述する。
   ========================================================= */

:root{
  --navy:#163a2e;
  --navy-light:#24483c;
  --green-mid:#316a52;
  --gold:#b9a88f;
  --gold-strong:#a8946f;
  --gold-vivid:#e0b451;
  --line-green:#06c755;
  --bg:#f7f5f0;
  --white:#ffffff;
  --text:#1f2420;
  --text-sub:#6b6f66;
  --border:#e7e2d8;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--text); background:var(--bg); line-height:1.7;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ===== header ===== */
header{
  position:sticky; top:0; background:var(--white);
  border-bottom:1px solid var(--border); z-index:50;
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:22px; padding-bottom:22px; gap:16px;
}
.logo{display:flex; align-items:center; height:52px; transition:opacity .25s var(--ease);}
.logo img{height:100%; width:auto; display:block;}
.logo span{color:var(--gold-strong);}
.logo:hover{opacity:.75;}

/* ここから下のナビ関連は必ず header 配下だけに効かせる。
   （ブログのカテゴリ絞り込み・ページ送り・目次・パンくずも <nav> のため、
     セレクタを nav だけにすると巻き添えでレイアウトが壊れる） */
header nav{display:flex; gap:26px;}
header nav a{
  color:var(--text); text-decoration:none; font-size:14px;
  position:relative; padding-bottom:4px; transition:color .25s var(--ease);
}
/* ホバーで下線がスッと伸びる */
header nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
header nav a:hover{color:var(--navy);}
header nav a:hover::after{transform:scaleX(1);}
header nav a.current{color:var(--navy); font-weight:700;}
header nav a.current::after{transform:scaleX(1);}

/* 科目別対策のドロップダウン（JS不要。ホバー／キーボードフォーカスで開く） */
.nav-sub{position:relative; display:flex; align-items:center;}
.nav-sub-label{cursor:pointer;}
.nav-sub-label::before{
  content:"▾"; font-size:9px; margin-right:4px; color:var(--gold-strong); vertical-align:middle;
}
.nav-sub.current > .nav-sub-label{color:var(--navy); font-weight:700;}
.nav-sub.current > .nav-sub-label::after{transform:scaleX(1);}
.nav-sub-menu{
  position:absolute; top:100%; left:-14px; min-width:190px; padding:8px 0;
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 14px 30px rgba(22,58,46,.14);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.nav-sub:hover .nav-sub-menu,
.nav-sub:focus-within .nav-sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.nav-sub-menu a{
  display:block; padding:8px 16px; font-size:13px; white-space:nowrap;
}
.nav-sub-menu a::after{display:none;}
.nav-sub-menu a:hover{background:rgba(185,168,143,.16); color:var(--navy);}

.cta-group{display:flex; gap:10px;}

/* ===== buttons ===== */
.btn{
  display:inline-block; padding:10px 20px; border-radius:6px; font-size:13px;
  text-decoration:none; font-weight:700; white-space:nowrap; cursor:pointer; border:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease);
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-secondary{background:var(--white); color:var(--navy); border:1px solid var(--navy);}
.btn-gold{background:var(--gold-strong); color:#fff;}
.btn:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(22,58,46,.22);}
.btn-primary:hover{background:var(--navy-light);}
.btn-secondary:hover{background:var(--navy); color:#fff;}
.btn-gold:hover{background:#b8a37c;}
.btn:active{transform:translateY(0); box-shadow:0 2px 6px rgba(22,58,46,.18);}

/* ===== ハンバーガー（モバイル用・CSSのみで開閉） ===== */
.nav-toggle{position:absolute; opacity:0; pointer-events:none;}
.nav-burger{
  display:none; width:44px; height:44px; border-radius:8px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background-color .25s var(--ease); flex-shrink:0;
}
.nav-burger span{
  display:block; width:22px; height:2px; background:var(--navy); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-burger:hover{background:rgba(22,58,46,.06);}
.nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0;}
.nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== footer ===== */
footer{background:#0f2019; color:#a8a99e; padding:48px 0 24px; font-size:13px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; margin-bottom:32px;}
.footer-grid h5{color:#fff; font-size:13px; margin:0 0 12px;}
.footer-grid a{
  color:#a8a99e; text-decoration:none; display:block; margin-bottom:8px;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.footer-grid a:hover{color:#fff; transform:translateX(3px);}
.footer-grid p{max-width:280px; margin:0;}
.footer-grid .legal-line{margin-top:12px; font-size:12px; color:#7f8377;}
.footer-h5-second{margin-top:18px !important;}
.copyright{border-top:1px solid #23342c; padding-top:20px; font-size:12px; text-align:center;}

/* ===== モバイル固定CTA ===== */
.mobile-cta{display:none;}

/* ===== 共通ホバー演出（該当クラスが無いページでは無害） ===== */
.pillar-card,
.price-card,
.cadence-card,
.policy-card,
.work-item,
.sheet{
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pillar-card:hover,
.price-card:hover,
.cadence-card:hover,
.policy-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(22,58,46,.10);
  border-color:var(--gold);
}
.pillar-card a{transition:color .25s var(--ease), transform .25s var(--ease);}
.pillar-card a:hover{color:var(--navy); transform:translateX(3px);}
.faq-item{transition:background-color .25s var(--ease);}
.faq-item:hover{background:rgba(185,168,143,.08);}
a{transition:color .25s var(--ease), opacity .25s var(--ease);}

/* 画面内に入ったらふわっと表示。
   隠すのは has-reveal（JSが付与）が付いている時だけ。
   JSが動かない環境では最初から見えたままになる。 */
.has-reveal .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.has-reveal .reveal.in-view{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important;}
  .has-reveal .reveal{opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   レスポンシブ
   ========================================================= */

/* --- タブレット横〜小型ノート --- */
@media(max-width:1024px){
  .wrap{padding:0 20px;}
  header .wrap{padding-top:16px; padding-bottom:16px;}
  .logo{height:44px;}
  header nav{gap:18px;}
  header nav a{font-size:13px;}
  .btn{padding:9px 16px; font-size:12px;}
}

/* --- タブレット縦〜スマホ：ハンバーガーに切替 --- */
@media(max-width:860px){
  header .wrap{position:relative; flex-wrap:nowrap; gap:12px;}
  .logo{height:40px;}

  .nav-burger{display:flex; order:3;}

  header nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--white);
    border-bottom:1px solid var(--border);
    box-shadow:0 12px 24px rgba(0,0,0,.10);
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .35s var(--ease), visibility .35s var(--ease);
  }
  .nav-toggle:checked ~ nav{max-height:720px; visibility:visible; overflow-y:auto;}
  header nav a{
    padding:15px 24px; font-size:15px; border-bottom:1px solid var(--border);
  }
  header nav a::after{display:none;}
  header nav a.current{background:rgba(185,168,143,.14);}

  /* ドロップダウンはモバイルでは常に開いた状態で並べる（開閉操作を増やさない） */
  .nav-sub{display:block; position:static;}
  .nav-sub-label{display:block; padding:15px 24px; font-size:15px; border-bottom:1px solid var(--border);}
  .nav-sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    border:none; border-radius:0; box-shadow:none; padding:0; min-width:0;
    background:rgba(185,168,143,.07);
  }
  .nav-sub-menu a{padding:12px 24px 12px 40px; font-size:14px;}

  /* ヘッダー内CTAは固定CTAバーに集約する */
  .cta-group{display:none;}

  .footer-grid{grid-template-columns:1fr 1fr; gap:20px;}
  .footer-grid p{max-width:none;}

  .mobile-cta{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; gap:8px;
    background:var(--white); border-top:1px solid var(--border); padding:10px 14px;
    box-shadow:0 -4px 16px rgba(0,0,0,.08);
  }
  .mobile-cta .btn{flex:1; text-align:center; padding:13px 10px;}
  .mobile-cta .btn:hover{transform:none; box-shadow:none;}
  body{padding-bottom:70px;}
}

/* --- スマホ --- */
@media(max-width:600px){
  .wrap{padding:0 16px;}
  header .wrap{padding-top:12px; padding-bottom:12px;}
  .logo{height:36px;}
  .footer-grid{grid-template-columns:1fr; gap:8px;}
  .footer-grid > div{padding-bottom:10px;}
  footer{padding:36px 0 20px;}
  .mobile-cta .btn{font-size:12px; padding:12px 8px;}
}