@charset "utf-8";

/**
 * 隠れミッキーデザイン キーを探せ！
 * ---------------------------------------- */
.page-game .c-section {
	margin-block: 40px;
}
.page-game .c-ribbon {
	z-index: 1;
	font-size: 18px;
	text-align: left;
}
.page-game .c-ribbon .t {
	margin-left: .5em;
}
.game_container {
	position: relative;
	box-sizing: content-box;
	overflow: hidden;
	max-width: 640px;
	margin: 32px auto 0;
	padding: 32px;
	padding-bottom: 72px;
	border-block: 2px solid #ebebeb;
	background: white url(../img/game_bg.svg) 0 0 / 40px 40px;
	transition: height .4s cubic-bezier(.7,0,.3,1);
	animation: bgloop 4s linear infinite;
}
@keyframes bgloop {
	from { background-position: 0 0; }
	to { background-position: -80px 40px; }
}
/* greeting */
.page-game .c-ribbon:not(.is-active) img,
.page-game .c-ribbon:not(.is-active) .t {
	visibility: hidden;
}
.page-game .c-ribbon .c {
	display: inline-block;
	min-width: .25em;
}
.page-game .c-ribbon:not(.is-active) .c {
	opacity: 0;
	transform: scale(.2);
}
.page-game .c-ribbon.is-anim .c {
	animation: popup 1s both;
	will-change: animation;
	backface-visibility: hidden;
}
@keyframes popup {
	from { opacity: 0; transform: scale(.2) rotate(30deg); }
	20% { transform: scale(1.3) rotate(-20deg); }
	40% { opacity: 1; transform: scale(.8) rotate(10deg); }
	60% { transform: scale(1.1) rotate(-5deg); }
	80% { transform: scale(.96); }
	to { opacity: 1; transform: scale(1); }
}
@media print, (min-width: 480px) {
	.game_container {
		border-inline: 2px solid #ebebeb;
		border-radius: 20px;
	}
}
@media print, (min-width: 768px) {
	.page-game .c-ribbon {
		width: 600px;
		font-size: 25px;
		background-image: url(../img/game_ribbon.svg);
	}
}
@media screen and (max-width: 767px) {
	.game_container {
		padding: 32px 20px 72px;
	}
}
@media screen and (max-width: 479px) {
	.game_container {
		margin-inline: -20px;
	}
}

