@charset "utf-8";

body {
    letter-spacing: 0;
}

body #pagetop ~ nav,
body #pagetop {
    transition: opacity 0.3s;
    opacity: 1;
}

body.js-is-scrolling-down #pagetop,
body.js-is-scrolling-down #pagetop ~ nav {
    opacity: 0;
    pointer-events: none;
}
body.js-is-scrolling-up #pagetop,
body.js-is-scrolling-up #pagetop ~ nav {

}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        /*transform: translateY(1.25rem);*/
    }

    100% {
        opacity: 1;
        /*transform: translateY(0);*/
    }
}

@keyframes modalFadeOut {
    0% {
        opacity: 1;
        /*transform: translateY(0);*/
    }

    100% {
        opacity: 0;
        /*transform: translateY(1.25rem);*/
    }
}

@keyframes modalFadeZoomIn {
    0% {
        opacity: 0;
        /*transform: translateY(#{rem(20)}) scale(.9);*/
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalFadeZoomOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        /*transform: translateY(#{rem(20)}) scale(.9);*/
    }
}

.c-modal,
.c-modal *,
.c-modal::before,
.c-modal::after {
    box-sizing: border-box;
}

.c-modal {
    --index-content: 1;
    --index-backdrop: 0;
    --index-close: 2;
    --video-ui-gutter: 32px;
    --video-u-button-color: rgba(67, 67, 67, 70%);
    --vide-ui-button-hover-color: rgba(67, 67, 67, 50%);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: none;
    overflow: auto;
    overscroll-behavior-y: contain;
    pointer-events: none;

    /*@include mq.mq($until: tablet) {*/
    /*    background-color: var(--color-white);*/
    /*}*/

    /*@at-root body.admin-bar & {*/
    /*    top: var(--wp-admin-bar-height);*/
    /*    height: calc(100% - var(--wp-admin-bar-height));*/
    /*}*/

    &--video {
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        &.is-show {
            pointer-events: all;
            animation: modalFadeZoomIn var(--transition-timing-base) .7s forwards;
        }

        &.is-hide {
            animation: modalFadeZoomOut var(--transition-timing-base) .3s forwards;
        }

        .c-modal__content,
        .c-modal__content-inner {
            height: 100%;
        }
    }

    &__video {
        height: 100%;
        overflow: hidden;

        .video-js {
            width: 100%;
            height: 100%;

            .vjs-tech {
                /*@include mq.mq($until: tablet) {*/
                /*    object-fit: contain;*/
                /*}*/
                /*@include mq.mq(tablet) {*/
                /*    object-fit: cover;*/
                /*}*/
            }

            .vjs-control {
                &.vjs-button > .vjs-icon-placeholder::before {
                    position: static;
                }

                &:not(.vjs-progress-control, .vjs-volume-panel.vjs-hover) {
                    width: 4em;
                }

                &:not(.vjs-progress-control, .vjs-volume-panel, .vjs-volume-control) {
                    border-radius: 50%;
                    background-color: var(--video-u-button-color);
                    height: 4em;

                    @media (hover: hover) {
                        transition: background-color var(--transition-setting-base);

                        &:hover {
                            background-color: var(--vide-ui-button-hover-color);
                        }
                    }
                }

                &.vjs-volume-panel {
                    align-items: center;
                }
            }

            --progress-color: #d7d7d7;

            .vjs-progress-control {
                .vjs-play-progress {
                    background-color: var(--progress-color);

                    &::before {
                        color: var(--progress-color);
                    }
                }

                .vjs-load-progress div {
                    background-color: rgba(228, 228, 228, 35%);
                }

                .vjs-slider {
                    background-color: var(--video-u-button-color);
                }
            }

            .vjs-volume-level {
                background-color: var(--progress-color);

                &::before {
                    color: var(--progress-color);
                }
            }

        /*// &.vjs-user-inactive .vjs-control-bar {*/
        /*//   opacity: 1 !important;*/
        /*//   pointer-events: all !important;*/
        /*// }*/

            .vjs-icon-placeholder {
            }

            .vjs-control-bar {
                /*gap: interp(16, 32);*/
                /*font-size: interp(12, 20);*/
            /*// color: #000;*/
                background-color: transparent;
                padding: 0 var(--video-ui-gutter) 0;
                margin-bottom: var(--video-ui-gutter);
                height: auto;
                align-items: center;
            }
        }
    }
}

.c-modal.is-show {
    pointer-events: all;
    display: block;
    z-index: 10001;
    animation: modalFadeIn ease-in-out .3s forwards;
}

.c-modal.is-hide {
    animation: modalFadeOut ease-in-out .3s forwards;
}

.c-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--index-backdrop);
    width: 100%;
    height: 100%;
    /*height: calc(100% + #{rem(1)});*/
    cursor: pointer;
    background-color: rgb(0, 0, 0, 85%);
}

.c-modal__content {
    position: relative;
    z-index: var(--index-content);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 80px;
    height: 100%;

    /*@include mq.mq($until: tablet) {*/
    /*    background-color: var(--color-white);*/
    /*}*/

    /*@include mq.mq(tablet) {*/
    /*    background: rgba(0, 0, 0, 50%);*/
    /*    backdrop-filter: blur(#{rem(5)});*/
    /*}*/
}

