/* =================================================================
   お米の鈴木 — 共有スタイル (A案「墨と生成り」)
   Responsive / 768px breakpoint
   ================================================================= */

/* ---- Design tokens ---- */
:root{
  --sumi:#1a1612;
  --sumi-2:#2a241e;
  --sumi-3:#4a4138;
  --kinari:#f4eee2;
  --kinari-2:#ebe3d2;
  --kinari-3:#dfd4bd;
  --akane:#8c2e26;
  --akane-dark:#6f231d;
  --kincha:#a8853a;
  --kincha-soft:#c8a45c;
  --ink-soft:#5a4e3f;
  --hairline:rgba(26,22,18,.18);
  --container:1240px;
  --pad:56px;
}

/* ---- Reset ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
html,body{margin:0;padding:0}
body{
  background:var(--kinari);
  color:var(--sumi);
  font-family:'Noto Sans JP',system-ui,sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,h5,h6{font-family:'Shippori Mincho',serif;font-weight:600;letter-spacing:.04em;line-height:1.5;margin:0}
p{margin:0}
ul{margin:0}

.mincho{font-family:'Shippori Mincho',serif}
.marcellus{font-family:'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase}

/* ---- Accessibility ---- */
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--akane);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- Layout ---- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.section{padding:100px 0;position:relative}
.section.tight{padding:72px 0}
.bg-kinari{background:var(--kinari)}
.bg-kinari-2{background:var(--kinari-2)}
.bg-kinari-3{background:var(--kinari-3)}
.bg-sumi{background:var(--sumi);color:var(--kinari)}
.rule-top{border-top:1px solid var(--hairline)}
.rule-bottom{border-bottom:1px solid var(--hairline)}

/* ---- Section headers ---- */
.sect-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:56px;gap:14px}
.sect-num{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.4em;color:var(--kincha);display:flex;align-items:center;gap:14px;text-transform:uppercase}
.sect-num::before,.sect-num::after{content:"";width:30px;height:1px;background:var(--kincha)}
.sect-title{font-family:'Shippori Mincho',serif;font-size:34px;font-weight:600;letter-spacing:.1em}
.sect-sub{font-size:14px;letter-spacing:.04em;color:var(--ink-soft);max-width:580px;line-height:2}
.eyebrow{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.32em;color:var(--kincha);margin-bottom:16px;display:inline-flex;align-items:center;gap:12px;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--kincha)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;font-family:'Shippori Mincho',serif;font-size:15px;font-weight:600;letter-spacing:.08em;text-decoration:none;border:1px solid var(--sumi);background:transparent;color:var(--sumi);transition:all .2s ease;cursor:pointer}
.btn:hover{background:var(--sumi);color:var(--kinari)}
.btn .arr{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.12em}
.btn.primary{background:var(--akane);border-color:var(--akane);color:var(--kinari)}
.btn.primary:hover{background:var(--akane-dark);border-color:var(--akane-dark)}
.btn.dark{background:var(--sumi);color:var(--kinari)}
.btn.dark:hover{background:var(--kinari);color:var(--sumi)}
.btn.light{background:var(--kinari);border-color:var(--kinari);color:var(--sumi)}
.btn.light:hover{background:transparent;color:var(--kinari)}
.btn.outline-light{border-color:var(--kinari);color:var(--kinari)}
.btn.outline-light:hover{background:var(--kinari);color:var(--sumi)}
.btn.block{justify-content:space-between;width:100%}

.textlink{display:inline-flex;align-items:center;gap:10px;font-family:'Shippori Mincho',serif;font-size:14px;font-weight:600;color:var(--sumi);text-decoration:none;border-bottom:1px solid var(--sumi);padding-bottom:5px;letter-spacing:.06em}
.textlink:hover{color:var(--akane);border-bottom-color:var(--akane)}
.textlink .arr-img{width:42px;height:8px}

/* =================================================================
   Header
   ================================================================= */
