@charset "utf-8";
/* ==========================================================================
   有限会社 丸中精肉店 — ページ個別スタイル（出張BBQ以外）
   ========================================================================== */

/* --- トップ：メインビジュアル ------------------------------------------ */
.p-hero{
  position:relative;
  min-height:clamp(430px,76svh,740px);
  display:grid; grid-template-rows:1fr auto;
  background:var(--sumi); overflow:hidden;
}
.p-hero__media{ position:absolute; inset:0; }
.p-hero__media img{ width:100%; height:100%; object-fit:cover; }
/* 正方形写真（エプロン）は肉の位置に寄せてトリミング */
.p-hero__media--apron img{ object-position:50% 62%; }
.p-hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(18,14,12,.55) 0%,rgba(18,14,12,.22) 38%,rgba(18,14,12,.86) 100%);
}
.p-hero__body{
  position:relative; grid-row:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gutter) clamp(44px,7vw,80px);
  color:var(--kinari);
}
/* 写真の肉の色と重ならないよう、暗い下地に明るい金色で載せる */
.p-hero__since{
  display:inline-block;
  font-family:var(--latin); font-size:11.5px; font-weight:600; letter-spacing:.3em; line-height:1;
  color:#f1dba6; background:rgba(18,14,12,.72);
  border:1px solid rgba(232,200,128,.55);
  padding:.75em .9em .75em 1.2em; margin-bottom:1.6em;
}
.p-hero__copy{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px,7.2vw,60px); line-height:1.42; letter-spacing:.09em;
  text-shadow:0 2px 24px rgba(0,0,0,.42); max-width:16em;
}
.p-hero__copy em{ font-style:normal; color:#e9c880; }
.p-hero__note{
  margin-top:1.7em; max-width:30em; font-size:13.5px; line-height:2.1;
  color:#ded5c6; text-shadow:0 1px 14px rgba(0,0,0,.5);
}
/* 縦書きの帯（大画面のみ・本文とは領域を分ける） */
.p-hero__tate{
  display:none; position:absolute; top:clamp(28px,5vw,56px); right:var(--gutter);
  writing-mode:vertical-rl; font-family:var(--serif); font-size:14px; font-weight:600;
  letter-spacing:.42em; color:rgba(246,242,233,.82);
  padding:1.4em .7em; border-left:1px solid rgba(232,200,128,.5); border-right:1px solid rgba(232,200,128,.5);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
@media (min-width:1100px){ .p-hero__tate{ display:block; } .p-hero__body{ padding-right:calc(var(--gutter) + 90px); } }

/* スクロール誘導 */
.p-hero__scroll{
  position:absolute; left:50%; bottom:0; width:1px; height:clamp(36px,6vw,60px);
  background:rgba(246,242,233,.3); overflow:hidden;
}
.p-hero__scroll::after{
  content:""; position:absolute; inset:0; background:var(--kincha);
  animation:scrolline 2.4s var(--ease) infinite;
}
@keyframes scrolline{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* --- トップ：ごあいさつ ------------------------------------------------ */
.p-greet{ display:grid; gap:clamp(28px,5vw,64px); }
@media (min-width:980px){ .p-greet{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); } }
.p-greet__tate{
  font-family:var(--serif); font-weight:600; letter-spacing:.14em; line-height:1.9;
  font-size:clamp(22px,4.4vw,32px);
}
@media (min-width:980px){
  .p-greet__tate{ writing-mode:vertical-rl; height:14em; margin-inline:auto 0; letter-spacing:.2em; }
}
.p-greet__tate b{ font-weight:600; color:var(--enji); }
.p-greet__sign{ margin-top:2.4em; font-family:var(--serif); font-size:14px; letter-spacing:.12em; color:var(--sumi-60); }
.p-greet__sign b{ font-size:1.35em; color:var(--sumi); letter-spacing:.14em; margin-left:.6em; font-weight:600; display:inline-block; white-space:nowrap; }

/* --- こだわり（数字つき交互） ------------------------------------------ */
.p-craft__item{ display:grid; gap:clamp(22px,4vw,40px); align-items:center; }
@media (min-width:880px){
  .p-craft__item{ grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(40px,5.5vw,80px); }
  .p-craft__item:nth-child(even) .p-craft__media{ order:2; }
}
.p-craft__item + .p-craft__item{ margin-top:clamp(44px,7vw,92px); padding-top:clamp(44px,7vw,92px); border-top:1px solid var(--rule); }
.p-craft__media{ position:relative; }
.p-craft__media img{ width:100%; aspect-ratio:10/7; object-fit:cover; }
.p-craft__ttl{ font-family:var(--serif); font-size:clamp(21px,3.4vw,30px); font-weight:600; line-height:1.6; letter-spacing:.08em; margin-bottom:.9em; }
.p-craft__ttl span{ display:inline-block; }
.p-craft__kicker{ font-family:var(--latin); font-size:12px; letter-spacing:.26em; color:var(--kincha); margin-bottom:1.5em; }
.p-craft__txt{ font-size:14.5px; line-height:2.2; color:var(--sumi-80); }
.p-craft__txt + .p-craft__txt{ margin-top:1.3em; }

/* --- 商品グリッド ------------------------------------------------------ */
.p-prod{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:900px){ .p-prod{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.p-prod__item{ background:var(--kinari); display:flex; flex-direction:column; }
.l-section--paper .p-prod__item{ background:var(--kinari-2); }
.p-prod__item img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.p-prod__body{ padding:clamp(16px,2.6vw,26px); flex:1; display:flex; flex-direction:column; }
.p-prod__ttl{ font-family:var(--serif); font-size:clamp(15px,2.2vw,19px); font-weight:600; letter-spacing:.06em; line-height:1.6; }
.p-prod__en{ font-family:var(--latin); font-size:10px; letter-spacing:.22em; color:var(--kincha); margin-top:.7em; }
.p-prod__txt{ font-size:12.5px; line-height:1.95; color:var(--sumi-60); margin-top:1em; }
@media (min-width:700px){ .p-prod__txt{ font-size:13.5px; } }

/* --- 商品詳細（取扱商品ページ） ---------------------------------------- */
.p-menu{ border-top:1px solid var(--rule); }
.p-menu__row{ display:grid; gap:2px 24px; padding-block:17px; border-bottom:1px solid var(--rule); }
@media (min-width:640px){ .p-menu__row{ grid-template-columns:minmax(0,1fr) auto; align-items:baseline; } }
.p-menu__name{ font-size:15px; font-weight:500; letter-spacing:.04em; line-height:1.75; }
.p-menu__name small{ display:block; font-size:12.5px; color:var(--sumi-60); font-weight:400; letter-spacing:.02em; margin-top:2px; }
.p-menu__price{ font-family:var(--latin); font-size:17px; letter-spacing:.06em; color:var(--sumi-80); white-space:nowrap; }
@media (min-width:640px){ .p-menu__price{ text-align:right; } }

/* --- メニュー（お肉の一覧） ------------------------------------------- */
.p-meatnav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2em; }
.p-meatnav a{ padding:.5em 1.1em; border:1px solid var(--rule); font-size:13.5px; letter-spacing:.06em; transition:color .3s,border-color .3s; }
.p-meatnav a:hover{ color:var(--enji); border-color:var(--enji); }
.p-meat .p-menu{ margin-top:.3em; }
/* カード内は幅が狭いので、価格も同じ行の右端に置く */
.p-meat .p-menu__row{ grid-template-columns:minmax(0,1fr) auto; align-items:baseline; padding-block:12px; }
.p-meat .p-menu__name{ font-size:14.5px; line-height:1.7; color:var(--sumi); }
.p-meat__unit{ font-family:var(--sans); font-size:12px; font-weight:400; letter-spacing:.04em; color:var(--sumi-60); margin-left:.9em; }
/* 産地は名前の下、価格（税抜＋税込）は右端 */
.p-meat .p-menu__name small{ font-size:11.5px; line-height:1.6; }
.p-meat .p-menu__price{ font-size:16px; line-height:1.5; color:var(--sumi); text-align:right; }
.p-meat .p-menu__price span{ font-family:var(--sans); font-size:12px; margin-left:1px; }
.p-meat .p-menu__price small{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.02em; color:var(--sumi-60); }

/* --- トップ：直営焼肉店の写真 ------------------------------------------ */
.p-yakiphoto{ margin-bottom:clamp(20px,3vw,32px); }
.p-yakiphoto img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 60%; }
@media (min-width:768px){ .p-yakiphoto img{ aspect-ratio:16/7; } }

/* --- BBQ 誘導バンド ----------------------------------------------------
   リンク先（出張BBQページ）の明るいトーンをそのまま予告する区画      */
.p-bbqband{
  background:
    radial-gradient(48% 60% at 88% 20%,rgba(255,179,31,.30) 0%,rgba(255,179,31,0) 62%),
    #fff3e4;
  color:#32200f;
}
.p-bbqband__inner{
  display:grid; gap:clamp(26px,4vw,48px); align-items:center;
  padding-block:clamp(52px,8vw,96px);
}
@media (min-width:900px){
  .p-bbqband__inner{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(40px,5vw,72px); }
  .p-bbqband__media{ order:2; }
}
.p-bbqband__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:20px; box-shadow:0 12px 30px rgba(170,105,45,.16);
}
.p-bbqband__kicker{
  display:inline-block; font-family:"Archivo",var(--sans);
  font-size:12px; font-weight:800; letter-spacing:.16em; color:#ff6a1f;
  background:#fff; border-radius:999px; padding:7px 15px; margin-bottom:1.1em;
  box-shadow:0 6px 16px rgba(170,105,45,.12);
}
.p-bbqband__ttl{
  font-family:"Zen Kaku Gothic New",var(--sans); font-weight:900;
  font-size:clamp(24px,5vw,42px); line-height:1.4; letter-spacing:.01em; max-width:14em;
}
.p-bbqband__ttl em{ font-style:normal; color:#ff6a1f; }
.p-bbqband__ttl mark{
  background:linear-gradient(transparent 60%,#ffb31f 60%,#ffb31f 94%,transparent 94%);
  color:inherit; padding-inline:.06em;
}
.p-bbqband__txt{ margin-top:1.3em; max-width:32em; font-size:14px; line-height:2.1; color:#7a6250; }
.p-bbqband .c-btn{
  border:0; border-radius:999px; min-height:56px; padding:.9em 2.2em;
  font-family:"Zen Kaku Gothic New",var(--sans); font-weight:700; font-size:14px; letter-spacing:.06em;
  background:#ff6a1f; color:#fff; box-shadow:0 8px 20px rgba(255,106,31,.34);
}
.p-bbqband .c-btn:hover{ background:#e8530a; color:#fff; }

/* --- 店舗情報 ---------------------------------------------------------- */
.p-shopinfo{ display:grid; gap:clamp(28px,4.5vw,56px); }
@media (min-width:920px){ .p-shopinfo{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }
.p-shopinfo__map img,
.p-shopinfo__map iframe{ display:block; width:100%; aspect-ratio:7/4; object-fit:cover; border:1px solid var(--rule); }
.p-hours{ border-top:1px solid var(--rule); }
.p-hours__row{ display:flex; justify-content:space-between; gap:16px; padding:13px 2px; border-bottom:1px solid var(--rule); font-size:14px; }
.p-hours__row dt{ letter-spacing:.1em; }
.p-hours__row dd{ font-family:var(--latin); font-size:16px; letter-spacing:.06em; }
.p-pay{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.2em; }
.p-pay li{ font-size:11.5px; letter-spacing:.06em; line-height:1; padding:8px 11px; border:1px solid var(--rule); color:var(--sumi-80); background:var(--kinari); }
.l-section--paper .p-pay li{ background:var(--kinari-2); }

/* --- 写真ギャラリー ---------------------------------------------------- */
/* 点数が少ない紹介写真なので、スマホでは1列で大きく見せる */
.p-gallery{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(12px,2.6vw,16px); }
@media (min-width:560px){ .p-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px,1.4vw,16px); } }
@media (min-width:860px){ .p-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.p-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.p-gallery figcaption{ font-size:11.5px; letter-spacing:.06em; color:var(--sumi-60); margin-top:.7em; line-height:1.7; }

/* --- 沿革（会社案内） -------------------------------------------------- */
.p-history{ border-top:1px solid var(--rule); }
.p-history__row{ display:grid; gap:2px 30px; padding-block:18px; border-bottom:1px solid var(--rule); }
@media (min-width:700px){ .p-history__row{ grid-template-columns:11em minmax(0,1fr); align-items:baseline; } }
.p-history__year{ font-family:var(--latin); font-size:15px; letter-spacing:.1em; color:var(--enji); }
.p-history__year small{ font-family:var(--sans); font-size:11px; letter-spacing:.06em; color:var(--sumi-60); margin-left:.6em; }
.p-history__txt{ font-size:14.5px; line-height:1.95; }

/* --- 法人向け：流れ ---------------------------------------------------- */
.p-flow{ counter-reset:flow; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:760px){ .p-flow{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .p-flow--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.p-flow__item{ counter-increment:flow; background:var(--kinari); padding:clamp(24px,3.2vw,34px); }
.l-section--paper .p-flow__item{ background:var(--kinari-2); }
.p-flow__item::before{
  content:"STEP " counter(flow); display:block;
  font-family:var(--latin); font-size:11px; letter-spacing:.26em; color:var(--enji); margin-bottom:1.3em;
}
.p-flow__ttl{ font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.06em; line-height:1.6; margin-bottom:.8em; }
.p-flow__item p{ font-size:13.5px; line-height:2; color:var(--sumi-80); }

/* --- お問い合わせ ------------------------------------------------------ */
.p-contact{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:820px){ .p-contact{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.p-contact__box{ background:var(--kinari); padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; }
.l-section--paper .p-contact__box{ background:var(--kinari-2); }
.p-contact__icon{ width:34px; height:34px; margin-bottom:1.3em; }
.p-contact__ttl{ font-family:var(--serif); font-size:clamp(18px,2.6vw,22px); font-weight:600; letter-spacing:.06em; margin-bottom:.8em; }
.p-contact__txt{ font-size:13.5px; line-height:2.05; color:var(--sumi-80); margin-bottom:1.8em; }
.p-contact__tel{
  display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--latin); font-size:clamp(28px,5.6vw,38px); font-weight:600; letter-spacing:.03em; line-height:1.15;
}
.p-contact__tel span{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--enji); }
.p-contact__sub{ font-size:12px; letter-spacing:.06em; color:var(--sumi-60); margin-top:.7em; line-height:1.8; }
.p-contact__foot{ margin-top:auto; padding-top:1.8em; }
.c-btn--line{ background:#06c755; border-color:#06c755; color:#fff; }
.c-btn--line:hover{ background:#05a948; border-color:#05a948; color:#fff; }
.c-btn--line svg{ width:19px; height:19px; fill:currentColor; flex:none; }

/* --- Instagram 誘導（お問い合わせページ） ------------------------------ */
.p-snsband{
  display:grid; gap:clamp(20px,3vw,36px); align-items:center;
  border:1px solid var(--rule); padding:clamp(26px,3.6vw,44px);
}
@media (min-width:760px){ .p-snsband{ grid-template-columns:minmax(0,1fr) auto; } }
.p-snsband__ttl{ font-family:var(--serif); font-size:clamp(18px,2.6vw,23px); font-weight:600; letter-spacing:.06em; line-height:1.6; margin-bottom:.7em; }
.p-snsband p{ font-size:13.5px; line-height:2.05; color:var(--sumi-80); }
.p-snsband .c-btn svg{ width:19px; height:19px; flex:none; }
@media (max-width:759px){ .p-snsband .c-btn{ width:100%; } }
/* 小さい端末では、アカウント名（途中で折り返せない一語）が収まるよう詰める */
@media (max-width:420px){
  .p-snsband{ padding:24px 18px; }
  .p-snsband .c-btn{ padding-inline:1.2em; font-size:12px; letter-spacing:.06em; overflow-wrap:anywhere; }
}

/* --- Q&A --------------------------------------------------------------- */
.p-qa{ border-top:1px solid var(--rule); }
.p-qa__item{ border-bottom:1px solid var(--rule); }
.p-qa__q{
  display:flex; gap:14px; align-items:flex-start; width:100%; text-align:left;
  padding:20px 2px; font-family:var(--serif); font-size:15.5px; font-weight:600; letter-spacing:.05em; line-height:1.75;
}
.p-qa__q i{ font-family:var(--latin); font-style:normal; font-size:16px; color:var(--enji); flex:none; line-height:1.7; }
.p-qa__q span{ flex:1; }
.p-qa__q::after{
  content:""; flex:none; width:11px; height:11px; margin-top:.55em;
  border-right:1px solid var(--sumi-60); border-bottom:1px solid var(--sumi-60);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.p-qa__item.is-open .p-qa__q::after{ transform:rotate(-135deg); }
.p-qa__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--ease); }
.p-qa__item.is-open .p-qa__a{ grid-template-rows:1fr; }
.p-qa__a > div{ overflow:hidden; }
.p-qa__a p{ font-size:13.5px; line-height:2.1; color:var(--sumi-80); padding:0 2px 22px 30px; }

/* --- 直営焼肉店（店舗案内） --------------------------------------------- */
/* 内観写真＋店舗名（クリックで各店の公式ページへ）。カードは写真のみ */
.p-yaki{ padding:0; }
.p-yaki__photo{
  --pad:clamp(26px,3.4vw,38px);
  position:relative; display:block; overflow:hidden; color:var(--white);
}
.p-yaki__photo img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); }
.p-yaki__photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(28,23,20,.82) 0%, rgba(28,23,20,.35) 45%, rgba(28,23,20,0) 72%);
}
.p-yaki__cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:0 var(--pad) calc(var(--pad) * .8); }
.p-yaki__area{ display:block; font-family:var(--latin); font-size:11px; letter-spacing:.24em; color:var(--kinari-3); margin-bottom:.7em; }
.p-yaki__name{ font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); font-weight:600; letter-spacing:.06em; line-height:1.55; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.p-yaki__arrow{ display:inline-block; margin-left:.6em; font-family:var(--latin); transition:transform .3s var(--ease); }
.p-yaki__photo:hover img{ transform:scale(1.04); }
.p-yaki__photo:hover .p-yaki__arrow{ transform:translateX(5px); }
.p-yaki__photo:focus-visible{ outline:2px solid var(--enji); outline-offset:-2px; }