/* =================================
  base
================================= */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* =================================
  header
================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo img {
  width: 120px;
  height: auto;
}

@media screen and (max-width: 767px) {
  .header__logo img {
    width: 110px;
  }
}

.header__btn img {
  width: 160px;
  height: auto;
}

@media screen and (max-width: 767px) {
  .header__btn img {
    width: 120px;
  }
}

@media screen and (max-width: 767px) {
  .header__inner {
    max-width: 750px;
    height: 48px;
  }
}

@media screen and (min-width: 768px) {
  .header__inner {
    max-width: 1366px;
    height: 60px;
  }
}

/* =================================
  main
================================= */
main {
  padding-top: 48px; /* header height (SP) */
}

@media screen and (min-width: 768px) {
  main {
    padding-top: 60px; /* header height (PC) */
  }
}

/* =================================
  FV
================================= */
.fv {
  width: 100%;
  overflow: hidden;
}

/* PC：FVを拡大縮小 */
@media screen and (min-width: 768px) {
  .fv img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* =================================
  section
================================= */
.section,
.section2,
.section3,
.section4,
.section5,
.section6,
.section7,
.section8,
.section9,
.section10,
.section11,
.section12 {
  padding: 0;
  margin-top: -1px;
}

/* section12のボタン重ね設定 */
.section12 {
  position: relative;
  display: inline-block;
}

.section12_inner img {
  display: block;
  width: 100%;
  height: auto;
}

.section12_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}

.section12_btn img {
  width: 80px;
  height: auto;
}

.section12__add {
  width: 300px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
}

/* SP用ボタンサイズ調整 */
@media screen and (max-width: 767px) {
  .section12_btn {
    bottom: 10px;
  }
  .section12_btn img {
    width: 300px;
  }
  .section12__add {
    width: 300px;
  }
}

/* section内共通内側余白 */
.section__inner {
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 767px) {
  .section__inner {
    max-width: 750px;
  }
}

@media screen and (min-width: 768px) {
  .section__inner {
    max-width: 1366px;
  }
}

/* =================================
  footer
================================= */
.footer {
  background-color: #000000;
  color: #ffffff;
  width: 100%;
  display: block;
}

.footer__inner {
  height: 100%;
  position: relative;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer__links {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.footer__links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
}

.footer__copy {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .footer {
    height: 100px;
  }
  .footer__copy {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  .footer {
    height: 120px;
  }
  .footer__copy {
    font-size: 20px;
  }
}

/* =================================
  SP専用セクション制御
================================= */
/* デフォルト（全画面）では非表示 */
.section--sp {
  display: none;
}

/* SP（767px以下）の場合のみ表示 */
@media screen and (max-width: 767px) {
  .section--sp {
    display: block !important;
  }
}

/* PC（768px以上）では強制非表示 */
@media screen and (min-width: 768px) {
  .section--sp {
    display: none !important;
  }
}

/* =================================
  section12（PC/SP最適化）
================================= */

.section12 {
  padding: 0;
}

.section12_inner {
  position: relative;
  width: 100%;
}

/* メイン画像 */
.section12__main img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
  ボタン（共通）
========================= */
.section12_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: 2;
}

.section12_btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
  追加画像（共通）
========================= */
.section12__add {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  z-index: 1;
}

.section12__add img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
  SP（767px以下）
========================= */
@media screen and (max-width: 767px) {

  .section12_btn {
    bottom: 40px;
    width: 300px;
  }

  .section12__add {
    bottom: -20px;
    width: 300px;
  }
}

/* =========================
  PC（768px以上）
========================= */
@media screen and (min-width: 768px) {

  .section12_btn {
    top: 55%;
    width: 220px;
  }

  .section12__add {
    top: 72%;
    width: 260px;
  }
}

@media screen and (max-width: 767px) {
  .section12_btn {
    bottom: 100px; /* 40px → 100px（+60px） */
  }
}

@media screen and (min-width: 768px) {
  .section12_btn {
    top: calc(55% - 60px);
  }
}

/* 共通（PC/SP両方に効く） */
.section12_btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -60px); /* ← ここが重要 */
  z-index: 2;
}

/* PCのみ：ボタンを100px下に移動 */
@media screen and (min-width: 768px) {
  .section12_btn {
    transform: translate(-50%, 30px);
  }
}

/* SPのみ：ボタンを10px下に移動 */
@media screen and (max-width: 767px) {
  .section12_btn {
    transform: translate(-50%, -50px); /* 例：-60px → -50px */
  }
}