.site-header{position:sticky;top:0;z-index:100;background:var(--kinari);border-bottom:1px solid var(--hairline);box-shadow:0 -3px 0 var(--kinari)}
.header-inner{max-width:var(--container);margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand-logo{height:40px}
.brand-logo img{height:100%;width:auto}
.gnav{display:flex;gap:26px;align-items:center}
.gnav a{font-family:'Shippori Mincho',serif;font-size:14.5px;font-weight:600;color:var(--sumi);text-decoration:none;letter-spacing:.05em;white-space:nowrap;position:relative;padding-bottom:4px}
.gnav a:hover{color:var(--akane)}
.gnav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--akane)}
.header-cta{display:flex;align-items:center;gap:9px;background:var(--akane);color:var(--kinari);padding:8px 16px;text-decoration:none;flex-shrink:0}
.header-cta .ic{width:17px;height:17px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.header-cta .ic svg{width:100%;height:100%;color:var(--kinari)}
.header-cta .ic img{width:100%;filter:brightness(0) invert(1)}
.header-cta>span{display:flex;flex-direction:column;line-height:1}
.header-cta .tel{font-family:'Jost',sans-serif;font-weight:500;font-size:16px;letter-spacing:.02em;line-height:1.1}
.header-cta .lbl{font-family:'Shippori Mincho',serif;font-size:9px;letter-spacing:.14em;opacity:.85;display:block;margin-bottom:2px}
.hamburger{display:none;position:absolute;top:0;right:0;bottom:-1px;width:auto;aspect-ratio:1;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:none;border-radius:0;background:var(--sumi);color:var(--kinari);cursor:pointer;transition:background .2s ease}
.hamburger:hover{background:#000}
.hamburger span:not(.mlabel){display:block;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .25s ease}
.hamburger .mlabel{margin-top:6px;font-family:'Noto Sans JP',sans-serif;font-size:9px;font-weight:500;letter-spacing:.14em;line-height:1}
.hamburger.open span:not(.mlabel):nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:not(.mlabel):nth-child(2){opacity:0}
.hamburger.open span:not(.mlabel):nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hamburger.open .mlabel{opacity:0}

/* mobile drawer */
.mobile-nav{position:fixed;inset:0 0 0 auto;width:min(82vw,360px);background:var(--sumi);color:var(--kinari);transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;z-index:200;display:flex;flex-direction:column;padding:88px 32px 32px;gap:4px;overflow-y:auto}
.mobile-nav.open{transform:translateX(0);visibility:visible;transition:transform .3s ease}
.mobile-nav a{font-family:'Shippori Mincho',serif;font-size:18px;color:var(--kinari);text-decoration:none;padding:16px 0;border-bottom:1px solid rgba(244,238,226,.15);letter-spacing:.05em}
.mobile-nav a .en{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.25em;color:var(--kincha-soft);display:block;margin-top:2px}
.mobile-nav .m-tel{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--akane);color:var(--kinari);border-bottom:none;padding:14px;font-family:'Jost',sans-serif;font-size:18px;letter-spacing:.04em} .mobile-nav .m-tel svg{width:16px;height:16px;flex-shrink:0}
.nav-overlay{position:fixed;inset:0;background:rgba(26,22,18,.5);opacity:0;visibility:hidden;transition:.3s;z-index:150}
.nav-overlay.open{opacity:1;visibility:visible}

/* =================================================================
   Footer
   ================================================================= */
.site-footer{background:var(--sumi);color:var(--kinari);padding:80px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.footer-brand{display:flex;flex-direction:column;gap:18px}
.footer-brand .f-logo{height:54px}
.footer-brand .f-logo img{height:100%;width:auto;filter:brightness(0) invert(.92)}
.footer-brand .lead{font-size:13px;color:rgba(244,238,226,.7);line-height:1.95}
.footer-brand .f-tel{font-family:'Jost',sans-serif;font-size:22px;letter-spacing:.06em}
.footer-brand .f-tel small{display:block;font-family:'Shippori Mincho',serif;font-size:11px;letter-spacing:.16em;color:rgba(244,238,226,.55);margin-bottom:3px}
.footer-col h5{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.28em;color:var(--kincha-soft);margin-bottom:16px;font-weight:400}
.footer-col a,.footer-col span{display:block;font-family:'Shippori Mincho',serif;font-size:14px;color:rgba(244,238,226,.85);text-decoration:none;letter-spacing:.04em;margin:9px 0;line-height:1.5}
.footer-col a:hover{color:var(--kinari)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(244,238,226,.16);margin-top:56px;padding-top:24px;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.26em;color:rgba(244,238,226,.5)}

/* mobile bottom call bar */
.mobile-callbar{display:none}

/* =================================================================
   Reveal on scroll (no animation lib; CSS only, JS toggles .in)
   ================================================================= */
/* JSが有効なときだけ隠して、スクロールで表示する（JS無効/未ロード時は常に表示＝中身が消えない） */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* =================================================================
   Responsive — 1024px (nav collapse) & 768px (full mobile)
   ================================================================= */
@media (max-width:1024px){
  :root{--pad:32px}
  .gnav,.header-cta,.head-ig.ig-link{display:none}
  .hamburger{display:flex;width:76px}
  .header-inner{padding-right:84px}
  .sect-title{font-size:30px}
}

@media (max-width:768px){
  :root{--pad:20px}
  body{font-size:15px}
  .section{padding:60px 0}
  .section.tight{padding:44px 0}
  .sect-head{margin-bottom:36px}
  .sect-title{font-size:24px;letter-spacing:.06em}
  .sect-sub{font-size:13px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 24px}
  .footer-brand{grid-column:1 / -1}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center;font-size:9.5px}
  .brand-logo{height:34px}
  .header-inner{padding:11px 67px 11px 20px}
  .hamburger{width:56px}
  /* mobile bottom call bar ─ ユーザー要望で非表示（戻す場合は display:flex に） */
  .mobile-callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--akane);color:var(--kinari);align-items:center;justify-content:center;gap:10px;padding:13px;text-decoration:none;border-top:1px solid rgba(244,238,226,.2)}
  .mobile-callbar img{width:18px;filter:brightness(0) invert(1)}
  .mobile-callbar .t{font-family:'Jost',sans-serif;font-size:16px;letter-spacing:.05em}
  .mobile-callbar .l{font-family:'Shippori Mincho',serif;font-size:12px}
  body.has-callbar{padding-bottom:0}
}

