@charset "UTF-8";
/* ===========================================================
   F案 下層ページ共通（kodawari / producer / gift）
   theme-f.css は変更しない。下層固有の型だけをここに追加する。
   型：平川屋「私たちのお豆腐づくり」「店舗案内」＝全幅写真＋小写真の重ね、
       縦組み長文は薄罫で区切る（.vp はテーマの定義を再利用）
   =========================================================== */

/* ---------- パンくず ---------- */
.crumb{font-family:var(--f-en);font-style:italic;font-size:.9rem;letter-spacing:.1em;color:var(--weak);padding:18px 0 0}
.crumb a{color:var(--kin-t)}
.crumb .jp{font-family:var(--f-sans);font-style:normal;font-size:.78rem;letter-spacing:.14em}
.crumb .sep{margin:0 .6rem;color:var(--line-2)}

/* ---------- ページ頭（お豆腐づくり型）：全幅写真＋左下に小写真、右に縦組みh1と縦組みリード ---------- */
.phead{padding:32px 0 140px}
.phead .field{width:100%;aspect-ratio:1622/1070;max-height:580px}
.phead .after{position:relative}
.phead .side{position:absolute;left:0;top:-120px;width:min(32%,420px);aspect-ratio:1358/1000;border:2px solid var(--white);border-left:0;z-index:2}
.phead .after .wrap-w{display:grid;grid-template-columns:1fr auto;gap:0 80px;align-items:start}
.phead .head{display:flex;flex-direction:row-reverse;gap:36px;align-items:flex-start;padding:72px 8px 0 0}
.phead .head .vh{height:auto}
.vlead{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--f-min);font-weight:500;font-size:1rem;letter-spacing:.14em;line-height:2.1;color:var(--sub);height:auto;font-feature-settings:"palt" 0;padding-top:.8rem}
.vlead .l{display:block}
.phead .after .wrap-w>.spacer{min-height:1px}

/* ---------- 物語ブロック（想い型）：写真＋縦組み見出し＋薄罫つき縦組み本文。flipで左右反転 ---------- */
.story .wrap-w{display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:0 72px;align-items:start}
.story .pics{position:relative}
.story .pic{aspect-ratio:4/5}
.story .pic2{position:absolute;right:-56px;bottom:-56px;width:46%;aspect-ratio:1358/1000;border:2px solid var(--white);z-index:2}
.story .txt{display:flex;flex-direction:row-reverse;gap:32px;align-items:flex-start;justify-content:flex-start;padding-top:16px}
.story .txt .vh{height:auto}
.story .txt .vp{height:auto}
.story .txt .lnk.v{margin-top:auto;align-self:flex-end}
.story.flip .wrap-w{grid-template-columns:1fr minmax(0,46%)}
.story.flip .pics{order:2}
.story.flip .txt{order:1;justify-content:flex-end}
.story.flip .pic2{right:auto;left:-56px}
.story .txt .hlink{align-self:flex-end;margin-top:auto}

/* ---------- 工程・四季・セット（平川屋の横並び）：数字はNoto Sans lining tabular、罫で区切る ---------- */
.band{padding:130px 0}
.band.face{background:var(--face)}
.band .head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start;justify-content:flex-end;margin-bottom:72px}
.band .head .lead{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--f-min);font-size:.98rem;letter-spacing:.14em;line-height:2.1;color:var(--sub);height:auto;font-feature-settings:"palt" 0;padding-top:.6rem}
.band .head .vh{height:auto}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sitem{padding:2rem 1.8rem 2.2rem 0;border-right:1px solid var(--line-2);margin-right:1.8rem;display:flex;flex-direction:column;gap:.2rem}
.sitem:last-child{border-right:0;margin-right:0;padding-right:0}
.sitem .k{font-family:var(--f-en);font-style:italic;font-size:.95rem;color:var(--kin-t);letter-spacing:.1em;line-height:1.4}
.sitem .k .num{font-family:var(--f-sans);font-style:normal;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"palt" 0,"lnum" 1,"tnum" 1;font-size:.86rem;letter-spacing:.14em;margin-left:.4rem}
.sitem .k.jp{font-family:var(--f-min);font-style:normal;font-size:1.3rem;letter-spacing:.2em}
.sitem .v{font-family:var(--f-min);font-weight:500;font-size:1.32rem;letter-spacing:.14em;line-height:1.6;color:var(--sumi);margin:.4rem 0 .5rem}
.sitem .s{font-size:.88rem;line-height:1.95;color:var(--sub)}
.band .hint{margin-top:1.6rem;font-size:.82rem;letter-spacing:.1em;color:var(--weak)}
.sgrid.two{grid-template-columns:repeat(2,1fr)}

