/* #region 共通スタイル設定 */
html {
  scroll-behavior: smooth;
}
body {
  /* フォントファミリー指定（和文フォント優先） */
  font-family: "M PLUS 1p", "Montserrat Alternates", "Hiragino Maru Gothic Pro", sans-serif;
  /* フォントの太さ */
  font-weight: 400;
  /* フォントのスタイル */
  font-style: normal;
  /* ページ全体の余白をゼロに */
  margin: 0;
  /* 背景色 */
  background: #123052 url("../images/background.jpg") repeat fixed;
  /* 文字色を白に設定 */
  color: white;
}
/* #endregion */
/* #region ----------------------------------------------波線SVG共通---------------------------------------------- */
/* SVG */
.wave img {
  display: block; /* ブロック要素化して下の余白を消す */
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.wave {
  line-height: 0;
  font-size: 0; /* 念のため文字サイズもゼロ */
}
/* #endregion */
/* #region ----------------------------------------------メイン画像---------------------------------------------- */
/* =========================
   HERO セクション全体
========================= */

.hero {
  position: relative; /* 子要素を absolute で配置するための基準 */
  width: 100%; /* 横幅は画面いっぱい */
  height: auto; /* 高さは中身（画像）に合わせる */
  overflow: hidden; /* 画像がはみ出した場合に隠す */
}

/* =========================
   HERO 内のメイン画像
========================= */

.hero-image {
  display: block; /* img下の余白（inline要素由来）を消す */

  width: 100%; /* 親要素いっぱいに表示 */
  height: auto; /* 縦横比を自動調整 */

  /* 画像の表示方法 */
  object-fit: contain; /* 画像全体を切らずに収める */
  object-position: center top; /* 上中央を基準に配置 */

  z-index: -1; /* 他の要素（ヘッダー等）より背面に配置 */
}
/* #endregion */
/* #region ----------------------------------------------ヘッダー全体---------------------------------------------- */
/* =========================
   ロゴ
========================= */

/* ロゴ画像のサイズ調整 */
.logo img {
  height: 80px; /* ロゴの高さを固定 */
  width: auto; /* 縦横比を維持 */
  display: block; /* img下の余白（inline要素由来）を消す */
}

/* =========================
   ヘッダー全体
========================= */

.page-header {
  position: absolute; /* ヒーロー画像の上に重ねる */
  top: 0;
  left: 0;
  width: 100%; /* 横幅いっぱい */
  z-index: 1; /* 背景画像より前面に */
  background-color: transparent;
  padding-top: 20px; /* 上部余白 */
}

/* ヘッダー内部のレイアウト */
.header-inner {
  margin: 0 auto; /* 全体を中央寄せ */
  display: flex;
  justify-content: space-between; /* ロゴ左・ナビ右 */
  align-items: center; /* 縦方向中央揃え */
  padding: 30px 100px; /* 内側余白 */
}

/* =========================
   PC用ナビゲーション
========================= */

/* ナビゲーション全体（ul） */
.main-nav ul {
  display: flex; /* 横並び */
  gap: 1.5rem; /* メニュー間の間隔 */
  list-style: none; /* 黒丸を消す */
  padding: 0;
  margin: 0;
}

/* 各メニュー項目（li） */
.main-nav li {
  text-align: center; /* 日本語・英語とも中央揃え */
}

/* メニューリンク */
.main-nav a {
  color: #d9d9d9;
  text-decoration: none; /* 下線を消す */
  display: inline-block;
  position: relative; /* 擬似要素（下線）の基準 */
  padding: 0 35px 15px; /* 下線用スペースを下に確保 */
}

/* ホバー時の下線（初期は非表示） */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 0; /* 初期状態は見えない */
  height: 2px;
  background-color: #d9d9d9;
  border-radius: 1px;

  transition: width 0.5s ease; /* 横に伸びるアニメーション */
}

/* ホバー時に下線を表示 */
.main-nav a:hover::after {
  width: 100%;
}

/* =========================
   ナビ内テキスト（2段構成）
========================= */

/* 日本語テキスト */
.main-nav .ja {
  display: block; /* 英語と縦並びにする */
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: -0.8rem; /* 日本語と英語の間隔調整 */
  letter-spacing: 0.04em;
}

