@charset "utf-8";

/* =======================================================================================
	PAGE 
======================================================================================= */
/* ------------------------------------------------------------------------
 mainVisualWrap
------------------------------------------------------------------------ */
	.mainVisualWrap {
		overflow: hidden;
		position: relative;
		font-family: var(--site-font_family-serif);
		
		aspect-ratio: var(--mv-aspect_ratio-h) / var(--mv-aspect_ratio-v);
	}
	.mainVisualWrap .imgcapkeep {
		z-index: 50;
	}

@media screen and (min-width: 900.02px) {
	.mainVisualWrap {
		--mv-aspect_ratio-h: 1920;
		--mv-aspect_ratio-v: 1081;
	}
}
@media screen and (max-width: 900px) {
	.mainVisualWrap {
		--mv-aspect_ratio-h: 800;
		--mv-aspect_ratio-v: 850;
	}
}
@media screen and (max-width: 480px) {
}


/* ------------------------------------------------------------------------
scene common
------------------------------------------------------------------------ */
	.mainVisualWrap div[class*="scene"] {
		overflow: hidden;
		position: absolute;
		aspect-ratio: var(--mv-aspect_ratio-h) / var(--mv-aspect_ratio-v);
		width: 100%;
	}
	.mainVisualWrap .picUnit {
		aspect-ratio: var(--mv-aspect_ratio-h) / var(--mv-aspect_ratio-v);
		width: 100%;
	}
@media screen and (min-width: 900.02px) {
	.mainVisualWrap div[class*="scene"],
	.mainVisualWrap .picUnit {
	}
}
@media screen and (max-width: 900px) {
	.mainVisualWrap div[class*="scene"],
	.mainVisualWrap .picUnit {
	}
}


/* ------------------------------------------------------------------------
scene01 
------------------------------------------------------------------------ */
	.mainVisualWrap div.scene01 {
		z-index: 30;
		
		transform-origin: bottom center;
		
	}

