@charset "utf-8";
/*-----------------------------------------Reset---------------------------------------------------------------------------*/

*{ margin:0; padding:0;}
html { font-size: 62.5%; }
body{ font-size:1.5rem; line-height:1.8;margin: 0; padding: 0; overflow-x:hidden}
body , html { height: 100%; width:100%; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; color:#333;}
ul { padding:0; margin:0; }
main { width:100%;}
p,h1,h2 { margin:0; }
.noline {
  color:black;
  text-decoration:none;
}
.noline:hover{
	color: skyblue ;
  font-weight: bold;
}
.mb { display:none; }
.mbimg { display:none; }

@media screen and (min-width:721px) { foot{display: none;}}

/*------------------------------------------Template---------------------------------------------------------------------------*/



/*-------------------Layout-------------------------*/
#wrap_all { width: 100%; display: flex;}
#wrap { position: absolute; right: 0; width: 80%;}
.wrapper{ width:100%; text-align:center; box-sizing: border-box; padding-left: 5%; padding-right: 5%;}
.contents {width: 100%; margin: 0 auto; padding-top:30px; padding-bottom:0;}
.primary {width: 100%; margin: 0 auto; padding-top:50px; padding-bottom:0; text-align: left;}
.fullcontent{ margin-top: 50px; margin-bottom: 50px;}
.colorwrapper{ width:100%; padding-top:3em; padding-bottom:3em;}
.colorwrapper:after{ content: ""; display: block; clear: both; }
.colorwrapper .contents{ width:1200px; margin:0 auto; }

header {width: 20%; z-index: 1000;}
footer {width: 100%; background-color: #000; color: #ccc; text-align: center; }
footer ul{ height: 60px; display:flex; justify-content:center; align-items: center; list-style-type:none; }
.range {width: 100%; margin: 0 auto; color: #3F3B3B; margin-bottom: 0; margin-top:50px;  }
.range2 {width: 1200px; margin: 0 auto; border-bottom: solid 2px #ccc; margin-bottom: 50px; padding-bottom:50px;}
#contact { width:100%; padding-top: 50px; padding-bottom: 30px; }

.top_logo { position: absolute; top:10em; left:3em; z-index: 999; }

/*-------------------Title-------------------------*/

h1 { font-size:2.5rem; margin: 0 auto; text-align: center; padding-top: 40px; padding-bottom: 40px; }
h2 { font-size:2.0rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1; font-family: 'Roboto', sans-serif; font-weight:600;}
h2 span { font-size: 4.5rem; font-weight: 700;}
h3 { font-size:3.0rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1.5; font-family: "Noto Sans JP", sans-serif;font-weight:500; color: #333; }
h4 { font-size:2.0rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; color:#777; line-height:1.5;font-family: 'Noto Serif', serif; font-weight: bold }
h5 { font-size:1.6rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1.5; font-family: "Noto Sans JP";  font-weight: bold; }

/*----(Primary)----------*/

.primary h1 { font-size:2.5rem; margin: 0 auto; text-align: center; padding-top: 40px; padding-bottom: 40px; }
.primary h2 { font-size:2.5rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; font-family: 'Roboto', sans-serif; font-weight:600; line-height: 1.5;}
.primary h2 span { font-size: 4.5rem; font-weight: 700;}
.primary h3 { font-size:2.5rem; text-align: left; padding-top: 3em; margin-bottom: 0em; line-height:1.5; font-family: 'Roboto', "Noto Sans JP", sans-serif;font-weight:600; color: #333; border-bottom: 1px solid #333;}
.primary h4 { font-size:3.0rem; text-align: center; color:#333; line-height:1.5;font-family: 'Roboto', "Noto Sans JP", sans-serif; font-weight: 500;  }
.primary h5 { font-size:1.6rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1.5; font-family: "Noto Sans JP";  font-weight: bold; }
.primary h6 { font-size:2.5rem; text-align: left; padding-top: 3em; margin-bottom: 0em; line-height:1.5; font-family: 'Roboto', "Noto Sans JP", sans-serif;font-weight:600; color: #333; border-bottom: 1px solid #333;}
.primary h7 { font-size:2rem; text-align: left; padding-top: 0em; margin-top: 1em ; line-height:1.5; font-family: 'Roboto', "Noto Sans JP", sans-serif;font-weight:600; color: #333; }
/*-------------------Parts-------------------------*/
fieldset { padding:1em;}


.top_comment{ width: 1200px; text-align: center; margin-left: auto; margin-right: auto; margin-top: 3em; margin-bottom: 1em; }

.in{ text-align: left;}
.padb0{ padding-bottom: 0;}

.adjust_arrow{border-top: 100px solid #fff;border-bottom: 0px solid transparent; border-left: 50vw solid #F4F0E4;border-right: 50vw solid #F4F0E4; margin-top: 50px;}
.adjust_arrow2{border-top: 100px solid #F4F0E4;border-bottom: 0px solid transparent; border-left: 50vw solid #fff;border-right: 50vw solid #fff; margin-top:0;}
.adjust_arrow3{position: absolute;top:0; border-top: 100px solid #fff;border-bottom: 0px solid transparent; border-left: 50vw solid transparent;border-right: 50vw solid transparent;}
.adjust_slanting_right{border-top: 75px solid #fff;border-bottom: 75px solid #F9F8F2; border-left: 50vw solid #fff;border-right: 50vw solid #F9F8F2; margin-top: 50px;}
.adjust_slanting_left{border-top: 75px solid #F9F8F2;border-bottom: 75px solid #fff; border-left: 50vw solid #F9F8F2;border-right: 50vw solid #fff; margin-top: -75px;}


/*-------------header------------------*/

header { width: 20%; height: 100%; position:fixed; left: 0; background-color: #000;}
.header_area {width: 80%; z-index: 1000; margin: 15px auto; }

.logo {width: 100%;}
.logo img { width:100%; height:auto; }

.button { width: 230px; margin: 0 auto; float: right;}

.button a {width: 180px; font-size:1.6rem; color: #fff; display: block; text-align: center; background-color: #8F1114; line-height: 40px; margin-top: 30px; border-radius: 5px; text-decoration: none;}
.button a:hover {text-decoration: none; background-color: #fff; color: #8F1114;}

.freedial { width:300px; height:28px; background-color:#ADA4A4; padding-top:0.3em; padding-bottom:0.3em; box-sizing:border-box; text-align:center; color:#333; font-weight:bolder; display:inline; font-size:80%; position:absolute; right:30px;}
.freedial::before{ content:url(../img/bfreedial.png); margin:0; position:absolute; z-index:100000000000000; right:300px; margin-top:-0.3em; }
.freedial::after{ content:url(../img/afreedial.png); margin:0; position:absolute; z-index:100000000000000; right:-30px; margin-top:-0.3em; }

.loginarea{ float: right; margin-right: 0 ; margin-top: 0; background-color: #1634A8; }
.loginbutton { font-size: 1.3rem; padding: 0.5em 1.5em 0.5em 1.5em; color: #fff; display:inline-block; right: 0; left:1em; 
	border-radius:15px;background: linear-gradient(90deg, #f93 20%, #ff7166 80%); }
.loginbutton a{ text-decoration: none; color: #fff !important;}
.loginbutton:hover{ background-color: rgba(0,0,0,1.0); color: #fff;}
.loginbutton a:hover{ color: #fff;}

/*-------------------Nav Menu-------------------------*/

@media screen and (min-width:1201px) {

.header_area #megamenu { margin: 0 auto; height: 100%;}
.header_area #megamenu > nav > ul {  margin-top: 30px;}
.header_area #megamenu > nav > ul > li { text-align: center; list-style-type: none;box-sizing: border-box; width: 100px; height: 100px; border-radius: 50%; border:1px #ccc solid; margin-bottom: 1.5em; margin-left: auto; margin-right: auto; font-weight: normal;}
.header_area #megamenu > nav > ul > li h2 { font-size: 1.8rem; font-weight: bolder; line-height: 0; margin-bottom: 0; padding-top: 50px;}
.header_area #megamenu > nav > ul > li span { display: none;}
.header_area #megamenu > nav > ul >  li > a { width: 100%; display: block;margin: 0;padding: 0 0px 0 0px;color: #fff;font-size: 1.5rem;text-decoration: none;  }
.header_area #megamenu > nav > ul > li:hover span{ display:block; padding-top: 40px;color: #ccc;}
.header_area #megamenu > nav > ul > li:hover h2{ display:none; }
	.header_area #megamenu > nav > ul > li:hover {width: 100px; height: 100px;box-sizing: border-box; border-radius: 50%; border:1px #ccc solid; margin-bottom: 2em; margin-left: auto; margin-right: auto;border-image-slice: 1; background-color: rgba(255,255,255,0.2);
	transition: background-color 1000ms, border-color 1000ms, color 1000ms, opacity 1000ms;}


.header_area #megamenu > nav > ul > li:hover > a { color: #000; }
.header_area #megamenu > nav > ul > li:hover .menu_inner { max-height: 9999px; opacity: 1; }
.header_area #megamenu > nav > ul > li > a { display: block; padding: 0; transition: all .2s ease-in; }

.header_area #megamenu > nav > ul .menu_inner {transition: all .2s ease-in; max-height: 0; opacity: 0; overflow: hidden; width: 1200px; position:fixed; left: 0; right: 0; margin: 0 auto; text-align: center;  display: flex;flex-wrap: nowrap; justify-content: space-between; box-sizing: border-box;
	background-color: #ffffff;top:80px; box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.2); 
	padding-left: 5%; padding-right: 5%; font-size: 1.3rem; color: #333;}

.header_area #megamenu > nav > ul .menu_inner li { display: inline-block; margin: 0; margin-right: 5%; list-style-type: none; padding-top: 3em; padding-bottom: 3em; }
.header_area #megamenu > nav > ul .menu_inner li img { width: 100%; height:auto;  margin-bottom: 1em;}
.header_area #megamenu > nav > ul .menu_inner li:last-child {  margin-right:0;}
.header_area #megamenu > nav > ul .menu_inner li.mb { display: none;}
.header_area #megamenu > nav > ul a { color: #333; }

	
	
.mailbutton{ position: absolute; right:0; width: 100px; height: 100px; top:0; background: linear-gradient(90deg, #0c21c3 10%, #0874dc 90%); display: flex; justify-content: center; align-items: center; font-size: 13px; text-align: center; }
.mailbutton img{ width: 20px; height: 20px;}
.mailbutton a{ color: #fff;}
}

@media screen and (max-width:1200px) {
.header_area #megamenu > nav > ul > li h2 { display: none;}
}
/*-------------Whats New------------------*/
.whatsnew { position:relative; width: 70%; height: 60px; margin-right: auto; margin-top: -30px; background-color: rgba(0,0,0,1.0); box-sizing: border-box; padding: 0 3em 0 3em; color: #fff; z-index: 99; font-size: 1.3rem;  }
.whatsnew ul { display: flex; align-items: center;height: 60px;}
.whatsnew ul li { list-style-type: none;}
.whatsnew ul li:first-child { text-align: center; margin-right: 30px;} 
.whatsnew_topics {border: 1px #333 solid; padding: 0.3em 1em 0.3em 1em; color: #333; display: inline !important; background-color: #fff;}
.whatsnew ul li:last-child { font-size: 1.2rem; border: 1px solid #fff; padding: 0.3em 1em 0.3em 1em; margin-left: auto; }
.whatsnew ul li:last-child a{ color:#fff ; text-decoration: none; }
.whatsnew ul li:last-child a:hover{ text-decoration: underline; }
.whatsnew dl { }
.whatsnew dl dt { float:left; }
.whatsnew dl dd { padding-left:100px; text-align:left; }


/*-------------Main Img------------------*/


.index_img {width: 100%; margin:0; padding:0; position:relative; padding-top: 0; overflow: hidden; }
.index_img img {height:auto; width: 100%; }



.main_img {width: 100%; margin:0; padding:0; position:relative; }
.main_img img {width: 100%; height:auto;background: rgba(0,0,0,0.4); }
.top {opacity: 0.8; width: 300px; height: 300px; position: absolute; top: 250px; left: 100px;}
.top img {width: 100%; }

.topimg {position: relative;}
.topimg img{ filter: brightness(80%) opacity(100%)contrast(120%);}


.main_title{ position: absolute; top:45px; right:5%; color: #fff;font-size:2.5rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; line-height:1; font-family: "Noto Sans JP", sans-serif; font-weight:500;text-align: right;  }
.main_title p { font-size:3.5rem;font-weight:800;font-family: avenir,helvetica,sans-serif; }
.main_title span { font-size: 5.0rem;}

.subtitle { width:200px; height:200px; background-color:rgba(0,0,0,1.00); margin-top:-50px; }
.subtitle h3 { color:#fff; }


/*-------------theme------------------*/


.theme { width: 100%; padding-top: 100px; padding-bottom: 0px; background-color: #f5f5f5;margin-top: -30px; }
.theme:after{ content: ""; display:table; clear: both;  height: 0;  border-top: 100px solid #f5f5f5;border-bottom: 0px solid transparent; border-left: 50vw solid #fff;border-right: 50vw solid #fff; margin-top: 50px;}
.theme_title{ margin-bottom: 30px;}

.main_comment { margin-top: 50px;}
.main_comment ul { display: flex;}
.main_comment ul li { width: 50%; list-style-type: none;}
.main_comment ul li img { width: 90%; margin-left:10%;}
.main_comment ul li p { margin-bottom: 1em; line-height: 1.8;}


/*---------banner---------------*/

.banner {width: 1200px; margin: 130px auto; }
.banner ul {display: flex; flex-wrap: wrap; padding-left:0; margin-left:0;}
.banner li {width: 200px; margin-bottom: 1em; margin-right: 50px; list-style: none;}
.banner li:nth-child(5n){margin-right: 0;}


/*---------SNS/Partbner---------------*/

.sns { padding-bottom:50px; }
.sns h4 { margin-bottom:30px;}
.sns ul li { list-style-type:none; }
.sns ul>li.facebook { width:500px; list-style-type:none; float:left; }
.sns ul>li:last-child { margin-right:0 }

/*---------------------------------Contact------------------------------------------*/
.contact { margin-top:3em; }
.contact ul { display:flex; flex-wrap: wrap; }
.contact ul li{ width:19%; margin-right:1.25%; list-style-type:none; border:1px #C0C0C0 solid; box-sizing:border-box; margin-bottom:2em; font-size:1.4rem; border-radius:10px; }
.contact ul li .branch { font-weight:bolder;}
.contact ul li:nth-child(5){ margin-right:0; }
.contact ul li .adrs { font-size:1.0rem;}

ul.contactinfo { width: 90%; margin: 0 auto; box-sizing: border-box; border: 1px solid #333; border-radius: 10px; display: flex; justify-content:space-around ; padding: 2em; }
ul.contactinfo li img { width: 450px; height: auto;}

.toiawase_button { width: 80%; float: right; background-color: #fff; text-align: center; font-size: 2.5rem; padding-top: 1em; padding-bottom: 1em;line-height: 50px; }
a .toiawase_button { text-decoration: none; color: #000;}
.toiawase_button:hover { color: #fff ; background-color: #333; border: 1px solid #fff; box-sizing: border-box;}

.tel_contact { background-color: #999; padding-top:0.3em; padding-bottom: 0.3em;width: 20em; text-align: center; margin-top: 2em; }
a .tel_contact { text-decoration: none ; color: #000;}
a {text-decoration: none }
.tel_contact:hover { color: #fff ; background-color: #333; border: 1px solid #fff; box-sizing: border-box;}

/*---------------------Pagenation---------------------*/
.pagenation { margin-top:2em;}
.pagenation a{ margin-right:15px; padding-top:5px !important; padding-bottom:5px !important; padding-right:10px !important; padding-left:10px !important; background-color:#000;border-radius: 2px; color:#fff;   }
.pagenation  strong {margin-right:15px; padding-top:5px !important; padding-bottom:5px !important; padding-right:10px !important; padding-left:10px !important; background-color:#fff;border-radius: 2px; color:#000; box-sizing:border-box; border:1px #111 solid; }
.pagenation a:first-child{ border:none; background-color:#f0f0f0; color:#000; text-decoration:none;} 
.pagenation a:last-child{ border:none; background-color:#f0f0f0; color:#000; text-decoration:none;} 

/*---------------------twitter---------------------*/
.twitter { width: 500px; height: 500px; margin-top: 80px; margin-left: 5%; }


/*---------------------contact---------------------*/
#contact ul { display:flex;}
#contact ul li { color:#000; width:50%; list-style-type:none;}
#contact ul li .stu { font-size:2.0rem; font-weight:bolder; }
#contact ul li .toiawase { font-size:2.5rem; background-color:#000; border-radius:15px; width:400px; border:#fff 2px solid; padding-top:1em; padding-bottom:1em; margin:0 auto; text-align:center; }
#contact ul li .toiawase a { color:#fff; text-decoration:none;}
#contact ul li .toiawase:hover{ background-color:rgba(255,255,255,0.5)}
#contact ul li .toiawase a:hover { color:#000; }

/*---------------------footer---------------------*/
footer ul li { padding-left:1em; padding-right:1em; border-right:1px #fff solid;}
footer ul li a { color:#fff; text-decoration:none; }
footer ul li a:hover { text-decoration:underline; }
footer ul li:last-child { border-right:none; }
/*-----------------------------------------------INDEX-----------------------------------------------*/

.index dl {margin-bottom: 30px;}
.index dl dt { float: left;}
.index dl dd { margin-left: 150px;}
/*-----------------------------------------------About-----------------------------------------------*/
dl.schedule{}
dl.schedule dt { float: left;}
dl.schedule dd { margin-left: 85px;}

/*-----------------------------------------------Activity-----------------------------------------------*/

.activity dl {margin-bottom: 30px;}
.activity dl dt { float: left;}
.activity dl dd { margin-left: 80px;}

.activity ul{display: flex;flex-wrap: wrap;　margin-top: 30px;}
.activity ul li {list-style-type: none;width: 30%;margin-right: 5%;margin-bottom: 2em;}
.activity ul li img{width: 100%;height: auto;}
.activity ul li:nth-child(3n){margin-right: 0;}
/*-----------------------------------------------About-----------------------------------------------*/
.movie ul{ display: flex; flex-wrap: wrap; padding-top: 1em; padding-bottom: 1em; border-bottom: dotted 1px #333;}
.movie ul li{ list-style: none; }
.movie ul li:first-child{ width: 400px; }
.movie ul li:last-child { padding-left: 50px;}
.movie ul li:last-child dl dt { float: left;}
.movie ul li:last-child dl dd { margin-left: 100px;}
/*-----------------------------------------------equipment-----------------------------------------------*/
.equipment ul li { margin-left: 3em;}

/*-----------------------------------------------contact-----------------------------------------------*/
.entryform ul{ margin-top: 0; display: flex; flex-wrap: wrap; margin-bottom: 0;}
.entryform ul li{ list-style-type: none;}
.entryform ul li:first-child{ width: 30%; box-sizing: border-box; background-color: #eee;padding: 1em 1em 1em;border-top: 1px #333 solid;border-left: 1px #333 solid;display: flex; align-items: center; letter-spacing: 0.5em; justify-content: center;}
.entryform ul li:last-child{width: 70%; box-sizing: border-box; padding: 1em 1em 1em;border-top: 1px #333 solid;border-right: 1px #333 solid;border-left: 1px #333 solid; text-align: left;}
.entryform ul li:last-child input {padding: 0.5em 0.5em 0.5em 0.5em; margin-right: auto;}
.submit_btn {text-align: center; }
.submit_btn input{ margin: 3em auto; padding: 1em 2em 1em 2em; text-align: center;}

/** RESPONSIVE BREAKPOINTS
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
**/

@media screen and (max-width:720px) {
.mbimg { display:block; width: 100%; }
.pcimg{ display: none;}
}

@media screen and (max-width:900px) {
.top_mbimg { display:block; width: 100%; }
.top_pcimg{ display: none;}
}

@media(min-width: 721px) and (max-width: 1200px) {

/*-----------------------------------------Reset---------------------------------------------------------------------------*/

#wrap {width: 100%;min-height: 100vh;position: relative;}

.pc { display:none; }
.mb{ display:block;}
.mailbutton {display: none;}


/*------------------------------------------Template---------------------------------------------------------------------------*/
/*-------------------Layout-------------------------*/
header {width: 100%; margin: 0 auto; height:4em;}
.contents {width: 100%; box-sizing: border-box; margin: 0 auto; padding:1em 5%;}
.colorwrapper .contents{ width:100%; margin:0 auto; padding-left: 5%; padding-right: 5%; }
.primary {width: 100%; box-sizing: border-box; padding-top:3em; padding-bottom:3em; text-align: left; padding-left: 5%; padding-right: 5%;}


/*-------------------Parts-------------------------*/

h1 { font-size:2.5rem; margin: 0 auto; text-align: center; padding-top: 40px; padding-bottom: 40px; }
h2 { font-size:150%; }
h2 span { font-size: 180%; }
h3 { font-size:120%; font-weight: 700; }

h4 { font-size:100%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; color:#777; line-height:1.5;font-family: 'Noto Serif', serif; font-weight: bold }
h5 { font-size:90%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1.5; font-family: "Noto Sans JP";  font-weight:normal; }

/*----(Primary)----------*/

.primary h1 { font-size:200%; margin: 0 auto; text-align: center; padding-top: 40px; padding-bottom: 40px; }
.primary h2 { font-size:150%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1; font-family: 'Roboto', sans-serif; font-weight:600;}
.primary h2 span { font-size: 4.5rem; font-weight: 700;}
.primary h3 { font-size:120%; margin: 0 auto; padding-top: 0.5em; padding-bottom: 0.5em; text-align: left; line-height:1.5; font-family: 'Roboto', "Noto Sans JP", sans-serif;font-weight:600; color: #333; }
.primary h4 { font-size:130%; text-align: center; color:#333; line-height:1.5;font-family: 'Roboto', "Noto Sans JP", sans-serif; font-weight: 600;  }
.primary h5 { font-size:90%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1.5; font-family: "Noto Sans JP";  font-weight: bold; }
	
	
.adjust_arrow{border-top: 3em solid #fff; margin-top: 3em;}
.adjust_arrow2{border-top: 3em solid #F4F0E4;}
.adjust_arrow3{position: absolute;top:0; border-top: 3em solid #fff;}
.adjust_slanting_right{border-top: 3em solid #fff;border-bottom: 3em solid #F9F8F2; margin-top: 0;}
.adjust_slanting_left{border-top: 3em solid #F9F8F2;border-bottom: 3em solid #fff; margin-top: -3em;}

/*-------------------header-------------------------*/

.header_area { height:4em;}

.logo { height: 2em; position:absolute; top:0.5em; left:1em; }
.logo img { width:auto; height:100%; }

.button { display:none;}

.main_img { padding-top: 4em; }
.main_img img {position: relative;}


.pcimg img{ width: 100%; height: auto;}	
	
.top {width: 20%; height: auto; position: absolute; top: 8em; left: 30px;}
.menuw {display: inherit;}
/*-------------------Nav Menu-------------------------*/

#dl-menu{width: 100%; background-color:transparent !important;}
	
.dl-menu img{ display: none;}

.mailbutton{ position:fixed; right:0; bottom: 0; width: 50%; height: 4em; top:inherit; font-size: 85%; text-align: center; }
.mailbutton img{ height: 1em; width: auto; }
.mailbutton a{ color: #fff;}

.loginbutton { font-size: 90%; padding:inherit; background:none; }
.loginbutton a{ text-decoration: none; color: #fff !important;}
.loginbutton:hover{ background-color: rgba(0,0,0,1.0); color: #fff;}
.loginbutton a:hover{ color: #fff;}
/*-------------Main Img------------------*/


.index_img {width: 100%; margin:0; padding:0; position:relative; padding-top: 0; overflow: hidden; height:inherit;}
.index_img img {height:auto; width: 100%; }
	
/*-------------------Whats New-------------------------*/
.whatsnew { position:relative; width: 100%; height: 5em; font-size: 90%; padding: 0 1em; }
.whatsnew ul { width: 100%; height: 5em;}

.whatsnew ul li:first-child { text-align: center; margin-right: 1em;} 
.whatsnew_topics {border: 1px #333 solid; padding: 0.3em 1em 0.3em 1em; color: #333; display: inline !important; background-color: #fff;}
.whatsnew ul li:last-child { font-size: 80%; border: 1px solid #fff; padding: 0.2em 0.5em 0.2em 0.5em; margin-left: auto; }
.whatsnew ul li:last-child a{ color:#fff ; text-decoration: none; }
.whatsnew ul li:last-child a:hover{ text-decoration: underline; }
.whatsnew dl dt { float:inherit }
.whatsnew dl dd { padding-left:0; text-align:left; }

	

.main_title{ position: absolute; top:30%; left:5%; color: #fff;font-size:100%; margin: 0 auto; padding-top: 0; padding-bottom: 0; line-height:1; font-family: "Noto Sans JP", sans-serif; font-weight:500;text-align: left;  }
.main_title p { font-size:130%;font-weight:800;font-family: avenir,helvetica,sans-serif; }
.main_title span { font-size: 130%;}

/*-------------theme------------------*/

.theme { box-sizing: border-box; width: 100%; padding-top: 6em; padding-bottom: 0; }
.theme:after{ border-top: 3em solid #f5f5f5;border-bottom: 0px solid transparent; border-left: 50vw solid #fff;border-right: 50vw solid #fff; margin-top: 3em;}
.theme_title{ margin-bottom: 30px;}

.main_comment { margin-top: 2em;}
.main_comment ul { display:block;}
.main_comment ul li { width: 100%; list-style-type: none;}
.main_comment ul li:nth-child(2) img { display: none;}
.main_comment ul li p { margin-bottom: 0.5em; line-height: 1.5;}

.top_comment{ width: 100%; }
	

/*---------banner---------------*/

.banner { box-sizing: border-box; width: 100%; padding-left: 5%; padding-right: 5%; margin: 3em auto; }
.banner ul {display: flex; flex-wrap: wrap; padding-left:0; margin-left:0;}
.banner li {width: 18%; margin-bottom: 1em; margin-right: 2.5%; list-style: none;}
.banner li img{ width: 100%; height: auto; }
.banner li:nth-child(5n){margin-right: 0;}

	/*---------------------contact---------------------*/
#contact ul { display:block;}
#contact ul li { width:100%; margin-bottom: 2em; }
#contact ul li img { max-width:80%; height: auto; }

.tel_contact { background-color: #999; padding-top:0.3em; padding-bottom: 0.3em;width: 20em; text-align: center; margin-top: 2em; }
a .tel_contact { text-decoration: none ; color: #000;}
a {text-decoration: none }
.tel_contact:hover { color: #fff ; background-color: #333; border: 1px solid #fff; box-sizing: border-box;}

/*---------------------footer---------------------*/
footer { padding-bottom: 5em;}
footer ul {display: flex; flex-wrap: wrap;}
footer ul li { box-sizing: border-box;  border-right:1px #fff solid;}
footer ul li:nth-child(2) { margin-right: 0;}
footer ul li a { color:#fff; text-decoration:none; }
footer ul li a:hover { text-decoration:underline; }
footer ul li:last-child { border-right:none; }

/*---------------------Mobile footer---------------------*/
foot{ width: 100%; height: 4em; color: #fff; text-align: center; position: fixed; bottom: 0; }
foot ul { display: flex;}
foot ul li{ width: 50%; list-style-type: none;}
foot ul li a{ color: #fff;}
foot ul li a:hover{ text-decoration: underline;}
foot ul li:first-child{ height: 4em; background: linear-gradient(90deg, #f93 20%, #ff7166 80%);display: flex;justify-content:center; align-items: center;}
foot ul li:nth-child(2){ height: 4em; background: linear-gradient(90deg, #0c21c3 10%, #0874dc 90%);display: flex;justify-content:center; align-items: center;}	
	
}


/** RESPONSIVE BREAKPOINTS
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
**/

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

/*-----------------------------------------Reset---------------------------------------------------------------------------*/
html { font-size: 62.5%; }
body{ font-size:1.6rem; line-height:1.5;margin: 0; padding: 0;}
#wrap {width: 100%;min-height: 100vh;position: relative;}

.pc { display:none; }
.mb{ display:block;}
.mailbutton {display: none;}

/*------------------------------------------Template---------------------------------------------------------------------------*/
/*-------------------Layout-------------------------*/
header {width: 100%; margin: 0 auto; height:4em;}
.contents {width: 100%; box-sizing: border-box; margin: 0 auto; padding:1em 5%;}
.colorwrapper .contents{ width:100%; margin:0 auto; padding-left: 5%; padding-right: 5%; }
.primary {width: 100%; box-sizing: border-box; padding-top:3em; padding-bottom:3em; text-align: left; padding-left: 5%; padding-right: 5%;}


/*-------------------Parts-------------------------*/

h1 { font-size:2.5rem; margin: 0 auto; text-align: center; padding-top: 40px; padding-bottom: 40px; }
h2 { font-size:150%; }
h2 span { font-size: 180%; }
h3 { font-size:120%; font-weight: 700; }

h4 { font-size:100%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; color:#777; line-height:1.5;font-family: 'Noto Serif', serif; font-weight: bold }
h5 { font-size:90%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1.5; font-family: "Noto Sans JP";  font-weight:normal; }

/*----(Primary)----------*/

.primary h1 { font-size:200%; margin: 0 auto; text-align: center; padding-top: 40px; padding-bottom: 40px; }
.primary h2 { font-size:120%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1; font-family: 'Roboto', sans-serif; font-weight:600;}
.primary h2 span { font-size: 4.5rem; font-weight: 700;}
.primary h3 { font-size:120%; margin: 0 auto; padding-top: 0.5em; padding-bottom: 0.5em; text-align: left; line-height:1.5; font-family: 'Roboto', "Noto Sans JP", sans-serif;font-weight:600; color: #333; margin-top: 3em; }
.primary h4 { font-size:130%; text-align: center; color:#333; line-height:1.5;font-family: 'Roboto', "Noto Sans JP", sans-serif; font-weight: 600;  }
.primary h5 { font-size:90%; margin: 0 auto; padding-top: 0; padding-bottom: 0; text-align: center; line-height:1.5; font-family: "Noto Sans JP";  font-weight: bold; }
	
	
.adjust_arrow{border-top: 3em solid #fff; margin-top: 3em;}
.adjust_arrow2{border-top: 3em solid #F4F0E4;}
.adjust_arrow3{position: absolute;top:0; border-top: 3em solid #fff;}
.adjust_slanting_right{border-top: 3em solid #fff;border-bottom: 3em solid #F9F8F2; margin-top: 0;}
.adjust_slanting_left{border-top: 3em solid #F9F8F2;border-bottom: 3em solid #fff; margin-top: -3em;}

/*-------------------header-------------------------*/

.header_area { height:4em;}

.logo { height: 3em; position:absolute; top:0.5em; left:1em; }
.logo img { height: 100%; width: auto; }

.button { display:none;}

.main_img { padding-top: 4em; }
.main_img img {position: relative;}

.pcimg {display: none;}
.mbimg { width: 100%;}
.mbimg img{ width: 100%; height: auto;}	
	
.top {width: 20%; height: auto; position: absolute; top: 8em; left: 30px;}
.menuw {display: inherit;}
/*-------------------Nav Menu-------------------------*/

#dl-menu{width: 100%; background-color:transparent !important;}
	
.dl-menu img{ display: none;}

.mailbutton{ position:fixed; right:0; bottom: 0; width: 50%; height: 4em; top:inherit; font-size: 85%; text-align: center; }
.mailbutton img{ height: 1em; width: auto; }
.mailbutton a{ color: #fff;}

.loginbutton { font-size: 90%; padding:inherit; background:none; }
.loginbutton a{ text-decoration: none; color: #fff !important;}
.loginbutton:hover{ background-color: rgba(0,0,0,1.0); color: #fff;}
.loginbutton a:hover{ color: #fff;}
/*-------------Main Img------------------*/


.index_img {width: 100%; margin:0; padding:0; position:relative; padding-top: 0; overflow: hidden; height:inherit;}
.index_img img {height:auto; width: 100%; }
	
/*-------------------Whats New-------------------------*/
.whatsnew { position:relative; width: 100%; height: 5em; font-size: 90%; padding: 0 1em; }
.whatsnew ul { width: 100%; height: 5em;}

.whatsnew ul li:first-child { text-align: center; margin-right: 1em;} 
.whatsnew_topics {border: 1px #333 solid; padding: 0.3em 1em 0.3em 1em; color: #333; display: inline !important; background-color: #fff;}
.whatsnew ul li:last-child { font-size: 80%; border: 1px solid #fff; padding: 0.2em 0.5em 0.2em 0.5em; margin-left: auto; }
.whatsnew ul li:last-child a{ color:#fff ; text-decoration: none; }
.whatsnew ul li:last-child a:hover{ text-decoration: underline; }
.whatsnew dl dt { float:inherit }
.whatsnew dl dd { padding-left:0; text-align:left; }

	

.main_title{ position: absolute; top:5em; left:5%; color: #fff;font-size:100%; margin: 0 auto; padding-top: 0; padding-bottom: 0; line-height:1; font-family: "Noto Sans JP", sans-serif; font-weight:500;text-align: left;  }
.main_title p { font-size:130%;font-weight:800;font-family: avenir,helvetica,sans-serif; }
.main_title span { font-size: 130%;}

/*-------------theme------------------*/

.theme { box-sizing: border-box; width: 100%; padding-top: 6em; padding-bottom: 0; }
.theme:after{ border-top: 3em solid #f5f5f5;border-bottom: 0px solid transparent; border-left: 50vw solid #fff;border-right: 50vw solid #fff; margin-top: 3em;}
.theme_title{ margin-bottom: 30px;}

.main_comment { margin-top: 2em;}
.main_comment ul { display:block;}
.main_comment ul li { width: 100%; list-style-type: none;}
.main_comment ul li:nth-child(2) img { display: none;}
.main_comment ul li p { margin-bottom: 0.5em; line-height: 1.5;}

.top_comment{ width: 100%; }
	

/*---------banner---------------*/
	
.twitter { width: 90%; margin-left: 5%; height: 500px; margin-top: 0; overflow: scroll; background-color: white;}
.twitter-timeline { width:90%; height: 500px; }

.banner { box-sizing: border-box; width: 100%; padding-left: 5%; padding-right: 5%; margin: 3em auto; }
.banner ul {display: flex; flex-wrap: wrap; padding-left:0; margin-left:0;}
.banner li {width: 30%; margin-bottom: 1em; margin-right: 5%; list-style: none;}
.banner li img{ width: 100%; height: auto; }
.banner li:nth-child(3n){margin-right: 0;}

	/*---------------------contact---------------------*/
#contact ul { display:block;}
#contact ul li { width:100%; margin-bottom: 2em; }
#contact ul li img { max-width:80%; height: auto; }
	
ul.contactinfo { width: 100%; padding: 1em; }

.tel_contact { width: 80%; background-color: #999; box-sizing: border-box; padding-top:0.3em; padding-bottom: 0.3em; text-align: center; margin-top: 2em; }
a .tel_contact { text-decoration: none ; color: #000;}
a {text-decoration: none }
.tel_contact:hover { color: #fff ; background-color: #333; border: 1px solid #fff; box-sizing: border-box;}

/*---------------------footer---------------------*/
footer { padding-bottom: 5em;}
footer ul {display: flex; flex-wrap: wrap;}
footer ul li { box-sizing: border-box;  border-right:1px #fff solid;}
footer ul li:nth-child(2) { margin-right: 0;}
footer ul li a { color:#fff; text-decoration:none; }
footer ul li a:hover { text-decoration:underline; }
footer ul li:last-child { border-right:none; }

/*---------------------Mobile footer---------------------*/
foot{ width: 100%; height: 4em; color: #fff; text-align: center; position: fixed; bottom: 0; }
foot ul { display: flex;}
foot ul li{ width: 50%; list-style-type: none;}
foot ul li a{ color: #fff;}
foot ul li a:hover{ text-decoration: underline;}
foot ul li:first-child{ height: 4em; background: linear-gradient(90deg, #f93 20%, #ff7166 80%);display: flex;justify-content:center; align-items: center;}
foot ul li:nth-child(2){ height: 4em; background: linear-gradient(90deg, #0c21c3 10%, #0874dc 90%);display: flex;justify-content:center; align-items: center;}	
	
/*-----------------------------------------------INDEX-----------------------------------------------*/

.index dl {margin-bottom: 2em;}
.index dl dt { float: left;}
.index dl dd { margin-left: 6em;}
/*-----------------------------------------------About-----------------------------------------------*/
dl.schedule{}
dl.schedule dt { float: left;}
dl.schedule dd { margin-left: 2em;}

/*-----------------------------------------------Activity-----------------------------------------------*/

.activity dl {margin-bottom: 30px;}
.activity dl dt { float: left;}
.activity dl dd { margin-left: 80px;}

.activity ul{display: flex;flex-wrap: wrap;　margin-top: 30px;}
.activity ul li {list-style-type: none;width: 30%;margin-right: 5%;margin-bottom: 2em;}
.activity ul li img{width: 100%;height: auto;}
.activity ul li:nth-child(3n){margin-right: 0;}
/*-----------------------------------------------About-----------------------------------------------*/
.movie ul{ display: flex; flex-wrap: wrap; padding-top: 1em; padding-bottom: 1em; border-bottom: dotted 1px #333;}
.movie ul li{ list-style: none; }
.movie ul li:first-child{ width: 100%; }
.movie ul li:first-child iframe{ width: 100%; }

.movie ul li:last-child { width: 100%; padding-left: 0;}
.movie ul li:last-child dl dt { float: left;}
.movie ul li:last-child dl dd { margin-left: 100px;}
/*-----------------------------------------------equipment-----------------------------------------------*/
.equipment ul li { margin-left: 3em;}
	
	
	
	
}