@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............共通パーツ
 * FORM................フォームパーツ
 * VARIABLE-HIDE.......可変幅による表示非表示
 * HEADER..............ヘッダーパーツ
 * FOOTER..............フッターパーツ
 * MAIN................メインパーツ
 */





/*------------------------------------*\
    $COMMON
\*------------------------------------*/
.wrap { overflow-y: hidden }


/**
 * Block contents
 */
.block { padding-inline: 4% }
.block--content {
    padding-top: 60px;
    padding-bottom: 80px;
}

    .block__inner {
        width: min(1200px, 100%);
        margin-inline: auto;
    }
    .block__inner + .block__inner { margin-top: 60px }


.frame {
    position: relative;
    min-height: 40px;
    border: 1px solid var(--mainBlack);
    background-color: white;
}
.frame::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: -1px;
    background-image:
        linear-gradient(90deg, var(--frameCorner) 0px, var(--frameCorner) 20px, transparent 20px, transparent calc(100% - 20px), var(--frameCorner) calc(100% - 20px), var(--frameCorner) 100%),
        linear-gradient(0deg, var(--frameCorner) 0px, var(--frameCorner) 20px, transparent 20px, transparent calc(100% - 20px), var(--frameCorner) calc(100% - 20px), var(--frameCorner) 100%),
        linear-gradient(90deg, var(--frameCorner) 0px, var(--frameCorner) 20px, transparent 20px, transparent calc(100% - 20px), var(--frameCorner) calc(100% - 20px), var(--frameCorner) 100%),
        linear-gradient(0deg, var(--frameCorner) 0px, var(--frameCorner) 20px, transparent 20px, transparent calc(100% - 20px), var(--frameCorner) calc(100% - 20px), var(--frameCorner) 100%);
    background-repeat: no-repeat;
    background-position: 0 0, 100% 0, 0 100%, 0 0;
    background-size: 100% 10px, 10px 100%, 100% 10px, 10px 100%;
    pointer-events: none;
}


/**
 * Background color
 */
.bg-01 { background-color: var(--bg01) }
.bg-02 { background-color: var(--bg02) }


/**
 * Hide contents
 */
/* Hide elements */
.hide {
    content-visibility: auto;
    display: none;
}

/* Hide scrollbar */
.non-scrollbar {
    -ms-overflow-style: none; /* Edge */
    scrollbar-width: none; /* Firefox */
}
.non-scrollbar::-webkit-scrollbar { /* Safari */
    content-visibility: auto;
    display: none;
}


/**
 * Button
 */
.btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .btn__link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: min(508px, calc(100vw * (343 / 375)));
        padding-block: 9px;
        padding-left: .1em;
        border: 4px solid white;
        border-radius: 99px;
        background-image: linear-gradient(90deg, var(--primaryColor), #00b556);
        filter: drop-shadow(1px 3px 10px rgb(0 0 0 / 0.3));
        color: white;
        font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 3.6rem);
        font-weight: 700;
        line-height: calc(62 / 36);
        letter-spacing: .1em;
        text-align: center;
        white-space: nowrap;
        transition: filter .3s var(--easeOutQuart);
    }
    .btn__link:hover {
        opacity: 1;
        filter: drop-shadow(1px 3px 10px rgb(0 0 0 / 0.3)) contrast(1.2);
    }

        .btn__link span {
            display: block;
            padding-top: 3px;
            font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 2.4rem);
            line-height: calc(32 / 24);
        }

        /*i*/.btn__icon {
            display: block;
            width: 100%;
            height: 15px;
            background-image: url(../images/icon-button.png);
            background-repeat: no-repeat;
            background-position: 50% 100%;
            background-size: 16px;
        }


    /*p*/.btn__caution {
        padding-left: .04em;
        margin-top: calc(1em * (11 / 14));
        font-size: clamp(1.2rem, calc(100vw * (12 / 375)), 1.4rem);
        font-weight: 500;
        line-height: calc(24 / 14);
        letter-spacing: .04em;
        text-align: center;
        text-shadow: 0 0 5px rgb(255 255 255);
        white-space: nowrap;
    }


/**
 * Title.
 */
h2 {
    min-height: 214px;
    padding-top: 93px;
    padding-left: .1em;
    margin-bottom: 20px;
    background-image: url(../images/bg-title.png);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 216px;
    font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 2.8rem);
    line-height: 1.6;
    letter-spacing: .1em;
    text-align: center;
}

    h2 span {
        position: relative;
        display: block;
    }
    h2 span::before {
        content: "";
        position: absolute;
        top: calc(100% + 20px);
        left: calc(50% - 30px);
        width: 60px;
        height: 1px;
        background-color: var(--primaryColor);
    }


.text {
    font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.0rem);
    line-height: 1.7;
    letter-spacing: .04em;
}
    .text span { color: var(--primaryColor) }


