* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
  background-color: #F0EEE9;
  color: #222;
}

/*--------------- ページ内リンク調整　 ---------------*/
section::before {
  content: '';
  display: block;
  padding-top: 120px;
  margin-top: -120px;
}

section h2::before {
  content: '';
  display: block;
  padding-top: 120px;
  margin-top: -120px;
}
/*--------------- page-title 汎用h1--------------- */
.page-title-main {
  font-family: "Boldonse", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5rem;
  color: #2F525E;
}
/* diff color */
.page-title-2nd {
  font-family: "Boldonse", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5rem;
  color: #F0EEE9;
}

/*--------------- shop-name 汎用h1---------------*/
.shop-name {
  font-family: "Boldonse", system-ui;
  font-weight: 400;
  font-style: normal;
}

/*--------------- 各section 汎用title ---------------*/
.title {
  display: inline-block;
  font-family: "Boldonse", system-ui;
  padding: 0.5rem 0rem;
  border-bottom: 3px solid #2F525E;
  margin: 0 auto;
  color: #2F525E;
}

/*--------------- 各section 汎用text ---------------*/
.lead {
  font-size: 21px;
  font-weight: bold;
  line-height: 1.5;
}

.description {
  line-height: 2;
}

/*--------------- パンくずリスト汎用 ---------------*/
.p-dreadcrumbs {
  position: absolute;
  top: 7rem;
  left: 2rem;
  display: flex;
  gap: 0 1.5rem;
  max-width: 130rem;
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 2;
  text-decoration: none;
  list-style-type: none;
}

.p-dreadcrumbs a {
  color: #999;
  text-decoration: none;
}

.p-dreadcrumbs li:not(:last-child):after {
  display: inline-block;
  content: "";
  width: .7rem;
  height: .7rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  box-sizing: border-box;
  rotate: 45deg;
  margin-left: 1rem;
}

/* diff-color */
.p-dreadcrumbs-2nd {
  position: absolute;
  top: 7rem;
  left: 2rem;
  display: flex;
  gap: 0 1.5rem;
  max-width: 130rem;
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 2;
  text-decoration: none;
  list-style-type: none;
}

.p-dreadcrumbs-2nd a {
  color: #999;
  text-decoration: none;
}

.p-dreadcrumbs-2nd a:hover {
  color: #F0EEE9;
}

.p-dreadcrumbs-2nd li:not(:last-child):after {
  display: inline-block;
  content: "";
  width: .7rem;
  height: .7rem;
  border-top: 1px solid #F0EEE9;
  border-right: 1px solid #F0EEE9;
  box-sizing: border-box;
  rotate: 45deg;
  margin-left: 1rem;
}

#subpage .subpage-main-c_var a:hover {
  color: #222;
}

.subpage-main-c_var li:last-child {
  color: #F0EEE9;
}

/*--------------- header ---------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2F525E;
  z-index: 100;
}

.header-inner h1 {
  padding-left: 40px;
  margin: 0 0 0 20px;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 5px auto;
}

.header-inner a {
  text-decoration: none;
  color: #F0EEE9; 
}

/*--------------- navigation ---------------*/
.navi {
  font-family: "Boldonse", system-ui;
  font-size: small;
  letter-spacing: 0.1em;
  display: flex;
  padding-right: 40px;
}

nav li {
  margin: 0 20px;
  list-style: none;
}

/*--------------- main visual ---------------*/
.carousel img{
  margin: 0 auto;
  width: 100%;
}

/*--------------- concept ---------------*/
#concept {
  margin: 150px auto;
  text-align: center;
}

.concept-inner {
  text-align: center;
  max-width: 700px;
  margin: 20px auto;
  padding: 10px;
}

/*--------------- menu ---------------*/
.menu-inner {
  display: flex;
  justify-content: space-evenly;
  margin: 80px auto;
}

#menu {
  text-align: center;
  background-color: #D7BA9B;
  padding: 80px 0;
}

.label {
  display: flex;
  justify-content: space-between;
  font-size: 21px;
  font-weight: bold;
  padding: 20px 0;
}

.menu-name {
  text-align: left;
  margin: 0;
}

