@charset "utf-8";

/*** サイト全体 ***/
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "sans-serif";
}

body, header, h1, h2, h3, h4, h5, p, ol, ul, li, dl, dd, section, article, footer, div, a {
	margin: 0;
	padding: 0;
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-o-box-sizing : border-box;
	-ms-box-sizing : border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	color: #333;
	line-height: 1.4;
}

from, input, textarea {
	box-sizing: border-box;
	font: 100% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "sans-serif";
}

ul, oi {
	list-style: none;
}

small {
	font-size: 100%;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.c-inner1000 {
	width: 96%;
	max-width: 1000px;
	margin: 0 auto;
}

.column-2 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.bold {
	font-weight: bold;
}

/* モバイル用コンテンツ用 */
.sp-cont {
	display: none;
}

/*** ヘッダー ***/
header #h-inner {
	padding: 4px 0;
	justify-content: flex-start;
	align-items: center;
}

header #h-inner h1 {
	font-size: 90%;
	order: 2;
}

header #h-inner h1 .m-br {
	margin-right: 0.2em;
}

header #h-inner .logo {
	margin-right: 1.5em;
	order: 1;
}

/*** フッター ***/
body.index footer {
	padding-top: 32px;
}

footer .f-areas {
	padding: 60px 0;
}

footer .f-areas .f-inner {
	width: 1000px;
	margin: 0 auto;
}

footer #f-area01 {
	background: url(../img/f-background02.png) repeat-x left 250px,
				url(../img/f-background01.jpg);
}

footer #f-area01 p.logo {
	margin-bottom: 8px;
	text-align: center;
}

footer #f-area01 p.logo a:hover {
	opacity: 0.7;
}

footer #f-area01 p.address {
	text-align: center;
}

footer #f-area02 {
	background: url(../img/nav-background01.jpg);
}

footer #f-area02 ul#f-nav {
	margin-bottom: 70px;
	display: flex;
	justify-content: space-between;
}

footer #f-area02 p#copy {
	text-align: center;
	font-size: 90%;
}

/*** ページトップへ移動ボタン ***/
#page-top {
	width: 80px;
	position: fixed;
	bottom: 10px;
	right: 8%;
}

#page-top .img a {
	display: block;
}

#page-top .img a:hover {
	text-decoration: none;
}

#page-top .img a img {
	width: 100%;
	height: auto;
}

#page-top .text {
	padding: 2px;
	font-size: 80%;
	text-align: center;
	background-color: rgba(255,255,255,0.4);
	transition-duration: 0.5s;
	opacity: 0;
}

#page-top:hover .text {
	opacity: 1;
	transition-duration: 0.5s;
}

/*** キーイメージエリア ***/
#key {
	margin-bottom: 80px;
	background: #D42727;
}

#key p {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

#key p img {
	width: 100%;
	height: auto;
}

/*** コンテンツ01 リード文など ***/
#content01 {
	margin-bottom: 40px;
}


#content01 .lead {
	margin-bottom: 80px;
	text-align: center;
	font-size: 150%;
	font-family: 'Sawarabi Gothic', sans-serif;
}

#content01 .text p:not(:last-child) {
	margin-bottom: 1em;
}

#content01 .text p.logo-wrap {
	display: flex;
	align-items: center;
}

#content01 .text p.logo01 {
	margin-top: 2em;
}

#content01 .text p.logo-wrap img {
	margin-left: 0.5em;
}

/*
#content01 .lead + p {
	text-align: center;
	line-height: 1.4;
}
*/
/*** コンテンツ02 イベント詳細 ***/
#content02 {
	padding: 50px 0;
}

#content02 h2 {
	max-width: 500px;
	margin: 0 auto 50px;
	padding: 16px 0;
	background: #D42727;
	border-radius: 5px;
	text-align: center;
	font-size: 150%;
	color: #fff;
	position: relative;
}

#content02 h2 .update {
	margin-left: 1em;
	padding: 2px 6px;
	background: #fff;
	border-radius: 10px;
	font-size: 70%;
	color: #333;
}

