@charset "UTF-8";
/* CSS Document */

@font-face{
  font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
  font-style:normal;
  font-weight: 300 500 900;
}

html{
  font-size: 62.5%; /* 62.5％ X 16px=10px */
}

body{
  background-color: #FCF1D6;
  color: #000000;
  font-family: 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-feature-settings: "palt" 1;
}

a{
  color: #000000;
}

img{
  max-width: 100%;
  height: auto;
}

.inner{
  max-width: 1040px;
  margin: 0 auto;
}

.clearfix:after{
  content: "";    /* 擬似要素を実体化 */
  clear: both;    /* floatを解除する */
  display: block; /* ブロック要素にする */
}

.text-center{
  text-align: center;
}  

.sp_img{
  display: none;
}
 
.navToggle{
  display: none;
}

.pc_br{
  display: none;
}



/*------------------ふわっと表示------------------*/
.fadein{
  opacity : 0;
  transform: translateY(40px);
  transition: all 1s;
}



/*------------------ヘッダー------------------*/
.logo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 40px 25px;
}



/*------------------ヘッダー固定------------------*/
.header_area{
  position: fixed;
  top: 0;
  padding: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
}



/*------------------パンくずリスト部分------------------*/
.bread_area{
  background: #f9f2f4;
  padding: 15px 0 15px 40px;
}

.breadcrumb{
  list-style: none;
}

.breadcrumb li{
  display: inline; /*横に並ぶように*/
  list-style: none;
  font-size: 1.6rem;
}

.breadcrumb li:after { /* >を表示*/
  content: '>';
  padding: 0 10px;
  color: #555;
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #e60069; /*色*/
}

.breadcrumb li a:hover{
  border-bottom: dashed 1px #e60069;
}



/*------------------メインタイトル部分------------------*/
.shop_area{
  margin-bottom: 70px;  
}

.pattern{
  margin-top: 138px;
  background-image: url("../shop/vol25_shop_img/shop_back.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.shop_logo{
  padding-top: 100px;
}

.shop_catch{
  padding: 23px 0 25px;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

/*------------------各店舗部分------------------*/
.name{
  display: flex;
  justify-content: center;
}

.name>li{
  margin-right: 20px;
}

.name>li:last-child{
  margin-right: 0px;
}

.omusubi_name>a{
  padding: 6px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #427BBF;
  border-radius: 20px;
}

.sugiura_name>a{
  padding: 6px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #F18E1D;
  border-radius: 20px;
}

.niku_name>a{
  padding: 6px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #E60044;
  border-radius: 20px;
}

.southterrace_name>a{
  padding: 6px 20px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #8FC31F;
  border-radius: 20px;
}

/*------------------ページ内リンク------------------*/
#omusubi_shop{
  margin-top:-200px;
  padding-top:200px;   
}

#sugiura_shop{
  margin-top:-200px;
  padding-top:200px;  
}

#niku_shop{
  margin-top:-200px;
  padding-top:200px;  
}

#southterrace_shop{
  margin-top:-200px;
  padding-top:200px;
}



/*------------------コンテンツタイトル部分------------------*/
.title_area{
  display: flex;
  padding-bottom: 15px;
}

.title{
  font-size: 6rem;
  font-weight: 900;
  padding-left: 15px;
}

.heading_copy{
  padding: 6px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: #fff;
}



/*------------------コンテンツブロック左右------------------*/
.left_area{
  float: left;
}

.right_area{
  float: right;
}



/*------------------コンテンツ------------------*/
.content_area{
  margin-bottom: 160px;
}

.content_area_bottom{
  margin-bottom: 80px;
}

.cap{
  padding: 8px 0 24px;
  font-size: 1rem;
  font-weight: 300;
}

.text{
  padding-top: 10px;
  width: 412px;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-ideograph; /*--edge--*/ 
}

.comment{
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 18px;
}



/*------------------メインイメージ部分------------------*/
.img_area{
  position: relative;
}

