@charset "UTF-8";
/* =============================================================================
propally_lp02 stylesheet

propally_lp/webpage/css/style.css の「リセット / 変数 / ブレークポイント / CTA まわり」を
踏襲したうえで、Figma（fileKey: VkfW6w22dYs7L1aZAafx5q / root 220:590）の SP デザインを反映。

- デザイン幅は 390px。html の font-size を 2.5641vw（= 390px 幅で 10px）にして
  1rem = 10px（デザイン上の px 値 ÷ 10）で組んでいる
- PC は SP デザイン（390px）を中央寄せし、左右の余白に propally_lp 由来のサイド背景・
  アンカーナビ・サイド CTA を敷く（ファイル末尾の PC 用ブロックを参照）
規約: インデント2スペース / UTF-8 / クラス名は cta- , cv- , js- プレフィックスを踏襲
========================================================================== */

/* =============================================================================
Reset (Eric Meyer's reset ベース。propally_lp と同じ)
========================================================================== */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
q,
s,
small,
strong,
sub,
sup,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a:hover {
  opacity: 0.8;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.wrapper {
  position: relative;
}

/* =============================================================================
Variables（Figma の Variables / カラートークンを反映）
  text        : #333333
  primary     : #2476E4
  bg-main     : #F7FAFF
========================================================================== */
:root {
  --primary-color: #2476e4;
  --main-color: #2476e4;
  --secondary-color: #f5da6b;
  --text-color: #333333;
  --bg-main: #f7faff;
  --ink-color: #333333;
  --card-bg: #fbfbfb;
  --muted-color: #7a7a7a;
}

/* =============================================================================
Image
========================================================================== */
a {
  display: block;
  cursor: pointer;
  color: inherit;
}

picture,
figure {
  display: block;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* =============================================================================
Basic style
========================================================================== */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* 日本語の折り返し方針。
   単語・文節の途中で切れる word-break: break-all は使わず、
   禁則処理を強めた line-break: strict で組む。
   長い英数字（URL 等）だけは overflow-wrap: break-word ではみ出しを防ぐ
   （break-word は min-content 幅に影響しないので flex/grid のレイアウトを崩さない） */
body {
  position: relative;
  overflow-x: hidden;
  color: var(--text-color);
  font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  /* 紙テクスチャ（Figma: v602-nunoon-33-rippednotes / タイル 334x220 / opacity 50%）は
     セクション単位ではなく "ページ全体" に1回だけ敷く。
     こうするとタイルの位相が要素高に依存しなくなり、セクション境界や divider の前後で
     柄が途切れない（セクションごとに敷くと ::before の inset:0 が要素ごとに位相をリセットする）。
     opacity 50% は白のオーバーレイ1枚で表現している。擬似要素を使わないので重なり順の管理が不要。
     background-attachment は iOS Safari で不具合が出るため使わない。
     青の塗りを持つセクション（section2 / 4 / 6）と白のセクション（.cta / .cv / .footer）は
     不透明な背景でこのテクスチャを覆い隠す。 */
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url("../images/common/paper-texture.webp");
  background-repeat: repeat, repeat;
  background-size: auto, 33.4rem 22rem;
  background-position: 0 0, 0 0;
}

/* =============================================================================
Accessibility
========================================================================== */
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

.hidden {
  display: none;
}

/* =============================================================================
Breakpoint / font-size
デザイン幅 390px。1rem = 10px（390px 時）になるよう html の font-size を vw で指定。
PC は SP デザインを等倍（1rem = 10px）で中央寄せする。
========================================================================== */
@media screen and (max-width: 767px) {
  html {
    font-size: 2.5641025641vw;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 10px;
  }
}

/* =============================================================================
Responsive helper
========================================================================== */
.inner {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
  /* PC ではスマホ幅（デザイン幅）のカラムを中央寄せする。
     背景色は持たせない（body の紙テクスチャを透過させるため） */
  .main {
    width: 390px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    min-height: 100vh;
  }
  .footer {
    width: 390px;
    margin: 0 auto;
  }
}

/* =============================================================================
共通パーツ
========================================================================== */
/* 紙テクスチャのセクション（section3 / section5 / section7）。
   テクスチャ自体は body に敷いてあるので、ここでは背景を持たず透過させる。
   （以前はセクションごとに ::before でタイルしていたため、境界で柄の位相がリセットされていた） */
.paper-bg {
  position: relative;
  overflow: hidden;
}

.paper-bg > .inner {
  position: relative;
  z-index: 1;
}

/* セクション区切り（三角形）。Figma 220:764 / 220:839 / 220:891 / 220:1072
   ルート font-size が 2.5641vw のビューポート依存なので、幅によって 1rem が
   9.987px のような小数になり、6.8rem の要素高も端数 px になる。
   要素境界でブラウザが 0.x px を描き切れず下地が細い線として透けるため、
   上下 1px ずつ隣接セクションへ食い込ませて原理的に潰している。
   三角の頂点位置は 1px の伸縮なので実質変わらない。

   三角以外の地は背景を持たせず透過させ、body の連続テクスチャをそのまま見せる。
   これで隣接セクションとの間に柄の継ぎ目が出ない。
   margin の -1px は「青×青」の境界（下記の上辺/下辺いっぱいの側）で
   端数由来の白い線が出るのを防ぐために残している。
     220:764  上=section2(青) / 下=section3(テクスチャ) → 青は上辺いっぱい
     220:839  上=.cta(白)     / 下=section4(青)         → 青は下辺いっぱい
     220:891  上=section4(青) / 下=section5(テクスチャ) → 青は上辺いっぱい
     220:1072 上=section6(青) / 下=section7(テクスチャ) → 青は上辺いっぱい */
.divider {
  position: relative;
  height: calc(6.8rem + 2px);
  margin-top: -1px;
  margin-bottom: -1px;
  overflow: hidden;
}

.divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--primary-color);
}

