@charset "utf-8";
/*----- campaign -----*/
.campaign {
  background: url(../img/campaign/bg.webp) no-repeat center top;
  background-size: 100% 100%;
  height: 80rem;
  padding-top: 20rem;
  z-index: 3;
}
/*----- prefectures -----*/
/* #prefectures {
  background: url(../img/prefectures/bg.webp) no-repeat center top;
  background-size: 100% 100%;
  height: 80rem;
  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;
} */
/*----- voice -----*/
#voice {
  padding: 5rem 2rem;
  border-radius: 1rem;
}
#voice > .inner {
  background-color: #ddf2ff;
  padding: 6rem 1rem 2rem;
  border-radius: 1rem;
}
#voice #voiceTtl {
  width: 68rem;
}

/*----- 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;
}
.present_img02 {
  width: 71rem;
}
/*----- guarantee -----*/
.guarantee {
  background: url(../img/guarantee/bg.webp) no-repeat center top;
  background-size: contain;
  height: 100rem;
  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 {
  background: url(../img/apply/bg.webp) no-repeat center top;
  background-size: 100% 100%;
  height: 129.5rem;
  padding-top: 40rem;
}
.apply .white {
  position: absolute;
}
.apply .last-two-months {
  top: 26rem;
  left: 12rem;
}
.apply .last-month {
  top: 35.5rem;
  left: 12rem;
}
.apply .current-month {
  top: 45.6rem;
  left: 11rem;
}
/*----- 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: 25rem;
  padding-bottom: 5rem;
}
#reason .reason_bg:nth-of-type(2)  {
  /* padding-right: 1.5rem; */
  /* padding-left: 1.5rem; */
  padding-bottom: 5rem;
}
#reason .reason_bg:nth-of-type(3)  {
  margin-bottom: 6rem;
  padding-bottom: 3rem;
}
.reason_bg > p {
  width: 65rem;
  margin-inline: auto;
}
#r01_img01 {
  /* width: 71rem; */
  /* padding-right: 1rem; */
}
#r01_img02 {
  /* width: 67rem; */
  /* margin-top: -10rem; */
  /* margin-bottom: -15rem; */
}
#r02_img01 {
  width: 63rem;
  /* margin-left: 1rem; */
}
#r02_img02 {
  width: 68rem;
  /* margin-top: -3.5rem; */
  /* margin-bottom: 4rem; */
}
#r02_img03 {
  /* width: 63.4rem; */
}
.r02_slider {
  width: 100%;
  margin: 0 auto;
}
.slick-initialized .slick-slide {
  width: 68rem;
}
.r02_box {
  background-color: #FFF;
  border-radius: 1rem;
  margin-inline: auto;
  padding: 20px;
  box-sizing: border-box;
}
.r02_voiceImg  {
  width: 65rem;
  /* margin-left: 1.5rem; */
  /* margin-top: -2rem; */
}
.r02_box p:nth-of-type(1) {
  font-weight: 700;
  padding-bottom: 1rem;
  border-bottom: 1px solid #0096ff;
}
.r02_box p:nth-of-type(2) {
  margin: 2rem 0;
  font-weight: 700;
  line-height: 1.4;
}
.r02_box p:nth-of-type(3) {
  /* margin-right: 3rem; */
}
#r03_img01 {
  width: 70rem;
}
#r03_img02 {
  width: 68rem;
}
/* カスタムprevボタン */
.slick-prev {
  position: absolute;
  top: 43%; /* スライダーの高さの半分に位置 */
  left: -1rem; /* スライダーの左からの位置 */
  transform: translateY(-50%);
  width: 5.3rem;
  height: 5.3rem;
  background: url('./../img/reason/prev.svg') no-repeat center center;
  background-size: contain; /* 画像をボタンに合わせて表示 */
  z-index: 10;
  border: none;
}
/* カスタムnextボタン */
.slick-next {
  position: absolute;
  top: 43%; /* スライダーの高さの半分に位置 */
  right: -1rem; /* スライダーの右からの位置 */
  transform: translateY(-50%);
  width: 5.3rem;
  height: 5.3rem;
  background: url('./../img/reason/next.svg') no-repeat center center;
  background-size: contain; /* 画像をボタンに合わせて表示 */
  z-index: 10;
  border: none;
}
/* デフォルトの矢印ボタンを非表示にする */
.slick-prev::before,
.slick-next::before {
  content: '';
}
.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 1rem;
  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: 38rem;
  top: 36.4rem;
  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: 2rem;
  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;
  }
}

.guarantee p {
  position: absolute;
  color: #886b28;
  top: 90rem;
  left: 15rem;
}

/* info */
.info{
  position: relative;
  background: url(../img/infoBg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  padding-top: 10.5rem;
  /* z-index: 3; */
  margin-top: -6rem;
}

.infoCircle{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0358b2;
  border-radius: 50%;
  width: 14.2rem;
  height: 14.2rem;
  position: absolute;
  top: -6rem;
  left: 50%;
  transform: translateX(-50%);
}

#infoTtl{
  position: relative;
  z-index: 2;
}
.infoTT{
  display: block;
  margin: 0 auto;
  width: 63rem;
  padding-bottom: 34rem;
}

.infoImg01,
.infoImg02{
  width: 100%;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
/* end info */

/* noLoan */
.noLoan{
  padding-bottom: 3rem;
  background-color: #ddf2ff;
}

.noLoanBox{
  position: relative;
  background: url(../img/noLoanBg.webp);
  background-repeat: no-repeat;
  background-size: 100% 106%;
  background-position: center;
  background-position-y: -3rem;
}

.noLoan p{
  color: #0358b2;
  margin-bottom: 4rem;
}

.noLoanTxt{
  position: relative;
  bottom: 3rem;
  display: block;
  margin: 0 auto;
  width: 70rem;
}
/* end noLoan */

/* cta */
.cta{
  padding-top: 1rem;
  padding-bottom: 2rem;
  background-color: #ddf2ff;
}

/* end cta */