@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');

/* ---- base & surfaces ---- */
.lm { font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.lm-sea { background: var(--sea); color: var(--on-sea); }
.lm-paper { background: var(--paper); color: var(--ink); }
.lm-sunk { background: var(--paper-sunk); color: var(--ink); }
.lm-container { max-width: var(--container); margin: 0 auto; }

/* ---- type ---- */
.lm-label { display: block; margin: 0 0 var(--space-2); font-size: 11px; line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.lm-sea .lm-label { color: var(--on-sea-muted); }
.lm-display { margin: 0; font-size: 40px; line-height: 1.6; font-weight: 300; letter-spacing: .12em; }
.lm-h1 { margin: 0; font-size: 30px; line-height: 1.7; font-weight: 400; letter-spacing: .1em; }
.lm-h2 { margin: 0; font-size: 20px; line-height: 1.8; font-weight: 400; letter-spacing: .1em; }
.lm-lead { margin: 0; font-size: 18px; line-height: 2.1; font-weight: 300; letter-spacing: .06em; max-width: var(--measure-body); }
.lm-body { margin: 0; font-size: 16px; line-height: 2; letter-spacing: .04em; max-width: var(--measure-body); color: var(--ink-muted); }
.lm-sea .lm-body { color: var(--on-sea-muted); }
.lm-caption { font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: var(--ink-muted); }
.lm-sea .lm-caption { color: var(--on-sea-muted); }
.footer__bottom .lm-caption a { color: inherit; text-decoration: none; }   /* 著作表示の法人名（会社トップへのリンク）。見た目は文字のまま */
.footer__bottom .lm-caption a:hover { box-shadow: inset 0 -1px 0 currentColor; }

/* ---- section heading ---- */
.lm-heading { margin: 0 0 var(--space-5); }

/* ---- arrow (thin line) ---- */
.lm-arrow { position: relative; display: inline-block; width: 28px; height: 1px; background: currentColor; transition: transform .8s ease; }
.lm-arrow::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 1px; background: currentColor; transform: rotate(35deg); transform-origin: right center; }

/* ---- buttons ---- */
.lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4); box-sizing: border-box; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: .12em; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.lm-btn:hover .lm-arrow { transform: translateX(6px); }
.lm-btn--light { background: var(--light); color: var(--on-light); border-color: var(--light-edge); }
.lm-btn--line { background: transparent; color: var(--ink); border-color: var(--field-border); }
.lm-sea .lm-btn--line { color: var(--on-sea); border-color: var(--on-sea-muted); }
.lm-btn--block { display: flex; width: 100%; }
.lm-btn:focus-visible, .lm-link:focus-visible, .lm-card:focus-visible, .lm-list a:focus-visible, .lm-nav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lm-sea .lm-btn:focus-visible, .lm-sea .lm-link:focus-visible, .lm-sea .lm-nav a:focus-visible { outline-color: var(--focus-on-sea); }

/* ---- text link ---- */
.lm-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--light-ink); text-decoration: none; letter-spacing: .1em; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid currentColor; }
.lm-link:hover .lm-arrow { transform: translateX(6px); }
.lm-sea .lm-link { color: var(--light-on-sea); }

/* ---- photo placeholder ---- */
.lm-photo { position: relative; display: flex; align-items: flex-end; background: var(--plate); color: var(--ink); overflow: hidden; }
.lm-sea .lm-photo { background: var(--plate-sea); color: var(--on-sea); }
.lm-photo__note { margin: 0; padding: var(--space-3); max-width: 30em; font-size: 12px; line-height: 1.8; letter-spacing: .04em; }
.lm-photo__note b { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .24em; }

/* ---- place card ---- */
.lm-card { display: block; color: inherit; text-decoration: none; }
.lm-card .lm-photo { aspect-ratio: 4 / 5; }
.lm-card__name { margin: var(--space-3) 0 var(--space-1); font-size: 20px; line-height: 1.8; font-weight: 400; letter-spacing: .1em; }
.lm-card__line { margin: 0 0 var(--space-2); font-size: 14px; line-height: 1.9; letter-spacing: .06em; color: var(--ink-muted); }
.lm-card__more { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; letter-spacing: .12em; color: var(--light-ink); }
.lm-card:hover .lm-arrow { transform: translateX(6px); }

