/* この箇所の解説：
 * CSSのコメントです。
 * 実行用の見た目ではなく、説明・ライセンス等を記録しています。
 */
/* 描画準備画面専用の装飾です。既存の幅・色・携帯向け配置を保持します。 */
/* この箇所の解説：
 * セレクター「.setup-shell」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-shell {
  /* この箇所の解説：
   * 高さの下限を「100dvh」に指定します。
   */
  min-height: 100dvh;
  /* この箇所の解説：
   * 文字の色を「#183c48」に指定します。
   */
  color: #183c48;
  /* この箇所の解説：
   * 背景全体を「#eef6f3」に指定します。
   */
  background: #eef6f3;
}
/* この箇所の解説：
 * セレクター「.setup-background, .setup-background-shade」に一致する要素へ、
 * 内側の見た目を適用します。
 * 前後のCSS指定につながる行です。
 * 処理単位でこの行を含むセレクターや値を確認してください。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-background,
.setup-background-shade {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「fixed」に指定します。
   */
  position: fixed;
  /* この箇所の解説：
   * 配置基準からの距離を「0」に指定します。
   */
  inset: 0;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 高さを「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  height: 100%;
}
/* この箇所の解説：
 * セレクター「.setup-background」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-background {
  /* この箇所の解説：
   * 画像を枠へ収める方式を「cover」に指定します。
   */
  object-fit: cover;
}
/* この箇所の解説：
 * セレクター「.setup-background-shade」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-background-shade {
  /* この箇所の解説：
   * 背景全体を「#ffffff40」に指定します。
   */
  background: #ffffff40;
  /* この箇所の解説：
   * CSSのbackdrop-filter設定を「blur(1px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  backdrop-filter: blur(1px);
}
/* この箇所の解説：
 * セレクター「.setup-header」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-header {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
   */
  position: relative;
  /* この箇所の解説：
   * 重なり順を「1」に指定します。
   */
  z-index: 1;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 高さを「64px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 64px;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「space-between」に指定します。
   */
  justify-content: space-between;
  /* この箇所の解説：
   * 子要素間の間隔を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 12px;
  /* この箇所の解説：
   * 内側の余白を「0 28px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 0 28px;
  /* この箇所の解説：
   * 指定箇所の境界線を「1px solid #ffffffa6」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-bottom: 1px solid #ffffffa6;
  /* この箇所の解説：
   * 背景全体を「#ffffffe3」に指定します。
   */
  background: #ffffffe3;
  /* この箇所の解説：
   * CSSのbackdrop-filter設定を「blur(12px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  backdrop-filter: blur(12px);
}
/* この箇所の解説：
 * セレクター「.setup-brand」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-brand {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 文字の大きさを「22px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 22px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
  /* この箇所の解説：
   * 文字間隔を「-0.06em」に指定します。
   */
  letter-spacing: -0.06em;
}
/* この箇所の解説：
 * セレクター「.setup-brand img」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-brand img {
  /* この箇所の解説：
   * 横幅を「38px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 38px;
  /* この箇所の解説：
   * 高さを「38px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 38px;
  /* この箇所の解説：
   * 画像を枠へ収める方式を「contain」に指定します。
   */
  object-fit: contain;
}
/* この箇所の解説：
 * セレクター「.setup-home」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-home {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「6px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 6px;
  /* この箇所の解説：
   * 境界線を「1px solid #9bb4ae」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #9bb4ae;
  /* この箇所の解説：
   * 角の丸みを「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 8px;
  /* この箇所の解説：
   * 内側の余白を「8px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 12px;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
}
/* この箇所の解説：
 * セレクター「.setup-main」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-main {
  /* この箇所の解説：
   * 配置の基準（通常/相対/絶対/固定等）を「relative」に指定します。
   */
  position: relative;
  /* この箇所の解説：
   * 重なり順を「1」に指定します。
   */
  z-index: 1;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * CSSのplace-items設定を「center」に指定します。
   */
  place-items: center;
  /* この箇所の解説：
   * 高さの下限を「calc(100dvh - 64px)」に指定します。
   * pxはCSS上のピクセル単位です。
   * calc(...)で単位付きの値を計算します。
   */
  min-height: calc(100dvh - 64px);
  /* この箇所の解説：
   * 内側の余白を「clamp(16px, 3dvh, 36px) 20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: clamp(16px, 3dvh, 36px) 20px;
}
/* この箇所の解説：
 * セレクター「.setup-panel」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-panel {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * Flexの並ぶ向きを「column」に指定します。
   */
  flex-direction: column;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「stretch」に指定します。
   */
  align-items: stretch;
  /* この箇所の解説：
   * 横幅を「min(100%, 760px)」に指定します。
   * pxはCSS上のピクセル単位です。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: min(100%, 760px);
  /* この箇所の解説：
   * 子要素間の間隔を「clamp(16px, 3dvh, 28px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: clamp(16px, 3dvh, 28px);
  /* この箇所の解説：
   * 境界線を「1px solid #9cb4b0」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #9cb4b0;
  /* この箇所の解説：
   * 背景全体を「#fffffff5」に指定します。
   */
  background: #fffffff5;
  /* この箇所の解説：
   * 内側の余白を「clamp(22px, 4dvh, 40px) clamp(18px, 4vw, 48px)」に
   * 指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: clamp(22px, 4dvh, 40px) clamp(18px, 4vw, 48px);
  /* この箇所の解説：
   * 要素の影を「0 20px 60px #10374030」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  box-shadow: 0 20px 60px #10374030;
  /* この箇所の解説：
   * CSSのbackdrop-filter設定を「blur(12px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  backdrop-filter: blur(12px);
}
/* この箇所の解説：
 * セレクター「.setup-panel h1」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-panel h1 {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素間の間隔を「10px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 10px;
  /* この箇所の解説：
   * 文字の大きさを「clamp(22px, 2.3vw, 28px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: clamp(22px, 2.3vw, 28px);
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
}
/* この箇所の解説：
 * セレクター「.setup-panel h1 svg」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-panel h1 svg {
  /* この箇所の解説：
   * 文字の色を「#e95355」に指定します。
   */
  color: #e95355;
}
/* この箇所の解説：
 * セレクター「.setup-mode-current」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-current {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 16px;
  /* この箇所の解説：
   * 指定方向の外余白を「-8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: -8px;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
}
/* この箇所の解説：
 * セレクター「.setup-mode-current span」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-current span {
  /* この箇所の解説：
   * 角の丸みを「999px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 999px;
  /* この箇所の解説：
   * 背景全体を「#e7f4f1」に指定します。
   */
  background: #e7f4f1;
  /* この箇所の解説：
   * 内側の余白を「5px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 5px 12px;
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
}
/* この箇所の解説：
 * セレクター「.setup-mode-current button」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-current button {
  /* この箇所の解説：
   * 文字の色を「#176378」に指定します。
   */
  color: #176378;
  /* この箇所の解説：
   * CSSのtext-decoration設定を「underline」に指定します。
   */
  text-decoration: underline;
  /* この箇所の解説：
   * CSSのtext-underline-offset設定を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  text-underline-offset: 4px;
  /* この箇所の解説：
   * マウスカーソルの形を「pointer」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  cursor: pointer;
}

/* この箇所の解説：
 * セレクター「.setup-mode-dialog」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-dialog {
  /* この箇所の解説：
   * 横幅を「min(680px, calc(100% - 32px))」に指定します。
   * pxはCSS上のピクセル単位です。
   * %の基準はそのプロパティと親の寸法などに依存します。
   * calc(...)で単位付きの値を計算します。
   */
  width: min(680px, calc(100% - 32px));
  /* この箇所の解説：
   * 横幅の上限を「680px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  max-width: 680px;
  /* この箇所の解説：
   * 境界線を「1px solid #ffffffb3」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #ffffffb3;
  /* この箇所の解説：
   * 角の丸みを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 24px;
  /* この箇所の解説：
   * 内側の余白を「32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 32px;
  /* この箇所の解説：
   * 背景全体を「#fffffff7」に指定します。
   */
  background: #fffffff7;
  /* この箇所の解説：
   * 文字の色を「#183c48」に指定します。
   */
  color: #183c48;
  /* この箇所の解説：
   * 要素の影を「0 24px 80px #08232d40」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  box-shadow: 0 24px 80px #08232d40;
}
/* この箇所の解説：
 * セレクター「.setup-mode-title」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-title {
  /* この箇所の解説：
   * 文字の横方向の揃え方を「center」に指定します。
   */
  text-align: center;
  /* この箇所の解説：
   * 文字の大きさを「26px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 26px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
  /* この箇所の解説：
   * 行の高さを「1.4」に指定します。
   */
  line-height: 1.4;
}
/* この箇所の解説：
 * セレクター「.setup-mode-description」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-description {
  /* この箇所の解説：
   * 文字の横方向の揃え方を「center」に指定します。
   */
  text-align: center;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 行の高さを「1.7」に指定します。
   */
  line-height: 1.7;
  /* この箇所の解説：
   * 文字の色を「#526b72」に指定します。
   */
  color: #526b72;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * Gridの列数と横幅を「repeat(2, minmax(0, 1fr))」に指定します。
   */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* この箇所の解説：
   * 子要素間の間隔を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 16px;
  /* この箇所の解説：
   * 指定方向の外余白を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-top: 8px;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options button」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options button {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * CSSのjustify-items設定を「center」に指定します。
   */
  justify-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 12px;
  /* この箇所の解説：
   * 境界線を「2px solid #b7cfca」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 2px solid #b7cfca;
  /* この箇所の解説：
   * 角の丸みを「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 16px;
  /* この箇所の解説：
   * 内側の余白を「26px 12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 26px 12px;
  /* この箇所の解説：
   * 背景全体を「#eff9f7」に指定します。
   */
  background: #eff9f7;
  /* この箇所の解説：
   * マウスカーソルの形を「pointer」に指定します。
   */
  cursor: pointer;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options button:last-child」に一致する要素へ、内側
 * の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options button:last-child {
  /* この箇所の解説：
   * 指定箇所の境界線を「#176378」に指定します。
   */
  border-color: #176378;
  /* この箇所の解説：
   * 背景全体を「#176378」に指定します。
   */
  background: #176378;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options button:hover」に一致する要素へ、内側の
 * 見た目を適用します。
 * マウスを載せた状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options button:hover {
  /* この箇所の解説：
   * 要素の影を「0 5px 0 #173f4a25」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  box-shadow: 0 5px 0 #173f4a25;
  /* この箇所の解説：
   * 移動・拡大縮小・回転等を「translateY(-2px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  transform: translateY(-2px);
}
/* この箇所の解説：
 * セレクター「.setup-mode-options button:focus-visible」に一致する要素へ、
 * 内側の見た目を適用します。
 * フォーカス状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options button:focus-visible {
  /* この箇所の解説：
   * CSSのoutline設定を「3px solid #e8b61f」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  outline: 3px solid #e8b61f;
  /* この箇所の解説：
   * CSSのoutline-offset設定を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  outline-offset: 4px;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options svg」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options svg {
  /* この箇所の解説：
   * 横幅を「32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 32px;
  /* この箇所の解説：
   * 高さを「32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 32px;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options strong」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options strong {
  /* この箇所の解説：
   * 文字の大きさを「20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 20px;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options span」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options span {
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 行の高さを「1.5」に指定します。
   */
  line-height: 1.5;
  /* この箇所の解説：
   * 文字の横方向の揃え方を「center」に指定します。
   */
  text-align: center;
}
/* この箇所の解説：
 * セレクター「.setup-fieldset」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-fieldset {
  /* この箇所の解説：
   * 横幅の下限を「0」に指定します。
   */
  min-width: 0;
}
/* この箇所の解説：
 * セレクター「.setup-fieldset legend」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-fieldset legend {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「7px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 7px;
  /* この箇所の解説：
   * 横幅を「100%」に指定します。
   * %の基準はそのプロパティと親の寸法などに依存します。
   */
  width: 100%;
  /* この箇所の解説：
   * 指定方向の外余白を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  margin-bottom: 12px;
  /* この箇所の解説：
   * 文字の横方向の揃え方を「center」に指定します。
   */
  text-align: center;
  /* この箇所の解説：
   * 文字の大きさを「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 16px;
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
}
/* この箇所の解説：
 * セレクター「.setup-fieldset legend svg」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-fieldset legend svg {
  /* この箇所の解説：
   * 文字の色を「#178175」に指定します。
   */
  color: #178175;
}
/* この箇所の解説：
 * セレクター「.setup-time-options, .setup-theme-options」に一致する要素へ、
 * 内側の見た目を適用します。
 * 前後のCSS指定につながる行です。
 * 処理単位でこの行を含むセレクターや値を確認してください。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-time-options,
.setup-theme-options {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * 子要素間の間隔を「12px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 12px;
}
/* この箇所の解説：
 * セレクター「.setup-time-options」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-time-options {
  /* この箇所の解説：
   * Gridの列数と横幅を「repeat(3, minmax(0, 1fr))」に指定します。
   */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* この箇所の解説：
 * セレクター「.setup-theme-options」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-theme-options {
  /* この箇所の解説：
   * Gridの列数と横幅を「repeat(4, minmax(0, 1fr))」に指定します。
   */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* この箇所の解説：
 * セレクター「.setup-option」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-option {
  /* この箇所の解説：
   * 高さの下限を「48px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 48px;
  /* この箇所の解説：
   * 境界線を「1.5px solid #a8bbb7」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1.5px solid #a8bbb7;
  /* この箇所の解説：
   * 角の丸みを「9px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 9px;
  /* この箇所の解説：
   * 背景全体を「white」に指定します。
   */
  background: white;
  /* この箇所の解説：
   * 内側の余白を「10px 5px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 10px 5px;
  /* この箇所の解説：
   * 文字の色を「#49666c」に指定します。
   */
  color: #49666c;
  /* この箇所の解説：
   * 文字の大きさを「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 16px;
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
  /* この箇所の解説：
   * マウスカーソルの形を「pointer」に指定します。
   */
  cursor: pointer;
}
/* この箇所の解説：
 * セレクター「.setup-option:hover」に一致する要素へ、内側の見た目を
 * 適用します。
 * マウスを載せた状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-option:hover {
  /* この箇所の解説：
   * 背景全体を「#edf9f7」に指定します。
   */
  background: #edf9f7;
}
/* この箇所の解説：
 * セレクター「.setup-time[aria-pressed="true"]」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-time[aria-pressed="true"] {
  /* この箇所の解説：
   * 指定箇所の境界線を「#e9a800」に指定します。
   */
  border-color: #e9a800;
  /* この箇所の解説：
   * 背景全体を「#ffc62c」に指定します。
   */
  background: #ffc62c;
  /* この箇所の解説：
   * 文字の色を「#24353a」に指定します。
   */
  color: #24353a;
  /* この箇所の解説：
   * 要素の影を「0 4px 0 #d99c00」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  box-shadow: 0 4px 0 #d99c00;
}
/* この箇所の解説：
 * セレクター「.setup-theme[aria-pressed="true"]」に一致する要素へ、内側の
 * 見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-theme[aria-pressed="true"] {
  /* この箇所の解説：
   * 指定箇所の境界線を「#08756c」に指定します。
   */
  border-color: #08756c;
  /* この箇所の解説：
   * 背景全体を「#21a898」に指定します。
   */
  background: #21a898;
  /* この箇所の解説：
   * 文字の色を「white」に指定します。
   */
  color: white;
  /* この箇所の解説：
   * 要素の影を「0 4px 0 #08756c」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  box-shadow: 0 4px 0 #08756c;
}
/* この箇所の解説：
 * セレクター「.setup-random-area」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-random-area {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * CSSのjustify-items設定を「center」に指定します。
   */
  justify-items: center;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
}
/* この箇所の解説：
 * セレクター「.setup-random」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-random {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素間の間隔を「8px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 8px;
  /* この箇所の解説：
   * 高さの下限を「40px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 40px;
  /* この箇所の解説：
   * 境界線を「1px solid #176378」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border: 1px solid #176378;
  /* この箇所の解説：
   * 角の丸みを「999px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 999px;
  /* この箇所の解説：
   * 内側の余白を「8px 24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 8px 24px;
  /* この箇所の解説：
   * 文字の色を「#176378」に指定します。
   */
  color: #176378;
  /* この箇所の解説：
   * 背景全体を「#eff8f6」に指定します。
   */
  background: #eff8f6;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「800」に指定します。
   */
  font-weight: 800;
  /* この箇所の解説：
   * マウスカーソルの形を「pointer」に指定します。
   */
  cursor: pointer;
}
/* この箇所の解説：
 * セレクター「.setup-random:hover」に一致する要素へ、内側の見た目を
 * 適用します。
 * マウスを載せた状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-random:hover {
  /* この箇所の解説：
   * 背景全体を「#dcefeb」に指定します。
   */
  background: #dcefeb;
}
/* この箇所の解説：
 * セレクター「.setup-random-result」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-random-result {
  /* この箇所の解説：
   * 高さの下限を「21px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 21px;
  /* この箇所の解説：
   * 外側の余白を「0」に指定します。
   */
  margin: 0;
  /* この箇所の解説：
   * 文字の色を「#526b72」に指定します。
   */
  color: #526b72;
  /* この箇所の解説：
   * 文字の横方向の揃え方を「center」に指定します。
   */
  text-align: center;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
}
/* この箇所の解説：
 * セレクター「.setup-start」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-start {
  /* この箇所の解説：
   * その要素だけの交差方向の揃え方を「center」に指定します。
   */
  align-self: center;
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「flex」に指定します。
   */
  display: flex;
  /* この箇所の解説：
   * 子要素の交差方向の揃え方を「center」に指定します。
   */
  align-items: center;
  /* この箇所の解説：
   * 子要素の主方向の揃え方を「center」に指定します。
   */
  justify-content: center;
  /* この箇所の解説：
   * 子要素間の間隔を「10px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 10px;
  /* この箇所の解説：
   * 高さの下限を「50px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-height: 50px;
  /* この箇所の解説：
   * 横幅の下限を「200px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  min-width: 200px;
  /* この箇所の解説：
   * 角の丸みを「999px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  border-radius: 999px;
  /* この箇所の解説：
   * 背景全体を「#f4dc23」に指定します。
   */
  background: #f4dc23;
  /* この箇所の解説：
   * 内側の余白を「12px 32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  padding: 12px 32px;
  /* この箇所の解説：
   * 文字の色を「#25363a」に指定します。
   */
  color: #25363a;
  /* この箇所の解説：
   * 要素の影を「0 5px 0 #c6ac00」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  box-shadow: 0 5px 0 #c6ac00;
  /* この箇所の解説：
   * 文字の大きさを「18px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 18px;
  /* この箇所の解説：
   * 文字の太さを「900」に指定します。
   */
  font-weight: 900;
  /* この箇所の解説：
   * マウスカーソルの形を「pointer」に指定します。
   */
  cursor: pointer;
}
/* この箇所の解説：
 * セレクター「.setup-start:hover」に一致する要素へ、内側の見た目を
 * 適用します。
 * マウスを載せた状態の指定を含みます。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-start:hover {
  /* この箇所の解説：
   * 背景全体を「#ffeb3b」に指定します。
   */
  background: #ffeb3b;
}
/* この箇所の解説：
 * セレクター「.setup-start:active」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-start:active {
  /* この箇所の解説：
   * 移動・拡大縮小・回転等を「translateY(3px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  transform: translateY(3px);
  /* この箇所の解説：
   * 要素の影を「none」に指定します。
   */
  box-shadow: none;
}
/* この箇所の解説：
 * セレクター「.setup-panel button:focus-visible, .setup-header
 * a:focus-visible」に一致する要素へ、内側の見た目を適用します。
 * フォーカス状態の指定を含みます。
 * 前後のCSS指定につながる行です。
 * 処理単位でこの行を含むセレクターや値を確認してください。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-panel button:focus-visible,
.setup-header a:focus-visible {
  /* この箇所の解説：
   * CSSのoutline設定を「3px solid #183c48」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  outline: 3px solid #183c48;
  /* この箇所の解説：
   * CSSのoutline-offset設定を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  outline-offset: 4px;
}
/* この箇所の解説：
 * @media 「(min-width: 760px) and (max-height: 650px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (min-width: 760px) and (max-height: 650px) {
  /* この箇所の解説：
   * セレクター「.setup-header」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-header {
    /* この箇所の解説：
     * 高さを「52px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    height: 52px;
  }
  /* この箇所の解説：
   * セレクター「.setup-main」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-main {
    /* この箇所の解説：
     * 高さの下限を「calc(100dvh - 52px)」に指定します。
     * pxはCSS上のピクセル単位です。
     * calc(...)で単位付きの値を計算します。
     */
    min-height: calc(100dvh - 52px);
    /* この箇所の解説：
     * 指定方向の内余白を「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding-block: 12px;
  }
  /* この箇所の解説：
   * セレクター「.setup-panel」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-panel {
    /* この箇所の解説：
     * 子要素間の間隔を「14px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 14px;
    /* この箇所の解説：
     * 指定方向の内余白を「18px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding-block: 18px;
  }
  /* この箇所の解説：
   * セレクター「.setup-option」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-option {
    /* この箇所の解説：
     * 高さの下限を「42px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    min-height: 42px;
    /* この箇所の解説：
     * 指定方向の内余白を「7px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding-block: 7px;
  }
  /* この箇所の解説：
   * セレクター「.setup-fieldset legend」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-fieldset legend {
    /* この箇所の解説：
     * 指定方向の外余白を「8px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    margin-bottom: 8px;
  }
  /* この箇所の解説：
   * セレクター「.setup-start」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-start {
    /* この箇所の解説：
     * 高さの下限を「44px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    min-height: 44px;
    /* この箇所の解説：
     * 指定方向の内余白を「9px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding-block: 9px;
  }
}
/* この箇所の解説：
 * @media 「(max-width: 600px)」の指示です。
 * 条件に合う画面幅・環境でだけ内側のCSSを適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
@media (max-width: 600px) {
  /* この箇所の解説：
   * セレクター「.setup-mode-dialog」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-mode-dialog {
    /* この箇所の解説：
     * 内側の余白を「24px 18px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 24px 18px;
  }
  /* この箇所の解説：
   * セレクター「.setup-mode-options」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-mode-options {
    /* この箇所の解説：
     * Gridの列数と横幅を「1fr」に指定します。
     */
    grid-template-columns: 1fr;
    /* この箇所の解説：
     * 子要素間の間隔を「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 12px;
  }
  /* この箇所の解説：
   * セレクター「.setup-mode-options button」に一致する要素へ、内側の見た目
   * を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-mode-options button {
    /* この箇所の解説：
     * Gridの列数と横幅を「32px 1fr」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    grid-template-columns: 32px 1fr;
    /* この箇所の解説：
     * CSSのjustify-items設定を「start」に指定します。
     */
    justify-items: start;
    /* この箇所の解説：
     * 内側の余白を「18px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 18px;
    /* この箇所の解説：
     * 子要素間の間隔を「5px 12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 5px 12px;
  }
  /* この箇所の解説：
   * セレクター「.setup-mode-options svg」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-mode-options svg {
    /* この箇所の解説：
     * CSSのgrid-row設定を「span 2」に指定します。
     */
    grid-row: span 2;
    /* この箇所の解説：
     * その要素だけの交差方向の揃え方を「center」に指定します。
     */
    align-self: center;
  }
  /* この箇所の解説：
   * セレクター「.setup-mode-options span」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-mode-options span {
    /* この箇所の解説：
     * 文字の横方向の揃え方を「left」に指定します。
     */
    text-align: left;
  }
  /* この箇所の解説：
   * セレクター「.setup-header」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-header {
    /* この箇所の解説：
     * 高さを「58px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    height: 58px;
    /* この箇所の解説：
     * 内側の余白を「0 14px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 0 14px;
  }
  /* この箇所の解説：
   * セレクター「.setup-brand」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-brand {
    /* この箇所の解説：
     * 文字の大きさを「18px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 18px;
  }
  /* この箇所の解説：
   * セレクター「.setup-brand img」に一致する要素へ、内側の見た目を
   * 適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-brand img {
    /* この箇所の解説：
     * 横幅を「30px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    width: 30px;
    /* この箇所の解説：
     * 高さを「30px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    height: 30px;
  }
  /* この箇所の解説：
   * セレクター「.setup-home」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-home {
    /* この箇所の解説：
     * 内側の余白を「7px 9px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 7px 9px;
    /* この箇所の解説：
     * 文字の大きさを「12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 12px;
  }
  /* この箇所の解説：
   * セレクター「.setup-main」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-main {
    /* この箇所の解説：
     * 高さの下限を「calc(100dvh - 58px)」に指定します。
     * pxはCSS上のピクセル単位です。
     * calc(...)で単位付きの値を計算します。
     */
    min-height: calc(100dvh - 58px);
    /* この箇所の解説：
     * 内側の余白を「16px 12px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 16px 12px;
  }
  /* この箇所の解説：
   * セレクター「.setup-panel」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-panel {
    /* この箇所の解説：
     * 子要素間の間隔を「20px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 20px;
    /* この箇所の解説：
     * 内側の余白を「24px 16px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    padding: 24px 16px;
  }
  /* この箇所の解説：
   * セレクター「.setup-theme-options, .setup-time-options」に一致する要素へ、
   * 内側の見た目を適用します。
   * 前後のCSS指定につながる行です。
   * 処理単位でこの行を含むセレクターや値を確認してください。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-theme-options,
  .setup-time-options {
    /* この箇所の解説：
     * 子要素間の間隔を「9px 7px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    gap: 9px 7px;
  }
  /* この箇所の解説：
   * セレクター「.setup-theme」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-theme {
    /* この箇所の解説：
     * 文字の大きさを「13px」に指定します。
     * pxはCSS上のピクセル単位です。
     */
    font-size: 13px;
    /* この箇所の解説：
     * 長い文字列を途中で折り返す扱いを「anywhere」に指定します。
     */
    overflow-wrap: anywhere;
    /* この箇所の解説：
     * CSSのtext-wrap設定を「balance」に指定します。
     */
    text-wrap: balance;
  }
  /* この箇所の解説：
   * セレクター「.setup-option」に一致する要素へ、内側の見た目を適用します。
   * 直前のCSSルール・条件の範囲を閉じます。
   */
  .setup-option {
    /* この箇所の解説：
     * 高さの下限を「48px」に指定します。
     * pxはCSS上のピクセル単位です。
     * 空行です。
     * 見た目の指定はありません。
     */
    min-height: 48px;
  }
}

