/* MissionTodo PLUS の説明ページ（plus.html / plus_en.html）とトップページ（index.html）で使う。
   トップページだけの部品は top.css。色・素材はアプリのデフォルトテーマ（assets/themes/default）に合わせる。
   見出しの書体（@font-face の LightNovelPOP）は styles.css で読み込む。 */

:root {
  --plus-paper: #ede4d3;
  --plus-paper-dot: rgba(120, 94, 70, 0.08);
  --plus-ink: #4a3428;
  --plus-ink-soft: #6e5646;
  --plus-cocoa: #55392f;
  --plus-cocoa-line: #8a6b55;
  --plus-cream: #f6eedf;
  --plus-card: #faf5ea;
  --plus-card-line: #d8c8ad;
  --plus-gold: #c9a35b;
  --plus-gold-soft: #f3e2b6;
  --plus-red: #b23a2e;
  --plus-heading-font: 'LightNovelPOP', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
  --plus-body-font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

body.plus-page {
  font-family: var(--plus-body-font);
  color: var(--plus-ink);
  background-color: var(--plus-paper);
  background-image: radial-gradient(var(--plus-paper-dot) 1px, transparent 1.2px);
  background-size: 6px 6px;
  line-height: 1.75;
}

.plus-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 56px;
}

.plus-lang {
  text-align: right;
  font-size: 13px;
  margin-bottom: 8px;
}

.plus-lang a,
.plus-main a {
  color: var(--plus-cocoa);
}

/* ---------- ヒーロー ---------- */

.plus-hero {
  text-align: center;
  margin-bottom: 36px;
}

.plus-title-plate {
  display: inline-block;
  min-width: 280px;
  padding: 23px 58px 24px;
  background: url('assets/plus/banner.png') center / 100% 100% no-repeat;
}

.plus-title-plate h1 {
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: clamp(18px, 4.8vw, 22px);
  color: var(--plus-cream);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.plus-hero-lead {
  font-family: var(--plus-heading-font);
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.4;
  margin-top: 20px;
}

.plus-hero-sub {
  margin-top: 8px;
  color: var(--plus-ink-soft);
  font-size: 14px;
}

/* ---------- 見出し（木の帯） ---------- */

.plus-section {
  margin-top: 40px;
}

.plus-heading {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.plus-heading span {
  display: inline-block;
  min-width: 240px;
  padding: 12px 46px 13px;
  text-align: center;
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 15px;
  line-height: 1.3;
  color: var(--plus-cream);
  background: url('assets/plus/banner.png') center / 100% 100% no-repeat;
}

.plus-note {
  font-size: 13px;
  color: var(--plus-ink-soft);
  margin-top: 12px;
}

/* ---------- 特典 ---------- */

.plus-benefits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.plus-benefits li {
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 10px;
  padding: 16px 10px 14px;
  text-align: center;
}

.plus-medal {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/plus/medallion.png') center / contain no-repeat;
}

.plus-medal svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--plus-gold-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plus-benefits h3 {
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 16px;
  line-height: 1.35;
}

.plus-benefits p {
  font-size: 12px;
  color: var(--plus-ink-soft);
  margin-top: 6px;
  line-height: 1.6;
}

/* ---------- ギルドの流れ ---------- */

.plus-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  counter-reset: flow;
}

.plus-flow li {
  text-align: center;
  position: relative;
}

.plus-flow-frame {
  aspect-ratio: 1 / 1;
  padding: 14%;
  background: url('assets/plus/frame_light.png') center / 100% 100% no-repeat;
}

.plus-flow-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plus-flow-step {
  font-family: var(--plus-heading-font);
  font-size: 17px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.plus-flow-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--plus-cocoa);
  color: var(--plus-cream);
  font-size: 14px;
}

.plus-flow li p:not(.plus-flow-step) {
  font-size: 12px;
  color: var(--plus-ink-soft);
  margin-top: 4px;
  line-height: 1.6;
}

.plus-flow li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 38%;
  right: -11px;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--plus-cocoa-line);
  border-right: 3px solid var(--plus-cocoa-line);
  transform: rotate(45deg);
}

.plus-pt {
  display: inline-block;
  width: 9px;
  height: 12px;
  margin: 0 2px 0 1px;
  vertical-align: -1px;
  background: url('assets/plus/pt.png') center / contain no-repeat;
}

/* ---------- 比較表 ---------- */

.plus-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}

.plus-compare th,
.plus-compare td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--plus-card-line);
}

.plus-compare tr:last-child th,
.plus-compare tr:last-child td {
  border-bottom: none;
}

.plus-compare thead th {
  background: var(--plus-cocoa);
  color: var(--plus-cream);
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 15px;
}

.plus-compare thead th.plus-col-plus {
  background: #6b4a35;
  color: var(--plus-gold-soft);
}

