/*
 * 電話CTAボタン (/service/ ・ /support/)
 *
 * 以前は電話番号ごと画像に焼き込んでいたため、番号変更のたびに画像を作り直していた。
 * 番号をテキストで持つよう HTML/CSS で組み直す。
 * Figma: 事故治療ナビ 2025/2/13update
 *   --free : 6550:2005 (PC) / 6550:2032 (SP)   無料相談 + 保険適用リード + 番号
 *   --bar  : 6465:3572 / 6465:3782 (PC)         [📞無料相談] 番号 の横長バー
 *   --24h  : 6465:4301 (PC)                     24h無料 + 相談窓口はこちら + 番号
 *   --gift : 6550:2022 / 6465:4139 (SP)         お見舞い金2万円の吹き出し + 番号
 *
 * 置き換え前の画像と同じく「幅に合わせて全体が拡縮する」ようにするため、
 * --tel-w (Figma 上の幅 px) を基準に 1 デザインpx = --u としてコンテナ幅から算出する。
 * 縦横比 --tel-ratio は並んでいる LINE ボタン画像と高さが揃うよう、置き換え前の画像に合わせる。
 */

.c-tel-btn {
  display: block;
  width: 100%;
  container-type: inline-size;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.45;
  /* 本番では外部CSSで字間が付くため、Figma どおり 0 に固定する */
  letter-spacing: 0;
  white-space: nowrap;
}
.c-tel-btn:hover {
  text-decoration: none;
}

.c-tel-btn__body {
  --u: calc(100cqi / var(--tel-w));
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--tel-ratio);
}
.c-tel-btn__body *,
.c-tel-btn__body *::before,
.c-tel-btn__body *::after {
  box-sizing: border-box;
}

.c-tel-btn__num {
  display: block;
  color: #fff;
}

/* オレンジのボタン面 (--free / --bar / --gift 共通) */
.c-tel-btn__face {
  border: 1px solid #ff7a00;
  border-radius: calc(var(--u) * 4);
  background: linear-gradient(to top, #ff7a00 37.5%, #ffb800);
  box-shadow: 0 calc(var(--u) * 2) 0 #bbb;
}

/* ---------- --free: 無料相談 + リード + 番号 ---------- */
.c-tel-btn--free {
  --tel-w: 313;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 17);
}
.c-tel-btn--free .c-tel-btn__free-badge {
  flex-shrink: 0;
  padding: calc(var(--u) * 8) calc(var(--u) * 6);
  background: #fff;
  color: #1791e7;
  font-size: calc(var(--u) * 21);
  line-height: calc(var(--u) * 23);
  text-align: center;
}
.c-tel-btn--free .c-tel-btn__free-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-align: center;
}
.c-tel-btn--free .c-tel-btn__free-lead {
  display: block;
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 17);
}
.c-tel-btn--free .c-tel-btn__num {
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 36);
}
/* SP: 無料相談は角丸の箱で、リードと番号は右側の残り幅で中央揃え (6550:2032) */
.c-tel-btn--free.is-sp {
  --tel-w: 351;
  gap: 0;
  padding: 0 0 0 calc(var(--u) * 7);
}
.c-tel-btn--free.is-sp .c-tel-btn__free-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(var(--u) * 63);
  height: calc(var(--u) * 69);
  padding: 0;
  border-radius: calc(var(--u) * 4);
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 27);
}

/* ---------- --bar: [📞無料相談] 番号 ---------- */
.c-tel-btn--bar {
  --tel-w: 643;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 25);
}
.c-tel-btn--bar .c-tel-btn__bar-label {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  height: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 20);
  border-radius: calc(var(--u) * 10);
  background: #fff;
  color: #1791e7;
  font-size: calc(var(--u) * 22);
  line-height: 1;
}
.c-tel-btn--bar .c-tel-btn__icon {
  display: block;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
}
.c-tel-btn--bar .c-tel-btn__num {
  font-size: calc(var(--u) * 24);
  line-height: 1;
}