/* Figma 220:764 / 220:891 : 上辺 → 右下へ落ちる三角（青は上・右） */
.divider--blue-top-right::after {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Figma 220:839 : 青は下・左 */
.divider--blue-bottom-left::after {
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Figma 220:1072 : 青は上・左 */
.divider--blue-top-left::after {
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 画像トリミング用ヘルパー（Figma 上でフレームにクリップされている画像を再現する）。
   書き出しは元画像そのままのため、Figma の表示比率をそのまま % で当てている */
.crop {
  position: relative;
  display: block;
  overflow: hidden;
}

.crop img {
  position: absolute;
  max-width: none;
}

/* =============================================================================
section1 : ファーストビュー / Figma 220:591
========================================================================== */
.section1 {
  position: relative;
  background-color: var(--bg-main);
}

.fv-visual {
  position: relative;
  height: 73.5rem;
  overflow: hidden;
}

/* Figma 220:591 の全面背景画像（斜めに並んだアプリ画面を1枚に統合したもの）。
   FV フレームと同じ比率（390:735）なので object-fit: cover で敷き込む。
   最初の子要素かつ z-index:0 なので、後続の絶対配置要素（z-index:auto/1/2/3）より背面になる */
.fv-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.fv-logo {
  position: absolute;
  left: 1.4rem;
  top: 1.5rem;
  width: 7.2rem;
  height: 2.2rem;
}

.fv-title {
  position: absolute;
  top: 12.6rem;
  left: calc(50% + 0.7rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.6rem;
  white-space: nowrap;
  font-weight: 900;
  color: var(--text-color);
}

.fv-title-sub {
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: 0.14rem;
}

.fv-title-main {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1;
}

.fv-title-group {
  display: flex;
  align-items: flex-end;
}

.fv-title-em {
  font-size: 4rem;
  letter-spacing: 0.2rem;
  color: var(--primary-color);
}

.fv-title-small {
  font-size: 2.8rem;
  letter-spacing: 0.14rem;
}

.fv-catch {
  position: absolute;
  left: 16.44rem;
  top: 45.25rem;
  transform: translate(-50%, -50%) rotate(50.64deg);
  white-space: nowrap;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: #8b8b8b;
}

/* 月桂樹の枠と中身は awards-1 / awards-2 に一体で書き出されている */
.fv-award {
  position: absolute;
  top: 24.2rem;
  width: 13.8rem;
  height: 6.3784rem;
}

.fv-award--dl {
  left: 8.3rem;
}

.fv-award--no1 {
  left: 23.2rem;
}

.fv-points {
  position: absolute;
  left: 21.6rem;
  top: 37.9rem;
  width: 17.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2rem;
  z-index: 1;
}

.fv-point {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1.2rem 0.4rem 0.8rem;
  background-color: var(--primary-color);
  border-radius: 0.4rem 0 0 0.4rem;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.fv-point img {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
}

.fv-character {
  position: absolute;
  left: 21.1rem;
  top: 32.4rem;
  width: 7.3rem;
  height: 6.1rem;
  z-index: 2;
}

.fv-character img {
  left: -33.83%;
  top: -69.09%;
  width: 168.42%;
  height: 203.64%;
}

/* Figma 226:145「SubText」。枠は Union（226:144 / 240x40）だが、
   本体は角丸矩形＋右端ピル、左下に尻尾が伸びるだけの形なので画像化せず CSS で再現する。
   Union のパス: 本体 240x29（左上 r=2.71 / 右端 r=14.5）＋ x0-10 / y29-40 の尻尾（下端 r=5） */
.fv-badge {
  position: absolute;
  left: 50%;
  top: 6rem;
  transform: translateX(-50%);
  width: 24rem;
  height: 2.9rem;
  padding: 0.4rem 0 0 1.6rem;
  background-color: var(--primary-color);
  border-radius: 0.271rem 1.45rem 1.45rem 0;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.112rem;
  white-space: nowrap;
  z-index: 3;
}

/* Union 左下の吹き出しの尻尾（幅 10px / 高さ 11px / 下端は半円） */
.fv-badge::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 1rem;
  height: 1.1rem;
  background-color: var(--primary-color);
  border-radius: 0 0 0.5rem 0.5rem;
}

/* =============================================================================
section2 : プロパリーでできること 3項目 / Figma 220:679
========================================================================== */
.section2 {
  background-color: var(--primary-color);
  padding: 4rem 0;
}

.section2-title {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  text-align: center;
  color: #ffffff;
}

.feature-list {
  margin-top: 2.4rem;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.feature-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 7.1rem;
}

.feature-item-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  z-index: 2;
}

/* Figma 220:684 / 220:716 / 220:741 のテキスト開始位置は カード左端 +32px（= .feature-list の
   左padding 20px から見て 49px）。行折り返しの基準幅は 285px（220:716 の w-[285px]）なので、
   右 padding を詰めて本文の実測幅（1行目 285.6px）が確実に収まるようにしている。
   ここが 285px を割ると 1 行想定の 220:684 が 2 行になり、末尾 1 文字だけが折り返される。

   本文は必ず単一の <span> でくるむこと。
   .feature-item-text は縦中央寄せのために display:flex にしているので、
   直下に地のテキストと <em> を並べると 1 つずつ別の flex item に分割され、
   「ネットの / 物件でも」「簡単シミュ / レーション」のように断片ごとに折り返されてしまう */
.feature-item-text {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
  margin-left: 1.7rem;
  min-height: 7.1rem;
  padding: 1rem 1rem 1rem 3rem;
  background-color: var(--card-bg);
  border: 0.2rem solid var(--ink-color);
  border-radius: 0.8rem;
  box-shadow: 0.2rem 0.2rem 0 0 var(--ink-color);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: var(--text-color);
}

.feature-item-text em {
  font-style: normal;
  color: var(--primary-color);
}

/* =============================================================================
section3 : 機能紹介 / Figma 220:785
========================================================================== */
.section3 {
  padding: 2rem 2rem 4rem;
}

.section3 .inner {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

/* Figma 220:807 Main Card。吹き出し枠 SVG の上に文言テキストを重ねる */
.intro-card {
  position: relative;
  width: 35rem;
  max-width: 100%;
  height: 15.9rem;
  overflow: hidden;
}

.intro-bubble {
  position: absolute;
}

.intro-bubble > img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
}

.intro-bubble-text {
  position: absolute;
  white-space: nowrap;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: var(--text-color);
}

.intro-bubble--1 {
  left: 0.3rem;
  top: 0.2rem;
  width: 28.2rem;
  height: 8.9rem;
  z-index: 0;
}

.intro-bubble--1 > img {
  width: 28.2rem;
  height: 8.9rem;
}

.intro-bubble--1 .intro-bubble-text {
  left: 14.255rem;
  top: 3.4227rem;
  transform: translate(-50%, -50%) rotate(-4.6deg);
}

.intro-bubble--2 {
  left: 3.87rem;
  top: 7.9rem;
  width: 17.2rem;
  height: 6.4rem;
  z-index: 2;
}

.intro-bubble--2 > img {
  width: 17.2rem;
  height: 6.4rem;
}

.intro-bubble--2 .intro-bubble-text {
  left: 8.566rem;
  top: 3.216rem;
  transform: translate(-50%, -50%) rotate(6.26deg);
}

.intro-character {
  position: absolute;
  left: 20.9rem;
  top: 3.8rem;
  width: 12.1rem;
  height: 12.1rem;
  z-index: 1;
}

.intro-character img {
  left: -29.75%;
  top: -29.75%;
  width: 164.46%;
  height: 164.46%;
}

.intro-lead {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.12rem;
  color: var(--text-color);
}

.intro-lead em {
  font-style: normal;
  font-size: 3.2rem;
  letter-spacing: 0.16rem;
  color: var(--primary-color);
}

.intro-desc {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.08rem;
  color: var(--text-color);
}

.quote {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.1rem;
  color: var(--primary-color);
}

.quote--gray {
  color: #757575;
}

.fcard {
  background-color: #ffffff;
  border: 0.2rem solid var(--ink-color);
  border-radius: 0.8rem;
  box-shadow: 0.2rem 0.2rem 0 0 var(--ink-color);
  overflow: hidden;
}

.fcard-head {
  padding: 1.6rem 2rem;
  background-color: var(--primary-color);
  border-bottom: 0.2rem solid var(--ink-color);
  text-align: center;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1rem;
}

.fcard-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 2.4rem;
}

.fcard-lead {
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 0.1rem dashed #c9c9c9;
}

.fcard-lead p {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: var(--text-color);
}

.fcard-lead .quote {
  font-size: 1.8rem;
}

.fcard-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.6rem;
  width: 100%;
}

.fcard-row--center {
  align-items: center;
}

.fcard-row-img {
  flex-shrink: 0;
}

.fcard-row-img--writing {
  width: 6.8rem;
  height: 8.7rem;
}

.fcard-row-img--writing img {
  left: -45.28%;
  top: -21.32%;
  width: 185.85%;
  height: 144.85%;
}

.fcard-row-img--simulation {
  width: 9rem;
  height: 7.7rem;
}

.fcard-row-img--simulation img {
  left: -17.24%;
  top: -20%;
  width: 127.16%;
  height: 147.5%;
}

.fcard-row-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.07rem;
  color: var(--text-color);
}

