:root {
  --color-houkan-01: #e95d87;
  --color-houkan-02: #c93d67;
  --color-houkan-03: #fdf5fa;
  --color-after-school-day-service-01: #009388;
  --color-after-school-day-service-02: #006d65;
  --color-after-school-day-service-03: #e2f5f3;

  --number-00: 0px;
  --number-01: 4px;
  --number-02: 8px;
  --number-04: 16px;
  --number-05: 20px;
  --number-06: 24px;
  --number-08: 32px;
  --number-10: 40px;
  --number-12: 48px;
  --number-14: 56px;
  --number-16: 64px;
  --number-20: 80px;

  --shadow-black-base: 0px 4px 4px 0px rgba(51, 51, 51, 0.1);
  --shadow-black-default: 0px 4px 4px 0px rgba(51, 51, 51, 0.1);
  --shadow-black-hover: 0px 16px 24px 0px rgba(51, 51, 51, 0.1);

  --shadow-button-default: var(--shadow-black-default);
  --shadow-button-hover: var(--shadow-black-hover);

  --shadow-card-default: var(--shadow-black-default);
  --shadow-card-hover: var(--shadow-black-hover);

  --font-size-14px: 0.875rem;
  --font-size-16px: 1rem;
  --font-size-18px: 1.125rem;
  --font-size-20px: 1.25rem;
  --font-size-24px: 1.5rem;
  --font-size-28px: 1.75rem;
  --font-size-32px: 2rem;
  --font-size-36px: 2.25rem;
  --font-size-40px: 2.5rem;
  --font-size-48px: 3rem;
  --font-size-56px: 3.5rem;
  --font-size-60px: 3.75rem;
  --font-size-64px: 4rem;

  --line-height-none: 1;
  --line-height-small: 1.25;
  --line-height-smallmedium: 1.4;
  --line-height-medium: 1.5;
  --line-height-large: 1.75;
  --line-height-taller: 2;

  --layout-margin-inline: auto;
  --layout-padding-inline: 8px;
  --layout-column-full: 1200px;
  --layout-column-12: 1184px;
  --layout-column-10: 984px;
  --layout-column-9: 884px;
  --layout-column-8: 784px;
  --layout-column-6: 584px;
  --layout-column-5: 484px;
  --layout-column-4: 384px;
  --layout-column-3: 284px;
  --layout-column-2: 184px;
  --layout-column-1: 84px;

  --radius-rounded: 4px;
  --radius-rounded-lg: 8px;
  --radius-rounded-2xl: 16px;
  --radius-rounded-full: 9999px;

  --radius-badge: var(--radius-rounded);
  --radius-box: var(--radius-rounded-lg);
  --radius-box-2xl: var(--radius-rounded-2xl);
  --radius-button: var(--radius-rounded-lg);
  --radius-card: var(--radius-rounded-2xl);

  --cnct-color-text-high: #2b333d;
  --cnct-color-text-middle: #424c5a;
  --cnct-color-text-low: #5f6c7d;
  --cnct-color-text-placeholder: #9eaec4;
  --cnct-color-text-disabled: #bfcbdd;

  --cnct-color-orange-001: #ff7000;
  --cnct-color-orange-text: #f26900;
  --cnct-color-orange-background: #fffbf8;

  --cnct-color-blue-50: #f3f6ff;
  --cnct-color-blue-100: #ecf1ff;
  --cnct-color-blue-200: #d1e0ff;
  --cnct-color-blue-300: #a8c8fe;
  --cnct-color-blue-400: #6fb0fc;
  --cnct-color-blue-500: #2686e3;
  --cnct-color-blue-600: #1e5d9e;
  --cnct-color-blue-700: #224876;
  --cnct-color-blue-800: #273b57;
  --cnct-color-blue-900: #2a3548;
  --cnct-color-blue-001: #0089fe;

  --cnct-color-gray-50: #f9fbfd;
  --cnct-color-gray-100: #f2f5fa;
  --cnct-color-gray-200: #e3e9f2;
  --cnct-color-gray-300: #bfcbdd;
  --cnct-color-gray-400: #9eaec4;
  --cnct-color-gray-500: #7f8fa6;
  --cnct-color-gray-600: #5f6c7d;
  --cnct-color-gray-700: #424c5a;
  --cnct-color-gray-800: #363f4b;
  --cnct-color-gray-900: #2b333d;

  --cnct-color-primary-50: #fff6eb;
  --cnct-color-primary-100: #ffe8c9;
  --cnct-color-primary-200: #ffdaa9;
  --cnct-color-primary-300: #ffc680;
  --cnct-color-primary-400: #f68100;
  --cnct-color-primary-500: #e46500;
  --cnct-color-primary-600: #d46300;
  --cnct-color-primary-700: #bc5305;
  --cnct-color-primary-800: #984107;
  --cnct-color-primary-900: #6f3106;

  --cnct-color-background-0: #ffffff;

  --cnct-color-info-50: var(--cnct-color-blue-50);
  --cnct-color-info-100: var(--cnct-color-blue-100);
  --cnct-color-info-200: var(--cnct-color-blue-200);
  --cnct-color-info-500: var(--cnct-color-blue-500);
  --cnct-color-info-700: var(--cnct-color-blue-700);

  --cnct-shadow-card:
    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
    0px 2px 12px 0px rgba(0, 0, 0, 0.07),
    0px 0px 0px 1px rgba(105, 119, 147, 0.2);
  --cnct-shadow-card-hover:
    0px 4px 8px 0px rgba(0, 0, 0, 0.12),
    0px 8px 24px 0px rgba(0, 0, 0, 0.12),
    0px 0px 0px 1px rgba(105, 119, 147, 0.2);
}
body {
  color: var(--cnct-color-text-high);
  background-color: var(--cnct-color-background-0);
  font-size: var(--font-size-16px);
  font-family:
    "BIZ UDPGothic",
    "Roboto",
    "Noto Sans JP",
    Arial,
    "Arial",
    "Hiragino Sans",
    "ヒラギノ角ゴシック",
    YuGothic,
    "Yu Gothic",
    "メイリオ",
    Meiryo,
    "MS Pゴシック",
    "MS PGothic",
    sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  min-height: 100%;
  min-width: 300px;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

*:focus-visible {
  outline: 2px solid var(--cnct-color-orange-001);
  outline-offset: 2px;
}

/* ────────────────────────────── *
  * cnct_component_button（本ページで使用する分のみ）
  * ────────────────────────────── */
.cnct_component_button_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 16px;
}
@media (max-width: 925px) {
  .cnct_component_button_wrapper {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}
[data-justify="center"] {
  justify-content: center;
}

.cnct_component_button {
  font-weight: bold;
  line-height: var(--line-height-small);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-button);
  border-width: 2px;
  border-style: solid;
  transition: 0.2s;
  box-shadow: var(--shadow-button-default);
  text-decoration: none;
}
@media (max-width: 925px) {
  .cnct_component_button {
    width: 100%;
  }
}
.cnct_component_button:hover {
  box-shadow: var(--shadow-button-hover);
}
.cnct_component_button:active {
  box-shadow: var(--shadow-button-default);
}
.cnct_component_button[data-size="base"] {
  font-size: var(--font-size-16px);
  padding: 8px 16px;
}
.cnct_component_button[data-color="001"] {
  color: var(--cnct-color-background-0);
  background-color: var(--cnct-color-blue-500);
  border-color: var(--cnct-color-blue-500);
}
.cnct_component_button[data-color="001"]:hover {
  background-color: var(--cnct-color-blue-600);
  border-color: var(--cnct-color-blue-600);
}
.cnct_component_button[data-color="001"]:active {
  background-color: var(--cnct-color-blue-700);
  border-color: var(--cnct-color-blue-700);
}

