@charset "UTF-8";

/* ===== スクロール禁止（動画/ワイパー表示中だけ付与） ===== */
html.intro-active,
body.intro-active { overflow: hidden; height: 100%; }
.intro-active {scrollbar-width: none;}

/* ===== Opening Video（サイトの上に重ねる） ===== */
#opv-wrap {
  /* サイトの上にフルスクリーンで固定配置 */
  position: fixed;
  inset: 0;
  z-index: 9998;          /* ワイパー(9999)より下、サイトより上 */
  display: block;
  width: 100%;
  height: 133.33vh;       /* 100 ÷ 0.75 */
  pointer-events: auto;   /* 背面のクリックをブロック（任意） */
  background: transparent;
}
video#opv {
  position: absolute;     /* ラッパー基準でフィット */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

/* SPは端末比率に合わせる */
@media (max-width: 767px) {
  #opv-wrap { height: 100vh; }
  video#opv { height: 100vh; }
}

/* ===== サイト本体は最初から表示（フェード無し） ===== */
main { display: block; }

/* ===== 2枚ワイパー（下から上／上下アーチ／隙間ゼロ） ===== */
:root{
  --wipe-gray:#fff;   /* 1枚目：白 */
  --wipe-green:#a5ced1;  /* 2枚目：青 */
  --wipe-height: 80vh;
  --wipe-duration-1: 850ms;
  --wipe-duration-2: 1000ms;
  --wipe-delay-2: 0ms;        /* 同時発進で縫い目ゼロ */
  --ease: cubic-bezier(.65,.05,.36,1);
}

/* PCの終点 */
:root{
  --wipe-end-gray-pc:  -170%;  /* 1枚目（白）の終点 */
  --wipe-end-green-pc: -170%;  /* 2枚目（青）の終点   */
}

@media (max-width: 767px){
  :root{
    --wipe-end-gray-sp:  -360%;
    --wipe-end-green-sp: -380%;
    --wipe-height: 30vh;
    --wipe-duration-1: 890ms;
  }
}

#wiper-overlay{
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; isolation: isolate;
}
.wiper{
  position: absolute; left: 50%; bottom: 0;
  width: 100%; height: var(--wipe-height);
  --start: 100%;
  --end:   -140%;  /* 余裕を持って画面外まで抜ける */
  --offset: 0%;    /* 青だけ -2% で常時オーバーラップ */
  transform: translate(-50%, calc(var(--start) + var(--offset))) translateZ(0);
  will-change: transform; backface-visibility: hidden; contain: paint;
}
.wiper svg{ display:block; width:100%; height:100%; }
.wiper path{ fill: var(--wipe-gray); }
.wiper--green path{ fill: var(--wipe-green); }
.wiper--gray { z-index: 1; }
.wiper--green { z-index: 2; }

.play-wipe .wiper{
  animation: wipeVar var(--wipe-duration-1) var(--ease) forwards;
}
.play-wipe .wiper--green{
  --offset: -2%;
  animation: wipeVar var(--wipe-duration-2) var(--ease) var(--wipe-delay-2) forwards;
}
@keyframes wipeVar{
  to { transform: translate(-50%, calc(var(--end) + var(--offset))) translateZ(0); }
}

/* --- PC/SPでカーブ出し分け --- */
.wiper path.curve-sp { display: none; }
@media (max-width: 767px) {
  .wiper path.curve-pc { display: none; }
  .wiper path.curve-sp { display: inline; }
}


/* 実際に当て込む（既存の --end を上書き） */
#wiper-overlay.play-wipe .wiper{
  --end: var(--wipe-end-gray-pc);
}
#wiper-overlay.play-wipe .wiper.wiper--green{
  --end: var(--wipe-end-green-pc);
}

/* SP用の上書き（ブレークポイント内でPC値を差し替え） */
@media (max-width: 767px){
  #wiper-overlay.play-wipe .wiper{
    --end: var(--wipe-end-gray-sp);
  }
  #wiper-overlay.play-wipe .wiper.wiper--green{
    --end: var(--wipe-end-green-sp);
  }
}


/* ========== 浮遊アニメ ========== */
.mv-riimo { animation: floating-y-1 2s ease-in-out infinite alternate-reverse; }
@keyframes floating-y-1 { 0%{transform:translateX(-60%) translateY(-5%);} 100%{transform:translateX(-60%) translateY(5%);} }

.scene-riimo01 { animation: floating-y-2 2s ease-in-out infinite alternate-reverse; }
@keyframes floating-y-2 { 0%{transform:translateX(65%) translateY(-5%);} 100%{transform:translateX(65%) translateY(5%);} }

.products-riimo01 { animation: floating-y-3 2s ease-in-out infinite alternate-reverse; }
@keyframes floating-y-3 { 0%{transform:translateX(65%) translateY(-5%);} 100%{transform:translateX(65%) translateY(5%);} }

.products-riimo02 { animation: floating-y-4 2s ease-in-out infinite alternate-reverse; animation-delay:.8s; }
@keyframes floating-y-4 { 0%{transform:translateX(-285%) translateY(-5%);} 100%{transform:translateX(-285%) translateY(5%);} }

.mv-cloud01 { animation: floating-y-5 2s ease-in-out infinite alternate-reverse; animation-delay:.4s; }
@keyframes floating-y-5 { 0%{transform:translateX(160%) translateY(-5%);} 100%{transform:translateX(160%) translateY(5%);} }

.mv-cloud02 { animation: floating-y-6 2s ease-in-out infinite alternate-reverse; animation-delay:.8s; }
@keyframes floating-y-6 { 0%{transform:translateX(250%) translateY(-5%);} 100%{transform:translateX(250%) translateY(5%);} }

