/* ==================== 1_responsive.css ==================== */

@media (max-width: 767px) {
	.Game,
	.Game img {
		font-size: 4vw;
	}
}

@media (min-width: 768px) {
	.Game,
	.Game img {
		font-size: 2vw;
	}
}

@media (min-width: 1001px) {
	.Game,
	.Game img {
		font-size: 20px;
	}
}


/* ==================== 2_game.css ==================== */

.Game {
	position: relative;
	text-align: center;
	margin-top: 2em;
	padding: 1px 0 3em;
}

.Game::before,
.Game::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 55%;
	background: url(../images/base_back_asobou.svg) no-repeat;
	background-size: cover;
}

.Game.genryou::before,
.Game.genryou::after {
	background-image: url(../images/base_back_manabou.svg);
}

@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop,
	.Game::before,
	.Game::after {
		background-image: url(../images/base_back_asobou.png);
	}
	*::-ms-backdrop,
	.Game.genryou::before,
	.Game.genryou::after {
		background-image: url(../images/base_back_manabou.png);
	}
}


.Game::before {
	top: 0;
	background-position: center top;
}
.Game::after {
	bottom: 0;
	background-position: center bottom;
}

.Game h1 {
	position: relative;
	/*
	z-index: 2;
	*/
	margin: 0;
}
.Game .contents {
	position: relative;
	z-index: 1;
}

.Game h1 {
	margin-top: -1.5em;
	font-size: inherit;
}

.Game button {
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	font-size: inherit;
	outline: none;
	-webkit-user-select: none;
	user-select: none;
}
.Game button[disabled] {
	cursor: default;
}

.Game img {
	max-width: 100%;
	vertical-align: bottom;
}

@media (max-width: 767px) {
	.Game h1 img {
		width: 90%;
	}
}


/* ==================== 3_contents.css ==================== */

.Game .contents {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 1px 0;
}

.Game.juice .contents {
	background: linear-gradient(0deg, #b8eaff, #b8eaff) no-repeat center center;
	background-size: 100% 99%;
}

.Game .contents::before,
.Game .contents::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 55%;
	background: no-repeat;
	background-size: cover;
}

.Game .contents::before {
	top: 0;
	background-position: left top;
}
.Game .contents::after {
	bottom: 0;
	background-position: left bottom;
}

.Game .contents .view {
	position: relative;
	z-index: 1;
}

.Game .contents .view > * {
	transition: opacity 400ms ease;
}

.Game .contents .view:not(.loaded) > * {
	opacity: 0;
}
.Game .contents .view.loaded > * {
	opacity: 1;
}


@media (max-width: 767px) {
	.Game .contents {
		width: 94%;
	}

	.Game .contents .gameTitle {
		padding: 1.75em 0 0;
	}
	.Game .contents .Top .gameTitle {
		padding-top: 0.75em;
	}

	.Game.eawase .contents::before,
	.Game.eawase .contents::after {
		background-image: url(../images/contents_base_eawase_sp.svg);
	}
	.Game.genryou .contents::before,
	.Game.genryou .contents::after {
		background-image: url(../images/contents_base_genryou_sp.svg);
	}
	.Game.silhouette .contents::before,
	.Game.silhouette .contents::after {
		background-image: url(../images/contents_base_silhouette_sp.svg);
	}
	.Game.juice .contents::before,
	.Game.juice .contents::after {
		background-image: url(../images/contents_base_juice_sp.svg);
	}
}

@media (min-width: 768px) {

	.Game .contents {
		width: 47.5em;
	}

	.Game .contents .gameTitle {
		padding: 1.5em 0 0;
	}
	.Game .contents .Top .gameTitle {
		padding-top: 2.5em;
	}

	.Game.silhouette .contents .gameTitle {
		margin-bottom: -0.5em;
	}

	.Game.eawase .contents::before,
	.Game.eawase .contents::after {
		background-image: url(../images/contents_base_eawase_pc.svg);
	}
	.Game.genryou .contents::before,
	.Game.genryou .contents::after {
		background-image: url(../images/contents_base_genryou_pc.svg);
	}
	.Game.silhouette .contents::before,
	.Game.silhouette .contents::after {
		background-image: url(../images/contents_base_silhouette_pc.svg);
	}
	.Game.juice .contents::before,
	.Game.juice .contents::after {
		background-image: url(../images/contents_base_juice_pc.svg);
	}
}


