/* ============================================
   style.css
   共通スタイル - tokens.css の変数を参照します
   ============================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ページ内アンカー（フッター「ページ上部」等）をスムーススクロール */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* テキストリンク：hover時にやや透過（ポインタ端末のみ） */
.ts-label-footer,
.site-footer__page-top,
.character-card__profile-link,
.character-detail__back-link,
.survey-form__note a,
.top-info__fine a {
  transition: opacity 0.15s ease;
}
@media (hover: hover) {
  .ts-label-footer:hover,
  .site-footer__page-top:hover,
  .character-card__profile-link:hover,
  .character-detail__back-link:hover,
  .survey-form__note a:hover,
  .top-info__fine a:hover {
    opacity: 0.6;
  }
}

/* SNSアイコン（フッターの丸ボタン／完了画面のシェアボタン）：hoverでやや透過＋わずかに浮く */
.site-footer__sns-btn,
.share-btn {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
  .site-footer__sns-btn:hover,
  .share-btn:hover {
    opacity: 0.7;
    transform: translateY(-2px);
  }
}

/* --- Base --- */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  line-height: var(--line-height-base);
}

/* ============================================
   Text styles（type ramp）— Figmaのテキストスタイルに準拠
   SPを基準に、PCで差があるものだけ 768px で上書き
   ============================================ */
.ts-heading-page    { font-size: 18px; font-weight: 700; line-height: 1.3; }   /* SP 20→18（ヘッダーと差をつける・PCは24） */
.ts-heading-detail  { font-size: 20px; font-weight: 700; line-height: 1.3; }
.ts-heading-result  { font-size: 28px; font-weight: 700; line-height: 1.3; }
.ts-heading-section { font-size: 18px; font-weight: 700; line-height: 1.3; }
.ts-heading-lead    { font-size: 15px; font-weight: 700; line-height: 1.5; }
.ts-title-card      { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ts-body-md         { font-size: 16px; font-weight: 400; line-height: 1.5; }
.ts-body-sm         { font-size: 14px; font-weight: 400; line-height: 1.75; }
.ts-label-button    { font-size: 16px; font-weight: 700; line-height: 1; }
.ts-label-cardbtn   { font-size: 14px; font-weight: 700; line-height: 1; }
.ts-label-field     { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ts-label-footer    { font-size: 14px; font-weight: 700; line-height: 1; }
.ts-label-md        { font-size: 12px; font-weight: 500; line-height: 1; }
.ts-link-card       { font-size: 14px; font-weight: 400; line-height: 1.5; }
.ts-link-sm         { font-size: 12px; font-weight: 400; line-height: 1.5; }
.ts-caption-company { font-size: 11px; font-weight: 400; line-height: 1.5; }
.ts-caption-fine    { font-size: 11px; font-weight: 400; line-height: 1.5; }
.ts-caption-xs      { font-size: 12px; font-weight: 400; line-height: 1.5; }
@media (min-width: 768px) {
  .ts-heading-page    { font-size: 24px; }   /* PC 32→24：ヘッダーと大きさが競合しないよう縮小 */
  .ts-heading-detail  { font-size: 24px; }
  .ts-heading-lead    { font-size: 16px; }
  .ts-title-card      { font-size: 16px; }
  .ts-label-footer    { font-size: 16px; }
  .ts-caption-company { font-size: 12px; }
}

/* --- Site Wrapper --- */
.site-wrapper {
  background: var(--color-bg-page);
  min-height: 100vh;
  min-height: 100dvh;   /* iOS Safari等：アドレスバー分を含めた実表示高さに追従（未対応は上の100vhにフォールバック） */
  display: flex;
  flex-direction: column;
}

/* --- Header（Figma: ロゴ中央・下線／PCは両サイドにガーランド）--- */
.site-header {
  background: var(--color-bg-header);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  overflow: hidden;
  transition: transform 0.3s ease;   /* 下スクロールで隠す/上スクロールで表示 */
}
/* スクロール追随で隠す（JSがトグル） */
.site-header--hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header__inner {
  max-width: var(--max-width-site);
  margin: 0 auto;
  padding: 12px var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  position: relative;
}
.site-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* ロゴ画像の出し分けは <picture> の source media（768px）が行うため、CSSは高さのみ指定する */
.site-header__logo {
  display: block;
  width: auto;
  height: 22px;
}
.site-header__garland { display: none; }
@media (min-width: 768px) {
  .site-header__inner { padding: 22px var(--space-md); }
  .site-header__logo { height: 40px; }
}
/* ガーランドはロゴ左右に余白がある広い画面のみ表示（狭い幅ではロゴに被るため非表示） */
@media (min-width: 900px) {
  .site-header__garland {
    display: block;
    position: absolute;
    top: -8px;
    width: calc(50% - 335px);
    height: auto;
    pointer-events: none;
  }
  .site-header__garland--left  { left: -10px;  right: auto; transform-origin: right top; transform: rotate(-12deg); }
  .site-header__garland--right { right: -10px; left: auto; transform-origin: left top;  transform: rotate(12deg); }
}
/* 旧ヘッダー（他ページが未改修の間だけ使用） */
.site-header__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* --- Footer（Figma: pop柄背景＋上ガーランド＋ロゴ/リンク/SNS/ページ上部/コピー）--- */
.site-footer {
  position: relative;
  margin-top: auto;
  background-color: var(--color-white);
  /* pop柄の上にveilを重ねて濃さを下げる。上=ミント#EDFBF8→下=白 のグラデで、コンテンツとの区切りをうっすら出す */
  background-image:
    linear-gradient(rgba(237, 251, 248, 0.4), rgba(255, 255, 255, 0.4)),
    url("img/ui/pop_full.png");
  background-size: cover;
  background-position: left 4px;
  background-repeat: no-repeat;
  overflow: hidden;
}
.site-footer__inner {
  position: relative;
  max-width: var(--max-width-site);
  margin: 0 auto;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.site-footer__logo {
  width: 160px;
  height: auto;
}
.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.site-footer__links a {
  color: var(--color-text-primary);
  text-decoration: none;
}
.site-footer__sns {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 359px;
  width: 100%;
}
.site-footer__sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}
.site-footer__sns-btn img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}
.site-footer__page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  align-self: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.site-footer__page-top-icon {
  width: 16px;
  height: 9px;
}
.site-footer__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
}
.site-footer__copy p {
  color: var(--color-text-secondary);
}

/* --- Page Content --- */
.page-content {
  flex: 1;
  max-width: var(--max-width-content);  /* 640px：フォーム等の間延び防止（Figma 261:2/87:7 準拠） */
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  width: 100%;
}
/* キャラ一覧だけはグリッドが広いので従来幅を維持（characters.html の main に付与）。
   以前は :has(#characterGrid) で判定していたが、Safariで再評価が遅れて
   640px幅のまま描画される事象があったため、クラス指定に変更（2026-08-04） */
.page-content--wide {
  max-width: var(--max-width-site);
}

