@charset "utf-8";

@media screen and (max-width: 780px) {
  img {
    width: 100%;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

   .header{
     height: 6%;
     position: fixed;
     width: 100%;
     top: 0;
   }

   .fixed{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10000;
     width: 100%;
     background-color: rgba(255,255,255,0.8);
     margin-bottom: 0;
     padding: 0;
     background-color: #0073be;
   }

   .wrapper02{
     width: 100%;
     padding: 0;
     overflow: hidden;
     text-align: left;
     margin: 0 auto;
     box-sizing: border-box;
   }

   .logo{
     margin: 0 auto;
     width: 50%;
   }

   .search_text{
     margin-top: 25%;
     font-size: 8vw;
     margin-bottom: 5%;
   }

   .top{
     height: 70px;
   }

   /*========= ナビゲーションのためのCSS ===============*/

     #g-nav{
         /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
         position:fixed;
         z-index: 999;
         /*ナビのスタート位置と形状*/
       top:-120%;
         left:0;
       width:100%;
         height: 90vh;/*ナビの高さ*/
       background:#0673c4;
         /*動き*/
       transition: all 0.6s;
       opacity: 0.9;
     }

     /*アクティブクラスがついたら位置を0に*/
     #g-nav.panelactive{
         top: 0;
     }

     /*ナビゲーションの縦スクロール*/
     #g-nav.panelactive #g-nav-list{
         /*ナビの数が増えた場合縦スクロール*/
         position: fixed;
         z-index: 999; 
         width: 100%;
         height: 90vh;/*表示する高さ*/
         overflow: auto;
         -webkit-overflow-scrolling: touch;
     }

     /*ナビゲーション*/
     .g-nav_text {
         /*ナビゲーション天地中央揃え*/
         position: absolute;
         z-index: 999;
         top:50%;
         left:50%;
         transform: translate(-50%,-50%);
         list-style: none;
         text-align: center; 
         width: 56%;
     }

     /*リストのレイアウト設定*/

     .g-nav_collar{
       color: #fff;
       font-weight: bold;
       font-size: 6vw;
       margin-top: 20%;
     }

     .g-nav_collar a{
       color: #fff;
       font-weight: bold;
     }

     .g-nav_textcollar li a{
       color: #fff;
       font-weight: bold;
     }

     .g-nav_text a{
       text-decoration: none;
       padding:6px;
       display: block;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       
     }

   /*========= ボタンのためのCSS ===============*/
   .openbtn{
     position:fixed;
       z-index: 9999;/*ボタンを最前面に*/
     top:10px;
     right: 10px;
     cursor: pointer;
       width: 50px;
       height:50px;
   }
     
   /*×に変化*/  
   .openbtn span{
       display: inline-block;
       transition: all .4s;
       position: absolute;
       left: 14px;
       height: 3px;
       border-radius: 2px;
     background-color: #fff;
       width: 45%;
     }

   .openbtn span:nth-of-type(1) {
     top:15px; 
   }

   .openbtn span:nth-of-type(2) {
     top:23px;
   }

   .openbtn span:nth-of-type(3) {
     top:31px;
   }

   .openbtn.active span:nth-of-type(1) {
       top: 18px;
       left: 18px;
       transform: translateY(6px) rotate(-45deg);
       width: 30%;
   }

   .openbtn.active span:nth-of-type(2) {
     opacity: 0;
   }

   .openbtn.active span:nth-of-type(3){
       top: 30px;
       left: 18px;
       transform: translateY(-6px) rotate(45deg);
       width: 30%;
   }


.main_text{
  width: 90%;
  margin: 0 auto;
  padding-top: 6%;
}

.contents{
  display: initial;
}

.gallery{
  width: 95%;
  margin: 0 auto;
}

.text_detail{
  margin: 7% 0px;
  position: inherit;
}

.gallery .gallery-img{
  margin-top: 25%;
}



   .store_main{
     margin-top: 0px;
     margin-bottom: 5%;
   }

   .store_name{
     margin-bottom: 10px;
   }

     .footer{
       padding-top: 6.6vw;  
     }
     
     .partner{
       height: 130px;
     }

     .background_collar{
       display: inline;
       text-align: center;
       width: 80%;
     }

     .footer{
       height: 200px;
     }

     .footer_img{
       margin-right:0;
       margin: 0 auto;
       margin-bottom: 5%;
   }    

     .footer_text{
       font-size: 5.5vw;
     }

     .sp_producedby{
       width: 50%;
       margin: 0 auto;
       margin-bottom: 5%;
     }

     .footer_flex{
       margin-bottom: 5%;
     }

     .sp_footer_flex{
       margin: 0 auto;
       width: 40%;
     }

     .sp_footer_flex img{
       width: 100%;
     }

     .sp_footer_sns{
       float: left;
     }

     .sp_footer_sns{
       margin-right: 10%;
     }

     .sp_footer_sns:last-child{
       margin-right: 0;
     }

 
}