/* 答え合わせ相性占い(モック「答え合わせ相性占い: デザイン案」のC改5) */
.ka {
  --ka-black: #000000;
  --ka-gray: #444444;
  --ka-mint: #BFE6E8;
  --ka-lavender: #DCC8F0;
  --ka-yellow: #F3FF6C;
  background: #FFFFFF;
  color: var(--ka-black);
  font-family: 'Noto Sans JP', sans-serif;
  overflow-x: clip;
}

.ka *,
.ka *::before,
.ka *::after {
  box-sizing: border-box;
}

.ka-en {
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ka-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 流れる帯 */
.ka-marquee {
  height: 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ka-yellow);
  border-top: 1px solid var(--ka-black);
  border-bottom: 1px solid var(--ka-black);
}

.ka-marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 14px;
  padding-right: 14px;
  white-space: nowrap;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  /* 同じ並びを12回置き(半分=6回分でも広い画面の幅より長い)、半分の幅だけ動かしてつなぎ目を消す。
     2回だけだと、並び1回分が画面より短い時に右端が途切れていた。速さは1回分あたり18秒のまま */
  animation: ka-marquee 108s linear infinite;
}

.ka-marquee__track span {
  display: inline-block;
}

@keyframes ka-marquee {
  from {
    transform: translateX(0);
  }

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

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

.ka-body {
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* 下の画面のパンくず(_crumb.html)。.ka-bodyのgapを打ち消して次の要素に寄せる */
.ka-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: -6px 0 -14px;
  color: #666666;
}

.ka-crumb a {
  color: inherit;
  text-decoration: underline;
}

/* 丸いラベル */
.ka-pill {
  align-self: flex-start;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

.ka-pill--black {
  background: var(--ka-black);
  color: #FFFFFF;
  font-size: 13px;
}

.ka-pill--lavender {
  background: var(--ka-lavender);
}

.ka-pill--yellow {
  background: var(--ka-yellow);
}

/* 入口のメイン */
.ka-hero {
  background: var(--ka-mint);
  border-radius: 20px;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ka-hero__tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ka-hero__kicker {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.ka-hero__en {
  /* 「シ」の左の余白が大きな文字だと約5px出るので、下の文字にそろえる */
  margin: 0 0 0 -4px;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 800;
  font-size: 52px;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* 「シンクロ13」を1行に。狭い画面では文字を小さくする */
@media screen and (max-width: 359px) {
  .ka-hero__en {
    font-size: 44px;
  }
}

.ka-hero__title {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.35;
}

/* 入口の見出しは1行に収める(13文字。ヒーローの内側の幅に合わせて小さくする) */
.ka-hero .ka-hero__title.ka-hero__title--oneline {
  font-size: min(24px, 5.8vw);
  white-space: nowrap;
}

.ka-hero__lead {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}

.ka-sample {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.ka-sample__card {
  aspect-ratio: 4 / 5;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ka-sample__who {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.ka-sample__answer {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
}

/* 見出し(英字＋日本語) */
/* style.cssの全体のform・labelの指定(枠・背景・max-width 500px等)を打ち消す */
.ka-section {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ka-heading {
  display: flex;
  flex-direction: column;
}

.ka-heading__en {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.ka-heading__ja {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 900;
}

/* 関係を選ぶ */
.ka-relations {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ka-relation {
  position: relative;
  min-height: 72px;
  margin: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 20px;
  cursor: pointer;
}

/* 関係が奇数個の時、最後の1つは横いっぱい(先頭にlegendがあるためof-typeで数える) */
.ka-relation:last-of-type:nth-of-type(odd) {
  grid-column: 1 / -1;
}

.ka-relation input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ka-relation:has(input:checked) {
  background: var(--ka-lavender);
  border-width: 2px;
  padding: 9px 13px;
}

.ka-relation:has(input:focus-visible) {
  outline: 3px solid var(--ka-black);
  outline-offset: 2px;
}

.ka-relation__en {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.ka-relation__label {
  font-size: 15px;
  font-weight: 900;
}

.ka-note {
  margin: 0;
  font-size: 12px;
  color: var(--ka-gray);
}

.ka-cta {
  width: 100%;
  min-height: 56px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ka-black);
  color: #FFFFFF;
  border: 0;
  border-radius: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

/* あそびかた */
.ka-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ka-step {
  min-height: 110px;
  padding: 12px 10px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.ka-step--mint {
  background: var(--ka-mint);
}

.ka-step--lavender {
  background: var(--ka-lavender);
}

.ka-step--yellow {
  background: var(--ka-yellow);
}

.ka-step__num {
  font-size: 26px;
  line-height: 1;
}

.ka-link {
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ka-black);
  text-decoration: underline;
}

/* 質問ページ */
.ka-qbar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ka-yellow);
  border-bottom: 1px solid var(--ka-black);
}

.ka-qbar__title {
  font-size: 15px;
}

.ka-qbar__rel {
  align-self: center;
  font-size: 12px;
  border: 1px solid var(--ka-black);
}

.ka-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-progress__count {
  font-size: 15px;
  color: var(--ka-gray);
}

.ka-progress__now {
  font-size: 30px;
  color: var(--ka-black);
}

.ka-progress__bar {
  height: 10px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  overflow: hidden;
  background: #FFFFFF;
}

.ka-progress__bar span {
  display: block;
  height: 100%;
  background: var(--ka-mint);
  border-right: 1px solid var(--ka-black);
}

.ka-question {
  background: var(--ka-mint);
  border-radius: 20px;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 質問の切り替え(2026-10-30 ユーザー指示): 開いた時にフェードイン、答えを選んだらフェードアウト(questions.js)してから次へ */
.ka-question {
  animation: ka-q-in 0.3s ease-out both;
}

.ka-question.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease-in, transform 0.18s ease-in;
}

/* 選んだ答えは、消える前に一瞬だけ黄色に */
.ka-choice.is-picked {
  background: var(--ka-yellow);
}

@keyframes ka-q-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

  .ka-question.is-leaving {
    transition: none;
  }
}

.ka-question__text {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
}

.ka-choices {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-choice {
  min-height: 58px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  color: var(--ka-black);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.15s;
}

.ka-choice:hover {
  background: var(--ka-yellow);
  color: var(--ka-black);
}

.ka-choice.is-selected {
  background: var(--ka-lavender);
  border-width: 2px;
  padding: 7px 13px;
}

.ka-choice__key {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ka-black);
  color: #FFFFFF;
  font-size: 16px;
  letter-spacing: 0;
}

/* もどる系のリンク(質問・ニックネーム・最後の1問・消す・答え終わりで共通)。白地・黒枠・←つきのボタン(2026-10-29、モックの案A) */
.ka-back {
  align-self: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 20px 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  box-shadow: 0 3px 0 var(--ka-black);
  font-size: 14px;
  font-weight: 900;
  color: var(--ka-black);
  text-decoration: none;
}

.ka-back::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ka-back:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ka-black);
}

/* 全問おわり(確認用) */
.ka-done {
  background: var(--ka-lavender);
  border-radius: 20px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-done__en {
  margin: 0;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 0.9;
}

.ka-done__title {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.ka-answers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-answers__row {
  padding: 10px 14px;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 13px;
}

.ka-answers__no {
  grid-row: span 2;
  font-size: 15px;
}

.ka-answers__text {
  font-weight: 700;
}

.ka-answers__answer {
  font-weight: 900;
}

/* 選択肢はフォームのボタン(style.cssの全体のform・buttonの指定を打ち消す) */
form.ka-choices {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* style.cssのbutton[type="submit"](色・余白・枠・角丸・文字の大きさ)より強くするため要素名つきで指定 */
button.ka-choice {
  width: 100%;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  color: var(--ka-black);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

button.ka-cta {
  padding: 0 20px;
  border: 0;
  border-radius: 50px;
  color: #FFFFFF;
  font-size: 16px;
}

button.ka-choice:focus-visible {
  outline: 3px solid var(--ka-black);
  outline-offset: 2px;
}

/* お知らせ・続きから */
.ka-alert {
  margin: 0;
  padding: 12px 14px;
  background: var(--ka-yellow);
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.ka-resume {
  padding: 16px;
  border: 2px solid var(--ka-black);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-resume__text {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.6;
}

.ka-resume__sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ka-gray);
}

.ka-resume__link {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ka-yellow);
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  color: var(--ka-black);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

/* ニックネーム */
.ka-done__lead {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

input.ka-input {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--ka-black);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
}

input.ka-input:focus-visible {
  outline: 3px solid var(--ka-lavender);
  outline-offset: 1px;
  border-width: 2px;
}

input.ka-input.is-error {
  border: 2px solid #C0262D;
}

.ka-error {
  margin: 0;
  color: #C0262D;
  font-size: 13px;
  font-weight: 700;
}

.ka-notes {
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ka-gray);
}

.ka-notes strong {
  color: var(--ka-black);
}

button.ka-cta:disabled {
  background: #ECEEF1;
  color: var(--ka-gray);
  cursor: default;
}

/* たたんだ答えの一覧 */
.ka-details {
  border: 1px solid var(--ka-black);
  border-radius: 20px;
  padding: 0 14px;
}

.ka-details summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.ka-details[open] {
  padding-bottom: 14px;
}

/* 1人目専用ページ */
.ka-hero--owner .ka-hero__title,
.ka-hero .ka-hero__title {
  font-size: 24px;
}

.ka-share {
  margin-top: 4px;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-share__url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ka-share__url-row .ka-share__url,
.ka-share__url-row .ka-share-preview__url {
  flex: 1;
  min-width: 0;
}

/* URLだけをコピー。押しやすさのため44px */
.ka-share__url-copy {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 12px;
  cursor: pointer;
}

.ka-share__url-copy:active {
  transform: translateY(1px);
}

.ka-share__url {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  word-break: break-all;
  color: var(--ka-gray);
}

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

.ka-share__line,
button.ka-share__copy,
button.ka-keep__copy {
  min-height: 50px;
  margin: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.ka-share__line {
  background: #06C755;
  color: #FFFFFF;
  border: 1px solid var(--ka-black);
}

.ka-share__line:hover {
  color: #FFFFFF;
}

button.ka-share__copy,
button.ka-keep__copy {
  background: var(--ka-yellow);
  color: var(--ka-black);
  border: 1px solid var(--ka-black);
}

.ka-keep {
  padding: 16px;
  border: 2px solid var(--ka-black);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-keep__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.ka-keep__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.ka-count {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ka-gray);
}

.ka-received {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-received__row {
  min-height: 56px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
}

.ka-received__name {
  font-size: 15px;
  font-weight: 900;
}

.ka-received__score {
  font-size: 26px;
}

.ka-received__score small {
  margin-left: 2px;
  font-size: 12px;
}

.ka-empty {
  margin: 0;
  padding: 24px 16px;
  background: var(--ka-mint);
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}

/* 入口: 前に作った相性占いへの近道 */
.ka-mine {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  color: var(--ka-black);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

/* 最後の1問(誘われた人が答える時) */
.ka-question--last {
  background: var(--ka-lavender);
}

.ka-question__lead {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 900;
}

.ka-question__lead .ka-en {
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* 最後の1問を作る */
.ka-templates {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ka-template {
  min-height: 40px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--ka-black);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ka-template:hover {
  background: var(--ka-yellow);
  color: var(--ka-black);
}

.ka-template.is-selected {
  background: var(--ka-lavender);
  border-width: 2px;
  padding: 5px 13px;
}

.ka-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-field__label {
  padding: 0;
  font-size: 13px;
  font-weight: 900;
}

input.ka-input--square {
  min-height: 50px;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 16px;
}

.ka-custom__choices {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ka-custom__choices legend {
  margin-bottom: 8px;
}

.ka-custom__choice {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ka-custom__choice .ka-input {
  flex: 1;
  min-width: 0;
}

/* 最後の1問: 定型の問題はアコーディオン(よくある質問と同じ見た目) */
.ka-custom__pick-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ka-custom__pick-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--ka-gray);
}

/* 最後の1問: ①の「リストから選ぶ」の中のチップ(定型をランダムに数こ。選ぶと問題と選択肢が入る) */
.ka-custom__featured {
  gap: 6px;
}

.ka-custom__featured .ka-template {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 12px;
}

.ka-custom__featured .ka-template.is-selected {
  padding: 3px 11px;
}

/* 最後の1問: ①書く ②正解 のまとまり。間は点線(上のSTEPの下と同じ)、見出しは番号つき */
/* 枠の中の間隔(STEP・見出しの間)は .ka-stepbox の14px。まとまりの間は点線の上下で約24px */
.ka-custom__sec {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px dashed var(--ka-black);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ka-custom__sechead {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}

.ka-custom__secnum {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ka-black);
  color: var(--ka-yellow);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}

.ka-custom__sechead .ka-field__hint {
  font-size: 12px;
}

p.ka-custom__note {
  margin: 0;
  font-size: 12px;
  color: #888888;
}

/* ①の中の「思いつかない時は…リストから選ぶ」(番号なしの補助。いつも閉じて出す) */
.ka-custom__helper>summary {
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.ka-custom__helper>summary::-webkit-details-marker {
  display: none;
}

.ka-custom__helper-text {
  font-size: 12px;
  color: #888888;
}

.ka-custom__helper-btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 900;
}

.ka-custom__helper-plus {
  transition: transform .2s;
}

.ka-custom__helper[open] .ka-custom__helper-plus {
  transform: rotate(45deg);
}

.ka-custom__helper-body {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ②正解: A〜Dのボタン1列(中身はラジオボタン)。選ぶと黄色＋✓、空欄の選択肢は押せない */
.ka-custom__answers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

label.ka-custom__answer {
  position: relative;
  margin: 0;
  min-height: 64px;
  padding: 6px 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  color: var(--ka-black);
  cursor: pointer;
}

/* style.cssの全体のラジオボタンの見た目(::beforeの丸)を消す */
label.ka-custom__answer input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

label.ka-custom__answer input[type="radio"]::before {
  display: none;
}

.ka-custom__answer-key {
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0;
}

.ka-custom__answer-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

label.ka-custom__answer:has(input:checked) {
  background: var(--ka-yellow);
  border-width: 2px;
  box-shadow: 0 3px 0 var(--ka-black);
}

label.ka-custom__answer:has(input:checked) .ka-custom__answer-key::before {
  content: "✓ ";
}

label.ka-custom__answer:has(input:checked) .ka-custom__answer-text {
  font-weight: 900;
}

label.ka-custom__answer:has(input:disabled) {
  background: #F4F4F4;
  border: 1px dashed #BBBBBB;
  color: #AAAAAA;
  cursor: default;
}

label.ka-custom__answer:has(input:disabled) input {
  cursor: default;
}

label.ka-custom__answer:has(input:focus-visible) {
  outline: 3px solid var(--ka-lavender);
  outline-offset: 2px;
}

/* 定型を入れた直後の一言 */
p.ka-custom__filled {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

/* 自分で書いた後に定型を選んだ時の確認 */
dialog.ka-confirm {
  width: min(320px, calc(100% - 40px));
  padding: 22px 18px 18px;
  border: 1px solid var(--ka-black);
  border-radius: 20px;
  background: #FFFFFF;
  color: var(--ka-black);
  box-shadow: 0 4px 0 var(--ka-black);
  text-align: center;
}

dialog.ka-confirm::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

p.ka-confirm__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
}

p.ka-confirm__text {
  margin: 0 0 16px;
  font-size: 14px;
}

.ka-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ka-confirm__actions .ka-cta,
.ka-confirm__actions .ka-sub {
  min-height: 48px;
  font-size: 14px;
}

.ka-custom__pick .ka-templates {
  margin-bottom: 14px;
  gap: 6px;
}

.ka-custom__pick .ka-template {
  min-height: 36px;
  padding: 4px 12px;
  font-size: 12px;
}

.ka-custom__pick .ka-template.is-selected {
  padding: 3px 11px;
}

.ka-field__hint {
  font-weight: 400;
  color: #888888;
}

/* 問題の欄は主役なので太く大きく */
input.ka-input--square.ka-custom__text {
  border-width: 2px;
  font-size: 17px;
  font-weight: 900;
}

button.ka-sub {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--ka-black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.ka-custom-summary {
  padding: 14px 16px;
  background: var(--ka-lavender);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ka-custom-summary p {
  margin: 0;
}

.ka-custom-summary__en {
  font-size: 13px;
  letter-spacing: 0.1em;
}

.ka-custom-summary__text {
  font-size: 15px;
  font-weight: 900;
}

.ka-custom-summary__answer {
  font-size: 13px;
  font-weight: 700;
}

.ka-custom-summary__link {
  align-self: flex-end;
  min-height: 36px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--ka-black);
  text-decoration: underline;
}

/* ニックネームの画面の「ここまでの内容」(ニックネームとボタンの間。進んできた順: 12問の答え → 最後の1問) */
.ka-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-review__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.ka-review__hint {
  font-size: 12px;
  font-weight: 400;
  color: #888888;
}

/* たたんだ12問(押すと開く・もう一度押すと閉じる) */
.ka-review .ka-details {
  background: #FFFFFF;
}

.ka-review .ka-details summary {
  list-style: none;
  justify-content: space-between;
  gap: 10px;
}

.ka-review .ka-details summary::-webkit-details-marker {
  display: none;
}

.ka-review .ka-details[open] .ka-faq__plus {
  transform: rotate(45deg);
}

/* 1行ずつ「なおす」(その質問へ飛び、答えたらこの画面に戻る) */
.ka-answers__row--fix {
  grid-template-columns: auto 1fr auto;
}

.ka-answers__row--fix .ka-answers__text,
.ka-answers__row--fix .ka-answers__answer {
  grid-column: 2;
}

.ka-answers__row--fix .ka-answers__fix {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  min-height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--ka-black);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.ka-answers__row--fix .ka-answers__fix:hover {
  background: var(--ka-yellow);
  color: var(--ka-black);
}

/* 届いた答えの一覧(1人目専用ページ) */
a.ka-received__row {
  color: var(--ka-black);
  text-decoration: none;
}

a.ka-received__row:hover {
  background: var(--ka-yellow);
  color: var(--ka-black);
}

.ka-received__who {
  display: flex;
  flex-direction: column;
}

.ka-received__type {
  font-size: 12px;
  font-weight: 700;
  color: var(--ka-gray);
}

/* 2人の結果 */
.ka-pill--white {
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  font-size: 12px;
}

.ka-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ka-lavender);
  border: 1px solid var(--ka-black);
  border-radius: 20px;
}

.ka-card__circle {
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--ka-mint);
}

.ka-card__top,
.ka-card__middle,
.ka-card__bottom {
  position: relative;
}

.ka-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ka-card__label {
  font-size: 16px;
  letter-spacing: 0.1em;
}

.ka-card__middle {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ka-card__names {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.ka-card__score {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.ka-card__num {
  font-size: 150px;
  line-height: 0.8;
  letter-spacing: -0.02em;
}

.ka-card__pts {
  font-size: 26px;
  padding-bottom: 6px;
}

.ka-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-card__type {
  align-self: flex-start;
  padding: 4px 16px;
  background: var(--ka-yellow);
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  font-size: 22px;
  font-weight: 900;
}

.ka-card__brand {
  font-size: 13px;
}

/* PC(768px以上)は横長のカード(2026-10-30、ユーザー判断でモック「シンクロ13: 結果のヘッダー(PC)」の案B)。
   4:5のままだと本文の幅600pxで高さ710pxになり、最初の画面がカードだけで埋まるため。
   左に%、右に名前とタイプ。HTMLはスマホと同じで、中段・下段の枠をdisplay: contentsでほどいて並べ直す。スマホは今のまま */
@media screen and (min-width: 768px) {
  .ka-card {
    aspect-ratio: auto;
    min-height: 270px;
    box-sizing: border-box;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto 1fr auto;
    grid-template-areas:
      "top   top"
      "score ."
      "score names"
      "score type"
      "score ."
      "brand brand";
    column-gap: 28px;
    row-gap: 10px;
  }

  .ka-card__middle,
  .ka-card__bottom {
    display: contents;
  }

  .ka-card__top {
    grid-area: top;
  }

  .ka-card__names {
    grid-area: names;
    position: relative;
    font-size: 20px;
  }

  .ka-card__score {
    grid-area: score;
    position: relative;
    align-self: center;
    padding: 8px 0;
  }

  .ka-card__num {
    font-size: 140px;
  }

  .ka-card__type {
    grid-area: type;
    position: relative;
    justify-self: start;
    font-size: 20px;
  }

  .ka-card__brand {
    grid-area: brand;
    position: relative;
  }

  .ka-card__circle {
    width: 200px;
    height: 200px;
  }
}

.ka-type p {
  margin: 0;
}

.ka-type {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-type__comment {
  font-size: 18px;
  font-weight: 900;
}

.ka-type__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
}

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

.ka-count-pill {
  padding: 8px 0;
  border-radius: 50px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.ka-mark {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 900;
}

.ka-mark--match {
  background: var(--ka-yellow);
}

.ka-mark--near {
  background: #FFF9C2;
}

.ka-mark--diff {
  background: #ECEEF1;
  color: var(--ka-gray);
}

/* 正反対は1人目の色(ラベンダー)と分けて、薄い赤(2026-11-04、ユーザー指示) */
.ka-mark--opposite {
  background: #FFD6CC;
}

.ka-check {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-check__row {
  padding: 12px 14px 14px;
  border: 1px solid var(--ka-black);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-check__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.ka-check__q {
  font-size: 13px;
  font-weight: 900;
}

.ka-check__no {
  margin-right: 8px;
  font-size: 15px;
}

/* 答え合わせ(案B): 名前は上に1回、2人は色つきの丸(頭の1文字)で見分ける */
.ka-check__legend {
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  font-weight: 700;
}

.ka-check__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow-wrap: anywhere;
}

.ka-check__lead {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ka-gray);
}

.ka-dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid var(--ka-black);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.ka-dot--owner {
  background: var(--ka-lavender);
}

.ka-dot--guest {
  background: var(--ka-mint);
}

/* ものさし: 4つの答えを等間隔に並べ、2人の間を線の色で(近い=黄・ちがった=灰) */
.ka-scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.ka-scale__line,
.ka-scale__gap {
  position: absolute;
  top: 13px;
  height: 3px;
  background: #E2E2E2;
}

.ka-scale__gap {
  top: 12px;
  height: 5px;
}

.ka-scale--near .ka-scale__gap {
  background: #FFF9C2;
}

.ka-scale--diff .ka-scale__gap {
  background: #D0D3D8;
}

.ka-scale--opposite .ka-scale__gap {
  background: #F5A898;
}

.ka-scale__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.ka-scale__stop .ka-dot {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.ka-scale__stop .ka-dot--both {
  width: 30px;
  height: 30px;
  border-width: 2px;
  background: linear-gradient(90deg, var(--ka-lavender) 50%, var(--ka-mint) 50%);
  font-size: 10px;
}

.ka-scale__point {
  margin: 9px 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CFCFCF;
}

.ka-scale__label {
  padding: 0 2px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 500;
  color: #888888;
  overflow-wrap: anywhere;
}

.ka-scale__stop.is-picked .ka-scale__label {
  font-weight: 900;
  color: var(--ka-black);
}

/* ふるまいの問: 同じなら「2人とも〇〇」、ちがえば「〇〇 × 〇〇」 */
.ka-check__both {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.ka-check__dots {
  display: inline-flex;
}

.ka-check__dots .ka-dot+.ka-dot {
  margin-left: -6px;
}

.ka-check__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.ka-check__chip {
  padding: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ka-check__chip--owner {
  background: #F8F5FF;
}

.ka-check__chip--guest {
  background: #EEF8F8;
}

.ka-check__x {
  font-size: 14px;
  font-weight: 900;
}

/* 最後の1問(案B): 吹き出しの問題＋フリップ2枚。当たれば〇、はずれは×を重ねる */
.ka-last {
  padding: 18px 16px;
  background: #FAFAF2;
  border: 2px solid var(--ka-black);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ka-last p {
  margin: 0;
}

.ka-last__en {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.ka-last__q {
  position: relative;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  text-align: center;
}

/* 吹き出しのしっぽ */
.ka-last__q::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border-right: 1px solid var(--ka-black);
  border-bottom: 1px solid var(--ka-black);
  transform: translateX(-50%) rotate(45deg);
}

.ka-last__from,
.ka-last__who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ka-last__from {
  margin-bottom: 4px;
  color: var(--ka-gray);
}

.ka-last__text {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ka-last__flips {
  position: relative;
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ka-last__flip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ka-last__card {
  min-height: 92px;
  box-sizing: border-box;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ka-black);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ka-black);
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ka-last__card--owner {
  background: var(--ka-lavender);
}

.ka-last__card--guest {
  background: var(--ka-mint);
}

/* 2枚の間に重ねる印。当たりは赤い〇、はずれは灰色の× */
.ka-last__stamp {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  color: #6B7280;
}

.ka-last.is-correct .ka-last__stamp {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  border: 6px solid #E0484F;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.ka-last__result {
  text-align: center;
  font-size: 17px;
  font-weight: 900;
}

.ka-last__plus {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  background: var(--ka-yellow);
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  font-size: 16px;
}

/* 結果の下(案A): シェア。画像で保存を主役(黄色)、X・LINEはその下に並べる。どれも入口のボタンと同じ影 */
.ka-result-share {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ka-result-share .ka-note {
  margin: 0;
}

button.ka-result-share__save {
  width: 100%;
  min-height: 60px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid var(--ka-black);
  border-radius: 50px;
  background: var(--ka-yellow);
  box-shadow: 0 4px 0 var(--ka-black);
  color: var(--ka-black);
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

button.ka-result-share__save:disabled {
  opacity: 0.6;
}

.ka-result-share .ka-note--center:empty {
  display: none;
}

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

.ka-result-share__btn {
  min-height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--ka-black);
  border-radius: 50px;
  box-shadow: 0 3px 0 var(--ka-black);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.ka-result-share__btn--x,
.ka-result-share__btn--x:hover {
  background: var(--ka-black);
  color: #FFFFFF;
}

.ka-result-share__btn--line,
.ka-result-share__btn--line:hover {
  background: #06C755;
  color: #FFFFFF;
}

/* シェアで送られる内容(文＋入口のURL)。この結果のページのURLとは別なことを見せる */
.ka-share-preview {
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px dashed var(--ka-black);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ka-share-preview p {
  margin: 0;
}

.ka-share-preview__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ka-gray);
}

.ka-share-preview__text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ka-share-preview__url {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ka-share-preview__tag {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 50px;
  background: var(--ka-mint);
  font-size: 10px;
  font-weight: 900;
}

.ka-share-preview__link {
  font-size: 12px;
  color: var(--ka-gray);
  word-break: break-all;
}

.ka-share-preview__note {
  font-size: 11px;
  color: var(--ka-gray);
}

/* 次はだれとやる？(入口のSTEP枠 .ka-stepbox の中に関係の4枚) */
.ka-next__sub {
  margin: -6px 0 0;
  font-size: 12px;
  color: var(--ka-gray);
}

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

.ka-next__item {
  min-height: 64px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--ka-black);
  text-decoration: none;
}

.ka-next__item:hover {
  color: var(--ka-black);
  box-shadow: 0 3px 0 var(--ka-black);
}

.ka-next__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--ka-black);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ka-next__label {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

/* この結果を見せる前に(入口の「ご利用の前に」と同じ灰色の箱) */
.ka-result-privacy__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

a.ka-cta--link {
  text-decoration: none;
}

a.ka-cta--link:hover {
  color: #FFFFFF;
}

/* 結果の下のレクタングル(contents_result_rectangle)。広告が無かった時は場所ごと消す */
.ka-result-ad {
  display: flex;
  justify-content: center;
  min-height: 250px;
  margin: 8px 0 24px;
}

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

/* 設問の下のレクタングル(contents_result_rectangle)。答えのボタンの押し間違いを防ぐため、上をあける */
.ka-question-ad {
  display: flex;
  justify-content: center;
  min-height: 250px;
  margin: 28px 0 8px;
}

.ka-question-ad[hidden] {
  display: none;
}

/* 最後の1問づくりの「この問題にする」の上のレクタングル。ボタンの押し間違いを防ぐため、下をあける */
.ka-custom-ad {
  display: flex;
  justify-content: center;
  min-height: 250px;
  margin: 8px 0 24px;
}

.ka-custom-ad[hidden] {
  display: none;
}

/* 1人目専用ページの「ほかの人とも、新しく作る」の上のレクタングル。ボタンの押し間違いを防ぐため、下をあける */
.ka-owner-ad {
  display: flex;
  justify-content: center;
  min-height: 250px;
  margin: 0 0 24px;
}

.ka-owner-ad[hidden] {
  display: none;
}

/* URLがカギ: 自分のLINEに送る・答えたよと送る(2026-10-29) */
.ka-keep__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ka-keep__line {
  min-height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #06C755;
  color: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  text-decoration: none;
}

.ka-keep__line:hover {
  color: #FFFFFF;
}

a.ka-alert--key {
  display: block;
  color: var(--ka-black);
  text-decoration: none;
}

.ka-send {
  padding: 16px;
  background: var(--ka-mint);
  border: 2px solid var(--ka-black);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka-send__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
}

.ka-send__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.ka-note--warn {
  color: #C0262D;
  font-weight: 700;
  line-height: 1.7;
}

.ka-note--center {
  text-align: center;
  line-height: 1.7;
  text-wrap: pretty;
}

/* 入口: 登録なし・無料・1分 */
.ka-hero__badges {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ka-hero__badges span {
  padding: 4px 12px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 900;
}

/* よくある質問 */
.ka-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-faq__item {
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  padding: 0 14px;
  background: #FFFFFF;
}

.ka-faq__item summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.ka-faq__item p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.8;
}

/* 消す */
.ka-delete-link {
  align-self: center;
  font-size: 12px;
  color: var(--ka-gray);
  text-decoration: underline;
}

.ka-notes--box {
  padding: 14px 14px 14px 2em;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  font-size: 13px;
}

button.ka-cta--danger {
  background: #C0262D;
}

.ka-nowrap {
  white-space: nowrap;
}

/* ===== 入口(2026-10-29、モック「ふたりのシンクロ率: 入口の改善」。ヒーローは案A、それより下は案B) ===== */
.ka-heroimg {}

.ka-hero {
  background: repeating-linear-gradient(-45deg,
      #d7eeec 0,
      #d7eeec 20px,
      #e4f4f2 20px,
      #e4f4f2 40px);
}

/* 案A: 結果カードの見本 */
.ka-demo-card {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ka-demo-card__tilt {
  position: relative;
  width: min(320px, 100%);
  transform: rotate(-2deg);
}

.ka-demo-card__img {
  display: block;
  width: 100%;
  height: auto;
}

.ka-demo-card__stamp {
  position: absolute;
  right: -10px;
  bottom: -16px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ka-yellow);
  border: 1px solid var(--ka-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* 見本カードは傾き・影・SAMPLEの丸(下に16pxはみ出す)があるので、説明との間を広めに空ける */
.ka-demo-card figcaption {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* だれとやる？(STEP 1)。ほかの画面のSTEP枠(.ka-stepbox: 最後の1問・ニックネーム)も同じ見た目 */
form.ka-who,
.ka-stepbox {
  max-width: none;
  margin: 0;
  padding: 18px 14px;
  background: #FFF8E6;
  border: 2px solid var(--ka-black);
  border-radius: 24px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 進み具合(作る人4つ・誘われた人3つ)。_steps.html */
.ka-steps {
  margin: 0 0 2px;
  padding: 0 0 14px;
  list-style: none;
  border-bottom: 1px dashed var(--ka-black);
  display: grid;
  grid-template-columns: repeat(var(--ka-steps, 3), 1fr);
}

.ka-steps__item {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ka-gray);
}

/* 丸どうしをつなぐ線(丸の中心の高さ、前の項目の丸から自分の丸まで) */
.ka-steps__item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 13px;
  right: calc(50% + 13px);
  left: calc(-50% + 13px);
  height: 2px;
  background: var(--ka-black);
}

.ka-steps__num {
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--ka-black);
  background: #FFFFFF;
  color: var(--ka-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.ka-steps__item--now,
.ka-steps__item--done {
  color: var(--ka-black);
}

.ka-steps__item--now .ka-steps__num {
  background: var(--ka-black);
  color: var(--ka-yellow);
}

.ka-steps__item--now .ka-steps__label {
  font-weight: 900;
}

.ka-steps__item--done .ka-steps__num {
  background: var(--ka-yellow);
}

.ka-who__head,
.ka-stephead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ka-who__step,
.ka-stephead__step {
  flex-shrink: 0;
  padding: 4px 10px;
  background: var(--ka-black);
  color: var(--ka-yellow);
  border-radius: 50px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.ka-who__title,
.ka-stephead__title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
}

.ka-who__sub,
.ka-stephead__sub {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ka-gray);
}

.ka-picks {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ka-pick {
  position: relative;
  margin: 0;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  cursor: pointer;
}

/* 本物のラジオは見えなくする(style.cssの全体のinput指定で大きさ・枠が付くため、.ka-visually-hiddenだけでは消えない) */
.ka-pick input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.ka-pick__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ka-rel);
  border: 1px solid var(--ka-black);
}

.ka-pick__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ka-pick__en {
  font-size: 12px;
  letter-spacing: 0.1em;
}

.ka-pick__label {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
}

.ka-pick__max,
.ka-pick__desc {
  font-size: 11px;
  font-weight: 700;
  color: var(--ka-gray);
}

.ka-pick__radio {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--ka-black);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 選んだもの: 関係の色で塗り、枠を太く・影・チェック */
.ka-pick:has(input:checked) {
  background: var(--ka-rel);
  border: 3px solid var(--ka-black);
  box-shadow: 4px 4px 0 var(--ka-black);
}

.ka-pick:has(input:checked) .ka-pick__icon {
  background: #FFFFFF;
}

.ka-pick:has(input:checked) .ka-pick__radio {
  background: var(--ka-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 0;
}

.ka-pick:has(input:focus-visible) {
  outline: 3px solid var(--ka-black);
  outline-offset: 2px;
}

/* 1列で説明つき */
.ka-picks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-picks .ka-pick {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
}

.ka-picks .ka-pick__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.ka-picks .ka-pick__en {
  display: none;
}

.ka-picks .ka-pick__text {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 6px;
}

.ka-picks .ka-pick__label {
  font-size: 16px;
}

.ka-picks .ka-pick__desc {
  grid-column: 1 / -1;
  font-size: 12px;
}

/* ボタンの文字を選んだ関係に合わせる(:hasが効かないブラウザでは「はじめる」だけ) */
button.ka-who__cta {
  min-height: 60px;
  box-shadow: 0 4px 0 var(--ka-gray);
}

.ka-who__cta-rel {
  display: none;
}

.ka-who:has(input[value="love"]:checked) .ka-who__cta-rel--love,
.ka-who:has(input[value="friends"]:checked) .ka-who__cta-rel--friends,
.ka-who:has(input[value="family"]:checked) .ka-who__cta-rel--family,
.ka-who:has(input[value="work"]:checked) .ka-who__cta-rel--work,
.ka-who:has(input[value="anyone"]:checked) .ka-who__cta-rel--anyone {
  display: inline;
}

/* ===== 入口の説明セクション(あそびかた・結果でわかること・よくある質問。2026-10-29、モックの案C) ===== */
/* 上のフォームと続いて見えないよう、.ka-bodyのgap(26px)に足して広げる */
.ka-section--entry {
  margin-top: 22px;
  gap: 18px;
}

/* 見出し: 英字は小さなラベル、日本語が主役 */
.ka-heading--label .ka-heading__en {
  align-self: flex-start;
  padding: 2px 10px;
  background: var(--ka-black);
  color: var(--ka-yellow);
  border-radius: 50px;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

.ka-heading--label .ka-heading__ja {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.3;
}

.ka-heading--with-legend {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.ka-heading--with-legend>div {
  display: flex;
  flex-direction: column;
}

/* 番号の丸の色が「だれがやるか」 */
.ka-legend {
  margin: 0 0 4px;
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ka-legend__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ka-legend__item::before {
  content: "";
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--ka-black);
}

.ka-legend__item--you::before {
  background: var(--ka-mint);
}

.ka-legend__item--them::before {
  background: var(--ka-lavender);
}

.ka-legend__item--both::before {
  background: var(--ka-yellow);
}

.ka-nowrap {
  white-space: nowrap;
}

/* あそびかた: だれがやるかのタイムライン */
.ka-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ka-howto__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
}

.ka-howto__opt {
  padding: 1px 6px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 2px;
}

/* 1文字だけ次の行に残る折り返しを避ける(対応していないブラウザではふつうに折り返す) */
.ka-howto__text,
.ka-notes {
  text-wrap: pretty;
}

.ka-howto__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ka-gray);
}

.ka-howto__text strong {
  color: var(--ka-black);
}

.ka-timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}

.ka-timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: -22px;
  width: 2px;
  background: var(--ka-black);
}

.ka-timeline__num {
  position: relative;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--ka-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ka-timeline__step--you .ka-timeline__num {
  background: var(--ka-mint);
}

.ka-timeline__step--them .ka-timeline__num {
  background: var(--ka-lavender);
}

.ka-timeline__step--both .ka-timeline__num {
  background: var(--ka-yellow);
}

.ka-timeline__step>div {
  padding-top: 2px;
}

/* よくある質問: 「Q」と開閉の＋(開くと×) */
.ka-faq__item summary {
  justify-content: space-between;
  gap: 10px;
  list-style: none;
}

.ka-faq__item summary::-webkit-details-marker {
  display: none;
}

.ka-faq__q {
  margin-right: 6px;
  font-size: 16px;
}

.ka-faq__plus {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.ka-faq__item[open] .ka-faq__plus {
  transform: rotate(45deg);
}

.ka-faq__item[open] summary+p {
  padding-top: 10px;
  border-top: 1px dashed var(--ka-black);
}

/* ご利用の前に(一番下) */
.ka-caution {
  margin-top: 22px;
  padding: 16px;
  background: #F7F7F7;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ka-caution__title {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

/* ===== 入口のアニメーション(2026-10-29、モックのアニメ案4)。動きを減らす設定の端末では止める ===== */

/* アニメ案4: 選ぶとカードが弾み、アイコンが揺れ、チェックが出る。ボタンに光が走り、矢印が動く。あそびかたはスクロールで順に出る */
@keyframes ka-pick {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.94);
  }

  60% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes ka-wiggle {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-14deg);
  }

  50% {
    transform: rotate(12deg);
  }

  75% {
    transform: rotate(-6deg);
  }
}

@keyframes ka-check {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes ka-shine {

  0%,
  60% {
    transform: translateX(-120%) skewX(-20deg);
  }

  85%,
  100% {
    transform: translateX(420%) skewX(-20deg);
  }
}

@keyframes ka-nudge {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

@keyframes ka-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

button.ka-who__cta {
  position: relative;
  overflow: hidden;
}

.ka-who__shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  transform: translateX(-120%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

  /* 選んだ時(:has で選ばれた瞬間にアニメーションが始まる。ページを開いた時の1つ目にも1回かかる) */
  .ka-pick:has(input:checked) {
    animation: ka-pick 0.45s ease-out;
  }

  .ka-pick:has(input:checked) .ka-pick__icon {
    animation: ka-wiggle 0.6s ease-in-out;
  }

  .ka-pick:has(input:checked) .ka-pick__radio {
    animation: ka-check 0.35s ease-out;
  }

  .ka-who__shine {
    animation: ka-shine 3s ease-in-out infinite;
  }

  .ka-who__cta>svg {
    animation: ka-nudge 1.2s ease-in-out infinite;
  }

  /* あそびかた: 画面に入ってきたら下から出る(スクロールに連動。対応していないブラウザでは最初から表示) */
  @supports (animation-timeline: view()) {
    .ka-timeline__step {
      animation: ka-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

/* ===== 画面全体に重なる演出: キラキラ(_fx.html。2026-10-29の4案からキラキラに決定、2026-10-30)。押す操作には関わらない ===== */
.ka-fx {
  position: fixed;
  inset: 0;
  z-index: 11;
  overflow: hidden;
  pointer-events: none;
}

/* 1つずつ: 瞬くたびに、_fx.htmlのスクリプトが置き場所・大きさ・色を変える(JSが無い時は決まった場所で瞬く) */
.ka-fx__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  line-height: 0;
  animation: ka-fx-twinkle var(--dur) ease-in-out var(--delay) infinite;
}

.ka-fx__item svg {
  width: var(--size, 16px);
  height: var(--size, 16px);
}

@keyframes ka-fx-twinkle {

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

  50% {
    opacity: 1;
    transform: scale(1) rotate(90deg);
  }
}

/* タップした所にも少しだけ出す(1回きり) */
.ka-fx__item.is-burst {
  animation: ka-fx-burst 0.9s ease-out forwards;
}

@keyframes ka-fx-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(0);
  }

  30% {
    opacity: 1;
    transform: translate(calc(var(--bx) * 0.6), calc(var(--by) * 0.6)) scale(1.1) rotate(60deg);
  }

  100% {
    opacity: 0;
    transform: translate(var(--bx), var(--by)) scale(0.4) rotate(120deg);
  }
}

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

/* 1人目専用ページ: 見出しの下のタブ(送る／相性チェック／わたしの答え、モックの案B)。切り替えはページを読み直す(?tab=) */
.ka-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ka-black);
  border-radius: 50px;
  overflow: hidden;
  background: #FFFFFF;
}

.ka-tabs__tab {
  min-height: 50px;
  padding: 4px 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ka-black);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.ka-tabs__tab+.ka-tabs__tab {
  border-left: 1px solid var(--ka-black);
}

.ka-tabs__tab:hover {
  background: var(--ka-yellow);
  color: var(--ka-black);
}

.ka-tabs__tab.is-current,
.ka-tabs__tab.is-current:hover {
  background: var(--ka-black);
  color: var(--ka-yellow);
}

.ka-tabs__sub {
  font-size: 10px;
  font-weight: 700;
}

.ka-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ka-tabpanel__title {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 17px;
  font-weight: 900;
}

.ka-tabpanel__title .ka-count {
  margin-left: 0;
}

p.ka-tabpanel__sub {
  margin: -4px 0 0;
  font-size: 12px;
  color: #888888;
}

.ka-tabpanel__more {
  align-self: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--ka-black);
}

/* 送る: 受付の残りメーター(owner.html、モックの案B1) */
.ka-meter {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FAFAF2;
  border: 1px solid var(--ka-black);
  border-radius: 14px;
}

p.ka-meter__row {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ka-meter__label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
}

.ka-meter__label svg {
  align-self: center;
}

.ka-meter__num {
  margin: 0 2px;
  font-size: 22px;
  line-height: 1;
}

.ka-meter__sub {
  font-size: 11px;
  color: #6B6B6B;
  white-space: nowrap;
}

.ka-meter__count {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.ka-meter__people {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ka-meter__bar {
  height: 10px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  overflow: hidden;
}

.ka-meter__bar span {
  display: block;
  height: 100%;
  background: var(--ka-mint);
  border-right: 1px solid var(--ka-black);
  box-sizing: border-box;
}

/* 送るタブの下: 注意書きを1か所にまとめた「知っておくと安心」(owner.html、モックの案B) */
.ka-goodtoknow {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #E8F5F6;
  border-radius: 18px;
}

/* 見出しはタブの見出し(.ka-tabpanel__title)にそろえる */
.ka-goodtoknow__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 900;
}

.ka-goodtoknow__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ka-goodtoknow__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
}

.ka-goodtoknow__list strong {
  font-weight: 900;
}

.ka-goodtoknow__list small {
  display: block;
  font-size: 12px;
  color: var(--ka-gray);
}

.ka-goodtoknow__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ka-black);
  border-radius: 50%;
  background: #FFFFFF;
}

/* 送る: 相手用のURLは白い枠、自分用(このページを保存)はラベンダーの点線の枠で分ける */
.ka-keep {
  background: #F4EEFB;
  border: 1px dashed var(--ka-black);
}

/* 説明の2文目は、幅が足りる時は1行に。狭い画面だけここで折り返す */
.ka-keep__br {
  display: none;
}

@media (max-width: 379px) {
  .ka-keep__br {
    display: inline;
  }
}

.ka-keep__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 最下部: 新しく作るはボタン、消すは点線で離して小さく */
.ka-owner-foot {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ka-owner-foot__new {
  min-height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  box-shadow: 0 3px 0 var(--ka-black);
  color: var(--ka-black);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.ka-owner-foot__new:hover {
  background: var(--ka-yellow);
  color: var(--ka-black);
}

.ka-owner-foot__danger {
  padding-top: 16px;
  border-top: 1px dashed var(--ka-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ka-owner-foot__delete {
  min-height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #C0262D;
  border-radius: 50px;
  background: #FFFFFF;
  color: #C0262D;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ka-owner-foot__delete:hover {
  color: #C0262D;
}

p.ka-owner-foot__note {
  margin: 0;
  font-size: 11px;
  color: #888888;
  text-align: center;
}

/* 結果を画像で保存・シェア(static/dev_js/kotaeawase/result.js)。見た目は顔面偏差値の結果画像(.fs-save)にそろえる */
.ka-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);
}

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

html.ka-save-is-open {
  overflow: hidden;
}

.ka-save__panel {
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 16px;
  background: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000000;
}

p.ka-save__title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}

/* 画面の高さが足りない時は画像のほうを縮める(縦横比は保つ) */
.ka-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;
}

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

.ka-save__actions {
  width: 100%;
  display: flex;
  gap: 8px;
}

button.ka-save__btn {
  flex: 1;
  min-height: 48px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #000000;
  border-radius: 50px;
  background: #FFFFFF;
  color: #000000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

button.ka-save__btn--primary {
  background: #F3FF6C;
}

p.ka-save__note {
  margin: 0;
  font-size: 11px;
  color: #888888;
}

/* 質問・最後の1問・ニックネームの画面: 1画面目を埋め、下部コンテンツ(タグ・バナーのスライド)がのぞかないようにする
   (1問ごとにページを読み直すたび、のぞいたバナーが動いて気になるため。2026-10-30 ユーザー指示)。
   svhはアドレスバーが出ている時の画面の高さ。スクロールすれば下部コンテンツは今まで通り見られる */
.ka.ka--fill {
  min-height: 100vh;
  min-height: 100svh;
}

/* 1人目専用ページ: タブの上の「新しい答えを確かめる」(owner.html)。目立たせないよう、右寄せの小さな文字のボタン */
.ka-recheck {
  margin-bottom: -14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.ka-recheck__msg {
  font-size: 12px;
  color: #888888;
}

.ka-recheck__btn {
  margin: 0;
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  color: var(--ka-gray);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ka-recheck__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ka-recheck__btn[hidden] {
  display: none;
}

/* 1人目専用ページ: 開いている間に新しい答えが届いた時のお知らせ(owner.html) */
.ka-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 9000;
  width: min(380px, calc(100% - 24px));
  box-sizing: border-box;
  transform: translateX(-50%);
  padding: 10px 10px 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ka-yellow, #F3FF6C);
  border: 2px solid #000000;
  border-radius: 50px;
  box-shadow: 0 3px 0 #000000;
  font-family: 'Noto Sans JP', sans-serif;
}

.ka-toast[hidden] {
  display: none;
}

.ka-toast__text {
  flex: 1;
  font-size: 14px;
  font-weight: 900;
  color: #000000;
}

.ka-toast__btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 18px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border-radius: 50px;
  background: #000000;
  color: #F3FF6C;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.ka-toast__btn:hover {
  color: #F3FF6C;
}

/* 入口: この診断について(案B。要点の数字だけ見せ、決め方・しるし・研究はよくある質問と同じアコーディオンにたたむ) */
p.ka-about__intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.ka-about__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ka-about__stat {
  padding: 10px 6px;
  border: 1px solid var(--ka-black);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.ka-about__stat--yellow {
  background: var(--ka-yellow);
}

.ka-about__stat--lavender {
  background: var(--ka-lavender);
}

.ka-about__stat--mint {
  background: var(--ka-mint);
}

.ka-about__num {
  font-size: 30px;
  line-height: 1;
}

.ka-about__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.ka-about__item summary {
  justify-content: space-between;
  gap: 10px;
}

.ka-about__steps {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ka-about__steps>li {
  display: flex;
  gap: 10px;
}

.ka-about__stepnum {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ka-black);
  color: var(--ka-yellow);
  font-size: 16px;
  letter-spacing: 0;
}

.ka-about__steps h3 {
  margin: 3px 0 4px;
  font-size: 14px;
  font-weight: 900;
}

.ka-about__steps .ka-about__steps p,
.ka-about__steps li p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

/* 9つのタイプ(3×3。左の列と上の行が見出し) */
.ka-about__steps>li.ka-about__types {
  margin-left: 38px;
  padding: 12px;
  border: 1px dashed var(--ka-black);
  border-radius: 16px;
  flex-direction: column;
  gap: 6px;
}

.ka-about__steps li p.ka-about__types-title {
  font-size: 12px;
  font-weight: 900;
}

.ka-about__steps li p.ka-about__types-text {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ka-gray);
}

.ka-about__types-grid {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: 4px;
}

.ka-about__types-head {
  display: flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ka-gray);
  text-align: center;
}

.ka-about__types-head--row {
  padding-right: 2px;
}

.ka-about__type {
  min-height: 44px;
  padding: 6px 3px;
  box-sizing: border-box;
  border: 1px solid var(--ka-black);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 4すみは4タイプの頃の色、まん中の列・行は白 */
.ka-about__type--twins {
  background: var(--ka-mint);
}

.ka-about__type--partners {
  background: var(--ka-lavender);
}

.ka-about__type--vibes {
  background: var(--ka-yellow);
}

.ka-about__type--contrast {
  background: #ECEEF1;
}

.ka-about__marks {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.ka-about__marks li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ka-about__marks .ka-mark {
  min-width: 84px;
  box-sizing: border-box;
  text-align: center;
}

.ka-faq__item p.ka-about__refs-note {
  font-size: 11px;
  line-height: 1.6;
  color: #888888;
}

.ka-about__refs {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ka-gray);
}

.ka-about__refs span {
  font-weight: 700;
  margin-right: 2px;
}

.ka-about__refs a {
  color: var(--ka-gray);
  word-break: break-word;
}

.ka-about__note {
  padding: 12px 14px;
  background: #FFFFFF;
  border: 2px solid var(--ka-black);
  border-radius: 16px;
  display: flex;
  gap: 10px;
}

.ka-about__note-icon {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

p.ka-about__note-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 900;
}

p.ka-about__note-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

/* 結果ページ: 内訳の下の「シンクロ率の決め方 ›」(入口の「この診断について」へ) */
.ka-about-link {
  align-self: flex-end;
  margin-top: -4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ka-black);
}

/* 答え終わった直後のローディング(_loading.html)。--ka-loading-ms は data-ms とそろえる。JSが動かない時も最後は消える */
.ka-loading {
  --ka-loading-ms: 7000ms;
  /* .kaの外に置くので、色の変数をここでも持つ(.kaと同じ値) */
  --ka-black: #000000;
  --ka-mint: #BFE6E8;
  --ka-lavender: #DCC8F0;
  --ka-yellow: #F3FF6C;
  font-family: 'Noto Sans JP', sans-serif;
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  background-color: var(--ka-yellow);
  background-image: radial-gradient(#00000022 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  color: var(--ka-black);
  transition: opacity .3s ease;
  animation: ka-loading-end .01s linear 12s forwards;
}

.ka-loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.ka-loading[hidden] {
  display: none;
}

@keyframes ka-loading-end {
  to {
    visibility: hidden;
  }
}

.ka-loading__inner {
  box-sizing: border-box;
  min-height: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ka-loading__en {
  margin: 0;
  font-size: 22px;
  letter-spacing: .08em;
}

/* 2人の丸が近づいて、間の線が伸びる */
.ka-loading__pair {
  width: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ka-loading__who {
  flex: none;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ka-black);
  border-radius: 50%;
  font-size: 24px;
  font-weight: 900;
  z-index: 1;
}

.ka-loading__who--a {
  background: var(--ka-mint);
  animation: ka-loading-a var(--ka-loading-ms) ease-in-out forwards;
}

.ka-loading__who--b {
  background: var(--ka-lavender);
  animation: ka-loading-b var(--ka-loading-ms) ease-in-out forwards;
}

@keyframes ka-loading-a {
  0% {
    transform: translateX(-34px);
  }

  100% {
    transform: translateX(10px);
  }
}

@keyframes ka-loading-b {
  0% {
    transform: translateX(34px);
  }

  100% {
    transform: translateX(-10px);
  }
}

.ka-loading__link {
  flex: 1 1 auto;
  height: 0;
  border-top: 3px dashed var(--ka-black);
}

.ka-loading__names {
  margin: 0;
  max-width: 100%;
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: center;
}

.ka-loading__rate {
  margin: 0;
  font-size: 68px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 問題の番号が1つずつ埋まる */
.ka-loading__dots {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 34px);
  justify-content: center;
  gap: 6px;
}

.ka-loading__dots li {
  box-sizing: border-box;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ka-black);
  border-radius: 50%;
  background: #FFFFFF;
  font-size: 14px;
  animation: ka-loading-dot .25s steps(1) forwards;
  animation-delay: calc(var(--ka-loading-ms) * .85 * var(--i) / var(--n));
}

@keyframes ka-loading-dot {
  to {
    background: var(--ka-black);
    color: var(--ka-yellow);
  }
}

.ka-loading__bar {
  box-sizing: border-box;
  width: 100%;
  height: 14px;
  background: #FFFFFF;
  border: 2px solid var(--ka-black);
  border-radius: 8px;
  overflow: hidden;
}

.ka-loading__bar span {
  display: block;
  height: 100%;
  background: var(--ka-black);
  transform-origin: left;
  transform: scaleX(0);
  animation: ka-loading-bar var(--ka-loading-ms) linear forwards;
}

@keyframes ka-loading-bar {
  to {
    transform: scaleX(1);
  }
}

/* 工程の文を1つずつ切り替える(同じ場所に重ねる) */
.ka-loading__steps {
  position: relative;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ka-loading__steps li {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  opacity: 0;
  animation: ka-loading-step calc(var(--ka-loading-ms) / var(--steps)) steps(1) forwards;
  animation-delay: calc(var(--ka-loading-ms) * var(--s) / var(--steps));
}

.ka-loading__steps li:last-child {
  animation-name: ka-loading-step-last;
}

@keyframes ka-loading-step {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ka-loading-step-last {

  0%,
  100% {
    opacity: 1;
  }
}

.ka-loading__ad {
  display: flex;
  justify-content: center;
  min-height: 250px;
  margin-top: 4px;
}

.ka-loading__ad[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  .ka-loading__who,
  .ka-loading__dots li,
  .ka-loading__bar span,
  .ka-loading__steps li {
    animation-duration: .01s;
    animation-delay: 0s;
  }
}

/* 1人目専用ページ: 自分に送る(このページを保存)をタブの上に常に出す(2026-11-04、案C)。
   LINE・コピーを押した後は、大きい枠(.ka-keep)をかくして「保存ずみ」の1行(.ka-keep-done)にする(owner.htmlのスクリプト) */
.ka-keep[hidden],
.ka-keep-done[hidden] {
  display: none;
}

.ka-keep:focus {
  outline: none;
}

.ka-keep:focus-visible {
  outline: 3px solid var(--ka-black);
  outline-offset: 3px;
}

.ka-keep-done {
  padding: 6px 6px 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
}

.ka-keep-done__text {
  margin: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.ka-keep-done__check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C2F580;
  border: 1px solid var(--ka-black);
  border-radius: 50%;
}

.ka-keep-done__again {
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  flex-shrink: 0;
  background: #F4EEFB;
  color: var(--ka-black);
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
}

.ka-keep-done__again:hover {
  background: var(--ka-lavender);
}

/* 見つからない時のページ(not_found.html、2026-11-04、モックの案B)。「？」のフリップ2枚で答え合わせできなかったことを見せる */
.ka-notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.ka-notfound__tag {
  align-self: center;
  color: var(--ka-yellow);
}

.ka-notfound__flips {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ka-notfound__flip {
  width: 130px;
  max-width: 36vw;
  box-sizing: border-box;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 2px solid var(--ka-black);
  border-radius: 16px;
}

.ka-notfound__flip--me {
  transform: rotate(-5deg);
}

.ka-notfound__flip--you {
  transform: rotate(5deg);
}

.ka-notfound__who {
  padding: 2px 10px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 900;
}

.ka-notfound__flip--me .ka-notfound__who {
  background: var(--ka-mint);
}

.ka-notfound__flip--you .ka-notfound__who {
  background: var(--ka-lavender);
}

.ka-notfound__q {
  font-size: 52px;
  line-height: 1;
}

.ka-notfound__x {
  font-size: 22px;
}

.ka-notfound__title {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.45;
}

.ka-notfound__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.ka-notfound__why {
  margin: 0;
  padding: 14px 16px 14px 34px;
  background: #FAFAF2;
  border: 1px solid var(--ka-black);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
}

.ka-notfound__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ka-notfound__actions .ka-cta {
  text-decoration: none;
}

.ka-notfound__home {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ka-notfound__flip--me {
    animation: ka-notfound-sway-me 2.4s ease-in-out infinite alternate;
  }

  .ka-notfound__flip--you {
    animation: ka-notfound-sway-you 2.4s ease-in-out infinite alternate;
  }
}

@keyframes ka-notfound-sway-me {
  from {
    transform: rotate(-5deg);
  }

  to {
    transform: rotate(-1deg);
  }
}

@keyframes ka-notfound-sway-you {
  from {
    transform: rotate(5deg);
  }

  to {
    transform: rotate(1deg);
  }
}
/* ===== 入口のh1(ロゴ画像)。h1の既定の余白・文字の大きさを打ち消す(2026-11-05) ===== */
.ka-heroimg {
  margin: 0;
  font-size: inherit;
  line-height: 0;
}

.ka-heroimg img {
  max-width: 100%;
  height: auto;
}

/* ===== 相性シリーズ(_series.html、2026-11-05 モックの案A: 2列のカード) ===== */
.ka-series {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #F6F2FB;
  border: 1px solid var(--ka-black, #000000);
  border-radius: 24px;
}

.ka-series__badge {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 50px;
  background: #000000;
  color: #FFFFFF;
  font-size: 12px;
}

.ka-series__title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 900;
}

.ka-series__lead {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #444444;
}

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

/* 1つしか無い時(片方が非公開の時)は横いっぱい */
.ka-series__card:only-child {
  grid-column: 1 / -1;
}

.ka-series__card {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 20px;
  color: #000000;
  text-decoration: none;
}

.ka-series__card:hover {
  color: #000000;
}

.ka-series__card:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
}

.ka-series__thumb {
  display: block;
  /* サムネイルは2つで比率が違う(相性占い1080×563・相性診断1200×675)。16:9にそろえ、はみ出しは切る */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #DCC8F0;
  border: 1px solid #000000;
  border-radius: 14px;
}

.ka-series__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ka-series__tag {
  align-self: flex-start;
  padding: 1px 8px;
  border: 1px solid #000000;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}

.ka-series__name {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
}

.ka-series__desc {
  font-size: 12px;
  line-height: 1.5;
  color: #444444;
}

/* ===== 1人目専用ページ: 自分用と相手用を見分けやすく(2026-11-05、モック「シンクロ13: 自分に送る・相手に送るの見分け」の案1・案2) ===== */
/* 札: 自分用=黒「自分だけ」、相手用=緑「相手用」 */
.ka-sendbadge {
  align-self: flex-start;
  width: max-content;
  margin: 0 0 -2px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 900;
}

.ka-sendbadge--self {
  background: #000000;
  color: #FFFFFF;
}

.ka-sendbadge--other {
  background: #06C755;
  color: #FFFFFF;
}

/* 自分用の枠: 点線をやめて太枠に。ボタンは白地に黒枠(相手用の緑・黄色と分ける)、1列 */
.ka-keep {
  background: #F3ECFA;
  border: 2px solid var(--ka-black);
}

.ka-keep__warn {
  color: #C0262D;
}

.ka-keep__buttons {
  grid-template-columns: minmax(0, 1fr);
}

.ka-keep__line,
button.ka-keep__copy {
  gap: 6px;
  background: #FFFFFF;
  color: var(--ka-black);
  border: 2px solid var(--ka-black);
}

.ka-keep__line:hover {
  color: var(--ka-black);
}

button.ka-keep__copy {
  min-height: 42px;
  font-size: 13px;
  border-width: 1px;
}

/* 相手用の枠: 薄いミント・太枠 */
.ka-share--other {
  background: #EAF7F8;
  border: 2px solid var(--ka-black);
  border-radius: 20px;
}

.ka-share__urllabel {
  margin: 2px 0 -4px;
  font-size: 12px;
  font-weight: 900;
}

/* 自分用の確認(案2)。画面の下から出す */
.ka-keep-confirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.ka-keep-confirm[hidden] {
  display: none;
}

html.is-ka-confirm-open,
html.is-ka-confirm-open body {
  overflow: hidden;
}

.ka-keep-confirm__panel {
  width: 100%;
  max-width: 430px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 18px calc(26px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFFFFF;
  border: 2px solid var(--ka-black);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  color: var(--ka-black);
  font-family: 'Noto Sans JP', sans-serif;
}

.ka-keep-confirm__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #000000;
  color: #FFFFFF;
}

.ka-keep-confirm__title {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}

.ka-keep-confirm__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

.ka-keep-confirm__steps {
  margin: 0;
  padding: 12px 14px 12px 32px;
  background: #F3ECFA;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.7;
}

.ka-keep-confirm__ok,
.ka-keep-confirm__cancel {
  font-family: inherit;
  cursor: pointer;
}

.ka-keep-confirm__ok {
  min-height: 50px;
  border: 0;
  border-radius: 50px;
  background: #000000;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 900;
}

.ka-keep-confirm__cancel {
  min-height: 44px;
  border: 1px solid var(--ka-black);
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--ka-black);
  font-size: 14px;
  font-weight: 700;
}

.ka-keep-confirm__ok:focus-visible,
.ka-keep-confirm__cancel:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
}