@charset "UTF-8";
@import url("common.css");

/* =============================================================================
Guide Page
========================================================================== */

.lower-hero--guide .lower-hero__panel {
    background: url("../img/guide/bg-title-guide.jpg") center / cover no-repeat;
}

.guide-anchor {
    margin-bottom: 64px;
}

.guide-section-body {
    width: min(980px, calc(100% - 120px));
    margin: 0 auto;
}

.guide-flow {
    display: grid;
    gap: 34px;
    width: min(760px, 100%);
    margin: 0 auto;
}

.guide-step {
    display: grid;
    gap: 34px;
    grid-template-columns: 138px minmax(0, 1fr);
    align-items: center;
}

.guide-step__icon img {
    width: 132px;
}

.guide-step__icon {
    position: relative;
    display: flex;
    justify-content: center;
}

.guide-step:not(:last-child) .guide-step__icon::after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 12px solid #d8a5bf;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    transform: translateX(calc(-50% + 2px));
}

.guide-step__title {
    color: #333;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.06em;
}

.guide-step__text {
    margin-top: 10px;
    color: #333;
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.05em;
}

.guide-info-list {
    display: grid;
    gap: 56px;
}

.guide-info {
    display: grid;
    gap: 42px;
    grid-template-columns: 160px minmax(0, 1fr);
}

.guide-info__title {
    padding-right: 22px;
    border-right: 2px solid #d8a5bf;
    color: #b675a0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.guide-info__text {
    color: #333;
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.05em;
}

.guide-delivery-img {
    margin-top: 24px;
}

.guide-delivery-img img {
    width: min(620px, 100%);
}

.payment-lead {
    margin-bottom: 42px;
    color: #333;
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.05em;
    text-align: center;
}

.payment-logos {
    display: flex;
    gap: 34px;
    align-items: center;
    justify-content: center;
}

.payment-logos img {
    width: 96px;
    height: auto;
}

.guide-change-list {
    display: grid;
    gap: 48px;
}

.guide-change {
    display: grid;
    gap: 42px;
    grid-template-columns: 200px minmax(0, 1fr);
}

.guide-change__title {
    padding-right: 24px;
    border-right: 2px solid #d8a5bf;
    color: #b675a0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.guide-change__text {
    color: #333;
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.05em;
}

.guide-keyword {
    margin-bottom: 0;
}

@media screen and (max-width: 981px) {
    .lower-hero--guide .lower-hero__panel {
        background-image: url("../img/guide/bg-title-guide-sp.jpg");
    }

    .guide-anchor {
        margin-bottom: 9vw;
    }

    .guide-section-body {
        width: auto;
        margin-right: 5vw;
        margin-left: 5vw;
    }

    .guide-flow {
        gap: 42px;
        width: 100%;
    }

    .guide-step {
        display: grid;
        gap: 18px;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: start;
    }

    .guide-step__icon {
        margin-bottom: 0;
    }

    .guide-step:not(:last-child) .guide-step__icon::after {
        bottom: -28px;
        border-top-width: 11px;
        border-right-width: 9px;
        border-left-width: 9px;
    }

    .guide-step__icon img {
        width: 104px;
    }

    .guide-step__title {
        font-size: 1.3rem;
    }

    .guide-step__text {
        font-size: 1.15rem;
    }

    .guide-info-list,
    .guide-change-list {
        gap: 42px;
    }

    .guide-info,
    .guide-change {
        display: block;
    }

    .guide-info__title,
    .guide-change__title {
        margin-bottom: 16px;
        padding: 0 0 0 14px;
        border-right: 0;
        border-left: 2px solid #d8a5bf;
        font-size: 1.25rem;
    }

    .guide-info__text,
    .guide-change__text,
    .payment-lead {
        font-size: 1.15rem;
    }

    .guide-delivery-img {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .guide-delivery-img img {
        width: 620px;
        max-width: none;
    }

    .payment-logos {
        gap: 18px 24px;
        flex-wrap: wrap;
    }

    .payment-logos img {
        width: 76px;
    }

    .guide-keyword {
        margin-bottom: 0;
    }
}