@charset "UTF-8";

/*---- 基本設定 ----*/
body {
  background: #fff !important;
}
main.pane-main {
  padding-bottom: 0;
}
.lp--scene-content {
  --sceneThemeColor: #ccc;
  --coloredSectionBgc: color-mix(in srgb, var( --sceneThemeColor ) 10%, transparent);
  --containerWidth: var( --wrapperW );
  --contentWidth: 1060px;
  --narrowWidth: 960px;
  margin: 0 !important;

  h1, h2, h3 {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: var( --ff-serif );
    background: none;
  }

  h1 {
    background: var( --col_paleGray );
  }

  a {
    opacity: 1;
    transition: .3s;

    &:has(img) {
      display: block;
      overflow: hidden;
    }

    &:hover {
      opacity: .7;
    }

    img {
      transition: .3s;

      a:hover & {
        scale: 101%;
      }
    }
  }

  img {
    vertical-align: bottom;
  }

  .lp--sections {
    .lp--section {
      &:nth-of-type(odd) {  box-shadow: 0 0 4px #00000010; }
      &:nth-of-type(even) { background: var( --coloredSectionBgc ); }
    }
  }

  a.btn-lnk { /*-- リンクボタン --*/
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;

    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 12px;
      height: 12px;
      top: calc(50% - 6px);
      right: 20px;
      border: 1px solid #fff;
      border-width: 2px 2px 0 0;
      transform: rotate(45deg);
      opacity: 0;
      transition: .3s;
    }

    &[target*="_blank"] {
      &::before {
        content: "";
        position: absolute;
        display: block;
        width: 18px;
        height: 2px;
        top: calc(50% + 1px);
        right: 18px;
        transform: rotate(-45deg);
        background: #fff;
        opacity: 0;
        transition: .3s;
      }
      &::after {
        transform: rotate(0deg);
        margin: 0;
        mask-image: none;
        background: none !important;
      }
    }

    &:hover {
      &::before {
        right: 15px;
        opacity: 1;
      }
      &::after {
        right: 16px;
        opacity: 1;
      }
    }

    &.prime {
      color: #fff;
      background: var( --sceneThemeColor );
    }

    &.second {
      border: 1px solid  var( --sceneThemeColor );
      color: var( --sceneThemeColor );
      background: #fff;

      &::before {
        background: var( --sceneThemeColor );
      }
      &::after {
        border-color: var( --sceneThemeColor );
      }
    }
  }
}

/*---- グロナビなし ----*/
.block-gnav {
  display: none;
}

#header-news {
  display: none;
}

/*---- メインビジュアル（共通） ----*/
.lp--heroimage {
  margin: 0 auto;
  aspect-ratio: 5 / 6;
}

/*---- リード（共通） ----*/
.lp--lead .lp--lead-txt {
  text-align: center;
  color: #666;
}

/*---- 基本レイアウト設定（共通） ----*/
.lp--section {
  > div {
    margin: 0 auto;
  }

  h2 {
    display: flex;
    justify-content: center;
    align-items: center;

    &::before,
    &::after {
      content: "";
      display: block;
      margin: 0 8px;
      height: 1px;
      min-width: 20px;
      background: #444;
      flex: 0 0;
    }
    &::before {
      margin: 0 8px 0 0;
    }
    &::after {
      margin: 0 0 0 8px;
    }
  }
}

/*---- インページナビ（共通） ----*/
.lp--indexLnk .lp--anchorLnk {
  background: var( --sceneThemeColor );

  li a {
    position: relative;
    display: block;
    height: 100%;
    color: #fff;
    line-height: 1.5;
    text-decoration: none;

    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 8px;
      height: 8px;
      bottom: -1px;
      left: calc(50% - 4px);
      border: 1px solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      transition: .3s;
      opacity: .8;
    }

    &:hover::after {
      bottom: -3px;
    }
  }
}

/*---- おすすめ商品（共通） ----*/
.lp--feature {
  width: var( --narrowWidth );
  background: var( --coloredSectionBgc );
}

