@charset "utf-8";

/* ==================================================================
	event.css
=================================================================== */

/* ==================================================================
	list
=================================================================== */

/* --------------------------------
   □ list
-------------------------------- */ 
#list ul.list {
	margin-left: -76px;
	margin-top: 75px;
}
#list ul.list:after {
	clear: both;
	display: block;
	content: "";
}

#list ul.list li{
	float: left;
	width: 510px;
	margin: 0 0 76px 60px;
}
#list ul.list li a{
	display: block;
	position: relative;
	color: #222;
	text-decoration: none;
	transition: all 0.3s;
	padding-bottom: 10px;
}

#list ul.list li a.end{
	pointer-events:none;
}

#list ul.list li a:hover{
	background: #f6f6f6;
}


#list ul.list li p.reserve{
	display: table;
	position: absolute;
	left: 25px;
	top: -17px;
	z-index: 2;
	height: 8em;
}

#list ul.list li p.reserve >em{
	display: table-cell;
	padding: 15px 22px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	font-weight: 500;
	background: #d8bf36;
}

#list ul.list li p.reserve.true >em{
	background: #ca5151;
}
#list ul.list li p.reserve.false >em{
	background: #d8bf36;
}

#list ul.list li dl dt{
	position: relative;
}
#list ul.list li dl dt img{
	width: 100%;
	height: 510px;
	object-fit: contain;
	background-color: #f6f6f6;
}
#list ul.list li dl dt >span.end {
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	background: rgba(63,63,63,0.6);
	color: #fff;
}
#list ul.list li dl dt >span.end >span{
	text-align: center;
	vertical-align: middle;
}
#list ul.list li dl dt >span.end >span em{
	position: relative;
	display: block;
	font-size: 218%;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.1em;
	padding-bottom: 14px;
	margin-bottom: 12px;
}
#list ul.list li dl dt >span.end >span em:before{
	position: absolute;
	bottom: 0;
	left: calc(50% - 90px);
	height: 2px;
	width: 180px;
	background: #fff;
	content: "";
	
}

#list ul.list li dl dd {
	padding: 5px 20px 12px 20px;
}

#list ul.list li dl dd p.date{
	font-size:110%;
	font-weight:600;
	line-height: 1.1;
	margin-top:20px;
	margin-bottom: 8px;
}
#list ul.list li dl dd p.date em{
	font-size:140%;
}

#list ul.list li dl dd p.title{
	font-size:140%;
	font-weight:600;
	line-height: 1.5;
	margin-top:0;
	margin-bottom: 12px;
}
#list ul.list li dl dd p.title em.reserve {
    font-size: 60%;
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #ca5151;
    color: #ca5151;
    font-weight: 400;
    margin: 0 0 0 10px;
    vertical-align: middle;
}
#list ul.list li dl dd p.place {
	margin-bottom: 17px;
}
#list ul.list li dl dd p.place > span{
	display: inline-block;
	line-height: 1.1;
	color: #fff;
	background: #000;
	padding: 4px 5px;
	margin-right: 8px;
	font-size: 87%;
}
#list ul.list li dl dd p.comment {
	line-height: 1.8;
	margin: 0;
}

@media only screen and
(max-width : 767px) {
	
	#list ul.list li dl dt img{
		width: 100%;
		height: auto;
		object-fit: auto;
	}
	#list ul.list {
		margin-left: 0;
		margin-top: 10%;
	}
	
	
	#list ul.list li{
		float: none;
		width: auto;
		margin: 0 0 14% 0;
		border-bottom: 1px solid #d9d9d9;
		padding-bottom: 4%;
	}
	#list ul.list li a{
		padding-bottom: 10px;
	}
	
	
	#list ul.list li p.reserve >em{
		padding: 16px 15px;
	}
	
	#list ul.list li dl dt{
		position: relative;
	}
	#list ul.list li dl dt img{
		width: 100%;
	}
	#list ul.list li dl dt >span.end >span em{
	
		font-size: 148%;
	}
	
	#list ul.list li dl dd {
		padding: 5px 4% 4% 4%;
	}
	
	#list ul.list li dl dd p.date{
		font-size:120%;
		margin-top:10px;
		margin-bottom: 3%;
	}
	#list ul.list li dl dd p.date em{
		font-size:153%;
	}
	
	#list ul.list li dl dd p.title{
		font-size:130%;
		margin-top:0;
		margin-bottom: 4%;
	}
	#list ul.list li dl dd p.place {
		margin-bottom: 4%;
		font-size: 90%;
	}
	#list ul.list li dl dd p.place > span{
		display: inline-block;
		line-height: 1.1;
		color: #fff;
		background: #000;
		padding: 3px 5px;
		margin-right: 8px;
		font-size: 87%;
	}
	#list ul.list li dl dd p.comment {
		line-height: 1.7;
		margin: 0;
	}
}

