/* ------------------------------ */
/* 基本スタイル */
/* ------------------------------ */

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.main-content {
  width: 100%;
}

/* ------------------------------ */
/* セクション共通 */
/* ------------------------------ */

.image-section {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* SP専用画像コンテナ（PC時: 480px中央寄せ） */
/* 背景(section-bg)と前景(section-stack)を同じグリッドセルに重ね、 */
/* 高い方に section-inner の高さが揃う（前景がはみ出さない） */
.section-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 480px;
  margin: 0 auto;
  /* 登場アニメで画像が480px枠の外へはみ出して見えないようクリップ */
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .section-inner {
    max-width: 100%;
  }
}

.section-inner img {
  width: 100%;
  height: auto;
  display: block;
}

/* 背景画像：自身の高さでセル高を決めつつ、前景が高い場合はセル高まで縦に伸びる */
.section-bg {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: fill;
  display: block;
}

/* sec○-1, sec○-2 をまとめて重ねるラッパー（背景と同じセルに重ねる） */
.section-stack {
  grid-area: 1 / 1;
  align-self: start;
  padding: 0 16px;
}

.section-stack img {
  width: 100%;
  height: auto;
  display: block;
}

/* 背景なし（sec18など単体画像セクション） */
.section-inner--no-bg {
  background: none;
}

/* ------------------------------ */
/* セクション個別配置 */
/* ------------------------------ */

/* Section 01: section-stackを下端から32px相当（約6.67%）上に配置 */
#section-01 .section-stack {
  align-self: end;
  margin-bottom: 6.67%;
}

/* Section 01: sec01-1 は左右パディング(16px)を相殺してコンテナ幅100%で表示 */
#section-01 .section-stack img:nth-of-type(1) {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

#section-01 .section-stack img:nth-of-type(2) {
  margin-top: 2.7%;
}

/* Section 02: sec02-1の上に約38px相当（約8.02%）の余白 */
#section-02 .section-stack {
  margin-top: 8.02%;
}

#section-02 .section-stack img:nth-of-type(2) {
  margin-top: 3.33%;
}

/* Section 03: sec03-1の上に約139px相当（約28.92%）の余白 */
#section-03 .section-stack {
  margin-top: 28.92%;
}

/* Section 04: sec04-1 は左へ16px・少し下、sec04-2 は右へ16pxシフト */
#section-04 .section-stack img:nth-of-type(1) {
  margin-top: 5%;
  transform: translateX(-16px);
}

#section-04 .section-stack img:nth-of-type(2) {
  transform: translateX(16px);
}

/* Section 06: sec06-1 は左右パディング(16px)を相殺してコンテナ幅100%で表示 */
#section-06 .section-stack img:nth-of-type(1) {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

/* Section 06: sec06-1とsec06-2の間に16px相当（約3.33%）の余白 */
/* sec06-2 は左右パディング(16px)を相殺してコンテナ幅100%で表示 */
#section-06 .section-stack img:nth-of-type(2) {
  margin-top: 3.33%;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

/* Section 06: sec06-5の上に16px相当（約3.33%）の余白 */
#section-06 .section-stack img:nth-of-type(5) {
  margin-top: 3.33%;
}

/* Section 06: sec06-6の上に16px相当（約3.33%）の余白 */
#section-06 .section-stack img:nth-of-type(6) {
  margin-top: 3.33%;
}

/* Section 06: sec06-7 を下方向に約15%ずらす・前面に表示・上に20px相当の余白 */
/* transformはレイアウト高さを増やさないため、ずらした分をmargin-bottomで確保し
   section-inner の overflow:hidden で下端が見切れないようにする */
#section-06 .section-stack img:nth-of-type(7) {
  transform: translateY(15%);
  position: relative;
  z-index: 2;
  margin-top: 4.17%;
  margin-bottom: 10%;
}

/* Section 07: sec07-1 は左右パディング(16px)を相殺してコンテナ幅100%で表示 */
#section-07 .section-stack img:nth-of-type(1) {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

/* Section 08: sec08-1 を下げる（section高さも伸びて見切れない・8.5%相当≒29.08%） */
#section-08 .section-stack img:nth-of-type(1) {
  margin-top: 29.08%;
}

/* Section 09: section-stack 全体を下に約187px（39%）下げる */
#section-09 .section-stack {
  margin-top: 39%;
}

/* Section 10: sec10-1 を少し下げる（約38px・8%） */
#section-10 .section-stack img:nth-of-type(1) {
  margin-top: 8%;
}

/* Section 11: 画像間のgapを10px相当（約2.08%）に */
#section-11 .section-stack img+img {
  margin-top: 2.08%;
}

/* Section 12: section-stack 全体を20px相当（約4.17%）下げる */
#section-12 .section-stack {
  margin-top: 4.17%;
}

/* Section 12: 画像間のgapを20px相当（約4.17%）に */
#section-12 .section-stack img+img {
  margin-top: 4.17%;
}

/* Section 12: 奇数(sec12-3,5,7)は右へ+16px、偶数(sec12-2,4,6)は左へ-16px */
/* sec12-1・sec12-8 は通常配置 */
#section-12 .section-stack img:nth-of-type(3),
#section-12 .section-stack img:nth-of-type(5),
#section-12 .section-stack img:nth-of-type(7) {
  transform: translateX(16px);
}

#section-12 .section-stack img:nth-of-type(2),
#section-12 .section-stack img:nth-of-type(4),
#section-12 .section-stack img:nth-of-type(6) {
  transform: translateX(-16px);
}

/* Section 09: 画像間のgapを10px相当（約2.08%）に */
#section-09 .section-stack img+img {
  margin-top: 2.08%;
}