.u-image-replace {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    text-indent: 100%;
    word-wrap: normal !important;
    white-space: nowrap;
}

.c-modal__content-inner {
    width: 100%;
    height: auto;
    max-width: 80%;
    margin: 0 auto;
    aspect-ratio: 1920 / 1080;
    max-height: 100%;
}

.c-modal__content-inner .video-js {
    width: 100%;
    height: 100%;
}

.c-modal__close {
    --area-width: 5rem;
    --area-height: 5rem;
    --button-width: 100%;
    --button-height: 100%;
    --icon-width: 2.5rem;
    --icon-height: 2.5rem;
    --button-color: #fff;

    position: fixed;
    top: 0;
    right: 16px;
    z-index: 200;
    width: var(--area-width);
    height: var(--area-height);

    /*@at-root body.admin-bar & {*/
    /*    top: var(--wp-admin-bar-height);*/
    /*}*/

    /*&--white {*/
    /*    --button-color: #fff;*/
    /*}*/
}

.c-modal__close--circle {
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--video-u-button-color);
    top: calc(var(--video-ui-gutter));
    right: calc(var(--video-ui-gutter));

    /*@at-root body.admin-bar & {*/
    /*    top: calc(var(--video-ui-gutter) + var(--env-safe-area-inset-top));*/
    /*}*/

    /*@include mq.mq($until: tablet) {*/
    /*    --area-width: #{rem(48)};*/
    /*    --area-height: #{rem(48)};*/
    /*    --icon-width: #{rem(24)};*/
    /*    --icon-height: #{rem(24)};*/

    /*    .c-modal__close-button-inner {*/
    /*        &::before {*/
    /*            top: rem(9);*/
    /*            transform: translateY(rem(2.5)) rotate(45deg);*/
    /*        }*/

    /*        &::after {*/
    /*            bottom: rem(9);*/
    /*            transform: translateY(rem(-2.5)) rotate(-45deg);*/
    /*        }*/
    /*    }*/
    /*}*/
}

@media (max-width: 812px) {
    .c-modal__content {
        padding: 80px 0;
    }

    .c-modal__content-inner {
        max-width: 100%;
    }
}

@media (hover: hover) {
    /*transition: background-color var(--transition-setting-base);*/

    .c-modal__close--circle:hover {
        background-color: var(--vide-ui-button-hover-color);
    }
}

.c-modal__close-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--button-width);
    height: var(--button-height);
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    appearance: none;
}

.c-modal__close-button-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: var(--icon-width);
    height: var(--icon-height);
}

.c-modal__close-button-inner::before,
.c-modal__close-button-inner::after {
    height: 1px;
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    /*height: rem(1);*/
    content: '';
    background: var(--button-color);
    transition: transform var(--transition-setting-base);
    transform: rotate(0);
}

.c-modal__close-button-inner::before {
    top: 0.9375rem;
    transform: translateY(0.25rem) rotate(45deg);
}

.c-modal__close-button-inner::after {
    bottom: 0.9375rem;
    transform: translateY(-0.3125rem) rotate(-45deg);
}


/* General */
.container {
    --content-width: 1100px;
    --pad: 6.666666%;
    max-width: calc(var(--content-width) + var(--pad) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
    box-sizing: border-box;
}

.delivery {
    --yellow: #FFFF00;
    --dark-blue: #002575;
    background: #00A0E0;
}

.delivery > footer {
    margin-top: 0;
}

.delivery > main {
    background-color: #D7EBF0;
    padding-bottom: 80px;
}

@media (max-width: 812px) {
    .delivery > main {
        padding-bottom: 0;
    }
}

.delivery-header {
    position: relative;
    /*padding-bottom: 130px;*/
    /*overflow: hidden;*/
    background-color: #00A0E0;
}

.delivery-header__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    max-width: none;
    padding-top: 50px;
}

.delivery-header__inner h1 {
    position: relative;
}

.delivery-header__inner .badge {
    position: absolute;
    right: -260px;
    bottom: 20px;
    width: 246px;
    aspect-ratio: 246 / 240;
}

@media (max-width: 812px) {
    .delivery-header__inner .badge {
        width: 103px;
        bottom: -40px;
        right: -15px;
    }
}

.delivery-header h1 {
    display: flex;
    justify-content: center;
    margin: 0;
}

.delivery-header h1 img {
    display: block;
    max-width: 755px;
    width: 100%;
    height: auto;
    margin: 0;
}

.delivery-header h2 {
    letter-spacing: 0.18em;
    color: var(--dark-blue);
    background: var(--yellow);
    line-height: 1.2;
    padding: 0 20px;
    font-size: 49px;
    margin-top: 118px;
}

.delivery-header p {
    margin-top: 36px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    line-height: 1.4;
    font-weight: bold;
}

.delivery-header p small {
    font-size: 25px;
}

.delivery-header p em {
    font-size: 36px;
}

.delivery-header p span {
    font-size: 31px;
}

.delivery-header p br:nth-child(1) {
    display: none;
}

.delivery-header .delivery-header__cm {
    /*display: none;*/
    position: sticky;
    padding-top: 32px;
    padding-left: 38px;
    bottom: 48px;
    width: fit-content;
}

