/* =========================
   Base + Fonts
========================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }

:root{
  --ff-gothic: "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}

body{
  margin: 0;
  color: #777;  /* ←ここを変更 */
  line-height: 1.7;
  font-family: var(--ff-gothic);
  font-weight: 400;
}

a{ text-decoration: none; color: inherit; }

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

ul{ margin: 0; padding: 0; }
li{ list-style: none; }

/* 見出し：Hiragino Sans（W1/W2相当の細めを狙う） */
h1,h2,h3,h4,h5,h6{
  font-family: "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro",
  "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-weight: 400;
  color: #555; /* ←追加 */
}

h1{
  font-weight: 400; /* 400〜600で好み調整 */
}

/* 本文：Yu Gothic（明示） */
p, li{
  font-family: "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro",
  "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-weight: 400;
  color: #777;
  font-size: 15px;
}

/* 使ってるので残す */
.nowrap{ white-space: nowrap; }

/* レイアウト共通 */
.wrapper{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================
   Heading sizes（固定）
========================= */
h1{ font-size: 26px; line-height: 1.25; }
h2{ font-size: 20px; line-height: 1.3; }
h3{ font-size: 17px; line-height: 1.35; }

/* SP */
@media (max-width: 768px){
  h1{ font-size: 22px; }
  h2{ font-size: 18px; }
  h3{ font-size: 16px; }
}

/* =========================
   Header
========================= */

.site-header{
  background: #fff;
  padding-top: 20px;  /* 好みで 8〜18px */
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せ */
  padding: 14px 16px;
}

/* ロゴ */
.site-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-logo img{
  height: 60px;     /* PCのサイズ */
  width: auto;
  display: block;
}

@media (max-width: 768px){
  .site-logo img{
    height: 28px;   /* SPは少し小さく */
  }
}


/* =========================
   FV（new）
========================= */

/* FVはフル幅・枠なし */
.fv-new{
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 画像エリア（ここが absolute の基準になる） */
.fv-new__media{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FV画像 */
.fv-new__img{
  width: 100%;
  height: auto;
  display: block;
}

/* Ion:serum water,（画像）右下：安全圏あり */
.fv-new__nameImg{
  position: absolute;
  right: 18px;
  bottom: 18px;

  height: 34px;   /* 基本サイズ */
  width: auto;
  max-width: 60%;

  display: block;
  pointer-events: none;
  z-index: 2;
}

/* キャッチは画像の下 */
.fv-new__text{
  max-width: 1000px;
  margin: 18px auto 0;
  padding: 0 16px;
  text-align: center;
  color: #555;
  letter-spacing: 0.03em;
  box-sizing: border-box;
}

.fv-new__catch{
  margin: 0;
  line-height: 1.75;
}

.fv-new__catchBig{
  display: block;
  font-size: 34px;
  letter-spacing: 0.12em;
  line-height: 1.15;
  margin-bottom: 10px;
  color: #333;
}

.fv-new__catchRest{
  display: block;
  font-size: 18px;
  color: #666;
}

/* =========================
   PCだけ（文字画像：大きく＋中央右寄りに）
========================= */
@media (min-width: 769px){
  .fv-new__nameImg{
    height: 50px;     /* ←PCだけ大きく */
    right: 140px;     /* ←右端すぎるのを中央右寄りに */
    bottom: 34px;     /* ←少し上げて余白を上品に（不要なら18pxに戻す） */
    max-width: 320px; /* ←暴れ防止 */
  }
}

/* =========================
   SP
========================= */
@media (max-width: 768px){
  .fv-new__nameImg{
    right: 16px;
    bottom: 16px;
    height: 28px;
    max-width: 72%;
  }

  .fv-new__text{
    margin-top: 14px;
  }

  .fv-new__catchBig{
    font-size: 28px;
  }

  .fv-new__catchRest{
    font-size: 14px;
    line-height: 1.8;
  }
}


/* =========================
   Lead（キャッチ下）
========================= */
section.lead{
  width: 100%;
  max-width: 560px !important; /* ここで本文幅を確実に狭くする */
  margin: 70px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}

.lead-text{
  letter-spacing: 0.04em;
  line-height: 2.05;
}

.lead-text p{
  margin: 0 0 22px;
}
.lead-text p:last-child{
  margin-bottom: 0;
}

/* 「酸化＝老化」だけ強調＋下線を文字に近づける */
.lead-key{
  display: inline-block;
  font-weight: 700;
  font-size: 1.28em;
  color: #222;
  letter-spacing: 0.08em;

  line-height: 1.1; /* これが重要：下線が遠くなる原因を切る */


}

/* SPは少し詰める */
@media (max-width: 768px){
  section.lead{ margin-top: 40px; }
  .lead-text{ line-height: 1.95; }
  .lead-text p{ margin-bottom: 18px; }
  .lead-key{ font-size: 1.18em; }
}

/* =========================
   Section title（共通ベース）
========================= */
.sec-title--line{
  width: min(var(--read-max, 760px), calc(100% - 32px));
  margin: 90px auto 40px;
  text-align: center;
}

.sec-title--line .sec-title--text{
  display: block;
  letter-spacing: 0.06em;
  color: #333;
  line-height: 1.25;
}

.sec-title--line .sec-title--sub{
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #777;
  line-height: 1;
}

/* =========================
   細線タイトル（sec-title--thin を付けた時だけ）
========================= */
.sec-title--thin{
  display: grid;
  grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
  grid-template-rows: auto auto; /* メイン / サブ */
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  justify-items: center;
}

.sec-title--thin::before,
.sec-title--thin::after{
  content: "";
  height: 2px;
  width: 100%;
  background: rgba(0,0,0,0.72);
}

.sec-title--thin::before{ grid-column: 1; grid-row: 1; }
.sec-title--thin::after { grid-column: 3; grid-row: 1; }

.sec-title--thin .sec-title--text{
  grid-column: 2;
  grid-row: 1;
  min-width: 0; /* これがないと“押し出し”が起きやすい */
}

.sec-title--thin .sec-title--sub{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0; /* ベースの margin-top:10px を打ち消す */
}

/* 細線タイトル：上下余白（PC） */
.sec-title--line.sec-title--thin{
  margin-top: 120px;    /* 上だけ */
  margin-bottom: 100px; /* 下はそのまま */
}


/* SP */
@media (max-width: 768px){
  .sec-title--line{
    margin: 60px auto 28px;
  }
  .sec-title--line .sec-title--sub{
    font-size: 11px;
  }
  .sec-title--thin{
    column-gap: 8px;
    row-gap: 8px;
  }
  .sec-title--thin::before,
  .sec-title--thin::after{
    background: rgba(0,0,0,0.72);
  }

   /* 細線タイトルだけ：下の余白を広げる */
  .sec-title--line.sec-title--thin{
    margin-bottom: 70px; /* 好みで 44〜80 */
  }
}

/* =========================
   細線タイトル：文字だけ調整（thinだけに限定）
========================= */

/* メイン文字（sec-title--text）を細く */
.sec-title--thin .sec-title--text{
  font-weight: 200;        /* 200〜300で好み */
  letter-spacing: 0.07em;  /* 任意：少し上品に */
  color: rgba(0,0,0,0.72); /* 見た目が細くなる */
}

/* サブ文字（sec-title--sub）を大きく＋太字 */
.sec-title--thin .sec-title--sub{
  font-size: 14px;         /* 12→14/15あたりで調整 */
  font-weight: 600;        /* 600〜700で好み */
  letter-spacing: 0.14em;  /* 任意 */
  color: #666;             /* 任意：少し濃くしてもOK */
}

/* SPだけ微調整したい場合 */
@media (max-width: 768px){
  .sec-title--thin .sec-title--sub{
    font-size: 13px;
  }
}



/* =========================
   Note box（青背景ぼかし）
========================= */
.note-wrap{
  max-width: var(--read-max);
  margin: 22px auto 0;
  padding: 0 16px;
}

.note-box{
  position: relative;
  background: #f5f5f5;
  border-radius: 0;
  padding: 18px 20px;
  border: 1px solid rgba(0,0,0,0.06);
}


.note-list{
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.note-list li{
  position: relative;
  padding-left: 16px;
  margin: 20px 0;
}

.note-list li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.9;
}

/* =========================
   Brand message
========================= */
.brand-wrap{
  max-width: 760px;
  margin: 100px auto 0;
  padding: 0 16px;
}

.brand-text{
  max-width: 640px;      /* 読み幅を少し狭く（上品） */
  margin: 0 auto;
  line-height: 2.05;     /* 行間を広め */
  letter-spacing: 0.03em;
}

.brand-text p{ margin: 0 0 22px; }
.brand-text p:last-child{ margin-bottom: 0; }

.brand-em{
  font-weight: 700;
  font-size: 22px;     /* ←PC/SP共通で大きく（20〜26で調整） */
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: #222;

  display: inline-block;
  text-decoration: none;
}

/* SPも同じか、さらに少し上げたいなら */
@media (max-width: 768px){
  .brand-em{
    font-size: 22px;   /* 同じでOK。もっと大きくなら 23〜24 */
  }

  .brand-text{
    max-width: 520px;
    line-height: 1.95;
  }
  .brand-text p{
    margin-bottom: 18px;
  }
}




/* 注釈ボックス（最終版のみ残す） */
/* 注釈・出典（折りたたみ / 軽い補足BOX） */
.notes{
  width: min(420px, calc(100% - 32px));
  margin: 50px auto 0;
  padding: 10px 12px;

  background: #f6f6f6;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 0;

  font-size: 0.85em;
  line-height: 1.65;
  color: #777;
}

/* summary（見出し行） */
.notes-summary{
  cursor: pointer;
  list-style: none;

  color: #666;
  letter-spacing: 0.02em;
}

/* マーカー消し */
.notes-summary::-webkit-details-marker{ display:none; }
.notes-summary::marker{ content:""; }

/* 右側に開閉表示 */
.notes-summary::after{
  content: "＋";
  float: right;
  color: #888;
}

.notes[open] .notes-summary::after{
  content: "−";
}

/* 中身 */
.notes-body{
  margin-top: 10px;
  color: #777;
}

.notes-body p{ margin: 0 0 6px; }
.notes-body p:last-child{ margin-bottom: 0; }

.notes-body a{
  color: #666;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================
   Skin aging section
========================= */
.skin-aging{
  max-width: var(--read-max);
  margin: 0 auto;
  padding: 0 16px;
  color: #777;
}

/* ① skin-aging内のh2は基本「枠なし」（下のh2もこれになる） */
.skin-aging > h2{
  margin: 40px 0 28px;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: #333;
  font-weight: 400;

  /* 念のため枠関連を無効化 */
  border: none;
  padding: 0;
  background: transparent;
}

/* ② 最初のh2だけ「枠あり＋中央」（肌老化の２大原因とは だけ） */
.skin-aging > h2:first-of-type{
  margin: 40px auto 34px;
  padding: 12px 18px;

  border: 1px solid rgba(0,0,0,0.28);
  border-radius: 0;
  background: transparent;

  display: table;      /* ←文字幅に縮んで中央寄せが安定 */
  text-align: center;

  color: #555;         /* 好みで #333 でもOK */
  letter-spacing: 0.08em;
  line-height: 1.35;
}

/* skin-aging内：最後のh2（= Re:tourC〜）だけ行間を広げる */
.skin-aging > h2:last-of-type{
  line-height: 1.6;   /* 1.45〜1.8で好み */
}

.skin-aging h3{
  margin: 0 0 16px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: #333;

  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(36,41,46,0.35);
  font-weight: 400; /* ←追加 */
}

.skin-aging p{
  max-width: 640px;        /* ←読み幅を少し狭く */
  margin: 0 auto 24px;     /* ←段落間を広げる（中央寄せ） */
  line-height: 2.05;       /* ←ゆったり */
  letter-spacing: 0.03em;  /* ←少し上品に */
  color: #666;             /* ←少し締める */
}
.skin-aging p:last-of-type{
  margin-bottom: 0;
}

.skin-aging .img-wrap{
  max-width: 560px;   /* ←ここを小さく（例：560〜820） */
  margin: 28px auto;  /* ←左右autoで中央寄せ */
}

.skin-aging .img-wrap img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* 画像の直後に来るh3だけ間を空ける */
.skin-aging .img-wrap + h3{
  margin-top: 80px;
}

@media (max-width: 768px){
    .skin-aging > h2:first-of-type{
    margin: 34px auto 26px;
    padding: 10px 14px;
    letter-spacing: 0.06em;
  }
  .skin-aging h3{
    margin-bottom: 14px;
  }
  .skin-aging p{
    max-width: 100%;
    margin-bottom: 20px;
    line-height: 1.95;
  }
}

@media (max-width: 768px){
  #why-aging .sec-title--line::before,
  #why-aging .sec-title--line::after{
    width: 32px;
  }
}


/* =========================
   Ion-serum section（760に統一）
========================= */
#ion-serum{
  max-width: 760px;     /* 1000 → 760 */
  margin: 90px auto 0;
  padding: 0 16px;
}

/* ion-serum内の入れ子.wrapper（二重padding）を解消 */
#ion-serum > .wrapper{
  max-width: none;      /* 中のwrapperで幅を再制限しない */
  padding-left: 0;
  padding-right: 0;
}

#ion-serum p{
  max-width: 640px;        /* ←読み幅を少し狭く（高級感が出る） */
  margin: 0 auto 24px;     /* ←段落の“間”を広げる */
  line-height: 2.05;       /* ←ゆったり */
  letter-spacing: 0.03em;  /* ←ほんの少し上品に */
  color: #777;             /* ←少しだけ締める（#777より上品に見えやすい） */
}
#ion-serum p:last-of-type{ margin-bottom: 0; }


