@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}
:root {
    --h1: clamp(calc(96px/3),calc(96/1440*100vw),96px);
    --h1-span: clamp(calc(64px/3),calc(64/1440*100vw),64px);
    --h2: clamp(calc(48px/3),calc(48/1440*100vw),48px);
    --h3-fv: clamp(calc(40px/3),calc(40/1440*100vw),40px);
    --h3: clamp(calc(36px/3),calc(36/1440*100vw),36px);
    --h4: clamp(calc(30px/3),calc(30/1440*100vw),30px);
    --line-text-maru: clamp(calc(26.4px/3),calc(26.4/1440*100vw),26.4px);
    --h5: clamp(calc(24px/3),calc(24/1440*100vw),24px);
    --line-text: clamp(calc(22px/3),calc(22/1440*100vw),22px);
    --h6: clamp(calc(20px/3),calc(20/1440*100vw),20px);
    --p: clamp(calc(16px/3),calc(16/1440*100vw),16px);
    --color_1A3D78: #1A3D78;
    --color_4B8FCF: #4B8FCF;
    --color_67C6ED: #67C6ED;
    --color_898989: #898989;
    --color_FFD630: #FFD630;
    --color_FFFFFF: #FFF;
    --line_color: #02AD22;
    --logo_width: clamp(calc(180px/3),calc(180/1440*100vw),180px);
    --logo_heigt: clamp(calc(65px/3),calc(65/1440*100vw),65px);
    --fv_top: calc(31/1440*100vw);
    --fv_height: clamp(calc(800px/3),calc(800/1440*100vw),800px);
    --fv_text-wrap-width: clamp(calc(514px/3),calc(514/1440*100vw),514px);
    --fv_text-wrap-height: clamp(calc(324.59px/3),calc(324.59/1440*100vw),324.59px);
    --fv_text-wrap-top: clamp(calc(200px/3),calc(200/1440*100vw),200px);
    --fv_text-wrap-left: clamp(calc(195px/3),calc(195/1440*100vw),195px);
    --fv-h5-befor-width: calc(26.5/1440*100vw);
    --fv-h5-befor-height: calc(22/1440*100vw);
}

.inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}
img {
    width: 100%;
    display: flex;
    justify-content: center;
       
}
.section-title h3 {
    font-size: var(--h3);
}
.line-btn-wrap {
    width: calc(474/1440*100vw);
    display: flex;
    cursor: pointer;
}
.line-btn-wrap .line-btn-text p:visited {
    color: #000;
    text-decoration: none;
}
.line-btn-text {
    width: calc(96/1440*100vw);
    height: calc(90/1440*100vw);
    border: solid calc(3/1440*100vw) #02AD22;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    background-color: #FFF;
	z-index: 1;
}
.line-btn-text span {
    font-size: var(--line-text-maru);
    font-weight: 700;
    color: #000;
    
}
.line-btn {
    width: calc(416/1440*100vw);
    height: calc(49/1440*100vw);
    background-color: #02AD22;
    border-radius: 0 5rem 5rem 0;
    position: relative;
    top: 51%;
    transform: translateY(-50%);
    left: -2.5vw;
    line-height: 2;
}
.line-btn span {
    font-size: var(--line-text);
    color: #FFF;
    display: flex;
    padding-left: 3.2vw;
    font-weight: 700;
    letter-spacing: 0.1rem;
    padding-bottom: 0.2vw;
}

