/* 大勢龍蒔 公式サイト 自前 CSS(外部への要求 0)。
   夜(深い藍+金): ヒーロー・「窓」・フッターだけ。文章の欄は明るい和紙の地(#f7f3ea)に濃い藍の文字(#1b2440)。
   純黒・純白なし、アクセントは金 1 色(夜は #d4b26a、昼は文字 #8a6520・線 #c9a24e) */

@font-face{font-family:"Zen Kaku Gothic New";font-weight:400;font-display:swap;src:url(../assets/fonts/zenkakugothic-400.woff2)}
@font-face{font-family:"Zen Kaku Gothic New";font-weight:500;font-display:swap;src:url(../assets/fonts/zenkakugothic-500.woff2)}
@font-face{font-family:"Shippori Mincho";font-weight:600;font-display:swap;src:url(../assets/fonts/shippori-600.woff2)}
@font-face{font-family:"Cinzel";font-weight:500 600;font-display:swap;src:url(../assets/fonts/cinzel.woff2)}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(../assets/fonts/cormorant-italic.woff2)}
@font-face{font-family:"Noto Sans SC";font-weight:400;font-display:swap;src:url(../assets/fonts/notosanssc-400.woff2)}
@font-face{font-family:"Noto Serif SC";font-weight:600;font-display:swap;src:url(../assets/fonts/notoserifsc-600.woff2)}
@font-face{font-family:"NotoSC Greet";font-weight:500;font-display:swap;src:url(../assets/fonts/notoserifsc-greet.woff2)}

:root{
/* 夜 */
--ink-0:#050a1a;--ink-1:#0a1430;--ink-2:#111d3f;
--paper:#f5f1e8;--paper-2:rgba(245,241,232,.8);
--gold:#d4b26a;--gold-hi:#f3d995;--line:rgba(212,178,106,.35);
--scrim:5,10,26;
/* 昼(文章の欄) */
--washi:#f7f3ea;--washi-rgb:247,243,234;--card:#fffdf8;
--ink:#1b2440;--ink-rgb:27,36,64;--ink-s:#4a5068;
--gold-ink:#8a6520;--gold-line:#c9a24e;--hair:rgba(201,162,78,.5);--hair-s:rgba(201,162,78,.32);
--sh-card:0 1px 2px rgba(27,36,64,.06),0 16px 36px -16px rgba(27,36,64,.2);
--fade:240px;
--ramp:#f7f3ea00 0%,#f7f3ea08 8%,#f7f3ea1a 16%,#f7f3ea38 26%,#f7f3ea66 38%,#f7f3ea9e 50%,#f7f3eacc 62%,#f7f3eaed 76%,#f7f3eafc 90%,#f7f3ea;
--ease:cubic-bezier(.19,1,.22,1);--t:.3s var(--ease);
--hdr:72px;--gut:clamp(20px,5vw,64px);--pad:clamp(20px,2.4vw,32px);
--f-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
--f-min:"Shippori Mincho","游明朝","Yu Mincho","Hiragino Mincho ProN",serif;
--f-cap:"Cinzel","Zen Kaku Gothic New",sans-serif;
--f-it:"Cormorant Garamond","Shippori Mincho",serif;
}
html[lang^="zh"]{--f-body:"Noto Sans SC","Zen Kaku Gothic New","PingFang SC","Microsoft YaHei",sans-serif;--f-min:"Noto Serif SC","Shippori Mincho","Songti SC","SimSun",serif;--f-cap:"Cinzel","Noto Sans SC","Zen Kaku Gothic New",sans-serif;--f-it:"Cormorant Garamond","Noto Serif SC","Shippori Mincho",serif}   /* 英字の書体の後ろも簡体字の書体に(和文の書体に無い字 务・与・许 などが別の書体で出ないように) */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink-0);color:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;font:400 17px/1.85 var(--f-body);letter-spacing:.06em;background:transparent;overflow-wrap:anywhere;word-break:normal;line-break:strict;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
html[lang="en"] body,html[lang="ms"] body{line-height:1.8;letter-spacing:.03em;overflow-wrap:break-word}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(1.2px 1.2px at 40px 60px,rgba(245,241,232,.7) 50%,transparent 52%),radial-gradient(1.4px 1.4px at 310px 40px,rgba(243,217,149,.6) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 260px 330px,rgba(245,241,232,.6) 50%,transparent 52%),radial-gradient(120% 90% at 70% 10%,rgba(36,55,107,.55),transparent 62%),linear-gradient(180deg,var(--ink-0),var(--ink-2) 130%);
background-size:400px 400px,400px 400px,400px 400px,100% 100%,100% 100%}
p,li,address{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
:is(h2,h3,.lrow__d,.facts dd):lang(ja),:is(h2,h3,.lrow__d,.facts dd):lang(zh){word-break:auto-phrase}
.btn:lang(ja){word-break:keep-all}   /* ボタンは文字の途中で折らない(折る所は文言の中の空白と幅 0 の空白) */   /* 短い文は文節で折り返す(「ビジネ/ス」「開/く」のような切れ方をしない) */
.btn > span{text-wrap:balance}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus,var(--gold-ink));outline-offset:4px}
.hero,.win,.ftr{--focus:var(--gold-hi)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 18px;background:var(--gold);color:var(--ink-0);font-size:14px;transition:top var(--t)}
.skip:focus{top:12px}
.ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;flex:none}
.ln{white-space:pre-line}
.f-sc{font-family:"NotoSC Greet",serif;font-style:normal}

/* 3D の描画面: ヒーローの間はページの一部(ページと一緒にブラウザがスクロールする。高さは JS で ヒーロー + ぼかし帯)。
   ヒーローを抜けたら画面に固定(夜空の窓)。切り替えはプロフィールの不透明な和紙に隠れている間に行う(main.js) */
