@media(max-width:767px){
    .sp_only{
        display:block;
    }
    .sp_none{
        display:none;
    }

    header{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:50px;
        z-index: 20;
    }
    header .logo_area,
    header .logo_area .wrap,
    header .logo_area .logo{
        height:100%;
    }

    footer::after{
        background-size: cover;
    }

    main{
        margin-top: 50px;
    }

    .sp_nav{
        background:#0007;
        backdrop-filter: blur(2px);
        min-height: calc(100vh - 50px);
        padding: .7rem;
    }
    .sp_nav_area ul{
        padding:1rem ;
        border-radius: 26px;
        border:4px solid #000;
        background:#fff;
        
    }
    .sp_nav_area li{
        position: relative;
        line-height: 1.8;
    }
    .sp_nav_area li a.active::after{
        content:"\f0da";
        display:block;
        position: absolute;
        top:0;
        left:0;
        font-family: "Font Awesome 7 Free";
        font-weight: 900;
        font-size: 1.2em;
        line-height: 1.5;
    }

    .sp_nav_area li a{
        font-weight: 900;
        font-size: 25px;
        display:block;
        white-space: nowrap;
        padding-right: .5rem;
        position: relative;
        padding-left: 1.3rem;
    }

    /*flip*/
    .vertical .flip-inner {
        animation: none;
    }
    .slide_container.active .vertical .flip-inner{
        animation: flipX_sp 2s ease-out forwards;
        animation-delay: calc(var(--i) * 0.3s);
    }
    @keyframes flipX_sp {
        0%   { transform: rotateX(0); }
        100% { transform: rotateX(720deg); }
    }

    /*mv*/
    .mv_flex{
        padding:1rem .5rem;
    }
    .mv_flex .nav{
        display:none;
    }

}
@media(max-width:480px) and (orientation: portrait){/*スマホ縦限定*/
    .mobile_only{
        display:initial;
    }
    

    /*foot*/
    .foot_nav{
        justify-content: flex-start;
        flex-wrap: wrap;
        padding:0 .5rem;
        font-size: 3.8vw;
    }
    .foot_nav_box{
        margin:.2rem;
        padding: .5rem;
    }
    .foot_nav_box:nth-of-type(2),
    .foot_nav_box:nth-of-type(3){
        flex-grow: 1;
    }

    /*mv*/
    .mv_flex .mv_img{
        aspect-ratio: 1 / 1.41;
    }
    .mv_flex .mv_img img{
        object-position: 0% bottom;
        animation: mv_img 18s ease-in-out infinite alternate;
    }
    @keyframes mv_img {
        0%{
            object-position: 0% bottom;
        }
        100%{
            object-position: 100% bottom;
        }
    }
    .mv_flex .mv_img .text_block_1 b{
        font-size: 15vw;
    }
    .mv_flex .mv_img .text_block_2{
        left:.5rem;
    }
    .mv_flex .mv_img .text_block_2 strong{
        font-size: 20vw;
    }
    .mv_flex .mv_img .text_block_2 b{
        font-size: 11vw;
    }
    /*com,rec*/
    .mv_flex .text_block::first-letter{
        font-size: 1em;
    }
    .mv_flex .text_block .n1{
        
        writing-mode: vertical-rl;
        font-feature-settings: initial;
        text-orientation: upright;
        margin-left: auto;
        font-size: 14vw;
        line-height: .9;
        margin-bottom: .1em;
        white-space: nowrap;
    }
    .mv_flex .text_block .n1::first-letter{
        font-size: 1.5em;
        line-height: 1;
    }
    .mv_flex .text_block .n2{
        font-size: 10vw;
        white-space: nowrap;
    }
    .mv_flex .text_block .n2::first-letter{
        font-size: 1.5em;
    }
    .mv_flex .text_block .n3{
        font-size: 8.7vw;
        white-space: nowrap;
    }

    .mv_flex .mv_img .title_block{
        writing-mode: vertical-rl;
        font-feature-settings: initial;
        min-width: auto;
        font-size: 10vw;
        padding:2rem .5rem;
        background-color: #fd6d;
    }
    
    /*section*/
    .sec_bg{
        font-size: 6vw;
        max-height: 15em;
    }
    .sec_content{
        width:95%;
    }
    
}