.plus-compare tbody th {
  text-align: left;
  font-weight: normal;
}

.plus-compare td {
  text-align: center;
  width: 22%;
}

.plus-compare td.plus-col-plus {
  background: #fbf0d4;
}

.plus-yes,
.plus-no {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  font-size: 14px;
}

.plus-yes {
  background: var(--plus-cocoa);
  color: var(--plus-cream);
}

.plus-col-plus .plus-yes {
  background: var(--plus-gold);
  color: #fff;
}

.plus-no {
  color: var(--plus-cocoa-line);
}

/* ---------- プラン ---------- */

.plus-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.plus-plan {
  position: relative;
  border-radius: 12px;
  padding: 22px 12px 18px;
  text-align: center;
  background: var(--plus-cocoa);
  color: var(--plus-cream);
  border: 2px solid var(--plus-cocoa-line);
}

.plus-plan--recommended {
  background: #fbf0d4;
  color: var(--plus-ink);
  border-color: var(--plus-gold);
}

.plus-plan-name {
  font-family: var(--plus-heading-font);
  font-size: 17px;
}

.plus-plan-price {
  font-family: var(--plus-heading-font);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.2;
  margin-top: 4px;
}

.plus-plan-price small {
  font-size: 0.55em;
  margin-left: 2px;
}

.plus-plan-cycle {
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.85;
}

.plus-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--plus-gold);
  color: #fff;
  font-size: 12px;
  padding: 2px 14px;
  border-radius: 4px;
  white-space: nowrap;
}

.plus-save {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--plus-red);
  color: #fff;
  font-size: 12px;
}

/* ---------- 加入から終了まで ---------- */

.plus-timeline {
  list-style: none;
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 10px;
  padding: 18px 16px 6px;
}

.plus-timeline > li {
  position: relative;
  padding: 0 0 18px 50px;
}

.plus-timeline > li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 2px;
  border-left: 2px dashed var(--plus-cocoa-line);
}

.plus-timeline .plus-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/plus/medallion.png') center / contain no-repeat;
}

.plus-timeline .plus-node svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--plus-gold-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plus-timeline h3 {
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 17px;
  line-height: 36px;
}

.plus-timeline p {
  font-size: 13px;
  color: var(--plus-ink-soft);
}

.plus-after {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.plus-after li {
  background: var(--plus-paper);
  border: 1px solid var(--plus-card-line);
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 12px;
  line-height: 1.55;
}

.plus-after strong {
  display: block;
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 14px;
  color: var(--plus-ink);
  margin-bottom: 2px;
}

/* ---------- よくある質問 ---------- */

.plus-faq details {
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 10px;
  margin-bottom: 10px;
}

.plus-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 16px;
  position: relative;
  font-weight: 700;
  font-size: 15px;
}

.plus-faq summary::-webkit-details-marker {
  display: none;
}

.plus-faq summary::after {
  content: '+';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: var(--plus-cocoa);
  color: var(--plus-cream);
  font-weight: 400;
}

.plus-faq details[open] summary::after {
  content: '−';
}

.plus-faq-body {
  padding: 0 16px 14px;
  font-size: 14px;
}

.plus-faq-body ol,
.plus-faq-body ul {
  padding-left: 1.3em;
  margin: 4px 0;
}

.plus-faq-body li {
  margin-bottom: 4px;
}

/* ---------- お問い合わせ ---------- */

.plus-contact {
  text-align: center;
  font-size: 14px;
}

.plus-contact .plus-updated {
  margin-top: 16px;
  font-size: 12px;
  color: var(--plus-ink-soft);
}

/* ---------- 狭い画面 ---------- */

@media (max-width: 480px) {
  .plus-benefits,
  .plus-flow,
  .plus-after {
    gap: 8px;
  }

  .plus-benefits li {
    padding: 12px 6px 10px;
  }

  .plus-benefits h3 {
    font-size: 14px;
  }

  .plus-benefits p,
  .plus-flow li p:not(.plus-flow-step) {
    font-size: 11px;
  }

  /* 3 列だと「ショップで交換」が折り返すので、番号を見出しの上に置く */
  .plus-flow-step {
    font-size: 14px;
    flex-direction: column;
    gap: 4px;
  }

  .plus-flow li:not(:last-child)::after {
    right: -8px;
    width: 7px;
    height: 7px;
  }

  .plus-compare {
    font-size: 13px;
  }

  .plus-after {
    grid-template-columns: 1fr;
  }
}

/* 表の見出しなど、画面には出さず読み上げにだけ使う文字 */
.plus-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- ギルドで PLUS が要ること・要らないこと ---------- */

.plus-roles {
  display: grid;
  gap: 12px;
}

.plus-role {
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-left: 6px solid var(--plus-role-color, var(--plus-cocoa));
  border-radius: 10px;
  padding: 14px 16px 12px;
}

