@charset "UTF-8";
/* ############# ベース設定 ############# */
/* font-face */
@font-face {
  font-family: "dripicons";
  src: url("../fonts/dripicons-v2.eot");
}
@font-face {
  font-family: "dripicons";
  src: url("../fonts/dripicons-v2.woff") format("woff"), url("../fonts/dripicons-v2.ttf") format("truetype"), url("../fonts/dripicons-v2.otf") format("opentype");
}
/* -----------------------------------------------------------------------
## ベース ##################################################
----------------------------------------------------------------------- */
:root{
  --content-size: 375px;
  --content-inner-size: 1160px;
  --content-max-size: 1320px;
  --kv-inner-size: 1400;
  --content-padding: 24px;
  --color-main: #fce340;
  --color-sub: #5ac1ee;
  --color-accent: #ff458d; /* ボタン用アクセントカラー（ピンク） */
  --box-radius: clamp(10px, calc(10px / var(--content-size) * 100vw), 40px);

  --perseVal: var(--el-size, 1em) / var(--content-size) * 100%;

  --clamp-size: clamp(var(--clamp-size-min, 1em), calc(var(--clamp-size-min, 1em) / var(--content-size) * 100vw), var(--clamp-size-max, 1em));
}

.sp_ff {
  display: block;
}

.sp_il_ff {
  display: inline;
}

.pc_ff, .pc_il_ff {
  display: none;
}

.spbr_fc {
  display: inline;
}

.pcbr_fc {
  display: none;
}

@media (min-width: 768px) {
  .pc_ff {
    display: block;
  }
  .pc_il_ff {
    display: inline;
  }
  .sp_ff, .sp_il_ff {
    display: none;
  }
  .spbr_fc {
    display: none;
  }
  .pcbr_fc {
    display: inline;
  }
}
body .is-fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

.mainContents_fc {
  position: relative;
  color: #333;
  font-size: clamp(14px, calc(14px / var(--content-size) * 100vw), 16px);
  font-family: "游ゴシック", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif !important;
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-feature-settings: initial;
          font-feature-settings: initial;
  overflow: hidden;
}
@media (min-width: 768px) {
  .mainContents_fc {
    font-size: 1.3333333333vw;
  }
}
@media (min-width: 768px) and (min-width: 1200px) {
  .mainContents_fc {
    font-size: 16px;
  }
}
.mainContents_fc a:hover {
  text-decoration: none;
}
.mainContents_fc button {
  display: block;
  width: 100%;
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  outline: none;
  color: inherit;
  font-size: 100%;
  font-family: inherit;
}
.mainContents_fc img, .mainContents_fc svg {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .mainContents_fc img, .mainContents_fc svg {
    width: auto;
    max-width: 100%;
  }
}

.fca_cat-hero{
  .fca_container__in{
    max-width: 100%;
  }
  .fca_container{
    padding: 0;
  }
}