/* 書き出しは端末モックの全体像（1312x2656）。デザインでは上部だけを表示する */
.fcard-mock {
  width: 30.2rem;
  max-width: 100%;
  height: 32rem;
}

/* カード1（投資スタイル診断 / Figma 220:814）: iphone-mockup-1.webp のトリミング。
   2026-07-28 に一度「投資力診断」へ差し替えて未使用になったが、
   2026-08-05 に「投資スタイル診断」へ戻したため再び有効 */
.fcard-mock--1 img {
  left: -2.26%;
  top: 0;
  width: 104.52%;
  height: 199.69%;
}

.fcard-mock--2 img {
  left: 0;
  top: 0.14%;
  width: 100%;
  height: 191.05%;
}

/* =============================================================================
section4 : Q&A / Figma 220:862（Figma に開閉指定がないため静的表示）
========================================================================== */
.section4 {
  background-color: var(--primary-color);
  padding: 4rem 2rem 6.4rem;
}

.section4 .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

.qa-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 100%;
  height: 8.2rem;
}

.qa-balloon {
  position: relative;
  flex-shrink: 0;
  width: 16.5rem;
  height: 7.45rem;
}

.qa-balloon img {
  position: absolute;
  left: 0;
  top: 0;
  width: 16.5rem;
  height: 7.9rem;
  max-width: none;
}

