/* OP ANIMATION / 2025.12 */

/*------------------------------------------------------------------------
ローディング
------------------------------------------------------------------------ */
	/* ローディング画面の背景 */
	.loadingWrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;  
		position: absolute;
		inset: 0;
		z-index: 10;
		overflow-y: auto;
		background: linear-gradient(to right, rgba(255, 255, 255, .5) 0% 100%),
					url("../../images/index/op2/mv_bg.jpg") center top / min((2320 / 1920 * 100%), 2320px) auto no-repeat,
					url("../../images/index/op2/mv_bg_02.jpg") center top / contain repeat-x,
					#f5f5f9;
	}

	.loadingBox {
		position: relative;
	}
	.countUnit {
		text-align: center;
		margin-top:10px;
		font-size:2rem;
		font-family: var(--site-font_family-en_2);
		letter-spacing: 0.03em;
		color: #a2576b;
	}
	.countUnit .per {
		font-size:0.8em;
	}

	.animation {
		width: 50px;
		height: 50px;
		clear: both;
		margin: 20px auto;
		border-radius: 50%;
		border-top: 25px rgba(163,44,76,0.75) solid;
		border-left: 25px rgba(163,44,76,0.25) solid;
		border-bottom: 25px rgba(163,44,76,0.25) solid;
		border-right: 25px rgba(163,44,76,0.25) solid;
		animation: spSlices 1s infinite linear;
	}
@keyframes spSlices {
	0% {
		border-top: 25px rgba(163,44,76,0.75) solid;
		border-right: 25px rgba(163,44,76,0.25) solid;
		border-bottom: 25px rgba(163,44,76,0.25) solid;
		border-left: 25px rgba(163,44,76,0.25) solid;
	}
	25% {
		border-top: 25px rgba(163,44,76,0.25) solid;
		border-right: 25px rgba(163,44,76,0.75) solid;
		border-bottom: 25px rgba(163,44,76,0.25) solid;
		border-left: 25px rgba(163,44,76,0.25) solid;
	}
	50% {
		border-top: 25px rgba(163,44,76,0.25) solid;
		border-right: 25px rgba(163,44,76,0.25) solid;
		border-bottom: 25px rgba(163,44,76,0.75) solid;
		border-left: 25px rgba(163,44,76,0.25) solid;
	}
	75% {
		border-top: 25px rgba(163,44,76,0.25) solid;
		border-right: 25px rgba(163,44,76,0.25) solid;
		border-bottom: 25px rgba(163,44,76,0.25) solid;
		border-left: 25px rgba(163,44,76,0.75) solid;
	}
	100% {
		border-top: 25px rgba(163,44,76,0.75) solid;
		border-right: 25px rgba(163,44,76,0.25) solid;
		border-bottom: 25px rgba(163,44,76,0.25) solid;
		border-left: 25px rgba(163,44,76,0.25) solid;
	}
}

@media screen and (max-width: 736px) { /*{SP}*/
	.loadingWrap {
		background-size: cover;
	}
	.countUnit {
		font-size:2rem;
	}
	.animation {
	  margin: 0 auto 30px;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.animation {
	  margin: 0 auto 20px;
	}
}









/* mainVisualWrap
------------------------------------------------------------------------ */
	.mainVisualWrap {
		position: relative;
		overflow: hidden;
		background: url("../../images/index/op2/mv_bg.jpg") center top / min((2320 / 1920 * 100%), 2320px) auto no-repeat,
					url("../../images/index/op2/mv_bg_02.jpg") center top / contain repeat-x,
					#cbd8e7;
	}
	.mainVisualWrap::before,
	.mainVisualWrap::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: center top / min(100%, 1920px) auto no-repeat;
		animation: mv_bg_bokeh_fadeInOut 3.5s infinite ease-out both;
	}
	.mainVisualWrap::before {
		background-image: url("../../images/index/op2/mv_bg_bokeh_01.png");
		transform-origin: left center;
	}
	.mainVisualWrap::after {
		background-image: url("../../images/index/op2/mv_bg_bokeh_02.png");
		transform-origin: right center;
		animation-duration: 4s;
		animation-delay: 1.1s;
	}
