html,
    body,
    div,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    nav ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

    a {
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    ins {
        background-color: #ff9;
        color: #000;
        text-decoration: none;
    }

    mark {
        background-color: #ff9;
        color: #000;
        font-style: italic;
        font-weight: bold;
    }

    del {
        text-decoration: line-through;
    }

    abbr[title],
    dfn[title] {
        border-bottom: 1px dotted;
        cursor: help;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #cccccc;
        margin: 1em 0;
        padding: 0;
    }

    input,
    select {
        vertical-align: middle;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    img {
        vertical-align: bottom;
        width: auto;
        max-width: 100%;
    }

    li {
        list-style: none;
    }

    html {
        scroll-behavior: smooth;
    }

    @media only screen and (min-width: 961px) {
        .sp {
            display: none;
        }

    }

    @media only screen and (max-width: 960px) {
        .pc {
            display: none;
        }

    }

    body {
        margin: 0;
        padding: 0;
        line-height: 1.5;

        font-family: 'Noto Sans JP', sans-serif;
        font-size: 14px;
        letter-spacing: 0.05em;
        background: #001A43;
    }



    #cast,
    #staff {
        background: #F4F5F7;
    }



    p,
    h1,
    h2,
    h3,
    h4,
    h5 {
        color: #e0e0e0;
    }

    p {
        font-size: 1.2em;
    }

    #container {
        width: 100%;
        max-width: 2000px;
        margin: 0 auto;
        overflow: hidden;
    }

    .sub_con1 {
        width: 70%;
        margin: 0 auto;
    }

    .sub_con2 {
        width: 90%;
        margin: 0 auto;
    }

    @media only screen and (max-width: 960px) {
        .sub_con1 {
            width: 90%;
        }

        .sub_con2 {
            width: 95%;
        }
    }


    p {
        line-height: 2em;
    }



    span {
        display: inline-block;
    }

    h2 {
        font-size: 3em;
        color: #faed00;
        font-family: "Kaisei HarunoUmi", serif;
        font-weight: 700;
        font-style: normal;
    }

    @media only screen and (max-width: 960px) {
        h2 {
            font-size: 2em;
        }
    }


    #cast h2,
    #staff h2 {
        color: #001A43;
    }

    #splash3 {
        width: 100%;
        height: 100vh;
        height: 100svh;
        background-color: #f3f3f3;
        position: fixed;
        z-index: 555;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #splash3 .loader-2 {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: solid 4px;
        border-color: #000000 #00000010 #00000010;
        animation-name: spin;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media only screen and (max-width: 960px) {
        #splash3 h3 {
            font-size: 2em;

            font-style: normal;
            writing-mode: vertical-rl;
            font-family: "Kaisei HarunoUmi", serif;
            color: #4b4b4b;
            opacity: 0;
            animation-name: tp;
            animation-fill-mode: forwards;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-timing-function: ease;
            animation-direction: normal;
        }
    }



    /* 以上ベースcss *************************************************************************************/

    /* top *************************************************************************************/
    #top {
        height: 100vh;
        height: 100svh;
        margin: 0 auto;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
        opacity: 1;
        animation-name: main;
        animation-fill-mode: forwards;
        animation-delay: 0s;
        animation-duration: 7s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-direction: normal;
        transform: scale(1.3) rotate(5deg);
    }

    /* #top {
        background-image: url(../img/top/top-main.webp);
    } */

    .webp #top {
        background-image: url(../img/top/top-main.webp);
    }

    .no-webp #top {
        background-image: url(../img/top/top-main.jpg);

    }



    .title {
        width: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation-name: tp;
        animation-fill-mode: forwards;
        animation-delay: 6s;
        animation-duration: 3s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-direction: normal;
    }

    #top .sub_t {
        font-size: 3em;
        position: absolute;
        top: 2%;
        left: 3%;
        font-style: normal;
        writing-mode: vertical-rl;
        font-family: "Kaisei HarunoUmi", serif;
        color: #4b4b4b;
        opacity: 0;
        animation-name: tp;
        animation-fill-mode: forwards;
        animation-delay: 4s;
        animation-duration: 3s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-direction: normal;

    }

    #top .sub_k {
        font-size: 4em;
        color: #faed00;
        text-shadow: 0 0 0.5em #001A43;
        position: absolute;
        bottom: 3%;
        right: 2%;
        line-height: 1em;
        font-family: "Kaisei HarunoUmi", serif;
        opacity: 0;
        animation-name: tp;
        /*1で解説*/
        animation-fill-mode: forwards;
        /*2で解説*/
        animation-delay: 7s;
        animation-duration: 3s;
        /*3で解説*/
        animation-iteration-count: 1;
        /*4で解説*/
        animation-timing-function: ease;
        /*5で解説*/
        /*6で解説*/
        animation-direction: normal;

    }

    @media only screen and (min-width: 961px) {
        #top .sub_aff {
            width: 10%;
            position: absolute;
            bottom: 5%;
            left: 10%;
            opacity: 0;
            animation-name: tp;
            /*1で解説*/
            animation-fill-mode: forwards;
            /*2で解説*/
            animation-delay: 7s;
            animation-duration: 3s;
            /*3で解説*/
            animation-iteration-count: 1;
            /*4で解説*/
            animation-timing-function: ease;
            /*5で解説*/
            /*6で解説*/
            animation-direction: normal;

        }
    }

    @media only screen and (max-width: 960px) {
        #top .sub_aff {
            width: 25%;
            position: absolute;
            top: 3%;
            left: 3%;
            opacity: 0;
            animation-name: tp;
            /*1で解説*/
            animation-fill-mode: forwards;
            /*2で解説*/
            animation-delay: 7s;
            animation-duration: 3s;
            /*3で解説*/
            animation-iteration-count: 1;
            /*4で解説*/
            animation-timing-function: ease;
            /*5で解説*/
            /*6で解説*/
            animation-direction: normal;

        }
    }


    .k511 {
        font-size: 0.7em;
    }

    @media only screen and (max-width: 960px) {
        #top {
            animation-delay: 0s;
            animation-duration: 7s;
        }

        .title {
            animation-delay: 6s;
            animation-duration: 3s;
        }

        #top .sub_t {
            animation-delay: 4s;
            animation-duration: 3s;
        }

        #top .sub_k {
            animation-delay: 7s;
            animation-duration: 3s;
        }
    }

    @keyframes main {
        0% {
            transform: scale(1.3) rotate(5deg);


        }

        100% {
            transform: scale(1) rotate(0deg);

        }
    }

    @keyframes tp {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

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

        #top {
            background-image: url(../img/top/FUTON_B5_ol-2_sp.jpg);
            background-position: center;
        }

        .webp #top {
            background-image: url(../img/top/FUTON_B5_ol-2_sp.jpg);
            background-position: center;
        }

        .no-webp #top {
            background-image: url(../img/top/FUTON_B5_ol-2_sp.jpg);
            background-position: center;
        }

        .title {
            width: 95%;
        }

        #top .sub_k {
            font-size: 3em;
        }

        #top .sub_t {
            font-size: 2em;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #top .sub_k {
            font-size: 3em;
            position: absolute;
            bottom: 2%;
            left: 2%;

        }

        #top {
            animation-delay: 1.5s;
            animation-duration: 7s;
        }

        .title {
            animation-delay: 5s;
            animation-duration: 3s;
        }



        #top .sub_k {
            animation-delay: 6s;
            animation-duration: 3s;
        }

    }

    /* intro *************************************************************************************/
    #yokoku,
    #intro,
    .story,
    #cast,
    #staff,
    #comment {
        padding: 10% 0 5%;
    }

    #yokoku h2,
    #intro h2,
    #story h2,
    #comment h2 {
        width: 85%;
        margin: 0 0 10% 5%;
        padding: 2%;
        background-image: url(../img/back/f0432_0.png);
        background-repeat: no-repeat;
        background-size: contain;
        text-shadow: 0 0 0.5em #001A43;
    }

    #cast h2,
    #staff h2 {
        width: 85%;
        margin: 0 0 10% 5%;
        padding: 2%;
        background-image: url(../img/back/f0432_2.png);
        background-repeat: no-repeat;
        background-size: contain;
        text-shadow: 0 0 0.5em #fff;
    }

    #intro .sub_con1 h3,
    #story .sub_con1 h3 {
        text-align: center;
        font-size: 2.5em;
        margin: 0;
        font-family: "Kaisei HarunoUmi", serif;
        font-weight: 700;
        font-style: normal;
    }

    #intro p {
        margin-top: 1em;
    }

    #intro {
        background-image: url(../img/back/intro_bg.png);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: 20%;
        background-position-x: 105%;
    }

    .sub_con1 h3 span {
        display: inline-block;
    }

    .yy {
        display: inline;
        color: #faed00;
    }

    @media only screen and (max-width: 960px) {
        #intro {
            background-size: 65%;
            background-position-x: 155%;
        }

        #yokoku,
        #intro,
        .story,
        #cast,
        #staff {
            padding: 25% 0 5%;
        }

        #intro .sub_con1 h3,
        #story .sub_con1 h3 {
            text-align: left;
            font-size: 1.5em;
            margin: 1em 0em 1em 2em;
            font-family: "Kaisei HarunoUmi", serif;
            font-weight: 700;
            font-style: normal;
        }

        .yy,
        .y1 {
            font-size: 1.5em;
        }


    }

    /*============
  #anime
  =============*/
    .anime {
        height: 25vh;
        width: 1500%;
        margin: 10em 0 0;
        background-size: auto 25vh;
        background-repeat: repeat-y no-repeat;
        animation: anime_slide 500s infinite linear 1s both;
    }



    /* .anime {
        background-image: url(../img/cast/anime2.webp);
    } */

    .webp .anime {
        background-image: url(../img/cast/anime.webp);
    }

    .no-webp .anime {
        background-image: url(../img/cast/anime.png);
    }

    @keyframes anime_slide {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-100%);
        }
    }

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

        .anime {
            height: 20vh;
            width: 1500%;
            margin: 5em 0 10em;
            background-size: auto 20vh;
            animation: anime_slide 150s infinite linear 1s both;
        }

        .staff_con .birth {
            font-size: 1em;
            margin-top: -3em;
            text-align: right;
        }
    }

    /* story *************************************************************************************/

    .story {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        padding: 15% 0;
    }

    /* .story {
        background-image: url(../img/back/story_back3.webp);
    } */

    .webp .story {
        background-image: url(../img/back/story_back3.webp);
    }

    .no-webp .story {
        background-image: url(../img/back/story_back3.jpg);
    }

    .overlay1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
    }

    .story h2,
    .story .sub_con1 {
        position: relative;
    }


    /* yokoku *************************************************************************************/



    .youtube_ifreme {
        aspect-ratio: 16 / 9;
        width: 65%;
        height: auto;
    }


    _::-webkit-full-page-media,
    _:future,
    :root .youtube_ifreme {
        height: -webkit-fill-available;
    }


    @media screen and (-webkit-min-device-pixel-ratio:0) {

        ::i-block-chrome,
        .youtube_ifreme {
            height: -webkit-fill-available;
        }
    }

    .video {
        text-align: center;
    }

    @media only screen and (max-width: 960px) {
        .youtube_ifreme {
            width: 95%;
            height: auto;
        }
    }


    /* cast *************************************************************************************/
    #cast,
    #staff {
        background-image: url(../img/back/bg1.png);

    }

    .cast_con_out {
        margin: 0 auto 10%;
        width: 90%;

    }

    .cast_con {
        display: flex;
        justify-content: space-around;
        margin-bottom: 2em;
    }

    .cast_pic {
        width: 45%;
    }

    .cast_ri {
        width: 40%;
        align-self: center;

    }

    .cast_ri h3 {
        font-size: 3em;
        letter-spacing: 15px;
        color: #666;
        font-family: "Kaisei HarunoUmi", serif;
    }

    .cast_ri h4 {
        font-size: 2em;
        letter-spacing: 10px;
        color: #666;
        font-family: "Kaisei HarunoUmi", serif;

    }

    .cast_setu {
        width: 90%;
        margin: 0 auto;
        color: #666;

    }

    .sub_con3 {
        display: flex;
        justify-content: space-around;
    }

    .cast_con2 {
        width: 40%;
    }

    .cast_con2 .cast_pic {
        width: 90%;
        margin: 0 auto;
    }

    .cast_con2 h3 {
        font-size: 2em;
        text-align: center;
        letter-spacing: 10px;
        color: #666;
        font-family: "Kaisei HarunoUmi", serif;

    }

    .cast_con2 h4 {
        font-size: 1.5em;
        text-align: center;
        letter-spacing: 8px;
        color: #666;
        font-family: "Kaisei HarunoUmi", serif;


    }

    .cast_con2 .cast_setu {
        margin: 1em auto;
        width: 90%;
    }


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

        .cast_con2 h4,
        .cast_con2 h3,
        .cast_ri h4,
        .cast_ri h3 {
            font-family: "Kaisei HarunoUmi", serif;

        }

        .cast_con {
            flex-wrap: wrap;
        }

        .cast_pic {
            width: 100%;
        }

        .cast_pic picture img {
            width: 100%;
        }

        .cast_ri {
            width: 90%;
            text-align: center;
        }

        .cast_ri h3 {
            font-size: 2.5em;
            letter-spacing: 15px;
            color: #666;
        }

        .cast_ri h4 {
            font-size: 1.8em;
            letter-spacing: 10px;
            color: #666;
            text-align: right;
        }

        .cast_setu {
            margin-bottom: 40%;
            width: 100%;
        }

        .sub_con3 {
            flex-wrap: wrap;
        }

        .cast_con2 {
            width: 90%;
            margin-bottom: 20%;
        }

        .cast_con2 h4,
        .cast_con2 h3 {
            text-align: right;
        }

        .cast_con2 .cast_setu {
            width: 95%;
        }
    }

    /* staff *************************************************************************************/
    .staff_con {
        width: 90%;
        margin: 10% auto;
        color: #666;

    }

    .staff_name {
        font-size: 2em;
        text-align: center;
        margin: 2em 0;
        color: #666;
        font-family: "Kaisei HarunoUmi", serif;

    }

    .staff_con p {
        color: #666;

    }

    .staff_con .birth {
        margin-top: -3em;
        font-size: 1.3em;
    }

    @media only screen and (max-width: 960px) {
        .staff_con {
            margin: 10% auto 50%;
            color: #666;

        }

        .staff_name {
            font-family: "Kaisei HarunoUmi", serif;

        }
    }



    /* footer *************************************************************************************/
    footer {
        background-color: #001A43;
    }

    .credit {
        text-align: center;
        font-size: 1em;
        padding: 3em 0;
        width: 90%;
        margin: 0 auto;
        color: #e0e0e0;

    }

    .credit .c1 {
        font-size: 1.5em;
        margin-bottom: 0.5em;
        color: #e0e0e0;
    }

    .credit .c2 {
        font-size: 1.2em;
        margin-bottom: 0.5em;
        color: #e0e0e0;
    }

    .credit .c3 {
        font-size: 1em;
        color: #e0e0e0;
    }

    footer {
        text-align: center;
        padding-bottom: 2em;
        color: #e0e0e0;
    }










    @media only screen and (min-width: 961px) {}

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

    /*============
nav
=============*/
    nav {
        display: block;
        position: fixed;
        top: 0;
        right: -35%;
        bottom: 0;
        width: 35%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: all .5s;
        z-index: 3;
        opacity: 0;
        font-family: "Kaisei HarunoUmi", serif;
        background-color: #001A43;
    }


    .open nav {
        right: 0;
        opacity: 1;
    }

    nav .inner {
        padding: 25px;
    }

    nav .inner ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav .li_img {
        text-align: center;
    }

    nav .inner img {
        width: 25%;
        margin: 0 0 1em;
    }

    nav .inner ul li {
        position: relative;
        margin: 0;
    }

    nav .inner ul li a {
        display: block;
        letter-spacing: 0.05em;
        font-size: 21px;
        padding: 0.7em 0px;
        text-decoration: none;
        transition-duration: 0.2s;
        color: #faed00;
    }

    nav .inner ul li .color {
        color: #faed00;
    }

    nav .inner ul li :hover {
        color: #F4F5F7;
    }

    .twi {
        width: 15% !important;
        margin: 2em 0 0 !important;
    }

    nav .sns {
        background-color: #faed00;
        width: 70%;
        margin: 3em auto 1em;
        border: #666 solid 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1em;
    }

    nav .sns img {
        width: 2em;
        margin-bottom: 0;
        margin-right: 1em;
    }

    .sns p {
        color: #000;
    }

    nav .sns :hover {
        transform: scale(1.1, 1.1)
    }

    nav a {
        text-decoration: none;
    }



    @media screen and (max-width: 767px) {
        nav {
            right: -80%;
            width: 80%;

        }
    }

    /*============
.toggle_btn
=============*/
    .toggle_btn {
        display: block;
        position: fixed;
        top: 30px;
        right: 30px;
        width: 30px;
        height: 30px;
        transition: all .5s;
        cursor: pointer;
        z-index: 3;
        border-radius: 8px;
        padding: 25px;
    }

    .toggle_btn span {
        display: block;
        position: absolute;
        left: 0;
        width: 55px;
        height: 5px;
        background-color: #faed00;
        border-radius: 4px;
        transition: all .5s;
    }

    .toggle_btn span:nth-child(1) {
        top: 20px;
        left: 13px;
    }

    .toggle_btn span:nth-child(2) {
        top: 37px;
        left: 13px;
    }

    .toggle_btn span:nth-child(3) {
        bottom: 20px;
        left: 13px;
    }

    .open .toggle_btn span {
        background-color: #faed00;
    }

    .open .toggle_btn span:nth-child(1) {
        -webkit-transform: translateY(10px) rotate(-45deg);
        transform: translateY(16px) rotate(-45deg);
    }

    .open .toggle_btn span:nth-child(2) {
        opacity: 0;
    }

    .open .toggle_btn span:nth-child(3) {
        -webkit-transform: translateY(-10px) rotate(45deg);
        transform: translateY(-18px) rotate(45deg);
    }

    @media only screen and (max-width: 750px) {
        .toggle_btn {
            top: 10px;
            right: 10px;
            width: 15px;
            height: 15px;
            background-color: #001A43;

        }

        .toggle_btn span {
            width: 40px;
            height: 4px;
        }

        .toggle_btn span:nth-child(1) {
            top: 15px;
        }

        .toggle_btn span:nth-child(2) {
            top: 30px;
        }

        .toggle_btn span:nth-child(3) {
            bottom: 15px;
        }


    }

    /*============
#mask
=============*/
    #mask {
        display: none;
        transition: all .5s;
    }

    .open #mask {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: .8;
        z-index: 2;
        cursor: pointer;
    }


    /*============
#comment
=============*/
    #comment {
        background-image: url(../img/back/news_top.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }

    #comment::before {
        content: '';
        background-color: rgba(0, 026, 067, 0.95);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

    }

    #comment h2,
    #comment .jun,
    #comment .sub_con2 {
        position: relative;
        z-index: 1;
    }


    #comment .jun {
        color: #fff;
        text-align: center;
        font-size: 12px;
    }

    @media only screen and (min-width: 751px) {
        #comment .comment_con {
            width: 80%;
            margin: 5em auto 10em;
        }

        .comment,
        .author {
            font-size: 1.7em;
        }

        .author {
            text-align: right;
            color: #faed00;
            font-style: italic;


        }

        .author .yyy {
            font-weight: bold;
            font-size: 1.3em;
        }
    }

    @media only screen and (max-width: 750px) {
        #comment .comment_con {
            width: 95%;
            margin: 5em auto 10em;
        }

        .comment,
        .author {
            font-size: 1.4em;
        }

        .author {
            text-align: right;
            color: #faed00;
            font-style: italic;


        }

        .author .yyy {
            font-weight: bold;
            font-size: 1.2em;
        }
    }
    @media only screen and (min-width: 751px) {
#dvd{
    font-family: "Kaisei HarunoUmi", serif;
    text-align: center;
}
#dvd a{
    text-decoration: none;
}
#dvd .dvd_link{
    background-color: #faed00;
}
#dvd .sub_k{
    color: #001A43;
    font-size: 4em;
    padding-top: 2%;
}
#dvd p{
    color: #001A43;
    padding-bottom: 2%;
}
    }
    @media only screen and (max-width: 750px) {
        #dvd{
            font-family: "Kaisei HarunoUmi", serif;
            text-align: center;
        }
        #dvd a{
            text-decoration: none;
        }
        #dvd .dvd_link{
            background-color: #faed00;
        }
        #dvd .sub_k{
            color: #001A43;
            font-size: 2em;
            padding-top: 6%;

        }
        #dvd p{
            color: #001A43;
            padding-bottom: 6%;

        }
            }