/* =========================================================
  EXO SILK LP v3
  PC: 769px以上 / SP: 768px以下
  方針:
  - HEROのみ人物込み背景画像
  - その他ブロックは「背景画像 + 前景オブジェクト + テキスト」
  - 後から改修しやすいよう、セクションごとにCSSを分離
========================================================= */

/* 01. Base / Variables */
:root {
  --font-ja: "Noto Serif JP","Hiragino Mincho ProN", sans-serif;
  --font-en: "Marcellus", "Times New Roman", serif;
  --color-text: #202828;
  --color-muted: #687474;
  --color-deep: #707e7e;
  --color-line: #dce2e2;
  --color-bg: #f5f8f8;
  --color-white: #fff;
  --shadow-soft: 0 24px 70px rgba(45, 60, 60, .13);
  --radius-lg: 28px;
  --container-width: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-text); font-family: var(--font-ja); line-height: 1.85; letter-spacing: .045em; background: var(--color-bg); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--container-width), calc(100% - 48px)); margin-inline: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 400; line-height: 1.35; letter-spacing: .04em; }
h2 { margin-bottom: 22px; font-size: clamp(32px, 4vw, 40px); }
p { color: var(--color-muted); font-weight: 700; }
puse { color: var(--color-muted); font-weight: 400; font-size: 0.7em; line-height: 1!important; }

.section { position: relative; overflow: hidden; padding: 50px 0; }
.eyebrow { margin-bottom: 12px; color: var(--color-deep); font-family: var(--font-en); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; min-width: 260px; padding: 16px 36px; border-radius: 999px; color: #fff; font-weight: 700; background: linear-gradient(135deg, #7a8787, #bcc6c6); box-shadow: 0 18px 38px rgba(86, 98, 98, .28); }
.button::after { content: "›"; margin-left: 16px; font-size: 28px; line-height: 1; }

/* 02. Common Layered Section */
.layered-section { min-height: 560px; display: grid; align-items: center; background: #eef3f3; }
.layer-bg { position: absolute; inset: 0; z-index: 0; }
.layer-bg img { width: 100%; height: 100%; object-fit: cover; }
.layer-object { position: absolute; z-index: 1; pointer-events: none; }
.layered-section__inner { position: relative; z-index: 2; }
.section-text { position: relative; z-index: 2; width: min(500px, 100%); }

/* 03. HERO */
.hero { position: relative; min-height: 760px; display: grid; align-items: center; overflow: hidden; background: #edf2f2; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.hero__overlay { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 0%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 10%), linear-gradient(180deg, rgba(255,255,255,.15), rgba(232,238,238,.18)); }
.hero__inner { position: relative; z-index: 4; margin-top: 120px;padding: 92px 0 10px; }
.brand { margin-bottom: 44px; color: var(--color-deep); font-family: var(--font-en); font-size: 22px; letter-spacing: .22em; }
.hero__sub { margin-bottom: 14px; color: var(--color-deep); font-weight: 700; letter-spacing: .12em; }
.hero h1 { margin-bottom: 26px; font-size: clamp(40px, 6vw, 40px); }
.hero__lead { max-width: 590px; margin-bottom: 30px; font-size: 18px; font-weight: 700; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }
.hero__badges li { padding: 10px 18px; border: 1px solid var(--color-line); border-radius: 10px; background: rgba(255,255,255,.72); backdrop-filter: blur(6px); color: #4d5858; font-size: 13px; font-weight: 700; }

.hero__product {
  position: absolute;
  z-index: 2;
  right: max(24px, calc((100vw - var(--container-width)) / 2 + 40px));
  bottom: -50px;
  width: min(38vw, 520px);
  pointer-events: none;
}

.main_logo {
  position: absolute;
  z-index: 2;
  left: max(0px, calc((98vw - var(--container-width)) / 2 + 0px));
  top: 20px;
  width: min(520px);
}


/* 04. POST REJURAN */
.post::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(255,255,255,.0), rgba(255,255,255,.30), rgba(255,255,255,.18)); }
.post__inner { display: flex; align-items: center; justify-content: space-between; }
.post__dropper { right: max(40px, calc((100vw - var(--container-width)) / 2 + 150px)); top: 00px; width: min(28vw, 360px); }
.post__essence { right: max(40px, calc((100vw - var(--container-width)) / 2));  top: 00px; width: min(34vw, 460px); }

.circle-badge { position: relative; z-index: 2; width: 20vw; aspect-ratio: 1; margin-right:30%; 
 }

.circle-badge span { font-family: var(--font-en); font-size:1.5vw; line-height: 1; letter-spacing: .05em;margin: 10px 10px 10px;
 display: flex;
}

/* 05. EXOSOME */
.exosome::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(255,255,255,.18), rgba(255,255,255,.9) 46%, rgba(255,255,255,.0)); }
.exosome__inner { position: relative; z-index: 2; display: grid; grid-template-columns: .95fr 1.05fr; gap: 10px; align-items: center; }
.exosome__molecule { left: max(24px, calc((100vw - var(--container-width)) / 2 - 50px)); top: 10%; width: min(38vw, 520px); transform: translateY(-50%); }
.exosome__text, .icon-grid { grid-column: 2; }
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
.icon-card { padding: 5px 5px; border: 1px solid var(--color-line); border-radius: 20px; background: rgba(255,255,255,.78); text-align: center; backdrop-filter: blur(6px); }
.icon-card img { width: 80px; height: 80px; margin: 0 auto 0px; object-fit: contain; }
.icon-card span { color: var(--color-muted); font-size: 13px; font-weight: 700; }

