/* ==========================================================================
   プレミアムケアダウン LP — 高級感デザイン（ネイビー × ゴールド）
   MV画像の色味をベースに全セクションを統一
   ========================================================================== */

:root {
  /* Midnight navy — 深みのあるミッドナイトブルー系 */
  --pc-navy-900: #0f172a;
  --pc-navy-800: #151d32;
  --pc-navy-700: #1a2744;
  --pc-navy-600: #1f3558;
  --pc-navy-500: #254a6e;
  --pc-navy-400: #2f5c8a;
  --pc-navy-300: #4a73a3;
  --pc-navy-200: #6b8fbc;
  --pc-navy-100: #9bb5d9;

  /* Champagne gold — シャンパンゴールド */
  --pc-gold-900: #5c4a1a;
  --pc-gold-800: #7a6524;
  --pc-gold-700: #927e2e;
  --pc-gold-600: #a89136;
  --pc-gold-500: #c5b358;
  --pc-gold-400: #d4af37;
  --pc-gold-300: #dfc96a;
  --pc-gold-200: #ead99a;
  --pc-gold-100: #f5ecc8;

  /* オフホワイト（背景ハイライト・質感用） */
  --pc-cream: #faf9f6;
  --pc-cream-soft: #fdfcfb;

  /* Utility */
  --pc-white: #ffffff;
  --pc-white-08: rgba(255, 255, 255, 0.08);
  --pc-white-05: rgba(255, 255, 255, 0.05);
  --pc-white-60: rgba(255, 255, 255, 0.6);
  --pc-white-80: rgba(255, 255, 255, 0.8);
  --pc-text: #e8edf5;
  --pc-text-muted: #9babc4;
  --pc-border: rgba(255, 255, 255, 0.1);
  --pc-border-gold: rgba(212, 175, 55, 0.35);
  --pc-border-gold-hairline: rgba(197, 179, 88, 0.45);
  --pc-shadow: rgba(0, 0, 0, 0.4);
  --pc-max: 72rem;

  /* Typography */
  --pc-font-heading: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --pc-font-accent-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --pc-font-accent-num: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Gradient */
  --pc-grad-gold: linear-gradient(135deg, #c5b358, #e8d488, #d4af37);
  --pc-grad-navy: linear-gradient(180deg, #0f172a 0%, #1f3558 100%);
  --pc-grad-dark: linear-gradient(180deg, #0a0f1a 0%, #151d32 100%);
}

/* 文字サイズ: 基本16px（1rem）、本文の最小16px / スマホは最小14px */
/* 固定ヘッダー分のアンカーずらし（PC:152px / SP:53px） */
html:has(body.page-premium-care) {
  --pc-header-offset: 152px;
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--pc-header-offset);
}

@media (max-width: 767px) {
  html:has(body.page-premium-care) {
    --pc-header-offset: 53px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.page-premium-care) {
    scroll-behavior: auto;
  }
}

body.page-premium-care {
  --pc-fs-base: 16px;
  --pc-fs-min: 16px;
}

@media (max-width: 767px) {
  body.page-premium-care {
    --pc-fs-min: 14px;
  }
}

/* ---------- Reset site defaults inside LP ---------- */

body.page-premium-care #contents {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.page-premium-care #contents #main {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* font-size / line-height は inherit にしない（詳細度が高く各見出しの指定を潰すため） */
body.page-premium-care #contents #main .pc-root h1,
body.page-premium-care #contents #main .pc-root h2,
body.page-premium-care #contents #main .pc-root h3 {
  font-family: var(--pc-font-heading);
  font-weight: 600;
  background: transparent;
  padding: 0;
  margin: 0;
  clear: none;
  overflow: visible;
}

body.page-premium-care #contents #main .pc-root h2::before,
body.page-premium-care #contents #main .pc-root h2:before,
body.page-premium-care #contents #main .pc-root h3::before,
body.page-premium-care #contents #main .pc-root h3:before {
  content: none !important;
  display: none !important;
}

body.page-premium-care #contents #main .pc-root h1.pc-page-title {
  margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
  body.page-premium-care #contents #main .pc-root h1.pc-page-title {
    margin-bottom: 1.5rem;
  }
}

