body {
  font-size: 12px;
}

/* 顔面偏差値 */
.fs {
  --fs-maincolor: #7dfb88;
  --fs-ink: #15202b;
  --fs-sub: #4a5868;
  --fs-line: #cbd3dc;
  --fs-bg: #f4f6f8;
  --fs-blue: #1f5fd1;
  --fs-blue-soft: #e3ecfb;
  --fs-sagi: #c2410c;
  color: var(--fs-ink);
  padding-bottom: 32px;
}

.fs [hidden] {
  display: none !important;
}

.fs p {
  margin: 0;
}

.fs-section {
  display: flex;
  flex-direction: column;
}

.fs-section-header {
  display: flex;

  align-items: center;
  font-size: 14px;
  font-weight: 900;
  gap: 5px;
  border-bottom: 2px dashed;
  padding-bottom: 10px;
  margin-bottom: 10px;
}


.fs-privacy {

  padding: 12px 14px;
}

.fs-privacy svg {
  flex-shrink: 0;
  margin-top: 1px;
}



.fs-privacy__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
}

.fs-privacy__list li {
  position: relative;
  padding-left: 1.4em;
  color: var(--fs-ink);
  font-weight: 700;
}

/* きれいに測れる写真の撮り方(.fs-tips__list)と同じチェック */
.fs-privacy__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
}

.fs-actions {
  display: flex;
  flex-direction: column;
}

.fs-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 15px;
  cursor: pointer;
  box-sizing: border-box;
}

.fs-btn--primary:disabled {
  background: #9aa8b8;
  border-color: #9aa8b8;
  cursor: default;
}

.fs-btn--text {
  font-size: 13px;
}

/* labelの中のファイル入力は見えなくして、labelをボタンとして使う */
.fs-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* 選択中の枠線はキーボードで操作した時だけ(マウス・タップで押した後や、モーダルを閉じて選択を戻した時に残らないように)。
   写真を選ぶボタンはlabelの中の見えないファイル入力が選択されるので、:has()で同じ判定をする */
.fs-btn:focus-visible,
.fs-btn:has(:focus-visible) {
  outline: 2px solid var(--fs-blue);
  outline-offset: 2px;
}

.fs-notice {
  padding: 8px 12px;
  background: var(--fs-blue-soft);
  font-size: 12px;
  line-height: 1.6;
}

/* アプリ内ブラウザの案内(ボタンのすぐ上)。白い枠＋オレンジの警告マーク＋手順の札(案C、2026-10-20) */
.fs-inapp {
  padding: 12px 14px;
  background: #fff;
  border: 4px solid #141414;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #141414;
  color: #141414;
}

.fs-inapp[hidden] {
  display: none;
}

.fs-inapp__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fs-inapp p {
  margin: 0;
}

.fs-inapp__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  color: #c2410c;
}

.fs-inapp__title svg {
  flex-shrink: 0;
}

.fs-inapp__text {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #3a3a3a;
}

/* 手順の札は縦に2段(横並びだと狭い端末で折り返して矢印が浮くため) */
.fs-inapp__steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 800;
}

.fs-inapp__step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: #fff3c4;
  border: 2px solid #141414;
  border-radius: 10px;
}

.fs-inapp__num {
  font-family: 'DotGothic16', sans-serif;
  font-weight: 400;
}

.fs-inapp__alt {
  padding-top: 8px;
  border-top: 2px dashed #d0d0d0;
  color: #141414;
}

.fs-tips {
  line-height: 1.7;

}

/* 2×2のチェックリスト */
.fs-tips__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.fs-tips__list li {
  position: relative;
  padding-left: 1.4em;
  color: var(--fs-ink);
  font-weight: 700;
}

.fs-tips__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 900;
}

/* カメラ・写真 */
.fs-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  line-height: 0;
  box-sizing: border-box;
}

.fs-stage--camera {
  background: #000;
}

.fs-video,
.fs-photo {
  display: block;
  width: 100%;
}

.fs-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* インカメラは鏡のように左右反転して見せる(解析は反転前の画像で行う) */
.fs-mirror {
  transform: scaleX(-1);
}

.fs-camera__status {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  padding: 10px 20px;
  background: #ff4000;
  border-radius: 100px;
  /* border: 2px solid #ff4000; */
}

.fs-camera__status.is-ok {
  background: #21c17a;

}

/* =====================================================================
   ローディング・測定の演出(準備中・測定の演出・結果をまとめています)
   HTMLは templates/pages/face-score/_loading.html・_measure.html・_transit.html。
   色はここの変数で変える(顔の点・補助線はJSがcanvasに描くが、色はこの変数を読む)。
   テーマ側の上書きが1つある: 「測定の画面」(.fs--e .fs-stage はカメラと共通)
   ===================================================================== */

.fs {
  --fs-loading-accent: var(--fs-maincolor);
  /* スピナー・光の線・進行中の手順・測った値 */
  --fs-loading-track: var(--fs-line);
  /* スピナーの輪・測った項目の下線 */
  --fs-loading-ink: var(--fs-ink);
  /* 済んだ手順 */
  --fs-loading-sub: var(--fs-sub);
  /* 補足の文字 */
  --fs-loading-dot: #4c8dff;
  /* 顔の点(カメラの画面・測定の演出・測った写真) */
  --fs-loading-dot-warn: #f59e0b;
  /* カメラの画面で、向き・大きさが条件に合わない時の顔の点 */
  --fs-loading-guide: rgba(31, 95, 209, 0.85);
  /* 補助線 */
  --fs-loading-band-bg: #141414;
  /* 測定の画面の黒い帯(SCAN・偏差値の帯・札) */
  --fs-loading-band-ink: #fff;
  --fs-loading-mark: var(--fs-maincolor);
  /* 測定の画面の進み具合のバー・札の印 */
  --fs-loading-slot-score: #ffc93c;
  /* 偏差値の帯で回る数字 */
  --fs-loading-height: max(480px, 70vh);
  /* 準備中・結果をまとめていますの高さ(中身は上下中央) */
}

/* 準備中(_loading.html)・結果をまとめています(_transit.html)。高さを固定し、中身は上下中央。
   idで指定しているのは、テーマ側の .fs--e .fs-section の余白・間隔より優先させるため */
#fs-loading,
#fs-transit {
  box-sizing: border-box;
  min-height: var(--fs-loading-height);
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* 結果ページ: 結果が出るまで画面の高さ分の場所を空けておく(result.html。result.jsが外す)。
   シェアされたリンク・再読み込みではローディングを出さないため、JSが結果を組み立てるまでの間、
   下の「この診断について」が上に詰まって見え、結果が出た瞬間に押し下げられていた */
.fs-pending {
  min-height: 100vh;
  min-height: 100lvh;
}

/* そのあと結果をふわっと出す(測った直後は「結果をまとめています」と重ねて切り替えるので使わない) */
.fs-result--appear {
  animation: fs-result-in 0.3s ease-out both;
}

@keyframes fs-result-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-result--appear {
    animation: none;
  }
}

/* 結果をまとめていますは画面の高さいっぱいに。結果(カード)に切り替わった時に高さが伸びる境目を画面の外に出し、
   下の「この診断について」が押し下げられるのを見せないため(lvhが使えないブラウザはvh) */
#fs-transit {
  min-height: max(var(--fs-loading-height), 100vh);
  min-height: max(var(--fs-loading-height), 100lvh);
}

/* 結果をまとめていますの下のレクタングル広告(GAM、300×250)。広告が入る前から場所を空けておく */
.fs-loading-ad {
  width: 300px;
  height: 250px;
  overflow: hidden;
}

/* 結果ページの顔の地図の下のレクタングル広告(GAM、300×250か336×280)。広告が入る前から小さいほうの高さを空けておく */
.fs-result-ad {
  display: flex;
  justify-content: center;
  min-height: 250px;
}

.fs-result-ad[hidden] {
  display: none;
}