.plus-role--free {
  --plus-role-color: #7d9461;
}

.plus-role--plus {
  --plus-role-color: var(--plus-gold);
}

.plus-role--owner {
  --plus-role-color: var(--plus-cocoa);
}

.plus-role h3 {
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.plus-role ul {
  list-style: none;
  margin-top: 8px;
}

.plus-role li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  margin-bottom: 4px;
}

.plus-role li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--plus-role-color);
  border-bottom: 2px solid var(--plus-role-color);
  transform: rotate(-45deg);
}

.plus-role li small {
  display: block;
  font-size: 12px;
  color: var(--plus-ink-soft);
}

/* ---------- 使い方の例 ---------- */

.plus-patterns {
  display: grid;
  gap: 12px;
}

.plus-pattern {
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 10px;
  padding: 14px 16px;
}

.plus-pattern h3 {
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 16px;
}

.plus-people {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
}

.plus-person {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--plus-paper);
  border: 1px solid var(--plus-card-line);
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  font-size: 13px;
}

.plus-person svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: var(--plus-cocoa-line);
}

.plus-chip {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.plus-chip--plus {
  background: var(--plus-gold);
  color: #fff;
}

.plus-chip--free {
  background: #e3e9d6;
  color: #4f6337;
}

.plus-chip--owner {
  background: var(--plus-cocoa);
  color: var(--plus-cream);
}

.plus-pattern p {
  font-size: 14px;
}

.plus-pattern .plus-pattern-sum {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--plus-cocoa);
}

@media (min-width: 640px) {
  .plus-patterns {
    grid-template-columns: 1fr 1fr;
  }
}


.plus-section-lead {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.plus-chip--ended {
  background: #ddd5c6;
  color: var(--plus-ink-soft);
}

/* ---------- ギルドを使う前に（囲み） ---------- */

.plus-callout {
  background: #fbf3df;
  border: 1.5px dashed var(--plus-gold);
  border-radius: 10px;
  padding: 14px 16px 10px;
  margin-bottom: 14px;
}

.plus-callout h3 {
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 16px;
  margin-bottom: 6px;
}

.plus-callout dl {
  margin: 0;
}

.plus-callout dt {
  font-weight: 700;
  font-size: 14px;
  margin-top: 6px;
}

.plus-callout dd {
  margin: 2px 0 6px;
  font-size: 13px;
  color: var(--plus-ink-soft);
}

/* ---------- 運営より ---------- */

.plus-message {
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 12px;
  padding: 18px 18px 14px;
  font-size: 14px;
}

.plus-message p + p {
  margin-top: 10px;
}

.plus-message .plus-message-sign {
  text-align: right;
  font-size: 13px;
  color: var(--plus-ink-soft);
}


/* ---------- 機種変更で引き継げるもの（よくある質問の中の表） ---------- */

.plus-transfer {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 8px 0 10px;
}

.plus-transfer th,
.plus-transfer td {
  border: 1px solid var(--plus-card-line);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.plus-transfer thead th {
  background: var(--plus-cocoa);
  color: var(--plus-cream);
  font-weight: 700;
}

.plus-transfer tbody th {
  background: var(--plus-paper);
  font-weight: 700;
  width: 24%;
}

.plus-ok,
.plus-ng {
  font-weight: 700;
}

.plus-ok {
  color: #4f6337;
}

.plus-ng {
  color: var(--plus-red);
}

/* ---------- アカウントと購入の関係（決まり・たどる図・早見表） ---------- */

.plus-acct-rules {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
}

.plus-acct-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 12px;
  padding: 12px 14px;
}

.plus-acct-rule p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--plus-ink-soft);
}

.plus-acct-rule strong {
  display: block;
  font-size: 15px;
  color: var(--plus-ink);
}

.plus-acct-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/plus/medallion.png') center / contain no-repeat;
}

.plus-acct-icon svg,
.plus-route-ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plus-acct-icon svg {
  width: 20px;
  height: 20px;
  color: var(--plus-gold-soft);
}

@media (min-width: 640px) {
  .plus-acct-rules {
    grid-template-columns: 1fr 1fr;
  }
}

.plus-acct-subtitle {
  font-family: var(--plus-heading-font);
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  color: var(--plus-cocoa);
  margin: 0 0 4px;
}

.plus-acct-hint {
  font-size: 12.5px;
  text-align: center;
  color: var(--plus-ink-soft);
  margin: 0 0 12px;
}

/* 記号: ○ そのまま / → 付け替わる / × 移らない / – 関係なし */
.plus-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: system-ui, sans-serif;
}

