@charset "utf-8";
html {
font-size: 100%;
background-color: #fff;
overflow-x: hidden; /* 横方向のスクロールバーを非表示にする */
}

body {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0;
padding: 0;
box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
overflow-x: hidden; /* bodyレベルでも横方向のスクロールバーを非表示にする */
}

a {
text-decoration: none; /*リンク貼り付け時の線消し*/
}

/* ヘッダー */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: #fff;
border-bottom: 2px solid #e0e0c0;
position: fixed;
width: 100%;
top: 0;
z-index: 10000;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none;}
.logo__img { height: 60px; }
.logo__title { height: 40px; }
.logo:hover {opacity: 0.8;}

/* ナビ (デスクトップ版) */
.site-nav{
margin-right: 2.5rem; /* デスクトップでの右マージン */
}

.site-nav .main-nav {
display: flex;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}

.site-nav .main-nav a {
display: inline-block;
text-decoration: none;
background: #f3f0c0;
color: #333;
padding: 8px 14px;
border-radius: 6px;
font-weight: bold;
white-space: nowrap; /* テキストが改行されないように */
}

.site-nav .main-nav a:hover {
background: linear-gradient(90deg, #f6e58d, #ffbe76);
color: #444;
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}

html {
scroll-behavior: smooth;
}

.main {/*親div*/
position: relative;
margin-top: 84px; /* ヘッダーの高さ分 */
width: 100%; /* 親要素の幅を100%にする */
box-sizing: border-box;
}

.main-text {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font-weight: bold; color: #fff; font-size: 32px;
background: rgba(255,255,255,0.1); backdrop-filter: blur(5px);
padding: 18px 26px; border-radius: 10px; text-align: center;
text-shadow: 0 0 10px rgba(0,0,0,0.6);
}
  
.main-img {
width: 100%;
object-fit: cover;
height: 20rem;
}

h2{
margin-top: 50px;/* 変更点 */
margin-bottom: 15px; /* 変更点*/
width: 100%; /* 親要素の幅を100%にする */
box-sizing: border-box;
text-align: center; /* テキストは中央寄せ */ /* 変更点*/
}

.shoptext{
font-size: 24px; /* 変更点　サイズ大きく*/
display: inline-block;
padding: 10px 20px;
border-top: 2px dashed #16a085;
border-bottom: 2px dashed #16a085;
margin-bottom: 22px;
background: rgba(22, 160, 133, 0.05);
border-radius: 1px;
}

.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2列に並べる */
gap: 15px; /* 画像の間隔 */
max-width: 1000px; /* 全体の幅を制限 */
margin: auto; /* 中央寄せ */
padding: 0 20px; /* 左右の余白を追加 */
box-sizing: border-box;
width: 100%; /* 親要素の幅を100%にする */
}

.image-grid img {
width: 100%; /* 枠いっぱいに広げる */
border-radius: 10px; /* 角を丸める */
aspect-ratio: 16 / 9;/* 横:縦 = 16:9 */
display: block;
object-fit: cover; /* サイズ調整（必要に応じて） */
}

.shoptext2{
font-size: 24px;
display: inline-block;
padding: 10px 20px;
border-top: 2px dashed #16a085;
border-bottom: 2px dashed #16a085;
margin-bottom: 22px;
background: rgba(22, 160, 133, 0.05);
border-radius: 1px;
}

.menuimage {
display: flex;
justify-content: space-between;
gap: 10px;
max-width: 1000px;
margin: auto;
padding: 0 20px; /* 左右の余白を追加 */
box-sizing: border-box;
width: 100%; /* 親要素の幅を100%にする */
}

.menucard {
flex: 1;
text-align: left;
min-width: 0; /* flexアイテムの最小幅をリセット */
}

.menucard img {
max-width: 100%;
border-radius: 10px;
aspect-ratio: 16 / 9;/* 横:縦 = 16:9 */
object-fit: cover; 
}

.menucard h2 {
font-size: 1.2rem;
margin: 15px  0; /* 左右のmarginを0に */
font-weight: bold;
display: inline-block;
text-align: center; /* 変更点　中央揃えに*/
padding: 0; /* h2のpaddingをリセット */
white-space: nowrap; /* テキストが改行されないように */
}

.menucard p {
font-size: 0.95rem;
line-height: 1.6;
text-align: left;
margin-left: 0;
margin-top: 0;
margin-bottom: 22px;
max-width: 280px;
}

.shopinfo {
border-collapse: collapse;
width: 100%;
max-width: 700px; /* 最大幅を調整 */
margin: 0 auto; /* 中央寄せ */
padding: 0 20px; /* 左右の余白を追加 */
box-sizing: border-box;
}

.shopinfo th, .shopinfo td {
border-bottom: 1.5px solid #16a085;/* 変更点 下線緑に*/
padding: 1.2em;
font-size: 1.2rem;
text-align: center; /* 中央寄せ */
box-sizing: border-box;
}

.shopinfo th {
border-bottom: 1.5px solid #16a085;/* 変更点 下線緑に*/
font-weight: bold;
width: 120px; /* 幅を固定 */
min-width: 14rem;
vertical-align: center; /* 上揃え */
}

.shopinfo td{
width: auto;
}

.shopinfo .gmap {
width: 100%; /* マップの幅を100%に */
height: 250px; /* マップの高さを調整 */
border: none; /* iframeのデフォルトボーダーをなくす */
}

