/* ===============================================### 
可変設定
###=============================================== */
.lp_variable {
  /*デザインの値*/
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 450; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(
    var(--variable) * var(--ratio)
  ); /*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1); /*PCデザインの可変割合の計算式*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_variable {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .lp_variable {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .lp_variable {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}

/* ===============================================### 
初期設定
###=============================================== */
.FU251104bag {
  --font-ja: "游ゴシック体", "游ゴシック Medium", "Yu Gothic Medium",
    "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-en: "marlide-display-variable", sans-serif; /* font-variation-settings: "wght" 500;も使用 */
  --font-en02: "pragmatica", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  font-style: normal;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-pink: #f2a1b6;
  --color-pink02: #f197ae;
  color: #000000;
}

.FU251104bag * {
  box-sizing: border-box;
}

.FU251104bag img,
.FU251104bag svg {
  width: 100%;
  height: auto;
}

/* ===========### PC用設定 ###=========== */
@media screen and (min-width: 768px) {
  .FU251104bag {
    margin-bottom: calc(280 * var(--formula));
  }

  .FU251104bag .sp-visible {
    display: none;
  }

  .FU251104bag .pc-visible {
    display: block;
  }

  .FU251104bag .image-bg {
    background-color: #fff;
  }

  .FU251104bag .image-bg a:hover {
    opacity: 0.7;
  }
}

/* ===========### SP用設定 ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag {
    overflow: clip;
  }

  .FU251104bag .sp-visible {
    display: block;
  }

  .FU251104bag .pc-visible {
    display: none;
  }
}

/* ===============================================### 
left-area, right-area, center-area 設定
###=============================================== */
@media screen and (min-width: 768px) {
  .FU251104bag .main-wrap.grid-wrap {
    position: relative;
    display: grid;
    /* grid-template-columns: 1fr 45rem 1fr; */
    grid-template-columns: 1fr calc(750 * var(--formula)) 1fr;
  }

  .FU251104bag .left-area {
    position: sticky;
    grid-column: 1;
    top: 0;
    height: 100vh;
    display: grid;
    place-content: center;
    background-color: #fceaef;
  }

  .FU251104bag .center-area {
    grid-column: 2;
    overflow: clip;
  }

  .FU251104bag .right-area {
    position: sticky;
    grid-column: 3;
    top: calc(var(--header-height) / 2);
    /* top: 0; */
    height: 100vh;
    display: grid;
    place-content: center;
    background-color: #fceaef;
  }

  /************** list **************/
  .FU251104bag .right-area .menu-area {
    display: flex;
    flex-direction: column;
    gap: calc(35 * var(--formula));
    width: calc(200 * var(--formula_pc));
  }

  .FU251104bag .right-area .menu-item {
  }

  /************** text **************/
  .FU251104bag .fixed_link {
    width: fit-content;
  }

  /* .FU251104bag .link-list{
    line-height: 4;
  }

  .FU251104bag .link-list li{
    position: relative;
    font-family: var(--font-ja);
    font-size: calc(15 * (100vw / 1400));
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    color: var(--color-brown);
  }

  .FU251104bag .link-list li.select{
    opacity: 0.5;
  }

  .FU251104bag .link-list li.flex-wrapper{
    justify-content: center;
    align-items: center;
    gap: calc(30 * (100vw / 1400));
  } */

  /************** image **************/
  .FU251104bag .fixed_title {
    grid-column: 1;
    width: calc(420 * var(--formula_pc));
  }

  .FU251104bag .fixed_title.content-position,
  .FU251104bag .fixed_link.content-position {
    position: relative;
    top: calc(-57 * (100vw / 1400));
  }

  .FU251104bag .link-arrow {
    width: calc(13 * (100vw / 1400));
  }

  .FU251104bag .link-arrow img {
    vertical-align: middle;
  }
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .center-area {
    width: calc(750 * var(--formula));
    margin-inline: auto;
  }
}

/* ===============================================### 
アニメーション設定
###=============================================== */
/************** fade **************/
.FU251104bag .js-fade-in {
  opacity: 0;
  transition: all 1.2s;
}

.FU251104bag .js-fade-in.show {
  opacity: 1;
}

/************** slide **************/
.FU251104bag .product__slider {
  width: 100%;
  margin-top: calc(40 * var(--formula));
}

.FU251104bag .ranking-slider .swiper-slide {
  width: calc(580 * var(--formula));
}

.FU251104bag .product__slider .swiper-wrapper {
  transition-timing-function: linear;
}

.FU251104bag .product__slider .swiper-slide {
  width: calc(240 * var(--formula));
}

.FU251104bag .product__slider .product-image {
  /* width: 21.6rem!important; */
  width: calc(240 * var(--formula)) !important;
  margin-inline: auto;
}

.FU251104bag .swiper-container-horizontal > .swiper-pagination-bullets,
.FU251104bag .swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -45px;
}

