@charset "utf-8";

.pageStory {
	/* scroll-margin-top: 0; */
	.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;
		padding-top: 20rem;
		@media (width > 767px) {/* PC */
			background: url(../images/story/bg-gray.webp) center top;
			&:before{
				content: '';
				width: 31.7rem;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				background: #fff;
			}
		}
		@media (width <= 767px) {/* SP */
			padding-top: 9.5rem;
			/* overflow: hidden; */
		}
		.pageCnt__in{
			margin: 0 auto;
			
			@media (width > 767px) {/* PC */
				/* width: 136rem; */
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				/* padding-bottom: 20rem; */
			}
		}
	}
	.cntNav{
		@media (width <= 767px) {/* SP */
			position: relative;
			width: 33.7rem;
			margin: 0 auto 5.5rem;
		}
		.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;
				}
				.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;
					}
				}
			}
		}
		.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;
			overflow: hidden;
		}
		.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%;
					}
					.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;
								@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: 4.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: 33rem;
						padding-right: 4.6rem;
						.num{
							text-align: right;
							margin-right: -3.9rem;
						}
					}
				}
				.topBlock__img{
					.txt{
						bottom: 4rem;
						@media (width <= 767px) {/* SP */
							bottom: 2.5rem;
						}
					}
					@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;
						}
					}
				}
			}

			&.-spot5{
				.topBlock__img{
					.txt{
						left: auto;
						right: 0;
						align-items: flex-end;
					}
				}
			}

			@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: 10rem;
					}
				}
				&.-spot3{
					height: 118.2rem;
					.img1{
						position: absolute;
						width: 12.6rem;
						top: 7rem;
						right: 3rem;
						z-index: 1;
					}
					.topBlock__img {
						margin-left: auto;
						.txt{
							font-size: 1.3rem;
						}
					}
					img{
						
						&.-bdR{
							border-radius:.6rem 0 0 .6rem;
						}
					}
				}
				&.-spot4{
					height: 150.5rem;
					.num{
						margin-bottom: 1rem;
					}
				}
				&.-spot5{
					height: 122.7rem;
				}
			}
			.spotCnt{
				position: relative;
				.wave{
					max-width: none;
					left: -17rem;
					width: 128rem;
					@media (width <= 767px) {/* SP */
						display: none;
					}
				}
				img{
					/* pointer-events: none; */
					position: absolute;
				}
				&.-spotCnt1{
				
					@media (width > 767px) {/* PC */
						height: 68rem;
						.wave{
							top: -14rem;
						}
						.img1{
							width: 31rem;
							top: 8.3rem;
							left: 23rem;
						}
						.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;
						}
						.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: 34.3rem;
							top: -10rem;
							left: 37rem;
							z-index: 1;
						}
						.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;
						.img1{
							width: 29rem;
							top: -33rem;
							left: -2.5rem;
							z-index: 1;
						}
						.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: 26.5rem;
							top: -5rem;
              left: 39.5rem;
							z-index: 1;
						}
						.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;
						/* .img1{
							width: 12.6rem;
							top: -5rem;
              left: 39.5rem;
							z-index: 1;
						} */
						.img2{
							width: 27.3rem;
							top: 3.5rem;
              left: 4rem;
						}
						.img3{
							width: 12rem;
							top: 28rem;
							right: 1rem;
						}
						.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: 48rem;
							transform: rotate(347deg);
						}
					}
				}
				&.-spotCnt4{

					@media (width > 767px) {/* PC */
						height: 54rem;
						.img1{
							width: 28rem;
							top: 3rem;
							left: auto;
							right: -6rem;
						}
						.img2{
							width: 16.8rem;
							top: 8rem;
							left: 49rem;
						}
						.img3{
							width: 21.7rem;
							left: auto;
							top: 21.5rem;
							right: 16.5rem;
						}
						.img4{
							width: 31.8rem;
							left: 6rem;
							top: -3.5rem;
						}
						.img5{
							width: 24.1rem;
							left: -10rem;
							top: 8.5rem;
						}
						.obj{
							width: 20.5rem;
							left: 19.5rem;
							top: 28.5rem;
						}
						.obj-2{
							width: 12.2rem;
							left: -3rem;
              top: -20rem;
						}
					}
					@media (width <= 767px) {/* SP */
						height: 68rem;
						.img1{
							width: 17.5rem;
							top: 1rem;
							left: auto;
							right: 1rem;
						}
						.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: 51rem;
						}
					}
				}
				&.-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: -1.2rem;
							top: 26rem;
						}
						.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: 42.4rem;
						}
						.obj-2{
							width: 18.8rem;
							left: -8rem;
							top: 18rem;
						}
						.obj-3{
							width: 7.8rem;
							top: -3rem;
							right: 6rem;
						}
					}
				}
			}/* /.spotCnt */
		}
	}
}