@charset "UTF-8";
/* =================================================================
   DUSKIN ヘルスレント × 北斗の拳コラボ LP
   ================================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
  border: 0;
}
a {
  text-decoration: none;
}

/* 視覚的に隠す見出し（スクリーンリーダー/SEO用・レイアウト無影響） */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 画像見出しを h タグで意味付けする際のラッパ（ボックスを生成せず配置を維持） */
.h-img {
  display: contents;
}

html,
body {
  background: #000; /* 1200超の左右余白 = 黒 */
  width: 100%;
}

/* ---- スケーリング・フレーム ------------------------------------ */
#viewport {
  width: 100%;
  overflow-x: auto; /* 1000未満で 1000px 固定 → 横スクロール */
  overflow-y: hidden;
  background: #000;
}
#frame {
  margin: 0 auto; /* 1200超で中央寄せ（左右黒余白） */
  position: relative;
}
.stage {
  position: relative;
  transform-origin: top left;
}

/* PC は 1200、SP は 750 を基準幅に */
#stage-pc {
  width: 1200px;
  overflow: clip;
} /* clip: 動画サムネのスライドイン枠外を隠す */
#stage-sp {
  width: 750px;
  display: none;
  overflow: clip;
}

/* ---- 背景スタック（縦積み・通常フロー）------------------------- */
.bgstack {
  position: relative;
  z-index: 1;
  font-size: 0;
}
.bgstack img {
  width: 100%;
}

/* ---- 前景オーバーレイ共通 -------------------------------------- */
.layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ov {
  /* 1枚のオーバーレイ素材 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 既定は水平センター（left指定で上書き可）*/
  pointer-events: auto;
}
.ov.left {
  left: var(--x, 0);
  transform: none;
} /* 左基準配置 */

/* ---- 動画プレースホルダー枠 ----------------- */
.video-ph {
  position: absolute;
  background: #000 center / cover no-repeat; /* サムネは各要素の background-image で指定 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 2;
}
.video-ph::after {
  /* 中央の再生ボタン（赤丸ベクター play.svg） */
  content: "";
  width: 44px;
  height: 44px;
  background: url(/project/careshiro/images/common/play.svg) center / contain no-repeat;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

/* ---- ナビ（アンカースクロール）-------------------------------- */
html {
  scroll-behavior: smooth;
}
[id^="sec-"],
#intro-video,
#intro-video-sp {
  scroll-margin-top: 20px;
}

/* ---- 悩みカード ---- */
:root {
  --card-shadow: 9px 9px 11px rgba(0, 0, 0, 0.22);
  /* 和文フォントスタック（悩みカード/ボタン/LOADING で共通） */
  --font-jp: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic",
    "Noto Sans JP", Meiryo, sans-serif;
  /* アクセント青（ボタン矢印・LOADINGバーの光） */
  --accent: #2a92d8;
}

.wcard .panel {
  position: absolute;
  top: 8px;
  width: 1116px;
  height: 493px;
  background: rgba(255, 255, 255, 0.5); /* 半透明白(α0.5)の角丸パネル */
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
}
.wcard.is-right .panel {
  left: 45px;
  border-radius: 40px 0 0 40px;
} /* 右端=ページ端で直角 */
.wcard.is-left .panel {
  left: 0;
  right: auto;
  width: 1116px;
  border-radius: 0 40px 40px 0;
} /* 左端=ページ端に密着(gap除去)・右内側を丸める */

/* テキスト列（バッジ＋本文＋ボタン）。内部座標はこの列の左上基準 */
.wcard .content {
  position: absolute;
  top: 0;
  width: 602px;
  height: 100%;
}
.wcard.is-right .content {
  left: 0;
}
.wcard.is-left .content {
  right: 0;
}

