/* ==========================================================================
   parts.css — v2 で新設した部品
   🔴 金の使用ルール（design-v2 §2）
      ベタ #A98351 … 円形矢印ボタン(56px×7個)・2px下線(2箇所)・outlineリング のみ
      面として許可 … --c-gold-tint(#F6F1E9) と --c-bg-warm(#FAF7F2) だけ
      文字        … 白地は --c-gold-text / 紺地は --c-gold-on-dark
      🔴 セクション地・主CTAの塗り・全幅帯に #A98351 のベタを使わない
   🔴 角丸は役割で決まる：面=対角24px／ボタン・タグ=ピル／円=50%／表と全幅帯=0
   🔴 border-top / border-left のカラー線は依然1本も書かない（金の増量は抜け道ではない）
   ========================================================================== */

/* ---- 英字ラベル＋2桁番号（S2〜S13の計12箇所）----------------------------- */
.mg-label {
  display: block;
  font-family: var(--ff-head);          /* Webフォントは2ファミリのまま */
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--c-gold-text);            /* 🔴 12pxなので #A98351 は使わない */
  font-weight: 500;
  margin-bottom: 1.2em;
}
.mg-section--dark .mg-label,
.mg-section--deep .mg-label { color: var(--c-gold-on-dark); }
.mg-label__num { font-variant-numeric: tabular-nums; }

/* ---- 背景の巨大番号（明るい面の S3・S5・S7・S9・S11 の5箇所だけ）--------- */
.mg-sectnum {
  position: absolute;
  left: 0; top: 0;                      /* 🔴 right を負値にしない（横スクロールの原因） */
  font-family: var(--ff-num);
  font-size: var(--fs-sectnum);
  font-weight: 900;
  line-height: 1;
  color: #F1F4F8;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.mg-section--warm .mg-sectnum { color: #F2EDE4; }
@media (max-width: 767px) { .mg-sectnum { display: none; } }

/* ---- ピルタグ（計42個）--------------------------------------------------- */
.mg-pill {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  font-size: 14px; line-height: 1.5; white-space: nowrap;
  border: 1px solid var(--c-gold-line);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-text);
}
.mg-pill--gold { background: var(--c-gold-tint); border-color: var(--c-gold-line); color: var(--c-gold-text); font-weight: 500; }
.mg-pill--navy { background: #EAF0F7; border-color: #D6E1EE; color: var(--c-navy); font-weight: 500; }
.mg-pilllist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; min-width: 0; }
.mg-pilllist li { margin: 0; min-width: 0; }
@media (max-width: 767px) {
  .mg-pill { padding: 7px 14px; font-size: var(--fs-note); }
  .mg-pilllist { gap: 6px; }
}

/* ---- 円形矢印ボタン（ちょうど7個。8個以上置かない）----------------------- */
.mg-circlebtn {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 50%;
  background: var(--c-gold);
  display: grid; place-items: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.mg-circlebtn::before {
  content: ""; width: 14px; height: 14px;
  border-right: 2px solid #fff; border-top: 2px solid #fff;   /* 矢印の描画。カードのアクセント線ではない */
  transform: rotate(45deg) translate(-2px, 2px);
}
a:hover > .mg-circlebtn,
a:hover .mg-circlebtn,
.mg-circlebtn:hover { background: var(--c-navy); transform: translateX(4px); }
/* カード全体を <a> にするので、円は見た目部品として当たり判定を持たせない（二重リンク回避） */
.mg-circlebtn--deco { pointer-events: none; }
@media (max-width: 767px) {
  .mg-circlebtn { width: 48px; height: 48px; flex-basis: 48px; }  /* 🔴 44pxを下回らせない */
}

/* ---- ボタンのピル化 ------------------------------------------------------ */
.mg-btn--pill { border-radius: var(--r-pill); }
.mg-btn--ghostGold {
  background: var(--c-bg);
  border: 1.5px solid var(--c-gold);
  color: var(--c-gold-text);
}
.mg-btn--ghostGold:hover { background: var(--c-gold-tint); color: var(--c-gold-text); }

/* リンクとその横の円をひとまとまりに */
.mg-linkset { display: inline-flex; align-items: center; gap: 16px; }

/* ---- Qバッジ（FAQ 6問）--------------------------------------------------- */
.mg-qa__q { padding-left: 44px; }
.mg-qa__q::before {
  content: "Q";
  position: absolute; left: 0; top: .1em;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-gold-tint); color: var(--c-gold-text);
  font-family: var(--ff-num); font-weight: 900; font-size: 14px;
  display: grid; place-items: center;
}
.mg-qa__a { padding-left: 44px; }

/* ---- 面のバリエーション -------------------------------------------------- */
.mg-section--warm { background: var(--c-bg-warm); }
.mg-section--lg { padding: var(--section-y-lg) 0; }
.mg-section { position: relative; }
.mg-section > .mg-container { position: relative; z-index: 1; }

