/* =======================================
   Base & Reset
======================================= */
body {
  margin: 0;
  font-family: 'Zen Maru Gothic', 'Hiragino Rounded Gothic ProN', 'ヒラギノ丸ゴ ProN W4', sans-serif;
  color: #333;
  background-color: #fcfcfc;
  overflow: hidden;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* 変更前：ここから幅の制限を削除します */
section:not(#hero) { 
  padding: 80px 20px; 
  /* 以下の2行を削除（またはコメントアウト）してください */
  /* max-width: 1000px; */
  /* margin: 0 auto; */
}

/* 中身を中央に寄せる「内箱」の指定 */
.inner {
  max-width: 1000px;
  margin: 0 auto; /* 左右の余白を自動にして中央揃えにする */
  width: 100%;
}
h1, h2, .hero-text, .nav-menu a {
  font-family: 'Fredoka', 'Zen Maru Gothic', sans-serif;
}
h1,h2 {
  text-align: center;
  font-size: 48px;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
  
  /* メインとサブを縦並び（2段）にして中央に揃える設定 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* メインタイトルとサブタイトルの間の隙間 */
}
h2 { color: #ea512d;}

/* サブタイトル用のデザイン */
.h2-sub {
  display: block;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 22px;      /* サブタイトルらしく小さめのサイズに */
  color: #ea512d;
  letter-spacing: 0.05em;
}

/* --- セクション背景色のバリエーション --- */

/* 優しいベージュの背景 */
.bg-beige {
  background-color: #fef3e4;
}

/* 鮮やかなオレンジの背景（文字色は白にする） */
.bg-orange {
  background-color: #ea512d;
  color: #fff; 
}

/* オレンジ背景の中にある見出し（h2）やサブタイトルも白に変更 */
.bg-orange h2,
.bg-orange .h2-sub {
  color: #fff;
}

/* =======================================
   Loading Screen
======================================= */
#loading-screen {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: #00aa7b; color: #fff;
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#loading-screen.is-loaded { opacity: 0; visibility: hidden; }

/* =======================================
   Header
======================================= */
header {
  position: fixed; top: 0; left: 0; width: 100%; height: 70px;
  background: rgba(255, 255, 255, 0.95);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 20px; box-sizing: border-box; z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 追加：ロゴと説明文を横並びにするグループ */
.header-left {
  display: flex;
  align-items: center;
  gap: 15px; /* ロゴとテキストの間の余白 */
}

/* ロゴ自体の設定 */
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* 追加：ロゴ横の説明文のデザイン */
.header-desc {
  margin: 0;
  padding-left: 15px;
  border-left: 1px solid #ccc; /* 薄い縦線で区切ってスタイリッシュに */
  font-size: 11px; /* さりげなく小さめに */
  color: #333; /* 真っ黒ではなく、少し落ち着いたグレー */
  line-height: 1.4;
  letter-spacing: 0.05em; /* 文字の隙間を少し広げてカッコよく */
  font-weight: 500;
}

/* 追加：スマホ表示時の調整（画面幅768px以下の場合） */
@media (max-width: 768px) {
  .header-desc {
    display: none; /* 画面が狭いときはデザイン崩れを防ぐために隠す */
  }
}

/* =======================================
   Hamburger Menu Button
======================================= */
.hamburger { 
  width: 30px; 
  height: 20px; 
  position: relative; 
  cursor: pointer; 
}
.hamburger span {
  position: absolute; 
  width: 100%; 
  height: 2px; 
  background: #333; 
  left: 0;
  border-radius: 2px;
}

.hamburger span:nth-child(1) { 
  top: 0; 
  transition: top 0.2s ease 0.2s, transform 0.2s ease 0s; 
}
.hamburger span:nth-child(2) { 
  top: 9px; 
  transition: opacity 0.2s ease 0.2s; 
}
.hamburger span:nth-child(3) { 
  top: 18px; 
  transition: top 0.2s ease 0.2s, transform 0.2s ease 0s; 
}

.hamburger.is-open span:nth-child(1) { 
  top: 9px; 
  transform: rotate(45deg); 
  transition: top 0.2s ease 0s, transform 0.2s ease 0.2s; 
}
.hamburger.is-open span:nth-child(2) { 
  opacity: 0; 
  transition: opacity 0.2s ease 0s; 
}
.hamburger.is-open span:nth-child(3) { 
  top: 9px; 
  transform: rotate(-45deg); 
  transition: top 0.2s ease 0s, transform 0.2s ease 0.2s; 
}

/* =======================================
   Global Navigation Menu
======================================= */
.nav-menu {
  position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;
  background: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999;
}
.nav-menu.is-open { right: 0; }
.nav-menu ul { list-style: none; padding: 0; text-align: center; }
.nav-menu li { margin: 20px 0; font-size: 18px; }

/* =======================================
   Hero Section
======================================= */
#hero {
  position: relative; width: 100%; height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background-color: #ea512d; overflow: hidden;
}

/* --- 1. 背景画像（少し遅れて現れる） --- */
.hero-image {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; opacity: 0; transform: scale(1.1);
  /* テキストが消え始める頃（2秒後）にジワっと表示を開始 */
  transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1) 2s, opacity 2s ease 2s;
}
.is-active .hero-image { opacity: 1; transform: scale(1); }

/* --- 2. テキスト（現れて、止まって、消える） --- */
.hero-text {
  position: absolute;
  z-index: 3; font-size: 42px; font-weight: bold;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  opacity: 0;
}
.is-active .hero-text {
  /* 3.5秒かけて fadeInOut アニメーションを実行 */
  animation: fadeInOut 3.5s ease forwards;
}
@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(20px); }
  15%  { opacity: 1; transform: translateY(0); }    /* 0.5秒頃：スッと現れる */
  70%  { opacity: 1; transform: translateY(0); }    /* 2.4秒頃まで：そのまま読ませる */
  100% { opacity: 0; transform: translateY(-20px); } /* 3.5秒で：上へスーッと消える */
}

