@charset "utf-8";
/*fv*/
#fv{ padding-top: 30px;}
#fv #fv_in{ background: url("../images/fv/bg.png") center top repeat-x #d2e6f9; text-align: center; padding-top: 1px;}
#fv #fv_in h1{ margin-top: -15px;}
#fv #fv_in .att{ max-width: 1060px; margin: auto; padding: 20px 0;}
#fv #fv_in .att ul{ display: flex; flex-wrap: wrap; justify-content: center; font-size: 0.65rem; gap: 0.5em 1em;}
@media screen and (max-width:768px){
#fv{ padding-top: 5vw;}
#fv #fv_in{ background: #d2e6f9; padding: 0;}
#fv #fv_in h1{ margin-top: 0;}
#fv #fv_in .att{ width: 100%; padding: 3.75% 0;}
#fv #fv_in .att ul{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 0.55rem;}
}

/*camp*/
#camp{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: url("../images/cmp/bg.png") center center repeat-x; background-size: auto 100%; padding: 70px 0 40px;}
#camp #camp_tit{ display: flex; flex-direction: column; margin-bottom: 20px;}
#camp #camp_tit figure img{ width: auto; height: 73px;}
#camp #camp_tit p{ display: flex; align-items: center; justify-content: center; margin: 15px auto 0; font-size: 0.9rem; position: relative;}
#camp #camp_tit p:before{ content: ""; width: 15px; height: 15px; background: url("../images/cmp/ico_arrow.png") center center no-repeat; background-size: 100%; position: absolute; left: -30px; top: 50%; transform: translateY(-50%);}
#camp #camp_tit p:after{ content: ""; width: 15px; height: 15px; background: url("../images/cmp/ico_arrow.png") center center no-repeat; background-size: 100%; position: absolute; right: -30px; top: 50%; transform: translateY(-50%);}
#camp #camp_ban{ width: 670px; margin: 0 auto;}
@media screen and (max-width:768px){
#camp{ padding: 10% 3.75% 5%;}
#camp #camp_tit{ width: 100%; margin-bottom: 5%;}
#camp #camp_tit figure{ width: 100%;}
#camp #camp_tit figure img{ width: 100%; height: auto;}
#camp #camp_tit p{ margin: -1.875vw auto 0; font-size: 0.8rem;}
#camp #camp_tit p:before{ width: 2.5vw; height: 2.5vw; left: -5vw;}
#camp #camp_tit p:after{ width: 2.5vw; height: 2.5vw; right: -5vw;}
#camp #camp_ban{ width: 100%;}
}

/*important*/
#important{ margin: 0 25px; display: flex; align-items: center; justify-content: center; background: #fff9e4; box-shadow: inset 5px 8px 25px rgba(224,219,199,0.32); border-radius: 8px;}
#important a{ display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 1rem; line-height: 1em; font-weight: 500; position: relative; padding: 1em 48px;}
#important a:before{ content: ""; width: 24px; height: 24px; background: url("../images/important/ico.png") center center no-repeat; background-size: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#important a:after{ content: ""; width: 24px; height: 24px; background: url("../images/important/ico.png") center center no-repeat; background-size: 100%; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:768px){
#important{ margin: 0 3.75%; box-shadow: inset 5px 8px 25px rgba(224,219,199,0.32); border-radius: 1.25vw;}
#important a{ font-size: 0.8rem; padding: 0.75em 11.25vw;}
#important a:before{ width: 8.75vw; height: 8.75vw; top: -1.875vw; transform: none;}
#important a:after{ width: 8.75vw; height: 8.75vw; top: -1.875vw; transform: none;}
}



