@charset "UTF-8";


@media screen and (min-width: 641px) {
	html,
	body {
		height: 100%;
		}
	.forPC {
		display: block;
		}
	.forSP {
		display: none;
		}
	}
@media screen and (max-width: 640px) {
	html,
	body {
		height: auto;
		}
	.forPC {
		display: none;
		}
	.forSP {
		display: block;
		}
	}


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

body {
	background: #000 url(../images/bg.jpg) repeat-x center top;
}

.wrapper {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
@media screen and (max-width: 960px) {
	.wrapper {
		width: 100%;
	}
}
@media screen and (max-width: 680px) {
body {
	background-image: none;
}
}


/*----------------------------------------------------
pageHeader
----------------------------------------------------*/

#pageHeader {
	position: relative;
	padding: 0;
}

#pageHeader .main {
	width: 100%;
	text-align: right;
}
#pageHeader .main img {
	width: 640px;
	margin-top: -30px;
}

#pageHeader h1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
#pageHeader h1 img {
	width: 260px;
	margin: 0 auto;
	padding-top: 26px;
}

#pageHeader .line {
	position: absolute;
	top: -20px;
	left: 0;
	z-index: 1;
}

#pageHeader .kira {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
#pageHeader .kira img {
	width: 430px;
	padding-top: 8px;
}

#pageHeader .santa {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

#pageHeader .snow {
	position: absolute;
	top: 20px;
	right: 96px;
	z-index: 0;
}

#navi {
	position: absolute;
	top: 186px;
	left: 9px;
	width: 289px;
	z-index: 2;
}

#pageHeader #sound {
	position: absolute;
	bottom: 0;
	left: 20px;
	z-index: 2;
}

#pageHeader #sound dt,
#pageHeader #sound dd {
	display: inline;
}

#pageHeader #sound dt img {
	width: 166px;
	padding-bottom:5px;
}
#pageHeader #sound dd.on img {
	width: 64px;
	padding: 0;
}
#pageHeader #sound dd.off img {
	width: 44px;
	padding: 0;
}

@media screen and (max-width: 760px) {
	#pageHeader .main img {
		margin-top: 0;
	}
	#pageHeader #sound {
		position: static;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		margin-bottom: 4%;
	}
	#navi {
		position: static;
		top: 500px;
		left: 0;
		width: 100%;
	}
	#pageHeader .santa {
		position: absolute;
		top: 0;
		left: -60px;
		width: 60%;
	}
	#pageHeader .snow {
		position: absolute;
		right: 3.9%;
	}
}


/*----------------------------------------------------
info
----------------------------------------------------*/

#infomation {
	margin: 30px auto 0 auto;
	padding-top: 24px;
	border: solid 1px #312f29;
}
@media screen and (max-width: 980px) {
	#infomation {
		margin: 3% 3.75% 0 3.75%;
		width: 92.5%;
	}
}
#infomation:after { content:""; display:block; clear:both; height:0; }
#infomation { *zoom: 1; }

#infomation h2 {
	width: 184px;
	margin: 0 auto;
}
@media screen and (max-width: 640px) {
	#infomation h2 {
		width: 44.843%;
	}
}

#infomation .infoBody {
	float: left;
	width: 60%;
	padding: 30px 0 10px 6%;
	color: #fff;
	text-align: left;
}

#infomation .image img {
	float: right;
	width: 34%;
}

#infomation dl {
	margin-top: 2em;
}
#infomation dl:first-child {
	margin-top: 0;
}
#infomation dl:after { content:""; display:block; clear:both; height:0; }
#infomation dl { *zoom: 1; }

#infomation dt,
#infomation dd {
	font-size: 13px;
	line-height: 1.846;
	letter-spacing: 0.1em;
}
#infomation dt {
	float: left;
	width: 30%;
	padding-left: 34px;
	background: #000 url(../images/info_icon.png) no-repeat left top;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background-size: 22px auto;
	-moz-background-size: 22px auto;
	-webkit-background-size: 22px auto;
	-o-background-size: 22px auto;
	-ms-background-size: 22px auto;
}

#infomation dd {
	float: left;
	width: 70%;
}

#infomation .note {
	font-size: 12px;
	line-height: 1.846;
	margin-top: 1.5em;
	padding-left: 30%;
	letter-spacing: 0.05em;
}

@media screen and (max-width: 640px) {
	#infomation .infoBody {
		float: none;
		width: 90%;
	}
	#infomation .image img {
		float: none;
		width: 90%;
	}
	#infomation dt {
		float: none;
		width: 100%;
	}
	#infomation dd {
		float: none;
		width: 100%;
	}
	#infomation .note {
		padding-left: 0%;
		width: 100%;
	}
}


/*----------------------------------------------------
menu
----------------------------------------------------*/

#menu {
	min-height: 420px;
	padding-bottom: 80px;
	background: url(../images/menu_bg.png) no-repeat left bottom;
	background-size: 40% auto;
	-moz-background-size: 40% auto;
	-webkit-background-size: 40% auto;
	-o-background-size: 40% auto;
	-ms-background-size: 40% auto;
}
@media screen and (max-width: 980px) {
	#menu {
		margin: 3% 3.75% 0 3.75%;
		width: 92.5%;
	}
}
#menu:after { content:""; display:block; clear:both; height:0; }
#menu { *zoom: 1; }

@media screen and (max-width: 760px) {
	#menu {
		padding-bottom: 5%;
	}
}
@media screen and (max-width: 640px) {
	#menu {
		background: none;
		padding-bottom: 0;
	}
}

#menu dl {
	float: left;
	width: 45%;
	text-align: left;
	color: #d1c89f;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	font-style: italic;
	font-family: Georgia;
}

