@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.8;

    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;

    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: 1.5em;

}




table{
  width: 70%;
  border-spacing: 0;
}

table th{
  border-bottom: solid 2px #fb5144;
  text-align: center;
vertical-align: top;
  padding: 10px 0;
}

table td{
  border-bottom: solid 2px #ddd;
  text-align: center;
  padding: 10px 0;
}




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





/*navi*/



nav {

    display: block;

    position: fixed;

    top: 0;

    right: -900px;

    bottom: 0;

    width: 450px;

    background: rgba(38, 156, 217, 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 #269cd9;

    justify-content: center;

    align-items: center;

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

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

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

}



nav .inner ul li a {

    display: block;

    width: 100%;

    color: #ffe940;

    font-size: 1.4em;

    font-weight: blod;

    text-align: center;

    padding: 10px;

    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: #5e0200;

    -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: #ffe940;

        font-size: 1.2em;

        font-weight: blod;

        text-align: center;

        padding: 10px;

        text-decoration: none;

        transition-duration: 0.2s;

    }



    .toggle_btn {

        top: 10px;

        right: 10px;

    }

}



/*header*/



#header-wrap {

    max-width: 1200px;

    width: 100%;

    margin: 0 auto;

}



#header {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 66.66666%;

    position: relative;

    width: 100%;

    display: block;

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

    transition: all 500ms 0s ease;

}



#header .logo-pos {

    position: absolute;

    top: 52.875000%;

    left: 1.000000%;

    width: 52.750000%;

    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%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes logoFadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    50% {

        opacity: 0;

        margin-top: 5%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .logo-pos h1 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 65.87677%;

    position: relative;

    width: 100%;

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

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .catch-pos {

    position: absolute;

    top: 46.500000%;

    left: 1.833333%;

    width: 51.166667%;

    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: 10.89743%;

    position: relative;

    width: 100%;

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

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}





#header .release-pos {

    position: absolute;

    top: 78.500000%;

    left: 56.916667%;

    width: 38.583333%;

    z-index: 20;

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

    transition: all 500ms 0s ease;

    animation: releaseFadeIn 5s ease 0s 1 normal;

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

}



