html,body{margin: 0;padding: 0;font-size: 14px;}
body *{box-sizing:border-box;}
body{font-size: 1rem;font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;}
/*Webフォント指定*/
@font-face {font-family: 'mplus';src: url('../fonts/mplus-1p-light.eot');src: url('../fonts/mplus-1p-light.eot?#iefix') format('embedded-opentype'),url('../fonts/mplus-1p-light.woff') format('woff'),url('../fonts/mplus-1p-light.ttf') format('truetype');}
body,td,th {font-family: 'mplus', sans-serif;}

h2,h3,h4,h5{margin-bottom: 1.5rem;font-weight: 400;line-height: 1.4;font-feature-settings: 'palt';}
h2{font-size: 2rem;}
h3{font-size: 1.6rem;}
h4{font-size: 1.2rem;}
h5{font-size: 1rem;}
p{margin-bottom: 1rem;line-height: 2;font-feature-settings: 'palt';}
img{vertical-align: bottom;}
.vPCIL,.vPCIB,.vPCB{display: none;}
.vSPBR{display: inline}
.w100img{display: block;width: 100%;height: auto;}
a{position: relative;display: inline-block;width: 100%;text-decoration: none;transition: opacity 0.3s ease;}
a:hover{font-style: none;opacity: 0.5;}
/*レイアウト*/
article{width: 100%;}
header,main{position: relative;margin: 0 auto;max-width: 1920px;}
section{position: relative;border-top: transparent;}
.spnav{float: right;margin-top: 1.2vw;max-width: 50px;
 max-height: 50px;width: 9.5vw;height:7.8vw;transition: margin-top 0.3s ease;}
