@charset "UTF-8";

@font-face {
  font-family: "Loew-Bold";
  src: url("../fonts/Loew-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Loew-Medium";
  src: url("../fonts/Loew-Medium.otf") format("opentype");
}

* > .main-area {
  font-family: var(--font);
  font-weight: var(--fontweight-medium);
  font-feature-settings: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: unset;
  min-width: auto;
}

/* ▼ -----------可変設定---------- ▼ */
.UU250718MSW {
  --font-gothic: 游ゴシック体, YuGothic, 游ゴシック Medium, Yu Gothic, メイリオ, sans-serif;
  --font-loew: "Loew-Bold", "Loew-Medium", sans-serif;
  --font-pieppie: "piepie", sans-serif;
  --font-kozuka: "kozuka-gothic-pr6n", sans-serif;
  --font-zen-maru: "zen-maru-gothic", sans-serif;
  --fw-light: 300;
  --fw-regular:400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --color-red: #CC1523;
  --color-pink: #FFE8E8;
  --color-light-blue: #6EB9E7;
  --color-blue: #0080D2;
  --color-yellow: #FFFFDE;
  --color-white: #ffffff;
  --color-black: #000000;
  --pc-width: 1500; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 750; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1500以上は固定*/
  overflow: clip;
  font-feature-settings: "palt";
}

/* PC画面幅 1500px以上 固定 */
@media (min-width: 1501px) {
  .UU250718MSW {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}
/* PC画面幅 768～1500px 可変 */
@media (min-width: 768px) and (max-width: 1500px) {
  .UU250718MSW {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .UU250718MSW {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */
.main-area * {
  box-sizing: border-box;
}
.main-area img {
  height: auto;
  opacity: 1;
  width: 100%;
}
.main-area a {
  text-decoration: none;
}
.main-area picture {
  display: block;
}
.main-area p, .main-area ul, .main-area ol, .main-area dl {
  list-style: none;
}
@media only screen and (max-width: 767px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .pc_only {
    display: block;
  }
  .sp_only {
    display: none;
  }
}

/* ===================
  　Loading 画面
=================== */

/* メインコンテンツは最初は非表示 */
#main-content {
    display: none;
    min-height: 100vh; /* スクロール可能にするために高さを確保 */
}

/* ローディングオーバーレイ */
#loading-overlay {
    position: fixed; /* 常に画面全体に表示 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-pink); /* スクリーンショットの背景色 */
    display: flex;
    justify-content: center; /* 水平中央揃え */
    align-items: center;   /* 垂直中央揃え */
    z-index: 9999; /* 他のコンテンツの上に表示 */
    opacity: 1; /* 初期は完全に不透明 */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* 非表示時のアニメーション */
}

/* ローディングコンテンツ (リンゴとテキスト) */
.loading-content {
    text-align: center;
}

/* リンゴのコンテナ */
.loading-apples {
    display: flex;
    justify-content: center;
    margin-bottom: calc(80 * var(--formula));
    min-height: calc(82 * var(--formula));
}

/* 各リンゴの共通スタイル */
.apple {
    width: calc(73 * var(--formula)); /* リンゴのサイズ (調整してください) */
    height: auto;
    margin: 0 calc(82 * var(--formula)); /* リンゴ間のスペース */
    opacity: 0; /* 初期は非表示 */
    transition: opacity 0.3s ease-in-out;
}

/* リンゴのフェードインアニメーション */
/* JavaScriptで 'is-visible' クラスを付与してアニメーションさせる */
.apple.is-visible {
    opacity: 1;
}

/* 個別のリンゴのアニメーション遅延 */
/* JavaScriptでこれらのクラスを順に付与 */
/* 注意: これらのセレクタはJSで直接クラスを付与するわけではないので、
         JS側で適切なタイミングで is-visible を付与する方が良い */

/* LOADING... テキスト */
.loading-text {
    font-family: var(--font-pieppie);
    font-size: calc(24 * var(--formula));
    color: var(--color-red); /* スクリーンショットのテキスト色 */
    letter-spacing: 0.04em;
}

/* ローディング完了後のオーバーレイ非表示スタイル */
#loading-overlay.fade-out {
    opacity: 0;
    visibility: hidden; /* 非表示後、要素を完全にクリック不可にする */
}

@media only screen and (min-width: 768px) {
  .loading-apples {
      width: calc(754 * var(--formula_pc));
  }
  .apple {
      width: calc(73 * var(--formula_pc)); /* リンゴのサイズ (調整してください) */
      margin: 0 calc(82 * var(--formula_pc)); /* リンゴ間のスペース */
  }
}


.js-fadeIn-load {
  opacity: 0;
  transform: translateY(3rem);
}

.js-fadeIn-load.active {
  animation: fadeIn-load 1s forwards;
}

@keyframes fadeIn-load {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-fadeIn {
  opacity: 0;
  transform: translateY(1rem);
}

.js-fadeIn.active {
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-arrow img {
  transform: translateY(-100%);
  transition: transform 0.8s ease-in-out;
}

.js-arrow.active img {
  transform: translateY(0);
}

.js-fadeUp-load {
  opacity: 0;
  transition: opacity 1.5s, transform 1.5s;
  transform: translateY(20px);
}

.js-fadeUp-load.active {
  opacity: 1;
  transform: translateY(0);
}

.js-fadeUp {
  opacity: 0;
  transition: opacity 1s, transform 1s;
  transform: translateY(30px);
}

.js-fadeUp.active {
  opacity: 1;
  transform: translateY(0);
}

.js-fadeUp-small {
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(10px);
}

.js-fadeUp-small.active {
  opacity: 1;
  transform: translateY(0);
}

.js-fadeDown {
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(0);
}

.js-fadeDown.active {
  opacity: 1;
  transform: translateY(10px);
}

.anime_delay01 {
  transition-delay: 0.3s;
  animation-delay: 0.3s;
}

.anime_delay02 {
  transition-delay: 0.5s;
  animation-delay: 0.5s;
}
.anime_delay03 {
  transition-delay: 0.7s;
  animation-delay: 0.7s;
}

/* アニメーションの定義 */
@-webkit-keyframes rotate {
  0% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

@keyframes rotate {
  0% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

.js-rotate {
  opacity: 0;
  transition: opacity 1s, transform 1s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.js-rotate.active {
  opacity: 1;
  -webkit-animation: rotate 1s step-end 0s infinite;
  animation: rotate 1s step-end 0s infinite;
}

.js-rotate-load {
  opacity: 0;
  transition: opacity 1s, transform 1s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.js-rotate-load.active {
  opacity: 1;
  -webkit-animation: rotate 1s step-end 0s infinite;
  animation: rotate 1s step-end 0s infinite;
}

/* ===================
  　ribbon-fall
=================== */
.fixed_left .ribbon-fall-area, /* .fixed_left内のエリア */
.fixed_right .ribbon-fall-area { /* .fixed_right内のエリア */
    position: relative;
    width: 100%;
    max-width: calc(289 * var(--formula));
    height: calc(660 * var(--formula));
    /* margin: calc(50 * var(--formula)) auto;
    overflow: hidden;*/
    margin: 0 auto;
    z-index: 0;  
}
.fixed_left .ribbon-fall-area { 
    height: calc(540 * var(--formula));
}

.ribbon-fall-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ここに左右のパディングを追加して、リボンが降る範囲を内側に狭める */
  padding: 0 15%; /* 例: 左右に15%のパディング。この値を調整してください */
  box-sizing: border-box; /* パディングを含めて幅を計算 */
  /* overflow: hidden; */
  z-index: 10;
  pointer-events: none;
  background-color: transparent;
}

/* 各リボン要素の基本スタイル */
.ribbon-fall-container .ribbon-item {
  position: absolute;
  display: block;
  top: -100px;
  opacity: 0;
  width: auto; /* JavaScriptで上書きされるので、デフォルトはautoでもOK */
  height: auto; /* 高さは幅に合わせて自動調整 */
  max-width: calc(60 * var(--formula)); /* 各リボンの画像の最大幅を750pxに制限（必要であれば維持） */
  will-change: transform, opacity;
}

.section__inner {
  position: relative;
  z-index: 5;
}
.bg_ribbon_left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  z-index: 1;
  pointer-events: none; /* リボンがクリックイベントをブロックしないように */
}
.bg_ribbon_right {
  position: absolute; /* section__inner を基準に絶対配置 */
  top: 0;
  right: 0;
  /* width: calc((100% - コンテンツの幅) / 2) のように指定するか、
     ここではシンプルに、ribbon-fall-areaのmax-widthを適用する */
  width: 100%; /* ribbon-fall-areaの幅は内側で制御するため、ここでは広めに設定 */
  height: 100%; /* section__inner の高さいっぱいに */
  /* overflow: hidden; */
  z-index: 1; /* コンテンツより低いz-indexに設定（背景のため） */
  pointer-events: none; /* リボンがクリックイベントをブロックしないように */
}
.bg_ribbon_left .ribbon-fall-area,
.bg_ribbon_right .ribbon-fall-area {
  position: absolute;
  top: 0;
  width: calc(215 * var(--formula));
  height: 100%;
  overflow-y: hidden;
  /* overflow: hidden; */
}
.bg_ribbon_left .ribbon-fall-area {
  left: 0; /* 左側に寄せる */
}

.bg_ribbon_right .ribbon-fall-area {
  right: 0; /* 右側に寄せる */
}

/* ★★★ アニメーションキーフレーム ★★★ */
/* ここは変更なしでOK。リボンの位置は.ribbon-fall-containerのpaddingで制限されます */
@keyframes fall-default {
  0% {
      top: -100px;
      opacity: 0;
      transform: translateX(0);
  }
  10% {
      opacity: 1;
  }
  90% {
      opacity: 1;
      transform: translateX(var(--fall-x-offset, 0));
  }
  100% {
      top: calc(100% + 100px);
      opacity: 0;
      transform: translateX(var(--fall-x-offset, 0));
  }
}

.intro__section {
  position: relative; /* z-indexを有効にするため */
  z-index: 2; /* リボンより高くして前面に表示 */
}

/* ===================
  　CONTENTS INNER
=================== */

#UU250718MSW .lp_contents_inner {
  overflow: clip;
  width: 100%;
  margin: auto;
}

#UU250718MSW .section {
  width: calc(750 * var(--formula));
  margin: 0 auto;
}
#UU250718MSW .back-wrapper{
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

#UU250718MSW .sticky,
#UU250718MSW .sticky_contents01,
#UU250718MSW .sticky_contents02,
#UU250718MSW .sticky_contents03 {
  position: sticky;
  top: 0; /* ビューポートの上端で固定開始 */
  width: 100%;
  box-sizing: border-box; /* paddingやborderをwidthに含める */
}

/* 重ね順の制御 (奥から手前へ) */
#UU250718MSW .sticky {
  /* top: calc(-3000 * var(--formula)); */
  top: calc(-4000 * var(--formula));
  z-index: 30; /* 一番奥 */
}
#UU250718MSW .sticky_contents01 {
  top: calc(-4700 * var(--formula));
  z-index: 40; /* sticky より手前 */
}
#UU250718MSW .sticky_contents02 {
  top: calc(-3800 * var(--formula));
  z-index: 50; /* sticky_contents01 より手前 */
}