@keyframes releaseFadeIn {

    0% {

        opacity: 0;

        margin-left: 5%;

    }



    50% {

        opacity: 0;

        margin-left: 5%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes releaseFadeIn {

    0% {

        opacity: 0;

        margin-left: 5%;

    }



    50% {

        opacity: 0;

        margin-left: 5%;

    }



    90% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .release-pos .release {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 24.62203%;

    position: relative;

    width: 100%;

    background: url("../images/header/release.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: 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: 32.625000%;

    left: 18.416667%;

    width: 81.666667%;

    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: 63.81243%;

    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: -49.250000%;

    left: 27.333333%;

    width: 71.750000%;

    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-top: -5%;

    }



    10% {

        opacity: 0;

        margin-top: -5%;

    }



    50% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes chara2FadeIn {

    0% {

        opacity: 0;

        margin-top: -5%;

    }



    10% {

        opacity: 0;

        margin-top: -5%;

    }



    50% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .chara2-pos .chara2 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 120.09291%;

    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: -48.500000%;

    left: -2.083333%;

    width: 86.500000%;

    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: 124.08477%;

    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: 20.875000%;

    left: 36.833333%;

    width: 20.000000%;

    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: 123.75%;

    position: relative;

    width: 100%;

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

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header .wing-pos {

    position: absolute;

    top: -9.375000%;

    left: 4.916667%;

    width: 93.583333%;

    z-index: 11;

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

    transition: all 500ms 0s ease;

    animation: wingFadeIn 5s ease 0s 1 normal;

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

}



@keyframes wingFadeIn {

    0% {

        opacity: 0;

        margin-top: -5%;

    }



    40% {

        opacity: 0;

        margin-top: -5%;

    }



    80% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes wingFadeIn {

    0% {

        opacity: 0;

        margin-top: -5%;

    }



    40% {

        opacity: 0;

        margin-top: -5%;

    }



    80% {

        opacity: 1;

        margin-top: 0;

    }

}



#header .wing-pos .wing {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 67.49777%;

    position: relative;

    width: 100%;

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

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



/*header2*/



#header2 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 33.3333%;

    position: relative;

    width: 100%;

    display: block;

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

    transition: all 500ms 0s ease;

}



#header2 .logo-pos2 {

    position: absolute;

    top: 10%;

    left: 25%;

    width: 50%;

    z-index: 20;

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

    transition: all 500ms 0s ease;

    animation: logo2FadeIn 5s ease 0s 1 normal;

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

}



@keyframes logo2FadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    40% {

        opacity: 1;

        margin-top: 0;

    }

}



@-webkit-keyframes logo2FadeIn {

    0% {

        opacity: 0;

        margin-top: 5%;

    }



    40% {

        opacity: 1;

        margin-top: 0;

    }

}



#header2 .logo-pos2 h1 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 65.87677%;

    position: relative;

    width: 100%;

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

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



#header2 .yuzu-logo-pos2 {

    position: absolute;

    top: 7%;

    left: 3%;

    width: 8.642857%;

    z-index: 20;

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

    transition: all 500ms 0s ease;

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

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

}



@keyframes yuzu-logo2FadeIn {

    0% {

        opacity: 0;

    }



    40% {

        opacity: 1;

    }

}



@-webkit-keyframes yuzu-logo2FadeIn {

    0% {

        opacity: 0;

    }



    40% {

        opacity: 1;

    }

}



#header2 .yuzu-logo-pos2 .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;

}



/*banner*/



ul.banner {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin-bottom: 50px;

    position: relative;

    z-index: 30;

}



ul.banner li {

    margin: 0 5px 10px 5px;

}



/*content*/



.content-bg {

    width: 100%;

    background: rgba(255, 255, 255, 0.8);

}



.content-wrap {

    max-width: 1250px;

    width: 100%;

    box-sizing: border-box;

    padding: 50px 25px 1px 25px;

    margin: 0 auto;

    z-index: 50;

}



section {

    margin-bottom: 100px;

}



section .space-wrap{

    padding: 0 25px;

    overflow: hidden;

}



h2 {

    border: #5e0200 5px solid;

    padding: 0.6em;

    font-size: 1.8em;

    font-weight: normal;

    text-align: center;

    color: #fff;

    margin: 50px 0;

    background: rgb(173, 30, 72);

    background: linear-gradient(90deg, rgba(173, 30, 72, 1) 0%, rgba(235, 95, 1, 1) 50%, rgba(173, 30, 72, 1) 100%);

    box-sizing: border-box;

    outline: 1px solid #ffe940;

    outline-offset: -10px;

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

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

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

    line-height: 1.2;

}



h2 span {

    font-size: 0.6em;

    color: #ffe940;

}



.article-1column {

    border-bottom: 1px solid #999;

    margin-bottom: 50px;

    padding-bottom: 50px;

}



.article-1column .text {

    margin-bottom: 3%;

}



.article-1column .pic {

    max-width: 900px;

    width: 100%;

    margin: 0 auto;

}

.article-1column .table {

    max-width: 800px;

    width: 100%;

    margin: 0 auto;

}









.article-2column {

    display: flex;

    flex-wrap: wrap;

    border-bottom: 1px solid #999;

    margin-bottom: 50px;

    padding-bottom: 50px;

}



.article-2column .text {

    width: 60%;

    box-sizing: border-box;

    padding-right: 3%;

}



.article-2column .pic {

    width: 40%;

}



.article-1column .pic img,

.article-2column .pic img {

    width: 100%;

}




.article-1column .pic2 img,

.article-2column .pic2 img {

    width: 30%;

}



.article-1column .text h3,

.article-2column .text h3 {

    margin-bottom: 1.5em;

    font-size: 1.2em;

    color: #5e0200;

}



.article-2column2 {

    display: flex;

    flex-wrap: wrap;

    border-bottom: 1px solid #999;

    margin-bottom: 50px;


    padding-bottom: 50px;

}



.article-2column2 .text {

    width: 60%;

    box-sizing: border-box;

    padding-right: 3%;
    padding-left: 3%;

}



.article-2column2 .text2 {

    width: 80%;

    box-sizing: border-box;

    padding-right: 3%;
    padding-left: 3%;

}


.article-2column2 .pic {

    width: 40%;

}



.article-1column2 .pic img,

.article-2column2 .pic img {
    width: 100%;

}





.article-1column2 .text h3,

.article-2column2 .text h3 {

    margin-bottom: 0.5em;

    font-size: 1.2em;

    color: #5e0200;

}

.article-1column2 .text2 h3,

.article-2column2 .text2 h3 {

    margin-bottom: 0.5em;

    font-size: 1.2em;

    color: #5e0200;

}



.link-btn a {

    display: block;

    max-width: 700px;

    width: 100%;

    text-align: center;

    background: #ff3b89;

    color: #fff;

    margin: 0 auto 1.5em auto;

    padding: 0.5em;

    box-sizing: border-box;

    border-radius: 50px;

}


.link-btn2 a {

    display: block;

    max-width: 700px;

    width: 100%;

    text-align: center;

    background: #ff3b89;

    color: #fff;

    margin: 0 auto 0.8em auto;

    padding: 0.1em;

    box-sizing: border-box;

    border-radius: 50px;

}





/*info*/



dl.info {

    font-size: 1em;

}



dl.info dt {

    float: left;

    color: #ff3b89;

    width: 8em;

    font-weight: bold;

}



dl.info dt::before {

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: "Font Awesome 5 Free";

    content: "\f15c";

    margin-right: 0.5em;

    font-weight: bold;

    color: #259fda;

}



dl.info dd {

    margin: 0 0 1em 8em;

}



/*special*/



ul.special-wrap {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

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

}



ul.special-wrap li {

    flex-basis: 33.3333%;

    padding: 0 1.5%;

    margin-bottom: 3%;

    box-sizing: border-box;

}



ul.special-wrap li .special {

    background: #fff;

    border: 5px solid #5e0200;

    border-radius: 7px;

    box-sizing: border-box;

}



ul.special-wrap li .special img {

    width: 100%;

}



ul.special-wrap li .special h3 {

    text-align: center;

    padding: 0.5em;

}



/*story*/



.story-wrap {

    display: flex;

    flex-wrap: wrap;

}



.story-wrap .text {

    flex-basis: 60%;

    font-size: clamp(10px, 16 / 1200 * 100vw, 16px);

}



.story-wrap .pic {

    flex-basis: 40%;

}



.story-wrap .pic img {

    width: 100%;

}



.story-wrap .text .deco01 {

    font-weight: bold;

    color: #ff3b89;

}



.story-wrap .text .deco02 {

    font-weight: bold;

    color: #259fda;

}



/*chara*/



.chara-wrap {

    position: relative;

    width: 100%;

}



.chara-base-pos {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

}



.chara-base01 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 66.66666%;

    position: relative;

    width: 100%;

    background: url("../images/mainchara/chara01/chara-base.jpg") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



.chara-base02 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 66.66666%;

    position: relative;

    width: 100%;

    background: url("../images/mainchara/chara02/chara-base.jpg") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



.chara-base03 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 66.66666%;

    position: relative;

    width: 100%;

    background: url("../images/mainchara/chara03/chara-base.jpg") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



.chara-base04 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 66.66666%;

    position: relative;

    width: 100%;

    background: url("../images/mainchara/chara04/chara-base.jpg") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



.chara-base05 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 66.66666%;

    position: relative;

    width: 100%;

    background: url("../images/mainchara/chara05/chara-base.jpg") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



.chara-base06 {

    top: 0px;

    left: 0px;

    height: 0;

    padding-top: 66.66666%;

    position: relative;

    width: 100%;

    background: url("../images/mainchara/chara06/chara-base.jpg") no-repeat;

    background-size: cover;

    display: block;

    overflow: hidden;

    text-indent: -9999px;

}



.chara-cos-pos {

    position: absolute;

    top: 5%;

    right: 3%;

    width: 40%;

}



.chara-cos-pos h5 {

    text-align: right;

    font-size: clamp(10px, 16 / 1200 * 100vw, 16px);

}



.chara-cos-pos img {

    width: 100%;

}



.cos-tab {

    width: 105px;

    margin: 10px 0 10px auto;

    box-sizing: border-box;

}



.cos-tab .slick-track {

    transform: unset !important;

}



.cos-tab .slick-slide {

    margin: 0 5px;

}



.cos-tab .slick-slide img {

    width: 100%;

}



.cos-slider.cos01,

.cos-slider.cos02,

.cos-slider.cos03,

.cos-slider.cos04,

.cos-slider.cos05,

.cos-slider.cos06 {

    left: 100px;

}





.chara-text {

    margin: 1.5em 0;

}



ul.event-cg-wrap {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin: 0 -1% -2% -1%;

}



ul.event-cg-wrap li {

    flex-basis: 25%;

    padding: 0 1%;

    margin-bottom: 2%;

    box-sizing: border-box;

}



ul.event-cg-wrap li img {

    width: 100%;

}



.thumbnail {

    max-width: 600px;

    width: 100%;

    margin: 0 auto 10px auto;

    box-sizing: border-box;

}



.thumbnail .slick-slide {

    margin: 0 5px;

}



.thumbnail .slick-slide img {

    width: 100%;

}



.thumbnail .slick-track {

    transform: unset !important;

}



.thumbnail .thumbnail-img {

    opacity: .3;

    transition: opacity .3s linear;

}



.thumbnail .slick-current {

    opacity: 1;

}



.slick-prev {

    width: 41px !important;

    height: 78px !important;

    left: -20px !important;

    top: 380px !important;

    z-index: 99;

    background: none !important;

}



.slick-prev::before {

    content: "" !important;

    display: block;

    width: 41px;

    height: 78px;

    background: url(../images/mainchara/prev.png) no-repeat;

    background-size: contain;

}



.slick-next {

    width: 41px !important;

    height: 78px !important;

    right: -20px !important;

    top: 380px !important;

    z-index: 99;

    background: none !important;

}



.slick-next::before {

    content: "" !important;

    display: block;

    width: 41px;

    height: 78px;

    background: url(../images/mainchara/next.png) no-repeat right;

    background-size: contain;

}



.slick-list {

    padding: 0 !important;

}



.slick-arrow::after {

    display: none;

}



/*sub-chara*/



ul.sub-chara-wrap {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

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

}



ul.sub-chara-wrap li {

    flex-basis: 40%;

    padding: 0 1.5%;

    margin-bottom: 3%;

    box-sizing: border-box;

}



ul.sub-chara-wrap li img {

    width: 100%;

}



ul.sub-chara-wrap li .chara-text {

    margin: 1.5em 0 0 0;

}



/*movie*/



ul.movie-wrap {

    display: flex;

    flex-wrap: wrap;

    list-style: none;

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

    justify-content: center;

}



ul.movie-wrap li {

    flex-basis: 50%;

    padding: 0 1.5%;

    box-sizing: border-box;

    margin-bottom: 3%;

}



.movie {

    position: relative;

    width: 100%;

    padding-top: 56.25%;

}



.movie iframe {

    position: absolute;

    top: 0;

    right: 0;

    width: 100% !important;

    height: 100% !important;

    -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);

}