.wcard .badge,
.wcard p {
  position: absolute;
  margin: 0;
  z-index: 2;
  font-family: var(--font-jp);
  font-feature-settings: "palt" 1;
  color: #111;
}
.wcard .badge {
  left: 7px;
  top: 93px;
  width: 173px;
  height: 50px;
  background: #0063a9;
  color: #fff;
  border-radius: 25px;
  box-shadow: var(--card-shadow);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcard.is-left .badge {
  left: auto;
  right: 21px;
}
.wcard .t1 {
  left: 202px;
  top: 68px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.wcard .t2 {
  left: 197px;
  top: 116px;
  font-size: 45px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.8px;
}
/* is-left は見出し(t1/t2)を右端基準で配置（is-right のミラー） */
.wcard.is-left .t1 {
  left: auto;
  right: 225px;
}
.wcard.is-left .t2 {
  left: auto;
  right: 229px;
}
.wcard .lead {
  left: 108px;
  top: 196px;
  font-size: 14px;
  font-weight: 700;
}
.wcard .sub {
  left: 107px;
  top: 222px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.wcard .body {
  left: 105px;
  top: 277px;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #191919;
}
/* is-left は本文ブロック(lead/sub/body)も左位置を分離（2,4用に調整） */
.wcard.is-left .lead,
.wcard.is-left .sub,
.wcard.is-left .body {
  left: 80px;
}
/* 「詳しくはこちら」ボタンのHTML再現 */
.btn-html {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 207px;
  height: 43px;
  padding: 0 22px 0 26px;
  background: #fff;
  border-radius: 27px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: #202326;
  white-space: nowrap;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
}
.btn-html .ar {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 5px solid var(--accent);
  border-right: 5px solid var(--accent);
}

/* =================================================================
   SP（768px 以下で全切替）
   ================================================================= */
@media (max-width: 768px) {
  #stage-pc {
    display: none;
  }
  #stage-sp {
    display: block;
  }
}

/* ---- SP 悩みカード（PCの2カラムミラーを1カラム縦積みへ上書き）---- */

/* パネル：カードほぼ全幅の半透明白角丸（is-right=右端密着／is-left=左端密着） */
#stage-sp .wcard .panel {
  top: 6px;
  bottom: 280px;
  height: auto;
  width: auto; /* パネルはテキスト域のみ（動画は枠外へはみ出し上端だけ被る） */
  left: 0;
  right: 0;
  border-radius: 34px;
}
#stage-sp .wcard.is-right .panel {
  left: 0;
  right: 0;
  border-radius: 34px 0 0 34px;
} /* 右端=ページ端に密着(隙間0)・直角 */
#stage-sp .wcard.is-left .panel {
  left: 0;
  right: 0;
  width: auto;
  border-radius: 0 34px 34px 0;
} /* 左端=ページ端に密着(隙間0)・直角 */

/* テキスト列：カード全幅・左右30pxパディングの通常フロー（PCの絶対配置列を解除） */
#stage-sp .wcard .content {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto; /* relative+z-index で半透明.panelの前面へ */
  padding: 60px 38px 0; /* top: バッジ下〜見出しの余白を詰める */
}
#stage-sp .wcard.is-right .content,
#stage-sp .wcard.is-left .content {
  left: auto;
  right: auto;
}
/* is-rightの本文の左位置（動画とbadgeは不動） */
#stage-sp .wcard.is-right .content {
  padding-left: 50px;
}

/* 各テキストは通常フローへ（PCの絶対left/top/nowrapを解除） */
#stage-sp .wcard .badge,
#stage-sp .wcard p {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  white-space: normal;
}

/* バッジ：カード上端の角に絶対配置（濃紺ピル白文字） */
#stage-sp .wcard .badge {
  position: absolute;
  top: -15px;
  width: auto;
  min-width: 120px;
  height: 46px;
  padding: 0 16px;
  font-size: 22px;
  letter-spacing: 0.5px;
  z-index: 3;
}
#stage-sp .wcard.is-right .badge {
  left: 55px;
  right: auto;
}
#stage-sp .wcard.is-left .badge {
  right: 101px;
  left: auto;
}

/* 見出し・本文（PC font-size をカード幅比 ≒1.16倍でスケールアップ、左寄せ基調） */
#stage-sp .wcard .t1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
}
#stage-sp .wcard .t2 {
  margin: 8px 0 0;
  font-size: 45px;
  line-height: 1.12;
  letter-spacing: -1px;
}
#stage-sp .wcard .lead {
  margin: 9px 0 0;
  font-size: 17px;
} /* こんなときは…の縦位置 */
#stage-sp .wcard .sub {
  margin: 1px 0 0;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 800;
  color: #111;
} /* lead(こんなときは…)との距離を縮める */
#stage-sp .wcard .body {
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 1.5;
}
/* is-left（偶数カード2,4）：見出し(t1/t2)のみ右寄せにミラー、本文は左寄せ */
#stage-sp .wcard.is-left .t1,
#stage-sp .wcard.is-left .t2 {
  left: auto;
  right: auto;
  text-align: right;
}
#stage-sp .wcard.is-left .lead,
#stage-sp .wcard.is-left .sub,
#stage-sp .wcard.is-left .body {
  left: auto;
  right: auto;
  text-align: left;
}