/* 英語テキスト */
.main-nav .en {
  display: block;
  font-size: 0.6rem;
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 300;
  opacity: 0.6; /* 少し薄く表示 */
  letter-spacing: 0.3em;
}
/* #endregion */
/* #region ----------------------------------------------モバイル版メニュー---------------------------------------------- */
/* =========================
   初期状態（1350px以下で使用）
   ※ JSで状態切替する前のベース
========================= */

/* 閉じるボタン（×）
   ・初期は完全非表示
   ・menu-open 時に表示される */
.close-btn {
  display: none; /* 初期状態ではDOM上も非表示 */
  position: absolute; /* ヘッダー内で位置固定 */
  top: 3rem;
  right: 4.5rem;

  font-size: 2rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;

  opacity: 0; /* フェード用 */
  visibility: hidden; /* 操作不可 */
  transition: opacity 1s ease;

  z-index: 3; /* モバイルメニューより前 */
}

/* =========================
   モバイルナビ本体
========================= */

/* モバイル用ナビゲーション全体 */
.mobile-nav {
  position: fixed; /* 画面に固定 */
  top: -100%; /* 初期は画面外（上） */
  left: 0;

  width: 100%;
  height: 60%;

  background: #000000;
  opacity: 0.83;

  padding: 6rem 2rem 2rem; /* 上に余白を多めに確保 */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  transition: top 0.5s ease; /* スライドイン用 */
  z-index: 2; /* 背景より前 */
}

/* =========================
   モバイルメニュー：リスト構造
========================= */

/* ul：黒丸・余白リセット */
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* li：各メニュー項目 */
.mobile-nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  width: 180px;
  margin: 1.2rem 0;
  padding-bottom: 1rem;

  border-bottom: 1px solid white;
}

/* 先頭項目のみ上線を追加 */
.mobile-nav li:first-child {
  border-top: 1px solid white;
  padding-top: 1rem;
}

/* =========================
   モバイルメニュー：リンク
========================= */

/* メニューリンク */
.mobile-nav a {
  display: block;
  width: 100%;

  color: white;
  font-size: 1rem;
  text-decoration: none;

  transition: color 0.3s ease;
}

/* ホバー時の色変化 */
.mobile-nav a:hover {
  color: #ffd700;
}

/* =========================
   ハンバーガーメニュー
========================= */

/* ハンバーガーボタン本体
   ・1350px以下で表示
   ・menu-open 時に非表示 */
.hamburger {
  position: fixed;
  right: 16px;
  z-index: 3;

  display: none; /* PCサイズでは非表示 */
  flex-direction: column;
  gap: 5px;

  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease;

  background: none;
  border: none;
  cursor: pointer;
}

/* ハンバーガーの3本線 */
.hamburger span {
  display: block;
  width: 34px;
  height: 6px;

  background: white;
  transition: all 0.3s ease;
}

/* =========================
   メニューOPEN状態
   ※ JSが body に .menu-open を付与
========================= */

/* ナビを画面内へ表示 */
body.menu-open .mobile-nav {
  top: 0;
}

/* ハンバーガーを非表示に */
body.menu-open .hamburger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 閉じるボタン（×）を表示 */
body.menu-open .close-btn {
  opacity: 1;
  visibility: visible;
}
/* #endregion */
/* #region ----------------------------------------------introセクション---------------------------------------------- */
/* =========================
   Splide スライダー全体
========================= */

/* スライダー全体を中央寄せ */
.splide {
  display: flex; /* 中央寄せ用 */
  justify-content: center; /* 水平方向中央 */
  margin: 5rem auto 0 auto; /* 上のみ余白 */
}

/* スライダー内画像 */
.splide img {
  width: 100%; /* 親幅いっぱい */
  max-width: 1200px; /* 最大幅制限 */
  height: auto; /* 縦横比維持 */
  display: block; /* 下の余白防止 */
}

/* =========================
   矢印ボタン（全体）
========================= */

/* intro-slider 内の矢印ボタン本体 */
#intro-slider .splide__arrow {
  width: 55px; /* ボタン幅 */
  height: 55px; /* ボタン高さ */

  border-radius: 50%; /* 円形 */

  background: #ffffff; /* 背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影 */
}

/* =========================
   矢印ボタン（SVGアイコン）
========================= */

/* 矢印アイコン（SVG） */
#intro-slider .splide__arrow svg {
  fill: #000000; /* 矢印色 */
  width: 2rem; /* アイコン幅 */
  height: 2rem; /* アイコン高さ */
}

/* =========================
   ページネーション（ドット）
========================= */

/* ドット全体の位置調整 */
#intro-slider .splide__pagination {
  bottom: -2.5rem; /* スライダー下から浮かせる */
}

