@charset "UTF-8";
/* =========================================================
   ミュゼドルフィン 紹介ページ (/dolphin/) 専用スタイル
   main.min.css → rebrand.css の後に読み込む差分スタイル
   クラス名は dl- プレフィックスで他ページと衝突しないようにする
   ========================================================= */

.dolphin {
  --dl-side-w: 70px;          /* 左固定帯の幅 (PC) */
  --dl-nav-w: 85px;          /* 右固定ナビの幅 (PC) */
  --dl-header-h: 87px;        /* l-header (position:fixed) の実高さ */
  --dl-pink: #ffefef;         /* 固定ナビ背景・区切り線 */
  --dl-pink-btn: #fbe4ec;     /* CTAボタン */
  --dl-pink-btn-hover: #f7d5e1;
  --dl-bg: #f6f9fe;           /* FV背景 */
  --dl-ink: #1a1311;          /* 見出し */
  --dl-accent: #358faf;       /* サブコピー・縦書き帯・ナビ文字 */
  --dl-tag: #6b6b6b;          /* タグ */
  --dl-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}

@media screen and (min-width: 769px) {
  br.sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  br.pc {
    display: none;
  }
}

/* =========================================================
   左側: 固定縦書き帯
   ========================================================= */
.dl-side {
  position: fixed;
  /* 背景はブラウザ最上部まで伸ばし、丸みのあるヘッダー(z-index:9999)の下に潜らせる。
     中身はヘッダー下端起点で天地中央にするため padding-top でヘッダー高さ分を確保 */
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 90;
  box-sizing: border-box;
  padding-top: var(--dl-header-h);
  width: var(--dl-side-w);
  /* 上#FFFFE6 → 下#FFE6F0 を、わずかに右下方向へ振ったグラデーション */
  background: linear-gradient(160deg, #ffffe6 0%, #ffe6f0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* padding-bottom = ロゴ高さ + gap。これでロゴは文字のすぐ上に来つつ、
     キャッチコピー自体は帯の天地中央に揃う (帯はヘッダー下端起点) */
  padding-bottom: 44px;
  overflow: hidden;
  pointer-events: none;
}
.dl-side__logo {
  width: auto;
  height: 30px;
  flex-shrink: 0;
}
.dl-side__text {
  writing-mode: vertical-rl;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--dl-accent);
  white-space: nowrap;
}
/* PC: 2行 (縦書きなので2列) */
.dl-side__text span {
  display: block;
}

/* =========================================================
   ページ内リンク 固定ナビ
   PC: 画面右側に縦並び / SP: 画面下部に横並び
   ========================================================= */
.dl-nav {
  position: fixed;
  /* ヘッダー下端から画面下端までの範囲で天地中央 */
  top: calc(50vh + var(--dl-header-h) / 2);
  right: 10px;
  transform: translateY(-50%);
  z-index: 95;
  width: var(--dl-nav-w);
  background: var(--dl-pink);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(86, 172, 225, .14);
  overflow: hidden;
}
.dl-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dl-nav__item + .dl-nav__item {
  border-top: 1px solid #fff;
}
.dl-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  text-decoration: none;
  color: var(--dl-accent);
  transition: background .2s ease;
}
.dl-nav__link:hover {
  background: #ffe2e2;
}
.dl-nav__link img {
  width: 46px;
  height: 46px;
  display: block;
}
.dl-nav__link span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .02em;
}

/* =========================================================
   FV
   ========================================================= */
.dl-main {
  /* 固定ヘッダー + 左帯を避ける */
  padding-top: var(--dl-header-h);
  padding-left: var(--dl-side-w);
}
.dl-fv {
  position: relative;
  overflow: hidden;
  background: var(--dl-bg);
  /* ブラウザの表示領域いっぱい (固定ヘッダー分を除く)。
     dvh はモバイルのアドレスバー伸縮に追従する。非対応環境は vh にフォールバック */
  min-height: calc(100vh - var(--dl-header-h));
  min-height: calc(100dvh - var(--dl-header-h));
  display: flex;
  align-items: center;
}
.dl-fv__media {
  position: absolute;
  right: 0;
  bottom: 0;
  /* FVの高さに合わせて伸縮させ、上部に余白ができないようにする */
  height: 100%;
  width: auto;
  max-width: 52%;
  line-height: 0;
  pointer-events: none;
}
.dl-fv__media img {
  height: 100%;
  width: auto;
  display: block;
}
.dl-fv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 72px 24px;
  box-sizing: border-box;
}

