@charset "utf-8";
/* ==========================================================================
   L.U.X.I Studio / studio.css（2026-09-28 新設）
   トップ・/video/ など Studio 自社ページの共通土台。lp/*・demo/* には読み込まない。
   単独で読み込む（base.css・hub.css・lux-motion.css と併用しない）。
   部品の見本 = 設計/2026-09-28_studio-partials.html
   仕様の正本 = 設計/2026-09-28_デザイン仕様_Studio.md
   接頭辞は st-（旧サイトの lx-・hd・fv と衝突させない）

   目次
     0. トークン            9. カード
     1. 土台（リセット）   10. 端末の枠（スマホ・ノートPC・モニター・ブラウザ）
     2. 文字               11. 端末の並び（ステージ）
     3. レイアウト         12. ヒーロー
     4. 本文へ移動         13. 動画カード（縦・横・タイル）
     5. ヘッダー           14. 横スクロール列
     6. ボタン             15. 料金カード
     7. 節の見出し         16. CTA 帯
     8. タブ               17. 背景の光と金の曲線
                           18. フッター  19. 動画モーダル  20. 動きの停止・表示演出
                           21. 計測の同意バー  22. 動きを減らす設定・強制カラー
   ========================================================================== */

/* ---------- 0. トークン ---------- */
:root{
  /* 色: 深い夜のネイビー（Round1 の 2番）× 金。会社HP（luxi-group.com）と同じ系統 */
  --navy-950:#060F1C;   /* いちばん深い面（フッター・CTA 帯） */
  --navy-900:#0B1A2E;   /* 基調 */
  --navy-800:#11253F;   /* 一段上げた面 */
  --navy-700:#1B3456;   /* 区切り・押した時の面 */
  --steel-300:#B7C3D4;  /* 輪のロゴの銀 */
  --gold-200:#F7EACB;
  --gold-300:#EBD59E;   /* 見出しの金・細字の金 */
  --gold-400:#D9BC7A;   /* 金の基準（線・印・番号） */
  --gold-500:#C9A45C;   /* 枠線の金 */
  --gold-600:#A9853F;
  --gold-700:#7C6130;
  --ivory:#F4EEE2;      /* 本文の白（純白は使わない） */
  --ivory-mute:#B4BBC6; /* 補足の文字。navy-800 の上でも 4.5:1 以上 */

  --line-gold:rgba(201,164,92,.38);
  --line-faint:rgba(244,238,226,.12);
  --grad-gold:linear-gradient(105deg,var(--gold-600) 0%,var(--gold-300) 30%,var(--gold-200) 46%,var(--gold-400) 66%,var(--gold-600) 100%); /* 紺の文字を載せても最も暗い所で 5:1 */
  --grad-surface:linear-gradient(180deg,rgba(27,52,86,.55) 0%,rgba(11,26,46,.35) 100%);

  /* 書体: 見出し＝しっぽり明朝（会社HPと同じ）／英字のロゴ・小見出し＝Cinzel／本文＝Zen Kaku Gothic New */
  --ff-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --ff-latin:"Cinzel","Shippori Mincho","Times New Roman",serif;
  --ff-gothic:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;

  /* タイプスケール（床16px・天井76px・4.75倍） */
  --fs-display:clamp(2.5rem,1rem + 3.9vw,4.75rem);
  --fs-h2:clamp(1.875rem,1.3rem + 2.2vw,3.25rem);
  --fs-h3:clamp(1.25rem,1.05rem + .8vw,1.625rem);
  --fs-price:clamp(2.5rem,1.8rem + 2.6vw,4rem);
  --fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-logo:1.25rem;
  --fs-body:1rem;
  --lh-tight:1.3;
  --lh-body:1.95;
  --tr-mincho:.06em;
  --tr-latin:.16em;
  --tr-body:.04em;

  /* 余白 */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:72px;
  --sp-section:clamp(72px,9vw,136px);
  --gutter:clamp(20px,4.5vw,56px);
  --container:1320px;
  --hd-h:72px;

  /* 角丸 */
  --r-xs:3px;
  --r-s:8px;
  --r-m:14px;
  --r-l:22px;
  --r-pill:999px;

  /* 影 */
  --sh-card:0 26px 50px -30px rgba(0,0,0,.85);
  --sh-device:0 42px 70px -32px rgba(0,0,0,.9),0 16px 30px -18px rgba(0,0,0,.65);
  --sh-glow:0 0 0 1px rgba(201,164,92,.3),0 0 44px rgba(217,188,122,.2);

  /* 動き・重なり */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.4s;
  --z-header:50;
  --z-modal:100;
}

/* ---------- 1. 土台 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
  color-scheme:dark;
  scroll-padding-top:calc(var(--hd-h) + var(--sp-4));
  font-feature-settings:"palt" 1;
}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(120% 70% at 78% -10%,#16305A 0%,rgba(22,48,90,0) 55%),
    var(--navy-900);
  color:var(--ivory);
  font-family:var(--ff-gothic);
  font-size:var(--fs-body,1rem);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--ff-mincho);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-mincho);
  font-feature-settings:"palt" 1;
}
p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,video,svg,canvas{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:inherit; text-underline-offset:.25em; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--gold-400); outline-offset:3px; }
::selection{ background:var(--gold-500); color:var(--navy-900); }
html.st-lock,
body.st-lock{ overflow:hidden; }

/* ---------- 2. 文字 ---------- */
.st-display{
  font-family:var(--ff-mincho);
  font-weight:600;
  font-size:var(--fs-display,4.75rem);
  line-height:1.22;
  letter-spacing:.04em;
}
.st-h2{ font-size:var(--fs-h2,3.25rem); }
.st-h3{ font-size:var(--fs-h3,1.625rem); }
.st-lead{ font-size:var(--fs-lead,1.25rem); line-height:2; color:var(--ivory-mute); }
.st-en{
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  font-weight:500;
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
/* 金の箔文字。背景が塗れない環境では金の単色に戻る */
.st-gold-text{
  color:var(--gold-300);
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.st-note{ font-size:var(--fs-body,1rem); line-height:1.85; color:var(--ivory-mute); }
.st-note--sep{ margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid var(--line-faint); }
.st-nb{ display:inline-block; }

/* ---------- 3. レイアウト ---------- */
.st-wrap{
  width:min(calc(100% - var(--gutter) * 2),var(--container));
  margin-inline:auto;
}
.st-section{
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding-block:var(--sp-section);
  background:var(--navy-900);
}
.st-section--raised{ background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%); }
.st-section--deep{ background:var(--navy-950); }
.st-section--glow{
  background:
    radial-gradient(70% 55% at 50% 0%,rgba(22,48,90,.75) 0%,rgba(22,48,90,0) 70%),
    var(--navy-900);
}
.st-section--rule{ border-top:1px solid var(--line-gold); }
.st-grid{ display:grid; gap:var(--sp-5); }
.st-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:var(--sp-7) var(--sp-6); }
.st-grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
/* 縦動画カードの格子: 1枚は最大240px幅で中央に寄せる（スマホ幅は2列） */
.st-vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,240px));
  justify-content:center;
  gap:var(--sp-7) var(--sp-5);
}
@media (min-width:1100px){ .st-vgrid{ grid-template-columns:repeat(auto-fit,minmax(200px,240px)); } }