#content02 .c-inner1000 {
	position: relative;
}

#content02 .c-inner1000 .toruchan {
	position: absolute;
	right: 10%;
	top: 176px;
}

#content02 .detail-wrap h3 {
	width: 7em;
	margin: 50px auto 30px;
	padding-bottom: 4px;
	border-bottom: 1px solid #2a4073;
	text-align: center;
	font-size: 150%;
}

#content02 .detail-wrap h3 + .lead {
	margin-bottom: 30px;
	text-align: center;
}

#content02 .detail-wrap h4 {
	font-size: 120%;
}

#content02 .detail-wrap h5 {
	margin-bottom: 2px;
	font-size: 100%;
}

#content02 #other-detail h3 {
	width: 9em;
}

#content02 #eat-detail ul.text {
	margin-left: 1.5em;
	list-style: disc;
}

#content02 #eat-detail ul.text li:not(:last-child) {
	margin-bottom: 8px;
}

#content02 #cerezo-detail h3 {
	width: 14em;
}

/*その他詳細は後日・・・の文言*/
#content02 .c-inner1000 {
	padding-top: 80px;
	border-top: 1px solid #D42727;
}

#content02 #detail00 {
	margin: 100px auto 16px;
}

#content02 #detail00 p {
	padding: 24px 0;
	background: #ea5506;
	border-radius: 10px;
	text-align: center;
	font-size: 150%;
	color: #fff;
}
/*その他詳細は後日・・・の文言 ここまで*/

#content02 .details {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
}

#content02 .details.last {
	border-bottom: 1px solid #f4f4f4;
}

#content02 .details .button {
	padding: 16px 0 16px 2em;
	border-top: 1px solid #f4f4f4;
	font-weight: normal;
	position: relative;
}

#content02 .details .button:hover {
	cursor: pointer;
}

#content02 .details .button::before {
	content: "▶";
	position: absolute;
	top: 25%;
	left: 0.5em;
	color: #f00;
	transition: 1s;
}

#content02 .details .button.on::before {
	content: "×";
	transition: 1s;
}

#content02 .details .hidebox {
	padding: 1em 1em 1em 2em;
	background: #FFF9EF;
	border-radius: 5px;
}

#content02 .details .hidebox p:not(:last-child) {
	margin-bottom: 20px;
}

#content02 .details .hidebox p a {
	margin-top: 8px;
	color: #900;
}

#content02 .details .hidebox .boxes:not(:last-child) {
	margin-bottom: 20px;
}

#content02 .details .hidebox ul.pict.multi-column {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#content02 .details .hidebox ul.pict.multi-column li {
	width: 23%;
	margin: 0 2% 10px 0;
}

#content02 .details .hidebox p.pict {
	width: 50%;
	margin-bottom: 0;
}

#content02 .details .hidebox .pict img {
	width: 100%;
	height: auto;
}

#content02 .details .sup03 {
	font-weight: bold;
}

#content02 .details .sup04 {
	margin-top: 4px;
	font-size: 80%;
	color: #900;
}

#content02 .details .sup05 {
	margin-left: 0.5em;
	font-size: 75%;
	font-weight: bold;
	color: #900;
}

#content02 .sup06 {
	text-align: center;
	font-size: 90%;
	font-weight: bold;
}
/*** コンテンツ02 イベント詳細 ここまで ***/

/*** コンテンツ03 イベント写真 **/
#content03 .c-inner1000 {
	padding-top: 80px;
	border-top: 1px solid #D42727;
}

#content03 h2 {
	max-width: 500px;
	margin: 0 auto 10px;
	padding: 16px 0;
	background: #D42727;
	border-radius: 5px;
	text-align: center;
	font-size: 150%;
	color: #fff;
	position: relative;
}

#content03 h2 + p {
	max-width: 500px;
	margin: 0 auto 30px;
}

#content03 h2 + p .sup04 {
	font-size: 80%;
	color: #f00;
}

