@charset "utf-8";

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}

/* ローダー */
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  /* ここを好きな色に変える */
  background-color: #070707;
  /* 例：サイトと同じ真っ黒 */
  color: #fff;
  /* 文字を白くする */
  z-index: 550;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.loader .txt {
  font-size: 45px;
  font-weight: bold;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  display: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 240px;
}

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

/* ヘッダーここから */
.header {

  min-width: 100%;
  padding: 0 30px;
  margin: 0 auto;
  background-color: #070707;
  position: -webkit-sticky;
  /* Safari用 */
  position: sticky;
  top: 0;
  z-index: 1000;
  /* 他の要素の下に隠れないようにする */
}

.header-logo {
  padding-top: 10px;
  max-width: 150px;
  line-height: 0;
}

.header-logo img {
  width: 150px;
  height: auto;
}


.header-logo a {
  display: block;
}

.header-site-menu {
  display: flex;
  align-items: center;
  color: #fff;

}

.site-menu {
  font-size: 14px;

}

.site-menu ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding-left: 200px;

}

.site-menu ul li img {
  max-width: 100px;
  height: 200px;
  padding-top: 40px;
  padding-bottom: 30px;


}


.link-text:hover {
  background-color: #070707;
  cursor: pointer;
  /* カーソルを指に */
  transition: background-color 1s;
  /* 1秒かけて色を変化 */
}

/* ホバー時の背景色（濃いグレー） */


.link-text {

  background-color: chocolate;
  display: inline-block;
  min-width: 90px;
  line-height: 30px;
  border-radius: 24px;
  text-align: center;
  margin-bottom: 20px;
  font-family: "Zen Old Mincho", serif;
}



.header-inner {
  max-width: 1440px;
  height: 230px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

/* ヘッダーここまで */

/* ファーストビュー　ここから */
.first-view {
  max-width: 100%;
  justify-content: space-between;
  /* コンテンツ間の間隔を均等に空ける */
  height: auto;
  background-color: #070707;
  display: flex;
}

.container {
  display: flex;
  justify-content: space-between;
  margin: auto;

}

.item img {
  max-width: 100%;
  height: auto;
  width: 600px;
  padding-left: 60px;
  padding-right: 60px;
}



.tategaki {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

  /* 高さを指定すると縦書きらしくなる */
  background-color: #070707;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  font-size: 48px;
  padding-top: 50px;
  padding-left: 25px;
  padding-right: 25px;

}

/* ファーストビューここまで */
/* コンセプトここから */
.concept {
  max-width: 100%;
  background-color: #070707;
  color: #fff;

}

.concept h1 {
  width: 15%;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;

  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;
}

.concept img {

  display: block;
  margin-top: -10%;
  margin-left: auto;
  margin-right: 10%;
  margin-bottom: -20%;
  transform: rotate(230deg);
  z-index: 1;


}

.concept-item {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: auto;
  height: 800px;
  overflow: hidden;
  /* はみ出た部分を隠す */
}

.concept-item img {
  max-width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 60px;
  transform: none;
}

.concept-text {
  white-space: pre-line;
  text-align: center;
  margin: auto;
  line-height: 1.8;
  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  padding-bottom: 100px;


}

.concept-left {

  margin-left: 10%;

}

.concept-right {
  margin-right: 10%;
}

/* コンセプトここまで*/
/* フード＆ドリンクここから */

.fooddrink {
  max-width: 100%;

  /* コンテンツ間の間隔を均等に空ける */
  width: 100%;
  height: 2400px;
  background-color: #070707;

}

.fooddrink h1 {
  width: 20%;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  color: #fff;
  z-index: 10;

  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;
}

.food-2 p {
  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;
}

.asiato1 {
  position: absolute;
  /* 親(container)を基準に配置 */
  display: block;
  margin-top: -15%;
  margin-left: 10%;
  margin-bottom: -20%;
  transform: rotate(210deg);
  z-index: 10;
}

.food-1 img {
  display: block;
  max-width: 100%;
  /* 親要素の幅に合わせて縮小 */
  height: auto;
  /* 縦横比を維持 */
  margin: auto auto;
  padding-top: 100px;
  transform: none;
  z-index: 1;
}

.item-list1 {
  display: flex;
  height: auto;
  margin-top: 100px;
  justify-content: space-between;
  background-color: #070707;
  padding-left: 16%;
  padding-right: 16%;
  color: #fff;
  font-size: 24px;
  text-align: center;
  font-family: "Zen Old Mincho", serif;


}

.food-2 img {
  width: 400px;
  height: auto;
  padding-bottom: 32px;
}

.item-list2 {
  display: flex;
  height: auto;
  margin-top: 100px;
  justify-content: space-between;
  background-color: #070707;
  padding-left: 10%;
  padding-right: 10%;
  color: #fff;
  font-size: 24px;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
}

.item-list2 img {
  width: 300px;
  height: auto;
  padding-bottom: 32px;
}

.item-list2 p {
  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;
}

.fooddrink-text {
  display: block;
  height: 200px;
  white-space: pre-line;
  text-align: center;
  margin: auto;
  line-height: 1.8;
  font-family: "Zen Old Mincho", serif;
  font-size: 16px;
  padding-bottom: 100px;
  color: #fff;
  padding-top: 100px;

}

/* フード＆ドリンクここまで */
/* オリジナここからこから */

.originality {
  max-width: 100%;
  height: 2200px;
  background-color: #070707;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  padding-top: 200px;
}

.originality h1 {
  width: 20%;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  color: #fff;
  z-index: 10;

  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;
}

.asiato2 {
  display: block;
  margin-top: -32%;
  margin-left: auto;
  margin-right: 20%;
  margin-bottom: -20%;
  transform: rotate(200deg);
  z-index: 1;

}

.originality h2 {
  width: 400px;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  color: #fff;
  z-index: 10;
  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;

}

.originality1 {
  width: auto;
  display: flex;
  justify-content: space-between;
  height: 400px;
  background-color: #070707;
  color: #fff;
  align-items: center;
  gap: 20px;
  margin-top: 16%;
  margin-right: 200px;
  margin-left: 200px;
  padding-left: 5%;
  padding-right: 5%;
}



.originality1-text {
  display: block;
  margin-left: 200px;
}

.title1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
  font-size: 24px;
  font-family: "Zen Old Mincho", serif;
}

