/* ==================================================================
   THE366 ServiceTopHero ― 3サービスTOPの共通ヒーロー（2026-10-01 新設）
   「10/1 1時用 修正依頼 ⑦」：誕生日力診断・タグレター・ログレターのTOPを
   同じ骨格（①共通ヘッダー → ②サービス名 → ③キャラクター表示エリア →
   ④メインコピー → ⑤サブコピー → ⑥第一アクション）で表示するための共通部品。

   ・3ページはこの1ファイルを読み、ヒーローの各要素に下のクラスを付けるだけ。
     サイズ・色・余白はここのトークンだけで決める（ページ側で個別に margin を積まない）。
     今後1サービスだけ直して3画面がばらばらになることを防ぐ。
   ・ログレターは brand.css を読まないため、ここは単独で完結させている
     （色の値は brand.css の --navy-soft / --gold / garden.css の --ll-* と同じ）。
   ・ヒーローは上詰め（縦中央寄せにしない）。上から同じ距離で並ぶので、
     3画面を横に並べるとサービス名・キャラクター・メインコピー・第一アクションの
     開始位置がそろう。第一アクションより下は「次のセクション」として余白と細い線で分ける。
   ・キャラクターは数値上の高さではなく「存在感」をそろえる（不透明部分の面積の平方根が
     同じになるよう、卵を基準に神使 1.10・神子 0.93 倍。神使は本体が上寄りなので少し下げる）。
   ================================================================== */
:root{
  /* 色の役割：金＝ブランド／サービス識別、白＝ユーザーへのメッセージ、弱い白＝補足 */
  --the366-navy:#1C2E4A;
  --the366-navy-deep:#0E2841;
  --the366-gold:#C5A059;
  --the366-white:#FFFFFF;
  --the366-white-sub:rgba(255,255,255,.74);
  --the366-white-weak:rgba(255,255,255,.58);

  /* 文字 */
  --hero-font-mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Songti SC","Source Han Serif",serif;
  --hero-font-gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP","Segoe UI",system-ui,-apple-system,sans-serif;
  --hero-name-fs:clamp(26px,8.2vw,32px);
  --hero-main-fs:clamp(16px,calc((100vw - 48px) / 16),22px);   /* 最長の「守り神に宿した、これまでの想い」も1行に収まる大きさ（狭い画面では2行へ） */
  --hero-sub-fs:clamp(11.5px,calc((100vw - 48px) / 22.5),15px);   /* 最長のサブコピー（21字）も1行に収まる大きさ */
  --hero-note-fs:12.5px;

  /* 余白（spacing token） */
  --hero-hdr:calc(64px + env(safe-area-inset-top));   /* 共通固定ヘッダーの高さ */
  --hero-pad-x:22px;
  --hero-sp-top:clamp(20px,4.6svh,44px);               /* ヘッダー → サービス名 */
  --hero-sp-name:14px;                                  /* サービス名 → キャラクター */
  --hero-chara:min(50vw,200px);                         /* キャラクター表示領域（正方形） */
  --hero-sp-chara:18px;                                 /* キャラクター → メインコピー */
  --hero-sp-main:10px;                                  /* メインコピー → サブコピー */
  --hero-sp-sub:26px;                                   /* サブコピー → 第一アクション */
  --hero-sp-after:clamp(44px,8svh,72px);                /* 第一アクション → 次のセクション */
  --hero-main-maxw:22em;

  /* 第一アクション */
  --hero-cta-h:56px;
  --hero-cta-maxw:420px;
  --hero-cta-radius:999px;
  --hero-cta-border:1px solid var(--the366-gold);
}

.svc-hero{box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--hero-sp-top) 0 var(--hero-sp-after);margin:0;}

/* ② サービス名：3サービスとも同じ書体・太さ・大きさ・金・位置 */
.svc-hero .svc-hero__name{font-family:var(--hero-font-mincho);font-size:var(--hero-name-fs);font-weight:700;
  letter-spacing:.1em;text-indent:.1em;line-height:1.3;color:var(--the366-gold);margin:0 0 var(--hero-sp-name);padding:0;}

