/* ==================================================
BASE / LAYOUT
================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #f4f4f4;
  color: #000;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

.page {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0;
}

a {
  color: inherit;
}

sup {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}

/* 上部の下向き矢印 */
.scroll-arrows {
  position: relative;
  height: 50px;
  margin: 1em 0;
}

.scroll-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: arrow-move 2s ease-in-out infinite;
}

.scroll-arrow:nth-child(2) {
  animation-delay: 1s;
}

.scroll-arrow::before,
.scroll-arrow::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 40px;
  height: 3px;
  content: "";
  background: #ffab1a;
}

.scroll-arrow::before {
  transform: rotate(30deg) translateX(-39%);
  transform-origin: top left;
}

.scroll-arrow::after {
  transform: rotate(-30deg) translateX(39%);
  transform-origin: top right;
}

@keyframes arrow-move {
  0% {
    top: 40%;
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}

.intro-box,
.follow-box {
  max-width: 600px;
  margin: 24px auto 18px;
  padding: 18px 16px;
  background: #fff8e8;
  border: 2px solid #ffb21a;
  border-radius: 12px;
  text-align: center;
}

.intro-box__title,
.follow-box__title {
  margin: 0 0 10px;
  color: #f08300;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
}

.intro-box__checks {
  display: inline-block;
  margin: 14px 0;
  color: #333;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
}

.intro-box__lead,
.follow-box__text {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}

.follow-box {
  margin: 22px auto;
  padding: 16px 14px;
  background: #fff8e5;
  border-radius: 10px;
}

.follow-box__title {
  font-size: 18px;
  line-height: 1.6;
}

/* アンケート */
.survey {
  background: #fff;
}

.question-block {
  scroll-margin-top: 10px;
}

.question-area {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.question-head {
  margin-bottom: 1rem;
}

.choices-box {
  position: relative;
  margin: 30px 1rem;
  color: #976802;
}

.selecter {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.choice-check {
  display: block;
  margin-bottom: 10px;
  padding: 10px 15px;
  border: 2px solid #976802;
  border-radius: 28px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.selecter:checked + .choice-check {
  color: #d18f00;
  background: #ffb108;
  border-color: #fff;
}

.selecter:focus-visible + .choice-check {
  outline: 3px solid rgba(255, 177, 8, 0.45);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .choice-check:hover {
    color: #d18f00;
    background: #ffb108;
    border-color: #fff;
  }

}

.note {
  margin: 4px 10px 0;
  color: #333;
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
}

/* 回答後の結果表示 */
.result-area {
  padding: 18px 12px 8px;
  text-align: center;
}

.result-area[hidden] {
  display: none;
}

.thanks {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.result-text {
  margin: 0;
  line-height: 1.5rem;
  text-align: center;
}

.result-text .big {
  color: red;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 3rem;
  background: linear-gradient(transparent 60%, #ffff00 0%);
}

.down-arrow {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 15px 0;
  animation: button-bounce 1.5s infinite ease;
}

.down-arrow span {
  width: 100px;
  height: 65px;
  padding: 0 10px;
}

.down-arrow span:not(:first-child) {
  display: none;
}

.down-arrow span::before {
  display: block;
  width: 50%;
  height: 40%;
  margin: 0 auto;
  content: "";
  background: #fe88b8;
}

.down-arrow span::after {
  display: block;
  width: 100%;
  height: 60%;
  content: "";
  background:
  linear-gradient(to top right, transparent 49%, #fe88b8 50%) top left / 50% 100% no-repeat,
  linear-gradient(to top left, transparent 49%, #fe88b8 50%) top right / 50% 100% no-repeat;
}

@keyframes button-bounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}

.spacer {
  height: 1.8rem;
}

.cta-note {
  margin: 4px 10px 0;
  color: #333;
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
}

footer {
  width: 100%;
  padding: 6px 10px 8px;
  color: #fff;
  background: #000;
  text-align: center;
}

.footer-links {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.footer-links a {
  color: #fff;
}

.copyright {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-arrow,
  .down-arrow {
    animation: none;
  }

}

.survey-complete-area {
  padding: 30px 18px 36px;
  background: #fff;
  text-align: center;
}

#survey-complete-button {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 18px 15px;
  border: 2px solid #b7b7b7;
  border-radius: 999px;
  background: #ddd;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  cursor: not-allowed;
  opacity: 0.7;
  transition:
  background 0.25s ease,
  transform 0.2s ease,
  box-shadow 0.25s ease,
  opacity 0.25s ease;
}

#survey-complete-button.is-active {
  border-color: #d18f00;
  background: linear-gradient(to bottom, #ffd55a 0%, #ffb108 55%, #f29b00 100%);
  box-shadow:
  0 5px 0 #c47f00,
  0 8px 15px rgba(209, 143, 0, 0.25);
  cursor: pointer;
  opacity: 1;
  animation: completeButtonPulse 1.6s ease-in-out infinite;
}

#survey-complete-button.is-active:hover {
  transform: translateY(-2px);
}

#survey-complete-button.is-active:active {
  transform: translateY(3px);
  box-shadow:
  0 2px 0 #c47f00,
  0 4px 8px rgba(209, 143, 0, 0.20);
}

@keyframes completeButtonPulse {
  0%,
  100% {
    box-shadow:
    0 5px 0 #c47f00,
    0 8px 15px rgba(209, 143, 0, 0.25);
  }

  50% {
    box-shadow:
    0 5px 0 #c47f00,
    0 8px 24px rgba(209, 143, 0, 0.45);
  }

}

#result-message-area[hidden] {
  display: none;
}

#survey-complete-button.is-completed {
  border-color: #d18f00;
  background: linear-gradient(to bottom, #ffd55a 0%, #f29b00 100%);
  color: #fff;
  box-shadow: 0 3px 0 #c47f00;
  cursor: default;
  opacity: 1;
  animation: none;
}

.cta-btn {
  animation: ctaFloat 2s ease-in-out infinite;
}

@keyframes ctaFloat {
  0%,100% {
    transform:translateY(0);
  }

  50% {
    transform:translateY(-6px);
  }

}

/* ==================================================
RENEWAL COMPONENTS
================================================== */
:root {
  --ink:#163c39;
  --teal:#115b57;
  --deep:#104b47;
  --mint:#e9f4f0;
  --accent:#d96344;
  --line:#ccded8;
  --muted:#61736f
}

body {
  background:#e9eeec;
  color:var(--ink);
  font-size:17px;
  line-height:1.9;
  font-feature-settings:"palt";
  letter-spacing:.025em
}

.page {
  box-shadow:0 0 70px #214a3a0d
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

p,h1,h2,h3,figure,blockquote {
  margin:0
}

button,input {
  font:inherit
}

em {
  font-style:normal;
  color:var(--teal)
}

.pr-label {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:34px;
  background:#fff;
  font-size:12px;
  color:#526b64;
  letter-spacing:.12em
}

.pr-label span {
  font:700 10px Arial,sans-serif;
  border:1px solid #bdcfc8;
  padding:0 4px;
  line-height:1.5
}

.hero img {
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover
}

.source-notes {
  font-size:12px;
  line-height:1.65;
  padding:12px 20px;
  background:#f7faf8;
  color:#5e6e67
}

.source-notes summary {
  cursor:pointer;
  text-align:center
}

.source-notes p {
  margin-top:8px
}

.eyebrow {
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.7;
  margin-bottom:13px;
  color:var(--teal)
}

.survey-intro {
  padding:44px 24px 32px;
  text-align:center;
  background:linear-gradient(180deg,#e9f4f0,#fff)
}

h2 {
  font-size:30px;
  line-height:1.65;
  letter-spacing:.025em;
  font-weight:800
}

.survey-intro h2 {
  font-size:29px
}

.survey-intro h2 em {
  font-size:1.15em;
  border-bottom:5px solid #bbdacf
}

.time-label {
  margin:20px auto 18px;
  display:table;
  padding:5px 18px;
  color:#fff;
  background:var(--teal);
  font-size:13px;
  font-weight:700;
  border-radius:2px
}

.intro-text {
  font-size:15px;
  color:#4d625b;
  line-height:1.85
}

.survey-steps {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:28px auto 0
}

.survey-steps span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #a9c9bd;
  border-radius:50%;
  font:700 13px Arial;
  color:#6c8b7f;
  transition:.2s
}

.survey-steps i {
  height:1px;
  width:45px;
  background:#c6dcd2
}

.survey-steps span.answered {
  background:var(--teal);
  border-color:var(--teal);
  color:#fff
}

.survey {
  padding:0 26px
}

.question-block {
  padding:26px 0 30px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:20px
}

.question-head {
  margin-bottom:0
}

.question-kicker {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:16px
}

.question-kicker>span {
  font:700 11px Arial;
  letter-spacing:.1em;
  color:var(--teal)
}

.question-kicker b {
  font-size:35px;
  font-weight:400;
  letter-spacing:-.06em;
  margin-left:3px
}

.question-kicker small {
  font-size:12px;
  color:#6b837a
}

.question-head h2 {
  font-size:25px;
  line-height:1.65
}

.choices-box {
  margin:22px 0 0;
  color:var(--ink)
}

.choice-check {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  padding:17px 16px;
  border:1px solid #b7cec4;
  border-radius:6px;
  background:#fff;
  font-size:16px;
  line-height:1.6;
  font-weight:600;
  min-height:65px
}

.choice-letter {
  font:500 14px Georgia,serif;
  color:#819e91
}

.choice-dot {
  margin-left:auto;
  flex:0 0 19px;
  width:19px;
  height:19px;
  border:1px solid #9ebaae;
  border-radius:50%
}

.selecter:checked+.choice-check {
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
  box-shadow:0 3px 10px #14594a18
}

.selecter:checked+.choice-check .choice-letter {
  color:#bddfd3
}

.selecter:checked+.choice-check .choice-dot {
  border:5px solid #d3eee2;
  background:var(--teal)
}

.selecter:focus-visible+.choice-check {
  outline:3px solid #dc795c;
  outline-offset:3px
}

@media(hover:hover) and (pointer:fine) {
  .choice-check:hover {
    color:var(--teal);
    background:#eff7f3;
    border-color:var(--teal)
  }

  .selecter:checked+.choice-check:hover {
    color:#fff;
    background:var(--teal)
  }

}

.nutrition-explainer {
  padding:28px 22px 22px;
  background:var(--mint);
  margin:14px 0 16px;
  text-align:center;
  border-radius:5px
}

.nutrition-explainer h3 {
  font-size:25px;
  line-height:1.65
}

.nutrition-explainer .eyebrow {
  font-size:12px;
  margin-bottom:6px
}

.nutrition-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:24px -5px 20px
}

.nutrition-grid>div {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid #b7d3c6
}

.nutrition-grid>div:last-child {
  border:0
}

.nutrition-grid strong {
  font-family:Arial,sans-serif;
  font-size:34px;
  color:var(--teal);
  line-height:1.2;
  letter-spacing:-.055em;
  white-space:nowrap
}

.nutrition-grid strong small {
  font-family:inherit;
  font-size:13px;
  letter-spacing:0
}

.nutrition-grid sup {
  font-size:9px;
  letter-spacing:0
}

.nutrition-grid span {
  font-size:12px;
  font-weight:700;
  margin-top:9px
}

.one-third {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:#fff;
  padding:18px 10px;
  border-radius:4px;
  margin-bottom:15px
}

.third-ring {
  border-radius:50%;
  width:77px;
  height:77px;
  flex-shrink:0;
  background:conic-gradient(var(--teal) 0deg 120deg,#e2ede7 120deg);
  display:grid;
  place-items:center
}

.third-ring b {
  display:grid;
  place-items:center;
  width:59px;
  height:59px;
  border-radius:50%;
  background:white;
  font:400 23px Georgia;
  color:var(--teal)
}

.one-third p {
  text-align:left;
  font-size:16px;
  font-weight:600;
  line-height:1.65
}

.one-third p>span {
  font-size:12px
}

.one-third strong {
  color:var(--teal)
}

.fineprint {
  font-size:12px;
  line-height:1.7;
  color:#65756e;
  font-weight:400;
  text-align:left;
  letter-spacing:0;
  margin-top:14px
}

.fineprint a {
  text-underline-offset:3px
}

.survey-status {
  margin:24px 0 0;
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:var(--muted)
}

.spacer {
  height:8px
}

.survey-complete-area {
  padding:16px 0 40px
}

#survey-complete-button {
  font-size:18px;
  padding:20px 10px;
  max-width:none;
  border-radius:5px;
  background:#e0e7e3;
  border:0;
  color:#7b8f83;
  opacity:1;
  box-shadow:none;
  animation:none
}

#survey-complete-button.is-active {
  background:var(--teal);
  border:0;
  color:#fff;
  box-shadow:0 4px 0 #073d36;
  animation:none
}

#survey-complete-button.is-completed {
  background:#dcece4;
  color:var(--teal);
  border:0;
  box-shadow:none;
  animation:none
}

#result-message-area {
  outline:none;
  scroll-margin-top:0
}

.section-pad {
  padding:46px 30px
}

.section-lead {
  font-size:15px;
  color:#5a7065;
  line-height:1.85;
  margin-top:18px
}

.offer-intro {
  background:#eaf3ee;
  text-align:center;
  border-top:5px solid var(--teal)
}

.product-set {
  margin:26px -10px 20px
}

.product-set img {
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:5px
}

figcaption {
  font-size:11px;
  line-height:1.6;
  color:#6e7b74;
  margin-top:9px;
  text-align:left
}

.price-panel {
  padding:20px;
  background:#fff;
  border-radius:6px
}

.price-tag {
  display:inline-block;
  background:var(--teal);
  padding:3px 13px;
  color:#fff;
  font-size:12px;
  font-weight:700
}

.price-context {
  margin:15px 0 4px;
  font-size:14px;
  font-weight:700
}

.price-context>span {
  display:block;
  font-size:12px;
  color:#6d7f75;
  text-decoration:line-through;
  font-weight:400
}

.price-main {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px
}

.price-main>p {
  display:flex;
  align-items:center;
  color:var(--accent);
  gap:5px
}

.price-main b {
  font:bold 68px Arial;
  letter-spacing:-.07em
}

.price-main p span {
  font-size:13px;
  line-height:1.6;
  font-weight:700;
  text-align:left
}

.discount {
  color:var(--accent);
  font:bold 29px Arial;
  line-height:1.2
}

.discount small {
  display:block;
  font-size:13px
}

.discount sup {
  font-size:9px
}

.shipping {
  font-size:11px;
  color:#697d6f;
  margin-top:10px;
  line-height:1.65
}

.editorial {
  background:#fff
}

.editorial h2 {
  margin-bottom:24px
}

.editorial>p:not(.eyebrow):not(.fineprint) {
  font-size:16px;
  margin-top:18px;
  color:#405f51
}

.editorial>p strong {
  color:var(--teal);
  background:linear-gradient(transparent 67%,#d9ebe2 0)
}

.lifestyle {
  margin:28px -30px 0
}

.lifestyle img {
  aspect-ratio:3/2;
  object-fit:cover
}

.lifestyle figcaption {
  padding:0 15px
}

.habit-lines {
  margin:25px 0
}

.habit-lines p {
  display:flex;
  align-items:center;
  gap:15px;
  border-bottom:1px solid #dce7e0;
  padding:13px 0;
  font-size:15px
}

.habit-lines b {
  font:italic 23px Georgia;
  color:var(--accent)
}

.flavour {
  background:#f0f6f2;
  padding-top:40px;
  text-align:center
}

.flavour>figure {
  margin:26px -10px 0
}

.flavour>figure img {
  aspect-ratio:1;
  object-fit:cover;
  border-radius:5px
}

.flavour-caption {
  text-align:left;
  border-left:3px solid var(--teal);
  padding-left:18px;
  margin-top:26px
}

.flavour-caption>span {
  font:11px Arial;
  letter-spacing:.18em;
  color:#7b8f7f
}

.flavour-caption h3 {
  font-size:26px;
  line-height:1.6;
  margin:8px 0 13px
}

.flavour-caption p {
  font-size:15px;
  color:#536e5d
}

.taste-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:25px 0 10px
}

.taste-list span {
  padding:4px 10px;
  border:1px solid #b9cfbf;
  font-size:12px;
  color:#53735f;
  background:#ffffff8c;
  border-radius:2px
}

.reviews h2 {
  margin-bottom:25px
}

.review-card {
  padding:24px 22px;
  border:1px solid #c7dbd0;
  border-left:4px solid var(--teal);
  border-radius:3px;
  margin-bottom:14px
}

.review-product {
  font-size:11px;
  color:#718577;
  letter-spacing:.04em
}

.review-card blockquote {
  margin:13px 0 18px;
  font-size:19px;
  font-weight:700;
  line-height:1.8;
  color:var(--teal)
}

.review-meta {
  font-size:11px;
  color:#849286
}

.final-offer {
  background:#e6f1eb;
  text-align:center
}

.unit-price {
  border-top:1px solid #c4d8cd;
  border-bottom:1px solid #c4d8cd;
  margin:27px 0;
  padding:20px 0
}

.unit-price>p:first-child {
  font-size:15px;
  font-weight:600
}

.unit-price>div {
  color:var(--accent);
  font-size:22px
}

.unit-price b {
  font:bold 82px Arial;
  letter-spacing:-.05em;
  padding:0 7px
}

.unit-price span {
  font-size:15px;
  font-weight:700
}

.benefits {
  background:#fff;
  border-radius:5px;
  padding:24px 22px;
  text-align:left
}

.benefits h3 {
  font-size:18px;
  text-align:center;
  margin-bottom:8px
}

.benefits>div {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid #e1eae4
}

.benefits>div>b {
  color:#78a28c;
  font:italic 29px Georgia
}

.benefits>div p {
  font-size:13px;
  line-height:1.7
}

.benefits strong {
  font-size:21px;
  color:var(--teal);
  line-height:1.9
}

.final-total {
  margin-top:30px
}

.final-total>span {
  font-size:14px;
  font-weight:600
}

.final-total p {
  font-size:21px;
  color:var(--accent);
  font-weight:700
}

.final-total b {
  font:bold 58px Arial;
  letter-spacing:-.055em
}

.final-total p small {
  font-size:13px
}

.final-total>small {
  display:block;
  font-size:11px;
  color:#6c7f6e;
  line-height:1.6
}

.purchase-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-decoration:none;
  background:var(--teal);
  color:#fff;
  border-radius:5px;
  padding:17px 10px;
  margin-top:24px;
  font-size:20px;
  font-weight:800;
  line-height:1.55;
  box-shadow:0 5px 0 #073d36;
  animation:none
}