.fs-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--fs-loading-track);
  border-top-color: var(--fs-loading-accent);
  border-radius: 50%;
  animation: fs-spin 0.9s linear infinite;
}

@keyframes fs-spin {
  to {
    transform: rotate(360deg);
  }
}

.fs-loading__text {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.fs-loading__text span {
  font-size: 12px;
  font-weight: 400;
  color: var(--fs-loading-sub);
}

/* 結果をまとめています(_transit.html、案C)。5つの偏差値の棒が順に伸び、最後にレア度を判定する。
   棒の色は「.fs-axes__item[data-axis]」と同じ規則(--axis) */
.fs-transit__panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--fs-panel-bg, #fff);
  border: var(--fs-panel-border, 2px solid var(--fs-ink));
  border-radius: var(--fs-radius, 12px);
  box-shadow: var(--fs-panel-shadow, none);
}

.fs-transit__band {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #141414;
  color: #fff;
  font-family: 'DotGothic16', monospace;
  font-size: 13px;
  letter-spacing: 1px;
}

.fs-transit__remain {
  color: #ffc93c;
}

.fs-transit__axes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 0;
}

.fs-transit__axis {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fs-transit__label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
}

.fs-transit__ok {
  font-family: 'DotGothic16', monospace;
  font-weight: 400;
  color: var(--fs-loading-sub);
  opacity: 0;
}

/* 棒が伸びきったら「OK」(時間割は _transit.html のスクリプトが --delay・--dur で渡す) */
.fs-transit.is-running .fs-transit__ok {
  animation: fs-transit-show 1ms linear calc(var(--delay, 0ms) + var(--dur, 1000ms)) both;
}

@keyframes fs-transit-show {
  to {
    opacity: 1;
  }
}

.fs-transit__track {
  display: block;
  height: 12px;
  background: #e4e2ee;
  border: 2px solid #141414;
  overflow: hidden;
}

.fs-transit__fill {
  display: block;
  height: 100%;
  background: var(--axis, var(--fs-loading-accent));
  transform-origin: left center;
  transform: scaleX(0);
}

/* 棒の伸びはCSSのアニメーション(transform)。JSが詰まっても止まらない */
.fs-transit.is-running .fs-transit__fill {
  animation: fs-transit-fill var(--dur, 1000ms) linear var(--delay, 0ms) both;
}

@keyframes fs-transit-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.fs-transit__rarity {
  margin: 4px 0 0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #e3ecd2;
  border: 4px solid #141414;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  color: #3f5a2a;
}

.fs-transit__stars {
  font-size: 18px;
  letter-spacing: 3px;
}

.fs-transit.is-running .fs-transit__stars {
  animation: fs-transit-blink 0.4s steps(2) var(--judge-delay, 0ms) infinite;
}

.fs-transit .fs-transit__stars.is-done {
  animation: none;
  font-size: 16px;
  letter-spacing: 1px;
  color: #141414;
}

@keyframes fs-transit-blink {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-transit.is-running .fs-transit__stars {
    animation: none;
  }
}

.fs-transit__text {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--fs-loading-sub);
}

/* 測定の演出(_measure.html)。案A「写真に直接書き込む」(2026-10-16、B・Cと比べて決定): 上に工程とバー、写真を大きく、
   測った値を写真の上の札で書き込む。写真の下にカウンター3つ、いちばん下に偏差値の帯。スマホでも1画面に収める */
#fs-measure {
  gap: 8px;
}

.fs-measure__band {
  margin: 0;
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--fs-loading-band-bg);
  color: var(--fs-loading-band-ink);
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  letter-spacing: 1px;
}

.fs-measure__step {
  color: var(--fs-loading-accent);
}

/* 工程は進行中の1つだけ出す */
#fs-measure .fs-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

#fs-measure .fs-steps li {
  display: none;
  font-family: 'Dela Gothic One', var(--fs-font, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fs-loading-ink);
}

#fs-measure .fs-steps li.is-current {
  display: block;
}

.fs-measure__bar {
  display: block;
  height: 10px;
  /* 緑の進み具合が見分けやすいよう、結果カードのステータスの空きマスと同じ灰色 */
  background: #e2e2ea;
  border: 3px solid var(--fs-loading-ink);
  border-radius: 999px;
  overflow: hidden;
}

.fs-measure__bar span {
  display: block;
  height: 100%;
  background: var(--fs-loading-mark);
  transform-origin: left center;
  transform: scaleX(0);
}

.fs-measure__bar span.is-running {
  animation: fs-measure-bar linear both;
}

@keyframes fs-measure-bar {
  to {
    transform: scaleX(1);
  }
}

#fs-measure .fs-stage {
  align-self: center;
  width: 100%;
  max-width: 290px;
}

.fs-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--fs-loading-accent);
  opacity: 0.7;
  animation: fs-scan 1.1s ease-in-out infinite alternate;
}

@keyframes fs-scan {
  from {
    top: 0;
  }

  to {
    top: calc(100% - 3px);
  }
}

/* 写真の上の札。札から顔の場所まで線を引き、場所に印を付ける(位置はJSが入れる) */
.fs-tags {
  position: absolute;
  inset: 0;
  line-height: 1.5;
}

.fs-tag {
  position: absolute;
  z-index: 2;
  padding: 1px 5px;
  background: var(--fs-loading-band-bg);
  color: var(--fs-loading-band-ink);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateY(-50%);
  animation: fs-tag-in 0.2s ease-out both;
}

.fs-tag--l {
  left: 3px;
}

.fs-tag--r {
  right: 3px;
}

.fs-tag b {
  font-family: 'DotGothic16', monospace;
  font-weight: 400;
  color: var(--fs-loading-slot-score);
}

.fs-tag-line {
  position: absolute;
  z-index: 1;
  height: 1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.45);
  transform-origin: left center;
  animation: fs-tag-in 0.2s ease-out both;
}

.fs-tag-dot {
  position: absolute;
  z-index: 1;
  width: 7px;
  height: 7px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--fs-loading-mark);
  border: 1px solid var(--fs-loading-ink);
}

@keyframes fs-tag-in {
  from {
    opacity: 0;
  }
}

/* 写真の下のカウンター3つ */
.fs-measure__counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fs-measure__count {
  margin: 0;
  padding: 3px 6px 4px;
  background: #fff;
  border: 3px solid var(--fs-loading-ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.fs-measure__count-label {
  display: block;
  font-size: 10px;
}

.fs-measure__count-num {
  font-family: 'DotGothic16', monospace;
  font-weight: 400;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

/* いちばん下の偏差値の帯 */
.fs-slot-band {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fs-loading-band-bg);
  color: var(--fs-loading-band-ink);
  border-radius: var(--fs-radius, 14px);
  font-family: 'DotGothic16', monospace;
}

.fs-slot-band__wait {
  margin: 0;
  font-size: 13px;
  color: #9aa3ad;
}

.fs-slot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fs-slot[hidden] {
  display: none;
}

.fs-slot__label {
  font-size: 13px;
}

#fs-measure .fs-slot__score {
  font-family: 'DotGothic16', monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--fs-loading-slot-score);
  font-variant-numeric: tabular-nums;
}

