@charset "UTF-8";

html{
    font-size:calc(100vw/1920);
}
@media screen and (max-width:780px){
    html{
        font-size:calc(100vw/780);
    }
}
body{
    font-size:20rem;
    color:#003865;
    font-weight:600;
    letter-spacing: 5rem;
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN",sans-serif;

}

section{
    margin:0 240rem;
}
@media screen and (max-width:780px){
    section{
        margin:0 50rem;
    }
}
.footer{
    margin:0 240rem;
}
@media screen and (max-width:780px){
    .footer{
        margin:0 50rem;
    }
}
.h2{
    font-size:50rem;
}
@media screen and (max-width:780px){
    .h2{
        font-size:38rem;
    }
}
.h3{
    font-size:37rem;
}
@media screen and (max-width:780px){
    .h3{
        font-size:30rem;
    }
}
/*.under-line{
    background: linear-gradient(transparent 60%, #eebf54ff 30%);
    display: inline-block;
}*/
.btn , .chapter-toggle{
    cursor:pointer;
}
.spbr{
    display:none;
}
.pcbr{
    display:block
}
.spemp{
    display:none;
}
.pcemp{
    display:inline-block;
}
.pccon{
    display:inline-block;
}
.spcon{
    display:none;
}
.pcimg{
    display:inline-block;
}
.spimg{
    display:none;
}
@media screen and (max-width:780px){
    .spbr{
        display:block;
    }
    .pcbr{
        display:none;
    }
    .spemp{
        display:inline-block;
    }
    .pcemp{
        display:none;
    }
    .pccon{
        display:none;
    }
    .spcon{
        display:inline-block;
    }
    .pcimg{
        display:none;
    }
    .spimg{
        display:inline-block;
    }
}

/*ーーーーーーーーーーーーーーーーーーーーーーヘッドコンテンツーーーーーーーーーーーーーーーーーーーーーーー*/