.dl-fv__title {
  margin: 0;
  font-family: var(--dl-mincho);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.32;
  letter-spacing: .02em;
  color: var(--dl-ink);
}
/* 明朝体にはイタリック字形が無く、日本語では斜体が合成されないため
   skew で傾ける (font-style: italic は効かないブラウザがある) */
.dl-fv__title {
  display: inline-block;
  transform: skewX(-7deg);
  transform-origin: left bottom;
}
.dl-fv__sub {
  margin: 26px 0 0;
  font-size: clamp(15px, 1.5vw, 23px);
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--dl-accent);
  font-weight: bold;
}

.dl-fv__worry {
  margin-top: 30px;
  max-width: 860px;
}
.dl-fv__worry-label {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dfe5ea;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--dl-ink);
}
.dl-fv__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dl-fv__tags li {
  background: var(--dl-tag);
  color: #fff;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .02em;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.dl-fv__cta {
  position: relative;
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 316px;
  padding: 14px 56px;
  border-radius: 999px;
  background: var(--dl-pink-btn);
  color: var(--dl-ink);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(231, 168, 190, .25);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dl-fv__cta:hover {
  background: var(--dl-pink-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(231, 168, 190, .32);
}
.dl-fv__cta-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dl-fv__cta-main {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}
.dl-fv__cta-sub {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: inherit;
}
/* 矢印は絶対配置にして、テキストはボタンに対して左右中央を保つ */
.dl-fv__cta-arrow {
  position: absolute;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  width: 16px;
  height: auto;
}

/* =========================================================
   セクション共通
   ========================================================= */
/* 固定ヘッダーに隠れないよう、ページ内リンクの着地位置をずらす */
.dl-main [id] {
  scroll-margin-top: calc(var(--dl-header-h) + 24px);
}

/* 見出しパーツ */
.dl-sec-eyebrow {
  margin: 0 0 6px;
  font-family: var(--dl-mincho);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--dl-accent);
}
.dl-sec-title {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  font-family: var(--dl-mincho);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--dl-accent);
  white-space: nowrap;
}
/* 見出しの右に伸びる罫線 */
.dl-sec-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--dl-accent);
  opacity: .5;
}

/* =========================================================
   ABOUT DOLPHIN (ドルフィンとは)
   ========================================================= */
.dl-about {
  background: #fff;
  padding-block: clamp(56px, 7vw, 104px) clamp(6px, 0vw, 12px);
}
.dl-about__inner {
  width: 100%;
  /* 右の固定ナビに潜り込まない幅 (デザイン実測 約1050px) */
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px 120px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.dl-about__visual {
  position: relative;
  border: 1px solid #e7eef2;
  border-radius: 20px;
  background: #fff;
  padding: 40px 24px 32px;
  text-align: center;
}
.dl-about__visual img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
  margin-inline: auto;
}
.dl-about__label {
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  background: var(--dl-label, #56ace1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: 9px 18px;
  border-radius: 999px;
}
.dl-about__lead {
  margin: 26px 0 0;
  font-family: var(--dl-mincho);
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--dl-accent);
}
.dl-about__text {
  margin-top: 26px;
}
.dl-about__text p {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.75;
  letter-spacing: .02em;
  color: #4a4a4a;
}
.dl-about__text p:last-child { margin-bottom: 0; }

/* =========================================================
   VOICE (お客様の"もっと効果を感じたい")
   ========================================================= */
