@charset "UTF-8";

/* type
---------------------------------------------- */
.type{}
.typeTtl{
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid rgb(var(--color-green));
  border-radius: 10px;
  padding: 1.2em 1.5em;
}
.typeTtl .txt{
  font-size: clamp(18px, 0.2rem + 1.92vw, 32px);
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.4;
  color: rgb(var(--color-green));
}
.typeTtl .subTxt{
  flex-shrink: 0;
  font-size: clamp(11px, 0.1rem + 1.23vw, 20px);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.4;
  border-radius: 10px;
  background-color: rgb(var(--color-green));
  color: #fff;
  margin-left: 1em;
  padding: .3em 1em;
  overflow: hidden;
  text-align: center;
}

.typeHead{
  flex-wrap: nowrap;
  margin-top: 60px;
}
.typeHead__head{
  width: calc(800 / 1200 * 100%);
}
.typeHead_copy{
  font-size: clamp(18px, 0.47rem + 1.37vw, 28px);
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.89;
}
.typeHead__txt{
  margin-top: 1em;
}
.typeHead__body{
  width: max(240,pxcalc(360 / 1200 * 100%));
  margin-left: 3%;
}
.typeSpec__item + .typeSpec__item{
  margin-top: 40px;
}
.typeSpec__ttl{
  color: rgb(var(--color-orange));
  font-size: 14px;
  letter-spacing: 0.15em;
}
.typeSpec__type{
  font-size: 14px;
  letter-spacing: 0.15em;
  line-height: 2.1;
  margin-top: .6em;
}
.typeSpec__type dl{
  display: flex;
}
.typeSpec__type dt{
  white-space: nowrap;
}
.typeSpec__type .num{
  flex-shrink: 0;
  width: 90px;
  margin-inline: .3em 5px;
  text-align: right;
  white-space: nowrap;
}

.typeBox{
  margin-top: 50px;
}
.typeList{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px calc(60 / 1200 * 100%);
}
.typeHead__name{
  font-size: 14px;
  letter-spacing: 0.15em;
  margin-top: 1em;
}

.acBox{
  margin-top: 30px;
}
.acContents{
  display: none;
}

.type__btn{
  justify-content: center;
  max-width: 400px;
  height: 70px;
  margin: 60px auto 0;
  background-color: rgb(var(--color-blue));
  font-size: 20px;
}
.type__btn.arrowBtn::after{
  top: 50%;
  right: auto;
  left: 6%;
  transform: rotate(90deg);
  transition: .2s ease;
}
.type__btn.arrowBtn.open::after{
  transform: rotate(270deg);
}

.listNote{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: right;
}

.typeHead_copy._garal-d,
.typeHead_copy._other{
  margin-top: 60px;
  text-align: center;
}
.orderList{
  display: grid;
  grid-template-columns: repeat(8,1fr);
  gap: 15px calc(8 / 1200 * 100%);
  margin-top: 40px;
}
.orderList > li{
  position: relative;
  z-index: 0;
}
.orderList > li .num{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  background-color: rgb(51 51 51 / .5);
  color: #fff;
  font-size: 14px;
  text-align: center;
  z-index: 1;
}
.orderList + .listNote{
  margin-top: 1em;
}

.otherList{
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 15px calc(12 / 1200 * 100%);
  margin-top: 40px;
}

/* pearl */
.pearl .acBox{
  display: flex;
  flex-direction: column;
}
.acBox .type__btn{
  order: 2;
}

@media (hover: hover) and (pointer: fine) {
  .type__btn:hover::after{
    animation: none;
  }
}

@media screen and (max-width: 960px) {
  .typeSpec__ttl{
    font-size: 12px;
  }
  .typeSpec__type{
    font-size: 12px;
  }
  .typeSpec__type .num{
    width: 80px;
  }
}

@media screen and (max-width: 768px) {
  .typeTtl{
    border-radius: 5px;
    padding: .6em 20px;
  }
  .typeTtl.sp-jcsp{
    justify-content: space-between;
  }
  .typeTtl.sp-aifs{
    align-items: flex-start;
  }
  .typeTtl .txt{
    letter-spacing: 0.1em;
  }
  .typeTtl .subTxt{
    border-radius: 5px;
    padding: .4em .7em;
  }
  .typeTtl.sp-jcsp .subTxt{
    max-width: 118px;
    margin-left: 0;
  }

  .typeHead{
    flex-wrap: wrap;
    margin-top: 25px;
  }
  .typeHead__head{
    width: 100%;
  }
  .typeHead__txt{
    letter-spacing: 0.1em;
  }
  .typeHead__body{
    width: 100%;
    margin-top: 20px;
    margin-left: 0;
  }
  .typeSpec__item + .typeSpec__item{
    margin-top: 15px;
  }

  .typeBox{
    margin-top: 35px;
  }
  .typeList{
    width: calc(200 / 320 * 100%);
    grid-template-columns: repeat(1,1fr);
    gap: 20px 0;
    margin-inline: auto;
  }
  .typeHead__name{
    font-size: 12px;
  }

  .acBox{
    margin-top: 20px;
  }

  .type__btn{
    max-width: 280px;
    height: 50px;
    margin-top: 30px;
    font-size: 15px;
  }
  .type__btn.arrowBtn::after{
    left: 4%;
  }

  .listNote{
    font-size: 12px;
  }

  .typeHead_copy._garal-d,
  .typeHead_copy._other{
    width: 95%;
    margin-top: 40px;
  }
  .orderList{
    grid-template-columns: repeat(4,1fr);
    margin-top: 20px;
  }
  .orderList > li .num{
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .otherList{
    grid-template-columns: repeat(2,1fr);
    gap: 15px calc(15 / 320 * 100%);
    margin-top: 20px;
  }
}