@charset "UTF-8";
/* --- デフォルトCSS設定 --- */

/* SP/PC共通のページ設定用デフォルトCSS */
#FU251030outer {
  /*デザインの値*/
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 460; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(
    var(--variable) * var(--ratio)
  ); /*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1); /*PCデザインの可変割合の計算式*/
  --dark-gray: #333333;
  --gray: #333333;
  --beige: #f2f1f2;
  --brown: #9d7569;
  --pink: #efada9;
  --light-orange: #f9f0ec;
  --blue: #5376a1;
  --lime: #c1bfa1;
  --white: #ffffff;
  --yu-gochic: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --abacaxi: "abacaxi-latin-variable", sans-serif;
  --font-weight-regular: "wght" 400;
  --font-weight-medium: "wght" 500;
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  #FU251030outer {
    --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) {
  #FU251030outer {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

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

#FU251030outer .model-01__frame picture {
  display: block;
  width: 100%;
  height: 100%;
}
#FU251030outer .lp-left-area__mv-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#FU251030outer img {
  display: block;
  width: 100%;
  height: auto;
}

#FU251030outer h2,
#FU251030outer h3,
#FU251030outer p,
#FU251030outer li {
  margin-block: calc((1em - 1lh) / 2);
}

#FU251030outer .invisible-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ////////////////////////////////////////////////////////
  共通設定
//////////////////////////////////////////////////////// */
#FU251030outer .splide__pagination {
  position: absolute;
  bottom: calc(-42 * var(--formula));
}

#FU251030outer .section-settings {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#FU251030outer [class*="section"][class*="-inner"] {
  width: calc(460 * var(--formula_pc));
  display: flex;
  flex-direction: column;
  align-items: center;
}
#FU251030outer [class^="model-"] {
  position: relative;
}

#FU251030outer [class^="model-"]::after {
  content: "";
  background-color: var(--white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#FU251030outer [class$="-h-cont"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#FU251030outer [class*="section"][class$="-h"] {
  font-family: var(--abacaxi);
  font-size: calc(60 * var(--formula));
  line-height: 1.1;
  letter-spacing: 0.035em;
  text-align: center;
  font-variation-settings: var(--font-weight-medium);
  white-space: nowrap;
}

#FU251030outer [class^="section01-txt"] {
  font-family: var(--yu-gochic);
  color: var(--dark-gray);
  font-size: calc(24 * var(--formula));
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-align: center;
}
#FU251030outer [class$="-color-list"] {
  font-family: var(--abacaxi);
  color: var(--gray);
  font-size: calc(22 * var(--formula));
  line-height: 1.59;
  letter-spacing: 0.035em;
  text-align: center;
  font-variation-settings: var(--font-weight-regular);
  display: flex;
  justify-content: center;
  gap: calc(9 * var(--formula));
}

#FU251030outer [class$="-item-list"] {
  font-family: var(--abacaxi);
  color: var(--gray);
  font-size: calc(20 * var(--formula));
  line-height: 2.5;
  letter-spacing: 0.05em;
  text-align: center;
  font-variation-settings: var(--font-weight-regular);
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--formula));
  align-items: center;
}

#FU251030outer [class$="-item-list"] li {
  display: flex;
  gap: calc(15 * var(--formula));
}

#FU251030outer [class$="-cl--active"] {
  position: relative;
}

#FU251030outer [class$="-cl--active"]::after {
  content: "";
  position: absolute;
  width: 110%;
  height: calc(2 * var(--formula));
  bottom: calc(2 * var(--formula));
  background-color: black;
  left: 50%;
  transform: translateX(-50%);
}

.masked-image {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /*
   * マスクの構成:
   * 1. 完全に黒（見える）領域: 100%
   * 2. ぼかし領域: 30% (ご要望)
   * 3. 完全に透明（隠す）領域: 100%
   *
   * 合計サイズ = 100 + 30 + 100 = 230%
   */
  -webkit-mask-size: 100% 230%;
  mask-size: 100% 230%;

  /*
   * グラデーションの比率計算 (全体 230% に対して)
   * A: 黒の終わり = 100% / 230% = 43.47...% (約 43.5%)
   * B: 透明の始まり = (100% + 30%) / 230% = 56.52...% (約 56.5%)
   */
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 60%);

  /* GSAPでアニメーションさせるため、開始位置は 100% */
  -webkit-mask-position: 0% 100%;
  mask-position: 0% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ////////////////////////////////////////////////////////
  レイアウト設定用セレクタ
