@charset "UTF-8";

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

/*---- メインビジュアル（共通） ----*/
.giftscene-title {
  margin: 0 auto;
  padding: 0;

  img{
    width: 100%;
    background: var(--col_paleGray, #f5f5f5);
  }
}

.lp--scene-content {
  /*---- 基本レイアウト設定（共通） ----*/
  .lp--section {
    border-top: 0.5px solid #00000028;
    padding: 48px 0;
    background: 0 !important;
    box-shadow: none !important;

    h2 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      text-align: center;
      font-size: revert;
      margin: 0 0 24px;
      padding: 0;

      &::before,
      &::after {
        flex: 0 0 16px;
        content: "";
        display: block;
        height: 1px;
        min-width: 16px;
        background: #444444;
        flex: 0 0;
      }
    }
  }

  /*---- アンカーリンク（共通） ----*/
  .lp--indexLnk {
    z-index: 50;
    background: #ffffff;
    transition: 0.5s ease-in-out;

    .is-close & {
      position: relative;
      top: 0 !important;
      z-index: 0;
    }

    .wrapper:has(.DownMove) & {
      top: 98px;
    }
    .lp--anchorLnk {
      background: none;
      display: flex;
      gap: 1px;

      li {
        a {
          display: block grid;
          place-items: center;
          position: relative;
          padding: 4px 24px 4px 8px;
          min-height: 48px;
          word-break: auto-phrase;
          line-height: 1.35;
          font-feature-settings: "palt";
          text-decoration: none;
          color: #ffffff;
          background: var(--sceneThemeColor);

          &::after {
            content: "";
            display: block;
            position: absolute;
            inset: auto 10px auto auto;
            border: 1px solid #ffffff;
            border-width: 0 1px 1px 0;
            width: 8px;
            height: 8px;
            transform: rotate(45deg);
          }
        }
      }
    }
  }

  /*---- リード（共通） ----*/
  .lp--lead {
    margin: 40px 0;

    .lp--lead-txt {
      text-align: center;
      font-size: unset;
      color: unset;
    }
  }

  /*---- シリーズ： ----*/
  .top-brand_list {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    > li {
      position: relative;
      border-radius: 1px;
      font-size: 1.4rem;
      background: #ffffff;
      box-shadow: 0 0 30px #0000000c;
      transition: 0.5s;

      &:hover {
        box-shadow: 0 0 40px #0000001a;
      }

      a {
        display: flex;
        flex-direction: column;

        &:hover {
          opacity: 1 !important;
          text-decoration: none;
          color: var(--cl-br, #433d37);

          img {
            opacity: 0.7;
          }
        }

        h4 {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          border-bottom: 1px solid currentColor;
          letter-spacing: 0.05em;
          left: 0.05em;
          font-family: var(--ff-sans_serif);
          font-weight: 600;
          color: var(--col_Gold, #baa66d);
        }

        .brand-cover-img {
          order: 1;
        }

        .top_ro-img {
          order: 0;
          aspect-ratio: 57 / 32;
          width: 100%;
          overflow: hidden;

          .ro_wrap {
            grid-area: img;
            transition: 0.6s 0.2s ease-out;

            p {
              backface-visibility: hidden;
              padding: 0;

              &:last-of-type {

                .top_ro-img:hover & {
                  opacity: 1;
                }

                input[type="checkbox"] {
                  border: 0;
                  border-radius: 20px;
                  display: block;
                  width: 40px;
                  height: unset;
                  aspect-ratio: 1 / 1;
                  position: absolute;
                  bottom: 3px;
                  right: 3px;
                  z-index: 3;
                  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2021V13%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%203C9%205.14788%209%208%209%208C9%2012%206.33333%2013%205%2013H19C17.6667%2013%2015%2012%2015%208C15%208%2015%205.14788%2015%203M7%203H17%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50% /26px;
                  filter: drop-shadow(0 0 1px #00000090);
                  transform: rotate(45deg);
                  overflow: visible;

                  &::after {
                    display: none;
                  }
                  &:hover {
                    bottom: 12px;
                    transform: rotate(0);
                    transition: 0.15s;
                  }
                  &:checked {
                    bottom: 12px;
                    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2021V13%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%203C9%205.14788%209%208%209%208C9%2012%206.33333%2013%205%2013H19C17.6667%2013%2015%2012%2015%208C15%208%2015%205.14788%2015%203M7%203H17%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 21px /26px;
                    filter: drop-shadow(0 0 1px #00000066);
                    transition: 0.3s transform;
                    transition: 0.15s background-position ease-in;
                    transform: rotate(0);
                  }
                }
              }
            }
          }
        }

        p.brand-desc {
          order: 3;
          display: block;
          padding: 16px;
          text-align: justify;
          flex-grow: 1;

          a:hover & {
            color: var(--cl-br, #433d37);
          }

          & + span:not([class]) {
            order: 4;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0 0 16px;
            font-size: 1.3rem;
            transition: 0.3s;

            &::before {
              content: "";
              display: block;
              position: relative;
              width: 16px;
              height: 16px;
              background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxOCIgY3k9IjE4IiByPSIxNyIgZmlsbD0id2hpdGUiIHN0cm9rZT0iI0IxOUI3QiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTE2IDI0TDIyIDE4TDE2IDEyIiBzdHJva2U9IiM0MzI4MEUiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==") no-repeat 0 0 / cover;
            }

            a:hover & {
              text-decoration: underline;
              color: var(--col_Gold, #baa66d);

              &::before {
                animation: gotoPage 1.2s infinite alternate ease;
              }
            }
          }
        }
      }
    }
  }

  /*-- ポジションマップ --*/
  .gslp-block-lineup--body {
    margin-top: 30px;
    background-color: #fafafa;
    background-image:
    linear-gradient(0deg, transparent 0, transparent calc(50% - 0.5px), var(--cl-br) calc(50% - 0.5px), var(--cl-br) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 100%),
    linear-gradient(90deg, transparent 0, transparent calc(50% - 0.5px), var(--cl-br) calc(50% - 0.5px), var(--cl-br) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 100%),
    url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%228%22%20height%3D%228%22%20viewBox%3D%220%200%208%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23e0e0e0%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    position: relative;

    span {
      &[class*="pos_"] {
        display: block;
        position: absolute;
        padding: 8px;
        line-height: 1;
        font-weight: 600;
        font-size: 1.3rem;
        letter-spacing: 0.1em;
        color: var(--col_MypreBlue);
        background: #fafafa;
      }

      &[class*="verti"] {
        left: 50%;
        transform: translateX(-50%);

        &.pos_n { top: 0; }
        &.pos_s { bottom: 0; }
      }

      &[class*="horiz"] {
        top: 50%;
        transform: translateY(-50%);
        writing-mode: vertical-rl;
        text-orientation: upright;
        &.pos_w { left: 0; }
        &.pos_e { right: 0; }
      }
    }

    ul {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;

      li {
        position: absolute;
        border: 2px solid #00000028;
        border-radius: 200px;
        transform: translate(-50%, -50%);
        height: 108px;
        aspect-ratio: 1 / 1;
        background: #fff;

        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4px;
          max-width: 100%;
          height: 100%;
          text-decoration: none;

          &::after {
            display: none;
          }

          .img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              display: block;
              &:nth-child(1) {
                display: none;
              }

              &:nth-child(2) {
                width: 100%;

                img {
                  height: 64px;
                  width: 100%;
                  object-fit: contain;
                  filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 20%));
                }
              }
            }
          }

          .title {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            text-align: center;
            letter-spacing: -0.05em;
            line-height: 1.35;
            font-feature-settings: "palt";
            
            span {
              font-size: 1.2rem;
              font-weight: 600;
              paint-order: stroke;
              -webkit-text-stroke: #fff 3px;
            }

            em {
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0;
              padding: 2px 4px;
              height: 24px;
              line-height: 1;
              letter-spacing: -0.025em;
              font-style: normal;
              font-size: 1.2rem;
              color: #ffffff;

              &.c_f  { background: #7e8384; }
              &.c_s  { background: #be6770; }
              &.c_c  { background: #8c83ae; }
              &.c_sc { background: #d38636; }

              &::after {
                content: "";
                display: inline-block;
                margin: 0 0 0 4px;
                width: 1em;
                aspect-ratio: 1;
                mask-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cstyle%3E%20%20g%20%7B%20%20%20%20fill%3A%20none%3B%20%20%20%20stroke%3A%20%23433D37%3B%20%20%20%20stroke-width%3A%201pt%3B%20%20%7D%3C%2Fstyle%3E%3Cg%3E%3Crect%20x%3D%227.5%22%20y%3D%223.5%22%20width%3D%2213%22%20height%3D%2211%22%2F%3E%3Crect%20x%3D%223.5%22%20y%3D%229.5%22%20width%3D%2213%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
                background-color: currentColor;
                transition: 0.3s;
              }

            }
          }
        }
      }
    }

  }

  /*---- 人気アイテムランキング（共通） ----*/
  #ranking {
    width: 1060px;
    margin-inline: auto;
    text-align: left;

    li {
      figure::before {
        content: "n";
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        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: #ffffff;
        background: var(--col_Gold, #baa66d);
      }
      &:nth-child(2) figure::before {
        content: "2";
        color: #ffffff;
        background: #bababa;
      }
      &:nth-child(3) figure::before {
        content: "3";
        color: #ffffff;
        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;
      }
    }
  }

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

    .lp-about-item {
      h3 {
        margin: 0;
        text-align: center;
        letter-spacing: 0.05em;
        font-weight: 600;
        color: #ffffff;
        background: var(--sceneThemeColor);
        box-shadow: 0 4px 4px #00000028;
      }

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

  /*---- 特長（共通） ----*/
  .lp-strong {
    .lp-strong-point {
      position: relative;
      margin-inline: auto;
      text-align: center;
      box-shadow: 0 0 4px #00000028;
      background: #ffffff no-repeat 0 0 /140px;

      h3 {
        display: inline-block;
        margin: 0 0 24px;
        border-bottom: 1px solid #444444;
        font-weight: 600;
        font-size: 2.6rem;

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

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

  /*---- コラム（共通） ----*/
  .lp-column {
    .lp--section:has(&) {
      padding-bottom: 16px;
    }
    .lp-column-items {
      .lp-column-item {
        .lp-column-thumb {
          display: block;
          padding: 5px;
          aspect-ratio: 16 / 9;
          background: var(--col_paleGray, #f5f5fa);

          &::after {
            display: none;
          }
        }

        h3 {
          text-align-last: left;
          margin: 0;
        }

        .lp-column-txt {
          color: #666666;
        }

        .lp-column-lnk {
          margin: 8px auto;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 1.4rem;

          &::before {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxOCIgY3k9IjE4IiByPSIxNyIgZmlsbD0id2hpdGUiIHN0cm9rZT0iI0IxOUI3QiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTE2IDI0TDIyIDE4TDE2IDEyIiBzdHJva2U9IiM0MzI4MEUiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==) no-repeat 0 0 / cover;
          }
        }
      }
    }
  }

  /*---- 無料サービス（共通） ----*/
  .lp-service {
    margin: 0 auto;

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

      > li {
        display: block;
        width: calc((100% - 60px) /4);
        aspect-ratio: 3 / 2;
        background: var(--col_paleGray, #f5f5fa);

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

  /*---- 他カテゴリーリンク（共通） ----*/
  .lp--followLnk {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

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

      img {
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 640px) { /*-- Patch for SP --*/
  .giftscene-title {
    margin: 0 -12px;
    aspect-ratio: 5 / 6;
  }

  .lp--scene-content {
    &.bottom {
      margin-top: 32px;
    }
    
    .lp--indexLnk {
      margin-inline: -12px;

      .lp--anchorLnk {
        flex-wrap: wrap;

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

          &:last-child {
            width: 100%;
          }

          a {
            text-align: center;
            font-size: 1.4rem;
          }
        }
      }
    }

    /*---- シリーズ ----*/
    .top-brand_list {
      flex-direction: column;
      gap: 24px;

      > li {
        width: 100%;
        border: 1px solid #f5f5f5;
        border-radius: 3px;
        box-shadow: 0 0 20px #0000000c;
        flex-direction: row;
        flex-wrap: nowrap;

        a {
          position: relative;
          text-decoration: none;

          h4 {
            order: 0;
            display: block grid;
            place-items: center;
            margin: 4px 0 0;
            height: 32px;
            line-height: 1;
          }

          .top_ro-img {
            position: relative;
            flex-wrap: nowrap;
            background: #ffffff;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;

            .ro_wrap {
              display: flex;
              flex-wrap: nowrap;

              p {
                flex-shrink: 0;
                position: relative;
                display: block;
                width: 100%;
                aspect-ratio: 25 /14;
                max-width: unset;
                margin: 0;
                padding: 0;
                scroll-snap-align: start;

                &::before {
                  content: "← SWIPE";
                  display: flex;
                  height: 20px;
                  padding: 0 6px 0 6px;
                  border-radius: 50px 0 0 50px;
                  position: absolute;
                  bottom: 8px;
                  right: 0;
                  letter-spacing: 0.15em;
                  font-size: 1.2rem;
                  color: #ffffff;
                  align-items: center;
                  justify-content: center;
                  background: #00000044;
                  backdrop-filter: blur(10px);
                  text-shadow: 0 0 5px #00000085;
                }

                &:last-of-type {
                  &::before {
                    content: "›";
                    left: 0;
                    right: unset;
                    padding: 0;
                    min-width: 12px;
                    overflow: hidden;
                    border-radius: 0 50px 50px 0;
                  }

                  input[type="checkbox"] {
                    display: none;
                  }
                }

                img {
                  width: 100%;

                  a:hover & {
                    opacity: 1;
                  }
                }
              }
            }
          }

          p.brand-title {
            order: -5;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            left: 0.05em;
            margin: 8px 0 0;
            border: 1.5px solid var(--col_Gold, #baa66d);
            border-width: 0 0 1px;
            height: 35px;
            padding: 0 0 4px;
            letter-spacing: 0.075em;
            font-family: var(--ff-sans_serif);
            font-feature-settings: "palt";
            font-weight: 600;
            color: var(--col_Gold, #baa66d);
          }

          p.brand-desc {
            order: 10;
            display: block;
            margin: 0 16px;
            padding: 8px 0 0;
            line-height: 1.75;
            text-align: justify;

            a:hover & {
              color: var(--cl-a, #433d37);
            }

            & + span:not([class]) {
              order: 15;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 4px;
              padding: 12px 0;

              &::before {
                content: "";
                display: block;
                width: 16px;
                height: 16px;
                background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxOCIgY3k9IjE4IiByPSIxNyIgZmlsbD0id2hpdGUiIHN0cm9rZT0iI0IxOUI3QiIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTE2IDI0TDIyIDE4TDE2IDEyIiBzdHJva2U9IiM0MzI4MEUiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==") no-repeat 0 0 / cover;
              }
            }
          }
        }
      }
    }

    /*---- ランキング (SP)----*/
    #ranking {
      margin: 0;
      position: relative;
      width: 100vw;
      overflow: visible;

      h2 {
        margin-left: -24px
      }

      .block-top-event--goods {
        margin: 0 0 0 -12px;
      }

      ul.block-thumbnail-h {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0 16px;
        padding: 0 calc((100vw - 280px) /2);
        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%;
            width: 280px;

            .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%, #ffffff);
                  z-index: +1;
                }

                li:nth-child(1) &::before {
                  content: "1";
                  color: #ffffff;
                  background: var(--col_Gold, #baa66d);
                }
                li:nth-child(2) &::before {
                  content: "2";
                  color: #ffffff;
                  background: #bababa;
                }
                li:nth-child(3) &::before {
                  content: "3";
                  color: #ffffff;
                  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;
              justify-content: space-between;
              height: 100%;

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

                a {
                  flex-grow: 1;
                  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-about {
      padding: 0;

      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: 0.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: 96px;

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

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

          & + p {
          }
        }

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

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

      .lp-column-item {
        display: flex;
        flex-direction: column;
        padding: 0;
        box-shadow: 0 0 4px #00000028;

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

        .lp-column-thumb {
          order: 1;

          &::after {
            display: none;
          }
        }

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

        .lp-column-txt {
          order: 3;
          padding: 0 16px;
          font-size: 1.3rem;
          text-align: justify;
        }

        .lp-column-lnk {
          order: 4;
        }
      }

      .lp-column-catLnk {
        margin: 20px auto 0;
        letter-spacing: 0.05em;
      }
    }

    /*---- 無料サービス（SP） ----*/
    .lp-service {
      .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;
          }
        }
      }
    }

    /*---- 他シーンリンク ----*/
    .lp--followLnk {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 0;
      padding: 0 16px;

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

  }
}/*-- /@media --*/

@media screen and (min-width: 641px) { /*-- Patch for PC --*/
  .giftscene-title {
    aspect-ratio: 59 / 25;
  }

  .lp--scene-content {
    &.bottom {
      margin-top: 56px;
    }

    /*---- アンカーリンク（PC） ----*/
    .lp--indexLnk {
      position: sticky;
      top: 0;

      .lp--anchorLnk {
        li {
          width: 100%;

          a {
            height: 52px;
          }
        }
      }
    }

    .lp--section {
      margin-inline: auto;
      width: var(--contentW);
    }

    /*---- シリーズ： ----*/
    .top-brand_list {
      flex-direction: row;
      gap: 18px;
      width: 1060px;

      > li {
        width: calc((100% - 36px) /3);
        gap : 8px;

        a {
          height: 100%;
          h4 {
            order: 2;
            height: 28px;
            margin: 0 20px -8px;
            padding: 0 20px;
          }

          .top_ro-img {
            .ro_wrap {
              transform-style: preserve-3d;

              .top_ro-img:hover & {
                transform: rotateY(-180deg);
                box-shadow: 0 0 15px #0000000c;

                img {
                  opacity: 1 !important;
                }
              }

              &:has(input:checked) {
                opacity: 1;
                transform: rotateY(-180deg) !important;
              }

              &::before {
                content: "";
                display: block;
                width: 32px;
                aspect-ratio: 10 / 7;
                position: absolute;
                bottom: 2px;
                left: calc(50% - 16px);
                background: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22b%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2041%2028.64%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.f%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20stroke%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20stroke-width%3A%201.5px%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20id%3D%22c%22%3E%0A%20%20%20%20%3Cg%20class%3D%22g%22%3E%0A%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22f%22%20d%3D%22M33.47%2C4.58c4.11%2C1.56%2C7.03%2C5.35%2C7.03%2C9.74h0c0%2C5.77-5.05%2C10.5-11.22%2C10.5H10.05%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpolyline%20class%3D%22f%22%20points%3D%2212.96%2021.32%2010.04%2024.82%2012.96%2028.32%22%2F%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22f%22%20d%3D%22M7.53%2C24.06C3.42%2C22.5.5%2C18.71.5%2C14.32h0c0-5.78%2C5.05-10.5%2C11.22-10.5h19.23%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpolyline%20class%3D%22f%22%20points%3D%2228.04%207.32%2030.96%203.82%2028.04%20.32%22%2F%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat 0 0 / contain;
                filter: drop-shadow(0 0 1.5px #00000090);
                z-index: 4;
              }

              p {
                backface-visibility: hidden;
                padding: 0;

                &:last-of-type {
                  position: absolute;
                  top: 0;
                  left: 0;
                  transform: rotateY(-180deg);
                  z-index: 2;

                  .top_ro-img:hover & {
                    opacity: 1;
                  }
                }
              }
            }
          }
          .brand-desc {
            line-height: 1.5;
            font-size: 1.3rem;
          }
        }
      }
    }

    /*-- ポジションマップ --*/
    .gslp-block-lineup--body {
      margin-inline: auto;
      width: var(--narrowW);
      height: unset;
      aspect-ratio: 2 / 1;

      ul {
        aspect-ratio: unset;
        padding: 0;
        height: 100%;

        li {
          border-width: 2px;
          border-radius: 8px;
          padding: 4px;
          height: unset;
          width: 260px;
          aspect-ratio: unset;
          overflow: hidden;
          box-shadow: 0 0 4px rgb(0 0 0 /10%);

          a {
            justify-items: center;
            padding: 0;
            gap: 0;

            &::after {
              content: "";
              display: inline-block;
              position: absolute;
              margin: 0;
              top: 2px;
              right: 2px;
              aspect-ratio: 1;
              mask-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cstyle%3E%20%20g%20%7B%20%20%20%20fill%3A%20none%3B%20%20%20%20stroke%3A%20%23433D37%3B%20%20%20%20stroke-width%3A%201pt%3B%20%20%7D%3C%2Fstyle%3E%3Cg%3E%3Crect%20x%3D%227.5%22%20y%3D%223.5%22%20width%3D%2213%22%20height%3D%2211%22%2F%3E%3Crect%20x%3D%223.5%22%20y%3D%229.5%22%20width%3D%2213%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
              background-color: #ccc;
              transition: 0.3s;
            }

            .img {
              margin: 0;
              overflow: hidden;

              span {
                align-items: stretch;

                &:nth-child(1) {
                  flex-grow: 1;
                  flex-shrink: 0;
                  display: block;
                  width: 168px !important;

                  img {
                    width: 168px;
                    max-width: unset;
                    object-position: 0 50%;
                  }
                }
                &:nth-child(2) {
                  flex-shrink: 0;
                  height: unset;
                  width: unset;

                  img {
                    display: block;
                    margin: 0;
                    width: 80px;
                    height: 80px;
                    padding: 6px;
                    object-fit: contain;
                    object-position: 50% 50%;
                  }
                }
              }
            }

            .title {
              width: 100%;
              margin: 0 -6px;
              flex-direction: row;
              justify-content: space-between;
              gap: 4px;
              height: 24px;
              letter-spacing: 0;
              font-feature-settings: "palt";

              span {
                display: block;
                flex-grow: 1;
                font-size: 1.4rem;

                &::after {
                  display: none;
                }
              }

              em {
                flex-shrink: 0;
                width: 80px;
                margin: 0;
                padding: 0 5px;

                &::after {
                  display: none;
                }
                
              }
            }
          }
        }
      }
    }

    /*---- 〇〇とは（PC） ----*/
    .lp-about {
      margin: 0 auto;
      width: var(--contentW);

      h2 {
        margin: 0 0 20px;

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

      .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 {
      .lp-strong-point {
        width: 880px;
        padding: 40px;

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

    /*---- コラム（PC） ----*/
    .lp-column {
      margin-inline: auto;
      width: 880px;
      text-align: center;

      .lp-column-items {
        display: flex;
        gap: 32px;

        .lp-column-item {
          display: flex;
          flex-direction: column;
          width: calc((100% - 24px) /2);
          gap: 8px;
          border-radius: 13px;

          .lp-column-thumb {
            order: 0;
          }

          h3 {
            order: 1;
            font-weight: 600;
            font-size: 1.8rem;
          }

          .lp-column-txt {
            flex-grow: 1;
            order: 2;
            height: auto;
            text-align: justify;
            font-size: 1.3rem;
          }

          .lp-column-lnk {
            order: 3;
            margin: 0; 
            align-self: flex-start;
          }
        }
      }

      .lp-column-catLnk {
        margin: 20px auto 0;
        min-width: 300px;
        height: 50px;
      }
    }

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

    /*---- 他カテゴリーリンク（PC） ----*/
    .lp--followLnk {
      gap: 24px;

      a {
        width: 420px;
      }
    }
  }
}/*-- /@media --*/