.bottom-cm {
    position: sticky;
    padding-left: 38px;
    bottom: 76px;
    z-index: 3;
    width: fit-content;
}

.bottom-cm .delivery-header__cm {
    z-index: 100;
    max-width: 337px;
    width: 100%;
}

.delivery-header__cm button {
    display: block;
    border-radius: 15px;
    overflow: hidden;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
    padding: 0;
    border: none;
    appearance: none;
    cursor: pointer;
    background: transparent;
    width: 337px;
}

.delivery-header__cm img {

}

.delivery-header__cm p {
    display: none;
}

.delivery-header__scroll {
    position: fixed;
    right: 48px;
    bottom: 24px;
    width: 87px;
    height: 122.91px;
    transition: opacity 0.3s;
}

.delivery-header__scroll img {

}

.delivery-header__scroll.hide {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 812px) {
    .bottom-cm {
        display: none;
    }

    .delivery-header p br:nth-child(1) {
        display: inline;
    }

    .delivery-header {
        --pad: 6.666666%;
        padding-bottom: 60px;
    }
    .delivery-header .container {
        padding: 0;
    }
    .delivery-header h1 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .delivery-header p {
        padding-left: var(--pad);
        padding-right: var(--pad);
    }
    .delivery-header__scroll {
        display: none !important;
    }
    .delivery-header p small {
        font-size: 18px;
        margin: 0 -.5em 0;
    }
    .delivery-header p em {
        font-size: 22px;
    }
    .delivery-header p {
        order: 1;
        font-size: 18px;
        margin-top: 0;
        white-space: nowrap;
    }

    .delivery-header p span {
        font-size: 18px;
    }

    .delivery-header h1 {
        order: 2;
        margin-top: 45px;
    }

    .delivery-header h2 {
        order: 3;
        /*margin-left: calc(var(--pad) * -1);*/
        /*margin-right: calc(var(--pad) * -1);*/
        padding-left: 0;
        padding-right: 0;
        font-size: 20px;
        margin-top: 62px;
        text-align: center;
        /*white-space: nowrap;*/
        letter-spacing: 0.1em;
        width: 100%;
    }

    .delivery-header .delivery-header__cm {
        display: block;
        position: static;
        order: 4;
        margin-top: 38px;
        z-index: 0;
        max-width: 278px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-top: 0;
    }

    .delivery-header__cm button {
        width: 100%;
    }

    .delivery-header__cm p {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 14px;
        text-align: center;
        display: none;
    }

    .delivery-header__cm p::before {
        content: "";
        display: block;
        width: 9.22px;
        height: 12.84px;
        background-image: url("../img/cm_line.svg");
        background-size: contain;
        margin-right: .3em;
    }

    .delivery-header__cm p::after {
        content: "";
        display: block;
        width: 9.22px;
        height: 12.84px;
        background-image: url("../img/cm_line_invert.svg");
        background-size: contain;
    }
}

/* トラブル */
.delivery-trouble {
    position: relative;
    padding-bottom: 0;
    background-color: #00A0E0;
    margin-top: -1px;
}
.delivery-trouble::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -1px;
    z-index: 0;
    background: #fff;
    height: 80px;
    display: block;
    clip-path: polygon(50% 100%, 100% 0, 100% 100%, 0 100%, 0 0);
}

.delivery-trouble__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
}

.delivery-trouble__inner h2 {
    color: #fff;
    text-align: center;
    font-size: 32px;
    line-height: 1.7;
}

.delivery-trouble__inner h2 span {
    font-size: 48px;
}

.delivery-trouble__image {
    position: relative;
    z-index: 1;
    max-width: 967px;
    width: 100%;
    margin: 64px auto 0;
}

@media (max-width: 812px) {
    .delivery-trouble {
        /*padding-bottom: 50px;*/
    }
    .delivery-trouble::after {
        height: 50px;
    }
    .delivery-trouble__image {
        max-width: 321.59px;
        width: 100%;
        margin-top: 22px;
    }
    .delivery-trouble__inner {
        padding-top: 14px;
    }
    .delivery-trouble__inner h2 {
        font-size: 18px;
    }

    .delivery-trouble__inner h2 span {
        font-size: 24px;
    }
}

/* おすすめ */
.delivery-recommend {
    overflow: hidden;
    padding: 100px 0 150px;
    background-color: #fff;
}

/*.delivery-recommend::before {*/
/*    content: "";*/
/*    position: relative;*/
/*    background: #00A0E0;*/
/*    clip-path: polygon(50% 100%, 0 0, 100% 0);*/
/*    height: 80px;*/
/*    margin-bottom: 124px;*/
/*    display: block;*/
/*}*/

.delivery-recommend__before {
    font-size: 48px;
    text-align: center;
    font-weight: bold;
    color: #000000;
}

.delivery-recommend__bubble {
    position: relative;
    max-width: 894px;
    width: 100%;
    /*height: 147px;*/
    margin: 96px auto 65px;
    border-radius: 300px;
    background: #FFFF00;
    text-align: center;
    font-weight: bold;
    color: #002575;
    font-size: 54px;
    line-height: 1;
    padding: 30px 16px;
    box-sizing: border-box;
}

.delivery-recommend__bubble::after {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    border-top: 31px solid #FFFF00;
    border-bottom: 0;
}