.text2 {
    padding-left: .04em;
    font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.6rem);
    line-height: calc(40 / 26);
    letter-spacing: .04em;
    text-align: center;
}
.check--icon3 + .text2 { margin-bottom: 28px }

    .text2 mark {
        font-size: calc(1em * (30 / 26));
        font-weight: 500;
    }
    .text2 strong {
        color: var(--primaryColor);
        font-weight: 700;
    }


/**
 * List
 */
.check {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(20px, calc(100vw * (20 / 768)), 40px);
    row-gap: clamp(12px, calc(100vw * (12 / 375)), 24px);
    padding-top: clamp(20px, calc(100vw * (20 / 375)), 40px);
    padding-inline: clamp(20px, calc(100vw * (20 / 375)), 40px);
    padding-bottom: clamp(24px, calc(100vw * (24 / 375)), 44px);
}
.check--icon3 { margin-bottom: 52px }


    /*ul*/.check__list {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        row-gap: clamp(12px, calc(100vw * (12 / 375)), 24px);
        width: min(300px, 100%);
    }

        /*li*/.check__item {
            padding-right: calc(1em * (30 / 18));
            padding-left: calc(1em * (40 / 18));
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: calc(1em * (30 / 18));
            font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.8rem);
            line-height: calc(30 / 18);
            letter-spacing: .04em;
        }
        .check--icon1 .check__item { background-image: url(../images/icon-check01.png) }
        .check--icon2 .check__item { background-image: url(../images/icon-check02.png) }
        .check--icon3 .check__item { background-image: url(../images/icon-check03.png) }
        .check--icon4 .check__item { background-image: url(../images/icon-check04.png) }





/*------------------------------------*\
    $FORM
\*------------------------------------*/
::placeholder { opacity: 0.5 }

input:not([type=radio]),
select {
    width: 100%;
    padding-inline: calc(1em * (18 / 28));
    border: clamp(1px, calc(100vw * (1 / 375)), 2px) solid var(--primaryColor);
    border-radius: clamp(16px, calc(100vw * (16 / 375)), 20px);
    background-color: white;
    font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.8rem);
    line-height: calc(76 / 28);
}


select {
    padding-right: calc(1em * (80 / 28));
    background-image: url(../images/icon-accordion.png);
    background-repeat: no-repeat;
    background-position: calc(100% - (1em * (38 / 28))) 50%;
    background-size: calc(1em * (22 / 28));
    color: rgb(37 37 37 / 0.5);
    white-space: nowrap;
    text-overflow: ellipsis;
}


.form__radio {
    display: flex;
    align-items: center;
    column-gap: calc(1em * (9 / 28));
    width: max-content;
    font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.8rem);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

    input[type=radio] {
        width: calc(1em * (30 / 28));
        height: calc(1em * (30 / 28));
        border: 1px solid var(--mainBlack);
        border-radius: 100%;
        background-color: white;
    }
    input[type=radio]:checked {
        background-image: radial-gradient(var(--primaryColor) calc(100% * (20 / 28)), white calc(100% * (20 / 28)));
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: calc(1em * (20 / 28)) calc(1em * (20 / 28));
    }








/*------------------------------------*\
    $VARIABLE-HIDE
\*------------------------------------*/
.portrait,
.landscape,
.less768,
.over768,
.less1024,
.over1024,
.less1280,
.over1280 { content-visibility: auto }

/* Aspect ratio */
@media screen and (orientation: landscape) {
    .portrait { display: none }
}
@media screen and (orientation: portrait) {
    .landscape { display: none }
}

/* iPad */
@media screen and (min-width: 768px) {
    .less768 { display: none }
}
@media screen and (max-width: 767px) {
    .over768 { display: none }
    picture, img{
        width: 100%;
    }
}

/* iPad Pro */
@media screen and (min-width: 1024px) {
    .less1024 { display: none }
}
@media screen and (max-width: 1023px) {
    .over1024 { display: none }
}


