@charset "utf-8";


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
color:#555;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#fff;
-webkit-text-size-adjust: none;
}

html{background:#fff;}


/* リンク設定
------------------------------------------------------------*/
a{color:#3a4763;
text-decoration:none;
}

a:hover{color:#3a4763;
	transition: 0.8s ;
}
a:active, a:focus{outline:0;}

#return-top {
    background-color: #d66262;
    border-radius: 50%;
    bottom: 10px;
    color: #fff;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    outline: 0;
    position: fixed;
    right: 10px;
    text-align: center;
    width: 50px;
		z-index: 99;
}


/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
}

.inner{
margin:0 auto;
width:100%;
}


/*************
/* ヘッダー
*************/
#header{
margin-top:-5px;
overflow:hidden;
}

* html #header{height:1%;}


/*************
/* ロゴ
*************/
#header .logo{
float:left;
padding:20px 0 0;
}

.logo a{
font-size:20px;
font-weight:bold;
line-height:1;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.logo span{
font-size:12px;
font-weight:normal;
}





.siteheader{
height:130px;
}

.siteheader h1{
padding:20px 0 10px;
font-size:15px;
font-weight:normal;
}


.logo{
float:left;
}

.logo a{
color:#555;
}

.logo p{float:left;}

.logo span{display:block;}


.info{
float:right;
padding-right:20px;
text-align:center;
}

.info .open{font-size:11px;}

.logo,.info .tel{
margin-top:6px;
font-size:20px;
font-weight:bold;
}

.logo span,.info span{
font-size:.6em;
font-weight:normal;
}



@media only screen and (max-width:800px){
	.siteheader{height:auto;padding-bottom:20px;}

	.siteheader h1,.logo,.info{text-align:center;}

	.siteheader.logo,.info{clear:both;width:100%;float:none;}

	.siteheader.logo p{float:none;display:block;}
	.siteheader.logo img{float:none;padding:0;}
}
<!--ヘッド-->


/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{
margin:0 auto 30px;
padding:0;
width:100%;
line-height:0;
}

#mainBanner .inner{position:relative;}

#mainBanner img{
max-width:100%;
max-width:940px;
height:auto;
}

.slogan{
position:absolute;
max-width:100%;
height:auto;
bottom:0;
left:0;
padding:5px 10px;
line-height:1.4;
z-index:100;
}

.slogan h2{
padding-bottom:5px;
color:#333;
font-size:20px;
}

.slogan h3{
font-size:14px;
color:#666;
}

/* サブページ スローガン*/
.subImg .slogan{left:auto;right:0;}


.album {
	margin: auto;
	max-width:940px;
	background-color: white;
	position: relative;
}

.album img {
	width: 100%;
	max-width:940px;
	text-align:center;
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:4.5s;
	-webkit-animation-delay:5s;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left:0%;
}

.album .img3 {
	animation-delay:0s;
	-webkit-animation-delay:0s;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left:0%;
}

.album .img4 {
	animation-delay:0s;
	-webkit-animation-delay:0s;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left:0%;
}

@keyframes album {
  0%   { opacity: 0; }
  5.55%  { opacity: 1; }   /* 0.5秒でフェードイン完了 */
  50%    { opacity: 1; }   /* 4秒表示 */
  55.55% { opacity: 0; }   /* 0.5秒でフェードアウト */
}

@-webkit-keyframes album {
  0%   { opacity: 0; }
  5.55%  { opacity: 1; }
  50%    { opacity: 1; }
  55.55% { opacity: 0; }
}

.mainbutton {
  position: relative;
  }

.mainbutton a {
  position: absolute;
  top: 85%;
  left: 65%;
  -ms-transform: translate(-20%,-20%);
  -webkit-transform: translate(-20%,-20%);
  transform: translate(-20%,-20%);
  margin:0;
  font-size: 16px;
	font-weight: bold;
  border: solid white 0px;
  padding: 15px 40px;
  color: white;
	background-color: #1cad7e;
  text-decoration: none;
	box-shadow: 2px 2px 6px 0 rgba(0,0,0,.3);
	border-radius: 4px;
  }

.mainbutton a:hover{
	background-color: #008080;
  }

.mainbutton img {
  width: 100%;
  }



/**************************
/* グリッド
**************************/
.gridWrapper{
padding-bottom:20px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}

.grid,.grid-3{
float:left;
}

.grid h3{
font-size:1.5em;
padding:3px 0;
margin-bottom:5px;
border-top:0px solid #00bad9;
border-bottom:1px solid #3a4763;
}

.grid p{
padding:5px 0;
font-size:1.2em;
margin-bottom:5px;
}

.grid-3 p{
padding:5px 0;
font-size:1.2em;
margin-bottom:15px;
height:350px;
display:block;
margin-left:20px;
}

.grid-3 p.img{
float:left;
width:98%;
margin:3px 5px 0 0;
border:1px solid #ddd;
}
.grid p.img{
float:left;
margin:3px 5px 0 0;
}

.readmore{clear:both;}

.readmore a{
padding:3px 5px;
border-radius:3px;
color:#fff;
background:#00bad9;
}

.readmore2 a{
padding:3px 5px;
border-radius:3px;
color:#fff;
background:#00bad9;
}

.readmore a:hover{background:#0097d9;}

.line-up{
	display: flex;
	flex-wrap: wrap;
}
.line-up__li {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}
.room .grid {
	float: none;
	margin: 1em;
	width: auto;
}
.room p.img {
	float: none;
	text-align: center;
}
@media (min-width:576px){
	.line-up__li {
		width: 50%;
	}
	}
}
@media (min-width:992px){
	.line-up__li {
		width: 25%;
	}
	}


}

.d-inline-block {
	display: inline-block;
	vertical-align: top;
}

