@charset "UTF-8";

/*webketとは
---------------------------*/
.about__intro{
  align-items: center;
  grid-template-columns: 50% 1fr;
  gap: 1.5rem 1%;
  padding-inline: 1rem;
  margin-bottom: 5rem;
  p{
    line-height: 1.8;
    margin-bottom: 1em;
  }
}
.about__intro-image{
  justify-items: center;
  img{
    width: min(80%, 360px);
  }
}
/*-- 取扱い施設 --*/
.facilities-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 3.2vw / 1.2, 2rem)
}
.facilities-list__item{
  position: relative;
  img{
    aspect-ratio: 3/2;
    object-fit: cover;
  }
  figcaption{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-5D7DBF-75);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    text-align: center;
    padding-block: 0.5em;
  }
}
/*-- ご利用手順 --*/
.about__flow-wrapper{
  width: min(100vw - 6vw, 900px);
  margin-inline: auto;
}
.about__subtitle, .about__flow-description{
  margin-bottom: 1em;
}
.flow-list{
  gap: 2rem 4%;
  margin-bottom: 5rem;
}
.flow-list__item{
  align-items: center;
  grid-template-columns:auto 1fr clamp(70px, 16vw / 0.9, 160px);
  gap: 3%;
  border: 5px solid var(--color-B3B3B3);
  border-radius: 1rem;
  padding: clamp(1rem, 2.4vw / 1.2, 1.5rem) clamp(0.2rem, 2.4vw / 1.2, 1.5rem);
}
.flow-list__step-number{
  place-content: center;
  width: 1.8em;
  aspect-ratio: 1;
  background: var(--color-666666);
  border-radius: 50%;
  color: var(--color-white);
  font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 7.8px) * (14 / 4.2))), var(--font30));
}
.flow-list__title{
  color: var(--color-F48283);
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 7.8px) * (6 / 4.2))), var(--font24));
  margin-bottom: 0.8em;
}

/*-- リンク案内 --*/
.link-list{
  justify-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 5%;
  max-width: 1100px;
  margin-inline: auto;
}
.link-list__btn{
  color: var(--color-white);
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 7.8px) * (3 / 4.2))), var(--font21));
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  padding-right: 1.2em;
  .link-list__usage &{
    background: var(--color-F48283);
    border: 2px solid var(--color-F48283);
    margin-bottom: 3em;
    &:hover{
      background: var(--color-white);
      color: var(--color-F48283);
      &::before{
        background: var(--color-F48283);
      }
    }
  }
}
.link-list__usage{
  grid-column: span 2;
}
.link-list__btn-wrap{
  position: relative;
  aspect-ratio: 1.9;
  margin-bottom: 1.3rem;
  .link-list__btn{
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-5D7DBF);
    border: 2px solid var(--color-5D7DBF);
    z-index: 1;
    &:hover{
      background: var(--color-white);
      color: var(--color-5D7DBF);
      bottom: 37px;
      &::before{
        background: var(--color-5D7DBF);
      }
    }
  }
  img{
    height: 100%;
    object-fit: cover;
    border-radius: 0.8rem;
    opacity: 0.7;
  }
}
.link-list__desc{
  margin-bottom: 0.5em;
}
.link-list__desc-note{
  font-weight: var(--font-weight-bold);
}
/*ご利用方法
---------------------------*/
.usage__content{
  padding-top: clamp(70px, 5vw / 1.75, 50px);
}
.usage__toc{
  place-items: center;
  grid-template-columns: max(15%, 130px) 1fr;
  gap: 5%;
  border-top: 3px solid var(--color-5D7DBF);
  border-bottom: 3px solid var(--color-5D7DBF);
  padding-block: 2.5rem;
  white-space: nowrap;
}
.usage__title{
  color: var(--color-5D7DBF);
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 5px) * (10 / 7))), var(--font28));
  
}
.usage__list{
  place-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem 8%;
  width: min(100%, 800px);
  li{
    width: min(100%, 370px);
  }
}
.usage__link{
  display: block;
  background: var(--color-5D7DBF);
  border: 2px solid var(--color-5D7DBF);
  border-radius: 0.2em;
  color: var(--color-white);
  font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 5px) * (4 / 7))), var(--font20));
  font-weight: var(--font-weight-bold);
  padding-block: 0.8em;
  padding-right: 0.2em;
  &::before{
    background: var(--color-D9D9D9);
  }
  &:hover{
    opacity: .7;
  }
}
/*ご利用の流れ
---------------------------*/
.step__title{
  position: relative;
  &::before{
    content: counter(num) ". ";
  }
}
.step__subtitle-text{
  color: var(--color-5D7DBF);
  font-weight: var(--font-weight-bold);
  margin-bottom: 1.5em;
}
.payment-methods__item{
  grid-template-columns: 48.5% 11.5% 34%;
  gap: clamp(1rem, 4.8vw, 3rem) 3%;
  padding-top: 2rem;
  margin-inline: auto;
  >div{
    border: 3px solid;
    border-radius: 1.5rem;
    color: var(--color-5D7DBF);
    padding-block: 1.8rem;
    padding-inline: clamp(1rem, 3.2vw, 2rem);
    &:where(:nth-child(2), :nth-child(3)){
      grid-column: span 2;
    }
  }
  dd{
    flex-direction: column;
    height: calc(100% - 3.6rem);
    gap: 1em;
  }
}
.payment-method__title{
  font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 5px) * (4 / 7))), var(--font24));
  font-weight: var(--font-weight-bold);
  margin-bottom: 1em;
}
.payment-method__logos{
  justify-content: center;
  gap: clamp(1rem, 3.2vw, 2rem);
  margin-top: auto; 
}
.payment-method__logo-item img{
  height: clamp(50px, 8vw, 80px);
  object-fit: contain;
}
.step__definition-term{
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 5px) * (3 / 7))), var(--font21));
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5em;
}
.step__definition-description{
  margin-bottom: 1.5rem;
}
@media (width <=1000px){
  /*-- webketとは --*/
  .about__intro{
    grid-template-columns: 1fr;
  }
  .about__intro-text{
    order: 2;
  }
  .about__intro-image{
    order: 1;
  }
  /*-- ご利用方法 --*/
  .usage__toc{
    place-content: center;
    grid-template-columns: repeat(2,auto);
  }
 .usage__list{
  grid-template-columns: 1fr;
 }
  /*-- ご利用の流れ --*/
  .payment-methods__item{
    width: min(100%, 700px);
    >div{
      grid-column: span 3;
    }
  }
}
@media (width <=600px){
  /*-- 取扱い施設 --*/
  .facilities-list{
    grid-template-columns: repeat(2, 1fr);
  }
  /*-- リンク案内 --*/
  .link-list{
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  .link-list__usage{
    grid-column: auto;
  }
}