/* --- Button --- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;             /* button と a で文字高さ・ボタン高さを統一（iOS Safariの行差でSEで高さがズレる対策） */
  -webkit-appearance: none;     /* iOS Safari の <button> 既定装飾を無効化して a と揃える */
  appearance: none;
  border-radius: var(--radius-btn);
  padding: var(--space-sm) var(--space-lg);
  width: 100%;
  min-height: 34px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--large {
  font-size: var(--font-size-md);   /* 18→16：mamasta標準ボタン */
  min-height: 48px;                 /* 58→48：mamasta標準ボタン高さ */
}
.btn--secondary {
  background: var(--color-white);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
/* 戻る（btn--large secondary）：mamastaの c-button-simple--back に合わせて枠を #888 に */
.btn--large.btn--secondary {
  border-color: #888;
}
/* ボタン内チェブロン（進む＝右端／戻る＝左端）。テキストは中央のまま端に絶対配置（mamasta準拠）。
   位置・高さは文字サイズ基準(em)でスケール。 */
.btn__chevron {
  position: absolute;
  top: 50%;
  right: 1.25em;
  transform: translateY(-50%);
  height: 0.85em;
  width: auto;
}
.btn__chevron--left {
  right: auto;
  left: 1.25em;
}
.btn--sm {
  font-size: var(--font-size-xs, 11px);
  min-height: 28px;
  padding: 4px var(--space-md);
  width: auto;
  gap: var(--space-xs);
}
.btn__ext-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.btn:disabled,
.btn--disabled {
  background: var(--color-btn-disabled);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
/* ボタンhover：ポインタ端末のみ・無効ボタンは除外（タッチの押しっぱなしhover防止） */
@media (hover: hover) {
  .btn:not(:disabled):not(.btn--disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  }
  .btn:not(:disabled):not(.btn--disabled):active {
    transform: translateY(0);
    box-shadow: none;
  }
}

/* --- Vote Tray（固定投票トレイ・Figma準拠：白背景＋上ボーダー＋影）--- */
.vote-tray {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
  z-index: var(--z-sticky-bar);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.vote-tray.is-visible {
  display: block;
}
.vote-tray__inner {
  max-width: var(--max-width-content);  /* 640px：コンテンツ幅に合わせる */
  margin: 0 auto;
  padding: 12px var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
/* 選び直すタブ（トレイ上端に飛び出す） */
.vote-tray__reset {
  position: absolute;
  top: -33px;   /* タブ下辺をトレイ上端ラインに1px重ねて継ぎ目を消す（高さ34px想定） */
  right: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-bg-card);
  /* トレイ上端のラインと繋がるように、下辺以外を同じ枠線で囲う */
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
}
.vote-tray__reset-icon { width: 11px; height: 11px; flex-shrink: 0; }
/* PCでは選び直すを大きく（Figma準拠：文字20・アイコン22・padding 11/20/18） */
@media (min-width: 768px) {
  .vote-tray__reset {
    font-size: 20px;
    line-height: 1.3;
    gap: var(--space-sm);
    padding: 11px 20px 11px 18px;
    top: -47px;   /* 高さ48px想定でトレイ上端ラインに1px重ねる */
  }
  .vote-tray__reset-icon { width: 22px; height: 22px; }
}
/* PCではトレイ全体を大きく（Figma準拠：スロット120・ヒント24/30・CTA26） */
@media (min-width: 768px) {
  .vote-tray__slot { width: 120px; height: 120px; padding: 8px; }
  .vote-tray__slot-remove { width: 30px; height: 30px; top: -9px; right: -9px; }
  .vote-tray__slot-remove::before { width: 13px; height: 2.6px; }
  .vote-tray__hint { font-size: 24px; }
  .vote-tray__hint-num { font-size: 30px; }
  /* 投票フォームへ（トレイCTA）は btn--large と統一済み（58px/18px）＝PC専用の拡大は撤去 */
}
.vote-tray__slots {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
}
.vote-tray__slot {
  position: relative;
  width: 90px;
  height: 90px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  flex-shrink: 0;
  padding: 6px;   /* キャラに少し余白（小さい枠なので控えめ） */
}
.vote-tray__slot.is-filled {
  border: 2.5px solid var(--color-border);
}
.vote-tray__slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius-card) - 2px);
  display: block;
}
.vote-tray__slot-remove {
  position: absolute;
  top: -6.5px;
  right: -6.5px;
  width: 26px;
  height: 26px;
  background: var(--color-text-primary);
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  border: none;
  cursor: pointer;
  z-index: 1;
}
.vote-tray__slot-remove::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 2.4px;
  background: var(--color-white);
  border-radius: 2px;
}
.vote-tray__hint {
  font-size: 13px; /* Figma準拠の特殊値（該当テキストスタイル無し・数字と混在） */
  color: var(--color-text-secondary);
  text-align: center;
  min-height: 1em;
}
.vote-tray__hint-num {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 2px;
}
.vote-tray__cta {
  position: relative;
  width: 100%;
  min-height: 48px;                 /* mamasta標準（投票する/戻ると統一・旧47px固定） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-md);   /* 16px：mamasta標準（旧16→18に上げていたのを戻す） */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  border: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.vote-tray__cta:disabled {
  background: var(--color-btn-disabled);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
/* 投票フォームへ のhover：.btn と同じ挙動（ポインタ端末のみ・無効時は除外） */
@media (hover: hover) {
  .vote-tray__cta:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  }
  .vote-tray__cta:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
  }
}

/* --- Vote Confirm Chars (投票確認・完了の3体表示) --- */
.vote-confirm-chars {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-lg);
}
.vote-confirm-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}
.vote-confirm-char__image-wrapper {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: var(--space-md);   /* 一覧カードと同じく画像に余白 */
}
@media (min-width: 768px) {
  .vote-confirm-char__image-wrapper { padding: var(--space-xl); }
}
.vote-confirm-char__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vote-confirm-char__name {
  font-size: var(--font-size-xs);      /* SP 12px */
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.vote-confirm-char__company {
  font-size: 11px;                     /* SP 11px（企業名は少し小さく） */
  text-align: center;
}
@media (min-width: 768px) {
  .vote-confirm-char__name    { font-size: 16px; }   /* PC キャラ名 16px */
  .vote-confirm-char__company { font-size: 12px; }   /* PC 企業名 12px */
}

/* --- Number Badge --- */
.number-badge {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  background: var(--color-white);
  padding: 0 var(--space-xs);
}

/* --- Button selected state --- */
.btn--selected {
  background: var(--color-bg-placeholder);
  color: var(--color-text-primary);
  border: 2px solid var(--color-primary);
}

/* --- Character Card Grid --- */
.character-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  list-style: none;
}
/* 各セル（li）を flex にして中の article を行の高さいっぱいに伸ばす
   （これで select-area 内の margin-top:auto ボタン下揃えが行内で効く） */
.character-grid > li { display: flex; }
@media (min-width: 768px) {
  .character-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .character-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Character Card --- */
.character-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.character-card__select-area {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  gap: var(--space-sm);
  cursor: pointer;
  flex: 1;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
}
.character-card.is-selected .character-card__select-area {
  background: var(--color-card-bg-selected);
}
.character-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
}
.character-card__select-badge[hidden] {
  display: none;
}
.character-card__check {
  width: 15px;
  height: 15px;
}
.character-card__select-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 27px;
  height: 27px;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  z-index: 1;
}
.character-card__image-wrapper {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-btn);
  padding: var(--space-md);
}
@media (min-width: 768px) {
  .character-card__image-wrapper { padding: var(--space-xl); }
}
.character-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.character-card__company {
  color: var(--color-text-secondary);
}
/* カード高さ：名前・企業名とも通常は詰めた高さ（min-height確保はしない）。
   長いテキストが出た行だけ、グリッドの行揃え＋ボタン下端揃え(margin-top:auto)で
   その横一列のカード高さが自動で揃う。名前は安全のため最大2行でクランプ、企業名は省略しない。 */