.delivery-recommend__inner h2 {
    font-size: 35px;
    color: #00A0E0;
    text-align: center;
    margin-bottom: 65px;
}

.delivery-recommend__inner h2 span {
    font-size: 51px;
}

.delivery-recommend__texts {
    color: #00A0E0;
    text-align: center;
    font-size: 22px;
    line-height: 2.045;
}

.delivery-recommend__images {
    position: relative;
    display: flex;
    gap: 113px;
    align-items: flex-end;
    max-width: 485.22px;
    width: 100%;
    margin: 80px auto 0;
    padding-top: 24px;
    --car-anim-duration: 1s;
    --acuvue-anim-delay: var(--car-anim-duration);
    --acuvue-anim-duration: calc(1s + var(--car-anim-duration));
    --after-wait: 2s;
    --acuvue-total-duration: calc(var(--acuvue-anim-duration) + var(--after-wait)); /* acuvueの全体周期 */

    --car-after: var(--acuvue-total-duration);
    --car-total-duration: calc(var(--car-anim-duration) + var(--car-after)); /* carの全体周期 */
}

.delivery-recommend__images .car {
    aspect-ratio: 243 / 130.32;
    width: 50%;
    animation: carSlideIn var(--car-total-duration) infinite; /* carのアニメーション */
    opacity: 0; /* 初期状態 */
}

.delivery-recommend__images .acuvue {
    position: absolute;
    top: 0;
    right: 26.31%;
    aspect-ratio: 113.84 / 46;
    width: 23.461%;
    animation: acuvueSlideUp calc(var(--acuvue-anim-delay) + var(--acuvue-total-duration)) infinite; /* acuvueのアニメーション */
    /*animation-delay: var(--acuvue-anim-delay); !* car終了タイミングで開始 *!*/
    opacity: 0; /* 初期状態 */
}

.delivery-recommend__images .home {
    aspect-ratio: 127.7 / 161.49;
    width: 26.31%;
}

/* carのフェードスライドインアニメーション */
@keyframes carSlideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    16% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* acuvueのフェードスライドアップアニメーション */
@keyframes acuvueSlideUp {
    0%,15% {
        transform: translateY(100%);
        opacity: 0;
    }
    20% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 812px) {
    .delivery-recommend {
        padding-top: 20px;
        padding-bottom: 80px;
    }
    .delivery-recommend::before {
        height: 38px;
        margin-bottom: 20px;
    }

    .delivery-recommend__before {
        font-size: 18px;
    }

    .delivery-recommend__bubble {
        width: 100%;
        max-width: 334px;
        margin: 14px auto 40px;
        font-size: 22px;
        padding: 12px 0;
        letter-spacing: 0;
    }

    .delivery-recommend__bubble::after {
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-top: 12px solid #FFFF00;
    }

    .delivery-recommend__inner h2 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .delivery-recommend__inner h2 span {
        font-size: 24px;
    }

    .delivery-recommend__texts {
        font-size: 14px;
        max-width: 320px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .delivery-recommend__images {
        max-width: 273.82px;
        width: 100%;
        column-gap: 64px;
        margin-top: 50px;
        padding-top: 13px;
    }

    .delivery-recommend__images img:nth-child(1) {
        width: 50.25%;
    }

    .delivery-recommend__images img:nth-child(2) {
        position: absolute;
        top: 0;
        right: 26.37%;
        width: 23.46%;
    }

    .delivery-recommend__images img:nth-child(3) {
        width: 26.29%;
    }
}



/* メリット */
.delivery-merit {
    overflow: hidden;
    padding: 130px 0 100px;
    background-color: #D7EBF0;
}

.delivery-merit h2 {
    text-align: center;
    margin: 0 0 100px;
    color: #002575;
}

.delivery-merit h2 small {
    font-size: 40px;
}
.delivery-merit h2 em {
    font-size: 110px;
}
.delivery-merit h2 span {
    font-size: 60px;
    position: relative;
}
.delivery-merit h2 strong {
    position: relative;
}
.delivery-merit h2 strong::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    height: 10px;
    width: 100%;
    background-color: #FFFF00;
}

.delivery-merit__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "one one"
        "two three"
        "four four";
    column-gap: 30px;
    row-gap: 24px;
}

.delivery-merit__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 35px;
    padding: 19px 45px;
    column-gap: 10px;
}

.delivery-merit__item ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 25px;
}

.delivery-merit__item li::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 7px;
    background-color: #00A0E0;
    border-radius: 50%;

}

.delivery-merit__item:nth-of-type(1) {
    grid-area: one;
    min-height: 356px;
}

.delivery-merit__item:nth-of-type(1) img {
    width: 231px;
    aspect-ratio: 232 / 189;
}

.delivery-merit__item:nth-of-type(2) {
    grid-area: two;
    min-height: 185px;
}

.delivery-merit__item:nth-of-type(2) img {
    width: 221px;
    aspect-ratio: 221.12 / 118.17;
}

.delivery-merit__item:nth-of-type(3) {
    grid-area: three;
    min-height: 185px;
}

.delivery-merit__item:nth-of-type(3) img {
    width: 155px;
    aspect-ratio: 155.37 / 132;
}

.delivery-merit__item:nth-of-type(3) br:nth-child(2) {
    display: none;
}