.bg3d{position:absolute;top:0;left:0;z-index:0;width:100%;height:100vh;height:100lvh;display:block;opacity:0;pointer-events:none}
.bg3d.is-fixed{position:fixed}
.bg3d.is-on{opacity:1}
.no3d .bg3d{display:none}
main{position:relative;z-index:1}

/* ---------- ヘッダー: 夜(ヒーロー・窓・フッター)は藍、明るい欄の上では和紙色に切り替わる ---------- */
.hdr{--h-fg:var(--paper);--h-fg2:var(--paper-2);--h-acc:var(--gold);--h-acc-hi:var(--gold-hi);--h-bar:rgba(var(--scrim),.96);--h-bd:var(--line);--h-chip:rgba(var(--scrim),.5);--h-tint:rgba(201,162,78,.2);--focus:var(--h-acc-hi);
position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:20px;padding:0 clamp(20px,4vw,56px);color:var(--h-fg)}
.hdr.is-light:not(.is-open){--h-fg:var(--ink);--h-fg2:var(--ink-s);--h-acc:var(--gold-ink);--h-acc-hi:var(--gold-ink);--h-bar:rgba(var(--washi-rgb),.985);--h-bd:rgba(201,162,78,.5);--h-chip:rgba(255,253,248,.7);--h-tint:var(--card)}
.hdr::before{content:"";position:absolute;inset:0;z-index:0;background:var(--h-bar);border-bottom:1px solid var(--h-bd);opacity:0;transition:opacity .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
.hdr::after{content:"";position:absolute;inset:0 0 -36px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--scrim),.8),rgba(var(--scrim),.74) 45%,rgba(var(--scrim),0));transition:opacity .5s var(--ease)}
.hdr.is-solid::before{opacity:1}
.hdr.is-solid::after{opacity:0}
html:not(.js) .hdr::before{opacity:1}
html:not(.js) .hdr::after{opacity:0}
.hdr__logo{position:relative;z-index:2;font:500 20px/1 var(--f-cap);letter-spacing:.32em;white-space:nowrap;margin-right:auto;padding:12px 0}
.gnav{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(16px,2vw,36px)}
.gnav__list{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.8vw,32px)}
.gnav__list a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;font:500 14px/1.3 var(--f-body);letter-spacing:.12em;white-space:nowrap;transition:color var(--t)}
.gnav__list small{font:500 12px/1 var(--f-cap);letter-spacing:.2em;color:var(--h-acc);transition:color var(--t)}
html[lang="en"] .gnav__list small{display:none}
.gnav__list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--h-acc);transform:scaleX(0);transition:transform var(--t)}
.gnav__list a:hover::after,.gnav__list a[aria-current="true"]::after{transform:scaleX(1)}
.gnav__list a:hover,.gnav__list a[aria-current="true"]{color:var(--h-acc-hi)}
.gnav__contact a{padding:8px 18px;border:1px solid var(--h-acc);transition:background var(--t),color var(--t),border-color var(--t)}
.gnav__contact a::after{display:none}
.gnav__contact a:hover,.gnav__contact a[aria-current="true"]{background:var(--h-tint)}
.lang{display:flex;gap:2px;padding-left:clamp(12px,1.6vw,24px);border-left:1px solid var(--h-bd)}
.lang button{min-width:34px;height:34px;padding:0 6px;font:500 13px/1 var(--f-cap);letter-spacing:.14em;color:var(--h-fg2);transition:color var(--t)}
.lang button:hover{color:var(--h-fg)}
.lang button[aria-pressed="true"]{color:var(--h-acc-hi);box-shadow:inset 0 -1px 0 var(--h-acc)}
.hdr__contact-sp{display:none}
.hdr__contact-sp svg{display:none;width:20px;height:14px;fill:none;stroke:currentColor}
.menu-btn{display:none}

@media (max-width:1180px){
.hdr{gap:12px}
.hdr__logo{font-size:18px;letter-spacing:.24em}
.hdr__contact-sp{position:relative;z-index:2;display:inline-flex;align-items:center;height:44px;padding:0 16px;border:1px solid var(--h-acc);font:500 14px/1 var(--f-body);letter-spacing:.08em;white-space:nowrap;color:var(--h-acc-hi);background:var(--h-chip);transition:color var(--t),border-color var(--t),background-color var(--t)}
.menu-btn{position:relative;z-index:2;display:block;flex:none;width:44px;height:44px;margin-right:-9px}   /* 3 本線(太さ 2px・幅 26px)。押せる範囲は 44×44px */
.menu-btn span{position:absolute;left:9px;right:9px;height:2px;border-radius:1px;background:var(--h-fg);transition:transform .5s var(--ease),top .5s var(--ease),opacity .3s var(--ease),background-color .5s var(--ease)}
.menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:28px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media (max-width:430px){.hdr{gap:8px}.hdr__logo{letter-spacing:.18em}.hdr__contact-sp{padding:0 12px}}   /* マレー語の「Hubungi Kami」でもメニューの 3 本線が画面の端で切れない */
.js .gnav{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:stretch;justify-content:center;gap:28px;padding:88px var(--gut) 32px;background:var(--ink-0);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s;overflow-y:auto}
.js .gnav.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.js .gnav__list{flex-direction:column;align-items:stretch;gap:0}
.js .gnav__list a{flex-direction:row;justify-content:space-between;align-items:baseline;padding:15px 4px;font-size:22px;letter-spacing:.14em;border-bottom:1px solid var(--h-bd)}
.js .gnav__list a::after{display:none}
.js .gnav__contact a{padding:15px 4px;border:0;border-bottom:1px solid var(--h-bd)}
.js .gnav__contact a[aria-current="true"],.gnav__contact a:hover{background:none}
.js .gnav__list a[aria-current="true"]{color:var(--h-acc-hi);box-shadow:inset 3px 0 0 var(--h-acc);padding-left:16px}
html[lang="en"] .gnav__list small{display:block}
.js .lang{padding:0;border:0;justify-content:center;gap:10px}
.js .lang button{min-width:56px;height:48px;font-size:15px}
}
html:not(.js) .menu-btn,html:not(.js) .lang{display:none}
html:not(.js) .hdr{height:auto;flex-wrap:wrap}
@media (max-width:380px){
.hdr__contact-sp{width:44px;padding:0;justify-content:center}
.hdr__contact-sp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hdr__contact-sp svg{display:block}
}

