@charset "utf-8";
@media screen and (min-width: 569px) {

/* 
layout
*/
#wrap {
    width: auto !important;
    width: 100%;
    margin: 0;
}
#container {
    width: 100%;
    overflow: hidden;
    background: url("../images/bg@2x.png") repeat center top;
    background-size: 360px 100px;
    margin: 0 auto;
}
.pc {
    display: inherit;
}
.sp {
    display: none;
}

/*----- header -----*/
header {
    width: 100%;
    background: url("../images/h_bg_top@2x.png") no-repeat center top;
    background-size: contain;
    position: relative;
    padding: 40vw 0 10vw;
}
header h1 {
    width: 80vw;
    max-width: 600px;
    position: absolute;
    top: 17.5vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
header h1 img,
header .tent img,
header .elephant img,
header .hato img {
    width: 100%;
    height: auto;
}
header .tent {
    width: 90vw;
    max-width: 675px;
    position: relative;
    margin: 0 auto;
    z-index: 3;
}
header .elephant {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 47.5vw;
    right: 57.5vw;
    z-index: 2;
}
header .hato {
    width: 30vw;
    max-width: 225px;
    position: absolute;
    top: 47.5vw;
    left: 70vw;
    z-index: 2;
}

/*----- common -----*/
main {
}
main .hat {
    width: 75px;
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
main .trump {
    width: 75px;
    position: absolute;
    top: -137.25px;
    left: 200px;
    right: 0;
    margin: 0 auto;
}
main .hat img,
main .trump img {
    width: 100%;
    height: auto;
}
main h3 {
    color: #DD6666;
    font-family: becker-gothics-concave, serif;
    font-size: 8rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
}
main p.kana {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    margin: 0 0 7.5vw;
}
main div.contact {
    padding: 5vw 0 40vw;
}
main div.contact p.txt {
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    margin: 0 0 20px;
}

/*----inputform----*/
main select.select{
    width: calc(110%);
    background: #FFF;
    font-size: 1em;
    border-radius: 5px;
    height: 30px;
    overflow: hidden;
    display: block;
    position: relative;
    background: #FFFFFF;
    border: none; 
    text-align: left;
    padding: 5px 3vw;
    margin: 0 0 20px;
}
main input.inp{
    width: calc(100%);
    background: #FFF;
    font-size: 1em;
    border-radius: 5px;
    height: 30px;
    overflow: hidden;
    display: block;
    position: relative;
    background: #FFFFFF;
    border: none; 
    text-align: left;
    padding: 5px 3vw;
    margin: 0 0 20px;
}

main textarea#message{
    width: calc(100%);
    background: #FFF;
    font-size: 1em;
    border-radius: 5px;
    height: 100px;
    overflow: hidden;
    display: block;
    position: relative;
    background: #FFFFFF;
    border: none; 
    text-align: left;
    padding: 5px 3vw;
    margin: 0 0 15px;
}

/*----input button----*/
main input.btn {
    width: 90vw;
    max-width: 600px;
    height: 60px;
    overflow: hidden;
    display: block;
    position: relative;
    background: #FFDD33;
    border: none; 
    border-radius: 30px;
    text-align: center;
    font-size:1em;
    margin: 0 auto;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
main input.btn::after {
    content: "";
    width: 30px;
    height: 30px;
    background: url("../images/arrow_right@2x.png") no-repeat left top;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    margin: auto 0;
}
main input.btn:hover {
    background: #FFFF11;
    color: #111;
}
main input.btn p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin: auto;
}
main input.btn a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/*----button----*/

main div.btn {
    width: 80vw;
    max-width: 800px;
    height: 80px;
    overflow: hidden;
    display: block;
    position: relative;
    background: #FFDD33;
    border-radius: 40px;
    text-align: center;
    margin: 0 auto;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    font-size:1em;
}
main div.btn::after {
    content: "";
    width: 40px;
    height: 40px;
    background: url("../images/arrow_right@2x.png") no-repeat left top;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto 0;
}
main div.btn:hover {
    background: #FFFF11;
    color: #111;
}
main div.btn p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin: auto;
}
main div.btn a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.bg1,
.bg2,
.bg3,
.bg4,
.kira {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: absolute;
    left: 0;
    z-index: 1;
}
.bg1 {
    background: url("../images/bg_shower1@2x.png") no-repeat center top scroll;
    background-size: contain;
    top: -50px;
}
.bg2 {
    background: url("../images/bg_shower2@2x.png") no-repeat center top scroll;
    background-size: contain;
    top: -25px;
}
.bg3 {
    background: url("../images/bg_shower3@2x.png") no-repeat center top scroll;
    background-size: contain;
    top: -50px;
}
.bg4 {
    background: url("../images/bg_shower4@2x.png") no-repeat center top scroll;
    background-size: contain;
    top: -25px;
}
.kira {
    background: url("../images/kira@2x.png") no-repeat center top scroll;
    background-size: contain;
    top: -50px;
}
.animal {
    position: relative;
}
.animation img {
    display: none;
    width: 100%;
    height: auto;
}

/*----- introduction -----*/
section#introduction {
    width: 100%;
    padding: 0 0 40vw;
}

