/* ============================================================
   Club Atletico CELESTE ― 共通スタイル（全ページ共有）
   ------------------------------------------------------------
   ★このファイルは index.html と academy/index.html が共有します。
     色・ロゴ・ヘッダー・ドロワー・フッター・モーションを直すときは
     必ずここを直してください（各ページの <style> に複製しないこと）。

   収録: 0.base（:root変数 / タイポ / .wrap / .btn / .rule / .nb 等）
         1.header / drawer
         18.footer / fixbar
         19.motion（reveal / 罫線が伸びる / 写真の微スケール）

   各ページ固有のセクションCSSは、そのページの <style> に置きます。
   ※ 読み込み順は必ず このファイル → ページ内 <style>。
      ページ側が :root 変数を参照するため、順序を入れ替えないこと。
   ============================================================ */

/* ---------- 0. base ---------- */
:root{
  --paper:#ffffff;
  --paper2:#f5f7fc;
  --ink:#1a2148;            /* 本文ネイビー */
  --navy:#151E49;           /* 公式ロゴ実測（旧#000054は制作時のスポイト推定値） */
  --celeste:#8C93C8;        /* 公式ロゴ実測 */
  --celeste-bg:#F0F1F8;
  --gold:#978026;           /* 公式ロゴ実測（王冠＝ブランド正式色） */
  --line:#d9dfef;
  --muted:#5d6489;
  --bar:49px;               /* スマホ固定バーの高さ */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans JP",sans-serif;font-weight:400;color:var(--ink);background:var(--paper);line-height:2;-webkit-font-smoothing:antialiased;font-size:14.5px;overflow-x:hidden}
/* img に width/height 属性を入れているため height:auto を既定にする
   （これが無いと属性の height がそのまま効いて縦に伸びる。個別に height を持つ
     .ig-post img / .tm-hero img 等は詳細度で勝つのでそのまま） */
img{max-width:100%;height:auto;display:block}
picture{display:contents}   /* <picture>を挟んでも既存の img セレクタ／レイアウトが効くように */
/* 改行制御: .nb=文節単位で折り返し（見出し・短いコピー・CTAのみに使用。本文の長文には使わない）
   .pc-only=PCのみ / .sp-only=スマホのみ表示（FVコピーは375px幅で必ず確認） */
.nb{display:inline-block}
.sp-only{display:none}
@media(max-width:520px){.pc-only{display:none}.sp-only{display:inline}}
a{color:inherit}
:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}
/* 文中インラインリンク。★基本定義をここに置くこと＝下の @media(max-width:900px) の
   タップ領域確保と同じファイルに揃える。ページ側の <style> に置くと common.css より
   後に読まれて padding が打ち消される（共通化した際に実際に踏んだ） */
/* ★文字は navy、下線だけ celeste。celeste の文字色は白背景で 2.95:1 しかなく
   WCAG 1.4.3（4.5:1）に届かないため。navy なら 15.98:1 で、下線の色で
   リンクだという識別も残る。公式ロゴ実測のカラー定義は変えない */
.lnk{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--celeste);padding-bottom:2px;transition:border-color .25s}
.lnk:hover{border-bottom-color:var(--navy)}
/* スクリーンリーダー用（ロゴ画像に置き換えた見出しのテキストを残す） */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 公式ワードマークはマスクで描画＝1ファイルで白／ゴールドを切り替えられる（2枚読み込まない）。
   実体はSVG（受領PNGが498×40しか無かったためベクター化）＝どのサイズでも鮮明 */
.wm{display:block;aspect-ratio:498/40;
  /* ★url() は必ずルート絶対パスで書くこと。CSSファイル内の相対パスは
     このファイルの位置（/css/）基準で解決されるため、'img/…' と書くと
     /css/img/… を探して404になる（切り出し時に実際に踏んだ） */
  -webkit-mask:url('/img/logo_wordmark.svg') center/contain no-repeat;
  mask:url('/img/logo_wordmark.svg') center/contain no-repeat;}
