/* この箇所の解説：
 * CSSのコメントです。
 * 実行用の見た目ではなく、説明・ライセンス等を記録しています。
 * 空行です。
 * 見た目の指定はありません。
 */
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */

/* この箇所の解説：
 * @layer 「properties」の指示です。
 * CSSの適用優先順位の層を定義します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@layer properties {
  /* この箇所の解説：
   * @supports 「(((-webkit-hyphens:none)) and (not (margin-trim:inline)))
   * or ((-moz-orient:inline) and (not (color:rgb(from red r g b))))」の
   * 指示です。
   * CSS機能への対応に応じて指定を切り替えます。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    /* この箇所の解説：
     * セレクター「*,:before,:after,::backdrop」に一致する要素へ、内側の
     * 見た目を適用します。
     * 直前のCSSルール・条件の範囲を閉じます。
     */
    *,:before,:after,::backdrop {
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「solid」に指定します。
       * CSSのカスタム変数「--tw-border-style」に値を設定します。
       */
      --tw-border-style: solid;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0 0 #0000」に指定します。
       * CSSのカスタム変数「--tw-shadow」に値を設定します。
       */
      --tw-shadow: 0 0 #0000;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-shadow-color」に値を設定します。
       */
      --tw-shadow-color: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「100%」に指定します。
       * %の基準はそのプロパティと親の寸法などに依存します。
       * CSSのカスタム変数「--tw-shadow-alpha」に値を設定します。
       */
      --tw-shadow-alpha: 100%;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0 0 #0000」に指定します。
       * CSSのカスタム変数「--tw-inset-shadow」に値を設定します。
       */
      --tw-inset-shadow: 0 0 #0000;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-inset-shadow-color」に値を設定します。
       */
      --tw-inset-shadow-color: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「100%」に指定します。
       * %の基準はそのプロパティと親の寸法などに依存します。
       * CSSのカスタム変数「--tw-inset-shadow-alpha」に値を設定します。
       */
      --tw-inset-shadow-alpha: 100%;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-ring-color」に値を設定します。
       */
      --tw-ring-color: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0 0 #0000」に指定します。
       * CSSのカスタム変数「--tw-ring-shadow」に値を設定します。
       */
      --tw-ring-shadow: 0 0 #0000;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-inset-ring-color」に値を設定します。
       */
      --tw-inset-ring-color: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0 0 #0000」に指定します。
       * CSSのカスタム変数「--tw-inset-ring-shadow」に値を設定します。
       */
      --tw-inset-ring-shadow: 0 0 #0000;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-ring-inset」に値を設定します。
       */
      --tw-ring-inset: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0px」に指定します。
       * pxはCSS上のピクセル単位です。
       * CSSのカスタム変数「--tw-ring-offset-width」に値を設定します。
       */
      --tw-ring-offset-width: 0px;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「#fff」に指定します。
       * CSSのカスタム変数「--tw-ring-offset-color」に値を設定します。
       */
      --tw-ring-offset-color: #fff;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0 0 #0000」に指定します。
       * CSSのカスタム変数「--tw-ring-offset-shadow」に値を設定します。
       */
      --tw-ring-offset-shadow: 0 0 #0000;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-blur」に値を設定します。
       */
      --tw-blur: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-brightness」に値を設定します。
       */
      --tw-brightness: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-contrast」に値を設定します。
       */
      --tw-contrast: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-grayscale」に値を設定します。
       */
      --tw-grayscale: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-hue-rotate」に値を設定します。
       */
      --tw-hue-rotate: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-invert」に値を設定します。
       */
      --tw-invert: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-opacity」に値を設定します。
       */
      --tw-opacity: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-saturate」に値を設定します。
       */
      --tw-saturate: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-sepia」に値を設定します。
       */
      --tw-sepia: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-drop-shadow」に値を設定します。
       */
      --tw-drop-shadow: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-drop-shadow-color」に値を設定します。
       */
      --tw-drop-shadow-color: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「100%」に指定します。
       * %の基準はそのプロパティと親の寸法などに依存します。
       * CSSのカスタム変数「--tw-drop-shadow-alpha」に値を設定します。
       */
      --tw-drop-shadow-alpha: 100%;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-drop-shadow-size」に値を設定します。
       */
      --tw-drop-shadow-size: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0s」に指定します。
       * CSSのカスタム変数「--tw-animation-delay」に値を設定します。
       */
      --tw-animation-delay: 0s;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「normal」に指定します。
       * CSSのカスタム変数「--tw-animation-direction」に値を設定します。
       */
      --tw-animation-direction: normal;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「initial」に指定します。
       * CSSのカスタム変数「--tw-animation-duration」に値を設定します。
       */
      --tw-animation-duration: initial;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「none」に指定します。
       * CSSのカスタム変数「--tw-animation-fill-mode」に値を設定します。
       */
      --tw-animation-fill-mode: none;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「1」に指定します。
       * CSSのカスタム変数「--tw-animation-iteration-count」に値を設定します。
       */
      --tw-animation-iteration-count: 1;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-enter-blur」に値を設定します。
       */
      --tw-enter-blur: 0;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「1」に指定します。
       * CSSのカスタム変数「--tw-enter-opacity」に値を設定します。
       */
      --tw-enter-opacity: 1;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-enter-rotate」に値を設定します。
       */
      --tw-enter-rotate: 0;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「1」に指定します。
       * CSSのカスタム変数「--tw-enter-scale」に値を設定します。
       */
      --tw-enter-scale: 1;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-enter-translate-x」に値を設定します。
       */
      --tw-enter-translate-x: 0;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-enter-translate-y」に値を設定します。
       */
      --tw-enter-translate-y: 0;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-exit-blur」に値を設定します。
       */
      --tw-exit-blur: 0;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「1」に指定します。
       * CSSのカスタム変数「--tw-exit-opacity」に値を設定します。
       */
      --tw-exit-opacity: 1;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-exit-rotate」に値を設定します。
       */
      --tw-exit-rotate: 0;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「1」に指定します。
       * CSSのカスタム変数「--tw-exit-scale」に値を設定します。
       */
      --tw-exit-scale: 1;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-exit-translate-x」に値を設定します。
       */
      --tw-exit-translate-x: 0;
      /* この箇所の解説：
       * 後からvar(...)で使えるCSS変数を「0」に指定します。
       * CSSのカスタム変数「--tw-exit-translate-y」に値を設定します。
       * 空行です。
       * 見た目の指定はありません。
       */
      --tw-exit-translate-y: 0;
    }
  }
}

/* この箇所の解説：
 * @layer 「theme」の指示です。
 * CSSの適用優先順位の層を定義します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@layer theme {
  /* この箇所の解説：
   * セレクター「:root,:host」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  :root,:host {
    /* この箇所の解説：
     * 後からvar(...)で使えるCSS変数を「"Geist"」に指定します。
     * CSSのカスタム変数「--font-sans」に値を設定します。
     */
    --font-sans: "Geist";
    /* この箇所の解説：
     * 後からvar(...)で使えるCSS変数を「.25rem」に指定します。
     * remはルートの文字サイズを基準にする単位です。
     * CSSのカスタム変数「--spacing」に値を設定します。
     */
    --spacing: .25rem;
    /* この箇所の解説：
     * 後からvar(...)で使えるCSS変数を「"Geist"」に指定します。
     * CSSのカスタム変数「--default-font-family」に値を設定します。
     */
    --default-font-family: "Geist";
    /* この箇所の解説：
     * 後からvar(...)で使えるCSS変数を「"Geist Mono"」に指定します。
     * CSSのカスタム変数「--default-mono-font-family」に値を設定します。
     * 空行です。
     * 見た目の指定はありません。
     */
    --default-mono-font-family: "Geist Mono";
  }
}

