@charset "UTF-8";
/*-----------------------

         変数

-----------------------*/
:root {
  --baseColor: #646464;
  --mainColor: #05AC69;
  --subColor: #******;
  --accentColor: #******;
  --colorW: #fff;
  --base50Color: #b1b1b1;
  --main50Color: #82D6B4;
  --sub50Color: #******;
  --accent50Color: #******;
  --base10Color: #******;
  --main10Color: #E6F8F2;
  --sub10Color: #******;
  --accent10Color: #******;
}
/*-----------------------

         COMMON

-----------------------*/
body {
  width: 100%;
  color: var(--baseColor);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  /* 読みやすくモダンなゴシック体 */
  /* font-family: "Noto Sans JP", sans-serif; */
  /* 明朝体。落ち着いた印象 */
  /* font-family: 'Noto Serif JP', serif; */
  /* 丸みのある親しみやすいゴシック体 */
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* 縦長ロゴの際のヘッダー調整 */
@media (min-width: 769px) {
  header h1 img, header p.logo img {
    height: 6vw; /*適宜調整も可能*/
    width: auto;
    max-height: 8rem; /*適宜調整も可能*/
    max-width: 40rem;
  }
  footer p.logo img {
    max-width: 150%;
    width: 320px;
  }
}

/* TOPのお知らせ */

.parts.sec {
  margin-bottom: 7.291vw;
}
.parts .ttlG {
  margin-bottom: 3.125vw;
}
.parts .sec-ttl {
  color: var(--colorGray);
  letter-spacing: 0.05em;
  font-size: clamp(4.2rem, 3.1806rem + 4.3495vw, 8.4rem);
  font-weight: 400;
}
.parts .sec-sub-ttl {
  font-size: clamp(1.4rem, 1.0602rem + 1.4498vw, 2.8rem);
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
.parts .cms-label {
  font-size: clamp(1.2rem, 1.1515rem + 0.2071vw, 1.4rem);
  font-weight: 500;
  display: inline-block;
  padding: 0 0.5rem;
  position: relative;
  top: -1.8rem;
  letter-spacing: 0.025em;
  margin-right: 1rem;
}
.parts .contents4Wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 2rem;
}
.parts .box a, .parts .detail-btn a {
  text-decoration: none !important;
}
.parts.sec .detail-btn {
  margin-top: 3.645vw;
}
.parts .detail-btn a {
  color: var(--mainColor);
  border: solid 1px var(--mainColor);
}
.parts .detail-btn a {
  font-size: clamp(1.6rem, 1.5029rem + 0.4142vw, 2rem);
  width: 33.2rem;
  height: 7.5rem;
  line-height: 1.5;
  text-align: center;
  position: relative;
  letter-spacing: 0.025em;
  font-weight: 400;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.parts .detail-btn a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.5rem;
  width: 3.2rem;
  height: 2.4rem;
}
.parts .class-list {
  margin: auto 0;
  align-items: stretch;
  gap: 2vh;
}
.parts .class-list-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.parts .class-list-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.parts .class-list-title {
  font-size: 2.22222vh;
  letter-spacing: 0.025em;
  border-bottom: solid 1px;
  padding-bottom: 1rem;
  font-weight: 600;
  margin: 2.5vh 0 1.5vh;
}
.parts .class-list-item .text {
  /* font-size: 1.48148vh; */
  /* font-size: 1.629628vh; */
  font-size: 2.22222vh;
  letter-spacing: 0.025em;
  line-height: 1.5;
  margin-bottom: 3.5vh;
  flex-grow: 1;
}
.parts .class-detail-btn {
  /* font-size: 1.48148vh; */
  font-size: 2.22222vh;
  letter-spacing: 0.025em;
  border-bottom: solid 1px;
  position: relative;
  padding: 0 1vh 0.5vh;
  display: flex;
  align-items: center;
  margin-top: auto;
  color: var(--mainColor);
}
.parts .class-detail-btn::after {
  /* content: ""; */
  content: "▶";
  display: block;
  position: absolute;
  right: 1vh;
  /* background: url(../img/navi-arrow.webp) no-repeat center center/cover;
  width: 3rem;
  height: 2.6rem; */
  color: var(--mainColor);
}
footer p.logo {
  padding-top: 2rem;
  max-width: 60rem;
  margin: 0 auto;
}
.col-lg-12.detail.fr-element.fr-view a .contents-text {
  color: var(--baseColor);
}
.col-lg-12.detail.fr-element.fr-view .parts a {
  text-decoration: none;
  color: var(--baseColor);
}
.col-lg-12.detail.fr-element.fr-view .parts .detail-btn a {
  color: var(--mainColor);
}
#new-arrival .o-card__img.paidmember {
  position: relative;
}
#new-arrival .o-card__img.paidmember::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: url(../img/premium-img.webp) no-repeat center center/cover;
}

.page-detail-information a {
  text-decoration: none !important;
}
.page-detail-information .pager p a.current {
  color: var(--colorW) !important;
}
.page-detail-information .catArea li a.active {
    color: var(--colorW) !important;
}
/* PCなど hover が使えるデバイスでは初期非表示 */
@media (hover: hover) and (pointer: fine) {
  #new-arrival .o-card__img.paidmember::after {
    display: none;
  }
  #new-arrival .o-card__img.paidmember:hover::after {
    display: block;
  }
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1368px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:559px) {
  .parts.sec .contents4Wrap {
    flex-direction: row;
    gap: 2rem 2.8rem;
  }
  .parts.sec .contents4Wrap .box {
    width: calc((100% - 2.8rem) / 2);
  }
  header h1 img, header p.logo img {
    max-width: 26rem;
    width: 60vw;
  }
  footer.main-footer p.logo img {
    max-width: 60vw;
  }
  footer p.logo {
    padding-top: 2rem;
    max-width: 40rem;
    margin: 0 auto;
  }
  .pager .flex-c {
    flex-direction: row;
  }
}
@media screen and (max-width:375px) {}
@media screen and (max-width:361px) {}