@charset "utf-8";

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

sp_modal

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

body.no-scroll {
 overflow:hidden;
}

/*---------------------------------------------
nav_menu_cont
---------------------------------------------*/
.modal-wrap#nav_menu input:checked + .modal-overlay .modal-content {
 background-color:var(--light-blue);
 height: 90vh;
 max-width: 90vw;
 max-height: 90vh;
 min-width: 80vw;
 width: 90vw;
 position:relative;
 z-index:200;
}

#nav_menu_cont {
 flex-direction:column;
 margin-top: -45px;
}

#nav_menu_cont #nav_menu_left {
 background-color:var(--white);
 order:2;
 padding:0 0 50px;
 width:100%;
}

#nav_menu_cont #nav_menu_left .pic img {
 height:250px;
}

#nav_menu_cont #nav_menu_left dl.address {
 padding: 40px 30px 20px 30px;
 row-gap:15px;
}

#nav_menu_cont #nav_menu_left dl.address dt a img {
 height:30px; 
}

#nav_menu_cont #nav_menu_left dl.address dt span {
 font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
}

#nav_menu_cont #nav_menu_left dl.address dd {
 font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
}

#nav_menu_cont #nav_menu_left .conversion_area > ul {
 row-gap:30px;
}

#nav_menu_cont #nav_menu_left .conversion_area > ul li a {
 font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
}

#nav_menu_cont #nav_menu_left .sns_menu {
 padding: 50px 30px 20px 30px;
}

#nav_menu_cont #nav_menu_left .sns_menu ul {
 justify-content:space-around;
}

/*--- nav_menu_right ---*/

#nav_menu_cont #nav_menu_right {
flex-direction:column;
order:1;
row-gap:0;
padding: 25px 20px 35px;
width:100%;
}

#nav_menu_cont #nav_menu_right h4 {
display:flex;
justify-content:start;
flex: 0 1 auto;
flex-shrink: 1;
margin-bottom:30px;
width: 100%;
}

#nav_menu_cont #nav_menu_right h4 a {
align-items:center;
background-color:var(--white);
border-radius:25px;
display:flex;
font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
padding: 15px 15px 15px 35px;
flex:0 1 auto;
}

#nav_menu_cont #nav_menu_right h4 a:hover {
border-radius:25px;
height:auto;
padding: 15px 15px 10px 40px;
}

#nav_menu_cont #nav_menu_right .menu {
width:100%;
}

#nav_menu_cont #nav_menu_right .menu h5 {
margin-bottom:0;
width:100%;
}

#nav_menu_cont #nav_menu_right .menu h5 a {
background-color:var(--white);
border-radius:10px 10px 0 0;
display:flex;
flex-direction:column;
padding:0;
width:100%;
}

#nav_menu_cont #nav_menu_right .menu h5 a:before {
content:none;
}

#nav_menu_cont #nav_menu_right .menu h5 a:after {
content:none;
}

#nav_menu_cont #nav_menu_right .menu h5 > img,
#nav_menu_cont #nav_menu_right .menu h5 a img {
 border-radius:10px 10px 0 0;
 display:block;
 object-fit:cover;
 object-position:center top;
 height:180px;
 width:100%;
 min-height:18vh;
}

#nav_menu_cont #nav_menu_right .menu h5 a > span {
 display:flex;
 padding:30px 30px 30px 25px;
 position:relative;
 width:100%;
}

#nav_menu_cont #nav_menu_right h5 a span span {
 display:none;
}

#nav_menu_cont #nav_menu_right .menu ul {
background-color:var(--white);
border-top:1px solid var(--gray_dd);
border-radius: 0 0 10px 10px;
column-gap:10px;
flex-wrap:wrap;
flex-direction:unset;
padding:15px;
row-gap:10px;
width:100%;
}

#nav_menu_cont #nav_menu_right .menu ul li {
width:auto;
}

#nav_menu_cont #nav_menu_right .menu ul li a {
background-color:var(--white);
border:2px solid var(--main);
border-radius:25px;
color:var(--main);
display:flex;
font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
padding:13px 25px 13px 15px;
}

