/* =========================================================
   うちのラーメン 我豚（がとん）｜LP スタイル
   墨 × 生成り × 金茶 ＋ 朱の落款
   ========================================================= */

:root{
  /* 墨（地） */
  --ink-900:#0c0a09;
  --ink-800:#15110d;
  --ink-700:#1b1611;
  /* 生成り（明） */
  --cream-100:#f3ede1;
  --cream-200:#efe7d8;
  --cream-300:#e7dccb;
  /* 金茶（差し色） */
  --gold-100:#e0c98f;
  --gold-200:#cbb079;
  --gold-300:#bfa269;
  --gold-500:#8a7445;
  --gold-700:#5a4a2e;
  /* 朱（落款） */
  --seal:#b23a2e;
  --seal-light:#d96c5f;
  /* 墨文字・本文 */
  --text-dark:#2c2620;
  --text-dark-2:#3a342b;
  --text-mute:#6a6052;
  --text-light:#cfc6b6;
  --line-cream:#d3c8b3;

  --font-display:'Yuji Syuku', serif;
  --font-head:'Shippori Mincho B1', serif;
  --font-body:'Noto Serif JP', serif;

  --maxw:1024px;
  --header-h:78px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink-800);
  color:var(--text-dark);
  font-family:var(--font-head);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--gold-300); color:var(--ink-800); }

img{ display:block; max-width:100%; }

a{ color:inherit; }

/* セクションのアンカー位置（スティッキーヘッダー分） */
section[id], #access{ scroll-margin-top:var(--header-h); }

.skip-link{
  position:absolute; left:50%; top:-60px; transform:translateX(-50%);
  background:var(--ink-800); color:var(--cream-100);
  padding:10px 18px; z-index:200; text-decoration:none;
  font-family:var(--font-body); font-size:.85rem;
  transition:top .2s;
}
.skip-link:focus{ top:8px; }

:focus-visible{ outline:2px solid var(--gold-300); outline-offset:3px; }

/* ============ 共通プレースホルダー（画像スロット） ============ */
.ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:12px; box-sizing:border-box;
  font-family:var(--font-body); font-size:.72rem; font-weight:500;
  letter-spacing:.06em; line-height:1.5;
}
.ph__icon{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.5; }
.ph--dark{
  background:rgba(232,220,196,.05);
  color:var(--gold-200);
  box-shadow:inset 0 0 0 1px rgba(191,162,105,.28);
}
.ph--light{
  background:rgba(44,38,32,.05);
  color:#9a8d72;
  box-shadow:inset 0 0 0 1px rgba(122,90,46,.22);
}

/* ============ ボタン ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-body); text-decoration:none;
  letter-spacing:.12em; box-sizing:border-box;
  transition:background-color .25s, color .25s, border-color .25s, transform .25s;
}
.btn span{ transition:transform .25s; }
.btn:hover span{ transform:translateX(4px); }

.btn--ghost{
  min-width:170px; padding:13px 20px;
  border:1px solid var(--gold-300); color:var(--cream-100);
  font-size:.82rem;
}
.btn--ghost span{ color:var(--gold-200); }
.btn--ghost:hover{ background:var(--gold-300); color:var(--ink-800); }
.btn--ghost:hover span{ color:var(--ink-800); }

.btn--outline{
  padding:10px 16px;
  border:1px solid var(--gold-500); color:var(--gold-700);
  font-size:.75rem; letter-spacing:.08em;
}
.btn--outline:hover{ background:var(--gold-500); color:var(--cream-100); }

/* ============ ヘッダー ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  transition:background-color .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(12,10,9,.94);
  backdrop-filter:blur(8px);
  border-bottom-color:rgba(191,162,105,.35);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.site-header__inner{
  max-width:var(--maxw); margin:0 auto;
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 26px; gap:16px;
}

/* ロゴ */
.brand{ display:flex; flex-direction:column; text-decoration:none; line-height:1; flex:none; }
.brand__sub{
  font-family:var(--font-body); font-size:.62rem; letter-spacing:.18em;
  color:var(--cream-200); margin-bottom:2px;
}
.brand__row{ display:flex; align-items:flex-end; gap:6px; }
.brand__name{
  font-family:var(--font-display); font-size:2.5rem; line-height:.85;
  color:var(--cream-100); letter-spacing:.08em;
}
.brand__romaji{
  font-family:var(--font-body); font-size:.56rem; letter-spacing:.3em;
  color:var(--gold-200); text-align:center; width:90px; margin-top:2px;
}
.seal{
  width:24px; height:24px; background:var(--seal);
  border:1.5px solid var(--seal-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:3px;
}
.seal__txt{
  font-family:var(--font-display); font-size:11px; color:var(--cream-100);
  writing-mode:vertical-rl; letter-spacing:-1px;
}

/* ナビ */
.site-nav{ display:flex; align-items:center; gap:16px; white-space:nowrap; }
.site-nav a{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.04em;
  color:var(--cream-200); text-decoration:none; position:relative;
  padding:4px 0; transition:color .2s;
}
.site-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--gold-200); transform:scaleX(0); transform-origin:center;
  transition:transform .25s;
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a.is-current::after{ transform:scaleX(1); }
.site-nav a:hover{ color:var(--cream-100); }
.site-nav a.is-current{ color:var(--cream-100); }