.copy{
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 0 0 20px;
  transform: rotate(-2deg);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  text-shadow:1px 1px 10px #000000;
}

/*------------------店内イメージ部分------------------*/
.sub_img{
  position: relative;
}

.img_cap{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  margin: 7px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  background-color: rgba( 255, 255, 255, 0.80 );
}



/*------------------住所------------------*/
.tel{
  font-size: 4.5rem;
  font-weight: 900;
  color: #e60069;
  padding: 20px 0 8px;
}

.info dl{
  display: flex;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.8;
}



/*------------------おむすびエリア------------------*/
.omusubi_heading{
  position: relative;
  background-color: #427BBF;
  width: 150px;
  height: 60px;
  border-radius: 0 30px 30px 0;
}

.omusubi>a{
  color: #427BBF;
}



/*------------------すぎうらエリア------------------*/
.sugiura_heading{
  position: relative;
  background-color: #F18E1D;
  width: 150px;
  height: 60px;
  border-radius: 0 30px 30px 0;
}

.sugiura>a{
  color: #F18E1D;
}



/*------------------meat×meetエリア------------------*/
.niku_heading{
  position: relative;
  background-color: #E60044;
  width: 150px;
  height: 60px;
  border-radius: 0 30px 30px 0;
}

.niku>a{
  color: #E60044;
}



/*------------------サウステラスエリア------------------*/
.southterrace_heading{
  position: relative;
  background-color: #8FC31F;
  width: 150px;
  height: 60px;
  border-radius: 0 30px 30px 0;
}

.southterrace>a{
  color: #8FC31F;
}



/*------------------フッター------------------*/
.footer-area{
  background-color: #fff;
  padding: 30px 0;
}

.footer_logo{
  display: flex;
  justify-content: space-between;
  margin: 20px 40px 60px;
}

.copyright{
  font-size: 1rem; 
}



/*------------------ページトップボタン------------------*/
.PageTopBtn{
  font-size: 1.4rem;
  position: fixed; /*配置場所を固定*/
  bottom: 30px; /*下からの位置*/
  right: 30px; /*右からの位置*/
}

.PageTopBtn>a{
  display: block; /*配置の調整*/
  color: #ff7f00;
  background: #fff;
  border: solid 2px #ff7f00;
  width: 90px;
  height: 50px;
  line-height: 3.5;
  text-align: center;
  border-radius: 10px;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  transition: 0.6s;
}

.PageTopBtn>a:hover{
  color: #fff;
  background: #e60039; /*マウスオーバー時の背景色*/
  border: solid 2px #e60039;
}




