/* =========================================================
   hiro工房 デザイン型「写真フルブリード型」
   2026-09-07 作成。実在サイトの"文法だけ"を移植したもの（コードの流用はしていない）。
   この型の骨子（7つ）:
   01 写真を画面の端まで断ち落とす（フルブリード）＝余白で囲まないから贅沢に見える
   02 左右で写真の高さを揃えない＝わざと不揃いにしてリズムを作る
   03 手描き風の要素を一点ずつ（吹き出し／筆記体／破線の丸スタンプ）＝温かみの正体
   04 1色の階調だけで統一（濃緑／中緑／淡緑）＝色数を増やさない
   05 見出しは3点セット（大見出し＋小見出し＋細い横線）＝全セクション同じ形でリズム
   06 実用情報の帯を写真の間に挟む＝流れを止めずに電話・時間・CTAが入る
   07 ベタ塗りでなく縦縞の色面に文字を載せる＝手が込んで見える
   ※ぼかし(filter:blur)は使わない。影は1種類のみ。角丸はスタンプとピルだけに許可。
   ========================================================= */
:root{
  --ink:#20261F;          /* 文字の黒（わずかに緑を含む） */
  --green-d:#3a2a1e;      /* 濃緑＝見出し・帯・フッター */
  --green-m:#6b4a2e;      /* 中緑＝小見出し・罫線 */
  --green-l:#f1e8dd;      /* 淡緑＝面 */
  --green-p:#faf6f0;      /* さらに淡い面 */
  --paper:#FFFFFF;
  --muted:#5E6B60;
  --line:#C9D5CC;
  --shadow:0 10px 30px rgba(31,61,43,.13);   /* 影はこの1種類だけ */
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  --script:"Parisienne",cursive;
  --pad:clamp(20px,5vw,40px);
  --gap:clamp(56px,10vw,120px);     /* セクション間の余白は変数の段階で持つ */
  --gap-s:clamp(28px,5vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--gothic);font-size:16px;line-height:1.95;overflow-x:hidden;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ul,li,hr{margin:0;padding:0}
ul{list-style:none}
hr{border:0}

/* ---------- 型見本の帯 ---------- */
.sample-bar{background:var(--green-d);color:#fff;text-align:center;padding:11px 16px;font-size:12px;line-height:1.75}
.sample-bar b{display:block;font-size:12.5px;font-weight:700}
.sample-bar small{display:block;font-size:10.5px;color:#C2D2C6;margin-top:3px}
.sample-bar a{color:#F0D98C;font-weight:700;text-decoration:underline}
.sample-bar u{text-underline-offset:2px}

/* ---------- ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px var(--pad);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.hd-mark{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:78px;height:78px;color:var(--green-d)}
.hd-mark svg{position:absolute;inset:0;width:100%;height:100%}
.hd-mark i{font-style:normal;font-size:9px;letter-spacing:.2em;color:var(--green-m)}
.hd-mark b{font-family:var(--mincho);font-size:17px;letter-spacing:.08em;line-height:1.2}
.hd-nav{display:none;gap:clamp(14px,2vw,28px);font-size:13.5px;font-weight:500}
.hd-nav a{padding:4px 0;border-bottom:1px solid transparent}
.hd-nav a:hover{border-bottom-color:var(--green-m)}
.hd-burger{display:flex;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);cursor:pointer}
.hd-burger span{display:block;width:20px;height:1.5px;background:var(--ink)}
.drawer{display:none;background:var(--green-p);border-bottom:1px solid var(--line)}
.drawer.on{display:block}
.drawer nav{display:flex;flex-direction:column;padding:8px var(--pad)}
.drawer a{padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.drawer a:last-child{border-bottom:0}
@media(min-width:960px){.hd-nav{display:flex}.hd-burger{display:none}}

/* ---------- 01+02 ヒーロー：端まで断ち落とす／高さを揃えない ---------- */
.hero{position:relative;display:grid;grid-template-columns:1fr;background:var(--green-p);padding-bottom:var(--gap-s)}
.hero figure{margin:0;overflow:hidden}
.hero-l img,.hero-r img{width:100%;height:100%;object-fit:cover}
.hero-l{display:none}      /* ← 左は横長で短く */
.hero-r{height:clamp(260px,58vw,520px)}      /* ← 右は縦長で長い（あえて不揃い） */
@media(min-width:860px){
  .hero{grid-template-columns:1fr 1fr;align-items:start;padding-bottom:0}
  .hero-l{display:block;height:340px;margin-top:0}
  .hero-r{height:520px}
}
.hero-card{position:relative;z-index:2;margin:-28px var(--pad) 0;padding:0}
@media(min-width:860px){.hero-card{position:absolute;left:0;top:300px;width:min(560px,52vw);margin:0 0 0 var(--pad)}}

/* 03 手描き風の一点：吹き出し */
.bubble{position:relative;display:inline-block;background:var(--paper);border:1px solid var(--ink);
  padding:8px 18px;font-family:var(--mincho);font-size:14px;box-shadow:var(--shadow)}
.bubble::after{content:"";position:absolute;left:32px;bottom:-9px;width:14px;height:14px;
  background:var(--paper);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg)}

/* 07 縦縞の色面に文字を載せる */
.stripe{position:relative;margin-top:16px;padding:26px clamp(18px,4vw,34px) 22px;
  background:repeating-linear-gradient(90deg,var(--green-m) 0 6px,var(--green-d) 6px 13px,var(--green-m) 13px 16px,var(--green-d) 16px 34px);color:#fff}
/* 07 色面の模様：店の業種に合わせて付け替える（既定＝太細の縦縞）。
   1色の階調だけで作る・ぼかしは使わない、という鉄則は共通。 */
.stripe.pt-tate{background:repeating-linear-gradient(90deg,var(--green-m) 0 18px,var(--green-d) 18px 36px)}
.stripe.pt-yoko{background:repeating-linear-gradient(0deg,var(--green-m) 0 14px,var(--green-d) 14px 28px)}
.stripe.pt-naname{background:repeating-linear-gradient(45deg,var(--green-m) 0 14px,var(--green-d) 14px 28px)}
.stripe.pt-ichimatsu{background:
  repeating-linear-gradient(90deg,var(--green-m) 0 26px,transparent 26px 52px),
  repeating-linear-gradient(0deg,var(--green-d) 0 26px,var(--green-m) 26px 52px)}
.stripe.pt-hosolines{background:var(--green-d)}
.stripe.pt-hosolines::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 22px,var(--green-m) 22px 24px)}
.stripe.pt-hosolines > *{position:relative}
.stripe.pt-muji{background:var(--green-d);border-left:7px solid var(--green-m)}
.stripe h1{font-family:var(--mincho);font-weight:700;font-size:clamp(22px,5.4vw,34px);line-height:1.55;letter-spacing:.04em}
.stripe h1 span{display:block}
.script{margin-top:8px;font-family:var(--script);font-size:clamp(20px,4.6vw,28px);color:#F0D98C;line-height:1.2}

/* 03 手描き風の一点：破線の丸スタンプ（角丸を許すのはこことピルだけ） */
.stamp{position:relative;display:grid;place-items:center;width:104px;height:104px;margin:-34px 0 0 auto;
  color:var(--green-d);background:var(--paper);border-radius:50%;box-shadow:var(--shadow)}
.stamp svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.stamp span{font-family:var(--mincho);font-size:12.5px;line-height:1.6;text-align:center}
.scroll-hint{display:none}
@media(min-width:860px){
  .scroll-hint{display:flex;align-items:center;gap:8px;position:absolute;right:var(--pad);bottom:20px;
    font-size:10.5px;letter-spacing:.24em;color:#fff;z-index:3}
  .scroll-hint i{display:block;width:44px;height:1px;background:#fff}
}

/* ---------- 06 実用情報の帯を写真の間に挟む ---------- */
.infobar{display:grid;grid-template-columns:1fr;background:var(--green-l)}
.ib-l{padding:20px var(--pad);display:grid;gap:10px}
.ib-tel b{font-family:var(--mincho);font-size:clamp(21px,4.6vw,26px);letter-spacing:.04em;color:var(--green-d)}
.ib-tel small{display:block;font-size:11px;color:var(--muted)}
.ib-time{display:grid;gap:3px;font-size:13px}
.ib-time div{display:flex;gap:10px}
.ib-time dt{flex:0 0 66px;color:var(--green-m);font-weight:700}
.ib-cta{display:grid;place-items:center;padding:20px;background:var(--green-d);color:#fff;
  font-weight:700;font-size:14.5px;letter-spacing:.04em}
.ib-cta:hover{background:var(--green-m)}
@media(min-width:860px){.infobar{grid-template-columns:1fr 380px}}

/* ---------- セクション共通 ---------- */
.sec{padding:var(--gap) 0}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:760px}

/* 05 見出しの3点セット（大見出し＋小見出し＋細い横線） */
.sec-head{margin-bottom:var(--gap-s)}
.sec-head.center{text-align:center}
.sec-ttl{font-family:var(--mincho);font-size:clamp(24px,5vw,34px);color:var(--green-d);letter-spacing:.06em;line-height:1.4}
.sec-ttl.light{color:#fff}
.sec-sub{margin-top:6px;font-size:clamp(14px,2.6vw,16px);font-weight:700;color:var(--ink)}
.sec-head hr{width:52px;height:2px;background:var(--green-m);margin-top:16px}
.sec-head.center hr{margin-left:auto;margin-right:auto}

/* ご案内（写真＋本文の2カラム。写真は端まで断ち落とす） */
.sec-split{display:grid;grid-template-columns:1fr;gap:var(--gap-s);padding-top:var(--gap);padding-bottom:var(--gap)}
.split-img{margin:0;height:clamp(230px,58vw,440px)}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-txt{padding:0 var(--pad)}
.split-txt p{margin-top:14px;font-size:15px}
.lead-note{margin-top:20px !important;font-size:12px;color:var(--muted)}
@media(min-width:900px){
  .sec-split{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,5vw,64px)}
  .split-img{height:460px}
  .split-txt{padding-right:var(--pad)}
}

/* コンセプト */
.sec-concept{background:var(--green-p)}
.concept-lead{text-align:center;font-family:var(--mincho);font-size:clamp(15px,3vw,19px);line-height:2.2}
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--gap-s)}
.pills li{border:1px solid var(--green-m);color:var(--green-d);padding:6px 18px;border-radius:999px;font-size:13px}

/* ランチ／ディナー */
.menu-grid{display:grid;grid-template-columns:1fr;gap:var(--gap-s)}
@media(min-width:860px){.menu-grid{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px)}}
.mcard{border:1px solid var(--line);padding:clamp(24px,4vw,38px)}
.m-en{font-size:11px;letter-spacing:.26em;color:var(--green-m);font-weight:700}
.mcard h2{margin-top:4px;font-family:var(--mincho);font-size:clamp(21px,4vw,27px);color:var(--green-d)}
.mcard hr{width:40px;height:2px;background:var(--green-m);margin:14px 0 16px}
.mcard>p{font-size:14.5px}
.mcard ul{margin-top:18px;border-top:1px solid var(--line)}
.mcard li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.mcard li b{font-family:var(--mincho);color:var(--green-d);white-space:nowrap}
.m-note{margin-top:12px;font-size:11.5px;color:var(--muted)}

/* 帯写真 */
.band{position:relative;min-height:clamp(280px,52vw,440px);display:grid;place-items:center;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:rgba(31,61,43,.62)}
.band-txt{position:relative;z-index:2;text-align:center;color:#fff;padding:var(--gap-s) var(--pad);max-width:760px}
.band-txt p+p{margin-top:14px;font-size:14.5px;line-height:2}

/* FAQ（detailsタグ＝JavaScript不要） */
.faqs{border-top:1px solid var(--line)}
.faqs details{border-bottom:1px solid var(--line)}
.faqs summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;font-weight:700;font-size:15px}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--green-m);border-bottom:1.5px solid var(--green-m);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faqs details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faqs p{padding:0 0 18px;font-size:14.5px;color:var(--muted)}
.faq-note{margin-top:20px;font-size:11.5px;color:var(--muted)}

