@charset "UTF-8";
body,html{
    margin: 0;
    font-family: "Noto Sans Jp", sans-serif;
    font-weight: 700;
    font-style: normal;
    width: 100%;
    overflow-x: hidden;
}

/* 画面最大横幅指定（髙木指定分） */
/* --------------------------- */
.wrapper ,main,footer{
    max-width: 550px;
    width: 100%;
    margin: 0 auto;
    background-color: #F5FAFE;
}

.wrapper{
    box-shadow: rgba(0, 0, 0, 0.48) 2px 0px 2px 0px;
}

main{
    background-image: url("../img/contents_bg.png");
    background-size: 100% auto;
}

main img{
    width: 100%;
}

body{
    background-image: url("../img/bg.jpg?02");
    /* height: 100%; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    /* background-size: 100% auto; */
}

@media screen and (max-width: 549px) {
    body{
        background-image: none;
    }
}
/* --------------------------- */

/* 非表示 */
.d-none{
    display: none;
}

/* ホバーで半透明にする↓ */
.translucent:hover{
    opacity: 0.6;
}
.underine:hover{
    text-decoration: underline;
}
/* ホバーで反転↓ */
.orange.inversion:hover{
    background-color: #fff;
    color: #F76E44;
    font-weight: 600;
    transition: 0.5s;
    outline: 1px solid #F76E44;
}
.yellow.inversion:hover{
    background-color: #fff;
    color: #F8AD36;
    font-weight: 600;
    transition: 0.5s;
    outline: 1px solid #F8AD36;
}
.btn.inversion.yellow:hover::after {
    background: #F8AD36;
}
.btn.inversion.yellow:hover::before {
    border-top: 3px solid #F8AD36;
    border-right: 3px solid #F8AD36;
}
.no-wrap{
    white-space: nowrap;
}
.no-content::after,
.no-content::before{
    display: none;
}