.price {
  text-align: right;
  margin: 0;
}

.menu-column {
  padding: 0 10px;
}

.menu-column img {
  border: 2px solid #222;
  border-radius: 4px;
}

/*------------------ 汎用 view more btn--------------- */
.more-btn a {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 200px;
  padding: 10px 0px 10px 25px;
  font-family: "Noto Sans Japanese";
  line-height: 1.8;
  text-decoration: none;
  color: #2F525E;
  transition: 0.3s ease-in-out;
  font-weight: 500;
}

.more-btn a:before, .more-btn a:after {
  content: "";
  position: absolute;  
  display: block;
  top: 50%;
}

.more-btn a:before {
  width:  0.5rem;
  height:  0.5rem;
  left: 1.1rem;
  border-top: solid 2px #F0EEE9;
  border-right: solid 2px #F0EEE9;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}

.more-btn a:after {
  left: 0;
  background: #2F525E;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 10rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}

.more-btn a span {
  border-bottom: 2px solid #2F525E;
  position: relative;
  transition: all 0.3s;
  z-index: 3;
}

.more-btn a:hover span {
  color: #F0EEE9;
}

.more-btn a:hover:before {
  left: 2.5rem;
  border-top: solid 2px #F0EEE9;
  border-right: solid 2px #F0EEE9;
}

.more-btn a:hover:after {
  right: 0;
  width: 100%;
  background: #2F525E;
}

/* --------------- about ---------------*/
#about {
  display: flex;
  margin-top: 150px;
}

.about-inner {
  text-align: center;
  max-width: 550px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-img {
  width: 100%;
  box-shadow:5px 5px 10px #b2b2b2;
}

.about-inner p {
  padding: 10px 0;
}

.about-inner .description {
  text-align: left;
}

/*--------------- news&blog ---------------*/
section a:hover {
  color: #2F525E;
}

dl a {
  color: #222;
  text-decoration: none;
}

.col-2 {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  grid-gap: 50px;
  margin: 150px;
}

.news-inner dt {
  padding: 10px 0;
  border-top: 1px solid #b5b5b5;
}

.news-inner dd {
  margin: auto;
  padding: 10px 0;
}

.news-inner dd:last-child {
  border-bottom: 1px solid #b5b5b5;
}

/*--------------- footter ---------------*/
footer {
  background-color: #2F525E;
  text-align: center;
  padding: 80px 80px 20px 80px;
} 

.footer-body a {
  text-decoration: none;
  color: #F0EEE9;
}

.copy {
  color: #F0EEE9;
  padding-top: 50px;
}

.faq-btn-box {
  display: flex;
  justify-content: space-between;
}

.faq-btn-box a {
  font-size: 21px;
  text-decoration: none;
  color: #F0EEE9;
  background-color: #2F525E;
  border: 2px solid #F0EEE9;
  padding: 5px 20px;
  border-radius: 4px;
}

.faq-btn-box a:hover {
  background-color: #F0EEE9;
  color: #2F525E;
  transition: 0.3s;
}

/*--------------------------------------------- 
-----------------menu.html用 ---------------
---------------------------------------------*/

/*--------------- menu main--------------- */
.subpage-main {
  padding: 200px 0 100px 0;
  text-align: center;
}

/* diff color */
.subpage-main-c_var {
  padding: 200px 0 100px 0;
  text-align: center;
  background-color: #2F525E;
}

.skip-btn {
  display: flex;
  justify-content: space-around;
  margin: 100px 150px 0;
}

/*---------------汎用arrow btn ↓ ---------------*/
.arrow-btn {
  text-decoration: none;
  color: #222;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-left: 30px;
}

.arrow-btn:before {
  content: '';
  width: 22px;
  height: 22px;
  background: #2F525E;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.arrow-btn:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #F0EEE9;
  border-right: solid 2px #F0EEE9;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 6.5px;
  bottom: 0;
  margin: auto;
}

/* diff color */
.arrow-btn-2nd {
  text-decoration: none;
  color: #F0EEE9;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-left: 30px;
}

.arrow-btn-2nd:before {
  content: '';
  width: 22px;
  height: 22px;
  background: #F0EEE9;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.arrow-btn-2nd:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #2F525E;
  border-right: solid 2px #2F525E;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 6.5px;
  bottom: 0;
  margin: auto;
}

/*---------------汎用arrow btn ← ---------------*/
.arrow-btn-back {
  text-decoration: none;
  color: #222;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding-left: 30px;
}

.arrow-btn-back:before {
  content: '';
  width: 22px;
  height: 22px;
  background: #2F525E;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
}

.arrow-btn-back:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #F0EEE9;
  border-left: solid 2px #F0EEE9;
  transform: rotate(45deg);
  position: absolute;
  top: 3px;
  left: 7.5px;
  bottom: 0;
  margin: auto;
}

/*--------------- menu table ---------------*/
#menu-table {
  margin: auto 80px;
  padding-bottom: 150px;
}