/* この箇所の解説：
 * @layer 「base」の指示です。
 * CSSの適用優先順位の層を定義します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@layer base {
  /* この箇所の解説：
   * セレクター「*,:after,:before,::backdrop」に一致する要素へ、内側の見た目
   * を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  *,:after,:before,::backdrop {
    /* この箇所の解説：
     * 幅に枠と余白を含める計算方式を「border-box」に指定します。
     */
    box-sizing: border-box;
    /* この箇所の解説：
     * 境界線を「0 solid」に指定します。
     */
    border: 0 solid;
    /* この箇所の解説：
     * 外側の余白を「0」に指定します。
     */
    margin: 0;
    /* この箇所の解説：
     * 内側の余白を「0」に指定します。
     */
    padding: 0;
  }
  /* この箇所の解説：
   * セレクター「::file-selector-button」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::file-selector-button {
    /* この箇所の解説：
     * 幅に枠と余白を含める計算方式を「border-box」に指定します。
     */
    box-sizing: border-box;
    /* この箇所の解説：
     * 境界線を「0 solid」に指定します。
     */
    border: 0 solid;
    /* この箇所の解説：
     * 外側の余白を「0」に指定します。
     */
    margin: 0;
    /* この箇所の解説：
     * 内側の余白を「0」に指定します。
     */
    padding: 0;
  }
  /* この箇所の解説：
   * セレクター「html,:host」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  html,:host {
    /* この箇所の解説：
     * CSSの-webkit-text-size-adjust設定を「100%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    -webkit-text-size-adjust: 100%;
    /* この箇所の解説：
     * CSSのtab-size設定を「4」に指定します。
     */
    tab-size: 4;
    /* この箇所の解説：
     * 行の高さを「1.5」に指定します。
     */
    line-height: 1.5;
    /* この箇所の解説：
     * 使用する字体を「var(--default-font-family,ui-sans-serif, system-ui,
     * sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     *  "Noto Co…」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    /* この箇所の解説：
     * CSSのfont-feature-settings設定を「var(--default-font-feature-settings
     * ,normal)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    font-feature-settings: var(--default-font-feature-settings,normal);
    /* この箇所の解説：
     * CSSのfont-variation-settings設定を「var(
     * --default-font-variation-settings,normal)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    font-variation-settings: var(--default-font-variation-settings,normal);
    /* この箇所の解説：
     * CSSの-webkit-tap-highlight-color設定を「transparent」に指定します。
     */
    -webkit-tap-highlight-color: transparent;
  }
  /* この箇所の解説：
   * セレクター「hr」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  hr {
    /* この箇所の解説：
     * 高さを「0」に指定します。
     */
    height: 0;
    /* この箇所の解説：
     * 文字の色を「inherit」に指定します。
     */
    color: inherit;
    /* この箇所の解説：
     * 指定箇所の境界線を「1px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    border-top-width: 1px;
  }
  /* この箇所の解説：
   * セレクター「abbr:where([title])」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  abbr:where([title]) {
    /* この箇所の解説：
     * CSSの-webkit-text-decoration設定を「underline dotted」に指定します。
     */
    -webkit-text-decoration: underline dotted;
    /* この箇所の解説：
     * CSSのtext-decoration設定を「underline dotted」に指定します。
     */
    text-decoration: underline dotted;
  }
  /* この箇所の解説：
   * セレクター「h1,h2,h3,h4,h5,h6」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  h1,h2,h3,h4,h5,h6 {
    /* この箇所の解説：
     * 文字の大きさを「inherit」に指定します。
     */
    font-size: inherit;
    /* この箇所の解説：
     * 文字の太さを「inherit」に指定します。
     */
    font-weight: inherit;
  }
  /* この箇所の解説：
   * セレクター「a」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  a {
    /* この箇所の解説：
     * 文字の色を「inherit」に指定します。
     */
    color: inherit;
    /* この箇所の解説：
     * CSSの-webkit-text-decoration設定を「inherit」に指定します。
     */
    -webkit-text-decoration: inherit;
    /* この箇所の解説：
     * CSSの-webkit-text-decoration設定を「inherit」に指定します。
     */
    -webkit-text-decoration: inherit;
    /* この箇所の解説：
     * CSSの-webkit-text-decoration設定を「inherit」に指定します。
     */
    -webkit-text-decoration: inherit;
    /* この箇所の解説：
     * CSSのtext-decoration設定を「inherit」に指定します。
     */
    text-decoration: inherit;
  }
  /* この箇所の解説：
   * セレクター「b,strong」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  b,strong {
    /* この箇所の解説：
     * 文字の太さを「bolder」に指定します。
     */
    font-weight: bolder;
  }
  /* この箇所の解説：
   * セレクター「code,kbd,samp,pre」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  code,kbd,samp,pre {
    /* この箇所の解説：
     * 使用する字体を「var(--default-mono-font-family,ui-monospace,
     * SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     * "Courier New", monospace)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    /* この箇所の解説：
     * CSSのfont-feature-settings設定を「var(
     * --default-mono-font-feature-settings,normal)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    font-feature-settings: var(--default-mono-font-feature-settings,normal);
    /* この箇所の解説：
     * CSSのfont-variation-settings設定を「var(
     * --default-mono-font-variation-settings,normal)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    font-variation-settings: var(--default-mono-font-variation-settings,normal);
    /* この箇所の解説：
     * 文字の大きさを「1em」に指定します。
     */
    font-size: 1em;
  }
  /* この箇所の解説：
   * セレクター「small」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  small {
    /* この箇所の解説：
     * 文字の大きさを「80%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    font-size: 80%;
  }
  /* この箇所の解説：
   * セレクター「sub,sup」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  sub,sup {
    /* この箇所の解説：
     * CSSのvertical-align設定を「baseline」に指定します。
     */
    vertical-align: baseline;
    /* この箇所の解説：
     * 文字の大きさを「75%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    font-size: 75%;
    /* この箇所の解説：
     * 行の高さを「0」に指定します。
     */
    line-height: 0;
    /* この箇所の解説：
     * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
     */
    position: relative;
  }
  /* この箇所の解説：
   * セレクター「sub」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  sub {
    /* この箇所の解説：
     * 配置基準からの距離を「-.25em」に指定します。
     */
    bottom: -.25em;
  }
  /* この箇所の解説：
   * セレクター「sup」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  sup {
    /* この箇所の解説：
     * 配置基準からの距離を「-.5em」に指定します。
     */
    top: -.5em;
  }
  /* この箇所の解説：
   * セレクター「table」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  table {
    /* この箇所の解説：
     * CSSのtext-indent設定を「0」に指定します。
     */
    text-indent: 0;
    /* この箇所の解説：
     * 指定箇所の境界線を「inherit」に指定します。
     */
    border-color: inherit;
    /* この箇所の解説：
     * 指定箇所の境界線を「collapse」に指定します。
     */
    border-collapse: collapse;
  }
  /* この箇所の解説：
   * セレクター「:-moz-focusring」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  :-moz-focusring {
    /* この箇所の解説：
     * CSSのoutline設定を「auto」に指定します。
     */
    outline: auto;
  }
  /* この箇所の解説：
   * セレクター「progress」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  progress {
    /* この箇所の解説：
     * CSSのvertical-align設定を「baseline」に指定します。
     */
    vertical-align: baseline;
  }
  /* この箇所の解説：
   * セレクター「summary」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  summary {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「list-item」に指定します。
     */
    display: list-item;
  }
  /* この箇所の解説：
   * セレクター「ol,ul,menu」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ol,ul,menu {
    /* この箇所の解説：
     * CSSのlist-style設定を「none」に指定します。
     */
    list-style: none;
  }
  /* この箇所の解説：
   * セレクター「img,svg,video,canvas,audio,iframe,embed,object」に一致する
   * 要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  img,svg,video,canvas,audio,iframe,embed,object {
    /* この箇所の解説：
     * CSSのvertical-align設定を「middle」に指定します。
     */
    vertical-align: middle;
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「block」に指定します。
     */
    display: block;
  }
  /* この箇所の解説：
   * セレクター「img,video」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  img,video {
    /* この箇所の解説：
     * 横幅の上限を「100%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    max-width: 100%;
    /* この箇所の解説：
     * 高さを「auto」に指定します。
     */
    height: auto;
  }
  /* この箇所の解説：
   * セレクター「button,input,select,optgroup,textarea」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  button,input,select,optgroup,textarea {
    /* この箇所の解説：
     * CSSのfont設定を「inherit」に指定します。
     */
    font: inherit;
    /* この箇所の解説：
     * CSSのfont-feature-settings設定を「inherit」に指定します。
     */
    font-feature-settings: inherit;
    /* この箇所の解説：
     * CSSのfont-variation-settings設定を「inherit」に指定します。
     */
    font-variation-settings: inherit;
    /* この箇所の解説：
     * 文字間隔を「inherit」に指定します。
     */
    letter-spacing: inherit;
    /* この箇所の解説：
     * 文字の色を「inherit」に指定します。
     */
    color: inherit;
    /* この箇所の解説：
     * 要素全体の不透明度を「1」に指定します。
     */
    opacity: 1;
    /* この箇所の解説：
     * 背景色を「#0000」に指定します。
     */
    background-color: #0000;
    /* この箇所の解説：
     * 角の丸みを「0」に指定します。
     */
    border-radius: 0;
  }
  /* この箇所の解説：
   * セレクター「::file-selector-button」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::file-selector-button {
    /* この箇所の解説：
     * CSSのfont設定を「inherit」に指定します。
     */
    font: inherit;
    /* この箇所の解説：
     * CSSのfont-feature-settings設定を「inherit」に指定します。
     */
    font-feature-settings: inherit;
    /* この箇所の解説：
     * CSSのfont-variation-settings設定を「inherit」に指定します。
     */
    font-variation-settings: inherit;
    /* この箇所の解説：
     * 文字間隔を「inherit」に指定します。
     */
    letter-spacing: inherit;
    /* この箇所の解説：
     * 文字の色を「inherit」に指定します。
     */
    color: inherit;
    /* この箇所の解説：
     * 要素全体の不透明度を「1」に指定します。
     */
    opacity: 1;
    /* この箇所の解説：
     * 背景色を「#0000」に指定します。
     */
    background-color: #0000;
    /* この箇所の解説：
     * 角の丸みを「0」に指定します。
     */
    border-radius: 0;
  }
  /* この箇所の解説：
   * セレクター「:where(select:is([multiple],[size])) optgroup」に一致する
   * 要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  :where(select:is([multiple],[size])) optgroup {
    /* この箇所の解説：
     * 文字の太さを「bolder」に指定します。
     */
    font-weight: bolder;
  }
  /* この箇所の解説：
   * セレクター「:where(select:is([multiple],[size])) optgroup option」に
   * 一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  :where(select:is([multiple],[size])) optgroup option {
    /* この箇所の解説：
     * 指定方向の内余白を「20px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding-inline-start: 20px;
  }
  /* この箇所の解説：
   * セレクター「::file-selector-button」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::file-selector-button {
    /* この箇所の解説：
     * 指定方向の外余白を「4px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    margin-inline-end: 4px;
  }
  /* この箇所の解説：
   * セレクター「::placeholder」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::placeholder {
    /* この箇所の解説：
     * 要素全体の不透明度を「1」に指定します。
     */
    opacity: 1;
  }
  /* この箇所の解説：
   * @supports 「(not ((-webkit-appearance:-apple-pay-button))) or (
   * contain-intrinsic-size:1px)」の指示です。
   * CSS機能への対応に応じて指定を切り替えます。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    /* この箇所の解説：
     * セレクター「::placeholder」に一致する要素へ、内側の見た目を適用します。
     * 直前のCSSルール・条件の範囲を閉じます。
     */
    ::placeholder {
      /* この箇所の解説：
       * 文字の色を「currentColor」に指定します。
       */
      color: currentColor;
    }
    /* この箇所の解説：
     * @supports 「(color:color-mix(in lab, red, red))」の指示です。
     * CSS機能への対応に応じて指定を切り替えます。
     * 直前のCSSルール・条件の範囲を閉じます。
     */
    @supports (color:color-mix(in lab, red, red)) {
      /* この箇所の解説：
       * セレクター「::placeholder」に一致する要素へ、内側の見た目を
       * 適用します。
       * 直前のCSSルール・条件の範囲を閉じます。
       */
      ::placeholder {
        /* この箇所の解説：
         * 文字の色を「color-mix(in oklab, currentcolor 50%, transparent)」
         * に指定します。
         * %の基準はそのプロパティと親の寸法などに依存します。
         */
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  /* この箇所の解説：
   * セレクター「textarea」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  textarea {
    /* この箇所の解説：
     * CSSのresize設定を「vertical」に指定します。
     */
    resize: vertical;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-search-decoration」に一致する要素へ、内側の見た目
   * を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-search-decoration {
    /* この箇所の解説：
     * CSSの-webkit-appearance設定を「none」に指定します。
     */
    -webkit-appearance: none;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-date-and-time-value」に一致する要素へ、内側の
   * 見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-date-and-time-value {
    /* この箇所の解説：
     * 高さの下限を「1lh」に指定します。
     */
    min-height: 1lh;
    /* この箇所の解説：
     * 文字の横方向の揃え方を「inherit」に指定します。
     */
    text-align: inherit;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「inline-flex」に指定します。
     */
    display: inline-flex;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-fields-wrapper」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-fields-wrapper {
    /* この箇所の解説：
     * 内側の余白を「0」に指定します。
     */
    padding: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-year-field」に一致する要素へ、内側
   * の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-year-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-month-field」に一致する要素へ、内側
   * の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-month-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-day-field」に一致する要素へ、内側の
   * 見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-day-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-hour-field」に一致する要素へ、内側
   * の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-hour-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-minute-field」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-minute-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-second-field」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-second-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-millisecond-field」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-millisecond-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-datetime-edit-meridiem-field」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-datetime-edit-meridiem-field {
    /* この箇所の解説：
     * 指定方向の内余白を「0」に指定します。
     */
    padding-block: 0;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-calendar-picker-indicator」に一致する要素へ、内側
   * の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-calendar-picker-indicator {
    /* この箇所の解説：
     * 行の高さを「1」に指定します。
     */
    line-height: 1;
  }
  /* この箇所の解説：
   * セレクター「:-moz-ui-invalid」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  :-moz-ui-invalid {
    /* この箇所の解説：
     * 要素の影を「none」に指定します。
     */
    box-shadow: none;
  }
  /* この箇所の解説：
   * セレクター「button,input:where([type=button],[type=reset],[type=submit]
   * )」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  button,input:where([type=button],[type=reset],[type=submit]) {
    /* この箇所の解説：
     * CSSのappearance設定を「button」に指定します。
     */
    appearance: button;
  }
  /* この箇所の解説：
   * セレクター「::file-selector-button」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::file-selector-button {
    /* この箇所の解説：
     * CSSのappearance設定を「button」に指定します。
     */
    appearance: button;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-inner-spin-button」に一致する要素へ、内側の見た目
   * を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-inner-spin-button {
    /* この箇所の解説：
     * 高さを「auto」に指定します。
     */
    height: auto;
  }
  /* この箇所の解説：
   * セレクター「::-webkit-outer-spin-button」に一致する要素へ、内側の見た目
   * を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  ::-webkit-outer-spin-button {
    /* この箇所の解説：
     * 高さを「auto」に指定します。
     */
    height: auto;
  }
  /* この箇所の解説：
   * セレクター「[hidden]:where(:not([hidden=until-found]))」に一致する要素
   * へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  [hidden]:where(:not([hidden=until-found])) {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「none」に指定します。
     * !important付きです。
     */
    display: none !important;
  }
  /* この箇所の解説：
   * セレクター「*」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  * {
    /* この箇所の解説：
     * 指定箇所の境界線を「var(--border)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    border-color: var(--border);
    /* この箇所の解説：
     * CSSのoutline-color設定を「var(--ring)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    outline-color: var(--ring);
  }
  /* この箇所の解説：
   * @supports 「(color:color-mix(in lab, red, red))」の指示です。
   * CSS機能への対応に応じて指定を切り替えます。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  @supports (color:color-mix(in lab, red, red)) {
    /* この箇所の解説：
     * セレクター「*」に一致する要素へ、内側の見た目を適用します。
     * 直前のCSSルール・条件の範囲を閉じます。
     */
    * {
      /* この箇所の解説：
       * CSSのoutline-color設定を「color-mix(in oklab, var(--ring) 50%,
       * transparent)」に指定します。
       * %の基準はそのプロパティと親の寸法などに依存します。
       * var(...)は定義済みのCSS変数を参照します。
       */
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  /* この箇所の解説：
   * セレクター「body」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  body {
    /* この箇所の解説：
     * 背景色を「var(--background)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    background-color: var(--background);
    /* この箇所の解説：
     * 文字の色を「var(--foreground)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    color: var(--foreground);
  }
  /* この箇所の解説：
   * セレクター「html」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  html {
    /* この箇所の解説：
     * 使用する字体を「Geist」に指定します。
     * 空行です。
     * 見た目の指定はありません。
     */
    font-family: Geist;
  }
}

/* この箇所の解説：
 * @layer 「components」の指示です。
 * CSSの適用優先順位の層を定義します。
 * 空行です。
 * 見た目の指定はありません。
 */
@layer components;

/* この箇所の解説：
 * @layer 「utilities」の指示です。
 * CSSの適用優先順位の層を定義します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@layer utilities {
  /* この箇所の解説：
   * セレクター「.visible」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .visible {
    /* この箇所の解説：
     * CSSのvisibility設定を「visible」に指定します。
     */
    visibility: visible;
  }
  /* この箇所の解説：
   * セレクター「.sr-only」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .sr-only {
    /* この箇所の解説：
     * CSSのclip-path設定を「inset(50%)」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    clip-path: inset(50%);
    /* この箇所の解説：
     * 空白と改行の扱いを「nowrap」に指定します。
     */
    white-space: nowrap;
    /* この箇所の解説：
     * 指定箇所の境界線を「0」に指定します。
     */
    border-width: 0;
    /* この箇所の解説：
     * 横幅を「1px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    width: 1px;
    /* この箇所の解説：
     * 高さを「1px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    height: 1px;
    /* この箇所の解説：
     * 外側の余白を「-1px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    margin: -1px;
    /* この箇所の解説：
     * 内側の余白を「0」に指定します。
     */
    padding: 0;
    /* この箇所の解説：
     * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
     */
    position: absolute;
    /* この箇所の解説：
     * 内容がはみ出した場合の扱いを「hidden」に指定します。
     */
    overflow: hidden;
  }
  /* この箇所の解説：
   * セレクター「.fixed」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .fixed {
    /* この箇所の解説：
     * 配置の基準（通常/相対/絶対/固定等）を「fixed」に指定します。
     */
    position: fixed;
  }
  /* この箇所の解説：
   * セレクター「.relative」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .relative {
    /* この箇所の解説：
     * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
     */
    position: relative;
  }
  /* この箇所の解説：
   * セレクター「.static」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .static {
    /* この箇所の解説：
     * 配置の基準（通常/相対/絶対/固定等）を「static」に指定します。
     */
    position: static;
  }
  /* この箇所の解説：
   * セレクター「.\!start」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .\!start {
    /* この箇所の解説：
     * 配置基準からの距離を「var(--spacing)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     * !important付きです。
     */
    inset-inline-start: var(--spacing) !important;
  }
  /* この箇所の解説：
   * セレクター「.start」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .start {
    /* この箇所の解説：
     * 配置基準からの距離を「var(--spacing)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    inset-inline-start: var(--spacing);
  }
  /* この箇所の解説：
   * セレクター「.end」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .end {
    /* この箇所の解説：
     * 配置基準からの距離を「var(--spacing)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    inset-inline-end: var(--spacing);
  }
  /* この箇所の解説：
   * セレクター「.grid」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .grid {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「grid」に指定します。
     */
    display: grid;
  }
  /* この箇所の解説：
   * セレクター「.hidden」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .hidden {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「none」に指定します。
     */
    display: none;
  }
  /* この箇所の解説：
   * セレクター「.inline」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .inline {
    /* この箇所の解説：
     * 配置方式（block/flex/grid等）を「inline」に指定します。
     */
    display: inline;
  }
  /* この箇所の解説：
   * セレクター「.flex-shrink」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .flex-shrink {
    /* この箇所の解説：
     * 不足時に縮める比率を「1」に指定します。
     */
    flex-shrink: 1;
  }
  /* この箇所の解説：
   * セレクター「.border」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .border {
    /* この箇所の解説：
     * 指定箇所の境界線を「var(--tw-border-style)」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    border-style: var(--tw-border-style);
    /* この箇所の解説：
     * 指定箇所の境界線を「1px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    border-width: 1px;
  }
  /* この箇所の解説：
   * セレクター「.ring」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ring {
    /* この箇所の解説：
     * 後からvar(...)で使えるCSS変数を「var(--tw-ring-inset,) 0 0 0 calc(1px
     *  + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)」に
     * 指定します。
     * pxはCSS上のピクセル単位です。
     * var(...)は定義済みのCSS変数を参照します。
     * calc(...)で単位付きの値を計算します。
     * CSSのカスタム変数「--tw-ring-shadow」に値を設定します。
     */
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
    /* この箇所の解説：
     * 要素の影を「var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(
     * --tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)」に
     * 指定します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  /* この箇所の解説：
   * セレクター「.blur」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .blur {
    /* この箇所の解説：
     * 後からvar(...)で使えるCSS変数を「blur(8px)」に指定します。
     * pxはCSS上のピクセル単位です。
     * CSSのカスタム変数「--tw-blur」に値を設定します。
     */
    --tw-blur: blur(8px);
    /* この箇所の解説：
     * CSSのfilter設定を「var(--tw-blur,) var(--tw-brightness,) var(
     * --tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(
     * --tw-invert,) var(--tw-sa…」に指定します。
     * var(...)は定義済みのCSS変数を参照します。
     * 空行です。
     * 見た目の指定はありません。
     */
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
}