@keyframes mv_bg_bokeh_fadeInOut {
	0% {
		opacity: 0;
		scale: 1;
		rotate: 0deg;
	}
	30%, 50% {
		opacity: 1;
	}
	90% {
		opacity: 0;
		scale: 1.01;
		rotate: -.7deg;
	}
	100% {
		opacity: 0;
		scale: 1;
		rotate: 0deg;
	}
}

@media screen and (max-width: 1200px) { /*{belowTB}*/
}
@media screen and (max-width: 736px) { /*{SP}*/
	.mainVisualWrap {
		background-size: cover;
	}
	.mainVisualWrap::before,
	.mainVisualWrap::after {
		content: none;
	}
}







	.mainVisual {
		position: relative;
		width:100%;
		max-width: 1920px;
		aspect-ratio: 1920 / 980; /* 画像のサイズ @pc */
		overflow: hidden;
		line-height: 3;
		color: #222;
		font-family: var(--site-font_family-serif);
		letter-spacing: .15em;
		margin: 0 auto;
	}
	.mainVisual img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	.mainVisual [class*="scene"] {
		position: absolute;
		top:0;
		left:0;
		margin:0 auto;
		width: 100%;
		height:100%;
	}
	.mainVisual .scene01  { z-index: 1;}
	.mainVisual .scene02  { z-index: 2;}
	.mainVisual .scene03  { z-index: 3;}

@media screen and (max-width: 736px) { /*{SP}*/
	.mainVisual {
		aspect-ratio: 1000 / 1150; /* 画像のサイズ @sp */
		line-height: 2;
	}
}



	/*共通------------------------------*/
	.mainVisual p.skipClick,
	.mainVisual p.replayClick {opacity: 0;transition: all 0s ease 0s;}


/* btnReply btnSkip
------------------------------------------------------------------------ */
	.mainVisualWrap .btnBox {
		position: absolute;
		z-index: 100!important;
		line-height: 1;
		width: 100%;
		max-width: 1920px;
		margin: auto;

		inset: 0 0 auto;
		/*inset: auto 0 0;
		translate: 0 calc(min((73 / 1920 * 100vw), 73px) * -1);*/
		/*background: red;
		height: 10px;*/
	}

	.btnReply,
	.btnSkip {
		/* button要素クリア */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		/*color: inherit;*/
		font: inherit;
		background: transparent;
		border: none;
		border-radius: 0;
		/*cursor: pointer;*/

		/* リセット */
		display: block;
		position: absolute;
		inset: 7px auto auto 7px;
		line-height: 1.25;
		color: #fff;
		font-family: 'Cinzel', serif;
		/*font-size: 1.14em;*/
		font-size: clamp(1rem, (16 / 1200 * 100vw), 16px);
		letter-spacing: .04em;
		background-color: rgba(57, 56, 87, .9);
		padding: 5px 20px 5px calc(20px + .06em);
		cursor : pointer;
		transition: all 0.2s ease;

		/* 初期値:非表示（JS制御） */
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}

	.btnReply:hover,
	.btnSkip:hover {
		background-color: rgba(57, 56, 87, 1);
	}

	/*arrow*/
/*	.btnReply .arrow,
	.btnSkip .arrow {
		position: relative;
		padding-right:10px;
	}
	.btnReply .arrow::before,
	.btnSkip .arrow::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right:0;
		width: 8px;
		height: 8px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: translateY(-50%) rotate(45deg);
	}
*/

@media screen and (max-width: 1200px) { /*{belowTB}*/
	/*.btnReply,
	.btnSkip {
		top:auto;
		bottom:10px;
		right:auto;
		left:10px;
	}*/
}
@media screen and (max-width: 736px) { /*{SP}*/
	.mainVisualWrap .btnBox {
		inset: auto 0 0;
		translate: 0 0;
	}
	.btnReply,
	.btnSkip {
		inset: auto 5px 5px auto;
		/*font-size: 1em;*/
		font-size: clamp(1rem, (12 / 480 * 100vw), 12px);
	}
}