section#introduction article.greeting {
    position: relative;
    padding: 0 0 15vw;
}
section#introduction article.greeting .bg1 {
    top: -125px;
}
section#introduction article.greeting .bg2 {
    top: -100px;
}
section#introduction article.greeting .block1 {
    position: relative;
    padding: 0 0 12.5vw;
}
section#introduction article.greeting .block2 {
    position: relative;
}
section#introduction article.greeting .block1 .naruo {
    width: 50vw;
    max-width: 375px;
    position: absolute;
    top: -5vw;
    right: 52.5vw;
    z-index: 13;
}
section#introduction article.greeting .block2 .animation {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: -10vw;
    left: 62.5vw;
    z-index: 13;
}
section#introduction article.greeting .block1 .naruo img,
section#introduction article.greeting .block2 .animation img {
    width: 100%;
    height: auto;
}
section#introduction article.greeting .block1 .block,
section#introduction article.greeting .block2 .block {
    position: relative;
    background: #FFF;
    border-radius: 10px;
    padding: 6.25vw 0;
}
section#introduction article.greeting .block1 .block {
    width: 50vw;
    margin: 0 0 0 45vw;
    z-index: 11;
}
section#introduction article.greeting .block2 .block {
    width: 60vw;
    margin: 0 0 0 5vw;
    z-index: 13;
}
section#introduction article.greeting .block1 .block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-color: transparent #FFF transparent transparent;
    border-width: 10px 15px 10px 0;
}
section#introduction article.greeting .block2 .block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-color: transparent transparent transparent #FFF;
    border-width: 10px 0 10px 15px;
}
section#introduction article.greeting .block1 .block p,
section#introduction article.greeting .block2 .block p {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    padding: 0 5vw;
}
section#introduction article.greeting .block1 .block p {
    padding: 3.75vw 5vw 0;
}
section#introduction article.greeting .block1 .block p.hi {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: -11.25vw;
    left: -3.75vw;
}
section#introduction article.greeting .block1 .block p.hi img {
    width: 100%;
    height: auto;
}
section#introduction article.greeting .block2 .block p span {
    color: #DD6666;
    font-weight: 500;
}

section#introduction article.cannot {
    position: relative;
    padding: 0 0 5vw;
}
section#introduction article.cannot p {
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
    padding: 0 0 25px;
}
section#introduction article.cannot .animation {
    width: 60vw;
    max-width: 450px;
    margin: 0 auto;
}

section#introduction article.point {
    width: 100%;
    position: relative;
    padding: 0 0 10vw;
}
section#introduction article.point img {
    width: 100%;
    height: auto;
}
section#introduction article.point p.point {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
section#introduction article.point ul {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 27.5vw 0 0;
}
section#introduction article.point ul li.point1,
section#introduction article.point ul li.point2,
section#introduction article.point ul li.point3 {
    width: 30vw;
    max-width: 225px;
}
section#introduction article.point .animal {
    position: relative;
    padding: 7.5vw 0;
}
section#introduction article.point .animal .animation {
    width: 40vw;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    z-index: 3;
}
section#introduction article.point .animal .cloud1 {
    width: 50vw;
    max-width: 375px;
    height: 30vw;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 57.5vw;
    margin: auto 0;
    z-index: 2;
}
section#introduction article.point .animal .cloud2 {
    width: 50vw;
    max-width: 375px;
    height: 30vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 57.5vw;
    margin: auto 0;
    z-index: 2;
}
section#introduction article.point .animal .cloud3 {
    width: 40vw;
    max-width: 300px;
    height: 30vw;
    position: absolute;
    top: 20vw;
    bottom: 0;
    right: 57.5vw;
    margin: auto 0;
    z-index: 1;
}
section#introduction article.point p.txt {
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
}
section#introduction article.point p.txt span {
    background: linear-gradient(transparent 50%, #FFDD33 0%);
    font-weight: 500;
}

section#introduction article.download {
    padding: 0 0 10vw;
}
section#introduction article.download p {
    text-align: center;
}
section#introduction article.download div.block {
    width: 80vw;
    max-width: 800px;
    position: relative;
    background: #FFF;
    border-radius: 10px;
    padding: 5vw 0;
    margin: 0 auto 50px
}
section#introduction article.download div.block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -15px;
    margin: auto;
    border-style: solid;
    border-color: #FFF transparent transparent transparent;
    border-width: 15px 10px 0 10px;
}
section#introduction article.download div.block p {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
}
section#introduction article.download p.caution {
    font-size: 1.6rem;
    padding: 10px 0 0;
}

