@charset "utf-8";

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

    #top .hidden_sp{
        display:none ;
    }
    .hidden_pc{
        display: block;
    }
    #logo{
        font-size: 15px;
    }  
    header{
        height: 70px;

    }

    /* ここからFV */
    #fv h1{
        font-size: 34px;
        white-space: nowrap;
    }
    #fv h1 span{
        font-size: 17px;
    }
    .inner{
        padding: 0 18px;
        max-width: 500px;
    }

      /* ハンバーガーメニュー */
      #sp_menu{
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
      }
      #sp_menu>div{
        width: 25px;
        height: 25px;
      }
      #sp_menu span{
        display: block;
        width: 100%;
        height: 1px;
        background-color: #333;
      }
      #menu{
        height: 70px;
      }
      #sp_menu span{
        transition: transform 0.4s ease, opacity 0.4s ease; /* アニメーション */
      }
      #sp_menu span:nth-child(1){
        position: absolute;
        top: 0;
      }
      #sp_menu span:nth-child(2){
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      #sp_menu span:nth-child(3){
        position: absolute;
        bottom: 0;
      }

      /* ボタンアニメーション */
      /* openクラスでアニメーション */
      #sp_menu.open span:nth-child(1) {
        transform: rotate(45deg);
        top: 50%;
      }
      
      #sp_menu.open span:nth-child(2) {
        opacity: 0; /* 真ん中は消す */
      }
      
      #sp_menu.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 50%;
      }

      /* メニュー表示内容 */
      #header_nav{
        position: fixed;
        top: 0;
        left: 0;
    
        width: 100vw;
        height: 100vh;
    
        background: rgba(255,255,255,1);
        backdrop-filter: blur(10px);
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        opacity: 0;
        pointer-events: none;
        transition: 0.6s;
        font-size: 28px;
    }
    /* openクラスをつけたら表示 */
    #header_nav.open{
        opacity: 1;
        pointer-events: auto;
    }
    #top header nav li{
        font-size: 30px;
        margin: 20px;
    }
    .no-scroll{
        height: 100vh;
        overflow: hidden;
    } 


/* ここからABOUTセクション */
      #top h2{
        font-size: 36px;
        padding: 70px 0;
      }
      #top h2 span{
        font-size: 14px;
      }
      #about_flex{
        flex-direction: column;
      }
      #about_left,#about_right{
        width: 100%;
      }
      #about_left img{
        width: 60%;
        transform: none;
        margin-bottom: 2%;
      }
      #about_right{
        text-align: center;
      }
      #about_right p:nth-child(1){
        font-size: 20px;
      }
      #about_right p:nth-child(2){
        font-size: 11px;
        letter-spacing: .2em;
      }
      #about_right p:nth-child(3) {
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 0.2em;
    }

      #about_right p:nth-child(4){
        letter-spacing: .01em;
        line-height: 2.3em;
        font-size: 13px;
      }
      #insta{
        margin: 30px auto 0;
      }
      #about > a{
        font-size: 15px;
        margin-left: auto;
        margin-right: auto;
      }

      /* ここからWORKSセクション */
      #works_cardsarea li .flyer_card a img{
        width: clamp(230px,36vw,236px);
      }
      #works_cardsarea{
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .card_title p:nth-child(1) {
        font-size: 13px;
    }
        .card_title h3::before{
            height: 17px;
        }
        .card_title{
            margin: 20px 0;
        }
        .card_title h3{
            font-size: 17px;
        }
        .card_more{
            font-size: 13px;
        }
        .card_more::before{
            bottom: -41%;
            right: 3%;
        }
        /* メダル　クラスにrelativeとクラス名忘れずにつける！　 */
        .medal_lp::after {
            content: "";
            background-image: url(../images/medal_lp@1.5x.webp);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            position: absolute;
            top: -21px;
            left: -3%;
            z-index: 5;
            width: clamp(70px, 8vw, 160px);
            height: clamp(110px,8vw,310px);

        }
        .medal_flyer::after {
            content: "";
            background-image: url(../images/medal_flyer@1.5x.webp);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            position: absolute;
            top: -21px;
            left: -3%;
            z-index: 5;
            width: clamp(70px, 8vw, 160px);
            height: clamp(110px,8vw,310px);
        }


      /* CONTACTセクション */
      #contact p{
        letter-spacing: 0;
        font-size: 14px;
        line-height: 2em;
        white-space: nowrap;
      }
      #contact_button p{
        font-size: 30px;
        letter-spacing: .2em;
        line-height: 1em;
      }
      #contact_button span{
        font-size: 13px;
      }
      #contact_button{
        width: 80%;
        padding: 4.17vw 9%;
      }

      /* gotop */
      #gotop{
        bottom: 1%;
        right: 2%;
        width: 44px;
        height: 44px;
        opacity: 0;
      }
      #gotop.show{
        opacity: 1;
      }



/* ここからWORK下層ページ */
/* WORK　各詳細ページCSS */

        /* メニュー表示内容 */
        #header_nav{
            position: fixed;
            top: 0;
            left: 0;
            
            width: 100vw;
            height: 100vh;
            
            background: rgba(255,255,255,1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
        
            opacity: 0;
            pointer-events: none;
            transition: 0.6s;
            font-size: 28px;
        }

        #work_page1 header nav li{
            font-size: 26px;
            margin: 20px auto;
        }
        
        #work_page1 .hidden_sp{
            display: none;
        }
        #work_page1 header > div{
            height: 70px;
        }
        #work_page1 header{
            height: 70px;
        }
        /* .inner{
            margin-left: 0;
            margin-right: 0;
        } */
        .work_img {
            width: 100%;
        }
            /* 大きすぎる写真調整 */
            #work_area1 .burger_img{
                max-width: 90%;
            }

            #work_area1 .gift_img{
                max-width: 80%;
            }
        
            .medal_flyer_2::after {
                content: "";
                background-image: url(../images/medal_flyer@1.5x.webp);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                position: absolute;
                top: -50%;
                left: -8%;
                z-index: 5;
                width: 17%;
                height: 100%;
            }
        #work_area1 .card_title{
            width: 90%;
        }    

        #work_area1 .card_title p:nth-child(1){
            font-size: 13px;
        }
        #work_area1 .card_title h1{
            font-size: 16px;
            margin: 5px auto;
        }
        #work_area1 .card_title h1::before{
            height: 16px;
        }
        #work_area1 .card_title p:nth-child(3){
            font-size: 10px;
        }
        #work_page1 dl{
            width: 90%;
            padding-top: 60px;
            grid-template-columns: 1fr;
            font-size: 13px;
            line-height: 1.8;
        }
        #work_page1 dl dt{
            border-bottom: none;
            padding: 20px 0;
        }
        #work_page1 dl dd{
            padding: 20px 0 20px;
        }
        #work_description dl dd:nth-last-of-type(2){
            letter-spacing: 0;
        }
    
        #work_description dd:last-of-type a{
            text-align: center;
        }
        #gotop{
            right: 5%;
            bottom: 1%;
            width: 44px;
            height: 44px;
        }
        #work_page1 footer{
            padding-top: 50px;
        }
        #work_page1 footer nav{
            margin: 0 auto;
            width: 80%;
        }
        #work_page1 footer nav li {
            width: 30%;
        }
        #work_page1 footer nav li:nth-child(1) a::after{
            left: 6%;
        }
        #work_page1 footer nav li:nth-child(2) a::after{
            right: 6%;
        }
        #topback a{
            width: 55%;
        }
        #topback::after{
            right: 1.45%;
        } 
        #copy{
            margin-top: 100px;
        }


}