#ion-serum p:last-of-type{ margin-bottom: 0; }

@media (max-width: 768px){
  #ion-serum{ margin-top: 60px; }
  #ion-serum p{ line-height: 1.85; }
}

/* ここはそのままでOK */
@media (max-width: 768px){
  #ion-serum .sec-title--text{
    white-space: normal;      /* ←nowrapをやめる */
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.03em;   /* 少し控えめに */
    padding: 0 8px;           /* 端に寄りすぎ防止 */
  }

  #ion-serum .sec-title--line::before,
  #ion-serum .sec-title--line::after{
    flex: 1;                  /* ←線は伸び縮みOK */
    width: auto;              /* ←固定幅やめる */
    min-width: 24px;
  }
}



/* =========================
   Evidence details (below circles)
========================= */
.evidence-details{
  max-width: 700px;
  margin: 70px auto 0;
  padding: 0 16px;
  color: #777;
}

.evidence-block{
  margin: 0 0 56px;
}

.evidence-h{
  display: flex;
  align-items: center;   /* ←上下ズレ消える */
  gap: 2px;

  margin: 0 0 18px;
  color: #333;
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: 0;
}

.evi-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: #777;
  color: #fff;
  line-height: 1;
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.evidence-ttl{
  line-height: 1.4;
}

.evidence-details p{
  margin: 0 0 22px;   /* 14→22（好みで 20〜28） */
  line-height: 1.9;   /* そのままでOK（少し詰めたいなら 1.85） */
  letter-spacing: 0.02em;
}
.evidence-details p:last-child{
  margin-bottom: 0;
}


.evidence-img--small{
  max-width: 640px;           /* 好みで 520〜760 */
  margin: 18px auto 22px;     /* 中央寄せ */
}

.evidence-img--small img{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.evidence-list{
  margin: 10px auto 18px;
  padding: 0;
  max-width: 640px;
  list-style: none;
}

.evidence-list li{
  position: relative;
  padding-left: 16px;
  margin: 8px 0;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.evidence-list li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.9;
}

/* 3行の箇条書きを“目立つBOX”にする */
.evidence-list--boxed{
  border: 1px solid rgba(0,0,0,0.35);
  background: #fff;
  padding: 32px 36px;
  margin: 18px auto 24px;
  max-width: 640px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

.evidence-list--boxed li{
  margin: 10px 0;
  padding-left: 18px;
  line-height: 1.9;
}

@media (max-width: 768px){
  .evidence-list--boxed{
    padding: 18px 18px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  }
  .evidence-list--boxed li{
    margin: 8px 0;
    line-height: 1.85;
  }
}


/* ボタン（論文リンク） */
.evidence-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
}

.btn-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid rgba(36,41,46,0.18);
  background: #fff;
  color: #777;
  letter-spacing: 0.03em;
  transition: opacity .2s ease, transform .2s ease;
}

.btn-link:hover{
  opacity: 0.75;
  transform: translateY(1px);
}

/* SP微調整 */
@media (max-width: 768px){
  .evidence-details{
    max-width: 640px;  /* SPは読みやすさ優先（600〜680） */
    margin-top: 48px;
  }

  .evidence-details p{
    margin-bottom: 18px;
    line-height: 1.85;
  }

  .evidence-list li{
    line-height: 1.85;
  }

  /* ボタン：SPは大きすぎない＆中央寄せ */
  .evidence-btns{
    justify-content: center;
    gap: 10px;
  }

  .btn-link{
    width: auto;          /* 100%にしない */
    padding: 8px 12px;    /* 小さめ */
    font-size: 13px;
  }
}


/* =========================
   Features（6つの機能的特長）
========================= */

#features.wrapper.features{
  max-width: 680px;
  margin: 90px auto 0;
  padding: 0 16px;
}


/* 縦1列レイアウト（カードの積み） */
#features .features-grid{
  display: flex;
  flex-direction: column;
  gap: 70px;
}

/* カード本体 */
#features .feature-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0;
  padding: 44px 42px;
}

