@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: layout.css
 * Summary:   レイアウト用スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    structures
 *       =1-1    header
 *       =1-2    contents
 *                 - main contents
 *                 - navigation
 *       =1-3    footer
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * structures
 * ========================================
 */

.l-container {
	position: relative;
	height: auto;
	min-height: 100%;
	margin: 0 auto;
	padding-bottom: 500px;	/* #footerのheightと同じ値（フッターを最下部に固定する為） */
}
.ie6 .l-container {
	height: 100%;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		.l-container {
			right: 0;
			z-index: 2;
			width: 94%;
			padding-bottom: 30%;
			-moz-transition: all 300ms ease-in-out;
			-webkit-transition: all 300ms ease-in-out;
			transition: all 300ms ease-in-out;
		}
		.panelopened .l-container {
			right: 150px;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		.l-container {
			width: 94%;
			padding-bottom: 35%;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		.l-container {
			width: 980px;
		}
	}



	/** =1-1
	 * header
	 * ----------------------------------
	 */

	.l-header {
		margin-bottom:20px;
		padding-top: 25px;
		text-align:center;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			.l-header {
				margin-bottom:10px;
				padding-top: 10px;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			.l-header {
				padding-top: 20px;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
		}





	/** =1-2
	 * contents
	 * ----------------------------------
	 */

	.l-contents {
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			.l-contents {
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			.l-contents {
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			.l-contents {
				padding-bottom: 150px;	/* #footerのheightと同じ値（フッターを最下部に固定する為） */
				width: 100%;
			}
		}





		/* [ nav ]------------------------------ */

		.l-nav {
			width: 100%;
			text-align:center;
		}
		.l-nav li {
			display: inline-block;
		}
		.ie7 .l-nav li {
			display: inline;
			zoom: 1;
		}

		.l-nav li a {
			display: block;
			width: 100%;
			height:100%;
			background-image: url(/17/src/pc/image/common/nav.png);
			text-indent:-9999px;
		}
		.l-nav .navHandler {
			display: none;
		}

			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 599px) {
				.l-nav {
					display: none;
				}
				.l-nav .navHandler {
					display: block;
				}
			}


			/* -- >>> styles for medium layout ----- */
			@media screen and (min-width: 600px) and (max-width: 700px) {
				.l-nav {
					margin:0 auto 20px;
				}
				.l-nav li {
					width:80px;
					height:80px;
				}

				.l-nav li a {
					background-size:720px auto;
					display:block;
					width: 100%;
					height:100%;
				}
				.l-nav li.nav01 a {background-position:-80px 0;}
				.l-nav li.nav02 a {background-position:0 0;}
				.l-nav li.nav03 a {background-position:-160px 0;}
				.l-nav li.nav04 a {background-position:-240px 0;}
				.l-nav li.nav05 a {background-position:-320px 0;}
				.l-nav li.nav06 a {background-position:-400px 0;}
				.l-nav li.nav07 a {background-position:-480px 0;}
				.l-nav li.nav08 a {background-position:-560px 0;}
				.l-nav li.nav09 a {background-position:-640px 0;}

				.l-nav li.nav01 a.current {background-position:-80px -82px;}
				.l-nav li.nav02 a.current {background-position:0 -82px;}
				.l-nav li.nav03 a.current {background-position:-160px -82px;}
				.l-nav li.nav04 a.current {background-position:-240px -82px;}
				.l-nav li.nav05 a.current {background-position:-320px -82px;}
				.l-nav li.nav06 a.current {background-position:-400px -82px;}
				.l-nav li.nav07 a.current {background-position:-480px -82px;}
				.l-nav li.nav08 a.current {background-position:-560px -82px;}
				.l-nav li.nav09 a.current {background-position:-640px -82px;}
			}

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 701px) {
				.l-nav {
					margin: 0 0 60px 0;
				}
				.l-nav li {
					width: 100px;
					height: 100px;
				}

				.l-nav li.nav01 a {background-position:-100px 0;}
				.l-nav li.nav02 a {background-position:0 0;}
				.l-nav li.nav03 a {background-position:-200px 0;}
				.l-nav li.nav04 a {background-position:-300px 0;}
				.l-nav li.nav05 a {background-position:-400px 0;}
				.l-nav li.nav06 a {background-position:-500px 0;}
				.l-nav li.nav07 a {background-position:-600px 0;}
				.l-nav li.nav08 a {background-position:-700px 0;}
				.l-nav li.nav09 a {background-position:-800px 0;}

				.l-nav li.nav01 a.current {background-position:-100px -102px;}
				.l-nav li.nav02 a.current {background-position:0 -102px;}
				.l-nav li.nav03 a.current {background-position:-200px -102px;}
				.l-nav li.nav04 a.current {background-position:-300px -102px;}
				.l-nav li.nav05 a.current {background-position:-400px -102px;}
				.l-nav li.nav06 a.current {background-position:-500px -102px;}
				.l-nav li.nav07 a.current {background-position:-600px -102px;}
				.l-nav li.nav08 a.current {background-position:-700px -102px;}
				.l-nav li.nav09 a.current {background-position:-800px -102px;}
			}
			@media screen and (min-width: 960px) {
				.l-nav li a:hover{
					-moz-transform: rotateZ(720deg);
					-webkit-transform: rotateZ(720deg);
					transform: rotateZ(720deg);
				}
				.l-nav li.nav01 a:hover,.l-nav li.nav01 a.current {background-position:-100px -102px;}
				.l-nav li.nav02 a:hover,.l-nav li.nav02 a.current {background-position:0 -102px;}
				.l-nav li.nav03 a:hover,.l-nav li.nav03 a.current {background-position:-200px -102px;}
				.l-nav li.nav04 a:hover,.l-nav li.nav04 a.current {background-position:-300px -102px;}
				.l-nav li.nav05 a:hover,.l-nav li.nav05 a.current {background-position:-400px -102px;}
				.l-nav li.nav06 a:hover,.l-nav li.nav06 a.current {background-position:-500px -102px;}
				.l-nav li.nav07 a:hover,.l-nav li.nav07 a.current {background-position:-600px -102px;}
				.l-nav li.nav08 a:hover,.l-nav li.nav08 a.current {background-position:-700px -102px;}
				.l-nav li.nav09 a:hover,.l-nav li.nav09 a.current {background-position:-800px -102px;}
			}

			/* -- >>> styles for wide layout02 ----- */
			@media screen and  (min-width: 600px) and (max-width: 959px) {
				.l-nav {
					margin: 0 0 20px 0;
				}
				.l-nav ul {
					padding: 0 6%;
				}
			}





		/* [ main contents ]------------------------------ */
		.l-main {
		}

			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 599px) {
				.l-main {
				}
			}

			/* -- >>> styles for medium layout ----- */
			@media screen and (min-width: 600px) and (max-width: 959px) {
				.l-main {
					margin-bottom: 50px;
				}
			}

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 960px) {
				.l-main {
					float: left;
					width: 690px;
					margin:0 0 0 10px;
				}
			}



		/*--page link--*/
		.l-main ul.page {
		    margin: 0 auto 50px;
		    width: 615px;
		}
		.l-main ul.page li{
		    margin: 0 0 5px;
		    float:left;
		}
		.l-main .page-sp{
			display: none;
		}

			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 599px) {
				.l-main ul.page{
					display: none;
				}

				.l-main .page-sp{
					display: block;
				}
				.l-main .page-sp p{
					text-align:right;
				}
				.l-main .page-sp p a{
					padding:3px 6px;
					background: #000;
					color: #fff;
					-moz-border-radius: 50px;
					-webkit-border-radius: 50px;
					border-radius: 50px;
				}
				.l-main .page-sp p a span.up{
					display:none;
				}
				.l-main .page-sp p a span.up.open{
					display:inline;
				}
				.l-main .page-sp p a span.down.open{
					display:none;
				}

				.l-main .page-sp ul{
					display: none;
					padding: 5px 10px 10px 10px;
					margin-bottom:10px;
					background: rgba(0, 0, 0, 0.75);
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;
					border-radius: 10px;
				}
				.l-main .page-sp ul li a{
					display:block;
					padding:8px 6px;
					font-weight:bold;
					color: #fff;
					border-bottom: 1px dotted #fff;
				}
			}

			/* -- >>> styles for medium layout ----- */
			@media screen and (min-width: 600px) and (max-width: 959px) {
				.l-main ul.page{
				}
			}

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 960px) {
				.l-main ul.page{
				}
			}



			/*--article--*/
			.l-article{
				background:  rgba(255, 255, 255, 0.6);
			}

				/* -- >>> styles for narrow layout ----- */
				@media screen and (max-width: 599px) {
					.l-article {
						padding: 20px ;
						margin-bottom:20px;
					}
				}

				/* -- >>> styles for medium layout ----- */
				@media screen and (min-width: 600px) and (max-width: 959px) {
					.l-article {
						padding: 30px ;
						margin-bottom:30px;
					}
				}

				/* -- >>> styles for wide layout ----- */
				@media screen and (min-width: 960px) {
					.l-article {
						padding: 30px;
					}
				}

			/*--article--*/
			.section{
			}






		/* [ side ]
		------------------------------ */
		.l-side {
		}

			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 599px) {
				#detail .l-side,
				#ticket .l-side,
				#lineup .l-side,
				#map .l-side,
				#notice .l-side,
				#faq .l-side,
				#goods .l-side,
				#forest .l-side,
				#news .l-side,
				#contact .l-side,
				#almighty .l-side {
					display: none;
				}
			}

			/* -- >>> styles for medium layout ----- */
			@media screen and (min-width: 600px) and (max-width: 959px) {
				.l-side {
				}
			}

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 960px) {
				.l-side {
					width: 250px;
					float: right;
					margin:-37px 10px 0 0;
				}
			}





	/** =1-4
	 * footer
	 * ----------------------------------
	 */

	.l-footer {
		position: absolute;
		bottom: 0;
		z-index: 10;
		width: 100%;
		height: 70px;
	}
	.l-footer .gold-link{
		color: #7e6430;
		margin-bottom: 13px;
	}
	.l-footer .gold-link a{
		color:#fff;
		text-decoration:none;
		display: inline;
		text-shadow: 1px 1px 2px #1C1701, -1px 1px 2px #1C1701, 1px -1px 2px #1C1701, -1px -1px 2px #1C1701;
	}
	.l-footer .white-link{
		color:#fff;
		font-weight: bold;
	}
	.l-footer .white-link a{
		color:#fff;
		text-decoration:none;
		display: inline;
	}
	.l-footer .white-link-sp{
		display: none;
	}


		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			.l-footer {
				position: static;
				height: auto;
			}
			.l-footer .gold-link{
				display:none;
			}
			.l-footer .white-link{
				display: none;
			}
			.l-footer .white-link-sp{
				display: block;
				background: none repeat scroll 0 0 #FFFFF2;
			    border: 5px solid #CDCD8D;
			    margin: 0 0 20px;
			    padding: 5px;
			}
			.l-footer .white-link-sp a{
				display: block;
				border-bottom: 1px dotted #666666;
				text-decoration:none;
				color:#666;
				padding: 7px 10px;
			}
			.l-footer .white-link-sp a i{
				float:right;
				color:#999;
				margin-top:2px;
			}

			#detail .l-footer .white-link-sp,
			#ticket .l-footer .white-link-sp,
			#lineup .l-footer .white-link-sp,
			#map .l-footer .white-link-sp,
			#notice .l-footer .white-link-sp,
			#faq .l-footer .white-link-sp,
			#goods .l-footer .white-link-sp,
			#forest .l-footer .white-link-sp,
			#news .l-footer .white-link-sp,
			#contact .l-footer .white-link-sp,
			#almighty .l-footer .white-link-sp {
				display: none;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			.l-footer {
				height: 100px;
			}
			.l-footer .gold-link{
				width:66%;
			}
			.l-footer .white-link{
				font-size: 85%;
			}
			.l-footer .white-link .flo_right{
				font-size:85%;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			.l-footer {
			}
		}


	.all-footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 114px;
		background: url(/17/src/pc/image/common/all-footer-bg.png) center bottom repeat-x;
		z-index: 5;
	}
	.all-footer .copy-sp{
		display: none;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			.all-footer{
				position: static;
				/*background-size: 120% auto ;*/
				height: 40px;
				/*border-bottom:10px solid #000;*/
			}

			.all-footer .copy-sp{
				display: block;
				color:#fff;
				text-align:center;
				position:absolute;
				bottom:6px;
				left:4%;
				-moz-transition: all 300ms ease-in-out;
				-webkit-transition: all 300ms ease-in-out;
				transition: all 300ms ease-in-out;
			}
			.panelopened .all-footer .copy-sp{
				left: -150px;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			.all-footer {
				/*background-size: 140% auto;
				border-bottom: 15px solid #000;*/
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			.all-footer {
			}
		}