@charset "UTF-8";

/* ============================================================
   26autumn-stepup-cp ページ専用スタイル
   本ページはPC/SPワンソースレスポンシブのため、
   全セクションのCSSをこのページ内にインラインで記述しています。
   共通コンポーネント（js-toggle / js-toggleBlock / mod-modal-btn /
   data-view="pc","sp"）はサイト共通CSS・JS（rn-style.css / rn-import.js /
   rn-index.js）に依存し、本ページ独自のJSは実装していません。
============================================================ */

/* ============================== section_01.css ============================== */
/* ================================================================
   26autumn-stepup-cp / section_01.css
   スコープ: すべてのクラスに "cp26as-" プレフィックス
   ブレークポイント: 767px以下 = SP
================================================================= */
::selection {
  color: #222;
  font-family: "Noto Sans JP",sans-serif;
}
.cp26as-mv,
.cp26as-recommend,
.cp26as-about,
.cp26as-divider {
  box-sizing: border-box;
}
.cp26as-mv *,
.cp26as-recommend *,
.cp26as-about *,
.cp26as-divider * {
  box-sizing: border-box;
}
.pt50 {
  padding-top: 50px;
}
main a {
  display: inline-block;
  transition: transform 0.3s ease;
}
main a:hover {
  transform: scale(1.05);
}
/* ---------------------------------------------------------------
   1. メインビジュアル
--------------------------------------------------------------- */
.cp26as-mv {
  width: 100%;
  /*background: #f7f7f9;*/
  position: relative;
  z-index: 1;
}

.cp26as-mv__link {
  display: block;
  width: 100%;
  line-height: 0;
}

/* メインビジュアルは cp26as-mv__img だけ幅100%表示（他セクションの max-width:1440px は適用しない）。
   写真とキャンペーン訴求バーは元々1440x620(PC)/375x581.25(SP)のFigmaキャンバス上で重なる配置のため、
   stage要素をそのキャンバス比率の箱として確保し、写真・キャンペーンとも絶対配置で元の座標を再現する。 */
.cp26as-mv__stage {
  /* display は共通CSSの [data-view*=pc]/[data-view*=sp] 切り替えに委ねる */
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cp26as-mv__stage[data-view~="pc"] {
  aspect-ratio: 1440 / 505;
}

.cp26as-mv__stage[data-view="sp"] {
  aspect-ratio: 375 / 590;
}

.cp26as-mv__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.cp26as-mv__img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* キャンペーン訴求（日付〜価格〜申し込みボタン）: 背景写真の上に position で重ねて表示。
   cp26as-mvの直下（cp26as-mv__stageの外）に置き、bottomのマイナス値でstageの外側まで表示できるようにする */
.cp26as-mv__campaign {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  width: 95%;
  height: auto;
  z-index: 9999;
}

.cp26as-mv__campaign:hover {
  transform: translateX(-50%) scale(1.05);
}

.cp26as-mv__campaign .cp26as-mv__img {
  position: static;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .cp26as-mv__campaign {
    bottom: 10px;
  }
}

/* ---------------------------------------------------------------
   2. こんな方におすすめ
--------------------------------------------------------------- */
.cp26as-recommend {
  background-image: url(/mens/campaign/26autumn-stepup-cp/assets/section_01_mask_pc.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 18vh 20px 42px;
  text-align: center;
  position: relative;
}

.v-shape-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #123676;
  /* 両端・頂点とも下端からの固定pxで指定し、親要素（アコーディオン開閉等）の高さ変化でV字の角度が変わらないようにする */
  clip-path: polygon(0 calc(100% - 120px), 50% calc(100% - 50px), 100% calc(100% - 120px), 100% 100%, 0 100%);
}

.v-shape-background-w {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  clip-path: polygon(0 calc(100% - 120px), 50% calc(100% - 50px), 100% calc(100% - 120px), 100% 100%, 0 100%);
}

.cp26as-recommend__title {
  margin: 0 0 30px;
  color: #fff;
  font-family: "A-OTF UD Shin Go Pro", "A-OTF Shin Go Pro", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.cp26as-recommend__title-main {
  font-size: 60px;
}

.cp26as-recommend__title-sub {
  font-size: 42px;
}

.cp26as-recommend__grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  /* gap: 40px; */
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.cp26as-recommend__item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex: 1 1 393px; */
  /* min-height: 150px; */
  padding: 0;
}

.cp26as-recommend__icon {
  flex: 0 0 393px;
  width: 393px;
  height: 170px;
}

.cp26as-recommend__text {
  margin: 0;
  color: #001d4d;
  font-family: "A-OTF UD Shin Go Pro", "A-OTF Shin Go Pro", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.6;
  text-align: left;
}

.cp26as-recommend__kw {
  color: #e2231a;
  font-size: 32px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .cp26as-recommend {
    top: -13.9vh;
    background-image: url(/mens/campaign/26autumn-stepup-cp/assets/section_01_mask_sp.webp);
    padding: 100px 20px 36px;
  }

  .cp26as-recommend__title {
    margin-bottom: 10px;
  }

  .cp26as-recommend__title-main img {
    width: 90%;
  }

  .cp26as-recommend__title-sub {
    font-size: 32px;
  }

  .cp26as-recommend__grid {
    flex-direction: column;
    gap: 0;
    max-width: 100%;
  }

  .cp26as-recommend__item {
    flex: none;
    width: 100%;
    /*min-height: 124px;
    padding: 16px;*/
    justify-content: flex-start;
  }

  .cp26as-recommend__text {
    font-size: 18px;
  }

  .cp26as-recommend__kw {
    font-size: 26px;
  }

  .cp26as-recommend__br {
    display: none;
  }

  .cp26as-recommend__icon {
    flex: 1;
    width: 100%;
    height: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-recommend {
    top: -4.4vh;
  }
  .cp26as-recommend__title-main img {
    width: 440px;
  }
  .cp26as-recommend__grid {
    flex-direction: row;
    gap: 16px;
    max-width: 1024px;
  }
  .cp26as-recommend__item {
    flex: 1 1 0;
    width: auto;
    justify-content: center;
  }
  .cp26as-recommend__icon {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
  }
}
/* ---------------------------------------------------------------
   3. 増毛とは？（アコーディオン / デフォルト閉）
--------------------------------------------------------------- */
.cp26as-about {
  padding: 50px 10px 100px;
  margin-bottom: 34px;
  /* background: #f7f7f9; */
}

.cp26as-about__card {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.cp26as-about__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 30px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.cp26as-about__title {
  margin: 0;
  color: #001f52;
  font-family: "Noto Sans JP",sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
}

.cp26as-about__icon {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #001f52;
}

.cp26as-about__icon::before,
.cp26as-about__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cp26as-about__icon::before {
  width: 17px;
  height: 3px;
}

.cp26as-about__icon::after {
  width: 3px;
  height: 17px;
}

.cp26as-about__toggle.is-active .cp26as-about__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.cp26as-about__body {
  width: 100%;
}

.cp26as-about__body-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 24px 24px;
}

.cp26as-about__media {
  flex: 0 0 400px;
  width: 400px;
  line-height: 0;
}

.cp26as-about__media .youtube {
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
  position: relative;
  overflow: hidden;
  max-width: 100%;
  object-fit: cover;
}
.cp26as-about__media .youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  
.cp26as-about__desc {
  flex: 1 1 auto;
  text-align: left;
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP",sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
}

.cp26as-about__kw {
  color: #001f52;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  border-bottom: 2px solid #001f52;
}

@media (max-width: 767px) {
  .cp26as-about {
    padding: 30px 10px 80px;
  }

  .cp26as-about__toggle {
    padding: 20px 16px;
  }

  .cp26as-about__title {
    font-size: 28px;
  }

  .cp26as-about__body-inner {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px 20px;
  }

  .cp26as-about__media {
    width: 100%;
    max-width: 295px;
    flex: 0 0 150px;
  }

  .cp26as-about__desc {
    font-size: 20px;
    line-height: 1.7;
  }
  .v-shape-background {
    bottom: -55px;
    clip-path: polygon(0 calc(100% - 175px), 50% calc(100% - 140px), 100% calc(100% - 175px), 100% 100%, 0 100%);
  }
  .v-shape-background-w {
    bottom: -92px;
    clip-path: polygon(0 calc(100% - 175px), 50% calc(100% - 140px), 100% calc(100% - 175px), 100% 100%, 0 100%);
  }
  .cp26as-about__kw {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------
   4. 装飾ディバイダー（マスク背景）
--------------------------------------------------------------- */
.cp26as-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  /* マスク画像下部の紺色部分は画像に含めず、背景色で表現 */
  background-color: #123676;
}

.cp26as-divider__img {
  /* display は共通CSSの [data-view*=pc]/[data-view*=sp] 切り替えに委ねる */
  width: 100%;
  height: auto;
}

.cp26as-divider__img[data-view="pc"] {
  aspect-ratio: 1440 / 929;
}

.cp26as-divider__img[data-view="sp"] {
  aspect-ratio: 375 / 1179;
}


/* ============================== section_02.css ============================== */
/* ============================================================
   section_02.css
   「髪と頭皮の悩み」共感パート + 「ステップアップ増毛でWで実感」訴求パート
   全クラスに cp26as- プレフィックス付与
============================================================ */

.cp26as-root {
  position: relative;
  margin-top: -1px;
  background: #123676;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.cp26as-root * { box-sizing: border-box; }
.cp26as-root ul { list-style: none; margin: 0; padding: 0; }
.cp26as-root p { margin: 0; }
.cp26as-root img { display: block; }

@media (max-width: 767px) {
  .cp26as-root {
    top: -22.6vh;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-root {
    top: -4.6vh;
  }
}

/* -------------------------------------------------------------
   悩み共感セクション
------------------------------------------------------------- */
.cp26as-worries {
  position: relative;
  background: var(--cp26as-navy);
  padding: 1.5vh 20px 0;
  overflow: hidden;
}

.cp26as-worries__inner + .cp26as-worries__inner { margin-top: 0; }

.cp26as-worries__head-heading {
  margin: 0;
}

.cp26as-worries__head-img,
.cp26as-worries__board-img {
  display: block;
  /* width: 100%; */
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
}
.cp26as-worries__board-img { margin-top: 34px; width: 100%;}

.cp26as-marketing__inner-img {
  /* display は共通CSSの [data-view*=pc]/[data-view*=sp] 切り替えに委ねる（ここで上書きしない） */
  /*width: 100%;*/
  height: auto;
  margin: 0 auto;
}

.cp26as-worries__head {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.cp26as-worries__kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.cp26as-worries__slash {
  display: inline-block;
  width: 3px;
  height: 26px;
  background: #fff;
  border-radius: 2px;
}
.cp26as-worries__slash--l { transform: rotate(20deg); }
.cp26as-worries__slash--r { transform: rotate(-20deg); }

.cp26as-worries__title {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.8;
}

.cp26as-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(24px, 4vw, 48px);
  padding: 0.05em 0.35em 0.15em;
  border-radius: 10px 26px 14px 22px;
  transform: rotate(-1.2deg);
  margin: 0 0.06em;
}
.cp26as-mark--hair  { background: var(--cp26as-blue-chip); color: var(--cp26as-navy); border: 3px solid var(--cp26as-navy); }
.cp26as-mark--scalp { background: var(--cp26as-yellow);    color: var(--cp26as-brown); border: 3px solid var(--cp26as-brown); transform: rotate(1.2deg); }

/* ---- イラスト＋吹き出しボード（PC） ---- */
.cp26as-worries__board {
  position: relative;
  max-width: 1440px;
  margin: 34px auto 0;
  aspect-ratio: 1200 / 758;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  isolation: isolate;
}

.cp26as-worries__bg {
  position: absolute;
  inset: 0;
  background: var(--cp26as-blue-pale);
  z-index: 0;
}
.cp26as-worries__glow {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 45%;
  aspect-ratio: 1/1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 78%);
  z-index: 1;
}

.cp26as-worries__figure {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 39%;
  height: auto;
  transform: translateX(-50%);
  z-index: 3;
}

.cp26as-bubbles { position: static; }

.cp26as-bubble {
  position: absolute;
  z-index: 4;
  background: #fff;
  border: 3px solid var(--cp26as-navy);
  border-radius: 28px;
  padding: 1.1em 1.3em 1.2em;
  box-shadow: 0 6px 0 rgba(0,31,82,.06);
}
.cp26as-bubble::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--cp26as-navy);
  border-radius: 0 0 6px 0;
}

.cp26as-bubble--tl { left: 3.4%;  top: 5.6%;  width: 34%; }
.cp26as-bubble--tl::after { right: 22%; bottom: -14px; transform: rotate(45deg); border-width: 0 3px 3px 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }

.cp26as-bubble--tr { left: 62.7%; top: 8%;    width: 34%; }
.cp26as-bubble--tr::after { left: 22%; bottom: -14px; transform: rotate(-45deg); border-width: 0 0 3px 3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.cp26as-bubble--bl { left: 3.4%;  top: 61%;   width: 26%; }
.cp26as-bubble--bl::after { right: 22%; top: -14px; transform: rotate(-135deg); border-width: 0 0 3px 3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.cp26as-bubble--br { left: 68.2%; top: 49%;   width: 29%; }
.cp26as-bubble--br::after { left: 22%; top: -14px; transform: rotate(135deg); border-width: 0 3px 3px 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }

.cp26as-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: clamp(13px, 1.6vw, 18px);
  padding: 0.2em 0.7em;
  border-radius: 6px;
  margin-bottom: 0.6em;
}
.cp26as-tag__icon { width: 1.5em; height: 1.5em; }
.cp26as-tag--hair  { background: var(--cp26as-blue-chip); color: var(--cp26as-navy);  border: 2px solid var(--cp26as-navy); }
.cp26as-tag--hair  .cp26as-tag__icon { color: var(--cp26as-navy); }
.cp26as-tag--scalp { background: var(--cp26as-yellow);    color: var(--cp26as-brown); border: 2px solid var(--cp26as-brown); }
.cp26as-tag--scalp .cp26as-tag__icon { color: var(--cp26as-brown); }

.cp26as-bubble__text {
  color: var(--cp26as-navy);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 20px);
  line-height: 1.5;
}
.cp26as-bubble__strong {
  display: block;
  font-size: clamp(18px, 2.3vw, 32px);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.cp26as-bubble__sub {
  display: block;
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 20px);
  margin-top: 0.3em;
}

.cp26as-worries__notch {
  position: relative;
  max-width: 1440px;
  height: 26px;
  margin: 0 auto;
}
.cp26as-worries__notch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 26px solid var(--cp26as-blue-pale);
}

/* ---- SP: 見出し下・吹き出し2段＋中央イラスト ---- */
.cp26as-bubble--sp {
  position: relative;
  flex: 1 1 0;
  padding: 0.9em 0.8em 1em;
}
.cp26as-bubble--sp::after { display: none; }
.cp26as-bubble--sp .cp26as-bubble__text { font-size: 12px; }
.cp26as-bubble--sp .cp26as-bubble__strong { font-size: 16px; }
.cp26as-bubble--sp .cp26as-bubble__sub { font-size: 12px; }
.cp26as-bubble--sp .cp26as-tag { font-size: 11px; }

.cp26as-bubbles--sp-top,
.cp26as-bubbles--sp-bottom {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 2;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.cp26as-bubbles--sp-top    { margin-bottom: -58px; }
.cp26as-bubbles--sp-bottom { margin-top: -58px; }

.cp26as-worries__board--sp {
  position: relative;
  width: 86%;
  max-width: 340px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}
.cp26as-worries__board--sp .cp26as-worries__figure {
  width: 62%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  .cp26as-worries__board-img { margin-top: 20px; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-worries__board-img {
    max-width: 100%;
  }
}
/* -------------------------------------------------------------
   訴求セクション（ステップアップ増毛でWで実感）
------------------------------------------------------------- */
.cp26as-marketing {
  position: relative;
  background: var(--cp26as-navy);
  overflow: hidden;
  padding: 56px 20px 64px;
}
.cp26as-marketing__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image:
    url("/mens/campaign/26autumn-stepup-cp/assets/section_02_marketing-bg-1.webp");
  background-size: cover, cover;
  background-position: center calc(50% + 100px);
  background-repeat: no-repeat, no-repeat;
  z-index: 0;
}

.cp26as-marketing__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 10.4vh;
  text-align: center;
}

.cp26as-marketing__inner-imgwrap .w78 {
  width: 78%;
  height: auto;
  margin: 0 auto;
}

.cp26as-marketing__subtitle {
  color: #fff;
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 32px);
  text-shadow: 0 0 10px rgba(0,0,0,.4);
  line-height: 1.4;
}