/* LP用CSS */
/* px指定時、「min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100」での指定推奨 */
/* 共通 */
p{
    font-size: min(2.5vw, 16px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.center{
    margin: 0 auto;
}
.text_center{
    text-align: center;
}
.flex_box{
    display: flex;
}
.lenflex_box{
    display: flex;
    flex-direction: column;
}
.relative{
    position: relative;
}


/* mainview */
.mainview{
    padding-top: 25%;
}
.catch_box{
    width: 80%;
    margin-inline: auto;
}
.top_text{
    color: #fff;
    font-size: min(2.7vw, 15px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-bottom: 76%;
    padding: 2% 4%;
}

/* .fcircle_box{
    justify-content: center;
    width: 89%;
    gap: 14%;
}
.fcircle_box::before{
    content: "";
    position: absolute;
    background-image: url("../img/item_04.png");
    background-size: contain;
    background-repeat: no-repeat;
    top: -131%;
    left: 33.5%;
    width: 23.5%;
    height: 186%;
}
.fcircle{
    align-items: center;
    justify-content: center;
    background-color: #EFE3BB;
    width: 47%;
    border-radius: 50%;
    aspect-ratio: 1/1;
}
.fcircle p:first-child{
    position: relative;
    color: #AB1700;
    font-size: min(3.1vw, 17px);
    height: min(15.45vw, 85px);
    padding-bottom: 5%;
}
.fcircle.left_circle p:first-child{
    height: min(calc(15.45vw - 2.9vw), calc(85px - 16px));
    margin-top: min(2.9vw, 16px);
}
.fcircle p:first-child::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3%;
    width: min(29.1vw, 160px);
    border-bottom: dashed 1px #AB1700;
    transform: translate(-50%, 0);
}
.fcircle p:first-child .small_font{
    font-size: min(2.55vw, 14px);
}
.fcircle p:first-child .large_font{
    font-size: min(4.54vw, 25px);
}
.fcircle p:last-child{
    padding-top: 5%;
} */
.fcircle_box{
    justify-content: center;
    width: 89%;
    margin-top: 13.5%;
    gap: 12.2%;
}
.fcircle_box::before{
    content: "";
    position: absolute;
    background-image: url("../img/item_04.png?02");
    background-size: contain;
    background-repeat: no-repeat;
    top: -137%;
    left: 33.2%;
    width: 34.5%;
    height: 191%;
    z-index: 10;
}
.fcircle img{
    width: min(38.182vw, 210px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}

.fcircle_text{
    position: absolute;
    font-size: min(1.82vw, 10px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    top: 56%;
    left: 50.5%;
    width: max-content;
    transform: translate(-50%, 0);
    line-height: 1.6;
    letter-spacing: min(0.0364vw, 0.2px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    font-weight: bold;
}

.try{
    color: #ffffff;
    font-size: min(4.18vw, 23px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}

.recommend{
    width: 74%;
    margin-top: 28.5%;
}
.recommend p{
    color: #ffffff;
    font-size: min(2.7vw, 15px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    background-color: #0665A6;
    margin-bottom: 1.9%;
    padding: 2.2% 0;
    border-radius: min(1.82vw, 10px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    font-family: "Zen Kaku Gothic New", sans-serif;
}
.recommend p:last-child{
    padding-right: min(0.91vw, 5px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-bottom: 0;
}
.recommend p span{
    font-size: min(2vw, 11px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    font-weight: 700;
    margin-left: min(0.5455vw, 3px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}


/* course */
.course{
    margin-bottom: min(10.7vw, 59px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.course_box{
    background-color: #ffffff;
    width: 85.5%;
    margin: 7% auto 0 7.7%;
    padding-top: 5.4%;
    border-radius: min(1.455vw, 8px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    box-shadow: rgb(0 0 0 / 0.3) min(0.364vw, 2px) min(0.364vw, 2px) min(0.5455vw, 3px) min(0.5455vw, 3px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}

.box_title{
    color: #AB1700;
    font-size: min(3.27vw, 18px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.box_title img{
    width: 63.45%;
    margin-left: 0.6%;
}
.box_title::before,
.box_title::after{
    content: "";
    position: absolute;
    background-color: #AB1700;
    top: 57%;
    width: min(10vw, 55px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    height: min(0.18vw, 1px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.box_title::before{
    left: 4.3%;
}
.box_title::after{
    right: 4.3%;
}

.course_box .box_content{
    width: 92%;
    padding-right: 1%;
}
.course_box .upper{
    margin: min(3.64vw, 20px) 0 0; /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    padding-bottom: min(2.67vw, 14.7px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    border-bottom: dotted min(0.18vw, 1px) #AB1700; /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    gap: 2.4%;
}
.course_box .lower{
    margin: min(4.5455vw, 25px) 0 min(11.1vw, 61px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    gap: 0.4%;
}
.course_box .box_content img{
    object-position: top;
    object-fit: contain;
    width: 18%;
    height: min(29.27vw, 161px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.course_box .box_content .lower img{
    width: 22.6%;
    margin-left: max(-2.18vw, -12px);
    height: min(38.182vw, 177px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.course_box .box_content .box_content_text{
    width: 80%;
    margin-top: 0.8%;
}
.course_box .box_content .box_content_text .target{
    color: #AB1700;
    font-size: min(2.55vw, 14px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.course_box .box_content .box_content_text .course_name{
    font-size: min(2.5455vw, 14px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin: min(1.4vw, 7.7px) 0 min(1.455vw, 8px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    font-family: "Zen Kaku Gothic New", sans-serif;
    letter-spacing: max(-0.127vw, -0.7px);
    font-weight: 700;
}
.course_box .box_content .lower .box_content_text .course_name{
    margin-top: min(1.51vw, 8.3px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.course_box .box_content .box_content_text .course_name span{
    color: #0071BC;
    font-size: min(3.273vw, 18px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-left: min(0.91vw, 5px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    vertical-align: text-top;
    font-family: "Zen Kaku Gothic New", sans-serif;
    letter-spacing: max(-0.22vw, -1.2px);
    font-weight: 700;
}
.course_box .box_content .box_content_text .target_detail{
    font-size: min(2.36vw, 13px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    background-color: #EDE4C8;
    margin: min(1.1vw, 6px) min(8.64vw, 47.5px) 0 min(0.5455vw, 3px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    padding: min(1.2vw, 6.6px) 0 min(0.91vw, 2px) min(6.5455vw, 36px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
}
.course_box .box_content .lower .box_content_text .target_detail{
    padding-left: min(6.73vw, 37px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    letter-spacing: min(0.036vw, 0.2px);
}
.course_box .box_content .upper .box_content_text::after{
    content: "";
    position: absolute;
    background-image: url(../img/30off.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: -7%;
    right: -0.3%;
    width: min(17.3vw, 95px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    height: min(17.3vw, 95px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.course_box .box_content .lower .box_content_text::after{
    content: "";
    position: absolute;
    background-image: url("../img/50off.png");
    background-size: contain;
    background-repeat: no-repeat;
    top: -3.5%;
    right: -0.3%;
    width: min(17.3vw, 95px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    height: min(17.3vw, 95px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.course_box .box_content .box_content_text .item_text3{
    width: 91.5%;
    height: auto;
    margin-top: min(2.36vw, 13px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-left: min(0.36vw, 2px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.upper .box_content_text img.phrase{
    width: min(17.455vw, 96px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    height: auto;
}
.lower .box_content_text img.phrase{
    margin-left: 0; /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    width: min(28vw, 154px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    height: auto;
    margin-top: min(0.5455vw, 3px);
    margin-left: min(0.73vw, 4px);
}
.course_box a{
    position: absolute;
    /* color: #ffffff;
    background: linear-gradient(#fcd599, #ff5d00); */
    left: 51.5%;
    width: 86%;
    bottom: -26.7%;
    padding: min(3.64vw, 20px) 0; /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    /* border-radius: min(2.73vw, 15px); */
    transform: translate(-50%, -50%);
    /* text-decoration: none;
    box-shadow: min(0.364vw, 2px) min(0.364vw, 2px) min(1.27vw, 7px) min(0.364vw, 2px) #7d7d7d; */
}


.course_box a p{
    font-size: min(5.64vw, 31px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-right: min(6vw, 33px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
        font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
}

.course_box a p span{
    font-size: min(4.73vw, 26px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin: 0 min(1.1vw, 6px) 0 min(1vw, 5px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}


/* contact */
.contact{
    padding-bottom: min(3.891vw, 21.4px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.tel_box{
    background: linear-gradient(90deg, #EDE4C8 0%, #EDE4C8 29%, #ffffff 29%, #ffffff 100%);
    width: 85.5%;
    border-radius: min(1.455vw, 8px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    box-shadow: rgb(0 0 0 / 0.3) min(0.364vw, 2px) min(0.364vw, 2px) min(0.5455vw, 3px) min(0.5455vw, 3px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.tel_box .left_content{
    color: #AB1700;
    font-size: min(2.73vw, 15px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    width: min(39.455vw, 217px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin: min(4vw, 22.5px) min(3.1vw, 17px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    font-family: "Zen Kaku Gothic New", sans-serif;
    letter-spacing: max(-0.027vw, -0.15px);
    font-weight: 700;
}
.tel_box .right_content{
    width: 100%;
    margin: min(3.091vw, 17px) 0 min(2.73vw, 15px) min(2.5455vw, 14px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.tel_box .right_content::before{
    content: "";
    position: absolute;
    background-image: url("../img/icon_tell.png");
    background-size: contain;
    background-repeat: no-repeat;
    top: 13%;
    left: -4%;
    width: min(3.455vw, 19px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    height: min(4.364vw, 24px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
.tel_box .right_content div a{
    color: #000000;
    font-size: min(5.1vw, 28px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    text-decoration: none;
    font-family: "Zen Kaku Gothic New", sans-serif;
    letter-spacing: min(1.0182vw, 5.6px);
    font-weight: 700;
}
.tel_box .right_content p{
    font-size: min(1.64vw, 9px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    font-family: "Zen Kaku Gothic New", sans-serif;
    letter-spacing: max(-0.073vw, -0.4px);
    margin-right: min(6vw, 33px);
    padding-top: 2%;
    font-weight: 700;
}


/* footer */
footer{
    padding: 1% 0;
    gap: min(2.564vw, 14.1px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
footer img {
    width: 69%;
    padding-left: 2.7%;
    padding-bottom: min(1.82vw, 10px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
}
footer a {
    color: #000000;
    font-size: min(2.18vw, 12px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-left: 0.5%;
    /* margin-bottom:  min(2.5455vw, 14px); */
    letter-spacing: max(-0.118vw, -0.65px);
    font-weight: 500;
}
footer p{
    font-size: min(2.18vw, 12px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-top: min(2.5455vw, 14px); /* min(〇〇vw, △△px)：〇〇 = △△/550(最大表示幅)*100 */
    margin-left: 1%;
    letter-spacing: min(0.0364vw, 0.2px);
    padding-bottom: min(3.64vw, 20px);
    font-weight: 500;
}



/**********************************************
 * modal
**********************************************/
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,30%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 100;
  }
  /*モーダル本体の擬似要素の指定*/
  .modal-container:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  /*モーダル本体に「active」クラス付与した時のスタイル*/
  .modal-container.active{
    opacity: 1;
    visibility: visible;
  }
  /*モーダル枠の指定*/
  .modal-body{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 800px;
    width: 96%;
  }
  /*モーダルを閉じるボタンの指定*/
  .modal-close{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -37px;
    right: 5px;
    width: 20px;
    height: 24px;
    font-size: 22px;
    /* font-weight: 100; */
    color: #fff;
    cursor: pointer;
  }
/*モーダル内のコンテンツの指定*/
.modal-content{
    background: #fff;
    margin-bottom: -14px;
    height: calc(76vh + 10px);
    padding: 10px;
    padding-bottom: 0;
    overflow: hidden;
    border-radius: 20px;
}
.modal-content img{
    width: 60%;
    margin: 0 auto ;
}
.modal_title{
    margin-top: 20px;
    font-size: 16px;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}
.modal_text{
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2;
}
.modal_text .title{
    font-weight: 600;
}
  /* ここまでmodal↑ */
  /* modalの中のスクロール↓ */
  .modal_scroll{
    height: 69vh;
    position: relative;
    overflow: auto;
    padding: 14px 40px 30px 9px;
  }
.modal_scroll .ps__thumb-y {
    background-color: #F76E44;
    border-radius: 8px;
    width: 14px;
    right: 1px;
    -webkit-transition: none;
}
.modal_scroll .ps__rail-y.ps--clicking .ps__thumb-y,
.modal_scroll .ps__rail-y:focus>.ps__thumb-y,
.modal_scroll .ps__rail-y:hover>.ps__thumb-y {
    background-color: #F76E44;
    width: 14px;
}
.modal_scroll .ps--active-y > .ps__rail-y {
    background-color: #F76E44;
}
.modal_scroll .ps--active-x>.ps__rail-x, .ps--active-y>.ps__rail-y {
    background-color: #EFECE9!important;
    width: 16px;
    opacity: 1!important;

}
.modal_scroll .ps--scrolling-y>.ps__rail-y{
    opacity: 1;
}
@media screen and (min-width: 736px) {
  /* modal */
    .modal-body{
        width: clamp(700px, 95%, 1000px);
        max-width: 1000px;
        min-width: 700px !important;
        padding: 0;
        position:fixed;
        left: 50%;
        top: 55%;
        transform: translateX(-50%) translateY(-50%);
        margin-bottom: 10%;
    }

    .modal-close{
        top: -48px;
        right: -2px;
        width: 25px;
        height: 28px;
        font-size: 40px;
    }
    .modal-content{
        height: 61vh;
        margin-bottom: 10vh;
    }
    .modal_scroll{
        height: 100%;
        max-height: 50vh;
        padding: 20px 40px 30px 60px;
    }
}