:root {
	--main-color: #F6F4EE;
	--accent-color: #BF0D1B;
	--shadow-color: #940a159f;
	--point-color: #D9C648;
	--text-color: #3D322D;
	--link-text-color: #FFFFFF;
	--line-color01: #14AE67;
	--font-sizeh1: 5rem;
	--font-sizeh2: 4.8rem;
	--font-sizeh3: 2.3rem;
	--font-sizeh4: 2rem;
	--font-size-img: 8rem;
	--font-size: 1.6rem;
	--space3: 3rem;
	--space5: 5rem;
	--space10: 10rem;
	--space15: 15rem;
	--space20: 20rem;
	--space30: 30rem;
	--space40: 40rem;
}



/* ******************
｜　common
****************** */
html {
	font-size: 62.5%;
	color: var(--text-color);
	line-height: 1.7;
	letter-spacing: 0.5;
	background-color: #fff;
	box-sizing: border-box;
	scroll-behavior: smooth;
	margin: 0 auto;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
	scroll-padding-top: 9rem;
}

body {
	font-size: var(--font-size);
	margin: 0 auto;
}

div {
	box-sizing: border-box;
}

table {
	border-collapse: collapse
}

ul,
ol {
	padding-left: 0;
	box-sizing: border-box;
}

li {
	list-style: none;
}

h1 {
	font-size: var(--font-sizeh1);
	line-height: 1.25;
	margin: 0 auto;
}

h2 {
	font-size: var(--font-sizeh2);
	line-height: 1.25;
	margin: 0 auto;
	text-align: center;
}

h2 img {
	width: auto;
	height: var(--font-size-img);
}

h2.square .sub-title {
	display: block;
	margin: 1rem 0 0;
	height: var(--font-sizeh3);
}