/* 番号 */
#features .feature-no{
  text-align: center;
  font-size: 1.45rem;          /* 大きすぎない */
  font-weight: 700;            /* 太字 */
  letter-spacing: 0.22em;      /* 高級感の余白 */
  color: #666;                 /* 濃いグレー */
  margin: 0 0 14px;
  padding-bottom: 10px;
  position: relative;
}

#features .feature-no::after{
  content:"";
  display:block;
  width: 56px;                 /* 短い線が上品 */
  height: 1px;
  margin: 10px auto 0;
  background: rgba(68,68,68,0.22); /* 濃いけど薄く見せる */
}


/* 見出し */
#features .feature-ttl{
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: #555;
}

/* 本文 */
#features .feature-body p{
  margin: 0 0 18px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: #777;
}
#features .feature-body p:last-child{
  margin-bottom: 0;
}

/* 注釈 */
#features .feature-note{
  line-height: 1.7;
  opacity: 0.85;
}

/* 画像（通常：下に出す場合） */
#features .feature-media{
  margin: 26px 0 0;
}
#features .feature-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* =========================
   splitカード（本文左＋画像右）
   ※HTMLで .feature-card--split + .feature-split を使う前提
========================= */
#features .feature-card--split .feature-split{
  display: grid;
  grid-template-columns: 1fr 220px; /* 右の画像カラム */
  gap: 34px;
  align-items: center;
}

/* 文章側（左） */
#features .feature-card--split .feature-split__text{
  min-width: 0;
}

/* 画像側（右） */
#features .feature-card--split .feature-split__media{
  margin: 0;
  justify-self: end;
}
#features .feature-card--split .feature-split__media img{
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* =========================
   SP（縦並び）
========================= */
@media (max-width: 768px){
  #features.wrapper.features{
    width: auto;          /* ←削除でもOK */
    max-width: 680px;     /* ←念のため統一（変数なら var(--read-max) ） */
    margin-left: auto;
    margin-right: auto;
  }

  #features .feature-no{
    font-size: 1.25rem;
  }

  #features .features-grid{
    gap: 50px;
  }

  #features .feature-card{
    padding: 30px 18px;
  }

    #features .feature-body p{
    margin: 0 0 16px;
    line-height: 1.9;
  }

  #features .feature-media{
    margin-top: 20px;
  }

  #features .feature-card--split .feature-split__media img{
    width: 220px;
  }

  /* split：1列にして画像を下へ */
  #features .feature-card--split .feature-split{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #features .feature-card--split .feature-split__media{
    justify-self: center;
  }

  #features .feature-card--split .feature-split__media img{
    width: 240px; /* 小さくしたければ 200〜240 */
  }
}

/* =========================
   Experiment results
========================= */
#experiment-results{
  max-width: var(--read-max); /* 760 */
  margin: 90px auto 0;
  padding: 0 16px;
}

/* リード文 */
#experiment-results .experiment-lead{
  text-align: center;
  color: #777;
  line-height: 1.85;
  margin: 0 0 22px;
}

/* まずPC/共通：表そのものを中央寄せ */
#experiment-results .experiment-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin: 0 auto; /* ←これで表自体が左寄りになりにくい */
}

#experiment-results .experiment-table th,
#experiment-results .experiment-table td{
  border: 1px solid rgba(0,0,0,0.12);
  padding: 10px 12px;
  color: #777;
}

#experiment-results .experiment-table th{
  text-align: left;
  font-weight: 500;
  background: #fafafa;
}

/* 2列目・3列目は中央 */
#experiment-results .experiment-table th:nth-child(2),
#experiment-results .experiment-table th:nth-child(3),
#experiment-results .experiment-table td:nth-child(2),
#experiment-results .experiment-table td:nth-child(3){
  text-align: center;
}

/* PC：表だけ少し細くして中央 */
#experiment-results .experiment-table-wrap{
  max-width: 640px;   /* 640〜720で調整 */
  margin: 0 auto;
  overflow-x: auto;
}

/* SP：表は全幅に戻す */
@media (max-width: 768px){
  #experiment-results .experiment-table-wrap{
    max-width: none;
  }
}



/* =========================
   SP：横スクロールなしで収める（左端固定を解除）
========================= */
@media (max-width: 768px){
  /* スクロール前提をやめる */
  #experiment-results .experiment-table-wrap{
    overflow-x: visible;
  }

  /* つぶれ防止の min-width を使わない */
  #experiment-results .experiment-table{
    min-width: 0;
    table-layout: fixed; /* 折り返して収める */
  }

  /* 文字を折り返して収める */
  #experiment-results .experiment-table th,
  #experiment-results .experiment-table td{
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
  }

  /* 3列を均等っぽく（1列目やや広め／○列は同幅） */
  #experiment-results .experiment-table th:nth-child(1),
  #experiment-results .experiment-table td:nth-child(1){
    width: 48%;
    text-align: left;
  }

  #experiment-results .experiment-table th:nth-child(2),
  #experiment-results .experiment-table td:nth-child(2),
  #experiment-results .experiment-table th:nth-child(3),
  #experiment-results .experiment-table td:nth-child(3){
    width: 26%;
    text-align: center;
  }
}

/* =========================
   Monitor（モニター注意書き：上品に）
========================= */
#monitor{
  --mon-gap: 22px;       /* 上段2カラムのgapと統一 */
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
  color: #777;
}

/* detailsの標準マーカー消す */
#monitor summary{ list-style: none; cursor: pointer; }
#monitor summary::-webkit-details-marker{ display:none; }
#monitor summary::marker{ content:""; }

/* 全体 */
#monitor .mon{
  max-width: 680px;
  margin: 0 auto;
}

/* ① 全体トグル（ボタン）：PC大きめ／SPズレなし */
#monitor .mon__toggle{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 640px;        /* PCの見た目サイズ（好みで 560〜680） */
  margin: 0 auto 14px;
  padding: 16px 22px;

  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;
  color: #555;
  letter-spacing: 0.08em;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}

#monitor .mon[open] > .mon__toggle{
  background: rgba(0,0,0,0.02);
}

/* 注意書き */
#monitor .mon__note{
  margin: 0 auto 22px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

/* 上段2カラム */
#monitor .mon__grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mon-gap);
}

/* カード */
#monitor .mon__card{
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  padding: 18px 18px;
}

#monitor .mon__card--full{
  margin-top: 22px;
}

/* 小見出し */
#monitor .mon__subttl{
  margin: 0 0 12px;
  color: #555;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ぼかしサムネ（クリック領域） */
#monitor .mon__blur{
  position: relative;
  border: 1px solid rgba(0,0,0,0.10);
  overflow: hidden;
  background: #fff;
}

#monitor .mon__blur img{
  width: 100%;
  height: auto;
  display: block;
  filter: blur(14px);
  transform: scale(1.03);
  opacity: 0.95;
}

/* 「写真を表示」 */
#monitor .mon__blurbtn{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(255,255,255,0.92);
  color: #555;
  font-size: 12px;
  letter-spacing: 0.10em;
}

/* 開いた中身 */
#monitor .mon__open{
  padding-top: 14px;
}

/* Before/After */
#monitor .mon__ba{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#monitor .mon__fig{
  margin: 0;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 10px;
  background: #fff;
}

#monitor .mon__fig img{
  width: 100%;
  height: auto;
  display: block;
}

#monitor .mon__fig figcaption{
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: #777;
}

/* 4枚グリッド */
#monitor .mon__grid4{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 説明文 */
#monitor .mon__desc{
  margin: 12px 0 0;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
#monitor .mon__desc--mt{ margin-top: 14px; }

/* PC：額のニキビの“ぼかし画像”だけ 60% にする */
#monitor .mon__card--acne .mon__blur{
  width: 50%;
  margin: 0 auto;   /* 中央寄せ */
}

/* 画像自体は領域にフィット */
#monitor .mon__card--acne .mon__blur img{
  width: 100%;
  height: auto;
  display: block;
}

/* SPは全幅のままにする（任意） */
@media (max-width: 768px){
  #monitor .mon__card--acne .mon__blur{
    width: 100%;
  }
}


/* =========================
   額のニキビ：上段の「膝カード1枚分」と同じ幅にして中央
   （.mon__acne-inner がHTMLにある前提）
========================= */
#monitor .mon__card--acne .mon__acne-inner{
  width: 100%;
  max-width: 700px;  /* ←上段カードと同じ見た目に（350〜380で調整） */
  margin: 0 auto;
}

/* 追加：タイトル（額のニキビ）だけ中央 */
#monitor .mon__card--acne .mon__subttl{
  text-align: center;
}


#monitor .mon__card--acne .mon__acne-inner > *{
  width: 100%;
  max-width: 100%;
}

/* SP */
@media (max-width: 768px){
  #monitor .mon__grid2{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #monitor .mon__card{
    padding: 16px 14px;
  }

  #monitor .mon__toggle{
    max-width: 100%;
    padding: 14px 16px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  /* SPは素直に全幅 */
  #monitor .mon__card--acne .mon__acne-inner{
    width: 100%;
  }
}

