/* ==========================================================================
   お悩みから探す（solutions/index.html）
   - ヒーロー＋お悩みピッカー → 目次（PC：左に固定 / スマホ：上に固定）→ お悩み 01〜06 → CTA
   - 6つのお悩みは同じ「型」を使いながら、奇数・偶数で構図と面を変えて単調さを避ける
     奇数：見出し（左）＋工夫の縦リスト（右）／ 偶数：淡い面の上に、見出し2段＋工夫を3列
   ========================================================================== */

/* ---------- Hero ---------- */
.solutions-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-bottom: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
.solutions-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40px;
  right: max(-160px, -10vw);
  width: min(560px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--color-accent-soft), transparent 68%);
  opacity: 0.8;
  pointer-events: none;
}

/* ---------- Worry picker ----------
   カードを並べるのではなく、トップページの .worry-row と同じ「罫線で区切った行」。
   「自分のお悩みを見つけた」と感じられるよう、hover / focus で行全体が反応する */
.picker {
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  scroll-margin-top: var(--sp-5);
}
.picker__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.picker__label-note {
  font-family: var(--font-en);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text-tertiary);
}
.picker__list {
  display: grid;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 880px) {
  .picker__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
}
/* 3列はお悩みの見出しが1行に収まる幅になってから */
@media (min-width: 1280px) {
  .picker__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
}
.picker__list > li {
  display: flex;
  border-top: 1px solid var(--color-border);
}

.picker-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-4) var(--sp-1);
  color: var(--color-text);
  text-decoration: none;
}
.picker-card::before {
  /* hover / focus 時に、行の背景がふわっと付く（.worry-row と同じ反応） */
  content: "";
  position: absolute;
  inset: 4px calc(var(--sp-3) * -1);
  z-index: -1;
  border-radius: var(--r-md);
  background: var(--color-surface);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease);
}
.picker-card:hover {
  color: var(--color-text);
}
.picker-card:hover::before,
.picker-card:focus-visible::before {
  opacity: 1;
}
.picker-card:focus-visible {
  outline: none;
}
.picker-card:focus-visible::before {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
}
.picker-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  transition: background-color var(--dur-normal) var(--ease);
}
.picker-card__icon img {
  width: 32px;
  height: 32px;
}
.picker-card:hover .picker-card__icon,
.picker-card:focus-visible .picker-card__icon {
  background: var(--color-accent-muted);
}
.picker-card__body {
  display: grid;
  min-width: 0;
}
.picker-card__num {
  font-family: var(--font-en);
  font-size: var(--fs-overline);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: var(--color-link);
}
.picker-card__title,
.picker-card__text {
  word-break: auto-phrase;
}
.picker-card__title {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
}
.picker-card__text {
  margin-top: 0.125rem;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-secondary);
}
.picker-card__meta {
  font-size: var(--fs-overline);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}