section#introduction article.magic {
    position: relative;
    padding: 0 0 15vw;
}
section#introduction article.magic img {
    width: 100%;
    height: auto;
}
section#introduction article.magic .no1,
section#introduction article.magic .no2,
section#introduction article.magic .no3 {
    width: 20vw;
    max-width: 150px;
    height: auto;
    position: absolute;
}
section#introduction article.magic .no1 {
    top: 0;
    left: 50vw;
}
section#introduction article.magic .no2 {
    top: 10vw;
    right: 50vw;
}
section#introduction article.magic .no3 {
    top: 35vw;
    left: 0;
    right: 0;
    margin: 0 auto;
}
section#introduction article.magic .flag {
    width: 30vw;
    max-width: 225px;
    height: auto;
    position: absolute;
    top: 35vw;
    left: 0;
}
section#introduction article.magic .stick {
    width: 40vw;
    max-width: 300px;
    height: auto;
    position: absolute;
    bottom: 5vw;
    left: 55vw;
    transform: rotate(15deg);
    transform-origin: right bottom;
    z-index: 4;
}
section#introduction article.magic .stick.active {
    animation: rotation 1s 0.25s;
    transform: rotate(15deg);
    transform-origin: right bottom;
}
section#introduction article.magic .silkhat {
    width: 50vw;
    max-width: 375px;
    height: 40vw;
    position: relative;
    padding: 50vw 0 0;
    margin: 0 auto;
}
section#introduction article.magic .silkhat .silkhat1 {
    position: absolute;
    z-index: 3;
}
section#introduction article.magic .silkhat .silkhat_rabbit {
    position: absolute;
    z-index: 2;
}
section#introduction article.magic .silkhat .silkhat2 {
    position: absolute;
    z-index: 1;
}
section#introduction article.magic .silkhat img {
    width: 100%;
    height: auto;
}

section#introduction article.contents {
    position: relative;
}
section#introduction article.contents .bg1 {
    top: -100px;
}
section#introduction article.contents .bg2 {
    top: -75px;
}
section#introduction article.contents h2 {
    color: #FFF;
    font-family: becker-gothics-concave, serif;
    font-size: 6rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
}
section#introduction article.contents p.kana {
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin: 0 0 25px;
}
section#introduction article.contents ul {
    width: 80vw;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
section#introduction article.contents ul li {
    width: 110px;
    position: relative;
    display: block;
    margin: 1.25vw;
    z-index: 2;
}
section#introduction article.contents ul li div {
    transform: rotateY(0);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
section#introduction article.contents ul li:hover div {
    transform: rotateY(360deg);
}
section#introduction article.contents ul li a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*----- about -----*/
section#about {
    width: 100%;
    position: relative;
    background: #EEEEE5;
    padding: 0 0 25px;
    margin-bottom: 10vw;
}
section#about::before {
    content: '';
    width: 100%;
    height: 30vw;
    position: absolute;
    top: -30vw;
    left: 0;
    background: url("../images/bg_top@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#about::after {
    content: '';
    width: 100%;
    height: 10vw;
    position: absolute;
    bottom: -10vw;
    left: 0;
    background: url("../images/bg_bottom@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#about article.profile,
section#about article.works {
    position: relative;
    padding: 70vw 0 0;
}
section#about article.profile {
    margin: 0 0 10vw;
}
section#about article.profile .bg1,
section#about article.profile .bg2 {
    z-index: 11;
}
section#about article.profile figure {
    width: 80vw;
    max-width: 600px;
    height: 80vw;
    max-height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
section#about article.profile figure .img1 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
}
section#about article.profile figure .img2 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 13;
}
section#about article.profile figure .img3 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 14;
}
section#about article.profile figure img {
    width: 100%;
    height: auto;
}
section#about article.works figure {
    width: 70vw;
    height: 80vw;
    background: url( "../images/about_img2a@2x.png") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
section#about article .block {
    width: calc(90vw - 10vw);
    position: inherit;
    background: #FFF;
    padding: 5vw 5vw 7.5vw;
    z-index: 10;
}
section#about article .block h4 {
    color: #7EC2EB;
    font-family: fenwick-outline, sans-serif;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    padding: 0 0 5vw;
}
section#about article .block p {
    font-size: 1.6rem;
}
section#about article .block h5 {
    position: relative;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0 0 10px 20px;
}
section#about article .block h5:before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    background-color: #DD6666;
    border-radius: 50%;
    top: 7px;
    left: 0;
}
section#about article .block ul:first-of-type {
    padding: 0 0 20px;
}
section#about article .block ul li {
    font-size: 1.6rem;
}
section#about article p.copy {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 7.5vw;
    right: 50vw;
    z-index: 2;
}
section#about article p.copy img {
    width: 100%;
    height: auto;
}

section#about article.animal {
    padding: 50px 0 0;
}
section#about article .animation {
    width: 30vw;
    max-width: 225px;
    margin: 0 auto;
}

/*----- plan -----*/
section#plan {
    width: 100%;
    position: relative;
    background: #EEEEE5;
    padding: 0 0 25px;
    margin-bottom: 10vw;
}
section#plan::before {
    content: '';
    width: 100%;
    height: 30vw;
    position: absolute;
    top: -30vw;
    left: 0;
    background: url("../images/bg_top@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#plan::after {
    content: '';
    width: 100%;
    height: 10vw;
    position: absolute;
    bottom: -10vw;
    left: 0;
    background: url("../images/bg_bottom@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#plan article {
    position: relative;
    padding: 70vw 0 0 ;
}
section#plan article.standard,
section#plan article.custom {
    margin: 0 0 10vw;
}
section#plan article.standard,
section#plan article.surprise {
    background: url("../images/flag_red@2x.png") no-repeat left -10vw top 15vw;
    background-size: 450px 245px;
}
section#plan article.custom {
    background: url("../images/flag_green@2x.png") no-repeat right -10vw top 15vw;
    background-size: 450px 245px;
}
section#plan article figure {
    width: 70vw;
    height: 80vw;
    position: absolute;
    top: 0;
    z-index: 1;
}
section#plan article.standard figure {
    background: url( "../images/plan_img1@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.surprise figure {
    background: url( "../images/plan_img2@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.custom figure {
    background: url( "../images/plan_img3@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.standard figure,
section#plan article.surprise figure {
    right: 0;
}
section#plan article.custom figure {
    left: 0;
}
section#plan article p.copy {
    color: #7EC2EB;
    font-family: fenwick-outline, sans-serif;
    position: absolute;
    font-size: 6rem;
    letter-spacing: 0.1em;
    top: 3.75vw;
    z-index: 2;
}
section#plan article.standard p.copy,
section#plan article.surprise p.copy {
    left: 5vw;
}
section#plan article.custom p.copy {
    text-indent: -0.1em;
    right: 5vw;
}
section#plan article .block {
    width: calc(90vw - 10vw);
    position: inherit;
    background: #FFF;
    padding: 5vw;
    z-index: 10;
}
section#plan article.custom .block {
    margin: 0 0 0 10vw;
}
section#plan article .block h4 {
    color: #DD6666;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}
