@charset "UTF-8";



/*common*/

html {

    height: 100%;

}



body {

    color: #333;

    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

    font-size: 16px;

    line-height: 1.8em;

    line-break: strict;

    word-break: break-all;

    text-align: justify;

    text-justify: distribute;

    position: relative;

    min-height: 100vh;

    height: 100%;

    display: flex;

    flex-direction: column;

}



body::before {

    content: "";

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    z-index: -10;

    width: 100vw;

    height: 100vh;

    background: url(../images/common/bg.jpg) no-repeat top center fixed #ffbb00;

    background-size: cover;

}



a:link {

    text-decoration: none;

    color: #ff3b89;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

}



a:visited {

    text-decoration: none;

    color: #ff3b89;

}



a:hover {

    opacity: 0.7;

}



p:not(:last-child) {

    margin-bottom: 1em;

}



#wrap {

    max-width: 1220px;

    width: 100%;

    box-sizing: border-box;

    padding: 0 10px;

    margin: 0 auto;

    z-index: 50;

}





/*PC--------------------------------------------------------------------------------------*/





/*navi*/



nav {

    display: block;

    position: fixed;

    top: 0;

    right: -900px;

    bottom: 0;

    width: 450px;

    background: rgba(11, 162, 154, 0.7);

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    transition: all .5s;

    z-index: 999;

    opacity: 0;

}



.open nav {

    right: 0;

    opacity: 1;

}



nav .inner {

    padding: 0 25px 25px 25px;

}



nav .inner ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



nav .inner ul li {

    display: flex;

    position: relative;

    margin: 0;

    border-bottom: 1px solid #000000;

    justify-content: center;

    align-items: center;

}



nav .inner ul li a {

    display: block;

    width: 100%;

    color: #ffffff;

    font-size: 2em;

    font-weight: blod;

    text-align: center;

    padding: 20px;

    text-decoration: none;

    transition-duration: 0.2s;

}



nav .inner ul li a:hover {

    opacity: 0.7;

}



nav a.nav__logo {

    width: 200px !important;

    display: flex;

    justify-content: center;

    align-items: center;

}



nav a.nav__mu {

    width: 80% !important;

    display: flex;

    justify-content: center;

    align-items: center;

}



.nav__logo a,

.nav__logo img,

.nav__mu img {

    width: 100%;

    padding: 0;

}



.toggle_btn {

    display: block;

    position: fixed;

    top: 30px;

    right: 30px;

    width: 60px;

    height: 60px;

    transition: all .5s;

    cursor: pointer;

    z-index: 1000;

    background-color: rgba(11, 162, 154, 1);

    -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);

    -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);

    box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);

}



.toggle_btn span {

    display: block;

    position: absolute;

    left: 25%;

    width: 30px;

    height: 2px;

    background-color: #ffffff;

    border-radius: 4px;

    transition: all .5s;

}



.toggle_btn span:nth-child(1) {

    top: 30%;

}



.toggle_btn span:nth-child(2) {

    top: 50%;

}



.toggle_btn span:nth-child(3) {

    top: 70%;

}



.open .toggle_btn {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    background: none;

}



.open .toggle_btn span {

    background-color: #fff;

}



.open .toggle_btn span:nth-child(1) {

    -webkit-transform: translateY(12px) rotate(-45deg);

    transform: translateY(12px) rotate(-45deg);

}



.open .toggle_btn span:nth-child(2) {

    opacity: 0;

}



.open .toggle_btn span:nth-child(3) {

    -webkit-transform: translateY(-13px) rotate(45deg);

    transform: translateY(-13px) rotate(45deg);

}



#mask {

    display: none;

    transition: all .5s;

}



.open #mask {

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: .8;

    z-index: 998;

    cursor: pointer;

}



@media screen and (max-width: 900px) {



    nav {

        width: 100%;

    }



    nav a.nav__logo {

        width: 200px !important;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    nav .inner ul li a {

        display: block;

        width: 100%;

        color: #ffffff;

        font-size: 1.4em;

        font-weight: blod;

        text-align: center;

        padding: 15px;

        text-decoration: none;

        transition-duration: 0.2s;

    }



    .toggle_btn {

        top: 10px;

        right: 10px;

    }

}



/*header*/



#header-wrap{

    max-width: 1400px;

    width: 100%;

    margin: 0 auto;

}



