@charset "utf-8";
.c-kvSec{
	@media (width <= 767px) {/* SP */
		flex-direction: column;
		.head{
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 3rem;
            height: 20rem;
			.txtBlock{
				flex-direction: row-reverse;
                align-items: flex-start;
				gap: 2rem;
                padding-right: 1rem;
				.ttl{
					font-size: 3.8rem;
				}
				.enTxt{
					padding-top: .5rem;
				}
			}
		}

		.imgBlock{
			width: 100%;
		}
	}
}
#movie{

	@media (width <= 767px) {/* SP */
		padding-top: 3.2rem;
	}
	.pageCnt{
		margin-left: auto;
		margin-right: auto;
		@media (width > 767px) {/* PC */
			padding-top: 22.5rem;
			padding-bottom: 15rem;
			width: 120rem;
		}
		@media (width <= 767px) {/* SP */
			padding-top: 8rem;
            padding-bottom: 7.5rem;
		}
	}
	.movTtl{
		display: flex;
		gap: 1.6rem;
		letter-spacing: .1em;
		font-size: 1.8rem;
		@media (width > 767px) {/* PC */
			margin-top: 2.1rem;
			padding-left: 1.6rem;
		}
		@media (width <= 767px) {/* SP */
			margin-top: 1.5rem;
			gap: .8rem;
			font-size: 1.6rem;
		}
	}
	.movieSec{
		.nonfictionBlock{
			position: relative;
			background: #F2F1F0;
			margin: 8rem auto 0;
			padding: 11.2rem 0 10rem;
			@media (width <= 767px) {/* SP */
				width: 35rem;
				margin: 5rem auto 0;
				padding: 5.4rem 0 5rem;
			}
			.blockTtl{
				img{
					margin-left: auto;
					margin-right: auto;
					width: 47.6rem;
					@media (width <= 767px) {/* SP */
						width: 23.3rem;
					}
				}
			}
			.introTxt{
				color: var(--cc-gray-text);
				text-align: center;
				letter-spacing: .12em;
				line-height: 2.2;
				font-size: 1.6rem;
				@media (width <= 767px) {/* SP */
					line-height: 2.0;
				}
			}
			.narration{
				color: var(--cc-gray-text);
				text-align: center;
				font-size: 1.8rem;
				margin-top: 4.4rem;
				@media (width <= 767px) {/* SP */
					margin-top: 3rem;
				}
			}
			.movieList{
				margin: 8rem auto 0;
				display: flex;
				flex-direction: column;
				gap:8rem;
				width: 96rem;
				@media (width <= 767px) {/* SP */
					width: 29rem;
					margin-top: 6rem;
					gap: 4.5rem;
				}
				.c-ytTh.-cs{
					.c-ytTh__playIcon{
						display: none;
					}
					.c-ytTh__img{
						position: relative;
						&:after{
							position: absolute;
							content: '';
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							background: rgba(236,236,236,.75);
						}
						.csTxt{
							z-index: 1;
							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;
							}
						}
					}
				}
				.c-ytTh__playIcon{
					@media (width > 767px) {/* PC */
						width: 9.6rem;
					}
				}
			}
			.line{
				position: absolute;
				top: 0;
				height: 100%;
				width: .2rem;
				left: 2rem;
				background: url(../images/movie/line-v.svg) left top repeat-y;
				@media (width <= 767px) {/* SP */
					background-image: url(../images/movie/line-v-sp.svg);
					left: 1rem;
				}
				&.-r{
					left: auto;
					right: 2rem;
					@media (width <= 767px) {/* SP */
						right: 1rem;
					}
				}
			}
		}
		.profileSec{
			background-color: #D9D9D9;
			width: 96rem;
			padding: 4rem;
			margin: 9rem auto 0;
			box-sizing: border-box;
			@media (width <= 767px) {/* SP */
				width: 29rem;
				padding: 2rem;
			}
			.inner{
				display: flex;
				justify-content: space-between;
				@media (width <= 767px) {/* SP */
					flex-direction: column;
				}
			}
			.photo_wrap{
				width: 23rem;
				@media (width <= 767px) {/* SP */
					width: 100%;
				}
			}
			.text_wrap{
				width: 61rem;
				text-align: justify;
				font-size: 1.4rem;
				color: #64615F;
				line-height: 1.78;
				letter-spacing: .14em;
				@media (width <= 767px) {/* SP */
					width: 100%;
					letter-spacing: .1em;
				}
			}
			.profile_name{
				font-family: var(--ff-zen);
				font-size: 1.5rem;
				line-height: 1.6;
				color: #000;
				margin-bottom: 1.4rem;
				span{
					font-size: 2.4rem;
				}
				@media (width <= 767px) {/* SP */
					margin-top: 1.6rem;
					span{
						font-size: 1.8rem;
					}
				}
			}
		}
	}
	.seasonSec{
		padding-top: 17rem;
		@media (width <= 767px) {/* SP */
			width: 33rem;
			padding-top: 9rem;
			margin-left: auto;
			margin-right: auto;
		}
		.secTtl{
			text-align: center;
			line-height: 1;
			margin-bottom: 8rem;
			@media (width <= 767px) {/* SP */
				margin-bottom: 6.5rem;
			}
			.secTtl__ttl{
				font-family: var(--ff-zen);
				font-weight: 400;
				letter-spacing: .12em;
				font-size: 3.2rem;
				@media (width <= 767px) {/* SP */
					font-size: 2.4rem;
				}
			}
			.secTtl__enTxt{
				color: var(--cc-red);
				font-family: var(--ff-avenir);
				letter-spacing: .12em;
				font-size: 1.4rem;
				margin-top: 2.5rem;
				@media (width <= 767px) {/* SP */
					font-size: 1.6rem;
					margin-top: 2rem;
				}
			}
		}
		.seasonSec__cnt{
			display: flex;
			flex-direction: column;
			gap: 8.4rem;
			@media (width <= 767px) {/* SP */
				gap: 6rem;
			}
		}
		.block{
			.block__ttl{
				font-weight: 500;
				line-height: 1;
				display: flex;
				align-items: center;
				font-family: var(--ff-zen);
				letter-spacing: .1em;
				font-size: 2.2rem;
				gap: 1.2rem;
				margin-bottom: 5.3rem;
				@media (width <= 767px) {/* SP */
					font-size: 1.8rem;
					gap:.8rem;
					margin-bottom: 3.5rem;
				}
				&:before{
					content: '';
					height: 1px;
					background: var(--cc-red);
					width: 4.8rem;
					margin-top: .5rem;
					@media (width <= 767px) {/* SP */
						width: 2rem;
					}
				}
			}
			.block__list{
				display: flex;
				flex-wrap: wrap;

				@media (width > 767px) {/* PC */
					justify-content: space-between;
					li{
						width: 57.9rem;
					}
				}
				@media (width <= 767px) {/* SP */
					gap: 4rem;
					li{
						width: 100%;
					}
				}
			}
		}
	}

	.skySec{
		padding-top: 19.5rem;
		@media (width <= 767px) {/* SP */
			width: 33rem;
			margin-left: auto;
			margin-right: auto;
			padding-top: 7rem;
		}
		.skySec__cnt{
			margin-top: 8rem;
			@media (width <= 767px) {/* SP */
				margin-top: 4.8rem;
			}
		}
		.tab{
			display: flex;
			border: solid 1px var(--cc-red);
			margin-bottom: 8rem;
			@media (width <= 767px) {/* SP */
				margin-bottom: 4rem;
			}
			.tab__btn{
				font-family: var(--ff-zen);
				color: var(--cc-red);
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: .1em;
				line-height: 1;
				width: 50%;
				height: 7.8rem;
				font-size: 2.8rem;
				@media (width <= 767px) {/* SP */
					font-size: 1.6rem;
					height: 4.6rem;
				}
				&.-cr{
					pointer-events: none;
					background: var(--cc-red);
					color: #fff;
				}
			}
		}
		.block{
			display: none;
			&:first-child{
				display: block;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				@media (width > 767px) {/* PC */
					justify-content: space-between;
					gap: 6.8rem 0;
					li{
						width: 57.9rem;
					}
				}
				@media (width <= 767px) {/* SP */
					gap: 4rem;
					li{
						width: 100%;
					}
				}
			}
		}
	}

}
.sec_movList{
	margin-top: 16rem;
	padding-bottom: 4rem;
	@media (width <= 767px) {/* SP */
		width: 33rem;
		margin-left: auto;
		margin-right: auto;
		margin-top: 8rem;
	}
	.movList{
		margin-top: 8rem;
		display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8rem 4.2rem;
		@media (width <= 767px) {/* SP */
			grid-template-columns: repeat(1 ,1fr);
			gap: 4.8rem;
			margin-top: 4rem;
		}
	}
	.c-ttl {
		& .ttl {
			@media (width <= 767px) {/* SP */
				text-align: center;
			}
		}
	}
	.movTtl {
		display: flex;
		flex-wrap: wrap;
		letter-spacing: .1em;
		line-height: 1.3;
		font-size: 1.8rem;
		margin-top: 3rem;
		padding-left: 1.6rem;
		gap: 1.6rem;
		@media (width <= 767px) {
			line-height: 1.6;
			font-size: 1.6rem;
			margin-top: 2rem;
			gap: 1rem 0;
		}
	}
}