@charset "UTF-8";


@font-face{
	font-family: 'Noto-DL';
	font-style: normal;
	font-weight: light;
	src:
		url('../fonts/GenShinGothic-Light.eot')
	;
	src:
		url('../fonts/GenShinGothic-Light-web.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GenShinGothic-Normal-web.woff') format('woff'),
		url('../fonts/GenShinGothic-Normal-web.ttf')  format('truetype')
	;
}

@font-face{
	font-family: 'Noto-M';
	font-style: normal;
    font-weight: 500;
	src:
		url('../fonts/GenShinGothic-Regular.eot')
	;
	src:
		url('../fonts/GenShinGothic-Regular-web.eot?#iefix') format('embedded-opentype'),
		url('../fonts/GenShinGothic-Medium-web.woff') format('woff'),
		url('../fonts/GenShinGothic-Medium-web.ttf')  format('truetype')
	;
}

body{-webkit-text-size-adjust: 100%; color:rgb(0,0,0);
	text-align:center; line-height:180%; letter-spacing:0.05em;
	font-family: Noto-DL, univers,helvetica,arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo, "メイリオ","ＭＳ Ｐゴシック";
}

#loader{
	position:fixed;
	height:100%;
	width:100%;
	top: 0px;
	left:0px;
	background-color: rgb(255,255,255);
	z-index:9999;
}

#loader:after
{
	content: "";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	position: absolute;
	width: 30px; /*ローディングアイコンの横サイズ*/
	height: 30px; /*ローディングアイコンの縦サイズ*/
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid rgb(0, 200, 230);  /*円に○の白枠をつける*/
	border-right-color: transparent; /*円の右にC状の空きをつける*/
	
	top: 50%;
	left: 50%;
	margin-top:-30px;
	margin-left:-30px; 

	animation: spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}

a{
	color:rgb(0, 170, 200);
	text-decoration: none;
	outline:none;
	cursor:pointer;
}

a:active{
	color:rgb(0, 170, 200);
	text-decoration: none;
	outline:none;
}

a:visited{
	color:rgb(0, 170, 200);
	text-decoration: none;
	outline:none;
}

a:hover{
	color:rgb(0,100,130);
	text-decoration: none;
	outline:none;
	transition: background .2s linear 0, color .2s linear 0;
}

a.closeBt
{
	width:70px; height:70px; cursor:pointer;  background-repeat:no-repeat; background-position: 50% 50%; display:block; z-index:8999;
	position:fixed;
	right:10px;
	top:10px;
	
	opacity: .75;
	-webkit-opacity: .75;
	-moz-opacity: .75;
	filter: alpha(opacity=75);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=75)"; /* IE 8 */
	
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}
a.closeBt:hover
{
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* IE 8 */
}

.svg a.closeBt{background-image:url('../img/close.svg');}
.no-svg a.closeBt{background-image:url('../img/close.png');}

#contents{position:static;}

a.fixBt
{
	display:block;
	width:75px; height:75px;
	text-indent:-9999px;
	background-repeat:no-repeat;
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
}
a.fixBt:hover
{
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=100)"; /* IE 8 */
}
.svg a.fixBt{background-image:url(../img/menuBt.svg)}
.no-svg a.fixBt{background-image:url(../img/menuBt.png)}

.contentsBody{width:100%;}

.whiteBg{background-color:white;}

#goTopBt{position:fixed; bottom:10px; right:10px; z-index:9999; display:none; width:55px; height:50px;
	background-position: 50% 50%; cursor:pointer;
	-moz-border-radius: 3px 0px 0px 0px;
	-webkit-border-radius:3px 0px 0px 0px;
	border-radius:3px 0px 0px 0px;
}
.svg #goTopBt{background-image: url('../img/goTop.svg');}
.no-svg #goTopBt{background-image: url('../img/goTop.png');}

.footerCredit{width:100%; padding:1.2em 0; color:white; font-size:0.8em; background-color: rgb(0, 200, 230); text-align:center;}

/****************************************************/
/********************** Menu ************************/
/****************************************************/

.header{position:fixed; top: 0px; left:0; z-index:8997; width:100%; }