.character-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.character-card__select-area .btn {
  margin-top: auto;
}
/* 3体選択済みのとき、未選択カードを非活性に見せる（画像・テキストを透過） */
.character-card.is-dimmed .character-card__image-wrapper,
.character-card.is-dimmed .character-card__name,
.character-card.is-dimmed .character-card__company,
.character-card.is-dimmed .character-card__profile-link {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
/* カード内の選択トグル = カプセル（Button/Select） */
.character-card__select-area .btn {
  background: var(--color-white);
  color: var(--color-text-primary);
  border: 1.3px solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
}
.character-card__select-area .btn.btn--selected {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
/* 3体選択済みで押せない未選択ボタン＝UIキット非活性ボタンに合わせてグレー塗り */
.character-card__select-area .btn.btn--disabled {
  background: var(--color-btn-disabled);
  color: var(--color-text-secondary);
  border-color: var(--color-btn-disabled);
}
.character-card__profile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-align: center;
  padding: var(--space-sm) 0;
  width: 100%;
}
.character-card__profile-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --- Character Detail（モーダル中身・Figma準拠 258:2 / 259:2）--- */
.character-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.character-detail__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.character-detail__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.character-detail__right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.character-detail__image-wrapper {
  width: 150px;
  height: 150px;
  overflow: visible;
  background: var(--color-white);
  border-radius: 14px;
  position: relative;
  flex-shrink: 0;
  /* 選択中チェックを画像右上に出していた頃のクリアランス（margin-top:10px）は、
     マークを名前行へ移したため撤去（2026-08-05） */
}
.character-detail__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;               /* 枠のoverflow解除に伴い、画像自体を角丸に */
}
/* モーダル上部：右上＝閉じる（丸＋×）／中央＝キャラクター名。
   詳細モーダルに選択中マークは置かない（右上は閉じる専用。選択状態は「選択中」ボタンで示す）。
   一覧カード側のチェックバッジはそのまま（2026-08-05） */
.character-detail__name {
  width: 100%;
  text-align: center;
  /* 右＝閉じる（27px＋余白）のぶんを左右対称に確保。対称にすることで名前は必ず中央に来る */
  padding: 0 40px;
}
.character-detail__company-link {
  color: var(--color-text-secondary);
  text-align: center;
  text-decoration: none;
}
.character-detail__logo-wrapper {
  width: var(--logo-max-width);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-text-secondary);
}
.character-detail__logo-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.character-detail__profile {
  color: var(--color-text-primary);
  text-align: left;
}
/* 企業指定のコピーライト表記（任意・指定キャラのみ）。詳細モーダル最下部に小さく中央表示 */
.character-detail__copyright {
  margin-top: 12px;
  color: var(--color-text-secondary);
  text-align: center;
}
.character-detail__back-link {
  font-size: var(--font-size-sm);   /* Figma 256:31 SP/Body/SM=14 */
  color: #4d4d52;                   /* Figma: 落ち着いたグレー */
  text-decoration: none;            /* Figma: 下線なし（プレーンなテキストリンク） */
}
.character-detail__detail-link-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
/* モーダルの「選択」ボタン（Figma準拠：白地＋#333枠・角丸8。選択中はピンク枠） */
.character-detail__select-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);   /* 一覧カードボタンと統一（8px 24px） */
  min-height: 34px;                            /* 一覧カードボタン（.btn）と統一 */
  border: 1.3px solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-text-primary);
  cursor: pointer;
}
.character-detail__select-btn.is-selected {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.character-detail__select-btn:disabled {
  background: var(--color-btn-disabled);      /* 一覧カードの非活性ボタンと同じグレー塗り */
  border-color: var(--color-btn-disabled);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
/* 選び直す（フォーム）・モーダル選択ボタンのhover（.btnとは別クラスなので個別付与） */
.reselect-btn,
.character-detail__select-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
@media (hover: hover) {
  .reselect-btn:hover,
  .character-detail__select-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  }
  .reselect-btn:active,
  .character-detail__select-btn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
  }
}
/* PC: 2カラム（画像220の左カラム｜プロフィール＋選択の右カラム） */
@media (min-width: 768px) {
  .character-detail { align-items: stretch; gap: 20px; }
  .character-detail__body { flex-direction: row; align-items: stretch; gap: 20px; }
  .character-detail__left { flex: 0 0 220px; }
  .character-detail__right { flex: 1; }
  .character-detail__image-wrapper { width: 220px; height: 220px; }
  /* Figma 259:3：ロゴ（左）と選択ボタン（右）を各カラム下部に揃える */
  .character-detail__logo-wrapper { margin-top: auto; }
  .character-detail__select-btn { margin-top: auto; }
}

/* SE（≤375px）：選択中トレイ表示で詳細モーダルが縦に収まらずスクロールが要る問題への対応。
   画像縮小＋プロフィール文字縮小＋gap/padding圧縮で、スクロールなしで見えるようにする。 */
/* --- SP全体：詳細モーダルの表示枠を広げる ---
   もともと ≤375px（SE）だけに入れていた「横の二重寄せ解消」「縦余白の回収」を、
   SP全体に適用する。430px幅の端末（iPhone 15 Pro Max 等）で3体選択＝トレイが高いとき、
   モーダルが狭く・低くなって主ボタンが表示枠外に出ていたため（2026-08-04）。
   base指定(.modal-overlay / .modal)がこれより後方＝後勝ちなので、詳細度を上げて上書きする。 */