/* アクセス（装飾なし・読みやすさ最優先） */
.acc{border-top:1px solid var(--line)}
.acc div{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.acc dt{font-size:13px;font-weight:700;color:var(--green-m)}
.acc dd{font-size:14.5px}
.acc small{color:var(--muted);font-size:11.5px}

/* フッター */
.ft{background:var(--green-d);color:#DCE6DE;padding:var(--gap) var(--pad) 40px;text-align:center}
.ft-name{font-family:var(--mincho);font-size:22px;color:#fff;letter-spacing:.08em}
.ft-sub{margin-top:6px;font-size:12.5px;color:#A9BDAF}
.ft-note{max-width:760px;margin:var(--gap-s) auto 0;text-align:left;font-size:11.5px;line-height:1.95;color:#A9BDAF}
.ft-note p+p{margin-top:9px}
.ft-note b{color:#fff}
.ft-copy{margin-top:26px;font-size:10.5px;letter-spacing:.2em;color:#7E9285}

/* スクロールで順に出す（素のIntersectionObserver。ライブラリは使わない） */
.fi{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.fi.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fi{opacity:1;transform:none;transition:none}}

/* =========================================================
   4ページ構成で足した分（2026-09-08）
   ========================================================= */
.hd-nav a.on{border-bottom-color:var(--green-d);font-weight:700}
.drawer a.on{color:var(--green-d);font-weight:700}

/* 下層ページの見出し（帯写真に文字を載せる） */
.phero{position:relative;min-height:clamp(210px,42vw,340px);display:grid;place-items:center;overflow:hidden}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:rgba(31,61,43,.66)}
.phero-in{position:relative;z-index:2;text-align:center;color:#fff;padding:var(--gap-s) var(--pad)}
.phero-en{font-size:11px;letter-spacing:.28em;color:#C8D8CB;font-weight:700}
.phero-ttl{margin-top:8px;font-family:var(--mincho);font-size:clamp(26px,6vw,40px);letter-spacing:.08em}
.phero-lead{margin-top:10px;font-size:13.5px;color:#DCE6DE}

/* お品書きの表 */
.mtable{margin-top:var(--gap-s);border-top:2px solid var(--green-d)}
.mtable li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:15px 2px;border-bottom:1px solid var(--line)}
.mtable .mt-head{padding:9px 2px;border-bottom:1px solid var(--line)}
.mtable .mt-head span,.mtable .mt-head b{font-size:11.5px;letter-spacing:.14em;color:var(--green-m);font-weight:700}
.mtable div b{display:block;font-size:15.5px;font-weight:700}
.mtable div i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.mtable>li>b{font-family:var(--mincho);font-size:16px;color:var(--green-d);white-space:nowrap}

/* 注記のかたまり */
.notebox{margin-top:var(--gap-s);padding:22px 20px;background:var(--green-p);border-left:3px solid var(--green-m)}
.notebox .nb-ttl{font-weight:700;font-size:14.5px;color:var(--green-d);margin-bottom:6px}
.notebox p{font-size:14px;line-height:1.95}

/* こだわり（番号つき） */
.points{counter-reset:pt;border-top:1px solid var(--line)}
.points li{counter-increment:pt;display:grid;grid-template-columns:44px 1fr;gap:14px;
  padding:20px 0;border-bottom:1px solid var(--line)}
.points li::before{content:counter(pt,decimal-leading-zero);font-family:var(--mincho);
  font-size:20px;color:var(--green-m);line-height:1.3}
.points b{grid-column:2;font-size:16px;font-weight:700;color:var(--green-d)}
/* ⚠️ 2026-09-08: p が1列目(44px)に落ちて「1文字ずつ縦に折り返す」不具合が出た。
   ::before / b / p の3つがグリッド項目なので、p にも列を明示する。 */
.points p{grid-column:2;margin-top:5px;font-size:14.5px;color:var(--muted)}

/* カード全体をリンクにする（トップのランチ／ディナー入口） */
.mcard.link{display:block;transition:background .2s}
.mcard.link:hover{background:var(--green-p)}
.mcard h3{margin-top:4px;font-family:var(--mincho);font-size:clamp(21px,4vw,27px);color:var(--green-d)}
.mcard .more{display:inline-block;margin-top:18px;padding-bottom:3px;font-size:13.5px;font-weight:700;
  color:var(--green-d);border-bottom:1px solid var(--green-m)}

/* 本文中のリンク・次ページへの導線 */
.tlink{display:inline-block;margin-top:6px;font-weight:700;color:var(--green-d);border-bottom:1px solid var(--green-m);padding-bottom:2px}
.nextlink{margin-top:var(--gap-s);text-align:center}
.nextlink a{display:inline-block;padding:13px 30px;border:1px solid var(--green-d);color:var(--green-d);font-weight:700;font-size:14px}
.nextlink a:hover{background:var(--green-d);color:#fff}

/* 全ページ共通の締めCTA */
.cta-band{background:var(--green-l);padding:var(--gap-s) 0;text-align:center}
.cta-ttl{font-family:var(--mincho);font-size:17px;color:var(--green-d);letter-spacing:.08em}
.cta-tel{font-family:var(--mincho);font-size:clamp(24px,5.4vw,32px);color:var(--green-d);margin-top:4px;letter-spacing:.04em}
.cta-note{font-size:11px;color:var(--muted)}
.cta-time{margin-top:10px;font-size:13px;color:var(--ink)}

/* フッターのページ一覧 */
.ft-nav{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;margin-top:20px;font-size:13px}
.ft-nav a{color:#C8D8CB;border-bottom:1px solid transparent}
.ft-nav a:hover{border-bottom-color:#C8D8CB}

/* ---------- ほかのページへ（ヘッダーのメニュー以外の導線・2026-09-08 追加） ---------- */
.sec-pagenav{background:var(--green-p)}
.sec-pagenav .sec-head{margin-bottom:var(--gap-s)}
.pn-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:760px){.pn-grid{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}}
.pn-card{display:block;background:var(--paper);border:1px solid var(--line);transition:box-shadow .2s}
.pn-card:hover{box-shadow:var(--shadow)}
.pn-card figure{margin:0;height:clamp(150px,26vw,180px);overflow:hidden}
.pn-card img{width:100%;height:100%;object-fit:cover}
.pn-body{padding:18px 18px 20px}
.pn-body b{display:block;font-family:var(--mincho);font-size:19px;color:var(--green-d);letter-spacing:.06em}
.pn-body p{margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.85}
.pn-more{display:inline-block;margin-top:12px;padding-bottom:3px;font-size:13px;font-weight:700;
  color:var(--green-d);border-bottom:1px solid var(--green-m)}

/* 締めCTAの中のページリンク */
.cta-links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:16px;font-size:13.5px}
.cta-links a{color:var(--green-d);font-weight:700;border-bottom:1px solid var(--green-m);padding-bottom:2px}