/* ============================================================
   手打蕎麦 つむぎ庵 — 固定ページ共有CSS（_shared.css）
   トップ index.html の設計システムを継承。
   藍 #1d3a5f × 生成り #f5efe2 × 行灯あかね #e8a13c
   ============================================================ */
:root{
  --ai:#1d3a5f; --ai-d:#152b47; --ai-deep:#10213a;
  --kinari:#f5efe2; --kinari-2:#ece2cb; --paper:#faf6ea;
  --wood:#241a10; --wood-2:#332515;
  --candle:#e8a13c; --akane:#a3651c;
  --ink:#2a2118; --ink-soft:#4d4334;
  --muted:#85795f; --line:#e0d6bd; --line-d:rgba(240,233,216,.16);
  --ivory:#f0e9d8;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{ margin:0; background:var(--kinari); color:var(--ink);
  font-family:'Zen Kaku Gothic New',sans-serif; line-height:1.85; -webkit-font-smoothing:antialiased; }
.mincho{ font-family:'Shippori Mincho',serif; }
.mono{ font-family:'Space Grotesk',monospace; letter-spacing:.04em; }
img{ max-width:100%; }
h1,h2,h3,.lead,.btn,summary{ word-break:auto-phrase; text-wrap:balance; }
main{ display:block; }
[id]{ scroll-margin-top:84px; }

/* ===== ヘッダー（header-09 再実装・全ページ共通） ===== */
.hd{ position:sticky; top:0; z-index:50; background:rgba(245,239,226,.93);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.hd-in{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 28px; }
.hd-logo{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink); }
.hd-logo .seal{ width:46px; height:46px; border:1.5px solid var(--ai); border-radius:6px; color:var(--ai);
  display:flex; align-items:center; justify-content:center; font-family:'Shippori Mincho',serif; font-weight:800; font-size:24px; }
.hd-logo .lg-nm{ writing-mode:vertical-rl; height:84px; white-space:nowrap; font-family:'Shippori Mincho',serif; font-weight:800; font-size:18px; letter-spacing:.12em; line-height:1.05; }
.hd-logo .lg-en{ writing-mode:vertical-rl; height:84px; white-space:nowrap; font-family:'Space Grotesk',monospace; font-size:9px; letter-spacing:.24em; color:var(--muted); }
.hd-nav{ display:flex; gap:28px; align-items:center; }
.hd-nav a{ color:var(--ink); text-decoration:none; font-family:'Shippori Mincho',serif; font-weight:700; font-size:15px; position:relative; }
.hd-nav a::after{ content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0; background:var(--akane); transition:width .25s; }
.hd-nav a:hover{ color:var(--ai); } .hd-nav a:hover::after{ width:100%; }
.hd-nav a[aria-current="page"]{ color:var(--ai); }
.hd-nav a[aria-current="page"]::after{ width:100%; }
.hd-right{ display:flex; align-items:center; gap:18px; }
.hd-tel{ text-align:right; line-height:1.15; }
.hd-tel .num{ font-family:'Space Grotesk',monospace; font-weight:700; font-size:19px; color:var(--ink); }
.hd-tel .h{ font-size:10px; color:var(--muted); }
.hd-cta{ background:var(--ai); color:#fff; font-weight:700; font-size:14px; font-family:'Shippori Mincho',serif;
  padding:12px 22px; border-radius:3px; text-decoration:none; transition:.2s; }
