@charset "UTF-8";
/* ==========================================================================
   まぐろ解体ショー（maguro.html）専用の見た目
   ・土台は style.css / page.css / company.css / catering.css
   ・ここには、このページだけで使う部品を書いています
   ========================================================================== */

/* ---- こだわり3つ：写真が196pxなので、引き伸ばさない ---- */
.maguro-page .ct-feat figure img{ width:min(196px,72%); }
/* 見出しが1行と2行で混ざるので、高さをそろえて本文の開始位置を合わせる */
.maguro-page .ct-feat h3{ min-height:calc(2 * 1.75em); display:flex; align-items:center; justify-content:center; }

/* ---- 冒頭の大きい写真 ---- */
.mg-hero-photo{
  margin:clamp(34px,4vw,50px) 0 0;
  overflow:hidden;
  border:1px solid var(--line);
}
.mg-hero-photo img{
  display:block;width:100%;height:auto;
  aspect-ratio:2000/976;object-fit:cover;
  background:var(--washi-deep);
}

/* ---- 利用シーン ---- */
.mg-scene-lead{
  margin:clamp(30px,3.6vw,42px) 0 clamp(22px,2.6vw,30px);
  font-size:14.5px;line-height:2.15;letter-spacing:.04em;color:#4a443b;
}
.mg-scenes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);
}
.mg-scenes li{
  background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.mg-scenes figure{margin:0;}
.mg-scenes figure img{
  display:block;width:100%;height:auto;
  aspect-ratio:261/258;object-fit:cover;
  background:var(--washi-deep);
}
.mg-scenes h3{
  margin:0;padding:15px 14px 16px;text-align:center;
  font-family:var(--serif);font-weight:600;
  font-size:15px;line-height:1.7;letter-spacing:.08em;color:var(--ink);
}

/* ---- 料金の表 ---- */
.mg-price{margin:clamp(30px,3.6vw,42px) 0 0;}
.mg-price__label{
  margin:0 0 14px;display:inline-block;
  padding:7px 20px;background:var(--navy);color:#fff;
  font-family:var(--serif);font-weight:600;
  font-size:14px;letter-spacing:.12em;
}
.mg-table{
  width:100%;border-collapse:collapse;
  background:#fff;border:1px solid var(--line);
  margin:0 0 22px;
}
.mg-table th,
.mg-table td{
  padding:18px 20px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:middle;
  font-size:13.5px;line-height:1.95;letter-spacing:.04em;color:#4a443b;
}
.mg-table tr:last-child th,
.mg-table tr:last-child td{border-bottom:none;}
.mg-table th{
  width:11em;background:var(--washi);
  font-family:var(--serif);font-weight:600;
  font-size:15px;letter-spacing:.1em;color:var(--ink);
  border-right:1px solid var(--line);
}
.mg-table td.mg-table__price{
  width:10em;white-space:nowrap;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(19px,2.2vw,24px);letter-spacing:.04em;color:var(--enji);
}
.mg-table--cancel{max-width:520px;}
.mg-table--cancel th{width:9em;}

/* ---- よくあるご質問 ---- */
.mg-faq{margin:clamp(30px,3.6vw,42px) 0 0;}
.mg-faq > div{
  background:#fff;border:1px solid var(--line);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);
  margin:0 0 14px;
}
.mg-faq > div:last-child{margin-bottom:0;}
.mg-faq dt,
.mg-faq dd{position:relative;padding-left:40px;margin:0;}
.mg-faq dt{
  font-family:var(--serif);font-weight:600;
  font-size:16px;line-height:1.85;letter-spacing:.06em;color:var(--ink);
}
.mg-faq dd{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:13.5px;line-height:2.05;letter-spacing:.03em;color:#4a443b;
}
.mg-faq dt::before,
.mg-faq dd::before{
  position:absolute;left:0;top:-2px;
  font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.5;
}
.mg-faq dt::before{content:"Q";color:var(--enji);}
.mg-faq dd::before{content:"A";color:var(--gold);top:12px;}

/* ==========================================================================
   スマホ
   ========================================================================== */
@media (max-width:860px){
  .mg-scenes{grid-template-columns:repeat(2,1fr);gap:12px;}
}
@media (max-width:640px){
  .mg-scenes h3{font-size:13.5px;padding:12px 10px 13px;letter-spacing:.04em;}

  .mg-table th,
  .mg-table td{display:block;width:auto;border-right:none;padding:14px 16px;}
  .mg-table th{border-bottom:none;padding-bottom:4px;background:#fff;}
  .mg-table td{border-bottom:none;padding-top:4px;}
  .mg-table tr{display:block;border-bottom:1px solid var(--line);}
  .mg-table tr:last-child{border-bottom:none;}
  .mg-table td.mg-table__price{font-size:21px;padding-bottom:8px;}

  .mg-faq dt{font-size:15px;}
  .mg-faq dt,
  .mg-faq dd{padding-left:32px;}
  .mg-faq dt::before,
  .mg-faq dd::before{font-size:18px;}
}