@charset "utf-8";
/* ==========================================================================
   home.css ― トップページ
   ★ カードのホバー効果はスマホで発火しない。止まった状態で成立させる
   ★ 動きは prefers-reduced-motion: reduce で止める
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: min(88vh, calc(900 / 16 * 1rem));
  min-height: calc(420 / 16 * 1rem);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* ヘッダーの白文字を読ませるための影。装飾なので読み上げに出さない */
.hero__shade {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(230 / 16 * 1rem);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .22) 60%, rgba(0, 0, 0, 0) 100%);
}

.hero__title {
  position: absolute;
  right: max(4%, calc(50% - (690 / 16 * 1rem)));
  bottom: 8%;
  margin: 0;
  text-align: left;
  line-height: 1.05;
  pointer-events: none;
  font-weight: var(--fw-black);
  letter-spacing: 6px;
  font-size: var(--fs-hero);
}

.hero__title > span { display: block; opacity: .9; }
.hero__title > [data-tone="brand"] { color: var(--c-brand); }
.hero__title > [data-tone="blue"]  { color: #6FB3DD; }
.hero__title > [data-tone="green"] { color: var(--c-green); }

@media (max-width: 900px) {
  .hero { height: 72vh; }
}

/* --------------------------------------------------------------------------
   浮かぶ飾り
   純粋な装飾。読み上げには出さず、動きを減らす設定では止める
   -------------------------------------------------------------------------- */
.deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }

.deco__shape {
  position: absolute;
  animation: kg-sway 9s ease-in-out infinite alternate;
}

.deco__shape[data-shape="circle"] { border-radius: var(--r-circle); }
.deco__shape[data-shape="square"] { border-radius: var(--r-xl); }

@keyframes kg-sway {
  from { translate: -16px 0; }
  to   { translate: 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .deco__shape { animation: none; }
}

/* --------------------------------------------------------------------------
   セクションの共通見出し（TOPは下層より一回り大きい）
   -------------------------------------------------------------------------- */
.home-head { text-align: center; }

.home-head__icon {
  width: clamp(calc(48 / 16 * 1rem), 7vw, calc(64 / 16 * 1rem));
  height: auto;
  margin: 0 auto var(--sp-10);
}

.home-head__title { margin: 0; font-size: calc(30 / 16 * 1rem); font-weight: var(--fw-black); }

.home-head__en {
  display: block;
  margin-top: var(--sp-6);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 5px;
}

.home-head__en[data-tone="brand"] { color: var(--c-text-brand); }
.home-head__en[data-tone="green"] { color: var(--c-text-green); }

.home-lead {
  max-width: var(--w-text);
  margin: var(--sp-40) auto 0;
  line-height: 2.3;
}

.home-lead[data-align="start"] { text-align: left; }

/* 帯の中の丸いバッジ見出し（EXTENDED CARE / GUIDANCE） */
.pill {
  display: inline-block;
  padding: var(--sp-6) var(--sp-20);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-lg);
}

.pill[data-tone="brand"] { background: var(--c-brand); color: var(--c-on-brand); }
.pill[data-tone="blue"]  { background: var(--c-blue);  color: var(--c-on-blue); }

.home-title {
  margin: var(--sp-18) 0 0;
  font-size: clamp(calc(26 / 16 * 1rem), 3.4vw, calc(38 / 16 * 1rem));
  font-weight: var(--fw-black);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   預かり保育の3つの丸
   ⚠ 円の色は CSS で持つ。画像は白1色（テーマ色を変えたときに取り残さない）
   -------------------------------------------------------------------------- */
.circles {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(var(--sp-28), 6vw, calc(88 / 16 * 1rem));
  margin-top: calc(64 / 16 * 1rem);
  flex-wrap: wrap;
}

.circle-item { width: calc(240 / 16 * 1rem); }
.circle-item[data-offset="1"] { margin-top: var(--sp-56); }
.circle-item[data-offset="2"] { margin-top: var(--sp-24); }

.circle-item__disc {
  display: grid;
  place-items: center;
  width: clamp(calc(170 / 16 * 1rem), 17vw, calc(205 / 16 * 1rem));
  height: clamp(calc(170 / 16 * 1rem), 17vw, calc(205 / 16 * 1rem));
  margin: 0 auto;
  border-radius: var(--r-circle);
}

.circle-item[data-tone="blue"]  .circle-item__disc { background: var(--c-blue-light); }
.circle-item[data-tone="brand"] .circle-item__disc { background: var(--c-brand-light); }
.circle-item[data-tone="green"] .circle-item__disc { background: var(--c-green-light); }

.circle-item__label {
  margin-top: var(--sp-20);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1.5;
}

.circle-item[data-tone="blue"]  .circle-item__label { color: var(--c-deep-blue); }
.circle-item[data-tone="brand"] .circle-item__label { color: var(--c-deep-orange); }
.circle-item[data-tone="green"] .circle-item__label { color: var(--c-deep-green); }

.circle-item__value { display: block; font-size: var(--fs-4xl); }

/* --------------------------------------------------------------------------
   カード（カード全体が <a>。中に <a> や <button> を入れない）
   -------------------------------------------------------------------------- */
.bcards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-16);
  max-width: calc(1040 / 16 * 1rem);
  margin: calc(64 / 16 * 1rem) auto 0;
}

