@charset "utf-8";

/*========================

sp_2nd_template.css

========================*/
@media screen and (max-width:768px) { 

/*---------------------------------------------
order
---------------------------------------------*/
#left_nav { order:4; }
#school_banner_slider { order:2; }
#conversion_area { order:3; }
.bread_crumb_list { order:5; }
#footer { order:6; }

/*---------------------------------------------
header
---------------------------------------------*/
header.scroll_fixed {
padding:0;
width:100%;
}

header.scroll_fixed #header {
width:100%;
}

header.scroll_fixed #header #header_cont {
flex:1 1 100%;
}

header.scroll_fixed #header #header_cont #header_left h1 img {
max-height: 70px;
}

header.scroll_fixed #header #header_cont #header_right .entry {
display:flex;
}

/*---------------------------------------------
left_nav
---------------------------------------------*/
#left_nav {
height:auto;
opacity:1;
}

#left_nav.fixed {
position:relative;
top:auto;
}

#left_nav #left_nav_menu {
height:auto;
padding:0 0 30px;
position:relative;
top:auto;
}

#left_nav #left_nav_menu .openList {
border-radius:0;
}

#left_nav #left_nav_menu .openList.active {
box-shadow:none;
padding:3px 3px 0;
}

#left_nav #left_nav_menu .openList dl dt span:first-child {
font-size: calc(1.6rem + ((1vw - 0.48rem) * 0.6944));
}

#left_nav #left_nav_menu .openList.active dl dt span:first-child {
font-size: calc(2.2rem + ((1vw - 0.48rem) * 0.6944));
}

#left_nav #left_nav_menu .openList dl.license dt {
justify-content:flex-end;
}

#left_nav #left_nav_menu .openList dl.license dt img {
max-height:100%;
text-align:right;
width:25%;
}

#left_nav #left_nav_menu .openList.active dl dd {
margin:0 -3px;
padding:0;
}

#left_nav #left_nav_menu .openList dl dd ul li {
border-top:1px solid var(--gray_dd);
}

#left_nav #left_nav_menu .openList dl dd ul li a {
padding:15px 10px 15px 25px;
}

#container #open_close_btn {
display:none;
}

/*---------------------------------------------
main
---------------------------------------------*/
#main {
padding:120px 0 0;
/*row-gap:0;*/
width:100%;
z-index:3;
}

#main #main_cont {
padding:40px 10px 10px;
row-gap:10px;
width:100%;
max-width:100%;
}

#main_cont .section {
padding:40px 10px 10px;
}

#main_cont .section .section_title h3 {
font-size: calc(1.8rem + ((1vw - 0.48rem) * 0.6944));
}

#main_cont .section .section_title span {
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
}

#main_cont .section .section_title p.lead {
font-size: calc(1.4rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
line-height:1.6;
}

/*---------------------------------------------
front_menu
---------------------------------------------*/
#front_menu {
display:block;
position:relative;
overflow-y:hidden;
}

#front_menu .scroll_link {
background-color:var(--orange);
content:" ";
height:100%;
width:30px;
right:0;
top:63px;
position:fixed;
z-index:4;
}

/*
#front_menu:before {
background-color:var(--orange);
content:" ";
height:100%;
width:30px;
right:0;
top:63px;
position:fixed;
z-index:4;
}

#front_menu:after {
content:"\f054";
color:var(--white);
font-family:var(--icon);
font-weight:600;
right:12px;
top:87px;
position:fixed;
font-size: calc(0.8rem + ((1vw - 0.48rem) * 0.6944));
z-index:4;
}
*/

#front_menu,
#front_menu.fixed {
border-radius:0;
min-height:58px;
position: fixed;
left: 0;
top:63px;
width:100%;
overflow-x:scroll;
z-index:5;
}

#front_menu dl.menu,
#front_menu.fixed dl.menu {
border-radius:0;
min-width:860px;
overflow-y:hidden;
}

#front_menu dl.menu dd ul,
#front_menu.fixed dl.menu dd ul {
border-top: 1px solid var(--gray_dd);
border-radius:0;
justify-content: start;
width:100%;
overflow-y:hidden;
}

#front_menu dl.menu dd ul li,
#front_menu.fixed dl.menu dd ul li {
border-radius:0;
display: flex;
overflow: hidden;
/*max-width: 260px;*/
max-width:100%;
width:auto;
}

#front_menu dl.menu dd ul li:first-child,
#front_menu.fixed dl.menu dd ul li:first-child {
border-radius:0;
}

#front_menu dl.menu dd ul li a,
#front_menu.fixed dl.menu dd ul li a {
display:flex;
font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.6944));
letter-spacing:-0.01em;
justify-content:center;
padding: 12px 35px 12px 10px;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
}

#front_menu dl.menu dd ul li:first-child,
#front_menu dl.menu dd ul li:last-child,
#front_menu dl.menu dd ul li:first-child a,
#front_menu dl.menu dd ul li:last-child a {
border-radius:0;
}