.FU251104bag
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 9px;
}

.FU251104bag .swiper-pagination-bullet {
  background-color: #b3b3b3;
  opacity: 1;
}

.FU251104bag .swiper-pagination-bullet-active {
  background-color: #000000;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .swiper-container-horizontal > .swiper-pagination-bullets,
  .FU251104bag .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: -40px;
  }

  .FU251104bag
    .swiper-container-horizontal
    > .swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 7px;
  }
}

/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.FU251104bag .grid-wrap {
  display: grid;
}

.FU251104bag .content {
  position: relative;
  padding-top: var(--header-height);
}

.FU251104bag .content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.FU251104bag .content .content__inner {
  position: relative;
  z-index: 1;
}

/************** menu-area **************/
.FU251104bag .menu-area {
  width: calc(360 * var(--formula));
  margin-inline: auto;
}

.FU251104bag .menu-item {
}

.FU251104bag .menu-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(18 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(13 * var(--formula_pc));
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-pink);
}

.FU251104bag .menu-title a {
  display: block;
  width: 100%;
  height: 100%;
}

.FU251104bag .link-list {
  border: calc(2 * var(--formula)) solid var(--color-pink);
}

.FU251104bag .link-list li {
  position: relative;
  padding: calc(18 * var(--formula)) 0;
  font-family: var(--font-ja);
  font-size: calc(13 * var(--formula_pc));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  background-color: var(--color-white);
  /* border: calc(2 * var(--formula)) solid var(--color-pink); */
  white-space: nowrap;
}

.FU251104bag .link-list li.list-item.item02,
.FU251104bag .link-list li.list-item.item03 {
  border-top: calc(2 * var(--formula)) dotted var(--color-pink);
}

.FU251104bag .menu-item.item02 .link-list li {
  padding-left: calc(60 * var(--formula));
}

.FU251104bag .menu-item.item02 .link-list li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(20 * var(--formula));
  transform: translateY(-50%);
  width: calc(24 * var(--formula_pc));
  height: calc(33 * var(--formula_pc));
  background-repeat: no-repeat;
  background-size: contain;
}

.FU251104bag .menu-item.item02 .link-list li.item01::after {
  background-image: url("../img/icon01.png");
}

.FU251104bag .menu-item.item02 .link-list li.item02::after {
  background-image: url("../img/icon02.png");
}

.FU251104bag .menu-item.item02 .link-list li.item03::after {
  background-image: url("../img/icon03.png");
}

/************** tab **************/
.FU251104bag .tab {
  margin-top: calc(60 * var(--formula));
}

/*** list ***/
.FU251104bag .tab-list {
  display: flex;
  justify-content: center;
}

.FU251104bag .tab-list__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(240 * var(--formula));
  padding: calc(12 * var(--formula)) 0;

  font-family: var(--font-ja);
  font-size: calc(26 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  border: calc(2 * var(--formula)) solid var(--color-pink02);
  border-bottom: none;

  border-top-left-radius: calc(60 * var(--formula));
  border-top-right-radius: calc(60 * var(--formula));
  background-color: transparent;
  cursor: pointer;
}

.FU251104bag #size .tab-list__item {
  padding: calc(11 * var(--formula)) 0 calc(11 * var(--formula))
    calc(44 * var(--formula));
}

.FU251104bag #size .tab-list__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(8 * var(--formula));
  transform: translateY(-50%);
  width: calc(45 * var(--formula));
  height: calc(60 * var(--formula));
  background-repeat: no-repeat;
  background-size: contain;
}

.FU251104bag #size .tab-list__item:nth-of-type(1)::after {
  left: calc(23 * var(--formula));
  background-image: url("../img/icon01.png");
}

.FU251104bag #size .tab-list__item:nth-of-type(2)::after {
  background-image: url("../img/icon02.png");
}

.FU251104bag #size .tab-list__item:nth-of-type(3)::after {
  background-image: url("../img/icon03.png");
}

.FU251104bag #scene .tab-list__item {
  padding: calc(33 * var(--formula)) 0;
}

