@charset "UTF-8";

/* =============================================================================

Common CSS

・ヘッダー、フッター等のページ共通で使用される要素「.g-×××」

上記はここに記述する

============================================================================= */

/* 追従フッター
----------------------------------------------------------------------------- */
._flowbottomSP {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 44px;
	display: table;
	text-align: center;
	transition: transform 1.0s;
	transform: translateY(100%);
	z-index: 999;
	a {
		display: table-cell;
		background-color: #FFF;
		vertical-align: middle;
		&:nth-child(2) {
			background-color: #FFFEB7;
		}
	}
	span {
		font-size: 1.1rem;
	}

	.state_fewscroll & {
		transform: none;
	}
}

/* ページトップボタン
----------------------------------------------------------------------------- */
._pagetopbtn {
	display: block;
	position: fixed;
	bottom: 60px;
	right: 10px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	filter: opacity(0%);
	pointer-events: none;
	background-color: #fff;
	z-index: 999;
	margin-bottom: env(safe-area-inset-bottom);
	&:before {
		content: "";
		display: block;
		position: absolute;
		top: 7px;
		bottom: 0;
		right: 0;
		left: 0;
		width: 12px;
		height: 12px;
		margin: auto;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		transform: rotate(-45deg);
	}

	@media(hover) {
		& {
			transition: 0.2s;
		}
		&:hover {
			opacity:.6;
		}
	}

	.state_screenheightscroll & {
		filter: opacity(100%);
		pointer-events: auto;
	}
}

/* ヘッダー
----------------------------------------------------------------------------- */
#menuopenstate {
	display: none;
}

