@charset "UTF-8";
/* ============================================================
   ミハラシ プロトタイプ  style.css  ── 第2稿
   準拠：MIHARASHI_WEB/design/WEB_DESIGN.md
   原則：枠線・影・角丸を使わない／写真の上に文字を置かない／
         色でカテゴリを分けない／広告枠を持たない／
         1行28〜32字（PC）／行間2.0／リンクは常時下線

   第2稿の方針：静けさ70／発見30。余白は保ちつつ「何もない画面」を作らない。
   ============================================================ */

/* ---------- トークン ---------- */
:root{
  --bg:#F5F5F3;
  --surface:#FFFFFF;
  --text:#22262B;
  --text2:#5B6169;
  --border:#DCDCD8;
  --border-strong:#C4C5C0;
  --brand:#28414D;
  --tint:#E7ECEE;
  --accent:#9A4A38;
  --hover:#1E323B;
  --surface-hover:#EFEFEC;

  --serif:"Zen Old Mincho","Noto Serif JP","Yu Mincho","YuMincho",serif;
  --sans:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;

  --max:1240px;
  --grid:1120px;
  --read:600px;
  --media:880px;
  --pad:40px;
  --sec:96px;        /* 第2稿：104→96。間は残しつつ空白だけの画面を作らない */
  --hd:72px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:18px; font-weight:400;
  line-height:2.0; letter-spacing:.04em; text-align:left;
}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd{margin:0}
dt{margin:0}
button{font:inherit;color:inherit}
blockquote{margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;
  transition:color .15s ease-out,text-decoration-thickness .15s ease-out}
a:hover{color:var(--brand);text-decoration-thickness:2px}

.vh{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:absolute;left:-9999px;top:0;z-index:99;background:var(--brand);color:#fff;padding:14px 22px;text-decoration:none}
.skip:focus{left:0}

/* ============================================================
   写真の仕上げ（第3稿：確定した実写素材）
   17点は同一トーンで撮影・生成されているため、CSS側では一切加工しない。
   セピア／彩度低下／blur／mix-blend-mode／暗いオーバーレイはすべて使わない。
   .ph は読み込み前の地色（レイアウトの飛びを防ぐ）とトリミングの枠だけを担う。
   ============================================================ */
.ph{position:relative;background:#E9E9E5;overflow:hidden}
.ph::after{content:none}
.ph img{filter:none}

/* ---------- 共通パーツ ---------- */
.eyebrow{font-size:13px;font-weight:700;line-height:1.6;letter-spacing:.18em;color:var(--brand)}
.meta{font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.06em;color:var(--text2)}

.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 32px;border-radius:2px;
  font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:.06em;line-height:1;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--hover);color:#fff}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn--ghost:hover{background:var(--tint);color:var(--hover)}

.tlink{display:inline-block;font-size:16px;letter-spacing:.04em;color:var(--brand)}
.tlink--inline{margin-top:18px;font-weight:500}

.sechead{max-width:var(--grid);margin:0 auto 36px}
.sechead--tight{margin-bottom:26px}
.sechead__en{font-family:var(--sans);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.22em;color:var(--brand)}
.sechead__ja{font-family:var(--serif);font-size:27px;font-weight:500;line-height:1.5;letter-spacing:.08em;color:var(--text);margin-top:10px}
.sechead__lead{font-size:16px;line-height:1.9;color:var(--text2);margin-top:12px;max-width:var(--read)}

.sec{padding:0 var(--pad);margin:var(--sec) auto 0;max-width:var(--max)}
.sec__foot{max-width:var(--grid);margin:32px auto 0;display:flex;gap:28px;align-items:center;flex-wrap:wrap}

/* カード共通 */
.cardlink{display:block;text-decoration:none;background:transparent;padding:12px;margin:-12px;
  transition:background-color .15s ease-out}
.cardlink:hover{background:var(--surface-hover);color:var(--text)}
.cardlink img{width:100%;transition:opacity .15s ease-out}
.cardlink:hover img{opacity:.93}
.cardlink .meta{margin-top:16px}
.card__title{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.6;letter-spacing:.02em;margin-top:14px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--border)}
.cardlink:hover .card__title{color:var(--brand);text-decoration-thickness:2px;text-decoration-color:currentColor}

