/* 全体のリセット */
body {
  margin: 0; /* 余白を完全にリセット */
  padding: 0; /* 内側の余白もリセット */
  font-family: "Noto Sans JP", "Helvetica Neue", "Zen Kurenaido", "Meiryo",
    "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial",
    "Yu Gothic", sans-serif;
  overflow-x: hidden;
  background-color: #e6dfdb;
  color: #3e3e3e;
}
svg {
  vertical-align: bottom;
}
/* ヒーローセクション */
.hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* アイコンがはみ出せるように設定 */
}

/* 肉球アイコン */
.menu-icon {
  position: fixed; /* スクロールしても固定される */
  top: clamp(2%, 4vw, 4%); /* 2%〜4vw〜4%で動的に調整 */
  right: clamp(55px, 8%, 77px); /* 最小10px、最大50px、ビュー幅に応じて変動 */
  width: 100px; /* アイコンサイズはそのまま */
  height: auto;
  cursor: pointer;
  z-index: 1001; /* アイコンを前面に表示 */
  display: flex; /* アイコンとテキストを縦並び */
  flex-direction: column;
  align-items: center; /* 水平中央揃え */
  justify-content: center; /* 垂直中央揃え */
  pointer-events: auto; /* クリック可能にする */
}

/* 肉球アイコンの画像 */
.menu-icon img {
  display: block;
  width: 100%; /* 親要素に合わせて表示 */
  height: auto;
}

/* 肉球アイコン下のテキスト */
.menu-icon #menuText {
  margin-top: 5px;
  font-size: clamp(12px, 1.5vw, 16px);
  color: rgb(161, 111, 111);
  text-align: center;
  white-space: nowrap;
}

/* 猫の腕メニュー */
.menu {
  position: fixed;
  top: -100%; /* 初期状態では隠す */
  right: 0;
  width: clamp(
    200px,
    25vw,
    250px
  ); /* 最小200px, ビューポート幅に応じて調整, 最大250px */
  height: 100%; /* 画面全体の高さ */
  background: url("images/menuArm.svg") no-repeat center top;
  background-size: contain;
  z-index: 1000;
  transition: top 0.5s ease;
}

.menu.show {
  top: 0; /* メニュー表示時 */
}

/* メニュー内のリストスタイル */
.menu ul {
  list-style: none;
  margin: 180px 0 0; /* 猫の腕の肉球部分の下に配置 */
  padding: 0;
  text-align: center;
}
.menu ul li {
  margin-top: clamp(10px, 2vw, 20px);
  margin-bottom: clamp(10px, 2vw, 20px);
}

/* Noto Serif JPをメニュー項目に適用 */
.menu ul li a {
  /* フォントを適用 */
  /* font-optical-sizing: auto; */
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color: #896a75;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: bold;
  transition: color 0.3s;
  font-family: "Kaisei Decol", serif;
}

.menu ul li a:hover {
  color: #ff8b8b; /* ホバー時の色 */
}

/* ヒーロー画像 */
.hero-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative; /* ビデオを適切に配置 */
  z-index: 1; /* ビデオをアイコンの背面に配置 */
}

.hero-image {
  position: relative; /* 必要に応じて設定 */
  z-index: 1; /* ビデオの z-index を低く設定 */
  overflow: hidden; /* はみ出しの影響を抑えるために確認 */
  animation: fadeOut 1s ease-out forwards;
}

/* コンセプトセクション全体 */
.concept-section {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  background-image: url("images/bg4.jpg"); /* フォールバック */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* Fixed の代わりに Scroll */
  z-index: -1; /* 背景画像を後ろに配置 */
  background-image: none;
}

@supports (background-image: url("images/bg4.webp")) {
  .concept-section {
    background-image: url("images/bg4.webp"); /* WebP を優先適用 */
  }
}

