.main_img {
    margin: 0 auto;
    border-radius: 30px;
    overflow: hidden;
}

.main_img img {
    display: block;
    width: 100%;
    height: 300px;         /* 任意の高さに固定すると角の丸みが安定します */
    object-fit: cover;     /* 縦横比を保ちつつ切り抜き */
    border-radius: 30px;   /* 念のため画像自体にも指定 */
}

/* ===========================================================
   Top menu btn part
   =========================================================== */


.restaurant_btn_wrapper {
  position: relative;	
  width: 100%;
/*  max-width: 1000px;*/
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;	
}

.restaurant_btn_wrapper .bg_img {
  display: block;	
  width: 100%;
  object-fit: cover;
/*  aspect-ratio: 16 / 9; */
  max-height: 600px;   
}

/* 中央のホワイトカード（上下5%、左右15%の余白） */
.restaurant_btn_inside_wrapper {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 22%;
  right: 22%;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 3% 4%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  
  /* 高さの変化に合わせて中身をレイアウト */
  display: flex;
  flex-direction: column;
}

/* 見出し（高さを固定せずコンパクト化） */
.btn_text_title {
  text-align: center;
  font-weight: bold;
  font-size: 1.6vw; /* 画面幅に応じて文字サイズも自動縮小 */
  color: #333333;
  margin-bottom: 2%;
  line-height: 1.2;
}

.btn_text_title .arrow {
  display: block;
  font-size: 1.1vw;
  color: #4a3b32;
  margin-top: 2px;
  letter-spacing: 2px;
}

/* ボタンリスト（カードの残りの高さをフル活用） */
.btn_select_menu_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3%; /* 隙間もパーセント */
  flex: 1; /* 残りの高さをすべてボタンエリアに割り当てる */
}

/* 各ボタン項目（高さを均等分割） */
.btn_item {
  width: 100%;
  flex: 1; /* 4つのボタンで均等に高さを分ける */
  display: flex;
}