#content03 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#content03 ul li {
	width: 23%;
	margin-bottom: 20px;
	max-height: 153px;
	text-align: center;
	overflow: hidden;
}

#content03 ul li img {
	width: 100%;
	height: auto;
}
/*** コンテンツ03 イベント写真 ここまで ***/

/*** イベント終了ページ ***/
.end #content01 .lead {
	margin-bottom: 40px;
}

.end #content01 .text {
	max-width: 600px;
	margin: 0 auto;
}

/*
.end #content03 .c-inner1000 {
	border-top: none;
}
*/

.end #content03 .title {
	margin-bottom: 30px;
	position: relative;
}

.end #content03 .title + p {
	text-align: center;
	margin: 0 auto 20px;
}

.end #content03 h2 {
	width: 13em;
	padding: 8px 0;
	background: transparent;
	border-bottom: 2px solid #f00;
	border-radius: 0;
	color: #333;
}

.end #content03 p.img01 {
	width: 90px;
	margin: auto;
	position: absolute;
	top: -20px;
	left: 22%;
}

.end #content03 p.img02 {
	width: 70px;
	position: absolute;
	top: 0;
	right: 25%;
}

.end #content03 p img.w100 {
	width: 100%;
	height: auto;
}
/*** イベント終了ページ ここまで ***/

/*** 準備中 ***/
#comingsoon {
	padding: 50px 0;
}

#comingsoon .c-inner1000{
	padding-top: 80px;
	border-top: 1px solid #D42727;
}

#comingsoon .sup02 {
	width: 92%;
	max-width: 554px;
	margin: 0 auto 80px;
}

#comingsoon .sup02 img {
	width: 100%;
	height: auto;
}

#comingsoon .twitter {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

#comingsoon .twitter.sp-cont {
	max-width: 320px;
}

/*** アクセスマップ  ***/
#access {
	padding: 24px 0;
	background: #fffae8;
}

#access h2 {
	margin-bottom: 16px;
	text-align: center;
	font-family: 'Sawarabi Gothic', sans-serif;
}

#access #gmap iframe {
	width: 100%;
	margin-bottom: 8px;
}

#access #gmap p:nth-child(2) {
	width: 10em;
	margin: 0 auto 30px;
	padding: 8px 0;
	background: #fff;
	border-radius: 5px;
	text-align: center;
}

#access #gmap p:nth-child(2) a:hover {
	text-decoration: none;
	opacity: 0.7;
	transition: 0.2s;
}

#access .address {
	margin-bottom: 24px;
}

#access .access p {
	margin-bottom: 2em;
}

#access .address p.title,
#access .access p.title {
	margin-bottom: 4px;
	font-weight: bold;
}

#access .access ul:not(:last-child) {
	margin-bottom: 16px;
}

#access .access ul li:not(:last-child) {
	margin-bottom: 10px;
}

#access .access .sup01 {
	margin-bottom: 0;
	font-weight: bold;
	color: #F00;
}

@media screen and (max-width:1024px) {	
	/*** フッター ***/
	footer .f-areas .f-inner {
		width: 96%;
		margin: 0 auto;
	}
	
	footer #f-area02 ul#f-nav {
		margin-bottom: 70px;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	footer #f-area02 ul#f-nav li {
		margin-bottom: 16px;
	}
	
	footer #f-area02 ul#f-nav li:not(:last-child) {
		margin-right: 16px;
	}
}

/***  ipad  ***/
@media screen and (max-width: 780px) {	
	#page-top {
		right: 1%;
	}
	
	#content02 .c-inner1000 .toruchan {
		right: 0;
	}
	
	/*** コンテンツ03 イベント写真 **/
	#content03 ul li {
		width: 32%;
	}
	
	#content03 ul li:last-child {
		margin-right: auto;
		margin-left: 2%;
	}
	/*** コンテンツ03 イベント写真 ここまで ***/

	/*** イベント終了ページ ***/
	.end #content03 p.img01 {
		left: 15%;
	}

	.end #content03 p.img02 {
		right: 17%;
	}
	/*** イベント終了ページ ここまで ***/
}
	
