@charset "UTF-8";

/* ============================================================
   RentioROOM (ニュウマン高輪 ポップアップストア) LP
   レイアウトの基本は Bootstrap のユーティリティクラスで構成しています。
   ここにはユーティリティで表現できないものだけを記述しています。
   モバイル: 〜575px / PC: 576px〜 (Bootstrap の sm)
   ============================================================ */

#rentioroom2026 {
  color: var(--rn-black-90);
}

/* LP共通のコンテンツ幅。この中に .container を置いて左右パディングは .container に任せる */
#rentioroom2026 .rentioroom2026__content {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* 画像の幅（モバイル → PC(576px〜) で切り替え）。画像が収まらない狭い画面では親の幅に縮む */
#rentioroom2026 .rentioroom2026__ornament,
#rentioroom2026 .rentioroom2026__sectionHeading,
#rentioroom2026 .rentioroom2026__heroLead,
#rentioroom2026 .rentioroom2026__heroLogo,
#rentioroom2026 .rentioroom2026__heroInfo,
#rentioroom2026 .rentioroom2026__logoLoop,
#rentioroom2026 .rentioroom2026__aboutImage,
#rentioroom2026 .rentioroom2026__aboutLead,
#rentioroom2026 .rentioroom2026__projectFeatureImage,
#rentioroom2026 .rentioroom2026__brandLogo,
#rentioroom2026 .rentioroom2026__projectPickImage,
#rentioroom2026 .rentioroom2026__projectSmallImage {
  display: block;
  max-width: 100%;
  height: auto;
}

#rentioroom2026 .rentioroom2026__ornament {
  width: 60px;
}

#rentioroom2026 .rentioroom2026__sectionHeading {
  width: 312px;
}

#rentioroom2026 .rentioroom2026__heroLead {
  width: 235px;
}

#rentioroom2026 .rentioroom2026__heroLogo {
  width: 313px;
}

#rentioroom2026 .rentioroom2026__heroInfo {
  width: 250px;
}

#rentioroom2026 .rentioroom2026__logoLoop {
  width: 480px;
}

#rentioroom2026 .rentioroom2026__aboutImage {
  width: 210px;
}

#rentioroom2026 .rentioroom2026__aboutLead {
  width: 251px;
}

#rentioroom2026 .rentioroom2026__projectFeatureImage {
  width: 366px;
}

#rentioroom2026 .rentioroom2026__brandLogo {
  width: 133px;
}

#rentioroom2026 .rentioroom2026__projectPickImage {
  width: 120px;
}

#rentioroom2026 .rentioroom2026__projectSmallImage {
  width: 75px;
}

/* ヒーローの文字ブロックの上余白（モバイルは mt-3。PCは padding-top で 202px） */
#rentioroom2026 .rentioroom2026__heroLogoBox {
  margin-top: 16px;
}

#rentioroom2026 .rentioroom2026__heroInfoBox {
  margin-top: 34px;
}

/* 行間 1.75（Bootstrap の lh-* にない値） */
#rentioroom2026 .rentioroom2026__lh175 {
  line-height: 1.75;
}

/* ノイズ背景 */
#rentioroom2026 .rentioroom2026__bgPattern {
  background-color: var(--rn-khaki-6);
  background-image: url("../img/bg_pattern.png");
  background-image: image-set(
    url("../img/bg_pattern.webp") type("image/webp"),
    url("../img/bg_pattern.png") type("image/png")
  );
  background-size: 200px 200px;
}

/* ---------- ヒーロー ---------- */
#rentioroom2026 .rentioroom2026__heroSparkle {
  left: calc(100% - 240px);
  width: 359px;
}

/* ---------- ヒーロー：商品画像のカプセルを丸 → カプセルの順に出現させる ----------
   hero_products_*.png をカプセルごとに切り出して重ねている（PC: desktop / モバイル: mobile_1, mobile_2）。
   --x/--y/--w/--h : 元画像上の位置とサイズ(px)
   --p             : 円の位置（縦方向）。0=上端 / 1=中央 / 2=下端
   --delay         : 出現開始の遅延（--image-start 後からの相対） */
#rentioroom2026 .rentioroom2026__capsules {
  /* 文字の出現（0.3秒〜）の途中から画像の出現を始めるためのずらし */
  --image-start: 0.9s;
  /* フェードインが始まってから、丸 → カプセルの変形が始まるまでの待ち */
  --morph-wait: 0.3s;
  --iw: 609;
  --ih: 1170;
  --s: calc(800 / 1170);
  width: calc(var(--iw) * var(--s) * 1px);
  height: calc(var(--ih) * var(--s) * 1px);
}

/* PCは文字（キャッチコピー）と同時（0.3秒）に出現を始める */
#rentioroom2026 .rentioroom2026__capsules--pc {
  --image-start: 0.3s;
}

/* モバイル用（hero_products_mobile_1 / _2：640×500 を 320×250 で表示） */
#rentioroom2026 .rentioroom2026__capsules--sp1,
#rentioroom2026 .rentioroom2026__capsules--sp2 {
  --iw: 640;
  --ih: 500;
  --s: 0.5;
}