/* ---------- 一覧（品種・場面）：縦組み見出し＋罫線リスト＋写真モザイク（店舗案内型） ---------- */
.listing{padding:140px 0}
.listing.face{background:var(--face)}
.listing .wrap-w{display:grid;grid-template-columns:auto 1fr minmax(0,44%);gap:0 64px;align-items:start}
.listing .head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start}
.listing .head .vh{height:auto}
.listing .txt{max-width:36em;padding-top:8px}
.listing .txt .lead{color:var(--sub);margin-bottom:2rem}
.vlist{border-top:1px solid var(--line-2)}
.vlist li{display:grid;grid-template-columns:52px 1fr;gap:0 24px;padding:1.5rem 0;border-bottom:1px solid var(--line-2);align-items:start}
.vlist .no{width:52px;height:52px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--f-min);font-size:1.15rem;letter-spacing:0;color:var(--kin-t);background:var(--white)}
.vlist .no.num{font-family:var(--f-sans);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"palt" 0,"lnum" 1,"tnum" 1;font-size:.9rem;letter-spacing:.12em}
.vlist h4{font-family:var(--f-min);font-weight:500;font-size:1.18rem;letter-spacing:.14em;line-height:1.7;margin-bottom:.35rem}
.vlist p{font-size:.92rem;line-height:1.95;color:var(--sub)}
.listing .after{margin-top:2.2rem}
.mosaic3{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;margin-top:-190px;border:2px solid var(--white);border-top:0;border-right:0}
.listing:not(.face) .mosaic3{margin-top:0;border:0}
.mosaic3>*{overflow:hidden;min-height:0}
.mosaic3 .m1{grid-row:1/3;aspect-ratio:3/4}

/* ---------- お届け表（罫だけの表） ---------- */
.spec{width:100%;border-collapse:collapse;border-top:1px solid var(--line-2);font-size:.94rem}
.spec th,.spec td{padding:1.15rem 0;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;line-height:1.95}
.spec th{font-family:var(--f-min);font-weight:500;letter-spacing:.14em;color:var(--sumi);width:11em;padding-right:1.5rem}
.spec td{color:var(--sub)}
.spec .num{font-family:var(--f-sans);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"palt" 0,"lnum" 1,"tnum" 1}
.pair{padding:140px 0}
.pair .wrap-w{display:grid;grid-template-columns:auto 1fr;gap:0 80px;align-items:start}
.pair .head{display:flex;flex-direction:row-reverse;gap:28px;align-items:flex-start}
.pair .txt{max-width:860px}
.pair .txt .lead{color:var(--sub);margin-bottom:2rem;max-width:36em}

/* ---------- 横組み本文（縦組みで長くなりすぎる段落用） ---------- */
.hp{font-size:.95rem;color:var(--sub);max-width:34em}
.hp+.hp{margin-top:1.2rem}

/* ===================== ≤1080 ===================== */
@media (max-width:1080px){
  .phead .side{width:min(42%,420px);top:-80px}
  .phead .after .wrap-w{gap:0 40px}
  .story .wrap-w,.story.flip .wrap-w{gap:0 40px}
  .story .pic2{right:-24px;bottom:-40px}
  .story.flip .pic2{left:-24px}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .sitem:nth-child(2){border-right:0;margin-right:0;padding-right:0}
  .sitem:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .listing .wrap-w{grid-template-columns:auto 1fr;gap:0 40px}
  .mosaic3{grid-column:1/-1;margin-top:56px;border:0}
  .pair .wrap-w{gap:0 40px}
}