@media (max-width: 812px) {
    .delivery-merit__item:nth-of-type(3) br:nth-child(2) {
        display: inline;
    }
}

.delivery-merit__item:nth-of-type(4) {
    grid-area: four;
    padding-top: 130px;
}

.delivery-merit__item h3 {
    color: #002575;
    font-size: 32px;
    margin: 0;
    line-height: 1.555;
    letter-spacing: 0;
}

.delivery-merit__item ul {
    font-size: 24px;
    color: #4D4D4D;
}

.delivery-merit__item-types div {
    margin-top: 28px;
    text-align: center;
    font-weight: bold;
    border-radius: 200px;
}

.delivery-merit__type {
    margin-top: 28px;
    text-align: center;
    font-weight: bold;
    border-radius: 200px;
    border: solid 2px #00A0E0;
    font-size: 20px;
    color: #00A0E0;
    padding: 6px 20px;
    max-width: 332px;
    box-sizing: border-box;
    letter-spacing: 0;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    cursor: pointer;
}

.delivery-merit__type:hover {
    transform: scale(1.05);
}

.delivery-merit__type.is-active {
    background: #00A0E0;
    color: #fff;
}

.delivery-merit__graph {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "one";
}

.delivery-merit__graph img {
    grid-area: one;
    transition: opacity 0.3s;
}

.delivery-merit__graph img:not(.is-active) {
    opacity: 0;
}

.delivery-merit__more-text {
    margin: 52PX;
    text-align: center;
    font-size: 48px;
    color: #01A0E0;
    font-weight: bold;
}

.delivery-merit__more {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 35px;
    padding: 50px;
}

.delivery-merit__more img {

}

.delivery-merit__item:nth-of-type(4) {
    padding-bottom: 46px;
}

.delivery-merit__item:nth-of-type(4) br {
    display: none;
}

@media (max-width: 812px) {
    .delivery-merit {
        padding: 60px 0 80px;
    }
    .delivery-merit h2 {
        margin-bottom: 32px;
    }
    .delivery-merit h2 small {
        font-size: 18px;
    }
    .delivery-merit h2 em {
        font-size: 64px;
    }
    .delivery-merit h2 span {
        font-size: 24px;
    }
    .delivery-merit h2 strong::after {
        height: 4px;
    }

    .delivery-merit__item {
        border-radius: 11px;
    }

    .delivery-merit__more {
        padding: 15px 17px;
        border-radius: 11px;
    }

    .delivery-merit__more-text {
        font-size: 18px;
        margin: 30px 0;
    }

    .delivery-merit__items {
        gap: 12px;
    }
    .delivery-merit__item {
        flex-direction: column;
        gap: 6px;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 22px;
    }

    .delivery-merit__item ul {
        gap: 3px;
        order: 3;
    }

    .delivery-merit__item li::before {
        width: 9px;
        height: 9px;
        margin-right: 5px;
    }

    .delivery-merit__item-types {
        display: flex;
        gap: 12px;
        margin: 0 0 24px;
    }

    .delivery-merit__item-types div {
        margin: 0 0 !important;
    }

    .delivery-merit__type {
        font-size: 11px;
        padding: 5px 6px;
    }

    .delivery-merit__item:nth-of-type(1) {
        min-height: 0;
    }

    .delivery-merit__item:nth-of-type(1) img {
        order: 1;
        width: 72px;
        aspect-ratio: 232 / 189;
    }

    .delivery-merit__item:nth-of-type(2) {
        grid-area: two;
        min-height: 0;
    }

    .delivery-merit__item:nth-of-type(2) img {
        order: 1;
        width: 85px;
        /*aspect-ratio: 147 / 146;*/
    }

    .delivery-merit__item:nth-of-type(3) {
        grid-area: three;
        min-height: 0;
    }

    .delivery-merit__item:nth-of-type(3) img {
        order: 1;
        width: 50px;
        aspect-ratio: 133 / 123;
    }

    .delivery-merit__item h3 {
        font-size: 18px;
        order: 2;
    }

    .delivery-merit__item ul {
        font-size: 14px;
    }

    .delivery-merit__item:nth-of-type(4) {
        padding-top: 19px;
        min-height: 0;
        padding-bottom: 24px;
    }

    .delivery-merit__item:nth-of-type(4) h3 {
        text-align: center;
        font-size: 18px;
    }

    .delivery-merit__texts div {
        margin-top: 22px;
    }

    .delivery-merit__item:nth-of-type(4) br {
        display: inline;
    }
}

/* ご利用ステップ */
.delivery-step {
    padding: 0 0 70px;
    background-color: #fff;
    overflow: hidden;
}

.delivery-step::before {
    content: "";
    position: relative;
    background: #D7EBF0;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    height: 80px;
    margin-bottom: 124px;
    display: block;
    margin-top: -1px;
}

.delivery-step h2 {
    font-size: 32px;
    margin: 0 0 40px;
    color: #002575;
    text-align: center;
}

.delivery-step h2 em {
    font-size: 88px;
}

.delivery-step__flow {
    --item-count: 4;
    --arrow-count: 3;
    --arrow-width: 32px;
    --item-width: calc((100% - var(--arrow-width) * var(--arrow-count)) / var(--item-count));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
}

