@charset "utf-8" ;
/* =======================================================
	CSS構成: 個別頁レイアウト( top )
	Editor: J.Watanabe [ DOTCOM MARKETING ]
	-----------------------------------------------------
	Last Modified: [ 2013/08/31 ]

	【TOC】
	01 : #contents
	02 : #fbbox
	03 : #okondate
	04 :
	05 :
======================================================= */




/*	01 : #contents
---------------------------------------------------------------------- */
#contents {}
#contents h2 { margin-bottom: 20px; }
#contents ul {
	clear: both;
	overflow: hidden;
}
#contents ul li {
	background:url(../images/contents_bg.png) left top no-repeat;
	color: #5B060B;
	font-weight: bold;
	float: left;
	padding: 10px;
	width: 234px;
	height: 245px;
	}
#contents ul li:nth-child(3n) { margin-right: -3px; }
#contents ul li a {
	color: #5B060B;
	display: block;
}
#contents ul li a:hover > img {
	/* 画像ホバー透過処理 */
	/* IE7 */ filter:alpha(opacity=70);
	/* IE8 */ -ms-filter: "alpha(opacity=70)"; opacity: 0.7;
}
#contents ul li a:hover { text-decoration: none; }

#contents ul li h3 { margin: 10px 0; }
#contents ul li p { line-height: 1.4em; }



/*	02 : #fbbox
---------------------------------------------------------------------- */
#fbbox { margin-top: 30px; }
#fbbox h2 { margin-bottom: 0; }
#fbbox iframe {
	background: #FFF;
	border: 1px solid #5C070C !important;
}

/*	03 : #okondate
---------------------------------------------------------------------- */
#okondate {}
#okondate h2 {
	background: url(../images/okondate_bg.jpg) left top repeat-x;
	margin-bottom: 20px;
	text-align:center;
}
#okondate ul {}
#okondate ul li {
	border: 1px solid #5C070C;
	float: left;
	margin: 0 10px 10px 0;
	width: 238px;
}
#okondate ul li:nth-child(4n) { margin-right: 0; }

#okondate ul li a {
	border: 1px solid #FFF;
	display: block;
	position: relative;
}
#okondate ul li a div { display: none; }
#okondate ul li a:hover div {
	background: url(../images/okondate_hover.png) left top no-repeat;
	display:inline-block;
	width: 236px;
	height: 288px;
	position: absolute;
	left: 0;
	top: 25px;
	z-index: 100;
}
#okondate ul li a p { position: absolute; }
#okondate ul li a p:nth-child(1) {
	left: 0;
	top: 0;
}
#okondate ul li a p:nth-child(2) {
	left: 0;
	bottom: 0;
}
#okondate ul li a p:nth-child(2) span { vertical-align: middle; }
#okondate ul li a p:nth-child(2) span:first-line { line-height: 1.2em; }
#okondate ul li:nth-child(2) a p:nth-child(1),
#okondate ul li:nth-child(19) a p:nth-child(1) { font-size: 0.9em; }



/* 2020 */
.l-kv {
	position: relative;
	height: 56.25vw;
	max-height: 100vh;
}
.l-kv:before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	border-top: 5px solid #550D0F;
	z-index: 9;
}
.l-kv iframe {
	margin-top: 0 !important;
	margin-left: 0 !important;
	width: 100% !important;
	height: 56.25vw !important;
}
.l-kv #movie {}
.l-kv .scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 9;
}
.l-kv .mute {
	position: absolute;
	background: rgba(255,255,255,.8);
	padding: 10px;
	right: 50px;
	bottom: 50px;
	z-index: 9;
}
.l-kv .mute span {cursor: pointer;}
.l-kv .mute p {
	background: url(../images/common/kv_icon-mute.png) no-repeat left center;
	background-size: 33px auto;
	padding-left: 38px;
	color: #550D0F;
	padding-top: 4px;
	padding-bottom: 4px;
	font-weight: bold;
}
.l-kv .mute p.is-on {background-image: url(../images/common/kv_icon-unmute.png);}
.l-kv .mute .is-active {text-decoration: underline;}

.p-top {padding-top: 40px;}