.en{font-family:"Cormorant Garamond",serif;letter-spacing:.14em}
.mn{font-family:"Shippori Mincho",serif}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
section{padding:110px 0}
@media(max-width:640px){section{padding:76px 0}}
[id]{scroll-margin-top:84px}
h2{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(32px,4.6vw,52px);letter-spacing:.1em;line-height:1.15;color:var(--navy);overflow-wrap:break-word}
h2 small{display:block;font-family:"Noto Sans JP";font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:.32em;margin-top:12px;line-height:1.7}
.rule{width:52px;height:2px;background:var(--gold);margin:26px 0 0;transform-origin:left}
.lead{margin-top:34px;max-width:680px;font-size:14px;color:var(--muted)}
/* サブ見出し（h3）＝セクション内の区切り。罫線ベースで統一 */
.sub-h{margin-top:76px;display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;font-weight:400}
.sub-h b{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(20px,2.6vw,26px);letter-spacing:.12em;color:var(--navy);line-height:1.3}
.sub-h small{font-size:11.5px;letter-spacing:.22em;color:var(--muted);line-height:1.7}
.note{font-size:11.5px;color:var(--muted);margin-top:18px;letter-spacing:.06em}
.btn{
  display:inline-block;text-decoration:none;font-family:"Noto Sans JP";
  font-size:13px;letter-spacing:.2em;font-weight:500;
  padding:16px 44px;border:1.5px solid var(--navy);color:var(--navy);transition:.35s;
  cursor:pointer;background:transparent;text-align:center;
}
.btn:hover{background:var(--navy);color:#fff}
.btn-fill{background:var(--navy);color:#fff}
.btn-fill:hover{background:var(--celeste);border-color:var(--celeste);color:var(--navy)}
.btn-white{background:#fff;border-color:#fff;color:var(--navy)}
.btn-white:hover{background:var(--celeste);border-color:var(--celeste);color:var(--navy)}
.btn-ghost{border-color:rgba(255,255,255,.85);color:#fff}
.btn-ghost:hover{background:#fff;border-color:#fff;color:var(--navy)}
@media(max-width:430px){.btn{padding:15px 26px;font-size:12.5px;letter-spacing:.14em}}

/* ---------- 1. header / drawer ---------- */
header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;background:transparent;border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s;
}
@media(max-width:520px){header{padding:12px 18px}}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo img{width:33px;height:auto}
/* 写真の上＝白／スクロールして白背景＝公式ゴールド */
.logo .wm{width:178px;background-color:#fff;transition:background-color .35s}
header.solid .logo .wm{background-color:var(--gold)}
@media(max-width:520px){.logo{gap:9px}.logo img{width:29px}.logo .wm{width:150px}}
@media(max-width:360px){.logo .wm{width:128px}}
.mainnav{display:flex;gap:26px;align-items:center}
.mainnav a{color:rgba(255,255,255,.92);text-decoration:none;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:14px;letter-spacing:.16em;transition:color .35s;white-space:nowrap}
.mainnav a:hover{color:var(--celeste)}
.mainnav a.cta{border:1px solid rgba(255,255,255,.9);padding:8px 18px;color:#fff}
.mainnav a.cta:hover{background:#fff;color:var(--navy)}
header.solid{background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom-color:var(--line)}
header.solid .mainnav a{color:var(--ink)}
header.solid .mainnav a:hover{color:var(--celeste)}
header.solid .mainnav a.cta{border-color:var(--navy);color:var(--navy)}
header.solid .mainnav a.cta:hover{background:var(--navy);color:#fff}
/* ハンバーガー */
.burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer}
.burger span{display:block;width:24px;height:1.5px;background:#fff;margin:0 auto;transition:background .35s}
header.solid .burger span{background:var(--navy)}
@media(max-width:980px){.mainnav{display:none}.burger{display:flex}}
/* ドロワー：headerの子にしない＝iOSのbackdrop-filter浮遊バグ回避。閉時はvisibility:hidden */
.drawer{
  position:fixed;inset:0;z-index:200;background:var(--navy);
  visibility:hidden;opacity:0;transition:opacity .38s ease,visibility 0s .38s;
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.open{visibility:visible;opacity:1;transition:opacity .38s ease}
.dw-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;border-bottom:1px solid rgba(255,255,255,.14)}
@media(max-width:520px){.dw-bar{padding:12px 18px}}
.dw-bar .wm{width:172px;background-color:#fff}
.dw-close{width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.dw-close::before,.dw-close::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:1.5px;background:#fff;transform-origin:center}
.dw-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.dw-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dw-in{padding:34px 28px 60px;max-width:560px;margin:0 auto;transform:translateY(16px);transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.drawer.open .dw-in{transform:none}
@media(max-width:520px){.dw-in{padding:26px 18px 56px}}
.dw-nav{list-style:none}
.dw-nav li{border-bottom:1px solid rgba(255,255,255,.14)}
.dw-nav a{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;padding:17px 2px;text-decoration:none;color:#fff}
.dw-nav a .e{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:20px;letter-spacing:.14em}
.dw-nav a .j{font-size:11.5px;letter-spacing:.16em;color:#A0A5D1}
.dw-nav a:hover .e{color:var(--celeste)}
.dw-cta{display:grid;gap:12px;margin-top:30px}
.dw-cta .btn{padding:15px 20px;font-size:12.5px;letter-spacing:.14em}
.dw-sub{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px 22px}
.dw-sub a{font-size:11.5px;letter-spacing:.12em;color:#A0A5D1;text-decoration:none}
.dw-sub a:hover{color:#fff}
body.nav-open{overflow:hidden}


/* ---------- 18. footer / fixbar ---------- */
.f-cta{border-top:1px solid var(--line);background:var(--paper2);padding:52px 26px 0;text-align:center}
.f-cta .mn{font-size:clamp(16px,2.4vw,22px);font-weight:600;letter-spacing:.14em;color:var(--navy);line-height:1.9}
.f-cta .btn{margin-top:22px}
footer{border-top:1px solid var(--line);padding:52px 26px 44px;text-align:center;background:var(--paper2)}
.f-cta+footer{border-top:none;padding-top:44px}
footer img{width:110px;margin:0 auto 18px}
@media(max-width:520px){footer img{width:96px}}
footer .flinks{margin:16px 0 14px;display:flex;gap:14px 24px;justify-content:center;flex-wrap:wrap}
footer .flinks a{color:var(--muted);text-decoration:none;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:13px;letter-spacing:.2em}
footer .flinks a:hover{color:var(--navy)}
footer .cp{font-size:11px;color:var(--muted);letter-spacing:.1em}
.fixbar{position:fixed;bottom:0;left:0;width:100%;display:none;z-index:120;padding-bottom:env(safe-area-inset-bottom)}
.fixbar a{flex:1;text-align:center;padding:14px 6px;text-decoration:none;font-size:12px;line-height:1.5;letter-spacing:.14em;font-weight:500}
.fixbar .a{background:var(--navy);color:#fff}
.fixbar .b{background:var(--celeste);color:var(--navy)}
@media(max-width:900px){.fixbar{display:flex}body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}}
/* モバイルのタップ領域確保（共通の要素のみ。ページ固有の小さいリンクは
   そのページの <style> 末尾で同じ指定をすること） */
@media(max-width:900px){
  .lnk,footer .flinks a{display:inline-block;padding-top:6px;padding-bottom:6px}
}

/* ---------- 19. motion（reveal / 罫線が伸びる / 写真の微スケール） ---------- */
.rv{transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1)}
.js .rv{opacity:0;transform:translateY(30px)}
.js .rv.d1{transition-delay:.09s}
.js .rv.d2{transition-delay:.18s}
.js .rule{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.6,.2,1) .08s}
.js .zm img{transform:scale(1.05);transition:transform 1.8s cubic-bezier(.2,.6,.2,1)}
.zm{overflow:hidden}
.rv.on{opacity:1;transform:none}
.rule.on{transform:scaleX(1)}
.zm.on img{transform:none}
@media (prefers-reduced-motion: reduce){
  .js .rv,.rv{opacity:1;transform:none;transition:none}
  .js .rule,.rule{transform:none;transition:none}
  .js .zm img,.zm img{transform:none;transition:none}
  .hero .bg{animation:none}
  .hero .scroll::after{animation:none}
  .drawer,.dw-in,.js .msg-fold{transition:none}
  html{scroll-behavior:auto}
}