/* ===================== ≤768（SP）：見出しは縦のまま、本文・リードは横組みへ ===================== */
@media (max-width:768px){
  .crumb{padding-top:12px;font-size:.82rem}
  .phead{padding:20px 0 88px}
  .phead .field{max-height:360px}
  /* 261011 CEO指摘：スマホで重ねた写真が縦書き見出しにかぶる→写真を通常の並びに戻し（上の写真への食い込みは margin で維持）、見出しは写真の下から始める。枠は全体ルールの2px */
  .phead .side{position:relative;top:auto;margin-top:-56px;width:54%;border-width:2px}
  .phead .after .wrap-w{grid-template-columns:1fr}
  .phead .after .wrap-w>.spacer{display:none}
  .phead .head{padding:32px 0 0;flex-wrap:wrap;justify-content:flex-end;gap:24px}
  .phead .head .vh{order:1}
  .phead .head .ey.v{order:2}
  .vlead{order:3;flex-basis:100%;writing-mode:horizontal-tb;font-family:var(--f-sans);font-weight:300;font-size:.95rem;letter-spacing:.06em;line-height:2.1;padding:0;margin-top:1.2rem}
  .vlead .l{display:inline}

  .story{padding:88px 0}
  .story .wrap-w,.story.flip .wrap-w{grid-template-columns:1fr;gap:0}
  .story .pics{margin-bottom:64px;padding-bottom:56px}
  .story .pic{aspect-ratio:4/3;width:86%}
  .story.flip .pic{margin-left:auto}
  .story .pic2{right:0;bottom:0;width:50%;border-width:8px}
  .story.flip .pic2{left:0}
  .story.flip .pics{order:1;margin-bottom:64px}
  .story.flip .txt{order:2}
  .story .txt{padding:0;flex-wrap:wrap;justify-content:flex-end;gap:20px}
  .story .txt .vh{order:1}
  .story .txt .ey.v{order:2}
  .story .txt .vp{order:3;flex-basis:100%;writing-mode:horizontal-tb;font-family:var(--f-sans);font-weight:300;font-size:.95rem;letter-spacing:.06em;line-height:2.1;color:var(--sub);margin-top:1.4rem}
  .story .txt .vp .l{border:0;padding:0}
  .story .txt .vp .l:first-child{border:0}
  .story .txt .vp .l.pb{margin-bottom:1.2rem}
  .story .txt .lnk.v{order:4;writing-mode:horizontal-tb;border-right:0;border-bottom:1px solid var(--sumi);padding:0 0 .6rem;align-self:flex-start;margin:0}
  .story .txt .lnk.v::before{transform:rotate(45deg);margin:0 0 0 .2rem}
  .story .txt .hlink{order:4;align-self:flex-start;margin:0}
  .story .txt .hp{order:3;flex-basis:100%;margin-top:1.2rem}

  .band{padding:88px 0}
  .band .head{flex-wrap:wrap;justify-content:flex-end;gap:20px;margin-bottom:40px}
  .band .head .vh{order:1}
  .band .head .ey.v{order:2}
  .band .head .lead{order:3;flex-basis:100%;writing-mode:horizontal-tb;font-family:var(--f-sans);font-weight:300;font-size:.92rem;padding:0;margin-top:1rem}
  .band .head .lead .l{display:inline}
  .sgrid,.sgrid.two{grid-template-columns:1fr;border-bottom:0}
  .sitem,.sitem:nth-child(2){border-right:0;margin-right:0;padding:1.5rem 0;border-bottom:1px solid var(--line-2)}
  .sitem .v{font-size:1.2rem}

  .listing{padding:88px 0}
  .listing .wrap-w{grid-template-columns:1fr;gap:0}
  .listing .head{justify-content:flex-end;margin-bottom:2rem}
  .listing .txt{max-width:none;padding-top:0}
  .vlist li{grid-template-columns:44px 1fr;gap:0 16px;padding:1.2rem 0}
  .vlist .no{width:44px;height:44px;font-size:1rem}
  .mosaic3{margin-top:48px;gap:10px}

  .pair{padding:88px 0}
  .pair .wrap-w{grid-template-columns:1fr;gap:0}
  .pair .head{justify-content:flex-end;margin-bottom:2rem}
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto}
  .spec th{padding:1rem 0 0;border:0;width:auto}
  .spec td{padding:.2rem 0 1rem}
}