@charset "UTF-8";

:root {
  --spCol: var( --col_MypreBlue );
}

.block-pagecategory-page-list--page {
  font-weight: 600;
}

@media screen and (max-width: 640px) { /*-- SP --*/
  .block-pagecategory-caption {
    .block-pagecategory-caption--text {
      margin: 0;
    }
  }
  .block-pagecategory--pager {
    display: none;
  }

  .block-pagecategory-page-list--frame {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 36px;
    margin: 54px 0 0;

    .block-pagecategory-page-list--page {
      width: 100%;
    }

    .block-pagecategory-page-list--page-image {
      margin-bottom: 8px;
    }

    .block-pagecategory-page-list--date {
      display: none;
    }
  }

  .wrapper > main.pane-main {
    position: relative;
    padding-bottom: 16px;
  }
  .page-block-sns {
    position: absolute;
    bottom: 8px;
    left: 12px;
    margin: 0 0 8px auto;

    .tx-box > ul {
      display: flex;
      flex-direction: row;
      justify-content: end;
      gap: 10px;
      height: 20px;

      li {
        position: relative;

        .fb_iframe_widget {
          line-height: 1;
        }
      }
    }
  }

  /*---- 記事ページ ----*/
  .block-hero {
    margin: 0 -12px;
    padding: 0;
    width: 100vw;

    img {
      width: 100%;
      aspect-ratio: 1 / 1;
    }
  }

  .block-lead {
    margin: 20px 0;
    font-feature-settings: "palt";
    line-height: 2;
    font-size: 1.4rem;
    text-align: center;
  }

  .block-series {
    margin: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 64px;

    .block-series-item {

      .block-series-item--title {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 0 -12px 16px;
        padding: 80px 0 24px;
        color: var( --themeColor );
        text-align: center;
        line-height: 1;

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 16px;
          transform: translateX(-50%);
          left: 50%;
          width: 48px;
          aspect-ratio: 1 / 1;
          background: transparent no-repeat 0 0 /contain;
        }
        section:nth-child(1) &::before { background-image: url("/img/usr/@page/special/series_title--ico_r01.webp"); }
        section:nth-child(2) &::before { background-image: url("/img/usr/@page/special/series_title--ico_r02.webp"); }
        section:nth-child(3) &::before { background-image: url("/img/usr/@page/special/series_title--ico_r03.webp"); }

        span {
          line-height: 1.5;
          font-weight: 600;
          font-size: 1.6rem;
        }

        em {
          font-feature-settings: "palt";
          font-weight: 600;
          font-style: normal;
          font-size: 2.8rem;
        }
      }

      .block-series-item--body {
        margin: 0 auto;

        .block-series-item--mv {
          img {
            width: 100%;
          }
        }

        .block-series-item--desc {
          margin: 16px 0 42px;
          padding: 0 8px;
          text-align: center;
        }

        .block-series-item--feature {
          display: flex;
          flex-direction: column;
          gap: 32px;

          .feature-item {
            width: 100%;
                        display: flex;
            flex-direction: column;

            .feature-item--title {
              border: 1px solid var( --cl-heading );
              border-width: 1px 0;
              margin: 0 0 16px;
              padding: 6px 0;
              text-align: center;
              line-height: 1.5;
              font-weight: 600;
              font-size: 1.8rem;
            }

            .feature-item--image {
              flex-grow: 1;
              display: flex;
              gap: 8px;

              img {
                min-width: calc((100% - 8px) /2);
                padding: 5px;
                background: var( --col_paleGray );
                object-fit: contain;
              }
            }
          }
        }

        .block-series-item--lineup {
          margin-top: 42px;

          .lineup-title {
            margin: 0 auto 32px;
            padding: 0;
            text-align: center;

            span {
              display: inline-block;
              border-bottom: 1px solid var( --cl-heading );
              padding: 0 8px 8px;
              font-weight: 600;
              font-size: 2.2rem;
            }
          }

          .lineup-list {
            position: relative;
            display: flex;
            gap: 12px;
            flex-wrap: nowrap;
            margin: 0 -12px !important;
            max-width: unset;
            overflow-x: scroll;
            padding: 0 12px !important;
            scroll-snap-type: x mandatory;

            &:has(> :nth-child(3)) {
              gap: 8px;
              li {
                min-width: calc((100dvw - 28px) /1.75);
              }
            }

            li {
              min-width: calc((100% - 12px) /2);
              scroll-snap-align: center;

              .lineup-list-catch {
                margin: 0 0 4px;
                border-bottom: 1px solid var( --cl-heading );
                text-align: center;
                font-family: var( --ff-serif );
                font-weight: 600;
              }

              .block-thumbnail-h--goods {
                display: flex;
                flex-direction: column;
                gap: 8px;

                .block-thumbnail-h--goods-image {
                  padding: 5px;
                  background: var( --col_paleGray );
                }

                .block-thumbnail-h--goods-description {
                  display: flex;
                  flex-direction: column;
                  gap: 4px;

                  .block-thumbnail-h--goods-name {
                    font-weight: normal;
                    overflow: hidden;
                    display: -webkit-box;
                    line-height: 1.35;
                    font-size: 1.4rem !important;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    font-feature-settings: "palt";

                    a {
                      text-decoration: none;
                      line-height: 1.5;
                      font-size: 1.6rem;
                    }
                  }

                  .block-thumbnail-h--price-infos {
                    font-weight: 600;
                  }
                }
              }
            }
          }
        }

        .block-series-item--link {
          margin: 32px 0 0 ;
          text-align: center;

          a {
            height: unset;
            min-height: 50px;
            padding: 8px 16px;
            word-break: auto-phrase;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }
    }
  }
} /*-- /SP --*/

@media screen and (min-width: 641px) { /*-- PC --*/
  /*---- ページカテゴリー ----*/
  .page-pagecategory {
    .pane-main {
      padding: 0;
      width: var( --narrowW );
    }
  }

  .block-pagecategory-caption {
    text-align: center;
  }

  .block-pagecategory-caption--lead {
    margin: 20px 0 0;
    text-align: center;
  }

  .block-pagecategory--pager {
    display: none;
  }

  .block-pagecategory-page-list--frame {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 54px 0 0;

    .block-pagecategory-page-list--page {
      width: calc((100% - 32px) /2);
    }

    .block-pagecategory-page-list--page-image {
      margin-bottom: 8px;
    }

    .block-pagecategory-page-list--date {
      display: none;
    }
  }

  .pane-main {
    position: relative;
    padding-top: 24px;
  }

  .page-block-sns {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 0 8px auto;
    text-align: right;

    .tx-box > ul {
      display: flex;
      flex-direction: row;
      justify-content: end;
      gap: 10px;
      height: 20px;

      li {
        position: relative;

        .fb_iframe_widget {
          line-height: 1;
        }
      }
    }
  }

  /*---- 記事 ----*/
  .special-body {
    width: var( --wrapperW );
  }

  .block-hero {
    margin: 0;
    padding: 0;
  }

  .block-lead {
    margin: 20px 0;
    line-height: 2;
    font-family: var( --ff-serif );
    font-weight: 600;
    font-size: 1.8rem;
    text-align: center;
  }

  .block-series {
    display: flex;
    flex-direction: column;
    gap: 72px;
    margin: 32px auto 0;
    width: var( --wrapperW );
    .block-series-item {
      margin: 0;

      .block-series-item--title {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin: 0 0 40px;
        height: 112px;
        color: var( --themeColor );
        text-align: center;
        line-height: 1;

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 32px;
          width: 80px;
          aspect-ratio: 1 / 1;
          background: transparent no-repeat 0 0 /contain;
        }
        section:nth-child(1) &::before { background-image: url("/img/usr/@page/special/series_title--ico_r01.webp"); }
        section:nth-child(2) &::before { background-image: url("/img/usr/@page/special/series_title--ico_r02.webp"); }
        section:nth-child(3) &::before { background-image: url("/img/usr/@page/special/series_title--ico_r03.webp"); }

        span {
          font-weight: 600;
          font-size: 2rem;
        }

        em {
          padding-left: .1em;
          letter-spacing: .1em;
          font-weight: 600;
          font-size: 3.6rem;
        }
      }

      .block-series-item--body {
        margin: 0 auto;
        width: var( --contentW );

        .block-series-item--desc {
          margin: 32px 0;
          text-align: center;
        }

        .block-series-item--feature {
          display: flex;
          gap: 24px;

          .feature-item {
            width: 100%;
            display: flex;
            flex-direction: column;

            .feature-item--title {
              border: 1px solid var( --cl-heading );
              border-width: 1px 0;
              margin: 0 0 16px;
              padding: 8px 0;
              text-align: center;
              line-height: 1.5;
              font-weight: 600;
            }

            .feature-item--image {
              flex-grow: 1;
              display: flex;
              gap: 8px;

              img {
                min-width: calc((100% - 8px) /2);
                padding: 5px;
                background: var( --col_paleGray );
                object-fit: contain;
              }
            }
          }
        }

        .block-series-item--lineup {
          margin-top: 64px;

          .lineup-title {
            margin: 0 auto 36px;
            text-align: center;

            span {
              display: inline-block;
              border-bottom: 1px solid var( --cl-heading );
              padding: 0 8px 4px;
              font-weight: 600;
              font-size: 2.2rem;
            }
          }
        }

        .lineup-list {
          li {
            width: 100%;
            max-width: calc((100% - 48px) /3);

            .lineup-list-catch {
              margin: 0 0 12px;
              border-bottom: 1px solid var( --cl-heading );
              text-align: center;
              font-family: var( --ff-serif );
              font-weight: 600;
            }
          }
        }

        .block-series-item--link {
          margin: 42px 0 0 ;
          text-align: center;

          a {
            letter-spacing: 0;
          }
        }
      }
    }
  }
} /*-- /PC --*/