/* ---------- 4. 本文へ移動・読み上げ専用 ---------- */
.st-skip{
  position:absolute;
  left:var(--sp-4);
  top:-100px;
  z-index:calc(var(--z-header) + 1);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-s);
  background:var(--gold-400);
  color:var(--navy-900);
  font-weight:700;
  text-decoration:none;
}
.st-skip:focus{ top:var(--sp-3); }
.st-visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- 5. ヘッダー ---------- */
.st-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:rgba(8,19,34,.8);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-gold);
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.st-header.is-scrolled{
  background:rgba(6,15,28,.94);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.95);
}
.st-header__row{
  display:flex;
  align-items:center;
  gap:clamp(20px,2.6vw,40px);
  min-height:var(--hd-h);
}
.st-logo{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  margin-right:auto;
  color:var(--ivory);
  text-decoration:none;
}
.st-logo__mark{ flex:none; width:40px; height:34px; }
.st-logo__text{
  font-family:var(--ff-latin);
  font-size:var(--fs-logo,1.25rem);
  line-height:1;
  letter-spacing:.14em;
  white-space:nowrap;
}
.st-logo__text b{ font-weight:600; color:var(--gold-300); }
.st-logo__text span{ margin-left:.4em; font-weight:400; color:var(--steel-300); } /* 会社HPの「ラクシー」と同じ銀青 */
.st-nav{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.4vw,40px);
}
.st-nav__link{
  position:relative;
  padding-block:var(--sp-2);
  font-size:var(--fs-body,1rem);
  font-weight:500;
  letter-spacing:.08em;
  color:var(--ivory);
  text-decoration:none;
  white-space:nowrap;
}
.st-nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:1px;
  background:var(--grad-gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.st-nav__link:hover::after,
.st-nav__link[aria-current]::after{ transform:scaleX(1); }
.st-nav__link[aria-current]{ color:var(--gold-300); }
.st-nav .st-nav__cta{ display:none; }
.st-menu-btn{
  display:none;
  place-items:center;
  width:48px; height:48px;
  margin-right:calc(var(--sp-2) * -1);
}
.st-menu-btn__bars,
.st-menu-btn__bars::before,
.st-menu-btn__bars::after{
  display:block;
  width:30px; height:1.5px;
  background:var(--gold-400);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.st-menu-btn__bars{ position:relative; }
.st-menu-btn__bars::before,
.st-menu-btn__bars::after{ content:""; position:absolute; left:0; }
.st-menu-btn__bars::before{ top:-9px; }
.st-menu-btn__bars::after{ top:9px; }
.st-header.is-open .st-menu-btn__bars{ background-color:transparent; }
.st-header.is-open .st-menu-btn__bars::before{ transform:translateY(9px) rotate(45deg); }
.st-header.is-open .st-menu-btn__bars::after{ transform:translateY(-9px) rotate(-45deg); }

@media (max-width:959.98px){
  :root{ --hd-h:60px; }
  .st-logo__mark{ width:34px; height:29px; }
  /* JS が無い時: ナビをロゴの下に折り返して並べる（隠さない） */
  .st-header__row{ flex-wrap:wrap; }
  .st-nav{ flex-wrap:wrap; gap:0 var(--sp-5); width:100%; padding-bottom:var(--sp-2); }
  /* JS が無い時はナビの中に相談ボタンがあるので、ヘッダーの小さいボタンは隠す */
  .st-header .st-header__cta{ display:none; }
  /* JS がある時: ハンバーガーで開く板にする。相談ボタンは小さくしてハンバーガーの左に残す（最初の画面に1つは出す） */
  .st-js .st-header__row{ flex-wrap:nowrap; gap:var(--sp-3); }
  .st-js .st-header .st-header__cta{ display:inline-flex; min-height:44px; padding:.35em 1em; letter-spacing:.04em; }
  .st-logo{ min-height:44px; }
  .st-js .st-menu-btn{ display:grid; }
  .st-js .st-nav{
    position:fixed;
    top:var(--hd-h); left:0; right:0;
    max-height:calc(100dvh - var(--hd-h));
    overflow-y:auto;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0;
    width:auto;
    padding:var(--sp-3) var(--gutter) var(--sp-7);
    background:
      radial-gradient(90% 50% at 100% 0%,rgba(22,48,90,.8) 0%,rgba(22,48,90,0) 70%),
      var(--navy-950);
    border-bottom:1px solid var(--line-gold);
    box-shadow:0 30px 40px -20px rgba(0,0,0,.8);
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);
  }
  .st-js .st-header.is-open .st-nav{
    visibility:visible;
    opacity:1;
    transform:none;
    transition-delay:0s;
  }
  .st-js .st-nav__link{
    padding-block:var(--sp-4);
    border-bottom:1px solid var(--line-faint);
    font-family:var(--ff-mincho);
    font-size:var(--fs-lead,1.25rem);
  }
  .st-js .st-nav__link::after{ display:none; }
  .st-js .st-nav .st-nav__cta{ display:flex; margin-top:var(--sp-6); }
}

.st-btn.st-header__cta{ gap:0; flex:none; white-space:nowrap; }
/* 2026-09-29: ナビに「ホームページ」を足して6項目になったので、960〜1199px は間隔を詰め、相談ボタンを「相談」だけにする（ボタンが縮んで2行に割れるのを防ぐ） */
@media (min-width:960px) and (max-width:1199.98px){
  .st-nav{ gap:16px; }
  .st-header__cta .st-hide-sp{ display:none; }
}
@media (max-width:959.98px){
  .st-header__cta .st-hide-sp{ display:none; }
}
@media (max-width:399.98px){
  .st-logo{ gap:var(--sp-2); }
  .st-logo__text{ font-size:var(--fs-body,1rem); letter-spacing:.1em; }
}

/* ---------- 6. ボタン ---------- */
.st-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  min-height:52px;
  padding:.6em 1.9em;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--ff-gothic);
  font-size:var(--fs-body,1rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.08em;
  text-align:center;
  text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-position .9s var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
/* 金の塗り（主役の1つ）。文字は紺。金のいちばん暗い所でも 5:1 */
.st-btn--gold{
  color:var(--navy-900);
  background-color:var(--gold-400);
  background-image:linear-gradient(105deg,var(--gold-500) 0%,var(--gold-300) 48%,var(--gold-400) 100%);
  background-size:100% 100%;
  box-shadow:0 12px 30px -14px rgba(217,188,122,.6),inset 0 1px 0 rgba(255,255,255,.45);
}
.st-btn--gold:hover{
  background-image:linear-gradient(105deg,var(--gold-400) 0%,var(--gold-200) 48%,var(--gold-300) 100%);
  transform:translateY(-1px);
}
/* 金の枠（脇役） */
.st-btn--line{
  color:var(--gold-200);
  border-color:var(--gold-500);
  background-color:rgba(11,26,46,.3);
}
.st-btn--line:hover{ color:var(--ivory); border-color:var(--gold-300); background-color:rgba(201,164,92,.16); }
.st-btn--rect{ border-radius:var(--r-xs); }
.st-btn--sm{ min-height:44px; padding:.45em 1.3em; }
.st-btn--wide{ width:min(100%,560px); min-height:64px; font-size:var(--fs-lead,1.25rem); }
.st-btn__ico{ font-family:var(--ff-latin); font-weight:400; }

/* ---------- 7. 節の見出し（小さな輪＋明朝＋細い金線） ---------- */
/* 輪: 会社HPのロゴと同じ「左右の弧＋下の短い線」。左は銀、右は金 */
.st-ring{
  display:inline-block;
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold-400);
  vertical-align:.2em;
}
.st-shead__en .st-ring,
.st-hero__eyebrow .st-ring{
  width:26px; height:22px;
  border-radius:0;
  vertical-align:-.3em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='20' y1='1' x2='20' y2='33'%3E%3Cstop offset='0' stop-color='%237F9CC4'/%3E%3Cstop offset='.42' stop-color='%23A9B9D0'/%3E%3Cstop offset='.72' stop-color='%23E9D29A'/%3E%3Cstop offset='1' stop-color='%23C9A45C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M17 1 A16 16 0 0 0 17 33 A12.5 16 0 0 1 17 1 Z' fill='url(%23g)'/%3E%3Cpath d='M23 1 A16 16 0 0 1 23 33 A12.5 16 0 0 0 23 1 Z' fill='url(%23g)'/%3E%3C/svg%3E") center/contain no-repeat; /* 小さい輪では下の短い線が顔文字のように見えるので、左右の弧だけにする */
}
.st-shead{
  display:grid;
  gap:var(--sp-4);
  margin-bottom:clamp(32px,4vw,56px);
}
.st-shead__en{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  font-weight:500;
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
.st-shead__row{ display:flex; align-items:center; gap:var(--sp-5); }
.st-shead__title{ font-size:var(--fs-h2,3.25rem); color:var(--ivory); }
.st-shead__rule{
  flex:1 1 40px;
  height:1px;
  background:linear-gradient(90deg,var(--gold-500) 0%,rgba(201,164,92,0) 100%);
}
.st-shead__tools{ display:flex; flex:none; gap:var(--sp-3); margin-left:auto; }
.st-shead__lead{ max-width:46em; font-size:var(--fs-lead,1.25rem); color:var(--ivory-mute); }
.st-shead--center{ justify-items:center; text-align:center; }
@media (max-width:759.98px){
  .st-shead__row{ gap:var(--sp-3); }
  .st-shead__rule{ flex-basis:16px; }
  .st-shead__tools .st-arrow{ width:44px; height:44px; }
}
.st-shead--center .st-shead__rule{ display:none; }

/* ---------- 8. タブ（丸い錠剤型） ---------- */
.st-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin-bottom:clamp(28px,3.4vw,48px);
}
.st-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.4em 1.6em;
  border:1px solid rgba(201,164,92,.55);
  border-radius:var(--r-pill);
  background-color:rgba(11,26,46,.4);
  color:var(--ivory);
  font-size:var(--fs-body,1rem);
  font-weight:500;
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.st-tab:hover{ border-color:var(--gold-300); color:var(--gold-200); }
.st-tab[aria-selected="true"],
.st-tab[aria-current="page"]{
  border-color:transparent;
  background:var(--grad-gold);
  color:var(--navy-900);
  font-weight:700;
  box-shadow:0 10px 24px -14px rgba(217,188,122,.7);
}
.st-tabpanel:focus-visible{ outline-offset:8px; border-radius:var(--r-s); }
@media (max-width:759.98px){
  /* スマホは1行の横スクロールにして、タブの並びを崩さない */
  .st-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    margin-inline:calc(var(--gutter) * -1);
    padding:2px var(--gutter) var(--sp-2);
    scrollbar-width:none;
  }
  .st-tabs::-webkit-scrollbar{ display:none; }
}