.title1-text {
  display: block;
  width: 400px;
  padding-top: 50px;
  line-height: 1.8;
  white-space: pre-line;
}

.originality2 {
  width: auto;
  display: flex;
  justify-content: space-between;
  height: 400px;
  background-color: #070707;
  color: #fff;
  align-items: center;
  gap: 40px;
  margin-top: 15%;
  margin-left: 200px;
  margin-right: 200px;
  padding-left: 5%;
  padding-right: 5%;

  flex-direction: row-reverse;
}




.originality2-text {
  display: block;
  margin-right: 200px;

}

.title2 {
  display: block;
  text-align: center;
  padding-bottom: 50px;
  font-size: 24px;
  font-family: "Zen Old Mincho", serif;
}

.title2-text {
  width: 400px;
  padding-top: 50px;
  line-height: 1.8;
  white-space: pre-line;
}

.originality3 {
  width: auto;
  display: flex;
  justify-content: space-between;
  height: 400px;
  background-color: #070707;
  color: #fff;
  align-items: center;
  gap: 20px;
  margin-top: 15%;
  margin-right: 200px;
  margin-left: 200px;
  padding-left: 5%;
  padding-right: 5%;
}



.originality3-text {
  display: block;
  margin-left: 200px;
}

.title3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
  font-size: 24px;
  font-family: "Zen Old Mincho", serif;
}

.title3-text {
  display: block;
  width: 400px;
  padding-top: 50px;
  line-height: 1.8;
  white-space: pre-line;
}


.originality1 img {
  width: 600px;
}

.originality2 img {
  width: 600px;

}

.originality3 img {
  width: 600px;

}


/* オリジナリティここまで */
/* ショップインフォここから */
.shopinfo {
  max-width: 100%;
  height: 2000px;
  background-color: #070707;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  padding-top: 200px;
}

.shopinfo h1 {
  width: 20%;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  z-index: 10;

  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;
}

.shopinfo1 {
  display: flex;
  justify-content: center;
  /* 中央に寄せる */
  align-items: center;
  flex-wrap: nowrap;
  /* PCでは横並びを維持 */
  gap: 40px;
  /* ★重要：地図とテキストの間の絶対的な隙間 */
  width: 100%;
  height: auto;
  /* 400px固定を解除 */
  padding: 40px 5%;
}

.map {
  margin-left: 0;
  /* 10%固定を解除 */
  max-width: 600px;
  /* 最大幅は維持 */
  width: 100%;
  /* 画面が狭くなったら縮むようにする */
}

.map iframe {
  width: 100% !important;
  /* HTMLの width="600" を無視して枠いっぱいに広げる */
  height: auto;
  aspect-ratio: 4 / 3;
  /* 横幅に合わせて高さも自動調整 */
}

