/* 管理会社様・オーナー様向けのページ（OwnerPage.astro・試し版）
   2026-10-29 TOP と同じ「質感」で、このページだけの並べ方に（栄成さん「配置やフレームまでを一緒にしてという意味ではないです」）
   質感＝太く大きい見出し（900・字の間を詰める）／白とごく薄い青〜緑のグラデーションの地／大きな角丸（28〜32px）とふんわり広がる影／
         本物の画面とカード・浮かせた白い札／大きな英数字（Inter）の数字を青〜緑に／広い余白。箱の中にさらに箱を入れない
   読みやすさ：数字は「何の数字か」を先に大きく書き、数字はその下に（10/29） */
.ow-page { --ink: #0b1b2b; --ink2: #4f5b67; --navy: #00285a; --blue: #0a8fe6; --grad: linear-gradient(110deg, #009ffd, #23e4ab); --soft: linear-gradient(150deg, #f2f8fd 0%, #e8f3fb 55%, #e9f8f3 100%);
  --sh: 0 40px 80px -48px rgba(0,40,90,.45); --sh-s: 0 18px 36px -22px rgba(0,40,90,.35); }
html:has(body.ow-page) { overflow-x: clip; }
.ow-wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
.ow-page h1, .ow-page h2, .ow-page h3, .ow-page p, .ow-page li, .ow-page dd { word-break: auto-phrase; }
.ow-page img { display: block; max-width: 100%; }
.ow-page svg { display: block; }

