@charset "utf-8";
/* ==========================================================================
   有限会社 丸中精肉店 — 共通スタイル
   ========================================================================== */

/* --- 1. トークン ------------------------------------------------------- */
:root{
  /* 色 */
  --sumi:#1c1714;          /* 墨 */
  --sumi-80:#3a322b;
  --sumi-60:#6b6055;
  --kinari:#f6f2e9;        /* 生成り（紙） */
  --kinari-2:#efe9dc;
  --kinari-3:#e4dccb;
  --rule:#d9d0bd;          /* 罫 */
  --enji:#8c2318;          /* 臙脂 */
  --enji-2:#a83526;
  --kincha:#a8874a;        /* 金茶 */
  --white:#fffdf8;

  /* 書体 */
  --serif:"Shippori Mincho B1","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Noto Sans JP","Yu Gothic","YuGothic","Hiragino Sans",sans-serif;
  --latin:"Lora",var(--serif);

  /* 寸法 */
  --hdr:66px;
  --safe-x:max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --safe-b:env(safe-area-inset-bottom,0px);
  --gutter:max(20px,var(--safe-x));
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:768px){ :root{ --hdr:80px; --gutter:max(32px,var(--safe-x)); } }
@media (min-width:1100px){ :root{ --gutter:max(48px,var(--safe-x)); } }

/* --- 2. リセット ------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 16px); }
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:2;
  color:var(--sumi);
  background:var(--kinari);
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  /* 数字は高さの揃うライニング数字で統一する（オールドスタイル数字の上下のばらつき防止） */
  font-variant-numeric:lining-nums proportional-nums;
  overflow-x:hidden;
  text-align:justify;
  text-justify:inter-ideograph;
}
@media (min-width:768px){ body{ font-size:16px; } }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--enji); outline-offset:3px; }

/* 紙の目（ごく薄いノイズ） */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:1; }

/* --- 3. レイアウト部品 ------------------------------------------------- */
.l-wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.l-wrap--narrow{ max-width:880px; }
.l-section{ padding-block:clamp(56px,9vw,110px); }
.l-section--tight{ padding-block:clamp(40px,6vw,72px); }
.l-section--paper{ background:var(--kinari-2); }
.l-section--dark{ background:var(--sumi); color:var(--kinari); }
.l-section--dark p,.l-section--dark .c-lead{ color:#cdc4b6; }

/* --- 4. 見出し --------------------------------------------------------- */
.c-label{
  display:flex; align-items:center; gap:.75em;
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.22em; color:var(--enji); margin-bottom:1.1em;
}
.c-label::before{ content:""; width:28px; height:1px; background:currentColor; flex:none; }
.l-section--dark .c-label{ color:var(--kincha); }
.c-label--center{ justify-content:center; }

.c-head{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px,4.6vw,40px); line-height:1.55; letter-spacing:.08em;
  margin-bottom:.7em; text-align:left;
}
.c-head small{ display:block; font-family:var(--latin); font-size:.42em; letter-spacing:.26em; color:var(--sumi-60); margin-top:1em; font-weight:400; }
.l-section--dark .c-head small{ color:var(--kincha); }
.c-head--center{ text-align:center; }
.c-head--center + .c-lead{ text-align:center; }

.c-sub{ font-family:var(--serif); font-size:clamp(18px,2.6vw,24px); font-weight:600; line-height:1.7; letter-spacing:.06em; }

.c-lead{ max-width:44em; color:var(--sumi-80); line-height:2.15; }
.c-lead--center{ margin-inline:auto; }
.c-lead + .c-lead{ margin-top:1.4em; }

