/* ============================================
   top.css
   TOPページ（top.php）専用スタイル
   ============================================ */


/* ============================================
   装飾画像
   ============================================ */
.deco {
  position: absolute;
  left: min(0px, calc(50% - 650px));
  z-index: -1;
  pointer-events: none;
}

.deco-top {
  top: 100px;
}

.deco-middle {
  top: 1200px;
}

.deco-bottom {
  position: relative;
  left: 0;
  max-width: 200px;
  z-index: -1;
}

.deco-right {
  left: auto;
  right: min(0px, calc(50vw - 550px));
  top: 200px;
  max-width: 230px;
  z-index: -1;
}


/* ============================================
   MV（キービジュアル）
   ============================================ */
.mv-inner {
  width: 100%;
  overflow: hidden;
}

/* ============================================
   MV ラッパー（aspect-ratio で縦横比を維持）
   ============================================ */
.mv-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 658;
  background-color: #fff;
}

.mv-wrapper img {
  position: absolute;
  height: auto;
  display: block;
}

/* メイン写真：右端 */
.mv-photo {
  right: 0;
  top: 0;
  width: 68.3%;
}

/* キャッチコピー */
.mv-text {
  left: 8%;
  top: 26%;
  width: 24%;
  z-index: 2;
}

.mv-deco { z-index: 3; }

/* pc001: ティール横線群 ─ 左上 */
.mv-deco-01 { left: 0%;   top: 1%;    width: 12%;  }

/* pc002: 黄色三角 ─ 左下 */
.mv-deco-02 { left: 0%;  top: 60%;    width: 11%;  }

/* pc003: 黄色ブロブ ─ 中央上 */
.mv-deco-03 { left: 35%;  top: 16%;   width: 7%;   }

/* pc004: オレンジドット列 ─ 中央上 */
.mv-deco-04 { top: 0;  left: 45%;   bottom: 2%; width: 12%;  }

/* pc005: オレンジブラシ ─ 右上 */
.mv-deco-05 { right: -3%;   top: 0%;   width: 17%;  z-index: 1; }

/* pc006: サーモンスクエア ─ 左下 */
.mv-deco-06 { left: 34%;  top: 80%;    width: 6.5%; }

/* pc007: ティールブラシ ─ 中央下 */
.mv-deco-07 { right: 30%; top: 89%;   width: 14%;  }

/* pc008: 黄色ドット群 ─ 右下 */
.mv-deco-08 { right: 10%;  top: 80%;    width: 9%;   }

/* ============================================
   MV SP版（≤767px のみ表示）
   ============================================ */

/* デフォルトは非表示 */
.mv-wrapper-sp { display: none; }

@media screen and (max-width: 767px) {

  .mv-wrapper    { display: none; }
  .mv-wrapper-sp { display: block; }

  .mv-wrapper-sp {
    position: relative;
    width: 100%;
    aspect-ratio: 750 / 856;
    background-color: #fff;
  }

  .mv-wrapper-sp img {
    position: absolute;
    height: auto;
    display: block;
  }

  /* メイン写真 ─ 右上 */
  .mv-sp-photo { right: 6%;    top: 5%;   width: 90%; }

  /* キャッチコピー */
  .mv-sp-text  { right: 10%;   top: 66%;  z-index: 2; width: 40%; }

  .mv-sp-deco  { z-index: 3; }

  /* smp001: ティール横線 ─ 左上 */
  .mv-sp-deco-01 { left: -6%;   top: 10%; }

  /* smp0012: オレンジドット ─ 左上 */
  .mv-sp-deco-02 { left: 32%;  top: 5%;   }

  /* smp003: オレンジブラシ ─ 左中（テキスト背景） */
  .mv-sp-deco-03 { right: -5%;   top: 2%; z-index: 1; }

  /* smp004: 小黄三角 ─ 左中 */
  .mv-sp-deco-04 { left: 15%;  top: 30%; }

  /* smp005: サーモン正方形 ─ 左下 */
  .mv-sp-deco-05 { left: 3%;   top: 58%; }

  /* smp006: 大黄三角 ─ 左下 */
  .mv-sp-deco-06 { left: 0%;   top: 76%;   }

  /* smp007: ティールブラシ ─ 中央下 */
  .mv-sp-deco-07 { left: 40%;  top: 60%;  }

  /* smp008: 黄ドット群 ─ 右下 */
  .mv-sp-deco-08 { right: 3%;  top: 52%; }
}