/* ---------- ヒーロー ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;--hh:max(100svh,620px)}
/* ヒーローの静止画。既定(JS 無し・3D が使えない)は龍入りの絵。3D を待つ間は、head のスクリプトが画面の形に合う 1 枚を data-poster で選ぶ
   (3D と同じ構図。縦長は高さで合わせて頭の位置 = 横 63%、横長 1〜1.6 は幅で合わせて下揃え、1.6 以上は高さで合わせて本人の中心 = 横 68.6%) */
.hero__kv{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:var(--ink-0) url(../assets/img/poster-dragon-pc.webp) 50% 50%/cover no-repeat;transition:opacity 1.2s var(--ease)}
@media (max-aspect-ratio:1/1){.hero__kv{background-image:url(../assets/img/poster-dragon-sp.webp)}}
html[data-poster^="p"] .hero__kv{background-position:63% 100%}
html[data-poster^="l"] .hero__kv{background-position:50% 100%}
html[data-poster^="w"] .hero__kv{background-position:68.6% 100%}
html[data-poster="p047"] .hero__kv{background-image:url(../assets/img/poster-p047.webp)}
html[data-poster="p060"] .hero__kv{background-image:url(../assets/img/poster-p060.webp)}
html[data-poster="p075"] .hero__kv{background-image:url(../assets/img/poster-p075.webp)}
html[data-poster="p097"] .hero__kv{background-image:url(../assets/img/poster-p097.webp)}
html[data-poster="l100"] .hero__kv{background-image:url(../assets/img/poster-l100.webp)}
html[data-poster="l120"] .hero__kv{background-image:url(../assets/img/poster-l120.webp)}
html[data-poster="l140"] .hero__kv{background-image:url(../assets/img/poster-l140.webp)}
html[data-poster="w178"] .hero__kv{background-image:url(../assets/img/poster-w178.webp)}
html[data-poster="w210"] .hero__kv{background-image:url(../assets/img/poster-w210.webp)}
html[data-poster="w250"] .hero__kv{background-image:url(../assets/img/poster-w250.webp)}
html[data-poster="w300"] .hero__kv{background-image:url(../assets/img/poster-w300.webp)}
html.no3d .hero__kv{background-image:url(../assets/img/poster-dragon-pc.webp);background-position:50% 50%}
@media (max-aspect-ratio:1/1){html.no3d .hero__kv{background-image:url(../assets/img/poster-dragon-sp.webp)}}
.has3d .hero__kv{opacity:0}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--scrim),.62) 0,rgba(var(--scrim),.3) 36%,rgba(var(--scrim),0) 60%)}
.hero__shade{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%)}   /* 下端で切れて線にならないよう、下へ向かって消す(下の月の文字は自前のぼかしで読める) */
/* 組みの切り替えは 3D(world.js の computeLayout)と同じ「ヒーローの横 ÷ 高さ < 1 なら縦長」。ヒーローの高さは max(100svh,620px)(幅 760px 以下は 600px)。
   既定 = 横長(左に文字・右に本人)。縦長は下の @media (max-aspect-ratio:999/1000),(max-width:599.98px)。幅の区切りはヒーローには使わない */
.hero__text{position:absolute;left:6%;width:max(36%,300px);top:min(50%,calc(50svh + var(--hdr) / 2));transform:translateY(-52%);display:flex;align-items:flex-start;gap:clamp(20px,2.4vw,36px)}   /* 低い窓(横向きのスマホ)では見えている画面の真ん中に寄せる */
.hero__name{flex:none;writing-mode:vertical-rl;font:600 clamp(40px,4.8vw,72px)/1.2 var(--f-min);letter-spacing:.3em;color:var(--paper);text-shadow:0 0 28px rgba(var(--scrim),.7),0 0 4px rgba(var(--scrim),.5)}
.hero__name ruby{ruby-position:over}
.hero__name ruby+ruby{margin-block-start:.45em}
.hero__name rt,.pf__name rt{font:500 13px/1 var(--f-body);letter-spacing:.2em;color:var(--gold-hi);text-shadow:none}
.hero__body{padding-top:6px;min-width:0}
.hero__body::before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-bottom:22px}
.hero__en{font:500 clamp(14px,1vw + 6px,20px)/1.4 var(--f-cap);letter-spacing:.32em;color:var(--gold-hi);white-space:nowrap}   /* RYUMA DAISE は 1 行 */
.hero__tag{margin-top:18px;max-width:7.4em;font:italic 500 clamp(30px,3.9vw,56px)/1.1 var(--f-it);letter-spacing:.01em;font-feature-settings:"liga" 0;text-wrap:balance;text-shadow:0 0 24px rgba(var(--scrim),.7)}   /* 横長はどの幅でも 2 行(文字の列の幅が変わると龍の通り道と大きさが変わるため)*/
.hero__sub{margin-top:26px;font:500 clamp(13px,.9vw + 7px,16px)/1.8 var(--f-body);letter-spacing:.14em;color:var(--paper)}
.hero__sub:lang(ja),.hero__sub:lang(zh){word-break:auto-phrase}   /* 副題は語の途中で折らない */
@media (min-aspect-ratio:1/1) and (max-height:500px){.hero__text{left:4%;gap:14px}.hero__sub{letter-spacing:.06em}}   /* 横向きのスマホ: 文字を左へ寄せ、一番長い行(副題)を詰めて、文字と本人の間(龍の通り道)を広げる */
.hero__en,.hero__sub{text-shadow:0 0 14px rgba(var(--scrim),.9),0 0 3px rgba(var(--scrim),.7)}
.hero__name,.hero__body>*{animation:rise 1.1s var(--ease) both}
.hero__en{animation-delay:.08s}.hero__tag{animation-delay:.16s}.hero__sub{animation-delay:.24s}

