@charset "UTF-8";

/* 変数の定義 */
:root {
  --content-width: 750px;
  --min-content-width: 375px;
}
html {
  scroll-behavior: smooth;
  /* コンテンツ幅でのフォントサイズ */
  font-size: clamp(1px, 1.11vw, 16px);
  width: 100%;
}
main {
  max-width: var(--content-width);
  margin: 0 auto;
  box-shadow: 0px 0px 10px #666666;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
.btn-cta_img {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  transition: 0.3s;
}
.btn-cta_img:hover {
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.25));
}
a {
  display: block;
  width: fit-content;
  width: 95.733%;
  width: clamp(1px, 95.733%, calc(var(--content-width) * 0.95733));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s;
}
a:hover {
  transform: translate(-50%, 4px);
}

.cta-fv,
.cta-sec06,
.cta-sec18,
.cta-sec21 {
  position: relative;
}
.cta-fv a {
  bottom: clamp(1px, 10.667vw, 80px);
}
.cta-sec06 a {
  bottom: clamp(1px, 9.333vw, 70px);
}
.cta-sec18 a {
  bottom: clamp(1px, 7.333vw, 55px);
}
.cta-sec21 a {
  bottom: clamp(1px, 10.667vw, 80px);
}