.purchase-cta small {
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  margin-bottom:3px
}

.purchase-cta>b {
  font-size:29px;
  font-weight:400
}

.purchase-cta:hover {
  background:#0e6d60
}

.purchase-cta:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}

.purchase-conditions {
  text-align:left;
  font-size:12px;
  line-height:1.8;
  color:#5c7463;
  margin-top:25px
}

.purchase-conditions p+p {
  margin-top:7px
}

footer {
  background:#194c42;
  padding:24px 15px 20px
}

footer .footer-links {
  font-size:11px;
  line-height:2.1;
  font-weight:400
}

footer .copyright {
  font-size:10px;
  color:#bdd4c9;
  line-height:1.7
}

@media(max-width:440px) {
  body {
    font-size:16px
  }

  .section-pad {
    padding:36px 22px
  }

  h2 {
    font-size:26px
  }

  .survey-intro {
    padding:34px 20px 25px
  }

  .survey-intro h2 {
    font-size:26px
  }

  .survey {
    padding:0 22px
  }

  .question-head h2 {
    font-size:22px
  }

  .question-kicker small {
    font-size:11px
  }

  .choice-check {
    font-size:14px;
    padding:15px 12px;
    gap:10px
  }

  .nutrition-explainer {
    padding:24px 13px 20px
  }

  .nutrition-grid strong {
    font-size:30px
  }

  .nutrition-grid strong small {
    font-size:11px
  }

  .nutrition-grid span {
    font-size:11px
  }

  .one-third {
    gap:12px
  }

  .one-third p {
    font-size:14px
  }

  .source-notes {
    padding:10px 16px
  }

  .price-panel {
    padding:18px 12px
  }

  .price-main b {
    font-size:62px
  }

  .price-main {
    gap:13px
  }

  .discount {
    font-size:24px
  }

  .lifestyle {
    margin-left:-22px;
    margin-right:-22px
  }

  .flavour-caption h3 {
    font-size:24px
  }

  .unit-price b {
    font-size:73px
  }

  .unit-price span {
    font-size:13px
  }

  .purchase-cta {
    font-size:17px;
    gap:10px
  }

  .benefits {
    padding:20px 16px
  }

  .benefits strong {
    font-size:19px
  }

}

