/* ============================================================
 * 全ページ共通のお問い合わせ帯
 * マークアップは functions.php の miki_contact_band()
 *
 * デザインは Ken さん作成の「contactセクション案.html」をそのまま実装。
 * 値（色・サイズ・余白・影・角丸）は案のとおり。
 * クラス名だけ .miki-contact__* に置き換えている。
 *   案の .contact / .icon / .body / .label / .num は名前が一般的すぎて
 *   テーマ側のCSSと衝突しうるため。
 *
 * 出る位置: フッター（.l-footer）の直前。
 *   フッター4バナーを非表示にしてあるので、見た目は
 *   「4バナーがあった場所」に収まる。
 * ============================================================ */

.miki-contact{
  --mc-brand:#1013ba;
  --mc-brand-deep:#0a0d7a;
  --mc-gold:#c9a86a;
  --mc-ink:#1a1a2e;
  --mc-paper-warm:#faf6ed;

  background:var(--mc-paper-warm);
  padding:60px 40px 64px;
  position:relative;
  isolation:isolate;   /* 中の z-index:2 を帯の中だけで効かせる（追従ヘッダーの上に出ないように・2026-10-01） */
  overflow:hidden;
  text-align:center;
  font-family:"Noto Sans JP", sans-serif;
  color:var(--mc-ink);
  -webkit-font-smoothing:antialiased;
}

.miki-contact *,
.miki-contact *::before,
.miki-contact *::after{ box-sizing:border-box; }

/* 背景の光。右下に金、左上に青 */
.miki-contact::before{
  content:""; position:absolute; inset:auto -80px -80px auto;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(201,168,106,.18), transparent 70%);
  pointer-events:none;
}
.miki-contact::after{
  content:""; position:absolute; top:-80px; left:-80px;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(16,19,186,.08), transparent 70%);
  pointer-events:none;
}

/* ★ z-index:2 と position:relative は必須。
   下の .miki-contact__heading::after が z-index:-1 で金の線を敷くが、
   ここで重ね合わせ文脈を作っていないと、線が .miki-contact の背景の
   下に回り込んで見えなくなる。 */
.miki-contact__inner{
  max-width:720px; margin:0 auto;
  text-align:center; position:relative; z-index:2;
}

/* 2026-09-05: 会社概要の表と同じく「2サイズ大きく」の指示。
   大きな英字見出し「Contact us」（54px / SP 40px）以外の文字を
   すべて +4px した。会社概要の表の 16→20 / 18→22 と同じ幅の変更。
   矢印の丸は文字が入りきるよう 22→26px にしている。 */

/* ---------- 見出し ---------- */
.miki-contact__heading{
  display:inline-block; position:relative; margin-bottom:12px;
}
.miki-contact__heading h2{
  margin:0;
  font-family:"DM Sans","Inter","Noto Sans JP",sans-serif;
  font-weight:800; font-size:54px;
  line-height:1; letter-spacing:-.02em; color:var(--mc-ink);
}
.miki-contact__c1{ color:var(--mc-brand); }
.miki-contact__heading::after{
  content:""; position:absolute; left:20%; right:20%; bottom:-4px;
  height:12px;
  background:linear-gradient(90deg, transparent, var(--mc-gold) 20%, var(--mc-gold) 80%, transparent);
  opacity:.6; z-index:-1; border-radius:8px;
}

.miki-contact__jp{
  font-family:"Noto Sans JP",sans-serif; font-weight:500;
  font-size:18px; letter-spacing:.3em; color:var(--mc-brand-deep);
  padding-left:.3em;
}

.miki-contact__lead{
  margin:20px 0 0;
  font-family:"Noto Sans JP",sans-serif; font-weight:400;
  font-size:19px; line-height:1.9; letter-spacing:.08em;
  color:#3a3d5a;
}

