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

#nav { margin: 0 auto; }
#nav .nav_inner { display: flex; justify-content: center; align-items: center; padding: 11px 0; background: #fff; }
#nav .nav_inner .nav { position: relative; flex-basis: 16%; }
#nav .nav_inner .nav::after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 90%; background: #cfcac5; transform: translate(0,-50%) rotate(18deg); }
#nav .nav_inner .nav:last-child::after { display: none; }
#nav .nav_inner .nav a { display: block; height: 80px; text-indent: -9999px; overflow: hidden; }
#nav .nav_inner .nav01 a { background: url('/images/nav01.png') no-repeat center; background-size: 80px 80px; }
#nav .nav_inner .nav02 a { background: url('/images/nav02.png') no-repeat center; background-size: 80px 80px; }
#nav .nav_inner .nav03 a { background: url('/images/nav03.png') no-repeat center; background-size: 80px 80px; }
#nav .nav_inner .nav04 a { background: url('/images/nav04.png') no-repeat center; background-size: 80px 80px; }
#nav .nav_inner .nav05 a { background: url('/images/nav05.png') no-repeat center; background-size: 80px 80px; }
#nav .nav_inner .logo { flex-basis: 22%; }
#nav .nav_inner .logo h1 { margin: 0 auto; max-width: 108px; }

.contents .title .title_img { width: 100%; height: auto; }

.content_top { padding: 45px 0 40px; text-align: center; }
.content_top .txt { padding: 0 0 30px; font-size: 24px; line-height: 1.5; font-weight: bold; }
.content_top .txt span { margin: 0 .4em; }