/* laptop */
@media screen and (min-width: 1280px) {
    .less1280 { display: none }
}
@media screen and (max-width: 1279px) {
    .over1280 { display: none }
}
@media screen and (min-width: 480px) and (max-width:1400px){
    .btn__link {
    
    padding-block: 5px;
    max-width: 480px;
    padding-left: 0.1em;
    border: 4px solid white;
    border-radius: 99px;
    background-image: linear-gradient(90deg, var(--primaryColor), #00b556);
    filter: drop-shadow(1px 3px 10px rgb(0 0 0 / 0.3));
    color: white;
    font-weight: 700;
    line-height:1.5;
    letter-spacing: 2px;
     text-align: center; 
    /* white-space: nowrap; */
    transition: filter .3s var(--easeOutQuart);
}
.btn__link span{
    font-size: 24px!important;
}
.btn__icon{
    height: 24px;
    -webkit-background-size: 24px;
         -o-background-size: 24px;
            background-size: 24px;
}
.main__visual .btn{
    bottom:0.5%!important;
}

}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 60px;
    padding-inline: 4%;
    background-color: white;
    box-shadow: 0 4px 5px rgb(0 0 0 / 0.1);
}

    .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

        .header__logo { width: clamp(180px, calc(100vw * (180 / 375)), 213px) }

        .header__btn {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: max-content;
            height: 40px;
            padding-left: 22px;
            padding-right: 33px;
            border-radius: 20px;
            background-color: var(--primaryColor);
            color: white;
            font-size: 1.4rem;
            font-weight: 500;
            letter-spacing: .08em;
        }
        .header__btn::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translate(50%, -50%) rotate(-90deg);
            width: 16px;
            height: 8px;
            background-image: url(../images/icon-button.png);
            background-repeat: no-repeat;
            background-size: contain;
        }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
    background-color: var(--mainBlack);
    color: white;
    line-height: 1.5;
    letter-spacing: .04em;
}

    .footer__inner { padding-block: 18px }
    @media screen and (min-width: 768px) {
        .footer__inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
    }


        .footer__nav { flex-grow: 1 }
        @media screen and (max-width: 767px) {
            .footer__nav { margin-bottom: 12px }
        }

            @media screen and (min-width: 768px) {
                .footer__nav__list {
                    display: flex;
                    align-items: center;
                }
            }

                .footer__nav__item {
                    font-size: 1.6rem;
                    text-align: center;
                }
                @media screen and (min-width: 768px) {
                    .footer__nav__item:not(:last-of-type):after { content: "　｜　" }
                }
                @media screen and (max-width: 767px) {
                    .footer__nav__item:not(:last-of-type) { border-bottom: 1px solid white }
                }

                    .footer__nav__link { white-space: nowrap }
                    @media screen and (max-width: 767px) {
                        .footer__nav__link {
                            display: block;
                            padding-block: 0.5em;
                        }
                    }

        .copyrihgt {
            display: block;
            font-size: clamp(1.2rem, calc(100vw * (12 / 375)), 1.6rem);
            text-align: center;
        }





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
.main { margin-top: 60px }


    .main__visual { position: relative }

        .main__visual .btn {
            position: absolute;
            bottom: clamp(32px, calc(100vw * (32 / 375)), 72px);
            left: 50%;
            transform: translateX(-50%);
        }


/* Image & Text */
.image-box {
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
}
.image-box.type-01 { column-gap: 24px }
.image-box.type-02 { column-gap: 50px }
.image-box.type-03 {
    column-gap: 80px;
    margin-bottom: clamp(64px, calc(100vw * (64 / 375)), 100px);
}

    .image-box__content { margin-inline: auto }
    .image-box.type-01 .image-box__content { width: min(504px, 100%) }
    .image-box.type-02 .image-box__content {
        width: min(408px, 100%);
        padding-inline: 30px;
    }
    .image-box.type-03 .image-box__content { width: min(clamp(504px, calc(100% * (554 / 1200)), 554px), 100%) }

    .image-box p {
        width: 1px;
        min-width: min(300px, 100%);
        flex-grow: 1;
    }





/* Reason */
.reason {}

    /*ol*/.reason__list {
        display: grid;
        row-gap: 60px;
        margin-bottom: clamp(48px, calc(100vw * (48 / 375)), 70px)
    }

        /*li*/.reason__item {
            position: relative;
            padding-top: 60px;
        }

            /*h4*/.reason__label/*.frame*/ {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                width: min(400px, 92%);
                height: clamp(60px, calc(100vw * (60 / 375)), 80px);
                font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 3.0rem);
                font-weight: 500;
                white-space: nowrap;
            }

                .reason__label img { width: calc(1em * (28 / 30)) }

            .reason__box {
                position: relative;
                padding-top: clamp(32px, calc(100vw * (32 / 375)), 60px);
            }
            @media screen and (min-width: 1024px) {
                .reason__item:nth-of-type(odd) .reason__box { padding-left: 25% }
                .reason__item:nth-of-type(even) .reason__box { padding-right: 25% }
            }

                .reason__image {
                    width: max(300px, calc(100% * (505 / 1200)));
                    margin-inline: auto;
                }
                @media screen and (min-width: 1024px) {
                    .reason__image {
                        position: absolute;
                        top: 0;
                    }
                    .reason__item:nth-of-type(odd) .reason__image { left: 0 }
                    .reason__item:nth-of-type(even) .reason__image { right: 0 }
                }
                @media screen and (max-width: 1023px) {
                    .reason__image {
                        position: relative;
                        z-index: 1;
                    }
                }

                .reason__content {
                    padding-top: clamp(48px, calc(100vw * (48 / 375)), 57px);
                    padding-inline: clamp(24px, calc(100vw * (24 / 375)), 40px);
                    padding-bottom: clamp(40px, calc(100vw * (40 / 375)), 46px);
                    background-color: white;
                }
                @media screen and (min-width: 1024px) {
                    .reason__content { min-height: 350px }
                    .reason__item:nth-of-type(odd) .reason__content { padding-left: clamp(200px, calc(100vw * (200 / 1024)), 240px) }
                    .reason__item:nth-of-type(even) .reason__content { padding-right: clamp(220px, calc(100vw * (220 / 1024)), 260px) }
                }
                @media screen and (max-width: 1023px) {
                    .reason__content { margin-top: -24px }
                }

                    /*h3*/.reason__title {
                        margin-bottom: .8em;
                        color: var(--primaryColor);
                        font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 3.0rem);
                        font-weight: 500;
                        line-height: calc(40 / 30);
                        letter-spacing: .04em;
                    }


    .reason__catch {
        padding-left: .04em;
        color: var(--primaryColor);
        font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 3.0rem);
        font-weight: 700;
        line-height: calc(40 / 30);
        letter-spacing: .04em;
        text-align: center;
    }



