/* v020: 帯をやめ、v014のように文字を映像の上に重ねて全画面に。 *//* 本人「FVのロゴが小さすぎる」→ 約2倍 */@media (max-height:520px){}/* 場面の言葉: 前の3D LPの型(中央・小さな見出し+一行・鯨は「ここから先は、DIVE」) *//* 鯨の場面: ロゴをドーンと、下にサブコピー *//* ===== v020 追記: v005〜v010の文字の組み方へ(本人「v05~10ぐらいは文字の感じオシャレだった」) =====
   明朝(Hiragino Mincho ProN)の中太・字間広め・白。題は左下、ロゴは左上(v007)。場面の言葉は中央に明朝。 */@media (max-height:700px){}@media (max-height:700px){}/* ===== v020 追記: 初期(v002)の組みをそのまま移植(本人「全部ダサい。過去verを振り返って。特に初期」) =====
   出典 v002 assets/c010/fv-refine.css・cinema.css の実測。文字以外の要素を減らすのが初期の良さ。 *//* 操作は初期の「↓ 潜らずに読む」と同じ、12pxの下線文字。黄色い丸ボタンをやめる *//* 場面の言葉: v002の .p-c2(明朝500・44px・字間.1em・中央)。見出し番号なし・ロゴなし・補足は明朝14px */@media (max-height:700px){}/* ===== パターン①「潜航」(本人「1で、見せてみて」) ===== *//* 最後のコマの招待状の紙に、紙の傾きのまま書く(初期c010の .p-c3 の色: 見出し#8a6f45・本文#6b5530)。位置と変形はJSが紙の四隅から計算 *//* 鯨の場面: ロゴをど真ん中にドーン(本人「ロゴをど真ん中にドーンもやってみて。今の文字は良い感じに残しつつ」) *//* FVのコピー(スマホで読点の位置で折り返す) *//* 題は2行のまま(PC)、スマホは読点で折り返す。鯨の言葉が出たら題は消える(JS) */@media (max-width:380px){}@media (max-width:380px){}@media (max-width:380px){}@media (max-width:380px){}/* ===== 黄金比の組み(φ=1.618・本人「この配置は、どれも黄金比を意識して」) =====
   値は JS(fitGolden)が --fv-m(余白=幅/φ^6)・--fv-s(題の大きさ)・--fv-line(題の行の長さ)として渡す。 *//* FV: 要素が複数の画面は視線を黄金分割線へ。題と補足のまとまりの中心を、下から38.2%(上から61.8%)の線に置く */@media (max-width:380px){}/* 鯨: ロゴは本人指定どおり画面のど真ん中。ロゴは黄金長方形(640x396)なので 高さ=幅/φ。
   幅 = PCは画面幅/φ²(高さが画面の高さ/φ²を超えない)、スマホは画面幅/φ。
   上の言葉 = ロゴの高さ/φ⁴、上の間 = 高さ/φ²、下の間 = 高さ/φ³(上下の間がφ:1)、下の一行 = 上の言葉/φ²(13px以上)。 *//* 招待状の紙: 文字のまとまりの中心を紙の黄金分割線(上から38.2%)へ。本文 = 紙の幅/φ⁵、見出し = 本文/φ、間 = 本文/φ *//* スマホ(縦長)は61.8%の線が光る画面の上に来るため、下側38.2%の帯をさらにφで分けた線(61.8%+38.2%×38.2%=76.4%)に中心を置く *//* ===== 鯨: 3行のまとまり(位置と大きさはJSのlayoutLockupが黄金比で決める) ===== *//* FVを整える(本人「ちと大きすぎる気がするので、整えて」): 題の行=画面幅/φ²、ロゴ=題の行/φ²、補足=題/φ²、補足は題の幅に収めて折り返す *//* 追記16(2026-09-25): スマホの招待状も白紙の紙に作り直したため、紙の上の文字をスマホでも出す */#prologue[data-v014]{--opening-copy-height:0px;--opening-copy-space:0px}#prologue #openingFilm{top:0;height:100%}#prologue .opening-copy{background:transparent;inset:4.5vh 4vw auto;padding:0;opacity:var(--copy-opacity,1);transform:none;text-shadow:0 2px 18px #000c;pointer-events:none}#prologue .opening-copy .p-whatto{color:#f5ead4;text-shadow:0 1px 12px #000c}#prologue .opening-shade{background:linear-gradient(180deg,#04152299 0%,transparent 38%,transparent 62%,#041522cc 100%)}@media (max-width:900px){#prologue .opening-copy{inset:5vh 16px auto}}#prologue .opening-logo{width:clamp(200px,22vw,320px);margin:0 auto 18px}@media (max-width:900px){#prologue .opening-logo{width:clamp(170px,46vw,240px);margin-bottom:14px}}@media (max-height:520px){#prologue .opening-logo{width:140px;margin-bottom:8px}}#prologue .opening-words{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:min(92vw,900px);text-align:center;pointer-events:none;opacity:0;transition:opacity .4s ease;z-index:2;color:#fff}#prologue .opening-words.on{opacity:1}#prologue .opening-words p{margin:0}#prologue .ow-kicker{font:600 13px/1.6 system-ui,sans-serif;letter-spacing:.24em;color:#D4B384;text-shadow:0 2px 12px #06101fe6;margin-bottom:10px}#prologue .ow-kicker:empty{display:none}#prologue .ow-line{font:500 clamp(26px,3.3vw,44px)/1.7 system-ui,-apple-system,sans-serif;letter-spacing:.1em;text-shadow:0 2px 10px #06101fe6,0 0 34px #06101fa6}#prologue .ow-big{font:700 clamp(54px,9vw,124px)/1.1 system-ui,-apple-system,sans-serif;letter-spacing:.22em;color:#ffe1a1;text-shadow:0 2px 10px #06101ff2,0 0 40px #06101fb3;margin-top:6px}#prologue .ow-big:empty{display:none}#prologue .opening-words.has-big .ow-line{letter-spacing:.16em}@media (max-width:900px){#prologue .opening-words{top:56%}#prologue .ow-line{font-size:clamp(22px,6vw,30px)}#prologue .ow-big{font-size:clamp(48px,17vw,80px)}}#prologue .opening-words.pos-top{top:20%}@media (max-width:900px){#prologue .opening-words.pos-top{top:24%}}#prologue .ow-logo{display:block;width:min(70vw,620px);height:auto;margin:10px auto 0;filter:drop-shadow(0 4px 18px #06101ff2) drop-shadow(0 0 40px #06101fb3);transform:scale(.94);transition:transform .6s cubic-bezier(.2,.8,.2,1)}#prologue .ow-logo[hidden]{display:none}#prologue .opening-words.on .ow-logo{transform:scale(1)}#prologue .ow-sub{font:500 clamp(15px,1.5vw,21px)/1.7 system-ui,-apple-system,sans-serif;letter-spacing:.08em;color:#f5ead4;text-shadow:0 2px 10px #06101fe6;margin-top:14px}#prologue .ow-sub:empty{display:none}@media (max-width:900px){#prologue .ow-logo{width:min(78vw,340px)}#prologue .ow-sub{font-size:14px;letter-spacing:.04em}}#prologue .opening-words.has-big{top:50%}#prologue .ow-logo{width:min(60vw,540px)}@media (max-width:900px){#prologue .opening-words.has-big{top:52%}#prologue .ow-logo{width:min(76vw,330px)}}#prologue .opening-copy{inset:0;padding:24px clamp(24px,6vw,88px) 96px;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:start;text-align:left;pointer-events:none}#prologue .opening-logo{grid-row:1;width:clamp(164px,15vw,220px);max-width:48vw;margin:0 0 0 -6px;filter:drop-shadow(0 2px 10px #06101fcc)}#prologue .opening-copy h1{grid-row:3;font-family:"Hiragino Mincho ProN","Hiragino Serif","Yu Mincho",serif;font-weight:500;font-size:clamp(26px,4vw,58px);line-height:1.48;letter-spacing:.065em;max-width:1160px;width:82%;text-shadow:0 2px 12px #06101fe6,0 0 34px #06101fa6;margin:0}#prologue .opening-copy h1 span{display:block}#prologue .opening-copy .p-whatto{grid-row:4;font:400 clamp(13px,1.05vw,16px)/1.85 "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.06em;color:#f6f1e6;margin:16px 0 0;text-shadow:0 1px 10px #06101fe6;max-width:38em}#prologue .opening-words{font-family:"Hiragino Mincho ProN","Hiragino Serif","Yu Mincho",serif}#prologue .ow-kicker{font-family:"Hiragino Mincho ProN","Hiragino Serif",serif;font-weight:500;font-size:14px;letter-spacing:.3em;color:#D4B384;margin-bottom:12px}#prologue .ow-line{font-family:"Hiragino Mincho ProN","Hiragino Serif","Yu Mincho",serif;font-weight:500;font-size:clamp(26px,3.3vw,44px);line-height:1.7;letter-spacing:.1em;color:#fff}#prologue .opening-words.pos-top .ow-line{font-weight:600;font-size:clamp(28px,3.4vw,46px);letter-spacing:.18em;color:#C9A96A}#prologue .ow-sub{font:400 clamp(14px,1.2vw,17px)/1.8 "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;letter-spacing:.12em;color:#f6f1e6;margin-top:18px}#prologue .ow-logo{width:min(46vw,480px);margin-top:22px}#prologue .opening-words.has-big .ow-line{letter-spacing:.14em}@media (max-width:900px){#prologue .opening-copy{padding:18px 18px 118px}#prologue .opening-logo{width:164px;margin-left:-4px}#prologue .opening-copy h1{font-size:clamp(24px,7.4vw,30px);width:100%;letter-spacing:.035em;line-height:1.5}#prologue .opening-copy .p-whatto{font-size:13px;margin-top:12px}#prologue .ow-line{font-size:clamp(22px,6vw,28px);letter-spacing:.08em}#prologue .opening-words.pos-top .ow-line{font-size:clamp(24px,6.4vw,30px);letter-spacing:.14em}#prologue .ow-logo{width:min(70vw,300px);margin-top:14px}#prologue .ow-sub{font-size:13px;letter-spacing:.08em;margin-top:12px}}#prologue .opening-copy h1 br{display:none}#prologue .opening-copy{padding-bottom:150px}@media (max-width:900px){#prologue .opening-copy{padding-bottom:205px}}@media (max-height:700px){#prologue .opening-copy{padding-bottom:130px}#prologue .opening-copy h1{font-size:clamp(22px,3.2vw,40px)}}@media (max-height:700px){#prologue .opening-copy{padding-bottom:160px}#prologue .opening-copy .p-whatto{margin-top:8px;font-size:13px}}#prologue .opening-copy{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto;align-items:start;justify-items:start;text-align:left;padding:24px clamp(24px,6vw,88px) 150px;gap:0;inset:0;background:transparent;transform:none}#prologue .opening-logo{grid-row:1;width:180px;max-width:48vw;margin:0 0 0 -8px;filter:none}#prologue .opening-copy h1{grid-row:3;max-width:13em;width:auto;margin:0;font-family:"Hiragino Mincho ProN","Hiragino Serif","Yu Mincho",serif;font-size:clamp(28px,4vw,58px);font-weight:500;line-height:1.45;letter-spacing:.065em;text-shadow:0 2px 24px rgba(3,14,25,.45)}#prologue .opening-copy .p-whatto{grid-row:4;max-width:none;margin:22px 0 0;padding:0;font-family:"Hiragino Sans","Yu Gothic",sans-serif;font-size:14px;font-weight:400;line-height:1.8;letter-spacing:.075em;color:#e2dccf;text-shadow:none;text-wrap:balance}#prologue .opening-controls{bottom:40px;gap:28px;justify-content:center}#prologue .opening-controls button,#prologue .opening-controls a{background:transparent!important;border:0!important;border-radius:0!important;padding:8px 0!important;min-height:44px;font:12px/1.6 "Hiragino Sans",sans-serif!important;letter-spacing:.08em;color:#c1c8cd!important;text-decoration:underline;text-decoration-color:rgba(193,200,205,.5);text-underline-offset:6px;box-shadow:none!important}#prologue .opening-status{display:none}#prologue .opening-chapters{display:none}#prologue .opening-progress{opacity:.35}#prologue .opening-down{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);writing-mode:vertical-rl;font:400 12px/1 "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;letter-spacing:.3em;color:rgba(246,245,243,.75);z-index:3;pointer-events:none}#prologue .opening-words{top:50%;width:min(92vw,1000px)}#prologue .opening-words.has-big{top:50%}#prologue .ow-kicker{font-family:"Hiragino Mincho ProN",serif;font-weight:600;font-size:18px;letter-spacing:.55em;color:#D4B384;margin-bottom:14px;text-shadow:0 2px 12px rgba(6,16,31,.9),0 0 30px rgba(6,16,31,.6)}#prologue .ow-line{font-family:"Hiragino Mincho ProN","Hiragino Serif","Yu Mincho",serif;font-weight:500;font-size:clamp(26px,3.3vw,44px);line-height:1.7;letter-spacing:.1em;color:#f6f5f3;text-shadow:0 2px 10px rgba(6,16,31,.9),0 0 34px rgba(6,16,31,.65)}#prologue .opening-words.has-big .ow-line{letter-spacing:.1em}#prologue .ow-logo{display:none!important}#prologue .ow-sub{font-family:"Hiragino Mincho ProN","Hiragino Serif",serif;font-weight:400;font-size:14px;line-height:1.9;letter-spacing:.06em;color:rgba(246,245,243,.92);margin-top:16px;text-shadow:0 2px 10px rgba(6,16,31,.9)}#prologue .opening-words.pos-top{top:24%}#prologue .opening-words.pos-top .ow-line{font-weight:600;font-size:46px;letter-spacing:.18em;color:#C9A96A}@media (max-width:900px){#prologue .opening-copy{padding:18px 18px 150px}#prologue .opening-logo{width:164px;margin-left:-4px}#prologue .opening-copy h1{font-size:clamp(28px,7.5vw,38px);line-height:1.5;letter-spacing:.035em;max-width:none}#prologue .opening-copy .p-whatto{font-size:12px;margin-top:18px;letter-spacing:.035em}#prologue .opening-controls{bottom:34px;gap:22px}#prologue .ow-line{font-size:26px;letter-spacing:.1em}#prologue .opening-words.pos-top .ow-line{font-size:30px;letter-spacing:.14em}#prologue .ow-sub{font-size:13px}#prologue .opening-down{bottom:64px}}@media (max-height:700px){#prologue .opening-copy{padding-bottom:120px}}#prologue .opening-controls{left:clamp(24px,6vw,88px);right:auto;transform:none;justify-content:flex-start;bottom:44px;padding-inline:0}@media (max-width:900px){#prologue .opening-controls{left:18px;bottom:40px;gap:18px}#prologue .opening-controls button,#prologue .opening-controls a{font-size:12px!important;padding:6px 0!important}#prologue .opening-down{left:auto;right:18px;bottom:110px;transform:none}}#prologue .paper-ink{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;mix-blend-mode:multiply;--pw:400px}#prologue .paper-ink p{margin:0;font-family:"Hiragino Mincho ProN","Hiragino Serif","Yu Mincho",serif;font-weight:600}#prologue .pi-kicker{font-size:calc(var(--pw)*.05);letter-spacing:.55em;text-indent:.55em;color:#8a6f45;margin-bottom:.9em!important}#prologue .pi-line{font-size:calc(var(--pw)*.088);line-height:1.3;letter-spacing:.18em;text-indent:.18em;color:#6b5530}@media (max-width:768px){#prologue .paper-ink{display:none}}#prologue .opening-words.has-logo .ow-logo{display:block!important;width:min(46vw,600px);height:auto;margin:30px auto 0;filter:drop-shadow(0 4px 22px rgba(6,16,31,.85)) drop-shadow(0 0 48px rgba(6,16,31,.55));transform:scale(.94);transition:transform .8s cubic-bezier(.2,.8,.2,1)}#prologue .opening-words.has-logo.on .ow-logo{transform:scale(1)}#prologue .opening-words.has-logo .ow-sub{margin-top:26px;font-size:16px;letter-spacing:.16em}@media (max-width:900px){#prologue .opening-words.has-logo .ow-logo{width:min(78vw,340px);margin-top:20px}#prologue .opening-words.has-logo .ow-sub{font-size:14px;letter-spacing:.1em;margin-top:18px}}@media (max-width:900px){#prologue .opening-copy h1{font-size:clamp(26px,7vw,36px)}#prologue .opening-copy .p-whatto .v19-phrase{white-space:nowrap}}#prologue .opening-copy{transition:opacity .35s ease}#prologue .opening-copy h1{max-width:none;white-space:normal}@media (min-width:901px){#prologue .opening-copy h1 .v19-phrase{white-space:nowrap}#prologue .opening-copy h1>span{white-space:nowrap}}@media (max-width:900px){#prologue .opening-copy h1{font-size:clamp(24px,6.6vw,34px);line-height:1.55}}@media (max-width:380px){#prologue .opening-controls{flex-direction:column;align-items:flex-start;gap:0;bottom:30px}}#prologue .opening-copy h1 .v19-phrase{display:inline-block}@media (max-height:720px) and (min-width:901px){#prologue .opening-words.has-logo .ow-logo{width:min(34vw,420px);margin-top:18px}#prologue .opening-words.has-logo .ow-sub{margin-top:16px}#prologue .opening-words.has-logo{top:46%}}@media (max-width:380px){#prologue .opening-copy h1{font-size:22px;letter-spacing:.02em}#prologue .opening-copy{padding-bottom:128px}#prologue .opening-controls{flex-direction:row;flex-wrap:nowrap;gap:16px;bottom:66px}#prologue .opening-controls button,#prologue .opening-controls a{font-size:11px!important;min-height:36px}}@media (max-width:380px){#prologue .opening-controls{bottom:92px}#prologue .opening-copy{padding-bottom:150px}}@media (max-width:380px){#prologue .opening-controls{bottom:104px}#prologue .opening-copy{padding-bottom:160px}}#prologue .opening-copy{display:block!important;position:absolute;inset:0;padding:0!important}#prologue .opening-logo{position:absolute;left:var(--fv-m,80px);top:var(--fv-m,80px);width:calc(var(--fv-line,810px) / 2.618)!important;max-width:none;height:auto;margin:0!important}#prologue .fv-block{position:absolute;left:var(--fv-m,80px);top:61.8%;transform:translateY(-50%);width:calc(100% - 2 * var(--fv-m,80px))}#prologue .fv-block h1{margin:0!important;max-width:none!important;width:auto!important;line-height:1.382!important;letter-spacing:.065em!important}#prologue .fv-block .p-whatto{margin:calc(var(--fv-s,60px) / 2.618) 0 0!important;font-size:max(12px, calc(var(--fv-s,60px) / 4.236))!important;line-height:1.618!important}#prologue .opening-controls{left:var(--fv-m,80px)!important;bottom:max(28px, calc(var(--fv-m,80px) / 1.618))!important}@media (max-width:900px){#prologue .fv-block .p-whatto{font-size:max(12px, calc(var(--fv-s,26px) / 2.618))!important}}@media (max-width:380px){#prologue .opening-controls{bottom:104px!important}}#prologue .opening-words.has-logo{--lw:min(38.2vw, 61.8vh);--lh:calc(var(--lw) / 1.618);top:0;left:0;width:100%;height:100%;transform:none}#prologue .opening-words.has-logo .ow-logo{position:absolute;left:50%;top:50%;width:var(--lw)!important;height:auto;margin:0!important;transform:translate(-50%,-50%) scale(.94)}#prologue .opening-words.has-logo.on .ow-logo{transform:translate(-50%,-50%) scale(1)}#prologue .opening-words.has-logo .ow-line{position:absolute;left:0;right:0;bottom:calc(50% + var(--lh) / 2 + var(--lh) / 2.618);margin:0;font-size:calc(var(--lh) / 6.854)!important;line-height:1.382}#prologue .opening-words.has-logo .ow-sub{position:absolute;left:0;right:0;top:calc(50% + var(--lh) / 2 + var(--lh) / 4.236);margin:0!important;font-size:max(13px, calc(var(--lh) / 6.854 / 2.618))!important;line-height:1.618}@media (max-width:900px){#prologue .opening-words.has-logo{--lw:61.8vw}}#prologue .paper-ink{display:block}#prologue .pi-block{position:absolute;left:0;right:0;top:38.2%;transform:translateY(-50%);text-align:center}#prologue .pi-line{font-size:calc(var(--pw) / 11.09)!important;line-height:1.382}#prologue .pi-kicker{font-size:calc(var(--pw) / 11.09 / 1.618)!important;margin:0 0 calc(var(--pw) / 11.09 / 1.618)!important}@media (max-width:768px){#prologue .paper-ink{display:none}}@media (max-width:900px) and (orientation:portrait){#prologue .fv-block{top:76.4%}#prologue .fv-block h1{text-shadow:0 2px 14px rgba(3,14,25,.85),0 0 32px rgba(3,14,25,.6)}#prologue .fv-block .p-whatto{text-shadow:0 1px 10px rgba(3,14,25,.9)}}#prologue .opening-words.has-logo .ow-line,#prologue .opening-words.has-logo .ow-kicker,#prologue .opening-words.has-logo .ow-big{display:none!important}#prologue .opening-words.has-logo .ow-logo{position:absolute!important;transform:scale(.96)!important;transform-origin:50% 50%;margin:0!important;max-width:none!important}#prologue .opening-words.has-logo.on .ow-logo{transform:scale(1)!important}#prologue .opening-words.has-logo .ow-sub{position:absolute!important;right:auto!important;bottom:auto!important;margin:0!important;line-height:1!important;letter-spacing:0!important;text-align:justify;text-align-last:justify;white-space:nowrap;font-family:"Hiragino Mincho ProN","Hiragino Serif","Yu Mincho",serif!important;font-weight:400;color:rgba(246,245,243,.94)}@media (min-width:901px){#prologue .fv-block{width:auto;max-width:none}#prologue .fv-block .p-whatto{font-size:max(12px, calc(var(--fv-s,40px) / 2.618))!important;max-width:var(--fv-line,550px)}}@media (max-width:768px){#prologue .paper-ink{display:block}}