@media (max-width: 767px) {
  /* 縦：overlay上下24→12px。それに合わせて modal の max-height 控除も48→24pxへ（縦を24px回収） */
  .modal-overlay.is-open { padding: 12px 16px; padding-bottom: calc(12px + var(--tray-height, 0px)); }
  .modal-overlay .modal {
    /* 横：modalの二重寄せ(width:calc(100% - space-xl))を解消。左右はoverlayの16pxに一本化（本文幅+32px） */
    width: 100%;
    max-height: calc(100vh - 24px - var(--tray-height, 0px));
    max-height: calc(100dvh - 24px - var(--tray-height, 0px));
  }
  /* トレイで枠が低くなっても収まるよう中身を控えめに詰める（≤375pxのSE指定ほどは小さくしない） */
  .modal .modal__scroll-area { padding: 16px; }
  /* 紹介文のサイズは base（14px）のまま。2カラム化で縦に余裕ができたため、
     一時的に入れていた13pxへの縮小は撤去（2026-08-05） */
  /* SPもPCと同じ2カラム（左：画像・企業名・ロゴ／右：紹介文・詳しくはこちら・選択ボタン）。
     縦積みだと縦に伸びてボタンが枠外に出やすく、ボタンも横幅いっぱいに引き伸ばされていた */
  .character-detail__body { flex-direction: row; align-items: stretch; }
  .character-detail__left { flex: 0 0 45%; }
  .character-detail__right { flex: 1 1 0; min-width: 0; width: auto; }
  /* 画像は左カラムの幅いっぱい（正方形を維持） */
  .character-detail__image-wrapper { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  /* ロゴは左カラムに収める（固定144pxだとカラムからはみ出す）。高さは44→34px */
  .character-detail__logo-wrapper { width: 100%; height: 34px; margin-top: 0; }
  /* 下寄せは「企業名＋ロゴ」のセット単位でかける。
     ロゴ単体に margin-top:auto を入れると、左カラムが右カラム（紹介文）の高さに
     引き伸ばされたぶん company↔logo の間だけが開いてしまうため（最大38px・2026-08-05） */
  .character-detail__company-link { margin-top: auto; }
  .vote-tray__slot { width: 72px; height: 72px; }
  /* 主ボタンはモーダル下端に貼り付けて常に見せる（詰めだけでは画面高によって枠外に出てしまうため）。
     背後の文字と重ならないよう、白のリング＋やわらかい影を敷く。 */
  .character-detail__select-btn {
    /* 紹介文が短いとボタンが上に上がってしまうため、右カラムの下端に揃える */
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 1;
    box-shadow: 0 0 0 8px var(--color-white), 0 -6px 10px -6px rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 375px) {
  /* パレット（下部トレイ）のスロット画像を縮小＝トレイ高を下げてモーダルの表示枠を広げる */
  .vote-tray__slot { width: 54px; height: 54px; padding: 4px; }
  .vote-tray__slots { gap: var(--space-md); }
  /* 詳細モーダル：トレイ表示中でもプロフィールをスクロールなしで見せる（画像/文字/余白を調整） */
  /* base指定(.modal__scroll-area)が後方にあり後勝ちするため、詳細度を上げて確実に効かせる */
  .modal .modal__scroll-area { padding: 8px 16px 16px; }   /* 下は8pxだと詰まって見えるため16pxに */
  /* モーダル外側の余白（横の二重寄せ解消・縦24px回収）は ≤767px の共通指定に移動済み */
  .character-detail { gap: 6px; }
  .character-detail__body { gap: 6px; }
  .character-detail__left { gap: 6px; }
  .character-detail__right { gap: 8px; }
  .character-detail__name {
    font-size: 14px;                                    /* 20→14：SEでは名前を縮める（ts-heading-detail） */
    min-height: 36px;                                   /* 2カラム化で紹介文が上まで来るため、右上の閉じるボタン(32px)と重ならない高さを確保 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 画像サイズは ≤767px の2カラム指定（左カラム幅いっぱい）に任せる。
     以前はSEだけ80px固定にして縦を稼いでいたが、2カラム化で縦に余裕ができたため撤去 */
  .character-detail__logo-wrapper { height: 28px; }
  /* 紹介文の縮小（12px）も撤去：2カラム化でSEでもスクロールなしに収まる（2026-08-05） */
  /* 選択ボタンの下揃え（margin-top:auto）は ≤767px の共通指定に任せる */
  /* SEでは小さい画面に対してマークが大きく見えるので、チェック/マイナスを縮小 */
  .character-card__select-badge { width: 20px; height: 20px; }
  /* SEは左右そろえて22pxに縮める（閉じる／選択中マークは常に同じ大きさ・同じ位置） */
  .modal__close { width: 22px; height: 22px; }
  .modal__close-icon { width: 11px; height: 11px; }
  .character-card__check { width: 12px; height: 12px; }
  .vote-tray__slot-remove { width: 20px; height: 20px; }
  .vote-tray__slot-remove::before { width: 9px; height: 2px; }
}

/* --- Sort Bar --- */
.sort-bar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.sort-bar__select-wrapper {
  position: relative;
  flex: 1;
}
.sort-bar__select-wrapper::after {
  content: '▼';
  font-size: 10px;
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.sort-bar__select {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-xl) 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  appearance: none;
  -webkit-appearance: none;
}
.sort-bar__select--active {
  background: var(--color-bg-placeholder);
  border-color: transparent;
}

/* --- Page Header（Figma: 見出し SP20/PC32・PCは中央寄せ）--- */
.page-header {
  margin-bottom: var(--space-lg);
}
.page-header__title {
  margin-bottom: var(--space-sm);
}
@media (min-width: 768px) {
  .page-header { text-align: center; }
  /* PC本文は Body/MD（16・行間1.5） */
  .page-header__desc { font-size: 16px; line-height: 1.5; }
}
/* SP専用の改行（PCでは無効化して自然改行に） */
@media (min-width: 768px) {
  .br-sp { display: none; }
}

/* --- Top Page --- */
/* ヒーローKV + モーション（動きの仕様は design.md 参照 / Figma HWVNO… 87:3 準拠） */
.top-hero {
  /* モーション用イージング／装飾アクセント色（tokens.css へ移設可） */
  --hero-ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
  --hero-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hero-sparkle: #ffd800;
  /* 内容（タイトル・説明文）の最大幅。内容は狭く締める */
  --hero-content-max: 720px;
  /* pop_hero.png の実寸(2000px)。ここまでは全幅表示・これを超える幅でだけ左右フェード */
  --hero-pop-max: 2000px;
  /* ガーランド(ハの字・garland_long.png×2/画像に10°)。1枚あたりの幅＝画像のネイティブ相当。
     左右2枚を中央で突き合わせて山にするので、全体は約2倍(≒4000px)ぶんが左右にはみ出す（ヒーローで見切れ） */
  --hero-garland-piece: 2000px;
  background: var(--color-white);
  overflow: hidden;
  position: relative;
}
.top-hero__inner {
  max-width: var(--hero-content-max);
  margin: 0 auto;
  padding: 64px var(--space-md) var(--space-2xl);
  position: relative;
  z-index: 2;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* pop装飾：実寸2000pxまでは全幅で中央表示（フェード無し）。2000px超のときだけ左右をフェード。
   登場時に 1 → 0.4 へ薄くなる */
.top-hero__pop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--hero-pop-max);
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  animation: hero-pop-dim 0.6s var(--hero-ease-out) 1.15s forwards;
}
/* ビューポートが pop_hero の実寸(2000px)を超えたら、pop の左右をフェードして背景(白)へ馴染ませる */
@media (min-width: 2000px) {
  .top-hero__pop {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* ガーランド：PC(≥1024)=garland_long.png×2の幅広ハの字／SP(≤1023)=garland.png×2の短いハの字。
   登場は「上から降りてくる」（コンテナごと translateY ドロップ）。 */
.top-hero__garland {
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  height: 160px;
  z-index: 1;
  pointer-events: none;
  animation: hero-garland-drop 0.7s var(--hero-ease-out) 0.9s backwards;
}

/* PC 幅広（garland_long ×2・画像に10°）。中央で突き合わせ、右は左右反転。外側は画面外へ（ヒーローで見切れ） */
.top-hero__garland-run {
  position: absolute;
  top: 0;
  width: var(--hero-garland-piece);   /* 1枚＝画像ネイティブ相当(2000px) */
  max-width: none;                     /* グローバルの img{max-width:100%} を解除 */
  height: auto;
  right: 50%;                          /* 両ピースとも「右端＝中央」に錨 */
  transform-origin: right top;
}
.top-hero__garland-run--left  { transform: scaleX(1); }
.top-hero__garland-run--right { transform: scaleX(-1); }  /* 中央から右へ反転して山に */

/* SP 短い（garland.png ×2・±15°ドレープ）。既定は非表示、SPで表示 */
.top-hero__garland-sp {
  display: none;
  position: absolute;
  top: 0;
  width: 48%;
  height: auto;
}
.top-hero__garland-sp--left  { right: 60%; transform-origin: right top; transform: rotate(-15deg); } /* 60%=中央を少し空ける */
.top-hero__garland-sp--right { left: 60%;  transform-origin: left top;  transform: rotate(15deg); }

/* 表示切替：SPは短いガーランド、PCは幅広ガーランド */
@media (max-width: 1023px) {
  .top-hero__garland-run { display: none; }
  .top-hero__garland-sp  { display: block; }
}

@keyframes hero-garland-drop {
  from { transform: translateY(-150px); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}

/* タイトル看板：25% → 100% + フェード（バウンド） */
/* mamastaロゴ（看板から分離・ママスタ本体への別タブリンク）。
   看板内の比率（mamasta 282 : 看板幅 650）でタイトルと同じ基準幅に対して配置。 */
.top-hero__brand {
  position: relative;
  z-index: 2;
  display: block;
  width: 80%;
  max-width: 520px;
  margin: 0 auto 18px;   /* 看板の mamasta↔タイトル間（約24px×表示縮尺）に相当 */
  text-align: center;
  line-height: 0;
  /* mamastaロゴを先行させる：タイトルと同じpopだが開始を早め（0s）、ロゴ→タイトルの順に登場 */
  opacity: 0;
  transform: scale(0.2);
  animation: hero-title-in 0.85s var(--hero-ease-out) 0s forwards;
}
.top-hero__brand img {
  display: block;
  width: 43.4%;          /* 282/650：看板内の mamasta の横比率 */
  height: auto;
  margin: 0 auto;        /* ブロックimgのため中央寄せ */
}
.top-hero__title {
  position: relative;
  z-index: 2;
  margin: 0;
  width: 80%;
  max-width: 520px;
  opacity: 0;
  transform: scale(0.2);
  animation: hero-title-in 0.85s var(--hero-ease-out) 0.3s forwards;
}
.top-hero__title img {
  display: block;
  width: 100%;
  height: auto;
}

/* 説明文：ヒーロー内・そっとフェードイン（装飾と同タイミング）
   Figma実値：Bold / SP15px→PC22px / lh1.8 / #231815（PCはNoto Sans JP・SPは源柔ゴシック→webフォント保留のためNotoで統一） */
.top-hero__lead {
  position: relative;
  z-index: 2;
  margin: var(--space-md) 0 0;
  text-align: center;
  font-size: clamp(15px, 1.8vw, 18px);  /* PC上限 22→18（ママスタ標準 h3=18 に寄せる） */
  font-weight: var(--font-weight-bold);
  line-height: 1.8;
  color: #231815; /* Figma: 説明文カラー（生値） */
  opacity: 0;
  animation: hero-lead-in 0.6s var(--hero-ease-out) 1.15s forwards;
}
@keyframes hero-lead-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 投票期間チップ：白地・ピンク枠のピル。説明文の後に右からシュッとスライドイン */
.top-hero__chip {
  position: relative;
  z-index: 2;
  margin: var(--space-md) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  border: 6px solid #ffe0e7; /* Figma: chip border（生値・PC6px/SP4px） */
  border-radius: 100px; /* Figma: chip はピル（radius-btn とは別） */
  padding: clamp(12px, 1.25vw, 16px) clamp(28px, 2.5vw, 32px); /* Figma: SP 12/28 → PC 16/32 */
  font-size: clamp(14px, 1.9vw, 18px); /* SP14 → PC18（上限24→18に縮小） */
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(64px);
  animation: hero-chip-in 0.55s var(--hero-ease-out) 1.5s forwards;
}
.top-hero__chip-label {
  color: var(--color-primary); /* Figma: #f92962 */
  font-weight: var(--font-weight-bold);
}
.top-hero__chip-date {
  color: var(--color-text-primary); /* Figma: #333 */
  font-weight: 900; /* Figma: 日付は Heavy/Black（源柔ゴシック Heavy → Noto Sans JP Black で代替） */
}
@keyframes hero-chip-in {
  to { opacity: 1; transform: translateX(0); }
}

/* キラキラ：PC限定でゆるく明滅（4点星・品よく） */
.top-hero__sparkles { display: none; }
.top-hero__sparkle {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: var(--hero-sparkle);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  animation: hero-twinkle 2.4s ease-in-out infinite;
}
.top-hero__sparkle--1 { left: 11%; top: 26%; }
.top-hero__sparkle--2 { right: 12%; top: 20%; width: 14px; height: 14px; animation-delay: 0.5s; }
.top-hero__sparkle--3 { left: 17%; top: 62%; width: 15px; height: 15px; animation-delay: 1s; }
.top-hero__sparkle--4 { right: 16%; top: 58%; animation-delay: 1.5s; }
.top-hero__sparkle--5 { left: 52%; top: 12%; width: 13px; height: 13px; animation-delay: 0.8s; }
@keyframes hero-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1); }
}
/* PC（1024px〜）でのみ表示。tokens.css の --bp-pc と同値 */
@media (min-width: 1024px) {
  .top-hero__sparkles { display: block; }
  /* B7: PCファーストビュー(基準850px)にCTAを収める（ヒーロー上下余白を圧縮）。
     カルーセル/CTAの上書きは各基本ルールより後ろ（下記の別ブロック）で行う。 */
  .top-hero__inner { padding-top: 44px; padding-bottom: 28px; }   /* 64/48 → 44/28 */
}

@keyframes hero-title-in {
  0%   { opacity: 0; transform: scale(0.2); }
  50%  { opacity: 1; transform: scale(1.15); }
  68%  { transform: scale(0.92); }
  84%  { transform: scale(1.05); }
  93%  { transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes hero-pop-dim {
  to { opacity: 0.4; }
}
/* モーション無効設定を尊重（最終状態で静止表示） */
@media (prefers-reduced-motion: reduce) {
  .top-hero__pop { animation: none; opacity: 0.4; }
  .top-hero__brand { animation: none; opacity: 1; transform: none; }
  .top-hero__title { animation: none; opacity: 1; transform: none; }
  .top-hero__lead { animation: none; opacity: 1; transform: none; }
  .top-hero__chip { animation: none; opacity: 1; transform: none; }
  .top-hero__garland { animation: none; transform: none; opacity: 1; }
  .top-hero__sparkle { animation: none; opacity: 0.6; transform: none; }
}

.top-character-icons {
  padding: 0;
  /* スライダーだけ全幅：page-content(1000px)の外へブレイクアウト */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* 横スクロールで流れるカルーセル（自動再生・途切れなくループ） */
.top-character-icons__marquee {
  overflow: hidden;
}
.top-character-icons__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  width: max-content;
  gap: clamp(12px, 1.56vw, 20px); /* Figma: SP 12px / PC 20px */
  animation: hero-marquee 48s linear infinite;   /* 旧45→60→52→48（もう少し速く・45寄り） */
}
@keyframes hero-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }  /* 1セット分だけ流す（JSがpx設定） */
}
.top-character-icons__item {
  flex: 0 0 auto;
  width: clamp(88px, 20vw, 260px); /* Figma: SP 88px / PC 260px */
  aspect-ratio: 1 / 1;
  background: var(--color-white);
  border-radius: 16px; /* Figma: slot rounded-16 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-character-icons__item img {
  width: 62%; /* Figma: 顔160/枠260 ≒ 61.5%（中央配置・上下左右に余白） */
  height: 62%;
  object-fit: contain;
}
/* SPのみ：全幅スクロールの左右をフェード（Figma SP fade-left/right 準拠） */
@media (max-width: 1023px) {
  .top-character-icons__marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}
/* カルーセルは主役演出のため、Reduce Motion でも流し続ける（実機で「動かない」を防ぐ）。
   ゆっくり一定速の装飾スクロールで、明滅・急な動きは無いため常時再生でも許容。 */

.top-cta {
  padding: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
/* TOP CTAボタン：Figma PC/Label/Hero（Noto Sans JP Bold 40px・lh100%）＋上下24px */
.top-cta .btn--large {
  font-size: clamp(20px, 3.1vw, 28px);  /* PC上限 40→28 に縮小 */
  line-height: 1;
  min-height: 0;
  padding-block: clamp(14px, 1.9vw, 20px);  /* 上限24→20（フォント縮小に合わせ） */
}
/* B7: PCファーストビュー(基準850px)にCTAを収めるための詰め（各基本ルールより後ろに置いて確実に上書き） */
@media (min-width: 1024px) {
  .top-character-icons__item { width: clamp(160px, 17vw, 220px); } /* 上限260→220 */
  .top-cta { padding-top: 10px; }                                  /* 16 → 10 */
  /* CTAを上へ：TOPは page-content 上余白を0に（カルーセルのpaddingも0＝base側で撤去済み） */
  .page-content--top { padding-top: 0; }
}

/* SP専用の改行（PCでは無効）。ヒーロー説明文の改行位置調整に使用 */
.br-sp {
  display: none;
}

/* SP専用：下部固定の投票ボタン（スクロール追随）。PCでは非表示 */
.sp-sticky-cta {
  display: none;
}
@media (max-width: 1023px) {
  /* SP：説明文を指定位置で改行 */
  .br-sp {
    display: inline;
  }
  /* SP：ガーランドが小さく上に切れて見えないため位置を下げる */
  .top-hero__garland {
    top: -10px;
  }
  /* SP：チップは小さいので枠を細く（Figma SPは4px） */
  .top-hero__chip {
    border-width: 4px;
  }
  /* SP：ヒーローの左右フェード（pop・ガーランド）はPC限定にする＝SPは端まで見せる */
  .top-hero__pop,
  .top-hero__garland {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* SP：ヒーロー下〜カルーセルの間隔を詰める（余白が多すぎたため。共有の.page-content上余白24pxは維持） */
  .top-hero__inner {
    padding-bottom: var(--space-sm); /* 48 → 8 */
  }
  /* SP：TOPのみ page-content 上余白も除去（他ページの見出し上余白は維持）。
     ヒーロー↔カルーセルは hero下8 + カルーセル上16(既定) ＝ 約24px の間隔 */
  .page-content--top {
    padding-top: 0;
  }
  /* SPではインラインCTAを隠し、フロートに一本化（Figma準拠） */
  .top-cta {
    display: none;
  }
  .sp-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky-bar);
    padding: 12px var(--space-md);
    background: var(--color-white);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  }
  .sp-sticky-cta__btn {
    width: 100%;
    min-height: 47px;
    font-size: var(--font-size-md);
    line-height: 1;
  }
  /* フロート分の余白を確保（末尾コンテンツが隠れないように）。
     下部固定CTAを持つTOPのみに限定（一覧/フォーム/完了は余白を出さない） */
  .site-wrapper--sticky-cta {
    padding-bottom: 84px;
  }
}

/* ===== スマホ幅（≤430px）専用セクション ===== */
@media (max-width: 430px) {
  /* 投票期間チップ：スマホ幅はラベル・日付とも12pxに統一して1行に収める（見切れ防止・375〜430カバー） */
  .top-hero__chip {
    font-size: 12px;
  }
}
/* SEサイズ（iPhone SE 第2/3世代＝375px 基準・≤375）：投票期間チップの詰め。
   375pxでも左右余白がほぼ無く「パンパン」なため縮小（nowrap維持で日付は1行）。320pxも含む。 */
@media (max-width: 375px) {
  .top-hero__chip {
    font-size: 11px;
    padding: 8px 12px;
    border-width: 3px;
    gap: 4px;
  }
  /* ヒーロー上部の空きが広いので上パディングを圧縮（SE=375含む） */
  .top-hero__inner {
    padding-top: var(--space-xl);   /* 64 → 32 */
  }
}
/* ≤360px 専用：説明文の縮小（狭い幅で3行目が余分に折れる件の保険。375は15pxで4行に収まるため対象外） */
@media (max-width: 360px) {
  .top-hero__lead {
    font-size: 13px;
  }
}
.top-cta__lead {
  text-align: center;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* 賞品バナー：同じ4要素（吹き出し／タイトル／イラスト／本文）を SP と PC で配置替え。
   grid-template-areas を切り替えるだけで DOM は共通。SP/PC とも Figma 準拠。
   ロゴ書体は Gen Jyuu Gothic 指定だが webフォント未使用のため本文は Noto 代替。 */
.top-prize {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "bubble title  title"
    "lead   lead   illust";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  padding: 16px 0;      /* 左右は親.page-contentの余白に任せる（二重パディング回避） */
}
.top-prize__bubble {
  grid-area: bubble;
  width: 96px;
  height: auto;
}
.top-prize__title {
  grid-area: title;
  width: 100%;
  height: auto;
}
.top-prize__illust {
  grid-area: illust;
  width: 67px;
  height: auto;
  justify-self: end;
}
.top-prize__lead {
  grid-area: lead;
  margin: 0;
  color: #666;
  font-weight: 500;
  font-size: 15px;      /* Figmaは16px。Noto代替が横広なため1px詰めてFigmaの3行構成を維持 */
  line-height: 1.4;
}
/* 賞品は2つ（アマギフ／ノベルティ）を対等に。区切り線は使わず余白で分離し、賞品名＋当選数をペアで見せる */
.top-prize__prize {
  margin: 0 0 14px;  /* 2賞の間隔 */
}
.top-prize__note {
  margin: 8px 0 0;
  font-size: 13px;
  color: #888;       /* 自動エントリーの注記は控えめに */
}
/* 本文内で単位を割らない：円分/名様は分割禁止 */
.top-prize__unit,
.top-prize__num {
  white-space: nowrap;
}
.top-prize__amount {
  color: #ff1b59; /* Figma賞品セクション準拠。※サイト基調ピンク #F92962(--color-primary) と微差 */
  font-weight: 900;
  font-size: 24px;
}
.top-prize__num {
  font-weight: 900;
  font-size: 18px;
}
.top-prize__unit {
  font-weight: 900;
  font-size: 14px;
}
/* タブレット〜狭いPC窓（≥768px）：タイトル図と本文の間が詰まって見えるため広げる（スマホは4pxのまま） */
@media (min-width: 768px) {
  .top-prize { row-gap: 16px; }
}
/* PC（≥1024px＝.br-sp と同じ境界）：Figma 準拠の横バナー。
   1行目＝吹き出し｜タイトル｜イラストを両端寄せ、2行目＝本文を全幅。金額(1,000)と人数を太字（SP準拠）。 */
@media (min-width: 1024px) {
  .top-prize {
    max-width: 640px;
    margin: 0 auto;
    grid-template-areas:
      "bubble title illust"
      "lead   lead  lead";
    column-gap: 16px;
  }
  .top-prize__bubble { width: 128px; }
  .top-prize__title  { justify-self: center; max-width: 375px; }
  .top-prize__illust { width: 76px; }
  .top-prize__lead   { font-size: 16px; }
  /* 1,000はSPと同じ24px（基本ルールを継承）。旧Figma PC指定の18pxはFBにより廃止 */
  .top-prize__num    { font-size: 16px; font-weight: 900; } /* 10・単位もSP同様に太字（サイズはPC本文と揃え16px） */
  .top-prize__unit   { font-size: 16px; font-weight: 900; }
}

/* info：Figma準拠のカードレイアウト（投票方法＋投票期間は2カラム、注意事項は全幅／SPは縦積み） */
.top-info {
  padding: var(--space-lg) 0 clamp(32px, 4vw, 56px); /* Figma: 下 pb-56 */
}
.top-info__inner {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma: カード間 16px */
}
.top-info__row {
  display: flex;
  flex-direction: column; /* 全幅で縦積み（投票方法／投票期間も1列） */
  gap: 16px;
}
/* カード：白地・#e9e9e9枠・角丸8px。見出しは通常フロー（上詰め）＋padding全方向均一 */
.top-info__card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light); /* Figma: #e9e9e9 */
  border-radius: var(--radius-btn); /* Figma: 8px */
  padding: clamp(16px, 2vw, 24px); /* 全方向均一（見出しを通常フロー化したため上の余白詰め） */
}
.top-info__card-heading {
  margin: 0 0 16px;                       /* 通常フロー。見出し下に本文との余白 */
  font-weight: var(--font-weight-bold); /* 源柔ゴシック Bold → webフォント保留のため Noto Bold */
  font-size: clamp(16px, 2.6vw, 18px);   /* SP16 / PC18（Figma PC/Heading/Section=18 に一致） */
  line-height: 1.2;
  color: #000; /* Figma: 見出しは text-black */
}
.top-info__card-body {
  font-size: 14px; /* SP/PC とも14px固定（PC16pxは大きく読みにくいため詰めた） */
  line-height: 1.8;                     /* Figma: lh1.8 */
  color: var(--color-text-primary);     /* Figma: #333（SPは#737373だが#333で統一） */
}
.top-info__card-body p {
  margin: 0;
}
.top-info__card-body strong {
  font-weight: var(--font-weight-bold);
}
/* 注記（Amazon）：Figma PC/Caption/Company 12px・SP/Caption/Fine 11px / Noto Sans JP Regular */
.top-info__fine {
  font-size: clamp(11px, 1.2vw, 12px);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
}
.top-info__fine p {
  margin: 0;
}
.top-info__fine a {
  text-decoration: underline;
  color: inherit;
}
/* カードは全ブレークポイントで縦積み（投票方法／投票期間／注意事項を1列に） */

/* --- Vote Complete --- */
.vote-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.vote-complete__title {
  /* サイズは ts-heading-page で統一（一覧「エントリーキャラクター一覧」等と揃える・SP20/PC32） */
  font-weight: var(--font-weight-bold);
}
.vote-complete__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.vote-complete__char-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.vote-complete__share-section {
  width: 100%;
  background: var(--color-card-bg-selected);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-card);
}
.vote-complete__share-title {
  color: var(--color-primary);
  font-size: var(--font-size-md);   /* Figma PC/Heading/Lead=16px */
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.share-buttons {
  display: flex;
  justify-content: space-between;   /* 均等配置。max-widthで間隔を調整 */
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  text-decoration: none;   /* Figma: 丸枠なし・アイコンのみ・29px（フッターSNSと違い白円なし） */
}
.share-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Static Page (Privacy / Terms) --- */
.static-page__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
}
.static-page__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}
.static-page__body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* --- 背景スクロールのロック（モーダル表示中。JSが body に付与）---
   iOS Safari では overflow:hidden だけでは止まらないため body 自体を固定する。
   top は JS がスクロール位置分だけマイナスで入れる。 */