@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop,
	.Game.eawase .contents::before,
	.Game.eawase .contents::after {
		background-image: url(../images/contents_base_eawase_pc.png);
	}
	*::-ms-backdrop,
	.Game.genryou .contents::before,
	.Game.genryou .contents::after {
		background-image: url(../images/contents_base_genryou_pc.png);
	}
	*::-ms-backdrop,
	.Game.silhouette .contents::before,
	.Game.silhouette .contents::after {
		background-image: url(../images/contents_base_silhouette_pc.png);
	}
	*::-ms-backdrop,
	.Game.juice .contents::before,
	.Game.juice .contents::after {
		background-image: url(../images/contents_base_juice_pc.png);
	}
}


/* ==================== 4_classes.css ==================== */

.pkg-shadow {
}

.pkg-shadow {
	position: relative;
}

.pkg-shadow::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 18%;
	border-radius: 50%;
	transform-origin: 50% 100%;
	transform: scale(1.2);
	background: rgba(1,1,1,0.1);
}

.pkg-shadow img {
	position: relative;
	z-index: 1;
	margin-bottom: 8%;
}

@media (max-width: 767px) {
	.Play .pkg-shadow::after {
		background: white;
	}
}

/* for IE11 */
@media all and (-ms-high-contrast:none) {
	.pkg-shadow::after {
		content: none;
	}
}


/* ==================== finish_1_seikai.css ==================== */

.Finish .seikai {
	position: relative;
	box-sizing: border-box;
	border: 0.4em solid;
	border-radius: 1em;
	margin: 1em auto 0;
	background: white;
}

.Game.eawase .Finish .seikai {
	border-color: #ffd000;
}
.Game.genryou .Finish .seikai {
	border-color: #ffabab;
}
.Game.silhouette .Finish .seikai {
	border-color: #9adb5c;
}
.Game.juice .Finish .seikai {
	border-color: #99d6ff;
}

.Finish .seikai .body {
	margin-top: 1.5em;
}

.Finish .seikai .body .product .text {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.Finish .seikai .body .product .text img {
	margin: 0.5em 0;
}

/* キッズサンデー */
.Finish .seikai .body.product_7-1 .related {
	display: none;
}

@media (max-width: 767px) {
	.Finish .seikai {
		width: 90%;
		padding: 1em;
	}

	.Game.juice .Finish .seikai .title img {
		font-size: 3.5vw;
	}

	.Finish .seikai .body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.Finish .seikai .body .product {
		display: flex;
		align-items: center;
	}
	.Finish .seikai .body .product img {
		font-size: 3.5vw;
	}
	.Finish .seikai .body .product .pkg {
		margin-right: 1em;
	}

	/* キッズサンデー */
	.Finish .seikai .body.product_7-1 .product {
		flex-direction: column;
	}
	.Finish .seikai .body.product_7-1 .product .pkg {
		margin-right: 0;
	}
	.Finish .seikai .body.product_7-1 .product .text {
		margin-top: 0.5em;
	}

	.Finish .seikai .body .caption {
		margin-top: 1em;
	}

	.Finish .seikai .body .related {
		margin-top: 1em;
	}

	.Finish .seikai .btns {
		margin-top: 1em;
	}
	.Finish .seikai .btns button:nth-of-type(n+2) {
		margin-top: 0.5em;
	}

}

@media (min-width: 768px) {
	.Finish .seikai {
		padding: 1em 0 4em;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 41em;
	}

	.Finish .seikai .body {
		display: flex;
		align-items: center;
	}

	.Finish .seikai .body .product {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: 2em;
	}
	.Finish .seikai .body .product .text {
		margin-top: 0.5em;
	}


	/* キッズサンデー */
	.Finish .seikai .body.product_7-1 {
		position: relative;
		padding-bottom: 2em;
	}
	.Finish .seikai .body.product_7-1 .product {
		flex-direction: row;
		align-items: start;
	}
	.Finish .seikai .body.product_7-1 .product .pkg  {
		margin-right: 3em;
	}

	.Finish .seikai .body.product_7-1 .info {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	/* for IE11 */
	.Finish .seikai .body.product_7-1 .product {
		display: -ms-grid;
		-ms-grid-columns: max-content max-content;
	}
	.Finish .seikai .body.product_7-1 .product .pkg {
		-ms-grid-column: 1;
	}
	.Finish .seikai .body.product_7-1 .product .text {
		-ms-grid-column: 2;
	}

	.Finish .seikai .body .related {
		margin-top: 1em;
	}

	.Finish .seikai .btns {
		display: flex;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		transform: translateY(50%);
		justify-content: center;
	}
	.Finish .seikai .btns button {
		margin: 0 1em;
	}

}


/* ==================== finish_2_other.css ==================== */

.Finish .other {
	overflow: hidden; /* for IE11 */
	position: relative;
}

.Finish .other::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	transform: translateX(-50%);
	background: no-repeat center top;
	background-size: contain;
}

.Finish .other > * {
	position: relative;
	z-index: 1;
}

.Finish .other .items {
	margin-top: 1em;
}
.Finish .other .items .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	background: white;
	border-radius: 1em;
	padding: 1em;
}