/*spec*/



dl.spec-wrap {

    display: table;

    margin: 0 auto;

    text-align: left;

}



dl.spec-wrap dt {

    float: left;

    color: #5e0200;

    width: 7em;

    font-weight: bold;

    margin-bottom: 1em;

}



dl.spec-wrap dd {

    margin: 0 0 1em 7em;

}





/*footer*/



footer {

    text-align: center;

    padding: 30px;

    background: #259fda;

    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%;

}



/*pagetop*/



#page-top

{

	position: fixed;

	bottom: 0;

	right: 0;

	z-index: 100;

    width: 100px;

}



#page-top img{

    width: 100%;

}









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



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



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



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



    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/bg2.jpg) no-repeat top center fixed;

        background-size: cover;

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

        transition: all 500ms 0s ease;

    }





    /*header*/



    #header {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 140%;

        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: 42%;

        left: 5%;

        width: 90%;

        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: 40%;

        left: 5%;

        width: 90%;

        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 .release-pos {

        position: absolute;

        top: 78.500000%;

        left: 10%;

        width: 80%;

        z-index: 20;

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

        transition: all 500ms 0s ease;

        animation: releaseFadeIn 5s ease 0s 1 normal;

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

    }



    #header .yuzu-logo-pos {

        position: absolute;

        top: 3.750000%;

        left: 5%;

        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: 20%;

        left: 7.416667%;

        width: 117%;

        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 .chara1-pos .chara1 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 86.41444%;

        position: relative;

        width: 100%;

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

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

    }



    #header .chara2-pos {

        position: absolute;

        top: -36.250000%;

        left: 15.333333%;

        width: 92.500000%;

        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: -22.500000%;

        left: -15.083333%;

        width: 107.916667%;

        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: 10.875000%;

        left: 13.833333%;

        width: 65.000000%;

        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;

    }



    #header .chara4-pos .chara4 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 52.37315%;

        position: relative;

        width: 100%;

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

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

    }



    #header .wing-pos {

        position: absolute;

        top: 11%;

        left: -4.916667%;

        width: 103.583333%;

        z-index: 11;

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

        transition: all 500ms 0s ease;

        animation: wingFadeIn 5s ease 0s 1 normal;

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

    }



    /*header2*/



    #header2 .logo-pos2 {

        position: absolute;

        top: 10%;

        left: 15%;

        width: 70%;

        z-index: 20;

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

        transition: all 500ms 0s ease;

        animation: logo2FadeIn 5s ease 0s 1 normal;

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

    }



    #header2 .yuzu-logo-pos2 {

        position: absolute;

        top: 3.750000%;

        left: 5%;

        width: 20%;

        z-index: 20;

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

        transition: all 500ms 0s ease;

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

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

    }



    /*banner*/



    ul.banner {

        list-style: none;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        margin-bottom: 5vh;

        position: relative;

        z-index: 30;

    }



    ul.banner li img {

        height: 45px;

    }



    /*content*/



    .content-wrap {

        max-width: 1220px;

        width: 100%;

        box-sizing: border-box;

        padding: 5vh 15px 1px 15px;

        margin: 0 auto;

        z-index: 50;

    }



    section {

        margin-bottom: 10vh;

    }



    section .space-wrap{

        padding: 0 15px;

        overflow: hidden;

    }

    





    h2 {

        margin: 5vh 0;

    }



    .article-2column {

        display: flex;

        flex-wrap: wrap;

        border-bottom: 1px solid #999;

        margin-bottom: 5vh;

        padding-bottom: 5vh;

    }



    .article-2column .text {

        width: 100%;

        box-sizing: border-box;

        padding-right: 0;

        margin-bottom: 5vh;

    }



    .article-2column .pic {

        width: 100%;

    }



    .article-1column .text {

        margin-bottom: 5vh;

    }



    /*info*/



    dl.info {

        font-size: 1em;

    }



    dl.info dt {

        float: left;

        color: #ff3b89;

        width: 100%;

        font-weight: bold;

    }



    dl.info dt::before {

        display: inline-block;

        font-style: normal;

        font-variant: normal;

        text-rendering: auto;

        -webkit-font-smoothing: antialiased;

        font-family: "Font Awesome 5 Free";

        content: "\f15c";

        margin-right: 0.5em;

        font-weight: bold;

        color: #259fda;

    }



    dl.info dd {

        margin: 0;

    }



    /*special*/





    ul.special-wrap li {

        flex-basis: 100%;

        padding: 1.5%;

        margin-bottom: 3%;

        box-sizing: border-box;

    }



    /*story*/



    .story-wrap {

        display: flex;

        flex-wrap: wrap;

    }



    .story-wrap .text {

        flex-basis: 100%;

        font-size: clamp(10px, 14 / 375 * 100vw, 14px);

        margin-bottom: 5vh;

    }



    .story-wrap .pic {

        flex-basis: 70%;

        margin: 0 auto;

    }



    /*chara*/



    .chara-base-pos {

        position: relative;

        top: 0;

        left: 0;

        width: 100%;

    }



    .chara-base01 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 130.20833%;

        position: relative;

        width: 100%;

        background: url("../images/mainchara/chara01/chara-base2.jpg") no-repeat top left;

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

        margin-bottom: 3vh;

    }



    .chara-base02 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 130.20833%;

        position: relative;

        width: 100%;

        background: url("../images/mainchara/chara02/chara-base2.jpg") no-repeat top left;

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

        margin-bottom: 3vh;

    }



    .chara-base03 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 130.20833%;

        position: relative;

        width: 100%;

        background: url("../images/mainchara/chara03/chara-base2.jpg") no-repeat top left;

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

        margin-bottom: 3vh;

    }



    .chara-base04 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 130.20833%;

        position: relative;

        width: 100%;

        background: url("../images/mainchara/chara04/chara-base2.jpg") no-repeat top left;

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

        margin-bottom: 3vh;

    }



    .chara-base05 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 130.20833%;

        position: relative;

        width: 100%;

        background: url("../images/mainchara/chara05/chara-base2.jpg") no-repeat top left;

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

        margin-bottom: 3vh;

    }



    .chara-base06 {

        top: 0px;

        left: 0px;

        height: 0;

        padding-top: 130.20833%;

        position: relative;

        width: 100%;

        background: url("../images/mainchara/chara06/chara-base2.jpg") no-repeat top left;

        background-size: cover;

        display: block;

        overflow: hidden;

        text-indent: -9999px;

        margin-bottom: 3vh;

    }



    .chara-cos-pos {

        position: relative;

        top: auto;

        right: auto;

        width: 80%;

        margin: 0 auto;

    }



    .cos-tab {

        width: 135px;

        margin: 10px auto 10px auto;

        box-sizing: border-box;

    }



    .cos-tab .slick-track {

        transform: unset !important;

    }



    .cos-tab .slick-slide {

        margin: 0 5px;

    }



    .cos-tab .slick-slide img {

        width: 100%;

    }



    .cos-slider.cos01,

    .cos-slider.cos02,

    .cos-slider.cos03,

    .cos-slider.cos04,

    .cos-slider.cos05,

    .cos-slider.cos06 {

        left: 0;

    }



    .chara-cos-pos h5 {

        text-align: center;

        font-size: clamp(10px, 14 / 375 * 100vw, 14px);

    }



    ul.event-cg-wrap li {

        flex-basis: 50%;

        padding: 0 1%;

        margin-bottom: 2%;

        box-sizing: border-box;

    }



    .slick-prev {

        width: 20px !important;

        height: 39px !important;

        left: -10px !important;

        top: 200px !important;

        z-index: 99;

        background: rgba(0, 0, 0, 0.8);

    }



    .slick-prev::before {

        content: "" !important;

        display: block;

        width: 20px;

        height: 39px;

        background: url(../images/mainchara/prev.png) no-repeat;

        background-size: contain;

    }



    .slick-next {

        width: 20px !important;

        height: 39px !important;

        right: -10px !important;

        top: 200px !important;

        z-index: 99;

        background: rgba(0, 0, 0, 0.8);

    }



    .slick-next::before {

        content: "" !important;

        display: block;

        width: 20px;

        height: 39px;

        background: url(../images/mainchara/next.png) no-repeat right;

        background-size: contain;

    }



    /*sub-chara*/



    ul.sub-chara-wrap {

        list-style: none;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        margin: 0 -1.5% -5vh -1.5%;

    }



    ul.sub-chara-wrap li {

        flex-basis: 80%;

        padding: 0 1.5%;

        margin-bottom: 5vh;

        box-sizing: border-box;

    }



    /*movie*/



    ul.movie-wrap li {

        flex-basis: 100%;

        padding: 0 1.5%;

        box-sizing: border-box;

        margin-bottom: 3%;

    }



    /*spec*/



    dl.spec-wrap {

        display: block;

        margin: 0 auto;

        text-align: left;

    }



    dl.spec-wrap dt {

        float: none;

        color: #5e0200;

        width: 100%;

        font-weight: bold;

        margin-bottom: 0;

    }



    dl.spec-wrap dd {

        margin: 0 0 1em 0;

    }



    /*pagetop*/



#page-top

{

	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 100;
    width: 80px;

}








}