h2.square .sub-title::before,
h2.square .sub-title::after {
	content: "";
	display: inline-block;
	width: 9rem;
	height: var(--font-sizeh3);
	background-image: url(../images/h_decoration.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

h2.square .sub-title::after {
	transform: scale(-1, 1);
}

h2.line {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: .75rem;
}

h2.line::after {
	content: "";
	flex: 1 1 auto;
	min-width: 0;
	height: 1rem;
	margin-left: .75rem;
	background-image: url(../images/h_line.svg);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

h2.line.bgb::after {
	content: "";
	flex: 1 1 auto;
	min-width: 0;
	height: 1rem;
	margin-left: .75rem;
	background-image: url(../images/h_line_white.svg);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

h2.line .sub-title {
	display: inline-block;
	margin: 0 0 0 3rem;
	color: var(--accent-color);
}

h2.line.bgb .sub-title {
	color: #FFFFFF;
}

h3 {
	font-size: var(--font-sizeh3);
	line-height: 1;
}

h4 {
	font-size: var(--font-sizeh4);
}

img {
	width: 100%;
}

p {
	font-size: var(--font-size);
	margin: 0.75rem 0 0;
}

a {
	color: var(--text-color);
	display: block;
	text-decoration: none;
}

.link-btn {
	display: flex;
	align-items: center;
}

.link-btn.decoration a {
	background-image: url(../images/btn-bg.svg);
	text-align: center;
	display: inline-block;
	font-size: var(--font-sizeh4);
	color: var(--text-color);
	line-height: 1;
	margin: 0 -1rem;
	padding: 2.9rem 3rem 3.5rem;
	min-width: 10rem;
	position: relative;
}

.link-btn.decoration a::after {
	content: "";
	position: absolute;
	width: 1.2rem;
	height: 0.5rem;
	bottom: 2rem;
	left: 45%;
	background-image: url(../images/btn-icon.svg);
	text-align: center;
	display: inline-block;
	background-repeat: no-repeat;
}

.link-btn.decoration::before,
.link-btn.decoration::after {
	content: "";
	padding: calc(2.9rem + 3.5rem) 2rem;
	display: inline-block;
	font-size: var(--font-sizeh4);
	/* width: 4.0rem; */
	/* height: 8.6rem; */
	background-image: url('../images/btn-side-left.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.link-btn.decoration::after {
	background-image: url('../images/btn-side-right.svg');
}

.link-btn.normal a {
	text-align: center;
	display: inline-block;
	font-size: var(--font-sizeh4);
	color: var(--link-text-color);
	line-height: 1;
	padding: 2rem 3rem;
	background: var(--accent-color);
	border-radius: 50px;
	min-width: 10rem;
	filter: drop-shadow(0.5rem 0.5rem 0.5rem var(--shadow-color));
}

.text-box a {
	display: inline;
	color: var(--accent-color);
	text-decoration: underline;
}

.button {
	text-align: center;
	font-weight: 600;
	color: var(--link-text-color);
	background: var(--link-button);
	border-radius: 3rem;
	max-width: 24rem;
	margin: 0 auto;
	padding: 1rem;
}

img {
	width: 100%;
	box-sizing: border-box;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.youtube iframe {
	width: 100%;
	height: 100%;
}

.wrapper {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 5rem;
}

@media screen and (max-width: 1080px) {
	html {
		font-size: 1vw;
	}

	.link-btn.decoration a {
		padding: 3vw 3vw 4vw;
	}

	.link-btn.decoration::before,
	.link-btn.decoration::after {
		width: 4.5vw;
		height: 9vw;
		padding: 0;
	}

	.wrapper {
		padding: 0 5%;
	}
}

@media screen and (max-width: 768px) {
	html {
		font-size: 2vw;
	}

	h2.line {
		display: block;
	}

	h2.line .sub-title {
		margin: 1rem 0 0;
		width: 100%;
	}

	.link-btn.decoration a {
		padding: 2.5rem 3rem 3.5rem;
	}

	.link-btn.decoration::before,
	.link-btn.decoration::after {
		width: 3.8rem;
		height: 8rem;
	}
}


/* ******************
｜　layout
****************** */
.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

.center {
	text-align: center;
}

.mt3 {
	margin-top: var(--space3);
}

.mt5 {
	margin-top: var(--space5);
}

.mt10 {
	margin-top: var(--space10);
}

.mt20 {
	margin-top: var(--space20);
}

.mt30 {
	margin-top: var(--space30);
}

.mt40 {
	margin-top: var(--space40);
}

.pt3 {
	padding-top: var(--space3);
}

.pt5 {
	padding-top: var(--space5);
}

.pt10 {
	padding-top: var(--space10);
}

.pt20 {
	padding-top: var(--space20);
}

.pt30 {
	padding-top: var(--space30);
}

.pt40 {
	padding-top: var(--space40);
}

@media screen and (min-width: 961px) {
	.sp {
		display: none !important;
	}
}

@media screen and (max-width: 960px) {
	.pc {
		display: none !important;
	}
}



/* ******************
｜　font
****************** */
.font-Cormorant {
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.font-NotoSerif {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.font-Kaisei {
	font-family: "Kaisei Tokumin", serif;
	font-weight: 400;
	font-style: normal;
}

.en {
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.jp {
	font-family: "Kaisei Tokumin", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.8rem;
}


/* ******************
｜　contents
****************** */
/* ****** header ****** */
header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: #FFFFFF;
	border-radius: 0 0 50% 50%;
	z-index: 100;
	/* box-shadow: 0px .3rem 1rem #dddddd; */
}

.header nav ul {
	margin: 0;
	align-items: start;
}

.header nav ul a {
	font-weight: bold;
	padding: 3rem 1rem 1rem;
}



/* ****** mv ****** */
#mv {
	width: 100%;
	max-width: 100%;
	padding: 0;
	position: relative;
	z-index: auto;
}

#mv.parallax_box {
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}

#mv .parallax_content {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

#mv .img_bg_01 {
	background-image: url(../images/mv-bg01.jpg);
	height: 100%;
	width: 50%;
	position: fixed;
	top: 0;
	right: 50%;
	margin-right: 0;
	background-position: right top;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	pointer-events: none;
	z-index: -1;
}

#mv .img_bg_02 {
	background-image: url(../images/mv-bg02.jpg);
	height: 100%;
	width: 50%;
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: 0;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	pointer-events: none;
	z-index: -1;
}

#mv .img_title {
	height: 100%;
	width: 100vh;
	max-width: 100vw;
	position: fixed;
	display: flex;
	align-items: center;
	margin: 0 auto;
	padding: 0 2rem;
	pointer-events: none;
	z-index: -1;
}

#mv .img_title img {
	width: 100%;
	text-align: center;
}

#mv .grid {
	background: linear-gradient(180deg, #33333300, #33333390, #333333);
	background: linear-gradient(180deg, #33333300, #33333390, #33333395, #33333399);
	mix-blend-mode: normal;
	margin-top: -40rem;
	padding: 20rem 0 10rem;
	z-index: 2;
}

#mv .grid::before {
	content: "";
	position: absolute;
	top: 30rem;
	left: 0;
	width: min(50vh, 40rem);
	height: min(50vh, 40rem);
	background-image: url(../images/decoration1.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	pointer-events: none;
	z-index: -1;
}

#mv .grid::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(70vh, 70rem);
	height: min(70vh, 70rem);
	background-image: url(../images/decoration2.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right bottom;
	pointer-events: none;
	z-index: -1;
}

#mv-link {
	position: relative;
	width: 100%;
	max-width: 100%;
	z-index: 10;
	cursor: pointer;
}

#mv-link .flex {
	justify-content: center;
}

#mv-link li {
	margin: 0 1%;
}