/*---- 〇〇とは（共通） ----*/
.lp-about {
  .lp--section:has(&) {
    border: 1px solid #00000028;
    border-width: 1px 0 0;
  }

  .lp-about-item {
    h3 {
      margin: 0;
      color: #fff;
      font-weight: 600;
      background: var( --sceneThemeColor );
      box-shadow: 0 4px 4px #00000028;
    }

    p {
      display: block;
      text-align: left;
    }
  }
}

/*---- 特長（共通） ----*/
.lp-strong .lp-strong-point {
  position: relative;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  box-shadow: 0 0 4px #00000028;
  background: #fff url("/img/usr/@freepage/lp_hikidemono/ico-strong-point1.png") no-repeat 0 0;

  &:nth-of-type(2) {
    background-image: url("/img/usr/@freepage/lp_hikidemono/ico-strong-point2.png");
  }

  &:nth-of-type(3) {
    background-image: url("/img/usr/@freepage/lp_hikidemono/ico-strong-point3.png");
  }

  h3 {
    display: inline-block;
    border-bottom: 1px solid #444;

    & + p {
      color: #666;
    }
  }

  .lp-strong-point-img {
    display: block;
  }
}

/*---- 検索エリア（共通） ----*/
.lp--middle {
  div:has(> &) {
  }

  h2 {
    text-align: center;

    &::before, &::after {
      content: "－";
    }
    &::before {
      margin-right: .5em;
    }
    &::after {
      margin-left: .5em;
    }
  }

  /*---- 価格から探す (共通) ----*/
  .lp--middle-search-price {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    li {
      background: var( --sceneThemeColor );
      transition: .3s;

      p,
      a {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          height: 56px;
          padding: 0 !important;
          font-size: 1.8rem;
          color: #fff;
          transition: .3s;

          &:hover {
            text-decoration: none;
            opacity: .9;
          }

          span {
            display: inline !important;
            margin: .3rem 2px 0;
            font-size: 1.2rem;
          }
      }
      &:has(p) {
        background: #ededed;

        p {
          color: #ccc;
        }
      }
    }
  }

  /*---- 商品タイプから探す (PC) ----*/
  .lp--middle-search-ctype {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    li {
      flex-wrap: wrap;

      a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 80px;
        font-weight: 600;
        background: var( --col_paleGray );
        transition: .3s;
        overflow: visible;

        &:hover {
          text-decoration: none;
        }

        &::before {
          z-index: +1;
          background: var( --col_Gold ) !important;
        }
        &::after {
          border-color: var( --col_Gold );
        }

        p {
          line-height: 1.3;
        }
      }
    }
  }

}

/*---- ラインナップ（共通） ----*/
.lp--lineup .lp--item {
  border: 1px solid #00000028;
  background: #fff;

  .lp--item-title {
    margin: 0;
    font-family: var( --ff-sans_serif );
    color: #666;

    strong {
      font-family: var( --ff-serif );
      font-weight: 600;
    }
  }

  .lp--item-thumb {
    position: relative;

    .lp--feature-item &::before {
      content: "";
      display: block;
      background: url("/img/usr/@freepage/lp__common/ico-feature-item.png") no-repeat 0 0 / cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 75;
    }
    .lp--recom.lp--feature-item &::before {
      background-image: url("/img/usr/@freepage/lp__common/ico-recommend-item.png");
    }

    a {
      display: block;
      aspect-ratio: 40 / 17;
    }
  }

  .lp--item-txt {
    display: flex;
    margin: 24px 0;
    flex-direction: column;

    p {
      color: #666;
    }
  }
}

/*---- お届けまで（共通） ----*/
/*---- 無料サービス（共通） ----*/
.lp-service .series_lineup_list {
  display: flex;
  flex-wrap: wrap;
}

/*---- コラム（共通） ----*/
.lp-column .lp-column-item {
  text-align: left;
  background: #fff;

  .lp-column-thumb {
    aspect-ratio: 16 / 9;
    background: var( --col_paleGray );
  }
}

