@charset "utf-8";

/* =========================================================
   GOLD STONE
   WHITE SAGE CATEGORY
   COMPLETE CSS
========================================================= */


/* =========================================================
   BASE
========================================================= */

.ws-category,
.ws-category *,
.ws-category *::before,
.ws-category *::after {
  box-sizing: border-box;
}

.ws-category {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #2f2e2b;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.ws-category img {
  display: block;
  max-width: 100%;
}

.ws-category a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   HERO
========================================================= */

.ws-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ebe7df;
}

.ws-hero__picture {
  display: block;
  width: 100%;
}

.ws-hero__image {
  display: block;
  width: 100%;
  height: auto;
}


/* PC HERO TEXT */

.ws-hero__content {
  position: absolute;
  top: calc(43% - 60px);
  right: 4%;
  left: auto;
  z-index: 2;

  width: 42%;
  max-width: 430px;

  transform: translateY(-50%);
  text-align: center;

  color: #2f2e2b !important;
}

.ws-hero__content,
.ws-hero__content * {
  color: #2f2e2b !important;
}

.ws-hero__eyebrow {
  margin: 0 0 14px;
  padding: 0;

  font-size: 11px !important;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.28em;

  color: #2f2e2b !important;
}

.ws-hero__title {
  margin: 0;
  padding: 0;

  font-size: clamp(25px, 2.4vw, 36px) !important;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.06em;

  color: #171717 !important;
}

.ws-hero__lead {
  width: 100%;
  max-width: none;

  margin: 20px auto 0;
  padding: 0;

  color: #514c45 !important;

  font-size: 12px !important;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.ws-hero__line {
  display: block;

  width: 34px;
  height: 1px;

  margin: 15px auto;

  background: #786f65;
  opacity: 0.48;
}

.ws-hero__description {
  margin: 0 auto;
  padding: 0;

  max-width: 320px;

  font-size: 11px !important;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.025em;

  color: #625c55 !important;
}


/* PCではH1のBRを表示 */
.ws-hero__sp-br {
  display: block;
}


@media screen and (max-width: 767px) {

  .ws-hero__content {
    top: 7.2%;
    right: auto;
    left: 7%;

    width: 78%;
    max-width: none;

    transform: none;
    text-align: left;
  }

  .ws-hero__eyebrow {
    margin-bottom: 8px;

    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .ws-hero__title {
    font-size: clamp(23px, 7vw, 30px);
    line-height: 1.35;
    letter-spacing: 0.035em;
  }

  .ws-hero__lead {
    max-width: 245px;

    margin: 14px 0 0;

    font-size: 10.5px !important;
    line-height: 1.75;
  }

}

/* =========================================================
   FACTS
========================================================= */

.ws-facts {
  width: 100%;
  padding: 34px 24px;

  background: #2f2e2b !important;
  color: #ffffff !important;
}

.ws-facts,
.ws-facts * {
  color: #ffffff !important;
}

.ws-facts__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  width: min(1140px, 100%);
  margin: 0 auto;
}

.ws-facts__item {
  position: relative;

  padding: 10px 22px;

  text-align: center;
}

.ws-facts__item:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 10%;
  right: 0;

  width: 1px;
  height: 80%;

  background: rgba(255, 255, 255, 0.25);
}

.ws-facts__value {
  margin: 0 0 8px;
  padding: 0;

  color: #ffffff !important;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.ws-facts__label {
  margin: 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.035em;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.ws-section-heading {
  margin: 0 auto 40px;
  padding: 0;

  text-align: center;
}

.ws-section-heading__en {
  margin: 0 0 9px;
  padding: 0;

  color: #817b72 !important;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.22em;
}

.ws-section-heading__title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 29px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.07em;
}

.ws-section-heading__lead {
  max-width: 640px;

  margin: 15px auto 0;
  padding: 0;

  color: #666159 !important;

  font-size: 13px;
  line-height: 1.95;
}


/* =========================================================
   SELECT BY TYPE
========================================================= */

.ws-type {
  width: 100%;
  padding: 76px 24px 84px;
  background: #faf9f7;
}

.ws-type__inner {
  width: min(1140px, 100%);
  margin: 0 auto;
}

.ws-type__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}


/* -------------------------
   CARD
------------------------- */

.ws-type-card {
  position: relative;

  display: flex;
  flex-direction: column;

  grid-column: span 2;

  overflow: hidden;

  min-width: 0;

  border: 1px solid #dedbd5;
  background: #ffffff;

  color: #2f2e2b !important;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ws-type-card,
.ws-type-card * {
  box-sizing: border-box;
}

.ws-type-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.ws-type-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.ws-type-card:hover {
  transform: translateY(-3px);
  border-color: #b9b4ab;
  box-shadow: 0 10px 26px rgba(47, 46, 43, 0.08);
}


/* -------------------------
   IMAGE
------------------------- */

.ws-type-card__image-wrap {
  position: relative;

  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #ffffff;
}

.ws-type-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform 0.35s ease;
}

.ws-type-card:hover .ws-type-card__image {
  transform: scale(1.025);
}


/* -------------------------
   TEXT
------------------------- */

.ws-type-card__text {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 25px 27px 27px;

  background: #ffffff;
}

.ws-type-card__en {
  margin: 0 0 10px;
  padding: 0;

  color: #8d877e !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.ws-type-card__title {
  margin: 0 0 12px;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.05em;
}

.ws-type-card__description {
  margin: 0 0 20px;
  padding: 0;

  color: #625e57 !important;

  font-size: 12px;
  line-height: 1.85;
}

.ws-type-card__link {
  position: relative;

  display: inline-block;
  align-self: flex-start;

  margin-top: auto;
  padding-right: 24px;

  color: #2f2e2b !important;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.ws-type-card__link::after {
  content: "→";

  position: absolute;
  top: 50%;
  right: 0;

  transform: translateY(-50%);

  transition: right 0.2s ease;
}

.ws-type-card:hover .ws-type-card__link::after {
  right: -4px;
}


/* =========================================================
   SELECT BY TYPE - SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-type {
    padding: 50px 14px 58px;
  }

  .ws-type__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .ws-type-card,
  .ws-type-card:nth-child(4),
  .ws-type-card:nth-child(5) {
    grid-column: auto;
  }

  .ws-type-card:nth-child(5) {
    grid-column: 1 / -1;

    width: calc(50% - 4.5px);

    justify-self: center;
  }

  .ws-type-card:hover {
    transform: none;
    box-shadow: none;
  }

  .ws-type-card:hover .ws-type-card__image {
    transform: none;
  }

  .ws-type-card__text {
    padding: 16px 14px 18px;
  }

  .ws-type-card__en {
    margin-bottom: 7px;

    font-size: 7px;
    letter-spacing: 0.16em;
  }

  .ws-type-card__title {
    margin-bottom: 8px;

    font-size: 17px;
    line-height: 1.4;
  }

  .ws-type-card__description {
    margin-bottom: 14px;

    font-size: 10px;
    line-height: 1.7;
  }

  .ws-type-card__link {
    padding-right: 18px;

    font-size: 9px;
  }

}
.ws-type-card:nth-child(4),
.ws-type-card:nth-child(5) {
  width: 100%;
  max-width: 360px;
  justify-self: center;
}


/* =========================================================
   PRODUCT GUIDE
========================================================= */

.ws-product-guide {
  width: 100%;

  padding: 58px 24px 66px;

  background: #ffffff;

  text-align: center;
}

.ws-product-guide,
.ws-product-guide * {
  color: #2f2e2b !important;
}

.ws-product-guide__inner {
  width: min(760px, 100%);
  margin: 0 auto;
}

.ws-product-guide__eyebrow {
  margin: 0 0 9px;
  padding: 0;

  color: #817b72 !important;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.22em;
}

.ws-product-guide__title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 25px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.055em;
}

.ws-product-guide__text {
  margin: 15px auto 0;
  padding: 0;

  color: #69645d !important;

  font-size: 13px;
  line-height: 1.95;
}