section#plan article .block p.price {
    color: #DD6666;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0 0 5vw;
}
section#plan article .block p.txt {
    font-size: 1.6rem;
    padding: 0 0 2.5vw;
}
section#plan article .block .recommend {
    border: #DD6666 dotted 2px;
    padding: 2.5vw 5vw;
}
section#plan article .block .recommend h5 {
    color: #DD6666;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0 0 5px;
}
section#plan article .block .recommend ul li {
    position: relative;
    font-size: 1.6rem;
    padding: 0 0 0 20px;
}
section#plan article .block .recommend ul li:before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    background-color: #DD6666;
    border-radius: 50%;
    top: 5px;
    left: 0;
}

section#plan article.standard .animation {
    width: 50vw;
    max-width: 375px;
    position: absolute;
    top: 15vw;
    left: 1.25vw;
    margin: 0 auto;
    z-index: 12;
}
section#plan article.custom .animation {
    width: 30vw;
    max-width: 225px;
    position: absolute;
    top: 15vw;
    right: 3.75vw;
    margin: 0 auto;
    z-index: 12;
}
section#plan article.surprise .animation {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 15vw;
    left: 3.75vw;
    margin: 0 auto;
    z-index: 12;
}

section#caution {
    width: 100%;
    padding: 5vw 0 2.5vw;
}
section#caution article.caution {
    width: 80vw;
    max-width: 800px;
    margin: 5vw auto 0;
}
section#caution article.caution p {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    padding: 0 0 10px;
}
section#caution article.caution ul li {
    position: relative;
    font-size: 1.6rem;
    padding: 0 0 0 20px;
}
section#caution article.caution ul li:before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    background-color: #FFDD33;
    border-radius: 50%;
    top: 7px;
    left: 0;
}

section#caution article.animal {
}
section#caution article .animation {
    width: 60vw;
    max-width: 450px;
    margin: 0 auto;
}

/*----- movie -----*/
section#movie {
    width: 100%;
    position: relative;
    background: #EEEEE5;
    padding: 0 0 25px;
    margin-bottom: 10vw;
}
section#movie::before {
    content: '';
    width: 100%;
    height: 30vw;
    position: absolute;
    top: -30vw;
    left: 0;
    background: url("../images/bg_top@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#movie::after {
    content: '';
    width: 100%;
    height: 10vw;
    position: absolute;
    bottom: -10vw;
    left: 0;
    background: url("../images/bg_bottom@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#movie ul {
    width: 70vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
section#movie ul li {
    width: 100%;
    margin: 0 0 7.5vw;
}
section#movie ul li figure img {
    width: 100%;
    height: auto;
}
section#movie ul li p {
    font-size: 2rem;
    text-align: center;
    padding: 10px 0 0;
}

section#movie article.animal {
    margin: 50px 0 0;
}
section#movie article .animation {
    width: 80vw;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/*----- contact -----*/
section#contact {
    width: 100%;
    position: relative;
    background: #EEEEE5;
    padding: 0 0 25px;
    margin-bottom: 10vw;
}
section#contact::before {
    content: '';
    width: 100%;
    height: 30vw;
    position: absolute;
    top: -30vw;
    left: 0;
    background: url("../images/bg_top@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#contact::after {
    content: '';
    width: 100%;
    height: 10vw;
    position: absolute;
    bottom: -10vw;
    left: 0;
    background: url("../images/bg_bottom@2x.png") no-repeat center bottom;
    background-size: cover;
}
section#contact h3 {
    letter-spacing: 0;
    text-indent: 0;
}
section#contact table {
    width: 80vw;
    max-width: 800px;
    font-size: 1.8rem;
    margin: 0 auto;
}
section#contact table tr {
}
section#contact table th,
section#contact table td {
    width: 100%;
    display: block;
}
section#contact table th {
    letter-spacing: 0.1em;
    text-align: left;
    margin: 0 0 10px;
}
section#contact table th span {
    background: #DD6666;
    border-radius: 15px;
    color: #FFF;
    padding: 0 10px;
    margin: 0 10px 0 0;
}
section#contact table th.txt {
    text-align: center;
}
section#contact table td {
    width: calc(100% - 10vw);
    background: #FFF;
    border-radius: 5px;
    /* padding: 15px 5vw;
    margin: 0 0 20px; */
}
section#contact table th.diamond {
    background: url("../images/bg_diamond@2x.png") no-repeat center top;
    background-size: 115px 25px;
    padding: 40px 0 0;
}
section#contact table td.textarea {
    /* min-height: 100px; */
    margin: 0px;
}