/* この箇所の解説：
 * CSSのコメントです。
 * 実行用の見た目ではなく、説明・ライセンス等を記録しています。
 */
/* ネイティブdialogが背景操作とフォーカスを制御し、選択待ち中は時間を消費しません。 */
/* この箇所の解説：
 * セレクター「.setup-mode-dialog」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-dialog {
  /* この箇所の解説：
   * 外側の余白を「auto」に指定します。
   */
  margin: auto;
  /* この箇所の解説：
   * 高さの上限を「calc(100dvh - 32px)」に指定します。
   * pxはCSS上のピクセル単位です。
   * calc(...)で単位付きの値を計算します。
   */
  max-height: calc(100dvh - 32px);
  /* この箇所の解説：
   * 内容がはみ出した場合の扱いを「auto」に指定します。
   */
  overflow: auto;
}
/* この箇所の解説：
 * セレクター「.setup-mode-dialog[open]」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-dialog[open] {
  /* この箇所の解説：
   * 配置方式（block/flex/grid等）を「grid」に指定します。
   */
  display: grid;
  /* この箇所の解説：
   * 子要素間の間隔を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  gap: 16px;
}
/* この箇所の解説：
 * セレクター「.setup-mode-dialog::backdrop」に一致する要素へ、内側の見た目
 * を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-dialog::backdrop {
  /* この箇所の解説：
   * 背景全体を「#103c46a6」に指定します。
   */
  background: #103c46a6;
  /* この箇所の解説：
   * CSSのbackdrop-filter設定を「blur(5px)」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  backdrop-filter: blur(5px);
}
/* この箇所の解説：
 * セレクター「.setup-mode-home」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-home {
  /* この箇所の解説：
   * CSSのjustify-self設定を「center」に指定します。
   */
  justify-self: center;
  /* この箇所の解説：
   * 文字の大きさを「14px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  font-size: 14px;
  /* この箇所の解説：
   * 文字の太さを「700」に指定します。
   */
  font-weight: 700;
  /* この箇所の解説：
   * 文字の色を「#176378」に指定します。
   */
  color: #176378;
  /* この箇所の解説：
   * CSSのtext-decoration設定を「underline」に指定します。
   */
  text-decoration: underline;
  /* この箇所の解説：
   * CSSのtext-underline-offset設定を「4px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  text-underline-offset: 4px;
}
/* この箇所の解説：
 * セレクター「.setup-shell svg」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-shell svg {
  /* この箇所の解説：
   * 横幅を「20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 20px;
  /* この箇所の解説：
   * 高さを「20px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 20px;
  /* この箇所の解説：
   * 不足時に縮める比率を「0」に指定します。
   */
  flex-shrink: 0;
  /* この箇所の解説：
   * CSSのfill設定を「none」に指定します。
   */
  fill: none;
  /* この箇所の解説：
   * CSSのstroke設定を「currentColor」に指定します。
   */
  stroke: currentColor;
  /* この箇所の解説：
   * CSSのstroke-width設定を「2」に指定します。
   */
  stroke-width: 2;
  /* この箇所の解説：
   * CSSのstroke-linecap設定を「round」に指定します。
   */
  stroke-linecap: round;
  /* この箇所の解説：
   * CSSのstroke-linejoin設定を「round」に指定します。
   */
  stroke-linejoin: round;
}
/* この箇所の解説：
 * セレクター「.setup-panel h1 svg」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-panel h1 svg {
  /* この箇所の解説：
   * 横幅を「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 24px;
  /* この箇所の解説：
   * 高さを「24px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 24px;
}
/* この箇所の解説：
 * セレクター「.setup-mode-options svg」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-mode-options svg {
  /* この箇所の解説：
   * 横幅を「32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 32px;
  /* この箇所の解説：
   * 高さを「32px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 32px;
}
/* この箇所の解説：
 * セレクター「.setup-home svg, .setup-random svg」に一致する要素へ、内側の
 * 見た目を適用します。
 * 前後のCSS指定につながる行です。
 * 処理単位でこの行を含むセレクターや値を確認してください。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-home svg,
.setup-random svg {
  /* この箇所の解説：
   * 横幅を「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  width: 16px;
  /* この箇所の解説：
   * 高さを「16px」に指定します。
   * pxはCSS上のピクセル単位です。
   */
  height: 16px;
}
/* この箇所の解説：
 * セレクター「.setup-start svg」に一致する要素へ、内側の見た目を適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-start svg {
  /* この箇所の解説：
   * CSSのfill設定を「currentColor」に指定します。
   */
  fill: currentColor;
}
/* この箇所の解説：
 * セレクター「.setup-start:disabled」に一致する要素へ、内側の見た目を
 * 適用します。
 * 直前のCSSルール・条件の範囲を閉じます。
 */
.setup-start:disabled {
  /* この箇所の解説：
   * マウスカーソルの形を「not-allowed」に指定します。
   */
  cursor: not-allowed;
  /* この箇所の解説：
   * 要素全体の不透明度を「0.5」に指定します。
   * 空行です。
   * 見た目の指定はありません。
   */
  opacity: 0.5;
}