@charset "UTF-8";
/* ==================================================================
 *  collection
 * ================================================================== */
#collection {
  margin-top: 100px;
  @media (min-width: 768px) {
    margin-top: 70px;
  }
}
.collection_main.patient {
  margin-top: 130px;
}
.collection_main,
.category_main,
.christina-series {
  .collection_image {
    margin: 100px auto 20px;
    max-width: 660px;
    img {
      max-height: 100vw;
      margin: auto;
    }
    &.christina-series {
      margin: 100px auto 60px;
      border-radius: 6px;
      overflow: hidden;
      display: grid;
      align-items: center;
      @media (max-width: 575px) {
        margin-bottom: 30px;
        border-radius: 0;
      }
      span {
        grid-area: 1 / -1;
        font-size: 1.625rem;
        font-weight: bold;
        line-height: 130%;
        letter-spacing: 2.6px;
        color: #fff;
        text-align: center;
        padding-top: 10px;
        @media (max-width: 575px) {
          font-size: 1rem;
        }
      }
      img {
        grid-area: 1 / -1;
      }
    }
  }
  .collection_description {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
    + .collection_series {
      margin-top: 60px;
      .container {
        max-width: 740px;
      }
    }
    h1 {
      font-size: 1.25rem;
      font-weight: 500;
      -webkit-font-smoothing: antialiased;
      letter-spacing: 0.05em;
      margin-bottom: 20px;
      span {
        display: block;
        color: var(--secondary);
        font-weight: normal;
        font-size: 0.75rem;
        letter-spacing: 0.04em;
      }
    }
    .tag_list {
      justify-content: center;
      @media (max-width: 575px) {
        justify-content: flex-start;
      }
    }
    .description {
      > h2 {
        border-bottom: 2px solid #E5E5E5;
        margin: 3em 0 1em;
        padding-bottom: 0.5em;
        font-weight: bolder;
        -webkit-font-smoothing: antialiased;
        font-size: 0.96875rem;
      }
      ul {
        list-style: disc;
        padding-left: 2em;
        font-size: 0.90625rem;
        li {
          margin-bottom: 10px;
        }
      }
      img {
        margin: 30px auto;
      }
      p {
        font-size: 0.90625rem;
        margin-top: 1.5em;
        b,
        strong {
          font-weight: bolder;
          -webkit-font-smoothing: antialiased;
        }
      }
      a:not(.link_btn):not(.more_btn) {
        color: var(--main);
        text-decoration: underline;
      }
      .more_btn {
        font-family: 'system-ui', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
        font-weight: 300;
      }
    }
    .feature {
      border: 5px solid #F4F4F4;
      padding: 20px 20px 10px;
      margin: 30px auto;
      h2 {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 1.2rem;
        letter-spacing: 0.05em;
        margin-bottom: 25px;
        font-weight: bolder;
        -webkit-font-smoothing: antialiased;
        span {
          font-family: 'system-ui', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
          font-size: 12px;
          font-weight: 500;
          -webkit-font-smoothing: antialiased;
          letter-spacing: 0.03em;
        }
      }
      ol {
        font-size: 0.90625rem;
        li {
          margin-bottom: 10px;
          border-bottom: 1px solid #E5E5E5;
          background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%3E%0A%20%20%3Cg%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_118%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%20118%22%20fill%3D%22%23fff%22%20stroke%3D%22%23d0d0d0%22%20stroke-width%3D%220.8%22%3E%0A%20%20%20%20%3Crect%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%222%22%20stroke%3D%22none%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%220.4%22%20y%3D%220.4%22%20width%3D%2214.2%22%20height%3D%2214.2%22%20rx%3D%221.6%22%20fill%3D%22none%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_84%22%20data-name%3D%22%E3%83%91%E3%82%B9%2084%22%20d%3D%22M189.882%2C335.319l-5.309%2C5.31-1.978-2a.593.593%2C0%2C0%2C0-.845%2C0%2C.6.6%2C0%2C0%2C0%2C0%2C.851l2.4%2C2.429a.6.6%2C0%2C0%2C0%2C.425.177h0a.594.594%2C0%2C0%2C0%2C.42-.177l5.734-5.738a.6.6%2C0%2C0%2C0%2C0-.851A.593.593%2C0%2C0%2C0%2C189.882%2C335.319Z%22%20transform%3D%22translate(-178.385%20-331.142)%22%20fill%3D%22%23343434%22%2F%3E%0A%3C%2Fsvg%3E%0A") no-repeat left top;
          line-height: 1.3;
          padding: 0 0 10px 1.6em;
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
  .collection_bnr {
    max-width: 700px;
    margin: 50px auto;
    padding: 0 20px;
    .bnr_list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }
  }
  + #product {
    margin-top: 50px;
  }
}

.subscription_description {
  margin: 25px auto 0;
  max-width: 660px;
  h2 {
    color: #DC695E;
    font-size: 1.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto 30px;
    &::after {
      content: "";
      width: 18px;
      height: 2px;
      background: #DC695E;
      margin-top: 16px;
    }
  }
  .subscription_read {
    padding: 0 20px;
    > p {
      font-size: 1rem;
      margin-top: 1.5em;
      color: #5c5c5c;
      @media (max-width: 575px) {
        font-size: 0.8125rem;
      }
      b,
      strong {
        font-weight: bolder;
        -webkit-font-smoothing: antialiased;
      }
    }
  }
  .subscription_note {
    padding: 1em;
    background: #F8F8F8;
    margin: 24px 0;
    color: var(--secondary);
    font-size: 0.875rem;
    font-weight: bolder;
    -webkit-font-smoothing: antialiased;
    @media (max-width: 575px) {
      font-size: 0.8125rem;
    }
    b,
    strong {
      color: #DC695E;
    }
  }
  .benefit,
  .feature {
    background: #F9F0F1;
    padding: 40px 60px 0;
    overflow: hidden;
    @media (max-width: 575px) {
      padding: 28px 18px;
    }
    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      @media (max-width: 575px) {
        gap: 14px;
      }
      li {
        background: #fff;
        padding: 12px 18px 18px;
        color: #5c5c5c;
        font-size: 0.9375rem;
        line-height: 1.6;
        @media (max-width: 575px) {
          padding: 9px 13px 13px;
          font-size: 0.75rem;
        }
        h3 {
          font-size: 1.25rem;
          font-weight: 500;
          color: #DC695E;
          margin-bottom: 6px;
          line-height: 1.4;
          background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2249%22%20viewBox%3D%220%200%2048%2049%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M21.1242%2032.2555L33.9162%2019.4635L32.5002%2018.0475L21.1242%2029.4235L15.4242%2023.7235L14.0082%2025.1395L21.1242%2032.2555ZM24.0062%2042.4395C21.5182%2042.4395%2019.1782%2041.9675%2016.9862%2041.0235C14.7955%2040.0781%2012.8895%2038.7955%2011.2682%2037.1755C9.64683%2035.5555%208.36349%2033.6515%207.41816%2031.4635C6.47283%2029.2755%206.00016%2026.9361%206.00016%2024.4455C6.00016%2021.9548%206.47283%2019.6148%207.41816%2017.4255C8.36216%2015.2348%209.64283%2013.3288%2011.2602%2011.7075C12.8775%2010.0861%2014.7822%208.80279%2016.9742%207.85745C19.1662%206.91212%2021.5062%206.43945%2023.9942%206.43945C26.4822%206.43945%2028.8222%206.91212%2031.0142%207.85745C33.2048%208.80145%2035.1108%2010.0828%2036.7322%2011.7015C38.3535%2013.3201%2039.6368%2015.2248%2040.5822%2017.4155C41.5275%2019.6061%2042.0002%2021.9455%2042.0002%2024.4335C42.0002%2026.9215%2041.5282%2029.2615%2040.5842%2031.4535C39.6402%2033.6455%2038.3575%2035.5515%2036.7362%2037.1715C35.1148%2038.7915%2033.2108%2040.0748%2031.0242%2041.0215C28.8375%2041.9681%2026.4982%2042.4408%2024.0062%2042.4395Z%22%20fill%3D%22%23DC695E%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat top left;
          background-size: 45px;
          padding-top: 50px;
          @media (max-width: 575px) {
            font-size: 1rem;
            background-size: 36px;
            padding-top: 42px;
          }
        }
      }
    }
    .note {
      font-size: 0.75rem;
      color: #5c5c5c;
      line-height: 1.667;
      margin: 30px 0;
    }
  }
  .limit,
  .change {
    padding: 24px 20px;
    @media (max-width: 575px) {
      padding: 36px 12px 24px;
    }
    > p {
      font-size: 0.9375rem;
      margin-top: 1.5em;
      color: #5c5c5c;
      @media (max-width: 575px) {
        font-size: 0.8125rem;
      }
      b,
      strong {
        font-weight: bolder;
        -webkit-font-smoothing: antialiased;
      }
    }
    .note {
      font-size: 0.75rem;
      margin-top: 24px;
      color: #5c5c5c;
      @media (max-width: 575px) {
        margin-top: 10px;
      }
    }
    .subscription_note {
      font-weight: normal;
      h3 {
        text-align: center;
        font-weight: 600;
        color: #5c5c5c;
      }
    }
  }

  .question {
    padding: 24px 20px 0;
    margin: 0 auto;
    @media (max-width: 575px) {
      padding: 36px 12px 0;
    }
    details {
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
      padding: 15px 0;
      &[open] {
        summary::after {
          transform: rotate(-45deg);
        }
        .question_answer {
          padding: 10px 25px 0 30px;
          font-size: 0.875rem;
          line-height: 1.6;
          display: flex;
          color: #333;
          &::before {
            content: "A. ";
            font-size: 110%;
            letter-spacing: 0.05em;
            margin-left: -1.3em;
            margin-right: 5px;
          }
          a {
            color: var(--main);
            text-decoration: underline;
          }
        }
      }
    }
    summary {
      display: block;
      width: 100%;
      padding: 0 25px 0 2em;
      font-size: 0.9375rem;
      position: relative;
      color: #333;
      &::before {
        content: "Q. ";
        font-size: 110%;
        letter-spacing: 0.05em;
        margin-left: -1.3em;
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        width: 10px;
        height: 10px;
        margin: auto 0;
        border-top: 1px solid var(--secondary);
        border-right: 1px solid var(--secondary);
        transform: rotate(135deg);
      }
      &::-webkit-details-marker {
        display: none;
      }
    }
  }
  .collection_series {
    margin: 50px auto;
  }
}

.collection_series {
  margin: -20px auto 50px;
  overflow: hidden;
  max-width: 740px;
  .container {
    @media (max-width: 575px) {
      padding: 0;
    }
    h2 {
      margin-bottom: 0;
      img {
        margin: 0 auto;
      }
    }
    .more_btn {
      width: calc(100% - 40px);
      font-weight: 300;
      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.5%2011H12V4.5C12%204.22%2011.78%204%2011.5%204C11.22%204%2011%204.22%2011%204.5V11H4.5C4.22%2011%204%2011.22%204%2011.5C4%2011.78%204.22%2012%204.5%2012H11V18.5C11%2018.78%2011.22%2019%2011.5%2019C11.78%2019%2012%2018.78%2012%2018.5V12H18.5C18.78%2012%2019%2011.78%2019%2011.5C19%2011.22%2018.78%2011%2018.5%2011Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.6%22%2F%3E%0A%3C%2Fsvg%3E%0A") no-repeat 95% center;
    }
    .series_menu {
      display: grid;
      gap: 30px 15px;
      grid-template-columns: repeat(auto-fit, 210px);
      max-width: 660px;
      margin: 30px auto;
      @media (max-width: 575px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 20px;
        gap: 10px;
      }
      li {
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
        a {
          img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            max-height: 146px;
            @media (max-width: 575px) {
              max-height: 114px;
            }
          }
          h3 {
            padding: 20px 20px 28px;
            font-family: 'Figtree', sans-serif;
            font-size: 1.0625rem;
            font-weight: 500;
            line-height: 130%;
            letter-spacing: 0.75px;
            @media (max-width: 575px) {
              padding: 15px;
            }
            span {
              display: block;
              color: var(--secondary);
              font-size: 0.625rem;
            }
          }
        }
      }
    }
    .series_list {
      overflow: hidden;
      h3 {
        border-bottom: 2px solid #eddad9;
        padding-bottom: 0.5em;
        font-size: 0.96875rem;
        width: calc(100% - 40px);
        margin: 30px auto -30px;
        a {
          display: block;
          position: relative;
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            margin: auto 0;
            border-top: 1px solid var(--secondary);
            border-right: 1px solid var(--secondary);
            transform: rotate(45deg);
          }
        }
      }
      .series_product {
        display: flex;
        gap: 0 15px;
        overflow-x: auto;
        padding: 40px 0 10px 20px;
        &:empty::before {
          content: "該当の商品はありません";
          color: var(--secondary);
          font-size: 90%;
          margin-left: 20px;
        }
        li {
          display: flex;
          min-width: 150px;
          position: relative;
          width: 150px;
          height: auto;
          margin: 0 0 10px;
          transition: all 0.3s linear;
          &:last-child {
            margin-right: 20px;
          }
          @media (hover: hover) {
            &:hover {
              box-shadow: none;
              transform: translateY(5px);
            }
          }
          @media (hover: none) {
            &:active {
              box-shadow: none;
            }
          }
          > a {
            background: #f9f1f1;
            border-radius: 4px;
            height: 100%;
            overflow: hidden;
            @media (hover: hover) {
              &:hover {
                opacity: 1;
              }
            }
            @media (hover: none) {
              &:active {
                opacity: 1;
              }
            }
          }
          .cm-icons {
            background: none;
            right: 10px;
            top: 10px;
            padding-top: 0;
            z-index: 999;
            position: absolute;
          }
          .product_image {
            border-radius: 4px 4px 0 0;
            overflow: hidden;
            position: relative;
            background: #FCFCFC;
            display: grid;
            aspect-ratio: 1 / 1;
            .cm-icon {
              background: none;
              right: 8px;
              top: 8px;
              padding-top: 0;
            }
            img {
              grid-area: 1 / -1;
              object-fit: contain;
            }
            &::before {
              content: "";
              background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(250, 250, 250, 0.5) 70%, #fafafa 100%);
              mix-blend-mode: darken;
              grid-area: 1 / -1;
            }
            &.soldout::after {
              content: "在庫なし";
              background: rgba(246, 246, 246, 0.7);
              color: var(--secondary);
              font-size: 0.875rem;
              display: grid;
              grid-area: 1 / -1;
              place-content: center;
              z-index: 2;
            }
          }
          .product_description {
            padding: 12px;
            h4 {
              font-size: 0.875rem;
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              margin-bottom: 10px;
            }
            .price {
              margin-top: auto;
              font-size: 90%;
              display: flex;
              flex-wrap: wrap;
              align-items: baseline;
              s {
                order: -1;
                width: 100%;
              }
              &.note {
                font-size: 80%;
              }
            }
            .read {
              font-size: 0.75rem;
              margin-top: 4px;
              color: var(--secondary);
              display: -webkit-box;
              overflow: hidden;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}

section.christina-series {
  margin: 30px auto 60px;
  .collection_series {
    margin-top: 50px;
    .container {
      padding: 0;
    }
    .series_menu {
      @media (max-width: 575px) {
        padding: 0;
      }
    }
  }
  .christina {
    max-width: 660px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}
.collection_product {
  background: #f9f1f1;
  padding: 25px 0;
  border-top: 1px solid #e5e1e1;
  overflow: hidden;
  .container {
    @media (max-width: 575px) {
      padding: 0 15px;
    }
  }
  + .question {
    border-top: 1px solid #e5e1e1;
  }
  .product_sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 20px;
    .sort_select {
      position: relative;
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 4px;
      &::after {
        content: '';
        width: 6px;
        height: 6px;
        border: 0;
        border-bottom: solid 1px #2A2E3B;
        border-right: solid 1px #2A2E3B;
        transform: rotate(45deg);
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -4px;
        pointer-events: none;
      }
      select {
        height: 35px;
        line-height: 35px;
        appearance: none;
        outline: none;
        padding: 0 20px 0 8px;
        transform: scale(0.85);
        color: var(--secondary);
        font-size: 16px;
        cursor: pointer;
        background: transparent;
        &:disabled {
          background: rgba(247, 240, 240, 0.7);
          color: #af9391;
          z-index: 2;
          position: relative;
        }
      }
    }
  }
  .product_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: 100%;
    .product_empty {
      padding: 50px 0 60px;
      text-align: center;
      width: 100%;
    }
    .product {
      margin: 0 auto 20px;
      padding: 0;
      @media (min-width: 801px) {
        width: calc(100% / 4 - 18px);
        margin: 0 12px 24px;
        &:nth-child(4n + 1) {
          margin-left: 0;
        }
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
      @media (max-width: 800px) and (min-width: 641px) {
        width: calc(100% / 3 - 14px);
        margin: 0 10px 20px;
        &:nth-child(3n + 1) {
          margin-left: 0;
        }
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
      @media (max-width: 640px) {
        width: calc(50% - 6px);
        margin: 0 0 12px;
        &:nth-child(odd) {
          margin-right: auto;
        }
        &:nth-child(even) {
          margin-left: auto;
        }
      }
      .cm-icons {
        transform: scale(1.2);
        transform-origin: top right;
      }
    }
  }
}

#product .collection_series .container .series_list .series_product li {
  flex: 0 0 20%;
  @media (max-width: 575px) {
    flex: 0 0 calc(100% / 3);
  }
}

/* ==================================================================
 *  category collection
 * ================================================================== */
.category_main {
  padding: 40px 0;
  h1 {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: clamp(1.375rem, calc(1rem + 2vw), 1.5rem);
    letter-spacing: 0.05em;
    margin-bottom: 25px;
    span {
      font-family: 'system-ui', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
      font-size: 12px;
      font-weight: 500;
      -webkit-font-smoothing: antialiased;
      letter-spacing: 0.03em;
    }
  }
  .collection_description {
    padding: 0 20px;
    &.ingredient {
      h2 {
        border-bottom: 2px solid var(--main);
        margin: 16px 0;
        padding: 8px 0;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
        font-size: 1.375rem;
        line-height: 1.45;
        @media (max-width: 575px) {
          font-size: 1.25rem;
          line-height: 1.35;
        }
        span {
          font-weight: bold !important;
          -webkit-font-smoothing: antialiased;
        }
      }
      h3 {
        background: linear-gradient(90deg, #E48C87 0 33%, #eee 33%) no-repeat bottom left;
        background-size: 100% 2px;
        padding-bottom: 8px;
        margin-top: 30px;
        margin-bottom: 16px;
        font-weight: 600;
        font-size: 1.125rem;
        line-height: 1.389;
        @media (max-width: 575px) {
          font-size: 1.14rem;
          line-height: 1.563;
        }
        span {
          font-weight: 600 !important;
          -webkit-font-smoothing: antialiased;
        }
      }
      h4 {
        display: flex;
        align-items: center;
        gap: 5px;
        border-bottom: 1px dashed #E0E0E0;
        margin: 16px 0;
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.563;
        padding: 4px 0;
        &::before {
          content: "";
          width: 12px;
          height: 12px;
          background: #E48C87;
          border-radius: 100%;
          flex-shrink: 0;
        }
        span {
          font-weight: 600 !important;
        }
      }
    }
  }
  .tag_list {
    margin-bottom: 0;
  }
  + .collection_product {
    padding-top: 10px;
  }
}