#UU250718MSW .sticky_contents03 {
  top: calc(-2000 * var(--formula));
  z-index: 60; /* sticky_contents01 より手前 */
}

/* 各コンテンツブロックの高さ調整 */
/* これが、各 sticky 要素が「固定される期間」を決定します。
   内容の高さ + 次のコンテンツが競り上がるために必要なスクロール量 */
#UU250718MSW .sticky section,
#UU250718MSW .sticky_contents01 section,
#UU250718MSW .sticky_contents02 section,
#UU250718MSW .sticky_contents03 section {
  min-height: 100vh; /* 各セクションがビューポートの高さいっぱいになるように（例） */
                     /* または、コンテンツの実際の高さに + α の余白を追加 */
}

/* ============================================================================
  　section_01
============================================================================ */
#UU250718MSW .section_01 {
  background-color: var(--color-pink);
}

#UU250718MSW .scroll-infinity {
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-white);
  padding: calc(22 * var(--formula)) 0 calc(12 * var(--formula)) 0;
  position: relative;
  z-index: 3;
  overflow: hidden;
}

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
#UU250718MSW .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
#UU250718MSW .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0;
}
#UU250718MSW .scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
#UU250718MSW .scroll-infinity__item {
  width: calc(4253 * var(--formula));
  margin-right: calc(13 * var(--formula));

}
#UU250718MSW .scroll-infinity__item>img {
  width: 100%;
}

#UU250718MSW .main_visual {
  width: 100%;
  margin-top: calc(110 * var(--formula));
}

#UU250718MSW .main_visual_inner {
  position: relative;
}

#UU250718MSW .main_visual_svg01 {
  width: calc(379 * var(--formula));
  position: absolute;
  left: calc(182 * var(--formula));
  top: calc(-295 * var(--formula));
}

#UU250718MSW .main_visual_logo {
  width: calc(385 * var(--formula));
  margin: 0 auto;
  position: relative;
}

#UU250718MSW .main_visual_kitty {
  width: calc(297 * var(--formula));
  position: absolute;
  z-index: 3;
}

#UU250718MSW .main_visual_logo .main_visual_title {
  width: calc(369 * var(--formula));
  margin: calc(406 * var(--formula)) auto 0;
  position: relative;
  z-index: 2;
}

#UU250718MSW .main_visual_logo .main_visual_date {
  width: 100%;
  margin: calc(31 * var(--formula)) auto 0;
}

.js-fadeUp-load {
  opacity: 0;
  transform: translate(calc(54 * var(--formula)), calc(-187 * var(--formula) + 20px));
}

.js-fadeUp-load.active {
  animation: fadeUp-load 0.5s forwards;
}

@keyframes fadeUp-load {
  0% {
    opacity: 0;
    transform: translate(calc(54 * var(--formula)), calc(-187 * var(--formula) + 20px));
  }
  100% {
    opacity: 1;
    transform: translate(calc(54 * var(--formula)), calc(-187 * var(--formula)));
  }
}

