@charset "UTF-8";

/* =========================================================
   お問い合わせ 電話窓口パネル (c-contact-tel)
   Figma: node 259:240 / 229:2153
   ========================================================= */

.c-contact-tel {
    width: 100%;
}

/* 見出しバー */
.c-contact-tel__head {
    background-color: var(--color-gray-1);
    padding: calc(10 / var(--root-fz) * 1rem) calc(28 / var(--root-fz) * 1rem);
}

.c-contact-tel__ttl {
    color: var(--color-white-1);
    font-weight: 400;
    font-size: calc(22 / var(--root-fz) * 1rem);
    line-height: calc(33 / 22);
    word-break: break-word;
}

/* 本文 */
.c-contact-tel__body {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--root-fz) * 1rem);
    background-color: var(--color-white-1);
    border: 1px solid var(--color-gray-1);
    padding: calc(24 / var(--root-fz) * 1rem) calc(48 / var(--root-fz) * 1rem);
}

/* グレー情報ボックス */
.c-contact-tel__box {
    background-color: var(--color-gray-5);
    padding: calc(8 / var(--root-fz) * 1rem) calc(10 / var(--root-fz) * 1rem);
    color: var(--color-base-1);
    font-size: calc(16 / var(--root-fz) * 1rem);
    line-height: calc(27 / 16);
    word-break: break-word;
}

/* アイコン + 電話番号行 */
.c-contact-tel__row {
    display: flex;
    align-items: flex-start;
    gap: calc(13 / var(--root-fz) * 1rem);
}

.c-contact-tel__icon {
    flex-shrink: 0;
}

.c-contact-tel__icon img {
    display: block;
    width: calc(66 / var(--root-fz) * 1rem);
    height: auto;
}

.c-contact-tel__info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(5 / var(--root-fz) * 1rem);
    color: var(--color-base-1);
}

.c-contact-tel__num {
    display: flex;
    align-items: flex-end;
    font-weight: 700;
    font-size: calc(40 / var(--root-fz) * 1rem);
    line-height: calc(33 / 40);
    white-space: nowrap;
}
.c-contact-tel__num a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
}

.c-contact-tel__paid {
    font-weight: 700;
    font-size: calc(16 / var(--root-fz) * 1rem);
    line-height: 1;
}

.c-contact-tel__hours {
    font-weight: 400;
    font-size: calc(16 / var(--root-fz) * 1rem);
    line-height: calc(27 / 16);
}

/* 補足（ナビダイヤル代替番号など） */
.c-contact-tel__foot {
    color: var(--color-base-1);
    font-weight: 700;
    font-size: calc(16 / var(--root-fz) * 1rem);
    line-height: calc(27 / 16);
    word-break: break-word;
}

/* 補足リスト */
.c-contact-tel__list {
    /* list-style: disc;
    padding-left: calc(24 / var(--root-fz) * 1rem); */
    list-style: none;
    padding-left: 0;
    color: var(--color-base-1);
    font-size: calc(16 / var(--root-fz) * 1rem);
    line-height: calc(27 / 16);
    word-break: break-word;
}
.c-contact-tel__list li{
    text-indent: -1em;
    padding-left: 1em;
}
.c-contact-tel__list > li + li {
    margin-top: calc(4 / var(--root-fz) * 1rem);
}

/* -------------------- SP -------------------- */
@media screen and (max-width: 767px) {
    .c-contact-tel__head {
        padding: 10px 16px;
    }

    .c-contact-tel__ttl {
        font-size: 18px;
    }

    .c-contact-tel__body {
        padding: 24px 16px;
    }

    .c-contact-tel__box {
        font-size: 15px;
    }

    /* アイコン＋番号は横並び、受付時間だけ下段に全幅で回り込ませる */
    .c-contact-tel__row {
        flex-wrap: wrap;
        align-items: center;
        column-gap: 13px;
        row-gap: 5px;
    }

    /* __num / __hours を行の直接フレックス要素にする */
    .c-contact-tel__info {
        display: contents;
    }

    .c-contact-tel__icon img {
        width: 52px;
    }

    .c-contact-tel__num {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
        gap: 5px;
        font-size: clamp(20px, 6.6vw, 30px);
    }
    .c-contact-tel__num a[href^="tel:"] {
        cursor: pointer;
        pointer-events: auto;
    }
    .c-contact-tel__hours {
        flex-basis: 100%;
    }

    .c-contact-tel__paid {
        font-size: 14px;
    }

    .c-contact-tel__hours,
    .c-contact-tel__foot,
    .c-contact-tel__list {
        font-size: 14px;
    }
}