/* ==== 土台 ==== */
/* 字体：ゴシック（assets/fonts の字体ファイル。入っている字はHPで使う字だけ） */
@font-face{font-family:'Zen Kaku Gothic New';font-weight:400;font-display:swap;src:url('assets/fonts/ZenKakuGothicNew-400.woff2') format('woff2')}
/* すべての箱：最初から付いている余白を0にする。大きさは枠も含めて測る */
*{box-sizing:border-box;margin:0;padding:0}
/* ページの地の色（仮。作りながら決める）。文字はゴシック */
body{background:#05060c;font-family:'Zen Kaku Gothic New',sans-serif;overflow-x:hidden}

/* ==== オープニングアニメーション（約2.8秒・毎回。固定オーバーレイ＝本体レイアウトに干渉しない） ==== */
#opening{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 46%,#0b1838 0%,#02030a 80%);animation:opHide .6s ease 2.2s forwards}
@keyframes opHide{to{opacity:0;visibility:hidden}}
/* 文字の後ろの青い光（中央配置） */
#opening .op-glow{position:absolute;left:50%;top:50%;width:min(130vw,1100px);height:min(80vh,680px);border-radius:50%;background:radial-gradient(ellipse,rgba(120,190,255,.5) 0%,rgba(60,130,235,.22) 35%,transparent 62%);opacity:0;animation:opGlow 2.2s ease forwards}
@keyframes opGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(.95)}72%{opacity:.85;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
/* ネーム：ヒーローと同じ明るい金属光沢の文字＋青いグロー */
#opening .op-text{position:relative;text-align:center;opacity:0;transform:scale(.8);animation:opText 2.2s cubic-bezier(.2,.85,.2,1) forwards}
@keyframes opText{0%{opacity:0;transform:scale(.8);filter:blur(8px)}24%{opacity:1;filter:blur(0)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
#opening .op-name{font-weight:700;font-size:min(10.5vw,80px);letter-spacing:.14em;line-height:1;color:transparent;background-image:linear-gradient(105deg,#cfe0f5 0 42%,#ffffff 47%,#bfeeff 50%,#ffffff 53%,#cfe0f5 58% 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 24px rgba(90,170,255,.85)) drop-shadow(0 0 48px rgba(40,100,220,.5))}
#opening .op-sub{margin-top:.5em;font-family:'Yomogi',cursive;font-weight:700;font-size:min(5vw,34px);letter-spacing:.3em;color:#bfeeff;text-shadow:0 0 16px rgba(127,215,255,.8)}
/* 光の筋：細く控えめに横切る */
#opening .op-sweep{position:absolute;top:0;left:-35%;width:26%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-16deg);animation:opSweep 1s ease .7s}
@keyframes opSweep{to{left:120%}}
#opening .op-flash{position:absolute;inset:0;background:#d6ecff;opacity:0;animation:opFlash .5s ease 1.3s}
@keyframes opFlash{0%,100%{opacity:0}45%{opacity:.4}}

/* ==== 全体の入れ物 ==== */
/* 幅は画面いっぱい。ただし1920で止めて、真ん中に置く。中の部品は、この箱の幅に対する％で決めるので、一緒に縮む */
/* --fscale：px指定を幅に連動させる倍率。<head>のJSが :root に 幅/1920(PC) か 幅/768(SP) を入れる。下は保険の初期値 */
/* --popBase：ポップアップの基準文字px（1920/768のときの値）。PC/SPで違うので各メディアで上書き。下は保険の初期値 */
:root{--fscale:1;--popBase:20px}
#page{width:100%;max-width:1920px;margin:0 auto}

/* ==== ヘッダー ==== */
/* 写真とゴーストの箱：比率は1920：1080。写真を敷き、はみ出したゴーストは見せない */
/* 下に向かってぼかす（上から30％ははっきり、82％で消えきる）。-webkit- の付いた方は、古いブラウザ用（中身は同じ） */
#heroPhoto{position:relative;overflow:hidden;aspect-ratio:1920/1080;background:url('assets/hero_new.jpg') 0 0/100% 100% no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.16) 68%,transparent 82%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.16) 68%,transparent 82%)}
/* ゴースト（769以上のときだけ）：写真の箱の中の前と後ろ（::before・::after）にCSSで出す。768以下では作られず、画像も読み込まない */
@media(min-width:769px){
  /* 左右共通：写真の箱の中で下にそろえ、高さは写真の98％、薄さ0.18。画像は箱いっぱいに出す */
  #heroPhoto::before,#heroPhoto::after{content:'';position:absolute;bottom:0;height:98%;opacity:.18;background-size:100% 100%;background-repeat:no-repeat}
  /* 左：画像の比率560：1120、左に2％はみ出す（位置は仮） */
  #heroPhoto::before{left:-2%;aspect-ratio:560/1120;background-image:url('assets/side_left_lite.webp')}
  /* 右：画像の比率560：1105、右に6％はみ出す（位置は仮） */
  #heroPhoto::after{right:-6%;aspect-ratio:560/1105;background-image:url('assets/ghost_right2_lite.webp')}
}
/* ロゴ：幅65％・左から17.5％（仮） */
/* ＝★＝の線が写真の下の端に来る位置に置く（線より上は写真に重なり、下は写真の外に出る） */
/* ロゴの大きさを変えるときは、65％の1か所だけ直せばいい */
/* display:block は、上下の位置をずらせるようにするため。position:relative は、ロゴを写真の箱より手前に出すため */
#logo{--logoW:65%;display:block;position:relative;width:var(--logoW);aspect-ratio:1200/409;margin:calc(var(--logoW) * -214 / 1200) 0 0 17.5%}

/* ==== SNS ==== */
/* ソーシャルボタンの囲い（PC）：ボタンを横1列。1920のとき 余白5・ボタン310×6・間10×5（計1920）。すべて×var(--fscale)で同比率に縮む */
#snsBtns{display:flex;column-gap:calc(10px * var(--fscale));padding:calc(5px * var(--fscale))}
/* ボタン1つの囲い：1920のとき310px */
#snsBtns a{width:calc((100% - 50px * var(--fscale)) / 6)}
/* ソーシャルボタン画像：幅はボタンいっぱい。高さは画像の比率（3：2） */
#snsBtns img{display:block;width:100%;aspect-ratio:3/2}
/* 案内の文：真ん中。1920のとき16px（幅連動） */
#snsNote{text-align:center;font-size:calc(16px * var(--fscale));color:#e9f1fb}
/* R-18ボタン：常にピンクの淡い光の縁（動かないので軽い）。画面に入った瞬間とホバーで1回フワッと光る（遅延なし） */
#sns18{--gc:rgba(255,45,165,1);filter:drop-shadow(0 0 calc(20px * var(--fscale)) var(--gc));transition:transform .15s ease}

/* ==== アクスタ注文ページへの入口ボタン（SNSの下・hp1の上。通常フローの単独リンク＝画像1枚） ==== */
/* リンクの囲い：中央寄せ。幅はPCで最大720px相当（幅連動で縮む）。押せる範囲は画像そのもの */
#akustaBtn{display:block;width:88%;max-width:calc(720px * var(--fscale));margin:calc(18px * var(--fscale)) auto calc(10px * var(--fscale));text-decoration:none;transition:transform .15s ease,filter .15s ease}
/* ボタン画像：囲いいっぱいに出す。高さは画像の比率（2172:724）で自動。青い光を少し足す */
#akustaBtn img{display:block;width:100%;height:auto;aspect-ratio:2172/724;filter:drop-shadow(0 0 calc(16px * var(--fscale)) rgba(59,155,220,.5))}
/* ホバー：少し浮かせる（PCのポインタ操作用） */
#akustaBtn:hover{transform:translateY(calc(-2px * var(--fscale)))}
/* ホバー時は画像の光を強める */
#akustaBtn:hover img{filter:drop-shadow(0 0 calc(24px * var(--fscale)) rgba(90,180,255,.85))}

/* 入口ボタン（768以下＝スマホ）：幅を少し広げて見やすく */
@media(max-width:768px){
  /* スマホは画面幅に合わせて少し広め */
  #akustaBtn{width:94%}
}

/* SNS（768以下）：スマホの並べ方 */
@media(max-width:768px){
  /* ソーシャルボタンの囲い（スマホ）：3つずつで折り返して2段にする */
  /* 768のとき：左右の端の余白5px、ボタンの間10px（5＋246×3＋10×2＋5＝768）、上下の余白5px。そこから縮む */
  /* 間隔：囲いの内側の幅（768のとき758px）に対する割合 */
  #snsBtns{flex-wrap:wrap;column-gap:calc(10px * var(--fscale));padding:calc(5px * var(--fscale))}
  /* ボタン1つの囲い（スマホ）：768のとき幅246px */
  #snsBtns a{width:calc((100% - 20px * var(--fscale)) / 3)}
  /* 2段目の並びを YouTube → R-18 → TikTok にする（R-18とTikTokを後ろへ回す） */
  #sns18{order:1}
  #snsTt{order:2}
  /* 2段目の3つ：段の間3px（768のとき）。囲いの内側の幅に対する割合 */
  #snsYt,#sns18,#snsTt{margin-top:calc(3px * var(--fscale))}
}

/* ==== hp1（区画①〜⑤） ==== */
/* hp1 の囲い：背景画像を敷き、区画は背景に対する％で置く。高さは画像の比率で決まる（PC 2004：2221） */
/* position:relative は、中の区画を背景に対する％で置くための基準にするため */
#hp1{position:relative;background-size:100% 100%;background-repeat:no-repeat}
/* 区画の共通（hp1のみ）：背景の上に、背景に対する％で置く。hp2はまだ作らないので触らない */
#hp1 .area{position:absolute}

/* hp1（769以上＝PC）：背景はPC用、区画位置は背景に対する％（PDF 付録の値） */
@media(min-width:769px){
  /* PC背景 hp1.webp（2004×2221） */
  #hp1{aspect-ratio:2004/2221;background-image:url('assets/hp1.webp')}
  /* ① バナー（左12.9・上21.2 〜 右45.5・下34.2） */
  #r1{left:12.9%;top:21.2%;right:54.5%;bottom:65.8%}
  /* ② お知らせ（左53.9・上21.2 〜 右86.2・下31.8） */
  #r2{left:53.9%;top:21.2%;right:13.8%;bottom:68.2%}
  /* ③ サンクス（左19.5・上39.6 〜 右51.5・下48.6） */
  #r3{left:19.5%;top:39.6%;right:48.5%;bottom:51.4%}
  /* ④ 料金（左33.2・上76.0 〜 右84.8・下85.6） */
  #r4{left:33.2%;top:76.0%;right:15.2%;bottom:14.4%}
  /* ⑤ 支援（左24.2・上87.6 〜 右77.3・下97.1） */
  #r5{left:24.2%;top:87.6%;right:22.7%;bottom:2.9%}
  /* ④女性/男性の画像位置（PC） */
  #priceW{--x:1.0%;--y:16.5%;--w:44.5%}
  #priceM{--x:58.0%;--y:18.5%;--w:44.5%}
  /* ⑤LINE/PayPayの光る枠（PC。背景の絵に合わせて枠からはみ出す） */
  #supLine{--x:-12.0%;--y:-6.0%;--w:58.5%;--h:117.0%}
  #supPay{--x:50.5%;--y:-6.0%;--w:59.0%;--h:117.5%}
  /* ④女性/男性の光の枠（PC。#r5基準。④プレートの上に重なるよう上方向へ） */
  #glowW{--x:12.5%;--y:-126.5%;--w:52.0%;--h:107.0%}
  #glowM{--x:68.5%;--y:-126.5%;--w:52.0%;--h:107.0%}
  /* ①バナー文字（PC＝1920のときの値） */
  #r1{--bnTitleSize:36.25px;--bnBodySize:23.75px;--bnGap:15px}
  /* ②お知らせ（PC＝1920のときの値）：文字サイズ・一覧の上位置・通知ボタン位置 */
  #r2{--nwFontSize:28.75px;--nwListTop:7.5%;--nwBtnRight:1.5%;--nwBtnBottom:-25.5%;--nwBtnSize:23.75px}
  /* ③サンクス（PC＝1920のときの値）：名前サイズ・名前/画像の位置 */
  #r3{--thNameSize:22.5px;--nameX:10.5%;--nameY:17.5%;--thNameW:19.0%;--boxX:86.5%;--boxY:64.0%}
  /* ポップアップの基準文字（PC＝1920のときの値） */
  .pop-box{--popBase:20px}
}

/* hp1（768以下＝SP）：背景はSP用。区画は背景に対する％ */
@media(max-width:768px){
  /* SP背景 sp1.webp（1000×2113） */
  #hp1{aspect-ratio:1000/2113;background-image:url('assets/sp1.webp')}
  /* ↓ 濱崎さんがスマホ幅で測った値（?measure）。微調整は後で */
  #r1{left:19.9%;top:10.3%;right:21.0%;bottom:76.4%}
  #r2{left:16.0%;top:43.7%;right:14.9%;bottom:50.7%}
  #r3{left:18.0%;top:25.8%;right:20.7%;bottom:63.6%}
  /* ④女性/男性＝「料金」の帯。⑤とは別の箱 */
  #r4{left:15.7%;top:82.0%;right:20.8%;bottom:11.3%}
  /* ⑤LINE/PayPay＝上の帯 */
  #r5{left:7.6%;top:70.7%;right:18.4%;bottom:22.6%}
  /* ④女性/男性の画像位置（SP） */
  #priceW{--x:6.0%;--y:23.5%;--w:40.5%}
  #priceM{--x:57.5%;--y:23.5%;--w:41.0%}
  /* ⑤LINE/PayPayの光る枠（SP） */
  #supLine{--x:2.5%;--y:6.0%;--w:47.0%;--h:97.0%}
  #supPay{--x:52.5%;--y:6.0%;--w:46.5%;--h:97.0%}
  /* ④女性/男性の光の枠（SP。#r5基準。④プレートは下にあるので下方向へ） */
  #glowW{--x:12.5%;--y:176.0%;--w:41.0%;--h:86.5%}
  #glowM{--x:56.0%;--y:176.0%;--w:41.0%;--h:86.5%}
  /* ①バナー文字（SP＝768のときの値） */
  #r1{--bnTitleSize:30.23px;--bnBodySize:20.15px;--bnGap:13.43px}
  /* ②お知らせ（SP）：文字サイズ(768基準・小さいので太字)＋一覧の上位置＋通知ボタンの位置 */
  #r2{--nwFontSize:15.67px;--nwListTop:-2.5%;--nwBtnRight:2.5%;--nwBtnBottom:22.0%;--nwBtnSize:16.79px}
  /* ③サンクス（SP＝768のときの値）：名前サイズ・名前/画像の位置 */
  #r3{--thNameSize:19.03px;--nameX:2.0%;--nameY:13.5%;--thNameW:19.5%;--boxX:81.0%;--boxY:56.5%}
  .nw-list{font-weight:700}
  /* ポップアップの基準文字（SP＝768のときの値。スマホは狭く縮むので大きめに取る） */
  .pop-box{--popBase:28px}
}

/* ==== hp2（区画⑥〜⑨）の土台 ==== */
/* PCは背景hp2.webp（2268×3615）を敷き、区画は背景に対する％で置く。SPは sp2/sp3/sp4 を縦積みして、その上に％で置く */
#hp2{position:relative;background-size:100% 100%;background-repeat:no-repeat}
#hp2 .area{position:absolute}
/* SP用の縦積み画像（PCでは隠す） */
.hp2-sp{display:none;position:relative}
.hp2-sp img{display:block;width:100%;height:auto}
/* 画像の境界に淡い水色の雲のようなぼかし（アニメーション無し。一番上/一番下は入れない） */
/* hp1↔hp2（SPは sp1↔sp2）の境界 */
#hp2::before{content:'';position:absolute;left:0;right:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(190,230,255,0) 0%,rgba(195,233,255,.8) 50%,rgba(190,230,255,0) 100%);filter:blur(calc(14px * var(--fscale)))}
@media(min-width:769px){
  /* PC背景 hp2.webp（2268×3615） */
  #hp2{aspect-ratio:2268/3615;background-image:url('assets/hp2.webp')}
  /* PC：hp1とhp2の境界に淡い水色の雲（境界をまたぐ帯＋ぼかし。ぼかし2倍） */
  #hp2::before{top:calc(-22px * var(--fscale));height:calc(44px * var(--fscale))}
}
@media(max-width:768px){
  /* SPは背景を敷かず、sp2/3/4 の縦積み画像で高さを作る */
  #hp2{background-image:none}
  .hp2-sp{display:block}
  /* SP：sp1↔sp2 の境界 */
  #hp2::before{top:calc(-18px * var(--fscale));height:calc(36px * var(--fscale))}
  /* sp2↔sp3（高さ35.45%）・sp3↔sp4（70.88%）の境界 */
  .hp2-sp::before,.hp2-sp::after{content:'';position:absolute;left:0;right:0;z-index:3;pointer-events:none;height:calc(36px * var(--fscale));transform:translateY(-50%);background:linear-gradient(180deg,rgba(190,230,255,0) 0%,rgba(195,233,255,.8) 50%,rgba(190,230,255,0) 100%);filter:blur(calc(14px * var(--fscale)))}
  .hp2-sp::before{top:35.45%}
  .hp2-sp::after{top:70.88%}
}

/* ---- ① バナー ---- */
/* バナー1枚：区画いっぱい。背景画像はJSが --bnBg に入れる（4種から選ぶ）。文字色は白に近い色 */
/* 文字の色・幅は共通。位置(--bnTextLeft)と大きさ(--bnTitleSize/--bnBodySize)はPC/SPで違うので各メディアに */
/* --bnGap：タイトル↔詳細の間＝詳細の下の余白（同じ値）。?adjustで調整できる */
#r1{--bnTextWidth:54%;--bnTextColor:#eaf2ff;--bnTextLeft:41.5%}
/* バナーの表示枠：区画いっぱいに背景画像を敷く。押せる（リンク） */
.bn-view{display:block;position:absolute;left:0;top:0;right:0;bottom:0;background-image:var(--bnBg);background-size:100% 100%;background-repeat:no-repeat;text-decoration:none;overflow:hidden}
/* タイトル・詳細：背景の右余白に乗せる（位置・幅は仮） */
.bn-text{position:absolute;left:var(--bnTextLeft);top:10%;width:var(--bnTextWidth);color:var(--bnTextColor)}
/* タイトル：太字・1行固定・詳細の幅に対して中央の真上に出す */
.bn-title{display:block;font-weight:700;font-size:calc(var(--bnTitleSize) * var(--fscale));line-height:1.3;text-align:center;white-space:nowrap}
/* 詳細：左ぞろえ・文字サイズ固定・最大3行の高さ固定の箱。今の折り返し位置で折り返す */
/* 1段のときは2段目に出す（中央）、2段・3段のときは上から出す。はみ出しは隠す */
.bn-body{display:flex;flex-direction:column;justify-content:flex-start;height:calc(1.5em * 3);margin-top:calc(var(--bnGap) * var(--fscale));margin-bottom:calc(var(--bnGap) * var(--fscale));font-size:calc(var(--bnBodySize) * var(--fscale));line-height:1.5;text-align:left;overflow:hidden}
/* 1段だけのときは、まん中（2段目）に出す */
.bn-body.bn-1{justify-content:center}
/* ドットの列：バナーの下に中央ぞろえで並べる（画像に重ならないよう枠の下に出す） */
.bn-dots{position:absolute;left:0;right:0;bottom:-9%;display:flex;justify-content:center;column-gap:3%}
/* ドット1つ：押せる丸。金色の縁で見えやすく。非選択は暗め、is-on で光る */
.bn-dots button{width:calc(18px * var(--fscale));height:calc(18px * var(--fscale));padding:0;border:calc(1.5px * var(--fscale)) solid rgba(214,176,96,.9);border-radius:50%;background:rgba(10,12,20,.45);cursor:pointer}
/* 今のバナーのドット：琥珀色に強く光る（電球のように） */
.bn-dots button.is-on{background:#ffe3a6;border-color:#ffdf9e;box-shadow:0 0 calc(12px * var(--fscale)) calc(2px * var(--fscale)) rgba(255,190,90,.95)}
/* 件数の文（例 1 / 4）：右下に小さく */
.bn-count{position:absolute;right:3%;bottom:3%;font-size:calc(11px * var(--fscale));color:rgba(234,242,255,.8)}

/* ---- ② お知らせ ---- */
/* 見本：パネル全体にお知らせ4件、右下に通知設定ボタン（位置はCSS変数で仮。?adjustで測れる） */
/* 文字サイズ(--nwFontSize)はPC/SPで違うので、下のメディアごとに入れる */
/* 色は公開中と同じ：日付＝金色、本文＝白に近い色、バッジの中の字＝濃い色 */
/* 一覧の左/上/幅と色は共通。通知ボタンの位置(--nwBtnRight/Bottom)はPC/SPで違うので各メディアに */
/* お知らせ＝キャラ上部に横いっぱい。通知ボタン＝下側（お知らせの下〜枠下部）。位置・幅はCSS変数で ?adjust 調整 */
#r2{--nwListLeft:2%;--nwListWidth:97%;--nwColor:#eaf1ff;--nwDateColor:#ffd98a;--nwPillText:#0a0f1e}
/* お知らせの列：パネル上側に置く。最新4件。幅はボタン列を空けるため少し狭め。行間は詰めぎみ */
.nw-list{position:absolute;left:var(--nwListLeft);top:var(--nwListTop);width:var(--nwListWidth);list-style:none;color:var(--nwColor);font-size:calc(var(--nwFontSize) * var(--fscale));line-height:1.3}
/* お知らせ1件：日付・ラベル・本文を横1列。本文が長いときは…で切る（横1行） */
.nw-list li{display:flex;align-items:center;column-gap:.5em;margin-bottom:.3em;white-space:nowrap;overflow:hidden}
/* 日付：金色・太字・縮まない */
.nw-list li .nw-date{flex:0 0 auto;color:var(--nwDateColor);font-weight:700}
/* 種類ラベル：丸いバッジ・濃い文字・縮まない。色は下の3つ */
.nw-list li .nw-type{flex:0 0 auto;padding:.1em .7em;border-radius:999px;color:var(--nwPillText);font-weight:700;font-size:.85em}
/* バッジの色（公開中と同じ：日記=水色 / バナー=黄 / アルバム=紫） */
.nw-type.diary{background:#7fd4ff}
.nw-type.banner{background:#ffcf6b}
.nw-type.album{background:#c9a7ff}
/* 本文：残り幅いっぱい・1行・はみ出しは… */
.nw-list li .nw-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 通知設定ボタン：パネルの右下（位置は仮）。常に青い淡い光の縁。画面に入った瞬間とホバーで1回フワッと光る（遅延なし） */
.nw-btn{--gc:rgba(40,110,255,1);position:absolute;right:var(--nwBtnRight);bottom:var(--nwBtnBottom);padding:.7em 1.8em;border:calc(1px * var(--fscale)) solid rgba(255,255,255,.55);border-radius:999px;background:linear-gradient(180deg,#5aa0ff,#2f6fd6);color:#fff;font-weight:700;font-size:calc(var(--nwBtnSize) * var(--fscale));line-height:1.1;text-decoration:none;white-space:nowrap;box-shadow:0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc);transition:transform .15s ease}

/* ---- ③ サンクス ---- */
/* 1名1秒で切替（JSがフェード）。押すと一覧。名前と□を「決まった場所にピン留め」して、名前の長さで動かない・縮まないようにする */
/* 名前＝背景アートの吹き出しの中に（文字だけ・手書きフォント・右上がり）。□＝背景アートのくり抜きにぴったり（画像は6:5＝1800×1500で歪まない） */
/* --nameX/Y＝名前の中心位置・--thNameW＝名前枠の幅／--boxX/Y＝□の中心位置・--boxW＝□の幅（高さは比率で決まる）。すべて?adjustで合わせられる */
/* 文字サイズ(--thNameSize)はPC/SPで違うので、下のメディアごとに入れる。--thTilt＝名前の傾き（右上がり約30度） */
/* 共通：フェード・傾き・画像の幅・名前の色。名前と画像の位置(X/Y)・名前幅はPC/SPで違うので各メディアに */
#r3{--thFade:.5s;--thTilt:-17deg;--boxW:35.0%;--thNameColor:#5b2a8c}
/* 土台：中身は絶対配置で置く（押すと一覧を開く） */
.th-card{position:relative;display:block;width:100%;height:100%;text-decoration:none;color:#eaf2ff}
/* フェード（0.5秒）：消えるとき透明＋少し縮む（is-out）→戻るとき“ぶわっと浮かび上がる” */
.th-bubble,.th-box{transition:opacity var(--thFade) ease,transform var(--thFade) ease}
.th-card.is-out .th-bubble,.th-card.is-out .th-box{opacity:0;--thBloom:.85}
/* 名前：決まった中心に置き、中央ぞろえ・手書きフォント・右上がりに傾ける。何文字でも枠内の中央。背景アートの吹き出しに重ねるので枠線・背景は付けない */
.th-bubble{position:absolute;left:var(--nameX);top:var(--nameY);width:var(--thNameW);transform:translate(-50%,-50%) rotate(var(--thTilt)) scale(var(--thBloom,1));text-align:center;white-space:nowrap;font-family:'Yomogi',cursive;font-weight:700;font-size:calc(var(--thNameSize) * var(--fscale));color:var(--thNameColor);-webkit-text-stroke:calc(0.7px * var(--fscale)) var(--thNameColor)}
/* □：決まった中心・幅。高さは画像の比率（6:5＝1800×1500）で決まる */
.th-box{position:absolute;left:var(--boxX);top:var(--boxY);width:var(--boxW);aspect-ratio:1800/1500;transform:translate(-50%,-50%) scale(var(--thBloom,1));overflow:hidden}
/* □の中の画像：枠いっぱい（比率が同じなので歪まない・ど真ん中） */
.th-box img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- ④ 料金（女性・男性ボタン） ---- */
/* 女性＝左・男性＝右。1枚ずつ 位置(x,y)と幅(w)をCSS変数で、背景の女性/男性プレートにぴったり重ねる */
/* 位置の値はPC/SPで違うので、下のメディアごとに入れる（?adjust で測った値） */
/* 画像ボタン：区画の中に、変数の位置・幅で置く（押せる）。常に淡い光の縁。画面に入った瞬間とホバーで1回フワッと光る（遅延なし） */
.price-btn{position:absolute;left:var(--x);top:var(--y);width:var(--w);text-decoration:none;filter:drop-shadow(0 0 calc(16px * var(--fscale)) var(--gc)) drop-shadow(0 0 calc(34px * var(--fscale)) var(--gc));transition:transform .15s ease}
/* ボタン画像：幅いっぱい（高さは画像の比率で決まる） */
.price-btn img{display:block;width:100%;height:auto}
/* 女性＝ピンク／男性＝青の光（白飛びしない濃いめの色） */
#priceW{--gc:rgba(255,45,165,1)}
#priceM{--gc:rgba(40,110,255,1)}

/* ---- ⑤ 支援（LINE・PayPay） ---- */
/* 文字は背景の絵にあるので出さず、「緑/赤の光る枠」だけを、絵のボタンにぴったり重ねる */
/* 位置・大きさの値はPC/SPで違うので、下のメディアごとに入れる（?adjust で測った値）。色は共通 */
/* LINE＝緑／PayPay＝赤の光の色（白飛びしない濃いめの色） */
#supLine{--gc:rgba(25,215,100,1)}
#supPay{--gc:rgba(255,35,35,1)}
/* 支援ボタン：絵のボタンに重ねる角丸の当たり。くっきり枠線は無し。常に色の分かる光の縁。 */
.sup-btn{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:calc(12px * var(--fscale));text-decoration:none;box-shadow:0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc),0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc);transition:transform .15s ease}
/* 文字は出さない（背景の絵にあるため） */
.sup-btn span{display:none}

/* ④女性/男性プレートに重ねる光の枠（装飾のみ）：位置・大きさは #r5 基準の％。クリックは拾わず下の画像ボタンへ通す */
.glow-frame{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:calc(12px * var(--fscale));pointer-events:none;box-shadow:0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc),0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc)}
/* 女＝ピンク／男＝青（④の画像の光と同じ色） */
#glowW{--gc:rgba(255,45,165,1)}
#glowM{--gc:rgba(40,110,255,1)}

/* ---- 光り方 ---- */
/* 常時＝各ボタンの --gc 色の縁（静的）。画面に入った瞬間＝1回フワッと約2倍に光って戻る。ホバー中＝ずっと約2倍で光り続ける */
/* 色は各ボタンの --gc で変わる。立ち上がりは速く、約3秒かけて光ってから常時の縁へ戻る */
/* 画像ボタン用（R-18）：画像の形に沿ってふわっと光る。0%/100%は常時と同じ、ピークは約2倍 */
@keyframes glowImg{0%,100%{filter:drop-shadow(0 0 calc(20px * var(--fscale)) var(--gc))}7%,55%{filter:drop-shadow(0 0 calc(40px * var(--fscale)) var(--gc)) drop-shadow(0 0 calc(20px * var(--fscale)) var(--gc))}}
/* 画像ボタン濃いめ版（女性・男性）：背景の絵が明るく埋もれやすいので、光の濃さを2倍（二重）にする */
@keyframes glowImg2{0%,100%{filter:drop-shadow(0 0 calc(16px * var(--fscale)) var(--gc)) drop-shadow(0 0 calc(34px * var(--fscale)) var(--gc))}7%,55%{filter:drop-shadow(0 0 calc(30px * var(--fscale)) var(--gc)) drop-shadow(0 0 calc(64px * var(--fscale)) var(--gc))}}
/* 枠ボタン用（通知設定）：角丸の縁がふわっと光る。0%/100%は常時と同じ、ピークは約2倍 */
@keyframes glowBox{0%,100%{box-shadow:0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc)}7%,55%{box-shadow:0 0 calc(40px * var(--fscale)) calc(8px * var(--fscale)) var(--gc)}}
/* 枠ボタン濃いめ版（LINE・PayPay）：光の濃さを2倍（二重）にする */
@keyframes glowBox2{0%,100%{box-shadow:0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc),0 0 calc(20px * var(--fscale)) calc(3px * var(--fscale)) var(--gc)}7%,55%{box-shadow:0 0 calc(40px * var(--fscale)) calc(8px * var(--fscale)) var(--gc),0 0 calc(40px * var(--fscale)) calc(8px * var(--fscale)) var(--gc)}}
/* 画面に入った瞬間＝1回だけ光る（終わったらJSが外す→再入場でまた光る） */
#sns18.pulse{animation:glowImg 3s ease 1}
.price-btn.pulse{animation:glowImg2 3s ease 1}
.nw-btn.pulse{animation:glowBox 3s ease 1}
.sup-btn.pulse{animation:glowBox2 3s ease 1}
/* ホバー中＝約2倍でずっと光り続ける＋少し浮き上がる（遅延なし。離すと戻る）。女性/男性・LINE/PayPayは濃さ2倍 */
#sns18:hover{filter:drop-shadow(0 0 calc(40px * var(--fscale)) var(--gc)) drop-shadow(0 0 calc(20px * var(--fscale)) var(--gc));transform:translateY(calc(-5px * var(--fscale))) scale(1.03)}
.price-btn:hover{filter:drop-shadow(0 0 calc(30px * var(--fscale)) var(--gc)) drop-shadow(0 0 calc(64px * var(--fscale)) var(--gc));transform:translateY(calc(-5px * var(--fscale))) scale(1.03)}
.nw-btn:hover{box-shadow:0 0 calc(40px * var(--fscale)) calc(8px * var(--fscale)) var(--gc);transform:translateY(calc(-5px * var(--fscale))) scale(1.03)}
.sup-btn:hover{box-shadow:0 0 calc(40px * var(--fscale)) calc(8px * var(--fscale)) var(--gc),0 0 calc(40px * var(--fscale)) calc(8px * var(--fscale)) var(--gc);transform:translateY(calc(-5px * var(--fscale))) scale(1.03)}

/* ==== hp2 区画：⑧年表・⑨日記 ==== */
/* 位置は背景に対する％（公開中の実績値）。大きさは 1920/768 の値×fscale。cqw/vwは使わない */

/* ---- ⑥ ギャラリー：画像の泡がJSで動く。押すと丸いまま拡大 ---- */
#r6{pointer-events:none}
.galstage{position:absolute;inset:0;overflow:hidden;pointer-events:auto}
.gbub{position:absolute;top:0;left:0;border-radius:50%;background-size:cover;background-position:center;cursor:pointer;will-change:transform}
/* 拡大ポップアップ：丸いまま大きく（幕は共通の .pop-back） */
.gal-pop-img{position:relative;width:min(80vw,80vh);height:min(80vw,80vh);object-fit:cover;border-radius:50%;box-shadow:0 0 0 calc(3px * var(--fscale)) rgba(255,206,110,.9),0 0 calc(40px * var(--fscale)) rgba(255,180,70,.42),0 0 calc(66px * var(--fscale)) rgba(60,140,255,.35)}

/* ---- ⑦ 泉（スワンズボイス）：メッセージが泉を漂う＋透明の入力フォーム。読みgviz/書きGAS ---- */
#r7{left:0;top:0;right:0;bottom:0;pointer-events:none}
/* 漂う場所（はみ出しは隠す） */
.pond{position:absolute;overflow:hidden;pointer-events:none}
/* 漂う1メッセージ（Yomogi。大きさ/位置/濃さはJSが毎フレーム決める） */
/* 漂う1メッセージ：全角10文字ほどで折り返し＝中央そろえの2段（max-widthは文字サイズ基準のem） */
.bubble{position:absolute;left:0;top:0;transform-origin:top left;max-width:10.6em;font-family:'Yomogi',cursive;font-weight:700;letter-spacing:.04em;line-height:1.25;text-align:center;white-space:normal;overflow-wrap:anywhere;-webkit-text-stroke:calc(0.6px * var(--fscale)) rgba(6,18,40,.72);paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,8,24,.5);will-change:transform,opacity;pointer-events:none}
/* 送信演出：落ちる文字・着水の波紋・しずく */
.vdrop{position:absolute;left:0;top:0;transform-origin:center;font-family:'Yomogi',cursive;font-weight:700;letter-spacing:.04em;pointer-events:none;will-change:transform,opacity;-webkit-text-stroke:calc(0.6px * var(--fscale)) rgba(6,18,40,.72);paint-order:stroke fill;text-shadow:0 1px 2px rgba(0,8,24,.5)}
.vring{position:absolute;width:calc(16px * var(--fscale));height:calc(16px * var(--fscale));border-radius:50%;border:calc(2px * var(--fscale)) solid;opacity:.9;pointer-events:none;will-change:transform,opacity}
.vdroplet{position:absolute;width:calc(7px * var(--fscale));height:calc(7px * var(--fscale));border-radius:50%;pointer-events:none;will-change:transform,opacity;box-shadow:0 0 calc(4px * var(--fscale)) rgba(180,225,255,.5)}
/* 入力フォーム（背景の絵に透明で重ねる。文字だけ見える） */
.vform{position:absolute;inset:0;pointer-events:none}
#vtext{position:absolute;background:transparent;border:0;outline:none;resize:none;overflow:hidden;font-family:'Yomogi',cursive;font-weight:700;line-height:1.3;text-align:left;caret-color:#2f7bff;color:#1a3a7a;pointer-events:auto}
/* 残り文字数（赤い数字） */
.vcount{position:absolute;transform:translate(-50%,-50%);text-align:center;font-family:'Yomogi',cursive;font-weight:700;color:#12233f;line-height:1.1;white-space:nowrap;pointer-events:none}
.vcount .vc-num{display:inline-block;font-size:2.1em;line-height:1;color:#ff2e2e;font-weight:800}
/* 色スウォッチ（絵の丸に透明で重ね、選択中だけ光る） */
.swatches{position:absolute;inset:0}
/* 色ボタン：常に正円（高さは幅から自動＝aspect-ratio）。位置合わせは幅と左右で行う */
.swatches .sw{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1;background:transparent;border:0;border-radius:50%;cursor:pointer;pointer-events:auto}
.swatches .sw.sel{box-shadow:0 0 0 calc(3px * var(--fscale)) #fff,0 0 calc(10px * var(--fscale)) calc(4px * var(--fscale)) currentColor,0 0 calc(20px * var(--fscale)) calc(8px * var(--fscale)) currentColor}
/* 青はファンに隠す（owner用。機能は残す） */
.swatches .sw.sw-blue{opacity:0}
/* 送信ボタン（絵のSENDに透明で重ねる） */
#vsend{position:absolute;transform:translate(-50%,-50%);background:transparent;border:0;color:transparent;font-size:0;cursor:pointer;pointer-events:auto}
#vsend:disabled{cursor:default}

/* ---- ⑧ 年表（経歴）：JSなしの静的コンテンツ。PCは横5列・SPは縦5行（CSSで分岐） ---- */
/* --yrBase＝本文の基準px（PC/SPで上書き）。年・見出しは em で比率指定。クリックは拾わない */
#r8{color:#eef3ff;pointer-events:none}
.yr-year{display:block;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.02em;color:var(--yrColor)}
.yr-title{display:block;font-weight:700;color:#fff;line-height:1.2}
.yr-body{display:block;font-weight:400;line-height:1.35}
/* 年ごとの色（年の文字＋詳細の上の区切り線に共通で使う） */
.yr.c1{--yrColor:#f5c451}
.yr.c2{--yrColor:#7fd7ff}
.yr.c3{--yrColor:#ff96c8}
.yr.c4{--yrColor:#84ffb4}
.yr.c5{--yrColor:#c4a3ff}

/* ---- ⑨ 日記：キーパッド（緑のネオン） ---- */
/* --kpBase＝キーの基準px（PC/SPで上書き）。中は em と ×fscale で縮む */
#dKeypad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.5 * var(--kpBase) * var(--fscale));pointer-events:auto}
.kp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.45 * var(--kpBase) * var(--fscale));width:72%}
.kp{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:rgba(2,12,7,.72);border:calc(1.6px * var(--fscale)) solid #33ff9d;border-radius:calc(7px * var(--fscale));color:#8affc6;font-family:'Courier New',monospace;font-weight:700;font-size:calc(var(--kpBase) * var(--fscale));cursor:pointer;box-shadow:0 0 calc(6px * var(--fscale)) rgba(51,255,157,.4),inset 0 0 calc(8px * var(--fscale)) rgba(51,255,157,.18)}
.kp:hover{box-shadow:0 0 calc(13px * var(--fscale)) rgba(51,255,157,.8),inset 0 0 calc(12px * var(--fscale)) rgba(51,255,157,.35)}
.kp.hit{background:rgba(51,255,157,.92);color:#012;transform:scale(.9)}
.kp-dots{display:flex;gap:calc(.33 * var(--kpBase) * var(--fscale));min-height:calc(.5 * var(--kpBase) * var(--fscale));align-items:center}
.kp-dots span{width:calc(.5 * var(--kpBase) * var(--fscale));height:calc(.5 * var(--kpBase) * var(--fscale));border-radius:50%;border:1px solid #33ff9d}
.kp-dots span.on{background:#33ff9d;box-shadow:0 0 calc(10px * var(--fscale)) rgba(51,255,157,1)}
.kp-hint{color:#8affc6;font-family:monospace;font-size:calc(.5 * var(--kpBase) * var(--fscale));letter-spacing:.03em;text-align:center}
.kp-unlock{background:rgba(2,12,7,.85);border:calc(1.6px * var(--fscale)) solid #33ff9d;border-radius:calc(7px * var(--fscale));color:#8affc6;font-family:monospace;font-weight:700;font-size:calc(.68 * var(--kpBase) * var(--fscale));letter-spacing:.22em;padding:calc(.2 * var(--kpBase) * var(--fscale)) calc(1.05 * var(--kpBase) * var(--fscale));cursor:pointer}
.kp-unlock:hover{background:rgba(51,255,157,.15)}
.kp-entry{display:flex;align-items:center;justify-content:center;gap:calc(.35 * var(--kpBase) * var(--fscale));min-height:calc(.8 * var(--kpBase) * var(--fscale))}
.kp-entry-txt{min-width:calc(2.4 * var(--kpBase) * var(--fscale));text-align:center;color:#c9ffe6;font-family:monospace;font-weight:700;font-size:calc(.76 * var(--kpBase) * var(--fscale));letter-spacing:.35em}
.kp-back{background:rgba(2,12,7,.7);border:calc(1.4px * var(--fscale)) solid #6affc2;border-radius:calc(6px * var(--fscale));color:#c9ffe6;font-family:monospace;font-weight:700;font-size:calc(.64 * var(--kpBase) * var(--fscale));line-height:1;padding:calc(.17 * var(--kpBase) * var(--fscale)) calc(.5 * var(--kpBase) * var(--fscale));cursor:pointer}
.kp-msg{color:#9fffcf;font-family:monospace;font-size:calc(.47 * var(--kpBase) * var(--fscale));min-height:1em;text-align:center}

/* ---- ⑨ サイン（ロゴ・for my Swans・©）：背景の飾り ---- */
#sign{position:absolute;left:49.33%;top:87.14%;width:12.5%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
#sign img{width:62%;height:auto;opacity:.92;margin-bottom:calc(4px * var(--fscale))}
#sign span{font-family:'Yomogi',cursive}
#sign span:nth-of-type(1){font-style:italic;letter-spacing:.16em;font-size:calc(15px * var(--fscale));color:#7fd7ff}
#sign span:nth-of-type(2){letter-spacing:.2em;font-size:calc(11px * var(--fscale));color:rgba(200,215,240,.7);margin-top:calc(3px * var(--fscale))}

/* ⑨ 鍵（SPのみ表示） */
#r9{pointer-events:none}
#lockhot{display:none;pointer-events:auto}

/* 両サイド下でゆらゆら揺れるキャラ（画面に固定・装飾・クリック無効） */
.fixchar{position:fixed;bottom:calc(14px * var(--fscale));width:calc(78px * var(--fscale));z-index:40;opacity:.92;filter:drop-shadow(0 0 calc(12px * var(--fscale)) rgba(60,140,255,.65));animation:floaty 12s ease-in-out infinite;pointer-events:none}
.fixchar.l{left:calc(14px * var(--fscale))}
.fixchar.r{right:calc(14px * var(--fscale));animation-duration:14s;animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(7px) rotate(-2.5deg)}50%{transform:translateY(-11px) rotate(2.5deg)}}
@media(max-width:768px){.fixchar{width:calc(66px * var(--fscale))}}

/* hp2 PC（769以上） */
@media(min-width:769px){
  /* ⑥ ギャラリー枠（PC） */
  #r6{left:16.5%;top:19.6%;right:55.6%;bottom:55.3%}
  /* ⑦ 泉（PC）。--vMin/--vMax＝漂う文字の最小/最大px、--vcountSize＝残り文字カウンター、--vtextSize＝入力欄の文字（すべて1920基準×fscale） */
  #r7{--vMin:23px;--vMax:31px;--vcountSize:19px;--vtextSize:36px}
  .pond{left:55%;top:19.5%;width:28%;height:25.5%}
  #vtext{left:55.2%;top:9.4%;width:22.5%;height:3.3%;font-size:calc(var(--vtextSize) * var(--fscale));padding:0 1%}
  .vcount{left:80.3%;top:11.0%;width:5.0%;height:2.7%;font-size:calc(var(--vcountSize) * var(--fscale))}
  .swatches .sw{top:13.8%;width:2.4%}
  .swatches .sw:nth-child(1){left:57.13%}
  .swatches .sw:nth-child(2){left:61.33%}
  .swatches .sw:nth-child(3){left:65.23%}
  .swatches .sw:nth-child(4){left:69.33%}
  .swatches .sw:nth-child(5){left:72.93%}
  .swatches .sw.sw-blue{left:56.85%;top:6.62%;width:6%;height:3%}
  #vsend{left:79.5%;top:13.9%;width:7.0%;height:1.6%}
  /* ⑧ 年表：横5列の帯。各列を背景パネルの中に収める（上の枠線に被らないよう少し下げ、左右も内側へ） */
  #r8{left:2.0%;top:61.3%;right:-1.6%;bottom:25.9%;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;--yrBase:19px}
  .yr{flex:0 0 18.4%;display:flex;flex-direction:column;padding:0 .5%}
  .yr-year{font-size:calc(var(--yrBase) * 1.55 * var(--fscale))}
  .yr-title{font-size:calc(var(--yrBase) * 1.2 * var(--fscale));margin-top:1.2em;line-height:1.33}
  /* 詳細：左詰め・全角13文字ごとに折り返す（パネルからの飛び出し防止） */
  .yr-body{font-size:calc(var(--yrBase) * .98 * var(--fscale));margin-top:1.0em;padding-top:.85em;line-height:1.45;max-width:13em;text-align:left;border-top:calc(1px * var(--fscale)) solid var(--yrColor)}
  /* ⑨ 日記：#r9は全面に広げ、鍵/キーパッド/サインを背景に対する％で置く。PCはキーパッド常時表示（測定値） */
  #r9{left:0;top:0;right:0;bottom:0}
  #dKeypad{position:absolute;left:68%;top:87%;width:15%;height:12.5%;--kpBase:30px}
  /* ⑨ サイン（PC・測定値） */
  #sign{left:54.8%;top:93.1%;width:11.5%}
}

/* hp2 SP（768以下） */
@media(max-width:768px){
  /* ⑥ ギャラリー枠（SP） */
  #r6{left:11.78%;top:42.34%;right:11.79%;bottom:38.42%}
  /* ⑦ 泉（SP）。--vMin/--vMax＝漂う文字の最小/最大px、--vcountSize＝残り文字カウンター、--vtextSize＝入力欄の文字（すべて768基準×fscale） */
  #r7{--vMin:22px;--vMax:34px;--vcountSize:25px;--vtextSize:38px}
  .pond{left:10.54%;top:8.93%;width:78.19%;height:20.92%}
  #vtext{left:13.35%;top:4.39%;width:55.03%;height:2.35%;font-size:calc(var(--vtextSize) * var(--fscale))}
  .vcount{left:79.47%;top:5.48%;width:10.73%;height:2.34%;font-size:calc(var(--vcountSize) * var(--fscale))}
  .swatches .sw:nth-child(1){left:18.64%;top:7.81%;width:5.42%}
  .swatches .sw:nth-child(2){left:29.21%;top:7.81%;width:5.94%}
  .swatches .sw:nth-child(3){left:39.61%;top:7.81%;width:5.67%}
  .swatches .sw:nth-child(4){left:49.94%;top:7.81%;width:5.55%}
  .swatches .sw:nth-child(5){left:60.52%;top:7.81%;width:5.55%}
  .swatches .sw.sw-blue{left:18.25%;top:7.79%;width:20%;height:2%}
  #vsend{left:78.30%;top:7.82%;width:20.00%;height:1.21%}
  /* ⑧ 年表：縦5行（年|見出し|本文） */
  #r8{left:12.27%;top:73.43%;right:5.94%;bottom:17.12%;display:flex;flex-direction:column;justify-content:space-between;--yrBase:16px}
  .yr{display:grid;grid-template-columns:18% 33% 49%;align-items:center;column-gap:1%}
  .yr-year{font-size:calc(var(--yrBase) * 1.5 * var(--fscale));text-align:center}
  .yr-title{font-size:calc(var(--yrBase) * .9 * var(--fscale))}
  .yr-body{font-size:calc(var(--yrBase) * .72 * var(--fscale))}
  /* ⑨ 日記：#r9は全面。SPは鍵を押すとキーパッドが開く */
  #r9{left:0;top:0;right:0;bottom:0}
  /* 鍵（トランクの南京錠に重ねる当たり）。青い光のリングで「押せる」を示す */
  #lockhot{display:block;position:absolute;left:42.26%;top:91.13%;width:14.77%;height:3.00%;z-index:2;cursor:pointer;border-radius:14%/34%}
  #lockhot::before{content:'';position:absolute;inset:-22% -16%;border-radius:16%/40%;pointer-events:none;opacity:.55;box-shadow:0 0 0 calc(2px * var(--fscale)) rgba(120,200,255,.9),0 0 calc(10px * var(--fscale)) calc(3px * var(--fscale)) rgba(70,160,255,.85),0 0 calc(26px * var(--fscale)) calc(8px * var(--fscale)) rgba(45,125,255,.55)}
  /* キーパッド（ふだんは隠し、.openで出す） */
  #dKeypad{position:absolute;left:17.36%;top:82.86%;width:64.1%;height:15.33%;z-index:3;padding:3.5% 3% 2.5%;background:rgba(6,14,28,.94);border:calc(2px * var(--fscale)) solid rgba(90,185,255,.75);border-radius:calc(16px * var(--fscale));box-shadow:0 0 calc(34px * var(--fscale)) rgba(50,140,255,.6),inset 0 0 calc(22px * var(--fscale)) rgba(30,90,200,.35);opacity:0;visibility:hidden;transform:scale(.35);transform-origin:68% 120%;transition:opacity .28s ease,transform .38s cubic-bezier(.2,1.35,.4,1),visibility .28s;--kpBase:40px}
  #dKeypad.open{opacity:1;visibility:visible;transform:scale(1)}
  .kp-grid{width:100%;gap:3%}
  /* ⑨ サイン（SP・測定値） */
  #sign{left:49.92%;top:90.63%;width:21.12%}
}

/* ---- ⑨ 日記（hp2の下にその場で出る。公開中と同じ動き） ---- */
/* 日記のまとまり：ふだんは隠し、鍵が合うと表示。文字の基準は 1920 のときの値×fscale（SPは下のメディアで上書き） */
#diaryReveal{display:none;background:linear-gradient(180deg,#eef7ff 0%,#cfe8ff 100%);color:#17263d;font-family:'Yomogi',cursive;padding:calc(34px * var(--fscale)) 6% calc(60px * var(--fscale));font-size:calc(16px * var(--fscale));border-top:calc(3px * var(--fscale)) solid #7fb6e8}
#diaryReveal.is-open{display:block}
/* 幅は全幅（1920で1920・768で768）。左右の余白は #diaryReveal の padding だけ */
#diaryReveal .dy-list{max-width:none;margin:0;text-align:left}
/* 画面右上に固定の「日記を閉じる」ボタン（開いている間だけ表示） */
#diaryCloseFixed{display:none;position:fixed;top:calc(14px * var(--fscale));right:calc(14px * var(--fscale));z-index:60;align-items:center;gap:.4em;background:rgba(2,12,20,.9);border:calc(1.6px * var(--fscale)) solid #7fb6ff;border-radius:calc(10px * var(--fscale));color:#daecff;font-family:'Yomogi',cursive;font-weight:700;letter-spacing:.06em;cursor:pointer;box-shadow:0 0 calc(12px * var(--fscale)) rgba(127,182,255,.6);font-size:calc(16px * var(--fscale));padding:calc(10px * var(--fscale)) calc(22px * var(--fscale))}
#diaryCloseFixed.is-open{display:flex}
#diaryCloseFixed:hover{background:rgba(127,182,255,.15)}
/* SP（768のときの値×fscale） */
@media(max-width:768px){
  #diaryReveal{font-size:calc(24px * var(--fscale))}
  #diaryCloseFixed{top:calc(11px * var(--fscale));right:calc(11px * var(--fscale));font-size:calc(26px * var(--fscale));padding:calc(14px * var(--fscale)) calc(26px * var(--fscale))}
}
/* 日記の見出し・各日付・本文 */
.dy-head{margin-bottom:1em;text-align:center;font-size:1.286em;letter-spacing:.1em;color:#1c4e86}
.dy-list .dentry{border-top:calc(1px * var(--fscale)) solid rgba(70,130,200,.35);padding:1em 0}
.dy-list .dentry:first-child{border-top:0}
.dy-list .dt{font-family:'Yomogi',cursive;letter-spacing:.15em;color:#2a6bbf;font-size:.857em}
.dy-list .dentry p{margin-top:.4em;color:#22344e;line-height:1.6}
.dy-empty{text-align:center;color:rgba(30,60,100,.55)}

/* ==== ポップアップ（画面に重ねる） ==== */
/* 大きさの約束：本体と同じ「1920(PC)・768(SP)のときの値 × var(--fscale)」。
   中身の文字・余白はすべて箱の文字サイズ（--popBase×fscale）を基準(em)にして、1つの倍率でまとめて縮む。
   枠線・角丸・影のpxは calc(◯px * var(--fscale))。--popBase はPC/SPで値が違うので各メディアに置く */
/* 土台：画面いっぱいに固定。ふだんは出さない（is-open で出す）。いちばん手前 */
.pop{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:4%}
/* 開いているとき：中央に出す */
.pop.is-open{display:flex}
/* 後ろの暗い幕：押すと閉じる */
.pop-back{position:absolute;inset:0;background:rgba(0,0,0,.6)}
/* 中身の箱：文字サイズが中身全部の基準（--popBase×fscale）。幅も同比率。縦に長いときは中だけスクロール。青い枠 */
.pop-box{position:relative;width:100%;max-width:calc(640px * var(--fscale));max-height:92vh;overflow:auto;background:#0a1222;border:calc(1px * var(--fscale)) solid rgba(120,170,255,.5);border-radius:calc(14px * var(--fscale));padding:5%;box-shadow:0 0 calc(24px * var(--fscale)) rgba(120,170,255,.25);font-size:calc(var(--popBase) * var(--fscale))}
/* CLOSEボタン：右上 */
.pop-close{position:absolute;top:2.5%;right:4%;border:0;background:none;color:#cdd8ea;font-size:1em;letter-spacing:.05em;cursor:pointer}
/* 中身：文字色は白に近い色（文字サイズは箱から受け継ぐ） */
.pop-body{color:#eaf2ff}

/* ---- 料金ポップアップの中身（文字は箱の基準に対する倍率＝em） ---- */
/* 英語の見出し（For Women / For Men）：手書き風でなくゴシックのまま。女性はピンク */
.pr-en{font-size:1.571em;font-style:italic;color:#ff8ad0;letter-spacing:.08em}
/* 男性は青にする（同じ .pr-en のうち男性ポップアップだけ色を変える） */
#popPriceM .pr-en{color:#7fb3ff}
/* プランの説明見出し */
.pr-lead{margin:.3em 0 1em;font-size:1.143em}
/* 見出しの丸いラベル（基本プラン など）：ピンクの縁 */
.pr-tag{display:inline-block;margin:1.2em 0 .6em;padding:.35em 1em;border:calc(1px * var(--fscale)) solid #ff8ad0;border-radius:999px;font-size:.929em;color:#ffd0ec}
/* 料金の行の一覧 */
.pr-list{margin:0}
/* 料金1行：項目を左、金額を右。下に細い区切り線 */
.pr-list>div{display:flex;justify-content:space-between;align-items:baseline;padding:.7em 0;border-bottom:calc(1px * var(--fscale)) solid rgba(234,242,255,.14)}
/* 項目名 */
.pr-list dt{font-size:1em}
/* 金額：太字 */
.pr-list dd{font-size:1.071em;font-weight:700}
/* 小さな補足（新宿または…） */
.pr-sub{margin:.2em 0 .4em;font-size:.857em;color:rgba(234,242,255,.6)}
/* 注意書き・交通費など：小さめ、少し薄い */
.pr-note{margin:.5em 0;font-size:.857em;line-height:1.6;color:rgba(234,242,255,.8)}
/* 男性プランの本文：中央に大きめ */
.pr-men{margin:1.4em 0;text-align:center;font-size:1.071em;line-height:1.7}

/* ---- サンクス一覧ポップアップ ---- */
/* 見出し */
.th-head{margin-bottom:1em;text-align:center;font-size:1.286em;letter-spacing:.1em}
/* グリッド：名前＋画像のセットを並べる */
.th-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
/* セット1つ：縦に画像→名前 */
.th-grid li{text-align:center}
/* セットの画像：正方形に収める */
.th-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:calc(8px * var(--fscale));display:block}
/* セットの名前 */
.th-grid span{display:block;margin-top:.4em;font-size:.857em}

/* ---- 通知設定ポップアップ ---- */
/* 見出し */
.sb-lead{font-size:1.286em;margin-bottom:.4em}
/* 説明文 */
.sb-note{font-size:.929em;color:rgba(234,242,255,.8);margin-bottom:1em}
/* 入力と送信ボタンを縦に並べる */
.sb-form{display:flex;flex-direction:column;row-gap:.8em}
/* メール入力欄 */
.sb-input{padding:.7em .9em;border:calc(1px * var(--fscale)) solid rgba(234,242,255,.4);border-radius:calc(8px * var(--fscale));background:rgba(255,255,255,.06);color:#eaf2ff;font-size:1em}
/* 送信ボタン */
.sb-send{padding:.7em;border:0;border-radius:calc(8px * var(--fscale));background:#7fb3ff;color:#0a1222;font-size:1em;font-weight:700;cursor:pointer}
/* 送信後の案内（登録済み・完了など） */
.sb-msg{margin-top:.8em;font-size:.929em;min-height:1.2em;color:#cfe0ff}

/* ==== 測定モード（URLに ?measure を付けたときだけ。ふだんは効かない） ==== */
/* 区画に赤い枠を出し、区画ではなく下の背景でマウスを測れるようにする */
.measure-on #hp1 .area{pointer-events:none;outline:2px solid rgba(255,60,60,.9)}
/* 測った値を出す小窓：画面の左下に固定。いちばん手前 */
.measure-readout{position:fixed;left:8px;bottom:8px;z-index:100;max-width:90%;padding:6px 10px;background:rgba(0,0,0,.82);color:#fff;font-size:13px;line-height:1.4;border-radius:6px;white-space:pre-wrap}

/* ==== 調整モード（URLに ?adjust を付けたときだけ。位置と文字サイズを画面で合わせる） ==== */
/* 調整パネル：画面の右上に固定 */
.adjust-panel{position:fixed;top:8px;right:8px;z-index:101;width:232px;max-height:92vh;overflow:auto;padding:10px;background:rgba(0,0,0,.88);color:#fff;font-size:12px;line-height:1.5;border-radius:8px}
/* ボタンの行 */
.adjust-panel .row{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
/* ボタン */
.adjust-panel button{min-width:36px;padding:5px 6px;border:0;border-radius:5px;background:#2a3550;color:#fff;font-size:12px;cursor:pointer}
/* 選んでいる部品・字 */
.adjust-panel select{max-width:100%;padding:3px}
/* 出来上がったCSSを出す所（コピーして送る） */
.adjust-panel textarea{width:100%;height:160px;margin-top:6px;font-size:11px;background:#0a1222;color:#cfe0ff;border:1px solid #2a3550;border-radius:5px}
/* 今えらんでいる部品を黄色い枠で示す */
.sel-box{outline:2px solid #ffd34d}
/* 今えらんでいるボックス（区画・hp2）を水色の枠で示す */
.sel-box2{outline:2px solid #4dd0ff}
/* 調整モードのときだけ、③の名前枠・画像枠を点線で見えるようにする（幅・位置を合わせやすく） */
.adjust-on .th-bubble{outline:1px dashed rgba(255,211,77,.9)}
.adjust-on .th-box{outline:2px dashed rgba(255,211,77,.95)}
/* ②お知らせ枠・通知ボタン・①バナー文字の範囲も点線で見えるように（上に広がっていないか等を確認） */
.adjust-on .nw-list{outline:1px dashed rgba(255,211,77,.9)}
.adjust-on .nw-btn{outline:2px dashed rgba(120,255,160,.95)}
.adjust-on .bn-text{outline:1px dashed rgba(255,211,77,.9)}