/**
 * Anxiety
 */
.anxiety {}

    .anxiety__head {
        display: flex;
        align-items: flex-end;
        background-repeat: no-repeat;
        background-position: 50% 100%;
    }
    @media screen and (min-width: 768px) {
        .anxiety__head {
            aspect-ratio: 1200 / 514;
            padding-left: calc(100% * (130 / 1200));
            padding-right: calc(100% * (570 / 1200));
            padding-bottom: calc(100% * (202 / 1200));
            background-image: url(../images/image-02-pc.jpg);
            background-size: 100%;
        }
    }
    @media screen and (max-width: 767px) {
        .anxiety__head {
            min-height: min(578px, calc(100vw * (578 / 375)));
            padding-inline: calc(100% / 0.92 * (20 / 375));
            padding-bottom: calc(100% / 0.92 * (243 / 375));
            margin-inline: calc(-100% / 0.92 * 0.04);
            background-image: url(../images/image-02-sp.jpg);
            background-size: min(100%, 375px);
        }
        .anxiety__head .text { line-height: 2.125 }
    }

    .anxiety__box1 {
        padding-top: clamp(24px, calc(100vw * (24 / 375)), 60px);
        padding-inline: clamp(24px, calc(100vw * (24 / 375)), 60px);
        padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 50px);
        background-color: #d4dbd4;
    }
    .anxiety__box2 {
        padding-top: clamp(24px, calc(100vw * (24 / 375)), 65px);
        padding-inline: clamp(24px, calc(100vw * (24 / 375)), 60px);
        padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 58px);
        background-color: white;
    }


        .anxiety__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
            grid-column-gap: 80px;
            grid-row-gap: clamp(24px, calc(100vw * (24 / 375)), 60px);
            padding-bottom: 90px;
            background-image: url(../images/anxiety-arrow.svg);
            background-repeat: no-repeat;
            background-position: 50% 100%;
            background-size: 80px;
        }

            .anxiety__list {
                display: grid;
                grid-template-columns: 100%;
                grid-row-gap: clamp(24px, calc(100vw * (24 / 375)), 60px);
            }

                .anxiety__item {
                    border-radius: 20px;
                    background-color: white;
                    overflow: hidden;
                }

                    .anxiety__column {}

                        .anxiety__column__label {
                            padding-inline: .5em;
                            padding-block: calc(1em * (32 / 30));
                            background-color: var(--primaryColor);
                            color: white;
                            font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 3.0rem);
                            line-height: 1.2;
                            letter-spacing: .04em;
                            text-align: center;
                        }


        .anxiety__box1 .text2 { margin-top: clamp(24px, calc(100vw * (24 / 375)), 32px) }
        .anxiety__box2 .text2 { margin-bottom: 28px }



/**
 * Measures
 */
.measures {
    width: min(100%, 1000px);
    margin-top: 43px;
    margin-inline: auto;
}

    .measures__catch {
        margin-bottom: 28px;
        background-repeat: no-repeat;
        background-position: 50% 100%;
        background-size: contain;
    }
    @media screen and (min-width: 768px) {
        .measures__catch {
            min-height: 275px;
            padding-top: 50px;
            background-image: url(../images/image-03-pc.jpg);
        }
    }
    @media screen and (max-width: 767px) {
        .measures__catch {
            min-height: 241px;
            padding-top: 15px;
            padding-inline: 4vw;
            margin-inline: calc(-100% / 0.92 * 0.04);
            background-image: url(../images/image-03-sp.jpg);
        }
    }

    .measures__catch p {
        font-family: var(--fontMin);
        font-size: 2.8rem;
        line-height: calc(40 / 28);
        text-align: center;
    }



/**
 * Voice
 */