/* txtUnit */
	.scene01 .txtUnit {
		position: absolute;
		z-index: 31;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		text-align: center;
	}
	.scene01 .txtUnit [class*="Copy"] {
		--M-fluidFontSize-max-fontsize: 38;
		--M-fluidFontSize-min-fontsize: 14;
		--M-fluidFontSize-max-viewport: 1200;
		--M-fluidFontSize-min-viewport: 736;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
		min-height: 0.001vw;		/* for safari | font-sizeにclamp()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
	}
	.scene01 .txtUnit span.symbol {
		display: inline-block;
		margin: 0 0.3em;
	}

	.scene01 .txtUnit .mainCopy {
		--M-fluidFontSize-max-fontsize: 103;
		--M-fluidFontSize-min-fontsize: 50;
		
		letter-spacing: 0.15em;
		line-height: 1.5;
		font-weight: 500;
		margin-top: 0.10em;
	}
	.scene01 .txtUnit .mainCopy em {
		display: inline-block;
		color: #005e9a;
		margin: 0 0.2em 0 0.7em;
	}

	.scene01 .txtUnit .subCopy {		
		letter-spacing: 0.15em;
	}
	.scene01 .txtUnit .subCopy em {
		font-size: 1.4em;
	}
	.scene01 .txtUnit .subCopy:nth-of-type(3) {
		--M-fluidFontSize-max-fontsize: 35;
		--M-fluidFontSize-min-fontsize: 14;
	}

@media screen and (max-width: 900px) {
}
@media screen and (max-width: 480px) {
}


/* picUnit */
	.scene01 .picUnit {
		position: relative;
	}
	.scene01 .picUnit .picItem img {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		
		transform: translateY( calc(100% - (var(--mv-aspect_ratio-v) * 100% / 1944)) );
		/*transform: translateY(calc(-100% + 100vw * var(--mv-aspect_ratio-v) / var(--mv-aspect_ratio-h)));*/
	}
	.scene01 .picUnit .picItem img {
	}
@media screen and (min-width: 900.02px) {
}
@media screen and (max-width: 900px) {
	.scene01 .picUnit .picItem img {
		transform: translateY( calc(100% - (var(--mv-aspect_ratio-v) * 100% / 1225)) );
	}
}
@media screen and (max-width: 480px) {
}


/* ------------------------------------------------------------------------
scene02
------------------------------------------------------------------------ */
	.mainVisualWrap div.scene02 {
		z-index: 20;
		
		transform-origin: bottom center;

	}

/* txtUnit */
	.scene02 .txtUnit {
		position: absolute;
		z-index: 31;
		top: 12%;
		left: 50%;
		transform: translate(-50%, 0);
		width: 90%;
		text-align: center;
	}

	.scene02 .txtUnit .mainCopy {
		--M-fluidFontSize-max-fontsize: 58;
		--M-fluidFontSize-min-fontsize: 25;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 736;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
		min-height: 0.001vw;		/* for safari | font-sizeにclamp()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
		
		letter-spacing: 0.15em;
		line-height: 1.2;
		font-weight: 500;
	}
	.scene02 .txtUnit .mainCopy em {
		display: inline-block;
		color: #005e9a;
		font-size: 1.5em;
	}
	.scene02 .txtUnit .mainCopy strong {
		display: inline-block;
		font-size: 1.1em;
	}

@media screen and (max-width: 900px) {
	.scene02 .txtUnit {
		top: 25%;
	}
	.scene02 .txtUnit .mainCopy {
		--M-fluidFontSize-max-fontsize: 38;
		--M-fluidFontSize-min-fontsize: 20;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
	}
}
@media screen and (max-width: 480px) {
}
/* picUnit */
	.scene02 .picUnit {
		position: relative;
	}
	.scene02 .picUnit .picItem .circleIcon {
		width: calc(100vw * 231 / var(--mv-aspect_ratio-h));
		aspect-ratio: 1 / 1;
	}

	.scene02 .picUnit .picItem.pic_sc01 {
		position: absolute;
		bottom: 1vw;
		left: 4vw;
		
		display: flex;
		align-items: flex-end;
		width: calc(100% * 732 / var(--mv-aspect_ratio-h));
	}
	.scene02 .picUnit .picItem.pic_sc01 p:not(.circleIcon) {
		width: calc(454 / 732 * 100%);
		margin-bottom: 11%;
	}
	.scene02 .picUnit .picItem.pic_sc01 .circleIcon {
		position: relative;
	}

	.scene02 .picUnit .picItem.pic_sc02 {
		position: absolute;
		bottom: 37%;
		right: 0;
		
		width: calc(100% * 470 / var(--mv-aspect_ratio-h));
	}
	.scene02 .picUnit .picItem.pic_sc02 p:not(.circleIcon) {
		--after-line: 0;
		width: calc(443 / 470 * 100%);
	}
	.scene02 .picUnit .picItem.pic_sc02 .circleIcon {
		margin-left: auto;
		margin-right: 10px;
	}
	.scene02 .picUnit .picItem.pic_sc02 p:not(.circleIcon)::after {
		content: "";
		display: block;
		width: 1px;
		height: 40px;
		background: #865798;
		margin: 0 auto;
		transform-origin: bottom center;
		transform: scaleY(var(--after-line));
	}

@media screen and (max-width: 900px) {
	.scene02 .picUnit .picItem .circleIcon {
		width: calc(100vw * 150 / var(--mv-aspect_ratio-h));
	}
	.scene02 .picUnit .picItem.pic_sc01 {
		bottom: 2vw;
		left: 1.5vw;
		
		width: calc(100% * 300 / var(--mv-aspect_ratio-h));
	}
	.scene02 .picUnit .picItem.pic_sc01 p:not(.circleIcon) {
		width: calc(223 / 300 * 100%);
		margin-bottom: 0;
	}
	.scene02 .picUnit .picItem.pic_sc01 .circleIcon {
		position: absolute;
		bottom: 100%;
		left: 0;
		margin-bottom: .5em;
	}
	.scene02 .picUnit .picItem.pic_sc02 {
		bottom: 13%;
		right: 1vw;
		
		width: calc(100% * 262 / var(--mv-aspect_ratio-h));
		text-align: right;
	}
	.scene02 .picUnit .picItem.pic_sc02 p:not(.circleIcon) {
		width: calc(262 / 262 * 100%);
	}
	.scene02 .picUnit .picItem.pic_sc02 .circleIcon {
		margin-right: 0px;
	}
	.scene02 .picUnit .picItem.pic_sc02 p:not(.circleIcon)::after {
		height: 20px;
	}
}
@media screen and (max-width: 480px) {
}


/* ------------------------------------------------------------------------
scene03
------------------------------------------------------------------------ */
	.mainVisualWrap div.scene03 {
		z-index: 10;
	}
	.scene03 .txtUnit {
		position: absolute;
		z-index: 31;
		top: 3%;
		right: 2%;
		text-align: center;

		--M-fluidFontSize-max-fontsize: 36;
		--M-fluidFontSize-min-fontsize: 25;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 736;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
		min-height: 0.001vw;		/* for safari | font-sizeにclamp()使用時必須 */
		font-size: var(--M-fluidFontSize-fontSize);
	
		color: #FFF;
		text-shadow: 3px 3px 13px rgba(68, 96, 159, 1), 3px 3px 13px rgba(68, 96, 159, 1), 1px 1px 6px rgba(68, 96, 159, 1);
		writing-mode: vertical-rl;
		text-align: left;
		letter-spacing: .2em;
	}

@media screen and (max-width: 900px) {
	.scene03 .txtUnit {
		top: 19%;
		right: 4%;

		--M-fluidFontSize-max-fontsize: 34;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 736;
		--M-fluidFontSize-min-viewport: 480;
		--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
	}
	.scene03 .picUnit .picItem {
		width: 100%;
		height: 100%;
	}
	.scene03 .picUnit .picItem img {
		height: 100%;
		width: auto;
		max-width: none;
		/*transform: translateX(calc(-100% + 100vw));*/
	}
}
@media screen and (max-width: 480px) {
}






/* ------------------------------------------------------------------------
animationBtn
------------------------------------------------------------------------ */
	.mainVisualWrap .animationBtn {
		position: absolute;
		z-index: 101;
		top: 10px;
		left: 10px;
		width: 8em;
		height: 30px;
	}
	.mainVisualWrap .animationBtn li {
		opacity: 0;
		pointer-events: none;
		cursor: none;
		
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 8em;
		text-align: center;
		line-height: 30px;
		color: #FFF;
		background: #000;
		transition: all 0.3s ease;
	}
	.mainVisualWrap .animationBtn li.is-active {
		opacity: 1;
		pointer-events: all;
		cursor: pointer;
	}
	.mainVisualWrap .animationBtn li.is-active:hover {
		opacity: .9;
		transform: scale(1.2);
		transition: 0.3s all ease;
	}
@media screen and (max-width: 900px) {
	.mainVisualWrap .animationBtn {
		left: auto;
		right: 10px;
		height: 20px;
		top: auto;
		bottom: 2em;
		font-size: 0.8em;
	}
	.mainVisualWrap .animationBtn li {
		line-height: 20px;
	}
}

/* ------------------------------------------------------------------------
controlBtn
------------------------------------------------------------------------ */
	.mainVisualWrap .controlBtn {
		position: absolute;
		display: flex;
		gap: 10px;
		z-index: 101;
		bottom: 10px;
		left: 10px;
		height: 30px;
	}
	.mainVisualWrap .controlBtn li {
		opacity: 0;
		pointer-events: none;
		
		position: relative;
		display: block;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		color: #FFF;
		background: #000;
		transition: all 0.3s ease;
	}

	.mainVisualWrap .controlBtn li.pauseBtn::after {
		content: "";
		display: block;
		position: absolute;
		top: 8px;
		left: 8px;
		width: 12px;
		height: 14px;
		border: 2px solid #FFF;
		border-width: 0px 3px;
	}
	.mainVisualWrap .controlBtn li.resumeBtn::after {
		content: "";
		display: block;
		position: absolute;
		top: 7px;
		left: 10px;
		width: 0px;
		height: 0px;
		border: 10px solid transparent;
		border-width: 8px 10px;
		border-left-color: #FFF;
	}
	.mainVisualWrap .controlBtn li.is-click {
		opacity: .6;
		pointer-events: none;
		cursor: none;
	}
	.mainVisualWrap .controlBtn li.is-active {
		opacity: 1;
		pointer-events: all;
		cursor: pointer;
	}
	.mainVisualWrap .controlBtn li.is-active:hover {
		opacity: .9;
		transform: scale(1.2);
		transition: 0.3s all ease;
	}


@media screen and (max-width: 900px) {
	.mainVisualWrap .controlBtn {
		left: auto;
		right: calc(20px + 8em);
		bottom: 2em;
		gap: 5px;
		font-size: 0.8em;
	}
	.mainVisualWrap .controlBtn {
		height: 20px;
	}
	.mainVisualWrap .controlBtn li {
		width: 20px;
		height: 20px;
	}
	.mainVisualWrap .controlBtn li.pauseBtn::after,
	.mainVisualWrap .controlBtn li.resumeBtn::after {
		transform: scale(0.6) translate(-60%, -70%);
	}
}
@media screen and (max-width: 480px) {
}