.sns{
height: 80px;
margin-top: 4px;
margin-bottom: 4px;
}

.goodbakesins img{
margin: auto;
}

/* フッター */
.site-footer {
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-top: 2px solid #e0e0c0;
}

.site-footer a {
  color: #666;
  text-decoration: none;
  display: block;   /* 中央寄せを安定させる */
}
  
/* ================================
   ハンバーガーメニュー
================================ */
.nav-toggle {
  display: none;
}
.hamburger {
  display: none; /* デスクトップでは非表示 */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  cursor: pointer;
  z-index: 10001;
  position: relative; /* Safari対応 */
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* タブレット対応 */
@media (max-width: 1100px){
  h2 {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto; 
    padding: 0;
  }
}

/* スマホ対応 */  
@media (max-width: 800px) {
.logo__img { height: 45px; }
.logo__title { height: 30px; }

.site-header{
box-sizing: border-box;
  }

.hamburger {
display: flex; /* スマホで表示 */
  }

.site-nav {
position: fixed;
top: 0;
right: 0; /* 右端に配置 */
width: 70%; /* 画面幅に対する相対的な幅 */
max-width: 300px; /* 最大幅を制限 */
height: 100%;
background: #fffef8;
transform: translateX(100%); /* 初期状態では完全に右に隠す */
box-shadow: -3px 0 8px rgba(0,0,0,0.2);
padding-top: 84px; /* ヘッダーの高さ分 */
z-index: 10000; /* ヘッダーやハンバーガーアイコンと同じかそれ以上のz-index */
transition: transform 0.4s ease; /* transformにtransitionを適用 */
box-sizing: border-box;
overflow-y: auto; /* メニューが長くなった場合にスクロール可能にする */
margin-right: 0; /* スマホでは右マージンを無効にする */
  }

.site-nav .main-nav {
display: flex;
flex-direction: column;
align-items: flex-start; /* 項目を左寄せに */
padding: 0 20px; /* main-nav全体に左右パディング */
gap: 20px;
  }

.site-nav .main-nav a {
    /* 背景が文字の量に合わせる調整 */
display: inline-block; /* 最も重要: コンテンツの幅に合わせて背景を調整 */
text-decoration: none;
background: #f3f0c0; /* 背景色を再指定 */
color: #333;
padding: 10px 14px;
border-radius: 6px;
font-weight: bold;
text-align: left; /* テキストを左寄せに */
white-space: nowrap; /* メニュー項目が長くなっても改行されないように */
    /* width: 100%; や calc(100% - XXpx) は削除。inline-blockで幅はコンテンツに合わせる */
  }

  /* ハンバーガーアイコンのアニメーション (変更なし) */
  .nav-toggle:checked + .hamburger span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
  }
  .nav-toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked + .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
  }
  /* メニューの表示 */
  .nav-toggle:checked ~ .site-nav {
    transform: translateX(0); /* 画面内にスライドして表示 */
  }

  /* メインビジュアル */
.main {
margin-top: 74px; /* ヘッダーの高さ分調整 */
  }
  
.main img {
height: 10rem;
  }
 
.main-text{
font-size: 20px;
white-space: nowrap;
  }


  /* ショップテキスト */
h2 {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 0;
  }

.shoptext, .shoptext2 {
height: auto; /* 高さを自動調整 */
padding: 3px 8px; /* スマホでの文字と背景の間の余白 */
  }

  /* 画像グリッド */
.image-grid {
grid-template-columns: 1fr; /* 1列に並べる */
padding: 0 15px;
  }

  /* おすすめメニュー */
.menuimage {
flex-direction: column; /* 縦に並べる */
padding: 0 15px;
  }

.menucard {
margin-bottom: 5px; /* カード間の余白 *//* 変更点*/
  }

.menucard h2 {
font-size: 1.1rem;
margin: 15px 0;
  }

.menucard p {
margin-bottom: 5px;
max-width: none; /* 幅制限を解除 */
  }

  /* 店舗情報 */
.shopinfo {
max-width: 100%;
margin: 0;
padding: 0 15px;
  }

.shopinfo th, .shopinfo td {
padding: 0.8em;
font-size: 0.9rem;
display: block; /* thとtdをブロック要素に */
width: 100%; /* 幅を100%に */
box-sizing: border-box; /* paddingを含めた幅に */
  }

.shopinfo th {
text-align: center;
background-color: #f3f0c0; /* thの背景色を変える */
padding-left: 15px;
border-bottom: none;
  }

.shopinfo td {
padding-left: 15px;
margin-bottom: 10px; /* 各行の下に余白 */
border-bottom: none;
  }

.shopinfo tr:not(:last-child) td {
border-bottom: none; /* thとtdをブロックにしたのでtdの下線は不要に */
  }

.shopinfo tr {
margin-bottom: 20px; /* 各行の間に余白 */
display: block;
border-radius: 5px;
overflow: hidden; /* 角丸のため */
  }

.shopinfo tr:last-child {
 margin-bottom: 0;
  }

.shopinfo .gmap {
width: 100%; /* マップの幅を100%に */
height: 200px; /* マップの高さをスマホで調整 */
  }

.sns {
height: auto;
display: flex;
align-items: center;
  }
  
footer {
margin-top: 60px;
padding: 15px 10px;
  }
}