@charset "utf-8";

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

tb-modal

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

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

#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 50px 20px 50px;
}

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

#nav_menu_cont #nav_menu_left .tel {
 max-width:100%;
 row-gap:20px;
 width:100%;
}

#nav_menu_cont #nav_menu_left .tel > dl > dt {
 max-width:360px;
 width:100%;
}

#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: 15px 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));*/
 font-size: 1.2rem;
 line-height:1;
 padding: 20px 20px 20px 35px;
}

#nav_menu_cont #nav_menu_right h4 a:hover {
 background-color:var(--white);
 border-radius:25px;
 height:auto;
}

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

#nav_menu_cont #nav_menu_right .menu h5 {
 background-color:var(--gray_dd);
 border-radius:10px 10px 0 0;
 margin-bottom:0;
 width:100%;
}

#nav_menu_cont #nav_menu_right .menu h5 a {
 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 a img {
 /*border-radius:10px 10px 0 0;*/
 object-fit:cover;
 object-position:center top;
 margin:0 auto;
 min-height:130px;
 height:260px;
 width:100%;
 max-width:400px;
}

#nav_menu_cont #nav_menu_right .menu h5 a > span {
 align-content:center;
 background-color:var(--white);
 display:flex;
 /*font-size: calc(1.3rem + ((1vw - 0.48rem) * 0.6944));*/
 justify-content: start;
 align-items: center;
 font-size: 1.7rem;
 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 h5 a img {
 display:block;
}

#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:1px solid var(--gray_cc);
 border-radius:25px;
 color:var(--gray_33);
 display:flex;
 font-size: 1.3rem;
 padding: 18px 35px 18px 25px;
}

#nav_menu_cont #nav_menu_right .menu ul li a:after {
 left:auto;
 margin-top: -4px;
 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;
}

#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:0;
 object-fit:cover;
 width:100%;
}

#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(/wp-content/themes/kohnan-dvs/images/common/i_license_car.webp);
 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 {
 background-color:var(--white);
 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 15vw 30px 20px;
 padding-right:calc(15vw + 20px);
 position:relative;
 white-space: wrap;
 overflow:visible;
}

#nav_menu_cont #nav_menu_right .menu.option_plan h5 a:after {
 background-image:url(/wp-content/themes/kohnan-dvs/images/common/p_charactor_c.webp);
 background-position:right bottom;
 background-size:contain;
 background-repeat:no-repeat;
 content:" ";
 right:10px;
 left:auto;
 top:auto;
 bottom:0;
 margin:0;
 position: absolute;
 z-index:1;
 height:15vw;
 width:auto;
 aspect-ratio: 40 / 51;
}

#nav_menu_cont #nav_menu_right .menu.option_plan ul {
 border-top:none;
 padding:0 15px 15px;
}

/*--- 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;
}

#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:0;
 object-fit:cover;
 object-position: center 20%;
 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(/wp-content/themes/kohnan-dvs/images/common/i_license_motor.webp);
 background-position:center center;
 background-size:contain;
 background-repeat:no-repeat;
 content:" ";
 position: absolute;
 bottom:8px;
 right:45px;
 width:60px;
 z-index:1;
 aspect-ratio: 9 / 10;
}

/*--- 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;
}

#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;
 height:150px;
 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 {
 /*background-color:var(--white);*/
 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;
 height:150px;
 object-fit:cover;
 object-position: right 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 {
 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;
 height:150px;
 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;
 display:flex;
 flex-wrap:wrap;
 row-gap:20px;
 padding: 25px 0 0;
}

#nav_menu_cont #nav_menu_right .other_menu h6 {
 margin-bottom:0;
 width:calc(100% / 2 - 20px);
}

#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 18px;
}

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

/*---------------------------------------------
modal
---------------------------------------------*/
.close-button {
 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));
}

}