#rentioroom2026 .rentioroom2026__capsules--pc .rentioroom2026__capsule {
  background-image: url("../img/hero_products_desktop.png");
  background-image: image-set(
    url("../img/hero_products_desktop.webp") type("image/webp"),
    url("../img/hero_products_desktop.png") type("image/png")
  );
}

#rentioroom2026 .rentioroom2026__capsules--sp1 .rentioroom2026__capsule {
  background-image: url("../img/hero_products_mobile_1.png");
  background-image: image-set(
    url("../img/hero_products_mobile_1.webp") type("image/webp"),
    url("../img/hero_products_mobile_1.png") type("image/png")
  );
}

#rentioroom2026 .rentioroom2026__capsules--sp2 .rentioroom2026__capsule {
  background-image: url("../img/hero_products_mobile_2.png");
  background-image: image-set(
    url("../img/hero_products_mobile_2.webp") type("image/webp"),
    url("../img/hero_products_mobile_2.png") type("image/png")
  );
}

#rentioroom2026 .rentioroom2026__capsule {
  --rt: 1;
  --rb: 1;
  --d: min(var(--w), var(--h));
  --ev: calc(var(--h) - var(--d));
  --off: calc(var(--ev) * var(--p) / 2);
  --t0: calc(var(--off) * var(--s) * 1px);
  --b0: calc((var(--ev) - var(--off)) * var(--s) * 1px);
  --l0: calc((var(--w) - var(--d)) / 2 * var(--s) * 1px);
  --r0: var(--l0);
  --rs: calc(var(--d) * var(--s) * 0.5px);
  --re: calc(var(--w) * var(--s) * 0.5px);
  position: absolute;
  left: calc(var(--x) * var(--s) * 1px);
  top: calc(var(--y) * var(--s) * 1px);
  width: calc(var(--w) * var(--s) * 1px);
  height: calc(var(--h) * var(--s) * 1px);
  background-size: calc(var(--iw) * var(--s) * 1px) calc(var(--ih) * var(--s) * 1px);
  background-position: calc(var(--x) * var(--s) * -1px) calc(var(--y) * var(--s) * -1px);
  /* 最終形（アニメーションなしの場合もこの形）。画像の上端・下端で切れているカプセルはその側の角を丸めない */
  clip-path: inset(0 0 0 0 round calc(var(--rt) * var(--re)) calc(var(--rt) * var(--re)) calc(var(--rb) * var(--re)) calc(var(--rb) * var(--re)));
  animation:
    rentioroom2026_capsuleMorph 1.1s cubic-bezier(0.76, 0, 0.24, 1) calc(var(--image-start) + var(--delay) + var(--morph-wait)) backwards,
    rentioroom2026_fadeIn 1.4s ease-in-out calc(var(--image-start) + var(--delay)) backwards;
}

/* 模様だけのカプセルは変形せず、透明からフェードインするだけ */
#rentioroom2026 .rentioroom2026__capsule--plain {
  animation: rentioroom2026_fadeIn 0.8s ease-in-out calc(var(--image-start) + var(--delay)) backwards;
}

#rentioroom2026 .rentioroom2026__capsule--cutTop {
  --rt: 0;
}

#rentioroom2026 .rentioroom2026__capsule--cutBottom {
  --rb: 0;
}

/* ヒーローの文字（キャッチコピー → ロゴ → 日付・会場）を、少し下からフェードインさせる（終点がデザインの位置） */
#rentioroom2026 .rentioroom2026__textIn {
  animation: rentioroom2026_textIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* 出現開始の遅延（キャッチコピー → ロゴ → 日付・会場） */
#rentioroom2026 .rentioroom2026__heroLeadBox {
  animation-delay: 0.3s;
}

#rentioroom2026 .rentioroom2026__heroLogoBox {
  animation-delay: 0.6s;
}

#rentioroom2026 .rentioroom2026__heroInfoBox {
  animation-delay: 0.9s;
}

@keyframes rentioroom2026_textIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* 丸 → カプセル：深めのイーズインアウト（1.1秒）。出現のフェードは1.4秒 */
@keyframes rentioroom2026_capsuleMorph {
  from {
    clip-path: inset(var(--t0) var(--r0) var(--b0) var(--l0) round var(--rs));
  }
}

@keyframes rentioroom2026_fadeIn {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #rentioroom2026 .rentioroom2026__capsule,
  #rentioroom2026 .rentioroom2026__capsule--plain,
  #rentioroom2026 .rentioroom2026__textIn {
    animation: none;
  }

  #rentioroom2026 .js-scroll-in.is-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- パートナーブランド（ロゴの無限ループ） ---------- */
#rentioroom2026 .rentioroom2026__logoLoopUnit {
  animation: rentioroom2026_logoLoop 22s infinite linear both;
}

#rentioroom2026 .rentioroom2026__logoLoopUnit img {
  max-width: none;
}