.nav-cta{
  color:var(--ink-800) !important; background:var(--gold-300);
  padding:11px 14px !important; border:1px solid var(--gold-200);
  transition:background-color .2s;
}
.nav-cta:hover{ background:var(--gold-100); }

/* ハンバーガー */
.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  width:42px; height:42px; padding:9px; box-sizing:border-box;
  background:transparent; border:1px solid rgba(191,162,105,.5);
  cursor:pointer; flex:none;
}
.nav-toggle__bar{ display:block; width:100%; height:2.5px; background:var(--cream-100); transition:transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position:relative; background:var(--ink-900); overflow:hidden;
  margin-top:calc(var(--header-h) * -1);
  min-height:560px;
}
.hero__photo{ position:absolute; inset:0 0 0 auto; width:70%; }
.hero__photo .ph{ width:100%; height:100%; }
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink-900) 50%, rgba(12,10,9,0) 78%);
}
.hero__inner{
  position:relative; z-index:3;
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--header-h) + 48px) 26px 56px;
}
.hero__title{
  margin:0; font-family:var(--font-head); font-weight:800;
  font-size:clamp(2.4rem, 6vw, 2.9rem); line-height:1.28; letter-spacing:.06em;
  color:var(--cream-100);
}
.hero__lead{
  margin:14px 0 0; font-family:var(--font-body); font-size:clamp(1rem,2.4vw,1.06rem);
  letter-spacing:.05em; color:var(--gold-200);
}
.hero__body{
  margin:22px 0 0; font-family:var(--font-body); font-weight:400;
  font-size:.82rem; line-height:2; letter-spacing:.03em; color:#dcd4c6;
}
.hero__inner .btn--ghost{ margin-top:26px; }

.hero__tagline{
  position:absolute; right:16px; top:46%; z-index:3;
  display:flex; gap:6px; margin:0;
}
.hero__tagline span{
  writing-mode:vertical-rl; font-family:var(--font-body);
  font-size:.92rem; letter-spacing:.25em; color:var(--cream-100);
}

/* ============ セクション見出し ============ */
.section-head{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-bottom:38px;
}
.section-head__rule{ width:60px; height:1px; background:var(--gold-300); }
.section-head__diamond{ width:5px; height:5px; background:var(--gold-300); transform:rotate(45deg); }
.section-head__title{
  margin:0; font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.4rem,3.4vw,1.7rem); letter-spacing:.35em; color:var(--cream-100); white-space:nowrap;
}
.section-head--light .section-head__title{ color:#e8dcc4; }

.section-title{
  margin:0; text-align:center; font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.4rem,3.4vw,1.7rem); letter-spacing:.35em; color:var(--text-dark-2);
}