.picker-card__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-primary);
  transition: background-color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease),
    color var(--dur-normal) var(--ease);
}
.picker-card__arrow .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-normal) var(--ease);
}
.picker-card:hover .picker-card__arrow,
.picker-card:focus-visible .picker-card__arrow {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.picker-card:hover .picker-card__arrow .icon {
  transform: translateY(2px);
}
@media (max-width: 719px) {
  .picker-card {
    gap: var(--sp-3) var(--sp-4);
    padding-block: var(--sp-3);
  }
  .picker-card__icon {
    width: 48px;
    height: 48px;
  }
  .picker-card__icon img {
    width: 28px;
    height: 28px;
  }
  .picker-card__num {
    line-height: 1.4;
  }
  .picker-card__title {
    font-size: var(--fs-body);
  }
  .picker-card__meta {
    display: none;
  }
  .picker-card__arrow {
    width: 32px;
    height: 32px;
  }
}

/* ---------- Layout：目次＋本文 ---------- */
.worry-flow {
  --worry-nav-h: 60px;
  border-top: 1px solid var(--color-border);
}
@media (min-width: 1100px) {
  .worry-flow__layout {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    column-gap: clamp(2.5rem, -1rem + 4.5vw, 5rem);
    align-items: start;
  }
}

/* ---------- Index（目次） ---------- */
.worry-nav__title,
.worry-nav__back {
  display: none;
}
.worry-nav__list > li {
  flex: none;
}
.worry-nav__link {
  text-decoration: none;
  white-space: nowrap;
}
.worry-nav__num {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* スマホ・タブレット：画面上部に固定する横並びの目次 */
@media (max-width: 1099px) {
  .worry-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: rgb(250 247 240 / 0.92);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--color-border);
  }
  .worry-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    height: var(--worry-nav-h);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* 端の数pxはフォーカス枠が切れないための余白 */
    margin-inline: -6px;
    padding-inline: 6px;
    /* 横スクロールできることを右端のフェードで示す */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .worry-nav__list.is-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .worry-nav__list::-webkit-scrollbar {
    display: none;
  }
  .worry-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 40px;
    padding: 0.35rem 0.9rem;
    border-radius: var(--r-pill);
    color: var(--color-text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .worry-nav__link:hover {
    background: var(--color-surface-subtle);
    color: var(--color-primary);
  }
  .worry-nav__num {
    font-size: var(--fs-overline);
    color: var(--color-text-tertiary);
  }
  .worry-nav__link[aria-current] {
    background: var(--color-primary);
    color: #fff;
  }
  .worry-nav__link[aria-current] .worry-nav__num {
    color: var(--color-accent-muted);
  }
}

/* PC：本文の左に固定する縦の目次（現在地を線と番号で示す） */
@media (min-width: 1100px) {
  .worry-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    /* 1つ目のお悩みの番号と高さをそろえる（固定中は余白にならないよう margin で） */
    margin-top: var(--sp-9);
  }
  .worry-nav__title {
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-en);
    font-size: var(--fs-overline);
    font-weight: 600;
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
  }
  .worry-nav__list {
    border-left: 1px solid var(--color-border);
  }
  .worry-nav__link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    min-height: 44px;
    padding: 0.6rem 0 0.6rem var(--sp-4);
    color: var(--color-text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    transition: color var(--dur-fast) var(--ease);
  }
  .worry-nav__link::before {
    /* 現在地のライン（左の罫線の上に重ねる） */
    content: "";
    position: absolute;
    left: -1px;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    transform: scaleY(0);
    transition: transform var(--dur-normal) var(--ease);
  }
  .worry-nav__link:hover {
    color: var(--color-primary);
  }
  .worry-nav__link:focus-visible {
    border-radius: var(--r-sm);
    outline-offset: 0;
  }
  .worry-nav__num {
    font-size: var(--fs-caption);
    color: var(--color-text-tertiary);
    transition: color var(--dur-fast) var(--ease);
  }
  .worry-nav__link[aria-current] {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
  }
  .worry-nav__link[aria-current]::before {
    transform: scaleY(1);
  }
  .worry-nav__link[aria-current] .worry-nav__num {
    color: var(--color-link);
  }
  .worry-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    margin-top: var(--sp-5);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
  }
  .worry-nav__back .icon {
    width: 14px;
    height: 14px;
    color: currentColor;
    transform: rotate(90deg);
  }
  .worry-nav__back:hover {
    color: var(--color-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .worry-nav__link::before {
    transition: none;
  }
}

/* ---------- Worry section ---------- */
.worry {
  padding-block: var(--section-y-sm);
  /* 固定ヘッダー（html の scroll-padding）に加えて、上の目次の高さぶん下げて表示 */
  scroll-margin-top: calc(var(--worry-nav-h) - 15px);
}
/* 偶数番目：淡いセージの面。スマホは画面の端まで、PCは角丸のパネル */
.worry--alt {
  --worry-pad-x: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--worry-pad-x);
  background: var(--color-surface-subtle);
}
@media (min-width: 1100px) {
  .worry {
    scroll-margin-top: var(--sp-5);
    padding-block: var(--sp-9);
  }
  .worry--alt {
    --worry-pad-x: clamp(2.5rem, 0.5rem + 3vw, 4rem);
    margin-inline: 0;
    padding-block: var(--sp-8);
    border-radius: var(--r-lg);
  }
}

.worry__intro {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 900px) {
  /* 奇数：見出し（左）＋工夫（右） */
  .worry:not(.worry--alt) .worry__intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 0.5rem + 4vw, 5rem);
  }
}

/* 見出し：大きな番号と罫線、アイコン */
.worry__head {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.worry__mark {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-1);
}
.worry__mark::after {
  /* 番号とアイコンのあいだの細い線 */
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  background: var(--color-border-strong);
}
.worry__num {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-en);
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.worry__total {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-tertiary);
}
.worry__icon {
  order: 2;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent-soft);
}
.worry--alt .worry__icon {
  background: var(--color-surface);
}
.worry__icon img {
  width: 36px;
  height: 36px;
}
.worry__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  letter-spacing: var(--ls-heading);
}
.worry__copy {
  display: grid;
  gap: var(--sp-5);
}
.worry__body {
  max-width: var(--measure);
  word-break: auto-phrase;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}