/* --------------------------------
   □ general
-------------------------------- */ 
.contents main .accentArea{
	background-image:url("../../images/event/accent.jpg");
}
/* sticky を殺す overflow 対策（event/details のみ） */
body#eventDetails .contents{
	overflow: visible;
}

/* margin
-------------------------------- */
.mt0 {margin-top: 0!important;}
.mt8 {margin-top: 8px!important;}
.mt16 {margin-top: 16px!important;}
.mt20 {margin-top: 20px!important;}
.mt30 {margin-top: 30px!important;}
.mt40 {margin-top: 40px!important;}
.mt50 {margin-top: 50px!important;}
.mt60 {margin-top: 60px!important;}
.mb0 {margin-bottom: 0px!important;}
.mb8 {margin-bottom: 8px!important;}
.mb20 {margin-bottom: 20px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb40 {margin-bottom: 40px!important;}
.mb50 {margin-bottom: 50px!important;}
.mb60 {margin-bottom: 60px!important;}
.mb70 {margin-bottom: 70px!important;}
.mr50 {margin-right: 50px!important;}

@media only screen and
(max-width : 767px) {
    .sp_mt0 {margin-top: 0!important;}
    .sp_mt10 {margin-top: 10px!important;}
    .sp_mt20 {margin-top: 20px!important;}
    .sp_mb20 {margin-bottom: 20px!important;}
    .sp_mb40 {margin-bottom: 40px!important;}
    .sp_mr0 {margin-right: 0!important;}
    .sp_auto {margin-inline: auto!important;}
    .sp_center {text-align: center!important;}

	#wrapper {
		padding-top: 0;
	}

	footer ul.btnCV {
		display: none!important;
	}
}

.asterisk{
    list-style: none;
    padding-left: 0;

    li{

        display: flex;
        gap: 4px;

        & > span:first-child{
            flex-shrink: 0;
        }

        & + li{
            margin-top: 2px;
        }
    }
}

