@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Lemon&family=Zen+Antique+Soft&display=swap');

html {
  font-size: 10px;
}

#header_top,
#header_top #header_bg {
  position: relative;
}

#header_top *,
#header_top *:before,
#header_top *:after {
  box-sizing: border-box;
}

#header_top {
  margin: 0 0 6% 0;
}

#header_top #header_bg {
  width: 100%;
  height: 37.5rem;
  background-image: linear-gradient( to bottom, #93b58e 0%, #93b58e 9%, #96c6c1 9%, transparent 100%);
}

#header_top #h_logo,
#header_top #h_nm,
#header_top #h_txt {
  position: absolute;
  display: flex;
}

#header_top #h_logo {
  width: 10%;
  top: 11%;
  left: 45%;
}

#header_top #h_logo .logo_haru {
  width: 100%;
}

#header_top #h_logo .logo_haru .c_brown {
  fill: #602a1c;
}

#header_top #h_logo .logo_haru .c_orange {
  fill: #e98236;
}

#header_top #h_nm {
  width: 100%;
  top: 45%;
  left: 0%;
}

#header_top #h_nm p.step {
  font-family: 'Lemon', cursive;
  font-size: 3.6rem;
  position: relative;
  margin: 0 0;
  text-align: center;
  vertical-align: middle;
  width: 22%;
  height: calc(750px * 0.22);
  color: #ffffff;
  border-radius: 50%;
  background-image: linear-gradient( to bottom, #c6969b 0%, #b08eb5 100%);
  border: solid 2px transparent;
}

#header_top #h_nm p.step.active {
  color: #000000;
  background-image: linear-gradient( to bottom, #adcfa8 0%, #799b74 100%);
  border: solid 2px #ffffff;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
}

#header_top #h_nm p.step_1,
#header_top #h_txt p.step_1 {
  margin: 0 0 0 4%;
}

#header_top p.step_3,
#header_top #h_txt p.step_3 {
  margin: 0 4% 0 0;
}

#header_top #h_nm p.step .cnt01 {
  position: absolute;
  width: 80%;
  top: 16%;
  left: 10%;
}

#header_top #h_nm p.step .cnt02 {
  position: absolute;
  width: 80%;
  bottom: 13%;
  left: 10%;
  font-size: 2.2em;
}

#header_top #h_nm p.trigon {
  width: 13%;
  position: relative;
}

#header_top #h_nm p.trigon .trigon_svg {
  position: absolute;
  width: 45%;
  top: 35%;
  left: 30%;
}

#header_top #h_nm p.trigon .trigon_svg .trigon_01 {
  fill: #602a1c;
}

#header_top #h_txt {
  top: 93%;
  width: 100%;
  text-align: center;
}

#header_top #h_txt p.txt {
  font-family: 'Kosugi Maru', sans-serif;
  width: 22%;
  font-size: 2.0rem;
  font-weight: bold;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
}

#header_top #h_txt p.txt.active {
  color: #ff0000;
}

#header_top #h_txt p.txt_sp {
  width: 13%;
}

#block_confirm .confirm_msg {
  font-family: 'Kosugi Maru', sans-serif;
  font-size: 3.0rem;
  color: #ff0000;
  font-weight: bold;
  text-align: center;
  margin: 0 auto 4%;
}

#block_confirm_btn #confirm_button .svg_arrow {
  width: 12.9%;
  top: 0%;
  left: 7%;
}

#block_confirm_btn #confirm_button .btn_cnt {
  width: 75%;
  padding: 0.5em 0.25em;
}

#block_confirm_btn #confirm_button .btn_cnt .stc02 {
  font-size: 1.2em;
}

#block_thanks {
  text-align: center;
  font-size: 3.0rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}

#block_thanks p {
  margin: 0 0 6%;
}

#block_thanks p.thx_msg_ttl {
  font-family: 'Zen Antique Soft', serif;
  font-size: 1.4em;
  font-weight: bold;
  color: #799b74;
  margin: 8% 0 8%;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 3px #ffffff;
}

#block_thanks p.thx_msg_ttl span {
  background-image: linear-gradient(to bottom, transparent 0%, transparent 90%, #799b74 90%);
}

#block_thanks p sup {
  font-size: 0.5em;
  vertical-align: super;
}

#block_thanks p.thx_msg_anno {
  font-size: 0.65em;
  text-align: left;
  padding: 0 0 0 1em;
}

#confirm_button .svg_arrow {
  width: 13.4%;
  top: 0%;
  left: 2%;
}

#block_thanks #confirm_button .btn_cnt {
  width: 82%;
  margin: 0 auto 5%;
}

#block_thanks #confirm_button .btn_cnt .stc02 {
  font-size: 1.3em;
}

#block_thanks #confirm_button .btn_cnt .stc03 {
  letter-spacing: -0.06em;
}

@media screen and (max-width: 750px) {
  #header_top #header_bg {
    height: 50vw;
  }

  #header_top #h_nm p.step {
    font-size: 4.8vw;
    height: calc(100vw * 0.22);
  }

  #header_top #h_txt p.txt {
    font-size: 2.6667vw;
  }

  #block_confirm .confirm_msg {
    font-size: 4.0vw;
  }

  #block_thanks {
    font-size: 4.0vw;
  }
}