@charset "utf-8";
/* =========================================================
   風呂式 LP  style.css  （2026-07-10 v3＝デザインPDF全箇所実測・アセットそのまま使用）
   実測（PC 1920カンバス基準・値はvw換算＋pxキャップ）:
     箱=1595(83.1%)／ヒーロー=1253(65.3%)／円=257・間76／半円=359隣接
     タブ高=60／ロゴ幅=182／H1≈60／H2≈54／本文18・行送り40
     カード=410・間35（※01-03は角丸・セピア・数字焼き込み済みの完成画像）
   ========================================================= */
:root{
  --ink:#000;   /* 中井さん指定＝本文の文字色は全て#000（2026-07-15）。※枠線（CODES箱・TRANSLATE下線）も同じ黒を共用 */
  --paper:#e2decf;   /* 中井さん指定＝デザイン元データの値（2026-07-15 本人確認）。※確認用PDFの実測#DDD6C2は変換・圧縮で色が転んだ値なので使わない */
  --orange:#e6b422;   /* 中井さん指定＝デザイン元データの金色 rgb(230,180,34)（2026-07-15 本人確認・書き出しSVGの金と同値）。※PDF実測値は変換で転ぶので使わない */
  --grey:#eee;   /* 中井さん指定＝グレー箱（TRANSLATE/POSSIBILITY）の背景（2026-07-15） */
  --dark:#333333;
  --line:#555;
  --box-r:clamp(64px,12.5vw,240px);   /* オレンジ箱・NOTE箱 共通の角丸（さらに深く・実測230px相当） */
}
*{margin:0;padding:0;box-sizing:border-box}
ol,ul{list-style:none}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight:400;color:var(--ink);background:var(--paper);
  font-size:1.5rem;line-height:1.9;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.disp{font-family:"vdl-logojrblack","Noto Sans JP",sans-serif;font-weight:900;letter-spacing:.06em;line-height:1.4}
/* SP専用の改行（PCでは無効＝1行のまま） */
.spbr{display:none}

/* スクロール表示 */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}

.furo{background:var(--paper)}

/* ===== 幅の体系（実測比率） ===== */
.codes,.greybox,.note{width:min(83.1%,1595px);margin:0 auto;position:relative}
.kv{width:min(65.3%,1253px);margin:0 auto}
.intro{width:min(83%,1595px);margin:0 auto}