.ws-product-guide__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  min-width: 260px;

  margin-top: 27px;
  padding: 15px 30px;

  border: 1px solid #2f2e2b;
  border-radius: 999px;

  background: #2f2e2b !important;
  color: #ffffff !important;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.07em;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.ws-product-guide__button,
.ws-product-guide__button * {
  color: #ffffff !important;
}

.ws-product-guide__button:hover {
  background: #ffffff !important;
  color: #2f2e2b !important;
}

.ws-product-guide__button:hover * {
  color: #2f2e2b !important;
}


/* =========================================================
   PRODUCT LIST SCROLL TARGET
========================================================= */

#ws-product-list {
  scroll-margin-top: 100px;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-hero__content {
    right: 5%;
    width: 42%;
  }

  .ws-hero__title {
    font-size: 29px;
  }

  .ws-hero__lead {
    margin-top: 17px;
    font-size: 13px;
  }

  .ws-hero__description {
    font-size: 11px;
  }

  .ws-facts__value {
    font-size: 14px;
  }

  .ws-type__grid {
    gap: 14px;
  }

  .ws-type-card {
    min-height: 240px;
    padding: 26px 21px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  /* ---------------------------
     HERO
  --------------------------- */

  .ws-hero {
    background: #e8e3db;
  }

  .ws-hero__image {
    width: 100%;
    height: auto;
  }

  .ws-hero__content {
    top: 8.5%;
    right: auto;
    left: 7%;

    width: 86%;
    max-width: none;

    transform: none;

    text-align: left;
  }

  .ws-hero__eyebrow {
    margin-bottom: 9px;

    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .ws-hero__title {
    font-size: clamp(24px, 7.4vw, 31px);
    line-height: 1.38;
    letter-spacing: 0.04em;
  }

  .ws-hero__lead {
    max-width: 285px;

    margin: 14px 0 0;

    font-size: 11px;
    line-height: 1.8;
  }

  .ws-hero__line {
    width: 30px;

    margin: 14px 0;
  }

  .ws-hero__description {
    max-width: 240px;

    font-size: 10px;
    line-height: 1.8;
  }

  .ws-hero__sp-br {
    display: block;
  }


  /* ---------------------------
     FACTS
  --------------------------- */

  .ws-facts {
    padding: 20px 14px;
  }

  .ws-facts__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-facts__item {
    padding: 17px 7px;
  }

  .ws-facts__item:not(:last-child)::after {
    display: none;
  }

  .ws-facts__item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .ws-facts__item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .ws-facts__value {
    margin-bottom: 5px;

    font-size: 13px;
  }

  .ws-facts__label {
    font-size: 9px;
    line-height: 1.6;
  }


  /* ---------------------------
     SELECT BY TYPE
  --------------------------- */

  .ws-type {
    padding: 50px 14px 58px;
  }

  .ws-section-heading {
    margin-bottom: 26px;
  }

  .ws-section-heading__en {
    margin-bottom: 7px;

    font-size: 9px;
  }

  .ws-section-heading__title {
    font-size: 22px;
  }

  .ws-section-heading__lead {
    margin-top: 10px;

    font-size: 11px;
    line-height: 1.8;
  }

  .ws-type__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;
  }

  .ws-type-card,
  .ws-type-card:nth-child(4),
  .ws-type-card:nth-child(5) {
    grid-column: auto;

    min-height: 205px;

    padding: 20px 14px;
  }

  .ws-type-card:nth-child(5) {
    grid-column: 1 / -1;

    width: calc(50% - 4.5px);

    justify-self: center;
  }

  .ws-type-card:hover {
    transform: none;
    box-shadow: none;
  }

  .ws-type-card__en {
    margin-bottom: 8px;

    font-size: 7px;
    letter-spacing: 0.16em;
  }

  .ws-type-card__title {
    margin-bottom: 10px;

    font-size: 17px;
  }

  .ws-type-card__description {
    margin-bottom: 16px;

    font-size: 10px;
    line-height: 1.72;
  }

  .ws-type-card__link {
    padding-right: 19px;

    font-size: 9px;
  }


  /* ---------------------------
     PRODUCT GUIDE
  --------------------------- */

  .ws-product-guide {
    padding: 42px 17px 48px;
  }

  .ws-product-guide__eyebrow {
    font-size: 8px;
  }

  .ws-product-guide__title {
    font-size: 20px;
  }

  .ws-product-guide__text {
    margin-top: 11px;

    font-size: 11px;
    line-height: 1.85;
  }

  .ws-product-guide__button {
    width: 100%;
    max-width: 300px;
    min-width: 0;

    margin-top: 21px;
    padding: 14px 21px;

    font-size: 11px;
  }

}
/* =========================================================
   SP：カードのhover / focus / activeによる黒背景を無効化
========================================================= */

.ws-type-card,
.ws-type-card:hover,
.ws-type-card:focus,
.ws-type-card:active,
.ws-type-card:visited {
  background: #ffffff !important;
  color: #2f2e2b !important;
}

.ws-type-card *,
.ws-type-card:hover *,
.ws-type-card:focus *,
.ws-type-card:active *,
.ws-type-card:visited * {
  background-color: transparent !important;
  color: inherit !important;
}

.ws-type-card__text,
.ws-type-card:hover .ws-type-card__text,
.ws-type-card:focus .ws-type-card__text,
.ws-type-card:active .ws-type-card__text {
  background: #ffffff !important;
}

.ws-type-card__en,
.ws-type-card:hover .ws-type-card__en {
  color: #8d877e !important;
  background: transparent !important;
}

.ws-type-card__title,
.ws-type-card:hover .ws-type-card__title {
  color: #2f2e2b !important;
  background: transparent !important;
}

.ws-type-card__description,
.ws-type-card:hover .ws-type-card__description {
  color: #625e57 !important;
  background: transparent !important;
}

.ws-type-card__link,
.ws-type-card:hover .ws-type-card__link {
  color: #2f2e2b !important;
  background: transparent !important;
}
/* =========================================================
   WHITE SAGE FOOTER CONTENT
========================================================= */

.ws-footer-content,
.ws-footer-content *,
.ws-footer-content *::before,
.ws-footer-content *::after {
  box-sizing: border-box;
}

.ws-footer-content {
  width: 100%;
  margin: 0;
  padding: 0;

  color: #2f2e2b;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.ws-footer-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.ws-section-kicker {
  margin: 0 0 14px;
  padding: 0;

  color: #8a8379 !important;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
}

.ws-content-title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: clamp(27px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.045em;
}

.ws-content-lead {
  margin: 22px 0 0;
  padding: 0;

  color: #5e5952 !important;

  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.03em;
}

.ws-content-body {
  margin-top: 30px;
}

.ws-content-body p {
  margin: 0 0 18px;
  padding: 0;

  color: #625e57 !important;

  font-size: 13px;
  line-height: 2.05;
}

.ws-content-body p:last-child {
  margin-bottom: 0;
}

.ws-content-heading {
  margin-bottom: 45px;
}

.ws-content-heading--center {
  text-align: center;
}

.ws-pc-only {
  display: block;
}

.ws-sp-only {
  display: none;
}


/* =========================================================
   01 QUALITY CONTROL
========================================================= */

.ws-quality {
  width: 100%;
  padding: 95px 24px;

  background: #ffffff;
}

.ws-quality__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;

  gap: 65px;

  width: min(1140px, 100%);
  margin: 0 auto;
}

.ws-quality__image {
  min-width: 0;
}

.ws-quality__image img {
  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;
  object-position: center;

  background: #f3f1ed;
}

.ws-quality__image-note {
  margin: 9px 0 0;
  padding: 0;

  color: #8c877f !important;

  font-size: 10px;
  line-height: 1.6;
}

.ws-quality__content {
  min-width: 0;
}


/* =========================================================
   02 OUR SPECIALIST
========================================================= */

.ws-specialist {
  width: 100%;
  padding: 90px 24px 96px;

  background: #f8f7f4;
}

