@charset "utf-8";
/* ==========================================================================
   ボクセル博士のCTスキャン研究所 — Components
   出典: Figma / marketing-Design → 01_Components (node-id 1312-48366)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button
   primary / secondary / textlink × default・hover・selected・disable
   × icon あり（arrow は文字の左）・なし
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.btn__icon svg {
  width: 11px;
  height: 18px;
  overflow: visible;
}

/* --- primary : 塗り --- */
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
}

.btn--primary:active,
.btn--primary[aria-current="true"] {
  background: var(--btn-primary-bg-selected);
}

/* --- secondary : 白地 ＋ 枠 --- */
.btn--secondary {
  border: 2px solid var(--btn-secondary-stroke);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}

.btn--secondary:hover {
  border-color: var(--btn-primary-stroke-hover);
  color: var(--btn-secondary-text-hover);
}

.btn--secondary:active,
.btn--secondary[aria-current="true"] {
  border-color: var(--btn-primary-stroke-selected);
  color: var(--btn-secondary-text-pressed);
}

/* --- textlink : 枠なし --- */
.btn--textlink {
  width: auto;
  height: 60px;
  border-radius: var(--radius-textlink);
  background: none;
  color: var(--btn-textlink-text);
}

.btn--textlink:hover {
  color: var(--btn-textlink-text-hover);
  text-decoration: underline;
}

/* --- disable（共通） --- */
.btn[aria-disabled="true"] {
  pointer-events: none;
}

.btn--primary[aria-disabled="true"] {
  background: var(--btn-primary-bg-disable);
  color: var(--btn-primary-text-disable);
}

.btn--secondary[aria-disabled="true"] {
  border-color: var(--btn-primary-stroke-disable);
  color: var(--btn-secondary-text-disable);
}

.btn--textlink[aria-disabled="true"] {
  color: var(--btn-textlink-text-disable);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Section heading（TOP）  ⋯ NEWS ⋯
   左右に三点の装飾、見出しは左→右のグラデーション
   -------------------------------------------------------------------------- */
.section-heading {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  justify-content: center;
  width: 100%;
}

.section-heading__text {
  font-size: var(--fs-h2);
  font-weight: var(--fw-demibold);
  line-height: var(--lh-heading);
  text-align: center;
  white-space: nowrap;
  background-image: linear-gradient(
    90deg,
    var(--c-bl-05) 0%,
    var(--c-bl-01) 63.462%,
    var(--c-lbl-01) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 行の高さが 1 だと、日本語（はかせレポート など）の文字の上下が行の外にはみ出し、
     背景で色をつけている部分（行の中）だけしか描かれず切れてしまう。
     上下に余白を足して色の範囲を広げ、同じぶんマイナスの余白で見出しの高さは変えない */
  padding-block: 0.2em;
  margin-block: -0.2em;
}

.section-heading__deco {
  display: flex;
  flex: 0 0 auto;
  gap: 1.375px;
  width: 11px;
  height: 2.75px;
}

.section-heading__deco span {
  width: 2.75px;
  height: 2.75px;
  background: currentColor;
}

.section-heading__deco--start {
  color: var(--c-deco-start);
}

.section-heading__deco--end {
  color: var(--c-deco-end);
}

/* 単色版（list/heading-title）— 文字も三点も bl_03 */
.section-heading--solid .section-heading__text {
  background: none;
  color: var(--c-bl-03);
}

.section-heading--solid .section-heading__deco {
  color: var(--c-bl-03);
}

/* --------------------------------------------------------------------------
   Section subtitle（装飾なしの見出し）
   -------------------------------------------------------------------------- */
.section-subtitle {
  width: 100%;
  color: var(--c-bl-03);
  font-size: var(--fs-h2);
  font-weight: var(--fw-demibold);
  line-height: var(--lh-heading);
  text-align: center;
}

/* 英字の下に日本語の小見出しが入る形（list/section subtitle） */
.section-subtitle--withsub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.section-subtitle__ja {
  width: 100%;
  overflow: hidden;
  color: var(--btn-textlink-text);
  font-size: var(--fs-h5);
  line-height: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   区切り飾り（character/br_02 — 343 × 21）
   中央に台形の段差が入った細い水平線。
   -------------------------------------------------------------------------- */
.br-deco {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Tag（カテゴリー）
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-16);
  color: var(--c-text-secondary);
  font-size: var(--fs-h5);
  font-weight: var(--fw-demibold);
  line-height: 1;
  white-space: nowrap;
}

.tag--report {
  background: var(--tag-report);
}

.tag--seibutsu {
  background: var(--tag-seibutsu);
}

.tag--manga {
  background: var(--tag-manga);
}

.tag--movie {
  background: var(--tag-movie);
}

/* --------------------------------------------------------------------------
   News item
   -------------------------------------------------------------------------- */
.newsitem {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-16) 0;
  border-radius: var(--radius-8);
}

.newsitem__meta {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  width: 100%;
}

.newsitem--new .newsitem__meta {
  align-items: center;
}

.newsitem__tag {
  flex: 0 0 auto;
}

.newsitem__date {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  min-width: 0;
  align-self: stretch;
  color: var(--c-text-primary);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  line-height: 1;
}

/* NEW! バッジ — 右端に切り込みの入った黄色いリボン */
.newsitem__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 61px;
  height: 20px;
  background: var(--c-badge-new-bg);
  color: var(--c-bl-03);
  font-size: var(--fs-h5);
  font-weight: var(--fw-demibold);
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
}