/* 今宵の月(月齢・満ち欠けの名前・輝き・次の満月)。横長: 左下に 1 行で、雲の上に小さく柔らかい影を敷いて読める(影は文字のすぐ外までで止める) */
.hero__moon{isolation:isolate;position:absolute;left:6%;bottom:clamp(24px,4.5vh,44px);max-width:min(660px,calc(100% - 6% - 90px));padding:5px 16px;font-size:13px;line-height:1.6;border:1px solid rgba(210,176,114,.28);border-radius:999px;background:rgba(var(--scrim),.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rise 1.1s var(--ease) .3s both;text-shadow:0 0 10px rgba(var(--scrim),.9),0 0 2px rgba(var(--scrim),.8)}
.moon__label{display:inline-flex;vertical-align:middle;align-items:center;gap:8px;margin-right:.9em;font:500 13px/1.6 var(--f-body);letter-spacing:.16em;color:var(--gold-hi)}
.moon__icon{width:18px;height:18px;flex:none}
.moon__line{display:inline;font-size:13px;line-height:1.6;letter-spacing:.05em;color:var(--paper);text-shadow:0 0 14px rgba(var(--scrim),.85)}
.moon__p{white-space:nowrap}
html[lang="en"] .moon__p,html[lang="ms"] .moon__p{white-space:normal}   /* 英語・マレー語は項目が長いので項目の中でも折る */
html[lang="en"] .hero__moon,html[lang="ms"] .hero__moon{max-width:min(900px,calc(100% - 6% - 90px))}
.moon__line b{font-weight:400;color:var(--paper-2);padding:0 0 0 .45em}
.hero__scroll{position:absolute;right:clamp(20px,3vw,44px);bottom:clamp(84px,11vh,104px);display:flex;flex-direction:column;align-items:center;gap:14px;font:500 12px/1 var(--f-cap);letter-spacing:.3em;color:var(--paper);writing-mode:vertical-rl;transition:color var(--t);isolation:isolate}
.hero__scroll:hover{color:var(--gold-hi)}
.hero__scroll::before{content:"";position:absolute;inset:-14px -11px;z-index:-1;border-radius:18px;background:rgba(var(--scrim),.66);-webkit-filter:blur(5px);filter:blur(5px)}   /* 雲の上でも 12px の SCROLL が 4.5:1 で読める小さな影 */
.hero__scroll i{display:block;width:1px;height:56px;background:linear-gradient(180deg,var(--gold),transparent);transform-origin:top;animation:cue 2.6s var(--ease) 3}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.loader{position:absolute;left:50%;top:50%;z-index:3;width:120px;height:120px;margin:-60px 0 0 -60px;display:grid;place-items:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease),visibility 0s 1.2s}
.is-loading .loader{visibility:visible;opacity:1;transition:opacity .6s var(--ease) .25s}
.loader svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.loader circle{fill:none;stroke-width:1.1}
.loader__track{stroke:rgba(212,178,106,.16)}
.loader__ring{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 94);transition:stroke-dashoffset .6s var(--ease)}
.loader__pct{font:500 15px/1 var(--f-cap);letter-spacing:.14em;color:var(--gold-hi);padding-left:.14em}
.loader__pct::after{content:"%";margin-left:2px;font-size:12px}

@media (max-width:760px){.hero{min-height:600px;--hh:max(100svh,600px)}}
@media (max-aspect-ratio:999/1000),(max-width:599.98px){   /* 縦長の組み(上に縦書きの名前と英字・副題、下に本人)。本人の頭はヒーローの高さの約 40% から始まるので、文字の箱の下端は 36% 以内 */
.hero{--tt:max(calc(.08 * var(--hh)),calc(var(--hdr) + 8px));--nm:min(clamp(30px,10.5vw,76px),calc((.36 * var(--hh) - var(--tt)) / 4.95))}   /* 名前の大きさ: 幅に比例(iPad では一回り大きく)、ただし 4 字が高さの 36% に収まる大きさまで */
.hero__shade{background:linear-gradient(180deg,rgba(var(--scrim),.6) 0,rgba(var(--scrim),.2) 34%,rgba(var(--scrim),0) 50%)}
.hero__text{left:var(--gut);right:var(--gut);width:auto;top:var(--tt);transform:none;gap:clamp(14px,3vw,30px)}
.hero__name{font-size:var(--nm);letter-spacing:.2em}
.hero__name rt{font-size:12px}
.hero__body{padding-top:2px}
.hero__body::before{margin-bottom:14px;width:34px}
.hero__en{font-size:clamp(16px,2.9vw,28px);letter-spacing:.26em}
.hero__tag{margin-top:12px;max-width:none;font-size:clamp(26px,8.4vw,72px);text-shadow:0 0 18px rgba(var(--scrim),.95),0 0 4px rgba(var(--scrim),.8)}
.hero__sub{margin-top:14px;font-size:clamp(14px,3.1vw,24px);letter-spacing:.12em}
/* 今宵の月: 下の端に小さな札(高さは画面の 9% 以内)。右の端は一時停止ボタンの分をあける */
.hero__moon,html[lang] .hero__moon{left:var(--gut);right:auto;bottom:14px;font-size:12px;line-height:1.4;max-width:min(calc(100% - var(--gut) - 52px),720px);padding:5px 10px;border-radius:12px;background:rgba(var(--scrim),.7)}
.moon__label{font-size:12px;margin-right:.7em;gap:6px}
.moon__icon{width:16px;height:16px}
.moon__line{font-size:clamp(12px,1.7vw,14px);line-height:1.4;letter-spacing:0}
.moon__line b{padding:0 0 0 .3em}
/* SCROLL: 左の端に小さく縦に(本人の袖に重ねない。延暦寺と同じ)。月の札の上 */
@media (max-height:700px){.hero__moon,html[lang] .hero__moon{padding:3px 10px;line-height:1.3}.moon__line,.moon__label{line-height:1.3}}   /* 低い画面(360×640 など)で英語・マレー語の 3 行が画面の 9% を超えないように */
.hero__scroll{right:auto;left:calc(var(--gut) - 6px);bottom:96px;gap:10px}
.hero__scroll i{height:40px}
.loader{top:54%}
}

