@charset "utf-8";

.l-opening {
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #c00;
	background: white;
}
.l-opening > * {
	z-index: 2;
}
.l-opening.is-fade {
	opacity: 0;
	transition: opacity .1s cubic-bezier(.3,1,.7,1);
}
.op_bg {
	z-index: 1;
	position: absolute;
}
.op_bg svg,
.op_logo svg,
.op_canvas svg {
	fill: currentcolor;
}
@media (orientation: landscape) {
	.op_bg {
		top: calc(50% - 72vw);
		left: calc(50% - 72vw);
		width: 144vw;
		height: 144vw;
	}
}
@media (orientation: portrait) {
	.op_bg {
		top: calc(50% - 72vh);
		left: calc(50% - 72vh);
		width: 144vh;
		height: 144vh;
		
	}
}
.op_bg .circle {
	width: 100%;
	height: auto;
	opacity: 0;
	transform: scale(0);
}

.op_skip {
	cursor: pointer;
	position: absolute;
	right: 16px;
	bottom: 8px;
	padding: 1em;
	color: black;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .1em;
	opacity: 0;
}
.op_skip.is-active {
	opacity: 1;
	transition: opacity .3s;
}
.op_skip .arr {
	margin-left: .5em;
}
@media (hover: hover) {
	.op_skip .arr {
		stroke-dasharray: 42px 42px;
		transition: stroke-dashoffset .4s cubic-bezier(.3,1,.7,1);)
	}
	.op_skip:hover .arr {
		stroke-dashoffset: 84px;
	}
}
@media screen and (max-width: 639px) {
	.op_skip {
		font-size: 14px;
	}
}

/* :::::: logo :::::: */
.op_logo {
	z-index: 3;
	position: absolute;
	top: calc(50% - 37px);
	left: calc(50% - 156px);
	width: 312px;
	height: 74px;
	color: white;
	line-height: 0;
	text-align: center;
	opacity: 0;
}
.op_logo svg {
	height: auto;
}
.op_logo .sub {
	margin-top: 18px;
}

/* :::::: canvas :::::: */
.op_canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
 	opacity: 0;
}

/* :::::: japan :::::: */
.op_japan {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	perspective: 500px;
}
.op_japan .jp {
	position: absolute;
	top: calc(50% - 240px);
	left: calc(50% - 240px);
	width: 480px;
	height: 480px;
	transform-style: preserve-3d;
	transform: translateZ(499px) translate(-70px, -70px);
}

/* :::::: object :::::: */
.op_obj_wrap {
	position: absolute;
	top: calc(50% - 240px);
	left: calc(50% - 240px);
	width: 480px;
	height: 480px;
	perspective: 500px;
}
.op_object {
	position: relative;
	width: 480px;
	height: 480px;
	transform-style: preserve-3d;
}
@media screen and (max-width: 639px) {
	.op_japan .jp,
	.op_obj_wrap {
		top: calc(50% - 180px);
		left: calc(50% - 180px);
	}
	.op_japan .jp,
	.op_obj_wrap,
	.op_object {
		width: 360px;
		height: 360px;
	}
	.op_object .c,
	.op_object .i {
		width: 45px;
		height: 45px;
	}
}
.op_object .obj {
	position: absolute;
	transform-style: preserve-3d;
	will-change: transform;
	filter: drop-shadow(0 0 12px white);
}
.op_object .obj_wrap {
	display: block;
}
.op_object .obj .c {
	display: block;
	position: absolute;
}
.op_object .obj .i {
	display: block;
	transform: scale(0);
}
.op_object .obj.o1 { top: 0; right: calc(50% - 30px); }
.op_object .obj.o2 { top: calc(19% - 30px); right: calc(19% - 30px); }
.op_object .obj.o3 { top: calc(50% - 30px); right: 0; }
.op_object .obj.o4 { bottom: calc(19% - 30px); right: calc(19% - 30px); }
.op_object .obj.o5 { bottom: 0; left: calc(50% - 30px); }
.op_object .obj.o6 { bottom: calc(19% - 30px); left: calc(19% - 30px); }
.op_object .obj.o7 { bottom: calc(50% - 30px); left: 0; }
.op_object .obj.o8 { top: calc(19% - 30px); left: calc(19% - 30px); }

.op_object .obj.o1 { transform: translate(174px, 24px) scale(0); }
.op_object .obj.o2 { transform: translate(-43px, 276px) scale(0); }
.op_object .obj.o3 { transform: translate(-128px, 140px) scale(0); }
.op_object .obj.o4 { transform: translate(-120px, -8px) scale(0); }
.op_object .obj.o5 { transform: translate(-30px, -100px) scale(0); }
.op_object .obj.o6 { transform: translate(140px, -50px) scale(0); }
.op_object .obj.o7 { transform: translate(120px, 100px) scale(0); }
.op_object .obj.o8 { transform: translate(-27px, 225px) scale(0); }