/*scene01---------------------*/
	.scene01 .pic01Wrap {
		display: grid;
		grid-template-columns: 1fr calc(1000 / 1920 * 100%);
	}
	.scene01 .txtBox {
		display: grid;
		place-content: center;
		font-size: min((33 / 1920 * 100vw), 33px);
		text-align: center;
		writing-mode: vertical-rl; /* 縦書き */
	}
	.scene01 .txtBoxInner {
		display: block;
	}
	.scene01 .txtBoxInner [class*="txt_"] {
	}
	.scene01 .txtBoxInner .num {
		line-height: 1.25;
		color: #a2576b;
		font-family: var(--site-font_family-en_6);
		font-size: calc(80 / 33 * 1em);
	}
	.scene01 .txtBoxInner .textCombine { /* 縦中横 */
		-webkit-text-combine: horizontal;
		text-combine-upright: all;
		margin-inline-start: -.12em; /* 微調整 */
	}
	.scene01 .picBox {
		position: relative;
		z-index: 0;
	}
	.scene01 .picBox .imgcapkeep {
		inset: auto 0 0 auto;
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.scene01 .pic01Wrap {
		display: block;
	}
	.scene01 .txtBox {
		display: block;
		position: absolute;
		inset: 0 0 auto;
		z-index: 1;
		font-size: clamp(17px, (33 / 1000 * 100vw), 33px);
		writing-mode: revert; /* 縦書き 解除 */
		padding: 1em .5em;
	}
	.scene01 .txtBoxInner {
		letter-spacing: .13em;
	}
	.scene01 .txtBoxInner .num {
		line-height: .65;
		color: #9b2e4b;
		font-size: calc(80 / 33 * 1em);
	}
	.scene01 .txtBoxInner .textCombine { /* 縦中横 解除 */
		-webkit-text-combine: revert;
		text-combine-upright: revert;
		margin-inline-start: 0; /* 微調整 解除 */
	}
	.scene01 .picBox {
	}
	.scene01 .picBox .imgcapkeep {
		inset: auto auto 0 0;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.scene01 .txtBox {
		font-size: clamp(12px, (17 / 480 * 100vw), 17px);
	}
}




/*animation*/
	/*シーン*/
	.scene01:not(.active) {
		opacity: 0;
	}
	.scene01.active .pic01Wrap {
		animation: scene01-pic01Wrap 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s both;
	}
			@keyframes scene01-pic01Wrap {
				0% {	opacity: 0;}
				100% {	opacity: 1;}
			}


	.scene01.active .picBox {
		animation: scene01-picBox .7s ease .5s both;
	}
			@keyframes scene01-picBox {
				0% {
					clip-path: inset(0 0 0 100%);
				}
				100% {
					clip-path: inset(0 0 0 0);
				}
			}


	.scene01.active .picBox img {
		animation: scene01-picBox_img 3.4s ease .4s both;
	}
			@keyframes scene01-picBox_img {
				0% {
					scale: 1.5;
					filter: brightness(1.5);
				}
				70% {
					filter: brightness(1);
				}
				100% {
					scale: 1;
				}
			}


	.scene01.active .txtBoxInner .txt_1,
	.scene01.active .txtBoxInner .txt_2 {
		mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
		mask-size: 250% 250%;
		mask-repeat: no-repeat;
		mask-position: 130% 130%;
		animation: scene01-txtBoxInner_txt 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) .65s both;
	}
	.scene01.active .txtBoxInner .txt_2 {
		animation-delay: 1.3s;
	}
			@keyframes scene01-txtBoxInner_txt {
				0% {
					mask-position: 130% 130%;
				}
				100% {
					mask-position: 0 0;
				}
			}


	.scene01.active .picBox .picImgWrap {
		animation: scene01-picImgWrap 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 5.5s both;
		transform-origin: 65% 30%; /* feeling. */
	}
			@keyframes scene01-picImgWrap {
				0% {
					opacity: 1;
					scale: 1;
				}
				90% {
					opacity: 0;
				}
				100% {
					opacity: 0;
					scale: 1.3;
				}
			}


	.scene01.active {
		animation: scene01 .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 5.7s both;
	}
			@keyframes scene01 {
				0% {	opacity: 1;}
				100% {	opacity: 0;}
			}




