@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/tex-gyre-adventor');

:root{
    --main-color:#006ac9;
    --sub-color01:#00a3de;
    --text-color:#231815;
    --text-color-blue:#044995;
    --text-color-blue02:#005497;
    --red-color:#d4000e;
    --bg-palecolor:#f1f7fb;
    --bg-yellow:#fff100;
    --bg-blue:#0487ca;
    --bg-blue02:#004097;
    --border-radius:10px;
    --font-texgyre:'TeXGyreAdventor', sans-serif;
}
html{
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 14px;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: "Noto Sans JP", sans-serif;
    color:var(--text-color);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

textarea {
    resize: vertical;
}

ul, ol {
    list-style: none;
}

sup {
    font-size: 60%;
    vertical-align: super;
    line-height: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    @media (hover: hover) {
        &:hover {
            opacity: 0.7;
        }
    }
}

.u-text-lightblue{
    color:var(--sub-color01);
}
.u-sp-only{
    @media (min-width: 768px) {
        display: none;
    }
}

/*header*/
.header{
    padding-top: 44px;
    padding-bottom: 33px;
    background-color: var(--main-color);
    overflow: hidden;
}
.header__logo{
    width: 307px;
    margin:0 auto;
    & img{
        width: 100%;
    }
}
.header__visual{
    margin-top: 10px;
    height: 262px;
    position: relative;
    & .header__visual__mascot{
        width: 190px;
        max-width: unset;
        position: absolute;
        top: 0;
        left: calc(50% + -98px);
        z-index: 1;
        transform: translateX(-50%);
    }
    & .header__visual__cars{
        width: 278px;
        max-width: unset;
        position: absolute;
        bottom: 12px;
        right: 0;
    }
    & .header__visual__text{
        font-size: 1.5rem;
        line-height: 1.4286em;
        color: #fff;
        font-weight: bold;
        position: relative;
        display: block;
        margin-left: calc(50% + -5px);
        margin-right: unset;
        padding-top: 31px;
        max-width: 9em;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
        mix-blend-mode: normal;
        text-shadow: 2.1px 2.1px 0px rgba(0, 0, 0, 0.3);
        isolation: isolate;
        letter-spacing: -0.04em;
    }
}
.header__catch{
    margin-bottom: 30px;
    & p{
        font-size: 3.214rem;
        line-height: 1.1889em;
        color: #fff;
        font-weight: bold;
        text-align: center;
        /* 2. 影専用のグラデーション背景を背後に作り、そこに乗算をかける */
        background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
        mix-blend-mode: normal; /* 親要素のブレンドに影響されないように念のため固定 */
        /* 3. テキストシャドウを直接かける（今回はズレとぼかしをここに集約します） */
        text-shadow: 2.1px 2.1px 0px rgba(0, 0, 0, 0.3);
        /* 4. 文字と影の描画順序をブラウザに強制し、白文字がブレンドに巻き込まれるのを防ぐ */
        isolation: isolate;
        margin-top: -5px;
        margin-left: 22px;
    }
}
.header__btn{
    & a{
        border:3px solid #fff;
        background-color: var(--main-color) !important;
    }
}
.common__btn{
    & a{
        height: 53px;
        width: 332px;
        box-sizing: content-box;
        border-radius: 35px;
        display: block;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4857rem;
        font-weight: bold;
        color: #fff;
        isolation: isolate;
        background: var(--sub-color01);
        box-shadow: 1px 1px 3.7217px 0 rgba(3, 95, 107, 0.4);
        letter-spacing: -0.1em;
        max-width: 100%;
    }
}

input[type="submit"]{
    max-width: 100%;
    height: 55.5px;
    width: 335px;
    box-sizing: content-box;
    border-radius: 35px;
    display: block;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4857rem;
    font-weight: bold;
    color: #fff;
    isolation: isolate;
    background: var(--sub-color01);
    border: unset;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 3.7217px 3.7217px 3.7217px 0 rgba(3, 95, 107, 0.4);
    @media (hover: hover) {
        &:hover {
            opacity: 0.7;
        }
    }
}

/* main */

.feature01__inner,
.form,
.feature02__inner,
.feature03,
.about,
.service__inner,
.system__inner,
.support__inner,
.qa__inner,
.flow__inner,
.footer__inner{
    padding:0 20px;
    max-width: 768px;
    margin: 0 auto;
}
.form,
.feature03,
.about{
    max-width:unset;
}
.header__inner,
.form__inner,
.feature03__inner,
.about__inner{
    max-width: calc(768px - 40px);
    margin-left: auto;
    margin-right: auto;
}
.feature01{
    background-color: var(--sub-color01);
    padding: 24px 0 27px;
    & .feature01__text{
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 1.2143rem;
        margin-bottom: 17px;
        letter-spacing: -0.06em;
        & .feature01__text--strong-wrapper{
            position: relative;
            z-index: 2;
            line-height: 2em;
            letter-spacing: -0.11em;
            &::before{
                content:"";
                display: block;
                position:absolute;
                bottom: -1px;
                z-index: -1;
                background-color: var(--bg-yellow);
                height: 5px;
                width: 107%;
                border-radius: 3px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        & .feature01__text--strong-text{
            font-size: 1.75rem;
        }
    }
    & .feature01-box{
        background: #ffffff;
        border-radius: var(--border-radius);
        padding: 0 20px 9px;
        text-align: center;
        & .feature01-box__top{
            & .feature01-box__text{
                color: var(--text-color-blue);
                font-weight: 900;
                font-size: 1.78rem;
                letter-spacing: -0.03em;
                & .feature01-box__text--strong{
                    font-size: 2.97rem;
                }
                & .feature01-box__text--small{
                    font-size: 1.49rem;
                }
            }
        }
        & .feature01-box__btm{
            position: relative;
            & .feature01-box__text{
                font-size: 1.58rem;
                line-height: 1.4em;
                font-weight: bold;
                position: relative;
                z-index: 1;
                margin-top: 3px;
                letter-spacing: -0.06em;
                text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
                & .feature01-box__text--strong{
                    font-size: 2rem;
                }
            }
            & .feature01-box__img{
                width: 140px;
                right: -39px;
                position: absolute;
                bottom: -10px;
            }
        }
    }
}

.form{
    background-color: var(--main-color);
    padding-top: 33px;
    padding-bottom: 20px;
    & .form__inner{
        background-color: var(--bg-palecolor);
        border-radius: var(--border-radius);
        border:1px solid #fff;
        background-color: var(--sub-color01);
        overflow: hidden;
        & .form__inner--title{
            color: #fff;
            padding: 8px 0 5px;
            letter-spacing: 0.05em;
            text-align: center;
        }
        & .form-box{
            background: var(--bg-palecolor);
            padding: 0 21px;
            padding-bottom: 20px;
            & .form-box--title{
                color:var(--main-color);
                font-size:1.07rem;
                text-align: center;
                padding: 10px 0 4px;
                letter-spacing: -0.05em;
            }
            & .form__group{
                margin-bottom: 13px;
                display: flex;
                flex-direction: column;
                & .form__label{
                    margin-bottom: 5px;
                    letter-spacing: -0.05em;
                    & .form__required{
                        background-color: var(--red-color);
                        color: #fff;
                        font-size: 0.71rem;
                        height: 1rem;
                        line-height: 1rem;
                        width: 31px;
                        display: inline-block;
                        margin-left: 8px;
                        text-align: center;
                    }
                }
            }
            & .form__group-confirm{
                text-align: center;
                margin-bottom: 21px;
            }
        }
    }
    & input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]){
        border: 1px solid #e4eef6;
        min-height: 40px;
        padding: 5px;
    }
    & textarea{
        border: 1px solid #e4eef6;
        padding: 5px;
        min-height: 6em;
    }
    & .form__radio-wrapper{
        gap: 19px 11px;
        margin-top: 7px;
        grid-auto-flow: row;
        display: grid;
        grid-template-rows: max-content max-content;
        grid-template-columns: max-content max-content max-content;
    }
    & .form__radio-label{
        display: flex;
        align-items: center;
        gap: 4px;
        letter-spacing: -0.1em;
        min-width: 80px;
    }
    & input[type="radio"]{
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: none;
        border: 1px solid #e4eef6;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background-color: #fff;
        &:checked {
            border-color: var(--main-color); 
            background-color: var(--main-color);
            box-shadow: inset 0 0 0 4px #fff; 
        }
    }
    & input[type="checkbox"]{
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: none;
        border: 1px solid #e4eef6;
        width: 20px;
        height: 20px;
        background-color: #fff;
        position: relative;
        
        &:checked {
            border-color: var(--main-color); 
            /* 背景は白（#fff）のままにします */
            background-color: #fff; 

            /* ▼ CSSでL字の線を引いて、回転させて「✓」を作ります ▼ */
            &::after {
                content: "";
                position: absolute;
                top: 4px;
                left: 7px;
                width: 5px;   /* 短い線の長さ */
                height: 10px; /* 長い線の長さ */
                
                /* 下と右にだけ線を引いて、L字型を作ります */
                border-bottom: 3px solid var(--main-color); /* ここで色を指定 */
                border-right: 3px solid var(--main-color);  /* ここで色を指定 */
                
                /* L字を45度傾けて「✓」に見せます */
                transform: rotate(45deg);
            }
        }
    }
    .form__checkbox-wrapper{
        display: inline-flex;
        gap: 4px;
        margin: 0 auto;
    }
    & .form__note01{
        font-size: 0.71rem;
        letter-spacing: -0.2em;
    }
    & .form__note02{
        font-size: 0.83rem;
        margin-top: 14px;
        margin-bottom: 5px;
        letter-spacing: -0.05em;
    }
    & .form__note03{
        font-size: 0.714rem;
        & a{
            text-decoration: underline;
        }
    }
}
.feature02{
    padding-bottom: 30px;
    & .feature02__titlearea{
        padding-top: 51px;
        position: relative;
        padding-bottom: 37px;
        & .feature02__titlearea--img{
            width: 201px;
            position: absolute;
            bottom: -20px;
            left: calc(50% + -101px);
            transform: translateX(-50%);
        }
        & .feature02__titlearea--text-area{
            color: var(--main-color);
            font-size: 1.89rem;
            text-align: center;
            margin-left: 126px;
            font-weight: normal;
            letter-spacing: -0.05em;
            line-height: 1.3em;
        }
        & .feature02__titlearea--text-undeline{
            position: relative;
            &::after{
                content: "";
                display: inline-block;
                background-color: var(--bg-yellow);
                height: 6.56px;
                width: 110%;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                position: absolute;
                z-index: -1;
            }
        }
        & .feature02__titlearea--text-small{
            font-size: 1.414rem;
        }
        & .feature02__titlearea--text-strong{
            font-size: 2.36rem;
        }
    }
    & .feature02__list{
        display: flex;
        flex-direction: column;
        gap: 16px;
        & .feature02__item{
            display: flex;
            position: relative; /* 影の位置の基準にする */
            border: 3px solid var(--sub-color01);
            overflow: hidden;
            border-radius: 6px;
            background-color: #fff; /* 本体の背景色（これで完全に真っ白になります） */
            z-index: 1; 
            /* mix-blend-mode を使わず、不透明度を持つきれいな影を直接落とします */
            box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
            & .feature02__img{
                width: 80px;
                background-color: var(--sub-color01);
                padding:4px 4px 4px 10px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                & img{
                    width: 45px;
                }
            }
            & .feature02__text{
                color: var(--text-color-blue02);
                font-size: 1.57rem;
                display: flex;
                align-items: center;
                flex: 1;
                padding: 5px 19px;
                line-height: 1.1em;
            }
        }

        & .feature02__item:nth-of-type(2) img{
            width: 40px;
            margin-left: -8px;
            margin-top: 4px;
            /*margin-bottom: 5px;*/
            margin-bottom: 3px;
        }
        & .feature02__item:nth-of-type(3) img{
            width: 47px;
            /*margin-left: -15px;*/
            margin-left: -1px;
            margin-top: 2px;
            margin-bottom: 1px;
        }
        & .feature02__item:nth-of-type(4) img{
            width: 44px;
            /* margin-left: -13px; */
            margin-left: -3px;
            margin-top: -1px;
            margin-bottom: 1px;
        }
        & .feature02__item:nth-of-type(5) .feature02__text{
            letter-spacing: -0.1em;
        }
        & .feature02__item:nth-of-type(5) img{
            width: 54px;
            /* margin-left: -3px; */
            margin-top: 9px;
            /* margin-bottom: 7px; */
            margin-left: 2px;
            margin-bottom: 7px;
        }
    }
}
.feature03{
    background-color: var(--bg-palecolor);
    padding: 20px;
    & .feature03__titlearea{
        position: relative;
        padding-bottom: 11px;
        & .feature03__titlearea--img{
            width: 186px;
            position: absolute;
            bottom: -18px;
            left: calc(50% + -120px);
            transform: translateX(-50%);
        }
        & .feature03__titlearea--text{
            position: relative;
            color: var(--main-color);
            font-size: 1.51rem;
            font-weight: 900;
            letter-spacing: -2px;
            line-height: 1.25em;
            text-align: left;
            background: url(../images/img_feature03_ballon.png) no-repeat;
            background-size: contain;
            width: 238px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            left: calc(50% + 48px);
            transform: translateX(-50%);
            padding-left: 10px;
        }
    }

    & .feature03__box{
        background-color: #fff;
        border-radius: var(--border-radius);
        overflow: hidden;
        & .feature03__title{
            background-color: var(--bg-blue);
            color: #fff;
            font-weight: 900;
            text-align: center;
            font-size: 1.214rem;
            padding: 7px;
            line-height: 1.353em;
            letter-spacing: -0.08em;
        }
        & .feature03__list{
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap:17px;
            & .feature03__item{
                border: 2px solid var(--bg-blue02);
                & .feature03__item--img{
                    overflow: hidden;
                    aspect-ratio: 300/179;
                    height: 100%;
                    & img{
                        width: 101%;
                        margin-left: -1%;
                        max-width: unset;
                    }
                }
                & .feature03__item--text{
                    border:2px solid var(--bg-blue02);
                    border-bottom: 0;
                    border-left: 0;
                    background-color: var(--bg-blue02);
                    display: flex;
                    color: var(--sub-color01);
                    & .feature03__item--point-textarea{
                        background: #fff;
                        font-family: var(--font-texgyre);
                        color:var(--sub-color);
                        width: 51px;
                        padding: 0px 10px;
                        text-align: center;
                        display: block;
                        line-height: 1.8em;
                        & .feature03__item--point-text{
                            font-size: 2.28rem;
                            font-weight: bold;
                        }
                    }
                }
                & .feature03__item--title{
                    color: var(--bg-yellow);
                    font-weight: bold;
                    font-size: 1.286rem;
                    line-height: 1.222em;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding: 2px 12px 6px;
                    letter-spacing: -0.02em;
                }
            }
        }
    }
}
.about{
    padding-top: 35px;
    padding-bottom: 56px;
    & .about__inner{
        padding: 19px;
        padding-bottom: 0;
        border: 2px solid var(--main-color);
        border-radius: var(--border-radius);
        & .about__title{
            display: flex;
            align-items: center;
            padding: 0px 10px 9px;
            border-bottom: 1px solid var(--main-color);
            justify-content: center;
            font-size: 0.9rem;
            gap: 8px;
            & .about__title--img{
                width: 158px;
            }
        }
        & .about__list{
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
            border-bottom: 1px solid var(--main-color);
            & .about__item{
                text-indent: -1em;
                padding-left: 1em;
                &::before{
                    content: "・";
                }
            }
        }
        & .about__sponsor{
            padding: 13px 0;
            & .about__sponsor--note{
                text-align: center;
                font-size: 0.643rem;
                margin-bottom: 10px;
            }
            & .about__list{
                padding: 7px 0 10px;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 12px 26px;
                & .about__item{
                    margin: 0;
                    padding: 0;
                    text-indent: unset;
                    padding-top: unset;
                    display: flex;
                    align-items: center;
                    &::before{
                        display: none;
                    }
                    & .about__item--img{
                        &.is-softbank{
                            width: 66px;
                        }
                        &.is-tokai{
                            width: 75.4px;
                        }
                        &.is-uss{
                            width: 52.7px;
                        }
                        &.is-kawasaki{
                            width: 84px;
                        }
                        &.is-dnp{
                            width: 42px;
                        }
                        &.is-denso{
                            width: 53px;
                        }
                        &.is-g7{
                            width: 38px;
                        }
                        &.is-sbi{
                            width: 61px;
                        }
                        &.is-toppan{
                            width: 56.5px;
                        }
                        &.is-sojitz{
                            width: 54.5px;
                        }
                        &.is-sumitomo{
                            width: 67px;
                        }
                        &.is-saison{
                            width: 34px;
                        }
                        &.is-mitsui{
                            width: 124px;
                        }
                        &.is-aeon{
                            width: 25.5px;
                        }
                        &.is-okb{
                            width: 32px;
                        }
                        &.is-globis{
                            width: 109px;
                        }
                        &.is-ncs{
                            width: 40px;
                        }
                    }
                }
            }
        }
        & .about__award{
            padding: 10px 0 4px;
            & .about__award--list{
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                justify-content: center;
                align-items: center;
                & .about__award--img{
                    width: 92px;
                }
            }
            & .about__award--text{
                text-align: right;
                font-size: 0.57rem;
                margin-top: 6px;
            }
        }
    }
}
.service{
    background-color:var(--main-color);
    padding-top: 142px;
    padding-bottom: 23px;
    position:relative;
    & .service__img{
        width: 165px;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -54px;
    }
    & .service__title{
        color:#fff;
        font-size: 1.643rem;
        text-align: center;
        line-height: 1em;
        padding-bottom: 19px;
        & .service__title--img{
            width: 328px;
            margin: 0;
            display: inline;
        }
        & .service__title--strong{
            color: var(--bg-yellow);
        }
    }
    & .service__text{
        color:#ffffff;
        font-size: 0.857rem;
        font-weight: bold;
        line-height: 1.75em;
    }
    & .service__flow{
        display: grid;
        grid-template-rows: max-content max-content max-content;
        grid-template-columns: max-content max-content;
        gap: 0;
        justify-content: center;
        padding-top: 30px;
        & .service__flow--item{
            width: 186px;
            & .service__flow--box{
                padding: 14px 10px;
                display: flex;
                align-items: center;
                background-color: #fff;
                border-radius: var(--border-radius);
                & .service__flow--img{
                    width: 81.4px;
                }
                & .service__flow--text{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-self: center;
                    text-align: center;
                    font-size: 0.857rem;
                    & p{
                        width: 100%;
                    }
                }
            }
            & .service__flow--arrow{
                display: flex;
                align-items: center;
                padding: 13px 32px 11px 0px;
                gap: 0 10px;
                width: 100%;
                justify-content: flex-end;
                color: #fff;
                font-size: 0.857rem;
                &::after{
                    content: "";
                    width: 18px;
                    height: 11.9px;
                    background:url(../images/icon_arrow.svg) no-repeat;
                    background-size: contain;
                    display: block;
                }
            }
            &:last-child{
                grid-row: 1 / 4;
                grid-column: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                background:url("../images/img_service_path.png") no-repeat;
                background-size: 96px 284px;
                background-position: left center;
                width: unset;
                & .service__flow--box{
                    margin-left: 20px;
                    flex-direction: column;
                    height: 194px;
                    border: 3px solid #71bbe9;
                    & .service__flow--text{
                        color: var(--main-color);
                        font-size: 1.214rem;
                        line-height: 1.3em;
                        font-weight: bold;
                    }
                }
            }
            &:nth-child(2) .service__flow--img {
                width: 100px;
            }
        }
    }
}
.system{
    background-color: var(--sub-color01);
    padding-top: 29px;
    padding-bottom: 28px;

    & .system__box{
        margin-bottom: 26px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        border:1px solid var(--main-color);

        isolation: isolate;
        box-shadow: 3px 2px 0px 0 rgba(59, 99, 158, 0.4);
        & .system__title{
            background-color: var(--main-color);
            color: #fff;
            font-weight: bold;
            font-size: 1.286rem;
            text-align: center;
        }
        & .system__text{
            padding:10px;
            line-height: 1.7em;
            letter-spacing: -0.06em;
        }
        &:nth-child(3){
            margin-bottom: 0;
        }
    }
    & .system__note{
        color: #ffffff;
        font-size: 0.643rem;
        text-align: right;
    }
}
.support{
    background:var(--bg-palecolor);
    padding-bottom: 31px;
    & .support__title{
        width: 334px;
        height: 152px;
        font-size: 1.2857rem;
        font-weight: bold;
        text-align: center;
        margin: 0 auto;
        padding-top: 14px;
        margin-bottom: -5px;
        position: relative;
        z-index: 1;
        letter-spacing: -0.1em;
        &::before{
            content: "";
            background:url(../images/bg_support_title.png) no-repeat center;
            width: 100%;
            height: 168.78px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            display:block;
            background-size: contain;
            z-index: -1;
        }
    }
    & .support__box{
        border: 1px solid var(--main-color);
        background-color: #fff;;
        border-radius: 10px;
        padding: 0 10px 20px;
        position: relative;
        z-index: 1;

        & .support__title{
            width: unset;
            height: unset;
            background: unset;
            font-size: 1.357rem;
            font-weight: bold;
            padding-top: 5px;
            padding-bottom: 19px;
            color: var(--main-color);
            letter-spacing: 0.08em;
            &::before{
                display: none;
            }
            & .support__title--strong{
                font-size: 2.786rem;
                font-weight: 900;
                position: relative;
                z-index: 2;
                &::before{
                    content: "";
                    background-color: var(--bg-yellow);
                    width: 100%;
                    position: absolute;
                    z-index: -1;
                    display: block;
                    height: 10px;
                    left: 0;
                    bottom: 1px;
                }
            }
        }
        & .support__text{
            line-height: 1.7em;
            letter-spacing: -0.06em;
            padding-left: 8px;
        }
    }
}
.form:has(+.qa){
    padding-bottom: 70px;
    padding-top: 44px;
}
.qa{
    background-color: var(--sub-color01);
    position: relative;
    z-index: 2;
    padding-bottom: 22px;
    &::before{
        content: "？";
        width: 82px;
        height: 82px;
        background: var(--sub-color01);
        color: var(--bg-yellow);
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.1rem;
        padding-top: 5px;
        text-align: center;
        top: -42px;
        border-radius: 50%;
        font-weight: bold;
        z-index: -1;
    }
    & .qa__title{
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        padding-top: 5px;
        margin-bottom: 8px;
        color:#fff;
    }
    summary::-webkit-details-marker{
        display: none;
    }
    & .qa__item{
        margin-bottom: 16px;
        & .qa__item--title{
            cursor: pointer;
            min-height: 96px;
            background: #fff;
            border: 3px solid var(--main-color);
            border-radius: 10px;
            display: block;
            position: relative;
            font-weight: bold;
            color:var(--main-color);
            font-size: 1.143rem;
            display: flex;
            align-items: center;
            padding: 10px;
            padding-left: 50px;
            padding-right: 40px;
            &::after{
                display: block;
                width: 10px;
                height: 10px;
                border:3px solid var(--sub-color01);
                content:"";
                position: absolute;
                border-top: unset;
                border-left: unset;
                transform: translateX(-50%) rotate(45deg);
                top: unset;
                right: 18px;
                transition: all .3s ease;
            }
            [open] &::after{
                transform: translateX(-50%) rotate(-135deg);
            }
        }
        & .qa__item--icon{
            height: 63.6px;
            width: 31.8px;
            background: var(--main-color);
            border-radius:  0 100% 100% 0% / 50%;
            color:#fff;
            font-size: 1.5rem;
            position: absolute;
            display: flex;
            align-items: center;
            padding-left: 3px;
            top: 50%;
            transform: translateY(-50%);
            left: 0px;
            font-weight: bold;
        }
        & .qa__item--text{
            letter-spacing: -0.05em;
            position: relative;
            min-height: 96px;
            background: #fff;
            border: 3px solid var(--main-color);
            border-radius: 10px;
            padding: 12px;
            padding-left: 50px;
            padding-right: 17px;
            margin-top: -5px;
            z-index: -1;
            font-size: 1.143rem;
            display: flex;
            align-items: center;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            line-height: 1.58em;
            
            & .qa__item--icon{
                transform: unset;
                top: 14px;
            }
        }
    }
}
.flow{
    padding-top: 10px;
    padding-bottom: 20px;
    background-color: var(--main-color);
    & .flow__title{
        padding-bottom: 17px;
        color: #ffffff;
        font-size: 1.786rem;
        text-align: center;
        & .flow__title--strong{
            font-size: 1.4em;
            color: var(--bg-yellow);
        }
    }
    & .flow__list{
        display: flex;
        flex-direction: column;
        & .flow__item{
            z-index: 2;
            background-color: #ffffff;
            border-radius: 96px;
            min-height: 118px;
            margin-bottom: 32px;
            position: relative;
            padding-left: 80px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            @media (min-width: 768px) {
                padding-left: 0;
                justify-content: center;
            }
            &:last-child{
                margin-bottom: 0;
            }
            & .flow__item--number{
                background:url(../images/bg_flow.png) no-repeat;
                background-size: contain;
                color: #fff;
                width: 68px;
                height: 36px;
                display: flex;
                position: absolute;
                left: -3px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.875rem;
                font-weight: bold;
                align-items: center;
                padding-left: 10px;
                gap: 2px;
                & .flow__item--number-strong{
                    font-size: 1.6em;
                }
            }
            & .flow__item--img{
                position: absolute;
                height: 90px;
                left: 113px;
                transform: translateX(-50%);
                z-index: -1;
                @media (min-width: 768px) {
                    left: 121px;
                }
                & img{
                    height: 100%;
                    width: auto;
                }
            }
            & .flow__item--text{
                font-weight: 900;
                color:var(--main-color);
                font-size: 1.24rem;
                text-align: center;
                margin-right: calc(50% - 112px);
                width: 10em;
                @media (min-width: 768px) {
                    margin-right: 0;
                    width: auto;
                }
            }
            &:not(:last-child)::after{
                content:"";
                width: 30px;
                height: 30px;
                background: url(../images/icon_arrow.svg) no-repeat;
                background-size: contain;
                position: absolute;
                bottom: -37px;
                left: 50%;
                transform:translateX(-50%);
            }
        }
    }
}
/*footer*/
.footer{
    padding-top: 30px;
    & .footer-cta__title{
        text-align: center;
        font-size: 1rem;
        letter-spacing: -0.08em;
        font-weight: bold;
        padding-bottom: 5px;
    }
    & .footer-cta__tel{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        & .footer-cta__tel--img{
            width: 39px;
        }
        & .footer-cta__tel--text{
            color:var(--main-color);
            font-weight: bold;
            font-size:2.6rem;
            line-height: 1.2;
            @media (hover: hover) {
                & a {
                    pointer-events: none;
                }
            }
        }
    }
    & .footer-cta__text{
        font-size: 0.857rem;
        text-align: center;
        margin-top: 3px;
    }
    & .footer-cta__mail{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        & .footer-cta__mail--img{
            width: 28px;
        }
        & .footer-cta__mail--text{
            color:var(--main-color);
            font-weight: bold;
            font-size:1.8rem;
        }
    }
    & .footer-cta__btn{
        margin-top: 24px;
        & a{
            background: #fff100;
            color: var(--main-color);
        }
    }
    & .footer-message{
        margin-top: 30px;
        text-align: center;
        & .footer-message__title{
            font-size: 2.061rem;
            font-weight: bold;
            color: var(--main-color);
            letter-spacing: -0.07em;
        }
        & .footer-message__text{
            font-size: 1.2143rem;
            line-height: 1.7em;
            font-weight: 600;
        }
    }
    & .footer__logo{
        width: 328px;
        margin:0 auto;
        padding-top: 8px;
        padding-bottom: 10px;
    }
    & .copyright{
        background-color: var(--main-color);
        color: #fff;
        font-size: 0.57142rem;
        padding: 5px;
        text-align: center;
    }
}