/* ===================
  　 COUNT DOWN 
=================== */
.countdown_area {
  width: calc(276 * var(--formula));
  height: calc(345 * var(--formula));
  margin: calc(100 * var(--formula)) auto 0;
  position: relative;
}

.countdown_area.countdown_before {
  background: url(../img/svg/countdown_bg01.svg) no-repeat;
  background-size: 100% 100%;
}

.countdown_area.countdown_after {
  background: url(../img/svg/countdown_bg02.svg) no-repeat;
  background-size: 100% 100%;
}

.countdown_deco {
  width: calc(65 * var(--formula));
  position: absolute;
  top: calc(55 * var(--formula));
  left: calc(179 * var(--formula));
  z-index: 5;
}

.countdown_set {
  display: flex;
  align-items: center;
  font-family: var(--font-pieppie);
  color: var(--color-red);
  width: calc(277 * var(--formula));
  /* margin-left: calc(64 * var(--formula)); */
  padding-top: calc(48 * var(--formula));
  position: relative;
  /* gap: calc(10 * var(--formula)); */
}

.countdown_set #days {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(279 * var(--formula));
    text-align: center;
    font-size: calc(122.5 * var(--formula));
    letter-spacing: 0.05em;
}

.countdown_set #hours {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(200 * var(--formula));
    text-align: center;
    font-size: calc(44 * var(--formula));
    letter-spacing: 0.04em;
    top: calc(243 * var(--formula));
    left: calc(-25 * var(--formula));
}

.countdown_set #minutes {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(200 * var(--formula));
    text-align: center;
    font-size: calc(44 * var(--formula));
    letter-spacing: 0.04em;
    top: calc(243 * var(--formula));
    left: calc(85 * var(--formula));
}

.countdown_set #days::after {
  position: absolute;
  right: 0;
  left: calc(-15 * var(--formula));
  bottom: calc(-49 * var(--formula));
  text-align: center;
  font-size: calc(51 * var(--formula));
  letter-spacing: 0.07em;
}

.countdown_set #hours::after,
.countdown_set #minutes::after {
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(-24 * var(--formula));
  text-align: center;
  font-size: calc(17 * var(--formula));
  letter-spacing: 0.04em;
}

.countdown_set #days::after {
  content: "DAYS";
}

.countdown_set #hours::after {
  content: "HOURS";
}

.countdown_set #minutes::after {
  content: "MINUTES";
}

#UU250718MSW .lead_txt {
  width: calc(504 * var(--formula));
  margin: calc(83 * var(--formula)) auto 0;
}
#UU250718MSW .lead_txt p {
  color: var(--color-red);
  font-family: var(--font-zen-maru);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  font-size: calc(24 * var(--formula));
  line-height: 2.2833333333;
  text-align: center;
  white-space: nowrap;
}
#UU250718MSW .lead_txt p:nth-of-type(2) {
  margin-top: calc(55 * var(--formula));
}

#UU250718MSW .intro__end {
  width: calc(253 * var(--formula));
  margin: calc(91 * var(--formula)) auto calc(155 * var(--formula));
}
#UU250718MSW .intro__end_txt {
  width: 100%;
  margin: 0 auto;
}
#UU250718MSW .intro__end_img {
  width: calc(229 * var(--formula));
  margin: calc(10 * var(--formula)) auto 0;
}

/* ============================================================================
  　section_02
============================================================================ */
#UU250718MSW .section_02 {
  background-color: var(--color-red);
}

#UU250718MSW .section_02::after {
  content: "";
  width: calc(750 * var(--formula));
  height: calc(500 * var(--formula));
  background-color: var(--color-red);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: absolute;
  bottom: calc(-499 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
}

#UU250718MSW .section_02 .section__block01 {
  padding-top: calc(120 * var(--formula));
}
#UU250718MSW .section_02 .section__textWrap--01 {
  width: calc(286 * var(--formula));
  margin: 0 auto;
}
#UU250718MSW .section_02 .section__text_svg01 {
  width: calc(260 * var(--formula));
  margin: calc(60 * var(--formula)) auto 0;
}
#UU250718MSW .section_02 .section__textWrap--02 {
  width: calc(500 * var(--formula));
  margin: calc(17 * var(--formula)) auto 0;
}
#UU250718MSW .section_02 .section__title h3 {
  font-family: var(--font-loew);
  font-weight: var(--fw-bold);
  font-size: calc(38 * var(--formula));
  line-height: 1.4076315789;
  color: var(--color-white);
  text-align: center;
}
#UU250718MSW .section_02 .line_box {
  width: calc(65 * var(--formula));
  display: flex;
  justify-content: center;
  margin: calc(46 * var(--formula)) auto 0;
}

#UU250718MSW .section_02 .line.js-line {
    position: relative;
    transform: translate3d(0, 0, 0);
}
#UU250718MSW .section_02 .line {
  display: block;
  width: 1px;
  height: calc(50 * var(--formula));
}
#UU250718MSW .section_02 .line.js-line::before {
  position: absolute;
  top: 0;
  content: "";
  transition: height 0.8s;
  transform: translate(0);
  width: 1px;
  height: 0;
  background: var(--color-white);
}

#UU250718MSW .section_02 .line.js-line.active::before {
    transform: translate(0);
    height: 100%;
}

#UU250718MSW .section_02 .section__lead {
  margin: calc(46 * var(--formula)) auto 0;
}
#UU250718MSW .section_02 .section__lead p {
  font-family: var(--font-zen-maru);
  font-weight: var(--fw-bold);
  font-size: calc(24 * var(--formula));
  line-height: 2.07541666667;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.06em;
}
#UU250718MSW .section_02 .section__imageWrap--01 {
  width: calc(630 * var(--formula));
  margin: calc(46 * var(--formula)) auto 0;
  position: relative;
}
#UU250718MSW .section_02 .section__img__0101 {
  width: 100%;
  margin: 0 auto;
}
#UU250718MSW .section_02 .section__img__0102 {
  width: calc(141 * var(--formula));
  position: absolute;
  right: calc(-29 * var(--formula));
  top: calc(374 * var(--formula));
  z-index: 3;
}

#UU250718MSW .section_02 .section__block02 {
  padding-block: calc(150 * var(--formula)) calc(200 * var(--formula));
}

#UU250718MSW .section_02 .section__text_svg02 {
  width: calc(366 * var(--formula));
  margin: calc(56 * var(--formula)) auto 0;
}

#UU250718MSW .section_02 .section__block02 .section__textWrap--02 {
  margin: calc(22 * var(--formula)) auto 0;
}

#UU250718MSW .section__slider--01 {
  position: relative;
}

#UU250718MSW .double-slider {
  width: calc(630 * var(--formula));
  background-color: var(--color-white);
  border-radius: calc(25 * var(--formula));
  margin: calc(150 * var(--formula)) auto 0;
  padding-block: calc(60 * var(--formula)) calc(40 * var(--formula));
  overflow: hidden; /* スライドがはみ出すのを防ぐ */
}

#UU250718MSW .section__slider_deco {
  width: calc(148 * var(--formula));
  position: absolute;
  top: calc(-55 * var(--formula));
  right: calc(90 * var(--formula));
  z-index: 5;
}

