/* ==========================================================================
   components.css — ヘッダー / フッター / ボタン / カード / 表 / 帯 / CTA
   🔴 border-top / border-left のカラーアクセント線は 1本も書かない。
   🔴 金 (--c-gold) は線と記号のみ。背景（面）に使わない。
   ========================================================================== */

/* ---- ヘッダー（9ページ共通・1コンポーネント）----------------------------- */
.mg-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--c-line);
}
/* ヘッダーはナビとCTAを抱えるので、本文コンテナ(1120px)より広い枠で受ける。
   🔴 1120pxのままだと 1440px でも中身の合計が約1300pxになり、
      グローバルナビが縦組みに潰れて横スクロールも発生する（実測）。 */
.mg-header .mg-container { max-width: 1400px; }
.mg-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--gutter-m);
}
.mg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.mg-brand__mark { width: 44px; height: 44px; object-fit: contain; }
.mg-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.mg-brand__sub { font-size: var(--fs-label); letter-spacing: .1em; color: var(--c-text-sub); }
.mg-brand__name { font-family: var(--ff-head); font-size: 20px; font-weight: 600; color: var(--c-navy); letter-spacing: .06em; }

.mg-gnav { margin-left: auto; }
.mg-gnav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.mg-gnav li { margin: 0; }
.mg-gnav a {
  display: block; padding: 6px 2px;
  font-size: 14px; white-space: nowrap; text-decoration: none; color: var(--c-text);
  border-bottom: 2px solid transparent;
}
.mg-gnav a:hover { color: var(--c-navy); border-bottom-color: var(--c-line); }
/* 現在地表示。ページごとに変えるのはここだけ */
.mg-gnav .current-menu-item > a,
.mg-gnav .is-current > a { color: var(--c-navy); border-bottom-color: var(--c-navy); font-weight: 500; }

/* デスクトップは右端のCTAに導線を一本化。モバイルメニューには残す。 */
@media (min-width: 1320px) {
  .mg-gnav a[href*="/contact/"] { display: none; }
}

.mg-header__cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.mg-tel { text-decoration: none; text-align: right; line-height: 1.25; }
.mg-tel__label { display: block; font-size: var(--fs-label); color: var(--c-text-sub); letter-spacing: .04em; }
.mg-tel__num { display: block; font-family: var(--ff-num); font-weight: 900; font-size: 20px; color: var(--c-navy); font-variant-numeric: tabular-nums; }