/* 小さな記事リスト（密度を上げる用） */
.mini{max-width:var(--grid);margin:32px auto 0;border-top:1px solid var(--border)}
.mini li{display:flex;align-items:baseline;gap:20px;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--border)}
.mini a{font-family:var(--serif);font-size:19px;line-height:1.6}
.mini span{flex:0 0 auto;font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--text2)}
.mini--quiet a{font-size:18px}

/* ============================================================
   ヘッダー
   ============================================================ */
.hd{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border)}
.hd__inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:var(--hd);
  display:flex;align-items:center;gap:40px}
.hd__logo{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:.18em;line-height:1;text-decoration:none;white-space:nowrap}
.hd__logo:hover{color:var(--brand)}
.hd__nav{display:flex;gap:30px;margin-right:auto}
.hd__nav a{font-size:16px;font-weight:500;letter-spacing:.08em;line-height:1;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.hd__nav a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.hd__tools{display:flex;align-items:center;gap:20px;margin-left:auto}
.hd__btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:8px 4px;cursor:pointer;
  font-size:16px;font-weight:500;letter-spacing:.08em}
.hd__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hd__btn:hover{color:var(--brand)}
.hd__btn--menu{display:none}

.panel{border-top:1px solid var(--border);background:var(--surface)}
.srch{max-width:var(--max);margin:0 auto;padding:28px var(--pad) 32px}
.srch__label{display:block;font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--text2);margin-bottom:10px}
.srch__row{display:flex;gap:12px;max-width:640px}
.srch__input{flex:1;height:56px;padding:0 16px;font-family:var(--sans);font-size:17px;
  border:1px solid var(--border-strong);border-radius:2px;background:#fff;color:var(--text)}
.srch__btn{flex:0 0 auto}
.srch__note{font-size:13px;line-height:1.8;color:var(--text2);margin-top:12px}

/* SPメニュー */
.menu{max-width:var(--max);margin:0 auto;padding:24px var(--pad) 32px}
.menu__ttl{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--brand);margin-top:8px}
.menu__list{margin-top:10px;border-top:1px solid var(--border)}
.menu__list li{border-bottom:1px solid var(--border);padding:14px 0;min-height:56px;display:flex;flex-direction:column;justify-content:center}
.menu__list a{font-family:var(--serif);font-size:20px;text-decoration:none}
.menu__list a:hover{color:var(--brand);text-decoration:underline}
.menu__list span{font-size:13px;color:var(--text2);line-height:1.7;margin-top:2px}
.menu__list--plain li{min-height:52px}
.menu__list--plain a{font-family:var(--sans);font-size:17px}

/* ============================================================
   1. ファーストビュー（第2稿：非対称の左右組み）
   ============================================================ */
.fv{max-width:var(--max);margin:0 auto;padding:44px var(--pad) 0}
.fv__grid{max-width:var(--grid);margin:0 auto;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:64px;align-items:center}
.fv__fig img{width:100%;aspect-ratio:3/4;object-fit:cover}
.fv__tag{font-size:14px;line-height:1.8;letter-spacing:.14em;color:var(--text2);
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--border)}
.fv__title{font-family:var(--serif);font-size:42px;font-weight:500;line-height:1.5;letter-spacing:.02em;margin-top:14px}
.fv__title a{text-decoration:none}
.fv__title a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.fv__lead{max-width:var(--read);margin-top:20px;font-size:17px;line-height:1.95;letter-spacing:.03em;color:var(--text)}
.fv__body .meta{margin-top:20px}

/* 人 × モノ × 時間 */
.facts{display:flex;gap:40px;margin-top:28px;padding:20px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.facts dt{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--text2);line-height:1.4}
.facts dd{font-family:var(--serif);font-size:20px;line-height:1.4;margin-top:6px}
.facts__yr{font-family:var(--sans)!important;font-size:34px!important;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.1!important;color:var(--brand)}
.facts__yr i{font-style:normal;font-size:14px;margin-left:3px;color:var(--text2)}

.fv__scroll{max-width:var(--grid);margin:44px auto 0;font-size:13px;letter-spacing:.14em;color:var(--text2);
  display:flex;align-items:center;gap:16px}