.hd-cta:hover{ filter:brightness(1.15); }
.hd-burger{ display:none; width:44px; height:44px; border:none; background:var(--ai); border-radius:10px; cursor:pointer; position:relative; z-index:80; padding:0; }
.hd-burger i{ position:absolute; left:50%; top:50%; width:18px; height:2px; background:#fff; transform:translate(-50%,-50%); transition:transform .35s,opacity .25s; }
.hd-burger i:nth-child(1){ transform:translate(-50%,calc(-50% - 6px)); }
.hd-burger i:nth-child(3){ transform:translate(-50%,calc(-50% + 6px)); }
body.menu-open .hd-burger i:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
body.menu-open .hd-burger i:nth-child(2){ opacity:0; }
body.menu-open .hd-burger i:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }
@media(max-width:1000px){
  .hd-nav{ display:none; } .hd-tel{ display:none; } .hd-cta{ display:none; }
  .hd-burger{ display:block; }
}
/* スマホ右ドロワー（spmenu-01 再実装・全ページ共通） */
.dw-shade{ position:fixed; inset:0; z-index:60; background:rgba(20,15,8,.5); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
body.menu-open .dw-shade{ opacity:1; visibility:visible; }
.dw{ position:fixed; top:0; right:0; bottom:0; width:min(320px,84vw); z-index:70; background:var(--paper);
  display:flex; flex-direction:column; transform:translateX(104%); transition:transform .5s cubic-bezier(.22,1,.36,1);
  box-shadow:-22px 0 44px -22px rgba(20,15,8,.5); }
body.menu-open .dw{ transform:translateX(0); }
.dw-hd{ padding:26px 22px 14px; border-bottom:1px solid var(--line); }
.dw-hd .lb{ font-family:'Space Grotesk',monospace; font-size:9px; letter-spacing:.3em; color:var(--akane); }
.dw-hd b{ font-family:'Shippori Mincho',serif; font-size:18px; letter-spacing:.1em; display:block; margin-top:4px; }
.dw-bd{ flex:1; overflow-y:auto; padding:8px 0; }
.dw-bd a{ display:flex; align-items:center; justify-content:space-between; padding:15px 22px; text-decoration:none;
  color:var(--ink); font-weight:700; font-size:14.5px; border-bottom:1px solid var(--line); }
.dw-bd a .en{ font-family:'Space Grotesk',monospace; font-size:9px; letter-spacing:.2em; color:var(--muted); }
.dw-ft{ padding:16px 22px 28px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dw-ft a{ display:flex; flex-direction:column; align-items:center; text-decoration:none; border-radius:11px; padding:11px 6px; line-height:1.3; }
.dw-ft .tel{ border:1.5px solid var(--ai); color:var(--ai); }
.dw-ft .tel b{ font-family:'Space Grotesk',monospace; font-size:12px; white-space:nowrap; }
.dw-ft .web{ background:var(--akane); color:#fff; }
.dw-ft .web b{ font-size:14px; letter-spacing:.06em; }
.dw-ft small{ font-size:9px; opacity:.8; }

/* ===== ページヒーロー（固定ページ用タイトル帯。FVではない） ===== */
.page-hero{ background:var(--ai-deep); color:var(--ivory); padding:72px 0 64px; position:relative; overflow:hidden; }
.page-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(240,233,216,.04) 0 1px, transparent 1px 9vw); }
.page-hero .in{ width:min(1120px,calc(100% - 48px)); margin:0 auto; position:relative; z-index:1; }
.page-hero .eb{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.3em; color:var(--candle); text-transform:uppercase; }
.page-hero h1{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:clamp(30px,4.6vw,46px); margin:12px 0 8px; letter-spacing:.06em; }
.page-hero p{ margin:0; color:rgba(240,233,216,.72); font-size:14px; max-width:38em; }

/* ===== 汎用セクション・本文 ===== */
.sec{ padding:84px 0; }
.sec.alt{ background:var(--paper); }
.sec .in{ width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.sec .in.narrow{ max-width:780px; }
.sec-eb{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ai);
  display:inline-flex; gap:12px; align-items:center; }
.sec-eb::before{ content:""; width:30px; height:2px; background:var(--ai); }
.sec h2{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:clamp(25px,3.6vw,36px); margin:14px 0 24px; }
.sec h3{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:clamp(19px,2.4vw,24px); margin:36px 0 12px; }
.sec p{ font-size:15px; color:var(--ink-soft); }
.sec .note{ font-size:12px; color:var(--muted); }

/* 罫線インデックス（料金・概要などの一覧） */
.index-list{ margin:0; border-top:1px solid var(--ink); }
.index-row{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline; padding:18px 4px; border-bottom:1px solid var(--line); }
.index-row .t{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:16.5px; }
.index-row .t small{ display:block; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400; font-size:12px; color:var(--muted); margin-top:2px; }
.index-row .v{ font-family:'Space Grotesk',monospace; font-weight:700; font-size:17px; white-space:nowrap; }
.index-row .v small{ font-size:10px; color:var(--muted); font-weight:400; }

/* 概要 dl（NAP） */
.spec{ margin:0; border-top:1px solid var(--ink); }
.spec .row{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:18px 4px; border-bottom:1px solid var(--line); }
.spec dt{ font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:.22em; color:var(--muted); padding-top:4px; }
.spec dd{ margin:0; font-size:14.5px; }
.spec dd small{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }
@media(max-width:680px){ .spec .row{ grid-template-columns:110px 1fr; } }

/* 写真＋本文の2カラム */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:6px; display:block; }
.split .cap{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.24em; color:var(--muted); margin-top:10px; }
@media(max-width:780px){ .split{ grid-template-columns:1fr; gap:24px; } }