.voice {
    width: min(1000px, 100%);
    margin-inline: auto;
}

    .voice__list {
        display: grid;
        grid-row-gap: clamp(48px, calc(100vw * (48 / 375)), 58px);
    }

        .voice__item { position: relative }

            .voice__label {
                position: absolute;
                top: 0;
                left: max(2%, 20px);
                transform: translateY(-50%);
                width: 9.375em;
                padding-left: .1em;
                border-radius: 1.125em;
                background-color: var(--primaryColor);
                color: white;
                font-size: clamp(1.4rem, calc(100vw * (14 / 375)), 1.6rem);
                line-height: 2.25em;
                letter-spacing: .1em;
                text-align: center;
            }

            .voice__frame {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                column-gap: 36px;
                row-gap: 24px;
                padding-top: clamp(24px, calc(100vw * (24 / 375)), 29px);
                padding-right: clamp(15px, calc(100vw * (15 / 375)), 28px);
                padding-left: clamp(15px, calc(100vw * (15 / 375)), 18px);
                padding-bottom: clamp(24px, calc(100vw * (24 / 375)), 40px);
                border: clamp(2px, calc(100vw * (2 / 375)), 3px) solid var(--primaryColor);
                border-radius: clamp(30px, calc(100vw * (30 / 375)), 40px);
                overflow: hidden;
            }

                .voice__image { width: min(345px, 100%) }

                .voice__content {
                    flex-grow: 1;
                    width: min(345px, 100%);
                }

                    .voice__title {
                        margin-bottom: calc(1em * (24 / 28));
                        font-family: var(--fontMin);
                        font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 2.8rem);
                        font-weight: 600;
                        line-height: calc(40 / 28);
                    }

                    .voice__text {
                        font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 1.8rem);
                        line-height: calc(30 / 18);
                    }


/**
 * Flow
 */
.flow {
    margin-top: 32px;
    width: min(1000px, 100%);
    margin-inline: auto;
}



/**
 * FAQ
 */
.faq {
    margin-top: 32px;
    width: min(1000px, 100%);
    margin-inline: auto;
}

    .faq__list {
        display: grid;
        grid-row-gap: 20px;
    }

        .faq__item {
            border: 2px solid var(--primaryColor);
            border-radius: clamp(16px, calc(100vw * (16 / 375)), 20px);
            background-color: white;
        }

            .faq__box {}

                .faq__label  label {
                    position: relative;
                    display: block;
                    padding-block: 1.2em;
                    padding-left: 3.3em;
                    padding-right: 4em;
                    font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.0rem);
                    line-height: 1.5;
                    cursor: pointer;
                }
                .faq__label  label::before {
                    content: "Q";
                    position: absolute;
                    top: calc(1em * (18 / 28));
                    left: calc(1em * (18 / 28));
                    width: calc(1em * (40 / 28));
                    height: calc(1em * (40 / 28));
                    border-radius: 100%;
                    background-color: var(--primaryColor);
                    color: white;
                    font-size: clamp(2.2rem, calc(100vw * (22 / 375)), 2.8rem);
                    line-height: calc(36 / 28);
                    text-align: center;
                }
                .faq__label  label::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 1.9em;
                    width: 1.1em;
                    height: 100%;
                    background-image: url(../images/icon-accordion.png);
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                    background-size: contain;
                    transition: transform .15s var(--linear);
                }
                .faq__flag:checked + .faq__box .faq__label  label::after { transform: rotate(180deg) }

                .faq__content {
                    max-height: 0;
                    padding-left: clamp(14px, calc(100vw * (14 / 375)), 38px);
                    overflow: hidden;
                    transition: max-height .3s var(--linear);
                }
                .faq__flag:checked + .faq__box .faq__content { max-height: 100vw }
                @media screen and (min-width: 768px) {
                    .faq__content { padding-right: clamp(60px, calc(100vw * (60 / 768)), 98px) }
                }
                @media screen and (max-width: 767px) {
                    .faq__content { padding-right: clamp(14px, calc(100vw * (14.4 / 375)), 38px) }
                }
                @media screen and (orientation: landscape) {
                    .faq__flag:checked + .faq__box .faq__content { transition-duration: 1.2s }
                }
                @media screen and (orientation: portrait) {
                    .faq__flag:checked + .faq__box .faq__content { transition-duration: 0.45s }
                }

                    .faq__text {
                        position: relative;
                        padding-top: calc(1em * (16 / 18));
                        padding-bottom: calc(1em * (21 / 18));
                        padding-left: calc(1em * (48 / 18));
                        border-top: 1px dashed var(--primaryColor);
                        font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 1.8rem);
                        line-height: calc(30 / 18);
                    }
                    .faq__text::before {
                        content: "A";
                        position: absolute;
                        top: calc(1em * (19 / 28));
                        left: 0;
                        width: calc(1em * (40 / 28));
                        height: calc(1em * (40 / 28));
                        border-radius: 100%;
                        background-color: var(--marker);
                        color: var(--primaryColor);
                        font-size: clamp(2.2rem, calc(100vw * (22 / 375)), 2.8rem);
                        line-height: calc(36 / 28);
                        text-align: center;
                    }



/**
 * Date & Time
 */