.FU251104bag .tab-list__item.is-btn-active {
  color: var(--color-white);
  background-color: var(--color-pink02);
}

/*** content ***/
.FU251104bag .tab-contents {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
}

.FU251104bag .tab-contents.is-contents-active {
  transition: all 0.8s 0.2s ease-out;
  opacity: 1;
  visibility: visible;
  max-height: 100%;
}

.FU251104bag .tab-contents-wrap {
  border-top: calc(4 * var(--formula)) solid var(--color-pink02);
  padding: calc(40 * var(--formula)) 0 0;
}

/************** drawer **************/
.FU251104bag.active {
  position: relative;
}

.FU251104bag.active .drawer__button.show {
  opacity: 1;
  position: fixed;
  background: none;
  width: calc(40 * var(--formula));
  height: calc(40 * var(--formula));
  right: calc(40 * var(--formula));
  top: calc(50 * var(--formula));
  z-index: 1000;
}

.FU251104bag .drawer__button.show span {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 0.1rem;
  background-color: #5c5c5c;
}

.FU251104bag.active .drawer__button.show span {
  display: block;
}

.FU251104bag .drawer__button.show span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.FU251104bag .drawer__button.show > span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.FU251104bag .drawer__button.active {
  background: none;
  width: calc(40 * var(--formula));
  height: calc(40 * var(--formula));
  right: calc(40 * var(--formula));
  top: calc(40 * var(--formula));
  /* transition: opacity 0.6s ease; */
}

.FU251104bag .drawer__button span {
  display: none;
}

.FU251104bag .drawer__button {
  opacity: 0;
  visibility: hidden;
  width: calc(170 * var(--formula));
  height: calc(170 * var(--formula));
  cursor: pointer;
  z-index: 9999;
  top: auto;
  bottom: 2%;
  right: calc(15 * var(--formula));
  background: url("../img/follow-button.png") no-repeat;
  background-size: cover;
  /* filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .2)); */
}

.FU251104bag .drawer__button.m_fixed {
  display: block;
  position: fixed;
}

.FU251104bag .drawer__button.show {
  opacity: 1;
  visibility: visible;

  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transition: opacity 1.2s ease-in-out;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.FU251104bag .drawer__button.active span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(60 * var(--formula));
  height: calc(2 * var(--formula));
  background-color: #666666;
}

.FU251104bag .drawer__button > span:first-child {
  transform: translate(-50%, calc(-50% - 0.5rem));
  transition: transform 0.3s ease;
}

.FU251104bag .drawer__button > span:last-child {
  transform: translate(-50%, calc(-50% + 0.5rem));
  transition: transform 0.3s ease;
}

/* 展開時のデザイン */
.FU251104bag .drawer__button.active span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.FU251104bag .drawer__button.active > span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* メニューのデザイン */
.FU251104bag .drawer__menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* height: -webkit-fill-available; */
  transition: opacity 0.6s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  background-color: rgba(225, 225, 225, 0.4);
}

.FU251104bag .drawer__menu.active {
  opacity: 1;
  visibility: visible;
  max-height: 100%;
}

.FU251104bag .drawer__menu .menu-area {
  display: flex;
  flex-direction: column;
  gap: calc(46 * var(--formula));
  margin-top: calc(48 * var(--formula));
}

.FU251104bag .drawer__menu__inner {
  position: relative;
  width: calc(480 * var(--formula));
  height: 100vh;
  /* height: -webkit-fill-available; */
  padding: calc(109 * var(--formula)) 0 calc(109 * var(--formula));
  margin: 0 0 0 auto;
  overflow: scroll;
  transform: translateX(100%);
  transition: transform 0.6s ease;
  background-color: #fef5f7;
  z-index: 9999;
}

.FU251104bag .drawer__menu.active .drawer__menu__inner {
  transform: translateX(0);
}

.FU251104bag .drawer__menu__title {
  font-family: var(--font-en);
  font-size: calc(54 * var(--formula));
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-pink02);
}

.FU251104bag .drawer__menu .menu-item.item03,
.FU251104bag .drawer__menu .menu-item.item05,
.FU251104bag .drawer__menu .menu-item.item06 {
  margin-top: calc(-6 * var(--formula));
}

.FU251104bag .drawer__menu .menu-title {
  padding: calc(18 * var(--formula));
  font-size: calc(28 * var(--formula));
}

