@charset "utf-8";

/*
 * 地域ページの問い合わせボタンの電話ボタン
 * スマホだけ、事例一覧の電話ボタン report-archive-tel.php と同じ形にする（三浦の指示 2026-10-01）。
 * 指定は report-archive.css の電話ボタンの分をそのまま写したもの。片方を直したら、もう片方も直す。
 * 違いは4つだけ。
 * ・切り替えの幅は、地域ページの問い合わせボタンがスマホの形になる 640px に合わせた
 * ・色の名前 --ra-tel は事例一覧のページでしか決まっていないので、無いときの色を添えた
 * ・狭い画面で番号が2行に折れないよう、幅に合わせて番号の文字を縮める。下から2番目の指定
 * ・幅が広いと白い丸と番号が左右の端に離れるので、まとめて真ん中に寄せる。同じところ
 * いちばん下に、最初の画面の直下に足した問い合わせボタンの余白も置いている。
 */

/* CTAのスマホだけの部品 */
.telBadge,
.telTimeSp {
  display: none;
}

.raCtaTel {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  color: var(--ra-tel, #cc0814);
}

.telHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 225px;
}

.telFree {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 17px;
  background: var(--ra-tel, #cc0814);
  color: #fff;
  font-size: 11.4px;
  font-weight: 700;
  line-height: 1;
  border-radius: 2px;
}

/* 受付時間も赤 */
.telTime {
  font-size: 14.3px;
  font-weight: 700;
  line-height: 1;
  color: var(--ra-tel, #cc0814);
}

.telNumber {
  display: flex;
  align-items: center;
  gap: 3.4px;
}

.telNumber svg {
  flex: none;
  width: 32px;
  height: 32px;
}

.telNumber b {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

@media screen and (max-width: 640px) {
  /* 電話は赤いボタン。左に白い丸、右に番号と受付時間 */
  .raCtaTel {
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 82px;
    /* 内側の余白は上下10px・左右16px（三浦の指示 2026-10-01） */
    padding: 10px 16px;
    border-radius: 8px;
    background: linear-gradient(#d91e2d, #c70f15);
    box-shadow: 0 3px 0 #a5040a;
    color: #fff;
  }

  .telHead {
    display: none;
  }

  .telBadge {
    position: relative;
    flex: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 55px;
    height: 55px;
    padding-bottom: 9px;
    border-radius: 50%;
    background: #fff;
    color: #d51520;
    line-height: 1.15;
    text-align: center;
  }

  .telBadge img {
    position: absolute;
    left: 18px;
    top: 5px;
    width: 18.5px;
    height: 21px;
    transform: rotate(-6.66deg);
  }

  .telBadge b {
    font-size: 9px;
    font-weight: 900;
  }

  .telBadge small {
    font-size: 6px;
    font-weight: 700;
  }

  .telNumber {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .telNumber svg {
    display: none;
  }

  .telNumber b {
    font-family: "DIN2014-Demi", "Roboto", sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
  }

  .telTimeSp {
    display: block;
    margin-left: 35px;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }
}

.areaCtaRegion .raTelSwap {
  display: none;
}

@media screen and (max-width: 640px) {
  /* 元の電話ボタンと同じく、下のボタンとの間を24px空ける。
     幅は下のボタンの並びと同じく枠いっぱいにして、左右の端をそろえる（三浦の指摘 2026-10-01） */
  .areaCtaRegion.hasRaTel .raTelSwap {
    display: block;
    align-self: stretch;
    width: 100%;
    margin-bottom: 24px;
  }

  .areaCtaRegion.hasRaTel .wrapCtaTelHoarding {
    display: none;
  }

  .areaCtaRegion .raTelSwap .raCtaTel {
    display: flex;
    width: 100%;
    text-decoration: none;
  }
}

/* 地域ページだけの直し。番号は38pxで幅232pxあり、375pxの画面では入りきらず2行に折れる。
   幅に合わせて文字を縮め、折り返さないようにする。幅395px以上はデザインどおり38px。
   計算は、ボタンの中で番号に使える幅＝画面幅の92%－125px、番号の幅＝文字の大きさの約6.1倍 */
@media screen and (max-width: 640px) {
  .areaCtaRegion .raTelSwap .telNumber b {
    font-size: min(38px, calc((92vw - 125px) / 6.25));
    white-space: nowrap;
  }

  /* 幅が広いと白い丸が左端、番号が右端に離れる。両端に寄せず、まとめて真ん中に置く（三浦の指示 2026-10-01）。
     間は、375pxの画面で今までと同じに見える12px */
  .areaCtaRegion .raTelSwap .raCtaTel {
    justify-content: center;
    gap: 12px;
  }
}

/* =========================================================================
 * 最初の画面の直下に足した問い合わせボタン #regionTopCta の余白（三浦の指示 2026-10-01）
 * 下の余白は0、上の余白はほかの問い合わせボタンより20px多くする。
 * ほかの問い合わせボタンの余白は region-detail-news.css の .areaCtaRegion のまま
 * ========================================================================= */
#regionTopCta .areaCtaRegion {
  padding-top: 87px;
  padding-bottom: 0;
}

@media screen and (max-width: 640px) {
  #regionTopCta .areaCtaRegion {
    padding-top: calc(clamp(50px, 13.3vw, 60px) + 20px);
  }
}