@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    pagetop
 *       =1-4    footer
 *       =1-5    side
 *
 * ===============================================================
*/



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

#container {
	position: relative;
	margin: 0 auto;
	height: auto;
	min-height: 100%;
}
.ie6 #container {
	height: 100%;
}

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

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#container {
			width:100%;
		}
	}

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


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

	#header {
		background:url(/src/otodama/14/pc/common/header/header_back.png) 50% bottom no-repeat;
		background-size:cover;
		width: 100%;
		margin:0 auto;
		border-bottom:solid 2px #c7000a;
		border-top:solid 2px #c7000a;
		text-align:center;
	}
	#header .header_back{
		border-top:solid 1px #c7000a;
	}
	#header section{
		padding-top:8px;
	}
	#header .navHandler {
		display: none;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#header {
			}
			#header .header_back{
				margin-top:1px;
			}
			#header .navHandler {
				display: block;
				position: fixed;
				top: 0;
				right:10px;
				width:64px;
				height:auto;
			}
			#header h1{
				width:220px;
				margin:0 auto 8px auto;
			}

		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			#header {
			}
			#header .header_back{
				margin-top:1px;
			}
			#header .navHandler {
				display: block;
				position: fixed;
				top: 0;
				right:10px;
				width:80px;
				height:auto;
			}
			#header h1{
				width:280px;
				margin:0 auto 8px auto;
			}
		}

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

			}
			#header .header_back{
		/* -- 	background:url(/src/otodama/14/pc/common/header/header.png) 50% 1px repeat-x; */
				margin-top:1px;
			}
			#header section{
				padding-top:15px;
			}
			#header h1 a:hover{
				filter: alpha(opacity=65);
				-moz-opacity:0.65;
				opacity:0.65;
			}
		}


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

	#contents {
		width: 100%;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#contents {
				padding-bottom: 85px;	/* #footerのheightと同じ値（フッターを最下部に固定する為） */
			}
		}

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

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#contents {
				background:url(/src/otodama/14/pc/common/back.png) 50% 0 no-repeat;
				background-attachment:fixed;
				padding-bottom: 120px;	/* #footerのheightと同じ値（フッターを最下部に固定する為） */
			}
		}


		/* [ main contents ]
		------------------------------ */
		#contents #main {
			padding-bottom:50px;
			clear:both;
		}

		#contents #main #sns_btn {
			margin-bottom:20px;
			float:right;
		}
		#home #contents #main #sns_btn {
			float:left;
		}
		#contents #main #sns_btn .twitter,
		#contents #main #sns_btn .facebook,
		#contents #main #sns_btn .line{
			float: left;
			margin: 0px 10px 0px 0px;
			padding: 0px;
			display: inline;
			width:95px;
		}
		#contents #main #sns_btn .line{
			display:none;
			width: 83px;
		}

			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 599px) {
				#contents #main {
					width: 96%;
					margin:20px auto 0 auto;

				}
				#contents #main #sns_btn .line{
					display:block;
				}
			}

			/* -- >>> styles for medium layout ----- */
			@media screen and (min-width: 600px) and (max-width: 959px) {
				#contents #main {
					width: 90%;
					margin:20px auto 0 auto;
				}
				#contents #main #sns_btn {
					float:right;
				}
			}

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 960px) {
				#contents #main {
					width: 960px;
					margin:0 auto;
				}
			}


		/* [ navigation ]
		------------------------------ */
		#nav_top {
			width:100%;
		}
		#nav {
			width:100%;
		}

		#nav li a {

		}

		#nav .navHandler {
			display: none;
		}
		.fixed{
			position:fixed;
			left: 0;
			z-index: 100;
		}

			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 599px) {
				#nav {
					display: none;
					position: fixed;
					top:0;
					z-index: 10;
					width: 100%;
					background:#FFF;
					padding:20px 0;
				}
				#nav section{
					margin:0 0 10px 0;
				}
				#nav .navHandler {
					display: block;
				}
				#nav .navHandler .close{
					text-align:right;
					margin:10px 10px 0 10px;

				}
				#nav .navHandler .close img{
					width:70px;
				}


				#nav ul li{
					float:left;
					width:29.3%;
					margin:0 2% 10px 2%;
					padding:3px 0;
					background:#c7000a;
					text-align:center;
				    border-radius: 3px;
				    -webkit-border-radius:3px;
				    -moz-border-radius: 3px;
				    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7000a;
				}

				#nav  ul li a{
					display:block;
					width:70%;
					padding:0 15%;
					height:auto;
					color:#FFF;
					text-decoration:none;
				}
			}

			/* -- >>> styles for medium layout ----- */
			@media screen and (min-width: 600px) and (max-width: 959px) {
				#nav {
					display: none;
					position: fixed;
					top:0;
					z-index: 10;
					width: 100%;
					background:#FFF;
					padding:20px 0;
				}
				#nav .navHandler {
					display: block;
				}
				#nav .navHandler .close{
					text-align:right;
					margin:10px 10px 0 10px;
				}
				#nav .navHandler .close img{
					width:70px;
				}
				#nav ul li{
					float:left;
					width:9%;
					margin:0 1% 5px 1%;
					padding:5px 0;
					background:#c7000a;
					text-align:center;
				    border-radius: 3px;
				    -webkit-border-radius:3px;
				    -moz-border-radius: 3px;
				    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #c7000a;
				}
				#nav ul li a{
					display:block;
					width:98%;
					padding:0 1%;
					height:auto;
					color:#FFF;
					text-decoration:none;
				}
			}

			/* -- >>> styles for wide layout ----- */
			@media screen and (min-width: 960px) {
				#nav {
					display: block !important;
				}
				#nav ul{
					width:970px;
					margin:0 auto;
				}
				#nav ul li{
					float:left;
					width:90px;
					height:100px;
					margin:0 20px 20px 0;
				}
				#nav ul li.nav09{
					margin:0 0 20px 0;
				}
				#nav ul li a{
					display:block;
					width:100%;
					height:100%;
					background:url(/src/otodama/14/pc/common/nav.png) no-repeat;
					text-indent:-9999px;
				}
				#nav ul li.nav01 a{background-position:0 0;}
				#nav ul li.nav02 a{background-position:-90px 0;}
				#nav ul li.nav03 a{background-position:-180px 0;}
				#nav ul li.nav04 a{background-position:-270px 0;}
				#nav ul li.nav05 a{background-position:-360px 0;}
				#nav ul li.nav06 a{background-position:-450px 0;}
				#nav ul li.nav07 a{background-position:-540px 0;}
				#nav ul li.nav08 a{background-position:-630px 0;}
				#nav ul li.nav09 a{background-position:-720px 0;}

				#nav ul li.nav01 a:hover{background-position:0 -100px;}
				#nav ul li.nav02 a:hover{background-position:-90px -100px;}
				#nav ul li.nav03 a:hover{background-position:-180px -100px;}
				#nav ul li.nav04 a:hover{background-position:-270px -100px;}
				#nav ul li.nav05 a:hover{background-position:-360px -100px;}
				#nav ul li.nav06 a:hover{background-position:-450px -100px;}
				#nav ul li.nav07 a:hover{background-position:-540px -100px;}
				#nav ul li.nav08 a:hover{background-position:-630px -100px;}
				#nav ul li.nav09 a:hover{background-position:-720px -100px;}

				#home #nav ul li.nav01 a{background-position:0 -100px;}
				#detail #nav ul li.nav02 a{background-position:-90px -100px;}
				#band #nav ul li.nav03 a{background-position:-180px -100px;}
				#map #nav ul li.nav04 a{background-position:-270px -100px;}
				#access #nav ul li.nav05 a{background-position:-360px -100px;}
				#notice #nav ul li.nav06 a{background-position:-450px -100px;}
				#goods #nav ul li.nav07 a{background-position:-540px -100px;}
				#museum #nav ul li.nav08 a{background-position:-630px -100px;}
			}


	/** =1-3
	 * pagetop
	 * ----------------------------------
	 */

	#pagetop {
		position: fixed;
		right: 20px;
		bottom:20px;
		z-index: 10;
		width: 120px;
		height:120px;
	}

	#pagetop a {
		display: block;
		width: 120px;
		height:120px;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#pagetop {
				width: 60px;
				height: 60px;
			}
			#pagetop a {
				width: 60px;
				height: 60px;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			#pagetop {
				width: 60px;
				height: 60px;
			}
			#pagetop a {
				width: 60px;
				height: 60px;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#pagetop {
			}
			#pagetop {
				bottom:45px;
				right: 30px;
			}
		}


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


	#footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		background:#FFF url(/src/otodama/14/pc/index/link_back.png) 50% 0 repeat-x;
		color:#c7000a;
		padding-top:35px;
	}
	#footer section{
		padding:0 10px 5px 10px;
	}
	#footer section a{
		text-decoration:none;
		color:#c7000a;
	}
	#footer section a:hover{
		color:#25bec7;
	}
	#footer section .footer_logo{
		margin-bottom:10px;
		padding-bottom:10px;
		border-bottom:solid 1px #f7b2b6;
	}
	#footer section .footer_logo a{
		color:#333;
	}
	#footer section .footer_logo span{
		margin-left:10px;
	}
	#footer section .sitemap{
		display:none;
	}
	#footer .copyright{
		clear:both;
		padding:0 10px 5px 10px;
		text-align:center;
		font-size:80%;
	}

		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#footer {
				height: 85px;
			}
			#footer section{
			}
			#footer section .footer_logo img{
				width:90px;
			}
		}

		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			#footer {
				height: 100px;
			}
			#footer section{
			}
			#footer section .footer_logo img{
				width:100px;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#footer {
				height: 120px;
			}
			#footer section{
			}
			#footer section .sitemap{
				display:block;
				font-size:90%;
			}
			#footer section .sitemap span{
				margin:0 12px 10px 0;
				padding-left:10px;
				background:url(/src/otodama/14/pc/common/footer/icon.png) 0 50% no-repeat;
			}
			#footer section .footer_logo img{
				width:120px;
			}
			#footer section .footer_logo a:hover{
				filter: alpha(opacity=65);
				-moz-opacity:0.65;
				opacity:0.65;
			}

			#footer .copyright{
				float:right;
			}
		}


	/** =1-6
	 * side
	 * ----------------------------------
	 */
	#side {
		clear:both;
		margin:0 0 20px 0;
	}
	#side li a{
		display:block;
		width:100%;
		height:100%;
		background:#1856a6;
	}
		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 599px) {
			#side {
				margin:0 20px 0 0;
			}
			#side ul li{
				float:left;
				width:35px;
				height:35px;
				margin:0 5px 5px 0;
			}
		}


		/* -- >>> styles for medium layout ----- */
		@media screen and (min-width: 600px) and (max-width: 959px) {
			#side {
				margin:0 20px 0 0;
			}
			#side ul li{
				float:left;
				width:50px;
				height:50px;
				margin:0 5px 5px 0;
			}
		}

		/* -- >>> styles for wide layout ----- */
		@media screen and (min-width: 960px) {
			#side {
				position:fixed;
				right:0;
				top:20%;
			}
			#side li{
				margin:0 0 2px 0;
				width:50px;
				height:50px;
			}
			#side li a:hover{
				background:#26bdc6;
			}
		}