/* ────────────────────────────── *
  * demo_viewport（機能デモ共通。iframe埋め込み・単体表示どちらでも使う想定）
  * デバイス画像・文言（tourSteps）・ステップ数はページ側のインラインscriptで差し替える
  * ────────────────────────────── */
.demo_viewport {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--cnct-color-text-high);
}
@media (max-width: 925px) {
  .demo_viewport {
    /* 吹き出しが下にはみ出すのを許可 */
    overflow: visible;
    display: flex;
    flex-direction: column;
    background-color: var(--cnct-color-background-0);
  }
}

.demo_imageContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 1768 / 1104;
  background-color: var(--cnct-color-background-0);
}
@media (max-width: 925px) {
  .demo_imageContainer {
    border-radius: var(--radius-box);
    overflow: hidden;
  }
}

.demo_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.demo_image.is-active {
  opacity: 1;
}

/* ────────────────────────────── *
  * demo_popup（操作ガイドの吹き出し）
  * ────────────────────────────── */
.demo_popup {
  position: absolute;
  top: var(--demo-popup-top, 0);
  left: var(--demo-popup-left, 0);
  z-index: 100;
  width: 320px;
  padding: 16px;
  color: var(--cnct-color-text-low);
  background-color: var(--cnct-color-blue-100);
  border-radius: var(--radius-box);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  /* アニメーションの対象を opacity と transform だけに限定する */
  /* これにより top と left の変更は瞬時に行われ、移動アニメーションしなくなる */
  transition:
    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 共通の初期状態：透明にしておく */
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 925px) {
  /* 矢印が上向き（＝本体は対象の下）の時の初期位置：少し上から降りてくる */
  .demo_popup.arrow-top {
    transform: translateY(-25px) scale(0.95);
  }
  /* 矢印が下向き（＝本体は対象の上）の時の初期位置：少し下から上がってくる */
  .demo_popup.arrow-bottom {
    transform: translateY(25px) scale(0.95);
  }
  /* 矢印が右向き（＝本体は対象の左）の時の初期位置：少し左から寄ってくる */
  .demo_popup.arrow-right {
    transform: translateX(-25px) scale(0.95);
  }
  /* 矢印が左向き（＝本体は対象の右）の時の初期位置：少し右から寄ってくる */
  .demo_popup.arrow-left {
    transform: translateX(25px) scale(0.95);
  }
}
@media (max-width: 925px) {
  .demo_popup {
    /* positionをリセットして、画像の下に並ぶようにする */
    position: relative;
    top: auto;
    left: auto;
    width: 95%; /* 左右に少し余白 */
    margin: 24px auto 0px; /* 矢印のためのスペースを上に確保 */

    /* デスクトップ用の影や移動アニメーションを簡略化 */
    box-shadow: none;
    transform: translateY(10px) scale(1); /* 少しだけ浮き上がる */
    opacity: 0;
    pointer-events: none;
    z-index: 10;
  }
}