body.page-premium-care #contents #main #path {
  margin: 0 auto;
  max-width: var(--pc-max);
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  border: none;
  color: var(--pc-text-muted);
}

body.page-premium-care #contents #main #path a {
  color: var(--pc-gold-400);
  text-decoration: none;
  transition: color 0.3s ease;
}

body.page-premium-care #contents #main #path a:hover {
  color: var(--pc-gold-300);
}

/* common/css/pc.css の #contents #main p { margin: 0 0 30px; } をこのLPでは打ち消す */
body.page-premium-care #contents #main .pc-root p {
  margin: 0;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

/* ---------- Root ---------- */

.pc-root {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: var(--pc-fs-base);
  color: var(--pc-text);
  background-color: var(--pc-navy-900);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -30%, rgba(253, 252, 251, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 20%, rgba(212, 175, 55, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(250, 249, 246, 0.04) 0%, transparent 45%),
    linear-gradient(180deg, var(--pc-navy-900) 0%, #0c1222 50%, var(--pc-navy-900) 100%);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* スクロール／ロード時のフェードイン（JS 有効時のみ。無効時は常に表示） */
html.pc-js .pc-reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 1s ease-out,
    transform 1s ease-out;
  will-change: opacity, transform;
}

html.pc-js .pc-reveal.pc-reveal--visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.pc-js .pc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.pc-container {
  max-width: var(--pc-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}

.pc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Heading block — 共通見出しデザインシステム
   英語キッカー + 日本語見出し + ゴールドオーナメント
   ========================================================================== */

.pc-heading-block {
  text-align: center;
  margin-bottom: 5.5rem;
  position: relative;
}

.pc-heading-en {
  display: block;
  font-family: var(--pc-font-accent-en);
  font-size: max(var(--pc-fs-min), 0.8rem);
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--pc-gold-400);
  -webkit-text-fill-color: var(--pc-gold-400);
  background: none;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .pc-heading-en {
    font-size: max(var(--pc-fs-min), 0.9rem);
    letter-spacing: 0.42em;
  }
}

.pc-heading-block h1,
.pc-heading-block h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pc-white);
  line-height: 1.45;
  letter-spacing: 0.06em;
  margin: 0;
}

@media (min-width: 768px) {
  .pc-heading-block h1,
  .pc-heading-block h2 {
    font-size: 2rem;
  }
}

@media (min-width: 1024px) {
  .pc-heading-block h1,
  .pc-heading-block h2 {
    font-size: 2.25rem;
  }
}

/* h2 内は common/css/pc.css の「h2 span { display:block }」の影響を受けないよう em で強調（span は使わない） */
body.page-premium-care #contents #main .pc-root h2 em.pc-h-accent {
  font-style: normal;
  font-weight: inherit;
  display: inline;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.pc-heading-block h2 em.pc-h-accent {
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pc-heading-ornament {
  display: block;
  margin: 1rem auto 0;
  width: 4rem;
  height: 2px;
  position: relative;
  background: transparent;
}

.pc-heading-ornament::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--pc-gold-500), transparent);
}

.pc-heading-ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--pc-gold-400);
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (min-width: 768px) {
  .pc-heading-ornament {
    width: 5rem;
    margin-top: 1.25rem;
  }
}