/* フッター内のグリッド(3カラム) */
#footer .grid{
color:#fff;
border:0;
background:transparent;
}

#footer .grid p{padding:0;}


/*************
メイン コンテンツ
*************/
section.content{
padding:20px 10px;
background: #f9f9fa;
margin-bottom:20px;
border-radius:1px;
overflow:hidden;
font-size:1.2em;
}

* html section.content{height:1%;}

section.content p{
padding:15px;
color: #3a4763;
}

section.content div {
max-width:940px;
margin:auto;

}

section.content div.sns {
max-width:400px;
width:100%;
padding:30px;
margin:20px auto;
float:left;
}

h3.heading{
font-size:1.6em;
padding: 0.5em 0.5em;
color: #3a4763;
background: transparent;
border-left: solid 5px #3a4763;
margin:25px;
}

h3.heading:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

.content h3.heading{
font-size:1.2em;
padding: 0.5em 0.5em;
color: #3a4763;
background: transparent;
border-left: solid 5px #3a4763;
margin:15px;
}

.grid h3.heading:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}


section.content img{
max-width:100%;
height:auto;
padding:15px;
}

section.content div {
text-align:center;
max-width: 940px;
}

section.content #gallery .grid img{
max-width:212px
}

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

section.content #gallery .grid img{
max-width:100px
}

#muryoumenu li{ 
	display: inline-block;
	padding: 0; 
	margin: 0; 
	float: left;
	width: 50%; 
	line-height: 60px;
	font-size: 0.9em;
}

}

img.frame,#gallery img{
background:;
padding:px;
}

#gallery .grid{margin-bottom:10px;}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}

.img__room {
	border: 0;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	vertical-align: bottom;
	width: auto;
}

.q-a {
	margin: 1em;
	margin-bottom: 0;
}
.q-a__list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2em;
}
.q-a__list:first-child {
	margin-top: 0;
}
.q-a__h4 {
	font-size: 1.6em;
}
.q-a__p {
	margin-top: 0.5em;
	max-width: 600px;
}
.question-font {
	font-family: 'Handlee', cursive;
	font-size: 1.6em;
}
.q-a .d-inline-block {
	width: 100%;
}
.q-a .question-font {
	color: #789632;
	font-weight: bold;
	width: 120px;
}
@media (min-width:576px){
	.q-a {
		margin: 1em 4em;
		margin-bottom: 0;
	}
}
@media (min-width:992px){
	.q-a {
		margin: 2em 4em;
		margin-bottom: 0;
	}
	.q-a .d-inline-block {
		width: auto;
	}
}

/*************
テーブル
*************/
table.table{
border-collapse:collapse;
width:90%;
margin:10px auto;
}

table.table th,table.table td{
padding:5px;
border:0.5px solid #fff;
}

table.table th{
text-align:right;
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
color:#fff;
background:#3a4763;
}


.grid ul {
    width:100%;
    margin:0;
    padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.grid  ul li {
    width: 100%;
    height:550px;
    background: #f9f9fa;
    list-style: none;
    padding-bottom: 65px;
    margin-bottom: 0;
    position: relative;
    text-align:center
}

.grid  ul.course li {
    width: 100%;
    height:700px;
    background: #f9f9fa;
    list-style: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    text-align:center
}

.grid   ul.about li {
    width: 100%;
    height:400px;
    background: #f9f9fa;
    list-style: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    text-align:center
}

.grid   ul.news li {
    width: 100%;
    height:500px;
    background: #f9f9fa;
    list-style: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    text-align:center
}


.grid   ul.kohshi li {
    width: 100%;
    height:1010px;
    background: #f9f9fa;
    list-style: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    text-align:center
}

@media (min-width:576px){
	.grid   ul.kohshi li {
	/* height: 880px; */
	}

}


.grid ul li img {
    width:100%;
    margin:0;
    padding:0;
}


.grid ul.news li img {
    width:200px;
    margin:0;
    padding:10px;
    }


.grid  ul li h4 {
    font-weight:bold;
    font-size:100%;
    text-align:center;
    margin-bottom:15px;
    margin-top:20px;
    color:#3a4763;
}

.grid  ul.course li h4 {
    font-weight:bold;
    font-size:110%;
    text-align:center;
    margin-bottom:2px;
    margin-top:20px;
    color:#3a4763;
}

.grid  ul.kohshi li h4 {
    font-weight:bold;
    font-size:120%;
    text-align:center;
    margin-bottom:2px;
    margin-top:20px;
    color:#3a4763;
}

.grid_koshi  ul li p {
    padding:0 9%;
    font-size:105%;
    text-align: center;
    line-height: 20px;
    color:#3a4763;
}



.grid  ul li p {
    padding:0 9%;
    font-size:100%;
    text-align: center;
    line-height: 20px;
    color:#3a4763;
}

.grid  ul li p.button {
    text-align:center;
    padding:0;
    display: block;
    position: absolute;
    bottom: 15px;
    width:100%;
}


.grid  ul li p.button {
    text-align:center;
    padding:0;
    display: block;
    position: absolute;
    bottom: 15px;
    width:100%;
}

.grid  ul li p.button  :hover{
  background-color: #59b1eb;
}

.grid  ul li p.button2  :hover{
  background-color: #3a4763;
}

.grid  ul li p.button3  :hover{
  background-color: #3a4763;
}

.grid  ul li p.button4  :hover{
  background-color: #3a4763;
}

.grid  ul li p.button a {
    color: #fff;
    padding: 10px 30px;
    background: #3a4763;
    font-size: 100%;
    display: inline-block;
    text-decoration: none;
}

.grid  ul li p.button2 a {
    color: #fff;
    padding: 10px 43px;
		margin-bottom:5px;
    background: #59b1eb;
    font-size: 100%;
    display: inline-block;
    text-decoration: none;
}

.grid  ul li p.button3 a {
    color: #fff;
    padding: 10px 30px;
		margin-bottom:5px;
    background: #59b1eb;
    font-size: 100%;
    display: inline-block;
    text-decoration: none;
}

.grid  ul li p.button4 a {
    color: #fff;
    padding: 10px 37px;
		margin-bottom:5px;
    background: #59b1eb;
    font-size: 100%;
    display: inline-block;
    text-decoration: none;
}




/*************
サブ（フッター前）コンテンツ
*************/
#sub  ul.list {
padding:10px;
}