/* ---------- 文章の欄: 明るい和紙の地。上下の端は夜(ヒーロー・窓)へ霞のようにぼかす ---------- */
.sec{--b0:0px;--b1:0px;position:relative;isolation:isolate;padding:130px 0;color:var(--ink);
background:
linear-gradient(180deg,var(--ramp)) 0 0/100% var(--b0) no-repeat,
linear-gradient(0deg,var(--ramp)) 0 100%/100% var(--b1) no-repeat,
linear-gradient(var(--washi),var(--washi)) 0 var(--b0)/100% calc(100% - var(--b0) - var(--b1)) no-repeat}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../assets/img/washi.webp) 0 0/320px 320px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--b0),#000 calc(100% - var(--b1)),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 var(--b0),#000 calc(100% - var(--b1)),transparent)}
.edge-t{--b0:var(--fade);padding-top:calc(var(--fade) + 48px);scroll-margin-top:-92px}
.edge-b{--b1:var(--fade);padding-bottom:calc(var(--fade) + 32px)}
.edge-f{padding-bottom:150px}
.wrap{width:min(1200px,100% - 2 * var(--gut));margin-inline:auto}
.sec__head{display:flex;align-items:center;gap:24px;margin-bottom:56px}
.sec--profile{padding-top:140px;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh + 2 * var(--fade) + 128px);min-height:calc(100lvh + 2 * var(--fade) + 128px)}   /* 不透明な部分を画面 1 枚より高くする(3D の描画面の切り替えを必ず隠す) */.sec--profile .sec__head{margin-bottom:32px}
.sec__no{flex:none;padding-right:24px;border-right:1px solid var(--hair);font:500 clamp(48px,5vw,68px)/1 var(--f-cap);letter-spacing:.02em;color:var(--gold-ink)}
.sec__label,.lbl{font:500 13px/1.4 var(--f-cap);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink)}
.lbl{font-size:12px;letter-spacing:.22em}
h2{margin-top:6px;font:600 32px/1.4 var(--f-min);letter-spacing:.14em}
h3{font:600 24px/1.5 var(--f-min);letter-spacing:.1em}
html[lang="en"] :is(h2,h3),html[lang="ms"] :is(h2,h3){letter-spacing:.05em}
.card{padding:var(--pad);border:1px solid var(--hair);background:var(--card);box-shadow:var(--sh-card)}
.js-ready [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js-ready [data-reveal].is-in{opacity:1;transform:none}
.ytlink{display:inline-flex;align-items:center;font:500 14px/1.6 var(--f-body);letter-spacing:.12em;color:var(--gold-ink);padding:8px 0;border-bottom:1px solid var(--hair);transition:border-color var(--t),color var(--t)}
.ytlink .ico{margin-left:8px;transition:transform var(--t)}
a:hover>.ytlink,.ytlink:hover{border-color:var(--gold-ink)}
a:hover>.ytlink .ico,.ytlink:hover .ico{transform:translate(2px,-2px)}

/* 写真: 金の細い枠+和紙色の余白+柔らかい影(暗い地に馴染ませる処理は夜の地用だったので外した) */
.frame{position:relative;padding:8px;border:1px solid var(--hair);background:var(--card);box-shadow:var(--sh-card)}
.frame__in{position:relative;display:block;overflow:hidden}
.frame__in img{display:block;width:100%;height:auto;transform:translate3d(0,var(--py,0px),0) scale(1.06);filter:sepia(.06) saturate(.94)}
.frame__in::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.12)}

/* 01 プロフィール */
.pf{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);grid-template-areas:"photo who" "photo more";grid-template-rows:auto 1fr;column-gap:clamp(36px,6vw,88px);row-gap:24px;align-items:start}
.pf__who{grid-area:who}.pf__photo{grid-area:photo}.pf__more{grid-area:more}
.pf__photo{position:relative;isolation:isolate}
.pf__photo::before{content:"";position:absolute;inset:16px -16px -16px 16px;z-index:-1;border:1px solid var(--hair)}
.pf__photo .frame__in{aspect-ratio:2/3}
.pf__photo img{height:100%;object-fit:cover;object-position:50% 0}
.pf__role{display:flex;align-items:center;gap:14px;font:500 15px/1.4 var(--f-body);letter-spacing:.22em;color:var(--gold-ink)}
.pf__role::before{content:"";width:40px;height:1px;background:var(--gold-line)}
.pf__name{margin-top:14px;font:600 clamp(40px,4vw,52px)/1.5 var(--f-min);letter-spacing:.16em}
.pf__name ruby{ruby-position:over}
.pf__name rt{font:500 13px/1 var(--f-body);letter-spacing:.2em;color:var(--gold-ink)}
.pf__en{font:italic 500 clamp(28px,2.6vw,36px)/1.2 var(--f-it);color:var(--ink-s)}
.pf__tag{margin-top:6px;font-size:15px;line-height:1.7;letter-spacing:.14em;color:var(--ink-s)}
.pf__intro{line-height:1.95;max-width:40em}
.facts{margin-top:22px;border-bottom:1px solid var(--hair-s)}
.facts>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:baseline;padding:8px 0;border-top:1px solid var(--hair-s)}
.facts dt{font:500 13px/1.7 var(--f-body);letter-spacing:.12em;color:var(--gold-ink)}
.facts dd{line-height:1.7;text-wrap:balance}
.facts a{border-bottom:1px solid var(--hair);transition:color var(--t),border-color var(--t)}
.facts a:hover{color:var(--gold-ink);border-color:var(--gold-ink)}