/* 結果を表示できなかった時(結果ページ)。入口の測れなかった時の画面は、下の「測れなかった時」の節 */
.fs-error__text {
  padding: 16px;
  background: #fff;
  border: 1.5px solid var(--fs-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.fs-type__traits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 10px;
}

.fs-type__traits-label {
  font-size: 12px;
  color: var(--fs-sub);
}

.fs-type__trait-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-type__trait-list li {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.fs-map {
  position: relative;
  height: 190px;
  margin-top: 4px;
  background: #f7f9fb;
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--fs-line) calc(50% - 0.5px), var(--fs-line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--fs-line) calc(50% - 0.5px), var(--fs-line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.fs-map__q,
.fs-map__axis {
  position: absolute;
  line-height: 1.4;
}

/* 名前は地図の半分の幅まで(長い名前は2行に折り返し、隣の名前と重ならないように)。点(.fs-map__dot)より手前に出す */
.fs-map__q {
  z-index: 1;
  max-width: calc(50% - 14px);
  color: #6b7785;
}

.fs-map__q.is-you {
  font-weight: 700;
}

.fs-map__q--tl {
  left: 8px;
  top: 6px;
}

.fs-map__q--tr {
  right: 8px;
  top: 6px;
}

.fs-map__q--bl {
  left: 8px;
  bottom: 6px;
}

.fs-map__q--br {
  right: 8px;
  bottom: 6px;
}

.fs-map__axis {
  font-weight: 700;
  color: var(--fs-sub);
  background: #f7f9fb;
  padding: 0 4px;
}

.fs-map__axis--top {
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
}

.fs-map__axis--bottom {
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
}

.fs-map__axis--left {
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.fs-map__axis--right {
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.fs-map__dot {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transition: left 0.8s ease-out, top 0.8s ease-out;
}

.fs-axes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.fs-axes__head {
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.fs-axes__score {
  font-variant-numeric: tabular-nums;
}

.fs-axes__bar {
  height: 8px;
  background: #dde3ea;
}

.fs-axes__fill {
  height: 8px;
  background: var(--fs-blue);
}

.fs-axes__item.is-sagi .fs-axes__score {
  color: var(--fs-sagi);
}

.fs-axes__item.is-sagi .fs-axes__fill {
  background: var(--fs-sagi);
}

.fs-follow.is-sagi {
  background: #fff1e8;
}

.fs-follow.is-sagi .fs-follow__title {
  color: #9a3412;
}

.fs-follow__title {
  font-size: 12px;
  font-weight: 900;
}

.fs-follow__text {
  margin-top: 2px !important;
  line-height: 1.7;
}

.fs-smile__text {
  font-size: 13px;
  font-weight: 700;
}

.fs-smile__score {
  font-size: 16px;
}

.fs-smile__note {
  margin-top: 4px !important;
  font-size: 12px;
  line-height: 1.6;
  color: #9a3412;
}

.fs-measured {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1.5px solid var(--fs-line);
}

.fs-measured__photo {
  flex-shrink: 0;
  width: 96px;
}

.fs-measured__title {
  font-size: 13px;
  font-weight: 900;
}

.fs-measured__text {
  margin-top: 4px !important;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fs-sub);
}

/* 開発・調整用 */
.fs-debug {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1.5px dashed #9aa8b8;
}

.fs-debug__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.fs-debug__table th,
.fs-debug__table td {
  padding: 4px;
  border-bottom: 1px solid #e5e9ee;
  text-align: right;
}

.fs-debug__table th:first-child,
.fs-debug__table td:first-child {
  text-align: left;
}

.fs-debug__info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 11px;
}

.fs-debug__info dt {
  color: var(--fs-sub);
}

.fs-debug__info dd {
  margin: 0;
}

/* devのみ: テスト用の写真・まとめて測る */
.fs-samples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1.5px dashed #9aa8b8;
}

.fs-samples__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.fs-btn--small {
  font-size: 12px;
  padding: 0 12px;
}

.fs-samples__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.fs-sample {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  background: none;
  border: 1.5px solid var(--fs-line);
  cursor: pointer;
  font-family: inherit;
  color: var(--fs-ink);
}

.fs-sample:hover,
.fs-sample:focus-visible {
  border-color: var(--fs-blue);
}

.fs-sample img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 25%;
}

.fs-sample span {
  padding: 2px 0 4px;
  font-size: 11px;
}

.fs-batch__status {
  font-size: 13px;
  font-weight: 700;
}

.fs-batch__scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--fs-line);
}

.fs-batch__table th,
.fs-batch__table td {
  white-space: nowrap;
}

/* 結果ページのシェア */
.fs-share {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}

.fs-share__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fs-share__status {
  font-size: 12px;
  color: var(--fs-sub);
}

/* 案内が無い時は場所を取らない(欄の下が間延びしないように)。
   display:noneにすると読み上げソフトが後から入った案内を読まないことがあるため、高さ0にして上の隙間(.fs-shareのgap)を打ち消す */
.fs-share__status:empty {
  margin-top: -8px;
}

.fs-samples__save {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 12px;
  color: var(--fs-sub);
}

/* 結果ページ: 測った本人にだけ出す写真 */
.fs-mine {
  display: flex;
}

.fs-mine__status {
  min-height: 1.4em;
  font-size: 12px;
  color: var(--fs-sub);
}

/* =====================================================================
   デザイン: トレカ(黄色の地×黒の太枠)。カードはレトロゲーム風(.fs-v3、2026-10-14にユーザーが決定)
   ===================================================================== */

.fs--e {
  --fs-ink: #141414;
  --fs-sub: #3a3a3a;
  --fs-line: #141414;
  --fs-bg: #ffe45c;
  --fs-blue: #ff6b4a;
  --fs-blue-soft: #fff3c4;
  --fs-sagi: #7c5cff;
  --fs-on-accent: #141414;
  --fs-panel-bg: #ffffff;
  --fs-panel-border: 4px solid #141414;
  --fs-panel-shadow: 6px 6px 0 #141414;
  --fs-radius: 18px;
  --fs-btn-radius: 18px;
  --fs-btn-border: 3px solid #141414;
  --fs-font: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --fs-font-head: 'Noto Sans JP', sans-serif;
  --fs-font-num: 'Dela Gothic One', 'Noto Sans JP', sans-serif;
  --fs-r-n: #8fd3ff;
  --fs-r-r: #c9a7ff;
  --fs-r-sr: #ffc93c;
  background-image: radial-gradient(rgba(20, 20, 20, 0.1) 2px, transparent 2px);
  background-size: 18px 18px;
}

.fs--e {
  /* 背景アニメの層(.fs-bg)の基準にする */
  position: relative;
  font-family: var(--fs-font);
  background-color: var(--fs-bg);
  overflow: hidden;
  /* clipは、はみ出しを切るだけでスクロールの箱にならない(背景アニメの position: sticky が効くように) */
  overflow: clip;
}

.fs--e .fs-section {
  position: relative;
  padding: 24px 18px 8px;
  gap: 20px;
}

.fs-num {
  font-family: var(--fs-font-num);
  font-weight: 400;
}

/* 共通の箱 */
.fs-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  background: var(--fs-panel-bg);
  border: var(--fs-panel-border);
  border-radius: var(--fs-radius);
  box-shadow: var(--fs-panel-shadow);
}

.fs--e .fs-heading {
  font-family: var(--fs-font-head);
  font-size: 18px;
  border-bottom: 2px dashed;

  padding-bottom: 10px;
}

.fs--e .fs-heading {
  font-weight: 900;
}

/* ボタン */
.fs--e .fs-btn {
  align-self: center;
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  border-radius: var(--fs-btn-radius);
  font-family: var(--fs-font);
  font-weight: 900;
}

.fs-stage.fs-stage--camera {
  border: var(--fs-panel-border);
  border-radius: var(--fs-radius);
  box-shadow: var(--fs-panel-shadow);
}