/* 各ドットの間隔 */
#intro-slider .splide__pagination__page {
  margin: 0 6px; /* 横方向のみ余白 */
}

/* =========================
   矢印ボタン位置調整
========================= */

/* 左矢印 */
#intro-slider .splide__arrow--prev {
  left: 100px; /* 左端から内側へ */
}

/* 右矢印 */
#intro-slider .splide__arrow--next {
  right: 100px; /* 右端から内側へ */
}

/* #endregion */
/* #region ----------------------------------------------aboutセクション---------------------------------------------- */
/* =========================
   ABOUT セクション全体
========================= */

/* セクション外枠 */
.about {
  padding: 3rem 1.5rem; /* 内側余白 */
  margin: 7rem auto 10rem; /* 上下余白・中央寄せ */
}

/* =========================
   ABOUT 内部レイアウト
========================= */

/* テキスト＋画像の横並び */
.about-inner {
  display: flex; /* 横並び */
  flex-wrap: wrap; /* 折り返し許可 */
  align-items: center; /* 縦中央揃え */
  gap: 4rem; /* 要素間余白 */

  max-width: 1250px; /* 最大幅 */
  margin: 0 auto; /* 中央寄せ */
}

/* =========================
   テキストブロック
========================= */

/* 左側テキスト全体 */
.about-text {
  flex: 1; /* 横幅可変 */
}

/* ヘッダー行（アイコン＋タイトル） */
.about-header {
  display: flex; /* 横並び */
  align-items: flex-end; /* 下端揃え */
  gap: 1rem; /* アイコンとの間隔 */

  border-bottom: 2px solid #b1b1b1; /* 下線 */
  padding-bottom: 0.3rem; /* 下線との余白 */
}

/* サブタイトル＋タイトルの縦並び */
.about-texts {
  display: flex;
  flex-direction: column; /* 縦配置 */
}

/* ABOUT（英語表記） */
.about-subtitle {
  font-size: 1.2rem; /* 文字サイズ */
  margin-bottom: 15px; /* 下余白 */
  color: #f0f0f0; /* 色 */
}

/* メインタイトル */
.about-title {
  font-size: 2.2rem; /* 文字サイズ */
  line-height: 1; /* 行高 */
  margin: 0 0 15px; /* 下余白 */
  color: #f5c000; /* 強調色 */
}

/* =========================
   アイコン
========================= */

/* 稲アイコン */
.about-icon img {
  width: 80px; /* 横幅 */
  height: auto; /* 比率維持 */
}

/* =========================
   キャッチコピー
========================= */

/* 強調コピー */
.about-catch {
  font-size: 1.8rem; /* 文字サイズ */
  width: 500px; /* 横幅 */
  font-weight: bold; /* 太字 */
  margin: 2rem 0; /* 上下余白 */
  line-height: 1.2; /* 行間 */
}

/* 強調色 */
.about-catch .highlight {
  color: #f5c000;
}

/* 補足テキスト */
.subtext {
  display: block; /* 改行 */
  text-align: right; /* 右寄せ */
  color: #ddd; /* 薄め色 */
}

/* =========================
   本文テキスト
========================= */

/* 説明文 */
.about-desc {
  margin-top: 0.6rem; /* 上余白 */
  line-height: 2.2; /* 行間 */
  text-align: left; /* 左揃え */
  font-size: 1.2rem; /* 文字サイズ */
}

/* =========================
   画像エリア
========================= */

/* 右側画像コンテナ */
.about-image {
  flex: 1; /* 横幅可変 */
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-self: center; /* 縦中央 */
}

/* ABOUT画像 */
.about-image img {
  width: 600px; /* 基準幅 */
  max-width: 100%; /* はみ出し防止 */
  height: auto; /* 比率維持 */

  border-radius: 8px; /* 角丸 */
  display: block; /* 下余白防止 */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); /* 影 */
}

/* =========================
   バナー
========================= */

/* バナー配置 */
.about-banner {
  display: flex;
  justify-content: center; /* 中央寄せ */
  margin: 8rem auto 0; /* 上余白 */
}

/* 食味バナー */
.about-shokumi {
  width: 465px; /* 横幅 */
  height: auto; /* 比率維持 */

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); /* 影 */
}
/* #endregion */
/* #region ----------------------------------------------menuセクション---------------------------------------------- */
/* =========================
   MENU セクション外枠
========================= */