.delivery-step__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--item-width);
    gap: 40px;
}

.delivery-step__item:nth-of-type(4)::after {
    position: absolute;
    top: -78px;
    right: -65px;
    content: "";
    display: block;
    background-image: url("../img/get.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 138px;
    height: 138px;
    aspect-ratio: 1;
}

.delivery-step__item p {
    margin: 0;
    font-weight: bold;
    font-size: 24px;
}

.delivery-step__arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 32px;
    border-color: transparent transparent transparent #D7EBF0;
    margin-top: calc(var(--item-width) / 2);
    transform: translateY(-50%);
}

@media (max-width: 812px) {
    .delivery-step::before {
        height: 38px;
        margin-bottom: 50px;
    }
    .delivery-step h2 {
        font-size: 24px;
        margin-bottom: 27px;
    }
    .delivery-step h2 em {
        font-size: 63px;
    }

    .delivery-step__flow {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 335px;
        padding-left: 19px;
        margin: 0 auto;
    }
    .delivery-step__item {
        --img-width: 60px;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 18px;
    }
    .delivery-step__item img {
        width: var(--img-width);
    }

    .delivery-step__item p {
        font-size: 14px;
        font-weight: 500;
    }
    .delivery-step__item p br {
        display: none;
    }

    .delivery-step__arrow {
        margin: 0;
        border-width: 4.5px 0 4.5px 8px;
        transform: rotate(90deg) translateY(-6%) translateX(0%);
        margin-left: 26px;
    }

    .delivery-step__item:nth-of-type(4)::after {
        top: -28px;
        left: 44px;
        width: 44px;
        height: auto;
    }
}

/* アクセス */
.delivery-access {
    padding: 0 0 100px;
    background-color: #F5F5F0;
}

.delivery-access::before {
    content: "";
    position: relative;
    background: #fff;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    height: 80px;
    margin-top: -1px;
    margin-bottom: 190px;
    display: block;
}

.delivery-access__headline {
    font-size: 47px;
    margin: 190px 0 70px;
    color: #002575;
    text-align: center;
}

.delivery-access__content {
    display: grid;
    grid-template-columns: auto 288px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "map image"
        "map overview"
        "note note";
    column-gap: 38px;
    row-gap: 52px;
}

.delivery-access__map {
    grid-area: map;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
}

.delivery-access__map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.delivery-access__overview {
    grid-area: overview;
}

.delivery-access__img {
    grid-area: image;
    border-radius: 17px;
    display: block;
}

.delivery-access__overview h3 {
    font-size: 32px;
    margin: 0;
}

.delivery-access__overview address {
    display: block;
    font-size: 20px;
    margin-top: 30px;
    font-style: normal;
    line-height: 1.5;
}

.delivery-access__note {
    grid-area: note;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 70px;
}

.delivery-access__note > div {
    flex: 1;
}

.delivery-access__note dt {
    font-size: 24px;
    background: #fff;
    text-align: center;
    padding: 18px;
    margin-bottom: 18px;
    font-weight: bold;
}


.delivery-access__note dd {
    font-size: 16px;
    line-height: 2;
}

@media (max-width: 812px) {
    .delivery-access__note > div {
        width: 100%;
    }
    .delivery-access::before {
        height: 38px;
        margin-bottom: 96px;
    }
    .delivery-access__headline {
        font-size: 24px;
        margin-top: 96px;
        margin-bottom: 20px;
    }
    .delivery-access .container {
        padding: 0;
    }
    .delivery-access__content {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas:
        "map map"
        "overview overview"
        "image note";
        row-gap: 18px;
        column-gap: 17px;
    }

    .delivery-access__img {
        /*max-width: 144px;*/
        margin-left: -17px;
        width: calc(100% + 17px);
        height: 100% !important;
        object-fit: cover;
    }

    .delivery-access__overview address {
        font-size: 12px;
        margin-top: 6px;
    }

    .delivery-access__overview h3 {
        font-size: 18px;
    }

    .delivery-access__map {
        border-radius: 0;
        aspect-ratio: 375 / 173.08;
    }

    .delivery-access__overview {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-bottom: 12px;
    }

    .delivery-access__note {
        padding-right: 6.666666%;
        flex-direction: column;
        row-gap: 20px;
    }

    .delivery-access__note dt {
        font-size: 14px;
        padding: 4px 8px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .delivery-access__note dd {
        font-size: 12px;
    }

    .delivery-access__note dd > * {
        line-height: 1.6;
        margin: 0;
    }
}

/* プラン */
.delivery-plan {
    overflow: hidden;
    padding-bottom: 140px;
    background-color: #00A0E0;
}
.delivery-plan header {
    border-radius: 0;
    width: 100%;
    margin: 0;
    background-color: #F6E422;
    display: flex;
    justify-content: center;
    padding: 18px 0;
    height: auto;
    box-shadow: none;
    position: static;
}
.delivery-plan header {
    margin-bottom: 120px;
}
.delivery-plan h2 {
    color: #00A0E0;
    text-align: center;
    font-size: 48px;
    margin: 0;
    line-height: 1.15;
}

.delivery-plan__set {
    padding-left: 30px;
    padding-right: 30px;
}

#plan-set {
    --gap: 10px;
    --gap-count: 2;
    --slide-count: 3;
    overflow: visible;
    margin: 80px auto 146px;
}