/* --- 3. 新しく重ねる画像（一番最後に現れる） --- */
.hero-front-image {
  position: absolute; 
  z-index: 4; 
  width: 80%; max-width: 450px; 
  opacity: 0; transform: translateY(45px);
  /* テキストが完全に消え終わる頃（3.5秒後）にフェードインを開始 */
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 3.5s, opacity 1.5s ease 3.5s;
}
.is-active .hero-front-image {
  opacity: 1; transform: translateY(25px);
}

/* --- 4. 波のセパレーター --- */
.wave-separator {
  position: absolute;
  bottom: -1px; /* 隙間ができるのを防ぐために-1pxに設定 */
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 5; /* 他の画像より手前に表示させる */
}

.wave-separator svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px; /* 波の高さをここで調整（スマホの時は小さくするなど変更可能） */
}

.wave-separator .shape-fill {
  /* 波の色。次のセクション（body）の背景色「#fcfcfc」と同じにすることで、自然に繋がります */
  fill: #ea512d; 
}

/* =======================================
   What's C-LAND?
======================================= */
.whats-cland { text-align: center; line-height: 2.2; }

/* =======================================
   About us (キャラクター紹介 - 切り替え式)
======================================= */
.character-section {
  max-width: 800px;
  margin: 0 auto;
}

/* �@ アイコンナビゲーション */
.char-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  display: flex;
  justify-content: center;
  gap: 15px;
}
.char-nav li {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); /* 選択されていない時は半透明の白 */
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}
.char-nav li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.char-nav li:hover img {
  transform: scale(1); /* マウスを乗せると少し大きくなる */
}
/* 選択されているアイコンのスタイル */
.char-nav li.is-active {
  background: #00aa7b;
  border-color: #fef3e4; /* 枠線をベージュにして目立たせる */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.char-nav li.is-active img {
  transform: scale(1.1);
}

/* �A キャラクター詳細表示エリア */
.char-display-area {
  /* background: #fff;
  border-radius: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); */
  padding: 40px;
  position: relative;
  min-height: 350px; /* 切り替えた時に高さがガタガタしないように確保 */
}
.char-detail {
  display: none; /* 初期状態はすべて隠す */
  animation: fadeIn 0.5s ease forwards;
}
.char-detail.is-show {
  display: flex; /* is-showクラスがついたものだけ表示（横並び） */
  align-items: center;
  gap: 30px;
}

/* 詳細エリアの中身 */
.char-detail-img {
  flex: 0 0 40%;
  text-align: center;
}
.char-detail-img img {
  max-width: 100%;
  border-radius: 20px;
}
.char-detail-text {
  flex: 1;
  color: #333; /* オレンジ背景の中の白箱なので、文字は黒に戻す */
}
.char-detail-text h3 {
  color: #ea512d; /* 名前をブランドカラーのオレンジに */
  font-size: 28px;
  margin: 0 0 15px 0;
}
.char-detail-text p {
  line-height: 1.8;
  font-size: 16px;
  margin: 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .char-nav li { width: 50px; height: 50px; }
  .char-display-area { padding: 30px 20px; }
  .char-detail.is-show { flex-direction: column; text-align: center; gap: 20px;}
  .char-detail-img { flex: none; width: 100%; max-width: 200px; margin: 0 auto;}
}