.fv__scroll::after{content:"";flex:1;height:1px;background:var(--border-strong)}

/* ============================================================
   2. 偏愛の索引（第2稿：年数を主役に、一言を追加）
   ============================================================ */
.idx{max-width:var(--grid);margin:0 auto;border-top:1px solid var(--border-strong)}
/* 列順：写真 → 年数 → 尺度バー → モノ → 人 → 一言 */
.idx__row{display:grid;
  grid-template-columns:112px 84px 76px 128px 168px minmax(0,1fr);
  gap:22px;align-items:center;
  padding:14px 8px;min-height:92px;border-bottom:1px solid var(--border);
  text-decoration:none;transition:background-color .15s ease-out}
.idx__row:hover{background:var(--surface-hover);color:var(--text)}
.idx__yr{font-size:30px;font-weight:500;line-height:1.2;letter-spacing:0;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--brand)}
.idx__yr i{font-style:normal;font-size:13px;margin-left:2px;color:var(--text2)}
/* 年数を視覚的に記憶させる細いバー（装飾ではなく尺度） */
.idx__bar{display:block;height:1px;background:var(--border)}
.idx__bar b{display:block;height:3px;margin-top:-1px;background:var(--brand);opacity:.55}
.idx__ob{font-family:var(--serif);font-size:21px;line-height:1.5;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--border)}
.idx__row:hover .idx__ob{color:var(--brand);text-decoration-thickness:2px;text-decoration-color:currentColor}
.idx__pr{font-size:15px;color:var(--text2);line-height:1.6}
.idx__wd{font-size:15px;color:var(--text);line-height:1.8;opacity:.86}
.idx__im{justify-self:start}
.idx__im img{width:112px;height:76px;object-fit:cover;background:#E9E9E5;
  transition:opacity .15s ease-out}
.idx__row:hover .idx__im img{opacity:.93}
/* 被写体が寄っている数点だけ、切り位置を個別に調整する */
.idx__row:nth-child(1) .idx__im img{object-position:50% 46%}  /* IMG-02 まな板（縦位置） */
.idx__row:nth-child(6) .idx__im img{object-position:52% 58%}  /* IMG-07 マグカップ */
.idx__row:nth-child(7) .idx__im img{object-position:46% 42%}  /* IMG-08 フライパン */

/* ============================================================
   3. カルチャー：写真 ＋ 短い問い
   ============================================================ */
/* 写真＋問い一行のみ。説明文を持たないことで偏愛（表）と明確に分ける。
   3枚を水平に揃えず、中央だけ落として均一カードの並びに見せない。 */
.qgrid{max-width:var(--grid);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;align-items:start}
.q--drop{margin-top:56px}
.q figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.q__no{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--brand)}
.q__title{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.65;letter-spacing:.02em;margin-top:8px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--border)}
.cardlink:hover .q__title{color:var(--brand);text-decoration-thickness:2px;text-decoration-color:currentColor}

/* ============================================================
   4. ブーム：あの頃 ／ いま
   ============================================================ */
.cmp{max-width:var(--grid);margin:0 auto}
.cmp__subject{max-width:360px;margin:0 auto;text-align:center;
  font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:.1em;line-height:1.4;
  padding:14px 0;border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
.cmp__pair{margin-top:32px;display:grid;grid-template-columns:1fr 1px 1fr;gap:0 44px}
.cmp__pair::before{content:"";grid-column:2;width:1px;background:var(--border);justify-self:center}
.cmp__side:nth-of-type(1){grid-column:1}
.cmp__side:nth-of-type(2){grid-column:3}
.cmp__when{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--brand);margin-bottom:14px}
.cmp__side figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cmp__side:nth-of-type(1) figure img{object-position:50% 56%}  /* IMG-13 手元とノートを残す */
.cmp__side:nth-of-type(2) figure img{object-position:54% 50%}  /* IMG-14 箱と手元を残す */
.cmp__note{max-width:var(--read);margin:30px auto 0;text-align:center;font-size:16px;line-height:1.9;color:var(--text2)}

/* ============================================================
   5. 人生ストーリー（第3稿）
   1本の記事を、同じ店・同じ人物の3枚で時系列に追う「組写真」形式。
   他カテゴリーが「並列」なのに対し、ここだけが「順序」を持つ。
   ============================================================ */