.shopinfo1 h2 {
  width: 400px;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  color: #fff;
  z-index: 10;
  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;

}


.shopinfo-text {
  margin-left: 0 !important;
  /* ★最重要：PC版の 200px をリセット */
  margin-right: 0 !important;
  flex-shrink: 0;
  /* テキストが潰れないように保護 */
  width: 400px;
  /* テキストエリアの幅を固定 */
}

.shoptitle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
  font-size: 24px;
  font-family: "Zen Old Mincho", serif;
}

.shop-text {
  display: block;
  width: 400px;
  padding-top: 50px;
  line-height: 1.8;
  white-space: pre-line;
}


.shopinfo img {

  display: block;
  margin-top: -15%;
  margin-left: auto;
  margin-right: 0%;
  transform: rotate(230deg);
  z-index: 1;


}

.shopinfo2 h2 {
  width: 400px;

  margin-top: -15%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  z-index: 10;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;

  color: #fff;
  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;
}

.Instagram {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;

}

.himitsu img {
  transform: none;
  width: 300px;

}

/* ショップインフォここまで */

/* コンタクトここから */


.contact {
  max-width: 100%;
  /* 1. 高さを固定(2100px)から auto に変更して、中身の長さに合わせる */
  height: auto;
  background-color: #070707;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* 2. 下側にしっかりとした余白（クッション）を作る */

  font-size: 24px;
  line-height: 1.8;
  white-space: pre-line;
  text-align: center;
}

.himitsu a {
  display: block;
  width: 100px;
  height: auto;

  margin-left: 8%;
  margin-right: auto;
}

.asiato {
  /* 親(container)を基準に配置 */
  display: block;
  margin-top: -10%;
  margin-left: 10%;
  margin-bottom: -20%;
  transform: rotate(125deg);
  z-index: 10;
}

.contact h1 {
  width: 400px;
  position: relative;
  font-size: 32px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  color: #fff;
  z-index: 10;
  padding: 1rem 0rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid #b2d5de;

}



.logo2 {
  width: 100px;
  height: auto;
}

.onegai {
  margin-top: 5%;
}

.asiato3 {
  width: 800px;
  height: auto;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
}

/* コンタクトここまで */
/* フッターここから */

.footer-inner {
  height: 10%;
  display: flex;
  background-color: #070707;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  flex-direction: column;
  padding-bottom: 2%;
  margin-top: -100px;
}

.footer-tel {
  display: block;
  line-height: 1.8;
  white-space: pre-line;
}

.footer-time {
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
}

.copyright {
  display: block;
}



/* フッターここまで */

/* ==========================================
   スマートフォン用（画面幅767px以下）の全設定
   ========================================== */