/* ---- article list ---- */
.lm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lm-list li { border-bottom: 1px solid var(--rule); }
.lm-list a { display: grid; grid-template-columns: 140px 1fr 28px; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; color: inherit; text-decoration: none; }
.lm-list time { font-size: 13px; letter-spacing: .08em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lm-list__title { font-size: 18px; line-height: 1.8; letter-spacing: .06em; }
.lm-list .lm-arrow { color: var(--light-ink); align-self: center; }
.lm-list a:hover .lm-arrow { transform: translateX(6px); }

/* ---- info table (horizontal rules only) ---- */
.lm-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.9; letter-spacing: .04em; }
.lm-table th, .lm-table td { padding: var(--space-3) 0; text-align: left; vertical-align: top; font-weight: 400; border-bottom: 1px solid var(--rule); }
.lm-table tr:first-child > * { border-top: 1px solid var(--rule); }
.lm-table th { width: 200px; padding-right: var(--space-4); font-size: 14px; letter-spacing: .1em; color: var(--ink-muted); }
.lm-sea .lm-table th, .lm-sea .lm-table td { border-color: var(--rule-sea); }
.lm-sea .lm-table th { color: var(--on-sea-muted); }

/* ---- form ---- */
.lm-form { display: grid; gap: var(--space-4); }
.lm-field label { display: block; margin-bottom: var(--space-1); font-size: 13px; letter-spacing: .12em; }
.lm-field .lm-req { margin-left: var(--space-1); font-size: 11px; letter-spacing: .1em; color: var(--ink-muted); }
.lm-input { display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; font: inherit; font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper); border: 1px solid var(--field-border); border-radius: var(--radius-sm); }
.lm-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
textarea.lm-input { min-height: 168px; line-height: 1.9; resize: vertical; }
.lm-field__hint { margin: 6px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--ink-muted); }
.lm-field--error .lm-input { border-color: var(--danger); }
.lm-field__error { margin: 6px 0 0; font-size: 12px; color: var(--danger); }

/* ---- header / nav ---- */
.lm-header { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.lm-wordmark { color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .24em; }
.lm-nav { display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 13px; letter-spacing: .16em; }
.lm-nav a { color: inherit; text-decoration: none; padding: 8px 0; }
.lm-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--light-ink); }
.lm-nav .lm-nav__cta { color: var(--light-ink); }
.lm-sea .lm-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--light-on-sea); }
.lm-sea .lm-nav .lm-nav__cta { color: var(--light-on-sea); }

/* ---- the beacon: one slow light, once per page ---- */
.lm-beacon { display: block; width: 56px; height: 1px; background: var(--light-on-sea); animation: lm-beacon 28s ease-in-out infinite; }
@keyframes lm-beacon { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* ---- scroll fade (the only scroll motion) ---- */
.lm-fade { opacity: 0; transform: translateY(12px); transition: opacity 1.4s ease, transform 1.4s ease; }
.lm-fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lm-beacon { animation: none; opacity: 1; }
  .lm-fade { opacity: 1; transform: none; transition: none; }
  .lm-arrow { transition: none; }
}

/* ---- logos (supplied files; never redraw) ---- */
.lm-logo { display: block; height: 24px; width: auto; }
.lm-card__logo { height: 22px; margin: var(--space-3) 0 var(--space-2); }
.lm-card__logo img { display: block; height: 100%; width: auto; }

/* ---- handwritten message sheet ---- */
.lm-letter { margin: 0; background: #ffffff; padding: var(--space-4); }
.lm-letter img { display: block; width: 100%; height: auto; }
.lm-transcript { margin-top: var(--space-3); font-size: 14px; letter-spacing: .08em; }
.lm-transcript summary { cursor: pointer; color: var(--light-ink); }
.lm-sea .lm-transcript summary { color: var(--light-on-sea); }
.lm-transcript p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 2; max-width: var(--measure-body); }
.lm-card__name { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; }
.lm-name-logo { display: block; height: 20px; width: auto; }
.lm-name-logo--relien { height: 30px; }