/* 
line-btn
*/
.line-btn span::after {
    position: absolute;
    content: '';
    background-image: url(../img/lp_btn_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(14/1440*100vw);
    height: calc(16/1440*100vw);
    top: 50%;
    transform: translateY(-50%);
    right: calc(20/1440*100vw);
    z-index: 10;
}
@media screen and (min-width:1441px) {
    :root {
        --h1: 96px;
        --h1-span: 64px;
        --h2: 48px;
        --h3-fv: 40px;
        --h3: 36px;
        --h4: 30px;
        --line-text-maru: 26.4px;
        --h5: 24px;
        --line-text: 22px;
        --h6: 20px;
        --p: 16px;
        --color_1A3D78: #1A3D78;
        --color_4B8FCF: #4B8FCF;
        --color_67C6ED: #67C6ED;
        --color_898989: #898989;
        --color_FFD630: #FFD630;
        --color_FFFFFF: #FFF;
        --line_color: #02AD22;
        --logo_width: 180px;
        --logo_heigt: 65px;
        --fv_top: 36px;
        --fv_height: 729px;
        --fv_text-wrap-width: 514px;
        --fv_text-wrap-height: 324.59px;
        --fv_text-wrap-top: 200px;
        --fv_text-wrap-left: 195px;
        --fv-h5-befor-width: 26.5px;
        --fv-h5-befor-height: 22px;
    }
    .line-btn-wrap {
        width: 474px;
        display: flex;
    }
    .line-btn-text {
        width: 96px;
        height: 90px;
        border: solid 3px #02AD22;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        background-color: #FFF;
    }
    .line-btn-text span {
        font-size: 26.4px;
        font-weight: 700;
    }
    .line-btn {
        width: 416px;
        height: 49px;
        background-color: #02AD22;
        border-radius: 0 5rem 5rem 0;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        left: -50px;
        z-index: -1;
        line-height: 2;
    }
    .line-btn span {
        font-size: 22px;
        color: #FFF;
        display: flex;
        padding-left: 55px;
        font-weight: 700;
        letter-spacing: 0.1rem;
    }
    .line-btn span::after {
        position: absolute;
        content: '';
        background-image: url(../img/lp_btn_arrow.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 14px;
        height: 16px;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        z-index: 10;
        margin-top: -1px;
        
    }    
}

@media screen and (max-width:450px) {
    :root {
        --h1: clamp(calc(66px/3),calc(66/375*100vw),66px);
        --h1-span: clamp(calc(32px/3),calc(32/375*100vw),32px);
        --h2: clamp(calc(48px/3),calc(48/375*100vw),48px);
        --h3-fv: clamp(calc(25px/3),calc(25/375*100vw),25px);
        --h3: calc(16/375*100vw);
        --h4: calc(16/375*100vw);
        --line-text-maru: calc(16/375*100vw);
        --h5: calc(12/375*100vw);
        --line-text: calc(14/375*100vw);
        --h6: clamp(calc(20px/3),calc(20/375*100vw),20px);
        --p: clamp(calc(16px/3),calc(16/375*100vw),16px);
        --color_1A3D78: #1A3D78;
        --color_4B8FCF: #4B8FCF;
        --color_67C6ED: #67C6ED;
        --color_898989: #898989;
        --color_FFD630: #FFD630;
        --color_FFFFFF: #FFF;
        --line_color: #02AD22;
        --logo_width: clamp(calc(78px/3),calc(78/375*100vw),78px);
        --logo_heigt: clamp(calc(28px/3),calc(28/375*100vw),28px);
        --fv_top: calc(36/375*100vw);
        --fv_height: calc(800/375*100vw);
        --fv_text-wrap-width: calc(310/375*100vw);
        --fv_text-wrap-height: calc(144/375*100vw);
        --fv_text-wrap-top: calc(170/375*100vw);
        --fv_text-wrap-left: calc(40/375*100vw);
        --fv-h5-befor-width: calc(17/375*100vw);
        --fv-h5-befor-height: calc(14/375*100vw);
    }
    
    .inner {
        max-width: 450px;
    }
    
    .line-btn-wrap {
        width: calc(299/375*100vw);
        display: flex;
        cursor: pointer;
        position: relative;
        top: 86vw;
    }
    .line-btn-wrap .line-btn-text p:visited {
        color: #000;
        text-decoration: none;
    }
    .line-btn-text {
        width: calc(76/375*100vw);
        height: calc(62/375*100vw);
        border: solid calc(2/375*100vw) #02AD22;
    }
    .line-btn {
        width: calc(274/375*100vw);
        height: calc(43/375*100vw);
        left: -2.5vw;
    }
    .line-btn span {
        font-size: var(--line-text);
        color: #FFF;
        display: flex;
        padding-left: 4.4vw;
        font-weight: 700;
        letter-spacing: 0.1rem;
        padding-bottom: 0vw;
        padding-top: 1.7vw;
    }
    
    /* 
    line-btn
    */
    .line-btn span::after {
        position: absolute;
        content: '';
        background-image: url(../img/lp_btn_arrow.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: calc(11/375*100vw);
        height: calc(11/375*100vw);
        top: 50%;
        transform: translateY(-50%);
        right: calc(10/375*100vw);
        z-index: 10;
        margin-top: -0.1vw;
    }

}

/* 

FV

*/
.fv {
	background-image: url(../img/lp_fv_img.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: var(--fv_height);
    margin-top: var(--fv_top);
}
@scope (.fv) {
    

    .inner {
        position: relative;
    }
    .inner::after{
        content: '';
        background-image: url(../img/lp_logo.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: var(--logo_width);
        height: var(--logo_heigt);
        position: absolute;
        top: 0;
        left: calc(195/1440*100vw);
        z-index: 10;
    }
    .fv-text-wrap {
        width: var(--fv_text-wrap-width);
        height: var(--fv_text-wrap-height);
        position: absolute;
        top: var(--fv_text-wrap-top);
        left: var(--fv_text-wrap-left);
        z-index: 10;
        /* 236 195 */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    
    .fv-text-wrap h1 {
        font-size: var(--h1);
        color: var(--color_1A3D78);
    }
    .fv-text-wrap h1 span {
        font-size: var(--h1-span);
        color: #000;
    }
        h1.wp-block-heading {
        font-size: 70px;
    }
    .fv-text-wrap h5 {
        font-size: var(--h5);
        font-weight: 700;
        vertical-align: middle;
        line-height: 0;
        letter-spacing: 0.1rem;
    }
    .fv-text-h5-wrap {
        position: relative;
        width: calc(473.5/1440*100vw);
        display: flex;
        justify-content: center;
        margin-left: -2vw;
    }
    .fv-text-h5-wrap::before {
        position: absolute;
        content: '';
        background-image: url(../img/lp_line_left.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: var(--fv-h5-befor-width);
        height: var(--fv-h5-befor-height);
        top: 50%;
        transform: translateY(-50%);
        left: 0.6vw;
    }
    .fv-text-h5-wrap::after {
        position: absolute;
        content: '';
        background-image: url(../img/lp_line_right.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: var(--fv-h5-befor-width);
        height: var(--fv-h5-befor-height);
        top: 50%;
        transform: translateY(-50%);
        right: 0.8vw;
    }

    .fv-text-wrap h3 {
        font-size: var(--h3-fv);
        margin-left: -2vw;
    }
}
@media screen and (min-width:1441px) {
    @scope (.fv){
        .inner::after{
            top: 0;
            left: 195px;
        }
        .fv-text-h5-wrap {
            width: 473.5px;
        
            margin-left: -2vw;
        }
        .fv-text-h5-wrap::before,
        .fv-text-h5-wrap::after {
            width: 26.5px;
            height: 22px;
        }
        .fv-text-h5-wrap::before {
            left: 9.5px;
        }
        .fv-text-h5-wrap::after {
            right: 9px;
        }   
    }
}
@media screen and (max-width:450px) {
    .fv {
        background-image: url(../img/lp_fv_img_sp.png);
        background-size: cover;
        margin-top: -16vw;
    }
    @scope (.fv) {
        

        .inner::after{
            content: '';
            background-image: url(../img/lp_logo.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: var(--logo_width);
            height: var(--logo_heigt);
            position: absolute;
            top: calc(80/375*100vw);
            left: calc(36/375*100vw);
            z-index: 10;
        }
        .fv-text-wrap {
            width: var(--fv_text-wrap-width);
            height: var(--fv_text-wrap-height);
            position: absolute;
            top: var(--fv_text-wrap-top);
            left: var(--fv_text-wrap-left);
            z-index: 10;
            /* 236 195 */
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin-left: -1.2vw;
        }
        .fv-text-h5-wrap {
            width: calc(292/375*100vw);
            margin-left: -2vw;
        }
    }

}

.fv-text-h5-wrap .wp-block-group__inner-container::before {
    position: absolute;
    content: '';
    background-image: url(../img/lp_line_left.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--fv-h5-befor-width);
    height: var(--fv-h5-befor-height);
    top: 50%;
    transform: translateY(-50%);
    left: 0.6vw;
}
.fv-text-h5-wrap .wp-block-group__inner-container::after {
    position: absolute;
    content: '';
    background-image: url(../img/lp_line_right.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--fv-h5-befor-width);
    height: var(--fv-h5-befor-height);
    top: 50%;
    transform: translateY(-50%);
    right: 0.8vw;
    
}


/* 

worries

*/
.worries {
    background-color: var(--color_1A3D78);
    padding: calc(50/1440*100vw) 0 calc(70/1440*100vw) 0;
    position: relative;
    margin-top: clamp(calc(-30/1440*100vw), calc(-30/1440*100vw), -30px);
    
}
.worries::after {
    content:"";
    position: absolute;
    bottom: 0vw;
    left: 50%;
    transform: translateX(-50%);
    width: calc(2/1440*100vw);
    height: calc(90/1440*100vw);
    background: linear-gradient(to bottom, #1A3D78 0px, #1A3D78 calc(20/1440*100vw), #FFFFFF calc(20/1440*100vw), #FFFFFF calc(90/1440*100vw));

}
@scope (.worries) {
    
    
    .section-title {
        position: relative;
        color: var(--color_FFFFFF);
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .section-title::before {
        content: '';
        position: absolute;
        top: 28%; 
        left: 50%;
        width: 100%;
        height: 2px;
        transform: translateX(-50%);
        background-color: #fff;
    }
    .section-title h3 {
        width: calc(600/1440*100vw);
        letter-spacing: 0.16rem;
        margin-bottom: calc(50/1440*100vw);
        background-color: var(--color_1A3D78);
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 1vw;
    }
    .section-title h3 .dots {
        position: relative;
        display: inline-block;
    }
    .section-title h3 .dots::before {
        content: '・・・';
        position: absolute;
        top: -0.9em; 
        left: 56%;
        transform: translateX(-50%);
        font-size: var(--h6);
        color: #fff;
        letter-spacing: calc(19/1440*100vw);
        white-space: nowrap;
    }
    .inner {
        background-color: var(--color_FFFFFF);
        width: calc(1050/1440*100vw);
        box-shadow: calc(10/1440*100vw) calc(10/1440*100vw)calc(5/1440*100vw) 0px rgba(0, 0, 0, .25);
        border-radius: 2rem;
    }
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: clamp(calc(47px/3), calc(47/1440*100vw),47px) clamp(calc(70px/3), calc(70/1440*100vw),70px);
    }
    .content-img {
        /* 259 221 */
        width: calc(259/1440*100vw);
        height: calc(221/1440*100vw);
    }
    .content-text {
        width: calc(583/1440*100vw);
        height: calc(350/1440*100vw);
        display: flex;
        flex-direction: column;
        padding: calc(20/1440*100vw) 0 0 0;
    }
    .content-text h5 {
        font-size: var(--h5); 
        font-weight: 400;
        margin-bottom: calc(30/1440*100vw);
    }

    
}

@media screen and (min-width:1441px) {
        @scope (.worries) {
        
        .section-title h3 {
            width: 600px;
            letter-spacing: 0.1rem;
            margin-bottom: 50px;
        }
        .section-title h3 .dots::before {
            letter-spacing: 19px;
        }
        .inner {
            width: 1050px;
            box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, .25);
        }
        .container {
            padding: 47px 70px;
        }
        .content-img {
            width: 259px;
            height: 221px;
        }
        .content-text {
            width: 583px;
            height: 350px;
            padding:20px 0 0 0;
        }
        .content-text h5 {
            margin-bottom: 30px;
        }
    }
}

@media screen and (max-width:450px) {
    .worries {
        padding: calc(30/375*100vw) 0 calc(35/375*100vw) 0;
    }
    @scope (.worries) {
        
        .section-title h3 {
            width: calc(270/375*100vw);
            letter-spacing: 0.1rem;
            margin-bottom: calc(25/375*100vw);
        }
        
        .section-title h3 .dots::before {
            font-size: calc(12/375*100vw);
            letter-spacing: calc(7/375*100vw);
            left: 53%;
        }
        .inner {
            width: calc(310/375*100vw);
            box-shadow: calc(10/375*100vw) calc(10/375*100vw)calc(5/375*100vw) 0px rgba(0, 0, 0, .25);
            border-radius: 0.8rem;
        }
        .container {
            padding: calc(30/375*100vw) calc(19/375*100vw);
            flex-direction: column;
        }
        .content-img {
            width: calc(178/375*100vw);
            height: calc(151/375*100vw);
            order: 2;
        }
        .content-text {
            width: calc(272/375*100vw);
            height: calc(189/375*100vw);
            padding: 0;
            order: 1;
        }
        .content-text h5 {
            font-size: var(--h5); 
            margin-bottom: calc(20/375*100vw);
        }
    }
    .worries::after {
        content:"";
        position: absolute;
        bottom: 0vw;
        left: 50%;
        transform: translateX(-50%);
        width: calc(2/375*100vw);
        height: calc(55/375*100vw);
        background: linear-gradient(to bottom, #1A3D78 0px, #1A3D78 calc(20/375*100vw), #FFFFFF calc(20/375*100vw), #FFFFFF calc(55/375*100vw));
    
    }
}

/* 

solution

*/
.solution {
    background-image: url(../img/lp_bg_base.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #F5F5F5;
    width: 100%;
    padding: calc(80/1440*100vw) 0 calc(144/1440*100vw) 0;
}
@scope (.solution) {
    .title-wrap {
        position: relative;
        width: calc(543/1440*100vw);
        display: block;
        margin: 0 auto; 
        margin-bottom: calc(40/1440*100vw);
    }
    .title-wrap h4 {
        font-size: var(--h4);
        font-weight: 700;
        letter-spacing: 0.1rem;
        margin-left: 2vw;
    }
    .inner {
        position: relative;
        width: calc(783/1440*100vw);
        height: calc(340/1440*100vw);
        background-color: #fff;
        margin: 0 auto;
        border: solid 1px #000;
        border-radius: 1.6rem;
        padding: calc(40/1440*100vw);
    }
    .inner::after {
        content:'';
        position: absolute;
        background-image: url(../img/lp_solution_img.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: calc(267/1440*100vw);
        height: calc(280/1440*100vw);
        top: 9vw;
        right: -4vw;
    }
    .inner h4 {
        font-size: var(--h4);
        color: var(--color_1A3D78);
        display: inline;
        background-image: linear-gradient(transparent 80%, var(--color_FFD630) 0%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
    }
    .inner h6 {
        font-size: var(--h6);
        width: calc(523/1440*100vw);
        height: calc(140/1440*100vw);
        font-weight: 400;
        letter-spacing: 0.16rem;
        margin-top: calc(28/1440*100vw);
        line-height: 1.8;
    }
}

@media screen and (min-width:1441px) {
    .solution {
        padding: 80px 0 144px 0;
    }
    @scope (.solution) {
        .title-wrap {
            width: 543px;
            margin-bottom: 40px;
        }
        .title-wrap h4 {
            margin-left: 32px;
        }
        .inner {
            width: 783px;
            height: 340px;
            border-radius: 1.6rem;
            padding: 40px;
        }
        .inner::after {
            width: 267px;
            height: 280px;
            top: 144px;
            right: -64px;
        }
        .inner h6 {
            width: 523px;
            height: 140px;
            margin-top: 28px;
        }
    }
}

@media screen and (max-width:450px) {
    .solution {
        padding: calc(50/375*100vw) 0 calc(75/375*100vw) 0;
    }
    @scope (.solution) {
        .title-wrap {
            width: calc(279/375*100vw);
            margin-bottom: calc(29/375*100vw);
        }
        .title-wrap h4 {
            margin-left: 0vw;
        }
        .inner {
            width: calc(310/375*100vw);
            height: calc(366/375*100vw);
            border-radius: 0.9rem;
            padding: calc(45/375*100vw) calc(35/375*100vw) calc(45/375*100vw) calc(35/375*100vw);
        }
        .inner::after {
            width: calc(140/375*100vw);
            height: calc(147/375*100vw);
            top: 68vw;
            right: -4vw;
        }
        
        .inner h6 {
            font-size: calc(14/375*100vw);
            width: calc(241/375*100vw);
            height: calc(120/375*100vw);
            letter-spacing: 0.11rem;
            margin-top: calc(28/375*100vw);
            line-height: 1.8;
        }
    }
}

/* 

plan

*/
.plan {
    background-image: url(../img/lp_bg_base.png);
    background-repeat: repeat;
    background-size: contain;
    background-color: #F5F5F5;
    width: 100%;
    padding: 0 0 calc(144/1440*100vw) 0;
    
}
@scope (.plan) {
    .section-title {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .section-title::before {
        content: '';
        position: absolute;
        top: 28%; 
        left: 50%;
        width: 100%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--color_1A3D78);
    }
    .section-title h3 {
        width: calc(262/1440*100vw);
        letter-spacing: 0.16rem;
        margin-bottom: calc(50/1440*100vw);
        color: var(--color_1A3D78);
        background-color: #F5F5F5;
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 1vw 0 1.5vw;
    }
    .section-text {
        text-align: center;
        margin-bottom: calc(50/1440*100vw);
    }
    .section-text p {
        font-size: var(--p);
        letter-spacing: 0.1rem;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .content {
        display: flex;
        flex-direction: column;
        width: calc(1050/1440*100vw);
        height: calc(403/1440*100vw);
        border-radius: 1.6rem;
        box-shadow: calc(2/1440*100vw) calc(4/1440*100vw)calc(4/1440*100vw) 0px rgba(0, 0, 0, .25);
        background-color: var(--color_FFFFFF);
        margin-bottom: calc(30/1440*100vw);
    }
    .plan-title {
        background-color: var(--color_1A3D78);
        height: calc(58/1440*100vw);
        border-radius: 1.6rem 1.6rem 0 0;
        display: flex;
        align-items: center;
        padding-left: calc(50/1440*100vw);
    }
    .plan-title h5 {
        font-size: var(--h5);
        color: var(--color_FFFFFF);
        
    }
    .plan-content-wrap{
        display: flex;
    }
    .plan-value {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: calc(354/1440*100vw);
        padding: calc(127/1440*100vw) 0 calc(132/1440*100vw) 0;
        border-right: solid 1px #D9D9D9;
        height: 100%;
    }
    .plan-value h2 {
        font-size: var(--h2);
        color: var(--color_1A3D78);
        letter-spacing: 0.06rem;
        font-family: "Noto Sans", sans-serif !important;
    }
    .plan-value h2 span {
        font-size: var(--h5);
        margin-left: 0.6vw;
    }
    .plan-value h6 {
        font-size: var(--h6);
        font-weight: 400;
        letter-spacing: 0.16rem;
    }
    .plan-overview {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 calc(40/1440*100vw) 0 calc(40/1440*100vw);
    }
    .plan-overview-content:first-child {
        margin-bottom: calc(20/1440*100vw);
    }
    .plan-overview-content h6 {
        font-size: var(--h6);
        color: var(--color_1A3D78);
        margin-bottom: calc(10/1440*100vw);
        letter-spacing: 0.2rem;
    }
    .plan-overview-content p {
        font-size: var(--p);
        margin-bottom: 0.5vw;
        width: calc(635/1440*100vw);
    }
    .all-plan-service {
        display: flex;
        flex-direction: column;
        width: calc(1050/1440*100vw);
/*         height: calc(845/1440*100vw); */
        border-radius: 1.6rem;
        box-shadow: calc(2/1440*100vw) calc(4/1440*100vw)calc(4/1440*100vw) 0px rgba(0, 0, 0, .25);
        background-color: var(--color_FFFFFF);
        margin-top: calc(20/1440*100vw);
        margin-bottom: calc(30/1440*100vw);
        padding: calc(50/1440*100vw);
    }
    .title-wrap {
        margin-bottom: calc(30/1440*100vw);
    }
    .title-wrap h4 {
        font-size: var(--h4);
        color: var(--color_1A3D78);
        display: inline;
        background-image: linear-gradient(transparent 80%, var(--color_FFD630) 0%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .all-plan-content {
        border-bottom: solid 1px #C9CACA;
    }
    .all-plan-content:last-child {
        border-bottom: none;
    }
    .all-plan-content h6 {
        font-size: var(--h6);
        margin-top: calc(20/1440*100vw);
        font-weight: 600;
    }
    .all-plan-content p {
        font-size: var(--p);
        margin-bottom: calc(15/1440*100vw);
    }
}



@media screen and (min-width:1441px) {
    .plan {
        padding: 0 0 144px 0;
        
    }
    @scope (.plan) {
        
        .section-title h3 {
            width: 262px;
            margin-bottom: 50px;
            padding: 0 16px 0 24px;
        }
        .section-text {
            margin-bottom: 50px;
        }
    
        .content {
            width: 1050px;
            height: 403px;
            border-radius: 0.8rem;
            box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, .25);
            margin-bottom: 30px;
        }
        .plan-title {
            height: 58px;
            border-radius: 0.8rem 0.8rem 0 0;
            padding-left: 50px;
        }
        .plan-value {
            width: 354px;
            padding: 127px 0 132px 0;
        }
        .plan-value h2 span {
            margin-left: 10px;
        }
        
        .plan-overview {
            padding: 0 40px;
        }
        .plan-overview-content:first-child {
            margin-bottom: 20px;
        }
        .plan-overview-content h6 {
            margin-bottom: 10px;
        }
        .plan-overview-content p {
            margin-bottom: 8px;
            width: 635px;
        }
        .all-plan-service {
            width: 1050px;
            height: 845px;
            border-radius: 1.6rem;
            box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, .25);
            margin-top: 20px;
            margin-bottom: 30px;
            padding: 50px;
        }
        .title-wrap {
            margin-bottom: 30px;
        }
        
        .all-plan-content h6 {
            margin-top: 20px;
        }
        .all-plan-content p {
            margin-bottom: 15px;
        }
    }
}
.br-sp {
    display: none;
}

@media screen and (max-width:450px) {
    .br-sp {
        display: inline;
    }
    .plan {
        padding: 0 0 calc(50/375*100vw) 0;
        
    }
    @scope (.plan) {
        
        .section-title h3 {
            width: calc(130/375*100vw);
            margin-bottom: calc(30/375*100vw);
            padding: 0 1vw 0 1.6vw;
            font-size: calc(20/375*100vw);
        }
        .section-text {
            margin-bottom: calc(30/375*100vw);
        }
        .section-text p {
            font-size: calc(12/375*100vw);
        }
        .section-text p:last-child {
            margin-top:calc(10/375*100vw);
        }
        .content {
            width: calc(305/375*100vw);
            height: calc(672/375*100vw);
            margin-bottom: calc(30/375*100vw);
        }
        .plan-title {
            height: calc(81/375*100vw);
            border-radius: 1rem 1rem 0 0;
            padding-left: calc(23/375*100vw);
        }
        .plan-title h5 {
            font-size: calc(16/375*100vw);
            line-height:2;
        }
        .plan-content-wrap{
            display: flex;
            flex-direction: column;
        }
        .plan-value {
            width: calc(260/375*100vw);
            padding: calc(50/375*100vw) 0 calc(40/375*100vw) 0;
            border-right: none;
            border-bottom: solid 1px #D9D9D9;
            height: 100%;
            margin: 0 auto;
        }
        .plan-value h2 {
            font-size: calc(36/375*100vw);
        }
        .plan-value h2 span {
            font-size: calc(16/375*100vw);
            margin-left: 0.6vw;
        }
        .plan-value h6 {
            font-size: calc(14/375*100vw);
        }
        .plan-overview {
            padding: calc(30/375*100vw) 0 calc(30/375*100vw) 0;
            margin: 0 auto;
        }
        .plan-overview-content:first-child {
            margin-bottom: calc(20/375*100vw);
        }
        .plan-overview-content h6 {
            font-size: calc(18/375*100vw);
            color: var(--color_1A3D78);
            margin-bottom: calc(10/375*100vw);
            letter-spacing: 0.2rem;
        }
        .plan-overview-content p {
            font-size: calc(14/375*100vw);
            margin-bottom: 2vw;
            width: calc(240/375*100vw);
            line-height: 1.8;
            letter-spacing: 0;
        }
        .all-plan-service {
            width: calc(305/375*100vw);
            height: auto;
            border-radius: 1rem;
            box-shadow: calc(2/375*100vw) calc(4/375*100vw)calc(4/375*100vw) 0px rgba(0, 0, 0, .25);
            margin-top: 0;
            margin-bottom: calc(30/375*100vw);
            padding: calc(30/375*100vw) 0;
            
        }
        .title-wrap {
            margin-bottom: calc(30/375*100vw);
            margin: 0 auto;
        }
        .title-wrap h4 {
            font-size: calc(18/375*100vw);
        }
        .all-plan-container {
            margin: 0 auto;
        }
        .all-plan-content {
            width: calc(259/375*100vw);
        }
        .all-plan-content h6 {
            font-size: calc(12/375*100vw);
            margin: calc(15/375*100vw) 0 calc(8/375*100vw) 0;
        }
        .all-plan-content p {
            font-size: calc(10/375*100vw);
            margin-bottom: calc(15/375*100vw);
        }
        .span-sp {
            display: none;
        }
    }
}

/* 

flow

*/
.flow {
    background-image: url(../img/lp_bg_base.png);
    background-repeat: repeat;
    background-size: cover;
    background-color: #F5F5F5;
    width: 100%;
    padding: 0 0 clamp(calc(144px/3),calc(144/1440*100vw), 144px) 0;
}

@scope (.flow) {
    .section-title {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: clamp(calc(56px/3),calc(56/1440*100vw), 56px);
    }
    .section-title::before {
        content: '';
        position: absolute;
        top: 28%; 
        left: 50%;
        width: 100%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--color_1A3D78);
    }
    .section-title h3 {
        width: clamp(calc(450px/3),calc(450/1440*100vw), 450px);
        letter-spacing: 0.16rem;
        color: var(--color_1A3D78);
        background-color: #F5F5F5;
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 1vw 0 1.5vw;
        margin-bottom: clamp(calc(40px/3),calc(40/1440*100vw), 40px);
    }
    .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        
    }
    .content {
        position: relative;
        width: clamp(calc(1018px/3),calc(1018/1440*100vw), 1018px);
        height: clamp(calc(222px/3),calc(222/1440*100vw), 222px);
        border: solid 1px #323232;
        border-radius: 0 1.6rem 1.6rem 0;
        display: flex;
        justify-content: end;
        align-items: center;
        margin-bottom: clamp(calc(36px/3),calc(36/1440*100vw), 36px);
        padding-right: clamp(calc(96px/3),calc(96/1440*100vw), 96px);
        margin-left: 2.6vw;
        background-color: var(--color_FFFFFF);
    }
    .content::before {
        content: '';
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        width: clamp(calc(210px/3),calc(210/1440*100vw), 210px);
        height: clamp(calc(300px/3),calc(300/1440*100vw), 300px);
        top: 54%;
        left: -2.7vw;
        transform: translateY(-50%);
    }
    .content-1::before {
        background-image: url(../img/lp_flow_1.png);
    }
    .content-2::before {
        background-image: url(../img/lp_flow_2.png);
    }
    .content-3::before {
        background-image: url(../img/lp_flow_3.png);
    }
    .content-4::before {
        background-image: url(../img/lp_flow_4.png);
    }
    .content::after {
        position: absolute;
        font-size: var(--h5);
        color: var(--color_FFFFFF);
        letter-spacing: 0.5rem;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        top: 50%;
        transform: translateY(-50%);
        left: -2vw;
        height: clamp(calc(200px/3),calc(200/1440*100vw), 200px);
        
    }
    .content-1::after {
        content: 'ヒアリング';
        margin-top: clamp(calc(28px/3),calc(28/1440*100vw), 28px);
    }
    .content-2::after {
        content: 'お見積り';
        margin-top: clamp(calc(40px/3),calc(40/1440*100vw), 40px);
    }
    .content-3::after {
        content: '制作開始';
        margin-top: clamp(calc(40px/3),calc(40/1440*100vw), 40px);
    }
    .content-4::after {
        content: '公開・運用';
        margin-top: clamp(calc(28px/3),calc(28/1440*100vw), 28px);
    }
    .content h6 {
        width: clamp(calc(670px/3),calc(670/1440*100vw), 670px);
        font-size: var(--h6);
        font-weight: 400;
        letter-spacing: 0.18rem;
    }
}

@media screen and (min-width:1441px) {
    @scope (.flow) {
        .content {
            margin-left: 32px;
        }
        .content::before {
            left: -28px;
        }
        .content::after {
            left: -19px;
        }
    }
}

@media screen and (max-width:450px) {
    .flow {
        padding: 0 0 calc(70/375*100vw) 0;
    }
    
    @scope (.flow) {
        .section-title {
            margin-bottom: calc(30/375*100vw);
        }
        .section-title::before {
            content: '';
            position: absolute;
            top: 28%; 
            left: 50%;
            width: 100%;
            height: 2px;
            transform: translateX(-50%);
            background-color: var(--color_1A3D78);
        }
        .section-title h3 {
            width: calc(240/375*100vw);
            padding: 0 1vw 0 1.5vw;
            margin-bottom: calc(18/375*100vw);
        }
        .content {
            width: calc(292/375*100vw);
            height: calc(140/375*100vw);
            margin-bottom: calc(20/375*100vw);
            padding-right: calc(15/375*100vw);
            margin-left: 5.4vw;
            border-radius: 0 1rem 1rem 0;
        }
        .content::before {
            width: calc(107/375*100vw);
            height: calc(186/375*100vw);
            top: 55%;
            left: -5.7vw;
            transform: translateY(-50%);
        }
        .content-1::before {
            background-image: url(../img/lp_flow_sp_1.png);
        }
        .content-2::before {
            background-image: url(../img/lp_flow_sp_2.png);
        }
        .content-3::before {
            background-image: url(../img/lp_flow_sp_3.png);
        }
        .content-4::before {
            background-image: url(../img/lp_flow_sp_4.png);
        }
        .content::after {
            font-size: calc(12.71/375*100vw);
            letter-spacing: 0.5rem;
            left: -3.4vw;
            height: clamp(calc(200px/3),calc(200/375*100vw), 200px);
            
        }
        .content-1::after {
            content: 'ヒアリング';
            margin-top: calc(44/375*100vw);
        }
        .content-2::after {
            content: 'お見積り';
            margin-top: calc(56/375*100vw);
        }
        .content-3::after {
            content: '制作開始';
            margin-top: calc(56/375*100vw);
        }
        .content-4::after {
            content: '公開・運用';
            margin-top: calc(44/375*100vw);
        }
        .content h6 {
            width: calc(180/375*100vw);
            font-size: calc(10/375*100vw);
            font-weight: 400;
            letter-spacing: 0.1rem;
        }
    }
}

/* 

banner

*/

.banner {
    background-color: var(--color_1A3D78);
    color: var(--color_FFFFFF);
    
}


@scope (.banner) {
    .inner {
        width: clamp(calc(1050px/3), calc(1050/1440*100vw), 1050px);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(50/1440*100vw) 0 calc(35/1440*100vw) 0;
    }
    .inner h4 {
        font-size: var(--line-text-maru);
        font-weight: 600;
        margin-bottom: clamp(calc(25px/3), calc(25/1440*100vw), 25px);
        width: clamp(calc(427px/3), calc(427/1440*100vw), 427px);
    }
    .line-btn-wrap {
        width: clamp(calc(467px/3), calc(467/1440*100vw), 467px);
    }
    .line-btn-text {
        z-index: 2;
        margin-bottom: clamp(calc(20px/3), calc(20/1440*100vw), 20px);
    }
    .line-btn {
        z-index: 1;
        margin-top: 3.2vw;
        border-radius: 0 1rem 1rem 0;
        width: clamp(calc(418px/3), calc(418/1440*100vw), 418px);
        height: clamp(calc(68px/3), calc(68/1440*100vw), 68px);
        left: -1vw;
    }
    .line-btn span {
        margin-top: 0.6vw;
        padding-left: 2.3vw;
        padding-left: clamp(calc(30px/3), calc(30/1440*100vw), 30px);
        letter-spacing: 0.1rem;
    }
    .line-btn span::after {
        width: 1vw;
        height: 1vw;
        right: clamp(calc(20px/3), calc(20/1440*100vw), 20px);
        margin-top: -0.1vw;
    }
    .inner h6 {
        font-size: var(--h6);
        font-weight: 700;
        letter-spacing: 0.1rem;
    }
    .inner p {
        font-size: clamp(calc(15px/3), calc(15/1440*100vw), 15px);
        letter-spacing: 0.1rem;
    }
}
@media screen and (min-width:1441px) {
    
    @scope (.banner) {
        .inner {
            width: clamp(calc(1050px/3), calc(1050/1440*100vw), 1050px);
            padding: 50px 0 35px 0;
        }
        
        .line-btn {
            margin-top: 47px;
            
        }
        .line-btn span {
            margin-top: 10px;
            margin-left: 10px;
        }
        .line-btn span::after {
            width: 14px;
            height: 16px;
            margin-top: 0;
        }
        
    }
}
@media screen and (max-width:450px) {
    
    @scope (.banner) {
        .inner {
            width: 100%;
            padding: calc(30/375*100vw) 0 ;
        }
        .inner h4 {
            font-size: calc(18/375*100vw);
            margin-bottom: calc(18/375*100vw);
            width: 100%;
			text-align: center;
        }
        .line-btn-wrap {
            width: calc(244/375*100vw);
            top: 0;
        }
        .line-btn-text {
            margin-bottom: calc(15/375*100vw);
        }
        .line-btn {
            margin-top: 8vw;
            border-radius: 0 0.5rem 0.5rem 0;
            width: calc(218/375*100vw);
            height: calc(35/375*100vw);
            left: -2vw;
        }
        .line-btn span {
            margin-top: -0.4vw;
            padding-left: 2.3vw;
            padding-left: calc(15/375*100vw);
            letter-spacing: 0rem;
            font-size: calc(12/375*100vw);
        }
        .line-btn span::after {
            width: 2vw;
            height: 2vw;
            right: calc(7/375*100vw);
            margin-top: 0.05vw;
        }
        .inner h6 {
            font-size: calc(10/375*100vw);
        }
        .inner p {
            font-size: calc(10/375*100vw);
        }
    }
}

/* 

features

*/
.features {
    background-image: url(../img/lp_bg_base.png);
    background-repeat: repeat;
    background-size: cover;
    background-color: #F5F5F5;
    width: 100%;
    padding: clamp(calc(80px/3),calc(80/1440*100vw), 80px) 0;
}



@scope (.features) {
    .section-title {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: clamp(calc(56px/3),calc(56/1440*100vw), 56px);
    }
    .section-title::before {
        content: '';
        position: absolute;
        top: 28%; 
        left: 50%;
        width: 100%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--color_1A3D78);
    }
    .section-title h3 {
        width: clamp(calc(450px/3),calc(450/1440*100vw), 450px);
        letter-spacing: 0.16rem;
        color: var(--color_1A3D78);
        background-color: #F5F5F5;
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 1vw 0 1.5vw;
        margin-bottom: clamp(calc(40px/3),calc(40/1440*100vw), 40px);
    }
    .inner {
        width: clamp(calc(1050px/3), calc(1050/1440*100vw), 1050px);
    }

    .container {
        display: flex;  
    }
    .container-1 {
        margin-bottom: clamp(calc(36px/3),calc(36/1440*100vw), 36px);
    }
    .container-2 {
        justify-content: center;
    }
    
    .content {
        width: clamp(calc(326px/3),calc(326/1440*100vw), 326px);
        height: clamp(calc(300px/3),calc(300/1440*100vw), 300px);
        background-color: var(--color_FFFFFF);
        box-shadow: 0px calc(2/1440*100vw)calc(4/1440*100vw) 0px rgba(0, 0, 0, .25);
        border-radius: 1rem;
        padding: 0 0 clamp(calc(50px/3),calc(50/1440*100vw), 50px) 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .content-2 {
        margin: 0 clamp(calc(36px/3),calc(36/1440*100vw), 36px);
    }
    .content-4 {
        margin: 0 clamp(calc(18px/3),calc(18/1440*100vw), 18px) 0 0;
    }
    .content-5 {
        margin: 0 0 0 clamp(calc(18px/3),calc(18/1440*100vw), 18px);
    }
    .content-img {
        margin-top: clamp(calc(73px/3),calc(73/1440*100vw), 73px);
    }
    .content-img-1 {
        width: clamp(calc(79px/3),calc(79/1440*100vw), 79px);
        height: clamp(calc(79px/3),calc(79/1440*100vw), 79px);
        margin-bottom: clamp(calc(48px/3),calc(48/1440*100vw), 48px);
    }
    .content-img-2 {
        width: clamp(calc(106px/3),calc(106/1440*100vw), 106px);
        height: clamp(calc(78px/3),calc(78/1440*100vw), 78px);
        margin-bottom: clamp(calc(48px/3),calc(48/1440*100vw), 48px);
    }
    .content-img-3 {
        width: clamp(calc(86px/3),calc(86/1440*100vw), 86px);
        height: clamp(calc(85px/3),calc(85/1440*100vw), 85px);
        margin-bottom: clamp(calc(45px/3),calc(45/1440*100vw), 45px);
    }
    .content-img-4 {
        width: clamp(calc(101px/3),calc(101/1440*100vw), 101px);
        height: clamp(calc(73px/3),calc(73/1440*100vw), 73px);
        margin-bottom: clamp(calc(57px/3),calc(57/1440*100vw), 57px);
    }
    .content-img-5 {
        width: clamp(calc(93px/3),calc(93/1440*100vw), 93px);
        height: clamp(calc(73px/3),calc(73/1440*100vw), 73px);
        margin-bottom: clamp(calc(57px/3),calc(57/1440*100vw), 57px);
    }
    .content-text {
        display: flex;
        align-items: end;
    }
    .content-text p {
        font-size: clamp(calc(18px/3),calc(18/1440*100vw), 18px);
        color: var(--color_1A3D78);
        text-align: center;
        font-family: 600;
    }
}
@media screen and (max-width:450px) {
    .features {
        padding: calc(50/375*100vw) 0;
    }
    /* calc(/375*100vw) */
    @scope (.features) {

    .section-title {
        margin-bottom: calc(36/375*100vw);
    }
    
    .section-title h3 {
        width: calc(200/375*100vw);
        margin-bottom: calc(20/375*100vw);
    }
    .inner {
        width: calc(310/375*100vw);
    }

    .container {
        flex-direction: column;
    }
    .container-1 {
        margin-bottom: 0;
    }
    .container-2 {
        justify-content: center;
    }
    
    
    .content-2 {
        margin: 0;
    }
    .content-4 {
        margin:0;
    }
    .content-5 {
        margin: 0;
    }
    .content-img {
        margin-top: 0;
    }
    .content {
        width: calc(310/375*100vw);
        height: calc(290/375*100vw);
        box-shadow: 0px calc(2/375*100vw)calc(4/375*100vw) 0px rgba(0, 0, 0, .25);
        border-radius: 1rem;
        padding: 0 0 clamp(calc(50px/3),calc(50/375*100vw), 50px) 0;
        justify-content: end;
        margin-bottom: calc(20/375*100vw);
    }
    .content-img-1 {
        width: calc(79/375*100vw);
        height: calc(79/375*100vw);
        margin-bottom: calc(48/375*100vw);
    }
    .content-img-2 {
        width: calc(106/375*100vw);
        height: calc(78/375*100vw);
        margin-bottom: calc(50/375*100vw);
    }
    .content-img-3 {
        width: calc(86/375*100vw);
        height: calc(85/375*100vw);
        margin-bottom: calc(50/375*100vw);
    }
    .content-img-4 {
        width: calc(101/375*100vw);
        height: calc(73/375*100vw);
        margin-bottom: calc(50/375*100vw);
    }
    .content-img-5 {
        width: calc(93/375*100vw);
        height: calc(73/375*100vw);
        margin-bottom: calc(50/375*100vw);
    }
    
    .content-text p {
        font-size: calc(16/375*100vw);
    }
    }
}

/* 

customer

*/
.customer {
    background-image: url(../img/lp_bg_base.png);
    background-repeat: repeat;
    background-size: cover;
    background-color: #F5F5F5;
    width: 100%;
    padding: clamp(calc(80px/3),calc(80/1440*100vw), 80px) 0;
}



@scope (.customer) {
    .section-title {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: clamp(calc(56px/3),calc(56/1440*100vw), 56px);
    }
    .section-title::before {
        content: '';
        position: absolute;
        top: 28%; 
        left: 50%;
        width: 100%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--color_1A3D78);
    }
    .section-title h3 {
        width: clamp(calc(450px/3),calc(450/1440*100vw), 450px);
        letter-spacing: 0.16rem;
        color: var(--color_1A3D78);
        background-color: #F5F5F5;
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 1vw 0 1.5vw;
        margin-bottom: clamp(calc(40px/3),calc(40/1440*100vw), 40px);
    }
    .inner {
        width: clamp(calc(1050px/3), calc(1050/1440*100vw), 1050px);
    }
    .container {
        display: flex;
    }
    .content-2 {
        margin: 0 clamp(calc(36px/3),calc(36/1440*100vw), 36px);
    }
    .content {
        width: clamp(calc(326px/3),calc(326/1440*100vw), 326px);
/*         height: clamp(calc(498px/3),calc(498/1440*100vw), 498px); */
        background-color: var(--color_FFFFFF);
        box-shadow: calc(2.9/1440*100vw) calc(2.9/1440*100vw) calc(2.9/1440*100vw) 0px rgba(0, 0, 0, .25);
        border-radius: 1rem;
        padding: clamp(calc(56px/3),calc(56/1440*100vw), 56px) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .content-img-wrap {
        width: clamp(calc(127px/3),calc(127/1440*100vw), 127px);
        height: clamp(calc(162px/3),calc(162/1440*100vw), 162px);
        margin-bottom: clamp(calc(32px/3),calc(32/1440*100vw), 32px);
    }
    .content-img {
        width: clamp(calc(127px/3),calc(127/1440*100vw), 127px);
        height: clamp(calc(126.56px/3),calc(126.56/1440*100vw), 126.56px);
        margin-bottom: clamp(calc(15.46px/3),calc(15.46/1440*100vw), 15.46px);
    }
    .content-text {
        width: clamp(calc(247px/3),calc(247/1440*100vw), 247px);
    }
    .content-img-wrap p,
    .content-text p {
        font-size: clamp(calc(14px/3),calc(14/1440*100vw), 14px);
        letter-spacing: 0.16rem;
    }
    .content-img-wrap p {
        font-weight: 700;
    }
    .content-text p {
        line-height: 1.8;
    }
}

@media screen and (max-width:450px) {
    .customer {
        padding: calc(30/375*100vw) 0;
        
    }
    @scope (.customer) {
        .section-title {
            margin-bottom: calc(26/375*100vw);
        }
        
        .section-title h3 {
            width: calc(200/375*100vw);
            margin-bottom: calc(20/375*100vw);
        }
        .inner {
            width: calc(310/375*100vw);
        }
        .container {
            flex-direction: column;
        }
        .content-2 {
            margin: 0;
        }
        .content {
            width: calc(310/375*100vw);
            height: calc(452/375*100vw);
            box-shadow: calc(2.9/375*100vw) calc(2.9/375*100vw) calc(2.9/375*100vw) 0px rgba(0, 0, 0, .25);
            border-radius: 1rem;
            padding: calc(40/375*100vw) 0 0 0;
            margin-bottom: calc(20/375*100vw);
        }
        
        .content-img-wrap {
            width: calc(126/375*100vw);
            height: calc(162/375*100vw);
            margin-bottom: calc(20/375*100vw);
        }
        .content-img {
            width: calc(126/375*100vw);
            height: calc(126/375*100vw);
            margin-bottom: calc(16/375*100vw);
        }
        .content-text {
            width: calc(247/375*100vw);
        }
        .content-img-wrap p,
        .content-text p {
            font-size: calc(14/375*100vw);
        }
        
}
}

/* 

Q AND A

*/
.qa {
    width: 100%;
    background-color: var(--color_4B8FCF);
    padding: clamp(calc(70px/3),calc(70/1440*100vw), 70px) 0 clamp(calc(80px/3),calc(80/1440*100vw), 80px) 0;
}


@scope (.qa) {
    .section-title {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 0;
    }
    .section-title::before {
        content: '';
        position: absolute;
        top: 28%; 
        left: 50%;
        width: 100%;
        height: 2px;
        transform: translateX(-50%);
        background-color: var(--color_FFFFFF);
    }
    .section-title h3 {
        width: clamp(calc(320px/3),calc(320/1440*100vw), 320px);
        letter-spacing: 0.16rem;
        color: var(--color_FFFFFF);
        background-color: var(--color_4B8FCF);
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 1vw 0 1.5vw;
        margin-bottom: clamp(calc(40px/3),calc(40/1440*100vw), 40px);
    }
    .inner {
        display: flex;
        justify-content: center;
        width: clamp(calc(1050px/3),calc(1050/1440*100vw), 1050px);

    }
    .container { 

    }
    .content {
        width: clamp(calc(769px/3),calc(769/1440*100vw), 769px);
        margin-bottom: clamp(calc(20px/3),calc(20/1440*100vw), 20px);
        
        background-color: var(--color_FFFFFF);
        border-radius: 1rem;
        padding: 0 clamp(calc(60px/3),calc(60/1440*100vw), 60px);
        box-shadow: calc(2/1440*100vw) calc(4/1440*100vw)calc(4/1440*100vw) 0px rgba(0, 0, 0, .25);
    }

    .content summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        font-weight: 600;
        cursor: pointer;
        
    
    }
    .content summary > h6 {
        font-size: var(--p);
        width: clamp(calc(628px/3),calc(628/1440*100vw), 628px);
        color: #000;
        padding: clamp(calc(21px/3),calc(21/1440*100vw), 21px) 0px clamp(calc(25px/3),calc(25/1440*100vw), 25px) 0px;
        letter-spacing: 0.05rem;
    }

    .content summary::-webkit-details-marker {
        display: none;
    }

    .content summary::after {
        transform: rotate(180deg);
        width: clamp(calc(18px/3),calc(18/1440*100vw), 18px);
        height: clamp(calc(19px/3),calc(19/1440*100vw), 19px);
        content: '';
        background-image: url(../img/lp_qa_arrow.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: transform .3s;
        position: relative;
        left: clamp(calc(30px/3),calc(30/1440*100vw),30px);
    }

    .content[open] summary::after {
        transform: rotate(0deg);
    }

    .content p {
        transform: translateY(-10px);
        opacity: 0;
        margin: 0;
        padding: clamp(calc(15px/3),calc(15/1440*100vw), 15px) 0px clamp(calc(23px/3),calc(23/1440*100vw), 23px) 0px;
        transition: transform .5s, opacity .5s;
        color: var(--color_1A3D78);
        font-size: var(--p);
        width: clamp(calc(628px/3),calc(628/1440*100vw), 628px);
        border-top: solid 1px #C9CACA;
        letter-spacing: 0.05rem;
    }

    .content[open] p {
        transform: none;
        opacity: 1;
}
}

@media screen and (max-width:450px) {
    .qa {
        padding: calc(40/375*100vw) 0 calc(30/375*100vw) 0;
    }
    
    @scope (.qa) {
        .section-title h3 {
            width: calc(200/375*100vw);
            letter-spacing: 0.1rem;
            margin-bottom: calc(28/375*100vw);
            font-size: calc(20/375*100vw);
        }
        .inner {
            display: flex;
            justify-content: center;
            width: calc(310/375*100vw);

        }
        .container { 

        }
        .content {
            width: calc(334/375*100vw);
            margin-bottom: calc(15/375*100vw);
            border-radius: 0.6rem;
            /* padding: 0 calc(10/375*100vw); */
            box-shadow: calc(2/375*100vw) calc(4/375*100vw)calc(4/375*100vw) 0px rgba(0, 0, 0, .25);
        }
        .content summary > h6 {
            font-size: calc(12/375*100vw);
            width: 100%;
            color: #000;
            padding: calc(15/375*100vw) 0;
            letter-spacing: 0.05rem;
        }
        .content summary::after {
            transform: rotate(180deg);
            width: calc(12/375*100vw);
            height: calc(12/375*100vw);
            left: 0;
            display: none;
        }

        .content[open] summary::after {
            transform: rotate(0deg);
        }

        .content p {
            transform: translateY(-10px);
            opacity: 0;
            margin: 0;
            padding: calc(15/375*100vw) 0;
            font-size: calc(12/375*100vw);
            width: 100%;
        }
    }
}

/* 

last banner

*/
@scope (.banner-2) {
    .h6-pc {
        display: block;
        font-size: var(--h6);
        text-align: center;
        margin-bottom: clamp(calc(20px/3),calc(20/1440*100vw),20px);
    }
    .h6-sp {
        display: none;
    }
    @media screen and (max-width:450px) {
        .h6-pc {
            display: none;
        }
        .h6-sp {
            display: block;
        }
        .line-btn span::after {
            margin-top: 0.15vw;
        }
    }
}