@charset "utf-8";





/*----- prefectures -----*/


#prefectures {


  background: url(../img/prefectures/bg.webp) no-repeat center top;


  background-size: cover;


  height: 124.6rem;


  padding-top: 34rem;


  z-index: 3;


}


#prefectures img:first-of-type {


  width: 71rem;


}


#prefectures img:last-of-type {


  width: 73rem;


}





/*----- easy -----*/


#easy {


  background: url(../img/easy/bg.webp) no-repeat center top;


  background-size: cover;


  height: 126rem;


  padding-top: 63.8rem;


  margin-top: -11.5rem;


  z-index: 1;


}





/*----- mens -----*/


#mens {


  background: url(../img/mens/bg.webp) no-repeat center top;


  background-size: cover;


  height: 174.3rem;


  z-index: 3;


  margin-top: -2rem;


}


#mens_img {


  position: absolute;


  top: 90rem;


  width: 68rem;


  left: 4rem;


}





/*----- thanks -----*/


#thanks {


  background: url(../img/thanks/bg.webp) no-repeat center top;


  background-size: cover;


  height: 179.6rem;


  margin-top: -13.1rem;


  z-index: 2;


}


#thanks_img01 {


  position: absolute;


  top: 13rem;


  width: 70rem;


  left: 3rem;


}


#thanks_img02 {


  position: absolute;


  top: 87rem;


}








/*----- present -----*/


#present {


  background: url(../img/present/bg.webp) no-repeat center top;


  background-size: cover;


  height: 126.2rem;


  margin-top: -13.1rem;


  padding-top: 14rem;


  z-index: 1;


}


#present_img01 {


  width: 74rem;


}


#present_img01 {


  width: 71rem;


}





/*----- guarantee -----*/


#guarantee {


  background: url(../img/guarantee/bg.webp) no-repeat center top;


  background-size: contain;


  height: 97.5rem;


  margin-top: -5rem;


  padding-top: 31rem;


  z-index: 2;


}


#guarantee_img {


  width: 63.1rem;


}


#guarantee p {


  position: absolute;


  color: #886b28;


  top: 90rem;


  left: 24rem;


}





/*----- apply -----*/


#apply {


  height: 127.4rem;


}


#apply .box {


  margin-top: -23rem;


}





/*----- reason -----*/


#reason {


  padding-left: 2rem;


  padding-right: 2rem;


}


#reason_logo {


  width: 28rem;


  margin-inline: auto;


}


#reason h2 {


  width: 62.1rem;


  margin-inline: auto;


  margin-bottom: 18rem;


}


#reason_ttl {


  width: 58.5rem;


}


.reason_num {


  width: 17rem;


  margin-top: -17rem;


}


#reason .reason_bg {


  background-color: #DDF2FF;


  background-size: contain;


  border-radius: 1rem;


  margin-top: -9rem;


  padding-top: 9rem;


}


#reason .reason_bg:nth-of-type(1)  {


  margin-bottom: 23rem;


  padding-bottom: 18rem;


}


#reason .reason_bg:nth-of-type(2)  {


  margin-bottom: 23rem;


  padding-bottom: 3rem;


}


#reason .reason_bg:nth-of-type(3)  {


  margin-bottom: 6rem;


  padding-bottom: 3rem;


}








#r01_img01 {


  width: 71rem;


  margin-left: 1rem;


}


#r01_img02 {


  width: 67rem;


  margin-top: -10rem;


  margin-bottom: -15rem;


}


#r02_img01 {


  width: 70rem;


  margin-left: 1rem;


}


#r02_img02 {


  width: 68rem;


  margin-top: -3.5rem;


  margin-bottom: 4rem;


}


#r02_img03 {


  width: 63.4rem;


}


.r02_box {


  background-color: #FFF;


  border-radius: 1rem;


  width: 68rem;


  margin-inline: auto;


}


.r02_voiceImg  {


  width: 67.1rem;


  margin-left: 1.5rem;


  margin-top: -2rem;


}


.r02_box p:nth-of-type(1) {


  font-weight: 700;


  padding-bottom: 1rem;


  margin: -5rem 2rem 1rem 2rem;


  border-bottom: 1px solid #0096ff;


}


.r02_box p:nth-of-type(2) {


  margin: 2rem 2rem 1rem 2rem;


  font-weight: 700;


  line-height: 1.4;


}


.r02_box p:nth-of-type(3) {


  margin-right: 3rem;


}








.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;


}





#price ul {


  justify-content: center;


}


#price {


  margin: 0 3rem;


  background-color: #21A5E0;


  color: #fff;


}


.price {


  width: 30rem;


}


.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;


}


#price .plan {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  grid-template-rows: repeat(2, 1fr);


  grid-column-gap: 1rem;


  grid-row-gap: 1rem;


  }





#price .plan .plan01 { grid-area: 1 / 1 / 2 / 2; }


#price .plan .plan02 { grid-area: 1 / 2 / 2 / 3; }


#price .plan .plan03 { grid-area: 2 / 1 / 3 / 2; }


#price .plan .plan04 { grid-area: 2 / 2 / 3 / 3; }











/*----- first -----*/


#first {


  background: url(../img/first/bg.webp) no-repeat center top;


  background-size: contain;


  height: 126.3rem;


  font-weight: 700;


}


#first_ttl {


  width: 57.5rem;


}


#first p {


  width: 67rem;


  position: absolute;


  left: 5rem;


}


#first p:nth-of-type(1) {


  top: 57rem;


}


#first p:nth-of-type(2) {


  top: 101rem;


}





/*----- flow -----*/


#flow {


  background: #edf9ff;


  background-size: contain;


  height: 372rem;


  font-weight: 600;


}


#flow_ttl {


  width: 59.4rem;


}


#flow h3 {


  color: #0358B2;


  font-size: 4.2rem;


}


#flow p {


  font-size: 2.4rem;


}


.flow_inner {


  position: absolute;


  width: 66rem;


  left: 5rem;


}


.flow_inner:nth-of-type(1) {


  top: 58.5rem;


}


.flow_inner:nth-of-type(2) {


  top: 125rem;


}


.flow_inner:nth-of-type(3) {


  top: 197.5rem;


}


.flow_inner:nth-of-type(4) {


  top: 274rem;


}


.flow_inner:nth-of-type(5) {


  top: 346.7rem;


}





/*----- twenty -----*/


#twenty {


  background: url(../img/twenty/bg.webp) no-repeat center top;


  background-size: cover;


  padding: 4rem 2rem;


  height: 101rem;


}


#twenty_logo, #twentyImg, #twenty p {


  position: absolute;


}


#twenty_logo {


  width: 41rem;


  top: 70rem;


  left: 30rem;


}


#twentyImg {


  width: 33rem;


  top: 41.6rem;


  left: -2rem;


}


#twenty p {


  color: #352100;


  text-shadow: 4px 3px 8px rgba(218, 218, 218, 0.41);


  text-align: left;


  font-weight: bold;


  font-family: 'YuMincho', 'Noto Serif JP';


  line-height: 1.7;


  top: 51rem;


  right: -1rem;


  font-size: 3.4rem;


}





/*----- 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;


}


.dateNote{


  font-size: 14px;


  font-weight: 700;


  color: #ff0000;


  margin-bottom: 1rem;


}





/*----- 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;


}


.dateNote{


  font-size: 14px;


  font-weight: 700;


  color: #ff0000;


  margin-bottom: 1rem;


}





@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;


  }


  


}