.ws-specialist__inner {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.ws-specialist__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.ws-specialist__card {
  padding: 34px 30px 36px;

  border: 1px solid #dedbd5;

  background: #ffffff;
}

.ws-specialist__number {
  margin: 0 0 21px;
  padding: 0;

  color: #aaa49b !important;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
}

.ws-specialist__title {
  margin: 0 0 16px;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.ws-specialist__text {
  margin: 0;
  padding: 0;

  color: #666159 !important;

  font-size: 12px;
  line-height: 1.95;
}


/* =========================================================
   03 FOUR GRADES
========================================================= */

.ws-grades {
  width: 100%;
  padding: 95px 24px 100px;

  background: #ffffff;
}

.ws-grades__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.ws-grades__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;
}

.ws-grade-card {
  position: relative;

  min-height: 285px;

  padding: 31px 25px 29px;

  border: 1px solid #dedbd5;

  background: #ffffff;
}

.ws-grade-card--premium {
  border-color: #93836a;
}

.ws-grade-card--premium::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 3px;

  background: #93836a;
}

.ws-grade-card__head {
  margin-bottom: 24px;
}

.ws-grade-card__rank {
  margin: 0 0 8px;
  padding: 0;

  color: #938c82 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.17em;
}

.ws-grade-card--premium .ws-grade-card__rank {
  color: #75644d !important;
}

.ws-grade-card__title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.ws-grade-card__text {
  margin: 0;
  padding: 0;

  color: #656058 !important;

  font-size: 12px;
  line-height: 1.95;
}


/* =========================================================
   04 PREMIUM STANDARD
========================================================= */

.ws-premium {
  width: 100%;
  padding: 92px 24px 100px;
  background: #2f2e2b;
}

.ws-premium__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.ws-premium__header {
  text-align: center;
  margin-bottom: 42px;
}

.ws-premium .ws-section-kicker {
  color: rgba(255,255,255,0.56) !important;
}

.ws-premium .ws-content-title {
  margin: 0;
  padding: 0;

  color: #ffffff !important;

  font-size: 28px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.035em;
}

.ws-premium .ws-content-lead {
  margin: 20px 0 0;

  color: rgba(255,255,255,0.76) !important;

  font-size: 14px;
  line-height: 1.9;
}


/* タイトル下の棒線を無効化 */
.ws-premium .ws-content-title::before,
.ws-premium .ws-content-title::after,
.ws-premium h2::before,
.ws-premium h2::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   POINTS
========================================================= */

.ws-premium__points {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));

  margin-bottom: 38px;

  border-top: 1px solid rgba(255,255,255,0.20);
  border-bottom: 1px solid rgba(255,255,255,0.20);
}

.ws-premium-point {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 88px;

  padding: 15px 12px;
}

.ws-premium-point:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 22%;
  right: 0;

  width: 1px;
  height: 56%;

  background: rgba(255,255,255,0.16);
}

.ws-premium-point__number {
  margin-bottom: 7px;

  color: rgba(255,255,255,0.45) !important;

  font-size: 9px;
  line-height: 1.4;
}