#sub  ul.list li{
margin-bottom:10px;
padding-bottom:10px;
}

#sub ul.list li:last-child{
border:0;
margin-bottom:0;
}

#sub  ul.list li a{
display:block;
}

#sub  ul.list {
padding-bottom:7px;
}

#sub  ul.list li{
height:auto;
clear:both;
margin-bottom:8px;
padding:4px 0;
overflow:hidden;
}

* html #sub  ul.list li{height:1%;}

#sub  ul.list  li img{
width:70px;
height:auto;
float:left;
margin:5px 10px 5px 5px;
padding:5px;
}

#sub .grid ul.list li{
font-size:12px;
line-height:40px;
}

#sub .grid ul li h5 {
    font-weight:bold;
    font-size:115%;
    text-align:left;
    color:#3a4763;
    margin-top:5px;
}


#sub .grid  ul li p.button {
    text-align:center;
    padding:0;
    display: block;
    position: absolute;
    left:25px;
    bottom: 10px;
    width:100%;
}

#sub ul li p.button {
    text-align:center;
    padding:0;
    display: block;
    position: absolute;
    bottom: 5px;
    width:100%;
}

#sub ul li p.button  :hover{
  background-color: #59b1eb;
}

#sub ul li p.button a {
    color: #fff;
    padding: 5px 5px;
    background: #3a4763;
    font-size: 90%;
    display: inline-block;
    text-decoration: none;
}



/*************
/* フッター
*************/
#footer{
clear:both;
padding:20px 0;
overflow:hidden;
background:#3a4763;
}

* html #footer{height:1%;}

.tel strong{
font-size:20px;
font-weight:bold;
}

#footer a{color:#fff;}
#footer a:hover{color:#ccc;}

#footer .copyright{font-size:11px;}


/* PC用 */
@media only screen and (min-width:960px){
	#wrapper,.inner{
	width:940px;
	padding:0;
	}

	#wrapper{padding-bottom:20px;}

  nav div.panel{
	display:block !important;
	float:left;
	}

	a#menu{display:none;}

	nav#mainNav ul{
	float:right;
	overflow:hidden;
	margin-bottom: 10px;
	}

	* html nav#mainNav ul{height:1%;}

	nav#mainNav ul li{
	float:left;
	text-align:center;
	margin-right: 10px;
	}

	nav#mainNav ul a{
	font-size:13px;
	color:#3a4763;
	display:block;
	padding:20px 10px;
	line-height:1.2;
	position: relative;
  border-bottom: 2px solid #fff;
	}

	nav#mainNav ul span{
	font-size:10px;
	color:#3a4763;
	}

nav#mainNav ul a::after{
	position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background: #000000;
  transform: scaleX(0);
  transition: transform 0.4s;
}


	nav#mainNav ul li.active a,nav#mainNav ul a:hover::after{
	border-color:#3a4763;
	color:#3a4763;
	font-weight:bold
	border-bottom: 2px solid #b2b2b2;
	transform: scaleX(1);
	}


	.slogan{top:100px;}

	.subImg .slogan{left:auto;right:0;top:70px;}

	/* グリッド全体 */
	.gridWrapper{
	width:960px;
	margin:0 0 0 -20px;
	}

	/* グリッド共通 ベース:トップページ4カラム */
	.grid{
	float:left;
	width:220px;
	margin-left:20px;
	}

	.grid-3{
	float:left;
	width:450px;
	}

	.grid-3 p img{
		border:1px solid #ddd;
		width:98%;
		margin-bottom:20px;
	}

	/* サブコンテンツ + フッター グリッド(3カラム) */
	#sub .grid, #footer .grid {width:298px;}
	#footer .grid{border:0;}
}


/* モニター幅940px以下 */
@media only screen and (max-width:940px){
	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}

	#header{padding:10px 0;}

	#header .logo,#footer .logo{
	float:none;
	text-align:center;
	padding:10px 5px;
	}

	nav#mainNav{
	clear:both;
	width:100%;
	margin:0 auto;
	padding:0;
	background-color:#3a4763
	}

	nav#mainNav a.menu{
	width:100%;
	display:block;
	height:40px;
	line-height:40px;
	font-weight: bold;
	text-align: right;
	color:#fff;
	}

	nav#mainNav a#menu span{
		padding-right:20px;
		padding-left:240px;
	}
	nav#mainNav a.menu span:before{content: "▼ ";}
	nav#mainNav a.menuOpen span:before{content: "▲ ";}

	nav#mainNav a#menu:hover{cursor:pointer;}

	nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
	}

	nav#mainNav ul li{
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #3a4763;
	color:#3a4763;
	background:#fff;
	}

	nav#mainNav ul li a span{padding-left:10px;}

	nav#mainNav ul li:first-child a{border-top:1px dashed #fff;}

	nav#mainNav ul li:last-child a{border:0;}

	nav#mainNav ul li.active a,nav#mainNav ul li a:hover{background:f5f5f5;}

	nav div.panel{float:none;}

	.grid{
	float:left;
	width:48%;
	margin:10px 2% 0 0;
	}

	.grid_koshi{
	float:left;
	width:100%;
	margin:10px 2% 0 0;
	}

	.grid img{
	float:left;
	margin-right:5px;
	}

	.grid-3 img{
	float:left;
	width:100%;
	margin-right:5px;
	boder:1px solid #ddd;
	}

	#gallery{padding-left:1px;}

	#gallery .grid{
	width:23%;
	margin:0 2% 0 0;
	padding:0;
	}

	#gallery .grid img{
	float:none;
	margin:0;
	}

	#sub .grid{
	width:32%;
	margin:10px 1%;
	}

	#sub .grid:first-child{
	margin-left:0;
	}

	#sub .grid:last-child{
	margin-right:0;
	}

	#footer .grid, #footer .grid p{
	float:none;
	width:100%;
	text-align:center;
	border:0;
	}

	#footer .grid:last-child{padding-top:20px;}
}