.dl-voice {
  background: #fff;
  padding-block: clamp(0px, 6vw, 96px);
}
.dl-voice__inner {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 24px 120px;
  box-sizing: border-box;
  text-align: center;
}
.dl-voice__small {
  margin: 0;
  font-family: var(--dl-mincho);
  /* font-size: clamp(16px, 1.6vw, 22px); */
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: .08em;
  color: var(--dl-accent);
}
/* 引用符は画像を背景に敷く */
.dl-voice__quote {
  margin: 6px 0 0;
  font-family: var(--dl-mincho);
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.3;
  letter-spacing: .04em;
  color: #2b4650;
}
.dl-voice__quote-text {
  display: inline-block;
  padding-inline: clamp(38px, 4.4vw, 74px);
  background-image: url("/dolphin/img/ico-qm-open.png"), url("/dolphin/img/ico-qm-close.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: clamp(30px, 3.4vw, 56px) auto, clamp(30px, 3.4vw, 56px) auto;
}
.dl-voice__lead {
  margin: 8px 0 0;
  font-family: var(--dl-mincho);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.5;
  letter-spacing: .08em;
  color: #358FAF;
}
.dl-voice__text {
  margin-top: clamp(28px, 3.2vw, 44px);
}
.dl-voice__text p {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .02em;
  color: #358FAF;
}
.dl-voice__text p:last-child { margin-bottom: 0; }

/* =========================================================
   FEATURES (ドルフィンの特徴)
   ========================================================= */
.dl-features {
  background: #fff;
  padding-block: clamp(16px, 3vw, 96px);
}
.dl-features__inner {
  width: 100%;
  /* 右の固定ナビに潜り込まない幅 (デザイン実測 約1050px) */
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px 120px;
  box-sizing: border-box;
}
.dl-features__grid {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

/* 青い見出しバー */
.dl-feature__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 24px;
  border-radius: 12px;
  background: var(--dl-label, #56ace1);
  color: #fff;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}
/* ロゴは青版しかないため白に転換して使う */
.dl-feature__bar img {
  width: auto;
  height: 30px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.dl-feature__title {
  margin: 24px 0 0;
  font-family: var(--dl-mincho);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--dl-accent);
}

/* 本文 (画像は右に回り込ませる) */
.dl-feature__body {
  margin-top: 18px;
  overflow: hidden; /* float の解除 */
}
.dl-feature__img {
  float: right;
  width: 38%;
  max-width: 190px;
  height: auto;
  margin: 4px 0 16px 20px;
  border-radius: 4px;
}
.dl-feature__body p {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #4a4a4a;
}
.dl-feature__body p:last-child { margin-bottom: 0; }

.dl-feature__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.dl-feature__list li {
  position: relative;
  padding-left: 1em;
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: .02em;
  color: #4a4a4a;
}
.dl-feature__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.dl-feature__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid #dfe5ea;
  font-size: 11.5px;
  line-height: 1.8;
  color: #8a8a8a;
}

/* =========================================================
   OUR GOAL (脱毛しながら、美肌へ。)
   ========================================================= */
.dl-goal {
  background: #fff;
  padding-block: clamp(48px, 6vw, 96px);
}
.dl-goal__inner {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px 120px;
  box-sizing: border-box;
}
.dl-goal__lead {
  margin: 26px 0 0;
  font-family: var(--dl-mincho);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--dl-accent);
}
.dl-goal__grid {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.dl-goal__text p {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #4a4a4a;
}
.dl-goal__text p:last-child { margin-bottom: 0; }
/* 画像枠 (デザインはグレーの角丸ボックス) */
.dl-goal__visual {
  border-radius: 20px;
  overflow: hidden;
  background: #e4e4e4;
  aspect-ratio: 8 / 7;
}
.dl-goal__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   QUALITY (「効果」も「やさしさ」もどちらも大切にしたい方へ)
   ========================================================= */
.dl-quality {
  background: #fff;
  padding-block: clamp(48px, 6vw, 96px);
}
.dl-quality__inner {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px 120px;
  box-sizing: border-box;
  text-align: center;
}
/* 見出し: PCは両脇に罫線、SPは下に罫線 */
.dl-quality__title {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  font-family: var(--dl-mincho);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--dl-accent);
}
.dl-quality__title::before,
.dl-quality__title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--dl-accent);
  opacity: .5;
}
.dl-quality__lead {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
  color: #4a4a4a;
}

