@charset "UTF-8";

/*
 * Event single styles
 * eiwa2021
 */

/* --------------------------------
 * Base
 * -------------------------------- */
.event-single {
	background: #fff;
	color: #111;
	font-family: inherit;
}

.event-single *,
.event-single *::before,
.event-single *::after {
	box-sizing: border-box;
}

.event-single a {
	text-decoration: none;
}

.event-single img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

/* --------------------------------
 * Common width
 * -------------------------------- */
.event-single-hero__inner,
.event-overview__inner,
.event-reservation__inner,
.event-detail__inner,
.event-flow__inner,
.event-gallery__inner,
.event-faq__inner,
.event-related__inner {
	width: min(100% - 40px, 1200px);
	margin-inline: auto;
}

/* --------------------------------
 * Hero
 * -------------------------------- */
.event-single-hero {
	padding: 72px 0 48px;
}

.event-single-hero__inner {
	text-align: center;
}

.event-single-hero__title {
	margin: 0;
	padding: 54px 0 50px;
	border-top: 3px solid #777;
	border-bottom: 3px solid #777;
	font-size: clamp(3rem, 2.8vw, 4.2rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.04em;
}

.event-single-hero__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 22px;
}

.event-single-hero__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 3px 11px;
	background: #FFEF24;
	color: #000;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.03em;
}

.event-single-hero__lead {
	margin: 24px auto 0;
	max-width: 960px;
	font-size: clamp(1.8rem, 1.65vw, 2.4rem);
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: 0.04em;
}

/* --------------------------------
 * Overview
 * -------------------------------- */
.event-overview {
	padding: 0 0 60px;
}

.event-overview__inner {
	display: grid;
	grid-template-columns: minmax(0, 680px) minmax(360px, 1fr);
	gap: 48px;
	align-items: start;
}

.event-overview__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #c9c9c9;
	overflow: hidden;
}

.event-overview__image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.event-overview__image-placeholder {
	width: 100%;
	height: 100%;
	background: #c9c9c9;
}

.event-overview__content {
	display: grid;
	gap: 28px;
}

.event-info-box__title {
	margin: 0 0 14px;
	padding: 7px 14px;
	border-left: 4px solid #8d8d8d;
	background: #f4f4f4;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.event-info-box__body {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.85;
	letter-spacing: 0.03em;
}

.event-info-box__body p {
	margin: 0;
}

.event-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.event-check-list li {
	position: relative;
	margin: 0;
	padding-left: 1.1em;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.03em;
}

.event-check-list li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #555;
}

/* --------------------------------
 * Reservation CTA
 * -------------------------------- */
.event-reservation {
	padding: 0 0 60px;
}

.event-reservation--bottom {
	padding: 54px 0 76px;
}

.event-reservation__box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(100%, 680px);
	margin-inline: auto;
	border: 1px solid #fff;
	background: #FFEF24;
}

.event-reservation__action,
.event-reservation__tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 126px;
	padding: 22px 30px;
	text-align: center;
}

.event-reservation__action {
	border-right: 1px solid #fff;
}

.event-reservation__heading,
.event-reservation__tel-heading {
	margin: 0 0 5px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.event-reservation__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	max-width: 100%;
	min-height: 54px;
	background: #fff;
	color: #000;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	transition: opacity 0.25s ease;
}

.event-reservation__button:hover {
	opacity: 0.82;
}

.event-reservation__tel-number {
	margin: 0;
	font-size: clamp(2.5rem, 2.8vw, 3.5rem);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: 0.04em;
}

.event-reservation__tel-number-text {
	display: inline-block;
}

.event-reservation__tel-number-text--sp {
	display: none;
}

.event-reservation__tel-hours {
	margin: 8px 0 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	color: #555;
}

/* --------------------------------
 * Event detail table
 * -------------------------------- */
.event-detail {
	padding: 0 0 64px;
}

.event-section-title {
	margin: 0;
	padding: 7px 14px;
	background: #f4f4f4;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.event-detail .event-section-title {
	width: min(100%, 680px);
	margin-inline: auto;
	padding: 0 0 8px;
	background: transparent;
	border-bottom: 1px solid #b7b7b7;
	text-align: center;
	font-size: 1.5rem;
}

.event-detail-table {
	width: min(100%, 680px);
	margin: 0 auto;
}