/* この箇所の解説：
 * @property 「--tw-animation-delay」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-animation-delay {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0s」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0s;
}

/* この箇所の解説：
 * @property 「--tw-animation-direction」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-animation-direction {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「normal」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: normal;
}

/* この箇所の解説：
 * @property 「--tw-animation-duration」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-animation-duration {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-animation-fill-mode」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-animation-fill-mode {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「none」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: none;
}

/* この箇所の解説：
 * @property 「--tw-animation-iteration-count」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-animation-iteration-count {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「1」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 1;
}

/* この箇所の解説：
 * @property 「--tw-enter-blur」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-enter-blur {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-enter-opacity」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-enter-opacity {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「1」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 1;
}

/* この箇所の解説：
 * @property 「--tw-enter-rotate」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-enter-rotate {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-enter-scale」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-enter-scale {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「1」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 1;
}

/* この箇所の解説：
 * @property 「--tw-enter-translate-x」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-enter-translate-x {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-enter-translate-y」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-enter-translate-y {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-exit-blur」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-exit-blur {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-exit-opacity」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-exit-opacity {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「1」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 1;
}

/* この箇所の解説：
 * @property 「--tw-exit-rotate」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-exit-rotate {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-exit-scale」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-exit-scale {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「1」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 1;
}

/* この箇所の解説：
 * @property 「--tw-exit-translate-x」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-exit-translate-x {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-exit-translate-y」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-exit-translate-y {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @font-face 「」の指示です。
 * フォントファイルと字体の対応を定義します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@font-face {
  /* この箇所の解説：
   * 使用する字体を「Geist」に指定します。
   */
  font-family: Geist;
  /* この箇所の解説：
   * CSSのsrc設定を「url(/fonts/geist-latin.woff2)format("woff2")」に
   * 指定します。
   */
  src: url(/fonts/geist-latin.woff2)format("woff2");
  /* この箇所の解説：
   * CSSのfont-style設定を「normal」に指定します。
   */
  font-style: normal;
  /* この箇所の解説：
   * 文字の太さを「100 900」に指定します。
   */
  font-weight: 100 900;
  /* この箇所の解説：
   * CSSのfont-display設定を「swap」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  font-display: swap;
}

/* この箇所の解説：
 * セレクター「body」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
body {
  /* この箇所の解説：
   * 使用する字体を「Geist,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif」
   * に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  font-family: Geist,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif;
}

/* この箇所の解説：
 * セレクター「.artwork-card」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card {
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   */
  color: #fff;
  /* この箇所の解説：
   * 背景全体を「#65736f」に指定します。
   */
  background: #65736f;
  /* この箇所の解説：
   * 境界線を「1px solid #71817b」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #71817b;
  /* この箇所の解説：
   * Flexの並ぶ向きを「column」に指定します。
   */
  flex-direction: column;
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
  /* この箇所の解説：
   * 内側の余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 12px;
  /* この箇所の解説：
   * 状態が変わるときの変化時間を「transform .18s,box-shadow .18s」に
   * 指定します。
   */
  transition: transform .18s,box-shadow .18s;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
   */
  position: relative;
  /* この箇所の解説：
   * 要素の影を「0 3px 10px #173f4a12」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  box-shadow: 0 3px 10px #173f4a12;
  /* この箇所の解説：
   * CSSのcontainer-type設定を「inline-size」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  container-type: inline-size;
}

/* この箇所の解説：
 * セレクター「.artwork-card:hover」に一致する要素へ、内側の見た目を
 * 適用します。
 * マウスを載せた状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card:hover {
  /* この箇所の解説：
   * 移動・拡大縮小・回転等を「translateY(-3px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  transform: translateY(-3px);
  /* この箇所の解説：
   * 要素の影を「0 10px 24px #173f4a26」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  box-shadow: 0 10px 24px #173f4a26;
}

/* この箇所の解説：
 * セレクター「.artwork-card:focus-visible」に一致する要素へ、内側の見た目を
 * 適用します。
 * フォーカス状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card:focus-visible {
  /* この箇所の解説：
   * CSSのoutline-offset設定を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  outline-offset: 4px;
  /* この箇所の解説：
   * CSSのoutline設定を「3px solid #176378」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  outline: 3px solid #176378;
}

/* この箇所の解説：
 * セレクター「.artwork-museum-frame」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-museum-frame {
  /* この箇所の解説：
   * 背景全体を「#faf9f6」に指定します。
   */
  background: #faf9f6;
  /* この箇所の解説：
   * 境界線を「6px solid #b8a084」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 6px solid #b8a084;
  /* この箇所の解説：
   * 指定箇所の境界線を「#b8a084 #8a7357 #725e49 #a28a6d」に指定します。
   */
  border-color: #b8a084 #8a7357 #725e49 #a28a6d;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
  /* この箇所の解説：
   * 内側の余白を「clamp(6px,2cqw,10px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: clamp(6px,2cqw,10px);
  /* この箇所の解説：
   * 要素の影を「0 3px 7px #15241c26,inset 0 0 0 1px #d9d3c9」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  box-shadow: 0 3px 7px #15241c26,inset 0 0 0 1px #d9d3c9;
}

/* この箇所の解説：
 * セレクター「.artwork-museum-frame img」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-museum-frame img {
  /* この箇所の解説：
   * 横幅と高さの比率を「1」に指定します。
   */
  aspect-ratio: 1;
  /* この箇所の解説：
   * 画像を枠へ収める方式を「contain」に指定します。
   */
  object-fit: contain;
  /* この箇所の解説：
   * 背景全体を「#fff」に指定します。
   */
  background: #fff;
  /* この箇所の解説：
   * 境界線を「1px solid #e3e0da」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #e3e0da;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「block」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: block;
}

/* この箇所の解説：
 * セレクター「.artwork-card-info」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-info {
  /* この箇所の解説：
   * Flexの並ぶ向きを「column」に指定します。
   */
  flex-direction: column;
  /* この箇所の解説：
   * CSSのflex設定を「1」に指定します。
   */
  flex: 1;
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
  /* この箇所の解説：
   * 高さの下限を「146px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 146px;
  /* この箇所の解説：
   * 内側の余白を「15px 3px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 15px 3px 12px;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: flex;
}

/* この箇所の解説：
 * セレクター「.artwork-card-title」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-title {
  /* この箇所の解説：
   * 長い文字列を途中で折り返す扱いを「anywhere」に指定します。
   */
  overflow-wrap: anywhere;
  /* この箇所の解説：
   * 外側の余白を「0」に指定します。
   */
  margin: 0;
  /* この箇所の解説：
   * 文字の大きさを「clamp(1.125rem,6.7cqw,1.375rem)」に指定します。
   * remはルートの文字サイズを基準にする単位です。
   */
  font-size: clamp(1.125rem,6.7cqw,1.375rem);
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
  /* この箇所の解説：
   * 行の高さを「1.45」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  line-height: 1.45;
}

/* この箇所の解説：
 * セレクター「.artwork-card-artist」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-artist {
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   */
  color: #fff;
  /* この箇所の解説：
   * 長い文字列を途中で折り返す扱いを「anywhere」に指定します。
   */
  overflow-wrap: anywhere;
  /* この箇所の解説：
   * 指定方向の外余白を「5px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 5px;
  /* この箇所の解説：
   * 文字の大きさを「1rem」に指定します。
   * remはルートの文字サイズを基準にする単位です。
   */
  font-size: 1rem;
  /* この箇所の解説：
   * 行の高さを「1.6」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  line-height: 1.6;
}

/* この箇所の解説：
 * セレクター「.artwork-card-footer」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-footer {
  /* この箇所の解説：
   * Flexの並ぶ向きを「column」に指定します。
   */
  flex-direction: column;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「flex-start」に指定します。
   */
  align-items: flex-start;
  /* この箇所の解説：
   * 子要素間の間隔を「10px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 10px;
  /* この箇所の解説：
   * 指定方向の外余白を「0」に指定します。
   */
  margin-top: 0;
  /* この箇所の解説：
   * 指定方向の内余白を「18px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding-top: 18px;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: flex;
}

/* この箇所の解説：
 * セレクター「.artwork-card-price」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-price {
  /* この箇所の解説：
   * 長い文字列を途中で折り返す扱いを「anywhere」に指定します。
   */
  overflow-wrap: anywhere;
  /* この箇所の解説：
   * CSSのfont-variant-numeric設定を「tabular-nums」に指定します。
   */
  font-variant-numeric: tabular-nums;
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
  /* この箇所の解説：
   * 横幅の上限を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  max-width: 100%;
  /* この箇所の解説：
   * 文字の大きさを「clamp(1.5rem,8cqw,1.875rem)」に指定します。
   * remはルートの文字サイズを基準にする単位です。
   */
  font-size: clamp(1.5rem,8cqw,1.875rem);
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
  /* この箇所の解説：
   * 行の高さを「1.3」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  line-height: 1.3;
}

/* この箇所の解説：
 * セレクター「.artwork-card-time」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-time {
  /* この箇所の解説：
   * 空白と改行の扱いを「normal」に指定します。
   */
  white-space: normal;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「flex-end」に指定します。
   */
  justify-content: flex-end;
  /* この箇所の解説：
   * その要素だけの交差方向の揃え方を「flex-end」に指定します。
   */
  align-self: flex-end;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「5px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 5px;
  /* この箇所の解説：
   * 横幅の上限を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  max-width: 100%;
  /* この箇所の解説：
   * 指定方向の外余白を「auto」に指定します。
   */
  margin-left: auto;
  /* この箇所の解説：
   * 文字の大きさを「.9375rem」に指定します。
   * remはルートの文字サイズを基準にする単位です。
   */
  font-size: .9375rem;
  /* この箇所の解説：
   * 行の高さを「1.6」に指定します。
   */
  line-height: 1.6;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: flex;
}