/* ランダムグリッター */
.l-deco {
	pointer-events: none;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.l-deco .c-deco {
	right: auto;
	left: auto;
}

/* app */
.game_app {
	/* position: relative; */
}
.game_app.is-replay {
	opacity: 0;
	transform: translateY(24px);
}
.game_app.is-anim {
	transition: opacity .8s, transform .8s cubic-bezier(.3,1,.7,1);
}
.game_app::after {
	content: "";
	z-index: 1;
	position: absolute;
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border-radius: 19px;
	background: white;
	opacity: 0;
	pointer-events: none;
}
.game_app .congratulations {
	margin-bottom: .4em;
	color: #006436;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
}
.game_app .congratulations svg {
	position: relative;
	top: -.1em;
	fill: currentcolor;
}
.game_app .congratulations svg:first-child {
	margin-right: .5em;
}
.game_app .congratulations svg:last-child {
	margin-left: .5em;
}
.game_app .c-lead {
	margin: 0 0 24px;
	text-align: center;
}
.game_app .c-lead .note {
	display: inline-block;
	margin-top: .5em;
	line-height: 1.7;
}
/* motion */
.game_app .c-lead:not(.is-active),
.game_app .c-lead.is-leave {
	opacity: 0;
	transform: translateY(1em);
}
.game_app .c-lead.is-anim {
	transition: opacity .8s, transform .8s cubic-bezier(.3,1,.7,1);
}
.game_app .congratulations:not(.is-active) {
	visibility: hidden;
}
.game_app .congratulations .c {
	display: inline-block;
	min-width: .25em;
}
.game_app .congratulations:not(.is-active) .c {
	opacity: 0;
	transform: scale(.2);
}
.game_app .congratulations.is-anim .c {
	animation: popup 1s both;
	will-change: animation;
	backface-visibility: hidden;
}
@media print, (min-width: 480px) {
	.game_app {
		min-height: 620px;
	}
}
@media screen and (max-width: 479px) {
	.game_app .congratulations {
		font-size: 26px;
	}
}
@media screen and (max-width: 359px) {
	.game_app .congratulations {
		font-size: calc(26vw / 3.75);
	}
	.game_app .c-lead {
		font-size: calc(14vw / 3.75);
	}
}

/* :::::: 選択ドア :::::: */
.game_doors {
	display: grid;
	grid-template-columns: repeat(3, 103px);
	grid-template-rows: repeat(3, auto);
	justify-content: center;
	gap: 16px 56px;
}
.game_doors .door {
	z-index: 0;
	position: relative;
	width: 103px;
	height: auto;
	aspect-ratio: 103 / 171;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.game_doors .door > * {
	pointer-events: none;
}
/* 登場 */
.game_doors.is-standby .door {
	clip-path: polygon(0 0, 156% 0, 156% 100%, 0 100%);
}
.game_doors.is-standby:not(.is-appear) .door.is-anim {
	opacity: 0;
	clip-path: polygon(0 0, 156% 0, 156% 0, 0 0);
}
.game_doors .door.is-anim {
	transition: opacity 1s, clip-path 1s cubic-bezier(.2,1,.4,1);
	backface-visibility: hidden;
	will-change: oapcity, clip-path;
}
/* 退散 */
.game_doors.is-success:not(.is-leave) .door.is-anim {
	clip-path: polygon(0 0, 156% 0, 156% 100%, 0 100%);
}
.game_doors.is-success.is-leave .door.is-anim {
	opacity: 0;
	clip-path: polygon(0 100%, 156% 100%, 156% 100%, 0 100%);
}
.game_doors .door.is-anim:nth-child(1) { transition-delay: .08s; }
.game_doors .door.is-anim:nth-child(2) { transition-delay: .16s; }
.game_doors .door.is-anim:nth-child(3) { transition-delay: .24s; }
.game_doors .door.is-anim:nth-child(4) { transition-delay: .32s; }
.game_doors .door.is-anim:nth-child(5) { transition-delay: .40s; }
.game_doors .door.is-anim:nth-child(6) { transition-delay: .48s; }
.game_doors .door.is-anim:nth-child(7) { transition-delay: .56s; }
.game_doors .door.is-anim:nth-child(8) { transition-delay: .54s; }
.game_doors .door.is-anim:nth-child(9) { transition-delay: .72s; }
.game_doors.is-leave .door.-a { transition-delay: .08s; }
.game_doors.is-leave .door.-b { transition-delay: .16s; }
.game_doors.is-leave .door.-c { transition-delay: .24s; }
.game_doors.is-leave .door.-d { transition-delay: .32s; }
.game_doors.is-leave .door.-e { transition-delay: .40s; }
.game_doors.is-leave .door.-f { transition-delay: .48s; }
.game_doors.is-leave .door.-g { transition-delay: .56s; }
.game_doors.is-leave .door.-h { transition-delay: .54s; }
.game_doors.is-leave .door.-i { transition-delay: .72s; }

/* 中身 */
.game_doors .inner {
	z-index: -1;
	position: absolute;
	overflow: hidden;
	top: 6px;
	left: 3px;
	width: 94%;
	height: 92%;
}
.game_doors .inner::before,
.game_doors .inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 100%;
	background: url(../img/game_grad1.webp) 0 0 / 50% 100% repeat-x;
	animation: innerScroll 4s linear infinite;
}
.game_doors .door:nth-child(2n) .inner::before {
	background-image: url(../img/game_grad2.webp);
}
.game_doors .inner::after {
	background-image: url(../img/game_ball.webp);
	background-size: 120px 160px;
	animation-duration: 8s;
	animation-direction: reverse;
}
@keyframes innerScroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
/* グリッター */
.game_doors .c-deco { width: 40px; height: 40px; }
.game_doors .c-deco:nth-of-type(2n) { width: 24px; height: 24px; }
.game_doors .c-deco:nth-of-type(5) { width: 80px; height: 80px; }
.game_doors .c-deco:nth-of-type(1) { top: 36%; left: 3%; }
.game_doors .c-deco:nth-of-type(2) { top: 40%; left: 70%; }
.game_doors .c-deco:nth-of-type(3) { top: 9%; left: 4%; }
.game_doors .c-deco:nth-of-type(4) { top: 6%; left: 62%; }
.game_doors .c-deco:nth-of-type(5) { top: 48%; left: 26%; }
.game_doors .c-deco:nth-of-type(6) { top: 56%; left: 40%; }
.game_doors .c-deco:nth-of-type(1)::after { animation-delay: -.1s; }
.game_doors .c-deco:nth-of-type(2)::after { animation-delay: -1.2s; }
.game_doors .c-deco:nth-of-type(3)::after { animation-delay: -.3s; }
.game_doors .c-deco:nth-of-type(4)::after { animation-delay: -.9s; }
.game_doors .c-deco:nth-of-type(5)::after { animation-delay: -1s; }
.game_doors .c-deco:nth-of-type(6)::after { animation-delay: -.6s; }
.game_doors .c-deco::after {
	background-image: url(../img/glitter_w.svg);
}
/* 他の扉を開けてみよう */
.game_doors .door .inner .msg {
	z-index: 1;
	position: absolute;
	top: calc(50% - 14px);
	left: calc(50% - 38px);
	line-height: 1;
}
.game_doors .door:not(.is-open) .inner .msg {
	opacity: 0;
	transform: scale(.1);
}
.game_doors .door.is-msg .inner .msg {
	transition: opacity .4s, transform .4s cubic-bezier(.3,1,.7,1);
}
/* 見つかった鍵 */
.game_key.is-discovery:not(.is-active) {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.2);
}
.game_key.is-discovery {
	transform: translate(-50%, -50%) rotate(20deg);
}
.game_key.is-discovery.is-anim {
	transition: opacity .8s, transform .8s cubic-bezier(.3,1,.7,1);
}
/* 移動する鍵 */
.game_key.is-wait {
	cursor: pointer;
}
.game_key.is-wait.is-anim {
	transition: top .8s, left .8s, transform .8s;
	transition-timing-function: cubic-bezier(.7,0,.3,1);
}
.is-touch .game_key.is-wait img {
	animation: infiniteAction 1.6s infinite;
}
@media (hover: hover) {
	.game_key.is-wait.is-action img {
		animation: hoverAction .4s;
	}
}
@keyframes hoverAction {
	from, to { transform: none; }
	25% { transform: scale(1.1); }
	50% { transform: scale(.92); }
	75% { transform: scale(1.02); }
}
@keyframes infiniteAction {
	from, 32%, to { transform: none; }
	8% { transform: scale(1.1); }
	16% { transform: scale(.92); }
	24% { transform: scale(1.02); }
}