.event-detail-table__row {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	border-bottom: 1px solid #b7b7b7;
}

.event-detail-table dt,
.event-detail-table dd {
	margin: 0;
	padding: 9px 16px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

.event-detail-table dt {
	text-align: center;
	color: #333;
}

.event-detail-table dd {
	color: #111;
}

/* --------------------------------
 * Flow
 * -------------------------------- */
.event-flow {
	padding: 0 0 64px;
}

.event-flow__title {
	margin-bottom: 28px;
	border-left: 4px solid #8d8d8d;
}

.event-flow-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

.event-flow-steps__item {
	position: relative;
	min-width: 0;
	display: flex;
}

.event-flow-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -23px;
	width: 18px;
	height: 18px;
	border-top: 7px solid #000;
	border-right: 7px solid #000;
	transform: translateY(-50%) rotate(45deg);
	z-index: 2;
}

.event-flow-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 150px;
	padding: 46px 22px 22px;
	border: 1px solid #777;
	background: #fff;
	text-align: center;
}

.event-flow-card__number {
	position: absolute;
	top: -18px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	transform: translateX(-50%);
}

.event-flow-card__title {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid #777;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

.event-flow-card__text {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: 0.03em;
	text-align: left;
}

/* --------------------------------
 * Gallery
 * -------------------------------- */
.event-gallery {
	padding: 0 0 64px;
}

.event-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 20px;
}

.event-gallery__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: #c9c9c9;
	overflow: hidden;
}

.event-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------
 * FAQ
 * -------------------------------- */
.event-faq {
	padding: 0;
}

.event-faq .event-section-title {
	margin-bottom: 0;
	border-left: 4px solid #8d8d8d;
}

.event-faq-list__item {
	border-bottom: 1px solid #c8c8c8;
}

.event-faq-list__question {
	position: relative;
	display: block;
	padding: 14px 44px 14px 38px;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.03em;
	cursor: pointer;
	list-style: none;
}

.event-faq-list__question::-webkit-details-marker {
	display: none;
}
.event-faq-list__question::before {
	content: "Q.";
	position: absolute;
	top: 12px;
	left: 8px;
	font-size: 2.1rem;
	font-weight: 700;
}

.event-faq-list__question::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 14px;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	transform: translateY(-50%);
}

.event-faq-list__item[open] .event-faq-list__question::after {
	content: "−";
}

.event-faq-list__answer {
	padding: 0 44px 18px 38px;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.03em;
	color: #333;
}

.event-faq-list__answer p {
	margin: 0;
}

/* --------------------------------
 * Related events
 * -------------------------------- */
.event-related {
	padding: 0 0 96px;
}

.event-related .event-section-title {
	margin-bottom: 28px;
	border-left: 4px solid #8d8d8d;
}

.event-related__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px;
}

/* --------------------------------
 * Event card in related area
 * -------------------------------- */
.event-card {
	height: 100%;
	background: #fff;
	overflow: hidden;
}

.event-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background: #fff;
}

.event-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #c9c9c9;
	overflow: hidden;
}

.event-card__image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.event-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: #c9c9c9;
}

.event-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 20px 18px;
	text-align: center;
	border-right: 1px solid #cfcfcf;
	border-left: 1px solid #cfcfcf;
}

.event-card__title {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #cfcfcf;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.03em;
}

.event-card__labels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.event-card__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 12px;
	background: #FFEF24;
	color: #000;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.event-card__date {
	margin: 10px 0 0;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.5;
}

.event-card__target {
	margin-top: 12px;
}

.event-card__target-heading {
	margin: 0 0 5px;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.5;
}

.event-card__target-text {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.65;
	text-align: center;
}

.event-card__footer {
	margin-top: auto;
}

.event-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 12px;
	background: #000;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

/* --------------------------------
 * Responsive
 * -------------------------------- */