.datetime {
    background-color: white;
    padding-top: clamp(24px, calc(100vw * (24 / 375)), 32px);
    padding-inline: clamp(15px, calc(100vw * (15 / 375)), 60px);
    padding-bottom: clamp(32px, calc(100vw * (32 / 375)), 60px);
}

    .datetime__text {
        padding-bottom: clamp(24px, calc(100vw * (24 / 375)), 33px);
        font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 1.8rem);
        line-height: calc(30 / 18);
    }

    .datetime__container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
        grid-column-gap: calc(100% * (40 / 1080));
        grid-row-gap: 32px;
    }

        .datetime__block {}

            .datetime__label {
                position: relative;
                z-index: 1;
                width: min(400px, 92%);
                padding-left: .1em;
                margin-inline: auto;
                font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 4.0rem);
                font-weight: 500;
                line-height: 2;
                letter-spacing: .1em;
                text-align: center;
            }
            .datetime__label span { font-size: .75em }

            .datetime__content {
                border-radius: clamp(16px, calc(100vw * (16 / 375)), 20px);
                background-image: url(../images/bg-main.jpg);
                margin-top: clamp(-40px, calc(-100vw * (36 / 375)), -36px);
                filter: drop-shadow(3px 4px 5px rgb(0 0 0 / 0.2));
            }

                .datetime__list {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                    grid-column-gap: 20px;
                    grid-row-gap: 24px;
                    padding-top: clamp(60px, calc(100vw * (60 / 375)), 68px);
                    padding-inline: clamp(15px, calc(100vw * (15 / 375)), 20px);
                    padding-bottom: clamp(16px, calc(100vw * (16 / 375)), 22px);
                }

                    .datetime__item {
                        padding-top: clamp(12px, calc(100vw * (12 / 375)), 15px);
                        padding-inline: clamp(6px, calc(100vw * (6 / 375)), 9px);
                        padding-bottom: clamp(15px, calc(100vw * (15 / 375)), 19px);
                        border: 1px solid var(--frameCorner);
                        border-radius: clamp(8px, calc(100vw * (8 / 375)), 10px);
                        background-color: white;
                    }

                        .datetime__item span {
                            display: block;
                            margin-bottom: clamp(12px, calc(100vw * (12 / 375)), 16px);
                            font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 2.8rem);
                            font-weight: 500;
                            line-height: 1;
                            text-align: center;
                        }

                        .datetime__btn {
                            display: block;
                            width: 100%;
                            padding-left: .1em;
                            border-radius: 99px;
                            background-color: var(--primaryColor);
                            color: white;
                            font-size: clamp(1.8rem, calc(100vw * (18 / 375)), 2.4rem);
                            line-height: calc(50 / 24);
                            letter-spacing: .1em;
                            text-align: center;
                        }



/**
 * Form
 */
.form {
    background-color: white;
    padding-bottom: clamp(64px, calc(100vw * (64 / 375)), 80px);
}

    .form__block {}

        .form__caption {
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: clamp(16px, calc(100vw * (16 / 375)), 20px);
            padding-block: 12px;
            background-color: var(--primaryColor);
            color: white;
            font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.4rem);
            font-size: 500;
            line-height: 1.5;
        }
        @media screen and (min-width: 768px) {
            .form__caption { padding-inline: min(100px, calc(100% * (100 / 1200))) }
        }
        @media screen and (max-width: 767px) {
            .form__caption { padding-inline: calc(100% * (15 / 345)) }
        }

            .form__caption span {
                display: block;
                width: calc(1em * (150 / 18));
                padding-left: .1em;
                border-radius: 99px;
                background-color: white;
                color: var(--primaryColor);
                font-size: clamp(1.2rem, calc(100vw * (12 / 375)), 1.8rem);
                line-height: 2;
                letter-spacing: .1em;
                text-align: center;
            }

        .form__content {
            display: grid;
            grid-template-columns: 100%;
            grid-row-gap: clamp(24px, calc(100vw * (24 / 375)), 29px);
            padding-top: clamp(32px, calc(100vw * (32 / 375)), 39px);
            padding-bottom: clamp(48px, calc(100vw * (48 / 375)), 60px);
        }
        @media screen and (min-width: 768px) {
            .form__content { padding-inline: min(100px, calc(100% * (100 / 1200))) }
        }
        @media screen and (max-width: 767px) {
            .form__content { padding-inline: calc(100% * (15 / 345)) }
        }

            .form__row {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
                grid-column-gap: clamp(32px, calc(100vw * (32 / 375)), 40px);
                grid-row-gap: clamp(24px, calc(100vw * (24 / 375)), 29px);
            }

                .form__label {
                    margin-bottom: calc(1em * (20 / 24));
                    font-size: clamp(1.6rem, calc(100vw * (16 / 375)), 2.4rem);
                    line-height: 1;
                }
                .form__label label.required::after {
                    content: "*";
                    color: red;
                }

                .form__input {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    column-gap: clamp(32px, calc(100vw * (32 / 375)), 40px);
                    row-gap: clamp(24px, calc(100vw * (24 / 375)), 29px);
                }



/**
 * Overview
 */