.qa-balloon-text {
  position: absolute;
  left: 1.65rem;
  top: 1.9rem;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: var(--text-color);
  white-space: nowrap;
}

.qa-head-text {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  color: #ffffff;
  white-space: nowrap;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  width: 100%;
}

/* FAQ カード。閉 = Figma 233:156 ほか（350x72）/ 開 = Figma 226:960 ほか。
   開閉は <details>/<summary> の標準機能で行い JavaScript は使わない。
   カードの意匠（枠・影・角丸・余白）は開閉で変わらないので <details> 側に持たせ、
   <summary>（.qa-row）は質問行のレイアウトだけを担当する */
/* Figma の枠線は stroke-align: inside なので、padding 16px は枠の外側から測られている。
   CSS で border を足すとその分だけ背が高くなる（閉じた状態が 72px にならない）ため、
   padding は 16px - 枠 2px = 14px にして合計を Figma と一致させる。
   これで閉 = 40(質問行) + 14*2 + 2*2 = 72px、内容幅 = 350 - 28 - 4 = 318px（Figma 317px）になる。
   子の間隔は gap ではなく .qa-answer の margin-top で取る。
   gap にすると閉じている間も ::details-content が flex アイテムとして数えられ、
   10px 分だけ背が高くなってしまうため */
.qa-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.4rem;
  background-color: var(--primary-color);
  border: 0.2rem solid #ffffff;
  border-radius: 0.8rem;
  -webkit-filter: drop-shadow(0.2rem 0.2rem 0 #ffffff);
  filter: drop-shadow(0.2rem 0.2rem 0 #ffffff);
}

/* summary をフレックスにするとデフォルトの三角は消えるが、
   Safari は ::-webkit-details-marker が残るので両方潰す */
.qa-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 4rem;
  list-style: none;
  cursor: pointer;
}

.qa-row::-webkit-details-marker {
  display: none;
}

.qa-row-main {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}

/* Figma 226:963「Frame 2612903」= 白丸＋Q のグリフを含む 40x40 の1アセット */
.qa-row-icon {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
}

/* letter-spacing は 0。閉じた状態（Figma 233:176）は tracking 0.7px だが、
   開いた状態（Figma 226:987）は tracking なしで、同じ文字列が両方とも1行に収まっている。
   0.7px を入れると「不動産投資？しつこく営業されそう」の送りが 235.2px となり
   使える幅 234px を 1.2px 超えて2行に折り返してしまい、どちらの Figma とも一致しなくなるため
   開いた状態（＝アコーディオンの正）に合わせて 0 にしている */
.qa-row-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.5;
  color: #ffffff;
}

/* 開閉トグル。閉 = Figma 233:161「add_2」(プラス) / 開 = Figma 226:966「remove」(マイナス)。
   切り替えは details[open] だけで行う（JS なし） */
.qa-row-toggle {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("../images/qa/toggle-add.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.qa-item[open] .qa-row-toggle {
  background-image: url("../images/qa/toggle-remove.svg");
}

/* 答え。Figma 226:970 ほか（14px / 白 / line-height 1.5、1段落目のみ Black）。
   区切り線 Figma 226:969「Line 28」は白の点線（stroke-width 2 / dasharray 0.1 4）なので
   画像を使わず border-top で再現する。
   margin-top 1rem と padding-top 1rem で Figma の「質問行→線→答え」各 10px を再現する。
   閉じている間に高さを持たないよう、明示的に display:none にしておく
   （ブラウザによって ::details-content が border/padding 分の箱を残すため） */
.qa-item:not([open]) .qa-answer {
  display: none;
}

.qa-answer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 0.2rem dotted #ffffff;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
}

.qa-answer-lead {
  font-weight: 900;
}

/* =============================================================================
section5 : 実績・レビュー / Figma 220:914
下端の青い三角（Figma 220:936 Polygon 14）は ::after で表現する
========================================================================== */
.section5 {
  padding: 6.4rem 2rem 4rem;
}

/* Figma 220:936「Info Container」（390x356 / section5 の下端に密着）内の
   220:958「Polygon 14」を再現する。
   Polygon のパス（Figma の描画どおり）は
     (0, 64.5) → (390, -3.5) → (390, 356) → (0, 356)
   で、青は斜辺の "下" 側。斜辺は左が低く右が高い（右上がり）。
   1rem = 10px なので 64.5px = 6.45rem / -3.5px = -0.35rem をそのまま使える。
   斜辺は x = 94.85% で y=0 に達し、そこから右は上辺いっぱいまで青になる。
   （旧実装は polygon(0 0, 100% 100%, 0 100%) で斜辺の傾きが左右逆だった） */