@media screen and (max-width: 960px) {
	#mv {
		position: relative;
		z-index: 0;
	}

	#mv.parallax_box {
		z-index: -1;
	}

	/* 上半分だけを固定表示（下側を 50svh 切り落とす） */
	#mv .img_bg_01 {
		width: 100%;
		position: fixed;
		inset: 0 0 50svh 0;
		/* top:0; right:0; bottom:50svh; left:0; */
		background-image: url(../images/mv-bg01.jpg);
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		pointer-events: none;
		z-index: -1;
	}

	/* 下半分だけを固定表示（上側を 50svh 切り落とす） */
	#mv .img_bg_02 {
		width: 100%;
		position: fixed;
		inset: 50svh 0 0 0;
		/* top:50svh; right:0; bottom:0; left:0; */
		background-image: url(../images/mv-bg02.jpg);
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
		pointer-events: none;
		z-index: -1;
	}

	/* svh が未対応の環境向けフォールバック（任意） */
	@supports not (height: 1svh) {
		#mv .img_bg_01 {
			inset: 0 0 50vh 0;
		}

		#mv .img_bg_02 {
			inset: 50vh 0 0 0;
		}
	}

}

@media screen and (max-width: 768px) {
	#mv-link {
		font-size: 2vw;
	}

	#mv-link li {
		margin: 1rem 1%;
	}
}



/* ****** concept ****** */
.grid {
	position: relative;
	overflow: hidden;
}

#concept .decorated-box {
	margin: 30rem auto 0;
	max-width: 88rem;
	position: relative;
}

#concept .corner-tlr,
#concept .corner-blr {
	width: calc(100% - 10rem);
	height: 7rem;
	background-color: var(--main-color);
}

#concept .corner-tlr {
	margin: 0 auto -0.25rem;
}

#concept .corner-blr {
	margin: -0.25rem auto 0;
}

#concept .corner-tlr::before,
#concept .corner-tlr::after,
#concept .corner-blr::before,
#concept .corner-blr::after {
	content: "";
	position: absolute;
	width: 6rem;
	height: 7rem;
	background-image: url(../images/concept_decoration.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

#concept .corner-tlr::before {
	top: 0;
	transform: scale(1, -1);
	left: 0;
}