section#contact article.animal {
    margin: 50px 0 0;
}
section#contact article .animation {
    width: 60vw;
    max-width: 450px;
    margin: 0 auto;
    z-index: 1;
}

/*----- footer -----*/
footer {
    color: #FFF;
    text-align: center;
    padding: 50px 0 25px;
}
footer ul {
    display: flex;
    justify-content: center;
    padding: 0 0 25px;
}
footer ul li {
    width: 25px;
    padding: 0 12.5px;
}
footer ul li img {
    width: 100%;
    height: auto;
}
footer small {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
}
}
@media screen and (min-width: 897px) {
/*----- header -----*/
header {
    width: 100%;
    background: url("../images/h_bg_top@2x.png") no-repeat center top;
    background-size: contain;
    position: relative;
    padding: calc(162.5px + 15vw) 0 5vw;
}
header h1 {
    width: 80vw;
    max-width: 600px;
    max-height: 225px;
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
header h1 img,
header .tent img,
header .elephant img,
header .hato img {
    width: 100%;
    height: auto;
}
header .tent {
    width: 90vw;
    max-width: 675px;
    position: relative;
    margin: 0 auto;
    z-index: 3;
}
header .elephant {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: calc(225px + 15vw);
    right: 57.5vw;
    z-index: 2;
}
header .hato {
    width: 30vw;
    max-width: 225px;
    position: absolute;
    top: calc(225px + 15vw);
    left: 70vw;
    z-index: 2;
}

/*----- common -----*/
.bg1,
.bg2,
.bg3,
.bg4,
.kira {
    width: 100%;
    height: 100%;
    min-height: 480px;
    position: absolute;
    left: 0;
    z-index: 1;
}
.bg1 {
    background: url("../images/bg_shower1@2x.png") no-repeat center top scroll;
    background-size: 900px 480px;
    top: -50px;
}
.bg2 {
    background: url("../images/bg_shower2@2x.png") no-repeat center top scroll;
    background-size: 900px 480px;
    top: -25px;
}
.bg3 {
    background: url("../images/bg_shower3@2x.png") no-repeat center top scroll;
    background-size: 900px 480px;
    top: -50px;
}
.bg4 {
    background: url("../images/bg_shower4@2x.png") no-repeat center top scroll;
    background-size: 900px 480px;
    top: -25px;
}
.kira {
    background: url("../images/kira@2x.png") no-repeat center top scroll;
    background-size: 900px 720px;
    top: -100px;
}

/*----- introduction -----*/
section#introduction article.greeting {
    position: relative;
    padding: 0 0 10vw;
}
section#introduction article.greeting .block1 {
    position: relative;
    padding: 0 0 10vw;
}
section#introduction article.greeting .block2 {
    position: relative;
}
section#introduction article.greeting .block1 .naruo {
    width: 50vw;
    max-width: 375px;
    position: absolute;
    top: -1.25vw;
    right: 50vw;
    z-index: 13;
}
section#introduction article.greeting .block2 .animation {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: -11.25vw;
    left: 60vw;
    z-index: 10;
}
section#introduction article.greeting .block1 .naruo img,
section#introduction article.greeting .block2 .animation img {
    width: 100%;
    height: auto;
}
section#introduction article.greeting .block1 .block,
section#introduction article.greeting .block2 .block {
    position: relative;
    background: #FFF;
    border-radius: 15px;
    padding: 5vw 0;
}
section#introduction article.greeting .block1 .block {
    width: 35vw;
    margin: 0 0 0 55vw;
    z-index: 11;
}
section#introduction article.greeting .block2 .block {
    width: 45vw;
    margin: 0 0 0 10vw;
    z-index: 13;
}
section#introduction article.greeting .block1 .block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-color: transparent #FFF transparent transparent;
    border-width: 15px 20px 15px 0;
}
section#introduction article.greeting .block2 .block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-color: transparent transparent transparent #FFF;
    border-width: 15px 0 15px 20px;
}
section#introduction article.greeting .block1 .block p,
section#introduction article.greeting .block2 .block p {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    padding: 0 5vw;
}
section#introduction article.greeting .block1 .block p {
    padding: 3.75vw 5vw 0;
}
section#introduction article.greeting .block1 .block p.hi {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: -8.75vw;
    left: -3.75vw;
}
section#introduction article.greeting .block1 .block p.hi img {
    width: 100%;
    height: auto;
}
section#introduction article.greeting .block2 .block p span {
    color: #DD6666;
    font-weight: 500;
}

section#introduction article.cannot p {
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
    padding: 0 0 50px;
}