/* 番号付きカード (PC 4列) */
.dl-quality__list {
  list-style: none;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.dl-quality__item {
  position: relative;
  /* 番号バッジをカード上端にはみ出させる分の余白 */
  margin-top: 42px;
  padding: 40px 12px 26px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(86, 172, 225, .12);
}
.dl-quality__num {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--dl-label, #56ace1);
  color: #fff;
  font-family: var(--dl-mincho);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.dl-quality__text {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--dl-label, #56ace1);
}
.dl-quality__closing {
  margin: clamp(32px, 4vw, 52px) 0 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
  color: #4a4a4a;
}

/* =========================================================
   CTA / 注意事項
   ========================================================= */
.dolphin .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dl-cta {
  background: #fff;
  padding-block: 0 clamp(40px, 5vw, 72px);
}
.dl-cta__inner {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px 120px;
  box-sizing: border-box;
}
.dl-cta__box {
  padding: clamp(36px, 4.5vw, 60px) 24px clamp(28px, 3vw, 40px);
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffe6 0%, #ffe6f0 100%);
  text-align: center;
}
.dl-cta__title {
  margin: 0;
  font-family: var(--dl-mincho);
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--dl-accent);
}
.dl-cta__lead {
  margin: 28px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--dl-ink);
}
.dl-cta__btns {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}
.dl-cta__btns li { flex: 1 1 0; max-width: 300px; }
.dl-cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 40px;
  border-radius: 999px;
  background: var(--dl-btn, #0b6ec3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}
.dl-cta__btn:hover { opacity: .85; transform: translateY(-2px); }
.dl-cta__ico {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
}
.dl-cta__ico--arrow { right: 20px; width: 18px; }
.dl-cta__note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .04em;
  color: #666;
}

.dl-notice {
  background: #fff;
  padding-block: 0 clamp(40px, 5vw, 72px);
}
.dl-notice__inner {
  max-width: 1160px;
  margin-inline: auto;
  padding: 28px 120px 0 24px;
  box-sizing: border-box;
  position: relative;
}
.dl-notice__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 120px;
  height: 1px;
  background: #333;
}
.dl-notice__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dl-ink);
}
.dl-notice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.9;
  color: #666;
}
.dl-notice__list li::before { content: "・"; }

/* =========================================================
   タブレット
   ========================================================= */
@media screen and (max-width: 1100px) {
  .dl-fv__media { width: 52%; opacity: .5; }
  .dl-fv__inner { padding-block: 56px; }
}

/* =========================================================
   SP: 左帯を細く / ナビを画面下部に固定
   ========================================================= */
