/* =========================================================
   天海 / TENKAI — Webサイト制作・アプリ開発
   罫線と余白で組む、静かな編集的デザイン。
   ========================================================= */
:root{
  --foam:#EAF6FF;
  --ink:#08243f;
  --sky:#7FD4FF;
  --sea:#0A73C9;
  --deep:#04203c;
  --gold:#E3B54D;      /* 陽の差し色（使いどころを絞る） */
  --coral:#ff8360;
  --line:rgba(234,246,255,.26);   /* 罫線 */
  --edge:clamp(20px,5vw,80px);
  --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--deep);
  color:var(--foam);
  font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
em{font-style:normal;color:var(--gold)}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ---------- ページ遷移：深い紺へ静かに沈み、次のページが浮かび上がるフェード（transition.js） ---------- */
.wipe{
  position:fixed;inset:0;z-index:999;pointer-events:none;
  background:var(--deep);
  opacity:0;
  transition:opacity .34s ease-in;
  will-change:opacity;
}
.wipe.no-anim{transition:none}
.wipe.is-cover{opacity:1}
.wipe.is-exit{opacity:0;transition:opacity .8s cubic-bezier(.25,.5,.25,1)}
@media (prefers-reduced-motion:reduce){.wipe{display:none}}

/* ---------- 背景動画 ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--deep)}
.bg__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.bg__tint{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(4,32,60,.10) 0%,rgba(4,32,60,.0) 34%,rgba(4,32,60,.28) 100%);
  pointer-events:none;
}

/* ---------- 海中の泡（ぷくぷく） ---------- */
.bubbles{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .8s ease;
}
.bubble{
  position:absolute;bottom:-8vh;border-radius:50%;opacity:0;
  background:
    radial-gradient(circle at 34% 26%,
      rgba(255,255,255,.95) 0%,
      rgba(224,244,255,.42) 20%,
      rgba(150,205,245,.10) 52%,
      rgba(120,185,235,.03) 72%,
      rgba(120,185,235,0) 100%);
  box-shadow:
    inset -2px -3px 7px rgba(90,160,215,.40),
    inset 3px 3px 8px rgba(255,255,255,.55),
    0 0 10px rgba(170,220,255,.18);
  animation-name:rise;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  will-change:transform,opacity;
}
.bubble::after{
  content:"";position:absolute;top:15%;left:24%;width:24%;height:24%;
  border-radius:50%;background:rgba(255,255,255,.9);filter:blur(.5px);
}
.bubble.is-far{filter:blur(1.7px)}
.bubble.is-near{box-shadow:inset -3px -4px 9px rgba(90,160,215,.45),inset 4px 4px 10px rgba(255,255,255,.6),0 0 14px rgba(180,225,255,.28)}
@keyframes rise{
  0%  {transform:translate(0,0) scale(.86);opacity:0}
  6%  {opacity:var(--o,.7)}
  20% {transform:translate(var(--sx),-20vh) scale(.94)}
  40% {transform:translate(calc(var(--sx) * -1),-42vh) scale(1)}
  60% {transform:translate(var(--sx),-64vh) scale(1.02)}
  80% {transform:translate(calc(var(--sx) * -1),-86vh) scale(1.05)}
  92% {opacity:calc(var(--o,.7) * .5)}
  100%{transform:translate(0,-118vh) scale(1.08);opacity:0}
}
@media (prefers-reduced-motion:reduce){.bubbles{display:none}}

/* ---------- 共通 ---------- */
.eyebrow{
  font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:700;color:rgba(234,246,255,.72);
  display:inline-flex;align-items:center;gap:1.1em;
  margin-bottom:1.4em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:rgba(234,246,255,.5)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;letter-spacing:.08em;
  padding:1em 2.3em;border-radius:3px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s,background-position .65s cubic-bezier(.2,.7,.2,1);
}
/* ホバーで金が斜めにスッと流れ込む */
.btn--primary{
  color:var(--ink);
  background-image:linear-gradient(105deg,var(--gold) 0 50%,var(--foam) 50% 100%);
  background-size:230% 100%;background-position:99% 0;
}
.btn--primary:hover{background-position:1% 0;transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(0,10,30,.8)}
.btn--ghost{
  border:1px solid rgba(234,246,255,.55);color:var(--foam);
  background-image:linear-gradient(105deg,rgba(234,246,255,.16) 0 50%,transparent 50% 100%);
  background-size:230% 100%;background-position:99% 0;
}
.btn--ghost:hover{background-position:1% 0;transform:translateY(-2px)}
.btn--lg{padding:1.15em 2.8em;font-size:1.05rem}