/*------------------SP版------------------*/
@media screen and (max-width:768px){
  
  .inner{
    padding: 0 20px;
  }
  
  .pc_img{
    display: none;
  }

  .sp_img{
    display: block;
  }
 
  .pc_br{
    display: block;
  }
  
  .sp_br{
    display: none;
  }


  
  
  /*------------------ヘッダー------------------*/
  .logo{
    justify-content: center;
  }

  
  
  /*------------------パンくずリスト部分------------------*/
  .bread_area{
    -webkit-overflow-scrolling: touch; /* スマホでスクロールを滑らかにする */
    overflow-x: auto; /* [必須] テキストが多い時はX軸にスクロールバーが出現するように */
  }

  /*------------------【スクロールバー】------------------*/
  .bread_area::-webkit-scrollbar {
    height: 5px;
  }
  .bread_area::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #eee;
  }
  .bread_area::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #999;
  }
  .bread_area ol{
    display: table; /* [必須]  */
  } 
  
  .breadcrumb li{
    font-size: 1.5rem;
    padding-bottom: 11px;
    display: table-cell; /* [必須]  */
    white-space: nowrap; /* [必須] テキストを改行させないように */
  }

  .breadcrumb li:after { /* >を表示*/
    padding: 0 5px;
  }
  
  
  
  /*------------------メインタイトル部分------------------*/
  .shop_area{
    margin-bottom: 60px;  
  }

  .pattern{
    margin-top: 140px;
    background-image: url("../shop/vol25_shop_img/shop_back_sp.png");
  }

  .shop_logo{
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .shop_catch{
    padding: 13px 0 30px;
    font-size: 2rem;
    line-height: 1.5;
  }

  /*------------------各店舗部分------------------*/
  .name{
    display: block;
    text-align: center;
  }

  .name>li{
    margin-right: 0;
    margin-bottom: 16px;
  }

  .omusubi_name{
    padding: 7px 20px;
    background-color: #427BBF;
    border-radius: 20px;
  } 
  .omusubi_name>a{
    padding: 0;
  }

  .sugiura_name{
    padding: 7px 20px;
    background-color: #F18E1D;
    border-radius: 20px;
  }
  .sugiura_name>a{
    padding: 0;
  }
  
  .niku_name{
    padding: 7px 20px;
    background-color: #E60044;
    border-radius: 20px;
  }
  .niku_name>a{
    padding: 0;
  }

  .southterrace_name{
    padding: 7px 20px;
    background-color: #8FC31F;
    border-radius: 20px;
  }
  .southterrace_name>a{
    padding: 0;
  }



  /*------------------コンテンツタイトル部分------------------*/
  .title_area{
    display: block;
    padding-bottom: 12px;
  }

  .title{
    font-size: 4.5rem;
    padding-left: 0;
    line-height: 1.2;
  }

  .heading_copy{
    padding: 6px;
    font-size: 1.8rem;
  }



  /*------------------コンテンツブロック左右------------------*/
  .left_area{
    float: none;
  }

  .right_area{
    float: none;
  }



  /*------------------コンテンツ------------------*/
  .content_area{
    margin-bottom: 70px;
  }

  .content_area_bottom{
    margin-bottom: 60px;
  }

  .cap{
    padding: 6px 0 10px;
    font-size: 1.2rem;
  }

  .text{
    width: auto;
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .comment{
    font-size: 1.2rem;
    line-height: 1.5;
    padding-bottom: 18px;
  }



  /*------------------メインイメージ部分------------------*/
  .copy{
    padding: 12px 0 0 12px;
    font-size: 1.9rem;
    line-height: 1.4;
  }

  /*------------------店内イメージ部分------------------*/
  .img_cap{
    font-size: 1.2rem;
  }



  /*------------------住所------------------*/
  .tel{
    font-size: 3.8rem;
  }

  .info dl{
    font-size: 1.5rem;
    line-height: 1.6;
  }



  /*------------------おむすびエリア------------------*/
  .omusubi_heading{
    width: 270px;
    height: 34px;
    border-radius: 0 17px 17px 0;
  }



  /*------------------すぎうらエリア------------------*/
  .sugiura_heading{
    width: 270px;
    height: 34px;
    border-radius: 0 17px 17px 0;
  }



  /*------------------meat×meetエリア------------------*/
  .niku_heading{
    width: 270px;
    height: 34px;
    border-radius: 0 17px 17px 0;
  }



  /*------------------サウステラスエリア------------------*/
  .southterrace_heading{
    width: 270px;
    height: 34px;
    border-radius: 0 17px 17px 0;
  }


  
  /*------------------マップ------------------*/  
  .access-map{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
    margin-top: 18px;
  }

  
  
  /*------------------ページトップ------------------*/
  .PageTopBtn{
    font-size: 1.4rem;
    position: fixed; /*配置場所を固定*/
    bottom: 15px; /*下からの位置*/
    right: 15px; /*右からの位置*/
  }

  
  
  /*------------------フッター------------------*/ 
  .footer-area{
    padding: 30px 0 20px 0;
  }

  .footer_logo{
    display: block;
    margin: 0;
  }
  
  .w_logo_bot{
    margin: 0 auto;
  }
  
  .copyright{
    font-size: 1.2rem; 
    line-height: normal;
    padding: 10px 0 0;
  }

  
  
 }