.mg-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--c-line); background: #fff; border-radius: var(--radius); }
.mg-burger span { display: block; width: 20px; height: 1px; background: var(--c-navy); margin: 5px auto; transition: .2s var(--ease); }
.mg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 横並びナビ＋電話＋CTAの実測合計は約1220px。余裕をみて1320px未満はハンバーガーへ */
@media (max-width: 1319px) {
  .mg-burger { display: block; margin-left: auto; }
  .mg-header__cta { margin-left: 0; order: 2; }
  .mg-gnav {
    order: 3; margin-left: 0; width: 100%;
    display: none; padding-bottom: 16px;
  }
  .mg-gnav.is-open { display: block; }
  .mg-gnav ul { flex-direction: column; gap: 0; }
  .mg-gnav a { padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .mg-header__inner { flex-wrap: wrap; padding-block: 10px; }
}
@media (max-width: 480px) {
  .mg-tel__num { font-size: 17px; }
  .mg-brand__name { font-size: 17px; }
}

/* ---- ボタン -------------------------------------------------------------- */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 14px 28px; min-height: 48px;
  font-size: 16px; font-weight: 500; letter-spacing: .06em;
  white-space: nowrap;  /* ラベルが2行に折れるとピル形状が崩れる */
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radius);
  transition: .2s var(--ease);
}
.mg-btn--primary { background: var(--c-navy); color: var(--c-text-invert); }
.mg-btn--primary:hover { background: var(--c-navy-deep); color: var(--c-text-invert); }
.mg-btn--ghost { background: transparent; color: var(--c-navy); border-color: var(--c-navy); }
.mg-btn--ghost:hover { background: var(--c-bg-alt); }
.mg-btn--onDark { background: #fff; color: var(--c-navy); }
.mg-btn--onDark:hover { background: var(--c-bg-alt); color: var(--c-navy); }
.mg-btn--line { background: var(--c-line-green); color: #fff; }
.mg-btn--line:hover { filter: brightness(.94); color: #fff; }

/* ---- カード（施工事例が唯一のカードグリッド）----------------------------- */
.mg-card {
  background: var(--c-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: var(--card-pad);
}
.mg-card--flush { padding: 0; overflow: hidden; }
.mg-card__body { padding: var(--card-pad); }
.mg-card__title { font-size: var(--fs-h3); margin-bottom: .5em; }
.mg-card__meta { font-size: var(--fs-note); color: var(--c-text-sub); display: flex; flex-wrap: wrap; gap: .4em 1em; margin-bottom: .8em; }
.mg-card a { text-decoration: none; }

.mg-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter-m); }
@media (max-width: 1023px) { .mg-cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mg-cardgrid { grid-template-columns: 1fr; } }

/* ---- 表（BtoBの主役）----------------------------------------------------
   🔴 表の直後に見出しや本文が来ると余白ゼロで接していた（5ページ11箇所で実測）。
      表は border-collapse で margin が潰れやすく、
      p/h の margin-top も 0 にしているため、どこにも余白が生まれていなかった。
      「表が終わったのか続いているのか分からない」状態になるので、表の側で余白を持つ。 */
.mg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); margin-bottom: var(--gutter-m); }
.mg-table + h2, .mg-table + h3, .mg-table + h4 { margin-top: var(--gutter-l); }
.mg-table th, .mg-table td { border: 1px solid var(--c-rule); padding: 14px 16px; text-align: left; vertical-align: top; }
.mg-table thead th, .mg-table th[scope="row"] { background: var(--c-bg-alt); font-weight: 500; color: var(--c-text-head); }
.mg-table td.is-price { font-family: var(--ff-num); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 7em; }

/* 🔴 料金表を SP で横スクロールさせない。3列以上は「項目／金額」の2列へ畳む */
@media (max-width: 640px) {
  .mg-table--stack, .mg-table--stack thead, .mg-table--stack tbody,
  .mg-table--stack tr, .mg-table--stack th, .mg-table--stack td { display: block; width: 100%; }
  .mg-table--stack thead { display: none; }
  .mg-table--stack tr { border: 1px solid var(--c-rule); margin-bottom: 12px; }
  .mg-table--stack td, .mg-table--stack th { border: 0; border-bottom: 1px solid var(--c-rule); }
  .mg-table--stack tr > *:last-child { border-bottom: 0; }
  .mg-table--stack td[data-label]::before {
    content: attr(data-label) "：";
    display: inline-block; font-size: var(--fs-note); color: var(--c-text-sub); margin-right: .4em;
  }
}

/* ---- 実績数字帯（暗面①／サイト設定の値をそのまま出す）------------------- */
/* 🔴 トラックは minmax(0, 1fr)。1fr（＝min-width:auto）のままだと
   中の数字の min-width がトラックの下限になり、縮まずに横へ溢れる。 */
.mg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter-l); }
.mg-stat { text-align: center; }
/* 🔴 white-space:nowrap が無いと「5,000件以上」の単位だけが次行へ落ちる（実測） */
/* 🔴 88px化で「5,000件以上」の自然幅が320pxになり、1440pxでもトラック(302px)に
   収まらなくなった（実測）。単位を数字の下の行に落として幅の要求を248pxまで下げる。
   min-width:3.2em も撤去（min-width は max-width より強く、トラックを押し広げてしまう）。 */
