:root {
  color-scheme:light;
  --ink:#172421;
  --muted:#5d6965;
  --line:#dce3df;
  --paper:#f4f6f4;
  --lime:#d5f86b;
  --a:#6350a2;
  --b:#137d72;
  --white:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  line-height:1.65;
}
button,input,select,textarea {
  font:inherit;
  color:inherit;
}
button,a,input,select,summary,textarea {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--b);
  outline-offset:4px;
}
[hidden] {
  display:none!important;
}
.skip {
  position:absolute;
  top:-100px;
  left:16px;
  background:white;
  padding:12px;
  z-index:5;
}
.skip:focus {
  top:8px;
}
.site-header {
  max-width:1240px;
  margin:auto;
  padding:25px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex;
  align-items:center;
  text-decoration:none;
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-.06em;
}
.brand-mark {
  width:33px;
  height:33px;
  border-radius:10px;
  background:var(--ink);
  color:var(--lime);
  display:grid;
  place-items:center;
  font-size:1.4rem;
  margin-right:10px;
}
.brand-question {
  color:var(--b);
}
.header-note {
  font-size:.875rem;
  color:var(--muted);
}
main {
  max-width:1240px;
  padding:0 40px;
  margin:auto;
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:38px 0 32px;
  gap:20px;
}
.eyebrow {
  font-size:.75rem;
  letter-spacing:.18em;
  font-weight:750;
  margin:0 0 12px;
  color:var(--b);
}
h1 {
  font-size:clamp(1.75rem,3.2vw,2.6rem);
  letter-spacing:-.045em;
  line-height:1.4;
  margin:0 0 12px;
}
h1 span {
  display:inline-block;
}
.intro p:last-child {
  margin:0;
  color:var(--muted);
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  min-height:48px;
  border-radius:10px;
  padding:11px 18px;
  border:1px solid transparent;
  font-weight:700;
  font-size:.9375rem;
  transition:background .15s,transform .15s;
}
.button:active {
  transform:translateY(1px);
}
.secondary {
  border-color:#cbd5cf;
  background:white;
}
.secondary:hover {
  background:#eaf0eb;
}
.primary {
  background:var(--ink);
  color:var(--lime);
}
.primary:hover {
  background:#2b4239;
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:30px;
  align-items:start;
}
.section-heading {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.step {
  display:grid;
  place-items:center;
  font-size:.75rem;
  font-weight:800;
  min-width:29px;
  height:29px;
  border:1px solid #bac8be;
  border-radius:50%;
}
h2 {
  font-size:1.125rem;
  margin:0;
  letter-spacing:-.025em;
}
.section-note {
  color:var(--muted);
  font-size:.875rem;
  margin:0 0 22px;
}
.products {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.product-card {
  min-width:0;
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 22px 25px;
  margin:0;
  box-shadow:0 3px 0 #e9eeea;
}
.product-card legend {
  font-weight:750;
  padding:0 9px;
  margin-left:-9px;
  display:flex;
  align-items:center;
  gap:8px;
}
.product-letter {
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#ece7f6;
  color:var(--a);
  font-size:1rem;
}
.product-b .product-letter {
  background:#def0eb;
  color:var(--b);
}
label {
  font-size:.875rem;
  font-weight:600;
  display:block;
  margin:17px 0 7px;
}
.required,.optional {
  font-weight:400;
  color:var(--muted);
  font-size:.75rem;
  float:right;
}
input:not([type=radio]),select,textarea {
  width:100%;
  background:#fff;
  border:1px solid #cbd5cf;
  border-radius:8px;
  min-height:46px;
  padding:10px 11px;
  outline:none;
  font-size:1rem;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--b);
  box-shadow:0 0 0 3px #d7eee6;
}
input::placeholder {
  color:#7d8782;
  font-size:.875rem;
}
.money-input {
  position:relative;
}
.money-input>span {
  position:absolute;
  top:10px;
  left:13px;
  color:var(--muted);
}
.money-input input {
  padding-left:32px;
}
.rating-heading {
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:19px;
  font-size:.875rem;
  font-weight:750;
}
.rating-heading span {
  display:block;
  color:var(--muted);
  font-size:.75rem;
  font-weight:400;
  margin-top:3px;
}
.small-note {
  font-size:.8125rem;
  color:var(--muted);
  margin:14px 0;
  line-height:1.8;
}
.preferences {
  background:#e8eee8;
  border:1px solid #dbe4d9;
  border-radius:16px;
  padding:23px;
}
.preferences .small-note {
  margin:7px 0 23px;
}
.priority {
  border:0;
  padding:0;
  margin:0 0 21px;
  min-width:0;
}
.priority legend {
  font-size:.875rem;
  font-weight:650;
  margin-bottom:9px;
}
.segments {
  display:flex;
  gap:3px;
  padding:4px;
  border-radius:9px;
  background:#dbe3db;
}
.segments label {
  flex:1;
  min-width:0;
  margin:0;
  position:relative;
  font-size:.8125rem;
  text-align:center;
  font-weight:500;
  cursor:pointer;
}
.segments input {
  position:absolute;
  opacity:0;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.segments span {
  display:grid;
  place-items:center;
  min-height:39px;
  padding:6px 2px;
  border:1px solid transparent;
  border-radius:6px;
  line-height:1.4;
}
.segments input:checked+span {
  background:#fff;
  border-color:#c5d0c4;
  font-weight:700;
  box-shadow:0 1px 3px #263e1710;
}
.segments input:focus-visible+span {
  outline:3px solid var(--b);
  outline-offset:1px;
}
.preferences>.primary {
  width:100%;
  margin-top:3px;
  padding-inline:9px;
}
.privacy-note {
  color:var(--muted);
  font-size:.75rem;
  text-align:center;
  margin:13px 0 0;
}
.error:empty {
  display:none;
}
.error,.notice {
  padding:12px;
  background:#fff0df;
  color:#814217;
  border-radius:8px;
}
.result {
  margin-top:35px;
  border:1px solid #cbd6c8;
  border-top:6px solid var(--lime);
  border-radius:16px;
  background:#fff;
  padding:32px;
  scroll-margin-top:20px;
}
.result-kicker {
  margin:0 0 6px;
  color:var(--muted);
  font-size:.875rem;
}
.result h2 {
  font-size:clamp(1.5rem,3vw,2rem);
  overflow-wrap:anywhere;
}
.result h2:focus {
  outline:none;
}
.result>p {
  max-width:900px;
}
.score-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:25px 0;
}
.score-card {
  min-width:0;
  border:1px solid var(--line);
  padding:20px;
  border-radius:12px;
}
.score-card.winner {
  border-color:#a4bf5b;
  background:#f6fce8;
}
.score-label {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  overflow-wrap:anywhere;
}
.score-label span:last-child {
  min-width:0;
}
.score-value {
  font-size:2rem;
  letter-spacing:-.04em;
  font-weight:750;
  margin:10px 0 8px;
}
.score-value small {
  font-size:.875rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
}
.score-track {
  height:7px;
  background:#e8eae6;
  border-radius:7px;
  overflow:hidden;
}
.score-fill {
  height:100%;
  background:var(--a);
  border-radius:7px;
}
.score-card:nth-child(2) .score-fill {
  background:var(--b);
}
.score-card p {
  margin:10px 0 0;
  font-size:.8125rem;
  color:var(--muted);
}
.result-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
}
.result h3 {
  font-size:1rem;
  margin:0 0 10px;
}
#reasons {
  padding-left:21px;
  margin:0;
  font-size:.9375rem;
}
#reasons li {
  margin:7px 0;
  overflow-wrap:anywhere;
}
.share-actions {
  display:flex;
  gap:9px;
  flex-shrink:0;
  flex-direction:column;
}
details {
  border-top:1px solid var(--line);
  padding-top:17px;
  font-size:.875rem;
}
summary {
  cursor:pointer;
  font-weight:650;
  min-height:30px;
}
details p {
  color:var(--muted);
  max-width:850px;
}
#share-status {
  font-size:.875rem;
  color:var(--b);
}
#share-status:empty {
  display:none;
}
textarea {
  resize:vertical;
}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid var(--line);
  margin-top:48px;
  padding:24px 0;
  color:var(--muted);
  font-size:.8125rem;
}
.footer-brand {
  font-weight:800;
  color:var(--ink);
  font-size:1rem;
}
footer p {
  margin:0;
}
.mobile-only {
  display:none;
}
@media(min-width:1100px) {
  .preferences {
    position:sticky;
    top:20px;
  }
}
@media(max-width:1050px) {
  .workspace {
    grid-template-columns:minmax(0,1fr) 320px;
    gap:20px;
  }
  .product-card {
    padding:12px 15px 22px;
  }
  main,.site-header {
    padding-left:24px;
    padding-right:24px;
  }
  .preferences {
    padding:20px;
  }
  .result-bottom {
    align-items:stretch;
    flex-direction:column;
  }
  .share-actions {
    flex-direction:row;
  }
  .share-actions .button {
    flex:1;
  }
}
@media(max-width:850px) {
  .workspace {
    grid-template-columns:1fr;
  }
  .preferences {
    margin-top:10px;
  }
  .segments span {
    min-height:44px;
  }
  .preferences>.primary {
    margin-top:6px;
  }
  .rating-heading span {
    display:inline;
    margin-left:5px;
  }
}
@media(max-width:540px) {
  main {
    padding:0 18px;
  }
  .site-header {
    padding:18px;
  }
  .header-note {
    font-size:.75rem;
  }
  .brand {
    font-size:1.125rem;
  }
  .intro {
    padding:28px 0;
    align-items:flex-start;
    flex-direction:column;
    gap:19px;
  }
  .intro p:last-child {
    font-size:.9375rem;
  }
  .intro .button {
    min-height:42px;
    padding:8px 13px;
    font-size:.875rem;
  }
  .eyebrow {
    font-size:.75rem;
    margin-bottom:10px;
  }
  h1 {
    font-size:1.9rem;
    max-width:350px;
  }
  .mobile-only {
    display:block;
  }
  .products {
    grid-template-columns:1fr;
    gap:24px;
  }
  .product-card {
    padding:12px 20px 24px;
  }
  .rating-heading span {
    display:inline;
  }
  .section-note {
    margin-bottom:20px;
  }
  .preferences {
    padding:21px 19px;
  }
  .segments label {
    font-size:.875rem;
  }
  .result {
    padding:25px 18px;
  }
  .score-cards {
    gap:10px;
  }
  .score-card {
    padding:13px;
  }
  .score-label {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .score-value {
    font-size:1.75rem;
  }
  .score-value small {
    font-size:.75rem;
    display:block;
  }
  .share-actions {
    flex-direction:column;
  }
  footer {
    flex-wrap:wrap;
    gap:6px;
  }
  footer p {
    order:3;
    width:100%;
    font-size:.75rem;
  }
  .button {
    min-height:48px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
:root .site-header {
  flex-wrap:wrap;
  gap:12px;
}
.brand {
  white-space:nowrap;
}
.brand-mark {
  width:2rem;
  height:2rem;
  flex:0 0 2rem;
}
.step {
  flex-shrink:0;
}
.score-cards {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
}