/* =======================================
   About us (キャラクターアイコンのスマホ表示修正)
======================================= */
/* 共通設定（絶対に潰れないようにする魔法） */
.char-nav li {
  flex-shrink: 0 !important; /* ★画面が狭くても絶対に縮まないようにする */
  width: 70px; /* PCでの基本サイズ */
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}

.char-nav li img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の縦横比を保って綺麗に埋める */
}

/* スマホ表示の調整（横にスワイプできるようにする） */
@media (max-width: 768px) {
  .char-nav {
    display: flex;
    justify-content: flex-start; /* 左端から並べる */
    flex-wrap: nowrap; /* 折り返さない */
    gap: 15px; /* アイコン同士の隙間 */
    overflow-x: auto; /* 横スクロール（スワイプ）を可能にする */
    padding: 10px 0 20px 0; /* スクロールしやすくするために上下に余白 */
    -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる */
  }

  /* スマホのスクロールバーを見えなくしてスッキリさせる */
  .char-nav::-webkit-scrollbar {
    display: none;
  }

  .char-nav li {
    width: 60px; /* スマホでのアイコンサイズ（少し小さめ） */
    height: 60px;
  }
}

/* =======================================
   Our Islands
======================================= */
.islands-map-wrapper { text-align: center; margin-bottom: 40px; }
.islands-map {
  width: 100%; max-width: 800px; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.islands-desc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;
}
.island-desc-item h3 {
  color: #2980b9; margin-bottom: 10px; font-size: 20px; display: flex; align-items: center;
}
.island-desc-item h3::before { content: "�沒�"; margin-right: 8px; font-size: 18px; }
.island-desc-item p { line-height: 1.6; font-size: 15px; color: #555; margin: 0; }

/* =======================================
   Our islands (マップとピン)
======================================= */
.map-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.main-map {
  width: 100%;
  height: auto;
}

/* ピンの共通設定 */
.map-pin {
  position: absolute;
  width: 40px; /* ピンのサイズ。スマホの時は下で小さくしています */
  cursor: pointer;
  /* ピンの下端（尖っているところ）が正確な座標を指すように調整 */
  transform: translate(-50%, -100%); 
  transition: transform 0.2s ease;
  z-index: 10;
}
.map-pin:hover {
  transform: translate(-50%, -110%) scale(1.1); /* マウスを乗せると少し跳ねる */
}
.map-pin img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* ピンにうっすら影をつける */
}

/* ★各ピンの位置（画像の縦横比からのパーセンテージ）★ */
.pin-ebis {
  top: 35%;
  left: 50%;
}
.pin-abeno {
  top: 65%;
  left: 78%;
}
.pin-forgotten {
  top: 70%;
  left: 18%;
}


/* =======================================
   ポップアップ（モーダル）
======================================= */
.modal-overlay {
  display: none; /* 初期状態は隠しておく */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-content {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  /* ふわっと現れるアニメーション */
  animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #f0f0f0;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s;
}
.modal-close:hover {
  background: #e0e0e0;
}

.modal-body {
  text-align: center;
}
.modal-body h3 {
  color: #ea512d; /* C-LANDのオレンジ */
  font-size: 28px;
  margin: 0 0 15px 0;
}
.modal-body p {
  color: #333;
  line-height: 1.8;
  margin: 0;
  font-size: 16px;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .map-pin {
    width: 30px; /* スマホではピンを小さくして邪魔にならないように */
  }
  .modal-content {
    padding: 30px 20px;
  }
  .modal-body h3 {
    font-size: 24px;
  }
  .modal-body p {
    font-size: 14px;
  }
}

/* =======================================
   Our Life (Instagram)
======================================= */
.ig-placeholder {
  background: #eaeaea; height: 300px; border-radius: 12px;
  display: flex; justify-content: center; align-items: center; color: #888;
}

/* =======================================
   Our life (Instagram Gallery)
======================================= */
.insta-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
  gap: 15px; /* 写真と写真の隙間 */
  margin-bottom: 40px;
}