.mod_header {
	/* position: absolute; */
	position: fixed;
	z-index: 100;
	left: 0;
	width: 100%;
	/* top: 4rem; */
	top: 0;
	background: rgba(255,255,255,1);
	color: var(--cc-black-A);
	@media (width > 767px) {/* PC */
		padding-top:2rem;
		padding-bottom: 2rem;
	}
	@media (width <= 767px) {/* SP */
		height: 9.9rem;
	}

	.in{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		position: relative;
		@media (width > 767px) {/* PC */
			min-width: 1024px;
			width: auto;
			margin-left: 4rem;
			margin-right: 4rem;
		}
		.logo{
			position: relative;
			width: 14.4rem;
			@media (width <= 767px) {/* SP */
				position: absolute;
				left: 50%;
				top: 2.5rem;
				transform: translateX(-50%);
				width: 12.3rem;

			}
			.logo-w{
				display: none;
				position: absolute;
				left: 0;
				top: 0;
			}
			img{
				width: 100%;
			}
		}
	}
	.navPc{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 3rem;
		.navTop{
			display: flex;
			align-items: center;
			line-height: 1;
			gap: 3rem;
			letter-spacing: .12em;
			font-size: 1.4rem;
			.snsList{
				display: flex;
				gap: 1.4rem;
				padding-right: 1rem;
				svg{
					width: 1.6rem;
					height: 1.6rem;
					fill: var(--cc-black-A);
				}
			}
			.linkHome{
				text-decoration: underline;
				@media(hover) {
					&:hover {
						text-decoration: none;
					}
				}
			}
			.langList{
				display: flex;
				font-family: var(--ff-garamond-pro);

				li{
					position: relative;
					padding-right: 1.2rem;
					margin-right: 1.2rem;
					&:after{
						content: '';
						position: absolute;
						background-color: var(--cc-black-A);
						right: 0;
						top: .2rem;
						width: 1px;
						height: 1.0rem;
					}
					&:last-child{
						padding-right: 0;
						margin-right: 0;
						&:after{
							display: none;
						}
					}
				}
			}
		}
		.linkList{
			font-family: var(--ff-zen);
			line-height: 1;
			font-weight: 600;
			letter-spacing: .12em;
			font-size: 1.6rem;

			ul{
				display: flex;
				li{
					position: relative;
					padding-right: 1.2rem;
					margin-right: 1.2rem;
					&:after{
						content: '';
						position: absolute;
						background-color: var(--cc-black-A);
						right: 0;
						top: .3rem;
						width: 1px;
						height: 1.3rem;
					}
					&:last-child{
						padding-right: 0;
						margin-right: 0;
						&:after{
							display: none;
						}
					}
					a{
						position: relative;
						&::before{
							content: '';
							display: block;
							width: 14px;
							height: 12px;
							position: absolute;
							top: -0.6rem;
							left 0;
							right: 0;
							background: transparent url(../images/common/petal.svg) no-repeat scroll center 0;
							opacity: 1;
							margin: 0 auto;
							opacity: 0;
							-webkit-transform: translateY(-1.5rem);
    						-ms-transform: translateY(-1.5rem);
    						transform: translateY(-1.5rem);
						}
						&:hover{
							color: var(--cc-red);
							&::before{
								opacity: 1;
								transition: all 0.5s ease;
								-webkit-transition: transform 1s ease, opacity 1s ease;
								-o-transition: transform 1s ease, opacity 1s ease;
								transform: translateY(-7px);
							}
						}
					}
					.current{
						color: var(--cc-red);
						&::before{
							-webkit-transform: translateY(-7px);
    						-ms-transform: translateY(-7px);
    						transform: translateY(-7px);
						}
						&::after{
							content: '';
							display: block;
							width: 14px;
							height: 12px;
							position: absolute;
							top: -0.6rem;
							left: 0;
							right: 0;
							background: transparent url(../images/common/petal.svg) no-repeat scroll center 0;
							opacity: 1;
							-webkit-transform: translateY(-7px);
							-ms-transform: translateY(-7px);
							transform: translateY(-7px);
							margin: 0 auto;
						}
					}
				}
			}
		}
	}

	.navSp{
		background-color: rgba(255,255,255);
		position: fixed;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		top: 0px;
		left: 0;
		width: 100%;
		/* bottom: 0; */
		opacity: 0;
		z-index: 1000;
		pointer-events: none;
		transition: opacity 0.4s;
		display: flex;
		justify-content: center;

		/* opacity: 1;
		pointer-events: auto; */
		height: 60.4rem;
		body:has(#menuopenstate:checked) & {
			opacity: 1;
			pointer-events: auto;
		}
		.logo{
			position: absolute;
			left: 50%;
			top: 2.5rem;
			transform: translateX(-50%);
			width: 12.3rem;
			img{
				width: 100%;
			}
		}
		.linkList{
			display: flex;
			justify-content: center;
			padding-top: 12.6rem;
			ul{
				display: flex;
				flex-direction: column;
				letter-spacing: .1em;
				font-size: 1.8rem;
				color: #190C0C;
			}
			.current{
				color: var(--cc-red);
			}
		}
		.snsList{
			position: absolute;
            display: flex;
            flex-direction: column;

			right: 3rem;
            bottom: 7rem;
            gap: 1.8rem;
			li{
				height: 2.4rem;
			}
			svg{
				fill: var(--cc-red) !important;
				width: 2.4rem;
				height: 2.4rem;
			}
		}
	}
	@media (width <= 767px) {/* SP */
		.menu {
			width: 4.8rem;
			height: 5rem;
			position: absolute;
			top: 2.3rem;
			right: 1.5rem;
			z-index: 1000;
			gap: 1.2rem;
			color: var(--cc-black-A);
			.ico{
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				height: 2.4rem;
				margin-bottom: 1.2rem;
				.bar{
					border-top: solid 1px var(--cc-black-A);
					border-bottom: solid 1px var(--cc-black-A);
					height: .6rem;
				}
				svg{
					margin: 0 auto;
					width: 4.2rem;
					height: 2.4rem;
				}
			}
			.txt{
				letter-spacing: .07em;
				line-height: 1;
				text-align: center;
				font-family: var(--ff-garamond-pro);
				font-size: 1.4rem;
			}
			.open {
				.txt{
					color: var(--cc-black-A);
				}
			}
			.close{
				position: absolute;
				left: 0;
				bottom: 0;
				opacity: 0;
				.txt{
					color: #190C0C;
				}
			}
			body:has(#menuopenstate:checked) & {
				.open{
					opacity: 0;
				}
				.close{
					opacity: 1;
				}
			}
		}
	}
	.langSp{
		position: absolute;
		top:4.1rem;
		left: 3rem;
		z-index: 1000;
		color: var(--cc-black-A);
		.icon{
			height: 2.1rem;
			svg{
				width: 2.1rem;
				height: 2.1rem;
				fill: var(--cc-black-A);
			}
		}
		.txt{
			line-height: 1;
			text-align: center;
			font-family: var(--ff-garamond-pro);
			letter-spacing: .1em;
			font-size: 1.4rem;
			margin-top: .5rem;
		}
	}

	&.-w{
		--cc-white-A: #190C0C;
		--cc-black-A: #fff;
		background: rgba(255,255,255,0);
		.logo{
			.logo-w{
				display: block;
			}
			.logo-blk{
				display: none;
			}
		}
	}
	.c-02btn {
		&:before {
			background-color: var(--cc-red);
		}
		@media(hover) {
			& {
				&:before {
					animation: none;
				}
			}
			&:hover {
				&:before {
					animation: none;
				}
			}
		}
	}
}

