@charset "utf-8";
div.visual-image { overflow: hidden; height: calc(100vh - 100px); position: relative; background-image: url(../images/visual-image_pc.png); background-size: cover; background-repeat: no-repeat; background-position: bottom right; } 
@media only screen and (max-width: 800px) {
div.visual-image { background-image: url(../images/visual-image_tb.png); background-position: bottom center; }
}
@media only screen and (max-width: 500px) {
div.visual-image { background-image: url(../images/visual-image_sp.png); background-position: bottom center; }
}
/*Course---------*/
div.course { margin:0 0 60px 0; }
div.course div.california{ width:31.33%; margin:0 1% 0 1%; float:left; }
div.course div.nevada{ width:31.34%; margin:0 1% 0 1%; float:left; }
div.course div.hawaii{ width:31.33%; margin:0 1% 0 1%; float:left; }
div.course div.canada{ width:31.33%; margin:0 1% 0 17.65%; float:left; }
div.course div.asia{ width:31.33%; margin:0 17.65% 0 1%; float:left; }
div.course h3 { font-size: 20px; width:100%; text-align:center; margin:0 0 20px 0; }
div.course h3 img { width:36px; vertical-align: -5px; margin:0 8px 0 0; }
div.course h3 span { margin:0 0 0 8px; }
div.course img.photo { width:100%; margin:10px 0 20px 0; }

div.private{ position: relative; width:80%; margin:0 auto 40px; padding:20px; text-align:center; }
div.private::after,
div.private::before { content: ""; display: inline-block; height: 100%; position: absolute; width: 0.75em; }
div.private::before { border-bottom: 1px solid; border-left: 1px solid; border-top: 1px solid; bottom: 0; left: 0; }
div.private::after { border-bottom: 1px solid; border-right: 1px solid; border-top: 1px solid;  bottom: 0; right: 0; }

@media only screen and (max-width: 760px) {
div.course { margin:0 0 0px 0; }
div.course div.california{ width:96%; margin:0; float:none; margin:0 2%; }
div.course div.nevada{ width:96%; margin:0; float:none; margin:50px 2% 0; }
div.course div.hawaii{ width:96%; margin:0; float:none; margin:50px 2% 0; }
div.course div.canada{ width:96%; margin:0; float:none; margin:50px 2% 0; }
div.course div.asia{ width:96%; margin:0; float:none; margin:50px 2% 0; }
div.private{ margin:40px auto 40px; text-align:left; }
}



/*Steps---------*/
div.steps { margin:0 0 60px 0; width:70%; margin:0 auto; }
div.steps div.step01 { width:18%; margin:0 1% 60px 1%; float:left; }
div.steps div.step02 { width:18%; margin:0 1% 60px 1%; float:left; }
div.steps div.step03 { width:18%; margin:0 1% 60px 1%; float:left; }
div.steps div.step04 { width:18%; margin:0 1% 60px 1%; float:left; }
div.steps div.step05 { width:18%; margin:0 1% 60px 1%; float:left; }
div.steps div.image { margin:0 0 20px 0; }
div.steps div.image  img.pc { display: block !important; width: 100%; }
div.steps div.image  img.sp { display: none !important; }
div.steps div.text {  }

@media only screen and (max-width: 640px) {
div.steps { width:80%; margin:0 10%; }
div.steps div.step01 { width:100%; margin:0; float:none; }
div.steps div.step02 { width:100%; margin:0; float:none; }
div.steps div.step03 { width:100%; margin:0; float:none; }
div.steps div.step04 { width:100%; margin:0; float:none; }
div.steps div.step05 { width:100%; margin:0; float:none; }
div.steps div.image  img.pc { display: none !important; }
div.steps div.image  img.sp { display: block !important; width: 100%; }
div.steps div.text { width:80%; margin:0 0 20px 20%; }
}

div.notice { width:86%; margin:0 auto 40px; padding:16px; border-top:1px solid #afafaf; }
div.notice div.date { width:fit-content; padding:8px 0; margin:8px 0 0 0; }

/*Voice---------*/
div.voice { width:86%; margin:0 auto 20px; padding:16px; border-top:1px solid #ebecd9; }
div.voice div.name { background:#ebecd9; width:fit-content; padding:8px 20px 7px; margin:20px 0 16px 0; border-radius: 30px; }
iframe.voice { border:none; width: 94%; height: 670px; overflow: hidden; margin:0 0 40px 3%; }

/*Notice---------*/
iframe.notice { border:none; width: 94%; height: 300px; overflow: hidden; margin:0 0 80px 3%; }