.menu-title {
  border-bottom: 2px dotted #2F525E;
  margin: 80px 0;
  padding-bottom: 10px;
}

.menu-list {
  display: flex;
  padding: 0;
}

.menu-list li {
  list-style-type: none;
  width: 20%;
  text-align: center;
  background-color: #D7BA9B;
  border: 2px solid #222;
  border-radius: 4px;
  padding: 20px;
  margin: 5px;
  position: relative;
  padding-bottom: 100px;
}

.menu-list li a {
  color: #222;
  text-decoration: none;
}

.menu-list .more-btn a {
  color: #2F525E;
}

.item-name {
  font-weight: bold;
  height: 2rem;
}

.item-price {
  font-weight: bold;
}

.item-lead {
  text-align: left;
}

.more-btn-menu {
  text-align: center;
  background-color: #2F525E;
  box-shadow: 0 4px 0 #1b2c31;
  font-weight: bold;
  padding: 10px;
  border-radius: 20px;
  position: absolute;
  bottom: 40px;
  margin: 0 20px;
  left: 0;
  right: 0;
}

.more-btn-menu:hover {
  transform: translateY(4px);
  box-shadow: none;
}

.more-btn-menu span {
  color: #F0EEE9;
}

.img-box img {
  border-radius: 8px;
}

/*--------------------------------------------- 
-----------------menu_detail.html用 ---------------
---------------------------------------------*/

/*----------------- 商品詳細 -----------------*/
#menu-detail {
  margin: 0 150px;
}

.menu-detail-title {
  margin: 80px 0;
  padding-bottom: 10px;
  text-align: center;
  font-size: xx-large;
  border-bottom: 2px dotted #2F525E;
}

.menu-detail-box {
  display: flex;
  justify-content: space-evenly;
}

.menu-detail-inner {
  padding: 80px 0;
  max-width: 550px;
}

.price-detail {
  font-weight: bold;
  font-size: 21px;
}

/* 特定原材料 */
.material {
  font-weight: bold;
  margin-top: 50px;
  padding-top: 5px;
  border-top: 1px solid #222;
}

.material-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.material-list li {
  list-style-type: none;
  background: white;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  margin: 0 5px;
  padding: 3px;
  font-size: medium;
}

/* menu-band */
#menu-band-donut {
  background-color: #D7BA9B;
  margin-top: 150px;
}

#menu-band-drink {
  background-color: #D7BA9B;
  margin: 50px 0 150px 0;
}

.menu-carousel {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.menu-carousel a {
  color: #222;
  text-decoration: none;
  padding: 0 10px;
}

.menu-carousel p {
  color: #F0EEE9;
  background-color: #2F525E;
  border-radius: 50px;
}

.back-btn {
  text-align: center;
  padding: 20px 0;
}

/*--------------------------------------------- 
-----------------about.html用 ---------------
---------------------------------------------*/

/* greeting */
#greeting {
  margin: 90px auto;
  text-align: center;
}

.greeting-inner {
  text-align: center;
  max-width: 700px;
  margin: 20px auto;
  padding: 0 0 150px 0;
}

/* passion */
#our-passion {
  padding: 0 150px 50px;
  text-align: center;
  background-color: white
}

#our-passion h2 {
  margin-top: 50px;
}