.pankuzu {
	position: relative;
	z-index: 2;
	width: 150rem;
	margin: auto;
	text-align: left;
	white-space: nowrap;
	line-height: 1;
	@media (width > 767px) {/* PC */
		width: auto;
		margin-left: 4.8rem;
		margin-right: 4.8rem;
	}
	@media (width <= 767px) {/* SP */
		width: 33rem;
		overflow-x: scroll;
	}
	.link {
		display: inline-block;
		position: relative;
		letter-spacing: .15em;
		font-size: 1.2rem;

		+ .link {
			margin-left: 1rem;
			&:before {
				content: "";
				display: block;
				width: .5rem;
				height: .5rem;
				border-right: 1px solid #000;
				border-top: 1px solid #000;
				position: absolute;
				top: 0;
				bottom: 0;
				left: -1.2rem;
				margin: auto;
				transform: rotate(45deg);
			}
		}
	}
}

/* フッター
----------------------------------------------------------------------------- */
.mod_footer {
	position: relative;
	background: var(--cc-red);
	margin-top: 2rem;
	.in{
		margin: 0 auto;
		padding: 11.5rem 0 9.5rem;
		position: relative;
		@media (width > 767px) {/* PC */
			width: 120rem;
		}
		@media (width <= 767px) {/* SP */
			padding: 10rem 0 0;
		}
		.head{
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			background: url(../images/common/ft-line-dot.svg) center bottom repeat-x;
			margin-bottom: 6rem;
			padding-bottom: 5rem;
			@media (width <= 767px) {/* SP */
				background-image: url(../images/common/ft-line-dot-sp.svg);
				padding:0 3rem 4.3rem;
				margin-bottom: 5rem;
			}
			.logo{
				width: 14.3rem;
			}
			.snsList{
				display: flex;
				gap: 2.4rem;
				a{
					display: block;
					height: 2.4rem;
					@media (width <= 767px) {/* SP */
						height: 2.8rem;
					}
				}
				svg{
					fill: var(--cc-white-A);
					width: 2.4rem;
					height: 2.4rem;
					@media (width <= 767px) {/* SP */
						width: 2.8rem;
						height: 2.8rem;
					}
				}
			}
		}
		.cnt{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				padding:0 3rem 10rem;
			}
			.info{
				line-height: 2;
				letter-spacing: .1em;
				font-size: 1.5rem;
				@media (width <= 767px) {/* SP */
					margin-bottom: 5rem;
				}
				.infoTtl{
					letter-spacing: .25em;
					color: var(--cc-white-A);
				}
				.infoTxt{
					color: var(--cc-white-A);
					display: flex;
					flex-direction: column;
					margin-top: 1.2rem;
                    gap: .5rem;
					@media (width <= 767px) {/* SP */
						line-height: 1.8;
					}
					a{
						color: #fff;
						text-decoration: underline;
                        text-underline-offset: .2rem;
						@media (width <= 767px) {
							text-underline-offset: .8rem;
						}
						@media(hover) {
							&:hover {
								text-decoration: none;
							}
						}
					}
				}
			}
			.nav{
				position: relative;
				display: flex;
				gap: 3rem;
				@media (width <= 767px) {/* SP */
					flex-direction: column;
					width: 100%;
					gap: 2.4rem;
				}
				.navTtl{
					font-weight: 500;
					font-family: var(--ff-avenir);
					color: var(--cc-red);
					line-height: 1;
					letter-spacing: .1em;
					font-size: 1.6rem;
					color: var(--cc-white-A);
					@media (width > 767px) {/* PC */
						writing-mode: vertical-rl;
						padding-top: .3rem;
					}
				}
				.navList{
					color: var(--cc-white-A);
					display: flex;
					line-height: 1;
					letter-spacing: .2em;
					font-size: 1.6rem;
					@media (width <= 767px) {/* SP */
						font-size: 1.5rem;
						justify-content: space-between;
					}
					ul{
						display: flex;
						flex-direction: column;
						gap: 2.4rem;

						@media (width > 767px) {/* PC */
							padding-top: .4rem;
							padding-right: 3rem;
                            margin-right: 3rem;
							border-right: solid 1px var(--cc-white-A);
							&:last-child{
								margin-right: 0;
								padding-right: 0;
								border: none;
							}
						}
						@media (width <= 767px) {/* SP */
							gap: 2rem;
						}
					}
				}
			}
		}
		&::before{
			content: '';
			display: block;
			width: 36rem;
			height: 10.6rem;
			background: transparent url(../images/common/train.svg) no-repeat scroll center 0;
			background-size: cover;
			position: absolute;
			top: -10.6rem;
			left: calc(50% - 18rem);
			@media (width <= 767px) {/* SP */
				width: 17.2rem;
				height: 5.6rem;
				top: -5.6rem;
			left: calc(50% - 8.6rem);
			}
		}
	}
	.imgBlockWrp{
		position: relative;
		clip-path: inset(0 0 0 0);
		will-change: clip-path;
		height: 90rem;
		@media (width <= 767px) {/* SP */
			height: 84.4rem;
		}
	}
	.imgBlock{
		position: fixed;
		bottom: 0;
		color: var(--cc-white-A);
		height: 90rem;
		width: 100%;
		@media (width <= 767px) {/* SP */
			height: 84.4rem;
		}
		.bgImg{
			height: 100%;
			figure{
				width: 100%;
				height: 100%;
			}
			img{
				max-width: none;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.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{
			font-family: var(--ff-avenir);

			position: absolute;

			right: 1.7rem;
            bottom: 1.5rem;
            font-size: 1.6rem;
            line-height: 1;
			@media (width <= 767px) {/* SP */
				font-size: 1.4rem;
				right: 3rem;
            	bottom: 5rem;
			}
		}
		.txtCopyright{
			-webkit-font-smoothing: antialiased;
			text-align: center;
			font-family: var(--ff-garamond-pro);
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			letter-spacing: .1em;
			font-size: 1.6rem;
			bottom: 4rem;
			white-space: nowrap;
			@media (width <= 767px) {/* SP */
				font-size: 1.4rem;
				bottom: 1rem;
			}
		}
	}
}

/* svg */
.g-svgholder{
	display: none;
}

/* コンポーネント */
.c-ttl{
	display: flex;
	flex-direction: column;
    align-items: center;
	gap: 1.2rem;
	.ttl{
		position: relative;
		font-family: var(--ff-zen);
		font-weight: 400;
		line-height: 1.7;
		letter-spacing: .12em;
		font-size: 4rem;
		padding-top: 3.1rem;
		@media (width <= 767px) {/* SP */
			font-size: 2.8rem;
		}
		&:after{
			content: '';
			background: url(../images/common/ico-leaf.svg) center center /100% auto no-repeat;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 2.4rem;
			height: 2.3rem;
			@media (width <= 767px) {/* SP */
				width: 2.1rem;
				height: 2.0rem;
				margin-left: .5rem;
			}
		}
	}
	.txtEn{
		font-family: var(--ff-avenir);
		color: var(--cc-red);
		font-weight: 500;
		line-height: 1;
		letter-spacing: .192rem;
		font-size: 1.6rem;
	}
	&.-l{
		align-items: flex-start;
		.ttl{
			padding-right: 3.0rem;
			padding-top: .1rem;
			&:after{
				left: auto;
				right: 0;
				transform: translateX(0);
			}
		}
		.txtEn{
			padding-left: .2em;
		}
	}
}

@keyframes c-btn-animation-loop {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 6px 0;
	}
}
.c-btn{
	position: relative;
	font-family: var(--ff-zen);
	background: var(--cc-white-A);
	color: var(--cc-red);
	display: inline-flex;
	align-items: center;
	padding: 0rem 0rem 1.2rem 0rem;
	gap: 1.2rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .192rem;
	font-size: 1.6rem;

	&:after{
		content: '';
		background: url(../images/common/ico-btn-arw.svg) center center /100% auto no-repeat;
		width: .7rem;
		height: .9rem;
	}
	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;

		/* 繰り返し背景で点線を作る */
		background-image: repeating-linear-gradient(
			to right,
			var(--cc-red) 0 3px,
			transparent 3px 6px
		);

		/* アニメーション設定 */
		background-size: 6px 100%;
		animation: c-btn-animation-loop 1s linear infinite;
	}
	&.-b{ /* 余白あり */
		padding: 1.2rem 2.4rem 1.4rem 2.4rem;
		&:after{
			width: .9rem;
			height: 1.2rem;
		}
	}
	&.-red{ /* 赤背景 */
		background: var(--cc-red);
		border-color: var(--cc-white-A);
		color: var(--cc-white-A);
		&:after{
			background-image: url(../images/common/ico-btn-arw-w.svg);
		}
		&:before {
			height: 0;
			/* 繰り返し背景で点線を作る */
			background-image: repeating-linear-gradient(
				to right,
				var(--cc-white-A) 0 3px,
				transparent 3px 6px
			);
		}
	}

	@media(hover) {
		& {
			&:before {
				transition: height 0.3s;
			}
		}
		&:hover {
			&:before {
				height: 5px!important;
			}
		}
	}
}
@keyframes c02btn-mouseover {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}
@keyframes c02btn-mouseout {
	from {
		clip-path: inset(0 0 0 0);
	}
	to {
		clip-path: inset(0 0 0 100%);
	}
}
.c-02btn {
	position: relative;
	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #fff;
	}
	html:not(.wf-active) &:before {
		visibility: hidden;
	}
	.-w & {
		--cc-black-A: #fff;
	}

	@media(hover) {
		& {
			&:before {
				animation: c02btn-mouseout 0.3s forwards;
			}
		}
		&:hover {
			&:before {
				animation: c02btn-mouseover 0.3s forwards;
			}
		}
	}
}