/* ---------- 9. カード ---------- */
.st-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:clamp(24px,2.6vw,36px);
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:var(--grad-surface);
  box-shadow:var(--sh-card);
}
.st-card__icon{
  display:grid;
  place-items:center;
  align-self:center;
  width:76px; height:76px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(217,188,122,.18) 0%,rgba(217,188,122,0) 70%);
  color:var(--gold-400);
}
.st-card__icon svg{ width:36px; height:36px; }
.st-card__title{ font-size:var(--fs-h3,1.625rem); color:var(--gold-300); text-align:center; }
.st-card__text{ color:var(--ivory-mute); }
.st-card__media{
  margin-top:auto;
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid var(--line-faint);
  border-radius:var(--r-s);
}
.st-card__media > img,
.st-card__media > video{ width:100%; height:100%; object-fit:cover; }
a.st-card{ text-decoration:none; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease); }
a.st-card:hover{ transform:translateY(-4px); border-color:var(--gold-400); }

/* ---------- 10. 端末の枠（純CSS。画像に頼らない） ---------- */
/* 中身は <span> で組んでも <div> で組んでもよい（リンクやボタンの中に入れる時は span） */

/* スマホ: 外形 9:15.45。縁（3%）と枠線を引いた画面がちょうど 9:16 になり、縦動画を左右で切らない */
.st-phone{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:9/15.45;
  padding:3%;
  border:2px solid transparent;
  border-radius:15% / 8.8%;
  background:
    linear-gradient(160deg,#2A2F38 0%,#0B0D11 32%,#1A1D23 62%,#07080B 100%) padding-box,
    linear-gradient(135deg,var(--gold-200) 0%,#8A7A5C 22%,var(--gold-400) 46%,#4E4838 72%,var(--gold-300) 100%) border-box;
  box-shadow:var(--sh-device);
}
/* 側面のボタン（右＝電源、左＝音量） */
.st-phone::before,
.st-phone::after{
  content:"";
  position:absolute;
  width:3px;
  background:linear-gradient(180deg,var(--gold-300),var(--gold-700));
}
.st-phone::before{ right:-4px; top:24%; height:10%; border-radius:0 2px 2px 0; }
.st-phone::after{ left:-4px; top:19%; height:14%; border-radius:2px 0 0 2px; }
.st-phone__screen{
  position:relative;
  display:block;
  width:100%; height:100%;
  overflow:hidden;
  isolation:isolate;
  border-radius:12% / 6.9%;
  background:var(--navy-950);
}
.st-phone__screen > video,
.st-phone__screen > img{ width:100%; height:100%; object-fit:cover; }
/* 画面上部の島（カメラ）と、ガラスの映り込み */
.st-phone__screen::before{
  content:"";
  position:absolute;
  z-index:3;
  top:2%; left:50%;
  width:26%; height:2.6%;
  transform:translateX(-50%);
  border-radius:var(--r-pill);
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.st-phone__screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 40%);
}

/* ノートPC: 蓋（画面 16:9）＋金属の台 */
.st-laptop{ position:relative; display:block; width:100%; }
.st-laptop__lid{
  position:relative;
  display:block;
  margin-inline:6.5%;
  padding:2.3% 2.3% 3%;
  border:1.5px solid transparent;
  border-radius:3.4% / 5.4%;
  background:
    linear-gradient(180deg,#1C2027 0%,#0B0D11 100%) padding-box,
    linear-gradient(160deg,#CFD3DA 0%,#6F747C 40%,#AEB3BB 70%,#5D6168 100%) border-box;
  box-shadow:var(--sh-device);
}
.st-laptop__lid::before{
  content:"";
  position:absolute;
  top:1.1%; left:50%;
  width:6px; height:6px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#2B3038;
}
.st-laptop__screen{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--r-xs);
  background:var(--navy-950);
}
.st-laptop__screen > video,
.st-laptop__screen > img{ width:100%; height:100%; object-fit:cover; }
.st-laptop__screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 34%);
}
.st-laptop__base{
  position:relative;
  display:block;
  height:0;
  padding-top:3.4%;
  border-radius:2px 2px 16px 16px / 2px 2px 100% 100%;
  background:linear-gradient(180deg,#E6E9ED 0%,#AEB3BB 42%,#6A6F77 100%);
  box-shadow:0 22px 30px -14px rgba(0,0,0,.9);
}
.st-laptop__base::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:13%; height:36%;
  transform:translateX(-50%);
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#8E939B,#C3C7CD);
}