.mg-stat__num { font-size: var(--fs-stat); color: var(--c-text-invert); min-width: 0; max-width: 100%; display: inline-block; white-space: nowrap; }
.mg-stat__unit { display: block; font-size: var(--fs-stat-unit); font-weight: 500; line-height: 1.5; letter-spacing: .06em; }
.mg-stat__label { display: block; margin-top: .6em; font-size: var(--fs-note); color: var(--c-text-invert-sub); letter-spacing: .08em; }
/* 4カラムを維持できるのは実測で1320px以上。これ未満は2カラムへ */
@media (max-width: 1319px) { .mg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-m); } }
@media (max-width: 767px)  { .mg-stats { gap: var(--gutter-s); } }

/* ---- E-E-A-T 信頼帯（全ページ共通コンポーネント）------------------------- */
.mg-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-rule); }
.mg-trust__item { padding: 18px 20px; border-bottom: 1px solid var(--c-rule); }
.mg-trust__item:nth-child(odd) { border-right: 1px solid var(--c-rule); }
.mg-trust__item:nth-last-child(-n+1) { border-bottom: 0; }
.mg-trust__key { display: block; font-size: var(--fs-note); color: var(--c-text-sub); letter-spacing: .06em; margin-bottom: .3em; }
.mg-trust__val { font-size: var(--fs-body); color: var(--c-text-head); font-weight: 500; }
@media (max-width: 640px) {
  .mg-trust { grid-template-columns: 1fr; }
  .mg-trust__item:nth-child(odd) { border-right: 0; }
}

/* 第三者評価（月桂冠はサイト全体でここ1箇所だけ・#A98351 単色1.5px線） */
.mg-laurel { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mg-laurel svg { width: 34px; height: 44px; stroke: var(--c-gold); stroke-width: 1.5; fill: none; }
.mg-laurel svg:last-child { transform: scaleX(-1); }

/* ---- ビフォー / アフター（同一アングル・加工なしで並置）------------------ */
.mg-ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gutter-s); }
.mg-ba__fig { margin: 0; }
.mg-ba__cap { display: inline-block; background: var(--c-water); color: var(--c-navy); font-size: var(--fs-note); padding: 4px 12px; margin-bottom: 8px; letter-spacing: .1em; }
/* 矢印は金の細い三角のみ。border で作らず clip-path で作る
   （border-top / border-left のカラー線はコードベースに1本も置かないため） */
.mg-ba__arrow { width: 12px; height: 16px; background: var(--c-gold); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (max-width: 640px) {
  .mg-ba { grid-template-columns: 1fr; }
  .mg-ba__arrow { transform: rotate(90deg); margin: 4px auto; }
}

/* ---- 写真上のテキスト（オーバーレイはCSS。画像に焼き込まない）------------ */
.mg-photo { position: relative; }
.mg-photo::after { content: ""; position: absolute; inset: 0; background: var(--c-photo-overlay); }
.mg-photo__text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; color: var(--c-text-invert); padding: var(--gutter-l); }
.mg-photo__text h1, .mg-photo__text h2 { color: var(--c-text-invert); }

/* ---- FAQ（個別ページを作らない。一覧＋カテゴリ別アンカー）---------------- */
.mg-faq__cat { margin-bottom: var(--gutter-l); scroll-margin-top: calc(var(--header-h) + 16px); }
.mg-faq__item { border-bottom: 1px solid var(--c-rule); }
.mg-faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--ff-head); font-size: var(--fs-h3); color: var(--c-text-head);
  padding: 20px 44px 20px 0; position: relative; line-height: var(--lh-heading);
}
.mg-faq__q::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
  border-right: 1.5px solid var(--c-gold); border-bottom: 1.5px solid var(--c-gold);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease);
}
.mg-faq__q[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.mg-faq__a { padding: 0 0 24px; }
.mg-faq__a[hidden] { display: none; }
.mg-faq__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--gutter-l); padding: 0; list-style: none; }
.mg-faq__nav li { margin: 0; }
.mg-faq__nav a { display: inline-block; padding: 8px 16px; border: 1px solid var(--c-rule); border-radius: var(--radius); font-size: var(--fs-note); text-decoration: none; }
.mg-faq__nav a:hover { background: var(--c-bg-alt); }

