/*! * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2023 Fonticons, Inc. */ 
.fa-solid, .fa-brands{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
@font-face{font-family:'Font Awesome 6 Free';font-style:normal;font-weight:900;font-display:swap;src:url(../images/fa-solid-900.woff2) format('woff2')}
@font-face{font-family:'Font Awesome 6 Brands';font-style:normal;font-weight:400;font-display:swap;src:url(../images/fa-brands-400.woff2) format('woff2')}
.fa-solid{font-family:'Font Awesome 6 Free'; font-weight:900}
.fa-brands{font-family:'Font Awesome 6 Brands'; font-weight:400}
:root,:host{--fa-style-family-classic:'Font Awesome 6 Free';--fa-font-solid:normal 900 1em/1 'Font Awesome 6 Free';--fa-style-family-brands:'Font Awesome 6 Brands';--fa-font-brands:normal 400 1em/1 'Font Awesome 6 Brands'}


.fa-instagram:before { content: "\f16d"; } .fa-square-x-twitter:before { content: "\e61a"; }


  /* Material Symbols - 基本スタイル */
  [class*="material-symbols-"] {
    font-style: normal;
    font-variation-settings: "FILL" var(--material-symbol-fill, 0), "wght" var(--material-symbol-weight, 400);
    visibility: hidden;
  }
  
  /* Material Symbolsフォント読み込み完了後 */
  body[data-material-symbols-loaded="true"] [class*="material-symbols-"] {
    visibility: visible;
  }


 :root { --s-font-b5847304:'Open Sans','Noto Sans JP';--s-font-35a599e0:Inter, 'Noto Sans JP';--s-font-cca8ed71:'M PLUS Rounded 1c';--s-font-f5b0f64a:'IBM Plex Sans'; } 


html {
  height: 100%;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  display: block;
  min-height: 100vh;
  background: #fff;
  font-family: sans-serif;
  line-height: 1;
  transition: background 0.5s cubic-bezier(0.4, 0.4, 0, 1);
  padding: 0;
  margin: 0;
}

a {
  background: transparent;
  color: rgb(51, 51, 51);
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: none;
  text-decoration: none;
}

button {
  background: transparent;
  color: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: none;
}

button {
  pointer-events: all;
  cursor: pointer;
  user-select: none;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: rgb(51, 51, 51);
  line-height: 1;
}

/* --- Common Base Styles --- */
.img,
.box,
.text,
.frame,
.section,
.section-inner,
.input,
.toggle,
.icon,
.video,
.video-container {
  border: 0;
  box-sizing: border-box;
  max-width: 100%;
  z-index: 0;
  position: relative;
  margin: 0;
  padding: 0;
  flex: none;
}

.img {
  height: auto;
}

.img,
.box,
.text,
.frame,
.section,
.section-inner,
.toggle,
.icon,
.video-container {
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  align-content: center;
}

.input,
.select {
  /* TypeSquareの ts-unused インライン上書きからフォーム要素を保護するため !important で防衛。
     詳細度は同じなのでノード固有の .sd-N 側も !important 付与が必要（$StyleBundle.formFontImportant）。

     a11y トレードオフ: ブラウザ設定 UI の「標準フォント」指定（author normal 相当）は本ルールで上書きされる。
     一方、User Style Sheet + !important（OpenDyslexic 等の a11y 拡張）は CSS カスケードの origin 順位
     （user !important > author !important）により依然として勝つ。TypeSquare 干渉対策として意図的に受容する。 */
  font-family: inherit !important;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.input,
.richText * {
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  align-content: normal;
  z-index: 0;
}

/* Restore text decoration for semantic HTML elements */
.richText s,
.richText del,
.richText u {
  text-decoration: revert;
}

/* sd-base equivalent: column segment containers (see JSDoc) */
.box,
.frame,
.section,
.toggle,
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img,
.text,
.icon {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  z-index: 0;
}

.box::-webkit-scrollbar {
  display: none;
}

/* --- Rich Text --- */
.richText {
  display: block;
  /* Workaround: レスポンシブCSSで display:flex に切り替わった際に
     flex-direction がデフォルト row になるのを防止する。
     display:block 時は無視され、display:flex 時のみ有効。
     HRC ではノードCSS生成時に flex-direction を補完すると
     ユーザー設定の flex-direction を上書きするリスクがあるため、
     低優先度のデフォルト値としてここで設定する。 */
  flex-direction: column;
  flex: none;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  line-height: 1;

* {
    border: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
    word-spacing: 1px;

    backface-visibility: visible;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
  }
  h1 {
    font-size: 3em;
    font-weight: 700;
    margin: 20px 0;
  }

  h2,
    h3 {
    font-weight: 700;
    margin: 10px 0;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1em;
  }
  h4,
    h5,
    h6 {
    display: block;
    font-size: 1em;
    margin: 10px 0;
  }
  h4,
    h5 {
    font-weight: 600;
  }
  h6 {
    font-weight: 500;
  }
p {
    margin: 10px 0;
  }
> p {
    min-height: 1em;
  }

  hr {
    border-top: 1px solid #ccc;
    margin: 10px 0;
  }

  em {
    font-style: italic;
  }

> blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    font-style: italic;
    margin: 10px 0;
    padding: 10px 15px;
  }

  strong {
    color: inherit;
    display: inline;
    font-family: inherit;
    font-weight: 900;
  }
  /* Table of Contents */
> [data-type="table_of_contents"] {
    line-height: 1;
    list-style: none;
    padding: 24px 24px 8px;
    margin: 0;
    border-radius: 2px;
    font-size: 16px;
    background-color: #f5f5f5;
    text-decoration: underline;
    color: #616161;

  .toc_list {
      margin: 0;
      padding: 0;
    }

  .toc_item {
      font-size: inherit;
      font-weight: inherit;
      color: currentColor;
      list-style: none;
      margin: 0 0 16px 0;

      /* Default padding */
      padding-left: 2rem;

    &.toc_item--1 {
        margin: 0 0 16px 0;
        /* Level 1 items might not need extra padding beyond the default */
        padding-left: 0; /* Reset or adjust as needed */
      }
    &.toc_item--2 {
        margin: 0 0 16px 0;
        padding-left: 2rem; /* Already default, explicit for clarity */
      }
    &.toc_item--3 {
        margin: 0 0 16px 0;
        padding-left: 4rem;
      }

    > a {
        font-size: inherit;
        font-weight: inherit;
        color: currentColor;
        border: none;
        text-decoration: none;
      }
    }
  }

> [data-type="table"] {
    overflow-x: auto;
    p {
      white-space: pre-line;
      word-break: break-all;
    }
  }
  table {
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: unset;
    margin: 10px 0 10px 0;
    font-size: 14px;
    border: 1px solid #f2f2f2;
    color: #1a1a1a;
    line-height: 1.4;
  }
  th {
    background: rgba(245, 245, 245, 0.5);
  }
  th,
    td {
    min-width: 100px;
    max-width: 240px;
    border: 1px solid #f2f2f2;
    padding: 12px;

    p {
      margin: 0;
    }
  }

p > code {
    background: #eee;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    display: inline;
    margin: 2px;
    padding: 0 5px;
  }
  ol {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;
    li {
      list-style: decimal;
      margin: 10px 0;
    }
  }

  ul {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;
    li {
      list-style: disc;
      margin: 10px 0;
    }
  }
  li > p {
    margin: 0;
  }
  pre {
    margin: 20px 0 20px 0;
    padding: 25px 35px 25px 35px;
    background: #eeeeee;
    border-radius: 6px;
    white-space: pre-wrap;
    font-family: Menlo, Monaco, "Courier New", monospace;

    code {
      padding: 0;
      border: none;
    }
  }
  /* Images & Videos */
  img,
    video {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
  }

  /* Links */
  a {
    color: #007cff;
    display: inline;
    text-decoration: underline;
  }

  /* Embedded Code */
  [data-type="embed_code"] {
    position: relative;
    margin: 20px 0;
    .height-adjuster {
      max-width: 1280px;
      position: relative;

      .wrapper {
        position: relative;
      }

      .wrapper[style*='padding-top'] {
        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

/* --- Section --- */
.section {
  width: 100%;
}

/* section-inner のスタイル
 * position: static は studio-preview との表示互換性のために維持している。
 * 元々は考慮漏れで設定されたものだが、既に使用されているため互換性維持のために必要。
 * .box クラスも同時に付与されるため、display: flex 等の基本レイアウトは継承される。
 */
.section-inner {
  position: static;
}

/* --- Dialog --- */
dialog {
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  /* UA stylesheet の overflow: auto を打ち消し、モーダル内コンテンツがはみ出した際の水平パンを防ぐ (#2438) */
  /* コンテンツが dialog 表示領域を超える場合は overflow: auto に戻さず、子要素側で内部スクロール領域を確保する (studio-preview 互換) */
  overflow: visible;

&[open] {
    display: flex;
  }

&::backdrop {
    background: transparent;
  }
}

.modal-container {
  /* width/height:100% に padding を含め、dialog（viewport）幅・高さを超えないようにする。
     content-box だと padding が 100% の外側に加算され、右・下にはみ出す (#2920, studio-preview 互換) */
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;  /* backdropクリックをdialogに透過 */
  z-index: 1;
}

.modal-container > * {
  pointer-events: auto;  /* コンテンツ内のクリックを有効化 */
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* --- Modal Transition --- */
/* モーダルトランジション中の子要素transition無効化（ちらつき防止） */
/* modal-readyが付くまで子要素のtransitionを無効化し、 */
/* appearアニメーションとの競合を防ぐ */
/* NOTE: modal-closing時も:not(.modal-ready)に該当するため、閉じるアニメーション中も適用される */
dialog[open][data-modal-transition-base]:not(.modal-ready) .modal-container * {
  transition: none !important;
}

/* 開いた直後の初期状態: modal-containerとmodal-backdropをopacity 0に */
/* dialog自体は常にopacity 1（二重掛け防止） */
dialog[open][data-modal-transition-base] > .modal-container {
  opacity: 0;
  /* transformはdata-modal-transition-baseのJSON値を使用するためJSで設定 */
}

dialog[open][data-modal-transition-base] > .modal-backdrop {
  opacity: 0;
}

/* 準備完了: トランジションでopacity 1, transform noneへ */
dialog[open][data-modal-transition-base].modal-ready > .modal-container {
  opacity: 1;
  transform: none;
  transition: opacity 400ms cubic-bezier(.4,.4,0,1), transform 400ms cubic-bezier(.4,.4,0,1);
}

dialog[open][data-modal-transition-base].modal-ready > .modal-backdrop {
  opacity: 1;
  transition: opacity 400ms cubic-bezier(.4,.4,0,1);
}

/* 閉じるアニメーション */
dialog[data-modal-transition-base].modal-closing > .modal-container {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.4,.4,0,1), transform 400ms cubic-bezier(.4,.4,0,1);
}

dialog[data-modal-transition-base].modal-closing > .modal-backdrop {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.4,.4,0,1);
}

/* アクセシビリティ: モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  dialog[open][data-modal-transition-base] > .modal-container,
  dialog[open][data-modal-transition-base].modal-ready > .modal-container,
  dialog[data-modal-transition-base].modal-closing > .modal-container {
    transition: none;
    opacity: 1;
    transform: none !important;
  }

  dialog[open][data-modal-transition-base] > .modal-backdrop,
  dialog[open][data-modal-transition-base].modal-ready > .modal-backdrop,
  dialog[data-modal-transition-base].modal-closing > .modal-backdrop {
    transition: none;
    opacity: 1;
  }
}

/* --- Image Background Element --- */
/* .image__bg-container 単体構造で::before疑似要素を使用 */
.image__bg-container {
  container-type: size;  /* 幅と高さを監視（aspect-ratioクエリに必要） */
  container-name: image-container;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  border-radius: inherit;
  transition: inherit;
}

.image__bg-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--img-current);
  background-position: 50%;
  background-size: cover;
  border-radius: inherit;
  transition-duration: inherit;
  transition-timing-function: inherit;
  transition-delay: inherit;
  /* background-image を除外: WebKit が transition: all 継承時に
     container query による --img-current 変更を cross-fade() でアニメーションし、
     低解像度バリアントが表示され続ける問題を回避 (issue #2389) */
  transition-property:
    filter, backdrop-filter, opacity, color,
    background-color, background-position, background-size,
    border, border-color, border-width, border-radius,
    outline, outline-color, outline-width, outline-offset,
    box-shadow, text-shadow, transform, transform-origin,
    width, height, margin, padding,
    top, left, right, bottom, z-index, gap,
    letter-spacing, word-spacing, line-height, font-size, font-weight,
    clip-path;
}

/* IMPORTANT: 3つの DPR tier はソース順に依存 — ÷2.0 → ÷1.5 → ÷1.0 の順で配置し、
   境界値(DPR 1.0, 1.5)での overlap を後段 tier の勝ちで解決する。並び替え禁止。 */

/* DPR 2x（÷2.0）: 背景画像用 - 閾値（300px/500px/900px）= DPR 1x閾値 ÷ 2.0 */
@media (min-resolution: 1.5dppx) {
  /* --- horizontal (横長/正方形) - DPR 2x --- */
  /* デフォルト: < 300px → small */
  .image--horizontal .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (300px未満) */
  @container (aspect-ratio < 1) and (width < 300px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (300px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (width < 300px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上 + aspect-ratio >= 1 → middle
     horizontalはmax-widthなし: aspect-ratio >= 1 が自然にスコープし、
     後続の幅帯ルールがソース順で上書きするためmax-width不要。
     verticalは明示的範囲限定（min-width + max-width + aspect-ratio >= 0.5）を使用。 */
  @container (300px <= width) and (aspect-ratio >= 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 1 補正: middle → regular */
  @container (300px <= width < 500px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (300px <= width < 500px) and (aspect-ratio < 0.5) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上 + aspect-ratio >= 1 → regular */
  @container (500px <= width) and (aspect-ratio >= 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 500px以上901px未満 + aspect-ratio < 1 補正: regular → origin */
  @container (500px <= width < 901px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 901px以上 → origin */
  @container (901px <= width) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* --- vertical (縦長) - DPR 2x --- */
  /* デフォルト: < 300px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */
  .image--vertical .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 0.5 補正: small → middle (300px未満) */
  @container (aspect-ratio < 0.5) and (width < 300px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.25 補正: small → regular (300px未満、2段階アップ) */
  @container (aspect-ratio < 0.25) and (width < 300px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上500px未満 + aspect-ratio >= 0.5 → middle */
  @container (300px <= width < 500px) and (aspect-ratio >= 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 0.5 補正: middle → regular */
  @container (300px <= width < 500px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */
  @container (300px <= width < 500px) and (aspect-ratio < 0.25) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上901px未満 + aspect-ratio >= 0.5 → regular */
  @container (500px <= width < 901px) and (aspect-ratio >= 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 500px以上901px未満 + aspect-ratio < 0.5 補正: regular → origin */
  @container (500px <= width < 901px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 901px以上 → origin */
  @container (901px <= width) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }
}

/* DPR 1.5x（÷1.5）: DPR 1.01-1.5 の Android 端末等向け。
   対象デバイスは限定的だが、÷1.0 では解像度不足、÷2.0 では過剰ダウンスケールとなるため独立 tier として設置。
   閾値 = DPR 1x閾値 ÷ 1.5（端数は切り上げ: 600/1.5=400, 1000/1.5≈667, 1801/1.5≈1201） */
/* @media matches 1.0 ≤ DPR ≤ 1.5, effective 1.0 < DPR ≤ 1.5（DPR 1.0 は後段の ÷1.0 tier がソース順で勝つ） */
@media (min-resolution: 1dppx) and (max-resolution: 1.5dppx) {
  /* --- horizontal (横長/正方形) - DPR 1.5x --- */
  /* デフォルト: < 400px → small */
  .image--horizontal .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (400px未満) */
  @container (aspect-ratio < 1) and (width < 400px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (400px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (width < 400px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上 + aspect-ratio >= 1 → middle */
  @container (400px <= width) and (aspect-ratio >= 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 1 補正: middle → regular */
  @container (400px <= width < 667px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (400px <= width < 667px) and (aspect-ratio < 0.5) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上 + aspect-ratio >= 1 → regular */
  @container (667px <= width) and (aspect-ratio >= 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 667px以上1201px未満 + aspect-ratio < 1 補正: regular → origin */
  @container (667px <= width < 1201px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 1201px以上 → origin */
  @container (1201px <= width) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* --- vertical (縦長) - DPR 1.5x --- */
  /* デフォルト: < 400px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */
  .image--vertical .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 0.5 補正: small → middle (400px未満) */
  @container (aspect-ratio < 0.5) and (width < 400px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.25 補正: small → regular (400px未満、2段階アップ) */
  @container (aspect-ratio < 0.25) and (width < 400px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上667px未満 + aspect-ratio >= 0.5 → middle */
  @container (400px <= width < 667px) and (aspect-ratio >= 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 0.5 補正: middle → regular */
  @container (400px <= width < 667px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */
  @container (400px <= width < 667px) and (aspect-ratio < 0.25) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上1201px未満 + aspect-ratio >= 0.5 → regular */
  @container (667px <= width < 1201px) and (aspect-ratio >= 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 667px以上1201px未満 + aspect-ratio < 0.5 補正: regular → origin */
  @container (667px <= width < 1201px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1201px以上 → origin */
  @container (1201px <= width) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }
}

/* DPR 1x（÷1.0）: 背景画像用 - 閾値（600px/1000px/1801px） */
@media (max-resolution: 1dppx) {
  /* --- horizontal (横長/正方形) - DPR 1x --- */
  /* デフォルト: < 600px → small */
  .image--horizontal .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (600px未満) */
  @container (aspect-ratio < 1) and (width < 600px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (600px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (width < 600px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上 + aspect-ratio >= 1 → middle */
  @container (600px <= width) and (aspect-ratio >= 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 1 補正: middle → regular */
  @container (600px <= width < 1000px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (600px <= width < 1000px) and (aspect-ratio < 0.5) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上 + aspect-ratio >= 1 → regular */
  @container (1000px <= width) and (aspect-ratio >= 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 1000px以上1801px未満 + aspect-ratio < 1 補正: regular → origin */
  @container (1000px <= width < 1801px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 1801px以上 → origin */
  @container (1801px <= width) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* --- vertical (縦長) - DPR 1x --- */
  /* デフォルト: < 600px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */
  .image--vertical .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 0.5 補正: small → middle (600px未満) */
  @container (aspect-ratio < 0.5) and (width < 600px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.25 補正: small → regular (600px未満、2段階アップ) */
  @container (aspect-ratio < 0.25) and (width < 600px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio >= 0.5 → middle */
  @container (600px <= width < 1000px) and (aspect-ratio >= 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 0.5 補正: middle → regular */
  @container (600px <= width < 1000px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */
  @container (600px <= width < 1000px) and (aspect-ratio < 0.25) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上1801px未満 + aspect-ratio >= 0.5 → regular */
  @container (1000px <= width < 1801px) and (aspect-ratio >= 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 1000px以上1801px未満 + aspect-ratio < 0.5 補正: regular → origin */
  @container (1000px <= width < 1801px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1801px以上 → origin */
  @container (1801px <= width) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }
}

/* --- Shift Classes for Background Images --- */
/* 注意: shift classesはDPR非依存で、常にDPR 1x相当の閾値（600px/1000px）を使用 */
/* shift-1: 1段階上のバリエーション */
.image--shift-1 .image__bg-container::before {
  --img-current: var(--img-middle);
}

@container (min-width: 600px) {
  .image--shift-1 .image__bg-container::before {
    --img-current: var(--img-regular);
  }
}

@container (min-width: 1000px) {
  .image--shift-1 .image__bg-container::before {
    --img-current: var(--img-origin);
  }
}

/* shift-2: 2段階上のバリエーション */
.image--shift-2 .image__bg-container::before {
  --img-current: var(--img-regular);
}

@container (min-width: 600px) {
  .image--shift-2 .image__bg-container::before {
    --img-current: var(--img-origin);
  }
}

/* --- Text Specific --- */
.text {
  /* Note: Base styles are defined above in common group */
  /* Specific styles for .text */
  -webkit-font-smoothing: antialiased;
  position: relative; /* Already defined in base, maybe redundant */
  line-height: 1;
  word-spacing: 1px;
  /* margin: 0; is already defined in base */
}

/* --- Frame --- */
.frame {
  display: block;
  overflow: hidden;
  /* iframe は display: inline のため、親の line-height が iframe 下の baseline
     descent gap を決定する。studio-preview はリセットで広範に line-height: 1
     を適用しており、HRC でも .frame に同等の値を設定して挙動を一致させる。 */
  line-height: 1;
  /* Note: Base styles are defined above in common group */
}
/* biome-ignore lint/style/noDescendingSpecificity: 異なるコンテキストでのiframeスタイル */
.frame > iframe {
  border: none;
  width: 100%;
  height: 100%;
}

/* --- Studio Specific --- */

/* --- Toggle --- */
/* Base styles are shared with other segment containers (see JSDoc).
   Toggle-specific rules (open/closing state) are defined below. */

/* --- Input File --- */
.file {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: row;
  word-break: break-word;
  overflow-wrap: anywhere;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -1px;
  position: relative;
  /* TypeSquareの ts-unused インライン上書きから label を保護（.input/.select と同方針） */
  font-family: inherit !important;
}

.file:focus-within {
  outline-color: rgba(56, 110, 220, 0.5);
}

.file > input[type='file'] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
}

.toggle[data-toggle-closing] [data-show-toggle="open"],
.toggle[open]:not([data-toggle-closing]) [data-show-toggle="close"],
.toggle:not([open]):not([data-toggle-closing]) [data-show-toggle="open"] {
  display: none;
}

/* out-of-flow（absolute/fixed）トグルに限り、閉じた（遷移中でない）コンテンツをレイアウトから除外する。
   height:0 + overflow:hidden だけでは、position:absolute で複数トグルを重ねたメガメニュー等で
   コンテンツが幅を保持し続け、トグル root（width:auto の flex 親）の shrink-to-fit が全幅へ膨らむ。
   その全幅 root box が、DOM 順で後ろに来る閉トグルとして、前にある開トグルのはみ出しコンテンツへ
   最前面で重なり（同 z-index・position:absolute）、メニュー項目のクリックを奪う（#2952）。
   studio-preview は閉トグルがコンテンツをレイアウトしないため root が trigger 幅に収まり重ならない。

   [data-toggle-overlay] は ToggleBundleBuilder が out-of-flow トグルにのみ付与する。
   in-flow（position:relative 等）トグルでは閉コンテンツの幅が root 幅の確定要素として機能しており
   （横並びナビ等）、一律 display:none にすると root が trigger 幅へ潰れて隣項目と重なる（#2985 回帰）。
   そのため本規則は out-of-flow に限定する。
   遷移中は [open] / [data-toggle-closing] が付くためこの規則は当たらず開閉アニメーションを壊さない。
   trigger は常時表示・クリック可能。閉コンテンツは既に inert + aria-hidden + height:0 で不可視・非対話。 */
.toggle[data-toggle-overlay]:not([open]):not([data-toggle-closing]) > [data-toggle-content] {
  display: none;
}

/* --- sd-video Custom Element --- */
/* object-fitはnon-inheritedかつreplaced element専用プロパティのため、
 * 非replaced要素であるsd-video自身には視覚効果を持たない。
 * ここでの宣言は子<video>が object-fit: inherit で参照するための値供給源として機能する。
 * これにより<video> UA stylesheetデフォルト(object-fit: contain)をsd-video階層で再現し、
 * objectFit未指定のレガシーデータでもstudio-previewと等価な表示となる。 */
sd-video {
  display: block;
  overflow: hidden;
  object-fit: contain;
}
/* studio-preview互換: ネイティブ<video>のように振る舞う
 * width:100%ではなくmax-width:100%を使用し、
 * sd-videoのwidth:auto時に循環依存を防ぐ（Safari互換 #2312）
 * max-height:100%で親sd-videoの高さに収める
 *   （親height:auto時はpercentageがnoneにフォールバックするCSS仕様）
 * object-fit:inheritで親sd-videoのobject-fitを継承する */
sd-video > video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: inherit;
}

/* --- Video Container --- */
/* Video inside video-container - disable text selection */
.video-container {
  user-select: none;
}

/* Video label toggle based on container state */
.video-container[data-video-state="paused"] [data-video-label="pause"],
.video-container[data-video-state="playing"] [data-video-label="play"] {
  display: none;
}

.video-container[data-video-state="paused"] [data-video-label="play"],
.video-container[data-video-state="playing"] [data-video-label="pause"] {
  display: inline;
}

/* --- Carousel Custom Element --- */
sd-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* is-playing属性に基づくslot表示制御 */
sd-carousel:not([is-playing]) [slot="pause"],
sd-carousel[is-playing] [slot="play"] {
  display: none !important;
}

/* カルーセルのコントロール（prev/next/play-toggle）は指カーソルにする（studio-preview 互換）。
 * studio-preview はクリック可能要素に .button / .link クラスを付与し、HTML タグに依存せず
 * cursor:pointer を当てる。HRC のデフォルト CSS は button タグにのみ cursor:pointer を当てるため、
 * V2 カルーセル（コントロールが <button>）では指になるが、V1 カルーセルはコントロールが
 * <div class="box"> で出力され button セレクタに当たらず指にならない（studio-preview 互換性のずれ）。
 * ここでタグ非依存に補う。slot 名は CAROUSEL_SLOT（studio-domain）と対。
 * :where() で詳細度を 0 に保ち（全体は sd-carousel の (0,0,1) のみ）、ノード個別スタイル
 * （.sd-N の cursor、(0,1,0)）が上書きできるようにする（studio-preview のインライン style 優先と等価）。 */
sd-carousel :where([slot="prev"], [slot="next"], [slot="play-toggle"]) {
  cursor: pointer;
}

/** root-element */
.sd-1 {
  min-height: 100vh;
  overflow: clip;
}

/* --- CSS Custom Properties for Gradient Animation --- */
@property --g-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}
@property --g-color-0 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0.01%;
}
@property --g-color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-7 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-8 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-9 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-10 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-10 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --g-color-11 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --g-position-11 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
/* ループ帯(loop-track, position:absolute)はボックスより広くなるため、はみ出しをクリップする。
   studio-preview の LoopBoxRenderer が node style の後に overflow:hidden を inline 強制するのと同等。
   sd-loop-box は .box 由来で position:relative のため absolute な track の包含ブロックとしてクリップが効く。
   !important は、ノード個別/レスポンシブの overflow（.sd-N { overflow-x/y } (0,1,0)）に対し
   type selector (0,0,1) が specificity・出力順の両方で負けるのを防ぐため。ループのクリップは
   機能上の不変条件であり、studio-preview の inline 強制（ユーザーの overflow 設定より常に優先）と等価。 */
sd-loop-box {
  overflow: hidden !important;
}
/* LoopBox内のnative imgがJS初期化前に固有サイズで膨張するのを防止 */
sd-loop-box > .img {
  max-width: 100%;
  height: auto;
}

:root { --s-color-46b3d76d: #ffffffff; --s-color-0f8ecffa: #fafafaff; --s-color-f4b1d046: #333333; --s-color-9b813fba: #666666ff; --s-color-c7bca637: #02844fff; --s-color-25bd9552: #ccccccff; --s-color-3a83ceeb: #f23a3c; --s-color-9ebb11ed: #00000033; --s-color-a9bdc3eb: #eb6aecff; --s-color-099d037b: #eb7eecff; --s-color-9d8dff33: #8658bfff; --s-color-748b3dd2: linear-gradient(90deg, transparent, transparent); --s-color-208297d5: #000000; --s-color-55bfd948: #eeeeeeff; --s-color-0a96acee: #eb77c9; --s-color-e0a83ad7: #8658bfff; }

.text.theme-7ba2a37a { font-family:var(--s-font-b5847304); font-size:16px; font-weight:500; line-height:2.00; }
.text.theme-5f8e49d1 { font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:28px; font-weight:500; letter-spacing:0.10em; line-height:2.00; text-orientation:mixed; writing-mode:horizontal-tb; }
.text.theme-868c7dfb { font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:32px; font-weight:600; letter-spacing:0.20em; line-height:1.60; text-orientation:mixed; writing-mode:horizontal-tb; }
.text.theme-42a6b748 { font-family:var(--s-font-cca8ed71); font-feature-settings:normal; font-size:36px; font-weight:700; letter-spacing:0.15em; line-height:1.60; text-orientation:mixed; writing-mode:horizontal-tb; }
.text.theme-fb920b92 { font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:12px; font-weight:600; letter-spacing:0.20em; line-height:1.60; text-orientation:mixed; writing-mode:horizontal-tb; }

@media (max-width: 990px) {
.text.theme-7ba2a37a { font-size:24px; }
}

@media (max-width: 690px) {
.text.theme-7ba2a37a { font-size:10px; }
.text.theme-5f8e49d1 { font-size:12px; }
.text.theme-868c7dfb { font-size:12px; }
.text.theme-42a6b748 { font-size:24px; }
}

@media (max-width: 360px) {
.text.theme-42a6b748 { font-size:20px; }
}

.sd-1 { align-content:flex-end; align-items:flex-end; background:#eb76c9; flex-direction:column; flex-wrap:nowrap; gap:0px; height:100%; justify-content:flex-start; padding:0px; width:100%; max-width:100%; }
.sd-1 > * { --gap-h:0px; --gap-v:0px; }
body { background:#eb76c9; }
.sd-2 { background:transparent; display:none; overflow-x:visible; overflow-y:visible; }
.sd-2 { animation-name:sd-2-scroll; animation-fill-mode:both; }
@keyframes sd-2-scroll { 100% { translate: 0px -1500px; } }
.sd-3 { align-content:flex-end; align-items:flex-end; height:auto; justify-content:flex-start; padding:0px 130px 0px 0px; width:100%; max-width:100%; }
.sd-4 { background:transparent; display:flex; flex:none; left:0px; position:absolute; top:0px; z-index:-1; }
.sd-5 { align-content:flex-start; align-items:flex-start; flex-direction:column; flex-wrap:nowrap; height:100vh; justify-content:space-between; padding:0; width:100%; max-width:100%; }
.sd-5 > * { --gap-h:0px; --gap-v:0px; }
.sd-6 { flex:none; flex-direction:row; gap:16px; height:auto; width:100%; max-width:100%; }
.sd-6 > * { --gap-h:16px; --gap-v:0px; }
.sd-7 { color:#ffffff80; font-family:var(--s-font-b5847304); font-size:90px; font-weight:200; height:auto; line-height:1.4; text-align:left; width:auto; justify-content:flex-start; max-width:100%; }
.sd-8 { color:#ffffff80; font-family:var(--s-font-b5847304); font-size:90px; font-weight:200; height:auto; line-height:1.4; text-align:left; width:auto; justify-content:flex-start; max-width:100%; }
.sd-9 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; gap:40px 0px; height:auto; justify-content:space-between; padding:0px; width:809px; max-width:100%; }
.sd-9 > * { --gap-h:0px; --gap-v:40px; }
.sd-10 { flex:none; height:auto; width:250px; max-width:100%; }
.sd-10 { aspect-ratio:auto 777 / 582; }
.sd-11 { color:#f3ece2; font-family:var(--s-font-b5847304); font-size:24px; font-weight:400; height:auto; letter-spacing:normal; line-height:1.60; text-align:center; width:auto; justify-content:center; max-width:100%; }
.sd-12 { flex:none; flex-direction:row; gap:16px; height:auto; width:100%; max-width:100%; }
.sd-12 > * { --gap-h:16px; --gap-v:0px; }
.sd-13 { flex:none; height:auto; width:240px; max-width:100%; }
.sd-13 { aspect-ratio:auto 1446 / 2048; }
.sd-14 { flex:none; height:auto; width:240px; max-width:100%; }
.sd-14 { aspect-ratio:auto 1446 / 2048; }
.sd-15 { flex:none; height:auto; width:240px; max-width:100%; }
.sd-15 { aspect-ratio:auto 1076 / 1522; }
.sd-16 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; width:100%; max-width:100%; }
.sd-16.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-17 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; width:100%; max-width:100%; }
.sd-18 { border-radius:0px; flex:none; height:80px; width:100%; max-width:100%; }
.sd-19 { background:transparent; bottom:auto; flex:none; left:auto; overflow-x:clip; overflow-y:clip; position:relative; right:auto; top:auto; }
.sd-20 { align-content:flex-end; align-items:flex-end; height:100vh; justify-content:flex-start; padding:0px 130px 0px 0px; width:100%; max-width:100%; }
.sd-21 { align-content:center; align-items:center; background:#f3ebe2ff; flex:none; flex-direction:column; flex-wrap:nowrap; gap:0px; height:100vh; justify-content:flex-start; overflow-x:hidden; overflow-y:auto; padding:0px; width:45%; max-width:45%; }
.sd-21 > * { --gap-h:0px; --gap-v:0px; }
.symbol-1 { background:#EEEEEE; display:none; height:160px; width:200px; max-width:100%; }
.symbol-1__sd-1 { align-content:center; align-items:center; flex-wrap:nowrap; justify-content:center; padding:0px; }
.symbol-1__sd-2 { height:auto; width:160px; max-width:100%; }
.symbol-1__sd-2 { aspect-ratio:auto 1385 / 405; }
.symbol-1__sd-3 { color:#333333; font-size:24px; --material-symbol-weight:400; }
.modal-3__backdrop { background:rgba(0,0,0,0.16); }
.modal-3__container { height:100%; justify-content:center; padding:0px; width:100%; }
.modal-3__sd-1 { align-content:center; align-items:center; flex:none; flex-wrap:nowrap; height:100%; justify-content:center; padding:0px; width:100%; max-width:100%; }
.modal-3__sd-2 { align-content:center; align-items:center; background:var(--s-color-e0a83ad7); border-radius:0px; flex:1; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; width:100%; max-width:100%; }
.modal-3__sd-3 { align-content:center; align-items:center; background:transparent; bottom:auto; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; left:auto; padding:10px; position:absolute; right:0px; top:0px; width:auto; z-index:1; max-width:100%; }
.modal-3__sd-4 { bottom:auto; color:#ffffffff; font-size:24px; left:auto; position:relative; right:auto; top:auto; --material-symbol-weight:400; }
.modal-3__sd-5 { align-content:flex-start; align-items:flex-start; flex-direction:column; flex-wrap:nowrap; gap:60px 0px; justify-content:flex-start; padding:0px; }
.modal-3__sd-5 > * { --gap-h:0px; --gap-v:60px; }
.modal-3__sd-6 { flex:none; height:auto; width:120px; max-width:100%; }
.modal-3__sd-6 { aspect-ratio:auto 777 / 582; }
.modal-3__sd-7 { align-content:flex-start; align-items:flex-start; background:transparent; bottom:auto; flex-direction:column; flex-wrap:nowrap; gap:20px 0px; height:auto; justify-content:flex-start; left:auto; position:relative; right:auto; top:auto; width:200px; max-width:100%; }
.modal-3__sd-7 > * { --gap-h:0px; --gap-v:20px; }
.modal-3__sd-8 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.modal-3__sd-9 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.modal-3__sd-10 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.modal-3__sd-11 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.modal-3__sd-12 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.modal-3__sd-13 { color:#f3ece2; font-size:32px; }
.modal-3__sd-14 { color:#f3ece2; font-size:32px; padding:0px; }
.modal-3__sd-15 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px 0px 30px; width:100%; max-width:100%; }
.modal-3__sd-16 { border-radius:0px; flex:none; height:40px; width:100%; max-width:100%; }
.modal-3__sd-16 > .image__bg-container::before { background-position:center top; background-size:contain; }
.sd-22 { align-content:center; align-items:center; display:flex; flex:none; flex-direction:column; flex-wrap:nowrap; gap:0px; justify-content:flex-start; padding:0px; rotate:180deg; width:100%; max-width:100%; }
.sd-22 > * { --gap-h:0px; --gap-v:0px; }
.sd-23 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; rotate:180deg; width:100%; max-width:100%; }
.sd-23.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-24 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; width:100%; max-width:100%; }
.sd-24.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-25 { border-radius:0px; flex:none; height:80px; width:100%; max-width:100%; }
.sd-26 { bottom:auto; color:var(--s-color-f4b1d046); font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:90px; font-weight:600; height:auto; left:auto; line-height:1.60; position:absolute; right:90px; text-align:left; text-orientation:mixed; top:0px; width:auto; writing-mode:vertical-rl; z-index:1; justify-content:flex-start; max-width:100%; }
.sd-27 { bottom:auto; color:var(--s-color-f4b1d046); font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:90px; font-weight:600; height:auto; left:auto; line-height:1.60; position:absolute; right:90px; text-align:left; text-orientation:mixed; top:0px; width:auto; writing-mode:vertical-rl; z-index:1; justify-content:flex-start; max-width:100%; }
.sd-28 { align-content:flex-start; align-items:flex-start; background:transparent; border-bottom:0px solid var(--s-color-0a96acee); border-left:0px solid var(--s-color-0a96acee); border-right:0px solid var(--s-color-0a96acee); border-top:0px solid var(--s-color-0a96acee); flex-direction:column; flex-wrap:nowrap; gap:20px; height:auto; justify-content:flex-start; margin:0px; padding:90px 30px; width:100%; max-width:100%; }
.sd-28.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-28 > * { --gap-h:0px; --gap-v:20px; }
.sd-28.appear > * { --gap-h:0px; --gap-v:20px; }
.sd-29 { bottom:auto; color:var(--s-color-9d8dff33); flex:none; font-family:var(--s-font-cca8ed71); font-feature-settings:normal; font-size:42px; font-weight:700; height:auto; left:auto; letter-spacing:normal; line-height:1.60; padding:0px; position:relative; right:auto; text-align:left; text-orientation:mixed; top:auto; width:100%; writing-mode:horizontal-tb; justify-content:flex-start; max-width:100%; }
.sd-30 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; width:100%; max-width:100%; }
.sd-30.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-31 { border-bottom:1px solid var(--s-color-0a96acee); border-left:1px solid var(--s-color-0a96acee); border-radius:20px; border-right:1px solid var(--s-color-0a96acee); border-top:1px solid var(--s-color-0a96acee); flex:none; height:auto; width:100%; max-width:100%; }
.sd-31.appear { filter:blur(100px); opacity:0; transition-delay:600ms; transition-duration:1400ms; transition-timing-function:ease-in-out; }
.sd-31:before { background-repeat:no-repeat; background-size:140%; }
.sd-31 { aspect-ratio:auto 2048 / 1365; }
.sd-32 { color:var(--s-color-e0a83ad7); flex:none; font-family:var(--s-font-b5847304); font-size:18px; font-weight:500; height:auto; line-height:1.60; text-align:left; width:100%; justify-content:flex-start; max-width:100%; }
.sd-33 { align-content:flex-start; align-items:flex-start; background:transparent; border-bottom:0px solid var(--s-color-0a96acee); border-left:0px solid var(--s-color-0a96acee); border-right:0px solid var(--s-color-0a96acee); border-top:0px solid var(--s-color-0a96acee); box-shadow:0px 0px 0px 0px; flex-direction:column; flex-wrap:nowrap; gap:20px; height:auto; justify-content:flex-start; margin:0px; padding:90px 30px; width:100%; max-width:100%; }
.sd-33.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-33 > * { --gap-h:0px; --gap-v:20px; }
.sd-33.appear > * { --gap-h:0px; --gap-v:20px; }
.sd-34 { bottom:auto; color:var(--s-color-e0a83ad7); flex:none; font-family:var(--s-font-cca8ed71); font-feature-settings:normal; font-size:32px; font-weight:700; height:auto; left:auto; letter-spacing:normal; line-height:1.60; padding:0px; position:relative; right:auto; text-align:left; text-orientation:mixed; top:auto; width:100%; writing-mode:horizontal-tb; justify-content:flex-start; max-width:100%; }
.sd-35 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; gap:20px; justify-content:center; padding:0px; width:100%; max-width:100%; }
.sd-35 > * { --gap-h:0px; --gap-v:20px; }
.sd-36 { background:#ffffffff; border-bottom:1px solid var(--s-color-0a96acee); border-left:1px solid var(--s-color-0a96acee); border-radius:1000px; border-right:1px solid var(--s-color-0a96acee); border-top:1px solid var(--s-color-0a96acee); flex:none; height:240px; mix-blend-mode:multiply; padding:30px; width:240px; max-width:100%; }
.sd-36.appear { filter:blur(100px); opacity:0; transition-delay:600ms; transition-duration:1400ms; transition-timing-function:ease-in-out; }
.sd-36 > .image__bg-container::before { background-repeat:no-repeat; background-size:60%; }
.sd-37 { color:var(--s-color-e0a83ad7); flex:none; font-family:var(--s-font-b5847304); font-size:18px; font-weight:500; height:auto; line-height:1.60; text-align:left; width:100%; justify-content:flex-start; max-width:100%; }
.sd-38 { align-content:flex-start; align-items:flex-start; background:transparent; border-bottom:0px solid var(--s-color-e0a83ad7); border-left:0px solid var(--s-color-e0a83ad7); border-radius:0px; border-right:0px solid var(--s-color-e0a83ad7); border-top:0px solid var(--s-color-e0a83ad7); flex-direction:column; flex-wrap:nowrap; gap:20px; justify-content:flex-start; padding:20px; }
.sd-38 > * { --gap-h:0px; --gap-v:20px; }
.sd-39 { align-content:center; align-items:center; background:transparent; border-bottom:0px solid var(--s-color-e0a83ad7); border-left:0px solid var(--s-color-e0a83ad7); border-right:0px solid var(--s-color-e0a83ad7); border-top:0px solid var(--s-color-e0a83ad7); box-shadow:0px 2px 6px 1px rgba(0, 0, 0, 0.4); flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; width:100%; max-width:100%; }
.sd-39.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-40 { border-bottom:0px solid var(--s-color-0a96acee); border-left:0px solid var(--s-color-0a96acee); border-radius:0px; border-right:0px solid var(--s-color-0a96acee); border-top:0px solid var(--s-color-0a96acee); flex:none; height:auto; width:100%; max-width:100%; }
.sd-40.appear { filter:blur(100px); opacity:0; transition-delay:600ms; transition-duration:1400ms; transition-timing-function:ease-in-out; }
.sd-40:before { background-repeat:no-repeat; background-size:140%; }
.sd-40 { aspect-ratio:auto 937 / 1072; }
.sd-41 { align-content:center; align-items:center; border-bottom:0px solid var(--s-color-0a96acee); border-left:0px solid var(--s-color-0a96acee); border-right:0px solid var(--s-color-0a96acee); border-top:0px solid var(--s-color-0a96acee); flex-direction:column; flex-wrap:nowrap; gap:0px; height:auto; justify-content:flex-start; margin:0px; padding:90px 0px 30px; width:100%; max-width:100%; }
.sd-41 > .image__bg-container::before { background-position:center top; background-repeat:repeat; background-size:60%; }
.sd-41 > * { --gap-h:0px; --gap-v:0px; }
.sd-41:before > * { --gap-h:0px; --gap-v:0px; }
.sd-42 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; gap:0px; justify-content:flex-start; padding:30px; width:100%; max-width:100%; }
.sd-42 > * { --gap-h:0px; --gap-v:0px; }
.sd-43 { align-content:center; align-items:center; background:#ffffffff; border-bottom:1px solid var(--s-color-0a96acee); border-left:1px solid var(--s-color-0a96acee); border-radius:40px; border-right:1px solid var(--s-color-0a96acee); border-top:1px solid var(--s-color-0a96acee); flex:none; flex-direction:column; flex-wrap:nowrap; gap:0px; justify-content:flex-start; overflow-x:clip; overflow-y:clip; padding:0px; width:100%; max-width:100%; }
.sd-43 > * { --gap-h:0px; --gap-v:0px; }
.sd-44 { border-radius:0px; flex:none; height:auto; width:100%; max-width:100%; }
.sd-44:before { background-repeat:no-repeat; background-size:cover; }
.sd-44 { aspect-ratio:auto 2048 / 1365; }
.sd-45 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; gap:0px; justify-content:center; padding:20px; width:100%; max-width:100%; }
.sd-45 > * { --gap-h:0px; --gap-v:0px; }
.sd-46 { align-content:center; align-items:center; background:var(--s-color-0a96acee); border-bottom:0px solid var(--s-color-9d8dff33); border-left:0px solid var(--s-color-9d8dff33); border-radius:1000px; border-right:0px solid var(--s-color-9d8dff33); border-top:0px solid var(--s-color-9d8dff33); flex:none; flex-direction:row; flex-wrap:nowrap; gap:16px; height:auto; justify-content:space-between; overflow-x:hidden; overflow-y:hidden; padding:20px; width:100%; max-width:100%; }
.sd-46:hover { background:#ff5035ff; --ha:1; }
.sd-46 > * { --gap-h:16px; --gap-v:0px; }
.sd-46:hover > * { --gap-h:16px; --gap-v:0px; }
.sd-47 { background:transparent; flex:none; height:30px; width:30px; max-width:100%; }
.sd-48 { color:var(--s-color-46b3d76d); flex:none; font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:28px; font-style:normal; font-weight:400; height:49px; letter-spacing:normal; line-height:1.75; text-align:center; width:auto; justify-content:center; max-width:100%; }
.sd-46:hover .sd-48 { color:#fafafaff; }
.sd-49 { bottom:auto; color:#ffffffff; font-size:42px; height:20px; left:auto; padding:0px; position:relative; right:auto; scale:1 1.8; top:auto; width:30px; --material-symbol-weight:100; max-width:100%; }
.sd-50 { align-content:flex-start; align-items:flex-start; background:#ffffffff; border-bottom:1px solid var(--s-color-0a96acee); border-left:1px solid var(--s-color-0a96acee); border-radius:20px; border-right:1px solid var(--s-color-0a96acee); border-top:1px solid var(--s-color-0a96acee); flex-direction:row; flex-wrap:nowrap; gap:20px; justify-content:flex-start; padding:20px 40px; }
.sd-50 > * { --gap-h:20px; --gap-v:0px; }
.sd-51 { color:var(--s-color-e0a83ad7); font-size:42px; padding:0px; }
.sd-52 { color:var(--s-color-e0a83ad7); font-size:42px; }
.sd-53 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; gap:0px; justify-content:flex-start; padding:0px; width:100%; max-width:100%; }
.sd-53 > * { --gap-h:0px; --gap-v:0px; }
.sd-54 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; rotate:180deg; width:100%; max-width:100%; }
.sd-54.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-55 { align-content:center; align-items:center; background:transparent; flex-direction:column; flex-wrap:nowrap; height:auto; justify-content:center; padding:0px; width:100%; max-width:100%; }
.sd-55.appear { opacity:0; transition-duration:800ms; transition-timing-function:ease-in-out; translate:0px 20px; }
.sd-56 { border-radius:0px; flex:none; height:80px; width:100%; max-width:100%; }
.sd-57 { bottom:auto; color:var(--s-color-f4b1d046); font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:90px; font-weight:600; height:auto; left:auto; line-height:1.60; position:absolute; right:90px; text-align:left; text-orientation:mixed; top:0px; width:auto; writing-mode:vertical-rl; z-index:1; justify-content:flex-start; max-width:100%; }
.sd-58 { bottom:auto; color:var(--s-color-f4b1d046); font-family:var(--s-font-b5847304); font-feature-settings:normal; font-size:90px; font-weight:600; height:auto; left:auto; line-height:1.60; position:absolute; right:90px; text-align:left; text-orientation:mixed; top:0px; width:auto; writing-mode:vertical-rl; z-index:1; justify-content:flex-start; max-width:100%; }
.symbol-2 { align-content:flex-start; align-items:flex-start; background:transparent; display:flex; flex:none; flex-direction:column; flex-wrap:nowrap; height:100vh; justify-content:space-between; left:0px; padding:0; position:absolute; top:0px; width:100%; z-index:-1; max-width:100%; }
.symbol-2__sd-1 { align-content:flex-start; align-items:flex-start; flex:none; flex-direction:column; flex-wrap:nowrap; justify-content:space-between; padding:0px; width:100%; max-width:100%; }
.symbol-2__sd-2 { display:none; flex:none; flex-direction:row; gap:16px; height:auto; width:100%; max-width:100%; }
.symbol-2__sd-2 > * { --gap-h:16px; --gap-v:0px; }
.symbol-2__sd-3 { color:#ffffff80; font-family:var(--s-font-35a599e0); font-size:24px; font-weight:300; height:auto; line-height:1.4; text-align:left; width:auto; justify-content:flex-start; max-width:100%; }
.symbol-2__sd-4 { color:#ffffff66; font-family:var(--s-font-35a599e0); font-size:24px; font-weight:300; height:auto; line-height:1.4; text-align:left; width:auto; justify-content:flex-start; max-width:100%; }
.symbol-2__sd-5 { flex:none; flex-direction:row; gap:40px; height:auto; margin:-20px 0px 0px; width:100%; max-width:100%; }
.symbol-2__sd-5 > * { --gap-h:40px; --gap-v:0px; }
.symbol-2__sd-6 { color:#ffffff4d; font-family:var(--s-font-f5b0f64a); font-size:90px; font-style:italic; font-weight:200; height:auto; line-height:1.00; text-align:left; width:auto; justify-content:flex-start; max-width:100%; }
.symbol-2__sd-7 { color:#ffffff4d; font-family:var(--s-font-f5b0f64a); font-size:90px; font-style:normal; font-weight:200; height:auto; line-height:1.00; text-align:left; width:auto; justify-content:flex-start; max-width:100%; }
.symbol-2__sd-8 { align-content:center; align-items:center; flex:none; flex-direction:column; flex-wrap:nowrap; gap:40px 0px; height:auto; justify-content:space-between; padding:30px; width:50%; max-width:50%; }
.symbol-2__sd-8 > * { --gap-h:0px; --gap-v:40px; }
.symbol-2__sd-9 { flex:none; height:auto; width:250px; max-width:100%; }
.symbol-2__sd-9 { aspect-ratio:auto 777 / 582; }
.symbol-2__sd-10 { align-content:flex-end; align-items:flex-end; background:transparent; bottom:auto; flex-direction:column; flex-wrap:nowrap; gap:20px 0px; height:auto; justify-content:flex-start; left:auto; position:absolute; right:20px; top:0px; width:200px; z-index:1; }
.symbol-2__sd-10 > * { --gap-h:0px; --gap-v:20px; }
.symbol-2__sd-11 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.symbol-2__sd-12 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.symbol-2__sd-13 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.symbol-2__sd-14 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.symbol-2__sd-15 { color:#f4ebe2; font-family:var(--s-font-cca8ed71); font-size:20px; font-weight:500; height:auto; line-height:1.4; text-align:right; width:auto; justify-content:flex-end; max-width:100%; }
.symbol-2__sd-16 { color:#f3ece2; font-size:32px; }
.symbol-2__sd-17 { color:#f3ece2; font-size:32px; padding:0px; }
.symbol-2__sd-18 { color:#f3ece2; font-family:var(--s-font-35a599e0); font-size:20px; font-weight:400; height:auto; letter-spacing:normal; line-height:1.60; text-align:center; width:auto; justify-content:center; max-width:100%; }
.symbol-2__sd-19 { flex:none; flex-direction:row; gap:16px; height:auto; width:100%; max-width:100%; }
.symbol-2__sd-19 > * { --gap-h:16px; --gap-v:0px; }
.symbol-2__sd-20 { flex:none; height:auto; width:240px; max-width:100%; }
.symbol-2__sd-20 { aspect-ratio:auto 1446 / 2048; }
.symbol-2__sd-21 { flex:none; height:auto; width:240px; max-width:100%; }
.symbol-2__sd-21 { aspect-ratio:auto 1446 / 2048; }
.symbol-2__sd-22 { flex:none; height:auto; width:240px; max-width:100%; }
.symbol-2__sd-22 { aspect-ratio:auto 1076 / 1522; }

@media (max-width: 1240px) {
.sd-2 { display:none; }
.sd-4 { display:flex; }
.sd-16 { padding:60px 10px 0px; }
.sd-17 { padding:60px 10px 0px; }
.symbol-1 { display:none; }
.modal-3__sd-15 { padding:60px 10px 0px; }
.sd-22 { display:flex; }
.sd-22 > * { --gap-h:0px; --gap-v:0px; }
.sd-23 { padding:60px 10px 0px; }
.sd-24 { padding:60px 10px 0px; }
.sd-28 { padding:120px 30px 0px; }
.sd-28 > * { --gap-h:0px; --gap-v:20px; }
.sd-28.appear > * { --gap-h:0px; --gap-v:20px; }
.sd-30 { padding:0px; }
.sd-33 { padding:120px 30px 0px; }
.sd-33 > * { --gap-h:0px; --gap-v:20px; }
.sd-33.appear > * { --gap-h:0px; --gap-v:20px; }
.sd-54 { padding:60px 10px 0px; }
.sd-55 { padding:60px 10px 0px; }
.symbol-2 { display:flex; }
.symbol-2__sd-2 { display:none; }
.symbol-2__sd-2 > * { --gap-h:16px; --gap-v:0px; }
}

@media (max-width: 990px) {
.sd-2 { display:none; }
.sd-4 { display:flex; }
.sd-16 { padding:50px 10px 0px; }
.sd-17 { padding:50px 10px 0px; }
.sd-21 { flex:none; gap:727px; height:4000px; margin:0px 0px 136px; width:90%; max-width:90%; }
.sd-21 > * { --gap-h:0px; --gap-v:727px; }
.symbol-1 { display:none; }
.modal-3__sd-15 { padding:50px 10px 0px; }
.sd-22 { display:flex; gap:727px; }
.sd-22 > * { --gap-h:0px; --gap-v:727px; }
.sd-23 { padding:50px 10px 0px; }
.sd-24 { padding:50px 10px 0px; }
.sd-26 { bottom:auto; font-size:64px; left:auto; right:60px; top:0px; }
.sd-27 { bottom:auto; font-size:64px; left:auto; right:60px; top:0px; }
.sd-30 { padding:50px 10px 0px; }
.sd-32 { flex:none; font-size:24px; text-align:center; width:calc(90% - (var(--gap-h) * 0.1)); justify-content:center; max-width:calc(90% - (var(--gap-h) * 0.1)); }
.sd-37 { flex:none; font-size:24px; text-align:center; width:calc(90% - (var(--gap-h) * 0.1)); justify-content:center; max-width:calc(90% - (var(--gap-h) * 0.1)); }
.sd-39 { padding:50px 10px 0px; }
.sd-48 { font-size:20px; }
.sd-53 { gap:727px; }
.sd-53 > * { --gap-h:0px; --gap-v:727px; }
.sd-54 { padding:50px 10px 0px; }
.sd-55 { padding:50px 10px 0px; }
.sd-57 { bottom:auto; font-size:64px; left:auto; right:60px; top:0px; }
.sd-58 { bottom:auto; font-size:64px; left:auto; right:60px; top:0px; }
.symbol-2 { display:flex; }
.symbol-2__sd-2 { display:none; }
.symbol-2__sd-2 > * { --gap-h:16px; --gap-v:0px; }
}

@media (max-width: 690px) {
.sd-1 { background:#f4ebe2; gap:0px; }
.sd-1 > * { --gap-h:0px; --gap-v:0px; }
.sd-2 { bottom:auto; display:none; flex:none; left:auto; position:relative; right:auto; top:auto; z-index:3; }
.sd-2.appear { transition-delay:1000ms; transition-duration:1000ms; }
.sd-3 { align-content:center; align-items:center; height:100vh; justify-content:flex-start; padding:0px; }
.sd-4 { background:var(--s-color-0a96acee); bottom:auto; display:flex; flex:none; left:auto; position:relative; right:auto; top:auto; }
.sd-5 { align-content:flex-start; align-items:flex-start; gap:0px; height:100vh; justify-content:space-between; }
.sd-5 > * { --gap-h:0px; --gap-v:0px; }
.sd-6 { flex:none; height:131px; width:auto; max-width:100%; }
.sd-6 > * { --gap-h:16px; --gap-v:0px; }
.sd-7 { font-family:var(--s-font-35a599e0); font-weight:100; }
.sd-8 { font-family:var(--s-font-35a599e0); font-weight:100; }
.sd-10 { flex:none; width:calc(60% - (var(--gap-h) * 0.4)); max-width:calc(60% - (var(--gap-h) * 0.4)); }
.sd-10.appear { filter:blur(100px); mix-blend-mode:normal; scale:0.7 0.7; transition-delay:500ms; transition-duration:1000ms; }
.sd-13 { flex:none; width:160px; max-width:100%; }
.sd-14 { flex:none; width:160px; max-width:100%; }
.sd-15 { flex:none; width:160px; max-width:100%; }
.sd-16 { height:auto; padding:0px; width:100%; max-width:100%; }
.sd-17 { height:auto; padding:0px; width:100%; max-width:100%; }
.sd-18 { flex:none; height:60px; width:100%; max-width:100%; }
.sd-19 { bottom:auto; left:auto; margin:0px; overflow-x:visible; overflow-y:visible; position:relative; right:auto; top:auto; max-width:100%; }
.sd-20 { height:auto; padding:0px; }
.sd-21 { align-content:center; align-items:center; gap:0px; height:auto; margin:0px; overflow-x:visible; overflow-y:visible; padding:0px; width:100%; max-width:100%; }
.sd-21 > * { --gap-h:0px; --gap-v:0px; }
.symbol-1 { align-content:center; align-items:center; background:transparent; display:flex; flex-direction:row; flex-wrap:nowrap; height:auto; justify-content:space-between; margin:0px; padding:20px; position:sticky; top:0px; width:100%; z-index:1; max-width:100%; }
.symbol-1__sd-1 { align-content:center; align-items:center; flex-direction:row; justify-content:space-between; }
.symbol-1__sd-2 { flex:none; height:auto; width:160px; max-width:100%; }
.symbol-1__sd-3 { color:var(--s-color-0a96acee); font-size:42px; }
.modal-3__sd-1 { padding:0px 0px 40px; }
.modal-3__sd-2 { padding:20px; }
.modal-3__sd-3 { padding:20px; }
.modal-3__sd-4 { color:#f3ece2ff; font-size:42px; }
.modal-3__sd-6 { flex:none; width:140px; max-width:100%; }
.modal-3__sd-15 { flex:none; height:60px; padding:0px; width:100%; max-width:100%; }
.modal-3__sd-16 { flex:none; height:60px; width:100%; max-width:100%; }
.modal-3__sd-16 > .image__bg-container::before { background-position:center top; background-repeat:repeat; background-size:cover; }
.sd-22 { align-content:center; align-items:center; display:flex; gap:0px; }
.sd-22 > * { --gap-h:0px; --gap-v:0px; }
.sd-23 { height:auto; padding:0px; width:100%; max-width:100%; }
.sd-24 { flex:none; height:auto; padding:0px; width:100%; max-width:100%; }
.sd-25 { flex:none; height:60px; width:100%; max-width:100%; }
.sd-26 { bottom:auto; font-size:40px; left:auto; right:40px; top:0px; }
.sd-27 { bottom:auto; font-size:40px; left:auto; right:40px; top:0px; }
.sd-28 { gap:20px; height:auto; margin:0px; padding:20px 20px 60px; width:100%; max-width:100%; }
.sd-28 > * { --gap-h:0px; --gap-v:20px; }
.sd-28.appear > * { --gap-h:0px; --gap-v:20px; }
.sd-29 { font-size:24px; padding:0px; }
.sd-30 { height:auto; padding:0px; width:100%; max-width:100%; }
.sd-31 { height:auto; width:100%; max-width:100%; }
.sd-32 { flex:none; font-size:14px; line-height:1.60; text-align:justify; width:100%; justify-content:space-between; max-width:100%; }
.sd-33 { gap:20px; height:auto; margin:0px; padding:60px 20px; width:100%; max-width:100%; }
.sd-33 > * { --gap-h:0px; --gap-v:20px; }
.sd-33.appear > * { --gap-h:0px; --gap-v:20px; }
.sd-34 { font-size:24px; padding:0px; }
.sd-35 { gap:10px; height:auto; width:100%; max-width:100%; }
.sd-35 > * { --gap-h:0px; --gap-v:10px; }
.sd-36 { flex:none; height:200px; width:200px; max-width:100%; }
.sd-37 { flex:none; font-size:14px; line-height:1.60; text-align:justify; width:100%; justify-content:space-between; max-width:100%; }
.sd-38 { gap:10px; }
.sd-38 > * { --gap-h:0px; --gap-v:10px; }
.sd-39 { height:auto; padding:0px; width:100%; max-width:100%; }
.sd-40 { height:auto; width:100%; max-width:100%; }
.sd-41 { height:auto; margin:0px; padding:60px 0px; width:100%; max-width:100%; }
.sd-41 > * { --gap-h:0px; --gap-v:0px; }
.sd-41:before > * { --gap-h:0px; --gap-v:0px; }
.sd-42 { padding:20px; }
.sd-42 > * { --gap-h:0px; --gap-v:0px; }
.sd-44 { flex:none; height:auto; padding:0px; width:100%; max-width:100%; }
.sd-46 { height:auto; padding:2px 2px 2px 10px; width:100%; max-width:100%; }
.sd-46 > * { --gap-h:16px; --gap-v:0px; }
.sd-46:hover > * { --gap-h:16px; --gap-v:0px; }
.sd-48 { font-size:16px; }
.sd-49 { flex:none; height:80px; scale:1 1.2; }
.sd-50 { gap:20px; }
.sd-50 > * { --gap-h:20px; --gap-v:0px; }
.sd-53 { align-content:center; align-items:center; gap:0px; }
.sd-53 > * { --gap-h:0px; --gap-v:0px; }
.sd-54 { height:auto; padding:0px; width:100%; max-width:100%; }
.sd-55 { flex:none; height:auto; padding:0px; width:100%; max-width:100%; }
.sd-56 { flex:none; height:60px; width:100%; max-width:100%; }
.sd-57 { bottom:auto; font-size:40px; left:auto; right:40px; top:0px; }
.sd-58 { bottom:auto; font-size:40px; left:auto; right:40px; top:0px; }
.symbol-2 { display:none; }
.symbol-2__sd-2 { display:none; }
.symbol-2__sd-2 > * { --gap-h:16px; --gap-v:0px; }
}

@media (max-width: 360px) {
.sd-2 { display:none; }
.sd-4 { display:flex; }
.symbol-1 { display:flex; z-index:1; }
.modal-3__sd-15 { padding:20px 10px 0px; }
.modal-3__sd-16 { flex:none; height:200px; }
.sd-22 { display:flex; }
.sd-22 > * { --gap-h:0px; --gap-v:0px; }
.sd-23 { padding:20px 10px 0px; }
.sd-24 { padding:20px 10px 0px; }
.sd-25 { flex:none; height:200px; }
.sd-26 { font-size:28px; }
.sd-27 { font-size:28px; }
.sd-29 { font-size:20px; }
.sd-30 { padding:20px 10px 0px; }
.sd-31 { flex:none; height:200px; }
.sd-34 { font-size:20px; }
.sd-36 { flex:none; height:200px; }
.sd-39 { padding:20px 10px 0px; }
.sd-40 { flex:none; height:200px; }
.sd-54 { padding:20px 10px 0px; }
.sd-55 { padding:20px 10px 0px; }
.sd-56 { flex:none; height:200px; }
.sd-57 { font-size:28px; }
.sd-58 { font-size:28px; }
.symbol-2 { display:none; }
.symbol-2__sd-2 { display:none; }
.symbol-2__sd-2 > * { --gap-h:16px; --gap-v:0px; }
}


.apps-studio-banner {
    align-items: center;
    border-radius: 4px;
    bottom: 20px;
    height: 20px;
    justify-content: center;
    display: flex;
    left: 20px;
    perspective: 300px;
    position: fixed;
    width: 84px;
    z-index: 2000;
    transition: .4s cubic-bezier(.4,.4,0,1);
    background-color: #FFFFFF;
    padding: 0;
    box-sizing: border-box;
}
.apps-studio-banner .long-banner {
  display:none;
}
.apps-studio-banner:hover {
    width: 200px;
    height: 32px;
}
.apps-studio-banner:hover .long-banner {
  display:initial;
}
.apps-studio-banner:hover .short-banner {
  display:none;
}
.apps-studio-banner path {
  fill: #000000;
}



      sd-loop-box .appear {
        opacity: inherit !important;
        transform: inherit !important;
        transition: inherit !important;
      }

      /* measurement用のsizerは子要素の個別指定より常に優先して非表示にする */
      /* max-width:100%を解除し、コンテンツの自然幅を正確に計測する */
      sd-loop-box .loop-sizer,
      sd-loop-box .loop-sizer * {
        visibility: hidden !important;
        max-width: none !important;
      }
    
/* =========================================================================
   公演 個別ページ（/performances/{slug}/）用オリジナルスタイル
   ベースは about の枠（about.css をコピー）。詳細部のみ usa-perf-* で装飾。
   配色・フォントは STUDIO の CSS 変数を流用しサイトのトンマナに合わせる。
   ========================================================================= */
.usa-perf {
	/* usa-content-block（about/公演一覧/メンバー等）に余白を合わせる: 上60 / 左右30 / 下90、≤1240で下0 */
	width: 100%; max-width: 760px; margin: 0 auto; padding: 60px 30px 90px;
	box-sizing: border-box;
	font-family: var(--s-font-b5847304, 'Open Sans', 'Noto Sans JP', sans-serif);
	color: var(--s-color-f4b1d046, #333);
}
/* usa-content-block と同じく、≤1240px では下余白を 0 に */
@media (max-width: 1240px) {
	.usa-perf { padding-bottom: 0; }
}
.usa-perf__flyer { margin: 0 0 28px; }
.usa-perf__flyer img { width: 100%; height: auto; border-radius: 0; display: block; }
.usa-perf__tagline { font-size: 13px; letter-spacing: 0.12em; color: #8658bf; margin: 0 0 6px; }
.usa-perf__title {
	font-size: 26px; font-weight: 700; line-height: 1.5; color: #8658bf; margin: 0 0 24px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.usa-perf__status { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: #fff; background: #eb77c9; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.usa-perf__status--past { background: #b0aed0; }
.usa-perf__block { margin: 0 0 28px; }
.usa-perf__label { font-size: 16px; font-weight: 700; color: #8658bf; margin: 0 0 10px; }
.usa-perf__schedule { list-style: none; margin: 0; padding: 0; }
.usa-perf__schedule li { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid #eb77c9; font-size: 15px; }
.usa-perf__date { color: #8658bf; min-width: 140px; }
.usa-perf__body { font-size: 16px; line-height: 2; }
.usa-perf__body p { margin: 0 0 1.4em; color: #8658bf; }
.usa-perf__body img { max-width: 100%; height: auto; border-radius: 8px; }
.usa-perf__body h2, .usa-perf__body h3 { color: #8658bf; margin: 1.6em 0 0.5em; }
.usa-perf__body a { color: #8658bf; text-decoration: underline; }
.usa-perf__photos { display: flex; flex-direction: column; gap: 16px; margin: 32px 0 0; }
.usa-perf__photo { width: 100%; height: auto; border-radius: 0; display: block; }
/* ボタンは共通 usa-btn（style.css）に集約済み。 */
@media (max-width: 690px) {
	.usa-perf { padding: 60px 20px 60px; } /* usa-content-block の SP 値（sd-28 @690）に合わせる */
	.usa-perf__title { font-size: 22px; }
	.usa-perf__date { min-width: 0; }
}

/* =========================================================================
   公演個別ページ: article（.usa-perf）内は Noto Sans JP を最優先（2026-06-27）
   ※ ただしボタン内アイコン(material-symbols)はアイコンフォントを維持する例外あり。
   ========================================================================= */
.usa-perf,
.usa-perf * {
	font-family: 'Noto Sans JP', sans-serif !important;
}
/* アイコンフォントだけは Noto 上書きから除外（除外しないと glyph 名が文字で出る） */
.usa-perf .material-symbols-outlined {
	font-family: 'Material Symbols Outlined' !important;
}

/* ボタン内アロー: TOP sd-60 と同じ keyboard_arrow_right（縦長シェブロン）。ボタンサイズに追従(em)。 */
.usa-arrow.material-symbols-outlined {
  --material-symbol-weight: 100;
  font-size: 1.5em;
  line-height: 1;
  scale: 1 1.8;
  vertical-align: middle;
}

/* =========================================================================
   フォントサイズ統一（2026-06-28 / dev/font-sizes-new.md のスケール, 方式A）
   PC（>690px）＝ベース値 / SP（≤690px）＝@media 値。ファイル末尾＝最優先で上書き。
   トークン: h1=40/28 h2=28/22 h3=22/20 body=18/16 sub=16/16 caption=14/14
   ========================================================================= */
.usa-perf__title { font-size: 36px; } /* h1: 公演タイトル */
.usa-perf__body { font-size: 18px; } /* body: 本文 */
.usa-perf__schedule li { font-size: 16px; } /* sub: 公演日程 */
.usa-perf__label { font-size: 16px; } /* sub: ラベル */
.usa-perf__tagline, .usa-perf__status { font-size: 14px; } /* caption: tagline / バッジ */
@media (max-width: 690px) {
	.usa-perf__title { font-size: 28px; }
	.usa-perf__body { font-size: 16px; }
	.usa-perf__schedule li { font-size: 16px; }
	.usa-perf__label { font-size: 16px; }
	.usa-perf__tagline, .usa-perf__status { font-size: 14px; }
}

/* =========================================================================
   画像クリックで拡大ライトボックス（usa-lightbox.js が制御 / 2026-06-30）
   対象画像（フライヤー・公演写真・本文画像）はクリック可カーソルに。
   オーバーレイはメニュー/スプラッシュ(2147483600)の直下 2147483500。
   ========================================================================= */
.usa-zoomable { cursor: zoom-in; }

.usa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483500;
	background: rgba(20, 12, 24, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.usa-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.22s ease;
}
html.usa-lightbox-lock { overflow: hidden; }

/* 画像領域: 既定はフィット（contain）。クリックで等倍へ。 */
.usa-lightbox__figure {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	cursor: zoom-out; /* 画像外（暗い余白）クリックで閉じる領域 */
}
.usa-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	cursor: zoom-in;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
/* 等倍ズーム: フィット解除＋ブロック流し込みでスクロール（パン）可能に。 */
.usa-lightbox.is-zoomed .usa-lightbox__figure { display: block; }
.usa-lightbox.is-zoomed .usa-lightbox__img {
	max-width: none;
	max-height: none;
	margin: 0 auto;
	cursor: zoom-out;
}

/* 操作ボタン（×・前・次） */
.usa-lightbox__btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s ease, opacity 0.18s ease;
}
.usa-lightbox__btn:hover { background: rgba(235, 119, 201, 0.85); }
.usa-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.usa-lightbox__btn[hidden] { display: none; }
.usa-lightbox__close { top: 16px; right: 16px; font-size: 28px; }
.usa-lightbox__prev,
.usa-lightbox__next { top: 50%; transform: translateY(-50%); }
.usa-lightbox__prev { left: 16px; }
.usa-lightbox__next { right: 16px; }

/* ナビ矢印は サイト共通ボタン（.usa-btn__arrow）と同じ keyboard_arrow_*。
   weight100・縦長シェブロン(scaleY 1.8)。ボタンは flex 中央寄せのため、
   .usa-btn__arrow（絶対配置）で必要な 0.08em の縦補正は不要（実測で中央一致）。 */
.usa-lightbox__prev .material-symbols-outlined,
.usa-lightbox__next .material-symbols-outlined {
	font-size: 30px;
	line-height: 1;
	--material-symbol-weight: 100;
	transform: scaleY(1.8);
	pointer-events: none;
}

@media (max-width: 690px) {
	.usa-lightbox__figure { padding: 12px; }
	.usa-lightbox__btn { width: 42px; height: 42px; }
	.usa-lightbox__prev .material-symbols-outlined,
	.usa-lightbox__next .material-symbols-outlined { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.usa-lightbox,
	.usa-lightbox.is-open { transition: none; }
}