/* ============================================
   MV アニメーション
   ============================================ */

/* --- キーフレーム定義 --- */

@keyframes mv-slide-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mv-slide-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mv-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mv-bounce-in {
  0%   { opacity: 0; transform: scale(0.3) rotate(-12deg); }
  55%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
  75%  { transform: scale(0.94) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* .mv-text 専用：ポンッと飛び出して登場 */
@keyframes mv-text-in {
  0%   { opacity: 0; transform: scale(0.4) translateY(30px); }
  50%  { opacity: 1; transform: scale(1.15) translateY(-10px); }
  70%  { transform: scale(0.94) translateY(4px); }
  85%  { transform: scale(1.05) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* ループ：ふわふわ浮遊 */
@keyframes mv-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ループ：浮遊＋ゆらゆら */
@keyframes mv-float-rotate {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-9px) rotate(4deg); }
}

/* ループ：左右にゆらゆら */
@keyframes mv-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg); }
}

/* ループ：じわっと拡縮 */
@keyframes mv-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* ループ：浮遊＋ニコッとポップスマイル（.mv-text 専用） */
@keyframes mv-text-loop {
  0%   { transform: translateY(0)    scale(1); }
  12%  { transform: translateY(-6px) scale(1.10); }
  22%  { transform: translateY(-7px) scaleX(1.18) scaleY(0.88); }
  33%  { transform: translateY(-5px) scale(1.04); }
  43%  { transform: translateY(-2px) scale(0.98); }
  54%  { transform: translateY(0)    scale(1); }
  100% { transform: translateY(0)    scale(1); }
}


/* ============================================
   PC版 アニメーション
   ============================================ */

.mv-photo {
  animation:
    mv-slide-right 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
    mv-float       5s  ease-in-out 1.1s infinite;
}

.mv-text {
  animation:
    mv-text-in   0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both,
    mv-text-loop 4s   ease-in-out                        1.5s infinite;
}

/* ティール横線 */
.mv-deco-01 {
  animation:
    mv-slide-left 0.7s ease 0.2s both,
    mv-float      6s  ease-in-out 1s infinite;
}

/* 黄色三角 */
.mv-deco-02 {
  animation:
    mv-bounce-in    0.8s ease 0.45s both,
    mv-float-rotate 4s   ease-in-out 1.3s infinite;
}

/* 黄色ブロブ */
.mv-deco-03 {
  animation:
    mv-bounce-in 0.7s ease 0.7s both,
    mv-float     3.5s ease-in-out 1.5s infinite;
}

/* オレンジドット */
.mv-deco-04 {
  animation: mv-fade-up 0.6s ease 0.35s both;
}

/* オレンジブラシ */
.mv-deco-05 {
  animation: mv-slide-right 0.7s ease 0.1s both;
}

/* サーモン正方形 */
.mv-deco-06 {
  animation:
    mv-bounce-in 0.8s ease 0.6s both,
    mv-sway      3s   ease-in-out 1.4s infinite;
}

/* ティールブラシ */
.mv-deco-07 {
  animation: mv-slide-left 0.6s ease 0.8s both;
}

/* 黄色ドット群 */
.mv-deco-08 {
  animation:
    mv-fade-up 0.7s ease 0.4s both,
    mv-float   5.5s ease-in-out 1.2s infinite;
}


/* ============================================
   SP版 アニメーション（≤767px）
   ============================================ */