@media (max-width:390px){
  /* 狭幅端末：ヘッダーが右に溢れてハンバーガーが切れるのを防ぐ（ロゴ・アイコン・予約幅を縮小） */
  .brand-logo{height:30px}
  .header-inner{padding:11px 59px 11px 14px;gap:10px}
  .header-actions{gap:6px}
  .head-line,.head-ig-m{width:30px}
  .head-line svg,.head-ig-m svg{width:26px;height:26px}
  .hamburger{width:50px}
}

@media (max-width:440px){
  .footer-grid{grid-template-columns:1fr}
}

/* instagram links */
.ig-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--sumi);flex-shrink:0}
.ig-link svg{width:20px;height:20px}
.ig-link:hover{color:var(--akane)}
.mobile-nav .m-ig{display:flex;align-items:center;gap:10px}
.mobile-nav .m-ig svg{width:18px;height:18px}
.f-ig{display:inline-flex;align-items:center;gap:8px}
.f-ig svg{width:15px;height:15px}
.f-line{display:flex;align-items:center;gap:8px;margin-top:10px}
.f-line svg{width:15px;height:15px}

/* header instagram ─ モバイルのみ（ハンバーガーの隣に表示） */
.head-ig-m{display:none;align-items:center;justify-content:center;width:34px;height:34px;color:var(--sumi);flex-shrink:0}
.head-ig-m svg{width:30px;height:30px}
.head-ig-m:hover{color:var(--akane)}
/* header right-side actions wrapper（電話CTA＋LINE＋IG＋ハンバーガーをまとめる） */
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* header LINE（公式・緑／モバイルのみ表示） */
.head-line{display:none;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0}
.head-line svg{width:30px;height:30px;display:block}
.head-line:hover{opacity:.82}
.mobile-nav .m-line{display:flex;align-items:center;gap:10px}
.mobile-nav .m-line svg{width:18px;height:18px}
@media (max-width:1024px){
  .head-ig-m,.head-line{display:inline-flex}
}

/* ── 改行ユーティリティ ── */
br.brm{display:none}            /* スマホでのみ改行（PCでは無効） */
.nw{white-space:nowrap}         /* 語句の途中改行を防ぐ（（ひのひかり）等の単位で使う） */
.sect-title,.page-hero h1,.cta-band h2{text-wrap:balance} /* 対応ブラウザで見出しの行バランスを改善 */
.sect-title,.page-hero h1,.cta-band h2{word-break:auto-phrase} /* 日本語を文節単位で折り返す（Chrome系のみ。未対応は無視） */
/* ── 共通の微調整（スマホ） ── */
@media (max-width:768px){
  br.brpc{display:none}         /* PC用に入れた改行をスマホでは無効化 */
  br.brm{display:inline}
  /* 英字イヤブロウ：字間が広すぎて狭幅で途中折返しするのを防ぐ */
  .sect-num{font-size:10px;letter-spacing:.22em}
  /* フッター手前CTA：縦積み＆全幅でボタンサイズを揃える */
  .cta-band .row{flex-direction:column}
  .cta-band .row .btn{width:100%;justify-content:space-between}
}

/* ── ページ遷移をなめらかに（対応：Chrome/Edge/Safari新版。未対応は通常遷移＝無害） ── */
@view-transition{navigation:auto}

/* =================================================================
   デザイン強化パス（2026-07-11）— 和モダンの所作
   トップの「のれん」演出のDNA（ゆっくり開く・線が引かれる・静かに立ち上がる）を
   サイト全体の共通言語として展開する。すべて prefers-reduced-motion で無効化。
   ================================================================= */

