@charset "UTF-8";

@media screen and (max-width:768px){
    body{
        margin: 0;
        padding: 0;
        color: var(--right-black);
    }
    .wrapper{
        padding: 8% 4%;
    }
    .sectitle-Container{
        margin-bottom: 1.5rem;
    }
    .en-Title{
        font-size: 2rem;
    }
    .onlysp{
        display: block;
    }
    .onlypc{
        display: none;
    }

    /*=========== header ===========*/
    #site-Title{
        font-size: 0.9rem;
    }
    #header .cta-Button{
        padding: 0.3rem 0.8rem;
    }

    /*=========== FV ===========*/
    #fv.wrapper{
        padding: 4% 4% 8%;
    }
    #fv{
        font-size: 1.2rem;
        background-position: 30% -7%;
        background-size: 165%;
    }
    #fv .fv-Maintitle{
        font-size: 1.2rem;
    }
    #fv .sub .orange{
        font-size: 2.2rem;
    }
    #fv .main{
        font-size: 1.2rem;
        font-weight: 800;
    }

    /* image position */
    #fv .position-Absolute{
        top: 42%;
        width: 42%;
    }

    #fv .fv-explanation{
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
    }
    #fv .fv-explanation .text-Container{
        width: 100%;
    }
    #fv .fv-explanation .text-Container .title{
        border-bottom: none;
        background-image: radial-gradient(var(--green) 3px, transparent 3px);
        background-position: bottom; /* 下側に配置 */
        background-size: 13px 10px;   /* ドットの間隔（横10px、縦5px） */
        background-repeat: repeat-x; /* 横方向に繰り返す */
    }
    #fv .fv-explanation .text-Container .text{
        font-size: 0.9rem;
    }
    #fv .fv-explanation img{
        width: 60%;
    }



    /*=========== 固定ボタン ===========*/
    #fixed-Btn {
        right: 1rem;
        bottom: 1rem;
    }

    /*=========== INTRODUCTION ===========*/
    #introduction{
        border-radius: 18px 0 0 18px;
    }
    #introduction li{
        padding-bottom: 0.6rem;
        border-bottom: none;
        background-image: radial-gradient(var(--background) 3px, transparent 3px);
        background-position: bottom;
        background-size: 13px 10px;
        background-repeat: repeat-x;
        font-size: 1rem;
        margin: 0 auto 1.2rem;
        width: 90%;
    }
    #introduction .position-Lefttop{
        position: relative;
        top: 0;
        left: 0;
        width: 48%;
    }
    #introduction .position-Rightbottom{
        position: absolute;
        bottom: 4%;
        right: 12%;
        width: 23%;
    }

    /*=========== ABOUT SERVICE ===========*/
    #service .list{
        flex-direction: column;
    }
    #service .service-Content{
        width: 100%;
        border-radius: 6px;
    }
    #service .service-Content .title{
        border-bottom: none;
        background-image: radial-gradient(var(--green) 3px, transparent 3px);
        background-position: bottom;
        background-size: 13px 10px;
        background-repeat: repeat-x;
        margin: 0 4% 1rem;
        font-size: 1rem;
        padding-bottom: 0.8rem;
    }
    #service .service-Content .title.line-Height{
        line-height: 1.8;
    }
    #service .service-Content .text{
        font-size: 0.85rem;
    }
    #service .arrow{
        width: 7%;
        transform: rotate(90deg);
        margin: 0 auto;
    }

    /*=========== 「アドベンチャー6」とは ===========*/
    #about{
        border-radius: 0 18px 18px 0;
    }
    #about .lifeskill-explanation .title{
        top: -10%;
    }
    #about .lifeskill-explanation .text{
        padding-top: 2.5rem;
    }
    #about .lifeskill-Container .lifeskill-Title{
        font-size: 1.1rem;
    }
    #about .lifeskill-Container .list{
        flex-direction: column;
    }
    #about .lifeskill-Container li{
        width: 100%;
    }
    #about .lifeskill-Container li img{
        height: 30%;
    }
    #about .lifeskill-Container li:last-child img{
        height: 30%;
    }
    #about .lifeskill-Container .text-Container .title{
        padding-bottom: 0.8rem;
        border-bottom: none;
        background-image: radial-gradient(var(--green) 3px, transparent 3px);
        background-position: bottom;
        background-size: 13px 10px;
        background-repeat: repeat-x;
    }
    #about .lifeskill-Container .text-Container .text{
        font-size: 0.9rem;
    }

    /*=========== FEATURE ===========*/
    #feature{
        border-radius: 18px 18px 0 0;
    }
    #feature .feature-Content{
        width: calc(50% - 10px);
        border-radius: 6px;
    }
    #feature .feature-Content .title{
        border-bottom: none;
        background-image: radial-gradient(var(--green) 3px, transparent 3px);
        background-position: bottom;
        background-size: 13px 10px;
        background-repeat: repeat-x;
        margin: 0 4% 1rem;
        font-size: 1rem;
        padding-bottom: 0.8rem;
    }
    #feature .feature-Content .title.line-Height{
        line-height: 1.8;
    }
    #feature .feature-Content .text{
        font-size: 0.9rem;
    }

    /*=========== BENEFITS ===========*/
    #benefits .list{
        flex-direction: column;
        gap: 20px;
    }
    #benefits li{
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }
    #benefits .text-Container{
        width: calc(70% - 10px);
    }
    #benefits img{
        width: calc(30% - 10px);
        height: calc(30% - 10px);
    }
    #benefits li .benefits{
        font-size: 1rem;
        text-align: left;
    }

    /*=========== PROGRAM ===========*/

    /*=========== TRAINING LINEUP ===========*/
    #lineup.wrapper{
        padding-bottom: 11%;
    }
    .responsive-Table-Img {
        width: 800px; 
        max-width: none;
    }

    /*=========== TRAINING LOCATION ===========*/
    #location.wrapper{
        margin-top: -3%;
    }
    #location{
        border-radius: 18px 18px 0 0;
    }
    #location .list{
        flex-wrap: wrap;
    }
    #location li{
        width: calc(50% - 10px);
    }

    /*=========== APPLICATION ===========*/
    #application .list{
        flex-direction: column;
        margin-top: 0;
    }
    #application .application-Content{
        width: 100%;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 1.5rem 4%;
    }
    #application .application-Content img{
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0);
        width: calc(34% - 10px);
    }
    #application .application-Content:nth-child(3) img,
    #application .application-Content:nth-child(5) img{
        transform: translate(0);
    }
    #application .application-Text{
        width: calc(66% - 10px);
    }
    #application .arrow{
        width: 7%;
        transform: rotate(90deg);
        margin: 0 auto;
    }

    /*=========== FAQ ===========*/

    /*=========== CONTACT ===========*/
    #contact{
        flex-direction: column-reverse;
        border-radius: 18px 18px 0 0;
        text-align: center;
    }
    #contact img{
        width: 85%;
        margin: 0 auto;
    }
    #contact .contact-Container{
        width: 100%;
        margin-bottom: 2rem;
    }
    #contact .contact-Container .contact-Text{
        font-size: 1.3rem;
    }

    /*=========== footer ===========*/
    #footer.wrapper{
        padding: 4%;
    }
    #footer{
        border-radius: 18px 18px 0 0;
        margin-top: -5%;
    }


    
    /*=========== contact 入力画面 ===========*/
    #contact .text{
        text-align: left;
    }
    #contact .tel-Container .tel-Button{
        padding: 0.5rem 3rem;
    }
    #contact #button{
        width: 180px;
    }

    /*=========== contact 確認画面 ===========*/
    #confirm .container{
        padding: 0;
    }
    #confirm .back{
        margin-right: 0;
        margin-bottom: 1rem;
        color: var(--right-black);
    }

}