@charset "UTF-8";


header{ display: flex; flex-direction: column; justify-content: space-between; z-index: 999; position: relative; overflow: visible;padding-bottom: 2rem;padding-top: 0.25rem;}
header img{width: 100%; height: auto; aspect-ratio: attr(width) / attr(height);}

header #head_cont{display: flex;align-items: center;justify-content: space-between;z-index: 11; background-color:#fff;overflow: hidden;padding: 0 1em;max-width: 1900px;width: calc(100% - 2em);margin: auto;}
.menu-trigger{display: none;}
.subMenu-trigger{position: relative;}

header #head_left{position: relative;}
header #head_left a{display: flex; align-items: center; padding:0.75rem; position: relative; z-index: 1;}
header #head_left a:hover{opacity:1;}
/*header #head_left:after{content:"";width: 100%;height:130%; display: block;background-color:#fff;position: absolute; left: 0; top: 0;transform: rotate(11deg);transform-origin: 120% 100%;}*/
header #head_left img{height:1.5rem; width: auto;}
header #head_left img:nth-child(1){}
header #head_left img:nth-child(2){margin-left: 0.75em;height: 1.4rem;}
header #head_right{ display: flex; align-items: center;}
header #head_right>li{ }
header #head_right>li:last-child{}
header #head_right>li>a{ font-size: var(--font-SS); display: flex;padding:0.5em 1.5em;line-height: 1; align-items: center; white-space: nowrap; color: var(--color-red);font-weight:700;} 
header #head_right>li>a img{ display:block; height: 2em; margin-right: 0.75em;width: auto;}

