/* =====================================================================
共通設定
   ===================================================================== */
/* ホバーアニメーション設定（共通） */
.u-hover-color,
a[href^="tel:"] {
  transition: opacity 0.2s;
}
.u-hover-color:hover,
a[href^="tel:"]:hover {
  opacity: 0.85;
}
.u-hover-color a[href^="tel:"]:hover {
  opacity: 1;
}
/* ▲ ホバーアニメーション設定（共通）（ここまで） */

@media screen and (max-width: 639px) {
  /* タイトルの文字：小さくする（40.8px → 30px） */
  .page-header-heading {
    font-size: 30px !important;
  }
}
/* ホバー時設定 */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
/* 見出しのフォントサイズ */
@media screen and (max-width: 639px) {
  .wp-block-heading {
    --_font-size-level: 3;
  }
  h2 {
    --_font-size-level: 2;
  }
}
/* ///////////////////////
フォント設定
////////////////////// */
.m-plus-rounded-1c {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

/* ///////////////////////
ヘッダー
////////////////////// */
/* メニュー項目（li）の左右の余白調整 */
header .p-global-nav .c-navbar__item > a {
  padding-left: 17px;
  padding-right: 17px;
}

/* お問い合わせボタンだけ、右端まで届く分を調整 */
header .sm-nav-menu-item-highlight > a {
  padding-right: 45.6px;
}
/* 左右余白を消す */
@media (min-width: 1024px) {
header .c-fluid-container {
  padding-right: 0;
  padding-left: 8px;
}
}
/* ボタンの高さをヘッダーいっぱいにする */
header .c-row__col--fit.u-invisible-md-down {
  align-self: stretch;
}
header .c-row__col--fit.u-invisible-md-down > nav {
  height: 100%;
}
header .c-navbar {
  height: 100%;
  align-items: stretch;
}
/* ヘッダーの背景色変更 */
.l-header {
	background-color: #fff8e6;
    box-shadow: none;
}
/* アイコンのパディング調整 */
@media (min-width: 1024px) {
	.l-1row-header__branding, .l-1row-header__content {
		padding-bottom : 0 !important;
	}
/* ヘッダーを常に薄い半透明にする */
.l-header {
  background-color: rgba(255, 248, 230, 0.8); 
  -webkit-backdrop-filter: blur(6px); 
  backdrop-filter: blur(6px); 
}
}

/* お問い合わせボタンアイコン調整 */
.menu-item-377 > a {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.menu-item-377 > a > span {
  flex-direction: column !important;
  align-items: center;
  line-height: 1.2;
}
.menu-item-377 svg {
  font-size: 17px;
  margin-bottom: 3px;
}

/* ///////////////////////
フッター
////////////////////// */
/* 背景文字色の調整 */
.c-copyright {
  background-color: #D8C4A8;
  color: #fff;
}
/* .l-footer {
  background-color: #D8C4A8;
	color: #fff;
} */


/* 4カラムの左右のパディング調整 */
.l-footer-widget-area__item {
  padding-left: 30px !important;
  padding-right: 20px !important;
}
@media (min-width: 1024px) {
  .l-footer-widget-area__item:nth-child(1) {
    --_item-width: 40% !important;
  }
  .l-footer-widget-area__item:nth-child(2),
  .l-footer-widget-area__item:nth-child(3),
  .l-footer-widget-area__item:nth-child(4) {
    --_item-width: 20% !important;
  }
}

/* ///////////////////////
ドロワーメニュー
////////////////////// */
/* ドロワーメニュー 位置*/
/* 背景色 */
nav#drawer-nav {
  background-color: #fff;
}
/* 全体真ん中寄せ */
.c-drawer__inner {
  text-align: center;
}
/* ロゴ真ん中寄せ、サイズ */
.c-hsm-message-box.c-hsm-message-box_invert.p-hsm-drawer.c-blinking {
  max-width: 50%;
  margin: 0 auto;
  margin-bottom: 2rem;
}

/* 高さ調整 */
[id="drawer-nav"].c-drawer--overall .c-drawer__inner {
  height: 100%;
}
/* メニューの文字 */
.c-drawer__menu {
  padding-top: 30px;
  color: #333;
  font-weight: bold;
}

/* ハンバーガーボタンの色（3本線の色もまとめて） */
.c-drawer .c-hamburger-btn__bar {
  background-color: #333;
}

/* ドロワーメニュー内の文字色 */
#drawer-nav,
#drawer-nav a {
  color: #333; /* ここも同じ色に */
}