/* ---- 対角ラジアス（面の標準）-------------------------------------------- */
.mg-split__media,
.mg-service,
.mg-card,
.mg-card__ph,
.mg-panel { border-radius: 0 var(--r-dia) 0 var(--r-dia); overflow: hidden; }

/* 🔴 画面端に接する辺の角は丸めない。
   大判ヒーローの背景写真は上・左・右が画面端に接するので角丸を付けない。
   重ねる小写真だけ対角ラジアスを持たせる（写真の重なりと規則を連動させる）。 */
.mg-hero__bg { border-radius: 0; }
.mg-hero__sub { border-radius: var(--r-dia) 0 var(--r-dia) 0; overflow: hidden; }

/* 🔴 左右交互セクションはラジアスも反転させ、写真の反転と連動させる */
.mg-alt__media { border-radius: 0 var(--r-dia) 0 var(--r-dia); overflow: hidden; }
.mg-alt--flip .mg-alt__media { border-radius: var(--r-dia) 0 var(--r-dia) 0; }

.mg-btn, .mg-pill, .mg-arealist li, .mg-faq__nav a { border-radius: var(--r-pill); }

/* 🔴 表・全幅帯・入力欄は角丸を付けない */
.mg-table, .mg-price-table, .mg-stats, .mg-cta, .mg-footer { border-radius: 0; }
.mg-pricenote, .mg-burger, input, textarea, select { border-radius: var(--radius); }

/* ---- 白い面（対角・薄枠・影）------------------------------------------- */
.mg-panel {
  background: var(--c-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad);
}
.mg-panel--gold { border-color: var(--c-gold-line); }
.mg-panel--flat { background: var(--c-bg-alt); border: 0; box-shadow: none; }

/* ---- 見出し1語の金2px下線（サイト全体で2箇所だけ）----------------------- */
.mg-goldline { border-bottom: 2px solid var(--c-gold); padding-bottom: .06em; }

/* ==========================================================================
   スクロール演出
   🔴 隠す指定は .mg-anim（JSが付ける）の中だけ。
      JSが無効・失敗しても .mg-anim が付かないので中身は常に見える。
   ========================================================================== */
.mg-anim .mg-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.mg-anim .mg-reveal.is-visible { opacity: 1; transform: none; }
.mg-hero__bg { transition: transform .1s linear; }

