@charset "UTF-8";
/**
* 株式会社イエリテ マンション賃貸LP 専用スタイル（v1.10.0で追加）
*
* 【このファイルの決まり】
* 1. すべての指定を `.lp-mansion-rent` の配下に書きます。
* body へこのクラスが付くのはマンション賃貸LPとサンクスページだけです
* （inc/setup.php）。
* 2. assets/css/lp.css は変更しません。このファイルは lp.css のあとに
* 読み込まれ、必要な箇所だけを上書き・追加します。
* 3. `body` `h1` `p` `a` などへ単独で指定しないでください。
* 4. CSS変数も `:root` ではなく `.lp-mansion-rent` の中に定義します。
*
* この決まりを守っているかぎり、このLPの調整が
* 既存4LP（売却査定・戸建て賃貸・アパート管理・相続不動産相談）へ
* 影響することはありません。
*
* 【デザインの考え方】
* 上質なソフトポップ（上品60% / 親しみ25% / ポップ15%）。
* 既存LPのコンポーネント（カード・比較図・ステップ・FAQ・フォーム）は
* 色だけを差し替えて再利用し、今回新設するのは次の3つだけです。
* 1. 特大コピー（.ierite-lp__mns-punch）
* 2. 大数字（.ierite-lp__mns-bignum）
* 3. ファーストビューの専用レイアウト（写真を主役にする構成）
*
* 【フォント】
* 見出し・特大コピー・CTAだけ Noto Sans JP 700/900 を使用します
* （読み込みは inc/mansion.php、このLP限定）。
* 本文は既存のシステムフォントスタックのまま据え置きます。
*
* 【ブレークポイント】
* lp.css と同じ 768px / 900px / 1024px を使用します。
*
* @package Ierite_LP
*/
/* =====================================================================
* 1. カラー設定・トークン
*
* 既存の共通変数（--ierite-lp-*）を、このLPの色へ差し替えます。
* こうすることで、共通部品（見出し・カード・フォーム・固定CTA・
* フッター・比較図・ステップ・FAQ）がこのLPの色で表示されます。
*
* 【CTAのコーラルについて】
* 白文字とのコントラスト比は約5.3:1です（4.5:1以上を満たす濃さ）。
* ===================================================================== */
.lp-mansion-rent {
/* 信頼色：青緑〜深いグリーン（既存LPの青緑・アパートLPの紺とは別の色相） */
--mns-teal: #14534a;
--mns-teal-deep: #0c3a33;
--mns-teal-tint: #e8f2ee;
--mns-teal-line: #c7ded6;
/* CTA：コーラル（白文字コントラスト約5.3:1） */
--mns-coral: #b8481f;
--mns-coral-dark: #96391a;
--mns-coral-glow: rgba(184, 72, 31, 0.32);
/* 特大コピー・大数字専用の墨色（既存ブランド色よりさらに黒に近い） */
--mns-ink: #16231f;
/* ベース：白〜薄い生成り */
--mns-cream: #faf7ee;
--mns-mint: #eef5f0;
/* 既存の共通変数を、このLPの色へ差し替えます */
--ierite-lp-brand: var(--mns-teal);
--ierite-lp-brand-dark: var(--mns-teal-deep);
--ierite-lp-brand-tint: var(--mns-teal-tint);
--ierite-lp-brand-line: var(--mns-teal-line);
--ierite-lp-tint-2: #ddeae3;
--ierite-lp-deep: var(--mns-teal-deep);
--ierite-lp-deep-2: var(--mns-teal);
--ierite-lp-cta: var(--mns-coral);
--ierite-lp-cta-dark: var(--mns-coral-dark);
--ierite-lp-cta-glow: var(--mns-coral-glow);
--ierite-lp-text: #202b27;
--ierite-lp-text-muted: #566158;
--ierite-lp-bg-soft: var(--mns-cream);
--ierite-lp-beige-line: #ece3d2;
--ierite-lp-hero-mark: #ffd8ad;
--ierite-lp-shadow: 0 2px 10px rgba(20, 83, 74, 0.08);
/*
* 見出し用フォント（v1.10.0）。
* inc/mansion.php が Google Fonts から Noto Sans JP 700/900 を読み込みます。
* 本文（p / li 等）は既存のシステムフォントスタックのまま変更していません。
*/
--mns-display-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
/* =====================================================================
* 1.5 ヘッダー
*
* header-lp.php のマンションLP分岐は、ロゴ下のサービス名表示に
* アパート管理LPと同じクラス名（.ierite-lp__apt-header-sub）を再利用して
* います。スタイル自体は assets/css/apartment.css 側で
* `.lp-apartment-management` 配下にしか定義されていないため、
* このLPでも同じ見た目になるよう、ここで同内容を用意します。
* ===================================================================== */
.lp-mansion-rent .ierite-lp__header-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
min-width: 0;
}
.lp-mansion-rent .ierite-lp__apt-header-sub {
color: rgba(255, 255, 255, 0.82);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
white-space: nowrap;
}
.lp-mansion-rent .ierite-lp__header-logo-text {
white-space: nowrap;
}
.lp-mansion-rent a.ierite-lp__cta-button--small {
white-space: nowrap;
}
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__apt-header-sub {
font-size: 12px;
}
}
.lp-mansion-rent .ierite-lp__heading,
.lp-mansion-rent .ierite-lp__block-heading,
.lp-mansion-rent .ierite-lp__strength-title,
.lp-mansion-rent .ierite-lp__step-title,
.lp-mansion-rent a.ierite-lp__cta-button,
.lp-mansion-rent .ierite-lp__mns-punch,
.lp-mansion-rent .ierite-lp__mns-bignum {
font-family: var(--mns-display-font);
}
/* =====================================================================
* 2. 特大コピー（新設・このLPの中心表現）
*
* 【ルール】
* ・原則1セクション1つまで
* ・font-weight: 900（既存LPのどの見出しより太い）
* ・行間を詰める（line-height: 1.15）
* ・改行は
または .ierite-lp__nb で意図的に決める
* ・SPでも34px を下限とし、極端に縮小しない
*
* 対象：FV「まずは、いくらで貸せるか。」／
* 収支「家賃15万円。では、15万円残る？」／
* 比較「売る？ 貸す？」の3箇所。
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-punch {
margin: 0;
color: var(--mns-ink);
font-size: clamp(34px, 6.4vw + 6px, 64px);
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.01em;
text-wrap: balance;
}
.lp-mansion-rent .ierite-lp__mns-punch--center {
text-align: center;
}
/* FVだけ白背景の上ではなく濃色背景の上に置くため、墨色ではなく白にします */
.lp-mansion-rent .ierite-lp__mns-punch--on-dark {
color: #ffffff;
}
/* 見出し内で1か所だけ色を変える強調（コーラル） */
.lp-mansion-rent .ierite-lp__mns-punch-accent {
color: var(--mns-coral);
}
/*
* 特大コピーの上に置く、手書き風の小さな一言（親しみを担当）
*
* 【v1.10.1で修正】
* `--ierite-lp-hero-ink-soft` は assets/css/lp.css の :root で
* `rgba(255, 255, 255, 0.88)`（濃色背景の上で使う白系の色）として
* 既に定義されているため、CSS変数のフォールバック（, var(--mns-teal)）は
* 一度も使われず、生成り背景の上で白に近い文字になり読みにくくなっていた。
* このLPのFVは白背景のため、既存の「控えめな本文色」トークンを
* そのまま使う（最大コピーの --mns-ink より弱く、背景に埋もれない濃さ）。
*/
.lp-mansion-rent .ierite-lp__mns-whisper {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
color: var(--ierite-lp-text-muted);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
}
.lp-mansion-rent .ierite-lp__mns-whisper::before {
display: inline-block;
width: 18px;
height: 2px;
border-radius: 2px;
background: currentColor;
content: "";
opacity: 0.6;
}
/*
* 最終CTA（cta-final.php）専用の上書き。
*
* .ierite-lp__cta-block は共通CSS（lp.css）側でデスクトップ幅になると
* 「本文＋人物画像」の2カラムgridになります（中間CTAの想定）。
* 最終CTAは人物画像を使わず「見出し・ボタン」の3つの子要素を
* そのまま並べているため、2カラムgridに巻き込まれると
* 特大コピーが人物画像用の狭い列（260px）に押し込まれて崩れます。
* このセクションだけgridを解除し、中央寄せの縦積みに戻します。
*/
.lp-mansion-rent .ierite-lp__cta-block--final {
display: block;
text-align: center;
}
/*
* 同じくlp.css側のデスクトップ上書き（2カラムgrid用に左寄せへ変更する指定）で
* ボタン・補足文が左端に寄ってしまうため、中央寄せに戻します。
*/
.lp-mansion-rent .ierite-lp__cta-block--final .ierite-lp__cta-area {
align-items: center;
}
/* =====================================================================
* 3. 大数字（新設）
*
* 「家賃15万円。では、15万円残る？」の視覚的な見せ場で使用します。
* 数字を極端に大きく、単位はその35%程度に抑えます。
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-bignum {
display: inline-flex;
align-items: baseline;
gap: 2px;
color: var(--mns-ink);
font-weight: 900;
line-height: 1;
}
.lp-mansion-rent .ierite-lp__mns-bignum-value {
font-size: clamp(56px, 13vw, 96px);
}
.lp-mansion-rent .ierite-lp__mns-bignum--accent .ierite-lp__mns-bignum-value {
color: var(--mns-coral);
}
.lp-mansion-rent .ierite-lp__mns-bignum-unit {
font-size: clamp(22px, 4.2vw, 32px);
}
/* =====================================================================
* 4. ファーストビュー（新設・専用レイアウト）
*
* 既存3LPの「濃色ベタ面＋小さな人物切り抜き」ではなく、
* 参考完成画像に合わせて「白〜生成りの背景＋上質な室内写真を主役」に
* した構成にします。既存の .ierite-lp__hero* クラスは使用しません。
*
* PC：左に文章とCTA、右にリビング写真（大きく）
* SP：見出し→説明→安心材料→CTA→写真（写真はCTAの後）
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-hero {
position: relative;
padding: 28px 0 40px;
background: var(--mns-cream);
overflow: hidden;
}
.lp-mansion-rent .ierite-lp__mns-hero-inner {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.lp-mansion-rent .ierite-lp__mns-hero-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
color: var(--mns-teal);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
}
.lp-mansion-rent .ierite-lp__mns-hero-eyebrow::before {
flex: 0 0 auto;
width: 22px;
height: 2px;
background: var(--mns-coral);
content: "";
}
.lp-mansion-rent .ierite-lp__mns-hero-title {
margin-bottom: 16px;
}
.lp-mansion-rent .ierite-lp__mns-hero-sub {
margin: 0 0 20px;
max-width: 34em;
color: var(--ierite-lp-text-muted);
font-size: 15.5px;
font-weight: 500;
line-height: 1.85;
}
.lp-mansion-rent .ierite-lp__mns-hero-service {
display: inline-block;
margin: 0 0 18px;
padding: 6px 14px;
border: 1px solid var(--mns-teal-line);
border-radius: 999px;
background: var(--mns-teal-tint);
color: var(--mns-teal);
font-size: 13.5px;
font-weight: 700;
}
.lp-mansion-rent .ierite-lp__mns-hero-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-bottom: 20px;
}
.lp-mansion-rent a.ierite-lp__cta-button--mns-hero {
max-width: 100%;
min-height: 60px;
font-size: 18px;
box-shadow: 0 10px 24px var(--mns-coral-glow);
}
.lp-mansion-rent .ierite-lp__mns-hero-cta .ierite-lp__cta-note {
max-width: 30em;
margin-top: 10px;
color: var(--ierite-lp-text-muted);
font-size: 13.5px;
}
/* 安心材料3項目 */
.lp-mansion-rent .ierite-lp__mns-hero-points {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
width: 100%;
margin-bottom: 22px;
}
.lp-mansion-rent .ierite-lp__mns-hero-point {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 9px 14px;
border: 1px solid var(--mns-teal-line);
border-radius: 10px;
background: #ffffff;
color: var(--ierite-lp-text);
font-size: 13.5px;
font-weight: 700;
line-height: 1.35;
}
.lp-mansion-rent .ierite-lp__mns-hero-point-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--mns-teal);
}
/* 写真 */
.lp-mansion-rent .ierite-lp__mns-hero-figure {
position: relative;
margin: 0;
border-radius: var(--ierite-lp-radius-image);
overflow: hidden;
box-shadow: var(--ierite-lp-shadow);
}
.lp-mansion-rent .ierite-lp__mns-hero-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.lp-mansion-rent .ierite-lp__mns-hero-figcaption {
position: absolute;
right: 10px;
bottom: 10px;
}
/*
* 【v1.10.1で追加】SPのFV縦寸法を軽く圧縮
*
* 900px未満（SP・タブレット縦）だけを対象にした上書きです。
* 文章・安心材料は削除せず、上下の余白・要素間のgap・カードの高さだけを
* 詰めて、最初のスクロールで比較的早くリビング写真が見えるようにします。
* PC（900px以上）の余白はこの上書きの対象外で、現状を維持します。
*/
@media (max-width: 899px) {
.lp-mansion-rent .ierite-lp__mns-hero {
padding: 20px 0 32px;
}
.lp-mansion-rent .ierite-lp__mns-hero-inner {
gap: 18px;
}
.lp-mansion-rent .ierite-lp__mns-hero-eyebrow {
margin-bottom: 10px;
}
.lp-mansion-rent .ierite-lp__mns-whisper {
margin-bottom: 8px;
}
.lp-mansion-rent .ierite-lp__mns-hero-title {
margin-bottom: 12px;
}
.lp-mansion-rent .ierite-lp__mns-hero-sub {
margin-bottom: 14px;
}
.lp-mansion-rent .ierite-lp__mns-hero-service {
margin-bottom: 12px;
padding: 5px 12px;
}
.lp-mansion-rent .ierite-lp__mns-hero-cta {
margin-bottom: 14px;
}
.lp-mansion-rent a.ierite-lp__cta-button--mns-hero {
min-height: 54px;
}
.lp-mansion-rent .ierite-lp__mns-hero-cta .ierite-lp__cta-note {
margin-top: 8px;
}
.lp-mansion-rent .ierite-lp__mns-hero-points {
gap: 6px;
margin-bottom: 0;
}
.lp-mansion-rent .ierite-lp__mns-hero-point {
min-height: 40px;
padding: 7px 14px;
}
}
@media (min-width: 900px) {
.lp-mansion-rent .ierite-lp__mns-hero-inner {
grid-template-columns: minmax(0, 460px) 1fr;
align-items: center;
gap: 48px;
}
.lp-mansion-rent .ierite-lp__mns-hero-image {
aspect-ratio: 4 / 3;
}
.lp-mansion-rent .ierite-lp__mns-hero-cta {
align-items: flex-start;
}
.lp-mansion-rent a.ierite-lp__cta-button--mns-hero {
width: auto;
min-width: 320px;
}
/*
* 【v1.10.2で追加】安心材料3点をPCだけ横1列3カラムの小型バッジへ。
* 参考完成画像はここを縦積みの大きなカードではなく、
* アイコン＋短いラベルの小型バッジを横に3つ並べています。
* SPは視認性を優先し、既存の縦積み1カラムのまま変更しません。
*/
.lp-mansion-rent .ierite-lp__mns-hero-points {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 0;
}
.lp-mansion-rent .ierite-lp__mns-hero-point {
flex-direction: column;
justify-content: center;
gap: 6px;
min-height: 78px;
padding: 12px 8px;
text-align: center;
font-size: 12.5px;
line-height: 1.4;
}
}
/* =====================================================================
* 5. こんな時ありませんか？（6項目カード）
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-concern-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.lp-mansion-rent .ierite-lp__mns-concern-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 12px;
border: 1px solid var(--ierite-lp-border);
border-radius: var(--ierite-lp-radius-card);
background: #ffffff;
text-align: center;
}
.lp-mansion-rent .ierite-lp__mns-concern-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--mns-teal-tint);
color: var(--mns-teal);
}
.lp-mansion-rent .ierite-lp__mns-concern-text {
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__mns-concern-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
/* =====================================================================
* 6. いくらで貸せる？（査定要素チップ）
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-estimate-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
max-width: 640px;
margin: 28px auto 0;
}
.lp-mansion-rent .ierite-lp__mns-estimate-chip {
display: flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 10px 14px;
border: 1px solid var(--ierite-lp-border);
border-radius: 10px;
background: #ffffff;
color: var(--ierite-lp-text);
font-size: 14px;
font-weight: 700;
}
.lp-mansion-rent .ierite-lp__mns-estimate-chip-icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--mns-teal);
}
/*
* 【v1.10.2で追加・v1.10.3でレイアウト変更】外観写真（PCのみ）
* SPは既定で写真を非表示にし（参考完成画像にも写真がないため）、
* 文章・チップだけの構成をこれまでどおり維持します。
*
* 【v1.10.3の変更点】
* これまでは「左：縦長写真カード／右：見出し＋本文」の左右2カラムで、
* 一般的なWebサイトのカラムレイアウトに見えていた。
* 参考完成画像は写真・特大コピー・査定要素を横並びの別カラムではなく
* ひとつながりの編集面として見せているため、PCも横長写真を上に置く
* 縦積み構成（雑誌の扉ページに近い見せ方）へ変更する。
* コピー・チップの文言・並び順は変更していない。
*/
.lp-mansion-rent .ierite-lp__mns-estimate-figure {
display: none;
}
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__mns-estimate-chips {
grid-template-columns: repeat(3, 1fr);
max-width: 760px;
margin-left: auto;
}
.lp-mansion-rent .ierite-lp__mns-estimate-layout {
display: block;
}
.lp-mansion-rent .ierite-lp__mns-estimate-figure {
display: block;
width: 100%;
max-width: 760px;
aspect-ratio: 21 / 7;
margin: 0 auto 36px;
border-radius: var(--ierite-lp-radius-image);
overflow: hidden;
box-shadow: var(--ierite-lp-shadow);
}
.lp-mansion-rent .ierite-lp__mns-estimate-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 32%;
}
}
@media (min-width: 1024px) {
.lp-mansion-rent .ierite-lp__mns-estimate-figure {
max-width: 900px;
}
}
/* =====================================================================
* 7. 収支（大数字＋費用フロー＋結果バー）
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-balance-lead {
margin: 0 0 8px;
color: var(--ierite-lp-text-muted);
font-size: 15px;
font-weight: 500;
text-align: center;
}
.lp-mansion-rent .ierite-lp__mns-balance-punch {
text-align: center;
margin-bottom: 8px;
}
.lp-mansion-rent .ierite-lp__mns-balance-note {
margin: 10px 0 0;
color: var(--ierite-lp-text-muted);
font-size: 13px;
text-align: center;
}
.lp-mansion-rent .ierite-lp__mns-balance-flow {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
max-width: 760px;
margin: 36px auto 0;
}
.lp-mansion-rent .ierite-lp__mns-balance-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 10px;
border: 1px solid var(--ierite-lp-border);
border-radius: var(--ierite-lp-radius-card);
background: #ffffff;
text-align: center;
}
.lp-mansion-rent .ierite-lp__mns-balance-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--mns-teal-tint);
color: var(--mns-teal);
}
.lp-mansion-rent .ierite-lp__mns-balance-item-text {
font-size: 13.5px;
font-weight: 700;
line-height: 1.4;
}
.lp-mansion-rent .ierite-lp__mns-balance-arrow {
display: flex;
align-items: center;
justify-content: center;
margin: 18px auto;
color: var(--mns-teal-line);
}
.lp-mansion-rent .ierite-lp__mns-balance-result {
max-width: 760px;
margin: 0 auto;
padding: 18px 22px;
border-radius: var(--ierite-lp-radius-card);
background: linear-gradient(160deg, var(--mns-teal) 0%, var(--mns-teal-deep) 100%);
color: #ffffff;
font-size: 17px;
font-weight: 700;
text-align: center;
}
.lp-mansion-rent .ierite-lp__mns-balance-close {
margin: 28px auto 0;
max-width: 620px;
font-size: 16px;
font-weight: 700;
text-align: center;
}
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__mns-balance-flow {
grid-template-columns: repeat(5, 1fr);
align-items: start;
}
}
/* =====================================================================
* 8. 中間CTA（ハイビスカス装飾つき）
*
* 既存の .ierite-lp__section--cta（濃色ブロック、overflow:hiddenで
* クリップされます）を土台にし、右下にハイビスカスの写真を重ねます。
*
* 【v1.10.1で修正】
* 写真そのものは生成り色の背景を含む長方形のため、そのまま重ねると
* 「CTAの横に写真カードを貼った」ように見えていた。
* mask-image で左上側を透明にグラデーションさせ、コーナーの外側へ
* 少しはみ出させることで、独立した写真カードではなく背景から
* 花と葉だけが自然に覗いているように見せる。
* 画像ファイル自体は加工していない（CSSでの見せ方のみ変更）。
* ===================================================================== */
/*
* 【v1.10.3で修正】写真カード感の解消
*
* これまでは画像全体（周囲の淡いスタジオ背景を含む長方形）に
* 直線的なmask-imageを重ねていたため、マスクの縁が直線的に見え、
* 「独立した写真カードを角に貼った」ように見えていた。
*
* 1. object-fit: cover + object-position で花・葉の密集部分だけを
* 拡大表示し、周囲の淡い背景をあらかじめ大きく削る。
* 2. mask-imageを直線グラデーションから、角を起点にした
* radial-gradientへ変更し、縁を丸く・より長く feather させる。
* 3. filter で明度・彩度をわずかに落とし、素材側の淡い背景色が
* CTAの濃色と衝突しないようにする。
*
* 画像ファイル自体（mansion-rent-hibiscus.webp）は加工していない。
*/
.lp-mansion-rent .ierite-lp__mns-cta-hibiscus {
position: absolute;
right: -14px;
bottom: -20px;
width: 240px;
max-width: 42%;
height: 190px;
object-fit: cover;
object-position: 80% 55%;
opacity: 0.85;
filter: brightness(0.87) saturate(1.1);
pointer-events: none;
mask-image: radial-gradient(130% 130% at 100% 100%, #000 0%, #000 26%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
-webkit-mask-image: radial-gradient(130% 130% at 100% 100%, #000 0%, #000 26%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
}
@media (max-width: 767px) {
.lp-mansion-rent .ierite-lp__mns-cta-hibiscus {
right: -8px;
bottom: -12px;
width: 148px;
height: 122px;
opacity: 0.78;
}
}
/*
* 【v1.10.2で追加・v1.10.3で調整】中間CTA②：中間CTA①より大きく・くっきり
*
* 参考完成画像は「売るか貸すか迷っている段階でも」のCTAで
* ハイビスカスをより大きく・鮮やかに使っています。同じ画像素材を
* 中間CTA①とは異なる大きさ・マスク範囲で表示し、CTAごとに
* 画面の表情を変えます（画像ファイル自体は加工していません）。
*/
.lp-mansion-rent .ierite-lp__mns-cta-hibiscus--mid2 {
right: -10px;
bottom: -28px;
width: 320px;
max-width: 56%;
height: 270px;
object-position: 76% 50%;
opacity: 0.95;
filter: brightness(0.85) saturate(1.15);
mask-image: radial-gradient(135% 135% at 100% 100%, #000 0%, #000 34%, rgba(0, 0, 0, 0.6) 54%, transparent 82%);
-webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 0%, #000 34%, rgba(0, 0, 0, 0.6) 54%, transparent 82%);
}
@media (max-width: 767px) {
.lp-mansion-rent .ierite-lp__mns-cta-hibiscus--mid2 {
right: -8px;
bottom: -16px;
width: 190px;
height: 158px;
opacity: 0.88;
}
}
/*
* 【v1.10.2で追加・v1.10.3で調整】最終CTA（フォーム直前）
*
* 参考完成画像はビーチ写真の背景を使いますが、「高級リゾートマンションを
* 扱っている」という誤認を避けるため海・ビーチの写真は使わず、
* ハイビスカス素材を左右反転させて左下から配置することで、
* 素材を使い回しながら中間CTA②とは異なる表情にしています。
*/
.lp-mansion-rent .ierite-lp__mns-cta-hibiscus--final {
right: auto;
left: -14px;
bottom: -24px;
width: 280px;
max-width: 50%;
height: 232px;
object-position: 78% 52%;
opacity: 0.9;
filter: brightness(0.85) saturate(1.12);
transform: scaleX(-1);
mask-image: radial-gradient(130% 130% at 100% 100%, #000 0%, #000 30%, rgba(0, 0, 0, 0.55) 50%, transparent 80%);
-webkit-mask-image: radial-gradient(130% 130% at 100% 100%, #000 0%, #000 30%, rgba(0, 0, 0, 0.55) 50%, transparent 80%);
}
@media (max-width: 767px) {
.lp-mansion-rent .ierite-lp__mns-cta-hibiscus--final {
left: -8px;
bottom: -10px;
width: 160px;
height: 132px;
}
}
/* 最終CTAだけ、光の広がりを淡く足して単色べた面に厚みを持たせます */
.lp-mansion-rent .ierite-lp__section--cta#cta-final::before {
position: absolute;
inset: 0;
background: radial-gradient(120% 90% at 12% 10%, rgba(255, 255, 255, 0.12), transparent 60%);
content: "";
pointer-events: none;
}
/* =====================================================================
* 9. 貸す前に、ちょっと確認（チェックリスト）
*
* HTMLは のリストです。
* SP：既存のFAQと同じ考え方でアコーディオン（重い長文を最初から広げない）
* PC：常に開いた状態のカードグリッドとして見せます（CSSだけで実現）
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-checklist {
display: grid;
gap: 10px;
max-width: 760px;
margin: 0 auto;
}
.lp-mansion-rent .ierite-lp__mns-check-item {
border: 1px solid var(--ierite-lp-border);
border-radius: var(--ierite-lp-radius-card);
background: #ffffff;
overflow: hidden;
}
.lp-mansion-rent .ierite-lp__mns-check-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
list-style: none;
font-weight: 700;
}
.lp-mansion-rent .ierite-lp__mns-check-summary::-webkit-details-marker {
display: none;
}
.lp-mansion-rent .ierite-lp__mns-check-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--mns-teal-tint);
color: var(--mns-teal);
}
.lp-mansion-rent .ierite-lp__mns-check-title {
flex: 1 1 auto;
font-size: 15px;
}
.lp-mansion-rent .ierite-lp__mns-check-toggle {
flex: 0 0 auto;
position: relative;
width: 18px;
height: 18px;
}
.lp-mansion-rent .ierite-lp__mns-check-toggle::before,
.lp-mansion-rent .ierite-lp__mns-check-toggle::after {
position: absolute;
top: 50%;
left: 50%;
background: var(--mns-teal);
content: "";
transform: translate(-50%, -50%);
}
.lp-mansion-rent .ierite-lp__mns-check-toggle::before {
width: 12px;
height: 2px;
}
.lp-mansion-rent .ierite-lp__mns-check-toggle::after {
width: 2px;
height: 12px;
transition: opacity 0.15s ease;
}
.lp-mansion-rent .ierite-lp__mns-check-item[open] .ierite-lp__mns-check-toggle::after {
opacity: 0;
}
.lp-mansion-rent .ierite-lp__mns-check-body {
padding: 0 16px 16px 62px;
color: var(--ierite-lp-text-muted);
font-size: 14px;
line-height: 1.8;
}
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__mns-checklist {
grid-template-columns: repeat(2, 1fr);
max-width: 900px;
}
/* PCでは常に開いた状態のカードとして見せます（クリック不要） */
.lp-mansion-rent .ierite-lp__mns-check-summary {
cursor: default;
pointer-events: none;
}
.lp-mansion-rent .ierite-lp__mns-check-toggle {
display: none;
}
.lp-mansion-rent .ierite-lp__mns-check-item .ierite-lp__mns-check-body {
display: block !important;
padding-left: 16px;
}
}
/* =====================================================================
* 10. 売る？貸す？（比較・最大の見せ場）
*
* 既存の .ierite-lp__compare-column を土台に、リスト表示だけ追加します。
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-compare-list {
display: grid;
gap: 10px;
margin: 0 0 18px;
}
.lp-mansion-rent .ierite-lp__mns-compare-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14.5px;
font-weight: 600;
line-height: 1.6;
}
.lp-mansion-rent .ierite-lp__mns-compare-item-icon {
flex: 0 0 auto;
color: currentColor;
opacity: 0.6;
}
.lp-mansion-rent .ierite-lp__mns-compare-close {
margin: 8px auto 0;
max-width: 720px;
font-size: 16px;
font-weight: 700;
line-height: 1.8;
text-align: center;
}
/* =====================================================================
* 10.5 信頼形成・代表者紹介（v1.10.1で新設）
*
* 実写真（背景に石畳・石垣を含む）を使うため、既存の代表紹介
* （.ierite-lp__profile-figure / .ierite-lp__profile-plate、
* 透過切り抜き画像＋色面の組み方）は流用していません。
*
* SP（〜767px）：写真（顔・上半身が残るようトリミング済み）→
* 名前・肩書のキャプション → 紹介文の順に縦積み。
* PC（768px〜）：左に写真、右に紹介文を並べます
* （写真の上に長い文章は重ねません）。
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-rep {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.lp-mansion-rent .ierite-lp__mns-rep-figure {
margin: 0;
}
.lp-mansion-rent .ierite-lp__mns-rep-image {
display: block;
width: 100%;
height: auto;
border-radius: var(--ierite-lp-radius-image);
box-shadow: var(--ierite-lp-shadow);
}
.lp-mansion-rent .ierite-lp__mns-rep-caption {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 10px;
}
.lp-mansion-rent .ierite-lp__mns-rep-role {
color: var(--ierite-lp-text-muted);
font-size: 13px;
font-weight: 700;
}
.lp-mansion-rent .ierite-lp__mns-rep-name {
color: var(--mns-teal);
font-size: 20px;
font-weight: 700;
}
.lp-mansion-rent .ierite-lp__mns-rep-body {
min-width: 0;
}
.lp-mansion-rent .ierite-lp__mns-rep-text {
margin: 0 0 16px;
color: var(--ierite-lp-text);
font-size: 16px;
font-weight: 500;
line-height: 1.95;
}
.lp-mansion-rent .ierite-lp__mns-rep-text--soft {
margin-bottom: 0;
color: var(--ierite-lp-text-muted);
font-size: 15px;
}
/*
* 【v1.10.2で追加】3つの強みバッジ（POINT01〜03の再掲）
*
* 参考完成画像は代表者の写真・文章の隣に、上のPOINTカードと同じ3つの
* 強みを小型バッジとして再掲しています。新しい訴求文は作らず、
* strengths.php の $ierite_lp_mns_strengths（既存の正式内容）を
* そのまま流用しています。
*/
.lp-mansion-rent .ierite-lp__mns-rep-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.lp-mansion-rent .ierite-lp__mns-rep-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--mns-teal-line);
border-radius: 10px;
background: #ffffff;
}
.lp-mansion-rent .ierite-lp__mns-rep-badge-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: var(--mns-teal-tint);
color: var(--mns-teal);
}
.lp-mansion-rent .ierite-lp__mns-rep-badge-text {
color: var(--ierite-lp-text);
font-size: 12.5px;
font-weight: 700;
line-height: 1.4;
}
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__mns-rep {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: center;
gap: 40px;
max-width: none;
}
}
/* =====================================================================
* 11. 対応エリア
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-area-punch {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
/* 【v1.10.2で追加】対応エリアの装飾バッジ（新規地図素材なし、既存pinアイコンを使用） */
.lp-mansion-rent .ierite-lp__mns-area-badge {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--mns-teal-tint);
color: var(--mns-teal);
}
.lp-mansion-rent .ierite-lp__mns-area-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 720px;
margin: 0 auto;
}
.lp-mansion-rent .ierite-lp__mns-area-item {
padding: 8px 16px;
border: 1px solid var(--mns-teal-line);
border-radius: 999px;
background: var(--mns-teal-tint);
color: var(--mns-teal);
font-size: 14px;
font-weight: 700;
}
/* =====================================================================
* 12. イメージ写真の注記（既存アパートLPと同じ考え方）
* ===================================================================== */
.lp-mansion-rent .ierite-lp__mns-figure-note {
display: inline-block;
margin-top: 6px;
color: var(--ierite-lp-text-muted);
font-size: 11px;
}
/* =====================================================================
* 13. 固定CTAの追加非表示条件（v1.10.1で追加）
*
* assets/css/lp.css 側の表示条件は
* .ierite-lp__sticky-cta.is-ready:not(.is-hidden)
* です（is-hidden は assets/js/lp.js がFV・フォーム・フッターの
* 可視状態から付け外しします。この判定は変更しません）。
*
* このLPは中間CTA①②・最終CTAの数が既存LPより多く、
* それらの上にも固定CTAが重なって「同じボタンが2つ見える」状態に
* なっていたため、assets/js/mansion.js が中間CTA①②・最終CTAの
* 可視状態から is-mns-cta-near を付け外しします。
* この上書きは `.lp-mansion-rent` の配下だけに書いているため、
* 既存4LPの固定CTA挙動には影響しません。
* ===================================================================== */
.lp-mansion-rent .ierite-lp__sticky-cta.is-ready.is-mns-cta-near {
transform: translateY(120%);
opacity: 0;
pointer-events: none;
}
/*
* 【v1.10.5で追加】スクロール中は固定CTAを隠す（SPのみ）
*
* assets/js/mansion.js がスクロール中に is-mns-scrolling を付け、
* 止まって250ms後に外す。本文をスクロールで読み進めているあいだは
* 固定CTAが何にも重ならないようにするための対応。
* PC（768px以上、lp.css側で右下の小さな独立ウィジェットに変わる）は
* 対象外とし、これまでどおり常時表示のままにする。
*/
@media (max-width: 767px) {
.lp-mansion-rent .ierite-lp__sticky-cta.is-ready.is-mns-scrolling {
transform: translateY(120%);
opacity: 0;
pointer-events: none;
}
}
/*
* 【v1.10.6で追加】表示領域に主要コンテンツが入っていたら隠す（SPのみ）
*
* assets/js/mansion.js が、各セクションの .ierite-lp__inner
* （本文・カード・写真・フォームの共通ラッパー）を監視し、固定CTAの
* 表示高さぶんの領域に入っていれば is-mns-sp-content-near を付ける。
* 「スクロールが止まったら必ず出す」のではなく、「止まった場所に
* 保護対象コンテンツが無いときだけ出す」判定にするための対応。
* PC（768px以上の右下フローティングCTA）は対象外。is-mns-cta-near
* （3つのCTAブロックのみを見る、v1.10.3から変更なし）はPC・SP共通で
* これまでどおり動作する。
*/
@media (max-width: 767px) {
.lp-mansion-rent .ierite-lp__sticky-cta.is-ready.is-mns-sp-content-near {
transform: translateY(120%);
opacity: 0;
pointer-events: none;
}
}
/* =====================================================================
* 14. FAQのPC2カラム化（v1.10.2で追加）
*
* 質問・回答の内容は inc/mansion.php の ierite_lp_mansion_faq_items() を
* そのまま使用し、ここでは配置（グリッド列数）だけを変更します。
* SP（〜767px）は既存どおり1カラムのままです。
* ===================================================================== */
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__faq-list {
grid-template-columns: repeat(2, 1fr);
align-items: start;
gap: 14px 20px;
}
}
/* =====================================================================
* 15. フォームのPC部分2カラム化（v1.10.2で追加）
*
* フォーム項目・送信処理・バリデーション・計測仕様（inc/form-setup.php）
* は変更していません。ここではCSSだけで、必須の4項目のうち
* 「お名前／マンション所在地」「電話番号／ご相談内容」を参考完成画像に
* 合わせて2カラムに並べます（それ以外の任意項目・同意・送信ボタンは
* 入力しやすさを優先し、これまでどおり1カラムのまま）。
* SP（〜767px）は既存どおり1カラムのままです。
*
* .ierite-lp__form-row は inc/form-setup.php の
* ierite_lp_mansion_form_template() が出力する順（1お名前／2電話番号／
* 3マンション所在地／4ご相談内容／5以降は任意項目）に並んでいるため、
* DOM順は変更せず、CSSの order だけで表示順を入れ替えています。
* ===================================================================== */
@media (min-width: 768px) {
.lp-mansion-rent .ierite-lp__form-wrap form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-row {
grid-column: span 2;
}
/* お名前 */
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-row:nth-of-type(1) {
grid-column: span 1;
order: 1;
}
/* マンション所在地 */
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-row:nth-of-type(3) {
grid-column: span 1;
order: 2;
}
/* 電話番号 */
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-row:nth-of-type(2) {
grid-column: span 1;
order: 3;
}
/* ご相談内容 */
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-row:nth-of-type(4) {
grid-column: span 1;
order: 4;
}
/* 5番目以降の任意項目は1カラムのまま、表示順もそのまま */
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-row:nth-of-type(n+5) {
order: 5;
}
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-agree,
.lp-mansion-rent .ierite-lp__form-wrap .ierite-lp__form-submit {
grid-column: span 2;
order: 6;
}
}
/* =====================================================================
* 16. スマホの縦長感・間延び感の圧縮（v1.10.4で追加）
*
* 構成・コピー・機能は変更せず、セクション間の余白／カードの内側余白／
* 行間だけをスマホ幅で詰めて、読み進めるテンポを上げます。
* PC（1024px以上、lp.css側で padding:96px 0 に切り替わる）はここでは
* 対象外です。
* ===================================================================== */
@media (max-width: 1023px) {
.lp-mansion-rent .ierite-lp__section {
padding: 40px 0;
}
}
@media (max-width: 767px) {
/* チェックリスト・比較カード・収支カードなど、カード内側の余白を詰める */
.lp-mansion-rent .ierite-lp__mns-check-summary {
padding: 12px 14px;
}
.lp-mansion-rent .ierite-lp__mns-check-body {
padding: 0 14px 14px 58px;
line-height: 1.7;
}
.lp-mansion-rent .ierite-lp__mns-checklist {
gap: 8px;
}
.lp-mansion-rent .ierite-lp__mns-balance-flow {
gap: 10px;
margin-top: 26px;
}
.lp-mansion-rent .ierite-lp__mns-balance-item {
padding: 12px 8px;
}
.lp-mansion-rent .ierite-lp__mns-concern-grid {
gap: 10px;
}
.lp-mansion-rent .ierite-lp__mns-concern-card {
padding: 16px 10px;
}
.lp-mansion-rent .ierite-lp__mns-estimate-chips {
margin-top: 22px;
}
.lp-mansion-rent .ierite-lp__mns-balance-close {
margin-top: 20px;
}
/* 特大コピーの上下余白をスマホでは少し詰める（文字サイズは変更しない） */
.lp-mansion-rent .ierite-lp__mns-balance-punch {
margin-bottom: 4px;
}
}
/* =====================================================================
* 17. CTAの強弱づけ（v1.10.4で追加）
*
* これまで中間CTA①②・最終CTAがほぼ同じ大きさ・同じ見え方で3回連続し、
* 「同じCTAが何度も出てくる」単調さにつながっていた。
* 役割を分けて強弱をつける。
* ・中間CTA①（収支セクション直後）：まだ検討の入り口。小さめ・簡潔に。
* ・中間CTA②（売る/貸す比較直後）：温度が上がった二度目の接点。標準サイズ。
* ・最終CTA（フォーム直前）：最も強く。既存どおりの特大コピー。
* 見出し・ボタンの文言は変更していない。
* ===================================================================== */
.lp-mansion-rent #cta-middle-1.ierite-lp__section {
padding: 40px 0;
}
.lp-mansion-rent #cta-middle-1 .ierite-lp__heading--cta {
font-size: clamp(20px, 3.4vw + 8px, 28px);
}
.lp-mansion-rent #cta-middle-1 a.ierite-lp__cta-button {
max-width: 360px;
min-height: 54px;
padding: 10px 24px;
font-size: 16px;
box-shadow: none;
}
@media (min-width: 1024px) {
.lp-mansion-rent #cta-middle-1.ierite-lp__section {
padding: 56px 0;
}
}
/* =====================================================================
* 18. スマホ固定CTAのコンパクト化（v1.10.4で追加・v1.10.5でさらに圧縮）
*
* CVの導線は保ちつつ、常時画面下に居座る圧迫感を少し減らす。
* 高さ・内側余白をわずかに詰め、ボタンの主張は変えない。
* lp.css側の共通ルールを上書きするため詳細度を合わせている。
*
* 【v1.10.5の変更】
* min-height 46px はiOS/Androidの推奨タップ領域（44px相当）を
* 下回らない範囲での最小値。文字サイズも16px（iOSでズームが
* 発生しない下限）を維持し、押しやすさ・読みやすさは落としていない。
* 底からの浮き量（bottom）も詰め、合計で以前よりおよそ12px、
* 画面占有の縦幅を圧縮した。
* ===================================================================== */
@media (max-width: 767px) {
.lp-mansion-rent .ierite-lp__sticky-cta {
right: 10px;
bottom: calc(7px + env(safe-area-inset-bottom));
left: 10px;
padding: 4px;
}
.lp-mansion-rent a.ierite-lp__sticky-button--form {
min-height: 46px;
font-size: 16px;
}
}
/* =====================================================================
* 19. 代表紹介セクション：スマホの文章密度を詰める（v1.10.4で追加）
*
* 文章そのもの（コピー）は変更せず、行間・段落間隔・バッジの余白だけを
* スマホで詰めて、セクションの縦の長さを抑える。
* ===================================================================== */
@media (max-width: 767px) {
.lp-mansion-rent .ierite-lp__mns-rep {
gap: 14px;
}
.lp-mansion-rent .ierite-lp__mns-rep-text {
margin-bottom: 12px;
line-height: 1.8;
}
.lp-mansion-rent .ierite-lp__mns-rep-badges {
margin-top: 14px;
gap: 8px;
}
.lp-mansion-rent .ierite-lp__mns-rep-badge {
padding: 8px 10px;
}
}
/* =====================================================================
* 20. FAQ直後の最終CTA：安心感を補強（v1.10.4で追加）
*
* 「まだ決めなくて大丈夫です」の一言（cta-eyebrow）を、最終CTAの中で
* より目立たせる。文言は既存のまま、視覚的な強さだけを上げている。
* ===================================================================== */
.lp-mansion-rent .ierite-lp__cta-eyebrow {
display: inline-block;
margin: 0 0 12px;
padding: 5px 14px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
font-size: 12.5px;
}