@charset "UTF-8";
/* ===========================================================
   焼肉よらく｜style.css
   デザインシート step4a-yoraku-v1.0 準拠
   墨（#14100E）× 燠火（#E05A22）／金は使わない
   =========================================================== */

/* ---------- tokens ---------- */
:root{
  --sumi:#14100E;      /* 背景・墨 */
  --men:#1E1815;       /* 面 */
  --fuchi:#2E2521;     /* 縁 */
  --okibi:#E05A22;     /* アクセント（文字・線・数字） */
  --okibi-btn:#C2410C; /* ボタン地 */
  --okibi-hov:#D9560F;
  --kinari:#EDE6DB;    /* 本文 */
  --kinari-2:#B8ADA1;  /* 補助 */
  --kinari-3:#918578;  /* 注記（14px以上）／面#1E1815上でも4.87:1を確保 */
  --abura:#F3E7D3;     /* 強調1行 */

  --mincho:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --goth:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --eng:"Playfair Display",Georgia,serif;

  --wrap:1120px;
  --narrow:720px;
  --pad:24px;
  --sec:72px;
  --head-h:60px;
}
@media (min-width:768px){ :root{ --pad:40px; --sec:88px; --head-h:72px; } }
@media (min-width:1024px){ :root{ --pad:56px; --sec:120px; } }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sumi);
  color:var(--kinari);
  font-family:var(--goth);
  font-size:17px;
  line-height:2.0;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;filter:saturate(.92) contrast(1.04);}
a{color:inherit;}
ul,ol,dl,dd{margin:0;padding:0;}
li{list-style:none;}
h1,h2,h3,p,figure{margin:0;}
iframe{border:0;display:block;}
:focus-visible{outline:2px solid var(--kinari);outline-offset:3px;}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.26;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
.wrap--narrow{max-width:var(--narrow);}
.sec{padding-block:var(--sec);position:relative;}
.sec--lead{padding-top:calc(var(--sec) * .9);}
.sec--sake,.sec--menu{background:linear-gradient(180deg,rgba(46,37,33,.34) 0%,rgba(20,16,14,0) 55%);}
.sec--sub{padding-top:0;}
.sec__head{margin-bottom:44px;}

/* ---------- type ---------- */
.h2{
  font-family:var(--mincho);font-weight:500;
  font-size:24px;line-height:1.6;letter-spacing:.1em;color:var(--kinari);
  margin-bottom:20px;
}
.h3{
  font-family:var(--mincho);font-weight:500;
  font-size:18px;line-height:1.7;letter-spacing:.08em;color:var(--kinari);
  margin-bottom:12px;position:relative;
}
.label{
  font-family:var(--eng);font-weight:400;font-size:10px;letter-spacing:.3em;
  color:var(--okibi);margin-bottom:14px;text-transform:uppercase;
}
.body{margin-bottom:1.4em;}
.body:last-child{margin-bottom:0;}
.body--em{font-family:var(--mincho);font-size:19px;letter-spacing:.08em;color:var(--abura);}
.body--muted{color:var(--kinari-2);font-size:15px;line-height:1.9;}
.body--after{margin-top:44px;color:var(--kinari-2);}
.lead{margin-bottom:1.6em;}
.lead:last-child{margin-bottom:0;}
.cap{font-size:13px;line-height:1.7;letter-spacing:.05em;color:var(--kinari-2);}
.note{font-size:14px;line-height:1.8;letter-spacing:.02em;color:var(--kinari-3);margin-top:16px;}
.textlink{
  color:var(--okibi);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(224,90,34,.5);
  transition:text-decoration-color .25s ease;
}
.textlink:hover{text-decoration-color:var(--okibi);}

@media (min-width:768px){
  .h2{font-size:32px;}
  .h3{font-size:20px;}
  .label{font-size:11px;}
}

/* ---------- icon ---------- */
.ico{width:16px;height:16px;fill:currentColor;flex:none;}