/* この箇所の解説：
 * セレクター「.artwork-card-time span」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-time span {
  /* この箇所の解説：
   * 長い文字列を途中で折り返す扱いを「anywhere」に指定します。
   */
  overflow-wrap: anywhere;
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  min-width: 0;
}

/* この箇所の解説：
 * セレクター「.artwork-card-time svg」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-time svg {
  /* この箇所の解説：
   * 文字の色を「currentColor」に指定します。
   */
  color: currentColor;
  /* この箇所の解説：
   * CSSのstroke-width設定を「1.8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  stroke-width: 1.8px;
  /* この箇所の解説：
   * 不足時に縮める比率を「0」に指定します。
   */
  flex-shrink: 0;
  /* この箇所の解説：
   * 横幅を「17px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 17px;
  /* この箇所の解説：
   * 高さを「17px」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  height: 17px;
}

/* この箇所の解説：
 * セレクター「.artwork-card-sold」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.artwork-card-sold {
  /* この箇所の解説：
   * 重なり順を「1」に指定します。
   */
  z-index: 1;
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   */
  color: #fff;
  /* この箇所の解説：
   * 背景全体を「#e53949」に指定します。
   */
  background: #e53949;
  /* この箇所の解説：
   * 内側の余白を「5px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 5px 12px;
  /* この箇所の解説：
   * 文字の大きさを「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 12px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
   */
  position: absolute;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   */
  top: 0;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  left: 0;
}