body.page-premium-care #contents #main .pc-root .pc-heading-sub {
  color: var(--pc-text-muted);
  font-size: max(var(--pc-fs-min), 0.95rem);
  margin-top: 1rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.pc-heading-icon {
  display: block;
  font-size: 2.5rem;
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

/* Hero h1 variant */
.pc-heading-hero {
  margin-bottom: 1.5rem;
}

.pc-heading-hero .pc-heading-en {
  font-size: 1rem;
  letter-spacing: 0.35em;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .pc-heading-hero .pc-heading-en {
    font-size: 1.15rem;
    letter-spacing: 0.4em;
  }
}

.pc-heading-hero h1 {
  font-size: 1.75rem;
}

@media (min-width: 768px) {
  .pc-heading-hero h1 {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .pc-heading-hero h1 {
    font-size: 2.5rem;
  }
}

.pc-heading-hero .pc-heading-ornament {
  width: 5rem;
}

@media (min-width: 768px) {
  .pc-heading-hero .pc-heading-ornament {
    width: 6rem;
  }
}

/* Compact variant (Storage section) */
.pc-heading-compact {
  margin-bottom: 2rem;
}

.pc-heading-compact .pc-heading-en {
  font-size: max(var(--pc-fs-min), 0.75rem);
}

/* ---------- Page title（見出しサイズは .pc-heading-block / .pc-heading-hero に任せる） ---------- */

.pc-page-title {
  margin: 0;
}

@media (min-width: 768px) {
  .pc-br-sp-only {
    display: none;
  }
}

/* ---------- Main visual ---------- */

.pc-mv {
  background: var(--pc-navy-900);
}

.pc-mv picture,
.pc-mv img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Section: Brands
   ========================================================================== */

.pc-section-brands {
  padding: 6.5rem 0 5.5rem;
  background:
    radial-gradient(ellipse 100% 55% at 50% 0%, rgba(253, 252, 251, 0.045) 0%, transparent 52%),
    var(--pc-navy-800);
  border-bottom: 1px solid var(--pc-border-gold-hairline);
  position: relative;
  overflow: hidden;
}

.pc-section-brands::before {
  content: "";
  position: absolute;
  top: -6rem;
  right: -6rem;
  width: 20rem;
  height: 20rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .pc-section-brands {
    padding: 7.5rem 0 6.5rem;
  }
}

.pc-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  color: var(--pc-gold-300);
  border: 1px solid var(--pc-border-gold);
  padding: 0.4rem 1.25rem;
  border-radius: 9999px;
  font-size: max(var(--pc-fs-min), 0.875rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.pc-brands-lead {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 4.5rem;
}

@media (min-width: 768px) {
  .pc-brands-lead {
    margin-bottom: 5.25rem;
  }
}

body.page-premium-care #contents #main .pc-root .pc-brands-lead p {
  font-size: 1.05rem;
  color: var(--pc-white-80);
  line-height: 1.9;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  body.page-premium-care #contents #main .pc-root .pc-brands-lead p {
    font-size: 1.15rem;
  }
}

.pc-brands-lead .pc-br-md-hide {
  display: none;
}

@media (min-width: 768px) {
  .pc-brands-lead .pc-br-md-hide {
    display: inline;
  }
}

/* CTA buttons */

.pc-cta-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .pc-cta-row {
    flex-direction: row;
    align-items: center;
  }
}

.pc-btn-primary {
  display: inline-block;
  text-align: center;
  background: var(--pc-grad-gold);
  color: var(--pc-navy-900);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  text-decoration: none;
  letter-spacing: 0.05em;
  box-shadow:
    0 4px 20px rgba(212, 175, 55, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease,
    background-color 0.35s ease;
  border: none;
  cursor: pointer;
}

.pc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 32px rgba(212, 175, 55, 0.42),
    0 2px 8px rgba(0, 0, 0, 0.35);
  filter: brightness(1.08);
}

.pc-btn-secondary {
  display: inline-block;
  text-align: center;
  background: transparent;
  color: var(--pc-gold-400);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--pc-border-gold);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.pc-btn-secondary:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--pc-gold-400);
  color: var(--pc-gold-300);
  box-shadow: 0 4px 24px rgba(212, 175, 55, 0.12);
}

/* Brand frame / slider */

.pc-brand-frame {
  max-width: 62rem;
  margin: 0 auto;
  text-align: center;
}

body.page-premium-care #contents #main .pc-root .pc-brands-label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--pc-gold-200);
  font-family: var(--pc-font-heading);
  font-size: clamp(1rem, 0.45vw + 0.95rem, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.4;
  margin-bottom: 0.65rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

body.page-premium-care #contents #main .pc-root .pc-brands-label::before,
body.page-premium-care #contents #main .pc-root .pc-brands-label::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-gold-500));
}