/*  */
.c-postArchive{
	border-top: solid 1px var(--cc-gray-text);
	display: flex;
	margin-left: auto;
	margin-right: auto;
	width: 120rem;
	margin-top: 12rem;
	padding-top: 6rem;
	@media (width <= 767px) {/* SP */
		margin-top:8rem;
		padding-top: 4rem;
		width: 33rem;
	}

	.item{
		display: flex;
		font-family: var(--ff-avenir);
		font-weight: 500;
		line-height: 1;
		font-size: 1.6rem;
		gap: 4rem;
		border-right: solid 1px var(--cc-sen-gray);
		padding-right: 7.5rem;
		margin-right: 8.2rem;
		@media (width <= 767px) {/* SP */
			flex-direction: column;
			padding-right: 3.3rem;
			margin-right: 4rem;
			gap: 2.7rem;
		}
		&:last-child{
			border: none;
			padding-right:0;
			margin-right:0;
		}
		.ttl{
			color: var(--cc-red);
			letter-spacing: .1em;
			@media (width > 767px) {/* PC */
				writing-mode: vertical-rl;
			}
		}
		.list{
			color: var(--cc-gray-text);
			display: flex;
			letter-spacing: .2em;
			gap: 3.2rem;
			@media (width <= 767px) {/* SP */
				gap: 3.0rem;
			}
			&.-cat{
				@media (width <= 767px) {/* SP */
					font-size: 1.5rem;
				}
			}
			ul{
				display: flex;
				flex-direction: column;
				gap: 2.4rem;
			}
		}
	}
}