.passion-box {
  display: flex;
  justify-content: space-evenly;
  background-color: #F0EEE9;
  text-align: left;
  margin: 50px auto;
  padding: 50px 0;
}

.passion-inner {
  max-width: 550px;
  padding: 0 20px;
}

.passion-img img {
  border: 1px solid #bbbbbb;
}

/* castomer voices */
#customer-voices {
  text-align: center;
  padding-bottom: 150px;
}

#customer-voices .title {
  margin: 40px;
}

.customer-box {
  display: flex;
  text-align: left;
  background-color: white;
  margin: 40px 250px;
  padding: 20px 0;
}

.customer-inner {
  max-width: 1100px;
  padding: 0 20px;
}

.customer-inner h2 {
  margin: 0 0 10px 0;
  border-bottom: 1px solid #222;
}

.customer-inner .lead {
  margin: 5px auto;
  font-size: 18px;
}

.customer-inner .description {
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.5;
}

.customer-img img {
  border-radius: 50%;
  padding: 0 50px;
}

/*--------------------------------------------- 
-----------------access.html用 ---------------
---------------------------------------------*/

/*--------------- shop info ---------------*/
#shop-info {
  text-align: center
}

#shop-info h2 {
  margin: 100px 0;
}

.info-details-box {
  width: 550px;
  margin: 150px auto;
}

.info-details-box ul {
  padding: 0;
}

.info-details-box li {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 4px;
  margin: 10px;
  padding: 0 10px;
}

.info-details-box .info-title {
  background-color: #2F525E;
  color: #F0EEE9;
  font-size: 1rem;
  padding: 5px 0;
  width: 78px;
  text-align: center;
  border-radius: 4px;
  margin: 0 25px 0 0;
}

.info-details-box .info-detail {
  font-weight: bold;
  text-align: left;
}

/*--------------------------------------------- 
-----------------contact.html用 ---------------
---------------------------------------------*/

/* FAQ */
#faq {
  text-align: center;
}

#faq h2 {
  margin: 100px 0 0 0;
}

.faq-box {
  border: 2px solid #2F525E;
  margin: 50px 200px;
  padding: 50px 150px;
}

.faq-inner {
  text-align: left;
  padding: 10px 0;
}

.faq-inner h3 {
  text-decoration: 2px underline wavy #2F525E;
  text-underline-offset: 7px;
}

.faq-inner p {
  border-bottom: 2px dashed #2F525E;
  padding: 20px 0;
}

/* Contact Form */
#contact-form {
  text-align: center;
}

#contact-form h2 {
  margin: 50px 0;
}

.form {
  background-color: white;
  margin: 0 500px;
  padding: 400px 0px;
}

/* SNS */
#sns {
  text-align: center;
}

#sns h2 {
  margin: 100px 0 50px 0;
}

.sns-link {
  margin-bottom: 150px;
}

.sns-link a {
  text-decoration: none;
  transition-property: opacity;
  transition-duration: 0.2s;
}

.sns-link a:hover {
  opacity: 0.5;
}

.sns-link img {
  border-radius: 50%;
  padding: 0 20px;
}

/*--------------------------------------------- 
-----------------news&blog.html用 ---------------
---------------------------------------------*/

/* What’s New */
#news-blog {
  text-align: center;
}

.whatsnew-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 40px;
  padding: 0 300px;
}

.whatsnew-nav p {
  color: #2F525E;
}

.whatsnew-nav a {
  text-decoration: none;
  color: #b5b5b5;
  font-weight: bold;
}

.whatsnew-nav a:hover {
  color: #2F525E;
}

/* What’s New 記事 */
#news-blog {
  text-align: center;
  padding-bottom: 150px;
}

#news-blog .title {
  margin: 40px;
}

.whatsnew-box a {
  display: flex;
  justify-content: space-evenly;
  text-align: left;
  background-color: white;
  margin: 40px 200px;
  padding: 20px 0;
  align-items: center;
  text-decoration: none;
}

.whatsnew-box a:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.985);
  transition: 0.3s;
}

.whatsnew-cat {
  background-color: #2F525E;
  color: #F0EEE9;
  font-size: 1rem;
  padding: 5px 0;
  width: 78px;
  text-align: center;
  border-radius: 4px;
}