#front_menu dl.menu dd ul li a:before,
#front_menu.fixed dl.menu dd ul li a:before {
left:auto;
right:12px;
bottom:auto;
top:50%;
margin-left:0;
margin-top:-10px;
}

#front_menu dl.menu dd ul li a:after,
#front_menu.fixed dl.menu dd ul li a:after {
font-size: calc(0.6rem + ((1vw - 0.48rem) * 0.6944));
left:auto;
right:18px;
bottom:auto;
top:50%;
margin-left:0;
margin-top:-4px;
}

.left_scroll_button {
background-color:var(--white);
border:1px solid var(--gray_dd);
top:63px;
left:0;
position:fixed;
width:40px;
height:58px;
z-index:4;
}

.right_scroll_button {
background-color:var(--white);
border:1px solid var(--gray_dd);
display:flex;
top:63px;
right:0;
position:fixed;
width:40px;
height:58px;
z-index:4;
}

.left_scroll_button i,
.right_scroll_button i {
color:var(--blue);
display:block;
font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
position:absolute;
margin-top:-5px;
margin-left:-3px;
top:50%;
left:50%;
}

.left_scroll_button:hover,
.right_scroll_button:hover {
background-color:var(--blue);
cursor:pointer;
}

.left_scroll_button:hover i,
.right_scroll_button:hover i {
color:var(--white);
}

/*--- front_menu2 ---*/
#front_menu2 {
display:block;
position:relative;
}

#front_menu2,
#front_menu2.fixed {
border-top: 1px solid var(--gray_dd);
border-radius:0;
position: fixed;
left: 0;
top:63px;
width:100%;
overflow-x:scroll;
z-index:5;
}

#front_menu2 dl.menu,
#front_menu2.fixed dl.menu {
border-radius:0;
}

#front_menu2 dl.menu dd,
#front_menu2.fixed dl.menu dd {
border-radius:0;
}

#front_menu2 dl.menu dd ul,
#front_menu2.fixed dl.menu dd ul {
border-radius:0;
display:flex;
justify-content: start;
padding: 0 10px;
width:100%;
}

#front_menu2 dl.menu dd ul li,
#front_menu2.fixed dl.menu dd ul li {
border-radius:0;
display: flex;
}

#front_menu2 dl.menu dd ul li:first-child,
#front_menu2 dl.menu dd ul li:first-child a {
border-radius:0;
}

#front_menu2 dl.menu dd ul li a,
#front_menu2.fixed dl.menu dd ul li a {
background-color:var(--white);
display:flex;
font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.6944));
letter-spacing:-0.01em;
justify-content:center;
padding: 12px 20px;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
}

#front_menu2 dl.menu dd ul li a:before {
content:none;
}

#front_menu2 dl.menu dd ul li a:after {
content:none;
}

#front_menu2 dl.menu dd ul li:last-child a {
border-radius:0;
}

/*---------------------------------------------
section
---------------------------------------------*/
#main_cont .section .section_cont p.lead {
font-size: calc(1.4rem + ((1vw - 0.48rem) * 0.6944));
text-align:left;
}

/*--- pattern_a ---*/
#main_cont .section.pattern_a .box {
padding:10px;
}

#main_cont .section.pattern_a .box .section_cont {
padding:20px;
}

#main_cont .section.pattern_a .box .section_cont h4.lead {
font-size: calc(1.6rem + ((1vw - 0.48rem) * 0.6944));
}


/*---------------------------------------------
main_visual
---------------------------------------------*/
#main #main_visual {
border-radius:0;
height:400px;
padding-left:0;
overflow:visible;
z-index:-1;
}

#main #main_visual .box_wrap {
height:400px;
overflow:unset;
}

#main_visual > img {
border-radius:0;
height:300px;
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
}

#main_visual > img.lazyloaded {
opacity:1;
}

#main #main_visual.left_title {
height: 300px;
}

#main #main_visual h2.left_title {
align-items:flex-end;
/*background-color:var(--white);*/
/*background-color:var(--deepblue);*/
/*background-color:var(--yellow);*/
/*box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);*/
border-radius:50px;
justify-content:center;
/*padding:30px 10px;*/
margin:auto;*/
position:absolute;
top:auto;
right: 0;
left: 0;
bottom:-40px;
width: 80vw;
max-width: 400px;
position: absolute;
}

#main #main_visual h2.left_title:before {
 background-color:var(--white);
 border-radius:50px;
 box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

#main #main_visual h2.left_title span {
 color:var(--black);
 font-size: calc(1.6rem + ((1vw - 0.48rem) * 0.6944));
}

#main_visual h2:before {
 content:none;
 border-radius:50px;
 bottom:0;
}

#main #main_visual .box {
bottom: 90px;
width: calc(100vw - 100px);
}

#main #main_visual .full {
height:300px;
}