/* ---------- button ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  min-height:56px;padding:16px 28px;
  background:var(--okibi-btn);color:#FFFFFF;
  font-family:var(--goth);font-size:16px;font-weight:600;letter-spacing:.06em;
  line-height:1.3;text-decoration:none;border-radius:2px;
  box-shadow:0 0 32px rgba(224,90,34,.28);
  transition:background .25s ease, box-shadow .25s ease, transform .1s ease;
}
.btn:hover{background:var(--okibi-hov);box-shadow:0 0 40px rgba(224,90,34,.42);}
.btn:active{transform:translateY(1px);}
.btn__num{font-size:20px;font-weight:700;letter-spacing:.02em;}
@media (min-width:768px){
  .btn{padding:18px 34px;}
  .btn__num{font-size:22px;}
}
.btn--lg{width:100%;max-width:420px;}
.cta-inline{margin-top:44px;text-align:center;}

/* ---------- header ---------- */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:80;
  height:var(--head-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
/* 営業デモの見本帯（position:fixed / z-index:9999）と重ならないよう下げる */
body.omc-has-bar .header{top:44px;}
@media (max-width:640px){ body.omc-has-bar .header{top:40px;} }
.header.is-stuck{
  background:rgba(20,16,14,.88);
  border-bottom-color:var(--fuchi);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.header__inner{
  height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.3;}
.logo__name{font-family:var(--mincho);font-weight:500;font-size:17px;letter-spacing:.14em;}
.logo__sub{font-size:10px;letter-spacing:.16em;color:var(--kinari-2);}
.gnav{display:none;gap:26px;}
.gnav a{
  font-size:14px;letter-spacing:.06em;text-decoration:none;color:var(--kinari);
  padding-bottom:4px;position:relative;
}
.gnav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--okibi);
  transition:width .3s ease;
}
.gnav a:hover::after{width:100%;}
.header__tel{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  min-height:44px;min-width:44px;justify-content:center;
}
.header__telnum{display:none;font-size:16px;font-weight:600;letter-spacing:.02em;}
@media (min-width:1024px){
  .gnav{display:flex;}
  .header__telnum{display:inline;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:560px;height:100svh;max-height:740px;
  display:flex;align-items:flex-end;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:70% 60%;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(20,16,14,.72) 0%,rgba(20,16,14,.18) 32%,rgba(20,16,14,.86) 100%),
    linear-gradient(90deg,rgba(20,16,14,.88) 0%,rgba(20,16,14,.30) 46%,rgba(20,16,14,0) 78%);
}
.hero__inner{
  position:relative;z-index:1;width:100%;
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad) 52px;
  display:flex;flex-direction:column;align-items:flex-start;gap:26px;
}
.hero__title{
  font-family:var(--mincho);font-weight:500;
  font-size:32px;line-height:1.5;letter-spacing:.22em;
  writing-mode:vertical-rl;text-orientation:mixed;
  /* 縦組みは箱の右端から組まれる。幅を内容に合わせないと画面右（＝写真の明るい側）に流れて読めなくなる */
  width:max-content;max-width:100%;
  max-height:52svh;
  text-shadow:0 2px 30px rgba(0,0,0,.9);
}
.hero__body{width:100%;min-width:0;}
.hero__sub{font-size:15px;line-height:1.95;color:#DCD3C8;text-shadow:0 1px 16px rgba(0,0,0,.9);}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px;}
.badges li{
  font-size:11px;letter-spacing:.08em;line-height:1.6;
  border:1px solid rgba(237,230,219,.3);padding:5px 11px;color:#DCD3C8;
}
.hero__note{font-size:14px;color:var(--kinari-2);margin-top:12px;letter-spacing:.04em;}

@media (min-width:768px){
  .hero__inner{flex-direction:row;align-items:flex-end;gap:44px;padding-bottom:64px;}
  .hero__body{flex:1;}
  /* 縦組みは高さを固定しない（固定すると「を。」だけ次の列に折れる） */
  .hero__title{font-size:44px;height:auto;max-height:min(64svh,430px);margin-bottom:6px;}
  .hero__body{padding-bottom:4px;}
  .hero__sub{font-size:16px;}
  .badges li{font-size:12px;}
}
/* 画面高が足りない端末（横向き等）でだけ横組みにフォールバック */
@media (max-height:620px){
  .hero__title{writing-mode:horizontal-tb;letter-spacing:.14em;max-height:none;}
}
@media (max-width:360px){
  .hero__title{font-size:29px;letter-spacing:.18em;}
}

/* ---------- grid / card ---------- */
.grid{display:grid;gap:2px;}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:repeat(2,1fr);}
@media (min-width:768px){
  .grid{gap:16px;}
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(3,1fr);}
}

.card{background:var(--men);border:1px solid var(--fuchi);border-radius:2px;overflow:hidden;}
.card__fig{overflow:hidden;}
.card__fig img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card__fig img{transform:scale(1.04);}
.card__body{padding:18px 16px 20px;}
.card__body .h3{font-size:16px;margin-bottom:8px;}
@media (min-width:768px){
  .card__body{padding:20px;}
  .card__body .h3{font-size:18px;}
}

.panel{
  background:var(--men);border:1px solid var(--fuchi);border-radius:2px;
  padding:28px 22px;transition:border-color .25s ease;
}
.panel:hover{border-color:rgba(224,90,34,.45);}
.panel .h3{padding-top:16px;}
.panel .h3::before{
  content:"";position:absolute;top:0;left:0;width:24px;height:2px;background:var(--okibi);
}
.panel .cap{margin-top:14px;}
.panel--sub .label{margin-bottom:10px;}
.panel__fig{margin:16px 0 20px;border:1px solid var(--fuchi);}
.panel__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;}
@media (min-width:768px){ .panel{padding:34px 30px;} }

.figwide{margin-bottom:16px;border:1px solid var(--fuchi);}
.figwide img{width:100%;aspect-ratio:16/9;object-fit:cover;}