#menu .lun {
	padding-right: 5%;
}

#menu .din {
	padding-left: 5%;
}

#menu dd span {
	display: block;
	color: #fff;
	font-size: 13px;
	font-style: normal;
	font-family:
		'ヒラギノ角ゴ Pro W3',
		'Hiragino Kaku Gothic Pro',
		'メイリオ',
		'Meiryo',
		'Osaka',
		'ＭＳ Ｐゴシック',
		sans-serif;
		padding: 0.2em 0 1.5em;
}

@media screen and (max-width: 640px) {
	#menu dl {
		float: none;
		width: 100%;
	}
	#menu .lun {
		padding-right: 0;
		padding-bottom: 70%;
		background: url(../images/menu_bg.png) no-repeat left bottom;
		background-size: contain;
		-moz-background-size: contain;
		-webkit-background-size: contain;
		-o-background-size: contain;
		-ms-background-size: contain;
	}
	#menu .din {
		padding-left: 0;
		margin-top: -8%;
	}
}


/*----------------------------------------------------
list
----------------------------------------------------*/

#list {
	background: url(../images/list_bg_left.png) no-repeat left top;
	border: solid 1px #312f29;
	padding-bottom: 50px;
}

#list #sound {
	clear:both;
}
#list #sound img.lineGold {
	width:290px;
}
#list #sound dl {
	padding-top:14px;
}
#list #sound dt,
#list #sound dd {
	display: inline;
}

#list #sound dt img {
	width: 166px;
	padding-bottom:5px;
}
#list #sound dd.on img {
	width: 64px;
	padding: 0;
}
#list #sound dd.off img {
	width: 44px;
	padding: 0;
}


@media screen and (max-width: 980px) {
	#list {
		margin: 3% 3.75% 0 3.75%;
		width: 92.5%;
	}
}
#list:after { content:""; display:block; clear:both; height:0; }
#list { *zoom: 1; }

@media screen and (max-width: 760px) {
	#list {
		padding-bottom: 5%;

	}
}
@media screen and (max-width: 640px) {
	#list {
		padding: 3% 3% 0 3%;
		width: 86.5%;
		border: solid 1px #312f29;
		background-size: contain;
		-moz-background-size: contain;
		-webkit-background-size: contain;
		-o-background-size: contain;
		-ms-background-size: contain;
	}
	#list #sound dt img {
		display:block;
		margin:0 auto;
	}
}

#list h2 {
	width: 100%;
	text-align: center;
	background: url(../images/list_bg_right.png) no-repeat right top;
	padding-bottom: 10px;
}
#list h2 img {
	width: 381px;
	margin: 0 auto;
}
@media screen and (max-width: 760px) {
	#list h2 {
		background: none;
		padding-bottom: 0;
	}
}

#list dl.first, 
#list dl.second {
	float: left;
	width: 45%;
	text-align: left;
	color: #969696;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	font-style: italic;
	font-family: Georgia;
	margin-top: 32px;
}

#list .first {
	padding-left: 5%;
}

#list .second {
	padding-left: 5%;
}

#list dt {
	margin-bottom: 1.5em;
	width: 182px;
}
#list dl.first img {
	/*padding-top:30px;*/
}

@media screen and (max-width: 640px) {
	#list dt {
		width: 196px;
	}
}

#list dd span {
	display: block;
	color: #fff;
	font-size: 13px;
	font-style: normal;
	font-family:
		'ヒラギノ角ゴ Pro W3',
		'Hiragino Kaku Gothic Pro',
		'メイリオ',
		'Meiryo',
		'Osaka',
		'ＭＳ Ｐゴシック',
		sans-serif;
		padding: 0.2em 0 1.5em;
}

@media screen and (max-width: 640px) {
	#list dl.first, 
	#list dl.second {
		float: none;
		width: 100%;
	}
	#list .first, 
	#list .second {
		padding-left: 0;
	}
}


/*----------------------------------------------------
contact
----------------------------------------------------*/

#contact {
	background: url(../images/list_bg_left.png) no-repeat left top;
}
#contact:after { content:""; display:block; clear:both; height:0; }
#contact { *zoom: 1; }

#contact .reservation {
	position: relative;
	float: left;
	width: 52%;
}

#contact .reservation .lead {
	position: absolute;
	color: #fff;
	top: 43%;
	left: 0;
	width: 100%;
	text-align: center;
}


#contact .reservation .bt2 {margin-top:20px}


#youtube {
	float: right;
	width: 38%;
	background: url(../images/youtube_bg.png) no-repeat left top;
	padding: 6.5% 4.5% 6.5% 5.5%;
	background-size: contain;
	-moz-background-size: contain;
	-webkit-background-size: contain;
	-o-background-size: contain;
	-ms-background-size: contain;
}

iframe{
	width:100% !important;
}
.iframeBox img.pre{
	width:100% !important;
}

.iframeBox{
	position:relative;
	width:100%;
}

.iframeBox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important
}
.iframeBox img.pre{
	position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important
}

@media screen and (max-width: 640px) {
	#contact .reservation {
		position: relative;
		float: none;
		width: 100%;
	}
	
	#contact .reservation .lead {font-size:11px}
	
	#contact .reservation .bt1,
	#contact .reservation .bt2 {width:95%;margin-left:auto;margin-right:auto}
	#contact .reservation .bt2 {margin-top:10px}

	
	#youtube {
	float: none;
	width: 80%;
	background: url(../images/youtube_bg.png) no-repeat left top;
	padding: 14% 9% 12% 11%;
	background-size: 100% auto;
	-moz-background-size: contain;
	-webkit-background-size: contain;
	-o-background-size: contain;
	-ms-background-size: contain;
	}
}