.shutter_wrapper {
  position: absolute;
  z-index: 1;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.fs-shutter {
  border-radius: 100px;
  background-color: #ffffff;
  color: #080404;
  border: 1px solid #000;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px #000;
  height: 50px;
  width: 50px;
}

.fs-shutter:disabled {
  opacity: .2;
  background-color: #fff;
  cursor: not-allowed;
}

.fs--e .fs-btn--primary {
  min-height: 60px;
  background: var(--fs-maincolor);
  color: var(--fs-on-accent);
  border: var(--fs-btn-border);
}

/* 文字は白いボタン(アルバムから選ぶ等)と同じ丸ゴシックの太字。大きさだけ少し大きく(2026-10-15、以前は見出し用のDela Gothic One) */
.fs--e .fs-btn--primary {
  font-size: 17px;
}

.fs--e .fs-btn--secondary {
  background: #fff;
  color: var(--fs-ink);
  border: var(--fs-btn-border);
}

/* ボタンは影なしのフラット(案C、2026-10-15)。押した時は地の色を少し変える。
   iPhoneのSafariで:activeを効かせるため、script.js・result.jsでtouchstartを登録している */
.fs--e .fs-btn--primary:not(:disabled):active,
.fs-save__btn--primary:active {
  filter: contrast(0.9) brightness(1.1);
}

.fs--e .fs-btn--secondary:active,
.fs-save__btn:not(.fs-save__btn--primary):active {
  background: #e6e6e6;
}

/* 文字だけのボタン(やめる・最初の画面にもどる 等)。白い地に、読みやすい濃さの灰色(以前の#9f9f9fは薄すぎた) */
.fs--e .fs-btn--text {
  border: 0;
  min-height: 44px;
  color: #3a3a3a;
  background: #ffffff;
  width: 200px;
}

.fs--e .fs-actions {
  align-items: center;
  gap: 12px;
}

/* 入口のタイトル */
.fs-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}

.fs-hero>* {
  position: relative;
}

.fs-hero__eyebrow {
  letter-spacing: 3px;
}

.fs--e .fs-hero__eyebrow {
  padding: 5px 14px;
  border-radius: 999px;
  background: #141414;
  color: #fff;
  font-family: var(--fs-font-head);
  font-size: 13px;
  transform: rotate(-3deg);
}

/* ロゴ(案H): 縁取り文字＋「診断」＋ステータスの棒(結果カードの10マスと同じ色) */
.fs-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
}

.fs-logo__title {
  font-family: 'Dela Gothic One',
    'Noto Sans JP',
    sans-serif;
  font-size: 56px;
  line-height: 1.1;
  color: #fff;
  -webkit-text-stroke: 3px #141414;
  text-shadow: 5px 5px 0 #141414;
  white-space: nowrap;
}

.fs-logo__title span {
  color: var(--fs-maincolor);
}

.fs-logo__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fs-logo__pill {
  padding: 4px 14px;
  background: #141414;
  color: #fff;
  font-family: 'noto sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 6px;
}

.fs-logo__bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fs-logo__bar {
  display: flex;
  gap: 2px;
}

.fs-logo__bar i {
  width: 12px;
  height: 6px;
  background: #fff;
}

.fs-logo__bar--love .is-on {
  background: #ff8fa3;
}

.fs-logo__bar--work .is-on {
  background: #4361ee;
}

.fs-logo__bar--gold .is-on {
  background: #f5b700;
}

.fs-logo__bar--road .is-on {
  background: #21c17a;
}

.fs-logo__bar--sagi .is-on {
  background: #7c5cff;
}

.fs-hero__lead {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.8;
  text-align: center;
}

/* 狭い画面では文の区切り(span)で折り返す(1文字だけ次の行に落ちないように) */
.fs-hero__lead span {
  display: inline-block;
}

/* 言葉の途中で折り返さないまとまり(狭い画面では、まとまりごと次の行へ) */
.fs-keep {
  display: inline-block;
}

/* 入口のカード3枚 */
.fs-fan {
  width: 330px;
  max-width: 100%;
  height: 250px;
}

.fs-fan__card {
  position: absolute;
  top: 30px;
  width: 132px;
  height: 186px;
  box-sizing: border-box;
}

.fs-fan__card[data-rarity="n"] {
  --rar: var(--fs-r-n);
}

.fs-fan__card[data-rarity="r"] {
  --rar: var(--fs-r-r);
}

.fs-fan__card[data-rarity="sr"] {
  --rar: var(--fs-r-sr);
}

.fs-fan__card--c {
  left: 50%;
  top: 0;
  width: 150px;
  height: 218px;
  margin-left: -75px;
}

.fs-fan__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.fs-fan__pic {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 40px;
}

.fs-fan__foot {
  font-weight: 400;
}

.fs--e .fs-fan__card {
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 4px solid #141414;
  box-shadow: 5px 5px 0 #141414;
}

.fs--e .fs-fan__card--c {
  box-shadow: 7px 7px 0 #141414;
}

.fs--e .fs-fan__inner {
  padding: 0;
  border-radius: 0;
}

.fs--e .fs-fan__pic {
  margin: 0;
  background: #f2f2f2;
}

.fs--e .fs-fan__foot {
  padding: 0 8px 8px;
}

/* もらい方 */
.fs-howto__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-howto__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 900;
}

.fs-howto__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.fs--e .fs-howto__num {
  box-sizing: border-box;
  background: #ffe45c;
  border: 2px solid #141414;
  font-family: var(--fs-font-head);
  font-weight: 900;
  line-height: 1.6;
  padding-left: 2px;
  font-size: 15px;
}

/* 写真は送信・保存されません / 案内 */
.fs--e .fs-privacy {
  border-radius: var(--fs-radius);
  border: var(--fs-panel-border);
  background: var(--fs-panel-bg);
}

.fs--e .fs-tips {
  font-size: 13px;
  padding: 12px 14px;
  border-radius: var(--fs-radius);
  border: var(--fs-panel-border);
  background: var(--fs-panel-bg);
}


/* 測定の画面(ローディング・測定の演出の節のテーマ側の上書き。.fs-stage はカメラの画面と共通) */
.fs--e .fs-stage {
  border-radius: var(--fs-radius);
  border: var(--fs-panel-border);
  position: relative;
}

/* 結果の見出し(RESULT＋診断完了) */
.fs-get {
  align-self: center;
  position: relative;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--fs-ink);
  color: #fff;
  font-family: var(--fs-font-num);
  font-size: 20px;
  letter-spacing: 2px;
}

/* 案B(2026-10-16): 小さな「RESULT」の札＋入口のロゴ(.fs-logo__title)と同じ縁取り文字「診断完了」 */
.fs--e .fs-get {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #141414;
  letter-spacing: 0;
}

.fs-get__sub {
  padding: 2px 10px;
  background: #141414;
  color: #fff;
  font-family: 'DotGothic16', monospace;
  font-size: 12px;
  letter-spacing: 4px;
}

.fs-get__title {
  font-family: 'Dela Gothic One', 'Noto Sans JP', sans-serif;
  font-size: 36px;
  line-height: 1.2;
  color: #fff;
  -webkit-text-stroke: 2px #141414;
  text-shadow: 4px 4px 0 #141414;
  white-space: nowrap;
}

.fs-get__title span {
  color: var(--fs-maincolor);
}

/* 結果: 顔カード(共通の骨組み) */
.fs-tcard {
  position: relative;
  align-self: center;
  width: 100%;

  box-sizing: border-box;
}

.fs-tcard[data-rarity="n"] {
  --rar: var(--fs-r-n);
}

.fs-tcard[data-rarity="r"] {
  --rar: var(--fs-r-r);
}

.fs-tcard[data-rarity="sr"] {
  --rar: var(--fs-r-sr);
}

.fs-tcard__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* カードの上: いちばん高い顔面偏差値を大きく(主役)、その下に部門 */
.fs-tcard__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.fs-tcard__score-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.2;
}

.fs-tcard__score {
  font-size: 64px;
  line-height: 1;
  white-space: nowrap;
}