.story{max-width:var(--grid);margin:0 auto}
.story__head{max-width:var(--media)}
.story__title{font-family:var(--serif);font-size:34px;font-weight:500;line-height:1.5;letter-spacing:.02em;margin-top:10px}
.story__title a{text-decoration:none}
.story__title a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.story__lead{max-width:var(--read);margin-top:20px;font-size:17px;line-height:1.95;letter-spacing:.03em}

.seq{margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;align-items:start}
.seq__item{position:relative;padding-top:34px}
/* 時刻の高さに1本の横罫を通し、3枚が「同じ朝」であることを構造で示す */
.seq__item::before{content:"";position:absolute;top:11px;left:0;right:-36px;height:1px;background:var(--border-strong)}
.seq__item:last-child::before{right:0}
.seq__t{position:absolute;top:0;left:0;background:var(--bg);padding-right:14px;
  font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1.6}
.seq__fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.seq__item:nth-child(1) .seq__fig img{object-position:56% 50%}  /* IMG-15 引き戸と店主を残す */
.seq__item:nth-child(2) .seq__fig img{object-position:50% 54%}  /* IMG-16 生地と手元を残す */
.seq__item:nth-child(3) .seq__fig img{object-position:50% 52%}  /* IMG-17 タブレットを残す */
.seq__c{margin-top:14px;font-size:15px;line-height:1.85;color:var(--text2)}
.story__more{margin-top:34px}

/* ============================================================
   6. 今月の問い（帯を弱め、編集の流れの一部に見せる）
   ============================================================ */
.ask{max-width:var(--grid);margin:0 auto;
  border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);padding:44px 0 48px}
.ask__bridge{font-family:var(--serif);font-size:19px;line-height:1.8;color:var(--text2);margin-bottom:26px;max-width:var(--read)}
.ask__q{font-family:var(--serif);font-size:30px;font-weight:500;line-height:1.6;letter-spacing:.02em;margin-top:10px;max-width:22em}
.ask__form{margin-top:28px}
.ask__form fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:0 40px}
.opt{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 4px;cursor:pointer;
  border-bottom:1px solid var(--border-strong);font-size:17px}
.opt input{width:22px;height:22px;accent-color:var(--brand);cursor:pointer}
.ask__foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:30px}
.ask__meta{font-size:14px;letter-spacing:.04em;color:var(--text2)}
.due{color:var(--accent);font-weight:500}
.ask__done{margin-top:22px;font-size:17px;font-weight:500;color:var(--brand)}
.ask__done.is-error{color:var(--accent)}
.ask__done.is-error::before{content:"！　";font-weight:700}
.ask__prev{margin-top:26px}

/* ============================================================
   7. 連載
   ============================================================ */
.serwrap{max-width:var(--grid);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.ser{border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);padding:30px 0 34px}
.ser__title{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.5;letter-spacing:.02em}
.ser__title a{text-decoration:none}
.ser__title a:hover{color:var(--brand);text-decoration:underline;text-decoration-thickness:2px}
.ser__status{font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--text2);margin-top:10px}
.ser__list{margin:22px 0 26px;border-top:1px solid var(--border)}
.ser__list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--border)}
.ser__list span{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--text2);font-variant-numeric:tabular-nums}
.ser__list a{font-size:17px;line-height:1.7}

/* ============================================================
   8. ミハラシについて
   ============================================================ */
/* 確定17枚に編集部・書き手のカットは含まれないため、この節は写真を持たない。
   仮画像を残すより、文字だけで構成するほうが設計思想に合う。 */
.about{max-width:var(--grid);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.about__p{max-width:var(--read);font-size:18px;line-height:2.0;letter-spacing:.04em}
.about__p + .about__p{margin-top:1.6em}
.about__p--strong{font-weight:500;color:var(--brand)}
.about__side{border-top:1px solid var(--border-strong);padding-top:22px}
.about__dl{display:grid;grid-template-columns:64px minmax(0,1fr);row-gap:14px;column-gap:16px;margin-bottom:22px}
.about__dl dt{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--text2);line-height:1.9}
.about__dl dd{margin:0;font-size:15px;line-height:1.9}