body.page-premium-care #contents #main .pc-root .pc-brands-label::after {
  background: linear-gradient(90deg, var(--pc-gold-500), transparent);
}

body.page-premium-care #contents #main .pc-root .pc-brands-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.25rem, 3.3vw + 2.1rem, 5rem);
  font-weight: 500;
  color: var(--pc-gold-100);
  line-height: 1;
  letter-spacing: 0.08em;
  margin: 0 0 1.25rem;
  padding: 0;
  background: linear-gradient(180deg, #f8efcf 0%, #e6d395 42%, #c5b358 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.25);
}

.pc-brands-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 212, 136, 0.72), transparent);
  margin-bottom: 1.85rem;
}

.pc-brands-carousel {
  overflow: hidden;
}

.pc-brands-track {
  display: flex;
  width: 100%;
  transition: transform 0.6s ease;
}

.pc-brands-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.pc-brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pc-brand-list li {
  height: 7.25rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  box-sizing: border-box;
}

.pc-brand-list img {
  max-width: 88%;
  max-height: 74%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.pc-brands-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.7rem;
}

.pc-brands-dot {
  width: 3rem;
  height: 0.48rem;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pc-brands-dot.is-active {
  background: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
  .pc-brands-carousel {
    overflow: visible;
  }

  .pc-brands-track {
    display: block;
    transform: none !important;
  }

  .pc-brands-slide + .pc-brands-slide {
    margin-top: 0.25rem;
  }

  .pc-brands-dots {
    display: none;
  }

  .pc-brand-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pc-brand-list li {
    height: 5rem;
  }

  body.page-premium-care #contents #main .pc-root .pc-brands-label {
    font-size: 1.15rem;
  }
}

@media (max-width: 767px) {
  body.page-premium-care #contents #main .pc-root .pc-brands-label {
    gap: 0.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.45rem;
  }

  body.page-premium-care #contents #main .pc-root .pc-brands-label::before,
  body.page-premium-care #contents #main .pc-root .pc-brands-label::after {
    width: 1.2rem;
  }

  body.page-premium-care #contents #main .pc-root .pc-brands-title {
    font-size: clamp(3.5rem, 10vw, 4.8rem);
    margin-bottom: 1.35rem;
  }

  .pc-brand-list li {
    height: 7rem;
  }
}

/* ==========================================================================
   Section: Pain
   ========================================================================== */

.pc-section-pain {
  padding: 8rem 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(253, 252, 251, 0.03) 0%, transparent 50%),
    var(--pc-navy-900);
  position: relative;
}

.pc-section-pain::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-border-gold), transparent);
}

/* 見出し本文を折り返さず横一列（狭い画面は文字サイズで調整） */
.pc-heading-block.pc-heading-inline-text h2 {
  white-space: nowrap;
  font-size: clamp(var(--pc-fs-min), 3.6vw + 0.4rem, 2.25rem);
}

/* Single-line heading variant */
.pc-heading-single {
  margin-bottom: 3rem;
}

.pc-heading-single h2 {
  display: inline-block;
  position: relative;
  padding-bottom: 1rem;
}

.pc-heading-single h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pc-gold-500), transparent);
}

.pc-grid-3 {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .pc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pc-pain-card {
  background: linear-gradient(145deg, var(--pc-navy-700), var(--pc-navy-800));
  padding: 2.5rem 2rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--pc-border-gold-hairline);
  text-align: center;
  position: relative;
  margin-top: 1.5rem;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.pc-pain-card:hover {
  transform: translateY(-4px);
  border-color: var(--pc-border-gold);
}

.pc-pain-icon {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--pc-gold-500), var(--pc-gold-300));
  color: var(--pc-navy-900);
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--pc-navy-900);
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

body.page-premium-care #contents #main .pc-root .pc-pain-card p {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--pc-white-80);
  white-space: pre-line;
  line-height: 1.9;
  letter-spacing: 0.05em;
  font-size: max(var(--pc-fs-min), 0.95rem);
}