/* -----------------------------------------------------------------------
## コンテンツ ##################################################
----------------------------------------------------------------------- */
.salepage_fc {
  position: relative;

  .main_fc {
    background-color: var(--color-sub);
    padding-bottom: clamp(100px, calc(100px / var(--content-size) * 100vw), 150px);
  }
  .c-whiteBox {
    position: relative;
    padding: clamp(40px, calc(40px / var(--content-size) * 100vw), 60px) clamp(20px, calc(20px / var(--content-size) * 100vw), 80px) clamp(20px, calc(20px / var(--content-size) * 100vw), 80px);
    border-radius: var(--box-radius);
    background-color: #fff;
    &::before {
      display: block;
      position: absolute;
      left: 50%;
      top: 0;
      width: clamp(26px, calc(26px / var(--content-size) * 100vw), 47px);
      aspect-ratio: 76 / 142;
      background-image: url(../images/light_title.png);
      background-repeat: no-repeat;
      background-size: contain;
      translate: -50% -50%;
      content: "";
    }
  }
  .sectionTitle {
    position: relative;
    text-align: center;
    &::after {
      display: block;
      position: absolute;
      left: 50%;
      top: -24px;
      width: calc(273 / 278 * 100%);
      aspect-ratio: 548 / 140;
      background-image: url(../images/tinkle_title_sp.png);
      background-repeat: no-repeat;
      background-size: contain;
      translate: -50% 0;
      content: "";
      @media (min-width: 768px) {
        top: -35px;
        width: calc(651px / var(--content-inner-size) * 100%);
        background-image: url(../images/tinkle_title_pc.png);
      }
    }
  }

  .c-button a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: clamp(54px, calc(54px / var(--content-size) * 100vw), 90px);
    border: 2px solid currentColor;
    border-radius: 5rem;
    background-color: #fff;
    color: var(--color-accent);
    font-size: clamp(14px, calc(14px / var(--content-size) * 100vw), 24px);
    text-align: center;
    font-weight: bold;
    &::after {
      display: block;
      position: absolute;
      right: 1em;
      top: 50%;
      font-family: "dripicons";
      transform: translateY(-50%);
      content: "V";
    }
    @media (hover) {
      transition: .5s;
      &:hover {
        background-color: var(--color-accent);
        color: #fff;
      }
    }
  }

  .pickup,
  .recommend,
  .categories {
    max-width: var(--content-max-size);
    padding-inline: var(--content-padding);
    box-sizing: content-box;
    margin-inline: auto
  }

  .kv_fc {
    position: relative;
    background-color: var(--color-main);
    padding-top: clamp(50px, calc(50px / var(--content-size) * 100vw), 88px);
    color: #fff;
    contain: paint;
    @media (min-width: 768px) {
      margin-bottom: calc(-300 / 1920 * 100%);
    }
    &::before {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: clamp(180px, calc(180px / var(--content-size) * 100vw), 500px);
      aspect-ratio: 180/50;
      background-image: url(../images/bg_left-top.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      content: "";
      @media (min-width: 768px) {
        aspect-ratio: 500/220;
      }
    }
    &::after {
      display: block;
      position: absolute;
      right: 0;
      bottom: -1px;
      width: 101%;
      aspect-ratio: 2880/893;
      background-image: url(../images/bg_right-bottom.png);
      background-repeat: no-repeat;
      background-size: cover;
      z-index: 10;
      content: "";
    }

    .kv__title_fc {
      position: relative;
      margin-inline: auto;
      width: calc(1160 / var(--kv-inner-size) * 100%);
      max-width: var(--content-inner-size);
      padding-inline: var(--content-padding);
      container-type: inline-size;
      box-sizing: content-box;
      @media (min-width: 768px) {
        padding-bottom: calc(430 /  1920 * 100%);
      }
      &::before {
        display: block;
        position: fixed;
        left: 0;
        top: 28px;
        width: calc(352 / 375 * 100%);
        aspect-ratio: 704 / 344;
        background-image: url(../images/kv_cloud_sp.png);
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        @media (min-width: 768px) {
          position: fixed;
          top: 80px;
          left: auto;
          right: 0;
          width: 100%;
          max-width: 1838px;
          background-image: url(../images/kv_cloud_pc.png);
          aspect-ratio: 1838 / 642;
        }
      }
      .kv__title__main_fc {
        margin-inline: auto;
        @media (min-width: 768px) {
          margin-left: 0;
          width: calc(628 / var(--kv-inner-size) * 100%);
        }
      }
      
      .kv__title__lead_fc {
        margin-top: 24px;
        color: #3c494c;
        font-weight: bold;
        font-size: calc(20 / 1160 * 100cqw);
        line-height: 2;
        @media (max-width: 767px) {
          margin-top: 16px;
          font-size: 12px;
          text-align: center;
        }
      }
    }
    .kv__btn_fc {
      position: absolute;
      right: calc(23 / 375 * 100%);
      bottom: 20px;
      width: calc(103 / 375 * 100%);
      max-width: 170px;
      height: auto;
      aspect-ratio: 1;
      z-index: 1000;
      container-type: inline-size;
      @media (min-width: 768px) {
        left: 35vw;
        top: min(calc(450 / var(--kv-inner-size) * 100%), 288px);
        width: calc(170 / var(--kv-inner-size) * 100%);
      }
      @media (min-width: 1300px) {
        left: calc(50% - 200px);
      }
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        gap: 8px;
        width: 100%;
        aspect-ratio: 1;
        padding-top: 1em;
        border: 4px solid #000;
        border-radius: 50%;
        background-color: var(--color-accent); 
        color: #ffffff; 
        font-size: calc(18 / 170 * 100cqw);
        font-weight: bold;
        text-align: center;
        line-height: 1.4;
        z-index: 100;
        &::before {
          display: block;
          position: absolute;
          top: 75%;
          left: 100%;
          width: 4px;
          height: calc(45 / 170 * 100cqw);
          background-color: #000;
          border-radius: 5em;
          rotate: -45deg;
          z-index: -1;
          content: "";
        }
        &::after {
          display: block;
          font-size: 1.25em;
          font-family: "dripicons";
          line-height: 1;
          content: "k";
        }
      }
    }

    .kv__images_fc {
      position: relative;
      padding-bottom: 5%;
      z-index: 1;
      @media (min-width: 768px) {
        position: absolute;
        right: 0;
        bottom: calc(320 / 1920 * 100%);
        width: calc(1020 / 1920 * 100%);
        max-width: 888px;
      }
      @media (min-width: 1600px) {
        bottom: auto;
        top: -5%;
      }
      .kv__images__main_fc {
        position: relative;
        width: 100%;
        &::before {
          display: block;
          position: absolute;
          left: 50%;
          top: 0;
          width: calc(36 / 375 * 100%);
          max-width: 85px;
          aspect-ratio: 143/233;
          background-image: url(../images/kv_light.png);
          background-repeat: no-repeat;
          background-size: contain;
          translate: -70% -110%;
          opacity: 0;
          animation: shine .5s ease forwards 1.5s;
          z-index: 1;
          content: "";
          @media (min-width: 768px) {
            translate: -100% -120%;
          }
        }
      }
      .kv__images__goods_fc {
        position: relative;
        width: 100%;
        margin-bottom: -25%;
        scale: 0;
        z-index: -1;
        transform-origin: center bottom;
        animation: goods .5s ease forwards 0.5s;
        @media (min-width: 768px) {
          margin-bottom: -22%;
        }
        &::before {
          display: block;
          position: absolute;
          left: 50%;
          top: 20%;
          width: 100%;
          aspect-ratio: 1067/851;
          background-image: url(../images/kv_shine_sp.png);
          background-repeat: no-repeat;
          background-size: contain;
          translate: -50% 0;
          z-index: -1;
          opacity: 0;
          content: "";
          animation: shine .5s ease forwards 1s;
          @media (min-width: 768px) {
            top: 32%;
            translate: -50% 0;
            background-image: url(../images/kv_shine.png);
          }
        }
        &::after {
          display: block;
          position: absolute;
          left: 50%;
          top: 0;
          width: 100%;
          aspect-ratio: 1067/851;
          background-image: url(../images/kv_tinkle_sp.png);
          background-repeat: no-repeat;
          background-size: contain;
          translate: -50% 0;
          opacity: 0;
          z-index: -1;
          content: "";
          animation: tinkle 1s ease forwards 1s alternate infinite;
          @media (min-width: 768px) {
            top: -5%;
            background-image: url(../images/kv_tinkle.png);
          }
        }
      }
    }
  }


  .pickup__title {
    img {
      width: calc(152 / 278 * 100%);
      max-width: 254px;
    }
  }
  .pickup__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: clamp(24px, calc(24px / var(--content-size) * 100vw), 52px);
    @media (min-width: 768px) {
      grid-template-columns: repeat(auto-fill, minmax(min(100%,170px), 1fr));
      gap: 28px;
    }

    .pickup__item {
      a {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
      }
    }

    .pickup__name {
      line-height: 1.8;
    }
    .pickup__price {
      font-size: clamp(20px, calc(20px / var(--content-size) * 100vw), 22px);
      font-weight: bold;
      font-family: "Arial", sans-serif;
      line-height: 1;
      .origin {
        display: inline-block;
        position: relative;
        color: #999;
      }
      .origin::after {
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 4px;
        border-top: 1px solid #EF3B23;
        border-bottom: 1px solid #EF3B23;
        transform: translateY(-50%);
        content: "";
      }
      .reduce {
        display: block;
        margin-top: 0.25em;
        color: #EF3B23;
      }
      .reduce::before {
        display: inline-block;
        right: 0.25em;
        content: "→";
      }
    }
  }

  .recommend,
  .categories {
    margin-top: clamp(60px, calc(60px / var(--content-size) * 100vw), 120px);
  }

  .recommend__title {
    margin-bottom: clamp(27px, calc(27px / var(--content-size) * 100vw), 52px);
    img {
      width: calc(257 / 278 * 100%);
      max-width: 671px;
    }
  }
  .categories__title {
    margin-bottom: clamp(30px, calc(30px / var(--content-size) * 100vw), 55px);
    img {
      width: calc(154 / 278 * 100%);
      max-width: 257px;
    }
  }

  .recommend {
    .c-button {
      max-width: 400px;
      margin-inline: auto;
      margin-top:clamp(24px, calc(24px / var(--content-size) * 100vw), 40px);
    }
  }

  .categories__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, calc(24px / var(--content-size) * 100vw), 40px);
  }
  .categories__item {
    flex-basis: 100%;
    @media (min-width: 768px) {
      max-width: 280px;
    }
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
      height: clamp(54px, calc(54px / var(--content-size) * 100vw), 56px);
      background-color: var(--color-accent); 
      border-radius: 5rem;
      color: #fff;
      font-weight: bold;
      text-align: center;
      &::after {
        display: block;
        position: absolute;
        right: 1em;
        top: 50%;
        font-family: "dripicons";
        transform: translateY(-50%);
        content: "V";
      }
      @media (hover) {
        transition: .5s;
        &:hover {
          background-color: var(--color-accent);
          color: #fff;
        }
      }
    }
  }

  /* ############# ボタンの設定 ############# */
  .fixed-btn_fc {
    position: absolute;
    right: 24px;
    bottom: 30px;
    z-index: 100;
    width: clamp(240px, 25vw, 360px);
    /*filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));*/
  }

  .fixed-btn_fc a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: clamp(48px, calc(48px / var(--content-size) * 100vw), 64px) !important;
    background-color: var(--color-main) !important;
    color: #3c494c !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: clamp(14px, 1.2vw, 18px) !important;
    border-radius: 5rem !important;
    position: relative !important;
    padding-right: 2.2em !important;
    border: none !important;
    transition: 0.3s;
  }

  .fixed-btn_fc a::after {
    display: block !important;
    position: absolute !important;
    right: 1.2em !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 6px 0 6px 10px !important;
    border-color: transparent transparent transparent #3c494c !important;
  }

  .fixed-btn_fc a:hover {
    opacity: 0.8 !important;
  }

  @media (max-width: 767px) {
    .fixed-btn_fc {
      right: 12px;
      bottom: 20px;
      width: 200px;
    }
    .fixed-btn_fc a {
      height: 44px !important;
      font-size: 13px !important;
      padding-right: 1.8em !important;
    }
    .fixed-btn_fc a::after {
      border-width: 5px 0 5px 8px !important;
      right: 0.8em !important;
    }
  }
	
  /* --- pickup__list2 追加スタイル --- */
  .pickup__list2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* SP: 2カラム */
    gap: 15px;
    margin-top: clamp(24px, calc(24px / var(--content-size) * 100vw), 52px);
    list-style: none; /* デフォルトのドットを消去 */
    padding: 0;
  }

  @media (min-width: 768px) {
    .pickup__list2 {
      grid-template-columns: repeat(6, 1fr); /* PC: 6カラム */
      gap: 28px;
    }
  }

  /* リストアイテム内の基本構造（figureベースに調整） */
  .pickup__list2 li figure {
    margin: 0; /* ブラウザデフォルトのマージンをリセット */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pickup__list2 li a {
    text-decoration: none;
    color: inherit;
  }

  .pickup__list2 li img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  /* タイトル（商品名）のスタイル */
  .pickup__list2 .title {
    line-height: 1.6;
    font-size: clamp(14px, calc(14px / var(--content-size) * 100vw), 16px);
    margin: 0 0 8px 0;
    letter-spacing: 0.05em;
  }

  /* 価格エリアを内包するpタグ（Flexboxで順序入れ替え） */
  .pickup__list2 figcaption > p {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 金額どうしの隙間 */
    margin: 0;
  }

  /* 値引き前価格（上に表示するため order: 1） */
  .pickup__list2 .strike_price {
    order: 1;
    display: inline-block;
    align-self: flex-start; /* テキストの長さに枠を合わせる */
    position: relative;
    color: #999;
    /* SP: 16px / PC: 18px 前後で調整 */
    font-size: clamp(16px, calc(16px / var(--content-size) * 100vw), 18px);
    font-weight: bold;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
  }

  /* 二重線風の打ち消し線 */
  .pickup__list2 .strike_price::after {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 4px; 
    border-top: 1px solid #EF3B23; /* 打ち消し線も指定の赤 */
    border-bottom: 1px solid #EF3B23;
    transform: translateY(-50%);
    content: "";
  }

  /* セール価格（下に表示するため order: 2） */
  .pickup__list2 .sale_price {
    order: 2;
    display: block;
    color: #EF3B23; /* 指定の赤色 */
    /* ★SP: 20px / PC: 22px に設定 */
    font-size: clamp(20px, calc(20px / var(--content-size) * 100vw), 22px);
    font-weight: bold;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
  }

  /* 矢印の追加 */
  .pickup__list2 .sale_price::before {
    content: "→";
    margin-right: 4px;
  }
  /* --- pickup__list2 追加ここまで --- */	

} /* .salepage_fc の閉じタグ - ここでネストを終了させる */

/* ############# アニメーション設定 - ネストの外に記述する ############# */
@keyframes goods {
  0% {
    translate: 0 50%;
    scale: 0;
  }
  100% {
    translate: 0 0;
    scale: 1;
  }
}
@keyframes shine {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tinkle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}