.okkee-shindan {
  --okkee-main: #04384c;
  --okkee-text: #333;
  --okkee-muted: #5c6b73;
  --okkee-line: #d7e0e4;
  --okkee-bg: #fdfdfd;
  --okkee-pale: #f3f8fd;
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto;
  color: var(--okkee-text);
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500;
  line-height: 1.85;
  text-align: left;
}

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

.okkee-shindan p {
  margin: 0 0 1em;
}

.okkee-shindan h1,
.okkee-title {
  margin: 0 0 0.6em;
  color: var(--okkee-main);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.okkee-lead {
  margin: 0 0 0.4em;
  font-size: 1.02rem;
}

.okkee-note {
  margin: 0 0 1.4em;
  color: var(--okkee-muted);
  font-size: 0.92rem;
}

.okkee-progress {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4em;
  color: var(--okkee-muted);
  font-size: 0.85rem;
}

.okkee-bar {
  height: 3px;
  margin-bottom: 1.4em;
  background: #e6eef1;
}

.okkee-bar > span {
  display: block;
  height: 3px;
  background: var(--okkee-main);
}

.okkee-q {
  margin: 0 0 1.1em;
  color: var(--okkee-main);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

.okkee-choices {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.okkee-shindan button {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.okkee-choice {
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--okkee-main);
  border-radius: 4px;
  background: #fff;
  color: var(--okkee-main);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.okkee-choice:hover,
.okkee-choice:focus-visible {
  background: var(--okkee-main);
  color: #fff;
}

.okkee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em 1.2em;
  margin-top: 1.4em;
}

.okkee-textbtn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--okkee-muted);
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.okkee-textbtn:disabled {
  opacity: 0.35;
  cursor: default;
  text-decoration: none;
}

.okkee-primary {
  display: inline-block;
  padding: 0.85em 1.4em;
  border: 0;
  border-radius: 80px;
  background: var(--okkee-main);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.okkee-primary:hover,
.okkee-primary:focus-visible {
  background: #032a39;
  color: #fff;
}

.okkee-type {
  margin: 0 0 0.2em;
  color: var(--okkee-main);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.45;
}

.okkee-kuchi {
  margin: 0 0 1.2em;
  font-size: 1.05rem;
}

.okkee-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8em;
  margin: 0 0 1.2em;
}

.okkee-score {
  padding: 0.8em 0.9em;
  background: var(--okkee-pale);
}

.okkee-score b {
  display: block;
  color: var(--okkee-main);
  font-size: 1.7rem;
  line-height: 1.2;
}

.okkee-score span {
  color: var(--okkee-muted);
  font-size: 0.85rem;
}

.okkee-map {
  margin: 0 0 1.4em;
}

.okkee-map svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

.okkee-map figcaption {
  margin-top: 0.4em;
  color: var(--okkee-muted);
  font-size: 0.82rem;
}

.okkee-border {
  margin: 0 0 1em;
  color: var(--okkee-muted);
}

.okkee-strong {
  font-weight: 700;
}

.okkee-mail {
  margin: 0.4em 0 1.2em;
}

.okkee-share {
  margin-left: 0.2em;
}