@media(max-width:360px) {
  h2 {
    font-size:24px
  }

  .question-head h2 {
    font-size:20px
  }

  .question-kicker {
    align-items:flex-end
  }

  .question-kicker small {
    font-size:10px
  }

  .survey {
    padding:0 16px
  }

  .choice-check {
    font-size:13px
  }

  .nutrition-grid strong {
    font-size:27px
  }

  .price-main b {
    font-size:53px
  }

  .discount {
    font-size:22px
  }

  .unit-price b {
    font-size:63px
  }

  .purchase-cta {
    font-size:15px
  }

  .review-card blockquote {
    font-size:17px
  }

}

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

}

.assortment-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:25px 0 5px;
  text-align:center
}

.pack-card {
  background:#fff;
  border:1px solid #d1e0d8;
  border-radius:4px;
  padding:10px 6px 8px;
  overflow:hidden
}

.pack-window {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:120/115;
  overflow:hidden
}

.pack-window img {
  position:absolute;
  width:625%;
  max-width:none;
  height:auto;
  margin:0
}

.pack-card>p {
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  margin-top:9px
}

.pack-card small {
  display:block;
  font-size:10px;
  font-weight:400;
  color:#6d8374
}

.assortment-caption {
  grid-column:span 2;
  align-self:center;
  text-align:left;
  padding:10px 12px
}