/* 「詳しくはこちら」ボタン：本文下に通常フロー配置（PCのabsoluteを解除しテキスト化） */
#stage-sp .wcard .btn-html {
  position: relative;
  display: flex;
  margin: 16px 0 0; /* .ar(絶対配置の矢印)の基準をボタンに */
  width: 236px;
  height: 50px;
  padding: 0 26px 0 30px;
  font-size: 18px;
}
#stage-sp .wcard .btn-html .lbl {
  transform: translateX(-12px);
}
#stage-sp .wcard .btn-html .ar {
  width: 15px;
  height: 15px;
  border-top-width: 6px;
  border-right-width: 6px;
}

/* 動画枠：カード下部に幅広で配置 */
#stage-sp .wcard .video-ph {
  position: relative;
  z-index: 1;
  margin: 24px auto 28px;
  width: 483px;
  height: 266px; /* 半透明.panelの前面へ */
}
/* 動画の横位置：カードのアンカー差を補正して揃える */
#stage-sp .wcard.is-right .video-ph {
  margin-left: 88px;
  margin-right: auto;
}
#stage-sp .wcard.is-left .video-ph {
  margin-left: 137px;
  margin-right: auto;
}

/* ---- 悩みカード文言の改行出し分け -----------------
     無印 <br>              = PC専用改行 → SPでは消す
     <br class="sp-only">   = SP専用改行 → PCでは消す
     .sp-indent             = SP専用の視覚インデント */
#stage-sp .wcard .content br:not(.sp-only) {
  display: none;
}
#stage-pc .wcard .content br.sp-only {
  display: none;
}
#stage-sp .wcard .t2 .sp-indent {
  display: inline-block;
  margin-left: 259px;
  white-space: nowrap;
}

/* =================================================================
   動画モーダル（YouTube ライトボックス）
   ================================================================= */
.video-ph {
  cursor: pointer;
}
#vmodal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  overscroll-behavior: contain; /* モーダル内のスクロールが背面ページへ伝播しない */
}
#vmodal.open {
  display: flex;
}
/* モーダル表示中はページスクロールをロック（PC/SP）。閉じると同じ位置から復帰 */
html.v-locked,
html.v-locked body {
  overflow: hidden;
}
#vmodal .vbox {
  position: relative;
  width: min(90vw, 960px);
  aspect-ratio: 16 / 9;
}
/* 視聴完了CTA：.vbox の下に中央寄せで表示（.vmodal-cta で static 配置に上書き） */
#vcta {
  margin-top: 18px;
}
/* relative にして normalフロー中央配置を保ちつつ、絶対配置の .ar(矢印) の基準を復活 */
#vmodal .vmodal-cta {
  position: relative;
}
#vmodal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #000;
}
#vmodal .vclose {
  position: absolute;
  top: -46px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

/* =================================================================
   LOADING 画面
   ================================================================= */
#loading {
  position: fixed;
  inset: 0;
  z-index: 10001; /* #intro(10000) より上 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* 中央のロゴと重ねないよう下部に表示 */
  /* SKIPと重ならないよう下端に下限（max()で最低130px確保） */
  padding-bottom: max(8vh, 130px);
  background: transparent; /* 背景は#intro(黒)を透かし、ロゴと同時表示 */
  pointer-events: none; /* タップは#introへ通す(スキップ用) */
  opacity: 1;
  transition: opacity 0.4s ease;
}
#loading.hide {
  opacity: 0;
  pointer-events: none;
}

/* 「LOADING」テキスト：等幅トラッキングで上品に */
.loading-text {
  color: #e8eef3;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* trailing分を相殺し中央維持 */
  text-transform: uppercase;
  opacity: 0.92;
}

/* 進捗バー：細い1本のライン上を光がスイープ */
.loading-bar {
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 2px;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
.loading-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(42, 146, 216, 0) 0%,
    var(--accent) 50%,
    rgba(42, 146, 216, 0) 100%
  );
  animation: loadingSweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes loadingSweep {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(360%);
  }
}