/* 02 経歴 */
.chaps{--cg:48px}
.chap{display:grid;grid-template-columns:88px 28px minmax(0,1fr);column-gap:16px;padding-bottom:var(--cg);position:relative}
.chap--last{padding-bottom:0}
.chap__num{justify-self:end;text-align:right;font-family:var(--f-cap);color:var(--gold-ink);line-height:1;padding-top:6px}
.chap__num b{display:block;font-size:44px;font-weight:500;letter-spacing:.04em}
.chap__num span{display:block;margin-top:8px;font-size:13px;letter-spacing:.16em;color:var(--ink-s)}
.chap__rail{position:relative}
.chap__rail::before,.chap__rail::after{content:"";position:absolute;left:50%;top:24px;bottom:calc(var(--cg) * -1);width:1px;margin-left:-.5px}
.chap__rail::before{background:var(--hair)}
.chap__rail::after{background:linear-gradient(180deg,#d4b26a,var(--gold-ink));transform:scaleY(var(--prog,0));transform-origin:top;box-shadow:0 0 6px rgba(201,162,78,.45)}
.chap--last .chap__rail::before{bottom:auto;height:96px;background:linear-gradient(180deg,var(--hair),transparent)}
.chap--last .chap__rail::after{display:none}
.chap__node{position:absolute;left:50%;top:14px;width:9px;height:9px;margin-left:-4.5px;background:var(--gold-line);transform:rotate(45deg);box-shadow:0 0 0 5px var(--washi),0 0 0 6px var(--hair);z-index:1}
.chap__card{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--pad);align-items:center}
.chap--nophoto .chap__card{grid-template-columns:minmax(0,1fr)}
.chap__en{font:500 12px/1 var(--f-cap);letter-spacing:.28em;color:var(--gold-ink)}
.chap__body h3{margin:10px 0 14px}
.chap__body .ln{max-width:40em}
.chap__fig .frame__in{aspect-ratio:1}
.chap__fig img{height:100%;object-fit:cover}

/* 03 活動 */
.works{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px)}
.work{display:flex;flex-direction:column;gap:20px}
.work--main{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--pad);align-items:center}
.work__meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.work__cap{font-size:15px;line-height:1.8;color:var(--ink-s)}
.work .ytlink{margin-top:10px}
.video{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--hair);background:var(--ink-1)}
.video__btn{position:absolute;inset:0;display:block;cursor:pointer}
.video__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:filter var(--t),transform 1.1s var(--ease)}
.video__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--scrim),0) 45%,rgba(var(--scrim),.38))}
.video__btn:hover img{filter:saturate(1.04) brightness(1.03);transform:scale(1.025)}
.video__play{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;background:rgba(var(--scrim),.62);transition:transform var(--t),background var(--t),box-shadow var(--t)}
.video__play svg{width:30px;height:30px;fill:var(--gold-hi);transition:fill var(--t)}
.video__btn:hover .video__play,.video__btn:focus-visible .video__play{transform:scale(1.08);background:var(--gold);box-shadow:0 0 36px rgba(201,162,78,.45)}
.video__btn:hover .video__play svg,.video__btn:focus-visible .video__play svg{fill:var(--ink-0)}
.video__btn:focus-visible{outline-color:var(--gold-hi);outline-offset:-4px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 04 言葉 */
.langs{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:start}
.langs__globe{position:sticky;top:calc(var(--hdr) + 24px)}
.globe{display:block;width:100%;max-width:340px;height:auto;aspect-ratio:1;margin-inline:auto}
.greet{display:none;justify-items:center;text-align:center;margin-top:8px;min-height:96px}
.js .greet{display:grid}
.greet__w{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease);font:italic 500 44px/1.15 var(--f-it);letter-spacing:.02em;color:var(--ink)}
.greet__w small{font:italic 500 16px/1.4 var(--f-it);letter-spacing:.14em;color:var(--gold-ink)}
.greet__w[lang="ja"]{font:600 36px/1.3 var(--f-min);letter-spacing:.2em;font-style:normal}
.greet__w .f-sc{font-size:36px;font-weight:500;letter-spacing:.2em}
.greet__w.is-on{opacity:1;transform:none}
.lrows{display:grid;gap:clamp(12px,1.4vw,16px)}
.lrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 28px;align-items:baseline;transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.lrow__top,.bar{grid-column:1/-1}
.lrow.is-on{border-color:var(--gold-line);background:#fffaee;box-shadow:var(--sh-card),0 0 0 1px rgba(201,162,78,.28)}
.lrow__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline}
.lrow__name{font:500 19px/1.6 var(--f-body);letter-spacing:.08em;transition:color var(--t)}
.lrow.is-on .lrow__name{color:var(--gold-ink)}
.lrow__pct{font:500 22px/1 var(--f-cap);letter-spacing:.08em;color:var(--gold-ink)}
.lrow__lv{grid-column:1/-1;font-size:14px;line-height:1.7;color:var(--ink-s)}
.bar{height:3px;margin:10px 0 12px;background:rgba(var(--ink-rgb),.1);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-ink),var(--gold-line));transform-origin:left;transform:scaleX(var(--v,0));transition:transform 1.1s var(--ease) .15s}
.js-ready .lrow:not(.is-in) .bar i{transform:scaleX(0)}
.lrow__greet{font:italic 500 24px/1.4 var(--f-it);letter-spacing:.03em;color:var(--gold-ink)}
.lrow__greet em{font-style:italic}
.lrow__greet span{font-style:normal;font-size:20px}
.lrow__d{line-height:1.8;text-align:right}
.l-close{max-width:44em;margin-top:48px;padding-left:24px;border-left:2px solid var(--gold-line);font:500 clamp(17px,1.5vw,19px)/2 var(--f-body);letter-spacing:.08em}