.assortment-caption span {
  font-size:12px;
  color:#6e8976
}

.assortment-caption strong {
  display:block;
  font-size:20px;
  line-height:1.6;
  color:var(--teal);
  margin-top:7px
}

@media(max-width:360px) {
  .pack-card>p {
    font-size:10px
  }

  .assortment-caption strong {
    font-size:17px
  }

  .assortment-grid {
    gap:7px
  }

}

/* ==================================================
BASE YELLOW THEME
================================================== */
/* buzzcosme.jp/base/ の黄色系配色に寄せたテーマ上書き */
:root {
  --base-yellow:#ffb108;
  --base-yellow-strong:#ffab1a;
  --base-orange:#f08300;
  --base-brown:#976802;
  --base-cream:#fff8e8;
  --base-cream-2:#fff3cf;
  --base-line:#ffb21a;
  --base-dark:#5f4700;
}

body {
  background:#f4f4f4;
  color:#333;
}

.page {
  background:#fff;
}

/* PR・導入 */
.pr-label span,
.eyebrow,
.question-kicker span,
.flavour-caption span,
.price-tag {
  color:var(--base-orange);
}

.survey-intro,
.offer-intro,
.flavour,
.final-offer {
  background:var(--base-cream);
}

.editorial,
.reviews {
  background:#fff;
}