.fs-tcard__axis {
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

/* 顔タイプ(保存画像と同じ見出し用の文字) */
.fs-tcard__name {
  min-width: 0;
  font-family: 'Dela Gothic One', 'Noto Sans JP', sans-serif;
  /* 端末の幅に合わせて最大30px。一番長い名前(10文字)でも360幅で1行に収まる */
  font-size: clamp(22px, 7.6vw, 30px);
  line-height: 1.25;
  text-align: center;
}

.fs-tcard__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.fs-tcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-tcard__alt {
  font-family: var(--fs-font-head);
  font-size: 34px;
}

.fs-tcard__badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #141414;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* レア・スーパーレアは写真に光が走る(ホロ)。写真が無い時(顔の地図)は光らせない */
.fs-tcard__holo {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fs-tcard[data-rarity="r"] .fs-tcard__holo,
.fs-tcard[data-rarity="sr"] .fs-tcard__holo {
  display: block;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 62%);
  background-size: 260% 100%;
  animation: fs-sheen 3.4s ease-in-out infinite;
}

.fs-tcard[data-rarity="sr"] .fs-tcard__holo {
  background:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.6) 48%, transparent 62%),
    linear-gradient(115deg, rgba(255, 0, 128, 0.16), rgba(255, 210, 0, 0.16), rgba(0, 220, 255, 0.16), rgba(150, 0, 255, 0.16));
  background-size: 260% 100%, 100% 100%;
}

/* 写真が無い時の顔の地図(緑の画面)は、レトロゲーム風のドットの画面なので光らせない */
.fs-tcard__alt:not([hidden])~.fs-tcard__holo {
  display: none;
}

@keyframes fs-sheen {
  0% {
    background-position: 150% 0, 0 0;
  }

  60%,
  100% {
    background-position: -60% 0, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-tcard__holo {
    animation: none !important;
  }
}

.fs-tcard__typeline {
  font-size: 12px;
  font-weight: 800;
}

.fs-tcard__stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.fs-tcard__stats-title {
  font-size: 11px;
  font-weight: 800;
}

.fs-tcard .fs-axes__list {
  gap: 10px;
}

.fs-tcard .fs-axes__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
}

.fs-tcard .fs-axes__head {
  display: contents;
}

.fs-tcard .fs-axes__label {
  grid-column: 1;
  grid-row: 1;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.fs-tcard .fs-axes__bar,
.fs-tcard .fs-axes__cells {
  grid-column: 1 / -1;
  grid-row: 2;
}

.fs-tcard .fs-axes__score {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  white-space: nowrap;
  line-height: 1.2;

  font-weight: 900;
  font-size: 16px;
  color: inherit;
}

.fs-axes__cells {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
}

.fs-axes__cell {
  height: 12px;
  background: #e4e2ee;
}

.fs-axes__item[data-axis="love"],
.fs-transit__axis[data-axis="love"] {
  --axis: #ff8fa3;
}

.fs-axes__item[data-axis="work"],
.fs-transit__axis[data-axis="work"] {
  --axis: #4361ee;
}

.fs-axes__item[data-axis="gold"],
.fs-transit__axis[data-axis="gold"] {
  --axis: #f5b700;
}

.fs-axes__item[data-axis="road"],
.fs-transit__axis[data-axis="road"] {
  --axis: #21c17a;
}

.fs-axes__item[data-axis="sagi"],
.fs-transit__axis[data-axis="sagi"] {
  --axis: #7c5cff;
}

.fs-axes__cell.is-on {
  background: var(--axis);
}

.fs-tcard__desc {
  font-size: 12px;
  line-height: 1.7;
}

.fs-tcard__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}

.fs-tcard__foot>* {
  white-space: nowrap;
}

.fs-tcard__stars {
  letter-spacing: 1px;
}

.fs-tcard .fs-type__trait-list li {
  border-radius: 999px;
}

/* ---- カード: レトロゲーム(ドット文字、10マスのステータス) ---- */
.fs-v3 {
  --fs-font-num: 'DotGothic16', 'M PLUS Rounded 1c', sans-serif;
}

.fs-v3 .fs-tcard {
  padding: 15px 15px 20px;
  background: #fff;
  border: 4px solid #141414;
  border-radius: 6px;
  box-shadow: inset 0 0 0 5px var(--rar), 10px 10px 0 #141414;
}

.fs-v3 .fs-tcard__head {
  padding: 10px 10px 12px;
  background: #141414;
  color: #fff;
}

.fs-v3 .fs-tcard__score-label,
.fs-v3 .fs-tcard__axis {
  font-family: 'DotGothic16', sans-serif;
  font-weight: 400;
  font-size: 20px;
}

.fs-v3 .fs-tcard__score {
  color: var(--rar);
}

.fs-v3 .fs-tcard__axis {
  background: var(--rar);
  color: #141414;
}

.fs-v3 .fs-tcard__photo {
  border: 4px solid #141414;
  background: #e3ecd2;
}

.fs-v3 .fs-tcard__alt {
  font-family: 'DotGothic16', sans-serif;
  color: #3f5a2a;
}

.fs-v3 .fs-tcard__typeline,
.fs-v3 .fs-tcard__stats-title,
.fs-v3 .fs-tcard .fs-axes__label,
.fs-v3 .fs-tcard__foot {
  font-family: 'DotGothic16', sans-serif;
  font-weight: 400;
}

.fs-v3 .fs-axes__bar {
  display: none;
}

.fs-v3 .fs-tcard__desc {
  padding: 8px 10px;
  border: 2px solid #141414;
  background: #f6f6ee;
  margin-bottom: 10px;
}

.fs-v3 .fs-type__trait-list li {
  border: 2px solid #141414;
  border-radius: 0;
  background: var(--rar);
  color: #141414;
}

.fs-v3 .fs-tcard__foot {
  padding-top: 16px;
  border-top: 3px dotted #141414;
}

/* 入口のカード3枚も案に合わせる */

.fs-v3 .fs-fan__card {
  border-radius: 6px;
}

.fs-v3 .fs-fan__foot,
.fs-v3 .fs-fan__pic {
  font-family: 'DotGothic16', sans-serif;
}

/* 結果カードの写真なしの表示を小さくした見本: レア度の色の内枠・黒い帯(偏差値と部門)・顔タイプ・緑の画面(顔の地図・?) */
.fs-v3 .fs-fan__card {
  padding: 3px;
  background: var(--rar);
}

.fs-v3 .fs-fan__inner {
  gap: 3px;
  padding: 4px;
}

.fs-fan__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 2px 4px;
  background: #141414;
  font-family: 'DotGothic16', sans-serif;
  font-weight: 400;
}

.fs-fan__score {
  font-size: 22px;
  line-height: 1;
  color: var(--rar);
}

.fs-fan__dept {
  padding: 0 4px;
  background: var(--rar);
  color: #141414;
  font-size: 8px;
  line-height: 1.4;
}

.fs-fan__name {
  overflow: hidden;
  font-family: 'Dela Gothic One', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  /* 見出し用の文字は幅が広いので字間を詰める(一番長い「さわやかフレッシュ顔」10文字でも枠に収まるように) */
  letter-spacing: -1px;
  text-align: center;
  white-space: nowrap;
}

.fs-v3 .fs-fan__foot {
  padding: 0;
  font-size: 9px;
  text-align: right;
}

.fs-v3 .fs-fan__pic {
  border-radius: 0;
  background: #e3ecd2;
  border: 3px solid #141414;
  color: #3f5a2a;
}

.fs-fan__map {
  position: relative;
  font-size: 9px;
}