.header{
    margin: 0 auto;
    width:100%;
    height:1030rem;
    display:flex;
    flex-direction:column;
    position:relative;
}
@media screen and (max-width:780px){
    .header {
        height:1430rem;
    }
}
.header .test-sale{
    position:absolute;
    top:30rem;
    right:30rem;
    font-size:32rem;
    width:315rem;
    padding: 20rem 0;
    display:flex;
    justify-content: center;
    border: 2rem solid #003865;
}
@media screen and (max-width:780px){
    .header .test-sale{
        font-size:23rem;
        width:200rem;
        padding-top:17rem;
        top:75rem;
        right:48rem;
    }
}
.header-back-img{
    display:flex;
    justify-content: flex-end;
    height:100%;
    width:80%;
    position: absolute;
    z-index:-1;
    right:0;
    top:0;
}
@media screen and (max-width:780px){
    .header-back-img{
         top:750rem;
    }
    .header-back-img{
        height:620rem;
        width:725rem;
    }
}
.header-wrapper{
    margin-left:100rem;
}
@media screen and (max-width:780px){
    .header-wrapper{
        margin-left:50rem;
    }
}
.header-logo {
    margin-top:65rem;
}
@media screen and (max-width:780px){
    .header-logo{
        margin-top:40rem;
    }
}
.header-logo-img{
    margin:0;
    padding:0;
    width:auto;
}
.header-logo-img img{
    width:350rem;
}
.header-number-text{
    margin-top:30rem;
    font-size:28rem;
    /*margin-bottom: 175rem;*/
    margin-bottom:40rem;
    letter-spacing:3rem;
}
@media screen and (max-width:780px){
    .header-number-text{
        margin-top:10rem;
        margin-bottom:30rem;
        font-size:32rem;
    }
}
.header-appeal{
    text-shadow: 0 0 1rem #003865;
    line-height:1.75;
}
.header-service-catch{
    font-size:35rem;
    letter-spacing: 5rem;
}
@media screen and (max-width:780px){
    .header-service-catch{
        font-size:23rem;
        letter-spacing:2rem;
        margin-bottom:30rem;
    }
}
.point-1{
    font-size:50rem;
    letter-spacing: 12rem;
    line-height:60rem;
    margin:10rem 0;
    background: linear-gradient(transparent 70%, #eebf54ff 30%);
    display: inline-block;
}
@media screen and (max-width:780px){
    .point-1{
        font-size:30rem;
        letter-spacing:2rem;
        background: linear-gradient(transparent 80%,#eebf54ff 30%);
        line-height:40rem;
        margin:0 0 30rem 0;
    }
}
.header-service-description{
    font-size:65rem;
    letter-spacing: 15rem;
}
.header-service-description h1{
    font-size:60rem;
    line-height:100rem;
}
@media screen and (max-width:780px){
    .header-service-description h1{
        /*font-size:40rem;*/
        font-size:35rem;
        line-height:70rem;
        letter-spacing: 5rem;
        margin-bottom:30rem;
    }
}

.header-btn-container{
    display:flex;
    flex-direction: row;
    gap:15rem;
    margin-top:30rem;
}
@media screen and (max-width:780px){
    .header-btn-container{
        margin-top:15rem;
    }
}
.header-btn-container .btn{
    display:flex;
    align-items: center;
    justify-content: center;
    padding:35rem 0;
    font-size:30rem;
    letter-spacing: 3rem;
    width:365rem;
    border:#003865 2rem solid;
}
@media screen and (max-width:780px){
    .header-btn-container .btn{
        width:300rem;
        padding:25rem 0;
    }
}
.header-btn-container .btn.contact-btn{
    background-color:#fff;
}
.header-btn-container .btn.download-btn{
    background-color: #003865;
    color:#fff;
}

/*ーーーーーーーーーーーーーーーーーーエデュケーションーーーーーーーーーーーーーーーーー*/
section.education{
    margin:0;
    border-radius:0 0 30% 30%;
}
@media screen and (max-width:780px){
    section.education{
        border-radius:0 0 200rem 200rem;
    }
}
.education{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:#edeef0;
}
.education-container{
    display:flex;
    flex-direction:column;
    align-items:center;

}
.education-main-text{
    letter-spacing: 13rem;
    line-height:1.75;
    margin-top:40rem;
    display:flex;
    flex-direction:column;
    align-items: center;
    border-top: 2rem solid #003865;
    border-bottom: 2rem solid #003865;
    padding:30rem 0;
}
@media screen and (max-width:780px){
    .education-main-text {
        letter-spacing: 5rem;
    }
}
.education-secondary-text{
    letter-spacing: 5rem;
    margin-top:80rem;
}
.education-secondary-text .h3{
    text-align:center;
}
.education-tertiary-text{
    letter-spacing:4rem;
    line-height:2;
    margin-top:40rem;
    margin-bottom: 90rem;
    font-size:26rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
@media screen and (max-width:780px){
    .education-tertiary-text{
        font-size:25rem;
    }
}
.tertiary-btn {
    display: inline-block;
    padding: 0 35rem; /* デフォルトのパディング */
    margin-top: 20rem;
    border: 2rem solid #003865; /* ボタンのボーダー（例） */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.more-tertiary-text {
    height: 0;
    overflow: hidden;
    padding: 0 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.more-tertiary-text p {
    opacity: 0; /* 初期状態では文字を非表示 */
    transform: translateY(20px); /* ★上から下にスライドする準備 */
    border: none; /* 不要な枠線を消す */
    outline: none; /* 不要なアウトラインを消す */
}

/*ーーーーーーーーーーーーーーーテストーーーーーーーーーーーーーーーー*/
.test{
    margin-top:90rem;
    margin-bottom:90rem;
}
.test-container{
    display:flex;
    flex-direction:row;
    height:290rem;
    justify-content: center;
    gap:40rem
}
@media screen and (max-width:780px){
    .test-container{
        gap:25rem;
    }
}
.test-about-service{
    display:flex;
    flex-direction:column;
    justify-content: center;
    font-size:35rem;
}
@media screen and (max-width:780px){
    .test-about-service{
        font-size:28rem;
        letter-spacing: 1rem;
    }
}
.test-img{
    display:flex;
    align-items: flex-end;
}
.test-img img{
    height:290rem;
}
@media screen and (max-width:780px){
    .test-img img{
        height:250rem;
        width:auto;
    }
}
/*.test-sale {
    margin-top:60rem;
}*/
.test-appeal{
    margin-top: 25rem;
}
.test-service-catch{
    display:flex;
    flex-direction: column;
    gap:20rem;
}

/*ーーーーーーーーーーー利用方法ーーーーーーーーーーーーーー*/
@media screen and (max-width:780px){
    section.usage{
        margin:0;
    }
}
.usage{
    margin-bottom:100rem;
}
.usage-container{
    background-color: #edeef0;
    display:flex;
    flex-direction:column;
    padding:0 50rem;
}
.usage-how {
    display:flex;
    justify-content: center;
}
.usage-how .h3{
    margin-top:45rem;
    display:flex;
    justify-content: center;
    font-size:40rem;
}
.usage-how .h3.fw500{
    font-size:33rem;
    margin-top:25rem;
    letter-spacing: 2rem;
    display:flex;
    align-items:flex-end;
}
.usage-how .h3.fw500 span{
    font-size:37rem;
}
@media screen and (max-width:780px){
    .usage-how .h3.fw500{
        font-size:30rem;
        display:block;
        text-align:center;
    }
    .usage-how .h3.fw500 span{
        font-size:35rem;
    }
}
.usage-how p{
    margin-top:15rem;
    font-size:27rem;
    display:flex;
    justify-content:center;
}
.usage-how-text .h3{
    font-size:50rem;
}
@media screen and (max-width:780px){
    .usage-how-text .h3 {
        font-size:42rem;
    }
}
.usage-detail{
    margin-top:30rem;
}
@media screen and (max-width:780px){
    .usage-detail{
        margin-top: 10rem;
    }
}
.usage-detail-text{
    display:flex;
    flex-direction:row;
    justify-content: center;
    position:relative;
}
@media screen and (max-width:780px){
    .usage-detail-text{
        flex-direction:column;
    }
}

.usage-detail-text .watch{
    height:40rem;
    margin: 0 15rem;
}
@media screen and (max-width:780px){
    .usage-detail-text .watch{
        height:42rem;
    }
}
.usage-detail-text .title {
    font-size:45rem;
    display:flex;
    align-items:center;
    letter-spacing:4rem;
    margin-bottom: 20rem;
}
@media screen and (max-width:780px){
    .usage-detail-text .title{
        font-size:42rem;
    }
}
.usage-detail-text span{
    font-size:40rem;
}
@media screen and (max-width:780px){
    .usage-detail-text span{
        font-size:30rem;
    }
}
.usage-begin{
    display:flex;
    flex-direction:column;
    flex:1;
}
@media screen and (max-width:780px){
    .usage-begin{
        margin-top: 20rem;
    }
}
.usage-begin p{
    /*font-size:35rem;*/
    font-size:38rem;
    letter-spacing: 4rem;
    line-height:1.5;
    margin-bottom:30rem;
}
@media screen and (max-width:780px){
    .usage-begin p{
        font-size:30rem;
        margin-bottom:30rem;
    }
}
.usage-begin .q-box{
    background-color:#003865;
    padding:20rem;
    display:flex;
    flex-direction:column;
    position:absolute;
    bottom:65rem;
    left:-17rem;
    z-index:10;
}
@media screen and (max-width:780px){
    .usage-begin .q-box{
        position:static;
        margin-bottom:50rem;
        padding:0;
    }
}
.usage-begin .title {
    padding:0;
}
@media screen and (max-width:780px){
    .usage-begin .title{
        margin-bottom:30rem;
    }
    .usage-begin .title .spemp{
        font-size:45rem;
    }
}
.usage-begin span.under.min{
    font-size:50rem;
    background: linear-gradient(transparent 80%, #eebf54ff 30%);
}
.usage-finish span.under.min{
    font-size:50rem;
    background: linear-gradient(transparent 80%, #eebf54ff 30%);
}
@media screen and (max-width:780px){
    .usage-begin span.under.min{
        font-size:40rem;
    }
    .usage-finish span.under.min{
        font-size:40rem;
    }
}
.usage-begin .under{
    background: linear-gradient(transparent 90%, #eebf54ff 30%);
}
.usage-finish .under{
    background: linear-gradient(transparent 80%, #eebf54ff 30%);
}
.usage-begin .text{
    font-size:30rem;
}
.usage-begin .text.red-col{
    letter-spacing: 4rem;
    font-weight:500;
}
.usage-begin .red-col{
    /*color: #5d0515ff;*/
    color:#fff;
    margin-bottom: 10rem;
    letter-spacing:2rem;
}
@media screen and (max-width:780px){
    .usage-begin .red-col{
        margin-bottom:0;
    }
    .usage-begin .red-col:nth-last-child(1){
        margin-bottom:0;
        font-size:28rem;
    }
}
.usage-img img{
    height:610rem;
}
@media screen and (max-width:780px){
    .usage-img img{
        height:695rem;
    }
}
.usage-img.pc{
    display:flex;
    justify-content:center;
    flex:1;
}
.usage-img.sp{
    display:none;
    justify-content: center;
    flex:1;
}
@media screen and (max-width:780px){
    .usage-img.pc{
        display:none;
    }
    .usage-img.sp{
        display:flex;
    }
}
.usage-finish{
    display:flex;
    flex-direction:column;
    flex:1;
}
.usage-finish p{
    /*font-size:35rem;*/
    font-size:38rem;
    letter-spacing: 4rem;
    line-height:1.5;
    margin-bottom: 15rem;
}
@media screen and (max-width:780px){
    .usage-finish p{
        font-size:30rem;
        margin-bottom:30rem;
    }
}
.usage-finish .text{
    font-size:27rem;
    line-height:1.5;
    margin-bottom:40rem;
}
@media screen and (max-width:780px) {
    .usage-finish .title .spemp {
        font-size: 45rem;
    }
}
.usage-finish .text.indent{
}
.usage-finish .text.box{
    border:2rem solid #003865;
    color:#003865;
    width:450rem;
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    padding:10rem 20rem;
}
@media screen and (max-width:780px){
    .usage-finish .text.box{
        width:100%;
        margin-bottom: 30rem;
    }
}
.usage-finish .text.box .box-title{
    font-size:40rem;
    font-weight:600;
}
.usage-finish .text.box .sp{
    display:inline-block;
}
.usage-finish .text.box .yoko{
    font-size:32rem;
}

/*ーーーーーーーーーーーーーーーーーーーーー選ばれる理由ーーーーーーーーーーーーーーーーーーーーー*/

.reason{

}
.reason-container{
    display:flex;
    flex-direction:column;
}
.reason-title{
    padding:10rem 30rem;
    border-left: #003865 12rem solid;
    letter-spacing:7rem;
}
@media screen and (max-width:780px){
    .reason-title{
        margin-top:20rem;
    }
}
.reason-contents{
    display:flex;
    flex-direction:row;
    gap:35rem;
}
@media screen and (max-width:780px){
    .reason-contents{
        flex-direction:column;
        gap:20rem;
    }
}
.reason-content-box {
    position: relative;
    display:flex;
    align-items:flex-start;
    flex-direction:row;
    margin-top:100rem;
    flex:1;
}
@media screen and (max-width:780px){
    .reason-content-box{
        margin-top:80rem;
    }
    .reason-content-box:nth-of-type(2){
        margin-top:0;
    }
}
.reason-content-box.three-box{
    background-color:#849fb4;
    margin-top:0;
}
.reason-content-box .card-img{
    flex-shrink: 0;
    position:absolute;
    left: -10rem;
    bottom:0;
    z-index:2;
}
@media screen and (max-width:780px){
    .reason-content-box .card-img{
        display:none;
    }
}
.card-img img{
    height:305rem;
}
.reason-content-box .card-img.one-card{
    left:-60rem;
    bottom:-4rem;
}
.reason-content-box .card-img.two-card{
    left:-25rem;
    bottom:-4rem;
}
.reason-content-box .card-img.three-card{
    bottom:-10rem;
}
.reason-content-box img{
}
.reason-content-text{
    border:3rem solid #849fb4;
    color:#849fb4;
    width:100%;
    overflow: visible;
    padding: 25rem 10rem 25rem 200rem;
    letter-spacing: 2rem;
}
@media screen and (max-width:780px){
    .reason-content-text{
        padding: 32rem;
    }
}
.reason-content-text.three-text{
    padding: 45rem 45rem 45rem 430rem;
    color:#fff;
}
.reason-content-text.three-text .title.h3{
    font-size:40rem;
}
@media screen and (max-width: 780px){
    .reason-content-text.three-text{
        padding: 38rem;
    }
}
.reason-content-text .three-p{
    text-indent: 0;
    padding-left: 0;
}
.reason-content-text .h3{
    margin-bottom:10rem;
}
@media screen and (max-width:780px){
    .reason-content-text .h3{
        font-size:40rem;
    }
}
.reason-content-text.three-text p{
    font-size:25rem;
    line-height:2;
}
@media screen and (max-width:780px){
    .reason-content-text.three-text p{
        font-size:31rem;
}
}
.reason-content-text p.title{
    font-size:30rem;
}
@media screen and (max-width:780px){
    .reason-content-text p.title{
        font-size:40rem;
    }
}
.reason-content-text p{
    font-size:18rem;
    line-height:1.75;
}
@media screen and (max-width:780px){
    .reason-content-text p{
        font-size:30rem;
        text-indent: -1em;
        padding-left: 1em;
    }
}
.reason-arrow{
    width:100%;
    height:auto;
    display:flex;
    justify-content: center;
    align-items: center;
}
.down-arrow{
    display:flex;
    align-items:center;
    position:relative;
    left:-5rem;
    width:60rem;
    height:30rem;
    margin:50rem 0;
}
@media screen and (max-width:780px){
    .down-arrow{
        margin:30rem 0;
    }
}
.down-arrow::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 30rem solid transparent;
    border-right: 30rem solid transparent;
    border-top: 45rem solid #819EB1;
}
.reason-data-title{
    display:flex;
    justify-content: center;
    margin-top:100rem;
}
@media screen and (max-width:780px){
    .reason-data-title{
        margin-top:80rem;
    }
}
.reason-data-title .h3{
    text-align:center;
}
@media screen and (max-width:780px){
    .reason-data-title .h3{
        font-size:40rem;
        padding: 0 45rem;
    }
}
.reason-data-title .h3 span.under-line{
    background: linear-gradient(transparent 70%, #849fb4 30%);
    line-height:40rem;
    font-size:40rem;
}

.reason-data .data-text{
    margin-top:40rem;
    font-size:36rem;
    line-height:2;
/*    font-weight:500;*/
}
@media screen and (max-width:780px){
    .reason-data .data-text{
        font-size:30rem;
        text-indent: -1em;
        padding-left: 1em;
    }
}
.reason-data .data-img {
    margin-top: 40rem;
    height:713rem;
}
@media screen and (max-width:780px){
    .reason-data .data-img{
        height:700rem;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズにする */
        white-space: nowrap; /* 画像が改行されないようにする（複数画像の場合） */
    }
}
.reason-data .data-img img{
    height:713rem;
    width:auto;
}
@media screen and (max-width:780px){
    .reason-data .data-img img{
        max-width: none; /* これが重要！画像を親要素の幅で制限しないようにする */
        height: 690rem;
        display:inline-block;
    }
}
/*ーーーーーーーーーーーーーーーランクアップーーーーーーーーーーーーーーーーーー*/

.rank-up{
    margin-top:100rem;
}
.rank-up-container{
    display:flex;
    flex-direction:column;
}
.rank-up-title{
    padding:10rem 30rem;
    border-left: #003865 10rem solid;
    letter-spacing:7rem;
}
@media screen and (max-width:780px){
    .rank-up-title{
        padding:0 20rem;
    }
    .rank-up-title .h3{
        font-size:40rem;
        letter-spacing:2rem;
    }
}
.rank-up-img{
    margin-top: 50rem;
}
@media screen and (max-width:780px){
    .rank-up-img{
        height:700rem;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズにする */
        white-space: nowrap; /* 画像が改行されないようにする（複数画像の場合） */
    }
}
.rank-up-img  img{
    width:100%;
    height:auto;
}
.rank-up-note{
    margin-left: 17rem;
}
@media screen and (max-width:780px) {
    .rank-up-img img {
        max-width: none; /* これが重要！画像を親要素の幅で制限しないようにする */
        height: 690rem;
        width: auto;
        display: inline-block;
    }
    .rank-up-note {
        margin-top: 20rem;
        margin-left: 22rem;
        font-size: 20rem;
    }
}

@media screen and (max-width: 780px) {
    .rank-up-note {
        text-indent: -3em;
        padding-left: 2.5em;
    }
}
/*ーーーーーーーーーーーーーーーーー教材ーーーーーーーーーーーーーーーーーーー*/
/*
.materials {
    margin-top: 100rem;
}
.materials-title{
    padding:10rem 30rem;
    border-left: #003865 12rem solid;
    letter-spacing:7rem;
    margin-bottom:42rem;
}
.materials-chapter{
    background-color:#003865;
    color:#fff;
    font-size:30rem;
    margin-bottom:23rem;
}
.materials-chapter .chapter-toggle{
    display: flex;
    background-color: #fff;
    color: #003865;
    padding:0 15rem;
}
.materials-chapter-title{
    padding:20rem;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    cursor: pointer; !* クリック可能であることを示すカーソル *!
}
.materials-note{
    margin-top:20rem;
}
.chapter-section-list{
    display:none;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #edeef0;
    color:#003865;
    padding:20rem;
}
.list-text{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    padding:30rem;
}
.list-text p{
    margin-right:100rem;
}
*/
.materials {
    margin-top: 100rem;
}
.materials-title {
    padding: 10rem 30rem;
    border-left: #003865 10rem solid;
    letter-spacing: 7rem;
    margin-bottom: 42rem;
}

@media screen and (max-width: 780px) {
    .materials-title {
        padding: 0 20rem;
    }

    .materials-title .h3 {
        font-size: 40rem;
        letter-spacing: 2rem;
    }
}
.materials-chapter {
    background-color: #003865;
    color: #fff;
    font-size: 30rem;
    margin-bottom: 23rem;
}

.materials-chapter .chapter-toggle {
    position: relative; /* ★追加: z-indexが機能するように */
    z-index: 3; /* ★追加: 擬似要素よりさらに手前 */
    display: flex;
    background-color: #fff;
    color: #003865;
    padding: 0 15rem;
    cursor: pointer;
    font-size: 25rem;
}

.materials-chapter-title {
    padding: 20rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.materials-chapter-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* タイトル内のテキストやボタンより手前 */
    cursor: pointer; /* クリック可能であることを示す */
    /* background-color: rgba(255, 0, 0, 0.1); /* デバッグ用: クリック領域を確認できる */
}

.materials-chapter-title p {
    position: relative; /* ★追加: z-indexが機能するように */
    z-index: 3; /* ★追加: 擬似要素よりさらに手前 */
    margin: 0;
    font-size: 30rem;
    white-space: pre;
}

@media screen and (max-width: 780px) {
    .materials-chapter-title p {
        font-size: 22rem;
    }
}
.materials-note {
    margin-top: 20rem;
}

@media screen and (max-width: 780px) {
    .materials-note {
        text-indent: -3em;
        padding-left: 3em;
    }
}
.chapter-section-list {
    height: 0; /* JSでアニメーションするために初期値を0に設定 */
    /*overflow: hidden; !* コンテンツがはみ出さないように隠す *!*/
    background-color: #edeef0;
    color: #003865;
    padding: 0 20rem; /* JSで上下パディングをアニメーションさせるため、初期の上下を0に */
    box-sizing: border-box;
    display: flex; /* Flexboxレイアウト自体は常に適用 */
    flex-wrap: wrap;
    flex-direction: row;
}

.list-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5rem 0; /* list-textの上下パディングはそのまま */
    width: 100%;
    box-sizing: border-box;
}

.list-text p {
    opacity: 0; /* ★JSでフェードインさせるために初期は透明 */
    transform: translateY(20rem); /* ★JSで上からスライドインさせるために少し下にずらす */
    margin-right: 100rem;
    margin-bottom: 20rem;
    border: none;
    outline: none;
}

@media screen and (max-width: 780px) {
    .list-text p {
        font-size: 22rem;
    }
}
/*.list-text p:last-child,
.list-text p:nth-last-child(2) {
    margin-right: 0;
}*/
/*ーーーーーーーーーーーーーーーーーーセキュリティーーーーーーーーーーーーーーーーーーーー*/
.security {
    margin-top: 100rem;
}

.security-container {
    display: flex;
    flex-direction: column;
}

.security-title {
    padding: 0 30rem;
    border-left: #003865 10rem solid;
    letter-spacing: 7rem;
}

@media screen and (max-width: 780px) {
    .security-title {
        padding: 0 20rem;
    }
}
.security-title .h3 {
    font-size:37rem;
    font-weight:600;
    margin-bottom: 10rem;
}

@media screen and (max-width: 780px) {
    .security-title .h3 {
        font-size: 40rem;
        letter-spacing: 2rem;
    }
}
.security-title p {
    font-size: 27rem;
    font-weight: 500;
}

@media screen and (max-width: 780px) {
    .security-title p {
        font-size: 30rem;
    }
}
.security-text {
    font-size: 34rem;
    line-height: 2;
    margin-top: 20rem;
    text-indent: -1em;
    padding-left: 1em;
}

@media screen and (max-width: 780px) {
    .security-text {
        font-size: 30rem;
    }
}
/*ーーーーーーーーーーーーQAーーーーーーーーーーーーーーーー*/
.question {
    margin-top: 100rem;
}

.QA-q {
    font-weight: 700;
    font-size: 50rem;
}

.QA-a {
    font-weight: 700;
    color: #f0bf56;
    font-size: 50rem;
}

@media screen and (max-width: 780px) {
    .QA-q, .QA-a {
        font-size: 42rem;
        font-family: "MS Gothic", "Osaka-等幅", "BIZ UDゴシック", monospace;
    }
}
.question-container {
    position: relative;
}

.question-title {
    padding: 10rem 30rem;
    border-left: #003865 10rem solid;
    letter-spacing: 7rem;
}

@media screen and (max-width: 780px) {
    .question-title {
        padding: 0 20rem;
    }

    .question-title .h3 {
        font-size: 40rem;
        letter-spacing: 2rem;
    }
}
.question-item {
    font-size: 36rem;
    border-bottom: #003865 3rem dashed;
    line-height: 1.75;
    padding: 25rem 0;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 780px) {
    .question-item {
        font-size: 29rem;
        letter-spacing: 2rem;
        width: 100%;
    }

    .question-item:nth-child(4) {
        border-bottom: none;
    }
}
.question-item span {
    display: inline-block;
}

.question-q, .question-a {
    display: flex;
    align-items: center;
    flex-direction:row;
    gap:40rem;
    text-align:justify;
}
.question-a p{
    font-weight:500;
}
@media screen and (max-width: 780px) {
    .question-q, .question-a {
        gap: 20rem;
        align-items: baseline;
        display: flex;
        text-align:justify;
    }

    .question-q p, .question-a p {
        display: flex;
        flex: 1;
    }
}
.question-back-img {
    position: absolute;
    top: 0;
    right: 10rem;
    z-index: -1;
}

@media screen and (max-width: 780px) {
    .question-back-img {
        display: none;
    }
}
.question-back-img img {
    width: 670rem;
    height: auto;
}

/*ーーーーーーーーーーーーーーコンタクトーーーーーーーーーーーーー*/
.contact {
    margin-top: 100rem;
    margin-bottom: 100rem;
}

@media screen and (max-width: 780px) {
    section.contact {
        margin: 100rem 0;
    }
}
.contact-container {
    display: flex;
    background-color: #003865;
    color: #fff;
    flex-direction: column;
    position: relative;
    padding: 80rem 0;
}

@media screen and (max-width: 780px) {
    .contact-container {
        padding: 80rem;
    }
}
.contact-container .contact-img {
    position: absolute;
    top: 0;
    right: 250rem;
    width: auto;
    z-index: 1;
    opacity: 0.1;
}

@media screen and (max-width: 780px) {
    .contact-container .contact-img {
        right: 0;
        top: 50rem;
    }
}
.contact-container .contact-img img {
    height: 400rem;
}

@media screen and (max-width: 780px) {
    .contact-container .contact-img img {
        height: 590rem;
    }
}
.contact-text {
    display: flex;
    justify-content: center;
    margin-bottom: 60rem;
    font-size: 40rem;
    font-weight: 400;
    z-index: 10;
    text-align: center
}

@media screen and (max-width: 780px) {
    .contact-text {
        line-height: 2;
        margin-bottom: 30rem;
    }
}
.contact-btn-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30rem;
    z-index: 10;
}

@media screen and (max-width: 780px) {
    .contact-btn-wrapper {
        flex-direction: column;
        align-items: center;
    }
}
.contact-btn-wrapper .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rem 0;
    font-size: 30rem;
    letter-spacing: 3rem;
    width: 460rem;
    border: #003865 2rem solid;
    color: #003865;
}

@media screen and (max-width: 780px) {
    .contact-btn-wrapper .btn {
        font-size: 30rem;
        width:375rem;
    }
}
.contact-btn {
    background-color: #fff;
}

.download-btn {
    background-color: #f0bf56;
}

/*ーーーーーーーーフッターーーーーーーーーー*/
footer {
    background-color: #edeef0;

}

.f-title {
    color: #839db2;
    font-size: 30rem;
}

.footer-container {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    margin-top: 65rem;
}

.footer-logo-img {
    width: 500rem;
}

@media screen and (max-width: 780px) {
    .footer-logo-img {
        width: 470rem;
    }
}
.footer-logo-img img {
    width: 500rem;
}

@media screen and (max-width: 780px) {
    .footer-logo-img img {
        width: 470rem;
    }
}
.footer-company-name {
    font-size: 32rem;
    margin-top: 60rem;
}

@media screen and (max-width: 780px) {
    .footer-company-name {
        font-size: 42rem;
        margin-top:30rem;
    }
}
.footer-company-address {
    margin-top: 40rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.footer-company-address .phone-title{
    font-size:37rem;
    margin-bottom:10rem;
}
@media screen and (max-width: 780px) {
    .footer-company-address {
        margin-top: 50rem;
        flex-direction: column;
    }
    .footer-company-phone-box .phone-number{
        font-size:25rem;
    }
    .footer-company-phone-box .phone-title{
        font-size:42rem;
        margin-bottom: 35rem;
    }
    .footer-company-address-box{
        margin-top:70rem;
    }
}
.footer-company-address p {
    font-size: 30rem;
}

@media screen and (max-width: 780px) {
    .footer-company-address p {
        font-size: 24rem;
    }
}
.footer-company-address .f-title {
    margin-bottom: 10rem;
}

@media screen and (max-width: 780px) {
    .footer-company-address .f-title {
        font-size: 42rem;
        margin-bottom: 35rem;
    }
}
.footer-company-contents {
    display: flex;
    flex-direction: row;
    margin-top: 70rem;
    font-size: 20rem;
}

@media screen and (max-width: 780px) {
    .footer-company-contents {
        flex-direction: column;
    }
}
.footer-company-contents .text-title {
    font-size: 32rem;
}

@media screen and (max-width: 780px) {
    .footer-company-contents .text-title {
        font-size: 30rem;
        letter-spacing: 7rem;
    }
}
.footer-company-contents .f-title {
    margin-bottom: 10rem;
}

@media screen and (max-width: 780px) {
    .footer-company-contents .f-title {
        font-size: 35rem;
    }
}
.footer-company-mission {
    flex: 3;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 780px) {
    .footer-company-mission {
        flex: 1;
        margin-bottom: 50rem;
    }
}
.footer-company-mission .fw500 {
    font-weight: 500;
    letter-spacing: 1rem;
    line-height: 1.75;
    margin-top: 15rem;
}

@media screen and (max-width: 780px) {
    .footer-company-mission .fw500 {
        font-size: 24rem;
    }
}
.footer-business {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.footer-vertical-line {
    width: 2rem;
    height: auto;
    background-color: #003865;
    margin: 0 25rem;
}

@media screen and (max-width: 780px) {
    .footer-vertical-line {
        display: none;
    }
}
.copyright {
    padding: 90rem 0;
    letter-spacing: 3rem;
}

.youtube_link-container{
    display: flex;
    flex-direction: row;
    height:600rem;
    justify-content: center;
    gap: 40rem;
}

.youtube_link-img{
    gap: 5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.youtube_link-img img {
    height: 290rem;
}