/*---- FAQ（共通） ----*/
.lp--faq {
  display: flex;
  flex-direction: column;
  align-items: center;

  dl {
    display: flex;
    width: auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    dt {
      border-bottom: 1px solid #444;

      &:first-of-type {
        margin: 0;
      }

      h3 {
        font-weight: 600;
      }

      &::before { content: "Q."; }
    }

    dd {
      color: #666;

      &::before { content: "A."; }
    }

    > * {
      display: flex;
      text-align: left;
      align-items: baseline;

      &::before {
        content: "";
        display: block;
        font-family: var( --ff-serif );
        font-weight: 600;
        color: #444;
      }
    }
  }
}

/*---- 問い合わせ先（共通） ----*/
.lp--address {
  .lp--section:has(&) {
    border-bottom: 1px solid #00000028;
    background: var( --coloredSectionBgc ) !important;
  }
  ul > li {
    font-family: var( --ff-sans_serif );
    background: #fff;
  }

  h3 {
    font-family: var( --ff-serif );
    font-weight: 600;
  }

  .lp--address-phone a {
    font-weight: 600;
    color: var( --sceneThemeColor );
  }

  .lp--address-time {
    color: #666;
  }
}

@media screen and (max-width: 640px) {  /* only SP */
  #header-wrapper {
    margin: 0;
  }

  img {
    max-width: 100%;
  }

  #header-news {
    margin-top: 50px;
  }

  .lp--scene-content {
    --containerWidth: 100%;
    --contentWidth:   calc(100vw - 24px);
    --narrowWidth:    calc(100vw - 64px);

    margin: 50px -12px 0 !important;
    line-height: 1.8;
    color: #444;
    font-family: var( --ff-sans_serif );
    font-size: 1.4rem;

    a.btn-lnk { /* リンクボタン */
      min-height: 44px;
      border-radius: 22px;
      padding: 8px 24px;
      font-size: 1.6rem;
      line-height: 1.3;
      word-break: keep-all;

      &::after {
        right: 14px;
      }

      &:hover::after {
        right: 10px;
      }

      &[target*="_blank"]::before {
        right: 12px;
      }

      &[target*="_blank"]:hover::before {
        right: 9px;
      }

      &.sizeS {
        height: 36px;
        border-radius: 25px;
      }

      &.sizeL {
        min-height: 48px;
        border-radius: 50px;
      }
    }
  }

  /*---- メインビジュアル（SP） ----*/
  .lp--heroimage {
    position: relative;
    aspect-ratio: 5 / 6;
    background: var( --col_paleGray );

    &::after {
      content: "";
      position: absolute;
      height: 10px;
      width: 100%;
      bottom: 0;
      z-index: +1;
      background-image: linear-gradient(transparent 0, rgb(0 0 0 /.02) 100%);
    }
  }
  .lp--lead {
    margin: 24px 12px 0;

    p {
      text-align: center;
      font-size: 1.6rem;
    }
  }

  /*---- インページナビ（SP） ----*/
  .lp--indexLnk {
    margin: 48px auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .lp--anchorLnk {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      align-items: stretch;
      gap: 1px;
      background: #fff;

      li {
        display: flex;
        flex-basis: calc((100% - 1px) /2);
        background: var( --sceneThemeColor );

        a {
          display: flex;
          padding: 0;
          line-height: 1.35;
          align-items: center;
          width: 100%;
          min-height: 4em;
          justify-content: center;
          text-align: center;

          &::after {
            left: unset;
            bottom: 10px;
            right: 8px;
          }
          &:hover::after {
            bottom: 8px;
          }
        }
      }
    }

    .lp--followLnk {
      margin: 56px 0 0;
      width: var( --narrowWidth );

      a {
        display: block;
        border: 1px solid #00000028;
      }

      li + li {
        margin: 20px 0 0 0;
      }
    }
  }

  /*---- 基本レイアウト設定（SP） ----*/
  .lp--section {
    padding: 56px 0;
    text-align: center;

    h2 {
      margin: 0 0 40px;
      text-align: center;
      font-size: 2.6rem;
      line-height: 1.5;
    }
  }

  /*---- おすすめ商品（SP） ----*/
  .lp--feature {
    width: var( --contentWidth );
    margin: 56px auto;
    border-radius: 13px;
    padding: 10px 10px 32px;

    h2 {
      margin: 0 0 12px;
      text-align: center;
      font-weight: normal;
      font-size: 2.4rem;
      background: transparent;
    }

    .lp--item {
      box-sizing: border-box;
      margin: 0 auto;
      padding: 8px 16px 24px;
      border: 4px solid #00000028;
      background: #fff;

      & + & {
        margin: 20px 0 0 0;
      }

      .lp--item-thumb {
        margin: 0 -8px 8px;
      }
    }

    .lp--item-txt {
      text-align: justify;
      text-align-last: center;
      line-height: 1.5;
      padding: 16px 0;
    }
  }

  /*---- 引出物とは（SP） ----*/
  .lp-about {
    padding: 0 16px;

    h2 {
      margin: 0 0 20px;

      & + p {
        text-align: justify;
        text-align-last: center;
      }
    }

    .lp-about-items {
      margin: 48px 0 0 0;

      .lp-about-item {
        h3 {
          padding: 4px;
          font-size: 1.6rem;
          letter-spacing: .1em;
        }

        p {
          padding: 16px 16px 32px;
          text-align: justify;

          em {
            font-style: normal;
            font-weight: 600;
          }
        }

        &:last-of-type p {
          padding: 10px 10px 0;
        }
      }
    }
  }

  /*---- 特長（SP） ----*/
  .lp-strong {
    .lp-strong-point {
      padding: 32px 16px 16px;
      background-size: 108px;

      & + & {
        margin-top: 32px;
      }

      h3 {
        margin: 0 40px 24px;
        padding: 0 4px 16px;
        line-height: 1.5;
        font-size: 2.4rem;

        & + p {
          font-size: 1.4rem;
        }
      }

      .lp-strong-point-img {
        margin: 16px 0 0;
      }
    }
  }

  /*---- 探すコンテンツ（SP） ----*/
  .lp--middle {
    margin: 0 auto;
    width: var( --containerWidth );
    padding: 72px 0;

    h2 {
      margin: 0 0 20px;
      font-size: 2.2rem;
    }

    /*---- ランキング (SP)----*/
    .block-top-event--goods {
      margin: 0 0 48px;
      position: relative;

      ul.block-thumbnail-h {
        display: flex;
        flex-wrap: nowrap;
        gap: 0 16px;
        padding: 0 14vw;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        width: auto;
        position: relative;

        li {
          scroll-snap-align: center;

          .block-thumbnail-h--goods {
            display: flex;
            flex-direction: column;
            height: 100%;

            .block-thumbnail-h--goods-image {
              figure {
                box-sizing: border-box;
                position: relative;
                margin: 0 0 12px;
                padding: 5px;
                width: 72vw;

                img {
                  width: 100%;
                }

                &::before {
                  content: "n";
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  height: calc(14vw - 16px);
                  aspect-ratio: 1 /1;
                  font-size: 2rem;
                  font-weight: 600;
                  background: color-mix(in srgb, #f5f5f5 100%, #fff);
                  z-index: +1;
                }

                li:nth-child(1) &::before {
                  content: "1";
                  color: #fff;
                  background: var( --col_Gold );
                }
                li:nth-child(2) &::before {
                  content: "2";
                  color: #fff;
                  background: #bababa;
                }
                li:nth-child(3) &::before {
                  content: "3";
                  color: #fff;
                  background: #a67e67;
                }
                li:nth-child(4) &::before {
                  content: "4";
                }
                li:nth-child(5) &::before {
                  content: "5";
                }
              }
            }

            .block-thumbnail-h--goods-description {
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              gap: 8px;
              justify-content: space-between;

              .block-thumbnail-h--goods-name {
                flex-grow: 1;
                display: flex;

                a {
                  width: 100%;
                  display: -webkit-box;
                  line-clamp: 2;
                  -webkit-line-clamp: 2;
                  text-overflow: ellipsis;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  line-height: 1.5;
                  text-decoration: none;
                  font-feature-settings: "palt";
                  font-size: 1.6rem;
                }
              }

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

    /*---- 価格から探す (SP) ----*/
    .lp--middle-search-price {
      justify-content: flex-start;
      gap: 8px 6px;
      margin: 0 auto;

      li {
        width: calc((100% - 6px) /2);

        p,
        a {
          font-size: 1.8rem;
        }
      }
    }

    /*---- 商品タイプから探す (SP) ----*/
    .lp--middle-search-ctype {
      gap: 8px;
      margin: 24px 16px 0;

      h2:has(+ &) {
        margin-top: 48px;
      }

      li {
        width: calc((100% - 16px) /3); /* default*/

        a {
          align-content: flex-start;
          height: 100%;
          aspect-ratio: 1 / 1;
          gap: 8px;
          padding: 0;

          img {
            margin: -4px 0 0 0;
            height: 80px;
            aspect-ratio: 3 / 2;
            object-fit: contain;
            overflow: visible !important;
            filter: drop-shadow(2px 2px 2px rgb(0 0 0 /.2));
          }

          p {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            align-items: center;
            justify-content: center;
            letter-spacing: .05em;

            br { display: none; }

            small {
              margin-top: -2px;
              font-size: 1.4rem;
              opacity: .8;
            }
          }
        }
      }
    }
  }

  /*---- ラインナップ（SP） ----*/
  .lp--lineup {
    .lp--item {
      border-width: 4px;
      width: var( --contentWidth );
      margin: 0 auto;
      padding: 16px 10px 24px;

      & + & {
        margin: 32px auto 0;
      }

      &.lp--feature-item .lp--item-thumb::before { /* 一番人気バッジ */
        width: 96px;
        height: 96px;
      }

      .lp--item-thumb {
        margin: 8px auto;

        a {
          aspect-ratio: 5 / 6;
        }
      }

      .lp--item-txt {
        margin: 24px 0;

        p {
          font-size: 1.4rem;
          text-align: left;
        }
      }
    }

    .lp--item-title {
      display: flex;
      margin: 0;
      font-size: 1.4rem;
      font-weight: normal;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      word-break: keep-all;

      strong {
        font-size: 1.8rem;
      }
    }
  }

  /*---- お届けまで（SP） ----*/
  .lp--flow {
    width: var( --contentWidth );

    h2 + p {
      margin: -24px 0 24px;
    }

    figure {
      padding: 40px 24px;
      background: #fff;
    }
  }

  /*---- 無料サービス（SP） ----*/
  .lp-service {
    width: var( --contentWidth );

    .series_lineup_list {
      display: flex;
      gap: 16px 10px;
      flex-wrap: wrap;

      > li {
        flex-basis: calc((100% - 10px) /2);

        &:nth-of-type(3),
        &:nth-of-type(4) {
          flex-basis: 100%;
        }

        a::after {
          display: none;
        }
      }
    }
  }

  /*---- コラム（SP） ----*/
  .lp-column {
    width: var( --contentWidth );

    .lp-column-item {
      border-radius: 13px;
      padding: 16px;

      & + & {
        margin: 24px auto 0;
      }

      h3 {
        margin: 0 0 8px;
        font-size: 2rem;
        line-height: 1.5;
      }

      .lp-column-thumb {
        &::after {
          display: none;
        }
      }

      .lp-column-txt {
        padding: 16px 8px 20px;
        font-size: 1.4rem;
        text-align: justify;
      }

      .lp-column-lnk {
        font-size: 1.6rem;
      }
    }

    .lp-column-catLnk {
      margin: 20px auto 0;
    }
  }

  /*---- FAQ（SP） ----*/
  .lp--faq {
    width: var( --contentWidth );

    dl {
      > dt {
        margin: 32px 0 0;
        width: 100%;

        h3 {
          font-size: 2rem;
          line-height: 1.5;
        }
      }

      > dd {
        margin: 12px 0 0 0;

        &::before {
          margin-top: -.4rem;
        }
      }

      > * {
        gap: 4px;

        &::before {
          font-size: 2rem;
        }
      }
    }
  }

  /*---- 問い合わせ先（SP） ----*/
  .lp--address {
    width: var( --narrowWidth );

    ul > li {
      display: flex;
      flex-direction: column;
      margin: 24px 0;
      padding: 0 16px;
    }

    h3 {
      margin-top: 20px;
      font-size: 1.6rem;
      line-height: 1.5;
      word-break: keep-all;
    }

    .lp--address-conetnt {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 116px;
    }

    .lp--address-phone {
      flex-grow: 0;
      font-size: 3.4rem;
      line-height: 1;
      letter-spacing: .1em;
    }

    .lp--address-time {
      margin: 10px 0 0;
      color: #666;
    }
  }

  /*---- 他シーンリンク ----*/
  .lp--followLnk {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 36px 16px;
    background: color-mix(in srgb, var( --col_paleGray ) 45%, transparent);

    a {
      display: block;
      border: 1px solid #00000028;
    }
  }

  /*---- 移転案内 ----*/
  #header-news,
  .block-gnav {
    display: block;
  }

  .closed {
    display: block grid;
    place-items: center;

    article {
      display: inline-flex;
      flex-direction: column;
      margin: 64px 12px;
      border: 1px solid #00000028;
      padding: 24px 16px;
      font-feature-settings: "palt";

      a {
        margin-top: 1.5em;

        text-decoration: underline;
        color: var( --col_Gold );
      }
    }
  }
}

@media screen and (min-width: 641px) {  /* only PC */
  #header-news {
    margin-top: 0;
  }

  .lp--scene-content {
    --containerWidth: var( --wrapperW );
    --contentWidth: 1060px;
    --narrowWidth: 960px;

    margin: 80px 0 0;
    line-height: 1.8;
    color: #444;
    font-family: var( --ff-sans_serif );
    font-size: 1.6rem;

    a.btn-lnk { /* リンクボタン */
      height: 48px;
      border-radius: 24px;
      padding: 0 16px;

      &.sizeS {
        height: 40px;
        border-radius: 20px;
      }

      &.sizeL {
        height: 56px;
        border-radius: 28px;

        &::after {
          margin: 0;
          mask-image: none;
          background: none;
        }
      }
    }
  }

  /*---- メインビジュアル（PC） ----*/
  .lp--heroimage {
    width: var( --containerWidth );
    aspect-ratio: 59 / 25;
    background: var( --col_paleGray );
  }

  .lp--lead {
    margin: 24px 0 0;

    .lp--lead-txt {
      font-size: 1.8rem;
    }
  }

  /*---- インページナビ（PC） ----*/
  .lp--indexLnk {
    margin: 72px auto 0;
    padding: 0;
    width: 100cqw;
    height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
    background: var( --sceneThemeColor );

    .lp--anchorLnk {
      position: relative;
      display: flex;
      border: 1px double rgb(255 255 255 /.6);
      border-width: 0 4px;
      margin: 0;
      max-width: var( --containerWidth );
      padding: 0;
      align-items: stretch;
      justify-content: center;

      li {
          padding: 0 18px;
          min-height: 40px;

        a {
          display: flex;
          color: #fff;
          text-decoration: none;
          text-align: center;
          align-items: center;
        }

        & + & {
          border-left: 4px double rgb(255 255 255 /.6);
        }
      }
    }

    .lp--followLnk {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin: 72px 0 0;

      a {
        display: block;
        width: 420px;
        border: 1px solid #00000028;
        aspect-ratio: 7 / 2;
      }
    }
  }

  /*---- 基本レイアウト設定（PC） ----*/
  .lp--section {
    padding: 72px 0;
    text-align: center;

    h2 {
      margin: 0 0 56px;
      text-align: center;
      font-size: 3.2rem;
    }
  }

  /*---- おすすめ商品（PC） ----*/
  .lp--feature {
    margin: 72px auto;
    border-radius: 13px;
    padding: 24px 40px 40px;

    h2 {
      margin: 0 0 20px;
      text-align: center;
      font-size: 2.8rem;
    }

    .lp--item {
      box-sizing: border-box;
      margin: 0 auto;
      padding: 16px 39px 40px;
      background: #fff;
      border: 4px solid #00000028;

      & + & {
        margin: 32px 0 0 0;
      }

      .lp--item-txt {
        margin: 16px 0;
        text-align: center;
        line-height: 1.5;
      }
    }
  }

  /*---- 引出物とは（PC） ----*/
  .lp-about {
    margin: 0 auto;
    width: var( --containerWidth );

    h2 {
      margin: 0 0 20px;
    }

    .lp-about-items {
      margin: 64px 0 0 0;
      display: flex;
      gap: 32px;

      .lp-about-item {
        flex-basis: calc((100% - 64px) /3);

        h3 {
          padding: 4px;
        }

        p {
          padding: 16px;
        }
      }
    }
  }

  /*---- 特長（PC） ----*/
  .lp-strong {
    width: var( --contentWidth );

    .lp-strong-point {
      padding: 40px;
      background-size: 168px;

      & + & {
        margin-top: 40px;
      }

      h3 {
        margin: 0 0 24px;
        padding: 0 4px;
        font-size: 3.2rem;
      }

      .lp-strong-point-img {
        margin: 48px 0 0;
      }
    }
  }

  /*---- 探すコンテンツ（PC） ----*/
  .lp--middle {
    margin: 0 auto;
    width: var( --containerWidth );
    padding: 72px 0;

    h2 {
      margin: 0 0 20px;
    }

    /*---- ランキング (PC) ----*/
    .block-top-event--goods {
      margin: 0 auto 64px;
      width: var( --contentWidth );

      li {
        figure::before {
          content: "n";
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: 5px;
          left: 5px;
          height: 28px;
          aspect-ratio: 1 /1;
          font-size: 1.6rem;
          font-weight: 600;
          background: #f5f5f5;
          z-index: +1;
        }

        &:nth-child(1) figure::before {
          content: "1";
          color: #fff;
          background: var( --col_Gold );
        }
        &:nth-child(2) figure::before {
          content: "2";
          color: #fff;
          background: #bababa;
        }
        &:nth-child(3) figure::before {
          content: "3";
          color: #fff;
          background: #a67e67;
        }
        &:nth-child(4) figure::before {
          content: "4";
        }
        &:nth-child(5) figure::before {
          content: "5";
        }

        a {
          line-clamp: unset !important;
          -webkit-line-clamp: unset !important;
        }
      }
    }

    /*---- 価格から探す (PC) ----*/
    .lp--middle-search-price {
      flex-wrap: wrap;
      justify-content: center;
      gap: 9px 8px;
      margin: 0 auto 64px;

      li {
        min-width: calc((100% - 48px) /7);

        a {
          &:hover {
            text-decoration: none;
          }
          &::before,
          &::after {
            scale: 80%;
          }

          &:hover::before {
            top: 10px;
            right: 2px;
          }
          &:hover::after {
            top: 4px;
            right: 4px;
          }
        }
      }
    }

    /*---- 商品タイプから探す (PC) ----*/
    .lp--middle-search-ctype {
      gap: 16px;
      margin: 0 auto;
      width: var( --contentWidth ); /* default */

      li {
        width: calc((100% - 48px) /4); /* default */

        a {
          flex-wrap: nowrap;
          gap: 12px;
          height: 112px;
          padding: 16px 16px;

          img {
            height: 72px;
            filter: drop-shadow(2px 2px 2px rgb(0 0 0 /.2));
          }

          p {
            text-align: left;

            small {
              display: block;
              font-size: 1.4rem;
              opacity: .72;
            }
          }
        }
      }
    }
  }

  /*---- アイテムカセット（PC） ----*/
  .lp--item {
    border-width: 4px;
    padding: 8px 16px 32px;

    & + & {
      margin: 36px auto 0;
    }

    .lp--item-thumb {
      .lp--feature-item &::before { /* 一番人気バッジ */
        width: 168px;
        height: 168px;
      }

      a {
        aspect-ratio: 40 /17;
      }
    }

    .lp--item-txt {
      margin: 24px 0;
    }
  }

  /*---- ラインナップ（PC） ----*/
  .lp--lineup {
    width: var( --narrowWidth );

    .lp--item-title {
      display: flex;
      margin: 0;
      padding: 4px 0;
      font-size: 1.2rem;
      align-items: baseline;
      gap: 8px;
      justify-content: center;

      strong {
        font-size: 1.8rem;
      }
    }
  }

  /*---- お届けまで（PC） ----*/
  .lp--flow {
    width: var( --contentWidth );

    h2 + p {
      margin: -48px 0 20px;
    }

    figure {
      padding: 40px 28px;
      background: #fff;
    }
  }

  /*---- 無料サービス（PC） ----*/
  .lp-service {
    width: var( --containerWidth );

    .series_lineup_list {
      margin: 0 auto;
      display: flex;
      gap: 16px;
      flex-direction: row;
      flex-wrap: wrap;
      width: 766px;

      > li {
        display: block;
        width: 375px;
        aspect-ratio: 3 / 2;
        background: var( --col_paleGray );

        a::after {
          display: none;
        }
      }
    }
  }

  /*---- コラム（PC） ----*/
  .lp-column {
    width: var( --narrowWidth );

    .lp-column-item {
      display: grid;
      grid-template-columns: calc(50% - 8px) 1fr;
      grid-template-rows: auto 1fr auto;
      gap: 12px 16px;
      border-radius: 13px;
      padding: 16px 24px 16px 16px;

      & + & {
        margin: 20px auto 0;
      }

      .lp-column-thumb {
        grid-column: 1 /2;
        grid-row: 1 / 4;

        &::after {
          display: none;
        }
      }

      h3 {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
        font-size: 2rem;
      }

      .lp-column-txt {
        grid-column: 2;
        grid-row: 2;
        height: auto;
        text-align: justify;
        font-size: 1.5rem;
      }

      .lp-column-lnk {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
        font-size: 1.6rem;
      }
    }
  }

  .lp-column .lp-column-catLnk {
    margin: 20px auto 0;
  }

  /*---- FAQ（PC） ----*/
  .lp--faq {
    width: var( --narrowWidth );

    dl {
      dt {
        margin: 48px 0 0;

        h3 {
          font-size: 2rem;
        }
      }

      dd {
        margin: 8px 0 0 0;

        &::before {
          margin-top: -.2rem;
        }
      }

      > * {
        gap: 8px;

        &::before {
          font-size: 2rem;
        }
      }
    }
  }

  /*---- 問い合わせ先（PC） ----*/
  .lp--address {
    width: var( --narrowWidth );

    ul {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-content: stretch;
      justify-content: center;
      gap: 24px;
      width: var( --narrowWidth );

      > li {
        flex: 1;
        display: flex;
        padding: 0 16px;
        flex-direction: column;
      }

      h3 {
        margin-top: 16px;
        font-size: 1.6rem;
      }
    }

    .lp--address-conetnt {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 130px;
    }

    .lp--address-phone {
      flex-grow: 0;
      font-size: 3.6rem;
      line-height: 1;
      letter-spacing: .1em;

      a {
        text-decoration: none;
      pointer-events: none;
      }
    }

    .lp--address-time {
      color: #666;
    }
  }

  /*---- 他シーンリンク ----*/
  .lp--followLnk {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 72px 0;

    a {
      display: block;
      width: 420px;
      border: 1px solid #00000028;
    }
  }

  /*---- 移転案内 ----*/
  #header-news,
  .block-gnav {
    display: block;
  }

  .closed {
    display: block grid;
    place-items: center;

    article {
      display: inline-flex;
      flex-direction: column;
      margin: 64px auto;
      border: 1px solid #00000028;
      padding: 36px;
      font-size: 1.5rem;

      a {
        margin-top: 1.5em;

        text-decoration: underline;
        color: var( --col_Gold );
      }
    }
  }
}