/* --- メインスライダーのスタイル --- */
#UU250718MSW .main-slider .slick-list {
  padding: 0 calc(210 * var(--formula)) !important;
}

#UU250718MSW .main-slider .slick-slide {
  display: flex; /* 画像を中央に配置する場合 */
  justify-content: center;
  align-items: center;
}

#UU250718MSW .main-slider .main-slider_img {
  width: calc(300 * var(--formula));
  margin-right: calc(10 * var(--formula));
}

#UU250718MSW .main-slider img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- テキストスライダーのスタイル --- */
#UU250718MSW .text-slider {
  position: relative;
  height: auto;
  overflow: hidden;
  margin-top: calc(40 * var(--formula));
}
#UU250718MSW .text-slider .txt a {
  width: 100%;
  display: block;
  margin: 0 auto;
}
#UU250718MSW .text-slider .txt .brand-name {
  display: block;
  font-size: calc(37 * var(--formula));
  letter-spacing: 0.06em;
  text-align: center;
  font-family: var(--font-loew);
  color: var(--color-red);
  font-weight: var(--fw-bold);
}
#UU250718MSW .text-slider .txt .item-title {
  display: block;
  width: calc(200 * var(--formula));
  margin: calc(24 * var(--formula)) auto 0;
}
/* #UU250718MSW .text-slider .txt .item-title {
  display: block;
  font-size: calc(18 * var(--formula));
  text-align: center;
  font-family: "Loew-Bold", sans-serif;
  color: var(--color-red);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  background-color: #FFD9D9;
  width: calc(200 * var(--formula));
  border-radius: calc(16 * var(--formula));
  padding:calc(8 * var(--formula)) 0;
  margin: calc(24 * var(--formula)) auto 0;
} */
#UU250718MSW .text-slider .txt .item-credit {
  display: block;
  font-size: calc(26 * var(--formula));
  letter-spacing: 0.06em;
  margin: calc(24 * var(--formula)) auto 0;
  text-align: center;
  font-family: var(--font-loew);
  color: var(--color-red);
  font-weight: var(--fw-bold);
}

#UU250718MSW .section__textWrap--03 {
  width: calc(460 * var(--formula));
  margin: calc(58 * var(--formula)) auto 0;
}

#UU250718MSW .brand_list {
  color: var(--color-white);
  text-align: center;
}

#UU250718MSW .brand_list .brand_list_title {
  display: block;
  width: calc(140 * var(--formula));
  margin: 0 auto;
  border: solid 1px var(--color-white);
  padding: calc(5 * var(--formula)) 0 calc(5 * var(--formula));
  font-family: var(--font-zen-maru);
  letter-spacing: 0.04em;
  font-weight: var(--fw-bold);
}
#UU250718MSW .brand_list p {
  font-family: var(--font-loew);
  font-size: calc(18 * var(--formula));
  letter-spacing: 0.01em;
  line-height: 1.75;
  margin-top: calc(20 * var(--formula));
  font-weight: var(--fw-bold);
}

#UU250718MSW .change_font {
  font-family: var(--font-kozuka);
  font-weight: var(--fw-regular);
}

#UU250718MSW .sec_end {
  width: calc(330 * var(--formula));
  margin: calc(72 * var(--formula)) auto 0;
}

#UU250718MSW .sec_end .sec_end_lead {
  font-family: var(--font-zen-maru);
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.06em;
  line-height: 2.07541666667;
  font-weight: var(--fw-bold);
  text-align: center;
  white-space: nowrap;
  color: var(--color-white);
}
#UU250718MSW .sec_end .sec_end_btn {
  width: calc(258 * var(--formula));
  margin: calc(18 * var(--formula)) auto 0;
}

@media screen and (max-width: 767px) {
  #UU250718MSW .brand_list .brand_list_title {
    font-size: calc(18 * var(--formula));
  }
}

/* ============================================================================
  　section_03
============================================================================ */

#UU250718MSW .section_03 {
  position: relative;
  padding-bottom: calc(200 * var(--formula));
}
#UU250718MSW .section_03::before {
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url(../img/sec03_bg.png); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  background: #ffffde;
  border-radius: calc(375 * var(--formula)) calc(375 * var(--formula)) 0 0;

}

#UU250718MSW .section_03::after {
    content: "";
    width: 100%;
    height: calc(500 * var(--formula));
    background-color: var(--color-yellow);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    position: absolute;
    bottom: calc(-499 * var(--formula));
    left: 50%;
    transform: translateX(-50%);
}

#UU250718MSW .section_03 .section__text_svg03 {
  width: calc(427 * var(--formula));
  margin: 0 auto;
  padding-top: calc(150 * var(--formula));
}

#UU250718MSW .section_03 .section__textWrap--01 {
  width: calc(554 * var(--formula));
  margin: calc(30 * var(--formula)) auto 0;
  border-radius: calc(34 * var(--formula));
  background-color: var(--color-red);
  padding-block: calc(13 * var(--formula)) calc(12 * var(--formula));
}

#UU250718MSW .section_03 .section__title {
  font-family: var(--font-zen-maru);
  font-size: calc(42 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: -0.02em;
  text-align: center;
}

#UU250718MSW .section_03 .section__textWrap--02 {
  width: calc(630 * var(--formula));
  margin: calc(32 * var(--formula)) auto 0;
  text-align: center;
}

#UU250718MSW .section_03 .section__list__num {
  width: calc(88 * var(--formula));
  margin: 0 auto;
}

#UU250718MSW .section_03 .section__list__title {
    font-family: var(--font-zen-maru);
    font-size: calc(40 * var(--formula));
    font-weight: var(--fw-bold);
    color: var(--color-red);
    letter-spacing: 0.08em;
    line-height: 1.5;
    display: inline-block;
    padding-bottom: calc(2 * var(--formula));
    margin-top: calc(50 * var(--formula));
    border-bottom: 2px dotted var(--color-red);
}

#UU250718MSW .section_03 .section__list__title:nth-of-type(2) {
    margin-top: calc(5 * var(--formula));
}

#UU250718MSW .section_03 .section__list__lead {
    font-family: var(--font-zen-maru);
    font-size: calc(24 * var(--formula));
    font-weight: var(--fw-bold);
    color: var(--color-red);
    letter-spacing: 0.06em;
    line-height: 2.06;
    margin-top: calc(40 * var(--formula));
}

#UU250718MSW .section_03 .section__imageWrap--01 {
    width: calc(630 * var(--formula));
    margin: calc(100 * var(--formula)) auto 0;
    position: relative;
}

#UU250718MSW .section_03 .section__img__0301 {
    width: 100%;
    margin: 0 auto;
}

#UU250718MSW .section_03 .section__img__0302 {
    width: calc(111 * var(--formula));
    position: absolute;
    top: calc(-92 * var(--formula));
    left: calc(-24 * var(--formula));
}
#UU250718MSW .section_03 .item__lead {
    font-family: var(--font-zen-maru);
    font-size: calc(15 * var(--formula));
    font-weight: var(--fw-light);
    color: var(--color-red);
    letter-spacing: 0.04em;
    line-height: 2.054;
    margin-top: calc(20 * var(--formula));
}