.plus-mark--ok { background: #5b8c5a; }
.plus-mark--move { background: var(--plus-gold); }
.plus-mark--ng { background: #b5655b; }
.plus-mark--na { background: #cbbfb0; }

.plus-marks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
}

.plus-marks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* たどる図 */
.plus-route {
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 14px;
  padding: 14px 12px 12px;
}

.plus-route-start {
  display: inline-block;
  margin: 0;
  background: var(--plus-cocoa);
  color: var(--plus-gold-soft);
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 6px 16px;
}

.plus-route ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
}

.plus-route li {
  position: relative;
  padding: 10px 0 0 24px;
}

/* 道（縦の線と、枝の横線） */
.plus-route li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 3px solid var(--plus-gold);
}

.plus-route li:last-child::before {
  bottom: auto;
  height: 30px;
}

.plus-route li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 27px;
  width: 20px;
  border-top: 3px solid var(--plus-gold);
}

/* 分かれ道の名前（押せない）は枠なし、選ぶもの（押せる）はボタン */
.plus-route-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--plus-cocoa);
  line-height: 1.4;
}

.plus-route-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--plus-cocoa-line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--plus-cocoa);
  line-height: 1.4;
}

.plus-route-ico {
  flex: none;
  width: 20px;
  height: 20px;
}

.plus-route-ask {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--plus-ink-soft);
}

.plus-route-pick {
  cursor: pointer;
  padding-left: 14px;
}

.plus-route-pick::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
}

.plus-route input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plus-route input:focus-visible + .plus-route-pick {
  outline: 3px solid var(--plus-gold);
  outline-offset: 2px;
}

/* 答え（選んだときだけ出す） */
.plus-route-answer {
  display: none;
  margin: 8px 0 4px;
  background: #fff;
  border: 3px solid var(--plus-gold);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 2px 0 rgba(90, 60, 40, 0.12);
}

.plus-route-todo {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--plus-cocoa);
}

.plus-route-todo span {
  display: inline-block;
  margin-right: 6px;
  background: var(--plus-gold);
  color: #fff;
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 11px;
  vertical-align: 1px;
}

.plus-route .plus-route-result {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.plus-route .plus-route-result li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 13px;
}

.plus-route .plus-route-result li::before,
.plus-route .plus-route-result li::after {
  display: none;
}

.plus-route-result .plus-route-ico {
  color: var(--plus-cocoa);
}

.plus-route-result .what {
  flex: 1;
  font-size: 11.5px;
  color: var(--plus-ink-soft);
  line-height: 1.35;
}

.plus-route-result .what strong {
  display: block;
  font-size: 14px;
  color: var(--plus-ink);
}

.plus-route-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--plus-ink-soft);
}

.plus-route li:has(> input:checked) > .plus-route-answer {
  display: block;
}

/* 選んだ道を濃く、ほかを薄く */
.plus-route:has(input:checked) li:not(:has(input:checked)) > .plus-route-node,
.plus-route:has(input:checked) li:not(:has(input:checked)) > .plus-route-pick,
.plus-route:has(input:checked) li:not(:has(input:checked)) > .plus-route-ask {
  opacity: 0.45;
}

.plus-route:has(input:checked) li:not(:has(input:checked))::before,
.plus-route:has(input:checked) li:not(:has(input:checked))::after {
  border-color: #e4d6bd;
}

.plus-route li:has(input:checked)::before,
.plus-route li:has(input:checked)::after {
  border-color: var(--plus-cocoa);
}

.plus-route input:checked + .plus-route-pick {
  background: var(--plus-cocoa);
  border-color: var(--plus-cocoa);
  color: var(--plus-gold-soft);
}

/* :has が使えないブラウザでは、答えを全部出しておく */
@supports not selector(:has(a)) {
  .plus-route-answer {
    display: block;
  }
}

/* 早見表 */
.plus-acct-table-wrap {
  margin-top: 26px;
}

.plus-acct-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--plus-card);
  border: 1px solid var(--plus-card-line);
  border-radius: 12px;
  overflow: hidden;
}

.plus-acct-table thead th {
  background: var(--plus-cocoa);
  color: var(--plus-gold-soft);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 4px;
  width: 33.3%;
}

.plus-acct-table thead small {
  display: block;
  font-weight: normal;
  font-size: 10.5px;
  opacity: 0.85;
}

.plus-acct-table thead .plus-route-ico {
  display: block;
  margin: 0 auto 3px;
}

.plus-acct-table tbody th {
  text-align: left;
  font-size: 13.5px;
  padding: 10px 12px 0;
  background: #fffaf1;
}

.plus-acct-table tbody td {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 4px 10px;
  background: #fffaf1;
  border-bottom: 1px solid var(--plus-card-line);
}

.plus-acct-table tbody tr:last-child td {
  border-bottom: 0;
}

.plus-acct-table tbody td .plus-mark {
  display: flex;
  margin: 0 auto 4px;
}

.plus-acct-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--plus-ink-soft);
}