#concept .corner-tlr::after {
	top: 0;
	transform: scale(-1, -1);
	right: 0;
}

#concept .corner-blr::before {
	bottom: 0;
	transform: scale(1, 1);
	left: 0;
}

#concept .corner-blr::after {
	bottom: 0;
	transform: scale(-1, 1);
	right: 0;
}

#concept .wrapper {
	padding: 10%;
	background: var(--main-color);
	color: var(--text-color);
}

#concept .text-box p {
	letter-spacing: 0.2rem;
	line-height: 195%;
	margin-bottom: 1rem;
}



/* ****** img ****** */
#img {
	background-color: var(--main-color);
	margin-top: -10rem;
	padding-top: 15rem;
	overflow: hidden;
	position: relative;
}

#img::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: min(40vw, 35rem);
	height: min(50vw, 40rem);
	background-image: url(../images/decoration3.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
}

#img::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(40vw, 35rem);
	height: min(50vw, 40rem);
	background-image: url(../images/decoration7.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	transform: scale(-1, 1);
	z-index: 1;
}

#img.scroll-infinity {
	overflow: hidden;
	position: relative;
}

#img .photo {
	position: relative;
	z-index: 0;
	z-index: 2;
}

.photo.scroll-infinity__wrap {
	display: flex;
	width: max-content;
	animation: infinity-scroll-left 50s linear infinite;
	will-change: transform;
}

.photo .scroll-infinity__list {
	position: relative;
	flex: 0 0 auto;
	width: 140rem;
	height: 70rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.photo .scroll-infinity__list img {
	display: block;
	height: auto;
	width: auto;
}

.photo .scroll-infinity__list .item01,
.photo .scroll-infinity__list .item02,
.photo .scroll-infinity__list .item03,
.photo .scroll-infinity__list .item04,
.photo .scroll-infinity__list .item05 {
	position: absolute;
	overflow: hidden;
}

.photo .scroll-infinity__list .item01 {
	width: 40%;
	height: 60%;
	top: 0;
	left: 0;
}

.photo .scroll-infinity__list .item02 {
	width: 20%;
	height: 30%;
	top: 10%;
	left: 43%;
}

.photo .scroll-infinity__list .item03 {
	width: 25%;
	height: 40%;
	top: 5%;
	right: 3%;
}

.photo .scroll-infinity__list .item04 {
	width: 22%;
	height: 35%;
	bottom: 0%;
	left: 23%;
}

.photo .scroll-infinity__list .item05 {
	width: 35%;
	height: 50%;
	top: 49%;
	right: 8%;
}

.photo .scroll-infinity__list li img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

#img .copy {
	position: absolute;
	z-index: 1;
	top: 40rem;
	z-index: 3;
}

.copy .scroll-infinity__wrap {
	display: flex;
	animation: infinity-scroll-right 200s linear infinite;
	will-change: transform;
}

.copy .scroll-infinity__list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
}

.copy .scroll-infinity__list img {
	display: block;
	height: auto;
	width: auto;
}

@keyframes infinity-scroll-right {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.photo.scroll-infinity__wrap {
		animation: none;
	}
}

@media screen and (max-width: 960px) {
	#img {
		margin-top: 0;
	}
}


/* ****** event ****** */
#event {
	background-color: var(--main-color);
}

#event .flex {
	align-items: start;
}

#event .flyer {
	width: 40rem;
}

#event .content {
	width: calc(100% - 40rem);
	padding-left: 3rem;
}

#event .type {
	display: inline-block;
	font-size: 1.6rem;
	margin-bottom: 1rem;
	padding: 0.5rem 2rem;
	border: 1px solid var(--text-color);
	background: #ffffff;
}

#event h3 {
	color: var(--accent-color);
	font-size: var(--font-sizeh2);
	margin: 0;
}

#event h3 .sub-title {
	font-size: var(--font-sizeh3);
}