#UU250718MSW .section_03 .section__block02 .section__textWrap--02 {
    margin-top: calc(142 * var(--formula));
}
#UU250718MSW .section_03 .section__block02 .section__list__num {
    width: calc(98 * var(--formula));
    margin-left: calc(271 * var(--formula));
}
#UU250718MSW .section_03 .section__text_svg04 {
    width: calc(216 * var(--formula));
    margin: calc(57 * var(--formula)) auto 0;
}

#UU250718MSW .section_03 .section__block02 .section__list__title {
    margin-top: calc(42 * var(--formula));
}

#UU250718MSW .section_03 .section__block02 .section__list__title:nth-of-type(2) {
    margin-top: calc(6 * var(--formula));
}
#UU250718MSW .section_03 .section__block02 .section__list__lead {
    margin-top: calc(50 * var(--formula));
}

#UU250718MSW .section_03 .section__block02 .section__imageWrap--01 {
    margin: calc(215 * var(--formula)) auto 0;
}

#UU250718MSW .section_03 .section__img__0304 {
    width: calc(259 * var(--formula));
    position: absolute;
    top: calc(-159 * var(--formula));
    right: calc(47 * var(--formula));
    z-index: 5;
}

#UU250718MSW .section_03 .section__block02 .item__lead {
  letter-spacing: 0.02em;
  line-height: 1.854;
  margin-top: calc(24 * var(--formula));
  text-align:justify;
}

#UU250718MSW .section_03 .section__block03 .section__textWrap--02 {
    margin-top: calc(145 * var(--formula));
}
#UU250718MSW .section_03 .section__block03 .section__list__num {
    width: calc(98 * var(--formula));
}
#UU250718MSW .section_03 .section__text_svg05 {
    width: calc(280 * var(--formula));
    margin: calc(63 * var(--formula)) auto 0;
}

#UU250718MSW .section_03 .section__block03 .section__list__title {
    margin-top: calc(47 * var(--formula));
    padding-bottom: calc(0 * var(--formula));
}

#UU250718MSW .section_03 .section__block03 .section__list__title:nth-of-type(2) {
    margin-top: calc(8 * var(--formula));
}
#UU250718MSW .section_03 .section__block03 .section__list__lead {
    margin-top: calc(49 * var(--formula));
}

#UU250718MSW .section_03 .section__block03 .section__imageWrap--01 {
    margin: calc(86 * var(--formula)) auto 0;
}

#UU250718MSW .section_03 .section__img__0306 {
    width: calc(148 * var(--formula));
    position: absolute;
    top: calc(-58 * var(--formula));
    right: calc(-28 * var(--formula));
    z-index: 5;
}

#UU250718MSW .section_03 .section__block03 .item__lead:nth-of-type(2) {
    margin-top: calc(56 * var(--formula));
    line-height: 1.8543266667;
}

/* ============================================================================
  　section_04
============================================================================ */

#UU250718MSW .section_04 {
  position: relative;
  padding-bottom: calc(200 * var(--formula));
}
#UU250718MSW .section_04::before {
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url(../img/sec04_bg.png); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  background: #cc1523;
  border-radius: calc(375 * var(--formula)) calc(375 * var(--formula)) 0 0;  
}

#UU250718MSW .section_04::after {
    content: "";
    width: 100%;
    height: calc(500 * var(--formula));
    background-color: var(--color-red);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    position: absolute;
    bottom: calc(-499 * var(--formula));
    left: 50%;
    transform: translateX(-50%);
}

#UU250718MSW .section_04 .section__text_svg06 {
  width: calc(327 * var(--formula));
  margin: 0 auto;
  padding-top: calc(150 * var(--formula));
}

#UU250718MSW .section_04 .section__textWrap--01 {
  width: calc(554 * var(--formula));
  margin: calc(32 * var(--formula)) auto 0;
  border-radius: calc(34 * var(--formula));
  background-color: var(--color-white);
  padding-block: calc(15 * var(--formula)) calc(17 * var(--formula));
}
#UU250718MSW .section_04 .section__textWrap--02 {
  width: calc(237 * var(--formula));
  margin: calc(10 * var(--formula)) auto 0;
  border-radius: calc(34 * var(--formula));
  background-color: var(--color-white);
  padding-block: calc(15 * var(--formula)) calc(17 * var(--formula));
}

#UU250718MSW .section_04 .section__title {
  font-family: var(--font-zen-maru);
  font-size: calc(35 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-red);
  letter-spacing: 0.03em;
  text-align: center;
}

#UU250718MSW .section_04 .section__textWrap--03 {
  width: calc(656 * var(--formula));
  margin: calc(100 * var(--formula)) auto 0;
  text-align: center;
  position: relative;
}

#UU250718MSW .section_04 .section__title01 {
  position: relative;
  z-index: 5;
}

#UU250718MSW .section_04 .section__title01 p {
  font-family: var(--font-zen-maru);
  font-size: calc(34 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-blue);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 5;
  line-height: 0.8;
}

#UU250718MSW .section_04 .section__title01::before {
  content: "";
  width: 100%;
  height: calc(133 * var(--formula));
  background-image: url(../img/sec04_title_bg01.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: absolute;
  top: calc(-78 * var(--formula));
  left: 0;
  z-index: -1;
}

#UU250718MSW .section_04 .section__text_svg07 {
  width: calc(121 * var(--formula));
  position: absolute;
  top: calc(-100 * var(--formula));
  left: calc(272 * var(--formula));
}

#UU250718MSW .section_04 .section__lead {
  font-family: var(--font-zen-maru);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: 0.06em;
  line-height: 2.06;
  margin-top: calc(72 * var(--formula));
}

#UU250718MSW .section_04 .section__lead__alpha {
  font-family: var(--font-zen-maru);
  font-size: calc(15 * var(--formula));
  font-weight: var(--fw-light);
  color: var(--color-white);
  letter-spacing: 0.06em;
  line-height: 2.3209933333;
  margin-top: calc(42 * var(--formula));
}

#UU250718MSW .section_04 .section__imageWrap--01 {
    width: calc(436 * var(--formula));
    margin: calc(100 * var(--formula)) auto 0;
}

#UU250718MSW .section_04 .section__block02 {
    padding-top: calc(152 * var(--formula));
}

#UU250718MSW .section_04 .section__title02 {
  width: calc(447 * var(--formula));
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

#UU250718MSW .section_04 .section__title02 p {
  font-family: var(--font-zen-maru);
  font-size: calc(35 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-blue);
  letter-spacing: 0.07em;
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0.8;
}

#UU250718MSW .section_04 .section__title02 span {
  font-size: calc(25 * var(--formula));
  margin-right: calc(10 * var(--formula));
  font-weight: var(--fw-bold);
}

#UU250718MSW .section_04 .section__title02::before {
  content: "";
  width: 100%;
  height: calc(133 * var(--formula));
  background-image: url(../img/sec04_title_bg02.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: absolute;
  top: calc(-78 * var(--formula));
  left: 0;
  z-index: -1;
}

#UU250718MSW .section_04 .section__block02 .section__text_svg07 {
  top: calc(-100 * var(--formula));
  left: calc(272 * var(--formula));
}

#UU250718MSW .section_04 .section__block02 .section__lead {
  font-size: calc(23 * var(--formula));
  letter-spacing: 0.03em;
  line-height: 1.948473913;
  margin-top: calc(75 * var(--formula));
}

