@charset "utf-8";

/*--------------------------------------
このbase_formatはmax-width:885pxメインと
なっているがレスポンシブは基本は下記サイズから
@media screen and (max-width:767px)
---------------------------------------*/

/*
@media screen and (max-width:1075px){
  .inner._05{
    width: 62%;
  }
}
*/

@media screen and (max-width:1075px){
  html {
    font-size: 50%;
  }
}

@media screen and (max-width:870px){
  .menu_pho{
    width: 30rem;
  }
}


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

/*——————————————————————
display: block;
——————————————————————*/

.display_flex,.sp-only_01,.menu._03._a,.kaku_menu_navi_sp{
  display: block;
}

/*——————————————————————
ナビゲーション
——————————————————————*/

.navArea{
  flex-flow: initial;
  padding: 0 2.8rem;
  justify-content: space-between;
}

.navArea.display_flex{
  align-items: initial;
}

.sab_mission{
  display: block;
}

.kaku_menu_navi li a{
  width: 100%;
  display: block;
}

.mv02 .slide{
  justify-content: center;
  align-items: center;
}

.blurTrigge{
  padding: 0;
}

.fs-logo{
  position: absolute;
  top: 2rem;
  margin: 0;
  width: 100%;
}

.logo img{
  width: 17rem;
}


/*————————————————————————————————
ナビゲーション設定
—————————————————————————————————*/


.header_inner{
  position: fixed;
  top: 0;
  width: 100%;
  height: 10rem;
  transition: .3s;
}

.header_inner.open{
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
}


.header_inner.open .navArea{
  display: block;
}

.header_nav li{
  height: 100%;
  line-height: 4.6rem;
}

  
.header_nav li a{
  font-size: 2rem;
  display: block;
  text-align: center;
  color: rgba(100, 100, 100, 1);
}


