/* ツガイラボ — 結び（大人の恋愛・婚活向けのエレガントなスタイル） */
:root {
  /* 色：和色をもとにした落ち着いた配色 */
  --ichigo: #8E4A63;      /* 葡萄紅：メインの色（ボタン・強調） */
  --ichigo-deep: #6E3550; /* 濃い葡萄紅：文字の強調 */
  --soda: #5E9AAE;        /* 浅葱 */
  --lemon: #EFE6D3;       /* 生成りの金：ハイライト */
  --melon: #6E9E86;       /* 青磁 */
  --grape: #6B5B8E;       /* 藤：反対側の傾向 */
  --gold: #B08D57;        /* 金茶：細い線・飾り */
  --ink: #2B2433;         /* 墨紫：文字 */
  --ink-soft: #6A6070;
  --kumo: #F6F4F7;        /* 白練：背景 */
  --mist: #EDE8EF;        /* 薄い面 */
  --rule: #E0D8E3;        /* 罫線 */
  --white: #FFFFFF;
  --line: 1px solid var(--rule);
  --pop: none;
  --display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .02em;
  color: var(--ink);
  background-color: var(--kumo);
  background-image: radial-gradient(1200px 500px at 85% -10%, rgba(176, 141, 87, .08), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(142, 74, 99, .05), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.45; margin: 0; letter-spacing: .04em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 40px);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-mark { width: 44px; height: 44px; }
.logo-mark .mascot { width: 100%; height: 100%; }
.logo-text { white-space: nowrap; font-family: var(--display); font-size: 22px; color: var(--ink); letter-spacing: .04em; }
.nav { display: flex; gap: 6px; }
.nav a {
  text-decoration: none; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap;
  border: 2px solid transparent;
}
.nav a:hover { border-color: var(--ink); }
.nav a[aria-current] { background: var(--ink); color: #fff; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 10px 28px;
  border: var(--line); border-radius: 999px;
  font-family: var(--display); font-size: 17px; letter-spacing: .04em;
  color: var(--ink); background: #fff; text-decoration: none; cursor: pointer;
  box-shadow: none;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: none; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--ichigo); color: #fff; }
.btn-big { min-height: 64px; padding: 14px 40px; font-size: 21px; }
.btn[disabled] { background: #E7E3F0; color: var(--ink-soft); cursor: not-allowed; box-shadow: none; transform: none; border-color: #C9C3DA; }
.btn[hidden] { display: none; }

/* ---------- ヒーロー ---------- */
.hero {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 32px;
  padding: clamp(36px, 7vw, 80px) clamp(16px, 4vw, 40px) 40px;
}
.hero h1 { font-size: clamp(32px, 5vw, 58px); line-height: 1.3; }
.hero h1 .nowrap {
  background: linear-gradient(transparent 62%, var(--lemon) 62%, var(--lemon) 92%, transparent 92%);
}
.lead { margin: 20px 0 30px; max-width: 30em; color: var(--ink-soft); font-size: 18px; }
.perks { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.perks li {
  padding: 2px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--rule);
  font-weight: 700; font-size: 14px;
}
.perks li:nth-child(1) { transform: rotate(-3deg); }
.perks li:nth-child(3) { transform: rotate(2deg); }

.hero-stage { position: relative; aspect-ratio: 1; max-width: 500px; width: 100%; justify-self: center; }
.burst {
  --burst: var(--ichigo);
  position: absolute; inset: 4%;
  border-radius: 50%;
  border: var(--line);
  background:
    radial-gradient(circle, #fff 0 28%, transparent 28.5%),
    repeating-conic-gradient(var(--burst) 0 10deg, #fff 10deg 20deg);
  transition: --burst .4s;
}
.hero-mascot { position: absolute; inset: 14% 14% 12%; }
.hero-mascot .mascot, .result-mascot .mascot { width: 100%; height: 100%; filter: drop-shadow(0 0 0 #fff) drop-shadow(6px 8px 0 rgba(42, 35, 80, .18)); }
.hero-mascot.pop { animation: pop .55s cubic-bezier(.3, 1.6, .5, 1); }
.bubble {
  position: absolute; right: -2%; top: 4%;
  background: #fff; border: var(--line); border-radius: 18px;
  padding: 8px 16px; font-family: var(--display); font-size: 17px; line-height: 1.4;
  box-shadow: none;
}
.bubble b { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 400; letter-spacing: .1em; }
.bubble::after {
  content: ""; position: absolute; left: 22px; bottom: -14px;
  width: 20px; height: 20px; background: #fff;
  border-right: var(--line); border-bottom: var(--line);
  transform: rotate(45deg) skew(10deg, 10deg);
}
.bubble.pop { animation: pop .45s .08s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop {
  0% { transform: scale(.6) rotate(-6deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.mascot .eyes { transform-origin: 100px 100px; animation: blink 4.5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* ---------- ステップ ---------- */
.section-title { text-align: center; font-size: clamp(24px, 3vw, 32px); margin-bottom: 28px; }
.steps { max-width: 1160px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step-card {
  position: relative; background: #fff; border: var(--line); border-radius: var(--radius);
  padding: 22px 24px 26px; box-shadow: none;
}
.step-card:nth-child(1) { transform: rotate(-1.2deg); }
.step-card:nth-child(3) { transform: rotate(1deg); }
.step-art { height: 130px; display: flex; justify-content: center; margin-bottom: 8px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 30%, #fff) 0 40%, transparent 41%);
}
.step-art .mascot { height: 100%; width: auto; }
.step-art-row { gap: 0; align-items: flex-end; }
.step-art-row .mascot { height: 92px; margin: 0 -6px; }
.step-art-row .mascot:nth-child(2) { height: 116px; }
.step-num {
  display: inline-block; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--accent); border: 1px solid var(--rule);
}
.step-card h3 { font-size: 21px; margin: 10px 0 6px; }
.step-card p { color: var(--ink-soft); font-size: 15.5px; }

/* ---------- 診断 ---------- */
.test { max-width: 860px; margin: 30px auto 80px; padding: 0 clamp(16px, 4vw, 40px); }
.progress {
  position: sticky; top: 70px; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: var(--line); border-radius: 999px; padding: 8px 18px;
  box-shadow: none;
}
.progress-track { flex: 1; height: 14px; border-radius: 999px; background: #F3E9F7; border: 1px solid var(--rule); overflow: hidden; }
.progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--ichigo) 0 10px, #FF7FB2 10px 20px);
  transition: width .4s cubic-bezier(.3, 1.3, .5, 1);
}
.progress-text { font-family: var(--display); font-size: 15px; min-width: 4.5em; text-align: right; }

.questions { list-style: none; padding: 0; margin: 30px 0 0; }
.q { padding: 34px 0; border-bottom: 2px dashed #E3D6EC; transition: opacity .3s; }
.q.done { opacity: .5; }
.q.done:hover, .q.done:focus-within { opacity: 1; }
.q-text { display: block; text-align: center; font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; }
.q-no { display: block; text-align: center; font-family: var(--display); font-size: 13px; color: var(--ichigo-deep); font-weight: 400; letter-spacing: .08em; }
.test-title { text-align: center; font-size: clamp(22px, 3vw, 28px); margin-top: 34px; }
.test-sub { text-align: center; color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.mode-chip {
  flex: none; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule);
  font-weight: 700; font-size: 13px; background: var(--ichigo); color: #fff;
}
.mode-chip[data-target="M"] { background: var(--soda); color: var(--ink); }

/* 0〜100スライダー */
.q-val {
  display: block; width: max-content; margin: 14px auto 6px; min-width: 3.2em; text-align: center;
  font-family: var(--display); font-size: 30px; line-height: 1.2;
  padding: 2px 14px; border-radius: 16px; border: 1px solid var(--rule); background: #fff;
}
.q.done .q-val { background: var(--lemon); }
.slider-row { display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 0 auto; }
.end { font-family: var(--display); font-size: 14px; color: var(--ink-soft); width: 2.2em; text-align: center; }
input[type="range"] {
  --fill: var(--ichigo);
  flex: 1; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 16px; border-radius: 999px; border: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--fill) 0 calc(var(--v) * 1%), #F3E9F7 0);
}
input[type="range"]::-moz-range-track {
  height: 12px; border-radius: 999px; border: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--fill) 0 calc(var(--v) * 1%), #F3E9F7 0);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; margin-top: -11px; border-radius: 50%;
  background: #fff; border: 1px solid var(--rule); box-shadow: none;
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 1px solid var(--rule); box-shadow: none;
}
input[type="range"].untouched { --fill: #F3E9F7; }
input[type="range"].untouched::-webkit-slider-thumb { background: #E7E3F0; border-style: dashed; box-shadow: none; }
input[type="range"].untouched::-moz-range-thumb { background: #E7E3F0; border-style: dashed; box-shadow: none; }
input[type="range"]:focus-visible { outline: 3px solid var(--soda); outline-offset: 4px; border-radius: 999px; }
.chips { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.chip {
  min-width: 48px; min-height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule);
  background: #fff; font-family: var(--display); font-size: 14px; color: var(--ink); cursor: pointer;
}
.chip:hover { background: #FFE3EE; }

.test-nav { display: flex; justify-content: center; gap: 16px; margin-top: 36px; }
.test-hint { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 12px; min-height: 1.85em; }

/* ---------- 結果 ---------- */
#view-result, #view-types, #view-data, #view-privacy { max-width: 1080px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px) 80px; }
.loading { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 20px; font-weight: 700; }
.loading-heart { width: 180px; }
.loading-heart .mascot { width: 100%; animation: beat .7s infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.12); } 50% { transform: scale(.96); } }

.result-hero {
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 24px;
  background: #fff; border: var(--line); border-radius: 30px; padding: clamp(20px, 4vw, 40px);
  box-shadow: none;
}
.result-stage { position: relative; aspect-ratio: 1; max-width: 380px; width: 100%; justify-self: center; }
.result-mascot { position: absolute; inset: 12%; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.result-kicker { font-weight: 700; color: var(--ink-soft); }
.result-copy h1 { font-size: clamp(34px, 5.4vw, 60px); margin: 4px 0 10px; }
.result-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.result-code span { font-family: var(--display); font-size: 22px; letter-spacing: .14em; }
.group-chip {
  padding: 2px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--group);
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.speech {
  position: relative; margin-top: 22px; padding: 14px 20px; border-radius: 18px;
  background: var(--kumo); border: 1px solid var(--rule); font-weight: 700;
}
.speech::before {
  content: ""; position: absolute; left: 28px; top: -11px; width: 18px; height: 18px;
  background: var(--kumo); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); transform: rotate(45deg);
}

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.card { background: #fff; border: var(--line); border-radius: var(--radius); padding: 24px 26px; }
.card h2 { font-size: 19px; margin-bottom: 10px; }
.card .mt { margin-top: 18px; }
.result-grid > .card:first-child:has(.axes) { grid-column: 1 / -1; }

.axes { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.axis-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.axis-head .pole b { font-family: var(--display); font-weight: 400; font-size: 15px; margin-left: 6px; }
.axis-head .pole.right b { margin: 0 6px 0 0; }
.axis-head .pole.win { color: var(--ichigo-deep); }
.axis-head .pole.right.win { color: var(--grape); }
.axis-head .pole.win b { font-size: 20px; }
.axis-head small { font-family: var(--display); font-size: 12px; color: var(--ink-soft); margin: 0 4px; }
.axis-track { position: relative; height: 18px; border-radius: 999px; background: #F3E9F7; border: 1px solid var(--rule); margin-top: 14px; overflow: visible; }
.axis-track .axis-fill:first-child { border-radius: 999px 0 0 999px; }
.axis-track .axis-fill.right { border-radius: 0 999px 999px 0; }
.axis-fill { position: absolute; top: 0; bottom: 0; background: var(--ichigo); }
.axis-fill.right { background: var(--grape); }
.axis-you {
  position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink);
}
.axis-mark { display: none; }

.hearts, .sprouts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.hearts li, .sprouts li { position: relative; padding-left: 28px; }
.hearts li::before, .sprouts li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 16px;
  background: var(--ichigo); clip-path: path("M8 15 C3 11 0 8 0 5 C0 2 2 0 4.5 0 C6 0 7.3 1 8 2.3 C8.7 1 10 0 11.5 0 C14 0 16 2 16 5 C16 8 13 11 8 15 Z");
}
.sprouts li::before { background: var(--melon); clip-path: circle(45%); }

.match { display: flex; align-items: center; gap: 18px; text-decoration: none; grid-column: 1 / -1; transition: transform .15s; }
.match:hover { transform: rotate(-.6deg) scale(1.01); }
.match-mascot { width: 110px; flex: none; }
.match-mascot .mascot { width: 100%; }

.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }

/* ---------- 図鑑 ---------- */
.page-head { text-align: center; margin-bottom: 36px; }
.page-head h1 { font-size: clamp(30px, 4.5vw, 46px); }
.page-head .lead { margin: 12px auto 0; }
.group { margin-bottom: 48px; }
.group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; }
.group-head h2 {
  font-size: 24px; padding: 2px 18px; border-radius: 999px; background: var(--group); border: var(--line);
}
.group-head p { color: var(--ink-soft); font-weight: 700; }
.type-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.type-card {
  display: block; height: 100%; text-decoration: none; text-align: center;
  background: #fff; border: var(--line); border-radius: var(--radius); padding: 16px 14px 20px;
  transition: transform .15s, box-shadow .15s;
}
.type-card:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: none; }
.type-mascot { width: 120px; margin: 0 auto 4px; }
.type-mascot .mascot { width: 100%; }
.type-code { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--ink-soft); }
.type-card h3 { font-size: 18px; margin: 2px 0 6px; }
.type-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

/* ---------- 恋愛診断 ---------- */
.btn-soda { background: var(--soda); color: var(--ink); }
.pick-label { font-family: var(--display); font-size: 19px; margin-bottom: 12px; }
.pick { display: flex; flex-wrap: wrap; gap: 14px; }
.pick .btn-big { padding: 14px 28px; font-size: 19px; }
#view-data { max-width: 860px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px) 80px; }

.sync-card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 4vw, 44px);
  background: var(--ink); color: #fff; border-radius: 30px; padding: clamp(22px, 4vw, 40px);
  margin-bottom: 28px;
}
.sync-card .result-kicker { color: #CFC8EA; }
.sync-card h1 { font-size: clamp(30px, 4.6vw, 48px); margin: 4px 0 8px; }
.gauge {
  width: 210px; aspect-ratio: 1; border-radius: 50%; justify-self: center;
  background: conic-gradient(var(--ichigo) calc(var(--sync) * 1%), rgba(255, 255, 255, .14) 0);
  display: grid; place-items: center; padding: 18px;
  animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both;
}
.gauge-inner {
  width: 100%; height: 100%; border-radius: 50%; background: #fff; color: var(--ink);
  display: flex; align-items: baseline; justify-content: center; padding-top: 22%;
}
.gauge-num { font-family: var(--display); font-size: 60px; line-height: 1; }
.gauge-unit { font-family: var(--display); font-size: 22px; margin-left: 2px; }
.result-grid > .card.wide { grid-column: 1 / -1; }

.answers { margin-top: 56px; }
.answers-lead { text-align: center; color: var(--ink-soft); max-width: 36em; margin: -12px auto 24px; font-size: 15px; }
.answer-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.answer { background: #fff; border: var(--line); border-radius: var(--radius); padding: 18px 22px 20px; }
.answer.worst { box-shadow: none; }
.answer-head { display: flex; align-items: center; gap: 8px; }
.answer-head .q-no { text-align: left; }
.worst-key {
  display: inline-block; padding: 0 10px; border-radius: 999px; background: var(--ichigo); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.8;
}
.diff { margin-left: auto; font-family: var(--display); font-size: 14px; }
.answer-q { font-weight: 700; margin: 6px 0 4px; line-height: 1.6; }
.compare { position: relative; height: 34px; margin: 4px 10px 0; }
.compare-track { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 999px; background: #F3E9F7; border: 1px solid var(--rule); }
.pin { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.pin.you { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink); }
.pin.them {
  width: 24px; height: 22px; background: var(--ichigo);
  clip-path: path("M12 21 C5 16 0 12 0 7 C0 3 3 0 6.5 0 C9 0 11 1.4 12 3.4 C13 1.4 15 0 17.5 0 C21 0 24 3 24 7 C24 12 19 16 12 21 Z");
}
.answer[data-target="M"] .pin.them { background: var(--soda); }
.compare-legend { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
.lg.them { color: var(--ichigo-deep); }
.answer[data-target="M"] .lg.them { color: #0E8DB8; }
.answer-src { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.answer-src a { color: var(--ink); font-weight: 700; }

.axis-legend { list-style: none; padding: 0; margin: -12px auto 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.axis-legend li { background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 2px 16px; font-size: 14px; }
.axis-legend span { color: var(--ink-soft); margin: 0 6px; font-size: 12px; }
.group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.group-grid .type-grid { grid-template-columns: 1fr 1fr; }

.data-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.data-item h2 { font-family: var(--body); font-weight: 700; font-size: 18px; margin: 2px 0 4px; }
.data-item .q-no { text-align: left; }
.data-survey { font-size: 14px; color: var(--ink-soft); }
.data-bars { display: grid; gap: 8px; margin: 12px 0 4px; }
.data-bar { display: grid; grid-template-columns: 3em 1fr 4em; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.data-bar .bar { height: 14px; border-radius: 999px; border: 1px solid var(--rule); background: #F3E9F7; overflow: hidden; }
.data-bar i { display: block; height: 100%; background: var(--ichigo); }
.data-bar.m i { background: var(--soda); }
.data-bar b { font-family: var(--display); font-weight: 400; text-align: right; }
.method { margin-top: 24px; }

/* ---------- 気持ちの度合い ---------- */
.q-val { display: flex; align-items: baseline; gap: 8px; }
.q-val b { font-weight: 400; }
.q-val small { font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--ink-soft); }

/* ---------- シェア ---------- */
.grow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; align-items: start; }
.share-card { text-align: center; margin-top: 28px; }
.share-card .sns-row { max-width: 640px; margin-left: auto; margin-right: auto; }
.field { display: grid; gap: 4px; margin-top: 14px; font-size: 14px; font-weight: 700; }
.field input {
  font: inherit; font-size: 16px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--rule); background: #fff; color: var(--ink);
  max-width: 280px;
}



@media (max-width: 900px) {
  .grow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
}

/* ---------- SNSシェア ---------- */
.share-card p { color: var(--ink-soft); font-size: 15px; }
.sns-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sns {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 10px;
  border: 1px solid var(--rule); border-radius: 999px; box-shadow: none;
  font-family: var(--display); font-size: 15px; text-decoration: none; text-align: center; line-height: 1.3;
  transition: transform .12s, box-shadow .12s;
}
.sns:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.sns-x { background: #000; color: #fff; }
.sns-line { background: #06C755; color: #fff; }
.sns-threads { background: #fff; color: #000; }

/* ---------- メール入力 ---------- */
.gate {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: #fff; border: var(--line); border-radius: 30px; padding: clamp(24px, 5vw, 44px);
  box-shadow: none;
}
.gate-art { width: 130px; margin: 0 auto 6px; }
.gate-art .mascot { width: 100%; animation: beat 1.4s infinite; }
.gate h1 { font-size: clamp(26px, 4vw, 36px); }
.gate-lead { color: var(--ink-soft); margin: 8px 0 6px; }
.gate form { text-align: left; }
.gate .field input { max-width: none; width: 100%; }
.gate-error { color: var(--ichigo-deep); font-weight: 700; font-size: 14px; min-height: 1.6em; margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 700; cursor: pointer; }
.check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--ichigo); flex: none; }
.gate .btn-big { width: 100%; margin-top: 18px; }
.gate-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; text-align: center; }
.gate-note a { color: var(--ink); font-weight: 700; }

/* ---------- プライバシーポリシー ---------- */
#view-privacy { max-width: 780px; }
.policy h2 { font-family: var(--body); font-weight: 700; font-size: 17px; margin: 22px 0 6px; }
.policy ul { margin: 0; padding-left: 1.3em; }
.policy-date { margin-top: 24px; color: var(--ink-soft); font-size: 14px; }
.footer-links { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.footer-links a { color: var(--ink); font-weight: 700; }

@media (max-width: 640px) {
  .sns-row { grid-template-columns: 1fr; }
  .sns { font-size: 16px; }
  .axis-head { font-size: 12.5px; }
}

/* ---------- 結果ページの詳しい情報 ---------- */
.sync-cats { margin-top: 10px; font-size: 15px; color: #E4DFF5; }
.sync-cats b { color: #fff; }
.shared-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--lemon); border: var(--line); border-radius: var(--radius); padding: 16px 22px; margin-bottom: 22px;
}
.shared-banner p { font-size: 15px; }
.shared-banner p b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; }
.shared-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.shared-actions .btn { min-height: 46px; padding: 8px 20px; font-size: 15px; }

.cat-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cat-bars li { display: grid; grid-template-columns: 9.5em 1fr 3.4em; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; }
.cat-track { height: 16px; border-radius: 999px; border: 1px solid var(--rule); background: #F3E9F7; overflow: hidden; }
.cat-track i { display: block; height: 100%; background: var(--ichigo); border-radius: 999px; }
.cat-bars b { font-family: var(--display); font-weight: 400; text-align: right; }
.axis-desc { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }

.type-facts { margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.type-facts div { background: var(--kumo); border: 1px solid var(--rule); border-radius: 16px; padding: 12px 14px; }
.type-facts dt { font-family: var(--display); font-size: 14px; color: var(--ichigo-deep); }
.type-facts dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.75; }

.compat-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-top: 10px; }
.mini-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mini-type {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 999px;
  border: 1px solid var(--rule); background: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  box-shadow: none;
}
.mini-mascot { width: 30px; }
.mini-mascot .mascot { width: 100%; }

.pick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pick-list li { padding: 10px 12px; border-radius: 14px; background: #EEF9F2; font-weight: 700; font-size: 14.5px; line-height: 1.6; }
.pick-list.worst li { background: #FFF0F6; }
.pick-list b { font-family: var(--display); font-weight: 400; color: var(--ichigo-deep); margin-right: 6px; }
.pick-list span { display: block; font-weight: 500; font-size: 13px; color: var(--ink-soft); }
.answers-cat {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 20px; margin: 34px 0 14px; padding-bottom: 6px; border-bottom: 3px dotted var(--ichigo);
}
.answers-cat span { font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--ink-soft); }

/* ---------- 答え合わせ（開閉） ---------- */
.all-answers { margin-top: 8px; }
.all-answers > summary {
  display: block; width: max-content; max-width: 100%; margin: 0 auto; cursor: pointer; list-style: none;
  padding: 12px 26px; border-radius: 999px; border: var(--line); background: #fff; box-shadow: none;
  font-family: var(--display); font-size: 16px; text-align: center;
}
.all-answers > summary::-webkit-details-marker { display: none; }
.all-answers > summary::after { content: "＋"; margin-left: 8px; }
.all-answers[open] > summary::after { content: "−"; }
.all-answers[open] > summary { margin-bottom: 20px; }

/* ---------- 広告枠（ads.js で設定） ---------- */
.ad-slot {
  margin: 32px 0; padding: 22px 24px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--rule);
}
.ad-slot h2 { font-size: 20px; margin: 4px 0 6px; }
.ad-tag { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.pr-chip { padding: 0 8px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--display); font-size: 12px; letter-spacing: .06em; }
.ad-lead { color: var(--ink-soft); font-size: 15px; }
.ad-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.ad-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--kumo); border: 1px solid var(--rule); }
.ad-item p { font-size: 14px; color: var(--ink-soft); }
.ad-item .btn { flex: none; min-height: 46px; padding: 8px 18px; font-size: 15px; }
.ad-age { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
/* 広告が未設定のあいだは、場所がひと目でわかる点線の枠 */
.ad-empty { border-style: dashed; background: repeating-linear-gradient(-45deg, #FFFBEA 0 14px, #FFF4C7 14px 28px); }
.ad-placeholder {
  margin-top: 12px; padding: 22px 12px; text-align: center; border-radius: 14px;
  border: 1px dashed var(--rule); background: rgba(255, 255, 255, .8); font-weight: 700;
}
.ad-placeholder small { font-weight: 500; color: var(--ink-soft); }

@media (max-width: 900px) {
  .type-facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cat-bars li { grid-template-columns: 1fr 3em; gap: 4px 10px; font-size: 14px; }
  .cat-bars .cat-name { grid-column: 1 / -1; }
  .ad-item { flex-direction: column; align-items: stretch; }
  .shared-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .shared-actions .btn { flex: 1; }
}

/* ---------- 恋愛対象の選択 ---------- */
.pick-hint { font-size: 14px; color: var(--ink-soft); margin: -6px 0 14px; max-width: 32em; }
.pick-btn { flex-direction: column; line-height: 1.35; }
.pick-btn small { font-family: var(--body); font-weight: 700; font-size: 13px; opacity: .9; margin-top: 2px; }

/* ---------- タイプの男女の割合 ---------- */
.type-share { margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px dashed var(--rule); text-align: left; }
.type-share-note { font-family: var(--display); font-size: 16px; color: var(--ink); }
.type-share-bars { display: grid; gap: 6px; margin-top: 8px; }
.tsb { display: grid; grid-template-columns: 2.6em 1fr 3.6em; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.tsb .bar { height: 12px; border-radius: 999px; border: 1px solid var(--rule); background: #F3E9F7; overflow: hidden; }
.tsb i { display: block; height: 100%; background: var(--ichigo); }
.tsb.m i { background: var(--soda); }
.tsb b { font-family: var(--display); font-weight: 400; text-align: right; }
.type-share-cap { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.type-share-cap a { margin-left: 6px; color: var(--ink); font-weight: 700; }
.type-card-share { margin-top: 6px; font-size: 12.5px !important; font-weight: 700; color: var(--ink) !important; }

/* ---------- 選んだ性別の平均とのくらべ ---------- */
.axes-lead { font-size: 13px; color: var(--ink-soft); margin: -4px 0 12px; }
.type-share-target { font-family: var(--display); font-size: 17px; color: var(--ichigo-deep); margin-bottom: 4px; }
.type-share-target b { font-weight: 400; font-size: 22px; margin: 0 2px; }
.tsb { opacity: .55; }
.tsb.on { opacity: 1; }
.type-share:not(:has(.type-share-target)) .tsb { opacity: 1; }
.pick-empty { font-size: 14px; color: var(--ink-soft); }

/* ---------- 静的ページ（タイプページ・コラム） ---------- */
.static-page { max-width: 1080px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 80px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.crumbs a { color: var(--ink); font-weight: 700; }
.type-poles { margin-top: 28px; }
.pole-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pole-list li { background: var(--kumo); border: 1px solid var(--rule); border-radius: 16px; padding: 12px 14px; }
.pole-list b { display: block; font-family: var(--display); font-weight: 400; color: var(--ichigo-deep); }
.pole-list span { font-size: 14.5px; }
.cta-box {
  margin: 40px auto; max-width: 640px; text-align: center; padding: 26px 22px; border-radius: 26px;
  background: var(--lemon); border: var(--line); box-shadow: none;
}
.cta-box p { font-weight: 700; margin-bottom: 14px; }

.article { max-width: 760px; margin: 0 auto; }
.article-head h1 { font-size: clamp(26px, 4vw, 38px); margin: 6px 0 10px; }
.article-head .lead { margin: 0; }
.article-date { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.prose { margin-top: 28px; font-size: 17px; line-height: 2; }
.prose h2 { font-size: 23px; margin: 40px 0 12px; padding-left: 14px; border-left: 6px solid var(--ichigo); }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p { margin: 0 0 18px; }
.prose ul { margin: 0 0 18px; padding-left: 1.4em; }
.prose blockquote { margin: 0 0 18px; padding: 12px 18px; border-radius: 14px; background: var(--kumo); border: 1px dashed var(--rule); }
.prose a:not(.mini-type):not(.btn) { color: var(--ichigo-deep); font-weight: 700; }
.prose .mini-type { margin: 0 2px; vertical-align: middle; }
.stat-card { margin: 0 0 22px; padding: 18px 20px; border-radius: 20px; background: #fff; border: var(--line); }
.stat-card figcaption { font-weight: 700; font-size: 15px; line-height: 1.6; }
.stat-card .answer-src { margin-top: 6px; }

.column-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 760px; margin-left: auto; margin-right: auto; }
.column-item {
  display: block; text-decoration: none; background: #fff; border: var(--line); border-radius: var(--radius);
  padding: 18px 22px; transition: transform .15s, box-shadow .15s;
}
.column-item:hover { transform: translate(-2px, -2px); box-shadow: none; }
.column-item time { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.column-item b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.5; margin: 4px 0; }
.column-item span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }
.related { margin-top: 48px; }
.related h2 { text-align: center; font-size: 22px; margin-bottom: 16px; }

@media (max-width: 640px) {
  .pole-list { grid-template-columns: 1fr; }
  .prose { font-size: 16px; }
}

/* ---------- フッター・トースト ---------- */
.site-footer { border-top: var(--line); background: #fff; text-align: center; padding: 28px 16px; font-size: 14px; color: var(--ink-soft); }
.site-footer .copy { margin-top: 6px; font-family: var(--display); font-size: 13px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  background: var(--ink); color: #fff; padding: 10px 22px; border-radius: 999px; font-weight: 700;
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); z-index: 50;
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { order: 2; }
  .hero-stage { order: 1; max-width: 340px; }
  .lead { margin-left: auto; margin-right: auto; }
  .perks { justify-content: center; }
  .step-list { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .step-card:nth-child(n) { transform: none; }
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  .group-grid { grid-template-columns: 1fr; }
  .answer-list { grid-template-columns: 1fr; }
  .pick { justify-content: center; }
  .result-hero { grid-template-columns: 1fr; text-align: center; }
  .result-code { justify-content: center; }
  .speech { text-align: left; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-header { padding: 8px 12px; gap: 8px; }
  .logo { gap: 4px; }
  .logo-text { font-size: 16px; }
  .logo-mark { width: 32px; height: 32px; }
  .nav { gap: 2px; }
  .nav a { padding: 3px 9px; font-size: 12.5px; }
  .progress { top: 62px; }
  .slider-row { gap: 6px; }
  .chip { min-width: 0; flex: 1; }
  .pick .btn-big { font-size: 18px; }
  .sync-card { grid-template-columns: 1fr; text-align: center; }
  .gauge { width: 170px; }
  .gauge-num { font-size: 48px; }
  .data-bar { grid-template-columns: 2.6em 1fr 3.6em; }
  .result-grid { grid-template-columns: 1fr; }
  .type-grid { gap: 12px; }
  .type-mascot { width: 92px; }
  .type-card h3 { font-size: 15.5px; }
  .btn-big { width: 100%; }
  .bubble { font-size: 15px; right: 0; }
}

@media (max-width: 420px) {
  .logo-text { display: none; }
  .logo-mark { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- トップの新着コラム ---------- */
.home-columns { max-width: 1160px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 40px) 10px; }
.home-columns-more { text-align: center; margin-top: 16px; }
.home-columns-more a { font-weight: 700; color: var(--ink); }

/* ============================================================
   結び：エレガントなスタイルの仕上げ（ここから下が新しい見た目）
   ============================================================ */

/* ヘッダー */
.site-header { background: rgba(246, 244, 247, .9); border-bottom: 1px solid var(--rule); padding-top: 12px; padding-bottom: 12px; }
.logo-text { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .12em; }
.nav a { font-weight: 500; font-size: 14px; letter-spacing: .08em; border: 0; border-radius: 0; padding: 6px 12px; }
.nav a:hover { border: 0; color: var(--ichigo); }
.nav a[aria-current] { background: none; color: var(--ichigo); box-shadow: inset 0 -1px 0 var(--ichigo); }

/* ボタン */
.btn {
  border: 1px solid transparent; border-radius: 999px; box-shadow: none;
  font-family: var(--display); font-weight: 700; letter-spacing: .1em; font-size: 16px;
  transition: background .2s, color .2s, transform .2s;
}
.btn:hover { transform: none; box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: var(--ichigo); color: #fff; }
.btn-primary:hover { background: var(--ichigo-deep); }
.btn-soda { background: var(--grape); color: #fff; }
.btn-soda:hover { background: #57497A; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
.btn-ghost:hover { background: #fff; }
.btn[disabled] { background: var(--mist); color: var(--ink-soft); border-color: transparent; }
.btn-big { min-height: 60px; font-size: 18px; }

/* ヒーロー：水引のハート */
.hero { align-items: center; padding-top: clamp(40px, 8vw, 96px); }
.hero h1 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.45; letter-spacing: .06em; font-weight: 700; }
.hero h1 .nowrap { background: none; color: var(--ichigo); }
.lead { color: var(--ink-soft); font-size: 16px; line-height: 2; }
.hero-stage { display: grid; place-items: center; max-width: 440px; }
.knot { width: 100%; height: auto; overflow: visible; }
.knot-cord, .knot-tail { stroke-dasharray: 1200; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .knot-cord.a { animation: knot-draw 1.8s .1s cubic-bezier(.6, .1, .2, 1) both; }
  .knot-cord.b { animation: knot-draw 1.8s .45s cubic-bezier(.6, .1, .2, 1) both; }
  .knot-cord.c { animation: knot-draw 1.8s .8s cubic-bezier(.6, .1, .2, 1) both; }
  .knot-tail { animation: knot-draw 1.2s 1.6s ease-out both; }
}
@keyframes knot-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
.hero-note {
  font-family: var(--display); font-weight: 500; letter-spacing: .3em; color: var(--ink-soft);
  writing-mode: vertical-rl; position: absolute; right: -8px; top: 12%; font-size: 15px;
}
.hero-stage { position: relative; }
.pick-label { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .08em; }
.pick-btn small { font-family: var(--body); font-weight: 500; letter-spacing: .04em; opacity: .85; }
.perks li { background: transparent; border: 0; border-left: 1px solid var(--gold); border-radius: 0; padding: 0 12px; font-weight: 500; font-size: 13px; color: var(--ink-soft); transform: none !important; }
.perks li:first-child { border-left: 0; padding-left: 0; }

/* 紋章（タイプのしるし） */
.mascot .cord { stroke-linecap: round; }
.burst {
  background: radial-gradient(circle at 50% 45%, #fff 0 52%, color-mix(in srgb, var(--burst) 10%, #fff) 72%, transparent 73%);
  border: 0; border-radius: 50%;
}
.burst::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.result-mascot { inset: 16%; }

/* 診断の流れ */
.section-title { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: .1em; }
.step-card { border: 1px solid var(--rule); background: #fff; transform: none !important; }
.step-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: var(--accent); }
.step-num { background: none; border: 0; padding: 0; color: var(--gold); font-family: var(--display); letter-spacing: .1em; }
.step-art { background: none; }

/* 質問 */
.progress { border: 1px solid var(--rule); background: rgba(255, 255, 255, .92); }
.progress-track { border: 0; background: var(--mist); height: 6px; }
.progress-fill { background: var(--ichigo); }
.mode-chip { background: var(--ichigo); border: 0; font-weight: 500; letter-spacing: .06em; }
.mode-chip[data-target="M"] { background: var(--grape); color: #fff; }
.q { border-bottom: 1px solid var(--rule); }
.q-text { font-family: var(--display); font-weight: 700; letter-spacing: .04em; }
.q-no { color: var(--gold); letter-spacing: .14em; }
.q-val { border: 1px solid var(--rule); background: #fff; font-weight: 700; }
.q.done .q-val { background: var(--lemon); border-color: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border: 0; }
input[type="range"]::-moz-range-track { height: 6px; border: 0; }
input[type="range"]::-webkit-slider-thumb { margin-top: -11px; width: 28px; height: 28px; border: 2px solid var(--ichigo); box-shadow: 0 2px 8px rgba(43, 36, 51, .15); }
input[type="range"]::-moz-range-thumb { border: 2px solid var(--ichigo); box-shadow: 0 2px 8px rgba(43, 36, 51, .15); }
input[type="range"].untouched::-webkit-slider-thumb { border: 2px dashed var(--ink-soft); background: #fff; }
.chip { border: 1px solid var(--rule); font-family: var(--body); font-weight: 500; }
.chip:hover { background: var(--mist); }

/* 結果：感覚の近さ */
.sync-card { background: #fff; color: var(--ink); border: 1px solid var(--rule); }
.sync-card .result-kicker { color: var(--ink-soft); }
.sync-card h1 { color: var(--ink); }
.sync-cats { color: var(--ink-soft); }
.sync-cats b { color: var(--ichigo); }
.gauge { background: conic-gradient(var(--ichigo) calc(var(--sync) * 1%), var(--mist) 0); padding: 8px; }
.gauge-inner { padding-top: 26%; }
.gauge-num { font-weight: 700; color: var(--ink); }
.result-hero { border: 1px solid var(--rule); background: #fff; }
.result-copy h1 { letter-spacing: .08em; }
.speech { background: transparent; border: 0; border-left: 2px solid var(--gold); border-radius: 0; padding: 4px 0 4px 16px; font-family: var(--display); font-weight: 500; }
.speech::before { display: none; }
.group-chip { border: 1px solid color-mix(in srgb, var(--group) 60%, #fff); background: color-mix(in srgb, var(--group) 12%, #fff); font-weight: 500; letter-spacing: .08em; }
.type-share { border: 1px solid var(--rule); background: var(--kumo); }
.type-share-note { font-weight: 700; }
.type-share-target { color: var(--ichigo); }
.tsb .bar, .data-bar .bar, .cat-track, .axis-track, .compare-track { border: 0; background: var(--mist); }
.tsb i, .data-bar i, .cat-track i { background: var(--ichigo); }
.tsb.m i, .data-bar.m i { background: var(--grape); }
.card { border: 1px solid var(--rule); background: #fff; }
.card h2 { letter-spacing: .06em; }
.type-facts div { background: var(--kumo); border: 0; }
.type-facts dt { color: var(--ichigo); font-weight: 700; }
.hearts li::before { background: var(--ichigo); }
.mini-type { border: 1px solid var(--rule); box-shadow: none; font-weight: 500; }
.pick-list li { background: var(--kumo); }
.pick-list.worst li { background: #F8EEF1; }
.pick-list b { color: var(--gold); }
.axis-fill { background: var(--ichigo); }
.axis-fill.right { background: var(--grape); }
.axis-head .pole.win { color: var(--ichigo); }
.axis-head .pole.right.win { color: var(--grape); }
.axis-you { background: #fff; border: 3px solid var(--ink); box-shadow: 0 1px 6px rgba(43, 36, 51, .2); }
.answer { border: 1px solid var(--rule); }
.answer.worst { border-color: color-mix(in srgb, var(--ichigo) 40%, #fff); }
.worst-key { background: var(--ichigo); }
.pin.you { border-color: #fff; box-shadow: 0 0 0 1px var(--ink); }
.pin.them { background: var(--ichigo); }
.answer[data-target="M"] .pin.them { background: var(--grape); }
.answers-cat { border-bottom: 1px solid var(--gold); }
.all-answers > summary { border: 1px solid var(--ink-soft); box-shadow: none; font-weight: 700; }
.share-card .sns { border: 0; box-shadow: none; font-family: var(--display); font-weight: 700; letter-spacing: .06em; }
.sns-threads { border: 1px solid var(--ink) !important; }

/* 婚活版の結果 */
.konkatsu {
  margin-top: 28px; padding: clamp(22px, 4vw, 36px); border-radius: var(--radius);
  background: linear-gradient(160deg, #3A2B42, #2B2433); color: #F3EEF4; position: relative; overflow: hidden;
}
.konkatsu::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(176, 141, 87, .45); border-radius: calc(var(--radius) - 6px); pointer-events: none; }
.konkatsu h2 { font-size: clamp(20px, 2.6vw, 24px); letter-spacing: .14em; color: #E8D3A8; }
.konkatsu-score { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-top: 18px; }
.konkatsu-num { display: grid; justify-items: center; padding: 14px 22px; border: 1px solid rgba(176, 141, 87, .6); border-radius: 14px; }
.konkatsu-num span { font-size: 12px; letter-spacing: .14em; color: #D9CBDD; }
.konkatsu-num b { font-family: var(--display); font-size: 54px; line-height: 1.1; color: #fff; }
.konkatsu-num small { font-size: 12px; color: #D9CBDD; }
.konkatsu h3 { font-size: 19px; color: #fff; margin-bottom: 6px; }
.konkatsu p { color: #DCD3DF; font-size: 15px; }
.konkatsu-sub { margin-top: 26px; font-size: 16px !important; letter-spacing: .1em; color: #E8D3A8 !important; }
.konkatsu-partners { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.konkatsu-partners a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.konkatsu-partners .mini-mascot { width: 44px; flex: none; }
.konkatsu-partners b { display: block; font-family: var(--display); color: #fff; font-size: 15px; }
.konkatsu-partners small { display: block; font-size: 12px; color: #CFC5D3; line-height: 1.5; }

/* ゲート（年齢・状況・メール） */
.gate { border: 1px solid var(--rule); box-shadow: none; text-align: left; }
.gate h1, .gate-lead { text-align: center; }
.gate-art { width: 110px; }
.gate-art .mascot { animation: none; }
.choices { border: 0; padding: 0; margin: 18px 0 0; }
.choices legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; padding: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: #fff;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.choice input:checked + span { background: var(--ichigo); border-color: var(--ichigo); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.field input { border: 1px solid var(--rule); border-radius: 12px; }
.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* 図鑑・コラム・広告 */
.type-card { border: 1px solid var(--rule); }
.type-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(43, 36, 51, .08); }
.group-head h2 { background: none; border: 0; padding: 0; color: var(--group); letter-spacing: .12em; }
.axis-legend li { border: 1px solid var(--rule); }
.column-item { border: 1px solid var(--rule); }
.column-item:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(43, 36, 51, .08); }
.column-item b { font-weight: 700; letter-spacing: .04em; }
.prose h2 { border-left: 0; padding-left: 0; padding-bottom: 8px; border-bottom: 1px solid var(--gold); letter-spacing: .06em; }
.stat-card { border: 1px solid var(--rule); }
.cta-box { background: #fff; border: 1px solid var(--gold); box-shadow: none; }
.ad-slot { border: 1px solid var(--rule); }
.ad-empty { border: 1px dashed var(--gold); background: repeating-linear-gradient(-45deg, #FBF8F2 0 14px, #F5EFE3 14px 28px); }
.pr-chip { background: var(--ink-soft); font-family: var(--body); font-weight: 700; }
.ad-item { border: 1px solid var(--rule); background: var(--kumo); }
.site-footer { border-top: 1px solid var(--rule); background: transparent; }
.toast { background: var(--ink); }
.loading-heart .mascot { animation: beat 1.4s infinite; }

@media (max-width: 900px) {
  .hero-note { display: none; }
  .hero-stage { max-width: 300px; }
  .konkatsu-partners { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .konkatsu-score { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .logo-text { font-size: 17px; }
}

/* 紋章は背景の円の中に大きく置き、輪を重ねない */
.burst::after { display: none; }
.burst { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--burst) 9%, #fff) 0 66%, transparent 67%); }
.result-mascot { inset: 7%; }
@media (max-width: 900px) {
  .hero-stage { max-width: 230px; }
}
.hero-mascot .mascot, .result-mascot .mascot { filter: none; }

/* ============================================================
   AとBで選ぶ質問・恋愛観マップ
   ============================================================ */
:root { --chart-a: #A3506E; --chart-b: #2E7DB8; }

/* 診断の長さ */
.mode-pick { border: 0; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; }
.mode-pick legend { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .08em; margin-bottom: 8px; padding: 0; }
.mode-opt { position: relative; cursor: pointer; }
.mode-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode-opt span { display: block; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--rule); background: #fff; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.mode-opt b { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); letter-spacing: .06em; }
.mode-opt input:checked + span { border-color: var(--ichigo); box-shadow: inset 0 0 0 1px var(--ichigo); background: #FBF6F8; }
.mode-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 質問 */
.q { padding: 30px 0 26px; }
.q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-lead { display: block; width: 100%; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 2.2vw, 20px); letter-spacing: .04em; padding: 0; margin-bottom: 12px; }
.q-lead .q-no { margin-bottom: 4px; }
.q-ab { text-align: center; font-weight: 500; font-size: 15.5px; line-height: 1.7; margin: 2px auto; max-width: 30em; }
.ab-a, .ab-b { font-family: var(--display); font-weight: 700; margin-right: 6px; }
.ab-a { color: var(--chart-a); }
.ab-b { color: var(--chart-b); }
.heart-scale { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 16px); margin-top: 18px; }
.hs { position: relative; cursor: pointer; display: grid; place-items: center; }
.hs input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hs svg { display: block; overflow: visible; transition: transform .15s; }
.hs path { fill: #fff; stroke: var(--c); stroke-width: 1.6; transition: fill .15s; }
.hs-0, .hs-1, .hs-2 { --c: var(--chart-a); }
.hs-3, .hs-4, .hs-5 { --c: var(--chart-b); }
.hs-0 svg, .hs-5 svg { width: 50px; }
.hs-1 svg, .hs-4 svg { width: 40px; }
.hs-2 svg, .hs-3 svg { width: 31px; }
.hs-2 { margin-right: clamp(6px, 2vw, 14px); }
.hs:hover path { fill: color-mix(in srgb, var(--c) 14%, #fff); }
.hs input:checked + svg path { fill: var(--c); }
.hs input:checked + svg { transform: scale(1.06); }
.hs input:focus-visible + svg { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.hs-ends { display: flex; justify-content: space-between; max-width: 300px; margin: 6px auto 0; font-family: var(--display); font-weight: 700; font-size: 14px; }
.hs-ends span:first-child { color: var(--chart-a); }
.hs-ends span:last-child { color: var(--chart-b); }
.q.done { opacity: .55; }

/* 結果のグラフの色（色覚の多様性をふまえて検証済みの2色） */
.axis-fill, .tsb i, .data-bar i, .cat-track i { background: var(--chart-a); }
.axis-fill.right, .tsb.m i, .data-bar.m i { background: var(--chart-b); }
.axis-head .pole.win { color: var(--chart-a); }
.axis-head .pole.right.win { color: var(--chart-b); }
.pin.them { background: var(--chart-a); }
.answer[data-target="M"] .pin.them { background: var(--chart-b); }
.axis-track { overflow: visible; }
.axis-track .axis-fill.right { box-shadow: -2px 0 0 #fff; }

/* 恋愛観マップ */
.love-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.love-map { margin: 0; }
.love-map figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.love-map figcaption b { font-family: var(--display); font-size: 16px; letter-spacing: .06em; }
.love-map figcaption span { font-size: 14px; color: var(--chart-a); font-weight: 700; }
.love-map svg { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.lm-frame { fill: none; stroke: var(--rule); stroke-width: 1; }
.lm-zone { fill: color-mix(in srgb, var(--chart-a) 7%, #fff); }
.lm-mid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.lm-corner { font-size: 11px; fill: var(--ink-soft); font-family: var(--body); }
.lm-corner.on { fill: var(--ink); font-weight: 700; }
.lm-axis { font-size: 11.5px; fill: var(--ink); font-family: var(--display); font-weight: 700; letter-spacing: .04em; }
.lm-hit { fill: transparent; }
.lm-you { fill: var(--chart-a); stroke: #fff; stroke-width: 2.5; }
.lm-label { font-size: 12px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.lm-dot { cursor: default; outline: none; }
.lm-dot:focus-visible .lm-you { stroke: var(--gold); stroke-width: 3; }
.lm-desc { font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.7; }

@media (max-width: 760px) {
  .love-map-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mode-pick { margin-left: auto; margin-right: auto; text-align: left; }
  .hs-0 svg, .hs-5 svg { width: 44px; }
  .hs-1 svg, .hs-4 svg { width: 35px; }
  .hs-2 svg, .hs-3 svg { width: 27px; }
}

/* ---------- キャラクターの動き（まばたき・呼吸・耳） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .result-mascot .mascot .char, .hero-chars .mascot .char, .type-mascot .mascot .char {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: chara-breathe 4.2s ease-in-out infinite; animation-delay: var(--d, 0s);
  }
  .result-mascot .mascot .eyes, .hero-chars .mascot .eyes, .type-mascot .mascot .eyes {
    transform-box: fill-box; transform-origin: center;
    animation: chara-blink 5.6s infinite; animation-delay: var(--d, 0s);
  }
  .result-mascot .mascot .ear-l, .hero-chars .mascot .ear-l, .type-mascot .mascot .ear-l {
    transform-box: fill-box; transform-origin: 50% 100%; animation: chara-ear 7s infinite; animation-delay: calc(var(--d, 0s) + 1.2s);
  }
  .result-mascot .mascot .ear-r, .hero-chars .mascot .ear-r, .type-mascot .mascot .ear-r {
    transform-box: fill-box; transform-origin: 50% 100%; animation: chara-ear 7s infinite reverse; animation-delay: calc(var(--d, 0s) + 3.4s);
  }
}
@keyframes chara-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.5px) scaleY(1.012); } }
@keyframes chara-blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } 96% { transform: scaleY(1); } }
@keyframes chara-ear { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-7deg); } 94% { transform: rotate(4deg); } 97% { transform: rotate(0); } }
.result-mascot .mascot, .type-mascot .mascot { filter: drop-shadow(0 10px 22px rgba(43, 36, 51, .10)); }
.animal-chip { padding: 2px 12px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ink-soft); }
.type-card-animal { font-size: 12.5px !important; color: var(--gold) !important; font-weight: 700; letter-spacing: .08em; margin: -2px 0 6px; }

/* ---------- トップのキャラクター ---------- */
.hero-stage { aspect-ratio: 1; }
.hero-stage .knot { width: 62%; }
.hero-chars { position: absolute; inset: 0; pointer-events: none; }
.hero-char { position: absolute; width: 23%; pointer-events: auto; display: block; border-radius: 50%; }
.hero-char .mascot { width: 100%; height: auto; filter: drop-shadow(0 8px 16px rgba(43, 36, 51, .12)); }
.hero-char:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hc-0 { left: 2%; top: 4%; }
.hc-1 { right: 2%; top: 2%; }
.hc-2 { left: -4%; top: 40%; }
.hc-3 { right: -4%; top: 40%; }
.hc-4 { left: 8%; bottom: 0; }
.hc-5 { right: 8%; bottom: 2%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-char { animation: chara-float 5.5s ease-in-out infinite; }
  .hc-1 { animation-delay: -1s; } .hc-2 { animation-delay: -2.2s; } .hc-3 { animation-delay: -3.1s; }
  .hc-4 { animation-delay: -4s; } .hc-5 { animation-delay: -1.7s; }
  .hero-char:hover { animation-play-state: paused; }
}
@keyframes chara-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero-note { right: -30px; }
@media (max-width: 900px) {
  .hero-stage { max-width: 320px; }
  .hc-2 { left: -2%; } .hc-3 { right: -2%; }
}
.hero-note { display: none; }

/* 4つの傾向：見出しと数字を同じ書体・同じ大きさにそろえる（多いほうは色だけで示す） */
/* ラベルも数字も、上の「ジャンル別のレア度」と同じ本文ゴシック・同じ太さ・同じ大きさにそろえる */
.axis-head { font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); }
.axis-head .pole, .axis-head .pole b, .axis-head .pole.win b { font-family: var(--body); font-weight: 700; font-size: 15px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .axis-head, .axis-head .pole, .axis-head .pole b, .axis-head .pole.win b { font-size: 13.5px; } }

/* タイプの割合：男女とも同じ物差し（0〜25%）。色は男女で分けず、選んだ側だけ濃くする */
.tsb, .tsb.on, .type-share:not(:has(.type-share-target)) .tsb { opacity: 1; }
.tsb span, .tsb b { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.tsb b { font-variant-numeric: tabular-nums; }
.tsb .bar { position: relative; overflow: visible; }
.tsb .bar i, .tsb.m .bar i { border-radius: 999px; background: color-mix(in srgb, var(--ink-soft) 45%, #fff); }
.tsb.on span, .tsb.on b { color: var(--chart-a); }
.tsb.on .bar i, .type-share:not(:has(.type-share-target)) .tsb .bar i { background: var(--chart-a); }
.tsb .bar em { position: absolute; top: -4px; bottom: -4px; border-left: 1.5px dashed var(--ink); opacity: .55; }
.type-share-target small { font-size: 13px; color: var(--ink-soft); margin-left: 4px; }

/* 恋愛観のレア度（★1〜5） */
.gauge-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-top: 0; }
.gauge-label { font-family: var(--display); font-size: 14px; letter-spacing: .12em; color: var(--ink-soft); }
.gauge-stars { font-size: 22px; letter-spacing: .06em; color: var(--gold); white-space: nowrap; }
.cat-bars li { grid-template-columns: 9.5em auto 1fr; }
.cat-stars { color: var(--gold); letter-spacing: .08em; font-size: 16px; white-space: nowrap; }
.cat-bars b { font-family: var(--display); font-weight: 700; text-align: left; color: var(--ink); }
@media (max-width: 640px) {
  .cat-bars li { grid-template-columns: auto 1fr; }
  .gauge-stars { font-size: 19px; }
}

/* タイプの割合（文章のまとめ） */
.type-share-target b { font-size: 22px; font-weight: 400; margin: 0 2px; }
.type-share-sum { font-size: 15px; color: var(--ink); line-height: 1.8; margin-top: 4px; }

/* 図鑑のカード：ひとことを2行分の高さにそろえ、全カードの高さと割合の位置をそろえる */
.type-card { display: flex; flex-direction: column; align-items: center; }
.type-card .type-card-catch { min-height: calc(1.7em * 2); display: flex; align-items: center; justify-content: center; text-wrap: balance; }
.type-card .type-card-share { margin-top: auto; padding-top: 6px; }

/* 4つの傾向のラベル：多い側も少ない側も同じ色。どちらが多いかはバーの長さで示す */
.axis-head .pole, .axis-head .pole.win, .axis-head .pole.right.win { color: var(--ink); }

/* 恋愛観マップ：横軸のラベルはグラフの左右に縦書きで置く */
.lm-axis { letter-spacing: 0; }
.lm-side { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -.03em; }

/* 答え合わせ：A・Bの割合と、選んだ側 */
.side-key { display: inline-block; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule); font-size: 12px; font-weight: 700; line-height: 1.8; color: var(--ink-soft); }
.answer.minor .side-key { border-color: var(--ink); color: var(--ink); }
.ab-split { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.ab-split li { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: baseline; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; line-height: 1.55; }
.ab-split li.chosen { border-color: var(--ink); font-weight: 700; }
.ab-split b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.ab-bar { display: flex; height: 8px; margin: 10px 10px 0; border-radius: 999px; overflow: hidden; gap: 2px; }
.ab-bar span:first-child { background: var(--chart-a); }
.ab-bar span:last-child { background: var(--chart-b); }
.answer-you { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }
.answer-you b { color: var(--ink); }

/* 「ある・ない」で答える質問の補足、1問だけのジャンルの注記 */
.hs-hint { max-width: 300px; margin: 6px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); text-align: center; }
.cat-note { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* タイプ名は <wbr> の位置でだけ改行する */
.type-name { word-break: keep-all; overflow-wrap: anywhere; }
/* 動物のチップを「◯◯派」のチップと同じ大きさ・書体にそろえる */
.result-code .animal-chip { font-family: var(--body); font-size: 14px; letter-spacing: .08em; padding: 2px 14px; line-height: inherit; }

/* 「多数派と同じだった答え／少数派だった答え」：3つそろっているときは、左右のカードで行の高さをそろえる */
@media (min-width: 641px) {
  .result-grid > .card:has(> .pick-list) { display: flex; flex-direction: column; }
  .pick-list:has(> li:nth-child(3)) { flex: 1; grid-auto-rows: 1fr; }
}

/* データ出典：12問での番号と、A・Bの選択肢 */
.data-note { max-width: 40em; margin: 0 auto 20px; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.q-no-quick { margin-left: 10px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink-soft); }
.data-item .q-ab { margin: 2px 0; font-size: 14.5px; text-align: left; justify-content: flex-start; }
.data-item .data-survey { margin-top: 8px; }

/* スマホの共有メニュー（Instagram など、ほかのアプリへ） */
.sns-more { grid-column: 1 / -1; background: #fff; color: var(--ink); border: 1px solid var(--rule) !important; font-family: var(--body) !important; font-weight: 700; cursor: pointer; }
.sns-more[hidden] { display: none; }

/* スマホ：上のタブが4つでも1行におさめる */
.nav a { white-space: nowrap; }
@media (max-width: 640px) {
  .nav { gap: 0; }
  .nav a { font-size: 13px; letter-spacing: 0; padding: 6px 6px; }
}
@media (max-width: 360px) {
  .site-header { padding-left: 8px; padding-right: 8px; }
  .logo-mark { width: 30px; height: 30px; }
  .nav a { font-size: 12px; padding: 6px 4px; }
}

/* 小さいスマホで、はじめ方のカードが横にはみ出さないように */
@media (max-width: 900px) {
  .step-list { grid-template-columns: minmax(0, 1fr); }
}