@charset "UTF-8";

/* Sassy Fan LP（SP: 402px / PC: 左固定 + 右スクロール） */

html {
  background: #fff9bf;
}

body {
  margin: 0;
}

#sassy-fan {
  --sf-bg: #fff9bf;
  --sf-text: #3f3f40;
  --sf-ink: #404041;
  --sf-red: #f94239;
  --sf-coral: #fd4338;
  --sf-pink: #ff5f8e;
  --sf-green: #a9ee8a;
  --sf-teal: #2cccd3;
  --sf-cyan: #00c9d4;
  --sf-orange: #ffae61;
  --sf-yellow: #fff100;
  --sf-blue: #5b88da;
  --sf-handle: #f3436e;
  --sf-btn: #3f3f40;
  --sf-gray: #d9d9d9;
  --sf-black: #231815;
  --sf-display: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.8;
      }
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  > .inner {
    width: min(575px, 100%);
    margin-inline: auto;
    padding-inline: 0;

    @media (width >= 769px) {
      width: 100%;
    }
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* レイアウト */
  .sf-layout {
    width: 100%;
    background: var(--sf-bg);

    @media (width >= 769px) {
      display: flex;
      align-items: flex-start;
    }
  }

  .sf-side {
    display: none;

    @media (width >= 769px) {
      position: sticky;
      top: 0;
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 55%;
      max-width: 791px;
      height: 100vh;
      overflow: hidden;
      background: var(--sf-bg);
    }
  }

  .sf-sp-head {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;

    @media (width >= 769px) {
      display: none;
    }
  }

  .sf-body {
    width: 100%;
    background: var(--sf-bg);
    overflow: clip;

    @media (width >= 769px) {
      flex: 1 1 auto;
      min-width: 0;
      padding-inline: 20px;
    }

    .sf-body__inner {
      width: min(575px, 100%);
      margin-inline: auto;
    }
  }

  /* MV */
  .sf-mv {
    position: relative;
    width: 100%;

    .sf-mv__img {
      width: 100%;
      height: auto;
      aspect-ratio: 402 / 842;

      @media (width >= 769px) {
        aspect-ratio: 643 / 830;
      }
    }

    .sf-mv__kurupoko {
      position: absolute;
      left: 14%;
      top: 50.6%;
      width: 19.4%;
    }

    &.sf-mv--pc {
      width: min(643px, 100%);
    }
  }

  /* イントロ */
  .sf-intro {
    position: relative;
    z-index: 1;
    padding: 24px 20px 0;

    @media (width >= 769px) {
      padding: 91px 0 0;
    }

    .sf-intro__anniv {
      display: none;
      margin: 0 0 16px;
      text-align: center;
      padding: 0;
      border: none;

      @media (width >= 769px) {
        display: block;
      }

      img {
        width: min(213px, 100%);
        margin-inline: auto;
      }
    }

    .sf-intro__bee {
      position: absolute;
      top: -126px;
      left: -28px;
      width: 147px;
      z-index: 1;

      @media (width >= 769px) {
        top: -8px;
        left: -20px;
        width: 139px;
      }
    }

    .sf-intro__text {
      position: relative;
      z-index: 2;
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.75;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .sf-intro__deco {
      position: relative;
      z-index: 0;
      margin-block-start: 8px;
      margin-inline: -20px;

      @media (width >= 769px) {
        margin-inline: 0;
        margin-block-start: 24px;
      }
    }

    .sf-intro__deco-pc {
      display: none;

      @media (width >= 769px) {
        display: block;
        width: 100%;
        aspect-ratio: 551 / 478;
      }
    }

    .sf-intro__deco-sp {
      display: block;
      width: 100%;
      aspect-ratio: 402 / 371;

      @media (width >= 769px) {
        display: none;
      }
    }
  }

  .sf-br-pc {
    display: none;

    @media (width >= 769px) {
      display: inline;
    }
  }

  .sf-br-sp {
    display: inline;

    @media (width >= 769px) {
      display: none;
    }
  }

  /* News */
  .sf-news {
    position: relative;
    padding: 40px 0 48px 20px;

    @media (width >= 769px) {
      padding: 48px 0 56px;
    }

    .sf-news__label {
      position: absolute;
      top: 16px;
      left: 10px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      min-height: 138px;
      margin: 0;
      border: 2px solid var(--sf-ink);
      border-radius: 999px;
      background: #fff;

      img {
        width: 19px;
      }

      @media (width >= 769px) {
        top: 48px;
        left: -10px;
      }
    }

    .sf-news__slider {
      position: relative;
      overflow: hidden;
      margin: 0;
    }

    .sf-news__card {
      width: 320px;
      min-height: 421px;
      overflow: hidden;
      border: 2px solid var(--sf-ink);
      border-radius: 20px;
      background: #fff;
    }

    .sf-news__media {
      width: 100%;
      overflow: hidden;
      border-radius: 18px 18px 0 0;
      background: var(--sf-gray);
      aspect-ratio: 320 / 208;

      img {
        width: 100%;
        height: auto;
        aspect-ratio: 320 / 208;
        object-fit: cover;
      }
    }

    .sf-news__body {
      display: flex;
      flex-direction: column;
      padding: 16px 24px 20px;
    }

    .sf-news__title {
      margin: 0 0 10px;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
    }

    .sf-news__text {
      margin: 0 0 16px;
      font-size: 14px;
      line-height: 1.6;
    }

    .sf-news__more {
      display: inline-flex;
      margin-block-start: auto;

      img {
        width: min(147px, 100%);
      }
    }

    .sf-news__next {
      position: absolute;
      top: 191px;
      right: 40px;
      left: auto;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      min-height: 40px;
      margin: 0;
      border-radius: 50%;
      background: var(--sf-red);
      background-image: none;

      img {
        width: 19px;
        filter: brightness(0) invert(1);
      }

      @media (width >= 769px) {
        right: 0;
      }
    }
  }

  /* ひみつ */
  .sf-himitsu {
    padding: 0 20px 48px;

    @media (width >= 769px) {
      padding: 0 0 56px;
    }

    .sf-himitsu__title {
      margin: 0 0 24px;
      text-align: center;

      img {
        width: min(289px, 100%);
        margin-inline: auto;
      }
    }

    .sf-himitsu__lead {
      margin: 0 0 40px;
      font-size: 14px;
      line-height: 1.6;
    }

    .sf-himitsu__item + .sf-himitsu__item {
      margin-block-start: 40px;
    }

    .sf-himitsu__visual {
      position: relative;

      img {
        width: 100%;
        height: auto;
      }
    }

    .sf-himitsu__badge {
      position: absolute;
      top: -2px;
      left: -2px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 85px;
      min-height: 80px;
      border-radius: 10px;
      color: var(--sf-text);
      font-family: var(--sf-display);
      font-size: 24px;
      font-weight: 800;
      line-height: 1.2;
    }

    .sf-himitsu__badge--shape {
      background: var(--sf-red);
      color: #fff;
    }

    .sf-himitsu__badge--color {
      background: var(--sf-teal);
    }

    .sf-himitsu__badge--texture {
      background: var(--sf-yellow);
    }

    .sf-himitsu__heading {
      margin: 20px 0 12px;
    }

    .sf-himitsu__item:nth-of-type(1) .sf-himitsu__heading img {
      width: min(234px, 100%);

      @media (width >= 769px) {
        width: min(412px, 100%);
      }
    }

    .sf-himitsu__item:nth-of-type(2) .sf-himitsu__heading img {
      width: min(285px, 100%);

      @media (width >= 769px) {
        width: min(408px, 100%);
      }
    }

    .sf-himitsu__item:nth-of-type(3) .sf-himitsu__heading img {
      width: min(273px, 100%);
    }

    .sf-himitsu__text {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
    }
  }

  /* 商品スライダー */
  .sf-item {
    --sf-item-bg: var(--sf-cyan);
    position: relative;
    z-index: 1;

    &[data-theme="bee"] {
      --sf-item-bg: var(--sf-cyan);
      z-index: 1;

      .sf-item__deco {
        position: absolute;
        top: 20px;
        left: 46%;
        transform: translateX(-50%);
        width: min(274px, 100%);
        pointer-events: none;
        z-index: 10;

        @media (width >= 769px) {
          top: 47px;
        }
      }
    }

    &[data-theme="roller"] {
      --sf-item-bg: var(--sf-green);
      z-index: 2;
      margin-block-start: -247px;

      @media (width >= 769px) {
        margin-block-start: -260px;
      }
    }

    &[data-theme="ring"] {
      --sf-item-bg: var(--sf-orange);
      z-index: 3;
      margin-block-start: -228px;

      @media (width >= 769px) {
        margin-block-start: -260px;
      }

      .sf-item__deco {
        position: absolute;
        top: 40px;
        left: 46%;
        transform: translateX(-50%);
        width: min(274px, 100%);
        pointer-events: none;
        z-index: 10;
      }
    }

    &[data-theme="rattle"] {
      --sf-item-bg: var(--sf-handle);
      z-index: 4;
      margin-block-start: -231px;

      @media (width >= 769px) {
        margin-block-start: -260px;
      }

      .sf-item__deco {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        width: min(226px, 100%);
        pointer-events: none;
        z-index: 10;

        @media (width >= 769px) {
          top: 47px;
        }
      }

      .sf-item__slider {
        border-radius: 84px;

        @media (width >= 769px) {
          border-radius: 134px;
        }
      }

      .sf-item__foot {
        isolation: isolate;
        position: relative;
        min-height: 0;
        padding-block: 0 32px;
        background: none;

        @media (width >= 769px) {
          padding-block: 40px 0;
        }

        /* フットが低いと角丸が縮小されるため、十分な高さの面に付ける */
        &::after {
          content: "";
          position: absolute;
          z-index: -1;
          inset-inline: 0;
          bottom: 0;
          height: 440px;
          border-radius: 0 0 9999px 9999px;
          background: var(--sf-item-bg);
          pointer-events: none;
        }
      }
    }

    .sf-item__slider,
    .sf-item__foot {
      background: var(--sf-item-bg);
    }

    .sf-item__slider {
      position: relative;
      z-index: 1;
      border-radius: 74px 74px 0 0;
      overflow-x: hidden;
    }

    .sf-item__head {
      isolation: isolate;
      position: relative;
      padding-block: 66px 45px;

      @media (width >= 769px) {
        padding-block: 83px 60px;
      }

      /* ヘッドが低いと 220px が縮小されるため、十分な高さの面に角丸を付ける */
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset-inline: 0;
        top: 0;
        height: 440px;
        border-radius: 9999px 9999px 0 0;
        background: var(--sf-item-bg);
        pointer-events: none;
      }
    }

    .sf-item__foot {
      min-height: 280px;

      @media (width >= 769px) {
        min-height: 300px;
      }
    }

    .sf-item__title {
      position: relative;
      z-index: 1;
      margin: 0 auto;
      padding-inline: 20px;
      text-align: left;

      img {
        width: min(372px, 100%);
        margin-inline: auto;
      }

      @media (width >= 769px) {
        padding-inline: 0;
        width: min(372px, 100%);
      }
    }

    .sf-all {
      padding-block: 24px 0;
      background: transparent;
    }

    .sf-buy {
      position: absolute;
      right: 20px;
      bottom: 10px;
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 93px;
      min-height: 93px;
      border-radius: 50%;
      background: var(--sf-ink);
      color: #fff;
      font-family: var(--sf-display);
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.04em;

      @media (width >= 769px) {
        right: calc((100% - min(402px, 100%)) / 2 + 20px);
      }

      &::after {
        content: "";
        display: block;
        width: 19px;
        height: 7px;
        margin-block-start: 6px;
        background: #fff;
        clip-path: polygon(0 35%, 70% 35%, 70% 0, 100% 50%, 70% 100%, 70% 65%, 0 65%);
      }
    }

    .sf-buy.sf-buy--soon {
      padding-inline: 8px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-align: center;
      pointer-events: none;
    }

    .sf-buy.sf-buy--soon::after {
      content: none;
    }

    .sf-slider__dots {
      position: static;
      display: flex;
      justify-content: center;
      gap: 12px;
      width: 100%;
      margin-block-start: 30px;
      transform: none;
    }

    .sf-slider__dots .swiper-pagination-bullet {
      width: 10px;
      min-height: 10px;
      margin: 0;
      opacity: 1;
      background: #fff;
      border: 1px solid #fff;
    }

    .sf-slider__dots .swiper-pagination-bullet-active {
      background: var(--sf-black);
    }

    @media (width >= 769px) {
      .sf-btn-black {
        width: min(364px, 100%);
        margin-inline: auto;
      }
    }
  }

  .sf-slider {
    position: relative;
    display: grid;
    overflow: hidden;
    margin: 0;

    @media (width >= 769px) {
      width: min(402px, 100%);
      margin-inline: auto;
    }

    .swiper-wrapper {
      grid-area: 1 / 1;
      margin: 0;
      padding: 0;
      list-style: none;
      height: auto;
    }

    .sf-slider__slide {
      position: relative;
      width: 100%;

      > img {
        width: 100%;
        height: auto;
      }
    }

    .sf-slider__caption {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .sf-slider__nav {
      grid-area: 1 / 1;
      position: absolute;
      top: 47.4%;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 27px;
      min-height: 27px;
      aspect-ratio: 1;
      height: auto;
      margin: 0;
      border-radius: 50%;
      background: var(--sf-red);
      background-image: none;
      border: 1px solid #fff;

      img {
        width: 13px;
        filter: brightness(0) invert(1);
      }
    }

    .sf-slider__nav--prev {
      left: 12px;
      right: auto;

      @media (width >= 769px) {
        left: 0;
      }

      img {
        transform: scaleX(-1);
      }
    }

    .sf-slider__nav--next {
      right: 12px;
      left: auto;

      @media (width >= 769px) {
        right: 0;
      }
    }
  }

  /* ボタン */
  .sf-all {
    padding-inline: 20px;

    @media (width >= 769px) {
      padding-inline: 0;
    }
  }

  .sf-btn-black,
  .sf-btn-white {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 60px;
    margin-inline: auto;
    border: 2px solid var(--sf-btn);
    border-radius: 30px;
    font-weight: 700;
    text-align: center;
  }

  .sf-btn-black {
    width: min(364px, 100%);
    padding-inline: 24px 36px;
    background: var(--sf-btn);
    color: #fff;
    font-size: 19.5px;
    line-height: 1.24;

    .sf-btn-black__arrow {
      position: absolute;
      inset-inline-end: 18px;
      width: 19px;
      filter: brightness(0) invert(1);
    }
  }

  .sf-btn-white {
    width: min(330px, 100%);
    padding-inline: 24px;
    background: #fff;
    color: var(--sf-btn);
    font-size: 16px;
    line-height: 1.31;
  }

  /* バナー / VISUMO / 動画 */
  .sf-bnr-amazon {
    padding-inline: 20px;
    margin-block-start: 28px;

    img {
      width: 100%;
      height: auto;
      aspect-ratio: 362 / 90;
    }

    @media (width >= 769px) {
      padding-inline: 0;
      margin-block-start: 80px;

      img {
        aspect-ratio: 577 / 144;
      }
    }
  }

  .sf-bnr-instagram {
    padding-inline: 20px;
    margin-block-start: 54px;

    img {
      width: 100%;
      height: auto;
      aspect-ratio: 575 / 143;
    }

    @media (width >= 769px) {
      padding-inline: 0;
      margin-block-start: 50px;
    }
  }

  .sf-visumo {
    padding-inline: 20px;
    margin-block-start: 24px;
    
    @media (width >= 769px) {
      padding-inline: 0;
      margin-block-start: 80px;
    }

    .sf-visumo__title {
      margin: 0 0 24px;
      text-align: center;

      img {
        width: min(362px, 100%);
        margin-inline: auto;
      }
    }

    .sf-visumo__embed {
      min-height: 280px;
      overflow: hidden;
      border-radius: 12px;
      background: var(--sf-gray);
    }

    .sf-btn-white {
      margin-block-start: 24px;
    }
  }

  .sf-movie {
    padding: 0 20px 56px;
    margin-block-start: 47px;

    @media (width >= 769px) {
      padding-inline: 0;
      padding-block-end: 80px;
      margin-block-start: 57px;
    }

    .sf-movie__link {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      aspect-ratio: 361 / 202;

      iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }

      @media (width >= 769px) {
        aspect-ratio: 575 / 322;
      }
    }
  }
}