.pc-pain-footer {
  margin-top: 3rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  color: var(--pc-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.5;
}

.pc-pain-footer-prefix,
.pc-pain-footer-suffix {
  display: block;
}

.pc-pain-footer .pc-highlight {
  display: block;
  width: 100%;
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.35rem;
  margin: 0;
  padding: 0 0.25rem;
  box-sizing: border-box;
}

/* 「プレミアムケアダウン」を1単位に（ダウ+ン の不自然な改行を防ぐ） */
.pc-pain-footer .pc-highlight-phrase {
  white-space: nowrap;
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* iPhone SE 等の狭幅で全体が収まりやすいよう可変 */
@media (max-width: 420px) {
  .pc-pain-footer {
    font-size: 1rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .pc-pain-footer .pc-highlight {
    font-size: clamp(0.8125rem, 3.2vw + 0.35rem, 1.35rem);
  }
}

/* ==========================================================================
   Section: Features
   ========================================================================== */

.pc-section-features {
  padding: 9rem 0;
  background:
    radial-gradient(ellipse 100% 45% at 50% 0%, rgba(253, 252, 251, 0.04) 0%, transparent 48%),
    var(--pc-navy-800);
  position: relative;
}

.pc-section-features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-border-gold), transparent);
}

/* (Section head styles now handled by .pc-heading-block) */

.pc-feature-stack {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

.pc-feature-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .pc-feature-stack {
    gap: 7.5rem;
  }

  .pc-feature-row {
    flex-direction: row;
  }
  .pc-feature-row.pc-feature-reverse {
    flex-direction: row-reverse;
  }
}

.pc-feature-media {
  flex: 1;
  position: relative;
  width: 100%;
}

.pc-feature-media::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  border-radius: 1.25rem;
  z-index: 0;
}

.pc-feature-row:nth-child(1) .pc-feature-media::before {
  background: rgba(37, 74, 110, 0.45);
  background: color-mix(in srgb, var(--pc-navy-500) 45%, transparent);
  transform: rotate(-2deg);
}

.pc-feature-row:nth-child(2) .pc-feature-media::before {
  background: rgba(212, 175, 55, 0.1);
  transform: rotate(2deg);
}

.pc-feature-row:nth-child(3) .pc-feature-media::before {
  background: rgba(37, 74, 110, 0.35);
  background: color-mix(in srgb, var(--pc-navy-500) 35%, transparent);
  transform: rotate(-1deg);
}

.pc-feature-placeholder {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--pc-navy-700), var(--pc-navy-600));
  border-radius: 1rem;
  border: 1px solid var(--pc-border-gold-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-feature-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid var(--pc-border-gold-hairline);
}

.pc-feature-body {
  flex: 1;
  min-width: 0;
}

.pc-feature-head {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pc-border-gold-hairline);
}

/* 数字と見出しを同一行で縦方向の幾何中心に揃える（ベースライン揃いに見えないよう） */
.pc-feature-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 3.25rem;
  font-weight: 200;
  line-height: 1;
  font-family: var(--pc-font-accent-num);
  letter-spacing: 0.06em;
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.45;
  transform: translateY(-0.06em);
}

/* common/css/pc.css の #contents #main h3 より ID+class で詳細度を上げる */
body.page-premium-care #contents #main .pc-root .pc-feature-head h3 {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: max(var(--pc-fs-min), 1.125rem);
  font-weight: 600;
  color: var(--pc-white);
  min-width: 0;
  letter-spacing: 0.06em;
  line-height: 1.55;
  align-self: center;
}

@media (min-width: 768px) {
  body.page-premium-care #contents #main .pc-root .pc-feature-head h3 {
    font-size: 20px;
    line-height: 1.45;
  }
}

body.page-premium-care #contents #main .pc-root .pc-feature-body p {
  color: var(--pc-white-80);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.pc-feature-list {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.pc-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--pc-white-80);
  margin-bottom: 0.5rem;
  line-height: 1.85;
  letter-spacing: 0.05em;
}

.pc-feature-list li span {
  display: block;
  flex: 1;
}

.pc-feature-list .fa-check-circle {
  color: var(--pc-gold-400);
  margin-top: 0.35em;
  line-height: 1;
  flex-shrink: 0;
}

