/* =========================================================
   会社概要「代表からの手紙」: 机の上に開いた便箋（company.html）
   ＋ トップのヒーローで手紙を押したときの光の遷移（index.html）
   動きは js/letter.js。別セッションと衝突しないよう、クラスは dl- / dletter で始める
   ========================================================= */

/* 手紙の書体: ひな明朝（Hina Mincho、SIL OFL 1.1。font/OFL-HinaMincho.txt）
   手紙に使っている字とかな・英数字だけに絞った woff2（約120KB）を company.html で先読みする。本文を書き換えて新しい字が増えたら作り直す
   （絞ったファイルに無い字は、css/fonts.css の Hina Mincho（自前配信・第1水準入り）から自動で補う） */
@font-face { font-family: "EP Hina Mincho"; font-style: normal; font-weight: 400; font-display: block; src: url("/font/hina-mincho-letter.woff2") format("woff2"); }
.dl-sheet { font-family: "EP Hina Mincho", "Hina Mincho", var(--serif-ja); font-synthesis: none; }
.dl-sheet :is(.chapter__body, .chapter__body .pull, .chapter__title, .chapter__no, .sign__name, .sign__role, .dl-cover__title, .dl-cover__nav b) { font-family: inherit; font-weight: 400; }

/* 紙の質感: 封筒の写真から切り出した紙肌（assets/letter/paper.webp、340×200 で継ぎ目なく並ぶ）を、封筒と同じ縮尺で敷く
   封筒の表示幅（PC: clamp(240px,26vw,440px)、スマホ: min(66vw,320px)）÷ 元の幅 1164px × 340px が1枚の幅
   上に、ランプ側（右上）がわずかに明るく、ランプから遠い左がわずかに暗い光と、紙の縁のかすかな陰りを重ねる */
.dl-sheet {
  --dl-tile: calc(clamp(240px, 26vw, 440px) * 340 / 1164);
  --accent-d: #6a4d22; --muted: #574d41;   /* 紙が封筒と同じ色になったぶん、小さい文字の色を濃くして読みやすさを保つ */
  background-color: #D8C6B0;
  background-image:
    radial-gradient(ellipse 90% 70% at 80% 0%, rgba(255,240,215,.28), transparent 70%),
    linear-gradient(90deg, rgba(60,42,22,.12), rgba(60,42,22,0) 45%),
    linear-gradient(180deg, rgba(90,65,35,0) 55%, rgba(90,65,35,.07)),
    url("/assets/letter/paper.webp");
  background-size: auto, auto, auto, var(--dl-tile) auto;
  box-shadow: inset 0 0 0 1px rgba(120,92,58,.18), inset 0 0 28px rgba(110,82,48,.10);
}
@media (max-width: 900px) { .dl-sheet { --dl-tile: calc(min(66vw, 320px) * 340 / 1164); } }

/* ---------- 机 ---------- */
.dletter { position: relative; background: #0E0D0C; color: var(--text);
  /* 紙の大きさ・封筒の位置は CSS だけで決める（JS が測ってから動かすと、最初の一瞬だけ違う場所に見えるため）
     --dl-top: 固定ヘッダーの高さ（上下の余白 clamp(12px,2vw,24px)×2 ＋ 45px）＋ 12px */
  --dl-top: calc(2 * clamp(12px, 2vw, 24px) + 57px);
  --dl-avail: calc(var(--svh100, 100svh) - var(--dl-top) - 24px);
  /* PC・タブレット: 便箋の縦横比 1:1.414 で画面の高さに収まる大きさ（幅は最大 680px） */
  --dl-w: min(680px, calc(100vw - 64px), calc(var(--dl-avail) / 1.414));
  --dl-h: max(360px, min(var(--dl-avail), calc(var(--dl-w) * 1.414)));
  --dl-envw: clamp(240px, 26vw, 440px); }
/* スマホ: 画面の幅いっぱい、縦は 1:1.62 まで（下に封筒がのぞく余地を残す） */
/* 10/3: 画面の低い PC（1366×768 のノートなど）やスマホの横向きでは、紙が画面に合わせて小さくなりすぎ、手紙が数十〜百枚に増えていた。
   幅 601px 以上は、紙の高さを最低 720px 分として決める（画面より高い紙は、読み進めると下端まで見えてから止まる） */
