@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap');
:root{
  --shopColor:#19407F;
  --spaceMb_02:40px;
}
body{
  margin: 0;
  padding: 0;
}
body{font-size: 16px;line-height: 1.5;}
img{
  vertical-align: bottom;
}
/* -------------flexbox */
.flex{display: flex;}
/* -------------画像フルサイズ */
.fullWidthImg{
  width: 100%;
  height: auto;
}
.cleafix::after{
  content: "";
  display: block;
  height: 0;
  clear:both;
}
/* -------------明朝 */
.serif{
  font-family: 'Noto Serif JP', serif;
}
/* -------------ゴシック */
.gothic,.linkBtn > .innerTxt{font-family:'游ゴシック','Noto Sans JP', sans-serif;letter-spacing: 0.05em;}
/* -------------モバイルのサイドの余白 */
.container{
  margin: 0 5.5vw;
}
/* -------------セクション間ボーダーと縦の余白 */
.borderLine{
  padding-bottom: 80px;
  border-bottom: 1px solid var(--shopColor);}
.space-sect{padding-top: 80px;}

/* -------------ボタン */
.btn{
  height: 40px;background-color: #fff;border: 1px solid #333;
  display: flex;justify-content: center;align-items:center;
}
.sect__shoplist .linkBtn,.home__shopPage .linkBtn{ width: 280px;margin: auto;}
.home__shopPage .linkBtn{border-radius: 8px;}
.shopPage .linkBtn{width: 100%;margin-top: 100px;}
.linkBtn > .innerTxt{font-weight: 500;}
.settlementBtn,.shopPage .linkBtn{border-radius: 0;}
.settlementBtn{height: 32px;}

/* -------------header */
.icon_link{
  display: block;
  max-width: 56px;
  margin:24px auto;
}
.logoImg{display: block;}
.siteName{font-size: 32px;letter-spacing: 0.1em;text-align: center;font-weight: 600;padding-bottom: 56px;}

/* -------------footer */
.footerWrap{margin-top: 120px;}
.rightsTxt{text-align: center;padding-bottom: 32px;}
.rightsTxt small{font-size: 12px;}

/* ------------見出し */
.mainHeadline{
  font-size: 32px;letter-spacing: 0.075em;font-weight: 700;text-align: center;color: var(--shopColor);
}
.subheadLine{font-size: 24px;letter-spacing: 0.075em;
  font-weight: 600;text-align: center;line-height: 1.5;}
.subheadLine span{display:block;}
/* -------------toggle */
.toggle{
  width: 56px;height: 56px;background-color: #F2F2F2;
  position: fixed;top: 24px;right: 5.5vw;z-index: 999;
}
.toggle .toggle_innerArea{
  transition: all .6s;/*アニメーションの設定*/
  width: 56px;height: 56px;
}
.toggle span{
  display:block;width: 24px;height: 2px;background-color: #333;
  position: absolute;left: 0;right: 0;margin: auto;
}
.toggle span:nth-child(2){top: 0;bottom: 0;}
.toggle span:first-child{top: 16px;}
.toggle span:last-child{top: 38px;}
/* --------------グローバルナビ */
.global__nav,.global__navListItem{width: 100%;}
.global__nav{
  height: 100vh;
  position: fixed;top: -125%;left: 0;bottom: 0;
  background-color: rgba(255,255,255,0.9);
  transition: 0.7s;
 }