@media screen and (max-width: 768px) {
  .dolphin {
    --dl-side-w: 28px;
    --dl-header-h: 87px;
  }

  .dl-side {
    gap: 10px;
    /* = ロゴ高さ20px + gap10px */
    padding-bottom: 30px;
  }
  .dl-side__logo { height: 20px; }
  .dl-side__text {
    font-size: 10px;
    letter-spacing: .1em;
  }
  /* SP: 1行 (2つの文言を区切り付きで繋げる) */
  .dl-side__text span { display: inline; }
  .dl-side__text span + span::before { content: "　—　"; }

  /* 下部固定バーに変化 */
  .dl-nav {
    top: auto;
    bottom: 10px;
    right: 0;
    left: 0;
    width: 98%;
    max-width: 500px;
    transform: none;
    border-radius: 10px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    padding-bottom: env(safe-area-inset-bottom);
    left: 50%;
    transform: translateX(-50%);
  }
  .dl-nav__list {
    display: grid;
    /* minmax(0,…) で内容の最小幅に引きずられず、狭い画面でも4等分に収める */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .dl-nav__item + .dl-nav__item {
    border-top: 0;
    border-left: 1px solid var(--dl-pink);
  }
  .dl-nav__link {
    gap: 4px;
    padding: 8px 2px;
  }
  .dl-nav__link { min-width: 0; }
  .dl-nav__link img {
    width: 45px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .dl-nav__link span {
    font-size: clamp(8px, 2.7vw, 10px);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  /* フッターに達したらフェードアウト (JS が .is-hidden を付与) */
  .dl-nav {
    transition: opacity .4s ease, visibility .4s;
  }
  .dl-nav.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .dl-fv {
    /* SPは表示領域いっぱいにせず、CTAボタンの下で終える (次のコンテンツを早く見せる) */
    min-height: 0;
  }
  .dl-fv__media {
    width: 88%;
    max-width: none;
    height: auto;
    top: 0;
    bottom: auto;
    right: 0;
    opacity: .45;
  }
  .dl-fv__media img {
    width: 100%;
    height: auto;
  }
  .dl-fv__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(246, 249, 254, 0) 45%, var(--dl-bg) 96%);
  }
  .dl-fv__inner {
    padding: 128px 20px 32px;
  }
  .dl-fv__title {
    font-size: clamp(24px, 7.2vw, 30px);
    line-height: 1.45;
  }
  .dl-fv__sub {
    margin-top: 18px;
    font-size: 14px;
  }
  .dl-fv__worry { margin-top: 28px; }
  .dl-fv__worry-label { font-size: 12.5px; }
  .dl-fv__tags { gap: 5px; }
  .dl-fv__tags li {
    font-size: 10.5px;
    padding: 7px 10px;
  }
  .dl-fv__cta {
    margin-top: 28px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* --- ABOUT DOLPHIN --- */
  .dl-about__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-inline: 20px;
  }
  .dl-about__visual {
    padding: 34px 16px 24px;
    border-radius: 16px;
  }
  .dl-about__visual img { max-height: 420px; }
  .dl-about__label {
    top: 14px;
    left: 14px;
    font-size: 11px;
    padding: 8px 14px;
  }
  /* SPは罫線を見出しの下に回す */
  .dl-sec-title {
    display: block;
    white-space: normal;
  }
  .dl-sec-title::after {
    display: block;
    width: 100%;
    margin-top: 14px;
  }
  .dl-about__lead { margin-top: 20px; }
  .dl-about__text { margin-top: 20px; }
  .dl-about__text p {
    font-size: 12px;
    margin-bottom: 16px;
  }

  /* --- VOICE --- SPは左揃え、見出しは1行に収める */
  .dl-voice__inner {
    padding-inline: 20px;
    text-align: left;
  }
  .dl-voice__quote { font-size: 24px; }
  .dl-voice__quote-text {
    padding-inline: 22px;
    background-size: 18px auto, 18px auto;
  }
  .dl-voice__lead { font-size: 19px; }
  .dl-voice__text p {
    font-size: 12.5px;
    line-height: 1.95;
    margin-bottom: 22px;
  }

  /* --- FEATURES --- SPは1カラム */
  .dl-features__inner { padding-inline: 20px; }
  .dl-features__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .dl-feature__bar {
    gap: 10px;
    padding: 12px 16px;
    font-size: 15px;
  }
  .dl-feature__bar img { height: 26px; }
  .dl-feature__title {
    margin-top: 18px;
    font-size: 18px;
  }
  .dl-feature__img {
    width: 42%;
    margin: 2px 0 12px 14px;
  }
  .dl-feature__body p,
  .dl-feature__list li {
    font-size: 12px;
    line-height: 1.7;
  }
  .dl-feature__body p { margin-bottom: 16px; }
  .dl-feature__list { margin-bottom: 16px; }

  /* --- OUR GOAL --- SPは縦積み (テキスト→画像) */
  .dl-goal__inner { padding-inline: 20px; }
  /* 見出しは1行に収める (デザイン準拠) */
  .dl-goal .dl-sec-title {
    font-size: clamp(22px, 6.4vw, 26px);
    letter-spacing: .04em;
  }
  .dl-goal__lead {
    margin-top: 20px;
    font-size: 16px;
  }
  .dl-goal__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .dl-goal__text p {
    font-size: 12px;
    margin-bottom: 18px;
  }
  .dl-goal__visual { border-radius: 16px; }

  /* QUALITY */
  .dl-quality__inner { padding-inline: 20px; }
  .dl-quality__title {
    display: block;
    font-size: 20px;
  }
  .dl-quality__title::before { content: none; }
  .dl-quality__title::after {
    display: block;
    margin-top: 14px;
  }
  .dl-quality__lead { font-size: 13px; }
  .dl-quality__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dl-quality__item { padding: 38px 16px 22px; }
  .dl-quality__closing { font-size: 13px; }

  /* CTA / 注意事項 */
  .dl-cta__inner { padding-inline: 20px; }
  .dl-cta__box { padding: 32px 16px 24px; }
  .dl-cta__title { font-size: 22px; }
  .dl-cta__lead { font-size: 12px; margin-top: 20px; }
  .dl-cta__btns {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
  }
  .dl-cta__btns li { width: 100%; max-width: 300px; flex: none; }
  .dl-notice__inner { padding-inline: 20px; }
  .dl-notice__inner::before { left: 20px; right: 20px; }
}

footer.l-footer.dolphin {
  margin-top: 0;
}
.dolphin .p-partners__content {
  padding-inline: 4rem 3rem;
}
.dolphin .p-partners__loop-copy {
  margin-left: 1em;
  /* width:100% + margin-left だと右へ1emはみ出し、SPでページ全体が横に広がる */
  width: calc(100% - 1em);
}
.dolphin .l-footer__inner {
  padding-left: 1em;
}