/* モニター: パネル（16:9）＋首＋足 */
.st-monitor{ position:relative; display:block; width:100%; }
.st-monitor__panel{
  display:block;
  padding:1.1%;
  border:1.5px solid transparent;
  border-radius:1.6% / 2.8%;
  background:
    linear-gradient(180deg,#15181D 0%,#050608 100%) padding-box,
    linear-gradient(160deg,#CFD3DA 0%,#70757E 50%,#B6BAC1 100%) border-box;
  box-shadow:var(--sh-device);
}
.st-monitor__screen{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--r-xs);
  background:var(--navy-950);
}
.st-monitor__screen > video,
.st-monitor__screen > img{ width:100%; height:100%; object-fit:cover; }
.st-monitor__stand{
  display:block;
  width:13%; height:0;
  margin-inline:auto;
  padding-top:8%;
  background:linear-gradient(90deg,#7D828A 0%,#D6D9DE 45%,#9AA0A8 70%,#6D7178 100%);
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
}
.st-monitor__foot{
  display:block;
  width:30%; height:0;
  margin-inline:auto;
  padding-top:1.6%;
  border-radius:50% 50% 8px 8px / 100% 100% 8px 8px;
  background:linear-gradient(180deg,#D9DCE0 0%,#8A8F97 100%);
  box-shadow:0 18px 24px -12px rgba(0,0,0,.9);
}

/* ブラウザの窓（横長の小さなカード用） */
.st-browser{
  display:block;
  overflow:hidden;
  border:1px solid rgba(244,238,226,.18);
  border-radius:var(--r-s);
  background:var(--navy-950);
  box-shadow:var(--sh-card);
}
.st-browser__bar{
  display:flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding-inline:12px;
  border-bottom:1px solid var(--line-faint);
  background:linear-gradient(180deg,var(--navy-700) 0%,var(--navy-800) 100%);
}
.st-browser__bar i{ width:7px; height:7px; border-radius:50%; background:rgba(244,238,226,.34); }
.st-browser__screen{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; }
.st-browser__screen > img,
.st-browser__screen > video{ width:100%; height:100%; object-fit:cover; object-position:50% 0; }

/* 傾け・床の映り込み */
.st-tilt-l{ transform:perspective(1400px) rotateY(10deg) rotate(-9deg); }
.st-tilt-r{ transform:perspective(1400px) rotateY(-10deg) rotate(8deg); }
/* 映り込みは下に空きがある所だけ（棚・ステージ）。下に文字が続くカードには付けない */
@supports (-webkit-box-reflect:below 0){
  .st-reflect{ -webkit-box-reflect:below 6px linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 74%,rgba(255,255,255,.2) 100%); }
}

/* ---------- 11. 端末の並び（ステージ）: ノートPC＋傾いたスマホ3台（Round1 の 8番の見せ方） ---------- */
.st-stage{
  position:relative;
  display:block;
  aspect-ratio:16/10.5;
  isolation:isolate;
}
.st-stage__item{ position:absolute; display:block; }
.st-stage__laptop{ left:0; bottom:9%; width:62%; z-index:1; }
.st-stage__phone--1{ left:46%; top:3%; width:23%; z-index:4; transform:perspective(1400px) rotateY(12deg) rotate(-10deg); }
.st-stage__phone--2{ left:66%; top:10%; width:19.5%; z-index:3; transform:perspective(1400px) rotateY(-6deg) rotate(4deg); }
.st-stage__phone--3{ left:82%; top:19%; width:17.5%; z-index:2; transform:perspective(1400px) rotateY(-12deg) rotate(11deg); }
/* 磨いた石の床。上端に金の光を1本 */
.st-stage__floor{
  position:absolute;
  left:-8%; right:-8%; bottom:0;
  height:24%;
  z-index:0;
  border-top:1px solid rgba(217,188,122,.3);
  background:
    radial-gradient(60% 90% at 50% 0%,rgba(217,188,122,.2) 0%,rgba(217,188,122,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#0E1B2D 0%,#060D18 100%);
  -webkit-mask-image:radial-gradient(50% 100% at 50% 0%,#000 30%,transparent 100%);
  mask-image:radial-gradient(50% 100% at 50% 0%,#000 30%,transparent 100%);
}
/* 縦動画を横に並べる棚（/video/ の最初の見せ方: 動画ページ PC の上段）。中はスマホ枠だけを置く（文字は棚の外へ） */
.st-shelf{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--st-shelf-n,4),minmax(0,250px));
  justify-content:center;
  gap:clamp(14px,2.2vw,36px);
  align-items:end;
  padding-bottom:clamp(20px,3vw,44px);
}
.st-shelf > a{ display:block; color:inherit; border-radius:var(--r-l); }
.st-shelf > a > .st-phone{ transition:transform .6s var(--ease); }
.st-shelf > a:hover > .st-phone,
.st-shelf > a:focus-visible > .st-phone{ transform:translateY(-6px); }
.st-shelf::after{
  content:"";
  position:absolute;
  left:-6%; right:-6%; bottom:0;
  height:clamp(20px,3vw,44px);
  z-index:-1;
  border-top:1px solid rgba(217,188,122,.28);
  background:
    radial-gradient(50% 100% at 50% 0%,rgba(217,188,122,.18) 0%,rgba(217,188,122,0) 70%),
    linear-gradient(180deg,#0E1B2D 0%,rgba(6,13,24,0) 100%);
}
@media (max-width:719.98px){
  .st-stage{ aspect-ratio:1/.92; }
  .st-stage__laptop{ bottom:10%; width:64%; }
  .st-stage__phone--1{ left:38%; top:1%; width:35%; }
  .st-stage__phone--2{ left:67%; top:16%; width:30%; }
  .st-stage__phone--3{ display:none; }
  .st-shelf{
    grid-template-columns:none;
    justify-content:start; /* 中央寄せのままだと1台目が左の届かない位置に隠れる */
    grid-auto-flow:column;
    grid-auto-columns:min(46vw,220px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter); /* 吸着しても1台目の左に余白を残す */
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .st-shelf > *{ scroll-snap-align:start; }
  .st-shelf::after{ display:none; }
}

/* ---------- 12. ヒーロー（トップPC＝コピー左・端末右／スマホ＝コピー→端末→金の太いボタン） ---------- */
.st-hero{
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding-block:clamp(36px,5.5vw,88px) clamp(56px,7vw,112px);
  background:
    radial-gradient(55% 70% at 86% 36%,rgba(27,52,86,.55) 0%,rgba(27,52,86,0) 62%),
    linear-gradient(180deg,var(--navy-900) 0%,var(--navy-950) 100%);
}
.st-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,11fr) minmax(0,13fr);
  grid-template-areas:"copy stage" "actions stage";
  grid-template-rows:auto 1fr;
  column-gap:clamp(24px,3vw,56px);
  align-items:center;
}
.st-hero__copy{ grid-area:copy; position:relative; z-index:2; align-self:end; }
.st-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.8em;
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
.st-hero__eyebrow::after{
  content:"";
  width:56px; height:1px;
  background:linear-gradient(90deg,var(--gold-400),rgba(217,188,122,0));
}
.st-hero__title{
  margin-top:var(--sp-5);
  font-size:var(--fs-display,4.75rem);
  line-height:1.24;
  letter-spacing:.05em;
}
.st-hero__lead{
  max-width:30em;
  margin-top:var(--sp-5);
  font-size:var(--fs-lead,1.25rem);
  color:var(--ivory-mute);
}
.st-hero__actions{
  grid-area:actions;
  align-self:start;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.st-hero__stage{ grid-area:stage; position:relative; z-index:1; }
.st-hero__note{ margin-top:var(--sp-3); font-size:var(--fs-body,1rem); color:var(--ivory-mute); text-align:right; }
/* 右上の大きな弧（会社HPの輪と同じ曲率の一部） */
.st-hero__arc{
  position:absolute;
  z-index:-1;
  top:-38%; right:-20%;
  width:min(78vw,1100px);
  aspect-ratio:1;
  border:1px solid rgba(217,188,122,.42);
  border-radius:50%;
  background:radial-gradient(circle at 38% 42%,rgba(27,52,86,.5) 0%,rgba(11,26,46,0) 64%);
  pointer-events:none;
}
.st-hero__still{ position:absolute; right:var(--gutter); bottom:var(--sp-4); z-index:3; }
/* 2026-09-29: ヒーローの見出しとリードは、言葉の途中で折らない（Chrome・Edge の auto-phrase。ほかのブラウザは従来どおり） */
.st-hero__title,
.st-hero__lead{ word-break:auto-phrase; }
@media (min-width:1100px) and (max-width:1360px){
  .st-hero__arc{ right:-26%; }
}
@media (max-width:959.98px){
  .st-hero__grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "stage" "actions";
    grid-template-rows:auto;
  }
  .st-hero__stage{ margin-top:var(--sp-6); }
  .st-hero__actions{ margin-top:var(--sp-5); }
  .st-hero__actions .st-btn{ flex:1 1 100%; }
  .st-hero__arc{ top:18%; right:-60%; width:130vw; }
  .st-hero__note{ text-align:left; }
}

/* ---------- 13. 動画カード ---------- */
/* 縦＝スマホ枠（st-vcard）／横＝ノートPC・モニター枠（st-hcard）。押すと本編がモーダルで開く */
.st-vcard,
.st-hcard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  min-width:0;
}
.st-vcard__hit,
.st-hcard__hit{
  position:relative;
  display:block;
  color:inherit;
  text-decoration:none;
  border-radius:var(--r-l);
}
.st-vcard__hit > .st-phone,
.st-hcard__hit > .st-laptop,
.st-hcard__hit > .st-monitor{ transition:transform .6s var(--ease); }
.st-vcard__hit:hover > .st-phone,
.st-vcard__hit:focus-visible > .st-phone,
.st-hcard__hit:hover > .st-laptop,
.st-hcard__hit:focus-visible > .st-laptop,
.st-hcard__hit:hover > .st-monitor,
.st-hcard__hit:focus-visible > .st-monitor{ transform:translateY(-6px); }
.st-vcard__hit:focus-visible,
.st-hcard__hit:focus-visible{ outline-offset:8px; }
.st-vcard__body,
.st-hcard__body{ display:grid; gap:var(--sp-2); }
.st-vcard__kind,
.st-hcard__kind{
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
.st-vcard__title,
.st-hcard__title{ font-size:var(--fs-h3,1.625rem); color:var(--ivory); }
.st-vcard__text,
.st-hcard__text{ color:var(--ivory-mute); }
.st-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1) var(--sp-5);
  color:var(--ivory-mute);
}
.st-meta div{ display:flex; gap:.6em; }
.st-meta dt{ flex:none; color:var(--gold-400); }
/* 再生の印（白い輪＋三角）。枠の画面の真ん中に置く */
.st-play{
  position:absolute;
  z-index:4;
  top:50%; left:50%;
  display:grid;
  place-items:center;
  width:clamp(46px,4.2vw,62px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:50%;
  background-color:rgba(6,15,28,.3);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.st-play::before{
  content:"";
  width:32%; height:36%;
  margin-left:9%;
  background:#FFF;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.st-vcard__hit:hover .st-play,
.st-hcard__hit:hover .st-play,
.st-tile:hover .st-play,
.st-vcard__hit:focus-visible .st-play,
.st-hcard__hit:focus-visible .st-play,
.st-tile:focus-visible .st-play{
  border-color:var(--gold-300);
  background-color:rgba(201,164,92,.4);
  transform:translate(-50%,-50%) scale(1.06);
}
.st-phone .st-play{
  top:auto; bottom:9%;
  width:clamp(40px,3.4vw,52px);
  transform:translate(-50%,0);
  background-color:rgba(6,15,28,.45);
}
.st-vcard__hit:hover .st-phone .st-play,
.st-vcard__hit:focus-visible .st-phone .st-play,
a:hover > .st-phone .st-play,
a:focus-visible > .st-phone .st-play{ transform:translate(-50%,0) scale(1.06); }
/* 自主制作の札 */
.st-badge{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  gap:.5em;
  padding:.1em .9em;
  border:1px solid var(--line-gold);
  border-radius:var(--r-pill);
  color:var(--gold-300);
  font-size:var(--fs-body,1rem);
  line-height:1.8;
  letter-spacing:.06em;
}
/* 横スクロール列に並べる小さなタイル（縦 9:16／横は --wide） */
.st-tile{
  position:relative;
  display:block;
  flex:none;
  width:clamp(150px,15vw,210px);
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid rgba(244,238,226,.16);
  border-radius:var(--r-m);
  background:var(--navy-800);
  box-shadow:var(--sh-card);
  color:var(--ivory);
  text-decoration:none;
}
.st-tile--wide{ width:clamp(260px,27vw,400px); aspect-ratio:16/11; }
.st-tile > video,
.st-tile > img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.st-tile:hover > video,
.st-tile:hover > img{ transform:scale(1.04); }
.st-tile__cap{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding:var(--sp-7) var(--sp-3) var(--sp-3);
  background:linear-gradient(180deg,rgba(6,15,28,0) 0%,rgba(6,15,28,.9) 70%);
  font-size:var(--fs-body,1rem);
  line-height:1.6;
}

/* ---------- 14. 横スクロール列 ---------- */
.st-rail{ position:relative; }
.st-rail__track{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:var(--sp-1) 2px var(--sp-4);
  scrollbar-width:thin;
  scrollbar-color:var(--gold-600) transparent;
}
.st-rail__track > *{ scroll-snap-align:start; }
.st-rail__track:focus-visible{ outline-offset:4px; }
/* スマホは画面の端まで流す */
@media (max-width:759.98px){
  .st-rail__track{
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
  }
  .st-tile{ width:min(42vw,200px); }
  .st-tile--wide{ width:min(78vw,340px); }
}
/* 丸い矢印ボタン */
.st-arrow{
  display:inline-grid;
  place-items:center;
  flex:none;
  width:48px; height:48px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  background-color:rgba(11,26,46,.5);
  color:var(--gold-300);
  transition:background-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.st-arrow::before{
  content:"";
  width:10px; height:10px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:translateX(-2px) rotate(45deg);
}
.st-arrow--prev::before{ transform:translateX(2px) rotate(-135deg); }
.st-arrow:hover{ background-color:rgba(201,164,92,.18); }
.st-arrow[aria-disabled="true"]{ opacity:.35; cursor:default; }
.st-arrow[aria-disabled="true"]:hover{ background-color:rgba(11,26,46,.5); }

/* ---------- 15. 料金カード ---------- */
.st-prices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--sp-5);
  align-items:stretch;
}
.st-price{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:clamp(28px,3vw,40px);
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:var(--grad-surface);
  box-shadow:var(--sh-card);
}
/* 強調したい1枚だけ（理由のない「人気」「おすすめ」の札は付けない） */
.st-price--pick{
  border-color:transparent;
  background:
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%) padding-box,
    var(--grad-gold) border-box;
  box-shadow:var(--sh-glow),var(--sh-card);
}
.st-price__kind{
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
.st-price__name{ font-size:var(--fs-h3,1.625rem); color:var(--ivory); }
.st-price__spec{ color:var(--ivory-mute); }
.st-price__num{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0 .2em;
  font-family:var(--ff-mincho);
  font-size:var(--fs-h3,1.625rem);
  line-height:1.15;
  color:var(--gold-300);
}
.st-price__num strong{
  font-family:var(--ff-latin);
  font-size:var(--fs-price,4rem);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--gold-300);
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.st-price__tax{
  margin-right:.5em;
  font-family:var(--ff-gothic);
  font-size:var(--fs-body,1rem);
  color:var(--ivory-mute);
}
.st-price__sub{
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-faint);
  color:var(--ivory);
}
.st-price__list{ display:grid; gap:var(--sp-2); color:var(--ivory-mute); }
.st-price__list li{ position:relative; padding-left:1.2em; }
.st-price__list li::before{
  content:"";
  position:absolute;
  left:0; top:.8em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold-400);
}
/* 料金のそばに必ず置く一文 */
.st-flex-note{
  display:flex;
  align-items:flex-start;
  gap:.7em;
  margin-top:auto;
  padding-top:var(--sp-4);
  color:var(--gold-200);
  line-height:1.8;
}
.st-flex-note .st-ring{ margin-top:.72em; }

/* ---------- 16. CTA 帯（3つの窓口＋金の太いボタン） ---------- */
.st-cta{
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding-block:var(--sp-section);
  border-top:1px solid var(--line-gold);
  background:
    radial-gradient(50% 70% at 50% 100%,rgba(22,48,90,.85) 0%,rgba(22,48,90,0) 70%),
    var(--navy-950);
}
.st-cta__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.st-cta__col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-5) clamp(16px,3vw,48px);
  text-align:center;
}
.st-cta__col + .st-cta__col{ border-left:1px solid var(--line-gold); }
.st-cta__title{ font-size:var(--fs-h3,1.625rem); color:var(--gold-300); }
.st-cta__text{ color:var(--ivory-mute); }
.st-cta__col .st-btn{ margin-top:auto; }
.st-cta__main{ display:flex; justify-content:center; margin-top:var(--sp-7); }
@media (max-width:759.98px){
  .st-cta__cols{ grid-template-columns:minmax(0,1fr); }
  .st-cta__col + .st-cta__col{ border-left:0; border-top:1px solid var(--line-gold); }
  .st-cta__col{ padding-inline:0; }
}