/* ---------- --24h: 24h無料 + 相談窓口はこちら + 番号 ---------- */
.c-tel-btn--24h {
  --tel-w: 767;
  --tel-ratio: 767 / 115;
  display: flex;
  align-items: center;
  padding-left: calc(var(--u) * 36);
  border-radius: calc(var(--u) * 20);
  background: linear-gradient(to bottom, #ffb800, #ff8601);
  color: #fff;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 35);
}
.c-tel-btn--24h .c-tel-btn__24h-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 210);
  height: calc(var(--u) * 69);
  border-radius: calc(var(--u) * 20);
  background: #fff;
  color: #1791e7;
}
.c-tel-btn--24h .c-tel-btn__24h-main {
  width: calc(var(--u) * 468);
  text-align: center;
}

/* ---------- --gift: お見舞い金2万円の吹き出し + 番号 ---------- */
.c-tel-btn--gift {
  --tel-w: 287;
}
.c-tel-btn--gift .c-tel-btn__face {
  position: absolute;
  top: calc(var(--u) * 15);
  left: 0;
  right: 0;
  height: calc(var(--u) * 75);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  padding-top: calc(var(--u) * 12);
}
.c-tel-btn--gift .c-tel-btn__gift-lead {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: calc(var(--u) * 37);
  /* Figma は左右16・文字12/20だが、ブラウザの字幅だと幅287の枠からはみ出すため約4%詰める */
  padding: 0 calc(var(--u) * 8);
  border: 1px solid #ff7a00;
  border-radius: calc(var(--u) * 100);
  background: #fff;
  color: red;
  font-size: calc(var(--u) * 11.5);
  line-height: 1;
}
.c-tel-btn--gift .c-tel-btn__gift-lead em {
  font-style: normal;
  font-size: calc(var(--u) * 19);
}
.c-tel-btn--gift .c-tel-btn__icon {
  display: block;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
}
.c-tel-btn--gift .c-tel-btn__num {
  font-size: calc(var(--u) * 18);
  line-height: 1.322;
}

/* ---------- 設置箇所ごとの縦横比と PC/SP の出し分け ---------- */
/* 出し分けの境目は置き換え前の <source media> と同じ */

/* /service/ ヒーロー: PC はコード、SP は番号の入っていない既存画像のまま */
.p-service-hero__tel-btn .c-tel-btn--free {
  --tel-ratio: 862 / 286;
  display: none;
}
@media (min-width: 900px) {
  .p-service-hero__tel-btn .c-tel-btn--free {
    display: flex;
  }
  .p-service-hero__tel-btn .c-tel-btn__sp-img {
    display: none;
  }
}

/* /service/ お客様相談窓口 (境目 900px) */
.p-service-support__wrapper2-tel-btn .c-tel-btn--bar {
  --tel-ratio: 1287 / 121;
  display: none;
}
.p-service-support__wrapper2-tel-btn .c-tel-btn--gift {
  --tel-ratio: 574 / 188;
}
@media (min-width: 900px) {
  .p-service-support__wrapper2-tel-btn .c-tel-btn--bar {
    display: flex;
  }
  .p-service-support__wrapper2-tel-btn .c-tel-btn--gift {
    display: none;
  }
}

/* /service/ よくある質問の下 (境目 600px) */
.p-service-qa__tel-btn .c-tel-btn--bar {
  --tel-w: 670;
  --tel-ratio: 2010 / 181;
  display: none;
}
.p-service-qa__tel-btn .c-tel-btn--gift {
  --tel-w: 344;
  --tel-ratio: 689 / 188;
}
@media (min-width: 600px) {
  .p-service-qa__tel-btn .c-tel-btn--bar {
    display: flex;
  }
  .p-service-qa__tel-btn .c-tel-btn--gift {
    display: none;
  }
}

/* /support/ ヒーロー (SP のみ表示される枠) */
.p-support-hero__tel .c-tel-btn--free {
  --tel-ratio: 702 / 191;
}

/* /support/ 検索の下・利用者の声の下 (境目 800px) */
.p-support-search__tel-btn .c-tel-btn--free,
.p-support-review__tel-btn .c-tel-btn--free {
  --tel-ratio: 702 / 191;
}
.p-support-search__tel-btn .c-tel-btn--24h,
.p-support-review__tel-btn .c-tel-btn--24h {
  display: none;
}
@media (min-width: 800px) {
  .p-support-search__tel-btn .c-tel-btn--24h,
  .p-support-review__tel-btn .c-tel-btn--24h {
    display: flex;
  }
  .p-support-search__tel-btn .c-tel-btn--free,
  .p-support-review__tel-btn .c-tel-btn--free {
    display: none;
  }
}