section#introduction article.point {
    width: 100%;
    position: relative;
    padding: 0 0 10vw;
}
section#introduction article.point img {
    width: 100%;
    height: auto;
}
section#introduction article.point p.point {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
section#introduction article.point ul {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 225px 0 0;
}
section#introduction article.point ul li.point1,
section#introduction article.point ul li.point2,
section#introduction article.point ul li.point3 {
    width: 30vw;
    max-width: 225px;
}
section#introduction article.point .animal {
    position: relative;
    padding: 5vw 0;
}
section#introduction article.point .animal .animation {
    width: 40vw;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    z-index: 3;
}
section#introduction article.point .animal .cloud1 {
    width: 50vw;
    max-width: 375px;
    height: 30vw;
    max-height: 225px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 57.5vw;
    margin: auto 0;
    z-index: 2;
}
section#introduction article.point .animal .cloud2 {
    width: 50vw;
    max-width: 375px;
    height: 30vw;
    max-height: 225px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 57.5vw;
    margin: auto 0;
    z-index: 2;
}
section#introduction article.point .animal .cloud3 {
    width: 40vw;
    max-width: 300px;
    height: 30vw;
    max-height: 225px;
    position: absolute;
    top: 15vw;
    bottom: 0;
    right: 57.5vw;
    margin: auto 0;
    z-index: 1;
}

section#introduction article.download div.block {
    width: 80vw;
    max-width: 800px;
    position: relative;
    background: #FFF;
    border-radius: 15px;
    padding: 5vw 0;
    margin: 0 auto 50px
}
section#introduction article.download div.block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -20px;
    margin: auto;
    border-style: solid;
    border-color: #FFF transparent transparent transparent;
    border-width: 20px 15px 0 15px;
}

section#introduction article.magic {
    position: relative;
    padding: 0 0 10vw;
}
section#introduction article.magic img {
    width: 100%;
    height: auto;
}
section#introduction article.magic .no1,
section#introduction article.magic .no2,
section#introduction article.magic .no3 {
    width: 20vw;
    max-width: 150px;
    height: auto;
    position: absolute;
}
section#introduction article.magic .no1 {
    top: 0;
    left: 50vw;
}
section#introduction article.magic .no2 {
    top: 5vw;
    right: 50vw;
}
section#introduction article.magic .no3 {
    top: 20vw;
    left: 0;
    right: 0;
    margin: 0 auto;
}
section#introduction article.magic .flag {
    width: 30vw;
    max-width: 225px;
    height: auto;
    position: absolute;
    top: 30vw;
    left: 0;
}
section#introduction article.magic .stick {
    width: 40vw;
    max-width: 300px;
    height: auto;
    position: absolute;
    bottom: 5vw;
    left: 55vw;
    transform: rotate(15deg);
    transform-origin: right bottom;
    z-index: 4;
}
section#introduction article.magic .stick.active {
    animation: rotation 1s 0.25s;
    transform: rotate(15deg);
    transform-origin: right bottom;
}
section#introduction article.magic .silkhat {
    width: 50vw;
    max-width: 375px;
    height: 40vw;
    max-height: 300px;
    position: relative;
    padding: 30vw 0 0;
    margin: 0 auto;
}
section#introduction article.magic .silkhat .silkhat1 {
    position: absolute;
    z-index: 3;
}
section#introduction article.magic .silkhat .silkhat_rabbit {
    position: absolute;
    z-index: 2;
}
section#introduction article.magic .silkhat .silkhat2 {
    position: absolute;
    z-index: 1;
}
section#introduction article.magic .silkhat img {
    width: 100%;
    height: auto;
}

/*----- about -----*/
section#about article.profile {
    position: relative;
    padding: calc(465px + 5vw) 0 0;
}
section#about article.works {
    position: relative;
    padding: 50vw 0 0;
}
section#about article.profile .bg1 {
    top: -125px;
}
section#about article.profile .bg2 {
    top: -100px;
}
section#about article.works figure {
    width: 70vw;
    height: 60vw;
    background: url( "../images/about_img2a@2x.png") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
section#about article .block {
    width: calc(80vw - 10vw);
    position: inherit;
    background: #FFF;
    padding: 5vw 5vw 7.5vw;
    z-index: 10;
}
section#about article p.copy {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 7.5vw;
    right: calc(50vw + 150px);
    z-index: 2;
}

/*----- plan -----*/
section#plan article {
    position: relative;
    padding: 50vw 0 0 ;
}
section#plan article.standard,
section#plan article.custom {
    margin: 0 0 10vw;
}
section#plan article.standard,
section#plan article.surprise {
    background: url("../images/flag_red@2x.png") no-repeat left -22.5vw top 5vw;
    background-size: 900px 450px;
}
section#plan article.custom {
    background: url("../images/flag_green@2x.png") no-repeat right -22.5vw top 5vw;
    background-size: 900px 450px;
}
section#plan article figure {
    width: 70vw;
    height: 60vw;
    position: absolute;
    top: 0;
    z-index: 1;
}
section#plan article.standard figure {
    background: url( "../images/plan_img1@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.custom figure {
    background: url( "../images/plan_img2@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.surprise figure {
    background: url( "../images/plan_img3@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.standard figure,
section#plan article.surprise figure {
    right: 0;
}
section#plan article.custom figure {
    left: 0;
}
section#plan article p.copy {
    color: #7EC2EB;
    font-family: fenwick-outline, sans-serif;
    position: absolute;
    font-size: 6rem;
    letter-spacing: 0.1em;
    top: 2.5vw;
    z-index: 2;
}
section#plan article.standard p.copy,
section#plan article.surprise p.copy {
    left: 7.5vw;
}
section#plan article.custom p.copy {
    text-indent: -0.1em;
    right: 7.5vw;
}
section#plan article .block {
    width: calc(80vw - 10vw);
    position: inherit;
    background: #FFF;
    padding: 5vw;
    z-index: 10;
}
section#plan article.custom .block {
    margin: 0 0 0 20vw;
}