.btn_takeout { margin: 0 auto; }
.btn_takeout a { display: inline-flex; background: #009a53; border-radius: 10px; padding: 0 32px; }
.btn_takeout img:first-of-type { width: 68px; height: 68px; margin: 21px 26px 29px 0; }
.btn_takeout p { font-size: 26px; font-weight: bold; color: #ffffff; line-height: 110px; }
.btn_takeout img:last-of-type { width: 20px; height: 20px; margin: 46px 0 46px 23px; }

.takeout { position: relative; }
.takeout_decoration { position: absolute; top: -20px; }
.takeout_title { margin-bottom: 40px; }

#menu { margin-bottom: 50px; padding: 8px; background: #fff; }
#menu .menu_inner { background: #fff6d8; }
#menu .tab_contents { padding: 30px 3% 10px; background: url('/images/menu_decoration.png') no-repeat top #fff6d8; background-size: contain; }
#menu .tab_contents .tab_title_block { padding: 0 0 25px; border-bottom: 1px solid #23211f; }
#menu .tab_contents .tab_title { margin: 0 auto; width: 320px; }
#menu .tab_contents .menu_block { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 0 0 30px; }
#menu .tab_contents .menu_block .box { flex-basis: 20%; margin-bottom: 40px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
#menu .tab_contents .menu_block .box .pic { position: relative; padding: 0 1%; }
#menu .tab_contents .menu_block .box .takeout { position: absolute; bottom: 4%; right: 5%; display: block; width: 38px; }
#menu .tab_contents .menu_block .box .name { padding: .8rem 8% .2rem; }
#menu .tab_contents .menu_block .box .name .sub { font-size: 1.2rem; }
#menu .tab_contents .menu_block .box .price .yen { font-size: 1.8rem; }
#menu .tab_contents .menu_block .box .price { padding: 0 8%; font-size: 2rem; }
#menu .tab_contents .menu_block .box .price .tax { font-size: 1.3rem; }

.howtomake {}
.howtomake .pc { display: block; }
.howtomake .sp { display: none; }

.content_bttm { padding: 50px 0 90px; text-align: center; }



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

  #menu .tab_contents .menu_block .box { flex-basis: 25%; }

}




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

  #nav .nav_inner .nav a { height: 70px; }
  #nav .nav_inner .nav01 a { background-size: 70px 70px; }
  #nav .nav_inner .nav02 a { background-size: 70px 70px; }
  #nav .nav_inner .nav03 a { background-size: 70px 70px; }
  #nav .nav_inner .nav04 a { background-size: 70px 70px; }
  #nav .nav_inner .nav05 a { background-size: 70px 70px; }
  #nav .nav_inner .logo h1 { max-width: 94px; }

  .content_top { padding: 30px 0 25px; }
  .content_top .txt { padding: 0 0 20px; font-size: 20px; }

  .btn_takeout a { padding: 16px 24px; width: auto; }
  .btn_takeout img:first-of-type{ width: 42px; height: 42px; margin: 0 12px 0 0; }
  .btn_takeout p{ font-size: 18px; font-weight: bold; color: #ffffff; line-height: 44px; }
  .btn_takeout img:last-of-type{ width: 16px; height: 16px; margin: 14px 0 0 12px; }

  .takeout_title { margin-bottom: 30px; }

  #menu { margin-bottom: 45px; }
  #menu .tab_contents { padding: 20px 3% 20px; }
  #menu .tab_contents .tab_title_block { padding: 0 0 20px; }
  #menu .tab_contents .tab_title { width: 280px; }
  #menu .tab_contents .menu_block { padding: 0; }
  #menu .tab_contents .menu_block .box { flex-basis: 25%; font-size: 1.4rem; }
  #menu .tab_contents .menu_block .box .price .yen { font-size: 1.6rem; }
  #menu .tab_contents .menu_block .box .price { font-size: 1.8rem; }

  .content_bttm { padding: 45px 0 70px; }


}



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

  #nav .nav_inner { flex-wrap: wrap; padding: 8px 0 8px; }
  #nav .nav_inner .nav { flex-basis: 20%; }
  #nav .nav_inner .nav::after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 94%; transform: translate(0,-50%) rotate(12deg); }
  #nav .nav_inner .nav a { height: 54px; text-indent: -9999px; overflow: hidden; }
  #nav .nav_inner .nav p { height: 54px; text-indent: -9999px; overflow: hidden; }
  #nav .nav_inner .nav01 a { background-size: 54px 54px; }
  #nav .nav_inner .nav02 a { background-size: 54px 54px; }
  #nav .nav_inner .nav03 a { background-size: 54px 54px; }
  #nav .nav_inner .nav04 a { background-size: 54px 54px; }
  #nav .nav_inner .nav05 a { background-size: 54px 54px; }
  #nav .nav_inner .logo { flex-basis: 100%; padding: 0 0 10px; }
  #nav .nav_inner .logo::after { display: none; }
  #nav .nav_inner .logo h1 { max-width: 72px; }

  .content_top { padding: 16px 0 16px; }
  .content_top .txt { padding: 0 0 15px; font-size: 16px; }
  .content_top .txt span { display: block; margin: 0; }

  .btn_takeout a { padding: 12px 13px; }
  .btn_takeout img:first-of-type { width: 32px; height: 32px; margin: 0 8px 0 0; }
  .btn_takeout p { font-size: 14px; font-weight: bold; color: #ffffff; line-height: 34px; }
  .btn_takeout img:last-of-type { width: 12px; height: 12px; margin: 11px 0 0 8px; }

  .takeout_title { margin-bottom: 25px; }

  #menu { margin-bottom: 30px; padding: 4px 0; }
  #menu .tab_contents { padding: 15px 3% 30px; }
  #menu .tab_contents .tab_title_block { padding: 0 0 10px; }
  #menu .tab_contents .tab_title { width: 210px; }
  #menu .tab_contents .menu_block { max-width: 560px; }
  #menu .tab_contents .menu_block .box { flex-basis: 50%; margin-bottom: 28px; font-size: 1.3rem; }
  #menu .tab_contents .menu_block .box .takeout { bottom: 6%; right: 6%; width: 34px; }
  #menu .tab_contents .menu_block .box .name { padding: .3rem 8% .2rem; }
  #menu .tab_contents .menu_block .box .name .sub { font-size: 1.1rem; }
  #menu .tab_contents .menu_block .box .price .yen { font-size: 1.5rem; }
  #menu .tab_contents .menu_block .box .price { font-size: 1.6rem; }
  #menu .tab_contents .menu_block .box .price .tax { font-size: 1.2rem; }

  .howtomake { margin: 0 auto; padding: 0 6%; max-width: 420px }
  .howtomake .pc { display: none; }
  .howtomake .sp { display: block; margin: 0 auto; }

  .content_bttm { padding: 30px 0 45px; }

  /*------------  breadcrumb  ------------*/
  .breadcrumb { display: none; }

}



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

  .btn_takeout a { padding: 12px 10px; }
  .btn_takeout img:first-of-type { width: 30px; height: 30px; margin: 0 8px 0 0; }
  .btn_takeout p { font-size: 13px; line-height: 32px; }
  .btn_takeout img:last-of-type { width: 10px; height: 10px; margin: 10px 0 0 8px; }

}