@media (min-width: 601px) { .dletter { --dl-avail: max(calc(var(--svh100, 100svh) - var(--dl-top) - 24px), 720px); } }
@media (max-width: 600.98px) { .dletter { --dl-w: calc(100vw - 32px); --dl-h: max(360px, min(var(--dl-avail), calc(var(--dl-w) * 1.62))); } }
@media (max-width: 900px) { .dletter { --dl-envw: min(66vw, 320px); } }
.dletter__desk { position: absolute; inset: 0; pointer-events: none; }
.dletter__pin { position: sticky; top: 0; height: var(--vh100, 100vh); overflow: hidden; }
.dletter__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; }
/* スマホは同じ絵の左側（窓の映り込み）を縦長に切り出す */
@media (max-width: 900px) { .dletter__img { object-position: 4% 50%; } }
/* 開いた封筒（切り抜き）。PC: 便箋の左の下から半分ほど（画面の縦の中ほど）、スマホ・タブレット: 表書きの下からのぞかせる。最初から動かない */
.dletter__env { position: absolute; width: var(--dl-envw); max-width: none; height: auto;
  left: calc(50% - var(--dl-w) / 2 - var(--dl-envw) * .58); top: calc(50% - var(--dl-envw) * 1.026 * .45);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
@media (max-width: 900px) { .dletter__env { left: max(-8vw, -30px); top: calc(var(--dl-top) + var(--dl-h) - var(--dl-envw) * 1.026 * .42); } }
.dletter__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 60% 45%, rgba(8,7,6,0), rgba(8,7,6,.45)); }

/* ---------- 便箋 ---------- */
.dletter__stack { position: relative; z-index: 1; padding: var(--dl-top) 16px calc(40 * var(--vh, 1vh)); }
/* 紙の大きさはどれも同じ（--dl-w × --dl-h）。本文は js/letter.js が紙に合わせて組む */
.dl-sheet { position: relative; box-sizing: border-box; width: var(--dl-w); max-width: none; height: var(--dl-h); overflow: clip; margin: 0 auto;
  padding: clamp(36px,5vw,56px) clamp(22px,4.5vw,52px) clamp(40px,5.5vw,60px);
  border-radius: 2px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(120,92,58,.18), inset 0 0 28px rgba(110,82,48,.10); transform-origin: 50% 0; }