.whatsnew-inner {
  max-width: 1100px;
  padding: 0 20px;
}

.whatsnew-inner h2 {
  margin: 0 0 10px 0;
  color: #222;
}

.whatsnew-inner .lead {
  margin: 5px auto;
  font-size: 18px;
  color: #b5b5b5;
}

.whatsnew-inner .description {
  background-color: #D7BA9B;
  color: #222;
  border-radius: 4px;
  padding: 5px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.5;
}

.whatsnew-img img {
  padding: 0 10px;
  align-items: center;
}

/* pagination */
.pagination-box {
  display: flex;
  justify-content: space-between;
  margin: 100px 200px 0;
}

.pagination-box a {
  text-decoration: none;
}

.pagination-inner {
  display: flex;
  align-items: center;
}

.pagination-inner a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 5px;
}

.pagination-inner a:hover {
  color: #F0EEE9;
  background-color: #2F525E;
}

.page-num-active {
  background-color: #2F525E;
  color: #F0EEE9;
}

.page-num {
  color: #2F525E;
  border: 1px solid #2F525E;
}

.pagination-symbol a {
  color: #2F525E;
  font-weight: bold;
  font-size: 40px;
  padding: 0 30px;
  transition-property: opacity;
  transition-duration: 0.2s;
}

.pagination-symbol a:hover {
  opacity: 0.5;
}

/*--------------------------------------------- 
-----------------news&blog_detail.html用 ---------------
---------------------------------------------*/

/* main */
.subpage-main-n-b-detail {
  padding: 100px;
}

.main-box {
  display: flex;
  justify-content: center;
}

.n-b-detail-body h2 {
  background-color: #D7BA9B;
  color: #222;
  font-size: 1.1rem;
  padding: 3px 8px;
  width: fit-content;
  text-align: center;
  border-radius: 20px;
  margin: 0 50px;
}

.n-b-detail-body h1 {
  font-family: "Boldonse", system-ui;
  background-color: #2F525E;
  box-shadow: 5px 5px 0 #1b2c31;
  color: #F0EEE9;
  font-size: 50px;
  font-weight: 400;
  margin: 50px;
  padding: 10px;
  width: fit-content;
  border-radius: 4px;
}

/* main text */
.n-b-detail-inner {
  color: #2F525E;
  max-width: 1100px;
  margin: 100px auto;
}

.n-b-detail-inner .lead {
  font-size: 24px;
}

.n-b-detail-inner .description {
  padding: 30px 0;
}

.n-b-detail-inner p:last-child {
  font-weight: bold;
}

/* content-bttm */
.content-bttm {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 150px;
}

.content-bttm a {
  text-decoration: none;
}

.prev-next a {
  color: #2F525E;
  font-size: 24px;
  font-weight: bold;
  padding: 0 20px;
  transition-property: opacity;
  transition-duration: 0.2s;
}

.prev-next a:hover {
  opacity: 0.5;
}

.share {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share p {
  color: #2F525E;
  margin: 0 20px;
  font-size: 24px;
}

.share img {
  border-radius: 50%;
}

.share a {
  transition-property: opacity;
  transition-duration: 0.2s;
}

.share a:hover {
  opacity: 0.5;
}


/*--------------------------------------------- 
-----------------レスポンシブ ---------------
---------------------------------------------*/

/* pc 表示・非表示　汎用 */

#menu-sp {
  display: none;
}

#nav-sp {
  display: none;
}

.img-sp {
  display: none;
}

.menu-sp-show {
  display: none;
}

.back-btn-sp {
  display: none;
}

.br-sp {
  display: none;
}

/*--------------------------------------------- 
-----------------タブレット用---------------
---------------------------------------------*/

/*--------------- 1280px以下 ---------------*/
@media screen and (max-width: 1280px) {
.header-inner {
  flex-direction: column;
}

.img-pc {
  width: 100%;
}

/* header */
.header-inner h1 {
  padding-left: 0px;
  margin: 0px;
}

/* main visual */
.carousel img {
  padding-top: 70px;
}

#concept {
  margin: 110px auto;
}

.p-dreadcrumbs {
  top: 10rem;
}

