/*  以下　レスポンシブ対応用追記 */

*{
    box-sizing:border-box;
}

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



    .header-list{
        display:none;
    }

    .header-logo1,.header-logo{
        display:none;
    }

    .menu-icon {
       display:block;
      }

    .fab,.fas{
        float:left;
    }

    .sp_menu{
        display:block;
        width:100%;
        margin: 10px auto 10px;
        position:fixed;
    }

    .sp_menu p{
        margin:0 0 0 5%;
        float:left;
        color:black;
    }

    .sp_menu-1{
        /* background-color: mediumvioletred;     */
    }

  


    .sp_menu-1,.sp_menu-2,.sp_menu-3,.sp_menu-about {
        width:22%;
        float:left;
        border:solid 2px black;
        font-size:20px;
        padding:1%;
        border-radius:5px;
        line-height:100%;
        background-color:white;
        margin-right:2%;
        /* displayをnoneに指定してください */
        /* display:none; */
      }
    
    .sp_menu-3{
        margin-right:0;
    }

    



    .top-wrapper{

        width:100%;
        margin:0 auto;
    }

    .container{
        margin:0 auto;
        
    }

    .container-gazo-top{
        display:none;
    }


    .container-gazo-topwaku{
        padding-top: 35px;
    }
    

    .container-gazo-top_SP{
        display:block;
        width:100%;
    }


    .main-gazo-top{
        display:none;
        }

    .main-gazo-top_sp{
        display:block;
        width:100%;
    }        
    


    .jissyou-gazo{
        display:none;
    }

    .jissyou-gazo_sp{
        display:block;
        width:100%;
    }

    #float-icon{
        width:40%;
        position:fixed;
        bottom:30px;
        right:-500px;
    }



    .examples-flex{
        flex-direction:column;
    }

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

     .examples p{
       margin-top:0;
       margin-bottom:30px;  
     }

     .syoumei-gazo{
         display:none;
     }

     .syoumei-gazo_sp{
         display:block;
         width:100%;
     }

     .closing-gazo{
        display:none;
    }

    .closing-gazo_sp{
        display:block;
        width:100%;
    }

    .tsuishin-gazo{
        display:none;
    }

    .tsuishin-gazo_sp{
        display:block;
        width:100%;
    }




     .mercari-icon, .creema-icon{
         width:100%;

     }

     .creema-icon{
         margin:20px 0;
     }


     
     .photos{
         flex-direction:column;
         margin-bottom: 0;
         padding-bottom: 0;
     }
     
     .photo1,.photo2,.photo3{
        width:100%;
        margin:10px 0;
    }

    .photo3{
        margin-bottom:20px;
    }

    .insta-banner{
        width:100%;
    }



    .footer-name p{
        margin:0;
    }

    /* spサイト用の改行指示 */
    .example-h1{
        padding:30px 0 0;
        font-size:20px;
    }

    .main-h1,.links-h1{
        padding:40px 0;
    }

    .br-sp{
        display:block;
    }

}






@media screen and (min-width:416px) and (max-width:840px) {

    body{
        width:;
    }

    .container{
        margin:0;
    }

    .top-wrapper{
        width:100%;
    }

    .container-gazo-top_tb,.container-gazo-main_tb{
        display:block;
        width:100%;
    }

    .container-gazo-top,.container-gazo-main{
        display:none;
    }

    /* 以下フロートメニューのサイズ調整 */
    .header{
        margin-top:20px;
        margin-left:20px;
    }

    .header-logo1{
        width:30%;
    }

    .header-logo{
        margin:0;
        font-size:6px;
    }

    .header li{
        font-size:6px;
    }

    .insta-link{
        margin:0;
    }

    .fab{
        font-size:20px;
    }

    .insta-link p{
        padding-left:25px;
        padding-top:0;
        font-size:6px;
    }




}