/*---------------------------------
ご利用ガイド
---------------------------------*/

/* ============================
   ご利用の流れ
   ============================ */

.section_content--guide {
    padding-bottom: 80px;
}

/* --- カウンター --- */

.guide_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 65px;
    counter-reset: guide-step;
}

.guide_item {
    counter-increment: guide-step;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- 写真（円形） --- */

.guide_item__img {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.guide_item__img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* --- ステップ番号 --- */

.guide_item__img::before {
    content: counter(guide-step, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--sub-font);
    font-size: 75px;
    font-weight: 600;
    color: var(--accent-color);
    -webkit-text-stroke: 5px #fff;
    paint-order: stroke fill;
    line-height: 1;
    z-index: 1;
}

/* --- テキストエリア --- */

.guide_item__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1.8;
    margin-bottom: 8px;
}

.guide_item__text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
}

.guide_item__text:not(:last-child) {
    margin-bottom: 30px;
}

/* --- dl（条件ラベル＋説明） --- */

.guide_item__sub-heading {
    font-size: 16px;
    color: var(--text-color);
}

/* --- ボタン --- */

.guide_item__btn {
    margin: 0 auto;
}

@media (min-width: 768px) {

    .section_content--guide {
        padding: 0 20px;
        margin-bottom: 150px;
    }

    .section_content--guide .section_space {
        display: flex;
        align-items: flex-start;
        /* 768px → 40px、1920px → 110px で線形スケール */
        gap: clamp(40px, calc(6.94vw - 13px), 110px);
    }

    .guide_title-wrapper {
        flex-shrink: 0;
        width: max-content;
        align-self: stretch;
        position: relative;
    }

    .section_content--guide .section_title {
        width: max-content;
        will-change: position;
        margin: 0;
    }

    .section_content--guide .content_box {
        flex: 1;
    }

    .guide_list {
        gap: 60px;
    }

    .guide_item {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .guide_item__img {
        flex-shrink: 0;
    }

    .guide_item__body {
        flex: 1;
    }

    .guide_item__btn {
        margin: 0;
    }
}

/* ============================
   お支払い方法
   ============================ */

.section_content--payment {
    padding-bottom: 60px;
}

.section_content--payment .content_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- バッジ --- */

.payment_badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DDF2FF;
    color: var(--text-color);
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    width: fit-content;
}

/* --- 注意書き --- */

.payment_note {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

.payment_note span {
    font-size: 12px;
}

/* --- カードロゴ --- */

.payment_cards {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.payment_cards__item {
    height: 37px;
}

.payment_cards__item img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {

    .section_content--payment {
        padding: 0 20px 60px;
    }

    .payment_badge {
        width: 212px;
    }

    .payment_note {
        font-size: 16px;
    }
}

/* ============================
   キャンセルポリシー
   ============================ */

/* --- サブタイトル --- */

.cancel_sub-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 10px;
}

/* --- ブロック --- */

.cancel_block:not(:last-child) {
    margin-bottom: 40px;
}

/* --- テーブル --- */

.cancel_table {
    width: 100%;
    border-collapse: collapse;
}

.cancel_table__head,
.cancel_table__data {
    padding: 10px 4px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    border: 1px solid #BC0000;
    vertical-align: middle;
}

.cancel_table__head {
    background: #FFF0F0;
    font-weight: bold;
    width: 50%;
    text-align: center;
}

.cancel_table__data {
    background: #fff;
    width: 50%;
    text-align: center;
}

/* --- リンクリスト --- */

.cancel_links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.cancel_links li::before {
    content: "・";
    color: var(--accent-color);
}

.cancel_links a {
    color: var(--accent-color);
    text-decoration: underline;
    font-size: 14px;
}

@media (min-width: 768px) {

    .section_content--cancel {
        padding: 0 20px;
    }

    /* --- ブロック --- */

    .cancel_block:not(:last-child) {
        margin-bottom: 70px;
    }

    .cancel_sub-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .cancel_table__head,
    .cancel_table__data {
        padding: 10px 20px;
        text-align: left;
    }

    .cancel_table__head {
        width: 30%;
    }

    .cancel_table__data {
        width: 70%;
    }

    .ui_cp-btn.guide_item__btn:hover .ui_cp-btn_icon {
        filter: brightness(0) saturate(100%) invert(27%) sepia(82%) saturate(1500%) hue-rotate(196deg) brightness(92%) contrast(92%);
    }
}