@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.preview-outer{
	font-family: var(--font_min);
	padding: 48px 0 100px;
	@media (width < 810px) {
		padding: 32px 0 48px;
	}
}
.preview-schedule{
	font-size: clamp(22px, -15.385px + 4.615vw, 40px);/*40~22(1600~810)*/
	font-weight: 500;
	border-bottom: 2px solid #B81F21;
	padding-bottom: 8px;
	max-width: 1180px;
	margin-inline: auto;
}
.preview-schedule__txt{
	color: #B81F21;
	line-height: 1.4;
	.txt_number{
		font-size: 1.8em;
		font-weight: 600;
	}
	.txt_strong{
		font-size: 1.1em;
		font-weight: 600;
		letter-spacing: 0.08em;
	}
}
.preview-catch{
	word-break: keep-all;
	font-size: clamp(16px, 9.848px + 0.759vw, 22px);/*22~16(1600~810)*/
	font-weight: 500;
	margin-top: 24px;
	@media (width < 810px) {
		margin-top: 16px;
	}
}

.preview-container{
	margin-top: 64px;
	@media (width < 810px) {
		margin-top: 48px;
	}
}
.preview-ttl{
	margin-bottom: -72px;
	position: relative;
	z-index: 10;
	@media (width < 810px) {
		margin-bottom: -40px;
	}
}
.preview-ttl__deco{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	font-size: clamp(20px, 4.727px + 1.705vw, 32px);/*32~20(1600~810)*/
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--main_c);
	&::before, &::after{
		content: "";
		display: inline-block;
		width: 2px;
		height: 1.5em;
		background: var(--main_c);
	}
	&::before{
		rotate: -40deg;
	}
	&::after{
		rotate: 40deg;
	}
}
.preview-ttl__fusen{
	container-type: inline-size;
	width: max(29.875cqw, 320px);/*478/1600*/
	margin-inline: auto;
	position: relative;
	@media (width < 810px) {
		width: min(90%, 260px);
	}
	img {
		width: 100%;
		max-width: none;
		vertical-align: middle;
	}
}
.preview-ttl__jp{
	width: 100%;
	font-size: 11.72cqw;/*56/478*/
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--main_c);
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}
.preview-inner{
	padding: 112px 5.5cqw 72px;/*88/1600*/
	background: #FBF5F2;
	@media (width < 810px) {
		padding: 72px 20px 40px;
	}
}

.preview-list{
	text-align: left;
	font-size: clamp(20px, 7.696px + 1.519vw, 32px);/*32~20(1600~810)*/
	font-weight: 500;
	line-height: 1.6;
	inline-size: fit-content;
	margin-inline: auto;
}
.preview-list__item{
	text-indent: -1.25em;
	padding-left: 1.25em;
	margin-top: 0.4em;
	&:first-of-type{
		margin-top: 0;
	}
	.txt_small{
		font-size: clamp(14px, 9.899px + 0.506vw, 18px);/*18~14(1600~810)*/
	}
}

.preview-img{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
	gap: 40px 3cqw;/*48/1600*/
	margin-top: 48px;
	@media (width < 810px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 12px;
		margin-top: 28px;
	}
	&.--four{
		grid-template-columns: repeat(4, 1fr);
		gap: 40px 2cqw;/*32/1600*/
		@media (width < 810px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 16px 12px;
		}
	}
}

.preview-img__item{
	figure{
		position: relative;
		figcaption{
			text-align: left;
			font-family: var(--font_gothic);
			font-size: clamp(12px, 5.848px + 0.759vw, 18px);/*18~12(1600~810)*/
			font-weight: 400;
			position: absolute;
			right: 8px;
			bottom: 8px;
			&.--white{
				color: #fff;
			}
		}
	}
}