.survey-intro h2,
.section-pad h2,
.question-head h2,
.nutrition-explainer h3,
.flavour-caption h3,
.benefits h3 {
  color:var(--base-brown);
}

.survey-intro h2 em,
.section-pad h2 em,
.flavour-caption h3 em {
  color:var(--base-orange);
}

.time-label {
  background:var(--base-yellow);
  color:#5a3c00;
  border-color:var(--base-yellow-strong);
}

/* アンケート */
.question-block,
.question-area {
  background:#fff;
}

.question-kicker small {
  color:#9a7a38;
}

.choices-box {
  color:var(--base-brown);
}

.choice-check {
  border-color:var(--base-brown);
  color:#4a3a14;
  background:#fff;
}

.choice-check:hover {
  background:#fff4cf;
  border-color:var(--base-yellow-strong);
  color:var(--base-brown);
}

.selecter:checked + .choice-check {
  background:var(--base-yellow);
  border-color:var(--base-yellow);
  color:#5b3d00;
}

.choice-letter,
.choice-dot {
  border-color:var(--base-yellow-strong);
  color:var(--base-orange);
}

.selecter:checked + .choice-check .choice-letter {
  background:#fff;
  color:var(--base-orange);
}

.survey-steps span {
  border-color:var(--base-yellow-strong);
  color:var(--base-brown);
}