/* reveal（会社セクション用） */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1.2s cubic-bezier(.16,.75,.2,1),transform 1.3s cubic-bezier(.16,.75,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* 汎用：マスクから立ち上がる文字（ヒーロー/セクション見出し。JSが.chmに分割）
   影はtext-shadowだとマスク箱で四角く切れるため、切り抜き後に効くdrop-shadowで落とす */
.chm{
  display:inline-block;overflow:hidden;vertical-align:top;
  filter:drop-shadow(0 3px 14px rgba(0,20,50,.5));
}
.ch{display:inline-block;transform:translateY(115%);transition:transform 1.3s cubic-bezier(.16,.75,.18,1)}
[data-reveal].in .ch{transform:translateY(0)}
.hero__title[data-reveal] .ch{transition-duration:1.5s}
/* 見出しブロック自体はフェードさせず、文字マスクだけで見せる */
.hero__title[data-reveal]{opacity:1;transform:none}

/* 出現後は動かさない（浮遊なし・その場に固定） */

/* 罫線は「引かれる」動きで現れる */
.eyebrow::before,.section__head .eyebrow::after{
  transform-origin:left;
  transition:transform 1.3s cubic-bezier(.16,.75,.2,1) .25s;
}
.section__head .eyebrow::after{transform-origin:right}
[data-reveal]:not(.in) .eyebrow::before,
[data-reveal]:not(.in) .eyebrow::after,
p.eyebrow[data-reveal]:not(.in)::before,
.stage__panel:not(.is-revealed) .eyebrow::before{transform:scaleX(0)}
[data-reveal].in .eyebrow::before,
[data-reveal].in .eyebrow::after,
p.eyebrow[data-reveal].in::before,
.stage__panel.is-revealed .eyebrow::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .ch{transform:none;transition:none}
  .eyebrow::before,.section__head .eyebrow::after{transform:none;transition:none}
}

/* ---------- ヘッダー ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:76px;padding-inline:var(--edge);
  transition:background .4s,backdrop-filter .4s,box-shadow .4s;
}
.site-head.stuck{background:rgba(4,32,60,.62);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:.55em}
.brand__ja{font-family:"Shippori Mincho",serif;font-weight:800;font-size:1.5rem;letter-spacing:.18em}
.brand__logo{
  height:40px;width:auto;display:block;
  filter:drop-shadow(0 2px 8px rgba(0,20,50,.55));
}
.brand__en{font-size:.68rem;letter-spacing:.34em;color:rgba(234,246,255,.6);font-weight:500}
.nav{display:flex;align-items:center;gap:2rem;font-size:.84rem;font-weight:500;letter-spacing:.06em}
.nav a{opacity:.82;transition:opacity .25s}
.nav a:hover{opacity:1}
/* ナビ：ホバーで下線が左から引かれ、離れると右へ抜ける */
.nav a:not(.nav__cta){position:relative}
.nav a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.nav a:not(.nav__cta):hover::after{transform:scaleX(1);transform-origin:left}

/* ヘッダーは読み込み時にふわりと降りてくる */
@keyframes headIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.site-head .brand{animation:headIn 1.1s cubic-bezier(.16,.75,.2,1) .25s backwards}
.site-head .nav{animation:headIn 1.1s cubic-bezier(.16,.75,.2,1) .5s backwards}
@media (prefers-reduced-motion:reduce){.site-head .brand,.site-head .nav{animation:none}}
.nav__cta{
  padding:.6em 1.5em;border-radius:3px;
  border:1px solid rgba(234,246,255,.5);opacity:1 !important;
}
.nav__cta:hover{background:rgba(234,246,255,.12)}

/* ---------- セクション共通 ---------- */
section{position:relative;z-index:1;padding-inline:var(--edge)}