.preview-info{
	margin-top: 64px;
	@media (width < 810px) {
		margin-top: 40px;
	}
}
.preview-info__catch{
	word-break: keep-all;
	text-align: center;
	color: #B81F21;
	font-size: clamp(22px, 5.595px + 2.025vw, 38px);/*38~22(1600~810)*/
	font-weight: 600;
	padding: 30px 24px 24px;
	background: url("../../images/preview/wave.png") center bottom/ 382px 7px repeat-x;
	margin-inline: auto;
	max-width: 1180px;
	@media (width < 810px) {
		padding: 24px 20px 20px;
	}
	>span{
		display: inline-block;
		position: relative;
		&::before{
			content: "";
			display: block;
			width: 56px;
			height: 38px;
			background: url("../../images/preview/mark_shine.svg") center center/ 100% auto no-repeat;
			position: absolute;
			top: -30px;
			left: -24px;
			@media (width < 810px) {
				width: calc(56px * 0.7);
				height: calc(38px * 0.7);
				top: -24px;
				left: -20px;
			}
		}
	}
}
.preview-info__list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 5cqw;/*80/1600*/
	margin-top: 112px;
	@media (width < 810px) {
		margin-top: 40px;
	}
	@media (width < 500px) {
		grid-template-columns: repeat(1, 1fr);
	}
}
.preview-info__list__item{
	position: relative;
}
.preview-info__list__fukidashi{
	width: 30.32%;/*211/696*/
	position: absolute;
	top: -20px;
	left: -4.5cqw;
}
.preview-info__list__img{
	position: relative;
	figcaption{
		text-align: left;
		font-family: var(--font_gothic);
		font-size: clamp(12px, 5.848px + 0.759vw, 18px);/*18~12(1600~810)*/
		font-weight: 400;
		position: absolute;
		right: 8px;
		bottom: 8px;
		&.--white{
			color: #fff;
		}
	}
}
.preview-info__list__txt{
	text-align: center;
	font-size: clamp(18px, 7.747px + 1.266vw, 28px);/*28~18(1600~810)*/
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-top: 10px;
	background: linear-gradient(180deg, transparent 0%, transparent 65%, #FFF8A5 65%, #FFF8A5 100%);
}

.preview-reserve{
	margin-top: 96px;
	@media (width < 810px) {
		margin-top: 56px;
	}
}
.preview-reserve__fukidashi{
	padding-bottom: 15.2px;
	position: relative;
	@media (width < 810px) {
		padding-bottom: 11.8px;
	}
	&::after {
		content: "";
		display: block;
		width: 32px;
		height: 32px;
		border: 2px solid var(--font_c);
		background: #fff;
		rotate: -45deg;
		clip-path: polygon(0 0, 100% 100%, 0 100%);
		position: absolute;
		bottom: 0;
		left: 50%;
		translate: -50% 0;
		z-index: 10;
		@media (width < 810px) {
			width: 24px;
			height: 24px;
		}
	}
}
.preview-reserve__txt{
	display: inline-block;
	word-break: keep-all;
	font-size: clamp(21px, 7.671px + 1.646vw, 34px);/*34~21(1600~810)*/
	font-weight: 600;
	border-bottom: 2px solid var(--font_c);
	padding: 0 20px 16px;
	position: relative;
	@media (width < 810px) {
		padding: 0 12px 16px;
	}
	&::before{
		content: "";
		display: block;
		width: 7px;
		height: 10px;
		background: #fff;
		position: absolute;
		right: 80px;
		bottom: -5px;
		@media (width < 810px) {
			right: 60px;
		}
	}
	&::after{
		content: "";
		display: block;
		width: 15px;
		height: 10px;
		background: #fff;
		position: absolute;
		right: 55px;
		bottom: -5px;
		@media (width < 810px) {
			right: 35px;
		}
	}
}
.preview-reserve__btn{
	max-width: 440px;
	margin-inline: auto;
	margin-top: 40px;
	@media (width < 810px) {
		margin-top: 32px;
	}
}
.preview-reserve__btn__link{
	display: block;
	background: #B81F21;
	padding: 24px;
	font-size: clamp(24px, 7.595px + 2.025vw, 40px);/*40~24(1600~810)*/
	font-weight: 600;
	letter-spacing: 0.1em;
	position: relative;
	color: #fff;
	@media (width < 810px) {
		padding: 20px 16px;
	}
	&::before{
		content: "";
		display: block;
		border: 1px solid #fff;
		width: calc(100% - 24px);
		height: calc(100% - 24px);
		position: absolute;
		top: 12px;
		left: 12px;
		@media (width < 810px) {
			width: calc(100% - 16px);
			height: calc(100% - 16px);
			top: 8px;
			left: 8px;
		}
	}
	&::after{
		content: "";
		display: block;
		width: 0.8em;
		height: 0.8em;
		background: url("../../images/preview/arrow_next_w.svg") center center/ 100% auto no-repeat;
		position: absolute;
		top: 50%;
		right: 24px;
		translate: 0 -50%;
		@media (width < 810px) {
			right: 20px;
		}
	}
	&:hover{
		text-decoration: none;
	}
}
.preview-reserve__btn__txt{
	position: relative;
	z-index: 5;
}