/* POINT box */
.pc-point-box {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.03));
  padding: 2.25rem 1.5rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--pc-border-gold);
  margin-top: 1.25rem;
  position: relative;
  overflow: hidden;
}

.pc-point-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--pc-grad-gold);
  color: var(--pc-navy-900);
  font-size: max(var(--pc-fs-min), 0.7rem);
  font-weight: 800;
  padding: 0.35rem 1rem;
  border-bottom-left-radius: 0.5rem;
  letter-spacing: 0.08em;
}

body.page-premium-care #contents #main .pc-root .pc-point-box p {
  font-size: max(var(--pc-fs-min), 0.875rem);
  color: var(--pc-white-80);
  padding-top: 0.5rem;
}

.pc-point-box .pc-point-title {
  font-weight: 700;
  color: var(--pc-gold-300);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.35rem;
}

/* ==========================================================================
   Section: Storage banner
   ========================================================================== */

.pc-section-storage {
  padding: 5.5rem 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(253, 252, 251, 0.06) 0%, transparent 55%),
    linear-gradient(135deg, var(--pc-navy-600), var(--pc-navy-500));
  color: var(--pc-white);
  position: relative;
  overflow: hidden;
}

.pc-section-storage::before {
  content: "";
  position: absolute;
  left: -4rem;
  bottom: -4rem;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.pc-section-storage::after {
  content: "";
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.pc-section-storage .pc-container {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Storage heading inherits from .pc-heading-block .pc-heading-compact */

.pc-section-storage .pc-lead {
  color: var(--pc-white-60);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .pc-section-storage .pc-lead {
    font-size: 1.1rem;
  }
}

.pc-section-storage .pc-br-md {
  display: none;
}

@media (min-width: 768px) {
  .pc-section-storage .pc-br-md {
    display: inline;
  }
}

/* ==========================================================================
   Section: Flow
   ========================================================================== */

.pc-section-flow {
  padding: 8rem 0;
  background:
    radial-gradient(ellipse 85% 55% at 80% 0%, rgba(253, 252, 251, 0.03) 0%, transparent 50%),
    var(--pc-navy-900);
}

/* Flow heading inherits from .pc-heading-block */

.pc-flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .pc-flow-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

.pc-flow-step {
  position: relative;
  background: linear-gradient(145deg, var(--pc-navy-700), var(--pc-navy-800));
  border-radius: 0.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--pc-border-gold-hairline);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.pc-flow-step:hover {
  border-color: var(--pc-border-gold);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* SP: 横並び（番号 | テキスト） */
@media (max-width: 767px) {
  .pc-flow-step {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    text-align: left;
  }

  .pc-flow-step .pc-step-num {
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
  }

  .pc-flow-arrow {
    display: none;
  }
}

/* PC: 従来の縦カード */
@media (min-width: 768px) {
  .pc-flow-step {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
  }

  .pc-flow-arrow {
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pc-gold-500);
    font-size: max(var(--pc-fs-min), 0.85rem);
    opacity: 0.6;
  }
}

.pc-flow-step .pc-step-num {
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 200;
  font-size: 1.75rem;
  font-family: var(--pc-font-accent-num);
  letter-spacing: 0.08em;
  line-height: 1;
}

@media (min-width: 768px) {
  .pc-flow-step .pc-step-num {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
}

body.page-premium-care #contents #main .pc-root .pc-flow-step h3 {
  font-weight: 600;
  font-size: max(var(--pc-fs-min), 1.05rem);
  color: var(--pc-white);
  margin: 0 0 0.15rem;
  padding: 0;
  background: transparent;
  letter-spacing: 0.05em;
}

body.page-premium-care #contents #main .pc-root .pc-flow-step p {
  font-size: max(var(--pc-fs-min), 0.875rem);
  color: var(--pc-text-muted);
  line-height: 1.85;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Section: Pricing
   ========================================================================== */

.pc-section-pricing {
  padding: 9rem 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(253, 252, 251, 0.035) 0%, transparent 50%),
    var(--pc-navy-800);
  position: relative;
  overflow: hidden;
}

.pc-section-pricing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-border-gold), transparent);
}