/* iPad 縦 */
@media only screen and (max-width:800px){
  #header{padding-bottom:0;}

	#header h1{text-align:center;}

	#header .logo{
	float:none;
	text-align:center;
	padding:10px 5px 20px;
	}

	#sub ul.list{padding:10px 10px 11px;}

	#sub ul.list li{
	padding-bottom:10px;
	margin-bottom:8px;
	}

	.grid ul li img {
	    width:90%;
	    margin:15px;
	    padding:0;
	}

	.grid ul.course li {
    width: 100%;
    height: 950px;
    background: #f9f9fa;
    list-style: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
}

	.grid   ul.about li {
	    width: 100%;
	    height:250px;
	    background: #f9f9fa;
	    list-style: none;
	    padding-bottom: 15px;
	    margin-bottom: 15px;
	    position: relative;
	    text-align:center
	}

	.grid   ul.news li {
	    width: 100%;
	    height:370px;
	    background: #f9f9fa;
	    list-style: none;
	    padding-bottom: 15px;
	    margin-bottom: 15px;
	    position: relative;
	    text-align:center
	}

	section.content div.sns {
	max-width:350px;
	width:100%;
	padding:30px;
	margin:20px auto;
	float:left;
	}

	.grid	ul.about li img {
    width:45%;
    margin: 0;
    padding: 0;
}

.mainbutton a {
    position: absolute;
    top: 85%;
    left: 65%;
    -ms-transform: translate(-20%,-20%);
    -webkit-transform: translate(-20%,-20%);
    transform: translate(-20%,-20%);
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    border: solid white 0px;
    padding: 15px 30px;
    color: white;
    background-color: #1cad7e;
    text-decoration: none;
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,.3);
    border-radius: 4px;
}


}




/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	#footer .grid p{text-align:center;}

	.grid img{
	float:none;
	margin:0 auto;
	}

	.grid-3 img{
	float:left;
	width:100%;
	}
	.grid p,#sub .grid li{text-align:left;}

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}



}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	#mainBanner{margin-bottom:10px;}
	#mainBanner h2,#mainBanner h3{font-size:75%;}
	.subImg .slogan{right:-30px;}

	.grid img{max-width:90%;height:auto;}
	.grid-3 img{max-width:90%;height:auto;}

	#sub .grid{
	float:none;
	width:98%;
	}

	#sub .grid h3{padding:10px 5px;}

	#sub ul.list{padding:10px;}

	#sub ul.list li{
	padding-bottom:3px;
	margin-bottom:3px;
	}

	.grid ul.about li img {
    width: 100%;
    margin: 0;
    padding: 0;
}

	.grid   ul.about li {
	    width: 100%;
	    height:400px;
	    background: #f9f9fa;
	    list-style: none;
	    padding-bottom: 15px;
	    margin-bottom: 15px;
	    position: relative;
	    text-align:center
	}

	.grid   ul.news li {
	    width: 100%;
	    height:500px;
	    background: #f9f9fa;
	    list-style: none;
	    padding-bottom: 15px;
	    margin-bottom: 15px;
	    position: relative;
	    text-align:center
	}

	h3.heading{
	font-size:1.3em;
	padding: 0.2em 1em;
	color: #3a4763;
	background: transparent;
	border-left: solid 5px #3a4763;
	margin:25px;
	}


.google-maps {
position: relative;
padding-bottom: 75%; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}


.youtube iframe{
  width: 100%;
}



.album {
	margin: auto;
	max-width:940px;
	background-color: white;
	position: relative;
}

.album img {
	width: 100%;
	max-width:940px;
	text-align:center;
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:4.5s;
	-webkit-animation-delay:5s;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left:0%;
}

.album .img3 {
	animation-delay:0s;
	-webkit-animation-delay:0s;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left:0%;
}

.album .img4 {
	animation-delay:0s;
	-webkit-animation-delay:0s;
	position: absolute;
	margin: 0 auto;
	top: 0;
	left:0%;
}


@keyframes album {
  0%   { opacity: 0; }
  5.55%  { opacity: 1; }   /* 0.5秒でフェードイン完了 */
  50%    { opacity: 1; }   /* 4秒表示 */
  55.55% { opacity: 0; }   /* 0.5秒でフェードアウト */
}

@-webkit-keyframes album {
  0%   { opacity: 0; }
  5.55%  { opacity: 1; }
  50%    { opacity: 1; }
  55.55% { opacity: 0; }
}

.mainbutton {
  position: relative;
  }

.mainbutton a {
  position: absolute;
  top: 85%;
  left: 30%;
  -ms-transform: translate(-20%,-20%);
  -webkit-transform: translate(-20%,-20%);
  transform: translate(-20%,-20%);
  margin:0;
  font-size: 14px;
	font-weight: bold;
  border: solid white 0px;
  padding: 15px 20px;
  color: white;
	background-color: #1cad7e;
  text-decoration: none;
	box-shadow: 2px 2px 6px 0 rgba(0,0,0,.3);
	border-radius: 4px;
  }

.mainbutton a:hover{
	background-color: #008080;
  }

