/* ===== page-contact.css ｜ お問い合わせ入口（Figma 14486:42217）=====
   デザイン言語: 色/書体トークンは base.css。英大見出し＋和ラベルのペア、共通ボタン(.btn)、コンテンツ幅1200中央（--pad-side）を全ページで使い回す。 */

/* --- FV（大タイトル）: Figma は 24px ラベルの行高 38.4 を 38 に丸めて配置 → 行高固定で縦1pxズレを消す。Lato 100px「Contact」はインク幅実測で補正 --- */
.lfv--contact .lfv__label{line-height:38px}
.lfv__en--contact{letter-spacing:-1.2px}   /* Figma インク幅 346px / Chrome 353px → -1.2px（TOP Contact と同値） */

/* --- お問い合わせ: bg base3 / pt0 pb160 / 左列(318) gap120 右列(flex1) --- */
.contact-top{padding-bottom:159.4px;background:var(--c-base3);overflow:hidden}   /* 160 - 0.6: FV(404.2)＋共通フッター(985.36)の小数繰り上がり防止（Figma 2241） */
.contact-top__inner{display:flex;align-items:flex-start;gap:120px}
/* 左列: 幅は Figma 実測 318（電話カード x=120〜437）。Chrome の Lato 幅差で右列幅が動かないよう固定 */
.contact-side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-lead);flex:none;width:318px}
.contact-side__block{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%}
.contact-side__head{display:flex;align-items:center;width:100%;padding-bottom:8px;font-size:var(--fs-h5);font-weight:500;line-height:1.6;letter-spacing:.2px;color:var(--c-text-sub);white-space:nowrap}
/* 電話カード: 白 px24 py20 r3 / 中央寄せ / 番号 Lato Bold 32 lh1.2 */
.tel-card{display:flex;flex-direction:column;align-items:center;width:100%;padding:20px 24px;background:var(--c-base);border-radius:var(--r-s)}
.tel-card__inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding-right:4px}
.tel-card__num{display:flex;align-items:center;gap:6px;color:inherit}
.tel-card__num img{width:32px;height:32px;flex:none}
.tel-card__num span{font-family:var(--font-en);font-weight:700;font-size:32px;line-height:1.2;text-align:right;white-space:nowrap;font-feature-settings:normal}
.tel-card__hours{display:flex;align-items:center;gap:8px;color:var(--c-gray)}
.tel-card__badge{display:flex;align-items:center;justify-content:center;padding:0 8px 1px;border:1px solid var(--c-border2);border-radius:var(--r-s);font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px;text-align:center;white-space:nowrap}
.tel-card__time{font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px;white-space:nowrap}
/* 即日対応エリア: チップ 白 px16 py2 r3 w115（最後は幅auto）/ 注記 14px gray */
.area{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%}
.area__list{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:8px;width:100%}
.area__item{display:flex;align-items:center;justify-content:center;width:115px;padding:2px 16px;background:var(--c-base);border-radius:var(--r-s);font-size:var(--fs-body-m);font-weight:500;line-height:1.6;letter-spacing:.16px;text-align:center;white-space:nowrap}
.area__item--auto{width:auto}
.area__note{font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px;color:var(--c-gray);white-space:nowrap}

/* --- 右列: 導線カード（罫線区切り / pt20 pb40 px16 / gap100） --- */
.contact-menu{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;min-width:1px}
.contact-card{display:flex;align-items:flex-start;gap:100px;width:100%;padding:20px 16px 40px;border-top:1px solid var(--c-border);color:inherit;transition:background-color .35s var(--ease-out-quint)}
.contact-card:last-child{border-bottom:1px solid var(--c-border)}
.contact-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;min-width:1px}
.contact-card__head{display:flex;align-items:center;gap:16px;width:100%}
/* アイコン枠 80×80: 白54px正方形を45°回転（対角76.368）＋ 32px アイコンを (24.18,24.18) に配置 */
.contact-card__icon{position:relative;flex:none;width:80px;height:80px;overflow:hidden}
.contact-card__icon::before{content:"";position:absolute;left:13px;top:13px;width:54px;height:54px;background:var(--c-base);transform:rotate(45deg)}
.contact-card__icon img{position:absolute;left:24.18px;top:24.18px;width:32px;height:32px}
.contact-card__title{flex:1 0 0;min-width:1px;font-size:var(--fs-h3);font-weight:500;line-height:1.6;letter-spacing:.28px}
.contact-card__desc{width:100%;padding-left:96px;font-size:var(--fs-body-m);font-weight:400;line-height:26px;letter-spacing:.16px}   /* Figma は 25.6 を 26 に丸めて配置（カード実測ピッチ201） */
.contact-card__arrow{display:flex;align-items:center;flex:none;padding-top:24px}
.contact-card__arrow span{display:flex;align-items:center;justify-content:center;padding:10px;background:var(--c-main);border-radius:3px}
.contact-card__arrow img{width:14px;height:14px;transition:transform .35s var(--ease-out-quint)}
@media (hover:hover){
  .contact-card:hover .contact-card__arrow img{transform:translateX(3px)}
}

/* ===== SP（768px以下）: SPカンプ無し → 電話ブロック → 導線カード縦積み。カードは TOP-SP News の行（右に矢印・縦中央）と同じ骨格 ===== */
@media (max-width:768px){
  .contact-top{padding-bottom:var(--sp-section-gap)}
  .contact-top__inner{flex-direction:column;gap:var(--sp-under-btn)}
  .contact-side{width:100%;gap:32px}
  .contact-side__head{letter-spacing:.16px}
  .tel-card{padding:16px 20px}
  .tel-card__inner{padding-right:0}
  .tel-card__num span{font-size:28px}
  .tel-card__time{letter-spacing:.15px}
  .area__item{width:auto;min-width:96px;padding:2px 12px;letter-spacing:.15px}
  .area__note{white-space:normal;letter-spacing:.12px}
  /* 導線カード: 罫線区切りのまま1カラム。アイコン枠 64px（正方形 44px 回転・アイコン 26px）＋見出し h4、本文は全幅、矢印は右端で縦中央 */
  .contact-menu{width:100%}
  .contact-card{align-items:center;gap:16px;padding:20px 4px 24px}
  .contact-card__head{gap:12px}
  .contact-card__icon{width:64px;height:64px}
  .contact-card__icon::before{left:10px;top:10px;width:44px;height:44px}
  .contact-card__icon img{left:19px;top:19px;width:26px;height:26px}
  .contact-card__title{font-size:var(--fs-h4);letter-spacing:.2px}
  .contact-card__desc{padding-left:0;line-height:1.8;letter-spacing:.15px}
  .contact-card__arrow{padding-top:0}
  .contact-card__arrow span{padding:8px}
  .contact-card__arrow img{width:12px;height:12px}
}