/* ---------- 1. ヒーロー ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero__inner{max-width:1360px;margin:0;width:100%}
/* 筆文字ロゴをバーンと大きくトップに（書道で描かれていく透過動画・1回再生で最終形を保持） */
.hero__logo{
  width:min(1320px,100%);height:auto;display:block;
  margin:0 0 1.4rem -6px;
  filter:drop-shadow(0 6px 26px rgba(0,20,50,.45));
}

.hero__title{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(2rem,4.6vw,3.7rem);line-height:1.2;letter-spacing:.06em;
  margin-bottom:.45em;
}
/* 「深海」：文字の下から海の青がゆっくり広がる（約2秒・なめらか） */
.hero__title .ch--sea{
  background-image:linear-gradient(to top,
    #075A9E 0%,#0A73C9 16%,#4FB3EC 34%,#BFE6FF 48%,var(--foam) 60%,var(--foam) 100%);
  background-size:100% 250%;
  background-position:0 0%;              /* 最初は上端＝白だけ見える */
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* 下から上へ、ゆっくり一様に青が満ちる。fill後は100%で固定 */
.hero__title.in .ch--sea{animation:seaRise 2s cubic-bezier(.33,0,.2,1) 1.2s forwards}
@keyframes seaRise{
  0%  {background-position:0 0%}
  100%{background-position:0 100%}
}
@media (prefers-reduced-motion:reduce){
  .hero__title .ch--sea,.hero__title.in .ch--sea{background-position:0 100%;animation:none}
}

.hero__lead{
  font-size:clamp(1.15rem,2vw,1.6rem);font-weight:700;letter-spacing:.12em;
  max-width:38ch;color:rgba(234,246,255,.96);text-shadow:0 2px 14px rgba(0,20,50,.5);
}
.hero__actions{display:flex;gap:1rem;margin-top:2.4em;flex-wrap:wrap}

/* ヒーローのボタン：白で現れて、少し遅れて海の青がスッと流れ込む */
.hero__actions .btn{
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,
    background-position 1.5s cubic-bezier(.2,.7,.2,1) 1.7s,
    border-color 1.5s ease 1.7s,color 1.5s ease 1.7s;
}
.hero__actions .btn--primary{
  background-image:linear-gradient(105deg,#0B7BD0 0 50%,var(--foam) 50% 100%);
  background-size:230% 100%;background-position:99% 0;
}
.hero__actions .btn--ghost{
  background-image:linear-gradient(105deg,rgba(10,115,201,.34) 0 50%,transparent 50% 100%);
  background-size:230% 100%;background-position:99% 0;
}
.hero__actions.in .btn--primary{background-position:1% 0;color:#fff}
.hero__actions.in .btn--ghost{background-position:1% 0;border-color:rgba(127,212,255,.95)}
@media (prefers-reduced-motion:reduce){
  .hero__actions .btn--primary{background-position:1% 0;color:#fff}
  .hero__actions .btn--ghost{background-position:1% 0;border-color:rgba(127,212,255,.95)}
}
/* ---------- 2. ステートメント ---------- */
.statement{min-height:58vh;display:flex;align-items:center;justify-content:center;text-align:center;padding-block:8vh}
.statement__text{
  font-family:"Shippori Mincho",serif;font-weight:700;
  font-size:clamp(1.4rem,4vw,3rem);line-height:1.7;
  max-width:min(94vw,30ch);
  color:var(--foam);
  text-shadow:0 2px 16px rgba(0,15,40,.75),0 1px 5px rgba(0,15,40,.55);
  transition:color .7s ease,text-shadow .7s ease;
}
/* 背景がまだ明るい（空〜水面の白い飛沫）間は濃紺に沈めて読ませる。
   JSが動画の再生位置を見て .on-bright を付け外しする */
.statement.on-bright .statement__text{
  color:#0c2f52;
  text-shadow:0 1px 0 rgba(255,255,255,.4),0 2px 22px rgba(255,255,255,.35);
}
.statement__text em{transition:color .7s ease}
.statement.on-bright .statement__text em{color:#a97e22}
/* 強調語には金の下線がゆっくり引かれる */
.statement__text em{
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 94%;background-size:0% 1px;
  transition:background-size 1.8s cubic-bezier(.16,.75,.2,1) 1s;
  padding-bottom:.08em;
}
.statement__text.in em{background-size:100% 1px}
.nb{white-space:nowrap}

/* ---------- 3/4. ステージ（画面いっぱいの動画＋サイドコメント） ---------- */
.stage{
  position:relative;min-height:100vh;overflow:hidden;
  padding-block:6vh;
  display:flex;align-items:center;
}
.stage__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.stage__video--contain{object-fit:contain}

/* Web動画は水中に浮かべる：下寄せ＋やや左。下の縁はマスクでぼかして水に溶かす。
   セクション表示時に左からスッと流れて入る。 */
.stage--web .stage__video--contain{
  /* 要素の箱を映像の実寸に一致させる＝四辺のぼかしが必ず映像のエッジに乗る */
  inset:auto;left:1vw;bottom:2vh;height:84%;width:auto;aspect-ratio:1918/1080;
  max-width:100vw;object-fit:cover;object-position:center;
  /* 流れている映像の4方向エッジをぼかして水に溶かす */
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0%,#000 12%,#000 76%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0%,#000 12%,#000 76%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect;
  transform:translateX(-90px);opacity:0;
  transition:transform 1.7s cubic-bezier(.16,.7,.2,1),opacity 1.2s ease;
}
.stage--web.is-inview .stage__video--contain{transform:translateX(0);opacity:1}
@media (prefers-reduced-motion:reduce){
  .stage--web .stage__video--contain{transform:none;opacity:1;transition:none}
}

/* コメントパネル（背景動画がそのまま透ける） */
.stage__panel{
  position:relative;z-index:2;width:100%;
  max-width:min(920px,56vw);padding-inline:var(--edge);
}
.stage__panel--right{margin-left:auto;text-align:right}
.stage__panel--left{margin-right:auto;text-align:left}
.stage__panel--right .eyebrow{flex-direction:row-reverse}

.stage .eyebrow{font-size:.95rem;letter-spacing:.34em}

.stage__title{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(3.4rem,8.6vw,8.5rem);line-height:1.08;margin-bottom:.32em;letter-spacing:.04em;
  text-wrap:balance;
}
/* Webサイト制作は1行で収める */
.stage--web .stage__title{white-space:nowrap;font-size:clamp(2.6rem,5.8vw,6.4rem)}
.stage__title .tw{display:inline-block}

/* 見出しの奥に大きな輪郭文字（WEB / APP）を敷く */
.stage__title{position:relative}
.stage__title .en{
  position:absolute;z-index:-1;top:-.58em;line-height:1;
  font-size:1.35em;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(234,246,255,.30);
  text-shadow:none;pointer-events:none;user-select:none;
}
.stage__panel--right .stage__title .en{right:-.04em}
.stage__panel--left  .stage__title .en{left:-.04em}

.stage__lead{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(1.35rem,2.3vw,2.3rem);line-height:1.85;font-weight:400;
  color:#fff;text-shadow:0 2px 16px rgba(0,15,40,.75),0 1px 5px rgba(0,15,40,.6);
}
.stage__lead .np{display:inline-block}
/* 右揃え時、行末の句読点を欄外にぶら下げて視覚的に端を揃える（対応ブラウザのみ） */
.stage__panel--right .stage__lead{hanging-punctuation:allow-end}

/* タグ：飾りを外し、読点で並べる */
.tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.3em 0;margin-top:1.7em;
  font-size:1.12rem;font-weight:500;color:rgba(234,246,255,.95);
  text-shadow:0 1px 8px rgba(0,15,40,.7);
}
.tags--right{justify-content:flex-end}
.tags li:not(:last-child)::after{content:"／";margin:0 .55em;opacity:.45}

/* 料金：金の明朝数字を主役に、罫線的な一行で */
.stage__price{
  display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap;
  margin-top:1.7em;
  text-shadow:0 1px 10px rgba(0,15,40,.7);
}
.stage__price--right{justify-content:flex-end}
.price__label{font-size:.88rem;letter-spacing:.16em;color:rgba(234,246,255,.72);font-weight:500}
.price__num{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1;letter-spacing:.02em;
  color:var(--gold);
}
.price__num small{font-size:.52em;font-weight:700;margin-left:.08em}
.price__sep{opacity:.4;margin:0 .3em}

/* ステージのボタン行 */
.stage__actions{display:flex;gap:1rem;margin-top:2.2em;flex-wrap:wrap}
.stage__actions--right{justify-content:flex-end}
.stage__actions .btn{font-size:1.1rem;padding:1.05em 2.4em}

/* ---------- 終盤に出現するアニメーション（くっきり・blur無し） ---------- */
.stage__panel > *{
  opacity:0;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.16,.75,.2,1);
}
.stage__panel--right > *{transform:translateX(46px)}
.stage__panel--left  > *{transform:translateX(-46px)}

/* 見出し：1文字ずつマスクからゆっくり立ち上がる（ブロック自体は常時表示） */
.stage__panel > .stage__title{opacity:1;transform:none}
.stage__title .chm{display:inline-block;overflow:hidden;vertical-align:top}
.stage__title .ch{
  display:inline-block;transform:translateY(115%);
  transition:transform 1.2s cubic-bezier(.16,.75,.18,1);
}
.stage__panel.is-revealed .stage__title .ch{transform:translateY(0)}

/* ゴーストENは字間がゆっくり締まりながら浮かび上がる（長いトラッキング演出） */
.stage__title .en{
  opacity:0;letter-spacing:.34em;
  transition:opacity 1.2s ease .3s,letter-spacing 2.6s cubic-bezier(.16,.7,.2,1) .3s;
}
.stage__panel.is-revealed .stage__title .en{opacity:1;letter-spacing:.04em}

.stage__panel.is-revealed > *{opacity:1;transform:none}

/* 文字が先に立ち上がり、背景で動画が流れる。出現後は固定（浮遊なし） */
.stage__panel.is-revealed > *:nth-child(1){transition-delay:.00s}
.stage__panel.is-revealed > *:nth-child(2){transition-delay:.1s}
.stage__panel.is-revealed > *:nth-child(3){transition-delay:1.1s}
.stage__panel.is-revealed > *:nth-child(4){transition-delay:1.6s}
.stage__panel.is-revealed > *:nth-child(5){transition-delay:2.0s}
.stage__panel.is-revealed > *:nth-child(6){transition-delay:2.4s}

@media (prefers-reduced-motion:reduce){
  .stage__panel > *{opacity:1;transform:none;transition:none}
  .stage__title .ch{transform:none;transition:none}
  .stage__title .en{opacity:1;letter-spacing:.04em;transition:none}
}

/* ---------- 会社サイト系セクション（罫線で組む） ---------- */
.section{position:relative;z-index:1;padding-block:clamp(6vh,9vh,11vh)}
.section__inner{max-width:var(--maxw);margin:0 auto;width:100%}
.section__head{text-align:center;margin-bottom:clamp(1.8rem,4vw,3rem)}
.section__head .eyebrow{justify-content:center;margin-bottom:1em}
.section__head .eyebrow::after{content:"";width:34px;height:1px;background:rgba(234,246,255,.5)}
.section__title{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.18;
}

/* 選ばれる理由：罫線区切りの二段組 */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2.5rem,5vw,5rem)}
.reason{padding:2.2rem .2rem 1.9rem;border-top:1px solid var(--line)}
.reason__no{
  font-family:"Shippori Mincho",serif;font-size:1.05rem;font-weight:700;
  color:var(--gold);letter-spacing:.3em;
}
.reason h3{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(1.4rem,2vw,1.9rem);font-weight:700;margin:.55em 0 .5em;line-height:1.45;
  text-shadow:0 2px 14px rgba(0,15,40,.5);
}
.reason p{color:rgba(234,246,255,.86);font-size:1.12rem;line-height:1.85;text-shadow:0 1px 10px rgba(0,15,40,.5)}

/* 制作の流れ：罫線のタイムライン（順序が本当にあるので漢数字） */
.flow{list-style:none;max-width:820px;margin:0 auto;display:flex;flex-direction:column}
.flow__step{
  display:flex;gap:clamp(1.6rem,3vw,2.6rem);align-items:baseline;
  padding:1.8rem .2rem;border-top:1px solid var(--line);
}
.flow__step:last-child{border-bottom:1px solid var(--line)}
.flow__no{
  flex:0 0 auto;
  font-family:"Shippori Mincho",serif;font-weight:700;font-size:1.6rem;
  color:var(--gold);text-shadow:0 1px 10px rgba(0,15,40,.5);
}
.flow__step h3{
  font-family:"Shippori Mincho",serif;
  font-size:clamp(1.35rem,1.9vw,1.7rem);font-weight:700;margin-bottom:.2em;
  text-shadow:0 2px 14px rgba(0,15,40,.5);
}
.flow__step p{color:rgba(234,246,255,.86);font-size:1.1rem;line-height:1.8;text-shadow:0 1px 10px rgba(0,15,40,.5)}

/* 事業概要：罫線の表 */
.about{max-width:860px;margin:0 auto}
.about__row{
  display:grid;grid-template-columns:220px 1fr;gap:1rem;
  padding:1.5rem .4rem;border-top:1px solid var(--line);
}
.about__row:last-child{border-bottom:1px solid var(--line)}
.about__row dt{
  font-weight:700;font-size:.98rem;letter-spacing:.16em;
  color:rgba(234,246,255,.66);padding-top:.2em;
}
.about__row dd{color:rgba(234,246,255,.95);font-size:1.18rem}
.about__row dd a{border-bottom:1px solid rgba(234,246,255,.4)}
.about__row dd a:hover{border-color:var(--gold);color:#fff}

/* ---------- 5. お問い合わせ ---------- */
.contact{min-height:auto;display:flex;flex-direction:column;justify-content:center;text-align:center;padding-block:clamp(8vh,12vh,14vh)}
.contact__inner{max-width:980px;margin:0 auto}
.contact__inner .eyebrow{justify-content:center}
.contact__inner .eyebrow::after{content:"";width:34px;height:1px;background:rgba(234,246,255,.5)}
.contact__title{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:clamp(1.35rem,4.6vw,2.9rem);line-height:1.3;margin-bottom:.5em;
  white-space:nowrap; /* 1行で見せる（画面幅に応じて縮む） */
}
.contact__lead{color:rgba(234,246,255,.88);margin-bottom:2.4em;font-size:1.1rem}
.foot{
  margin-top:12vh;display:flex;align-items:center;justify-content:space-between;
  padding-top:2rem;border-top:1px solid var(--line);
  font-size:.8rem;color:rgba(234,246,255,.62);letter-spacing:.06em;
}
.foot__brand{font-family:"Shippori Mincho",serif;letter-spacing:.18em}
.foot-links{display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center}
.foot-links a{color:rgba(234,246,255,.62);transition:color .25s}
.foot-links a:hover{color:#fff}

/* ---------- レスポンシブ ---------- */
@media (max-width:860px){
  .nav a:not(.nav__cta){display:none}
  .hero__lead br{display:none}

  /* ステージ：動画の上に文字を重ねず「動画上・コメント下」の縦積みにする */
  .stage{flex-direction:column;justify-content:center;gap:1.2rem;padding-block:12vh 9vh}
  .stage__video--contain{
    position:relative;inset:auto;z-index:0;
    width:100%;height:38vh;max-width:none;object-fit:contain;
  }
  .stage--web .stage__video--contain{
    left:0;bottom:0;height:auto;aspect-ratio:1918/1080;object-fit:cover;
  }
  .stage__panel{max-width:100%;padding-inline:0;text-align:left}
  .stage__panel--right{text-align:left}
  .stage__panel--right .eyebrow{flex-direction:row}
  .tags--right{justify-content:flex-start}
  .stage__actions--right{justify-content:flex-start}
  .stage__price--right{justify-content:flex-start}
  .price__num{font-size:1.55rem}
  .stage__title{font-size:clamp(2.9rem,13vw,4.5rem)}
  .stage--web .stage__title{font-size:clamp(2rem,10.5vw,3.4rem)}
  .stage__title .en{font-size:1.25em}
  .stage__lead{font-size:clamp(1.05rem,4.6vw,1.35rem)}
  .tags{font-size:1rem}
  .stage__actions .btn{font-size:1rem;padding:.95em 1.9em}

  .reasons{grid-template-columns:1fr}
  .reason{padding:1.7rem .2rem 1.5rem}
  .about__row{grid-template-columns:1fr;gap:.2rem}
  .foot{flex-direction:column;gap:.6rem}
}