.header_inner.open .global_menu{
  padding-top: 14rem;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.header_inner.open .open_mask{
  width: 26rem;
  margin: 0 auto;
}

.global_menu{
  min-width: 100%;
  margin-left: 0;
}
  
.header_nav{
  display: block;
  width: 100%;
}

.header_nav li a:after{
  background: none;
}



.mask {
  position: fixed;
}
.open .mask {
  margin: 0 auto;
  display: block;
  left: 0%;
  width: 100%;
  height: 100vh;
  /*background: rgba(255, 255, 255, .9);*/
  z-index: -1;
}


.open_button{
  padding: 1.8rem 1rem;
}

.open_button a{
  font-size: 2rem;
}

.open_button img{
  height: 2rem;
}

/*————————————————————————————————
多言語アイコン 設定
—————————————————————————————————*/

.language{
  display: flex;
  font-size: 1.6rem;
  width: 20rem;
}

.language img{
  width: 2rem;
  height: 2rem;
}

.language.sp-only_01{
  align-items: initial;
  position: absolute;
  top: 4.7rem;
  right: 0rem;
}


/*——————————————————————
ハンバーガー トグル形状とアクション
——————————————————————*/

.toggle_btn.sp-only_01{
  position: fixed;
  display: block;
  top: 4.6rem;
  right: 3rem;
  z-index: 9999;
  cursor: pointer;
  outline: none;
  transition: .3s;
}

.btn01{
  width: 4rem;
  height: 2.8rem;
  padding: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.toggle_btn span {
  display: block;
  height: 2px;
  background-color: rgba(62, 62, 62, 1.0);
  transition: .4s;
  cursor: pointer;
  z-index: 9999;
}


.toggle_btn.open span:nth-child(1) {
  -webkit-transform: translateY(1.2rem) rotate(30deg);
  transform: translateY(1.2rem) rotate(30deg);
}
.toggle_btn.open span:nth-child(2) {
  opacity: 0;
}
.toggle_btn.open span:nth-child(3) {
  -webkit-transform: translateY(-1.2rem) rotate(-30deg);
  transform: translateY(-1.2rem) rotate(-30deg);
}



/*ハンバーガーメニューopen時に後ろの要素をスクロールさせない*/
.noscroll{
  overflow: hidden;
}


/*——————————————————————
————————————————————————
ファーストビュー エリア-SP
————————————————————————
——————————————————————*/

.mv02 .slide-media{
  width: 100%;
}

/*——————————————————————
牛たん料理閣とはエリア-SP
——————————————————————*/
.concept_title{
  width: 100%;
  padding: 16.8rem 0;
}

.concept_a._03{
  padding-left: 0;
}

.concept-copy{
  margin: 0 auto;
}

.concept_a._01{
  top: 54rem;
}

.concept_a._02{
  top: 64rem;
}

.concept_a._03{
  top: 78rem;
}

.concept_a._04{
  top: 92rem;
}


/*——————————————————————
————————————————————————
お品書きエリア-SP
————————————————————————
——————————————————————*/

.kaku_menu_list{
  width: 100vw;
  gap: 4rem;
  overflow: scroll;
}

.h2-sab{
  margin-right: 0rem; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 6rem;
}

/*——————————————————————
————————————————————————
お知らせエリア-SP
————————————————————————
——————————————————————*/
.news_base{
  margin: 0 auto;
  width: 92%;
}

.info_texts{
  width: 100%;
}

.info-time{
  padding-bottom: 1rem;
}

.info-item{
  height: 10rem;
}

.info.arrow01{
  display: none;
}
/*——————————————————————
————————————————————————
牛たんの秘密エリア-SP
————————————————————————
——————————————————————*/

.inner._04{
  padding: 12rem 2rem;
}

.topic._01{
  width: 100%;
}

.box_lead{
  width: 100%;
}

.box_ime{
  text-align: center;
  margin-bottom: 2rem;
}

/*——————————————————————
————————————————————————
ご利用シーンエリア 
————————————————————————
——————————————————————*/
.scene-space{
  margin: 0 auto;
  width: 92%;
}

.scene img,.scene-box{
  width: 100%;
}

.scene-space._a{
  display: flex;
  flex-direction: column;
}

.scene_plan._a{
  order: 2;
}

.scene._a{
  order: 1;
}


/*——————————————————————
————————————————————————
こだわりエリア-SP
————————————————————————
——————————————————————*/
.commit_next{
  width: 92%;
}

.commit{
  width: 88%;
  margin: 0 6%;
  right: 0;
}

.commit._a::before, .commit._b::before{
  margin-left: -94%;
}

.commit._a::after, .commit._b::after{
  margin-left: 94%;
}


.concept_a._05{
  top: 42rem;
}

.concept_a._06{
  top: 60rem;
}

  /*——————————————————————
  footer_SP
  ——————————————————————*/

  .f_field{
    width: 100%;
  }

  .f_front_top{
    flex-flow: column;
  }

  .f_rogo{
    text-align: center;
  }

  .f_bottom{
    text-align: center;
    width: 30rem;
  }

  .sns_icon{
    width: 100%;
    justify-content: center;
    gap: 2rem;
  
  }

  /*--------------------------
  display:none
  ---------------------------*/

  .global_menu,.abc_icon.pc-only,.sp-only_02,.mail_form,.pick_up_article,.tower,.inquiry,.logo_copy{
    display: none;
  }

  .menu_gradation,.sab_mission::before,.kaku_menu_navi span img,.sab_mission._a{
    display: none;
  }


  .pc-only{
    display: none !important;
  }


/*——————————————————————
————————————————————————
ここから下層エリア
————————————————————————
——————————————————————*/

/*——————————————————————
————————————————————————
ファーストビュー SP
————————————————————————
——————————————————————*/
#first-view_bg._under{
  height: 46rem;
}
.top_pic{
  width: 100%;
}

/*
.h2-sab._01{
  bottom: 0;
  padding-bottom: 8rem;
}
*/
/*——————————————————————
————————————————————————
メニュー-SP
————————————————————————
——————————————————————*/
.inner._05{
  width: 90%;
}

.left_side, .right_side,.menu_pho img,.right_side._p,.menu_banner img{
  width: 100%;
}

.menu_pho{
  width: 100%;
}

.main_pho{
  width: 100%;
}

.under_sub_menu._a{
  margin-right: 0;
}

.tabs{
  justify-content: center;
}

.topic._02{
  height: 0;
}

.menu_flex{
  gap: 2rem;
}

.kaku_menu_navi{
  /*position: initial;*
  right: initial;*/
  padding: 2rem;
  top: initial;
  left: 0;
  bottom: 0;
}

.sab_mission{
  justify-content: center;
}

.sp-display-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.sp-display-flex li{
  text-align: center;
  width: calc((100% - 2rem) / 3);
  border: solid rgba(100, 100, 100, 1)1px;
}

.page_top._menu-only{
  bottom: 12rem;
}


}


  @media screen and (max-width:635px){
    .sp-only_02{
      display: block;
    }

    .space._06._2rem{
      height: 4rem;
    }

    
  }
  /*——————————————————————————————————————————————————————
  ————————————————————————————————————————————————————————
  以下の文言で幅600以下で一定の条件を満たしたアイテムすべて半分になる
  ————————————————————————————————————————————————————————
  ———————————————————————————————————————————————————————*/
  @media only screen and (max-width: 600px) {
    html {
      font-size: 40%;
    }

    .circles{
      width: 5.6rem;
      height: 5.6rem;
    }

    .display_flex._calc{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .display_flex-r{
      display: block;
    }

    .space_02, .space_02._a{
      width: 100%;
    }

    .toggle_btn.sp-only_01{
      top: 4rem;
    }
  }
  
  
  @media screen and (max-width:575px){
    .display_flex._calc{
      width: 100%;
      justify-content: center;
    }
  }
  

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

    h2{
      font-size: 2.8rem;
    }

    h2 span{
      font-size: 1.6rem;
    }

    .h2-sub{
      font-size: 4rem;
    }
    

    
    .title-first .sab-ti img{
      width: 4rem;
    }

    .tab_area li a{
      font-size: 1rem;
    }
    .ceiter-h3{
      margin-top: 2rem;
      font-size: 1.8rem;
    }

    
    .sorter li a{
     font-size: 1.4rem;
    }

    
    .banner._01{
      display: none;
    }    
  }

  
    /*——————————————————————
    ————————————————————————
    お知らせエリア-SP
    ————————————————————————
    ——————————————————————*/

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

    /*——————————————————————
    display: block;
    —————————————————————*/

    .sp-only_02{
      display: block;
    }

    .count-up{
      font-size: 12rem;
    }

    .count{
      font-size: 2.6rem;
      top: 38%;
      height: 14rem;
    }

    .newline{
      line-height: 3.2rem;
      
    }

    .back-ami{
      height: 50rem;
    }

  
    /*——————————————————————
    ————————————————————————
    お問い合わせ エリア
    ————————————————————————
    ——————————————————————*/

    .contact.-b{
      font-size: 2rem;
      line-height: 3.2rem;
    }

    .contact.-s{
      font-size: 1.6rem;
      line-height: 2.8rem;
    }

    .form-label,.radio-label{
      font-size: 1.4rem;
    }


  }

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

    .sorter li a,.leads{
      font-size: 1rem;
    }

    .ceiter-h3{
      font-size: 1.6rem;
    }

    .calc._02,.calc._03,.blog_calc,.display_flex-s.calc._01 li{
      width: calc(100% / 1);
    }

    .quest p{
      font-size: 1.4rem;
    }
   
  }

  @media screen and (max-width:375px){
      input#ha-buy-check{
        transform: scale(1.2);
      }

    /*——————————————————————
    ————————————————————————
    お問い合わせ エリア
    ————————————————————————
    ——————————————————————*/

    .contact.-b{
      font-size: 1.8rem;
      line-height: 3.2rem;
    }

    .contact.-s{
      font-size: 1.3rem;
      line-height: 2.8rem;
    }

    .form-label,.radio-label{
      font-size: 1.4rem;
    }

  }

  
  @media screen and (max-width:310px){
    .itemss._go{
      width: 100%;
    }
  }