/* =========================
   CTAボタン
========================= */
/* =========================
   CTAボタン（比較：左=① / 右=②）
========================= */

/* CTAセクション共通（UTAGE器1000のまま） */
.cta{
  max-width: 1000px;
  margin: 90px auto 0;
  padding: 0 16px 90px;
  text-align: center;
}

/* 比較表示（PCは横、SPは縦） */
.cta.cta--compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 768px){
  .cta.cta--compare{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.cta-variant{
  text-align: center;
}

.cta-variant__label{
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #777;
}

/* CTAボタン（共通：primary も lux もここで成立させる） */
.cta-btn{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 420px;
  padding: 18px 28px;
  border-radius: 999px;

  text-decoration: none;
  box-sizing: border-box;
}

/* CTAボタン：primary（＝パターン①のボタン） */
.cta-btn--primary{
  position: relative;
  background: #fff;
  border: 1px solid #D9D9D9; /* 外枠 */
  color: #777;
}

/* 内枠（2本目） */
.cta-btn--primary::after{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  border: 1px solid rgba(217,217,217,0.65);
  pointer-events: none;
}

@media (hover:hover){
  .cta-btn--primary:hover{
    border-color: #CFCFCF;
  }
  .cta-btn--primary:hover::after{
    border-color: rgba(207,207,207,0.75);
  }
}

/* =========================
   パターン①（左）：価格カード + CTAボタン（外枠なし）
========================= */
.price-card--normal{
  max-width: 420px;
  margin: 0 auto 14px;
  padding: 14px 18px;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.02);

  text-align: center;
}

.price-card--normal .price-card__main{
  font-size: 14px;
  letter-spacing: 0.12em;
  line-height: 1.35;
  color: #666;
}

/* =========================
   パターン②（右）：価格 + CTAボタン を “枠内にまとめる”
========================= */
.cta-pack--lux{
  max-width: 520px;                 /* 480〜560で調整 */
  margin: 0 auto;
  padding: 26px 26px 24px;

  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;                 /* まとめ枠は白でOK */
  border-radius: 0;

  box-shadow: 0 18px 40px rgba(0,0,0,0.02); /* 極薄 */
  text-align: center;
}

.cta-pack--lux .cta-pack__price{
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: #666;
}

/* パターン②のボタン：見た目はCTAボタン（primaryと同系統） */
.cta-btn--lux{
  position: relative;
  background: #fff;
  border: 1px solid #D9D9D9;
  color: #777;
}

.cta-btn--lux::after{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  border: 1px solid rgba(217,217,217,0.65);
  pointer-events: none;
}

@media (hover:hover){
  .cta-btn--lux:hover{
    border-color: #CFCFCF;
  }
  .cta-btn--lux:hover::after{
    border-color: rgba(207,207,207,0.75);
  }
}

@media (max-width: 768px){
  .cta-pack--lux{
    padding: 22px 18px 20px;
  }
}


/* =========================
   HOW TO USE（STEPごとに画像）
========================= */
#howto.howto{
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0 16px;
  color: #777;
}

#howto .howto-ttl{
  margin: 34px 0 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #555;
  text-align: left;
}

/* ブロック区切り */
#howto .howto-block + .howto-block{
  margin-top: 46px;
  padding-top: 46px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* STEP一覧 */
#howto .howto-steps{
  display: grid;
  gap: 18px;
}

/* 1STEP（左：画像／右：文章） */
#howto .howto-step{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: start;
}

/* 文章だけのブロックでも崩れないように */
#howto .howto-step--single .howto-step-cap{
  display: none;
}

#howto .howto-step-fig{
  margin: 0;
}

#howto .howto-step-cap{
  margin: 0 0 8px;
  letter-spacing: 0.12em;
  color: #777;
  line-height: 1.2;
}

#howto .howto-step-fig img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.08);
}

#howto .howto-step-text{
  margin: 0;
  line-height: 1.9;
  letter-spacing: 0.025em;
  color: #777;
}

#howto .howto-note{
  color: #777;
}

/* figure を基準にする */
#howto .howto-step-fig{
  position: relative;
}


/* HOWTO：STEPを横長の帯（グレー背景＋白文字）にする */
#howto .howto-step-cap{
  position: static;      /* ← absolute を解除 */
  transform: none;
  left: auto;
  top: auto;

  display: block;
  width: 52%;
  margin: 0 auto 12px;      /* 帯と画像の間 */
  padding: 7px 0;

  background: #777;
  color: #fff;
  border: none;
  border-radius: 0;

  text-align: center;
  font-weight: 400;
  font-size: 12px;            /* 追加：小さめ */
  letter-spacing: 0.18em;
}

/* SP：縦並び（上に画像、下に文章） */
/* SP：縦並び＋画像小さめ＋STEP帯を左寄せ＆小さく */
@media (max-width: 768px){
  #howto.howto{
    margin-top: 70px;
  }

  #howto .howto-step{
    grid-template-columns: 1fr;
    gap: 10px; /* 12でもOK */
  }

  #howto .howto-step-text{
    line-height: 1.85;
  }

  #howto .howto-step-fig img{
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  }

  /* STEP帯：小さく・左寄せ・文字幅に */
  #howto .howto-step-cap{
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 10px;      /* 左寄せ */
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.22em;
    text-align: left;
  }
}


/* =========================
   FAQ（開閉がわかる版）
========================= */
/* FAQ：帯タイトルも含めて幅760に統一 */
#faq{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

/* band-title の帯が幅100%指定なので、#faq内で崩れないように */
#faq.band-title .sec-title--line{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#faq .faq-item{
  border-bottom: none;
  padding: 0;
  margin: 0 0 12px;
}

/* FAQの枠を少し細くして中央に（PC/SP共通） */
#faq .faq-item{
  max-width: 680px;     /* 640〜700で好み調整 */
  margin: 0 auto 12px;  /* ← autoで中央寄せ */
}

/* 念のため：幅計算を安定させる */
#faq .faq-q,
#faq .faq-a{
  box-sizing: border-box;
}


#faq .faq-q{
  list-style: none;
  cursor: pointer;

  /* 行全体をボタン化 */
  width: 100%;
  padding: 16px 16px;
  border-radius: 0;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.12);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #777;

  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

#faq .faq-q::-webkit-details-marker{ display:none; }
#faq .faq-q::marker{ content:""; }

/* 右側を「＋」にして分かりやすく */
#faq .faq-q::after{
  content: "＋";
  flex: 0 0 auto;
  letter-spacing: 0.08em;
  color: #777;

  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}

#faq .faq-item[open] > .faq-q{
  background: rgba(0,0,0,0.01);
  border-color: rgba(0,0,0,0.10);
}

#faq .faq-item[open] > .faq-q::after{
  content: "−";
  color: #777;
}

/* 反応（押せる感） */
@media (hover:hover){
  #faq .faq-q:hover{
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.10);
    transform: translateY(-1px);
  }
}

/* キーボード操作でも分かる */
#faq .faq-q:focus{
  outline: none;
}
#faq .faq-q:focus-visible{
  outline: 2px solid rgba(176, 139, 60, 0.35); /* ゴールド系 */
  outline-offset: 2px;
}

/* 回答部分は“カードの下”として少しインデント */
#faq .faq-a{
  padding: 12px 16px 4px;
  margin: 0 4px;
}

#faq .faq-a p{
  margin: 0 0 10px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

#faq .faq-note{
  line-height: 1.6;
  opacity: 0.9;
}

@media (max-width: 768px){
  #faq .faq-q{
    padding: 14px 14px;
  }
  #faq .faq-q::after{
    padding: 7px 10px;
  }
}


/* =========================
   Final message（手紙風）
========================= */
#final-message.final-message{
  max-width: 760px;
  margin: 20px auto 0;
  padding: 0 16px 90px;
  color: #777;
}



#final-message .letter p{
  margin: 0 0 28px;          /* 余白多め */
  line-height: 2.15;         /* 行間広め */
  letter-spacing: 0.03em;
}

#final-message .letter p:last-child{
  margin-bottom: 0;
}

#final-message .letter-em{
  margin-top: 34px;
  margin-bottom: 34px;
  color: #777;
  letter-spacing: 0.05em;
}

#final-message .letter-sign{
  margin-top: 46px;
  text-align: right;
  color: #777;
  letter-spacing: 0.06em;
}

/* Final message：本文を手紙BOXにする */
#final-message .letter-box{
  background: #f7f7f6;                 /* ほんの少しだけ温かい白 */
  border: 1px solid rgba(0,0,0,0.10);  /* 0.12→0.10 */
  border-radius: 0;                    /* 角あり */
  padding: 36px 40px;                  /* 余白広め */
  margin: 0 0 30px;      /* 22→30 など */
  line-height: 2.15;     /* 2.05→2.15〜2.25 */
  letter-spacing: 0.03em;
}


