@charset "utf-8";
body{
	padding-top: 0 !important;
}
#pageHome {
	/* scroll-margin-top: 0; */
	.kvSec{
        height: 100vh;
        width: 100%;
		color: var(--cc-white-A);

		position: relative;
        z-index: 1;

		clip-path: inset(0 0 0 0);
		will-change: clip-path;

		@media (width <= 767px) {/* SP */
			height: calc(100svh - 31.0667vw);
		}

		.bgImg{
			position: fixed;
			z-index: -1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			figure{
				width: 100%;
				height: 100%;
			}
			& > div{
				height: 100%;
			}
			& picture{
				height: 100%;
			}
			img{
				max-width: none;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.cnt{
			position: relative;
			margin: 0 auto;
			height: 100%;

			@media (width > 767px) {/* PC */
				width: 152rem;
			}
		}
		.date{
			font-family: var(--ff-avenir);
			position: absolute;
			display: flex;
			align-items: center;
			line-height: 1;
			font-size: 1.6rem;


			@media (width > 767px) {/* PC */
				top: 11.5rem;
				right: 4rem;
			}
			@media (width <= 767px) {/* SP */
				top: 10.5rem;
				right: 1.5rem;
			}
			.clm{
				text-align: center;
			}
			.txt1{
				padding-left: .16em;
				font-weight: 500;
				letter-spacing: .35em;
				margin-bottom: .2rem;
			}
			.txt2{
				font-weight: 500;
				letter-spacing: .1em;
			}
			.txt3{
				font-weight: 400;
				letter-spacing: .02em;
				font-size: 4.8rem;
				padding-left: .3rem;
				padding-right: .3rem;
			}
			.txt4{
				writing-mode: vertical-rl;
				font-weight: 700;
				letter-spacing: .12em;
				font-size: 1.3rem;
			}
		}
		.txtCopy{
			text-align: center;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			white-space: nowrap;

			font-family: var(--ff-tsukuaoldmin-pr6n);
			line-height: 1.6;
			font-weight: 500;
			font-size: 2.8rem;

			.-ls1{
				letter-spacing: .42rem;
			}
			.-ls2{
				letter-spacing: .33rem;
			}

			@media (width <= 767px) {/* SP */
				font-size: 2.4rem;
			}
		}
		.txtCredit{
			position: absolute;
			font-family: var(--ff-avenir);
			right: 1.2rem;
			bottom: 1.2rem;
			line-height: 1;
			font-size: 1.6rem;
			@media (width <= 767px) {/* SP */
				line-height: 1.3;
				font-size: 1.4rem;
				text-align: right;
			}
		}
		.scrlBlock{
			color: #fff;
			position: absolute;
			display: flex;
			bottom: 0;

			left:4rem;

			gap: .8rem;
			height: 14.3rem;
			@media (width <= 767px) {/* SP */
				left: 2rem;
			}
			.line{
				background: #fff;
				width: 1px;
				height: 100%;
			}
			.txt{
				writing-mode: vertical-rl;
				font-family: var(--ff-garamond-pro);
				line-height: 1;
				letter-spacing: .15em;
				font-size: 1.6rem;
			}
		}
	}

	.conceptSec{
		position: relative;
		height: 100vh;
        width: 100%;
		color: var(--cc-white-A);
		clip-path: inset(0 0 0 0);
		will-change: clip-path;
		@media (width > 767px) {/* PC */
			min-height: 90rem;
		}
		@media (width <= 767px) {/* SP */
			min-height: 84.4rem;
		}

		.bgImg{
			/* position: absolute; */
			z-index: -1;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			figure{
				width: 100%;
				height: 100%;
			}
			& > div{
				height: 100%;
			}
			& picture{
				height: 100%;
			}
			img{
				max-width: none;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.enTxt{
			position: absolute;
			writing-mode: vertical-rl;
			font-family: var(--ff-garamond-pro);
			line-height: 1;
			letter-spacing: .15em;
			left: 3.2rem;
			top: 3.2rem;
			font-size: 2rem;
			font-weight: 500;
		}
		.cnt{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: var(--ff-tsukuaoldmin-pr6n);
			gap: 10rem;
			padding-top: 12.5rem;
			@media (width <= 767px) {/* SP */
				padding-top: 9.5rem;
				padding-bottom: 9.5rem;
				gap: 5rem;
			}
		}
		.txtCopy{
			text-align: center;
			letter-spacing: .13em;
			line-height: 1.6;
			font-size: 2.8rem;
			@media (width <= 767px) {/* SP */
				font-size: 2.4rem;
			}
		}
		.txtLead{
			line-height: 1.6;
			font-size: 1.6rem;
			@media (width <= 767px) {/* SP */
				letter-spacing: .15em;
				font-size: 1.5rem;
				line-height: 2;
				width: 30.4rem;
			}
		}
		.btnBlock{
			@media (width <= 767px) {/* SP */
				padding-top: 1rem;
			}
			a {
				&:before {
					height: 0;
				}
			}
		}
		.txtCredit{
			position: absolute;
			font-family: var(--ff-avenir);
			right: 1.2rem;
			bottom: 1.2rem;
			line-height: 1;
			font-size: 1.6rem;

		}
	}

	.cntWrp{
		background: #fff;
		padding-bottom: 20rem;
		@media (width <= 767px) {/* SP */
			padding-bottom: 10rem;
		}
	}
	.movieSec{
		position: relative;
		background: var(--cc-white-A);
		overflow: hidden;
		padding: 16rem 0 12rem;
		@media (width <= 767px) {/* SP */
			padding: 8rem 0 10rem;
		}
		.c-ttl{
			margin-bottom: 8rem;
			@media (width <= 767px) {/* SP */
				margin-bottom: 4.8rem;
			}
		}
		.topBlock{
			background: var(--cc-back-gray);
			padding: 8.8rem 0 11rem;
			@media (width <= 767px) {/* SP */
				padding: 6.4rem 0;
			}
			.ttl{
				margin: 0 auto 6.5rem;
				width: 31.8rem;
				@media (width <= 767px) {/* SP */
					width: 23.3rem;
					margin-bottom: 4.8rem;
				}
				img{
					width: 100%;
				}
			}
			.list{
				display: flex;
				justify-content: center;
				gap: 6.4rem;
				@media (width <= 767px) {/* SP */
					flex-direction: column;
					width: 33rem;
					margin: 0 auto;
					gap: 3.4rem;
				}
				.item{
					width: 56.8rem;
					@media (width <= 767px) {/* SP */
						width:100%;
					}
					.item__img{
						position: relative;
						img{
							width: 100%;
						}
						.csTxt{
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%,-50%);
							line-height: 1;
							color: var(--cc-red);
							letter-spacing: .05em;
							border-bottom: .15rem dashed var(--cc-red);
							font-size: 2.2rem;
							padding-bottom: 1rem;
							@media (width <= 767px) {/* SP */
								font-size: 1.6rem;
							}
						}
					}
					.item__txt{
						text-align: center;
						letter-spacing: .1em;
						font-size: 1.8rem;
						margin-top: 1.2rem;
						@media (width <= 767px) {/* SP */
							font-size: 1.6rem;
						}
					}
				}
			}
		}
		.slideBlock{
			padding-top: 12rem;
			@media (width <= 767px) {/* SP */
				padding-top: 6.4rem;
			}
			.in{
				margin: 0 auto;
				width: 120rem;
				@media (width <= 767px) {/* SP */
					width: 33rem;
				}
			}
			.head{
				display: flex;
				justify-content: space-between;
				margin-bottom: 4.8rem;
				@media (width <= 767px) {/* SP */
					flex-direction: column;
					gap: 4rem;
					margin-bottom: 2.5rem;
				}
				.ttl{
					font-family: var(--ff-zen);
					line-height: 1;
					display: flex;
					align-items: center;

					letter-spacing: .1em;
					font-size: 2.4rem;
					gap: 1.2rem;
					@media (width <= 767px) {/* SP */
						flex-direction: column;
						align-items: flex-start;
						gap: 2.5rem;
					}
				}
				.slideNav{
					display: flex;
					align-items: center;
					position: relative;
					color: var(--cc-red);
					font-family: var(--ff-avenir);
					line-height: 1;
					gap: 2.4rem;
					@media (width <= 767px) {/* SP */
						margin-left: auto;
					}
					.swiper-button-prev, .swiper-button-next{
						color: var(--cc-red);
						position: relative;
						display: flex;
						margin: 0;
						width: auto;
						height: 2rem;
						top: 0;
						gap: .7rem;
						font-size: 1.6rem;
						&:after{
							content: '';
							background: url(../images/common/ico-btn-arw-2.svg) center center /cover no-repeat;
							width: 2rem;
							height: 2rem;
						}
					}
					.swiper-button-prev{
						left: 0;
						flex-direction: row-reverse;
						&:after{
							transform: rotate(180deg);
						}
					}
					.swiper-button-next{
						right: 0;
					}
				}
			}
			.movieSwiper{
				margin: 0;
				overflow: visible;
				position: relative;
				/* width: 44.1rem; */
				width: 176.4rem;
				@media (width <= 767px) {/* SP */
					/* width: 33rem; */
					width: 132.0rem;
				}
				.overLay{
					position: absolute;
					height: 100%;
					background: #fff;
					top: 0;
                    left: 0;
                    z-index: 5;
                    width: 100vw;
                    transform: translateX(-100%);
				}
				.swiper-slide{
					width: 44.1rem;
					@media (width <= 767px) {/* SP */
						width: 33rem;
					}
				}
			}
			.item{
				.item__img{
					position: relative;
					margin-bottom: 2.0rem;
					.icoPlay{
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						background: url(../images/home/movie-ico-play.svg) center center /cover no-repeat;
						width: 6.4rem;
						height: 6.4rem;
					}
					img{
						width: 100%;
					}
				}
				.c-ytTh__overlay{
					&:after{
						width: 6.4rem;
						height: 6.4rem;
					}
				}
				.item__txt{
					letter-spacing: .1em;
					font-size: 1.6rem;
					padding-left: 1rem;
					margin-top: 2rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.5rem;
                    	padding-left: .7rem;
					}
				}
			}
		}
		.btnBlock{
			text-align: right;
			margin: 6.5rem auto 0;
			width: 120rem;
			@media (width <= 767px) {/* SP */
				width: 100%;
				text-align: center;
				margin-top: 4.5rem;
			}
		}
	}

	.newsSec{
		background: var(--cc-back-gray);
		padding: 12rem 0 16rem;
		@media (width <= 767px) {/* SP */
			padding: 8rem 0 10rem;
		}
		.c-btn{
			background: transparent;
		}
		.in{
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			width: 120rem;
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				width: 33rem;
			}
		}
		.head{
			@media (width > 767px) {/* PC */
				width: 30.4rem;
			}
			.txtLead{
				line-height: 2;
                letter-spacing: .1em;
				margin-top: 6.4rem;
				@media (width <= 767px) {/* SP */
					letter-spacing: .15em;
					font-size: 1.6rem;
					margin-top: 5rem
				}
			}
		}
		.list{
			display: flex;
			flex-direction: column;
			width: 72.0rem;
			gap: 2rem;
			padding-top: 2rem;
			@media (width <= 767px) {/* SP */
				background: url(../images/home/news-line.svg) left top repeat-x;
				width: 33rem;
				margin-top: 5.5rem;
				padding-top: 3.5rem;
				gap: 3.3rem;

			}
			li{
				background: url(../images/home/news-line.svg) left bottom repeat-x;
				padding-bottom: 2rem;
				@media (width > 767px) {/* PC */
					&:last-child{
						background: none;
						padding-bottom: 0;
					}
				}
				@media (width <= 767px) {/* SP */
					padding-bottom: 3rem;
				}
			}
			.th{
				display: flex;
				justify-content: space-between;
				align-items: center;

				transition: opacity .5s;
				&:hover{
					opacity: .6;
				}
				.th__img{
					width: 20rem;
					@media (width <= 767px) {/* SP */
						width:15.2rem;
					}
					img{
						width: 100%;
					}
				}
				.th__txtarea{
					width: 48rem;
					@media (width <= 767px) {/* SP */
						width:15.4rem;
					}
				}
				.th__date{
					font-family: var(--ff-avenir);
					color: var(--cc-red);
					line-height: 1;
					letter-spacing: .05em;
					font-size: 1.5rem;
					margin-bottom: 1.6rem;
				}
				.th__ttl{
					font-weight: 500;
					color: var(--cc-gray-text);

                    letter-spacing: .1em;
					line-height: 1.8;
					font-size: 1.6rem;
					@media (width <= 767px) {/* SP */
						overflow: hidden;
						width: 15.4rem;
						height: 7.5rem;
						font-size: 1.5rem;
						line-height: 1.6;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;

					}
				}
			}
		}

		.btnBlock{
			margin-top: 5.4rem;
			@media (width <= 767px) {/* SP */
				text-align: center;
			}
		}
	}

	.mapSec{
		position: relative;
		background: var(--cc-red);

		width: 100%;
		@media (width > 767px) {/* PC */
			overflow: hidden !important;
			cursor: grab;
			height: 90rem;
		}
		&[data-season="summer"]{
			.-summerCnt{
				display: block;
			}
			[data-seasonBtn="summer"]{
				pointer-events: none;
				text-decoration-line: underline;
				opacity: 1 !important;
			}
		}
		&[data-season="winter"]{
			.-winterCnt{
				display: block;
			}
			[data-seasonBtn="winter"]{
				pointer-events: none;
				text-decoration-line: underline;
				opacity: 1 !important;
			}
		}
		.anchr{
			position: absolute;
			top: 0;
			width: 100%;
			/* top: -13.6rem; */
			@media (width <= 767px) {/* SP */
				/* top: -11.4rem; */
			}
		}
		.cnt{
			@media (width > 767px){
				display: flex;
				flex-wrap: nowrap;        /* 改行しない */
				align-items: flex-start;  /* ストレッチを無効（上揃え等） */
				overflow-x: auto;

				height: 100%;
				width: 740rem;
			}
		}
		.head{
			position: relative;
			background: var(--cc-red);
			color: #fff;
			@media (width > 767px){
				height: 100%;
				width: 50rem;
			}
			@media (width <= 767px) {/* SP */
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 5.6rem 0 3.5rem;
			}
			.ttl{
				font-weight: 400;
				font-family: var(--ff-zen);
				line-height: 1.17;
				font-size: 4rem;
				@media (width > 767px) {/* PC */
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: 20.5rem;
				}
				@media (width <= 767px) {/* SP */
					position: relative;
					letter-spacing: .1em;
					font-size: 2.8rem;
					margin: 1.3rem 0 3.2rem;
				}
				&:before,
				&:after{
					content: '';
					position: absolute;
					width: 2rem;
					height: 2rem;
					background: center center /100% auto no-repeat;
				}
				&:before{
					background-image: url(../images/home/map-ico-leaf-2.svg);
					left: -2.8rem;
					bottom: -1rem;
					@media (width <= 767px) {/* SP */
							display: none;
					}
				}
				&:after{
					background-image: url(../images/home/map-ico-leaf.svg);
					right: -2.8rem;
					top: -1rem;
				}
			}
			.txtEn{
				line-height: 1;
				font-family: var(--ff-garamond-pro);
				letter-spacing: .15em;
				font-size: 1.5rem;
				@media (width > 767px){
					writing-mode: vertical-rl;
					position: absolute;
					font-size: 2rem;
					left: 2.4rem;
					top: 2.4rem;
				}
				&.-rt{
					left: 0;
					right: 2.4rem;
				}
			}
			.txtBottom{

				@media (width > 767px) {/* PC */
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 8rem;
				}
				img{
					@media (width <= 767px) {/* SP */
						width: 17.8rem;
					}
				}

			}
			.btns{
				line-height: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				gap:1rem;
				color: #fff;
				font-size: 2rem;
				@media (width > 767px) {/* PC */
					position: absolute;
					width: 100%;
					bottom: 15.2rem;
				}
				@media (width <= 767px) {/* SP */
					font-size: 1.8rem;
					margin-bottom: 2.5rem;
				}
				button{
					line-height: 1;
					opacity: .7;
					color: #fff;
					font-size: 2rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.8rem;
					}
					&.-cr{
						text-decoration-line: underline;
						opacity: 1;
					}
				}
			}
		}
		.lineBlock{

			@media (width > 767px) {/* PC */
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				bottom: 3.4rem;
				z-index: 1;
			}
			@media (width <= 767px) {/* SP */
				z-index: 10;
				width: 100%;
				position: sticky;
				overflow: hidden;
				top: 0;
				padding-top: 12rem;
				/* padding-top: 2rem; */
				height: 100vh;
				box-sizing: border-box;
				transition: padding-top .5s;
			}
			.lineBlock__in{
				position: relative;
				@media (width > 767px) {/* PC */
					width: 614.4rem;
				}
				@media (width <= 767px) {/* SP */
					width:182.4rem;
					margin-left: 1rem;
				}
			}

			.leafIconL,.leafIconR{
				position: absolute;
				width: 2.8rem;
				top: -2.6rem;
				img{
					width: 100%;
				}
				@media (width <= 767px) {/* SP */
					display: none;
				}
			}
			.leafIconL{
				left: 0;
			}
			.leafIconR{
				right: 0;
			}

			.lineWrp{
				position: relative;
				height: 2px;
				background: url(../images/home/map-line.svg) left top repeat-x;
				@media (width <= 767px) {/* SP */
					position: absolute;
					top: 50%;
					width: 100%;
					background-size: 2rem .2rem;
				}
				.lineL,.lineR{
					position: absolute;
					top: 0;
					height: 2px;
					width: 100%;
				}
				.lineL{
					clip-path: inset(0 100% 0 0);
					left: 0;
					background: url(../images/home/map-line-red.svg) left top repeat-x;
					@media (width <= 767px) {/* SP */
						background-size: 2rem .2rem;
					}
				}
				.lineR{
					clip-path: inset(0 0 0 100%);
					right: 0;
					background: url(../images/home/map-line-red.svg) left top repeat-x;
					@media (width <= 767px) {/* SP */
						background-size: 2rem .2rem;
					}
				}
			}
			&.-LtoR{
				.lineR{
					opacity: 0;
				}
				.lineL{
					animation: mapLine 150s linear infinite;
					@media (width <= 767px) {/* SP */
						animation-duration: 50s;
					}
				}
			}
			&.-RtoL{
				.lineL{
					opacity: 0;
				}
				.lineR{
					animation: mapLineRev 150s linear infinite;
					@media (width <= 767px) {/* SP */
						animation-duration: 50s;
					}
				}
			}

			.listSt{
				display: flex;
				justify-content: space-between;
				margin-top: 1.6rem;
				@media (width <= 767px) {/* SP */
					position: relative;
					/* justify-content: flex-start; */
					gap: 2.8rem;
					margin-top: 0;
					white-space: nowrap;
				}
				li{
					border: 1px solid var(--red, #FF000A);
					background: #FFF;
					display: inline-flex;
					color: var(--cc-red);
					line-height: 1;
					border-radius: 3rem;

					padding: .4rem 1.2rem .4rem .8rem;
					align-items: center;
					gap: .2rem;
					letter-spacing: .05em;
					font-size: 1.6rem;
					@media (width <= 767px) {/* SP */
						padding: .4rem .9rem .4rem .5rem;
						font-size: 1.3rem;
					}
					&:before{
						content: '';
						background: url(../images/home/map-icon-train.svg)center center /100% auto no-repeat;
						display: inline-block;
						width: 2rem;
						height: 2rem;
						@media (width <= 767px) {/* SP */
							width: 1.8rem;
							height: 1.8rem;
						}
					}
				}
			}
		}

		.seasonCntWrp{
			position: relative;
			.js-mapScrlTopSp{
				position: absolute;
				left: 0;
				width: 100%;
				top: 0;
				height: 1px;
				/* background: green; */
			}
			.js-mapScrlBottomSp{
				position: absolute;
				left: 0;
				width: 100%;
				bottom: 100vh;
				height: 1px;
				/* background: red; */
			}
		}
		.seasonCnt{
			display: none;
			@media (width <= 767px) {/* SP */
				margin-top: -100vh;
			}
			.seasonCnt__in{

				@media (width > 767px) {/* PC */
					height: 100%;
					position: relative;
					display: flex;
  					flex-wrap: nowrap;
				}
			}
		}
		.imgBlock{
			position: relative;

			@media (width > 767px) {/* PC */
				margin-left: -1px;
				width: 160rem;
			}
			.imgBg{
				img{
					width: 100%;
					height: 84.4rem;
					object-fit: cover;
				}
			}
			.imgItem{
				position: absolute;
				img{
					width: 100%;
				}
			}
			.txtBlock{
				color: #FFF;
				position: absolute;
				@media (width <= 767px) {/* SP */
					width: 33rem;
				}
				.ttl{
					font-family: var(--ff-zen);
					font-weight: 500;
					line-height: 1.5;
					letter-spacing: .05em;
					font-size: 2rem;
				}
				.txt{
					line-height: 1.8;
					letter-spacing: .1em;
					font-size: 1.6rem;
					margin-top: 2.4rem;
				}
			}
			&.-block1{
				.txtBlock{
					top: 8rem;
					left: 19rem;
					@media (width <= 767px) {/* SP */
						left: 3rem;
						top: 20rem;
					}
				}
				.img-1{
					left: 19rem;
					top: 34rem;
					width: 62.4rem;
					@media (width <= 767px) {/* SP */
						width: 33rem;
						left: 3rem;
						top: 41.5rem;
					}
				}
				.img-2{
					left: 92rem;
					top: 8rem;
					width: 32.8rem;
					@media (width <= 767px) {/* SP */
						width: 14.4rem;
						left: auto;
						right: 5rem;
						top: 65.7rem;
					}
				}
				.img-3{
					left: 102rem;
					top: 42rem;
					width: 40rem;
					@media (width <= 767px) {/* SP */
						width: 18.4rem;
						left: 5rem;
						top: 78.5rem;
						z-index: 2;
					}
				}
			}
			&.-block2{
				.txtBlock{
					left: 12rem;
					top: 47.7rem;
					@media (width <= 767px) {/* SP */
						left: 3rem;
						top: 11.2rem;
					}
				}
				.img-1{
					left: 12rem;
					top: 10.4rem;
					width: 31.2rem;
					@media (width <= 767px) {/* SP */
						width: 24rem;
						left:7.5rem;
						top: 32.5rem;
					}
				}
				.img-2{
					left:  102.5rem;
					top: 0;
					width: 24.4rem;
					@media (width <= 767px) {/* SP */
						width: 12.8rem;
						left: auto;
						top: 51.5rem;
						right: 3rem;
					}
				}
				.img-3{
					left: 80rem;
					top: 30rem;
					width:69.8rem;
					@media (width <= 767px) {/* SP */
						top: auto;
						left: 0;
						bottom: 1rem;
						width: 30rem;
					}
				}
			}
			&.-block3{
				.txtBlock{
					top: 8rem;
					left: 8rem;
					@media (width <= 767px) {/* SP */
						left: 3rem;
						top: 4.7rem;
					}
				}
				.img-1{
					left: 8rem;
					top: 49.4rem;
					width: 29.6rem;
					@media (width <= 767px) {/* SP */
						width: 14.4rem;
						left: auto;
						right: 0;
						top: 24rem;
					}
				}
				.img-2{
					left: 55rem;
					top: 25.5rem;
					width: 49.6rem;
					@media (width <= 767px) {/* SP */
						width: 33rem;
						left: 3rem;
                        top: 38rem;
					}
				}
				.img-3{
					left: 115rem;
					top: 8rem;
					width: 28.8rem;
					@media (width <= 767px) {/* SP */
						width: 16rem;
                        left: 0;
                        bottom: 7rem;
                        top: auto;
					}
				}
				.img-4{
					left: 123rem;
					top: 52.4rem;
					width: 28.8rem;
					@media (width <= 767px) {/* SP */
						width: 18.2rem;
						left: auto;
						top: auto;
						bottom: 0;
						right: 0;
					}
				}
			}
			&.-block4{
				.txtBlock{
					top: 10.4rem;
					left: 114rem;
					@media (width <= 767px) {/* SP */
						left: 3rem;
						top: 4.9rem;
					}
				}
				.img-1{
					left: 8rem;
					top: 8rem;
					width: 46.4rem;
					@media (width <= 767px) {/* SP */
						width: 22.4rem;
						left: 3rem;
						top: 26rem;
					}
				}
				.img-2{
					left: 24rem;
					top: 49.4rem;
					width: 36.7rem;
					@media (width <= 767px) {/* SP */
						left: auto;
                        width: 13rem;
                        top: 49rem;
                        right: 0;
					}
				}
				.img-3{
					left: 73rem;
					top: 19rem;
					width: 25.8rem;
					@media (width <= 767px) {/* SP */
						width: 15.8rem;
                        left: 0;
                        right: 0;
                        top: 46rem;
					}
				}
				.img-4{
					left: 114rem;
					top: 44.5rem;
					width: 31.2rem;
					@media (width <= 767px) {/* SP */
						left: auto;
						width: 17.5rem;
						right: 1.5rem;
						top: auto;
						bottom: 8.4rem;
					}
				}
			}
		}

		.mapOverWrp{
			pointer-events: none;
			position: absolute;
			/* backdrop-filter: blur(1.5rem); */
			background: rgba(25,12,12,.5);
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			opacity: 1;
			transition: opacity 1s;
			&.-hide{
				opacity: 0;
			}
			.cnt{
				display: flex;
				align-items: center;
				justify-content: center;
				background: var(--cc-red);
				position: absolute;
				transform: translate(-50%,-50%);
				left:50%;
				top:50%;
				width: 28rem;
				height: 10rem;
				gap: 1rem;


				.txt{
					color: #fff;
					line-height: 1.6;
					letter-spacing: .1em;
					font-size: 1.6rem;
				}
				.frame{
					position: relative;
					.frame__img{
						width: 10.6rem;
					}
					.frame__cursor{
						position: absolute;
						top: 50%;
						left: 6.4rem;
						width: 1.4rem;
						animation: map-cursor 2s linear infinite;
					}
				}
			}
		}

	}

	.eventSec{
		padding: 16rem 0;
		@media (width <= 767px) {/* SP */
			padding: 8rem 0 9.5rem;
		}
		.in{
			margin: 0 auto;
			width: 120rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
			}
		}
		.head{
			display: flex;
			justify-content: space-between;
			margin-bottom: 6rem;
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				margin-bottom: 3rem;
			}
			.select{
				width:57.5rem;
				padding-top: 7.6rem;
				@media (width <= 767px) {/* SP */
					width:100%;
					padding-top: 5rem;
				}
				ul{
					border:solid 1px var(--cc-red);
					display: flex;
					margin: 0 auto;
					overflow: hidden;
					border-radius: 6rem;
					line-height: 2;

					letter-spacing: 0;
					font-size: 1.6rem;
					@media (width > 767px) {/* PC */
						width: 50rem;
					}
					@media (width <= 767px) {/* SP */
						line-height: 1.8;
					}
					li{
						width: 25%;
						border-right: solid 1px var(--cc-red);
						a{
							cursor: pointer;
							display: flex;
							align-items: center;
							justify-content: center;
							color: var(--cc-red);
							&.-cr{
								pointer-events: none;
								background: var(--cc-red);
								color: #fff;
							}
						}
					}
				}
			}
		}

		.cnt{
			.block{
				display: none;
				&:first-child{
					display: block;
				}
				&.-view{
					.block__in{
						opacity: 1;
					}
				}
				.block__in{
					transition: opacity 1s;
					opacity: 0;

					@media (width > 767px){
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
					}
				}
				.swiper{
					@media (width > 767px){
						margin: 0;
					}
				}
				.list{
					@media (width > 767px){
						display: flex;
						flex-direction: column;
						gap: 3.2rem;
						width: 61.6rem;
						.listItem{
							border-bottom: solid 1px var(--cc-sen-gray);
							padding-bottom: 3.2rem;
							height: auto;
							&:last-child{
								border: none;
								padding-bottom: 0;
							}
							&:first-child{
								display: none;
							}

							.item{
								flex-direction: row;
								justify-content: space-between;
								.item__img{
									width: 21.1rem;
								}
								.item__ttl{
									color: var(--cc-red);
									letter-spacing: .12em;
									font-size: 1.8rem;
								}
								.item__txtarea{
									width: 37.3rem;
								}
							}
						}
					}
				}
				.item{
					display: flex;
					flex-direction: column;
					&.-pcTop{
						@media (width > 767px){
							width: 48rem;
							.item__img{
								margin-bottom: 2.5rem;
							}
						}
					}
					.item__img{

					}
					.item__txtarea{
						color: var(--cc-gray-text);
						letter-spacing: .1em;
						padding-top: .5rem;
						@media (width <= 767px) {/* SP */
							padding-top: 3rem;
						}
					}
					.item__date{
						line-height: 1;
						font-size: 1.4rem;
						margin-bottom: 1rem;
						@media (width <= 767px) {/* SP */
							font-size: 1.5rem;
							margin-bottom: 1.5rem;
						}
					}
					.item__ttl{
						color: var(--cc-red);
						line-height: 1.3;
						letter-spacing: .12em;
						font-size: 2rem;
					}
					.item__txt{
						line-height: 1.8;
						font-size: 1.6rem;
						margin-top:2rem;
						@media (width <= 767px) {/* SP */
							margin-top: 2.5rem;
						}
					}

				}
				.spNav{
					display: flex;
					justify-content: space-between;
					margin-top: 3rem;

					@media (width > 767px) {/* PC */
						display: none;
					}
					.swiper-counter{
						color: var(--cc-red);
					}
					.slideNav{
						display: flex;
						align-items: center;
						position: relative;
						color: var(--cc-red);
						font-family: var(--ff-avenir);
						line-height: 1;
						gap: 3.2rem;
						.swiper-button-prev, .swiper-button-next{
							color: var(--cc-red);
							position: relative;
							display: flex;
							margin: 0;
							width: auto;
							height: 2rem;
							top: 0;
							gap: .7rem;
							font-size: 1.6rem;
							&:after{
								content: '';
								background: url(../images/common/ico-btn-arw-2.svg) center center /cover no-repeat;
								width: 2rem;
								height: 2rem;
							}
						}
						.swiper-button-prev{
							left: 0;
							flex-direction: row-reverse;
							&:after{
								transform: rotate(180deg);
							}
						}
						.swiper-button-next{
							right: 0;
						}
					}
				}
				.note{
					color: var(--cc-gray-text);
					line-height: 1.8;
					letter-spacing: .1em;
					font-size: 1.6rem;
					margin-top: 5rem;
					@media (width <= 767px) {/* SP */
						letter-spacing: .05em;
						font-size: 1.4rem;
						margin-top: 3.5rem;
					}
				}
			}
		}
	}

	.pcFixSection{
		margin-top: 16rem;
		@media (width > 767px){
			box-sizing: border-box;
			/* border-left: solid 1.6rem var(--cc-red);
			border-right: solid 1.6rem var(--cc-red); */
			display: flex;
			position: relative;
			.pcFixSection__cnt{
				padding-top: 1px;
				width: 100%;
			}
			.flamePos{
				pointer-events: none;
				width: 0;
				position: sticky;
				top: 0;
				z-index: 2;
				height: 100vh;
				.flame{
					box-sizing: border-box;
					position: absolute;
					border-left: solid 1.6rem var(--cc-red);
					border-right: solid 1.6rem var(--cc-red);
					border-top: solid 1.6rem var(--cc-red);
					border-bottom: solid 1.6rem var(--cc-red);
					width: calc(100vw - var(--scrollbar, 0px));
					height: 100vh;
					left: 0;
					top:0;
				}
			}
		}
		@media (width <= 767px) {/* SP */
			margin-top: 10rem;
		}
	}

	.photoSec,
	.eatSec{
		position: relative;

        width: 100%;
		color: var(--cc-white-A);

		@media (width > 767px) {/* PC */
			clip-path: inset(0 0 0 0);
			will-change: clip-path;
			height: 100vh;
			min-height: 868px;
		}
		.kvImg{
			position: relative;
			pointer-events: none;
			@media (width <= 767px) {/* SP */
				height: 50.4rem;
				border: solid .8rem var(--cc-red);
			}
			picture{
				z-index: -1;
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				@media (width <= 767px) {/* SP */
					position: absolute;
					z-index: 0;
				}
			}
			img{
				max-width: none;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.ttl{
			background: var(--cc-white-A);
			color: var(--cc-red);
			position: absolute;
			writing-mode: vertical-rl;
			font-family: var(--ff-zen);
			font-weight: 400;
			line-height: 1;
			letter-spacing: 0.22em;
            padding: 1.8rem .7rem 0rem .7rem;
            left: 9.6rem;
            top: 9.6rem;
            font-size: 5.6rem;
			@media (width <= 767px) {/* SP */
				padding: 1.2rem .6rem 0.1rem .6rem;
				font-size: 2.8rem;
				top: auto;
                bottom: 4.7rem;
                left: 2.3rem;
			}
		}
		.enTxt{
			writing-mode: vertical-rl;
			position: absolute;
			font-family: var(--ff-garamond-pro);
			line-height: 1;
			letter-spacing: .15em;
			font-size: 2rem;

			top: 4rem;
			right: 2.8rem;
			@media (width <= 767px) {/* SP */
				top: 1.7rem;
				right: 1.3rem;
			}
		}
		.txtarea{

			@media (width > 767px){
				position: absolute;
				left: 9.6rem;
				bottom: 9.6rem;
			}
			@media (width <= 767px) {/* SP */
				color: var(--cc-gray-text);
				padding: 3.2rem 3.2rem 8rem 3.2rem;
			}
			.txt{
				letter-spacing: .1em;
				font-size: 1.6rem;
				@media (width > 767px){
					color: var(--cc-red);
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					line-height: 1;
					gap:1rem;
					span{
						background: var(--cc-white-A);
						padding: .2rem;
					}
				}
				@media (width <= 767px) {/* SP */
					line-height: 1.8;
				}
			}
			.btnBlock{
				margin-top: 5.6rem;
				@media (width <= 767px) {/* SP */
					margin-top: 3.2rem;
					text-align: center;
					.c-btn{
						padding-top: 0;
						padding-left: 0;
						padding-right: 0;
						padding-bottom: 1rem;
						background: #fff;
						border-color: var(--cc-red);
						color: var(--cc-red);
						&:after{
							background-image: url(../images/common/ico-btn-arw.svg);
						}
					}
				}
			}
		}
		.txtCredit{
			position: absolute;
			font-family: var(--ff-avenir);
			line-height: 1.3;
			right: 2.8rem;
			bottom: 2.8rem;
			@media (width <= 767px) {/* SP */
				text-align: right;
				right: 1.3rem;
           		bottom: 1.3rem;
				font-size: 1.4rem;
			}
		}
	}


	.itinerariesSec{
		padding-top: 16rem;
		@media (width <= 767px) {/* SP */
			background: var(--cc-back-gray);
			padding-top: 9.5rem;
			padding-bottom: 10rem;
		}
		.list{
			max-width: 1600px;
			margin: 8rem auto 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;
			gap: 8rem 0;

			@media (width > 767px) {/* PC */
				li{
					width: 33.33%;
				}
				&:has(> li:first-child:nth-last-child(2)),
				&:has(> li:first-child:nth-last-child(4)) {
					width: 106rem;
					li{
						width: 50%;
					}
				}
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				margin-top: 5rem;
				gap: 5.5rem;
			}

			.th{
				text-align: center;
				.th__txtarea{
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 2.2rem;
					gap: 1.5rem;
				}
				.th__txt1{
					line-height: 1;
					letter-spacing: .12em;
					font-size: 1.8rem;
					padding-bottom: .6rem;
					border-bottom: solid 1px var(--cc-red);
					@media (width <= 767px) {/* SP */
						font-size: 1.6rem;
					}
				}
				.th__txt2{
					font-family: var(--ff-zen);
					letter-spacing: .1em;
					line-height: 1.5;
					font-size: 1.8rem;
				}
			}
		}
		.btnBlock{
			margin-top: 7rem;
			text-align: center;
			.c-btn{
				background: transparent !important;
			}
		}
	}

	.timelineSec{
		overflow: hidden;
		background: var(--cc-white-A);
		padding: 16rem 0 0;
		@media (width <= 767px) {/* SP */
			padding: 10rem 0 0;
		}
		.head{
			margin: 0 auto 8rem;
			display: flex;
			justify-content: space-between;
			width: 120rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
				flex-direction: column;
				margin-bottom: 5.5rem;
			}
			.txtInfo{
				color: var(--cc-gray-text);
				line-height: 2;
				letter-spacing: .192rem;
				font-size: 1.6rem;
				padding-top: 1.7rem;
				@media (width <= 767px) {/* SP */
					padding-top: 4.8rem;
				}
				.-red{
					color: var(--cc-red);
				}

			}
		}
		.marq {
			display: flex;
			margin: 0;
			padding: 0;
			width: max-content;
			animation: marquee-left 75s linear infinite;
			.marq-item {
				width: 48rem;
				margin-right: 4rem;
				@media (width <= 767px) {/* SP */
					width: 32rem;
					margin-right: 2rem;
				}
				img{
				  width: 100%;
				}
			}
		}

		.btnBlock{
			text-align: center;
			margin-top: 7rem;
			@media (width <= 767px) {/* SP */
				margin-top: 5rem;
			}
		}
		.bnrSec{
			margin: 12rem auto 0;
			width: 96rem;
			@media (width <= 767px) {/* SP */
				width: 33rem;
				margin-top: 10rem;
			}
			img{
				width: 100%;
			}
		}
	}


	.js-iv{
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0) rotate(.001deg);
		transition: opacity 1400ms cubic-bezier(0.165, 0.84, 0.44, 1);
		transition-property: opacity, transform;
		&.-viewed{
			opacity: 1;
			transform: translate3d(0, 0, 0) rotate(.001deg);
		}
	}

}

@keyframes marquee-left {
	from {
	  transform: translateX(0%);
	}
	to {
	  transform: translateX(-50%);
	}
}

@keyframes mapLine{
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes mapLineRev{
	from{
		clip-path: inset(0 0 0 100%);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes map-cursor{
	0%{
		transform: translateX(0);
	}
	20%{
		transform: translateX(-2rem);
	}
	60%{
		transform: translateX(-2rem);
	}
	80%{
		transform: translateX(0rem);
	}
}

.mod_header{
	transition: transform .5s;
}
body.-scrlDown{
	.mod_header{
		transform: translateY(-100%);
		body:has(#menuopenstate:checked) & {
			transform: none;
		}
	}
	.lineBlock{
		@media (width <= 767px) {/* SP */
			padding-top: 2rem !important;
		}
	}
}
.banerWrap{
	position: fixed;
	z-index: 999;
	@media (width > 767px) {/* PC */
		bottom: 8rem;
		right: 0;
	}
	@media (width <= 767px) {/* SP */
		bottom: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
}