/* ドア */
.game_doors .outer {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
	background: 0 0 / cover no-repeat;
}
.game_doors .-a .outer { background-image: url(../door/game_door_a.svg); }
.game_doors .-b .outer { background-image: url(../door/game_door_b.svg); }
.game_doors .-c .outer { background-image: url(../door/game_door_c.svg); }
.game_doors .-d .outer { background-image: url(../door/game_door_d.svg); }
.game_doors .-e .outer { background-image: url(../door/game_door_e.svg); }
.game_doors .-f .outer { background-image: url(../door/game_door_f.svg); }
.game_doors .-g .outer { background-image: url(../door/game_door_g.svg); }
.game_doors .-h .outer { background-image: url(../door/game_door_h.svg); }
.game_doors .-i .outer { background-image: url(../door/game_door_i.svg); }
.game_doors .door.is-hov,
.game_doors .door.is-open,
.game_doors .door.is-close {
	z-index: 1;
}
.game_doors .door.is-hov .outer {
	background-position: 42.5% 0;
}
.game_doors .door.is-open .outer {
	width: 155.5%;
	background-position: 100% 0;
}
.game_doors .door.is-close .outer {
	animation: closeDoor .4s steps(1) forwards;
}
@keyframes closeDoor {
	from { width: 155.5%; background-position: 100% 0; }
	70% { width: 100%; background-position: 42.5% 0; }
	to { width: 100%; background-position: 0 0; }
}
@media screen and (max-width: 767px) {
	.game_doors {
		gap: 16px 32px;
	}
}
@media screen and (max-width: 479px) {
	.game_doors {
		grid-template-columns: repeat(3, 90px);
		gap: 16px;
	}
	.game_doors .door {
		width: 90px;
	}
	.game_doors .door.is-open .outer {
		width: 155%;
	}
}
@media screen and (max-width: 359px) {
	.game_doors {
		grid-template-columns: repeat(3, 80px);
		gap: 12px;
	}
	.game_doors .door {
		width: 80px;
	}
	.game_doors .door.is-open .outer {
		width: 155.5%;
	}
}

