@charset "UTF-8";
/*------------------------------------------------------------
	modal_window
------------------------------------------------------------*/
.modal_window {
	min-width: 0;
}

.page_btn_close {
	display: none;
}

.no-iframe .page_btn_close {
	display: block;
}


/*------------------------------------------------------------
	chara_modal_wrapper
------------------------------------------------------------*/
#chara_modal_wrapper {
	position: relative;
	width: 850px;
	height: 750px;
	margin: 0 auto;
}
#chara_modal_wrapper p {
	position: absolute;
}

.name {
	opacity: 0;
	transform: translate3d(-60px, 0, 0);
	transition: opacity 600ms ease-in, transform 600ms ease-out;
	-webkit-transform: translate3d(-60px, 0, 0);
	-webkit-transition: opacity 600ms ease-in, -webkit-transform 600ms ease-out;
}
.text {
	opacity: 0;
	transform: translate3d(-60px, 0, 0);
	transition: opacity 600ms ease-in 100ms, transform 600ms ease-out 100ms;
	-webkit-transform: translate3d(-60px, 0, 0);
	-webkit-transition: opacity 600ms ease-in 100ms, -webkit-transform 600ms ease-out 100ms;
}
.img {
	opacity: 0;
}

.show .name,
.show .text,
.show .img {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}
.tablet-mode .name,
.tablet-mode .text,
.tablet-mode .img,
.no-iframe .name,
.no-iframe .text,
.no-iframe .img {
	opacity: 1;
	transform: none;
	-webkit-transform: none;
}


.mario_name {
	left: 101px;
	top: 303px;
}
.mario_text {
	left: 102px;
	top: 407px;
}
.mario_img {
	left: 458px;
	top: 224px;
	transform: translate3d(100px, 80px, 0);
	-webkit-transform: translate3d(100px, 80px, 0);
	transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition: opacity 600ms ease-out, -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.peach_name {
	left: 105px;
	top: 304px;
}
.peach_text {
	left: 103px;
	top: 407px;
}
.peach_img {
	left: 451px;
	top: 3px;
	transform: translate3d(50px, 0px, 0);
	-webkit-transform: translate3d(50px, 0px, 0);
	transition: opacity 600ms ease-out, transform 700ms ease-out;
	-webkit-transition: opacity 600ms ease-out, -webkit-transform 700ms ease-out;
}

.kinopio_name {
	left: 101px;
	top: 304px;
}
.kinopio_text {
	left: 102px;
	top: 407px;
}
.kinopio_img {
	left: 467px;
	top: 228px;
	transform: translate3d(-80px, 60px, 0);
	-webkit-transform: translate3d(-80px, 60px, 0);
	transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition: opacity 600ms ease-out, -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
}

.penky_name {
	left: 101px;
	top: 305px;
}
.penky_text {
	left: 103px;
	top: 407px;
}
.penky_img {
	left: 489px;
	top: 285px;
	transform: translate3d(-30px, -30px, 0);
	-webkit-transform: translate3d(-30px, -30px, 0);
	transition: opacity 600ms ease-out, transform 600ms ease-out;
	-webkit-transition: opacity 600ms ease-out, -webkit-transform 600ms ease-out;
}



/*------------------------------------------------------------
	modal_chara
------------------------------------------------------------*/
.modal_chara,
.modal_chara_bg_dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modal_chara {
	display: none;
	min-width: 960px;
	z-index: 100000;
}
.modal_chara_bg_dot {
}
.modal_chara_bg_light,
.modal_chara_bg_paper,
.modal_chara_bg_confetti {
	height: 100%;
}
.modal_chara_bg_light {
	background: url(../img/modal/chara_bg_light.png) center center no-repeat;
}
.modal_chara_bg_paper {
}
.modal_chara_bg_confetti {
	background: url(../img/modal/chara_bg_confetti.png) center center no-repeat;
}
.modal_chara .modal_body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 750px;
    margin: -488px 0 0 -450px;
}
.modal_chara .modal_iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modal_chara .modal_iframe iframe {
	width: 100%;
	height: 100%;
}
.modal_chara .modal_btn_close {
    position: absolute;
    top: 677px;
    left: 50%;
    margin-left: -102px;
}



/*------------------------------------------------------------
	modal_chara >> mario / peach / kinopio / penky
------------------------------------------------------------*/
.modal_chara_mario .modal_chara_bg_dot {
	background: url(../img/modal/mario_bg_dot.png) left center repeat;
}
.modal_chara_mario .modal_chara_bg_paper {
	background: url(../img/modal/mario_bg_paper.png) left center repeat-x;
}
.modal_chara_peach .modal_chara_bg_dot {
	background: url(../img/modal/peach_bg_dot.png) left center repeat;
}
.modal_chara_peach .modal_chara_bg_paper {
	background: url(../img/modal/peach_bg_paper.png) left center repeat-x;
}
.modal_chara_kinopio .modal_chara_bg_dot {
	background: url(../img/modal/kinopio_bg_dot.png) left center repeat;
}
.modal_chara_kinopio .modal_chara_bg_paper {
	background: url(../img/modal/kinopio_bg_paper.png) left center repeat-x;
}
.modal_chara_penky .modal_chara_bg_dot {
	background: url(../img/modal/penky_bg_dot.png) left center repeat;
}
.modal_chara_penky .modal_chara_bg_paper {
	background: url(../img/modal/penky_bg_paper.png) left center repeat-x;
}

.no-iframe .modal_mario,
.no-iframe .modal_peach,
.no-iframe .modal_kinopio,
.no-iframe .modal_penky{
	position: relative;
}
.no-iframe .modal_mario:before,
.no-iframe .modal_peach:before,
.no-iframe .modal_kinopio:before,
.no-iframe .modal_penky:before{
	content: "";
	width: 100%;
	height: 750px;
	display: block;
	position: absolute;
	left: 0;
	top: 90px;
}

.no-iframe .modal_mario{
	background: url(../img/modal/mario_bg_dot.png) left center repeat;
}
.no-iframe .modal_mario:before{
	background: url(../img/modal/mario_bg_paper.png) left center repeat-x;
}
.no-iframe .modal_kinopio{
	background: url(../img/modal/kinopio_bg_dot.png) left center repeat;
}
.no-iframe .modal_kinopio:before{
	background: url(../img/modal/kinopio_bg_paper.png) left center repeat-x;
}
.no-iframe .modal_peach{
	background: url(../img/modal/peach_bg_dot.png) left center repeat;
}
.no-iframe .modal_peach:before{
	background: url(../img/modal/peach_bg_paper.png) left center repeat-x;
}
.no-iframe .modal_penky{
	background: url(../img/modal/penky_bg_dot.png) left center repeat;
}
.no-iframe .modal_penky:before{
	background: url(../img/modal/penky_bg_paper.png) left center repeat-x;
}


.no-iframe #chara_modal_wrapper .page_btn_close {
	left: 320px;
	top: 760px;
}