@media screen and (max-width: 767px) {
	.event-single-hero__inner,
	.event-overview__inner,
	.event-reservation__inner,
	.event-detail__inner,
	.event-flow__inner,
	.event-gallery__inner,
	.event-faq__inner,
	.event-related__inner {
		width: calc(100% - 32px);
	}

	.event-single-hero {
		padding: 40px 0 30px;
	}

	.event-single-hero__title {
		padding: 28px 0 26px;
		border-top-width: 2px;
		border-bottom-width: 2px;
		font-size: clamp(2.3rem, 7vw, 3rem);
		line-height: 1.45;
		letter-spacing: 0.03em;
	}

	.event-single-hero__lead {
		margin-top: 18px;
		font-size: 1.6rem;
		line-height: 1.8;
	}

	.event-overview {
		padding-bottom: 44px;
	}

	.event-overview__inner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.event-overview__image {
		aspect-ratio: 4 / 3;
	}

	.event-overview__content {
		gap: 22px;
	}

	.event-info-box__title {
		margin-bottom: 12px;
		padding: 8px 12px;
		font-size: 1.5rem;
	}

	.event-info-box__body {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.event-check-list li {
		font-size: 1.4rem;
		line-height: 1.75;
	}

	.event-reservation {
		padding-bottom: 46px;
	}

	.event-reservation--bottom {
		padding: 42px 0 60px;
	}

	.event-reservation__box {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.event-reservation__action,
	.event-reservation__tel {
		min-height: auto;
		padding: 22px 20px;
	}

	.event-reservation__action {
		border-right: 0;
		border-bottom: 1px solid #777;
	}

	.event-reservation__button {
		width: 100%;
		min-height: 52px;
		font-size: 1.5rem;
	}

	.event-reservation__tel-number {
		font-size: clamp(2.8rem, 9vw, 3.6rem);
		line-height: 1;
	}

	.event-reservation__tel-number-text--pc {
		display: none;
	}

	.event-reservation__tel-number-text--sp {
		display: inline-block;
		color: inherit;
	}

	.event-reservation__tel-hours {
		margin-top: 6px;
		font-size: 1.2rem;
	}

	.event-detail {
		padding-bottom: 48px;
	}

	.event-section-title {
		padding: 8px 12px;
		font-size: 1.5rem;
	}

	.event-detail .event-section-title {
		width: 100%;
		font-size: 1.4rem;
	}

	.event-detail-table {
		width: 100%;
	}

	.event-detail-table__row {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.event-detail-table dt,
	.event-detail-table dd {
		padding: 10px 12px;
		font-size: 1.4rem;
		line-height: 1.65;
	}

	.event-detail-table dt {
		text-align: center;
		font-weight: 700;
	}

	.event-detail-table dd {
		text-align: left;
	}

	.event-flow {
		padding-bottom: 52px;
	}

	.event-flow__title {
		margin-bottom: 30px;
	}

	.event-flow-steps {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.event-flow-steps__item:not(:last-child)::after {
		display: block;
		top: auto;
		right: auto;
		bottom: -5px;
		left: 50%;
		width: 14px;
		height: 14px;
		border-top: 0;
		border-right: 6px solid #000;
		border-bottom: 6px solid #000;
		transform: translateX(-50%) rotate(45deg);
	}

	.event-flow-card {
		min-height: auto;
		padding: 42px 20px 22px;
	}

	.event-flow-card__number {
		width: 34px;
		height: 34px;
		font-size: 1.9rem;
	}

	.event-flow-card__title {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: auto;
		margin-bottom: 14px;
		padding-bottom: 14px;
		font-size: 1.5rem;
	}

	.event-flow-card__text {
		font-size: 1.4rem;
		line-height: 1.7;
	}

	.event-gallery {
		padding-bottom: 52px;
	}

	.event-gallery__grid {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 16px;
	}

	.event-faq-list__question {
		padding: 14px 38px 14px 34px;
		font-size: 1.5rem;
		line-height: 1.65;
	}

	.event-faq-list__question::before {
		top: 13px;
		left: 6px;
		font-size: 1.8rem;
	}

	.event-faq-list__question::after {
		right: 10px;
		font-size: 1.9rem;
	}

	.event-faq-list__answer {
		padding: 0 38px 16px 34px;
		font-size: 1.4rem;
		line-height: 1.75;
	}

	.event-related {
		padding-bottom: 72px;
	}

	.event-related .event-section-title {
		margin-bottom: 20px;
	}

	.event-related__list {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.event-card__body {
		padding: 20px 18px 16px;
	}

	.event-card__title {
		font-size: 1.6rem;
	}

	.event-card__label {
		font-size: 1.2rem;
	}

	.event-card__date,
	.event-card__target-heading,
	.event-card__target-text {
		font-size: 1.3rem;
	}
}