@charset "utf-8";

/*----- present -----*/
.present {
  background: #21a5e0 url(../img/present/bg.png) no-repeat center top;
  background-size: cover;
}
.present::after {
  content:"";
  display: block;
  width: 75rem;
  height: 0.2rem;
  background: linear-gradient(to right, #965a1e 0%,#b49629 18%,#faf290 50%,#b49628 82%,#965a1e 100%);
}
.present_arw {
  width: 22rem;
  height: 6.8rem;
  position: absolute;
  top: -2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  background:url(../img/present/arw.svg) no-repeat;
  background-size: cover;
}
/* .present_arw {
  width: 22rem;
  height: 6.8rem;
  position: absolute;
  top: -2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  background:url(../img/present/arw.svg) no-repeat;
  background-size: cover;
  animation: present_arw 1s steps(3) infinite;
}
@keyframes present_arw {
  to{
      background-position: -660px 0;
  }
} */
.present_ttl01 {
  width: 53.4rem;
}
.present_ttl02 {
  width: 50rem;
}
.present_img01 {
  width: 71rem;
}
.present_img01b {
  width: 27.3rem;
  position: absolute;
  bottom: 3.1rem;
  left: 0.2rem;
}
.present_plus {
  width: 5rem;
}
.present_img02 {
  width: 71rem;
}
.present_img02b {
  width: 22rem;
  position: absolute;
  bottom: 3.7rem;
  right: 3.6rem;
}
.present_img02c {
  width: 23rem;
  position: absolute;
  top: -2.5rem;
  right: 2.4rem;
}

/*----- ba -----*/
#ba {
  background: #edf9ff url(../img/ba/ttl_bg.webp) no-repeat center top;
  background-size: contain;
}
#ba_ttl {
  width: 68.2rem;
}
#ba02 {
  background: url(../img/ba/bg.webp) no-repeat center bottom;
  background-size: contain;
}

/*----- voice01 -----*/
#voice01 {
  background: url(../img/voice01/bg.webp) no-repeat center -5.5rem;
  background-size: cover;
}
.voice_box h3 {
  padding: 0 0 1rem 0;
  margin: 0 0 1rem 0;
  border-bottom: 1px solid #0096ff;
}
.voice_bln {
  position: absolute;
  top: 20rem;
  right: -3rem;
  width: 16.2rem;
}

/*----- issue -----*/
#suddenly {
  background: url(../img/suddenly/bg.webp) no-repeat center top;
  background-size: cover;
  height: 32.2rem;
}
#suddenly_ttl {
  width: 45.4rem;
}
/*----- issue -----*/
#issue {
  background: #EEE;
}
#issue_img01 {
  width: 41.7rem;
  position: absolute;
  right: 0;
  bottom: 0;
}
#issue_img02 {
  width: 39.5rem;
}
#issue_img03 {
  width: 7rem;
  position: absolute;
}
#issue_arw {
  width: 8rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2rem;
  margin: 0 auto;
  animation: arw 0.7s ease-in infinite alternate;
}
@keyframes arw{
  0% {bottom:-1rem;}
  100% {bottom:-3rem;}
}

#issue02 {
  background: #edf9ff url(../img/issue/ttl_bg.webp) no-repeat center top;
  background-size: contain;
}
#issue_img04 {
  width: 38.7rem;
  position: absolute;
  left: 0;
  top: 13.2rem;
}
#issue_img05 {
  width: 39.5rem;
  margin-bottom: 1rem;
}
#issue_img07 {
  width: 30rem;
  position: absolute;
  right: 0;
  top: 0.9rem;
}
#issue_pointer {
  width: 5rem;
  position: absolute;
  left: 38.5rem;
  bottom: -1.5rem;
}


/*----- fan -----*/
#fan {
  background: url(../img/fan/bg.webp) no-repeat center top;
  background-size: cover;
}
#fan::before {
    content:"";
    display: block;
    width: 75rem;
    height: 0.2rem;
    background: linear-gradient(to right, #965a1e 0%,#b49629 18%,#faf290 50%,#b49628 82%,#965a1e 100%);
  }
#fan_num {
  margin: 0 1rem 0 0;
  position: relative;
  top: 0.5rem;
}
.fan_area {
  margin: 0 1rem;
}
#fan_ttl {
  width: 62rem;
}
#fan_bln {
  width: 38.8rem;
}
.fan_img {
  width: 26rem;
}

/*----- movie -----*/
#movie_img {
  width: 21.8rem;
}
#movie {
  background: #edf9ff url(../img/movie/ttl_bg.webp) no-repeat center top;
  background-size: contain;
}

