@charset "UTF-8";
/* =====================================================
   Cool Pet Home LP
   Figma: 提出用データ node 73:3「LP最終デザイン_260721」(360×5876px)
   スケール: 1rem = 360px幅時の10px（480pxで頭打ち）
   ===================================================== */

:root {
  --c-text: #4C5972;      /* 文字 */
  --c-em: #124091;        /* 細文字（強調青） */
  --c-blue: #335397;      /* 文字青（見出し） */
  --c-navy: #36477B;      /* アンケート見出し・帯 */
  --c-bg: #EBEDF2;        /* セクション背景 */
  --grad-brand: linear-gradient(180deg, #4D7792 0%, #4A72A9 51.928%, #5C6FA3 84.621%);
  --grad-ondo: linear-gradient(180deg, #BAD0F6 0%, #7EA7F2 34.14%, #1C57C0 100%);
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Jost", sans-serif;
}

html {
  font-size: calc(min(100vw, 480px) / 36); /* 360px幅で10px */
  /* scroll-behavior: smooth は使わない（アンカーのアニメーションは script.js が担当） */
}

body {
  margin: 0;
  background: #E3E7EE;
  font-family: var(--font-jp);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

.lp {
  position: relative;
  width: 36rem;
  height: 596.6rem; /* 587.6rem のデザイン + 固定CTA退避用の白余白 9rem */
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 24px rgba(30, 40, 70, .12);
}

.lp p { margin: 0; position: absolute; }
.lp div { position: absolute; }
.lp img { display: block; }

/* 部分表示（Figmaのクロップ再現）用 */
.crop { position: absolute; inset: 0; overflow: hidden; }
.crop img { position: absolute; max-width: none; }

/* =====================================================
   背景レイヤー
   ===================================================== */
.fv-photo { left: -24.4rem; top: 0; width: 76.3rem; height: 78.5rem; overflow: hidden; }
.fv-photo img { position: absolute; max-width: none;
  width: 100%; height: 113.9%; left: 0; top: -13.89%; }

.uc-bg img { width: 100%; height: 100%; object-fit: cover; }
.uc-bg-1 { left: -3.8rem; top: 376.9rem; width: 47.3rem; height: 72.3rem; }
.uc-bg-2 { left: -4.8rem; top: 446.1rem; width: 49.3rem; height: 75.2rem; }
.uc-bg-2 img, .uc-bg-3 img { object-position: bottom; }
.uc-bg-3 { left: -4.8rem; top: 521.3rem; width: 49.3rem; height: 59.1rem; }

.uc-white { left: 0; top: 376.9rem; width: 36rem; height: 147.5rem; background: rgba(255, 255, 255, .32); }

.fade-notice { left: 0; top: 517.7rem; width: 36.8rem; height: 7.2rem;
  background: linear-gradient(180deg, rgba(235, 237, 242, 0) 0%, #EBEDF2 100%); }

.features-bg { left: 0; top: 113rem; width: 36rem; height: 263.9rem; background: var(--c-bg); }
.notice-bg { left: 0; top: 524.8rem; width: 36rem; height: 55.6rem; background: var(--c-bg); }
.footer-bg { left: 0; top: 575.3rem; width: 36rem; height: 5.1rem; background: #fff; }

/* =====================================================
   Features 装飾・写真
   ===================================================== */
.flooring { width: 40.5rem; height: 25.6rem; overflow: hidden; transform: scaleX(-1); }
.flooring-3 { left: -4.5rem; top: 336.6rem; }
.flooring-2 { left: -4.5rem; top: 287.2rem; }
.flooring img { position: absolute; max-width: none;
  width: 158.92%; height: 142.45%; left: -0.01%; top: -34.78%; }

.aircon-photo { left: -6.7rem; top: 237.8rem; width: 50rem; height: 25.6rem; overflow: hidden; }
.aircon-photo img { position: absolute; max-width: none;
  width: 100%; height: 109.86%; left: 0; top: -5.52%; }

.wave-features { left: -7.9rem; top: 207.1rem; width: 48.6rem; height: 12.9rem;
  overflow: hidden; mix-blend-mode: multiply; opacity: .38; }
.wave-features img { position: absolute; max-width: none;
  width: 174.74%; height: 469.64%; left: -11.32%; top: -0.82%; }

/* =====================================================
   Use Case 写真・タイムライン帯
   ===================================================== */
.photo-back { left: 11.3rem; top: 487.6rem; width: 24.7rem; height: 27.6rem; overflow: hidden; }
.photo-back img { position: absolute; max-width: none;
  width: 191.07%; height: 160.13%; left: -54.17%; top: -36.16%; }

.tl-band img, .notice-band img { width: 100%; height: 100%; }
.tl-band-1 { left: 5.1rem; top: 392.2rem; width: 14.35rem; height: 4.1rem; }
.tl-band-2 { left: 5.4rem; top: 436.3rem; width: 16.7rem; height: 4.1rem; }
.tl-band-3 { left: 5.5rem; top: 480.4rem; width: 15.6rem; height: 4.1rem; }
.notice-band { left: 10.4rem; top: 526rem; width: 15.6rem; height: 4.1rem; }

/* =====================================================
   コンセプト（導入）
   ===================================================== */
.concept-photo { left: -8.6rem; top: 58.6rem; width: 51.5rem; height: 53.7rem; overflow: hidden; }
.concept-photo img { position: absolute; max-width: none;
  width: 206.02%; height: 118.43%; left: -14.37%; top: 17.18%; }

.concept-blur { left: -5.7rem; top: 63.1rem; width: 50.1rem; height: 11.5rem; filter: blur(1.725rem); }
.concept-blur .crop img { width: 206.02%; height: 538.39%; left: -14.37%; top: -10.58%; }

.beagle-photo { left: 8rem; top: 89.3rem; width: 30.4rem; height: 23.7rem; overflow: hidden; }
.beagle-photo img { width: 100%; height: 100%; object-fit: cover; }

.intro-circle { left: -1.6rem; top: 90.8rem; width: 22.2rem; height: 22.2rem; }
.intro-circle img { position: absolute; left: -18.87%; top: -18.87%; width: 137.74%; height: 137.74%; }

.intro-copy { left: calc(50% - 14.4rem); font-size: 1.3rem; font-weight: 500;
  line-height: 1.65; color: var(--c-text); white-space: nowrap; }
.intro-copy-1 { top: 93.1rem; letter-spacing: .338rem; }
.intro-copy-2 { top: 95.2rem; letter-spacing: .364rem; }
.intro-copy-3 { top: 97.3rem; letter-spacing: .234rem; }
.intro-copy-4 { top: 100.7rem; letter-spacing: .377rem; }
.intro-copy-5 { top: 102.8rem; letter-spacing: .169rem; }
.intro-copy-6 { top: 104.9rem; letter-spacing: .39rem; }
.intro-copy-7 { top: 107rem; letter-spacing: .182rem; }

.intro-blur { left: -15.5rem; top: 109.2rem; width: 71.2rem; height: 7.5rem;
  background: var(--c-bg); filter: blur(2.265rem); }

/* =====================================================
   Owner's voice
   ===================================================== */
.voice-band { left: 50%; top: 120.9rem; width: 31.3rem; height: 3.3rem;
  background: var(--c-navy); transform: translateX(calc(-50% + .05rem)); }
.voice-title { left: calc(50% - 10.9rem); top: 115.6rem; }
.voice-copy { left: calc(50% - 15rem); top: 120.6rem;
  font-size: 2.2rem; font-weight: 500; line-height: 1.65; letter-spacing: .154rem;
  color: var(--c-blue); white-space: nowrap; }
.voice-copy-white { color: #fff; }

/* =====================================================
   温度対比
   ===================================================== */
.temp-circle img { width: 100%; height: 100%; }
.temp-circle-22 { left: 20.5rem; top: 133rem; width: 10.8rem; height: 10.8rem; }
.temp-circle-27 { left: 5.1rem; top: 130.6rem; width: 8rem; height: 8rem; }

.temp-text { font-family: var(--font-en); font-weight: 500; color: #fff; }
.temp-text-22 { left: 24.1rem; top: 136.6rem; font-size: 2.4rem; letter-spacing: .072rem; }
.temp-text-27 { left: 7.8rem; top: 133.4rem; font-size: 1.8rem; letter-spacing: .054rem; }

.thermo img { width: 100%; height: 100%; }
.thermo-lg { left: 20.9rem; top: 136.5rem; width: 3.72rem; height: 3.72rem; }
.thermo-sm { left: 5.6rem; top: 133.4rem; width: 2.5rem; height: 2.5rem; }

.temp-dog { left: 50%; top: 130.2rem; width: 17.5rem; height: 22.2rem;
  transform: translateX(calc(-50% + 2.05rem)); }
.temp-dog img { width: 100%; height: 100%; }

/* =====================================================
   アンケート（冷暖房設定の意識調査）
   ===================================================== */
.survey-lead { left: calc(50% - 14.8rem); font-size: 1.3rem; font-weight: 500;
  line-height: 1.65; color: var(--c-text); white-space: nowrap; }
.survey-lead-1 { top: 154.1rem; letter-spacing: .182rem; }
.survey-lead-2 { top: 156.1rem; letter-spacing: .169rem; }

.survey-blur { left: -7rem; top: 148.5rem; width: 52.8rem; height: 7.7rem;
  background: var(--c-bg); filter: blur(1.615rem); }

.survey { left: 0; top: 0; width: 36rem; }
.survey-card { left: 2.7rem; top: 160.4rem; width: 30.5rem; height: 30.5rem;
  background: #fff; box-shadow: .2rem .2rem .55rem 0 rgba(43, 57, 98, .19); }
.survey-title { left: calc(50% - 11.99rem); top: 161.45rem;
  font-size: 1.8rem; font-weight: 700; line-height: 1.5; letter-spacing: .126rem;
  color: var(--c-navy); white-space: nowrap; }
.survey-diamond { left: 4.4rem; top: 162.11rem; width: 1.198rem; height: 1.198rem;
  display: flex; align-items: center; justify-content: center; }
.survey-diamond img { width: .847rem; height: .847rem; transform: rotate(-135deg); flex: none; }

.survey-pie, .survey-pie-overlay { left: 10.494rem; top: 167.847rem;
  width: 17.374rem; height: 17.374rem; }
.survey-pie img, .survey-pie-overlay img { width: 100%; height: 100%; }

.survey-leader img { position: absolute; max-width: none; }
.survey-leader-1 { left: 24.855rem; top: 169.542rem; width: 6.608rem; height: 2.033rem; }
.survey-leader-1 img { left: -0.56%; top: -2.46%; width: 100.56%; height: 104.12%; }
.survey-leader-2 { left: 6.9rem; top: 183rem; width: 8.3rem; height: 3rem; }
.survey-leader-2 img { left: 0; top: -1.18%; width: 100.42%; height: 102.85%; }
.survey-leader-3 { left: 8.927rem; top: 169.542rem; width: 5.634rem; height: 1.101rem; }
.survey-leader-3 img { left: 0; top: -4.54%; width: 100.57%; height: 108.02%; }
.survey-leader-4 { left: 5.242rem; top: 174.667rem; width: 6.227rem; height: 1.61rem; }
.survey-leader-4 img { left: 0; top: -3.11%; width: 100.45%; height: 105.68%; }

.survey-num { font-family: var(--font-en); font-weight: 600; font-size: 2.4rem;
  line-height: normal; color: var(--c-em); white-space: nowrap; }
.survey-num span { font-weight: 700; font-size: 1.5rem; }
.survey-num-38 { left: 26.7rem; top: 166.6rem; }
.survey-num-19 { left: 9rem; top: 166.6rem; }
.survey-num-9 { left: 5.665rem; top: 171.73rem; }
.survey-num-34 { left: 7.2rem; top: 183rem; }
.is-dim { color: var(--c-text); opacity: .7; }

.survey-cat { font-size: 1.4rem; font-weight: 500; line-height: 1;
  color: var(--c-text); white-space: nowrap; transform: translateY(-50%); }
.survey-cat-both { left: calc(50% + 3.1rem); top: 166.2rem; }
.survey-cat-none { left: calc(50% - 10.8rem); top: 166.25rem; }
.survey-cat-heat { left: calc(50% - 14.2rem); top: 171.5rem; }
.survey-cat-cool { left: calc(50% - 11.9rem); top: 182.75rem; }

.survey-center-label { left: calc(50% + 1.306rem); top: 172.85rem;
  transform: translate(-50%, -50%); font-size: 1.3rem; font-weight: 500;
  line-height: 1; color: var(--c-text); white-space: nowrap; }
.survey-center-num { left: 16.17rem; top: 172.76rem;
  font-family: var(--font-en); font-weight: 600; font-size: 4rem;
  line-height: normal; color: var(--c-blue); }
.survey-center-num span { font-weight: 700; font-size: 2.4rem; }
.survey-center-desc { left: calc(50% + 1.136rem); top: 178.99rem;
  transform: translate(-50%, -50%); font-size: 1rem; font-weight: 500;
  line-height: 1.5; color: var(--c-text); text-align: center; white-space: nowrap; }
.survey-note { left: 20.2rem; top: 186.5rem; font-size: .8rem; font-weight: 500;
  line-height: 1.5; color: var(--c-text); white-space: nowrap; }

/* =====================================================
   ファーストビュー
   ===================================================== */
.logo-sharp { left: 2.3rem; top: 1.9rem; width: 9.6rem; height: 1.3rem; }
.logo-sharp img { width: 100%; height: 100%; }

.fv-logo { left: calc(50% - 14.5rem); top: 51.3rem;
  font-family: var(--font-en); font-weight: 400;
  font-size: 7.2rem; line-height: 6.1rem; letter-spacing: .432rem;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1.51rem rgba(255, 255, 255, .9)); }

.fv-subtitle { left: 3.8rem; top: 70.3rem; width: 15rem;
  font-size: 1.6rem; font-weight: 400; line-height: 1.5rem; letter-spacing: .032rem;
  color: var(--c-em); text-shadow: 0 0 1.03rem #fff; }

.wave-fv { left: -4.32rem; top: 60.83rem; width: 51.83rem; height: 27.6rem;
  display: flex; align-items: center; justify-content: center; }
.wave-fv-inner { position: relative; width: 52.83rem; height: 7.94rem;
  transform: rotate(-22.57deg); flex: none; }
.wave-fv .crop { mix-blend-mode: multiply; opacity: .38; }
.wave-fv .crop img { width: 98.63%; height: 469.64%; left: 0; top: -0.82%; }

.fv-copy { left: 13.9rem; top: 4.1rem; width: 8.8rem; height: 26.2rem;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 2rem; font-weight: 500; line-height: 3.7rem; letter-spacing: .24rem;
  color: #fff; text-shadow: 0 0 1.03rem #09133C; }

/* =====================================================
   コンセプトコピー（温度をつくる。）
   ===================================================== */
.concept-band { background: #fff; height: 3.8rem; }
.concept-band-1 { left: 50%; top: 80.8rem; width: 28.4rem; transform: translateX(calc(-50% - .9rem)); }
.concept-band-2 { left: 2.9rem; top: 85.8rem; width: 18.5rem; }

.concept-catch { left: calc(50% - 14.5rem); top: 80.2rem;
  font-size: 2.4rem; font-weight: 500; line-height: 4.9rem; letter-spacing: .36rem;
  color: var(--c-text); white-space: pre; }

.concept-ondo { left: 3.6rem; top: 85.8rem;
  font-size: 2.4rem; font-weight: 500; letter-spacing: .264rem;
  background: var(--grad-ondo);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; white-space: nowrap; }

/* =====================================================
   Features 一覧（アンカー）
   ===================================================== */
.section-title { font-family: var(--font-en); font-weight: 500;
  font-size: 2.4rem; letter-spacing: .144rem; color: var(--c-blue);
  text-shadow: 0 0 .6rem #fff; white-space: nowrap; }
.features-title { left: calc(50% - 7.2rem); top: 198.4rem; }
.usecase-title { left: calc(50% - 7.9rem); top: 383.5rem; }

.ficon { width: 9.7rem; height: 9.7rem; top: 208.1rem; }
.ficon-1 { left: 1.9rem; }
.ficon-2 { left: 13.1rem; }
.ficon-3 { left: 24.3rem; }
.ficon img { position: absolute; left: -7.53%; top: -7.53%; width: 115.06%; height: 115.06%; }

.fnum { font-family: var(--font-en); font-weight: 500; font-size: 2rem;
  letter-spacing: .12rem; color: var(--c-blue); top: 204.3rem; }
.fnum-1 { left: 5.6rem; }
.fnum-2 { left: 16.8rem; }
.fnum-3 { left: 27.9rem; }

.fname { font-family: var(--font-en); font-weight: 400; font-size: 2.4rem;
  letter-spacing: .144rem; color: var(--c-blue); top: 219.2rem; }
.fname-1 { left: 4.1rem; }
.fname-2 { left: 13.6rem; }
.fname-3 { left: 25.7rem; }

.icon-cool { left: 4.7rem; top: 210.8rem; width: 4.8rem; height: 4.3rem; }
.icon-cool img, .icon-monitor img { width: 100%; height: 100%; }
.icon-monitor { left: 15.3rem; top: 210.9rem; width: 5.9rem; height: 3.9rem; }
.icon-health { left: 27rem; top: 210.7rem; width: 4.3rem; height: 4.3rem; }
.icon-health-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.icon-paw { position: absolute; width: 25.36%; height: 24.09%; top: 56.14%; }
.icon-paw-1 { left: 19.93%; }
.icon-paw-2 { left: 54.71%; }

.ficon-link { position: absolute; display: block; width: 9.7rem; height: 21rem; top: 203.4rem; z-index: 5; }
.ficon-link-1 { left: 1.9rem; }
.ficon-link-2 { left: 13.1rem; }
.ficon-link-3 { left: 24.3rem; }

/* =====================================================
   Feature 見出し帯・本文
   ===================================================== */
.fband { width: 30.5rem; height: 8.2rem; scroll-margin-top: 4rem; }
.fband img { position: absolute; left: -1.15%; top: -4.27%; width: 103.61%; height: 113.42%; max-width: none; }
.fband-1 { left: -1.2rem; top: 232.3rem; }
.fband-3 { left: -1.2rem; top: 331.1rem; }
.fband-2 { left: 6.3rem; top: 281.7rem; }

.flabel { font-family: var(--font-en); font-weight: 400; font-size: 1.4rem;
  letter-spacing: .084rem; color: var(--c-blue); }
.flabel-1 { left: 2.1rem; top: 233rem; }
.flabel-2 { left: 10.3rem; top: 282.4rem; }
.flabel-3 { left: 2.1rem; top: 331.8rem; }

.fbignum { font-family: var(--font-en); font-weight: 400; font-size: 4.8rem;
  letter-spacing: -.048rem; color: var(--c-blue); text-shadow: 0 0 .83rem #fff; }
.fbignum-1 { left: 1.8rem; top: 233.7rem; }
.fbignum-2 { left: 10rem; top: 283rem; }
.fbignum-3 { left: 1.8rem; top: 332.5rem; }

.ftitle { font-size: 2.4rem; font-weight: 500; line-height: 1.45;
  letter-spacing: .168rem; color: var(--c-blue); }
.ftitle-1 { left: 8.8rem; top: 232.7rem; width: 17.8rem; }
.ftitle-2 { left: 17rem; top: 282.1rem; width: 21.6rem; }
.ftitle-3 { left: 8.8rem; top: 331.5rem; width: 17.8rem; }

.fdesc { font-size: 1.6rem; font-weight: 500; line-height: 1.65;
  letter-spacing: .096rem; text-align: justify; color: var(--c-text); width: 20.4rem; }
.fdesc-1 { left: 1.5rem; top: 265.9rem; }
.fdesc-2 { left: 13.8rem; top: 315.3rem; }
.fdesc-3 { left: 1.5rem; top: 364.7rem; }

.aircon-label { left: 2.1rem; top: 246.2rem; font-size: 1.2rem; font-weight: 500;
  line-height: 1.65; letter-spacing: .072rem; color: var(--c-blue); }

.arrow-aircon { left: 2.3rem; top: 248.2rem; width: 9rem; height: 2.4rem; transform: scaleX(-1); }
.arrow-aircon img { position: absolute; left: -4%; top: -15%; width: 108%; height: 130%; max-width: none; }
.arrow-usecase { left: 16.3rem; top: 356.2rem; width: 7.1rem; height: 2.4rem; transform: scaleY(-1); }
.arrow-usecase img { position: absolute; left: -5.07%; top: -15%; width: 110.14%; height: 130%; max-width: none; }

/* ---- 熱中症バッジ ---- */
.badge-line { width: 1.4rem; height: 2.6rem; }
.badge-line img { position: absolute; left: -3.14%; top: -0.91%; width: 106.28%; height: 101.82%; max-width: none; }
.badge-line-1 { left: 22rem; top: 228.9rem; }
.badge-line-2-wrap { left: 32.5rem; top: 233.1rem; width: 2.819rem; height: 1.87rem;
  display: flex; align-items: center; justify-content: center; }
.badge-line-2-inner { position: relative; width: 1.4rem; height: 2.6rem;
  transform: rotate(100.98deg); flex: none; }
.badge-line-2-inner img { position: absolute; left: -3.14%; top: -0.91%; width: 106.28%; height: 101.82%; max-width: none; }
.badge-heatstroke { left: 23.01rem; top: 228.23rem; width: 11.4rem; height: 6.1rem; }
.badge-heatstroke img { width: 100%; height: 100%; }

/* ---- Feature 01 温度サークル ---- */
.temp-circle-feature { left: 23.2rem; top: 265.5rem; width: 11.4rem; height: 11.4rem; }
.temp-circle-feature img { width: 100%; height: 100%; }
.thermo-feature { left: 23.48rem; top: 268.92rem; width: 4.71rem; height: 4.71rem; }
.f1-side-copy { left: 27.4rem; top: 267.9rem; width: 20.4rem;
  font-size: 1.3rem; font-weight: 500; line-height: 1.65; letter-spacing: .078rem;
  color: #fff; text-align: justify; }

/* ---- Feature 02 カメラ ---- */
.camera-in { left: 10.3rem; top: 297.8rem; width: 20.3rem; height: 14.4rem; overflow: hidden; }
.camera-in img { position: absolute; max-width: none;
  width: 207.96%; height: 165.14%; left: -38.1%; top: -38.07%; }
.camera-top { left: 13.3rem; top: 296.7rem; width: 16.8rem; height: 15.3rem;
  overflow: hidden; opacity: .4; }
.camera-top img { position: absolute; max-width: none;
  width: 249.76%; height: 154.34%; left: -63.22%; top: -27.87%; }

.camera-leader-1 { left: 19.4rem; top: 292.2rem; width: 6.95rem; height: 6.55rem; }
.camera-leader-1 img { position: absolute; left: -0.72%; top: -0.76%; width: 101.44%; height: 101.53%; max-width: none; }
.camera-leader-2 { left: 20.15rem; top: 299.95rem; width: 10.3rem; height: 1.1rem; }
.camera-leader-2 img { position: absolute; left: -0.49%; top: -4.55%; width: 100.97%; height: 109.1%; max-width: none; }

.camera-dot { left: 18.8rem; top: 298.5rem; width: 2.6rem; height: 2.6rem; }
.camera-dot img { width: 100%; height: 100%; }
.camera-circle-fill { left: 24.9rem; top: 290.9rem; width: 9.2rem; height: 9.2rem; }
.camera-circle-fill img, .camera-circle-ring img { width: 100%; height: 100%; }
.camera-circle-ring { left: 24.9rem; top: 290.8rem; width: 9.3rem; height: 9.3rem; }

.camera-zoom { left: 16rem; top: 285.4rem; width: 22.9rem; height: 17.7rem; overflow: hidden;
  -webkit-mask-image: url(../images/camera-zoom-mask.svg);
  mask-image: url(../images/camera-zoom-mask.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 8.9rem 5.5rem; mask-position: 8.9rem 5.5rem;
  -webkit-mask-size: 9.2rem 9.2rem; mask-size: 9.2rem 9.2rem; }
.camera-zoom img { position: absolute; max-width: none;
  width: 142.79%; height: 172.98%; left: -8.3%; top: -0.05%; }

/* ---- Feature 03 スケール ---- */
.scale-photo { left: -2.6rem; top: 342.03rem; width: 24.54rem; height: 18.67rem; }
.scale-photo .crop img { width: 268.53%; height: 198.53%; left: -93.43%; top: -79.6%; }
.scale-overlay { left: -2.6rem; top: 341.1rem; width: 24.54rem; height: 19.6rem; opacity: .39; }
.scale-overlay .crop img { width: 268.53%; height: 189.14%; left: -93.43%; top: -71.1%; }

/* =====================================================
   アプリ画面（スマホ）
   ===================================================== */
.phone-weight { left: 23.4rem; top: 341.1rem; width: 15.2rem; height: 33.1rem;
  border-radius: 1.7rem; box-shadow: 0 0 .65rem 0 #3D3D3D; }
.phone-weight .crop { border-radius: 1.7rem; }
.phone-weight .crop img { width: 101.44%; height: 101.66%; left: 0; top: -0.5%; }

.phone-camera { left: -2.7rem; top: 291.7rem; width: 15.1rem; height: 33.1rem;
  border-radius: 1.8rem; box-shadow: 0 0 .65rem 0 #3D3D3D; }
.phone-camera .crop { border-radius: 1.8rem; }
.phone-camera .crop img { width: 100.66%; height: 100.34%; left: 0; top: -0.17%; }

.phone-crop { width: 12.6rem; box-shadow: 0 0 .65rem 0 #3D3D3D; }
.phone-crop-morning { left: 5.1rem; top: 411.3rem; height: 17rem;
  border-radius: 1.4rem 1.5rem 0 0; }
.phone-crop-morning .crop { border-radius: 1.4rem 1.5rem 0 0; }
.phone-crop-morning .crop img { width: 101.44%; height: 163.66%; left: 0; top: -0.81%; }
.phone-crop-out { left: 5.1rem; top: 457.2rem; width: 12.5rem; height: 16.6rem;
  border-radius: 1.5rem 1.7rem 0 0; }
.phone-crop-out .crop { border-radius: 1.5rem 1.7rem 0 0; }
.phone-crop-out .crop img { width: 101.73%; height: 115.36%; left: -0.27%; top: -0.9%; }

/* =====================================================
   Use Case
   ===================================================== */
.fade-usecase { left: -0.2rem; top: 376.9rem; width: 36.8rem; height: 7.2rem;
  background: linear-gradient(180deg, #EBEDF2 0%, rgba(235, 237, 242, 0) 100%); }

.tl-line { left: 3.1rem; top: 393.8rem; width: .2rem; height: 121.15rem; }
.tl-line-2 { left: 3.1rem; top: 514.4rem; width: .2rem; height: 4.8rem; }
.tl-line img, .tl-line-2 img { width: 100%; height: 100%; }

.tl-dot { width: 1.6rem; height: 1.6rem; }
.tl-dot img { width: 100%; height: 100%; }
.tl-dot-1 { left: 2.4rem; top: 393.3rem; }
.tl-dot-2 { left: 2.4rem; top: 437.6rem; }
.tl-dot-3 { left: 2.4rem; top: 481.6rem; }

.clock { width: 3.394rem; height: 3.394rem; display: flex;
  align-items: center; justify-content: center; }
.clock img { width: 2.4rem; height: 2.4rem; transform: rotate(-135deg); flex: none; }
.clock-1 { left: 5.8rem; top: 392.6rem; }
.clock-2 { left: 6rem; top: 436.7rem; }
.clock-3 { left: 5.9rem; top: 480.7rem; }

.tl-time { font-family: var(--font-en); font-weight: 400; font-size: 1.6rem;
  letter-spacing: .096rem; color: #fff; white-space: nowrap; }
.tl-time-1 { left: 9.4rem; top: 393.2rem; }
.tl-time-2 { left: 9.6rem; top: 437.3rem; }
.tl-time-3 { left: 9.5rem; top: 481.3rem; }

.tl-label { font-size: 1.6rem; font-weight: 500; letter-spacing: .096rem;
  color: #fff; white-space: nowrap; }
.tl-label-1 { left: 13.8rem; top: 393.1rem; }
.tl-label-2 { left: 15.1rem; top: 437.2rem; }
.tl-label-3 { left: 15rem; top: 481.2rem; }

.photo-morning { left: 11.3rem; top: 399.4rem; width: 24.7rem; height: 27.6rem; overflow: hidden; }
.photo-morning img { position: absolute; max-width: none;
  width: 232.99%; height: 138.86%; left: -52.96%; top: -38.62%; }

.photo-out { left: 11.3rem; top: 443.5rem; width: 24.8rem; height: 16.5rem; overflow: hidden; }
.photo-out img { width: 100%; height: 100%; object-fit: cover; }

.camera-view { left: 13.3rem; top: 453.7rem; width: 22.7rem; height: 17.4rem; overflow: hidden; }
.camera-view img { position: absolute; max-width: none;
  width: 137.29%; height: 100%; left: -6.89%; top: 0; }

.app-note { font-size: 1.4rem; font-weight: 500; line-height: 2.03;
  letter-spacing: .084rem; color: var(--c-text); text-shadow: 0 0 .19rem #fff;
  white-space: nowrap; }
.app-note-scale { left: 5.1rem; top: 429.3rem; }
.app-note-monitor { left: 5.1rem; top: 474.7rem; }

.bubble { background: #fff; height: 2.7rem; }
.bubble-m1 { left: 5.1rem; top: 401.9rem; width: 23.1rem; }
.bubble-m2 { left: 5.1rem; top: 405.1rem; width: 16.7rem; }
.bubble-o1 { left: 5.1rem; top: 446rem; width: 12rem; }
.bubble-o2 { left: 5.1rem; top: 449.2rem; width: 10.3rem; }
.bubble-o3 { left: 5.1rem; top: 452.3rem; width: 14.8rem; }
.bubble-b1 { left: 5.1rem; top: 490.1rem; width: 18.3rem; }
.bubble-b2 { left: 5.1rem; top: 493.3rem; width: 19.8rem; }

.bubble-text { font-size: 1.5rem; font-weight: 500; line-height: 2.07;
  letter-spacing: .09rem; color: var(--c-text); text-shadow: 0 0 .19rem #fff;
  width: 24.4rem; }
.bubble-text-m { left: 5.5rem; top: 401.7rem; }
.bubble-text-o { left: 5.5rem; top: 445.8rem; }
.bubble-text-b { left: 5.5rem; top: 489.9rem; }

/* =====================================================
   注意事項・フッター
   ===================================================== */
.notice-title { left: 15.2rem; top: 526.6rem; font-size: 1.5rem; font-weight: 500;
  line-height: 2.03; letter-spacing: .09rem; color: #fff; }

.notice-lead { left: 50%; top: 532.7rem; width: 28.3rem;
  transform: translateX(calc(-50% + .05rem));
  font-size: 1.5rem; font-weight: 700; line-height: 2.03; letter-spacing: .09rem;
  color: var(--c-em); text-align: center; text-shadow: 0 0 .19rem #fff; }

.notice-body { left: 3.2rem; width: 29.9rem;
  font-size: 1.3rem; font-weight: 500; line-height: 2.03; letter-spacing: .078rem;
  color: var(--c-text); text-shadow: 0 0 .19rem #fff; }
.notice-body-1 { top: 541rem; }
.notice-body-2 { top: 555.1rem; }
.notice-body-3 { top: 566.6rem; }

.footer-company, .footer-copyright { top: 576.9rem;
  font-size: 1rem; font-weight: 500; line-height: 2.03; letter-spacing: .06rem;
  color: var(--c-text); text-shadow: 0 0 .19rem #fff; white-space: nowrap; }
.footer-company { left: 1.9rem; }
.footer-copyright { left: 21.5rem; }

/* =====================================================
   固定CTA
   ===================================================== */
.cta {
  position: fixed;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 31.8rem;
  height: 5.4rem;
  border-radius: 2.7rem;
  background: var(--grad-brand);
  box-shadow: 0 0 1.05rem 0 #2E4779;
  font-family: var(--font-jp);
  color: #fff;
  text-decoration: none;
}
.cta-main { font-size: 1.7rem; font-weight: 700; line-height: 1.4; letter-spacing: .204rem; }
.cta-note { font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: .08rem; }
.cta:hover { opacity: .9; }