/* ひとことで：流し読みでも要点が分かる1行 */
.worry__point {
  display: grid;
  gap: var(--sp-1);
  max-width: var(--measure);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--color-accent);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
  word-break: auto-phrase;
}
.worry__point-label {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--color-link);
}
@media (min-width: 900px) {
  /* 偶数：番号の行の下に、見出し（左）と本文（右）を2段で */
  .worry--alt .worry__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 0.5rem + 3vw, 4rem);
    row-gap: var(--sp-5);
  }
  .worry--alt .worry__mark {
    grid-column: 1 / -1;
  }
}

/* ハッシュ（#closet など）で来たとき、アイコンをやさしく強調 */
.worry:target .worry__icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: worry-ping 1.6s var(--ease) 0.5s 2;
}
@keyframes worry-ping {
  0% {
    opacity: 0.9;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .worry:target .worry__icon::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Tips：カードにせず、静かな番号付きリスト ---------- */
.worry__sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}
.worry__sub .icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--color-link);
}
.worry__tips-lead {
  margin-top: var(--sp-1);
  word-break: auto-phrase;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-tertiary);
}
.tips {
  margin-top: var(--sp-4);
}
.tips__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--color-border);
}
.tips__item:last-child {
  border-bottom: 1px solid var(--color-border);
}
.tips__num {
  font-family: var(--font-en);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-link);
  font-variant-numeric: tabular-nums;
}
.tips__text {
  font-size: var(--fs-body);
  line-height: 1.85;
  word-break: auto-phrase;
}
@media (min-width: 900px) {
  .worry:not(.worry--alt) .worry__tips {
    padding-top: var(--sp-3);
  }
  /* 偶数：工夫を3列に並べ、上の罫線と番号でリズムを作る */
  .worry--alt .worry__tips-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-4);
  }
  .worry--alt .tips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
  .worry--alt .tips__item {
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--sp-2);
    padding-block: var(--sp-4) 0;
    border-top-color: var(--color-border-strong);
  }
  .worry--alt .tips__item:last-child {
    border-bottom: 0;
  }
}

/* ---------- Products：コンパクトな3点の列 ---------- */
.worry__products {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}
.worry__products > ul,
.worry__products > noscript {
  grid-column: 1 / -1;
}
.worry__all {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}
.worry__all-count {
  font-family: var(--font-en);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}
.worry__noscript {
  color: var(--color-text-secondary);
}
/* 淡い面の上では、商品画像の面を白にして同化させない */
.worry--alt .product-card__media[data-tone="sage"] {
  background: var(--color-surface);
}

/* 商品の並び：PCは3列、タブレット・スマホは横スクロール（次のカードを少し見せて、続きがあることを示す）
   （共通CSSの ul[class] のリセットより優先させるため ul を付ける） */
ul.worry__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(64%, 260px);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--worry-pad-x, var(--gutter));
  overscroll-behavior-x: contain;
  /* 画面の端まで使って横にスクロール（左右の余白ぶん外へ広げる） */
  margin-inline: calc(var(--worry-pad-x, var(--gutter)) * -1);
  padding: 4px var(--worry-pad-x, var(--gutter)) var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}
.worry__list > li {
  display: flex;
  scroll-snap-align: start;
}
.worry__list > li > .card {
  width: 100%;
}
/* このページでは「3点をさっと見比べる列」なので、画像を少し低めにしてコンパクトに */
.worry__list .product-card__media {
  aspect-ratio: 4 / 3;
}
@media (min-width: 640px) {
  ul.worry__list {
    grid-auto-columns: 40%;
  }
}
@media (min-width: 900px) {
  ul.worry__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.4rem + 1.2vw, 1.75rem);
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
}
@media (max-width: 899px) {
  /* スマホ：見出しの下に商品、その下に「すべて見る」 */
  .worry__all {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    margin-top: calc(var(--sp-2) * -1);
  }
}

/* ---------- CTA ---------- */
.solutions-cta {
  padding-top: var(--section-y-sm);
}

/* 背景のぼかし（光）は使わない（全ページで統一） */
.solutions-hero::before {
  display: none;
}