/* 🔴 動きを減らす設定では完全に無効化する */
@media (prefers-reduced-motion: reduce) {
  .mg-anim .mg-reveal,
  .mg-anim .mg-reveal.is-visible {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .mg-hero__bg { transform: none !important; transition: none !important; }
}

/* 🔴 印刷時も完全に無効化する。
   BtoB（管理会社・ハウスメーカー）は回覧のため印刷する。
   演出前の状態で固まって白紙になる事故を防ぐ。 */
@media print {
  .mg-anim .mg-reveal,
  .mg-anim .mg-reveal.is-visible {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .mg-hero__bg { transform: none !important; }
  .mg-hero__bg::after { background: rgba(255, 255, 255, .86) !important; }
  .mg-header { position: static; }
  .mg-circlebtn, .mg-sectnum { display: none; }
  .mg-section, .mg-hero { padding: 24px 0 !important; min-height: 0 !important; }
  a[href^="tel:"]::after { content: ""; }
  body { background: #fff; }
}

/* ==========================================================================
   LINE の緑（2026-08-22 追加）
   🔴 なぜ必要か＝components.css の .mg-btn--line が var(--c-line-green) を
      参照しているのに、変数がどこにも定義されておらず色が出ていなかった。
   🔴 #06C755 は LINE 公式の指定色。design-v2 の palette にも定義済み
      （line_green）で、「面積は主CTA未満」という条件つきで許可されている。
   🔴 TOP（redesign 側の .mkr-contact__links）と下層（.mg-btn--line）で
      マークアップが違うため、両方を対象にする。redesign.css は parts.css より
      後に読まれるので、TOP 側は属性セレクタで詳細度を上げて確実に当てる。
   ========================================================================== */
:root { --c-line-green: #06C755; }

/* 下層ページ：ピル型のLINEボタン */
.mg-btn--line { background: var(--c-line-green); border-color: var(--c-line-green); color: #fff; }
.mg-btn--line:hover { filter: brightness(.94); color: #fff; }

/* TOP・共通CTA：redesign 側のリンク列にあるLINE導線 */
.mkr-contact__links a[href*="line.me"] {
  background: var(--c-line-green);
  border-color: var(--c-line-green);
  color: #fff;
}
.mkr-contact__links a[href*="line.me"] small,
.mkr-contact__links a[href*="line.me"] span { color: #fff; }
.mkr-contact__links a[href*="line.me"]:hover { filter: brightness(.94); color: #fff; }

/* 送信完了ページの見出し（2026-08-23）
   「ありがとうございました。」12文字が narrow コンテナ(760px)に
   1行で収まるサイズに絞る。78pxのままだと3行に折れ、
   「ありがとうご/ざいました」と単語の途中で切れていた。 */
.mg-pagehero.mg-pagehero--thanks h1 {
  /* 🔴 .mg-pagehero h1 (0,1,1) は後読みの redesign.css にもあるため、
     同詳細度では負ける。クラス2つ (0,2,1) で全ブレイクポイントに勝たせる */
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.4;
}

/* スマホで装飾シールが本文に被る対策（2026-08-24・クライアント指摘）
   「BtoB 請求・保険 対応済」と「口コミ◯件以上」の円形シールは絶対配置のため、
   画面が狭いとテキストの上に乗る（実機スクショで2箇所確認）。
   情報自体は本文・数字帯に既出なので、900px以下では非表示にする。
   PCは被っていないため現状維持。 */
@media (max-width: 900px) {
  /* 🔴 redesign.css が parts.css より後に読まれるため、同詳細度 (0,1,0) では
     display:flex に負ける。要素名を足して (0,1,1) にして勝たせる（両方 <p>） */
  p.mkr-service__stamp { display: none; }

  /* 実績シール2つ（口コミ・AWARD）＝スマホでは数字に被せず
     「カード」として表示する（2026-08-25 ボス指示。非表示から変更）。
     絶対配置・円形・回転をやめ、通常フローの角丸カード2枚を横並びに。
     DOM順により「累計施工件数」の下・資格台帳の上に入る */
  p.mkr-trust__seal {
    display: inline-flex;
    position: static;
    width: 48%;
    height: auto;
    min-height: 96px;
    margin: 26px 0 0;
    padding: 14px 10px;
    border-radius: 10px;
    transform: none;
    vertical-align: top;
  }
  p.mkr-trust__seal::after { inset: 4px; }
  p.mkr-trust__seal--review { margin-right: 2%; }
  p.mkr-trust__seal small { max-width: none; }
}

/* REASONSセクション＝写真に重なる文字の可読性担保（2026-08-25・ボス指摘）
   SPでは「経験を、」（紺）が作業服の紺に重なりほぼ読めなかった。
   多重 text-shadow で縁取り風のグローを付ける。白背景の上では
   白グローは見えないため、PC の見た目は変わらない。
   🔴 redesign.css が後読みのため section を足して詳細度 (0,1,2) で勝たせる */
section.mkr-reasons h2 {
  text-shadow: 0 0 2px #fff, 0 1px 3px rgba(255,255,255,.95),
               0 0 14px rgba(255,255,255,.85), 0 0 30px rgba(255,255,255,.7);
}
section.mkr-reasons h2 span {
  /* 白文字の行は紺のシャドウで担保（薄い路面・白壁に重なっても読める） */
  text-shadow: 0 1px 3px rgba(5,24,47,.65),
               0 0 14px rgba(5,24,47,.5), 0 0 28px rgba(5,24,47,.4);
}
section.mkr-reasons > .mkr-section-label {
  text-shadow: 0 0 2px #fff, 0 1px 3px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.85);
}
section.mkr-reasons .mkr-reasons__eyebrow {
  text-shadow: 0 1px 3px rgba(5,24,47,.65), 0 0 12px rgba(5,24,47,.5);
}
section.mkr-reasons .mkr-reasons__number {
  text-shadow: 0 0 2px #fff, 0 1px 3px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.75);
}
section.mkr-reasons .mkr-reasons__number small {
  text-shadow: 0 0 2px #fff, 0 1px 2px rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.8);
}

/* SPでは REASONS の英字装飾ラベル（右上）がセクションラベル（左上）と
   同じ高さで衝突して両方読めない（2026-08-25 実測）。
   装飾的な英字で情報価値は低く、"WORK STANDARD" はゴースト文字にも
   出てくるため、620px以下では出さない */
@media (max-width: 620px) {
  section.mkr-reasons .mkr-reasons__eyebrow { display: none; }
}

/* 「03 / THE INVISIBLE YEARS」セクションのSP崩れ3点（2026-08-25・ボス指摘）
   ①縦書きの英字コピーが見出しに被る（ヒーローの縦書きは1180px以下で
     非表示なのに、このセクションだけ消し忘れられていた）→ 同じ条件で非表示
   ②巨大ゴースト「20 YEARS」がSPでは見出し・本文に被り、YEARSだけ浮く → 非表示
   ③目盛りの丸は「横一直線の線＋点」でPCでは意味があるが、SPは線が
     非表示(redesign 640行)で点だけ残り浮いて見える → 線と同じ条件で非表示 */
@media (max-width: 1180px) {
  section.mkr-problem > .mkr-vertical-copy { display: none; }
}
@media (max-width: 900px) {
  p.mkr-problem__ghost { display: none; }
  section.mkr-problem .mkr-problem__scale > div::before { display: none; }
}