/* ③ キャラクター表示エリア：高さ・中心・前後の余白を共通化。中の絵は存在感で補正 */
.svc-hero .svc-hero__chara{position:relative;flex:none;width:var(--hero-chara);height:var(--hero-chara);aspect-ratio:auto;
  margin:0 auto var(--hero-sp-chara);padding:0;}
.svc-hero .svc-hero__chara::before{content:"";position:absolute;inset:-12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,55,.15) 0%,rgba(212,175,55,0) 66%);}
.svc-hero .svc-hero__chara img{position:relative;display:block;width:100%;height:100%;object-fit:contain;
  transform:translateY(var(--hero-chara-dy,0%)) scale(var(--hero-chara-scale,1));transform-origin:50% 50%;}
.svc-hero__chara[data-chara="egg"]{--hero-chara-scale:1;--hero-chara-dy:0%;}
.svc-hero__chara[data-chara="shinshi"]{--hero-chara-scale:1.1;--hero-chara-dy:3.4%;}
.svc-hero__chara[data-chara="miko"]{--hero-chara-scale:.93;--hero-chara-dy:0%;}

/* ④ メインコピー：同じ書体・大きさ・太さ・白・行間・最大幅（最大2行程度） */
.svc-hero .svc-hero__main{font-family:var(--hero-font-mincho);font-size:var(--hero-main-fs);font-weight:500;
  letter-spacing:.06em;line-height:1.6;color:var(--the366-white);max-width:var(--hero-main-maxw);
  margin:0 auto var(--hero-sp-main);padding:0;white-space:normal;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere;}

/* ⑤ サブコピー：メインの下・第一アクションの上。弱い白 */
.svc-hero .svc-hero__sub{font-family:var(--hero-font-mincho);font-size:var(--hero-sub-fs);font-weight:400;
  letter-spacing:.04em;line-height:1.7;color:var(--the366-white-sub);max-width:100%;
  margin:0 auto var(--hero-sp-sub);padding:0;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;}

/* ⑥ 第一アクション：開始位置・横幅・高さ・左右・金の枠・白の文字・タップ領域を共通化 */
.svc-hero .svc-hero__action{width:100%;max-width:var(--hero-cta-maxw);margin:0 auto;padding:0;box-sizing:border-box;}
.svc-hero .svc-hero__cta{display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:100%;max-width:var(--hero-cta-maxw);min-height:var(--hero-cta-h);height:auto;margin:0 auto;padding:0 20px;
  border:var(--hero-cta-border);border-radius:var(--hero-cta-radius);
  background:linear-gradient(180deg,var(--the366-navy),var(--the366-navy-deep));color:var(--the366-white);
  font-family:var(--hero-font-gothic);font-size:16.5px;font-weight:600;letter-spacing:.2em;text-indent:.2em;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.svc-hero .svc-hero__cta[aria-disabled="true"]{opacity:.55;}
.svc-hero .svc-hero__cta:focus-visible{outline:2px solid var(--the366-gold);outline-offset:3px;}

/* 第一アクション直下の補足（ある場合だけ）。弱い白・小さく */
.svc-hero .svc-hero__note{font-family:var(--hero-font-mincho);font-size:var(--hero-note-fs);line-height:1.8;
  letter-spacing:.02em;color:var(--the366-white-weak);margin:14px auto 0;padding:0;max-width:var(--hero-cta-maxw);}

/* ヒーローの次のセクション：十分な余白＋細い線で「ここから次」と分かるように */
.svc-hero-after{border-top:1px solid rgba(197,160,89,.28);padding-top:var(--hero-sp-after);margin-top:0;}

@media (max-height:640px){
  :root{--hero-chara:min(38vw,150px);--hero-sp-top:14px;--hero-sp-sub:20px;}
}