/* ---------- 住所 ---------- */
.miki-contact__info{
  margin-top:20px;
  font-family:"Noto Sans JP",sans-serif; font-weight:400;
  font-size:18px; line-height:1.8; letter-spacing:.06em; color:#3a3d5a;
}
.miki-contact__zip{ color:#6a6d8a; font-size:17px; }
.miki-contact__addr{ margin-top:2px; }

/* ---------- TEL / FAX（白い角丸カードに縦積み） ---------- */
.miki-contact__contacts{
  margin-top:22px;
  display:inline-flex; flex-direction:column;
  background:#fff; border-radius:24px;
  padding:20px 40px;
  box-shadow:0 10px 32px rgba(16,19,186,.08);
  border:1px solid rgba(201,168,106,.28);
  min-width:340px;
}
.miki-contact__row{
  display:flex; align-items:center; gap:20px;
  padding:12px 0;
}
/* 2行目以降に区切り線。リンクで包まれた行も対象にするため
   :is() で <a> の中と外の両方を見る */
.miki-contact__row + .miki-contact__row,
.miki-contact__row-link + .miki-contact__row,
.miki-contact__row-link + .miki-contact__row-link .miki-contact__row{
  border-top:1px solid rgba(16,19,186,.08);
}
.miki-contact__icon{
  width:44px; height:44px; border-radius:50%;
  background:var(--mc-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.miki-contact__body{ text-align:left; line-height:1; display:block; }
.miki-contact__label{
  display:block;
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:15px; letter-spacing:.25em; color:var(--mc-brand);
  text-transform:uppercase;
}
.miki-contact__num{
  display:block; margin-top:5px;
  font-family:"Inter",sans-serif; font-weight:700;
  font-size:30px; letter-spacing:.02em; color:var(--mc-ink);
  text-decoration:none; line-height:1.05;
}
a.miki-contact__row-link{
  text-decoration:none; color:inherit; transition:color .3s;
  display:block;
}
a.miki-contact__row-link:hover .miki-contact__num{ color:var(--mc-brand); }
/* マウスで操作する端末（PC）では電話番号を押せない見た目にする（以前の PC と同じ）。
   HTML は端末によらず同じ（tel: リンク）。見せ分けは CSS だけ（2026-10-09・nginx のページキャッシュ対策） */
@media (hover:hover) and (pointer:fine){
  a.miki-contact__row-link{ pointer-events:none; cursor:default; }
}

/* ---------- CTAボタン ---------- */
.miki-contact__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  margin-top:26px;
  padding:18px 48px;
  background:var(--mc-brand); color:#fff; text-decoration:none;
  font-family:"Noto Sans JP",sans-serif; font-weight:500; font-size:18px;
  letter-spacing:.15em;
  border-radius:100px;
  box-shadow:0 12px 32px rgba(16,19,186,.28);
  transition:all .3s ease;
  position:relative; overflow:hidden;
}
.miki-contact__cta::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--mc-brand-deep), var(--mc-brand));
  opacity:0; transition:opacity .3s;
}
.miki-contact__cta span{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:14px;
}
.miki-contact__cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(16,19,186,.35);
}
.miki-contact__cta:hover::before{ opacity:1; }
.miki-contact__arrow{
  width:26px; height:26px; border-radius:50%;
  background:var(--mc-gold); color:var(--mc-ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}

/* ---------- レスポンシブ（案どおり 720px で切り替え） ---------- */
@media (max-width:720px){
  .miki-contact{ padding:48px 20px 52px; }
  .miki-contact__heading h2{ font-size:40px; }
  .miki-contact__jp{ font-size:17px; letter-spacing:.28em; }
  .miki-contact__lead{ font-size:18px; margin-top:16px; }
  .miki-contact__info{ font-size:17px; margin-top:16px; }
  .miki-contact__contacts{
    min-width:auto; width:100%; padding:16px 24px;
  }
  .miki-contact__row{ gap:14px; padding:10px 0; }
  .miki-contact__icon{ width:38px; height:38px; }
  .miki-contact__num{ font-size:24px; }
  .miki-contact__cta{ padding:16px 32px; font-size:17px; margin-top:22px; }
}