//////////////////////////////////////////////////////// */
#FU251030outer {
  font-feature-settings: "palt";
  width: 100%;
  display: flex;
  position: relative;
  margin-bottom: calc(200 * var(--formula));
  overflow: clip;
}
#FU251030outer .lp-left-area {
  transition: padding-top 0.3s ease;
  position: sticky;
  top: var(--lpHeaderHeight);
  height: calc(100vh - var(--lpHeaderHeight));
  flex: 1;
  padding-block: calc(20 * var(--formula));
  background-color: #fdd4d6;
}

#FU251030outer .title_logo {
  position: absolute;
  top: 49.5%;
  left: 49.8%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

#FU251030outer .model-01 {
  z-index: 1;
  position: relative;
}

#FU251030outer .lp-main-area {
  flex: 1;
}

#FU251030outer .section01 {
  background-color: var(--white);
  padding-top: calc(121 * var(--formula));
  padding-bottom: calc(123 * var(--formula));
}

#FU251030outer .section01-txt1 {
  margin-bottom: calc(43 * var(--formula));
}

#FU251030outer .section01-txt2 {
  margin-bottom: calc(45 * var(--formula));
}

#FU251030outer .section02 {
  background-color: var(--beige);
  padding-top: calc(100 * var(--formula));
  padding-bottom: calc(183 * var(--formula));
}

#FU251030outer .section02-h-cont {
  display: flex;
  flex-direction: column;
}

#FU251030outer .section02-h {
  margin-top: calc(24 * var(--formula));
  margin-bottom: calc(36 * var(--formula));
  color: var(--brown);
  margin-left: calc(3 * var(--formula));
}

#FU251030outer .section02-color-list {
  margin-bottom: calc(65 * var(--formula));
}

#FU251030outer .section02-color-list li:nth-child(2) {
  margin-left: calc(-4 * var(--formula));
  margin-right: calc(3 * var(--formula));
}

#FU251030outer .section02-color-list li:nth-child(4) {
  margin-right: calc(2 * var(--formula));
}

#FU251030outer .section02-cl--active {
  color: var(--brown);
}

#FU251030outer .section02-cl--active::after {
  background-color: var(--brown);
  width: 120%;
}

#FU251030outer .model-02 {
  margin-bottom: calc(60 * var(--formula));
}

#FU251030outer .section02-item-list {
  margin-top: calc(61 * var(--formula));
}

#FU251030outer .section02-item-list li:nth-child(1) span:nth-child(1) {
  margin-left: calc(5 * var(--formula));
}
#FU251030outer .section02-item-list li:nth-child(2) {
  margin-left: calc(3 * var(--formula));
}

#FU251030outer .section03 {
  padding-top: calc(180 * var(--formula));
  padding-bottom: calc(183 * var(--formula));
}

#FU251030outer .section03-h {
  margin-top: calc(25 * var(--formula));
  margin-bottom: calc(35 * var(--formula));
  color: var(--pink);
  margin-left: calc(2 * var(--formula));
}

#FU251030outer .section03-color-list {
  margin-bottom: calc(65 * var(--formula));
  margin-left: calc(1 * var(--formula));
}

#FU251030outer .section03-color-list li:nth-child(2) {
  margin-left: calc(1 * var(--formula));
}
#FU251030outer .section02-color-list li:nth-child(3) {
  margin-right: calc(1 * var(--formula));
}

#FU251030outer .section03-cl--active {
  color: var(--pink);
}

#FU251030outer .section03-cl--active::after {
  background-color: var(--pink);
  width: 120%;
}

#FU251030outer #slider1 {
  width: calc(660 * var(--formula));
}

#FU251030outer #slider1 .splide__pagination__page {
  background-color: #f5cecb;
  height: calc(12 * var(--formula));
  width: calc(12 * var(--formula));
  margin: calc(10 * var(--formula));
}
#FU251030outer #slider1 .splide__pagination__page.is-active {
  background-color: #efada9;
  transform: scale(1);
}

#FU251030outer .splide__slide {
  width: calc(660 * var(--formula));
}

#FU251030outer .section03-item-list {
  margin-top: calc(93 * var(--formula));
}

#FU251030outer .section04 {
  background-color: var(--light-orange);
  padding-top: calc(80 * var(--formula));
  padding-bottom: calc(183 * var(--formula));
}

#FU251030outer .section04-inner {
  margin-top: calc(100 * var(--formula));
}

#FU251030outer .section04-h-cont {
  margin-top: calc(100 * var(--formula));
  gap: calc(1 * var(--formula));
  margin-bottom: calc(57 * var(--formula));
  flex-direction: row;
}

