@charset "UTF-8";

/*
 * 電話バー（#175）
 *
 * **ページを問わず使える汎用パーツ。** 「お電話でのご相談もお気軽に！」＋
 * フリーダイヤル＋営業時間の注記を横に並べた帯。
 *
 * 対応するマークアップは `parts/area-renewal/phone-bar.php`。
 */

/* ==================================================================
 * 電話バー（ヒーロー直下）
 *
 * デザイン実測: PC `Frame 33` 1122×48（auto-HORIZONTAL・間隔 30px・中央揃え）／
 * SP `Group 68` 461×68（2 段）。素材は `素材/Frame 33.png`。
 *
 * 番号は **48px の Black(900)**・字間 −2.4px と、ページ内で最も強い文字。
 * フォントの 900 を読み込んでいるのはここと数字の強調のため。
 * ================================================================== */
.kau-phone {
  background: var(--kau-white);
  font-family: var(--kau-font);
}

.kau-phone__inner {
  box-sizing: border-box;
  max-width: 1154px;
  margin-inline: auto;
  padding: 26px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.kau-phone__lead {
  margin: 0;
  color: var(--kau-gray-700);
  font-size: 16px;
  font-weight: var(--kau-heading-weight);
  line-height: 24px;
}

.kau-phone__tel {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--kau-green);
  text-decoration: none;
}

/* アイコンは mask で塗る（SVG が currentColor なので img では黒くなる） */
.kau-phone__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background-color: var(--kau-green);
  -webkit-mask: url("../../../../images/area-renewal/phone.svg") no-repeat center / contain;
  mask: url("../../../../images/area-renewal/phone.svg") no-repeat center / contain;
}

.kau-phone__number {
  font-size: 48px;
  font-weight: 900;
  line-height: 48px;
  letter-spacing: -0.05em;
}

.kau-phone__note {
  margin: 0;
  color: var(--kau-gray-700);
  font-size: 14px;
  font-weight: var(--kau-body-weight);
  line-height: 20px;
}

/*
 * 別番号はメインの番号と同じ緑にする。
 *
 * **ここはデザインから意図的に外している。** デザインの実測は注記と同じ
 * #374151 だが、電話番号だと分かるようメイン番号（0120-…）と色をそろえた
 * （2026-09-10 ユーザー指示）。**サイズは注記のまま 14px。**
 * 下線はデザインどおり付けない。
 *
 * `color` は詳細度で負けないよう要素を重ねて指定する。
 */
.kau-phone .kau-phone__note a {
  color: var(--kau-green);
  font-weight: var(--kau-heading-weight);
  text-decoration: none;
}

@media (max-width: 1199px) {
  .kau-phone__inner {
      flex-wrap: wrap;
      gap: 8px 12px;
      padding: 20px 16px;
    }

  .kau-phone__lead {
      font-size: 14px;
    }

  .kau-phone__icon {
      width: 25px;
      height: 25px;
    }

  /* 実測: SP は 20px（PC の 48px から大きく下がる） */
    
  .kau-phone__number {
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: 0;
    }

  /* 注記は 2 段目に回す */
    
  .kau-phone__note {
      flex: 1 1 100%;
      font-size: 12px;
      text-align: center;
    }
}

/* ==================================================================
 * SP（767px 以下）
 * ================================================================== */

@media (max-width: 767px) {
  /*
   * 注記を 2 行に分ける（2026-09-14 指示）。
   *   1 行目: (AM10:00 〜 PM20:00)
   *   2 行目: 近畿以外は 072-266-6669 へおかけください
   * 1 つの文のままだと「へおかけ／ください」のように途中で折り返す。
   */
  .kau-phone__hours,
  .kau-phone__other {
    display: block;
  }
}