@keyframes rentioroom2026_logoLoop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #rentioroom2026 .rentioroom2026__logoLoopUnit {
    animation: none;
  }
}

/* ---------- 画面に入ったタイミングでフェードイン（JS が is-ready / is-visible を付ける） ---------- */
#rentioroom2026 .js-scroll-in.is-ready {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1), transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#rentioroom2026 .js-scroll-in.is-ready.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- About ---------- */
/* 背景画像：モバイルは画像の比率のまま、PCは高さ595pxで左右を切り抜く */
#rentioroom2026 .rentioroom2026__aboutBg {
  height: auto;
}

#rentioroom2026 .rentioroom2026__aboutFloats {
  top: 180px;
}

/* 装飾画像は1700pxの原寸で左右中央に置く。画面が狭いときは左右にはみ出す（セクションの overflow: hidden で隠れる） */
#rentioroom2026 .rentioroom2026__aboutFloatsImg {
  display: block;
  width: 1700px;
  max-width: none;
  height: auto;
}

#rentioroom2026 .rentioroom2026__aboutCard {
  padding: 48px 24px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #fff;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: 0 20px 60px #e7deca, inset 0 0 40px rgba(231, 222, 202, 0.6);
}

/* ---------- 展示プロジェクト ---------- */
#rentioroom2026 .rentioroom2026__project {
  background: linear-gradient(to bottom, var(--rn-khaki-6) 30%, #fff);
}

#rentioroom2026 .rentioroom2026__btnNavy,
#rentioroom2026 .rentioroom2026__btnNavy:visited {
  background-color: var(--rn-navy-2);
  color: #fff;
}

#rentioroom2026 .rentioroom2026__btnNavy:hover {
  background-color: var(--rn-navy-2);
  color: #fff;
  filter: brightness(1.15);
}

/* ---------- 会場アクセス（地図を少しずらした背景と重ねる） ---------- */
#rentioroom2026 .rentioroom2026__mapWrap {
  --offset: 10px;
  padding-left: var(--offset);
  padding-bottom: var(--offset);
}

#rentioroom2026 .rentioroom2026__mapBg {
  left: 0;
  bottom: 0;
  width: calc(100% - var(--offset));
  height: calc(100% - var(--offset));
}

/* ---------- 予約フォーム（iframe の高さはフォームの実寸） ---------- */
#rentioroom2026 .rentioroom2026__form {
  height: 840px;
}

/* ---------- 追従バー ---------- */
#rentioroom2026 .rentioroom2026__floatBar {
  z-index: 1030;
  background: linear-gradient(-2deg, rgb(72, 100, 129) 12%, rgb(94, 115, 137) 92%);
  transition: all 0.15s 0s ease-out;
}

#rentioroom2026 .rentioroom2026__floatBar:not(.rentioroom2026__floatBar--hidden):hover {
  filter: brightness(1.15);
}

#rentioroom2026 .rentioroom2026__floatBar--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- PC（576px〜） ---------- */
@media (min-width: 576px) {
  /* PCは幅1180px固定。これより狭い画面では縮まず、横スクロールになる */
  #rentioroom2026 {
    min-width: 1180px;
  }

  #rentioroom2026 .rentioroom2026__form {
    height: 800px;
  }

  #rentioroom2026 .rentioroom2026__aboutBg {
    height: 595px;
  }

  #rentioroom2026 .rentioroom2026__ornament {
    width: 100px;
  }

  #rentioroom2026 .rentioroom2026__sectionHeading {
    width: 520px;
  }

  #rentioroom2026 .rentioroom2026__heroLead {
    width: 498px;
  }

  #rentioroom2026 .rentioroom2026__heroLogo {
    width: 639px;
  }

  #rentioroom2026 .rentioroom2026__heroInfo {
    width: 401px;
  }

  #rentioroom2026 .rentioroom2026__logoLoop {
    width: 720px;
  }

  #rentioroom2026 .rentioroom2026__aboutImage {
    width: 420px;
  }

  #rentioroom2026 .rentioroom2026__aboutLead {
    width: 457px;
  }

  #rentioroom2026 .rentioroom2026__projectFeatureImage {
    width: 548px;
  }

  #rentioroom2026 .rentioroom2026__brandLogo {
    width: 167px;
  }

  #rentioroom2026 .rentioroom2026__projectPickImage {
    width: 150px;
  }

  #rentioroom2026 .rentioroom2026__projectSmallImage {
    width: 110px;
  }

  #rentioroom2026 .rentioroom2026__heroTitle {
    padding-top: 202px;
  }

  #rentioroom2026 .rentioroom2026__heroLogoBox {
    margin-top: 39px;
  }

  #rentioroom2026 .rentioroom2026__heroInfoBox {
    margin-top: 81px;
  }

  #rentioroom2026 .rentioroom2026__logoLoopUnit {
    animation-duration: 29s;
  }

  #rentioroom2026 .rentioroom2026__aboutCard {
    padding: 80px 48px;
  }

  #rentioroom2026 .rentioroom2026__mapWrap {
    --offset: 18px;
  }
}