@charset "UTF-8";

.background {
    background-color: #e5f0f8;
}

.kv-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
}

.kv-box {
    display: flex;
    justify-content: center;
    height: 420px;
}

.heading1__kv-box {
    margin-top: 30px;
    padding: 0;
}

.heading1__kv-title {
    margin-bottom: 30px;
    line-height: 1.4;
    font-size: 28px;
    font-weight: 700;
}

.sentence {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 630px;
    height: 100%;
    padding: 32px 0;
}

.layout-right {
    width: 100%;
    max-width: 630px;
}

.inquiry__box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    background-color: #ffffffcc;
    width: 68%;
    height: 130px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0 auto;
    padding-top: 25px;
}

.overlay {
    position: relative;
    z-index: 1;
    margin-top: -130px;
}

.text-center {
    display: flex;
    justify-content: center;
}

.business-index-inquiry__note {
    margin-top: 0px;
}

.font-weight--bold {
    font-weight: 700;
}

.inquiry__box .button-center {
    display: flex;
    justify-content: center;
}

.underline-yellow {
    font-weight: 700;
    background: linear-gradient(transparent 45%, #ffff54 45%);
}


/* お悩みと解決 */
.top-overview {
    padding-bottom: 90px;
}

.top-overview__content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}

.top-overview__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
}

.worries {
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #dddddd;
    padding: 60px 15px;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.solutions {
    position: relative;
    background-color: #e5f0f8;
    border-radius: 8px;
    border: 1px solid #0070bd;
    padding: 30px 25px 20px;
    display: flex;
    flex-direction: column;
}

.solutions::before /* 矢印の両端のraidusが未指定 */ {
    position: absolute;
    content: "";
    top: -70px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
    width: 30px;
    height: 30px;
    border-top: solid 6px #dddddd;
    border-right: solid 6px #dddddd;
}

.worries-text {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.solutions > *:last-child {
    margin-top: 20px;
}

.solutions-text {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    flex-grow: 1;
}

.solutions-img {
    width: 80%;
    margin: auto auto 0;
}

.solutions-img .center {
    display: block;
    margin: 0 auto;
    width: 170px;
}

.util-color--main {
    color: #0070bd;
}

.align-center {
    text-align: center;
}

.top-overview__head .reference {
    font-size: 16px;
    font-weight: 500;
}

/* Visa加盟店ならどこでもつかえるVisaギフトカード！ */
.standard__content__main__title {
    display: block;
}

.standard__content__main__title {
    display: block;
}

.standard__content__card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.card__item__body {
    margin: 24px 0 0;
}

.card__item__caption {
    text-align: right;
}

.standard__content__payment__title {
    font-size: 20px;
    font-weight: 700;
}

.standard__content__payment {
    margin: 24px 0 0;
}

.standard__content__payment__text {
    margin-top: 30px;
}

.highlight--blue-text {
    color: #0070bd;
    font-size: 40px;
}

/* テーブル */
.table__td__text {
    font-weight: 400;
}

.table__td__google-pay {
    font-weight: 400;
    font-family: "Google Sans", "Roboto", "Noto Sans JP", sans-serif;
}

/*2段に分かれたテーブルの余白調整*/
.gift-comparison__table__body .over-sub,
.gift-comparison__table__body .under-sub,
.gift-comparison__table__body .over-sub:nth-child(n + 3):nth-child(-n + 7) {
    padding: 24px 0;
}

.gift-comparison__table__body .padding {
    padding: 0 40px 0 10px;
}


@media only screen and (max-width: 767.98px) {
    .card__item__text {
        font-size: 14px;
    }

    .top-kv {
        padding: 0;
        height: auto;
    }

    .kv-box {
        display: flex;
        flex-direction: column;
    }
    .top-kv__title {
        padding: 24px;
    }

    .sentence {
        width: auto;
    }

    .heading1__kv-box {
        margin-top: 0;
    }

    .heading1__kv-title {
        text-align: center;
    }

    .inquiry__box {
        display: flex;
        flex-direction: column-reverse;
        width: 90%;
        height: 160px;
    }

    .overlay {
        margin-top: -50px;
    }

    .button-center .business-index-inquiry__button-item .business-index-inquiry__button-v2 {
        margin: 25px auto 0;
        width: 90%;
    }

    .business-index-inquiry__button-v2 {
        margin: 25px auto 0;
    }

    .top-overview__content {
        display: flex;
        flex-direction: column;
    }

    .worries {
        padding-top: 15px;
        padding-bottom: 15px;
        margin-bottom: 35px;
    }

    .solutions {
        display: flex;
        flex-direction: row;
        padding: 15px;
    }

    .solutions::before {
        top: -35px;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
        width: 20px;
        height: 20px;
        border-top: solid 4px #dddddd;
        border-right: solid 4px #dddddd;
    }

    .solutions-img {
        width: 80px;
    }

    .top-overview {
        gap: 56px;
    }

    .worries-text,
    .solutions-text {
        font-size: 14px;
        text-align: center;
    }

    .top-overview__head .reference {
        font-size: 12px;
    }


    .card__item__image {
        margin-top: 20px;
    }

    .standard__content__card {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 40px;
    }

    .highlight--blue-text {
        font-size: 26px;
    }

    .business-gift-comparison {
        padding: 64px 24px 24px;
    }

    .business-index-inquiry__title {
        height: 78px;
    }

    .inquiry__text {
        text-align: center;
        margin-bottom: 0;
    }

    .no-gap {
        gap: 0;
    }

    .sp-only__row {
        display: flex;
        flex-direction: row;
    }

    .sp-gap {
        gap: 10px;
    }

    /* display: contents 非対応時順番入替で妥協 */
    .standard__content__card .standard__content__card__item {
        display: block;
    }

    /* SPの並び順 */
    .standard__content__main__title {
        order: 1;
    }
    .card__item__image {
        order: 2;
    }
    .card__item__caption {
        order: 3;
        width: 100%;
        font-size: 12px;
        text-align: start;
    }
    .card__item__body {
        order: 4;
    }

    /*2段に分かれたテーブルの余白調整*/
    .gift-comparison__table__body .over-sub,
    .gift-comparison__table__body .under-sub,
    .gift-comparison__table__body .over-sub:nth-child(n + 3):nth-child(-n + 7) {
        padding: 10px 0 10px;
    }

    .gift-comparison__table__body .padding {
        padding: 0 0 0 10px;
    }
}

/* SP並び順変更の為、ラッパーを透過させて4要素を直接フレックスアイテム化 */
@supports (display: contents) {
    @media only screen and (max-width: 767.98px) {
        .standard__content__card .standard__content__card__item {
            display: contents;
        }
    }
}

@media only screen and (max-width: 767.98px) {
    .top-overview__item {
        display: block;
    }

    .solutions {
        display: flex;
        flex-direction: row;
        padding: 15px;
        align-items: center;
    }

    .solutions > *:last-child {
        margin-top: 0;
    }

    .solutions-img {
        width: 80px;
        margin: 0 0 0 15px;
    }
}

/* KV */
@media screen and (550px <= width <= 767.98px) {
    .kv-box {
        height: 500px;
    }

    .sentence {
        height: auto;
    }

    .layout-right {
        max-width: none;
    }
}