body.is-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* --- Modal Overlay --- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-modal-overlay);
  overscroll-behavior: contain;   /* モーダル内スクロールが背景に伝播しないように */
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  /* 固定トレイの上にモーダルを収める（トレイ高さ分を下に空ける） */
  padding-bottom: calc(24px + var(--tray-height, 0px));
}
@media (min-width: 768px) {
  .modal-overlay {
    align-items: center;
    padding: 40px 16px;
    padding-bottom: calc(40px + var(--tray-height, 0px));
  }
  /* PCは上下40+40=80pxの余白に合わせる（SPは48px） */
  .modal {
    max-height: calc(100vh - 80px - var(--tray-height, 0px));
    max-height: calc(100dvh - 80px - var(--tray-height, 0px));
  }
}
.modal-overlay.is-open {
  display: flex;
}

/* --- Modal --- */
.modal {
  background: var(--color-white);
  border-radius: var(--radius-card);
  width: calc(100% - var(--space-xl));
  max-width: var(--max-width-modal);
  position: relative;
  z-index: var(--z-modal);
  /* SPはオーバーレイ余白が上下24+24=48px。以前はPC用の80pxを引いていてモーダルが32px小さかった→48pxに */
  max-height: calc(100vh - 48px - var(--tray-height, 0px));
  max-height: calc(100dvh - 48px - var(--tray-height, 0px)); /* iOS Safari：バー表示時の実高さに収める（未対応は上の100vhにフォールバック） */
  display: flex;
  flex-direction: column;
}
.modal__scroll-area {
  overflow-y: auto;
  overscroll-behavior: contain;   /* 端まで送っても背景がスクロールしないように */
  padding: 20px 20px 24px;
  flex: 1;
}
.modal__footer {
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.modal__close {
  position: absolute;
  top: var(--space-md);
  /* 右上に配置（カード型モーダルは右上に閉じるが慣用のため。2026-08-05にFBで左上→右上へ戻した） */
  right: var(--space-md);
  /* モーダル内の position 指定要素がDOM上あとに来ると上に重なってタップを奪うため、常に前面に置く */
  z-index: 2;
  /* 見た目は「グレーの丸＋細い×」。×単体は当たりが強いので丸に載せて印象をやわらげる */
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--color-bg-placeholder);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  line-height: 1;
}
/* タップ領域は見た目の丸（27px）より広く取る（45px相当）。
   ×のSVGだけが反応して押しにくい状態を避けるための拡張。見た目は変わらない */
