/* ------------------------------
　　CSS変数
------------------------------ */
:root {

  /* ------------------------------
  カラー
  ------------------------------- */

  --color-primary: #225C0B;
  --color-primary-hover: #1a5502;
  --color-primary-light: #EDF5E8;
  --color-primary-light-hover: #D5E8CC;
  --color-primary-bg: var(--color-primary-light);
  --color-primary-bg-hover: #D5E8CC;

  --color-base: #FFF7F3;
  --color-accent: #F7B2B3;
  --color-accent-hover: #F49A9B;

  --color-secondary: #6A6A6A;

  --color-highlight: #FFFB8B;

  --color-danger: #C92D2D;
  --color-danger-light: #FCF5F5;

  --color-white: #FFF;
  --color-black: #333333;
  --color-white90: rgba(255, 255, 255, .9);
  --color-black30: rgba(0, 0, 0, .3);
  --color-black80: rgba(0, 0, 0, .8);

  --color-gray10: #F5F5F5;
  --color-gray20: #DFDFDF;
  --color-gray30: #CACACA;
  --color-gray40: #B4B4B4;
  --color-gray50: #9F9F9F;
  --color-gray60: #898989;
  --color-gray70: #747474;
  --color-gray80: #5E5E5E;
  --color-gray90: #494949;
  --color-gray100: #333333;

  --color-form-bg: var(--color-gray10);
  --color-form-border: var(--color-gray40);

  --color-link: var(--color-gray100);
  --color-focus: #0061D1;
  --color-page-title-bg: var(--color-gray10);
  --color-hover-bg: var(--color-gray10);
  --color-hover-bg-2nd: rgba(0, 0, 0, 0.05);

  --color-required: #c92d2d;
  --color-error: #c92d2d;

  --color-text: #303030;
  --color-text-2nd: var(--color-gray80);
  --color-text-inverse: var(--color-white);

  --color-text-primary: var(--color-primary);
  --color-text-secondary: var(--color-secondary);

  --color-text-sunday: #A82626;
  --color-text-saturday: #0151AE;

  --color-globalnav-bg: rgba(0, 0, 0, 0.55);
  --color-globalnav-dropdown-bg: var(--color-gray30);

  --color-footer-sticky: rgba(0, 0, 0, 0.55);

  --color-image-overlay-bg: rgba(0, 0, 0, 0.55);

  --box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0px 0px 8px rgba(0, 0, 0, 0.2);
  --box-shadow-focus: 0 0 0 .25rem rgba(0, 97, 209, 0.4);
  --box-shadow-error: 0 0 0 .25rem rgba(201, 45, 45, 0.4);

  --color-icon-bg: var(--color-gray80);
  --color-icon-bg-hover: var(--color-gray100);

  /* ------------------------------
  フォント
  ------------------------------- */
  --font-hiragino: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
  --font-yu-gothic: "Helvetica Neue", arial, yugothic, "yu gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
  --font-meiryo: "Helvetica Neue", arial, meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-base: var(--font-meiryo);

  /* ------------------------------
  レイアウト
  ------------------------------- */

  /* 1120px */
  --container: calc(70rem + var(--container-space-x) * 2);
  /* 1120px */
  --container-md: calc(70rem + var(--container-space-x) * 2);
  /* 768px */
  --container-sm: calc(44rem + var(--container-space-x) * 2);

  /* 2カラム */
  --width-main-container: calc(100% - var(--width-side-container) - var(--gutter-md) * 1.5);
  --width-side-container: var(--width-side-container);

  /* サブカラムの幅 */
  --width-side-container: 19rem;

  /* ページタイトル */
  --page-title-filter: rgba(0, 0, 0, 0.55);
  --page-title-space-bottom: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --page-title-space-bottom: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --page-title-space-bottom: 6.5rem;
  }

  /* セクション上下余白 */
  --section-space-y: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --section-space-y: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --section-space-y: 6.5rem;
  }

  /* ヘッダー */
  --header-height: 3.5rem;
  --header-height-fixed: 3.5rem;
  --header-height-upper: 3rem;
  --header-height-lower: 3.5rem;
  --header-height-solid: 9.5rem;
  --header-logo-height-solid: 6rem;
  --header-height-total: calc(var(--header-height-upper) + var(--header-height-lower));

  /* メインビジュアル（ヒーロー） */
  --main-visual-aspect-w-sp: 402;
  --main-visual-aspect-h-sp: 616;
  --main-visual-aspect-w-pc: 1440;
  --main-visual-aspect-h-pc: 900;
  --main-visual-max-width: 1440px;
  --main-visual-overlay: rgb(71 58 33 / 35%);
  --main-visual-fallback-bg: #473a21;
  --main-visual-font-family: "Kiwi Maru", sans-serif;
  --main-visual-catch-font-size-sp: 1.6rem;
  --main-visual-catch-line-height-sp: 1.55;
  --main-visual-catch-inline-size-chars: 11;
  --main-visual-catch-inline-size-sp: calc(var(--main-visual-catch-inline-size-chars) * var(--main-visual-catch-line-height-sp) * var(--main-visual-catch-font-size-sp));
  --main-visual-catch-font-size-md: 1.9rem;
  --main-visual-catch-font-size-xl: 2.4rem;
  --main-visual-catch-line-height-pc: 1.4;
  --main-visual-catch-inline-size-md: calc(var(--main-visual-catch-inline-size-chars) * var(--main-visual-catch-line-height-pc) * var(--main-visual-catch-font-size-md));
  --main-visual-catch-inline-size-xl: calc(var(--main-visual-catch-inline-size-chars) * var(--main-visual-catch-line-height-pc) * var(--main-visual-catch-font-size-xl));
  /* キャッチコピー余白（中央配置時: height = calc(100% - (上 + 下))） */
  --main-visual-catch-box-inset-top-sp: 120px;
  --main-visual-catch-box-inset-bottom-sp: 80px;
  --main-visual-catch-box-inset-top-md: 120px;
  --main-visual-catch-box-inset-bottom-md: 80px;
  --main-visual-catch-box-inset-top-lg: 160px;
  --main-visual-catch-box-inset-bottom-lg: 64px;
  --main-visual-catch-sub-font-size-sp: 0.875rem;
  --main-visual-catch-sub-font-size-pc: 1rem;
  --main-visual-deco-width-sp: calc((96 / 402) * 100%);
  --main-visual-deco-width-pc: calc((216 / 1440) * 100%);
  --main-visual-deco-center-width-pc: calc((160 / 1440) * 100%);
  --main-visual-catch-column-gap: 0.5em;

  /* トップ：お知らせ */
  --news-top-heading-font-family: "Kiwi Maru", sans-serif;
  --news-top-heading-en-font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", serif;
  --news-top-heading-font-size-sp: 1.75rem;
  --news-top-heading-font-size-pc: 2.5rem;
  --news-top-heading-en-font-size-sp: 0.875rem;
  --news-top-heading-en-font-size-pc: 1rem;
  --news-top-shape-img: url("/themes/f-lumbini/images/shape-img.svg");
  --news-top-deco-left: url("/themes/f-lumbini/images/title-deco-top-left.svg");
  --news-top-deco-right: url("/themes/f-lumbini/images/title-deco-top-right.svg");
  --news-top-deco-bottom: url("/themes/f-lumbini/images/info-bg-bottom.png");
  --news-top-deco-bottom-max-width: 1120px;
  --news-top-deco-bottom-height: max(var(--wave-green-height), clamp(4rem, 18vw, 8.5rem));
  --news-top-button-bg: #f4b0b0;
  --news-top-button-bg-hover: #ef9999;
  --news-top-list-max-width: 800px;
  --news-top-list-line: url("/themes/f-lumbini/images/line-dots-brown.png");

  /* トップ：幼稚園見学 */
  --visit-top-content-max-width: 800px;
  --visit-top-deco-leaf-max-width: 1120px;
  --visit-top-shape-circle: url("/themes/f-lumbini/images/shape-circle01.svg");
  --visit-top-deco-letsgo: url("/themes/f-lumbini/images/deco-letsgo.svg");
  --visit-top-title-deco: url("/themes/f-lumbini/images/title-deco02.png");
  --visit-top-schedule-heading-line: url("/themes/f-lumbini/images/title-line-dots.png");
  --visit-top-deco-message: url("/themes/f-lumbini/images/deco-message.png");
  --visit-top-strong-bg: url("/themes/f-lumbini/images/strong-bg-green.png");
  --visit-top-deco-visit: url("/themes/f-lumbini/images/deco-visit.svg");

  /* トップ：入園案内 */
  --admission-guide-deco-leaf: url("/themes/f-lumbini/images/deco-leaf-pink.png");
  --admission-guide-shape-circle01: url("/themes/f-lumbini/images/shape-circle01.svg");
  --admission-guide-shape-circle02: url("/themes/f-lumbini/images/shape-circle02.svg");
  --admission-guide-visual-size-md: 216px;
  --admission-guide-visual-size-lg: 272px;
  --admission-guide-visual-size-xl: 340px;

  /* トップ：園の特色紹介 */
  --features-top-deco-leaf: url("/themes/f-lumbini/images/deco-leaf-white.png");
  /* 子育て支援 */
  --support-summary-card-radius: 0.9375rem;
  --support-summary-tag-bg: #F4B0AF;

  /* トップ：アクセス */
  --access-top-bg: var(--color-base);
  --access-top-map-aspect-ratio: 4 / 3;
  --access-top-map-radius: var(--border-radius-md);

  /* トップ：Instagram */
  --instagram-top-bg: var(--color-base);
  --instagram-top-button-bg: #F4B0AF;
  --instagram-feed-gap: 0.75rem;
  --instagram-feed-radius: var(--border-radius-md);
  --instagram-feed-placeholder-bg: #e8e0dc;

  /* 下層ページ：特色ある保育 */
  --education-bg-01: url("/themes/f-lumbini/images/about/education-bg-01.png");
  --education-bg-02: url("/themes/f-lumbini/images/about/education-bg-02.png");
  --education-bg-03: url("/themes/f-lumbini/images/about/education-bg-03.png");
  --education-bg-04: url("/themes/f-lumbini/images/about/education-bg-04.png");
  --education-bg-04-svg: url("/themes/f-lumbini/images/about/education-bg-04.svg");
  --education-bg-04-1: url("/themes/f-lumbini/images/about/education-bg-04-1.png");
  --education-flower-01: url("/themes/f-lumbini/images/about/education-bg-flower-01.png");
  --education-flower-02: url("/themes/f-lumbini/images/about/education-bg-flower-02.png");
  --education-icon-peach: url("/themes/f-lumbini/images/about/education-icon-peach.png");
  --education-icon-apple: url("/themes/f-lumbini/images/about/education-icon-apple.png");
  --education-line-dots-pink: url("/themes/f-lumbini/images/about/line-dots-pink.png");
  --education-ribbon-deco: url("/themes/f-lumbini/images/ribbon.svg");
  --education-ribbon-bg-color: #f4b0b0;
  --education-ribbon-tail-height: 0.625rem;
  --education-seasonal-bg: #FFFEF3;

  /* 先生たち */
  --teacher-shape-circle01: url("/themes/f-lumbini/images/shape-circle01.svg");
  --teacher-shape-circle02: url("/themes/f-lumbini/images/shape-circle02.svg");
  --teacher-bg-01: url("/themes/f-lumbini/images/about/teacher/teacher-bg-01.svg");
  --teacher-bg-02: url("/themes/f-lumbini/images/about/teacher/teacher-bg-02.svg");
  --teacher-deco-01: url("/themes/f-lumbini/images/about/teacher/teacher-deco-01.svg");
  --teacher-deco-02: url("/themes/f-lumbini/images/about/teacher/teacher-deco-02.svg");
  --teacher-deco-03: url("/themes/f-lumbini/images/about/teacher/teacher-deco-03.svg");
  --teacher-visual-size: 17.5rem;
  --teacher-visual-size-md: 21.25rem;
  --teacher-deco-width: 7.5rem;
  --teacher-deco-width-md: 9rem;
  --teacher-item-bg-size: min(100%, 21.25rem) auto;
  --teacher-label-space: 2.5rem;

  /* 1日の流れ */
  --day-schedule-bg-color: #fff;
  --day-schedule-bg: url("/themes/f-lumbini/images/life/life-bg-01.svg");
  --day-card-bg: url("/themes/f-lumbini/images/life/day/day-bg-01.svg");
  --day-timeline-color: #f4b0b0;
  --day-item-gap: 3rem;
  --day-item-side-gap: 2rem;
  --day-card-gap: 1rem;
  --day-card-visual-width: 45%;
  --day-card-visual-overlap: 1.5rem;
  --day-card-visual-overlap-md: 1rem;
  --day-card-padding-simple: 1.25rem 1.5rem;
  --day-card-padding-visual: 1rem 1.25rem 1rem 0.75rem;
  --day-card-padding-visual-md: 1.25rem 1.5rem;
  --day-supplement-border-width: 3px;

  /* PDFダウンロードバナー */
  --pdf-download-banner-bg: var(--color-accent);
  --pdf-download-banner-radius: 0.75rem;
  --pdf-download-banner-max-width: 36rem;
  --pdf-download-banner-icon-size: 7rem;

  /* 園舎・園庭 */
  --facilities-bg-color: #fff;
  --facilities-bg: url("/themes/f-lumbini/images/life/facilities/facilities-bg-01.svg");
  --facilities-col1-max-width: 80%;
  --facilities-circle-col-visual-width: 38%;
  --facilities-ribbon-bg: var(--color-accent);
  --facilities-body-dot-width: 3px;
  --facilities-body-dot-color: var(--color-accent);

  /* 入園案内 */
  --entrance-ribbon-bg: var(--color-accent);
  --entrance-ribbon-bg-hover: var(--color-accent-hover);
  --entrance-flow-circle-size: 12.5rem;
  --entrance-flow-circle-size-lg: 15rem;

  /* 下層ページ：ヒーロー */
  --subpage-hero-bg-color: #FFE9E9;
  --subpage-hero-default-bg: url("/themes/f-lumbini/images/about-top-pic.jpg");
  --subpage-hero-overlay-bg: rgb(255 233 233 / 92%);

  /* エントリー詳細：見出し装飾 */
  --entry-page-title-line-h1: url("/themes/f-lumbini/images/title-line-dots02.png");
  --entry-page-title-line-h4: url("/themes/f-lumbini/images/title-line-dots03.png");
  --features-top-list-icon: url("/themes/f-lumbini/images/icon/list_icon.svg");
  --features-top-image-radius: var(--border-radius-md);
  --features-top-label-bg: rgb(34 92 11 / 78%);
  --features-top-label-tail-height: 0.625rem;
  --features-top-caption-bg: rgb(0 0 0 / 55%);
  --features-top-label-font-size-sp: 1.2rem;
  --features-top-label-font-size: 1.4rem;

  /* トップ：ルンビニー幼稚園について / 園での生活 */
  --about-life-top-deco-leaf: var(--admission-guide-deco-leaf);
  --about-top-cluster-max-width: 56rem;
  --about-top-cluster-height: 34rem;
  --about-top-link-size: 15rem;
  --about-top-center-size-sp: 17.5rem;
  --about-top-center-size: 22rem;
  --about-top-label-bg: var(--news-top-button-bg);
  --about-top-link-arrow-icon: url("/themes/f-lumbini/images/icon/icon-arrow-short.svg");
  --about-top-label-offset: 35%;
  --about-top-arrow-size: 2rem;
  --life-top-visual-size-sp: 5.625rem;
  --life-top-visual-size-md: 9rem;
  --life-top-visual-size: 11rem;

  /* フッター */
  --footer-bg: #F4EDE1;
  --footer-bg-white: #fff;
  --footer-bg-beige: #F4EDE1;
  /* 波SVG（images/）
     wave-green.svg  : セクション区切り（緑）
     wave-pink.svg   : セクション区切り（ベージュ）
     wave-white.svg  : セクション区切り（白）
     wave-footer.svg       : フッター上部の波線（白）
     wave-footer-beige.svg : フッター上部の波線（ベージュ・下層）
  */
  --wave-green: url("/themes/f-lumbini/images/wave-green.svg");
  --wave-pink: url("/themes/f-lumbini/images/wave-pink.svg");
  --wave-green-svg-width: 1440;
  --wave-green-svg-height: 198;
  --wave-green-height: calc(100vw * var(--wave-green-svg-height) / var(--wave-green-svg-width));
  --wave-pink-svg-width: 1440;
  --wave-pink-svg-height: 164;
  --wave-pink-height: calc(100vw * var(--wave-pink-svg-height) / var(--wave-pink-svg-width));
  --wave-white-svg-width: 1440;
  --wave-white-svg-height: 39;
  --wave-white-height: calc(100vw * var(--wave-white-svg-height) / var(--wave-white-svg-width));
  --wave-white: url("/themes/f-lumbini/images/wave-white.svg");
  --wave-footer: url("/themes/f-lumbini/images/wave-footer.svg");
  --wave-footer-beige: url("/themes/f-lumbini/images/wave-footer-beige.svg");
  --footer-wave-width: 1440;
  --footer-wave-svg-height: 222;
  --footer-wave-height: calc(100vw * var(--footer-wave-svg-height) / var(--footer-wave-width));
  --footer-banner-height: clamp(4rem, 20vw, 12rem);
  --footer-margin-top: 0;

  /* z-index */
  --zindex-fixed-contents: 50;
  --zindex-sub-nav-mobile: 55;
  --zindex-header: 60;
  --zindex-mobile-nav: 61;
  --zindex-mobile-nav-btn: 62;

  /* タブレット以下：下部固定サブナビ */
  --color-sub-nav-mobile-bg: #FFF9F8;
  --sub-nav-mobile-max-width: 50rem;
  --sub-nav-mobile-icon-height: clamp(1.25rem, 4vw, 2rem);
  --sub-nav-mobile-font-size: clamp(0.5625rem, 2.2vw, 0.8125rem);
  --sub-nav-mobile-gap: clamp(0.25rem, 1vw, 0.375rem);
  --sub-nav-mobile-padding-y: clamp(0.375rem, 2vw, 0.625rem);
  --sub-nav-mobile-padding-x: clamp(0.25rem, 1.5vw, 0.5rem);
  --sub-nav-mobile-height: calc(var(--sub-nav-mobile-padding-y) * 2 + var(--sub-nav-mobile-icon-height) + var(--sub-nav-mobile-gap) + 1em);

  /* デスクトップ：右固定サブナビ */
  --sub-nav-desktop-size: 104px;
  --sub-nav-desktop-top: 58%;
  --sub-nav-desktop-offset-x: 1.5rem;
  --sub-nav-desktop-font-family: "Kiwi Maru", sans-serif;
  --sub-nav-desktop-font-size: 21px;
  --sub-nav-desktop-font-weight: 400;
  --sub-nav-desktop-font-style: normal;
  --sub-nav-desktop-line-height: 1.35;
  --sub-nav-desktop-gap: 0.375rem;
  --sub-nav-desktop-arrow-width: 1rem;
  --sub-nav-desktop-arrow-height: 0.333rem;
  --sub-nav-desktop-overlap: -0.58rem;
  --sub-nav-desktop-stagger-pink: -2rem;
  --sub-nav-desktop-stagger-orange: -0.375rem;
  --sub-nav-desktop-hidden-right: calc(-1 * var(--sub-nav-desktop-size) - var(--sub-nav-desktop-offset-x) - 1rem);
  --sub-nav-desktop-transition-duration: 0.2s;
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --sub-nav-desktop-offset-x: 2rem;
  }

  /* ------------------------------
  余白
  ------------------------------- */

  /* ガター */
  --gutter-sm: 1rem;
  --gutter-md: 2rem;
  --gutter-lg: 3rem;

  /* コンテナー左右余白 */
  --container-space-x: 1rem;
  @media (min-width: 30rem) { /* _acms-common.scss : $breakpoint-sm-min */
    --container-space-x: 2rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --container-space-x: 3rem;
  }

  /* グリッドの間隔 */
  --col-gutter: var(--gutter-md);
  --unit-gutter-var: var(--gutter-md);

  /* カードレイアウト用のはみ出し背景余白 */
  --card-bg-space: 1rem;

  /* 余白ユニット */
  --unit-space-sm: 2rem;
  --unit-space-md: 3rem;
  --unit-space-lg: 4rem;

  /* 罫線ユニット余白 */
  --separator-sm: 2rem;
  --separator-md: 3rem;
  --separator-lg: 4rem;

  /* ユニットの見出し要素上追加マージン */
  --unit-heading-margin-top-add: 0.6em;

  /* systemでも参照しているプロパティを定義 */
  --unit-gap-x: var(--gutter-md);
  --unit-margin-top: 0;
  --unit-margin-bottom: 2rem;

  /* ------------------------------
  パーツ
  ------------------------------- */

  /* ボタン */
  --btn-padding-y: 0.75rem;
  --btn-padding-x: 2rem;

  /* ボーダー太さ */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;

  /* 角丸 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 8px;
  --border-radius-xl: 16px;
  --border-radius-xxl: 32px;
  --border-radius-round: 10em;

  /* 行高さ */
  --line-height-base: 1.5;
  --line-height-none: 1;
  --line-height-2xs: 1.3;
  --line-height-xs: 1.35;
  --line-height-sm: 1.4;
  --line-height-md: 1.44;
  --line-height-lg: 1.47;
  --line-height-xl: 1.7;

  /* エントリー マージン */
  --entry-el-margin-xxs: 0.5rem;  /*  8px */
  --entry-el-margin-xs: 1rem;  /*  16px */
  --entry-el-margin-sm: 1.5rem;  /*  24px */
  --entry-el-margin-md: 2rem;  /*  32px */
  --entry-el-margin-lg: 3rem;  /*  48px */

  /* エントリー パディング */
  --entry-el-padding-xxs: 0.5rem;  /*  8px */
  --entry-el-padding-xs: 1rem;  /*  16px */
  --entry-el-padding-sm: 1.5rem;  /*  24px */
  --entry-el-padding-md: 2rem;  /*  32px */
}