/* =============================================================
   AB Global Japan — main.css  v2.0
   ============================================================= */

/* ─── CSS Variables ─── */
:root {
    --navy:       #0d2244;
    --navy-dk:    #081529;
    --navy-lt:    #163a6e;
    --accent:     #e8a020;
    --accent-dk:  #c98510;
    --accent-lt:  #fdf0d5;
    --white:      #ffffff;
    --gray-50:    #f8fafd;
    --gray-100:   #eef2f8;
    --gray-200:   #dde4ef;
    --gray-400:   #9aaabb;
    --gray-600:   #5a6a7e;
    --gray-800:   #1e2a3b;
    --green:      #2e8b57;
    --red:        #c0392b;

    --font: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
    --shadow-md: 0 4px 20px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.14);
    --container: 1100px;
    --pad: 24px;
    --header-h: 70px;
    --transition: .2s ease;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--gray-800); background: var(--white); line-height: 1.75; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--navy); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }
ul   { list-style: none; }
button { cursor: pointer; font-family: var(--font); }

/* ─── Layout ─── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.section    { padding: 80px 0; }
.section-bg { background: var(--gray-50); }

.section-head { text-align: center; margin-bottom: 56px; }
.section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 12px;
}
.section-subtitle { font-size: 1.05rem; color: var(--gray-600); }

/* ─── Buttons ─── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 28px;
    font-size: .95rem; font-weight: 700;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-accent         { background: var(--accent);   color: var(--white); border-color: var(--accent); }
.btn-accent:hover   { background: var(--accent-dk); border-color: var(--accent-dk); color: var(--white); }

.btn-primary        { background: var(--navy);    color: var(--white); border-color: var(--navy); }
.btn-primary:hover  { background: var(--navy-lt); border-color: var(--navy-lt); color: var(--white); }

.btn-outline        { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover  { background: var(--navy); color: var(--white); }

.btn-outline-white  { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-outline-white:hover { background: rgba(255,255,255,.15); border-color: var(--white); color: var(--white); }

.btn-ghost          { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover    { color: var(--navy); background: var(--gray-100); }

.btn-sm  { padding: 8px 18px; font-size: .88rem; }
.btn-lg  { padding: 15px 40px; font-size: 1.05rem; border-radius: var(--radius-lg); }
.btn-block { display: flex; width: 100%; }

/* ─── Badge ─── */
.badge {
    display: inline-block; padding: 5px 16px;
    border-radius: 999px; font-size: .8rem; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
}
.badge-light { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: var(--white); }

/* ─── Header ─── */
.site-header {
    position: sticky; top: 0; z-index: 200;
    height: var(--header-h);
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
}

/* Logo */
.site-logo, .footer-logo {
    font-size: 1.25rem; font-weight: 900; color: var(--navy);
    letter-spacing: -.5px; white-space: nowrap;
}
.site-logo:hover, .footer-logo:hover { color: var(--navy); text-decoration: none; }
.logo-text { font-size: 1.25rem; font-weight: 900; color: var(--navy); }
.logo-accent { color: var(--accent); }
.custom-logo { height: 40px; width: auto; }

/* Nav */
.site-nav { display: flex; align-items: center; gap: 4px; }
.nav-list  { display: flex; align-items: center; gap: 2px; }
.nav-list a {
    padding: 8px 14px; border-radius: var(--radius-sm);
    font-size: .93rem; font-weight: 500; color: var(--gray-800);
    transition: all var(--transition); white-space: nowrap;
}
.nav-list a:hover { color: var(--navy); background: var(--gray-100); text-decoration: none; }
.nav-list a.nav-cta {
    background: var(--accent); color: #fff; font-weight: 700;
    padding: 8px 18px; border-radius: 999px; margin-left: 6px;
    white-space: nowrap;
}
.nav-list a.nav-cta:hover { background: var(--accent-dark, #d98a1f); color: #fff; filter: brightness(.95); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 16px; }

/* Hamburger */
.nav-toggle {
    display: none; flex-direction: column; justify-content: center;
    gap: 5px; width: 40px; height: 40px;
    background: none; border: none; padding: 6px;
    border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--gray-100); }
.bar { display: block; width: 22px; height: 2px; background: var(--gray-800); border-radius: 2px; transition: all .25s; }
.nav-toggle.is-open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Hero ─── */
.hero {
    position: relative; min-height: 580px;
    display: flex; align-items: center;
    background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 50%, #1a3a6e 100%);
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") repeat;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,21,41,.6) 0%, transparent 70%); }
.hero-inner { position: relative; z-index: 2; padding: 80px 0; }
.hero-content { max-width: 640px; }
.hero-title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 900; line-height: 1.25;
    color: var(--white); margin: 20px 0 24px;
}
.text-accent { color: var(--accent); }
.hero-desc   { font-size: 1.05rem; color: rgba(255,255,255,.85); margin-bottom: 36px; line-height: 1.85; }
.hero-cta    { display: flex; flex-wrap: wrap; gap: 16px; }

/* ─── Stats Bar ─── */
.stats-bar   { background: var(--navy); padding: 28px 0; }
.stats-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-item   { text-align: center; padding: 12px 0; border-right: 1px solid rgba(255,255,255,.12); }
.stat-item:last-child { border-right: none; }
.stat-value  { display: block; font-size: 2rem; font-weight: 900; color: var(--accent); }
.stat-label  { display: block; font-size: .82rem; color: rgba(255,255,255,.65); margin-top: 4px; letter-spacing: .5px; }

/* ─── Features ─── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.feature-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.feature-icon-wrap { margin-bottom: 20px; }
.feature-icon { font-size: 2.4rem; }
.feature-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.feature-card p  { font-size: .93rem; color: var(--gray-600); line-height: 1.75; }

/* ─── Pricing ─── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px; max-width: 760px; margin: 0 auto;
}
.pricing-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 44px 36px;
    position: relative;
    transition: box-shadow var(--transition);
}
.pricing-card--featured {
    border-color: var(--navy);
    box-shadow: var(--shadow-lg);
}
.plan-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: var(--white);
    font-size: .78rem; font-weight: 800;
    padding: 4px 20px; border-radius: 999px;
    letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
.plan-name { font-size: 1.1rem; font-weight: 700; color: var(--gray-800); margin-bottom: 20px; }
.plan-price-wrap { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.plan-price  { font-size: 3.2rem; font-weight: 900; color: var(--navy); line-height: 1; }
.plan-period { font-size: 1rem; color: var(--gray-600); }
.plan-note   { font-size: .83rem; color: var(--gray-400); margin-bottom: 28px; }
.plan-features { margin-bottom: 32px; }
.plan-features li {
    padding: 10px 0 10px 30px;
    position: relative; font-size: .93rem;
    border-bottom: 1px solid var(--gray-100);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.feat-on::before {
    background-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.feat-off { color: var(--gray-400); }
.feat-off::before {
    background-color: var(--gray-200);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.plan-guarantee { text-align: center; font-size: .82rem; color: var(--gray-400); margin-top: 14px; }

/* ─── CTA Section ─── */
.cta-section {
    background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 100%);
    color: var(--white);
}
.cta-inner { text-align: center; }
.cta-inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; margin-bottom: 16px; }
.cta-inner p  { font-size: 1.05rem; color: rgba(255,255,255,.8); margin-bottom: 36px; }

