.bookselection-finder {
  --bookselection-ink: #302b25;
  --bookselection-muted: #756c62;
  --bookselection-paper: #fffdf8;
  --bookselection-soft: #fbf7ef;
  --bookselection-profile: #f9f1df;
  --bookselection-line: #ddd0bf;
  --bookselection-yellow: #f3d838;
  --bookselection-brown: #725039;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bookselection-line);
  border-radius: 14px;
  background: var(--bookselection-paper);
  color: var(--bookselection-ink);
  box-shadow: 0 12px 28px rgba(96, 69, 43, .09);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

.bookselection-finder *, .bookselection-finder *::before, .bookselection-finder *::after { box-sizing: border-box; }
.bookselection-finder [hidden] { display: none !important; }
.bookselection-finder h2, .bookselection-finder h3, .bookselection-finder h4 { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-decoration: none !important; }
.bookselection-finder h2::before, .bookselection-finder h2::after, .bookselection-finder h3::before, .bookselection-finder h3::after, .bookselection-finder h4::before, .bookselection-finder h4::after { display: none !important; content: none !important; }

.bookselection-profile {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 142px;
  padding: 39px 150px 27px 42px;
  border-bottom: 1px solid var(--bookselection-line);
  background: var(--bookselection-profile);
}

.bookselection-profile::before { position: absolute; inset: 0 0 auto; height: 6px; background: var(--bookselection-yellow); content: ""; }
.bookselection-profile-copy { min-width: 0; }
.bookselection-free { position: absolute; z-index: 2; top: 17px; right: 20px; padding: 6px 11px; border: 1px solid #c5a900; border-radius: 999px; background: var(--bookselection-yellow); color: #333; font-size: 11px; font-weight: 800; line-height: 1.2; }
.bookselection-mascot-frame { display: grid; width: 90px; height: 90px; place-items: center; overflow: hidden; border: 2px solid #d7be81; border-radius: 50%; background: #f7df5e; }
.bookselection-mascot { display: block; width: 104px !important; height: 104px !important; max-width: none !important; object-fit: contain; object-position: center; transform: translateX(-9px); }

.bookselection-finder .bookselection-title {
  all: unset;
  display: block;
  color: var(--bookselection-ink) !important;
  font: 800 clamp(22px, 3.5vw, 27px)/1.48 -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
  letter-spacing: 0;
}

.bookselection-greeting { margin: 7px 0 0; color: var(--bookselection-muted); font-size: 13px; line-height: 1.75; }
.bookselection-greeting strong, .bookselection-greeting span { display: block; }
.bookselection-greeting strong { margin-top: 5px; color: var(--bookselection-ink); font-size: 14px; }
.bookselection-greeting span { margin-top: 2px; }
.bookselection-chooser, .bookselection-form { padding-right: clamp(20px, 5vw, 42px); padding-left: clamp(20px, 5vw, 42px); }
.bookselection-chooser > p { margin: 0; color: var(--bookselection-muted); font-size: 12px; line-height: 1.7; }
.bookselection-chooser { padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--bookselection-line); }
.bookselection-chooser h3 { all: unset; display: block; margin-bottom: 5px; color: var(--bookselection-ink) !important; font-size: 19px !important; line-height: 1.55 !important; font-weight: 800 !important; }

.bookselection-kind-options { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 18px; }
.bookselection-kind {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 17px 19px;
  border: 1px solid var(--bookselection-line);
  border-radius: 12px;
  background: var(--bookselection-soft);
  color: var(--bookselection-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bookselection-kind:hover, .bookselection-kind:focus-visible { border-color: var(--bookselection-brown); background: #fff9e3; }
.bookselection-kind.is-selected { border-color: var(--bookselection-brown); background: #fff5c5; box-shadow: inset 0 0 0 1px var(--bookselection-brown); }
.bookselection-kind__icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--bookselection-yellow); color: #302b25; line-height: 1; }
.bookselection-kind__icon svg { display: block; width: 29px; height: 29px; fill: #fffdf8; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bookselection-kind__icon--manga svg { width: 31px; height: 31px; stroke-width: 2; }
.bookselection-kind strong { display: block; margin-bottom: 3px; font-size: 17px; font-weight: 800; }
.bookselection-kind small { display: block; color: var(--bookselection-muted); font-size: 11px; line-height: 1.55; }
.bookselection-check { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--bookselection-line); border-radius: 50%; color: transparent; font-size: 12px; font-weight: 900; line-height: 1; }
.bookselection-kind.is-selected .bookselection-check { border-color: var(--bookselection-yellow); background: var(--bookselection-yellow); color: #302b25; }
.bookselection-chooser .bookselection-choice-status { min-height: 20px; margin-top: 12px; color: var(--bookselection-brown); font-size: 11px; font-weight: 700; }
.bookselection-chooser .bookselection-choice-status.is-loading { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 9px 13px; border: 1px solid #d7be81; border-radius: 999px; background: #fff7d1; color: #553b29; font-size: 13px; box-shadow: 0 3px 10px rgba(114, 80, 57, .08); }
.bookselection-chooser .bookselection-choice-status.is-loading::before { width: 15px; height: 15px; border: 2px solid rgba(114, 80, 57, .22); border-top-color: var(--bookselection-brown); border-radius: 50%; content: ""; animation: bookselection-spin .8s linear infinite; }
@keyframes bookselection-spin { to { transform: rotate(360deg); } }

.bookselection-form { padding-bottom: 38px; }
.bookselection-question { scroll-margin-top: 18px; padding: 31px 0 34px; border-bottom: 1px dashed var(--bookselection-line); }
.bookselection-question__head { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; margin-bottom: 17px; }
.bookselection-question__number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--bookselection-yellow); color: #302b25; font-size: 12px; font-weight: 900; }
.bookselection-question h3 { all: unset; display: block; color: var(--bookselection-ink) !important; font-size: 19px !important; line-height: 1.55 !important; font-weight: 800 !important; }
.bookselection-question__head p { margin: 2px 0 0; color: var(--bookselection-muted); font-size: 11px; }
.bookselection-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.bookselection-option { position: relative; display: block; margin: 0; cursor: pointer; }
.bookselection-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bookselection-option > span { display: flex; min-height: 52px; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--bookselection-line); border-radius: 9px; background: var(--bookselection-paper); color: var(--bookselection-ink); font-size: 12px; transition: .15s ease; }
.bookselection-option i { display: grid; width: 20px; height: 20px; place-items: center; flex: 0 0 auto; border: 1px solid var(--bookselection-line); border-radius: 50%; color: transparent; font-size: 11px; font-style: normal; font-weight: 900; line-height: 1; }
.bookselection-option b { font-weight: 700; }
.bookselection-option:hover > span { border-color: var(--bookselection-brown); }
.bookselection-option input:checked + span { border-color: var(--bookselection-brown); background: #fff7d1; box-shadow: inset 0 0 0 1px var(--bookselection-brown); }
.bookselection-option input:checked + span i { border-color: var(--bookselection-yellow); background: var(--bookselection-yellow); color: #302b25; }
.bookselection-option input:focus-visible + span, .bookselection-kind:focus-visible, .bookselection-submit:focus-visible, .bookselection-retry:focus-visible, .bookselection-another:focus-visible { outline: 3px solid rgba(114, 80, 57, .25); outline-offset: 2px; }

.bookselection-finish { padding: 28px 0 0; text-align: center; }
.bookselection-finish > p:first-child { margin: 0 0 15px; color: var(--bookselection-muted); font-size: 12px; line-height: 1.7; }
.bookselection-submit, .bookselection-retry, .bookselection-another { min-height: 50px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; }
.bookselection-finder .bookselection-submit { display: inline-flex; min-width: min(100%, 340px); align-items: center; justify-content: center; gap: 10px; padding: 12px 23px; border: 1px solid #c5a900; background: #f3d838 !important; color: #333 !important; }
.bookselection-finder .bookselection-submit span { color: #333 !important; font-size: 18px; }
.bookselection-finder .bookselection-submit:hover { background: #e5ca23 !important; }
.bookselection-status { min-height: 20px; margin: 11px 0 0; color: var(--bookselection-brown); font-size: 11px; font-weight: 700; }

.bookselection-results { scroll-margin-top: 2rem; padding: 38px clamp(20px, 5vw, 42px) 42px; background: #f6efe4; }
.bookselection-results__heading { margin-bottom: 24px; text-align: center; outline: none; }
.bookselection-results__heading p { margin: 0 0 5px; color: var(--bookselection-brown); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.bookselection-finder .bookselection-results__heading h2 { all: unset; display: block; color: var(--bookselection-ink) !important; font-size: clamp(21px, 3vw, 28px) !important; font-weight: 800 !important; line-height: 1.5 !important; }
.bookselection-results__grid { display: grid; gap: 18px; }
.bookselection-card { position: relative; display: grid; grid-template-columns: minmax(150px, 24%) 1fr; overflow: hidden; margin: 0; border: 1px solid var(--bookselection-line); border-radius: 12px; background: var(--bookselection-paper); box-shadow: 0 7px 18px rgba(82, 58, 38, .07); }
.bookselection-card__cover { align-self: stretch; width: 100% !important; height: 100% !important; min-height: 290px; max-height: none !important; object-fit: contain; padding: 24px 14px; background: #f3ede3; }
.bookselection-card__body { padding: 25px; }
.bookselection-finder .bookselection-card__title { all: unset; display: block; color: var(--bookselection-ink) !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.5 !important; }
.bookselection-card__meta { margin: 5px 0 17px; color: var(--bookselection-muted); font-size: 12px; }
.bookselection-card__text { margin-top: 15px; }
.bookselection-card__text-label { display: block; margin-bottom: 4px; color: var(--bookselection-brown); font-size: 12px; font-weight: 800; }
.bookselection-card__text p { margin: 0; color: var(--bookselection-ink); font-size: 13px; line-height: 1.85; }
.bookselection-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bookselection-card__actions a { display: inline-block; padding: 9px 14px; border-radius: 7px; text-decoration: none; font-size: 12px; font-weight: 800; }
.bookselection-finder .bookselection-card__buy--amazon, .bookselection-finder .bookselection-card__buy--rakuten { background: #333 !important; color: #fff !important; }
.bookselection-results__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.bookselection-retry, .bookselection-another { min-width: min(100%, 260px); margin: 0; padding: 11px 20px; }
.bookselection-retry { border: 1px solid var(--bookselection-brown); background: #fffdf8; color: var(--bookselection-brown); }
.bookselection-finder .bookselection-another { border: 1px solid #c5a900; background: #f3d838 !important; color: #333 !important; }
.bookselection-finder .bookselection-another:hover { background: #e5ca23 !important; }
.bookselection-message { margin: 20px; padding: 15px; border: 1px solid #d7be81; border-radius: 8px; background: #fff8dc; }

@media (max-width: 700px) {
  .bookselection-finder { margin: 0; border-radius: 11px; }
  .bookselection-profile { grid-template-columns: 72px minmax(0, 1fr); gap: 15px; padding: 49px 19px 23px; }
  .bookselection-profile-copy { display: contents; }
  .bookselection-profile-copy .bookselection-title { grid-column: 2; align-self: center; }
  .bookselection-profile-copy .bookselection-greeting { grid-column: 1 / -1; margin-top: 0; }
  .bookselection-free { top: 15px; right: 15px; }
  .bookselection-mascot-frame { width: 72px; height: 72px; }
  .bookselection-mascot { width: 84px !important; height: 84px !important; transform: translateX(-7px); }
  .bookselection-kind-options { grid-template-columns: 1fr; }
  .bookselection-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bookselection-card { display: block; }
  .bookselection-card__cover { display: block; width: 100% !important; height: auto !important; min-height: 0; max-height: 380px !important; aspect-ratio: 4 / 3; padding: 22px 14px; }
  .bookselection-card__body { padding: 19px 15px; }
  .bookselection-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bookselection-card__actions a { display: flex; align-items: center; justify-content: center; min-width: 0; text-align: center; }
}

@media (max-width: 430px) {
  .bookselection-options { grid-template-columns: 1fr; }
  .bookselection-finder .bookselection-title { font-size: 21px !important; }
  .bookselection-greeting { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bookselection-finder * { scroll-behavior: auto !important; transition: none !important; }
  .bookselection-chooser .bookselection-choice-status.is-loading::before { animation: none; }
}