/* 06. HOW TO */
.howto { background: #fff; }
.section-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step-card { padding: 14px 14px 24px; border: 1px solid var(--color-line); border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: 0 16px 42px rgba(80, 90, 90, .08); }
.step-card__image { overflow: hidden; margin-bottom: 18px; border-radius: 16px; aspect-ratio: 3 / 2; background: #edf2f2; }
.step-card__image img { width: 100%; height: 100%; object-fit: cover; }
.step-card small { display: block; color: #a6b0b0; font-weight: 700; letter-spacing: .14em; }
.step-card h3 { margin: 5px 0 10px; font-size: 18px; line-height: 1.5; }
.step-card p { margin-bottom: 0; font-size: 14px; }
.usage-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 30px; border: 1px solid var(--color-line); border-radius: 18px; overflow: hidden; background: var(--color-line); }
.usage-icons div { min-height: 92px; display: grid; place-items: center; background: rgba(255,255,255,.8); }
.usage-icons img { width: 100px; height: 100px; object-fit: contain; opacity: 1; }

/* 07. GLOW */
.glow { min-height: 320px; }
.glow::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(255,255,255,.50), rgba(255,255,255,.6), rgba(255,255,255,.12)); }
.glow__inner { position: relative; z-index: 2; }
.glow__model { right: max(24px, calc((100vw - var(--container-width)) / 2 + 90px)); bottom: 0; width: min(44vw, 590px); }
.glow__text { width: min(450px, 100%); }
.check-list { margin: 26px 0 0; padding: 0; list-style: none; }
.check-list li { color: var(--color-text); margin-bottom: 8px; }
.check-list li::before { content: "✓"; margin-right: 10px; color: var(--color-deep); font-weight: 700; }
.before-after { position: absolute; right: max(24px, calc((100vw - var(--container-width)) / 2)); bottom: 0px; z-index: 3; display: flex; align-items: center; gap: 18px; }
.before-after figure { width: 160px; margin: 0; }
.before-after img { border-radius: 12px; box-shadow: 0 10px 26px rgba(50, 60, 60, .16); }
.before-after figcaption { margin-top: 6px; color: var(--color-muted); text-align: center; font-size: 13px; }
.before-after__arrow { color: var(--color-deep); font-size: 30px; }