.overview {
    display: flex;
    flex-direction: column;
    row-gap: clamp(48px, calc(100vw * (48 / 375)), 60px);
    width: min(100%, 1000px);
    margin-top: clamp(36px, calc(100vw * (36 / 375)), 54px);
    margin-inline: auto;
    margin-bottom: clamp(48px, calc(100vw * (48 / 375)), 61px);
}

    .overview__block {
        border-radius: clamp(16px, calc(100vw * (16 / 375)), 20px);
        background-color: white;
        overflow: hidden;
    }

        .overview__caption {
            padding-left: .2em;
            background-color: var(--primaryColor);
            color: white;
            font-size: clamp(2.0rem, calc(100vw * (20 / 375)), 2.4rem);
            font-weight: 700;
            line-height: 2.5;
            letter-spacing: .2em;
            text-align: center;
        }

        .overview__content {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: 3.8%;
            row-gap: 24px;
            padding-top: clamp(24px, calc(100vw * (24 / 375)), 35px);
            padding-inline: clamp(15px, calc(100vw * (15 / 375)), 40px);
            padding-bottom: clamp(24px, calc(100vw * (24 / 375)), 41px);
        }

            .overview__image {
                display: flex;
                flex-direction: column;
                row-gap: 20px;
                width: min(252px, 100%);
            }

                .overview__image .scaledown {
                    width: calc(100% * (213 / 252));
                    margin-inline: auto;
                }


            .overview__details {
                flex-grow: 1;
                width: min(400px, 100%);
            }

                .overview__list {
                    display: flex;
                    flex-direction: column;
                    row-gap: clamp(16px, calc(100vw * (16 / 375)), 20px);
                }

                    .overview__item {
                        padding-bottom: 10px;
                        border-bottom: 1px dashed var(--primaryColor);
                    }

                        .overview__column {
                            display: flex;
                            flex-wrap: wrap;
                            column-gap: 22px;
                            row-gap: 12px;
                        }

                            .overview__label {
                                width: 100px;
                                height: 2em;
                                padding-left: .1em;
                                border-radius: 1em;
                                background-color: var(--primaryColor);
                                color: white;
                                font-size: 1.4rem;
                                line-height: 2;
                                letter-spacing: .1em;
                                text-align: center;
                            }

                            .overview__text {
                                font-size: 1.6rem;
                                line-height: 1.5;
                            }
                            dd.overview__text {
                                flex-grow: 1;
                                width: min(400px, 100%);
                                padding-top: 3px;
                            }




.entry__band {
    width: 96%;
}

.is-invalid {
  border-color: #e24545 !important;;
}

.is-disabled {
  background: #ccc;
  border-color: #ccc;
  color: #8e8e8e;
  box-shadow: 0 4px 0 #8e8e8e;
  pointer-events: none;
}

.entry__name {
    position : relative;
    display : inline-block;
}

.entry__red::after {
    content: '*';
    color     : #f00;
    position  : absolute;
    right     : -10px;
    top       : 45%;
    transform : translateY(-50%);
    display : inline-block;
}

.entry__red.is-ok::after {
    content       : '';
    width         : 10px;
    height        : 5px;
    border-left   : 3px solid green;
    border-bottom : 3px solid green;
    transform: rotate(-45deg);
}

h2.tit9 {
    vertical-align: middle;
    line-height: 2.8;
    margin-bottom: 2rem;
}

.date-box {
    width: 50%;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.date-box h3 {
    text-align: center;
    border: 1px solid #fff;
}

.date-box ul {
    margin: 1rem auto;
}

.date-box ul li {
    font-weight: 600;
    color: #555;
    border: 1px solid #ccc;
    padding: 0.8rem 0.1rem;
    margin: 0.4rem 0.45rem;
    text-align: center;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 45%;
    font-size: 120%;
}

.company-info-wrap {
    margin-top: 1.5rem;
}

.date-box ul li a {
    font-size: 80% !important;
    -webkit-border-radius: 20px;
    border-radius: 5px;
    border-bottom: 4px solid #004683;
    background: #035ca9;
    color: #FFF;
    display: block;
    padding: 0.5rem 0.3rem 0.4rem 0.3rem;
    width: 80%;
    margin: 0.8rem auto auto auto;
}

.reserve-content {
    padding: 2rem;
    box-shadow: 0px 0px 15px -5px #777777;
}

.date-box ul li a.full {
    background: #b2b2b2;
    pointer-events: none;
}

.entry__selectbox select {
    text-align: left;
    font-size: calc(14px + 8 * (100vw - 375px)/1610);

    border: solid 1px #e1e1e1;
    box-shadow: 0 0 5px 1.7px rgb(0 0 0 / 4%);
    border-radius: 4px;
    font-weight: 700;
    width: 100%;
    margin: auto;
    color: #878282;
}

.c-selectbox .inner.unselected .value {
    color: #bfbfbf;
    font-weight: 700;
}


.entry__header {
    text-align: center;
    background: #1c758c;
    width: 100%;
    padding: 0.8rem;
    margin: 1rem auto;
}

.entry__leed {
    width: 18%;
    font-size: 110%;
    margin: auto;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    background: #FFF;
    line-height: 1.4;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    color: #1c758c;
    padding: 0;
}

.entry__subleed {
    width: 28%;
    color: #FFF;
    font-size: 120%;
    min-width: 125px;
    margin: auto;
    font-weight: 700;
    display: inline-block;
    padding: 0;
}

.form_input_input {
    display: inline-block;
    background: #fff url(../images/select-arrow.png)no-repeat;
    background-position: 98% 40%;
    max-width: 100%;
    white-space: nowrap;
    padding: 1rem 3rem 1rem 1rem;
    box-sizing: border-box;
    min-width: 140px;
    position: relative;
    overflow: hidden;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border: solid 1px #e1e1e1;
    border-radius: 4px;
    box-shadow: 0 0 5.32px 1.68px rgb(0 0 0 / 4%);
    font-weight: 700;
}



.entry__area {
    background: #FFF;
    padding: 1rem 2rem;
}

.entry__area.first {
    padding: 2rem 2rem 3rem 2rem;

}

.entry__name {
    font-size: calc(15px + 4 * (100vw - 375px)/1610);
    font-weight: 700;
	margin-bottom:15px;
}

.entry__area.gender input {
    margin-right: 0.2rem;
}

.entry__area.gender div {
    display: inline-block;
 
    font-weight: 500;
    font-size: calc(16px + 6 * (100vw - 375px)/1610);
	padding-right:1rem;
}

.entry__area.state {
    padding-bottom: 3rem;
}

.entry__area.tel {
    padding-bottom: 3rem;
}

.entry__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/*
.entry__input {
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    padding: 0.7em;
    border: solid 1px #e1e1e1;
    border-radius: 4px;
    box-shadow: 0 0 5px 1.7px rgb(0 0 0 / 4%);
    font-weight: 700;
    font-size: calc(16px + 6 * (100vw - 375px)/1610);
}
*/
#js-entry-button:hover {
    opacity: 0.8;
}

