@charset "UTF-8";

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

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

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

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

    .Header__head {
        margin: 1rem;
        padding: 0;
    }

    .global-nav {
        position: fixed;
        /* 開いてないときは画面外に配置 */
        /* top: -100vh; */
        top: 0;
        right: -100vw;
        background: #F7F7F2;
        width: 100%;
        height: 100vh;
        display: block;
        align-items: center;
        /* text-align: center; */
        padding-top: 4rem;
        -webkit-transition: 0.5s ease-out;
        -moz-transition: 0.5s ease-out;
        transition: 0.5s ease-out;
        opacity: 0;
        margin-top: 108px;
    }

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

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

    /* #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: 6px;
        right: 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;
    }

    .Header_bottom_wrapper ul {
        padding: 0;
    }


    #top-head {
        height: auto;
    }

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

    .wrapper {
        width: 100%;
        margin: 0;
        padding-top: 10rem;
    }

    .content-title-wrapper {
        padding: 0 1rem;
    }

    /* @media only screen and (min-width: 1026px) and (max-width: 1450px) {
        .content-title-wrapper {
            padding-left: 2rem;
        }
    } */


    .content-look-wrapper {
        padding: 1rem;
    }

    .Header_Event {
        margin: 1rem 2.5rem 2rem;
    }
    
    .Header_Event_bottom {
        margin: 5rem 2.5rem;
    }

    .Header_bottom_wrapper_bottom {
        margin-top: 1rem;
    }

    .look__image3 {
        width: 100%;
    }



    .look1-ul {
        display: block;
    }
    
    .look__image {
        width: 100%;
    }
    
    .look1 ul.look1-ul > li:nth-of-type(1) {
        padding: 0 0 1rem 2rem;
        width: 100%;
    }
    
    .look1 ul.look1-ul > li:nth-of-type(2) {
        padding: 0 2rem 0 0;
        width: 100%;
        
    }

    

    .Head {
        width: 100%;
        height: 50vh;
        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: 50vh;
    }

    .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: 50vh;
        background-position: 70% 100%;
    }

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

    .Herd__bgImg03 {
        width: 100%;
        height: 50vh;
        background-position: 70% 100%;
    }

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

    .Herd__bgImg05 {
        width: 100%;
        height: 50vh;
        background-position: 100% 95%;
    }

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

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



    .global-nav-bottom {
        display: block;
        margin-top: 60px
    }









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

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

}


@media only screen and (max-width: 640px)  {
    .Header_menu_wrapper a {
        padding-bottom: 1rem;
    }

    .copy-large {
        font-size: 1.5rem;
    }

    .Header_Event a {
        font-size: .9rem;
    }

    .Header__ttl {
        font-size: 1.5rem;
    }

    .content-copy_number {
        font-size: 1.1rem;
    }

    .content-copy-large {
        font-size: 2rem;
    }

    .copy-txt {
        font-size: .8rem;
    }

    .look-credit {
        font-size: .8rem;
        letter-spacing: .05rem;
    }

    .look-hr {
        margin:5rem 0;
    }
    
}