/* Theme: KIYASUKU Original (キヤスク オリジナルカラー) */
:root {
  /* アクセント、ロゴ、ボタン (#ff8a76) */
  --gd: #ff8a76;
  --gm: #f07b68;
  --gl: #ff9d8c;

  /* セクション背景（ハイライト用）は逆に真っ白に */
  --gp: #ffffff;
  --off: #ffffff;

  /* 全体の基本背景を #eeeeee にして極限までシンプルに */
  --white: #eeeeee;

  /* テキストカラー（少し柔らかいダーク） */
  --td: #222222;
  --tm: #444444;
  --tl: #888888;

  --coral: #ff8a76;
}

/* ---------------------------------
   例外処理：大面積の要素をグレーで締める
---------------------------------- */
/* 画面左端の縦書きナビゲーション（祐天寺附属幼稚園）の透明度調整 */
body .left-vert-nav {
  opacity: 0.5;
}

/* モバイル専用の改行（PCでは非表示） */
.ky-m-br {
  display: none;
}
/* PC専用の改行（モバイルでは非表示） */
.ky-pc-br {
  display: block;
}
@media (max-width: 768px) {
  .ky-m-br {
    display: block;
  }
  .ky-pc-br {
    display: none;
  }
}

/* PC以上（769px〜）：縦書きタイトルを右側に配置し、すりガラスボックスとの被りを防ぐ */
@media (min-width: 769px) {
  body .s-text p.ky-pc-mb0 {
    margin-bottom: 0;
  }

  body .s-vert {
    left: auto;
    right: 5%;
    top: 15%;
    bottom: auto;
  }
}

/* タブレット幅（769px～1024px）のみ：読み込み直後は非表示、2.5秒後にフェードイン */
@media (min-width: 769px) and (max-width: 1024px) {
  body .s-text {
    opacity: 0;
    animation: softFadeIn 1.5s 2.5s ease-out forwards;
  }
}
/* フッターやマーキーなど、元々ダークグリーンで塗りつぶされていた部分がピンクになるのを防ぐ */
body .mq,
body .footer,
body footer,
body #footer,
body .ft {
  background-color: #f5f3f0;
  color: #333333;
}
body .mqi {
  color: #555555;
}
body .mqi::after {
  background: rgba(0, 0, 0, 0.15);
}

/* フッターのライトグレー化に伴うテキスト色の反転（Kiyasuku専用） */
body .ft-top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
body .ft-logo {
  color: var(--td);
}
body .ft-logo-en {
  color: var(--tl);
}
body .ft-addr {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--tm);
}
body .ft-nav h4 {
  color: var(--tl);
}
body .ft-nav a {
  color: var(--tm);
}
body .ft-nav a:hover {
  color: var(--td);
}
body .ft-nav a::before {
  background: rgba(0, 0, 0, 0.2);
}
body .ft-btm {
  color: var(--tl);
}
body .ft-cr a {
  color: var(--tl);
}
body .ft-cr a:hover {
  color: var(--td);
}

/* =================================================================
   KIYASUKU CINEMATIC UI - index.html 本番適用スタイル
   (index-parallax-demo.html から移行・!important 除去版)
   2026-04-23
================================================================= */

/* ---------------------------------------------------------------
   アイブロウラベル（見出し上の英字ラベル）統一
   - body でラップして詳細度を上げ !important 不要に
--------------------------------------------------------------- */
body .ky-intro-eyebrow,
body .ky-adm-eyebrow {
  font-family: var(--en);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ff8a76;
  margin-bottom: 20px;
  display: block;
}

/* ---------------------------------------------------------------
   見出しフォント：全セクションを明朝体に統一
--------------------------------------------------------------- */
body .ky-sec-ttl,
body .ky-intro-h2,
body .piece-ja,
body .ky-adm-ttl {
  font-family: var(--serif, "Shippori Mincho", serif);
  font-weight: 400;
}

/* 本文セクション見出しのサイズと色の統一（PC時） */
body .ky-intro-h2,
body .piece-ja,
body .ky-adm-ttl {
  font-size: 36px !important;
  color: var(--td) !important; /* 柔らかい黒 #222222 */
  letter-spacing: 0.05em !important;
  line-height: 1.6 !important;
}

/* ---------------------------------------------------------------
   本文フォント：全セクションを明朝体に統一
--------------------------------------------------------------- */
body .ky-intro-desc p,
body .piece-desc p,
body .ky-adm-desc,
body .s-text p,
body .m-s-text-p {
  font-family: var(--serif, "Shippori Mincho", serif);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2;
}