.fs-fan__grid {
  position: absolute;
  inset: 16px 14px;
  border: 2px solid #3f5a2a;
  background:
    linear-gradient(#3f5a2a, #3f5a2a) center / 1px 100% no-repeat,
    linear-gradient(#3f5a2a, #3f5a2a) center / 100% 1px no-repeat;
}

.fs-fan__you {
  position: absolute;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  padding: 1px 2px;
  background: rgba(63, 90, 42, 0.18);
  line-height: 1.2;
}

.fs-fan__you--bl {
  left: 0;
  top: 50%;
}

.fs-fan__you--br {
  left: 50%;
  top: 50%;
}

.fs-fan__you--tl {
  left: 0;
  top: 0;
}

.fs-fan__you--tr {
  left: 50%;
  top: 0;
}

.fs-fan__pin {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #3f5a2a;
}

.fs-fan__ax {
  position: absolute;
  line-height: 1;
  white-space: nowrap;
}

.fs-fan__ax--t {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.fs-fan__ax--b {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.fs-fan__ax--l,
.fs-fan__ax--r {
  top: 50%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: translateY(-50%);
}

.fs-fan__ax--l {
  left: 2px;
}

.fs-fan__ax--r {
  right: 2px;
}

.fs-fan__q {
  font-size: 48px;
}

/* 入口の見本のカード: 流れる帯(_sample_cards.html、2026-10-16 案B)。
   カードは今までの見本(132×186)の作りのまま0.62倍に縮めて並べ、真ん中に「あなたの顔」(.fs-fan__card--c)を重ねる。
   帯は同じ並び(8枚)を2回つなげてあるので、-50%まで動かすと最初と同じ見た目に戻る(半分=8枚分は約700px。PCの見える幅600pxより長い)。
   流れる時間は半分の距離に対して(45秒・53秒。速さは以前と同じ1秒あたり約15px・13px) */
/* 帯の幅は入口の幅いっぱい(#fs-intro の左右の余白18pxを打ち消す)。
   以前は画面幅(100vw)にしていたが、PCでは見える範囲(600px)より左右に大きくはみ出し、右へ流れる下の段は
   動き始めの数秒、見える範囲の右側にカードが無かった(2026-10-16) */
.fs-fan--flow {
  position: relative;
  width: calc(100% + 36px);
  max-width: none;
  height: 300px;
  margin: 0 -18px;
}

.fs-flow {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: rotate(-4deg);
}

.fs-flow__row {
  display: flex;
  width: max-content;
  will-change: transform;
}

.fs-flow__row--l {
  animation: fs-flow-l 45s linear infinite;
}

.fs-flow__row--r {
  animation: fs-flow-r 53s linear infinite;
}

@keyframes fs-flow-l {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes fs-flow-r {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-flow__row {
    animation: none;
  }
}

/* 縮めたカードの置き場所(縮めた後の大きさ＋影の分) */
.fs-fan__slot {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  height: 120px;
}

.fs-fan__card--flow {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0.62);
  transform-origin: left top;
}

/* スーパーレアの星5つが折り返さないように */
.fs-fan--flow .fs-fan__foot {
  white-space: nowrap;
  letter-spacing: -0.5px;
}

.fs-fan--flow .fs-fan__card--c {
  top: 26px;
  z-index: 1;
}

.fs-fan__photo {
  position: relative;
  overflow: hidden;
  color: #8faa6a;
}

.fs-fan__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-fan__photo-note,
.fs-fan__dots-note {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-size: 9px;
  line-height: 1;
  color: #3f5a2a;
}

.fs-fan__dots {
  position: relative;
  color: #3f5a2a;
}

.fs-fan__bars {
  flex-direction: column;
  gap: 5px;
}

.fs-fan__bar {
  display: flex;
  gap: 2px;
}

.fs-fan__bar i {
  display: block;
  width: 7px;
  height: 7px;
  background: #e2e2ea;
}

/* 写真入り画像の保存 */
.fs--e .fs-mine {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
}

.fs--e .fs-mine__note {
  width: 100%;

  box-sizing: border-box;
  padding: 10px 12px;
  background: #fff;
  border: 3px solid #141414;
}

.fs--e .fs-mine__note-title {
  font-size: 13px;
  font-weight: 900;
}

.fs--e .fs-mine__note-list {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 12px;
  line-height: 1.6;
}

.fs--e .fs-mine__note-list li+li {
  margin-top: 4px;
}

.fs--e .fs-mine__note-list strong {
  font-weight: 900;
}

/* ひとことコメント */

.fs--e .fs-follow {
  padding: 10px 12px;
  border: 3px solid #141414;
  border-radius: 14px;
  background: var(--fs-bg);
}

.fs--e .fs-follow__title {
  color: var(--fs-blue);
}

.fs--e .fs-follow__title {
  color: #141414;
}

.fs--e .fs-follow.is-sagi {
  background: #fff;
}

.fs--e .fs-follow.is-sagi .fs-follow__title {
  color: var(--fs-sagi);
}

.fs--e .fs-follow__text {
  font-size: 14px;
  font-weight: 900;
}

.fs--e .fs-smile {
  padding: 0;
  border: 0;
  background: none;
}

/* 顔の地図(点の地図) */
.fs--e .fs-map {
  border: 3px solid #141414;
  border-radius: 12px;
  /* 軸の名前は枠の外(上下は横書き、左右は縦書き)。点がどこにあっても重ならないように */
  margin: 26px 22px 24px;
}

.fs--e .fs-map__axis {
  background: none;
  padding: 0;
  white-space: nowrap;
}

.fs--e .fs-map__axis--top {
  top: auto;
  bottom: 100%;
  margin-bottom: 4px;
}

.fs--e .fs-map__axis--bottom {
  bottom: auto;
  top: 100%;
  margin-top: 4px;
}

/* 左右の名前は縦に並べる。CSSの縦書き(writing-mode)はiPhoneのSafariで、枠線との間隔がずれ、
   「ュ」等の小さい字が横書きの形のまま左下に寄ったため、1文字ずつのspan(render.js)を縦に積む形にした(2026-10-20)。
   枠線(3px)の外側からtranslateで離す */
.fs--e .fs-map__axis--left,
.fs--e .fs-map__axis--right {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.2em;
  line-height: 1.15;
}

.fs--e .fs-map__axis--left {
  left: -3px;
  right: auto;
  transform: translate(calc(-100% - 4px), -50%);
}

.fs--e .fs-map__axis--right {
  left: calc(100% + 3px);
  right: auto;
  transform: translate(4px, -50%);
}

.fs--e .fs-map__dot {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background: var(--fs-blue);
  border: 4px solid #141414;
  box-shadow: none;
}

.fs--e .fs-map__q.is-you {
  color: #141414;
  background: var(--fs-blue);
  padding: 0 4px;
  border-radius: 4px;
}

/* シェア */
.fs--e .fs-share {
  border-radius: var(--fs-radius);
  border: var(--fs-panel-border);
  background: var(--fs-panel-bg);
  box-shadow: var(--fs-panel-shadow);
}

.fs--e .fs-share__buttons .fs-btn {
  min-height: 52px;
  font-size: 15px;
}

.fs--e #fs-share-x {
  background: var(--fs-ink);
  color: #fff;
}

.fs--e #fs-share-x:active {
  background: #444;
}

/* カメラの画面: うまく映らない時はカメラアプリで */
.fs-camera__app {
  position: relative;
  align-self: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--fs-sub);
  cursor: pointer;
}

.fs-camera__app span {
  margin-left: 2px;
  font-weight: 900;
  color: var(--fs-ink);
  text-decoration: underline;
}

.fs-camera__app:has(:focus-visible) {
  outline: 2px solid var(--fs-blue);
  outline-offset: 2px;
}

#fs-comment-axis {
  white-space: nowrap;
}

/* =====================================================================
   背景アニメーション「スキャン」(bg.js。入口・結果ページ。2026-10-15)
   - 画面の大きさの層(.fs-bg__view)を sticky で画面に貼り付け、スクロールしても画面内で動く
   - 動かすのは transform・opacity だけ。押せる部分の邪魔をしない(pointer-events: none)
   - カメラ・準備中・測定・結果をまとめていますの画面では出さない(測定の演出と重なるため)
   ===================================================================== */
.fs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fs-bg~* {
  position: relative;
  z-index: 1;
}