/* 08. CTA */
.cta { min-height: 480px; text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,.56), rgba(255,255,255,.18)); }
.cta__inner { position: relative; z-index: 3; }
.cta__box { left: max(24px, calc((100vw - var(--container-width)) / 2)); bottom: 0; width: min(32vw, 380px); }
.cta__vial { left: max(280px, calc((100vw - var(--container-width)) / 2 + 330px)); bottom: 18px; width: min(11vw, 125px); }
.cta__circle { right: max(24px, calc((100vw - var(--container-width)) / 2 + 60px)); bottom: 72px; width: min(20vw, 220px); }


.logo { top: 20px; width: 100%; height: 100px;}




/* 09. Footer */
.footer { padding: 44px 0; background: #fff; color: var(--color-muted); font-size: 12px; }

/* 10. PC */
@media (min-width: 769px) { .pc-only { display: block; } .sp-only { display: none !important; } }

/* 11. SP */
@media (max-width: 768px) {
  .pc-only { display: none !important; }
  .sp-only { display: block; }
  .container { width: calc(100% - 32px); }
  .section { padding: 68px 0; }
  h2 { font-size: 28px; }
  .button { width: 100%; min-width: 0; }

  .hero { min-height: 720px; align-items: end; }
  .hero__bg img { object-position: center top; }
  .hero__overlay { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.16) 34%, rgba(255,255,255,.92) 80%, rgba(255,255,255,.98) 50%); }
  .hero__inner { padding: 0px 0 0px; }
  .brand { margin-bottom: 18px; font-size: 17px; }
  .hero__sub { font-size: 13px;  font-weight: 700; color: #000000; }
  .hero h1 { font-size: 26px; }
  .hero__lead { font-size: 15px; font-weight: 700; color: #000000; }
  .hero__badges { gap: 7px; margin-bottom: 24px; }
  .hero__badges li { width: calc(50% - 4px); padding: 9px 8px; text-align: center; font-size: 12px; }

  .main_logo {
    top: 10px;
    width: min(78vw, 360px);
  }


  .hero__product {
    right: 50%;
    bottom: 100px;
    width: min(78vw, 360px);
    transform: translateX(50%);
  }


  .layered-section { min-height: 300px; align-items: start; }
  .layer-bg img { object-position: center; }

  .post::before { background: linear-gradient(0deg, rgba(255,255,255,.0), rgba(255,255,255,.0), rgba(255,255,255,.22)); }
  .post__inner { display: block; padding-top: 54px; }
  .post__dropper { top: auto; right: -42px; bottom: 90px; width: 270px; }
  .post__essence { right: 10px; bottom: 32px; width: 300px; }
  .circle-badge { width: 110px; margin: 28px 0 0; }
  .circle-badge span { font-size: 15px; }

  .exosome::before { background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.9), rgba(255,255,255,.45)); }
  .exosome__inner { display: block; padding-top: 54px; }
  .exosome__molecule { left: -80px; top: auto; bottom: 20px; width: 340px; transform: none; opacity: .86; }
  .icon-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .icon-card { padding: 0px 0px; }

  .step-grid { grid-template-columns: 1fr; gap: 16px; }
  .step-card { display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: center; padding: 12px; }
  .step-card__image { margin-bottom: 0; }
  .step-card h3 { font-size: 16px; }
  .step-card p { font-size: 13px; }
  .usage-icons div { min-height: 70px; }
  .usage-icons img { width: 100px; height: 100px; }

  .glow { min-height: 720px; }
  .glow::before { background: linear-gradient(0deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.12)); }
  .glow__inner { padding-top: 54px; }
  .glow__model { right: 50%; bottom: 160px; width: min(92vw, 460px); transform: translateX(50%); }
  .before-after { left: 16px; right: 16px; top:550px; justify-content: center; gap: 20px; }
  .before-after figure { width: 42%; max-width: 150px; }

  .cta { min-height: 300px; align-items: end; }
  .cta::before { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.92) 58%, rgba(255,255,255,.0)); }
  .cta__inner { padding: 250px 0 10px; }
  .cta__box { left: 22px; top: 150px; width: 220px; }
  .cta__circle { right: 22px; top: 130px; width: 180px; }

}