#menu{width:100%; overflow:hidden; background-color:rgb(255, 255, 255); font-size:1em; border-bottom:1px solid rgb(0, 200, 230); position:relative;}
#menu ul{list-style-type:none; margin-left:6em;}
#menu li{float: left; min-width:1.5em; margin:0 .5em; text-align:left; cursor: pointer; font-family: Noto-M;
	padding:.5em 0em .5em 1.5em;

	background-position: 5px 50%;	
/*	background-position: 5px 5px\0;  IE */

	background-repeat:no-repeat;
}
.svg #menu li{background-image:url(../img/topSelectorDir.svg)}
.no-svg #menu li{background-image:url(../img/topSelectorDir.png)}

#menu a{color:rgb(0, 200, 230);}
#menu a:hover{color:rgb(0, 200, 230);}

#menuBt{display:block; position:fixed; top:0; left:75px; background-position:0 -75px; cursor:pointer; z-index:8998; display:none;}
.svg #menuBt{background-image:url(../img/menuBt.svg)}
.no-svg #menuBt{background-image:url(../img/menuBt.png)}
#menuBt a.fixBt{background-position: -75px -75px;}

#newsBt{display:block; position:fixed; top:0; left:0px; background-position:0 0; cursor:pointer; z-index:8998;}
.svg #newsBt{background-image:url(../img/menuBt.svg)}
.no-svg #newsBt{background-image:url(../img/menuBt.png)}
#newsBt a.fixBt{background-position: -75px 0px;}

#menuCloseBt{top:4em; display:none;}
.svg a#menuCloseBt{background-image:url('../img/closeWhite.svg');}
.no-svg a#menuCloseBt{background-image:url('../img/close.png');}

/****************************************************/
/******************* CONTENTS *********************/
/****************************************************/

#main,
#allWrapper
{position:relative; z-index:1000; background-color: rgba(255,255,255,1); margin:0;}

.container{margin-left:auto; margin-right:auto; text-align:left; max-width: 950px;}
.container_relative{position:relative; max-width: 950px; padding: 2rem;}
.contents_area{max-width: 950px;}

.blueBack{background-color:rgb(0, 200, 230); padding:2em 0;
	box-shadow:0px 0px 20px rgba(0,0,0,0.5);
	-moz-box-shadow:0px 0px 20px rgba(0,0,0,0.5);
	-webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.5);
}

.photoCredit{font-size:0.75em;}

/*/////////////////////////////////////////////////////////
/////////////////////// portrait ////////////////////////////
/////////////////////////////////////////////////////////*/

@media screen and (max-width: 1050px)
{
	.contentsBody{margin-left:auto; margin-right:auto; text-align:left; width: 100%; position: relative;}
	#contents{position:relative; z-index:1000; background-color:rgb(255, 255, 255);}
	#calender{margin-top:6em;}
	
	.header{position:fixed; z-index:0; left:0; top:0; min-width:100px; width:100%; display:none;}
	#menu{width:100%; height: 100vh; font-size:1em; border-bottom-width:0px; background-color:rgb(0, 200, 230);}
	#menu ul{list-style-type:none; margin-left:0em; margin-top:6em; }
	#menu li{float:none; padding:.5em .5em .5em 1.5em; min-width:2em; margin:0 .5em; text-align:left; cursor: pointer; font-family: Noto-M;
		background-position: 5px 50%;
		background-repeat:no-repeat;
	}
	#menu a{color:rgb(255, 255, 255);}
	#menu a:hover{color:rgb(255, 255, 255);}
	.svg #menu li{background-image:url(../img/topSelectorDirWhite.svg)}
	.no-svg #menu li{background-image:url(../img/topSelectorDirWhite.png)}
	
	.container{margin-left:auto; margin-right:auto; text-align:left; width: 100%;}
	#menuBt{display:block;}
	#menuCloseBt{display:block;}
}

@media screen and (min-width: 400px) and (max-width: 1050px) and (orientation : landscape)
{
	.container_relative{position:relative; max-width: 800px; padding:20px 30px 20px 90px;}
}