section#plan article.standard .animation {
    width: 50vw;
    max-width: 375px;
    position: absolute;
    top: 10vw;
    left: 7.5vw;
    margin: 0 auto;
    z-index: 12;
}
section#plan article.custom .animation {
    width: 30vw;
    max-width: 225px;
    position: absolute;
    top: 10vw;
    right: 10vw;
    margin: 0 auto;
    z-index: 12;
}
section#plan article.surprise .animation {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 10vw;
    left: 10vw;
    margin: 0 auto;
    z-index: 12;
}

/*----- movie -----*/
section#movie ul {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
section#movie ul li {
    width: 37.5vw;
    max-width: 400px;
    margin: 0 2.5vw 7.5vw;
}
section#movie ul li figure img {
    width: 100%;
    height: auto;
}
}
@media screen and (min-width: 1025px) {
/*----- header -----*/
header {
    width: 100%;
    background: url("../images/h_bg_top@2x.png") no-repeat center top;
    background-size: contain;
    position: relative;
    padding: calc(162.5px + 10vw) 0 5vw;
}
header h1 {
    width: 80vw;
    max-width: 600px;
    max-height: 225px;
    position: absolute;
    top: 10vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
header h1 img,
header .tent img,
header .elephant img,
header .hato img {
    width: 100%;
    height: auto;
}
header .tent {
    width: 90vw;
    max-width: 675px;
    position: relative;
    margin: 0 auto;
    z-index: 3;
}
header .elephant {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: calc(225px + 10vw);
    right: 57.5vw;
    z-index: 2;
}
header .hato {
    width: 30vw;
    max-width: 225px;
    position: absolute;
    top: calc(225px + 10vw);
    left: 70vw;
    z-index: 2;
}

/*----- common -----*/
main p.kana {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    margin: 0 0 5vw;
}
main div.contact {
    padding: 5vw 0 35vw;
}

/*----- introduction -----*/
section#introduction article.greeting {
    position: relative;
    padding: 0 0 7.5vw;
}
section#introduction article.greeting .block1 {
    position: relative;
    padding: 0 0 5vw;
}
section#introduction article.greeting .block2 {
    position: relative;
}
section#introduction article.greeting .block1 .naruo {
    width: 50vw;
    max-width: 375px;
    position: absolute;
    top: -1.25vw;
    right: 50vw;
    z-index: 13;
}
section#introduction article.greeting .block2 .animation {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: -6.25vw;
    left: 60vw;
    z-index: 10;
}
section#introduction article.greeting .block1 .naruo img,
section#introduction article.greeting .block2 .animation img {
    width: 100%;
    height: auto;
}
section#introduction article.greeting .block1 .block,
section#introduction article.greeting .block2 .block {
    position: relative;
    background: #FFF;
    border-radius: 15px;
    padding: 3.75vw 0;
}
section#introduction article.greeting .block1 .block {
    width: 30vw;
    margin: 0 0 0 55vw;
    z-index: 11;
}
section#introduction article.greeting .block2 .block {
    width: 40vw;
    margin: 0 0 0 15vw;
    z-index: 13;
}
section#introduction article.greeting .block1 .block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-color: transparent #FFF transparent transparent;
    border-width: 15px 20px 15px 0;
}
section#introduction article.greeting .block2 .block::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-color: transparent transparent transparent #FFF;
    border-width: 15px 0 15px 20px;
}
section#introduction article.greeting .block1 .block p,
section#introduction article.greeting .block2 .block p {
    font-size: 2rem;
    letter-spacing: 0.1em;
    padding: 0 5vw;
}
section#introduction article.greeting .block1 .block p {
    padding: 2.5vw 5vw 0;
}
section#introduction article.greeting .block1 .block p.hi {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: -6.25vw;
    left: -3.75vw;
}
section#introduction article.greeting .block1 .block p.hi img {
    width: 100%;
    height: auto;
}
section#introduction article.greeting .block2 .block p span {
    color: #DD6666;
    font-weight: 500;
}

section#introduction article.cannot p {
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
    padding: 0 0 50px;
}

section#introduction article.point {
    width: 100%;
    position: relative;
    padding: 0 0 5vw;
}
section#introduction article.point p.txt {
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
}
section#introduction article.point p.txt span {
    background: linear-gradient(transparent 50%, #FFDD33 0%);
    font-weight: 500;
}

section#introduction article.download {
    padding: 0 0 5vw;
}