.entry__button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min(508px, calc(100vw * (343 / 375)));
    padding-block: 9px;
    padding-left: 0.1em;
    border: 4px solid white;
    border-radius: 99px;
    background-image: linear-gradient(90deg, var(--primaryColor), #00b556);
    filter: drop-shadow(1px 3px 10px rgb(0 0 0 / 0.3));
    color: white;
    font-size: clamp(2.4rem, calc(100vw * (24 / 375)), 3.6rem);
    font-weight: 700;
    line-height: calc(62 / 36);
    letter-spacing: .1em;
    text-align: center;
    white-space: nowrap;
    transition: filter .3s var(--easeOutQuart);
	margin:0 auto;
}

@media (min-width: 767px) {
    .entry__button {
        font-size: 26px;
        padding: 1.5rem 3rem;
        width: 35%;
        min-width: 580px;
        transition: .3s;
    }

}



@media (min-width: 767px) {
    .entry__subinner{
	padding:4rem;
}

}

.is-disabled {
    background: #ccc !important;
    border-color: #ccc !important;
    color: #8e8e8e !important;
    box-shadow: 0 4px 0 #8e8e8e !important;
    pointer-events: none !important;
}



.cta_table{
    width: 100%;
    table-layout: auto;
  }
  .cta_table thead th{
    padding: 2%;
    font-size: 0.8rem;
	text-align:center;
	vertical-align:middle;
  }
  .cta_table tbody td{
    font-size: 0.8rem;
	text-align:center;
	vertical-align:middle;
  }
  
 .cta_table{
  width: 100%;
  margin: 0 auto 2%;
  border-collapse:  collapse;
  table-layout: fixed;
}
.cta_table thead th{
  padding: 1% 0;
 /* font-size: 2.2rem;*/
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background: #009245;
  border: 1px solid #bdbdbd;
}
.cta_table thead th{
  padding: 1.8% 0 1%
}
.cta_table tbody tr{
  background: #fefefe;
}
.cta_table tbody tr:nth-child(2n){
  background: #ededed;
}
.cta_table tbody td{
  padding: 1% .5em;
  /*font-size: 2.2rem;*/
  line-height: 1;
  border: 1px solid #bdbdbd;
}
.cta_table tbody td{

}
.cta_table tbody td:nth-child(2),
.cta_table tbody td:last-child{
  text-align: center;
}

.cta_link {
    
    -webkit-border-radius: 20px;
    border-radius: 5px;
    border-bottom: 4px solid #004e25;
    background: #009245;
    color: #FFF;
    display: block;
    padding: 1rem 0.3rem 1rem 0.3rem;
    width: 80%;
    margin:auto auto;
}

.cta_link2 {
    
    -webkit-border-radius: 20px;
    border-radius: 5px;
    border-bottom: 4px solid #ffe739;
    background: #f9f33b;
    color: #000;
    display: block;
    padding: 1rem 0.3rem 1rem 0.3rem;
    width: 80%;
    margin:auto auto;
}

@media (min-width: 769px) {

  .cta_table thead th{
    font-size: 1.5rem;
	
  }
  .cta_table tbody td{
    font-size: 1.5rem;	
  }
  
}