.Finish .other .items .name {
	margin-top: 1em;
}

.Finish .items .pkg a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.Finish .items .pkg img {
	width: auto;
	max-height: 100%;
}


@media (max-width: 767px) {
	.Finish .other {
		margin-top: 2em;
		padding: 2.5em 1em 1em;
	}
	.Finish .other::before {
		width: 19.2em;
	}

	.Game.eawase .Finish .other::before {
		background-image: url(../images/other_title_back_eawase_sp.svg);
	}
	.Game.genryou .Finish .other::before {
		background-image: url(../images/other_title_back_genryou_sp.svg);
	}
	.Game.silhouette .Finish .other::before {
		background-image: url(../images/other_title_back_silhouette_sp.svg);
	}
	.Game.juice .Finish .other::before {
		background-image: url(../images/other_title_back_juice_sp.svg);
	}

	.Finish .other .items {
		display: flex;
		justify-content: space-between;
	}
	.Finish .other .items .item {
		width: 48%;
	}

	.Finish .items .pkg a {
		width: 8em;
		height: 8em;
	}
	
	.Finish .items .name img {
		font-size: 3vw;
	}

}

@media (min-width: 768px) {
	.Finish .other {
		margin: 4em auto 2em;
	}
	.Finish .other::before {
		width: 37.2em;
	}

	.Game.eawase .Finish .other::before {
		background-image: url(../images/other_title_back_eawase_pc.svg);
	}
	.Game.genryou .Finish .other::before {
		background-image: url(../images/other_title_back_genryou_pc.svg);
	}
	.Game.silhouette .Finish .other::before {
		background-image: url(../images/other_title_back_silhouette_pc.svg);
	}
	.Game.juice .Finish .other::before {
		background-image: url(../images/other_title_back_juice_pc.svg);
	}

	.Finish .items {
		display: flex;
		justify-content: center;
	}

	.Finish .items .item {
		margin: 0.5em;
		width: 14em;
	}

	.Finish .items .pkg a {
		width: 10em;
		height: 10em;
	}
}