header nav {max-width: 1900px; width: calc(100% - 2em); margin: auto;position: absolute;top: 3.5rem;background-color: var(--color-red);left: 0;right: 0;border-radius: 0.5rem;box-shadow:0px 1px 10px rgba(0, 0, 0, 0.075);z-index: 10;}
header nav.menu_fix{position: fixed; top: 10px;}
header nav>ul{ position: static; display: flex; justify-content: space-between; width: 100%; padding: 0.75em;}
header nav>ul>li{width: 100%;border-right: 1px solid rgb(255 255 255 / 50%);}
header nav>ul>li:last-child{border-right-style: none;}
header nav>ul>li>a{font-weight: 600;display: flex; padding: 0.5em; text-align: center; text-decoration: none; z-index: 11; line-height: 1.4; height: 100%; font-size: var(--font-M); align-items: center; justify-content: center;margin:0 0.5em; color: #fff;}
header nav>ul>li>a:hover{/*color: var(--color-red);*/ opacity: 1;}
header nav>ul>li>a.line-on{background-color: rgb(0 0 0 / 30%)!important;color:#fff!important;border-radius: 0.25rem;}

.ctg_about header nav>ul>li.navi_about>a,
.ctg_admission header nav>ul>li.navi_admission>a,
.ctg_license header nav>ul>li.navi_license>a,
.ctg_faq header nav>ul>li.navi_faq>a,
.ctg_download header nav>ul>li.navi_download>a,
.ctg_prof header nav>ul>li.navi_prof>a,
.ctg_seminar header nav>ul>li.navi_seminar>a,
.ctg_instit header nav>ul>li.navi_instit>a,
.ctg_news header nav>ul>li.navi_news>a,
.ctg_training header nav>ul>li.navi_training>a{background-color:#fff; color:var(--color-red);border-radius: 0.25rem;}

/*CSSのみドロップダウンメニュー*/
header nav>ul>li .smenu {display: flex; gap:1rem; position: absolute; left:0; max-height: 0; opacity: 0.5;overflow: hidden;transition: all 0.4s ease; z-index: 10; width: 100%;background-color:var(--color-red); padding: 0 1em !important;}
header nav>ul>li .smenu .sub_smenu{ width: 100%;}
header nav>ul>li .smenu .sub_smenu_ttl {padding-bottom: 0.75em; padding-left: 0.5em; letter-spacing: 0.1em;color:#fff;font-weight: 700;}
header nav>ul>li .smenu .sub_smenu_ttl:before{content: "";display: inline-block;height: 4px;width: 1em;background-color:#fff;vertical-align: middle;margin-right: 1em;margin-bottom: 0.2em;}
header nav>ul>li .smenu .sub_smenu_ul{padding: 1em; display: flex; gap:4%; flex-wrap: wrap; border-radius: 0.25em; background-color:#fff;}
header nav>ul>li .smenu .sub_smenu_ul li{width:48%;}
header nav>ul>li .smenu .sub_smenu_ul li>a{ display: block; padding:0.25em 0; font-size: var(--font-S); line-height: 1.4; padding-left: 0.75rem;}
header nav>ul>li .smenu .sub_smenu_ul li>a:hover{opacity:1; color: var(--color-red);}
header nav>ul>li .smenu .sub_smenu_ul li>a:before{content: "■"; font-size: 50%;vertical-align: middle; line-height: 1; color: var(--color-red);padding-bottom: 0.4em; display: inline-block;text-indent: -0.75rem;}
header nav>ul>li .smenu li:last-child>a{ border-bottom-style: none;}
header nav>ul>li .smenu .toggle_contents{ display: none;}
/*マウスオーバー時*/
header nav>ul>li .smenu-hover {max-height: 800px;opacity: 1;box-shadow:0px 8px 10px rgba(0, 0, 0, 0.05); border-radius: 0 0 0.5em 0.5em; padding-top: 1.5em!important; padding-bottom: 1em!important; }

/*
header #head_right>li.MypNav {width:12rem;}
header #head_right>li.MypNav a{border-radius: 0.35rem;border: solid 1px var(--color-red);justify-content: center;}
header #head_right>li.MypNav a:hover{opacity: 1;}
header #head_right>li.MypNav a.line-on{border-bottom-style: none; border-radius: 0.35em 0.35em 0 0;}
header #head_right>li.MypNav .smenu {width:12rem;display: flex; gap:1rem; position: absolute; max-height: 0; right: 1em; opacity: 0.5;overflow: hidden;transition: all 0.4s ease; z-index: 10;background-color:#fff; padding: 0 1em !important; border-right: solid 1px var(--color-red); border-left: solid 1px var(--color-red);}
header #head_right>li.MypNav .smenu .sub_smenu{ width: 100%;}
header #head_right>li.MypNav .smenu-hover {max-height: 800px;opacity: 1;box-shadow:0px 8px 10px rgba(0, 0, 0, 0.05); border-radius: 0 0 0.35em 0.35em; padding-top: 1em!important;padding-bottom: 1em!important;border-bottom: solid 1px var(--color-red); }
*/

header #head_right>li.MypNav {cursor: pointer;}
header #head_right>li.MypNav #formyp_btn{font-size: var(--font-SS);font-weight:700;padding:0.5em;width:9vw;min-width: 10em;line-height: 1;align-items: center;display: flex;white-space: nowrap;border-radius: 0.35rem;border: solid 1px var(--color-red);justify-content: center;color: var(--color-red);transition: 0.2s; opacity: 1.0; }
header #head_right>li.MypNav #formyp_btn:hover{opacity: 0.6;}
header #head_right>li.MypNav #formyp_btn img{display: block;height: 2em;margin-right: 0.75em;width:auto;}

header #head_right>li.NomNav>a{font-size: var(--font-SS);font-weight:700;padding:0.5em;width:9vw;min-width: 10em;line-height: 1;align-items: center;display: flex;white-space: nowrap;border-radius: 0.35rem;border: solid 1px var(--color-red);justify-content: center;color: var(--color-red);transition: 0.2s; opacity: 1.0; }


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

    header{	width: 100%; position: fixed; top: 0px;	overflow-y: visible; max-height: 100vh; padding: 0; min-width: initial;border-top: 5px solid var(--color-red);}
    header #head_cont{ height: 65px; padding: 0; justify-content: space-between; z-index: 999;width: 100%;}
    header #head_left{width:auto; height:100%;}
	header #head_left:after{display: none;}
	header #head_left a{display:flex;height:100%;align-items: center;justify-content: center;padding:0 3.5vw 0 3vw;width: 16vw;}
	header #head_left img{width:100%;height: auto; max-height: 50px;}
	header #head_left img:nth-child(2){display: none;}
    header #head_right{width: fit-content; position: absolute; margin: auto; left: 0; right: 0;}
    header #head_right>li{ width: auto; min-width: 15vw;}
    header #head_right>li>a{ flex-direction: column;padding: 0.4em 1em 0.5em 1em; text-align: center; font-size: var(--font-S); font-weight: 800;}
    header #head_right>li>a img{ margin-right:0;margin-bottom: 0.75em;height:1.75em;}
	header #head_right>li.MypNav {width: auto;min-width: 15vw;}
	header #head_right>li.MypNav #formyp_btn{width:100%;letter-spacing: -0.1em;min-width:initial;flex-direction: column;border-radius: 0.25rem;padding: 0.4em 0.5em 0.5em 0.5em;font-weight:800;font-size: var(--font-S);border-style: none;}
	header #head_right>li.MypNav #formyp_btn:hover{opacity: 0.6;}
	header #head_right>li.MypNav #formyp_btn img{height: 1.75em;margin-right:0;width:auto;margin-bottom: 0.75em;}
	header #head_right>li.NomNav>a{width:100%;letter-spacing: -0.05em;min-width:initial;flex-direction: column;border-radius: 0.25rem;padding: 0.4em 0.5em 0.5em 0.5em;font-weight:800;font-size: var(--font-S);border-style: none; }

    header nav { display: none; width:100%; min-height:calc(100vh - 65px); margin-bottom: 120px; box-shadow: none; background-color: var(--color-red); overflow-y: auto;height: 100%; border-radius: 0!important; top: 65px;}
    header nav.menu_fix {position: absolute;top: 65px;}
	header nav>ul{flex-direction: column;gap:0; padding:0.75em 1em 0 1em; background-color: var(--color-red); }
    header nav>ul>li{width: 100%!important; border-right-style:none; border-bottom: 1px solid rgb(255 255 255 / 50%);}
    header nav>ul>li:first-child{ /*border-top:1px solid rgb(255 255 255 / 50%);*/}
    
	header nav>ul>li>a{ font-size:4vw;  padding:1.25em 2vw; text-align: left; color: #fff!important; position: relative; font-weight: 700;margin: 0; background-color:var(--color-red)!important; }
	header nav>ul>li>a:hover{color: #fff;}
	header nav>ul>li>a.line-on{background-color: #fff!important; color: var(--color-red)!important;border-radius: 0.25rem 0.25rem 0 0!important;}
	header nav>ul>li>a:after {content: ""; display: inline-block; position: absolute;margin: auto;right: 1em;top: 0;bottom: 0;width: 0.9em;height:0.9em; background-image: url(../img/arr_WHT.svg);	background-repeat: no-repeat; background-position: center center; background-size: contain;}
	header nav>ul>li>a.line-on:after{background-image: url(../img/arr_RED.svg); transform: rotate(90deg);}


	/*CSSのみドロップダウンメニュー*/
	header nav>ul>li .smenu {position: relative;flex-direction: column;padding: 0 4vw!important;transition: all 0.6s ease;opacity: 1; background-color: #fff;}
	header nav>ul>li .smenu .sub_smenu{}
	header nav>ul>li .smenu .sub_smenu_ttl {font-size: 3.75vw;color:var(--color-red);}
	header nav>ul>li .smenu .sub_smenu_ttl:before{background-color: var(--color-red);}
	header nav>ul>li .smenu .sub_smenu_ul{padding-top: 0;}
	header nav>ul>li .smenu .sub_smenu_ul li{width:100%;}
	header nav>ul>li .smenu .sub_smenu_ul li>a{ font-size:3.75vw; padding: 0.5em 0 0.5em 0.75rem;}
	header nav>ul>li .smenu .sub_smenu_ul li>a:hover{}
	header nav>ul>li .smenu .sub_smenu_ul li>a:before{margin-right: 1em;}
	header nav>ul>li .smenu li:last-child>a{}
	header nav>ul>li .smenu .toggle_contents{}
	/*マウスオーバー時*/
	header nav>ul>li .smenu-hover {box-shadow:none; max-height:initial;}
	header nav>ul>li:last-child .smenu-hover{margin-bottom: 1em;}




    /*ハンバーガー*/
    a.menu-trigger { position: absolute; aspect-ratio: 1 / 1; width: auto; height: 100%; display: block; right: 0; top: 0; }
	a.menu-trigger:after{content:"MENU"; position: absolute; margin: auto; bottom: 0.75em; left: 0; right: 0; width: fit-content; color:var(--color-red); font-weight: 800; font-size: 85%;}
	a.menu-trigger.active{background-color:var(--color-red); }
	a.menu-trigger.active:after{content: "CLOSE";color:#fff;}
    a.menu-trigger span { position: absolute; left: 0;right: 0; margin: auto; width: 50%; height: 3px; background-color:var(--color-red);}
    a.menu-trigger,
    a.menu-trigger span { display: block; transition: all .4s;}
	a.menu-trigger.active span{background-color:#fff;}
    a.menu-trigger span:nth-of-type(1){	top: 14px;}
    a.menu-trigger.active span:nth-of-type(1) { transform: translateY(0) rotate(-45deg); top: 24px;}
    a.menu-trigger span:nth-of-type(2){ top: 23px;}
    a.menu-trigger.active span:nth-of-type(2) { opacity: 0;}
    a.menu-trigger span:nth-of-type(3){top: 32px; }
    a.menu-trigger.active span:nth-of-type(3) { transform: translateY(0) rotate(45deg); top: 24px;}

    /*アコーディオン*/
    nav .toggle_switch::after { width: 1em; height: 1em; background-image: url("/com/img/comm_arrBL01.svg"); top: 0; bottom: 0; right: 1em; transform: rotateZ(0deg); margin: auto;}
    nav .toggle_switch.open::after {transform: rotateZ(-180deg); }
    nav .toggle_switch.open { border-bottom: 1px solid var(--color-gray); background-color: var(--comm-Lightblue);}
    nav .toggle_contents a{ padding-left: 6vw; padding-right: 6vw; display: block; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px dotted #000000;}
	nav .toggle_switch.nav_seminar + ul.smenu.colbox{display: none;}

    /**hoverアンダーライン**/
    a.over_uline{width:100%;}
    a.over_uline:hover{ }
    a.over_uline::before {display: none;}
    a.over_uline:hover::before { transform: scaleX(0);}


}