@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════
   page-about.css —「大切にしていること」のページ（/about/）専用
   色・字組み・共通部品は theme.css の変数を参照しています。

   見せ場の動きは、固定区画に main.js が渡す 5 つの値で決まります。
     --rise    詩句のせり上がり（0 下 → 1 定位置）
     --reveal  導入文の出現（0 隠れ → 1 全出）
     --focus   写真の沈み（0 くっきり → 1 ぼけて暗い）
     --cue     下向きの合図の濃さ（先頭でだけ出す）
     --out     固定が解けるときの引き上げ（0 → 1）
   JS が動かないときは、下の既定値（読める最終状態）のまま静止します。
   ══════════════════════════════════════════════════════════════════════ */

.about-page{padding-top:var(--topH)}
.ab-sec{scroll-margin-top:0}

/* ── 冒頭 ────────────────────────────────────────────────────────── */
.ab-head{padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px);background:var(--kurocha)}
.ab-head .copy{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(24px,3.4vw,42px);letter-spacing:.02em;line-height:1.5}
.ab-head .sub-h{margin-top:9px;font-family:var(--f-body);font-weight:400;font-size:12.5px;
 letter-spacing:.14em;line-height:1.9;color:var(--moji-2)}
.ab-lead-in{max-width:var(--mw);margin-inline:auto;padding:0 clamp(20px,3.4vw,52px);
 margin-top:clamp(22px,3vw,34px);font-size:14px;line-height:2.15;color:var(--hai)}

/* 四つへの入口 */
.ab-nav{max-width:var(--mw);margin-inline:auto;padding:0 clamp(20px,3.4vw,52px);
 margin-top:clamp(32px,4.4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.ab-nav a{position:relative;display:flex;flex-direction:column;gap:5px;
 padding:20px 44px 18px 20px;background:var(--kogecha);border:1px solid var(--kobicha);
 transition:border-color var(--slow) var(--ease),background var(--slow) var(--ease),transform var(--slow) var(--ease)}
.ab-nav a:hover{border-color:var(--kogane);background:var(--kurocha);transform:translateY(-2px)}
.ab-nav-no{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.28em;color:var(--moji-2)}
.ab-nav-jp{font-family:var(--f-disp);font-weight:500;font-size:clamp(15px,1.6vw,18px);letter-spacing:.08em;white-space:nowrap}
.ab-nav-en{font-family:var(--f-lat);font-size:11px;letter-spacing:.22em;color:var(--moji-2)}
.ab-nav-mark{position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;
 border-right:1px solid var(--kogane);border-bottom:1px solid var(--kogane);
 transform:rotate(45deg);transition:transform .5s var(--ease)}
.ab-nav a:hover .ab-nav-mark{transform:rotate(45deg) translate(3px,3px)}
@media (max-width:900px){.ab-nav{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ab-nav{grid-template-columns:1fr}}

/* ── 見せ場 ──────────────────────────────────────────────────────
   高さを2画面ぶん取り、その間だけ画面に貼りつけて写真を見せる。
   トップの帯が開いたときと同じ見え方から始める（膜の濃さ・写真をそろえる）。
   ────────────────────────────────────────────────────────────── */
.ab-visual{height:300svh;position:relative}
.ab-visual-fix{
 --rise:1;--reveal:1;--focus:.55;--cue:0;--out:0;
 position:sticky;top:0;height:100svh;overflow:hidden;background:var(--kurocha)}

.ab-visual-fix > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--imgpos,center 38%);
 will-change:transform,filter;backface-visibility:hidden;
 transform:scale(calc(1.015 + var(--focus)*.018));
 filter:blur(calc(var(--focus)*2.6px)) brightness(calc(1 - var(--focus)*.2)) saturate(calc(1 - var(--focus)*.07))}

/* 文字が沈まないよう地を敷く。文字は左（札）と右（詩句・導入文）の両側に載るので、
   縦の中央帯を読める濃さに引き上げ、横も左右の両端に地を残す（中央の被写体は見せる）。
   ※最も暗い写真（真心＝撮影者の黒衣）でも本文4.5以上になるよう実測して決めた濃さ。 */
.ab-veil{position:absolute;inset:0;pointer-events:none;z-index:1;background:
 linear-gradient(to bottom,rgba(var(--ji-rgb),.70) 0,rgba(var(--ji-rgb),.40) 33%,rgba(var(--ji-rgb),.44) 62%,rgba(var(--ji-rgb),.84) 100%),
 linear-gradient(to right,rgba(var(--ji-rgb),.50) 0,rgba(var(--ji-rgb),.08) 44%,rgba(var(--ji-rgb),.42) 100%)}

.ab-fix-in{position:relative;z-index:2;max-width:var(--mw);margin-inline:auto;height:100svh;
 padding:0 clamp(20px,3.4vw,52px);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.55fr);
 align-items:center;gap:clamp(24px,4vw,72px)}

/* 左：分類の札。据えたまま、わずかに気配だけ足す */
.ab-plate{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1vw,14px);
 opacity:calc(var(--rise) * (1 - var(--out)))}