/* ── 選択色まで世界観を揃える ── */
::selection{background:var(--kincha);color:#fff}

/* ── 稲穂オーナメント（トップで使用中の意匠を全ページ共通部品に） ── */
.sect-orna{width:104px;opacity:.85;margin-bottom:2px}
@media (max-width:768px){
  .sect-orna{width:80px}
}

/* ── サブページヒーロー：入場の所作 ── */
@keyframes heroImgIn{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroLineX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.js .page-hero{overflow:hidden}
html.js .page-hero-img img{animation:heroImgIn 2.6s cubic-bezier(.22,1,.36,1) both}
html.js .page-hero .eyebrow{animation:heroRise .8s cubic-bezier(.22,1,.36,1) .1s both}
html.js .page-hero .eyebrow::before{transform-origin:left center;animation:heroLineX .7s cubic-bezier(.22,1,.36,1) .5s both}
html.js .page-hero h1{animation:heroRise .9s cubic-bezier(.22,1,.36,1) .28s both}
html.js .page-hero-inner p{animation:heroRise .9s cubic-bezier(.22,1,.36,1) .46s both}

/* ── スクロールで写真が「ふっと息をする」（reveal と連動した静かなデズーム） ── */
html.js .reveal .svc-img img,
html.js .reveal .prod-img img,
html.js .reveal .lineup-img img,
html.js .reveal .gift-figure img,
html.js .reveal .misc .mimg img,
html.js .reveal .mimg img,
html.js .reveal .b2b-img img,
html.js .reveal .store-photos .ph img,
html.js .reveal .where-img img,
html.js .reveal .haiga-figure img{transition:transform 1.3s cubic-bezier(.22,1,.36,1)}
html.js .reveal:not(.in) .svc-img img,
html.js .reveal:not(.in) .prod-img img,
html.js .reveal:not(.in) .lineup-img img,
html.js .reveal:not(.in) .gift-figure img,
html.js .reveal:not(.in) .misc .mimg img,
html.js .reveal:not(.in) .mimg img,
html.js .reveal:not(.in) .b2b-img img,
html.js .reveal:not(.in) .store-photos .ph img,
html.js .reveal:not(.in) .where-img img,
html.js .reveal:not(.in) .haiga-figure img{transform:scale(1.07)}
/* hover 側は素早く反応させる（呼吸のゆったり transition を上書き） */
.svc-card:hover .svc-img img,.prod:hover .prod-img img{transition:transform .45s ease}

/* ── reveal 自体の質感（距離とイージングを上質に） ── */
html.js .reveal{transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}

/* ── ヘッダーの気配：スクロールすると和紙のように薄く透ける ── */
.site-header{transition:background .4s ease,box-shadow .4s ease}
.site-header.scrolled{background:rgba(244,238,226,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 24px rgba(26,22,18,.1)}

/* ── ナビ：下線が左から引かれる ── */
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--akane);transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.gnav a:hover::after{transform:scaleX(1)}
.gnav a.active::after{transform:scaleX(1)}

/* ── ボタン・リンクの所作：矢印がすっと先へ ── */
.btn .arr{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.btn:hover .arr{transform:translateX(5px)}
.textlink .arr-img{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.textlink:hover .arr-img{transform:translateX(5px)}

/* ── カード：タイトルが茜に染まる（浮かせず、色で応える） ── */
.prod .prod-title,.svc-card .svc-title{transition:color .3s ease}
.prod:hover .prod-title,.svc-card:hover .svc-title{color:var(--akane)}

/* ── CTAバンド：稲穂の意匠で締める ── */
.cta-band{position:relative}
.cta-band::before{content:"";display:block;width:92px;height:32px;margin:0 auto 20px;background:url("../assets/deco-ear-top.png") center/contain no-repeat;opacity:.9}

/* ── まとめて減速設定を尊重 ── */
@media (prefers-reduced-motion:reduce){
  html.js .page-hero-img img,
  html.js .page-hero .eyebrow,
  html.js .page-hero .eyebrow::before,
  html.js .page-hero h1,
  html.js .page-hero-inner p{animation:none}
  html.js .reveal:not(.in) .svc-img img,
  html.js .reveal:not(.in) .prod-img img,
  html.js .reveal:not(.in) .lineup-img img,
  html.js .reveal:not(.in) .gift-figure img,
  html.js .reveal:not(.in) .misc .mimg img,
  html.js .reveal:not(.in) .mimg img,
  html.js .reveal:not(.in) .b2b-img img,
  html.js .reveal:not(.in) .store-photos .ph img,
  html.js .reveal:not(.in) .where-img img,
  html.js .reveal:not(.in) .haiga-figure img{transform:none}
  .gnav a::after,.btn .arr,.textlink .arr-img{transition:none}
}
/* ヘッダー/フッターは遷移中も“同じ要素”として維持（チラつき防止） */
.site-header{view-transition-name:site-header}
.site-footer{view-transition-name:site-footer}
/* メインの切替フェードは控えめに */
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
/* 動きを減らす設定のときは遷移アニメを無効化（描画保持はそのまま） */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}