.mv-cloud03 { animation: floating-y-7 2s ease-in-out infinite alternate-reverse; animation-delay:1.2s; }
@keyframes floating-y-7 { 0%{transform:translateX(-170%) translateY(-5%);} 100%{transform:translateX(-170%) translateY(5%);} }

.about-cloud01 { animation: floating-y-8 2s ease-in-out infinite alternate-reverse; }
@keyframes floating-y-8 { 0%{transform:translateX(-230%) translateY(-5%);} 100%{transform:translateX(-230%) translateY(5%);} }

.points-cloud01 { animation: floating-y-9 2s ease-in-out infinite alternate-reverse; }
@keyframes floating-y-9 { 0%{transform:translateX(220%) translateY(-5%);} 100%{transform:translateX(220%) translateY(5%);} }

.scene-cloud01 { animation: floating-y-10 2s ease-in-out infinite alternate-reverse; animation-delay:.4s; }
@keyframes floating-y-10 { 0%{transform:translateX(-220%) translateY(-5%);} 100%{transform:translateX(-220%) translateY(5%);} }

.products-cloud01 { animation: floating-y-11 2s ease-in-out infinite alternate-reverse; animation-delay:1.2s; }
@keyframes floating-y-11 { 0%{transform:translateX(-220%) translateY(-5%);} 100%{transform:translateX(-220%) translateY(5%);} }

.header-cloud01 { animation: floating-y-12 2s ease-in-out infinite alternate-reverse; }
@keyframes floating-y-12 { 0%{transform:translateX(140%) translateY(-5%);} 100%{transform:translateX(140%) translateY(5%);} }

.header-cloud02 { animation: floating-y-13 2s ease-in-out infinite alternate-reverse; animation-delay:.4s; }
@keyframes floating-y-13 { 0%{transform:translateX(220%) translateY(-5%);} 100%{transform:translateX(220%) translateY(5%);} }

/* SP用の浮遊アニメ調整 */
@media (max-width: 767px) {
  .mv-riimo { animation: floating-y-1 2s ease-in-out infinite alternate-reverse; }
  @keyframes floating-y-1 { 0%{transform:translateX(-45%) translateY(-5%);} 100%{transform:translateX(-45%) translateY(5%);} }

  .scene-riimo01 { animation: floating-y-2 2s ease-in-out infinite alternate-reverse; }
  @keyframes floating-y-2 { 0%{transform:translateX(-10%) translateY(-5%);} 100%{transform:translateX(-10%) translateY(5%);} }

  .products-riimo01 { animation: floating-y-3 2s ease-in-out infinite alternate-reverse; }
  @keyframes floating-y-3 { 0%{transform:translateX(-30%) translateY(-5%);} 100%{transform:translateX(-30%) translateY(5%);} }

  .products-riimo02 { animation: floating-y-4 2s ease-in-out infinite alternate-reverse; animation-delay:.4s; }
  @keyframes floating-y-4 { 0%{transform:translateX(-120%) translateY(-5%);} 100%{transform:translateX(-120%) translateY(5%);} }

  .mv-cloud01 { animation: floating-y-5 2s ease-in-out infinite alternate-reverse; animation-delay:.4s; }
  @keyframes floating-y-5 { 0%{transform:translateX(150%) translateY(-5%);} 100%{transform:translateX(150%) translateY(5%);} }

  .mv-cloud02 { animation: floating-y-6 2s ease-in-out infinite alternate-reverse; animation-delay:.8s; }
  @keyframes floating-y-6 { 0%{transform:translateX(250%) translateY(-5%);} 100%{transform:translateX(250%) translateY(5%);} }

  .mv-cloud03 { animation: floating-y-7 2s ease-in-out infinite alternate-reverse; animation-delay:1.2s; }
  @keyframes floating-y-7 { 0%{transform:translateX(-180%) translateY(-5%);} 100%{transform:translateX(-180%) translateY(5%);} }

  .about-cloud01 { animation: floating-y-8 2s ease-in-out infinite alternate-reverse; }
  @keyframes floating-y-8 { 0%{transform:translateX(-230%) translateY(-5%);} 100%{transform:translateX(-230%) translateY(5%);} }

  .points-cloud01 { animation: floating-y-9 2s ease-in-out infinite alternate-reverse; }
  @keyframes floating-y-9 { 0%{transform:translateX(170%) translateY(-5%);} 100%{transform:translateX(170%) translateY(5%);} }

  .scene-cloud01 { animation: floating-y-10 2s ease-in-out infinite alternate-reverse; animation-delay:.4s; }
  @keyframes floating-y-10 { 0%{transform:translateX(-200%) translateY(-5%);} 100%{transform:translateX(-200%) translateY(5%);} }

  .products-cloud01 { animation: floating-y-11 2s ease-in-out infinite alternate-reverse; animation-delay:.8s; }
  @keyframes floating-y-11 { 0%{transform:translateX(-190%) translateY(-5%);} 100%{transform:translateX(-190%) translateY(5%);} }

  .header-cloud01 { animation: floating-y-12 2s ease-in-out infinite alternate-reverse; }
  @keyframes floating-y-12 { 0%{transform:translateX(40%) translateY(-5%);} 100%{transform:translateX(40%) translateY(5%);} }

  .header-cloud02 { animation: floating-y-13 2s ease-in-out infinite alternate-reverse; animation-delay:.4s; }
  @keyframes floating-y-13 { 0%{transform:translateX(110%) translateY(-5%);} 100%{transform:translateX(110%) translateY(5%);} }
}