.mainbutton img {
  width: 100%;
  }

	.grid ul.course li {
		width: 100%;
		height: 660px;
		background: #f9f9fa;
		list-style: none;
		padding-bottom: 15px;
		margin-bottom: 15px;
		position: relative;
		text-align: center;
}


	#panel-1-ctrl:checked ~ #panels #panel-1 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}

	#panel-2-ctrl:checked ~ #panels #panel-2 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}

	#panel-3-ctrl:checked ~ #panels #panel-3 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}

	#panel-4-ctrl:checked ~ #panels #panel-4 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}

	#panel-5-ctrl:checked ~ #panels #panel-5 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}

	#panel-6-ctrl:checked ~ #panels #panel-6 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-7-ctrl:checked ~ #panels #panel-7 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-8-ctrl:checked ~ #panels #panel-8 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-9-ctrl:checked ~ #panels #panel-9 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-10-ctrl:checked ~ #panels #panel-10 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-11-ctrl:checked ~ #panels #panel-11 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-12-ctrl:checked ~ #panels #panel-12 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-13-ctrl:checked ~ #panels #panel-13 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-14-ctrl:checked ~ #panels #panel-14 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-15-ctrl:checked ~ #panels #panel-15 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-16-ctrl:checked ~ #panels #panel-16 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-17-ctrl:checked ~ #panels #panel-17 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-18-ctrl:checked ~ #panels #panel-18 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-19-ctrl:checked ~ #panels #panel-19 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-20-ctrl:checked ~ #panels #panel-20 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}
	#panel-21-ctrl:checked ~ #panels #panel-21 main {
	max-height: initial;
	opacity: 1;
	padding: 5px 5px !important;
	}


}
@media screen and (max-width: 640px){
.pconly{display:none;}

.siteheader {
    height: 50px;
    padding-bottom: 5px;
	}

	.siteheader h1 {
	    padding: 0px 0px 10px;
	    font-size: 12px;
	    font-weight: normal;
	}

	#header .logo {
    float: none;
    text-align: center;
    padding: 0px;
}

.logo a {
    font-size: 0px;
}

nav#mainNav a#menu span{
	padding-right:5%;
	padding-left:35%;
}



}

@media screen and (min-width: 640px){
.sponly{display:none;}}



/*************
/* カレンダー用タブ
*************/


<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
ul#tabs-list {
list-style: none;
text-align: center;
border-bottom: 1px solid #dfdfdf;
margin: 0;
padding: 0;
}

label.panel-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
		user-select: none;
display: block;
width: 100%;
color: #bdc3c7;
cursor: pointer;
background-color: #ecf0f1;
transition-property: background-color, color;
transition-duration: 200ms;
}
label.panel-label:hover {
color: #3a4763;
font-weight: bold;
}

#panels {
background-color: white;
}
#panels .container {
margin: 0 auto;
width: 100%;
}
#panels section header label.panel-label {
padding: 12px 24px;
box-sizing: border-box;
}
#panels section main {
box-sizing: border-box;
max-height: 0;
opacity: 0;
transition: opacity 600ms;
overflow-y: hidden;
}

#panel-1-ctrl:checked ~ #panels #panel-1 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-2-ctrl:checked ~ #panels #panel-2 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-3-ctrl:checked ~ #panels #panel-3 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-4-ctrl:checked ~ #panels #panel-4 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-5-ctrl:checked ~ #panels #panel-5 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-6-ctrl:checked ~ #panels #panel-6 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-7-ctrl:checked ~ #panels #panel-7 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-8-ctrl:checked ~ #panels #panel-8 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-9-ctrl:checked ~ #panels #panel-9 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-10-ctrl:checked ~ #panels #panel-10 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-11-ctrl:checked ~ #panels #panel-11 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-12-ctrl:checked ~ #panels #panel-12 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-13-ctrl:checked ~ #panels #panel-13 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-14-ctrl:checked ~ #panels #panel-14 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-15-ctrl:checked ~ #panels #panel-15 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-16-ctrl:checked ~ #panels #panel-16 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-17-ctrl:checked ~ #panels #panel-17 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-18-ctrl:checked ~ #panels #panel-18 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-19-ctrl:checked ~ #panels #panel-19 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-20-ctrl:checked ~ #panels #panel-20 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

#panel-21-ctrl:checked ~ #panels #panel-21 main {
max-height: initial;
opacity: 1;
padding: 48px 24px;
}

@media all and (max-width: 767px) {

	main {
	width: 100%;
	margin: 0 auto;
	}

	#panel-1-ctrl:checked ~ #panels #panel-1 main {
    max-height: initial;
    opacity: 1;
    padding: 5px 5px;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-4 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-5 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-6 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-7 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-8 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-9 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-10 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-11 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-12 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-13 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-14 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-15 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-16 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-17 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-18 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-19 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-20 {
max-height: 46px;
opacity: 1;
}

#nav-ctrl:checked ~ #tabs-list #li-for-panel-21 {
max-height: 46px;
opacity: 1;
}

#open-nav-label {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}

#nav-ctrl:checked ~ #tabs-list #open-nav-label {
display: none;
}

#close-nav-label {
display: block;
max-height: 0;
overflow-y: hidden;
background-color: #444444;
color: #ecf0f1;
padding: 0px;
transition: max-height 200ms;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
line-height: 22px;
letter-spacing: 1px;
}

#nav-ctrl:checked ~ #tabs-list #close-nav-label {
max-height: 36px;
opacity: 1;
padding: 12px 24px;
}