/* ボタン本体（親の高さ100%にフィットさせる） */
.btn_select_menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; /* 高さを100%にしてあふれを防止 */
  background-color: #ffffff;
  border-radius: 999px; /* どんな高さになっても綺麗なカプセル型を維持 */
  text-decoration: none;
  font-size: 1.6vw; /* 文字もレスポンシブ拡大縮小 */
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.btn_select_menu:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* キャラアイコン */
.btn_icon {
  position: absolute;
  left: 6%;
  top: 20%;
  width: 18%; /* アイコンの大きさも比率固定 */
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.btn_icon img {
  width: 80%;
  height: auto;
  display: block;
}

/* 個別カラー設定 */
  .btn_select_menu.is-limited { border: 3px solid #5d9cec; color: #3b76c4; }
  .btn_select_menu.is-dinner { border: 3px solid #f2994a; color: #d9731e; }
  .btn_select_menu.is-other { border: 3px solid #48bb78; color: #2f855a; }
  .btn_select_menu.is-breakfast { border: 3px solid #4a3b32; color: #33261d; }

/* 左右キャラクター */
.chara_wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35%;
  height: auto;
  pointer-events: none;
}

 .chara_wrapper_responsive{
  display: none;	
 }	

.chara_wrapper img { width: 100%; height: auto; display: block; }
.chara_wrapper.is-left { left: -30%; }
.chara_wrapper.is-right { right: -30%; }


.swing_from_side_to_side{
    transform-origin: center bottom;
    animation: sayuniyurayura 3s linear infinite;
}

@keyframes sayuniyurayura {
  0% , 100%{
      transform: rotate(8deg);
  }
  50%{
      transform: rotate(-8deg);
  }
}


/* ==================================================
   2. モバイル用スタイル（レスポンシブ：768px以下）
   ================================================== */
@media (max-width: 768px) {
  .restaurant_btn_wrapper .bg_img {
    aspect-ratio: 3 / 4; /* 表示エリアを16:9に固定 */

  }	
  /* 上下5%、左右3%の余白設定 */
  .restaurant_btn_inside_wrapper {
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    padding: 5% 6%;
    border-radius: 16px;
  }

  /* モバイル用の文字サイズ微調整 */
  .btn_text_title {
    font-size: 3.2vw;
    margin-bottom: 2%;
  }


  .btn_select_menu {
    font-size: 3.5vw;
    border-width: 0.5vw;
  }

  .btn_icon {
    width: 22%;
    top: 22%;
    left: -2%;
  }

  .chara_wrapper {
    display: none;
  }
  .chara_wrapper_responsive{
	display: flex;
	justify-content: center;  
	
  }	
  .chara_wrapper_responsive img{
	width: 40%;
	margin-top:20px;
  }		
}

/* ===========================================================
   Main title part
   =========================================================== */

.hama_r_menu_section {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  color: #3a1c14;
}

/* ---------------- MENU / メニュー ---------------- */
.hama_r_maintitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 28px;
}

.hama_r_maintitle_en {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.5em;
  /* 文字送りの分、右側の余白を視覚的に相殺 */
  padding-left: 0.5em;
}

.hama_r_maintitle_jp {
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  color: #3a1c14;
}


/* ---------------- 本文テキスト ---------------- */
.hama_r_menutext {
  text-align: left;
  max-width: 820px;
  margin: 0 auto;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.9;
  text-align: center
}

.hama_r_menutext p {
  margin: 0 0 18px;
}

.hama_r_menutext p:last-child {
  margin-bottom: 0;
  font-size: 1.02em;
}


/* -------- 期間限定/夕食/朝食/単品その他---------- */
.hama_r_categorytitle {
	text-align: center; 	
	margin-top: 10%;
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 700;
	letter-spacing: 0.15em;
	font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
	color: #3a1c14;
}

/* ---------------- レスポンシブ ---------------- */
@media (max-width: 767px) {
  .hama_r_menu_section {
    padding: 30px 16px;
  }

  .hama_r_menutext {
    text-align: left;
  }
}



/* ===========================================================
   menu part
   =========================================================== */
.hama_r_menu_wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 一覧全体（Flexboxで3列→2列に切り替え） */
.hama_r_menu_list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 20px;
}

/* 1件分のカード */
.hama_r_menu_item {
  box-sizing: border-box;
  width: calc((100% - 20px * 2) / 3); /* 通常時：横3枚 */
}

/* 画像を囲むdiv（指定必須のクラス） */
.hama_r_menu_img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;      /* 画面サイズ固定（比率固定） */
  overflow: hidden;         /* はみ出た拡大分を隠す */
  border-radius: 4px;
  background: #eee;
}

.hama_r_menu_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  opacity: 1;
  transition-duration: 0.5s;
  transition-property: transform, opacity, filter;
}

/* マウスオーバーで拡大＋明るくなる */
.hama_r_menu_img:hover img {
  transform: scale(1.3);
  transition-duration: 0.5s;
  /* opacityでの「明るく」ではなく、実際に明るく見せる場合はfilterを併用 */
  filter: brightness(1.15);
}

/* テキストエリア */
.hama_r_menu_text {
  padding: 10px 2px 0;
}

.hama_r_menu_name {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 6px;
  color: #333;
}

.hama_r_menu_price {
  font-size: 14px;
  color: #d0021b;
  margin: 0;
  font-weight: bold;
}

/* ===========================================================
   レスポンシブ：画面が狭い時は2列表示
   =========================================================== */
@media screen and (max-width: 767px) {
  .hama_r_menu_item {
    width: calc((100% - 16px) / 2); /* レスポンス時：横2枚 */
  }
  .hama_r_menu_list {
    gap: 20px 16px;
  }
}


/* ===========================================================
   ボタン→スクロール設定
   =========================================================== */

.hama_r_scroll_blank {
	padding-top:5%;
}

/* スムーススクロールを有効化 */
html {
  scroll-behavior: smooth;
}

/* aタグ化した円ボタンのリンク見た目をリセット */
.hama_r_circle {
  text-decoration: none;
}
.hama_r_circle:link,
.hama_r_circle:visited {
  color: #3a1c14; 
}

/* 固定ヘッダー等で見出しが隠れる場合のオフセット調整 */
.hama_r_categorytitle {
  scroll-margin-top: 100px; /* ヘッダーの高さに合わせて調整してください */
}