/* ---- 施工事例の注記（テンプレートで自動表示・8本に手書きしない）---------- */
.mg-pricenote {
  font-size: var(--fs-note); color: var(--c-text-sub);
  background: var(--c-bg-alt); border: 1px solid var(--c-rule); border-radius: var(--radius);
  padding: 12px 16px; margin: var(--gutter-s) 0 0; line-height: 1.8;
}
.mg-pricenote a { color: var(--c-navy); }

/* ---- 定義リスト（事例詳細の項目表示）------------------------------------ */
.mg-dl { display: grid; grid-template-columns: 8em 1fr; gap: 0; border-top: 1px solid var(--c-rule); margin: 0; }
.mg-dl dt, .mg-dl dd { padding: 14px 16px; border-bottom: 1px solid var(--c-rule); margin: 0; }
.mg-dl dt { background: var(--c-bg-alt); font-weight: 500; color: var(--c-text-head); font-size: var(--fs-note); }
@media (max-width: 640px) { .mg-dl { grid-template-columns: 1fr; } .mg-dl dt { border-bottom: 0; } }

/* ---- パンくず ------------------------------------------------------------ */
.mg-breadcrumb { font-size: var(--fs-note); color: var(--c-text-sub); padding: 14px 0; }
.mg-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 0; }
.mg-breadcrumb li { margin: 0; }
.mg-breadcrumb li + li::before { content: "／"; margin-right: .4em; color: var(--c-line); }

/* ---- 最終CTA（暗面②）--------------------------------------------------- */
.mg-cta__actions { display: flex; flex-wrap: wrap; gap: var(--gutter-s); margin-top: var(--gutter-m); }
.mg-cta__tel { font-family: var(--ff-num); font-weight: 900; font-size: clamp(28px, 4vw, 40px); color: var(--c-text-invert); text-decoration: none; font-variant-numeric: tabular-nums; }

/* ---- フッター（暗面③・9ページ共通）------------------------------------- */
.mg-footer { background: var(--c-navy-deep); color: var(--c-text-invert-sub); padding: var(--section-y) 0 32px; font-size: var(--fs-note); }
.mg-footer a { color: var(--c-text-invert-sub); text-decoration: none; }
.mg-footer a:hover { color: var(--c-text-invert); text-decoration: underline; }
.mg-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--gutter-l); }
.mg-footer__name { font-family: var(--ff-head); font-size: 20px; color: var(--c-text-invert); margin-bottom: .6em; }
.mg-footer__nav { list-style: none; margin: 0; padding: 0; }
.mg-footer__nav li { margin-bottom: .7em; }
.mg-footer__bottom { margin-top: var(--gutter-l); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.mg-footer address { font-style: normal; line-height: 1.9; }
@media (max-width: 767px) { .mg-footer__grid { grid-template-columns: 1fr; gap: var(--gutter-m); } }

/* ---- 404 ---------------------------------------------------------------- */
.mg-404 { text-align: center; padding: calc(var(--section-y) * 1.2) 0; }
.mg-404__links { display: flex; flex-wrap: wrap; gap: var(--gutter-s); justify-content: center; margin-top: var(--gutter-m); }

/* S2 実績数字帯：項目間に金1px縦罫3本（design-v2 §5）
   🔴 紺地なので --c-gold-on-dark（#A98351 は 3.73:1 で不足） */
.mg-stat { position: relative; }
.mg-stat + .mg-stat::before {
  content: ""; position: absolute;
  left: calc(var(--gutter-l) / -2); top: 50%; transform: translateY(-50%);
  width: 1px; height: 64px;
  background: var(--c-gold-on-dark); opacity: .45;
}
@media (max-width: 1319px) {
  .mg-stat + .mg-stat::before { left: calc(var(--gutter-m) / -2); }
  .mg-stats > .mg-stat:nth-child(odd)::before { display: none; }
}
.mg-stats__head { color: var(--c-text-invert); }
.mg-stats-band .mg-label { text-align: center; }