﻿@charset "utf-8";
*{padding:0;margin:0;}a:link,a:visited{color:#222;}a:hover{color:#bbb;}
body{text-align:center;font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif; color:#222; -webkit-text-size-adjust:100%; font-weight: normal; background-color:#FFF;}
body:before{content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: url(im/gu.jpg) center no-repeat; background-size: cover;}

#wrapper{text-align:left;margin:0 auto;position:relative;}
#header{background:#FFF;width:100%;text-align:center;font-weight:bold;top:0;position: fixed;z-index: 1000;}
#footer{width:100%;padding:2px 0;text-align:center;background-color:#222;color:#FFF;bottom:0;position: fixed;border-top:double 3px #FFF;}

#ab{margin:100px 0 0 0;padding:0 0 20px 0;background-color:rgba(70,80,90,0.8);width:100%;text-align:left;}
#ab a:link,#ab a:visited{color:#FFF;}#ab a:hover{color:#bbb;}
#ins,#lesson,#con,#ws,#ac,#stb{margin:0 auto;padding:80px 0 30px 0;background-color:#FFF;width:900px;}
#top{margin:0 auto;padding:30px 0 30px 0;}
#logo2{text-align:center;padding:5px 0px;text-decoration:none;}
#logo2 a{text-decoration:none;}
#logo{text-align:center;padding:100px 0 0 0;color:#FFF;}
#ti{border-style:solid;border-width:7px;display:inline-block;margin:60px 0;padding:5px 40px;font-size:550%;color:#EEE;font-family:"Times New Roman",serif;}
#im,#im2,#im3,#im4,#map,#sns,#pic,#wspic,#tel{text-align:center;padding:10px 0;max-width: 90%;height:auto;margin:0 auto;}
#mail,#tel{text-align:center;font-size:110%;padding:10px 0;}
#mov{text-align:center;padding:10px 0;}
#pagename{font-size:140%;text-align:center;margin:0 auto 0 auto;}
#pagename:first-letter {margin-right: 0.1em;font-size: 1.5em;}
img {max-width:100%; height: auto;}
h1{font-size:140%;text-align:center;margin:0 auto 20px auto;}
h1 span{display:block;font-size:100%;padding:5px 0px;}
h2{font-size:130%;margin:20px auto 20px auto;padding:5px 0;border-bottom:double 3px;}
h3{font-size:110%;margin:20px 10px 10px 10px;padding:0 10px;border-left:solid 7px;}
h4{font-size:100%;margin:15px 15px 10px 30px;padding:0 15px;border-left:double 5px;}
h5{font-size:100%;margin:10px 10px 10px 45px;padding:0 10px;border-left:dotted 2px;}
table{text-align:center; border-collapse:collapse;width:100%;margin:10px 0px;}
th{font-weight:bold;min-width:120px;border-top:dotted 1px ;border-bottom:dotted 1px ;border-left:dotted 1px ;border-right:solid 3px ;}
td{border: solid 1px;}

#mate{padding:30px 20px 30px 20px;}
#mate li{padding:3px 0;font-size:120%}
p{margin: 15px 0;}

#tab{border-bottom:double 4px;}
.menu { display: flex;height: 4rem;margin: 0 auto; width: 800px;}
.menu > li {width: 25%;}
.menu li {list-style: none; position: relative;display: block; height: 4rem; line-height: 2rem; text-align: center; text-decoration: none; width: 100%;}
.menu li:hover {background :#666;color:#FFF;}
.menu li a {display: block; height: 4rem; line-height: 2rem; text-align: center; text-decoration: none; width: 100%;}
.menu li a:hover {background :#666;color:#FFF;}
.menu li span{display:block;font-size:75%;}
.menu li li {height: 0;overflow: hidden;transition: .2s;background :#FFF;}
.menu li li a {border-top: 4px double #CCC;}
.menu li:hover > ul > li { height: 4rem; overflow: visible;}
.current a  {background :#444;color: #FFF;}
.current {background :#444;color: #FFF;}
.current2 a {background :#777;color: #FFF;}

#faq {width:100%;padding: 11px 0px;margin:20px auto;text-align:center;font-weight: bold;background :#222;color:#EEE;}
#sub1,#sub2,#sub4,#sub5,#sub6,#sub7,#sub8{margin:15px auto;padding:20px 0;width:700px;}
.slide{position:relative;overflow:hidden; width:400px; height:400;margin: 20px auto; background: #fff;z-index: 10;}

.slide2{position:relative;overflow:hidden; width:400px; height:300;margin: 20px auto; background: #fff;z-index: 10;}
.slide3{position:relative;overflow:hidden; width:400px; height:400px;margin: 20px auto; background: #fff;z-index: 10;}

.slide2 img{display: block; position: absolute;width:inherit;height:inherit;opacity: 0;animation: slideAnime 9s ease infinite;}
.slide3 img{display: block; position: absolute;width:inherit;height:inherit;opacity: 0;animation: slideAnime 9s ease infinite;}
.slide2 img:nth-of-type(1) { animation-delay: 0s }
.slide3 img:nth-of-type(1) { animation-delay: 0s }
.slide2 img:nth-of-type(2) { animation-delay: 3s }
.slide3 img:nth-of-type(2) { animation-delay: 3s }
.slide2 img:nth-of-type(3) { animation-delay: 6s }
.slide3 img:nth-of-type(3) { animation-delay: 6s }

.slide img{display: block; position: absolute;width:inherit;height:inherit;opacity: 0;animation: slideAnime 16s ease infinite;}
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }

@keyframes slideAnime{0% {opacity:0} 16% {opacity:1} 33% {opacity:1} 49% {opacity:0} 100% {opacity:0}}
@media screen and (max-width: 719px) {
#sub1,#sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8{width:430px;margin:15 auto;}
.menu {font-size:85%;width:100%;} #ti{font-size:300%;}
#ins,#lesson,#con,#ws,#ac{width:100%;}
}