/* アニメするドット（テキスト右の余韻） */
.loading-dots {
  display: inline-block;
}
.loading-dots span {
  display: inline-block;
  opacity: 0.25;
  animation: loadingDots 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes loadingDots {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-bar::after,
  .loading-dots span {
    animation: none;
  }
}

/* =================================================================
   入場シーケンス
   ================================================================= */
#intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  overflow: hidden;
}
#intro.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#intro-kv {
  position: absolute;
  inset: 0;
  background-image: url(/project/careshiro/images/common/intro-kv.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto; /* 全画面幅にフィット(縦は比率) */
  background-position: center bottom; /* 初期=下端。JSで上へパン */
  opacity: 0; /* JSでフェードイン */
}
/* KVフェードアウト後に順次表示する2ロゴ（黒地中央・JSでopacity制御） */
.intro-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 84vw);
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* SKIPボタン（イントロ下部中央。.btn-html を流用） */
.intro-skip {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 5;
  opacity: 0;
  pointer-events: none; /* 初期状態。JSがイントロ開始時に .ready を付与して即フェードイン */
  transition: opacity 0.4s ease;
}
.intro-skip.ready {
  opacity: 1;
  pointer-events: auto;
} /* イントロ中は常に有効（読込状況に依らない） */

/* =================================================================
   スクロール連動フェードイン
   ================================================================= */
.reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.6s ease-out,
    translate 0.6s ease-out;
}
.reveal.in {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* 悩み動画サムネ：カードがビューに入ったら左右からスライドイン（#stage-pc 限定） */
#stage-pc .wcard .video-ph {
  opacity: 0;
  transition:
    opacity 0.55s ease-out 0.1s,
    translate 0.55s ease-out 0.1s;
}
#stage-pc .wcard.is-right .video-ph {
  translate: 64px 0;
} /* 右配置→右からイン */
#stage-pc .wcard.is-left .video-ph {
  translate: -64px 0;
} /* 左配置→左からイン */
#stage-pc .wcard.in .video-ph {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  #stage-pc .wcard .video-ph {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* #sec-worry(見出し copy01): 「バンっと拡大→原寸」の登場演出 */
#sec-worry.reveal {
  translate: 0 0;
  transform: translateX(-50%) scale(1.3);
  transition:
    opacity 0.2s ease-out,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#sec-worry.reveal.in {
  transform: translateX(-50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #sec-worry.reveal {
    transform: translateX(-50%) scale(1);
    transition: none;
  }
}

/* 悩みカード1-4 の見出し(t1/t2): 「バンっと拡大→原寸」ポップ（#stage-pc 限定） */
#stage-pc .wcard .t1,
#stage-pc .wcard .t2 {
  transform: scale(1.3);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#stage-pc .wcard.in .t1,
#stage-pc .wcard.in .t2 {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #stage-pc .wcard .t1,
  #stage-pc .wcard .t2 {
    transform: scale(1);
    transition: none;
  }
}

/* SP: 悩みカードの見出し(t1/t2)と動画を「拡大→原寸pop」 */
#stage-sp .wcard .t1,
#stage-sp .wcard .t2,
#stage-sp .wcard .video-ph {
  transform: scale(1.18);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}
#stage-sp .wcard.in .t1,
#stage-sp .wcard.in .t2,
#stage-sp .wcard.in .video-ph {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #stage-sp .wcard .t1,
  #stage-sp .wcard .t2,
  #stage-sp .wcard .video-ph {
    transform: scale(1);
    transition: none;
  }
}

/* =================================================================
   コード化フッター
   構成: 1)ヘルスレント・トップへ戻るバナー 2)SNS行 3)DUSKIN下部バー
   ================================================================= */

/* ---- PC（#stage-pc 基準幅1200）---- */
#stage-pc .site-footer {
  position: relative;
  height: 603px;
  background: #fff;
  font-size: 16px;
}
/* 0. PDF誘導テキストリンク */
#stage-pc .site-footer .ft-pdf {
  text-align: center;
  padding-top: 48px;
}
#stage-pc .site-footer .ft-pdf-link {
  display: inline-block;
  padding: 16px 35px 18px;
  border: 1px solid #878787;
  border-radius: 31px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  text-decoration: none;
}
/* 1. バナー */
#stage-pc .site-footer .ft-banner {
  padding-top: 36px;
  text-align: center;
}
#stage-pc .site-footer .ft-banner-box {
  display: inline-block;
  width: 751px; /* 画像に青枠が焼き込み済みのためCSS枠は付けない(二重罫線回避) */
  background: #fff;
}
#stage-pc .site-footer .ft-banner-box img {
  width: 100%;
  height: auto;
}
/* 2. SNS行 */
#stage-pc .site-footer .ft-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 64px;
}
#stage-pc .site-footer .ft-sns a {
  display: block;
}
#stage-pc .site-footer .ft-sns img {
  height: 56px;
  width: auto;
}
/* 3. DUSKIN下部バー */
#stage-pc .site-footer .ft-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;
  height: 130px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#stage-pc .site-footer .ft-bar-left {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: 79px;
}
#stage-pc .site-footer .ft-bar-left img {
  height: 56px;
  width: auto;
}
#stage-pc .site-footer .ft-copy {
  font-size: 13px;
  color: #333;
}