/*----- achievement -----*/
#achievement {
  background: url(../img/achievement/bg.webp) no-repeat center top;
  background-size: cover;
}
#achievement .m_box {
  height: 70.7rem;
  padding-top: 16rem;
}
#achievement_shop {
  width: 11.2rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6rem;
  margin: 0 auto;
}

/*----- award -----*/
.award {
  background: url(../img/award/bg.webp) no-repeat center bottom;
  background-size: cover;
}
.award_ttl {
  width: 55.5rem;
}
.award_img {
  width: 69.2rem;
}
.award_confetti {
  width: 74.3rem;
  position: absolute;
  left: 0;
  bottom: -3rem;
}
.award_txt {
  width: 22.6rem;
}

/*----- trouble -----*/
#trouble {
  background: url(../img/trouble/bg.webp) no-repeat center top;
  background-size: cover;
}
.trouble_box {
  height: 32.4rem;
  padding: 8rem 0 0 0;
}
.trouble_box:nth-child(2) {
  background: url(../img/trouble/im01.webp) no-repeat 28.6rem top;
  background-size: 40.9rem 32.4rem;
}
.trouble_box:nth-child(3) {
  background: url(../img/trouble/img02.webp) no-repeat 5rem top;
  background-size: 40.9rem 32.4rem;
}
.trouble_box ul {
  width: 37.8rem;
}
.trouble_box li {
  background: rgb(0 0 0 / 85%);
  padding: 1.5rem 0;
  width: 34.6rem;
  display: inline-block;
  position: relative;
}
.trouble_box li:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  border-right: 2px solid rgb(0 0 0 / 85%);
  border-bottom: 2px solid rgb(0 0 0 / 85%);
}
.trouble_box:nth-child(2) li:nth-child(1) {
  margin: 0 0 1.5rem 2rem;
}
.trouble_box:nth-child(3) li:nth-child(1) {
  margin: 0 0 1.5rem 3rem;
}

/*----- solution -----*/
#solution {
  background: url(../img/solution/bg.webp) no-repeat center top;
  background-size: cover;
}
#solution .box {
  height: 80.4rem;
}
#solution_bln {
  width: 41.2rem;
  position: relative;
  top: -3rem;
  margin-bottom: -1.5rem;
}
#solution_logo {
  width: 32.4rem;
}
#solution_ttl {
  width: 52rem;
}
.solution_img {
  position: absolute;
}
#solution_img01 {
  width: 28.7rem;
  left: 2rem;
  top: 40rem;
}
#solution_img02 {
  width: 28.7rem;
  left: 3rem;
  top: 62rem;
}
#solution_img03 {
  width: 30.6rem;
  right: 2rem;
  top: 52.7rem;
}


/*----- reason -----*/
#reason {
  background: #edf9ff url(../img/reason/ttl_bg.webp) no-repeat center top;
  background-size: contain;
  padding: 5.5rem 0 0 0;
}
#reason_ttl {
  width: 58.5rem;
}
.reason_box {
  background: #FFF;
  border-left: 0.3rem solid #1074cc;
  border-right: 0.3rem solid #052e78;
}
.reason_box::after {
  content:"";
  display: block;
  width: 100%;
  height: 0.3rem;
  background: #1074cc;
  background: linear-gradient(to right, #1074cc 0%,#052e78 100%);

}
.reason_box h3 {
  background: #1074cc;
  background: linear-gradient(to right, #1074cc 0%,#052e78 100%);
  padding: 2.5rem 3rem;
}
.reason_num {
  width: 11.8rem;
  margin-right: 2rem;
}
#reason01_machine {
  position: absolute;
  right: 2rem;
  top: 32rem;
  width: 28.6rem;
}
.reason_c_img {
  width: 21rem;
  margin-right: 1.5rem;
}
.r01_img05 {
  width: 41.6rem;
}
#r01_img08 {
  width: 22.6rem;
}
#r02_img05 {
  width: 21.8rem;
}
#r02_img06 {
  width: 39rem;
  position: absolute;
  top: 16.4rem;
  left: 6rem;
}
#r02_img07 {
  width: 61.6rem;
}
#r02_img08 {
  width: 14.6rem;
  position: absolute;
  top: 4.7rem;
  right: 4.8rem;
}
#r02_img09 {
  width: 21rem;
  position: absolute;
  right: 3rem;
  bottom: 4rem;
}
#r03_img03 {
  width: 12.4rem;
  position: absolute;
  top: 20.8rem;
  right: 17rem;
}
#r03_img04 {
  width: 11.8rem;
  position: absolute;
  left: 26.3rem;
  bottom: -2rem;
  z-index: 1;
}
#r04_img03 {
  width: 51.6rem;
}
#r04_img04 {
  width: 63.1rem;
}
#reason04_bg {
  background: url(../img/reason/r04_img02.webp) no-repeat center top;
  background-size: contain;
  padding: 3.5rem 0 0 0;
  height: 53.7rem;
}
.no1::after {
  content: "※2";
  position: absolute;
  font-size: 1.8rem;
  top: 55.5rem;
}