/* --- 5. ボタン --------------------------------------------------------- */
.c-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:52px; padding:.85em 2.1em;
  font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.14em; line-height:1.5;
  border:1px solid var(--sumi); color:var(--sumi); background:transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  text-align:center;
}
.c-btn:hover{ background:var(--sumi); color:var(--kinari); }
.c-btn--fill{ background:var(--sumi); color:var(--kinari); }
.c-btn--fill:hover{ background:var(--enji); border-color:var(--enji); color:var(--white); }
.c-btn--enji{ background:var(--enji); border-color:var(--enji); color:var(--white); }
.c-btn--enji:hover{ background:var(--sumi); border-color:var(--sumi); }
.c-btn--light{ border-color:rgba(246,242,233,.45); color:var(--kinari); }
.c-btn--light:hover{ background:var(--kinari); color:var(--sumi); border-color:var(--kinari); }
.c-btn--wide{ width:100%; }
.c-btn__arrow{ font-family:var(--latin); font-size:1.15em; line-height:1; }

.c-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2em; }
.c-btns--center{ justify-content:center; }
@media (max-width:560px){ .c-btns{ flex-direction:column; } .c-btns .c-btn{ width:100%; } }

/* --- 6. ヘッダー ------------------------------------------------------- */
.l-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,242,233,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.l-header__inner{
  height:var(--hdr); display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1460px; margin-inline:auto; padding-inline:var(--gutter);
}
.l-logo{ display:flex; align-items:center; gap:11px; flex:none; min-width:0; }
.l-logo__mark{ width:38px; height:38px; flex:none; }
.l-logo__txt{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.l-logo__name{ font-family:var(--serif); font-size:clamp(15px,3.4vw,19px); font-weight:600; letter-spacing:.13em; line-height:1.25; white-space:nowrap; }
.l-logo__name span{ font-size:.72em; letter-spacing:.06em; }
.l-logo__since{ font-family:var(--latin); font-size:10px; letter-spacing:.16em; color:var(--sumi-60); line-height:1.4; margin-top:2px; white-space:nowrap; }
@media (min-width:768px){ .l-logo__mark{ width:44px; height:44px; } .l-logo__since{ font-size:11px; letter-spacing:.18em; } }
/* 小さい端末では英字の副題を省き、屋号だけにする（ハンバーガーとの衝突を防ぐ） */
@media (max-width:399px){ .l-logo__since{ display:none; } .l-logo__mark{ width:34px; height:34px; } .l-logo{ gap:9px; } }

.l-gnav{ display:none; }
@media (min-width:1200px){
  .l-gnav{ display:flex; align-items:center; gap:clamp(14px,1.6vw,28px); }
  .l-gnav__link{
    position:relative; font-size:13.5px; font-weight:500; letter-spacing:.09em; white-space:nowrap;
    padding-block:6px; transition:color .3s var(--ease);
  }
  .l-gnav__link::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--enji); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
  }
  .l-gnav__link:hover{ color:var(--enji); }
  .l-gnav__link:hover::after,.l-gnav__link.is-current::after{ transform:scaleX(1); }
  .l-gnav__link.is-current{ color:var(--enji); }
  .l-gnav__tel{ display:flex; flex-direction:column; align-items:flex-end; margin-left:4px; padding-left:clamp(16px,1.9vw,24px); border-left:1px solid var(--rule); }
  .l-gnav__tel b{ white-space:nowrap; font-family:var(--latin); font-size:19px; font-weight:600; letter-spacing:.01em; line-height:1.2; }
  .l-gnav__tel span{ font-size:10px; letter-spacing:.1em; color:var(--sumi-60); line-height:1.4; }
}

/* ハンバーガー */
.l-burger{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; width:44px; height:44px; flex:none; margin-right:-10px; }
.l-burger span{ display:block; width:24px; height:1.5px; background:var(--sumi); transition:transform .35s var(--ease),opacity .2s; }
.l-burger.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(41deg); }
.l-burger.is-open span:nth-child(2){ opacity:0; }
.l-burger.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-41deg); }
@media (min-width:1200px){ .l-burger{ display:none; } }