#nav_menu_cont #nav_menu_right .menu ul li a:after {
left:auto;
right:10px;
opacity:0.5;
}

#nav_menu_cont #nav_menu_right .menu ul li a:hover {
border-radius:25px;
}

/*--- car ---*/

#nav_menu_cont #nav_menu_right .menu.car {
margin-bottom:0;
}

#nav_menu_cont #nav_menu_right .menu.car h5 a {
align-items:center;
display:flex;
/*flex-direction:unset;*/
}

#nav_menu_cont #nav_menu_right .menu.car h5 a:hover {
background-color:var(--light_yellow);
}

#nav_menu_cont #nav_menu_right .menu.car h5 a img {
border-radius:10px 0 0 0;
object-fit:cover;
/*width:30vw;*/
opacity:0;
-webkit-transition:opacity 3s;
transition: opacity 3s;
width:100%;
}

#nav_menu_cont #nav_menu_right .menu.car h5 a img.lazyloaded {
opacity:1;
}

#nav_menu_cont #nav_menu_right .menu.car h5 a span:before {
content:"\f054";
color:var(--blue);
font-family:var(--icon);
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
right:20px;
top:50%;
margin-top:-6px;
opacity:0.5;
position:absolute;
z-index:3;
}

#nav_menu_cont #nav_menu_right .menu.car h5 a span:after {
background-image:url(../../img/common/i_car.png);
background-position:center center;
background-size:contain;
background-repeat:no-repeat;
content:" ";
position: absolute;
bottom:15px;
right:45px;
width:80px;
z-index:1;
aspect-ratio: 182 / 111;
}

#nav_menu_cont #nav_menu_right .menu.car ul {
border-radius: 0;
}

/*--- option ---*/

#nav_menu_cont #nav_menu_right .menu.option_plan {
background-color:var(--white);
border-top:1px solid var(--gray_dd);
border-radius:0 0 10px 10px;
margin-bottom:20px;
}

#nav_menu_cont #nav_menu_right .menu.option_plan h5 {
padding:15px;
}

#nav_menu_cont #nav_menu_right .menu.option_plan h5 a {
background-color:#EDF6F1;
border-radius:6px;
font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));
line-height:1.3;
padding:30px 30vw 30px 20px;
padding-right:calc(30vw + 20px);
position:relative;
white-space: wrap;
}

#nav_menu_cont #nav_menu_right .menu.option_plan h5 a:after {
background-image:url(../../img/top/p_license_option_plan.webp);
background-position:right center;
background-size:contain;
background-repeat:no-repeat;
content:" ";
right:10px;
left:auto;
top:10px;
margin:0;
position: absolute;
z-index:1;
height:calc(100% - 20px);
width:30vw;
aspect-ratio: 249 / 100;
}

#nav_menu_cont #nav_menu_right .menu.option_plan ul {
display:none;
}

/*--- motor ---*/

#nav_menu_cont #nav_menu_right .menu.motor {
margin-bottom:20px;
}

#nav_menu_cont #nav_menu_right .menu.motor h5 a {
align-items:center;
display:flex;
/*flex-direction:unset;*/
}

#nav_menu_cont #nav_menu_right .menu.motor h5 a:hover {
background-color:var(--light_yellow);
}

#nav_menu_cont #nav_menu_right .menu.motor h5 a img {
border-radius:10px 0 0 0;
object-fit:cover;
object-position: center 20%;
/*width:30vw;*/
width:100%;
}

#nav_menu_cont #nav_menu_right .menu.motor h5 a span:before {
content:"\f054";
color:var(--blue);
font-family:var(--icon);
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
right:20px;
top:50%;
margin-top:-6px;
opacity:0.5;
position:absolute;
z-index:3;
}

#nav_menu_cont #nav_menu_right .menu.motor h5 a span:after {
background-image:url(../../img/common/i_motor.png);
background-position:center center;
background-size:contain;
background-repeat:no-repeat;
content:" ";
position: absolute;
bottom:5px;
right:35px;
width:90px;
z-index:1;
aspect-ratio: 97 / 75;
}

/*--- about ---*/

#nav_menu_cont #nav_menu_right .menu.about {
margin-bottom:20px;
}