.FU251104bag .drawer__menu .link-list li {
  padding: calc(22 * var(--formula)) 0;
  font-size: calc(24 * var(--formula));
}

.FU251104bag .drawer__menu .menu-item.item02 .link-list li {
  padding-left: calc(70 * var(--formula));
}

.FU251104bag .drawer__menu .menu-item.item02 .link-list li::after {
  left: calc(13 * var(--formula));
  width: calc(45 * var(--formula_pc));
  height: calc(60 * var(--formula_pc));
}

.FU251104bag .drawer__menu .menu-item.item02 .link-list li.item03,
.FU251104bag .drawer__menu .menu-item.item04 .link-list li.item03,
.FU251104bag .drawer__menu .menu-item.item05 .link-list li.item03 {
  padding-bottom: calc(17 * var(--formula));
}

.FU251104bag .drawer__bg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

body.active {
  height: 100%;
  overflow: hidden;
}

.header {
  z-index: 999;
}

/************** text **************/
.FU251104bag .content__title {
  font-family: var(--font-en);
  font-size: calc(82 * var(--formula));
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-pink02);
}

.FU251104bag .content__title span {
  display: block;
  margin-top: calc(27 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-black);
}

.FU251104bag .product-name {
  margin-top: calc(59 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.7;
  font-feature-settings: "palt";
  letter-spacing: 0.075em;
  text-align: center;
}

.FU251104bag .product__slider .product-name {
  margin-top: calc(15 * var(--formula));
  font-size: calc(24 * var(--formula));
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.FU251104bag .product-price {
  margin-top: calc(10 * var(--formula));
  font-family: var(--font-en02);
  font-size: calc(20 * var(--formula));
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
}

.FU251104bag .product__slider .product-price {
  margin-top: calc(20 * var(--formula));
}

/************** image **************/
.FU251104bag .main-image {
  width: calc(670 * var(--formula));
  margin-inline: auto;
}

/************** button **************/
.FU251104bag .button-wrap {
  position: relative;
  width: 100%;
  margin-top: calc(100 * var(--formula));
}

.FU251104bag .button-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: calc(2 * var(--formula));
  background-color: var(--color-pink02);
  z-index: -1;
}

.FU251104bag .link-button {
  width: calc(480 * var(--formula));
  margin-inline: auto;
  border-radius: 100vh;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .content {
    padding-top: var(--header-height);
  }
}

/* ===============================================### 
MV
###=============================================== */
.FU251104bag .mv {
}

.FU251104bag .mv__inner {
}

/************** image **************/
.FU251104bag .mv__image {
  width: calc(750 * var(--formula));
  margin-inline: auto;
}

/* ===============================================### 
content-nav
###=============================================== */
.FU251104bag .content-nav {
  margin-top: calc(142 * var(--formula));
}

.FU251104bag .content-nav__inner {
  width: calc(660 * var(--formula));
  margin-inline: auto;
}

.FU251104bag .content-nav .grid-wrap {
  grid-template-columns: repeat(2, 1fr);
  gap: calc(19 * var(--formula));
}

.FU251104bag .content-nav .content-nav__item {
}

/************** accordion **************/
.FU251104bag .accordion {
}

.FU251104bag .accordion__trigger {
  position: relative;
  cursor: pointer;
}

.FU251104bag .accordion__trigger::before,
.FU251104bag .accordion__trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-27 * var(--formula));
  transform: translateY(-50%);
  width: calc(24 * var(--formula));
  height: calc(2 * var(--formula));
  margin-right: calc(50 * var(--formula));
  background: var(--color-white);
  transition: opacity 0.3s, transform 0.3s;
}

.FU251104bag .accordion__trigger::after {
  transform: translateY(-50%) rotate(90deg);
}

.FU251104bag .accordion__trigger.open::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0);
}

.FU251104bag .nav-list {
}

.FU251104bag .nav-list li {
  position: relative;
  padding: calc(18 * var(--formula)) 0;
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  border-left: calc(2 * var(--formula)) solid var(--color-pink);
  border-right: calc(2 * var(--formula)) solid var(--color-pink);
  border-top: none;
  white-space: nowrap;
}

.FU251104bag .nav-list li:not(:first-of-type) {
  position: relative;
  padding: calc(18 * var(--formula)) 0;
  font-family: var(--font-ja);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  border-top: calc(2 * var(--formula)) dotted var(--color-pink);
}

.FU251104bag .nav-list li:last-of-type {
  border-bottom: calc(2 * var(--formula)) solid var(--color-pink);
}

