@charset "UTF-8";

/*==============================================

木の実幼稚園（あそびの森） ブランドトークン
参考: docs/トンマナ分析_木の実幼稚園.md（旧サイト自動解析）

==============================================*/

:root {
  /* style-min.css の --main / --base / --txt-Color を上書き */
  --main: #6f3c1a;
  /* 帯・ボタン・フッター等の基調色（旧サイト最頻出の背景色） */
  --base: #fffcf0;
  /* 柔らかい背景トーン（クリーム） */
  --txt-Color: #6f3c1a;
  /* 本文文字色 */

  --accent-green: #357c67;
  --accent-leaf: #139f53;
  --accent-orange: #963c00;
  --accent-yellow: #fff5a3;
  --border-gray: #cdcdcd;
  --link-color: #0090ec;
}

/*==============================================

タイポグラフィ

Do: 影は最小限、角丸は控えめ（本テーマはdestyle.cssベースのためデフォルトでフラット）
Don't: 検出フォント（ヒラギノ角ゴ Pro W3）以外を追加しない

==============================================*/

body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
  color: var(--txt-Color);
  background-color: #ffffff;
}

main a:not(.btn):not(.logo):not([class*="menu"]) {
  color: var(--link-color);
}

/*==============================================

トップページ - メインビジュアル

==============================================*/

.mv {
  position: relative;
}

.mv-swiper .swiper-slide img {
  width: 100%;
  height: clamp(320px, 55vw, 640px);
  object-fit: cover;
}

.mv-copy {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  color: #fffcf0;
  text-shadow: 0 2px 8px #6f3c1a;
  /* 可読性確保のための最小限のテキストシャドウ（ドロップシャドウ装飾ではない） */
}

.mv-copy-en {
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

.mv-copy-ja {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .mv-copy {
    bottom: 20px;
  }
}

/*==============================================

トップページ - 本文コンテンツ（固定ページエディタ出力）

TinyMCEはh2・h3・pのみ許可（functions.php参照）。
ゆったりとした余白の開放的なレイアウトを踏襲。

==============================================*/

.home-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 20px;
}

.home-content h2 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--main);
  text-align: center;
  margin-bottom: 40px;
}

.home-content h3 {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 40px 0 20px;
}

.home-content p {
  font-size: 1.5rem;
  line-height: 2;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .home-content {
    padding: 40px 15px;
  }

  .home-content h2 {
    font-size: 2rem;
  }
}