.cp26as-marketing__arrow {
  width: 23px;
  margin: 14px auto;
}

.cp26as-marketing__badge {
  display: inline-block;
  margin-bottom: 6px;
}
.cp26as-marketing__badge span {
  display: inline-block;
  background: var(--cp26as-yellow);
  color: var(--cp26as-navy);
  font-weight: 900;
  font-size: clamp(18px, 3.2vw, 36px);
  padding: 0.15em 0.5em 0.25em;
  border-radius: 8px 22px 10px 20px;
  transform: rotate(-1.5deg);
}

.cp26as-marketing__title {
  color: #fff;
  font-weight: 900;
  line-height: 1.35;
  text-shadow: 0 0 10px rgba(0,0,0,.4);
}
.cp26as-marketing__title-line {
  display: block;
  font-size: clamp(26px, 6.6vw, 84px);
  white-space: nowrap;
}
.cp26as-marketing__title-line em {
  font-style: normal;
  color: var(--cp26as-yellow);
}
.cp26as-marketing__title-line--w {
  margin-top: 0.1em;
}
.cp26as-marketing__title-line--w em {
  font-size: 1.55em;
  vertical-align: -0.06em;
}
.cp26as-marketing__title-particle {
  font-size: 0.62em;
}

.cp26as-marketing__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.cp26as-marketing__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 0.5em 1em;
}
.cp26as-marketing__step-icon {
  width: clamp(28px, 3.4vw, 48px);
  height: clamp(28px, 3.4vw, 48px);
  color: var(--cp26as-navy);
  flex-shrink: 0;
}
.cp26as-marketing__step span {
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 26px);
  color: var(--cp26as-navy);
  white-space: nowrap;
}
.cp26as-marketing__step b {
  font-weight: 900;
  font-size: 1.7em;
  font-style: normal;
  background: linear-gradient(173deg, var(--cp26as-red-1) 0%, var(--cp26as-red-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cp26as-marketing__plus {
  color: #fff;
  font-weight: 900;
  font-size: clamp(24px, 4.2vw, 56px);
  text-shadow: 0 0 10px rgba(0,0,0,.4);
}

/* ============================================================
   SP (max-width: 767px)
============================================================ */
@media (max-width: 767px) {
  .cp26as-marketing__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-image: url("/mens/campaign/26autumn-stepup-cp/assets/section_02_marketing-bg-1_sp.webp");
    background-position: center calc(50% - 35px);
  }
  .cp26as-worries { padding: 28px 16px 0; }
  .cp26as-worries__kicker { font-size: 15px; gap: 8px; }
  .cp26as-worries__slash { height: 18px; }
  .cp26as-worries__title { font-size: 22px; }
  .cp26as-mark { font-size: 26px; border-radius: 8px 18px 10px 16px; }

  .cp26as-bubbles--sp-top,
  .cp26as-bubbles--sp-bottom { max-width: 320px; gap: 6px; }
  .cp26as-bubble--sp { border-radius: 20px; }

  .cp26as-worries__notch { height: 18px; }
  .cp26as-worries__notch::after {
    border-left-width: 60px;
    border-right-width: 60px;
    border-top-width: 18px;
  }

  .cp26as-marketing { padding: 20px 16px 24px; }
  .cp26as-marketing__subtitle { font-size: 16px; }
  .cp26as-marketing__arrow { width: 11px; margin: 10px auto; }
  .cp26as-marketing__badge span { font-size: 15px; border-radius: 6px 14px 8px 12px; }
  .cp26as-marketing__title-line { font-size: 24px; }
  .cp26as-marketing__title-line--w em { font-size: 1.7em; }
  .cp26as-marketing__steps { gap: 6px; margin-top: 16px; }
  .cp26as-marketing__step { gap: 5px; padding: 0.45em 0.6em; border-radius: 6px; }
  .cp26as-marketing__step-icon { width: 22px; height: 22px; }
  .cp26as-marketing__step span { font-size: 12px; }
  .cp26as-marketing__plus { font-size: 22px; }
}


/* ============================== section_03.css ============================== */
/* ================================================================
   26autumn-stepup-cp / section_03.css
   スコープ: すべてのクラスに "cp26as-s3-" プレフィックス（他セクションとの衝突防止）
   PC: [data-view="pc"] 配下 / SP: [data-view="sp"] 配下（表示切替は共通CSSに委譲）
================================================================= */

.cp26as-s3,
.cp26as-s3 * {
  box-sizing: border-box;
}

.cp26as-s3 {
  --navy: #001f52;
  --ink: #222;
  --sky: #3fa9dc;
  --yellow: #ffe436;
  --red1: #f81f1c;
  --red2: #b40101;
  --bg-blue: #d9eefe;
  --bg-blue-2: #e5f0fa;
  font-family: "A-OTF UD Shin Go Pro", "A-OTF Shin Go Pro", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  background: #f7f7f9;
  position: relative;
}

.cp26as-s3 svg { display: block; }

@media (max-width: 767px) {
  .cp26as-s3 {
    top: -27vh;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-s3 {
    top: -7.7vh;
  }
}
/* ---------------------------------------------------------------
   フラット化画像（依頼により各グルーピングを1枚画像化した箇所）
--------------------------------------------------------------- */
.cp26as-s3-box {
  width: 1200px;
  margin: 30px auto 0;
  padding: 60px 40px 40px;
  border: 4px solid #001F52;
  background: #E5F0FA;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.40);
  font-family: "Noto Sans JP",sans-serif;
}
.cp26as-s3-flat {
  display: block;
  /* width: 100%; */
  height: auto;
  max-width: 1440px;
  margin: 0 auto 50px;
}
.cp26as-s3-flat2 {
  display: block;
  height: auto;
  max-width: 1440px;
  margin: 0 auto 30px;
}
.cp26as-s3-flat3 {
  display: block;
  height: auto;
  max-width: 1440px;
  margin: 0 auto 20px;
}
.cp26as-s3-flat4 {
  display: block;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.cp26as-s3-flat4.w1000 {
  width: 1000px;
}
.cp26as-s3-flat5 {
  display: block;
  height: auto;
  max-width: 1440px;
  margin: 0 auto 40px;
}
.cp26as-s3-heading {
  margin: 0 0 0;
}
.cp26as-s3-flat-card {
  display: block;
  width: 100%;
  height: auto;
}
.cp26as-s3-points__grid .cp26as-s3-points__card {
  padding: 0;
  background: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  .cp26as-s3-flat {
    max-width: 100%;
  }
  .cp26as-s3-flat.w85,
  .cp26as-s3-flat4.w85 {
    max-width: 85%;
    margin: 0 auto;
  }
  .cp26as-s3-flat4.w95 {
    max-width: 95%;
    margin: 0 auto;
  }
  .cp26as-s3-flat2 {
    max-width: 100%;
    margin: 0 auto 30px;
  }
  .cp26as-s3-flat3 {
    max-width: 100%;
    margin: 0 auto 20px;
  }
  .cp26as-s3-flat4 {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
  }
  .cp26as-s3-flex {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
  }
  .cp26as-s3-flex > .cp26as-s3-flat {
    flex: none;
    margin: 0;
    width: 40px;
  }
  .cp26as-s3-flex > .cp26as-s3-lineup__list {
    flex: 1;
    min-width: 0;
  }
  .cp26as-s3-flat.mb0 {
    margin-bottom: 0;
  }
  .cp26as-s3-flat.w45,
  .cp26as-s3-flat2.w45,
  .cp26as-s3-flat3.w45 {
    width: 45%;
  }
  .cp26as-s3-flat.ttl,
  .cp26as-s3-flat2.ttl,
  .cp26as-s3-flat3.ttl,
  .cp26as-s3-flat.txt,
  .cp26as-s3-flat2.txt {
    width: 80%;
  }
  .cp26as-s3-series .cp26as-s3-heading {
    margin: 0;
  }
  .cp26as-s3-heading {
    margin: -17px 0 20px;
  }
  .cp26as-s3-heading.mt0 {
    margin: 0 0 20px;
  }
  .cp26as-s3-box {
    width: 100%;
    margin: 20px auto 0;
    padding: 20px 20px 40px;
    border: 3px solid #001F52;
    background: #E5F0FA;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.40);
    font-family: "Noto Sans JP",sans-serif;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-s3-flat {
    max-width: 100%;
  }
  .cp26as-s3-box {
    width: 100%;
  }
.cp26as-s3-flat2,
.cp26as-s3-flat3,
.cp26as-s3-flat4,
.cp26as-s3-flat5 {
  max-width: 100%;
}
}
/* ---------------------------------------------------------------
   共通パーツ: タグ（塗りバッジ）
--------------------------------------------------------------- */
.cp26as-s3-tag {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  padding: 4px 14px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   1. 期間限定キャンペーン 再訴求バナー
--------------------------------------------------------------- */
.cp26as-s3-promo {
  background-image: url(/mens/campaign/26autumn-stepup-cp/assets/section_03_promo-bg.webp);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 60px 20px 0;
  text-align: center;
  margin-top: -1px;
}
.cp26as-s3-promo__inner { max-width: 860px; margin: 0 auto; }

.cp26as-s3-promo__badge {
  display: inline-flex;
  gap: .3em;
  margin: 0 0 6px;
  font-weight: 700;
}
.cp26as-s3-promo__badge-em {
  font-size: 30px;
  background: linear-gradient(177deg, var(--red1) 0%, var(--red2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp26as-s3-promo__badge-normal { font-size: 22px; color: var(--navy); }

.cp26as-s3-promo__title {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; font-size: 56px; font-weight: 700; color: var(--navy);
}
.cp26as-s3-icon-arrowup { width: 40px; height: 40px; flex: none; }

.cp26as-s3-promo__headline {
  margin: 0; line-height: 1; color: var(--navy); font-weight: 700;
}
.cp26as-s3-promo__word { font-size: 60px; }
.cp26as-s3-promo__figure {
  font-size: 96px;
  background: linear-gradient(182deg, var(--red1) 28%, var(--red2) 74%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cp26as-s3-promo__pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 20px 0 0; padding: 10px 28px;
  border: 3px solid var(--navy); border-radius: 999px;
  background: #fff; color: var(--navy); font-weight: 700; font-size: 24px;
}
.cp26as-s3-icon-plus { width: 28px; height: 28px; flex: none; }
.cp26as-s3-icon-plus svg { width: 100%; height: 100%; }
.cp26as-s3-icon-plus--sm { width: 22px; height: 22px; }

.cp26as-s3-promo__price {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px;
  margin: 24px 0 0;
}
.cp26as-s3-promo__price-old { margin: 0; color: var(--navy); font-weight: 700; font-size: 18px; }
.cp26as-s3-promo__price-old-value { position: relative; display: inline-flex; align-items: baseline; gap: 2px; margin-left: 4px; }
.cp26as-s3-promo__price-old-num { font-size: 34px; }
.cp26as-s3-promo__price-old-value small { font-size: 12px; line-height: 1.1; }
.cp26as-s3-promo__price-old-value::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%;
  border-top: 2px solid var(--navy); transform: rotate(-8deg);
}
.cp26as-s3-icon-pricearrow { width: 22px; height: 32px; flex: none; }
.cp26as-s3-promo__price-new { margin: 0; font-weight: 700; }
.cp26as-s3-promo__price-new-num {
  font-size: 60px; line-height: 1;
  background: linear-gradient(182deg, var(--red1) 28%, var(--red2) 74%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp26as-s3-promo__price-new small { font-size: 16px; color: var(--red2); margin-left: 2px; }

.cp26as-s3-promo__date {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  margin: 16px auto 0; max-width: 480px; color: var(--navy); font-weight: 700; font-size: 22px;
}
.cp26as-s3-promo__date-line { flex: 1 1 auto; height: 1px; background: var(--navy); }

.cp26as-s3-promo__desc { margin: 20px 0 0; font-size: 17px; line-height: 1.7; color: var(--navy); font-weight: 500; }
.cp26as-s3-promo__desc strong { font-weight: 700; }

@media (max-width: 767px) {
  .cp26as-s3-promo {
    background-image: url(/mens/campaign/26autumn-stepup-cp/assets/section_03_promo-bg_sp.webp);
  }
}
/* ---------------------------------------------------------------
   2. 訴求フィーチャー共通（夏のダメージ / スカルプケア）
--------------------------------------------------------------- */
.cp26as-s3-feature { padding: 80px 20px 0; /* background: #f7f7f9; */ }
.cp26as-s3-feature--care { padding-top: 30px;/* background: #eef6fd; */ }
.cp26as-s3-feature__head { text-align: center; margin: 0 0 24px; }
.cp26as-s3-feature__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  color: var(--navy); font-weight: 700; font-size: 30px;
}
.cp26as-s3-icon-tick { width: 22px; height: 22px; border-left: 6px solid var(--navy); border-bottom: 6px solid var(--navy); transform: rotate(-45deg); }
.cp26as-s3-feature__sub { margin: 10px 0 0; color: var(--navy); font-weight: 700; font-size: 24px; }
.cp26as-s3-feature__sub .cp26as-s3-tag { font-size: 20px; margin: 0 4px; }
.cp26as-s3-feature__w { color: var(--yellow); -webkit-text-stroke: 1px var(--navy); font-size: 30px; }

.cp26as-s3-feature__tit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0; color: var(--navy); font-weight: 700; font-size: 26px;
}
.cp26as-s3-feature__tit-badge { background: var(--navy); color: #fff; padding: 6px 20px; border-radius: 999px; font-size: 20px; }

.cp26as-s3-feature__sub2 {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 28px 0 20px; color: var(--navy); font-weight: 700; font-size: 26px;
}
.cp26as-s3-icon-star { width: 20px; height: 20px; background: var(--red1); clip-path: polygon(50% 0,63% 38%,100% 38%,69% 60%,82% 100%,50% 76%,18% 100%,31% 60%,0 38%,37% 38%); }

/* ハイライトカード（増毛1100本 / スカルプケア!） */
.cp26as-s3-highlight { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.cp26as-s3-highlight__card {
  background: linear-gradient(180deg, #fff 0%, var(--bg-blue) 100%);
  box-shadow: 0 0 12px rgba(0,0,0,.25);
  padding: 20px 28px; text-align: center; min-width: 320px;
}
.cp26as-s3-highlight__tags { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.cp26as-s3-highlight__tags .cp26as-s3-tag { font-size: 18px; }
.cp26as-s3-highlight__num { margin: 0; color: var(--navy); font-weight: 700; font-size: 34px; }
.cp26as-s3-highlight__num b { font-size: 50px; }
.cp26as-s3-highlight__num--care { font-size: 40px; }
.cp26as-s3-highlight__photo { display: block; width: 260px; height: auto; border-radius: 4px; object-fit: cover; }

/* Before/After 比較 */
.cp26as-s3-compare { display: flex; align-items: flex-end; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; position: relative; }
.cp26as-s3-compare__box { position: relative; background: var(--bg-blue); overflow: hidden; }
.cp26as-s3-compare__box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp26as-s3-compare__box--before { width: 180px; height: 206px; }
.cp26as-s3-compare__box--after { width: 300px; height: 344px; }
.cp26as-s3-compare__tag {
  position: absolute; left: 0; bottom: 0; margin: 0; display: flex; align-items: baseline;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 16px; padding: 4px 10px;
}
.cp26as-s3-compare__tag-num { margin-left: 8px; font-size: 26px; }
.cp26as-s3-compare__tag-num small { font-size: 13px; margin-left: 2px; }
.cp26as-s3-compare__arrow { width: 32px; height: 40px; flex: none; margin-bottom: 60px; }
.cp26as-s3-compare__caption { margin: 0 0 10px; color: var(--navy); font-weight: 700; font-size: 24px; text-align: center; }
.cp26as-s3-compare__caption b { font-size: 40px; }

/* NEWバッジ */
.cp26as-s3-newbadge {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  max-width: 760px; margin: 30px auto 0; padding: 20px 30px;
  border: 3px solid var(--navy);
}
.cp26as-s3-newbadge__ribbon { background: #d40f0e; color: #fff; font-weight: 700; font-size: 15px; padding: 3px 10px; }
.cp26as-s3-newbadge__text { margin: 0; color: var(--navy); font-weight: 700; font-size: 20px; }

/* 商品(クレンジング) */
.cp26as-s3-product { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
.cp26as-s3-product__photo { position: relative; flex: none; text-align: center; }
.cp26as-s3-product__photo img { width: 116px; height: auto; display: block; margin: 0 auto; }
.cp26as-s3-product__badge { display: inline-block; margin-top: 6px; background: var(--navy); color: #fff; font-size: 11px; padding: 2px 8px; }
.cp26as-s3-product__caption-tit { max-width: 300px; margin: 0; color: var(--ink); font-size: 18px; line-height: 1.5; text-align: center; }
.cp26as-s3-product__caption-tit b { color: var(--navy); }
.cp26as-s3-product__body { text-align: left; }
.cp26as-s3-product__name { margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.cp26as-s3-product__price { margin: 0; font-size: 16px; }
.cp26as-s3-product__price-num { color: var(--navy); font-weight: 700; font-size: 30px; margin: 0 4px; }

/* ---------------------------------------------------------------
   3. 安心POINT + ステップ
--------------------------------------------------------------- */
.cp26as-s3-points { padding: 20px 20px; /* background: #fff; */ }
.cp26as-s3-points__head { text-align: center; margin: 0 0 30px; }
.cp26as-s3-points__tit { margin: 0 0 14px; color: var(--navy); font-weight: 700; font-size: 34px; }
.cp26as-s3-points__sub { margin: 0; color: var(--navy); font-weight: 500; font-size: 18px; }
.cp26as-s3-points__sub strong { color: #d40f0e; font-weight: 700; font-size: 22px; }

.cp26as-s3-step-row { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 900px; margin: 0 auto 40px; }
.cp26as-s3-step { flex: 1 1 0; text-align: center; }
.cp26as-s3-step__label { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.cp26as-s3-icon-chevron { width: 20px; height: 14px; }
.cp26as-s3-step__box {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 12px; color: #fff; font-weight: 700;
}
.cp26as-s3-step__box--01 { background: var(--navy); }
.cp26as-s3-step__box--02 { background: #fff; color: var(--navy); border: 3px solid var(--navy); }
.cp26as-s3-step__tag { font-size: 14px; }
.cp26as-s3-step__num { font-size: 30px; }
.cp26as-s3-step__divider { width: 2px; align-self: stretch; background: currentColor; opacity: .5; }
.cp26as-s3-step__count { font-size: 22px; }
.cp26as-s3-step__count b { font-size: 30px; }
.cp26as-s3-step__free {
  background: #fff; color: var(--navy); border-radius: 999px; width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
}
.cp26as-s3-step__pill { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--navy); border-radius: 999px; padding: 4px 12px; font-size: 15px; }
.cp26as-s3-icon-connector { width: 44px; height: 44px; flex: none; }

.cp26as-s3-points__grid { list-style: none; display: flex; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0; }
.cp26as-s3-points__card {
  flex: 1 1 0; display: flex; align-items: center; gap: 16px; padding: 24px;
  background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.25);
}
.cp26as-s3-points__card p { margin: 0; font-size: 16px; line-height: 1.5; }
.cp26as-s3-points__card strong { color: var(--navy); }
.cp26as-s3-icon-yen {
  flex: none; width: 64px; height: 64px; border-radius: 50%; background: #fff2c2;
  color: var(--navy); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--yellow);
}
.cp26as-s3-icon-ok, .cp26as-s3-icon-flow { flex: none; }
.cp26as-s3-icon-ok svg { width: 56px; height: 56px; }
.cp26as-s3-icon-flow svg { width: 76px; height: 48px; }

/* ---------------------------------------------------------------
   4. CTAブロック（共通）
--------------------------------------------------------------- */
.cp26as-s3-cta-block { padding: 50px 20px 100px; /*background: #f7f7f9;*/ text-align: center; }
.cp26as-s3-cta-block.fff { background: #fff; }
.cp26as-s3-cta-block > a { display: inline-block; }
.cp26as-s3-cta-tit { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 20px; color: var(--navy); font-weight: 700; font-size: 30px; }
.cp26as-s3-cta-tit__line { flex: 1 1 60px; height: 2px; background: var(--navy); max-width: 60px; }
.cp26as-s3-cta { max-width: 1440px; margin: 0 auto; }
.cp26as-s3-cta__tab { display: inline-block; background: var(--navy); color: #fff; font-weight: 700; padding: 8px 24px; border-radius: 12px 12px 0 0; font-size: 18px; margin: 0; }
.cp26as-s3-cta__card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--yellow); border: 4px solid var(--navy); border-radius: 20px;
  box-shadow: 8px 8px 0 var(--navy); padding: 16px 24px;
}
.cp26as-s3-cta__left { display: flex; align-items: center; gap: 8px; }
.cp26as-s3-cta__badge-nav { background: var(--navy); color: #fff; border-radius: 6px; padding: 4px 6px; font-size: 16px; font-weight: 700; }
.cp26as-s3-cta__num { color: var(--navy); font-weight: 700; font-size: 54px; line-height: 1; }
.cp26as-s3-cta__unit { color: var(--navy); font-weight: 700; font-size: 26px; }
.cp26as-s3-cta__scalp { position: relative; display: flex; align-items: center; gap: 6px; border: 2px solid var(--navy); border-radius: 6px; padding: 10px 10px; margin-left: 8px; }
.cp26as-s3-cta__scalp-text { color: #031143; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; }
.cp26as-s3-cta__flag {
  position: absolute; top: -18px; left: -18px; transform: rotate(-8deg);
  background: linear-gradient(172deg, var(--red1) 0%, var(--red2) 100%);
  color: #fff; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 3px;
}
.cp26as-s3-cta__price { display: flex; align-items: center; gap: 8px; }
.cp26as-s3-cta__price-old { margin: 0; color: var(--navy); font-size: 12px; font-weight: 700; }
.cp26as-s3-cta__price-old-value { position: relative; display: inline-flex; align-items: baseline; gap: 2px; margin-left: 2px; }
.cp26as-s3-cta__price-old-num { font-size: 30px; }
.cp26as-s3-cta__price-old-value small { font-size: 10px; }
.cp26as-s3-cta__price-old-value::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; border-top: 2px solid var(--navy); transform: rotate(-8deg); }
.cp26as-s3-icon-pricearrow--sm { width: 16px; height: 24px; }
.cp26as-s3-cta__price-new { margin: 0; font-weight: 700; }
.cp26as-s3-cta__price-new-num { font-size: 46px; background: linear-gradient(182deg, var(--red1) 28%, var(--red2) 74%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp26as-s3-cta__price-new small { font-size: 13px; color: var(--red2); }
.cp26as-s3-cta__button {
  display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(172deg, var(--red1) 0%, var(--red2) 100%);
  color: #fff; font-weight: 700; font-size: 22px; padding: 16px 28px; border-radius: 6px; text-decoration: none;
}
.cp26as-s3-icon-ctaarrow { width: 24px; height: 24px; }
.cp26as-s3-cta-note { max-width: 1200px; margin: 10px auto 0; font-size: 16px; line-height: 1.5; text-align: left; color: #222; font-family: "Noto Sans JP",sans-serif; }

/* ---------------------------------------------------------------
   5. アデランスの増毛シリーズ
--------------------------------------------------------------- */
.cp26as-s3-series { padding: 100px 20px 50px; background: #fff; }
.cp26as-s3-series__head { text-align: center; margin: 0 auto 20px; max-width: 900px; }
.cp26as-s3-series__badge { display: inline-block; background: #fff; border: 2px solid var(--navy); border-radius: 999px; padding: 8px 26px; margin: 0 0 14px; color: var(--navy); font-weight: 700; font-size: 15px; }
.cp26as-s3-series__tit { margin: 0; color: var(--navy); font-weight: 700; font-size: 34px; }
.cp26as-s3-series__tit span { font-size: 24px; }

.cp26as-s3-series__lead { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px 0 10px; }
.cp26as-s3-series__new { background: var(--yellow); color: var(--navy); font-weight: 700; border-radius: 999px; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.cp26as-s3-series__lead-tit { margin: 0; font-weight: 500; font-size: 18px; border-bottom: 3px solid var(--navy); padding-bottom: 4px; }

.cp26as-s3-series__intro { display: flex; align-items: flex-start; gap: 30px; max-width: 1440px; margin: 20px auto 0; }
.cp26as-s3-series__intro-body { flex: 0 0 672px; width: 672px; }
.cp26as-s3-series__intro-tit { margin: 0 0 10px; color: var(--navy); font-weight: 700; font-size: 32px; }
.cp26as-s3-series__intro-text { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.5; }
.cp26as-s3-series__intro-note { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; }
.cp26as-s3-series__intro-photo { flex: none; width: 400px; height: auto; /* border-radius: 4px; */ object-fit: cover; }
.pinpoint_booster-frame__inner {padding-top: 0;}

.cp26as-s3-compare2 { display: flex; gap: 30px; max-width: 1440px; margin: 40px auto 0; }
.cp26as-s3-compare2__card { flex: 1 1 0; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); }
.cp26as-s3-compare2__head { position: relative; display: flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; padding: 22px 30px 22px 150px; min-height: 76px; }
.cp26as-s3-compare2__card:nth-child(2) .cp26as-s3-compare2__head { background: #fff; color: var(--navy); border: 3px solid var(--navy); }
.cp26as-s3-compare2__no { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 42px; font-weight: 700; opacity: .9; }
.cp26as-s3-compare2__label { position: absolute; left: 78px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left top; font-size: 13px; letter-spacing: 1px; opacity: .8; }
.cp26as-s3-compare2__tit { font-size: 26px; font-weight: 700; }
.cp26as-s3-compare2__tit b { color: var(--yellow); font-size: 34px; margin-left: 4px; }
.cp26as-s3-compare2__card:nth-child(2) .cp26as-s3-compare2__tit b { color: var(--navy); -webkit-text-stroke: 1px var(--sky); }
.cp26as-s3-compare2__body { padding: 24px; text-align: center; }
.cp26as-s3-compare2__catch { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.cp26as-s3-compare2__catch b { color: var(--navy); font-size: 34px; }
.cp26as-s3-compare2__stat { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin: 0; }
.cp26as-s3-compare2__stat span { background: var(--yellow); color: var(--navy); font-weight: 700; font-size: 40px; padding: 2px 8px; }
.cp26as-s3-compare2__stat small { font-size: 18px; font-weight: 700; margin-left: 2px; }
.cp26as-s3-compare2__result { margin: 10px 0 16px; font-size: 24px; font-weight: 700; color: var(--ink); }
.cp26as-s3-compare2__result b { color: var(--navy); font-size: 30px; }
.cp26as-s3-compare2__body img { width: 100%; max-width: 494px; height: auto; display: block; margin: 0 auto; border-radius: 4px; object-fit: cover; }
.cp26as-s3-compare2__note { margin: 14px 0 0; background: var(--bg-blue-2); padding: 16px; font-size: 15px; line-height: 1.6; text-align: left; }
.cp26as-s3-series__footnote { max-width: 1440px; margin: 10px auto 0; font-size: 16px; text-align: right; font-family: "Noto Sans JP",sans-serif; }

.cp26as-s3-lineup { max-width: 1440px; margin: 50px auto 0; }
.cp26as-s3-lineup__tit { text-align: center; margin: 0 0 24px; color: var(--navy); font-weight: 700; font-size: 26px; }
.cp26as-s3-lineup__slider { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, var(--sky), var(--navy)); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 999px; margin-bottom: 20px; }
.cp26as-s3-lineup__grid { list-style: none; display: flex; gap: 12px; margin: 30px 0 0; padding: 0; }
.cp26as-s3-lineup__grid > li { flex: 1 1 0; text-align: center; }
.cp26as-s3-lineup__grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.cp26as-s3-lineup__cat { display: inline-block; width: 100%; color: #fff; font-size: 14px; font-weight: 700; padding: 9px 0; margin-top: 15px; font-family: "Noto Sans JP",sans-serif;}
.cp26as-s3-lineup__name { margin: 16px 0 10px; font-weight: 700; font-size: 16px; line-height: 1.5; }
.cp26as-s3-lineup__desc { margin: 0; font-size: 16px; line-height: 1.5; text-align: left; font-family: "Noto Sans JP",sans-serif;}
@media (max-width: 767px) {
  .cp26as-s3-compare2__body { padding: 16px; }
  .cp26as-s3-series__footnote { font-size: 14px; text-align: left; }
  .cp26as-s3-lineup__name { margin: 10px 0 10px; font-weight: 700; font-size: 16px; line-height: 1.5; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-s3-box {
    padding: 30px 20px;
  }
  .cp26as-s3-series__intro-photo {
    width: 320px;
  }
  .cp26as-s3-series__intro-body { flex: 0 0 50%; width: 50%; }
}

/* ================================================================
   SP専用調整（[data-view="sp"] 配下）
================================================================= */
[data-view="sp"] .cp26as-s3-promo { padding: 25px 16px; }
[data-view="sp"] .cp26as-s3-promo__title { font-size: 34px; }
[data-view="sp"] .cp26as-s3-icon-arrowup { width: 26px; height: 26px; }
[data-view="sp"] .cp26as-s3-promo__word { font-size: 38px; }
[data-view="sp"] .cp26as-s3-promo__figure { font-size: 58px; }
[data-view="sp"] .cp26as-s3-promo__pill { font-size: 16px; padding: 8px 18px; }
[data-view="sp"] .cp26as-s3-promo__price-old { font-size: 14px; }
[data-view="sp"] .cp26as-s3-promo__price-old-num { font-size: 24px; }
[data-view="sp"] .cp26as-s3-promo__price-new-num { font-size: 40px; }
[data-view="sp"] .cp26as-s3-promo__date { font-size: 15px; }
[data-view="sp"] .cp26as-s3-promo__desc { font-size: 15px; }

[data-view="sp"] .cp26as-s3-feature { padding: 0; }
[data-view="sp"] .cp26as-s3-feature__eyebrow { font-size: 20px; }
[data-view="sp"] .cp26as-s3-feature__sub { font-size: 17px; }
[data-view="sp"] .cp26as-s3-feature__sub .cp26as-s3-tag { font-size: 14px; }
[data-view="sp"] .cp26as-s3-feature__w { font-size: 20px; }
[data-view="sp"] .cp26as-s3-feature__tit { font-size: 18px; }
[data-view="sp"] .cp26as-s3-feature__sub2 { font-size: 18px; margin: 20px 0 14px; }

[data-view="sp"] .cp26as-s3-highlight { flex-direction: column; gap: 14px; }
[data-view="sp"] .cp26as-s3-highlight__card { min-width: 0; width: 100%; padding: 14px 16px; }
[data-view="sp"] .cp26as-s3-highlight__num { font-size: 22px; }
[data-view="sp"] .cp26as-s3-highlight__num b { font-size: 34px; }
[data-view="sp"] .cp26as-s3-highlight__num--care { font-size: 28px; }
[data-view="sp"] .cp26as-s3-highlight__photo { width: 100%; height: auto; }
[data-view="sp"] .mod-modal-btn { display: block; cursor: zoom-in; }

[data-view="sp"] .cp26as-s3-compare { gap: 10px; margin-top: 20px; }
[data-view="sp"] .cp26as-s3-compare__box--before { width: 110px; height: 126px; }
[data-view="sp"] .cp26as-s3-compare__box--after { width: 178px; height: 204px; }
[data-view="sp"] .cp26as-s3-compare__box .mod-modal-btn { cursor: zoom-in; }
[data-view="sp"] .cp26as-s3-compare__tag { font-size: 12px; padding: 3px 8px; }
[data-view="sp"] .cp26as-s3-compare__tag-num { font-size: 18px; }
[data-view="sp"] .cp26as-s3-compare__arrow { width: 22px; height: 28px; margin-bottom: 40px; }
[data-view="sp"] .cp26as-s3-compare__caption { font-size: 16px; margin-top: 14px; }
[data-view="sp"] .cp26as-s3-compare__caption b { font-size: 26px; }

[data-view="sp"] .cp26as-s3-newbadge { padding: 14px 16px; gap: 10px; margin-top: 20px; }
[data-view="sp"] .cp26as-s3-newbadge__text { font-size: 15px; }

[data-view="sp"] .cp26as-s3-product { gap: 14px; }
[data-view="sp"] .cp26as-s3-product__photo img { width: 88px; }
[data-view="sp"] .cp26as-s3-product__caption-tit { font-size: 15px; max-width: 220px; }
[data-view="sp"] .cp26as-s3-product__name { font-size: 15px; }
[data-view="sp"] .cp26as-s3-product__price-num { font-size: 24px; }

[data-view="sp"] .cp26as-s3-points { padding: 33px 0; }
[data-view="sp"] .cp26as-s3-points__tit { font-size: 26px; }
[data-view="sp"] .cp26as-s3-points__sub { font-size: 15px; }
[data-view="sp"] .cp26as-s3-points__sub strong { font-size: 18px; }
[data-view="sp"] .cp26as-s3-step-row--sp { flex-direction: column; gap: 12px; margin-bottom: 30px; }
[data-view="sp"] .cp26as-s3-icon-connector--sp { width: 32px; height: 32px; }
[data-view="sp"] .cp26as-s3-step__box { font-size: 15px; padding: 12px; }
[data-view="sp"] .cp26as-s3-step__num { font-size: 22px; }
[data-view="sp"] .cp26as-s3-step__count { font-size: 17px; }
[data-view="sp"] .cp26as-s3-step__count b { font-size: 22px; }
[data-view="sp"] .cp26as-s3-points__grid { flex-direction: column; gap: 2px; }
[data-view="sp"] .cp26as-s3-points__card { /* padding: 16px; */ }
[data-view="sp"] .cp26as-s3-points__card p { font-size: 15px; }

[data-view="sp"] .cp26as-s3-cta-block { padding: 0 0 25px; background-color: transparent; }
[data-view="sp"] .cp26as-s3-cta-block.w { padding: 0 20px 50px; background-color: #fff; }
[data-view="sp"] .cp26as-s3-cta-tit { font-size: 20px; gap: 10px; }
[data-view="sp"] .cp26as-s3-cta__card { flex-direction: column; padding: 14px; border-radius: 14px; box-shadow: 5px 5px 0 var(--navy); }
[data-view="sp"] .cp26as-s3-cta__tab { border-radius: 0 0 10px 10px; margin-bottom: 8px; font-size: 14px; }
[data-view="sp"] .cp26as-s3-cta__num { font-size: 38px; }
[data-view="sp"] .cp26as-s3-cta__button { width: 100%; justify-content: center; margin-top: 10px; }
[data-view="sp"] .cp26as-s3-cta-note { font-size: 14px; line-height: 1.5; width: 100%; }
[data-view="sp"] .cp26as-s3-cta-note2 { font-size: 14px; line-height: 1.5; width: 100%; margin-top: 10px; }

[data-view="sp"] .cp26as-s3-series { padding: 50px 16px 30px;  }
[data-view="sp"] .cp26as-s3-series__tit { font-size: 26px; }
[data-view="sp"] .cp26as-s3-series__intro { flex-direction: column; /*align-items: center; text-align: center;*/   gap: 14px; }
[data-view="sp"] .cp26as-s3-series__intro-photo { width: 100%; max-width: 320px; margin-top: 20px;}
[data-view="sp"] .cp26as-s3-series__intro-tit { font-size: 24px; font-weight: 600; line-height: 1.5; }
[data-view="sp"] .cp26as-s3-series__intro-text { font-size: 16px; font-weight: 500; line-height: 1.5; }
[data-view="sp"] .cp26as-s3-series__intro-note { font-size: 14px; font-weight: 400; line-height: 1.5; }
[data-view="sp"] .cp26as-s3-compare2 { flex-direction: column; gap: 20px; margin-top: 10px; }
[data-view="sp"] .cp26as-s3-compare2__head { padding: 16px 20px 16px 90px; min-height: 60px; }
[data-view="sp"] .cp26as-s3-compare2__no { font-size: 30px; left: 12px; }
[data-view="sp"] .cp26as-s3-compare2__label { left: 52px; font-size: 11px; }
[data-view="sp"] .cp26as-s3-compare2__tit { font-size: 20px; }
[data-view="sp"] .cp26as-s3-compare2__tit b { font-size: 26px; }
[data-view="sp"] .cp26as-s3-compare2__stat span { font-size: 30px; }
[data-view="sp"] .cp26as-s3-lineup__grid { display: none; }
[data-view="sp"] .cp26as-s3-lineup__slider--sp { height: 32px; }
[data-view="sp"] .cp26as-s3-lineup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
[data-view="sp"] .cp26as-s3-lineup__list > li { display: flex; gap: 14px; align-items: flex-start; }
[data-view="sp"] .cp26as-s3-lineup__list img { flex: none; width: 80px; height: 80px; object-fit: cover; }
[data-view="sp"] .cp26as-s3-lineup__cat { display: inline-block; width: auto; padding: 8px 12px; margin-top: 0; line-height: 1; }
[data-view="sp"] .cp26as-s3-lineup__name { font-size: 16px; }
[data-view="sp"] .cp26as-s3-lineup__desc { font-size: 14px; line-height: 1.5; }


/* ============================== section_04.css ============================== */
/* ================================================================
   26autumn-stepup-cp / section_04.css
   担当: 「あなたのベストスタイルを」ビフォーアフター事例 2本
        + 新商品ブースター訴求CTA（PC: 1:1015 / SP: 1:2686）
   スコープ: すべてのクラスに "cp26as-" プレフィックス
   ブレークポイント: 767px以下 = SP
   フォントは既存サイト踏襲: A-OTF UD Shin Go Pro 系 + 游ゴシック等フォールバック
================================================================= */

.cp26as-cases,
.cp26as-cases * {
  box-sizing: border-box;
}

.cp26as-cases {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 102px 20px 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) calc(66.01% - 300px), #FFF calc(100% - 800px)), linear-gradient(117deg, #EBF9FE 1.18%, #52AEFF 52.17%, #E4FAFF 100%);

  /*background-image: url(/mens/campaign/26autumn-stepup-cp/assets/section_04_cases-bg.svg);
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
  font-family: var(--jp-font);*/
}

.cp26as-cases__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------
   見出し（アデランスの増毛で／あなたの[ベストスタイル]を）
--------------------------------------------------------------- */
.cp26as-cases__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.cp26as-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px 12px 16px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  border: 2px solid var(--navy);
  border-radius: 3px 14px 3px 3px;
  box-shadow: 2px 3px 0 rgba(0, 31, 82, 0.18);
}

.cp26as-flag::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -14px;
  width: 4px;
  height: 16px;
  background: var(--navy);
  border-radius: 2px;
}

.cp26as-flag::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -16px;
  width: 7px;
  height: 7px;
  background: var(--navy);
  border-radius: 50%;
}

.cp26as-cases__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.2;
}

.cp26as-cases__title-mark {
  position: relative;
  display: inline-flex;
  padding: 6px 24px;
  background: linear-gradient(90deg, #fff, #fff), linear-gradient(90deg, #d9d9d9, #d9d9d9);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  transform: skewX(-8deg);
}

.cp26as-cases__title-mark span {
  display: inline-block;
  transform: skewX(8deg);
}

.cp26as-cases__note {
  margin: 8px 0 28px;
  color: #222;
  font-size: 16px;
  text-align: right;
}

/* ---------------------------------------------------------------
   フラット化画像（依頼により各グルーピングを1枚画像化した箇所）
--------------------------------------------------------------- */
.cp26as-cases__head-imgwrap {
  align-self: center;
}
.cp26as-cases__head-imgwrap img,
.cp26as-cta04__title-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1440px;
  margin: 0 auto;
}
.cp26as-cases__title-img { margin: 0; line-height: 0; }
.cp26as-case__top--flat { display: block; }
.cp26as-case__top--flat img {
  display: block;
  width: auto;
  height: auto;
  /*max-width: 1280px;*/
  margin: 0 auto;
  z-index: 100;
}
.cp26as--01 .cp26as-case__top--flat,
.cp26as--02 .cp26as-case__top--flat {
  position: relative;
}
.cp26as--01 .cp26as-case__top--flat::before {
  content: "";
  position: absolute;
  top: 17.55%;
  left: calc(50% - 50vw);
  width: 50vw;
  height: 93%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 0;
}
.cp26as--01 .cp26as-case__top--flat::after {
  content: "";
  position: absolute;
  top: 62%;
  right: calc(50% - 50vw);
  width: calc(50vw - 5%);
  height: 51%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 0;
}
.cp26as--02 .cp26as-case__top--flat::before {
  content: "";
  position: absolute;
  top: 61%;
  left: calc(50% - 50vw);
  width: calc(50vw - 6%);
  height: 46%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 0;
}
.cp26as--02 .cp26as-case__top--flat::after {
  content: "";
  position: absolute;
  top: 22%;
  right: calc(50% - 50vw);
  width: calc(50vw - 5%);
  height: 87%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .cp26as-cases__head-imgwrap img {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
  }
}
/* ---------------------------------------------------------------
   事例カード共通（Style01 = blue / Style02 = navy）
--------------------------------------------------------------- */
.cp26as-case {
  --accent: var(--blue);
  margin-bottom: 100px;
}

.cp26as-case--02 {
  --accent: var(--navy);
}

.cp26as-case__style {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--accent);
  white-space: nowrap;
}

.cp26as-case__style-word {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-style: italic;
  font-size: 34px;
  transform: rotate(-8deg);
  display: inline-block;
}

.cp26as-case__style-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 76px;
  line-height: 0.8;
  font-weight: 400;
}

.cp26as-case__point {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 26px 28px;
  z-index: 10;
}

.cp26as-case__point-title {
  margin: 0 0 20px;
  color: var(--accent);
  font-weight: 700;
  font-size: 30px;
  text-align: center;
}

.cp26as-case__point-body {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.cp26as-case__thumb {
  flex: 0 0 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cp26as-case__thumb-frame {
  width: 118px;
  border-radius: 2px;
  overflow: hidden;
  background: #d4e7f7;
}

.cp26as-case__thumb-frame img {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: cover;
}

.cp26as-case__thumb-tag {
  display: block;
  padding: 4px 0;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.03em;
}

.cp26as-case__thumb-cap {
  margin: 0;
  font-size: 15px;
  color: #222;
  white-space: nowrap;
}

.cp26as-case__list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cp26as-case__list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cp26as-case__list-row + .cp26as-case__list-row {
  border-top: 1px dashed #c9c9c9;
  padding-top: 18px;
}

.cp26as-case__list-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}

.cp26as-case__list-tag svg {
  width: 22px;
  height: 20px;
  color: var(--accent);
  flex: 0 0 auto;
}

.cp26as-case__list-diagram {
  width: 92px;
  height: 46px;
  color: var(--accent);
  flex: 0 0 auto;
}

/* ---- 上段グリッド（メイン写真 + Style/ポイントカード + サブ写真） ---- */
.cp26as-case__top {
  display: grid;
  column-gap: 24px;
  row-gap: 20px;
  align-items: start;
}

.cp26as-case__top.l30 {
  position: relative;
  left: 30px;
}

.cp26as--01 .cp26as-case__top {
  /*grid-template-columns: 1.05fr 1fr;
  grid-template-areas: "main content" "main subrow";*/
}

.cp26as--02 .cp26as-case__top {
  /*grid-template-columns: 1fr 1.05fr;
  grid-template-areas: "content main" "subrow main";*/
}

.cp26as-case__photo--main {
  grid-area: main;
  position: relative;
}

.cp26as-case__content {
  grid-area: content;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cp26as--02 .cp26as-case__content {
  flex-direction: row-reverse;
}

.cp26as-case__subrow {
  grid-area: subrow;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  justify-content: flex-end;
}

.cp26as--02 .cp26as-case__subrow {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.cp26as-case__photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #d4e7f7;
  line-height: 0;
}

.cp26as-case__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp26as-case__photo--main {
  aspect-ratio: 460 / 700;
}

.cp26as-case__photo--sub {
  flex: 1 1 auto;
  aspect-ratio: 420 / 440;
  align-self: flex-end;
}

.cp26as-case__stat {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 16px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  transform: skewX(-8deg);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.cp26as-case__stat > * {
  display: inline-block;
  transform: skewX(8deg);
}

.cp26as-case__stat-pre {
  font-size: 18px;
}

.cp26as-case__stat-num {
  font-size: 30px;
  font-family: Georgia, "Times New Roman", serif;
}

.cp26as-case__stat-post {
  font-size: 18px;
}

.cp26as-case__vert {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-self: flex-end;
  margin-bottom: 4px;
}

.cp26as-case__vert-box {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 20px;
  padding: 10px 6px;
}

.cp26as--01 .cp26as-case__vert-box {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

.cp26as--02 .cp26as-case__vert-box {
  background: var(--accent);
  color: #fff;
}

/* ---- Before→After 比較カード ---- */
.cp26as-case__compare {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  padding: 33px 50px;
  position: relative;
  z-index: 1;
}

.cp26as-case__compare-title01 {
  margin: 0 0 20px;
  color: #006497;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  text-align: center;
  font-family: "Noto Sans JP",sans-serif;
}

.cp26as-case__compare-title02 {
  margin: 0 0 20px;
  color: #001F52;
  font-weight: 700;
  font-size: 33px;
  line-height: 1.5;
  text-align: center;
  font-family: "Noto Sans JP",sans-serif;
}

.cp26as-case__compare-strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.cp26as-case__compare-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cp26as-case__compare-photo {
  position: relative;
  width: 266px;
  height: 266px;
  border-radius: 2px;
  overflow: hidden;
  background: #d4e7f7;
}

.cp26as-case__compare-photo a.mod-modal-btn {
  display: block;
  width: 100%;
  height: 100%;
}

.cp26as-case__compare-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp26as-case__zoom {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
  display: none;
}

.cp26as-case__compare-label {
  margin: 0;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
  font-size: 33px;
  font-family: "Noto Sans JP",sans-serif;
  text-align: center;
}
.cp26as-case__compare-label span {
  font-weight: 700;
  font-size: 20px;
  font-family: "Noto Sans JP",sans-serif;
}

.cp26as-case__compare-label--before {
  line-height: 1.6;
  font-family: "Noto Sans JP",sans-serif;
  font-size: 25px;
}

.cp26as-case__compare-label--after {
  color: #D40F0E;
}

.cp26as-case__compare-arrow {
  align-self: center;
  width: 24px;
  height: 44px;
  color: var(--accent);
  margin-top: -55px;
}

.cp26as-case__compare-hint {
  display: none;
  margin: 8px 0 0;
  text-align: center;
  color: #333;
  font-size: 14px;
  font-weight: 700;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-case__compare {
    width: 100%;
  }
  .cp26as-case__compare-item {
    width: 30%;
  }
  .cp26as-case__compare-photo {
    width: 100%;
    height: auto;
  }
}
/* ---------------------------------------------------------------
   CTA（新商品ブースターも試せる！）
--------------------------------------------------------------- */
.cp26as-cta04 {
  margin-top: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cp26as-cta04__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--navy);
  font-weight: 700;
  text-align: center;
}

.cp26as-cta04__title span {
  font-size: 42px;
  line-height: 1.3;
}

.cp26as-cta04__title strong {
  font-size: 56px;
}

.cp26as-cta04__slash {
  flex: 0 0 auto;
  width: 3px;
  height: 56px;
  background: var(--navy);
  transform: rotate(20deg);
}

.cp26as-cta04__slash--r {
  transform: rotate(-20deg);
}

.cp26as-cta04__box {
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cp26as-cta04__date {
  padding: 8px 28px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  border-radius: 14px 14px 0 0;
}

.cp26as-cta04__date b {
  font-size: 38px;
  margin: 0 2px;
}

.cp26as-cta04__panel {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 18px 28px;
  background: #ffe436;
  border: 4px solid var(--navy);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--navy);
}

.cp26as-cta04__offer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cp26as-cta04__amount {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp26as-cta04__badge {
  padding: 6px 10px;
  background: var(--navy);
  color: #f7f7f9;
  font-weight: 700;
  font-size: 18px;
  border-radius: 5px;
  line-height: 1.15;
  text-align: center;
}

.cp26as-cta04__num {
  color: var(--navy);
  font-weight: 700;
  font-size: 62px;
  line-height: 1;
}

.cp26as-cta04__unit {
  color: var(--navy);
  font-weight: 700;
  font-size: 28px;
}

.cp26as-cta04__scalp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 3px solid var(--navy);
  border-radius: 5px;
}

.cp26as-cta04__scalp svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.cp26as-cta04__scalp span {
  color: #031143;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
}

.cp26as-cta04__now {
  position: absolute;
  top: -18px;
  right: -20px;
  padding: 4px 8px;
  background: linear-gradient(172deg, #f81f1c 0%, #b40101 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 3px;
  transform: rotate(-8deg);
  white-space: nowrap;
}

.cp26as-cta04__price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp26as-cta04__price-old {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.cp26as-cta04__price-old-label {
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
}

.cp26as-cta04__price-old-value {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--navy);
  font-weight: 700;
}

.cp26as-cta04__price-old-value::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 2px;
  background: var(--navy);
  transform: rotate(-8deg);
}

.cp26as-cta04__price-old-value b {
  font-size: 44px;
}

.cp26as-cta04__price-old-value small {
  font-size: 14px;
}

.cp26as-cta04__price-arrow {
  width: 24px;
  height: 44px;
  color: var(--navy);
}

.cp26as-cta04__price-new {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  background: linear-gradient(181deg, #f81f1c 28%, #b40101 74%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.cp26as-cta04__price-new b {
  font-size: 92px;
  line-height: 0.8;
}

.cp26as-cta04__price-new-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.cp26as-cta04__price-new small {
  font-size: 15px;
}

.cp26as-cta04__price-new-unit span {
  font-size: 45px;
}

.cp26as-cta04__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  border-radius: 5px;
  background: linear-gradient(172deg, #f81f1c 0%, #b40101 100%);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  white-space: nowrap;
}

.cp26as-cta04__btn svg {
  width: 26px;
  height: 26px;
}

.cp26as-cta04__note {
  margin: 4px 0 0;
  color: #222;
  font-size: 16px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .cp26as-cta04 { margin-top: 50px;}
}
/* =================================================================
   SP（767px以下）
================================================================= */
@media (max-width: 767px) {
  .cp26as-cases {
    margin-top: -27vh;
    padding: 50px 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.00) calc(66.01% - 600px), #FFF calc(100% - 6 00px)), linear-gradient(117deg, #EBF9FE 1.18%, #52AEFF 22.17%, #E4FAFF 63%)
  }

  .cp26as-cases__inner {
    /*max-width: 335px; */
  }

  .cp26as-flag {
    font-size: 15px;
    padding: 8px 16px 9px 14px;
  }

  .cp26as-cases__title {
    font-size: 28px;
    gap: 6px;
  }

  .cp26as-cases__title-mark {
    padding: 3px 14px;
  }

  .cp26as-cases__note {
    font-size: 16px;
    margin: 20px 0 20px;
    position: relative;
    right: 10px;
  }

  .cp26as-case {
    margin-bottom: 44px;
  }

  /* --- SPは縦積みレイアウト --- */
  .cp26as-case__sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 20px; */
  }

  .cp26as-case__style {
    justify-content: center;
    width: 100%;
  }

  .cp26as-case__style-word {
    font-size: 22px;
  }

  .cp26as-case__style-num {
    font-size: 44px;
  }

  .cp26as-case__point {
    width: 100%;
    border-radius: 10px;
    padding: 20px;
  }

  .cp26as-case__point-title {
    font-size: 21px;
    margin-bottom: 14px;
  }

  .cp26as-case__point-body {
    gap: 14px;
  }

  .cp26as-case__thumb {
    flex: 0 0 96px;
  }

  .cp26as-case__thumb-frame {
    width: 96px;
  }

  .cp26as-case__thumb-frame img {
    height: 96px;
  }

  .cp26as-case__thumb-tag {
    font-size: 13px;
  }

  .cp26as-case__thumb-cap {
    font-size: 13px;
  }

  .cp26as-case__list {
    gap: 12px;
  }

  .cp26as-case__list-row + .cp26as-case__list-row {
    padding-top: 12px;
  }

  .cp26as-case__list-tag {
    font-size: 15px;
  }

  .cp26as-case__list-tag svg {
    width: 18px;
    height: 16px;
  }

  .cp26as-case__list-diagram {
    width: 74px;
    height: 38px;
  }

  .cp26as-case__stack {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .cp26as-case__photo--sp-b,
  .cp26as-case__photo--sp-a {
    width: 100%;
    aspect-ratio: 300 / 300;
  }

  .cp26as-case__photo--sp-a {
    aspect-ratio: 300 / 340;
    margin-top: -1px;
  }

  .cp26as-case__vert--sp {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
  }

  .cp26as-case__vert--sp .cp26as-case__vert-box {
    font-size: 16px;
    padding: 8px 5px;
  }

  .cp26as-case__stat {
    padding: 6px 12px;
    left: 12px;
    bottom: 12px;
  }

  .cp26as-case__stat-pre,
  .cp26as-case__stat-post {
    font-size: 14px;
  }

  .cp26as-case__stat-num {
    font-size: 22px;
  }

  .cp26as-case__compare {
    padding: 18px 16px;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
  }

  .cp26as-case__compare-title01,
  .cp26as-case__compare-title02 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 14px;
  }

  .cp26as-case__compare-strip {
    gap: 6px;
  }

  .cp26as-case__compare-photo {
    width: 85px;
    height: 85px;
  }

  .cp26as-case__zoom {
    display: block;
  }

  .cp26as-case__compare-label {
    font-size: 15px;
  }

  .cp26as-case__compare-arrow {
    width: 7px;
    height: 20px;
    margin-top: -30px;
  }

  .cp26as-case__compare-hint {
    display: block;
  }

  /* --- CTA --- */
  .cp26as-cta04 {
    /*gap: 12px;*/
    width: 90%;
    margin: 0 auto;
  }

  .cp26as-cta04__title span {
    font-size: 28px;
  }

  .cp26as-cta04__title strong {
    font-size: 36px;
  }

  .cp26as-cta04__slash {
    height: 40px;
  }

  .cp26as-cta04__box {
    max-width: 335px;
  }

  .cp26as-cta04__date {
    font-size: 15px;
    padding: 5px 18px;
    border-radius: 10px 10px 0 0;
  }

  .cp26as-cta04__date b {
    font-size: 22px;
  }

  .cp26as-cta04__panel {
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    border-width: 2.6px;
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--navy);
  }

  .cp26as-cta04__offer {
    gap: 10px;
  }

  .cp26as-cta04__badge {
    font-size: 15px;
    padding: 4px 6px;
  }

  .cp26as-cta04__num {
    font-size: 44px;
  }

  .cp26as-cta04__unit {
    font-size: 20px;
  }

  .cp26as-cta04__scalp {
    padding: 6px 10px;
    border-width: 2px;
  }

  .cp26as-cta04__scalp svg {
    width: 20px;
    height: 20px;
  }

  .cp26as-cta04__scalp span {
    font-size: 13px;
  }

  .cp26as-cta04__now {
    font-size: 12px;
    top: -14px;
    right: -12px;
  }

  .cp26as-cta04__price-old-value b {
    font-size: 26px;
  }

  .cp26as-cta04__price-arrow {
    width: 14px;
    height: 24px;
  }

  .cp26as-cta04__price-new b {
    font-size: 50px;
  }

  .cp26as-cta04__price-new-unit span {
    font-size: 26px;
  }

  .cp26as-cta04__btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 18px;
  }

  .cp26as-cta04__note {
    font-size: 13px;
  }
}


/* ============================== section_05.css ============================== */
/* =========================================================
   section_05: ステップアップ増毛1100本キャンペーン
   PC / SP レスポンシブ共通CSS (breakpoint: 767px)
   ========================================================= */

.cp26as-s5 {
  --navy: #001f52;
  --red1: #f81f1c;
  --red2: #b40101;
  --redcircle: #d40f0e;
  --yellow: #ffe436;
  --bg-light: #eaf3fb;
  --bg-light2: #dcecf9;
  --text: #222222;
  font-family: "A-OTF UD Shin Go Pro", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: var(--text);
  background: #ffffff;
  overflow: hidden;
}

.cp26as-s5 * { box-sizing: border-box; }
.cp26as-s5 img { display: block; /*width: 100%;*/ height: 100%; object-fit: cover; }
.cp26as-s5 b { font-weight: 700; }
.cp26as-s5 em { font-style: normal; }

.cp26as-num-red {
  background: linear-gradient(180deg, var(--red1) 0%, var(--red2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ---------------------------------------------------------
   キャンペーンキャッチ
   --------------------------------------------------------- */
.cp26as-campaign {
  position: relative;
  padding: 100px 20px 40px;
  text-align: center;
  background: linear-gradient(180deg, #89c6ee 0%, #e5f0fa 65%, #e5f0fa 100%);
  overflow: hidden;
}
.cp26as-campaign__bg {
  position: absolute;
  inset: 0;
  background: url("/mens/campaign/26autumn-stepup-cp/assets/section_05_flat-campaign-inner-bg_pc.webp") top /contain no-repeat, radial-gradient(circle at 50% 65%, rgba(137,198,238,.55), rgba(137,198,238,0) 60%) #e5f0fa;
  mix-blend-mode: lighten;
  /* opacity: .8; */
}
.cp26as-campaign__inner { position: relative; z-index: 1; }
.cp26as-campaign__heading { margin: 0; }
.cp26as-campaign__label {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 4px;
}
.cp26as-campaign__label span { color: var(--navy); font-size: 24px; margin-left: 4px; }
.cp26as-campaign__label { color: var(--red1); }
.cp26as-campaign__title {
  font-size: 74px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.1;
  position: relative;
  display: inline-block;
}
.cp26as-icon-arrowup05 { width: 46px; height: 46px; vertical-align: -6px; margin-left: 4px; transform: rotate(-6deg); }
.cp26as-campaign__num {
  margin: 0 0 20px;
  line-height: 1;
  font-weight: 700;
  color: var(--navy);
}
.cp26as-campaign__main { font-size: 70px; }
.cp26as-campaign__count {
  font-size: 145px;
  background: linear-gradient(180deg, var(--red1) 28%, var(--red2) 74%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.05em;
  padding: 0 6px;
}
.cp26as-campaign__pill, .cp26as-pill05 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 4px solid var(--navy);
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
}
.cp26as-icon-plus05 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 28px;
  font-style: normal;
  flex-shrink: 0;
}
.cp26as-icon-plus05--sm { width: 20px; height: 20px; font-size: 14px; }

@media (max-width: 767px) {
  .cp26as-campaign__heading { padding: 0 20px;}
}
/* ---------------------------------------------------------
   見出しリボン
   --------------------------------------------------------- */
.cp26as-ribbon {
  position: relative;
  max-width: 380px;
  margin: 43px auto 0;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 6px;
}
/*.cp26as-ribbon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: var(--navy);
}
.cp26as-ribbon--sub { max-width: 620px; margin-top: 0; margin-bottom: 30px; font-size: 24px; }

/* ---------------------------------------------------------
   フラット化画像（依頼により各グルーピングを1枚画像化した箇所）
   --------------------------------------------------------- */
.cp26as-ribbon.cp26as-ribbon--flat {
  background: none;
  padding: 0;
  border-radius: 0;
  max-width: none;
}
.cp26as-ribbon--flat img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: unset;
  margin: 0 auto;
}
.cp26as-campaign__inner--flat img,
.cp26as-step05--flat img,
.cp26as-offer__inner--flat img,
.cp26as-cta05__ttl--flat img,
.cp26as-cta05__btn--flat img {
  display: block;
  /*width: 100%;*/
  height: auto;
  object-fit: unset;
  max-width: 1440px;
  margin: 0 auto;
}
.cp26as-cta05__ttl.cp26as-cta05__ttl--flat { display: block; }
@media (max-width: 767px) {
  .cp26as-campaign__inner--flat img,
  .cp26as-step05--flat img,
  .cp26as-offer__inner--flat img,
  .cp26as-cta05__ttl--flat img,
  .cp26as-cta05__btn--flat img {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-campaign__inner--flat img,
  .cp26as-step05--flat img,
  .cp26as-offer__inner--flat img,
  .cp26as-cta05__ttl--flat img,
  .cp26as-cta05__btn--flat img {
    max-width: 100%;
  }
  .cp26as-step05__svg {
    max-width: 100%;
  }
}
/* ---------------------------------------------------------
   ステップ共通
   --------------------------------------------------------- */
.cp26as-step05s { max-width: 1440px; margin: 20px auto 0; }
.cp26as-step05 { position: relative; margin-bottom: 40px; }
.cp26as-step05.mbm22 { position: relative; margin-bottom: -22px; }
.cp26as-step05__bar {
  position: relative;
  z-index: 2;
  background: var(--navy);
  border: 3px solid var(--navy);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp26as-step05__label {
  color: #fff;
  font-weight: 700;
  font-size: 34px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cp26as-step05__label b { font-size: 46px; }
.cp26as-step05__badge {
  position: absolute;
  left: 210px;
  top: -47px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  line-height: 1.25;
}
.cp26as-step05__badge--yellow { background: var(--yellow); color: var(--navy); border: 3px solid var(--navy); }
.cp26as-step05__badge--red { background: var(--redcircle); border: 3px solid #fff; font-size: 34px; }

.cp26as-step05__body {
  background: #fff;
  border: 3px solid var(--navy);
  border-top: none;
  padding: 40px 50px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.cp26as-step05__trial-ttl { font-size: 30px; font-weight: 700; margin: 0; text-align: center; }
.cp26as-step05__trial-num { margin: 0; text-align: center; line-height: .9; }
.cp26as-step05__trial-num .cp26as-num-red { font-size: 110px; }
.cp26as-step05__trial-num .cp26as-unit { font-size: 60px; color: var(--navy); font-weight: 700; }
.cp26as-bubble05 {
  position: relative;
  border: 3px solid var(--navy);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  flex: 1;
}
.cp26as-bubble05::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-right-color: var(--navy);
}
.cp26as-bubble05__tag {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  padding: 10px 12px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.15;
}
.cp26as-bubble05__txt { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; }
.cp26as-bubble05__txt b { color: var(--navy); font-size: 44px; }
.cp26as-step05__photo { width: 300px; height: 220px; overflow: hidden; border-radius: 4px; flex-shrink: 0; }

.cp26as-arrow {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  height: 100px;
}
.cp26as-arrow svg { width: 100%; height: 100%; display: block; }
.cp26as-arrow__txt {
  position: absolute;
  top: 8px; left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  font-size: 16px;
}
.cp26as-arrow__txt b { font-size: 24px; }

/* Step 02 body */
.cp26as-step05__body--02 { flex-direction: column; align-items: stretch; gap: 40px; padding-top: 30px; }

.cp26as-ba { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 10px 0; }
.cp26as-ba__photo { position: relative; background: #f0f3f8; overflow: hidden; flex-shrink: 0; }
.cp26as-ba__photo--before { width: 290px; height: 260px; }
.cp26as-ba__photo--after { width: 350px; height: 320px; }
.cp26as-ba__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  padding: 6px 0;
}
.cp26as-ba__arrow { position: absolute; width: 90px; height: 75px; left: 50%; top: 40%; transform: translate(-50%, -50%); }
.cp26as-pinpoint { text-align: center; max-width: 400px; }
.cp26as-pinpoint__bubble {
  position: relative;
  border: 3px solid var(--navy);
  border-radius: 40px;
  padding: 14px 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  display: inline-block;
}
.cp26as-pinpoint__bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -14px; transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--navy);
}
.cp26as-pinpoint__ttl { font-size: 26px; font-weight: 700; margin: 0; }
.cp26as-pinpoint__ttl b { color: var(--navy); font-size: 38px; }
.cp26as-pinpoint__num { margin: 0; line-height: .9; }
.cp26as-pinpoint__num .cp26as-num-red { font-size: 110px; }
.cp26as-pinpoint__num .cp26as-unit { font-size: 62px; color: var(--navy); font-weight: 700; }

.cp26as-more { text-align: center; }
.cp26as-more__ttl { font-size: 32px; font-weight: 700; color: var(--navy); margin: 0 0 20px; line-height: 1.3; }
.cp26as-more__tag {
  position: relative;
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 6px 16px;
  margin-right: 10px;
}
.cp26as-more__photo { position: relative; height: 300px; overflow: hidden; margin-bottom: 20px; }
.cp26as-more__feature {
  position: absolute;
  right: 40px;
  top: 40px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.cp26as-more__feature span {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 30px;
  padding: 6px 14px;
}
.cp26as-more__feature i { font-style: normal; color: var(--navy); font-size: 28px; margin: 0 8px; }

.cp26as-care {
  position: relative;
  max-width: 526px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
}
.cp26as-care__img { width: 129px; height: 264px; flex-shrink: 0; object-fit: contain; background: #f4f4f4; }
.cp26as-care__badge {
  position: absolute;
  left: 129px;
  top: -20px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  padding: 8px 18px;
  border-radius: 4px;
}
.cp26as-care__txt { margin: 30px 0 0 40px; font-size: 22px; line-height: 1.5; border-top: 4px solid var(--navy); padding-top: 12px; max-width: 320px; }
.cp26as-care__txt b { color: var(--navy); font-size: 28px; }

.cp26as-wavegap { line-height: 0; }
.cp26as-wavegap img { width: 100%; height: 46px; display: block; transform: scaleY(-1); }
.cp26as-wavegap--top img { transform: none; }

/* ---------------------------------------------------------
   増毛後も普段通りの生活 (シャンプー/ドライヤー/整髪料)
   --------------------------------------------------------- */
.cp26as-life { max-width: 1440px; margin: 0 auto; padding: 0 20px; text-align: center; }
.cp26as-life__list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; justify-content: center; gap: 40px; position: relative; z-index: 1; }
.cp26as-life__list li { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 373px; height: auto; }
.cp26as-life__list img {
  width: 100%; height: auto;
  border: 3px solid var(--navy);
  background: #d4e7f7;
}
.cp26as-life__list span { line-height: 1.2; font-size: 28px; font-weight: 700; font-family: "Noto Sans JP",sans-serif; }

@media (max-width: 767px) {
  .cp26as-life__list li {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    gap: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cp26as-life__list img {
    width: 100%;
    height: auto;
  }
}
/* ---------------------------------------------------------
   価格 / CTA
   --------------------------------------------------------- */
.cp26as-offer {
  position: relative;
  padding: 10px 20px 100px;
  background-image: url("/mens/campaign/26autumn-stepup-cp/assets/section_05_bg-bottom.webp");
  background-color: #e5f0fa;
  /* background-blend-mode: color-burn; */
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  overflow: hidden;
  text-align: center;
}
.cp26as-offer__inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; text-align: center; }
.cp26as-offer__lead { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.cp26as-offer__num { font-size: 34px; font-weight: 700; color: var(--navy); }
.cp26as-offer__num b { font-size: 52px; }
.cp26as-offer__nantoLabel { font-size: 34px; font-weight: 700; color: var(--navy); }
.cp26as-offer__nantoLabel b { font-size: 46px; }

.cp26as-price05 { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cp26as-price05__full { display: flex; flex-direction: column; align-items: flex-start; }
.cp26as-price05__label { font-size: 20px; font-weight: 700; color: var(--navy); }
.cp26as-price05__yen { font-size: 60px; font-weight: 700; color: var(--navy); position: relative; }
.cp26as-price05__yen em { font-size: 16px; font-style: normal; margin-right: 2px; }
.cp26as-price05__full .cp26as-price05__yen::after {
  content: "";
  position: absolute;
  left: -4%;
  top: 50%;
  width: 108%;
  height: 3px;
  background: var(--red1);
  transform: rotate(-8deg);
}
.cp26as-price05__arrow { width: 30px; height: 54px; }
.cp26as-price05__now-yen {
  font-size: 108px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--red1) 28%, var(--red2) 74%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp26as-price05__now-yen em { font-size: 20px; font-style: normal; margin-right: 2px; }

.cp26as-cta05 { text-align: center; max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.cp26as-cta05__ttl { color: var(--navy); font-weight: 700; font-size: 36px; margin: 0 0 20px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.cp26as-cta05__line { width: 30px; height: 3px; background: var(--navy); display: inline-block; }
.cp26as-cta05__line:first-child { transform: rotate(25deg); }
.cp26as-cta05__line:last-child { transform: rotate(-25deg); }

.cp26as-cta05__btn { display: block; text-decoration: none; color: inherit; }
.cp26as-cta05__date {
  display: block;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  padding: 8px 0;
  border-radius: 14px 14px 0 0;
}
.cp26as-cta05__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--yellow);
  border: 4px solid var(--navy);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--navy);
  padding: 16px 24px;
  flex-wrap: wrap;
}
.cp26as-cta05__set { display: flex; align-items: center; gap: 10px; }
.cp26as-cta05__tagnum { display: inline-flex; align-items: center; background: var(--navy); border-radius: 6px; padding: 6px 10px; color: #fff; font-weight: 700; }
.cp26as-cta05__tagnum b { font-weight: 700; }
.cp26as-cta05__label { font-size: 20px; margin-right: 4px; }
.cp26as-cta05__count { font-size: 62px; color: #fff; letter-spacing: -0.03em; }
.cp26as-cta05__unit { font-size: 30px; margin-left: 2px; }
.cp26as-cta05__sc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 3px solid var(--navy);
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  line-height: 1.2;
}
.cp26as-cta05__flag {
  position: absolute;
  left: -24px;
  top: -24px;
  background: linear-gradient(180deg, var(--red1), var(--red2));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 3px;
  padding: 4px 8px;
  transform: rotate(-8deg);
  white-space: nowrap;
}
.cp26as-cta05__pricebox { display: flex; align-items: center; gap: 10px; }
.cp26as-cta05__old { font-size: 15px; font-weight: 700; color: var(--navy); text-align: left; position: relative; }
.cp26as-cta05__old b { font-size: 48px; line-height: 1; display: block; margin-top: 2px; }
.cp26as-cta05__old em { font-size: 9px; font-style: normal; }
.cp26as-cta05__old::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: 10px;
  width: 104%;
  height: 3px;
  background: var(--red1);
  transform: rotate(-8deg);
}
.cp26as-cta05__arrowsm { width: 24px; height: 44px; flex-shrink: 0; }
.cp26as-cta05__new {
  font-size: 96px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--red1) 28%, var(--red2) 74%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp26as-cta05__new em { font-size: 15px; font-style: normal; margin-right: 2px; }
.cp26as-cta05__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--red1), var(--red2));
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  padding: 20px 24px;
  border-radius: 6px;
}
.cp26as-cta05__go svg { width: 28px; height: 28px; }
.cp26as-cta05__note { text-align: left; font-size: 16px; line-height: 1.6; color: var(--text); margin: 10px auto 0; font-family: "Noto Sans JP",sans-serif; max-width: 1200px;}

/* =========================================================
   SP (max-width: 767px)
   ========================================================= */
@media (max-width: 767px) {
  .cp26as-campaign { padding: 60px 0 0; }
  .cp26as-campaign__label { font-size: 20px; }
  .cp26as-campaign__label span { font-size: 15px; }
  .cp26as-campaign__title { font-size: 38px; }
  .cp26as-icon-arrowup05 { width: 30px; height: 30px; }
  .cp26as-campaign__main { font-size: 46px; }
  .cp26as-campaign__count { font-size: 78px; }
  .cp26as-campaign__num { margin-bottom: 12px; }
  .cp26as-campaign__pill, .cp26as-pill05 { font-size: 18px; padding: 6px 16px; border-width: 2.5px; gap: 6px; }
  .cp26as-icon-plus05 { width: 28px; height: 28px; font-size: 18px; }

  .cp26as-ribbon { font-size: 18px; padding: 10px 16px; max-width: 280px; margin-top: 40px; }
  .cp26as-ribbon.mt10 { margin-top: 10px; }
  .cp26as-ribbon.cp26as-ribbon--flat { margin-bottom: 10px; }
  .cp26as-ribbon.cp26as-ribbon--flat .w60 { width: 60%; }
  .cp26as-ribbon--sub { font-size: 20px; max-width: 300px; }

  .cp26as-step05s { padding: 30px 20px 0; }
  .cp26as-step05 { margin-bottom: 30px; }
  .cp26as-step05.cp26as-step05--flat { margin-bottom: 10px; }
  .cp26as-step05.cp26as-step05--flat.mb20 { margin-bottom: 20px; }
  .cp26as-step05.cp26as-step05--flat { margin-bottom: 10px; }
  .cp26as-step05__bar { height: 40px; }
  .cp26as-step05__label { font-size: 20px; gap: 6px; }
  .cp26as-step05__label b { font-size: 32px; }
  .cp26as-step05__badge { width: 90px; height: 90px; left: -9px; top: -26px; font-size: 18px; }
  .cp26as-step05__badge--red { font-size: 20px; }

  .cp26as-step05__body { flex-direction: column; padding: 20px; gap: 20px; }
  .cp26as-step05__trial-ttl { font-size: 22px; }
  .cp26as-step05__trial-num .cp26as-num-red { font-size: 70px; }
  .cp26as-step05__trial-num .cp26as-unit { font-size: 38px; }
  .cp26as-step05__photo { width: 100%; height: auto; aspect-ratio: 295/221; }
  .cp26as-bubble05 { width: 100%; padding: 14px 16px; }
  .cp26as-bubble05::before { left: 50%; top: -18px; transform: translateX(-50%) rotate(90deg); }
  .cp26as-bubble05__tag { font-size: 16px; padding: 6px 8px; }
  .cp26as-bubble05__txt { font-size: 18px; }
  .cp26as-bubble05__txt b { font-size: 28px; }

  .cp26as-arrow, .cp26as-arrow--sp { max-width: 335px; height: 90px; }
  .cp26as-arrow__txt { font-size: 13px; }
  .cp26as-arrow__txt b { font-size: 18px; }

  .cp26as-step05__body--02 { gap: 30px; padding: 20px; }
  .cp26as-pinpoint { max-width: 100%; }
  .cp26as-pinpoint__bubble { font-size: 16px; padding: 10px 16px; }
  .cp26as-pinpoint__ttl { font-size: 20px; }
  .cp26as-pinpoint__ttl b { font-size: 26px; }
  .cp26as-pinpoint__num .cp26as-num-red { font-size: 80px; }
  .cp26as-pinpoint__num .cp26as-unit { font-size: 40px; }

  .cp26as-ba, .cp26as-ba--sp { gap: 14px; align-items: flex-end; }
  .cp26as-ba__photo--before { width: 120px; height: 161px; }
  .cp26as-ba__photo--after { width: 161px; height: 214px; }
  .cp26as-ba__label { font-size: 20px; }
  .cp26as-ba__arrow { width: 50px; height: 42px; }

  .cp26as-more__ttl { font-size: 22px; margin-bottom: 14px; }
  .cp26as-more__photo { height: auto; aspect-ratio: 333/175; margin-bottom: 14px; }
  .cp26as-more__feature { right: 14px; top: 20px; gap: 6px; }
  .cp26as-more__feature span { font-size: 16px; padding: 4px 10px; }
  .cp26as-more__feature i { font-size: 16px; margin: 0 4px; }

  .cp26as-care { flex-direction: row; max-width: 305px; gap: 12px; }
  .cp26as-care__img { width: 59px; height: 120px; }
  .cp26as-care__badge { left: 60px; top: -14px; font-size: 14px; padding: 4px 10px; }
  .cp26as-care__txt { margin: 24px 0 0 0; font-size: 15px; max-width: 210px; }
  .cp26as-care__txt b { font-size: 18px; }

  .cp26as-life { padding: 0 20px 20px; }
  .cp26as-life__list { flex-wrap: wrap; gap: 20px; }
  .cp26as-life__list img { width: 157px; height: 157px; border-width: 2px; }
  .cp26as-life__list span { font-size: 16px; }

  .cp26as-offer { padding: 0 0 50px; background-position: bottom left -200px; background-size: 200%; }
  .cp26as-offer__lead { flex-direction: column; gap: 8px; margin-bottom: 4px; }
  .cp26as-offer__num { font-size: 24px; }
  .cp26as-offer__num b { font-size: 34px; }
  .cp26as-offer__sc-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 4px; }
  .cp26as-offer__nantoLabel { font-size: 18px; }
  .cp26as-offer__nanto { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 16px; }
  .cp26as-pill05 { font-size: 20px; padding: 6px 14px; }

  .cp26as-price05 { gap: 10px; }
  .cp26as-price05__label { font-size: 14px; }
  .cp26as-price05__yen { font-size: 34px; }
  .cp26as-price05__arrow--sp { width: 30px; height: 16px; }
  .cp26as-price05__now-yen { font-size: 62px; }

  .cp26as-cta05 { margin-top: 0; padding: 0 20px; }
  .cp26as-cta05__ttl { font-size: 22px; gap: 8px; margin-bottom: 0; }
  .cp26as-cta05__line { width: 18px; }
  .cp26as-cta05__date { font-size: 16px; padding: 6px 0; border-radius: 10px 10px 0 0; }
  .cp26as-cta05__box { flex-direction: column; border-radius: 10px; padding: 12px 16px; gap: 10px; box-shadow: 4px 4px 0 var(--navy); }
  .cp26as-cta05__set { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .cp26as-cta05__label { font-size: 13px; }
  .cp26as-cta05__count { font-size: 34px; }
  .cp26as-cta05__unit { font-size: 18px; }
  .cp26as-cta05__sc { font-size: 14px; padding: 6px 10px; }
  .cp26as-cta05__flag { font-size: 12px; left: -16px; top: -16px; padding: 3px 6px; }
  .cp26as-cta05__pricebox { gap: 6px; }
  .cp26as-cta05__old { font-size: 10px; }
  .cp26as-cta05__old b { font-size: 24px; }
  .cp26as-cta05__arrowsm { width: 14px; height: 26px; }
  .cp26as-cta05__new { font-size: 46px; }
  .cp26as-cta05__new em { font-size: 10px; }
  .cp26as-cta05__go { font-size: 17px; padding: 10px 16px; width: 100%; justify-content: center; }
  .cp26as-cta05__note { font-size: 14px; }
}


/* ============================== section_06.css ============================== */
/* ================================================================
   26autumn-stepup-cp / section_06
   増毛体験Q&A + 全国のサロン(地図)セクション
   クラス名はすべて cp26as- プレフィックス。767px以下をSPとして扱う。
================================================================= */

/* ---------- 共通トークン ---------- */
.cp26as-qa,
.cp26as-salonmap {
  --cp26as-navy: #001f52;
  --cp26as-navy-deep: #123676;
  box-sizing: border-box;
}
.cp26as-qa *,
.cp26as-salonmap *,
.cp26as-qa *::before,
.cp26as-qa *::after {
  box-sizing: border-box;
}

/* =========================================================
   増毛体験Q&A (PC 1:1448 / SP 1:3118)
========================================================= */
.cp26as-qa {
  background: #fff;
  padding: 80px 20px 100px;
}

.cp26as-qa__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* フラット化画像（依頼によりタイトル部分を1枚画像化） */
.cp26as-qa__title-img {
  margin: 0;
  line-height: 0;
}
.cp26as-qa__title-img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1440px;
  margin: 0 auto;
}

/* タイトル上の帯（リボン風の見出しラベル）。Figma上はVector画像だが、
   単純な単色図形のためCSSで再現（帯本体＋下向きの三角形の"しっぽ"）。 */
.cp26as-qa__eyebrow {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 26px 12px;
  background: var(--cp26as-navy);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.cp26as-qa__eyebrow::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 8px 0 0;
  border-color: var(--cp26as-navy) transparent transparent transparent;
}

.cp26as-qa__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.cp26as-qa__title-main {
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 48px);
  color: var(--cp26as-navy);
  line-height: 1.2;
}
.cp26as-qa__title-qa {
  display: inline-flex;
  align-items: baseline;
  padding-top: 10px;
  color: var(--cp26as-navy);
  font-family: "DIN Alternate", "Cambay", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.cp26as-qa__qa-big {
  font-size: clamp(34px, 5.3vw, 80px);
  line-height: 1;
}
.cp26as-qa__qa-amp {
  font-size: clamp(20px, 3.2vw, 48px);
  line-height: 1;
  padding: 0 2px;
}

.cp26as-qa__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 20px auto 0;
}

.cp26as-qa__item {
  background: #e5f0fa;
  padding: 0 40px;
}

.cp26as-qa__q-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}


/* --- 質問（クリックで開閉するヘッダー） --- */
.js-toggle:before,
.js-toggle:after {
  display: none;
}
.cp26as-qa__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 30px 0;
  cursor: pointer;
}
.cp26as-qa__q-row {
  display: flex;
  align-items: center;
  gap: 40px;
}
.cp26as-qa__label {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding-top: 6px;
  font-family: "DIN Alternate", "Cambay", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
}
.cp26as-qa__label--q {
  background: var(--cp26as-navy);
  color: #fff;
}
.cp26as-qa__label--a {
  /* background: #fff; */
  /* border: 4px solid var(--cp26as-navy); */
  color: var(--cp26as-navy);
}
.cp26as-qa__q-text {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #222;
  font-family: "Noto Sans JP",sans-serif;
}

/* --- 開閉アイコン（＋/－）。表示中(is-active)は横棒のみ＝Figma上の展開状態と一致 --- */
.cp26as-qa__toggle-icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cp26as-navy);
}
.cp26as-qa__toggle-icon::before,
.cp26as-qa__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.cp26as-qa__toggle-icon::before {
  width: 16px;
  height: 3px;
}
.cp26as-qa__toggle-icon::after {
  width: 3px;
  height: 16px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cp26as-qa__question.is-active .cp26as-qa__toggle-icon::after {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

/* --- 回答（アコーディオンの中身）。 --- */
.cp26as-qa__answer {
  width: 100%;
}
.cp26as-qa__divider {
  display: block;
  height: 1px;
  background: #222;
}
.cp26as-qa__a-row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 30px 0;
}
.cp26as-qa__a-text {
  flex: 1 1 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: #222;
}

/* ---------- SP（767px以下） ---------- */
@media (max-width: 767px) {
  .cp26as-qa__title-img {
    width: 80%;
    height: auto;
    margin: 0 auto;
  }
  .cp26as-qa {
    padding: 50px 20px 70px;
  }
  .cp26as-qa__eyebrow {
    padding: 7px 20px 10px;
  }
  .cp26as-qa__title {
    gap: 10px;
  }
  .cp26as-qa__list {
    gap: 20px;
    margin-top: 10px;
  }
  .cp26as-qa__item {
    padding: 0 20px;
  }
  .cp26as-qa__question {
    align-items: flex-start;
    align-items: center;
    gap: 6px;
    padding: 20px 0;
  }
  .cp26as-qa__q-row {
    flex: 1 1 0;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
  }
  .cp26as-qa__label {
    width: 48px;
    height: 48px;
    font-size: 32px;
    padding-top: 4px;
  }
  .cp26as-qa__label--a {
    border-width: 2.4px;
  }
  .cp26as-qa__q-text {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
  }
  .cp26as-qa__toggle-icon {
    width: 24px;
    height: 24px;
    margin-top: 4px;
  }
  .cp26as-qa__toggle-icon::before {
    width: 10px;
    height: 2px;
  }
  .cp26as-qa__toggle-icon::after {
    width: 2px;
    height: 10px;
  }
  .cp26as-qa__a-row {
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
  }
  .cp26as-qa__a-text {
    font-size: 16px;
    line-height: 1.8;
  }
}

/* =========================================================
   全国のサロン／地図 (PC 1:1514 / SP 1:3180)
========================================================= */
.cp26as-salonmap {
  background: var(--cp26as-navy-deep);
  overflow: hidden;
}

.cp26as-salonmap__stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- PC ---------- */
.cp26as-salonmap__stage--pc {
  max-width: 1440px;
  aspect-ratio: 1440 / 783;
}

.cp26as-salonmap__stage--pc .cp26as-salonmap__dotmap {
  position: absolute;
  left: 5.28%;
  top: 0.32%;
  width: 52.71%;
  height: 92.29%;
  object-fit: contain;
  object-position: left top;
}

.cp26as-salonmap__stage--pc .cp26as-salonmap__callout {
  position: absolute;
  left: 8.42%;
  top: 14.57%;
  width: 28.25%;
  min-height: 19.72%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.8% 2%;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.cp26as-salonmap__stage--pc .cp26as-salonmap__photo--chair {
  position: absolute;
  left: 37.16%;
  top: 68.54%;
  width: 14.51%;
  height: 26.3%;
  border-radius: 50%;
  overflow: hidden;
}
.cp26as-salonmap__stage--pc .cp26as-salonmap__photo--reception {
  position: absolute;
  left: 74.03%;
  top: 8.38%;
  width: 11.39%;
  height: 20.72%;
  border-radius: 50%;
  overflow: hidden;
}

.cp26as-salonmap__stage--pc .cp26as-salonmap__copy {
  position: absolute;
  right: 6.37%;
  top: 50%;
  width: 45%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}

.cp26as-salonmap__stage--pc .cp26as-salonmap__btn {
  position: absolute;
  right: 8.36%;
  top: 70.07%;
}

/* ---------- SP ---------- */
.cp26as-salonmap__stage--sp {
  aspect-ratio: 375 / 549;
  padding: 0;
}

.cp26as-salonmap__stage--sp .cp26as-salonmap__callout {
  position: absolute;
  left: 6.67%;
  top: 4.77%;
  max-width: 60%;
  background: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 3% 4%;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.cp26as-salonmap__stage--sp .cp26as-salonmap__dotmap {
  position: absolute;
  left: -4.47%;
  top: -6.29%;
  width: 101.76%;
  height: 66.18%;
  object-fit: contain;
  object-position: left top;
}

.cp26as-salonmap__stage--sp .cp26as-salonmap__photo--reception {
  position: absolute;
  right: 8.34%;
  top: 37.15%;
  width: 23.6%;
  height: 16.03%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

.cp26as-salonmap__stage--sp .cp26as-salonmap__copy {
  position: absolute;
  left: 50%;
  bottom: 21.45%;
  width: 89.33%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
}

.cp26as-salonmap__stage--sp .cp26as-salonmap__btn {
  position: absolute;
  left: 5.33%;
  bottom: 6.01%;
  width: 89.33%;
  justify-content: center;
}

/* ---------- 地図セクション：共通パーツ ---------- */
.cp26as-salonmap__dotmap {
  display: block;
  pointer-events: none;
}

/* フラット化画像（依頼により地図・サロン写真・吹き出しを1枚画像化） */
.cp26as-salonmap__flatbg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.cp26as-salonmap__callout-text {
  margin: 0;
  color: #264982;
  font-weight: 700;
  font-size: clamp(13px, 2.05vw, 30px);
  line-height: 1.5;
}
.cp26as-salonmap__callout-sub {
  margin: 6px 0 0;
  color: #222;
  font-weight: 500;
  font-size: clamp(9px, 1.37vw, 20px);
  line-height: 1.6;
}

.cp26as-salonmap__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp26as-salonmap__headline {
  margin: 0;
  font-weight: 700;
  line-height: 1.02;
  font-size: clamp(31px, 3.9vw, 53px);
  text-shadow: 0 0 11px rgba(0, 0, 0, 0.4);
  font-family: "Noto Sans JP",sans-serif;
}
.cp26as-salonmap__percent {
  color: #ffe436;
  font-size: clamp(50px, 7.1vw, 94px);
  padding: 0 2px;
}
.cp26as-salonmap__percent-unit {
  color: #ffe436;
}
.cp26as-salonmap__note {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: clamp(11px, 1.45vw, 20px);
  line-height: 1.5;
  text-shadow: 0 0 11px rgba(0, 0, 0, 0.4);
  font-family: "Noto Sans JP",sans-serif;
}

.cp26as-salonmap__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--cp26as-navy-deep);
  font-weight: 700;
  font-size: clamp(16px, 2.22vw, 32px);
  text-decoration: none;
  border-radius: 999px;
  padding: 1.1% 2.6%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.cp26as-salonmap__btn-arrow {
  flex: none;
  width: clamp(28px, 2.8vw, 40px);
  height: clamp(28px, 2.8vw, 40px);
}
.cp26as-salonmap__btn-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .cp26as-salonmap__btn {
    font-size: clamp(15px, 5.53vw, 21px);
    padding: 12px 20px;
  }
  .cp26as-salonmap__btn-arrow {
    width: 25px;
    height: 25px;
  }
}


/* ============================== section_07.css ============================== */
/* ============================================================
   section_07.css
   Figma: PC node 1:2059 (Campaing) / SP node 1:3721 (Campaing)
   全クラス名 "cp26as-" プレフィックス。
   ベース(既定)= PC。@media (max-width:767px) 以下 = SP。
============================================================ */

.cp26as-section {
  --cp26as-navy: #001f52;
  --cp26as-navy-2: #031143;
  --cp26as-red-1: #f81f1c;
  --cp26as-red-2: #b40101;
  --cp26as-red-accent: #d40f0e;
  --cp26as-yellow: #ffe436;
  --cp26as-bg-hero-1: #eaf3fc;
  --cp26as-bg-hero-2: #d9ebf9;
  --cp26as-bg-steps: #e5f0fa;
  --cp26as-text-note: #222;
  --cp26as-blue-accent: #3fa9dc;

  position: relative;
  font-family: "A-OTF UD Shin Go Pro", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Noto Sans JP", sans-serif;
  color: var(--cp26as-navy);
  overflow: hidden;
  box-sizing: border-box;
}
.cp26as-section *,
.cp26as-section *::before,
.cp26as-section *::after {
  box-sizing: border-box;
}

/* ---------- 共通パーツ ---------- */
.cp26as-icon-plus07 svg,
.cp26as-icon-arrowup07,
.cp26as-icon-pricearrow,
.cp26as-icon-connector,
.cp26as-icon-chevron,
.cp26as-icon-ctaarrow {
  display: block;
}

/* ============================================================
   1. Hero: キャンペーン特典訴求
============================================================ */
.cp26as-hero {
  position: relative;
  padding: 80px 0  0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cp26as-bg-hero-1), var(--cp26as-bg-hero-2));
}

.cp26as-hero__bg {
  position: absolute;
  inset: 0;
  background: url("/mens/campaign/26autumn-stepup-cp/assets/section_05_flat-campaign-inner-bg_pc.webp") top /contain no-repeat, radial-gradient(circle at 50% 100%, rgba(137,198,238,.55), rgba(137,198,238,0) 50%) #e5f0fa;
  /* mix-blend-mode: lighten; */
}

.cp26as-hero__inner {
  position: relative;
  z-index: 1;
  /*max-width: 900px;*/
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cp26as-desc-flatwrap {
  margin-top: 40px;
}
.cp26as-badge {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  transform: skewX(-8deg);
}
.cp26as-badge__em {
  font-size: 1.35em;
  font-weight: 800;
  background: linear-gradient(178deg, var(--cp26as-red-1) 0%, var(--cp26as-red-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cp26as-hero__heading {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cp26as-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 70px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--cp26as-navy);
  transform: skewX(-8deg);
  letter-spacing: -2px;
}
.cp26as-icon-arrowup07 {
  position: absolute;
  top: -22px;
  right: -58px;
  width: 74px;
  height: 70px;
  transform: rotate(-5deg);
}

.cp26as-headline {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  transform: skewX(-8deg);
}
.cp26as-headline__word {
  font-size: 56px;
  font-weight: 700;
  color: var(--cp26as-navy);
}
.cp26as-headline__num {
  font-size: 118px;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -4px;
  background: linear-gradient(182deg, var(--cp26as-red-1) 28%, var(--cp26as-red-2) 74%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cp26as-headline__unit {
  font-size: 52px;
  font-weight: 700;
  color: var(--cp26as-navy);
  padding-bottom: 6px;
}

.cp26as-pill07 {
  margin: 22px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 4px solid var(--cp26as-navy);
  border-radius: 999px;
  padding: 10px 30px;
  font-size: 26px;
  font-weight: 700;
  color: var(--cp26as-navy);
  transform: skewX(-8deg);
}
.cp26as-icon-plus07 svg {
  width: 38px;
  height: 38px;
}
.cp26as-icon-plus07--sm svg {
  width: 26px;
  height: 26px;
}

.cp26as-price07 {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cp26as-price07__old {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--cp26as-navy);
}
.cp26as-price07__old-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: line-through;
  text-decoration-color: #e2231a;
  text-decoration-thickness: 3px;
}
.cp26as-price07__old-num {
  font-size: 42px;
  font-weight: 700;
}
.cp26as-price07__old-unit {
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
}
.cp26as-icon-pricearrow {
  width: 24px;
  height: 38px;
}
.cp26as-price07__new {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cp26as-price07__new-num {
  font-size: 72px;
  font-weight: 800;
  background: linear-gradient(181deg, var(--cp26as-red-1) 28%, var(--cp26as-red-2) 74%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cp26as-price07__new-unit {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--cp26as-red-2);
}

.cp26as-date {
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 620px;
  font-size: 24px;
  font-weight: 700;
  color: var(--cp26as-navy);
}
.cp26as-date__line {
  flex: 1;
  height: 2px;
  background: var(--cp26as-navy);
}
.cp26as-date__u {
  font-size: 0.55em;
}

.cp26as-desc {
  margin: 24px 0 0;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--cp26as-navy);
}
.cp26as-desc strong {
  font-weight: 800;
  font-size: 1.3em;
  color: var(--cp26as-red-accent);
}

/* ============================================================
   2. ステップ紹介 + CTA
============================================================ */
.cp26as-step07s {
  position: relative;
  /*background: var(--cp26as-bg-steps);*/
  padding: 64px 20px 120px;
}
.cp26as-step07s__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
/* PC/SP切替用ラッパー（[data-view]）はflex子要素として
   align-items:centerの縮小既定サイズになってしまうため、
   内側のstep07-row/promo-titがwidth:100%を機能させられるよう
   明示的に幅いっぱいに広げる */
.cp26as-step07s__inner > [data-view] {
  width: 100%;
}

/* --- Step 01 / 02 --- */
.cp26as-step07-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  flex-wrap: wrap;
}
.cp26as-step07 {
  position: relative;
  flex: 1 1 440px;
  max-width: 600px;
  padding-top: 36px;
}
.cp26as-step07__label {
  position: absolute;
  top: 0;
  left: 18px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--cp26as-navy);
}
.cp26as-icon-chevron {
  width: 26px;
  height: 16px;
}
.cp26as-step07__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 120px;
  padding: 20px 34px;
  border-radius: 4px;
  transform: skewX(-8deg);
}
.cp26as-step07__box--01 {
  background: var(--cp26as-navy);
  color: #fff;
}
.cp26as-step07__box--02 {
  background: #fff;
  border: 4px solid var(--cp26as-navy);
  color: var(--cp26as-navy);
}
.cp26as-step07__tag {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.cp26as-step07__num {
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
}
.cp26as-step07__divider {
  align-self: stretch;
  width: 2px;
  background: currentColor;
  opacity: 0.5;
}
.cp26as-step07__count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.cp26as-step07__count b {
  font-size: 1.7em;
  font-weight: 800;
}
.cp26as-step07__free {
  margin-left: auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #fff;
  color: var(--cp26as-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  flex-shrink: 0;
}
.cp26as-step07__pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 3px solid var(--cp26as-navy);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--cp26as-navy);
  white-space: nowrap;
}
.cp26as-icon-connector {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

/* --- 今だけ!期間限定! --- */
.cp26as-promo-tit {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 40px;
  font-weight: 800;
  color: var(--cp26as-navy);
}
.cp26as-promo-tit__line {
  display: inline-block;
  width: 3px;
  height: 46px;
  background: var(--cp26as-navy);
}
.cp26as-promo-tit__line--l {
  transform: rotate(20deg);
}
.cp26as-promo-tit__line--r {
  transform: rotate(-20deg);
}

/* --- CTA カード --- */
.cp26as-cta07 {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------------------------------------------------------
   フラット化画像（依頼により各グルーピングを1枚画像化した箇所）
--------------------------------------------------------------- */
.cp26as-hero__heading-img {
  margin: 0;
  line-height: 0;
}
.cp26as-hero-flatwrap img,
.cp26as-desc-flatwrap img {
  display: block;
  width: 100%;
  height: auto;
  /*max-width: 900px;*/
  margin: 0 auto;
}
.cp26as-step07--flat img {
  display: block;
  width: 100%;
  height: auto;
}
.cp26as-promo-tit.cp26as-promo-tit--flat {
  display: block;
}
.cp26as-promo-tit--flat img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.cp26as-cta07-flatwrap {
  width: 100%;
  /*max-width: 1000px;*/
  margin: 0 auto;
}
.cp26as-cta07__flat-link {
  display: block;
}
.cp26as-cta07__flat-link img {
  display: block;
  width: 100%;
  height: auto;
}
.cp26as-cta07__tab {
  margin: 0;
  position: relative;
  z-index: 2;
  background: var(--cp26as-navy);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 8px 28px;
  border-radius: 12px 12px 0 0;
}
.cp26as-cta07__tab-u {
  font-size: 0.55em;
}
.cp26as-cta07__card {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 30px;
  background: var(--cp26as-yellow);
  border: 4px solid var(--cp26as-navy);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--cp26as-navy);
}

.cp26as-cta07__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cp26as-cta07__badge-nav {
  background: var(--cp26as-navy);
  color: #f7f7f9;
  font-size: 18px;
  font-weight: 700;
  border-radius: 5px;
  padding: 6px 8px;
  line-height: 1;
}
.cp26as-cta07__num {
  font-size: 58px;
  font-weight: 800;
  color: var(--cp26as-navy);
  line-height: 1;
}
.cp26as-cta07__unit {
  font-size: 26px;
  font-weight: 700;
  color: var(--cp26as-navy);
}
.cp26as-cta07__scalp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2.5px solid var(--cp26as-navy);
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cp26as-navy-2);
  margin-left: 8px;
  text-align: center;
}
.cp26as-cta07__scalp-text {
  white-space: nowrap;
}
.cp26as-cta07__flag {
  position: absolute;
  top: -20px;
  right: -18px;
  background: linear-gradient(172deg, var(--cp26as-red-1) 0%, var(--cp26as-red-2) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 3px;
  transform: rotate(-8deg);
  white-space: nowrap;
}

.cp26as-cta07__price {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cp26as-cta07__price-old {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cp26as-navy);
}
.cp26as-cta07__price-old-value {
  text-decoration: line-through;
  text-decoration-color: #e2231a;
  text-decoration-thickness: 2px;
}
.cp26as-cta07__price-old-num {
  font-size: 36px;
  font-weight: 700;
}
.cp26as-cta07__price-old-num small {
  font-size: 0.35em;
  margin-left: 2px;
  font-weight: 700;
}
.cp26as-icon-pricearrow--sm {
  width: 18px;
  height: 30px;
}
.cp26as-cta07__price-new {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cp26as-cta07__price-new-num {
  font-size: 70px;
  font-weight: 800;
  background: linear-gradient(181deg, var(--cp26as-red-1) 28%, var(--cp26as-red-2) 74%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cp26as-cta07__price-new small {
  font-size: 16px;
  font-weight: 700;
  color: var(--cp26as-red-2);
}

.cp26as-cta07__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(172deg, var(--cp26as-red-1) 0%, var(--cp26as-red-2) 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  border-radius: 8px;
  padding: 18px 26px;
  text-decoration: none;
  white-space: nowrap;
}
.cp26as-icon-ctaarrow {
  width: 26px;
  height: 26px;
}

.cp26as-note {
  margin: 10px auto 0;
  max-width: 1200px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cp26as-text-note);
  text-align: left;
  font-family: "Noto Sans JP",sans-serif;
}

/* ============================================================
   SP (max-width: 767px)
============================================================ */
@media (max-width: 767px) {
  .cp26as-hero {
    padding: 32px 0 0;
  }
  .cp26as-hero__inner,
  .spinner {
    max-width: 340px;
  }

  .cp26as-badge {
    font-size: 17px;
  }

  .cp26as-hero__heading {
    margin-top: 4px;
    gap: 2px;
  }
  .cp26as-title {
    font-size: 38px;
    letter-spacing: -1px;
  }
  .cp26as-icon-arrowup07 {
    top: -14px;
    right: -34px;
    width: 42px;
    height: 40px;
  }
  .cp26as-headline {
    gap: 3px;
  }
  .cp26as-headline__word {
    font-size: 30px;
  }
  .cp26as-headline__num {
    font-size: 62px;
    letter-spacing: -2px;
  }
  .cp26as-headline__unit {
    font-size: 26px;
    padding-bottom: 3px;
  }

  .cp26as-pill07 {
    margin-top: 14px;
    font-size: 15px;
    padding: 7px 18px;
    border-width: 3px;
    gap: 6px;
  }
  .cp26as-icon-plus07 svg {
    width: 24px;
    height: 24px;
  }

  .cp26as-price07 {
    margin-top: 22px;
    gap: 8px;
  }
  .cp26as-price07__old {
    font-size: 11px;
    gap: 4px;
  }
  .cp26as-price07__old-num {
    font-size: 24px;
  }
  .cp26as-price07__old-unit {
    font-size: 8px;
  }
  .cp26as-icon-pricearrow {
    width: 14px;
    height: 22px;
  }
  .cp26as-price07__new-num {
    font-size: 42px;
  }
  .cp26as-price07__new-unit {
    font-size: 10px;
  }

  .cp26as-date {
    margin-top: 14px;
    gap: 8px;
    font-size: 15px;
    max-width: 320px;
  }

  .cp26as-desc {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.7;
  }

  /* --- steps --- */
  .cp26as-step07s {
    padding: 20px 0 50px;
  }
  .cp26as-step07s__inner {
    gap: 10px;
  }

  .cp26as-step07-row {
    flex-direction: column;
    gap: 4px;
    max-width: 335px;
  }
  .cp26as-step07 {
    flex: none;
    width: 100%;
    max-width: none;
    padding-top: 20px;
  }
  .cp26as-step07__label {
    left: 10px;
    font-size: 15px;
    gap: 5px;
  }
  .cp26as-icon-chevron {
    width: 18px;
    height: 11px;
  }
  .cp26as-step07__box {
    gap: 8px;
    min-height: 70px;
    padding: 12px 16px;
  }
  .cp26as-step07__tag {
    font-size: 13px;
  }
  .cp26as-step07__num {
    font-size: 34px;
  }
  .cp26as-step07__count {
    font-size: 14px;
    gap: 2px;
  }
  .cp26as-step07__free {
    width: 54px;
    height: 54px;
    font-size: 16px;
  }
  .cp26as-step07__pill {
    padding: 5px 12px;
    font-size: 13px;
    gap: 4px;
    border-width: 2px;
  }
  .cp26as-icon-plus07--sm svg {
    width: 18px;
    height: 18px;
  }
  .cp26as-icon-connector {
    width: 34px;
    height: 34px;
    transform: rotate(90deg);
    margin: -2px 0;
  }

  .cp26as-promo-tit {
    font-size: 26px;
    gap: 10px;
  }
  .cp26as-promo-tit.mt40 {
    margin-top: 40px;
  }
  .cp26as-promo-tit.w90 {
    width: 90%;
    margin: 40px auto 0;
  }
  .cp26as-promo-tit__line {
    height: 30px;
  }

  .cp26as-cta07 {
    max-width: 335px;
  }
  .cp26as-cta07__tab {
    font-size: 15px;
    padding: 5px 18px;
  }
  .cp26as-cta07__card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px 18px;
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--cp26as-navy);
  }
  .cp26as-cta07__left {
    justify-content: center;
    gap: 5px;
  }
  .cp26as-cta07__badge-nav {
    font-size: 12px;
    padding: 5px 6px;
  }
  .cp26as-cta07__num {
    font-size: 34px;
  }
  .cp26as-cta07__unit {
    font-size: 16px;
  }
  .cp26as-cta07__scalp {
    font-size: 11px;
    padding: 5px 8px;
    margin-left: 4px;
    border-width: 2px;
  }
  .cp26as-cta07__flag {
    top: -14px;
    right: -12px;
    font-size: 10px;
    padding: 3px 6px;
  }
  .cp26as-cta07__price {
    justify-content: center;
    gap: 6px;
  }
  .cp26as-cta07__price-old {
    font-size: 9px;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
  }
  .cp26as-cta07__price-old-num {
    font-size: 20px;
  }
  .cp26as-icon-pricearrow--sm {
    width: 12px;
    height: 20px;
  }
  .cp26as-cta07__price-new-num {
    font-size: 40px;
  }
  .cp26as-cta07__price-new small {
    font-size: 11px;
  }
  .cp26as-cta07__button {
    justify-content: center;
    font-size: 17px;
    padding: 12px 18px;
  }
  .cp26as-icon-ctaarrow {
    width: 20px;
    height: 20px;
  }

  .cp26as-note {
    font-size: 14px;
    line-height: 1.5;
  }
}