@media screen and (max-width: 767px) {

  .mv-sp-photo {
    animation:
      mv-slide-right 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
      mv-float       5s  ease-in-out 1.1s infinite;
  }

  .mv-sp-text {
    animation:
      mv-text-in   0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both,
      mv-text-loop 4s   ease-in-out                        1.5s infinite;
  }

  .mv-sp-deco-01 {
    animation:
      mv-slide-left 0.7s ease 0.2s both,
      mv-float      6s  ease-in-out 1s infinite;
  }

  .mv-sp-deco-02 {
    animation: mv-fade-up 0.6s ease 0.3s both;
  }

  .mv-sp-deco-03 {
    animation: mv-slide-right 0.6s ease 0.1s both;
  }

  .mv-sp-deco-04 {
    animation:
      mv-bounce-in    0.7s ease 0.5s both,
      mv-float-rotate 4s   ease-in-out 1.3s infinite;
  }

  .mv-sp-deco-05 {
    animation:
      mv-bounce-in 0.7s ease 0.65s both,
      mv-sway      3.2s ease-in-out 1.5s infinite;
  }

  .mv-sp-deco-06 {
    animation:
      mv-bounce-in    0.8s ease 0.45s both,
      mv-float-rotate 4.5s ease-in-out 1.2s infinite;
  }

  .mv-sp-deco-07 {
    animation: mv-slide-left 0.6s ease 0.8s both;
  }

  .mv-sp-deco-08 {
    animation:
      mv-fade-up 0.7s ease 0.4s both,
      mv-float   5.5s ease-in-out 1.2s infinite;
  }
}


/* ============================================
   イントロテキスト
   ============================================ */
.top-intro {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
  padding: 0 20px;
  margin: 0 auto;
}

.text-center {
  text-align: center;
  max-width: 700px;
  margin: 80px;
  position: relative;
  z-index: 1;
}


.text-center h2 {
  font-size: 28px;
  margin-bottom: 24px;
}




/* ============================================
   まるのセクション
   ============================================ */
.circle-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
  box-sizing: border-box;
}

.circle-item {
  position: relative;
  width: 260px;
  height: 260px;
}

.circle-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.circle-text {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
}

.circle-center {
  left: 50%;
}

.circle-left {
  left: 60%;
}

.circle-right {
  left: 40%;
}


/* ============================================
   赤ボタン（TOP用）
   ============================================ */