/* 共通の部品 */
.ow-h2 { margin: 0 0 22px; font: 700 clamp(30px, 3.8vw, 52px)/1.22 "Noto Sans JP", sans-serif; letter-spacing: -.025em; color: var(--ink); }
.ow-lead { margin: 0 0 14px; max-width: 30em; font-size: 17px; line-height: 1.95; color: var(--ink2); }
.ow-kicker { margin: 0 0 16px; font-size: 14px; font-weight: 800; letter-spacing: .08em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.ow-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 44px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; box-shadow: 0 18px 36px -18px rgba(0,40,90,.7); }
.ow-btn:hover { opacity: .92; }
.ow-ph { display: grid; place-items: center; padding: 8px; border: 2px dashed #c3cfdb; border-radius: 16px; background: rgba(255,255,255,.6); color: #7a8896; font-size: 11px; font-weight: 600; line-height: 1.5; text-align: center; box-sizing: border-box; }
.ow-ph--chip { width: 64px; height: 48px; margin: 0 auto 8px; font-size: 9px; }
.ow-ph--prop { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 10px; }
.ow-phone { --w: 200px; --p: 7px; position: relative; width: var(--w); aspect-ratio: 804 / 1748; padding: var(--p); border-radius: calc(var(--w) * .17); background: #0b0f14; box-shadow: 0 50px 90px -40px rgba(0,40,90,.55); box-sizing: border-box; }
.ow-phone::before { content: ""; position: absolute; top: 3.2%; left: 50%; width: 30%; height: 3.6%; transform: translateX(-50%); border-radius: 99px; background: #0b0f14; z-index: 2; }
.ow-phone img { position: absolute; left: var(--p); top: var(--p); width: calc(100% - 2 * var(--p)); height: calc(100% - 2 * var(--p)); object-fit: cover; object-position: top; border-radius: calc(var(--w) * .135); }

/* 0 最初の画面 */
.ow-hero { position: relative; padding: 56px 0 0; overflow: hidden; }
.ow-hero__bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #f3f8fd 0%, #fff 80%); }
.ow-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,60,120,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,60,120,.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.ow-glow { position: absolute; right: -10%; top: 10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0,159,253,.20), rgba(35,228,171,.10) 45%, transparent 70%); filter: blur(10px); }
.ow-hero__in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.ow-eyebrow { margin: 0 0 18px; display: inline-block; padding: 7px 16px; border-radius: 999px; background: #fff; box-shadow: var(--sh-s); font-size: 14px; font-weight: 700; color: var(--navy); }
.ow-h1 { margin: 0; font: 700 clamp(40px, 5.6vw, 80px)/1.12 "Noto Sans JP", sans-serif; letter-spacing: -.035em; color: var(--ink); }
.ow-h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-h1sub { margin: 16px 0 0; font: 800 clamp(20px, 2.2vw, 28px)/1.4 "Noto Sans JP", sans-serif; letter-spacing: -.01em; color: var(--navy); }
.ow-pills { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ow-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; box-shadow: var(--sh-s); font-size: 14px; font-weight: 700; color: var(--ink); }
.ow-pills svg { width: 34px; height: 26px; padding: 4px; border-radius: 50%; background: #eef6fc; }
.ow-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.ow-share { position: relative; }
.ow-share__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--sh-s); color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ow-share__btn::before { content: '↗'; color: var(--blue); }
.ow-share__alt { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--sh); }
.ow-share__alt[hidden] { display: none; }
.ow-share__alt button, .ow-share__alt a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: #eef5fb; border: 0; color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ow-share__note { margin: 14px 0 0; font-size: 13px; color: var(--ink2); }
.ow-stage { position: relative; }
.ow-stage__card { position: relative; aspect-ratio: 1 / 1.02; border-radius: 36px; background: linear-gradient(150deg, #e7f3fc 0%, #d6ebfa 50%, #d9f6ec 100%); box-shadow: var(--sh); overflow: hidden; }
.ow-stage__phone { position: absolute; left: 50%; top: 9%; --w: 44%; width: var(--w); transform: translateX(-50%); --p: 8px; }
.ow-float { position: absolute; z-index: 2; padding: 14px 18px; border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 24px 48px -20px rgba(0,40,90,.45); }
.ow-float small { display: block; font-size: 11px; color: var(--ink2); }
.ow-float b { display: block; color: var(--ink); }
.ow-float--paid { left: 6%; top: 14%; display: flex; align-items: center; gap: 10px; max-width: 54%; }
.ow-float--paid p { margin: 0; } .ow-float--paid b { font-size: 13px; line-height: 1.45; }
.ow-float__ic img { width: 38px; height: 38px; border-radius: 10px; }
.ow-float--bank { right: 5%; top: 46%; }
.ow-float--bank b { font: 800 30px/1.1 "Inter", sans-serif; letter-spacing: -.02em; margin: 4px 0; } .ow-float--bank b span { font-size: 15px; margin-left: 2px; }
.ow-float--bank em { font-style: normal; font-size: 13px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-float--zero { left: 6%; bottom: 22%; }
.ow-float--zero b { font: 800 40px/1 "Inter", sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .ow-float--zero b span { font-size: 16px; }
.ow-play { position: absolute; z-index: 3; left: 50%; bottom: 5%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.97); box-shadow: 0 20px 44px -18px rgba(0,40,90,.5); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.ow-play__ic { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--navy); }
.ow-play__ic::after { content: ''; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
.ow-play b { display: block; font-size: 15px; color: var(--ink); } .ow-play small { font-size: 11px; color: var(--ink2); }
.ow-zero { list-style: none; margin: 64px auto 0; padding: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #e6edf3; border-bottom: 1px solid #e6edf3; }
.ow-zero li { text-align: center; } .ow-zero li + li { border-left: 1px solid #e6edf3; }
.ow-zero b { display: block; font: 800 clamp(40px, 4.4vw, 60px)/1 "Inter", sans-serif; letter-spacing: -.04em; color: var(--ink); }
.ow-zero small { font-size: .38em; margin-left: 2px; letter-spacing: 0; }
.ow-zero span { display: block; margin-top: 8px; font-size: 14px; color: var(--ink2); }

/* 1 RentEase とは */
.ow-about { padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 9vw, 120px); }
.ow-about__in { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.ow-no { margin: 26px 0 0; display: inline-block; padding: 12px 18px; border-radius: 16px; background: var(--soft); font-size: 15px; font-weight: 700; color: var(--navy); }
.ow-flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; }
.ow-flow::before { content: ''; position: absolute; left: 36px; top: 40px; bottom: 40px; width: 3px; border-radius: 3px; background: var(--grad); opacity: .5; }
.ow-flow__step { position: relative; display: grid; grid-template-columns: 72px 128px 1fr; align-items: center; gap: 18px; padding: 18px 24px 18px 18px; border-radius: 28px; background: #fff; box-shadow: var(--sh); }
.ow-flow__step--main { background: var(--soft); box-shadow: 0 40px 80px -44px rgba(0,120,160,.5); }
.ow-flow__n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 16px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 18px/1 "Inter", sans-serif; box-shadow: 0 0 0 6px #fff; }
.ow-flow__step--main .ow-flow__n { box-shadow: 0 0 0 6px #ecf5fb; }
.ow-flow__vis { position: relative; height: 104px; display: grid; place-items: center; }
.ow-flow__phone { --w: 52px; --p: 3px; }
.ow-flow__card { position: absolute; right: 4px; bottom: 6px; width: 70px; height: 52px; filter: drop-shadow(0 10px 14px rgba(0,40,90,.25)); }
.ow-flow__vis--re img { width: 112px; height: auto; padding: 18px 10px; border-radius: 22px; background: #fff; box-shadow: var(--sh-s); }
.ow-slip { width: 124px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--sh-s); font-size: 10px; }
.ow-slip p { margin: 0 0 6px; color: var(--ink2); font-weight: 700; }
.ow-slip dl { margin: 0; display: grid; gap: 3px; } .ow-slip dl div { display: flex; justify-content: space-between; gap: 6px; }
.ow-slip dt { color: var(--ink2); } .ow-slip dd { margin: 0; font-weight: 800; color: var(--ink); }
.ow-slip dl div:first-child dd { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-flow__txt small { display: block; font-size: 13px; font-weight: 700; color: var(--blue); }
.ow-flow__txt b { display: block; margin-top: 2px; font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.ow-flow__when { display: block; margin-top: 4px; font-size: 13px; color: var(--ink2); }
.ow-scope { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; margin-top: clamp(72px, 8vw, 110px); }
.ow-scope__col { padding: 36px; border-radius: 32px; background: var(--soft); }
.ow-scope__col h3 { margin: 0 0 22px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ow-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ow-chips li { padding: 18px 10px 16px; border-radius: 22px; background: #fff; box-shadow: var(--sh-s); text-align: center; font-size: 14px; font-weight: 800; color: var(--ink); }
.ow-chips svg { width: 72px; height: 54px; margin: 0 auto 8px; }
.ow-props { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ow-props li { padding: 12px 12px 16px; border-radius: 22px; background: #fff; box-shadow: var(--sh-s); text-align: center; }
.ow-props img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: 8px; }
.ow-props b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.ow-props span:not(.ow-ph) { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.ow-both { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 20px; align-items: center; margin-top: 72px; }
.ow-both__item span { display: inline-block; margin-bottom: 10px; padding: 4px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.ow-both__item p { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.6; letter-spacing: -.01em; color: var(--ink); }
.ow-both__item:last-child { text-align: right; }
.ow-both__img { width: 100%; }
.ow-bridge { margin: 80px 0 0; text-align: center; font: 700 clamp(24px, 2.8vw, 36px)/1.4 "Noto Sans JP", sans-serif; letter-spacing: -.02em; color: var(--ink); }
.ow-bridge::after { content: ''; display: block; width: 3px; height: 56px; margin: 22px auto 0; border-radius: 3px; background: var(--grad); }

/* 2 組①：お悩み → 解決 */
.ow-pair { padding: 24px 0 clamp(96px, 11vw, 150px); }
.ow-worry { display: grid; grid-template-columns: 1fr 1.2fr 200px; gap: 28px; align-items: center; padding: 28px 36px; border-radius: 32px; background: #f2f4f6; }
.ow-worry__tag { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; color: #7a8692; }
.ow-worry__head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: #3a4652; }
.ow-worry__voices { display: grid; gap: 12px; }
.ow-voice { display: flex; align-items: center; gap: 12px; }
.ow-face { width: 54px; height: 54px; flex: none; border-radius: 50%; background-color: #fff; background-size: 240% auto; background-repeat: no-repeat; box-shadow: var(--sh-s); }
.ow-voice p { position: relative; margin: 0; padding: 10px 16px; border-radius: 16px; background: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; color: #3a4652; }
.ow-voice small { display: block; font-size: 11px; font-weight: 600; color: #8a95a0; }
.ow-worry__img { width: 100%; filter: grayscale(.35); opacity: .95; }
.ow-solve { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 56px; }
.ow-solve::before { content: ''; position: absolute; left: 50%; top: -44px; width: 0; height: 0; transform: translateX(-50%); border-style: solid; border-width: 18px 22px 0; border-color: #23c6d0 transparent transparent; }
.ow-solve__n { margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; font-size: 16px; font-weight: 800; color: var(--navy); }
.ow-solve__n span { font: 800 clamp(56px, 6vw, 88px)/.9 "Inter", sans-serif; letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-qa { margin-top: 22px; padding: 18px 22px; border-radius: 22px; background: var(--soft); }
.ow-qa__q { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--navy); }
.ow-qa__q::before { content: 'Q'; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--navy); color: #fff; font: 800 12px/1 "Inter", sans-serif; vertical-align: 2px; }
.ow-qa__a { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink); }
.ow-stats { padding: 32px; border-radius: 36px; background: var(--soft); box-shadow: var(--sh); display: grid; gap: 16px; }
.ow-stat { padding: 24px 28px; border-radius: 26px; background: #fff; box-shadow: var(--sh-s); }
.ow-stat__k { margin: 0; font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ow-stat__v { margin: 6px 0 12px; font: 700 clamp(52px, 5.6vw, 76px)/1 "Noto Sans JP", sans-serif; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-stat--low .ow-stat__v { background: none; -webkit-text-fill-color: #8995a2; color: #8995a2; }
.ow-bar { height: 10px; border-radius: 99px; background: #edf2f6; overflow: hidden; }
.ow-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.ow-stat--low .ow-bar i { background: #b9c4ce; }
.ow-stat__n { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }
.ow-src { margin: 0; font-size: 11px; line-height: 1.6; color: #7d8894; }
.ow-more { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 40px; align-items: center; margin-top: 80px; padding: 36px 40px; border-radius: 32px; background: #fff; box-shadow: var(--sh); border: 1px solid #edf2f6; }
.ow-more h3 { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.ow-more p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink2); }
.ow-more__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ow-more__list li { position: relative; padding: 20px 14px 18px; border-radius: 24px; background: var(--soft); text-align: center; }
.ow-more__list svg { width: 90px; height: 68px; margin: 0 auto 8px; }
.ow-more__list small { display: block; font-size: 12px; color: var(--ink2); }
.ow-more__list b { display: block; font-size: 20px; font-weight: 700; color: var(--ink); }
.ow-more__list em { display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; }

.ow-sample-note { margin: 0 auto 80px; width: min(760px, 100% - 40px); padding: 16px 20px; border-radius: 16px; background: #fff7e6; color: #7a5a00; font-size: 14px; text-align: center; }

/* スマホ */
@media (max-width: 900px) {
  .ow-hero { padding-top: 28px; }
  .ow-hero__in, .ow-about__in, .ow-scope, .ow-solve, .ow-more { grid-template-columns: 1fr; gap: 28px; }
  .ow-stage__card { aspect-ratio: 1 / 1.1; }
  .ow-float--paid { max-width: 62%; padding: 10px 12px; } .ow-float--paid b { font-size: 12px; }
  .ow-float--bank b { font-size: 24px; } .ow-float--zero b { font-size: 32px; }
  .ow-zero { grid-template-columns: 1fr 1fr; row-gap: 22px; margin-top: 44px; }
  .ow-zero li:nth-child(3) { border-left: 0; }
  .ow-flow__step { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; padding: 16px; gap: 10px 12px; }
  .ow-flow::before { left: 35px; }
  .ow-flow__n { margin-left: 8px; }
  .ow-flow__vis { grid-column: 2; grid-row: 1; justify-self: start; height: 84px; }
  .ow-flow__txt { grid-column: 2; }
  .ow-flow__txt b { font-size: 17px; }
  .ow-scope__col { padding: 22px 18px; border-radius: 26px; }
  .ow-chips { gap: 8px; } .ow-chips li { font-size: 12px; padding: 12px 6px; } .ow-chips svg { width: 56px; height: 42px; }
  .ow-props { gap: 8px; }
  .ow-both { grid-template-columns: 1fr; gap: 16px; text-align: center; } .ow-both__item:last-child { text-align: center; }
  .ow-worry { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px; border-radius: 26px; }
  .ow-worry__img { width: 60%; margin: 0 auto; }
  .ow-solve { margin-top: 48px; gap: 32px; }
  .ow-stats { padding: 18px; border-radius: 28px; } .ow-stat { padding: 18px 20px; }
  .ow-more { padding: 24px 18px; margin-top: 56px; } .ow-more__list { gap: 8px; } .ow-more__list svg { width: 64px; height: 48px; } .ow-more__list b { font-size: 16px; }
}
.ow-scope { align-items: start; }
@media (max-width: 900px) {
  .ow-float--zero { display: none; }
  .ow-float--bank { right: 4%; top: auto; bottom: 22%; padding: 10px 14px; }
  .ow-float--paid { top: 8%; }
  .ow-stage__phone { top: 6%; --w: 46%; }
  .ow-more__list em { white-space: nowrap; padding: 3px 8px; font-size: 10px; }
}
@media (max-width: 900px) { .ow-float--bank { top: 40%; bottom: auto; } .ow-play { bottom: 4%; } }

/* 最初の画面の動画（決定表 #13〜#15：押して流す・90秒・仮の動画は置かず、動画のように見せる）。2026-10-29 栄成さん「ファーストビューに動画がないんですが？」 */
.ow-video { position: relative; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; background: linear-gradient(150deg, #e7f3fc 0%, #d6ebfa 50%, #d9f6ec 100%); box-shadow: var(--sh); cursor: pointer; }
.ow-video__scene { position: absolute; inset: 0; }
.ow-video__phone { position: absolute; left: 14%; top: 10%; --w: 28%; width: var(--w); --p: 6px; }
.ow-video .ow-float--bank { left: auto; right: 10%; top: 26%; bottom: auto; }
.ow-video__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,30,70,.15) 0%, rgba(0,30,70,.55) 100%); }
.ow-video__title { position: absolute; left: 6%; bottom: 20%; margin: 0; color: #fff; font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; line-height: 1.3; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.ow-video__title b { font: 700 clamp(24px, 2.8vw, 38px)/1.1 "Inter", "Noto Sans JP", sans-serif; letter-spacing: -.02em; }
.ow-video__play { position: absolute; left: 50%; top: 46%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 16px 40px rgba(0,0,0,.35); cursor: pointer; }
.ow-video__play::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); }
.ow-video__play::after { content: ''; position: absolute; left: 37px; top: 28px; border-style: solid; border-width: 18px 0 18px 28px; border-color: transparent transparent transparent var(--navy); }
.ow-video__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: linear-gradient(180deg, transparent, rgba(0,20,50,.55)); }
.ow-video__mini { position: relative; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.ow-video__track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); overflow: hidden; }
.ow-video__track i { display: block; width: 0; height: 100%; background: #fff; }
.ow-video__time { color: #fff; font: 600 13px/1 "Inter", sans-serif; }
.ow-video__note { position: absolute; right: 16px; top: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--ink2); font-size: 11px; font-weight: 700; }
@media (max-width: 900px) { .ow-video__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; } .ow-video__play::after { left: 29px; top: 22px; border-width: 14px 0 14px 22px; } .ow-video .ow-float--bank { right: 6%; top: 18%; padding: 10px 12px; } .ow-video .ow-float--bank b { font-size: 20px; } }
/* 10/29 スマホでは入金の札が再生のしるしに重なるため、動画の中では出さない */
@media (max-width: 600px) { .ow-video .ow-float--bank { display: none; } .ow-video__phone { left: 50%; transform: translateX(-50%); top: 8%; --w: 30%; } .ow-video__title { bottom: 22%; } }

/* 10/29 区画の始まり（小見出し・見出し・1行）を中央にそろえ、小見出しを大きくする（栄成さん「小見出しが小さすぎでは？なんの区画かわからない」「中央揃えにしたら？」）
   ヒーローは左寄せのまま（TOP のヒーローが中央揃えのため。栄成さん「TOPとの差がわかりづらいので」） */
.ow-head { max-width: 900px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.ow-head .ow-lead { max-width: 34em; margin-left: auto; margin-right: auto; }
.ow-head .ow-h2 { margin-bottom: 18px; }
.ow-kicker { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; letter-spacing: .06em; background: none; -webkit-text-fill-color: currentColor; color: var(--blue); }
.ow-kicker::before, .ow-kicker::after { content: ''; width: 32px; height: 3px; border-radius: 3px; background: var(--grad); }
.ow-head--worry .ow-kicker { color: #6f7b87; } .ow-head--worry .ow-kicker::before, .ow-head--worry .ow-kicker::after { background: #b9c3cc; }
.ow-head--worry .ow-h2 { color: #3a4652; margin: 0; }
.ow-head--solve { position: relative; margin-top: 64px; }
.ow-head--solve::before { content: ''; display: block; width: 0; height: 0; margin: 0 auto 36px; border-style: solid; border-width: 18px 22px 0; border-color: #23c6d0 transparent transparent; }
.ow-head--sub { margin-bottom: 28px; } .ow-head--sub h3 { margin: 0 0 8px; }

/* RentEase とは：流れを左→右に。右（いつもの口座）を一番大きく（構成 1） */
.ow-flow { grid-template-columns: 1fr 1fr 1.25fr; gap: 44px; align-items: stretch; }
.ow-flow::before { display: none; }
.ow-flow__step { grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 14px; padding: 28px 22px 26px; text-align: center; }
.ow-flow__step + .ow-flow__step::before { content: ''; position: absolute; left: -34px; top: 50%; width: 0; height: 0; margin-top: -11px; border-style: solid; border-width: 11px 0 11px 16px; border-color: transparent transparent transparent #23c6d0; }
.ow-flow__n { margin: 0; box-shadow: none; }
.ow-flow__vis { height: 132px; }
.ow-flow__phone { --w: 64px; --p: 3px; }
.ow-flow__card { right: -6px; width: 84px; height: 62px; }
.ow-flow__step--main .ow-flow__vis { height: 132px; } .ow-flow__step--main .ow-slip { width: 168px; font-size: 12px; padding: 14px 16px; }
.ow-flow__step--main .ow-flow__txt b { font-size: 22px; }
.ow-about .ow-no { display: table; margin: 36px auto 0; }
.ow-head--worry + .ow-worry { grid-template-columns: 1.3fr 220px; justify-content: center; max-width: 820px; margin: 0 auto; }

/* 組①：数字2つを横に並べ、その下に問いと答え・仲介会社様の一言 */
.ow-solve { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }
.ow-solve::before { display: none; }
.ow-stats { grid-template-columns: 1fr 1fr; }
.ow-solve__copy { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.ow-solve__copy .ow-qa { margin: 0; }
.ow-solve__copy .ow-lead { margin: 0; max-width: none; font-weight: 700; color: var(--ink); }
.ow-solve .ow-src { text-align: center; }
.ow-more { grid-template-columns: 1fr; gap: 0; }
.ow-more__list { max-width: 820px; width: 100%; margin: 0 auto; }

@media (max-width: 900px) {
  .ow-kicker::before, .ow-kicker::after { width: 20px; }
  .ow-flow { grid-template-columns: 1fr; gap: 40px; }
  .ow-flow__step + .ow-flow__step::before { left: 50%; top: -30px; margin: 0 0 0 -11px; border-width: 16px 11px 0; border-color: #23c6d0 transparent transparent; }
  .ow-flow__step { grid-template-columns: 1fr; grid-template-rows: none; padding: 22px 18px; }
  .ow-flow__vis, .ow-flow__txt { grid-column: auto; grid-row: auto; justify-self: center; }
  .ow-head--worry + .ow-worry { grid-template-columns: 1fr; }
  .ow-stats { grid-template-columns: 1fr; }
  .ow-solve__copy { grid-template-columns: 1fr; gap: 18px; }
}

/* 10/29 払えるもの・物件：絵ごとの枠を外し、2つを1枚の地にまとめ、絵の大きさ・幅・高さをそろえる
   （栄成さん「こういうズレが気になります。またイラスト一つ一つに枠をつける理由は？」＝左右の板の高さ・札の大きさ・空いた6つ目の枠がずれていた） */
.ow-scope { display: block; padding: clamp(32px, 4vw, 52px) clamp(20px, 4vw, 56px); border-radius: 32px; background: var(--soft); }
.ow-scope__col { padding: 0; border-radius: 0; background: none; text-align: center; }
.ow-scope__col + .ow-scope__col { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(0,60,120,.10); }
.ow-scope__col h3 { margin: 0 0 26px; font-size: clamp(20px, 2vw, 24px); }
.ow-chips, .ow-props { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 20px; }
.ow-chips li, .ow-props li { width: 176px; padding: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; }
.ow-chips svg, .ow-props img, .ow-ph--chip, .ow-ph--prop { width: 160px; height: 120px; aspect-ratio: auto; margin: 0 auto 12px; object-fit: contain; }
.ow-ph--chip, .ow-ph--prop { font-size: 11px; }
.ow-chips li, .ow-props b { font-size: 16px; font-weight: 700; color: var(--ink); }
.ow-props span:not(.ow-ph) { font-size: 12px; }
@media (max-width: 900px) {
  .ow-chips, .ow-props { gap: 22px 8px; }
  .ow-chips li, .ow-props li { width: calc(50% - 4px); }
  .ow-chips svg, .ow-props img, .ow-ph--chip, .ow-ph--prop { width: 120px; height: 90px; }
  .ow-chips li, .ow-props b { font-size: 14px; }
}
.ow-props img { mix-blend-mode: multiply; } /* 絵の白い地が四角い枠に見えないように */

/* 10/29 作り方1〜5で作り直し（決定表 #69〜#72）
   払えるもの：平らなしるし（自作・#65）＋すぐ下に「上限なし」を添える（#70）／物件：住まいと事業用の2つだけを大きく（#69） */
.ow-chips svg { width: 132px; height: 99px; }
.ow-limit { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; margin: 30px auto 0; padding: 10px 28px 10px 14px; border-radius: 999px; background: #fff; box-shadow: var(--sh-s); }
.ow-limit svg { width: 64px; height: 48px; flex: none; }
.ow-limit b { font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; color: var(--ink); }
.ow-props { gap: 28px 56px; }
.ow-props li { width: auto; }
.ow-props img { width: auto; height: 170px; margin: 0 auto 14px; }
.ow-props b { font-size: 20px; }
.ow-props span:not(.ow-ph) { font-size: 14px; }

/* 両方の良いこと（#71）：見出しで言い切り、左右同じ大きさの絵 */
.ow-both, .ow-both__img { display: none; }
.ow-both2 { margin-top: clamp(72px, 8vw, 110px); text-align: center; }
.ow-both2__h { margin: 0 0 36px; font: 700 clamp(24px, 2.8vw, 36px)/1.45 "Noto Sans JP", sans-serif; letter-spacing: -.02em; color: var(--ink); }
.ow-both2__row { display: grid; grid-template-columns: 1fr 1fr; max-width: 980px; margin: 0 auto; }
.ow-both2__item { padding: 0 32px; }
.ow-both2__item + .ow-both2__item { border-left: 1px solid #e3e9ef; }
.ow-both2__vis { width: 100%; max-width: 320px; height: auto; margin: 0 auto 18px; }
.ow-both2__who { display: inline-block; margin-bottom: 12px; padding: 5px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; }
.ow-both2__item p { margin: 0 auto; max-width: 18em; font-size: clamp(18px, 1.8vw, 21px); font-weight: 700; line-height: 1.6; color: var(--ink); }

/* 組①の数字：円グラフと4人の絵（構成どおり） */
.ow-stat__row { display: flex; align-items: center; gap: 18px; margin: 12px 0 6px; }
.ow-stat__row .ow-stat__v { margin: 0; }
.ow-donut { width: 84px; height: 84px; flex: none; }
.ow-people { display: flex; gap: 2px; flex: none; }
.ow-people svg { width: 30px; height: 40px; }
.ow-qa__ic { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 18px; }
.ow-qa__ic li { font-size: 12px; font-weight: 800; color: var(--navy); text-align: center; }
.ow-qa__ic svg { width: 72px; height: 54px; margin: 0 auto 2px; }
.ow-more__list svg { width: 100px; height: 75px; }

@media (max-width: 900px) {
  .ow-chips svg { width: 110px; height: 82px; }
  .ow-limit { padding: 8px 18px 8px 10px; gap: 8px; } .ow-limit svg { width: 48px; height: 36px; }
  .ow-props { gap: 28px; } .ow-props li { width: 100%; } .ow-props img { height: 130px; }
  .ow-both2__row { grid-template-columns: 1fr; gap: 36px; }
  .ow-both2__item { padding: 0; } .ow-both2__item + .ow-both2__item { border-left: 0; border-top: 1px solid #e3e9ef; padding-top: 36px; }
  .ow-donut { width: 64px; height: 64px; } .ow-people svg { width: 24px; height: 32px; }
  .ow-stat__row { gap: 12px; }
}
.ow-props img { -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.ow-worry__img { mix-blend-mode: multiply; }
/* 10/29 画像だけを見た作業役の確かめで迷った所を直す */
.ow-video .ow-float--bank { display: none; } /* 再生のしるしと重なって目が迷う */
.ow-flow__vis--re svg { width: 130px; height: 98px; }
.ow-about .ow-no { padding: 0; background: none; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; color: var(--ink); }
.ow-about .ow-no::before { content: ''; display: block; width: 48px; height: 4px; margin: 0 auto 16px; border-radius: 4px; background: var(--grad); }
.ow-limit svg { width: 80px; height: 60px; }
.ow-voice p { font-size: 17px; }
.ow-stat__k { font-size: clamp(19px, 1.9vw, 23px); }
.ow-donut circle:first-child { stroke: #d3dbe3; }
.ow-solve__copy { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; gap: 18px; text-align: center; }
.ow-solve__copy .ow-qa { text-align: left; }
.ow-about { padding-bottom: 56px; }
.ow-bridge { margin-top: 64px; } .ow-bridge::after { height: 36px; margin-top: 16px; }
.ow-pair { padding-top: 8px; }
.ow-head--worry { margin-top: 24px; }
/* 10/29 自作の絵を外した空き枠（決定表 #73） */
.ow-ph--limit { width: 80px; height: 56px; font-size: 9px; flex: none; }
.ow-ph--both { width: 100%; max-width: 320px; aspect-ratio: 16 / 10; margin: 0 auto 18px; }
.ow-ph--people { width: 120px; height: 52px; font-size: 9px; flex: none; }
.ow-ph--qa { width: 92px; height: 64px; font-size: 9px; }
.ow-flow__vis--re img { width: 112px; height: auto; }
/* 10/29 HP 制作が描いた絵（OwnerObj・決定表 #75）の大きさ */
.ow-people { width: 150px; height: 69px; flex: none; }
.ow-limit svg { width: 84px; height: 63px; }
.ow-qa__ic svg { width: 84px; height: 63px; }
@media (max-width: 900px) { .ow-people { width: 110px; height: 50px; } }

/* 10/29 文字の大きさを4段にそろえる（栄成さん「何を伝えるべきか、どの文字を見てもらいかを意識していますか？」）
   1 区画の見出し .ow-h2（30〜52px）／2 まとまりの見出し（22〜30px）／3 絵の名前・札（16〜19px・太字）／4 補足（13〜14px・灰色・補足する相手のすぐ下）
   色：板の地を白に近づけ、絵を地になじませる合成（暗くなる）をやめる（栄成さん「なんか色味が暗く感じます」） */
.ow-page { --soft: linear-gradient(150deg, #f8fbfe 0%, #f3f9fd 55%, #f2fbf8 100%); --l2: 900 clamp(22px, 2.4vw, 30px)/1.45 "Noto Sans JP", sans-serif; }
.ow-scope { background: #fff; box-shadow: 0 30px 70px -50px rgba(0,40,90,.35); border: 1px solid #eef2f6; }
.ow-props img { mix-blend-mode: normal; }
.ow-scope__col h3, .ow-both2__h, .ow-more h3 { font: var(--l2); letter-spacing: -.015em; }
.ow-both2__h { margin-bottom: 32px; }
.ow-chips li { font-size: 17px; }
.ow-props b { font-size: 19px; }
.ow-props span:not(.ow-ph) { font-size: 13px; color: #6b7682; font-weight: 400; }
.ow-both2__item p { font-size: clamp(17px, 1.6vw, 19px); }
/* 上限なし＝払えるものの補足（4段目）。並びのすぐ下に小さく */
.ow-limit { margin: 18px auto 0; padding: 0; background: none; box-shadow: none; gap: 8px; }
.ow-limit svg { width: 44px; height: 33px; }
.ow-limit b { font-size: 14px; font-weight: 700; color: #4f5b67; }
/* お金の流れの図（D2） */
.ow-d2 { margin: 0; }
.ow-d2__pc { width: 100%; max-width: 1100px; height: auto; margin: 0 auto; }
.ow-d2__sp { display: none; }
.ow-d2__note { max-width: 1100px; margin: -6px auto 0; padding-left: 60%; box-sizing: border-box; text-align: center; }
.ow-about .ow-d2__note .ow-no { display: block; margin: 0; padding: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.ow-about .ow-d2__note .ow-no::before { content: none; }
.ow-d2__small { margin: 6px 0 0; font-size: 13px; color: #6b7682; }
@media (max-width: 900px) {
  .ow-d2__pc { display: none; }
  .ow-d2__sp { display: grid; justify-items: center; gap: 4px; }
  .ow-d2__sp img { height: 210px; width: auto; }
  .ow-d2__sp img:last-child { height: 230px; }
  .ow-d2__arrow { margin: 0; padding: 4px 0 26px; position: relative; font-size: 14px; font-weight: 800; color: var(--navy); }
  .ow-d2__arrow::after { content: ''; position: absolute; left: 50%; bottom: 4px; margin-left: -10px; border-style: solid; border-width: 14px 10px 0; border-color: #12b8d0 transparent transparent; }
  .ow-d2__note { padding-left: 0; margin-top: 12px; }
  .ow-limit b { font-size: 13px; }
}
/* 図と建物の絵の地（ごく薄い灰色）を白い地になじませる。地が白なので暗くならない */
.ow-d2__pc, .ow-d2__sp img, .ow-props img { mix-blend-mode: multiply; }
@media (max-width: 900px) {
  .ow-page .ow-d2__pc { display: none; }
  .ow-d2__sp img:last-of-type { height: 220px; }
  .ow-d2__last { margin: 0; font: 700 22px/1.4 "Noto Sans JP", sans-serif; color: var(--ink); }
}

/* 10/29 お金の流れ（決定表 #85）：絵は3つ・言葉はページの文字。③を一番大きく、③の枠の中に補足 */
.ow-flow2 { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; grid-template-columns: 1fr 120px 1fr 150px 1.45fr; align-items: center; }
.ow-flow2__step { display: grid; justify-items: center; text-align: center; gap: 10px; }
.ow-flow2__who { display: inline-block; padding: 5px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; }
.ow-flow2__vis { width: 100%; max-width: 200px; height: 154px; }
.ow-flow2__tile { display: grid; place-items: center; width: 140px; height: 140px; margin: 7px 0; border-radius: 34px; background: #fff; box-shadow: 0 24px 40px -20px rgba(0,40,90,.35); }
.ow-flow2__tile img { width: 104px; height: auto; }
.ow-flow2__do { margin: 0; display: flex; align-items: flex-start; justify-content: center; gap: 8px; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.ow-flow2__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 13px/1 "Inter", sans-serif; }
.ow-flow2__arrow { position: relative; display: grid; justify-items: center; padding-bottom: 46px; }
.ow-flow2__arrow span { font-size: 13px; font-weight: 800; line-height: 1.5; color: var(--navy); text-align: center; }
.ow-flow2__arrow::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 26px; height: 4px; border-radius: 4px; background: var(--grad); }
.ow-flow2__arrow::before { content: ''; position: absolute; right: 8%; bottom: 20px; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #23e4ab; }
.ow-flow2__step--main { padding: 26px 22px 24px; border-radius: 28px; background: var(--soft); border: 1px solid #e3eef6; }
.ow-flow2__step--main .ow-flow2__vis { max-width: 280px; height: 180px; }
.ow-flow2__step--main .ow-flow2__do { font-size: 21px; }
.ow-flow2__note { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid #dfe9f1; font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--ink); }
.ow-flow2__small { margin: 0; font-size: 13px; color: #6b7682; }

/* 区画ごとに地の色を交互に（決定表 #86）：最初の画面＝薄い青／RentEase とは＝白／お悩み＝薄い灰色／解決＝白 */
.ow-hero { padding-bottom: 72px; background: linear-gradient(180deg, #eef6fd 0%, #f4f9fe 100%); }
.ow-hero__bg { background: none; }
.ow-about { padding-top: clamp(80px, 9vw, 120px); padding-bottom: 72px; background: #fff; }
.ow-pair { padding: 0; }
.ow-band { padding: clamp(64px, 7vw, 96px) 0; }
.ow-band--worry { background: #f3f5f8; }
.ow-band--worry .ow-head--worry { margin-top: 0; }
.ow-band--worry .ow-worry { background: #fff; }
.ow-band--solve { background: #fff; padding-bottom: clamp(80px, 9vw, 120px); }
.ow-band--solve .ow-head--solve { margin-top: 0; }
.ow-band--solve .ow-head--solve::before { margin-top: calc(-1 * clamp(64px, 7vw, 96px)); margin-bottom: 40px; border-color: #f3f5f8 transparent transparent; border-width: 26px 34px 0; }
.ow-sample-note { margin-top: 0; }

@media (max-width: 900px) {
  .ow-flow2 { grid-template-columns: 1fr; gap: 6px; }
  .ow-flow2__arrow { padding: 8px 0 34px; }
  .ow-flow2__arrow::after { left: 50%; right: auto; top: auto; bottom: 8px; width: 4px; height: 22px; margin-left: -2px; }
  .ow-flow2__arrow::before { right: auto; left: 50%; bottom: 0; margin-left: -8px; border-width: 12px 8px 0; border-color: #23e4ab transparent transparent; }
  .ow-flow2__vis { height: 130px; }
  .ow-flow2__tile { width: 110px; height: 110px; border-radius: 28px; } .ow-flow2__tile img { width: 84px; }
  .ow-flow2__step--main { padding: 22px 16px; }
  .ow-flow2__step--main .ow-flow2__vis { height: 160px; }
  .ow-flow2__step--main .ow-flow2__do { font-size: 19px; }
  .ow-flow2__note { font-size: 14px; }
  .ow-hero { padding-bottom: 48px; }
}

/* 10/29 部品ごとの影を消したので（GuideObj flat）、白い面に薄い縁取りを付けて形を見せる（栄成さん「薄い縁取りをお願いします」）。文字・半透明の飾りには付けない */
body.ow-page symbol :is(rect, path, circle, ellipse):is([fill="#fff"], [fill="#ffffff"], [fill="url(#ow-wall)"]):not([opacity]) { stroke: #d5dee8; stroke-width: 1.6px; }
/* 10/29 住まい・事業用をそれぞれ1枚の絵に（切り分けをやめた） */
.ow-props__vis { display: block; width: 240px; height: 154px; margin: 0 auto 12px; }
@media (max-width: 900px) { .ow-props__vis { width: 200px; height: 128px; } }

/* 10/29 Codex の絵に差し替え（決定表 #97・#98） */
.ow-chips img { display: block; width: 150px; height: auto; margin: 0 auto 8px; }
.ow-face { overflow: hidden; background: #fff; }
.ow-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ow-people4 { display: flex; gap: 0; flex: none; }
.ow-people4 img { width: 46px; height: 46px; object-fit: cover; object-position: 50% 15%; }
.ow-people4 img.is-off { filter: grayscale(1); opacity: .45; }
/* 入居者様がカード払いを選ぶ理由（決定表 #90） */
.ow-why { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; max-width: 960px; margin: 40px auto 0; padding: 32px 36px; border-radius: 28px; background: #fff; border: 1px solid #e6edf3; }
.ow-why__img { width: 220px; height: auto; }
.ow-why__h { margin: 0 0 16px; font: var(--l2); letter-spacing: -.015em; color: var(--ink); }
.ow-why__k { margin: 0 0 10px; font-size: 13px; color: #6b7682; }
.ow-why__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ow-why__bars li { display: grid; grid-template-columns: 190px 1fr 64px; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: #4f5b67; }
.ow-why__bars i { display: block; height: 14px; border-radius: 99px; background: linear-gradient(90deg, #dfe6ee var(--w), transparent var(--w)), #f3f6f9; }
.ow-why__bars b { font: 800 16px/1 "Inter", sans-serif; color: #6b7682; text-align: right; }
.ow-why__bars li.is-top { color: var(--ink); font-size: 17px; }
.ow-why__bars li.is-top i { height: 20px; background: linear-gradient(90deg, #12b8d0 0, #23e4ab var(--w), transparent var(--w)), #f3f6f9; }
.ow-why__bars li.is-top b { font-size: 24px; color: #0a9fb8; }
.ow-why__note { margin: 16px 0 0; font-size: 14px; line-height: 1.8; color: #4f5b67; }
@media (max-width: 900px) {
  .ow-chips img { width: 120px; }
  .ow-people4 img { width: 36px; height: 36px; }
  .ow-why { grid-template-columns: 1fr; justify-items: center; padding: 24px 18px; gap: 16px; }
  .ow-why__img { width: 150px; }
  .ow-why__bars li { grid-template-columns: 1fr 52px; } .ow-why__bars li span { grid-column: 1 / -1; } .ow-why__bars li.is-top b { font-size: 20px; }
}
.ow-props__vis { width: 300px; height: auto; }
img.ow-flow2__vis { width: 100%; max-width: 220px; height: auto; object-fit: contain; }
.ow-flow2__step--main img.ow-flow2__vis { max-width: 300px; }
/* 上限なし：Codex の棒の絵に、点線の「上限」を図として重ねる（決定表 #98） */
.ow-limit__vis { position: relative; display: block; width: 64px; flex: none; }
.ow-limit__vis img { display: block; width: 100%; height: auto; }
.ow-limit__vis i { position: absolute; left: 2px; right: 2px; top: 45%; border-top: 2px dashed #e05a5a; }
@media (max-width: 900px) { .ow-props__vis { width: 240px; } }
/* Codex の絵の地（ごく薄い灰色）が四角く見えないように */
.ow-chips img, .ow-props__vis, img.ow-flow2__vis, .ow-limit__vis img, .ow-why__img { mix-blend-mode: multiply; }
.ow-stat__v { white-space: nowrap; }
.ow-people4 img { width: 38px; height: 38px; }
.ow-why__bars li { grid-template-columns: 210px 1fr 64px; }
@media (max-width: 900px) { .ow-people4 img { width: 30px; height: 30px; } }
/* 10/29 入居者様の絵が大きすぎる（栄成さん「入居者のイラストがデカすぎます。ちゃんと表示をみて調整してください」）
   主役は見出しと棒グラフ。絵は見出しの横に添える大きさ（PC 112px・スマホ 72px）にする */
.ow-why { grid-template-columns: 112px 1fr; gap: 24px; align-items: start; padding: 28px 32px; }
.ow-why__img { width: 112px; margin-top: 4px; }
@media (max-width: 900px) {
  .ow-why { grid-template-columns: 72px 1fr; justify-items: stretch; gap: 12px; padding: 20px 16px; }
  .ow-why__img { width: 72px; margin-top: 0; }
  .ow-why__h { font-size: 18px; margin-bottom: 12px; }
  .ow-why__k, .ow-why__bars, .ow-why__note { grid-column: 1 / -1; }
  .ow-why__body { display: contents; }
}

/* ===== 10/29 残りの区画（構成 3〜9） ===== */
.ow-q { margin: 0 0 12px; font-size: clamp(16px, 1.6vw, 19px); font-weight: 800; color: var(--navy); }
.ow-worry__pair { display: flex; align-items: center; gap: 8px; }
.ow-worry__pair img, .ow-rosterfig img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.ow-tagfig, .ow-estfig, .ow-rosterfig { position: relative; display: block; width: 50%; }
.ow-rosterfig { width: 230px; }
.ow-tagfig b, .ow-estfig b, .ow-rosterfig b { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 8px; background: #fff; box-shadow: 0 6px 14px -8px rgba(0,40,90,.5); font: 800 12px/1.3 "Inter", "Noto Sans JP", sans-serif; color: #e05a5a; }
.ow-tagfig b { bottom: 4%; color: var(--ink); } .ow-tagfig s { color: #9aa8b6; margin: 0 2px; font-weight: 600; }
.ow-estfig b { bottom: 24%; font-size: 15px; }
.ow-rosterfig b { top: 47%; left: auto; right: 6%; transform: none; background: #e05a5a; color: #fff; }
.ow-band--worry .ow-worry:has(.ow-worry__pair) { grid-template-columns: 1.2fr 300px; }

.ow-zero4 { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ow-zero4 li { text-align: center; padding: 18px 10px 20px; border-radius: 24px; background: var(--soft); border: 1px solid #e6eef5; }
.ow-zero4 img { display: block; width: 130px; height: auto; margin: 0 auto 6px; mix-blend-mode: multiply; }
.ow-zero4 span { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.ow-zero4 b { display: block; margin-top: 2px; font: 800 44px/1 "Inter", sans-serif; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-zero4 b small { font-size: .42em; }

.ow-compare { display: grid; grid-template-columns: 1.6fr 60px 1fr; align-items: center; max-width: 960px; margin: 56px auto 0; }
.ow-compare__h { margin: 0 0 14px; text-align: center; font: var(--l2); font-size: clamp(18px, 1.8vw, 22px); color: var(--ink); }
.ow-compare__other { padding: 24px 20px; border-radius: 24px; background: #f3f5f8; }
.ow-compare__other ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ow-compare__other li { text-align: center; }
.ow-compare__other img { display: block; width: 100%; max-width: 130px; height: auto; margin: 0 auto 4px; mix-blend-mode: multiply; }
.ow-compare__other span { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.ow-compare__other em { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 99px; background: #fdecec; color: #c94a4a; font-style: normal; font-size: 12px; font-weight: 700; }
.ow-compare__plus { text-align: center; font: 800 40px/1 "Inter", sans-serif; color: #12b8d0; }
.ow-compare__re { padding: 24px 20px; border-radius: 24px; background: #fff; border: 2px solid #9fe3e0; text-align: center; box-shadow: 0 30px 60px -40px rgba(0,120,160,.5); }
.ow-compare__re img { display: block; width: 140px; height: auto; margin: 6px auto 6px; }
.ow-compare__re b { display: block; font: 800 64px/1 "Inter", sans-serif; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-compare__re b small { font-size: .4em; }
.ow-compare__re em { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: #4f5b67; }

.ow-tip { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 760px; margin: 48px auto 0; padding: 18px 28px; border-radius: 22px; background: var(--soft); }
.ow-tip__img { width: 96px; height: auto; flex: none; }
.ow-tip__k { margin: 0 0 2px; font-size: 13px; font-weight: 800; color: var(--blue); }
.ow-tip__t { margin: 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; line-height: 1.5; color: var(--ink); }

.ow-auto { position: relative; max-width: 760px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #f5f7fa; }
.ow-auto__photo { display: block; width: 100%; height: 360px; object-fit: cover; }
.ow-auto__card { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 14px 24px 14px 16px; border-radius: 20px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(0,40,90,.5); border: 1px solid rgba(255,255,255,.9); white-space: nowrap; }
.ow-auto__card p { margin: 0; } .ow-auto__card small { display: block; font-size: 12px; color: #4f5b67; } .ow-auto__card b { font-size: 20px; font-weight: 700; color: var(--ink); }
.ow-auto__loop { width: 40px; height: 40px; border-radius: 50%; border: 5px solid #23e4ab; border-top-color: transparent; position: relative; }
.ow-auto__loop::after { content: ''; position: absolute; right: -2px; top: -4px; border-style: solid; border-width: 0 7px 9px; border-color: transparent transparent #23e4ab; transform: rotate(60deg); }

.ow-ba { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; max-width: 860px; margin: 56px auto 0; }
.ow-ba__item { margin: 0; text-align: center; }
.ow-ba__item figcaption { margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--ink); }
.ow-ba__item figcaption span { display: block; font-size: 13px; font-weight: 700; color: #6b7682; }
.ow-ba__cal { position: relative; display: inline-block; width: 100%; max-width: 300px; }
.ow-ba__cal img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.ow-ba__item:not(.ow-ba__item--after) .ow-ba__cal img { filter: grayscale(.6); opacity: .8; }
.ow-ba__cal i { position: absolute; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 8px; background: #f0a35a; color: #fff; font: 800 13px/1.4 "Inter", "Noto Sans JP", sans-serif; font-style: normal; white-space: nowrap; }
.ow-ba__cal i.is-late { background: #e05a5a; }
.ow-ba__cal i.is-ok { padding: 6px 14px; font-size: 18px; background: var(--grad); box-shadow: 0 10px 20px -10px rgba(0,120,160,.7); }
.ow-ba__arrow { justify-self: center; width: 0; height: 0; border-style: solid; border-width: 16px 0 16px 24px; border-color: transparent transparent transparent #23c6d0; }

.ow-qa2 { max-width: 860px; margin: 56px auto 0; padding: 26px 30px; border-radius: 24px; background: var(--soft); }
.ow-qa2__q { margin: 0 0 14px; text-align: center; font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; color: var(--navy); }
.ow-qa2__row { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: center; }
.ow-qa2__fig { position: relative; }
.ow-qa2__fig img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.ow-qa2__list { position: absolute; left: 4%; bottom: 6%; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 14px 28px -16px rgba(0,40,90,.5); font-size: 12px; display: grid; gap: 4px; min-width: 190px; }
.ow-qa2__list div { display: flex; justify-content: space-between; gap: 14px; } .ow-qa2__list dt { color: #4f5b67; } .ow-qa2__list dd { margin: 0; font: 800 13px/1.3 "Inter", sans-serif; color: var(--ink); }
.ow-qa2__a { margin: 0; font-size: 16px; line-height: 1.9; color: var(--ink); }

.ow-midcta { padding: 56px 0; text-align: center; background: #eef6fd; }

.ow-same { padding: clamp(80px, 9vw, 120px) 0; background: #fff; }
.ow-same__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 760px; margin: 0 auto; }
.ow-same__row figure { position: relative; margin: 0; padding: 20px; border-radius: 24px; background: var(--soft); text-align: center; }
.ow-same__row img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.ow-same__row i { position: absolute; right: 18px; top: 18px; padding: 6px 12px; border: 3px solid #12b8d0; border-radius: 10px; color: #0a9fb8; font-style: normal; font-weight: 700; font-size: 16px; transform: rotate(-8deg); background: rgba(255,255,255,.85); }
.ow-same__row figcaption { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--ink); }

.ow-start { padding: clamp(80px, 9vw, 120px) 0; background: #0b2a4d; color: #fff; }
.ow-start .ow-h2 { color: #fff; } .ow-start .ow-lead { color: #cfe0ef; } .ow-start .ow-kicker { color: #7fe3d6; }
.ow-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: 18px; }
.ow-step { padding: 26px 30px; border-radius: 24px; background: #fff; color: var(--ink); }
.ow-step__h { margin: 0 0 10px; display: flex; align-items: center; gap: 12px; font: var(--l2); font-size: clamp(19px, 2vw, 24px); }
.ow-step__h span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 16px/1 "Inter", sans-serif; }
.ow-step__t { margin: 0; font-size: 16px; line-height: 1.8; }
.ow-step__two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.ow-step__who { padding: 18px 20px; border-radius: 18px; background: var(--soft); }
.ow-step__who p { margin: 0 0 14px; font-size: 15px; line-height: 1.8; }
.ow-step__k { font-size: 17px !important; font-weight: 700; color: var(--navy); }
.ow-step__fig { position: relative; margin: 0 0 8px; }
.ow-step__fig img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 14px; }
.ow-step__fig--doc img, .ow-step__fig--obj img { object-fit: contain; mix-blend-mode: multiply; }
.ow-step__fig--doc i { position: absolute; right: 18%; top: 40%; padding: 4px 12px; border: 3px solid #e05a5a; border-radius: 50%; color: #e05a5a; font-style: normal; font-weight: 700; transform: rotate(-8deg); background: rgba(255,255,255,.85); }
.ow-step__afterrow { display: grid; grid-template-columns: 70px 40px 180px 1fr; gap: 14px; align-items: center; }
.ow-step__phone { --w: 70px; --p: 3px; }
.ow-step__arrow { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #23c6d0; justify-self: center; }
.ow-step__bank { width: 180px; height: auto; mix-blend-mode: multiply; }
.ow-start__cta { margin-top: 40px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.ow-start__cta .ow-share__note { color: #cfe0ef; margin: 0; }
.ow-btn--light { background: #fff; color: var(--navy); margin-top: 8px; }

.ow-faq { padding: clamp(80px, 9vw, 120px) 0; background: #fff; }
.ow-faq__list { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.ow-faq__item { border-radius: 16px; background: var(--soft); border: 1px solid #e6eef5; }
.ow-faq__item summary { cursor: pointer; list-style: none; padding: 18px 48px 18px 22px; position: relative; font-size: 16px; font-weight: 800; color: var(--ink); }
.ow-faq__item summary::-webkit-details-marker { display: none; }
.ow-faq__item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 700 22px/1 "Inter", sans-serif; color: var(--blue); }
.ow-faq__item[open] summary::after { content: '−'; }
.ow-faq__item p { margin: 0; padding: 0 22px 18px; font-size: 15px; line-height: 1.85; color: #4f5b67; }

.ow-final { padding: clamp(80px, 9vw, 120px) 0; background: linear-gradient(180deg, #eef6fd 0%, #f4f9fe 100%); }
.ow-final__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.ow-final__h { font-size: clamp(36px, 4.6vw, 64px); }
.ow-final .ow-btn { margin-top: 28px; }
.ow-final__img { width: 100%; max-width: 460px; height: auto; mix-blend-mode: multiply; justify-self: center; }

@media (max-width: 900px) {
  .ow-band--worry .ow-worry:has(.ow-worry__pair) { grid-template-columns: 1fr; }
  .ow-worry__pair { justify-content: center; } .ow-tagfig, .ow-estfig { width: 46%; }
  .ow-rosterfig { width: 200px; margin: 0 auto; }
  .ow-zero4 { grid-template-columns: 1fr 1fr; gap: 10px; } .ow-zero4 img { width: 100px; } .ow-zero4 b { font-size: 36px; }
  .ow-compare { grid-template-columns: 1fr; gap: 10px; } .ow-compare__plus { font-size: 32px; }
  .ow-tip { flex-direction: column; text-align: center; padding: 18px; } .ow-tip__img { width: 80px; }
  .ow-auto__photo { height: 240px; } .ow-auto__card { bottom: 16px; padding: 10px 16px 10px 12px; } .ow-auto__card b { font-size: 17px; }
  .ow-ba { grid-template-columns: 1fr; gap: 14px; } .ow-ba__arrow { border-width: 20px 14px 0; border-color: #23c6d0 transparent transparent; }
  .ow-qa2 { padding: 20px 16px; } .ow-qa2__row { grid-template-columns: 1fr; } .ow-qa2__fig { max-width: 320px; margin: 0 auto; }
  .ow-same__row { grid-template-columns: 1fr 1fr; gap: 10px; } .ow-same__row figure { padding: 12px; } .ow-same__row i { right: 8px; top: 8px; font-size: 13px; padding: 3px 8px; } .ow-same__row figcaption { font-size: 14px; }
  .ow-step { padding: 20px 16px; } .ow-step__two { grid-template-columns: 1fr; gap: 12px; }
  .ow-step__afterrow { grid-template-columns: 60px 30px 1fr; } .ow-step__afterrow .ow-step__t { grid-column: 1 / -1; } .ow-step__phone { --w: 60px; } .ow-step__bank { width: 100%; max-width: 180px; }
  .ow-faq__item summary { font-size: 15px; padding: 16px 44px 16px 16px; } .ow-faq__item p { padding: 0 16px 16px; font-size: 14px; }
  .ow-final__in { grid-template-columns: 1fr; text-align: center; } .ow-final__img { max-width: 300px; }
}
.ow-head .ow-lead--wide { max-width: 40em; }
.ow-compare__re img { margin-top: 0; }
.ow-compare__plus { width: 0; height: 0; justify-self: center; border-style: solid; border-width: 14px 0 14px 20px; border-color: transparent transparent transparent #23c6d0; }
.ow-step__fig img { height: 140px; }
.ow-step__fig--obj img { height: 140px; }
.ow-estfig b { bottom: 21%; }
@media (max-width: 900px) { .ow-compare__plus { border-width: 18px 12px 0; border-color: #23c6d0 transparent transparent; } }
@media (max-width: 900px) {
  .ow-auto__card b { font-size: 16px; white-space: nowrap; }
  .ow-same .ow-kicker::before, .ow-same .ow-kicker::after { display: none; }
}

/* 10/30 デザインテーマ（docs/デザインテーマ_TOPから.md・決定表 #102）
   見出しの太さ 700（栄成さん「見出しの太さは700は？」。読み込んでいる Noto Sans JP は 400/500/700/900 だけで、800 は 900 で出ていた）
   文 16px・見出しの下の1行 18px（海外 7 サイトを測った：本文はほぼ 16px、見出しの下の1行は 18〜22px）
   地の色は TOP と同じ 白／#f6f8fa／薄い青。濃い全面の帯はやめる。ボタンは TOP と同じ #0b1b2b */
.ow-page { --navy: #0b1b2b; }
.ow-page h1, .ow-page h2, .ow-page h3 { font-weight: 700; }
.ow-lead { font-size: 18px; line-height: 1.9; }
.ow-step__t, .ow-step__who p, .ow-qa2__a, .ow-faq__item p, .ow-why__note { font-size: 16px; }
.ow-band--worry { background: #f6f8fa; }
.ow-band--solve .ow-head--solve::before { border-color: #f6f8fa transparent transparent; }
.ow-start { background: #f5f8fb; color: var(--ink); }
.ow-start .ow-h2 { color: var(--ink); } .ow-start .ow-lead { color: var(--ink2); } .ow-start .ow-kicker { color: var(--blue); }
.ow-start .ow-step { box-shadow: 0 0 0 1px rgba(11,27,43,.07), 0 24px 48px -36px rgba(0,40,90,.35); }
.ow-start__cta .ow-share__note { color: var(--ink2); }
.ow-btn--light { background: var(--navy); color: #fff; }
.ow-flow2__who, .ow-both2__who { background: var(--navy); }
/* Codex の絵の地がごく薄い灰色（白より少し暗い）で、白い地の上で四角く見えるため、少しだけ明るくして地を白に飛ばす */
.ow-page img[src*="/owner/codex/"]:not([src*="photo-"]) { filter: brightness(1.05) contrast(1.03); }

/* ===== 10/30 栄成さんの指摘（絵と文字の大きさのつり合い・空室の絵・4人に1人・比べる図・管理会社様へ） ===== */
/* お悩みの区画：顔・声の文字・絵の大きさをそろえる（顔 76px・声 18px・絵は区画の右に 280px） */
.ow-worry, .ow-band--worry .ow-worry:has(.ow-worry__pair) { grid-template-columns: 1fr 300px; gap: 32px; max-width: 900px; margin: 0 auto; padding: 32px 40px; align-items: center; }
.ow-worry__voices { gap: 18px; }
.ow-voice { gap: 16px; }
.ow-face { width: 76px; height: 76px; }
.ow-voice p { font-size: 18px; padding: 14px 20px; background: #f6f8fa; }
.ow-voice small { font-size: 12px; margin-bottom: 2px; }
.ow-vacant { position: relative; display: block; width: 300px; }
.ow-vacant img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.ow-vacant i { position: absolute; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 6px; background: #5b6773; color: #fff; font: 700 12px/1.4 "Noto Sans JP", sans-serif; font-style: normal; }
.ow-worry__pair { width: 300px; }
.ow-rosterfig { width: 300px; }
/* 4人に1人：動画と同じ形（頭の丸と体。3人は灰色、1人だけ青＋カード） */
.ow-ppl { position: relative; display: flex; align-items: flex-end; gap: 8px; flex: none; padding-right: 26px; }
.ow-ppl i { position: relative; display: block; width: 26px; height: 52px; }
.ow-ppl i::before { content: ''; position: absolute; left: 6px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #c6d3e0; }
.ow-ppl i::after { content: ''; position: absolute; left: 1px; top: 17px; width: 24px; height: 34px; border-radius: 12px 12px 4px 4px; background: #c6d3e0; }
.ow-ppl i.on::before, .ow-ppl i.on::after { background: #0a95ea; }
.ow-ppl__card { position: absolute; right: 0; bottom: 6px; width: 40px; height: 30px; transform: rotate(-10deg); }
/* ほかの空室対策：札を外し、地を白に（地の色と重なって絵が暗く見えていた） */
.ow-compare__other { background: #fff; border: 1px solid #e3e9ef; }
.ow-compare__other img { max-width: 150px; mix-blend-mode: normal; }
.ow-compare__other span { margin-top: 4px; font-size: 16px; }
/* 管理会社様へ：絵を丸い地に収め、文字と同じ高さのつり合いに */
.ow-tip { max-width: 820px; padding: 24px 36px; gap: 28px; justify-content: flex-start; background: #fff; border: 1px solid #e3e9ef; box-shadow: 0 24px 48px -36px rgba(0,40,90,.35); }
.ow-tip__fig { flex: none; width: 112px; height: 112px; border-radius: 50%; background: #eef6fb; overflow: hidden; display: grid; place-items: end center; }
.ow-tip__fig img { width: 112px; height: 112px; object-fit: cover; object-position: 50% 20%; }
.ow-tip__k { font-size: 14px; margin-bottom: 4px; }
.ow-tip__t { font-size: clamp(19px, 1.9vw, 22px); }
@media (max-width: 900px) {
  .ow-worry, .ow-band--worry .ow-worry:has(.ow-worry__pair) { grid-template-columns: 1fr; padding: 22px 16px; gap: 18px; }
  .ow-face { width: 60px; height: 60px; } .ow-voice p { font-size: 16px; padding: 12px 14px; }
  .ow-vacant, .ow-worry__pair, .ow-rosterfig { width: 240px; margin: 0 auto; }
  .ow-tip { flex-direction: row; text-align: left; padding: 18px 16px; gap: 14px; } .ow-tip__fig, .ow-tip__fig img { width: 80px; height: 80px; } .ow-tip__t { font-size: 17px; }
}
/* 10/30 測ったつり合いの直し：4人の絵が数字（76px）に比べて小さすぎ／写真が大きすぎ／はじめ方の絵の高さがばらばら */
.ow-ppl { gap: 10px; padding-right: 34px; }
.ow-ppl i { width: 34px; height: 70px; }
.ow-ppl i::before { left: 8px; width: 18px; height: 18px; }
.ow-ppl i::after { left: 1px; top: 22px; width: 32px; height: 48px; border-radius: 16px 16px 5px 5px; }
.ow-ppl__card { width: 52px; height: 39px; bottom: 8px; }
.ow-auto { max-width: 620px; } .ow-auto__photo { height: 300px; }
.ow-step__fig img, .ow-step__fig--obj img { height: 130px; }
.ow-step__fig:not(.ow-step__fig--doc):not(.ow-step__fig--obj) img { border-radius: 14px; }
@media (max-width: 900px) { .ow-ppl i { width: 26px; height: 54px; } .ow-ppl i::before { left: 6px; width: 14px; height: 14px; } .ow-ppl i::after { top: 17px; width: 24px; height: 36px; } .ow-ppl__card { width: 40px; height: 30px; } .ow-auto__photo { height: 220px; } }
.ow-compare__h--re { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ow-compare__h--re span { font: 800 28px/1 "Inter", sans-serif; color: #12b8d0; }
.ow-compare__h--re img { width: 150px !important; margin: 0 !important; }
.ow-rosterfig b { right: 12%; }
.ow-worry__pair { width: 320px; gap: 12px; } .ow-tagfig, .ow-estfig { width: 50%; }
/* はじめ方：4つの絵の大きさをそろえる（写真だけ横いっぱいで大きく見えていた） */
.ow-step__fig { display: flex; justify-content: center; }
.ow-step__fig img { width: 220px; max-width: 100%; height: 130px; }
/* 10/30 スマホで右が切れていた（後から足した PC の指定がスマホにも効いていた） */
@media (max-width: 900px) {
  .ow-why__bars li { grid-template-columns: 1fr 56px; }
  .ow-why__bars li span { grid-column: 1 / -1; }
  .ow-stat__row { flex-wrap: wrap; gap: 10px; }
  .ow-stat__v { font-size: 44px; }
  .ow-stats, .ow-stat, .ow-why { min-width: 0; max-width: 100%; box-sizing: border-box; }
}

/* ===== 10/30 箱を減らす（栄成さん「はい。ただし、ただ減らして逆にその区画では何を言っているのかがわかりづらくなったらNGです」）
   海外サイトの作り：箱は1区画に1つまで・並びは細い線で区切る・数字は箱に入れない（すり合わせ 7-38） ===== */
/* こんなお悩みを解決します（B案） */
.ow-bridge2 { margin-top: clamp(64px, 7vw, 96px); text-align: center; }
.ow-bridge2__h { margin: 0; font: 700 clamp(28px, 3.4vw, 46px)/1.4 "Noto Sans JP", sans-serif; letter-spacing: -.02em; color: var(--ink); }
.ow-bridge2__h em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-bridge2__row { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 48px auto 0; border-top: 1px solid #e3e9ef; text-align: left; }
.ow-bridge2__row a { display: grid; align-content: start; gap: 6px; padding: 24px 28px 4px; border-left: 1px solid #e3e9ef; color: inherit; text-decoration: none; }
.ow-bridge2__row a:first-child { border-left: 0; padding-left: 0; }
.ow-bridge2__n { font: 700 15px "Inter", sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-bridge2__row b { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ink); word-break: auto-phrase; }
.ow-bridge2__s { font-size: 15px; line-height: 1.8; color: var(--ink2); }
.ow-bridge2__go { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--blue); }
.ow-bridge2__row a:hover .ow-bridge2__go { text-decoration: underline; }
html:has(body.ow-page) { scroll-behavior: smooth; } .ow-head--solve { scroll-margin-top: 90px; }

/* RentEase とは：払えるもの・物件の白い箱をやめ、上下を細い線で区切る（この区画の箱は流れの図の③だけ） */
.ow-scope { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 40px 0 0; border-top: 1px solid #e3e9ef; }
/* お悩み：外側の白い箱をやめ、灰色の帯に声（吹き出し）と絵を直接置く */
.ow-band--worry .ow-worry { background: none; padding: 0; box-shadow: none; }
.ow-voice p { background: #fff; box-shadow: 0 10px 24px -18px rgba(0,40,90,.35); }
/* 数字：箱をやめ、2つの数字を細い縦線で区切る */
.ow-stats { background: none; box-shadow: none; padding: 0; gap: 0; max-width: 960px; margin: 0 auto; }
.ow-stat { background: none; box-shadow: none; border-radius: 0; padding: 8px 40px; }
.ow-stat + .ow-stat { border-left: 1px solid #e3e9ef; }
/* 理由：箱をやめる（細い線で上を区切る） */
.ow-why { border: 0; border-top: 1px solid #e3e9ef; border-radius: 0; background: none; padding: 36px 0 0; }
/* 0円の札：箱をやめ、細い縦線で区切った横並び */
.ow-zero4 { gap: 0; }
.ow-zero4 li { background: none; border: 0; border-radius: 0; padding: 8px 10px; }
.ow-zero4 li + li { border-left: 1px solid #e3e9ef; }
/* 比べる図：ほかの空室対策の箱をやめる（この区画の箱は「＋ RentEase 0円」だけ＝強調したいもの） */
.ow-compare__other { background: none; border: 0; padding: 0; }
/* 管理会社様へ：箱をやめ、上に細い線 */
.ow-tip { background: none; border: 0; box-shadow: none; border-radius: 0; border-top: 1px solid #e3e9ef; padding: 28px 0 0; justify-content: center; }
/* 不安への答え：2つの箱をやめ、絵と「そのまま」の印だけ */
.ow-same__row figure { background: none; padding: 0; }
/* はじめ方：手順の白い箱をやめ、番号の手順を細い線で区切る。新しい／今の入居者様は2列を縦線で区切る */
.ow-steps { gap: 0; }
.ow-step { background: none !important; box-shadow: none !important; border-radius: 0; padding: 28px 0; border-top: 1px solid #dfe6ee; }
.ow-step__who { background: none; padding: 0 24px 0 0; border-radius: 0; }
.ow-step__who + .ow-step__who { padding: 0 0 0 24px; border-left: 1px solid #dfe6ee; }
/* よくある質問：箱をやめ、細い線で区切る */
.ow-faq__list { gap: 0; border-top: 1px solid #e3e9ef; }
.ow-faq__item { background: none; border: 0; border-radius: 0; border-bottom: 1px solid #e3e9ef; }
.ow-faq__item summary { padding-left: 4px; }
.ow-faq__item p { padding-left: 4px; }

@media (max-width: 900px) {
  .ow-bridge2__row { grid-template-columns: 1fr; }
  .ow-bridge2__row a, .ow-bridge2__row a:first-child { border-left: 0; padding: 20px 0 16px; border-bottom: 1px solid #e3e9ef; }
  .ow-stat { padding: 18px 0; } .ow-stat + .ow-stat { border-left: 0; border-top: 1px solid #e3e9ef; }
  .ow-zero4 li:nth-child(odd) { border-left: 0; } .ow-zero4 li:nth-child(n+3) { border-top: 1px solid #e3e9ef; padding-top: 16px; }
  .ow-step__who, .ow-step__who + .ow-step__who { padding: 0; border-left: 0; }
  .ow-step__who + .ow-step__who { border-top: 1px solid #dfe6ee; padding-top: 20px; }
}
/* 10/30 画像だけを見た確かめ：「▶」は置き換えに見える → 構成どおり「＋」（いっしょに使える）に戻す／共有の一言はボタンのすぐ上に */
.ow-compare__plus { width: auto; height: auto; border: 0; font: 800 40px/1 "Inter", sans-serif; color: #12b8d0; }
.ow-start__share { display: grid; justify-items: center; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #dfe6ee; }
.ow-start__share .ow-share__note { margin: 0; }
@media (max-width: 900px) { .ow-compare__plus { font-size: 32px; border: 0; } }

/* ===== 10/30 ページを短くする（栄成さん「１。はい。」・デザインテーマ 5章） =====
   1 区画の上下の余白を 120px → 64px（Brex・Ramp と同じ） */
.ow-about { padding-top: 64px; padding-bottom: 64px; }
.ow-band { padding: 56px 0; }
.ow-band--solve { padding: 64px 0; }
.ow-same, .ow-start, .ow-faq, .ow-final { padding: 64px 0; }
.ow-midcta { padding: 40px 0; }
.ow-hero { padding-bottom: 56px; }
.ow-head { margin-bottom: 36px; }
.ow-head--solve::before { margin-bottom: 24px !important; }
.ow-bridge2 { margin-top: 64px; } .ow-bridge2__row { margin-top: 36px; }
.ow-scope { margin-top: 48px; padding-top: 32px; } .ow-scope__col + .ow-scope__col { margin-top: 28px; padding-top: 28px; }
.ow-compare { margin-top: 36px; } .ow-tip { margin-top: 32px; } .ow-why { margin-top: 32px; padding-top: 28px; }
.ow-qa2 { margin-top: 36px; }
/* 2 お悩みの帯を横1列（左に見出し、中に声、右に絵） */
.ow-worry--row, .ow-band--worry .ow-worry--row:has(.ow-worry__pair) { display: grid; grid-template-columns: 300px 1fr 260px; gap: 32px; max-width: 1160px; padding: 0; align-items: center; }
.ow-worry--row .ow-head--worry { margin: 0; text-align: left; }
.ow-worry--row .ow-head--worry .ow-kicker { justify-content: flex-start; }
.ow-worry--row .ow-head--worry .ow-kicker::before { display: none; }
.ow-worry--row .ow-h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.4; }
.ow-worry--row .ow-vacant, .ow-worry--row .ow-worry__pair, .ow-worry--row .ow-rosterfig { width: 260px; }
.ow-band--solve .ow-head--solve::before { margin-top: -56px; }
/* 3 縦に積んでいる所を左右に：解決03（写真｜前と後）・不安への答え（見出し｜絵） */
.ow-solve3 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; max-width: 1060px; margin: 0 auto; }
.ow-solve3 .ow-auto { max-width: none; margin: 0; } .ow-solve3 .ow-auto__photo { height: 300px; }
.ow-solve3 .ow-ba { margin: 0; grid-template-columns: 1fr 40px 1fr; }
.ow-solve3 .ow-ba__item figcaption { font-size: 16px; }
.ow-same__in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ow-head--left { text-align: left; margin: 0; } .ow-head--left .ow-kicker::before { display: none; } .ow-head--left .ow-lead { margin-left: 0; }
.ow-same .ow-same__row { margin: 0; }
/* 4 よくある質問：最初の5問、残りは「すべて見る」 */
.ow-faq__more > summary { cursor: pointer; list-style: none; padding: 18px 4px; text-align: center; font-size: 15px; font-weight: 700; color: var(--blue); border-bottom: 1px solid #e3e9ef; }
.ow-faq__more > summary::-webkit-details-marker { display: none; }
.ow-faq__more[open] > summary { display: none; }
/* 3 の続き：4人に1人の札が2行になるので、数字の行と高さをそろえる */
.ow-stat__k { min-height: 1.5em; }

@media (max-width: 900px) {
  .ow-about, .ow-same, .ow-start, .ow-faq, .ow-final, .ow-band, .ow-band--solve { padding: 48px 0; }
  .ow-worry--row, .ow-band--worry .ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 1fr; gap: 16px; }
  .ow-worry--row .ow-head--worry { text-align: center; } .ow-worry--row .ow-head--worry .ow-kicker { justify-content: center; } .ow-worry--row .ow-head--worry .ow-kicker::before { display: inline-block; }
  .ow-worry--row .ow-vacant, .ow-worry--row .ow-worry__pair, .ow-worry--row .ow-rosterfig { width: 220px; margin: 0 auto; }
  .ow-band--solve .ow-head--solve::before { margin-top: -48px; }
  .ow-solve3, .ow-same__in { grid-template-columns: 1fr; gap: 24px; }
  .ow-solve3 .ow-auto__photo { height: 220px; }
  .ow-head--left { text-align: center; } .ow-head--left .ow-kicker::before { display: inline-block; } .ow-head--left .ow-lead { margin-left: auto; }
}
@media (min-width: 901px) {
  .ow-stats { max-width: 1000px; grid-template-columns: 1fr 1.15fr; }
  .ow-stat__k, .ow-auto__card b { white-space: nowrap; }
}
/* 10/30 通帳の絵を描き直し（パソコンに見えたため）。振込人の一覧は通帳の右下に重ねる */
.ow-qa2__list { left: auto; right: 0; bottom: 4%; }
@media (min-width: 901px) { .ow-head--left .ow-h2 { font-size: clamp(32px, 3vw, 42px); } }

/* 10/30 お悩みの横幅を狭める（栄成さん「端から端までテキストやイラストがあるけど広すぎない？」）／文字を減らした所の見た目 */
.ow-worry--row, .ow-band--worry .ow-worry--row:has(.ow-worry__pair) { max-width: 980px; grid-template-columns: 250px 1fr 220px; gap: 28px; }
.ow-worry--row .ow-vacant, .ow-worry--row .ow-worry__pair, .ow-worry--row .ow-rosterfig { width: 220px; }
.ow-worry--row .ow-h2 { font-size: clamp(24px, 2.3vw, 30px); }
.ow-note { margin: 8px 0 0; font-size: 13px; color: #6b7682; }
.ow-bridge2__row b { margin-bottom: 4px; }
.ow-qa2__a { font-size: 18px; font-weight: 700; line-height: 1.7; }
.ow-step__who p { font-size: 16px; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) { .ow-worry--row, .ow-band--worry .ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 1fr; } .ow-qa2__a { font-size: 16px; } }

/* ===== 10/30 お悩みの一覧を独立した区画に（地は TOP と同じ薄い青→緑のグラデーション）・お悩み2の絵を大きく・動き ===== */
.ow-bridge-sec { padding: 64px 0; background: linear-gradient(135deg, #e6f6ff, #e3fbf2); }
.ow-bridge-sec .ow-bridge2 { margin-top: 0; }
.ow-bridge2__row { border-top-color: rgba(0,60,120,.12); }
.ow-bridge2__row a { border-left-color: rgba(0,60,120,.12); }
.ow-about { padding-bottom: 64px; }
/* お悩み2：2つの絵を重ねて大きく（前は1つ約105pxで小さすぎた） */
.ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 250px 1fr 260px !important; }
.ow-worry--row .ow-worry__pair { position: relative; display: block; width: 260px; height: 200px; }
.ow-worry--row .ow-tagfig, .ow-worry--row .ow-estfig { position: absolute; width: 175px; }
.ow-worry--row .ow-tagfig { left: 0; top: 0; z-index: 1; }
.ow-worry--row .ow-estfig { right: 0; bottom: 0; }
/* 棒グラフ・円グラフが伸びる */
.ow-grow .ow-why__bars i { background-size: 0 100%; transition: background-size 1.1s cubic-bezier(.2,.7,.2,1); }
.ow-grow.is-in .ow-why__bars i { background-size: 100% 100%; }
.ow-grow .ow-donut circle:last-child { stroke-dasharray: 0 289; transition: stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1); }
.ow-grow.is-in .ow-donut circle:last-child { stroke-dasharray: 253.5 289; }
@media (prefers-reduced-motion: reduce) { .ow-grow .ow-why__bars i, .ow-grow .ow-donut circle:last-child { transition: none; } }
@media (max-width: 900px) {
  .ow-bridge-sec { padding: 48px 0; }
  .ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 1fr !important; }
  .ow-worry--row .ow-worry__pair { width: 240px; height: 185px; margin: 0 auto; } .ow-worry--row .ow-tagfig, .ow-worry--row .ow-estfig { width: 160px; }
}
/* 10/30 お悩み2：重ねると白い四角が見えたので、横に並べて1つずつ大きく（各 165px） */
.ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 270px 1fr 340px !important; max-width: 1040px; }
.ow-worry--row .ow-worry__pair { position: static; display: flex; align-items: center; gap: 10px; width: 340px; height: auto; }
.ow-worry--row .ow-tagfig, .ow-worry--row .ow-estfig { position: static; width: 165px; }
.ow-worry--row .ow-h2 { word-break: auto-phrase; }
@media (max-width: 900px) { .ow-worry--row .ow-worry__pair { width: 300px; margin: 0 auto; } .ow-worry--row .ow-tagfig, .ow-worry--row .ow-estfig { width: 145px; } }
/* 灰色の帯の上では、絵の地を明るくすると白い四角に見える → 帯の色になじませる */
.ow-band--worry img[src*="/owner/codex/"] { filter: none; mix-blend-mode: multiply; }
.ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 250px 1fr 310px !important; max-width: 1100px; }
.ow-worry--row .ow-worry__pair { width: 310px; gap: 10px; }
.ow-worry--row .ow-tagfig, .ow-worry--row .ow-estfig { width: 150px; }
.ow-page .ow-band--worry img[src*="/owner/codex/"] { filter: none; mix-blend-mode: multiply; }
.ow-page .ow-band--worry img[src*="-g."] { filter: none; mix-blend-mode: normal; }

/* ===== 10/30 解決02 案B「左右に分ける」 ===== */
.ow-g { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-s2row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; scroll-margin-top: 90px; }
.ow-s2row + .ow-s2row { margin-top: 56px; padding-top: 56px; border-top: 1px solid #e3e9ef; }
.ow-s2row__txt { text-align: left; }
.ow-s2row__txt.ow-head--solve::before { display: none; }
.ow-s2row .ow-kicker { justify-content: flex-start; } .ow-s2row .ow-kicker::before { display: none; }
.ow-s2row .ow-h2 { margin-bottom: 14px; }
.ow-s2row .ow-lead { margin: 0; }
.ow-zero4--grid { grid-template-columns: 1fr 1fr; max-width: none; margin: 0; }
.ow-zero4--grid li { padding: 18px 10px; border-left: 0 !important; border-top: 0 !important; }
.ow-zero4--grid li:nth-child(odd) { border-right: 1px solid #e3e9ef !important; }
.ow-zero4--grid li:nth-child(-n+2) { border-bottom: 1px solid #e3e9ef; }
.ow-zero4--grid img { width: 110px; }
/* 2026-11-04 ごちゃごちゃの直し：下の段の絵の並び（.ow-s2cmp）は外した。文だけの1列（.ow-s2row--one）にして中央に */
.ow-s2row--one { grid-template-columns: minmax(0, 1fr); }
.ow-s2row--one .ow-s2row__txt { text-align: center; }
.ow-s2row--one .ow-s2tip { justify-content: center; text-align: left; }
.ow-s2row__h { margin: 0 0 18px; font: 700 clamp(24px, 2.4vw, 32px)/1.45 "Noto Sans JP", sans-serif; color: var(--ink); }
.ow-s2tip { display: flex; align-items: center; gap: 14px; }
.ow-s2tip .ow-tip__fig, .ow-s2tip .ow-tip__fig img { width: 64px; height: 64px; }
.ow-s2tip p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.ow-s2tip small { display: block; font-size: 12px; color: var(--blue); }
/* ===== 途中の申し込み ===== */
.ow-midcta { padding: 56px 0; background: linear-gradient(135deg, #e6f6ff, #e3fbf2); }
.ow-midcta__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 980px; }
.ow-midcta__h { margin: 0; font: 700 clamp(22px, 2.4vw, 30px)/1.5 "Noto Sans JP", sans-serif; color: var(--ink); }
.ow-midcta__act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ow-video__bar { justify-content: flex-start; }
@media (max-width: 900px) {
  .ow-s2row { grid-template-columns: 1fr; gap: 24px; }
  .ow-s2row__txt { text-align: center; } .ow-s2row .ow-kicker { justify-content: center; } .ow-s2row .ow-kicker::before { display: inline-block; }
  .ow-s2tip { justify-content: center; text-align: left; }
  .ow-midcta__in { flex-direction: column; text-align: center; } .ow-midcta__act { justify-content: center; }
}
.ow-midcta__h { text-align: left; }
@media (min-width: 901px) { .ow-midcta__h { white-space: nowrap; } }
/* スマホ：お悩み2の横1列の指定（!important）がスマホにも効いて右が切れていた */
@media (max-width: 900px) {
  .ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 1fr !important; max-width: 100%; }
  .ow-midcta__h { text-align: center; }
}

/* 10/30 本物の紹介動画（16:9）。再生前は表紙＋再生ボタン、押すと操作の帯つきで流れる */
.ow-video--real { aspect-ratio: 16 / 9; background: #0b1b2b; cursor: default; }
.ow-video--real video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ow-video--real .ow-video__play { cursor: pointer; }
.ow-video__len { position: absolute; left: 16px; bottom: 14px; padding: 4px 12px; border-radius: 99px; background: rgba(11,27,43,.75); color: #fff; font-size: 13px; font-weight: 700; }
.ow-video--real.is-play .ow-video__play, .ow-video--real.is-play .ow-video__len { display: none; }
/* 表紙の見出しに再生ボタンが重なっていた → TOP と同じく、下に横長の再生ボタン */
.ow-video--real .ow-video__pill { left: 50%; top: auto; bottom: 18px; width: auto; height: auto; margin: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 8px; border-radius: 99px; background: rgba(255,255,255,.96); box-shadow: 0 12px 30px -10px rgba(0,40,90,.45); font: 700 15px/1 "Noto Sans JP", sans-serif; color: var(--ink); white-space: nowrap; }
.ow-video--real .ow-video__pill::before, .ow-video--real .ow-video__pill::after { content: none; }
.ow-video__ic { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); flex: none; }
.ow-video__ic::after { content: ''; position: absolute; left: 16px; top: 12px; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #fff; }
@media (max-width: 900px) { .ow-video--real .ow-video__pill { bottom: 10px; font-size: 13px; padding: 6px 14px 6px 6px; } .ow-video__ic { width: 32px; height: 32px; } .ow-video__ic::after { left: 12px; top: 9px; border-width: 7px 0 7px 10px; } }
.ow-video--real .ow-video__pill { left: 16px; transform: none; bottom: 16px; }
.ow-solve3--one { grid-template-columns: 1fr; max-width: 760px; }

/* 10/30 動画をブラウザの中いっぱいに（画面全体の全画面は使わない） */
.ow-video__max { position: absolute; right: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 99px; background: rgba(11,27,43,.72); color: #fff; font: 700 12px/1 "Noto Sans JP", sans-serif; cursor: pointer; }
.ow-video__max span { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 3px; box-sizing: border-box; }
.ow-video--real.is-max { position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; background: #000; box-shadow: none; }
.ow-video--real.is-max video { object-fit: contain; }
.ow-video--real.is-max .ow-video__max { top: 18px; right: 18px; padding: 10px 16px; font-size: 14px; background: rgba(255,255,255,.16); }
html.ow-noscroll, html.ow-noscroll body { overflow: hidden; }

/* ===== 10/30 はじめ方を TOP と同じ見せ方に（top-intro.css の .tx-start〜.tx-phone をそのまま写した） ===== */
.tx-start { padding: 110px 0 90px; background: #f5f8fb; }
.tx-start__in > div, .tx-start__head { text-align: left; }
.tx-start__head { max-width: 1040px; }
.tx-start__in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; max-width: 1040px; margin-top: 32px; }
.tx-start__lead { margin: 14px 0 0; font-size: 15px; line-height: 1.8; color: #4f5b67; }
.tx-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tx-steps li { border-radius: 16px; transition: background .3s, box-shadow .3s; }
.tx-steps button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.tx-steps__n { font: 800 13px "JetBrains Mono", "Inter", monospace; letter-spacing: .06em; color: #0a7fd0; }
.tx-steps b { font-size: 18px; font-weight: 900; color: #6b7785; transition: color .3s; }
.tx-steps__p { display: none; padding: 0 18px 16px 62px; } .tx-steps__p p { margin: 0; font-size: 14px; line-height: 1.8; color: #4f5b67; }
.tx-steps li.is-on { background: #fff; box-shadow: 0 0 0 1px rgba(11,27,43,.06), 0 18px 40px -26px rgba(0,60,120,.3); } .tx-steps li.is-on b { color: #0b1b2b; } .tx-steps li.is-on .tx-steps__p { display: block; }
.tx-phone { position: relative; aspect-ratio: 600 / 1305; padding: 10px; border-radius: 44px; background: #0b1b2b; box-shadow: 0 40px 80px -40px rgba(0,40,90,.5); }
.tx-phone img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 34px; object-fit: cover; opacity: 0; transition: opacity .4s; } .tx-phone img.is-on { opacity: 1; }
.tx-start .fx-need { margin-top: 48px; }
.ow-start.tx-start { padding: 64px 0; background: #f5f8fb; color: var(--ink); }
.tx-start .ow-kicker { justify-content: flex-start; } .tx-start .ow-kicker::before { display: none; }
.tx-start .ow-h2 { margin-bottom: 0; color: var(--ink); }
.tx-steps__p p + p { margin-top: 8px; } .tx-steps__p p b { display: block; font-size: 13px; color: #0a7fd0; }
.tx-phone { max-width: 300px; justify-self: end; width: 100%; }
.ow-start__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.ow-start__cta .ow-start__share { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
.ow-start__cta .ow-share__note { margin: 0; font-size: 12px; color: var(--ink2); max-width: 10em; line-height: 1.5; }

/* ===== 10/30 背景の色（栄成さん「このお申し込みや上の解決しますに使われている背景の色が気になります」）：青→緑のグラデーションをやめ、TOP と同じ 白／ごく薄い灰色 で交互に
   最初の画面（薄い青）→ RentEase とは（ごく薄い灰色）→ お悩みの一覧（白）→ お悩み（灰色）… → 途中の申し込み（灰色）→ 不安への答え（白）→ はじめ方（灰色）→ よくある質問（白）→ 最後（TOP の最後と同じ白＋下にぼかした光） */
.ow-about { background: #f6f8fa; }
.ow-flow2__step--main { background: #fff; }
.ow-bridge-sec { background: #fff; }
.ow-bridge2__row { border-top-color: #e3e9ef; } .ow-bridge2__row a { border-left-color: #e3e9ef; }
.ow-midcta { background: #f6f8fa; }
.ow-final { position: relative; overflow: hidden; background: #fff; border-top: 1px solid #e3e9ef; }
.ow-final::before { content: ""; position: absolute; left: 50%; bottom: -300px; width: 1200px; height: 600px; margin-left: -600px; border-radius: 50%; filter: blur(110px); opacity: .45; background: radial-gradient(closest-side, #009ffd, transparent), radial-gradient(closest-side at 60% 40%, #23e4ab, transparent); }
.ow-final .ow-wrap { position: relative; }

/* ===== 10/30 RentEase とはの図：動画の見せ方（スマホの画面・RentEase の丸・口座の丸） ===== */
.ow-flow2__vis--phone { display: grid; place-items: center; height: 230px; max-width: none; }
.ow-flow2__phone { --w: 104px; --p: 4px; }
.ow-flow2__ring { display: grid; place-items: center; width: 160px; height: 160px; margin: 35px 0; border-radius: 50%; border: 4px solid #12a8e6; background: #fff; box-shadow: 0 24px 40px -26px rgba(0,60,120,.35); }
.ow-flow2__ring img { width: 112px; height: auto; filter: none !important; }
.ow-flow2__disc { display: grid; place-items: center; width: 230px; height: 230px; max-width: none; border-radius: 50%; background: #e3f6ef; }
.ow-flow2__disc img { width: 170px; height: auto; mix-blend-mode: multiply; }
.ow-flow2__step--main .ow-flow2__vis.ow-flow2__disc { height: 230px; max-width: none; }
.ow-flow2__who { padding: 0; background: none !important; color: var(--ink); font-size: 24px; font-weight: 700; }
.ow-flow2__do { font-size: 17px; color: #0a8fe6; }
.ow-flow2__step--main .ow-flow2__do { font-size: 19px; color: #0a8fe6; }
.ow-flow2__step { grid-template-rows: auto auto auto; }
.ow-flow2__step > .ow-flow2__who { order: 2; } .ow-flow2__step > .ow-flow2__vis { order: 1; } .ow-flow2__step > .ow-flow2__do { order: 3; } .ow-flow2__step > .ow-flow2__note, .ow-flow2__step > .ow-flow2__small { order: 4; }

/* ===== 10/30 最後の申し込み：スマホ（アプリの画面）＋カード ===== */
.ow-final__vis { position: relative; width: 420px; height: 380px; justify-self: center; }
.ow-final__phone { position: absolute; left: 50%; top: 0; transform: translateX(-50%); --w: 170px; --p: 6px; z-index: 2; }
.ow-final__card { position: absolute; width: 230px; aspect-ratio: 1.586; border-radius: 14px; background-size: cover; background-position: center; box-shadow: 0 30px 50px -28px rgba(0,40,90,.55); }
.ow-final__card--a { left: 0; top: 120px; transform: rotate(-12deg); }
.ow-final__card--b { right: 0; top: 70px; transform: rotate(10deg); }

@media (max-width: 900px) {
  .ow-start.tx-start { padding: 48px 0; }
  .tx-start__in { grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; align-items: start; }
  .tx-steps b { font-size: 15px; } .tx-steps button { padding: 12px; gap: 10px; } .tx-steps__p { padding: 0 12px 12px; }
  .tx-phone { position: sticky; top: 90px; padding: 6px; border-radius: 22px; } .tx-phone img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 17px; }
  .ow-start__cta { grid-column: 1 / -1; }
  .ow-flow2__vis--phone, .ow-flow2__disc { height: 180px; } .ow-flow2__disc { width: 180px; } .ow-flow2__disc img { width: 130px; } .ow-flow2__phone { --w: 82px; }
  .ow-flow2__ring { width: 120px; height: 120px; margin: 20px 0; } .ow-flow2__ring img { width: 84px; }
  .ow-final__vis { width: 300px; height: 280px; } .ow-final__phone { --w: 124px; } .ow-final__card { width: 160px; } .ow-final__card--a { top: 100px; } .ow-final__card--b { top: 50px; }
}

/* ===== 10/30 解決03：部屋の一覧の前と後（紙は Codex・部屋番号と印はページの側） ===== */
.ow-ba--roster { grid-template-columns: 1fr 70px 1fr; max-width: 760px; }
.ow-roster { position: relative; width: 260px; margin: 0 auto; }
.ow-roster img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.ow-roster ul { position: absolute; left: 9%; right: 13%; top: 21%; bottom: 10%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(4, 1fr); row-gap: 7%; }
.ow-roster li { display: grid; grid-template-columns: auto 1fr 34%; align-items: center; gap: 6px; padding-left: 6px; }
.ow-roster li span { font: 800 15px/1 "Inter", sans-serif; color: var(--ink); }
.ow-roster li i { justify-self: start; padding: 2px 6px; border-radius: 6px; background: #e3f4ff; color: #0a7fd0; font: 700 10px/1.3 "Noto Sans JP", sans-serif; font-style: normal; white-space: nowrap; }
.ow-roster li em { grid-column: 3; justify-self: center; padding: 3px 7px; border-radius: 6px; font: 700 11px/1.3 "Noto Sans JP", sans-serif; font-style: normal; white-space: nowrap; color: #fff; }
.ow-roster li em.is-ok { background: #23c493; } .ow-roster li em.is-late { background: #e05a5a; }
.ow-ba--roster .ow-ba__item--after .ow-roster li:nth-child(2) { background: rgba(35,196,147,.10); border-radius: 6px; }
@media (max-width: 900px) { .ow-ba--roster { grid-template-columns: 1fr; } .ow-roster { width: 240px; } }

/* ===== 10/30 RentEase とは：丸の背景をやめる（栄成さん「丸の背景は不要ですよね？逆に見づらくなっていますよね？」） ===== */
.ow-flow2__icon { display: grid; place-items: center; height: 230px; max-width: none; }
.ow-flow2__icon img { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 24px 40px -22px rgba(0,60,120,.45); filter: none !important; }
img.ow-flow2__book, .ow-flow2__step--main img.ow-flow2__book { width: 100%; max-width: 280px; height: 230px; object-fit: contain; }
@media (max-width: 900px) { .ow-flow2__icon { height: 160px; } .ow-flow2__icon img { width: 96px; height: 96px; border-radius: 22px; } img.ow-flow2__book { height: 170px; } }

/* ===== 10/30 はじめ方：時の流れ（今日 → 当日から → 翌月25日） ===== */
.ow-tl-sec { padding: 64px 0; background: #f6f8fa; }
.ow-tl { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; position: relative; }
.ow-tl::before { content: ''; position: absolute; left: 116px; top: 14px; bottom: 40px; width: 3px; border-radius: 3px; background: var(--grad); opacity: .45; }
.ow-tl__item { position: relative; display: grid; grid-template-columns: 100px 1fr 200px; gap: 36px; align-items: start; padding: 0 0 44px; }
.ow-tl__item::before { content: ''; position: absolute; left: 110px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid #12b8d0; box-sizing: border-box; }
.ow-tl__when { margin: 0; padding-top: 2px; text-align: right; font: 700 18px/1.3 "Noto Sans JP", sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-tl__body { padding-left: 4px; }
.ow-tl__h { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; font: var(--l2); font-size: clamp(20px, 2vw, 24px); color: var(--ink); }
.ow-tl__h span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 14px/1 "Inter", sans-serif; flex: none; }
.ow-tl__t { margin: 0; font-size: 16px; line-height: 1.8; color: var(--ink2); }
.ow-tl__fig { display: grid; justify-items: center; }
.ow-tl__phone { --w: 120px; --p: 4px; }
.ow-tl__book { width: 190px; height: auto; mix-blend-mode: multiply; }
.ow-tl__item:has(.ow-tl__two) { grid-template-columns: 100px 1fr; }
.ow-tl__two { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.ow-tl__two > div { padding-right: 24px; }
.ow-tl__two > div + div { padding: 0 0 0 24px; border-left: 1px solid #dfe6ee; }
.ow-tl__two img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 14px; margin-bottom: 10px; }
.ow-tl__two img.is-obj { object-fit: contain; mix-blend-mode: multiply; border-radius: 0; }
.ow-tl__two b { display: block; margin-bottom: 4px; font-size: 16px; color: #0a7fd0; }
.ow-tl__two p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink); }
.ow-tl__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; }
.ow-tl__cta .ow-start__share { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
.ow-tl__cta .ow-share__note { margin: 0; font-size: 12px; color: var(--ink2); max-width: 11em; line-height: 1.5; }
@media (max-width: 900px) {
  .ow-tl-sec { padding: 48px 0; }
  .ow-tl::before { left: 7px; bottom: 30px; }
  .ow-tl__item, .ow-tl__item:has(.ow-tl__two) { grid-template-columns: 1fr; gap: 6px; padding: 0 0 32px 28px; }
  .ow-tl__item::before { left: 1px; top: 4px; }
  .ow-tl__when { text-align: left; font-size: 15px; }
  .ow-tl__fig { justify-items: start; margin-top: 8px; } .ow-tl__phone { --w: 100px; } .ow-tl__book { width: 160px; }
  .ow-tl__two { grid-template-columns: 1fr; gap: 18px; } .ow-tl__two > div, .ow-tl__two > div + div { padding: 0; border-left: 0; }
  .ow-tl__two img { height: 130px; }
}
@media (max-width: 900px) {
  .ow-ba--roster, .ow-solve3 .ow-ba--roster { grid-template-columns: 1fr !important; max-width: 100%; gap: 14px; }
  .ow-ba--roster .ow-ba__arrow { border-width: 20px 14px 0; border-color: #23c6d0 transparent transparent; }
}
/* 手順1のスマホが縦に長く、手順1と2の間が空いていた → 小さくして上下のつり合いを取る */
.ow-tl__phone { --w: 84px; }
.ow-tl__item:first-child .ow-tl__fig { margin-top: -6px; }

/* ===== 10/30 試し：枠の使い分け（解決01 だけ）。A 影ありの白い札＝主役1つ／B 影なしの板＝補足／C 枠なし＝並び
   余白：見出しと中身 24px・まとまり同士 40px ===== */
.ow-fr .ow-head--solve { margin-bottom: 24px; }
.ow-fr .ow-stats { max-width: 980px; padding: 32px 8px; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(11,27,43,.07), 0 30px 60px -36px rgba(0,40,90,.35); }
.ow-fr .ow-why { max-width: 980px; margin-top: 40px; padding: 28px 36px; border: 0; border-radius: 24px; background: #f2f6fa; }
.ow-fr .ow-src { margin-top: 16px; }
/* はじめ方「ご案内」：2つを同じ形で */
.ow-tl__case { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.ow-tl__thing { display: grid; place-items: center; height: 150px; }
.ow-tl__mini { --w: 70px; --p: 3px; }
.ow-tl__pop { width: 96px; height: auto; border-radius: 6px; box-shadow: 0 16px 30px -18px rgba(0,40,90,.45); }
.ow-tl__case small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.ow-tl__two p { font-weight: 700; }
.ow-fr .ow-stats { max-width: 1040px; padding: 32px 24px; }
.ow-fr .ow-stat { padding: 8px 32px; min-width: 0; }
.ow-fr .ow-stat__v { font-size: clamp(44px, 4.6vw, 64px); }
@media (max-width: 900px) { .ow-fr .ow-stats { padding: 8px 18px; border-radius: 24px; } .ow-fr .ow-stat { padding: 18px 0; } .ow-fr .ow-why { padding: 20px 16px; } }
/* 3つの手順を同じ形に（左に物・右に文）。手順1と2の間が空いていたのを解消 */
.ow-tl__item { grid-template-columns: 100px 1fr; padding-bottom: 36px; }
.ow-tl__case--one { margin-top: 12px; grid-template-columns: 120px 1fr; align-items: center; }
.ow-tl__case--one .ow-tl__thing { height: 130px; }
.ow-tl__case--one .ow-tl__book { width: 120px; }
.ow-tl__case--one .ow-tl__t { font-weight: 700; color: var(--ink); }
.ow-tl__two .ow-tl__case { grid-template-columns: 120px 1fr; align-items: center; }
.ow-tl__two .ow-tl__thing { height: 130px; }
@media (max-width: 900px) { .ow-tl__case--one, .ow-tl__two .ow-tl__case { grid-template-columns: 84px 1fr; } .ow-tl__case--one .ow-tl__thing, .ow-tl__two .ow-tl__thing { height: 110px; } .ow-tl__case--one .ow-tl__book { width: 84px; } .ow-tl__pop { width: 76px; } .ow-tl__mini { --w: 56px; } }
@media (max-width: 900px) { .ow-tl__item, .ow-tl__item:has(.ow-tl__two) { grid-template-columns: minmax(0, 1fr); } .ow-tl__body { min-width: 0; } .ow-tl__t br { display: none; } .ow-tl__case > div:last-child, .ow-tl__case > p { min-width: 0; } }

/* ===== 10/30 枠の使い分けをページ全体に（栄成さん「１。OKです。」・決定表 #114）
   A 影ありの白い札＝区画の主役1つ／B 影なしの板＝まとまり・補足／C 枠なし＝並び。見出しと中身 24px・まとまり同士 40px ===== */
.ow-page { --frA-bg: #fff; --frA-sh: 0 0 0 1px rgba(11,27,43,.07), 0 30px 60px -36px rgba(0,40,90,.35); --frB-bg: #f2f6fa; }
.ow-head, .ow-head--solve { margin-bottom: 24px; }
/* RentEase とは：A＝③ いつもの口座（地は灰色なので白い札が浮く） */
.ow-flow2__step--main { background: var(--frA-bg); border: 0; box-shadow: var(--frA-sh); border-radius: 32px; }
.ow-scope { margin-top: 40px; }
/* お悩みの一覧：A＝3つの列をまとめて1枚の札に（押せる） */
.ow-bridge2__row { margin-top: 32px; padding: 8px 28px; border: 0; border-radius: 32px; background: var(--frA-bg); box-shadow: var(--frA-sh); }
.ow-bridge2__row a { padding: 24px 28px; } .ow-bridge2__row a:first-child { padding-left: 4px; }
.ow-bridge-sec { background: #f6f8fa; }
/* お悩み：B＝声と絵をまとめる白い板（影なし） */
.ow-band--worry .ow-worry--row { padding: 28px 36px !important; border-radius: 28px; background: #fff; }
.ow-band--worry .ow-voice p { background: #f6f8fa; box-shadow: none; }
/* 解決01：A＝数字2つ／B＝理由（.ow-fr を全部に） */
.ow-band--solve .ow-stats { max-width: 1040px; padding: 32px 24px; border-radius: 32px; background: var(--frA-bg); box-shadow: var(--frA-sh); }
.ow-band--solve .ow-stat { padding: 8px 32px; min-width: 0; }
.ow-band--solve .ow-stat__v { font-size: clamp(44px, 4.6vw, 64px); }
.ow-band--solve .ow-why { max-width: 980px; margin-top: 40px; padding: 28px 36px; border: 0; border-radius: 24px; background: var(--frB-bg); }
/* 解決02：A＝4つの0円／B＝下の段（ほかの対策といっしょに＋管理会社様へ） */
.ow-zero4--grid { padding: 8px; border-radius: 32px; background: var(--frA-bg); box-shadow: var(--frA-sh); }
.ow-s2row + .ow-s2row { margin-top: 40px; padding: 32px 36px; border-top: 0; border-radius: 24px; background: var(--frB-bg); }
/* 解決03：A＝部屋の一覧の前と後 */
.ow-ba--roster { padding: 28px 24px; border-radius: 32px; background: var(--frA-bg); box-shadow: var(--frA-sh); max-width: 820px; margin: 0 auto; }
/* 不安への答え：B＝2つの絵をまとめる板 */
.ow-same .ow-same__row { padding: 24px; border-radius: 24px; background: var(--frB-bg); }
/* はじめ方・よくある質問：C（枠なし）のまま */
.ow-tl__ill { width: 120px; height: auto; mix-blend-mode: multiply; }
.ow-tl__thing--doc { position: relative; }
.ow-tl__thing--doc i { position: absolute; right: 0; top: 46%; padding: 2px 8px; border: 2px solid #e05a5a; border-radius: 50%; color: #e05a5a; font: 700 12px/1.3 "Noto Sans JP", sans-serif; font-style: normal; background: rgba(255,255,255,.9); transform: rotate(-8deg); }
@media (max-width: 900px) {
  .ow-bridge2__row { padding: 4px 18px; border-radius: 24px; } .ow-bridge2__row a, .ow-bridge2__row a:first-child { padding: 18px 0; }
  .ow-band--worry .ow-worry--row { padding: 20px 16px !important; border-radius: 22px; }
  .ow-band--solve .ow-stats { padding: 8px 18px; border-radius: 24px; } .ow-band--solve .ow-stat { padding: 18px 0; } .ow-band--solve .ow-why { padding: 20px 16px; }
  .ow-zero4--grid { border-radius: 24px; } .ow-s2row + .ow-s2row { padding: 22px 16px; }
  .ow-ba--roster { padding: 20px 12px; border-radius: 24px; }
  .ow-same .ow-same__row { padding: 14px; }
  .ow-tl__ill { width: 84px; }
}
/* 再生中は「大きく見る」を隠す（マウスを動かす・触れると2.5秒出る） */
.ow-video__max { transition: opacity .3s; }
.ow-video--real.is-play.is-idle .ow-video__max { opacity: 0; pointer-events: none; }
.ow-video--real.is-idle video { cursor: none; }

/* 10/30 お悩みの一覧を、前（RentEase とは＝ごく薄い灰色）と後（お悩み1＝灰色の帯）と違う色に（栄成さん「背景の色を変えたら？」）
   → 白にし、上下に細い線。主役の札（影あり）が白い地でも浮くように、影を少し強く */
.ow-bridge-sec { background: #fff; border-top: 1px solid #e3e9ef; border-bottom: 1px solid #e3e9ef; }
.ow-bridge2__row { box-shadow: 0 0 0 1px rgba(11,27,43,.08), 0 30px 60px -30px rgba(0,40,90,.4); }
/* お悩みの板が白になったので、絵は白い地のままの版に戻す（灰色を焼き込んだ版だと四角く見える） */
.ow-band--worry .ow-worry--row img[src*="/owner/codex/"] { filter: brightness(1.05) contrast(1.03); mix-blend-mode: multiply; }
/* 10/30 お悩みの絵のまわりの地を透明に（栄成さん「この背景の色は透過にしたら？」）→ 重ね方・明るさの調整は要らない */
.ow-page img[src*="-t.webp"] { filter: none !important; mix-blend-mode: normal !important; }
/* 10/30 PC でお悩み→解決の矢印が目立たない（栄成さん「PCで表示した時に矢印が目立たないかも。スマホ表示では完璧です」）→ PC だけ大きく */
@media (min-width: 901px) { .ow-band--solve .ow-head--solve::before { border-width: 40px 56px 0; margin-bottom: 28px !important; } }

/* ===== 10/30 共有ボタン（栄成さん「意外と目立って邪魔です」「『物件の管理を管理会社様にお任せのオーナー様へ』という文章がお申し込みの下にあるのもNG」）
   → 枠と影をやめ、文字のリンクに。誰向けかは、リンクのすぐ上に小さく（申し込みの下には置かない） ===== */
.ow-share--link .ow-share__btn { display: inline-grid; justify-items: start; gap: 2px; min-height: 0; padding: 4px 2px; border-radius: 0; background: none; box-shadow: none; text-align: left; }
.ow-share--link .ow-share__btn::before { content: none; }
.ow-share--link .ow-share__btn small { font-size: 12px; font-weight: 500; color: var(--ink2); }
.ow-share--link .ow-share__btn span { font-size: 15px; font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ow-share--link .ow-share__btn span::after { content: ' ↗'; text-decoration: none; display: inline-block; margin-left: 2px; }
.ow-share--link .ow-share__btn:hover span { color: var(--navy); }
.ow-start__share { padding: 0; border: 0; margin: 0; }
.ow-midcta__act { gap: 20px; }
/* お悩み2：見積書の絵だけ（ほかのお悩みと同じ大きさ） */
.ow-worry--row .ow-worry__pair { width: 260px; display: block; }
.ow-worry--row .ow-estfig { width: 240px; margin: 0 auto; }
.ow-worry--row:has(.ow-worry__pair) { grid-template-columns: 250px 1fr 260px !important; }
@media (max-width: 900px) { .ow-worry--row:has(.ow-worry__pair) { grid-template-columns: minmax(0,1fr) !important; } .ow-worry--row .ow-estfig { width: 200px; } }

/* ===== 10/30 ヒーローの背景 E（栄成さん「Eにしましょう」・Stripe 風）：白い地に、右から青→緑の光の帯を斜めに通す。次の RentEase とは（ごく薄い灰色）と分かれる ===== */
.ow-hero { isolation: isolate; background: #fff !important; }
.ow-hero .ow-grid, .ow-hero .ow-glow { display: none !important; }
.ow-hero .ow-hero__bg { background: none !important; }
.ow-hero::before { content: ''; position: absolute; z-index: -1; right: -12%; top: -30%; width: 70%; height: 170%; transform: rotate(-24deg); background: linear-gradient(100deg, rgba(0,159,253,0) 0%, rgba(0,159,253,.55) 30%, rgba(18,184,208,.6) 55%, rgba(35,228,171,.55) 75%, rgba(35,228,171,0) 100%); filter: blur(2px); border-radius: 40%; opacity: .55; pointer-events: none; }
.ow-hero::after { content: ''; position: absolute; z-index: -1; right: -6%; top: -20%; width: 46%; height: 150%; transform: rotate(-24deg); background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.7) 50%, rgba(255,255,255,0)); pointer-events: none; }
@media (max-width: 900px) { .ow-hero::before { right: -40%; top: 20%; width: 120%; height: 90%; opacity: .45; } .ow-hero::after { right: -30%; top: 30%; width: 80%; height: 80%; } }
/* 10/30 ヒーローの上下に余白（栄成さん「上下に少し余白をつけてもらえますか？」）：PC 56→88px／スマホ 上28→48px・下56→64px */
.ow-hero { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 900px) { .ow-hero { padding-top: 48px; padding-bottom: 64px; } }
/* 10/30 「このページを共有する」の文字を小さく（栄成さん「文字が大きい？」）15→13px。小さな一言 12→11px */
.ow-share--link .ow-share__btn span { font-size: 13px; }
.ow-share--link .ow-share__btn small { font-size: 11px; }
/* 10/30 ヒーローの申し込みボタンを、上の文から離して目立たせる（栄成さん「上のテキストと離した方がよりボタンが強調される」）30→48px */
.ow-hero .ow-cta-row { margin-top: 48px; }
@media (max-width: 900px) { .ow-hero .ow-cta-row { margin-top: 36px; } }
/* 10/30 ヒーローの「賃貸物件のオーナー様・管理会社様へ」が小さすぎ（栄成さん）14→18px。
   背景が白になって白い札が見えず、文字だけ右にずれて見えていた → 薄い青の札にして、誰向けのページかがはっきり分かるように */
.ow-hero .ow-eyebrow { padding: 8px 18px; background: #e8f4fd; box-shadow: none; font-size: 18px; font-weight: 700; color: var(--navy); }
@media (max-width: 900px) { .ow-hero .ow-eyebrow { padding: 6px 14px; font-size: 15px; } }

/* 10/30 ヒーローの小見出し 案1（栄成さん「案１にします」）：札をやめ、左に青→緑の短い線（区画の小見出しと同じ作り） */
.ow-hero .ow-eyebrow { padding: 0; background: none; box-shadow: none; display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: var(--navy); }
.ow-hero .ow-eyebrow::before { content: ''; width: 32px; height: 3px; border-radius: 3px; background: var(--grad); }
@media (max-width: 900px) { .ow-hero .ow-eyebrow { padding: 0; font-size: 15px; gap: 10px; } .ow-hero .ow-eyebrow::before { width: 24px; } }
/* 2026-10-30 写真（Codex・#126・すり合わせ 7-45）：お悩みの右・解決01 の理由の板・はじめ方「当日から」 */
.ow-band--worry .ow-worry--row:has(.ow-wphoto) { grid-template-columns: 250px minmax(0, 1fr) 280px !important; }
.ow-wphoto { display: block; width: 280px; }
.ow-wphoto img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 16px; }
.ow-why:has(.ow-why__ph) { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
.ow-why__img.ow-why__ph { width: 300px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; mix-blend-mode: normal; margin: 0; }
.ow-tl__two .ow-tl__case:has(.ow-tl__ph) { grid-template-columns: 168px minmax(0, 1fr); }
.ow-tl__ph { display: block; width: 168px; height: 112px; object-fit: cover; border-radius: 12px; }
@media (max-width: 900px) {
  .ow-band--worry .ow-worry--row:has(.ow-wphoto) { grid-template-columns: minmax(0, 1fr) !important; }
  .ow-wphoto { width: 100%; max-width: 360px; margin: 0 auto; }
  .ow-why:has(.ow-why__ph) { grid-template-columns: minmax(0, 1fr); }
  .ow-why__img.ow-why__ph { width: 100%; max-width: 360px; justify-self: center; }
  .ow-tl__two .ow-tl__case:has(.ow-tl__ph) { grid-template-columns: 120px minmax(0, 1fr); }
  .ow-tl__ph { width: 120px; height: 80px; }
}
.ow-tl__two img.ow-tl__ph { height: 112px; margin-bottom: 0; }
@media (max-width: 900px) { .ow-tl__two img.ow-tl__ph { height: 80px; } }
/* 2026-10-30 「大きく見る」で黒い余白に次の区画やヘッダーが重なる（栄成さん「大きく見るを押すと黒い余白部分に何か出てくる」）：最初の画面の isolation が、大きくした動画を区画の中に閉じ込めていた → 大きく見ている間だけ外す */
html.ow-noscroll .ow-hero { isolation: auto; z-index: auto; }
/* 2026-10-30 解決03 案1「同じ机の、そのあと」＋3か月のカレンダー（すり合わせ 7-48） */
.ow-s3desk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1000px; margin: 40px auto 0; padding: 28px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(11,27,43,.06), 0 30px 60px -36px rgba(0,40,90,.35); }
.ow-s3desk__ph { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 18px; }
.ow-s3cal__h { margin: 0 0 16px; font-size: 18px; font-weight: 700; line-height: 1.5; color: #0b1b2b; }
.ow-s3cal__m { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.ow-s3cal__m li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px 14px; border-radius: 14px; background: #f6f8fa; text-align: center; }
.ow-s3cal__m b { font-size: 12px; font-weight: 700; color: #5b6773; }
.ow-s3cal__d { font: 800 30px/1.1 "Inter", "Noto Sans JP", sans-serif; color: #0b1b2b; }
.ow-s3cal__d i { margin-left: 1px; font-size: 13px; font-style: normal; font-weight: 700; }
.ow-s3cal__d--app { font: 700 18px/1.7 "Noto Sans JP", sans-serif; color: #5b6773; }
.ow-s3cal__m img { width: 64px; height: auto; }
.ow-s3cal__m small { font-size: 12px; font-weight: 700; color: #5b6773; }
.ow-s3cal__m li.is-auto { background: linear-gradient(160deg, rgba(0,159,253,.08), rgba(35,228,171,.14)); box-shadow: inset 0 0 0 1.5px rgba(35,228,171,.55); }
.ow-s3cal__m li.is-auto small { color: #0f9e7b; }
@media (max-width: 900px) {
  .ow-s3desk { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px; border-radius: 22px; }
  .ow-s3cal__h { font-size: 16px; text-align: center; }
  .ow-s3cal__d { font-size: 24px; } .ow-s3cal__m img { width: 48px; }
}
/* 2026-10-30 動画の最後のボタンに重ねる透明のリンク */
.ow-video__cta { position: absolute; z-index: 5; border-radius: 999px; color: transparent; font-size: 1px; overflow: hidden; cursor: pointer; }
.ow-video__cta:hover, .ow-video__cta:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(0,119,217,.5); outline: none; }
.ow-video__cta[hidden] { display: none; }
/* 2026-10-30 はじめ方は全部写真（同じ大きさ・角丸） */
.ow-tl__case:has(.ow-tl__ph) { grid-template-columns: 168px minmax(0, 1fr); align-items: center; }
.ow-tl__case:has(.ow-tl__ph) .ow-tl__thing { height: auto; }
.ow-tl__case img.ow-tl__ph { width: 168px; height: 112px; margin: 0; object-fit: cover; border-radius: 12px; mix-blend-mode: normal; }
@media (max-width: 900px) { .ow-tl__case:has(.ow-tl__ph) { grid-template-columns: 120px minmax(0, 1fr); } .ow-tl__case img.ow-tl__ph { width: 120px; height: 80px; } }
/* 2026-11-04 はじめ方：写真 → 絵（白い札に載せて背景から浮かせる。栄成さん「写真よりアイコンの方がいいと思います。」） */
.ow-tl__ic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(11,27,43,.06), 0 14px 28px -18px rgba(0,40,90,.35); }
.ow-tl__ic img { width: 74px; height: auto; mix-blend-mode: normal !important; filter: none !important; }
@media (max-width: 900px) { .ow-tl__ic { width: 72px; height: 72px; border-radius: 18px; } .ow-tl__ic img { width: 56px; } }
.ow-tl__ic { overflow: hidden; } .ow-tl__ic img { width: 100%; transform: scale(1.25); }
/* 2026-11-04 解決02：決済手数料0円を一番大きく、端末・契約は小さく、ほかの0円は一行で */
.ow-fee0 { display: grid; gap: 10px; padding: 20px; border-radius: 28px; background: var(--frA-bg, #fff); box-shadow: var(--frA-sh, 0 0 0 1px #e3e9ef); }
.ow-fee0__main { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 2px #23e4ab; }
.ow-fee0__main img { width: 120px; height: auto; }
.ow-fee0__main span { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink, #0b1b2b); }
.ow-fee0__main b { font: 800 64px/1 "Inter", "Noto Sans JP", sans-serif; letter-spacing: -.03em; background: var(--grad, linear-gradient(135deg,#009ffd,#23e4ab)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-fee0__main b small { font-size: .4em; margin-left: 2px; }
.ow-fee0__sub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ow-fee0__sub li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e3e9ef; }
.ow-fee0__sub span { font-size: 14px; font-weight: 700; color: var(--ink, #0b1b2b); }
.ow-fee0__sub b { font-size: 16px; font-weight: 800; color: #0f9e7b; white-space: nowrap; }
.ow-fee0__note { margin: 2px 4px 0; font-size: 13px; color: #5b6773; }
@media (max-width: 600px) {
  .ow-fee0 { padding: 12px; border-radius: 22px; }
  .ow-fee0__main { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "img txt" "img num"; padding: 14px; }
  .ow-fee0__main img { grid-area: img; width: 72px; } .ow-fee0__main span { grid-area: txt; font-size: 13px; } .ow-fee0__main b { grid-area: num; font-size: 48px; }
  .ow-fee0__sub { grid-template-columns: 1fr; gap: 8px; } .ow-fee0__sub li { padding: 10px 14px; }
}
/* 2026-11-04 解決03：写真を外し、カレンダーだけを中央に */
.ow-s3desk--cal { display: block; max-width: 560px; }
/* 2026-11-04 解決02：決済手数料（一番大きい）→ 初期費用・月額費用・振込手数料（絵つきの札3つ）→ 端末・契約は不要（小さく） */
.ow-fee0__three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ow-fee0__three li { display: grid; justify-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #d8f3ea; text-align: center; }
.ow-fee0__three img { width: 76px; height: auto; }
.ow-fee0__three span { font-size: 14px; font-weight: 700; color: var(--ink, #0b1b2b); }
.ow-fee0__three b { font: 800 36px/1.1 "Inter", "Noto Sans JP", sans-serif; letter-spacing: -.02em; background: var(--grad, linear-gradient(135deg,#009ffd,#23e4ab)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ow-fee0__three b small { font-size: .45em; margin-left: 1px; }
.ow-fee0__not { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 2px 0 0; font-size: 13px; font-weight: 700; color: #4f5b67; }
.ow-fee0__not b { margin-left: 6px; color: #0f9e7b; }
@media (max-width: 600px) { .ow-fee0__three { gap: 6px; } .ow-fee0__three li { padding: 10px 4px; border-radius: 14px; } .ow-fee0__three img { width: 52px; } .ow-fee0__three span { font-size: 12px; } .ow-fee0__three b { font-size: 28px; } .ow-fee0__not { font-size: 12px; } }

/* 11/4 英語版（/en/management/）だけ。すべて .rs-en の下（英語の枠の body）＝日本語のページには効かない
   英語の枠は body の class を変えられないので、本文を <div class="ow-page"> で包んでいる。body.ow-page に付けていた2つをこちらにも */
html:has(body.rs-en .ow-page) { overflow-x: clip; scroll-behavior: smooth; }
.rs-en .ow-page symbol :is(rect, path, circle, ellipse):is([fill="#fff"], [fill="#ffffff"], [fill="url(#ow-wall)"]):not([opacity]) { stroke: #d5dee8; stroke-width: 1.6px; }
/* 英語は文が長い：1行に固定している所を折り返せるように・見出しは行の長さをそろえる */
.rs-en .ow-midcta__h, .rs-en .ow-stat__k { white-space: normal; }
.rs-en .ow-page :is(.ow-h1, .ow-h2, .ow-bridge2__h, .ow-why__h, .ow-s2row__h, .ow-midcta__h) { text-wrap: balance; }
/* 「約9割」→ About 90%：About は小さく（大きな数字の幅を日本語と同じくらいに） */
.rs-en .ow-stat__v small { font-size: .38em; letter-spacing: 0; margin-right: .2em; }
/* 2026-11-04 C：紺のヘッダーのすぐ下の細い帯（入居者様を戻す） */
.ow-forbar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin: 0; padding: 9px 16px; background: #eef3f8; font-size: 13px; font-weight: 700; color: #3a4654; text-align: center; }
.ow-forbar a { color: #0077d9; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 600px) { .ow-forbar { font-size: 12px; padding: 8px 12px; } }
/* 2026-11-04 表紙のどこを押しても再生（押せると分かるよう、再生前は指の形） */
.ow-video--real:not(.is-play) { cursor: pointer; }
/* 2026-11-04 大きく見るが崩れていた（トップの形にしたときの max-width と margin が効いていた）→ 大きく見るときは画面いっぱい */
html.lk-p1 .ow-video--real.is-max { max-width: none; margin: 0; }
/* 2026-11-04 再生中は画面を押すと止める・押すと再生（下の操作の帯の上まで）＋真ん中にふわっと出るアイコン */
.ow-video__tap { position: absolute; left: 0; right: 0; top: 0; bottom: 64px; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ow-video__tap[hidden] { display: none; }
.ow-video__flash, .tx-video__flash { position: absolute; left: 50%; top: 45%; z-index: 4; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; }
.ow-video__flash.is-on, .tx-video__flash.is-on { animation: vflash .7s ease-out both; }
.ow-video__flash.is-pause::before, .ow-video__flash.is-pause::after, .tx-video__flash.is-pause::before, .tx-video__flash.is-pause::after { content: ''; position: absolute; top: 22px; width: 7px; height: 24px; border-radius: 2px; background: #fff; }
.ow-video__flash.is-pause::before, .tx-video__flash.is-pause::before { left: 24px; } .ow-video__flash.is-pause::after, .tx-video__flash.is-pause::after { right: 24px; }
.ow-video__flash.is-play::before, .tx-video__flash.is-play::before { content: ''; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
@keyframes vflash { 0% { opacity: 0; transform: scale(.85); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .ow-video__flash.is-on, .tx-video__flash.is-on { animation-duration: .01s; } }

/* 11/9 手順の場面の絵（ChatGPT で作成・決定表 #260）：小さなアイコンの札の代わり */
.ow-tl__case--one.ow-tl__case--scene { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: center; }
.ow-tl__scene, .ow-tl__two img.ow-tl__scene { display: block; width: 100%; height: auto; margin: 0; object-fit: contain; border-radius: 0; mix-blend-mode: multiply; }
.ow-tl__two .ow-tl__case--stack { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ow-tl__two .ow-tl__case--stack .ow-tl__scene { max-width: 300px; }
@media (max-width: 900px) { .ow-tl__case--one.ow-tl__case--scene { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; } }
@media (max-width: 620px) { .ow-tl__case--one.ow-tl__case--scene { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ow-tl__scene, .ow-tl__two img.ow-tl__scene { max-width: 320px; } }
.ow-tl__two .ow-tl__case--stack .ow-tl__scene { width: 300px; max-width: 100%; height: 190px; object-fit: contain; object-position: left bottom; }