/* -----------------------------------
 * ヒーローコンテンツ（メインビジュアル）
 * --------------------------------- */
.hero {
	margin-bottom: clamp(2rem, -3.3333rem + 11.1111vw, 5rem);
	padding-inline: var(--space--4);

	@media(width < 768px) {
		padding-inline: 0;
	}

	.hero-inner {
		margin-inline: auto;
		max-width: 1361px;
		position: relative;
	}

	& img {
		margin-inline: auto;
	}

	.hero-link {
		display: block;
		position: absolute;
		bottom: 15px;
		right: 55px;

		@media(width < 1200px) {
			width: 25%;
			right: 4%;
			bottom: 2%;
		}

		@media(width < 768px) {
			margin-inline: auto;
			position: relative;
			max-width: 350px;
			width: 100%;
			right: 0;
		}
	}
}

/* -----------------------------------
 * セクション共通スタイル
 * --------------------------------- */
.section-bg {
	background-color: var(--white);
	border-radius: var(--radius--3xl);

	@media(width < 768px) {
		border-radius: var(--radius--3lg);
	}
}

.section-title {
	display: flex;
	align-items: center;
	flex-direction: column;
	font-weight: 400;
	text-align: center;
	position: relative;
	z-index: 1;

	&::before {
		background-image: url(../img/top/grd.svg);
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		width: 309px;
		height: 309px;
		position: absolute;
		top: -60px;
		right: 0;
		transform: translateX(-50%);
		z-index: -1;

		@media(width < 768px) {
			background-image: url(../img/top/grd_sp.svg);
			width: 100%;
			height: 214px;
			right: -30px;
			transform: initial;
		}
	}

	&::after {
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
	}

	& .section-title__sub {
		font-size: clamp(2.25rem, 0.9167rem + 2.7778vw, 3rem);
	}

	& .section-title__main {
		font-size: clamp(2.625rem, 1.0694rem + 3.2407vw, 3.5rem);
	}
}

/* -----------------------------------
 * Reason セクション
 * --------------------------------- */