/* BOX内の本文余白（読みやすく） */
#final-message .letter-box p{
  margin: 0 0 22px;
  line-height: 2.05;
  letter-spacing: 0.03em;
}
#final-message .letter-box p:last-child{
  margin-bottom: 0;
}

/* Final message：見出しも含めて手紙BOXにする */
#final-message .final-box{
  background: #f5f5f5; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 0;
  padding: 48px 40px;
  max-width: 600px;   /* 680〜740で好み */
  margin: 0 auto;
}


/* 見出しの上下余白：BOX内用に調整（でかすぎ防止） */
#final-message h1.sec-title--stack{
  margin: 0 0 34px;
}

/* 見出しのライン：BOX内なので少し短くしても良い */
#final-message .sec-title--stack .sec-title--text::before,
#final-message .sec-title--stack .sec-title--text::after{
  width: 90px;
}

/* 手紙本文 */
#final-message .letter{
  max-width: 100%;
  margin: 0 auto;
}
#final-message .letter p{
  margin: 0 0 22px;
  line-height: 2.05;
  letter-spacing: 0.03em;
}

/* SP */
@media (max-width: 768px){
  #final-message .final-box{
    padding: 28px 18px;
  }
  #final-message h1.sec-title--stack{
    margin: 0 0 24px;
  }
  #final-message .sec-title--stack .sec-title--text::before,
  #final-message .sec-title--stack .sec-title--text::after{
    width: 44px;
  }
}

/* SPは余白だけ少し詰める */
@media (max-width: 768px){
  #final-message .letter-box{
    padding: 24px 18px;
  }
  #final-message .letter-box p{
    margin-bottom: 18px;
    line-height: 2.0;
  }
}

/* SP微調整 */
@media (max-width: 768px){
  #final-message.final-message{
    margin-top: 30px;
    padding-bottom: 70px;
  }
  #final-message .letter p{
    line-height: 2.05;
    margin-bottom: 24px;
  }
}


/* =========================
   UTAGE器(1000) + 読み幅(760) に分離
========================= */
:root{
  --utage-max: 1000px;
  --read-max: 760px;
}

/* 器：最大1000px */
.wrapper{
  max-width: var(--utage-max);
}

/* 読み幅：本文系だけ760に揃える */
.lead,
.note-wrap,
.brand-wrap,
.skin-aging,
#ion-serum,
.evidence-details,
#features.wrapper.features,
#experiment-results,
#monitor,
#howto,
#faq,
.cta,
#final-message{
  max-width: var(--read-max);
  margin-left: auto;
  margin-right: auto;
}

/* ヒーローは1000のまま */
.hero-img{
  max-width: var(--utage-max);
}


/* =========================
   帯タイトル（指定セクションだけ）
========================= */

/* 帯（グレー背景）はセクション幅いっぱい */
.band-title .sec-title--line{
  margin: 120px 0 100px;   /* 好みでここはそのまま */
  padding: 10px 0;
  background: #777;
  border-radius: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  /* 幅だけ整理（ここがポイント） */
  max-width: var(--read-max, 760px);
  margin-left: auto;
  margin-right: auto;
  width: auto;  /* width:100% と左右0は消す */
}



/* 左右の線は不要なので消す */
.band-title .sec-title--line::before,
.band-title .sec-title--line::after{
  content: none;
}

/* 文字（白）は read-max に収めて中央 */
.band-title .sec-title--text{
  color: #fff;
  line-height: 1.3;
  letter-spacing: 0.04em;
  font-weight: 300;   /* 200〜300で調整（まず300推奨） */

  width: min(var(--read-max, 760px), calc(100% - 32px));
  margin: 0 auto;
  text-align: center;
  padding: 0 14px;
}

/* SP調整 */
@media (max-width: 768px){
  .band-title .sec-title--line{
    margin: 70px 0 70px;
    padding: 9px 0;
  }
}

@media (max-width: 768px){
  .band-title .sec-title--text{
    width: fit-content;   /* 背景を文字幅にする */
    margin: 0 auto;       /* それを中央へ */
    text-align: center;
  }
}


/* =========================
   Evidence：SPもPCも「上1 + 下2」＋タイトルは3つの間
========================= */
.evidence-sec{
  --circle-size: 220px; /* 3つとも同じサイズにする */
  --gap-x: 28px;
  --gap-y: 18px;

  --evi-title-shift: 30px; /* ←これを追加 */
}

.evidence-inner{
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  place-items: center;
}

/* 3つの円：サイズ統一 */
.evidence-item{
  width: min(var(--circle-size), 100%);
}
.evidence-item img{
  width: 100%;
  height: auto;
  display: block;
}

/* 配置：上1つ */
.evidence-item--top{
  grid-column: 1 / -1;
  grid-row: 1;
}

/* 真ん中に Evidence */
.evidence-title{
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  text-align: center;
  font-size: 20px;   /* ←追加：PCの大きさ */
  line-height: 1;    /* ←追加：上下のズレ防止 */
  transform: translateY(var(--evi-title-shift)); /* ←これ追加 */
}

/* 下2つ */
.evidence-item--left{  grid-column: 1; grid-row: 3; }
.evidence-item--right{ grid-column: 2; grid-row: 3; }

/* SP：同じ並びのまま、円だけ少し小さく */
@media (max-width: 768px){
  .evidence-sec{
    --circle-size: 170px;
    --gap-x: 18px;
    --gap-y: 14px;

    --evi-title-shift: 12px; /* ←これ追加 */
  }
  .evidence-title{
    font-size: 16px; /* 好みで */
  }
}



.evi-tag{
  display: inline-block;
  padding: 3px 10px;
  margin-right: 10px;

  background: #777;
  color: #fff;

  font-size: 0.85em;  /* 見出しより少し小さく */
  line-height: 1.2;
  letter-spacing: 0.04em;

  border-radius: 0;   /* 直角 */
  vertical-align: middle;
}

.evi-tag{
  min-width: 7.2em;
  text-align: center;
}

/* =========================
   Footer（控えめ・中央寄せ）
========================= */
.site-footer{
  margin-top: 80px;
  padding: 26px 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
  color: #777;
}

.site-footer__inner{
  max-width: var(--read-max, 760px);
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center; /* 全体を中央寄せ */
  gap: 100px;
}

.site-footer__logo img{
  height: 22px;   /* 主張しすぎないサイズ */
  width: auto;
  display: block;
  opacity: 0.85;
}

.site-footer__text{
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* SP：縦並びで中央に */
@media (max-width: 768px){
  .site-footer{
    margin-top: 60px;
    padding: 22px 16px;
  }
  .site-footer__inner{
    flex-direction: column;
    gap: 10px;
  }
  .site-footer__logo img{
    height: 20px;
  }
}

.band-title{
  max-width: var(--read-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}
html, body{
  overflow-x: hidden;
}

/* sec-title--line を読み幅(760)で中央固定 */
.sec-title--line{
  max-width: var(--read-max, 760px);
  margin-left: auto;
  margin-right: auto;
}

/* 帯の中でも sec-title--line は760で中央 */
.band-title .sec-title--line{
  max-width: var(--read-max, 760px);
  margin-left: auto;
  margin-right: auto;
  width: auto; /* width:100% を無効化 */
}

.sec-title--line{
  width: min(var(--read-max, 760px), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 769px){
  .lead-text p{
    font-size: 18px; /* 例：今より少し上げたいなら 16〜17で調整 */
  }
}


/* =========================
   Global type scale（最後に貼る）
========================= */
:root{
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h3: 22px;
  --fs-h4: 20px;
  --fs-p : 17px; /* ←PCの本文（p/li）を大きくする */
}

@media (max-width: 768px){
  :root{
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 21px;
    --fs-h4: 20px;
    --fs-p : 16px; /* ←SPは16推奨。大きくしたいなら17 */
  }
}

h1{ font-size: var(--fs-h1) !important; }
h2{ font-size: var(--fs-h2) !important; }
h3{ font-size: var(--fs-h3) !important; }
h4{ font-size: var(--fs-h4) !important; }
p, li{ font-size: var(--fs-p) !important; }

/* brand-em だけはグローバル p サイズより大きくする */
p.brand-em{
  font-size: 24px !important;  /* 22〜26で調整 */
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: #222;
  text-decoration: none;
  display: inline-block;
}

@media (max-width: 768px){
  p.brand-em{
    font-size: 24px !important; /* SPも同じ。さらに上げたいなら 25〜26 */
  }
}



.experiment-note,
.mon__disclaimer,
.cta-note{
  max-width: 680px;
  margin: 18px auto 0;
  color: #777;
  font-size: 13px !important;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.cta-note{
  text-align: center;
}


/* Inline annotations */
.note-ref{
  font-size: 0.62em;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.08em;
  letter-spacing: 0.02em;
}

/* Restore original PC acne blur sizing */
@media (min-width: 769px){
  #monitor .mon__card--acne .mon__blur{
    width: 50% !important;
    margin: 0 auto !important;
  }
}

/* Opened monitor photos: large vertical comparison */
#monitor .mon__ba,
#monitor .mon__grid4{
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#monitor .mon__ba .mon__fig,
#monitor .mon__grid4 .mon__fig{
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px !important;
}

#monitor .mon__ba .mon__fig img,
#monitor .mon__grid4 .mon__fig img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media (min-width: 769px){
  #monitor .mon__ba,
  #monitor .mon__grid4{
    gap: 20px !important;
  }
}