/*cv*/
.cv{ margin-top: 80px; background: #335eab; padding: 100px 0 60px; position: relative;}
.cv figure.ico{ margin-top: -140px;}
.cv .cv_box{ width: 750px; padding-bottom: 35px; margin: auto; background: #fff; border-radius: 10px; overflow: hidden; position: relative; z-index: 3;}
.cv .cv_box h2{ margin-bottom: 20px;}
.cv .cv_box h2 img { width: 100%;}
.cv .cv_box .cv_tit{ display: flex; align-items: center; justify-content: center; margin-bottom: 10px;}
.cv .cv_box .cv_tit h3{ display: flex; font-size: 0.9rem; border-bottom: 3px dotted #335eab; padding: 0 0.5em 0.5em;}
.cv .cv_box .cv_tit h3 strong{ font-size: 1.1rem; color: #335eab; background: linear-gradient(to bottom, rgba(255,255,0,0) 0%, rgba(255,255,0,0) 66%, rgba(255,255,0,1) 67%, rgba(255,255,0,1) 100%);}
.cv .cv_box .btns ul{ display: flex; align-items: flex-end; justify-content: center; margin: auto; gap: 30px;}
.cv .cv_box .btns ul li{ width: 290px;}
.cv .cv_box .btns ul li a{ display: block; transition: 0.3s;}
.cv .cv_box .btns ul li a:hover{ opacity: 0.7;}
.cv .cv_box .btns ul li p{ display: flex; align-items: center; justify-content: center; margin-bottom: 0.5em; font-size: 0.9rem; line-height: 1em;}
.cv .cv_box .btns ul li p strong{ position: relative;}
.cv .cv_box .btns ul li p strong:before{ content: ""; width: 2px; height: 100%; background: #000; position: absolute; left: -0.5em; bottom: -0.1em; transform: rotate(-22.5deg);}
.cv .cv_box .btns ul li p strong:after{ content: ""; width: 2px; height: 100%; background: #000; position: absolute; right: -0.5em; bottom: -0.1em; transform: rotate(22.5deg);}

.cv .cv_box .btns ul li.pc a{ position: relative;}
.cv .cv_box .btns ul li.pc a span{ font-size: 1.6rem; line-height: 1em; letter-spacing: 0.05em; color: #fff; font-weight: bold; position: absolute; left: 70px; top: 10px; margin: auto;}
@media screen and (max-width:768px){
.cv{ margin-top: 15%; padding: 20vw 0 5%;}
.cv figure.ico{ margin-top: -27.5vw;}
.cv figure.ico img{ width: 60%;}
.cv .cv_box{ width: 100%; padding-bottom: 5%; border-radius: 1.875vw;}
.cv .cv_box h2{ margin-bottom:5%;}
.cv .cv_box h2 img { width: 100%;}
.cv .cv_box .cv_tit{ margin-bottom: 3.75%;}
.cv .cv_box .cv_tit h3{ font-size: 0.9rem;}
.cv .cv_box .cv_tit h3 strong{ font-size: 1.1rem;}
.cv .cv_box .btns ul{ display: block; width: 92.5%; margin: auto;}
.cv .cv_box .btns ul li{ width: 100%; margin-top: 2.5%;}
.cv .cv_box .btns ul li p{ font-size: 1.1rem;}
.cv .cv_box .btns ul li p strong:before{ left: -0.75em;}
.cv .cv_box .btns ul li p strong:after{ right: -0.75em;}
}



/*メイン*/
section{ width:100%; margin:0 auto; padding: 80px 0;}
.maincontent{ padding:0; margin:0 auto; width:800px;}
@media screen and (max-width:768px){
section{ padding: 10% 0;}
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.5em; letter-spacing: 0;}
@media screen and (max-width:768px){
}


/*switch_nav*/
#switch_nav{ padding: 40px 0; border-bottom: 4px solid #3761ad; overflow: hidden;}
#switch_nav ul{ display: flex; gap: 8px; width: calc(100% + 280px); margin-left: -140px;}
#switch_nav ul li{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; width: 12.5%; border: 3px solid #c7c7c7; color: #ff4c29; font-size: 0.8rem; border-bottom-width: 8px; border-radius: 8px; transition: 0.3s; cursor: pointer;}
#switch_nav ul li.active{ background: #ff4c29; border-color: #c2351a; color: #fff;}
#switch_nav ul li span{ margin: 0 0 4px;}
#switch_nav ul li span img{ height: 24px;}
#switch_nav ul li .on{ display: none;}
#switch_nav ul li .off{ display: block;}
#switch_nav ul li.active .on{ display: block;}
#switch_nav ul li.active .off{ display: none;}
@media screen and (max-width:768px){
#switch_nav{ padding: 10% 0;}
#switch_nav .maincontent{ padding: 0 6.25vw;}
#switch_nav .slick-track{ display: flex;}
#switch_nav ul{ padding: 0; display: block; width: 100%; margin: 0;}
#switch_nav ul li{ flex-direction: column; text-align: center; padding: 1.25vw 0 1.25vw; width: calc(25% - 2vw); margin: 0 1vw; border: 3px solid #c7c7c7; color: #ff4c29; font-size: 0.8rem; line-height: 1.25em; letter-spacing: -0.05em; border-bottom-width: 2.5vw; border-radius: 1.25vw;}
#switch_nav ul li.active{ background: #ff4c29; border-color: #c2351a; color: #fff;}
#switch_nav ul li span{ margin: 0 0 1.25vw;}
#switch_nav ul li span img{ height: 7.5vw;}
}

/*fixed調整*/
#switch_nav{ background: #fff; transition: 0.3s;}
#switch_nav.fixed{ padding: 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
@media screen and (max-width:768px){
#switch_nav.fixed{ padding: 2.5% 0;}
}

/*slick調整*/
@media screen and (max-width:768px){
#switch_nav .slick-prev{ width: 8.75vw; height: 100%; left: -10vw; top: 50%; transform: translateY(-50%); background: #ff4c29; border-radius: 0 1.875vw 1.875vw 0; z-index: 99; transition: 0.3s;}
#switch_nav .slick-prev:before{ content: "前へ"; font-size: 0.8rem; font-weight: 600; opacity: 1.0; writing-mode: vertical-rl; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
#switch_nav .slick-prev:after{ content: ""; width: 3vw; height: 3vw; background: url("../images/switch_nav/prev_arrow.png"); background-size: 100%; position: absolute; left: 50%; bottom: 3.5vw; transform: translateX(-50%);}

#switch_nav .slick-next{ width: 8.75vw; height: 100%; right: -10vw; top: 50%; transform: translateY(-50%); background: #ff4c29; border-radius: 1.875vw 0 0 1.875vw; z-index: 99; transition: 0.3s;}
#switch_nav .slick-next:before{ content: "次へ"; font-size: 0.8rem; font-weight: 600; opacity: 1.0; writing-mode: vertical-rl; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
#switch_nav .slick-next:after{ content: ""; width: 3vw; height: 3vw; background: url("../images/switch_nav/next_arrow.png"); background-size: 100%; position: absolute; left: 50%; bottom: 3.5vw; transform: translateX(-50%);}

#switch_nav .slick-disabled{ background: #c7c7c7; opacity: 1.0;}
}



/*switch_cont*/
#switch_cont{ position: relative;}
#switch_cont .switch_cont_sec{ padding: 0; position: absolute; opacity: 0; height: 0; overflow: hidden; pointer-events: none; transition: 0.3s;}
#switch_cont .switch_cont_sec.active{ position: static; opacity: 1.0; height: auto; pointer-events: all;}

#switch_cont .tit_h2{ display: flex; align-items: center; justify-content: center; margin: 0 auto 50px;}
#switch_cont .tit_h2 h2{ display: flex; align-items: center; justify-content: center; padding: 0.5em 1.5em 0.66em 5em; border: 3px solid #5f7fb8; background: #fff; position: relative;}
#switch_cont .tit_h2 h2 span{ position: absolute; bottom: 0; left: 0.5em;}
#switch_cont .tit_h2 h2 span img{ height: 90px;}
#switch_cont .tit_h2 h2 strong{ font-size: 1.75rem; line-height: 1em; color: #3761ad;}

#switch_cont .controll_btn{ background: #fff9e4; padding: 70px 0;}
#switch_cont .controll_btn ul{ display: flex; flex-wrap: wrap; gap: 40px 20px;}
#switch_cont .controll_btn ul.center{ justify-content: center;}
#switch_cont .controll_btn ul li{ width: calc(50% - 10px); display: flex; align-items: center; justify-content: center; background: #ff9c00; color: #fff; font-size: 1.25rem; font-weight: bold; line-height: 1em; padding: 1.25em 1em; border-bottom: 10px solid #b05b00; border-radius: 10px; position: relative; z-index: 1; cursor: pointer; transition: 0.3s;}
#switch_cont .controll_btn ul li i{ margin-left: 10px;}
#switch_cont .controll_btn ul li i img{ width: 24px;}
#switch_cont .controll_btn ul li:hover{ opacity: 0.7;}
#switch_cont .controll_btn ul li:after{ content: ""; width: 100%; height: 50%; background: #ff8400; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;}
#switch_cont .controll_btn ul li span{ display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: -25px; margin: 0; z-index: 3;}
#switch_cont .controll_btn ul li span:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0px 6px; border-color: #ffffff transparent transparent transparent; position: absolute; left: 0; right: 0; bottom: -7px; margin: auto; z-index: 3;}
#switch_cont .controll_btn ul li span strong{ display: flex; align-items: center; justify-content: center; background: #fff; color: #000; font-size: 0.9rem; line-height: 1em; font-weight: bold; padding: 0.5em 1.5em 0.66em; border-radius: 8px; z-index: 3; box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px;}
@media screen and (max-width:768px){
#switch_cont .tit_h2{ margin: 0 auto 7.5%;}
#switch_cont .tit_h2 h2{ padding: 0.5em 1.5em 0.66em 4.5em;}
#switch_cont .tit_h2 h2 span img{ height: 17.5vw;}
#switch_cont .tit_h2 h2 strong{ font-size: 1.25rem;}

#switch_cont .controll_btn{ padding: 12.5% 0 10%;}
#switch_cont .controll_btn ul{ display: block;}
#switch_cont .controll_btn ul li{ width: 100%; font-size: 1.25rem; padding: 1em; border-radius: 1.875vw; margin-top: 8.75%;}
#switch_cont .controll_btn ul li:first-child{ margin-top: 0;}
#switch_cont .controll_btn ul li i{ margin-left: 1.875vw;}
#switch_cont .controll_btn ul li i img{ width: 5vw;}
#switch_cont .controll_btn ul li span{ top: -5vw; margin: 0; z-index: 3;}
#switch_cont .controll_btn ul li span:after{ border-width: 1.875vw 1.25vw 0px 1.25vw; bottom: -1.5vw;}
#switch_cont .controll_btn ul li span strong{ font-size: 0.9rem; padding: 0.33em 0.5em 0.5em; border-radius: 1.25vw;}
}





/*company*/
/*lead*/
#company .lead{ background: #fff9e4; padding: 70px 0;}
#company .lead ul{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px;}
#company .lead ul li{ box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px;}
#company .lead p{ text-align: center; font-size: 1rem; margin: 30px auto;}
#company .lead h3{ text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#company .lead h3 strong{ display: flex; align-items: center; justify-content: center; background: #fff; color: #4f9d10; font-size: 1.5rem; line-height: 1em; padding: 0.25em 0.5em 0.33em; margin-top: 0.33em; box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px; font-feature-settings: "palt";}
@media screen and (max-width:768px){
#company .lead{ padding: 10% 2.5%;}
#company .lead ul{ gap: 2.5vw;}
#company .lead ul li{ width: calc(50% - 2.5vw);}
#company .lead p{ font-size: 1rem; margin: 5% auto;}
#company .lead h3 strong{ font-size: 1.25rem;}
}

/*movie*/
#company .movie{ background: #3f6bbb; padding: 70px 0; position: relative; z-index: 1; overflow: hidden;}
#company .movie:after{ content: ""; width: calc(50vw + 11.25vw); height: 100%; background: #335eab; position: absolute; right: -11.25vw; top: 0; transform: skewX(-22.5deg); z-index: -1;}
#company .movie h3{ text-align: center; font-size: 1.65rem; line-height: 1.25em; color: #fff; margin-bottom: 30px;}
#company .movie h3 strong{ display: inline-block; position: relative;}
#company .movie h3 strong:before{ content: ""; width: 76px; height: 76px; background: url("../images/company/movie_tit_ico.png"); background-size: 100%; position: absolute; left: -76px; bottom: 0;}
#company .movie h3 strong:after{ content: ""; width: 76px; height: 76px; background: url("../images/company/movie_tit_ico.png"); background-size: 100%; position: absolute; right: -76px; bottom: 0; transform: rotateY(180deg);}
#company .movie .movie_wrap{ width: 580px; margin: auto;}
#company .movie .movie_wrap iframe{ border: 4px solid #fff;}
@media screen and (max-width:768px){
#company .movie{ padding: 10% 0;}
#company .movie:after{ width: calc(50vw + 22.5vw); right: -22.5vw; transform: skewX(-11.25deg);}
#company .movie h3{ font-size: 1.25rem; margin-bottom: 3.75%;}
#company .movie h3 strong:before{ width: 15vw; height: 15vw; left: -15vw;}
#company .movie h3 strong:after{ width: 15vw; height: 15vw; right: -15vw;}
#company .movie .movie_wrap{ width: 100%;}
}

/*date*/
#company .date{ background: #fff; padding: 70px 0;}
#company .date h3{ text-align: center; margin-bottom: 40px;}
#company .date ul{ display: flex; gap: 30px; width: calc(100% + 30px); margin: 0 0 0 -15px;}
#company .date ul li{ position: relative;}
#company .date ul li p{ text-align: center; font-size: 0.7rem; margin-top: 0.5em;}
#company .date ul li p:before{ content: "※";}
#company .date ul li:nth-child(1) p{ margin-left: 2em;}
#company .date ul li:nth-child(2) p{ margin-right: 2em;}
#company .date ul li:nth-child(1) span.ill{ position: absolute; left: -90px; bottom: 0;}
#company .date ul li:nth-child(2) span.ill{ position: absolute; right: -90px; bottom: 0;}
@media screen and (max-width:768px){
#company .date{ padding: 10% 0;}
#company .date h3{ margin-bottom: 5%;}
#company .date ul{ width: calc(100% + 7.5vw); display: block; margin: 0 0 0 -3.75vw;}
#company .date ul li{ margin-top: 7.5%;}
#company .date ul li p{ width: 50%; text-align: left; font-size: 0.8rem; line-height: 1.25em; margin: 0; padding-left: 1em;}
#company .date ul li p:before{ position: absolute; left: 0; top: 0;}
#company .date ul li:nth-child(1) p{ position: absolute; left: 42.5%; bottom: 0.5em;}
#company .date ul li:nth-child(2) p{ position: absolute; left: 5%; bottom: 0.5em;}
}

/*promise*/
#company .promise{ background: #fff; padding: 25px 0 70px;}
#company .promise h3{ text-align: center; margin-bottom: 40px;}
#company .promise ul{ display: flex; flex-wrap: wrap; gap: 0 40px;}
#company .promise ul li{ width: calc(50% - 20px);}
@media screen and (max-width:768px){
#company .promise{ padding: 2.5% 0 0;}
#company .promise h3{ margin-bottom: 5%;}
#company .promise h3 img{ width: 75%;}
#company .promise ul{ display: block; width: calc(100% + 7.5vw); margin-left: -3.75vw;}
#company .promise ul li{ width: 100%; margin-top: 3.75%;}
}





/*item*/
/*lead*/
#item .lead{ background: #fff9e4; padding: 70px 0 40px;}
#item .lead h4{ text-align: center; font-size: 1.25rem; font-weight: 500; margin-bottom: 10px;}
#item .lead h3{ text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 40px;}
#item .lead h3 strong{ display: flex; align-items: center; justify-content: center; background: #fff; color: #4f9d10; font-size: 1.5rem; line-height: 1em; padding: 0.25em 0.5em 0.33em; box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px; font-feature-settings: "palt";}
#item .lead p{ text-align: center; font-size: 1rem;}
@media screen and (max-width:768px){
#item .lead{ padding: 10% 0 3.75%;}
#item .lead h4{ font-size: 1.1rem; margin-bottom: 1.25%;}
#item .lead h3{ margin-bottom: 5%;}
#item .lead h3 strong{ font-size: 1.5rem;}
#item .lead p{ font-size: 0.9rem;}
}

/*item_list*/
#item .item_list{ background: #406bba; padding: 50px 0;}
#item .item_list ul{ width: 750px; margin: auto; display: flex; flex-wrap: wrap; gap: 16px 8px;}
#item .item_list ul li{ width: calc(16.66% - 6.66px); cursor: pointer; transition: 0.3s;}
#item .item_list ul li:hover{ opacity: 0.7;}
#item .item_list .att{ margin-top: 30px; text-align: center;}
#item .item_list .att p{ font-size: 0.75rem; line-height: 1.5em; color: #fff;}
#item .item_list .att p:before{ content: "※";}
@media screen and (max-width:768px){
#item .item_list{ padding: 3.75% 0 5%;}
#item .item_list .maincontent{ width: 97.5%;}
#item .item_list ul{ width: 100%; gap: 3.75vw 1.25vw;}
#item .item_list ul li{ width: calc(33.33% - 0.833vw);}
#item .item_list .att{ display: flex; align-items: center; justify-content: center; margin-top: 3.75%;}
#item .item_list .att p{ text-align: left; font-size: 0.75rem; padding-left: 1.25em; position: relative;}
#item .item_list .att p:before{ position: absolute; left: 0; top: 0;}
}

/*broken*/
#item .broken{ padding-bottom: 25px; background: #fff9e4; overflow: hidden;}
#item .broken h3{ text-align: center; background: #fff; padding: 60px 0 0;}
#item .broken .list{ margin-top: 100px; padding: 1px 0 30px; background: #406bba; color: #fff; position: relative; z-index: 1;}
#item .broken .list:before{ content: ""; width: 50vw; height: 100%; background: #406bba; position: absolute; left: -47.5vw; top: 0; z-index: -1;}
#item .broken .list:after{ content: ""; width: 50vw; height: 100%; background: #406bba; position: absolute; right: -47.5vw; top: 0; z-index: -1;}
#item .broken .list ul{ display: flex; justify-content: center; gap: 40px;}
#item .broken .list ul li{ width: 200px; margin-top: -60px;}
#item .broken .list ul li figure img{ border-radius: 12px; box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px;}
#item .broken .list ul li h4{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: 10px;}
#item .broken .list ul li h4 span{ width: 100%; font-size: 0.9rem; font-weight: 400; border-bottom: 2px dotted #fff; padding-bottom: 0.25em; margin-bottom: 0.25em;}
#item .broken .list ul li h4 strong{ font-size: 1.25rem; line-height: 1.25em;}
@media screen and (max-width:768px){
#item .broken{ padding-bottom: 2.5%;}
#item .broken h3{ padding: 10% 5% 0;}
#item .broken .list{ margin-top: 22.5vw; padding: 1px 0 5%;}
#item .broken .list ul{ width: 97.5%; margin: auto; gap: 7.5vw;}
#item .broken .list ul li{ width: calc(50% - 3.75vw); margin-top: -15vw;}
#item .broken .list ul li figure img{ border-radius: 1.875vw;}
#item .broken .list ul li h4{ margin-top: 3.75%;}
#item .broken .list ul li h4 span{font-size: 0.8rem;}
#item .broken .list ul li h4 strong{ font-size: 1.2rem;}
}





/*result*/
/*lead*/
#result .lead{ background: #fff9e4; padding: 70px 0;}
#result .lead p.lead_txt{ text-align: center; font-size: 1.25rem; font-weight: 500; margin-bottom: 10px;}
#result .lead h3{ text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#result .lead h3 strong{ display: flex; align-items: center; justify-content: center; background: #fff; color: #4f9d10; font-size: 1.5rem; line-height: 1em; padding: 0.25em 0.5em 0.33em; box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px; font-feature-settings: "palt";}
@media screen and (max-width:768px){
#result .lead{ padding: 10% 0;}
#result .lead p.lead_txt{ font-size: 1rem; margin-bottom: 1.25%;}
#result .lead h3 strong{ font-size: 1.5rem;}
}

#result .lead .tit{ display: flex; align-items: center; justify-content: center; margin: 50px auto 40px;}
#result .lead .tit h4{ display: flex; align-items: center; justify-content: center; margin: 0; font-size: 1.25rem; position: relative;}
#result .lead .tit h4:before{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; left: -0.75em; bottom: -0.1em; transform: rotate(-22.5deg);}
#result .lead .tit h4:after{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; right: -0.75em; bottom: -0.1em; transform: rotate(22.5deg);}
#result .lead .tit h4 span{ font-size: 1.25rem;}
#result .lead .tit h4 strong{ font-size: 1.5rem; line-height: 1em; color: #335eab;}
@media screen and (max-width:768px){
#result .lead .tit { margin-bottom: 5%;}
#result .lead .tit  h4{ font-size: 1.2rem;}
#result .lead .tit  h4 span{ font-size: 1.2rem;}
#result .lead .tit  h4 strong{ font-size: 1.4rem;}
}

#result_slide{ position: relative;}
#result_slide *{ overflow: visible;}
#result_slide ul{ display: flex; align-items: center; justify-content: center; gap: 0 20px; width: 100%; margin: 0 auto;}
#result_slide ul{ padding: 0; margin-bottom: 0;}
#result_slide ul li{ padding: 0; transition: 0.3s;}
#result_slide ul li.slick-current{ opacity: 1.0; transform: scale(1.0); cursor: default;}
#result_slide ul li img{ width: 100%;}
@media screen and (max-width:768px){
#result_slide *{ overflow: visible;}
#result_slide ul{ display: block; gap: 0; width:100%;}
#result_slide ul{ padding: 0 1.875vw; margin-bottom: 7.5vw;}
#result_slide ul li{ width: 100%; padding: 0 1.875vw; opacity: 0.5; transform: scale(1.0);}
}

/*slick調整*/
#result_slide .slick-prev,
#result_slide .slick-next{ display: none !important;}
/*
#result_slide ul.slick-dots{ width: auto; height: auto; padding: 0; margin: auto; line-height: 0; position: absolute; left: 0; right: 0; top: auto; bottom: -40px; transform: none;}
*/
#result_slide ul.slick-dots{ display: flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 0; margin: auto; line-height: 0; position: absolute; left: 0; right: 0; top: auto; bottom: -40px; transform: none;}
#result_slide ul.slick-dots li{ padding: 0; margin: 0; width: auto; height: auto; background: none; border: none; opacity: 1.0;}
#result_slide ul.slick-dots li button{ background: #9fb8e5; padding: 0; margin: 0 10px; width: 10px; height: 10px; border-radius: 50%; text-indent: -9999px; transition: 0.3s;}
#result_slide ul.slick-dots li button:hover,
#result_slide ul.slick-dots li.slick-active button{ background: #335eab;}
@media screen and (max-width:768px){
/*
#result_slide ul.slick-dots{ bottom: -7.5vw;}
*/
#result_slide ul.slick-dots{ bottom: -7.5vw;}
#result_slide ul.slick-dots li button{ margin: 0 2.5vw; width: 2.5vw; height: 2.5vw;}
}



/*result_list*/
#result .result_list{ background: #fff9e4; padding-bottom: 25px;}
#result .result_list .maincontent{ padding: 70px 0 0; position: relative;}
#result .result_list .tit{ background: #fff; padding: 40px 0; display: flex; align-items: center; justify-content: center;}
#result .result_list .tit h3{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 100px; position: relative;}
#result .result_list .tit h3 i{ position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#result .result_list .tit h3 span{ font-size: 1.4rem; line-height: 1em; margin-bottom: 0.25em;}
#result .result_list .tit h3 strong{ font-size: 1.75rem; line-height: 1em; color: #335eab;}

#result .result_list .result_list_wrap ul{ display: flex; flex-wrap: wrap; gap: 20px 15px;}
#result .result_list .result_list_wrap ul li{ width: calc(33.33% - 10px); background: #325eac; border: 4px solid #325eac; border-radius: 12px; overflow: hidden;}
#result .result_list .result_list_wrap ul li dl dt{ background: #fff; padding: 15px;}
#result .result_list .result_list_wrap ul li dl dt h4{ height: 3.5em; font-size: 1.3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: 10px;}
#result .result_list .result_list_wrap ul li dl dt h4 span{ font-size: 1rem; line-height: 1.25em;}
#result .result_list .result_list_wrap ul li dl dt h4 strong{ font-size: 1.3rem; line-height: 1.25em; color: #325eac;}
#result .result_list .result_list_wrap ul li dl dd{ background: #325eac; padding: 20px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#result .result_list .result_list_wrap ul li dl dd span{ display: flex; align-items: center; justify-content: center; background: #fff; color: #325eac; font-size: 0.95rem; line-height: 1em; font-weight: 600; padding: 0.125em 0.5em 0.25em;}
#result .result_list .result_list_wrap ul li dl dd p.price{ display: flex; align-items: center; color: #fffcc2;}
#result .result_list .result_list_wrap ul li dl dd p.price strong{ font-size: 2.1rem; line-height: 1em; font-weight: 500;}
#result .result_list .result_list_wrap ul li dl dd p.price small{ font-size: 1.1rem; line-height: 1em; margin-left: 0.25em; position: relative; top: 0.125em;}

#result .result_list .att{ position: absolute; left: calc(33.33% + 10px); bottom: 0;}
#result .result_list .att ul li{ padding-left: 1em; font-size: 0.7rem; position: relative;}
#result .result_list .att ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:768px){
#result .result_list{ padding-bottom: 2.5%;}
#result .result_list .maincontent{ padding: 10% 0 0;}
#result .result_list .tit{ padding: 7.5% 0;}
#result .result_list .tit h3{ padding-left: 17.5vw;}
#result .result_list .tit h3 i{ width: 15vw;}
#result .result_list .tit h3 span{ font-size: 1.4rem;}
#result .result_list .tit h3 strong{ font-size: 1.75rem;}

#result .result_list .result_list_wrap ul{ gap: 7.5vw 3.75vw;}
#result .result_list .result_list_wrap ul li{ width: calc(50% - 1.88vw); border-radius: 1.875vw;}
#result .result_list .result_list_wrap ul li dl dt{ padding: 2.5% 1.875%;}
#result .result_list .result_list_wrap ul li dl dt h4{ height: 3.5em; font-size: 1.3rem; margin-top: 2.5%;}
#result .result_list .result_list_wrap ul li dl dt h4 span{ font-size: 0.9rem;}
#result .result_list .result_list_wrap ul li dl dt h4 strong{ font-size: 1.1rem;}
#result .result_list .result_list_wrap ul li dl dd{ padding: 7.5% 2.5% 3.75%;}
#result .result_list .result_list_wrap ul li dl dd span{ font-size: 0.8rem; margin-bottom: 0.25em;}
#result .result_list .result_list_wrap ul li dl dd p.price strong{ font-size: 1.8rem;}
#result .result_list .result_list_wrap ul li dl dd p.price small{ font-size: 0.9rem;}

#result .result_list .att{ position: static; margin-top: 7.5%;}
#result .result_list .att ul li{ font-size: 0.55rem;}
}





/*system*/
#system{ overflow: hidden;}
#system .lead{ padding: 70px 0 25px; background: #fff9e4;}
#system .lead .tit{ display: flex; align-items: center; justify-content: center; margin-bottom: 40px;}
#system .lead .tit h3{ display: flex; align-items: center; justify-content: center; margin: 0; font-size: 1.25rem; position: relative;}
#system .lead .tit h3:before{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; left: -0.75em; bottom: -0.1em; transform: rotate(-22.5deg);}
#system .lead .tit h3:after{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; right: -0.75em; bottom: -0.1em; transform: rotate(22.5deg);}
#system .lead .tit h3 span{ font-size: 1.25rem;}
#system .lead .tit h3 strong{ font-size: 1.5rem; line-height: 1em; color: #335eab;}
@media screen and (max-width:768px){
#system .lead .maincontent{ width: 100%;}
#system .lead{ padding: 10% 0 2.5%;}
#system .lead .tit{ margin-bottom: 5%;}
#system .lead .tit h3{ font-size: 1.2rem;}
#system .lead .tit h3 span{ font-size: 1.2rem;}
#system .lead .tit h3 strong{ font-size: 1.4rem;}
}

#system_nav *{ transition: 0.3s;}
#system_nav ul{ display: flex; gap: 9px;}
#system_nav ul li{ width: calc(33.33% - 6px); display: flex; align-items: center; justify-content: center; background: #fff; border: 4px solid #3f6bbb; border-bottom: none; color: #3f6bbb; font-size: 1.3rem; font-weight: bold; line-height: 1em; height: 80px; border-radius: 12px 12px 0 0; transition: 0.3s; cursor: pointer;}
#system_nav ul li.active{ background: #3f6bbb; color: #fff;}
#system_nav ul li strong{ padding-left: 40px; position: relative;}
#system_nav ul li strong:before{ content: ""; width: 36px; height: 36px; background: url("../images/system/nav_ico01.png"); background-size: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#system_nav ul li:nth-child(1) strong:before{ background: url("../images/system/nav_ico01.png"); background-size: 100%;}
#system_nav ul li:nth-child(2) strong:before{ background: url("../images/system/nav_ico02.png"); background-size: 100%;}
#system_nav ul li:nth-child(3) strong:before{ background: url("../images/system/nav_ico03.png"); background-size: 100%;}
#system_nav ul li.active:nth-child(1) strong:before{ background: url("../images/system/nav_ico01_2.png"); background-size: 100%;}
#system_nav ul li.active:nth-child(2) strong:before{ background: url("../images/system/nav_ico02_2.png"); background-size: 100%;}
#system_nav ul li.active:nth-child(3) strong:before{ background: url("../images/system/nav_ico03_2.png"); background-size: 100%;}
@media screen and (max-width:768px){
#system_nav ul{ gap: 1vw;}
#system_nav ul li{ width: calc(33.33% - 0.5vw); height: 12.5vw; border-radius: 1.25vw 1.25vw 0 0; font-size: 1rem;}
#system_nav ul li strong{ padding-left: 6.25vw;}
#system_nav ul li strong:before{ width: 5vw; height: 5vw;}
}

.system_cont{ display: none;}
.system_cont.active{ display: block;}
.system_cont{ background: #3f6bbb; color: #fff; padding: 0; border-radius: 0 0 12px 12px;}
@media screen and (max-width:768px){
.system_cont{ border-radius: 0 0 1.25vw 1.25vw;}
}

.system_cont .system_lead{ padding: 40px 60px;}
.system_cont .system_lead h3{ text-align: center; font-size: 1.5rem; margin-bottom: 10px;}
.system_cont#system_cont03 .system_lead h3 strong{ color: #f6e316;}

.system_cont .system_lead h4{ display: flex; align-items: center; justify-content: center; background: #fff; color: #4f9d10; font-size: 2rem; line-height: 1em; padding: 0.25em 0.25em 0.33em; margin-bottom: 25px;}
.system_cont .system_lead h4 strong{ position: relative;}
.system_cont .system_lead h4 strong span{ position: absolute; left: -124px; bottom: -0.25em;}
.system_cont#system_cont03 h4{ position: relative;}
.system_cont#system_cont03 h4 strong{ position: static;}
.system_cont#system_cont03 h4 strong span{ left: -10px; bottom: 0;}
.system_cont .system_lead p{ font-size: 1rem; line-height: 1.5em; text-align: justify;}
.system_cont .system_lead .store_ban{ margin: 20px auto 0;}

@media screen and (max-width:768px){
.system_cont .system_lead{ padding: 7.5% 7.5%;}
.system_cont .system_lead h3{ font-size: 1rem; padding-left: 20vw; margin-bottom: 1.25%;}
.system_cont#system_cont02 .system_lead h3{ padding-left: 0;}
.system_cont#system_cont03 .system_lead h3{ padding-left: 17.5vw;}
.system_cont .system_lead h4{ font-size: 1.5rem; padding: 0.25em 0.25em 0.33em; margin-bottom: 2.5%;}
.system_cont .system_lead h4 strong{ padding-left: 20vw;}
.system_cont .system_lead h4 strong span{ width: 20vw; position: absolute; left: 0; bottom: -0.25em;}
.system_cont#system_cont03 .system_lead h4 strong{ padding-left: 17.5vw;}
.system_cont#system_cont03 h4 strong span{ left: -2.5vw;}
.system_cont .system_lead p{ font-size: 0.9rem;}
.system_cont .system_lead .store_ban{ margin: 3.75% auto 0;}
}

.system_cont .system_step{ padding: 0 0 60px;}
.system_cont .system_step h3{ background: #fff; color: #3f6bbb; text-align: center; font-size: 1.5rem; line-height: 1em; padding: 0.25em 0.25em 0.33em; position: relative; margin-bottom: 25px;}
.system_cont .system_step h3:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 6px 0px 6px; border-color: #fff transparent transparent transparent; position: absolute; left: 0; right: 0; bottom: -8px; margin: auto;}
.system_cont .system_step h4{ text-align: center; font-size: 1.75rem; margin-bottom: 20px;}
.system_cont .system_step ul{ width: 500px; margin: auto; display: flex; flex-wrap: wrap; gap: 10px;}
.system_cont .system_step ul li{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(50% - 5px); background: #fff; padding: 20px; border-radius: 12px;}
.system_cont .system_step ul li strong{ font-size: 1.25rem; color: #3f6bbb; font-weight: 500; border-bottom: 2px solid #3f6bbb;}
.system_cont .system_step ul li figure{ margin: 15px auto;}
.system_cont .system_step ul li figure img{ width: 102px;}
.system_cont .system_step ul li h5{ text-align: center; font-size: 1.1rem; line-height: 1.25em; color: #000;}
@media screen and (max-width:768px){
.system_cont .system_step{ padding: 0 0 10%;}
.system_cont .system_step h3{ font-size: 1.25rem; padding: 0.25em 0.25em 0.33em; margin-bottom: 3.75%;}
.system_cont .system_step h3:after{ border-width: 1.875vw 1.5vw 0px 1.5vw; bottom: -1.5vw;}
.system_cont .system_step h4{ font-size: 1.5rem; margin-bottom: 2.5%;}
.system_cont .system_step ul{ width: 85%; gap: 1vw;}
.system_cont .system_step ul li{ width: calc(50% - 0.5vw); padding: 3.75%; border-radius: 1.25vw;}
.system_cont .system_step ul li strong{ font-size: 1.2rem;}
.system_cont .system_step ul li figure{ margin: 2.5% auto;}
.system_cont .system_step ul li figure img{ width: 17.5vw;}
.system_cont .system_step ul li h5{ font-size: 0.9rem;}
}

.system_cont .system_schedule{ background: #fff9e4;}
.system_cont .system_schedule h3{ text-align: center; padding: 40px 0 20px; margin-bottom: 40px; background: #fff; position: relative; z-index: 1;}
.system_cont .system_schedule h3:before{ content: ""; width: 50vw; height: 100%; background: #fff; position: absolute; left: -47.5vw; top: 0; z-index: -1;}
.system_cont .system_schedule h3:after{ content: ""; width: 50vw; height: 100%; background: #fff; position: absolute; right: -47.5vw; top: 0; z-index: -1;}
.system_cont .system_schedule p.txt{ text-align: center; font-size: 1rem; color: #000; margin-bottom: 30px;}

.system_cont .system_schedule .system_schedule_table{ width: 750px; margin: auto; border: 4px solid #3f6bbb; background: #fff; color: #000; border-radius: 20px; overflow: hidden;}
.system_cont .system_schedule .system_schedule_table h5{ background: #3f6bbb; color: #fff; text-align: center; font-size: 1.5rem; padding: 0.5em;}
.system_cont .system_schedule .system_schedule_table dl{ display: flex; font-size: 1.25rem; padding: 25px 0; border-bottom: 2px dotted #3f6bbb; margin: 0 40px;}
.system_cont .system_schedule .system_schedule_table dl:last-child{ border-bottom: none;}
.system_cont .system_schedule .system_schedule_table dl dt{ width: 120px; font-weight: bold;}
.system_cont .system_schedule .system_schedule_table dl dd{ flex: 1;}
.system_cont .system_schedule .system_schedule_table dl dd h6{ font-size: 1.25rem;}
.system_cont .system_schedule .system_schedule_table dl dd p{ font-size: 1rem; line-height: 1.5em;}
.system_cont .system_schedule .system_schedule_table .pickup{ position: relative;}
.system_cont .system_schedule .system_schedule_table .pickup .time{ position: absolute; right: 60px; top: calc(50% - 1px); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: calc(100% - 100px); background: #fe8f2e; color: #fff; font-size: 1.2rem; letter-spacing: 0.1em; font-weight: bold; writing-mode: vertical-rl;}
.system_cont .system_schedule .system_schedule_table .pickup .time strong{ font-size: 1.4rem; line-height: 1em; writing-mode: horizontal-tb; margin: 0 0 0.25em;}
.system_cont .system_schedule .system_schedule_table .pickup .time:before{ content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent #fe8f2e transparent; border-width: 0px 30px 32px 30px; position: absolute; left: 50%; top: -30px; transform: translateX(-50%);}
.system_cont .system_schedule .system_schedule_table .pickup .time:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: #fe8f2e transparent transparent transparent; border-width: 32px 30px 0px 30px; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);}
.system_cont .system_schedule .system_schedule_table .pickup dl:last-child{ border-bottom: 2px dotted #3f6bbb; }
.system_cont .system_schedule .system_schedule_table .pickup dl dt{ color: #3f6bbb;}
.system_cont .system_schedule .system_schedule_table .pickup dl dd h6{ color: #3f6bbb;}
.system_cont .system_schedule .system_schedule_table .pickup dl dd p{ padding-right: 48px;}
@media screen and (max-width:768px){
.system_cont .system_schedule h3{ padding: 7.5% 5% 5%; margin-bottom: 5%;}
.system_cont .system_schedule p.txt{ font-size: 0.9rem; margin-bottom: 5%;}

.system_cont .system_schedule .system_schedule_table{ width: 92.5%; margin: auto; border-radius: 2.5vw;}
.system_cont .system_schedule .system_schedule_table h5{ font-size: 1rem;}
.system_cont .system_schedule .system_schedule_table dl{ font-size: 1.2rem; padding: 5% 0; margin: 0 5%;}
.system_cont .system_schedule .system_schedule_table dl dt{ width: 4em;}
.system_cont .system_schedule .system_schedule_table dl dd h6{ font-size: 1.2rem;}
.system_cont .system_schedule .system_schedule_table dl dd p{ font-size: 0.9rem;}
.system_cont .system_schedule .system_schedule_table .pickup .time{ right: 5%; top: calc(50% - 1px); width: 8.75vw; height: calc(100% - 15vw); font-size: 1rem;}
.system_cont .system_schedule .system_schedule_table .pickup .time strong{ font-size: 1.2rem;}
.system_cont .system_schedule .system_schedule_table .pickup .time:before{ border-width: 0px 7.5vw 7.5vw 7.5vw; top: -6.25vw;}
.system_cont .system_schedule .system_schedule_table .pickup .time:after{ border-width: 7.5vw 7.5vw 0px 7.5vw; bottom: -6.25vw;}
.system_cont .system_schedule .system_schedule_table .pickup dl dd p{ padding-right: 12.5vw;}
}

.system_cont .att{ background: #fff9e4; padding: 30px 0 0;}
.system_cont .att ul{ width: 690px; margin: auto;}
.system_cont .att ul li{ font-size: 0.7rem; line-height: 1.5em; font-weight: 400; color: #000; padding-left: 1em; margin-bottom: 0.5em; position: relative;}
.system_cont .att ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
.system_cont .att ul li a{ text-decoration: underline;}
.system_cont .att ul li a:hover{ text-decoration: none;}
.system_cont#system_cont02 .att{ background: #3f6bbb; margin-top: -20px; padding: 0 0 40px; border-radius: 0 0 12px 12px;}
.system_cont#system_cont02 .att ul li{ color: #fff;}
.system_cont#system_cont03 .att{ background: #3f6bbb; margin-top: -20px; padding: 0 0 40px; border-radius: 0 0 12px 12px;}
.system_cont#system_cont03 .att ul li{ color: #fff;}
@media screen and (max-width:768px){
.system_cont .att{ padding: 5% 0 0;}
.system_cont .att ul{ width: 85%;}
.system_cont .att ul li{ font-size: 0.55rem;}
.system_cont#system_cont02 .att{ margin-top: -3.75vw; padding: 0 0 7.5%; border-radius: 0 0 1.25vw 1.25vw;}
.system_cont#system_cont03 .att{ margin-top: -3.75vw; padding: 0 0 7.5%; border-radius: 0 0 1.25vw 1.25vw;}
}





/*beginner*/
/*lead*/
#beginner .lead{ padding: 70px 0 50px; background: #fff9e4;}
#beginner .lead h3{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0;}
#beginner .lead h3 span{ font-size: 1.25rem; line-height: 1em; margin-bottom: 0.5em; position: relative;}
#beginner .lead h3 span:before{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; left: -0.75em; bottom: -0.1em; transform: rotate(-22.5deg);}
#beginner .lead h3 span:after{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; right: -0.75em; bottom: -0.1em; transform: rotate(22.5deg);}
#beginner .lead h3 strong{ font-size: 1.5rem; line-height: 1em; color: #335eab;}
@media screen and (max-width:768px){
#beginner .lead{ padding: 10% 0 10%;}
#beginner .lead h3 span{ font-size: 1.25rem;}
#beginner .lead h3 strong{ font-size: 1.5rem;}
}

/*steps*/
#beginner .steps .tit{ display: flex; align-items: center; justify-content: center; background: #3f6bbb; color: #fff; position: relative;}
#beginner .steps .tit:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 12px 12px 0px 12px; border-color: #3f6bbb transparent transparent transparent; position: absolute; left: 0; right: 0; bottom: -10px; margin: auto;}
#beginner .steps .tit h3{ display: flex; align-items: center; justify-content: center; font-size: 1.75rem; letter-spacing: 0.05em; padding: 0.5em 0 0.5em 100px; position: relative;}
#beginner .steps .tit h3 span{ position: absolute; left: 0; bottom: 0;}
#beginner .steps .tit h3 strong b{ color: #fff9e4;}
#beginner .steps .maincontent{ padding: 50px 0 70px;}

#beginner .steps .tit2 h5{ display: flex; align-items: center; justify-content: center; margin-bottom: 30px;}
#beginner .steps .tit2 h5 span img{ height: 25px;}
#beginner .steps .tit2 h5 strong{ font-size: 1.25rem; color: #3f6bbb; margin-left: 0.33em;}
#beginner .steps .tit2 h4{ text-align: center; margin-bottom: 40px;}

#beginner .steps #flow_nav ul{ display: flex; align-items: flex-end; width: calc(100% + 10px); margin-left: -5px;}
#beginner .steps #flow_nav ul li{ width: calc(25% - 10px); margin: 0 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px 12px; border: 2px solid #3f6bbb; border-bottom: none; background: #fff; color: #3f6bbb; border-radius: 12px 12px 0 0; transition: 0.3s; cursor: pointer;}
#beginner .steps #flow_nav ul li.active{ background: #3f6bbb; color: #fff;}
#beginner .steps #flow_nav ul li span{ font-size: 0.8rem; line-height: 1em; font-weight: bold;}
#beginner .steps #flow_nav ul li strong{ font-size: 1.25rem; line-height: 1em; font-weight: bold; margin: 0.33em auto 0;}

#beginner .steps #flow_cont{ border: 2px solid #3f6bbb; background: #3f6bbb; color: #fff; padding: 30px 65px; border-radius: 0 0 12px 12px;}
#beginner .steps #flow_cont .flow_step{ display: none;}
#beginner .steps #flow_cont .flow_step.active{ display: block;}
#beginner .steps #flow_cont .flow_step .movie{ width: 475px; margin: auto;}
#beginner .steps #flow_cont .flow_step video{ width: 100%; vertical-align: bottom;}
#beginner .steps #flow_cont .flow_step h3{ display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
#beginner .steps #flow_cont .flow_step h3 strong{ font-size: 1.5rem; line-height: 1em; letter-spacing: 0.05em; font-weight: 500; position: relative;}
#beginner .steps #flow_cont .flow_step h3 strong:before{ content: ""; width: 180px; border-bottom: 2px dotted #fff; position: absolute; left: -200px; top: 50%;}
#beginner .steps #flow_cont .flow_step h3 strong:after{ content: ""; width: 180px; border-bottom: 2px dotted #fff; position: absolute; right: -200px; top: 50%;}
#beginner .steps #flow_cont .flow_step h4{ display: flex; align-content: center; justify-content: center; background: #fff; margin-bottom: 30px;}
#beginner .steps #flow_cont .flow_step h4 strong{ position: relative; padding: 0.33em 0; font-size: 2rem; line-height: 1em; color: #4f9d10;}
#beginner .steps #flow_cont .flow_step h4 strong span{ width: 107px; position: absolute; left: -120px; bottom: 0;}
#beginner .steps #flow_cont .flow_step#flow_step01 h4 strong span{ width: 57px; left: -67px;}
#beginner .steps #flow_cont .flow_step#flow_step02 h4 strong span{ width: 107px; left: -117px;}
#beginner .steps #flow_cont .flow_step#flow_step03 h4 strong span{ width: 107px; left: -117px;}
#beginner .steps #flow_cont .flow_step#flow_step04 h4 strong span{ width: 74px; left: -84px;}
#beginner .steps #flow_cont .flow_step h5{ margin-top: 20px; text-align: center; font-size: 1.25rem; line-height: 1.25em;}
#beginner .steps #flow_cont .flow_step h5 strong{ color: #ffe400;}
@media screen and (max-width:768px){
#beginner .steps .tit:after{ border-width: 2.5vw 2.5vw 0 2.5vw; bottom: -2.25vw;}
#beginner .steps .tit h3{ font-size: 1.4rem; padding: 0.33em 0 0.33em 20vw;}
#beginner .steps .tit h3 span{ width: 17.5vw;}
#beginner .steps .maincontent{ padding: 7.5% 0 10%;}

#beginner .steps .tit2 h5{ margin-bottom: 5%;}
#beginner .steps .tit2 h5 span img{ height: 5vw;}
#beginner .steps .tit2 h5 strong{ font-size: 1.2rem;}
#beginner .steps .tit2 h4{ margin-bottom: 7.5%;}
#beginner .steps .tit2 h4 img{ width: 75%;}

#beginner .steps #flow_nav ul{ width: calc(100% + 1.25vw); margin-left: -0.625vw;}
#beginner .steps #flow_nav ul li{ width: calc(25% - 1.25vw); margin: 0 0.625vw; padding: 2.5vw 1.25vw 1.25vw; border-radius: 1.25vw 1.25vw 0 0;}
#beginner .steps #flow_nav ul li.active{ padding: 1.875vw 1.25vw 1.875vw;}
#beginner .steps #flow_nav ul li span{ font-size: 0.7rem;}
#beginner .steps #flow_nav ul li strong{ font-size: 0.9rem;}
#beginner .steps #flow_nav ul li i{ font-size: 0.7rem;}

#beginner .steps #flow_cont{ padding: 5%; border-radius: 0 0 1.875vw 1.875vw;}
#beginner .steps #flow_cont .flow_step .movie{ width: 100%;}
#beginner .steps #flow_cont .flow_step h3{ overflow: hidden; margin-bottom: 3.75%;}
#beginner .steps #flow_cont .flow_step h3 strong{ font-size: 1.5rem;}
#beginner .steps #flow_cont .flow_step h3 strong:before{ width: 50vw; left: -52.5vw;}
#beginner .steps #flow_cont .flow_step h3 strong:after{ width: 50vw; right: -52.5vw;}
#beginner .steps #flow_cont .flow_step h4{ margin-bottom: 2.5%;}
#beginner .steps #flow_cont .flow_step h4 strong{ padding: 0.33em 0; font-size: 1.4rem;}
#beginner .steps #flow_cont .flow_step#flow_step01 h4 strong{ padding-left: 10vw;}
#beginner .steps #flow_cont .flow_step#flow_step01 h4 strong span{ width: 8.75vw; left: 0;}
#beginner .steps #flow_cont .flow_step#flow_step02 h4 strong{ padding-left: 16.25vw;}
#beginner .steps #flow_cont .flow_step#flow_step02 h4 strong span{ width: 15vw; left: 0;}
#beginner .steps #flow_cont .flow_step#flow_step03 h4 strong{ padding-left: 16.25vw;}
#beginner .steps #flow_cont .flow_step#flow_step03 h4 strong span{ width: 15vw; left: 0;}
#beginner .steps #flow_cont .flow_step#flow_step04 h4 strong{ padding-left: 12.5vw;}
#beginner .steps #flow_cont .flow_step#flow_step04 h4 strong span{ width: 11.25vw; left: 0;}
#beginner .steps #flow_cont .flow_step h5{ margin-top: 3.75%; font-size: 1rem;}
}

/*point*/
#beginner .points{ background: #fff9e4; padding: 70px 0;}
#beginner .points h3{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 30px;}
#beginner .points h3 span{ font-size: 1.25rem; line-height: 1em; margin-bottom: 0.5em; position: relative;}
#beginner .points h3 span:before{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; left: -0.75em; bottom: -0.1em; transform: rotate(-22.5deg);}
#beginner .points h3 span:after{ content: ""; width: 2px; height: 110%; background: #000; position: absolute; right: -0.75em; bottom: -0.1em; transform: rotate(22.5deg);}
#beginner .points h3 strong{ font-size: 1.5rem; line-height: 1em; color: #335eab;}
#beginner .points ul{ width: 750px; margin: auto; display: flex; flex-wrap: wrap; gap: 30px;}
#beginner .points ul li{ width: calc(50% - 15px); border-radius: 10px; box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px;}
@media screen and (max-width:768px){
#beginner .points{ padding: 10% 0;}
#beginner .points h3 span{ font-size: 1.25rem;}
#beginner .points h3 strong{ font-size: 1.5rem;}
#beginner .points ul{ width: 100%; gap: 3.75vw 2.5vw;}
#beginner .points ul li{ width: calc(50% - 1.25vw); border-radius: 1.25vw;}
}

/*safety*/
#beginner .safety{ background: #fff; padding: 70px 0;}
#beginner .safety h3{ text-align: center; margin-bottom: 30px;}
#beginner .safety ul{ margin: auto; display: flex; flex-wrap: wrap; gap: 40px;}
#beginner .safety ul li{ width: calc(50% - 20px);}
@media screen and (max-width:768px){
#beginner .safety{ padding: 10% 0 0;}
#beginner .safety h3{ margin-bottom: 3.75%;}
#beginner .safety ul{ display: block; width: calc(100% + 7.5vw); margin-left: -3.75vw;}
#beginner .safety ul li{ width: 100%; margin-top: 3.75%;}
}





/*staff*/
#staff .lead{ padding: 70px 0 50px; background: #fff9e4;}
#staff .lead p.lead_txt{ text-align: center; font-size: 1.25rem; font-weight: bold;}

#staff #staff_list{ background: #fff; padding: 40px 0 70px;}
#staff #staff_list .tit{ display: flex; align-items: center; justify-content: center; margin-bottom: 40px;}
#staff #staff_list h3{ display: flex; flex-direction: column; text-align: center;}
#staff #staff_list h3 span{ font-size: 1.25rem; border-bottom: 2px dotted #335eab; padding-bottom: 0.5em; margin-bottom: 0.5em; position: relative;}
#staff #staff_list h3 span figure.ill{ width: 113px; position: absolute; left: -113px; bottom: 0;}
#staff #staff_list h3 strong{ font-size: 1.75rem; color: #335eab;}
#staff #staff_list ul{ display: flex; flex-wrap: wrap; gap: 25px 40px;}
#staff #staff_list ul li{ width: calc(50% - 20px);}
@media screen and (max-width:768px){
#staff .lead{ padding: 10% 0 7.5%;}
#staff .lead p.lead_txt{ font-size: 1.1rem;}

#staff #staff_list{ padding: 5% 0 0;}
#staff #staff_list .tit{ margin-bottom: 5%;}
#staff #staff_list h3 span{ font-size: 1.1rem; text-align: right;}
#staff #staff_list h3 span figure.ill{ width: 17.5vw; left: 0;}
#staff #staff_list h3 strong{ font-size: 1.5rem;}
#staff #staff_list ul{ display: block; width: calc(100% + 7.5vw); margin-left: -3.75vw;}
#staff #staff_list ul li{ width: 100%; margin-top: 3.75%;}
}





/*voice*/
#voice .lead{ padding: 70px 0 25px; background: #fff9e4;}
#voice .lead .att{ margin: 25px 25px 0;}
#voice .lead .att ul li{ padding-left: 1em; font-size: 0.7rem; position: relative;}
#voice .lead .att ul li:before{ content: "※"; position: absolute; left: 0; top: 0;}
#voice .lead h3{ display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #335eab; margin-bottom: 30px;}
#voice .lead h3 strong{ display: flex; align-items: center; justify-content: center; position: relative;}
#voice .lead h3 strong:before{ content: ""; width: 2px; height: 100%; background: #335eab; position: absolute; left: -0.75em; bottom: 0; transform: rotate(-22.5deg);}
#voice .lead h3 strong:after{ content: ""; width: 2px; height: 100%; background: #335eab; position: absolute; right: -0.75em; bottom: 0; transform: rotate(22.5deg);}

#voice #voice_list{ display: flex; flex-wrap: wrap; gap: 40px 20px;}
#voice #voice_list dl{ width: calc(33.33% - 14px); background: #fff; padding: 20px; border-radius: 8px; box-shadow:rgba(208, 203, 184, 0.3) 0 0 10px 6px;}
#voice #voice_list dl dt{ padding: 10px 0; border-bottom: 2px dotted #335eab; position: relative;}
#voice #voice_list dl dt span.cat{ display: flex; align-items: center; justify-content: center; text-align: center; width: 60px; height: 60px; background: #000; color: #fff; font-size: 0.7rem; line-height: 1.25em; border-radius: 50%; position: absolute; right: 0; top: 0;}
#voice #voice_list dl dt span.cat01{ background: #2dbcff;}
#voice #voice_list dl dt span.cat02{ background: #fe902e;}
#voice #voice_list dl dt span.cat03{ background: #78cd33;}
#voice #voice_list dl dt figure img{ height: 76px;}
#voice #voice_list dl dt figure{ margin-bottom: 10px;}
#voice #voice_list dl dt h4{ text-align: center; font-size: 0.85rem; line-height: 1.25em; color: #335eab;}
#voice #voice_list dl dd{ padding: 10px 5px 0;}
#voice #voice_list dl dd p{ font-size: 0.75rem; line-height: 1.5em; text-align: justify;}
@media screen and (max-width:768px){
#voice .lead{ padding: 10% 0 2.5%;}
#voice .lead .att{ margin: 5% 0 0;}
#voice .lead .att ul li{ font-size: 0.55rem;}
#voice .lead h3{ font-size: 1.5rem; margin-bottom: 5%;}

#voice #voice_list{ display: block;}
#voice #voice_list dl{ width: 100%; padding: 3.75vw 5vw 7.5vw; border-radius: 1.875vw; margin-top: 5%;}
#voice #voice_list dl dt{ padding: 5% 0 3.75%;}
#voice #voice_list dl dt span.cat{ width: 20vw; height: 20vw; font-size: 1rem;}
#voice #voice_list dl dt figure img{ height: 25vw;}
#voice #voice_list dl dt figure{ margin-bottom: 3.75%;}
#voice #voice_list dl dt h4{ font-size: 1.2rem;}
#voice #voice_list dl dd{ padding: 3.75% 0 0;}
#voice #voice_list dl dd p{ font-size: 0.9rem;}
}





/*faq*/
#faq .lead{ padding: 70px 0 25px; background: #fff9e4;}

#faq #qa_list dl{ margin-top: 20px; border-radius: 10px; overflow: hidden;}
#faq #qa_list dl dt{ background: #335eab; color: #fff; font-size: 0.95rem; font-weight: bold; padding: 20px 70px; position: relative; cursor: pointer;}
#faq #qa_list dl dt .ico{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #fff; color: #335eab; font-size: 1.1rem; line-height: 1em; font-weight: bold; border-radius: 50%; position: absolute; left: 20px; top: 20px;}
#faq #qa_list dl dt .toggle{ display: flex; width: 16px; height: 16px; position: absolute; right: 40px; top: 50%; transform: translateY(-50%);}
#faq #qa_list dl dt .toggle:before{ content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
#faq #qa_list dl dt .toggle:after{ content: ""; width: 100%; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(90deg); transition: 0.3s;}
#faq #qa_list dl dt.active .toggle:after{ transform: translateX(-50%) translateY(-50%) rotate(0deg); opacity: 0;}
#faq #qa_list dl dt p{ margin: 0; line-height: 1.5em;}
#faq #qa_list dl dd{ display: none; background: #fff; font-size: 0.8rem; padding: 20px 20px 20px 70px; position: relative;}
#faq #qa_list dl dd.active{ display: block;}
#faq #qa_list dl dd .ico{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #335eab; color: #fff; font-size: 1.1rem; font-weight: bold; border-radius: 50%; position: absolute; left: 20px; top: 18px;}
#faq #qa_list dl dd p{ margin: 0; line-height: 1.5em;}
#faq #qa_list dl dd p a{ text-decoration: underline;}
#faq #qa_list dl dd p a:hover{ text-decoration: none;}
@media screen and (max-width:768px){
#faq .lead{ padding: 10% 0 2.5%;}

#faq #qa_list dl{ margin-top: 5%; border-radius: 2.5vw;}
#faq #qa_list dl dt{ font-size: 0.8rem; padding: 5% 15%;}
#faq #qa_list dl dt .ico{ width: 6.25vw; height: 6.25vw; font-size: 1rem; left: 5%; top: 5vw}
#faq #qa_list dl dt .toggle{ width: 3.75vw; height: 3.75vw; right: 5%;}
#faq #qa_list dl dd{ font-size: 0.8rem; padding: 5% 5% 5% 15%;}
#faq #qa_list dl dd .ico{ width: 6.25vw; height: 6.25vw; font-size: 1rem; left: 5%; top: 5vw;}
}





/*カルーセルヒント*/
@media screen and (max-width:768px){
.scroll_ico{ background: rgba(51,94,171,0.75); color: #fff; text-align: center; padding: 7.5% 0; width: 45vw; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; border-radius: 1.875vw; pointer-events: none;}
.scroll_ico img{ width: 22.5vw; position: relative;}
.scroll_ico p{ font-size: 0.9rem; font-weight: bold; line-height: 1em; margin-top: 1em;}
}

/*animation*/
.scroll_ico img{ animation:scroll_ico ease-in-out 1.0s alternate infinite;}
@keyframes scroll_ico{
0%{ left: -7.5vw;}
100%{ left: 7.5vw;}
}