.pc-section-pricing .pc-container {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Pricing heading inherits from .pc-heading-block */

.pc-pricing-card {
  background: linear-gradient(145deg, var(--pc-navy-700), var(--pc-navy-900));
  border-radius: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--pc-border-gold);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(212, 175, 55, 0.06);
  position: relative;
  overflow: hidden;
  text-align: left;
}

@media (min-width: 768px) {
  .pc-pricing-card {
    padding: 3rem;
  }
}

.pc-pricing-card::before {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.pc-pricing-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .pc-pricing-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* SP: Features 部分を中央揃えにし、h3 も横一行に収まるよう調整 */
@media (max-width: 767px) {
  .pc-pricing-card {
    text-align: center;
    padding: 1.5rem;
  }

  .pc-pricing-features {
    text-align: center;
  }

  .pc-pricing-features ul {
    display: inline-block;
    text-align: left;
  }
}

body.page-premium-care #contents #main .pc-root .pc-pricing-features h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
  padding: 0;
  background: transparent;
  color: var(--pc-white);
  white-space: nowrap;
}

@media (max-width: 767px) {
  body.page-premium-care #contents #main .pc-root .pc-pricing-features h3 {
    font-size: 1.35rem;
    text-align: center;
  }
}

.pc-pricing-features h3 .pc-gold {
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pc-pricing-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pc-pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pc-white-80);
  margin-bottom: 0.6rem;
  font-size: max(var(--pc-fs-min), 0.95rem);
  line-height: 1.85;
  letter-spacing: 0.05em;
}

.pc-pricing-features .fa-check-circle {
  color: var(--pc-gold-400);
  flex-shrink: 0;
}

.pc-pricing-features .pc-note {
  font-size: max(var(--pc-fs-min), 0.75rem);
  color: var(--pc-text-muted);
}

.pc-pricing-cta {
  text-align: center;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.06), rgba(212, 175, 55, 0.02));
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--pc-border-gold);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .pc-pricing-cta {
    padding: 1.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .pc-pricing-cta {
    min-width: 300px;
  }
}

body.page-premium-care #contents #main .pc-root .pc-pricing-cta .pc-price-label {
  color: var(--pc-text-muted);
  font-size: max(var(--pc-fs-min), 0.85rem);
  margin-bottom: 0.25rem;
}

.pc-price-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
  white-space: nowrap;
}

.pc-price-row .pc-num {
  font-size: 2.25rem;
  font-weight: 900;
  background: var(--pc-grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: "Cormorant Garamond", Georgia, serif;
}

@media (min-width: 768px) {
  .pc-price-row .pc-num {
    font-size: 3.25rem;
  }
}

.pc-price-row .pc-yen {
  font-size: 1.1rem;
  color: var(--pc-gold-400);
}

.pc-price-row .pc-tax {
  font-size: max(var(--pc-fs-min), 0.8rem);
  color: var(--pc-text-muted);
  margin-left: 0.25rem;
}

.pc-pricing-cta .pc-btn-primary {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

@media (max-width: 767px) {
  .pc-pricing-cta .pc-btn-primary {
    font-size: max(var(--pc-fs-min), 0.95rem);
    padding: 0.85rem 1.5rem;
  }
}

body.page-premium-care #contents #main .pc-root .pc-pricing-cta .pc-pay-note {
  font-size: max(var(--pc-fs-min), 0.75rem);
  color: var(--pc-text-muted);
  margin-top: 0.75rem;
}

/* ==========================================================================
   Section: FAQ
   ========================================================================== */

.pc-section-faq {
  padding: 8rem 0;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(253, 252, 251, 0.03) 0%, transparent 45%),
    var(--pc-navy-900);
}

/* FAQ heading inherits from .pc-heading-block */

.pc-faq-list {
  max-width: 48rem;
  margin: 0 auto;
}

.pc-faq-item {
  border: 1px solid var(--pc-border-gold-hairline);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.pc-faq-item:hover {
  border-color: var(--pc-border-gold);
}

.pc-faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem;
  background: var(--pc-navy-800);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  transition: background-color 0.35s ease;
}

