/* MESSAGE ブロック：部屋が閉じて白に戻った所に現れる。出方（不透明度・位置）は js/main.js が送りの量から入れる。
   文言は 2026-10-03 本人確定（6節15行）。改行はどの画面でも変えない：行は折り返さず、
   いちばん長い行が幅に、全体が高さに収まる大きさ（--mf）を js/message.js が決める。
   2026-10-04 本人裁定：本文の大きさと位置は導線に左右されない（導線の場所 .lead-slot をいつも空ける）／文字は最初から最後まで同じ濃さ／
   光は、本文がひらく時に右上から差し込んで引く、一度だけ／見出しは倍の大きさ／導線は ABOUT US と金の線。 */
.msg{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding-top:var(--header-h);pointer-events:none;opacity:0;overflow:hidden;--mh:26px}
.msg-in{position:relative;z-index:1}
.msg-head{display:block;font-family:var(--disp);font-weight:500;font-size:var(--mh);line-height:1.2;letter-spacing:.2em;color:var(--gold);margin-bottom:calc(var(--mf,18px)*1.6)}
.poem{font-size:var(--mf,18px);font-weight:var(--jp-weight);line-height:var(--mlh,1.95);letter-spacing:var(--mls,.06em);color:var(--ink)}
.poem.tight{font-feature-settings:"palt"}   /* 幅が足りない画面だけ、約物を詰めて文字を大きく保つ（js/message.js が付ける） */
.st{margin:0 0 var(--mgap,1.05em)}
.st:last-child{margin-bottom:0}
.ln{display:block;white-space:nowrap;overflow:clip}
.ln>i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform 1.2s var(--ease);transition-delay:calc(var(--l,0)*100ms)}
.st.on .ln>i{transform:none}
.key{font-weight:inherit;background:var(--key-text);-webkit-background-clip:text;background-clip:text;color:transparent}   /* “ウェルネス”と、届ける未来：濃い金 */

/* 光（一度だけ）：右上から斜めに差し込み、ひろがって、静かに引く。.play が付いた時に一度流れて消える */
.mlight{position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;background:linear-gradient(208deg,rgba(255,214,150,.78) 0%,rgba(255,226,172,.46) 22%,rgba(255,236,205,.2) 42%,rgba(255,236,205,0) 62%);clip-path:polygon(100% 0,100% 0,100% 0,100% 0)}
.msg.play .mlight{animation:light-in 5.6s var(--ease-io) .1s both}
@keyframes light-in{0%{opacity:0;clip-path:polygon(62% 0,100% 0,100% 30%,100% 0)}30%{opacity:1;clip-path:polygon(18% 0,100% 0,100% 100%,52% 100%)}62%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,30% 100%)}100%{opacity:0;clip-path:polygon(-20% 0,100% 0,100% 100%,10% 100%)}}

/* ——— 導線：ABOUT US ー ウェルネスアーキテクツの理念と志（言葉は本人指定）。いつも同じ高さを空け、本文を動かさない ——— */
.lead-slot{height:114px;margin-top:34px}
.lead{position:relative;display:inline-grid;grid-template-columns:auto auto minmax(150px,230px);align-items:baseline;column-gap:18px;padding:10px 0 0;color:var(--ink);pointer-events:none;cursor:pointer}
.gone .msg .lead{pointer-events:auto}
.lead .en{font-family:var(--disp);font-weight:500;font-size:var(--mh);line-height:1.2;letter-spacing:.2em;color:var(--gold);white-space:nowrap}
.lead .jp{font-weight:400;font-size:13px;letter-spacing:.12em;white-space:nowrap}
/* 金の線：本文がひらいたあと左から引かれ、そのあと左から右へ流れ続ける（FVの SCROLL の「滴る線」を横へ。下へ滴る＝送る／右へ流れる＝進む） */
.lead .go{position:relative;align-self:center;height:1px}
.lead .ln2{position:absolute;inset:0;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease) 2.6s}
.msg.play .ln2,.msg.shown .ln2{transform:none}
.lead .ln2::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(172,135,0,.3),rgba(201,162,74,.22) 60%,rgba(172,135,0,0))}   /* いつも残る、うすい線 */
.lead .ln2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(172,135,0,.95) 0 50%,rgba(172,135,0,0) 50% 100%);background-size:200% 100%;background-position:100% 0;animation:flow 2.8s var(--ease-io) 4.4s infinite}
@keyframes flow{0%{background-position:100% 0}60%,100%{background-position:-100% 0}}
.lead:hover .ln2{transform:scaleX(1.12)!important;transition-delay:0s;transition-duration:.9s}
/* READ MORE：線の下に、小さな金の英字。本文がひらいたあと、線に続いて現れる */
.lead .more{position:absolute;top:9px;font-family:var(--disp);font-weight:500;font-size:11px;line-height:1.2;letter-spacing:.26em;color:var(--gold);white-space:nowrap;opacity:0;transition:opacity 1.4s ease 3.6s}
.msg.play .more,.msg.shown .more{opacity:1}
/* 線の右の端の下（流れが着く所）に置く。2026-10-04 本人確定 */
.lead .more{right:0}

@media (max-width:767px){
  .msg{--mh:24px}
  .lead{grid-template-columns:auto minmax(80px,1fr);row-gap:6px;column-gap:14px;width:100%;padding-top:4px}
  .lead .en{grid-column:1/-1}
  .lead .jp{font-size:12.5px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.ln>i{transform:none!important;transition:none}.mlight{animation:none!important}.lead .ln2{transform:none;transition:none}.lead .ln2::after{animation:none;background-position:0 0}.lead .more{opacity:1;transition:none;animation:none!important}}