/* :::::: 当選ドア :::::: */
.game_door {
	position: relative;
	width: 320px;
	height: auto;
	margin: 0 auto;
	aspect-ratio: 191 / 315;
}
.game_door .outer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/game_door.svg) 0 0 / cover no-repeat;
}
/* motion */
.game_door.is-standby .outer {
	clip-path: polygon(0 0, 156% 0, 156% 100%, 0 100%);
}
.game_door.is-standby:not(.is-active) .outer {
	opacity: 0;
	clip-path: polygon(0 0, 156% 0, 156% 0, 0 0);
}
.game_door.is-standby.is-anim .outer {
	transition: opacity 1s, clip-path 1s cubic-bezier(.2,1,.4,1);
	backface-visibility: hidden;
	will-change: oapcity, clip-path;
}
@media screen and (max-width: 479px) {
	.game_door {
		width: 240px;
	}
}
@media screen and (max-width: 359px) {
	.game_door {
		width: 200px;
	}
}

/* 開くドアと包み込む光 */
.game_app.is-opendoor .outer {
	animation: openDoor 1s steps(1) both;
}
.game_app.is-opendoor::after {
	opacity: 1;
	transition: opacity 1s 1s;
}
@keyframes openDoor {
	from { width: 100%; background-position: 0 0; }
	40% { width: 100%; background-position: 43.1% 0; }
	to { width: 146.7%; background-position: 100% 0; }
}

/* 光が消える */
.game_app.is-opendoor.is-appear::after {
	opacity: 0;
	transition: opacity .4s;
}

/* ミッキーデザイン キー */
.game_key {
	z-index: 1;
	position: absolute;
	width: 96px;
	top: 46%;
	left: 64%;
	transform: rotate(30deg);
}
.game_key > * {
	pointer-events: none;
}
.game_key .c-deco {
	width: 40px;
	height: 40px;
}
.game_key .c-deco:nth-of-type(2n+1) {
	width: 80px;
	height: 80px;
}
.game_key .c-deco::after {
	background-image: url(../img/glitter_y.svg);
}
.game_key .c-deco:nth-of-type(1) { top: 5%; left: -47%; }
.game_key .c-deco:nth-of-type(2) { top: 44%; left: 4%; }
.game_key .c-deco:nth-of-type(3) { top: 24%; left: 60%; }
.game_key .c-deco:nth-of-type(4) { top: 98%; left: 18%; }
.game_key .c-deco:nth-of-type(5) { top: 70%; left: -30%; }
.game_key .c-deco:nth-of-type(6) { top: 60%; left: 60%; }
/* .game_key:not(.is-active) {
	opacity: 0;
	transform: scale(.2);
}
.game_key.is-anim {
	transition: opacity 1s, transform 1s cubic-bezier(.3,1,.7,1);
} */
@keyframes keyAction {
	from { opacity: 0; transform: translateX(25%) scale(.2); }
	80% { opacity: 1; transform: scale(1.5) rotate(20deg);
		animation-timing-function: cubic-bezier(.4,0,.9,.4);
	}
	to { opacity: 0; transform: scale(1.4) rotate(18deg); }
}
@media screen and (max-width: 767px) {
	.game_key {
		left: 60%;
	}
}
@media screen and (max-width: 479px) {
	.game_key {
		top: calc(50% - 50px);
		left: calc(50% - 25px);
	}
}

/* :::::: 壁紙 :::::: */
.wallpaper {
	margin: 0;
}
.wallpaper .item {
	display: flex;
	position: relative;
}
.wallpaper .item.-pc {
}
.wallpaper .item.-sp {
	border-top: 1px solid #006436;
}
.wallpaper .thumb {
	order: -1;
	text-align: center;
}
.wallpaper .thumb img {
	height: auto;
	border: 1px solid #d0d0d0;
}
.wallpaper .-pc .thumb img {
	width: 320px;
}
.wallpaper .-sp .thumb img {
	width: 135px;
}
.wallpaper .label {
	color: #006436;
	font-size: 20px;
	line-height: 1.7;
	font-weight: 700;
	white-space: nowrap;
	text-align: left;
}
.wallpaper .label small {
	display: block;
	font-size: 16px;
}
.wallpaper .c-button {
	width: 250px;
	margin-top: 0;
}
.wallpaper .c-button.is-downloaded {
	pointer-events: none;
	border-color: gainsboro;
	color: whitesmoke;
	background: gainsboro;
	transition: color .2s, border-color .2s, background .2s;
}
.wallpaper .c-button .ico {
	position: absolute;
	top: calc(50% - 9px);
	right: 16px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
}
.wallpaper .c-button .arr {
	display: none;
}
/* motion */
.wallpaper .item:not(.is-active) {
	opacity: 0;
	transform: translateY(24px);
}
.wallpaper .item.is-anim {
	transition: opacity .8s, transform .8s cubic-bezier(.3,1,.7,1);
}
@media print, (min-width: 768px) {
	.wallpaper .item {
		justify-content: space-between;
		align-items: center;
		padding: 16px 40px;
	}
	.wallpaper .item.-pc {
		padding-bottom: 30px;
	}
	.wallpaper .item.-sp {
		padding-top: 30px;
	}
	.wallpaper .thumb {
		flex-basis: 320px;
	}
	.wallpaper .label {
		margin-left: 30px;
	}
	.wallpaper .c-button {
		margin-top: 12px;
		margin-left: 30px;
	}
}
@media screen and (max-width: 767px) {
	.wallpaper .item {
		flex-direction: column;
	}
	.wallpaper .item.-pc {
		padding-bottom: 20px;
	}
	.wallpaper .item.-sp {
		padding-top: 20px;
	}
	.wallpaper .text {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16px;
		margin-top: 16px;
	}
	.wallpaper .label {
		line-height: 1.4;
	}
	.wallpaper .c-button {
		width: 100%;
		padding-right: 1em;
	}
}
@media screen and (max-width: 359px) {
	.wallpaper .text {
		flex-direction: column;
		gap: 8px;
		margin-top: 8px;
	}
}