/* 639px以下は75%縮小 */
@media screen and (max-width: 639px) {
	.op_object .obj.o1 { transform: translate(130.5px, 18px) scale(0); }
	.op_object .obj.o2 { transform: translate(-32.25px, 207px) scale(0); }
	.op_object .obj.o3 { transform: translate(-96px, 105px) scale(0); }
	.op_object .obj.o4 { transform: translate(-90px, -6px) scale(0); }
	.op_object .obj.o5 { transform: translate(-22.5px, -75px) scale(0); }
	.op_object .obj.o6 { transform: translate(105px, -37.5px) scale(0); }
	.op_object .obj.o7 { transform: translate(90px, 75px) scale(0); }
	.op_object .obj.o8 { transform: translate(-20.25px, 168.75px) scale(0); }
}

.op_obj_wrap.loop {
	animation: op_symboloop 40s linear;
}
.op_obj_wrap.loop .obj_wrap {
	animation: op_symboloop 40s linear reverse;
}
@keyframes op_symboloop {
	from { transform: rotate(0); }
	to { transform: rotate(360deg); }
}

/* 赤円 */
.op_bg.is-zoom .circle {
	animation: bgZoom .6s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes bgZoom {
	30%, to { opacity: 1; }
	to { transform: none; }
}

/* ロゴ */
.op_logo.is-fadeIn {
	animation: logoIn .2s forwards;
}
@keyframes logoIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.op_logo.is-fadeOut {
	animation: logoOut .4s forwards;
}
@keyframes logoOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* 日本 */
.op_canvas.is-visible {
	opacity: 1;
}
.op_japan.is-appear .jp {
	animation: jpAppear 1s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes jpAppear {
	to { transform: scale(.6); }
}
.op_japan.is-out .jp {
	transform: scale(.6);
	animation: jpZoomout 3s linear forwards;
}
@keyframes jpZoomout {
	50% { transform: scale(.55); animation-timing-function: cubic-bezier(.7,0,.3,1); }
	70% { opacity: 1; animation-timing-function: ease; }
	to { opacity: 0; transform: scale(.3); }
}

/* 全体を拡大しながら拠点出現 */
.op_object.is-out {
	transform: scale(.6);
	animation: objZoomout 1.5s linear forwards;
}
@keyframes objZoomout {
	to { transform: scale(.55); }
}
.op_object.is-appear .obj {
	transition: transform .2s cubic-bezier(.3,1.8,.7,1);
}
.op_object.is-appear .obj.o1 { transform: translate(174px, 24px) scale(.2); }
.op_object.is-appear .obj.o2 { transform: translate(-43px, 276px) scale(.2); }
.op_object.is-appear .obj.o3 { transform: translate(-128px, 140px) scale(.2); }
.op_object.is-appear .obj.o4 { transform: translate(-120px, -8px) scale(.2); }
.op_object.is-appear .obj.o5 { transform: translate(-30px, -100px) scale(.2); }
.op_object.is-appear .obj.o6 { transform: translate(140px, -50px) scale(.2); }
.op_object.is-appear .obj.o7 { transform: translate(120px, 100px) scale(.2); }
.op_object.is-appear .obj.o8 { transform: translate(-27px, 225px) scale(.2); }
.op_object.is-appear .obj.o2 { transition-delay: .1s; }
.op_object.is-appear .obj.o3 { transition-delay: .2s; }
.op_object.is-appear .obj.o4 { transition-delay: .3s; }
.op_object.is-appear .obj.o5 { transition-delay: .4s; }
.op_object.is-appear .obj.o6 { transition-delay: .5s; }
.op_object.is-appear .obj.o7 { transition-delay: .6s; }
.op_object.is-appear .obj.o8 { transition-delay: .7s; }

@media screen and (max-width: 639px) {
	.op_object.is-appear .obj.o1 { transform: translate(130.5px, 18px) scale(.2); }
	.op_object.is-appear .obj.o2 { transform: translate(-32.25px, 207px) scale(.2); }
	.op_object.is-appear .obj.o3 { transform: translate(-96px, 105px) scale(.2); }
	.op_object.is-appear .obj.o4 { transform: translate(-90px, -6px) scale(.2); }
	.op_object.is-appear .obj.o5 { transform: translate(-22.5px, -75px) scale(.2); }
	.op_object.is-appear .obj.o6 { transform: translate(105px, -37.5px) scale(.2); }
	.op_object.is-appear .obj.o7 { transform: translate(90px, 75px) scale(.2); }
	.op_object.is-appear .obj.o8 { transform: translate(-20.25px, 168.75px) scale(.2); }
}

/* 全体拡大しつつ拠点ひとつずつも分散拡大 */
.op_object.is-in {
	transform: scale(.55);
	animation: objZoomin 1s forwards;
}
@keyframes objZoomin {
	to { transform: none; }
}
.op_object.is-appear.is-pop .obj {
	transition: transform 1s cubic-bezier(.8,0,.2,1);
}
.op_object.is-pop .obj.o8 { transition-delay: 0s; }
.op_object.is-pop .obj.o1 { transform: translate3d(200px, 0, 160px) rotateY(0); }
.op_object.is-pop .obj.o2 { transform: translate3d(-16px, 160px, 320px) rotateY(0); }
.op_object.is-pop .obj.o3 { transform: translate3d(64px, 200px, -64px) rotateY(0); }
.op_object.is-pop .obj.o4 { transform: translate3d(-112px, 24px, 200px) rotateY(0); }
.op_object.is-pop .obj.o5 { transform: translate3d(-112px, 40px, 0) rotateY(0); }
.op_object.is-pop .obj.o6 { transform: translate3d(136px, -240px, -200px) rotateY(0); }
.op_object.is-pop .obj.o7 { transform: translate3d(64px, -120px, 0) rotateY(0); }
.op_object.is-pop .obj.o8 { transform: translate3d(-200px, 200px, -80px) rotateY(0); }

/* Z軸はまま */
@media screen and (max-width: 639px) {
	.op_object.is-pop .obj.o1 { transform: translate3d(150px, 0, 160px) rotateY(0); }
	.op_object.is-pop .obj.o2 { transform: translate3d(-12px, 120px, 320px) rotateY(0); }
	.op_object.is-pop .obj.o3 { transform: translate3d(48px, 150px, -64px) rotateY(0); }
	.op_object.is-pop .obj.o4 { transform: translate3d(-84px, 18px, 200px) rotateY(0); }
	.op_object.is-pop .obj.o5 { transform: translate3d(-84px, 30px, 0) rotateY(0); }
	.op_object.is-pop .obj.o6 { transform: translate3d(102px, -180px, -200px) rotateY(0); }
	.op_object.is-pop .obj.o7 { transform: translate3d(48px, -90px, 0) rotateY(0); }
	.op_object.is-pop .obj.o8 { transform: translate3d(-150px, 150px, -80px) rotateY(0); }
}

/* 全体を360度回転 (ひとつずつは常に正面を向くように逆回転) */
.op_object.is-appear.is-pop.is-rotation,
.op_object.is-appear.is-pop.is-rotation .obj {
	transition: transform 2s cubic-bezier(.7,0,.3,1);
}
.op_object.is-rotation { transform: rotateY(360deg); }
.op_object.is-rotation .obj.o1 { transform: translate3d(160px, 40px, 160px) rotateY(-360deg); }
.op_object.is-rotation .obj.o2 { transform: translate3d(-16px, 160px, 320px) rotateY(-360deg); }
.op_object.is-rotation .obj.o3 { transform: translate3d(64px, 200px, -64px) rotateY(-360deg); }
.op_object.is-rotation .obj.o4 { transform: translate3d(-112px, -56px, 200px) rotateY(-360deg); }
.op_object.is-rotation .obj.o5 { transform: translate3d(-112px, 40px, 0) rotateY(-360deg); }
.op_object.is-rotation .obj.o6 { transform: translate3d(136px, -360px, -200px) rotateY(-360deg); }
.op_object.is-rotation .obj.o7 { transform: translate3d(14px, -100px, 0) rotateY(-360deg); }
.op_object.is-rotation .obj.o8 { transform: translate3d(-200px, 200px, -80px) rotateY(-360deg); }

@media screen and (max-width: 639px) {
	.op_object.is-rotation .obj.o1 { transform: translate3d(120px, 30px, 160px) rotateY(-360deg); }
	.op_object.is-rotation .obj.o2 { transform: translate3d(-12px, 120px, 320px) rotateY(-360deg); }
	.op_object.is-rotation .obj.o3 { transform: translate3d(48px, 150px, -64px) rotateY(-360deg); }
	.op_object.is-rotation .obj.o4 { transform: translate3d(-84px, -42px, 200px) rotateY(-360deg); }
	.op_object.is-rotation .obj.o5 { transform: translate3d(-84px, 30px, 0) rotateY(-360deg); }
	.op_object.is-rotation .obj.o6 { transform: translate3d(102px, -270px, -200px) rotateY(-360deg); }
	.op_object.is-rotation .obj.o7 { transform: translate3d(10.5px, -75px, 0) rotateY(-360deg); }
	.op_object.is-rotation .obj.o8 { transform: translate3d(-150px, 150px, -80px) rotateY(-360deg); }
}

/* 全体を360度逆回転 (ひとつずつは常に正面を向くように逆回転しつつ円を描く配置に戻す) */
.op_object.is-circle { transform: rotateY(0); }
.op_object.is-circle .obj.o1,
.op_object.is-circle .obj.o2,
.op_object.is-circle .obj.o3,
.op_object.is-circle .obj.o4,
.op_object.is-circle .obj.o5,
.op_object.is-circle .obj.o6,
.op_object.is-circle .obj.o7,
.op_object.is-circle .obj.o8 { transform: translate3d(0, 0, 0) rotateY(0); }

/* 変身 */
.op_object.is-transform .obj .c {
	transform: scale(0);
	transition: transform .3s cubic-bezier(.7,0,.3,1);
}
.op_object.is-transform .obj .i {
	animation: iconPop .6s forwards;
}
@keyframes iconPop {
	25% { transform: scale(1.4); }
	50% { transform: scale(.8); }
	75% { transform: scale(1.06); }
	to { transform: none; }
}
.op_object.is-transform .obj.o1 .c { transition-delay: .1s; }
.op_object.is-transform .obj.o2 .c { transition-delay: .2s; }
.op_object.is-transform .obj.o3 .c { transition-delay: .3s; }
.op_object.is-transform .obj.o4 .c { transition-delay: .4s; }
.op_object.is-transform .obj.o5 .c { transition-delay: .5s; }
.op_object.is-transform .obj.o6 .c { transition-delay: .6s; }
.op_object.is-transform .obj.o7 .c { transition-delay: .7s; }
.op_object.is-transform .obj.o1 .i { animation-delay: .1s; }
.op_object.is-transform .obj.o2 .i { animation-delay: .2s; }
.op_object.is-transform .obj.o3 .i { animation-delay: .3s; }
.op_object.is-transform .obj.o4 .i { animation-delay: .4s; }
.op_object.is-transform .obj.o5 .i { animation-delay: .5s; }
.op_object.is-transform .obj.o6 .i { animation-delay: .6s; }
.op_object.is-transform .obj.o7 .i { animation-delay: .7s; }

/* :::::: copy :::::: */
.op_cover {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #c00;
	-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.op_copy1,
.op_copy2,
.op_catch {
	z-index: 3;
	position: absolute;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}
.op_copy1,
.op_copy2 {
	color: black;
}
.op_catch {
	color: white;
}
.op_copy1,
.op_catch {
	top: calc(50% - 16px);
}
.op_copy2 {
	top: calc(50% - 44px);
	height: 88px;
}
.op_copy2 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	top: calc(50% - 44px);
	height: 88px;
}
.op_copy {
	font-size: 32px;
	line-height: 1;
	letter-spacing: .19em;
	perspective: 500px;
}
.op_copy:not(.is-standby) {
	opacity: 0;
}
.op_copy .t {
	display: inline-block;
	transform-style: preserve-3d;
	transform-origin: left center;
}
.op_copy:not(.is-active) .t {
	opacity: 0;
	transform: rotateY(-90deg);
	transform-origin: right center;
}
@media screen and (max-width: 639px) {
	.op_copy {
		font-size: 24px;
	}
	.op_catch {
		padding-left: .3em;
	}
}
/* motion */
.l-opening {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.l-opening.is-end {
	transition: -webkit-clip-path .6s cubic-bezier(.8,0,.2,1);
	transition: clip-path .6s cubic-bezier(.8,0,.2,1);
	-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.op_cover.is-active {
	transition: -webkit-clip-path .4s cubic-bezier(.8,0,.2,1);
	transition: clip-path .4s cubic-bezier(.8,0,.2,1);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.op_cover.is-hide {
	transition-duration: .6s;
	-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.op_cover.is-hide {
	-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.op_copy.is-anim .t {
	transition: opacity .2s, transform .4s cubic-bezier(.3,1,.7,1);
}
.op_copy.is-anim .t2 { transition-delay: .04s; }
.op_copy.is-anim .t3 { transition-delay: .08s; }
.op_copy.is-anim .t4 { transition-delay: .12s; }
.op_copy.is-anim .t5 { transition-delay: .16s; }
.op_copy.is-anim .t6 { transition-delay: .2s; }
.op_copy.is-anim .t7 { transition-delay: .24s; }
.op_copy.is-anim .t8 { transition-delay: .28s; }
.op_copy.is-anim .t9 { transition-delay: .32s; }
.op_copy.is-anim .t10 { transition-delay: .36s; }
.op_copy.is-anim .t11 { transition-delay: .4s; }
.op_copy.is-anim .t12 { transition-delay: .44s; }