/* ///////////////////////
トップページ
////////////////////// */
/* FVセクション */
/* 画像角丸に */
.smb-spider-slider__figure-wrapper {
  border-radius: 0 0 0 26px;
  overflow: hidden;
}

.fv {
	position: relative;
}
/* キャッチコピー */
.fv-heading {
	position: absolute;
	top: 65%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* 新キャッチコピー */
.fv .fv-contents__left {
    position: absolute;
    top: 50%;
    left: 20px;
    z-index: 2;
}
@media screen and (min-width: 1024px) {
    .fv .fv-contents__left {
        top: 60%;
        left: 50px;
    }
}
.fv-contents__left .wp-block-heading {
  background: rgba(255,255,255,0.85);
  padding: 20px 24px;
  border-radius: 12px;
  width: fit-content;
  margin-left: 0 !important;
}
.fv-contents__left p {
  text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 10px #fff, 0 0 14px #fff;
	padding-left: 24px;
}
.fv-img {
  margin-bottom: 40px !important;
}
.fv .smb-section__background {
    border-radius: 0px 0px 20px 0px;
}
/* 画像の配置調整 */
.fv-contents {
  justify-content: flex-end;
}

/* =========================
   スライダー
========================= */
.fv .smb-spider-slider {
	position: relative;
	height: 90vh;
}
/* スライダー内の高さを揃える */
.fv .smb-spider-slider .spider,
.fv .smb-spider-slider .spider__canvas,
.fv .smb-spider-slider .spider__slide,
.fv .smb-spider-slider .smb-spider-slider__figure-wrapper {
	height: 100%;
}

/* 画像 */
.fv .smb-spider-slider .spider__figure {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* =========================
   画像オーバーレイ
========================= */
.fv .smb-spider-slider__figure-wrapper {
	position: relative;
}

.fv .smb-spider-slider__figure-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.12);
	pointer-events: none;
}
/* =========================
   スライダーのドット
========================= */
.fv .spider__dots {
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: auto;
	z-index: 4;
	transform: none;
}
/* 通常のドット */
.fv .spider__dot {
	background-color: #ccc;
}
/* 選択中のドット */
.fv .spider__dot[aria-current="true"] {
	background-color: var(--wp--preset--color--sm-accent) !important;
}

/* ///////////////////////
お知らせセクション
////////////////////// */
.news time {
	color: #84ceb4;
	font-weight: bold;
}

/* ///////////////////////
特徴セクション
////////////////////// */
.features .smb-panels__item--free {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
.features .smb-panels__item__body {
  padding: 0;
}
.features .smb-panels__item__body h3 {
  padding: 16px 20px 4px;
}
.features .smb-panels__item__body p {
  padding: 0 20px 18px;
}

.feat-1::before, .feat-2::before, .feat-3::before, .feat-4::before, .feat-5::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  background: #f4c64e;
  color: #fff;
  font-weight: 900;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px 0 14px 0;
  z-index: 2;
}
.feat-1::before { content: "1"; }
.feat-2::before { content: "2"; }
.feat-3::before { content: "3"; }
.feat-4::before { content: "4"; }
.feat-5::before { content: "5"; }

.features-list .c-row {
  justify-content: center;
}