/* コンセプトセクションのコンテンツ部分 */
.concept-content {
  opacity: 0; /* 初期は非表示 */
  transform: translateY(50px); /* 少し下にずらす */
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 表示時のスタイル */
.concept-content.visible {
  opacity: 1; /* 表示 */
  transform: translateY(0); /* 元の位置に戻す */
}

/* ヒーローイメージとタイトル */
.hero-image-concept {
  position: relative;
  text-align: center;
  max-width: 100%; /* 幅を画像に合わせる */
  margin: 0 auto;
}

.hero-image-concept picture {
  display: block; /* ブラウザ間のデフォルトの違いを防ぐために設定 */
  width: 100%; /* 親要素いっぱいに広げる */
}

/* 初期状態: 画像は透明で下にずれた状態 */
.hero-image-concept img {
  width: 100%; /* 親要素に合わせて表示 */
  height: auto; /* アスペクト比を維持 */
  display: block; /* インライン要素ではなくブロックとして扱う */
  margin-top: clamp(100px, 10vw, 160px);
  transform: translateY(20px); /* 少し下にずらす */
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.5s cubic-bezier(0.25, 1, 0.5, 1); /* アニメーションの設定 */
}

/* ビューポート内に入ったときに表示 */
.hero-image-concept img.visible {
  opacity: 1; /* 表示 */
  transform: translateY(0); /* 元の位置に移動 */
}

.concept-title {
  position: absolute;
  font-family: "Noto Serif JP", serif;
  margin-bottom: 10px;
  font-size: clamp(0.8rem, 4vw, 2.5rem);
  word-break: keep-all;
  font-weight: bold;
  color: #d6d6d6;
  text-align: center;
  top: 34%; /* 画像の中央上あたり */
  left: 68%;
  transform: translateX(-50%);
}

.concept-catch {
  position: absolute;
  top: clamp(64%, 38%, 45%);
  left: 68%;
  transform: translateX(-50%);
  font-family: "Zen Kurenaido", serif; /* Zen Kurenaido フォントを適用 */
  font-size: clamp(0.7rem, 3vw, 1.5rem);
  word-break: keep-all;
  font-style: normal; /* フォントスタイルを正規化 */
  font-weight: 400; /* Zen Kurenaido のウェイトを指定 */
  color: #252320; /* 柔らかいグレー系ブラウン */
  text-align: center;
  opacity: 0.6; /* 少し透明感 */
  margin-bottom: 20px;
}
/* 概要テキスト */
.concept-text {
  margin: 2rem 0;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  line-height: 1.6;
}

/* 店内写真のギャラリー */
.concept-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #3e3e3e; /* ダークグレー */
  line-height: 1.6;
  text-align: justify;
}

.concept-gallery img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0; /* 初期は非表示 */
  transform: translateY(20px); /* 少し下にずらす */
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.concept-gallery img.visible {
  opacity: 1; /* 表示 */
  transform: translateY(0); /* 元の位置に戻す */
}
.cat-divider {
  margin: 0; /* 余白を完全にリセット */
  width: 100%;
  height: 200px;
  background-image: url("images/section.svg");
  background-repeat: repeat-x;
  position: relative;
  z-index: 2;
  image-rendering: crisp-edges; /* アンチエイリアスを最小化 */
}

/* ニュースセクション */
#news-section {
  padding: 50px 20px;
  background-color: #f8f5f0;
  margin-bottom: 200px;
}

.section-title {
  text-align: center;
  font-family: "Kaisei Decol", serif;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #4a403a;
}

/* ニュースコンテナ */
.news-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 各ニュースカードの間隔 */
  max-width: 800px; /* 横幅を制限 */
  margin: 0 auto; /* 中央揃え */
  max-height: 60vh; /* セクションの高さを制限 */
  overflow-y: auto; /* 縦スクロールを有効化 */
  padding-right: 10px; /* スクロールバーのための余白 */

  /* Firefox用スクロールバー設定 */
  scrollbar-color: #faa7a7c7 #f8f5f0; /* スクロールバーの色とトラック背景色 */
  scrollbar-width: thin; /* スクロールバーの幅 */
  /* &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f8f5f0;
  }

  &::-webkit-scrollbar-thumb {
    background: #faa7a7c7;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #faa7a7;
  } */
}

/* ニュースカード */
.news-card {
  background-color: #4a403a;
  color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(67, 47, 62, 0.152);
}

/* ニュースタイトル */
.news-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #e5dccc;
}

/* ニュース本文 */
.news-content {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* READ MORE リンク */
.read-more {
  display: inline-block;
  font-size: 0.9rem;
  color: #ffd700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-bottom 0.3s;
}

.read-more:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}

/* 猫スタッフ紹介セクション */
#cats-section {
  padding: 50px 20px;
  background-color: #f8f5f0;
  text-align: center;
  background-size: cover; /* 背景全体を覆う */
  background-size: contain; /* 背景を要素内に収める */
  background-size: 120%; /* 背景画像を幅の50%の大きさにする */
  background-position: center; /* 背景を中央に配置 */
  margin-bottom: 200px;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #4a403a;
}

/* 猫ギャラリー */
.cats-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
  text-align: center;
}

.cat-thumbnail {
  width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* アスペクト比を維持 */
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;

  /* 追加設定 */
  object-fit: contain;
  aspect-ratio: 1 / 1; /* 正方形に固定 */
  display: block; /* インライン要素ではなくブロック要素として扱う */
  aspect-ratio: 1 / 1; /* アスペクト比を1:1に固定 */
}

