@charset "UTF-8";

/* init
------------------------------------------------*/
body {
  font-family: 'Noto Sans CJK JP', 'Noto Sans', 'Noto Sans JP', 'ヒラギノ角ゴ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic', sans-serif;
  line-height: 1.5;
  font-size: 1rem;
  color: #001a2e;
  background-color: #fff;
}

body * {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  box-sizing: content-box;
  vertical-align: bottom;
}

a {
  font-weight: bold;
  color: #0068b7;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  html {
    font-size: calc(100vw / 37.5);
  }

  body {
    min-width: 0;
    font-size: 3.2vw !important;
  }
}

/* main
------------------------------------------------*/
.main {
  max-width: 750px;
  margin: 0 auto;
  box-shadow: 0 0 20px rgb(0 104 183 / 30%);
}

.kv {
  max-width: 750px;
  margin: 0 auto;
}

/* エントリーボタン
------------------------------------------------*/
.button_area {
  margin: 0 auto;
  max-width: 750px;
}

.button_area_inner {
  text-align: center;
  padding: 50px 20px 100px;
  font-size: 1.375rem;
  font-weight: bold;
}

.entry_button {
  padding-bottom: 4%;
}

/* 背景
------------------------------------------------*/
.bg_light_blue {
  background-color: #d2f1ff;
}

.bg_deep_blue {
  background-color: #0068b7;
}

.bg_medium_blue {
  background-color: #66a4d4;
}

.bg_gradation_blue {
  background-image: linear-gradient(0deg, #ffffff 1%, #d2f1ff);
}

/* cp_main
------------------------------------------------*/
.cp_main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 30px;
}

.cp_chart {
  text-align: center;
  padding: 0 2rem 1rem;
}

.cp_main_note {
  color: #fff;
  padding: 0 2rem 3.75rem;
}

.note_number li {
  padding-left: 1.8em;
  text-indent: -1.8em;
  line-height: 1.8em;
  font-size: 1.125rem;
}

.note p {
  padding-left: 1.2em;
  text-indent: -1.2em;
  line-height: 1.8em;
  font-size: 1.125rem;
}

.cp_container {
  padding-top: 60px;
  padding-bottom: 60px;
}

.cp_wrapper {
  width: 700px;
  margin: 0 auto;
  padding: 40px 25px;
  background: #fff;
  border-radius: 20px;
  position: relative;
}

.cp_wrapper_btm {
  margin-bottom: 30px;
}

.cp_wrapper_text {
  padding: 0 15px;
}

.contents_title {
  text-align: center;
  font-size: 2.25rem;
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .cp_main {
    padding: 5% 0 3%;
  }

  .cp_wrapper {
    width: 88vw;
    padding: 7.6vw 5.33vw;
    border-radius: 4vw;
  }

  .contents_title {
    font-size: 6vw;
    margin-bottom: 5%;
  }

  .button_area_inner {
    padding: 10% 14% 16%;
    font-size: 4vw;
  }

  .cp_chart {
    text-align: center;
    padding: 0 1rem 0.625rem;
  }

  .note_number li,
  .note p {
    font-size: 3.5vw;
  }

  .cp_main_note {
    color: #fff;
    padding: 0 5% 6%;
  }

  .cp_container {
    padding: 6% 0;
  }

  .cp_wrapper_btm {
    margin-bottom: 5%;
  }

  .cp_wrapper_text {
    padding: 0 2%;
  }

}

/* cp_summary
------------------------------------------------*/
.cp_summary {
  font-size: 1.375rem;
}

.step {
  padding: 30px 0 10px;
}

.step_note {
  padding: 0px 15px 30px;
}

.inner_title {
  font-size: 1.625rem;
  text-align: center;
  padding-bottom: 10px;
}

.period {
  margin-bottom: 10px;
}

/* disclaimer
------------------------------------------------*/
.disclaimer {
  padding: 0 2rem;
}

.disclaimer p {
  padding-bottom: 10px;
}

.disclaimer ul {
  list-style-type: disc;
  padding-left: 25px;
  line-height: 1.8em;
}

@media screen and (max-width: 768px) {
  .cp_summary {
    font-size: 4vw;
  }

  .inner_title {
    font-size: 5vw;
    padding-bottom: 4%;
  }

  .step {
    padding: 5% 0 2%;
  }

  .step_note {
    padding: 0 2% 5%;
  }

  .disclaimer {
    padding: 0 5%;
  }

  .disclaimer p {
    padding-bottom: 2%;
  }

}

/* footer
------------------------------------------------*/
.cp_main footer {
  text-align: center;
  color: #fff;
}

.cp_main footer small {
  font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
  .cp_main footer small {
    font-size: 3vw;
  }
}

/* フェードイン
------------------------------------------------*/
.fadein {
  opacity: 0;
  transform: translateY(100px);
  transition: .67s;
}

/* ボタンアニメーション
------------------------------------------------*/
.anim-box.poyoyon2.is-animated {
  animation: poyoyon2 1s ease-in-out forwards;
}

@keyframes poyoyon2 {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }

  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }

  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }

  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }

  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }

  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }

  0%,
  100% {
    opacity: 1;
  }
}

.mb10 {
  margin-bottom: 10px;
}