.section5::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35.6rem;
  background-color: var(--primary-color);
  -webkit-clip-path: polygon(0 6.45rem, 100% -0.35rem, 100% 100%, 0 100%);
  clip-path: polygon(0 6.45rem, 100% -0.35rem, 100% 100%, 0 100%);
  z-index: 0;
}

.section5 .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.proof-head {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
}

.proof-title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.75;
  letter-spacing: 0.12rem;
  color: var(--text-color);
}

.proof-title em {
  font-style: normal;
  font-size: 3.2rem;
  letter-spacing: 0.16rem;
  color: var(--primary-color);
}

.proof-sub {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.08rem;
  color: var(--text-color);
}

.proof-character {
  width: 24.3rem;
  height: 12rem;
}

.proof-character img {
  left: -19.4%;
  top: -23.33%;
  width: 136.74%;
  height: 155.83%;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}

.stats-list {
  display: flex;
  gap: 0.8rem;
}

.stats-item {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 8.9rem;
  padding: 2rem 1.2rem;
  background-color: #f7f7f7;
  border: 0.2rem solid var(--ink-color);
  border-radius: 1.2rem;
  -webkit-filter: drop-shadow(0.2rem 0.2rem 0 var(--ink-color));
  filter: drop-shadow(0.2rem 0.2rem 0 var(--ink-color));
}

.stats-num {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  color: var(--primary-color);
  white-space: nowrap;
}

.stats-num-l {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

.stats-num-m {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1rem;
}

.stats-unit {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.07rem;
}

.stats-unit-s {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.07rem;
  color: var(--text-color);
}

.stats-label {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.07rem;
  color: var(--text-color);
  white-space: nowrap;
}

.stats-note {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06rem;
  text-align: right;
  color: var(--muted-color);
}

.reviews {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  padding: 1.6rem 0;
}

.reviews-title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.12rem;
  text-align: center;
  color: var(--primary-color);
}

/* レビューカードは横スクロール（外部ライブラリは使わない） */
.reviews-list {
  display: flex;
  gap: 2rem;
  margin: 0 -2rem;
  padding: 0.4rem 2rem 1.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews-list::-webkit-scrollbar {
  display: none;
}

.review {
  flex: 0 0 32.4rem;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.6rem;
  background-color: #ffffff;
  border: 0.2rem solid var(--ink-color);
  border-radius: 1.2rem;
  -webkit-filter: drop-shadow(0.2rem 0.2rem 0 var(--ink-color));
  filter: drop-shadow(0.2rem 0.2rem 0 var(--ink-color));
}

.review-head {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.review-avatar {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #d9d9d9;
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-profile {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--text-color);
}

.review-name {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07rem;
}

.review-name span {
  display: block;
  font-size: 1.4rem;
}

.review-career {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06rem;
}

.review-part {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Figma の Line 28（レビューヘッダー下の点線）は CSS で表現する */
.review-head + .review-part {
  padding-top: 1.6rem;
  border-top: 0.1rem dashed #c9c9c9;
}

.review-part-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: var(--primary-color);
}

.review-part-text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.07rem;
  color: var(--text-color);
}

/* レビューの横スクロール用ナビ（PC のみ）。
   SP はスワイプできるので出さない。`.pc-only` は使っていない —
   `.pc-only` は index.html のクリティカル CSS 側（style.css より後ろ）で
   display を決めているため、ここで display: flex を指定しても打ち消されるため。 */
.reviews-nav {
  display: none;
}

@media screen and (min-width: 768px) {
  .reviews-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
  }
}

/* ナビは .section5::after の青帯の上に載る。アイコン（expand-circle-right.svg）は
   青一色なので、そのまま置くと青地に埋もれて見えない。
   .cta-wp-btn と同じ「白地 + ink の影 + 青アイコン」の意匠に揃えて視認性を確保する
   （影の量はすぐ上のレビューカードに合わせて 0.2rem）。 */
.reviews-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px のクリック領域を確保する */
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0.2rem 0.2rem 0 var(--ink-color);
  cursor: pointer;
  transition: opacity 0.3s;
}

.reviews-nav-btn img {
  width: 2.4rem;
  height: 2.4rem;
}

/* 左矢印は右矢印アイコンの反転で作る（アセットを増やさない） */
.reviews-nav-btn--prev img {
  transform: rotate(180deg);
}

.reviews-nav-btn:hover {
  opacity: 0.8;
}

.reviews-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.reviews-nav-btn:focus-visible {
  outline: 0.2rem solid var(--ink-color);
  outline-offset: 0.2rem;
}