#nav_menu_cont #nav_menu_right .menu.about h5 a {
align-items:center;
display:flex;
/*flex-direction:unset;*/
}

#nav_menu_cont #nav_menu_right .menu.about h5 a:hover {
background-color:var(--light_yellow);
}

#nav_menu_cont #nav_menu_right .menu.about h5 a img {
border-radius:10px 0 0 0;
object-fit:cover;
/*width:30vw;*/
width:100%;
}

#nav_menu_cont #nav_menu_right .menu.about h5 a span:before {
content:"\f054";
color:var(--blue);
font-family:var(--icon);
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
right:20px;
top:50%;
margin-top:-6px;
opacity:0.5;
position:absolute;
z-index:3;
}

/*--- student ---*/

#nav_menu_cont #nav_menu_right .menu.student {
margin-bottom:20px;
}

#nav_menu_cont #nav_menu_right .menu.student h5 a {
align-items:center;
display:flex;
flex-direction:unset;
}

#nav_menu_cont #nav_menu_right .menu.student h5 a:hover {
background-color:var(--light_yellow);
}

#nav_menu_cont #nav_menu_right .menu.student h5 a img {
border-radius:10px 0 0 0;
object-fit:cover;
object-position: left center;
width:30vw;
}

#nav_menu_cont #nav_menu_right .menu.student h5 a span:before {
content:"\f054";
color:var(--blue);
font-family:var(--icon);
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
right:20px;
top:50%;
margin-top:-6px;
opacity:0.5;
position:absolute;
z-index:3;
}

/*--- course ---*/

#nav_menu_cont #nav_menu_right .menu.course {
margin-bottom:0;
}

#nav_menu_cont #nav_menu_right .menu.course h5 a {
align-items:center;
display:flex;
flex-direction:unset;
}

#nav_menu_cont #nav_menu_right .menu.course h5 a:hover {
background-color:var(--light_yellow);
}

#nav_menu_cont #nav_menu_right .menu.course h5 a img {
border-radius:10px 0 0 0;
object-fit:cover;
object-position: left center;
width:30vw;
}

#nav_menu_cont #nav_menu_right .menu.course h5 a span:before {
content:"\f054";
color:var(--blue);
font-family:var(--icon);
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
right:20px;
top:50%;
margin-top:-6px;
opacity:0.5;
position:absolute;
z-index:3;
}

/*--- other_menu ---*/

#nav_menu_cont #nav_menu_right .other_menu {
 border-top:none;
 column-gap:20px;
 row-gap:20px;
 padding: 25px 0 0;
}

#nav_menu_cont #nav_menu_right .other_menu h6 {
 margin-bottom:0;
 width:100%;
}

#nav_menu_cont #nav_menu_right .other_menu h6 a {
 background-color:var(--white);
 border:1px solid var(--gray_dd);
 display:flex;
 font-weight:600;
 border-radius:25px;
 padding: 15px 30px 15px 15px;
}

#nav_menu_cont #nav_menu_right .other_menu h6 a:hover {
 border-radius:25px;
}

#nav_menu_cont #nav_menu_right .other_menu h6 a:after {
 left:auto;
 right:10px;
 opacity:0.5;
}

/*--- other_link ---*/

#nav_menu_cont #nav_menu_right .other_link {
 column-gap:20px;
 flex-wrap:wrap;
 row-gap:25px;
 padding: 35px 0 0;
}

#nav_menu_cont #nav_menu_right .other_link li {
 width:100%;
}

#nav_menu_cont #nav_menu_right .other_link li a {
 padding: 5px 10px 5px 17px;
}

#nav_menu_cont #nav_menu_right .other_link li a:after {
 left:5px;
}

/*---------------------------------------------
modal
---------------------------------------------*/
.close-button {
 font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.6944));
 position: sticky;
 top:20px;
 right:10px;
 z-index:10;
 margin-left: auto;
}

.modal-content .copyright {
 display:flex;
 justify-content:center;
 padding:15px;
 order:3;
}

.modal-content .copyright span {
 font-size: calc(0.7rem + ((1vw - 0.48rem) * 0.6944));
}

}