.fs-bg__view {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.fs:has(#fs-camera:not([hidden])) .fs-bg,
.fs:has(#fs-loading:not([hidden])) .fs-bg,
.fs:has(#fs-measure:not([hidden])) .fs-bg,
.fs:has(#fs-transit:not([hidden])) .fs-bg {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fs-bg {
    display: none;
  }
}

.fs-bg__lits {
  position: absolute;
  inset: 0;
}

.fs-bg__lit {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid #141414;
  background: #fff;
  opacity: 0;
  animation: fs-bg-lit var(--fs-bg-s) ease-out infinite;
}

.fs-bg__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 95%, var(--fs-blue) 95%, var(--fs-blue) 100%);
  animation: fs-bg-scan var(--fs-bg-s) linear infinite;
}

.fs-bg__scan-tag {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-family: 'DotGothic16', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.6;
}

.fs-bg__af {
  position: absolute;
  width: 46px;
  height: 46px;
  opacity: 0;
  animation: fs-bg-af var(--fs-bg-af) ease-out infinite;
}

.fs-bg__af i {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid #141414;
}

.fs-bg__af i:nth-child(1) {
  left: 0;
  top: 0;
  border-left-width: 2px;
  border-top-width: 2px;
  border-top-left-radius: 3px;
}

.fs-bg__af i:nth-child(2) {
  right: 0;
  top: 0;
  border-right-width: 2px;
  border-top-width: 2px;
  border-top-right-radius: 3px;
}

.fs-bg__af i:nth-child(3) {
  left: 0;
  bottom: 0;
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-bottom-left-radius: 3px;
}

.fs-bg__af i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-bottom-right-radius: 3px;
}

.fs-bg__af span {
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'DotGothic16', sans-serif;
  font-size: 10px;
  opacity: 0.75;
}

@keyframes fs-bg-lit {
  0% {
    opacity: 0.9;
    transform: scale(1.3);
  }

  6% {
    opacity: 0.9;
    transform: scale(1);
  }

  22%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* 線(帯の下端)が画面の上端(0)から下端(--fs-bg-h)まで動き、着いたらすぐ上端から次が始まる */
@keyframes fs-bg-scan {
  0% {
    transform: translateY(-64px);
  }

  100% {
    transform: translateY(calc(var(--fs-bg-h) - 64px));
  }
}

@keyframes fs-bg-af {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }

  10% {
    opacity: 0.8;
    transform: scale(1);
  }

  40% {
    opacity: 0.8;
    transform: scale(1);
  }

  52%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* =====================================================================
   写真入りの結果画像の保存(案B: 画像を画面に出して長押し・右クリックで保存。result.jsのSAVE_PREVIEW)
   #fs-rootの外に置くので、色は直接書く
   ===================================================================== */
.fs-save {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 20, 20, 0.75);
}

.fs-save[hidden] {
  display: none;
}

.fs-save-open {
  overflow: hidden;
}

.fs-save__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  box-sizing: border-box;
  /* それでも収まらない時(極端に低い画面)は、パネルの中をスクロール */
  overflow-y: auto;
  padding: 16px;
  background: #fff;
  border: 4px solid #141414;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #141414;
  color: #141414;
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

.fs-save__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 18px;
}

/* 画面の高さが足りない時(PCの低いウィンドウ等)は、画像のほうを縮めてボタンをパネルの中に収める(縦横比は保つ) */
.fs-save__img {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
  border-radius: 8px;
  /* 長押しのメニュー(保存)を出せるようにする */
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}

.fs-save__hint {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.fs-save__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.fs-save__btn {
  flex: 1 1 120px;
  min-height: 48px;
  padding: 0 16px;
  background: #fff;
  border: 3px solid #141414;
  border-radius: 14px;
  color: #141414;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

/* 色付きのボタンは、ページの大きいボタン(.fs--e .fs-btn--primary)と同じ色(2026-10-16、オレンジのまま残っていたのを合わせた) */
.fs-save__btn--primary {
  background: var(--fs-maincolor, #7dfb88);
  color: var(--fs-on-accent, #141414);
}

.fs-save__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.fs-save__toggle[hidden] {
  display: none;
}

.fs-save__toggle input {
  width: 22px;
  height: 22px;
  accent-color: #141414;
}

/* シェア欄の「画像で保存・シェア」(2つのボタンの下に横いっぱい) */
.fs--e .fs-share__image {
  max-width: none;
  min-height: 52px;
}

/* =====================================================================
   写真が無い時のカードの写真の枠「顔の地図」(nophoto.js。2026-10-15)
   緑の画面の色は .fs-v3 .fs-tcard__photo と同じ
   ===================================================================== */
.fs-np {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3f5a2a;
  font-family: 'DotGothic16', sans-serif;
  font-size: 11px;
}

.fs-np__label {
  position: absolute;
  left: 8px;
  top: 6px;
}

/* 写真が無い時は、この絵の高さで写真の枠を作る(枠の.fs-tcard__photoは写真に合わせて高さを決めるため、高さを持たない) */
.fs-tcard__photo > .fs-np {
  position: relative;
  inset: auto;
  width: 100%;
  height: 210px;
}

/* 狭い端末(幅320px等)では地図を小さくし、左右の軸の名前(最長「ナチュラル」)が枠からはみ出さないようにする */
.fs-np__map {
  position: relative;
  width: min(170px, 100% - 108px);
  aspect-ratio: 1;
  margin-top: 8px;
}

.fs-np__grid {
  position: absolute;
  inset: 14px;
  border: 2px solid #3f5a2a;
  background:
    linear-gradient(#3f5a2a, #3f5a2a) center / 1px 100% no-repeat,
    linear-gradient(#3f5a2a, #3f5a2a) center / 100% 1px no-repeat;
}

.fs-np__you {
  position: absolute;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  padding: 3px 4px;
  background: rgba(63, 90, 42, 0.18);
}

.fs-np__pin {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 2px;
  background: #3f5a2a;
  animation: fs-np-ping 1.4s ease-out infinite;
}

@keyframes fs-np-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(63, 90, 42, 0.6);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(63, 90, 42, 0);
  }
}

.fs-np__axis {
  position: absolute;
  white-space: nowrap;
}

.fs-np__axis--top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -4px);
}

.fs-np__axis--bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 4px);
}

.fs-np__axis--left {
  left: 0;
  top: 50%;
  transform: translate(calc(-100% + 10px), -50%);
}

.fs-np__axis--right {
  right: 0;
  top: 50%;
  transform: translate(calc(100% - 10px), -50%);
}

@media (prefers-reduced-motion: reduce) {
  .fs-np__pin {
    animation: none;
  }
}

/* =====================================================================
   結果の解析レポート(_result.htmlの#fs-data、analysis_view.js。2026-10-16、案C)。閉じたアコーディオンの中に
   「測定データ」「偏差値の内訳」のタブ(data-tab: table / why)
   ===================================================================== */
.fs-data {
  padding: 0;
  overflow: hidden;
}

.fs-data__toggle {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--fs-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fs-data__toggle:focus-visible {
  outline: 3px solid var(--fs-blue);
  outline-offset: -6px;
}

.fs-data__tag {
  flex: 0 0 auto;
  padding: 3px 7px;
  background: #141414;
  color: #fff;
  font-family: 'DotGothic16', monospace;
  font-size: 11px;
  letter-spacing: 1px;
}

.fs-data__heads {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fs-data__title {
  font-size: 16px;
  font-weight: 900;
}

.fs-data__sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--fs-sub);
}

.fs-data__chev {
  flex: 0 0 auto;
  transition: transform 0.2s;
}

.fs-data__toggle[aria-expanded="true"] .fs-data__chev {
  transform: rotate(180deg);
}

.fs-data__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}

.fs-data__body[hidden] {
  display: none;
}

.fs-data__intro {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--fs-sub);
}

/* タブの出し分け */
.fs-data[data-tab="table"] .fs-data__whybox,
.fs-data[data-tab="why"] .fs-data__table {
  display: none;
}

/* タブ: 白い枠の中に2つのボタン(選んだ方を黒)。サイト共通のbuttonの角丸・余白が効くと
   仕切り線が欠けて重なって見えたため、枠の内側に余白を取り、ボタンはそれぞれ角丸にする */
.fs-data__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 3px solid #141414;
  border-radius: 14px;
}

.fs-data__tabs button {
  min-height: 42px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #141414;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  box-shadow: none;
  cursor: pointer;
}