/* --------------------------------
#mainArea
-------------------------------- */ 
#mainArea {
	h2 {
		font-size: 2.8rem;
		line-height: 1.6;
	}
	h3 {
		font-size: 2.2rem;
		padding-bottom: 12px;
		border-bottom: 2px solid #212529;
		margin-bottom: 32px;
	}
	> section:not(:first-child) {
		margin-top: 60px;
	}
	
	@media only screen and
	(max-width : 767px) {
		h2 {
			font-size: 2.4rem;
		}
		h3 {
			font-size: 2rem;
			margin-bottom: 28px;
		}
		> section:not(:first-child) {
			margin-top: 50px;
		}
	}

	/* --------------------------------
	.accent_info
	-------------------------------- */ 
	section.accent_info {
		.category {
			display: inline-block;
			font-size: 1.5rem;
			color: #fff;
			background-color: #212529;
			padding: 8px 16px 7px;
		}
		.date {
			font-size: 1.6rem;
			font-weight: bold;
		}
		.starbucksCP {
			background: #F3F3F3;
			border-radius: 8px;
			padding: 36px;
			h4 {
				font-size: 2.4rem;
				text-align: center;
			}
			.txt {
				text-align: center;
				span {
					background:linear-gradient(transparent 86%, #EEE4B1 86%);
					line-height: 1.7;
					font-weight: bold;
					font-size: 2.0rem;
				}
			}
			.cord {
				text-align: center;
			}
			.asterisk li {
				font-size: 1.4rem;
			}
		}
		@media only screen and
		(max-width : 767px) {
			.category {
				font-size: 1.3rem;
			}
			.starbucksCP {
				padding: 24px;
				h4 {
					font-size: 2.0rem;
				}
				.txt {
					span {
						font-size: 1.8rem;
					}
				}
				.asterisk li {
					font-size: 1.3rem;
				}
			}
		}
	}

	/* --------------------------------
	.recommended
	-------------------------------- */ 
	section.recommended {
		.recommend_list{
			li {
				position: relative;
				font-size: 2.4rem;
				font-weight: 700;
				padding-left: 32px;
				&:after {
					content: "";
					position: absolute;
					background: url(../../../images/event/icon_check.svg) 0 50% no-repeat;
					background-size: cover;
					width: 23px;
					height: 24px;
					top: 0.2em;
					left: 0;
				}
				&:not(:last-child) {
					margin-bottom: 12px;
				}
				span {
					background:linear-gradient(transparent 86%, #EEE4B1 86%);
					line-height: 1.7;
					em {
						color: chocolate;
					}
				}
			}
		}
		@media only screen and
		(max-width : 767px) {
			.recommend_list{
				li {
					font-size: 1.8rem;
				}
			}
		}
	}

	/* --------------------------------
	.highlight
	-------------------------------- */ 
	section.highlight {
		.point {
			color: #979797;
			font-size: 1.8rem;
			font-weight: 700;
		}
		h4 {
			font-size: 3.6rem;
			font-weight: 700;
			line-height: 1.6;
		}
		@media only screen and
		(max-width : 767px) {
			.point {
				font-size: 1.5rem;
			}
			h4 {
				font-size: 2.6rem;
			}
		}
	}

	/* --------------------------------
	.feature
	-------------------------------- */ 
	section.feature {
		.feature_list {
			gap: 24px;
		}
		figcaption {
			font-size: 1.8rem;
			font-weight: 700;
			span {
				font-size: 1.4rem;
				color: #979797;
				display: block;
			}
		}
		@media only screen and
		(max-width : 767px) {
			.feature_list {
				gap: 16px;
			}
		}
	}

	/* --------------------------------
	.outline
	-------------------------------- */ 
	section.outline {
		h3 {
			margin-bottom: 11px;
		}
		table {
			width: 100%;
			th {
				padding: 24px 0;
				width: 20%;
				border-bottom: 1px solid #C6C6C6;
			}
			td {
				padding: 24px 0;
				width: 80%;
				border-bottom: 1px solid #C6C6C6;
				em {
					font-weight: 400;
				}
			}
		}
		@media only screen and
		(max-width : 767px) {
			table {
				th {
					display: block;
					padding: 20px 0 0;
					width: 100%;
					border-bottom: none;
					font-size: 1.4rem;
				}
				td {
					display: block;
					padding: 6px 0 20px;
					width: 100%;
					border-bottom: 1px solid #C6C6C6;
					em {
						font-weight: 400;
					}
				}
			}
			iframe {
				height: 400px;
			}
		}
	}
}

/* --------------------------------
#subArea
-------------------------------- */ 
#subArea {	
	@media only screen and
	(max-width : 767px) {
		width: 100%;
		padding-bottom: 0px;
	}
	.sub-fixed {
		position: -webkit-sticky;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, .12);
		position: sticky;
		top: 100px;
		padding: 36px 24px;
	
		h3 {
			font-size: 2.0rem;
			text-align: center;
		}
		.buttonStyle {
			margin-top: 12px;
			a {
				display: flex;
				align-items: center;
				min-height: 70px;
				justify-content: center;
				flex-wrap: wrap;
				width: 100%;
				border-radius: 8px;
				font-size: 1.7rem;
				font-weight: 700;
				text-align: center;
				border: 0;
				position: relative;
				color: #fff;
				padding: 0 0 0 30px;
				gap: 6px;
				small {
					margin-top: 6px;
					font-size: 1.2rem;
					font-weight: 400;
					display: block;
				}
				&:before {
					display: none;
				}
			}
		}
		.buttonStyle.reserve {
			a {
				background: #BF3B3B;
				&::after {
					content: "";
					position: absolute;
					background: url(../../../images/event/icon_reserve.svg) 0 0 no-repeat;
					background-size: cover;
					width: 32px;
					height: 31px;
					top: 0;
					bottom: 0;
					left: 20px;
					margin: auto 0;

				}
				&:hover {
					background: #a02929;
				}
			}
		}
		.buttonStyle.line {
			a {
				background: #06C755;
				&::after {
					content: "";
					position: absolute;
					background: url(../../../images/event/icon_line.svg) 0 0 no-repeat;
					background-size: cover;
					width: 32px;
					height: 30px;
					top: 0;
					bottom: 0;
					left: 20px;
					margin: auto 0;

				}
				&:hover {
					background: #03a747;
				}
			}
		}
		.tel {
			text-align: center;
			dt {
				font-size: 1.6rem;
				font-weight: 700;
			}
			dd {
				.tel {
					display: inline-block;
					font-size: 2.2rem;
					font-weight: 700;
					margin-bottom: 0px;
					padding-left: 28px;
					position: relative;
					&::after {
						content: "";
						position: absolute;
						background: url(../../../images/event/icon_tel.svg) 0 0 no-repeat;
						background-size: cover;
						width: 23px;
						height: 23px;
						top: 0;
						left: 0;
					}
				}
				.hour {
					font-size: 1.2rem;
					text-align: center;
					margin-bottom: 0px;
				}
			}
		}
	}

}