/* for IE11 */
@media all and (-ms-high-contrast:none) {
	.Finish .items .pkg a {
		display: block;
		position: relative;
	}
	.Finish .items .pkg a img {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}


/* ==================== finish_3_link.css ==================== */

.Finish .link {
	margin: 2em 0;
	display: flex;
}
.Finish .link a {
	margin: 0.5em;
}

@media (max-width: 767px) {
	.Finish .link {
		flex-direction: column;
	}
}

@media (min-width: 768px) {
	.Finish .link {
		justify-content: center;
	}
}


/* ==================== judge.css ==================== */

.Judge {
	display: flex;
	z-index: 11;
	align-items: center;
	justify-content: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	
}

.Judge .base {
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	border: 0.5em solid #ff1d25;
	border-radius: 2em;
	
	animation-fill-mode: both;
	animation-delay: 200ms;
}

.Judge.true .base {
	animation-name: judge-open-true;
	animation-duration: 150ms;
}
@keyframes judge-open-true {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.Judge.false .base {
	border-color: #0063d5;
	animation-name: judge-open-false;
	animation-duration: 250ms;
}
@keyframes judge-open-false {
	from {
		transform: translateY(-5%);
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



@media (max-width: 767px) {
	.Judge {
		position: fixed !important;
	}
	.Judge .base {
		width: 20em;
		height: 20em;
	}
	.Judge .base img {
		font-size: 0.8em;
	}
}

@media (min-width: 768px) {
	.Judge {
		position: absolute !important;
	}
	.Judge .base {
		width: 25em;
		height: 25em;
	}
}


/* ==================== play.css ==================== */

/* for IE11 */
.Play .answer {
	display: -ms-grid;
	-ms-grid-columns: repeat(2, 1fr);
}
.Play .answer button:nth-of-type(1) {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
.Play .answer button:nth-of-type(2) {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
.Play .answer button:nth-of-type(3) {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
}
.Play .answer button:nth-of-type(4) {
	-ms-grid-column: 2;
	-ms-grid-row: 2;
}
.Play .answer button {
	overflow: visible;
}


.Play .answer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.Play .answer button {
	box-sizing: border-box;
	border-radius: 1em;
	background: white;
	border: 0.25em solid white;
}

.Play .answer button.selected {
	border-color: #ff1d25;
}
.Play .answer button.selected::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1.5em;
	background: url(../images/answer_seikai.svg) no-repeat center center;
	background-size: contain;
	transform: translateY(-50%);
}

@media (max-width: 767px) {
	.Play .body {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 1em auto;
	}
	.Play .answer button {
		margin: 0.25em;
	}
}

@media (min-width: 768px) {
	.Play .body {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0.5em auto 1.5em;
	}

	.Play .question {
		position: relative;
		background: white;
		border-radius: 1em;
		padding: 1.5em;
		margin-right: 3.5em;
	}

	.Play .question::after {
		content: '';
		display: block;
		position: absolute;
		left: 100%;
		top: 0;
		width: 3em;
		height: 100%;
		background: url(../images/play_question_arrow.svg) no-repeat right center;
		background-size: 110%;
	}

	.Play .answer button {
		margin: 0.5em;
	}
}


/* ==================== play_cursor.css ==================== */

.Play .answer button {
	position: relative;
}
.Play .answer button::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 100%;
	width: 100%;
	height: 3em;
	background: url(../images/select_hand.svg) no-repeat center center;
	background-size: contain;
	transform: translateY(-1em);

	animation-name: blink-cursor;
	animation-fill-mode: both;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1);
}

.Play .answer button.btn1::before {
	animation-delay: 0s;
}
.Play .answer button.btn2::before {
	animation-delay: 1s;
}
.Play .answer button.btn3::before {
	animation-delay: 2s;
}
.Play .answer button.btn4::before {
	animation-delay: 3s;
}

.Play .answer button[disabled]::before,
.Play .answer button.selected::before {
	content: none;
}

.Play .answer[data-btnnum="3"] button::before {
	animation-duration: 3s;
	animation-name: blink-cursor3;
}


@keyframes blink-cursor {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@keyframes blink-cursor3 {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 1;
	}
	66% {
		opacity: 0;
	}
}


/* ==================== top.css ==================== */

.Top .body {
	background: white;
	border-radius: 1em;
}

@media (max-width: 767px) {
	.Top .body {
		margin: 1em 1em 1em;
		padding: 1em;
	}
	.Top .body button {
		margin-top: 1.5em;
	}
}

@media (min-width: 768px) {

	.Top .body {
		width: 40em;
		margin: 1em auto 4em;
		padding-bottom: 1em;
	}

	.Top .body .description {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 16em;
	}

	.Top .body button {
		position: absolute;
		left: 50%;
		top: 100%;
		transform: translate(-50%, -50%);
	}

}