@charset "utf-8";

.pageStory {
	/* scroll-margin-top: 0; */

	/* ===== Story Tab Navigation ===== */
	.storyTab{
		position: relative;
		@media (width > 767px) {/* PC */
			margin-top: 12rem;
		}
		@media (width <= 767px) {/* SP */
			margin-top: 6rem;
			gap: .8rem;
		}
		.storyTab__in{
			display: flex;
			justify-content: center;
			@media (width > 767px) {/* PC */
				gap: 1.6rem;
			}
			@media (width <= 767px) {/* SP */
				gap: .8rem;
				padding: 0 1.0rem;
			}
		}
		.storyTab__item{
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: .5rem .5rem 0 0;
			background: #eee;
			color: #ED9672;
			text-decoration: none;
			transition: background .3s, color .3s;
			@media (width > 767px) {/* PC */
				width: 29.6rem;
				height: 6.5rem;
				gap: 1.6rem;
			}
			@media (width <= 767px) {/* SP */
				flex: 1;
				height: 5.6rem;
				flex-direction: column;
				gap: .4rem;
			}
		}
		.storyTab__en{
			font-family: var(--ff-josefin);
			font-weight: 600;
			line-height: 1.3;
			font-size: 1.6rem;
			letter-spacing: .05em;
		}
		.storyTab__ja{
			font-weight: 400;
			line-height: 1;
			@media (width > 767px) {/* PC */
				font-size: 1.5rem;
				letter-spacing: .08em;
			}
			@media (width <= 767px) {/* SP */
				font-size: 1.3rem;
				letter-spacing: .08em;
				text-align: center;
			}
		}
		&[data-active="1"] .-item1,
		&[data-active="2"] .-item2{
			background: #ED9672;
			color: #fff;
		}
		.storyTab__line{
			width: 100%;
			height: .4rem;
			background: #ED9672;
		}
	}

	/* ===== Story Panel Animation ===== */
	.pageCnt{
		&.is-hidden{
			display: none;
		}
		&.is-fadeOut{
			opacity: 0;
			transition: opacity .35s ease;
		}
		&.is-fadeIn{
			opacity: 1;
			transition: opacity .35s ease;
		}
	}

	.c-kv{
		position: relative;
		@media (width > 767px) {/* PC */
			background: url(../images/story/bg-gray.webp);
			&:before{
				content: '';
				width: 31.7rem;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				background: #fff;
			}
			.c-kv__img {
				position: relative;
			}
		}
		.c-kv__copy{
			z-index: 1;
			bottom: -8rem;
			width: 63.1rem;
			@media (width > 767px) {/* PC */
				margin-left: 14rem;
			}
			@media (width <= 767px) {/* SP */
				width: 29.3rem;
				right: 0rem;
				bottom: -5rem;
			}
		}
	}
	.pageCnt{
		position: relative;
		@media (width > 767px) {/* PC */
			padding-top: 15rem;
			background-color: #FDFDFD;
			&:before{
				content: '';
				width: 31.7rem;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				background: #fff;
			}
		}
		@media (width <= 767px) {/* SP */
			padding-top: 5.0rem;
		}
		.pageCnt__in{
			margin: 0 auto;
			@media (width > 767px) {/* PC */
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}
		}
	}
	.cntNav{
		@media (width <= 767px) {/* SP */
			position: relative;
			width: 33.7rem;
			margin: 0 auto;
		}
		.cntNav__line{
			position: relative;
			width: 1.9rem;
			@media (width <= 767px) {/* SP */
				position: absolute;
				left: 0;
				width: .2rem;
			}
			.line{
				position: absolute;
				background: url(../images/story/nav-line.svg) top center /100% auto repeat-y;
				width: .2rem;
				height: 34.8rem;
				left: .9rem;
				top: .7rem;
				@media (width <= 767px) {/* SP */
					height: 21rem;
					left: 1.95rem;
					top: 1.7rem;
				}
				&.-type01{
					height: 23.8rem;
					@media (width <= 767px) {/* SP */
						height: 16.8rem;
					}
				}
				.lineOrg{
					background:#ED9672;
					position: absolute;
					left: 0;
					width: 100%;
					top: 0;
					transition: height .5s;
				}
			}
			.dotList{
				position: relative;
				display: flex;
				flex-direction: column;
				gap: 6.05rem;
				.dot{
					background: url(../images/story/dot.svg) center center /cover no-repeat;
					width: 1.9rem;
					height: 1.9rem;
					transition: background-image .3s;
					&:last-child{
						margin-top: 2.5rem;
					}
					&.-type01{
						margin-top: 0;
					}
				}
			}
		}
		.cntNav__txtList{
			ul{
				display: flex;
				flex-direction: column;
				gap: 3.2rem;
				@media (width <= 767px) {/* SP */
					position: relative;
					gap: 2rem;
					align-items: flex-start;
				}
			}
			a{
				display: flex;
				flex-direction: column;
				gap: 1rem;
				@media (width <= 767px) {/* SP */
					white-space: nowrap;
					border: 1px solid #EDEDF3;
					border-radius: 6rem;
					flex-direction: row;
					align-items: center;
					height: 3.2rem;
					padding: 0 1.2rem 0 1.6rem;
					gap:.8rem;
					&:before{
						content: '';
						border-radius: 50%;
						background: #ED9672;
						width: .8rem;
						height: .8rem;
						margin-right: .2rem;
					}
				}
			}
			.txtE{
				font-family: var(--ff-josefin);
				letter-spacing: .05em;
				line-height: 1;
				@media (width <= 767px) {/* SP */
					font-size: 1.6rem;
					color: #ED9672;
				}
			}
			.txtJ{
				font-weight: 400;
				line-height: 160%; /* 22.4px */
				letter-spacing: .14em;
				font-size: 1.4rem;
			}
		}
		@media (width > 767px) {/* PC */
			position: sticky;
			top: 9.4rem;
			display: flex;
			gap: 2.3rem;
			padding-bottom: 20rem;
			box-sizing: border-box;
			padding-left: 6.4rem;
			width: 31.7rem;
			&[data-nav="1"]{
				.dotList .dot:nth-child(1){background-image: url(../images/story/dot-cr.svg);}
				.cntNav__txtList li:nth-child(1){color: #ED9672;}
				.lineOrg{height:0;}
			}
			&[data-nav="2"]{
				.dotList .dot:nth-child(2){background-image: url(../images/story/dot-cr.svg);}
				.cntNav__txtList li:nth-child(2){color: #ED9672;}
				.lineOrg{height:8rem;}
			}
			&[data-nav="3"]{
				.dotList .dot:nth-child(3){background-image: url(../images/story/dot-cr.svg);}
				.cntNav__txtList li:nth-child(3){color: #ED9672;}
				.lineOrg{height:16rem;}
			}
			&[data-nav="4"]{
				.dotList .dot:nth-child(4){background-image: url(../images/story/dot-cr.svg);}
				.cntNav__txtList li:nth-child(4){color: #ED9672;}
				.lineOrg{height:24rem;}
			}
			&[data-nav="5"]{
				.dotList .dot:nth-child(5){background-image: url(../images/story/dot-cr.svg);}
				.cntNav__txtList li:nth-child(5){color: #ED9672;}
				.lineOrg{height:100%;}
			}
		}
	}

	.secWrp{
		position: relative;
		@media (width > 767px) {/* PC */
			width: calc(100% - 31.7rem);
			.secWrp__in{
				position: relative;
				margin: 0 auto;
				width: 100rem;
			}
		}
		@media (width <= 767px) {/* SP */
			background: url(../images/story/bg-gray.webp) center top;
		}
		.wavePc{
			position: absolute;
			left: 0;
			width: 100%;
			top: 25rem;
		}
		.waveSp{
			position: absolute;
			left: 0;
			width: 100%;
			top: 4rem;
		}
		section{
			/* height: 1000px; */
		}
		.spotSec{
			.topBlock{
				z-index: 1;
				position: relative;
				@media (width > 767px) {/* PC */
					display: flex;
					justify-content: space-between;
				}
				.topBlock__img{
					position: relative;
					@media (width <= 767px) {/* SP */
						margin-top: 4rem;
						margin-bottom: 3.2rem;
					}
					img{
						width: 100%;
						&.-type01{
							@media (width > 767px) {/* PC */
								height: 42rem;
								object-fit: cover;
							}
						}
					}
					.txt{
						position: absolute;
						left: 0;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						font-family: var(--ff-tsukumin);
						gap: 1.5rem;

						font-size: 1.8rem;
						font-weight: 300;
						line-height: 1; /* 30.6px */
						letter-spacing: .14em;
						@media (width <= 767px) {/* SP */
							font-size: 1.4rem;
							gap: 1.0rem;
						}
						span{
							background: #fff;
							padding: 1.5rem .8rem;
							@media (width <= 767px) {/* SP */
								padding: 1rem .4rem;
							}
						}
					}
				}
				.topBlock__txtarea{
					position: relative;
					padding-top: .6rem;

					.blockHead{
						@media (width <= 767px) {/* SP */
							padding: 0 0 0 3.2rem;
						}
						.num{
							color: #ED9672;
							font-family: var(--ff-parlare);
							font-weight: 400;
							line-height: 100%; /* 56px */
							font-size: 5.6rem;
							@media (width <= 767px) {/* SP */
								font-size: 4rem;
								padding-left: 26rem;
							}
						}
						.ttl{
							white-space: nowrap;
							font-family: var(--ff-tsukumin);
							font-weight: 300;
							line-height: 180%; /* 54px */
							letter-spacing: .15em;
							font-size: 3rem;
							@media (width <= 767px) {/* SP */
								line-height: 1;
								font-size: 2.2rem;
							}
						}
						.place{
							display: flex;
							p{
								display: flex;
								align-items: center;
								border-bottom: 2px dashed #ED9672;
								line-height: 1;
								gap: .8rem;
								padding-bottom: .8rem;
								margin-top: 1.2rem;
								letter-spacing: 0.1rem;
								@media (width <= 767px) {/* SP */
									font-size: 1.4rem;
									margin-top: 1.4rem;
									letter-spacing: .14em;
								}
							}
							.place__pin{
								width: 1.6rem;
							}
						}
					}
					.txtarea{
						text-align: justify;
						letter-spacing: .14em;
						font-size: 1.4rem;
						line-height: 2.4;
						margin-top: 2.7rem;
						@media (width <= 767px) {/* SP */
							margin: 0 auto;
							width: 31.1rem;

							font-size: 1.5rem;
						}
					}
				}
			}

			&.-spot1,
			&.-spot3,
			&.-spot5{
				.topBlock{
					@media (width > 767px) {/* PC */
						flex-direction: row-reverse;
					}
				}
				.topBlock__txtarea{
					@media (width > 767px) {/* PC */
						width: 38rem;
						.num{
							text-align: right;
						}
					}
				}
				.topBlock__img{
					.txt{
						@media (width > 767px) {/* PC */
							bottom: 4rem;
						}
						@media (width <= 767px) {/* SP */
							top: 3rem;
						}
						&.-type01 {
							bottom: auto;
							top: 4.8rem;
						}
						&.-type02 {
							@media (width <= 767px) {/* SP */
								bottom: 2.8rem;
								top: auto;
							}
						}
					}
					@media (width > 767px) {/* PC */
						width: 51rem;
						margin-left: 1.6rem;
					}
					@media (width <= 767px) {/* SP */
						width: 34.3rem;
					}
				}
			}
			&.-spot2,
			&.-spot4{
				.topBlock__txtarea{
					@media (width > 767px) {/* PC */
						width: 35.5rem;
						padding-left: 6.4rem;
						.num{
							margin-left: -6.4rem;
						}
					}
				}
				.topBlock__img{
					@media (width > 767px) {/* PC */
						width: 38rem;
						margin-right: 6rem;
					}
					@media (width <= 767px) {/* SP */
						width: 31.1rem;
						margin:4rem auto 3.2rem;
					}
					.txt{
						top: 4.8rem;
						@media (width <= 767px) {/* SP */
							top: 3rem;
						}
						&.-type01 {
							top: auto;
							bottom: 4.8rem;
						}
					}
				}
			}

			&.-spot5{
				.topBlock__img{
					.txt{
					}
				}
			}

			@media (width <= 767px) {/* SP */
				&.-spot1,&.-spot5{
					.topBlock img{
						&.-bdR{
							border-radius:0 .6rem .6rem 0;
						}
					}
				}
				&.-spot1{
					box-sizing: border-box;
					padding-top: 5.5rem;
					height: 145.5rem;
				}
				&.-spot2{
					height: 121.7rem;
					.blockHead{
						.num{
							margin-bottom: 1rem;
						}
					}
					.topBlock__img{
						margin-bottom: 6rem;
						&.-type02 {
							margin-bottom: 2rem;
						}
					}
				}
				&.-spot3{
					height: 118.2rem;
					.img1{
						position: absolute;
						width: 12.6rem;
						top: 7rem;
						right: 0;
						z-index: 1;
					}
					.topBlock__img {
						margin-left: auto;
						.txt{
							font-size: 1.3rem;
						}
					}
					img{
						&.-bdR{
						}
					}
				}
				&.-spot4{
					height: 150.5rem;
					&#b_spot4 {
						margin-top: 10rem;
					}
					.num{
						margin-bottom: 1rem;
					}
				}
				&.-spot5{
					height: 126.7rem;
				}
			}
			.spotCnt{
				position: relative;
				.wave{
					max-width: none;
					left: -17rem;
					width: 128rem;
					@media (width <= 767px) {/* SP */
						display: none;
					}
				}
				img{
					position: absolute;
				}
				&.-spotCnt1{
					@media (width > 767px) {/* PC */
						height: 68rem;
						.wave{
							top: -14rem;
						}
						.img1{
							width: 29.9rem;
							top: 1.3rem;
							left: 23rem;
							&.-type01{
								width: 36.1rem;
							}
						}
						.img2{
							width: 19.7rem;
							top: 12rem;
							left: -3.5rem;
						}
						.img3{
							width: 25rem;
							left: 12.6rem;
							top: 33rem;
						}
						.img4{
							width: 34rem;
							right: 0;
							top: 14rem;
						}
						.obj{
							width: 12rem;
							left: 48.5rem;
							top: 35.5rem;
						}
						.obj-2{
							width: 12.2rem;
							right: -7rem;
							top: 35rem;
						}
					}
					@media (width <= 767px) {/* SP */
						height: 70rem;
						.img1{
							width: 23.4rem;
							top: 0.7rem;
							left: 13rem;
							&.-type02{
								width: 25.4rem;
								top: 1.7rem;
								left: 7rem;
							}
						}
						.img2{
							width: 12.4rem;
							top: 18rem;
							left: 1.5rem;
						}
						.img3{
							width: 18rem;
							left: 17.6rem;
							top: 26rem;
						}
						.img4{
							width: 23rem;
							right: 7.2rem;
							top: 43.5rem;
						}
						.obj{
							width: 12rem;
							left: 3.5rem;
							top: 62.5rem;
						}
						.obj-2{
							width: 7.8rem;
							left: 2rem;
							top: 38rem;
						}
					}
				}
				&.-spotCnt2{
					@media (width > 767px) {/* PC */
						height:49.6rem;
						.wave{
							top: -22em;
						}
						.img1{
							width: 25.4rem;
							top: -10rem;
							left: 34rem;
							z-index: 1;
							&.-type01{
								width: 20.5rem;
								top: 5rem;
								left: 36rem;
							}
						}
						.img2{
							width: 31.8rem;
							top: -6rem;
							left: 0rem;
						}
						.img3{
							width: 28.7rem;
							left: 48.5rem;
							top: 12rem;
						}
						.obj{
							width: 17.8rem;
							right: -6.5rem;
							top: 14rem;
						}
					}
					@media (width <= 767px) {/* SP */
						height: 36rem;
						margin-top: 3rem;
						.img1{
							width: 29rem;
							top: -33rem;
							left: -2.5rem;
							z-index: 1;
							&.-type01{
                                width: 16.5rem;
                                top: 3rem;
                                left: 1rem;
							}
							&.-type02{
								width: 16.5rem;
                                top: -36rem;
                                right: 2rem;
                                left: auto;
							}
						}
						.img2{
							width: 20rem;
							top: 11.5rem;
							left: 1.7rem;
						}
						.img3{
							width: 15.5rem;
							left: 20rem;
							top: 4.5rem;
						}
						.img4{
							width: 23rem;
							right: 7.2rem;
							top: 43.5rem;
						}
						.obj{
							width: 12rem;
							right: 1rem;
							top: 24rem;
						}
						.obj-2{
							width: 10rem;
							top: 6rem;
							left: 5.5rem;
						}
					}
				}
				&.-spotCnt3{
					@media (width > 767px) {/* PC */
						height: 65rem;
						.wave{
							top: 22rem;
						}
						.img1{
							width: 34.4rem;
							top: -5rem;
							left: 36.5rem;
							z-index: 1;
							&.-type01{
								width: 34.4rem;
								top: -3rem;
								left: 34.5rem;
							}
						}
						.img2{
							width: 40.2rem;
							top: 11.5rem;
							left: -6rem;
						}
						.img3{
							width: 19.7rem;
							left: auto;
							top: 8rem;
							right: 0;
							z-index: 1;
						}
						.img4{
							width: 25.5rem;
							left: auto;
							top: 29.5rem;
							right: 17rem;
						}
						.obj{
							width: 8.5rem;
							right: 1.5rem;
							top: -1rem;
						}
						.obj-2{
							width: 15.2rem;
							left: 31rem;
							top: 36rem;
						}
					}
					@media (width <= 767px) {/* SP */
						height: 56.5rem;
						&.-type01 {
							margin-top: 3rem;
						}
						.img2{
							width: 27.3rem;
							top: 3.5rem;
							left: 4rem;
							&.-type01 {
								width: 30.3rem;
								top: 2.5rem;
								left: 1rem;
							}
						}
						.img3{
							width: 12rem;
							top: 28rem;
							right: 1rem;
							&.-type01 {
								top: 25rem;
							}
						}
						.img4{
							width: 17rem;
							left: 4rem;
							top: 32rem;
						}
						.obj{
							width: 8.5rem;
							right: 1.5rem;
							top: -1rem;
						}
						.obj-2{
							width: 9.76rem;
							left: 2rem;
							top: 19rem;
						}
						.obj-3{
							width: 13.5rem;
							right: 5rem;
							top: 46rem;
							transform: rotate(347deg);
						}
					}
				}
				&.-spotCnt4{
					@media (width > 767px) {/* PC */
						height: 54rem;
						.img1{
							width: 32.7rem;
							top: -3rem;
							left: auto;
							right: -10rem;
							z-index: 1;
							&.-type01{
								width: 22.2rem;
								top: 12rem;
								right: 4rem;
							}
						}
						.img2{
							width: 16.8rem;
							top: 8rem;
							left: 49rem;
						}
						.img3{
							width: 21.7rem;
							left: auto;
							top: 21.5rem;
							right: 16.5rem;
							z-index: 1;
						}
						.img4{
							width: 31.8rem;
							left: 6rem;
							top: -3.5rem;
						}
						.img5{
                            width: 28.2rem;
                            left: -4rem;
                            top: 16.5rem;
							&.-type01 {
								width: 19.7rem;
								left: -6rem;
								top: 18.5rem;
							}
						}
						.obj{
							width: 20.5rem;
							left: 19.5rem;
							top: 28.5rem;
							&.-type01 {
                                left: 24.5rem;
                                top: 27.5rem;
							}
						}
						.obj-2{
							width: 12.2rem;
							left: -3rem;
							top: -20rem;
						}
					}
					@media (width <= 767px) {/* SP */
						height: 68rem;
						.img1{
							width: 15.5rem;
                            top: 0rem;
							left: auto;
							right: 1rem;
							&.-type01 {
                                width: 14.5rem;
                                top: 10rem;
                                right: 3rem;
							}
						}
						.img2{
							width: 12.5rem;
							top: 7.5rem;
							left: 5rem;
						}
						.img3{
							width: 18.8rem;
							top: 21rem;
							right: 5rem;
						}
						.img4{
							width: 24.8rem;
							left: 9.5rem;
							top: 40rem;
						}
						.img5{
							width: 22.6rem;
							left: -1rem;
							top: 52rem;
							&.-type02 {
								width: 12.6rem;
								left: 2rem;
								top: 53rem;
							}
						}
					}
				}
				&.-spotCnt5{
					@media (width > 767px) {/* PC */
						height: 55rem;
						.wave{
							top: -33rem;
						}
						.img1{
							width: 28.8rem;
							top: 6.5rem;
							left: auto;
							right: 9.5rem;
						}
						.img2{
							width: 36.2rem;
							top: 5.5rem;
							left: 13.5rem;
						}
						.obj{
							width: 9rem;
                            right: -5.2rem;
                            top: 25rem;
						}
						.obj-2{
							width: 18.8rem;
							left: -8rem;
							top: 18rem;
						}
					}
					@media (width <= 767px) {/* SP */
						height: 61rem;
						.img1{
							width: 33.2rem;
							top: 4rem;
							left: 1.5rem;
						}
						.img2{
							width: 22.1rem;
							top: 32.5rem;
							left: 3rem;
							border-radius: .6rem
						}
						.obj{
							width: 7.61rem;
							right: 2.2rem;
							top: 36.4rem;
						}
						.obj-2{
							width: 18.8rem;
							left: -8rem;
							top: 18rem;
						}
						.obj-3{
							width: 7.8rem;
							top: -3rem;
							right: 6rem;
						}
					}
				}
			}/* /.spotCnt */
		}
	}
}