@charset "utf-8";

/* Reset */
html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
small,
strong,
b,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
legend,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
footer,
header,
menu,
nav,
section,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: bottom;
  background: transparent;
}
body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
}
ul li {
  list-style: none;
}
a {
  margin: 0;
  padding: 0;
  color: #666;
  text-decoration: none;
  vertical-align: baseline;
}
a:hover {
  opacity: 0.7;
}
img {
  width: 100%;
  display: block;
}
table {
  border-spacing: 0;
}

/* Body */
body {
  color: #333;
  font-size: 16px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1;
}

/* Wrap - 最大幅750px、750px以上で中央配置 */
.wrap {
  max-width: 750px;
  margin: 0 auto;
  background: #fafadc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* FV - margin-topなし */
.fv {
  margin-top: 0;
  position: relative;
}

/* Product - margin-top 80px */
.product {
  margin-top: min(10.6vw, 80px);
  position: relative;
}

.btn {
  position: absolute;
  width: min(30vw, 225px);
}

.btn_01 {
  bottom: min(5.4vw, 40px);
  left: 50%;
  transform: translateX(-50%);
}

.btn_02 {
  top: min(20vw, 150px);
  right: min(12vw, 90px);
}

.btn_03 {
  bottom: min(5.4vw, 40px);
  right: min(12vw, 90px);
}

.btn_04 {
  bottom: min(5.4vw, 40px);
  left: min(12vw, 90px);
}

.btn_05 {
  bottom: min(5.4vw, 40px);
  right: min(12vw, 90px);
}

.btn_06 {
  bottom: min(5.4vw, 40px);
  left: 50%;
  transform: translateX(-50%);
}

.btn_07 {
  top: min(20vw, 150px);
  right: min(12vw, 90px);
}

.btn_08 {
  bottom: min(5.4vw, 40px);
  right: min(12vw, 90px);
}

.btn_09 {
  bottom: min(5.4vw, 40px);
  left: min(12vw, 90px);
}

.btn_10 {
  bottom: min(5.4vw, 40px);
  right: min(12vw, 90px);
}

.btn_11 {
  top: min(12vw, 90px);
  right: min(12vw, 90px);
}

.btn_12 {
  bottom: min(5.4vw, 40px);
  right: min(12vw, 90px);
}

/* Product btn - margin 40px 20px */
.product_btn {
  margin: min(5.4vw, 40px) auto;
  position: relative;
  display: flex;
  justify-content: center;
}

.product_btn_link {
  display: block;
  width: min(50vw, 375px);
}

/* Footer Image - margin-topなし */
.footer_img {
  margin-top: 0;
}

.footer_nav {
  margin-top: min(-2.7vw, -20px);
  position: relative;
  padding: 0 0 min(8vw, 60px);
  display: flex;
  justify-content: center;
  background: #fff;
}

.footer_link {
  position: absolute;
  bottom: min(2.7vw, 20px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(86vw, 648px);
}

/* スマホサイズでボタンを1.2倍に拡大 */
@media (max-width: 430px) {
  .btn {
    width: calc(min(30vw, 225px) * 1.4);
  }

  .btn_01 {
    bottom: min(3vw, 28px);
  }

  .btn_02 {
    right: min(6.6vw, 50px);
  }

  .btn_03 {
    bottom: min(3vw, 28px);
    right: min(6.6vw, 50px);
  }

  .btn_04 {
    bottom: min(3vw, 28px);
    left: min(7vw, 40px);
  }

  .btn_05 {
      bottom: min(3vw, 28px);
      right: min(5vw, 45px);
  }

  .btn_06 {
    bottom: min(3vw, 28px);
  }

  .btn_07 {
    right: min(5vw, 50px);
  }

  .btn_08 {
    bottom: min(2vw, 28px);
    right: min(5vw, 50px);
  }

  .btn_09 {
    bottom: min(3vw, 28px);
    left: min(7vw, 40px);
  }

  .btn_10 {
    bottom: min(3vw, 28px);
    right: min(5vw, 45px);
  }

  .btn_11 {
    top: min(11vw, 50px);
    right: min(5vw, 50px);
  }

  .btn_12 {
    bottom: min(3vw, 28px);
    right: min(5vw, 45px);
  }

  .product_btn {
    margin: calc(min(5.4vw, 40px) * 1.4) auto;
  }

  .product_btn_link {
    width: calc(min(50vw, 375px) * 1.4);
  }
}