/* Section 13: sec13-1・sec13-2 は左右パディング(16px)を相殺してコンテナ幅100%で表示 */
#section-13 .section-stack img:nth-of-type(1),
#section-13 .section-stack img:nth-of-type(2) {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

/* Section 13: sec13-3の上に20px相当（約4.17%）の余白 */
/* sec13-3 は左右パディング(16px)を相殺してコンテナ幅100%（最大480px）で表示 */
#section-13 .section-stack img:nth-of-type(3) {
  margin-top: 4.17%;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

/* Section 14: sec14-1 を約96px（20%）下げる */
#section-14 .section-stack img:nth-of-type(1) {
  margin-top: 20%;
}

/* Section 14: CTAボタンをもう少し下げる（bottom: 20px → 0） */
#section-14 .cta-btn {
  bottom: 0;
}

/* Section 15: section-stack 全体を約182px（38%）下げる */
#section-15 .section-stack {
  margin-top: 38%;
}

/* Section 15: 画像間のgapを20px相当（約4.17%）に */
#section-15 .section-stack img+img {
  margin-top: 4.17%;
}

/* Section 15: CTAボタンをもう少し下げる（bottom: -2.5%） */
#section-15 .cta-btn {
  bottom: -2.5%;
}

/* Section 16: sec16-1 を15%（約72px）下げる */
#section-16 .section-stack img:nth-of-type(1) {
  margin-top: 15%;
}

/* Section 17: section-stack 全体を少し下げる（約38px・8%） */
#section-17 .section-stack {
  margin-top: 8%;
}

/* Section 17: 画像間のgapを20px相当（約4.17%）に */
#section-17 .section-stack img+img {
  margin-top: 4.17%;
}

/* Section 17: sec17-2 は左右パディング(16px)を相殺してコンテナ幅100%で表示 */
#section-17 .section-stack img:nth-of-type(2) {
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}

/* Section 19: sec19-1 を少し下げる（約48px・10%） */
#section-19 .section-stack img:nth-of-type(1) {
  margin-top: 10%;
}

/* Section 20: sec20-1 を左右マージン調整で横幅100%に */
#section-20 .section-stack img:nth-of-type(1) {
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
}

/* ------------------------------ */
/* CTAボタン（セクション内） */
/* ------------------------------ */

.image-section--cta {
  position: relative;
}

.cta-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 440px;
  max-width: calc(100% - 40px);
  z-index: 10;
  animation: float 3s ease-in-out infinite;
}

.cta-btn__img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes float {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* ------------------------------ */
/* 追従CTAボタン（SP/PC共通・画面下部固定） */
/* ------------------------------ */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 16px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* section-20 到達時に非表示（JSで is-hidden を付与） */
.sticky-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* SP: 50vhスクロールするまで非表示（JSで is-before-scroll を制御） */
.sticky-cta.is-before-scroll {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* PC時のみ：スクロール量に関係なく常時表示（is-before-scroll を無効化） */
/* ※ 同詳細度のため、上の基本ルールより後に置いて勝たせる */
@media screen and (min-width: 768px) {
  .sticky-cta.is-before-scroll {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 1400px超：追従ボタンを画面右端（右下）に寄せ、section-20 到達後も表示したまま */
/* （1400px以下は中央表示・section-20 到達時に is-hidden で非表示） */
@media screen and (min-width: 1401px) {
  .sticky-cta {
    left: auto;
    right: 0;
    justify-content: flex-end;
  }

  .sticky-cta.is-hidden {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.sticky-cta__link {
  display: block;
  width: 100%;
  max-width: 440px;
}

.sticky-cta__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------ */
/* CTA共通：ホバーで拡大（全CTA共通） */
/* 親の浮遊アニメと競合しないよう内側の画像をスケール */
/* ------------------------------ */
.cta-btn__img,
.sticky-cta__img {
  transition: transform 0.3s ease;
}

.cta-btn:hover .cta-btn__img,
.sticky-cta__link:hover .sticky-cta__img {
  transform: scale(1.05);
}

/* ------------------------------ */
/* フッター */
/* ------------------------------ */
.footer {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 16px 50px;
  text-align: center;
}

.footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.footer__link {
  color: #333;
  font-size: 14px;
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

.footer__link:hover {
  opacity: 0.7;
}

/* 下層ページのフッターは追従CTAが無いため下余白を抑える */
.footer--lower {
  padding-bottom: 48px;
  border-top: 1px solid #eee;
}

/* ------------------------------ */
/* 下層ページ */
/* ------------------------------ */
.lower {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 16px 80px;
}

@media screen and (max-width: 767px) {
  .lower {
    padding: 32px 16px 56px;
  }
}

.lower__title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
  .lower__title {
    font-size: 22px;
  }
}

.lower__lead {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 40px;
}

.lower__section {
  margin-bottom: 36px;
}

.lower__heading {
  font-size: 18px;
  font-weight: 700;
  padding-left: 12px;
  border-left: 4px solid #333;
  margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
  .lower__heading {
    font-size: 16px;
  }
}

.lower__text {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 16px;
}

.lower__text:last-child {
  margin-bottom: 0;
}

.lower__list {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 16px;
}

.lower__list-item {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 6px;
}

.lower__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.lower__table th,
.lower__table td {
  border: 1px solid #e0e0e0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}

.lower__table th {
  width: 34%;
  background-color: #f7f7f7;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .lower__table th,
  .lower__table td {
    display: block;
    width: 100%;
  }

  .lower__table th {
    border-bottom: none;
  }
}

.lower__date {
  margin-top: 40px;
  font-size: 14px;
  color: #777;
  text-align: right;
}