/* ---------- 17. 背景の光（ぼけ）と金の曲線 ---------- */
.st-bokeh{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  display:none;
  background:
    radial-gradient(34px 34px at 1.5% 84%,rgba(236,206,140,.22),rgba(236,206,140,0)),
    radial-gradient(60px 60px at 2.5% 94%,rgba(201,164,92,.12),rgba(201,164,92,0)),
    radial-gradient(44px 44px at 98.5% 10%,rgba(236,206,140,.2),rgba(236,206,140,0)),
    radial-gradient(80px 80px at 99% 20%,rgba(201,164,92,.1),rgba(201,164,92,0));
  filter:blur(1.5px);
}
.st-hero > .st-bokeh,
.st-cta > .st-bokeh{ display:block; }
/* 大きな輪の一部（位置は親の中で top/left などを上書きして決める） */
.st-arc{
  position:absolute;
  z-index:-1;
  width:min(70vw,900px);
  aspect-ratio:1;
  border:1px solid rgba(217,188,122,.36);
  border-radius:50%;
  pointer-events:none;
}
/* 金の曲線（SVG を入れる箱。SVG は partials の CTA 帯を参照） */
.st-curves{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:-1;
  height:62%;
  pointer-events:none;
}
.st-curves svg{ width:100%; height:100%; }
.st-curves{ opacity:.55; } /* 本文の後ろを通る所で文字の邪魔をしない濃さ */