/***  スマートフォン  ***/
@media screen and (max-width: 700px) {	
	.pc-cont {
		display: none;
	}
	
	.sp-cont {
		display: block;
	}
	
	/*** ヘッダー ***/
	header #h-inner {
		justify-content: space-between;
	}

	header #h-inner h1 {
		font-size: 75%;
	}

	header #h-inner h1 .m-br {
		margin-right: 0;
		display: block;
	}

	header #h-inner .logo {
		margin-right: 0;
	}
	
	/*** フッター ***/
	footer .f-areas {
		padding: 40px 0;
	}

	footer #f-area01 p.logo a img {
		width: 100%;
		max-width: 338px;
		height: auto;
	}

	footer #f-area02 ul#f-nav {
		width: 10em;
		margin: 0 auto 40px;
		display: block;
		/*
		justify-content: flex-start;
		flex-wrap: wrap;
		*/
	}
	
	footer #f-area02 ul#f-nav li {
		text-align: center;
	}
	
	footer #f-area02 ul#f-nav li:not(:last-child) {
		margin-bottom: 24px;
	}
	
	footer #f-area02 ul#f-nav li a:hover {
		text-decoration: none;
	}

	footer #f-area02 p#copy {
		text-align: center;
	}
	
	/*** ページトップへ移動ボタン ***/
	#page-top {
		width: 60px;
		bottom: 10px;
		right: 1%;
	}

	#page-top .text {
		background-color: rgba(255,255,255,0.8);
		font-size: 70%;
		opacity: 1;
	}
	
	/*** コンテンツ01 リード文など ***/
	#content01 .lead {
		margin-bottom: 40px;
	}

	#content01 .lead + p {
		text-align: left;
	}

	#content01 .text p.logo-wrap {
		display: block;
		text-align: center;
	}

	#content01 .text p.logo-wrap .bold {
		display: block;
	}

	#content01 .text p.logo01 {
		margin: 2em 0;
	}

	#content01 .text p.logo02 img {
		transform: translateY(4px);
	}

	/*** コンテンツ2 イベント詳細 ***/
	#content02 h2 .update {
		margin-left: 0;
		border: 1px solid #D42727;
		position: absolute;
		top: -16px;
		right: 4px;
	}
	
	#content02 .c-inner1000 .toruchan {
		top: 154px;
	}
	
	#content02 .c-inner1000 .toruchan .img {
		width: 114px;
	}
	
	#content02 .c-inner1000 .toruchan .img img {
		width: 100%;
		height: auto;
	}
	
	#content02 #live-detail h3 {
		margin-left: 20%;
		text-align: left;
	}

	#content02 .details .sup05 {
		margin-top: 4px;
		margin-left: 0;
		display: block;
	}

	#content02 .sup06 {
		text-align: left;
	}

	#content02 #cerezo-detail h3 {
		width: 100%;
	}
	/*** アクセスマップ  ***/
	
	/*** コンテンツ03 イベント写真 **/
	#content03 ul li {
		width: 49%;
		max-height: 120px;
	}
	
	#content03 ul li:last-child {
		margin-right: inherit;
		margin-left: inherit;
	}
	/*** コンテンツ03 イベント写真 ここまで ***/

	/*** 準備中 ***/
	#comingsoon p {
		font-size: 130%;
	}

	/*** イベント終了ページ ***/
	/*
	.end #content03 .c-inner1000 {
		padding-top: 0;
	}
	*/

	.end #content03 .title {
		margin-bottom: 16px;
	}

	.end #content03 h2 {
		font-size: 140%;
	}

	.end #content03 p.img01 {
		display: none;
	}

	.end #content03 p.img02 {
		display: none;
	}
	/*** イベント終了ページ ここまで ***/
}
	
@media screen and (max-width: 344px) {	
	header #h-inner h1 {
		width: 42%;
	}

	footer #f-area01 p.logo img {
		width: 100%;
		height: auto;
	}
	
	footer #f-area01{
		background: url(../img/f-background01.jpg);
	}	
}