/* ---- SP（@media ≤768px / #stage-sp 基準幅750）---- */
@media (max-width: 768px) {
  #stage-sp .site-footer {
    position: relative;
    background: #fff;
    font-size: 28px;
    padding-top: 33px;
  }
  /* 0. PDF誘導テキストリンク */
  #stage-sp .site-footer .ft-pdf {
    text-align: center;
    padding: 30px 0 40px;
  }
  #stage-sp .site-footer .ft-pdf-link {
    display: inline-block;
    padding: 22px 40px 25px;
    border: 1px solid #878787;
    border-radius: 42px;
    color: #222;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0px;
    text-decoration: none;
  }
  /* 1. バナー */
  #stage-sp .site-footer .ft-banner {
    text-align: center;
  }
  #stage-sp .site-footer .ft-banner-box {
    display: inline-block;
    width: 690px; /* 画像に青枠が焼き込み済みのためCSS枠は付けない(二重罫線回避) */
    background: #fff;
  }
  #stage-sp .site-footer .ft-banner-box img {
    width: 100%;
    height: auto;
  }
  /* 2. SNS行 */
  #stage-sp .site-footer .ft-sns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 44px;
    margin-top: 100px;
    padding-bottom: 110px;
  }
  #stage-sp .site-footer .ft-sns a {
    display: block;
  }
  #stage-sp .site-footer .ft-sns img {
    height: 70px;
    width: auto;
  }
  /* 3. DUSKINロゴ */
  #stage-sp .site-footer .ft-duskin {
    background: #fff;
    text-align: center;
    padding: 24px 0 44px;
  }
  #stage-sp .site-footer .ft-duskin img {
    width: 380px;
    height: auto;
    margin: 0 auto;
  } /* imgがblockのため margin auto で中央化 */
  /* 4. 濃色帯 */
  #stage-sp .site-footer .ft-bar {
    position: relative;
    background: #231815;
    padding: 30px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
  }
  #stage-sp .site-footer .ft-bar-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #stage-sp .site-footer .ft-copy {
    font-size: 16px;
    line-height: 1.7;
    color: #fff;
    text-align: center;
  }
}

/* ============================================================
   ページのトップへ（スティッキー）
   ============================================================ */
.backtop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 80px;
  height: 80px;
  border: 1px solid #b9d3ef;
  border-radius: 50%;
  background: #fff;
  color: #2b6fb6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  cursor: pointer;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.backtop.show {
  opacity: 1;
  visibility: visible;
}
.backtop .backtop-chev {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto 4px;
  border-top: 2.5px solid currentColor;
  border-left: 2.5px solid currentColor;
  transform: rotate(45deg);
}
.backtop .backtop-txt {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 768px) {
  .backtop {
    right: 16px;
    bottom: 18px;
    width: 84px;
    height: 84px;
  }
  .backtop .backtop-chev {
    width: 15px;
    height: 15px;
    border-top-width: 3.5px;
    border-left-width: 3.5px;
    margin-bottom: 5px;
  }
  .backtop .backtop-txt {
    font-size: 14px;
  }
}

/* 君も介護の救世主にならないか!?（KV内に固定配置・採用へアンカー） */
.follow-sticky {
  position: absolute;
  z-index: 8000;
  display: block;
  line-height: 0;
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
/* スクロールで隠す（トップ付近で再表示） */
.follow-sticky.is-scrolled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.follow-sticky img {
  width: 100%;
  height: auto;
  display: block;
}
.follow-sticky.is-pc {
  top: 170px;
  right: 20px;
  width: 292px;
}
.follow-sticky.is-sp {
  display: none;
}
@media (max-width: 768px) {
  .follow-sticky.is-pc {
    display: none;
  }
  /* KV内に固定（非スティッキー＝スクロールで一緒に流れる） */
  .follow-sticky.is-sp {
    display: block;
    top: 100px;
    right: 14px;
    width: 190px;
  }
}
.backTopBtn{
  display: none;
}