#UU250718MSW .section_04 .section__block02 .section__imageWrap--01 {
    margin: calc(95 * var(--formula)) auto 0;
}

#UU250718MSW .section_04 .section__block02 .section__img__0402 {
    width: calc(289 * var(--formula));
    margin: 0 auto;
}

#UU250718MSW .section_04 .section__block02 .section__img__0403 {
    width: calc(219 * var(--formula));
    margin: 0 auto;
}

#UU250718MSW .section_04 .section__block02 .section__img__0404 {
    width: calc(194 * var(--formula));
    margin: 0 auto;
}

#UU250718MSW .section_04 .section__block03 {
    padding-top: calc(148 * var(--formula));
}

#UU250718MSW .section_04 .section__title03 {
  width: calc(609 * var(--formula));
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

#UU250718MSW .section_04 .section__title03 p {
  font-family: var(--font-zen-maru);
  font-size: calc(35 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-blue);
  letter-spacing: 0.09em;
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0.8;
}

#UU250718MSW .section_04 .section__title03::before {
  content: "";
  width: 100%;
  height: calc(133 * var(--formula));
  background-image: url(../img/sec04_title_bg03.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: absolute;
  top: calc(-78 * var(--formula));
  left: 0;
  z-index: -1;
}

#UU250718MSW .section_04 .section__block03 .section__text_svg07 {
  top: calc(-100 * var(--formula));
  left: calc(272 * var(--formula));
}

#UU250718MSW .section_04 .section__block03 .section__lead {
  font-size: calc(30 * var(--formula));
  letter-spacing: -0.01em;
  line-height: 1.5729233333;
  margin-top: calc(77 * var(--formula));
}

#UU250718MSW .section_04 .section__slider--02 {
  margin: calc(52 * var(--formula)) auto 0;
}

#UU250718MSW .section_04 .section__slider--02 .double-slider {
  margin: 0 auto;
  border-radius: calc(25 * var(--formula));
  padding-block: calc(40 * var(--formula)) calc(20 * var(--formula));
}
#UU250718MSW .section_04 .section__slider--02 .main-slider .main-slider_img {
  width: calc(275 * var(--formula));
  margin-right: calc(20 * var(--formula));
}
#UU250718MSW .section_04 .section__slider--02 p {
  font-family: var(--font-zen-maru);
  font-size: calc(20 * var(--formula));
  letter-spacing: 0.03em;
  font-weight: var(--fw-bold);
  color: var(--color-red);
  text-align: center;
  margin-top: calc(15 * var(--formula));
}

#UU250718MSW .section_04 .section__textWrap--04 .section__lead {
  font-family: var(--font-zen-maru);
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.06em;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 2.07562083333;
  text-align: center;
  margin-top: calc(87 * var(--formula));
}
#UU250718MSW .section_04 .section__textWrap--04 .section__lead:nth-of-type(2) {
  margin-top: calc(49 * var(--formula));
}

/* ============================================================================
  　section_05
============================================================================ */

#UU250718MSW .section_05 {
  position: relative;
  padding-bottom: calc(193 * var(--formula));
}
#UU250718MSW .section_05::after {
  content: "";
  width: 100%;
  height: 100%;
  /* background-image: url(../img/sec05_bg.png); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  background: #ffffde;
  border-radius: calc(375 * var(--formula)) calc(375 * var(--formula)) 0 0;  
}

#UU250718MSW .section_05 .section__deco {
  width: calc(297 * var(--formula));
  position: absolute;
  top: calc(-176 * var(--formula));
  left: calc(232 * var(--formula));
  z-index: 5;
}

#UU250718MSW .section_05 .section__text_svg08 {
  width: calc(304 * var(--formula));
  margin: 0 auto;
  padding-top: calc(150 * var(--formula));
}

#UU250718MSW .section_05 .section__textWrap--01 {
  width: calc(554 * var(--formula));
  margin: calc(29 * var(--formula)) auto 0;
  border-radius: calc(34 * var(--formula));
  background-color: var(--color-red);
  padding-block: calc(15 * var(--formula)) calc(17 * var(--formula));
}

#UU250718MSW .section_05 .section__title {
  font-family: var(--font-zen-maru);
  font-size: calc(35 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: 0.03em;
  text-align: center;
}

#UU250718MSW .section_05 .section__textWrap--02 {
  width: calc(480 * var(--formula));
  margin: calc(47 * var(--formula)) auto 0;
}

#UU250718MSW .section_05 .section__lead {
  font-family: var(--font-zen-maru);
  font-size: calc(24 * var(--formula));
  font-weight: var(--fw-bold);
  color: var(--color-red);
  letter-spacing: 0;
  line-height: 2.04166666667;
  text-align: center;
}

#UU250718MSW .section_05 .section__lead:nth-of-type(2) {
  letter-spacing: 0.05em;
  margin: calc(49 * var(--formula)) auto 0;
}

#UU250718MSW .section_05 .section__lead__alpha {
  font-family: var(--font-zen-maru);
  font-size: calc(18 * var(--formula));
  font-weight: var(--fw-regular);
  color: var(--color-red);
  letter-spacing: 0.05em;
  text-align: center;
  margin: calc(12 * var(--formula)) auto 0;
}

#UU250718MSW .section_05 .section__textWrap--03 {
  width: calc(645 * var(--formula));
  margin: calc(106 * var(--formula)) auto 0;
  text-align: center;
}

#UU250718MSW .section_05 .about__title {
    font-family: var(--font-zen-maru);
    font-size: calc(23 * var(--formula));
    font-weight: var(--fw-bold);
    color: var(--color-red);
    letter-spacing: 0.03em;
    display: inline-block;
    padding-bottom: calc(10 * var(--formula));
    border-bottom: 2px dotted var(--color-red);
}

#UU250718MSW .section_05 .about__lead {
    font-family: var(--font-zen-maru);
    font-size: calc(24 * var(--formula));
    font-weight: var(--fw-bold);
    color: var(--color-red);
    letter-spacing: 0.03em;
    margin-top: calc(39 * var(--formula));
}
#UU250718MSW .section_05 .about__lead span {
    font-family: var(--font-zen-maru);
    font-size: calc(24 * var(--formula));
    font-weight: var(--fw-bold);
    color: var(--color-red);
    letter-spacing: 0.03em;
    margin-top: calc(39 * var(--formula));
}
#UU250718MSW .section_05 .about__lead .about__lead_02 {
    display: block;
    margin-top: calc(34 * var(--formula));
}
#UU250718MSW .section_05 .about__lead .about__lead_03 {
    display: block;
    margin-top: calc(0 * var(--formula));
}

.section_05 .section__textWrap--03 .about__lead {
  position: relative;
}
.section_05 .section__textWrap--03 .about__lead::before {
  content: "";
  width: calc(406 * var(--formula));
  height: 2px;
  background-color: var(--color-red);
  position: absolute;
  top: calc(31 * var(--formula));
  left: calc(135 * var(--formula));
}

#UU250718MSW .section_05 .section__textWrap--04 {
  width: calc(522 * var(--formula));
  margin: calc(149 * var(--formula)) auto 0;
  text-align: center;
}

#UU250718MSW .section_05 .section__textWrap--04 .about__lead {
    line-height: 2.04166666667;
    margin-top: calc(29 * var(--formula));
}

#UU250718MSW .section_05 .section__textWrap--05 {
  width: calc(350 * var(--formula));
  margin: calc(136 * var(--formula)) auto 0;
  text-align: center;
}
#UU250718MSW .section_05 .section__textWrap--05 .about__lead {
    line-height: 2.04166666667;
    margin-top: calc(31 * var(--formula));
}
#UU250718MSW .section_05 .section__textWrap--05 .about__lead__alpha {
    font-family: var(--font-zen-maru);
    font-size: calc(15 * var(--formula));
    font-weight: var(--fw-light);
    color: var(--color-red);
    letter-spacing: 0.03em;
    line-height: 2.18766;
    margin-top: calc(4 * var(--formula));
}

/* ============================================================================
  　section_06
============================================================================ */