#header {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 57.14285%;

    position: relative;

    width: 100%;

    display: block;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

}



#header .logo-pos {

    position: absolute;

    top: 62.875%;

    left: 32.285714%;

    width: 35.428571%;

    z-index: 20;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: logoFadeIn 5s ease 0s 1 normal;

    -webkit-animation: logoFadeIn 5s ease 0s 1 normal;

}



@keyframes logoFadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    50% {

        opacity: 0;

        margin-top: 5%;

        width: 45.428571%;

        left: 27.285714%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes logoFadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    50% {

        opacity: 0;

        margin-top: 5%;

        width: 45.428571%;

        left: 27.285714%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .logo-pos h1 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 52.21774%;

    position: relative;

    width: 100%;

    background: url("../images/header/logo_pb.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .catch-pos {

    position: absolute;

    top: 18.750000%;

    left: 9.571429%;

    width: 81.714286%;

    z-index: 20;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: catchFadeIn 5s ease 0s 1 normal;

    -webkit-animation: catchFadeIn 5s ease 0s 1 normal;

}



@keyframes catchFadeIn {

    0% {

        opacity: 0;

        margin-top: -5%;

    }



    50% {

        opacity: 0;

        margin-top: -5%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes catchFadeIn {

    0% {

        opacity: 0;

        margin-top: -5%;

    }



    50% {

        opacity: 0;

        margin-top: -5%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .catch-pos .catch {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 49.56293%;

    position: relative;

    width: 100%;

    background: url("../images/header/catch.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}







#header .yuzu-logo-pos {

    position: absolute;

    top: 3.750000%;

    left: 7.857143%;

    width: 8.642857%;

    z-index: 20;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: yuzu-logoFadeIn 5s ease 0s 1 normal;

    -webkit-animation: yuzu-logoFadeIn 5s ease 0s 1 normal;

}



@keyframes yuzu-logoFadeIn {

    0% {

        opacity: 0;

    }



    50% {

        opacity: 0;

    }



    90% {

        opacity: 1;

    }

}



@-webkit-keyframes yuzu-logoFadeIn {

    0% {

        opacity: 0;

    }



    50% {

        opacity: 0;

    }



    90% {

        opacity: 1;

    }

}



#header .yuzu-logo-pos .yuzu-logo a{

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 60%;

    position: relative;

    width: 100%;

    background: url("../images/header/logo_yuzu.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .chara1-pos {

    position: absolute;

    top: 10.625%;

    left: 24.214286%;

    width: 53.928571%;

    z-index: 10;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: chara1FadeIn 5s ease 0s 1 normal;

    -webkit-animation: chara1FadeIn 5s ease 0s 1 normal;

}



@keyframes chara1FadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    40% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes chara1FadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    40% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .chara1-pos .chara1 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 95.46061%;

    position: relative;

    width: 100%;

    background: url("../images/header/chara01.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .chara2-pos {

    position: absolute;

    top: 25%;

    left: 0;

    width: 30.428571%;

    z-index: 9;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: chara2FadeIn 5s ease 0s 1 normal;

    -webkit-animation: chara2FadeIn 5s ease 0s 1 normal;

}



@keyframes chara2FadeIn {

    0% {

        opacity: 0;

        margin-left: 5%;

    }



    10% {

        opacity: 0;

        margin-left: 5%;

    }



    50% {

        opacity: 1;

        margin-left: 0;

    }

}



@-webkit-keyframes chara2FadeIn {

    0% {

        opacity: 0;

        margin-left: 5%;

    }



    10% {

        opacity: 0;

        margin-left: 5%;

    }



    50% {

        opacity: 1;

        margin-left: 0;

    }

}



#header .chara2-pos .chara2 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 140.23529%;

    position: relative;

    width: 100%;

    background: url("../images/header/chara02.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .chara3-pos {

    position: absolute;

    top: 15%;

    left: 49.928571%;

    width: 49.714286%;

    z-index: 8;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: chara3FadeIn 5s ease 0s 1 normal;

    -webkit-animation: chara3FadeIn 5s ease 0s 1 normal;

}



@keyframes chara3FadeIn {

    0% {

        opacity: 0;

        margin-left: -5%;

    }



    20% {

        opacity: 0;

        margin-left: -5%;

    }



    60% {

        opacity: 1;

        margin-left: 0;

    }

}



@-webkit-keyframes chara3FadeIn {

    0% {

        opacity: 0;

        margin-left: -5%;

    }



    20% {

        opacity: 0;

        margin-left: -5%;

    }



    60% {

        opacity: 1;

        margin-left: 0;

    }

}



#header .chara3-pos .chara3 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 91.6666%;

    position: relative;

    width: 100%;

    background: url("../images/header/chara03.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .chara4-pos {

    position: absolute;

    top: 0;

    left: 18.000000%;

    width: 45.928571%;

    z-index: 7;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: chara4FadeIn 5s ease 0s 1 normal;

    -webkit-animation: chara4FadeIn 5s ease 0s 1 normal;

}



@keyframes chara4FadeIn {

    0% {

        opacity: 0;

        margin-top: -5%;

    }



    30% {

        opacity: 0;

        margin-top: -5%;

    }



    70% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes chara4FadeIn {

    0% {

        opacity: 0;

        margin-top: -5%;

    }



    30% {

        opacity: 0;

        margin-top: -5%;

    }



    70% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .chara4-pos .chara4 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 124.41679%;

    position: relative;

    width: 100%;

    background: url("../images/header/chara04.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .chara5-pos {

    position: absolute;

    top: 3.75%;

    left: 60.142857%;

    width: 34.000000%;

    z-index: 6;

    -webkit-transition: all 500ms 0s ease;

    transition: all 500ms 0s ease;

    animation: chara5FadeIn 5s ease 0s 1 normal;

    -webkit-animation: chara5FadeIn 5s ease 0s 1 normal;

}



@keyframes chara5FadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    40% {

        opacity: 0;

        margin-top: 5%;

    }



    80% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes chara5FadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    40% {

        opacity: 0;

        margin-top: 5%;

    }



    80% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .chara5-pos .chara5 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 153.78151%;

    position: relative;

    width: 100%;

    background: url("../images/header/chara05.png") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



/*contents*/



section {

    margin-bottom: 40px;

    border-top: 5px solid #ff8000;

    background: url(../images/common/sectionBG.png) repeat-x #fff;

    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

}



.in-frame{

    padding: 0 40px 40px 40px;

}



h2{

    max-width: 500px;

    width: 100%;

    margin: 0 auto;

}



h2 img{

    width: 100%;

}



h3 {

    position: relative;

    padding-bottom: 0.7em;

    font-size: 1.6em;

    text-align: center;

    margin-bottom: 3%;

  }

  

  h3:after {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 10px;

    content: '';

    background-image: -webkit-repeating-linear-gradient(135deg, #ff8000, #ff8000 1px, transparent 2px, transparent 5px);

    background-image: repeating-linear-gradient(-45deg, #ff8000, #ff8000 1px, transparent 2px, transparent 5px);

    background-size: 7px 7px;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

  }

  



p.pic{

    margin-bottom: 3%;

}



p:last-child.pic{

    margin-bottom: 0;

}



.pic img{

    width: 100%;

    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

}



.link-btn a{

    display: block;

    max-width: 500px;

    width: 100%;

    margin: 0 auto;

    text-align: center;

    color: #fff;

    background:rgba(11, 162, 154, 1);

    padding: 0.5em;

    border-radius: 20px;

    box-sizing: border-box;

}







/*movie*/



.swiper-container-wrap{

    max-width: 900px;

    width: 100%;

    margin: 0 auto;

    box-sizing: border-box;

    position: relative;

}



.swiper-container {

    text-align: center;

    width: 90%;

    margin: 0 auto;

    overflow: hidden;

    padding-bottom: 40px;

}



.swiper-container .swiper-slide {

    position: relative;

    width: 100%;

}



.swiper-container .swiper-slide:before {

    content: "";

    display: block;

    padding-top: 56.25%;

}



.swiper-container .swiper-slide iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.swiper-pagination-bullet{

    background: rgba(11, 162, 154, 1)

}



.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{

    bottom: 0;

}



.swiper-button-prev, .swiper-container-rtl .swiper-button-next{

    left: 0;

}



.swiper-button-next, .swiper-container-rtl .swiper-button-prev{

    right: 0;

}



@media only screen and (max-width: 700px) {

    

    .swiper-wrapper{

        display: block;

    }

    

    .swiper-container {

        text-align: center;

        width: 100%;

        padding: 0;

    }

    

    .swiper-container .swiper-slide {

        position: relative;

        width: 100%;

        margin-bottom: 1em;

    }

    

    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{

        display: none;

    }



    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{

        display: none;

    }

    

    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{

        display: none;

    }

}



/*prize*/



ul.prize-list{

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    margin: 0 -1.5% -3% -1.5%;

    justify-content: center;

}



ul.prize-list li{

    flex-basis: 33.33333%;

    padding: 0 1.5%;

    margin-bottom: 3%;

    box-sizing: border-box;

}



ul.prize-list li img{

    width: 100%;

    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);

}







/*footer*/



footer {

    text-align: center;

    padding: 30px;

    background: #333;

    color: #fff;

}



footer ul.sns {



    list-style: none;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin-bottom: 1em;

}



footer ul.sns li {

    width: 40px;

    margin: 0 5px;

}



footer ul.banner li img,

footer ul.sns li img {

    width: 100%;

}







/*RESPONSIVE--------------------------------------------------------------------------------------*/



@media only screen and (max-width: 900px) {}



/*MOBILE--------------------------------------------------------------------------------------*/



@media only screen and (max-width: 700px) {



    body {

        font-size: 14px;

    }

    body::before {

        content: "";

        display: block;

        position: fixed;

        top: 0;

        left: 0;

        z-index: -10;

        width: 100vw;

        height: 100vh;

        background: url(../images/common/bg.jpg) no-repeat top center fixed #ffbb00;

        background-size: contain;

    }



    #header {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 160%;

        position: relative;

        width: 100%;

        display: block;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        overflow: hidden;

    }

    

    #header .logo-pos {

        position: absolute;

        top: 72%;

        left: 10%;

        width: 80%;

        z-index: 20;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: logoFadeIn 5s ease 0s 1 normal;

        -webkit-animation: logoFadeIn 5s ease 0s 1 normal;

    }



    #header .catch-pos {

        position: absolute;

        top: 5%;

        left: 0%;

        width: 100%;

        z-index: 20;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: catchFadeIn 5s ease 0s 1 normal;

        -webkit-animation: catchFadeIn 5s ease 0s 1 normal;

    }



    #header .catch-pos .catch {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 114.28571%;

        position: relative;

        width: 100%;

        background: url("../images/header/catch2.png") no-repeat;

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

    }

    

    #header .yuzu-logo-pos {

        position: absolute;

        top: 3.750000%;

        left: 3%;

        width: 20%;

        z-index: 20;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: yuzu-logoFadeIn 5s ease 0s 1 normal;

        -webkit-animation: yuzu-logoFadeIn 5s ease 0s 1 normal;

    }

    

    #header .chara1-pos {

        position: absolute;

        top: 45%;

        left: 0%;

        width: 100%;

        z-index: 10;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: chara1FadeIn 5s ease 0s 1 normal;

        -webkit-animation: chara1FadeIn 5s ease 0s 1 normal;

    }

    

    #header .chara2-pos {

        position: absolute;

        top: 25%;

        left: -15%;

        width: 59%;

        z-index: 9;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: chara2FadeIn 5s ease 0s 1 normal;

        -webkit-animation: chara2FadeIn 5s ease 0s 1 normal;

    }

    

    #header .chara3-pos {

        position: absolute;

        top: 35%;

        left: 40%;

        width: 98%;

        z-index: 8;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: chara3FadeIn 5s ease 0s 1 normal;

        -webkit-animation: chara3FadeIn 5s ease 0s 1 normal;

    }

    

    #header .chara4-pos {

        position: absolute;

        top: 0;

        left: 10%;

        width: 89%;

        z-index: 6;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: chara4FadeIn 5s ease 0s 1 normal;

        -webkit-animation: chara4FadeIn 5s ease 0s 1 normal;

    }

    

    #header .chara5-pos {

        position: absolute;

        top: 15%;

        left: 35%;

        width: 66%;

        z-index: 7;

        -webkit-transition: all 500ms 0s ease;

        transition: all 500ms 0s ease;

        animation: chara5FadeIn 5s ease 0s 1 normal;

        -webkit-animation: chara5FadeIn 5s ease 0s 1 normal;

    }

    

    .in-frame{

        padding: 0 10px 20px 10px;

    }



    h3 {

        position: relative;

        padding-bottom: 0.7em;

        font-size: 1.6em;

        text-align: center;

        margin-bottom: 5%;

      }



      p.pic{

        margin-bottom: 5%;

    }





}