.insta-item {
  position: relative;
  display: block;
  border-radius: 15px; /* 角を丸くして優しく */
  overflow: hidden;
  aspect-ratio: 1 / 1; /* 完全な正方形にする魔法のコード */
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を正方形いっぱいに敷き詰める */
  transition: transform 0.3s ease;
}

/* マウスを乗せた時の黒い半透明カバーとハートマーク */
.insta-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* 最初は透明 */
  transition: opacity 0.3s ease;
}

.insta-overlay span {
  color: #fff;
  font-size: 40px;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.insta-item:hover img {
  transform: scale(1.05); /* 画像が少しズームする */
}
.insta-item:hover .insta-overlay {
  opacity: 1; /* 黒いカバーが表示される */
}
.insta-item:hover .insta-overlay span {
  transform: translateY(0); /* ハートが下からフワッと上がる */
}

/* Instagramボタン */
.btn-wrapper {
  text-align: center;
}

.btn-insta {
  display: inline-block;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); /* Instagram風グラデーション */
  color: #fff !important;
  font-weight: bold;
  font-size: 16px;
  padding: 15px 40px;
  border-radius: 30px; /* 丸いボタン */
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(220, 39, 67, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-insta:hover {
  transform: translateY(-3px); /* 浮き上がる */
  box-shadow: 0 8px 20px rgba(220, 39, 67, 0.5);
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .insta-gallery {
    grid-template-columns: repeat(2, 1fr); /* スマホでは少し大きめに2列表示 */
    gap: 10px;
  }
}

/* =======================================
   Contact (お問い合わせフォーム)
======================================= */
.contact-form-wrapper {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.contact-desc {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.contact-form .form-group {
  margin-bottom: 25px;
  text-align: left;
}

.contact-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.contact-form .required {
  background: #ea512d;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
  vertical-align: middle;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit; /* Googleフォントを適用 */
  box-sizing: border-box;
  transition: border-color 0.3s;
}

/* 入力中に枠線をオレンジにする */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #ea512d;
}

.form-submit {
  text-align: center;
  margin-top: 30px;
}

.btn-submit {
  background: #ea512d;
  color: #fff;
  border: none;
  padding: 15px 50px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 5px 15px rgba(234, 81, 45, 0.3);
  font-family: inherit;
}

.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(234, 81, 45, 0.5);
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .contact-form-wrapper {
    padding: 20px; /* スマホでは内側の余白を少し狭くする */
  }
}

/* =======================================
   同意チェックボックスの装飾
======================================= */
.contact-form .agreement {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
}

.contact-form .agreement label {
  display: inline-block;
  font-weight: normal;
  cursor: pointer;
  font-size: 14px;
}

.contact-form .agreement input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
  transform: scale(1.2); /* チェックボックスを少し大きくして押しやすくする */
}

/* =======================================
   Footer Wave & Footer (フッターと動く波)
======================================= */
.footer-wave {
  position: relative;
  z-index: 10; /* ★追加：前のセクションより手前に出す */
  width: 100%;
  height: 100px;
  background: transparent;
  overflow: hidden;
  line-height: 0;
  margin-top: -50px; /* ★追加：波を少し上にずらして白い隙間を消す */
  margin-bottom: -5px; /* 下のフッターとの間に隙間ができるのを防ぐ */
}

.waves {
  position: relative;
  width: 100%;
  height: 100px;
  min-height: 100px;
  max-height: 150px;
}

/* 4つの波のアニメーション設定（速度をズラしてゆらゆらさせる） */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

/* フッター本体 */
#footer {
  background-color: #48c6ef; /* 波の一番濃い色と同じ色（海の中） */
  color: #fff;
  text-align: center;
  padding: 40px 20px 60px;
}

/* ★追加：フッターリンク（プライバシーポリシー・利用規約） */
#footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

#footer .footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s;
}

#footer .footer-links a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ★追加：SNSアイコンの並び調整 */
#footer .sns-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

#footer .sns-icons a {
  color: #fff; /* 水色背景に映えるようにアイコンを白にする */
  transition: transform 0.2s, opacity 0.2s;
}

#footer .sns-icons a:hover {
  transform: translateY(-3px); /* マウスを乗せると少し浮く */
  opacity: 0.8;
}

/* スマホ表示の波の高さ調整 */
@media (max-width: 768px) {
  .footer-wave {
    height: 60px;
    margin-top: -30px; /* ★追加：スマホ用の食い込み幅を調整 */
  }
  .waves {
    height: 60px;
    min-height: 60px;
  }
  
  /* スマホの時はリンクを縦並びにする */
  #footer .footer-links {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
  }
}