/* 表示状態（共通）：元の位置に戻る */
.demo_popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 矢印の共通設定 */
.demo_popup::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  /* ポップアップ本体より確実に前に出す */
  z-index: 110;
}
@media (max-width: 925px) {
  .demo_popup::before {
    top: -12px; /* 上端に配置 */
    bottom: auto;
    left: 50%; /* 中央 */
    transform: translateX(-50%);
    border-width: 0 12px 12px 12px; /* 上向きの三角 */
    border-color: transparent transparent var(--cnct-color-blue-100)
      transparent;
    filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.1));
    display: block;
  }
}
@media (min-width: 925px) {
  /* 下向きの矢印（ポップアップが対象物より【上】にある時用） */
  .demo_popup.arrow-bottom::before {
    bottom: -12px; /* 本体の下端から突き出す距離 */
    left: var(--demo-popup-arrow-offset, 40px); /* 左端からの位置（ステップ側で上書き可能） */
    border-width: 12px 12px 0 12px; /* 三角形のサイズ */
    border-color: var(--cnct-color-blue-100) transparent transparent
      transparent; /* 上辺だけ色をつける */
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)); /* 影を少しなじませる */
  }
  /* 上向きの矢印（ポップアップが対象物より【下】にある時用） */
  .demo_popup.arrow-top::before {
    top: -12px; /* 本体の上端から突き出す距離 */
    left: var(--demo-popup-arrow-offset, 40px); /* 左端からの位置（ステップ側で上書き可能） */
    border-width: 0 12px 12px 12px; /* 三角形のサイズ */
    border-color: transparent transparent var(--cnct-color-blue-100)
      transparent; /* 下辺だけ色をつける */
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
  }
  /* 上向きの矢印・右端基準（ポップアップ本体の右側に矢印を出したい時用） */
  .demo_popup.arrow-top-right::before {
    top: -12px; /* 本体の上端から突き出す距離 */
    right: var(--demo-popup-arrow-offset, 40px); /* 右端からの位置（ステップ側で上書き可能） */
    border-width: 0 12px 12px 12px; /* 三角形のサイズ */
    border-color: transparent transparent var(--cnct-color-blue-100)
      transparent; /* 下辺だけ色をつける */
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
  }
  /* 右向きの矢印（ポップアップが対象物より【左】にある時用） */
  .demo_popup.arrow-right::before {
    top: var(--demo-popup-arrow-offset, 50%); /* 上端からの位置（ステップ側で上書き可能） */
    right: -12px;
    transform: translateY(-50%);
    border-width: 12px 0 12px 12px; /* 三角形のサイズ */
    border-color: transparent transparent transparent
      var(--cnct-color-blue-100); /* 左辺だけ色をつける */
    filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
  }
  /* 左向きの矢印（ポップアップが対象物より【右】にある時用） */
  .demo_popup.arrow-left::before {
    top: var(--demo-popup-arrow-offset, 50%); /* 上端からの位置（ステップ側で上書き可能） */
    left: -12px;
    transform: translateY(-50%);
    border-width: 12px 12px 12px 0; /* 三角形のサイズ */
    border-color: transparent var(--cnct-color-blue-100) transparent
      transparent; /* 右辺だけ色をつける */
    filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
  }
}