#tabs-list {
position: relative;
}
#tabs-list label.panel-label {
padding: 12px 15px;
}
#tabs-list #li-for-panel-1 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-2 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-3 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-4 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-5 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-6 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-7 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-8 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-9 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-10 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-11 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-12 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-13 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-14 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-15 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-16 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-17 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-18 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-19 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-20 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#tabs-list #li-for-panel-21 {
max-height: 0;
overflow-y: hidden;
transition: max-height 200ms;
}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
max-height: 46px;
opacity: 1;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
padding-left: 15px;
}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
max-height: 46px;
opacity: 1;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
max-height: 46px;
opacity: 1;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
max-height: 46px;
opacity: 1;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {
max-height: 46px;
opacity: 1;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 {
max-height: 46px;
opacity: 1;
}
#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 {
max-height: 46px;
opacity: 1;
}
#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 {
max-height: 46px;
opacity: 1;
}
#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-9-ctrl:checked ~ #tabs-list #li-for-panel-9 {
max-height: 46px;
opacity: 1;
}
#panel-9-ctrl:checked ~ #tabs-list #li-for-panel-9 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-10-ctrl:checked ~ #tabs-list #li-for-panel-10 {
max-height: 46px;
opacity: 1;
}
#panel-10-ctrl:checked ~ #tabs-list #li-for-panel-10 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-11-ctrl:checked ~ #tabs-list #li-for-panel-11 {
max-height: 46px;
opacity: 1;
}
#panel-11-ctrl:checked ~ #tabs-list #li-for-panel-11 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-12-ctrl:checked ~ #tabs-list #li-for-panel-12 {
max-height: 46px;
opacity: 1;
}
#panel-12-ctrl:checked ~ #tabs-list #li-for-panel-12 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-13-ctrl:checked ~ #tabs-list #li-for-panel-13 {
max-height: 46px;
opacity: 1;
}
#panel-13-ctrl:checked ~ #tabs-list #li-for-panel-13 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-14-ctrl:checked ~ #tabs-list #li-for-panel-14 {
max-height: 46px;
opacity: 1;
}
#panel-14-ctrl:checked ~ #tabs-list #li-for-panel-14 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-15-ctrl:checked ~ #tabs-list #li-for-panel-15 {
max-height: 46px;
opacity: 1;
}
#panel-15-ctrl:checked ~ #tabs-list #li-for-panel-15 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-16-ctrl:checked ~ #tabs-list #li-for-panel-16 {
max-height: 46px;
opacity: 1;
}
#panel-16-ctrl:checked ~ #tabs-list #li-for-panel-16 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-17-ctrl:checked ~ #tabs-list #li-for-panel-17 {
max-height: 46px;
opacity: 1;
}
#panel-17-ctrl:checked ~ #tabs-list #li-for-panel-17 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-18-ctrl:checked ~ #tabs-list #li-for-panel-18 {
max-height: 46px;
opacity: 1;
}
#panel-18-ctrl:checked ~ #tabs-list #li-for-panel-18 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-19-ctrl:checked ~ #tabs-list #li-for-panel-19 {
max-height: 46px;
opacity: 1;
}
#panel-19-ctrl:checked ~ #tabs-list #li-for-panel-19 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}


#panel-20-ctrl:checked ~ #tabs-list #li-for-panel-20 {
max-height: 46px;
opacity: 1;
}
#panel-20-ctrl:checked ~ #tabs-list #li-for-panel-20 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panel-21-ctrl:checked ~ #tabs-list #li-for-panel-21 {
max-height: 46px;
opacity: 1;
}
#panel-21-ctrl:checked ~ #tabs-list #li-for-panel-21 label.panel-label {
background-color: white;
color: #3a4763;
background-color: #3a4763;
color: white;
}

#panels .container {
width: 100%;
}
#panels section header {
display: block;
}

}
@media all and (min-width: 768px) {

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
border-right: 1px solid transparent;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
border-left: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {
height: 2px;
}

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
border-right: 1px solid transparent;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
border-left: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {
height: 2px;
}

#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {
border-right: 1px solid transparent;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
border-left: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {
height: 2px;
}

#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4.last {
border-right: 1px solid transparent;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 + li {
border-left: 1px solid #dfdfdf;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 15px;
}
#panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label::after {
height: 2px;
}

#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5.last {
border-right: 1px solid transparent;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 + li {
border-left: 1px solid #dfdfdf;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label::after {
height: 2px;
}

#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6.last {
border-right: 1px solid transparent;
}
#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 + li {
border-left: 1px solid #dfdfdf;
}
#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-6-ctrl:checked ~ #tabs-list #li-for-panel-6 label.panel-label::after {
height: 2px;
}

#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7.last {
border-right: 1px solid transparent;
}
#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 + li {
border-left: 1px solid #dfdfdf;
}
#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-7-ctrl:checked ~ #tabs-list #li-for-panel-7 label.panel-label::after {
height: 2px;
}


#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8.last {
border-right: 1px solid transparent;
}
#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 + li {
border-left: 1px solid #dfdfdf;
}
#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-8-ctrl:checked ~ #tabs-list #li-for-panel-8 label.panel-label::after {
height: 2px;
}

#panel-9-ctrl:checked ~ #tabs-list #li-for-panel-9 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-9-ctrl:checked ~ #tabs-list #li-for-panel-9.last {
border-right: 1px solid transparent;
}
#panel-9-ctrl:checked ~ #tabs-list #li-for-panel-9 + li {
border-left: 1px solid #dfdfdf;
}
#panel-9-ctrl:checked ~ #tabs-list #li-for-panel-9 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-9-ctrl:checked ~ #tabs-list #li-for-panel-9 label.panel-label::after {
height: 2px;
}

#panel-10-ctrl:checked ~ #tabs-list #li-for-panel-10 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-10-ctrl:checked ~ #tabs-list #li-for-panel-10.last {
border-right: 1px solid transparent;
}
#panel-10-ctrl:checked ~ #tabs-list #li-for-panel-10 + li {
border-left: 1px solid #dfdfdf;
}
#panel-10-ctrl:checked ~ #tabs-list #li-for-panel-10 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-10-ctrl:checked ~ #tabs-list #li-for-panel-10 label.panel-label::after {
height: 2px;
}