section#introduction article.magic {
    position: relative;
    padding: 0 0 10vw;
}
section#introduction article.magic img {
    width: 100%;
    height: auto;
}
section#introduction article.magic .no1,
section#introduction article.magic .no2,
section#introduction article.magic .no3 {
    width: 20vw;
    max-width: 150px;
    height: auto;
    position: absolute;
}
section#introduction article.magic .no1 {
    top: 0;
    left: 50vw;
}
section#introduction article.magic .no2 {
    top: 5vw;
    right: 50vw;
}
section#introduction article.magic .no3 {
    top: 15vw;
    left: 0;
    right: 0;
    margin: 0 auto;
}
section#introduction article.magic .flag {
    width: 30vw;
    max-width: 225px;
    height: auto;
    position: absolute;
    top: 20vw;
    left: 0;
}
section#introduction article.magic .stick {
    width: 40vw;
    max-width: 300px;
    height: auto;
    position: absolute;
    bottom: 7.5vw;
    left: 55vw;
    transform: rotate(15deg);
    transform-origin: right bottom;
    z-index: 4;
}
section#introduction article.magic .stick.active {
    animation: rotation 1s 0.25s;
    transform: rotate(15deg);
    transform-origin: right bottom;
}
section#introduction article.magic .silkhat {
    width: 50vw;
    max-width: 375px;
    height: 40vw;
    max-height: 300px;
    position: relative;
    padding: 22.5vw 0 0;
    margin: 0 auto;
}
section#introduction article.magic .silkhat .silkhat1 {
    position: absolute;
    z-index: 3;
}
section#introduction article.magic .silkhat .silkhat_rabbit {
    position: absolute;
    z-index: 2;
}
section#introduction article.magic .silkhat .silkhat2 {
    position: absolute;
    z-index: 1;
}
section#introduction article.magic .silkhat img {
    width: 100%;
    height: auto;
}

/*----- about -----*/
section#about article.profile {
    position: relative;
    padding: calc(465px + 5vw) 0 0;
}
section#about article.works {
    position: relative;
    padding: calc(675px - 10vw) 0 0;
}
section#about article.profile {
    margin: 0 0 5vw;
}
section#about article.profile .bg1 {
    top: -125px;
}
section#about article.profile .bg2 {
    top: -100px;
}
section#about article.works figure {
    width: 60vw;
    height: 675px;
    background: url( "../images/about_img2a@2x.png") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 10vw;
    z-index: 1;
}
section#about article .block {
    width: calc(50vw - 10vw);
    position: inherit;
    background: #FFF;
    padding: 3.75vw 5vw;
    z-index: 10;
    margin: 0 0 0 10vw;
}
section#about article .block h4 {
    color: #7EC2EB;
    font-family: fenwick-outline, sans-serif;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    padding: 0 0 1.25vw;
}

/*----- plan -----*/
section#plan article {
    position: relative;
    padding: calc(675px - 10vw) 0 0;
}
section#plan article.standard,
section#plan article.custom {
    margin: 0 0 5vw;
}
section#plan article.standard,
section#plan article.surprise {
    background: url("../images/flag_red@2x.png") no-repeat left -5vw top 5vw;
    background-size: 900px 450px;
}
section#plan article.custom {
    background: url("../images/flag_green@2x.png") no-repeat right -5vw top 5vw;
    background-size: 900px 450px;
}
section#plan article figure {
    width: 60vw;
    height: 675px;
    position: absolute;
    top: 0;
    z-index: 1;
}
section#plan article.standard figure {
    background: url( "../images/plan_img1@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.custom figure {
    background: url( "../images/plan_img2@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.surprise figure {
    background: url( "../images/plan_img3@2x.png") no-repeat center center;
    background-size: cover;
}
section#plan article.standard figure,
section#plan article.surprise figure {
    right: 10vw;
}
section#plan article.custom figure {
    left: 10vw;
}
section#plan article p.copy {
    color: #7EC2EB;
    font-family: fenwick-outline, sans-serif;
    position: absolute;
    font-size: 6rem;
    letter-spacing: 0.1em;
    top: 25px;
    z-index: 2;
}
section#plan article.standard p.copy,
section#plan article.surprise p.copy {
    left: 15vw;
}
section#plan article.custom p.copy {
    text-indent: -0.1em;
    right: 15vw;
}
section#plan article .block {
    width: calc(50vw - 10vw);
    position: inherit;
    background: #FFF;
    padding: 5vw 5vw 3.75vw;
    z-index: 10;
}
section#plan article.standard .block,
section#plan article.surprise .block {
    margin: 0 0 0 10vw;
}
section#plan article.custom .block {
    margin: 0 0 0 40vw;
}
section#plan article .block p.price {
    color: #DD6666;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0 0 2.5vw;
}
section#plan article .block p.txt {
    font-size: 1.6rem;
    padding: 0 0 1.25vw;
}
section#plan article .block .recommend {
    border: #DD6666 dotted 2px;
    padding: 1.25vw 2.5vw;
}

section#plan article.standard .animation {
    width: 50vw;
    max-width: 375px;
    height: 450px;
    position: absolute;
    top: 100px;
    left: 13.75vw;
    margin: 0 auto;
    z-index: 12;
}
section#plan article.custom .animation {
    width: 30vw;
    max-width: 225px;
    height: 450px;
    position: absolute;
    top: 100px;
    right: 16.25vw;
    margin: 0 auto;
    z-index: 12;
}
section#plan article.surprise .animation {
    width: 40vw;
    max-width: 300px;
    position: absolute;
    top: 100px;
    left: 10vw;
    margin: 0 auto;
    z-index: 12;
}

section#caution {
    width: 100%;
    padding: 5vw 0 0;
}
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes rotation {
    0%{ transform:rotate(15deg);}
    50%{ transform:rotate(45deg); }
    100%{ transform:rotate(15deg); }
}