#event h4 {
	color: var(--accent-color);
	font-size: var(--font-sizeh4);
	margin: 0;
}

#event .link-btn a {
	margin: 0 auto;
}

@media screen and (max-width: 960px) {

	#event .flyer,
	#event .content {
		width: 100%;
	}

	#event .content {
		margin-top: 5rem;
		padding: 0;
	}
}



/* ****** spot ****** */
#spot {
	background-color: var(--main-color);
}

#spot .wrapper {
	padding-top: 20rem;
	padding-bottom: 20rem;
}

#spot a {
	position: relative;
}

#spot a:hover img {
	transform: scale(1.1);
}

#spot .photo {
	width: 70%;
	height: 40%;
	overflow: hidden;
}

#spot .photo img {
	width: 100%;
	height: auto;
	transition: transform .3s ease;
}

#spot .title {
	position: absolute;
	right: 0;
	width: 40%;
	padding: 5rem 3rem;
	background: var(--main-color);
	border: solid 5px var(--text-color);
}

#spot h3 {
	margin: 0;
}

#spot .title::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	right: 0.75rem;
	border: solid 2px var(--text-color);
	z-index: 0;
}

#map {
	background-color: var(--main-color);
}

@media screen and (max-width: 960px) {
	#spot .wrapper {
		padding-top: 20rem;
		padding-bottom: 10rem;
	}

	#spot .photo {
		width: 100%;
	}

	#spot .title {
		position: relative;
		width: 100%;
	}
}



/* ****** parallax ****** */
#parallax {
	position: relative;
}

#parallax::before {
	content: "";
	position: absolute;
	bottom: 15rem;
	left: 0;
	width: min(40vw, 35rem);
	height: min(50vw, 40rem);
	background-image: url(../images/decoration7.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index: 4;
}

#parallax::after {
	content: "";
	position: absolute;
	bottom: -10rem;
	right: 0;
	width: min(40vw, 40rem);
	height: min(50vw, 40rem);
	background-image: url(../images/decoration8.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
	z-index: 4;
}

#parallax .grid {
	background: #33333390;
	mix-blend-mode: normal;
	padding: 45rem 0;
	z-index: 2;
}

#parallax .grid::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: min(50vw, 70rem);
	height: min(50vw, 40rem);
	background-image: url(../images/decoration9.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	opacity: 0.5;
	z-index: -1;
}

#parallax .grid::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(50vw, 70rem);
	height: min(50vh, 70rem);
	background-image: url(../images/decoration10.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
	opacity: 0.8;
	z-index: -1;
}

@media screen and (max-width: 768px) {
	#parallax .grid {
		padding: 30rem 0;
	}
}



/* ****** tour ****** */
#tour {
	background-color: var(--main-color);
	position: relative;
	padding-bottom: 3rem;
}

#tour::before {
	content: "";
	position: absolute;
	top: -14.75vw;
	left: 0;
	width: 50vw;
	height: 15vw;
	background-image: url(../images/parallax.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 3;
}

#tour::after {
	content: "";
	position: absolute;
	top: -14.75vw;
	right: 0;
	width: 50vw;
	height: 15vw;
	background-image: url(../images/parallax.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left top;
	z-index: 3;
	transform: scale(-1, 1);
}

#tour .flex {
	align-items: start;
}

#tour .content h3 {
	color: var(--accent-color);
	width: 30rem;
	margin: 0;
	line-height: 1.5;
}

#tour .content .text-box {
	width: calc(100% - 30rem);
	padding-left: 3rem;
}

#tour .content h4 {
	color: var(--accent-color);
	font-size: var(--font-sizeh4);
	margin: 0;
}

#tour .thumbnail li {
	width: calc(100% / 2 - 1.5rem);
}

#tour .link-btn a {
	margin: 0 auto;
}

.tour.corner-blr {
	width: calc(100% - 10rem);
	height: 7rem;
	background-color: var(--main-color);
	margin: -0.25rem auto 0;
	position: relative;
	z-index: 1;
}