.p-dreadcrumbs-2nd {
  top: 10rem;
}

.img-sp {
  display: block;
  width: 100%;
  box-shadow:5px 5px 10px #b2b2b2;
}

.img-pc {
  display: none;
}


.passion-box {
  justify-content: center;
}

.customer-img img {
  display: none;
}

.customer-box {
  margin: 20px 100px;
}

.faq-box {
  margin: 20px 100px;
  padding: 20px 60px;
}

.form {
  margin: 0 200px;
}

.whatsnew-box a {
  margin: 20px 100px;
}

.n-b-detail-body h1 {
  font-size: 40px;
}

.map {
  width: 100%;
  padding: 0 10px;
}

}

/*--------------- 1180px以下 ---------------*/
@media screen and (max-width: 1180px) {

  .n-b-detail-body h1 {
    font-size: 30px;
  }

  .n-b-detail-inner {
    margin: 100px;
  }

}

/*--------------- 1100px以下 ---------------*/
@media screen and (max-width: 1100px) {

.whatsnew-box a {
  flex-wrap: wrap;
  margin: 20px 50px;

}

.whatsnew-nav {
  padding: 0;
}

.pagination-box {
  margin: 100px 100px 0 100px;
}

.main-box {
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

.n-b-detail-body h1 {
  font-size: 40px;
}

.content-bttm {
  display: block;
  text-align: center;
  margin: 0;
}

.prev-next {
  margin-top: 40px;
}

.share {
  margin: 40px 0;
  justify-content: center;
}

.share img {
  width: 70%;
}

.menu-sp-show {
  display: inline;
}

.menu-sp-none {
  display: none;
}

.menu-list {
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu-list li {
  width: 45%;
  padding-bottom: 90px;
}

}



/*--------------------------------------------- 
-----------------スマホ用---------------
---------------------------------------------*/

/*--------------- 768px以下 ---------------*/
@media screen and (max-width: 768px) {
.header-inner {
  flex-direction: row;
}

/*--------------- sp 表示・非表示 　余白  汎用 ---------------*/

#nav-pc {
  display: none;
}

.sp-none {
  display: none;
}

.img-pc {
  display: none;
}

.img-sp {
  display: block;
  width: 100%;
  box-shadow:5px 5px 10px #b2b2b2;
}

.back-btn-sp {
  display: block;
  text-align: center;
}

.br-sp {
  display: block;
}

/* パンくず */
.p-dreadcrumbs {
  display: none
}

.p-dreadcrumbs-2nd {
  display: none
}

/* main */
.subpage-main {
  padding: 100px 0;
}

.subpage-main-c_var {
  padding: 100px 0;
}

.skip-btn {
  margin: 0 auto;
  padding-top: 20px;
}


/* ---------------hamburger --------------- */
#menu-sp {
  display: block;
  background-color: transparent;
  float: right;
  padding: 0;
  border: none;
}

#nav-sp {
  background-color: #2F525E;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: none;
  z-index: 100;
}

#close {
  position: absolute;
  top: 25px;
  right: 20px;
  background-color: transparent;
  border: none;
}

#nav-sp nav ul {
  padding-left: 0;
}

.header-inner h1 {
  font-size: 1.6rem;
  padding-left: 20px;
  margin: 0;
}

.nav-title {
  padding-bottom: 20px;
}

#menu-sp img {
  padding-right: 20px;
  width: 90%;
}

#close img {
  width: 90%;
}

.nav-sp-menu {
  font-size: 2rem;
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.nav-sp-menu span {
  display: flex;
  align-items: center;
  width: 90%;
  padding-left: 20px;
}

/* hamburger footer */

.fotter-inner-nav {
  padding-left: 40px;
}

.copy-nav {
  color: #F0EEE9;
  padding: 0 0 0 40px;
  font-size: 16px;
}

.footer-btn {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.footer-btn img {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

/*--------------- main visual ---------------*/
.carousel img {
  padding-top: 50px;
}

#concept {
  margin: 60px auto;
}

.lead {
  font-size: 19px;
}

/* menu */
.menu-inner {
  flex-direction: column;
  align-items: center;
}

.menu-column {
  width: 80%;
}

/* about */

#about {
  margin-top: 80px;
}

/* NEWS&BLOG */
.col-2 {
  grid-template-columns: 1fr;
  margin: 50px 20px;
}

#news-blog {
  padding-bottom: 50px;
}