/* ---- list / cards / form on sea ---- */
.lm-sea .lm-list, .lm-sea .lm-list li { border-color: var(--rule-sea); }
.lm-sea .lm-list time { color: var(--on-sea-muted); }
.lm-sea .lm-list .lm-arrow, .lm-sea .lm-card__more { color: var(--light-on-sea); }
.lm-sea .lm-card__line { color: var(--on-sea-muted); }
.lm-sea .lm-field .lm-req, .lm-sea .lm-field__hint { color: var(--on-sea-muted); }

/* ---- SP type (375px) ---- */
.lm-display-sp { margin: 0; font-size: 26px; line-height: 1.7; font-weight: 300; letter-spacing: .1em; }
.lm-h1-sp { margin: 0; font-size: 22px; line-height: 1.7; font-weight: 400; letter-spacing: .08em; }
.lm-lead-sp { margin: 0; font-size: 16px; line-height: 2.1; font-weight: 300; letter-spacing: .04em; }

/* ---- SP header: wordmark + the word "メニュー" ---- */
.lm-header--sp { height: 64px; }
.lm-menu { font: inherit; font-size: 13px; letter-spacing: .16em; color: inherit; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.lm-menu:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lm-sea .lm-menu:focus-visible { outline-color: var(--focus-on-sea); }

/* ---- SP stacks: date above title, th above td ---- */
.lm-list--stack a { grid-template-columns: 1fr 28px; grid-template-rows: auto auto; row-gap: 4px; padding: var(--space-3) 0; }
.lm-list--stack time { grid-column: 1; }
.lm-list--stack .lm-list__title { grid-column: 1; font-size: 16px; }
.lm-list--stack .lm-arrow { grid-column: 2; grid-row: 1 / 3; }
.lm-table--stack th, .lm-table--stack td { display: block; width: auto; padding-right: 0; }
.lm-table--stack th { padding-bottom: 4px; border-bottom: 0; }
.lm-table--stack tr:first-child > td { border-top: 0; }

/* ---- article (記事詳細) ---- */
.lm-article { max-width: var(--measure-article); margin: 0 auto; }
.lm-article__date { display: block; margin: var(--space-2) 0; font-size: 13px; letter-spacing: .1em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lm-article__title { margin: 0; }
.lm-article p { margin: 0 0 var(--space-4); font-size: 18px; line-height: 2.1; font-weight: 300; letter-spacing: .06em; }
.lm-article h2 { margin: var(--space-5) 0 var(--space-3); font-size: 20px; line-height: 1.8; font-weight: 400; letter-spacing: .1em; }
.lm-article blockquote { margin: 0 0 var(--space-4); padding: var(--space-1) 0 var(--space-1) var(--space-3); border-left: 1px solid var(--rule); }
.lm-article blockquote p { margin: 0; font-size: 16px; color: var(--ink-muted); }

/* ---- pager (前後・一覧) ---- */
.lm-pager { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.lm-sea .lm-pager { border-color: var(--rule-sea); }

/* ---- article: 中見出し・箇条書き・図版・リンク ---- */
.lm-article h3 { margin: var(--space-4) 0 var(--space-2); font-size: 17px; line-height: 1.9; font-weight: 500; letter-spacing: .08em; }
.lm-article ul, .lm-article ol { margin: 0 0 var(--space-4); padding-left: 1.4em; }
.lm-article li { margin-bottom: var(--space-2); font-size: 17px; line-height: 2.1; font-weight: 300; letter-spacing: .06em; }
.lm-article a { color: var(--light-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.lm-sea .lm-article a { color: var(--light-on-sea); }
.lm-article figure { margin: 0 0 var(--space-4); }
.lm-article figure img { display: block; width: 100%; height: auto; }
.lm-article figcaption { margin-top: var(--space-2); font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: var(--ink-muted); }
.lm-sea .lm-article figcaption { color: var(--on-sea-muted); }

/* ---- breadcrumbs (全ページ・h1の上) ---- */
.lm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: 11px; line-height: 1.8; letter-spacing: .16em; color: var(--ink-muted); }
.lm-sea .lm-crumbs { color: var(--on-sea-muted); }
.lm-crumbs li { display: flex; align-items: center; gap: var(--space-2); }
.lm-crumbs li + li::before { content: "/"; opacity: .55; }
.lm-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.lm-crumbs a:hover { border-bottom-color: currentColor; }
.lm-crumbs [aria-current="page"] { color: var(--ink); }
.lm-sea .lm-crumbs [aria-current="page"] { color: var(--on-sea); }
.lm-crumbs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lm-sea .lm-crumbs a:focus-visible { outline-color: var(--focus-on-sea); }

/* ---- pagination (一覧の2ページ目以降) ---- */
.lm-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); font-size: 14px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.lm-pagination a, .lm-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; }
.lm-pagination a:hover, .lm-pagination [aria-current="page"] { box-shadow: inset 0 -1px 0 var(--light-ink); }
.lm-sea .lm-pagination a:hover, .lm-sea .lm-pagination [aria-current="page"] { box-shadow: inset 0 -1px 0 var(--light-on-sea); }
.lm-pagination__gap { color: var(--ink-muted); min-width: 20px; }
.lm-sea .lm-pagination__gap { color: var(--on-sea-muted); }
.lm-pagination a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lm-sea .lm-pagination a:focus-visible { outline-color: var(--focus-on-sea); }

/* ---- footer ---- */
.lm-footer { padding: var(--space-6) 0 var(--space-5); }
.lm-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); }
.lm-footer__sites { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 13px; letter-spacing: .12em; }
.lm-footer__sites a, .lm-footer__sns a { color: inherit; text-decoration: none; }
.lm-footer__sites a:hover, .lm-footer__sns a:hover { box-shadow: inset 0 -1px 0 currentColor; }
.lm-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.lm-sea .lm-footer__bottom { border-color: var(--rule-sea); }
.lm-footer__sns { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 12px; letter-spacing: .16em; }
.lm-footer__copy { margin: 0; font-size: 12px; letter-spacing: .08em; color: var(--ink-muted); }
.lm-sea .lm-footer__copy { color: var(--on-sea-muted); }
.lm-footer a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lm-sea .lm-footer a:focus-visible { outline-color: var(--focus-on-sea); }
.lm-footer--sp .lm-footer__top, .lm-footer--sp .lm-footer__bottom { display: block; }
.lm-footer--sp .lm-footer__sites { display: block; }
.lm-footer--sp .lm-footer__sites li { margin-bottom: var(--space-2); }
.lm-footer--sp .lm-footer__sns { margin-bottom: var(--space-3); }