.demo_popup_title {
  padding-bottom: 4px;
  color: var(--cnct-color-blue-500);
  font-size: var(--font-size-16px);
  font-weight: bold;
  line-height: var(--line-height-medium);
}
.demo_popup_text {
  padding-bottom: 8px;
  font-size: var(--font-size-14px);
  line-height: var(--line-height-medium);
}

/* ボタンエリア */
.demo_popup_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo_popup_footerText {
  font-size: var(--font-size-14px);
}

.demo_popup_buttonGroup {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 戻るボタン（灰色テキスト） */
.demo_popup_backButton {
  padding: 8px 4px;
  color: var(--cnct-color-text-low);
  font-size: var(--font-size-14px);
  line-height: var(--line-height-medium);
  text-decoration: underline;
  cursor: pointer;
}
.demo_popup_backButton:hover {
  text-decoration-thickness: 2px;
}

/* 非表示クラス */
.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ────────────────────────────── *
  * demo_modal（最終モーダル）
  * ────────────────────────────── */
.demo_modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
@media (max-width: 925px) {
  .demo_modal {
    /* モーダルは画面全体を覆うように固定 */
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.demo_modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.demo_modal_body {
  width: 100%;
  max-width: 500px;
  padding: 40px;
  background-color: var(--cnct-color-info-100);
  border-radius: var(--radius-box);
  text-align: center;
  transform: scale(0.8);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 925px) {
  .demo_modal_body {
    width: 90%;
    padding: 30px 20px;
  }
}
.demo_modal.is-visible .demo_modal_body {
  transform: scale(1);
}

.demo_modal_title {
  color: var(--cnct-color-blue-500);
  font-weight: bold;
  line-height: var(--line-height-medium);
}
.demo_modal_text {
  padding: 4px 0px 8px;
  color: var(--cnct-color-text-low);
  font-size: var(--font-size-14px);
  line-height: var(--line-height-medium);
}
.demo_modal_actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 16px;
}