.global__navList{
  padding: 0 5.5vw;
  margin-top: 18vh;
  flex-direction: column;
  text-align: center;
}
.global__navList .global__navListItem{padding-top: 20px;}
.global__navList .global__navListItem:not(:last-child){border-bottom: 1px solid #333;}
.global__navList .global__navListItem a{line-height: 2;}
/* ------------activeクラス付与時 */
.toggle.active .toggle_innerArea{transform: rotate(360deg);}
.toggle.active span:first-child,.toggle.active span:last-child{top: 27px;}
.toggle.active span:first-child{transform: rotate(45deg);}
.toggle.active span:nth-child(2){opacity: 0;}
.toggle.active span:last-child{transform: rotate(-45deg);}
.global__nav.active{ top: 0;}

/* -----------------------------------------home */
.home__headline{margin-top: 72px;margin-bottom: 60px;}
.shopIntroTxt{margin-top: 32px;font-weight: 400;}

/* -------------美味しさのひみつ */
.home__charactor .subheadLine{
  margin-top: var(--spaceMb_02);
}
.charactorImgList{margin: 40px 0;}
.space_charactorImgListItem{margin-bottom:var(--spaceMb_02);}

/* -------------お弁当やオードブルもあります */
.takuout_imgList{margin: 40px 0;}
.takuout_imgList .takuout_imgListItem:first-child{margin-bottom:var(--spaceMb_02);}

/* -------------店舗について */
.home__shopPage .mainHeadline{margin-bottom:var(--spaceMb_02);}
.home__shopPage .gothic{margin-bottom: var(--spaceMb_02);}

/* -----------------------------------------店舗一覧 */
/* ----------------スクロールボタン */
.scrollBtnList{
  margin: 50px 0;
  flex-wrap: wrap;
  justify-content: space-between;
}
.scrollBtnLIstItem{
  width: 47%;font-size: 14px;border-bottom: 1px solid #333;text-align: center;
}
.scrollBtnList .scrollBtnLIstItem:nth-child(n-4){
  margin-bottom: 24px;
}
.scrollBtnLIstItem a{
  display: block;
  font-weight: 500;
}
/* ----------------各店舗のセクション */
.sect__shoplist{margin-bottom: 40px;}
.shoplist__shopName{margin: 36px 0 24px;font-size: 22px;}
.shoplist__desc{margin-bottom: 40px;}
.space__shoplistDT{margin-bottom: 10px;}
.space__shoplistDD{margin-bottom: 20px;}

/* ---------------------------------------店舗ページ */
.shopPage .mainHeadline{
  letter-spacing: 0.03em;margin-bottom: 30px;
}
.shopPage_siteName{
  padding-bottom: 8px;
}
/* -------------電話のボタン */
.unfixedElms{text-align:center;}
.telephoneBtn{
  display: inline-block;
}
.telephoneBtn .telIcon{
  display: block;margin: auto;
}

/* ----------スクロールアクション */
.fixedElms{
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  opacity: 1;
}
.fixedElms.fixedUp,.fixedElms.fixedDown{
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  z-index: 99;
  padding: 32px 0 2px;
}
.fixedElms.fixedUp{
  animation: disAppear 0.3s forwards;
}
@keyframes disAppear{
  from{
    opacity: 1;
    transform: translateY(0);
  }to {
    opacity: 0;
    transform: translateY(-30px);
  }
}
.fixedElms.fixedDown{
  animation: Appear 0.5s forwards;
}
@keyframes Appear{
  from{
    opacity: 0;
    transform: translateY(-30px);
  }to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------メニュー見出し */
.menu__headline{text-align: center;padding: 30px 0;}
.menu__headline p{font-size: 28px;font-weight: 700;}
.menu__headline p span{font-size: 16px; font-weight: 400;}
.menuType__headline{
  font-weight: 600;
  font-size: 36px;text-align: center;margin-bottom: 40px;
}
/* ---------------メニュー一覧 */
.menu__List{margin: 30px 6.25% 80px;}
.menu__list-notice{margin: 30px 6.25% 50px;}
.menu__ListItem,.takeOutMenu__list{justify-content: space-between;}
.menu__List .menu__ListItem:not(:last-child){ margin-bottom: 30px;}
.menu__ListItem > .menu__name,.menu__ListItem > .menu__price{font-size: 20px;}

.menu__notice{
  font-size: 15px;
  border: 1px solid var(--shopColor);
  border-radius:10px;
  padding: 6.25%;
  margin-bottom: 80px;
  line-height: 1.75;
}
.menu__noticeTxt span{
  display:block;
}
/* ------------日野店 */
.hinotice__txt{padding-bottom: 30px;text-align: center;}
.yourCombination{margin-bottom: 80px;}
.yourCombination .combination__headline{
  font-size: 20px; font-weight: 700;margin-bottom: 30px;
}
.combinationList{
  flex-wrap:wrap;
  justify-content: space-between;
}
.combinationList .combinationListItem{
  width: 44%;
}
.combi_name span{display: block;font-size: 12px;}
.menu__price-right{text-align: right;}
.menu__price-right > span{display: block;font-size: 18px}
.menu__ListItem-hono_ippin{align-items: center;}

/* ------------アルプラザ水口店 */
.page__alplazaMinakuchi .menu__sect .menu__ListItem{
  align-items: center;
}
.page__alplazaMinakuchi .menu__sect .menu__name span{
  font-size: 14px;display: block;
}

/* -------お弁当 */
.bento__imageList{justify-content: space-between;}
.bento__imageList .imageListItem{ width: 47%;}

/* -------鰻メニュー */
.unagi__imageList{flex-wrap: wrap;}
.unagi__imageList .imageListItem:not(:last-child){width: 47%;}
.unagi__imageList .imageListItem:first-child{margin-right: 6%;}
.unagi__imageList .imageListItem:last-child{
  width: 100%;
  margin-top: 6%;
}

/* -------お飲み物 */
/* ---ソフトドリンク */
.softdrink__list{
  margin-bottom: 30px;
}
.softdrink__head{
  font-size: 20px;margin-bottom: 8px;
}
/* ---ビール・焼酎 */
.alcoholicDrink__head{
  text-align: center;font-size: 28px;font-weight: 600;
}
.beer__list{margin:20px 6.25%}
.alcoholicDrink__nameBox .menu__name{font-size: 20px;letter-spacing: 0.01em;}

/* ------------西友水口店 */
.menu_scrollBtn__list .menu_scrollBtn__listItem{
  width: 50%;
  border-top: 1px solid #222222;
  border-bottom: 1px solid #222222;
  padding: 4px 0;
}
.menu_scrollBtn__list .menu_scrollBtn__listItem:first-child,.menu_scrollBtn__list .menu_scrollBtn__listItem:last-child{
  border-left: 1px solid #222222;
}
.menu_scrollBtn__list .menu_scrollBtn__listItem:last-child{
  border-right: 1px solid #222222;
}
.menu_scrollBtn__list .menu_scrollBtn__listItem a{
  font-size: 14px;display: block;text-align: center;
}
.menu__List-child{
  margin: 30px 6.25% 0px
}

/* ---------テイクアウトメニュー */
#takeOutMenu{
  padding:80px 0 30px;
}
#takeOutMenu span{display:block;}
.takeOutMenu__list{
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.takeOutMenu__list .takeOutMenu__listItem{width: 45%;}
.takeOutMenu__list .takeOutMenu__listItem:not(:nth-last-child(-n+2)){
  margin-bottom: 40px;
}
.takeOutMenu__name{margin-top: 24px;margin-bottom: 4px;}
.takeOutMenu__volume{margin-bottom: 4px;}
.takeOutMenu__price{margin-bottom: 24px;}

@media screen and (min-width:521px) {

  .container{
    width: 80%;
    margin: 0 auto;
  }

  .fixedElms,.unfixedElms{
    display: none;
  }
/* ------------header */
.siteName{font-size: 36px;}
/* ----------------------home */
.shopIntroImg{
  display:block;
  width: 55%;
  margin: auto;
}
/* .shopIntroTxt{margin-top: 0;} */
.charactorImgList{width: 75%;margin:40px auto;}

.takuout_imgList{
  width: 75%;
  margin: 40px auto;
}

/* -----------------------店舗一覧 */
  .sect__shoplist{
    margin-bottom: 60px;
  }
  .scrollBtnLIstItem{
    font-size: 16px;
  }
}

@media screen and (min-width:959px){

  /* -----------------------全体 */
  body{
    font-size: 20px;
    line-height: 1.8;
  }
  /* --------コンテンツ幅関連 */
  .container{
    max-width: 750px;
    margin: 0 auto;
  }

  /* ---------ヘッダー */
  .header__wrap{width: 1060px;margin: auto;position: relative;}
  .icon_link{max-width: 80px;}
  .logoImg{min-width: 80px;min-height: 80px;}

  /* --------toggle */
  .toggle{
    right: auto;
    left: auto;
    float: right;
    margin: 0 0 0 1004px;
  }

  /* ---------フッター */
  .rightsTxt small{font-size: 18px;}
  /* ---------ボタン */
  .btn{height: 56px;}
  .shopPage .linkBtn{
  width: 70%;
  margin: 160px auto 0;
}
  .linkBtn > .innerTxt{font-size: 20px;}
  .sect__shoplist .linkBtn, .home__shopPage .linkBtn{
    width: 400px;
  }
  /* ---------見出し */
  .siteName{
    font-size: 48px;
  }
  .mainHeadline{font-size: 40px;}
  .subheadLine{font-size: 29px;}
  .menu__headline{padding-top: 60px;}
  .menu__headline p{font-size: 36px;}
  .menu__headline p span{font-size: 20px;}
  .menuType__headline{font-size: 44px;}
  .softdrink__head{font-size: 29px;margin-bottom: 0;}
  .alcoholicDrink__head{font-size: 36px;}

  /* ----------------------home */
  .home__mainView{max-width: 1060px;margin: auto;}


  /* ----------------------店舗一覧 */
  .scrollBtnLIstItem{
    font-size: 20px;
  }
  .shoplist__shopName{
    font-size: 32px;
  }
  .shoplist__desc{font-size: 20px;}

  /* ----------------------各店舗ページ */
  /* ----------店舗外観 */
  .sect__shopView{
    max-width: 1060px;margin: auto;
  }
  /* ----------メニュー */
  .menu__ListItem > .menu__name, .menu__ListItem > .menu__price{
    font-size: 28px;
    line-height: 1.3;
  }
  .menu__List{margin: 30px 10% 80px}
  .menu__list-notice{
    margin: 30px 10% 50px
  }
  .menu__notice{
    padding: 4% 10%;
    font-size: 20px;
  }
  /*-------------フレンドタウン日野 */
  .hinotice__txt{
    font-size: 20px;
  }
  .yourCombination{padding:0 10%;}
  .yourCombination .combination__headline{font-size: 28px;}
  .combinationList .combinationListItem{width: 45%;}
  .combinationList .combinationListItem:last-child{margin-top: 24px;}
  .combi_name{font-size: 24px;line-height: 1.3;padding-top: 8px;}
  .combi_name span{font-size: 18px;}
  .menu__price-right > span{font-size: 28px;}


  /* ------------アルプラザ水口店 */
  .page__alplazaMinakuchi .menu__sect .menu__name span{
    font-size: 18px;
  }
  .softdrink__list,.beer__list,.shochu__list{
    line-height: 1.5;
  }
  .alcoholicDrink__nameBox .menu__name{
    font-size: 28px;
  }
  /* -------------西友水口店 */
  /* --------スクロールボタン */
  .menu_scrollBtn__list .menu_scrollBtn__listItem{
    padding: 8px 0;
  }
  .menu_scrollBtn__list .menu_scrollBtn__listItem a{
    font-size: 20px;
  }

  /* --------テイクアウト */
  .takeOutMenu__name,.takeOutMenu__price{
    font-size: 28px;
  }
  .takeOutMenu__volume{font-size: 24px;margin-bottom: 0;}

}