#UU250718MSW .section_06 {
  position: relative;
  z-index: 60;
  background-color: var(--color-pink);
  padding-bottom: calc(50 * var(--formula));
  overflow: clip;
}

#UU250718MSW .section_06 .section__text_svg09 {
  width: calc(244 * var(--formula));
  margin: calc(126 * var(--formula)) auto 0;
}

#UU250718MSW .section_06 .section__img__0601 {
    width: calc(162 * var(--formula));
    margin: calc(74 * var(--formula)) auto 0;
}
#UU250718MSW .section_06 .section__img__0602 {
    width: calc(340 * var(--formula));
    margin: calc(94 * var(--formula)) auto 0;
}
#UU250718MSW .section_06 .section__img__0603 {
    width: calc(338 * var(--formula));
    margin: calc(44 * var(--formula)) auto 0;
}

@media only screen and (min-width: 768px) {
  #UU250718MSW {
    background-color: var(--color-pink);
  }
  #UU250718MSW .fixed__wrapper {
    display: flex; /* Flexboxを適用 */
    justify-content: space-between; /* 子要素を両端に寄せる */
    width: 100%; /* ビューポートいっぱいに広げる */
  }
  #UU250718MSW .fixed__container {
    display: flex; /* Flexboxを適用して子要素を横並びにする */
    justify-content: center; /* lp_contents_inner を中央に配置するために必要 */
    align-items: flex-start; /* 必要に応じて、アイテムの垂直方向の配置を調整 */
    width: 100%; /* outer-wrapper の幅いっぱいに広げる */
    max-width: 150rem; /* ページの最大幅をここで制限 */
    margin: 0 auto; /* 中央揃えにする */
  }
  #UU250718MSW .lp_contents_inner {
    width: 75rem; /* 中央コンテンツの固定幅 */
    flex-shrink: 0; /* 中央コンテンツは縮まない */
    position: relative;
    overflow: clip;
    z-index: 2;
  }

  #UU250718MSW .fixed_left,
  #UU250718MSW .fixed_right {
    /* 固定幅の指定をなくし、flex-growで余白を埋めるようにする */
    flex-grow: 1; /* 余白を埋めるように伸びる */
    max-width: calc((150rem - 75rem) / 2); /* 最大幅は維持 */
    height: 100vh; /* このheight: 100vh;は、それぞれの要素がビューポートの高さいっぱいになる、という指定です。もしコンテンツの高さに合わせたい場合は削除してください。 */
    overflow: clip;
    position: sticky; /* position: sticky; はそのまま残します */
    top: 0;
    padding-bottom: calc(60 * var(--formula));
  }

  /* 左右の要素に個別の背景色やパディングなどを設定したい場合は、下記のように指定 */
  #UU250718MSW .fixed_left {
    left: 0;
  }

  #UU250718MSW .fixed_right {
    right: 0;
  }

  #UU250718MSW::-webkit-scrollbar {
    display: none;
  }

  #UU250718MSW .app__download {
    width: calc(186 * var(--formula_pc));
    background-color: var(--color-red);
    border-radius: calc(10 * var(--formula_pc));
    margin: 0 auto;
    position: relative;
    z-index: 5;
  }

  #UU250718MSW .app__download .app__flex {
    width: calc(142 * var(--formula_pc));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: calc(17 * var(--formula_pc));
    padding: calc(27 * var(--formula_pc)) 0 calc(30 * var(--formula_pc)) 0;
  }

  #UU250718MSW .app__download .app__txt {
    width: calc(142 * var(--formula_pc));
  }

  #UU250718MSW .app__download .app__txt p {
    font-family: var(--font-zen-maru);
    font-weight: var(--fw-bold);
    color: var(--color-pink);
    font-size: calc(13 * var(--formula_pc));
    line-height: 1.3823076923;
    text-align: center;
  }

  #UU250718MSW .app__download .app__img {
    width: calc(100 * var(--formula_pc));
    background-color: var(--color-white);
    border: solid 0.25px var(--color-black);
    border-radius: calc(10 * var(--formula_pc));
    padding: calc(7 * var(--formula_pc));
  }

  #UU250718MSW .main_title_logo {
    width: calc(250 * var(--formula_pc));
    margin: 0 auto;
    margin-top: calc(20 * var(--formula_pc));
    position: relative;
    z-index: 5;
  }

  #UU250718MSW .main_visual {
    /* height: calc(900 * var(--formula)); */
    padding: calc(22 * var(--formula)) 0 0 0;
    margin-top: calc(0 * var(--formula));
  }
}

@media only screen and (max-width: 767px) {
  #UU250718MSW .section_02 .section__textWrap--02 {
    width: calc(563 * var(--formula));
  }

}

/* ====================================================================
   キャラクター登場アニメーション
   ==================================================================== */
.animation-section {
    position: relative;
    overflow: hidden;
    width: calc(750 * var(--formula));
    min-height: calc(500 * var(--formula)); /* キャラクターと要素が収まるように調整 */
    margin-top: calc(15 * var(--formula));
}
.animation-section02 {
    margin-top: calc(0 * var(--formula));
}
/* animated-character img 自体 */
.animated-character {
    /* HTMLでwidth/height属性が指定されているため、CSSでは相対的な位置付けとアニメーションのみ */
    position: relative; /* character-container 内での配置 */
    left: 0;
    top: 0;
    opacity: 1; /* 初期は不透明だが、画面外 */
    transition: none; /* アニメーションで制御するためトランジションは設定しない */
}

/* character-container: キャラクターの移動と揺れアニメーションの親 */
.character-container {
  width: calc(317 * var(--formula)); /* キャラクター画像の幅 */
  height: calc(359 * var(--formula)); /* キャラクター画像の高さ */
  position: absolute; /* animation-section内での位置指定 */
  top: 50%;
  transform: translateY(-50%); /* 垂直方向の中央揃え */
  z-index: 20; /* 他の要素より前面 */
  /* 初期位置を画面外右に設定 */
  right: calc(-317 * var(--formula)); /* キャラクター自身の幅分だけ画面外右に */
  opacity: 1; /* コンテナは常に不透明 */
  transition: none; /* アニメーションで制御するためトランジションは設定しない */
}