/* ---------------------------------------------------------------
   「祐天寺附属幼稚園へ、ようこそ。」クライマックス強調
--------------------------------------------------------------- */
body .m-s-text-p:last-child,
body .s-text p:last-child {
  font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  margin-top: 2em;
  letter-spacing: 0.2em;
}

/* ---------------------------------------------------------------
   覗き穴パララックス：Our Environment 画像コンテナ
--------------------------------------------------------------- */
body .ky-intro-img {
  width: 100%;
  max-width: none;
  margin-left: 0;
  border-radius: 62% 38% 56% 44% / 44% 62% 38% 58%;
  overflow: hidden;
  position: relative;
  align-self: stretch;
}

body .ky-intro-img::before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1 → 横長検像でも丸みを保つ */
}

body .ky-intro-img img {
  position: absolute;
  top: 0;
  left: 0;
  height: 130%;
  width: 100%;
  object-fit: cover;
  transform: translateY(-15%);
  will-change: transform;
}

/* ---------------------------------------------------------------
   覗き穴パララックス：ポッケ（子育て支援）画像
--------------------------------------------------------------- */
body .ky-piece-img {
  aspect-ratio: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

body .ky-piece-blob-wrap {
  border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%;
  overflow: hidden;
  max-width: 480px;
  position: relative;
  width: 100%;
  align-self: center;
}

/* ::beforeの display: none を削除して、元の padding-top: 100% を復活させる */
body .ky-piece-blob-wrap::before {
  content: "";
  display: block;
  padding-top: 100%;
}

body .ky-piece-blob-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  height: 150%;
  width: 100%;
  object-fit: cover;
  transform: translateY(-20%);
  will-change: transform;
}

/* ---------------------------------------------------------------
   覗き穴パララックス：個別見学（Admissions）画像
--------------------------------------------------------------- */
body .ky-adm-img-box {
  overflow: hidden;
  border-radius: 64% 36% 27% 73% / 55% 58% 42% 45%;
  position: relative;
  width: 100%;
  align-self: center;
}

body .ky-adm-img-box::before {
  content: "";
  display: block;
  padding-top: 100%;
}

body .ky-adm-blob-img {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
  height: 150%;
  width: 100%;
  object-fit: cover;
  transform: translateY(-20%);
  will-change: transform;
}

/* ---------------------------------------------------------------
   モバイル：スクロール連動ヒーローテキスト表示
   (max-width: 768px に変更し、タブレットでの表示崩れを防止)
--------------------------------------------------------------- */
@media (max-width: 768px) {
  /* scrolly を縦に伸ばしてスクロール距離を確保 */
  body #scrolly {
    height: 200svh;
  }

  /* pin を sticky にして映像を固定 */
  body #scrollyPin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  /* s-text（スクロールテキスト）をスマホでも表示 */
  body .s-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    writing-mode: horizontal-tb;
    padding: 56px 28px;
    gap: 1.2em;
    width: 90%;
    margin: 0 auto;
    left: 0;
    right: 0;
    transform: translateY(
      150vh
    ); /* JSのロード前に一瞬画面に映るのを防ぐため、初期位置を画面外に退避 */
  }

  body .s-text p {
    margin: 0;
    writing-mode: horizontal-tb;
    font-size: clamp(1rem, 4.5vw, 1.3rem);
    letter-spacing: 0.08em;
    line-height: 2.2;
    width: 100%;
    text-align: left;
  }

  /* モバイルオーバーレイを非表示（親セレクタ追加で詳細度を上げて !important 不要に） */
  body .scrolly-pin .m-hero-overlay {
    display: none;
  }

  /* s-vert（縦書きタイトル）をスマホでも表示 */
  body .s-vert {
    display: block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    left: auto;
    right: 28px;
    top: 22%;
    transform: none;
    bottom: auto;
  }

  body .s-vert h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    letter-spacing: 0.25em;
    line-height: 2.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    color: #fff;
    opacity: 0;
    animation: softFadeIn 1.8s 0.8s ease-out forwards;
  }

  body .s-vert p {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: softFadeIn 2s 1.8s ease-out forwards;
  }

  /* ダークグリーンの下部テキストエリアは非表示（二重表示防止） */
  body .m-s-text-wrap {
    display: none;
  }
}

/* ---------------------------------------------------------------
   PC幅でのChildcare Support / Admissions画像サイズをOur Environmentと統一
--------------------------------------------------------------- */
@media (min-width: 1025px) {
  body .ky-piece-blob-wrap {
    width: clamp(300px, 36vw, 480px);
    max-width: none;
    aspect-ratio: 1 / 1 !important;
  }
  body .ky-adm-img-box {
    width: clamp(240px, 28vw, 380px);
    max-width: none;
    aspect-ratio: 1 / 1 !important;
  }
  body .ky-intro-txt {
    flex: 1 1 auto;
    min-width: 500px;
    max-width: 560px;
  }
  body .ky-piece-blob-wrap::before,
  body .ky-adm-img-box::before {
    display: none !important;
  }
}
/* ---------------------------------------------------------------
   PC用: Newsセクションのインラインスタイルを外部CSSへ移行
--------------------------------------------------------------- */
body section.ky-news {
  padding-top: 120px;
}