#panel-11-ctrl:checked ~ #tabs-list #li-for-panel-11 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-11-ctrl:checked ~ #tabs-list #li-for-panel-11.last {
border-right: 1px solid transparent;
}
#panel-11-ctrl:checked ~ #tabs-list #li-for-panel-11 + li {
border-left: 1px solid #dfdfdf;
}
#panel-11-ctrl:checked ~ #tabs-list #li-for-panel-11 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-11-ctrl:checked ~ #tabs-list #li-for-panel-11 label.panel-label::after {
height: 2px;
}

#panel-12-ctrl:checked ~ #tabs-list #li-for-panel-12 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-12-ctrl:checked ~ #tabs-list #li-for-panel-12.last {
border-right: 1px solid transparent;
}
#panel-12-ctrl:checked ~ #tabs-list #li-for-panel-12 + li {
border-left: 1px solid #dfdfdf;
}
#panel-12-ctrl:checked ~ #tabs-list #li-for-panel-12 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-12-ctrl:checked ~ #tabs-list #li-for-panel-12 label.panel-label::after {
height: 2px;
}

#panel-13-ctrl:checked ~ #tabs-list #li-for-panel-13 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-13-ctrl:checked ~ #tabs-list #li-for-panel-13.last {
border-right: 1px solid transparent;
}
#panel-13-ctrl:checked ~ #tabs-list #li-for-panel-13 + li {
border-left: 1px solid #dfdfdf;
}
#panel-13-ctrl:checked ~ #tabs-list #li-for-panel-13 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-13-ctrl:checked ~ #tabs-list #li-for-panel-13 label.panel-label::after {
height: 2px;
}

#panel-14-ctrl:checked ~ #tabs-list #li-for-panel-14 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-14-ctrl:checked ~ #tabs-list #li-for-panel-14.last {
border-right: 1px solid transparent;
}
#panel-14-ctrl:checked ~ #tabs-list #li-for-panel-14 + li {
border-left: 1px solid #dfdfdf;
}
#panel-14-ctrl:checked ~ #tabs-list #li-for-panel-14 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-14-ctrl:checked ~ #tabs-list #li-for-panel-14 label.panel-label::after {
height: 2px;
}

#panel-15-ctrl:checked ~ #tabs-list #li-for-panel-15 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-15-ctrl:checked ~ #tabs-list #li-for-panel-15.last {
border-right: 1px solid transparent;
}
#panel-15-ctrl:checked ~ #tabs-list #li-for-panel-15 + li {
border-left: 1px solid #dfdfdf;
}
#panel-15-ctrl:checked ~ #tabs-list #li-for-panel-15 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-15-ctrl:checked ~ #tabs-list #li-for-panel-15 label.panel-label::after {
height: 2px;
}

#panel-16-ctrl:checked ~ #tabs-list #li-for-panel-16 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-16-ctrl:checked ~ #tabs-list #li-for-panel-16.last {
border-right: 1px solid transparent;
}
#panel-16-ctrl:checked ~ #tabs-list #li-for-panel-16 + li {
border-left: 1px solid #dfdfdf;
}
#panel-16-ctrl:checked ~ #tabs-list #li-for-panel-16 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-16-ctrl:checked ~ #tabs-list #li-for-panel-16 label.panel-label::after {
height: 2px;
}

#panel-17-ctrl:checked ~ #tabs-list #li-for-panel-17 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-17-ctrl:checked ~ #tabs-list #li-for-panel-17.last {
border-right: 1px solid transparent;
}
#panel-17-ctrl:checked ~ #tabs-list #li-for-panel-17 + li {
border-left: 1px solid #dfdfdf;
}
#panel-17-ctrl:checked ~ #tabs-list #li-for-panel-17 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-17-ctrl:checked ~ #tabs-list #li-for-panel-17 label.panel-label::after {
height: 2px;
}

#panel-18-ctrl:checked ~ #tabs-list #li-for-panel-18 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-18-ctrl:checked ~ #tabs-list #li-for-panel-18.last {
border-right: 1px solid transparent;
}
#panel-18-ctrl:checked ~ #tabs-list #li-for-panel-18 + li {
border-left: 1px solid #dfdfdf;
}
#panel-18-ctrl:checked ~ #tabs-list #li-for-panel-18 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-18-ctrl:checked ~ #tabs-list #li-for-panel-18 label.panel-label::after {
height: 2px;
}

#panel-19-ctrl:checked ~ #tabs-list #li-for-panel-19 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-19-ctrl:checked ~ #tabs-list #li-for-panel-19.last {
border-right: 1px solid transparent;
}
#panel-19-ctrl:checked ~ #tabs-list #li-for-panel-19 + li {
border-left: 1px solid #dfdfdf;
}
#panel-19-ctrl:checked ~ #tabs-list #li-for-panel-19 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-19-ctrl:checked ~ #tabs-list #li-for-panel-19 label.panel-label::after {
height: 2px;
}

#panel-20-ctrl:checked ~ #tabs-list #li-for-panel-20 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-20-ctrl:checked ~ #tabs-list #li-for-panel-20.last {
border-right: 1px solid transparent;
}
#panel-20-ctrl:checked ~ #tabs-list #li-for-panel-20 + li {
border-left: 1px solid #dfdfdf;
}
#panel-20-ctrl:checked ~ #tabs-list #li-for-panel-20 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-20-ctrl:checked ~ #tabs-list #li-for-panel-20 label.panel-label::after {
height: 2px;
}