.ab-plate-no{font-family:var(--f-lat);font-size:10px;letter-spacing:.3em;color:var(--usukin)}
.ab-plate-no span{margin:0 .4em;color:var(--moji-3)}
.ab-plate-jp{font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(30px,3.8vw,54px);line-height:1;letter-spacing:.14em;color:var(--zouge)}
.ab-plate-en{font-family:var(--f-lat);font-size:11px;letter-spacing:.3em;color:var(--moji-3)}

/* 右：詩句（せり上がる）と導入文（あとから現れる） */
.ab-stage{position:relative}
.ab-say{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(17px,1.95vw,27px);line-height:1.95;letter-spacing:.12em;color:var(--zouge);
 will-change:transform,opacity;
 transform:translateY(calc((1 - var(--rise))*5.5vh - var(--out)*4vh));
 opacity:calc(var(--rise) * (1 - var(--out)))}
.ab-lead{margin:clamp(12px,1.5vw,20px) 0 0;max-width:34em;
 font-family:var(--f-body);font-size:13px;line-height:2.2;letter-spacing:.08em;color:var(--moji-2);
 will-change:transform,opacity;
 transform:translateY(calc((1 - var(--reveal))*14px - var(--out)*3vh));
 opacity:calc(var(--reveal) * (1 - var(--out)))}

/* 派手・暗部の写真でも文字を地から分離するための、ごく淡いクリームのにじみ。
   明るい面では見えず、暗い/雑多な面でだけ効いて読みやすくする。 */
.ab-plate-jp,.ab-say,.ab-lead{text-shadow:0 1px 12px rgba(var(--ji-rgb),.82),0 0 2px rgba(var(--ji-rgb),.55)}

/* 下向きの合図 */
.ab-cue{position:absolute;left:50%;bottom:clamp(26px,4.5vh,52px);width:1px;height:44px;
 margin-left:-.5px;background:linear-gradient(to bottom,transparent,rgba(190,151,72,.55));
 opacity:var(--cue);overflow:hidden}
.ab-cue i{position:absolute;left:0;top:-100%;width:100%;height:100%;
 background:linear-gradient(to bottom,transparent,var(--kogane));animation:ab-cue 3s var(--ease) infinite}
@keyframes ab-cue{0%{transform:translateY(0)}60%,100%{transform:translateY(220%)}}

@media (max-width:900px){
	.ab-visual{height:260svh}
	.ab-fix-in{grid-template-columns:1fr;align-content:center;gap:clamp(20px,5.5vw,34px)}
	.ab-plate{flex-direction:column;align-items:flex-start;gap:7px}
	.ab-plate-jp{font-size:clamp(28px,7.4vw,40px)}
	.ab-say{font-size:clamp(16px,4.1vw,21px);line-height:1.95;
	 transform:translateY(calc((1 - var(--rise))*4.5vh - var(--out)*2.5vh))}
	.ab-lead{font-size:12.5px;line-height:2.05}
}

/* スマホ縦長では横長写真が大きく切れるので、セクションごとに切り取り位置を調整する
   （config の about_values['pos_sp'] → インラインの --imgpos-sp）。 */
@media (max-width:760px){
	.ab-visual-fix > img{object-position:var(--imgpos-sp,var(--imgpos,center 34%))}
}

/* ── 内容。固定が解けたあとに続く ────────────────────────────────
   節ごとに地色を交互に置き、切れ目が分かるようにする。
   ────────────────────────────────────────────────────────────── */
.ab-body{background:var(--kurocha);border-top:1px solid var(--kobicha);padding:clamp(60px,8vw,110px) 0}
.ab-sec:nth-child(even) .ab-body{background:var(--kogecha)}
.ab-body-in{max-width:var(--mw);margin-inline:auto;padding:0 clamp(20px,3.4vw,52px);
 display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.ab-body-in{grid-template-columns:1fr;gap:36px}}

.ab-txt p{font-size:13.5px;line-height:2.2;color:var(--hai);margin-bottom:18px;max-width:38em}
.ab-txt p:first-child{font-size:15px;color:var(--moji-2);line-height:2.1}
.ab-txt p:last-child{margin-bottom:0}

/* 要点。罫だけで区切り、箱にはしない */
.ab-points{margin:0;border-top:1px solid var(--kobicha)}
.ab-points dt{padding-top:18px;font-family:var(--f-disp);font-weight:500;font-size:15px;letter-spacing:.08em;color:var(--kogane)}
.ab-points dd{margin:8px 0 0;padding-bottom:18px;border-bottom:1px solid var(--kobicha);
 font-size:12.5px;line-height:2;color:var(--hai)}

/* ── 末尾の導線 ─────────────────────────────────────────────────── */
.ab-end{background:var(--kurocha);border-top:1px solid var(--kobicha);padding:clamp(60px,8vw,110px) 0 clamp(70px,9vw,120px)}
.ab-end .copy{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(19px,2.1vw,26px);letter-spacing:.04em;line-height:1.58}
.ab-end-links{max-width:var(--mw);margin-inline:auto;padding:0 clamp(20px,3.4vw,52px);
 display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px)}
.ab-end-links a{font-size:12.5px;letter-spacing:.14em;color:var(--kogane)}
.ab-end-links .ar{color:var(--kogane)}

/* 動きを減らす設定のときは、写真を止め、文字は既定（読める状態）で静止させる */
@media (prefers-reduced-motion:reduce){
	.ab-cue{display:none}
	.ab-say,.ab-lead{transform:none}
}