/* FAQ（藍帯のもこもこカード・トップと同型） */
.fq-item{ background:var(--paper); color:var(--ink); border-radius:34px 40px 30px 44px; margin-bottom:16px; overflow:hidden;
  box-shadow:0 18px 40px -20px rgba(42,33,24,.25); border:1px solid var(--line); }
.fq-q{ display:flex; align-items:center; gap:16px; padding:20px 26px; cursor:pointer; width:100%; border:none; background:none; text-align:left; font:inherit; color:inherit; }
.fq-qi{ flex:0 0 auto; width:44px; height:44px; border-radius:14px 16px 12px 18px; background:var(--ai-d); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Shippori Mincho',serif; font-weight:800; font-style:italic; font-size:20px; }
.fq-tx{ flex:1; font-weight:700; font-size:15.5px; }
.fq-pl{ font-size:24px; color:var(--ai-d); transition:transform .3s; font-weight:300; }
.fq-item.open .fq-pl{ transform:rotate(45deg); }
.fq-a{ max-height:0; overflow:hidden; transition:max-height .5s ease; }
html:not(.js) .fq-a{ max-height:none; }
.fq-a .in2{ margin:0 22px 22px; background:var(--kinari); border-radius:24px 30px 22px 32px; padding:18px 22px; display:flex; gap:14px; }
.fq-ai{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:var(--akane); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Shippori Mincho',serif; font-weight:800; font-size:18px; }
.fq-a p{ margin:0; color:var(--ink-soft); font-size:14.5px; word-break:auto-phrase; }
.fq-item.open .fq-a{ max-height:380px; }

/* お問い合わせ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.contact-card{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:32px 30px; }
.contact-card .k{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.26em; color:var(--ai); text-transform:uppercase; display:block; margin-bottom:8px; }
.contact-card .big-tel{ font-family:'Space Grotesk',monospace; font-weight:700; font-size:28px; color:var(--ink); text-decoration:none; }
.contact-card p{ font-size:13.5px; color:var(--ink-soft); margin:10px 0 0; }
.form-slot{ border:1.5px dashed var(--line); border-radius:14px; padding:36px 28px; text-align:center; color:var(--muted); font-size:13.5px; background:#fff; }
@media(max-width:780px){ .contact-grid{ grid-template-columns:1fr; } }

/* ページ下CTA帯（藍ベタ・短い） */
.cta-band{ background:var(--ai); color:#fff; border-radius:18px; padding:40px 6%; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.cta-band h2{ color:#fff; font-size:clamp(20px,2.8vw,28px); margin:6px 0; }
.cta-band p{ color:rgba(255,255,255,.8); font-size:13.5px; margin:0; }
.cta-band .k{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.24em; color:var(--candle); text-transform:uppercase; }
.cta-band .btn{ display:inline-flex; align-items:center; font-weight:700; font-size:15px; padding:14px 28px; border-radius:99px;
  text-decoration:none; white-space:nowrap; background:var(--candle); color:#241a10; }
@media(max-width:780px){ .cta-band{ grid-template-columns:1fr; } }

/* ===== フッター（footer-08 再実装・全ページ共通） ===== */
.fo{ background:var(--paper); border-top:1px solid var(--line); margin-top:40px; }
.fo-grid{ display:grid; grid-template-columns:1.1fr 1fr; min-height:430px; }
.fo-map{ position:relative; background:#e7e3d2; overflow:hidden; }
.fo-map .rd{ position:absolute; background:#f7f3ea; }
.fo-map .rd.h1{ left:0; right:0; top:34%; height:26px; }
.fo-map .rd.h2{ left:0; right:0; top:68%; height:14px; transform:rotate(-3deg); }
.fo-map .rd.v1{ top:0; bottom:0; left:28%; width:18px; transform:rotate(2deg); }
.fo-map .rd.v2{ top:0; bottom:0; left:64%; width:30px; }
.fo-map .blk{ position:absolute; background:#ddd5be; border-radius:4px; }
.fo-map .b1{ left:6%; top:8%; width:16%; height:20%; }
.fo-map .b2{ left:36%; top:10%; width:22%; height:17%; }
.fo-map .b3{ left:8%; top:46%; width:14%; height:16%; }
.fo-map .b4{ left:38%; top:44%; width:20%; height:18%; }
.fo-map .b5{ left:74%; top:46%; width:18%; height:34%; }
.fo-map .b6{ left:74%; top:8%; width:18%; height:22%; }
.fo-map .rv{ position:absolute; left:-5%; bottom:-12%; width:115%; height:26%; background:#c9d4df; border-radius:50% 40% 0 0/100% 100% 0 0; transform:rotate(-2deg); }
.fo-pin{ position:absolute; left:50%; top:38%; transform:translate(-50%,-100%); text-align:center; }
.fo-pd{ width:34px; height:34px; margin:0 auto; background:var(--ai); border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 22px -8px rgba(29,58,95,.6); animation:foBob 2.6s ease-in-out infinite; }
.fo-pd::after{ content:""; width:11px; height:11px; border-radius:50%; background:#fff; }
.fo-tag{ margin-top:10px; background:var(--ink); color:var(--paper); font-size:11.5px; font-weight:700; letter-spacing:.06em; padding:6px 13px; border-radius:999px; white-space:nowrap; display:inline-block; }
@keyframes foBob{ 0%,100%{ transform:rotate(-45deg) translate(0,0); } 50%{ transform:rotate(-45deg) translate(-4px,4px); } }
.fo-open{ position:absolute; right:16px; bottom:16px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 18px;
  font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.18em; color:var(--ink); text-decoration:none; box-shadow:0 10px 20px -12px rgba(42,33,24,.4); }
.fo-open:hover{ background:var(--ink); color:var(--paper); }
.fo-nap{ padding:52px 56px 44px; display:flex; flex-direction:column; }
.fo-lb{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.3em; color:var(--akane); }
.fo-nap .nm4{ font-family:'Shippori Mincho',serif; font-size:29px; letter-spacing:.1em; margin:10px 0 4px; font-weight:700; }
.fo-yomi{ font-family:'Space Grotesk',monospace; font-size:9.5px; letter-spacing:.26em; color:var(--muted); }
.fo-nap dl{ margin:26px 0 0; display:grid; grid-template-columns:auto 1fr; gap:0 22px; }
.fo-nap dt{ font-family:'Space Grotesk',monospace; font-size:9.5px; letter-spacing:.2em; color:var(--ai); padding:13px 0; border-bottom:1px solid var(--line); font-weight:700; align-content:center; }
.fo-nap dd{ margin:0; font-size:14px; padding:13px 0; border-bottom:1px solid var(--line); line-height:1.8; }
.fo-tel{ font-family:'Space Grotesk',monospace; font-size:21px; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.02em; }
.fo-nap dd small{ color:var(--muted); font-size:11.5px; display:block; }
.fo-off{ color:var(--muted); }
.fo-acts{ display:flex; gap:12px; margin-top:30px; }
.fo-acts a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px; border-radius:11px; text-decoration:none; font-weight:700; font-size:14px; letter-spacing:.06em; }
.fo-acts .rt{ background:var(--ai); color:#fff; box-shadow:0 12px 22px -12px rgba(29,58,95,.7); }
.fo-acts .ln{ border:1.5px solid var(--ink); color:var(--ink); }
.fo-acts a:hover{ filter:brightness(1.08); }
.fo-low{ border-top:1px solid var(--line); }
.fo-low-in{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 28px; flex-wrap:wrap; }
.fo-low nav{ display:flex; gap:20px; flex-wrap:wrap; }
.fo-low a{ color:var(--muted); text-decoration:none; font-size:12px; }
.fo-low a:hover{ color:var(--ink); }
.fo-cp{ font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:.14em; color:var(--muted); }
@media(max-width:980px){ .fo-grid{ grid-template-columns:1fr; } .fo-map{ min-height:300px; } .fo-nap{ padding:40px 28px; } }
@media (prefers-reduced-motion: reduce){ .fo-pd{ animation:none; } }

/* ロゴ画像化（2026-06-12 修正） */
.hd-logo .lg-img{ height:46px; width:auto; display:block; mix-blend-mode:multiply; }