.survey-steps span.current,
.survey-steps span.answered {
  background:var(--base-yellow);
  border-color:var(--base-yellow);
  color:#5b3d00;
}

.survey-steps i {
  background:#e9c96e;
}

/* 栄養ブロック */
.nutrition-explainer {
  background:var(--base-cream);
  border-color:var(--base-line);
}

.nutrition-grid > div {
  background:#fff;
  border-color:#f4d37c;
}

.nutrition-grid strong,
.one-third strong,
.third-ring b {
  color:var(--base-orange);
}

.third-ring {
  border-color:var(--base-yellow-strong);
  background:#fff;
}

/* 商品・価格 */
.product-set,
.price-panel,
.unit-price,
.benefits,
.purchase-conditions,
.review-card {
  border-color:#efc45f;
}

.price-panel {
  background:#fffdf6;
}

.price-main,
.unit-price div,
.final-total p {
  color:var(--base-orange);
}

.discount {
  background:var(--base-yellow);
  color:#5b3d00;
}

.benefits b {
  background:var(--base-yellow);
  color:#5b3d00;
}

.final-total {
  background:#fff0b8;
  border-color:var(--base-yellow-strong);
  color:#5b3d00;
}

/* 読み物・味 */
.habit-lines b {
  color:var(--base-orange);
}