.reviews-note {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

/* =============================================================================
section6 : POINT 訴求 / Figma 220:1044
========================================================================== */
/* section5 の三角（.section5::after）とこのセクションの塗りはどちらも --primary-color だが、
   ルート font-size が vw 依存で section5 の高さが端数 px になるため、
   境界に body の紙テクスチャが 1px の線として透ける。
   .divider と同じ考え方で 1px 分だけ上に食い込ませて潰す
   （section5 は overflow:hidden なので ::after 側は伸ばせない）。 */
.section6 {
  background-color: var(--primary-color);
  margin-top: -1px;
  padding: calc(4rem + 1px) 2rem 4rem;
}

.section6 .inner {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.point-head {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.point-title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.12rem;
  color: #ffffff;
}

/* Figma 220:1046「Rectangle 9426」(99x45) を「営業」の背後に敷く。
   以前は <img> を left/top の決め打ちで絶対配置していたため、
   フォント（Noto Sans JP のフォールバック等）が変わると文字とマーカーがずれた。
   マーカーは対象文字を包む span の ::before として、
   span の中心に揃える（left/top 50% + translate(-50%,-50%)）ことで
   フォントメトリクスに依存せず常に文字の中央に重なるようにしている。
   span 自身に文字サイズ（3.2rem）を持たせ、マーカーの寸法も em 基準
   （99/32 = 3.09375em / 45/32 = 1.40625em）にしてあるので、
   文字サイズを変えてもマーカーが追従する。 */
.point-title-mark {
  position: relative;
  display: inline-block;
  font-size: 3.2rem;
  letter-spacing: 0.16rem;
  /* マーカー（::before）は文字幅より片側 0.5em ほど広いので、
     そのままだと前後の「でも、」「は来ない。」に接触する。
     左は読点「、」のアキがあるぶん詰め、右を広めに取ると見た目が揃う。
     em 指定なので文字サイズが変わっても比率を保つ */
  margin: 0 0.4em 0 0.2em;
}

.point-title-mark::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.09375em;
  height: 1.40625em;
  background-image: url("../images/point/rectangle-9426.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.point-title-mark em {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--primary-color);
}

.point-sub {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.08rem;
  color: #ffffff;
}

/* Figma 229:1012「matchimage 1」。端末モック・白いベール・吹き出し・キャラクターが
   1枚の画像に統合されたので、個別配置と .point-mock-veil の CSS 再現は撤去した。
   Figma では 220:1044（padding 20px / align-items:flex-start）の子なので左寄せのまま置く */
.point-mock {
  display: block;
  width: 34.7rem;
  max-width: 100%;
  height: 70rem;
  object-fit: cover;
}

.point-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.point-badge {
  position: relative;
  z-index: 0;
  margin-bottom: -1.2rem;
  padding: 1rem 2rem 1.8rem;
  background-color: #ffffff;
  border-radius: 0.8rem;
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07rem;
}

.point-card {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.9rem 1.6rem;
  background-color: var(--primary-color);
  border: 0.2rem solid #ffffff;
  border-radius: 0.8rem;
  box-shadow: 0.2rem 0.2rem 0 0 #ffffff;
}

.point-card-title {
  padding-bottom: 1rem;
  border-bottom: 0.1rem dashed rgba(255, 255, 255, 0.7);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: #ffffff;
}

.point-card-text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.07rem;
  color: #ffffff;
}

/* =============================================================================
section7 : STEP / Figma 220:1095
========================================================================== */
.section7 {
  padding: 4rem 2rem;
}

.section7 .inner {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.steps-head {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.steps-title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.12rem;
  color: var(--text-color);
}

.steps-title em {
  font-style: normal;
  font-size: 3.2rem;
  color: var(--primary-color);
}

.steps-sub {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.08rem;
  color: var(--text-color);
}

.steps-list {
  width: 34.3rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2.4rem 1.6rem 1.6rem;
  background-color: #ffffff;
  border: 0.2rem solid var(--ink-color);
  border-radius: 0.8rem;
  -webkit-filter: drop-shadow(0.2rem 0.2rem 0 var(--ink-color));
  filter: drop-shadow(0.2rem 0.2rem 0 var(--ink-color));
}

.step-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.step-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background-color: var(--primary-color);
  border-radius: 0.8rem;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08rem;
}

.step-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  color: var(--text-color);
}

.step-text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.07rem;
  color: var(--text-color);
}

.step-character {
  position: absolute;
  z-index: 2;
}

.step-character--1 {
  left: 25.8rem;
  top: -5.5rem;
  width: 8.2rem;
  height: 8.7rem;
}

.step-character--1 img {
  left: -32.45%;
  top: -28.24%;
  width: 168.51%;
  height: 158.82%;
}

.step-character--2 {
  left: 25.8rem;
  top: -4.7rem;
  width: 7.8rem;
  height: 8.7rem;
}

.step-character--2 img {
  left: -42.08%;
  top: -29.94%;
  width: 187.01%;
  height: 167.66%;
}

/* Figma 229:1013（220:1146 のカレンダーと 220:1147 のキャラクターを束ねたグループ / 121x87）。
   2枚重ねをやめて1枚の書き出しに統合した。
   left/top は Figma のグループ座標（208 / -45）をそのまま使う。
   子ノード側の座標（210 / -31・244 / -43）は .step のボーダー外側基準なので、
   CSS の絶対配置（パディングボックス基準）にそのまま入れると右下へ 2px ずれる
   ＝ 実レンダリングで Figma と 2px 差が出ることを確認済み。 */
.step-character--3 {
  left: 20.8rem;
  top: -4.5rem;
  width: 12.1rem;
  height: 8.7rem;
}

/* STEP をつなぐ点線（Figma: Step 1 Line / Step 2 Line）は CSS で表現する */
.step-line {
  width: 8rem;
  height: 8rem;
  background-image: radial-gradient(circle, var(--ink-color) 0.3rem, rgba(0, 0, 0, 0) 0.31rem);
  background-size: 1.6rem 1.6rem;
  background-position: 1.8rem 0.6rem;
  background-repeat: repeat-y;
}