.character-container02 {
  width: calc(393 * var(--formula)); /* キャラクター画像の幅 */
  height: calc(305 * var(--formula)); /* キャラクター画像の高さ */
  right: calc(-393 * var(--formula)); /* キャラクター自身の幅分だけ画面外右に */
}

/* キャラクター移動アニメーション */
@-webkit-keyframes character-walk-in {
    0% { right: calc(-317 * var(--formula)); } /* 画面外右から開始 */
    100% { right: calc(48% - (317 * var(--formula)) / 2); } /* animation-section の中央へ */
}
@keyframes character-walk-in {
    0% { right: calc(-317 * var(--formula)); }
    100% { right: calc(48% - (317 * var(--formula)) / 2); }
}

@-webkit-keyframes character-walk-in-alt {
    0% { right: calc(-393 * var(--formula)); } /* 画面外右から開始 (2番目のキャラクターの幅に合わせる) */
    100% { right: calc(38% - (393 * var(--formula)) / 2); } /* animation-section の中央へ (2番目のキャラクターの幅に合わせる) */
}
@keyframes character-walk-in-alt {
    0% { right: calc(-393 * var(--formula)); }
    100% { right: calc(38% - (393 * var(--formula)) / 2); }
}

/* キャラクター揺れアニメーション */
@-webkit-keyframes character-sway {
  0% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}
@keyframes character-sway {
  0% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

/* character-container が active になったら移動アニメーションを開始 */
.character-container.active {
    -webkit-animation: character-walk-in 1.5s forwards;
    animation: character-walk-in 1.5s forwards;
}

.character-container.character-container02.active {
    -webkit-animation: character-walk-in-alt 1.5s forwards; /* 新しいアニメーションを適用 */
    animation: character-walk-in-alt 1.5s forwards;
}

/* active な character-container 内の animated-character が揺れアニメーションを開始 */
.character-container.active .animated-character {
    -webkit-animation: character-sway 1s step-end 0s infinite;
    animation: character-sway 1s step-end 0s infinite;
}

/* ====================================================================
   オーバーレイ要素 (線, リボン, WHOOSH!) アニメーション
   ==================================================================== */
.overlay-elements {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(350 * var(--formula)); /* 画像サイズと配置に合わせて調整 */
    height: calc(250 * var(--formula)); /* 画像サイズと配置に合わせて調整 */
    z-index: 25; /* キャラクターより前面 */
    opacity: 0; /* 初期は全体を透明に保つ */
    transition: opacity 0.5s ease; /* overlay-elements自体をフェードインさせる */
}

/* overlay-elements が active になったら表示 */
.overlay-elements.active {
    opacity: 1;
}

/* 例: 初期状態を非表示に設定 */
.overlay-elements .animated-line,
.overlay-elements .animated-ribbon,
.overlay-elements .animated-whoosh {
    opacity: 0;
    visibility: hidden; /* 要素がクリックできないように */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* フェードインのためのトランジション */
    /* もし transform を使って動かすなら、初期位置も設定 */
    /* transform: translateY(20px); */
}

/* 例: active クラスが付与されたときに表示・アニメーション */
.overlay-elements.active .animated-line.active,
.overlay-elements.active .animated-ribbon.active,
.overlay-elements.active .animated-whoosh.active {
    opacity: 1;
    visibility: visible;
    /* もし transform を使って動かすなら、最終位置も設定 */
    /* transform: translateY(0); */
}

/* overlay-elements 内の各イメージコンテナ */
.animated-line,
.animated-ribbon,
.animated-whoosh {
    opacity: 0; /* 個々の要素も初期は透明 */
    position: absolute;
    transition: opacity 0.5s ease, transform 0.5s ease; /* フェードと変形用トランジション */
}

/* 各要素が active クラスを持った時の状態 (JSで制御) */
.animated-line.active,
.animated-ribbon.active,
.animated-whoosh.active {
    opacity: 1; /* active になったら表示 */
}

/* 各イメージの位置とサイズ (calc() の修正済み) */
.animated-line {
    width: calc(40 * var(--formula));
    left: calc(337 * var(--formula));
    top: calc(181 * var(--formula));
}

.animated-ribbon {
    width: calc(63 * var(--formula));
    left: calc(360 * var(--formula));
    top: calc(203 * var(--formula));
}

.animated-whoosh {
    width: calc(71 * var(--formula));
    left: calc(308 * var(--formula));
    top: calc(146 * var(--formula));
}

.animated-line02 {
    width: calc(57 * var(--formula));
    left: calc(-15 * var(--formula));
    top: calc(133 * var(--formula));
}

.animated-ribbon02 {
    width: calc(90 * var(--formula));
    left: calc(-74 * var(--formula));
    top: calc(166 * var(--formula));
}

.animated-whoosh02 {
    width: calc(91 * var(--formula));
    left: calc(-57 * var(--formula));
    top: calc(74 * var(--formula));
}

/* 各イメージ要素の img タグのサイズ調整 (親divのサイズに従う) */
.animated-line img,
.animated-ribbon img,
.animated-whoosh img {
    width: 100%;
    height: auto;
    display: block;
}

/* アニメーションのキーフレームを定義 */
@-webkit-keyframes bell {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: rotate(15deg);
    }
    20% {
        opacity: 1;
        transform: rotate(-15deg);
    }
    30% {
        opacity: 1;
        transform: rotate(5deg);
    }
    40% {
        opacity: 1;
        transform: rotate(-5deg);
    }
    50% {
        opacity: 1;
        transform: rotate(1deg);
    }
    60% {
        opacity: 1;
        transform: rotate(-1deg);
    }
    70% {
        opacity: 1;
        transform: rotate(0deg);
    }
    80% {
        opacity: 1;
        transform: rotate(0deg);
    }
    90% {
        opacity: 1;
        transform: rotate(0deg);
    }
    to { /* 100% と同じ */
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes bell {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: rotate(15deg);
    }
    20% {
        opacity: 1;
        transform: rotate(-15deg);
    }
    30% {
        opacity: 1;
        transform: rotate(5deg);
    }
    40% {
        opacity: 1;
        transform: rotate(-5deg);
    }
    50% {
        opacity: 1;
        transform: rotate(1deg);
    }
    60% {
        opacity: 1;
        transform: rotate(-1deg);
    }
    70% {
        opacity: 1;
        transform: rotate(0deg);
    }
    80% {
        opacity: 1;
        transform: rotate(0deg);
    }
    90% {
        opacity: 1;
        transform: rotate(0deg);
    }
    to { /* 100% と同じ */
        opacity: 1;
        transform: rotate(0deg);
    }
}

/* .js_bell クラスの初期状態 */
.js_bell {
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: rotate(0deg); /* アニメーションが始まる前の角度 */
}

/* .js_bell.active クラスが付与された時にアニメーションを適用 */
.js_bell.active {
    opacity: 1;
    -webkit-animation: bell 1s linear both;
    animation: bell 1s linear both;
    transform-origin: 80% bottom; /* 例: 右下の方を支点に揺れる */
}

/* UNDERSON追加 */
@media only screen and (max-width: 767px) {
.lp {
  padding-bottom: calc(0 * (100vw / 750));
}
.home-content.support-content {
  margin-block-start: calc(0* (100vw / 750 ));
}
}