@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: 60vh;/*ナビの高さ*/
     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: 60vh;/*表示する高さ*/
       overflow: auto;
       -webkit-overflow-scrolling: touch;
   }

   /*ナビゲーション*/
   #g-nav ul {
       /*ナビゲーション天地中央揃え*/
       position: absolute;
       z-index: 999;
       top:50%;
       left:50%;
       transform: translate(-50%,-50%);
   }

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

   #g-nav li{
     list-style: none;
       text-align: center; 
   }

   #g-nav li a{
     color: #fff;
     text-decoration: none;
     padding:10px;
     display: block;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: bold;
   }

   /*========= ボタンのための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%;
}


   .footer{
     position: sticky;
   }

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

   .store_name{
     margin-bottom: 10px;
   }

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

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

     .footer{
       height: 250px;
     }

     .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;
     }
.text_bottom{
  margin-bottom: 0%;
}
 
}