.steps-footer {
  width: 35rem;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.1rem;
  padding: 1.6rem;
  background-color: var(--primary-color);
  border-radius: 0.8rem;
}

.steps-footer-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09rem;
  text-align: center;
  color: #ffffff;
}

.steps-footer-text {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.07rem;
  color: #ffffff;
}

.steps-options {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  width: 100%;
}

.steps-option {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem;
  border: 0.2rem solid #ffffff;
  border-radius: 0.8rem;
}

.steps-option img {
  position: absolute;
  left: -1rem;
  top: -0.9rem;
  width: 3.2rem;
  height: 3.2rem;
}

.steps-option p {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
}

/* =============================================================================
CTA（propally_lp の .cta 系を踏襲しつつ Figma 220:1164 のストアバッジ帯を適用）
ストアボタンは detect.js が OS 判定して .is-visible を付与する。
PC では .cta 自体を非表示にし、detect.js が .pc-register-btn を差し込む。
========================================================================== */
.cta {
  background: #ffffff;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* フローティングCTA / Figma 220:1230「Floating」（390x103.44）
   SP は上段が青いピル型ラベル、下段がストアバッジ2つ（フッター上 CTA 220:1164 も同じ2枚構成）。
   高さ内訳: padding-top 8 + ラベル 20 + gap 7 + バッジ 44.444 + padding-bottom 24 = 103.44px。
   PC は Figma にデザインが無いため、同じ枠のままバッジを .pc-register-btn 1つに置き換える
   （高さは 8 + 20 + 7 + 56 + 24 = 115px。独自の意匠は足していない）。
   クラス名 .cta.fixed は main.js が表示制御に使うため変更しないこと */
.cta.fixed {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(247, 250, 255, 0.85);
  -webkit-backdrop-filter: blur(0.2rem);
  backdrop-filter: blur(0.2rem);
  padding: 0.8rem 2rem 2.4rem;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.6s ease-out;
}

/* detect.js は UA だけで PC 判定するため、デスクトップ UA でウィンドウを SP 幅にすると
   フローティングCTA の .cta-btns にも .pc-register-btn（56px の大きな白ボタン）が差し込まれ、
   ストアバッジはインライン style で display:none にされてしまう。
   その結果 Figma 220:1230（88px / ストアバッジ2枚）と全く違う見た目・高さになる。
   フローティングCTA（220:1230）とフッター上CTA（220:1164）は SP 専用かつ
   Figma ではストアバッジ2枚で固定なので、SP レイアウト時はバッジを必ず出す
   （detect.js は変更禁止のため CSS で打ち消す）。
   計測フック（id / data-sp-store-button / data-cta-group）は DOM に残るので影響なし。 */
@media screen and (max-width: 767px) {
  .cta.fixed .pc-register-btn,
  .cta-bar .pc-register-btn {
    display: none !important;
  }
  .cta.fixed [data-sp-store-button],
  .cta-bar [data-sp-store-button] {
    display: block !important;
  }
}

/* Figma 220:1231 : 「まずは無料で試してみませんか？」の青いピル型ラベル */
.cta-floating-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.6rem;
  background-color: var(--primary-color);
  border-radius: 40rem;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  /* Figma 220:1232 は line-height なし（= 1.0）。1.5 にするとラベルが 26px になり
     フローティング CTA 全体が 6px 高くなる */
  line-height: 1;
  letter-spacing: 0.06rem;
  white-space: nowrap;
}

.cta.open {
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  transform: translateY(0);
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

/* Figma 220:1164 : 「登録無料。物件の比較・相談までアプリで完結」＋ストアバッジ */
.cta-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 2rem;
}

.cta-bar-lead {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.07rem;
  text-align: center;
  color: var(--text-color);
}

.cta-bar-lead strong {
  font-weight: 700;
  color: var(--primary-color);
}

.cta-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  /* Figma 220:1233 / 238:746 のバッジ間隔（24px） */
  gap: 2.4rem;
}

.cta-btns--single {
  width: 100%;
}

/* ストアバッジ。Figma 238:748 / 238:766 の表示サイズ（150x44.444）。
   フローティング CTA（220:1233）とフッター上 CTA（238:746）で共通 */
.cta-btn01,
.cta-btn02 {
  width: 15rem;
  height: 4.4444rem;
}

.cta-btn01 img,
.cta-btn02 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* PC（768px 以上）の CTA 仕様:
   フローティング CTA・途中の CTA・フッター上 CTA とも「Web 登録ボタン1つ」に揃える。
   （SP はフッター上 CTA / フローティング CTA がストアバッジ2枚、途中の CTA がボタン1つ）
   以前は .cta 自体を display:none にしていたが、PC でもフローティング CTA を出すため撤廃した。
   ストアバッジ（[data-sp-store-button]）は PC では出さず、
   detect.js が .cv-btns / .cta-btns に差し込む .pc-register-btn（Web登録ボタン）1つだけを見せる。
   要素自体は DOM に残るので計測フック（data-sp-store-button / id）は維持される。 */
@media screen and (min-width: 768px) {
  [data-sp-store-button] {
    display: none !important;
  }
  /* PC は左右にサイド背景（.side-background）が出るため、フローティング CTA の帯を
     全幅にすると背景画像の上を横切ってしまう。.main / .footer と同じ 390px 中央寄せにする */
  .cta.fixed {
    width: 390px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
  }
  .cta.fixed.open {
    transform: translateX(-50%) translateY(0);
  }
}