/* ---------- 18. フッター ---------- */
.st-footer{
  padding-block:clamp(48px,6vw,80px) var(--sp-6);
  border-top:1px solid var(--line-gold);
  background:var(--navy-950);
  color:var(--ivory-mute);
}
.st-footer__top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--sp-6);
}
.st-footer__tag{ margin-top:var(--sp-4); font-family:var(--ff-mincho); color:var(--ivory); }
.st-footer__nav{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:var(--sp-3) var(--sp-6); }
.st-footer__nav a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ivory); text-decoration:none; } /* 指で押しやすい高さ（44px） */
.st-footer__nav a:hover{ color:var(--gold-300); text-decoration:underline; }
.st-footer__bottom{
  display:grid;
  gap:var(--sp-3);
  margin-top:var(--sp-7);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line-faint);
}
.st-footer__note{ max-width:62em; }
.st-footer__note a{ color:var(--gold-300); }
.st-footer__copy{ font-family:var(--ff-latin); letter-spacing:var(--tr-latin); color:var(--gold-400); }

/* ---------- 19. 動画モーダル（studio.js が <dialog> を作る） ---------- */
.st-modal{
  width:100%; height:100%;
  max-width:none; max-height:none;
  margin:0;
  padding:var(--sp-8) var(--gutter) var(--sp-6);
  border:0;
  background:transparent;
  color:var(--ivory);
}
.st-modal[open]{ display:grid; place-items:center; }
.st-modal::backdrop{
  background:rgba(4,9,17,.9);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
/* <dialog> が使えない古い端末のための代わり */
.st-modal.is-fallback{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  background:rgba(4,9,17,.94);
}
.st-modal__box{ display:grid; justify-items:center; gap:var(--sp-3); max-width:100%; }
.st-modal__frame{
  overflow:hidden;
  border-radius:var(--r-m);
  background:#000;
  box-shadow:var(--sh-glow),var(--sh-device);
}
.st-modal[data-ratio="portrait"] .st-modal__frame{ height:min(78vh,860px); height:min(calc(100dvh - 240px),860px); max-width:100%; aspect-ratio:9/16; }
.st-modal[data-ratio="portrait"] .st-modal__frame video{ object-fit:cover; }
.st-modal[data-ratio="landscape"] .st-modal__frame{ width:min(100%,1200px); max-height:78vh; aspect-ratio:16/9; }
.st-modal__frame video{ width:100%; height:100%; object-fit:contain; background:#000; }
.st-modal__title{ font-family:var(--ff-mincho); font-size:var(--fs-lead,1.25rem); color:var(--ivory); text-align:center; }
.st-modal__note{ color:var(--ivory-mute); text-align:center; }
/* スマホを横にしたときなど、高さが足りない画面では動画を優先する */
@media (max-height:500px){
  .st-modal{ padding:12px 72px 12px var(--gutter); }
  .st-modal__box{ gap:var(--sp-2); }
  .st-modal__note{ display:none; }
  .st-modal__title{ font-size:var(--fs-body,1rem); }
  .st-modal[data-ratio="portrait"] .st-modal__frame{ height:calc(100dvh - 68px); }
  .st-modal[data-ratio="landscape"] .st-modal__frame{ width:auto; height:calc(100dvh - 68px); max-height:none; max-width:100%; }
}
.st-modal__close{
  position:fixed;
  top:var(--sp-4); right:var(--sp-4);
  z-index:2;
  display:grid;
  place-items:center;
  width:52px; height:52px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  background-color:rgba(11,26,46,.7);
  color:var(--gold-200);
}
.st-modal__close::before,
.st-modal__close::after{
  content:"";
  grid-area:1/1;
  width:22px; height:1.5px;
  background:currentColor;
}
.st-modal__close::before{ transform:rotate(45deg); }
.st-modal__close::after{ transform:rotate(-45deg); }
.st-modal__close:hover{ background-color:rgba(201,164,92,.2); }

/* ---------- 20. 動きの停止ボタン・ふわっと表示 ---------- */
.st-still-btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  min-height:44px;
  padding-inline:.3em;
  border-bottom:1px solid var(--line-faint);
  color:var(--ivory-mute);
  font-size:var(--fs-body,1rem);
}
.st-still-btn::before{
  content:"";
  width:10px; height:12px;
  border-left:3px solid currentColor;
  border-right:3px solid currentColor;
}
.st-still .st-still-btn::before{
  border:0;
  background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.st-still-btn:hover{ color:var(--gold-300); }
.st-reduce .st-still-btn{ display:none; }
/* head の小さな script が html に st-pre を付けたページだけ効く（JS が落ちても隠れたままにしない） */
[data-st-reveal]{ transition:opacity .9s var(--ease),transform .9s var(--ease); }
.st-pre [data-st-reveal]:not(.is-in){ opacity:0; transform:translateY(18px); }

/* ---------- 21. 計測の同意バー（analytics.js が作る DOM に studio.js が st-consent を付ける） ---------- */
.st-consent{
  position:relative;
  z-index:40;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3) var(--sp-4);
  padding:var(--sp-4) var(--gutter);
  border-top:1px solid var(--line-gold);
  background:var(--navy-800);
  color:var(--ivory);
  font-size:var(--fs-body,1rem);
}
.st-consent button{
  min-height:44px;
  padding:.3em 1.2em;
  border:1px solid var(--gold-500);
  border-radius:var(--r-pill);
  color:var(--gold-200);
}
.st-consent #analytics-yes{ border-color:transparent; background:var(--grad-gold); color:var(--navy-900); font-weight:700; }

/* ---------- 22. 動きを減らす設定・強制カラー・印刷 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  [data-st-reveal]{ opacity:1; transform:none; }
}
@media (forced-colors:active){
  .st-gold-text,
  .st-price__num strong{ -webkit-text-fill-color:CanvasText; background:none; }
  .st-btn,.st-tab,.st-arrow,.st-card,.st-price{ border:1px solid CanvasText; }
}
@media print{
  .st-header,.st-bokeh,.st-arc,.st-curves,.st-still-btn{ display:none !important; }
  body{ background:#FFF; color:#000; }
}

/* 段落の最後の行に1〜2字だけ残さない（対応ブラウザだけ効く） */
main p{ text-wrap:pretty; }

/* ---------- 23. きらめき（2026-09-29 本人「もう少しゴージャスに」） ----------
   - どれも html に st-pre があり（動きを減らす設定でない）、「動きを止める」を押していない（st-still でない）ときだけ動く
   - JS（studio.js の 9）が .st-progress と .st-dust を差し込み、.st-glow を付ける。JS が無ければ何も起きない */

/* 読んだ位置を示す金の細線（ヘッダーの下端） */
.st-progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none;
  background:linear-gradient(90deg,var(--gold-600) 0%,var(--gold-300) 70%,#FFF4D6 100%);
  transform-origin:left center; scale:var(--st-read,0) 1;
  box-shadow:0 0 12px rgba(233,210,154,.55);
  opacity:0; transition:opacity .4s var(--ease);
}
.st-pre:not(.st-still) .st-progress{ opacity:1; }

/* 金の粒（ヒーローの背景を、ゆっくり昇っていく） */
.st-dust{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none;
  opacity:0; transition:opacity 1.8s var(--ease);
}
.st-dust.is-on{ opacity:1; }
.st-still .st-dust{ opacity:0; }

/* 金のボタンに、ときどき光が1本走る */
.st-btn--gold{ position:relative; overflow:hidden; }
.st-pre:not(.st-still) .st-btn--gold::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:60%; pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,252,240,.55) 50%,rgba(255,255,255,0) 100%);
  translate:-180% 0;
  animation:st-btn-sheen 6.5s ease-in-out 2.2s infinite;
}
@keyframes st-btn-sheen{ 0%{ translate:-180% 0; } 16%,100%{ translate:260% 0; } }

/* 章の英字: 字間が開いた状態から締まって現れる */
.st-pre .st-shead[data-st-reveal] .st-shead__en{ transition:letter-spacing 1.6s var(--ease),opacity 1.2s var(--ease); }
.st-pre .st-shead[data-st-reveal]:not(.is-in) .st-shead__en{ letter-spacing:.6em; opacity:0; }

/* カードの上を、マウスの位置から金の光が照らす（マウスのある端末だけ） */
@media (hover:hover) and (pointer:fine){
  .st-glow{ position:relative; }
  .st-glow::after,
  .st-glow::before{
    content:""; position:absolute; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity .5s var(--ease);
  }
  .st-glow::after{
    inset:0;
    background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(233,210,154,.12),rgba(233,210,154,0) 46%);
  }
  .st-glow::before{
    inset:-1px; padding:1px;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(250,232,184,.95),rgba(250,232,184,0) 62%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  }
  .st-pre:not(.st-still) .st-glow:hover::after,
  .st-pre:not(.st-still) .st-glow:hover::before{ opacity:1; }
}