@charset "utf-8";

/* header
------------------------------------------------------------------------- */

#indexHeader {
	width:100%;
	position:relative;
	height:360px;
	margin-bottom:50px;
	overflow:hidden;
}
#indexHeader p {
	color:#FFF;
	text-align:center;
	position:absolute;
	top:10%;
	width:96%;
	padding-left:2%;
	line-height:1.3;
}
#indexHeader h1 {
	font-size:32px;
	color:#FFF;
	text-align:center;
	position:absolute;
	top:25%;
	width:100%;
}
#indexHeader #translate {
	text-align:center;
	position:absolute;
	top:45%;
	width:100%;
}
#indexHeader #kv {
	position:absolute;
}
#indexHeader #kv li {
	position:absolute;
}
#indexHeader #kv li span {
	display:block;
	font-size:12px;
	width:300px;
	color:#FFF;
	text-align:right;
	position:absolute;
}


/* body
------------------------------------------------------------------------- */

.frame {
	margin-bottom:80px;
}

.frame h2 {
	font-size:48px;
	text-align:center;
	margin-bottom:30px;
	line-height:1.3;

}
	@media(max-width:980px) {
		.frame h2 {
			font-size:32px;
		}
	}

.frame article {
	margin-bottom:80px;
}

/* introduction */
#introduction figure {
	width:420px;
	float:left;
}
	@media(max-width:980px) {
		#introduction figure {
			width:420px;
			float:none;
			margin:0 auto 20px auto;
		}
	}
	@media(max-width:480px) {
		#introduction figure {
			width:80%;
			float:none;
			margin-bottom:20px;
		}
	}
#introduction .text {
	width:500px;
	float:right;
	line-height:1.8;
	margin-top:80px;
}
	@media(max-width:980px) {
		#introduction .text {
			width:auto;
			float:none;
			margin:0 5px;
		}
	}

/* no1 */
#no1 section {
	margin-bottom:50px;
}
#no1 figure {
	width:360px;
	float:left;
}
	@media(max-width:980px) {
		#no1 figure {
			width:100%;
			float:none;
			margin-bottom:20px;
		}
	}

#no1 figure img {
	-moz-box-shadow:2px 2px 4px #999;
	-webkit-box-shadow:2px 2px 4px #999;
}

#no1 .text {
	width:575px;
	float:right;
}
	@media(max-width:980px) {
		#no1 .text {
			width:auto;
			float:none;
			margin:0 5px;
		}
	}

#no1 .text h3 {
	display:inline;
	font-size:24px;
	line-height:1.3;
}
#no1 .text strong {
	font-size:24px;
	display:inline-block;
	width:42px;
	height:42px;
	line-height:42px;
	text-align:center;
	color:#FFF;
	background-color:#204D8E;
	margin-right:5px;

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
#no1 .text h4 {
	display:inline-block;
	padding:3px 5px;
	background-color:#EEE;
	margin-top:10px;
}
#no1 .text p {
	line-height:1.8;
	margin-top:10px;
}



/* access */
#access .text {
	width:660px;
	float:right;
	line-height:1.8;
}
	@media(max-width:980px) {
		#access .text {
			width:auto;
			float:none;
			margin:0 5px;
		}
	}

#access .figure {
	width:280px;
	float:left;
	position:relative;
}
	@media(max-width:980px) {
		#access .figure {
			float:none;
			position:static;
			margin:0 auto 20px auto;
		}
	}

#access .figure h3 {
	font-size:20px;
	float:left;
	padding:15px;
	border:1px solid #000;
	writing-mode: tb-rl; /* IE独自仕様 */
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
}
#access .figure strong.start {
}
#access .figure strong.goal {
}
#access .figure span {
	float:left;
	width:150px;
	height:45px;
	margin-top:3px;
	text-align:center;
	background:url(../images/access_bg.png) right bottom no-repeat;;
	background-size:250px 34px;
}
#access .text span {
	font-size:14px;
}



/* menu */
#menu {
	margin:0 auto 80px auto;
	text-align:center;
}
#menu ul li {
	display:inline-block;
	margin:0 15px 30px 15px;
}
#menu ul li a {
	display:block;
	width:280px;
	height:280px;
	position:relative;
}

#menu ul li.tourism a {
	background:url(../images/menu1.jpg) center center no-repeat;
	background-size:280px 280px;
}
#menu ul li.experience a {
	background:url(../images/menu3.jpg) center center no-repeat;
	background-size:280px 280px;
}
#menu ul li.souvenir a {
	background:url(../images/menu2.jpg) center center no-repeat;;
	background-size:280px 280px;
}

#menu ul li a span {
	font-size:20px;
	color:#FFF;
	background-color:rgba(0,0,0,0.7);
	height:60px;
	line-height:60px;
	text-align:center;
	display:block;
	position:absolute;
	top:220px;
	width:100%;
}
	@media(max-width:980px) {
		#menu ul li a span {
			font-size:16px;
			height:40px;
			line-height:40px;
			top:240px;
		}
	}

.share {
	padding:25px 0;
	text-align:center;
	background-color:#F7F7F7;
}

.share ul li {
	display:inline-block;
	height:80px;
	vertical-align:bottom;
}
.share ul li.twitter {
	width:68px;
}
.share ul li.facebook {
	width:58px;
}
.share ul li.google {
	width:50px;
}
.share ul li.hatena {
	width:80px;
}
.share ul li.line {
	width:36px;
}

.pagePlugin {
	text-align:center;
	margin-bottom:120px;
}