/* ============ ABOUT ============ */
.about{
  position:relative; background:var(--cream-200);
  padding:54px 40px 56px; overflow:hidden;
}
.about__watermark{
  position:absolute; right:-10px; top:24px;
  font-family:var(--font-display); font-size:150px; line-height:.95;
  color:var(--text-dark); opacity:.06; writing-mode:vertical-rl; letter-spacing:.05em;
  pointer-events:none;
}
.about__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:44px;
}
.about__photo{ flex:none; width:390px; }
.about__photo .ph{ aspect-ratio:390/165; }
.about__text{ flex:1; }
.about__title{
  margin:0 0 18px; font-family:var(--font-head); font-weight:500;
  font-size:clamp(1.35rem,3vw,1.62rem); letter-spacing:.1em; color:var(--gold-700);
}
.about__title-mark{ font-family:var(--font-display); font-size:1.25em; color:#5a4326; }
.about__text p{
  margin:0; font-family:var(--font-body); font-weight:400;
  font-size:.84rem; line-height:2.1; letter-spacing:.03em; color:var(--text-dark-2);
}

/* ============ こだわり ============ */
.craft{ background:var(--ink-800); padding:48px 40px 54px; }
.craft__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.craft-card{
  border:1px solid var(--gold-700); background:var(--ink-700);
  padding:18px 18px 18px;
}
.craft-card__head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.craft-card__icon{ width:38px; height:38px; object-fit:contain; flex:none; }
.craft-card__head h3{
  margin:0; font-family:var(--font-head); font-weight:600;
  font-size:1.1rem; letter-spacing:.1em; color:var(--gold-100);
}
.craft-card__body p{
  margin:0;
  font-family:var(--font-body); font-weight:400;
  font-size:.74rem; line-height:1.95; color:var(--text-light);
}

/* ============ 人気メニュー ============ */
.menu{ position:relative; background:var(--cream-200); padding:42px 40px 50px; }
.menu__note{
  position:absolute; right:40px; top:54px; margin:0;
  font-family:var(--font-body); font-size:.68rem; color:var(--text-mute);
}
.menu__grid{
  max-width:var(--maxw); margin:30px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.menu-card__img{ width:100%; aspect-ratio:4/3.2; }
.menu-card__head{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.menu-card__head h3{
  margin:0; font-family:var(--font-head); font-weight:600;
  font-size:1.05rem; letter-spacing:.04em; color:var(--text-dark);
}
.badge{
  font-family:var(--font-body); font-size:.62rem; color:var(--cream-200);
  background:var(--gold-500); padding:3px 7px; white-space:nowrap;
}
.menu-card p{
  margin:7px 0 0; font-family:var(--font-body); font-weight:400;
  font-size:.75rem; line-height:1.8; color:var(--text-dark-2);
}

/* ============ 店主の想い ============ */
.philosophy{ display:flex; background:var(--ink-800); }
.philosophy__photo{ flex:none; width:360px; }
.philosophy__photo .ph{ width:100%; height:100%; min-height:330px; }
.philosophy__text{ flex:1; padding:42px 44px 36px; }
.philosophy__title{
  margin:0 0 26px; font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.5rem,3.6vw,1.9rem); letter-spacing:.18em; color:#e8dcc4;
}
.philosophy__cols{ display:flex; gap:46px; }
.philosophy__cols > p, .philosophy__cols > div{ flex:1; }
.philosophy__cols p{
  margin:0; font-family:var(--font-body); font-weight:400;
  font-size:.78rem; line-height:2.05; color:var(--text-light);
}
.philosophy__sign{ text-align:right; margin-top:14px !important; }
.philosophy__sign span{ letter-spacing:.1em; }
.philosophy__sign-name{ font-family:var(--font-display); font-size:2.1rem; color:#e8dcc4; }

/* ============ 店内紹介 / SNS ============ */
.feature{
  background:var(--cream-200); padding:40px 40px 44px;
  display:flex; gap:38px;
  max-width:calc(var(--maxw) + 80px); margin:0 auto;
}
.feature__title{
  margin:0 0 14px; font-family:var(--font-head); font-weight:600;
  font-size:1.4rem; letter-spacing:.15em; color:var(--text-dark);
}
.feature__title--sm{ font-size:1.25rem; letter-spacing:.08em; }

.interior{ flex:1.35; }
.interior__body{ display:flex; gap:20px; align-items:flex-start; }
.interior__lead{ width:175px; flex:none; }
.interior__lead p{
  margin:0; font-family:var(--font-body); font-weight:400;
  font-size:.74rem; line-height:1.95; color:var(--text-dark-2);
}
.interior__lead .btn{ margin-top:18px; min-width:130px; }
.interior__gallery{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.interior__gallery--two{ grid-template-columns:repeat(2,1fr); }
.interior__gallery .ph{ aspect-ratio:1/1; }

.sns__links{ display:flex; flex-wrap:wrap; gap:20px 28px; }
.sns-link{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.sns-link__icon{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:none; }
.sns-link__icon svg{ width:16px; height:16px; }
.sns-link__icon--x{ background:var(--ink-900); }
.sns-link__icon--x svg{ width:15px; height:15px; fill:#fff; }
.sns-link__icon--ig{ border-radius:8px; background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); }
.sns-link__icon--ig svg{ fill:none; stroke:#fff; stroke-width:2; }
.sns-link__icon--ig .dot{ fill:#fff; stroke:none; }
.sns-link__txt{ display:flex; flex-direction:column; font-family:var(--font-body); }
.sns-link__txt b{ font-size:.74rem; font-weight:600; color:var(--text-dark); }
.sns-link__txt small{ font-size:.68rem; color:var(--text-mute); }

/* 店舗情報の下のSNSリンク */
.info__sns{
  max-width:var(--maxw); margin:26px auto 0; padding-top:24px;
  border-top:1px solid var(--line-cream);
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.info__sns-label{
  font-family:var(--font-head); font-weight:600;
  font-size:1rem; letter-spacing:.18em; color:var(--text-dark);
}

/* ============ 店舗情報 ============ */
.info{ background:var(--cream-300); padding:34px 40px 40px; border-top:1px solid var(--line-cream); }
.info__head{
  max-width:var(--maxw); margin:0 auto 24px;
  display:flex; align-items:center; gap:14px;
}
.info__head h2{
  margin:0; font-family:var(--font-head); font-weight:600;
  font-size:1.35rem; letter-spacing:.3em; color:var(--gold-700);
}
.info__head-rule{ flex:1; height:1px; background:#cdbfa6; }
.info__body{
  max-width:var(--maxw); margin:0 auto;
  display:flex; gap:34px; align-items:flex-start; flex-wrap:wrap;
}
.info__list{ flex:none; width:300px; margin:0; font-family:var(--font-body); }
.info__list > div{ display:flex; gap:14px; margin-bottom:13px; }
.info__list > div:last-child{ margin-bottom:0; }
.info__list dt{ flex:none; width:52px; font-size:.74rem; font-weight:600; color:var(--gold-500); }
.info__list dd{ margin:0; font-size:.74rem; line-height:1.7; color:var(--text-dark-2); }

.info__hours{ flex:none; width:248px; font-family:var(--font-body); }
.info__hours-label{ margin:0 0 9px; font-size:.74rem; font-weight:600; color:var(--gold-500); }
.info__hours-row{ display:flex; gap:12px; font-size:.74rem; color:var(--text-dark-2); line-height:1.9; margin-bottom:10px; }
.info__hours-row--off{ margin-bottom:18px; }
.info__hours-day{ flex:none; width:44px; font-weight:600; color:var(--gold-500); }
.info__hours .btn{ min-width:200px; }

.info__map{ flex:none; width:200px; }
.info__map .ph{ aspect-ratio:200/135; }
.info__map-link{ text-decoration:none; cursor:pointer; transition:background-color .2s, color .2s, box-shadow .2s; }
.info__map-link:hover{ background:rgba(44,38,32,.12); color:var(--text-dark); box-shadow:inset 0 0 0 1px rgba(120,105,80,.45); }

.info__logo{ flex:1; display:flex; justify-content:flex-end; align-items:center; gap:10px; min-width:180px; }
.info__logo-name{ font-family:var(--font-display); font-size:3.2rem; line-height:.9; color:#5a4326; letter-spacing:.08em; }
.info__logo-msg{ writing-mode:vertical-rl; font-family:var(--font-body); font-size:.74rem; letter-spacing:.25em; color:var(--text-mute); }

/* ============ フッター ============ */
.site-footer{
  background:var(--ink-900); color:var(--text-light);
  text-align:center; padding:26px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.site-footer__name{ font-family:var(--font-display); font-size:1.2rem; letter-spacing:.2em; color:var(--cream-100); }
.site-footer small{ font-family:var(--font-body); font-size:.68rem; letter-spacing:.06em; color:var(--text-mute); }

/* ============ スクロール演出 ============ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============ レスポンシブ ============ */
@media (max-width:900px){
  .craft__grid{ grid-template-columns:1fr 1fr; }
  .menu__grid{ grid-template-columns:1fr 1fr; }
  .feature{ flex-direction:column; gap:34px; }
  .sns{ border-left:0; border-top:1px solid var(--line-cream); padding-left:0; padding-top:30px; }
}

@media (max-width:760px){
  :root{ --header-h:64px; }

  .nav-toggle{ display:flex; }
  .site-header{ background:rgba(12,10,9,.94); backdrop-filter:blur(8px); border-bottom-color:rgba(191,162,105,.3); }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(12,10,9,.98); border-top:1px solid rgba(191,162,105,.3);
    padding:8px 0; max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .site-nav.is-open{ max-height:70vh; }
  .site-nav a{ padding:13px 26px; border-bottom:1px solid rgba(191,162,105,.12); }
  .site-nav a:not(.nav-cta)::after{ display:none; }
  .nav-cta{ margin:8px 26px; text-align:center; justify-content:center; }

  .hero{ min-height:0; margin-top:0; }
  .hero__photo{ position:relative; width:100%; height:240px; }
  .hero__veil{
    background:linear-gradient(180deg, rgba(12,10,9,.2) 0%, rgba(12,10,9,.55) 55%, var(--ink-900) 100%);
  }
  .hero__inner{ padding:32px 24px 44px; }
  .hero__tagline{ display:none; }
  .hero__title{ font-size:clamp(2rem,9vw,2.6rem); }
  .hero__body{ font-size:.84rem; }

  .about, .craft, .menu, .info{ padding-left:22px; padding-right:22px; }
  .about__inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .about__photo{ width:100%; }
  .about__watermark{ font-size:96px; top:auto; bottom:10px; opacity:.05; }

  .menu__note{ position:static; margin:8px 0 0; text-align:center; }

  .philosophy{ flex-direction:column; }
  .philosophy__photo{ width:100%; }
  .philosophy__photo .ph{ min-height:240px; }
  .philosophy__text{ padding:34px 24px 30px; }
  .philosophy__cols{ flex-direction:column; gap:22px; }

  .feature{ padding-left:22px; padding-right:22px; }
  .interior__body{ flex-direction:column; }
  .interior__lead{ width:100%; }

  .info__body{ gap:26px; }
  .info__list, .info__hours, .info__map{ width:100%; }
  .info__logo{ justify-content:flex-start; width:100%; }
}

@media (max-width:460px){
  .craft__grid, .menu__grid{ grid-template-columns:1fr; }
  .sns__grid{ grid-template-columns:repeat(3,1fr); }
  .brand__name{ font-size:2.1rem; }
}

/* ============ モーション抑制 ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ===== デモ表示の切替ピル（営業デモ用・本番では削除） ===== */
.demo-switch{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:1000; display:flex; align-items:center; gap:4px;
  background:rgba(21,17,13,.92); border:1px solid rgba(191,162,105,.5);
  border-radius:999px; padding:6px 8px; box-shadow:0 6px 20px rgba(0,0,0,.35);
  font-family:var(--font-body); font-size:.74rem;
}
.demo-switch__label{ color:#bfa269; padding:0 6px; letter-spacing:.08em; }
.demo-switch a{ color:#e0c98f; text-decoration:none; padding:5px 13px; border-radius:999px; transition:background-color .2s,color .2s; }
.demo-switch a[href]:hover{ background:rgba(191,162,105,.22); }
.demo-switch a.is-active{ background:#bfa269; color:#15110d; font-weight:600; }
/* スマホで切替文字が途中改行しないように */
.demo-switch{ flex-wrap:nowrap; max-width:calc(100vw - 20px); }
.demo-switch a, .demo-switch__label{ white-space:nowrap; }
@media (max-width:460px){
  .demo-switch{ gap:2px; padding:5px 7px; font-size:.72rem; }
  .demo-switch a{ padding:5px 11px; }
}

/* スマホ調整：見出しを1行に・地図埋め込み枠 */
.info__map-frame{ width:100%; aspect-ratio:200/135; border:0; display:block; }
@media (max-width:460px){
  .section-head{ gap:10px; }
  .section-head__rule{ width:22px; }
  .section-head__title{ letter-spacing:.18em; }
}