/* サムネイルホバー時のエフェクト */
.cat-thumbnail:hover {
  transform: scale(1.05); /* 少し拡大 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* モーダルスタイル */
.cat-modal {
  display: none; /* 初期は非表示 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  /* max-width: 90%; */
  max-width: 56%;
  max-height: 90%;
  overflow-y: auto;
}

.modal-content img {
  border-radius: 8px;
  max-height: 86vh;
  width: auto;
  max-width: 100%;
  margin-bottom: 20px;
}
.image-container {
  position: relative;
}

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

/* モーダルの閉じるボタン */
.close-btn {
  position: absolute;
  top: 10px; /* 画像の上部からの距離 */
  right: 10px; /* 画像の右端からの距離 */
  background: #fff; /* 背景色 */
  border: none;
  color: #333;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 0;
}

.close-btn:hover {
  background: #f8d7da;
  color: #900;
}

/* business-hours セクションの基本スタイル */
.business-hours {
  text-align: center;
  padding: 40px; /* 内側の余白を広げる */
  background-color: #f4f4f4;
  margin: 80px auto; /* 上下の余白を増やして、他のセクションと間隔をとる */
  border-radius: 8px;
  max-width: 1000px; /* セクションの幅を広げる */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.business-hours h2 {
  font-size: 32px; /* 見出しを少し大きくして目立たせる */
  font-family: "Kaisei Decol", serif;
  color: #5e4a3f;
  margin-bottom: 30px; /* 見出しと内容の間隔を広げる */
}

.hours p {
  font-size: 20px; /* 営業時間の文字を少し大きく */
  margin: 10px 0; /* 営業時間の各行の間隔を広げる */
}

.hours span {
  font-weight: bold;
  font-size: 22px; /* 営業時間をさらに目立たせる */
}

/* 料金表をカード形式に変更 */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* 自動で列を調整 */
  gap: 20px; /* カード間の余白 */
  margin-top: 20px; /* 上部に余白 */
}

.pricing-card {
  background-color: #fff; /* カードの背景色 */
  border: 1px solid #ccc; /* カードの境界線 */
  border-radius: 8px; /* 角を丸くする */
  padding: 20px; /* カード内の余白 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加して立体感 */
  text-align: center; /* テキストを中央揃え */
  font-family: "Noto Serif JP", serif; /* フォント */
  transition: transform 0.3s, box-shadow 0.3s; /* ホバーアニメーション */
}

.pricing-card:hover {
  transform: scale(1.03); /* ホバー時に少し拡大 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* ホバー時の影 */
}

/* カードのタイトル */
.pricing-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #5e4a3f;
}

/* 料金情報 */
.pricing-card p {
  font-size: 1rem;
  margin: 5px 0;
  color: #3e3e3e;
}

/* 平日・土日祝の料金を強調 */
.pricing-card p span {
  font-weight: bold;
  color: #8b5e5e;
}

.note {
  font-size: 14px; /* 注意書きの文字サイズを少し大きく */
  color: #8b5e5e;
  display: block;
  margin-top: 5px;
}
.cafe-rules {
  padding: 40px;
  background-color: #f9f6f4;
  margin: 40px auto;
  max-width: 900px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: "Arial", sans-serif;
}

.cafe-rules h2 {
  font-size: 32px;
  font-family: "Kaisei Decol", serif;
  color: #5e4a3f;
  text-align: center;
  margin-bottom: 20px;
}

.rule-section {
  margin-bottom: 30px;
}

.rule-section h3 {
  font-size: 24px;
  color: #8b5e5e;
  margin-bottom: 10px;
}

.rule-section ul {
  list-style-type: disc;
  padding-left: 20px;
  line-height: 1.6;
  color: #3e3e3e;
}

.rule-section ul li {
  margin-bottom: 8px;
}

.important-note {
  font-size: 16px;
  color: #c94e4e;
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
}

.access-section {
  padding: 40px;
  background-color: #c5b7b7;
  margin: 40px auto;
  max-width: 900px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: "Arial", sans-serif;
  text-align: center;
}

.access-section h2 {
  font-size: 32px;
  font-family: "Kaisei Decol", serif;
  color: #8b5e5e;
  margin-bottom: 20px;
}

.access-info p {
  font-size: 18px;
  margin: 5px 0;
  color: #2a0013;
}

.map-container {
  margin-top: 20px;
  border: 2px solid #e5a1a1;
  border-radius: 8px;
  overflow: hidden;
}

.access-directions {
  margin-top: 20px;
  text-align: left;
}