#main #main_visual .full img {
/*border-radius:0;*/
height:300px;
}

#main #main_visual .half {
flex-direction:column;
height:300px;
}

#main #main_visual .half img {
height:300px;
width:100%;
animation: change-img-anim 20s 0s infinite;
opacity: 0;
position: absolute;
left: 0;
top: 0;
}

#main #main_visual .half img:first-child {
border-radius:0;
}

#main #main_visual .box .title_txt {
row-gap:5px;
}

#main #main_visual .half img:nth-child(2) {
animation-delay:10s;
}

@keyframes change-img-anim {
  0%{ opacity: 0;}
  20%{ opacity: 1; }
  33%{ opacity: 1; }
  63%{ opacity: 0; }
  100%{ opacity: 0; }
}


/*--- head_info ---*/
#head_info {
max-width:200px;
z-index:4;
}

#head_info #head_info_left figure {
padding:0;
}

#head_info #head_info_cont #head_info_left .mark {
left:auto;
right: 80px;
bottom: 120px;
height:80px;
width: 80px;
}

#head_info #head_info_left .mark span {
font-size: calc(0.9rem + ((1vw - 0.48rem) * 0.6944));
}


/*--- motor ---*/

#main.motor #head_info #head_info_cont #head_info_left .mark {
bottom:20vw;
border-radius: 5vw;
height:10vw;
right: 12vw;
width:10vw;
}

#main.motor #head_info #head_info_left .mark span {
font-size: calc(0.7rem + ((1vw - 0.48rem) * 0.6944));
}


/*---------------------------------------------
school_banner_slider
---------------------------------------------*/
#school_banner_slider {
flex:0 0 100%;
padding:30px 30px 20px;
}

/*---------------------------------------------
price_table
---------------------------------------------*/
.price_table {
row-gap:10px;
}

.price_table .price_table_cont {
overflow-x: scroll;
}

.price_table .price_table_cont h4 {
font-size: calc(1.8rem + ((1vw - 0.48rem) * 0.6944));
padding: 20px 25px 25px 15px;
position: sticky;
left: 0;
}

.price_table .price_table_cont table {
min-width:700px;
}

.price_table .price_table_cont table thead tr th {
font-size: calc(1.4rem + ((1vw - 0.48rem) * 0.6944));
}

.price_table .price_table_cont table thead tr:first-child th:first-child {
position: sticky;
left: 0;
}

.price_table .price_table_cont table tbody tr th:first-child {
position: sticky;
left: 0;
white-space:nowrap;
width: 10%;
z-index:1;
}

.price_table .price_table_cont table tbody tr th {
font-size: calc(1.5rem + ((1vw - 0.48rem) * 0.6944));
}

.price_table .price_table_cont table tbody tr th .displacement {
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
}

.price_table .price_table_cont table tbody tr td {
font-size: calc(1.5rem + ((1vw - 0.48rem) * 0.6944));
}

.price_table#limit table tbody tr:first-child td:nth-child(2) {
min-width: 190px;
width: 20%;
}

.price_table p.note {
font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.6944));
}

.price_table .price_table_cont table tbody tr td .condition {
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
}

/*---------------------------------------------
time_table
---------------------------------------------*/
.time_table table thead tr th {
font-size: calc(1.5rem + ((1vw - 0.48rem) * 0.6944));
}

.time_table table tbody tr th {
font-size: calc(1.5rem + ((1vw - 0.48rem) * 0.6944));
}

.time_table table tbody tr td {
font-size: calc(1.5rem + ((1vw - 0.48rem) * 0.6944));
}

#ancTimetable .timetable_content p {
font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
line-height:1.6;
padding-bottom:15px;
}

.time_table table tbody tr.limited th span {
font-size: calc(0.6rem + ((1vw - 0.48rem) * 0.6944));
}

/*---------------------------------------------
entrance
---------------------------------------------*/
#ancEntrance .cancellation_policy label {
font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
}

#ancEntrance .cancellation_policy label:after {
font-size: calc(1.1rem + ((1vw - 0.48rem) * 0.6944));
margin-top: -5px;
}




}



@media screen and (max-width:600px) { 
#front_menu,
#front_menu.fixed {
min-height:57px;
}

#front_menu dl.menu dd ul,
#front_menu.fixed dl.menu dd ul {
height:57px;
}

.right_scroll_button,
.left_scroll_button {
height:57px;
}

}


@media screen and (max-width:480px) { 

#main_cont .section.pattern_a .box .section_cont {
padding:20px 10px 10px;
}

/*--- motor ---*/

#main.motor #head_info #head_info_cont #head_info_left .mark {
bottom:20vw;
height:60px;
right: 2vw;
transform:rotate(0deg);
width:60px;
}

#main.motor #head_info #head_info_left .mark span {
font-size: calc(0.7rem + ((1vw - 0.48rem) * 0.6944));
}

}