.c-kvSec{
	position: relative;

	display: flex;
	@media (width > 767px) {/* PC */
		margin-top: -1.5rem;
		height: calc(100vh - 16rem );
	}
	.head{
		position: relative;
		@media (width > 767px) {/* PC */
			width:40rem;
		}
		@media (width <= 767px) {/* SP */
			width: 7.2rem;
		}
		.txtBlock{
			display: flex;
			flex-direction: row-reverse;

			gap: 1rem;

			@media (width > 767px) {/* PC */
				position: absolute;
				right: 19.3rem;
            	top: 14.6rem;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column-reverse;
                align-items: center;
				gap: 1rem;
            }
			.ttl{
				white-space: nowrap;
				font-weight: 400;
				line-height: 1;
				font-family: var(--ff-zen);
				font-feature-settings: 'vert' on;
				font-size: 4.4rem;
				writing-mode: vertical-rl;
				text-orientation: mixed;/* or upright */
				/* letter-spacing: -.34em; */
				letter-spacing: .1em;
				@media (width <= 767px) {/* SP */
					font-size: 2.4rem;
				}
			}
			.enTxt{
				writing-mode: vertical-rl;
				color: var(--cc-red);
				font-family: var(--ff-garamond-pro);
				line-height: 1;
				letter-spacing: .15em;
                font-size: 1.8rem;
                padding-top: .5rem;
				@media (width <= 767px) {/* SP */
					margin-right: -.5rem;
					padding-top: 0;
					font-size: 1.6rem;
				}
			}
		}
		.scrlBlock{
			color: var(--cc-black-A);
			position: absolute;
			display: flex;
			bottom: 0;

			left:4rem;

			gap: .8rem;
			height: 14.3rem;
			@media (width <= 767px) {/* SP */
				left: 2rem;
			}
			.line{
				background: var(--cc-black-A);
				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;
			}
		}
	}
	.imgBlock{
		position: relative;
		@media (width > 767px) {/* PC */
			width: calc(100% - 40rem);
			height: 100%;
			picture{
				width: 100%;
				height: 100%;
			}
			img{
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
		@media (width <= 767px) {/* SP */
			width: calc(100% - 7.2rem);
		}
		.copy{
			font-family: var(--ff-zen);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: absolute;
			color: var(--cc-red);
			letter-spacing: .12em;
			gap: .8rem;

			line-height: 1;

			font-size: 1.8rem;
			@media (width > 767px) {/* PC */
				left: 6.4rem;
            	top: 8rem;
			}
			@media (width <= 767px) {/* SP */
				align-items: flex-end;
				right: 0;
				bottom: 8rem;
			}
			span{
				background: #fff;
				padding: .7rem .2rem .7rem .7rem;
				@media (width <= 767px) {/* SP */
					padding: .4rem 0.8rem .7rem .3rem;
				}
			}
			&.-spTop{
				@media (width <= 767px) {/* SP */
					top: 9rem;
					bottom: auto;
				}
			}
		}
		.credit{
			color: #fff;
			font-family: var(--ff-avenir);
			position: absolute;
			text-align: right;

			font-size: 1.6rem;
			right:1.2rem;
			bottom: 1.1rem;
			@media (width <= 767px) {/* SP */
				right: 1.5rem;
            	bottom: 0.1rem;
				font-size: 1.4rem;
			}
			&.-blk{
				color: var(--cc-gray-text);
			}
		}
	}
}

.c-introBlock{
	overflow: hidden;
	.in{
		width: 120rem;
		margin: 16rem auto 0;
		display: flex;
		flex-direction: column;
		gap: 10.4rem;
		@media (width <= 767px) {/* SP */
			gap: 10rem;
			width: 33rem;
			margin-top: 10rem;
		}
	}
	.txtarea{
		display: flex;
		flex-direction: column;
		gap: 2.4rem;
		.txt{
			font-family: var(--ff-zen);
			letter-spacing: .08em;
			line-height: 2.4;
			font-size: 1.6rem;
		}
		.enTxt{
			color: var(--cc-gray-text);
			font-family: var(--ff-garamond-pro);
			line-height: 1.6;
			letter-spacing: .05em;
			font-size: 1.4rem;
			@media (width <= 767px) {/* SP */
				line-height: 1.7;
			}
		}
	}
	.imgBlock{
		position: relative;
		width: calc(100% + 20rem);
		@media (width <= 767px) {/* SP */
			width: calc(100% + 3rem);
		}
		img{
			width: 100%;
		}
		.credit{
			text-align: right;
			font-family: var(--ff-avenir);

			line-height: 1;
			font-size: 1.6rem;
			@media (width > 767px) {/* PC */
				color: var(--cc-white-A);
				position: absolute;
				right: 1.2rem;
				bottom: 1rem;
			}
			@media (width <= 767px) {/* SP */
				color: var(--cc-gray-text);
				margin-top: 1rem;
				padding-right: 1rem;
				font-size: 1.4rem;
			}
		}
	}
}

.c-ytTh{
	position: relative;
	.c-ytTh__overlay{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		.c-ytTh__playIcon{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
			backdrop-filter:blur(.36rem);
			width: 14.514%;
			@media (width <= 767px) {/* SP */
				width: 18.184%;
			}
			&:after{
				display: block;
				background: url(../images/common/ico-yt-play.svg) center center /100% auto no-repeat;
				content: '';
				width: 100%;
				padding-top: 100%;
			}
			&.-blk{
				&:after{
					background-image: url(../images/common/ico-yt-play-blk.svg);
				}
			}
		}
		&:_after{
			border-radius: 50%;
			background: url(../images/common/ico-yt-play.svg) center center /100% auto no-repeat;
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			/* width: 9.6rem;
			height: 9.6rem; */
			backdrop-filter:blur(.36rem);
			width: 14.514%;
			height: 100%;

			@media (width <= 767px) {/* SP */
				/* width: 6rem;
				height: 6rem; */
				width: 18.184%;
			}
		}
		&.-blk{
			&:after{
				background-image: url(../images/common/ico-yt-play-blk.svg);
			}
		}
	}
	.c-ytTh__img{
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		img{
			width: 100%;
			height: 100%;
            object-fit: cover;
			will-change: transform;
			transform: scale(1.05);
			z-index: 1;
		}
	}
	.c-ytTh__mov{
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		iframe{
			display: block;
			position: absolute;
			border: none;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
	}
}