/* 全幅・中央寄せ用セクション */
.menu-section {
  width: 100%; /* 横幅いっぱい */
  text-align: center; /* 中央揃え */
}

/* =========================
   背景コンテナ
========================= */

/* ベージュ背景を全面に敷く */
.menu-content {
  background-color: #f5efe6; /* ベージュ背景 */
  padding: 20px 20px; /* 内側余白 */
  width: 100%; /* 全幅 */
  height: auto; /* 高さ自動 */
}

/* =========================
   中央寄せラッパー
========================= */

/* 中央配置用の内側コンテナ */
.menu-inner {
  width: 100%; /* 横幅いっぱい */
  margin: 0 auto; /* 中央寄せ */
  color: #000; /* 基本文字色 */
}

/* =========================
   見出しエリア
========================= */

/* 見出し全体 */
.menu-header {
  position: relative; /* アイコン配置の基準 */
  text-align: center; /* 中央揃え */
}

/* タイトル（MENU） */
.menu-title h2 {
  font-size: 2.5rem; /* 文字サイズ */
  margin: 0 0 10px; /* 下余白 */
  color: #555; /* 濃いグレー */
}

/* サブタイトル */
.menu-title p {
  margin-bottom: 20px; /* 下余白 */
  font-size: 1.2rem; /* 文字サイズ */
  color: #777; /* 薄めグレー */
}

/* =========================
   見出し下線
========================= */

/* 装飾用下線 */
.menu-underline {
  width: 300px; /* 線の長さ */
  height: 2px; /* 線の太さ */

  margin: 0 auto 3rem; /* 中央＋下余白 */
  background-color: #ccc; /* 線の色 */
}

/* =========================
   メニュー一覧
========================= */

/* アイテム群コンテナ */
.menu-items {
  display: flex; /* 横並び */
  flex-wrap: wrap; /* 折り返し */
  justify-content: center; /* 中央寄せ */

  max-width: 1250px; /* 最大幅 */
  gap: 2rem; /* アイテム間隔 */

  margin: 0 auto 2rem; /* 下余白 */
}

/* 各メニューアイテム */
.menu-item {
  min-width: 0; /* flexboxの縮小バグ対策 */

  /* 1行3列レイアウト用幅計算 */
  width: calc(33.333% - (2rem * 2 / 3));
}

/* =========================
   メニュー画像
========================= */

/* メニュー画像 */
.menu-item img {
  width: 100%; /* 親幅いっぱい */
  max-width: 480px; /* 最大幅制限 */
  height: auto; /* 比率維持 */

  object-fit: cover; /* トリミング */
  border-radius: 8px; /* 角丸 */
}

/* =========================
   メニュー名
========================= */

/* メニュー名テキスト */
.menu-item p {
  margin-top: 0.5rem; /* 上余白 */
  font-weight: bold; /* 太字 */
}
/* #endregion */
/* #region----------------------------------------------newsセクション---------------------------------------------- */
/* =========================
   NEWS セクション外枠
========================= */

/* セクション全体 */
.news-section {
  width: 100%; /* 横幅いっぱい */
  margin: 7rem auto 12rem; /* 上・左右・下余白 */
  text-align: center; /* テキスト中央揃え */
}

/* =========================
   セクション内側
========================= */

/* 中央寄せ用コンテナ */
.news-inner {
  max-width: 1000px; /* 最大横幅 */
  margin: 0 auto; /* 中央配置 */
}

/* =========================
   見出しエリア
========================= */

/* メインタイトル */
.news-title h2 {
  font-size: 2.5rem; /* 文字サイズ */
  margin: 0; /* 余白リセット */
  color: #ececec; /* 明るいグレー */
}

/* サブタイトル */
.news-title p {
  margin: 0.3rem 0 1rem; /* 上下余白 */
  font-size: 1rem; /* 文字サイズ */
  color: #ddd; /* 薄いグレー */
}

/* =========================
   見出し下線
========================= */

/* 装飾用アンダーライン */
.news-underline {
  width: 300px; /* 線の長さ */
  height: 1px; /* 線の太さ */
  background-color: #3f6085; /* 線の色 */
  margin: 0 auto 3rem; /* 中央配置＋下余白 */
}

/* =========================
   Facebook 埋め込み
========================= */

/* Facebook を中央配置 */
#news-fb-container {
  display: flex; /* Flex レイアウト */
  justify-content: center; /* 水平方向中央寄せ */
  width: 100%; /* 横幅いっぱい */
}
/* #endregion */
/* #region----------------------------------------------conceptセクション---------------------------------------------- */
/* =========================
   CONCEPT｜全体
========================= */