/* ドロワー */
.l-drawer{
  position:fixed; inset:var(--hdr) 0 0; z-index:99;
  background:var(--kinari); border-top:1px solid var(--rule);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.l-drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.l-drawer__inner{ padding:8px var(--gutter) 56px; }
.l-drawer__link{
  display:flex; align-items:baseline; gap:14px;
  padding:19px 2px; border-bottom:1px solid var(--rule);
  font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.1em;
}
/* 英字ラベルの幅を固定し、日本語の項目名を縦に揃える */
.l-drawer__link i{ font-family:var(--latin); font-style:normal; font-size:11px; letter-spacing:.16em; color:var(--enji); flex:none; width:78px; }
.l-drawer__link.is-current{ color:var(--enji); }
.l-drawer__foot{ margin-top:30px; display:grid; gap:12px; }
@media (min-width:1200px){ .l-drawer{ display:none; } }
body.is-locked{ overflow:hidden; }

/* --- 7. フッター ------------------------------------------------------- */
.l-footer{ background:var(--sumi); color:#cdc4b6; padding-top:clamp(48px,7vw,80px); }
.l-footer a:hover{ color:var(--kincha); }
.l-footer__top{ display:grid; gap:40px; }
@media (min-width:900px){ .l-footer__top{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; } }
.l-footer__logo{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.l-footer__logo .l-logo__mark{ width:46px; height:46px; }
.l-footer__name{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.14em; color:var(--kinari); line-height:1.4; }
.l-footer__name span{ font-size:.7em; }
.l-footer__addr{ font-size:13.5px; line-height:2.1; font-style:normal; }
.l-footer__addr dt{ float:left; clear:left; width:5.6em; color:var(--kincha); font-size:11.5px; letter-spacing:.08em; }
.l-footer__addr dd{ margin-left:5.6em; }
/* SNS（フッター） */
.l-sns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.l-sns a{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:12.5px; letter-spacing:.08em; line-height:1;
  padding:11px 15px; border:1px solid rgba(246,242,233,.24); color:#cdc4b6;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.l-sns a:hover{ border-color:var(--kincha); color:var(--kincha); }
.l-sns svg{ width:17px; height:17px; flex:none; }

.l-footer__nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; }
.l-footer__nav a{ font-size:13.5px; letter-spacing:.08em; padding-block:5px; display:inline-block; }
.l-footer__bottom{
  margin-top:clamp(40px,6vw,64px); border-top:1px solid rgba(246,242,233,.14);
  padding-block:22px; font-size:11px; letter-spacing:.1em; color:#8a7f72;
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;
}
.l-footer__copy{ font-family:var(--latin); letter-spacing:.14em; }

/* --- 8. ページ見出し（下層） ------------------------------------------- */
.p-pagehead{
  background:var(--sumi); color:var(--kinari);
  padding-block:clamp(52px,9vw,92px);
}
.p-pagehead__jp{ font-family:var(--serif); font-size:clamp(25px,5.2vw,42px); font-weight:600; letter-spacing:.14em; line-height:1.45; }
.p-pagehead__en{ font-family:var(--latin); font-size:11px; letter-spacing:.3em; color:var(--kincha); margin-top:1.1em; }
.p-breadcrumb{ font-size:11px; letter-spacing:.06em; color:var(--sumi-60); padding-block:14px; border-bottom:1px solid var(--rule); }
.p-breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4em; }
.p-breadcrumb li:not(:last-child)::after{ content:"／"; margin-left:.4em; color:var(--rule); }
.p-breadcrumb a:hover{ color:var(--enji); }

/* --- 9. 汎用パーツ ----------------------------------------------------- */
.c-table{ font-size:14px; line-height:1.95; }
.c-table th,.c-table td{ padding:16px 4px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
.c-table th{ font-weight:600; letter-spacing:.08em; white-space:nowrap; width:9em; color:var(--sumi-80); }
@media (max-width:600px){
  .c-table,.c-table tbody,.c-table tr,.c-table th,.c-table td{ display:block; width:auto; }
  .c-table tr{ padding-block:14px; border-bottom:1px solid var(--rule); }
  .c-table th{ border:0; padding:0 0 4px; font-size:11.5px; letter-spacing:.14em; color:var(--enji); white-space:normal; }
  .c-table td{ border:0; padding:0; }
}

.c-alt{ display:grid; gap:clamp(24px,4vw,44px); align-items:center; }
@media (min-width:860px){
  .c-alt{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5vw,72px); }
  .c-alt--rev .c-alt__media{ order:2; }
}
.c-alt + .c-alt{ margin-top:clamp(48px,8vw,96px); }
.c-alt__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.c-alt__num{ font-family:var(--latin); font-size:12px; letter-spacing:.24em; color:var(--kincha); margin-bottom:1.4em; }

.c-cards{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:640px){ .c-cards--3,.c-cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .c-cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.c-card{ background:var(--kinari); padding:clamp(26px,3.4vw,38px); display:flex; flex-direction:column; }
.l-section--paper .c-card{ background:var(--kinari-2); }
.c-card__num{ font-family:var(--latin); font-size:11px; letter-spacing:.24em; color:var(--enji); margin-bottom:1.5em; }
.c-card__ttl{ font-family:var(--serif); font-size:clamp(17px,2.4vw,21px); font-weight:600; letter-spacing:.06em; line-height:1.6; margin-bottom:.9em; }
.c-card p{ font-size:14px; line-height:2.05; color:var(--sumi-80); }

.c-notelist{ border-top:1px solid var(--rule); }
.c-notelist li{ border-bottom:1px solid var(--rule); }
.c-notelist a,.c-notelist > li > div{ display:block; padding:18px 2px; }
.c-notelist time{ font-family:var(--latin); font-size:12.5px; letter-spacing:.14em; color:var(--sumi-60); display:block; }
.c-notelist p{ font-size:14.5px; line-height:1.85; margin-top:4px; }
@media (min-width:700px){
  .c-notelist a,.c-notelist > li > div{ display:flex; gap:28px; align-items:baseline; }
  .c-notelist time{ flex:none; width:7em; }
  .c-notelist p{ margin-top:0; }
}
.c-notelist a:hover p{ color:var(--enji); }

.c-note{ font-size:12px; line-height:1.95; color:var(--sumi-60); }
.c-note li{ padding-left:1.1em; position:relative; }
.c-note li::before{ content:"※"; position:absolute; left:0; }
.l-section--dark .c-note{ color:#9c9184; }

.c-tmp{
  display:inline-block; vertical-align:middle; margin-left:.5em;
  font-size:10px; font-weight:700; letter-spacing:.1em; line-height:1;
  padding:4px 7px; color:#8a6b1f; background:#f3e6c4; border:1px solid #ddc88c;
  white-space:nowrap;
}

/* --- 10. 追従CTA（スマホ） --------------------------------------------- */
.l-fixcta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(0,0,0,.12);
  transform:translateY(100%); transition:transform .4s var(--ease);
}
.l-fixcta.is-shown{ transform:none; }
.l-fixcta a{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  min-height:calc(58px + var(--safe-b)); padding:8px 8px calc(8px + var(--safe-b)); font-size:13px; font-weight:700; letter-spacing:.06em; color:#fff;
}
.l-fixcta a:first-child{ background:var(--sumi); }
.l-fixcta a:last-child{ background:#06c755; }
.l-fixcta svg{ width:17px; height:17px; flex:none; fill:currentColor; }
@media (min-width:1200px){ .l-fixcta{ display:none; } }
@media (max-width:1199px){ .l-footer{ padding-bottom:calc(58px + var(--safe-b)); } }

/* --- 11. 演出・ユーティリティ ------------------------------------------ */
.js-fade{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.js-fade.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js-fade{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
.u-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }