:root {
  --sea: #2F8FD8;
  --sea-deep: #1D5F96;
  --sea-light: #D9EEFB;
  --sand: #FFF4D6;
  --sand-deep: #F2D894;
  --gold: #F5B83D;
  --ink: #22313F;
  --ink-soft: #5B6B7A;
  --white: #FFFFFF;
  --bg: #F4FAFE;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink); line-height: 1.8;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}
a { color: var(--sea-deep); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 20px; color: var(--sea-deep); text-decoration: none; flex-shrink: 0; }
.header nav { display: flex; gap: 16px; font-size: 14px; }
h1 { font-size: 28px; line-height: 1.4; color: var(--sea-deep); margin: 8px 0 12px; text-wrap: balance; word-break: keep-all; }
h2 { font-size: 21px; line-height: 1.4; margin: 0; }
h3 { font-size: 16px; margin: 16px 0 8px; }
.lead { font-size: 17px; }
.meta { font-size: 13px; color: var(--ink-soft); }
.pr { display: inline-block; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; border-radius: 4px; padding: 0 6px; }
.pr-note { font-size: 13px; color: var(--ink-soft); background: var(--white); border-radius: 12px; padding: 12px 14px; }
.worry-nav { background: var(--white); border-radius: 16px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 16px 0; }
.worry-nav p { width: 100%; margin: 0; font-weight: 700; }
.top3, .worry, .faq, .safety, .box { background: var(--white); border-radius: 20px; padding: 18px; margin: 18px 0; }
.top3 { background: var(--sand); border: 3px solid var(--sand-deep); }
.worry summary { cursor: pointer; list-style: none; }
.worry summary::-webkit-details-marker { display: none; }
.worry summary h2::after { content: " ▼"; font-size: 12px; color: var(--ink-soft); }
.worry details[open] summary h2::after { content: " ▲"; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.card { position: relative; background: var(--bg); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.top3 .card { background: var(--white); }
.card h4 { margin: 0; font-size: 16px; line-height: 1.5; }
.card p { margin: 0; font-size: 14px; }
.card .emoji { font-size: 30px; line-height: 1; }
.badge { position: absolute; top: 10px; right: 10px; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 10px; }
.stores { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; }
.store { display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 8px 10px; color: var(--white); }
.store-amazonJp { background: #232F3E; }
.store-rakuten { background: #BF0000; }
.store-yahooShopping { background: #FF0033; }
.faq details { border-top: 1px solid var(--sea-light); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.safety ul { margin: 8px 0 0; padding-left: 20px; }
.footer { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; padding-top: 24px; padding-bottom: 40px; color: var(--ink-soft); }
.footer p { width: 100%; margin: 0; }
.hero { text-align: center; padding: 24px 0 8px; }
.hero h1 { font-size: 32px; }
.button { display: inline-block; background: var(--sea); color: var(--white); text-decoration: none; font-weight: 700; border-radius: 999px; padding: 12px 24px; }
.lang-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; font-size: 13px; padding-top: 10px; }
.lang-switch a[aria-current] { font-weight: 700; text-decoration: none; color: var(--ink); }
.brand img { display: block; height: 48px; width: auto; }
.hero-icon { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 8px 20px rgba(29, 95, 150, .2); }
.kw { font-size: 13px; color: var(--ink-soft); margin-top: auto !important; }
.box h2 { margin-bottom: 6px; }
.post .lead { font-size: 16px; }
.post .box ul { padding-left: 20px; }
.post h2 { margin-bottom: 8px; }