#plan-set .swiper-slide {
    position: relative;
    --width: calc((100% - var(--gap) * var(--gap-count)) / var(--slide-count));
    width: var(--width);
    margin-right: var(--gap);
    height: 297px;
    padding: 60px 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #A7D8F2;
    border-radius: 1rem;
    box-sizing: border-box;
}

#plan-set .swiper-slide p {
    max-width: 326px;
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

#plan-set .swiper-slide:last-child {
    margin-right: 0;
}

#plan-set .swiper-slide > img {
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
}

.delivery-plan h2 span {
    color: #002575;
}

.delivery-plan h3 {
    text-align: center;
    color: #fff;
    font-size: 32px;
    margin: 0;
}

.delivery-plan h3 br {
    display: none;
}

.delivery-ribon {
    width: 580px;
    height: 68px;
    margin: 28px auto 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-image: url("../img/plan_ribon_l.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.delivery-ribon p {
    margin: 0;
    font-size: 39px;
    text-align: center;
    color: #002575;
    font-weight: bold;
}

.delivery-ribon p small {
    font-size: 24px;
}

#plan-scroller .swiper-wrapper {
    transition-timing-function: linear;
}
@media (max-width: 812px) {
    #plan-scroller .swiper-slide {
        padding-right: 0.6%;
        /*width: calc(774 / 375 * 100%);*/
        width: 774px;
        max-height: 116px;
    }
    #plan-scroller .swiper-slide img {
        width: 100%;
        height: auto;
    }
    .delivery-plan {
        overflow: hidden;
    }
    .delivery-plan header {
        padding: 7px;
        margin-bottom: 40px;
    }
    .delivery-plan header h2 {
        font-size: 18px;
        line-height: 1.3;
    }

    #plan-set {
        margin-top: 50px;
        margin-bottom: 50px;
        padding-left: 19.4%;
        padding-right: 19.4%;
    }

    #plan-set .swiper {
        overflow: visible;
    }

    #plan-set .swiper-slide {
        /*max-width: 205px;*/
        width: 100%;
        padding: 35px 21px 21px;
        height: auto;
        min-height: 0;
    }

    #plan-set .swiper-slide p img {
        max-height: 43px;
    }

    #plan-set .swiper-slide > img {
        width: 100%;
        object-fit: contain;
        max-height: 173px;
    }

    .delivery-plan__set {
        padding: 0;
    }
    .delivery-plan {
        padding-bottom: 78px;
    }
    .delivery-plan h3 {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .delivery-plan h3 br {
        display: inline;
    }
    .delivery-ribon {
        max-width: 242px;
        width: 100%;
        height: 29px;
        margin: 0 auto 28px;
        padding: 0;
        background-image: url("../img/plan_ribon_l.svg");
    }

    .delivery-ribon p {
        font-size: 15px;
    }

    .delivery-ribon p small {
        font-size: 8px;
    }
}

/* 利用者の声 */
.delivery-voice {
    overflow: hidden;
    padding: 130px 0 76px;
    background-color: #D7EBF0;
}

.delivery-voice h2 {
    color: #002575;
    font-size: 48px;
    border-bottom: 12px var(--yellow) solid;
}

.delivery-voice__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.delivery-voice .swiper {
    overflow: visible;
    width: 100%;
}

.delivery-voice__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    margin-top: 64px;
    padding-top: 180px;
    padding-bottom: 100px;
}

.delivery-voice__content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    height: 100%;
    background-image: url("../img/voice_bg.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    aspect-ratio: 2180 / 932.28;
}

.delivery-voice__item {
    --side-pad: 15%;
    --offset: 48px;
    --text-pad: 32px;
    --img-pad: 16px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.delivery-voice__item-inner {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.delivery-voice__item p {
    flex: 1;
    line-height: 1.888;
}

.delivery-voice__item:nth-of-type(odd) {
    padding-right: var(--side-pad);
}

.delivery-voice__item:nth-of-type(odd) h3 { order: 2 }
.delivery-voice__item:nth-of-type(odd) p { order: 3; padding-left: var(--text-pad) }
.delivery-voice__item:nth-of-type(odd) .delivery-voice__img { order: 1; padding-right: var(--img-pad) }

.delivery-voice__item:nth-of-type(even) { padding-left: var(--side-pad); }
.delivery-voice__item:nth-of-type(even) h3 { order: 2 }
.delivery-voice__item:nth-of-type(even) p { order: 1; padding-right: var(--text-pad) }
.delivery-voice__item:nth-of-type(even) .delivery-voice__img { order: 3; padding-left: var(--img-pad) }
.delivery-voice__item:nth-of-type(even) .delivery-voice__img img { margin-left: auto }

.delivery-voice__item h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    color: #fff;
    width: 187.93px;
    background-color: #00A0E0;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    line-height: 1.333;
}

.delivery-voice__img {
    width: var(--side-pad);
}

.delivery-voice__img img {
    display: block;
    max-width: 80%;
    width: 100%;
}

.delivery-voice__img.first img {
    aspect-ratio: 131.99 / 181.3;
}

.delivery-voice__img.second img {
    aspect-ratio: 138.88 / 173.98;
}

.delivery-voice__img.third img {
    aspect-ratio: 134.17 / 154.35;
}

.delivery-voice__item {

}

#voice-next,
#voice-prev {
    display: none;
}