.pc-faq-btn:hover {
  background: var(--pc-navy-700);
}

.pc-faq-q {
  font-weight: 700;
  color: var(--pc-white);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.pc-faq-q .pc-q {
  color: var(--pc-gold-400);
  flex-shrink: 0;
  font-family: var(--pc-font-accent-num);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.pc-faq-answer {
  display: none;
  padding: 1.25rem 1rem;
  background: var(--pc-navy-900);
  border-top: 1px solid var(--pc-border-gold-hairline);
  color: var(--pc-white-80);
  line-height: 1.9;
  letter-spacing: 0.05em;
  gap: 0.75rem;
}

.pc-faq-item.pc-faq-open .pc-faq-answer {
  display: flex;
}

.pc-faq-answer .pc-a {
  color: var(--pc-gold-400);
  font-weight: 500;
  flex-shrink: 0;
  font-family: var(--pc-font-accent-num);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.pc-faq-btn .fa-chevron-down {
  color: var(--pc-gold-500);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.pc-faq-item.pc-faq-open .pc-faq-btn .fa-chevron-down {
  transform: rotate(180deg);
}

/* ==========================================================================
   Color accent helpers
   ========================================================================== */

.pc-c-blue {
  color: var(--pc-navy-200);
}

.pc-c-yellow {
  color: var(--pc-gold-400);
}

.pc-c-orange {
  color: var(--pc-gold-600);
}

/* ==========================================================================
   Divider / Separator lines between sections
   ========================================================================== */

.pc-section-brands + .pc-section-pain,
.pc-section-pain + .pc-section-features,
.pc-section-features + .pc-section-storage,
.pc-section-storage + .pc-section-flow,
.pc-section-flow + .pc-section-pricing,
.pc-section-pricing + .pc-section-faq {
  border-top: none;
}

/* LP内リンクのホバー下線を無効化 */
body.page-premium-care #contents #main .pc-root a:hover,
body.page-premium-care #contents #main .pc-root a:focus,
body.page-premium-care #contents #main .pc-root a:focus-visible {
  text-decoration: none;
}

/* ==========================================================================
   Mobile refinements (exclude header + brand section)
   ========================================================================== */

@media (max-width: 768px) {
  /* 1) White space: section separation (ブランド一覧セクションは対象外) */
  .pc-section-pain,
  .pc-section-features,
  .pc-section-storage,
  .pc-section-flow,
  .pc-section-pricing,
  .pc-section-faq {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }

  .pc-heading-block {
    margin-bottom: 4rem;
  }

  /* 1) Readability: body text spacing (ブランド一覧セクションは対象外) */
  body.page-premium-care #contents #main .pc-root .pc-section-pain p,
  body.page-premium-care #contents #main .pc-root .pc-section-features p,
  body.page-premium-care #contents #main .pc-root .pc-section-storage p,
  body.page-premium-care #contents #main .pc-root .pc-section-flow p,
  body.page-premium-care #contents #main .pc-root .pc-section-pricing p,
  body.page-premium-care #contents #main .pc-root .pc-section-faq p {
    line-height: 1.75;
    letter-spacing: 0.045em;
  }

  /* 1) Card padding: keep 16–20px horizontal breathing room */
  .pc-flow-step {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .pc-faq-btn {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .pc-faq-answer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .pc-pricing-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* 3) CTA tap targets: 90% width, min height 54px */
  .pc-cta-row .pc-btn-primary,
  .pc-cta-row .pc-btn-secondary,
  .pc-pricing-cta .pc-btn-primary {
    width: 80%;
    max-width: 400px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    border-radius: 9999px;
  }

  .pc-cta-row {
    align-items: center;
  }

  /* 2) Mobile typography: ensure heading stays Mincho + refined tracking */
  body.page-premium-care #contents #main .pc-root h2,
  body.page-premium-care #contents #main .pc-root h3 {
    font-family: var(--pc-font-heading);
    letter-spacing: 0.06em;
  }

  body.page-premium-care #contents #main .pc-root h3 {
    border-bottom: none;
  }
}