@charset "utf-8";

/* =============================
   リセット
============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* =============================
   全体
============================= */
body {
  font-family: 'Meiryo', sans-serif;
  background: url("../images/bg.jpg") repeat;
  color: #333;
}

/* =============================
   FV
============================= */
#fv {
  width: 100%;
}

/* PC：750px中央固定 */
.fv-inner {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* FV画像 */
.fv-img {
  width: 100%;
  height: auto;
}

/* =============================
   CTAボタン
============================= */
.btn-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5%;
  display: inline-block;
  animation: pulseBtn 2s infinite ease-in-out;
}
@keyframes pulseBtn {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

/* PC基準サイズ（画像サイズ準拠） */
.btn {
  width: 622px;
  max-width: none;
}

/* =============================
   フッター
============================= */
#footer {
  background-color: #135da4;
  width: 100%;
}

.container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
}

.footer-link {
  font-size: 12px;
  margin-bottom: 10px;
}

.footer-link a {
  color: #fff;
  text-decoration: underline;
}

.footer-link a:hover {
  color: #d90909;
}

.footer-copy {
  font-size: 12px;
  color: #fff;
}

/* =============================
   スマホ最適化（ここが重要）
============================= */
@media (max-width: 768px) {

  /* コンテナ余白なしでフル表示 */
  .fv-inner {
    padding: 0;
  }

  /* ボタンを画面いっぱいに近づける */
  .btn {
    width: 85vw;      /* ←ここが効く */
    max-width: none;  /* 制限解除 */
  }

  /* 位置も少し上げると押しやすい */
  .btn-wrap {
    bottom: 4%;
  }
}