/* ---------- 日本酒 見開き ---------- */
.spread{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  background:var(--men);border:1px solid var(--fuchi);
  padding:28px 20px;margin-bottom:44px;
}
.spread__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.spread__fig .cap{margin-top:10px;text-align:center;}
.spread__mid{text-align:center;padding:8px 0;}
.spread__line{
  font-family:var(--mincho);font-weight:500;
  font-size:22px;line-height:1.7;letter-spacing:.14em;color:var(--abura);
}
.spread__mid .label{margin:14px 0 0;}
@media (min-width:1024px){
  /* 中央を固定幅にしないと、一文が長いときに左右の写真が痩せる */
  .spread{grid-template-columns:1fr 264px 1fr;gap:36px;padding:48px 40px;}
  .spread__line{font-size:28px;}
  .spread__mid{padding:0;}
}

.sakelist{margin-top:36px;border-top:1px solid var(--fuchi);padding-top:28px;}
.sakelist__head{font-size:14px;letter-spacing:.08em;color:var(--kinari-2);margin-bottom:16px;}
.sakelist__items{display:flex;flex-wrap:wrap;gap:10px;}
.sakelist__items li{
  font-family:var(--mincho);font-size:17px;letter-spacing:.1em;
  border:1px solid var(--fuchi);padding:8px 16px;color:var(--kinari);
}

/* ---------- 名物 ---------- */
.meibutsu{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  margin-bottom:16px;
}
.meibutsu__fig{border:1px solid var(--fuchi);}
.meibutsu__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;}
@media (min-width:768px){
  .meibutsu{grid-template-columns:1.05fr 1fr;gap:40px;margin-bottom:16px;}
}

/* ---------- お品書き ---------- */
.menu{background:var(--men);border:1px solid var(--fuchi);padding:26px 20px;}
.menu__cat{
  font-family:var(--mincho);font-weight:500;font-size:17px;letter-spacing:.12em;
  color:var(--okibi);margin:26px 0 6px;
}
.menu__cat:first-child{margin-top:0;}
.menu__list{margin:0;}
.menu__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 2px;border-bottom:1px solid var(--fuchi);
}
.menu__row dt{font-size:17px;letter-spacing:.03em;}
.menu__row dd{
  margin:0;font-size:18px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;color:var(--kinari);
}
@media (min-width:768px){ .menu{padding:36px 34px;} }

/* ---------- アクセス ---------- */
.access{display:grid;grid-template-columns:1fr;gap:28px;}
.infotable{border-top:1px solid var(--fuchi);margin-bottom:24px;}
.infotable__row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:16px 2px;border-bottom:1px solid var(--fuchi);
}
.infotable__row dt{font-size:15px;color:var(--kinari-2);letter-spacing:.06em;}
.infotable__row dd{margin:0;font-size:17px;line-height:1.9;}
.infotable__row dd a{
  color:var(--okibi);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(224,90,34,.55);
}
.access__map{border:1px solid var(--fuchi);}
.access__map iframe{width:100%;height:320px;filter:invert(.92) hue-rotate(180deg) saturate(.7);}
@media (min-width:768px){
  .infotable__row{grid-template-columns:30% 1fr;gap:16px;align-items:baseline;}
}
@media (min-width:1024px){
  .access{grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .access__map iframe{height:100%;min-height:440px;}
}

/* ---------- CTA帯 ---------- */
.ctaband{
  padding-block:var(--sec);text-align:center;
  border-top:1px solid var(--fuchi);
  background:radial-gradient(80% 130% at 50% 100%,rgba(194,65,12,.20) 0%,rgba(20,16,14,0) 68%);
}
.ctaband .body{color:var(--kinari-2);margin-bottom:32px;}
.ctaband .note{margin-top:18px;}

/* ---------- フッター ---------- */
.footer{
  border-top:1px solid var(--fuchi);padding-block:44px 96px;
  font-size:15px;color:var(--kinari-2);line-height:1.9;
}
.footer__name{font-family:var(--mincho);font-size:19px;letter-spacing:.14em;color:var(--kinari);margin-bottom:12px;}
.footer__addr a{
  color:var(--okibi);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(224,90,34,.55);
}
.footer__copy{margin-top:24px;font-size:13px;color:var(--kinari-3);}
@media (min-width:768px){ .footer{padding-block:56px;} }

/* ---------- モバイル追従電話バー ---------- */
.telbar{
  position:fixed;left:0;bottom:0;width:100%;z-index:90;
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:60px;padding-bottom:env(safe-area-inset-bottom);
  background:var(--okibi-btn);color:#FFFFFF;text-decoration:none;
  font-size:16px;font-weight:600;letter-spacing:.06em;
  transform:translateY(100%);transition:transform .35s ease;
}
.telbar.is-on{transform:translateY(0);}
.telbar__num{font-size:17px;font-weight:700;letter-spacing:.02em;}
@media (min-width:768px){ .telbar{display:none;} }
@media (max-width:767px){ body{padding-bottom:60px;} }

/* ---------- reveal ----------
   JSが動く環境でのみ隠す。JS無効・JSエラー時は最初から表示されたままにする。 */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .6s ease-out;}
.js .reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .js .reveal{opacity:1;transform:none;}
  .telbar{transform:translateY(0);}
}