@charset "utf-8";

/* =======================================

	CommonElements

======================================= */
body {
	font-size: 100%;
	line-height: 140%;
	font-family: Arial,Helvetica,sans-serif;
	color: #000;
	background: #fff;
}

a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;}

h1 {
	padding: 10px 0;
	color: #333;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
#container {
	width: 100%;
}

#s01{
	font-family: YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", Honoka, Meiryo, "メイリオ", serif;
	background: url(../img/index/001.jpg) no-repeat center;
	background: #f0f0eb;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}
#s01 h1{
	position:absolute;
	color:#fff;
	left:50%;
	top:50%;
	width:587px;
	height:389px;
	text-align:center;
	z-index:10;
}
#s01 h1 img{
	position:absolute;
	width:100%;
	color:#fff;
	left:-50%;
	top:-50%;
}
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
 /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
html,
body {
  height: 100%;
  width: 100%;
  background: #191747;
  overflow: hidden;
}

.star {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 99;
}
.star.one {
  margin-left: -290px;
  margin-top: -60px;
}

.refresh {
  position: fixed;
  top: 15px;
  right: 15px;
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  z-index: 99;
  cursor: pointer;
}

.screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #FFEA00;
}
.screen.top {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.screen.bottom {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}

.par {
  width: 100%;
  text-align: center;
  height: 100px;
  line-height: 100px;
  letter-spacing: 4px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -50px;
  z-index: 99;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Quicksand;
}
.par.big {
  font-size: 50px;
  color: #191747;
  opacity: 0;
}
.par.small {
  font-size: 25px;
  color: white;
}

.bar {
  width: calc(100% / 20);
  height: 100%;
  float: left;
  background: #FFEA00;
  box-sizing: border-box;
  -webkit-transform-origin: "center center";
  -moz-transform-origin: "center center";
  -ms-transform-origin: "center center";
  -o-transform-origin: "center center";
  transform-origin: "center center";
}





h1#title-name{
	font:290%/1.231 arial,helvetica,clean,sans-serif;
	*font-size:small;
	font-weight:bold;
	*font:x-small;
}
h2#title-cap{
	font-size:22px;
	margin-top:0px;
}

#s02{
	position:relative;
	text-align:center;
	margin:0 auto;
	max-width:100%;
	height:1320px;
	background:#fff;
}
#s02 ul.text{
	margin-top:60px;
	height:auto;
	overflow:hidden;
	opacity:0;
}
#s02 li{
	margin-bottom:20px;
	border-bottom:1px solid #ddd;
}
#s02 h1{
	margin-top: 3em;
	font-size: 3.5em;
	line-height: 1.08em;
}
#s02 h2{
	font-size:25px;
	margin-top:80px;
	font-weight:bold;
}
#s02 p{
	margin:0px auto;
	line-height: 2em;
	font-size:1.2em;
}
#s02 p.ef1{
	font-size:20px;
	margin-top:20px;
}


/*CSSの例*/
#map{
	margin:0;
	position:relative;
	display:block;
}
#map::before{
	content:"\009577\0062bc\003057\003067\005730\0056f3\00306e\0064cd\004f5c\0053ef\0080fd";
	/*「長押しすると地図の操作が可能」と生成*/
	display:block;
	z-index:100;
	color:#125f62;
	width:100%;
	position:absolute;
	top:50%;
	left:0;
	margin:-0.5em 0 0 0;
	line-height:1;
	text-align:center;
	font-weight:bold;
	text-shadow:1px 1px 0 #fff;
}
#map::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.5);
}
#map.release::before,
#map.release::after{
	display:none !important;
}
#map > iframe,
#map > div{
	/* レスポンシブデザイン想定 */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#map::before,
#map::after{
	display:none;
}
/*マウスホイールアイコン*/
.scroll-down-box {
	padding-top: 60px;
	position:absolute;
	left:50%;
	bottom:30px;
	z-index:100;
	font-family:"Arial","DIN-Regular","ヒラギノ角ゴ Pro W3",'Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
a.scroll-down {
	padding-top: 60px;
	position:absolute;
	left:0%;
	top:-50%;
	margin-left:-17px;
	z-index:100;
	color:#fff;
	text-decoration:none;
}
a.scroll-down span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	height: 50px;
	margin-left: -15px;
	border: 2px solid #fff;
	border-radius: 50px;
	box-sizing: border-box;
}
a.scroll-down span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/* ローディング //////// */
.loading{
	position:absolute;
	left:50%;
	top:50%;
	background:#fff;
}
.loading img{
	margin:-12px 0 0 -12px;
}