#FU251030outer .section04-h {
  color: var(--brown);
  transform: translateY(calc(45 * var(--formula)));
}

#FU251030outer .section04-color-list {
  margin-bottom: calc(65 * var(--formula));
}

#FU251030outer .section04-color-list li:nth-child(2) {
  margin-left: calc(2 * var(--formula));
}
#FU251030outer .section04-color-list li:nth-child(3) {
  margin-left: calc(2 * var(--formula));
}
#FU251030outer .section04-color-list li:nth-child(4) {
  margin-left: calc(1 * var(--formula));
}

#FU251030outer .section04-cl--active {
  color: var(--brown);
}

#FU251030outer .section04-cl--active::after {
  background-color: var(--brown);
}

#FU251030outer .model-05 {
  z-index: 5;
}

#FU251030outer .model-06 {
  margin-top: calc(-40 * var(--formula));
  z-index: 1;
}

#FU251030outer .section04-item-list {
  margin-top: calc(61 * var(--formula));
}

#FU251030outer .section04-item-list li:nth-child(1) span:nth-child(1) {
  margin-left: calc(4 * var(--formula));
  margin-right: calc(-2 * var(--formula));
}

#FU251030outer .section04-item-list li:nth-child(1) span:nth-child(2) {
  margin-right: calc(-3 * var(--formula));
}
#FU251030outer .section04-item-list li:nth-child(2) span:nth-child(1) {
  margin-left: calc(3 * var(--formula));
}
#FU251030outer .section05 {
  padding-top: calc(180 * var(--formula));
  padding-bottom: calc(184 * var(--formula));
}

#FU251030outer .section05-h {
  margin-top: calc(25 * var(--formula));
  margin-bottom: calc(35 * var(--formula));
  color: var(--dark-gray);
  margin-left: calc(3 * var(--formula));
}

#FU251030outer .section05-color-list {
  margin-bottom: calc(65 * var(--formula));
}

#FU251030outer .section05-color-list li:nth-child(2) {
  margin-left: calc(2 * var(--formula));
  margin-right: calc(1 * var(--formula));
}
#FU251030outer .section05-color-list li:nth-child(3) {
  margin-left: calc(1 * var(--formula));
  margin-right: calc(2 * var(--formula));
}

#FU251030outer .section05-cl--active {
  color: var(--dark-gray);
}

#FU251030outer .section05-cl--active::after {
  background-color: var(--dark-gray);
  transform: translateX(-55%);
  width: 120%;
}

#FU251030outer .model-07 {
  margin-bottom: calc(20 * var(--formula));
}

#FU251030outer .section05-item-list {
  margin-top: calc(60 * var(--formula));
}

#FU251030outer .section06 {
  background-color: var(--beige);
  padding-top: calc(180 * var(--formula));
  padding-bottom: calc(183 * var(--formula));
}

#FU251030outer .section06-h {
  margin-top: calc(24 * var(--formula));
  margin-left: calc(3 * var(--formula));
  margin-bottom: calc(36 * var(--formula));
  color: var(--blue);
}

#FU251030outer .section06-color-list {
  margin-bottom: calc(65 * var(--formula));
}

#FU251030outer .section06-color-list li:nth-child(2) {
  margin-left: calc(1 * var(--formula));
  margin-right: calc(2 * var(--formula));
}

#FU251030outer .section06-color-list li:nth-child(3) {
  margin-right: calc(2 * var(--formula));
}

#FU251030outer .section06-cl--active {
  color: var(--blue);
}
#FU251030outer .section06-cl--active::after {
  background-color: var(--blue);
  transform: translateX(-52%);
  width: 113%;
}

#FU251030outer .section06-item-list {
  margin-top: calc(61 * var(--formula));
  margin-left: calc(4 * var(--formula));
}
#FU251030outer .section06-item-list li:nth-child(1) span:nth-child(2) {
  margin-left: calc(-2 * var(--formula));
  margin-right: calc(-2 * var(--formula));
}

#FU251030outer .section07 {
  padding-top: calc(180 * var(--formula));
}

#FU251030outer .section07-h {
  color: var(--lime);
  margin-top: calc(25 * var(--formula));
  margin-bottom: calc(35 * var(--formula));
  margin-left: calc(4 * var(--formula));
}

#FU251030outer .section07-color-list {
  margin-bottom: calc(65 * var(--formula));
}

#FU251030outer .section07-color-list li:nth-child(2) {
  margin-left: calc(1 * var(--formula));
  margin-right: calc(2 * var(--formula));
}
#FU251030outer .section07-color-list li:nth-child(3) {
  margin-right: calc(2 * var(--formula));
}

