/*--------------------------------------------------------------------------
   overwrite
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/*==========================================================================

   mixin

===========================================================================*/
/*==========================================================================

   keyframes

===========================================================================*/
/* section
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   common
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.section {
  padding-block: clamp(50px, 6.9444444444vw, 100px);
}
@media only screen and (max-width: 767px) {
  .section {
    padding-block: clamp(50px, 26.6666666667vw, 100px);
  }
}
.section__hdg {
  text-align: center;
}
.section__hdg-en {
  display: block;
  color: #393939;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(19px, 2.96875vw, 38px);
  font-weight: 500;
  letter-spacing: 6.46px;
}
@media only screen and (max-width: 767px) {
  .section__hdg-en {
    font-size: clamp(19px, 10.1333333333vw, 38px);
    line-height: 1.3;
  }
}
.section__hdg-ja {
  display: block;
  color: #7B7A78;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.08px;
}
@media only screen and (max-width: 767px) {
  .section__hdg-ja {
    margin-top: 6px;
  }
}
.section__link {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.84px;
}
.section__link a {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}
.section__link a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #7B7A78;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.dev-pc .section__link a:hover::after, .dev-sp .section__link a:active::after {
  left: 100%;
  width: 0;
}
.section--bg {
  background: #F6F6F4;
}

/*--------------------------------------------------------------------------
  #sec-mv
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.sec-mv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  aspect-ratio: 144/80;
  background: url(../img/top/img_mv_pc.webp) no-repeat 50% 50%/cover;
}
@media only screen and (max-width: 767px) {
  .sec-mv {
    padding-bottom: clamp(30px, 16vw, 60px);
    aspect-ratio: 375/740;
    background: url(../img/top/img_mv_sp.webp) no-repeat 50% 50%/cover;
  }
}
.sec-mv__body {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .sec-mv__hdg {
    max-width: 330px;
    width: 100%;
    margin-inline: auto;
  }
}
.sec-mv__hdg img {
  max-width: 100%;
  height: auto;
}
.sec-mv__copy {
  margin-top: clamp(15px, 2.0833333333vw, 30px);
  font-size: clamp(20px, 1.5972222222vw, 23px);
  font-weight: 500;
  letter-spacing: 10.81px;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .sec-mv__copy {
    margin-top: clamp(12.5px, 6.6666666667vw, 25px);
    font-size: clamp(10px, 5.3333333333vw, 20px);
    letter-spacing: 9.4px;
  }
}
.sec-mv__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(15px, 2.0833333333vw, 30px);
}
@media only screen and (max-width: 767px) {
  .sec-mv__link {
    gap: 10px;
    margin-top: clamp(30px, 16vw, 60px);
  }
}

/*--------------------------------------------------------------------------
  #sec-piclup
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.sec-piclup__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: clamp(40px, 6.25vw, 80px);
}
@media only screen and (max-width: 767px) {
  .sec-piclup__content {
    display: block;
    margin-top: clamp(25px, 13.3333333333vw, 50px);
  }
}
.sec-piclup__img {
  width: 50%;
  aspect-ratio: 3/2;
}
@media only screen and (max-width: 767px) {
  .sec-piclup__img {
    width: auto;
  }
}
.sec-piclup__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.sec-piclup__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 43.75%;
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .sec-piclup__body {
    width: auto;
    margin: clamp(25px, 13.3333333333vw, 50px) 0 0;
    padding-inline: clamp(10px, 5.3333333333vw, 20px);
  }
}
.sec-piclup__hdg {
  padding-bottom: clamp(20px, 3.125vw, 40px);
  border-bottom: 1px solid #bbb;
  font-size: clamp(20px, 1.71875vw, 22px);
  font-weight: 600;
  line-height: 36px; /* 163.636% */
  letter-spacing: 3.74px;
}
@media only screen and (max-width: 767px) {
  .sec-piclup__hdg {
    padding-bottom: clamp(20px, 10.6666666667vw, 40px);
    font-size: clamp(11px, 5.8666666667vw, 22px);
  }
}
.sec-piclup__txt {
  margin-top: clamp(20px, 3.125vw, 40px);
  font-size: clamp(14px, 1.171875vw, 15px);
  line-height: 30px; /* 200% */
  letter-spacing: 1.05px;
}
@media only screen and (max-width: 767px) {
  .sec-piclup__txt {
    margin-top: clamp(20px, 10.6666666667vw, 40px);
    font-size: clamp(7.5px, 4vw, 15px);
  }
}
.sec-piclup__link {
  margin-top: clamp(20px, 2.7777777778vw, 40px);
}
@media only screen and (max-width: 767px) {
  .sec-piclup__link {
    margin-top: clamp(20px, 10.6666666667vw, 40px);
  }
}