/* Acne opened photos should match the blur image width */
@media (min-width: 769px){
  #monitor .mon__card--acne{
    width: calc((100% - var(--mon-gap)) / 2) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #monitor .mon__card--acne .mon__acne-inner{
    max-width: 100% !important;
  }

  #monitor .mon__card--acne .mon__blur{
    width: 100% !important;
  }

  #monitor .mon__card--acne .mon__grid4{
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Acne opened photos should match the blur image width */
@media (min-width: 769px){
  #monitor .mon__card--acne{
    width: calc((100% - var(--mon-gap)) / 2) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #monitor .mon__card--acne .mon__acne-inner{
    max-width: 100% !important;
  }

  #monitor .mon__card--acne .mon__blur{
    width: 100% !important;
  }

  #monitor .mon__card--acne .mon__grid4{
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Opened monitor photos: large vertical comparison */
#monitor .mon__ba,
#monitor .mon__grid4{
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#monitor .mon__ba .mon__fig,
#monitor .mon__grid4 .mon__fig{
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px !important;
}

#monitor .mon__ba .mon__fig img,
#monitor .mon__grid4 .mon__fig img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media (min-width: 769px){
  #monitor .mon__ba,
  #monitor .mon__grid4{
    gap: 20px !important;
  }
}

/* Opened monitor photos: large vertical comparison */
#monitor .mon__ba,
#monitor .mon__grid4{
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#monitor .mon__ba .mon__fig,
#monitor .mon__grid4 .mon__fig{
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px !important;
}

#monitor .mon__ba .mon__fig img,
#monitor .mon__grid4 .mon__fig img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media (min-width: 769px){
  #monitor .mon__ba,
  #monitor .mon__grid4{
    gap: 20px !important;
  }
}

.inline-notes{
  margin-top: 4px;
  color: #777;
}

.inline-notes p{
  margin: 0 0 2px;
  font-size: 12px !important;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: #777;
}

@media (max-width: 768px){
  .inline-notes p{
    font-size: 11px !important;
  }
}

/* FV mobile-first catch adjustment */
@media (max-width: 768px){
  .fv-new__text{
    margin-top: 14px;
    padding: 0 18px;
    text-align: center;
  }

  .fv-new__catch{
    max-width: 330px;
    margin: 0 auto;
  }

  .fv-new__catchBig{
    font-size: 24px;
    letter-spacing: 0.08em;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .fv-new__catchRest{
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: 0.04em;
  }
}

/* FV mobile one-line main catch */
@media (max-width: 768px){
  .fv-new__catchBig{
    font-size: 21px;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
}

/* Responsive FV final override */
.site-header{
  padding-top: clamp(10px, 2vw, 20px);
}

.header-inner{
  padding: clamp(10px, 2vw, 14px) 16px;
}

.site-logo img{
  height: clamp(28px, 6vw, 60px);
}

.fv-new__media picture,
.fv-new__media picture img{
  display: block;
  width: 100%;
}

.fv-new__img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.fv-new__catchBig{
  text-wrap: balance;
}

@media (max-width: 768px){
  .site-header{
    padding-top: 8px;
  }

  .header-inner{
    padding: 10px 14px;
  }

  .site-logo img{
    height: 28px;
  }

  .fv-new__nameImg{
    display: none;
  }

  .fv-new__text{
    margin-top: 12px;
    padding: 0 14px;
    text-align: center;
  }

  .fv-new__catch{
    width: 100%;
    max-width: none;
    margin: 0 auto;
    line-height: 1.7;
  }

  .fv-new__catchBig{
    font-size: clamp(17px, 4.8vw, 19px);
    line-height: 1.45;
    letter-spacing: 0.03em;
    white-space: nowrap;
    margin-bottom: 8px;
  }

  .fv-new__catchRest{
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.75;
    letter-spacing: 0.03em;
  }
}

@media (min-width: 769px) and (max-width: 900px){
  .site-logo img{
    height: 42px;
  }

  .fv-new__catchBig{
    font-size: 28px;
    letter-spacing: 0.08em;
  }

  .fv-new__catchRest{
    font-size: 17px;
  }
}

.note-box__notes{
  margin-top: 8px;
  padding-left: 16px;
}

.brand-box{
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 28px 26px;
}

.brand-box .brand-em{
  margin-top: 6px;
  margin-bottom: 22px;
}

.brand-box__notes{
  margin-top: 8px;
}

@media (max-width: 768px){
  .brand-box{
    padding: 22px 18px;
  }
}

/* Luxury aligned philosophy boxes */
#retourc .note-wrap,
#retourc .brand-wrap{
  max-width: var(--read-max, 760px);
  padding-left: 16px;
  padding-right: 16px;
}

#retourc .note-box,
#retourc .brand-box{
  width: 100%;
  max-width: 100%;
}

#retourc .brand-text{
  max-width: 100%;
}

#retourc .brand-box{
  padding: 34px 34px;
}

@media (max-width: 768px){
  #retourc .brand-box{
    padding: 24px 20px;
  }
}

.skin-aging__notes{
  max-width: 640px;
  margin: -8px auto 26px;
}

/* Annotation spacing refinement */
.inline-notes{
  margin-top: 10px;
}

.inline-notes p{
  margin: 0 0 5px;
  line-height: 1.75;
}

.skin-aging__notes{
  margin-top: 10px;
  margin-bottom: 30px;
}

.ion-serum__notes{
  max-width: 640px;
  margin: 10px auto 0;
}


/* Unified annotation spacing */
.inline-notes{
  margin-top: 10px;
}

.inline-notes p{
  margin: 0 0 5px;
  line-height: 1.75;
}

.ion-serum__notes,
.skin-aging__notes{
  margin-top: 10px;
}

/* Ion serum notes match shared annotations */
#ion-serum .inline-notes{
  max-width: 640px;
  margin: 10px auto 0;
}

#ion-serum .inline-notes p{
  max-width: none;
  margin: 0 0 5px;
  font-size: 12px !important;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: #777;
}

@media (max-width: 768px){
  #ion-serum .inline-notes p{
    font-size: 11px !important;
  }
}

.evidence-notes{
  max-width: 640px;
  margin: 10px auto 0;
}

.evidence-details .evidence-notes p{
  margin: 0 0 5px;
  font-size: 12px !important;
  line-height: 1.75;
}

.evidence-vitamin-box{
  max-width: 640px;
  margin: 22px auto 26px;
  padding: 30px 34px;
  border: 1px solid rgba(0,0,0,0.35);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

.evidence-callout{
  margin: 0 0 26px !important;
  text-align: center;
  font-size: 28px !important;
  font-weight: 700;
  line-height: 1.65 !important;
  letter-spacing: 0.06em;
  color: #333;
}

.evidence-box-title{
  margin: 0 0 14px !important;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.04em;
}

.evidence-list--vitamin{
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px){
  .evidence-vitamin-box{
    padding: 22px 18px;
  }

  .evidence-callout{
    font-size: 23px !important;
    line-height: 1.55 !important;
  }
}

.evidence-callout--standalone{
  max-width: 640px;
  margin: 30px auto 22px !important;
}


/* Evidence heading compact horizontal */
.evidence-h{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.evidence-ttl{
  display: inline-block;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.evidence-ttl .note-ref{
  white-space: nowrap;
}

@media (max-width: 768px){
  .evidence-h{
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .evi-tag{
    flex: 0 0 auto;
    margin-right: 0;
  }

  .evidence-ttl{
    font-size: 0.92em;
    line-height: 1.45;
    letter-spacing: 0;
  }
}

/* Evidence 3 one-line compact title */
.evidence-ttl--compact{
  white-space: nowrap;
  font-size: clamp(16px, 2.55vw, 22px);
  letter-spacing: -0.02em;
  transform: scaleX(0.92);
  transform-origin: left center;
}

.evidence-ttl--compact .note-ref{
  font-size: 0.55em;
  margin-left: 0.02em;
}

@media (max-width: 430px){
  .evidence-ttl--compact{
    font-size: clamp(14px, 3.65vw, 16px);
    letter-spacing: -0.04em;
    transform: scaleX(0.86);
  }
}

/* Evidence 3 mobile matches evidence 2 */
@media (max-width: 768px){
  .evidence-ttl--compact{
    white-space: normal;
    font-size: 1em;
    letter-spacing: 0.01em;
    transform: none;
    line-height: 1.45;
  }

  .evidence-ttl--compact .note-ref{
    font-size: 0.62em;
    margin-left: 0.08em;
  }
}

.feature-notes{
  margin-top: 10px;
}

#features .feature-notes p{
  margin: 0 0 5px;
  font-size: 12px !important;
  line-height: 1.75;
  letter-spacing: 0.03em;
}

@media (max-width: 768px){
  #features .feature-notes p{
    font-size: 11px !important;
  }
}

/* Feature 01 luxury layout */
#features .feature-card--split .feature-split{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.75fr);
  gap: 46px;
  align-items: start;
  max-width: 860px;
  margin: 0 auto;
}

#features .feature-card--split .feature-split__text{
  max-width: 100%;
}