.access-directions h3 {
  font-size: 24px;
  font-family: "Kaisei Decol", serif;
  color: #8b5e5e;
  margin-bottom: 10px;
}

.access-directions ol {
  list-style-type: decimal;
  padding-left: 20px;
  color: #634d58;
  line-height: 1.6;
}

.access-directions ol li {
  margin-bottom: 10px;
}

.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  background-color: #e6dfdb;
  z-index: 2;
}

.contact-bg {
  background-color: #594b47;
  width: 100%;
  max-width: 800px;
  padding: 50px;
  text-align: center;
  height: 700px;
  border-radius: 20px; /* 角を丸くする */
  z-index: 0;
}

.contact-bg h2 {
  color: #ffffff;
  font-size: 28px;
  font-family: "Kaisei Decol", serif;
  margin-bottom: 20px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
}

.contact-form label {
  margin-bottom: 10px;
  font-size: 16px;
  align-self: flex-start;
}

.contact-form .required {
  color: #ff9ba3;
  font-size: 14px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  max-width: 600px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.contact-form textarea:focus {
  border-color: #ff9ba3;
  outline: none;
}

.contact-form textarea {
  resize: none;
}

.submit-btn {
  background-color: #ff9ba3;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 25px;
}

.submit-btn:hover {
  background-color: #e88b94;
}

.footer-cat {
  position: relative;
  height: 200px;
  overflow: hidden;
  margin-left: -25px;
}

/* アニメーションを20秒に変更 */
.cat-link {
  position: absolute;
  left: -200px; /* 猫が画面外に隠れる */
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  animation: slide-in-cat 15s infinite ease-in-out; /* アニメーションを20秒に設定 */
}

.cat-image img {
  height: 150px;
  width: auto;
}

.speech-bubble img {
  position: relative;
  margin-left: -134px;
  margin-top: -40px;
  width: 120px; /* 吹き出しのサイズ調整 */
  opacity: 0; /* 最初は非表示 */
  transform: scale(0.8); /* 小さく縮小 */
  animation: fade-in-bubble 15s infinite ease-in-out; /* 無限ループで動作 */
  animation-delay: 3s; /* 吹き出しが猫のスライド後に表示されるように遅延 */
}

@keyframes slide-in-cat {
  0% {
    left: -200px; /* 画面外に隠れる */
  }
  30% {
    left: 20px; /* 猫が完全に表示される位置 */
  }
  70% {
    left: 20px; /* 猫がしばらく表示される */
  }
  85% {
    left: -80px; /* ゆっくり戻り始める */
  }
  100% {
    left: -200px; /* 完全に画面外に戻る */
  }
}

@keyframes fade-in-bubble {
  0%,
  20% {
    opacity: 0; /* 表示されない */
    transform: scale(0.8); /* 小さい状態 */
  }
  30%,
  60% {
    opacity: 1; /* 表示される */
    transform: scale(1); /* 通常サイズ */
  }
  70%,
  100% {
    opacity: 0; /* 消える */
    transform: scale(0.8); /* 元の状態に戻る */
  }
}

.footer-decoration {
  position: relative;
  width: 100vw; /* 画面幅いっぱい */
  background: url("images/matinami.svg") repeat-x; /* 画像を横方向に繰り返す */
  background-size: auto 100%; /* 高さを調整し、横方向に繰り返し */
  background-position: top center; /* 繰り返しの位置を調整 */
  height: 100px; /* 必要に応じて高さを指定 */
  z-index: 100;
  margin-top: -135px;
  image-rendering: crisp-edges; /* アンチエイリアスを最小化 */
}

.footer-decoration img {
  width: 100vw; /* SVG画像を画面幅いっぱいに */
  max-width: 100%; /* 不意に拡大しすぎるのを防ぐ */
  height: auto; /* 縦横比を維持 */
  display: block;
}

.footer {
  background-color: #594b47; /* お問い合わせフォームと同じ背景色 */
  color: #9b6d6d;
  text-align: center;
  padding: 20px;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-content p {
  margin: 0;
  font-size: 16px;
}
.back-to-top {
  display: none;
  position: fixed;
  bottom: 50px; /* ボタンをさらに上に移動 */
  right: 40px; /* 右端から少し左に寄せる */
  width: 80px; /* 画像を大きくする */
  height: 80px; /* アスペクト比を維持するため、同じ値に設定 */
  z-index: 100;
  cursor: pointer; /* カーソルをポインターに */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.back-to-top img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 画像全体を表示 */
}

.back-to-top.show {
  display: block; /* スクロール時に表示 */
  opacity: 1;
  transform: scale(1);
}

.back-to-top.hide {
  opacity: 0;
  transform: scale(0.8);
}