.fs-data__tabs button[aria-selected="true"] {
  background: #141414;
  color: #fff;
}

.fs-data__tabs button:focus-visible {
  outline: 3px solid var(--fs-blue);
  outline-offset: 1px;
}

/* 測定データ(緑の画面に10項目と、平均とのくらべのメーター) */
.fs-data__rows {
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #e3ecd2;
  border: 4px solid #141414;
  color: #20301a;
  font-family: 'DotGothic16', monospace;
}

.fs-data__row {
  display: grid;
  grid-template-columns: 7.6em 4.4em minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  min-height: 38px;
}

.fs-data__label {
  font-family: var(--fs-font, sans-serif);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.fs-data__value {
  font-size: 15px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fs-data__meter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fs-data__track {
  position: relative;
  display: block;
  height: 10px;
  border: 2px solid #3f5a2a;
  background: linear-gradient(#3f5a2a, #3f5a2a) center / 2px 100% no-repeat;
}

.fs-data__mark {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  /* 緑の画面の上なので、緑やオレンジではなく画面の文字と同じ濃い色にする(2026-10-16) */
  background: #20301a;
  border: 1px solid #e3ecd2;
  transform: rotate(45deg);
}

.fs-data__ends {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  line-height: 1;
}

.fs-data__ref {
  font-size: 10px;
}

/* 偏差値の内訳(真ん中から右が点を上げた、左が下げた) */
.fs-data__why {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fs-data__legend {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  color: var(--fs-sub);
}

.fs-data__axis {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #d0d0d0;
}

.fs-data__axis[data-axis="love"] {
  --axis: #ff8fa3;
}

.fs-data__axis[data-axis="work"] {
  --axis: #4361ee;
}

.fs-data__axis[data-axis="gold"] {
  --axis: #f5b700;
}

.fs-data__axis[data-axis="road"] {
  --axis: #21c17a;
}

.fs-data__axis[data-axis="sagi"] {
  --axis: #7c5cff;
}

.fs-data__axis-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-data__axis-color {
  width: 12px;
  height: 12px;
  background: var(--axis);
  border: 2px solid #141414;
}

.fs-data__axis-name {
  flex: 1;
  font-size: 13px;
  font-weight: 900;
}

.fs-data__axis-score {
  font-family: 'DotGothic16', monospace;
  font-size: 20px;
}

.fs-data__axis-note {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--fs-sub);
}

.fs-data__factor {
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.fs-data__factor-text {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.fs-data__factor-bar {
  position: relative;
  display: block;
  height: 12px;
  background: linear-gradient(#141414, #141414) center / 2px 100% no-repeat, #f2f2f2;
}

.fs-data__factor-bar i {
  position: absolute;
  top: 2px;
  bottom: 2px;
}

.fs-data__factor-bar .is-plus {
  left: 50%;
  background: var(--axis);
}

.fs-data__factor-bar .is-minus {
  right: 50%;
  background: #9aa3ad;
}

.fs-data__foot {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fs-sub);
}

/* 開発用の表示の切り替え(devのみ、script.jsのinitDevSwitch)。非表示にすると本番と同じ見え方 */
.fs-dev-hidden #fs-samples,
.fs-dev-hidden #fs-debug {
  display: none !important;
}

.fs-dev-switch {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 3px 3px 10px;
  background: #fff;
  border: 2px solid #141414;
  border-radius: 999px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0.92;
}

.fs-dev-switch span {
  margin-right: 4px;
}

.fs-dev-switch button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #141414;
  font: inherit;
  cursor: pointer;
}

.fs-dev-switch button[aria-pressed="true"] {
  background: #141414;
  color: #fff;
}

/* =====================================================================
   この診断について(_about.html。2026-10-15、モック「顔面偏差値: この診断について」の案A)
   ===================================================================== */
.fs-about__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.fs-about-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: #fff3c4;
  border: 3px dashed #141414;
  border-radius: 14px;
}

.fs-about-note svg {
  flex: 0 0 22px;
  margin-top: 2px;
}

.fs-about-note__title {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

.fs-about-note__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

/* この診断について: 参考にした研究(ご注意の下)。本文より小さく控えめに */
.fs-about-refs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 2px dashed #d0d0d0;
}

.fs-about-refs__title {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}

.fs-about-refs__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #3a3a3a;
}

.fs-about-refs__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 1.5;
}

/* 番号は本文の[1]〜[4]と同じ形(リストの番号だと「1.」になるため、文字で出す) */
.fs-about-refs__list li {
  display: flex;
  gap: 4px;
}

.fs-about-refs__num {
  flex: 0 0 auto;
}

.fs-about-refs__list a {
  min-width: 0;
  color: #3a3a3a;
  /* サイト共通(style.css)のword-break: break-allだと英単語の途中で折り返すため、単語の切れ目で折り返す */
  word-break: normal;
  overflow-wrap: break-word;
}

.fs-about-a {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px;
  background: #fff;
  border: var(--fs-panel-border);
  border-radius: var(--fs-radius);
  box-shadow: var(--fs-panel-shadow);
}

.fs-about-a__title {
  margin: 0;
  font-family: var(--fs-font-head);
  font-weight: 900;
  font-size: 22px;
  text-align: center;
}

.fs-about-a__label {
  align-self: flex-start;
  margin: 0;
  padding: 3px 12px;
  background: #141414;
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
}

.fs-about-a__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-about-a__steps>li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.fs-about-a__step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fs-about-a__step h3 {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 900;
}

.fs-about-a__step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.fs-about-a__axes {
  margin: 4px 0 0;
  padding: 5px;
  list-style: none;
  background-color: #fffae0;
  border-radius: 10px;
}

.fs-about-a__axes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-top: 1px dashed#e6d271;
  font-size: 13px;
  line-height: 1.7;
}

.fs-about-a__axes li:first-child {
  border-top: none;
}

.fs-about-a__axes b {
  font-weight: 900;
}

.fs-about-a__bar {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  margin-top: 7px;
}

.fs-about-a__bar i {
  width: 6px;
  height: 10px;
  background: var(--c);
}

/* 偏差値ごとの色(結果カードのステータスと同じ) */
.fs-about-a__bar--love {
  --c: #ff8fa3;
}

.fs-about-a__bar--work {
  --c: #4361ee;
}

.fs-about-a__bar--gold {
  --c: #f5b700;
}

.fs-about-a__bar--road {
  --c: #21c17a;
}

.fs-about-a__bar--sagi {
  --c: #7c5cff;
}

/* =====================================================================
   測れなかった時(_error.html、2026-10-15。モック「顔面偏差値: 測れなかった時」)
   ===================================================================== */
.fs-error__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fs-error__body[hidden] {
  display: none;
}

/* カード風の枠(エラーはオレンジの内枠) */
.fs-error__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 4px solid #141414;
  border-radius: 18px;
  box-shadow: inset 0 0 0 4px #ff6b4a, 6px 6px 0 #141414;
}

.fs-error__band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 6px 10px;
  background: #141414;
  color: #fff;
  font-family: 'DotGothic16', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
}

.fs-error__code {
  color: #ff6b4a;
}

/* 緑の画面(結果カードの写真なしの表示と同じ色) */
.fs-error__screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #e3ecd2;
  border: 4px solid #141414;
  color: #3f5a2a;
}

.fs-error__accent {
  stroke: #ff6b4a;
}

.fs .fs-error__title {
  margin: 4px 0 0;
  font-family: var(--fs-font-head);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
}

.fs-error__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.fs-error__tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border: 4px solid #141414;
  border-radius: 18px;
}

.fs-error__tips-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.fs-error__tips-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-error__tips-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* チェックの丸 */
.fs-error__tips-list li::before {
  content: '';
  flex: 0 0 20px;
  height: 20px;
  margin-top: 2px;
  box-sizing: border-box;
  border: 2px solid #141414;
  border-radius: 50%;
  background: #21c17a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}