#features .feature-card--split .feature-split__text p{
  max-width: none;
  line-height: 1.95;
  margin-bottom: 18px;
}

#features .feature-card--split .feature-split__media{
  margin: 8px 0 0;
  align-self: start;
}

#features .feature-card--split .feature-split__media img{
  width: 100%;
  min-height: 240px;
  object-fit: cover;
}

#features .feature-card--split .feature-notes{
  margin-top: 12px;
}

@media (max-width: 768px){
  #features .feature-card--split .feature-split{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #features .feature-card--split .feature-split__media{
    order: -1;
    margin: 0 auto 2px;
    width: min(100%, 360px);
  }

  #features .feature-card--split .feature-split__media img{
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  #features .feature-card--split .feature-split__text p{
    line-height: 1.9;
    margin-bottom: 16px;
  }
}

/* Feature notes compact like annotations */
#features .feature-notes{
  margin-top: 10px;
}

#features .feature-notes p{
  max-width: none;
  margin: 0 0 5px !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.03em;
  color: #777;
}

@media (max-width: 768px){
  #features .feature-notes p{
    font-size: 11px !important;
  }
}
/* Test results table notes */
#experiment-results .experiment-table .table-subnote{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #888;
}

#experiment-results .experiment-table .note-ref{
  font-size: 0.72em;
  margin-left: 0.08em;
}

@media (max-width: 768px){
  #experiment-results .experiment-table .table-subnote{
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.4;
  }
}
/* Test results layout refinement */
#experiment-results .experiment-lead{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

#experiment-results .experiment-table-wrap{
  max-width: 760px;
}

#experiment-results .experiment-table th:nth-child(1),
#experiment-results .experiment-table td:nth-child(1){
  width: 38%;
}

#experiment-results .experiment-table th:nth-child(2),
#experiment-results .experiment-table td:nth-child(2),
#experiment-results .experiment-table th:nth-child(3),
#experiment-results .experiment-table td:nth-child(3){
  width: 31%;
}

#experiment-results .experiment-table .th-main{
  display: block;
  white-space: nowrap;
}

#experiment-results .experiment-table th small{
  display: block;
  margin-top: 2px;
}

@media (max-width: 768px){
  #experiment-results .experiment-lead{
    max-width: 100%;
    text-align: left;
  }

  #experiment-results .experiment-table .th-main{
    white-space: normal;
  }
}
/* Monitor note readable paragraph flow */
#monitor .mon__note p{
  margin: 0 0 4px;
}

#monitor .mon__note p:last-child{
  margin-bottom: 0;
}
/* Monitor note single paragraph */
#monitor .mon__note{
  line-height: 1.9;
}
/* Purchase note centered */
#purchase .cta-note{
  max-width: none;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 768px){
  #purchase .cta-note{
    white-space: normal;
  }
}
/* Single purchase CTA layout */
#purchase.cta--compare{
  display: block;
}

#purchase .cta-variant{
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
}

#purchase .cta-note{
  margin-top: 14px;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.6;
}
/* Purchase CTA size refinement */
#purchase .price-card,
#purchase .cta-btn{
  width: 100%;
}

#purchase .price-card__main{
  font-size: 15px;
  letter-spacing: 0.12em;
}

#purchase .cta-btn{
  min-height: 58px;
  font-size: 15px;
}

@media (max-width: 768px){
  #purchase .cta-variant{
    max-width: min(100%, 340px);
  }

  #purchase .price-card__main,
  #purchase .cta-btn{
    font-size: 14px;
  }
}
/* Purchase price box spacing */
#purchase .price-card--normal{
  padding-top: 18px;
  padding-bottom: 18px;
}

#purchase .price-card__main{
  line-height: 1.6;
}

@media (max-width: 768px){
  #purchase .price-card--normal{
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
/* Purchase price box narrower than CTA */
#purchase .price-card--normal{
  width: 82%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px){
  #purchase .price-card--normal{
    width: 88%;
  }
}
/* Purchase note fixed two-line center */
#purchase .cta-note{
  text-align: center;
  line-height: 1.8;
}
/* FAQ answer bullets */
#faq .faq-bullets{
  margin: 24px 0 28px 1.3em;
  padding: 0;
}

#faq .faq-bullets li{
  list-style: disc;
  margin: 0 0 6px;
  padding-left: 0.1em;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #777;
}

#faq .faq-bullets li::marker{
  color: #777;
  font-size: 0.75em;
}
/* FAQ footnote size */
#faq .faq-note{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #888;
}

@media (max-width: 768px){
  #faq .faq-note{
    font-size: 11px;
  }
}
/* FAQ footnote force small */
#faq .faq-a p.faq-note{
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.03em !important;
  color: #888 !important;
}
/* Final message footnote */
#final-message .letter-note{
  margin-top: 22px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #888;
}

@media (max-width: 768px){
  #final-message .letter-note{
    font-size: 11px;
  }
}
/* Final message emphasis phrase */
#final-message .letter-em{
  font-size: 20px;
  line-height: 1.85;
  letter-spacing: 0.08em;
  text-align: center;
}

@media (max-width: 768px){
  #final-message .letter-em{
    font-size: 18px;
    line-height: 1.8;
  }
}
/* Final message emphasis and note refinement */
#final-message .letter-em{
  font-size: 19px !important;
  line-height: 1.9 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

#final-message .letter-note{
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.03em !important;
  color: #888 !important;
}

@media (max-width: 768px){
  #final-message .letter-em{
    font-size: 17px !important;
  }
}
/* Unified footnote styling */
.note-ref,
#experiment-results .experiment-table .note-ref,
.evidence-ttl--compact .note-ref{
  font-size: 0.62em !important;
  line-height: 1 !important;
  vertical-align: super !important;
  margin-left: 0.08em !important;
}

.inline-notes p,
.note-box__notes p,
.brand-box__notes p,
.skin-aging__notes p,
.ion-serum__notes p,
.evidence-details .evidence-notes p,
#features .feature-notes p,
#faq .faq-a p.faq-note,
#final-message .letter-note,
#experiment-results .experiment-table .table-subnote{
  font-size: 11px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.03em !important;
  color: #888 !important;
  font-weight: 400 !important;
}

.inline-notes p,
.note-box__notes p,
.brand-box__notes p,
.skin-aging__notes p,
.ion-serum__notes p,
.evidence-details .evidence-notes p,
#features .feature-notes p,
#faq .faq-a p.faq-note,
#final-message .letter-note{
  margin-bottom: 4px !important;
}

#experiment-results .experiment-table .table-subnote{
  margin-top: 3px !important;
  margin-bottom: 0 !important;
}
/* PC body text readability */
@media (min-width: 769px){
  .lead-text > p,
  .note-list li,
  .brand-box > p,
  .skin-aging > p,
  #ion-serum .wrapper > p,
  .evidence-details .evidence-block > p:not(.evidence-callout),
  .evidence-list li,
  #features .feature-body > p,
  #features .feature-split__text > p,
  #features .feature-split__text .feature-body > p,
  #experiment-results .experiment-lead,
  #monitor .mon__note,
  #monitor .mon__desc,
  #howto .howto-step-text,
  #faq .faq-a > p:not(.faq-note),
  #faq .faq-bullets li,
  #final-message .letter > p:not(.letter-note):not(.letter-sign){
    font-size: 18px !important;
    line-height: 2.05 !important;
  }

  .fv-new__catchRest{
    font-size: 18px !important;
    line-height: 2.05 !important;
  }
}
/* PC/SP separated FV copy */
.fv-new__pcCopy{
  display: none;
}

