@charset "UTF-8";
@media screen and (max-width: 1080px){
  .contents{
    width: 1080px !important;
  }
}
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
/*topview*/
.area_view {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  text-align: -webkit-center;
}
.area_view .container{
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
} 
.area_view .img {
  display: flex;
}
.area_view .img img{
  width: 100%;
}
/*present*/
.area_present .head,
.area_present .body{
  background: #56B2EB;
}
.area_present .head {
  text-align: center;
  padding: 48px 0 0;
}
.area_present .head .ttl{
  font: 600 26px / 1.6em "Noto Sans JP", sans-serif;
  color: #ffffff;
  letter-spacing: 0.16em;
  margin: 0;
  position: relative;
  z-index: 1;
}
.area_present .head .ttl::before{
  position: absolute;
  content: '';
  bottom: -8px;
  left: 24%;
  width: 26px;
  height: 30px;
  transform: translatey(-50%);
  background: url(../images/bo_1.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_present .head .ttl::after{
  position: absolute;
  content: '';
  bottom: -8px;
  right: 24%;
  width: 26px;
  height: 30px;
  transform: translatey(-50%);
  background: url(../images/bo_2.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_present .head .ttl strong{
  font: 600 26px / 1.6em "Noto Sans JP", sans-serif;
  color: #ffffff;
  letter-spacing: 0.1em;
  margin: 0;
  position: relative;
}
.area_present .head .ttl strong::before{
  position: absolute;
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFF126;
  top: -6px;
  left: 10px;
}
.area_present .body{
  padding: 12px 0 32px;
}
/*list_present*/
.list_present{
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  flex-flow: wrap;
}
.list_present >li{
  padding: 10px 8px;
  width: 20%;
  list-style-type: none;
  display: flex;
}
.list_present article{
  background: #fff;
  border-radius: 14px;
  padding: 9px 8px 6px 8px;
}
.list_present .img{
  text-align: center;
}
.list_present .img img{
  width: 75%;
}
.list_present .number{
  font: 600 10px / 1em "Noto Sans JP", sans-serif;
  color: #646464;
  letter-spacing: 0.1em;
  margin: 0;
  text-align: end;
}
.area_present .choose{
  text-align: center;
  margin: 24px 0 0;
  font: 600 16px / 1em "Noto Sans JP", sans-serif;
  color: #ffffff;
  letter-spacing: 0.2em;
}
/*present*/
.area_present .foot{
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}
/*list_navi*/
.list_navi{
  display: flex;
  justify-content: center;
  padding: 20px 0;
  margin: 0;
}
.list_navi >li{
  padding: 10px 18px;
  list-style-type: none;
  display: flex;
  position: relative;
}
.list_navi >li+li::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  height: 14px;
  width: 1px;
  background: #3399D9;
  transform: translateY(-50%);
}
.list_navi >li a{
  text-decoration: auto;
  text-align: center;
}
.list_navi >li .ttl{
  padding: 0 20px;
  margin: 0;
  color: #333B3C;
  font: 500 16px / 1.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}
.list_navi >li .ttl::after{
  position: absolute;
  content: '';
  bottom: -1px;
  right: -7px;
  width: 13px;
  height: 11px;
  transform: translatey(-50%);
  background: url(../images/triangle_blue.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.list_navi >li .ttl:hover{
  color: #56B2EB;
}
/*head*/
.area_overview {
  padding: 90px 0;
  position: relative;
  z-index: 1;
}
.area_introduction {
  padding: 0;
  position: relative;
}
.area_overview::before{
  position: absolute;
  content: '';
  top: 24%;
  left: 60px;
  width: 210px;
  height: 210px;
  transform: translatey(-50%);
  background: url(../images/firework_1.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_overview::after{
  position: absolute;
  content: '';
  bottom: 38px;
  right: 40px;
  width: 250px;
  height: 230px;
  transform: translatey(-50%);
  background: url(../images/firework_2.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: -1;
}
.area_overview .head,
.area_introduction .head,
.area_conditions .head,
.area_method .head,
.area_precautions .head{
  text-align: center;
}
.area_overview .head img,
.area_introduction .head img,
.area_conditions .head img,
.area_precautions .head img{
  width: 25%;
}
.area_method .head img{
  width: 30%;
}
.area_overview .body{
  text-align: center;
  margin: 24px 0 0;
}
.area_overview .body .description{
  margin: 0;
  color: #333B3C;
  font: 500 16px / 2.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.3em;
}
.area_overview .body .description strong{
  position: relative;
  font: 500 16px / 2.4em "Noto Sans JP", sans-serif;
  z-index: 1;
  color: #fff;
}
.area_overview .body .description strong::before{
  position: absolute;
  content: "";
  height: 36px;
  width: 100%;
  left: -7px;
  bottom: -4px;
  z-index: -1;
  border-bottom: 30px solid #3399D9;
}
.area_overview .foot{
  margin: 70px 0 0;
}
.area_overview .btnarea{
  display: flex;
  justify-content: center;
}
.area_overview .btnarea .btn{
  text-decoration: auto;
  flex: 1;
  color: #fff;
  background-image: linear-gradient(90deg, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%);
  letter-spacing: 0.12em;
  max-width: 400px;
  padding: 24px 16px 24px 10px;
  font: 400 20px / 1em "Noto Sans JP", sans-serif;
  position: relative;
  text-align: center;
  border-radius: 40px;
  box-shadow: 5px 5px 0px rgb(197 223 247);
}
.area_overview .btnarea .btn::after{
  position: absolute;
  content: '';
  top: 36px;
  right: 70px;
  width: 22px;
  height: 22px;
  transform: translatey(-50%);
  background: url(../images/triangle_white.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_overview .btnarea .btn:hover{
  background-image: linear-gradient(90deg, rgba(42, 179, 252, 1), rgba(58, 99, 255, 1) 90%);
}
/*area_introduction*/
.area_introduction .body{
  margin: 30px 80px 0;
  border: 4px solid #3399d9;
  background: #F7FCFF;
  padding: 70px 55px 180px;
  position: relative;
  z-index: 1;
}
.area_introduction .body::after{
  position: absolute;
  content: '';
  bottom: -75px;
  left: 35%;
  width: 240px;
  height: 150px;
  transform: translatey(-50%);
  background: url(../images/human_2.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 1;
}
/*Part_1,Part_2,Part_3*/
.Part_1 .item,
.Part_2 .item,
.Part_3 .item{
  text-align: center;
}
.Part_1 .item img,
.Part_2 .item img,
.Part_3 .item img{
  width: 80%;
}
/*list_amount*/
.list_amount {
  padding: 16px 80px 30px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.list_amount::before{
  position: absolute;
  content: '';
  bottom: -130px;
  left: 1px;
  width: 140px;
  height: 200px;
  transform: translatey(-50%);
  background: url(../images/human_1.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 1;
}
.list_amount >li {
  text-align: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.list_amount >li+li {
  margin: 36px 0 0;
}
.list_amount li.amount_1,
.list_amount li.amount_2,
.list_amount li.amount_3{
  position: relative;
}
.list_amount li.amount_1::before{
  background: url(../images/amount_1_text.png) no-repeat center center !important;
  background-size: contain !important;
}
.list_amount li.amount_2::before{
  background: url(../images/amount_2_text.png) no-repeat center center !important;
  background-size: contain !important;
}
.list_amount li.amount_3::before{
  background: url(../images/amount_3_text.png) no-repeat center center !important;
  background-size: contain !important;
}
.list_amount li.amount_1::before,
.list_amount li.amount_2::before,
.list_amount li.amount_3::before{
  position: absolute;
  content: '';
  top: 3px;
  left: 20px;
  width: 310px;
  height: 43px;
  transform: translatey(-50%);
  z-index: 0;
}
.list_amount article{
  background: #FFFFFF;
  border: 3px solid #3399D9;
  border-radius: 8px;
  padding: 20px 20px 20px 20px;
}
.list_amount .ttl{
  margin: 0;
  color: #333B3C;
  font: 500 18px / 1.2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
}
.list_amount .ttl strong{
  margin: 0;
  color: #3399D9;
  font: 500 44px / 1em "Work Sans", sans-serif;
  letter-spacing: 0em;
}
.list_amount .ttl span{
  margin: 0;
  color: #000000;
  font: 500 16px / 1.2em "Work Sans", sans-serif;
  letter-spacing: 0em;
}
.list_amount b{
  margin: 0 0 0 4px;
  color: #333B3C;
  font: 500 20px / 1.2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
}
.list_amount .description{
  margin: 3px 0 0;
  color: #000000;
  font: 600 20px / 1.2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
  /* position: relative;
  z-index: 1; */
}
.list_amount .description::after{
  /* position: absolute;
  content: '';
  top: 10px;
  right: 85px;
  width: 10px;
  height: 40px;
  transform: translatey(-50%);
  background: url(../images/surprised.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0; */
}
/*list_cache*/
.list_cache {
  display: flex;
  padding: 10px;
  margin: 0 -30px 0 28px;
  flex-flow: wrap;
}
.list_cache >li {
  padding: 10px 8px;
  width: 28%;
  list-style-type: none;
  display: flex;
}
.list_cache .img img{
  width: 100%;
}
.Part_3 .detail{
  margin: 24px 0 0;
  color: #333B3C;
  font: 500 15px / 2.2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
}
.Part_3 .detail strong{
  position: relative;
  font: 500 16px / 2.4em "Noto Sans JP", sans-serif;
  z-index: 1;
  color: #fff;
}
.Part_3 .detail strong::before{
  position: absolute;
  content: "";
  height: 36px;
  width: 100%;
  left: -7px;
  bottom: -4px;
  z-index: -1;
  border-bottom: 30px solid #000000;
}
.area_introduction .foot,
.area_precautions .foot{
  border: 2px solid #FF0000;
  margin: 60px 130px;
  padding: 24px 60px 36px;
}
.area_introduction .foot .matter,
.area_precautions .foot .matter{
  margin: 0;
  text-align: center;
  color: #FF0000;
  font: 500 20px / 2.2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
  position: relative;
}
.area_introduction .foot .matter::before,
.area_precautions .foot .matter::before{
  position: absolute;
  content: '';
  top: 22px;
  left: 36%;
  width: 22px;
  height: 22px;
  transform: translatey(-50%);
  background: url(../images/note.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_introduction .foot .matter::after,
.area_precautions .foot .matter::after{
  position: absolute;
  content: '';
  top: 22px;
  right: 36%;
  width: 22px;
  height: 22px;
  transform: translatey(-50%);
  background: url(../images/note.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_introduction .foot .description,
.area_precautions .foot .description{
  margin: 0;
  text-align: center;
  color: #FF0000;
  font: 500 13px / 2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
}
.area_introduction .btnarea,
.area_precautions .btnarea{
  display: flex;
  justify-content: center;
}
.area_introduction .btnarea .btn,
.area_precautions .btnarea .btn {
  text-decoration: auto;
  flex: 1;
  color: #fff;
  background-image: linear-gradient(90deg, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%);
  letter-spacing: 0.12em;
  max-width: 400px;
  padding: 24px 16px 24px 10px;
  font: 400 20px / 1em "Noto Sans JP", sans-serif;
  position: relative;
  text-align: center;
  border-radius: 40px;
  box-shadow: 5px 5px 0px rgb(197 223 247);
}
.area_introduction .btnarea .btn::after,
.area_precautions .btnarea .btn::after {
  position: absolute;
  content: '';
  top: 36px;
  right: 70px;
  width: 22px;
  height: 22px;
  transform: translatey(-50%);
  background: url(../images/triangle_white.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_introduction .btnarea .btn:hover,
.area_precautions .btnarea .btn:hover{
  background-image: linear-gradient(90deg, rgba(42, 179, 252, 1), rgba(58, 99, 255, 1) 90%);
}
/*conditions*/
.area_conditions{
  padding: 100px 0 0;
}
.area_conditions .body{
  border: 2px solid #25A7E1;
  margin: 60px 100px;
  border-radius: 20px;
  padding: 40px 70px 80px;
  position: relative;
}
.area_conditions .body::after{
  position: absolute;
  content: '';
  bottom: -150px;
  left: -10%;
  width: 303px;
  height: 175px;
  transform: translatey(-50%);
  background: url(../images/human_3.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 1;
}
.area_conditions .apply{
  text-decoration: underline;
  background: #25A7E1;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 10px 10px;
  font: 500 16px / 2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
  /* position: absolute;
  content: '';
  top: -28px;
  right: 21%; */
  border-radius: 30px;
}
/*list_conditions*/
.list_conditions {
  padding: 0;
  margin: 24px 0 0;
}
.list_conditions >li {
  padding: 0;
  margin: 0 0 0 40px;
  list-style-type: none;
}
.list_conditions >li+li {
  margin: 24px 0 0 40px;
}
.list_conditions .item{
  margin: 0;
  color: #000;
  font: 600 18px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.12em;
  position: relative;
}
.list_conditions .item::before{
  position: absolute;
  content: '';
  top: 16px;
  left: -42px;
  width: 28px;
  height: 28px;
  transform: translatey(-50%);
  background: url(../images/check.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.list_conditions .cnt{
  margin: 6px 0 0;
  color: #2F3838;
  font: 500 12px / 1.2em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.list_conditions .note{
  margin: 10px 0 0;
  color: #000;
  font: 500 12px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_conditions .foot{
  margin: 120px 0 0;
}
.area_conditions .foot .img{
  text-align: center;
}
.area_conditions .foot .img img{
  width: 80%;
}
/*area_method*/
.area_method{
  padding: 80px 0 0;
}
.area_method .comment{
  margin: 20px 0 0;
  color: #25A7E1;
  font: 500 24px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_method .comment strong{
  position: relative;
}
.area_method .comment strong::before{
  position: absolute;
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3399D9;
  top: -7px;
  left: 9px;
}
.area_method .body{
  margin: 30px 0 0;
  padding: 40px 70px 70px;
  background: #F3F9FF;
}
/*list_step*/
.list_step {
  padding: 0;
  margin: 24px 0 0;
}
.list_step >li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.list_step >li+li {
  margin: 24px 0 0;
}
.list_step .img{
  text-align: center;
}
.list_step .img img{
  width: 85%;
}
.area_method .btnarea {
  display: flex;
  justify-content: center;
  margin: 70px 0 0;
}
.area_method .btnarea .btn {
  text-decoration: auto;
  flex: 1;
  color: #fff;
  background-image: linear-gradient(90deg, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%);
  letter-spacing: 0.12em;
  max-width: 400px;
  padding: 24px 16px 24px 10px;
  font: 400 20px / 1em "Noto Sans JP", sans-serif;
  position: relative;
  text-align: center;
  border-radius: 40px;
  box-shadow: 5px 5px 0px rgb(197 223 247);
}
.area_method .btnarea .btn::after {
  position: absolute;
  content: '';
  top: 36px;
  right: 70px;
  width: 22px;
  height: 22px;
  transform: translatey(-50%);
  background: url(../images/triangle_white.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_method .btnarea .btn:hover{
  background-image: linear-gradient(90deg, rgba(42, 179, 252, 1), rgba(58, 99, 255, 1) 90%);
}
/*precautions*/
.area_precautions {
  padding: 100px 0 0;
}
.area_precautions .body{
  margin: 40px 150px;
}
.area_precautions .ttl{
  margin: 20px 0 0;
  color: #25A7E1;
  font: 500 16px / 1.5em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_precautions .description{
  margin: 12px 0 0;
  color: #333333;
  font: 500 12px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_precautions .description strong{
  margin: 20px 0 0;
  color: #FF0000;
  font: 500 12px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_precautions .explanation{
  margin: 20px 0 0;
  color: #646464;
  font: 500 12px / 1.8em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_precautions .foot{
  border: 2px solid #FF0000;
  margin: 60px 130px;
  padding: 24px 60px 36px;
}
/*question*/
.area_question{
  margin: 80px 0 120px;
}
.area_question .description{
  text-align: center;
  margin: 0;
  color: #227DCC;
  font: 500 24px / 1.4em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_question .img{
  text-align: center;
  margin: 20px 0 0;
  color: #227DCC;
  font: 500 24px / 1.6em "Noto Sans JP", sans-serif;
  letter-spacing: 0.18em;
}
.area_question .img img{
  width: 55%;
}