/*scene02---------------------*/
	.scene02 .pic01Wrap {
		display: grid;
		grid-template-columns: calc(1630 / 1920 * 100%) 1fr;
	}
	.scene02 .txtBox {
		display: grid;
		place-content: center;
		font-size: min((33 / 1920 * 100vw), 33px);
		text-align: center;
		writing-mode: vertical-rl; /* 縦書き */
	}
	.scene02 .txtBoxInner {
		display: block;
		position: relative;
		padding: 1.35em .45em;
	}
	.scene02 .txtBoxInner [class*="txt_"] {
	}
	.scene02 .txtBoxInner .num {
		line-height: 1.25;
		color: #a2576b;
		font-family: var(--site-font_family-en_6);
		font-size: calc(80 / 33 * 1em);
	}
	.scene02 .txtBoxInner .textCombine { /* 縦中横 */
		-webkit-text-combine: horizontal;
		text-combine-upright: all;
		margin-inline-start: -.12em; /* 微調整 */
	}
	.scene02 .txtBoxInner .sideLine {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		border: 0 solid #a2576b;
		border-width: 0 1px;
		pointer-events: none;
	}
	.scene02 .picBox {
		order: -1;
		position: relative;
		z-index: 0;
	}

	/* -- Individual -- */
	.scene02 .txtBoxInner .txt_1 {
		letter-spacing: .2em;
	}
	.scene02 .txtBoxInner .txt_1 .num {
		display: inline-block;
		position: relative;
	}
	.scene02 .txtBoxInner .txt_1 .num::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: #fff;
		width: 1em;
		aspect-ratio: 1;
		margin: auto;
		border-radius: 100%;
		box-shadow: 0 0 .4em .4em #fff, 0 0 2px 2px #fff inset;
		opacity: .55;
	}
	.scene02 .picBox .attentionSmallBg,
	.scene02 .picBox .attentionSmall {
		position: absolute;
		inset: auto auto .5% 0;
		z-index: 5;
		line-height: 1.15;
		color: #fff;
		font-family: inherit;
		font-size: min((33 / 1920 * 100vw), 33px);
		letter-spacing: .1em;
		padding: .3em 1.5em .3em .75em;
	}
	.scene02 .picBox .attentionSmall {
		text-shadow: 0 0 1px rgba(255, 255, 255, .12), 0 0 3px rgba(255, 255, 255, .05);
	}
	.scene02 .picBox .attentionSmallBg {
		z-index: 4;
		width: 21.5em;
		height: calc(1.15lh + .3em + .3em);
		background: linear-gradient(to right, rgba(72, 80, 119, .9) 78%, rgba(72, 80, 119, 0) 100%);
		mix-blend-mode: multiply;
	}
	.scene02 .picBox .attentionSmall .num {
		display: inline-block;
		line-height: 1;
		font-size: 1.2em;
	}
	.scene02 .picBox .attentionSmall .sml {
		font-size: .697em;
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.scene02 .pic01Wrap {
		display: block;
	}
	.scene02 .txtBox {
		display: block;
		position: absolute;
		inset: 14% 0 auto;
		z-index: 1;
		font-size: clamp(17px, (33 / 1000 * 100vw), 33px);
		writing-mode: revert; /* 縦書き 解除 */
		padding: 0 .5em;
	}
	.scene02 .txtBoxInner {
		display: inline-block;
		position: relative;
		padding: .45em 1.35em;
	}
	.scene02 .txtBoxInner::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: #fff;
		border-radius: .5em;
		box-shadow: 0 0 40px 45px #fff;
		opacity: .43;
	}
	.scene02 .txtBoxInner::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		width: 120%;
		height: 200%;
		background: url("../../images/index/op2/s02_t01@sp.png") center center / 100% auto no-repeat;
		margin: auto auto auto -10%;
	}
	.scene02 .txtBoxInner .num {
		line-height: 1.05;
		color: #9b2e4b;
		font-size: calc(80 / 33 * 1em);
	}
	.scene02 .txtBoxInner .textCombine { /* 縦中横 解除 */
		-webkit-text-combine: revert;
		text-combine-upright: revert;
		margin-inline-start: 0; /* 微調整 解除 */
	}
	.scene02 .txtBoxInner .sideLine {
		border-width: 1px 0;
	}
	.scene02 .picBox {
	}

	/* -- Individual -- */
	.scene02 .txtBoxInner .txt_1 {
	}
	.scene02 .txtBoxInner .txt_1 .num {
		text-shadow: -.5px -.5px 0 rgba(255, 255, 255, .6), 1px 1px 0 rgba(0, 0, 0, .05);
		letter-spacing: .04em;
	}
	.scene02 .txtBoxInner .txt_1 .num::before {
		opacity: .2;
	}

	.scene02 .picBox .attentionSmallBg,
	.scene02 .picBox .attentionSmall {
		inset: auto auto .6% 0;
		font-size: clamp(19px, (39 / 1000 * 100vw), 39px);
		letter-spacing: .04em;
		padding: .3em 1.2em .3em .6em;
	}
	.scene02 .picBox .attentionSmall {
		text-shadow: 0 0 1px rgba(255, 255, 255, .12), 0 0 3px rgba(255, 255, 255, .05);
	}
	.scene02 .picBox .attentionSmallBg {
		width: 19.75em;
		height: calc(1.15lh + .3em + .3em);
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.scene02 .txtBox {
		font-size: clamp(12px, (17 / 480 * 100vw), 17px);
	}
	.scene02 .picBox .attentionSmallBg,
	.scene02 .picBox .attentionSmall {
		font-size: clamp(12px, (19 / 480 * 100vw), 19px);
	}
}




