@charset "utf-8";

/* 00.USUAL
--------------------------------------------------- */
body {
	background: linear-gradient(-45deg, #28aa38, #1caa9e, #bd007b, #e61e6f, #ea5504, #ff9d00);
	background-size: 500vw 500vh;
	-webkit-animation: gradient 10s ease infinite;
	        animation: gradient 10s ease infinite;
}
    @keyframes gradient {
        0%   { background-position:0% 50%; }
        50%  { background-position:100% 50%; }
        100% { background-position:0% 50%; }
    }

article#jajankara {
    font-family: 'M PLUS 1p', sans-serif;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.6;
    overflow: hidden;
}
article#jajankara img {
	max-width: 100%;
	height: auto;
}

/* 01.MV
--------------------------------------------------- */
section.mv {
    background: url("../img/bg_obi_left.gif") no-repeat left 12% center / 7% auto,
                url("../img/bg_obi_right.gif") no-repeat right 12% center / 7% auto,
                url("../img/bg_star.gif") no-repeat center top / 75% auto,
                url("../img/bg_rainbow.png") no-repeat center top / 100% auto;
    position: relative;
}
section.mv div.mvInner {
    width: 50%;
    margin: 0 auto;
}
section.mv div.speech {
    animation: jajaaaaan 0.3s ease-in 1.05s both, jajaaaaan-zoom 0.4s linear 1.35s infinite;
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    width: 40%;
    margin: auto !important;
}
    @keyframes jajaaaaan {
        0%   { transform:scale(0); transform-origin:bottom; }
        100% { transform:scale(1); }
    }
    @keyframes jajaaaaan-zoom {
        0%   { transform:scale(1); transform-origin:bottom; }
        50%  { transform:scale(0.95); }
        100% { transform:scale(1); }
    }
section.mv div.logo {
    position: relative;
    margin: 0 auto;
    padding-top: 51%;
    z-index: 10;
}
section.mv div.logo h1 {
    animation: zoom 1.2s ease-in 0s both;
    margin: 0;
    position: relative;
    z-index: 100;
}
    @keyframes zoom {
        0%  { transform:scale(0); transform-origin:center 40%; }
        20% { transform:scale(2.0); transform-origin:center 40%; }
        30% { transform:scale(0.5); transform-origin:center 40%; }
        70% { transform:scale(8.0); transform-origin:center 65%; }
        98% { transform:scale(0.7); transform-origin:center 40%; }
        100% { transform:scale(0.8); transform-origin:center 40%; }
    }
section.mv div.logo h1 img {
    animation: gatagata 0.15s linear 3s infinite;
}
    @keyframes gatagata {
        0%  { transform:rotate(0deg) skew(2deg,2deg); }
        10% { transform:rotate(2deg) skew(0deg,0deg); }
        20% { transform:rotate(-2deg) skew(0deg,0deg); }
        30% { transform:rotate(1deg) skew(0deg,0deg); }
        100% { transform:rotate(1deg) skew(0deg,0deg); }
    }

section.mv div.logo div.cruck {
    animation: cruck 0.05s linear 1.15s both;
    position: absolute;
    bottom: 0;
}
    @keyframes cruck {
        0% { opacity:0; }
        100% { opacity:1; }
    }

section.mv div.intro {
    font-size: 193%;
    padding: 0 5%;
    text-align: center;
}


/* 02.WORLD
--------------------------------------------------- */
section.world {
    background: url("../img/bg_world.png") no-repeat center top / 100% auto;
    text-align: center;
    margin-top: 3%;
    padding-top: 8%;
}
section.world div.worldInner {
    width: 50%;
    margin: 0 auto;
}
section.world div.worldInner p img {
    width: 85%;
}
section.world div.worldInner h2 {
    margin: 0 0 7% 0;
}
section.world div.worldInner div.exit img {
    width: 50%;
}
section.world ul.doorWrap {
    width: 85%;
    margin: 2% auto 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
li.door__open,
li.door__comingsoon {
    position: relative;
    flex-basis: 30%;
}
li.door__comingsoon figure.comingsoon img {
    position: absolute;
    width: 75%;
    margin: 0 auto;
    top: 38%;
    left: 0;
    right: 0;
    animation: gatagata 0.15s linear 3s infinite;
}
    @keyframes gatagata {
        0%   { transform:rotate(0deg); }
        20%  { transform:rotate(3deg); }
        50%   { transform:rotate(0deg); }
        100% { transform:rotate(6deg); }
    }

li.door__open figure.doorBoard {
    position: absolute;
    bottom: 2%;
    left: 21.5%;
    width: 57%;
    height: auto;
    transform-origin: left;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}
li.door__open figure.doorBoard:hover {
    transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-30deg);
}
li.door__open figure.doorBoard.doorOpen {
    transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg);
}



/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 959px) {
    section.mv { background-size:7% auto, 7% auto, 100% auto, 130% auto; background-position:left 6% center, right 6% center, center top -4%, center top -6%; }
    section.mv div.mvInner { width:70%; }
    section.mv div.speech { width:60%; top:17%; }
    section.mv div.intro { font-size:3.5vw; }
    section.world { background-size:135% auto; margin-top:5%; padding-top:12%; }
    section.world div.worldInner { width:70%; }
    li.door__open,
    li.door__comingsoon { width:40%; }
}

/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:559px) {
body { animation:gradient 8s ease infinite; }
	@keyframes gradient {
			0%   { background-position:0% 50%; }
			50%  { background-position:100% 100%; }
			100% { background-position:0% 50%; }
	}
    section.mv { background-size:7% auto, 7% auto, 130% auto, 175% auto; background-position:left 2% bottom 20%, right 2% bottom 20%, center top -5%, center top -5%; }
    section.mv div.speech { width:80%; }
    section.mv div.mvInner { width:85%; }
    section.mv div.intro { font-size:4vw; }
    section.world { background-size:200% auto; margin-top:7%; padding-top:15%; }
    section.world div.worldInner { width:90%; }
    section.world ul.doorWrap { display:block; background:url("../img/bg_world_window.png") repeat-y center bottom / 100% auto; }
    li.door__open,
    li.door__comingsoon { width:50%; margin:6% auto 0; }
    section.world div.worldInner div.exit img { width:60%; }
}

/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
}