.tour.corner-blr::before,
.tour.corner-blr::after {
	content: "";
	position: absolute;
	width: 6rem;
	height: 7rem;
	background-image: url(../images/concept_decoration.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.tour.corner-blr::before {
	bottom: 0;
	transform: scale(1, 1);
	left: -5rem;
}

.tour.corner-blr::after {
	bottom: 0;
	transform: scale(-1, 1);
	right: -5rem;
}

@media screen and (max-width: 960px) {

	#tour .content h3,
	#tour .content .text-box {
		width: 100%;
		padding: 0;
	}

	#tour .content .text-box {
		margin-top: 1rem;
	}

	#tour .thumbnail li {
		width: 100%;
		margin-bottom: 1rem;
	}
}



/* ****** contact ****** */
#contact {
	position: relative;
	color: var(--main-color);
	background: #00000099;
	margin-top: -6rem;
}

#contact .grid {
	background: #00000099;
	mix-blend-mode: normal;
	padding: 20rem 0 5rem;
}

#contact .line .sub-title {
	color: var(--point-color);
}

#contact .text-box a {
	color: var(--main-color);
}

#link-banner ul li {
	width: calc(100% / 4 - 3rem);
}

@media screen and (max-width: 768px) {
	#link-banner ul li {
		width: calc(100% / 2 - 1rem);
	}
}


/* ****** footer ****** */
footer .logo {
	max-width: 52rem;
	margin: 0 auto;
}

.f-nav a {
	color: var(--main-color);
}

.f-nav .dice {
	color: var(--point-color);
}

footer h2 img {
	height: calc(var(--font-size-img) / 1.5);
}

footer .sns {
	justify-content: center;
}

footer .sns li {
	width: 9rem;
}

footer .sns a {
	margin: 1rem;
	padding: 1rem;
}

.copyright {
	text-align: center;
}

@media screen and (max-width: 768px) {
	.f-nav ul li {
		width: 100%;
		text-align: center;
		margin-bottom: 2rem;
	}
}




/* ******************
｜　lower
****************** */
#spotpage header.pc {
	border-radius: 0;
	background: rgba(255, 255, 255, 0);
	backdrop-filter: blur(5px);
	position: -webkit-sticky;
	z-index: 100;
}

#spotpage .mv::before {
	content: "";
	position: absolute;
	bottom: 9rem;
	left: 0;
	width: 50vw;
	height: 15vw;
	background-image: url(../images/parallax.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index: 1;
}

#spotpage .mv::after {
	content: "";
	position: absolute;
	bottom: 9rem;
	right: 0;
	width: 50vw;
	height: 15vw;
	background-image: url(../images/parallax.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index: 1;
	transform: scale(-1, 1);
}

#spotpage #title {
	width: 100%;
	max-width: 80rem;
	margin: -13rem auto;
	padding: 7rem 3rem;
	background: var(--main-color);
	border: solid 5px var(--text-color);
	position: relative;
	z-index: 2;
}

#spotpage #title::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	right: 0.75rem;
	border: solid 2px var(--text-color);
	z-index: 0;
}

#spotpage #title h2 {
	letter-spacing: 5px;
}

#spotpage #title .sub-title {
	font-size: var(--font-sizeh4);
	letter-spacing: 1.5px;
}

#spotpage #introduction {
	background-color: var(--main-color);
}

#spotpage #introduction .text-box p {
	font-size: var(--font-sizeh4);
	line-height: 2.15;
}

#spot-list {
	background-color: var(--main-color);
}

#spot-list ul li {
	margin-bottom: 3rem;
}

#spot-list ul li:last-child {
	margin-bottom: 0;
}

#spot-list ul li .text span {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: .75rem;
}

#spot-list ul li .text {
	display: inline-grid;
}