.btn-top {
  display: inline-block;
  background-color: #f57960;
  color: #fff;
  padding: 14px 80px;
  border-radius: 50px;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-group {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
}

.btn-center {
  display: flex;
  justify-content: center;
  margin: 40px auto;
}


/* ============================================
   カリキュラムセクション
   ============================================ */
.page2 {
  margin-top: 300px;
  padding-top: 30px;
  text-align: center;
}

.font_cali {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

.page2 p {
  padding-top: 100px;
  text-align: center;
  font-size: 18px;
}

.page2-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.page2-item {
  text-align: center;
  width: 260px;
}

.page2-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.title-green  { color: #b4dcd6; }
.title-orange { color: #f4a35f; }
.title-red    { color: #f57960; }

/* 重ねるための親 */
.curriculum-title {
  position: relative;
  width: 260px;
  margin: 80px auto 40px;
}

/* 下にくる画像 */
.curriculum-bg {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;

}

/* 上に重ねる文字 */
.curriculum-text {
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  font-size: 35px;
  font-weight: bold;
  white-space: nowrap;
}

/* ============================================
   園一覧セクション
   ============================================ */
.school-section {
  position: relative;
  background: #fafaee;
  z-index: 1;
}



.school-section .content {
  position: relative;
  background-color: #fbfaef;
  padding: 0px 20px 60px;
  text-align: center;
}

.school-section .back img {
  width: 100%;
}

.school-section h1 {
  position: relative;
  text-align: center;
}

.title-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
}

.title-bg-img {
  display: block;
}

.title-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
  white-space: nowrap;
}


/* ============================================
   施設タブ・グリッド・カード（TOP版）
   ============================================ */

/* 外枠 
.wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  background: #f5f0e5;
  padding: 30px 30px 50px;
  border-radius: 24px;
}*/

/* wrapper-inner + side deco を横並びにするラッパー */
.wrapper-layout {
  position: relative;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
}

.wrapper-inner {
  flex: 1;
  min-width: 0;
  background: #f5f0e5;
  padding: 30px 30px 50px;
  border-radius: 0 24px 24px 24px;
  margin: auto 10px;
}

/* 右側の sticky 装飾カラム */
.wrapper-side-deco {
  position: absolute;
  right: -60px;
  top: -20px;
}

.wrapper-deco-top-right {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* 1100px 以下で装飾を非表示 */
@media screen and (max-width: 1100px) {
  .wrapper-side-deco {
    display: none;
  }
}

/* タブ */
.top-tabs {
  position: relative;
  max-width: 1100px;
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 50px 0;
  background: #E9E4DA;
  border-radius: 24px 24px 0 0;
}

.is-active {
  background: #f5f0e5 !important;
  border-radius: 24px 24px 0 0;
}

.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}

.tab {
  padding: 10px 24px;
  border-radius: 20px;
  border: none;
  background: #e6e1d7;
  cursor: pointer;
  font-weight: bold;
}

.tab.active {
  background: #fff;
}

/* グリッド */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap;
  gap: 32px;
}

/* カード */
.card {
  width: auto;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.address {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.age {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: bold;
}

.card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 13px;
}

.card ul li {
  margin-bottom: 6px;
}

.card .btn {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 10px;
  background: #f57960;
  color: #fff;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}


/* ============================================
   お問い合わせ情報
   ============================================ */
.contact-block {
  color: #333;
}

.contact-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  margin-top: 40px;
}

.contact-row .left {
  width: 140px;
}

.contact-row .right {
  flex: 1;
  font-size: 14px;
}

.label {
  display: inline-block;
  width: 90px;
  text-align: center;
  padding: 6px 0;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  margin: 0;
}

.label-yellow { background: #ffcc00; }
.label-green  { background: #6bc276; }


/* 中身の幅 */
.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.contact-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 60px;
}

.contact-box {
  flex: 1;
}

.contact-title {
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border: 2px solid #e60012;
  border-radius: 50%;
}

.btn-contact {
  display: inline-block;
  background: #e85b4f;
  color: #fff;
  padding: 16px 80px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}

.tel {
  font-size: 28px;
  color: #e60012;
  font-weight: bold;
  margin: 8px 0;
}

.tel-note {
  font-size: 12px;
}

.contact-section {
  display: flex;
  justify-content: flex-start;
  padding: 40px 0 0;
  margin-left: -100px;
}


/* ============================================
   動画（YouTube）
   ============================================ */
.media-title {
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.youtube-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.youtube {
  flex: 1;
  aspect-ratio: 16 / 9;
  position: relative;
  max-width: 569px;
}

.youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* ============================================
   お知らせ（TOP版）
   ============================================ */
.news-block {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0;
  display: flex;
  gap: 70px;
  align-items: center;
  color: #333;
}

.news-left {
  display: flex;
  flex-direction: column;
  width: 200px;
  text-align: center;
  font-family: 'Zen Maru Gothic', sans-serif;
  align-items: center;
}

.news-badge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-title {
  color: #000000;
  font-weight: bold;
  font-size: 30px;
}

.news-more {
  display: inline-block;
  padding: 12px 40px;
  font-size: 18px;
  background-color: #f47e60;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  line-height: 1;
}

.news-more:hover {
  opacity: 0.85;
}

/* SP: badge横のボタンを非表示、下部のボタンを表示 */
.news-left .news-more {
  display: none;
}

/* PC: badge下のボタンを表示、下部のボタンを非表示 */
@media screen and (min-width: 768px) {
  .news-left .news-more {
    display: inline-block;
    margin-top: 20px;
  }

  .news-block > .news-more {
    display: none;
  }
}

.news-right {
  flex: 1;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd;
}

.news-list li {
  display: flex;
  padding: 14px 0;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.news-date {
  width: 120px;
  color: #666;
}

.news-text {
  flex: 1;
}


/* ============================================
   バナー（各種書類ダウンロード）
   ============================================ */
.news-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 80px 0;
}

.banner-deco {
  flex: 1 1 0;
  min-width: 0;
  display: block;
}

.banner-deco img {
  width: 100%;
  height: auto;
  display: block;
}

.banner-text {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 16px;
  color: #333;
  font-size: 18px;
}

.banner-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 80px;
  background-color: #f47e60;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: 20px;
}

.banner-btn:hover {
  opacity: 0.8;
}



@media screen and (max-width: 768px) {
  .news-banner {
    margin: 50px 0;
  }

  .banner-deco {
    max-width: 100px;
  }

  .banner-text {
    font-size: 15px;
    padding: 0 8px;
  }
}