/* この箇所の解説：
 * @media 「(max-width:639px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (max-width:639px) {
  /* この箇所の解説：
   * セレクター「.artwork-card」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card {
    /* この箇所の解説：
     * 内側の余白を「4px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 4px;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card .artwork-museum-frame」に一致する要素へ、内側
   * の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card .artwork-museum-frame {
    /* この箇所の解説：
     * 指定箇所の境界線を「3px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    border-width: 3px;
    /* この箇所の解説：
     * 内側の余白を「3px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 3px;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-info」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-info {
    /* この箇所の解説：
     * 高さの下限を「112px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    min-height: 112px;
    /* この箇所の解説：
     * 内側の余白を「8px 2px 5px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 8px 2px 5px;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-title」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-title {
    /* この箇所の解説：
     * 文字の大きさを「14px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 14px;
    /* この箇所の解説：
     * 行の高さを「1.4」に指定します。
     */
    line-height: 1.4;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-artist」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-artist {
    /* この箇所の解説：
     * 指定方向の外余白を「4px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    margin-top: 4px;
    /* この箇所の解説：
     * 文字の大きさを「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 12px;
    /* この箇所の解説：
     * 行の高さを「1.5」に指定します。
     */
    line-height: 1.5;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-footer」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-footer {
    /* この箇所の解説：
     * 子要素間の間隔を「5px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 5px;
    /* この箇所の解説：
     * 指定方向の内余白を「10px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding-top: 10px;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-price」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-price {
    /* この箇所の解説：
     * 文字の大きさを「16px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 16px;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-time」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-time {
    /* この箇所の解説：
     * 子要素間の間隔を「3px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 3px;
    /* この箇所の解説：
     * 文字の大きさを「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 12px;
    /* この箇所の解説：
     * 行の高さを「1.4」に指定します。
     */
    line-height: 1.4;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-time svg」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-time svg {
    /* この箇所の解説：
     * 横幅を「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    width: 12px;
    /* この箇所の解説：
     * 高さを「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    height: 12px;
  }
  /* この箇所の解説：
   * セレクター「.artwork-card-sold」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card-sold {
    /* この箇所の解説：
     * 内側の余白を「3px 5px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 3px 5px;
    /* この箇所の解説：
     * 文字の大きさを「10px」に指定します。
     * pxはCSS上のピクセル単位です。
     * 空行です。
     * 見た目の指定はありません。
     */
    font-size: 10px;
  }
}

/* この箇所の解説：
 * @media 「(prefers-reduced-motion:reduce)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (prefers-reduced-motion:reduce) {
  /* この箇所の解説：
   * セレクター「.artwork-card」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .artwork-card {
    /* この箇所の解説：
     * 状態が変わるときの変化時間を「none」に指定します。
     * 空行です。
     * 見た目の指定はありません。
     */
    transition: none;
  }
}