/* 「Web版はこちらから」（.cta-note-text）は Figma 220:1164 に存在しないため削除した。
   detect.js が PC 時に .cta-note-text を隠す処理は空振りするだけで副作用はない。 */

/* 単独配置のインラインCTA（js-cta-floating-common でOS別リンクに切り替わる）
   Figma 220:882 / 220:1035 の「アプリで試してみる」ボタン */
.cta-wp-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 30rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.6rem;
  background-color: #ffffff;
  border-radius: 20rem;
  /* Figma 220:882 の影はボタンの角丸矩形にのみ掛かる。
     drop-shadow だと中の矢印アイコンにも影が付いてしまうため box-shadow を使う */
  box-shadow: 0.3rem 0.4rem 0 var(--ink-color);
}

.cta-wp-btn span {
  flex: 1 0 0;
  min-width: 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08rem;
  color: var(--primary-color);
}

.cta-wp-btn img {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
}

/* =============================================================================
CV（PC 向け QR ブロック）のスタイルは、対応する section.cv を削除したため撤去した。
削除理由: Figma の LP（220:590）は steps(220:1095) → CTA(220:1164) → Footer(220:1212) の順で
フッター手前の CTA は 220:1164 の1つだけ。QR ブロックは propally_lp からの流用だった。
detect.js / main.js に残る .cv-btns / .cv-qr-wrapper / .cv-qr 参照はすべて
「見つからなければ何もしない」ガード付きなので、DOM から消しても副作用はない。
========================================================================== */

/* =============================================================================
PC 向け Web 登録ボタン（detect.js が生成して .cv-btns / .cta-btns に差し込む）
意匠は Figma 220:882「CTA Button」（300x56 / 白地・角丸200・drop-shadow 3px4px #333）に合わせる。
detect.js は変更できず DOM がテキストノードのみなので、
右端の矢印アイコン（expand_circle_right / 229:1014）は ::after、テキストを中央に置くための
左スペーサーは ::before で再現している
========================================================================== */
.pc-register-btn {
  display: none;
}

.pc-register-btn.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 30rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.6rem;
  background-color: #ffffff;
  border-radius: 20rem;
  box-shadow: 0.3rem 0.4rem 0 var(--ink-color);
  color: var(--primary-color);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08rem;
  text-align: center;
  white-space: nowrap;
}

/* 左のスペーサー（矢印と同じ幅）でテキストをボタン中央に揃える */
.pc-register-btn.is-visible::before {
  content: "";
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
}

.pc-register-btn.is-visible::after {
  content: "";
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("../images/common/expand-circle-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =============================================================================
Footer / Figma 220:1212
========================================================================== */
.footer {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: 4rem 2rem 12rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: auto;
}

.footer-logo {
  width: 13.0163rem;
  height: 2.8rem;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-color);
}

.footer-site a {
  display: inline;
  color: var(--primary-color);
  text-decoration: underline;
}

.footer-details {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
}

.footer-copyright {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: #a1a1a1;
}

/* PC でもフローティング CTA を出すようになったため、
   フッター下端の余白（12rem）は SP と同じまま残す。
   PC のフローティング CTA は 8 + 20 + 7 + 56（.pc-register-btn）+ 24 = 115px なので 120px で足りる */

/* =============================================================================
PC 表示時の左右背景・アンカーナビ・サイド CTA（propally_lp の PC レイアウトを踏襲）

- 構造は propally_lp と同じ .pc-only > .background > .side-background.left/.right
- propally_lp の .main は 400px だが lp02 は 390px なので calc((100% - 390px) / 2)
- 背景画像は propally_lp/webpage/images/background.png（2560x1664 / 7.7MB）を
  1400px 幅・WebP q72（121KB）にリサイズしたもの。サイド背景は装飾なので画質より容量を優先
- パスは lp02 の規約どおり相対参照
- .pc-only はクリティカルCSS側で SP は display:none。SP には一切出さない
========================================================================== */
@media screen and (min-width: 768px) {
  .side-background {
    position: fixed;
    top: 0;
    /* メインカラム（390px）を除いた左右の余白いっぱい */
    width: calc((100% - 390px) / 2);
    height: 100vh;
    background-image: url("../images/common/side-background.webp");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    z-index: 1;
  }

  .side-background.left {
    left: 0;
    background-position: left center;
  }

  .side-background.right {
    right: 0;
    background-position: right center;
  }

  .side-logo {
    width: 80%;
    max-width: 200px;
    height: auto;
    z-index: 2;
  }

  /* アンカーナビ + サイド CTA。
     左右のサイド幅は (viewport - 390) / 2 なので、狭い PC では 300px の CTA が入らない。
     1100px 未満では中身を出さず背景画像だけにする */
  .menu {
    display: none;
  }

  .menu-title {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.26rem;
    /* 背景が空（淡色）に掛かる位置では白文字が読みづらいため影で可読性を確保する */
    text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.45);
  }

  .menu-title a {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
  }

  .menu-title a:hover {
    opacity: 0.8;
  }

  .cv-side {
    margin-top: 1.2rem;
  }
}

@media screen and (min-width: 1100px) {
  .menu {
    display: block;
    z-index: 2;
  }

  .menu-section {
    margin-bottom: 2rem;
  }
}