/*----- first -----*/
#first {
  background: url(../img/first/bg.webp) no-repeat center top;
  background-size: cover;
  padding: 8.5rem 0 0 0;
  height: 48rem;
}
#first .r_txt {
  width: 43.8rem;
}
#first_img01 {
  width: 19rem;
}
#first_img02 {
  width: 38rem;
}
#first_img03 {
  width: 43.8rem;
}

/*----- free -----*/
.jcc li.price:first-child {
  margin-right: 1rem;
}
.price {
  width: 32rem;
}
.free_txt {
  width: 40.3rem;
}
#price_ttl {
  background: #005ad2;
  padding: 1.5rem 3rem;
  cursor: pointer;
  position: relative;
}
/*アイコンの＋と×*/
#price_ttl::after {
  content:'';
  position: absolute;
  width: 3.4rem;
  height: 3.4rem;
  top: calc(50% - 1.7rem);
  right: 3rem;
  background: url(../img/price/icon01.svg) no-repeat center top, url(../img/price/icon02.svg) no-repeat center top;
  background-size: contain;
  transition: 0.3s;
}
/*　closeというクラスがついたら形状変化　*/
#price_ttl.active::after {
  background: url(../img/price/icon02.svg) no-repeat center top;
  background-size: contain;
}

/*----- compare -----*/
#compare_ttl {
  width: 50rem;
}

/*----- free -----*/
#free_img01 {
  width: 21.8rem;
}
#free_img02 {
  width: 37rem;
}
#free_box {
  background: #edf9ff;
  width: 64rem;
  margin: 0 auto;
  border-radius: 3rem;
}
.free_box {
  width: 71rem;
  height: 32.4rem;
  margin: 0 0 1.5rem -6rem;
  padding: 2rem 0 0 0;
}
.free_box:nth-child(2) {
  background: url(../img/free/img03.webp) no-repeat right top;
  background-size: 40.9rem 32.4rem;
}
.free_box:nth-child(3) {
  background: url(../img/free/img04.webp) no-repeat right top;
  background-size: 40.9rem 32.4rem;
}
.free_box:nth-child(4) {
  background: url(../img/free/img05.webp) no-repeat right top;
  background-size: 40.9rem 32.4rem;
  margin: 0 0 3rem -6rem;
}
.free_txt {
  margin-bottom: 0.3rem;
}
.gold_box {
  width: 71rem;
  border: 0.2rem solid #b4963c;
  background: #FFF;
  margin-left: -6rem;
}
#repayment_box {
  width: 39.5rem;
}
#repayment_notes {
  margin: 0 0 0 -6rem;
}
#free_img06 {
  width: 22.7rem;
}

/*----- warranty -----*/
#warranty {
  background: url(../img/warranty/bg.webp) no-repeat center top;
  background-size: cover;
}
#warranty_img01 {
  width: 21.6rem;
}
#warranty_txt {
  width: 37.4rem;
}

/*----- voice02 -----*/
#voice02_bln {
  width: 40.3rem;
  margin: -4.5rem auto 2rem auto;
}
#voice02_ttl {
  width: 69rem;
}
.voice02_img {
  width: 23rem;
}

/*----- counseling -----*/
#counseling {
  background: url(../img/counseling/bg.webp) no-repeat center top;
  background-size: cover;
  height: 32.5rem;
  padding: 8rem 0 0 23rem;
}
/*----- flow -----*/
#flow {
  background: #edf9ff url(../img/flow/ttl_bg.webp) no-repeat center top;
  background-size: contain;
}
.flow_box {
  background: #FFF;
  border-radius: 1.5rem;
  box-shadow: 0 0 0.6rem #082d5999;
  padding: 4rem 3rem;
}
.flow_box::after {
  content:"";
  display: block;
  width: 30rem;
  height: 6rem;
  position: absolute;
  bottom: -6rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url(../img/flow/arw.webp) no-repeat right top;
  background-size: 30rem;
  mix-blend-mode: multiply;
}
.flow_box:last-child::after {
  content:none;
}
.flow_num {
  width: 13rem;
  margin-top: -10.8rem;
  position: relative;
}
.flow_img {
  margin-top: -3rem;
}

