/* ==========================================
   基本設定・共通スタイル
   ========================================== */
:root {
  --primary-color: #8D6E63; /* カフェらしい温かみのあるブラウン */
  --accent-color: #D7CCC8;  /* 薄いベージュ */
  --text-color: #4E342E;    /* 濃いブラウン（文字用） */
  --bg-color:#FAFAFA;    /* 薄いグレー（背景用） */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
}

section {
  padding: 60px 20px;
  max-width: 1000px;
  margin: 0 auto;
}


h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 30px;
  padding-bottom: 10px;             /* 文字と線の間のすき間 */
  border-bottom: 3px solid #ff69b4; /* 重複を防ぐため、ここにピンクの長い線を指定 */
}

h2::after {
  display: none important; 
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

html {
  scroll-behavior: smooth; /* ページ内の移動をすべてなめらかなスクロールにします */
}

/* ==========================================
   ヘッダーナビゲーション
   ========================================== */
header {
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

header nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
}

header nav a {
  display: block;
  padding: 15px 20px;
  font-size: 1.0rem;
  font-weight: bold;
  transition: color 0.3s;
}

header nav a:hover {
  color: var(--primary-color);
}

.hero {
    /* 写真の上に40%の黒い膜を重ねて、文字の白（#fff）を引き立たせる */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/header1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    padding: 100px 20px; /* 上下に十分な余白を作って写真を魅せる */
    text-align: center;
    color: #ffffff; 
}

/* 店名を大きく目立たせる */
.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* SNSの文字も白にする */
.hero .sns-links a {
    color: #ffffff;
    margin: 0 10px;
}


.main-visual img {
  width: 100%;
  height: 400px;     
  object-fit: cover; 
}

/* ヘッダー全体の横幅や余白を整える */
.header-container {
  max-width: 1200px;     /* 画面が広がったときの最大幅 */
  margin: 0 auto;        /* ヘッダー全体を画面の中央に寄せる */
  padding: 15px 20px;    /* 上下と左右にほどよい余白を作る */
  display: flex;         /* ロゴとナビゲーションを横並びにする */
  justify-content: space-between; /* ロゴを左端、メニューを右端に離す */
  align-items: center;   /* 上下の中心をぴったり合わせる */
}

/* ★ロゴ画像を大きくする指定 */
.logo img {
  height: 60px;          /* ★ここ！画像の高さを60px（見やすいサイズ）にする */
  width: auto;           /* 横幅は画像の比率を保ったまま自動調整 */
  display: block;        /* 画像の下にできる謎の隙間を消す */
}

/* ナビゲーションメニューの文字を横並びにする */
nav ul {
  display: flex;         /* メニューを横並びにする */
  list-style: none;      /* ドット（・）を消す */
  margin: 0;
  padding: 0;
  gap: 20px;             /* メニュー同士の間隔（隙間） */
}

nav a {
  text-decoration: none; /* 下線を消す */
  color: #333;           /* 文字の色（お好みで変更してください） */
  font-weight: bold;     /* 文字を太字にする */
}


/* ロゴのサイズをお好みの大きさに調整 */
.header-logo {
  width: 150px;  /* 横幅（数値は自由に調整してください） */
  height: auto;  /* 縦横比を維持 */
}













/* ==========================================
   ホーム・ヒーローエリア
   ========================================== */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff; /* 写真の上の文字を白にする */
  position: relative;
  box-sizing: border-box;
  padding: 20px;
}

.hero h1 {
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}

.store-intro {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}

.store-intro img {
  border-radius: 6px;
  margin-bottom: 15px;
  width: 100%;
  max-height: 400px;
  object-fit: cover; /* 比率を保って綺麗にトリミング */
}





.store-intro h3 {
  margin-bottom: 10px;
}

.tagline {
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 15px;
  font-weight: bold;
}