/* ---- doors (結トップだけ。ここ以外に置かない) ---- */
.lm-doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lm-doors--stack { grid-template-columns: 1fr; }
.lm-door { display: block; padding: var(--space-5) var(--space-4); color: var(--ink); text-decoration: none; }
.lm-door--yawata { background: #f8f2e4; }
.lm-door--relien { background: #f7e3e6; }
.lm-door__name { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; margin: 0 0 var(--space-2); font-size: 20px; line-height: 1.8; font-weight: 400; letter-spacing: .1em; }
.lm-door__line { margin: 0 0 var(--space-3); font-size: 15px; line-height: 1.9; letter-spacing: .06em; color: var(--ink-muted); }
.lm-door__more { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; letter-spacing: .12em; color: var(--light-ink); }
.lm-door:hover .lm-arrow { transform: translateX(6px); }
.lm-door:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- background stage (background.md の背景層を敷く枠) ---- */
.lm-stage { position: relative; isolation: isolate; overflow: hidden; }
.lm-stage__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lm-stage__bg > canvas, .lm-stage__bg > svg { display: block; width: 100%; height: 100%; }
.lm-stage > :not(.lm-stage__bg) { position: relative; z-index: 1; }

/* =====================================================================
   本（会社トップ）— ヒーローの本（riffle）と章の本（book）。出所：単独デモ v5.37。値は変えない
   .hero → .lm-bookhero に名前空間を移した以外はデモの CSS そのまま。JS は components/bundle.js
   ===================================================================== */
/* ---- ページ（見開きの左右・葉の中身、共通） ---- */
.bk__sp>.pg,.rf__pg>.pg,#rfsrc>.pg{position:absolute;top:0;left:0;width:50%;height:100%;box-sizing:border-box;padding:40px;z-index:1;margin:0}
.bk__sp>.pg{padding-bottom:calc(40px + 5%)}   /* 下辺は外側で 5.5%H 上がるので、その分だけ文字も上げる */
.bk__sp>.pg--r{left:50%}.rf__pg>.pg,#rfsrc>.pg{width:100%}
.pg__body{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.pg--l>.pg__body,.pg--l.pg--cover{transform:skewY(2.4deg);transform-origin:0 100%}.pg--r>.pg__body,.pg--r.pg--cover{transform:skewY(-2.4deg);transform-origin:100% 100%}   /* 文字は紙の沈みに沿って傾く（ノド側が下がる）*/
.rf__face[data-side="f"]{transform:skewY(-2.4deg);transform-origin:100% 100%}.rf__face[data-side="b"]{transform:skewY(2.4deg);transform-origin:0 100%}
.pg__body--top{justify-content:flex-start}
.page__wordmark{margin:0;font-size:22px;font-weight:500;letter-spacing:.24em}
.page__sub{margin:12px 0 0;font-size:13px;letter-spacing:.08em;color:var(--on-sea-muted)}
.page__name{margin:0;font-size:22px;line-height:1.8;font-weight:400;letter-spacing:.1em}
.page__line{margin:var(--space-2) 0 0;font-size:15px;line-height:2;letter-spacing:.06em;color:var(--muted)}
.page__more{margin:var(--space-4) 0 0}
.pg .lm-beacon{margin-bottom:var(--space-3)}
/* ---- ヒーロー：斜めに大きくはみ出した本 ---- */
.lm-bookhero{position:relative;overflow:hidden;min-height:760px;padding-bottom:var(--space-6);--rfw:1140px;cursor:pointer}
.lm-bookhero__copy{position:relative;z-index:3;max-width:560px;padding-top:var(--space-6);}
.lm-bookhero__copy>*{position:relative;z-index:1}
.lm-bookhero__copy{mix-blend-mode:difference}.lm-bookhero__copy .lm-display,.lm-bookhero__copy .lm-bookhero__sub{color:#fff}   /* 影も靄も使わない：差の合成で、紺の上では白、紙の上では紙の色の反対（濃紺）に自動で変わる。合成は本（.rf）と同じ重なりの中で */
.lm-bookhero__copy .lm-beacon{margin-bottom:var(--space-4)}.lm-bookhero__sub{margin-top:var(--space-3)}
.rf{position:absolute;right:-140px;bottom:-190px;width:var(--rfw);aspect-ratio:10/7;transform:rotate(-9deg);transform-origin:center;pointer-events:none;z-index:1}   /* 影は canvas 側で描く（CSS の filter は文字の差の合成を止めてしまう）*/
.rf__cv{position:absolute;pointer-events:none}
#rfsrc{position:absolute;left:0;top:0;width:calc(var(--rfw) / 2);height:calc(var(--rfw) * .7);visibility:hidden;pointer-events:none;z-index:0}
.rf__face{position:absolute;inset:0}
.rf__pg{position:absolute;left:0;top:0;width:220%;height:130%}   /* 情景は広めに描き、ページごとに違う場所を切り取る */
.rf__pg--page{width:100%;height:100%}   /* ページごとの元絵（香里園・八幡・RE.lien）は切り取らず、ページ大でそのまま */
.rfpg .lm-label{margin:0;font-size:12px;position:absolute;left:28px;top:calc(52% - 30px)}
.rfpg__line--sp{display:none}
.rfpg__line{position:absolute;left:28px;right:28px;top:50%;margin:0;font-size:var(--fs,20px);line-height:1.6;letter-spacing:.03em;font-weight:400;color:inherit;white-space:nowrap}
.rfpg__num{position:absolute;left:40px;bottom:28px;font-size:11px;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.rfpg--cover{color:var(--on-sea)}
.rf__wordmark{font-size:22px;font-weight:500;letter-spacing:.24em}
/* ---- 事業所の段：章の本 ---- */
.book{width:960px;max-width:100%;margin:0 auto}
.bk{position:relative;width:100%;aspect-ratio:10/7;user-select:none;touch-action:pan-y;cursor:grab;--T:18px;--tl:0;--tr:1}
.bk__cv{position:absolute;pointer-events:none;z-index:5;will-change:transform,opacity;transition:opacity .16s linear}
.bk__base{position:absolute;pointer-events:none;z-index:0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.22))}
.bk__pages{position:absolute;inset:0;clip-path:polygon(0.00% 0.00%,2.08% 0.01%,4.17% 0.02%,6.25% 0.05%,8.33% 0.10%,10.42% 0.15%,12.50% 0.22%,14.58% 0.30%,16.67% 0.39%,18.75% 0.49%,20.83% 0.61%,22.92% 0.74%,25.00% 0.88%,27.08% 1.03%,29.17% 1.19%,31.25% 1.37%,33.33% 1.56%,35.42% 1.76%,37.50% 1.97%,39.58% 2.19%,41.67% 2.43%,43.75% 2.68%,45.83% 2.94%,47.92% 3.21%,50.00% 3.50%,52.08% 3.21%,54.17% 2.94%,56.25% 2.68%,58.33% 2.43%,60.42% 2.19%,62.50% 1.97%,64.58% 1.76%,66.67% 1.56%,68.75% 1.37%,70.83% 1.19%,72.92% 1.03%,75.00% 0.88%,77.08% 0.74%,79.17% 0.61%,81.25% 0.49%,83.33% 0.39%,85.42% 0.30%,87.50% 0.22%,89.58% 0.15%,91.67% 0.10%,93.75% 0.05%,95.83% 0.02%,97.92% 0.01%,100.00% 0.00%,100.00% 94.50%,97.92% 94.51%,95.83% 94.54%,93.75% 94.59%,91.67% 94.65%,89.58% 94.74%,87.50% 94.84%,85.42% 94.97%,83.33% 95.11%,81.25% 95.27%,79.17% 95.45%,77.08% 95.66%,75.00% 95.88%,72.92% 96.11%,70.83% 96.37%,68.75% 96.65%,66.67% 96.94%,64.58% 97.26%,62.50% 97.59%,60.42% 97.95%,58.33% 98.32%,56.25% 98.71%,54.17% 99.12%,52.08% 99.55%,50.00% 100.00%,47.92% 99.55%,45.83% 99.12%,43.75% 98.71%,41.67% 98.32%,39.58% 97.95%,37.50% 97.59%,35.42% 97.26%,33.33% 96.94%,31.25% 96.65%,29.17% 96.37%,27.08% 96.11%,25.00% 95.88%,22.92% 95.66%,20.83% 95.45%,18.75% 95.27%,16.67% 95.11%,14.58% 94.97%,12.50% 94.84%,10.42% 94.74%,8.33% 94.65%,6.25% 94.59%,4.17% 94.54%,2.08% 94.51%,0.00% 94.50%);z-index:1}
.bk__sp{position:absolute;inset:0;overflow:hidden}
.bk__sp::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:28%;margin-left:-14%;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.05) 35%,rgba(0,0,0,.20) 50%,rgba(0,0,0,.05) 65%,rgba(0,0,0,0));z-index:1;pointer-events:none}
.pg--cover{display:flex;align-items:center;justify-content:center}
.cover__mark{writing-mode:vertical-rl;margin:0;font-size:24px;font-weight:400;letter-spacing:.36em;line-height:1}
.cover__rule{position:absolute;left:50%;bottom:40px;width:1px;height:28px;background:var(--light-on-sea)}
.toc{list-style:none;margin:0;padding:0;font-size:14px;letter-spacing:.1em}
.toc li{border-bottom:1px solid var(--rule-sea)}
.toc a{display:flex;gap:16px;align-items:baseline;padding:14px 0;color:inherit;text-decoration:none}
.toc a:hover{color:var(--light-on-sea)}
.toc__num{font-size:11px;letter-spacing:.2em;color:var(--on-sea-muted);min-width:3.5em;white-space:nowrap}
.book__nav{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-3);font-size:14px;letter-spacing:.14em;color:var(--ink-muted)}   /* 2026-09-24：押しやすく（12px/8px → 14px/44px 高） */
.book__nav button{font:inherit;color:inherit;background:none;border:0;padding:12px 0;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:14px}
.book__nav .lm-arrow{width:36px}
.book__nav button:hover{color:var(--ink)}.book__prev .lm-arrow{transform:scaleX(-1)}
.book.at-start .book__prev,.book.at-end .book__next{visibility:hidden}
.book__title{color:var(--ink)}
/* ---- book: ページの中の文字色（--muted / --link は各ページの inline style が持つ） ---- */
.pg .lm-label{color:var(--muted,var(--on-sea-muted))}
.pg .lm-link{color:var(--link,var(--light-ink));font-size:15px;padding:6px 0;margin-top:-6px}   /* 2026-09-24：押しやすく */
.lm-bookhero .lm-header{position:relative;z-index:3}
.lm-bookhero__copy .lm-display-sp{color:#fff}
@media (max-width:900px){
  .lm-bookhero{--rfw:96vw;min-height:0;padding-bottom:calc(96vw * .7 + 8vw)}.lm-bookhero__copy{padding-top:var(--space-4);padding-bottom:var(--space-4)}.rf{left:auto;right:0;bottom:7vw;transform:rotate(-6deg);transform-origin:center}#rfsrc .pg{padding:14px}.rfpg .lm-label{left:14px;top:calc(58% - 20px);font-size:10px}.rfpg__line--pc{display:none}.rfpg__line--sp{display:block;left:14px;right:14px;top:58%;font-size:var(--fss,13px);line-height:1.6;font-weight:400}.cover__mark{font-size:15px;letter-spacing:.3em}.cover__rule{bottom:24px;height:20px}   /* SP：本は文面の下に、見開きが両方見える幅で。文言は読点ごとに改行して 15px */.rfpg__num{display:none}
  .bk{aspect-ratio:1/1.1;--T:11px}.toc{font-size:11px}.toc__num{min-width:2.8em;font-size:10px}.toc a{gap:8px;padding:8px 0;white-space:nowrap}.bk__sp>.pg{padding:18px;padding-bottom:calc(18px + 7%)}.page__name{font-size:15px}.page__line{font-size:12px;line-height:1.8}.page__wordmark{font-size:14px;letter-spacing:.18em}.toc{font-size:12px}.toc a{padding:8px 0}.page__more{margin-top:16px}.pg .lm-link{font-size:12px}
  /* SP の本：文字と余白を幅に比例させる（390px で確定値と同じ。360px の端末で右ページの4行目がページからはみ出したため） */
  #rfsrc .pg{padding:calc(14 * 100vw / 390)}
  .rfpg .lm-label{left:calc(14 * 100vw / 390);font-size:calc(10 * 100vw / 390)}
  .rfpg__line--sp{left:calc(14 * 100vw / 390);right:calc(14 * 100vw / 390);font-size:calc(var(--fssn,13) * 0.92 * 100vw / 390);font-weight:300;letter-spacing:.06em;line-height:1.75}   /* 2026-09-24：ヒーローの見出しと同じ細さ・字間に（400 でも「ダサい」。字も 8% 小さく） */
  .cover__mark{font-size:calc(15 * 100vw / 390)}
  .bk{font-size:calc(100vw / 39)}   /* 390px で 10px。以下は em で */
  .bk__sp>.pg{padding:1.8em;padding-bottom:calc(1.8em + 7%)}
  .bk .lm-label{font-size:1.1em}.page__name{font-size:1.5em}.page__line{font-size:1.2em;line-height:1.8}.page__more{margin-top:1.6em}
  .toc{font-size:1.2em}.toc__num{font-size:1em;min-width:2.8em}.toc a{gap:.8em;padding:.8em 0}.pg .lm-link{font-size:1.2em}
}