@media (min-width: 769px){
  .fv-new__nameImg{
    display: none !important;
  }

  .fv-new__pcCopy{
    position: absolute;
    right: 22px;
    bottom: 28px;
    display: block;
    text-align: right;
    color: #555;
    z-index: 3;
    pointer-events: none;
  }

  .fv-new__pcCopy span{
    display: block;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.06em;
    font-weight: 400;
  }

  .fv-new__pcCopy span:last-child{
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 768px){
  .fv-new__pcCopy{
    display: none !important;
  }
}
/* PC FV premium copy refinement */
@media (min-width: 769px){
  .fv-new__pcCopy{
    right: clamp(76px, 8vw, 140px) !important;
    bottom: 44px !important;
    width: 330px;
    text-align: left !important;
    color: #333;
  }

  .fv-new__pcCopy span{
    font-size: 27px !important;
    line-height: 1.62 !important;
    letter-spacing: 0.08em !important;
    font-weight: 300 !important;
  }

  .fv-new__pcCopy span:last-child{
    margin-top: 12px !important;
    font-size: 23px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    color: #4a4a4a;
  }
}
/* PC FV client text adjustment */
@media (min-width: 769px){
  .fv-new__pcCopy{
    right: clamp(110px, 10vw, 190px) !important;
    bottom: 46px !important;
    width: 360px !important;
    text-align: left !important;
  }

  .fv-new__pcCopy span{
    font-size: 29px !important;
    line-height: 1.58 !important;
    letter-spacing: 0.075em !important;
    font-weight: 300 !important;
  }

  .fv-new__pcCopy span:first-child{
    font-size: 31px !important;
    font-weight: 400 !important;
    color: #2f2f2f !important;
  }

  .fv-new__pcCopy span:last-child{
    margin-top: 10px !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
  }
}
/* Keep first FV copy line on one line */
@media (min-width: 769px){
  .fv-new__pcCopy{
    width: 430px !important;
  }

  .fv-new__pcCopy span:first-child{
    white-space: nowrap !important;
  }
}
/* PC targeted readability adjustment */
@media (min-width: 769px){
  .brand-box > p,
  .brand-text p,
  .evidence-details .evidence-block > p:not(.evidence-callout),
  .evidence-list li,
  #faq .faq-a > p:not(.faq-note),
  #faq .faq-bullets li,
  #final-message .letter > p:not(.letter-note):not(.letter-sign){
    font-size: 19px !important;
    line-height: 1.95 !important;
    letter-spacing: 0.03em;
  }

  #faq .faq-q{
    font-size: 18px !important;
    line-height: 1.8 !important;
  }

  .evidence-details .evidence-h,
  #faq .faq-list,
  #final-message .letter{
    letter-spacing: 0.03em;
  }
}
/* FV image to main catch spacing */
.fv-new__text{
  margin-top: 54px !important;
}

@media (max-width: 768px){
  .fv-new__text{
    margin-top: 46px !important;
  }
}
/* Heading to body spacing adjustment */
.skin-aging h2{
  margin-bottom: 34px !important;
}

.skin-aging h3{
  margin-bottom: 42px !important;
}

.evidence-sec{
  margin-bottom: 34px !important;
}

.evidence-details{
  margin-top: 92px !important;
}

.evidence-h{
  margin-bottom: 42px !important;
}

@media (max-width: 768px){
  .skin-aging h2{
    margin-bottom: 28px !important;
  }

  .skin-aging h3{
    margin-bottom: 34px !important;
  }

  .evidence-sec{
    margin-bottom: 28px !important;
  }

  .evidence-details{
    margin-top: 70px !important;
  }

  .evidence-h{
    margin-bottom: 34px !important;
  }
}
/* Unified footnote line-height adjustment */
.inline-notes p,
.note-box__notes p,
.brand-box__notes p,
.skin-aging__notes p,
.ion-serum__notes p,
.evidence-details .evidence-notes p,
#features .feature-notes p,
#faq .faq-a p.faq-note,
#final-message .letter-note,
#experiment-results .experiment-table .table-subnote{
  line-height: 1.8 !important;
}
/* Brand box footnote size fix */
.brand-box .inline-notes p,
.brand-box__notes p{
  font-size: 11px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.03em !important;
  color: #888 !important;
  font-weight: 400 !important;
}
/* Evidence 3 note, paper button, callout order spacing */
.evidence-btns--ace{
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}

.evidence-callout--ace{
  margin-top: 64px !important;
  margin-bottom: 26px !important;
}

@media (max-width: 768px){
  .evidence-btns--ace{
    margin-top: 20px !important;
  }

  .evidence-callout--ace{
    margin-top: 52px !important;
  }
}
/* Monitor before/after larger display */
#monitor{
  max-width: min(1120px, 100%) !important;
}

#monitor .mon__grid2{
  gap: 28px !important;
}

#monitor .mon__card{
  padding: 20px !important;
}

#monitor .mon__open{
  padding-top: 18px !important;
}

#monitor .mon__ba,
#monitor .mon__grid4{
  gap: 18px !important;
}

#monitor .mon__fig{
  padding: 6px !important;
}

#monitor .mon__fig img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

#monitor .mon__card--acne .mon__blur{
  width: min(100%, 700px) !important;
}

#monitor .mon__card--acne .mon__acne-inner{
  max-width: 980px !important;
}

@media (min-width: 769px){
  #monitor .mon__card--acne{
    margin-top: 34px;
  }
}

@media (max-width: 768px){
  #monitor{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #monitor .mon__card{
    padding: 12px !important;
  }

  #monitor .mon__ba,
  #monitor .mon__grid4{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #monitor .mon__fig{
    padding: 4px !important;
  }
}
/* Monitor acne card width aligned with upper cards */
@media (min-width: 769px){
  #monitor .mon__card--acne{
    width: calc((100% - 28px) / 2);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  #monitor .mon__card--acne .mon__acne-inner{
    max-width: 100% !important;
  }

  #monitor .mon__card--acne .mon__blur{
    width: 100% !important;
  }
}
/* Monitor opened before/after photos match blur width */
#monitor .mon__ba{
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#monitor .mon__ba .mon__fig{
  width: 100% !important;
  padding: 6px !important;
}

#monitor .mon__ba .mon__fig img{
  width: 100% !important;
  height: auto !important;
}

@media (min-width: 769px){
  #monitor .mon__ba{
    gap: 20px !important;
  }
}
/* Revert monitor section width expansion */
#monitor{
  max-width: 760px !important;
}

@media (min-width: 769px){
  #monitor .mon__grid2{
    gap: var(--mon-gap) !important;
  }

  #monitor .mon__card{
    padding: 18px !important;
  }

  #monitor .mon__card--acne{
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #monitor .mon__card--acne .mon__acne-inner{
    max-width: 700px !important;
  }
}

/* Restore original PC acne blur sizing */
@media (min-width: 769px){
  #monitor .mon__card--acne .mon__blur{
    width: 50% !important;
    margin: 0 auto !important;
  }
}

/* Opened monitor photos: large vertical comparison */
#monitor .mon__ba,
#monitor .mon__grid4{
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#monitor .mon__ba .mon__fig,
#monitor .mon__grid4 .mon__fig{
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px !important;
}

#monitor .mon__ba .mon__fig img,
#monitor .mon__grid4 .mon__fig img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media (min-width: 769px){
  #monitor .mon__ba,
  #monitor .mon__grid4{
    gap: 20px !important;
  }
}

/* Acne opened photos should match the blur image width */
@media (min-width: 769px){
  #monitor .mon__card--acne .mon__grid4{
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Final acne card alignment: match upper card width */
@media (min-width: 769px){
  #monitor .mon__card--acne{
    width: calc((100% - var(--mon-gap)) / 2) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #monitor .mon__card--acne .mon__acne-inner,
  #monitor .mon__card--acne .mon__blur,
  #monitor .mon__card--acne .mon__grid4{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Final spacing refinement */
.evidence-sec{
  margin-bottom: 72px !important;
}

.evidence-details{
  margin-top: 104px !important;
}

.evidence-img--small{
  margin-bottom: 52px !important;
}

.evidence-list--vitamin{
  margin-top: 28px !important;
  margin-bottom: 32px !important;
}

#monitor .mon__grid2{
  margin-bottom: 36px !important;
}

#monitor .mon__card{
  margin-bottom: 0 !important;
}

#monitor .mon__card--acne{
  margin-top: 36px !important;
}

#monitor .mon__open{
  padding-bottom: 26px !important;
}

#monitor .mon__case[open]{
  display: block;
  margin-bottom: 26px !important;
}

#faq .faq-item{
  margin-bottom: 20px !important;
}

@media (max-width: 768px){
  .evidence-sec{
    margin-bottom: 56px !important;
  }

  .evidence-details{
    margin-top: 82px !important;
  }

  .evidence-img--small{
    margin-bottom: 42px !important;
  }

  .evidence-list--vitamin{
    margin-top: 24px !important;
    margin-bottom: 28px !important;
  }

  #monitor .mon__grid2{
    margin-bottom: 32px !important;
  }

  #monitor .mon__card--acne{
    margin-top: 32px !important;
  }

  #monitor .mon__open{
    padding-bottom: 22px !important;
  }

  #monitor .mon__case[open]{
    margin-bottom: 22px !important;
  }

  #faq .faq-item{
    margin-bottom: 18px !important;
  }
}

/* HOW TO USE face illustration */
.howto-face-img{
  display: block;
  width: 100%;
  max-width: 1120px;
  margin: 28px auto 64px;
}

.howto-face-img img{
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px){
  .howto-face-img{
    max-width: 100%;
    margin: 24px auto 52px;
  }
}