/* ============================================================
   9. LINE（編集の続き。広告枠に見せない）
   ============================================================ */
.line{max-width:760px;margin:0 auto;
  border-top:1px solid var(--border-strong);padding:44px 0 0}
.line__label{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--brand)}
.line__h{font-family:var(--serif);font-size:29px;font-weight:500;line-height:1.6;letter-spacing:.02em;margin-top:12px}
.line__sample{margin:28px 0 0;background:var(--tint);padding:30px 34px}
.line__sample p{font-size:17px;line-height:1.95;letter-spacing:.03em}
.line__sample cite{display:block;margin-top:16px;font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--text2)}
.line__p{margin-top:24px;font-size:17px;line-height:1.9}
.line__cta{margin-top:24px}
.line__note{margin-top:14px;font-size:13px;color:var(--text2)}

/* ============================================================
   フッター
   ============================================================ */
.ft{margin-top:var(--sec);border-top:1px solid var(--border);background:var(--bg)}
.ft__inner{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 64px}
.ft__logo{font-family:var(--serif);font-size:22px;letter-spacing:.18em}
.ft__cols{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:40px;margin-top:36px}
.ft__col{display:flex;flex-direction:column;gap:12px}
.ft__ttl{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--brand);margin-bottom:4px}
.ft__col a{font-size:16px;line-height:1.6}
.ft__contact{margin-top:40px;font-size:14px;color:var(--text2)}
.ft__legal{margin-top:12px;font-size:14px}
.ft__cr{margin-top:26px;font-size:13px;letter-spacing:.1em;color:var(--text2)}
.ft__proto{margin-top:8px;font-size:13px;color:var(--text2)}

/* ============================================================
   Tablet  768–1023
   ============================================================ */
@media (max-width:1023px){
  :root{--pad:32px;--sec:80px;--hd:64px}
  .hd__nav{gap:22px}
  .hd__nav a{font-size:15px;letter-spacing:.04em}
  .fv__grid{grid-template-columns:300px minmax(0,1fr);gap:36px}
  .fv__title{font-size:32px}
  .facts{gap:28px}
  .qgrid{grid-template-columns:repeat(2,1fr);gap:36px 28px}
  .q--drop{margin-top:0}
  .story__title{font-size:28px}
  .seq{gap:0 24px}
  .seq__item::before{right:-24px}
  .about{grid-template-columns:minmax(0,1fr) 240px;gap:36px}
  .serwrap{gap:36px}
  .idx__row{grid-template-columns:88px 72px 56px 104px 140px minmax(0,1fr);gap:16px;min-height:78px}
  .idx__im img{width:88px;height:60px}
}

/* ============================================================
   Smartphone  <768
   ============================================================ */