/*--------------------------------------------------------------------------
  #sec-category
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.sec-category__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: clamp(40px, 5.5555555556vw, 80px);
}
@media only screen and (max-width: 767px) {
  .sec-category__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(35px, 18.6666666667vw, 70px);
    margin-top: clamp(20px, 10.6666666667vw, 40px);
    margin-inline: -20px;
  }
}
.sec-category__item {
  width: 30.2%;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .sec-category__item {
    width: auto;
  }
}
.sec-category__item a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .sec-category__item a:hover .sec-category__item-img img, .mode-sp .sec-category__item a:active .sec-category__item-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.sec-category__item-img {
  aspect-ratio: 2/1;
  overflow: hidden;
}
.sec-category__item-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.sec-category__item-hdg {
  margin-top: clamp(10px, 1.5625vw, 20px);
  font-size: clamp(20px, 1.640625vw, 21px);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 2.1px;
}
@media only screen and (max-width: 767px) {
  .sec-category__item-hdg {
    margin-top: clamp(12.5px, 6.6666666667vw, 25px);
    font-size: clamp(10.5px, 5.6vw, 21px);
  }
}
.sec-category__item-txt {
  margin-top: 10px;
  font-size: 12px;
  color: #7B7A78;
  line-height: 21px;
  letter-spacing: 0.84px;
}
.sec-category__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(40px, 6.25vw, 80px);
}
@media only screen and (max-width: 767px) {
  .sec-category__btn {
    margin-top: clamp(37.5px, 20vw, 75px);
  }
}

/*--------------------------------------------------------------------------
  #sec-about
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.sec-about__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: clamp(40px, 5.5555555556vw, 80px);
}
@media only screen and (max-width: 767px) {
  .sec-about__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(40px, 21.3333333333vw, 80px);
    margin-top: clamp(40px, 21.3333333333vw, 80px);
  }
}
.sec-about__item {
  width: 30.2%;
}
@media only screen and (max-width: 767px) {
  .sec-about__item {
    width: auto;
  }
}
.sec-about__item a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.dev-pc .sec-about__item a:hover .sec-category__item-img img, .dev-sp .sec-about__item a:active .sec-category__item-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.sec-about__item-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(12.5px, 1.953125vw, 25px) clamp(10px, 1.5625vw, 20px) 0;
}
@media only screen and (max-width: 767px) {
  .sec-about__item-body {
    padding: clamp(12.5px, 6.6666666667vw, 25px) clamp(10px, 5.3333333333vw, 20px) 0;
  }
}
.sec-about__item-img {
  aspect-ratio: 9/10;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .sec-about__item-img {
    margin-inline: clamp(15px, 8vw, 30px);
    aspect-ratio: 71/79;
  }
}
.sec-about__item-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.sec-about__item-hdg {
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 1.68px;
}
.sec-about__item-copy {
  margin: clamp(5px, 0.78125vw, 10px);
  margin-inline: -5%;
  font-size: clamp(15px, 1.328125vw, 17px);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1.7px;
}
@media only screen and (max-width: 767px) {
  .sec-about__item-copy {
    margin-top: clamp(5px, 2.6666666667vw, 10px);
    margin-inline: -30px;
    font-size: clamp(8.5px, 4.5333333333vw, 17px);
    letter-spacing: 1px;
  }
}
.sec-about__item-txt {
  margin-top: 10px;
  font-size: 12px;
  color: #7B7A78;
  line-height: 21px;
  letter-spacing: 0.84px;
}
.sec-about__item-link {
  margin-top: clamp(10px, 1.5625vw, 20px);
}
@media only screen and (max-width: 767px) {
  .sec-about__item-link {
    margin-top: clamp(10px, 5.3333333333vw, 20px);
  }
}
.sec-about__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(40px, 6.25vw, 80px);
}

/*--------------------------------------------------------------------------
  #sec-guide
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.sec-guide__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: clamp(40px, 5.5555555556vw, 80px);
}
@media only screen and (max-width: 767px) {
  .sec-guide__list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: clamp(40px, 21.3333333333vw, 80px);
  }
}
.sec-guide__item {
  width: 23.14%;
  border: 1px solid #BBB;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .sec-guide__item {
    width: 47.76%;
    margin-bottom: 20px;
  }
}
.sec-guide__item a {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(238, 238, 238, 0);
  padding: clamp(15px, 2.7777777778vw, 30px) clamp(15px, 2.7777777778vw, 30px) clamp(24px, 4.4444444444vw, 48px);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 767px) {
  .sec-guide__item a {
    padding: 30px 5px 20px;
  }
}
.dev-pc .sec-guide__item a:hover, .dev-sp .sec-guide__item a:active {
  background: #eeeeee;
}
.sec-guide__item-hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(12.5px, 2.3148148148vw, 25px);
  font-size: clamp(13px, 1.2962962963vw, 14px);
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 1.4px;
}
@media only screen and (max-width: 767px) {
  .sec-guide__item-hdg {
    margin-top: clamp(12.5px, 6.6666666667vw, 25px);
    font-size: clamp(7px, 3.7333333333vw, 14px);
  }
}
.sec-guide__item-txt {
  margin-top: clamp(12.5px, 2.3148148148vw, 25px);
  font-size: 12px;
  line-height: 21px;
  letter-spacing: 0.84px;
}
@media only screen and (max-width: 767px) {
  .sec-guide__item-txt {
    margin-top: clamp(10px, 5.3333333333vw, 20px);
  }
}

/*--------------------------------------------------------------------------
   custom animation
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
/*# sourceMappingURL=top.css.map */