.hours-info {
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.sns-links a {
  display: inline-block;
  margin: 0 10px;
  padding: 8px 16px;
  border: 1px solid var(--primary-color);
  border-radius: 20px;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.sns-links a:hover {
  background-color: var(--primary-color);
  color: #fff;
}

/* --- メイン画像の潰れとボタンのズレを直すコード --- */

.hero {
  width: 100%;
  max-width: 680px;    /*  メイン画像の横幅　　 */
  margin: 0 auto;         
  aspect-ratio: 3 / 4;    /*  画像サイズ（3024×4032）と同じ 3:4 の比率に固定 */
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
}

/* Instagramと席予約のボタンの横並びとズレを直す */
.sns-links {
  display: flex;
  justify-content: center;
  gap: 15px; /* ボタンとボタンの間のすき間 */
  margin-top: 20px;
}

.sns-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;       /* ボタンの横幅 */
  height: 40px;       /* ボタンの高さ */
  text-decoration: none;
  border: 1px solid #ffffff; /* 白い枠線 */
  border-radius: 20px; /* ボタンの角を少し丸くする */
  color: #ffffff;
  font-size: 0.9rem;
  box-sizing: border-box; /* 枠線がズレるのを防ぐお守り */
}









/* ==========================================
   お知らせ
   ========================================== */
.news-list {
  list-style: none;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 20px;
	position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.news-list li {
  padding: 15px 0;
  border-bottom: 1px dashed #eee;
  font-size: 0.95rem;
}

.news-list li:last-child {
  border-bottom: none;
}

.news-list .date {
  font-weight: bold;
  color: #999;
  margin-right: 15px;
}

/* ==========================================
   メニュー
   ========================================== */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.menu-item {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: center;
  padding-bottom: 15px;
}

.menu-img {
  height: 200px;
  background-color: #eee; /* 画像がない時のダミー背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-name {
  font-weight: bold;
  margin: 15px 0 5px;
}

.price {
  color: var(--primary-color);
  font-weight: bold;
}

.menu-item{
  /* ① カード自体を画面の中央に寄せる */
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px 15px 15px; 
  /* ② 中の文字や画像を中央揃えにする */
  text-align: center;

  /* ③ 画面を縮めたとき、カードが画面の端にぴったりくっつくのを防ぐ余白 */
  max-width: 90%; /* 画面幅の90%以上大きくならないようにする */
}


/* ドリンク */
 
.drink-category h3 { 
    font-size: 0.8rem; 
    border-left: 2px solid var;
    padding-left: 10px; 
    margin-bottom: 15px; 
}

.drink-category ul { list-style: none; padding: 0; font-size: 0.85rem; }

.signature-item { margin-bottom: 20px; }
.signature-item .item-main { font-weight: bold; display: flex; justify-content: space-between; }
.signature-item .item-detail { font-size: 0.7rem; color: var(--text-sub); }



/* ケーキ一覧リスト */
.cake-list {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  grid-column: 1 / -1; /* グリッド内で横いっぱいに広げる */
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.item-row h3 {
  font-size: 1rem;
  font-weight: normal;
}

/* 季節限定のハイライト装飾 */
.highlight-wood {
  color: #D32F2F;
  font-weight: bold;
  background-color: #FFEBEE;
  padding: 12px 10px;
  border-radius: 4px;
}

/* ==========================================
   ギャラリー
   ========================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.gallery-item {
  aspect-ratio: 4 / 3;
  background-color: var(--accent-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
}

h2 {
    font-size: 1.8rem;
    color: #6d597a;
    margin: 0 0 15px;
}

.concept {
    font-size: 0.85rem;
    color: #7a7066;
}



.gallery-group {
  display: flex;
  flex-wrap: wrap;   /* 画面が狭くなったら自動で折り返す */
  gap: 18px;         /* 写真同士のすき間 */
  margin-bottom: 45px;
  clear: both;       /* floatの回り込みを完全にリセット */
}

.gallery-group figure{
  width: 220px;
  margin: 0;
}

.gallery-group figure img {
  width: 100%;
  height: 185px;     
  object-fit: cover;
  border-radius: 6px/* ほんの少し角丸にする */
}
.gallery-group figcaption {
  font-size: 0.75rem;
  color: #7a7066;
  margin-top: 5px;
  text-align: left;  /* 文字を左寄せにする */
}





/* 予約ルールバナー */
.info-banner {
    background:#fff;
    color: #F0B9C9;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 40px;
	position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.info-banner ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.info-banner li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 5px 0;
}

.info-banner li:last-child { border: none; }

.info-banner span { font-weight: bold; }

/* セクション共通 */
h2 {
    font-size: 1.1rem;
    border-bottom: 2px solid #e5989b;
    padding-bottom: 5px;
    margin-bottom: 20px;
    color: #b5838d;
    display: inline-block;
}

.menu-section { margin-bottom: 40px; }





/* ケーキ注文の注意事項ボタンの色を少し変える（お好みで） */
/* 注意事項ボタン（横幅を広くしてバランスを整える） */
.info-btn {
    display: block;
    text-align: center;
    background: #8e736e; /* 画像のボタン色に合わせた落ち着いたブラウン */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 0.9rem; /* 文字サイズを少しだけ小さくして1行に収まりやすく */
    padding: 15px 25px; /* 上下の押しやすさをキープしつつ左右に余白 */
    border-radius: 18px; /* 四角くなりすぎない綺麗な丸み */
    text-decoration: none;
    margin: 20px auto; /* 上下に余白を作って中央寄せ */
    width: 90%; /* 画面幅に合わせて柔軟に広がるように指定 */
    max-width: 450px; /* パソコン画面でも広がりすぎない最大幅 */
    line-height: 1.6; /* 2行になったときも見やすい行間 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 優しい影 */
}

/* カードレイアウト (ケーキの号数の枠の装飾)*/
.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* 基本のカード（右側の4号など）：背景を白色に指定 */
.cake-card {
    background: #ffffff; 
    border: 1px solid #c9c3c3;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

/* 目立たせたいカード（左側の3号）：薄ピンク */
.cake-card.highlight {
    background: #fff8f8; /* 薄ピンク */
    border-color: #e5989b;
}


.cake-card.highlight {
    background: #fff8f8;
    border-color: #e5989b;
}

.cake-card h3 { font-size: 1rem; margin-bottom: 5px; }

.recommend {
    font-size: 0.7rem;
    color: #e5989b;
    font-weight: bold;
    margin-bottom: 10px;
}

.price { font-weight: bold; font-size: 1.2rem; margin: 10px 0; }
.detail { font-size: 0.75rem; color: #888; }


/* リストアイテム */
.item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.item-text h3 { font-size: 0.95rem; margin: 0; }

.item-text p { font-size: 0.8rem; color: #666; margin: 5px 0 0; }

.item-price { font-weight: bold; color: #6d597a; }

/* オプション */
.option-box {
    background: #fdf6f6;
    padding: 20px;
    border-radius: 12px;
}

.option-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.plus { color: #e5989b; font-weight: bold; }

footer {
    text-align: center;
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 20px;
}


/* ==========================================
   カスタムオプション（上のピンクの箱）に枠線を付ける
   ========================================== */
.option-box {
  background: #fdf6f6;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e5989b;  /* 枠線を追加 */
  box-sizing: border-box;
}

/* ==========================================
   注意事項（下の箱）を薄ピンクの背景に変更する
   ========================================== */
.option-note {
  font-size: 0.8rem;         /* 文字を少し小さくスマートに */
  color: #7a7066;            /* 優しいブラウン系の文字色 */
  line-height: 1.6;          /* 行間をあけて読みやすく */
  
  background-color: #fdf6f6; 
  border: none;              /* 枠線をなしにする */
  border-radius: 12px;       /* 四隅を丸くして柔らかい印象に */
  
  padding: 15px 20px;        /* 枠の内側の余白 */
  margin: 20px auto 25px;    /* 外側の余白 */
  max-width: 500px;          /* 枠が広がりすぎないように最大幅を制限 */
  text-align: left;          /* 文字は左寄せ */
  box-sizing: border-box;    /* はみ出し防止 */
}



/* ==========================================
   予約フォーム（コンセプトケーキ用）
   ========================================== */
.contact-section {
  padding: 60px 20px;
  background-color: #fcfbfa; /* 優しい薄い背景色 */
  text-align: center;
}

.form-intro {
  font-size: 0.9rem;
  color: #7a7066;
  margin-bottom: 30px;
}

.cake-form {
  max-width: 600px; /* パソコンで見ても広がリすぎない幅 */
  margin: 0 auto;
  text-align: left;
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #6d597a; /* カフェのテーマカラーに合わせる */
}

/* 必須マークの装飾 */
.required {
  background-color: #e5989b;
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

/* 入力欄（テキスト、メール、日付、選択肢、テキストエリア）の共通設定 */
.cake-form input[type="text"],
.cake-form input[type="email"],
.cake-form input[type="date"],
.cake-form select,
.cake-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
  box-sizing: border-box;
}

/* チェックボックスの間隔 */
.checkbox-group label {
  display: block;
  font-weight: normal;
  margin-bottom: 5px;
  color: #333;
  cursor: pointer;
}

.checkbox-group input {
  margin-right: 5px;
}

/* 送信ボタンの装飾 */
.submit-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background-color: #e5989b; /* カフェのテーマカラー */
  color: #ffffff;
  border: none;
  border-radius: 25px; /* 丸みのあるボタン */
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.submit-btn:hover {
  background-color: #b56576; /* ホバー時の色変化 */
}





/* ==========================================
   アクセス（Googleマップ調整含む）
   ========================================== */
.map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 の比率でマップをレスポンシブ化 */
  margin-bottom: 25px;
}

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

.access-info p {
  margin-bottom: 12px;
}



/* ==========================================
   予約フォーム（席予約用）
   ========================================== */
.contact-section {
  padding: 60px 20px;
  background-color: #fcfbfa; /* 優しい薄い背景色 */
  text-align: center;
}

/* フォーム本体：大きな白いカード型 */
.cake-form {
  max-width: 600px; /* パソコンで見ても広がりすぎない幅 */
  margin: 0 auto;
  text-align: left;
  background: #ffffff;
  padding: 40px 30px;       /* オーダーケーキと同じ広めの余白 */
  border-radius: 12px;      /* 角をなめらかに丸める */
  box-shadow: 0 4px 20px rgba(0,0,0,0.03); /* ほんのり優しい影 */
}

/* 各入力項目のグループ */
.form-group {
  margin-bottom: 25px;      /* 項目ごとのすっきりした間隔 */
}

/* ラベル（ご来店日、ご予約の人数、詳細） */
.form-group label {
  display: block;
  font-weight: bold;
  font-size: 0.85rem;       /* 小さめですっきりした文字 */
  margin-bottom: 10px;
  color: #4a3f35;           /* 落ち着いたダークブラウン */
}

/* 必須マークの装飾 */
.required {
  background-color: #e5989b;
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 入力欄（日付、テキストエリアなど）の共通設定 */
.cake-form input[type="text"],
.cake-form input[type="email"],
.cake-form input[type="date"],
.cake-form select,
.cake-form textarea {
  width: 100%;
  padding: 12px 10px;       /* 内側の広めの余白 */
  border: 1px solid #dcd6d0; /* オーダーケーキと同じ上品な細い枠線 */
  border-radius: 6px;       /* ほどよい角丸 */
  font-size: 0.9rem;
  color: #333;
  box-sizing: border-box;
  background-color: #fff;
}

/* プレースホルダー（薄い文字）の色 */
.cake-form ::placeholder {
  color: #bbb;
}

/* テキストエリア（ご予約の人数・詳細）の高さ固定 */
.cake-form textarea {
  height: 110px;            /* オーダーケーキの入力欄と同じ高さ */
  resize: vertical;         /* 縦方向にのみリサイズ可能 */
}

/* 送信ボタン（入力内容を確認する） */
.submit-btn {
  display: block;
  width: 100%;
  padding: 16px;            /* 押しやすい太めのボタン */
  background-color: #e5989b; /* 綺麗なピンク色 */
  color: #ffffff;
  border: none;
  border-radius: 25px;       /* 完全な丸み */
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
  margin-top: 35px;         /* ボタン上の広い余白 */
}

.submit-btn:hover {
  background-color: #d48386; /* ホバー時に少し濃く */
}

.submit-btn:active {
  transform: scale(0.98);    /* クリックした瞬間に少し沈む */
}



/* 「ご予約の人数」の入力欄を1行用の入力欄と同じ縦幅に合わせる */
.cake-form .form-group:nth-of-type(4) textarea {
  height: 47px;         /* input欄と同じ高さに固定 */
  min-height: 47px;
  resize: none;         /* 右下のツマミを消して、勝手に広がらないようにする */
}



/* 下部の「お電話で問い合わせ」ボタン */
.tel-btn {
  display: block;
  width: 280px;              /* 画像の横幅に合わせる */
  padding: 15px 0;
  text-align: center;
  border-radius: 30px;
  font-weight: bold;
  color: #fff;
  background-color: #8a6d65; /* 画像通りの落ち着いた茶色 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s, background-color 0.3s;
  margin: 30px auto 0;      /* 左右中央配置 */
  text-decoration: none;
  cursor: pointer;
}

.tel-btn:hover {
  transform: translateY(-3px);
  background-color: #70564f;
}

/* ==========================================
   ご予約・お問い合わせ（CTAボタン）
   ========================================== */
.contact-text {
  text-align: center;
  margin-bottom: 30px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-btn {
  display: block;
  width: 280px;
  padding: 15px 0;
  text-align: center;
  border-radius: 30px;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.cta-btn:hover {
  transform: translateY(-3px);
}

/* 茶色い「お電話で問い合わせ」ボタン（画像通りに中央配置＆色変更） */
.tel-btn {
  display: block;
  width: 280px;              /* ボタンの横幅を画像サイズに固定 */
  padding: 15px 0;
  text-align: center;
  border-radius: 30px;       /* 綺麗な丸み */
  font-weight: bold;
  color: #fff;
  background-color: #8a6d65; /* 1枚目・3枚目の画像と同じ落ち着いた茶色 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* ほんのり優しい影 */
  transition: transform 0.2s, background-color 0.3s;
  margin: 40px auto 0;       /* 上にしっかり余白をあけ、左右中央に配置 */
  text-decoration: none;     /* リンクのアンダーラインを消す */
  cursor: pointer;
}

.tel-btn:hover {
  transform: translateY(-3px);
  background-color: #70564f; /* ホバー時に少し暗く */
}

.info-banner {
  background:#fff;
  color: #F0B9C9;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 40px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}




/* ==========================================
   予約フォーム（送信ボタン部分の調整）
   ========================================== */
/* ※前回の .cake-form や .form-group の設定に続けて以下の設定にする*/

/* ピンク色の「入力内容を確認する」ボタン */
.submit-btn {
  display: block;
  width: 100%;               /* 白いカード（.contact-form）の横幅いっぱいに広げる */
  padding: 16px;             /* 上下を少し太くしてオーダーケーキと同じに */
  background-color: #e5989b; /* 綺麗なピンク色 */
  color: #ffffff;
  border: none;
  border-radius: 25px;       /* 綺麗な丸み */
  font-size: 1rem;
  font-weight: bold;
  box-sizing: border-box;    /* 横幅がはみ出すのを防ぐ */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
  margin-top: 35px;          /* 上の入力欄との隙間を広げる */
}

.submit-btn:hover {
  background-color: #d48386; /* ホバー時に少し濃く */
}

.submit-btn:active {
  transform: scale(0.98);    /* クリックした瞬間に少し沈む */
}



/* ==========================================
   フッター
   ========================================== */



/* フッター全体のスタイル（中央寄せにする場合） */
.footer-container {
  display: flex;
  flex-direction: column; /* 縦並びにする（横並びなら row に変更） */
  align-items: center;    /* 中央揃え */
  justify-content: center;
  padding: 30px 0;        /* 上下に余白を作る */
  background-color: #8a6d65; /* 背景色（お好みで変えてください） */
  color: #fff;            /* 文字色 */
}

/* フッターロゴのサイズ調整 */
.footer-logo img {
  width: 120px;           /* フッターに合わせた少し小さめのサイズ */
  height: auto;
  margin-bottom: 15px;    /* 下の文字との間隔 */
}

/* リストを横並びにする */
.footer-nav {
  display: flex;           /* 子要素(li)を横並びにする */
  justify-content: center; /* 中央に寄せる */
  list-style: none;        /* 左側の点（・）を消す */
  padding: 0;              /* 余計な余白をリセット */
  margin: 20px 0;          /* ロゴやコピーライトとの上下の間隔 */
}

/* メニューひとつひとつの間隔と見た目 */
.footer-nav li {
  margin: 0 15px;          /* メニュー同士の左右の間隔（お好みで調整） */
}

/* リンクの文字のデザイン（下線を消して白文字にする場合） */
.footer-nav a {
  color: #fff;
  text-decoration: none;
}


/* ==========================================
   スマホ用の微調整 (画面幅が600px以下の場合)
   ========================================== */
@media (max-width: 600px) {
  header nav a {
    padding: 10px 12px;
    font-size: 0.8rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr; /* ギャラリーを1列にする */
  }

  .hero {
    width: 100%;            /* 画面横幅いっぱいに広げる */
    max-width: 100%;        /* 680pxの制限を解除してスマホ幅に合わせる */
    height: auto;           /* 高さを自動計算にする */
    aspect-ratio: 3 / 4;    /* 3:4の比率を保ったまま自動縮小させる */
    background-size: cover; /* 画像を隙間なく表示 */
  }

  /* ボタンを囲う親要素への指示をさらに強力に */
  .hero-buttons, 
  .cta-buttons,
  .hero div, 
  .hero p {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;       /* ボタン同士の間隔を少し狭く */
    flex-wrap: nowrap !important; /* 絶対に折り返さない */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important; /* 左右に少しだけ余白を作る */
    box-sizing: border-box !important;
  }

  /* メイン画像内の3つのボタン共通のスマホ用調整（固定幅を強制解除） */
  .hero-buttons a,
  .cta-buttons a,
  .hero a,
  .cta-btn {
    flex: 1 !important;        /* 3つのボタンを画面幅に合わせて均等に縮める */
    min-width: 0 !important;
    width: auto !important;    /* パソコン用の「280px」指定を強制解除 */
    padding: 12px 2px !important; /* ボタンの内側の左右余白を削る */
    font-size: 0.7rem !important; /* 文字を見切れないサイズに微調整 */
    white-space: nowrap !important; /* ボタン内で文字を改行させない */
    text-align: center !important;
  }


  /* 💡 ギャラリー（写真と説明文のカード）内の文字を左寄せにする */
  .cake-card, 
  .gallery-grid div, 
  .menu-section div {
    text-align: left !important;
  }

  /* 写真下の説明テキストに少しだけ左右の余白を作って見やすくする調整 */
  .cake-card p,
  .gallery-grid p,
  .detail {
    padding: 0 5px;
    margin-left: 0;
    text-align: left !important;
  }
}


/* --- パソコン・タブレットなど共通のベース設定 --- */
.hero {
  width: 100%;
  max-width: 680px;         /* パソコン表示での最大の横幅 */
  margin: 0 auto;         
  aspect-ratio: 3 / 4;      /* 画像サイズ（3024×4032）と同じ 3:4 の比率に固定 */
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
}







/* Googleマップのiframeだけを対象にレスポンシブ化 */
iframe[src^="https://www.google.com/maps/embed"] {
  width: 100%;           /* 横幅を画面いっぱいに広げる */
  height: auto;          /* 高さを自動調整 */
  aspect-ratio: 4 / 3;   /* 地図の縦横比（4:3）を維持 */
}