.concept-section {
  background-color: #f5efe6;
  padding: 80px 75px 20px;
  color: #333;
}

.concept-inner {
  max-width: 1300px;
  margin: 0 auto;
}

/* =========================
   見出し
========================= */

.concept-title {
  text-align: center;
  font-size: 2.5rem;
  color: #555;
  margin-bottom: 10px;
  letter-spacing: 0.08em;
}

.concept-subtitle {
  text-align: center;
  font-size: 1rem;
  color: #777;
  margin-bottom: 20px;
}

.concept-underline {
  width: 25rem;
  height: 2px;
  background-color: #ccc;
  margin: 0 auto 4.5rem;
}

/* =========================
   レイアウト（画像＋文章）
========================= */

.concept-row,
.concept-row-reverse {
  display: flex;
  align-items: center;
  gap: 80px;
}

.concept-row-reverse {
  flex-direction: row-reverse;
}

.concept-row {
  margin-bottom: 6rem;
}

/* 画像幅 */
.concept-image-upper {
  flex: 0 0 46%;
}

.concept-image-lower {
  flex: 0 0 50%;
}

/* 画像共通 */
.concept-image-upper img,
.concept-image-lower img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* 上段：軽め */
.concept-image-upper img {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 下段：やや強め */
.concept-image-lower img {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* テキスト */
.concept-text-upper {
  flex: 1;
}

.concept-text-lower {
  flex: 1;
  padding-left: 2rem;
}

/* =========================
   リード文
========================= */

.concept-lead-wrap {
  margin-bottom: 4.5rem;
}

.concept-lead {
  font-size: 1.3rem;
  line-height: 2.05;
  color: #444;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0;

  padding-left: 1.2rem;
  border-left: 2px solid rgba(85, 68, 58, 0.25);
}

/* =========================
   文章ブロック
========================= */

.concept-paragraph {
  margin-bottom: 3.5rem;
}

.concept-label {
  font-size: 1.5rem;
  font-weight: 600;
  color: #55443a;
  margin-bottom: 0.8rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.concept-paragraph p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #444;
  letter-spacing: 0.04em;
  margin: 0;
}

/* 強調 */
.concept-paragraph strong,
.concept-lead strong {
  color: #55443a;
  font-weight: 600;
}

.concept-paragraph:last-child {
  margin-bottom: 0;
}

.concept-paragraph:last-child p:last-child {
  font-weight: 500;
}

/* =========================
   波SVG
========================= */

.concept-wave-wrapper {
  position: relative;
}

.wave {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave img {
  width: 100%;
  display: block;
}

/* #endregion */
/* #region----------------------------------------------accessセクション---------------------------------------------- */
/* =========================
   ACCESS｜全体
========================= */

.access-section {
  width: 100%;
  margin: 7rem 0 12rem;
  padding: 20px;
  color: white;
  text-align: center;
}

.access-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   見出し
========================= */

.access-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #ececec;
}

.access-subtitle {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #ddd;
}

.access-underline {
  max-width: 300px;
  height: 1px;
  background-color: #3f6085;
  margin: 0 auto 80px;
}

/* =========================
   メイン内容（情報＋写真）
========================= */

.access-content {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  text-align: left;
  margin-bottom: 5rem;
}

/* 情報ブロック */
.access-info {
  flex: 0 1 45%;
  text-align: center;
}

.access-logo img {
  width: 120px;
  height: auto;
  margin-bottom: 43px;
  display: inline-block;
}

/* 情報リスト */
.info-list {
  margin: 0;
  padding: 0;
  line-height: 1.8;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #3f6085;
}

.info-item dt {
  width: 120px;
  flex-shrink: 0;
  font-weight: bold;
  color: #ddd;
}

.info-item dd {
  margin-left: 0;
  flex-grow: 1;
  color: white;
  text-align: left;
}

/* 店舗写真 */
.inf-shop {
  flex: 1;
}

.info-shop img {
  width: 100%;
  max-width: 700px;
  height: auto;
}

/* =========================
   地図
========================= */

.access-map {
  width: 100%;
  margin: 0 auto;
}

/* 比率固定用ラッパー */
.map-placeholder {
  width: 100%;
  padding-top: 37.5%;
  position: relative;
  background-color: #2a4c6e;
  border-radius: 4px;
}

/* iframe 全面表示 */
.map-placeholder iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* #endregion */
/* #region----------------------------------------------footerセクション---------------------------------------------- */
/* =========================
   FOOTER｜全体
========================= */

footer {
  background-color: #f5efe6;
  padding: 0 1rem 2rem;
  text-align: center;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* =========================
   フッターナビ
========================= */

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}

.footer-nav li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #777;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.footer-nav li a:hover {
  opacity: 0.8;
}

/* 日本語ラベル */
.footer-nav .jp {
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

/* =========================
   ロゴ
========================= */

.footer-logo img {
  display: block;
  margin: 0 auto;
  height: 110px;
  width: auto;
}

/* =========================
   SNS
========================= */

.footer-sns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.footer-sns img {
  height: 25px;
  width: auto;
}

/* =========================
   コピーライト
========================= */

.footer-copy {
  font-size: 0.85rem;
  color: #777;
  margin: 20px 0;
}
/* #endregion */
/* #region -------------------------レスポンシブ：画面幅1350px以下のaboutのtext,画像の縦並び設定------------------------------- */
@media (max-width: 1350px) {
  /* =========================
     Header
  ========================= */

  .hero-image {
    height: auto;
    object-fit: contain;
    object-position: center top;
    margin-top: 0;
  }

  .page-header {
    padding-top: 10px;
  }

  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
  }

  .logo img {
    height: 70px;
  }

  .main-nav {
    display: none;
  }

  /* =========================
     Hamburger
  ========================= */

  .close-btn {
    display: block;
  }

  .hamburger {
    display: flex;
    position: relative;
    right: 0;
  }

  /* =========================
     About
  ========================= */

  .about {
    margin: 4rem auto 8rem;
  }

  .about-inner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .about-text {
    max-width: 500px;
    width: 100%;
    flex: none;
    text-align: center;
    margin: 0 auto 1.2rem;
  }

  .about-text .about-header {
    width: 100%;
    justify-content: center;
  }

  .about-title {
    font-size: 1.8rem;
  }

  .about-subtitle {
    text-align: left;
  }

  .about-catch {
    font-size: 1.8rem;
    line-height: 0.8;
    text-align: center;
    margin: 3rem auto;
  }

  .about-desc {
    margin: 0 auto;
  }

  .highlight {
    display: flex;
  }

  .about-image {
    flex: none;
    width: 60%;
    text-align: center;
  }

  .about-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
  }

  .about-shokumi,
  .about-roku {
    width: 430px;
  }

  /* =========================
     Concept
  ========================= */

  .concept-block {
    gap: 40px;
  }
}
/* #endregion */
/* #region -------------------------レスポンシブ：画面幅1104px以下のタブレット用設定------------------------------- */
@media (max-width: 1104px) {
  /* =========================
     Concept
  ========================= */
  .concept-underline {
    width: 20rem;
  }

  .concept-lead {
    font-size: 1.2rem;
  }

  .concept-lead-wrap,
  .concept-paragraph {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }

  .concept-paragraph p {
    text-align: left;
  }

  .concept-paragraph br,
  .concept-lead br {
    display: none;
  }

  .concept-label {
    display: none;
  }

  .concept-image {
    max-width: 570px;
    width: 100%;
  }

  .concept-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* =========================
     Access
  ========================= */

  .access-content {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .access-underline {
    margin: 0 auto 20px;
  }

  .access-info {
    width: 80%;
    max-width: 80%;
    margin: 0 auto;
    flex: none;
  }

  .info-list {
    display: inline-block;
  }

  .info-shop {
    flex: none;
    margin: 0 auto;
  }

  .access-map {
    width: 80%;
    margin: 0 auto;
    flex: none;
  }

  .info-item {
    gap: 5px;
  }
}

/* #endregion */
/* #region ------　--------------------レスポンシブ：画面幅768px以下のスマホ用設定------------------------------- */
@media (max-width: 768px) {
  /* =========================
     Header
  ========================= */

  .logo img {
    height: 55px;
  }

  .hero-image {
    margin-top: 0;
  }

  .header-inner {
    padding: 0.8rem 2rem;
  }

  .hamburger {
    gap: 7px;
  }

  .hamburger span {
    width: 28px;
    height: 3px;
  }

  /* =========================
     Intro
  ========================= */

  #intro-slider .splide__arrow {
    display: none;
  }

  /* =========================
     About
  ========================= */

  .about-subtitle {
    font-size: 1.2rem;
  }

  .about-title {
    font-size: 1.5rem;
  }

  .about-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: -0.6rem;
  }

  .about-desc br {
    display: none;
  }

  .about-icon img {
    width: 95px;
  }

  .about-catch {
    font-size: 1.6rem;
    width: 90%;
  }

  .about-image {
    width: 90%;
    margin-top: 2rem;
  }

  .about-image img {
    max-width: 360px;
  }

  .about-shokumi {
    width: 280px;
    margin-top: 1rem;
  }

  .about-shokumi img {
    max-width: 220px;
  }

  /* =========================
     Menu
  ========================= */

  .menu-header {
    margin-bottom: 2.5rem;
    gap: 20px;
  }

  .menu-content {
    padding: 2rem 1rem;
  }

  .menu-title h2 {
    font-size: 2rem;
  }

  .menu-title p {
    font-size: 1rem;
  }

  .menu-underline {
    width: 40%;
  }

  .menu-item {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .menu-item img {
    max-width: 360px;
  }

  .menu-item p {
    font-size: 0.9rem;
  }

  .menu-button a {
    width: 35%;
    padding: 1rem 0;
    font-size: 0.8rem;
  }

  .wave-bottom {
    margin-top: -5px;
  }

  /* =========================
     News
  ========================= */

  .news-section {
    margin: 4rem 0;
  }

  .news-title h2 {
    font-size: 1.5rem;
  }

  .news-title p {
    font-size: 0.9rem;
  }

  .news-underline {
    width: 60%;
  }

  /* =========================
     Concept
  ========================= */

  .concept-section {
    padding: 60px 16px;
  }

  .concept-title {
    font-size: 2rem;
  }

  .concept-subtitle {
    font-size: 1rem;
  }

  .concept-underline {
    width: 14rem;
    margin-bottom: 4rem;
  }

  .concept-row,
  .concept-row-reverse {
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 4rem;
    text-align: center;
  }

  .concept-image-upper,
  .concept-image-lower {
    width: 80%;
    max-width: 350px;
    margin: 0 auto;
  }

  .concept-text-upper,
  .concept-text-lower {
    padding: 0;
    width: 90%;
  }

  .concept-lead {
    font-size: 1.1rem;
    line-height: 1.9;
    border-left: none;
    padding-left: 0;
    text-align: left;
  }

  .concept-label {
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
  }

  .concept-paragraph p {
    font-size: 1rem;
    line-height: 1.85;
  }

  /* =========================
     Access
  ========================= */

  .access-section {
    padding: 40px 0;
    margin-bottom: 10rem;
  }

  .access-title {
    font-size: 2rem;
  }

  .access-subtitle {
    font-size: 1rem;
  }

  .access-underline {
    margin-bottom: 58px;
  }

  .access-content {
    flex-direction: column;
    gap: 30px;
  }

  .access-logo img {
    width: 125px;
  }

  .info-shop {
    display: flex;
    justify-content: center;
  }

  .info-shop img {
    max-width: 500px;
  }

  .info-list {
    padding: 0 10px;
  }

  .access-map {
    width: 100%;
  }

  /* =========================
     Footer
  ========================= */

  .footer {
    padding: 40px 16px 24px;
  }

  .footer-logo img {
    width: 120px;
    margin-bottom: 24px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
  }

  .footer-sns img {
    width: 28px;
  }

  .footer-copy {
    font-size: 0.8rem;
    opacity: 0.7;
  }
}
/* #endregion */
/* #region --------------------------レスポンシブ：画面幅480px以下のスマホ特化設定------------------------------- */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  /* ===== 共通余白 ===== */
  .about,
  .menu-section,
  .concept-section,
  .access-section {
    margin: 2rem 0 3rem;
    padding: 20px 0;
  }

  .events-section {
    margin: 3rem auto 1rem;
  }

  /* ===== inner padding ===== */
  .header-inner,
  .about-inner,
  .concept-inner,
  .access-inner,
  .menu-inner,
  .events-inner {
    padding: 0 15px;
  }

  /* ===== Header ===== */
  .header-inner {
    padding: 0.5rem 20px;
  }

  .logo img {
    height: 40px;
  }

  .hamburger {
    gap: 5px;
  }

  .hamburger span {
    width: 25px;
    height: 3px;
  }

  /* Hero */
  .hero {
    height: 55vh;
  }

  .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Mobile nav */
  .mobile-nav {
    padding: 80px 0 40px;
  }

  .mobile-nav li:first-child {
    border-top: 0.8px solid rgba(255, 255, 255, 0.5);
  }

  .mobile-nav a {
    font-size: 0.95rem;
  }

  .mobile-nav li {
    margin: 0.9rem 0;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* ===== Intro ===== */
  .intro,
  #intro-slider {
    display: none;
  }

  /* ===== About ===== */
  .about-section {
    padding-top: 56px;
  }

  .about-text {
    margin-bottom: 1rem;
  }

  .about-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .about-subtitle {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
  }

  .about-catch {
    font-size: 1.4rem;
    line-height: 0.9;
    width: 90%;
    margin: 3rem auto;
  }

  .about-desc {
    font-size: 0.95rem;
    line-height: 1.75;
    letter-spacing: 0.1rem;
    margin: 0 11px;
  }

  .about-desc br {
    display: none;
  }

  .about-icon img {
    width: 70px;
  }

  .about-image {
    width: 95%;
    margin-top: 1.5rem;
  }

  .about-banner {
    margin-top: 3rem;
  }

  .about-shokumi {
    width: 90%;
    max-width: 300px;
  }

  /* ===== Menu ===== */
  .menu-content {
    margin-top: -1px;
  }

  .menu-header {
    margin-bottom: 2rem;
  }

  .menu-title h2 {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
  }

  .menu-title p {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
  }

  .menu-underline {
    width: 50%;
    max-width: 150px;
    margin-bottom: 2rem;
  }

  .menu-items {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .menu-item {
    width: 85%;
    max-width: 300px;
    gap: 1.6rem;
  }

  .menu-item img {
    width: 100%;
    max-width: 340px;
    height: auto;
  }

  /* ===== News ===== */
  .fb-page {
    transform: scale(0.65);
    transform-origin: top center;
    margin-bottom: -200px;
  }

  /* ===== Concept ===== */
  .concept-section {
    margin: -1px 0;
    padding: 56px 16px;
  }

  .concept-inner {
    padding: 0;
  }

  .concept-title {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 0.3rem;
  }

  .concept-subtitle {
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 0.8rem;
  }

  .concept-underline {
    width: 16rem;
    margin: 0 auto 3rem;
  }

  .concept-row,
  .concept-row-reverse {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
  }

  .concept-row-reverse {
    margin-bottom: 0;
  }

  .concept-image-upper,
  .concept-image-lower {
    display: flex;
    justify-content: center;
  }

  .concept-image-upper img,
  .concept-image-lower img {
    width: 90%;
    max-width: 320px;
  }

  .concept-text-upper,
  .concept-text-lower {
    padding: 0;
  }

  .concept-lead {
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: left;
  }

  .concept-paragraph p {
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: left;
  }

  /* ===== Access ===== */
  .access-info {
    max-width: 100%;
    width: 100%;
  }

  .access-title {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
    text-align: center;
  }

  .access-subtitle {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    text-align: center;
  }

  .access-underline {
    max-width: 200px;
    margin: 0 auto 2.8rem;
  }

  .access-logo {
    display: none;
  }

  .info-list {
    max-width: 380px;
    margin: 0 auto 2rem;
  }

  .info-item {
    margin-bottom: 15px;
    padding-bottom: 8px;
  }

  .info-item dt {
    font-size: 0.85rem;
    font-weight: 600;
    width: 60px;
    margin-bottom: 0.5rem;
  }

  .info-item dd {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
  }

  .access-info p {
    font-size: 0.85rem;
  }

  .info-shop img {
    max-width: 320px;
    margin: 0 auto 2rem;
    display: block;
  }

  .map-placeholder {
    padding-top: 70%;
  }

  /* ===== Footer ===== */
  .footer {
    margin-top: -1px;
    padding: 40px 16px 24px;
    text-align: center;
  }

  .footer-logo img {
    width: 120px;
    margin-bottom: 24px;
  }

  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
    list-style: none;
    padding: 0;
  }

  .footer-nav a {
    font-size: 0.95rem;
  }

  .footer-sns {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
  }

  .footer-sns img {
    width: 28px;
  }

  .footer-copy {
    font-size: 0.8rem;
    opacity: 0.7;
  }
}
/* #endregion */


.sp_only {
  display: none;
}

.sp_only_inline {
  display: none;
}

@media (max-width: 480px) {
  .sp_only {
    display: block;
  }
  .sp_only_inline {
    display: inline-block;
    margin-left: 4px;
  }
}