#spot-list ul li .text::after {
	content: "";
	flex: 1 1 auto;
	min-width: 0;
	height: 1rem;
	margin-top: 5rem;
	background-image: url('../images/h_line.svg');
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#spot-list ul li .text span {
	margin-bottom: 3rem;
}

#spot-list ul li [class^="text"] span::before {
	color: var(--accent-color);
	font-size: var(--font-sizeh3);
}

#spot-list ul li .item01 span::before {
	content: "◆　01";
}

#spot-list ul li .item02 span::before {
	content: "◆　02";
}

#spot-list ul li .item03 span::before {
	content: "◆　03";
}

#spot-list ul li .item04 span::before {
	content: "◆　04";
}

#spot-list ul li .item05 span::before {
	content: "◆　05";
}

#spot-list ul li .item06 span::before {
	content: "◆　06";
}

#spot-list ul li .item07 span::before {
	content: "◆　07";
}

#spot-list ul li .item08 span::before {
	content: "◆　08";
}

#spot-list ul li .item09 span::before {
	content: "◆　09";
}

#spot-list ul li .item10 span::before {
	content: "◆　10";
}

#spot-list ul li .item11 span::before {
	content: "◆　11";
}

#spot-list ul li .item12 span::before {
	content: "◆　12";
}

#spot-list ul li .item13 span::before {
	content: "◆　13";
}

#spot-list ul li .item14 span::before {
	content: "◆　14";
}

#spot-list ul li .item15 span::before {
	content: "◆　15";
}

#spot-list ul li .item16 span::before {
	content: "◆　16";
}

#spot-list ul li .item17 span::before {
	content: "◆　17";
}

#spot-list ul li .item18 span::before {
	content: "◆　18";
}

#spot-list ul li .item19 span::before {
	content: "◆　19";
}

#spot-list ul li .item20 span::before {
	content: "◆　20";
}

#spot-list ul li .text span::after {
	content: "";
	flex: 1 1 auto;
	min-width: 0;
	height: 1rem;
	margin-left: .75rem;
	background-image: url('../images/h_line.svg');
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#spot-list .img {
	width: 40%;
}

#spot-list .text {
	width: calc(100% - 40% - 2rem);
}

@media screen and (max-width: 1080px) {
	#spotpage .mv::before {
		bottom: 3rem;
	}

	#spotpage .mv::after {
		bottom: 3rem;
	}
}

@media screen and (max-width: 768px) {
	#spot-list ul li {
		margin-bottom: 12rem;
	}

	#spot-list ul li .text::after {
		margin-top: 3rem;
	}

	#spot-list .img {
		width: 100%;
	}

	#spot-list .text {
		margin-top: 3rem;
		width: 100%;
	}

	#spot-list .text h3 {
		margin-top: 0;
	}

	#spotpage #title {
		margin: 0 auto;
	}

	#spotpage .mv::before,
	#spotpage .mv::after {
		content: none;
	}

	#spotpage #introduction .pt20 {
		padding-top: var(--space5);
	}

}




/* ******************
｜　yamaguchi
****************** */
#yamaguchi-mv {
	background-image: url('../images/spot01/spot_title.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 45rem 0;
	margin-top: -15rem;
}

@media screen and (max-width: 768px) {
	#yamaguchi-mv {
		padding: 15rem 0;
		margin-top: 0rem;
	}
}




/* ******************
｜　hagi
****************** */
#hagi-mv {
	background-image: url('../images/spot02/spot_title.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 45rem 0;
	margin-top: -15rem;
}

@media screen and (max-width: 768px) {
	#hagi-mv {
		padding: 15rem 0;
		margin-top: 0rem;
	}
}




/* ******************
｜　shimonoseki
****************** */
#shimonoseki-mv {
	background-image: url('../images/spot03/spot_title.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 45rem 0;
	margin-top: -15rem;
}

@media screen and (max-width: 768px) {
	#shimonoseki-mv {
		padding: 15rem 0;
		margin-top: 0rem;
	}
}