/* ─── Auth Pages (register / login) ─── */
.auth-main { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; padding: 48px 0; background: var(--gray-50); }
.auth-container { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 var(--pad); }
.auth-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 44px 40px;
    box-shadow: var(--shadow-md);
}
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-logo {
    display: inline-block; font-size: 1.3rem; font-weight: 900;
    color: var(--navy); margin-bottom: 24px;
}
/* 日本語 / English トグル（partnerページ専用） */
.ab-jaen-toggle {
    display: inline-flex; gap: 0; margin: 0 auto 20px;
    border: 1px solid var(--blue2, #3182ce); border-radius: 999px; overflow: hidden;
}
.ab-jaen-btn {
    appearance: none; border: 0; background: #fff; cursor: pointer;
    font-size: .82rem; font-weight: 700; color: var(--blue2, #3182ce);
    padding: 6px 18px; line-height: 1.4; transition: background .15s, color .15s;
}
.ab-jaen-btn + .ab-jaen-btn { border-left: 1px solid var(--blue2, #3182ce); }
.ab-jaen-btn.is-active { background: var(--blue2, #3182ce); color: #fff; }
.ab-jaen-btn:hover:not(.is-active) { background: #EBF4FF; }
.auth-logo:hover { text-decoration: none; color: var(--navy); }
.auth-title    { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.auth-subtitle { font-size: .93rem; color: var(--gray-600); }
.auth-form     { display: flex; flex-direction: column; gap: 20px; }
.form-group    { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
    font-size: .88rem; font-weight: 700; color: var(--gray-800);
}
.form-group input,
.form-group select {
    padding: 11px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: .95rem; color: var(--gray-800);
    background: var(--white); font-family: var(--font);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(13,34,68,.1);
}
.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 42px; }
.password-toggle {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    width: 40px; border: none; background: none; cursor: pointer;
    color: var(--gray-400);
}
.password-toggle:hover { color: var(--gray-600); }
.form-note {
    font-size: .82rem; color: var(--gray-400);
    background: var(--gray-50); border-radius: var(--radius-sm);
    padding: 8px 12px; text-align: center;
}
.auth-switch { text-align: center; font-size: .9rem; color: var(--gray-600); margin-top: 20px; }
.auth-switch a { font-weight: 700; color: var(--navy); }
.auth-switch a:hover { color: var(--accent); }

/* ─── Notice ─── */
.notice {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: .9rem;
    margin-bottom: 20px;
}
.notice-success { background: #e6f7ee; border: 1px solid #7ec8a0; color: var(--green); }
.notice-error   { background: #fdf0ef; border: 1px solid #e8a09a; color: var(--red); }
.notice-error p { margin-bottom: 4px; }
.notice-error p:last-child { margin-bottom: 0; }

/* ─── Checkout Page ─── */
.checkout-main { padding: 60px 0; background: var(--gray-50); min-height: calc(100vh - var(--header-h)); }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.checkout-plan {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); padding: 40px;
    box-shadow: var(--shadow-sm);
}
.checkout-plan h2 { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin-bottom: 20px; }
.checkout-features { margin-bottom: 28px; }
.checkout-features li {
    padding: 10px 0 10px 28px; position: relative;
    border-bottom: 1px solid var(--gray-100); font-size: .93rem;
}
.checkout-features li:last-child { border-bottom: none; }
.checkout-features li::before {
    content: '✓'; position: absolute; left: 0;
    color: var(--green); font-weight: 800;
}
.checkout-price-box {
    background: var(--gray-50); border-radius: var(--radius-md);
    padding: 20px; text-align: center;
}
.checkout-plan-name { display: block; font-size: .88rem; color: var(--gray-600); margin-bottom: 8px; }
.checkout-price { font-size: 2.2rem; font-weight: 900; color: var(--navy); }
.checkout-price small { font-size: .9rem; color: var(--gray-600); font-weight: 400; }
.checkout-payment {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); padding: 40px;
    box-shadow: var(--shadow-md);
}
.checkout-title    { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.checkout-subtitle { font-size: .93rem; color: var(--gray-600); margin-bottom: 28px; }
.checkout-badges   { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.badge-security,
.badge-guarantee { font-size: .82rem; color: var(--gray-600); text-align: center; }

/* ─── Result Pages (success / cancel) ─── */
.result-main { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; padding: 60px 0; background: var(--gray-50); }
.result-container { max-width: 520px; margin: 0 auto; text-align: center; padding: 0 var(--pad); }
.result-icon { font-size: 4rem; margin-bottom: 24px; line-height: 1; }
.result-container h1 { font-size: 1.8rem; font-weight: 800; color: var(--navy); margin-bottom: 16px; }
.result-container p  { font-size: 1rem; color: var(--gray-600); margin-bottom: 32px; }

/* ─── Generic Page ─── */
.page-main { padding: 60px 0; }
.page-container { max-width: 760px; }
.page-title { font-size: 1.9rem; font-weight: 800; color: var(--navy); margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--gray-200); }
.page-body { font-size: .97rem; line-height: 1.9; }
.page-body h2, .page-body h3 { margin: 2em 0 .8em; color: var(--navy); font-weight: 700; }
.page-body p  { margin-bottom: 1.2em; }
.page-body ul, .page-body ol { padding-left: 1.5em; margin-bottom: 1.2em; }
.page-body li { margin-bottom: .4em; list-style: revert; }

/* ─── Property Details ─── */
.property-details {
    margin-top: 32px;
    text-align: left;
}
.property-details > h2 {
    color: var(--navy);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gray-200);
}
.property-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.property-detail-card {
    min-width: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    padding: 16px;
    box-shadow: var(--shadow-sm);
.property-image-search-link {
    margin: 22px 0 0;
    text-align: center;
}
.property-image-search-link a {
    display: inline-block;
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.6;
}
.property-image-search-link a:hover { color: var(--accent-dk); }
}
.property-detail-card--identity { background: #f7f8fb; border-color: #dde3ec; }
.property-detail-card--specification { background: #f0f6ff; border-color: #c5dbfb; }
.property-detail-card--financial { background: #fff5f5; border-color: #fecaca; }
.property-detail-card--transaction { background: #fff9ed; border-color: #fbd38d; }
.property-detail-card--location { background: #f7f2ff; border-color: #ddd0ff; }
.property-detail-card--contact { background: #eefbf3; border-color: #bdebcf; }
.property-detail-label {
    display: block;
    color: var(--gray-600);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.35;
    text-transform: uppercase;
}
.property-detail-value {
    display: block;
    overflow-wrap: anywhere;
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 6px;
}
.property-detail-value--highlight { font-size: 1.12rem; }
.property-media-gallery {
    position: relative;
    width: min(70%, 840px);
    margin: 28px auto;
}
.property-media-gallery__viewport {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    box-shadow: var(--shadow-md);
}
.property-media-gallery__slide { margin: 0; }
.property-media-gallery__slide img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: contain;
    background: var(--gray-100);
}
.property-media-gallery__control {
    position: absolute;
    top: calc(50% - 22px);
    z-index: 1;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 34, 68, .78);
    color: var(--white);
    font-size: 1.6rem;
    line-height: 1;
    transition: background var(--transition), transform var(--transition);
}
.property-media-gallery__control:hover { background: var(--navy); transform: scale(1.06); }
.property-media-gallery__control:focus-visible,
.property-media-gallery__dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.property-media-gallery__control--prev { left: 14px; }
.property-media-gallery__control--next { right: 14px; }
.property-media-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.property-media-gallery__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gray-400);
}
.property-media-gallery__dot.is-active { background: var(--navy); }

/* ─── Blog Posts ─── */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.post-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-thumb img { width: 100%; height: 200px; object-fit: cover; }
.post-card-body { padding: 24px; }
.post-date  { font-size: .82rem; color: var(--gray-400); display: block; margin-bottom: 8px; }
.post-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.post-title a { color: var(--gray-800); }
.post-title a:hover { color: var(--navy); }
.post-excerpt { font-size: .88rem; color: var(--gray-600); }

/* ─── Footer ─── */
.site-footer { background: var(--navy-dk); color: rgba(255,255,255,.75); padding-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; padding-bottom: 48px; }
.footer-logo { font-size: 1.25rem; font-weight: 900; color: var(--white); }
.footer-logo:hover { text-decoration: none; color: var(--white); }
.footer-tagline { font-size: .88rem; color: rgba(255,255,255,.45); margin-top: 10px; }
.footer-nav { display: flex; gap: 48px; }
.footer-col h4 { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.footer-col li  { margin-bottom: 10px; }
.footer-col a   { font-size: .88rem; color: rgba(255,255,255,.65); transition: color var(--transition); }
.footer-col a:hover { color: var(--white); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.footer-bottom p { font-size: .82rem; color: rgba(255,255,255,.35); text-align: center; }

/* ─── WP PayPal button overrides ─── */
#paypal-button-container { margin-top: 20px; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .stats-grid    { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-nav  { flex-wrap: wrap; gap: 32px; }
}

@media (max-width: 768px) {
    :root { --pad: 16px; }

    .nav-toggle { display: flex; }
    .site-nav {
        display: none; position: absolute;
        top: var(--header-h); left: 0; right: 0;
        background: var(--white); border-bottom: 1px solid var(--gray-200);
        box-shadow: var(--shadow-md);
        flex-direction: column; align-items: stretch;
        padding: 16px;
    }
    .site-nav.is-open { display: flex; }
    .nav-list { flex-direction: column; gap: 2px; }
    .nav-list a { padding: 12px 16px; display: block; }
    .nav-actions { flex-direction: column; margin-left: 0; margin-top: 8px; gap: 8px; }
    .nav-actions .btn { width: 100%; justify-content: center; }

    .site-header { position: relative; }

    .hero-inner  { padding: 64px 0; }
    .hero-cta    { flex-direction: column; align-items: flex-start; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .features-grid { grid-template-columns: 1fr; }
    .pricing-grid  { grid-template-columns: 1fr; max-width: 100%; }

    .section { padding: 56px 0; }
    .section-head { margin-bottom: 40px; }

    .auth-card { padding: 32px 24px; }

    .checkout-plan, .checkout-payment { padding: 28px 20px; }

    .property-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .property-detail-card { padding: 14px; }
    .property-media-gallery { width: 70%; }
    .property-media-gallery__slide img { height: 320px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.7rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-value { font-size: 1.6rem; }
    .plan-price { font-size: 2.6rem; }
    .property-details-grid { grid-template-columns: 1fr; }
    .property-media-gallery { width: 100%; }
    .property-media-gallery__slide img { height: 220px; }
    .property-media-gallery__control { width: 38px; height: 38px; }
    .property-media-gallery__control--prev { left: 8px; }
    .property-media-gallery__control--next { right: 8px; }
}

/* ===================================================
   Phase 1 追加スタイル — About / Listing Info / front-page
   =================================================== */

/* ---- page-hero ---- */
.page-hero {
    background: var(--navy);
    color: var(--white);
    padding: 64px 0 48px;
    text-align: center;
}
.page-hero h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.page-hero p {
    font-size: 1rem;
    opacity: .75;
    margin: 0;
}

/* ---- exchange badge (hero footer note) ---- */
.hero-note { margin-top: 24px; }
.exchange-badge {
    display: inline-block;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 24px;
    padding: 6px 16px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--white);
}

/* ---- section-bg alternate ---- */
.section-bg { background: #f4f6f9; }

/* ---- btn-outline-white ---- */
.btn-outline-white {
    border: 2px solid rgba(255,255,255,.7);
    color: var(--white);
    background: transparent;
}
.btn-outline-white:hover {
    background: rgba(255,255,255,.15);
    border-color: var(--white);
}

/* ---- btn-outline-primary ---- */
.btn-outline-primary {
    border: 2px solid var(--navy);
    color: var(--navy);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.btn-outline-primary:hover {
    background: var(--navy);
    color: var(--white);
}

/* ---- About Us page ---- */
.about-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 24px;
}
.about-section { margin-bottom: 56px; }
.about-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy);
    border-left: 4px solid var(--accent);
    padding-left: 12px;
    margin-bottom: 24px;
}
.about-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.about-table th,
.about-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e9ef;
    text-align: left;
    vertical-align: top;
}
.about-table th {
    width: 160px;
    color: #555;
    font-weight: 600;
    background: #f8f9fb;
    white-space: nowrap;
}
.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.about-card {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
}
.about-card-icon { font-size: 2rem; margin-bottom: 10px; }
.about-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.about-card p  { font-size: .9rem; color: #555; }
.about-text p  { line-height: 1.9; margin-bottom: 16px; color: #444; }

/* ---- Listing Info page ---- */
.listing-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 56px 24px;
}
.listing-section { margin-bottom: 64px; }
.listing-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}
.listing-section-desc { color: #666; margin-bottom: 32px; }

.exchange-banner {
    background: linear-gradient(135deg, #0d2244, #1a3a6e);
    color: var(--white);
    border-radius: 12px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 56px;
}
.exchange-rate {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
}
.exchange-banner p { margin: 0; font-size: .95rem; opacity: .9; }

.listing-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.listing-feature {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 24px;
}
.listing-feature-icon { font-size: 2rem; margin-bottom: 10px; }
.listing-feature h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.listing-feature p  { font-size: .9rem; color: #555; }

/* ---- Plan Cards ---- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 16px;
}
.plan-card {
    border: 2px solid #dde2ea;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plan-card-featured {
    border-color: var(--accent);
    background: #fffbf2;
    box-shadow: 0 4px 20px rgba(232,160,32,.15);
}
.plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--white);
    font-size: .8rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 12px;
    white-space: nowrap;
}
.plan-name { font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.plan-price { font-size: 2.2rem; font-weight: 800; color: var(--navy); }
.plan-price span { font-size: 1rem; font-weight: 400; color: #888; }
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: .9rem;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.plan-note { font-size: .85rem; color: #888; text-align: center; }

/* ---- Flow Steps ---- */
.flow-grid {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.flow-step {
    flex: 1;
    background: #f8f9fb;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
}
.flow-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
}
.flow-step h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.flow-step p  { font-size: .85rem; color: #555; }
.flow-arrow {
    font-size: 1.5rem;
    color: #aab;
    padding-top: 36px;
    flex-shrink: 0;
}

/* ---- Listing CTA ---- */
.listing-cta {
    background: var(--navy);
    color: var(--white);
    border-radius: 16px;
    padding: 56px;
    text-align: center;
}
.listing-cta h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; }
.listing-cta p  { opacity: .8; margin-bottom: 28px; }
.listing-cta-links { margin-top: 20px; }
.listing-cta-links a { color: rgba(255,255,255,.6); font-size: .9rem; text-decoration: underline; }
.listing-cta-links a:hover { color: var(--white); }

/* ---- footer-company ---- */
.footer-company { font-size: .8rem; opacity: .6; margin-top: 4px; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .about-grid            { grid-template-columns: 1fr; }
    .about-table th        { width: 100px; font-size: .85rem; }
    .listing-features-grid { grid-template-columns: 1fr 1fr; }
    .plan-grid             { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .flow-grid             { flex-direction: column; }
    .flow-arrow            { display: none; }
    .listing-cta           { padding: 36px 24px; }
    .exchange-banner       { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 480px) {
    .listing-features-grid { grid-template-columns: 1fr; }
    .page-hero h1          { font-size: 1.6rem; }
}

/* ===================================================
   front-page investor redesign (fp-*) styles
   =================================================== */

/* ---- Hero ---- */
.fp-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0a1628;
}
.fp-hero-bg {
    position: absolute;
    inset: 0;
    background:
        url('https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=1600&q=80')
        center/cover no-repeat;
    opacity: .25;
}
.fp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,22,40,.92) 0%, rgba(13,34,68,.75) 100%);
}
.fp-hero-inner {
    position: relative;
    z-index: 2;
    padding: 80px 0 60px;
    width: 100%;
}

/* yen ticker */
.fp-yen-ticker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(232,160,32,.2);
    border: 1px solid rgba(232,160,32,.5);
    border-radius: 24px;
    padding: 6px 18px;
    margin-bottom: 28px;
    font-size: .85rem;
}
.fp-yen-label {
    background: var(--accent, #e8a020);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.fp-yen-rate  { font-weight: 800; color: var(--accent, #e8a020); font-size: 1.05rem; }
.fp-yen-note  { color: rgba(255,255,255,.7); font-size: .85rem; }

/* hero title */
.fp-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 32px;
    max-width: 680px;
}
.fp-hero-sub {
    display: block;
    font-size: 1.15rem;
    font-weight: 400;
    color: rgba(255,255,255,.65);
    margin-top: 10px;
}

/* search bar */
.fp-search-bar {
    background: #fff;
    border-radius: 12px;
    padding: 6px 6px 6px 8px;
    max-width: 780px;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.fp-search-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.fp-search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
}
.fp-search-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    margin-bottom: 4px;
}
.fp-search-select {
    border: none;
    outline: none;
    font-size: .95rem;
    font-weight: 500;
    color: #1a1a2e;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.fp-search-divider {
    width: 1px;
    background: #e5e9ef;
    margin: 10px 0;
}
.fp-search-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--accent, #e8a020);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0 40px;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, transform .15s;
    margin-left: 6px;
    letter-spacing: .02em;
}
.fp-search-btn:hover { background: #d08f10; transform: scale(1.03); }

.fp-hero-hint {
    margin-top: 16px;
    color: rgba(255,255,255,.5);
    font-size: .85rem;
}

/* ---- Why Japan ---- */
.fp-why {
    background: var(--navy, #0d2244);
    padding: 32px 0;
}
.fp-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.fp-why-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 28px;
    border-right: 1px solid rgba(255,255,255,.1);
}
.fp-why-item:last-child { border-right: none; }
.fp-why-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.fp-why-text { display: flex; flex-direction: column; gap: 4px; }
.fp-why-text strong { color: #fff; font-size: .95rem; font-weight: 700; }
.fp-why-text span   { color: rgba(255,255,255,.55); font-size: .82rem; line-height: 1.5; }

/* ---- Properties ---- */
.fp-properties { padding: 72px 0; }
.fp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 36px;
}
.fp-section-head h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--navy, #0d2244);
    margin: 0;
}
.fp-view-all {
    color: var(--accent, #e8a020);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
}
.fp-view-all:hover { text-decoration: underline; }

.fp-prop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Property card */
.fp-prop-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e9ef;
    transition: box-shadow .2s, transform .2s;
    background: #fff;
    text-decoration: none;
    color: inherit;
    display: block;
}
.fp-prop-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    transform: translateY(-4px);
}

/* card image — real photo, fixed height */
.fp-prop-img {
    height: 220px;
    position: relative;
    overflow: hidden;
    background: #e5e9ef;
}
.fp-prop-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.fp-prop-card:hover .fp-prop-img img {
    transform: scale(1.04);
}
.fp-prop-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400, #9ca3af);
}

.fp-prop-city {
    position: absolute;
    bottom: 10px;
    left: 12px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.fp-prop-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    color: #fff;
}
.badge-apartment { background: #2563eb; }
.badge-house     { background: #16a34a; }
.badge-commercial{ background: #ea580c; }
.badge-land      { background: #d97706; }
.badge-inventory { background: #7c3aed; }

.fp-prop-body { padding: 18px 20px; }
.fp-prop-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--navy, #0d2244);
    margin-bottom: 4px;
}
.fp-prop-price span {
    font-size: .9rem;
    font-weight: 500;
    color: #888;
    margin-left: 6px;
}
.fp-prop-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 4px;
}
.fp-prop-meta { font-size: .85rem; color: #888; margin: 0 0 14px; }
.fp-prop-yield {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f6f9;
    border-radius: 6px;
    padding: 8px 12px;
}
.fp-yield-label { font-size: .78rem; color: #666; font-weight: 500; }
.fp-yield-val   { font-size: 1rem; font-weight: 800; color: #16a34a; }

/* CTA under grid */
.fp-prop-cta { text-align: center; margin-top: 44px; }
.fp-prop-cta-note { margin-top: 10px; font-size: .85rem; color: #888; }

/* ---- How It Works ---- */
.fp-how {
    background: #f4f6f9;
    padding: 72px 0;
}
.fp-how-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--navy, #0d2244);
    margin-bottom: 48px;
}
.fp-how-steps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
}
.fp-how-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.fp-how-num {
    width: 48px;
    height: 48px;
    background: var(--navy, #0d2244);
    color: #fff;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.fp-how-step h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy, #0d2244); margin-bottom: 8px; }
.fp-how-step p  { font-size: .9rem; color: #555; line-height: 1.6; margin: 0; }
.fp-how-arrow   { font-size: 1.5rem; color: #bbc; padding-top: 48px; flex-shrink: 0; }

/* ---- Agency strip ---- */
.fp-agency-strip {
    background: var(--navy, #0d2244);
    border-top: 3px solid var(--accent, #e8a020);
    padding: 20px 0;
}
.fp-agency-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}
.fp-agency-inner p  { color: rgba(255,255,255,.8); font-size: .95rem; margin: 0; }
.fp-agency-inner strong { color: #fff; }
.fp-agency-link {
    color: var(--accent, #e8a020);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
}
.fp-agency-link:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .fp-hero-title  { font-size: 2.2rem; }
    .fp-prop-grid   { grid-template-columns: repeat(2, 1fr); }
    .fp-why-grid    { grid-template-columns: repeat(2, 1fr); }
    .fp-why-item    { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
    .fp-why-item:nth-child(2n) { border-right: none; }
    .fp-why-item:last-child    { border-bottom: none; }
}
@media (max-width: 700px) {
    .fp-hero-title    { font-size: 1.8rem; }
    .fp-search-inner  { flex-direction: column; gap: 0; }
    .fp-search-divider { height: 1px; width: 100%; margin: 0; }
    .fp-search-btn    { border-radius: 8px; padding: 14px; justify-content: center; margin: 4px 0 0; }
    .fp-prop-grid     { grid-template-columns: 1fr; }
    .fp-why-grid      { grid-template-columns: 1fr; }
    .fp-how-steps     { flex-direction: column; }
    .fp-how-arrow     { display: none; }
    .fp-agency-inner  { flex-direction: column; text-align: center; gap: 10px; }
    .fp-section-head  { flex-direction: column; gap: 8px; }
}

/* ===================================================
   Agency LP (lp-*) styles — page-listing-info
   =================================================== */

/* ---- Hero ---- */
.lp-hero {
    position: relative;
    background: var(--navy, #0d2244);
    padding: 80px 0 64px;
    overflow: hidden;
}
.lp-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -120px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(232,160,32,.18) 0%, transparent 70%);
    pointer-events: none;
}
.lp-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 60px,
            rgba(255,255,255,.015) 60px,
            rgba(255,255,255,.015) 61px
        );
}
.lp-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.lp-hero-tag {
    display: inline-block;
    background: rgba(232,160,32,.2);
    border: 1px solid rgba(232,160,32,.45);
    color: var(--accent, #e8a020);
    font-size: .82rem;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: .05em;
}
.lp-hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 20px;
}
.lp-hero-accent { color: var(--accent, #e8a020); }
.lp-hero-desc {
    color: rgba(255,255,255,.7);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 640px;
    margin: 0 auto 36px;
}
.lp-hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.lp-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 16px 32px;
}
.lp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 28px;
}
.lp-stat-val { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1; }
.lp-stat-lbl { font-size: .75rem; color: rgba(255,255,255,.55); margin-top: 4px; }
.lp-stat-div {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,.2);
}

/* ---- section base ---- */
.lp-section { padding: 80px 0; }
.lp-bg-light { background: #f4f6f9; }
.lp-sec-head {
    text-align: center;
    margin-bottom: 52px;
}
.lp-sec-head h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy, #0d2244);
    margin-bottom: 10px;
}
.lp-sec-head p {
    color: #666;
    font-size: 1rem;
}

/* ---- Opportunity ---- */
.lp-opp-inner {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    align-items: center;
}
.lp-opp-text h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy, #0d2244);
    line-height: 1.4;
    margin-bottom: 20px;
}
.lp-opp-text p {
    color: #444;
    font-size: 1rem;
    line-height: 1.85;
    margin-bottom: 16px;
}
.lp-rate-card {
    background: var(--navy, #0d2244);
    border-radius: 16px;
    padding: 36px 32px;
    text-align: center;
    color: #fff;
}
.lp-rate-label {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.lp-rate-num {
    font-size: 3.8rem;
    font-weight: 900;
    color: var(--accent, #e8a020);
    line-height: 1;
    margin-bottom: 4px;
}
.lp-rate-num span { font-size: 1.3rem; font-weight: 400; color: rgba(255,255,255,.6); }
.lp-rate-sub { font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 20px; }
.lp-rate-bar {
    height: 6px;
    background: rgba(255,255,255,.15);
    border-radius: 3px;
    margin-bottom: 16px;
    overflow: hidden;
}
.lp-rate-fill {
    height: 100%;
    background: var(--accent, #e8a020);
    border-radius: 3px;
}
.lp-rate-note {
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
    margin: 0;
}

/* ---- Features ---- */
.lp-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.lp-feat {
    background: #fff;
    border-radius: 12px;
    padding: 32px 24px;
    position: relative;
    border: 1px solid #e8ecf2;
    transition: box-shadow .2s;
}
.lp-feat:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.lp-feat-num {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 2rem;
    font-weight: 900;
    color: #e8ecf2;
    line-height: 1;
}
.lp-feat-icon { font-size: 2.2rem; margin-bottom: 14px; }
.lp-feat h3 { font-size: 1rem; font-weight: 700; color: var(--navy, #0d2244); margin-bottom: 10px; }
.lp-feat p  { font-size: .9rem; color: #555; line-height: 1.75; margin: 0; }

/* ---- Plans ---- */
.lp-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 24px;
}
.lp-plan {
    border: 2px solid #dde2ea;
    border-radius: 14px;
    padding: 36px 28px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-plan--featured {
    border-color: var(--accent, #e8a020);
    background: #fffbf2;
    box-shadow: 0 6px 32px rgba(232,160,32,.18);
}
.lp-plan-recommend {
    position: absolute;
    top: -15px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent, #e8a020);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 18px;
    border-radius: 12px;
    white-space: nowrap;
}
.lp-plan-name { font-size: 1.05rem; font-weight: 700; color: var(--navy, #0d2244); }
.lp-plan-price {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--navy, #0d2244);
    line-height: 1;
}
.lp-plan-price span { font-size: .95rem; font-weight: 400; color: #888; }
.lp-plan-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.lp-plan-list li { display: flex; align-items: center; gap: 8px; }
.lp-plan-list li.ok::before { content: '✓'; color: #16a34a; font-weight: 700; flex-shrink: 0; }
.lp-plan-list li.no::before { content: '—'; color: #bbb; flex-shrink: 0; }
.lp-plan-list li.no { color: #bbb; }
.lp-plan-btn {
    display: block;
    padding: 13px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95rem;
    text-align: center;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.lp-plan-btn--primary {
    background: var(--accent, #e8a020);
    color: #fff;
    border: 2px solid var(--accent, #e8a020);
}
.lp-plan-btn--primary:hover { background: #d08f10; border-color: #d08f10; }
.lp-plan-btn--outline {
    background: transparent;
    color: var(--navy, #0d2244);
    border: 2px solid var(--navy, #0d2244);
}
.lp-plan-btn--outline:hover { background: var(--navy, #0d2244); color: #fff; }
.lp-plan-note {
    text-align: center;
    font-size: .82rem;
    color: #888;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto;
}

/* ---- Flow ---- */
.lp-flow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}
.lp-flow-step {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid #e8ecf2;
}
.lp-flow-icon { font-size: 2rem; margin-bottom: 6px; }
.lp-flow-num {
    font-size: .72rem;
    font-weight: 700;
    color: var(--accent, #e8a020);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.lp-flow-step h3 { font-size: .95rem; font-weight: 700; color: var(--navy, #0d2244); margin-bottom: 8px; }
.lp-flow-step p  { font-size: .82rem; color: #555; line-height: 1.6; margin: 0; }
.lp-flow-arr { font-size: 1.5rem; color: #bbc; padding-top: 44px; flex-shrink: 0; }

/* ---- FAQ ---- */
.lp-faq-wrap { max-width: 720px; }
.lp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item {
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    overflow: hidden;
}
.lp-faq-item summary {
    padding: 18px 22px;
    font-weight: 600;
    font-size: .97rem;
    color: var(--navy, #0d2244);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    color: var(--accent, #e8a020);
    flex-shrink: 0;
}
.lp-faq-item[open] summary::after { content: '−'; }
.lp-faq-item[open] { border-color: var(--accent, #e8a020); }
.lp-faq-item p {
    padding: 0 22px 18px;
    font-size: .9rem;
    color: #555;
    line-height: 1.75;
    margin: 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 14px;
}

/* ---- Final CTA ---- */
.lp-final-cta {
    background: linear-gradient(135deg, var(--navy, #0d2244) 0%, #1a3a6e 100%);
    padding: 80px 0;
    text-align: center;
}
.lp-final-cta-inner h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}
.lp-final-cta-inner p {
    color: rgba(255,255,255,.7);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 36px;
}
.lp-final-links {
    margin-top: 20px;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}
.lp-final-links a { color: rgba(255,255,255,.55); font-size: .88rem; text-decoration: underline; }
.lp-final-links a:hover { color: #fff; }
.lp-final-links span { color: rgba(255,255,255,.3); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .lp-opp-inner        { grid-template-columns: 1fr; }
    .lp-feat-grid        { grid-template-columns: repeat(2, 1fr); }
    .lp-plan-grid        { grid-template-columns: 1fr; max-width: 400px; }
    .lp-flow             { flex-direction: column; }
    .lp-flow-arr         { display: none; }
    .lp-hero-stats       { flex-direction: column; gap: 16px; padding: 20px; }
    .lp-stat-div         { width: 40px; height: 1px; }
}
@media (max-width: 600px) {
    .lp-hero-title       { font-size: 2rem; }
    .lp-feat-grid        { grid-template-columns: 1fr; }
    .lp-hero-cta         { flex-direction: column; align-items: center; }
    .lp-final-cta-inner h2 { font-size: 1.7rem; }
}

/* ===================================================
   Hero 2-column layout + right property cards
   =================================================== */

/* 2カラム構造 */
.fp-hero-2col {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 48px;
    align-items: center;
    padding: 80px 0 72px;
}

/* Left: 既存スタイルを上書き（padding削除） */
.fp-hero-inner.fp-hero-2col { padding: 80px 0 72px; }
.fp-hero-left .fp-yen-ticker { margin-bottom: 24px; }
.fp-hero-left .fp-hero-title { font-size: 2.6rem; margin-bottom: 28px; }
.fp-hero-left .fp-search-bar { max-width: 100%; }
.fp-hero-left .fp-hero-hint  { margin-top: 14px; }

/* Right container */
.fp-hero-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Hero property card (main) ---- */
.fp-hcard {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.fp-hcard--main .fp-hcard-img {
    height: 160px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 12px;
}
.fp-hcard-img--tokyo   { background: linear-gradient(150deg, #1a1a3e 0%, #2a4a7a 100%); }
.fp-hcard-img--osaka   { background: linear-gradient(150deg, #3a1a1a 0%, #8a3a2a 100%); }
.fp-hcard-img--fukuoka { background: linear-gradient(150deg, #0e2b1a 0%, #1a6040 100%); }

/* grid overlay */
.fp-hcard-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(255,255,255,.04) 30px, rgba(255,255,255,.04) 31px),
        repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(255,255,255,.04) 30px, rgba(255,255,255,.04) 31px);
}

.fp-hcard-badge-city {
    position: relative;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: .73rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: .04em;
}
.fp-hcard-badge-new {
    position: relative;
    background: var(--accent, #e8a020);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
}
.fp-hcard-badge-hot {
    position: relative;
    background: #ef4444;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
}

.fp-hcard-body {
    padding: 14px 16px 16px;
}
.fp-hcard-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy, #0d2244);
    margin-bottom: 3px;
}
.fp-hcard-price span {
    font-size: .85rem;
    font-weight: 500;
    color: #888;
    margin-left: 5px;
}
.fp-hcard-name { font-size: .95rem; font-weight: 600; color: #1a1a2e; margin-bottom: 2px; }
.fp-hcard-meta { font-size: .8rem; color: #999; margin-bottom: 10px; }
.fp-hcard-yield-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fp-hcard-yield {
    display: inline-block;
    background: #f0fdf4;
    color: #16a34a;
    font-size: .8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
}
.fp-hcard-link {
    color: var(--accent, #e8a020);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.fp-hcard-link:hover { text-decoration: underline; }

/* Sub cards row */
.fp-hcard-sub-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.fp-hcard--sub .fp-hcard-img {
    height: 90px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 8px 10px;
}
.fp-hcard-body--sm { padding: 10px 12px 12px; }
.fp-hcard-body--sm .fp-hcard-price { font-size: .95rem; margin-bottom: 2px; }
.fp-hcard-body--sm .fp-hcard-price span { font-size: .75rem; }
.fp-hcard-body--sm .fp-hcard-name { font-size: .82rem; margin-bottom: 6px; }
.fp-hcard-body--sm .fp-hcard-yield { font-size: .75rem; padding: 2px 8px; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
    .fp-hero-2col {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .fp-hero-right { max-width: 520px; }
    .fp-hero-left .fp-hero-title { font-size: 2.2rem; }
}
@media (max-width: 700px) {
    .fp-hero-right { display: none; }
    .fp-hero-2col  { padding: 60px 0 52px; }
}

/* ===================================================
   FX Multi-Currency Bar
   =================================================== */
.fp-fx-bar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(232,160,32,.4);
    border-radius: 28px;
    padding: 8px 18px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.fp-fx-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
}
.fp-fx-items {
    display: flex;
    align-items: center;
    gap: 0;
}
.fp-fx-item {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 0 12px;
}
.fp-fx-cur {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    letter-spacing: .05em;
}
.fp-fx-val {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent, #e8a020);
    font-variant-numeric: tabular-nums;
    transition: opacity .3s;
}
.fp-fx-sep {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,.2);
}
.fp-fx-source {
    font-size: .68rem;
    color: rgba(255,255,255,.3);
    white-space: nowrap;
}
@media (max-width: 700px) {
    .fp-fx-bar    { gap: 8px; padding: 6px 12px; }
    .fp-fx-item   { padding: 0 6px; }
    .fp-fx-label  { display: none; }
    .fp-fx-source { display: none; }
}

/* ================================================================
   My Page Dashboard
   ================================================================ */
.mypage-wrap {
    background: #f4f6f9;
    min-height: calc(100vh - 80px);
    padding: 40px 0 80px;
}
.mypage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.mypage-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a2332;
    margin: 0 0 4px;
}
.mypage-welcome { color: #555; margin: 0 0 8px; }
.mypage-badge {
    display: inline-block;
    background: #e8f0fe;
    color: #1a56db;
    border: 1px solid #c3d3f7;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 0.82rem;
    font-weight: 600;
}
.mypage-badge--warn { background: #fff3cd; color: #856404; border-color: #ffc107; }
.mypage-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border-top: 4px solid #1a56db;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-card--pub { border-top-color: #16a34a; }
.stat-card--dft { border-top-color: #d97706; }
.stat-number { font-size: 2.4rem; font-weight: 800; color: #1a2332; line-height: 1; }
.stat-label { font-size: 0.82rem; color: #666; }
.mypage-section {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    margin-bottom: 24px;
}
.mypage-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.mypage-section-title { font-size: 1.1rem; font-weight: 700; color: #1a2332; margin: 0; }
.mypage-link { font-size: 0.85rem; color: #1a56db; text-decoration: none; }
.mypage-link:hover { text-decoration: underline; }
.mypage-table-wrap { overflow-x: auto; }
.mypage-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.mypage-table th {
    background: #f0f4ff; color: #444; font-weight: 600;
    padding: 10px 12px; text-align: left; white-space: nowrap;
    border-bottom: 2px solid #dde4f0;
}
.mypage-table td { padding: 10px 12px; border-bottom: 1px solid #eef0f4; color: #333; }
.mypage-table tr:last-child td { border-bottom: none; }
.mypage-table tr:hover td { background: #fafbff; }
.prop-name a { color: #1a56db; text-decoration: none; }
.prop-name a:hover { text-decoration: underline; }
.status-pub { background: #dcfce7; color: #15803d; border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; }
.status-dft { background: #fef9c3; color: #a16207; border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; }
.tbl-btn { display: inline-block; padding: 3px 10px; background: #1a56db; color: #fff; border-radius: 5px; font-size: 0.78rem; text-decoration: none; white-space: nowrap; }
.tbl-btn:hover { background: #1342b0; }
.mypage-empty { text-align: center; padding: 40px 20px; color: #888; }
.mypage-empty p { margin-bottom: 16px; }
.mypage-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}
.ql-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 12px;
    background: #f8faff;
    border: 1px solid #dde4f0;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    transition: box-shadow .15s, border-color .15s;
}
.ql-card:hover { box-shadow: 0 4px 12px rgba(26,86,219,.12); border-color: #1a56db; }
.ql-icon { font-size: 1.8rem; }
.ql-label { font-size: 0.85rem; font-weight: 600; }
.ql-card--logout { border-color: #fca5a5; background: #fff5f5; }
.ql-card--logout:hover { border-color: #ef4444; box-shadow: 0 4px 12px rgba(239,68,68,.12); }
@media (max-width: 640px) {
    .mypage-header { flex-direction: column; }
    .mypage-table { font-size: 0.78rem; }
    .mypage-table th, .mypage-table td { padding: 8px; }
}

/* ===== マイページ ヘルプ（使い方ガイド） ===== */
.mypage-help-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg,#1a56db,#123f9e);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 8px 28px rgba(26,86,219,.4);
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
}
.mypage-help-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(26,86,219,.5); }
.mypage-help-launcher.hidden { display: none; }
.mypage-help-launcher-icon { font-size: 1.2rem; line-height: 1; }

.mypage-help-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9100;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.mypage-help-panel.open { display: flex; }

.mypage-help-panel-header {
    background: #1a2332;
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.mypage-help-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,#1a56db,#123f9e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.mypage-help-panel-header h2 {
    font-size: 0.98rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.mypage-help-status {
    font-size: 0.72rem;
    color: #93c5fd;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.mypage-help-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}
.mypage-help-close {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.mypage-help-close:hover { color: #fff; }

.mypage-help-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    background: #f4f6fa;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mypage-help-topic {
    background: #fff;
    border: 1px solid #dde4f0;
    border-radius: 14px;
    padding: 14px 16px;
}
.mypage-help-topic h3 {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1a56db;
    margin: 0 0 8px;
}
.mypage-help-topic p {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.7;
    margin: 0 0 6px;
}
.mypage-help-topic p:last-child { margin-bottom: 0; }
.mypage-help-topic ul { margin: 0; padding-left: 20px; }
.mypage-help-topic li { font-size: 0.85rem; color: #444; line-height: 1.7; }

@media (max-width: 480px) {
    .mypage-help-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); }
    .mypage-help-launcher { right: 14px; bottom: 14px; }
}