/*----- promise -----*/
#promise {
  background: #edf9ff url(../img/promise/ttl_bg.webp) no-repeat center top;
  background-size: contain;
}
.promise_box {
  padding: 9rem 0 0 0;
  height: 40rem;
}
.promise_box p {
  padding: 0 3rem 0 26rem;
}
.promise_box:nth-child(2) {
  background: url(../img/promise/img01.webp) no-repeat center top;
  background-size: cover;
}
.promise_box:nth-child(3) {
  background: url(../img/promise/img02.webp) no-repeat center top;
  background-size: cover;
}
.promise_box:nth-child(4) {
  background: url(../img/promise/img03.webp) no-repeat center top;
  background-size: cover;
}

/*----- clean -----*/
#clean {
  background: #edf9ff url(../img/clean/ttl_bg.webp) no-repeat center top;
  background-size: contain;
}

/*----- shop -----*/

/*----- shop -----*/
.shop_box, .shop_area, .shop_info {
  display: none;
}
#shop_list .collapse {
  position: relative;
  cursor: pointer;
}

#shop_list .collapse::before, #shop_list .collapse::after {
  content: "";
  display: block;
  background: #FFF;
  border-radius: 0.2rem;
  position: absolute;
}
#shop_list .collapse::before {
  width: 0.4rem;
  height: 2.4rem;
  top: calc(50% - 1.2rem);
  right: 4rem;
}
#shop_list .collapse::after {
  width: 2.4rem;
  height: 0.4rem;
  top: calc(50% - 0.2rem);
  right: 3rem;
}
#shop_list .collapse.active::before {
  display: none;
}

#shop_list li:first-child .shop_ttl01 {
  border-radius: 0.9rem 0.9rem 0 0;
}
#shop_list li:last-child .shop_ttl01 {
  border-radius: 0 0 0.9rem 0.9rem;
}
#shop_list li:last-child .shop_ttl01.active {
  border-radius: 0;
}
.shop_ttl01 {
  background: #005ad2;
  color: #FFF;
  padding: 1.5rem 3rem;
  margin: 0 0 0.2rem 0;
  font-weight: 400;
}
.shop_area {
  background: #FFF;
  padding: 3rem;
  margin: 0 0 0.2rem 0;
}
.shop_ttl02 {
  background: #21a5e0;
  color: #FFF;
  padding: 1.5rem 3rem;
  margin: 0 0 0.2rem 0;
  font-weight: 400;
}
.shop_ttl03 {
  background: #21a5e0;
  color: #FFF;
  padding: 1.5rem 3rem;
  margin: 0 0 0.2rem 0;
  font-weight: 400;
}
.shop_info {
  padding: 1.5rem 0 3rem 0;
}
.shopMapDes {
margin: 0 0 1.5rem 0;
}

/*----- faq -----*/

/*アコーディオンタイトル*/
.faq_ttl {
  cursor: pointer;
  padding: 2rem 7rem 2rem 7rem;
  position: relative;
  background: #21a5e0;
}
.faq_ttl::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  background: url(../img/faq/q.webp) no-repeat center top;
  background-size: 3rem;
  position: absolute;
  top: 3rem;
  left: 3rem;
}
/*アコーディオンで現れるエリア*/
.faq_info {
  display: none;/*はじめは非表示*/
  background: #FFF;
  padding: 3rem 3rem 3rem 7rem;
  position: relative;
}
.faq_info::before {
  content: "";
  display: block;
  width: 2.8rem;
  height: 2.3rem;
  background: url(../img/faq/a.webp) no-repeat center top;
  background-size: 2.8rem;
  position: absolute;
  top: 3rem;
  left: 3rem;
}

/*アイコンの＋と×*/
.faq_ttl::after {
    position: absolute;
    content:'';
    width: 2.9rem;
    height: 2.9rem;
    top: calc(50% - 1.5rem);
    right: 2rem;
    background: url(../img/faq/icon02.webp) no-repeat center top, url(../img/faq/icon01.webp) no-repeat center top;
    background-size: contain;
    transition: 0.3s;
}
/*　closeというクラスがついたら形状変化　*/
.faq_ttl.close::after {
  background: url(../img/faq/icon01.webp) no-repeat center top;
  background-size: contain;
}


.notes {
  border: 1px solid #21a5e0;
}
/*----- footer -----*/
footer a {
  display: inline-block;
  margin: 0 1rem 2rem;
}

@media screen and (min-width:600px) {

}

@media screen and (max-width:599px) {
  .trouble_box li:after {
    border-right: 1px solid rgb(0 0 0 / 85%);
    border-bottom: 1px solid rgb(0 0 0 / 85%);
  }
  #warranty_img02 {
    margin-top: 1rem;
  }
  
}

.start01 {
  position: relative;
  display: inline-block;
}

.start01:after {
  content: '※';
  position: absolute;
  font-size: 1.4rem;
  color: #666;
  top: -1rem;
  left: 50%;
  transform: translate(-50%, 0);
}