.ws-premium-point__label {
  color: #ffffff !important;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}


/* =========================================================
   COMPARISON IMAGE
========================================================= */

.ws-premium__comparison {
  width: 100%;

  margin: 0 auto;
}

.ws-premium__comparison img {
  display: block;

  width: 100%;
  height: auto;

  background: #ffffff;
}

.ws-premium__comparison--pc {
  display: block;
}

.ws-premium__comparison-sp {
  display: none;
}

.ws-premium__comparison-note {
  margin: 10px 0 0;

  color: rgba(255,255,255,0.52) !important;

  font-size: 10px;
  line-height: 1.7;
}


/* =========================================================
   MESSAGE
========================================================= */

.ws-premium__message {
  margin-top: 34px;
  padding-top: 28px;

  border-top: 1px solid rgba(255,255,255,0.16);
}

.ws-premium__message p {
  margin: 0 0 18px;

  color: rgba(255,255,255,0.82) !important;

  font-size: 13px;
  line-height: 2;
}

.ws-premium__message p:last-child {
  margin-bottom: 0;
}

.ws-premium__message strong {
  color: #ffffff !important;
  font-weight: 600;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-premium {
    padding: 76px 20px 84px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-premium {
    padding: 58px 15px 64px;
  }

  .ws-premium__header {
    margin-bottom: 30px;
  }

  .ws-premium .ws-content-title {
    font-size: 22px;
    line-height: 1.6;
  }

  .ws-premium .ws-content-lead {
    margin-top: 16px;

    font-size: 11px;
    line-height: 1.8;
  }


  /* -------------------------
     POINTS
  ------------------------- */

  .ws-premium__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 26px;

    border: 0;
  }

  .ws-premium-point {
    align-items: flex-start;

    min-height: 68px;

    padding: 12px 13px;

    border: 1px solid rgba(255,255,255,0.18);

    background: rgba(255,255,255,0.035);
  }

  .ws-premium-point::after {
    display: none !important;
  }

  .ws-premium-point--wide {
    grid-column: 1 / -1;
  }

  .ws-premium-point__number {
    margin-bottom: 5px;

    font-size: 8px;
  }

  .ws-premium-point__label {
    font-size: 11.5px;
  }


  /* -------------------------
     COMPARISON
  ------------------------- */

  .ws-premium__comparison--pc {
    display: none;
  }

  .ws-premium__comparison-sp {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .ws-premium__comparison-sp-item {
    width: 100%;
  }

  .ws-premium__comparison-sp-item img {
    display: block;

    width: 100%;
    height: auto;

    background: #ffffff;
  }

  .ws-premium__comparison-note {
    margin-top: 8px;

    font-size: 9px;
    line-height: 1.6;
  }


  /* -------------------------
     MESSAGE
  ------------------------- */

  .ws-premium__message {
    margin-top: 25px;
    padding-top: 22px;
  }

  .ws-premium__message p {
    margin-bottom: 15px;

    font-size: 11px;
    line-height: 1.9;
  }

}

/* =========================================================
   05 CHOOSE YOUR TYPE
========================================================= */

.ws-choice {
  width: 100%;
  padding: 95px 24px 100px;
  background: #ffffff;
}

.ws-choice__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.ws-choice__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ws-choice-card {
  display: flex;
  flex-direction: column;

  min-height: 390px;
  padding: 38px 36px 36px;

  border: 1px solid #dedbd5;
  background: #faf9f7;
}

.ws-choice-card__head {
  margin-bottom: 24px;
}

.ws-choice-card__en {
  margin: 0 0 8px;
  padding: 0;

  color: #918a80 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
}

.ws-choice-card__title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.ws-choice-card__text {
  margin: 0 0 17px;
  padding: 0;

  color: #625e57 !important;

  font-size: 13px;
  line-height: 2;
}

.ws-choice-card__point {
  margin-top: auto;
  padding-top: 24px;

  border-top: 1px solid #dedbd5;
}

.ws-choice-card__point-label {
  margin: 0 0 8px;
  padding: 0;

  color: #918a80 !important;

  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.ws-choice-card__point-text {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
}

.ws-choice-note {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: start;

  gap: 25px;

  margin-top: 25px;
  padding: 27px 31px;

  border-left: 3px solid #93836a;
  background: #f5f2ed;
}

.ws-choice-note__label {
  margin: 0;
  padding: 0;

  color: #85755f !important;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
}

.ws-choice-note__text {
  margin: 0;
  padding: 0;

  color: #5f5a53 !important;

  font-size: 13px;
  line-height: 2;
}


/* =========================================================
   06 WHAT IS CRUSHED SAGE?
   PC / SP COMPLETE
========================================================= */

.ws-crushed {
  width: 100%;
  padding: 95px 24px 105px;

  background: #f8f7f4;
}

.ws-crushed__inner {
  width: min(980px, 100%);
  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.ws-crushed__intro {
  width: 100%;
  max-width: 760px;

  margin: 0 auto 48px;

  text-align: center;
}

.ws-crushed .ws-section-kicker {
  margin-bottom: 14px;
}

.ws-crushed .ws-content-title {
  margin: 0;

  color: #2f2e2b !important;

  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.ws-crushed .ws-content-lead {
  margin-top: 20px;

  color: #5e5952 !important;

  font-size: 14px;
  line-height: 1.9;
}


/* タイトル下の装飾線を無効化 */
.ws-crushed .ws-content-title::before,
.ws-crushed .ws-content-title::after,
.ws-crushed h2::before,
.ws-crushed h2::after {
  content: none !important;
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: none !important;
}


/* =========================================================
   COMPARISON VISUAL
========================================================= */

.ws-crushed__visual {
  width: 100%;
  max-width: 860px;

  margin: 0 auto 48px;
}

.ws-crushed__visual img {
  display: block;

  width: 100%;
  height: auto;

  background: #ffffff;
}

.ws-crushed__visual-note {
  margin: 10px 0 0;
  padding: 0;

  color: #77726a !important;

  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}


/* =========================================================
   MAIN BOX
========================================================= */

.ws-crushed__box {
  width: 100%;

  padding: 40px 42px 42px;

  border: 1px solid #dedbd5;

  background: #ffffff;
}

.ws-crushed__label {
  margin: 0 0 10px;
  padding: 0;

  color: #918a80 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
}

.ws-crushed__title {
  margin: 0 0 24px;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.035em;
}

.ws-crushed__text {
  margin: 0 0 17px;
  padding: 0;

  color: #625e57 !important;

  font-size: 12.5px;
  line-height: 2;
}

.ws-crushed__text:last-child {
  margin-bottom: 0;
}


/* =========================================================
   WHOLE LEAF / CRUSHED
========================================================= */

.ws-crushed__compare {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  width: 100%;

  margin-top: 16px;

  border: 1px solid #dedbd5;

  background: #ffffff;
}

.ws-crushed__compare-item {
  min-width: 0;

  padding: 30px 32px 32px;
}

.ws-crushed__compare-item + .ws-crushed__compare-item {
  border-left: 1px solid #dedbd5;
}

.ws-crushed__compare-en {
  margin: 0 0 8px;
  padding: 0;

  color: #918a80 !important;

  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.ws-crushed__compare-title {
  margin: 0 0 13px;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
}

.ws-crushed__compare-text {
  margin: 0;
  padding: 0;

  color: #666159 !important;

  font-size: 11px;
  line-height: 1.9;
}


/* =========================================================
   MESSAGE
========================================================= */

.ws-crushed__message {
  width: 100%;

  margin-top: 28px;
  padding: 27px 30px;

  border-left: 3px solid #93836a;

  background: #f1eee8;
}

.ws-crushed__message p {
  margin: 0 0 12px;
  padding: 0;

  color: #5f5a53 !important;

  font-size: 12px;
  line-height: 1.9;
}

.ws-crushed__message p:last-child {
  margin-bottom: 0;
}

.ws-crushed__message strong {
  color: #2f2e2b !important;
  font-weight: 600;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-crushed {
    padding: 76px 20px 84px;
  }

  .ws-crushed__inner {
    width: min(900px, 100%);
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-crushed {
    padding: 60px 15px 68px;
  }

  .ws-crushed__inner {
    width: 100%;
  }


  /* HEADER */

  .ws-crushed__intro {
    max-width: none;

    margin-bottom: 30px;
  }

  .ws-crushed .ws-section-kicker {
    margin-bottom: 10px;

    font-size: 9px;
  }

  .ws-crushed .ws-content-title {
    font-size: 23px;
    line-height: 1.55;
  }

  .ws-crushed .ws-content-lead {
    margin-top: 15px;

    font-size: 12px;
    line-height: 1.85;
  }


  /* VISUAL */

  .ws-crushed__visual {
    max-width: none;

    margin-bottom: 30px;
  }

  .ws-crushed__visual-note {
    margin-top: 8px;

    font-size: 9.5px;
    line-height: 1.65;
  }


  /* MAIN */

  .ws-crushed__box {
    padding: 25px 22px 27px;
  }

  .ws-crushed__label {
    margin-bottom: 7px;

    font-size: 7px;
  }

  .ws-crushed__title {
    margin-bottom: 16px;

    font-size: 17px;
    line-height: 1.55;
  }

  .ws-crushed__text {
    margin-bottom: 12px;

    font-size: 11px;
    line-height: 1.85;
  }


  /* COMPARE */

  .ws-crushed__compare {
    grid-template-columns: 1fr;

    margin-top: 10px;
  }

  .ws-crushed__compare-item {
    padding: 22px 20px 23px;
  }

  .ws-crushed__compare-item + .ws-crushed__compare-item {
    border-top: 1px solid #dedbd5;
    border-left: 0;
  }

  .ws-crushed__compare-en {
    font-size: 7px;
  }

  .ws-crushed__compare-title {
    font-size: 15px;
  }

  .ws-crushed__compare-text {
    font-size: 10px;
    line-height: 1.8;
  }


  /* MESSAGE */

  .ws-crushed__message {
    margin-top: 14px;

    padding: 20px 19px;

    border-left-width: 2px;
  }

  .ws-crushed__message p {
    font-size: 10.5px;
    line-height: 1.85;
  }

}
/* =========================================================
   WHITE SAGE CONTENT
   見出し下の黒い装飾ラインをすべて削除
========================================================= */

.ws-quality .ws-content-title::before,
.ws-quality .ws-content-title::after,
.ws-specialist .ws-content-title::before,
.ws-specialist .ws-content-title::after,
.ws-grades .ws-content-title::before,
.ws-grades .ws-content-title::after,
.ws-premium-standard .ws-content-title::before,
.ws-premium-standard .ws-content-title::after,
.ws-choice .ws-content-title::before,
.ws-choice .ws-content-title::after,
.ws-crushed .ws-content-title::before,
.ws-crushed .ws-content-title::after {
  content: none !important;
  display: none !important;
}
/* =========================================================
   04 PREMIUM STANDARD
   タイトル下の黒い装飾ラインを削除
========================================================= */

.ws-premium-standard h2::before,
.ws-premium-standard h2::after,
.ws-premium-standard .ws-content-title::before,
.ws-premium-standard .ws-content-title::after {
  content: none !important;
  display: none !important;
}
/* =========================================================
   04 PREMIUM STANDARD
   タイトル下の装飾ラインを完全に削除
========================================================= */

.ws-premium .ws-content-title::before,
.ws-premium .ws-content-title::after,
.ws-premium h2::before,
.ws-premium h2::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.ws-premium .ws-content-title {
  border: 0 !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

/* =========================================================
   07 HOW TO USE
========================================================= */

.ws-howto {
  width: 100%;
  padding: 95px 24px 105px;
  background: #ffffff;
}

.ws-howto__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}


/* STEP GRID */

.ws-howto__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ws-howto-step {
  min-height: 280px;
  padding: 31px 25px 29px;

  border: 1px solid #dedbd5;
  background: #faf9f7;
}

.ws-howto-step__number {
  margin: 0 0 20px;
  padding: 0;

  color: #928a80 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.17em;
}

.ws-howto-step__title {
  margin: 0 0 16px;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.035em;
}

.ws-howto-step__text {
  margin: 0;
  padding: 0;

  color: #656058 !important;

  font-size: 12px;
  line-height: 1.95;
}


/* MOVIE */

.ws-howto__movie {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;

  gap: 55px;

  margin-top: 70px;
  padding: 55px;

  background: #f8f7f4;
}

.ws-howto__movie-heading {
  min-width: 0;
}

.ws-howto__movie-en {
  margin: 0 0 10px;
  padding: 0;

  color: #918a80 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.ws-howto__movie-title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 23px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.ws-howto__movie-text {
  margin: 18px 0 0;
  padding: 0;

  color: #625e57 !important;

  font-size: 12px;
  line-height: 1.9;
}

.ws-howto__movie-frame {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #000000;
}

.ws-howto__movie-frame iframe {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}


/* CAUTION */

.ws-howto__caution {
  display: grid;
  grid-template-columns: 150px 1fr;

  gap: 28px;

  margin-top: 25px;
  padding: 28px 31px;

  border-left: 3px solid #93836a;
  background: #f5f2ed;
}

.ws-howto__caution-label {
  margin: 0;
  padding: 0;

  color: #776751 !important;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
}

.ws-howto__caution-text {
  margin: 0;
  padding: 0;

  color: #5f5a53 !important;

  font-size: 12px;
  line-height: 1.95;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-howto__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-howto__movie {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-howto {
    padding: 60px 15px 68px;
  }


  /* STEP */

  .ws-howto__steps {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .ws-howto-step {
    min-height: 0;
    padding: 24px 21px 25px;
  }

  .ws-howto-step__number {
    margin-bottom: 12px;
    font-size: 7px;
  }

  .ws-howto-step__title {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .ws-howto-step__text {
    font-size: 11px;
    line-height: 1.85;
  }


  /* MOVIE */

  .ws-howto__movie {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-top: 40px;
    padding: 27px 21px;
  }

  .ws-howto__movie-en {
    margin-bottom: 7px;
    font-size: 7px;
  }

  .ws-howto__movie-title {
    font-size: 19px;
  }

  .ws-howto__movie-text {
    margin-top: 12px;

    font-size: 10.5px;
    line-height: 1.85;
  }


  /* CAUTION */

  .ws-howto__caution {
    grid-template-columns: 1fr;
    gap: 8px;

    margin-top: 13px;
    padding: 20px 19px;

    border-left-width: 2px;
  }

  .ws-howto__caution-label {
    font-size: 11px;
  }

  .ws-howto__caution-text {
    font-size: 10.5px;
    line-height: 1.85;
  }

}
/* 07 見出し下の装飾線を非表示 */
.ws-howto .ws-content-title::before,
.ws-howto .ws-content-title::after {
  content: none !important;
  display: none !important;
}
/* =========================================================
   08 TROUBLESHOOTING
========================================================= */

.ws-trouble {
  width: 100%;
  padding: 95px 24px 105px;
  background: #f8f7f4;
}

.ws-trouble__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}


/* =========================================================
   TITLE DECORATION OFF
========================================================= */

.ws-trouble .ws-content-title::before,
.ws-trouble .ws-content-title::after,
.ws-trouble h2::before,
.ws-trouble h2::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}


/* =========================================================
   TROUBLE CARDS
========================================================= */

.ws-trouble__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ws-trouble-card {
  min-height: 290px;
  padding: 31px 25px 29px;

  border: 1px solid #dedbd5;
  background: #ffffff;
}

.ws-trouble-card__number {
  margin: 0 0 20px;
  padding: 0;

  color: #968e84 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.15em;
}

.ws-trouble-card__title {
  margin: 0 0 16px;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.035em;
}

.ws-trouble-card__text {
  margin: 0;
  padding: 0;

  color: #656058 !important;

  font-size: 12px;
  line-height: 1.95;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.ws-trouble__experience {
  display: grid;

  /* 左カラムを少し広げる */
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 58px;

  margin-top: 65px;
  padding: 52px 55px;

  background: #2f2e2b;
}

.ws-trouble__experience-head {
  min-width: 0;
}

.ws-trouble__experience-body {
  min-width: 0;
}

.ws-trouble__experience-en {
  margin: 0 0 11px;
  padding: 0;

  color: rgba(255, 255, 255, 0.5) !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.19em;
}

.ws-trouble__experience-title {
  margin: 0;
  padding: 0;

  color: #ffffff !important;

  font-size: 22px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.ws-trouble__experience-body p {
  margin: 0 0 17px;
  padding: 0;

  color: rgba(255, 255, 255, 0.76) !important;

  font-size: 12px;
  line-height: 2;
}

.ws-trouble__experience-body p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   QUICK CHECK
========================================================= */

.ws-trouble__check {
  display: grid;
  grid-template-columns: 150px 1fr;

  gap: 28px;

  margin-top: 22px;
  padding: 28px 31px;

  border-left: 3px solid #93836a;
  background: #ffffff;
}

.ws-trouble__check-label {
  margin: 0;
  padding: 0;

  color: #786852 !important;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.15em;
}

.ws-trouble__check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px 30px;
}

.ws-trouble__check-list p {
  position: relative;

  margin: 0;
  padding: 0 0 0 22px;

  color: #5f5a53 !important;

  font-size: 12px;
  line-height: 1.8;
}


/* CSSでチェックマークを描画
   文字化け防止 */
.ws-trouble__check-list p::before {
  content: "";

  position: absolute;
  left: 2px;
  top: 0.63em;

  width: 7px;
  height: 4px;

  border-left: 1.5px solid #85745e;
  border-bottom: 1.5px solid #85745e;

  transform: rotate(-45deg);
}


/* HTMLに古い span が残っていても非表示 */
.ws-trouble__check-list p > span {
  display: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-trouble__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-trouble-card {
    min-height: 250px;
  }

  .ws-trouble__experience {
    grid-template-columns: 1fr;

    gap: 30px;

    padding: 45px 42px;
  }

  .ws-trouble__check-list {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-trouble {
    padding: 60px 15px 68px;
  }


  /* -------------------------
     CARD
  ------------------------- */

  .ws-trouble__grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .ws-trouble-card {
    min-height: 0;
    padding: 24px 21px 25px;
  }

  .ws-trouble-card__number {
    margin-bottom: 12px;

    font-size: 7px;
  }

  .ws-trouble-card__title {
    margin-bottom: 10px;

    font-size: 16px;
    line-height: 1.55;
  }

  .ws-trouble-card__text {
    font-size: 11px;
    line-height: 1.85;
  }


  /* -------------------------
     EXPERIENCE
  ------------------------- */

  .ws-trouble__experience {
    grid-template-columns: 1fr;

    gap: 23px;

    margin-top: 40px;
    padding: 28px 22px 30px;
  }

  .ws-trouble__experience-en {
    margin-bottom: 7px;

    font-size: 7px;
  }

  .ws-trouble__experience-title {
    font-size: 19px;
    line-height: 1.65;
  }

  .ws-trouble__experience-body p {
    margin-bottom: 13px;

    font-size: 10.5px;
    line-height: 1.9;
  }


  /* -------------------------
     QUICK CHECK
  ------------------------- */

  .ws-trouble__check {
    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 12px;
    padding: 20px 19px;

    border-left-width: 2px;
  }

  .ws-trouble__check-label {
    font-size: 8px;
  }

  .ws-trouble__check-list {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .ws-trouble__check-list p {
    padding-left: 20px;

    font-size: 10.5px;
    line-height: 1.75;
  }

  .ws-trouble__check-list p::before {
    left: 2px;
    top: 0.61em;

    width: 6px;
    height: 3px;

    border-left-width: 1.3px;
    border-bottom-width: 1.3px;
  }

}
/* =========================================================
   09 STORAGE
========================================================= */

.ws-storage {
  width: 100%;
  padding: 95px 24px 105px;
  background: #ffffff;
}

.ws-storage__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}


/* =========================================================
   TITLE DECORATION OFF
========================================================= */

.ws-storage .ws-content-title::before,
.ws-storage .ws-content-title::after,
.ws-storage h2::before,
.ws-storage h2::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}


/* =========================================================
   STORAGE CARDS
========================================================= */

.ws-storage__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ws-storage-card {
  min-height: 275px;
  padding: 32px 29px 30px;

  border: 1px solid #dedbd5;
  background: #faf9f7;
}

.ws-storage-card__number {
  margin: 0 0 20px;
  padding: 0;

  color: #968e84 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.15em;
}

.ws-storage-card__title {
  margin: 0 0 16px;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 19px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.035em;
}

.ws-storage-card__text {
  margin: 0;
  padding: 0;

  color: #656058 !important;

  font-size: 12px;
  line-height: 1.95;
}


/* =========================================================
   OUR STORAGE
========================================================= */

.ws-storage__management {
  display: grid;
  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: 65px;

  margin-top: 65px;
  padding: 54px 56px;

  background: #2f2e2b;
}

.ws-storage__management-heading,
.ws-storage__management-content {
  min-width: 0;
}

.ws-storage__management-en {
  margin: 0 0 11px;
  padding: 0;

  color: rgba(255, 255, 255, 0.5) !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.19em;
}

.ws-storage__management-title {
  margin: 0;
  padding: 0;

  color: #ffffff !important;

  font-size: 23px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.035em;
}

.ws-storage__management-lead {
  margin: 23px 0 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.7) !important;

  font-size: 13px;
  line-height: 1.9;
}

.ws-storage__management-content p {
  margin: 0 0 17px;
  padding: 0;

  color: rgba(255, 255, 255, 0.77) !important;

  font-size: 12px;
  line-height: 2;
}

.ws-storage__management-content p:last-child {
  margin-bottom: 0;
}

.ws-storage__management-content strong {
  color: #ffffff !important;
  font-weight: 600;
}


/* =========================================================
   LEAF COLOR NOTE
========================================================= */

.ws-storage__note {
  display: grid;
  grid-template-columns:
    minmax(0, 0.75fr)
    minmax(0, 1.25fr);

  gap: 50px;

  margin-top: 22px;
  padding: 33px 34px;

  border-left: 3px solid #93836a;
  background: #f5f2ed;
}

.ws-storage__note-heading,
.ws-storage__note-text {
  min-width: 0;
}

.ws-storage__note-en {
  margin: 0 0 9px;
  padding: 0;

  color: #85745e !important;

  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.17em;
}

.ws-storage__note-title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
}

.ws-storage__note-text p {
  margin: 0 0 11px;
  padding: 0;

  color: #5f5a53 !important;

  font-size: 11px;
  line-height: 1.9;
}

.ws-storage__note-text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-storage__management {
    grid-template-columns: 1fr;
    gap: 31px;
  }

  .ws-storage__note {
    grid-template-columns: 1fr;
    gap: 22px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-storage {
    padding: 60px 15px 68px;
  }


  /* CARDS */

  .ws-storage__grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .ws-storage-card {
    min-height: 0;
    padding: 24px 21px 25px;
  }

  .ws-storage-card__number {
    margin-bottom: 12px;

    font-size: 7px;
  }

  .ws-storage-card__title {
    margin-bottom: 10px;

    font-size: 16px;
    line-height: 1.55;
  }

  .ws-storage-card__text {
    font-size: 11px;
    line-height: 1.85;
  }


  /* OUR STORAGE */

  .ws-storage__management {
    grid-template-columns: 1fr;

    gap: 23px;

    margin-top: 40px;
    padding: 29px 22px 31px;
  }

  .ws-storage__management-en {
    margin-bottom: 7px;

    font-size: 7px;
  }

  .ws-storage__management-title {
    font-size: 19px;
    line-height: 1.65;
  }

  .ws-storage__management-lead {
    margin-top: 15px;

    font-size: 10.5px;
    line-height: 1.85;
  }

  .ws-storage__management-content p {
    margin-bottom: 13px;

    font-size: 10.5px;
    line-height: 1.9;
  }


  /* COLOR NOTE */

  .ws-storage__note {
    grid-template-columns: 1fr;

    gap: 18px;

    margin-top: 12px;
    padding: 21px 19px 22px;

    border-left-width: 2px;
  }

  .ws-storage__note-en {
    margin-bottom: 7px;

    font-size: 7px;
  }

  .ws-storage__note-title {
    font-size: 15px;
    line-height: 1.6;
  }

  .ws-storage__note-text p {
    margin-bottom: 9px;

    font-size: 10.5px;
    line-height: 1.85;
  }

}
/* =========================================================
   10 ABOUT WHITE SAGE
========================================================= */

.ws-about {
  width: 100%;
  padding: 95px 24px 105px;
  background: #f8f7f4;
}

.ws-about__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}


/* =========================================================
   TITLE DECORATION OFF
========================================================= */

.ws-about .ws-content-title::before,
.ws-about .ws-content-title::after,
.ws-about h2::before,
.ws-about h2::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}


/* =========================================================
   MAIN
========================================================= */

.ws-about__main {
  display: grid;
  grid-template-columns:
    minmax(0, 0.75fr)
    minmax(0, 1.25fr);

  gap: 70px;

  padding: 55px 58px;

  border: 1px solid #dedbd5;
  background: #ffffff;
}

.ws-about__intro,
.ws-about__body {
  min-width: 0;
}

.ws-about__eyebrow {
  margin: 0 0 12px;
  padding: 0;

  color: #918a80 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.19em;
}

.ws-about__intro-title {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 24px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.035em;
}

.ws-about__intro-lead {
  margin: 25px 0 0;
  padding: 0;

  color: #625e57 !important;

  font-size: 12px;
  line-height: 1.95;
}

.ws-about__body p {
  margin: 0 0 17px;
  padding: 0;

  color: #625e57 !important;

  font-size: 12px;
  line-height: 2;
}

.ws-about__body p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   FACTS
========================================================= */

.ws-about__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  margin-top: 16px;

  border: 1px solid #dedbd5;
  background: #ffffff;
}

.ws-about-fact {
  position: relative;

  padding: 25px 18px 27px;

  text-align: center;
}

.ws-about-fact:not(:last-child)::after {
  content: "";

  position: absolute;
  top: 20%;
  right: 0;

  width: 1px;
  height: 60%;

  background: #dedbd5;
}

.ws-about-fact__en {
  margin: 0 0 8px;
  padding: 0;

  color: #968e84 !important;

  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
}

.ws-about-fact__label {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}


/* =========================================================
   PURIFICATION NOTE
========================================================= */

.ws-about__note {
  display: grid;
  grid-template-columns: 190px 1fr;

  gap: 28px;

  margin-top: 16px;
  padding: 28px 31px;

  border-left: 3px solid #93836a;
  background: #f1eee8;
}

.ws-about__note-label {
  margin: 0;
  padding: 0;

  color: #786852 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.14em;
}

.ws-about__note-text {
  margin: 0;
  padding: 0;

  color: #5f5a53 !important;

  font-size: 11px;
  line-height: 1.95;
}


/* =========================================================
   WORDPRESS GUIDE
========================================================= */

.ws-about__guide {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr);

  align-items: center;

  gap: 55px;

  margin-top: 55px;
  padding: 48px 52px;

  background: #2f2e2b;
}

.ws-about__guide-content,
.ws-about__guide-link {
  min-width: 0;
}

.ws-about__guide-en {
  margin: 0 0 10px;
  padding: 0;

  color: rgba(255,255,255,0.5) !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.19em;
}

.ws-about__guide-title {
  margin: 0;
  padding: 0;

  color: #ffffff !important;

  font-size: 22px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.035em;
}

.ws-about__guide-text {
  margin: 18px 0 0;
  padding: 0;

  color: rgba(255,255,255,0.72) !important;

  font-size: 11px;
  line-height: 1.9;
}

.ws-about__guide-link {
  text-align: center;
}

.ws-about__guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: 100%;
  max-width: 330px;

  padding: 16px 25px;

  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 999px;

  background: transparent !important;
  color: #ffffff !important;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;

  text-decoration: none !important;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.ws-about__guide-button,
.ws-about__guide-button * {
  color: #ffffff !important;
}

.ws-about__guide-button:hover {
  background: #ffffff !important;
  color: #2f2e2b !important;
}

.ws-about__guide-button:hover * {
  color: #2f2e2b !important;
}

.ws-about__guide-note {
  margin: 11px 0 0;
  padding: 0;

  color: rgba(255,255,255,0.45) !important;

  font-size: 9px;
  line-height: 1.7;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-about__main {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ws-about__guide {
    grid-template-columns: 1fr;
    gap: 30px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-about {
    padding: 60px 15px 68px;
  }


  /* MAIN */

  .ws-about__main {
    grid-template-columns: 1fr;

    gap: 25px;

    padding: 27px 22px 29px;
  }

  .ws-about__eyebrow {
    margin-bottom: 8px;

    font-size: 7px;
  }

  .ws-about__intro-title {
    font-size: 19px;
    line-height: 1.65;
  }

  .ws-about__intro-lead {
    margin-top: 16px;

    font-size: 10.5px;
    line-height: 1.85;
  }

  .ws-about__body p {
    margin-bottom: 13px;

    font-size: 10.5px;
    line-height: 1.9;
  }


  /* FACTS */

  .ws-about__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-about-fact {
    padding: 19px 10px 20px;
  }

  .ws-about-fact::after {
    display: none;
  }

  .ws-about-fact:nth-child(odd) {
    border-right: 1px solid #dedbd5;
  }

  .ws-about-fact:nth-child(-n+2) {
    border-bottom: 1px solid #dedbd5;
  }

  .ws-about-fact__en {
    margin-bottom: 5px;

    font-size: 7px;
  }

  .ws-about-fact__label {
    font-size: 12px;
  }


  /* NOTE */

  .ws-about__note {
    grid-template-columns: 1fr;

    gap: 8px;

    margin-top: 10px;
    padding: 20px 19px;

    border-left-width: 2px;
  }

  .ws-about__note-label {
    font-size: 7px;
  }

  .ws-about__note-text {
    font-size: 10px;
    line-height: 1.85;
  }


  /* WORDPRESS */

  .ws-about__guide {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-top: 38px;
    padding: 29px 22px 31px;
  }

  .ws-about__guide-en {
    margin-bottom: 7px;

    font-size: 7px;
  }

  .ws-about__guide-title {
    font-size: 18px;
    line-height: 1.65;
  }

  .ws-about__guide-text {
    margin-top: 13px;

    font-size: 10.5px;
    line-height: 1.85;
  }

  .ws-about__guide-button {
    max-width: none;

    padding: 14px 18px;

    font-size: 10.5px;
  }

  .ws-about__guide-note {
    margin-top: 8px;

    font-size: 8px;
  }

}
/* =========================================================
   11 FAQ
========================================================= */

.ws-faq {
  width: 100%;
  padding: 95px 24px 105px;
  background: #ffffff;
}

.ws-faq__inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}


/* =========================================================
   TITLE DECORATION OFF
========================================================= */

.ws-faq .ws-content-title::before,
.ws-faq .ws-content-title::after,
.ws-faq h2::before,
.ws-faq h2::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}


/* =========================================================
   FAQ GRID
========================================================= */

.ws-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ws-faq-card {
  padding: 29px 30px 31px;

  border: 1px solid #dedbd5;
  background: #faf9f7;
}

.ws-faq-card__question {
  display: grid;
  grid-template-columns: 27px 1fr;
  align-items: start;

  gap: 11px;

  margin: 0;
  padding: 0 0 20px;

  border-bottom: 1px solid #dedbd5;

  color: #2f2e2b !important;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.ws-faq-card__q {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  margin-top: 1px;

  border: 1px solid #93836a;
  border-radius: 50%;

  color: #786852 !important;

  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.ws-faq-card__answer {
  display: grid;
  grid-template-columns: 27px 1fr;
  align-items: start;

  gap: 11px;

  padding-top: 20px;
}

.ws-faq-card__a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  margin-top: 1px;

  background: #2f2e2b;

  color: #ffffff !important;

  border-radius: 50%;

  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.ws-faq-card__answer p {
  margin: 0;
  padding: 0;

  color: #625e57 !important;

  font-size: 11.5px;
  line-height: 1.95;
}


/* =========================================================
   PRODUCT CTA
========================================================= */

.ws-faq__cta {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr);

  align-items: center;

  gap: 55px;

  margin-top: 55px;
  padding: 48px 52px;

  background: #2f2e2b;
}

.ws-faq__cta-content,
.ws-faq__cta-link {
  min-width: 0;
}

.ws-faq__cta-en {
  margin: 0 0 10px;
  padding: 0;

  color: rgba(255, 255, 255, 0.5) !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.19em;
}

.ws-faq__cta-title {
  margin: 0;
  padding: 0;

  color: #ffffff !important;

  font-size: 22px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.035em;
}

.ws-faq__cta-text {
  margin: 18px 0 0;
  padding: 0;

  color: rgba(255, 255, 255, 0.72) !important;

  font-size: 11px;
  line-height: 1.9;
}

.ws-faq__cta-link {
  text-align: center;
}

.ws-faq__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  width: 100%;
  max-width: 340px;

  padding: 16px 24px;

  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;

  background: transparent !important;
  color: #ffffff !important;

  text-decoration: none !important;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.ws-faq__cta-button,
.ws-faq__cta-button * {
  color: #ffffff !important;
}

.ws-faq__cta-button:hover {
  background: #ffffff !important;
  color: #2f2e2b !important;
}

.ws-faq__cta-button:hover * {
  color: #2f2e2b !important;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-faq__grid {
    grid-template-columns: 1fr;
  }

  .ws-faq__cta {
    grid-template-columns: 1fr;
    gap: 30px;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-faq {
    padding: 60px 15px 68px;
  }


  /* FAQ */

  .ws-faq__grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .ws-faq-card {
    padding: 23px 20px 24px;
  }

  .ws-faq-card__question {
    grid-template-columns: 23px 1fr;
    gap: 9px;

    padding-bottom: 15px;

    font-size: 13px;
    line-height: 1.7;
  }

  .ws-faq-card__q {
    width: 21px;
    height: 21px;

    font-size: 8px;
  }

  .ws-faq-card__answer {
    grid-template-columns: 23px 1fr;
    gap: 9px;

    padding-top: 15px;
  }

  .ws-faq-card__a {
    width: 21px;
    height: 21px;

    font-size: 8px;
  }

  .ws-faq-card__answer p {
    font-size: 10.5px;
    line-height: 1.85;
  }


  /* CTA */

  .ws-faq__cta {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-top: 38px;
    padding: 29px 22px 31px;
  }

  .ws-faq__cta-en {
    margin-bottom: 7px;
    font-size: 7px;
  }

  .ws-faq__cta-title {
    font-size: 18px;
    line-height: 1.65;
  }

  .ws-faq__cta-text {
    margin-top: 13px;

    font-size: 10.5px;
    line-height: 1.85;
  }

  .ws-faq__cta-button {
    max-width: none;

    padding: 14px 18px;

    font-size: 10.5px;
  }

}
/* =========================================================
   01 QUALITY CONTROL
   REAL PHOTO UPDATE
========================================================= */

.ws-quality__image img {
  display: block;

  width: 100%;
  aspect-ratio: 3 / 2;

  object-fit: cover;
  object-position: center;

  background: #f3f1ed;
}

.ws-quality__image-note {
  margin: 9px 0 0;
  padding: 0;

  color: #8c877f !important;

  font-size: 10px;
  line-height: 1.6;
}


/* =========================================================
   02 OUR SPECIALIST
   STAFF PROFILE
========================================================= */

.ws-specialist__profile {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items: center;

  gap: 48px;

  margin: 0 0 24px;
  padding: 34px;

  border: 1px solid #dedbd5;

  background: #ffffff;
}

.ws-specialist__profile-image,
.ws-specialist__profile-content {
  min-width: 0;
}


/* -------------------------
   PROFILE PHOTO
------------------------- */

.ws-specialist__profile-image img {
  display: block;

  width: 100%;
  aspect-ratio: 3 / 2;

  object-fit: cover;
  object-position: center 31%;

  background: #f3f1ed;
}


/* -------------------------
   PROFILE TEXT
------------------------- */

.ws-specialist__profile-en {
  margin: 0 0 10px;
  padding: 0;

  color: #968e84 !important;

  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
}

.ws-specialist__profile-name {
  margin: 0;
  padding: 0;

  color: #2f2e2b !important;

  font-size: 26px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.ws-specialist__profile-position {
  margin: 8px 0 0;
  padding: 0;

  color: #5f5a53 !important;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}

.ws-specialist__profile-text {
  margin: 23px 0 0;
  padding: 0;

  color: #625e57 !important;

  font-size: 12px;
  line-height: 2;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

  .ws-specialist__profile {
    grid-template-columns: 1fr;

    gap: 28px;

    padding: 28px;
  }

  .ws-specialist__profile-image {
    width: 100%;
    max-width: 620px;

    margin: 0 auto;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  /* QUALITY CONTROL */

  .ws-quality__image img {
    aspect-ratio: 4 / 3;

    object-position: center;
  }

  .ws-quality__image-note {
    margin-top: 7px;

    font-size: 9px;
  }


  /* SPECIALIST PROFILE */

  .ws-specialist__profile {
    grid-template-columns: 1fr;

    gap: 21px;

    margin-bottom: 14px;
    padding: 19px;
  }

  .ws-specialist__profile-image {
    width: 100%;
  }

  .ws-specialist__profile-image img {
    aspect-ratio: 4 / 3;

    object-position: center 28%;
  }

  .ws-specialist__profile-en {
    margin-bottom: 7px;

    font-size: 7px;
    letter-spacing: 0.16em;
  }

  .ws-specialist__profile-name {
    font-size: 21px;
  }

  .ws-specialist__profile-position {
    margin-top: 5px;

    font-size: 10.5px;
  }

  .ws-specialist__profile-text {
    margin-top: 15px;

    font-size: 10.5px;
    line-height: 1.9;
  }

}
/* =========================================================
   05 CHOOSE YOUR TYPE
   IMAGE ADDITION
========================================================= */

.ws-choice-card__image {
  width: 100%;
  margin: 0 0 28px;
  overflow: hidden;

  background: #ffffff;
}

.ws-choice-card__image img {
  display: block;

  width: 100%;
  aspect-ratio: 4 / 3;

  object-fit: contain;
  object-position: center;

  background: #ffffff;
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  .ws-choice-card__image {
    margin-bottom: 22px;
  }

  .ws-choice-card__image img {
    aspect-ratio: 1 / 1;
  }

}
/* =====================================================
   05 CHOOSE YOUR TYPE
   SP：商品画像を少しコンパクトに
===================================================== */
@media screen and (max-width: 767px) {

  .ws-choice-card__image {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

}

/* =========================================================
   GOLD STONE WHITE SAGE
   01〜03 SP LAYOUT FIX
   PCには影響させない
========================================================= */

@media screen and (max-width: 767px) {

  /* =====================================================
     COMMON CONTENT TYPOGRAPHY
  ===================================================== */

  .ws-footer-content .ws-section-kicker {
    margin-bottom: 10px;

    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.18em;
  }

  .ws-footer-content .ws-content-title {
    font-size: 23px;
    line-height: 1.55;
    letter-spacing: 0.035em;
  }

  .ws-footer-content .ws-content-lead {
    margin-top: 15px;

    font-size: 12px;
    line-height: 1.9;
  }

  .ws-footer-content .ws-content-body {
    margin-top: 22px;
  }

  .ws-footer-content .ws-content-body p {
    margin-bottom: 14px;

    font-size: 11px;
    line-height: 1.9;
  }

  .ws-footer-content .ws-content-heading {
    margin-bottom: 30px;
  }

  .ws-pc-only {
    display: none !important;
  }

  .ws-sp-only {
    display: block !important;
  }


  /* =====================================================
     01 QUALITY CONTROL
  ===================================================== */

  .ws-quality {
    padding: 60px 16px 66px;
  }

  .ws-quality__inner {
    display: flex;
    flex-direction: column;

    gap: 28px;

    width: 100%;
  }

  .ws-quality__image {
    width: 100%;
    order: 2;
  }

  .ws-quality__content {
    width: 100%;
    order: 1;
  }

  .ws-quality__image img {
    width: 100%;
    height: auto;

    aspect-ratio: 3 / 2;

    object-fit: cover;
    object-position: center;
  }

  .ws-quality__image-note {
    margin-top: 7px;

    font-size: 9px;
    line-height: 1.6;
  }


  /* =====================================================
     02 OUR SPECIALIST
  ===================================================== */

  .ws-specialist {
    padding: 60px 15px 68px;
  }

  .ws-specialist__inner {
    width: 100%;
  }

  .ws-specialist__profile {
    display: grid;
    grid-template-columns: 1fr;

    gap: 21px;

    margin-bottom: 18px;
    padding: 19px;
  }

  .ws-specialist__profile-image,
  .ws-specialist__profile-content {
    width: 100%;
  }

  .ws-specialist__profile-image img {
    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;
    object-position: center 28%;
  }

  .ws-specialist__profile-name {
    font-size: 21px;
  }

  .ws-specialist__profile-position {
    font-size: 10.5px;
  }

  .ws-specialist__profile-text {
    margin-top: 15px;

    font-size: 10.5px;
    line-height: 1.9;
  }


  /* 重要：3列 → 1列 */
  .ws-specialist__grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .ws-specialist__card {
    width: 100%;

    padding: 24px 21px 25px;
  }

  .ws-specialist__number {
    margin-bottom: 12px;

    font-size: 8px;
  }

  .ws-specialist__title {
    margin-bottom: 10px;

    font-size: 16px;
    line-height: 1.55;
  }

  .ws-specialist__text {
    font-size: 11px;
    line-height: 1.85;
  }


  /* =====================================================
     03 FOUR GRADES
  ===================================================== */

  .ws-grades {
    padding: 60px 15px 68px;
  }

  .ws-grades__inner {
    width: 100%;
  }

  /* 重要：4列 → 1列 */
  .ws-grades__grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .ws-grade-card {
    width: 100%;
    min-height: 0;

    padding: 24px 21px 25px;
  }

  .ws-grade-card__head {
    margin-bottom: 14px;
  }

  .ws-grade-card__rank {
    margin-bottom: 6px;

    font-size: 8px;
  }

  .ws-grade-card__title {
    font-size: 17px;
    line-height: 1.5;
  }

  .ws-grade-card__text {
    font-size: 11px;
    line-height: 1.85;
  }


  /* =====================================================
     04 PREMIUM STANDARD
     現在の良い状態を維持
  ===================================================== */

  .ws-premium__inner {
    width: 100%;
  }

}

/* =====================================================
   07 HOW TO USE - MAIN VISUAL
====================================================== */

.ws-howto__visual {
  width: 100%;
  max-width: 1040px;
  margin: 46px auto 54px;
}

.ws-howto__visual img {
  display: block;
  width: 100%;
  height: auto;
}


/* SP */
@media screen and (max-width: 767px) {

  .ws-howto__visual {
    margin: 30px auto 34px;
  }

  .ws-howto__visual img {
    width: 100%;
    height: auto;
  }

}
/* =========================================================
   05 CHOOSE YOUR TYPE
   SP LAYOUT FIX
   PCには影響させない
========================================================= */

@media screen and (max-width: 767px) {

  .ws-choice {
    padding: 60px 15px 66px !important;
  }

  .ws-choice__inner {
    width: 100% !important;
    max-width: none !important;
  }

  /* 2列になっている状態を強制的に1列へ戻す */
  .ws-choice__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 10px !important;

    width: 100% !important;
  }

  .ws-choice-card {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;

    padding: 27px 23px 26px !important;
  }

  /* 写真 */
  .ws-choice-card__image {
    width: 90% !important;

    margin: 0 auto 22px !important;
  }

  .ws-choice-card__image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  /* テキスト */
  .ws-choice-card__head {
    width: 100% !important;
    margin-bottom: 17px !important;
  }

  .ws-choice-card__en {
    margin-bottom: 6px !important;

    font-size: 7px !important;
  }

  .ws-choice-card__title {
    font-size: 20px !important;
    line-height: 1.45 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .ws-choice-card__text {
    width: 100% !important;

    margin-bottom: 13px !important;

    font-size: 11px !important;
    line-height: 1.9 !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .ws-choice-card__point {
    width: 100% !important;

    margin-top: 8px !important;
    padding-top: 17px !important;
  }

  .ws-choice-card__point-text {
    font-size: 11px !important;
    line-height: 1.8 !important;
  }

  /* POINT */
  .ws-choice-note {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 7px !important;

    width: 100% !important;

    margin-top: 13px !important;
    padding: 20px 19px !important;
  }

}