/* ---------------------------------------------------------------
   タブレット・モバイル時の画像巨大化防止・レイアウト最適化（サイズ最適化）
--------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 縦積み強制 */
  body .ky-intro .ky-intro-in {
    flex-direction: column;
    gap: 40px;
  }
  body .ky-intro .ky-intro-txt {
    flex: auto;
    width: 100%;
    margin-right: 0;
    min-width: auto !important;
    text-align: center !important;
    align-items: center !important;
    display: flex;
    flex-direction: column;
  }
  body .ky-intro .ky-intro-txt .ky-intro-h2,
  body .ky-intro .ky-intro-txt .ky-intro-eyebrow {
    text-align: center !important;
  }
  body .ky-intro .ky-intro-txt .ky-intro-desc p {
    text-align: left !important;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  body .ky-intro .ky-intro-txt .ky-intro-link {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body .ky-piece .ky-piece-in {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body .ky-piece .ky-piece-left {
    padding-top: 0;
    text-align: center !important;
    align-items: center !important;
  }
  body .ky-piece .ky-piece-left * {
    text-align: center !important;
  }
  body .ky-piece .ky-piece-left .piece-desc p {
    text-align: left !important;
  }

  /* Our Environment 画像 */
  body .ky-intro .ky-intro-img {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  /* 子育て支援ひろばの画像表示崩れ対策 */
  body .ky-piece .ky-piece-img {
    display: block;
  }

  /* 個別見学セクション（Admissions） */
  body .ky-admissions-cta .ky-admissions-in {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body .ky-admissions-cta .ky-adm-tx-box {
    order: 1;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center !important;
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body .ky-admissions-cta .ky-adm-eyebrow,
  body .ky-admissions-cta .ky-adm-ttl {
    text-align: center !important;
  }

  body .ky-admissions-cta .ky-adm-desc {
    text-align: left !important;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14.5px;
    line-height: 2;
    margin-bottom: 32px;
  }

  body .ky-admissions-cta .ky-btn {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    font-size: 15px;
    padding: 16px 12px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    white-space: nowrap;
  }

  /* Our Environment 画像コンテナのサイズ最適化 */
  body .ky-intro .ky-intro-img-outer {
    width: 90vw;
    max-width: 480px;
    margin: 0 auto;
  }
  body .ky-intro .ky-intro-img {
    max-width: none;
    width: 100%;
  }

  /* Childcare Support 画像 */
  body .ky-piece .ky-piece-blob-wrap {
    position: relative; /* absolute配置の基準点 */
    flex: none; /* flex伸縮を解除して本来の width/max-width を強制適用 */
    width: 90vw;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }

  /* Admissions 画像 (園見学画像サイズを気持ち小さく調整) */
  body .ky-admissions-cta .ky-adm-img-box {
    position: relative; /* absolute配置の基準点 */
    flex: none; /* flex伸縮を解除して本来の width/max-width を強制適用 */
    width: 90vw !important;
    max-width: 480px !important;
    min-width: auto !important;
    margin: 40px auto 0;
    aspect-ratio: 1 / 1;
    order: 2;
  }

  body .ky-piece .ky-piece-blob-wrap::before,
  body .ky-admissions-cta .ky-adm-img-box::before {
    /* padding-top ハックの ::before を非表示に */
    display: none;
  }

  /* モバイル・タブレットではパララックス（absolute配置）のtransformを無効化し、アスペクト比コンテナに完全フィットさせる */
  body .ky-intro-img img,
  body .ky-piece .ky-piece-blob-wrap img,
  body .ky-admissions-cta .ky-adm-blob-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    transform: none !important;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------------
   スマホ：ヒーローセクション モバイル専用レイアウト（900px以下）
--------------------------------------------------------------- */
@media (max-width: 900px) {
  body .scrolly {
    height: 100vh;
  }
  body .scrolly-pin {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  /* PC用補助テキスト要素はモバイルで非表示 */
  body .s-prog,
  body .s-btm,
  body .s-yr {
    display: none;
  }
  /* モバイル専用テキストオーバーレイ */
  body .m-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 60px 28px 52px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.15) 70%,
      transparent 100%
    );
    pointer-events: none;
  }
  body .m-hero-txt {
    transition: opacity 0.5s ease;
  }
  body .m-hero-txt.is-hidden {
    opacity: 0;
  }
  body .m-hero-h1 {
    font-family: "Shippori Mincho", serif;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.9;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    margin-bottom: 10px;
  }
  body .m-hero-sub {
    font-family: "Outfit", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
  }
  body .m-hero-lines {
    display: flex;
    gap: 6px;
    margin-top: 20px;
  }
  body .m-hero-line {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    transition: background 0.4s ease;
  }
  body .m-hero-line.active {
    background: rgba(255, 255, 255, 0.9);
  }

  /* スクロール連動モバイルテキスト（m-s-text）用のベーススタイル */
  body .m-s-text-wrap {
    padding: 60px 24px;
    color: #fff;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 2.4;
    text-align: left;
    background: #1a2e18; /* ダークグリーン背景 */
    position: relative;
    z-index: 10;
  }
  body .m-s-text-wrap p {
    margin-bottom: 2em;
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.8s ease-out,
      transform 0.8s ease-out;
  }
  body .m-s-text-wrap p.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------
   スマホ：モバイルレスポンシブ個別指定（768px以下）
--------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 下部固定バーにコピーライトが被らないようにフッターの余白を調整 */
  body footer {
    padding-bottom: 110px !important;
  }

  /* お知らせ（News） */
  body section.ky-news {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  body .ky-news-in {
    flex-direction: column;
    gap: 0;
  }
  body .ky-news-in .ky-news-left {
    flex: none;
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 24px;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
  }
  body .ky-news-in .ky-news-left .ky-intro-eyebrow,
  body .ky-news-in .ky-news-left .ky-sec-ttl {
    text-align: center !important;
  }
  body .ky-news-list .ky-news-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  body .ky-news-link {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding: 20px 0 !important;
  }
  body .news-body {
    width: 100% !important;
    grid-column: auto !important;
  }
  body .news-ttl {
    font-size: 14px;
    line-height: 1.8;
  }
  body .news-arrow {
    display: none;
  }

  /* エディトリアル表現強化：見出しのタイポグラフィ */
  body .ky-intro-txt .ky-intro-h2.sp-only {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    font-feature-settings: "palt" 1;
    margin-bottom: 32px;
  }

  /* 行頭括弧のオプティカル・マージン調整 */
  body .indent-bracket {
    display: inline-block;
    margin-left: -0.45em;
  }

  /* 「ポッケ」見出しの最適サイズ */
  body .ky-piece-left .piece-ja {
    font-size: 26px;
    line-height: 1.6;
    margin-bottom: 28px;
  }

  /* 詩的キャプションを中央寄せ */
  body .ky-piece-right .piece-vert-ttl.sp-only {
    text-align: center;
    width: 100%;
  }

  /* 個別見学マージン調整 */
  body .ky-admissions-cta .ky-adm-tx-box {
    margin-top: 40px; /* スマホ時のマージン */
  }

  /* テキスト背後のペブル：モバイルでの専用位置調整 */
  body .ky-adm-tx-box .ky-adm-pink-obj2 {
    top: 78%;
    left: -70px;
    transform: translateY(-50%);
  }

  /* FINAL VISION縦書きレイアウト スマホ用位置微調整 */
  body .ky-final-vision .ky-final-content {
    top: 0;
    bottom: 0;
    right: 24px;
    margin-top: auto;
    margin-bottom: auto;
    height: fit-content;
    transform: none;
  }
  body .ky-final-vision .ky-final-copy.sp-only {
    writing-mode: vertical-rl;
    font-size: 30px;
    line-height: 2.2;
    letter-spacing: 0.2em;
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.4),
      0 2px 8px rgba(80, 50, 40, 0.3);
    color: #fff;
  }

  /* モバイル時の見出しサイズ統一 */
  body .ky-intro-h2,
  body .piece-ja,
  body .ky-adm-ttl,
  body .ky-sec-ttl {
    font-size: 26px !important;
    line-height: 1.5 !important;
  }

  /* モバイル時のOur Environment背景ペブル位置微調整 */
  body .ky-intro .ky-intro-pink-obj {
    bottom: 38% !important;
    right: 5% !important;
    width: clamp(180px, 35vw, 280px) !important;
  }
}

/* ---------------------------------------------------------------
   共通の塗りつぶしボタン（ky-btn-solid）の色をテーマカラーに最適化
--------------------------------------------------------------- */
body .ky-btn-solid {
  background: var(--gd);
  box-shadow: 0 4px 12px rgba(255, 138, 118, 0.2);
}
body .ky-btn-solid:hover {
  box-shadow: 0 12px 32px rgba(255, 138, 118, 0.35);
}