/* この箇所の解説：
 * セレクター「:root」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
:root {
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(97.5% .006 165)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--background」に値を設定します。
   */
  --background: oklch(97.5% .006 165);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(30% .035 205)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--foreground」に値を設定します。
   */
  --foreground: oklch(30% .035 205);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(100% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--card」に値を設定します。
   */
  --card: oklch(100% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(14.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--card-foreground」に値を設定します。
   */
  --card-foreground: oklch(14.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(100% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--popover」に値を設定します。
   */
  --popover: oklch(100% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(14.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--popover-foreground」に値を設定します。
   */
  --popover-foreground: oklch(14.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(68% .145 178)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--primary」に値を設定します。
   */
  --primary: oklch(68% .145 178);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(100% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--primary-foreground」に値を設定します。
   */
  --primary-foreground: oklch(100% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(97% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--secondary」に値を設定します。
   */
  --secondary: oklch(97% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--secondary-foreground」に値を設定します。
   */
  --secondary-foreground: oklch(20.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(97% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--muted」に値を設定します。
   */
  --muted: oklch(97% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(55.6% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--muted-foreground」に値を設定します。
   */
  --muted-foreground: oklch(55.6% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(73% .18 60)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--accent」に値を設定します。
   */
  --accent: oklch(73% .18 60);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(100% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--accent-foreground」に値を設定します。
   */
  --accent-foreground: oklch(100% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(57.7% .245 27.325)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--destructive」に値を設定します。
   */
  --destructive: oklch(57.7% .245 27.325);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(92.2% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--border」に値を設定します。
   */
  --border: oklch(92.2% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(92.2% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--input」に値を設定します。
   */
  --input: oklch(92.2% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(70% .145 178)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--ring」に値を設定します。
   */
  --ring: oklch(70% .145 178);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(87% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-1」に値を設定します。
   */
  --chart-1: oklch(87% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(55.6% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-2」に値を設定します。
   */
  --chart-2: oklch(55.6% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(43.9% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-3」に値を設定します。
   */
  --chart-3: oklch(43.9% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(37.1% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-4」に値を設定します。
   */
  --chart-4: oklch(37.1% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(26.9% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-5」に値を設定します。
   */
  --chart-5: oklch(26.9% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「.9rem」に指定します。
   * remはルートの文字サイズを基準にする単位です。
   * CSSのカスタム変数「--radius」に値を設定します。
   */
  --radius: .9rem;
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar」に値を設定します。
   */
  --sidebar: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(14.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-foreground」に値を設定します。
   */
  --sidebar-foreground: oklch(14.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-primary」に値を設定します。
   */
  --sidebar-primary: oklch(20.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-primary-foreground」に値を設定します。
   */
  --sidebar-primary-foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(97% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-accent」に値を設定します。
   */
  --sidebar-accent: oklch(97% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-accent-foreground」に値を設定します。
   */
  --sidebar-accent-foreground: oklch(20.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(92.2% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-border」に値を設定します。
   */
  --sidebar-border: oklch(92.2% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(70.8% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-ring」に値を設定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  --sidebar-ring: oklch(70.8% 0 0);
}

/* この箇所の解説：
 * セレクター「.dark」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.dark {
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(22% .035 205)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--background」に値を設定します。
   */
  --background: oklch(22% .035 205);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--foreground」に値を設定します。
   */
  --foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--card」に値を設定します。
   */
  --card: oklch(20.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--card-foreground」に値を設定します。
   */
  --card-foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--popover」に値を設定します。
   */
  --popover: oklch(20.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--popover-foreground」に値を設定します。
   */
  --popover-foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(75% .13 178)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--primary」に値を設定します。
   */
  --primary: oklch(75% .13 178);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20% .03 205)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--primary-foreground」に値を設定します。
   */
  --primary-foreground: oklch(20% .03 205);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(26.9% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--secondary」に値を設定します。
   */
  --secondary: oklch(26.9% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--secondary-foreground」に値を設定します。
   */
  --secondary-foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(26.9% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--muted」に値を設定します。
   */
  --muted: oklch(26.9% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(70.8% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--muted-foreground」に値を設定します。
   */
  --muted-foreground: oklch(70.8% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(75% .17 60)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--accent」に値を設定します。
   */
  --accent: oklch(75% .17 60);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20% .03 205)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--accent-foreground」に値を設定します。
   */
  --accent-foreground: oklch(20% .03 205);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(70.4% .191 22.216)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--destructive」に値を設定します。
   */
  --destructive: oklch(70.4% .191 22.216);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(100% 0 0/.1)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--border」に値を設定します。
   */
  --border: oklch(100% 0 0/.1);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(100% 0 0/.15)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--input」に値を設定します。
   */
  --input: oklch(100% 0 0/.15);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(55.6% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--ring」に値を設定します。
   */
  --ring: oklch(55.6% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(87% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-1」に値を設定します。
   */
  --chart-1: oklch(87% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(55.6% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-2」に値を設定します。
   */
  --chart-2: oklch(55.6% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(43.9% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-3」に値を設定します。
   */
  --chart-3: oklch(43.9% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(37.1% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-4」に値を設定します。
   */
  --chart-4: oklch(37.1% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(26.9% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--chart-5」に値を設定します。
   */
  --chart-5: oklch(26.9% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(20.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar」に値を設定します。
   */
  --sidebar: oklch(20.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-foreground」に値を設定します。
   */
  --sidebar-foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(48.8% .243 264.376)」に
   * 指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-primary」に値を設定します。
   */
  --sidebar-primary: oklch(48.8% .243 264.376);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-primary-foreground」に値を設定します。
   */
  --sidebar-primary-foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(26.9% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-accent」に値を設定します。
   */
  --sidebar-accent: oklch(26.9% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(98.5% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-accent-foreground」に値を設定します。
   */
  --sidebar-accent-foreground: oklch(98.5% 0 0);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(100% 0 0/.1)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-border」に値を設定します。
   */
  --sidebar-border: oklch(100% 0 0/.1);
  /* この箇所の解説：
   * 後からvar(...)で使えるCSS変数を「oklch(55.6% 0 0)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * CSSのカスタム変数「--sidebar-ring」に値を設定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  --sidebar-ring: oklch(55.6% 0 0);
}

/* この箇所の解説：
 * セレクター「.ad-section button:focus-visible,
 * .drawing-entry-floating:focus-visible,.ad-fullscreen button:focus-visible」
 * に一致する要素へ、内側の見た目を適用します。
 * フォーカス状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-section button:focus-visible,.drawing-entry-floating:focus-visible,.ad-fullscreen button:focus-visible {
  /* この箇所の解説：
   * CSSのoutline-offset設定を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  outline-offset: 4px;
  /* この箇所の解説：
   * CSSのoutline設定を「3px solid #e95355」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  outline: 3px solid #e95355;
}

/* この箇所の解説：
 * セレクター「.drawing-entry-floating」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.drawing-entry-floating {
  /* この箇所の解説：
   * 重なり順を「45」に指定します。
   */
  z-index: 45;
  /* この箇所の解説：
   * 配置基準からの距離を「max(28px, env(safe-area-inset-right))」に
   * 指定します。
   * pxはCSS上のピクセル単位です。
   */
  right: max(28px, env(safe-area-inset-right));
  /* この箇所の解説：
   * 配置基準からの距離を「max(28px, env(safe-area-inset-bottom))」に
   * 指定します。
   * pxはCSS上のピクセル単位です。
   */
  bottom: max(28px, env(safe-area-inset-bottom));
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   */
  color: #fff;
  /* この箇所の解説：
   * 文字の横方向の揃え方を「center」に指定します。
   */
  text-align: center;
  /* この箇所の解説：
   * 背景全体を「#e95355」に指定します。
   */
  background: #e95355;
  /* この箇所の解説：
   * 境界線を「4px solid #fff」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 4px solid #fff;
  /* この箇所の解説：
   * 角の丸みを「50%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  border-radius: 50%;
  /* この箇所の解説：
   * Flexの並ぶ向きを「column」に指定します。
   */
  flex-direction: column;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 6px;
  /* この箇所の解説：
   * 横幅を「116px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 116px;
  /* この箇所の解説：
   * 高さを「116px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 116px;
  /* この箇所の解説：
   * 文字の大きさを「13px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 13px;
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
  /* この箇所の解説：
   * 行の高さを「1.35」に指定します。
   */
  line-height: 1.35;
  /* この箇所の解説：
   * 状態が変わるときの変化時間を「transform .2s,background .2s」に
   * 指定します。
   */
  transition: transform .2s,background .2s;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「fixed」に指定します。
   */
  position: fixed;
  /* この箇所の解説：
   * 要素の影を「0 8px #bf3b40,0 16px 36px #672a3b40」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  box-shadow: 0 8px #bf3b40,0 16px 36px #672a3b40;
}

/* この箇所の解説：
 * セレクター「.drawing-entry-floating:hover」に一致する要素へ、内側の見た目
 * を適用します。
 * マウスを載せた状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.drawing-entry-floating:hover {
  /* この箇所の解説：
   * 背景全体を「#da4048」に指定します。
   */
  background: #da4048;
  /* この箇所の解説：
   * 移動・拡大縮小・回転等を「translateY(-4px)」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  transform: translateY(-4px);
}

/* この箇所の解説：
 * セレクター「.ad-carousel」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-carousel {
  /* この箇所の解説：
   * 背景全体を「#fff」に指定します。
   */
  background: #fff;
  /* この箇所の解説：
   * 境界線を「1px solid #c5d9d5」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #c5d9d5;
  /* この箇所の解説：
   * 角の丸みを「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 12px;
  /* この箇所の解説：
   * 要素の影を「0 4px 20px #173f4a06」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  box-shadow: 0 4px 20px #173f4a06;
}

/* この箇所の解説：
 * セレクター「.ad-carousel [data-slot=carousel-content]」に一致する要素へ、
 * 内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-carousel [data-slot=carousel-content] {
  /* この箇所の解説：
   * 角の丸みを「inherit」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  border-radius: inherit;
}

/* この箇所の解説：
 * セレクター「.ad-nav」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-nav {
  /* この箇所の解説：
   * 重なり順を「2」に指定します。
   */
  z-index: 2;
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   */
  color: #fff;
  /* この箇所の解説：
   * CSSの-webkit-backdrop-filter設定を「blur(4px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  -webkit-backdrop-filter: blur(4px);
  /* この箇所の解説：
   * CSSのbackdrop-filter設定を「blur(4px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  backdrop-filter: blur(4px);
  /* この箇所の解説：
   * マウスカーソルの形を「pointer」に指定します。
   */
  cursor: pointer;
  /* この箇所の解説：
   * 背景全体を「#26383d70」に指定します。
   */
  background: #26383d70;
  /* この箇所の解説：
   * 境界線を「1px solid #fffa」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #fffa;
  /* この箇所の解説：
   * 角の丸みを「50%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  border-radius: 50%;
  /* この箇所の解説：
   * 横幅を「44px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 44px;
  /* この箇所の解説：
   * 高さを「44px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 44px;
  /* この箇所の解説：
   * 外側の余白を「0」に指定します。
   */
  margin: 0;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
   */
  position: absolute;
  /* この箇所の解説：
   * 配置基準からの距離を「50% auto auto」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  inset: 50% auto auto;
  /* この箇所の解説：
   * 移動・拡大縮小・回転等を「translateY(-50%)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  transform: translateY(-50%);
  /* この箇所の解説：
   * 要素の影を「0 2px 8px #173f4a20」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  box-shadow: 0 2px 8px #173f4a20;
}

/* この箇所の解説：
 * セレクター「.ad-nav:hover」に一致する要素へ、内側の見た目を適用します。
 * マウスを載せた状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-nav:hover {
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   */
  color: #fff;
  /* この箇所の解説：
   * 背景全体を「#26383dbb」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  background: #26383dbb;
}

/* この箇所の解説：
 * セレクター「.ad-nav-prev」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-nav-prev {
  /* この箇所の解説：
   * 配置基準からの距離を「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  left: 6px;
}

/* この箇所の解説：
 * セレクター「.ad-nav-next」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-nav-next {
  /* この箇所の解説：
   * 配置基準からの距離を「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   * 空行です。
   * 見た目の指定はありません。
   */
  right: 6px;
}

/* この箇所の解説：
 * セレクター「.ad-pagination」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-pagination {
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 指定方向の内余白を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding-top: 4px;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: flex;
}

/* この箇所の解説：
 * セレクター「.ad-dot」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-dot {
  /* この箇所の解説：
   * マウスカーソルの形を「pointer」に指定します。
   */
  cursor: pointer;
  /* この箇所の解説：
   * 角の丸みを「50%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  border-radius: 50%;
  /* この箇所の解説：
   * CSSのplace-items設定を「center」に指定します。
   */
  place-items: center;
  /* この箇所の解説：
   * 横幅を「28px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 28px;
  /* この箇所の解説：
   * 高さを「32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 32px;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: grid;
}

/* この箇所の解説：
 * セレクター「.ad-dot span」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-dot span {
  /* この箇所の解説：
   * 背景全体を「#ccc」に指定します。
   */
  background: #ccc;
  /* この箇所の解説：
   * 角の丸みを「50%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  border-radius: 50%;
  /* この箇所の解説：
   * 横幅を「10px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 10px;
  /* この箇所の解説：
   * 高さを「10px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 10px;
  /* この箇所の解説：
   * 状態が変わるときの変化時間を「background .15s」に指定します。
   */
  transition: background .15s;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「block」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: block;
}

/* この箇所の解説：
 * セレクター「.ad-dot[aria-pressed=true] span」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-dot[aria-pressed=true] span {
  /* この箇所の解説：
   * 背景全体を「#333」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  background: #333;
}

/* この箇所の解説：
 * セレクター「.ad-slide-trigger」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-slide-trigger {
  /* この箇所の解説：
   * 文字の横方向の揃え方を「left」に指定します。
   */
  text-align: left;
  /* この箇所の解説：
   * マウスカーソルの形を「zoom-in」に指定します。
   */
  cursor: zoom-in;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「block」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: block;
}

/* この箇所の解説：
 * セレクター「.ad-creative」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative {
  /* この箇所の解説：
   * CSSのisolation設定を「isolate」に指定します。
   */
  isolation: isolate;
  /* この箇所の解説：
   * 横幅と高さの比率を「3」に指定します。
   */
  aspect-ratio: 3;
  /* この箇所の解説：
   * 背景全体を「var(--ad-bg)」に指定します。
   * var(...)は定義済みのCSS変数を参照します。
   */
  background: var(--ad-bg);
  /* この箇所の解説：
   * 文字の色を「#173f4a」に指定します。
   */
  color: #173f4a;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
   */
  position: relative;
  /* この箇所の解説：
   * 内容がはみ出した場合の扱いを「hidden」に指定します。
   */
  overflow: hidden;
  /* この箇所の解説：
   * CSSのcontainer-type設定を「inline-size」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  container-type: inline-size;
}

/* この箇所の解説：
 * セレクター「.ad-image」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-image {
  /* この箇所の解説：
   * 画像を枠へ収める方式を「cover」に指定します。
   */
  object-fit: cover;
  /* この箇所の解説：
   * CSSのobject-position設定を「center」に指定します。
   */
  object-position: center;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 高さを「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  height: 100%;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
   */
  position: absolute;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inset: 0;
}

/* この箇所の解説：
 * セレクター「.ad-image-shade」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-image-shade {
  /* この箇所の解説：
   * 背景全体を「linear-gradient(90deg, var(--ad-bg) 0%, var(--ad-bg) 21%,
   * var(--ad-bg) 35%, transparent 64%)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * var(...)は定義済みのCSS変数を参照します。
   */
  background: linear-gradient(90deg, var(--ad-bg) 0%, var(--ad-bg) 21%, var(--ad-bg) 35%, transparent 64%);
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「absolute」に指定します。
   */
  position: absolute;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inset: 0;
}

/* この箇所の解説：
 * @supports 「(color:color-mix(in lab, red, red))」の指示です。
 * CSS機能への対応に応じて指定を切り替えます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@supports (color:color-mix(in lab, red, red)) {
  /* この箇所の解説：
   * セレクター「.ad-image-shade」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-image-shade {
    /* この箇所の解説：
     * 背景全体を「linear-gradient(90deg, var(--ad-bg) 0%, color-mix(in srgb
     * , var(--ad-bg) 94%, transparent) 21%, color-mix(in srgb, var(--ad-bg)
     *  72%…」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     * var(...)は定義済みのCSS変数を参照します。
     * 空行です。
     * 見た目の指定はありません。
     */
    background: linear-gradient(90deg, var(--ad-bg) 0%, color-mix(in srgb, var(--ad-bg) 94%, transparent) 21%, color-mix(in srgb, var(--ad-bg) 72%, transparent) 35%, transparent 64%);
  }
}

/* この箇所の解説：
 * セレクター「.ad-copy」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-copy {
  /* この箇所の解説：
   * Flexの並ぶ向きを「column」に指定します。
   */
  flex-direction: column;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「flex-start」に指定します。
   */
  align-items: flex-start;
  /* この箇所の解説：
   * 横幅を「57%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 57%;
  /* この箇所の解説：
   * 高さを「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  height: 100%;
  /* この箇所の解説：
   * 内側の余白を「4cqw 5cqw」に指定します。
   */
  padding: 4cqw 5cqw;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  position: relative;
}

/* この箇所の解説：
 * セレクター「.ad-eyebrow」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-eyebrow {
  /* この箇所の解説：
   * 文字間隔を「.16em」に指定します。
   */
  letter-spacing: .16em;
  /* この箇所の解説：
   * 文字の色を「var(--ad-accent)」に指定します。
   * var(...)は定義済みのCSS変数を参照します。
   */
  color: var(--ad-accent);
  /* この箇所の解説：
   * 文字の大きさを「clamp(10px,1.2cqw,15px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: clamp(10px,1.2cqw,15px);
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  font-weight: 800;
}

/* この箇所の解説：
 * セレクター「.ad-copy h2」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-copy h2 {
  /* この箇所の解説：
   * 空白と改行の扱いを「pre-line」に指定します。
   */
  white-space: pre-line;
  /* この箇所の解説：
   * 文字間隔を「-.04em」に指定します。
   */
  letter-spacing: -.04em;
  /* この箇所の解説：
   * 指定方向の外余白を「1.4cqw」に指定します。
   */
  margin-top: 1.4cqw;
  /* この箇所の解説：
   * 文字の大きさを「clamp(22px,3.6cqw,48px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: clamp(22px,3.6cqw,48px);
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
  /* この箇所の解説：
   * 行の高さを「1.35」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  line-height: 1.35;
}

/* この箇所の解説：
 * セレクター「.ad-copy p」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-copy p {
  /* この箇所の解説：
   * 文字の色を「#45616d」に指定します。
   */
  color: #45616d;
  /* この箇所の解説：
   * 指定方向の外余白を「1.4cqw」に指定します。
   */
  margin-top: 1.4cqw;
  /* この箇所の解説：
   * 文字の大きさを「clamp(12px,1.45cqw,18px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: clamp(12px,1.45cqw,18px);
  /* この箇所の解説：
   * 文字の太さを「600」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  font-weight: 600;
}

/* この箇所の解説：
 * セレクター「.ad-open-label」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-open-label {
  /* この箇所の解説：
   * 文字の色を「var(--ad-accent)」に指定します。
   * var(...)は定義済みのCSS変数を参照します。
   */
  color: var(--ad-accent);
  /* この箇所の解説：
   * 指定箇所の境界線を「1px solid」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-bottom: 1px solid;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「10px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 10px;
  /* この箇所の解説：
   * 指定方向の外余白を「2cqw」に指定します。
   */
  margin-top: 2cqw;
  /* この箇所の解説：
   * 指定方向の内余白を「5px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding-bottom: 5px;
  /* この箇所の解説：
   * 文字の大きさを「clamp(12px,1.4cqw,16px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: clamp(12px,1.4cqw,16px);
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: flex;
}

/* この箇所の解説：
 * セレクター「.ad-creative-dark」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative-dark {
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  color: #fff;
}

/* この箇所の解説：
 * セレクター「.ad-creative-dark .ad-copy p」に一致する要素へ、内側の見た目
 * を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative-dark .ad-copy p {
  /* この箇所の解説：
   * 文字の色を「#e4eafa」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  color: #e4eafa;
}

/* この箇所の解説：
 * セレクター「.ad-creative-science .ad-image」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative-science .ad-image {
  /* この箇所の解説：
   * 横幅を「86%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * 空行です。
   * 見た目の指定はありません。
   */
  width: 86%;
}

/* この箇所の解説：
 * セレクター「.ad-creative-science .ad-image-shade」に一致する要素へ、内側
 * の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative-science .ad-image-shade {
  /* この箇所の解説：
   * 背景全体を「linear-gradient(270deg, var(--ad-bg) 0%, var(--ad-bg) 24%,
   * var(--ad-bg) 40%, transparent 65%)」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * var(...)は定義済みのCSS変数を参照します。
   * 空行です。
   * 見た目の指定はありません。
   */
  background: linear-gradient(270deg, var(--ad-bg) 0%, var(--ad-bg) 24%, var(--ad-bg) 40%, transparent 65%);
}

/* この箇所の解説：
 * @supports 「(color:color-mix(in lab, red, red))」の指示です。
 * CSS機能への対応に応じて指定を切り替えます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@supports (color:color-mix(in lab, red, red)) {
  /* この箇所の解説：
   * セレクター「.ad-creative-science .ad-image-shade」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-creative-science .ad-image-shade {
    /* この箇所の解説：
     * 背景全体を「linear-gradient(270deg, var(--ad-bg) 0%, var(--ad-bg) 24%
     * , color-mix(in srgb, var(--ad-bg) 87%, transparent) 40%, transparent
     * 65%)」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     * var(...)は定義済みのCSS変数を参照します。
     * 空行です。
     * 見た目の指定はありません。
     */
    background: linear-gradient(270deg, var(--ad-bg) 0%, var(--ad-bg) 24%, color-mix(in srgb, var(--ad-bg) 87%, transparent) 40%, transparent 65%);
  }
}

/* この箇所の解説：
 * セレクター「.ad-creative-science .ad-copy」に一致する要素へ、内側の見た目
 * を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-creative-science .ad-copy {
  /* この箇所の解説：
   * 横幅を「51%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 51%;
  /* この箇所の解説：
   * 指定方向の外余白を「auto」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  margin-left: auto;
}

/* この箇所の解説：
 * セレクター「.ad-fullscreen[data-slot=dialog-content]」に一致する要素へ、
 * 内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-fullscreen[data-slot=dialog-content] {
  /* この箇所の解説：
   * 重なり順を「100」に指定します。
   */
  z-index: 100;
  /* この箇所の解説：
   * 文字の色を「#fff」に指定します。
   */
  color: #fff;
  /* この箇所の解説：
   * 横幅を「min(94vw,1400px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: min(94vw,1400px);
  /* この箇所の解説：
   * 横幅の上限を「none」に指定します。
   */
  max-width: none;
  /* この箇所の解説：
   * 高さを「auto」に指定します。
   */
  height: auto;
  /* この箇所の解説：
   * 高さの上限を「88dvh」に指定します。
   */
  max-height: 88dvh;
  /* この箇所の解説：
   * 要素の影を「none」に指定します。
   */
  box-shadow: none;
  /* この箇所の解説：
   * 背景全体を「0 0」に指定します。
   */
  background: 0 0;
  /* この箇所の解説：
   * 境界線を「0」に指定します。
   */
  border: 0;
  /* この箇所の解説：
   * 角の丸みを「0」に指定します。
   */
  border-radius: 0;
  /* この箇所の解説：
   * 内側の余白を「0」に指定します。
   */
  padding: 0;
  /* この箇所の解説：
   * 繰り返し等の動きを「none」に指定します。
   */
  animation: none;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「block」に指定します。
   */
  display: block;
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「fixed」に指定します。
   */
  position: fixed;
  /* この箇所の解説：
   * 配置基準からの距離を「50%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  top: 50%;
  /* この箇所の解説：
   * 配置基準からの距離を「50%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  left: 50%;
  /* この箇所の解説：
   * 内容がはみ出した場合の扱いを「visible」に指定します。
   */
  overflow: visible;
  /* この箇所の解説：
   * 移動・拡大縮小・回転等を「translate(-50%,-50%)translate(0)」に
   * 指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * 空行です。
   * 見た目の指定はありません。
   */
  transform: translate(-50%,-50%)translate(0);
}

/* この箇所の解説：
 * セレクター「body:has(.ad-fullscreen) [data-slot=dialog-overlay]」に一致
 * する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
body:has(.ad-fullscreen) [data-slot=dialog-overlay] {
  /* この箇所の解説：
   * 重なり順を「90」に指定します。
   */
  z-index: 90;
  /* この箇所の解説：
   * CSSの-webkit-backdrop-filter設定を「blur(7px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  -webkit-backdrop-filter: blur(7px);
  /* この箇所の解説：
   * CSSのbackdrop-filter設定を「blur(7px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  backdrop-filter: blur(7px);
  /* この箇所の解説：
   * マウスカーソルの形を「zoom-out」に指定します。
   */
  cursor: zoom-out;
  /* この箇所の解説：
   * 背景全体を「#18232866」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  background: #18232866;
}

/* この箇所の解説：
 * セレクター「.ad-modal-stage」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-modal-stage {
  /* この箇所の解説：
   * マウスカーソルの形を「zoom-out」に指定します。
   */
  cursor: zoom-out;
  /* この箇所の解説：
   * CSSのplace-items設定を「center」に指定します。
   */
  place-items: center;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: grid;
}

/* この箇所の解説：
 * セレクター「.ad-modal-image」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.ad-modal-image {
  /* この箇所の解説：
   * 画像を枠へ収める方式を「contain」に指定します。
   */
  object-fit: contain;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 高さを「auto」に指定します。
   */
  height: auto;
  /* この箇所の解説：
   * 高さの上限を「88dvh」に指定します。
   */
  max-height: 88dvh;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「block」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: block;
}

/* この箇所の解説：
 * @media 「(max-width:640px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (max-width:640px) {
  /* この箇所の解説：
   * セレクター「.ad-nav」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-nav {
    /* この箇所の解説：
     * 配置基準からの距離を「calc(100% + 24px)」に指定します。
     * pxはCSS上のピクセル単位です。
     * %の基準はそのプロパティと親の寸法などに依存します。
     * calc(...)で単位付きの値を計算します。
     */
    top: calc(100% + 24px);
  }
  /* この箇所の解説：
   * セレクター「.ad-pagination」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-pagination {
    /* この箇所の解説：
     * 高さの下限を「48px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    min-height: 48px;
  }
  /* この箇所の解説：
   * セレクター「.ad-creative」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-creative {
    /* この箇所の解説：
     * 横幅と高さの比率を「16/9」に指定します。
     */
    aspect-ratio: 16/9;
  }
  /* この箇所の解説：
   * セレクター「.ad-copy」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-copy {
    /* この箇所の解説：
     * 横幅を「72%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    width: 72%;
    /* この箇所の解説：
     * 内側の余白を「5cqw」に指定します。
     */
    padding: 5cqw;
  }
  /* この箇所の解説：
   * セレクター「.ad-copy h2」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-copy h2 {
    /* この箇所の解説：
     * 文字の大きさを「6cqw」に指定します。
     */
    font-size: 6cqw;
  }
  /* この箇所の解説：
   * セレクター「.ad-copy p」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-copy p {
    /* この箇所の解説：
     * 横幅の上限を「90%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    max-width: 90%;
    /* この箇所の解説：
     * 文字の大きさを「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 12px;
    /* この箇所の解説：
     * 行の高さを「1.6」に指定します。
     */
    line-height: 1.6;
  }
  /* この箇所の解説：
   * セレクター「.ad-eyebrow」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-eyebrow {
    /* この箇所の解説：
     * 文字の大きさを「2.5cqw」に指定します。
     */
    font-size: 2.5cqw;
  }
  /* この箇所の解説：
   * セレクター「.ad-open-label」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-open-label {
    /* この箇所の解説：
     * 指定方向の外余白を「2cqw」に指定します。
     */
    margin-top: 2cqw;
    /* この箇所の解説：
     * 文字の大きさを「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 12px;
  }
  /* この箇所の解説：
   * セレクター「.ad-creative-science .ad-copy」に一致する要素へ、内側の
   * 見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-creative-science .ad-copy {
    /* この箇所の解説：
     * 横幅を「61%」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     */
    width: 61%;
  }
  /* この箇所の解説：
   * セレクター「.ad-creative-science .ad-image-shade」に一致する要素へ、
   * 内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .ad-creative-science .ad-image-shade {
    /* この箇所の解説：
     * 背景全体を「linear-gradient(270deg, var(--ad-bg) 5%, var(--ad-bg) 35%
     * , var(--ad-bg) 50%, transparent 82%)」に指定します。
     * %の基準はそのプロパティと親の寸法などに依存します。
     * var(...)は定義済みのCSS変数を参照します。
     */
    background: linear-gradient(270deg, var(--ad-bg) 5%, var(--ad-bg) 35%, var(--ad-bg) 50%, transparent 82%);
  }
  /* この箇所の解説：
   * @supports 「(color:color-mix(in lab, red, red))」の指示です。
   * CSS機能への対応に応じて指定を切り替えます。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  @supports (color:color-mix(in lab, red, red)) {
    /* この箇所の解説：
     * セレクター「.ad-creative-science .ad-image-shade」に一致する要素へ、
     * 内側の見た目を適用します。
     * 直前のCSSルール・条件の範囲を閉じます。
     */
    .ad-creative-science .ad-image-shade {
      /* この箇所の解説：
       * 背景全体を「linear-gradient(270deg, var(--ad-bg) 5%, color-mix(in
       * srgb, var(--ad-bg) 95%, transparent) 35%, color-mix(in srgb, var(
       * --ad-bg) 70…」に指定します。
       * %の基準はそのプロパティと親の寸法などに依存します。
       * var(...)は定義済みのCSS変数を参照します。
       */
      background: linear-gradient(270deg, var(--ad-bg) 5%, color-mix(in srgb, var(--ad-bg) 95%, transparent) 35%, color-mix(in srgb, var(--ad-bg) 70%, transparent) 50%, transparent 82%);
    }
  }
  /* この箇所の解説：
   * セレクター「.drawing-entry-floating」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .drawing-entry-floating {
    /* この箇所の解説：
     * 配置基準からの距離を「16px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    right: 16px;
    /* この箇所の解説：
     * 配置基準からの距離を「max(20px, env(safe-area-inset-bottom))」に
     * 指定します。
     * pxはCSS上のピクセル単位です。
     */
    bottom: max(20px, env(safe-area-inset-bottom));
    /* この箇所の解説：
     * 指定箇所の境界線を「3px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    border-width: 3px;
    /* この箇所の解説：
     * 横幅を「96px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    width: 96px;
    /* この箇所の解説：
     * 高さを「96px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    height: 96px;
    /* この箇所の解説：
     * 文字の大きさを「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     * 空行です。
     * 見た目の指定はありません。
     */
    font-size: 12px;
  }
}

/* この箇所の解説：
 * @media 「(prefers-reduced-motion:reduce)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (prefers-reduced-motion:reduce) {
  /* この箇所の解説：
   * セレクター「.drawing-entry-floating」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .drawing-entry-floating {
    /* この箇所の解説：
     * 状態が変わるときの変化時間を「none」に指定します。
     * 空行です。
     * 見た目の指定はありません。
     */
    transition: none;
  }
}

/* この箇所の解説：
 * セレクター「.drawing-save-dialog[data-slot=dialog-content]」に一致する
 * 要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.drawing-save-dialog[data-slot=dialog-content] {
  /* この箇所の解説：
   * 子要素間の間隔を「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 14px;
  /* この箇所の解説：
   * 横幅を「min(440px,100vw - 32px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: min(440px,100vw - 32px);
  /* この箇所の解説：
   * 横幅の上限を「none」に指定します。
   */
  max-width: none;
  /* この箇所の解説：
   * 高さの上限を「92dvh」に指定します。
   */
  max-height: 92dvh;
  /* この箇所の解説：
   * 内側の余白を「28px 24px 20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 28px 24px 20px;
  /* この箇所の解説：
   * 指定方向のはみ出しを「auto」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  overflow-y: auto;
}

/* この箇所の解説：
 * セレクター「.drawing-qr-area」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.drawing-qr-area {
  /* この箇所の解説：
   * 背景全体を「#fff」に指定します。
   */
  background: #fff;
  /* この箇所の解説：
   * 境界線を「1px solid #dbe7e4」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #dbe7e4;
  /* この箇所の解説：
   * 角の丸みを「10px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 10px;
  /* この箇所の解説：
   * CSSのplace-items設定を「center」に指定します。
   */
  place-items: center;
  /* この箇所の解説：
   * 高さの下限を「220px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 220px;
  /* この箇所の解説：
   * 内側の余白を「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 6px;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: grid;
}

/* この箇所の解説：
 * セレクター「.drawing-qr-image」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.drawing-qr-image {
  /* この箇所の解説：
   * 横幅と高さの比率を「1」に指定します。
   */
  aspect-ratio: 1;
  /* この箇所の解説：
   * 横幅を「min(100%,280px)」に指定します。
   * pxはCSS上のピクセル単位です。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: min(100%,280px);
  /* この箇所の解説：
   * 高さを「auto」に指定します。
   */
  height: auto;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「block」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  display: block;
}

/* この箇所の解説：
 * @property 「--tw-border-style」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-border-style {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「solid」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: solid;
}

/* この箇所の解説：
 * @property 「--tw-shadow」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-shadow {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0 0 #0000」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0 0 #0000;
}

/* この箇所の解説：
 * @property 「--tw-shadow-color」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-shadow-color {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-shadow-alpha」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-shadow-alpha {
  /* この箇所の解説：
   * CSSのsyntax設定を「"<percentage>"」に指定します。
   */
  syntax: "<percentage>";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 100%;
}

/* この箇所の解説：
 * @property 「--tw-inset-shadow」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-inset-shadow {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0 0 #0000」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0 0 #0000;
}

/* この箇所の解説：
 * @property 「--tw-inset-shadow-color」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-inset-shadow-color {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-inset-shadow-alpha」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-inset-shadow-alpha {
  /* この箇所の解説：
   * CSSのsyntax設定を「"<percentage>"」に指定します。
   */
  syntax: "<percentage>";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 100%;
}

/* この箇所の解説：
 * @property 「--tw-ring-color」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-ring-color {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-ring-shadow」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-ring-shadow {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0 0 #0000」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0 0 #0000;
}

/* この箇所の解説：
 * @property 「--tw-inset-ring-color」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-inset-ring-color {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-inset-ring-shadow」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-inset-ring-shadow {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0 0 #0000」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0 0 #0000;
}

/* この箇所の解説：
 * @property 「--tw-ring-inset」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-ring-inset {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-ring-offset-width」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-ring-offset-width {
  /* この箇所の解説：
   * CSSのsyntax設定を「"<length>"」に指定します。
   */
  syntax: "<length>";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0;
}

/* この箇所の解説：
 * @property 「--tw-ring-offset-color」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-ring-offset-color {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「#fff」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: #fff;
}

/* この箇所の解説：
 * @property 「--tw-ring-offset-shadow」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-ring-offset-shadow {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「0 0 #0000」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 0 0 #0000;
}

/* この箇所の解説：
 * @property 「--tw-blur」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-blur {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-brightness」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-brightness {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-contrast」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-contrast {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-grayscale」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-grayscale {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-hue-rotate」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-hue-rotate {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-invert」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-invert {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-opacity」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-opacity {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-saturate」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-saturate {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-sepia」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-sepia {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-drop-shadow」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-drop-shadow {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-drop-shadow-color」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-drop-shadow-color {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}

/* この箇所の解説：
 * @property 「--tw-drop-shadow-alpha」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-drop-shadow-alpha {
  /* この箇所の解説：
   * CSSのsyntax設定を「"<percentage>"」に指定します。
   */
  syntax: "<percentage>";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   */
  inherits: false;
  /* この箇所の解説：
   * CSSのinitial-value設定を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * 空行です。
   * 見た目の指定はありません。
   */
  initial-value: 100%;
}

/* この箇所の解説：
 * @property 「--tw-drop-shadow-size」の指示です。
 * CSS変数の型・初期値・継承方法を登録します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@property --tw-drop-shadow-size {
  /* この箇所の解説：
   * CSSのsyntax設定を「"*"」に指定します。
   */
  syntax: "*";
  /* この箇所の解説：
   * CSSのinherits設定を「false」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  inherits: false;
}