@charset "UTF-8";

@media only screen and (max-width: 640px) {
    .sp-nav {
        width: 100%;
    }
    .open .sp-nav {
        padding: 20px;
    }

    .logo_fadein p {
        width: 80%;
        margin: 0 auto;
    }

    .mainTitle {
        width: 100%;
    }

    .mainTitle h1 {
        width: 80%;
        margin: 0 auto;
    }

    .info {
        padding: 100px 0;
    }

    .infoTxt {
        padding: 20px;
        font-size: 14px;
    }

    .infoTitle figure {
        width: 80%;
        margin: 0 auto;
    }

    .heroImg ul {
        width: auto;
    }

    .heroImg-li1 {
        width: 80vw;
        height: 100vh;
    }

    .heroImg-li2 {
        width: 80vw;
        height: 100vh;
    }

    .heroImg-li3 {
        width: 80vw;
        height: 100vh;
    }

    .heroImg-li4 {
        width: 80vw;
        height: 100vh;
    }

    #BRAND {
        padding: 50px 0;
    }

    .titleWarp {
        padding: 50px 0;
    }
    
    .titleName {
        padding: 0;
    }
    
    .titleNo {
        font-size: 16px;
        padding: 0 0 20px;
    }
    
    .titleName {
        font-size: 24px;
    }

    .titleSkin {
        font-size: 12px;
    }

    .styleImg {
        display: block;
        padding: 0 0 20px;
    }

    .styleWarp {
        padding: 0;
    }
 
    .styleWarp p {
        padding: 20px;
        font-size: 14px;
        text-align: justify;
    }

    .credit {
        padding: 20px;
    }

    .credit li {
        padding: 0 0 1.5em;
    }

    .creditCategory {
        width: 100%;
        line-height: 1;
    }

    .creditItem {
        width: 80%;
        font-weight: 400;
    }

    .itemWarp {
        display: block;
        margin: 20px;
        padding: 20px 20px 50px;
        text-align: center;
    }

    .itemBlock {
        padding: 0;
    }

    .itemBlock button a {
        font-size: 14px;
        letter-spacing: 0.1em;
        border: solid 1px #fff;
        background-color: #232323;
        color: #fff;
        padding: 14px 50px;
        position: relative;
        margin: 30px auto;
        display: block;
    }

    .itemBlock button {
        margin: 0 auto;
        text-align: center;
    }


    .itemInfo dt {
        font-size: 16px;
        padding: 0 0 2em;
        margin: 0 0 2em;
        text-align: center;
        font-weight: 500;
        line-height: 1.5;
    }

    .itemInfo dd {
        text-align: left;
        text-align: justify;
    }

    .itemInfo dd a {
        display: block;
    }

    .itemInfo dd ul li {
        text-align: left;
        font-size: 14px;
    }

    .itemInfo dd ul li span {
        color: #232323;
        font-weight: 400;
    }

    .itemInfo__Txt {
        text-align: left;
    }

    .itemInfo__Shop {
        display: block;
    }

    .brandWarp {
        display: block;
        padding: 80px 0;
    }

    .brandBlock {
        width: 100%;
        padding: 20px 20px 50px;
        text-align: center;
    }

    .brandBlock button a {
        font-size: 14px;
        letter-spacing: 0.1em;
        border: solid 1px #fff;
        background-color: #232323;
        color: #fff;
        padding: 14px 50px;
        position: relative;
        display: inline-block;
    }

    .brandInfo dt {
        line-height: 2;
        font-size: 16px;
        padding: 0 0 2em;
    }

    .brandInfo dt span {
        font-size: 10px;
    }
    
    .brandInfo dd {
        text-align: left;
        text-align: justify;
        padding: 0 0 3em;
    }

    .fair {
        bottom: 30px;
        left: 10px;
    }

    .fair a {
        width: 200px;
    }

    .hamburger {
        top: 20px;
        right: 20px;
    }

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

    .Fair__TtlWarp p {
        width: 100%;
    }
    .Fair__InfoTtl h3 {
        width: 70%;
    }

    .Fair__InfoTtl h4 {
        font-size: 20px;
    }

    .Fair__InfoTtl h5 {
        font-size: 10px;
        padding: 0 0 50px;
    }

    .Fair__InfoTtl p {
        padding: 0 0 20px;
        font-size: 14px;
        line-height: 2em;
        padding: 0 0 2em;
        letter-spacing: 0.05em;
        text-align: justify;
    }

    .Fair__InfoTxt dt {
        font-size: 16px;
    }

    #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 h3 {
        width: 70%;
    }

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

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

}