*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  background-color: #c8a9ac;
  min-height: 100vh;
  }
  .cta-consent{
    font-size: 13px;
    background:#efe4e2;
    color:#5b4944;
    border:1px solid rgba(91,73,68,.15);
    border-radius:6px;
    padding:6px 10px;
}

/* ===== PC layout ===== */
.bg-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to right, #c8a9ac 0%, #c8a9ac calc(50% - 140px), #fff calc(50% - 140px), #fff calc(50% + 140px), #eee1e2 calc(50% + 140px), #eee1e2 100%);
}

/* スクロールラベル全体の配置 */
.scroll-label {
  position: fixed;
  right: calc(50% - 250px);
  top: 80%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* テキストと矢印の間隔 */
}

/* テキスト部分のスタイル */
.scroll-label-text {
  writing-mode: vertical-rl;
  letter-spacing: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #8b7a75;
}

/* 矢印部分のコンテナ。アニメーションのために必要 */
.scroll-label-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG パス（矢印）のアニメーション設定 */
.scroll-path {
  /* `stroke-dasharray` と `stroke-dashoffset` を使用したパスアニメーション */
  /* パスの長さよりも大きな値を設定する */
  stroke-dasharray: 200px;
  stroke-dashoffset: 200px; /* 初期状態では完全に非表示 */
}

/* アニメーションの実行を制御するためのクラス */
.scroll-path.animate {
  animation: drawLine 3.5s linear infinite; /* アニメーション名、時間、タイミング関数、ループ回数 */
}

/* アニメーションの定義 */
@keyframes drawLine {
  /* 上から徐々に描画 (0%〜50%) */
  0% {
    stroke-dashoffset: 200px; /* 完全に非表示 */
  }
  50% {
    stroke-dashoffset: 0; /* 完全に描画 */
  }
  /* 描画された状態を少し維持 (50%〜60%) */
  60% {
    stroke-dashoffset: 0;
  }
  /* 上から徐々に消えていく (60%〜90%) */
  /* これを実現するために、dashoffset を負の値にする（パスの始点から消えていく） */
  90% {
    stroke-dashoffset: -200px; /* 完全に非表示 */
  }
  /* 完全に消えた状態を維持 (90%〜100%) */
  100% {
    stroke-dashoffset: -200px;
  }
}

.profile-card {
  width: 400px;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 16px rgba(0, 0, 0, 0.08);
}

/* Content padding */
.profile-content {
  padding: 0;
}

/* メインコンテンツ画像ブロック（CTA を重ねるための基準位置） */
.content-image {
  position: relative;
}

.content-image img {
  width: 100%;
  display: block;
}

/* 画像に重ねる LINE ボタン（共通スタイル） */
.cta {
  position: absolute;
  left: 20px;
  right: 20px;
  display: block;
  animation: lineBtnFloat 2s ease-in-out infinite;
}

.cta img {
  width: 100%;
  display: block;
}

@keyframes lineBtnFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* CTA の位置調整（画像ごとに個別に微調整してください） */
.cta-02 {
  top: 3%;
}

.cta-05 {
  top: 80%;
}

.cta-08 {
  top: 85%;
}

.cta-12 {
  top: 80%;
}

/* Footer */
.footer {
  background: #5b4944;
  padding: 32px 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
}

.footer-links a {
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.footer-notice {
  font-size: 12px;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 20px;
}

.footer-copyright {
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  body {
    background-color: #fff;
  }

  .bg-wrapper {
    background: #fff;
    display: block;
  }

  .scroll-label {
    display: none;
  }

  .profile-card {
    width: 100%;
    max-width: 100%;
  }

  .cta {
    left: 15px;
    right: 15px;
  }

}