/* ===================================================== */
/* Tailwind CSS 4 Theme Configuration                    */
/* ===================================================== */
@theme {
  /* カスタムカラー */
  --color-hoiku-cream: #FFF9F0;
  --color-hoiku-peach: #FFE8D6;
  --color-hoiku-coral: #FF9B7A;
  --color-hoiku-orange: #FF7F50;
  --color-hoiku-green: #7BC47F;
  --color-hoiku-mint: #B8E5BE;
  --color-hoiku-sky: #87CEEB;
  --color-hoiku-lavender: #E8D5E8;
  --color-hoiku-brown: #8B6B4F;

  /* カスタムフォント */
  --font-maru: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;

  /* カスタムアニメーション */
  --animate-float: float 6s ease-in-out infinite;
  --animate-wiggle: wiggle 2s ease-in-out infinite;
  --animate-bounce-slow: bounce 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

/* ===================================================== */
/* Alpine.js のチラ見え防止                               */
/* ===================================================== */
[x-cloak] {
  display: none !important;
}

/* ===================================================== */
/* フォント設定                                           */
/* ===================================================== */
body {
  font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
}

body, html {
  min-height: 100vh;
}

/* ===================================================== */
/* 背景パターン                                           */
/* ===================================================== */
.bg-pattern {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(123, 196, 127, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 155, 122, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(135, 206, 235, 0.08) 0%, transparent 40%);
}

/* ===================================================== */
/* ヘッダーボーダー（カラフルライン）                      */
/* ===================================================== */
.header-border {
  background: linear-gradient(90deg, #FF9B7A, #7BC47F, #87CEEB, #E8D5E8);
  height: 3px;
}

/* ===================================================== */
/* グラデーションユーティリティ（カスタムカラー用）         */
/* Tailwind 4ではカスタムカラーのfrom/via/toが効かないため */
/* ===================================================== */

/* ロゴ背景：coral → orange */
.gradient-logo {
  background: linear-gradient(to bottom right, #FF9B7A, #FF7F50);
}

/* ヒーローテキスト：coral → orange */
.gradient-text-hero {
  background: linear-gradient(to right, #FF9B7A, #FF7F50);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 行事セクション背景：mint → transparent */
.gradient-section-mint {
  background: linear-gradient(to bottom, rgba(184, 229, 190, 0.2), transparent);
}

/* ギャラリーカード背景 */
.gradient-gallery-sky {
  background: linear-gradient(to bottom right, rgba(135, 206, 235, 0.2), rgba(224, 242, 254, 0.3));
}

.gradient-gallery-mint {
  background: linear-gradient(to bottom right, rgba(184, 229, 190, 0.2), rgba(123, 196, 127, 0.2));
}

.gradient-gallery-peach {
  background: linear-gradient(to bottom right, rgba(255, 232, 214, 0.3), rgba(255, 155, 122, 0.2));
}

/* ギャラリーオーバーレイ：brown → transparent */
.gradient-overlay-brown {
  background: linear-gradient(to top, rgba(139, 107, 79, 0.8), transparent);
}

/* CTA セクション背景：brown系 */
.gradient-cta-brown {
  background: linear-gradient(to bottom right, #8B6B4F, #8B6B4F, rgba(139, 107, 79, 0.9));
}

/* フッター上部ライン */
.gradient-footer-line {
  background: linear-gradient(to right, #FF9B7A, #7BC47F, #87CEEB);
}

/* ===================================================== */
/* ボタンスタイル                                         */
/* ===================================================== */
.btn-primary {
  background: linear-gradient(135deg, #FF7F50 0%, #FF9B7A 100%);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #FF6B3D 0%, #FF8A66 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(255, 127, 80, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, #7BC47F 0%, #B8E5BE 100%);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #6AB36E 0%, #A8D5AD 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(123, 196, 127, 0.4);
}

/* ===================================================== */
/* カードホバー                                           */
/* ===================================================== */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(139, 107, 79, 0.15);
}

/* ===================================================== */
/* アイコンバッジ                                         */
/* ===================================================== */
.icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ===================================================== */
/* セクションタイトル装飾                                  */
/* ===================================================== */
.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FF9B7A, #7BC47F);
  border-radius: 2px;
}

/* ===================================================== */
/* テキスト装飾                                  */
/* ===================================================== */
.text-outline-white {
  text-shadow:
    -1.5px -1.5px 0 #fff,
     1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff,
     1.5px  1.5px 0 #fff;
}
/* ===================================================== */
/* テキストの行数制限（line-clamp）                        */
/* ===================================================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===================================================== */
/* =============== info / warn / success / danger ====== */
/* ===================================================== */
.info-box,
.warning-box,
.success-box,
.danger-box {
  /* 共通ボックスレイアウト */
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;

  /* 背景ぼかし＆影 */
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);

  /* 文字スタイル（共通） */
  font-size: 15px;
  line-height: 1.625;
  font-weight: 600;
  color: #334155;

  /* 中身を横並びにする用（アイコン＋テキストなど） */
  display: flex;
  align-items: center;
  gap: 0.25rem;

  /* 下にちょっとだけ余白 */
  margin-bottom: 0.25rem;
}

/* INFO */
.info-box {
  border-color: #bae6fd;
  background-color: rgba(240, 249, 255, 0.6);
}

.info-box::before {
  content: "ℹ️";
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* WARNING */
.warning-box {
  border-color: #fcd34d;
  background-color: rgba(255, 251, 235, 0.6);
}

.warning-box::before {
  content: "⚠️";
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* SUCCESS */
.success-box {
  border-color: #6ee7b7;
  background-color: rgba(236, 253, 245, 0.6);
}

.success-box::before {
  content: "✅";
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* DANGER */
.danger-box {
  border-color: #fca5a5;
  background-color: rgba(254, 242, 242, 0.6);
}

.danger-box::before {
  content: "🚨";
  font-size: 1.25rem;
  margin-right: 0.5rem;
}

/* ===================================================== */
/* ================== Blog 本文タイポ =================== */
/* ===================================================== */
.blog-content {
  font-size: 17px;
  line-height: 1.9;
  color: #1f2937;
}

@media (min-width: 640px) {
  .blog-content {
    font-size: 18px;
  }
}

/* 要素同士の縦の間隔 */
.blog-content > * + * {
  margin-top: 2rem;
}

/* TOC 用のアンカー */
.blog-content [data-heading] {
  scroll-margin-top: 7rem;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  font-weight: 600;
  color: #020617;
}

/* h2 */
.blog-content h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .blog-content h2 {
    font-size: 1.5rem;
  }
}

/* h3 */
.blog-content h3 {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .blog-content h3 {
    font-size: 1.25rem;
  }
}

/* h4 */
.blog-content h4 {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .blog-content h4 {
    font-size: 1.125rem;
  }
}

/* 段落 */
.blog-content p {
  margin-top: 1rem;
}

/* 画像 */
.blog-content figure {
  margin-top: 1.5rem;
}

.blog-content figure img {
  display: block;
  max-width: 100%;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background-color: rgba(241, 245, 249, 0.6);
}

.blog-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
}

/* 引用 */
.blog-content blockquote {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #38bdf8;
  background-color: rgba(240, 249, 255, 0.6);
  border-radius: 0 0.75rem 0.75rem 0;
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}

.blog-content blockquote p {
  margin-top: 0px;
}

/* リスト */
.blog-content ul,
.blog-content ol {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.blog-content ul {
  list-style: disc;
}

.blog-content ol {
  list-style: decimal;
}

.blog-content li + li {
  margin-top: 0.4rem;
}

/* テーブル */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
}

.blog-content thead {
  background-color: #f1f5f9;
  color: #475569;
}

.blog-content th,
.blog-content td {
  padding: 0.5rem 1rem;
  text-align: left;
}

.blog-content tbody tr + tr {
  border-top: 1px solid #e2e8f0;
}

.blog-content tbody tr:nth-child(2) {
  background-color: rgba(248, 250, 252, 0.6);
}

/* インラインコード */
.blog-content code {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: rgba(15, 23, 42, 0.9);
  font-size: 0.7rem;
  color: #e0f2fe;
}

/* ===================================================== */
/* ブログ画像：拡大前のホバーUI                           */
/* ===================================================== */
.blog-content img.blog-zoomable-image {
  cursor: zoom-in;
  border-radius: 0.75rem;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    filter 0.18s ease-out;
  box-shadow: 0 0 0 rgba(15, 23, 42, 0);
}

.blog-content img.blog-zoomable-image:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
  filter: saturate(1.05);
}

.blog-zoomable-wrapper {
  position: relative;
  display: inline-block;
}

.blog-zoomable-badge {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #e5e7eb;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
}

.blog-zoomable-wrapper:hover .blog-zoomable-badge {
  opacity: 1;
  transform: translateY(0);
}

.blog-zoomable-badge-icon {
  font-size: 13px;
  opacity: 0.9;
}

/* ===================================================== */
/* 画像拡大モーダル                                       */
/* ===================================================== */
.blog-image-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.blog-image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.blog-image-lightbox-panel {
  position: relative;
  max-width: 1100px;
  max-height: 90vh;
  width: min(90vw, 1100px);
  margin: 0 auto;
  z-index: 1;
}

.blog-image-lightbox-frame {
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(15, 23, 42, 0.06);
}

.blog-image-lightbox-image {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  cursor: zoom-out;
  transform: scale(1);
  transition:
    transform 0.25s ease-out,
    filter 0.25s ease-out;
}

/* 画像拡大中は、画面全体を白くぼかす */
body.image-lightbox-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 9998;
  pointer-events: none;
}

/* ===================================================== */
/* フォーム入力                                           */
/* ===================================================== */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: all 0.2s ease;
  background-color: white;
}

.form-input:focus {
  outline: none;
  border-color: #7BC47F;
  box-shadow: 0 0 0 3px rgba(123, 196, 127, 0.2);
}

.form-input::placeholder {
  color: #94a3b8;
}

.form-label {
  display: block;
  font-weight: 600;
  color: #8B6B4F;
  margin-bottom: 0.5rem;
}

.form-label .required {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #FF7F50 0%, #FF9B7A 100%);
  border-radius: 9999px;
}

/* ===================================================== */
/* FAQ アコーディオン                                     */
/* ===================================================== */
.faq-item {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 20px rgba(139, 107, 79, 0.1);
}

.faq-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #8B6B4F;
  transition: background-color 0.2s ease;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary:hover {
  background-color: rgba(255, 232, 214, 0.3);
}

.faq-summary .q-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, #FF7F50 0%, #FF9B7A 100%);
  color: white;
  font-weight: 700;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.faq-summary .arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
  color: #8B6B4F;
  opacity: 0.5;
}

details[open] .faq-summary .arrow {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem 4.5rem;
  color: #64748b;
  line-height: 1.8;
}

/* Bento Grid プレースホルダー背景 */
.gradient-placeholder-news {
  background: linear-gradient(to bottom right, rgba(255, 232, 214, 0.4), rgba(255, 155, 122, 0.2));
}

/* 将来の拡張用 - 他のセクション用プレースホルダー */
.gradient-placeholder-events {
  background: linear-gradient(to bottom right, rgba(184, 229, 190, 0.4), rgba(123, 196, 127, 0.2));
}

.gradient-placeholder-gallery {
  background: linear-gradient(to bottom right, rgba(135, 206, 235, 0.3), rgba(135, 206, 235, 0.1));
}
/* ===================================================== */
/* gallery/_entry.twig 用追加スタイル                     */
/* styles.css の末尾に追加してください                    */
/* ===================================================== */

/* Alpine.js x-cloak: 初期化前の要素を非表示 */
[x-cloak] {
    display: none !important;
}

/* ライトボックス: 最大高さ */
.max-h-\[85vh\] {
    max-height: 85vh;
}

/* ラジオボタンのカスタムスタイル（hoiku-coral） */
input[type="radio"]:checked {
    accent-color: #ff9b7a;
}

/* フォーカスリング */
input:focus {
    outline: none;
}

/* ===================================================== */
/* about/index.twig 用追加スタイル                        */
/* styles.css の末尾に追加してください                    */
/* ===================================================== */

/* ===== 背景色 ===== */
.bg-hoiku-cream { background-color: #FFF9F0; }
.bg-hoiku-peach { background-color: #FFE8D6; }
.bg-hoiku-coral { background-color: #FF9B7A; }
.bg-hoiku-green { background-color: #7BC47F; }
.bg-hoiku-mint { background-color: #B8E5BE; }
.bg-hoiku-sky { background-color: #87CEEB; }
.bg-hoiku-lavender { background-color: #E8D5E8; }
.bg-hoiku-brown { background-color: #8B6B4F; }

/* 背景色 with 不透明度 */
.bg-hoiku-cream\/50 { background-color: rgb(255 249 240 / 0.5); }
.bg-hoiku-peach\/20 { background-color: rgb(255 232 214 / 0.2); }
.bg-hoiku-peach\/30 { background-color: rgb(255 232 214 / 0.3); }
.bg-hoiku-peach\/50 { background-color: rgb(255 232 214 / 0.5); }
.bg-hoiku-mint\/30 { background-color: rgb(184 229 190 / 0.3); }
.bg-hoiku-mint\/50 { background-color: rgb(184 229 190 / 0.5); }
.bg-hoiku-sky\/20 { background-color: rgb(135 206 235 / 0.2); }
.bg-hoiku-sky\/30 { background-color: rgb(135 206 235 / 0.3); }
.bg-hoiku-lavender\/50 { background-color: rgb(232 213 232 / 0.5); }
.bg-hoiku-orange\/30 { background-color: rgb(255 127 80 / 0.3); }
.bg-hoiku-brown\/40 { background-color: rgb(139 107 79 / 0.4); }

/* ===== テキスト色 ===== */
.text-hoiku-cream { color: #FFF9F0; }
.text-hoiku-peach { color: #FFE8D6; }
.text-hoiku-coral { color: #FF9B7A; }
.text-hoiku-orange { color: #FF7F50; }
.text-hoiku-green { color: #7BC47F; }
.text-hoiku-mint { color: #B8E5BE; }
.text-hoiku-sky { color: #87CEEB; }
.text-hoiku-lavender { color: #E8D5E8; }
.text-hoiku-brown { color: #8B6B4F; }

/* テキスト色 with 不透明度 */
.text-hoiku-brown\/50 { color: rgb(139 107 79 / 0.5); }
.text-hoiku-brown\/60 { color: rgb(139 107 79 / 0.6); }
.text-hoiku-brown\/70 { color: rgb(139 107 79 / 0.7); }
.text-hoiku-brown\/80 { color: rgb(139 107 79 / 0.8); }
.text-hoiku-green\/70 { color: rgb(123 196 127 / 0.7); }
.text-hoiku-green\/80 { color: rgb(123 196 127 / 0.8); }

/* ===== ボーダー色 ===== */
.border-hoiku-cream { border-color: #FFF9F0; }
.border-hoiku-peach { border-color: #FFE8D6; }
.border-hoiku-coral { border-color: #FF9B7A; }
.border-hoiku-green { border-color: #7BC47F; }
.border-hoiku-brown { border-color: #8B6B4F; }

/* ボーダー色 with 不透明度 */
.border-hoiku-peach\/20 { border-color: rgb(255 232 214 / 0.2); }
.border-hoiku-peach\/30 { border-color: rgb(255 232 214 / 0.3); }
.border-hoiku-coral\/20 { border-color: rgb(255 155 122 / 0.2); }
.border-hoiku-green\/10 { border-color: rgb(123 196 127 / 0.1); }
.border-hoiku-green\/20 { border-color: rgb(123 196 127 / 0.2); }
.border-hoiku-green\/30 { border-color: rgb(123 196 127 / 0.3); }
.border-hoiku-sky\/30 { border-color: rgb(135 206 235 / 0.3); }

/* ===== divide色 ===== */
.divide-hoiku-cream > :not([hidden]) ~ :not([hidden]) { border-color: #FFF9F0; }
.divide-hoiku-mint\/30 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(184 229 190 / 0.3); }

/* ===== グラデーション from/to ===== */
.from-hoiku-peach { --tw-gradient-from: #FFE8D6; }
.from-hoiku-cream { --tw-gradient-from: #FFF9F0; }
.from-hoiku-mint { --tw-gradient-from: #B8E5BE; }
.from-hoiku-green { --tw-gradient-from: #7BC47F; }
.from-hoiku-sky { --tw-gradient-from: #87CEEB; }
.from-hoiku-coral { --tw-gradient-from: #FF9B7A; }

.from-hoiku-mint\/30 { --tw-gradient-from: rgb(184 229 190 / 0.3); }
.from-hoiku-peach\/50 { --tw-gradient-from: rgb(255 232 214 / 0.5); }
.from-hoiku-coral\/30 { --tw-gradient-from: rgb(255 155 122 / 0.3); }

.to-hoiku-cream { --tw-gradient-to: #FFF9F0; }
.to-hoiku-peach { --tw-gradient-to: #FFE8D6; }
.to-hoiku-mint { --tw-gradient-to: #B8E5BE; }
.to-hoiku-sky { --tw-gradient-to: #87CEEB; }
.to-hoiku-coral { --tw-gradient-to: #FF9B7A; }
.to-hoiku-orange { --tw-gradient-to: #FF7F50; }

.to-hoiku-coral\/30 { --tw-gradient-to: rgb(255 155 122 / 0.3); }

/* ===== ホバー状態 ===== */
.hover\:text-hoiku-coral:hover { color: #FF9B7A; }
.hover\:text-hoiku-orange:hover { color: #FF7F50; }
.hover\:text-hoiku-green:hover { color: #7BC47F; }
.hover\:text-hoiku-green\/80:hover { color: rgb(123 196 127 / 0.8); }

.hover\:bg-hoiku-peach:hover { background-color: #FFE8D6; }
.hover\:bg-hoiku-mint\/10:hover { background-color: rgb(184 229 190 / 0.1); }
.hover\:bg-hoiku-mint\/20:hover { background-color: rgb(184 229 190 / 0.2); }
.hover\:bg-hoiku-cream\/50:hover { background-color: rgb(255 249 240 / 0.5); }

.hover\:border-hoiku-coral\/20:hover { border-color: rgb(255 155 122 / 0.2); }
.hover\:border-hoiku-green\/20:hover { border-color: rgb(123 196 127 / 0.2); }
.hover\:border-hoiku-sky\/30:hover { border-color: rgb(135 206 235 / 0.3); }

/* ===== グループホバー状態 ===== */
.group:hover .group-hover\:text-hoiku-coral { color: #FF9B7A; }
.group:hover .group-hover\:text-hoiku-green { color: #7BC47F; }
.group:hover .group-hover\:text-sky-600 { color: #0284c7; }

/* ===== シャドウ ===== */
.shadow-hoiku-brown\/5 { --tw-shadow-color: rgb(139 107 79 / 0.05); }
.shadow-hoiku-brown\/10 { --tw-shadow-color: rgb(139 107 79 / 0.1); }
.shadow-hoiku-brown\/15 { --tw-shadow-color: rgb(139 107 79 / 0.15); }
.shadow-hoiku-green\/10 { --tw-shadow-color: rgb(123 196 127 / 0.1); }
.shadow-hoiku-coral\/20 { --tw-shadow-color: rgb(255 155 122 / 0.2); }

/* ===== サイズ・レイアウト（about用追加） ===== */
.h-\[50vh\] { height: 50vh; }
.min-h-\[400px\] { min-height: 400px; }
.w-48 { width: 12rem; }
.h-48 { height: 12rem; }
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.w-1\/3 { width: 33.333333%; }

/* ===== prose-hoiku（CKEditor出力用） ===== */
.prose-hoiku {
  --tw-prose-body: #8B6B4F;
  --tw-prose-headings: #8B6B4F;
  --tw-prose-links: #FF9B7A;
  --tw-prose-bold: #8B6B4F;
  color: var(--tw-prose-body);
}

.prose-hoiku h1,
.prose-hoiku h2,
.prose-hoiku h3,
.prose-hoiku h4 {
  color: var(--tw-prose-headings);
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose-hoiku h2 { font-size: 1.5rem; }
.prose-hoiku h3 { font-size: 1.25rem; }
.prose-hoiku h4 { font-size: 1.125rem; }

.prose-hoiku p {
  margin-top: 1em;
  margin-bottom: 1em;
  line-height: 1.8;
}

.prose-hoiku a {
  color: var(--tw-prose-links);
  text-decoration: underline;
}

.prose-hoiku a:hover {
  color: #FF7F50;
}

.prose-hoiku strong {
  color: var(--tw-prose-bold);
  font-weight: 700;
}

.prose-hoiku ul,
.prose-hoiku ol {
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.prose-hoiku ul { list-style-type: disc; }
.prose-hoiku ol { list-style-type: decimal; }

.prose-hoiku li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose-lg {
  font-size: 1.125rem;
  line-height: 1.8;
}

/* ===== ドロップシャドウ ===== */
.drop-shadow-lg {
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.drop-shadow-md {
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}

/* ===== ボーダー幅 ===== */
.border-4 { border-width: 4px; }
/* border-3 (Tailwindにデフォルトで無い) */
.border-3 { border-width: 3px; }

/* border colors */
.border-hoiku-mint { border-color: #B8E5BE; }
.border-hoiku-peach { border-color: #FFE8D6; }
.border-hoiku-sky { border-color: #87CEEB; }
.border-hoiku-peach\/20 { border-color: rgb(255 232 214 / 0.2); }
.border-hoiku-sky\/20 { border-color: rgb(135 206 235 / 0.2); }

/* bg colors */
.bg-hoiku-mint\/50 { background-color: rgb(184 229 190 / 0.5); }
.bg-hoiku-peach\/50 { background-color: rgb(255 232 214 / 0.5); }

/* width */
.w-0\.5 { width: 0.125rem; }

/* ===================================================== */
/* Navigation Styles - 2026 Modern Dropdown              */
/* styles.css の末尾に追加してください                    */
/* ===================================================== */

/* ===== PC ナビゲーションリンク ===== */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  color: #8B6B4F;
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background-color: rgb(255 232 214 / 0.5);
  color: #FF7F50;
}

.nav-link-dropdown {
  cursor: pointer;
}

.nav-link-active {
  background-color: rgb(255 232 214 / 0.5);
  color: #FF7F50;
}

/* ===== ドロップダウンパネル ===== */
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.75rem;
  z-index: 50;
}

.dropdown-panel-wide .dropdown-inner {
  min-width: 320px;
}

.dropdown-inner {
  background: white;
  border-radius: 1.5rem;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(139, 107, 79, 0.05);
  padding: 0.75rem;
  min-width: 240px;
}

/* ===== ドロップダウンアイテム ===== */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  color: #8B6B4F;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background-color: rgb(255 249 240 / 1);
  color: #FF7F50;
  transform: translateX(4px);
}

.dropdown-item-main {
  background: linear-gradient(135deg, rgb(255 249 240 / 0.8), rgb(255 232 214 / 0.5));
  margin-bottom: 0.5rem;
}

.dropdown-item-main:hover {
  background: linear-gradient(135deg, rgb(255 249 240 / 1), rgb(255 232 214 / 0.8));
}

/* ===== ドロップダウンアイコン ===== */
.dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ===== ドロップダウンテキスト ===== */
.dropdown-title {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
}

.dropdown-desc {
  display: block;
  font-size: 0.75rem;
  color: rgb(139 107 79 / 0.6);
  font-weight: 400;
  margin-top: 0.125rem;
}

/* ===== ドロップダウン区切り線 ===== */
.dropdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 232 214 / 0.8), transparent);
  margin: 0.5rem 0;
}

/* ===== ドロップダウングリッド（入園案内用） ===== */
.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}

/* ===== PC ナビゲーションボタン（お問い合わせ） ===== */
.nav-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 2px solid #7BC47F;
  color: #7BC47F;
  font-weight: 600;
  background: transparent;
  transition: all 0.3s ease;
}

.nav-btn-outline:hover {
  background: linear-gradient(135deg, #7BC47F, #6AB36E);
  border-color: transparent;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(123, 196, 127, 0.4);
}

/* ===== PC ナビゲーションボタン（保護者） ===== */
.nav-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #FF7F50, #FF9B7A);
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.nav-btn-primary:hover {
  background: linear-gradient(135deg, #FF6B3D, #FF8A66);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(255, 127, 80, 0.4);
}

/* ===== モバイルナビゲーション ===== */
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  color: #8B6B4F;
  font-weight: 500;
  transition: all 0.2s ease;
}

.mobile-nav-link:hover {
  background-color: rgb(255 232 214 / 0.5);
}

.mobile-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ===== モバイルアコーディオン ===== */
.mobile-nav-group {
  border-radius: 1rem;
  overflow: hidden;
}

.mobile-nav-accordion {
  width: 100%;
  cursor: pointer;
}

.mobile-nav-accordion-open {
  background-color: rgb(255 232 214 / 0.3);
}

/* ===== モバイルサブメニュー ===== */
.mobile-nav-submenu {
  padding: 0.5rem 0 0.5rem 1rem;
  background-color: rgb(255 249 240 / 0.5);
}

.mobile-nav-sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  color: rgb(139 107 79 / 0.8);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.mobile-nav-sublink:hover {
  background-color: white;
  color: #FF7F50;
}

.mobile-nav-subicon {
  font-size: 1rem;
}

/* ===== 追加のユーティリティ ===== */
.translate-y-2 {
  transform: translateY(0.5rem);
}

.rotate-180 {
  transform: rotate(180deg);
}

/* emerald グラデーション用 */
.from-emerald-500 {
  --tw-gradient-from: #10b981;
}
.to-emerald-500 {
  --tw-gradient-to: #10b981;
}

/* シャドウ追加 */
.shadow-hoiku-green\/20 {
  --tw-shadow-color: rgb(123 196 127 / 0.2);
  box-shadow: 0 10px 15px -3px var(--tw-shadow-color);
}

/* ===================================================== */
/* スクロールアニメーション（Scroll Reveal）             */
/* ===================================================== */

/* 基本設定：初期状態（非表示） */
[data-scroll] {
  opacity: 0;
  transition: 
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 表示状態 */
[data-scroll].is-visible {
  opacity: 1;
  transform: none !important;
}

/* アニメーションタイプ：フェードアップ（下から上） */
[data-scroll="fade-up"] {
  transform: translateY(30px);
}

/* アニメーションタイプ：フェードイン */
[data-scroll="fade-in"] {
  transform: none;
}

/* アニメーションタイプ：スケール（小さく → 通常） */
[data-scroll="scale"] {
  transform: scale(0.95);
}

/* アニメーションタイプ：左からスライド */
[data-scroll="slide-left"] {
  transform: translateX(-30px);
}

/* アニメーションタイプ：右からスライド */
[data-scroll="slide-right"] {
  transform: translateX(30px);
}

/* 遅延クラス */
[data-scroll-delay="100"] { transition-delay: 100ms; }
[data-scroll-delay="200"] { transition-delay: 200ms; }
[data-scroll-delay="300"] { transition-delay: 300ms; }
[data-scroll-delay="400"] { transition-delay: 400ms; }
[data-scroll-delay="500"] { transition-delay: 500ms; }

/* 動きを抑制したいユーザー向け（アクセシビリティ対応） */
@media (prefers-reduced-motion: reduce) {
  [data-scroll] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===================================================== */
/* コンテンツページ用ヒーローアニメーション               */
/* ===================================================== */

/* ページ読み込み時の初期アニメーション（data-hero属性用） */
[data-hero] {
  opacity: 0;
  animation-fill-mode: forwards;
}

/* タイトル */
[data-hero="title"] {
  transform: translateY(30px);
  animation: hero-content-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* サブタイトル・キャッチコピー */
[data-hero="subtitle"] {
  transform: translateY(20px);
  animation: hero-content-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* パンくずリスト */
[data-hero="breadcrumb"] {
  transform: translateY(10px);
  animation: hero-content-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes hero-content-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 動きを抑制したいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  [data-hero] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ===================================================== */
/* ヒーローアニメーション（2026 Modern / Dynamic）        */
/* ===================================================== */

/* ===== 背景ブロブのアニメーション ===== */
.hero-bg-blob {
  animation: hero-blob-float 8s ease-in-out infinite;
}

.hero-bg-blob-1 {
  animation-delay: 0s;
}

.hero-bg-blob-2 {
  animation-delay: -4s;
}

@keyframes hero-blob-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(15px, -20px) scale(1.05);
  }
  66% {
    transform: translate(-10px, 10px) scale(0.95);
  }
}

/* ===== 画像アニメーション ===== */
/* モバイル用ラッパー */
.hero-image-wrapper {
  opacity: 0;
  transform: translateX(-40px) scale(0.95);
  animation: hero-image-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* PC用absolute画像コンテナ */
.hero-image-container {
  opacity: 0;
  transform: translateX(-40px);
  animation: hero-image-container-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes hero-image-container-enter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hero-image-enter {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* 画像の微妙な浮遊感（ループ） */
.hero-image {
  animation: hero-image-float 6s ease-in-out 1s infinite;
}

@keyframes hero-image-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ===== タイトルアニメーション ===== */
.hero-title-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: hero-title-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title-line-1 {
  animation-delay: 0.2s;
}

.hero-title-line-2 {
  animation-delay: 0.35s;
}

@keyframes hero-title-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 説明文アニメーション ===== */
.hero-description {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes hero-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ボタンアニメーション ===== */
.hero-btn {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: hero-btn-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-btn-1 {
  animation-delay: 0.6s;
}

.hero-btn-2 {
  animation-delay: 0.7s;
}

@keyframes hero-btn-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== バッジアニメーション ===== */
.hero-badge {
  opacity: 0;
  transform: translateY(15px);
  animation: hero-badge-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-badge:nth-child(1) { animation-delay: 0.8s; }
.hero-badge:nth-child(2) { animation-delay: 0.9s; }
.hero-badge:nth-child(3) { animation-delay: 1.0s; }

@keyframes hero-badge-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 動きを抑制したいユーザー向け ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-blob,
  .hero-image,
  .hero-image-wrapper,
  .hero-image-container,
  .hero-title-line,
  .hero-description,
  .hero-btn,
  .hero-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}