.newsitem__badge span {
  width: 56px;
  text-align: center;
}

.newsitem__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 68px;
  color: var(--btn-textlink-text);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: 32px;
  text-overflow: ellipsis;
}

a.newsitem {
  transition: opacity 0.2s ease;
}

a.newsitem:hover {
  opacity: 0.7;
}

a.newsitem:hover .newsitem__title {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Dot divider（section subtitle / button / br_bl）
   6px の四角を 10個、間隔 24px。色はキャラクターのアクセントに追従。
   -------------------------------------------------------------------------- */
.dot-divider {
  display: flex;
  gap: var(--space-24);
  align-items: center;
  justify-content: center;
  width: 100%;
}

.dot-divider span {
  width: 6px;
  height: 6px;
  background: var(--accent, var(--c-bl-01));
}

/* --------------------------------------------------------------------------
   Character thumbnail（thum_chara — 104 × 147）
   選択時はキャラクター固有の淡色＋白 4px の内枠。
   -------------------------------------------------------------------------- */
/* 2026-09 更新: 三角配置 → 横一列。選択中はタブ地と白い連結線が出る。 */
.chara-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 100px;
}

.chara-thumb__frame {
  position: relative;
  width: 100px;
  height: 140px;
}

/* 選択中の背景（character/buttonbg）
   character-tabbg.svg をインライン化し、面・左右上の角・下の枠・▼ を
   別々に動かせるようにしている。 */
.chara-thumb__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tabbg__fill {
  fill: var(--c-lbl);
}

.tabbg__corner,
.tabbg__arrow {
  fill: #fffffe;
}

.tabbg__fill,
.tabbg__corner,
.tabbg__arrow {
  transform-box: fill-box;
  transform-origin: center;
}

/* 出現時にキャラクターの上を1回走るスキャンの光 */
.chara-thumb__scan {
  position: absolute;
  top: 0;
  right: 6px;
  left: 6px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(
    to bottom,
    rgb(0 203 250 / 0%) 0%,
    rgb(0 203 250 / 35%) 42%,
    rgb(255 255 255 / 95%) 50%,
    rgb(0 203 250 / 35%) 58%,
    rgb(0 203 250 / 0%) 100%
  );
  opacity: 0;
  pointer-events: none;
}