@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }

  .sp-only {
    display: block !important;
  }

  .loader .txt {
    font-size: 24px;
    /* PCが45pxだったので、半分くらいのサイズに調整 */
  }

  /* --- ヘッダー・メニュー --- */
	.header{
		height: 100px
	}
  .header-inner {
    height: 80px;
  }

  .hamburger-menu {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 1100;
  }

  .hamburger-menu span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.4s;
  }

  .hamburger-menu span:nth-child(1) {
    top: 0;
  }

  .hamburger-menu span:nth-child(2) {
    top: 11px;
  }

  .hamburger-menu span:nth-child(3) {
    bottom: 0;
  }

  .hamburger-menu.is-active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }

  .hamburger-menu.is-active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.is-active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  .header-site-menu {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh;
    background-color: rgba(7, 7, 7, 0.95);
    transition: all 0.5s;
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-site-menu.is-active {
    left: 0;
  }

  .site-menu ul {
    flex-direction: column;
    padding-left: 0;
    gap: 20px;
  }

  .site-menu ul li img {
    height: 80px;
    padding: 0;
  }

  /* --- ファーストビュー --- */
  .first-view {
    height: auto !important;
    padding: 20px 0 40px;
  }

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    gap: 0;
  }

  .item:nth-of-type(1) {
    order: 1;
    width: 100%;
    margin-bottom: 100px;
  }

  .item:nth-of-type(4) {
    order: 3;
    width: 100%;
    margin-top: 40px;
  }

  .tategaki {
    order: 2;
    display: inline-block !important;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    font-size: 32px;
    line-height: 1.4;
    height: 380px;
    margin: 0 10px !important;
    padding: 0 !important;
    vertical-align: middle;
  }

  .item img {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    padding: 0 20px;
  }

  /* --- コンセプト --- */
  /* --- コンセプト（スマホ用書き換え） --- */

  /* タイトル幅をスマホ画面に合わせる */
  .concept h1 {
    width: 60% !important;
    /* スマホ画面の6割の幅 */
    margin-bottom: 10px !important;
    /* 下の画像との隙間を詰める */
    font-size: 28px !important;
  }

  .concept-item {
    display: flex !important;
    flex-direction: column !important;
    /* 縦に積む */
    height: auto !important;
    /* 高さを自動（中身に合わせる）にする */
    min-height: 0 !important;
    /* PC用の最小高さをリセット */
    overflow: visible !important;
    /* 見切れ防止 */
    padding: 20px 0 !important;
    /* 上下に少し余白を作って重なりを防ぐ */
  }

  /* 画像2枚を横並び・中央寄せ */
  .concept-left,
  .concept-right {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    width: 100% !important;
    margin: 20px 0 !important;
    /* 画像グループ自体の上下に余白を作る */
  }

  .concept-item img {
    width: 40% !important;
    /* 画面に2枚収まるサイズ */
    max-width: 150px !important;
    height: auto !important;
    aspect-ratio: 1/1;
    margin: 0 !important;
    /* 上下の余白をリセット */
  }

  /* テキストの間隔を最短にする */
  .concept-text {
    width: fit-content !important;
    margin: 40px auto !important;
    /* 枠自体は中央に置く */

    /* --- ここを修正 --- */
    text-align: left !important;
    /* 文字を左寄せにする */
    display: block !important;
    /* ブロック要素として確実に左寄せを適用 */
    padding-left: 5% !important;
    /* 左端に少し余裕を持たせると読みやすくなります */
    /* ------------------ */

    font-size: 15px !important;
    line-height: 1.8 !important;
    white-space: normal !important;

    margin-bottom: -40px !important;
    /* ← この数字を大きくすると下の画像が離れます */
  }

  .concept-img {
    display: none !important;
  }

  /* --- フード＆ドリンク（スマホ用修正） --- */

  .fooddrink {
    height: auto !important;
    background-color: #070707;
    /* 背景色を再徹底 */
    padding-top: 1px;
    /* マージン崩れ（マージンコラプス）を防ぐ */
  }

  .fooddrink h1 {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 20px !important;
    /* 上の余白を少し詰める */
    margin-bottom: 40px !important;
  }

  .item-list1,
  .item-list2 {
    flex-direction: column;
    /* 縦並びにする */
    align-items: center;
    /* 中央寄せ */
    padding-left: 5% !important;
    /* 左右の余白を調整 */
    padding-right: 5% !important;
    margin-top: 40px !important;
    height: auto !important;
  }

  .food-2 img,
  .item-list2 img {
    width: 80% !important;
    /* 固定幅を解除して画面に収める */
    max-width: 300px;
    /* 大きくなりすぎないように制限 */
    height: auto !important;
    padding-top: 50px;
    padding-bottom: 20px !important;
  }

  .food-2 p,
  .item-list2 p {
    font-size: 18px !important;
    /* 文字サイズをスマホ向けに微調整 */
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  .food-1 img {
    padding-top: 40px !important;
    width: 90% !important;
  }

  .fooddrink-text {
    width: fit-content !important;
    /* 枠の幅を広げて中央に置く準備 */
    margin: 0 auto !important;
    /* 枠自体は中央に配置 */
    text-align: left !important;
    /* ★文章を左寄せにする */
    height: auto !important;
    /* 固定高さを解除 */
    padding: 80px 20px !important;
    font-size: 15px !important;
    line-height: 1.8;
    white-space: pre-line;
  }

  /* --- オリジナリティ（スマホ用：中央揃え修正版） --- */

  .originality1 img,
  .originality2 img,
  .originality3 img {
    width: 100% !important;
    height: 200px !important;
    /* お好みの高さ（半分くらい）に固定 */
    object-fit: cover;
    /* 画像を歪ませずに、指定した範囲を埋める */
    object-position: center top;
    /* 画像の上側を中心に表示 */
    margin: 0 auto;
  }

  .originality {
    height: auto !important;
    padding: 60px 0;
  }

  /* セクション全体の大きな見出し(H1, H2)は中央揃え */
  .originality h1,
  .originality h2 {
    width: 85% !important;
    /* 幅を広げて1文字改行を防止 */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: nowrap;
    /* 1行に収める */
    display: block;
  }

  /* 各アイテムの並び（画像とテキスト） */
  .originality1,
  .originality2,
  .originality3 {
    flex-direction: column !important;
    align-items: center;
    margin: 40px 0 !important;
    height: auto !important;
  }

  /* テキストを囲む枠：中央に配置しつつ中身は左寄せの準備 */
  .originality1-text,
  .originality2-text,
  .originality3-text {
    width: fit-content !important;
    margin: 20px auto 0 !important;
    text-align: left;
    /* 中の文字を左寄せにする */
  }

  /* 各項目のタイトルとお話の本文：すべて左寄せ */
  .title1,
  .title2,
  .title3,
  .title1-text,
  .title2-text,
  .title3-text {
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .title1-text,
  .title2-text,
  .title3-text {
    line-height: 1.8;
    padding-top: 10px;
  }

  /* --- ショップインフォ--- */

  .shopinfo {
    height: auto !important;
    /* PC版の2000pxを解除 */
    padding: 40px 0;
  }

  .shopinfo1 {
    display: flex !important;
    flex-direction: column !important;
    /* 地図とテキストを縦に並べる */
    align-items: center;
    width: 100% !important;
  }

  /* --- 地図の設定 --- */
  .map {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 20px;
    /* 左右に少し隙間を作る */
    display: block !important;
    /* 非表示や崩れを防ぐ */
  }

  .map-container {
    position: relative;
    width: 100%;
    padding-top: 75%;
    /* これで高さを出す */
    height: 0;
    overflow: hidden;
    background: #333;
    /* 読み込み前の色（確認用） */
  }

  .map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

  /* --- ショップインフォの見出し（conceptと同じスタイルに） --- */
  .shopinfo h1 {
    width: 60% !important;
    /* conceptの見出し幅に合わせる */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 40px !important;
    text-align: center !important;
    font-size: 32px;
    /* サイズも統一 */
    padding: 1rem 0 !important;
    border-bottom: 1px solid #b2d5de;
    /* conceptと同じ下線 */
    display: block;
    white-space: nowrap;
  }

  .shoptitle {
    width: 60% !important;
    /* 「ご案内」も幅を統一 */
    margin: 0 auto 30px !important;
    text-align: center !important;
    font-size: 24px !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #b2d5de;
    display: block;
  }

  /* 地図と情報の間の余白を整える */
  .shopinfo1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  /* --- テキストの設定 --- */
  .shopinfo-text {
    margin: 0 auto !important;
    /* PC版の margin-left: 200px をリセットして中央へ */
    width: 90% !important;
    /* 枠の幅を広げる */
    text-align: center !important;
    /* 中の要素を中央揃えにする */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 子要素を中央に寄せる */
  }

  .shoptitle {
    width: 60% !important;
    /* conceptと同じ幅で中央に */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #b2d5de;
    display: block;
    white-space: nowrap;
    /* 1行で表示 */
  }

  .shop-text {
    width: fit-content !important;
    /* 400px固定を解除 */
    height: auto !important;
    display: inline-block;
    text-align: left !important;
    /* 営業時間などの詳細は読みやすく左寄せ */
    margin: 20px auto !important;
    padding-top: 0 !important;
    /* 余計なパディングをリセット */
    line-height: 1.8;
    margin-bottom: 100px !important;
    /* 下に余白を作る */
  }

  .shopinfo2 {
    margin-top: 40px !important;
    /* 400pxなどの極端な数値をリセット */
    display: block !important;
    clear: both;
    /* 回り込みを解除 */
  }

  .sirokuma {
    display: none;
  }

  .himitsu {
    display: none;
  }

  .contact {
    /* 固定の高さを解除して中身に合わせる */
    height: auto !important;
    /* 上下の余白を適正にする（数値はお好みで） */
    padding-top: 20px;
    padding-bottom: 50px;
  }

  .contact h1 {
    /* 見出しの上の余白をリセットして詰める */
    margin-top: -200px !important;
  }

  .onegai {
    text-align: left;
    /* 左寄せにする */
    display: inline-block;
    /* 幅を中身に合わせる（中央配置したい場合） */
    width: fit-content !important;
    /* 画面端に密着しないよう幅を絞る */
    margin-left: auto;
    /* 中央に寄せるための余白 */
    margin-right: auto;
    /* 中央に寄せるための余白 */
  }

  /* --- asiatoを全て消去 --- */
  [class*="asiato"],
  .asiato,
  .asiato1,
  .asiato2,
  .asiato3 {
    display: none !important;
  }

  /* --- スマホ用ロゴ --- */
  .header-logo img {
    width: 80px !important;
    height: auto;
  }

  html {
    /* スマホのヘッダーの高さに合わせて数値を小さくする */
    /* 例：ヘッダーが80pxくらいなら100px程度に調整 */
    scroll-padding-top: 100px;
  }
}