@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap');

/*common*/
html {
    height: 100%;
}

body {
    color: #333;
    font-size: clamp(10px, 16 / 1200 * 100vw, 16px);
    line-height: 1.7;
    line-break: strict;
    word-break: break-all;
    text-align: justify;
    text-justify: distribute;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    position: relative;
}

a:link {
    text-decoration: none;
    color: #ea5971;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
}

a:visited {
    text-decoration: none;
    color: #ea5971;
}

a:hover {
    text-decoration: none;
    opacity: 0.7;
}

p:not(:last-child) {
    margin-bottom: 1.5em;
}

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

/*bg*/

.bg{
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -10;
    background: url("../images/common/bg.jpg") no-repeat top center;
    background-size: cover;
}

/*header*/

.header-bg{
    width: 100%;
    overflow: hidden;
    position: relative;
}

.header-bg::before{
    content: "";
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 75%);
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header-wrap {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.header-wrap .header {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 91.6666%;
    position: relative;
    width: 100%;
    display: block;
    background: url(../images/header/bg.jpg) no-repeat;
    background-size: cover;
}

.header-wrap .header .chara-pos {
    position: absolute;
    top: 0.000000%;
    left: 16.666667%;
    width: 66.666667%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: charaFadeIn 2s ease 0s 1 normal;
    -webkit-animation: charaFadeIn 2s ease 0s 1 normal;
    z-index: 5;
}

@keyframes charaFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-15%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes charaFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-15%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-wrap .header .chara-pos .chara {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 137.50000%;
    position: relative;
    width: 100%;
    background: url("../images/header/chara.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

.header-wrap .header .logo-pos {
    position: absolute;
    top: 66.454545%;
    left: 36.250000%;
    width: 58.833333%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: logoFadeIn 2s ease 0s 1 normal;
    -webkit-animation: logoFadeIn 2s ease 0s 1 normal;
    z-index: 15;
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-wrap .header .logo-pos h1 {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 41.78470%;
    position: relative;
    width: 100%;
    background: url("../images/header/logo.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

.header-wrap .header .release-pos {
    position: absolute;
    top: 44.545455%;
    left: 62.750000%;
    width: 35.500000%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: releaseFadeIn 2s ease 0s 1 normal;
    -webkit-animation: releaseFadeIn 2s ease 0s 1 normal;
    z-index: 10;
}

@keyframes releaseFadeIn {
    0% {
        opacity: 0;
        transform: translateX(15%);
    }

    50% {
        opacity: 0;
        transform: translateX(15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes releaseFadeIn {
    0% {
        opacity: 0;
        transform: translateX(15%);
    }

    50% {
        opacity: 0;
        transform: translateX(15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.header-wrap .header .release-pos .release {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 45.53991%;
    position: relative;
    width: 100%;
    background: url("../images/header/release.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

.header-wrap .header .catch-pos {
    position: absolute;
    top: 4.454545%;
    left: 3.333333%;
    width: 13.250000%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: rcatchFadeIn 2s ease 0s 1 normal;
    -webkit-animation: catchFadeIn 2s ease 0s 1 normal;
    z-index: 10;
}

@keyframes catchFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-15%);
    }

    50% {
        opacity: 0;
        transform: translateX(-15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes catchFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-15%);
    }

    50% {
        opacity: 0;
        transform: translateX(-15%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.header-wrap .header .catch-pos .catch {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 613.20755%;
    position: relative;
    width: 100%;
    background: url("../images/header/catch.png") no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

.header-wrap .header .yuzulogo {
    position: absolute;
    top: 4%;
    right: 5%;
    width: 8%;
    z-index: 10;
}

.header-wrap .header .yuzulogo img{
    width: 100%;
}

/*sns*/

.sns-wrap{
    width: 100%;
    margin: 0 auto 50px auto;
}

.sns-wrap .sns ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sns-wrap .sns ul li {
    width: 50px;
    margin: 0 5px;
}

.sns-wrap .sns ul li img {
    width: 100%;
}

/*contents*/


.content-wrap{
    max-width: 1240px;
    width: 100%;
    padding: 70px 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

hr{
    margin: 50px 0;
    border-top: 2px dotted #333;
}

.frame{
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    margin: 100px 0 200px 0;
    position: relative;
}

.frame::before{
    content: "";
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    background: #fff;
    position: absolute;
    top: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame::after{
    content: "";
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    background: #fff;
    position: absolute;
    bottom: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame2{
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    margin: 200px 0;
    position: relative;
}

.frame2::before{
    content: "";
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    background: #fff;
    position: absolute;
    top: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame2::after{
    content: "";
    clip-path: polygon(0 0, 0 100%, 100% 0);
    background: #fff;
    position: absolute;
    bottom: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame3{
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    margin: 100px 0;
    position: relative;
}

.frame3::before{
    content: "";
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    background: #fff;
    position: absolute;
    top: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame3::after{
    content: "";
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    background: #fff;
    position: absolute;
    bottom: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame4{
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    margin: 200px 0;
    position: relative;
}

.frame4::before{
    content: "";
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    background: #fff;
    position: absolute;
    top: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame4::after{
    content: "";
    clip-path: polygon(0 0, 0 100%, 100% 0);
    background: #fff;
    position: absolute;
    bottom: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame5{
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    margin: 100px 0;
    position: relative;
}

.frame5::before{
    content: "";
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    background: #fff;
    position: absolute;
    top: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame5::after{
    content: "";
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    background: #fff;
    position: absolute;
    bottom: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame6{
    background: #ffffff;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    margin: 200px 0;
    position: relative;
}

.frame6::before{
    content: "";
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    background: #fff;
    position: absolute;
    top: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}

.frame6::after{
    content: "";
    clip-path: polygon(0 0, 0 100%, 100% 0);
    background: #fff;
    position: absolute;
    bottom: -49px;
    left: 0;
    width: 100%;
    height: 50px;
}




h2{
    max-width: 395px;
    width: 100%;
    margin: -80px auto -30px auto;
    position: relative;
    z-index: 50;
}

h2 img{
    width: 100%;
}

h3{
    background: #ffffff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(58, 188, 201, 1) 50%, rgba(255, 255, 255, 0) 100%);
    margin: 50px 0;
    font-size: 1.4em;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    padding: 0.5em;
}

h3:first-child{
    margin-top: 0;
}


/*information*/

dl.info-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    padding: 0 20px;
    box-sizing: border-box;
}

dl.info-wrap dt{
    width: 20%;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #3abcc9;
    font-size: 1.1em;
    vertical-align: baseline;
    margin-bottom: 0.5em;
}

dl.info-wrap 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: #fc0;
    font-size: 1em;
    vertical-align: text-top;
}

dl.info-wrap dd{
    width: 80%;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    margin-bottom: 0.5em;
    color: #fff;
}

/*topics*/

ul.topics-wrap {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 -1.5% -3% -1.5%;
    justify-content: center;
}

ul.topics-wrap li.bannerL {
    flex-basis: 100%;
    padding: 0 1.5%;
    box-sizing: border-box;
    margin-bottom: 3%;
}

ul.topics-wrap li.bannerM {
    flex-basis: 50%;
    padding: 0 1.5%;
    box-sizing: border-box;
    margin-bottom: 3%;
}

ul.topics-wrap li.bannerL img,
ul.topics-wrap li.bannerM img{
    width: 100%;
    -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);
}

/*movie*/

ul.movie-wrap {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 -1.5% -3% -1.5%;
}

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

/*story*/

.story-text{
    width: 100%;
    margin: 0 auto;
    padding: 5vh 20px;
    box-sizing: border-box;
    font-size: 1.1em;
    line-height: 2;
    background: url(../images/story/bg.jpg) center no-repeat;
    background-size: cover;
}

.story-text p{
    color: #fff;
    text-align: center;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

.story-text p span.c01{
    color: #e6d355;
    font-weight: bold;
}

.story-text p span.c02{
    color: #3abcc9;
    font-weight: bold;
}

/*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: 4%;
    right: 2%;
    width: 41%;
}

.chara-cos-pos h5 {
    text-align: right;
    font-size: 0.9em;
    font-family: 'Oswald', sans-serif;
    padding-right: 5px;
}

.chara-cos-pos img {
    width: 100%;
}

.cos-tab,
.cos-tab2,
.cos-tab3,
.cos-tab4,
.cos-tab5,
.cos-tab6 {
    width: 105px;
    margin: 10px 0 0 auto;
    box-sizing: border-box;
}

.cos-tab .slick-track,
.cos-tab2 .slick-track,
.cos-tab3 .slick-track,
.cos-tab4 .slick-track,
.cos-tab5 .slick-track,
.cos-tab6 .slick-track {
    transform: unset !important;
}

.cos-tab .slick-slide,
.cos-tab2 .slick-slide,
.cos-tab3 .slick-slide,
.cos-tab4 .slick-slide,
.cos-tab5 .slick-slide,
.cos-tab6 .slick-slide {
    margin: 0 5px;
}

.cos-tab .slick-slide img,
.cos-tab2 .slick-slide img,
.cos-tab3 .slick-slide img,
.cos-tab4 .slick-slide img,
.cos-tab5 .slick-slide img,
.cos-tab6 .slick-slide img {
    width: 100%;
}

.cos-slider.cos01,
.cos-slider2.cos02,
.cos-slider3.cos03,
.cos-slider4.cos04,
.cos-slider5.cos05,
.cos-slider6.cos06 {
    left:25%;
}


.chara-text {
    margin: 2em 0;
    text-align: center;
}

.chara-text .attribute{
    font-weight: bold;
    color: #ea5971;
}

.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: 35% !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: 35% !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;
}

ul.dl-item{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    overflow: hidden;
    border-radius: 50px;
    box-sizing: border-box;
    border: 3px solid #fff;
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    width: calc(100% - 8px);
    margin: 0 auto 5px auto;
}

ul.dl-item li{
    width: calc(100% / 3);
}

ul.dl-item li a{
    display: block;
    text-align: center;
    background: #3abcc9;
    color: #fff;
    padding: 1em 0.5em;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    box-sizing: border-box;
}

ul.dl-item li.dl02 a{
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

ul.dl-item li.dl01 a::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    content: "\f118";
    margin-right: 0.5em;
    font-weight: bold;
    color: #fc0;
    font-size: 1em;
    vertical-align: text-top;
}

ul.dl-item li.dl02 a::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    content: "\f118";
    margin-right: 0.5em;
    font-weight: bold;
    color: #fc0;
    font-size: 1em;
    vertical-align: text-top;
}

ul.dl-item li.dl03 a::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    content: "\f03e";
    margin-right: 0.5em;
    font-weight: bold;
    color: #fc0;
    font-size: 1em;
    vertical-align: text-top;
}

/*sub-chara*/

ul.sub-chara-wrap {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto -3% auto;
    max-width: 800px;
    width: 100%;
}

ul.sub-chara-wrap li {
    width: calc(100% / 2);
    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;
    font-size: 0.9em;
}


/*mainsite*/

.mainsite{
    max-width: 800px;
    margin: 50px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.mainsite img{
    width: 100%;
    -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);
    border: 1px solid #fff;
}


/*footer*/

.footer{
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 50px 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.9em;
    margin-top: 100px;
    position: relative;
    z-index: 10;
}

.footer .sns{
    margin-bottom: 1em;
}

.footer .sns ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer .sns ul li {
    width: 50px;
    margin: 0 5px;
}

.footer .sns ul li img {
    width: 100%;
}

/*pagetop*/

#page-top {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 60px;
    margin-bottom: 0;
    z-index: 200;
}

#page-top img {
    width: 100%;
}




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

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

    

}

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

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


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

    span.br::before{
        content: "\A" ;
        white-space: pre ;
        padding-right: 0.5em;
    }

    .header-bg::before{
        content: "";
        clip-path: polygon(0 0, 100% 0, 100% 35%, 0 65%);
        background: #ffffff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 1) 100%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .header-wrap .header {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 150%;
        position: relative;
        width: 100%;
        display: block;
        background: url(../images/header/bg.jpg) no-repeat;
        background-size: cover;
    }

    .header-wrap .header .chara-pos {
        position: absolute;
        top: 0.000000%;
        left: 6%;
        width: 90%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: charaFadeIn 2s ease 0s 1 normal;
        -webkit-animation: charaFadeIn 2s ease 0s 1 normal;
        z-index: 5;
    }

    .header-wrap .header .logo-pos {
        position: absolute;
        top: 72%;
        left: 5%;
        width: 90%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: logoFadeIn 2s ease 0s 1 normal;
        -webkit-animation: logoFadeIn 2s ease 0s 1 normal;
        z-index: 15;
    }

    .header-wrap .header .release-pos {
        position: absolute;
        top: 49%;
        left: 55%;
        width: 45%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: releaseFadeIn 2s ease 0s 1 normal;
        -webkit-animation: releaseFadeIn 2s ease 0s 1 normal;
        z-index: 10;
    }

    .header-wrap .header .catch-pos {
        position: absolute;
        top: 62%;
        left: 5%;
        width: 90%;
        -webkit-transition: all 500ms 0s ease;
        transition: all 500ms 0s ease;
        animation: rcatchFadeIn 2s ease 0s 1 normal;
        -webkit-animation: catchFadeIn 2s ease 0s 1 normal;
        z-index: 10;
    }

    .header-wrap .header .catch-pos .catch {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 15.24459%;
        position: relative;
        width: 100%;
        background: url("../images/header/catch2.png") no-repeat;
        background-size: cover;
        display: block;
        overflow: hidden;
        text-indent: -9999px;
    }

    .header-wrap .header .yuzulogo {
        position: absolute;
        top: 2%;
        right: 4%;
        width: 18%;
        z-index: 10;
    }

    .sns-wrap{
        width: 100%;
        margin: 0 auto 5vh auto;
    }

    .content-wrap{
        width: 100%;
        padding: 5vh 20px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .frame{
        background: #ffffff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
        margin: 10vh 0 20vh 0;
        position: relative;
    }
    
    .frame2{
        background: #ffffff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
        margin: 20vh 0;
        position: relative;
    }
    
    .frame3{
        background: #ffffff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
        margin: 10vh 0;
        position: relative;
    }

    hr{
        margin: 5vh 0;
        border-top: 2px dotted #333;
    }

    h2{
        width: 70%;
        margin: -8vh auto -2vh auto;
    }

    h3{
        background: #ffffff;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(58, 188, 201, 1) 50%, rgba(255, 255, 255, 0) 100%);
        margin: 3vh 0;
        font-size: 1.4em;
        line-height: 1.5;
        color: #fff;
        text-align: center;
        -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
        -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
        padding: 0.5em;
    }

    dl.info-wrap dt{
        width: 100%;
        margin-bottom: 0;
    }
    
    dl.info-wrap dd{
        width: 100%;
        padding: 0;
        margin: 0 0 1em 0;
    }

    ul.topics-wrap {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0 -2% -2vh -2%;
    }
    
    ul.topics-wrap li.bannerL,
    ul.topics-wrap li.bannerM {
        padding: 0 2%;
        box-sizing: border-box;
        margin-bottom: 2vh;
    }

    ul.movie-wrap {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0 -2% -3vh -2%;
    }
    
    ul.movie-wrap li {
        flex-basis: 100%;
        padding: 0 2%;
        box-sizing: border-box;
        margin-bottom: 3vh;
    }

    .story-text p{
        text-align: left;
    }

    .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,
    .cos-tab2,
    .cos-tab3,
    .cos-tab4,
    .cos-tab5,
    .cos-tab6 {
        width: 135px;
        margin: 10px auto 10px auto;
        box-sizing: border-box;
    }

    .cos-tab .slick-track,
    .cos-tab2 .slick-track,
    .cos-tab3 .slick-track,
    .cos-tab4 .slick-track,
    .cos-tab5 .slick-track,
    .cos-tab6 .slick-track {
        transform: unset !important;
    }

    .cos-tab .slick-slide,
    .cos-tab2 .slick-slide,
    .cos-tab3 .slick-slide,
    .cos-tab4 .slick-slide,
    .cos-tab5 .slick-slide,
    .cos-tab6 .slick-slide {
        margin: 0 5px;
    }

    .cos-tab .slick-slide img,
    .cos-tab2 .slick-slide img,
    .cos-tab3 .slick-slide img,
    .cos-tab4 .slick-slide img,
    .cos-tab5 .slick-slide img,
    .cos-tab6 .slick-slide img {
        width: 100%;
    }

    .cos-slider.cos01,
    .cos-slider2.cos02,
    .cos-slider3.cos03,
    .cos-slider4.cos04,
    .cos-slider5.cos05,
    .cos-slider6.cos06 {
        left: 0;
    }

    .chara-cos-pos h5 {
        text-align: center;
        padding-right: 0;
    }

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

    .slick-track{
        display: flex!important;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        margin: 0;
    }

    ul.dl-item{
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        overflow: hidden;
        border-radius: 10px;
        box-sizing: border-box;
        border: 3px solid #fff;
        -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
        -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
        width: calc(100% - 8px);
        margin: 0 auto 5px auto;
    }

    ul.dl-item li{
        width: 100%;
    }

    ul.dl-item li a{
        padding: 0.5em;
    }

    ul.dl-item li.dl02 a{
        border-left: none;
        border-right: none;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .thumbnail .slick-slide{
        width: 15%!important;
        float: none;
        margin: 0!important;
    }

    .thumbnail .slick-track{
        width: 100%!important;
    }

    .chara-text{
        text-align: left;
    }

    ul.sub-chara-wrap {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto -5vh auto;
    }

    ul.sub-chara-wrap li {
        flex-basis: 75%;
        padding: 0 1.5%;
        margin-bottom: 5vh;
        box-sizing: border-box;
    }

    .mainsite{
        max-width: 800px;
        margin: 10vh auto;
        padding: 0 20px;
        box-sizing: border-box;
    }


    .footer{
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: 5vh 15px;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.9em;
        margin-top: 10vh;
    }

    

}