@charset "UTF-8";
/*---- SP First ----*/

:root {
  --sceneThemeColor: #ffb339;
}

/*---- ポジションマップ ----*/
.lp--scene-content {
  .gslp-block-lineup--body {
    ul {
      li {
        &.senmon     { top: 75%; left: 12.5%; z-index: +0; } /* 専門店 */
        &.uchires    { top: 18%; left: 78%; z-index: +0; } /* うちレス */
        &.choice_csc { top: 75%; left: 75%; z-index: +0; } /* チョイスSC */
        &.choice_pe  { top: 75%; left: 37.4%; z-index: +0; } /* チョイス封筒C */
        &.choice_pk  { top: 18%; left: 22%; z-index: +0; } /* チョイス巾着C */
        &.wagokoro   { top: 18%; left: 50%; z-index: +0; } /* 和心包み */
      }
    }
  }
}

/*---- タイプサムネイル ----*/
& label.checkbox {
  &[for$="_sassi"]::before {
    width: 78px !important;
    background-image: url("/img/usr/@event/greeting/ctype_s.webp") !important;
  }
  &[for$="_card"]::before {
    background-image: url("/img/usr/@event/greeting/ctype_c.webp") !important;
  }
  &[for$="_sassi_card"]::before {
    background-image: url("/img/usr/@event/greeting/ctype_sc.webp") !important;
  }
  &[for$="_file"]::before {
    background-image: url("/img/usr/@event/greeting/ctype_f.webp") !important;
  }
}

/*---- 用途（共通） ----*/
.lp-purpose {
    h2 + p {
      text-align: center;
      margin: 0 0 48px;
    }

    .lp-purpose-scene_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-inline: auto;

    li {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      aspect-ratio: 3 / 2;
      overflow: hidden;

      span {
        position: absolute;
        margin: 0 0 0 .1em;
        color: #fff;
        font-family: var( --ff-sans_serif );
        font-weight: 600;
        letter-spacing: .1em;
        text-shadow: 0 0 5px #00000066, 0 0 2px #000000cc;
        z-index: 40;
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        opacity: .8;
      }
    }
  }
}

/*---- 特長 ----*/
.lp--scene-content {
    & .lp-strong {
      .lp-strong-point {
        &:nth-of-type(1) {
          background-image: url("/img/usr/@event/greeting/ico-strong-point1.webp");
        }
        &:nth-of-type(2) {
          background-image: url("/img/usr/@event/greeting/ico-strong-point2.webp");
        }
        &:nth-of-type(3) {
          background-image: url("/img/usr/@event/greeting/ico-strong-point3.webp");
        }
    }
  }
}

@media screen and (max-width: 640px) { /*-- SP --*/
  .lp--scene-content {
    .gslp-block-lineup--body {
      ul {
        li {
          &.uchires    { top: 21%; } /* うちレス */
          &.choice_pk  { top: 21%; } /* チョイス巾着C */
          &.wagokoro   { top: 21%; } /* 和心包み */
        }
      }
    }
  }

  .lp-purpose {
    .lp-purpose-scene_list {
      li {
        flex-basis: calc((100% - 10px) /2);

        span {
          font-size: 1.8rem;
        }
      }
    }
  }
}/*-- /SP --*/

@media screen and (min-width: 641px) { /*-- PC --*/
  .lp--scene-content {
    .gslp-block-lineup--body {
      ul {
        li {
          &.senmon { top: 75%; left: 9.5%; z-index: +0; } /* 専門店 */
        }
      }
    }

    /*---- シリーズ： ----*/
    .top-brand_list {
      gap: 12px;

      > li {
        width: calc((100% - 36px) /4);

        a {
          h4 {
            font-size: 1.3rem;
          }
          .brand-desc {
            font-size: 1.1rem;
          }
        }
      }
    }
  }

  .lp-purpose {
    .lp-purpose-scene_list {
      display: flex;
      flex-wrap: wrap;
      width: 880px;

      li {
        flex-basis: calc((100% - 30px) /4);

        span {
          font-size: 1.6rem;
        }
      }
    }
  }
}/*-- /PC --*/