.header{/*background: rgba(255,0,0,0.3);*/position: absolute;top:0;left: 0;z-index: 100;padding: 3.9vw 4.7vw 0 3.12vw;width: 100%;}
.header_inner{position: relative;margin: 0 auto;max-width: 1590px;/*background: rgba(255,0,0,0.3);*/width: 100%;}
.logo_salezio{display: inline-block;margin: 0;}
.logo_salezio img{max-width: 215px;width: 34vw;height: auto;}
.pc_info{display: none;}
.open #btnOpen{display: none;}
.btn_close{display: none;}
.btn_info {display: inline-block;float:right;margin: 0.8vw 8vw 0 0;max-width: 50px;width: 7.8vw;}
.btn_box{display: block;margin: 0 auto;width: 66%;border-radius: 8px;color: #000;text-align: center;font-weight: 400;font-size: 1.4rem;line-height: 3;}
.btn_w{background-color: #E6E6E6;}
.entrance{position: absolute;bottom: 14vw;left: 17%;}
.tit{text-align: center;}
.tit img{height: 5.07vw;height: auto;}
.tit + p{text-align: center;}
h2.tit,h3.tit{margin: 0;padding: 8vw 0 6vw;text-align: center;font-size: 1rem;line-height: 1;}

/*.key_vis_sc///////*/
.key_vis_sc{min-height: 1.9vw;}

/*.about_kosen///////*/
.about_kosen_sc{min-height: 1vw;position: relative;top:-2px;}

/*.dept///////*/
.dept_sec{display: flex;margin: 0 auto;width: 82.7vw;flex-flow: row wrap;align-items: center;}
.dept_sec > div {max-width:calc(50% - 4.1vw); flex-basis: calc(50% - 4.1vw);align-self :flex-start;}
.dept_sec > div:nth-of-type(2n + 1){margin-right: 8.2vw;}
.c_ad,.c_ee,.c_me,.c_cs{margin-bottom: 24%;width: 100%!important;color: #fff !important;line-height: 2;}
.c_ad{background: #EA618E;}
.c_ee{background: #00A497;}
.c_me{background: #EE7800;}
.c_cs{background: #38A1DB;}
.dept{background: #F5FAFC}

/*.wprks///////*/
.copy_works{position: absolute;bottom: 22vw;left: 8.65%;margin: 0 auto;width: 82.7%;color: #fff;text-align: center;line-height: 1.7;}
.btn_works{position: absolute;bottom: 8vw;left: 20%;width: 60%;background: transparent;color: #72879c;line-height: 2;}

/*.event///////*/
.event_div{margin:0 auto;width: 88%;}
.event_div a{display: inline-block;margin-bottom: 5vw;}

/*.about///////*/
.tit_about{position: absolute;top:63.5vw;left: 0;display: block;width: 100%;}
.about_div:nth-of-type(1) div img{margin-bottom: 0;}
.about_div{display: flex;/*margin-bottom: -4px;*/flex-flow: row wrap;align-items: center;}
.about_div a{/*margin-bottom: -2vw;*/max-width:50%;flex-basis: 50%;align-self :flex-start;}
.exam_copy{display: block;margin: 2rem 0;color: #fff;text-align: center;font-weight: 400;font-size: 48px;}
.btn_exam{background: #FBCA4D;line-height: 2;}

/*INQUIRY///////*/
.inquiry_sc{position: relative;padding-bottom: 5vw;background: #D5B345 url(../img_2022/png/bg_emblem_sp.png) no-repeat right top;background-size: contain;}
.btn_inquiry{background:#D5B345;color: #D5B345;}
.inquiry_sc p{color: #fff;font-size: 1rem;padding: 0 2em;}

.bg_emblem{position: absolute;top:0;left: 0;z-index: 1;}

/*ACCESS///////*/
access_sc{padding-bottom: 5vw;}
.btn_access{background: #949495;color: #fff;}
.access_sc div:nth-of-type(1){margin-bottom:5vw; }
#map_gray{max-height: 800px;width: 100%;height: 100vw;filter: grayscale(100%);}

/*SPCIAL CONTENTS///////*/
.sp_cont_div{margin: 0 auto; width: 88%;}
.sp_cont_div h3{margin-top: 7vw;line-height: 1.8;}
.sp_cont_div{text-align: center;}
.sp_cont_div div{position: relative;margin-bottom: 4vw;border-radius: 8px;}
.sp_cont_div div.cont_inner{position: absolute;top: 0;left: 0;width: 100%;}
.cont_inner h3{position: relative;overflow: hidden}
.cont_inner h3 img{position: relative;width: 124%;left: -12%;}
.cont_inner p{margin: 4vw 0 6vw; color: #fff;}
p.L1{padding: 1em 0}
p.L2{padding: 0.05em 0;}

/*ハンバーガーメニュー*/
.open #headNaviSP{display: block !important;}
#headNaviSP {position:fixed;top: 0;left: 0;z-index: 500;z-index:100;margin: 0;padding: 10vh 0 0;padding-bottom: 20px;width: 100%;height: 100vh;background: rgba(0, 102, 204, 0.9) url(../img/bg/bg_star3.png) no-repeat right bottom;background-size:65%;opacity: 1;}
#headNaviSP a {display: block;margin: 0 auto 10px;max-width: 240px;width: 35%;color: #fff;vertical-align: middle;font-size: 1.2em;}
#headNaviSP a.tcY{color: #fabe00;}
#headNaviSP a.tcW{color: #fff !important;}
#headNaviSP a.roll {min-width: 240px;}
#headNaviSP a em {display: inline-block;/*font-weight: bold;*/font-style: normal;}
#headNaviSP a img {margin: 0;width:62px;height: auto;vertical-align: middle;opacity: 1!important;}
#headNaviSP a:hover {text-shadow: 0 0 3px #06c, 0 0 3px #06c, 0 0 5px #06c, 0 0 5px  #006ebc;opacity: 0.5 !important;}
#headNaviSP a:hover img {opacity: 1;}
#btnClose {position: fixed;top: 20px;right: -50px;z-index: 500;display: none;margin: 0 !important;width: 42px !important;height: auto;cursor: pointer;transition: .5s;}
.open #btnClose {right: 16px;display: block;}
#headNaviSP a#btnClose img{
 margin: 0;
 width: 36px;
 height: auto;
 vertical-align: middle;
 opacity: 1!important;}

.BT2 {border-top: 2px solid #fff;}
.pT10 {padding-top: 10px;}
/*.tpcList----*/
.tpcList dt{margin-bottom: 0.5rem;color: #999;}
.tpcList dd{margin-bottom: 1rem;}
.spfb a:nth-of-type(1){color: #fff !important;}
.spfb2 a:nth-of-type(1){color: #fff !important;}

.btn_entry{margin: 0 auto;max-width: 1429px;transition: left 0.3s ease;}
.fade_in{opacity: 0;animation: fadein 1s ease 1s forwards;}
/*.swiper-*/
.swiper-slide img.w100img{display: block;}
.swiper-slide{position: relative;}
.swiper-slide a:before{content:'';display: block;width: 100%;height: 100%;position: absolute;top:0;left: 0;
 background: -moz-linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,0)));
 background: -webkit-linear-gradient( rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
 background: -o-linear-gradient( rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
 background: linear-gradient( rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%);z-index: 1;}
.btn_viewall{width: 50%;max-width: 153px; display: block;margin: 5% auto 0;position: relative;}
.swiper-button-next, .swiper-button-prev{top: initial !important;bottom: 0;width: 15% !important;}
.swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0 !important;right: auto;}
.swiper-button-next, .swiper-rtl .swiper-button-pre {right: 0 !important;left: auto;}
.swiper-button-next:after, .swiper-button-prev:after{font-family: sans-serif !important;font-size: 0 !important;}
/*.act_*/
.act_slide{margin: 0 auto 5vw;width: 74%;}
.swiper-slide {color: #ffffff;width: 30vw;height: 100%;text-align: center;/*line-height: 300px;*/color: #000;}
.swiper-slide a{z-index: 10;}
.swiper-slide .act_caption{display: block;position: absolute;left: 0;bottom: 1vw;color: #000;text-align: center;line-height: 1.6;width: 100%;font-size: 0.8rem ;filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 2px #fff);z-index: 10;}
/*#bottomNavi-------*/
#bottomNavi {clear: both;padding: 20px 0;text-align: center;}
#bottomNavi a {display: inline-block;width: 54px;height: 54px;margin: 0 1.5% 1em;text-align: center;color: #333;-webkit-border-radius: 50%;
 -moz-border-radius: 50%;border-radius: 50%;background: #fff;box-shadow: 0 0 0 1px #000;}
#bottomNavi a:hover {color: #333 !important;background: #fff !important;box-shadow: 0 0 8px 2px  #006ebc;}
#bottomNavi a img {width: 85%;height: auto;}
#bottomNavi a em {font-size: 9px;font-weight: normal;font-style: normal;display: block;margin-bottom: 12px;}
#bottomNavi a:nth-child(4) em {letter-spacing: -1px;}
/*footer*/
footer{max-width: 1920px;margin: 0 auto;padding: 1em 0;color: #fff;background: #006ebc;}
a{color: #fff;}
footer .inner {width: 88%;margin: 0 auto;}
.siteMap {position: relative;font-size: 0.9rem;}
ul.siteMapList li {font-size: 14px;margin-bottom: 1.5em;list-style-type: none;}
ul.siteMapList li h3 {font-size: 110%;font-weight: bold;line-height: 1.6;margin: 1em 0 0.5em;border-bottom: 1px solid #fff;}
.Sbtn {margin-bottom: 2em;text-align: center;}
.Sbtn a {display: inline-block !important;width: 42px;margin: 0 .3em;}
.Sbtn a:hover {background: transparent !important;}
.Sbtn a:hover img {opacity: .5;}
ul.siteMapList{padding-left: 0;}
ul.siteMapList li a {font-size: 1em;display: block;padding: .6em 0;color: #fff;}
ul.siteMapList li .group a,ul.siteMapList li .groupSP a {padding: .4em 0;}
ul.siteMapList li a:hover {color: #fff;background: rgba(0,78,162,.5);}
.group{/*padding-left: 1rem;*/width: 50%;float: left;}
.groupSP{/*padding-left: 1rem;*/width: 50%;float: left;}
.clearfix:after {content: "";display: block;clear: both;}
.clearfix:before {content: "";display: block;clear: both;}
.clearfix {display: block;}
p.footerLogo{font-size: 1em;margin: .8em 0;text-align: center;}
p.footerLogo + em{font-size: 1.4rem;font-weight: bold;font-style: normal;display: block;text-align: center;}
footer em + p {line-height: 1.4;font-size: 0.9rem;margin: .8em 0;text-align: center;}
.T1L {font-size: .9em;margin: 0 10px;padding-top: 1em;border-top: 1px solid #fff;text-align: center;}
p.footerLogo img {width: 190px;height: auto;}

/*アニメーション*/
@keyframes fadein {
 0% {opacity: 0;}
 20% {opacity: 0;}
 80% {opacity: 1;}
 100% {opacity: 1;}
}
/*SP縦*/

@media screen and (max-width:480px){
 .copy_works{position: absolute;bottom: 22vw;left: 0;margin: 0 auto;width: 100%;color: #fff;text-align: center;line-height: 1.7;}
/*480px以下:SP縦*/}


@media screen and (min-width:600px){
html,body{font-size: 16px;overflow-x: hidden;}
/*600pxから960pxまで:タブレット*/}

@media screen and (min-width:768px) {
 html,body{overflow-x: hidden;}
 h2.tit{padding: 4% 0 3%;}
 h2.tit img{display: block;margin: 0 auto;max-width: 54%;height: initial;}
 .btn_info{margin: 7px 40px 0 0;width: 225px;}
 .btn_box{width: 23%;}
 .btn_box.entrance{width: 180px;height: 29px;}
 .copy_works{bottom: 26%;}
 .btn_works{bottom: 10%;left: 41.1%;}
 /*.key_vis_sc///////*/
 .key_vis_sc{min-height: 57%;}
 /*.about_kosen///////*/
 .about_kosen_sc{min-height: 35.7vw;}
 .entrance{right: 35px;bottom: 40px;left: initial;transition: right 0.3s ease;}
 .entrance .w100img{width: 180px;height:auto;}
 /*act*/
 .act_div{display: flex;}
 .act_div h2{flex-basis: 30%;max-width:30%;align-self :center;overflow: hidden;}
 .act_div h2 img{width: 185%;max-width: 185%;display: block;position: relative;left: -42.5%;}
 .act_slide{margin: 5% 0 5% 0;flex-basis: 79%;max-width:70%;align-self :center;position: relative;}
 .btn_viewall{width: 24%;max-width: 193px;}
 /*.dept///////*/
 .dept_sec{display: flex;margin: 0 auto;width: 82.7%;flex-flow: row nowrap;align-items: center;justify-content:space-between}
 .dept_sec > div {max-width:calc(25% - 4vw); flex-basis: calc(25% - 4vw);align-self :flex-start;}
 .dept_sec > div:nth-of-type(2n + 1){margin-right: 0;}
 /*.event///////*/
 .event_div{display: flex;justify-content:space-between;}
 .event_div > a{position: relative;margin-right:1.67%;margin-bottom: 5.75%;max-width: calc(33.33% - 1.67%);flex-basis:calc(33.33% - 1.67%);align-self: flex-start;}
 .event_div > a:last-of-type{margin-right: 0;}
 /*.about///////*/
 .about_div{display: flex;}
 .about_div a{/*margin-bottom: -4px;*/max-width: 25%;flex-basis: 25%;align-self: flex-start;display: inline-block;}
 .tit_about{top: 35%;}
 .about_div .panel a{display:block;}
 /*.sp_cont///////*/
 .sp_cont_div{display: flex;;justify-content:space-between;}
 .sp_cont_div > div{position: relative;/*margin-right:1.67%;*/margin-bottom: 5%;max-width: calc(33.33% - 1.67%);flex-basis:calc(33.33% - 1.67%);align-self: flex-start;}
 .sp_cont_div > div:last-of-type{margin-right: 0;}
 .sp_cont_div h3{margin: 8% 0 5%;line-height: 1.8;}
 .cont_inner p{margin: 3% 0;color: #fff;font-size: 12px;}
 .cont_inner .btn_box{width: 82%;}
 p.L1{padding: 1.7em 0}
 p.L2{padding: 0.2em 0}

 .inquiry_sc p{color: #fff;font-size: 1rem;}
 .inquiry_sc {background: #D5B345 url(../img_2022/png/bg_emblem_sp.png) no-repeat right 38% top 0%;background-size: contain;}
 /*.swiper*/
 .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;width: 30vw;height: 100%;text-align: center;line-height: 1,7;}
 .act_div h2.tit{padding: 0 0 7%;}
 .act_div .w100img{height: 100% !important;}
 .act_caption{font-size: 0.9rem !important;}
 .swiper-wrapper{height: 26.8vw !important;/*border-bottom: 1px solid #f00 !important;*/}
 .swiper-button-next, .swiper-button-prev{width: 8% !important;}
 .swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0 !important;right: auto;}
 .swiper-button-next, .swiper-rtl .swiper-button-pre {right: 20px !important;}

 #bottomNavi {clear: both;padding: 0 0 20px;text-align: center;}
 #bottomNavi a {width: 115px;height: 115px;padding: 8px 0 0;}
 #bottomNavi a em {font-size: 13px;}
 .groupSP{width: 100%;padding-left:0;float:none;}
 /*ブレイクポイント*/}

@media screen and (min-width:820px)  {
 footer .inner {width: 86%;margin: 0 auto;}
}

@media screen and (min-width:960px)  {
html,body{font-size: 17px;}
.vSPIL,.vSPIB,.vSPB{display: none;}
.vPCIL{display: inline;}
.vPCIB{display:inline-block;}
.vPCB{display: block;}
.vSPBR{display: none}
 .btn_box{border-radius: 8px;font-size: 2.6rem;line-height: 2.5;}
 .act_caption{font-size: 1rem !important;}
 .spnav{margin-top: 1.4vw;}
 /*960pxから1280pxまでは:小型PC*/}

@media screen and (min-width:1080px)  {
 sMapection, .T1L, .siteMap{width: 83.4%;margin: 0 auto;}
/* .about {width: 36% !important;}
 .group {width: 50%;float: left;}
 .school {width: 18% !important;margin-right: 0 !important;}
 .groupSP {width: 100%;float: none;}*/

 /*960pxから1280pxまでは:小型PC*/}

 @media screen and (min-width:1280px) {
html,body{font-size: 17.78px;}
 .act_caption{font-size: 1rem !important;}
 /*access_sc*/
 .access_sc{display: flex;}
 .access_sc > div{order: 2;flex-basis: 30%;max-width: 30%;align-self: center;position: relative;}
 .access_sc > div img{width: 180%;max-width: 180%;display: block;position: relative;left: -40%;}
 .access_sc > div a.btn_access img{width: 300%;
  max-width: 300%;display: block;position: relative;left: -100%;}
 #map_gray{margin: 4% 0 0 0;order: 1;flex-basis: 70%;max-width: 70%;align-self: center;overflow: hidden;}
 .access_sc div:nth-of-type(1) {margin-bottom: -2%;}
 .access_sc div h2.tit{padding: 2% 0 6%;}
 #map_gray{max-height: 700px;width: 100%;height: 100vw;}
/*1280pxから:大型PC}

 @media screen and (min-width:1650px) {*/
 .header{left: 0;padding: 55px 2vw 0;}
 .header_inner{height: 60px;/*background: rgba(0,0,255,0.3);*/}
 .logo_salezio img{width: 215px;height: auto;}
 .spnav{width: 29px;height: 35px}
 .sp_info{display: none;}
 .pc_info{display: block;width: 224px;height: auto;}
 .spnav + .btn_info{max-width: 225px;}
 .btn_info{margin: 14px 40px 0 0;width: 225px;}
 /*.btn_box.entrance{width: 324px;height: 51px;}*/
 .entrance{right: 2vw;bottom: 40px;left: initial;}
 /*.entrance .w100img{width: 324px;height:auto;}*/
 .key_vis_sc{min-width: 0.56vw;}
 .key_vis_sc + section{min-height: 0.35vw;}
 .tit img{height: 52px;}
 .btn_entry{max-width: 1429px;background: rgba(0,0,255,0.3);}
 .btn_box{width: 17.8%;}
 .cont_inner .btn_box{width: 60%;}
 .cont_inner p{font-size: 0.9rem;margin: 2% 0;}
 .swiper-wrapper{height: 26.8vw !important;}
 .act_caption{font-size: 1rem !important;}
 /*footer*/
 .T1L {width: 72%;margin: 0 auto;}
 .btn_box.entrance, .entrance .w100img{width: 323px;height: 53px;}
 .entrance{bottom: 40px;}
}

@media screen and (min-width:1280px) {
 html,body{font-size: 17.78px;}
}

@media screen and (min-width:1320px) {
 /*フッターメニューメニュー*/
 ul.siteMapList li {font-size: 1em;float: left;width: 20%;margin-bottom: 0;margin-right: 2%;list-style-type: none;}
 /*.informarion{width: 20% !important;}*/
 .about {width: 36% !important;}
 .school {width: 18% !important;margin-right: 0 !important;}
 .spnav{margin-top: 1.4vw;}
}

@media screen and (min-width:1620px) {
 #bottomNavi a {margin: 0 20px 1rem;}
 .entrance{bottom: 120px;right: 2.7vw;}
/*1640pxから:大型PC*/}

@media screen and (min-width: 1799px) {
 /*クラブ活動*/
 ul.club li {width: 17%;float: left;margin-bottom: 1em;}
 ul.club.li3p li {width: 33.3%;float: left;margin-bottom: 1em;}
 /*サイトマップ-----*/
 .siteMap {position: relative;margin-top: 1.5em;}
 ul.siteMapList {width: auto;margin: 13px 0 1.5em;}
 ul.siteMapList li {font-size: 1.2em;float: left;width: 17%;margin-bottom: 0;margin-right: 5%;list-style-type: none;}
 .about {width: 36% !important;}
 .group {width: 50%;float: left;}
 .school {margin-right: 0 !important;width: 15% !important;}
 .pageLogo img {height: 10em !important;width: auto !important;}

 /* 1800px以上用（PC用）の記述 =======*/}

@media screen and (min-width:1920px) {
 .header{left: calc(50% - 960px);}
 .btn_entry{max-width: 1470px;}
 .spnav{margin-top: 21px;}
 .entrance{right: 234px;}
}