.modal__close::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.modal__close-icon {
  /* 主張しすぎないよう小さめ（丸27pxの中で13px・線幅1.8） */
  width: 13px;
  height: 13px;
}
.modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-base);
}
.modal__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}
.modal__sub-action {
  display: flex;
  justify-content: center;   /* Figma 394:666: 選び直すは中央 */
  margin-bottom: var(--space-sm);
}
.modal__sub-action--bottom-gap {
  margin-bottom: var(--space-lg);
}
.modal__text-link {
  font-size: var(--font-size-sm);
  text-decoration: underline;
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs) 0;
}
/* 投票フォームの「選び直す」ボタン（Figma 502:928：白地＋#e9e9e9枠＋↻＋ラベル16px） */
.reselect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}
.reselect-btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Survey Form --- */
.survey-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);   /* 設問どうしの間隔＝24px */
}
.field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;   /* Figma FormField */
}
/* hidden 属性を効かせる（display:flex が [hidden] の display:none を上書きしてしまうため） */
.field-wrapper[hidden] {
  display: none;
}
.field-wrapper label {
  font-size: var(--font-size-sm);   /* Figma SP/Label/Field=14 Bold */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.field-sub-label {
  font-size: var(--font-size-xs);   /* 12px */
  color: #737378;                   /* Figma サブラベル */
}
.field-sub-label--with-gap {
  margin-top: var(--space-sm);
}
/* 居住地：都道府県＋市区町村を1セットに見せるグループ。
   設問どうしの間隔（.survey-form の gap 24px）より内側を狭くしないと、
   2つが別々の設問に見えて市区町村の選択漏れが起きるため詰めている。 */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-group .field-sub-label--with-gap {
  margin-top: 4px;   /* 都道府県ブロック↔市区町村ブロック＝計8px（設問間24pxの1/3） */
}
.field-wrapper .error-message {
  font-size: var(--font-size-xs);
  color: #cc0000;
  min-height: 1em;
}
/* エラーが無いときは空行ごと畳む。
   min-height:1em（12px）＋ .field-wrapper の gap 6px が常に確保されるため、
   畳まないと必須項目（メアド・性別・年代）の下だけ 18px 余分に広くなり、
   任意項目（お子様の人数など）と揃わない。
   居住地では都道府県と市区町村が離れて見える原因にもなる。 */
.field-wrapper .error-message:empty {
  display: none;
}
.field-badge {
  display: inline-block;
  font-size: 11px;                  /* Figma Badge 11px */
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  padding: 2px 8px;                 /* Figma px8 py2 */
  border-radius: var(--radius-badge);
  vertical-align: middle;
  margin-left: var(--space-xs);
}
.field-badge--required {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}
.field-badge--optional {
  background: #99999e;              /* Figma 任意バッジ=#99999e */
  color: var(--color-white);
}
.text-input {
  width: 100%;
  padding: 12px 14px;               /* Figma px14 py12 */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: var(--font-size-sm);   /* Figma 14px */
  font-family: var(--font-family-base);
  line-height: 1.75;
  color: var(--color-text-primary);
  background: var(--color-white);
  outline: none;
}
.text-input::placeholder {
  color: #99999e;                   /* Figma プレースホルダ */
}
.text-input:focus {
  border-color: var(--color-border);   /* フォーカス時の赤(primary)枠を廃止＝エラーに見えないよう通常枠のまま */
}
.text-input.is-error {
  border-color: #cc0000;
}
textarea.text-input {
  resize: vertical;
}
/* 応援コメント（textarea）はフォーカス時の枠色ハイライトをカット（通常枠のまま） */
textarea.text-input:focus {
  border-color: var(--color-border);
}
/* SPだけ16px：iOS Safari は font-size が16px未満の入力欄にフォーカスすると
   画面を自動拡大する（＝タップした瞬間にレイアウトがズレて見える）ため。
   対象は文字入力する input / textarea のみ。セレクトは <button> の自作UIなので14pxのまま。
   PCではこの挙動が無いので Figma 通り14pxを維持する。 */
@media (max-width: 767px) {
  .text-input {
    font-size: var(--font-size-md);   /* 16px */
  }
}
.survey-form__submit-area {
  padding: var(--space-lg) 0 0;
}
.survey-form__back-area {
  padding: var(--space-sm) 0 var(--space-xl);
}
.custom-select {
  position: relative;
}
/* 連動セレクト：都道府県未選択のあいだ市区町村を非活性表示（操作もJS側でブロック） */
.custom-select.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
/* 非活性中は背景をグレーにして「まだ押せない」ことを明確化 */
.custom-select.is-disabled .custom-select__trigger {
  background: var(--color-bg-placeholder);
}
.custom-select__trigger {
  width: 100%;
  padding: 12px 14px;                     /* Figma px14 py12（テキスト入力と統一） */
  background: var(--color-white);         /* 旧グレー塗り→白 */
  border: 1px solid var(--color-border);  /* 旧なし→#e9e9e9枠 */
  border-radius: var(--radius-btn);       /* 角丸8 */
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  line-height: 1.75;
  color: #99999e;                         /* プレースホルダ色（選択後は.has-valueで#333） */
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.custom-select__trigger.has-value {
  color: var(--color-text-primary);
}
.custom-select__trigger::after {
  content: '▼';
  font-size: 10px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.custom-select__trigger.is-error {
  border-color: #cc0000;   /* text-input と統一：1pxのborder色を赤に（旧 outline:2px は太さ・位置が不一致だった） */
}
.custom-select__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}
.custom-select__dropdown.is-open {
  display: block;
}
.custom-select__option {
  padding: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.custom-select__option:hover {
  background: var(--color-bg-placeholder);
}
.survey-form__note {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  margin-top: var(--space-lg);   /* フォーム末尾から離す */
}
.survey-form__note--top {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-placeholder);
  border-radius: var(--radius-card);
  margin-top: 0;                 /* 上部の説明boxには上マージン不要 */
  /* 案内文とフォーム本体を切り分けるため、設問どうしの間隔（24px）と同じだけ空ける
     （8pxだと設問間より狭く、メールアドレス設問にくっついて見えた） */
  margin-bottom: var(--space-lg);
}
@media (max-width: 767px) {
  .survey-form__note--top {
    text-align: left;                            /* SPは左寄せ */
    font-size: var(--font-size-sm);              /* 16→14：高さを抑え375pxで1行に収める */
    word-break: keep-all;                        /* 語の途中で折れない（文節で改行） */
    padding: var(--space-xs) var(--space-md);    /* 上下8→4に圧縮して高さを抑える */
  }
}

/* --- Vote Modal --- */
.vote-modal-character {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.vote-modal-character__image-wrapper {
  aspect-ratio: 1 / 1;
  width: 60%;
  max-width: 200px;
  background: var(--color-bg-placeholder);
  border-radius: var(--space-sm);
  overflow: hidden;
}
.vote-modal-character__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vote-modal-character__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.vote-modal-character__company {
  font-size: var(--font-size-sm);
  text-decoration: underline;
}
.vote-modal-character__logo {
  max-width: var(--logo-max-width);
  max-height: var(--logo-max-height);
  background: var(--color-bg-placeholder);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PC: モーダルはFigma準拠で幅480・余白28（幅は基本値480のまま） */
@media (min-width: 768px) {
  .modal__scroll-area { padding: 24px 28px 28px; }
}