/* 特色セクション：4番・5番パネル付近にワンポイントの飾り画像 */
section.features {
  position: relative;
  overflow: visible;
}
section.features::after {
  content: "";
  position: absolute;
  right: 14%;
  bottom: 145px;
  width: 100px;
  height: 100px;
  background-image: url("/wp-content/uploads/2026/09/icon11.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
section.features::before {
  content: "";
  position: absolute;
  left: 7%;
  top: 847px;
  width: 100px;
  height: 100px;
  background-image: url("/wp-content/uploads/2026/09/icon1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

/* ///////////////////////
保護者の声セクション
////////////////////// */
/* 矢印を表示する */
.smb-spider-contents-slider .spider__arrow {
  font-size: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.15);
  position: relative;
}
.smb-spider-contents-slider .spider__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #5aa88d;
  border-right: 2px solid #5aa88d;
}
.smb-spider-contents-slider .spider__arrow[data-direction="prev"]::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.smb-spider-contents-slider .spider__arrow[data-direction="next"]::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
.smb-spider-contents-slider .spider__arrows {
  left: -20px;
  right: -20px;
}

/* ////////////////////////
accessセクション
//////////////////////// */
/* テーブルの調整 */
.access .access-table strong {
  width: 75px;
  display: inline-block;
}
/* テーブルの下線の装飾 */
.access table,
td {
  border-bottom: 1px solid #ece2d6 !important;
}
table td:first-child {
  white-space: nowrap;
}
/* ///////////////////////
お問い合わせセクション
////////////////////// */
/* お問い合わせセクションの電話・メールの枠角丸に */
.contact-panel .smb-panels__item {
  border-radius: 16px; 
  box-shadow: none; 
}

/* ///////////////////////
ここから下層ページ
////////////////////// */
/* ////////////////////////
下層ページ全体設定
//////////////////////// */
/* ヘッダー下の余白を消す */
.page .l-contents__inner {
  padding-top: 0;
  padding-bottom: 0;
 margin-bottom: 0;
}
/* 見出しを表示しない */
.page .c-entry__header {
  display: none;
}
	
/* h1文字の太さ */
.page-header-heading {
	font-weight: 500;
}
/* ////////////////////////
入園案内ページ
//////////////////////// */
/* 情報テーブル横並び */
.smb-information__item .c-row {
  flex-wrap: nowrap;
}
.smb-information__item .c-row__col--md-1-4 {
  width: 180px;
  flex: 0 0 180px;
}
.smb-information__item .c-row__col--md-3-4 {
  flex: 1 1 auto;
  width: auto;
}

/* 入園の流れデザイン調整 */
.flow-item .smb-panels__item {
 border-radius: 0 36px 0 36px;
}
@media screen and (min-width: 640px) {
    .is-style-RJE_R002LP_flow_panels:not(:root) .smb-panels__item {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
/* 募集要項・通園制度：テーブルの罫線色を変更 */
.is-style-RJE_R001CORP_infomation .smb-information__item > .c-row > .c-row__col:last-child {
  border-bottom-color: #84ceb4;
}

/* 募集要項・通園制度：項目名（ラベル）の文字色を変更 */
.is-style-RJE_R001CORP_infomation .smb-information__item__label {
  color: #4c3e3e;
}

/* よくあるご質問調整　*/
.faq-item {
  border-radius: 12px;
  overflow: hidden;
}
/* 質問ごとの枠に線を追加 */
.faq-item .smb-accordion__item__title{
  border: 1px solid #ece3d0;
  border-radius: 12px;
}
.faq-item .smb-accordion__item__control:checked + .smb-accordion__item__title{
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}
.faq-item .smb-accordion__item__control:checked + .smb-accordion__item__title + .smb-accordion__item__body{
  border: 1px solid #ece3d0;
  border-top: none;
  border-radius: 0 0 12px 12px;
}

/* ////////////////////////
お問合せ
//////////////////////// */
/* 確認画面で説明文非表示に */
[data-screen="confirm"] .input {
  display: none;
}
[data-screen="input"] .confirm,
[data-screen="invalid"] .confirm {
  display: none;
}
/* ボタンの文字を太字に */
.snow-monkey-form--button-has-accent-color .smf-button-control__control {
  font-weight: bold;
  border-radius: 25px;
}

/* =====================================================================
   トップページのレスポンシブ調整用CSS
   ===================================================================== */
/* ▼ 1. FV（スマホ） */
/* 【スマホ】スマホ用のトップ画像（お客様の修正依頼①）
   ゆりえさんがブロックでスマホ専用に作り直したセクション（追加CSSクラス：fv-sp）に効かせる
   ・写真（fv-img-sp）は横長（4：3）で表示
   ・写真の下に、ゆるやかな波の形のクリーム色の帯（fv-contents-sp）を重ね、キャッチコピーを入れる（中央揃えはブロックで設定）
   ※以前の「.fv.sme-hidden-md」向けの指定（写真の高さ・文字を写真に重ねる・切り取り位置など）は、不要になったので削除しました */

/* セクションの高さ：「広め（画面の75%）」だと、中身より高い分、上下に空白ができるので、中身に合わせる
   ※ブロックの設定で、セクションの高さを「フィット」にできる場合は、この指定は不要です */
.fv-sp {
  --smb-section--min-height: 0px;
}

@media screen and (max-width: 639px) {
  /* 写真：左下の角丸（全体共通の指定）は曲線で隠れるので、なしにする */
  .fv-img-sp {
    position: relative;
  }

  .fv-img-sp .smb-spider-slider__figure-wrapper {
    border-radius: 0;
    aspect-ratio: 5 / 4; /* 写真の高さ */
  }

  /* 写真を枠いっぱいに表示する（枠より横長の分は、左右が少しだけ切れる） */
  .fv-img-sp .spider__figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ドット（写真の切り替えの丸）：写真の下に出ていたので、写真の右下（曲線の少し上）に重ねる */
  .fv-img-sp .spider__dots {
    position: absolute;
    right: 16px;
    bottom: 44px;
    z-index: 4;
    margin: 0;
    gap: 10px;
  }

  /* ドットの色：薄いグレーだと写真の明るい部分に溶けて見えないので、白＋うっすら影にする */
  .fv-img-sp .spider__dot {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }

  .fv-img-sp .spider__dot[aria-current="true"] {
    background-color: var(--wp--preset--color--sm-accent) !important;
  }

  /* キャッチコピーの帯：クリーム色の背景（中央揃えはブロックで設定）
     ※ブロック側の上の余白があると、波と写真の間にすき間ができるので 0 にする（!important） */
  .fv-contents-sp {
    position: relative;
    z-index: 3;
    margin-top: 0 !important;
    padding: 14px 16px 32px;
    background: linear-gradient(180deg, #fff8e6 0%, #fff8e6 30%, #fdecbf 100%);
  }

  /* 写真の下のやわらかい曲線：画面の端から端まで、ゆるやかな波の形（クリーム色）を写真の下に重ねる
     （ドーム型だと両端が角のように見えたため、参考画像に合わせて波の形に変更）
     ・top: -39px / height: 40px ＝ 波の高さ（写真に重なる量）。数字を大きくすると波が大きくなる */
  .fv-contents-sp::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C 70 4 150 2 225 18 S 330 34 375 12 L375 40 L0 40 Z' fill='%23fff8e6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }

  /* 説明文の行間を少し広げる（中央揃えは、ブロックの設定で済ませているので、CSSでは指定しない） */
  .fv-contents-sp p {
    line-height: 1.9;
  }
}

/* FV（タブレット） */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .fv.sme-hidden-sm {
    --smb-section--min-height: 0px;
  }

  .fv.sme-hidden-sm .smb-spider-slider {
    height: clamp(520px, 65vh, 720px);
  }
}

/* 【タブレットの狭い幅（640px〜767px）】 画面の幅に合わせて文字を小さくして、1行に収める */
@media screen and (min-width: 640px) and (max-width: 767px) {
  .fv.sme-hidden-sm .fv-contents__left .wp-block-heading {
    font-size: min(41px, calc((100vw - 96px) / 15.5)) !important;
  }
}

/* 【タブレット・パソコン】見出し「小さな園で、ゆっくり大きく育つ」を、タブレットで2行にする */
@media screen and (min-width: 1024px) {
  .fv.sme-hidden-sm .fv-contents__left .wp-block-heading br {
    display: none;
  }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .fv.sme-hidden-sm .fv-contents__left .wp-block-heading {
    display: inline;      /* 文字の長さに合わせた白い枠にする（1行ずつ枠がつく） */
    padding: 12px 24px !important;  /* 枠の内側の余白（上下12px・左右24px） */
    line-height: 2.3;     /* 行の間隔（2つの枠がくっつかない広さ） */
    border-radius: 12px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
/* ▲ 1. FV（ここまで） */



/* ▼ 2. グローバルメニュー（ヘッダーの一番上のメニュー）（ここから） */

/* 【パソコンの狭い幅：1024px〜1099pxだけ】*/
@media screen and (min-width: 1024px) and (max-width: 1099px) {
  header .p-global-nav .c-navbar__item > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap;
  }
}
/* ▲ 2. グローバルメニュー（ここまで） */



/* ▼ 3・4 の共通：「園の想い」と「小規模だからできること」の見出しの左右の飾り（ここから） */

/* 【タブレット（640px〜781px）】 */
@media screen and (min-width: 640px) and (max-width: 781px) {
  /* 折り返さずに横に並べる（列のすき間も狭くする） */
  :is(.sec-about, .features) .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  /* 列の幅：積まれると全部100%になってしまうので、横並び用に決め直す
     ・基本：残りの幅を使う（真ん中の文章の列など） */
  :is(.sec-about, .features) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex: 1 1 0 !important;
  }

  /* ・左右の飾りの列：12% */
  :is(.sec-about, .features) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:is([style*="flex-basis:10%"], [style*="flex-basis:18%"], [style*="flex-basis:20%"]) {
    flex: 0 0 12% !important;
  }
}
/* ▲ 3・4 の共通（ここまで） */



/* ▼ 3. 園の想い（.sec-about）（ここから） */

/* 【スマホ】 */
@media screen and (max-width: 639px) {
  /* ピンクの丸の飾りを、スライダー写真の上の縁に少し被せる */
  .sec-about img.wp-image-475 {
    display: block;
    margin-bottom: -65px;
    position: relative;
    z-index: 1;
  }

  /* スライダーの矢印：画面の端にくっついてはみ出して見えるので、内側に少し寄せる */
  .sec-about .smb-spider-contents-slider .spider__arrows {
    left: -8px;
    right: -8px;
  }

  /* スライダーの矢印の白い丸：小さくする（40px → 32px。数字を小さくするほど小さくなる） */
  .sec-about .smb-spider-contents-slider .spider__arrow {
    width: 32px;
    height: 32px;
  }
}

/* 【タブレット（640px〜781px）】文章：1行の終わりに「ず。」だけが残らないよう、文字を少し小さく（17px）する */
@media screen and (min-width: 640px) and (max-width: 781px) {
  .sec-about .wp-block-column[style*="flex-basis:64%"] p {
    font-size: 17px !important;
    text-wrap: pretty;
  }
}

/* 【タブレット（640px〜1023px）】右側の飾り（ピンクの丸）を、スマホと同じように、下（スライダーの写真のすぐ上）に置く*/
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .sec-about .wp-block-columns > .wp-block-column:last-child {
    align-self: flex-end;
  }

  .sec-about .wp-block-columns > .wp-block-column:last-child figure {
    margin: 0 0 -40px;
    max-width: 100%;
  }

  .sec-about .wp-block-columns > .wp-block-column:last-child img {
    position: relative;
    z-index: 1;
  }
}
/* ▲ 3. 園の想い（ここまで） */



/* ▼ 4. 小規模だからできること（.features）（ここから） */

/* 【スマホ】 */
@media screen and (max-width: 639px) {
  /* 右上の飾り：見出しとの間の空きが大きかったので、
     上の空きを少し減らして、見出しに近づける（バランスを取る）
     ※上下の余白が別の指定に負けるので !important をつけています */
  .features figure.wp-block-image:has(> img.wp-image-574) {
    margin-top: -30px !important;
    margin-bottom: -20px !important;
  }

  /* 特徴1〜5の見出し：文字が枠に入りきらず、2つ目が3行になっていたので、
     文字を少し小さくして「意図した2行」に収める（画面が狭くても収まるよう、画面幅に合わせて縮む） */
  .features .smb-panels__item__body .wp-block-heading {
    font-size: min(22px, 5.6vw);
  }
}

/* 【タブレット（640px〜1023px）】特徴1〜5のカードを2列にする（1列だと1枚が約830pxと長すぎるため）
   ※5枚目は1枚だけになるので、真ん中に置く */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .features .features-list .c-row {
    justify-content: center;
  }

  .features .features-list-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 【飾り（黄色のドーナツ・ピンクの輪の画像）：タブレット・スマホ】 */

/* タブレット（画面の幅640px〜1023px） */
@media screen and (max-width: 1023px) {
  section.features::before,
  section.features::after {
    top: auto;     /* 上からの位置（px固定）をやめる */
    width: 90px;   /* 大きさ */
    height: 90px;
  }

  section.features::before {
    left: 6%;
    bottom: 50px;
  }

  section.features::after {
    right: 3%;
    bottom: 15%;
  }
}

/* スマホ（画面の幅639px以下）：タブレットの指定を、次のように上書きする */
@media screen and (max-width: 639px) {
  section.features::before,
  section.features::after {
    width: 64px;
    height: 64px;
  }

  section.features::before {
    bottom: 0;
  }

  section.features::after {
    right: 1%;
    bottom: 4%;
  }
}
/* ▲ 4. 小規模だからできること（ここまで） */



/* ▼ 5. 通園制度（.sec-tsuen）（ここから） */
@media screen and (max-width: 639px) {
  .sec-tsuen .smb-box {
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* ▲ 5. 通園制度（ここまで） */



/* ▼ 6. 保護者の声（.sec-voice）（ここから） */
/* 【スマホ・タブレット共通（画面の幅1023px以下）】保護者の声は、タブレットもスマホと同じ表示に合わせる
   ※パソコン用（.sme-hidden-sm と .sme-hidden-md がついたほう）は、この幅では非表示なので影響しません */
@media screen and (max-width: 1023px) {
  /* 左のみどりの丸（引用符のアイコン）を消す
     （アイコンの分の幅が取られて、文章が約200pxの狭い幅になっていた → 約270pxに広がる） */
  .sec-voice .smb-testimonial__item__figure {
    display: none;
  }

  /* スライダーの矢印：画面の端にくっついてはみ出して見えるので、内側に少し寄せ、白い丸も小さくする
     （元は写真の外へ20pxはみ出す設定 → 8pxに変更。丸は40px → 32px） */
  .sec-voice .smb-spider-contents-slider .spider__arrows {
    left: -8px;
    right: -8px;
  }

  .sec-voice .smb-spider-contents-slider .spider__arrow {
    width: 32px;
    height: 32px;
  }

  /* 右の木の飾り：列に入れると、写真の下に離れて置かれたり、小さく縮んだりしていたので、
     文章の列からはずして、右下（ページの点の横）に置く */
  .sec-voice .wp-block-columns {
    position: relative;
  }

  /* ボックス（スライダー）の列：常に全幅にする */
  .sec-voice .wp-block-columns > .wp-block-column:first-child {
    flex-basis: 100% !important;
  }
  .sec-voice .wp-block-columns > .wp-block-column:last-child {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 82px;
  }
  .sec-voice .wp-block-columns > .wp-block-column:last-child figure {
    margin: 0;
    max-width: 100%;
  }
}
/* ▲ 6. 保護者の声（ここまで） */


/* ▼ 7. アクセス（.sec-access）（ここから） */
/* 【スマホ】 */
@media screen and (max-width: 639px) {
  /* 表：各セルの左右の余白を狭くする（10.2px → 6px。その分、文章の幅が広がる）
     ※別の指定に負けるので !important をつけています */
  .sec-access .access-table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  /* 表：縦並びにする（項目名が上、内容が下）※お試し。横並びに戻したいときは、ここから下の3つの指定を消す
     ・表を「横に並べる」仕組みをやめて、1つずつ縦に積む */
  .sec-access .access-table table,
  .sec-access .access-table tbody,
  .sec-access .access-table tr,
  .sec-access .access-table td {
    display: block;
    width: 100%;
  }
  /* ・項目名（名称・住所など）：上に余白、下は内容にくっつける。項目名の下の線は消す */
  .sec-access .access-table td:first-child {
    padding-top: 16px;
    padding-bottom: 2px;
    border-bottom: none !important;
  }
  /* ・内容：項目名のすぐ下に置き、下に余白と区切りの線を残す */
  .sec-access .access-table td:last-child {
    padding-top: 0;
    padding-bottom: 16px;
  }
}
/* ▲ 7. アクセス（ここまで） */


/* ▼ 8. お問い合わせ（.contact）（ここから） */
/* 【スマホ】 */
@media screen and (max-width: 639px) {
  /* 電話・メールのアイコンを小さくする */
  .contact img.wp-image-369,
  .contact img.wp-image-371 {
    width: 44px !important;
  }
  /* 電話番号と「お問い合わせフォーム」の文字を小さくする */
  .contact .wp-block-paragraph.has-sm-2-xl-font-size {
    font-size: min(21px, 5.6vw) !important;
  }
 /* 電話・お問い合わせフォームの2つの枠：内側の左右の余白を狭くする（30.6px → 16px） */
  .contact .contact-panel .smb-panels__item__body {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* 【タブレット（640px〜819px）】電話番号が、途中で折り返さないよう文字を小さくする */
@media screen and (min-width: 640px) and (max-width: 819px) {
  .contact .wp-block-paragraph.has-sm-2-xl-font-size {
    font-size: min(21px, 3vw) !important;
  }
}
/* ▲ 8. お問い合わせ（ここまで） */


/* ▼ 9. お知らせの一覧・記事ページ（ここから） */
/* インナー幅設定 */
.blog .l-contents__inner,
.archive .l-contents__inner,
.single .l-contents__inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* お知らせページのタイトルの帯高さ調整 */
@media screen and (max-width: 639px) {
  .c-page-header[data-has-image="true"] {
    height: 180px;
  }
}

.c-page-header__title {
  color: var(--sub-accent-color, #84ceb4);
}
/* デフォルトのヘッダー画像を消す */
.page .c-page-header {
  display: none;
}
/* ▲ 9. お知らせの一覧・記事ページ（ここまで） */


/* ▼ 10. フッター（ここから） */
/* ロゴ（全サイズ共通） */
.l-footer img.wp-image-684 {
  aspect-ratio: auto !important;
}
/* 【固定フッター（画面の下の3つのボタン）】 */
/* 全体：もっと目立たせるため、白い背景 → メインカラーの黄色（ボタンと同じ色）に変更（お客様の修正依頼⑤）
   上の角を少し丸くし、うすい影をつけて、やわらかく浮いて見えるようにする */
.p-footer-sticky-nav {
  background: var(--accent-color, #edc757);
  border-top: none;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* 文字調整：黄色の上でも読みやすいよう、こげ茶の文字を太めに（お客様の修正依頼⑤）
   アイコンの白い丸が入る分、文字を少し小さく（13px → 12px）して、上下の余白を調整 */
.p-footer-sticky-nav .c-navbar__item>a {
  color: #4c3e3e;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 0 8px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
/* アイコン：白い丸の中に入れて、かわいらしく目立たせる */
.p-footer-sticky-nav svg {
  width: 18px;
  height: 18px;
  padding: 7px;
  background: radial-gradient(circle closest-side, #fff 96%, transparent 100%);
  box-sizing: content-box;
  margin-bottom: 2px;
}

/* アイコンの色：ロゴのりんごのように、1つずつ色を変える（左から コーラル／ミント／オレンジ） */
.p-footer-sticky-nav .c-navbar__item:nth-child(1) svg { color: #ef8e7a; } /* アクセス */
.p-footer-sticky-nav .c-navbar__item:nth-child(2) svg { color: #3f9d84; } /* お問い合わせ */
.p-footer-sticky-nav .c-navbar__item:nth-child(3) svg { color: #f3a152; } /* 採用情報 */

/* 3つの間の縦線：黄色の上でなじむよう、白の点線に変更（お客様の修正依頼⑤） */
.p-footer-sticky-nav .c-navbar__item + .c-navbar__item {
  border-left: 1px dashed rgba(255, 255, 255, 0.8);
}

/* フッターの余白（スマホ） */
@media screen and (max-width: 639px) {
  .l-footer-widget-area__item:has(> .c-widget > p.wp-block-paragraph:empty) {
    display: none;
  }

  .l-footer-widget-area__item:has(> .widget_nav_menu) {
    margin-bottom: 9.6px;
  }

  /* ※テーマが「.l-footer--default .l-footer-widget-area」で指定しているので、同じ書き方にしないと負けてしまう */
  .l-footer--default .l-footer-widget-area {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* フッター全体を中央揃え（スマホ） */
@media screen and (max-width: 1023px) {
  /* 文字（住所・メニュー）を中央に */
  .l-footer-widget-area {
    text-align: center;
  }

  /* 横に並ぶもの（SNSのアイコン、お問い合わせボタン）を中央に */
  .l-footer-widget-area .wp-block-group.is-layout-flex,
  .l-footer-widget-area .smb-buttons {
    justify-content: center;
  }
  .l-footer-widget-area img.wp-image-684 {
    margin-left: auto;
    margin-right: auto;
  }

  /* 箱の内側の余白、左右25pxにそろえる */
  .l-footer-widget-area .l-footer-widget-area__item {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}

/* 　上へ戻るボタン位置調整　*/
.c-page-top {
  margin-bottom: 12px;
}
/* ▲ 10. フッター（ここまで） */

/* =====================================================================
   お問い合わせページのレスポンシブ調整用CSS
   ===================================================================== */
/* 【スマホ】 */
@media screen and (max-width: 639px) {
  /*   フォームの幅に収める */
  .smf-select-control,
  .smf-select-control__control {
    width: 100%;
    max-width: 100%;
  }

  /* 左右の余白：二重にかかっていた余白（約20px）をなくして、フォームや電話の箱の幅を広げる
     （画面幅375pxで、293px → 334px） */
  body:has(.snow-monkey-form) .c-entry__content .c-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* タイトルの帯：高さを低くして（280px → 180px）、見出しの文字も小さくする（40.8px → 30px）
     ※高さが直接書かれているので !important をつけています */
  body:has(.snow-monkey-form) .wp-block-cover.alignfull {
    min-height: 180px !important;
  }

  body:has(.snow-monkey-form) .page-header-heading {
    font-size: 30px !important;
  }

  /* タイトルの帯と説明文の間の空きを狭くする（約115px → 約69px） */
  body:has(.snow-monkey-form) .c-entry__content .smb-section {
    padding-top: 8px;
  }

  /* 黄色い見出し（電話の箱など）：文字が大きすぎて折り返すことがあるので、小さくして1行に（25.5px → 19px） */
  body:has(.snow-monkey-form) .c-entry__content h2 {
    font-size: 19px !important;
  }

  /* 電話番号：文字を小さく（30.6px → 24px）、字間を詰めて（5.1px → 2px）1行に収める
     ※文字の大きさと字間が、別の指定に負けるので !important をつけています */
  body:has(.snow-monkey-form) .c-entry__content p.has-sm-3-xl-font-size {
    font-size: 24px !important;
  }

  body:has(.snow-monkey-form) .c-entry__content .sme-letter-spacing {
    letter-spacing: 2px !important;
  }

  /* 「確認画面へ」ボタン：幅を広げる（126px → 240px以上）
     （これもSnow Monkey Form自体の部品なので、page-id も :has() も不要） */
  .smf-button-control__control {
    min-width: 240px;
  }
	  /* 確認画面の「戻る」「送信する」ボタン：幅を240px以上にしたため横に入りきらず折り返し、
     2つ目のボタンに付いている左の余白で右にずれ、上下もくっついていたので、
     縦に並べて中央にそろえ、間を12pxあける */
  .smf-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .smf-action .smf-button-control + .smf-button-control {
    margin-left: 0;
  }
}
/* ▲ お問い合わせフォームのページ（共通）（ここまで） */

/* =====================================================================
   入園案内ページのレスポンシブ調整用CSS
   ===================================================================== */
@media screen and (max-width: 639px) {
  .smb-information__item .c-row {
    flex-wrap: wrap;
  }

  .smb-information__item .c-row__col {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* 項目名（ラベル）の下に、少し余白をつける（内容との間が詰まりすぎないように） */
  .smb-information__item__label {
    padding-bottom: 4px;
  }
}
/* ▲ 12. 情報ブロックを縦並びにする（共通）（ここまで） */


/* ▼ 13. ボタンの文字が画面より長いとき、折り返す（共通）（ここから） */
@media screen and (max-width: 639px) {
  .smb-btn__label {
    font-size: min(17px, 4.4vw) !important;
  }
  .smb-btn,
  .smb-btn__label {
    white-space: normal !important;
  }
}
/* ▲ 13. ボタンの折り返し（共通）（ここまで） */




/* ▼ 入園案内ページ「入園までの流れ」を横スワイプにする（スマホ）（お客様の修正依頼⑦） */
/* 縦に6つ並んで約3,000pxと長かったので、スマホだけ横に並べて、指で横にスワイプして見られるようにする
   ・パネルブロックは1つのまま使う（手順の番号は、1つのパネルブロックの中で自動で数える仕組みのため、分けると全部「1」になる）
   ・最後まで進むとそこで止まる（ループはしない）
   ・パソコン・タブレットは、これまでどおり */
@media screen and (max-width: 639px) {
  /* 横1列に並べて、はみ出した分を横スクロールにする。スワイプすると1枚ずつぴたっと止まる
     ・カードとカードの間は12px
     ・元の左右のマイナス余白（-30px）があると、1枚目の左側が切れてしまうので0にする（別の指定に負けるので !important） */
  .is-style-RJE_R002LP_flow_panels:not(:root) > .c-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 12px;
  }

  /* 1枚の幅：約85%にして、右に次の手順が少し見えるようにする（横にスワイプできると気づいてもらうため）
     ・カードの外側の余白（左右30px）は、カードの間の12pxに置き換えるので0にする */
  .is-style-RJE_R002LP_flow_panels > .c-row > .c-row__col {
    flex: 0 0 85%;
    max-width: 85%;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-align: start;
    margin-bottom: 0;
  }

  /* カードの内側の左右の余白：約35px → 24px（文章の幅が狭すぎて、1行が7〜8文字になっていたため） */
  .is-style-RJE_R002LP_flow_panels:not(:root) .smb-panels__item {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 手順と手順の間の「▼」（下向きの三角）：横並びでは向きが合わないので消す
     ※元の指定のほうが強くて消えなかったため、:not(:root) と !important をつけています */
  .is-style-RJE_R002LP_flow_panels:not(:root) > .c-row > .c-row__col::after {
    display: none !important;
  }
}
/* ▲ 入園までの流れを横スワイプにする（ここまで） */