.dletter__stack > .dl-gen.dl-sheet { margin-top: calc(24 * var(--vh, 1vh)); }
/* スマホ・タブレットでは表書きの下に封筒を見せるため、表書きと1枚目の間を広めにとる */
@media (max-width: 900px) { .dletter__stack > .dl-gen.dl-first { margin-top: calc(40 * var(--vh, 1vh)); } }
@media (max-width: 600.98px) { .dl-sheet { padding: 28px 20px 34px; } }
/* 前の紙からの続き: 本文を紙の頭から始める */
.dl-sheet--cont .chapter__body { margin-top: 0; }
.dl-anchor { display: block; height: 0; scroll-margin-top: var(--dl-top); }
/* 1枚の紙に章の終わりと次の章の頭が入るときは、章の間を2行分あける */
.dl-sheet .chapter + .chapter { margin-top: calc(var(--lh, 38px) * 2); }
.dl-sheet .chapter { padding: 0; border: 0; margin: 0; max-width: none; }
.dl-sheet__count { position: absolute; right: 18px; top: 14px; font-size: 11px; letter-spacing: .2em; color: var(--accent-d, #8C6A36); }
.dl-sheet .sign { position: relative; }
.dl-sheet .sign__seal { display: none; }   /* 署名の印は、読み終えたときに押す封蝋（.dl-stamp）に置き換える */

/* 1枚目（表書き）: 見出し・差出人は上に、目次は紙の下に寄せる */
.dl-sheet--cover { display: flex; flex-direction: column; }
.dl-sheet--cover .dl-cover__nav { margin-top: auto; margin-bottom: auto; }
.dl-cover__eyebrow { margin: 0; font-size: 12px; letter-spacing: .3em; color: var(--accent-d, #8C6A36); }
.dl-cover__title { margin: 22px 0 0; font-family: var(--serif-ja); font-weight: 500; line-height: 1.7; letter-spacing: .04em;
  font-size: clamp(17px, calc(var(--dl-w, 680px) * .05), 32px); }   /* 紙の幅に合わせる（1行 15 字が紙に収まる大きさ） */
.dl-cover__from { margin: 22px 0 0; font-size: 13px; letter-spacing: .1em; color: var(--muted, #6b6153); }
/* 目次は縦に1列 */
.dl-cover__nav { margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(140,106,54,.3); list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; font-size: 15px; letter-spacing: .1em; }
.dl-cover__nav a { display: flex; align-items: center; gap: 16px; min-height: 42px; color: inherit; border-bottom: 1px dashed rgba(140,106,54,.28); }
.dl-cover__nav li:last-child a { border-bottom: 0; }
@media (max-width: 600.98px) { .dl-cover__nav { font-size: 14px; margin-top: 22px; padding-top: 12px; } .dl-cover__nav a { min-height: 36px; } }
.dl-cover__nav a:hover { color: var(--accent-d, #8C6A36); }
.dl-cover__nav b { font-weight: 400; font-size: 12px; letter-spacing: .08em; color: var(--accent-d, #8C6A36); }
.dl-cover__nav .is-info { margin-top: 10px; color: var(--muted, #6b6153); font-size: .9em; }

/* 手紙を読み終えたら「ご相談は、面談から」: 便箋は机に置いたまま（紙の重なりの中の最後に置くので、紙は止まったまま）、
   画面がうっすら暗くなって中央に締めくくりが浮かぶ。暗さと文字の出方は js/letter.js がスクロールに合わせて決める（JS が無いときはそのまま見える） */
.dl-end { position: relative; z-index: 100; height: calc(190 * var(--vh, 1vh)); margin-top: calc(16 * var(--vh, 1vh)); }
.dl-end__stage { position: sticky; top: 0; height: var(--vh100, 100vh); display: grid; place-items: center; margin: 0 -16px; }
.dl-end__dim { position: absolute; inset: 0; background: #0E0D0C; opacity: .82; pointer-events: none; }
.dl-close { position: relative; max-width: 680px; padding: 0 20px; text-align: center; color: var(--text-inv, #EFE8DA); display: flex; flex-direction: column; align-items: center; }
.dl-close__title { margin: 0; font-family: "EP Hina Mincho", "Hina Mincho", var(--serif-ja); font-weight: 400; font-size: clamp(22px,2.6vw,32px); line-height: 1.6; letter-spacing: .08em; }
.dl-close__text { margin: 18px 0 0; font-size: 15px; line-height: 2; letter-spacing: .06em; color: var(--sub-inv, #cfc4b0); }
.dl-close .btn { margin-top: 36px; }
@media (max-width: 600.98px) { .dl-close__title { font-size: clamp(18px, 5vw, 22px); letter-spacing: .04em; } .dl-close__text { font-size: 14px; letter-spacing: .02em; } }
.dletter__stack { padding-bottom: 0; }

/* 文字が魔法でふわっと浮かぶ: 金色の光から紙のインクへ（JS が1文字ずつ .dl-fl に包む）
   重くならないよう、1文字ずつ変えるのは不透明度と色だけ。浮き上がりとぼかしは段落（.dl-rise）ごとにかけ、出そろったら（.is-done）外す */
.dl-fl { opacity: 0; color: #b58d49; transition: opacity .8s ease, color 1.6s ease; }
.is-up .dl-fl { opacity: 1; color: inherit; }
.dl-rise { transform: translateY(.4em); filter: blur(2.5px); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.dl-rise.is-up { transform: none; filter: blur(0); }
.dl-rise.is-done { transition: none; filter: none; }
/* 本文の段落: 段落ごとに、ぼかしから浮き上がる。opacity・transform・filter だけなので描き直しなしで動く */
.dl-para { opacity: 0; transform: translateY(.6em); filter: blur(3px);   /* 10/1: 段落ごとの will-change をやめた（段落の数だけ層ができ、iPhone のメモリを圧迫していた） */
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1s ease; }
.dl-para.is-up { opacity: 1; transform: none; filter: blur(0); }
.dl-para.is-done { filter: none; }
/* 「会社概要へ」で自動で読み進めている間は、ぼかしを使わず薄く浮かべるだけにする（軽くするため） */
html.dl-running .dl-para { filter: none; transition: opacity .5s ease, transform .6s ease; }
.dl-fade { opacity: 0; filter: blur(6px); transform: translateY(10px); transition: opacity 1s ease, filter 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.dl-fade.is-up { opacity: 1; filter: none; transform: none; }

/* 読み終えて机に置いた紙を少し暗くする板（filter: brightness を毎回かけ直すより軽い） */
.dl-sheet__shade { position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: #140e08; opacity: 0; pointer-events: none; }
/* 紙は動かす前から別の層にしておき、スクロール中の描き直しを避ける */
.dl-sheet.is-live { will-change: transform; }   /* 動いている途中の紙だけ（js/letter.js が付け外しする） */

/* 署名に封蝋を押す（最後の1枚） */
.dl-stamp { position: absolute; left: 0; bottom: 0; width: 64px; height: 64px; opacity: 0; transform: scale(2.4) rotate(-18deg); pointer-events: none; }
.dl-stamp i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #e7cf9c, #b8955a 55%, #7d5d2e); box-shadow: inset 0 0 0 5px rgba(255,255,255,.12), inset 0 0 0 6px rgba(90,62,24,.4), 0 3px 8px rgba(0,0,0,.3); }
.dl-stamp::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(217,188,133,.8); opacity: 0; }
.dl-stamp.is-on { animation: dl-stamp-in .55s cubic-bezier(.5,0,.75,0) forwards; }
.dl-stamp.is-on::after { animation: dl-stamp-ring .9s .5s ease-out forwards; }
@keyframes dl-stamp-in { 0% { opacity: 0; transform: scale(2.4) rotate(-18deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes dl-stamp-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.8); } }

/* ---------- トップの代表挨拶の封筒（ヒーローの動画と同じ封筒の切り抜き。文字は左の見出し側にあるので封筒には書かない） ---------- */
.letter-card.dl-envcard { max-width: 460px; padding: 0; gap: 22px; align-items: center; background: none; border: 0; border-radius: 0; box-shadow: none; transform: rotate(-3deg); }
.letter-card.dl-envcard.is-hidden { transform: rotate(-3deg) translateY(24px); }
.letter-card.dl-envcard:hover, .letter-card.dl-envcard:focus-visible { transform: rotate(-1deg) translateY(-6px); box-shadow: none; outline: none; }
.dl-envcard__img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.35)); transition: filter .5s var(--ease, ease); }
.letter-card.dl-envcard:hover .dl-envcard__img, .letter-card.dl-envcard:focus-visible .dl-envcard__img {
  filter: drop-shadow(0 32px 36px rgba(0,0,0,.6)) drop-shadow(0 3px 5px rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(217,188,133,.35)); }
.dl-envcard__hint { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; color: var(--sub-inv, #cfc4b0); transform: rotate(3deg); }
.dl-envcard__hint::after { content: "→"; color: var(--accent-l, #D9BC85); transition: transform .3s; }
.letter-card.dl-envcard:hover .dl-envcard__hint::after { transform: translateX(4px); }
.letter-card.dl-envcard:focus-visible .dl-envcard__img { outline: 2px solid var(--accent-l, #D9BC85); outline-offset: 6px; }

/* ---------- トップ → 会社概要の光の遷移 ---------- */
/* ページをまたぐ画面遷移: トップの手紙から会社概要へ移るときだけ使う（それ以外は js で取り消す）。
   前のページの最後の画面（光）から次のページの最初の画面（光）へ、切れ目なくつなぐ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
/* トップ側: 手紙の形の光・そのにじみ・画面を満たす光（js/letter.js が作って動かす） */
.dl-eglow { position: fixed; z-index: 210; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: linear-gradient(160deg, #fff6e0, #ffe9bd 60%, #f5d79a); }
.dl-ehalo { position: fixed; z-index: 209; pointer-events: none; opacity: 0; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,244,215,1), rgba(245,218,160,.6) 40%, rgba(217,188,133,0)); }
.dl-flash { position: fixed; z-index: 211; left: 0; top: 0; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%;
  background: radial-gradient(closest-side, #fffaf0 0, #f8ebcc 25%, #efd8a6 45%, rgba(233,205,150,.6) 70%, rgba(233,205,150,0) 100%); }
/* 会社概要側: トップで画面を満たした光と同じ光で覆った状態から始め、引いていく */
html.is-lightin body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: radial-gradient(circle var(--dl-r, 150vmax) at var(--dl-x, 50%) var(--dl-y, 80%), #fffaf0 0, #f8ebcc 25%, #efd8a6 45%, #e9cd96 70%, #e9cd96 100%); }
html.is-lightin.is-lightout body::after { opacity: 0; transition: opacity calc(var(--dl-T, 1) * 1700ms) cubic-bezier(.45,0,.2,1) 120ms; }

@media (prefers-reduced-motion: reduce) {
  .dl-fl, .dl-fade, .dl-rise, .dl-para { opacity: 1; filter: none; transform: none; color: inherit; transition: none; }
  .dl-stamp { opacity: 1; transform: rotate(-8deg); }
}

/* ---------- 画面に固定の「会社概要へ」（押すと手紙を一気に読み進めて会社概要へ） ---------- */
.dl-jump { position: fixed; z-index: 60; right: clamp(16px,2.4vw,32px); bottom: max(16px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px 12px 18px; border: 1px solid rgba(217,188,133,.6); border-radius: 2px; background: rgba(14,13,12,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #EFE8DA; font-family: var(--serif-ja); font-size: 13px; letter-spacing: .14em; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s ease, transform .4s ease, border-color .3s, background .3s; }
.dl-jump.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dl-jump:hover, .dl-jump:focus-visible { color: #EFE8DA; border-color: #D9BC85; background: rgba(30,26,20,.9); }
.dl-jump:focus-visible { outline: 2px solid #D9BC85; outline-offset: 3px; }
.dl-jump svg { width: 10px; height: 14px; color: #D9BC85; }

/* スマホ: 文字を少し小さくして、1枚に入る量を増やす（紙の枚数を減らす）。罫線も行の高さに合わせて詰める */
@media (max-width: 600.98px) {
  .dl-sheet .chapter__body { --lh: 31px; font-size: 15.5px; letter-spacing: .01em; margin-top: 18px; }
  .dl-sheet .chapter__body .pull { font-size: 17px; padding-left: 14px; }
  .dl-sheet .chapter__body .chapter__title--mid { font-size: 20px; }
  .dl-sheet .chapter__title { font-size: 20px; margin-top: 12px; line-height: 1.55; }
  .dl-sheet .chapter__no { font-size: 11px; }
  .dl-sheet .sign { margin-top: 28px; }
  .dl-sheet .sign__name { font-size: 22px; }
  .dl-sheet .chapter + .chapter { margin-top: 48px; }
}

/* 改行のきまり（9/29）: 手紙は文章が長いので、句のかたまり（.ph）は1行を占有させず普通に流す（紙の枚数を変えないため）。
   単語の途中では改行しない（keep-all と文節の <wbr>）ことだけを効かせる */
.dletter .ph, .dletter .s { display: inline; }
.dletter p, .dletter blockquote, .dletter li { text-wrap-style: auto; }
.dletter { line-break: normal; }

/* 章04（1章を紙2枚に収める決まり）の長い2段落だけは、PC で文節の途中でも折り返してよい。単語を切らないと紙が1枚増えるため（9/29） */
@media (min-width: 601px) { .dletter [data-lb="soft"] { word-break: normal; } }
/* 10/3: 署名の名前は途中で折り返さない。幅 320px 前後では表書きの目次の最後の行が紙の下で切れていたので、目次を詰める */
.dl-sheet .sign__name { white-space: nowrap; }
@media (max-width: 359.98px) {
  .dl-cover__nav { font-size: 13px; margin-top: 16px; padding-top: 8px; }
  .dl-cover__nav a { min-height: 31px; gap: 12px; }
  .dl-cover__title { margin-top: 14px; }
  .dl-cover__from { margin-top: 14px; }
}
.dl-cover__from .ph { white-space: nowrap; }   /* 差出人は「株式会社ExitPlan／代表取締役／若樹 貴志」の区切りでだけ折り返す（10/3） */