#panel-21-ctrl:checked ~ #tabs-list #li-for-panel-21 {
pointer-events: none;
cursor: default;
-webkit-transform: translate3d(0, 1px, 0);
			transform: translate3d(0, 1px, 0);
box-shadow: none;
border-right: none;
}
#panel-21-ctrl:checked ~ #tabs-list #li-for-panel-21.last {
border-right: 1px solid transparent;
}
#panel-21-ctrl:checked ~ #tabs-list #li-for-panel-21 + li {
border-left: 1px solid #dfdfdf;
}
#panel-21-ctrl:checked ~ #tabs-list #li-for-panel-21 label.panel-label {
background-color: white;
color: #3a4763;
padding-top: 16px;
}
#panel-21-ctrl:checked ~ #tabs-list #li-for-panel-21 label.panel-label::after {
height: 2px;
}



ul#tabs-list {
text-align: center;
border-bottom: 1px solid #dfdfdf;
}
ul#tabs-list li {
display: inline-block;
text-align: center;
font-size: 0.875em;
width: 13%;
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
border-right: 1px solid #dfdfdf;
position: relative;
}
ul#tabs-list li:hover {
transition: none;
border-right: none;
}
ul#tabs-list li:hover.last {
border-right: 1px solid transparent;
}
ul#tabs-list li:hover + li {
border-left: 1px solid #dfdfdf;
}
ul#tabs-list li label.panel-label {
position: relative;
padding: 15px 0;
}
ul#tabs-list li label.panel-label::after {
content: "";
position: absolute;
width: 100%;
left: 0;
bottom: 100%;
background-color: #3a4763;
height: 0;
transition-property: height;
transition-duration: 200ms;
}
ul#tabs-list li label.panel-label:hover {
padding-top: 16px;
}
ul#tabs-list li label.panel-label:hover::after {
height: 2px;
}

#open-nav-label,
#close-nav-label {
display: none;
}

#nav-ctrl {
display: none;
}
}
@media all and (min-width: 900px) {
main {
width: 100%;
margin: 0 auto;
}
}
.panel-radios {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;


}
.panel-radios:nth-child(1) {
		-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}
.panel-radios:nth-child(2) {
		-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}
.panel-radios:nth-child(3) {
		-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}
.panel-radios:nth-child(4) {
		-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}
.panel-radios:nth-child(5) {
		-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}
.panel-radios:nth-child(6) {
display: block;
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(7) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(8) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(9) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(10) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(11) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(12) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(13) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(14) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(15) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(16) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(17) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(18) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(19) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(20) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

.panel-radios:nth-child(21) {
-webkit-appearance: none;
　　-moz-appearance: none;
　　appearance: none;
}

#introduction {
width: 90%;
margin: 0 auto;
padding: 48px 24px;
color: white;
}
#introduction h1 {
font-weight: 300;
text-align: center;
}

main h1 {
margin-top: 0;
font-weight: 300;
color: #3a4763;
}
main p {
line-height: 1.8;
}
main hr {
margin: 12px 0;
border-top: 1px solid #dfdfdf;
}

label.demo-label {
background-color: #3a4763;
color: white;
padding: 4px 8px;
border-radius: 2px;
cursor: pointer;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
		user-select: none;
}
label.demo-label:hover {
background-color: #e74c3c;
}

#demo-child-toggle {
display: none;
}
#demo-child-toggle:checked ~ #demo-parent #demo-child {
color: #3a4763;
font-weight: bold;
text-transform: uppercase;
}

#demo-parent {
margin-top: 8px;
}

code,
pre {
color: #3a4763;
font-family: Inconsolata, "Andale Mono", Andale, monowidth;
background-color: #ecf0f1;
border: 1px solid #dfdfdf;
border-radius: 2px;
}

code {
padding: 2px 6px;
}

pre {
padding: 12px;
line-height: 1.6;
}
pre strong {
color: #444444;
font-weight: normal;
}


<script>
window.console = window.console || function(t) {};
</script>



#muryoumenu ul{
	margin: 0; 
	padding: 0; 
	list-style: none;
	overflow: hidden;
	text-align: center;
}

#muryoumenu li{ 
	display: inline-block;
	padding: 0; 
	margin: 0; 
	float: left;
	width: 25%; 
	line-height: 50px;
	font-size: 1.0em;
	border-radius: 5px;
}

#muryoumenu li a{
	display: block; 
	border: 1px solid #666;
	background-color: #fff;
	padding: 5px;
	text-decoration: none;
	color: #333;
	margin: 2px 2px;
	text-align: center;
}

#muryoumenu li a:hover{
	border: 1px solid #666;
	background-color: #ff701e;
}

#muryoumenu #haji li a{
	display: inline-block;
	border: 1px solid #666;
	background-color: #fff;
	padding: padding: 3px 10px;
	text-decoration: none;
	color: #333;
	width: 100px; 
	margin: 2px 2px;
	text-align: center;
	font-size: 1.0em;
}
#muryoumenu #haji li a:hover{
	display: block; 
	border: 1px solid #666;
	background-color: #ff701e;
}


@media (max-width: 320px) {
#muryoumenu li{ 
	display: inline-block;
	padding: 0; 
	margin: 0; 
	float: left;
	width: 50%; 
	line-height: 60px;
	font-size: 0.8em;
}
}

@media screen and (max-width: 480px){
#muryoumenu li{ 
	display: inline-block;
	padding: 0; 
	margin: 0; 
	float: left;
	width: 50%; 
	line-height: 60px;
	font-size: 0.8em;
}
}

@media screen and (min-width:768px) and ( max-width:1024px) {
#muryoumenu li{ 
	display: inline-block;
	padding: 0; 
	margin: 0; 
	float: left;
	width: 33%; 
	line-height: 60px;
	font-size: 0.9em;
}
}


html { scroll-behavior: smooth;}