/*! * 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(0.4, 0.4, 0, 1),
    transform 400ms cubic-bezier(0.4, 0.4, 0, 1);
}

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

/* 閉じるアニメーション */

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

dialog[data-modal-transition-base].modal-closing > .modal-backdrop {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0.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;
}

.text.theme-5f8e49d1 {
  font-family: var(--s-font-b5847304);
  font-feature-settings: normal;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 2;
  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.2em;
  line-height: 1.6;
  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.6;
  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.2em;
  line-height: 1.6;
  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.6;
  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.6;
  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.6;
  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.6;
  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.6;
  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.6;
  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.6;
  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.6;
  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.6;
  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;
  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;
  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.6;
  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.6;
    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.6;
    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: 0.4s cubic-bezier(0.4, 0.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;
}

/* =========================================================================
   お知らせ（一覧 / 個別記事）用に追加したオリジナルスタイル
   ベースは about ページの枠（about.css をコピー）。本文部分のみ独自クラスで装飾。
   配色・フォントは STUDIO の CSS 変数を流用し、サイトの世界観に合わせる。
   ※ 後の CMS 化でもこのクラスのまま使えるよう、難読クラスではなく usa-news-* を使用。
   ========================================================================= */

.usa-news {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  /* usa-content-block（about/公演一覧/メンバー等）に余白を合わせる: 上60 / 左右30 / 下90、≤1240で下0 */
  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-news {
    padding-bottom: 0;
  }
}

.usa-news__heading {
  /* TOP の「お知らせ」見出し(sd-54)と同じ */
  font-size: 42px;
  font-weight: 700;
  color: var(--s-color-9d8dff33, #8658bf);
  font-family: var(--s-font-cca8ed71, "Open Sans", "Noto Sans JP", sans-serif);
  letter-spacing: normal;
  margin: 0 0 28px;
}

.usa-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.usa-news__item {
  border-bottom: 1px solid #eb77c9;
}

.usa-news__item:first-child {
  border-top: 1px solid #eb77c9;
}

.usa-news__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 4px;
  color: inherit;
  transition: opacity 0.2s ease;
}

.usa-news__link:hover {
  opacity: 0.6;
}

.usa-news__date {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #8658bf;
}

.usa-news__title {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.usa-news__empty {
  padding: 24px 4px;
  color: #888;
}

/* 個別記事 */

.usa-news__article-date {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #8658bf;
  margin: 0 0 8px;
}

.usa-news__article-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #8658bf;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eb77c9;
}

/* 本文フォントは about ページの本文(sd-32)と同じデザイン */

.usa-news__body {
  font-family: var(--s-font-b5847304, "Open Sans", "Noto Sans JP", sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--s-color-e0a83ad7, #8658bf);
  text-align: left;
}

.usa-news__body p {
  margin: 0 0 1.6em;
}

.usa-news__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.usa-news__body h2 {
  font-size: 20px;
  color: #8658bf;
  margin: 1.8em 0 0.6em;
}

.usa-news__body h3 {
  font-size: 17px;
  color: #8658bf;
  margin: 1.4em 0 0.5em;
}

.usa-news__body ul,
.usa-news__body ol {
  margin: 0 0 1.6em;
  padding-left: 1.4em;
}

.usa-news__body li {
  margin: 0 0 0.4em;
  line-height: 1.6;
}

.usa-news__body a {
  color: #eb77c9;
  text-decoration: underline;
}

.usa-news__body strong {
  font-weight: 700;
}

/* ボタンは共通 usa-btn（style.css）に集約済み。 */

@media (max-width: 690px) {
  .usa-news {
    padding: 60px 20px 60px;
  }
  /* usa-content-block の SP 値（sd-28 @690）に合わせる */
  .usa-news__heading {
    font-size: 24px;
  }
  .usa-news__article-title {
    font-size: 20px;
  }
  .usa-news__body {
    font-size: 14px;
    text-align: justify;
  }
  /* about本文SPと同じ */
}

@media (max-width: 360px) {
  .usa-news__heading {
    font-size: 20px;
  }
}

/* =========================================================================
   お知らせ一覧を TOP の「お知らせ」セクションと同じ見た目に。
   TOP は list-1 コンポーネント（studio.css）。そのスタイルをここへ移植。
   ※ /news/ のフレームは sd-53/sd-54 を別用途で使うため、衝突しない list-1 系のみ使用。
   ========================================================================= */

.list-1 {
  align-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}

.list-1 > * {
  --gap-h: 0px;
  --gap-v: 20px;
}

.list-1__item {
  background: transparent;
  border-bottom: 1px solid var(--s-color-0a96acee);
  flex-direction: row;
  gap: 40px;
  justify-content: flex-start;
  padding: 20px 0px;
  width: 100%;
  max-width: 100%;
  transition: opacity 0.2s ease;
}

.list-1__item:hover {
  opacity: 0.6;
}

.list-1__item > * {
  --gap-h: 40px;
  --gap-v: 0px;
}

.list-1__item__sd-1 {
  align-content: flex-start;
  align-items: flex-start;
  flex: 1;
  gap: 10px;
}

.list-1__item__sd-1 > * {
  --gap-h: 0px;
  --gap-v: 10px;
}

.list-1__item__sd-2 {
  color: var(--s-color-e0a83ad7);
  font-family: var(--s-font-cca8ed71);
  font-size: 16px;
  font-weight: 400;
}

.list-1__item__sd-3 {
  color: var(--s-color-e0a83ad7);
  font-family: var(--s-font-cca8ed71);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  justify-content: flex-start;
}

@media (max-width: 990px) {
  .list-1__item {
    flex-direction: column;
    gap: 40px;
  }
  .list-1__item > * {
    --gap-h: 0px;
    --gap-v: 40px;
  }
  .list-1__item__sd-2 {
    font-size: 12px;
  }
  .list-1__item__sd-3 {
    font-size: 20px;
  }
}

@media (max-width: 690px) {
  .list-1__item {
    width: 100%;
    max-width: 100%;
  }
  .list-1__item__sd-1 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .list-1__item__sd-1 > * {
    --gap-h: 0px;
    --gap-v: 10px;
  }
}

/* ボタン内アロー: 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-news__heading,
.usa-news__article-title {
  font-size: 36px;
}

/* h1: 一覧見出し / 記事タイトル */

.usa-news__body {
  font-size: 18px;
}

/* body: 記事本文 */

.usa-news__article-date {
  font-size: 14px;
}

/* caption: 記事日付（小日付） */

.list-1__item__sd-3 {
  font-size: 24px;
}

/* h3: お知らせカード タイトル */

.list-1__item__sd-2 {
  font-size: 16px;
}

/* sub: お知らせカード 日付 */

@media (max-width: 690px) {
  .usa-news__heading,
  .usa-news__article-title {
    font-size: 28px;
  }
  .usa-news__body {
    font-size: 16px;
  }
  .list-1__item__sd-3 {
    font-size: 20px;
  }
  .list-1__item__sd-2 {
    font-size: 16px;
  }
}