@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');

* { margin: 0; padding: 0; }
html { font-size:10px;} 
body { color: #333; font-family:'Noto Sans JP',Meiryo,'メイリオ','ＭＳ Ｐゴシック',sans-serif; font-size: 1.6rem; line-height: 1.8; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { outline: none; }
a:link { color: #333333; text-decoration: none; }
a:visited { color: #333333; text-decoration: none; }
a:hover { color: #; text-decoration: underline; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
li { list-style:none;}
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
.clearfix:after { content: ''; display: block; clear: both; }


h2 { font-family: 'Charm', cursive; font-size:7rem; font-weight:normal; color:#005bbb; text-align:center; }
h3 { font-size:20px; text-align:center;}
section { width:1200px; margin:0 auto 100px;}

@media screen and (max-width: 767px) {
h2 { font-size:3.5rem;}
section { width:auto; margin:0 auto 50px;}
}


/* --------------------------------------------------
	グローバルヘッダ
-------------------------------------------------- */
header#globalHeader{ width:auto; padding:10px 30px; }
header#globalHeader div.inner{ display:flex; justify-content:space-between;}
header#globalHeader h1{ display:block; }
header#globalHeader h1 img { vertical-align:middle; }
header#globalHeader ul{ display:flex; align-items: flex-end; }
header#globalHeader ul li:first-child{ margin-right:30px; }
nav#globalNavi{ width:100%; }
nav#globalNavi div.inner{ width:100%; background:#005bbb; }
nav#globalNavi ul{  display:flex; justify-content: flex-end; padding:18px 0 18px 20px; }
nav#globalNavi ul li{ margin-right: 30px; padding-right: 25px; border-right: 1px solid #fff;}
nav#globalNavi ul li a{ color:#fff; font-size:1.8rem; position:relative;}

nav#globalNavi ul li:last-child a{ border-right:none; padding-right: 0; }
nav#globalNavi ul li a:hover{ text-decoration:none;}
nav#globalNavi ul li a:hover:after{ content:''; width:100%; height:4px; background:#fff; position:absolute; bottom:-7px; left:0;}

@media screen and (max-width: 767px) {
header#globalHeader{ width:auto; padding:10px;}
header#globalHeader div.inner{ display:block;}
header#globalHeader h1 img { width:100%; }
header#globalHeader p{ font-size:1.2rem;}
header#globalHeader ul li:first-child{}

nav#globalNavi{ width:100%; }
nav#globalNavi div.inner{ width:100%; background:#005bbb; }
nav#globalNavi ul{  display:block; padding:0;}
nav#globalNavi ul li{ margin-right:0; padding-right: 0; border-top:1px solid #fff; border-right: none;}
nav#globalNavi ul li:last-child{ border-bottom:1px solid #fff;}
nav#globalNavi ul li a{ display: block; padding:10px 10px 10px 40px; position:relative;}
nav#globalNavi ul li:last-child a{ border-right:none; padding-right: 0; }
nav#globalNavi ul li a:before{ content:'';  width:10px; height:10px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); position:absolute; top:20px; left:15px;}
nav#globalNavi ul li a:hover{ text-decoration:none;}
nav#globalNavi ul li a:hover:after{ display:none;}
}
/* --------------------------------------------------
	スライダー
-------------------------------------------------- */
div.bx-wrapper{ display: block; position:relative;}
div.bx-pager{ width:100%; text-align:center; position:absolute; bottom:5px; z-index:100;}
div.bx-pager-item{ display: inline-block; margin:0 5px;}
div.bx-pager-item a{ display: inline-block; width:20px; height:20px;border-radius:50%; background:#fff; text-indent: -9999px;}
div.bx-pager-item a.active{ background:#ccc;}
#slide .slideWrap{ position:relative; }
#slide .slideWrap .slide-img{ width:100%;}
#slide img.mtext01{ position:absolute; top:100px; right:80px; }
#slide img.mtext02{ position:absolute; bottom:80px; right:100px; }
#slide img.mtext01{ position:absolute; top:100px; left:80px; }
#slide img.mtext02{ position:absolute; bottom:80px; right:100px; }
#slide img.mtext01{ position:absolute; top:100px; left:80px; }
#slide img.mtext02{ position:absolute; bottom:80px; right:100px; }
#slide .sW04 img.mtext01{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

div.info { width:100%; background:#9bc5ff; padding:40px 0;}
div.info p { width:800px; margin: 0 auto; color:#222;}

@media screen and (max-width: 767px) {
div.bx-wrapper{ display: block; position:relative;}
div.bx-pager{ width:100%; text-align:center; position:absolute; bottom:0; z-index:100;}
div.bx-pager-item{ display: inline-block; margin:0 15px;}
div.bx-pager-item a{ display: inline-block; width:10px; height:10px;border-radius:50%; background:#fff; text-indent: -9999px;}
div.bx-pager-item a.active{ background:#ccc;}
#slide {}
#slide .slideWrap{ position:relative; }
#slide .slideWrap .slide-img{ width:200%; margin-left:-50%; height:auto;}
#slide img.mtext01{ width:80%; position:absolute; top:100px; left:0; right:0; margin:0 auto; }
#slide img.mtext02{ width:50%; position:absolute; bottom:50px; left:0; right:0; margin:0 auto;}
#slide .sW02 img.mtext01{ width:80%; position:absolute; top:100px; left:0; right:0; margin:0 auto; }
#slide .sW02 img.mtext02{ width:50%; position:absolute; bottom:50px; left:0; right:0; margin:0 auto; }
#slide .sW03 img.mtext01{ width:80%; position:absolute; top:100px; left:0; right:0; margin:0 auto; }
#slide .sW03 img.mtext02{ width:50%; position:absolute; bottom:50px; left:0; right:0; margin:0 auto; }
#slide .sW04 img.mtext01{ width:80%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

div.info { width:100%; padding:40px 0;}
div.info p { width:auto; padding:0 10px;}
}

main{ padding-top:60px; background:url(../img/grade.png) no-repeat -500px -500px , url(../img/grade.png) no-repeat bottom 100px right -500px;}
@media screen and (max-width: 767px) {
main{ padding-top: 30px; background-image:url(../img/grade.png) , url(../img/grade.png); background-repeat:no-repeat,no-repeat; background-position:-100px -100px,bottom 700px right -100px; background-size:250px,250px;}
}

section#basic{
margin:20px auto;
width:1000px;
}
section#basic img{
max-width:100%;
}
@media screen and (max-width: 767px) {
section#basic{
width:100%;
}
}

/* --------------------------------------------------
	What's New
-------------------------------------------------- */
section#news{ width:1000px;}
section#news div.inner{ width:1000px; margin:0 auto; display:flex; justify-content:left; align-items:center; border: 1px solid #005bbb; padding: 50px 60px; box-sizing:border-box;}
section#news h3{ width:100px; margin-right:80px;}
section#news ul{}
section#news ul li{ margin: 20px 0; line-height: 1.4;}
section#news ul li a{ position:relative; }
section#news ul li a:before{ content:''; width:8px; height:8px; border-top:1px solid #222222; border-right:1px solid #222222; transform:rotate(45deg); position:absolute; top:7px; left:-50px;}
section#news ul li a:after{ content:''; width:8px; height:8px; border-top:1px solid #222222; border-right:1px solid #222222; transform:rotate(45deg); position:absolute; top:7px; left:-45px;}
@media screen and (max-width: 767px) {
section#news{ width:auto;}
section#news div.inner{ width:auto; margin:0 10px; display:block; padding:30px 10px;}
section#news h3{ width:100%; margin-right:0;}
section#news ul{ margin:0 0 0 30px;}
section#news ul li a{ position:relative; }
section#news ul li a:before{ left:-23px;}
section#news ul li a:after{ left:-28px;}
}

/* --------------------------------------------------
	New Topics
	Evnet News
-------------------------------------------------- */
section#topics,section#event{ width:1000px;}
section#topics h3,section#event h3{ font-size:2.0rem; color:#fff; background:#005bbb; padding: 5px 0;}
section div.frame{ width:auto; height:400px; box-shadow: 10px 10px 10px #ccc; border:1px solid #ccc;}
/*section div.frame dl{ font-size:1.4rem;}
section div.frame dl div.inner{ display:flex; padding:20px 0; margin:0 20px; border-bottom:1px dotted #111; }
section div.frame dl dt{}
section div.frame dl dd{ margin-left:30px; }
section#event div.frame p{ display:inline-block; margin:0 30px; padding-bottom:10px; border-bottom:1px dotted #111; }*/
section#event div.title{ position:relative; }
section#event div.title span{ position:absolute; top:50%; transform: translateY(-50%); right:20px;}
section#event div.title a{ color:#fff; position:relative;}
section#event div.title a:before{ content:''; width:8px; height:8px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); position:absolute; top:7px; left:-25px; }
section#event div.title a:after{ content:''; width:8px; height:8px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); position:absolute; top:7px; left:-20px; }
section iframe{ width:100%; height:400px; border:none;}

@media screen and (max-width: 767px) {
section#topics,section#event{ width:auto; padding:0 10px;}
section#topics h3,section#event h3{ margin-bottom:20px; }
section div.frame{ width:auto; height:300px; padding:0 10px; box-shadow: 5px 5px 5px #ccc;}
section div.frame dl{ font-size:1.4rem;}
section div.frame dl div.inner{ display:block; padding:15px 0; margin:0;}
section div.frame dl dt{}
section div.frame dl dd{ margin-left:0; }
section#event div.frame p{ margin: 10px 0 0 0;}
section#event div.title{ position:relative; }
section#event div.title span{ position:relative; display:block; text-align:center;  top:10px; right:0;}
section#event div.title a{ color:#005bbb; position:relative;}
section#event div.title a:before{ content:''; width:8px; height:8px; border-top:1px solid #005bbb; border-right:1px solid #005bbb; transform:rotate(45deg); position:absolute; top:7px; left:-25px; }
section#event div.title a:after{ content:''; width:8px; height:8px; border-top:1px solid #005bbb; border-right:1px solid #005bbb; transform:rotate(45deg); position:absolute; top:7px; left:-20px; }
section iframe{ height:300px;}
}


/* --------------------------------------------------
	Facilities
-------------------------------------------------- */
section#facilities{  width:100%; background: #9bc5ff url(../img/new-bg.png) no-repeat center bottom; background-size:100% auto; padding: 60px 0;}
section#facilities div.inner{ width:1200px; margin:0 auto; }
section#facilities h3{ margin-bottom: 60px; }
section#facilities ul{ display:flex; justify-content:space-between; flex-wrap:wrap;}
section#facilities ul li{ width:30%; padding:10px 10px 20px; border:2px solid #005bbb; background: #fff; margin-bottom:30px;}
section#facilities ul li img{ width: 100%; margin-bottom: 20px;}
section#facilities ul li p{ text-align: center;}
section#facilities ul li span{}
@media screen and (max-width: 767px) {
section#facilities{  width:auto; background: #9bc5ff; padding: 30px 10px;}
section#facilities div.inner{ width:100%;}
section#facilities h2{ line-height:1.2;}
section#facilities h3{ margin: 10px 0; }
section#facilities ul{ display:block;width:auto; maring:10px;}
section#facilities ul li{ width:auto; padding:10px 10px 20px;  margin-bottom:10px;}
}

/* --------------------------------------------------
	関連サイト
-------------------------------------------------- */
section#bnrArea { width:100%; padding-bottom: 80px; border-bottom: 2px solid #005bbb;}
section#bnrArea h3 { margin-bottom: 30px;}
section#bnrArea ul { width:1200px; margin:0 auto; display:flex; justify-content:space-between;}
@media screen and (max-width: 767px) {
section#bnrArea { width:100%; padding-bottom:40px;}
section#bnrArea h3 { margin-bottom: 20px;}
section#bnrArea ul { width:auto; display:block; padding:0 10px;}
section#bnrArea ul li{ margin:10px 0;}
section#bnrArea ul img{ width:100%;}
}

/* --------------------------------------------------
	リンクエリア
-------------------------------------------------- */
section#linkArea{ margin-top:20px;}
section#linkArea ul{ display:flex; justify-content: space-around;}
section#linkArea ul.list01{}
section#linkArea ul.list02{ font-size: 1.4rem; margin-top: 60px;}
section#linkArea ul.list02 li a { border-right: 1px solid #a0a0a0; padding-right: 20px;}
section#linkArea ul.list02 li:last-child a{ border-right:none; }
@media screen and (max-width: 767px) {
section#linkArea{ margin:20px auto;}
section#linkArea ul{ flex-wrap:wrap; justify-content: left;}
section#linkArea ul.list01{ width:auto; text-align: center;}
section#linkArea ul.list01 li{ width:50%; margin-bottom: 15px;}
section#linkArea ul.list02{ font-size: 1.6rem; margin-top: 30px; padding-left:100px;}
section#linkArea ul.list02 li a { border-right: none; padding-right:10px; position:relative;}
section#linkArea ul.list02 li a:before{ content:'';  width:7px; height:7px; border-top:1px solid #333; border-right:1px solid #333; transform:rotate(45deg); position:absolute; top:7px; left:-20px;}
section#linkArea ul.list02 li:last-child a{ border-right:none; }
}

/* --------------------------------------------------
	フッター
-------------------------------------------------- */
footer#globalFooter{ width:100%; padding:60px 0 50px; background:#005bbb; position:relative;}
footer div#pagetop{ position:absolute; top:-100px;right:200px;}
footer div#pagetop a { color:#fff; width:70px; height:70px; background:#005bbb; border-radius:50%; position:relative; display:block; text-align:center; line-height:6;}
footer div#pagetop a:before { content:''; width:15px; height:15px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(-45deg); position:absolute; top:23px; left:26px;}
footer div#pagetop a:hover{text-decoration:none;}
footer#globalFooter div.inner{  font-size:1.3rem; text-align: center; color: #fff;}
footer#globalFooter dl{}
footer#globalFooter dl dt{ margin-bottom:10px;}
footer#globalFooter dl dd{ margin-bottom:5px;}
footer#globalFooter ul{ display:flex; justify-content: center; margin: 20px 0;}
footer#globalFooter ul li{margin-left: 50px;}
footer#globalFooter ul a{ color:#fff; position:relative;}
footer#globalFooter ul a:before{ content:''; width:8px; height:8px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); position:absolute; top:5px; left:-25px;}
footer#globalFooter ul a:after{ content:''; width:8px; height:8px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); position:absolute; top:5px; left:-20px;}

@media screen and (max-width: 767px) {
footer#globalFooter{ width:100%; padding:30px 0 20px; margin-top:120px;}
footer div#pagetop{ position:absolute; top:-90px;right:50%; transform: translateX(50%);}
footer#globalFooter ul{ display:block; margin: 20px 0;}
footer#globalFooter ul li{ text-align:left; margin-left:120px;}
}