.taste-list span {
  background:#fff4cf;
  border-color:#edc45f;
  color:var(--base-brown);
}

.flavour-caption {
  border-left-color:var(--base-yellow-strong);
}

/* 口コミ */
.review-product,
.review-meta {
  color:var(--base-brown);
}

.review-card {
  background:#fffdf6;
}

/* CTA */
#survey-complete-button.is-active,
#survey-complete-button.is-completed,
.purchase-cta {
  border-color:#d18f00;
  background:linear-gradient(to bottom,#ffd55a 0%,#ffb108 55%,#f29b00 100%);
  color:#4d3200;
  box-shadow:0 5px 0 #c47f00,0 8px 15px rgba(209,143,0,.28);
}

.purchase-cta b {
  color:#4d3200;
}

.purchase-cta:hover {
  filter:brightness(1.03);
}

/* 注釈 */
.source-notes {
  background:#fffaf0;
  border-color:#efcf82;
}

.source-notes summary {
  color:var(--base-brown);
}

/* 細い区切りや強調線 */
.section-pad::before,
.question-head::after {
  background:var(--base-yellow);
}

/* confettiも黄色系に統一 */

/* ==================================================
YELLOW THEME FINAL ADJUSTMENTS
================================================== */
/* 緑・青緑を完全撤去したBASE黄色テーマ最終上書き */
:root {
  --ink:#4a3200;
  --teal:#ffb108;
  --deep:#d18f00;
  --mint:#fff8e8;
  --accent:#f08300;
  --line:#efcf82;
  --muted:#7a6740;
}

body {
  background:#f4f4f4;
  color:#4a3200;
}

.page {
  background:#fff;
  box-shadow:0 0 70px rgba(151,104,2,.08);
}

.pr-label {
  background:#fff;
  color:#7a6740;
}

.pr-label span {
  border-color:#efcf82;
}

.source-notes {
  background:#fffaf0;
  color:#6f5b34;
  border-color:#efcf82;
}

.survey-intro {
  background:linear-gradient(180deg,#fff8e8,#fff);
}

.survey-intro h2 em {
  border-bottom-color:#ffd55a;
}

.intro-text {
  color:#6a5730;
}

.survey-steps span {
  border-color:#e7bd52;
  color:#9a6c00;
}

.survey-steps i {
  background:#efd892;
}

.survey-steps span.answered,.survey-steps span.current {
  background:#ffb108;
  border-color:#ffb108;
  color:#5b3d00;
}

.question-kicker small {
  color:#9a7a38;
}

.choice-check {
  border-color:#e3c66f;
  color:#4a3a14;
  background:#fff;
}

.choice-letter {
  color:#b07b00;
}

.choice-dot {
  border-color:#d6ab3a;
}

.selecter:checked+.choice-check {
  background:#ffb108;
  color:#5b3d00;
  border-color:#ffb108;
  box-shadow:0 3px 10px rgba(209,143,0,.18);
}

.selecter:checked+.choice-check .choice-letter {
  color:#f08300;
}

.selecter:checked+.choice-check .choice-dot {
  border-color:#fff4cf;
  background:#ffb108;
}

.selecter:focus-visible+.choice-check {
  outline-color:#f08300;
}

@media(hover:hover) and (pointer:fine) {
  .choice-check:hover {
    color:#5b3d00;
    background:#fff4cf;
    border-color:#ffb108;
  }

  .selecter:checked+.choice-check:hover {
    color:#5b3d00;
    background:#ffb108;
  }

}

.nutrition-grid>div {
  border-right-color:#efd892;
}

.one-third {
  background:#fff;
}

.third-ring {
  background:conic-gradient(#ffb108 0deg 120deg,#fff0b8 120deg);
}

.third-ring b {
  color:#f08300;
}

.fineprint {
  color:#75613a;
}

#survey-complete-button {
  background:#eee8d8;
  color:#9b885d;
}

#survey-complete-button.is-active {
  background:linear-gradient(to bottom,#ffd55a 0%,#ffb108 55%,#f29b00 100%);
  color:#4d3200;
  box-shadow:0 4px 0 #c47f00;
}

#survey-complete-button.is-completed {
  background:#fff0b8;
  color:#976802;
  box-shadow:none;
}

.section-lead {
  color:#6a5730;
}

.offer-intro {
  background:#fff8e8;
  border-top-color:#ffb108;
}

figcaption {
  color:#75613a;
}

.price-tag {
  background:#ffb108;
  color:#5b3d00;
}

.price-context>span {
  color:#806d45;
}

.shipping {
  color:#75613a;
}

.editorial>p:not(.eyebrow):not(.fineprint) {
  color:#5a4824;
}

.editorial>p strong {
  color:#f08300;
  background:linear-gradient(transparent 67%,#fff0b8 0);
}

.habit-lines p {
  border-bottom-color:#f0dfaa;
}

.flavour {
  background:#fff8e8;
}

.flavour-caption {
  border-left-color:#ffb108;
}

.flavour-caption>span {
  color:#9a7a38;
}

.flavour-caption p {
  color:#6a5730;
}

.taste-list span {
  border-color:#e4c86f;
  color:#7a5700;
  background:#fffdf6;
}

.review-card {
  border-color:#efd892;
  border-left-color:#ffb108;
  background:#fffdf6;
}

.review-product {
  color:#8a6c2f;
}

.review-card blockquote {
  color:#976802;
}

.review-meta {
  color:#8e805f;
}

.final-offer {
  background:#fff3cf;
}

.unit-price {
  border-top-color:#e7c96f;
  border-bottom-color:#e7c96f;
}

.benefits>div {
  border-bottom-color:#f0dfaa;
}

.benefits>div>b {
  color:#f08300;
}

.benefits strong {
  color:#976802;
}

.final-total>small {
  color:#75613a;
}

.purchase-cta {
  background:linear-gradient(to bottom,#ffd55a 0%,#ffb108 55%,#f29b00 100%);
  color:#4d3200;
  box-shadow:0 5px 0 #c47f00;
}

.purchase-cta:hover {
  background:linear-gradient(to bottom,#ffe079 0%,#ffbd2d 55%,#f5a313 100%);
}

.purchase-conditions {
  color:#6a5730;
}

footer {
  background:#5f4700;
}

footer .copyright {
  color:#f4df9d;
}

.pack-card {
  border-color:#ead18c;
}

.pack-card small {
  color:#806d45;
}

.assortment-caption span {
  color:#8a6c2f;
}

.assortment-caption strong {
  color:#976802;
}