.reason {
	padding-block: 64px 76px;
	padding-inline: var(--space--2);

	@media(width < 768px) {
		padding: 32px;
	}

	.section-title {
		margin-bottom: clamp(1.5rem, -4.6111rem + 12.7315vw, 4.9375rem);

		&::after {
			background-image: url(../img/top/reason.png);
			width: 224px;
			height: 65px;

			@media(width < 768px) {
				width: 178px;
				height: 52px;
			}
		}
	}

	.panels {
		display: flex;
		gap: clamp(1.5rem, -1.1667rem + 5.5556vw, 3rem);
		justify-content: center;
		margin-inline: auto;
		max-inline-size: 1056px;

		@media(width < 768px) {
			flex-direction: column;
		}
	}

	.panel {
		@media(width < 768px) {
			display: flex;
			align-items: center;
			gap: 18px;
			justify-content: center;
		}

		&:nth-child(1) {
			.panel-title::before {
				content: "01";
			}

			.panel-media::before {
				background-image: url(../img/top/price.png);
				width: 154px;
				height: 74px;

				@media(width < 768px) {
					right: 60px;
				}
			}
		}

		&:nth-child(2) {
			@media(width < 768px) {
				flex-direction: row-reverse;
			}

			.panel-title::before {
				content: "02";
			}

			.panel-media::before {
				background-image: url(../img/top/support.png);
				width: 154px;
				height: 74px;

				@media(width < 768px) {
					top: -5px;
					left: 120px;
				}
			}
		}

		&:nth-child(3) {
			.panel-title::before {
				content: "03";
			}

			.panel-media::before {
				background-image: url(../img/top/halls.png);
				width: 137px;
				height: 79px;

				@media(width < 768px) {
					right: 65px;
				}
			}
		}
	}

	.panel-title {
		font-size: var(--font-size--lg);
		letter-spacing: .03em;
		margin-bottom: 31px;
		position: relative;
		text-align: center;

		@media(width < 768px) {
			margin-top: var(--space--6);
			margin-bottom: 0;
		}

		&::before {
			color: rgba(120 105 60 / 0.12);
			font-size: var(--font-size--2xl);
			font-weight: 400;
			position: absolute;
			top: -80px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.panel-media {
		position: relative;

		&::before {
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			display: inline-block;
			position: absolute;
			top: -30px;
			right: 10px;

			@media(width < 768px) {
				background-size: 60%;
				top: 0;
			}
		}

		img {
			@media(width < 768px) {
				max-width: 144px;
			}
		}
	}
}

/* -----------------------------------
 * Pick Up セクション
 * --------------------------------- */
.pickup {
  margin-inline: auto;
	max-inline-size: var(--size--lg);
	padding-block: 48px 79px;
	padding-inline: var(--space--2);

	.pickup-title {
		font-size: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
		margin-bottom: clamp(1.25rem, -0.0833rem + 2.7778vw, 2rem);;
	}

	& .pickup-img {
		display: block;
		margin-top: clamp(2rem, -1.5556rem + 7.4074vw, 4rem);
	}

	.category,
	.search {
		display: none;
	}
}

/* -----------------------------------
 * About セクション
 * --------------------------------- */
.about {
	padding-block: 64px 76px;
	padding-inline: var(--space--2);

	@media(width < 768px) {
		padding: 32px 30px;
	}

	& .about-inner {
		display: grid;
		gap: var(--space--5) var(--space--6);
		/* grid-template-rows: 173px 1fr; */
		justify-content: center;

		@media(width < 992px) {
			gap: var(--space--3);
		}

		@media(width < 768px) {
			display: block;
		}
	}

	& .section-title {
		align-self: end;
		grid-column:  1;
		grid-row:  1;
		gap: 15px;

		@media(width < 768px) {
			margin-bottom: var(--space--3);
		}

		&::before {
			@media(width < 768px) {
				top: -40px;
			}
		}

		&::after {
			background-image: url(../img/top/about.png);
			width: 172px;
			height: 66px;
			top: 24%;

			@media(width < 768px) {
				width: 138px;
				height: 52px;
			}
		}
	}

	& .section-title__sub {
		font-size: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
	}

	& .about-text {
		align-self: start;
		grid-column:  1;
		grid-row:  2;
		margin-inline: auto;
		max-width: 460px;

		@media(width < 768px) {
			grid-row:  3 / 4;
		}

		& p {
			font-size: var(--font-size--md);
			letter-spacing: .03em;

			& + p {
				margin-top: 1em;
			}
		}
	}

	& .about-box {
		grid-column:  2;
		grid-row:  1 / 3;
		background-color: #E8F4FF;
		border-radius: var(--radius--xl);
		flex-shrink: 0;
		padding: 40px 56px;

		@media(width < 768px) {
			grid-column:  1 / 2;
			grid-row:  2 / 3;
			margin-bottom: 32px;
			padding: 32px 20px;
		}
	}

	& .about-img {
		display: block;
		margin-bottom: 24px;

		& img {
			margin-inline: auto;
		}
	}

	& .about-list {
		border-top: 1px solid var(--color--border);
		padding-top: 12px;
	}

	& .about-item {
		color: #666;
		font-family: var(--font--sans);
		font-size: clamp(0.75rem, 0.6389rem + 0.2315vw, 0.8125rem);
	}
}

/* -----------------------------------
 * Halls セクション
 * --------------------------------- */
.halls {
	padding: 70px 20px 80px;

	@media(width < 768px) {
		padding-block: 40px;
	}

	& .halls-inner {
		margin-inline: auto;
		max-width: 937px;
		min-height: 558px;
		position: relative;
	}

	& .section-title {
		display: inline-flex;
		gap: 12px;

		@media(width < 768px) {
			display: flex;
			margin-bottom: var(--space--4);
		}

		&::before {
			display: none;
		}

		&::after {
			background-image: url(../img/top/halls-lg.png);
			width: 170px;
			height: 75px;
			top: 27%;

			@media(width < 768px) {
				width: 136px;
				height: 60px;
			}
		}
	}

	& .section-title__sub {
		font-size: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
	}

	& .section-title__main {
		font-size: clamp(2.25rem, 0.9167rem + 2.7778vw, 3rem);
	}

	& .map {
		position: absolute;
		top: 72px;
		right: 74px;

		@media(width < 768px) {
			position: static;
		}
	}

	& .map-inner {
		position: relative;
	}

	& .map-img {
		margin-right: 74px;

		@media(width < 768px) {
			margin-right: 0;
		}
	}

	& .map-links {
		@media(width < 768px) {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			gap: 8px;
		}
	}

	& .map-link-hokkaido {
		top: -6%;
		right: -10%;
	}

	& .map-link-tohoku {
		top: 27%;
		left: 22%;
	}

	& .map-link-kanto {
		top: 61%;
		right: -7%;
	}

	& .map-link-chugoku {
		top: 50%;
		left: -7%;
	}

	& .map-link-kinki {
		bottom: -5%;
		left: 40%;
	}

	& .map-link-kyusyu {
		top: 84%;
		left: -27%;
	}

	& .map-link {
		background-color: var(--white);
		border: 1px solid var(--color--primary);
		border-radius: 50px;
		color: var(--color--primary);
		display: inline-flex;
		gap: 12px;
		font-size: var(--font-size--md);
		letter-spacing: .03em;
		padding: 12px 24px 14px;
		position: absolute;

		@media(width < 768px) {
			display: block;
			margin-inline: auto;
			max-width: 280px;
			width: 100%;
			text-align: center;
			position: relative;
			transform: none;
			top: auto;
			left: auto;
			right: auto;
			bottom: auto;
		}

		&::after {
			content: url(../img/top/arrow.svg);
			width: 11px;
			height: 11px;

			@media(width < 768px) {
				position: absolute;
				right: 16px;
			}
		}
	}
}

/* -----------------------------------
 * News セクション
 * --------------------------------- */
.news {
	padding-block: 80px;

	@media(width < 768px) {
		padding-block: 34px 40px;
	}

	.news-inner {
		margin-inline: auto;
		width: min(100% - 40px, 1168px);
	}

	.news-title {
		font-size: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
		font-weight: 400;
		margin-bottom: clamp(1rem, -1.6667rem + 5.5556vw, 2.5rem);
	}

	.card-grid--4cols {
	  gap: clamp(1.5rem, -1.1667rem + 5.5556vw, 3rem);

		@media(width < 768px) {
			gap: 16px 20px;
			grid-template-columns: 1fr 1fr;
		}

		.card-img {
			aspect-ratio: 256 / 170;
		}

		.card-body {
			padding-top: 8px;
		}

		.card-title {
			color: var(--color--text);
			font-family: var(--font--sans);
			font-size: var(--font-size--base);
			min-height: 46px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;

			@media(width < 768px) {
				min-height: 0;
			}
		}
	}

	.news-btn {
		margin-top: clamp(1.5rem, -3.6111rem + 10.6481vw, 4.375rem);

		a {
			background-color: var(--color--primary);
			border-radius: var(--radius--md);
			color: var(--white);
			display: grid;
			place-items: center;
			margin-inline: auto;
			width: 280px;
			height: 48px;
		}
	}
}