.bcards[data-gap="sm"] { margin-top: var(--sp-44); text-align: left; }

.bcard {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: calc(340 / 16 * 1rem);
  padding: var(--sp-28) var(--sp-24) 0;
  background: var(--c-surface);
  color: var(--c-on-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease);
  height: 100%;
}

.bcards > li { grid-column: span 12; }

.bcard__jp {
  display: block;
  text-align: center;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
}

.bcard__en {
  display: block;
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 3px;
}
.bcard__en[data-tone="blue"]  { color: var(--c-text-blue); }
.bcard__en[data-tone="green"] { color: var(--c-text-green); }
.bcard__en[data-tone="brand"] { color: var(--c-text-brand); }
.bcard__en[data-tone="pink"]  { color: var(--c-text-pink); }

.bcard__more {
  display: block;
  margin-top: var(--sp-10);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-on-surface);
}

.bcard__panel {
  position: absolute;
  left: var(--sp-16);
  right: var(--sp-16);
  top: calc(132 / 16 * 1rem);
  bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: transform var(--dur-base) var(--ease);
}

.bcard__panel img { width: 100%; height: 100%; object-fit: cover; }

/* アイコンだけを中央に置く版（園生活のサポート） */
.bcard__panel[data-fill] { display: grid; place-items: center; }
.bcard__panel[data-fill] img { width: calc(72 / 16 * 1rem); height: calc(72 / 16 * 1rem); object-fit: contain; }
.bcard__panel[data-fill="cream"] { background: var(--c-slot-few); }
.bcard__panel[data-fill="green"] { background: var(--c-cat-news); }
.bcard__panel[data-fill="blue"]  { background: var(--c-cat-blog); }
.bcard__panel[data-fill="pink"]  { background: #F4DCE6; }

/* 園生活のサポートは6カラム・少し低い */
.bcard[data-size="s"] { min-height: calc(300 / 16 * 1rem); }
.bcard[data-size="s"] .bcard__panel { top: calc(120 / 16 * 1rem); }

/* ホバーできる環境だけで動かす。スマホでは止まった状態で成立する */
@media (hover: hover) {
  .bcard:hover { transform: scale(.97) rotate(-1deg); color: var(--c-on-surface); }
  .bcard:hover .bcard__panel { transform: translateY(4px) rotate(2deg); }
  .bcard:hover .bcard__jp { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  .bcard, .bcard__panel { transition: none; }
  .bcard:hover { transform: none; }
  .bcard:hover .bcard__panel { transform: translateY(8px); }
}

/* 901px 以上でだけ 12カラムに配分する（8,4,4,8,8,4） */
@media (min-width: 901px) {
  .bcards > li[data-span="8"] { grid-column: span 8; }
  .bcards > li[data-span="4"] { grid-column: span 4; }
  .bcards > li[data-span="6"] { grid-column: span 6; }
}

/* --------------------------------------------------------------------------
   ABOUT の写真＋バッジ
   -------------------------------------------------------------------------- */
.movie {
  position: relative;
  max-width: calc(1060 / 16 * 1rem);
  margin: var(--sp-44) auto 0;
}

.movie__img {
  width: 100%;
  height: clamp(calc(220 / 16 * 1rem), 34vw, calc(420 / 16 * 1rem));
  object-fit: cover;
  border-radius: var(--r-md);
}

.movie__badge {
  position: absolute;
  left: var(--sp-24);
  top: calc(-26 / 16 * 1rem);
  display: grid;
  place-items: center;
  width: calc(130 / 16 * 1rem);
  height: calc(120 / 16 * 1rem);
  background: var(--c-pink);
  color: var(--c-on-pink);
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  line-height: 1.5;
  pointer-events: none;
}

.movie__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: calc(86 / 16 * 1rem);
  height: calc(60 / 16 * 1rem);
  background: var(--c-danger);
  border-radius: var(--r-md);
  pointer-events: none;
}

.movie__play::after {
  content: "";
  border-left: 22px solid var(--c-surface);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

/* --------------------------------------------------------------------------
   園生活のサポートの丸アイコン・関連リンク
   -------------------------------------------------------------------------- */
.support-icon {
  display: grid;
  place-items: center;
  width: calc(96 / 16 * 1rem);
  height: calc(96 / 16 * 1rem);
  margin: 0 auto var(--sp-14);
  background: var(--c-surface);
  border-radius: var(--r-circle);
}

.support-icon img { width: clamp(calc(48 / 16 * 1rem), 7vw, calc(64 / 16 * 1rem)); height: auto; }

.support-links {
  max-width: var(--w-narrow);
  margin: var(--sp-44) auto 0;
  text-align: left;
  font-size: var(--fs-md);
  line-height: 2.2;
}

.support-links a { color: inherit; }

/* --------------------------------------------------------------------------
   制服のバナー
   -------------------------------------------------------------------------- */
.uniform {
  position: relative;
  max-width: var(--w-content);
  margin: 0 auto;
}

.uniform__frame {
  height: clamp(calc(180 / 16 * 1rem), 22vw, calc(260 / 16 * 1rem));
  border: 6px solid var(--c-surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.uniform__frame img { width: 100%; height: 100%; object-fit: cover; }

.uniform__btn {
  position: absolute;
  left: 50%;
  bottom: calc(-22 / 16 * 1rem);
  transform: translateX(-50%);
  padding: var(--sp-16) var(--sp-56);
  background: #86B34A;
  color: var(--c-ink-strong);     /* 7.0:1  面はそのまま */
  border-radius: var(--r-md);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: 3px;
  text-decoration: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   入園案内（左に文章・右に丸い写真）
   -------------------------------------------------------------------------- */
.guide {
  display: flex;
  gap: clamp(var(--sp-30), 5vw, var(--sp-70));
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: calc(1120 / 16 * 1rem);
  margin: 0 auto;
}

.guide__body { flex: 1; min-width: min(100%, calc(300 / 16 * 1rem)); max-width: calc(480 / 16 * 1rem); }

.guide__icon { width: clamp(calc(48 / 16 * 1rem), 7vw, calc(64 / 16 * 1rem)); margin-bottom: var(--sp-10); }

.guide__title {
  margin: var(--sp-16) 0 0;
  font-size: clamp(calc(26 / 16 * 1rem), 3.2vw, calc(36 / 16 * 1rem));
  font-weight: var(--fw-black);
  line-height: 1.6;
}

.guide__text { margin-top: var(--sp-22); line-height: 2.4; }

.guide__photos {
  position: relative;
  flex: 1;
  min-width: min(100%, calc(320 / 16 * 1rem));
  max-width: calc(560 / 16 * 1rem);
  aspect-ratio: 1.15 / 1;
}

.guide__photos img { position: absolute; border-radius: var(--r-circle); object-fit: cover; aspect-ratio: 1; }
.guide__photos img:nth-child(1) { left: 0;      top: 10%;    width: 56%; }
.guide__photos img:nth-child(2) { right: 4%;    top: 0;      width: 32%; }
.guide__photos img:nth-child(3) { right: 10%;   bottom: 8%;  width: 24%; }

.guide__actions { display: flex; flex-wrap: wrap; gap: var(--sp-14); margin-top: var(--sp-32); }

/* --------------------------------------------------------------------------
   採用案内（左に写真・右に文章）
   -------------------------------------------------------------------------- */
.recruit-block {
  display: flex;
  gap: var(--sp-56);
  align-items: center;
  flex-wrap: wrap;
}

.recruit-block__figure {
  flex: 1.2;
  min-width: min(100%, calc(340 / 16 * 1rem));
  height: clamp(calc(240 / 16 * 1rem), 28vw, calc(440 / 16 * 1rem));
  margin: 0;
}

.recruit-block__figure img { width: 100%; height: 100%; object-fit: cover; }

.recruit-block__body {
  flex: 1;
  min-width: min(100%, calc(320 / 16 * 1rem));
  max-width: calc(560 / 16 * 1rem);
  padding-right: var(--sp-24);
}

.recruit-block__en {
  display: block;
  margin-top: var(--sp-6);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  letter-spacing: 6px;
}

.recruit-block__text { margin-top: var(--sp-30); padding-inline: var(--sp-24); line-height: 2.3; }

@media (max-width: 900px) {
  .recruit-block__body { padding-right: var(--gutter); padding-left: var(--gutter); }
  .recruit-block__text { padding-inline: 0; }
}