@charset "UTF-8";

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

    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }

    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }

    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }

    #mobile-head {
        /* background: #fff; */
        width: 100%;
        /* height: 55px; */
        z-index: 999;
        position: relative;
    }

    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 0px;
        top: 0px;
        color: #333;
        font-size: 26px;
    }

    .global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        /* top: -100vh; */
        top: 0;
        right: -100vw;
        background: rgb(246 246 246 / 90%);
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        /* text-align: center; */
        padding: 0;
        -webkit-transition: 0.5s ease-out;
        -moz-transition: 0.5s ease-out;
        transition: 0.5s ease-out;
        opacity: 0;
    }

    .global-nav ul {
        width: 100%;
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
        padding: 30px 50px 0;
    }

    .global-nav ul li {
        float: none;
        position: static;
        padding: 0;
    }

    #top-head .global-nav ul li a,
    #top-head.fixed .global-nav ul li a {
        width: 100%;
        display: block;
        color: #232323;
        padding: 0 0 30px;
    }


    #nav-toggle {
        display: block;
        width: 35px;
        height: 35px;
        top: 15px;
    }



    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    /* .global-nav スライドアニメーション */
    .open .global-nav {
        /* .global-nav top + #mobile-head height */
        -moz-transform: translateX (-100vw);
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
        opacity: 1;
    }

    .global-nav dl dt {
        padding: 0;
    }

    .global-nav dl dd {
        padding: 0 20px 0;
    }

    #top-head {
        height: auto;
    }

    #top-head .logo {
        width: 60%;
        padding: 12px;
        margin: 0;
        border: 0px;
        background-color: rgba(255, 255, 255, 0);
    }

    .Head {
        width: 100%;
        margin: 0 auto 0;
    }

    .Herd__bgSlide {
        height: calc(100vh - 55px);
    }



    .Head__mainTtl {
        position: absolute;

        top: 90%;
        left: 20px;

        margin-top: 0;
        margin-left: 0;
        width: 500%;
        max-width: 50%;
    }

    .Herd__bgImg {
        display: block;
        height: 100vh;
    }

    .Herd__bgImg::after {
        box-shadow: inset 0 0 200px rgb(0 0 0 / 10%), inset 0 0 300px rgb(0 0 0 / 20%);
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }


    .Herd__bgImg01 {
        width: 100%;
        height: 100vh;
    }

    .Herd__bgImg02 {
        display: none;
        width: 100%;
        height: 100vh;
    }

    .Herd__bgImg03 {
        width: 100%;
        height: 100vh;
    }

    .Herd__bgImg04 {
        display: none;
        width: 100%;
        height: 100vh;
    }

    .Herd__bgImg05 {
        width: 100%;
        height: 100vh;
    }

    .Herd__bgImg06 {
        display: none;
        width: 100%;
        height: 100vh;
    }

    .Main {
        width: 100%;
        margin: 0 auto;
        /* background-color: #f6f6f6; */
    }

    .Info {
        padding: 20px 20px 70px;
    }

    .Info__txt {
        padding: 20px 0;
    }

    .Voice {
        padding: 20px;
    }

    .Voice__Icon {
        width: 200px;
        padding: 0 0 20px;
    }

    .Voice__Detail {
        display: flex;
        padding: 20px 0;
        margin: 0 0 70px;
        flex-direction: column;
    }

    .Voice__Of {
        padding: 0 0 20px;
        width: 100%;
    }

    .Voice__Sns {
        width: 100%;
        padding: 0px;
    }


    .Voice__SnsDt a {
        font-size: 10px;
        text-align: center;
        padding: 10px 50px;
        margin: 5px auto;
        color: #484848;
        background-color: #f6f6f6;
        /* border: 1px solid #484848; */
        /* line-height: 1.75; */
        display: inline-block;
        width: 100%;
    }

    .Voice__SnsDt a:last-child {
        text-align: center;
        padding: 10px 50px;
        margin: 0px auto 0;
        color: #484848;
        background-color: #f6f6f6;
        /* border: 1px solid #484848; */
        /* line-height: 1.75; */
        display: inline-block;
        width: 100%;
    }


    .Voice__SnsDt a:hover {
        opacity: 0.8;
        transition: all 0.5s;
        background-color: #484848;
        color: #fff;
    }

    .Voice__SnsDdIcon {
        padding: 0 0 20px;
    }

    .Voice__textWarp {
        padding: 0 20px 50px;
    }

    .Voice__textWarp h3 {
        line-height: 1.5;
        padding: 0 0 10px;
    }


    .Voice__CreditWarp {
        padding: 50px 0;
    }

    .Voice__CreditLogo {
        width: 100%;
        padding: 30px 120px;
        background-color: #fff;
    }


    .Voice__CreditTxt {
        width: 100%;
        padding: 50px 20px 0;
    }

    .Voice__CreditBrand-link a {
        padding: 10px;
        font-size: 10px;
    }

    .Voice__CreditItem-link a {
        padding: 10px;
        font-size: 10px;
    }

    #FEATURE {
        padding: 55px 0 0;
    }


    #STAFF-KOBAYASHI {
        border-bottom: 1px solid #DCDCDC;
    }

    #STAFF-AYUMI {
        border-bottom: 1px solid #DCDCDC;
        padding: 50px 0 0;
    }

    #STAFF-HIRAYAMA {
        border-bottom: 1px solid #DCDCDC;
        padding: 50px 0 0;
    }



    .Fair__Ttl {
        margin: 0 auto 50px;
        padding: 50px 20px;
    }

    .Fair__Info {
        padding: 0px 20px 50px;
        margin: 0;
        border-bottom: 1px solid #dcdcdc;
    }

    .Fair__InfoTxtFrex {
        display: block;
        margin: 5px auto;
    }

    .Fair__InfoTxtFrexImg {
        padding: 0 0 10px;
    }

    #MOVIE {
        padding: 55px 0 0;
    }

    .Movie__Ttl {
        margin: 0px auto 50px;
        padding: 50px 20px;
    }

    .Movie__Info {
        padding: 0px 20px 100px;
    }

    .Video__frame {
        height: 200px;
    }

    .Movie__InfoTtl h4 {
        font-size: 14px;
    }

    .Movie__InfoTtl div {
        padding: 0 0 20px;
    }

    footer {
        width: 100%;
        margin: 0 auto;
        padding: 10px 0;
    }

    .arrow_box {
        border-top: 0px solid #232323;
    }

}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
    /* #top-head {
        width: 200px;
    }

    #top-head .logo {
        width: 200px;
        padding: 20px;
    }

    .global-nav {
        width: 200px;
    }

    .global-nav ul {
        width: 200px;
        padding: 20px;
    }

    .global-nav ul li a {
        padding: 0 0 0 0;
    }
    
    .global-nav dl dd {
        padding: 0 10px 20px;
    }

    .global-nav dl dd:last-child {
        padding: 0 10px 20px;
    }

    .inner {
        width: 200px;
    }

    .Head {
        width: 100%;
        height: 100vh;
        width: calc(100% - 200px);
        margin: 0 0 0 200px;
        position: relative;
    }
     */

    #top-head {
        width: 100%;
        height: auto;
        padding: 0;
        background-color: #fff;
        border: 1px solid #dcdcdc;

    }

    .mobile-head {
        width: 100%;
    }

    #top-head .logo {
        padding: 20px 0;
        width: 270px;
        margin: 0 auto;
    }

    .global-nav {
        width: 100%;
        padding: 20px 0px;
        border-top: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
    }

    #top-head .inner {
        width: 100%;
    }

    .global-nav ul {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0;
    }

    .global-nav dl dd {
        display: none;
    }

    .global-nav dl dt {
        padding: 0;
    }

    .global-nav ul li {
        padding: 0;
    }

    .global-nav ul li a {
        padding: 0;
    }

    .Head {
        width: 100%;
        height: calc(100vh - 150px);
        margin: 140px auto 0;
    }

    .Head__mainTtl {
        display: none;
    }

    .Herd__bgImg01 {
        width: 100%;
        height: calc(100vh - 150px);
    }

    .Herd__bgImg02 {
        display: none;
        width: 100%;
        height: calc(100vh - 150px);
    }

    .Herd__bgImg03 {
        width: 100%;
        height: calc(100vh - 150px);
    }

    .Herd__bgImg04 {
        display: none;
        width: 100%;
        height: calc(100vh - 150px);
    }

    .Herd__bgImg05 {
        width: 100%;
        height: calc(100vh - 150px);
    }

    .Herd__bgImg06 {
        display: none;
        width: 100%;
        height: calc(100vh - 150px);
    }

    .Herd__bgImg {
        width: 100%;
        height: calc(100vh - 150px);
    }

    .Main {
        width: 100%;
        margin: 0 auto;
    }

    .Voice__text {
        padding: 0 0 50px;
    }

    footer {
        width: 100%;
        margin: 0 auto;
    }


}