.chara-thumb__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* カードへつながる白い縦線 */
.chara-thumb__line {
  width: 4px;
  height: 47px;
  background: var(--c-wt);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chara-thumb[aria-selected="true"] .chara-thumb__bg,
.chara-thumb[aria-selected="true"] .chara-thumb__line {
  opacity: 1;
}

.chara-thumb:not([aria-selected="true"]):hover .chara-thumb__img {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

/* --------------------------------------------------------------------------
   選択枠のアニメーション
   ・切り替えたとき／セクションが画面に入ったとき：
       面がポンと膨らむ → 左右の角が外から飛び込む → 下の枠が伸びる
       → ▼が落ちてきて、スキャンの光が上から下へ1回走る
   ・▼は選択中ずっと上下にゆれる
   選択の切り替えで aria-selected が付くたびにアニメーションが再生される。
   -------------------------------------------------------------------------- */
@keyframes tabbg-fill-pop {
  0%   { opacity: 0; transform: scale(0.55); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tabbg-corner-tl {
  0%   { opacity: 0; transform: translate(-16px, -16px) rotate(-35deg); }
  70%  { opacity: 1; transform: translate(2px, 2px) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes tabbg-corner-tr {
  0%   { opacity: 0; transform: translate(16px, -16px) rotate(35deg); }
  70%  { opacity: 1; transform: translate(-2px, 2px) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes tabbg-corner-bottom {
  0%   { opacity: 0; transform: translateY(12px) scaleX(0.2); }
  70%  { opacity: 1; transform: translateY(-2px) scaleX(1.05); }
  100% { opacity: 1; transform: none; }
}

@keyframes tabbg-arrow-drop {
  0%   { opacity: 0; transform: translateY(-14px); }
  55%  { opacity: 1; transform: translateY(3px); }
  75%  { transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}

@keyframes tabbg-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@keyframes chara-scan {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(122px); }
}

@keyframes chara-img-pop {
  0%   { transform: translateY(6px) scale(0.94); }
  60%  { transform: translateY(-3px) scale(1.03); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ▼ は選択中ずっとゆれる */
  .chara-thumb[aria-selected="true"] .tabbg__arrow {
    animation: tabbg-arrow-bob 1.2s ease-in-out infinite;
  }

  /* 出現アニメーション（クリックで切り替えたとき・画面に入ったとき） */
  .character.is-inview .chara-thumb[aria-selected="true"] .tabbg__fill {
    animation: tabbg-fill-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .character.is-inview .chara-thumb[aria-selected="true"] .tabbg__corner--tl {
    animation: tabbg-corner-tl 0.5s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .character.is-inview .chara-thumb[aria-selected="true"] .tabbg__corner--tr {
    animation: tabbg-corner-tr 0.5s 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .character.is-inview .chara-thumb[aria-selected="true"] .tabbg__corner--bottom {
    animation: tabbg-corner-bottom 0.45s 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .character.is-inview .chara-thumb[aria-selected="true"] .tabbg__arrow {
    animation:
      tabbg-arrow-drop 0.5s 0.38s ease-out both,
      tabbg-arrow-bob 1.2s 0.88s ease-in-out infinite;
  }

  .character.is-inview .chara-thumb[aria-selected="true"] .chara-thumb__img {
    animation: chara-img-pop 0.45s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .character.is-inview .chara-thumb[aria-selected="true"] .chara-thumb__scan {
    animation: chara-scan 0.7s 0.45s ease-in-out both;
  }
}

/* --------------------------------------------------------------------------
   区切り線（br）
   -------------------------------------------------------------------------- */
.br {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-bg-subtitle);
}

/* 親の左右パディングを越えて全幅に伸ばす */
.br--bleed {
  width: calc(100% + var(--space-16) * 2);
  margin-inline: calc(var(--space-16) * -1);
}

/* --------------------------------------------------------------------------
   パンくず（pankuzu — 375 × 40）
   -------------------------------------------------------------------------- */
.pankuzu {
  padding: 10px;
  background: var(--c-wt);
}

.pankuzu__list {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  width: 100%;
}

.pankuzu__list > li {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  min-width: 0;
}

.pankuzu__list > li:last-child {
  flex: 1 1 auto;
}

/* 最後（いまのページ名）以外はちぢめない。長いページ名は最後の項目だけを「…」で省略する
   （ちぢむと、家のアイコンや区切りの矢印がつぶれて見えなくなるため） */
.pankuzu__list > li:not(:last-child),
.pankuzu__home {
  flex: 0 0 auto;
}

.pankuzu a,
.pankuzu__current {
  color: var(--btn-textlink-text);
  font-size: var(--fs-h5);
  font-weight: var(--fw-demibold);
  line-height: normal;
  white-space: nowrap;
}

.pankuzu a:hover {
  text-decoration: underline;
}

.pankuzu__current {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

.pankuzu__home {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.pankuzu__home img {
  width: 15px;
  height: 15px;
}

.pankuzu__sep {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--btn-textlink-text);
}

.pankuzu__sep svg {
  width: 5.5px;
  height: 9px;
}

/* --------------------------------------------------------------------------
   ページャー（paging — 40px の角のない四角）
   -------------------------------------------------------------------------- */
.paging {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-16) 0;
}

.paging__num {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-bl-01);
  background: var(--c-wt);
  color: var(--c-bl-01);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: 32px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.paging__num:hover {
  background: var(--c-lbl);
}

.paging__num[aria-current="page"] {
  background: var(--c-bl-01);
  color: var(--c-wt);
}

.paging__arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--c-bl-01);
  transition: opacity 0.2s ease;
}

.paging__arrow:hover {
  opacity: 0.6;
}

.paging__arrow svg {
  width: 11px;
  height: 18px;
}

/* 1ページ目では「戻る」を出さない（Figma の注記に準拠）。
   ただし場所は確保して、番号の並びが中央からずれないようにする */
.paging__arrow--prev {
  transform: scaleX(-1);
}

.paging__arrow--blank {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   記事見出し（title_list / title_chapter）
   -------------------------------------------------------------------------- */
.title-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-16) 0;
}

.title-list__title {
  color: var(--c-bl-03);
  font-size: var(--fs-h2);
  font-weight: var(--fw-demibold);
  line-height: normal;
}

/* バリアント2 — 「第１話 / CTってなに？」のような章扉 */
.title-list--chapter {
  color: var(--c-bl-03);
  font-weight: var(--fw-demibold);
  text-align: center;
}

.title-list__ep {
  font-size: var(--fs-h4);
}

.title-chapter {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 var(--space-16);
  border-left: 4px solid var(--c-bl-01);
  color: var(--c-text-primary);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
}

/* --------------------------------------------------------------------------
   Character card（character_card — 343px 幅）
   -------------------------------------------------------------------------- */
/* 2026-09 更新: イラストがライトブルーの枠に入り、下端に区切り飾りが付いた */
.chara-card {
  --accent: var(--c-bl-01);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
  max-width: 343px;
  padding: var(--space-16) var(--space-16) var(--space-48);
  border-radius: var(--radius-16);
  background: var(--c-wt);
}

/* イラストを載せるライトブルーの枠（311 × 282） */
/* イラストを載せる水色のステージ。2026/10 更新で、下の中央に台形の出っ張りが
   付いた形（character-stage.svg 311×298）になった。 */
.chara-card__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 298px;
  padding: var(--space-16) var(--space-16) 29px;
  background: url(../img/character-stage.svg) center / 100% 100% no-repeat;
}

.chara-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  margin-top: var(--space-16);
  padding: 0 var(--space-16);
}

.chara-card__br {
  display: block;
  width: calc(100% + var(--space-16) * 2);
  margin: var(--space-32) calc(var(--space-16) * -1) 0;
}

.chara-card--scanyan {
  --accent: var(--c-or);
}

.chara-card--anko {
  --accent: var(--c-gn);
}

.chara-card__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.chara-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chara-card__img img {
  height: 253px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px rgb(21 80 184 / 20%));
}

/* 前後のキャラクターへ（icon / next_character）— イラストの左右に重ねる */
.chara-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--accent);
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.chara-nav--prev {
  left: 17px;
}

.chara-nav--next {
  right: 17px;
}

.chara-nav:hover {
  opacity: 0.6;
}

.chara-nav--prev svg {
  transform: scaleX(-1);
}

.chara-nav img,
.chara-nav svg {
  width: 18px;
  height: 31px;
}

.chara-card__name {
  width: 100%;
  color: var(--c-text-primary);
  font-size: 20px;
  font-weight: var(--fw-demibold);
  line-height: 64px;
  text-align: center;
}

.chara-card__desc {
  width: 100%;
  color: var(--c-text-primary);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: 32px;
}

.chara-card__prof {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: var(--space-16) 0;
  font-size: var(--fs-p);
}

.chara-card__row {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.chara-card__row dt {
  flex: 0 0 70px;
  width: 70px;
  color: var(--accent);
  font-weight: var(--fw-demibold);
  line-height: normal;
}

.chara-card__row dd {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: var(--c-text-primary);
  font-weight: var(--fw-regular);
  line-height: 32px;
}

/* --------------------------------------------------------------------------
   画像がまだ置かれていないとき（js/main.js が .is-img-missing を付ける）
   枠のグレーだけを見せ、壊れた画像アイコンは出さない。
   -------------------------------------------------------------------------- */
img.is-img-missing {
  visibility: hidden;
}

/* ==========================================================================
   全ページ共通のセクション（TOP の top.css から移動）
   ========================================================================== */
/* --------------------------------------------------------------------------
   CTA  (Figma: 02_Sections / CTA size=sm — 375 × 420)
   -------------------------------------------------------------------------- */
.cta-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: var(--space-24) var(--space-16);
  background: var(--c-bg-subtitle);
}

.cta-section__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;
  width: 100%;
}

.cta-section__title {
  width: 100%;
  color: var(--c-text-primary);
  font-size: var(--fs-h3);
  font-weight: var(--fw-demibold);
  line-height: 32px;
  text-align: center;
}

.cta-section__desc {
  width: 100%;
  color: var(--c-text-primary);
  font-size: var(--fs-p);
  line-height: 32px;
  text-align: center;
}

.cta-section__thumb {
  width: 101px;
  height: 88px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   ページTOPへ  (Figma: common/totop — 375 × 286)
   2026-09 更新: 全幅ボタンから「キャラクター＋88pxの角丸ボタン」に変更。
   -------------------------------------------------------------------------- */
.totop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 10px var(--space-48);
  background: var(--c-lbl);
}

/* 掃除ロボに乗ったあんこう（背景アニメーションと同じコマ anime/anko_01〜10）が
   その場で回転し続ける。1回転 2秒（1コマ 0.2秒）＝背景で回転しながら走るときと同じ速さ。 */
.totop__chara {
  position: relative;
  width: 150px;
  height: 98px; /* 230 × 150 の比率 */
}

.totop__chara img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
}

.totop__chara img:first-child {
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .totop__chara img {
    animation: totop-anko 2s step-end infinite;
  }

  .totop__chara img:first-child {
    visibility: hidden;
  }

  .totop__chara img:nth-child(2) { animation-delay: 0.2s; }
  .totop__chara img:nth-child(3) { animation-delay: 0.4s; }
  .totop__chara img:nth-child(4) { animation-delay: 0.6s; }
  .totop__chara img:nth-child(5) { animation-delay: 0.8s; }
  .totop__chara img:nth-child(6) { animation-delay: 1.0s; }
  .totop__chara img:nth-child(7) { animation-delay: 1.2s; }
  .totop__chara img:nth-child(8) { animation-delay: 1.4s; }
  .totop__chara img:nth-child(9) { animation-delay: 1.6s; }
  .totop__chara img:nth-child(10) { animation-delay: 1.8s; }
}

/* 2秒のうち最初の 0.2秒だけ表示。コマごとに 0.2秒ずつ遅らせて順番に出す */
@keyframes totop-anko {
  0%   { visibility: visible; }
  10%  { visibility: hidden; }
  100% { visibility: hidden; }
}

.totop__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 10px;
  border: 2px solid var(--btn-secondary-stroke);
  border-radius: var(--radius-24);
  background: var(--c-wt);
  color: var(--btn-secondary-text);
  font-size: var(--fs-h4);
  font-weight: var(--fw-demibold);
  line-height: normal;
  text-align: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.totop__btn:hover {
  border-color: var(--btn-primary-stroke-hover);
  color: var(--btn-secondary-text-hover);
}

/* 2026/11/09: ページ送り（js/paging.js）で、ほかのページのカードを隠す */
[data-paging] [hidden] {
  display: none !important;
}

/* 2026/11/09: ボタンの文字が長くて幅に入りきらないとき（せまいスマホ）は、はみ出さずに折り返す。
   1行のときは今までどおり高さ 44px（上下の余白を 8px にして、行の高さを広げたぶんを吸収）。
   2行になったときも両端が半円のままになるよう、角丸は高さの半分以上にする */
.btn {
  height: auto;
  min-height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 999px;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

/* 2026/11/10: 動画のモーダル（js/main.js）。画面いっぱいの黒い背景に、16:9 のプレーヤーを大きく表示 */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgb(0 0 0 / 88%);
  animation: video-modal-in 0.25s ease-out both;
}

.video-modal__inner {
  position: relative;
  width: min(1200px, 100%, (100svh - 150px) * 16 / 9);
}

.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 8px 40px rgb(0 0 0 / 50%);
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* プレーヤーの上：左にタイトル、右に閉じるボタン */
.video-modal__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.video-modal__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: var(--fw-demibold);
  line-height: 1.4;
}

.video-modal__close {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: rgb(255 255 255 / 30%);
}

.video-modal__close span::before,
.video-modal__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.video-modal__close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.video-modal__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* モーダルを開いているあいだは後ろのページをスクロールさせない */
html.is-video-open,
html.is-video-open body {
  overflow: hidden;
}

@keyframes video-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}