/*animation*/
	/*シーン*/
	.scene02:not(.active) {
		opacity: 0;
	}
	.scene02.active .pic01Wrap {
		animation: scene02-pic01Wrap 2.4s ease 0s both;
	}
			@keyframes scene02-pic01Wrap {
				0% {
					opacity: 0;
					filter: brightness(1.5);
				}
				70% {
					filter: brightness(1);
				}
				100% {
					opacity: 1;
				}
			}


@media screen and (max-width: 736px) {
	.scene02.active .txtBoxInner::after {
		animation: scene02-txtBoxInnerAfter-SP 5s ease .6s both infinite;
		transform-origin: center bottom;
	}
}
			@keyframes scene02-txtBoxInnerAfter-SP {
				0% {
					opacity: .1;
					scale: 1;
				}
				50% {
					opacity: 1;
				}
				70% {
					scale: 1.05;
				}
				100% {
					opacity: 0;
					scale: 1;
				}
			}


	.scene02.active .txtBoxInner .sideLine {
		animation: scene02-sideLine 2.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s both;
	}
			@keyframes scene02-pic01Wrap {
				0% {
					opacity: 0;
					filter: brightness(2);
				}
				70% {
					filter: brightness(1);
				}
				100% {
					opacity: 1;
				}
			}


	.scene02.active .txtBoxInner .txt_1 {
		mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
		mask-size: 250% 250%;
		mask-repeat: no-repeat;
		mask-position: 130% 130%;
		animation: scene02-txtBox_txt 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) .75s both;
	}
			@keyframes scene02-txtBox_txt {
				0% {
					mask-position: 130% 130%;
				}
				25%, 99% {
					mask-position: 0 0;
				}
				100% {
					mask: revert;
				}
			}


	.scene02.active .txtBoxInner .txt_1 .num::before {
		animation: scene02-txtBox_txt_numBefore 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 5.6s both infinite;
	}
			@keyframes scene02-txtBox_txt_numBefore {
				0% {		opacity: 0;}
				40%, 55% {	opacity: .45;}
				100% {		opacity: 0;}
			}


@media screen and (max-width: 736px) {
	.scene02.active .txtBoxInner .txt_1 .num::before {
		animation-name: scene02-txtBox_txt_numBefore-SP;
	}
}
			@keyframes scene02-txtBox_txt_numBefore-SP {
				0% {		opacity: 0;}
				40%, 55% {	opacity: .1;}
				100% {		opacity: 0;}
			}


	.scene02.active .txtBoxInner .sideLine {
		animation: scene02-txtBox_sideLine 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s both;
	}
			@keyframes scene02-txtBox_sideLine {
				0% {
					clip-path: inset(0 0 100%);
				}
				100% {
					clip-path: inset(0 0 0);
				}
			}


@media screen and (max-width: 736px) {
	.scene02.active .txtBoxInner .sideLine {
		animation-name: scene02-txtBox_sideLine-SP;
	}
}
			@keyframes scene02-txtBox_sideLine-SP {
				0% {
					clip-path: inset(0 100% 0 0);
				}
				100% {
					clip-path: inset(0 0 0 0);
				}
			}


	.scene02.active .picBox .attentionSmallBg {
		animation: scene02-picBox_attentionSmallBg 4.5s ease-out 2s both;
	}
			@keyframes scene02-picBox_attentionSmallBg {
				0% {	opacity: .1;}
				100% {	opacity: 1;}
			}