#FU251030outer .section07-cl--active {
  color: var(--lime);
}

#FU251030outer .section07-cl--active::after {
  background-color: var(--lime);
  transform: translateX(-47%);
  width: 116%;
}

#FU251030outer #slider2 {
  width: calc(750 * var(--formula));
}

#FU251030outer #slider2 .splide__pagination__page {
  background-color: #dad9c7;
  height: calc(12 * var(--formula));
  width: calc(12 * var(--formula));
  margin: calc(10 * var(--formula));
}
#FU251030outer #slider2 .splide__pagination__page.is-active {
  background-color: #c1bfa1;
  transform: scale(1);
}

#FU251030outer .section07-item-list {
  margin-top: calc(93 * var(--formula));
}

#FU251030outer .section07-item-list li:nth-child(1) {
  margin-left: calc(3 * var(--formula));
}
#FU251030outer .section07-item-list li:nth-child(1) span:nth-child(2) {
  margin-left: calc(-2 * var(--formula));
  margin-right: calc(-2 * var(--formula));
}
#FU251030outer .section07-item-list li:nth-child(2) {
  margin-left: calc(3 * var(--formula));
}
#FU251030outer .section07-item-list li:nth-child(2) span:nth-child(2) {
  margin-left: calc(-2 * var(--formula));
}

#FU251030outer .section08 {
  padding-top: calc(245 * var(--formula));
  padding-bottom: calc(280 * var(--formula));
}

#FU251030outer .section08-stafflist {
  font-family: var(--abacaxi);
  color: var(--gray);
  font-size: calc(22 * var(--formula));
  line-height: 2.27;
  letter-spacing: 0.05em;
  text-align: center;
  font-variation-settings: var(--font-weight-regular);
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--formula));
  margin-bottom: calc(80 * var(--formula));
}
#FU251030outer .section08-check-btn {
  width: calc(600 * var(--formula));
  height: calc(110 * var(--formula));
  background-color: var(--gray);
  font-variation-settings: var(--font-weight-regular);
  font-family: var(--abacaxi);
  color: var(--white);
  font-size: calc(36 * var(--formula));
  letter-spacing: 0.05em;
  text-align: center;
  display: grid;
  place-items: center;
  padding-top: calc(3 * var(--formula));
  padding-left: calc(2 * var(--formula));
}

/* ////////////////////////////////////////////////////////
  画像サイズ指定用クラス(__frame)
//////////////////////////////////////////////////////// */
#FU251030outer .model-01__frame {
  width: 100%;
  height: 100%;
}

#FU251030outer .title_logo__frame {
  width: calc(445 * (100vw / 1400));
}

#FU251030outer .model-01__frame img {
  height: 100%;
  object-fit: cover;
}

#FU251030outer .label-01__frame {
  width: calc(240 * var(--formula));
}

#FU251030outer .model-02__frame {
  width: calc(600 * var(--formula));
}

#FU251030outer .model-03__frame {
  width: calc(750 * var(--formula));
}

#FU251030outer .label-02__frame {
  width: calc(300 * var(--formula));
}

#FU251030outer .model-04__frame {
  width: calc(660 * var(--formula));
}

#FU251030outer .label-03__frame {
  width: calc(320 * var(--formula));
}

#FU251030outer .model-05__frame {
  width: calc(510 * var(--formula));
}

#FU251030outer .model-06__frame {
  width: calc(750 * var(--formula));
}

#FU251030outer .label-04__frame {
  width: calc(300 * var(--formula));
}

#FU251030outer .model-07__frame {
  width: calc(630 * var(--formula));
}

#FU251030outer .model-08__frame {
  width: calc(630 * var(--formula));
}

#FU251030outer .label-05__frame {
  width: calc(500 * var(--formula));
}

#FU251030outer .model-09__frame {
  width: calc(660 * var(--formula));
}

#FU251030outer .label-06__frame {
  width: calc(300 * var(--formula));
}

/* ////////////////////////////////////////////////////////
  SP設定
//////////////////////////////////////////////////////// */
@media (max-width: 767px) {
  #FU251030outer .title_logo__frame {
    width: calc(650 * var(--formula));
  }

  #FU251030outer .model-01__frame {
    width: calc(750 * var(--formula));
  }
  #FU251030outer {
    flex-direction: column;
  }
  #FU251030outer .lp-left-area {
    position: relative;
    height: unset;
    flex: 1;
    top: unset;
  }

  #FU251030outer .section08 {
    padding-bottom: calc(80 * var(--formula));
  }
}