@media (max-width: 812px) {
    .delivery-voice {
        padding: 48px 0 50px;
    }
    .delivery-voice h2 {
        font-size: 24px;
        border-bottom-width: 4px;
    }
    #voice-slider {
        margin-top: 26px;
        max-width: 326px;
    }
    .delivery-voice__content {
        margin-top: 0;
        flex-direction: row;
        padding: 0;
        gap: 0;
    }

    #voice-next,
    #voice-prev {
        display: block;
        position: absolute;
        bottom: 50%;
        transform: translateY(50%);
        width: 17px;
        height: 25px;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
        top: calc(50% + 20px);
    }

    #voice-next::after,
    #voice-prev::after {
        content: "";
    }

    #voice-next {
        right: 0;
        background-image: url("../img/arrow.svg");
        background-size: cover;
    }

    #voice-prev {
        left: 0;
        background-image: url("../img/arrow_left.svg");
        background-size: cover;
    }

    .delivery-voice__content::after {
        content: none;
    }

    .delivery-voice__item {
        width: 100%;
        padding: 0 0 20px !important;
        display: flex;
        justify-content: center;
    }

    .delivery-voice__item::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        height: auto;
        background-image: url("../img/bubble_sp.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        max-width: 309px;
        width: 100%;
        aspect-ratio: 309 / 311;
    }

    .delivery-voice__item-inner {
        max-width: 240px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "img h3"
            "p p";
        row-gap: 7px;
    }

    .delivery-voice__item .delivery-voice__img {
        grid-area: img;
        padding: 0 !important;
        display: flex;
        justify-content: center;
        width: auto;
    }

    .delivery-voice__item .delivery-voice__img img {
        max-width: 60px;
        margin: 0 !important;
    }

    .delivery-voice__item h3 {
        grid-area: h3;
        margin: 0;
        width: 110px;
        font-size: 14px;
    }

    .delivery-voice__item p {
        grid-area: p;
        font-size: 11px;
        line-height: 1.8;
        padding: 0 !important;
    }
}

/* よくある質問 */
.delivery-faq {
    padding: 50px 0 76px;
    background-color: #D7EBF0;
}

.delivery-faq h2 {
    font-size: 32px;
    color: var(--dark-blue);
    text-align: center;
    margin: 0;
}

.delivery-faq__inner {
    border-radius: 31px;
    background-color: #fff;
    padding: 60px 95px 95px;
}

.delivery-faq__list {
    margin-top: 50px;
}

details {
    border-bottom: solid 1px #707070;
}

summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    padding-left: 42px;
    padding-right: 38px;
    padding-top: 28px;
    padding-bottom: 28px;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

@media (hover: hover) {
    summary:hover {
        color: #00A0E0;
    }
}

summary span {
    display: flex;
    font-size: 21px;
    font-weight: bold;
    gap: 46px;
}
summary::-webkit-details-marker {
    display: none;
}
summary span::before {
    content: "Q";
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    /*margin-right: 46px;*/
}
summary:after {
    content: "＋";
    line-height: 1;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    margin-left: 16px;
}
details[open] summary:after {
    content: "−";
}
details > div {
    display: flex;
    padding-left: 42px;
    padding-bottom: 28px;
    padding-right: calc(38px + 16px + 16px);
}
details > div::before {
    content: "A";
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    margin-right: 46px;
    color: #C33A00;
}

details p {
    margin: 0;
    font-size: 21px;
    line-height: 1.5;
}

@media (max-width: 812px) {
    .delivery-faq {
    }

    .delivery-faq h2 {
        font-size: 18px;
    }
    .delivery-faq__inner {
        border-radius: 31px;
        padding: 22px 26px 32px;
    }

    .delivery-faq__list {
        margin-top: 16px;
    }

    summary {
        padding-left: 10px;
        padding-right: 8px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    summary span {
        gap: 7px;
        font-size: 12px;
    }

    summary span::before {
        font-size: 14px;
        /*margin-right: 7px;*/
    }

    summary:after {
        width: 10px;
        margin-left: 10px;
        font-size: 13px;
    }

    details > div {
        padding-left: 10px;
        padding-bottom: 14px;
        padding-right: calc(8px + 10px + 10px);
    }

    details > div::before {
        font-size: 14px;
        margin-right: 7px;
    }

    details p {
        font-size: 12px;
    }
}


/* 注意事項 */
.delivery-note {
    padding: 100px 0;
    background-color: #F5F5F0;
}

.delivery-note__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 84px;
}

.delivery-note h2 {
    font-size: 24px;
    margin: 0;
    white-space: nowrap;
    letter-spacing: 0;
}

.delivery-note ul {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

.delivery-note li {
    margin: 0;
    list-style: none;
    letter-spacing: 0;
}

@media (max-width: 812px) {
    .delivery-note {
        padding-top: 24px;
        padding-bottom: 20px;
    }
    .delivery-note__inner {
        gap: 14px;
        flex-direction: column;
    }

    .delivery-note h2 {
        font-size: 14px;
    }

    .delivery-note ul {
        font-size: 10px;
        gap: 14px
    }
}