@media (max-width:767px){
  :root{--pad:20px;--sec:64px;--hd:56px}
  body{font-size:17px;line-height:1.95;letter-spacing:.03em}

  /* ヘッダー：ロゴ／さがす／メニュー のみ。カテゴリーはメニュー内 */
  .hd__inner{gap:12px;justify-content:space-between}
  .hd__logo{font-size:20px;letter-spacing:.16em}
  .hd__nav{display:none}
  .hd__tools{gap:14px}
  .hd__btn{font-size:14px;min-height:44px;gap:6px}
  .hd__btn svg{width:19px;height:19px}
  .hd__btn--menu{display:inline-flex}
  .srch{padding:20px var(--pad) 24px}
  .srch__row{flex-direction:column}
  .srch__btn{width:100%}
  .menu{padding:18px var(--pad) 26px}

  .sechead{margin-bottom:26px}
  .sechead__en{font-size:11px;letter-spacing:.2em}
  .sechead__ja{font-size:22px;letter-spacing:.06em;margin-top:8px}
  .sechead__lead{font-size:16px;margin-top:12px}

  /* FV：写真 → テキストの縦組み。写真はフルブリード */
  .fv{padding:24px 0 0}
  .fv__grid{grid-template-columns:1fr;gap:0}
  .fv__fig{margin:0}  /* SPでは .fv 側に左右paddingが無いため、負マージンは不要（付けると画面幅+40pxになり横スクロールが出る） */
  /* IMG-01は3:4。SPでは1:1に切って茶碗と卓を残し、タイトルを画面内に入れる */
  .fv__fig img{aspect-ratio:1/1;object-fit:cover;object-position:50% 64%}
  .fv__body{padding:0 var(--pad);margin-top:26px}
  .fv__tag{padding-bottom:18px;margin-bottom:20px;font-size:13px}
  .fv__title{font-size:28px;line-height:1.55}
  .fv__lead{font-size:16px;margin-top:16px}
  .facts{gap:0;margin-top:24px;padding:16px 0;display:grid;grid-template-columns:auto 1fr;row-gap:10px;column-gap:20px}
  .facts div{display:contents}
  .facts dt{align-self:center}
  .facts dd{margin-top:0;font-size:18px;align-self:center}
  .facts__yr{font-size:28px!important}
  .fv__scroll{margin:32px var(--pad) 0;font-size:12px}

  /* 索引：左に写真、右に 年数＋バー／モノ／人／一言 を4行で積む */
  .idx__row{grid-template-columns:84px auto minmax(0,1fr);gap:4px 14px;padding:16px 2px;min-height:56px;align-items:start}
  .idx__im{grid-row:1/5;grid-column:1;align-self:stretch;display:block}
  .idx__im img{width:84px;height:100%;min-height:84px;object-fit:cover}
  .idx__yr{grid-row:1;grid-column:2;font-size:26px}
  .idx__bar{grid-row:1;grid-column:3;align-self:center;margin-top:14px}
  .idx__ob{grid-row:2;grid-column:2/-1;font-size:19px}
  .idx__pr{grid-row:3;grid-column:2/-1;font-size:14px}
  .idx__wd{grid-row:4;grid-column:2/-1;font-size:14px;line-height:1.75}

  .sec__foot{gap:16px;flex-direction:column;align-items:flex-start}
  .sec__foot .btn{width:100%}

  .qgrid{grid-template-columns:1fr;gap:40px}
  .q--drop{margin-top:0}
  .q__title{font-size:20px}

  .cmp__subject{font-size:20px;max-width:none;padding:12px 0}
  .cmp__pair{grid-template-columns:1fr;gap:32px;margin-top:24px}
  .cmp__pair::before{display:none}
  .cmp__side:nth-of-type(2){grid-column:1}
  .cmp__note{font-size:15px;text-align:left;margin-top:24px}

  .mini li{flex-direction:column;gap:6px;align-items:flex-start;padding:14px 0}
  .mini a{font-size:18px}

  /* 組写真は縦に積み、時刻の横罫を各カットの上に残して流れを保つ */
  .story__title{font-size:25px}
  .story__lead{font-size:16px;margin-top:16px}
  .seq{grid-template-columns:1fr;gap:30px;margin-top:34px}
  .seq__item{padding-top:30px}
  .seq__item::before{right:0}
  .seq__t{font-size:13px}
  .seq__fig img{aspect-ratio:4/3}
  .seq__c{font-size:15px;margin-top:12px}
  .story__more{margin-top:26px}

  .ask{padding:34px 0 38px}
  .ask__bridge{font-size:17px;margin-bottom:20px}
  .ask__q{font-size:23px}
  .ask__form fieldset{grid-template-columns:1fr}
  .ask__foot{gap:14px;align-items:flex-start}
  .ask__foot .btn{width:100%}

  .serwrap{grid-template-columns:1fr;gap:32px}
  .ser__title{font-size:22px}
  .ser__list a{font-size:16px}
  .ser .btn{width:100%}

  .about{grid-template-columns:1fr;gap:28px}
  .about__p{font-size:17px;line-height:1.95}
  .about__side{padding-top:20px}

  .line{padding:34px 0 0}
  .line__h{font-size:23px}
  .line__sample{padding:22px 20px}
  .line__sample p{font-size:16px}
  .line__p{font-size:16px}
  .line .btn{width:100%}

  .ft__inner{padding:44px var(--pad) 52px}
  .ft__cols{grid-template-columns:1fr;gap:26px}
  .ft__col a{min-height:44px;display:flex;align-items:center}
}

/* ============================================================
   モーション：hover と panel の開閉のみ。スクロール連動は持たない
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}