/* 05 ブログ / 06 お問い合わせ */
.blogcard{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--pad);align-items:center;transition:border-color var(--t),box-shadow var(--t)}
.blogcard:hover{border-color:var(--gold-ink);box-shadow:var(--sh-card),0 0 0 1px rgba(138,101,32,.25)}
.blogcard__img img{filter:saturate(.7)}
.blogcard__txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.blogcard__title,.contact__name{font:600 24px/1.5 var(--f-min);letter-spacing:.1em}
.blogcard__url{font:500 14px/1.6 var(--f-cap);letter-spacing:.1em;color:var(--ink-s)}
.blogcard .ytlink{margin-top:10px}
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--pad) 56px;align-items:center}
.contact__who{display:flex;flex-direction:column;gap:6px}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 24px;border:1px solid var(--gold-ink);color:var(--gold-ink);font:500 15px/1.5 var(--f-body);letter-spacing:.12em;transition:background var(--t),color var(--t),box-shadow var(--t),border-color var(--t)}
.btn:hover{background:rgba(201,162,78,.16);box-shadow:0 8px 20px -10px rgba(138,101,32,.5)}
.btn--solid{background:linear-gradient(180deg,#dcbf77,var(--gold-line));border-color:#b48a36;color:var(--ink)}
.btn--solid:hover{background:linear-gradient(180deg,#e6cb86,#d3ae5c);color:var(--ink)}
.contact__note{margin-top:12px;font-size:14px;line-height:1.8;color:var(--ink-s)}

/* ---------- 窓: 背景の 3D の夜空と龍が見える透明な帯(章番号なし) ---------- */
.win{position:relative;overflow-x:clip;height:76vh;height:76svh;min-height:460px;display:grid;place-items:center;padding:0 var(--gut);text-align:center;color:var(--paper)}
.win__in{position:relative;isolation:isolate;max-width:min(980px,100%)}
.win__in::before{content:"";position:absolute;inset:-34% -16%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--scrim),.5),rgba(var(--scrim),.3) 55%,rgba(var(--scrim),0))}
.win__label{font:500 13px/1.4 var(--f-cap);letter-spacing:.4em;padding-left:.4em;color:var(--gold-hi);text-shadow:0 0 12px rgba(var(--scrim),.95),0 0 3px rgba(var(--scrim),.9)}
.win__en{margin-top:14px;font:italic 500 clamp(46px,7.4vw,108px)/1.05 var(--f-it);letter-spacing:.01em;font-feature-settings:"liga" 0;text-wrap:balance;text-shadow:0 0 30px rgba(var(--scrim),.8),0 0 10px rgba(var(--scrim),.6),0 1px 3px rgba(var(--scrim),.7)}
.win__t{margin-top:16px;font:600 clamp(26px,4vw,54px)/1.5 var(--f-min);letter-spacing:.16em;text-wrap:balance;text-shadow:0 0 26px rgba(var(--scrim),.85),0 0 9px rgba(var(--scrim),.65),0 1px 3px rgba(var(--scrim),.7)}
html[lang="en"] .win__t,html[lang="ms"] .win__t{letter-spacing:.04em}
:is(.win__t,.win__sub):lang(ja),:is(.win__t,.win__sub):lang(zh){word-break:auto-phrase}
.win__rule{display:block;width:56px;height:1px;margin:26px auto 22px;background:var(--gold)}
.win__sub{font:600 clamp(20px,2.3vw,30px)/1.6 var(--f-min);letter-spacing:.5em;padding-left:.5em;text-shadow:0 0 20px rgba(var(--scrim),.9),0 0 7px rgba(var(--scrim),.7),0 1px 3px rgba(var(--scrim),.7)}
.win__sub:empty{display:none}
.win__rule:has(+ .win__sub:empty){display:none}
.win__greet{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;font:italic 500 clamp(20px,2vw,26px)/1.4 var(--f-it);letter-spacing:.03em;color:var(--gold-hi);text-shadow:0 0 16px rgba(var(--scrim),.95),0 0 5px rgba(var(--scrim),.8)}
.win__greet span{position:relative;padding:0 .95em}
.win__greet span+span::before{content:"";position:absolute;left:-3px;top:50%;width:5px;height:5px;margin-top:-2.5px;background:var(--gold);transform:rotate(45deg)}
.win__greet span[lang="ja"]{font:600 clamp(18px,1.8vw,23px)/1.5 var(--f-min);font-style:normal;letter-spacing:.16em}
.win__greet .f-sc{font-size:clamp(20px,2vw,25px);letter-spacing:.14em}

/* ---------- フッター(夜)。上は和紙から藍へ暮れていく ---------- */
.ftr{position:relative;z-index:1;padding:72px 0 56px;background:#060b1b}
.ftr::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:140px;pointer-events:none;background:linear-gradient(180deg,#0a143000 0%,#0a14301f 14%,#0a143047 30%,#0a143073 45%,#0a14309e 60%,#0a1430c7 76%,#0a1430e6 90%,#060b1b)}
.ftr .lbl{color:var(--gold-hi)}
.ftr__top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px 40px}
.ftr__logo{font:500 20px/1 var(--f-cap);letter-spacing:.32em}
.ftr__nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.ftr__nav a{padding:10px 0;font-size:14px;letter-spacing:.12em;color:var(--paper-2);transition:color var(--t)}
.ftr__nav a:hover{color:var(--gold-hi)}
.ftr__credit{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);font-size:12px;line-height:2;letter-spacing:.06em;color:var(--paper-2)}
.ftr__credit a{border-bottom:1px solid var(--line);transition:color var(--t),border-color var(--t)}
.ftr__credit a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
.ftr__copy{margin-top:28px;font-size:13px;letter-spacing:.12em;color:var(--paper-2)}

@media (max-width:1100px){
.chap{grid-template-columns:28px minmax(0,1fr);column-gap:16px}
.chap__rail{grid-column:1;grid-row:1 / span 2}
.chap__num{grid-column:2;grid-row:1;justify-self:start;text-align:left;display:flex;align-items:baseline;gap:6px;margin-bottom:14px;padding:0}
.chap__num b{font-size:34px}
.chap__num span{margin:0}
.chap__node{top:12px}
.chap__rail::before,.chap__rail::after{top:20px}
.chap__card{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr)}
.chap__fig{width:min(100%,300px)}
.work--main{grid-template-columns:minmax(0,1fr)}
.contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
.langs{grid-template-columns:minmax(0,1fr)}
.langs__globe{position:static}
.pf{grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "more" "photo";row-gap:28px}
.pf__photo{width:min(100%,560px)}
.pf__photo .frame__in{aspect-ratio:5/4}
}
@media (max-width:760px){
:root{--fade:170px}
body{font-size:16px;line-height:1.85}
html[lang="en"] body,html[lang="ms"] body{line-height:1.75}
.sec{padding:88px 0}
.edge-t{padding-top:calc(var(--fade) + 32px);scroll-margin-top:-56px}
.edge-b{padding-bottom:calc(var(--fade) + 24px)}.edge-f{padding-bottom:96px}
.sec__head{margin-bottom:36px;gap:16px}
.sec__no{padding-right:16px;font-size:44px}
h2{font-size:24px;letter-spacing:.12em}
h3,.blogcard__title,.contact__name{font-size:21px}
.pf__name{font-size:40px}
.facts>div{grid-template-columns:88px minmax(0,1fr);gap:12px}
.chaps{--cg:36px}
.chap{column-gap:12px}
.works{grid-template-columns:1fr}
.globe{max-width:300px}
.lrow{display:block}
.lrow__d{text-align:left;margin-top:2px}
.greet{min-height:84px}
.greet__w{font-size:36px}
.greet__w[lang="ja"],.greet__w .f-sc{font-size:30px}
.l-close{margin-top:36px;padding-left:18px;font-size:16px}
.blogcard{grid-template-columns:1fr}
.contact__btns{flex-direction:column}
.btn{width:100%}
.video__play{width:60px;height:60px;margin:-30px 0 0 -30px}
.win{min-height:480px}
.win__en{font-size:clamp(42px,12.4vw,64px)}
.win__t{font-size:clamp(25px,7.2vw,32px)}
.win__sub{letter-spacing:.4em;padding-left:.4em}
.win__greet{display:grid;grid-template-columns:1fr 1fr}.win__greet span{padding:0 .4em}.win__greet span:nth-child(odd)::before{display:none}.win__greet span:nth-child(even)::before{left:0}
.ftr{padding:56px 0 44px}
.ftr::before{height:120px}
}