/* ===== 見出し・リード（実測: H2≈54px・本文18px/行送り40px） ===== */
h2.disp{font-size:clamp(2.5rem,2.8vw,5.4rem);text-align:center}
.lead{text-align:center;font-size:clamp(1.35rem,.94vw,1.8rem);line-height:1.9;margin-top:clamp(22px,2.2vw,42px);color:#000}
/* DESIGN FIELDS＝字間を狭く・少し大きく（朱書き） */
.sub-label{font-weight:700;font-size:clamp(1.6rem,1.2vw,2.3rem);letter-spacing:.1em;text-align:center;
  margin:clamp(36px,3.2vw,61px) 0 clamp(28px,2.6vw,50px)}

/* ===== セクションラベル（PCはさらに一回り小さく・境界に跨る） ===== */
.sec-label{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:3;line-height:0}
.sec-label img{height:clamp(28px,2.08vw,40px);width:auto}
/* POSSIBILITY（素材はスペルミスのため正スペルのテキスト版）・PROJECT NOTE（素材なし） */
.sec-label-txt{background:#111;color:#fff;font-weight:700;letter-spacing:.1em;
  font-size:clamp(1.5rem,1.35vw,2.6rem);line-height:1;padding:.6em 1em .64em;white-space:nowrap}

/* ===== ヘッダー（ロゴ幅182px・実測位置） ===== */
.site-head{padding:3.85vw 4.5% 3.7vw}
.brand-logo{display:inline-block;line-height:0}
.brand-logo img{width:clamp(120px,9.5vw,182px);height:auto}
.brand-logo:hover{opacity:.7;transition:opacity .3s}

/* ===== A. KV ===== */
.kv img{width:100%;height:auto}

/* ===== A. イントロ（実測: 上240・H1→本文81・下〜箱50） ===== */
.intro{text-align:center;padding:clamp(90px,8.9vw,170px) 24px clamp(48px,4.6vw,88px)}   /* ヒーロー→コピーの余白を狭く（朱書き） */
.intro h1{font-size:clamp(3rem,3.1vw,6rem)}
.intro-body{margin-top:clamp(30px,4.2vw,81px);font-size:clamp(1.4rem,.94vw,1.8rem);line-height:1.95;color:#000}

/* ===== B. FUROSHIKI CODES（オレンジ箱・黒枠・角丸90） ===== */
.codes{background:var(--orange);border:1.5px solid var(--ink);border-bottom:none;
  border-radius:var(--box-r) var(--box-r) 0 0;   /* NOTE箱と同じ角丸で統一（朱書き） */
  padding:clamp(60px,5.3vw,102px) 0 clamp(70px,6vw,116px)}
.codes-inner{max-width:1420px;margin:0 auto;padding:0 40px}
/* 円＝dot.svg（黒円+目盛り内蔵）。朱書き=丸を大きく・中の文字は小さく・丸間マージンは狭く。
   dot.svgは黒円が枠の約87%（目盛り分の余白）→黒円を約258pxにするには枠を約296pxにする */
.code-list{display:flex;justify-content:center;gap:clamp(8px,1vw,20px);
  margin:clamp(50px,5.1vw,98px) auto 0}
.code{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.code-circle{width:min(15.6vw,300px);aspect-ratio:1;
  background:url(../svg/dot.svg) center/contain no-repeat;
  display:flex;align-items:center;justify-content:center}
.code-name{color:#fff;font-size:clamp(1.9rem,1.72vw,3.3rem);writing-mode:vertical-rl;letter-spacing:.16em}
/* 説明＝縦書き・改行位置はデザインに合わせてHTMLの<br>で3列固定。
   高さは最長列(9文字)が折り返さない値に（＝<br>以外で勝手に折れないため） */
.code-desc{margin-top:clamp(18px,1.7vw,32px);writing-mode:vertical-rl;height:clamp(134px,8.6vw,166px);
  font-size:clamp(1.2rem,.83vw,1.6rem);line-height:2.1;letter-spacing:.1em;text-align:start}

/* ===== C+D. グレー箱（TRANSLATE＋POSSIBILITY一続き・枠線） ===== */
/* 下辺のボーダーは出さない＝NOTE箱の角丸に灰色の縁が覗く「背景切れ」を防ぐ（朱書き） */
.greybox{background:var(--grey);border:1.5px solid var(--line);border-bottom:none}
/* 縦FUROSHIKIラベル＝コンテンツ（箱）の外へ出す（朱書き）。右端が箱の枠線に接する */
.side-label{position:absolute;top:26%;z-index:4;line-height:0}
.side-label img{height:clamp(96px,6.8vw,131px);width:auto}
.side-left{left:0;transform:translateX(-100%)}
.side-right{right:0;transform:translateX(100%)}

/* TRANSLATE＝grid.svg（セル108px実測・素材のまま敷く） */
.translate{position:relative;padding:clamp(56px,4.4vw,84px) 0 clamp(80px,7.8vw,150px);
  background:url(../svg/grid.svg) center top/100% auto repeat-y;
  border-bottom:1.5px solid var(--ink)}
.translate-inner{max-width:1420px;margin:0 auto;padding:0 40px}
/* DESIGN FIELDS＝halfcircle.svg 3列隣接。朱書き=PCは少し小さく */
.field-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.25vw,24px) 0;
  max-width:990px;margin:0 auto}
.field{aspect-ratio:366.59/183.8;background:url(../svg/halfcircle.svg) center bottom/100% auto no-repeat;
  display:flex;align-items:center;justify-content:center;text-align:center;padding-top:7%}
.field span{font-weight:700;font-size:clamp(1.6rem,1.5vw,2.9rem);line-height:1.45}

/* POSSIBILITY（グレー箱の続き）。下パディング=角丸ぶん＋見た目の余白125px。
   下部（角丸ぶん）はNOTE箱が重なって隠れる＝グレーがNOTEの角の裏まで伸び「背景切れ」を解消（朱書き） */
.possibility{position:relative;text-align:center;
  padding:clamp(64px,5.4vw,104px) 0 calc(var(--box-r) + clamp(90px,6.5vw,125px))}

/* ===== E. PROJECT NOTE（ダーク箱）＝グレー箱に角丸ぶん重ねる（背景切れ解消・角丸は深め） */
.note{position:relative;z-index:1;background:var(--dark);color:#fff;   /* 中井さん指定＝NOTE内の文字色は#fff（2026-07-15） */
  border-radius:var(--box-r) var(--box-r) 0 0;
  margin-top:calc(-1 * var(--box-r));
  padding:clamp(76px,7.6vw,146px) 0 0}
.note-inner{max-width:1240px;margin:0 auto;padding:0 40px}  /* カードの左右マージンを広く（朱書き） */
.note h2{color:#fff}   /* 白（朱書き＝背景色系になっていた） */
/* カード＝column01-03（角丸・セピア・数字焼き込み済みの完成画像）をそのまま */
.note-list{display:flex;gap:clamp(20px,1.82vw,35px);margin-top:clamp(60px,6.35vw,122px)}
.note-card{flex:1}
.note-card a{display:block}
.note-card a:hover{opacity:.85}
.note-photo{display:block}
.note-photo img{width:100%;height:auto}
.note-ttl{display:block;margin-top:clamp(18px,1.6vw,31px);font-weight:500;
  font-size:clamp(1.35rem,.96vw,1.85rem);line-height:1.8;color:#fff}   /* 白（朱書き・PC/SP共通） */
/* クレジット（♨＋白文字） */
.credit{text-align:center;margin:clamp(56px,4.7vw,90px) 0 clamp(60px,5vw,96px);
  font-size:clamp(1.2rem,.78vw,1.5rem);line-height:2;color:#fff}
.credit-onsen{display:inline-block;width:clamp(20px,1.4vw,27px);height:auto;margin-bottom:12px}
/* フッター（黒箱の中・区切り線） */
.foot{border-top:1px solid #565656;padding:clamp(30px,2.4vw,46px) 0 clamp(36px,2.9vw,56px);
  text-align:center;color:#fff;font-size:clamp(1.1rem,.7vw,1.35rem);letter-spacing:.06em}   /* 中井さん指定＝コピーライトも#fff（2026-07-15） */
/* 中井FB: コピーライトを太字に */
.foot small{font-weight:700}
/* TOPボタン＝黒正方形（白枠）・スクロール追従（ヒーローを過ぎたら出現）
   朱書き=位置をもっと内側へ・半透明は少し濃く（透け方を弱める）・色はPCと統一 */
/* もっと内側へ＝コンテンツ右端に半分かぶる位置（ベージュ余白8.4vw − ボタン半分42px） */
.page-top{position:fixed;right:clamp(40px,calc(8.4vw - 42px),132px);bottom:clamp(36px,3.6vw,66px);
  width:clamp(64px,4.4vw,84px);aspect-ratio:1;background:rgba(18,18,18,.9);
  border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(1px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;z-index:50;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s}
.page-top.show{opacity:1;visibility:visible;transform:none}
.page-top:hover{background:rgba(0,0,0,.85)}
.page-top img{width:42%;height:auto}
.pt-txt{color:var(--orange);font-weight:700;font-size:clamp(1rem,.75vw,1.4rem);letter-spacing:.08em;line-height:1}

/* =========================================================
   レスポンシブ（〜896px）実測: 箱=83%／ヒーロー=93%
   ========================================================= */
@media all and (max-width:896px){
  body{font-size:1.4rem}
  :root{--box-r:104px}           /* SPの角丸もう2段階深く（朱書き・オレンジ/NOTE共通） */
  .spbr{display:inline}          /* SPは見出しをデザインの位置で改行 */
  .site-head{padding:18px 5.5% 12px}
  .brand-logo img{width:40px;height:40px}   /* 中井FB: 公式サイトSPヘッダー(sp_logo 40×40)に合わせて縮小 */

  .kv{width:93%}
  .codes,.greybox,.note{width:83%}
  .intro{width:88%;padding:56px 0 40px}
  .intro h1{font-size:clamp(2.6rem,7vw,3.4rem)}   /* SPは大きく（朱書き）※幅制約で上限調整 */
  .intro-body{margin-top:24px;font-size:1.45rem;line-height:1.95}
  h2.disp{font-size:clamp(2.6rem,7vw,3.4rem)}     /* SP見出し大きく（1行に収まる範囲で最大） */
  .lead{font-size:1.6rem;line-height:1.95;margin-top:18px}   /* SP本文も大きく（朱書き2巡目でさらに） */

  .sec-label img{height:min(8vw,54px)}   /* SPラベル大きく（朱書き） */

  .codes{padding:56px 0 66px}
  .codes-inner{padding:0 18px}
  /* 2×2で並べる＝コンテナ幅を2個分に制限（中間幅で3+1にならないように固定） */
  .code-list{flex-wrap:wrap;gap:clamp(30px,8vw,60px) clamp(6px,2vw,12px);margin-top:40px;justify-content:center;
    max-width:330px;margin-left:auto;margin-right:auto}
  .code{flex:0 0 auto}
  .code-circle{width:min(36vw,148px)}
  .code-name{font-size:2.5rem}
  .code-desc{height:150px;font-size:1.5rem;line-height:1.8;margin-top:16px}   /* 中井FB: 縦書き説明を+2px（15px×9字が3列に収まる高さへ） */

  /* FUROSHIKI縦ラベルはSPでも表示。コンテンツ（箱）の外へ出す（朱書き＝PCと同じ） */
  .side-label{display:block;top:24%}
  .side-label img{height:min(12vw,84px)}
  .side-left{transform:translateX(-100%)}
  .side-right{transform:translateX(100%)}
  /* SPグリッド＝横8個並び・中央配列＝両端が半分ずつ見切れる（朱書き）。
     grid.svg=1600幅に約14.8セル→185%で8セル分表示・center基準で中央セルが真ん中 */
  .translate{padding:56px 0 76px;background-size:185% auto}
  .translate-inner{padding:0 12px}
  .codes-inner{padding:0 12px}
  .sub-label{margin:34px 0 24px;font-size:1.95rem;letter-spacing:.14em}   /* DESIGN FIELDS大きく（朱書き） */
  /* 半円＝丸は箱幅いっぱいの最大サイズ・文字はデザイン比率(750px版28px≒390px版14.6px)に合わせ
     弧の内側に収める（19pxでは物理的に半円に入らないため） */
  /* 中井FB: 半円どうしの列間の隙間をツメる＝column-gap 0（PCと同じく隣接させる） */
  .field-list{grid-template-columns:repeat(2,1fr);gap:16px 0;max-width:none;margin:0}
  /* 文字17px＝字間0・行間1.4で文字ブロックを締めて中央寄りに（弧余裕3.3px・下端5.1px） */
  /* 中井FB: 半円の文字を-2px＋上下中央。実機確認で見た目1px下げを採用（translateYで正確に） */
  .field{padding-top:0}
  .field span{font-size:1.5rem;line-height:1.45;letter-spacing:0;transform:translateY(1px)}

  .possibility{padding:70px 0 calc(var(--box-r) + 60px)}

  .note{padding:72px 0 0}
  .note-inner{padding:0 30px}   /* カードの左右マージンを広く（朱書き） */
  .note-list{flex-direction:column;gap:34px;margin-top:48px}
  .note-ttl{margin-top:14px;font-size:1.7rem}   /* 画像下テキストもっと大きく（朱書き） */
  .credit{margin:52px 0 58px;font-size:1.35rem}

  .foot{padding:26px 0 34px;font-size:1.1rem}
  .page-top{width:62px;right:16px;bottom:16px}
  .pt-txt{font-size:1rem}
}

/* =========================================================
   ★B案 アニメーション（A案との差分はこのブロックとmain.jsのみ）
   コンセプト＝銭湯の情緒：湯気・湯玉・スタンプ・日の出
   ========================================================= */
/* 基本のフェードアップ（緩急を上質に・時差はvar(--d)） */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1) var(--d,0s),transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.reveal.on{opacity:1;transform:none}

/* ヒーローKV＝湯気が晴れるように（ロード時） */
.kv-inner{opacity:0;transform:scale(1.035);transition:opacity 1.1s ease .15s,transform 1.4s cubic-bezier(.22,.61,.36,1) .15s}
.kv-inner.on{opacity:1;transform:none}

/* 見出し＝1文字ずつ弾んで登場（VDLのチャンキーさに合わせる） */
.chsplit{opacity:1}
.chsplit .ch{display:inline-block;opacity:0;transform:translateY(.45em) scale(.6);
  transition:opacity .45s ease var(--d,0s),transform .6s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
.chsplit.on .ch{opacity:1;transform:none}

/* 黒ラベル＝スタンプを押すように着地 */
.sec-label{opacity:0;transform:translate(-50%,-50%) scale(1.55)}
.sec-label.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sec-label{transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}

/* CODESの黒丸＝湯玉がポコッと膨らむ（時差） */
.code.reveal{opacity:1;transform:none;transition:none}   /* 親は消さず子を動かす */
.code .code-circle{opacity:0;transform:scale(.35);
  transition:opacity .45s ease var(--d,0s),transform .75s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
.code.on .code-circle{opacity:1;transform:scale(1)}
.code .code-desc{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease calc(var(--d,0s) + .32s),transform .6s ease calc(var(--d,0s) + .32s)}
.code.on .code-desc{opacity:1;transform:none}

/* DESIGN FIELDSの半円＝日の出のように下からせり上がる（時差） */
.field.reveal{opacity:0;transform:translateY(58%);
  transition:opacity .55s ease var(--d,0s),transform .85s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.field.reveal.on{opacity:1;transform:none}

/* 縦FUROSHIKIラベル＝遅れてすっと */
.side-label img{opacity:0;transform:translateY(18px);transition:opacity .7s ease .15s,transform .7s ease .15s}
.side-label.on img{opacity:1;transform:none}

/* NOTEカード＝写真が左→右ワイプ→タイトルが続く（時差） */
.note-card.reveal{opacity:1;transform:none;transition:none}
.note-card .note-photo{clip-path:inset(0 100% 0 0);
  transition:clip-path .95s cubic-bezier(.77,0,.18,1) var(--d,0s)}
.note-card.on .note-photo{clip-path:inset(0 0 0 0)}
.note-card .note-ttl{opacity:0;transform:translateY(12px);
  transition:opacity .6s ease calc(var(--d,0s) + .5s),transform .6s ease calc(var(--d,0s) + .5s)}
.note-card.on .note-ttl{opacity:1;transform:none}

/* クレジット♨＝湯気がゆらゆら（常時・ごく控えめ） */
@keyframes steamFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.credit-onsen{animation:steamFloat 2.8s ease-in-out infinite}

/* TOPボタン＝ホバーで♨がふるっ */
@keyframes onsenWiggle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.page-top:hover img{animation:onsenWiggle .55s ease}

/* アクセシビリティ＝動きを減らす設定の人には全アニメ無効 */
@media (prefers-reduced-motion:reduce){
  .reveal,.kv-inner,.chsplit .ch,.sec-label,.code .code-circle,.code .code-desc,
  .field.reveal,.side-label img,.note-card .note-ttl{opacity:1!important;transform:none!important;transition:none!important}
  .sec-label{transform:translate(-50%,-50%)!important}
  .note-card .note-photo{clip-path:none!important;transition:none!important}
  .credit-onsen,.page-top:hover img{animation:none!important}
}