/* app外 */
.game_container .copyright {
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 400;
}
.game_container .copyright .c_disney {
	position: absolute;
	top: calc(50% - .75em);
	left: calc(50% - 2.75em);
	opacity: 0;
}
.game_container .copyright .ico {
	position: relative;
	top: -.1em;
	margin-right: .5em;
	vertical-align: middle;
}
.page-game .c-button.js-replay {
	cursor: pointer;
	width: 250px;
	margin-top: 24px;
}
.page-game .c-button.js-replay:not(.is-active) {
	pointer-events: none;
	height: 0;
	opacity: 0;
}
.page-game .c-button.js-replay.is-anim {
	transition: height .4s cubic-bezier(.3,1,.7,1), opacity .4s;
}
.page-game .c-button .arr {
	top: calc(50% - 6px);
	width: 9px;
	height: 12px;
}
/* シーンによってコピーライトを切り替える */
.game_container .copyright .c_disney,
.game_container .copyright .tm_disney {
	/* transition: opacity .3s; */
}
.game_container[data-scene="LetUsOpenTheDoor"] .c_disney {
	opacity: 1;
}
.game_container[data-scene="LetUsOpenTheDoor"] .tm_disney {
	opacity: 0;
}
@media print, (min-width: 768px) {
	.page-game .section_deco.-t .c-deco:nth-of-type(1) { top: 80px; left: 40px; }
	.page-game .section_deco.-t .c-deco:nth-of-type(2) { top: -48px; left: 64px; }
	.page-game .section_deco.-t .c-deco:nth-of-type(3) { top: -20px; right: 120px; }
	.page-game .section_deco.-t .c-deco:nth-of-type(4) { top: 20px; right: -40px; }
	.page-game .section_deco.-t .c-deco:nth-of-type(5) { top: 120px;  right: 80px;}
	.page-game .section_deco.-b .c-deco:nth-of-type(1) { bottom: 80px; left: 0; }
	.page-game .section_deco.-b .c-deco:nth-of-type(2) { bottom: -40px; left: 40px; }
	.page-game .section_deco.-b .c-deco:nth-of-type(3) { bottom: -40px; right:104px; }
	.page-game .section_deco.-b .c-deco:nth-of-type(4) { bottom: -20px; right: 0; }
	.page-game .section_deco.-b .c-deco:nth-of-type(5) { bottom: 160px; right: 80px; }
}
@media screen and (max-width: 767px) {
	.page-game .section_deco {
		display: block;
		z-index: -1;
	}
	.page-game .section_deco .c-deco:nth-of-type(2n) { width: 120px; height: 120px; }
	.page-game .section_deco .c-deco:nth-of-type(2n+1) { width: 80px; height: 80px; }
	.page-game .section_deco .c-deco:nth-of-type(n+3) { display: none; }
	.page-game .section_deco.-t .c-deco:nth-of-type(1) { top: -56px; left: 0; }
	.page-game .section_deco.-t .c-deco:nth-of-type(2) { top: 24px; right: 0; }
	.page-game .section_deco.-b .c-deco:nth-of-type(1) { bottom: -24px; left: 16px; }
	.page-game .section_deco.-b .c-deco:nth-of-type(2) { bottom: -72px; right: 40px; }
}
@media screen and (max-width: 479px) {
	.page-game .c-button.js-replay {
		width: 100%;
		max-width: none;
	}
}