.front {
  position: relative; /* もしくは absolute/fixed */
  z-index: 999;       /* 大きいほど前面に */
}

/* 背景画像（F）設定 */
.bg-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(images/bg.png); /* ← 背景画像ファイル名 */
  background-repeat: repeat-y;              /* 縦に繰り返す */
  background-position: center top;          /* 横中央に固定 */
  background-size: 100% auto;               /* 横幅はブラウザ幅に合わせる */
  z-index: -1;
  pointer-events: none;
}

/* 全体背景色（必要に応じて） */
body {
  margin: 0;
  padding: 0;
  background-color: #ffedef; /* 背景画像の端が見えたときのため */
}

/* コンテンツ全体（最大1350px） */
#container {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  background-color: #ffff;
}

/* 各セクション画像 */
section img {
  width: 100%;
  height: auto;
  display: block;
}

/* ボタンを画像上に重ねるセクション*/
.with-btn {
  position: relative;
}
.with-btn picture,
.with-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* ボタン共通 */
.with-btn .btn {
  position: absolute;
  width: 20%;
}

/* スマホ用設定 */
@media screen and (max-width: 768px) {
  .bg-fixed {
    display: none; /* 背景非表示 */
  }

  #container {
    max-width: 100%;
  }
}


/* PC時のボタン位置 */
.btn1 {
  top: 90%;
  left: 12%;
}
.btn2 {
  top: 90%;
  left: 60%;
}

.btn3 {
  top: 76%;
  left: 7%;
}
.btn4 {
  top: 87%;
  left: 7%;
}

.btn5 {
  top: 87%;
  left: 71%;
}

.btn6, .btn9 {
  top: 88%;
  left: 15%;
}
.btn7, .btn10 {
  top: 88%;
  left: 65%;
}

.btn8 {
  top: 83%;
  left: 15%;
}

/* セクションA（メイン画像） */
.section_a {
  position: relative;
}

/* 飾りの梅  */
.decorate01 {
  position: absolute;
  bottom: calc(-80 / 1350 * 100%);
  right: calc(50 / 1350 * 100%);
  width: min(calc(173 / 1350 * 100%), 173px);
}

/* セクションF 価格改訂のご案内 */
.section_f {
  margin-top: calc(50 / 1350 * 100%);
}

/* スクロール時エフェクト */
.scr-target {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.scr-target {
    opacity: 0;
}

/* フェードイン */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadein.is-active {
    animation-name: fadeIn;
}

/* スマホ時のボタン位置（画像入れ替えに伴う再配置） */
@media screen and (max-width: 768px) {
  /* ボタン共通 */
  .with-btn .btn {
    width: 60%;
  }

  .btn1 {
    top: 54%;
    left: 20%;
  }

  .btn2 {
    top: 94%;
    left: 20%;
  }

  .btn3 {
    top: 55%;
    left: 20%;
  }
  .btn4 {
    top: 94%;
    left: 20%;
  }

  .btn5 {
    top: 90%;
    left: 20%;
  }

  .btn6 {
    top: 45%;
    left: 20%;
  }
  .btn7 {
    top: 92%;
    left: 20%;
  }

  .btn8 {
    top: 89%;
    left: 20%;
  }

  .btn9 {
    top: 38%;
    left: 20%;
  }
  .btn10 {
    top: 94%;
    left: 20%;
  }

  .decorate01 {
    display: none;
  }

  .section_f {
    margin-top: 0;
  }
}