@media (max-width:760px){.pf__role{letter-spacing:.1em}.pf__role::before{width:24px}.pf__more{display:flex;flex-direction:column}.facts{order:-1;margin:0 0 20px}.pf__photo::before{inset:12px -12px -12px 12px}}
@media (max-width:360px){.contact__name{font-size:17px;letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
.js-ready [data-reveal]{opacity:1;transform:none}
.frame__in img{transform:none}
.hero__scroll i{transform:none;opacity:1}
}

/* 背景の一時停止(WCAG 2.2.2)。夜の上では藍の円+金、明るい欄の上では和紙色の円+藍 */
.motion{position:fixed;right:clamp(4px,1.6vw,22px);bottom:clamp(4px,1.4vw,18px);z-index:40;width:44px;height:44px;display:grid;place-items:center;color:var(--gold-hi);cursor:pointer;transition:color var(--t),opacity .6s var(--ease)}   /* 押せる範囲は 44×44px のまま、見た目の丸は 30px で薄く */
.motion::before{content:"";position:absolute;inset:7px;border:1px solid var(--line);border-radius:50%;background:rgba(var(--scrim),.5);opacity:.8;transition:border-color var(--t),background-color var(--t),opacity var(--t)}
.motion:hover::before,.motion:focus-visible::before{opacity:1;background:rgba(var(--scrim),.8)}
.motion[hidden]{display:none}   /* 3D が整うまで出さない(display の指定が hidden 属性を打ち消していた) */
html[data-tone="light"] .motion{color:var(--ink)}
html[data-tone="light"] .motion::before{border-color:rgba(138,101,32,.55);background:rgba(255,253,248,.9)}
html[data-tone="light"] .motion:hover::before,html[data-tone="light"] .motion:focus-visible::before{background:#fffdf8}
.motion:focus-visible{outline-color:var(--gold-hi)}
html[data-tone="light"] .motion:focus-visible{outline-color:var(--gold-ink)}
.motion svg{position:relative;width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.motion__play{fill:currentColor;stroke:none}
.motion .motion__play,.motion[aria-pressed="true"] .motion__pause{display:none}
.motion[aria-pressed="true"] .motion__play{display:block}
.no3d .motion{display:none}