.p-top__contents {margin-bottom: 44px;}
.p-top__contents h2 {margin-bottom: 50px;}
.p-top__contents ul {*zoom: 1;}
.p-top__contents ul:after {
	display: block;
	content: "";
	clear: both;
}
.p-top__contents li {
	float: left;
	width: 31.1%;
	margin-left: 3.3334%;
	margin-bottom: 3.3334%;
	background: #fff;
	box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.p-top__contents li:first-child {
	margin-left: 0;
}
.p-top__contents li a {
	display: block;
	*zoom: 1;
	padding: 20px;
	text-decoration: none;
	-webkit-transition: .2s ease all;
	transition: .2s ease all;
}
.p-top__contents li a:hover {
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
}
.p-top__contents li a:after {
	display: block;
	content: "";
	clear: both;
}
.p-top__contents li .txt {
	margin-bottom: 10px;
}
.p-top__contents li .txt h3 {margin-bottom: 8px;}
.p-top__contents li .txt p {
	color: #550D0F;
	line-height: 140%;
	font-size: 100%;
}
/* .p-top__contents li .img {
	float: right;
	width: 51.85%;
} */
.p-top__contents li .img img {
	max-width: 100%;
	height: auto;
}


.p-top__area {margin-bottom: 94px;}
.p-top__area h2 {margin-bottom: 40px;}
.p-top__area .area {
	text-align: center;
	margin-bottom: 25px;
}
.p-top__area ul:after {
	display: block;
	content: "";
	clear: both;
}
.p-top__area ul li {
	float: left;
	width: 19.16666%;
	margin-left: 1.041675%;
	margin-bottom: 1.041675%;
	text-align: center;
}
.p-top__area ul li:nth-child(5n+1) {
	clear: both;
	margin-left: 0;
}
.p-top__area ul li a {
	line-height: 1;
	color: #fff;
	background: #550D0F;
	font-size: 20px;
	font-weight: bold;
	padding: 18px 8px;
	line-height: 120%;
	box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  
  display: flex;
}
.p-top__area ul li.two-line a {
	padding-top: 6px;
	padding-bottom: 6px;
}
.p-top__area ul li a:hover {
	text-decoration: none;
	/* 画像ホバー透過処理 */
	/* IE7 */ filter:alpha(opacity=70);
	/* IE8 */ -ms-filter: "alpha(opacity=70)"; opacity: 0.7;
}


.p-top__kondate {margin-bottom: 90px;}
.p-top__kondate h2 {
	text-align: center;
	margin-bottom: 50px;
}
.p-top__kondate ul {*zoom: 1;}
.p-top__kondate ul:after {
	display: block;
	content: "";
	clear: both;
}
.p-top__kondate li {
	float: left;
	width: 24.2424%;
	margin-left: 1.010133%;
	margin-bottom: 1.010133%;
}
.p-top__kondate li:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}
.p-top__kondate li a {
	display: block;
	position: relative;
	color: #fff;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .2s ease all;
	transition: .2s ease all;
  
  overflow: hidden;
  width: 240px;
  min-width: 240px;
  /*height: 360px;*/
}
.p-top__kondate li a img {
	-webkit-transition: .2s ease all;
	transition: .2s ease all;
  
  display: block;
  aspect-ratio: 240 / 230;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.p-top__kondate li a:hover img {
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
}
.p-top__kondate li .place {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background: rgba(85,13,15,0.8);
	font-size: 87.5%;
	line-height: 140%;
	padding-top: 5px;
	padding-bottom: 5px;
	z-index: 1;
}
.p-top__kondate li .name {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: rgba(34,23,17,.8);
	padding-top: 13px;
	padding-bottom: 14px;
	z-index: 1;
	font-size: 75%;
}
.p-top__kondate li .name.two-line {
	padding-top: 4px;
	padding-bottom: 4px;
}



/* SP */
@media screen and (max-width: 767px) {

.l-kv {}
.l-kv iframe {width: 100% !important;height: 56.25vw !important;margin-top: 0 !important;margin-left: 0 !important;}
.l-kv .mute {width: 41px;height: 40px;right: 0;bottom: 0;background: url(../images/sp/kv_mute.png) no-repeat center;background-size: contain;padding: 0;}
.l-kv .mute.is-on {background-image: url(../images/sp/kv_unmute.png);}
.p-top {padding-top: 0;}
.p-top__contents h2 {margin-bottom: 30px;}
.p-top__contents li {float: none;width: auto;margin-left: 0;}
.p-top__contents li .txt,
.p-top__contents li .img {float: none;width: auto;}
.p-top__contents li .txt p {font-size: 128.572%;}
.p-top__contents li .img {margin-top: 10px;}
.p-top__area {margin-bottom: 70px;}
.p-top__area h2 {margin-bottom: 30px;}
.p-top__area ul li {width: 48.4848%;margin-left: 3.0304%;margin-bottom: 3.0304%;}
.p-top__area ul li:nth-child(5n+1) {clear: none;margin-left: 3.0304%;}
.p-top__area ul li:nth-child(2n+1) {clear: both;margin-left: 0;}
.p-top__area ul li a {font-size: 107.14%;}
.p-top__area ul li.two-line a {padding-top: 10px;padding-bottom: 9px;}
.p-top__kondate {margin-bottom: 40px;}
.p-top__kondate h2 {margin-bottom: 30px;}
.p-top__kondate .wrap990 {padding-left: 0;padding-right: 0;}
.p-top__kondate li {width: 48.4848%;margin-left: 3.0304%;margin-bottom: 3.0304%;}
.p-top__kondate li a {text-align: left; width: 240px; min-width: auto; max-width: calc((100vw - 30px - 3.0304%) / 2);}
.p-top__kondate li a img {aspect-ratio: 320 / 230;}
.p-top__kondate li:nth-child(2n+1) {clear: both;margin-left: 0;}
.p-top__kondate li .place,
.p-top__kondate li .name {position: static;padding-left: 10px;padding-right: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;}
.p-top__kondate li .place {background: #550D0F;min-height: 54px;font-weight: bold;font-size: 114.28%;}
.p-top__kondate li .name {background: #221711;padding-top: 6px;padding-bottom: 6px;font-size: 114.28%;min-height: 56px;padding-left: padding-right: 8;margin-right: 8px;letter-spacing: -0.06em;}
.p-top__kondate li .name br {display: none;}

.p-top__contents li .txt h3 img { display: block; margin: 0 auto; }

}