/* footer  */
.shop-name {
  font-size: 1.6rem;
}

footer {
  padding: 30px;
}

/*--------------------------------------------- 
-----------------menu.html用 ---------------
---------------------------------------------*/

/* menu table */
.menu-title {
  text-align: center;
  margin: 0 auto;
}

#menu-table {
  margin: 0 10px;
}

.menu-list {
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu-list li {
  width: 45%;
  padding: 10px;
  padding-bottom: 60px;
}

.item-lead {
  display: none;
}

.item-name {
  font-size: 1rem;
  margin: 5px 0;
}

.item-price {
  font-size: 1rem;
  margin: 5px 0;
}

.more-btn-menu {
  bottom: 15px;
}

.menu-sp-show {
  display: inline;
}

.menu-sp-none {
  display: none;
}

/*--------------------------------------------- 
-----------------menu_detail.html用 ---------------
---------------------------------------------*/

#menu-detail {
  margin: 0 20px;
}

.page-title-main {
  margin-bottom: 0;
}

.menu-detail-title {
  margin: 0;
}

#menu-band-donut {
  display: none;
}

#menu-band-drink {
  display: none;
}

.menu-detail-inner {
  padding: 40px 0;
}

.back-btn-sp {
  padding: 40px 0;
}

/*--------------------------------------------- 
-----------------about.html用 ---------------
---------------------------------------------*/


.greeting-inner {
  margin: 20px;
  padding: 0 0 40px 0;
}

.greeting-inner .description {
  text-align: left;
}

#our-passion {
  padding: 10px;
}

#greeting {
  margin: 90px 0 0 0;
}

.passion-title {
  font-size: 1.4rem;  
}

.passion-box {
  padding: 0;
  justify-content: center;
}

.customer-box {
  margin: 10px;
}

.customer-img img {
  display: none;
}

#customer-voices {
  padding-bottom: 40px;
}

/*--------------------------------------------- 
-----------------access.html用 ---------------
---------------------------------------------*/

.map {
  width: 100%;
  padding: 0 10px;
}

#shop-info h2 {
  margin: 0;
  margin-bottom: 50px;
}

.info-details-box {
  width: 100%;
  margin: 50px auto;
}

/*--------------------------------------------- 
-----------------contact.html用 ---------------
---------------------------------------------*/

.faq-box {
  margin: 40px 10px;
  padding: 15px;
}

.faq-inner h3 {
  text-underline-offset: 3px;
  margin: 0;
}

.form {
  margin: 0 20px;
}

.sns-link {
  margin-bottom: 50px;
}

.sns-link img {
  width: 30%;
}

/*--------------------------------------------- 
-----------------nwes&blog.html用 ---------------
---------------------------------------------*/

.whatsnew-nav {
  padding: 0;
}

.whatsnew-box a {
  flex-wrap: wrap;
  margin: 20px;
}

.pagination-box {
  justify-content: space-evenly;
  margin: 40px 0 0 0;
}

.pagination-symbol a {
  padding: 0;
}

/*--------------------------------------------- 
-----------------nwes&blog_detail.html用 ---------------
---------------------------------------------*/

.main-box {
  display: block;
  margin: 0 10px;
}

.main-img img {
  width: 100%;
}

.subpage-main-n-b-detail {
  padding-bottom: 0;
}

.n-b-detail-body h1 {
  font-size: 30px;
  margin: 30px 10px;
}

.n-b-detail-body h2 {
  margin: 5px;
}

.n-b-detail-inner {
  margin: 0 20px;
}

.n-b-detail-inner .lead {
  font-size: 19px;
}

.n-b-detail-inner .description {
  font-size: 16px;
  padding: 10px 0;
}

.content-bttm {
  display: block;
  text-align: center;
  margin: 0;
}

.prev-next {
  margin-top: 40px;
}

.share {
  margin: 40px 0;
}

.share img {
  width: 70%;
}

}