.FU251104bag .content-nav__item.item02 .nav-list li {
  padding-left: calc(45 * var(--formula));
}

.FU251104bag .content-nav__item.item02 .nav-list li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(8 * var(--formula));
  transform: translateY(-50%);
  width: calc(36 * var(--formula));
  height: calc(48 * var(--formula));
  background-repeat: no-repeat;
  background-size: contain;
}

.FU251104bag .content-nav__item.item02 .nav-list li:nth-of-type(1)::after {
  background-image: url("../img/icon01.png");
}

.FU251104bag .content-nav__item.item02 .nav-list li:nth-of-type(2)::after {
  background-image: url("../img/icon02.png");
}

.FU251104bag .content-nav__item.item02 .nav-list li:nth-of-type(3)::after {
  background-image: url("../img/icon03.png");
}

/************** text **************/
.FU251104bag .nav-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(27 * var(--formula));
  font-family: var(--font-ja);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-pink);
}

.FU251104bag .nav-title a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* ===============================================### 
コンテンツ01
###=============================================== */
.FU251104bag .content01 {
  margin-top: calc(70 * var(--formula));
  padding-bottom: calc(74 * var(--formula));
}

.FU251104bag .content01 .content__inner {
}

.FU251104bag .content01::after {
  top: calc(72 * var(--formula));
  height: calc(1700 * var(--formula));
  background-image: url("../img/bg01.png");
  pointer-events: none;
}

.FU251104bag .content01 .content__item {
  margin-top: calc(58 * var(--formula));
}

/************** slide **************/
.FU251104bag .ranking-slider .product-item {
  position: relative;
  padding: calc(50 * var(--formula)) 0 calc(40 * var(--formula));
}

.FU251104bag .ranking-slider .product-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(580 * var(--formula));
  height: calc(753 * var(--formula));
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}

.FU251104bag .ranking-slider .product01 .product-item::after {
  background-image: url("../img/ranking/frame01.svg");
}

.FU251104bag .ranking-slider .product02 .product-item::after {
  background-image: url("../img/ranking/frame02.svg");
}

.FU251104bag .ranking-slider .product03 .product-item::after {
  background-image: url("../img/ranking/frame03.svg");
}

.FU251104bag .ranking-slider .product-image {
  width: calc(500 * var(--formula));
  margin-top: calc(29 * var(--formula));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .content01 {
    margin-top: calc(-3 * var(--formula));
  }

  .FU251104bag .content01::after {
    top: calc(141 * var(--formula));
  }
}

/* ===============================================### 
コンテンツ02
###=============================================== */
.FU251104bag .content02 {
  margin-top: calc(191 * var(--formula));
}

.FU251104bag .content02 .content__inner {
}

.FU251104bag .content02::after {
  top: calc(28 * var(--formula));
  height: calc(2400 * var(--formula));
  background-image: url("../img/bg02.png");
  pointer-events: none;
}

.FU251104bag .content02 .content__item {
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .content02 {
    margin-top: calc(119 * var(--formula));
  }

  .FU251104bag .content02::after {
    top: calc(98 * var(--formula));
  }
}

/* ===============================================### 
コンテンツ03
###=============================================== */
.FU251104bag .content03 {
  margin-top: calc(194 * var(--formula));
}

.FU251104bag .content03 .content__inner {
}

.FU251104bag .content03::after {
  top: calc(30 * var(--formula));
  height: calc(2000 * var(--formula));
  background-image: url("../img/bg03.png");
  pointer-events: none;
}

.FU251104bag .content03 .content__item {
  width: fit-content;
  margin-top: calc(60 * var(--formula));
  margin-inline: auto;
}

/************** icon-list **************/
.FU251104bag .color-icon-list {
  width: calc(650 * var(--formula));
  margin-top: calc(61 * var(--formula));
  margin-inline: auto;
}

.FU251104bag .color-icon-list.grid-wrap {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(19 * var(--formula));
}

.FU251104bag .color-icon {
  display: flex;
  justify-content: center;
  align-items: center;

  width: calc(203 * var(--formula));

  font-family: var(--font-en02);
  font-size: calc(28 * var(--formula));
  font-weight: var(--fw-medium);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-white);
  border-radius: 100vh;
}

.FU251104bag .color-icon a {
  display: block;
  width: 100%;
  height: 100%;
  padding: calc(28 * var(--formula)) calc(10 * var(--formula));
}

.FU251104bag .color-icon.button a {
  padding: 0;
}

.FU251104bag .color-icon.white {
  color: #5c5c5c;
}

.FU251104bag .color-icon.button {
  padding: 0;
}

.FU251104bag .color-icon.black {
  background-color: #5c5c5c;
  border: 2px solid #5c5c5c;
}

.FU251104bag .color-icon.white {
  background-color: #fff;
  border: calc(2 * var(--formula)) solid #999999;
}

.FU251104bag .color-icon.pink {
  background-color: #ffa6a6;
  border: 2px solid #ffa6a6;
}

.FU251104bag .color-icon.blue {
  background-color: #a5b9d9;
  border: 2px solid #a5b9d9;
}

.FU251104bag .color-icon.red {
  background-color: #dd7f80;
  border: 2px solid #dd7f80;
}

.FU251104bag .color-icon.yellow {
  background-color: #fdd373;
  border: 2px solid #fdd373;
}

.FU251104bag .color-icon.orange {
  background-color: #f9a94b;
  border: 2px solid #f9a94b;
}

.FU251104bag .color-icon.green {
  background-color: #6dad8e;
  border: 2px solid #6dad8e;
}

.FU251104bag .color-icon.purple {
  background-color: #c9b0c6;
  border: 2px solid #c9b0c6;
}

.FU251104bag .color-icon.gray {
  background-color: #b3b3b3;
  border: 2px solid #b3b3b3;
}

.FU251104bag .color-icon.brown {
  background-color: #a98f7d;
  border: 2px solid #a98f7d;
}

.FU251104bag .color-icon.button {
  background-color: #f197ae;
  /* border: 2px solid #F197AE; */
}

/************** image **************/
.FU251104bag .content03 .content__image {
  width: calc(670 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .content03 {
    margin-top: calc(122 * var(--formula));
  }

  .FU251104bag .content03::after {
    top: calc(100 * var(--formula));
  }
}

/* ===============================================### 
コンテンツ04
###=============================================== */
.FU251104bag .content04 {
  margin-top: calc(186 * var(--formula));
}

.FU251104bag .content04 .content__inner {
}

.FU251104bag .content04::after {
  top: calc(30 * var(--formula));
  height: calc(2400 * var(--formula));
  background-image: url("../img/bg04.png");
  pointer-events: none;
}

.FU251104bag .content04 .content__item {
}

.FU251104bag .content04 .tab-contents-wrap {
  padding: calc(40 * var(--formula)) 0 calc(100 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .content04 {
    margin-top: calc(116 * var(--formula));
  }

  .FU251104bag .content04::after {
    top: calc(100 * var(--formula));
  }
}

/* ===============================================### 
コンテンツ05
###=============================================== */
.FU251104bag .content05 {
  margin-top: calc(91 * var(--formula));
}

.FU251104bag .content05 .content__inner {
}

.FU251104bag .content05::after {
  top: calc(30 * var(--formula));
  height: calc(2400 * var(--formula));
  background-image: url("../img/bg05.png");
  pointer-events: none;
}

.FU251104bag .content05 .content__item {
}

.FU251104bag .content05 .tab-contents-wrap {
  padding: calc(34 * var(--formula)) 0 calc(103 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .content05 {
    margin-top: calc(21 * var(--formula));
  }

  .FU251104bag .content05::after {
    top: calc(100 * var(--formula));
  }

  .FU251104bag .content05 .tab {
    margin-top: calc(58 * var(--formula));
  }
}

/* ===============================================### 
コンテンツ06
###=============================================== */
.FU251104bag .content06 {
  margin-top: calc(190 * var(--formula));
  margin-bottom: calc(160 * var(--formula));
}

.FU251104bag .content06 .content__inner {
}

.FU251104bag .content06::after {
  top: calc(30 * var(--formula));
  height: calc(1954 * var(--formula));
  background-image: url("../img/bg06.png");
  pointer-events: none;
}

.FU251104bag .content06 .content__item {
}

.FU251104bag .content06 .button-wrap {
  margin-top: calc(100 * var(--formula));
}

/************** image **************/
.FU251104bag .content06 .content__image {
  width: calc(670 * var(--formula));
  margin-top: calc(58 * var(--formula));
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .FU251104bag .content06 {
    margin-top: calc(21 * var(--formula));
    margin-bottom: calc(362 * var(--formula));
  }

  .FU251104bag .content06::after {
    top: calc(100 * var(--formula));
  }
}