/* hs-language: hubsass */
.section-title-wrapper-custom {
text-align: center;
margin-bottom: 28px;
}
.section-subtitle-custom {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--primary-sky);
font-weight: 700;
margin-bottom: 12px;
display: block;
}
.section-title-custom {
font-size: 2.25rem;
font-weight: 700;
color: var(--primary-indigo);
margin-bottom: 16px;
}
.section-desc-custom {
max-width: 600px;
margin: 0 auto;
color: var(--neutral-gray);
font-size: 0.95rem;
line-height: 1.6;
}
.home-chiyoda-hub-banner {
margin-top: 36px;
}
.home-chiyoda-hub-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: linear-gradient(135deg, rgba(0, 44, 101, 0.96) 0%, rgba(0, 70, 150, 0.94) 60%, rgba(0, 153, 68, 0.88) 100%);
border: 1px solid rgba(206, 143, 40, 0.3);
border-radius: 20px;
padding: 28px 36px;
color: #ffffff;
text-decoration: none;
box-shadow: 0 12px 36px rgba(0, 44, 101, 0.12);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.home-chiyoda-hub-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 48px rgba(0, 44, 101, 0.2), 0 0 0 1px rgba(206, 143, 40, 0.5);
border-color: rgba(206, 143, 40, 0.7);
}
.home-chiyoda-hub-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
padding: 4px 12px;
border-radius: 50px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #fce79f;
margin-bottom: 10px;
}
.home-chiyoda-hub-title {
font-size: 1.25rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 8px;
line-height: 1.4;
}
.home-chiyoda-hub-desc {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
margin: 0;
max-width: 680px;
}
.home-chiyoda-hub-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #CE8F28;
color: #ffffff;
padding: 12px 24px;
border-radius: 50px;
font-size: 0.92rem;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(206, 143, 40, 0.4);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.home-chiyoda-hub-card:hover .home-chiyoda-hub-btn {
background: #e5a336;
transform: scale(1.03);
}
@media (max-width: 768px) {
.home-chiyoda-hub-card {
flex-direction: column;
align-items: flex-start;
padding: 22px 20px;
gap: 18px;
}
.home-chiyoda-hub-title {
font-size: 1.05rem;
}
.home-chiyoda-hub-desc {
font-size: 0.82rem;
}
.home-chiyoda-hub-btn-wrap {
width: 100%;
}
.home-chiyoda-hub-btn {
width: 100%;
justify-content: center;
box-sizing: border-box;
padding: 10px 20px;
font-size: 0.88rem;
}
}
:root {
--color-sorai-navy: #1b2a47;
--color-sorai-navy-dark: #0f172a;
--color-sorai-navy-light: #2a4365;
--color-sorai-terracotta: #CE8F28;
--color-sorai-terracotta-dark: #b87b1c;
--color-sorai-gold: #CE8F28;
--color-sorai-slate: #64748b;
--color-sorai-border: #e2e8f0;
--color-sorai-sand: #f8fafc;
--color-line-green: #06c755;
--sh-navy-primary: #06152b;
--sh-navy-deep: #091322;
--sh-gold-primary: #CE8F28;
--sh-gold-light: #E5A93C;
--sh-gold-dark: #b87b1c;
--sh-gold-bg: rgba(206, 143, 40, 0.08);
--sh-gold-border: rgba(206, 143, 40, 0.2);
--sh-bg-base: #faf8f5;
--sh-bg-subtle: #f5f1ea;
--sh-bg-white: #ffffff;
--sh-border-light: rgba(226, 218, 205, 0.7);
--sh-text-body: #475569;
--sh-text-muted: #706b64;
--sh-font-sans: "Noto Sans JP", "Plus Jakarta Sans", sans-serif;
--sh-font-numeric: "Outfit", "Plus Jakarta Sans", sans-serif;
--sh-z-bg-img: 1;
--sh-z-overlay: 2;
--sh-z-content: 3;
--sh-z-fade-mask: 10;
--sh-z-nav-arrow: 20;
--neutral-light: #faf8f5;
--bg-sand: #f5f1ea;
--white: #ffffff;
--neutral-dark: #2c2825;
--neutral-dark-rgb: 44, 40, 37;
--neutral-gray: #706b64;
--neutral-gray-rgb: 112, 107, 100;
--border-color: rgba(226, 218, 205, 0.7);
--border-color-subtle: rgba(226, 218, 205, 0.4);
--border-color-strong: rgba(200, 190, 175, 0.9);
--primary-indigo: #002C65;
--primary-indigo-rgb: 0, 44, 101;
--primary-sky: #CE8F28;
--primary-sky-rgb: 206, 143, 40;
--primary-sky-light: rgba(206, 143, 40, 0.08);
--primary-sky-hover: #b57c20;
--accent-sage: #CE8F28;
--accent-sage-bg: rgba(206, 143, 40, 0.08);
--accent-sage-border: rgba(206, 143, 40, 0.2);
--accent-earth: #CE8F28;
--accent-earth-light: rgba(206, 143, 40, 0.1);
--accent-sunset: #CE8F28;
--accent-sunset-rgb: 206, 143, 40;
--accent-sunset-hover: #b57c20;
--accent-gold: #CE8F28;
--line-green: #06c755;
--line-green-hover: #05b04b;
--primary-emerald: #06c755;
--primary-emerald-hover: #05b04b;
--sunset-accent: #CE8F28;
--card-shadow: 0 10px 30px rgba(120, 110, 95, 0.05);
--hover-shadow: 0 16px 36px rgba(120, 110, 95, 0.09);
--header-shadow: 0 4px 20px rgba(120, 110, 95, 0.04);
--glass-bg: rgba(255, 255, 255, 0.88);
--glass-border: rgba(226, 218, 205, 0.6);
--glass-shadow: 0 12px 32px rgba(120, 110, 95, 0.06);
--font-main: "Noto Sans JP", "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
--font-heading: "Plus Jakarta Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-numeric: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 20px;
--border-radius-pill: 50px;
}
main#app-root {
background-color: var(--neutral-light);
color: var(--neutral-dark);
font-family: var(--font-main);
}
.section-subtitle,
.user-path-kicker,
.hero-glass-kicker,
.bottom-cta-kicker {
color: var(--color-sorai-gold) !important;
font-family: var(--font-numeric, "Outfit", sans-serif);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.section-title,
.user-path-title,
.simulator-title,
.bottom-cta-title,
.hero-glass-title,
.path-card-title,
.card-title,
.gateway-card-title {
color: var(--color-sorai-navy);
font-family: var(--font-heading) !important;
letter-spacing: -0.015em;
}
.section-title-wrapper,
.section-header-centered,
.editorial-header,
.gateway-header {
text-align: center;
margin-bottom: 32px;
}
.section-desc,
.editorial-tagline {
font-family: var(--font-main);
max-width: 680px;
margin: 0 auto;
color: var(--neutral-gray);
font-size: 0.95rem;
line-height: 1.7;
}
.icon-svg {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: -0.125em;
flex-shrink: 0;
}
.hero-section--glass {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
min-height: clamp(620px, 86vh, 880px);
padding: clamp(36px, 5vh, 60px) 0;
overflow: hidden;
color: #1b2a47;
}
.hero-section--glass .hero-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
z-index: var(--sh-z-bg-img);
display: block;
}
.hero-section--glass::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(15, 23, 42, 0.38) 0%,
rgba(15, 23, 42, 0.15) 45%,
rgba(15, 23, 42, 0.02) 80%,
transparent 100%
);
z-index: var(--sh-z-overlay);
pointer-events: none;
}
.hero-section--glass .hero-overlay {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: clamp(60px, 12vh, 140px);
background: linear-gradient(to top, var(--sh-bg-base) 0%, rgba(250, 248, 245, 0) 100%);
z-index: var(--sh-z-overlay);
pointer-events: none;
}
.hero-section--glass .hero-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(16px, 3.5vw, 36px);
position: relative;
z-index: var(--sh-z-content);
display: flex;
align-items: center;
justify-content: flex-start;
}
.hero-section--glass .hero-glass-card {
max-width: 580px;
width: 100%;
margin-right: auto;
margin-left: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.82) 0%,
rgba(255, 255, 255, 0.68) 100%
);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 26px;
padding: 28px 30px;
box-shadow:
0 24px 48px -12px rgba(15, 23, 42, 0.14),
0 4px 16px rgba(15, 23, 42, 0.04),
inset 0 1px 2px rgba(255, 255, 255, 0.95);
box-sizing: border-box;
animation: glassCardSlideIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes glassCardSlideIn {
0% {
opacity: 0;
transform: translateY(28px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.hero-section--glass .hero-glass-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.04em;
color: #CE8F28;
margin-bottom: 12px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 4px 12px;
border-radius: 9999px;
border: 1px solid rgba(206, 143, 40, 0.3);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
max-width: 100%;
white-space: normal;
line-height: 1.35;
box-sizing: border-box;
word-break: break-word;
}
.hero-section--glass .kicker-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #CE8F28;
box-shadow: 0 0 6px rgba(206, 143, 40, 0.5);
flex-shrink: 0;
}
.hero-section--glass .hero-glass-title {
font-family: var(--sh-font-sans);
font-size: clamp(1.25rem, 1.8vw, 1.55rem);
font-weight: 800;
line-height: 1.4;
letter-spacing: -0.015em;
color: #091322;
margin-bottom: 10px;
word-break: keep-all;
overflow-wrap: break-word;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.hero-section--glass .hero-glass-title .hero-title-line {
display: inline-block;
}
.hero-section--glass .hero-glass-lead {
font-family: var(--sh-font-sans);
font-size: clamp(0.82rem, 0.9vw, 0.88rem);
line-height: 1.65;
color: #1e293b;
font-weight: 500;
margin-bottom: 14px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.hero-section--glass .hero-glass-trust-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.hero-section--glass .hero-glass-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.95);
border-radius: 50px;
font-size: 0.72rem;
font-weight: 700;
color: #091322;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
white-space: nowrap;
}
.hero-section--glass .hero-glass-pill i {
color: #CE8F28;
font-size: 0.8rem;
}
.hero-section--glass .hero-glass-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.hero-section--glass .hero-glass-btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #06c755 0%, #05b04b 100%);
color: #ffffff;
font-size: clamp(0.92rem, 1.05vw, 1rem);
font-weight: 700;
padding: 13px 22px;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 8px 24px rgba(6, 199, 85, 0.35);
transition: all 0.25s ease;
text-align: center;
}
.hero-section--glass .hero-glass-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(6, 199, 85, 0.45);
color: #ffffff;
}
.hero-section--glass .hero-glass-btn-primary i {
font-size: 1.25rem;
color: #ffffff;
}
.hero-section--glass .hero-cta-microcopy {
display: block;
width: 100%;
font-size: 0.74rem;
color: var(--sh-text-muted);
margin-top: 2px;
line-height: 1.4;
text-align: center;
}
.hero-section--glass .hero-glass-secondary-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 6px;
}
.hero-section--glass .hero-glass-btn-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #091322;
font-size: clamp(0.72rem, 0.82vw, 0.78rem);
font-weight: 700;
padding: 9px 8px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.9);
text-decoration: none;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
transition: all 0.2s ease;
text-align: center;
line-height: 1.25;
min-height: 42px;
}
.hero-section--glass .hero-glass-btn-secondary:hover {
background: #FFFFFF;
border-color: rgba(206, 143, 40, 0.4);
color: #CE8F28;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.hero-section--glass .hero-glass-btn-secondary i {
font-size: 0.85rem;
color: #CE8F28;
margin-right: 2px;
}
.hero-section--glass .hero-glass-btn-secondary span {
color: #091322;
}
@media (max-width: 768px) {
.hero-section--glass {
min-height: clamp(540px, 80svh, 680px);
height: calc(100svh - 120px);
max-height: 720px;
padding: 18px 0 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: none;
position: relative;
}
.hero-section--glass .hero-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: none;
min-height: 0;
object-fit: cover;
object-position: center 30%;
display: block;
z-index: 1;
}
.hero-section--glass::before {
content: "";
display: block;
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(7, 18, 34, 0.55) 0%,
rgba(7, 18, 34, 0.20) 28%,
rgba(7, 18, 34, 0.00) 45%,
rgba(7, 18, 34, 0.00) 60%,
rgba(7, 18, 34, 0.40) 78%,
rgba(7, 18, 34, 0.88) 100%
);
z-index: 2;
pointer-events: none;
}
.hero-section--glass .hero-overlay {
display: none;
}
.hero-section--glass .hero-container {
position: relative;
padding: 0 16px;
margin-top: 0;
z-index: 5;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-section--glass .hero-glass-card {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
max-width: 100%;
width: 100%;
height: 100%;
margin: 0;
animation: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-section--glass .hero-glass-kicker {
display: none;
}
.hero-section--glass .hero-glass-title {
font-size: clamp(1.15rem, 5vw, 1.38rem);
line-height: 1.32;
margin-bottom: 0;
font-weight: 800;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.95);
letter-spacing: -0.01em;
text-align: left;
word-break: keep-all;
overflow-wrap: anywhere;
}
.hero-section--glass .hero-glass-title span {
color: #ffffff;
text-shadow: inherit;
}
.hero-section--glass .hero-br-pc {
display: none;
}
.hero-section--glass .hero-glass-lead {
display: none;
}
.hero-section--glass .hero-glass-trust-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
justify-content: flex-start;
}
.hero-section--glass .hero-glass-pill {
padding: 4px 10px;
font-size: 0.68rem;
font-weight: 700;
border-radius: 20px;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
gap: 5px;
}
.hero-section--glass .hero-glass-pill i {
color: #F6C774;
font-size: 0.75rem;
}
.hero-section--glass .hero-glass-pill:nth-child(3) {
display: none;
}
.hero-section--glass .hero-glass-actions {
width: 100%;
max-width: 100%;
margin-top: auto;
padding-top: 16px;
}
.hero-section--glass .hero-glass-btn-primary {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 13px 20px;
font-size: 0.95rem;
font-weight: 800;
border-radius: 50px;
background: linear-gradient(135deg, #06c755 0%, #05b04c 100%);
color: #ffffff;
box-shadow: 0 6px 20px rgba(6, 199, 85, 0.45);
border: 1px solid rgba(255, 255, 255, 0.25);
white-space: normal;
text-align: center;
gap: 8px;
}
.hero-section--glass .hero-cta-microcopy {
color: rgba(255, 255, 255, 0.85);
font-size: 0.68rem;
font-weight: 600;
margin-top: 6px;
line-height: 1.35;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
text-align: center;
}
.hero-section--glass .hero-glass-secondary-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-top: 8px;
}
.hero-section--glass .hero-glass-btn-secondary {
min-height: 42px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 6px;
font-size: 0.72rem;
font-weight: 700;
text-align: center;
white-space: nowrap;
letter-spacing: -0.02em;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease;
}
.hero-section--glass .hero-glass-btn-secondary span {
color: #ffffff;
}
.hero-section--glass .hero-glass-btn-secondary i {
color: #F6C774;
font-size: 0.82rem;
margin-right: 4px;
}
}
@media (max-width: 390px) {
.hero-section--glass .hero-glass-secondary-row {
grid-template-columns: 1fr;
gap: 6px;
}
.hero-section--glass .hero-glass-btn-secondary {
min-height: 40px;
padding: 8px 12px;
font-size: 12.5px;
}
}
.compact-news-strip-section {
padding: 20px 0;
background: var(--sh-bg-base);
border-bottom: 1px solid var(--sh-border-light);
}
.compact-news-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 clamp(16px, 3.5vw, 24px);
}
.compact-news-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.compact-news-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--sh-gold-dark);
background: var(--sh-gold-bg);
padding: 3px 10px;
border-radius: 9999px;
border: 1px solid var(--sh-gold-border);
}
.compact-news-all-link {
font-size: 12px;
font-weight: 600;
color: var(--sh-text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.compact-news-all-link:hover {
color: var(--sh-navy-primary);
}
.compact-news-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.compact-news-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 14px;
background: var(--sh-bg-white);
border: 1px solid var(--sh-border-light);
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
}
.compact-news-item:hover {
border-color: rgba(206, 143, 40, 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(9, 19, 34, 0.04);
}
.compact-news-content {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 0;
}
.compact-news-date {
font-size: 12px;
font-weight: 700;
color: var(--sh-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.compact-news-title {
font-size: 13.5px;
font-weight: 600;
color: var(--sh-navy-primary);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.compact-news-arrow {
font-size: 11px;
color: var(--sh-text-muted);
flex-shrink: 0;
transition: transform 0.2s ease, color 0.2s ease;
}
.compact-news-item:hover .compact-news-arrow {
color: var(--sh-gold-primary);
transform: translateX(2px);
}
@media (max-width: 768px) {
.compact-news-item {
padding: 10px 12px;
}
.compact-news-content {
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.compact-news-arrow {
display: block;
font-size: 11px;
margin-left: 8px;
}
}
.features-carousel-section {
background-color: var(--sh-bg-base);
border-top: 1px solid var(--sh-border-light);
border-bottom: 1px solid var(--sh-border-light);
padding: clamp(52px, 7vw, 84px) 0;
position: relative;
z-index: 3;
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: 0 600px;
}
.features-carousel-section .section-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
.features-swipe-guidance {
display: flex;
justify-content: center;
margin-top: 14px;
margin-bottom: 4px;
}
.features-swipe-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(206, 143, 40, 0.08);
border: 1px solid rgba(206, 143, 40, 0.24);
color: var(--sh-gold-dark);
font-size: 0.78rem;
font-weight: 600;
padding: 6px 16px;
border-radius: 9999px;
letter-spacing: 0.03em;
box-shadow: 0 2px 8px rgba(206, 143, 40, 0.04);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.features-swipe-badge i {
color: var(--sh-gold-primary);
font-size: 0.85rem;
}
.features-carousel-wrapper {
position: relative;
max-width: 1200px;
min-height: 280px;
margin: 36px auto 0;
padding: 0 52px;
}
.features-carousel-track {
position: relative;
display: flex;
gap: 20px;
min-height: 240px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
touch-action: pan-y pinch-zoom;
user-select: none;
padding: 12px 4px 20px;
align-items: stretch;
}
.features-carousel-track::-webkit-scrollbar {
display: none;
}
.features-carousel-track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
.features-carousel-card {
flex: 0 0 calc(25% - 15px);
min-width: calc(25% - 15px);
max-width: calc(25% - 15px);
scroll-snap-align: start;
background: #FFFFFF;
border-radius: 18px;
padding: 32px 24px 28px;
border: 1px solid var(--sh-border-light);
box-shadow: 0 4px 20px rgba(9, 19, 34, 0.04), 0 2px 8px rgba(206, 143, 40, 0.04);
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
box-sizing: border-box;
position: relative;
}
.features-carousel-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(206, 143, 40, 0.12), 0 4px 14px rgba(9, 19, 34, 0.06);
border-color: rgba(206, 143, 40, 0.45);
}
.features-carousel-card .feature-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.features-carousel-card .feature-icon-wrapper {
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(206, 143, 40, 0.08);
color: var(--sh-gold-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
transition: transform 0.35s ease, background-color 0.35s ease;
}
.features-carousel-card:hover .feature-icon-wrapper {
transform: scale(1.08);
background: rgba(206, 143, 40, 0.16);
}
.features-carousel-card .feature-meta {
display: flex;
align-items: center;
gap: 10px;
}
.features-carousel-card .feature-number {
font-family: var(--sh-font-numeric, "EB Garamond", serif, sans-serif);
font-size: 1.6rem;
font-weight: 700;
color: rgba(206, 143, 40, 0.38);
line-height: 1;
letter-spacing: -0.02em;
}
.features-carousel-card .feature-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 82px;
text-align: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--sh-gold-dark);
background: rgba(206, 143, 40, 0.09);
border: 1px solid rgba(206, 143, 40, 0.24);
padding: 4px 10px;
border-radius: 9999px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.features-carousel-card .feature-card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.features-carousel-card .feature-title {
font-family: var(--sh-font-sans, "Noto Sans JP", sans-serif);
font-size: 1.05rem;
font-weight: 700;
color: var(--sh-navy-primary);
line-height: 1.45;
margin-bottom: 12px;
letter-spacing: -0.01em;
text-wrap: balance;
word-break: auto-phrase;
min-height: calc(1.45em * 2);
}
.features-carousel-card .feature-desc {
font-size: 0.85rem;
color: var(--sh-text-body);
line-height: 1.68;
margin-bottom: 0;
flex-grow: 1;
text-wrap: pretty;
}
.features-nav-arrow {
position: absolute;
top: calc(50% - 10px);
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid var(--sh-border-light);
color: var(--sh-navy-primary);
box-shadow: 0 4px 14px rgba(9, 19, 34, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
outline: none;
}
.features-nav-arrow:hover {
background: var(--sh-gold-primary);
color: #FFFFFF;
border-color: var(--sh-gold-primary);
box-shadow: 0 6px 18px rgba(206, 143, 40, 0.28);
transform: translateY(-50%) scale(1.05);
}
.features-nav-arrow.disabled {
opacity: 0.25;
cursor: not-allowed;
pointer-events: none;
}
.features-nav-prev {
left: 0;
}
.features-nav-next {
right: 0;
}
.features-dots-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 24px;
}
.features-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(9, 19, 34, 0.16);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.features-dot:hover {
background: rgba(206, 143, 40, 0.5);
}
.features-dot.active {
width: 28px;
border-radius: 9999px;
background: var(--sh-gold-primary);
box-shadow: 0 2px 8px rgba(206, 143, 40, 0.35);
}
@media (max-width: 1099px) and (min-width: 769px) {
.features-carousel-wrapper {
padding: 0 44px;
}
.features-carousel-card {
flex: 0 0 calc(50% - 10px);
min-width: calc(50% - 10px);
max-width: calc(50% - 10px);
scroll-snap-align: start;
}
}
@media (max-width: 768px) {
.features-carousel-section {
padding: 48px 0 54px;
}
.features-carousel-section .section-container {
padding: 0;
}
.features-carousel-section .section-title-wrapper {
padding: 0 20px;
}
.features-carousel-wrapper {
margin-top: 18px;
padding: 0;
}
.features-nav-arrow {
display: none;
}
.features-carousel-track {
gap: 12px;
padding: 8px 7%;
scroll-snap-type: x mandatory;
}
.features-carousel-card {
flex: 0 0 86%;
width: 86%;
min-width: 86%;
max-width: 86%;
scroll-snap-align: center;
padding: 24px 20px 20px;
border-radius: 16px;
}
.features-carousel-card .feature-title {
font-size: 1.02rem;
line-height: 1.45;
}
.features-carousel-card .feature-desc {
font-size: 0.84rem;
line-height: 1.62;
}
.features-dots-indicator {
margin-top: 16px;
}
}
@media (max-width: 390px) {
.features-carousel-track {
gap: 10px;
padding: 8px 6%;
}
.features-carousel-card {
flex: 0 0 88%;
width: 88%;
min-width: 88%;
max-width: 88%;
padding: 20px 16px 18px;
}
.features-carousel-card .feature-title {
font-size: 0.96rem;
}
.features-carousel-card .feature-icon-wrapper {
width: 48px;
height: 48px;
font-size: 1.25rem;
}
}
.home-quote-simulator-section--card {
padding: clamp(40px, 6vh, 80px) 0;
background: var(--sh-bg-base);
content-visibility: auto;
contain-intrinsic-size: 0 600px;
}
.simulator-card-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(16px, 3.5vw, 36px);
}
.simulator-outer-card {
background: var(--sh-bg-white);
border-radius: 24px;
border: 1px solid var(--sh-border-light);
box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.08);
overflow: hidden;
padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 36px);
position: relative;
}
.sorai-tool-header {
text-align: center;
max-width: 760px;
margin: 0 auto clamp(24px, 3.5vw, 36px);
}
.sorai-tool-badge-wrapper {
margin-bottom: 12px;
}
.sorai-tool-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--sh-gold-dark);
background: var(--sh-gold-bg);
padding: 4px 14px;
border-radius: 9999px;
border: 1px solid var(--sh-gold-border);
}
.sorai-tool-title {
font-family: var(--sh-font-sans);
font-size: clamp(1.5rem, 2.5vw, 2.1rem);
font-weight: 800;
color: var(--sh-navy-primary);
line-height: 1.3;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.sorai-tool-subtitle {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
font-weight: 700;
color: var(--sh-gold-dark);
margin-bottom: 10px;
}
.sorai-tool-desc {
font-size: clamp(0.85rem, 1vw, 0.95rem);
color: var(--sh-text-body);
line-height: 1.65;
margin-bottom: 16px;
}
.sorai-trust-pills {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.sorai-trust-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
background: var(--sh-bg-subtle);
border: 1px solid var(--sh-border-light);
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
color: var(--sh-navy-deep);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.sorai-trust-pill i {
color: var(--sh-gold-primary);
}
.suite-tabs-container {
margin-bottom: 16px;
position: relative;
}
.suite-tabs-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 4px;
}
.suite-tabs-nav::-webkit-scrollbar { display: none; }
.suite-tab-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
font-size: 13.5px;
font-weight: 700;
color: var(--sh-navy-primary, #06152b);
background: var(--sh-bg-subtle, #f5f1ea);
border: 1px solid var(--sh-border-light, #e2d9cd);
border-radius: 9999px;
cursor: pointer;
transition: all 0.25s ease;
white-space: nowrap;
}
.suite-tab-btn i {
font-size: 14px;
color: var(--sh-text-muted);
transition: color 0.25s ease;
}
.suite-tab-btn:hover {
color: var(--sh-navy-primary);
background: #ECE5DA;
}
.suite-tab-btn.active {
color: #FFFFFF;
background: var(--sh-navy-primary, #06152b);
border-color: var(--sh-navy-primary, #06152b);
box-shadow: 0 4px 12px rgba(9, 19, 34, 0.18);
}
.suite-tab-btn.active i {
color: var(--sh-gold-light, #E5A93C);
}
.suite-swipe-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 6px 14px;
margin-bottom: 20px;
background: rgba(206, 143, 40, 0.08);
border: 1px solid rgba(206, 143, 40, 0.2);
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
color: var(--sh-gold-dark);
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.suite-swipe-bar .swipe-arrow-anim {
font-size: 11px;
color: var(--sh-gold-primary);
}
.suite-carousel-wrapper {
position: relative;
width: 100%;
min-height: clamp(520px, 60vh, 760px);
margin: 0 auto;
transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.suite-carousel-wrapper::before,
.suite-carousel-wrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: clamp(20px, 4vw, 44px);
z-index: var(--sh-z-fade-mask);
pointer-events: none;
}
.suite-carousel-wrapper::before {
left: 0;
background: linear-gradient(to right, var(--sh-bg-white) 0%, rgba(255, 255, 255, 0) 100%);
}
.suite-carousel-wrapper::after {
right: 0;
background: linear-gradient(to left, var(--sh-bg-white) 0%, rgba(255, 255, 255, 0) 100%);
}
.suite-nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--sh-bg-white);
border: 1px solid var(--sh-border-light);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--sh-navy-primary);
font-size: 15px;
cursor: pointer;
z-index: var(--sh-z-nav-arrow);
transition: all 0.25s ease;
}
.suite-nav-arrow:hover {
background: var(--sh-navy-primary);
color: #FFFFFF;
border-color: var(--sh-navy-primary);
box-shadow: 0 6px 20px rgba(9, 19, 34, 0.25);
transform: translateY(-50%) scale(1.08);
}
.suite-nav-arrow.disabled {
opacity: 0.25;
cursor: not-allowed;
pointer-events: none;
}
.suite-nav-prev {
left: 8px;
}
.suite-nav-next {
right: 8px;
}
.suite-carousel-track {
display: flex;
align-items: flex-start;
gap: 24px;
min-height: 480px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
box-sizing: border-box;
padding: 0;
border-radius: 16px;
cursor: grab;
touch-action: pan-y pinch-zoom;
user-select: none;
}
.suite-carousel-track::-webkit-scrollbar { display: none; }
.suite-carousel-track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
}
.suite-panel {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 460px;
scroll-snap-align: start;
scroll-snap-stop: always;
box-sizing: border-box;
outline: none;
opacity: 1;
transform: none;
filter: none;
transition: opacity 0.3s ease;
cursor: default;
}
.suite-panel.active {
opacity: 1;
transform: none;
filter: none;
cursor: default;
}
.suite-panel .quote-sim-container,
.suite-panel .inspection-hub-card,
.suite-panel .home-hearing-banner-section .hearing-banner-card,
.suite-panel .suite-standalone-card {
width: 100% !important;
max-width: 740px !important;
box-sizing: border-box !important;
margin: 0 auto !important;
}
.suite-panel .quote-sim-container {
padding: 0;
}
.suite-panel .quote-intro-section {
display: none !important;
}
.suite-panel .home-inspection-section {
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.suite-panel .home-inspection-section .section-container {
padding: 0 !important;
max-width: 740px !important;
width: 100% !important;
margin: 0 auto !important;
}
.suite-panel .inspection-header,
.suite-panel .inspection-next-banner {
display: none !important;
}
.suite-panel .inspection-hub-card {
display: block !important;
background: #FFFFFF;
border-radius: 20px;
border: 1px solid var(--sh-border-light);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.suite-panel .inspection-hub-card.has-sample-open {
display: block !important;
}
.suite-panel .inspection-left-panel {
padding: clamp(20px, 3.5vw, 32px);
background: #FFFFFF;
border: none;
}
.suite-panel .inspection-hub-card.has-sample-open .inspection-left-panel {
border-right: none !important;
border-bottom: 1px solid var(--sh-border-light);
}
.suite-panel .inspection-right-panel {
background: #F8FAFC;
border-top: 1px solid var(--sh-border-light);
padding: 20px 16px;
}
.inspection-sample-toggle-wrap {
text-align: center;
margin-top: 14px;
margin-bottom: 6px;
}
.inspection-sample-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 480px;
padding: 11px 20px;
font-size: 0.84rem;
font-weight: 700;
color: #936011;
background: rgba(206, 143, 40, 0.08);
border: 1px solid rgba(206, 143, 40, 0.35);
border-radius: 10px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
}
.inspection-sample-toggle-btn:hover {
background: rgba(206, 143, 40, 0.15);
border-color: #CE8F28;
color: #091322;
box-shadow: 0 4px 14px rgba(206, 143, 40, 0.18);
transform: translateY(-1px);
}
.inspection-sample-toggle-btn.is-open {
background: #091322;
color: #ffffff;
border-color: #091322;
box-shadow: 0 4px 14px rgba(9, 19, 34, 0.2);
}
.inspection-sample-toggle-btn.is-open .text-gold,
.inspection-sample-toggle-btn.is-open .sample-chevron-icon {
color: #d4af37;
}
.mockup-close-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 5px 10px;
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
}
.mockup-close-btn:hover {
background: #091322;
color: #ffffff;
border-color: #091322;
}
.mockup-swipe-guide {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, rgba(206, 143, 40, 0.08) 0%, rgba(6, 21, 43, 0.04) 100%);
border: 1px dashed rgba(206, 143, 40, 0.35);
border-radius: 8px;
padding: 7px 14px;
margin-bottom: 12px;
font-size: 0.74rem;
font-weight: 600;
color: #06152B;
}
.mockup-swipe-guide .swipe-arrow-icon {
color: #CE8F28;
font-size: 0.72rem;
}
.mockup-sheet-slider-container {
position: relative;
width: 100%;
}
.mockup-sheet-slider-track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
box-sizing: border-box;
padding-bottom: 6px;
}
.mockup-sheet-slider-track::-webkit-scrollbar {
display: none;
}
.mockup-slide-item {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
box-sizing: border-box;
}
.mockup-slide-item .report-sheet {
max-height: 640px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: 14px;
border: 1px solid #cbd5e1;
box-shadow: 0 8px 24px rgba(9, 19, 34, 0.08);
}
.mockup-slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #cbd5e1;
box-shadow: 0 4px 14px rgba(9, 19, 34, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #091322;
font-size: 13px;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
}
.mockup-slide-arrow:hover {
background: #091322;
color: #ffffff;
border-color: #091322;
transform: translateY(-50%) scale(1.08);
}
.mockup-slide-arrow.disabled {
opacity: 0.2;
cursor: not-allowed;
pointer-events: none;
}
.mockup-slide-prev {
left: -14px;
}
.mockup-slide-next {
right: -14px;
}
@media (max-width: 768px) {
.mockup-slide-arrow {
display: none;
}
}
.mockup-dots-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 14px;
margin-bottom: 12px;
}
.mockup-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
border: none;
padding: 0;
cursor: pointer;
transition: all 0.25s ease;
}
.mockup-dot.active {
width: 24px;
border-radius: 4px;
background: #CE8F28;
}
.mockup-bottom-close-wrap {
text-align: center;
margin-top: 4px;
}
.mockup-bottom-close-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
font-size: 0.78rem;
font-weight: 700;
color: #64748b;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.mockup-bottom-close-btn:hover {
background: #091322;
color: #ffffff;
border-color: #091322;
}
.suite-panel .home-hearing-banner-section {
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.suite-panel .home-hearing-banner-section .section-container {
padding: 0 !important;
max-width: 740px !important;
width: 100% !important;
margin: 0 auto !important;
}
.suite-panel .home-hearing-banner-section .hearing-banner-card {
border: none;
box-shadow: none;
background: transparent;
padding: 0 !important;
}
.suite-panel .home-hearing-banner-section .hearing-banner-content {
display: none !important;
}
.suite-panel .home-hearing-banner-section .hearing-embed-card {
background: #FFFFFF;
border: 1px solid var(--sh-border-light);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
width: 100% !important;
max-width: 740px !important;
margin: 0 auto !important;
}
.suite-panel .home-hearing-banner-section .hearing-embed-iframe {
width: 100%;
height: 580px;
border: none;
display: block;
}
.suite-dots-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 24px;
}
.suite-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sh-border-light);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.suite-dot:hover {
background: var(--sh-text-muted);
}
.suite-dot.active {
width: 28px;
border-radius: 5px;
background: var(--sh-navy-primary);
}
.suite-swipe-icon {
margin-right: 4px;
}
.suite-standalone-card {
background: #FFFFFF;
border: 1px solid var(--sh-border-light);
border-radius: 20px;
padding: clamp(24px, 4vw, 40px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
max-width: 740px;
margin: 0 auto;
}
.suite-card-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--sh-gold-dark);
background: var(--sh-gold-bg);
padding: 4px 12px;
border-radius: 9999px;
border: 1px solid var(--sh-gold-border);
margin-bottom: 12px;
}
.suite-card-title {
font-size: clamp(1.25rem, 2vw, 1.6rem);
font-weight: 800;
color: var(--sh-navy-primary);
margin-bottom: 10px;
line-height: 1.35;
}
.suite-card-desc {
font-size: 14px;
color: var(--sh-text-body);
line-height: 1.65;
margin-bottom: 20px;
}
.suite-features-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 24px;
background: var(--sh-bg-subtle);
padding: 16px;
border-radius: 12px;
border: 1px solid var(--sh-border-light);
}
.suite-feature-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
line-height: 1.5;
color: var(--sh-text-body);
}
.suite-feature-item i {
color: var(--sh-gold-primary);
font-size: 13px;
margin-top: 2px;
}
.suite-cta-btn-line {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 48px;
background: linear-gradient(135deg, #06C755 0%, #05a847 100%);
color: #FFFFFF;
font-size: 14.5px;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(6, 199, 85, 0.28);
transition: all 0.25s ease;
}
.suite-cta-btn-line:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(6, 199, 85, 0.38);
color: #FFFFFF;
}
.suite-cta-btn-navy {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 48px;
background: linear-gradient(135deg, #091322 0%, #1e293b 100%);
color: #FFFFFF;
font-size: 14.5px;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(9, 19, 34, 0.2);
transition: all 0.25s ease;
}
.suite-cta-btn-navy:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(9, 19, 34, 0.3);
color: #FFFFFF;
}
.suite-card-center-header {
text-align: center;
}
.suite-cta-button-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.suite-cta-btn-line .fa-line {
font-size: 20px;
}
.gateway-carousel-section {
background-color: var(--sh-bg-base);
border-top: 1px solid var(--sh-border-light);
padding: clamp(52px, 7vw, 84px) 0;
position: relative;
z-index: 3;
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: 0 600px;
}
.gateway-carousel-section .section-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
.gateway-carousel-section .section-lead-text {
text-align: center;
font-size: 0.95rem;
color: var(--sh-text-muted);
margin-top: 8px;
margin-bottom: 0;
}
.gateway-swipe-guidance {
display: flex;
justify-content: center;
margin-top: 14px;
margin-bottom: 4px;
}
.gateway-swipe-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(206, 143, 40, 0.08);
border: 1px solid rgba(206, 143, 40, 0.24);
color: var(--sh-gold-dark);
font-size: 0.78rem;
font-weight: 600;
padding: 6px 16px;
border-radius: 9999px;
letter-spacing: 0.03em;
box-shadow: 0 2px 8px rgba(206, 143, 40, 0.04);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.gateway-swipe-badge i {
color: var(--sh-gold-primary);
font-size: 0.85rem;
}
.gateway-carousel-wrapper {
position: relative;
max-width: 1240px;
margin: 36px auto 0;
padding: 0 52px;
}
.gateway-carousel-track {
position: relative;
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
touch-action: pan-y pinch-zoom;
user-select: none;
padding: 12px 4px 20px;
align-items: stretch;
}
.gateway-carousel-track::-webkit-scrollbar {
display: none;
}
.gateway-carousel-track.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
.gateway-carousel-card {
flex: 0 0 310px;
min-width: 310px;
max-width: 310px;
scroll-snap-align: start;
background: #FFFFFF;
border-radius: 18px;
padding: 28px 24px 24px;
border: 1px solid var(--sh-border-light);
box-shadow: 0 4px 20px rgba(9, 19, 34, 0.04), 0 2px 8px rgba(206, 143, 40, 0.04);
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
box-sizing: border-box;
position: relative;
text-decoration: none;
color: inherit;
}
.gateway-carousel-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(206, 143, 40, 0.12), 0 4px 14px rgba(9, 19, 34, 0.06);
border-color: rgba(206, 143, 40, 0.45);
}
.gateway-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.gateway-icon-wrapper {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
transition: transform 0.35s ease;
}
.gateway-carousel-card:hover .gateway-icon-wrapper {
transform: scale(1.08);
}
.gateway-meta {
display: flex;
align-items: center;
gap: 8px;
}
.gateway-category-badge {
display: inline-flex;
align-items: center;
font-size: 0.72rem;
font-weight: 700;
color: var(--sh-gold-dark);
background: rgba(206, 143, 40, 0.09);
border: 1px solid rgba(206, 143, 40, 0.22);
padding: 3px 9px;
border-radius: 9999px;
letter-spacing: 0.04em;
white-space: nowrap;
}
.gateway-arrow-indicator {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(9, 19, 34, 0.04);
color: var(--sh-navy-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
transition: all 0.25s ease;
}
.gateway-carousel-card:hover .gateway-arrow-indicator {
background: var(--sh-gold-primary);
color: #FFFFFF;
transform: translateX(3px);
}
.gateway-card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.gateway-title {
font-family: var(--sh-font-sans, "Noto Sans JP", sans-serif);
font-size: 1.12rem;
font-weight: 700;
color: var(--sh-navy-primary);
line-height: 1.45;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.gateway-subtitle {
font-size: 0.82rem;
font-weight: 600;
color: var(--sh-gold-dark);
line-height: 1.4;
margin-bottom: 10px;
}
.gateway-desc {
font-size: 0.84rem;
color: var(--sh-text-body);
line-height: 1.65;
margin-bottom: 0;
flex-grow: 1;
}
.gateway-card-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--sh-border-light);
}
.gateway-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--sh-navy-primary);
transition: color 0.2s ease, gap 0.2s ease;
}
.gateway-carousel-card:hover .gateway-action-btn {
color: var(--sh-gold-primary);
gap: 9px;
}
.gateway-action-btn i {
font-size: 0.72rem;
transition: transform 0.2s ease;
}
.gateway-nav-arrow {
position: absolute;
top: calc(50% - 10px);
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid var(--sh-border-light);
color: var(--sh-navy-primary);
box-shadow: 0 4px 14px rgba(9, 19, 34, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
outline: none;
}
.gateway-nav-arrow:hover {
background: var(--sh-gold-primary);
color: #FFFFFF;
border-color: var(--sh-gold-primary);
box-shadow: 0 6px 18px rgba(206, 143, 40, 0.28);
transform: translateY(-50%) scale(1.05);
}
.gateway-nav-arrow.disabled {
opacity: 0.25;
cursor: not-allowed;
pointer-events: none;
}
.gateway-nav-prev {
left: 0;
}
.gateway-nav-next {
right: 0;
}
.gateway-dots-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 24px;
}
.gateway-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(9, 19, 34, 0.16);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gateway-dot:hover {
background: rgba(206, 143, 40, 0.5);
}
.gateway-dot.active {
width: 28px;
border-radius: 9999px;
background: var(--sh-gold-primary);
box-shadow: 0 2px 8px rgba(206, 143, 40, 0.35);
}
@media (max-width: 1099px) and (min-width: 769px) {
.gateway-carousel-wrapper {
padding: 0 44px;
}
.gateway-carousel-card {
flex: 0 0 290px;
min-width: 290px;
max-width: 290px;
}
}
@media (max-width: 768px) {
.gateway-carousel-section {
padding: 48px 0 54px;
}
.gateway-carousel-section .section-container {
padding: 0;
}
.gateway-carousel-section .section-title-wrapper {
padding: 0 20px;
}
.gateway-carousel-wrapper {
margin-top: 18px;
padding: 0;
}
.gateway-nav-arrow {
display: none;
}
.gateway-carousel-track {
gap: 12px;
padding: 8px 7%;
scroll-snap-type: x mandatory;
}
.gateway-carousel-card {
flex: 0 0 84%;
width: 84%;
min-width: 84%;
max-width: 84%;
scroll-snap-align: center;
padding: 22px 18px 18px;
border-radius: 16px;
}
.gateway-title {
font-size: 1.05rem;
}
.gateway-desc {
font-size: 0.82rem;
line-height: 1.6;
}
.gateway-dots-indicator {
margin-top: 16px;
}
}
@media (max-width: 390px) {
.gateway-carousel-track {
gap: 10px;
padding: 8px 6%;
}
.gateway-carousel-card {
flex: 0 0 86%;
width: 86%;
min-width: 86%;
max-width: 86%;
padding: 20px 16px 16px;
}
.gateway-title {
font-size: 0.98rem;
}
.gateway-icon-wrapper {
width: 42px;
height: 42px;
font-size: 1.15rem;
}
}
.trust-ticker-strip {
background: #1b2a47;
color: #ffffff;
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.trust-ticker-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.trust-ticker-item {
display: flex;
align-items: center;
gap: 12px;
}
.trust-ticker-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(206, 143, 40, 0.2);
color: #fce7c8;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.trust-ticker-text h4 {
font-size: 0.88rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 2px;
line-height: 1.3;
}
.trust-ticker-text p {
font-size: 0.74rem;
color: #94a3b8;
margin: 0;
line-height: 1.3;
}
.user-path-split-section {
padding: clamp(60px, 8vh, 90px) 0;
background: #faf8f5;
}
.user-path-header {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(36px, 5vh, 50px);
}
.user-path-kicker {
font-family: var(--font-numeric, "Outfit", sans-serif);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.16em;
color: #CE8F28;
text-transform: uppercase;
display: inline-block;
margin-bottom: 8px;
}
.user-path-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.6rem, 2.2vw, 2.2rem);
font-weight: 800;
color: #1b2a47;
line-height: 1.4;
letter-spacing: -0.015em;
margin: 0 0 12px;
word-break: auto-phrase;
}
.mobile-only-br {
display: none;
}
@media (max-width: 640px) {
.mobile-only-br {
display: inline;
}
}
.user-path-desc {
font-size: 0.95rem;
color: #64748b;
line-height: 1.7;
margin: 0;
}
.user-path-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
max-width: 1100px;
margin: 0 auto;
}
.path-card {
background: #ffffff;
border-radius: 24px;
padding: clamp(28px, 4vw, 40px);
border: 1.5px solid #e2e8f0;
box-shadow: 0 10px 30px rgba(27, 42, 71, 0.04);
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.path-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(27, 42, 71, 0.08);
border-color: #cbd5e1;
}
.path-card--active {
border-color: rgba(27, 42, 71, 0.25);
}
.path-card--active::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #1b2a47, #2a4365);
}
.path-card-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
width: fit-content;
margin-bottom: 16px;
}
.path-badge--green {
background: rgba(6, 199, 85, 0.12);
color: #04883b;
}
.path-badge--gold {
background: rgba(206, 143, 40, 0.12);
color: #CE8F28;
}
.path-card-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.2rem, 1.4vw, 1.45rem);
font-weight: 700;
color: #1b2a47;
line-height: 1.45;
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.path-card-text {
font-size: 0.92rem;
color: #64748b;
line-height: 1.7;
margin: 0 0 24px;
flex-grow: 1;
}
.path-card-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
font-size: 0.95rem;
padding: 14px 20px;
border-radius: 50px;
text-decoration: none;
transition: all 0.25s ease;
width: 100%;
box-sizing: border-box;
white-space: normal;
text-align: center;
line-height: 1.3;
}
.path-btn--line {
background: linear-gradient(135deg, #06c755, #05b04b);
color: #ffffff;
box-shadow: 0 6px 18px rgba(6, 199, 85, 0.28);
}
.path-btn--line:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(6, 199, 85, 0.38);
}
.path-btn-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.path-btn-group .path-card-action-btn {
padding: 12px 10px;
font-size: 0.84rem;
letter-spacing: -0.01em;
white-space: normal;
text-align: center;
line-height: 1.25;
}
.path-btn-group .path-btn--hearing {
background: #06152b;
color: #ffffff;
border: 1px solid #06152b;
box-shadow: 0 4px 14px rgba(6, 21, 43, 0.18);
flex: 1.25 1 200px;
}
.path-btn-group .path-btn--hearing:hover {
background: #0d2346;
border-color: #0d2346;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(6, 21, 43, 0.25);
}
.path-btn-group .path-btn--line {
flex: 1.25 1 210px;
}
.path-btn-group .path-btn--outline {
flex: 1 1 165px;
}
.path-btn--outline {
background: #f8fafc;
color: #1b2a47;
border: 1px solid #cbd5e1;
}
.path-btn--outline:hover {
background: #ffffff;
border-color: #1b2a47;
color: #CE8F28;
}
.user-path-split-section .section-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
.user-path-split-section .path-card:nth-child(2),
.user-path-split-section .path-card--delayed {
transition-delay: 0.15s;
}
.user-path-split-section .path-card-action-btn .fa-brands.fa-line {
font-size: 1.25rem;
}
.user-path-split-section .path-card-action-btn .fa-solid.fa-clipboard-list {
font-size: 1.15rem;
}
.user-path-split-section .user-path-cta-link {
color: var(--color-sorai-gold, var(--sorai-gold, #CE8F28));
}
.home-quote-simulator-section--card {
padding: clamp(60px, 8vh, 90px) 0;
background: #f8f9fa;
content-visibility: auto;
contain-intrinsic-size: 0 600px;
}
.simulator-card-wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.simulator-outer-card {
background: #ffffff;
border-radius: 28px;
border: 1.5px solid #e2e8f0;
box-shadow: 0 16px 48px -10px rgba(27, 42, 71, 0.06);
padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
position: relative;
overflow: hidden;
}
.home-quote-simulator-section--card .quote-intro-section {
display: none;
}
.simulator-header {
text-align: center;
margin-bottom: clamp(28px, 4vw, 40px);
}
.simulator-header-badges {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.badge-dev-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #1b2a47 0%, #2a4365 100%);
color: #ffffff;
font-size: 0.82rem;
font-weight: 700;
padding: 5px 15px;
border-radius: 9999px;
letter-spacing: 0.03em;
box-shadow: 0 3px 10px rgba(27, 42, 71, 0.18);
}
.badge-dev-pill i {
color: #d4af37;
}
.badge-advisor-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(206, 143, 40, 0.08);
border: 1px solid rgba(206, 143, 40, 0.25);
color: #CE8F28;
font-size: 0.8rem;
font-weight: 600;
padding: 5px 13px;
border-radius: 9999px;
}
.badge-nophone-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(27, 42, 71, 0.04);
border: 1px solid rgba(27, 42, 71, 0.12);
color: #1b2a47;
font-size: 0.8rem;
font-weight: 600;
padding: 5px 13px;
border-radius: 9999px;
}
.simulator-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.45rem, 2.4vw, 2rem);
font-weight: 800;
color: #1b2a47;
margin: 0 0 10px;
line-height: 1.35;
letter-spacing: -0.015em;
}
.simulator-subtitle {
font-size: clamp(1.02rem, 1.35vw, 1.2rem);
font-weight: 700;
color: #2a4365;
margin: 0 0 10px;
line-height: 1.45;
letter-spacing: -0.01em;
}
.simulator-desc {
color: #64748b;
font-size: clamp(0.88rem, 1.2vw, 0.95rem);
max-width: 680px;
margin: 0 auto;
line-height: 1.65;
}
.home-hearing-banner-section {
position: relative;
padding: clamp(20px, 3vh, 40px) 0;
background: transparent;
}
.hearing-banner-card {
background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%);
border: 1.5px solid #e2e8f0;
border-radius: 24px;
padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 44px);
box-shadow: 0 12px 36px rgba(0, 44, 101, 0.05);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hearing-banner-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #06152b 0%, #CE8F28 50%, #05b04b 100%);
}
.hearing-banner-card:hover {
box-shadow: 0 18px 44px rgba(0, 44, 101, 0.09);
transform: translateY(-2px);
}
.hearing-banner-content,
.inspection-header,
.sorai-tool-header {
max-width: 860px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hearing-banner-badge-wrapper,
.inspection-badge-wrapper,
.sorai-tool-badge-wrapper {
margin-bottom: 14px;
}
.hearing-banner-badge,
.inspection-badge,
.sorai-tool-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 18px;
background: rgba(206, 143, 40, 0.12);
color: #CE8F28;
border-radius: 50px;
border: none;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
box-shadow: none;
}
.hearing-banner-title,
.inspection-title,
.sorai-tool-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.45rem, 2.4vw, 2.05rem);
font-weight: 700;
color: #1b2a47;
line-height: 1.35;
margin-bottom: 10px;
letter-spacing: 0.02em;
}
.inspection-subtitle,
.sorai-tool-subtitle {
font-size: clamp(1.02rem, 1.35vw, 1.2rem);
font-weight: 700;
color: #2a4365;
margin: 0 0 10px;
line-height: 1.45;
letter-spacing: -0.01em;
text-align: center;
}
.hearing-banner-desc,
.inspection-desc,
.sorai-tool-desc {
font-size: clamp(0.88rem, 1.1vw, 0.98rem);
color: #64748b;
line-height: 1.7;
margin-bottom: 22px;
max-width: 740px;
text-align: center;
}
.hearing-banner-features,
.inspection-trust-pills,
.sorai-trust-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 28px;
}
.hearing-feature-pill,
.inspection-trust-pill,
.sorai-trust-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
color: #334155;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}
.hearing-feature-pill i,
.inspection-trust-pill i,
.sorai-trust-pill i {
color: #05b04b;
font-size: 0.85rem;
}
.hearing-banner-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
}
a.hearing-banner-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #06152b 0%, #1b2a47 100%);
color: #ffffff;
font-size: clamp(0.98rem, 1.15vw, 1.08rem);
font-weight: 700;
padding: 15px 40px;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 8px 24px rgba(6, 21, 43, 0.22);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
a.hearing-banner-btn:hover {
background: linear-gradient(135deg, #0d2346 0%, #243b66 100%);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(6, 21, 43, 0.32);
color: #ffffff;
}
.hearing-banner-btn i {
font-size: 0.92rem;
transition: transform 0.2s ease;
}
.hearing-banner-btn:hover i {
transform: translateX(4px);
}
.hearing-banner-microcopy {
font-size: 0.78rem;
color: #64748b;
line-height: 1.4;
}
#hearing-portal-guide {
scroll-margin-top: 100px;
}
.home-hearing-embed-section .hearing-banner-card {
padding: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 36px);
}
.hearing-embed-hint {
margin: 16px auto 10px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.08);
background-color: #1b2a47;
padding: 6px 16px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.hearing-embed-hint i {
color: #CE8F28;
font-size: 0.9rem;
}
.hearing-embed-card {
width: 100%;
max-width: min(740px, 94vw);
margin: 12px auto 20px;
border-radius: 20px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 16px 48px rgba(6, 21, 43, 0.28), 0 0 0 1px rgba(206, 143, 40, 0.25);
transition: box-shadow 0.3s ease;
}
.hearing-embed-card:hover {
box-shadow: 0 20px 52px rgba(6, 21, 43, 0.32), 0 0 0 1px rgba(206, 143, 40, 0.35);
}
.hearing-embed-iframe {
width: 100%;
min-height: 520px;
height: 720px;
border: none;
display: block;
transition: height 0.25s ease;
}
.hearing-embed-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 16px 0 12px;
width: 100%;
}
.hearing-embed-actions .hearing-embed-ext-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
color: #1b2a47;
border: 1.5px solid #cbd5e1;
font-size: 0.88rem;
font-weight: 600;
padding: 10px 22px;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
transition: all 0.2s ease;
}
.hearing-embed-actions .hearing-embed-ext-btn:hover {
border-color: #CE8F28;
color: #CE8F28;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(206, 143, 40, 0.15);
}
.hearing-embed-actions .hearing-embed-line-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #06c755;
color: #ffffff;
font-size: 0.88rem;
font-weight: 700;
padding: 10px 24px;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(6, 199, 85, 0.3);
transition: all 0.2s ease;
}
.hearing-embed-actions .hearing-embed-line-btn:hover {
background: #05b04b;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(6, 199, 85, 0.4);
color: #ffffff;
}
@media (max-width: 768px) {
#hearing-portal-guide {
scroll-margin-top: 80px;
}
.hearing-embed-card {
border-radius: 14px;
margin: 10px auto 16px;
max-height: min(680px, 82vh);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.hearing-embed-iframe {
min-height: 460px;
max-height: min(680px, 82vh);
}
.hearing-embed-actions {
flex-direction: column;
align-items: stretch;
max-width: 340px;
margin: 14px auto 10px;
}
.hearing-embed-ext-btn,
.hearing-embed-line-btn {
justify-content: center;
width: 100%;
}
}
.home-hearing-banner-section .section-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px 60px;
}
.hearing-embed-actions .hearing-embed-line-btn .fa-brands.fa-line {
font-size: 1.15rem;
}
.editorial-property-section {
padding: 72px 24px 80px;
background-color: var(--neutral-light);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
position: relative;
z-index: 3;
}
.editorial-container {
max-width: 1200px;
margin: 0 auto;
}
.editorial-badges-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.editorial-badge {
display: inline-flex;
align-items: center;
padding: 6px 16px;
border: 1px solid var(--accent-sage-border);
background-color: var(--accent-sage-bg);
color: var(--accent-sage);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.03em;
border-radius: var(--border-radius-pill);
}
.editorial-badge.badge-highlight {
border-color: rgba(197, 140, 88, 0.3);
color: var(--accent-earth);
background-color: var(--accent-earth-light);
font-weight: 700;
}
.editorial-showcase-card {
background-color: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 36px;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 36px;
align-items: start;
}
.editorial-visual-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.showcase-nav-tabs {
display: flex;
gap: 6px;
background-color: var(--bg-sand);
padding: 5px;
border-radius: var(--border-radius-pill);
border: 1px solid var(--border-color);
overflow-x: auto;
scrollbar-width: none;
}
.showcase-nav-tabs::-webkit-scrollbar {
display: none;
}
.showcase-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 14px;
background: transparent;
border: none;
border-radius: var(--border-radius-pill);
color: var(--neutral-gray);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.25s ease;
}
.showcase-tab-btn:hover {
color: var(--neutral-dark);
background-color: rgba(255, 255, 255, 0.6);
}
.showcase-tab-btn.active {
background-color: var(--white);
color: var(--neutral-dark);
box-shadow: 0 2px 8px rgba(120, 110, 95, 0.08);
font-weight: 700;
}
.showcase-tab-btn i {
font-size: 0.85rem;
color: var(--neutral-gray);
}
.showcase-tab-btn.active i {
color: var(--accent-sage);
}
.showcase-panel {
display: none;
flex-direction: column;
gap: 14px;
animation: fadeInPanel 0.3s ease forwards;
}
.showcase-panel.active {
display: flex;
}
@keyframes fadeInPanel {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.editorial-main-figure,
.editorial-detail-figure,
.editorial-plan-figure {
margin: 0;
display: flex;
flex-direction: column;
}
.figure-img-wrap {
border-radius: var(--border-radius-md);
overflow: hidden;
border: 1px solid var(--border-color);
background-color: var(--bg-sand);
aspect-ratio: 16 / 9;
position: relative;
}
.editorial-main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-showcase-card:hover .editorial-main-img {
transform: scale(1.02);
}
.editorial-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.detail-img-wrap {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-color);
background-color: var(--bg-sand);
aspect-ratio: 16 / 10;
}
.detail-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.detail-img-wrap:hover img {
transform: scale(1.04);
}
.editorial-caption {
padding-top: 6px;
font-size: 0.76rem;
color: var(--neutral-gray);
font-weight: 500;
letter-spacing: 0.02em;
}
.editorial-caption.text-center {
text-align: center;
}
.plan-subselector {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.plan-sub-btn {
flex: 1;
padding: 8px 14px;
background: var(--bg-sand);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-pill);
font-size: 0.78rem;
font-weight: 600;
color: var(--neutral-dark);
cursor: pointer;
transition: all 0.2s ease;
}
.plan-sub-btn:hover {
background: #eae3d7;
color: var(--neutral-dark);
}
.plan-sub-btn.active {
background: var(--primary-indigo);
color: var(--white);
border-color: var(--primary-indigo);
box-shadow: 0 2px 8px rgba(61, 74, 84, 0.2);
}
.figure-plan-wrap {
border-radius: var(--border-radius-md);
overflow: hidden;
border: 1px solid var(--border-color);
background-color: var(--white);
height: 290px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.editorial-plan-display {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.plan-view-item {
display: none;
}
.plan-view-item.active {
display: block;
}
.amenities-editorial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.amenity-feature-card {
display: flex;
gap: 12px;
padding: 14px;
background: var(--bg-sand);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
align-items: flex-start;
}
.amenity-icon-box {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--accent-sage-bg);
border: 1px solid var(--accent-sage-border);
color: var(--accent-sage);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.amenity-text-box {
flex-grow: 1;
}
.amenity-name {
font-size: 0.84rem;
font-weight: 700;
color: var(--neutral-dark);
margin: 0 0 3px 0;
}
.amenity-desc {
font-size: 0.74rem;
color: var(--neutral-gray);
line-height: 1.5;
margin: 0;
}
.editorial-spec-col {
display: flex;
flex-direction: column;
gap: 20px;
}
.spec-col-header {
border-bottom: 2px solid var(--primary-indigo);
padding-bottom: 8px;
margin-bottom: 4px;
}
.spec-col-title {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--primary-indigo);
text-transform: uppercase;
margin: 0;
}
.editorial-specs-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.spec-item {
display: flex;
padding: 11px 12px;
border-bottom: 1px solid var(--border-color-subtle);
align-items: baseline;
gap: 14px;
border-radius: var(--border-radius-sm);
transition: background-color 0.2s ease;
}
.spec-item:nth-child(even) {
background-color: rgba(245, 241, 234, 0.65);
}
.spec-key {
width: 105px;
flex-shrink: 0;
font-size: 0.84rem;
font-weight: 600;
color: var(--neutral-gray);
letter-spacing: 0.02em;
margin: 0;
}
.spec-value {
flex-grow: 1;
font-size: 0.9rem;
color: var(--neutral-dark);
line-height: 1.6;
font-weight: 500;
margin: 0;
}
.deposit-highlight {
color: var(--accent-earth);
font-weight: 700;
background-color: var(--accent-earth-light);
padding: 2px 8px;
border-radius: 6px;
border: 1px solid rgba(197, 140, 88, 0.25);
display: inline-block;
}
.spec-item-amenities .spec-value {
font-size: 0.84rem;
color: var(--neutral-dark);
line-height: 1.65;
}
.editorial-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 6px;
}
.editorial-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
border-radius: var(--border-radius-pill);
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.03em;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
text-align: center;
}
.primary-editorial-btn {
background-color: var(--primary-indigo);
color: var(--white);
border: 1px solid var(--primary-indigo);
box-shadow: 0 4px 14px rgba(61, 74, 84, 0.2);
gap: 10px;
}
.primary-editorial-btn:hover {
background-color: #2b353c;
border-color: #2b353c;
box-shadow: 0 6px 18px rgba(61, 74, 84, 0.28);
transform: translateY(-2px);
}
.primary-editorial-btn .btn-arrow {
transition: transform 0.2s ease;
display: inline-block;
font-size: 1.1rem;
line-height: 1;
}
.primary-editorial-btn:hover .btn-arrow {
transform: translateX(4px);
}
.line-editorial-btn {
background-color: var(--white);
color: var(--line-green);
border: 1.5px solid var(--line-green);
gap: 6px;
box-shadow: 0 2px 8px rgba(6, 199, 85, 0.1);
}
.line-editorial-btn:hover {
background-color: #f0fbf4;
border-color: var(--line-green-hover);
color: var(--line-green-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(6, 199, 85, 0.2);
}
.rental-process-section {
background-color: var(--bg-sand);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 72px 24px 80px;
position: relative;
z-index: 3;
}
.process-steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 32px;
}
.process-step-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 30px 22px;
border: 1px solid var(--border-color);
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.process-step-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(27, 42, 71, 0.08);
border-color: #CE8F28;
}
.process-step-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--accent-sage);
opacity: 0;
transition: opacity 0.3s ease;
}
.process-step-card:hover::before {
opacity: 1;
}
.rental-process-section .step-card,
.rental-process-section .process-step-card {
border-left-color: var(--primary-indigo, #1b2a47);
}
.step-num {
position: absolute;
top: 16px;
right: 20px;
font-family: var(--font-numeric);
font-size: 2.3rem;
font-weight: 800;
color: rgba(90, 125, 101, 0.25);
line-height: 1;
margin-bottom: 0;
pointer-events: none;
}
.step-image-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 16px;
background: transparent;
}
.step-bird-image {
width: 120px;
height: 120px;
object-fit: contain;
display: block;
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.process-step-card:hover .step-bird-image {
transform: translateY(-8px) scale(1.05);
}
.process-step-card .step-title {
font-family: var(--font-main);
font-size: 1.15rem;
color: var(--neutral-dark);
font-weight: 700;
margin-bottom: 10px;
}
.step-desc {
font-size: 0.88rem;
color: var(--neutral-gray);
line-height: 1.65;
}
.step-card-footer {
margin-top: auto;
padding-top: 12px;
font-size: 0.82rem;
font-weight: 700;
color: var(--color-sorai-gold, #CE8F28);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.step-card-footer i,
.step-card-footer .fa-arrow-right {
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.process-step-card:hover .step-card-footer i {
transform: translateX(4px);
}
.process-guide-banner {
margin-top: 36px;
background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%);
border: 1.5px solid #e2e8f0;
border-radius: 16px;
padding: 28px 32px;
box-shadow: 0 4px 20px rgba(27, 42, 71, 0.04);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-guide-banner:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(27, 42, 71, 0.08);
}
.guide-banner-content {
flex: 1 1 500px;
}
.guide-banner-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(206, 143, 40, 0.12);
color: var(--color-sorai-gold, #CE8F28);
font-size: 0.8rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 10px;
}
.guide-banner-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-sorai-navy, #1b2a47);
margin: 0 0 8px;
line-height: 1.4;
letter-spacing: -0.01em;
}
.guide-banner-desc {
color: #64748b;
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.guide-banner-action {
flex-shrink: 0;
}
.guide-banner-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-sorai-navy, #1b2a47);
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
padding: 12px 26px;
border-radius: 30px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(27, 42, 71, 0.15);
transition: all 0.25s ease;
}
.guide-banner-btn i,
.guide-banner-btn .fa-arrow-right {
font-size: 0.85rem;
}
.guide-banner-btn:hover {
background: var(--color-sorai-gold, #CE8F28);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(206, 143, 40, 0.35);
}
.cost-simulation-section {
background-color: var(--neutral-light);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 72px 24px 80px;
position: relative;
z-index: 3;
}
.cost-simulation-section .section-container {
max-width: 1080px;
margin: 0 auto;
}
.simulation-glass-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 36px;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 36px;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}
.simulation-glass-card:hover {
transform: translateY(-6px);
box-shadow: var(--hover-shadow);
}
.simulation-campaign-toggle-row {
display: flex;
align-items: center;
gap: 12px;
background: var(--accent-earth-light);
border: 1px solid rgba(197, 140, 88, 0.25);
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 20px;
}
.campaign-toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
cursor: pointer;
}
.campaign-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.campaign-toggle-switch .slider-round {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #cbd5e1;
transition: 0.3s;
border-radius: 24px;
}
.campaign-toggle-switch .slider-round:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.campaign-toggle-switch input:checked + .slider-round {
background-color: var(--accent-sage);
}
.campaign-toggle-switch input:checked + .slider-round:before {
transform: translateX(20px);
}
.campaign-toggle-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
flex-grow: 1;
}
.campaign-badge {
font-size: 0.68rem;
font-weight: 700;
background: var(--accent-earth);
color: var(--white);
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.04em;
}
.campaign-text {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent-earth);
}
.simulation-group {
margin-bottom: 18px;
}
.simulation-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.simulation-label-row label {
font-weight: 700;
color: var(--neutral-dark);
font-size: 0.92rem;
}
.value-display {
font-family: var(--font-numeric);
font-weight: 700;
color: var(--accent-sage);
font-size: 1.05rem;
}
.sim-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 18px;
background: transparent;
outline: none;
margin: 0;
}
.sim-slider::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
background: #e2dacd;
border-radius: 6px;
border: none;
transition: background 0.3s ease;
}
.sim-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-sage);
cursor: pointer;
box-shadow: 0 2px 8px rgba(90, 125, 101, 0.4);
margin-top: -7px;
transition: transform 0.2s ease, background-color 0.2s ease;
border: none;
}
.sim-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
background: var(--primary-sky-hover);
}
.sim-slider::-moz-range-track {
width: 100%;
height: 6px;
background: #e2dacd;
border-radius: 6px;
border: none;
transition: background 0.3s ease;
}
.sim-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-sage);
cursor: pointer;
border: none;
box-shadow: 0 2px 8px rgba(90, 125, 101, 0.4);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.sim-slider::-moz-range-thumb:hover {
transform: scale(1.2);
background: var(--primary-sky-hover);
}
.simulation-outputs {
display: flex;
flex-direction: column;
justify-content: space-between;
border-left: 1px solid var(--border-color);
padding-left: 32px;
}
.total-cost-box {
background: var(--neutral-dark);
padding: 20px 24px;
border-radius: var(--border-radius-md);
color: var(--neutral-light);
text-align: center;
margin-bottom: 20px;
box-shadow: 0 10px 25px rgba(44, 40, 37, 0.15);
}
.total-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #a8a096;
display: block;
margin-bottom: 4px;
}
.total-price {
font-family: var(--font-numeric);
font-size: 2.15rem;
font-weight: 700;
color: var(--white);
}
.total-price .currency {
font-size: 1rem;
font-weight: 600;
margin-left: 4px;
color: var(--accent-earth);
}
.breakdown-list {
margin-bottom: 20px;
}
.breakdown-item {
display: flex;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px dashed rgba(226, 218, 205, 0.85);
font-size: 0.88rem;
color: var(--neutral-dark);
}
.breakdown-item span:last-child {
font-family: var(--font-numeric);
font-weight: 700;
color: var(--primary-indigo);
}
.simulator-actions-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
width: 100%;
}
.simulator-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(90deg, #25d366 0%, #06C755 100%);
color: white;
text-decoration: none;
padding: 13px 22px;
border-radius: var(--border-radius-pill);
font-weight: 700;
font-size: 0.92rem;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.32);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
text-align: center;
}
.simulator-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.42);
}
.simulator-copy-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--white);
border: 1px solid var(--border-color);
color: var(--neutral-dark);
padding: 13px 20px;
border-radius: var(--border-radius-pill);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 2px 8px rgba(120, 110, 95, 0.04);
}
.simulator-copy-btn:hover {
background: var(--bg-sand);
border-color: var(--accent-sage);
color: var(--accent-sage);
box-shadow: 0 4px 14px rgba(120, 110, 95, 0.08);
transform: translateY(-2px);
}
.simulator-copy-btn:active {
transform: scale(0.98);
}
@media (min-width: 480px) {
.simulator-actions-wrapper {
flex-direction: row;
}
.simulator-cta-btn {
flex: 1.4;
}
.simulator-copy-btn {
flex: 1;
}
}
.simulator-note {
font-size: 0.75rem;
color: var(--neutral-gray);
margin-top: 12px;
line-height: 1.4;
text-align: center;
}
.features-section .feature-badge {
background: rgba(206, 143, 40, 0.12);
color: var(--color-sorai-gold, var(--sorai-gold, #CE8F28));
}
.features-section .feature-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
color: var(--color-sorai-navy, var(--primary-indigo, #1b2a47));
}
.area-guide-section {
background-color: var(--bg-sand);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 72px 24px 80px;
position: relative;
z-index: 4;
}
.area-guide-section .section-container {
max-width: 1200px;
margin: 0 auto;
}
.area-carousel-wrapper {
margin-top: 10px;
position: relative;
}
.area-carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 24px;
padding: 10px 0 30px 0;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
}
.area-carousel::-webkit-scrollbar {
display: none;
}
.area-card {
flex: 0 0 340px;
scroll-snap-align: center;
background: var(--white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--card-shadow);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
position: relative;
}
.area-card::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 5px;
height: 0;
background: var(--accent-sage);
transform: translateY(-50%);
transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
z-index: 10;
}
.area-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: var(--hover-shadow);
border-color: rgba(90, 125, 101, 0.35);
}
.area-card:hover::before,
.area-card.is-active::before {
height: 100%;
}
.area-card-img {
height: 170px;
position: relative;
overflow: hidden;
}
.area-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.area-card-badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--accent-sage);
color: white;
font-size: 0.72rem;
font-weight: 700;
padding: 4px 12px;
border-radius: var(--border-radius-pill);
text-transform: uppercase;
letter-spacing: 0.04em;
box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.area-card-commute-tag {
position: absolute;
bottom: 10px;
left: 12px;
background: rgba(44, 40, 37, 0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--neutral-light);
font-size: 0.74rem;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--border-radius-pill);
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 5px;
}
.area-card-commute-tag i {
color: #f59e0b;
}
.area-card-featured-callout {
display: flex;
align-items: center;
gap: 8px;
background: var(--accent-earth-light);
border: 1px solid rgba(197, 140, 88, 0.25);
border-radius: var(--border-radius-sm);
padding: 8px 12px;
margin-bottom: 14px;
text-decoration: none;
transition: all 0.25s ease;
}
.area-card-featured-callout:hover {
background: rgba(197, 140, 88, 0.18);
border-color: var(--accent-earth);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(197, 140, 88, 0.15);
}
.area-card-featured-callout .callout-pill {
background: var(--primary-indigo);
color: var(--white);
font-size: 0.68rem;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--border-radius-pill);
white-space: nowrap;
letter-spacing: 0.03em;
display: inline-flex;
align-items: center;
}
.area-card-featured-callout .callout-text {
font-size: 0.8rem;
font-weight: 600;
color: var(--accent-earth);
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.area-card-featured-callout .callout-arrow {
font-size: 0.75rem;
color: var(--accent-earth);
transition: transform 0.2s ease;
}
.area-card-featured-callout:hover .callout-arrow {
transform: translateX(3px);
}
.area-card-body {
padding: 22px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.area-card-title {
font-family: var(--font-main);
font-size: 1.25rem;
font-weight: 700;
color: var(--neutral-dark);
margin-bottom: 8px;
}
.area-card-desc {
font-size: 0.86rem;
color: var(--neutral-gray);
line-height: 1.55;
margin-bottom: 14px;
flex-grow: 1;
}
.area-card-info {
background: var(--neutral-light);
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 16px;
border: 1px solid var(--border-color-subtle);
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
font-size: 0.82rem;
}
.info-row:last-child {
margin-bottom: 0;
}
.info-row.commute-row {
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
margin-bottom: 6px;
}
.info-row.stars-row {
margin-top: 6px;
border-top: 1px dashed rgba(226, 218, 205, 0.8);
padding-top: 6px;
}
.info-label {
color: var(--neutral-gray);
font-weight: 500;
}
.info-val {
color: var(--neutral-dark);
font-weight: 700;
font-family: var(--font-numeric);
}
.info-val.font-highlight {
color: var(--neutral-dark);
font-weight: 700;
}
.star-rating-val {
color: var(--accent-sage);
font-size: 0.8rem;
font-weight: 600;
}
.area-card-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1.5px solid var(--accent-sage);
color: var(--accent-sage);
text-decoration: none;
padding: 10px;
border-radius: var(--border-radius-pill);
font-weight: 700;
font-size: 0.88rem;
transition: all 0.3s ease;
text-align: center;
}
.area-card-btn:hover {
background: var(--accent-sage);
color: white;
box-shadow: 0 4px 14px rgba(90, 125, 101, 0.25);
}
.carousel-nav-hints {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 5;
padding: 0 4px;
}
.hint-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--border-color);
box-shadow: 0 4px 14px rgba(120, 110, 95, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--neutral-dark);
cursor: pointer;
pointer-events: auto;
transition: all 0.3s ease;
padding: 0;
outline: none;
}
.hint-arrow:hover {
transform: scale(1.08);
box-shadow: 0 6px 18px rgba(120, 110, 95, 0.14);
color: var(--accent-sage);
border-color: var(--accent-sage);
}
.hint-arrow.disabled {
opacity: 0.2;
pointer-events: none;
}
.inline-assistant-card {
font-family: var(--font-main);
background: var(--neutral-light);
border: 1px solid rgba(var(--primary-sky-rgb), 0.25);
border-radius: var(--border-radius-lg);
padding: 24px;
margin-bottom: 40px;
box-shadow: 0 10px 40px rgba(var(--primary-indigo-rgb), 0.03);
}
.inline-assistant-header {
margin-bottom: 16px;
}
.inline-assistant-title-row {
display: flex;
align-items: center;
gap: 12px;
}
.inline-assistant-icon {
background: rgba(var(--primary-sky-rgb), 0.08);
color: var(--accent-gold);
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.inline-assistant-title {
font-family: var(--font-main);
font-size: 1.3rem;
font-weight: 800;
color: var(--primary-indigo);
letter-spacing: -0.02em;
margin-bottom: 0;
}
.inline-assistant-subtitle {
font-size: 0.9rem;
color: var(--neutral-gray);
line-height: 1.5;
}
.inline-chat-box {
max-height: 300px;
overflow-y: auto;
padding: 15px;
background: var(--white);
border: 1px solid rgba(var(--primary-indigo-rgb), 0.08);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: inset 0 2px 4px rgba(var(--primary-indigo-rgb), 0.01);
}
.chat-bubble {
padding: 12px 16px;
border-radius: 12px;
font-size: 0.95rem;
line-height: 1.6;
max-width: 85%;
word-break: break-all;
}
.chat-bubble.bot-bubble {
align-self: flex-start;
background: var(--white);
color: var(--neutral-dark);
border: 1px solid rgba(var(--primary-indigo-rgb), 0.1);
border-bottom-left-radius: 4px;
}
.chat-bubble.user-bubble {
align-self: flex-end;
background: var(--primary-indigo);
color: var(--white);
border-bottom-right-radius: 4px;
}
.chat-bubble.loading-bubble {
align-self: flex-start;
background: var(--white);
border: 1px solid rgba(var(--primary-indigo-rgb), 0.1);
color: var(--neutral-gray);
border-bottom-left-radius: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.chat-link {
color: var(--accent-gold);
text-decoration: underline;
font-weight: 600;
transition: opacity 0.2s ease;
}
.chat-link:hover {
opacity: 0.8;
}
.inline-chat-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
margin-bottom: 16px;
}
.chat-chip-btn {
background: var(--white);
border: 1px solid rgba(var(--primary-sky-rgb), 0.4);
color: var(--accent-gold);
padding: 6px 14px;
border-radius: var(--border-radius-pill);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-chip-btn:hover {
background: var(--accent-gold);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(var(--primary-sky-rgb), 0.15);
}
.inline-chat-input-row {
display: flex;
align-items: center;
background: var(--white);
border: 1px solid rgba(var(--primary-indigo-rgb), 0.15);
border-radius: var(--border-radius-pill);
padding: 4px 6px 4px 16px;
box-shadow: 0 4px 12px rgba(var(--primary-indigo-rgb), 0.03);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.inline-chat-input-row:focus-within {
border-color: var(--accent-gold);
box-shadow: 0 4px 16px rgba(var(--primary-sky-rgb), 0.1);
}
#inline-chat-input {
flex-grow: 1;
border: none;
background: transparent;
padding: 10px 14px 10px 0;
font-size: 0.95rem;
outline: none;
color: var(--neutral-dark);
}
#inline-chat-input::placeholder {
color: #94a3b8;
}
#inline-chat-submit {
background: var(--accent-gold);
color: var(--white);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
#inline-chat-submit:hover {
background: var(--primary-sky-hover);
transform: scale(1.05);
}
.typing-dots {
display: flex;
gap: 4px;
align-items: center;
}
.typing-dot {
width: 6px;
height: 6px;
background-color: var(--neutral-gray);
border-radius: 50%;
animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
.news-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
transition: all 0.5s ease;
}
.news-card-item {
display: flex;
flex-direction: column;
background: var(--white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--card-shadow);
border: 1px solid var(--border-color);
text-decoration: none;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, opacity 0.4s ease, border-color 0.4s ease;
opacity: 1;
transform: scale(1);
}
.news-card-item:hover {
transform: translateY(-6px);
box-shadow: var(--hover-shadow);
border-color: rgba(90, 125, 101, 0.35);
}
.news-card-thumb {
height: 150px;
overflow: hidden;
background-color: var(--bg-sand);
display: flex;
align-items: center;
justify-content: center;
}
.news-card-thumb img {
width: 190px;
height: 140px;
object-fit: contain;
transition: transform 0.5s ease;
}
.news-card-item:hover .news-card-thumb img {
transform: scale(1.05);
}
.news-card-content {
padding: 18px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.news-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.news-card-badge {
font-size: 0.68rem;
font-weight: 700;
padding: 3px 9px;
border-radius: var(--border-radius-pill);
letter-spacing: 0.03em;
}
.news-card-badge.moving,
.news-card-badge.area,
.news-card-badge.transit,
.news-card-badge.support {
background-color: var(--accent-sage-bg);
color: #704808;
border: 1px solid var(--accent-sage-border);
}
.news-card-badge.cost,
.news-card-badge.costs,
.news-card-badge.room_search,
.news-card-badge.update,
.news-card-badge.gourmet {
background-color: var(--accent-earth-light);
color: #704808;
border: 1px solid rgba(197, 140, 88, 0.25);
}
.news-card-date {
font-family: var(--font-numeric);
font-size: 0.78rem;
color: var(--neutral-gray);
}
.news-card-title {
font-family: var(--font-main);
font-size: 0.98rem;
font-weight: 700;
color: var(--neutral-dark);
line-height: 1.5;
margin-bottom: 12px;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-more {
font-size: 0.82rem;
font-weight: 700;
color: #704808;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.2s ease;
}
.news-card-item:hover .news-card-more {
color: var(--primary-indigo);
}
.filter-tab {
background: var(--white);
border: 1px solid var(--border-color);
color: var(--neutral-dark);
padding: 7px 18px;
border-radius: var(--border-radius-pill);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(120, 110, 95, 0.04);
}
.filter-tab:hover {
border-color: var(--accent-sage);
color: var(--accent-sage);
}
.filter-tab.active {
background: var(--accent-sage);
color: white;
border-color: var(--accent-sage);
box-shadow: 0 4px 12px rgba(90, 125, 101, 0.25);
}
.content-gateway-section {
padding: clamp(60px, 8vh, 100px) 0;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.content-gateway-section .section-subtitle {
color: #CE8F28;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.85rem;
}
.content-gateway-section .section-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 800;
color: #1b2a47;
letter-spacing: -0.015em;
margin-top: 6px;
}
.content-gateway-section .content-gateway-grid--stacked {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin-top: 36px;
}
.content-gateway-section .content-gateway-card {
background: #ffffff;
border-radius: 24px;
border: 1.5px solid #e2e8f0;
padding: clamp(32px, 4vw, 44px) clamp(28px, 3.5vw, 36px);
box-shadow: 0 10px 30px -5px rgba(27, 42, 71, 0.05);
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.content-gateway-section .content-gateway-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -10px rgba(27, 42, 71, 0.12);
border-color: #cbd5e1;
}
.content-gateway-section .gateway-card-top-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.content-gateway-section .gateway-card-badge {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 9999px;
}
.content-gateway-section .gateway-card-badge--blog {
background: rgba(27, 42, 71, 0.08);
color: #1b2a47;
}
.content-gateway-section .gateway-card-badge--faq {
background: rgba(206, 143, 40, 0.12);
color: #CE8F28;
}
.content-gateway-section .gateway-icon-header {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
margin-bottom: 0;
}
.content-gateway-section .gateway-icon-header--blog {
background: linear-gradient(135deg, rgba(27, 42, 71, 0.08) 0%, rgba(42, 67, 101, 0.15) 100%);
color: #1b2a47;
}
.content-gateway-section .gateway-icon-header--faq {
background: linear-gradient(135deg, rgba(206, 143, 40, 0.12) 0%, rgba(206, 143, 40, 0.22) 100%);
color: #CE8F28;
}
.content-gateway-section .gateway-card-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.25rem, 1.8vw, 1.55rem);
font-weight: 700;
color: #1b2a47;
margin: 0 0 12px;
line-height: 1.35;
letter-spacing: -0.01em;
}
.content-gateway-section .gateway-card-desc {
color: #64748b;
font-size: 0.94rem;
line-height: 1.7;
margin: 0 0 24px;
flex-grow: 1;
}
.content-gateway-section .gateway-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 26px;
border-radius: 9999px;
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
transition: all 0.25s ease;
width: 100%;
}
.content-gateway-section .gateway-cta-btn--blog {
background: #1b2a47;
color: #ffffff;
box-shadow: 0 4px 14px rgba(27, 42, 71, 0.15);
}
.content-gateway-section .gateway-cta-btn--blog:hover {
background: #2a4365;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(27, 42, 71, 0.25);
color: #ffffff;
}
.content-gateway-section .gateway-cta-btn--faq {
background: #CE8F28;
color: #ffffff;
box-shadow: 0 4px 14px rgba(206, 143, 40, 0.2);
}
.content-gateway-section .gateway-cta-btn--faq:hover {
background: #b87b1c;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(206, 143, 40, 0.3);
color: #ffffff;
}
.ai-line-gateway-section {
padding: clamp(60px, 8vh, 100px) 0;
background: #ffffff;
}
.ai-line-gateway-section .gateway-header {
text-align: center;
margin-bottom: 40px;
}
.ai-line-gateway-section .section-subtitle {
color: var(--accent-gold, #CE8F28);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.85rem;
}
.ai-line-gateway-section .section-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 800;
color: #1b2a47;
letter-spacing: -0.015em;
margin-top: 6px;
}
.ai-line-gateway-section .gateway-desktop-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.ai-line-gateway-section .gateway-card-item {
background: #ffffff;
border-radius: 24px;
border: 1.5px solid #e2e8f0;
padding: clamp(32px, 4vw, 44px) clamp(28px, 3.5vw, 36px);
box-shadow: 0 10px 30px -5px rgba(27, 42, 71, 0.05);
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.ai-line-gateway-section .gateway-card-item:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -10px rgba(27, 42, 71, 0.12);
border-color: #cbd5e1;
}
.ai-line-gateway-section .gateway-card-item.line-card {
border-color: rgba(6, 199, 85, 0.35);
box-shadow: 0 12px 36px -6px rgba(6, 199, 85, 0.08);
}
.ai-line-gateway-section .card-badge {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.ai-line-gateway-section .badge-text {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 9999px;
background: rgba(27, 42, 71, 0.08);
color: #1b2a47;
}
.ai-line-gateway-section .badge-text.line-badge-custom {
background: rgba(6, 199, 85, 0.12);
color: #059642;
}
.ai-line-gateway-section .card-icon-wrapper {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
margin-bottom: 18px;
background: linear-gradient(135deg, #1b2a47 0%, #2a4365 100%);
color: #ffffff;
}
.ai-line-gateway-section .card-icon-wrapper.line-icon-wrapper-custom {
background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
color: #ffffff;
box-shadow: 0 4px 12px rgba(6, 199, 85, 0.25);
}
.ai-line-gateway-section .card-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.25rem, 1.8vw, 1.55rem);
font-weight: 700;
color: #1b2a47;
margin: 0 0 10px;
line-height: 1.35;
letter-spacing: -0.01em;
}
.ai-line-gateway-section .card-desc {
color: #64748b;
font-size: 0.94rem;
line-height: 1.7;
margin: 0 0 20px;
}
.ai-line-gateway-section .line-examples-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 24px;
}
.ai-line-gateway-section .examples-title {
display: block;
font-size: 0.78rem;
font-weight: 700;
color: #475569;
margin-bottom: 8px;
}
.ai-line-gateway-section .example-bubble {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px 12px;
font-size: 0.84rem;
color: #334155;
margin-bottom: 6px;
line-height: 1.4;
}
.ai-line-gateway-section .example-bubble:last-child {
margin-bottom: 0;
}
.ai-line-gateway-section .gateway-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 28px;
border-radius: 9999px;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
border: none;
text-decoration: none;
transition: all 0.25s ease;
}
.ai-line-gateway-section .gateway-btn.ai-btn {
background: linear-gradient(135deg, #1b2a47 0%, #2a4365 100%);
color: #ffffff;
box-shadow: 0 4px 14px rgba(27, 42, 71, 0.18);
}
.ai-line-gateway-section .gateway-btn.ai-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(27, 42, 71, 0.28);
}
.ai-line-gateway-section .gateway-btn.line-btn {
background: linear-gradient(135deg, #06c755 0%, #05ad49 100%);
color: #ffffff;
box-shadow: 0 4px 16px rgba(6, 199, 85, 0.3);
}
.ai-line-gateway-section .gateway-btn.line-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(6, 199, 85, 0.42);
color: #ffffff;
}
.ai-line-gateway-section .gateway-booking-cta-container {
text-align: center;
margin-top: 36px;
}
.ai-line-gateway-section .gateway-booking-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #CE8F28 0%, #b87b1c 100%);
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
padding: 13px 32px;
border-radius: 9999px;
text-decoration: none;
box-shadow: 0 4px 16px rgba(206, 143, 40, 0.25);
transition: all 0.25s ease;
}
.ai-line-gateway-section .gateway-booking-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(206, 143, 40, 0.35);
color: #ffffff;
}
.features-section {
background-color: var(--bg-sand);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 72px 24px 80px;
position: relative;
z-index: 3;
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 36px;
@media (max-width: 860px) {
grid-template-columns: 1fr;
gap: 20px;
}
}
.feature-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 32px;
border: 1px solid var(--border-color);
box-shadow: var(--card-shadow);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
display: flex;
flex-direction: column;
@media (max-width: 480px) {
padding: 24px 20px;
}
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(206, 143, 40, 0.12), var(--hover-shadow);
border-color: rgba(206, 143, 40, 0.45);
}
.feature-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.feature-icon-wrapper {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(206, 143, 40, 0.1);
color: var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
flex-shrink: 0;
transition: transform 0.35s ease, background-color 0.35s ease;
}
.feature-card:hover .feature-icon-wrapper {
transform: scale(1.05);
background: rgba(206, 143, 40, 0.16);
}
.feature-meta {
display: flex;
align-items: center;
gap: 12px;
}
.feature-number {
font-family: var(--font-numeric);
font-size: 1.6rem;
font-weight: 800;
color: rgba(206, 143, 40, 0.32);
line-height: 1;
letter-spacing: -0.02em;
}
.feature-badge {
display: inline-flex;
align-items: center;
font-size: 0.78rem;
font-weight: 700;
color: var(--accent-gold);
background: var(--primary-sky-light);
border: 1px solid rgba(206, 143, 40, 0.25);
padding: 4px 12px;
border-radius: var(--border-radius-pill);
letter-spacing: 0.02em;
white-space: nowrap;
}
.feature-card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.feature-title {
font-family: var(--font-main);
font-size: 1.15rem;
font-weight: 700;
color: var(--neutral-dark);
line-height: 1.45;
margin-bottom: 12px;
}
.feature-desc {
font-size: 0.88rem;
color: var(--neutral-gray);
line-height: 1.65;
margin-bottom: 0;
}
.license-trust-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 24px 32px;
margin-top: 40px;
}
.license-trust-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--accent-sage-bg);
color: var(--accent-sage);
border: 1px solid var(--accent-sage-border);
padding: 6px 16px;
border-radius: var(--border-radius-pill);
font-size: 0.82rem;
font-weight: 700;
margin-bottom: 16px;
}
.license-trust-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.license-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.license-key {
font-size: 0.76rem;
color: var(--neutral-gray);
font-weight: 600;
}
.license-val {
font-size: 0.95rem;
color: var(--neutral-dark);
font-weight: 700;
}
.license-divider {
width: 1px;
height: 36px;
background-color: var(--border-color);
}
.bottom-cta-section {
position: relative;
padding: clamp(48px, 7vh, 72px) 0;
background: var(--sh-bg-base, #f8fafc);
overflow: hidden;
text-align: center;
}
.bottom-cta-section::before {
display: none !important;
}
.bottom-cta-container {
position: relative;
z-index: 2;
max-width: 860px;
margin: 0 auto;
padding: 0 20px;
}
.bottom-cta-card {
background: #ffffff;
border: 1px solid rgba(206, 143, 40, 0.22);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(6, 21, 43, 0.04), 0 1px 3px rgba(6, 21, 43, 0.02);
padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 44px);
margin: 0 auto;
box-sizing: border-box;
}
.bottom-cta-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(206, 143, 40, 0.08);
border: 1px solid rgba(206, 143, 40, 0.25);
color: var(--color-sorai-gold, #CE8F28);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 4px 14px;
border-radius: 9999px;
margin-bottom: 14px;
}
.bottom-cta-kicker .kicker-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-sorai-gold, #CE8F28);
display: inline-block;
}
.bottom-cta-title {
font-family: var(--font-heading, "Plus Jakarta Sans", "Noto Sans JP", sans-serif);
font-size: clamp(1.15rem, 2.2vw, 1.55rem);
font-weight: 800;
color: var(--sh-navy-primary, #06152b);
margin: 0 0 14px;
line-height: 1.45;
letter-spacing: -0.01em;
text-shadow: none;
}
.bottom-cta-desc {
color: var(--sh-text-body, #475569);
font-size: clamp(0.84rem, 1.2vw, 0.92rem);
line-height: 1.75;
max-width: 660px;
margin: 0 auto 28px;
}
.bottom-cta-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.bottom-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 9999px;
font-weight: 700;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.bottom-cta-btn.line-btn {
background: linear-gradient(135deg, #06c755 0%, #05ad49 100%);
color: #ffffff;
padding: 13px 32px;
font-size: 0.95rem;
width: 100%;
max-width: 340px;
box-shadow: 0 4px 16px rgba(6, 199, 85, 0.28);
}
.bottom-cta-btn.line-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(6, 199, 85, 0.42);
color: #ffffff;
}
.bottom-cta-btn.secondary-btn {
background: #ffffff;
color: var(--sh-navy-primary, #06152b);
border: 1px solid rgba(206, 143, 40, 0.35);
box-shadow: 0 2px 8px rgba(6, 21, 43, 0.04);
padding: 11px 20px;
font-size: 0.82rem;
font-weight: 600;
width: 100%;
max-width: 340px;
}
.bottom-cta-btn.secondary-btn:hover {
background: rgba(206, 143, 40, 0.06);
border-color: var(--color-sorai-gold, #CE8F28);
color: var(--color-sorai-gold, #CE8F28);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(206, 143, 40, 0.15);
}
.bottom-cta-btn i {
flex-shrink: 0;
font-size: 1rem;
}
.ai-line-gateway-section .section-subtitle {
color: var(--color-sorai-gold, #CE8F28) !important;
}
.ai-line-gateway-section .agent-card .badge-text {
background: rgba(27, 42, 71, 0.08);
color: var(--color-sorai-navy, #1b2a47);
}
.ai-line-gateway-section .agent-card .card-icon-wrapper {
background: rgba(27, 42, 71, 0.08);
color: var(--color-sorai-navy, #1b2a47);
}
.ai-line-gateway-section .agent-card .line-examples-box {
border-left-color: var(--color-sorai-navy, #1b2a47);
}
.ai-line-gateway-section .agent-card .gateway-btn,
.ai-line-gateway-section .gateway-btn.agent-btn {
background: var(--color-sorai-navy, var(--primary-indigo, #1b2a47));
color: #ffffff;
text-decoration: none;
}
.ai-line-gateway-section .gateway-feature-box {
background: linear-gradient(135deg, rgba(27, 42, 71, 0.04) 0%, rgba(206, 143, 40, 0.08) 100%);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 16px;
padding: 20px;
}
.content-gateway-section .section-title-wrapper {
text-align: center;
margin-bottom: 36px;
}
.bottom-cta-section .kicker-dot {
width: 6px;
height: 6px;
background: var(--color-sorai-gold, #CE8F28);
border-radius: 50%;
display: inline-block;
}
.bottom-cta-section .cta-primary-btn {
background: var(--primary-indigo, #002C65);
color: #ffffff;
}
.bottom-cta-buttons .bottom-cta-btn i {
font-size: 1.15rem;
}
.bottom-cta-buttons .bottom-cta-btn .fa-brands.fa-line {
font-size: 1.25rem;
}
.hero-glass-btn-secondary.hero-glass-btn-inspection {
border-color: rgba(206, 143, 40, 0.4);
color: #091322;
background: rgba(255, 255, 255, 0.9);
i {
color: #CE8F28;
}
&:hover {
border-color: #CE8F28;
background: #ffffff;
box-shadow: 0 4px 12px rgba(206, 143, 40, 0.2);
}
}
.home-inspection-section {
padding: 60px 0 70px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
position: relative;
.section-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
.inspection-context-badge {
display: none;
}
.inspection-header {
margin-bottom: clamp(28px, 3.5vw, 36px);
}
.inspection-hub-card {
display: block;
background: #ffffff;
border-radius: 24px;
border: 1px solid #e2e8f0;
box-shadow: 0 12px 36px -8px rgba(9, 19, 34, 0.08);
overflow: hidden;
&.has-sample-open {
@media (min-width: 1025px) {
display: grid;
grid-template-columns: 5fr 7fr;
}
.inspection-left-panel {
border-bottom: 1px solid #e2e8f0;
@media (min-width: 1025px) {
border-right: 1px solid #e2e8f0;
border-bottom: none;
}
}
}
}
.inspection-left-panel {
padding: 36px;
background: #fafbfc;
border-right: none;
border-bottom: none;
display: flex;
flex-direction: column;
justify-content: space-between;
@media (max-width: 1024px) {
padding: 28px 20px;
}
.inspection-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.step-label {
font-size: 0.75rem;
font-weight: 700;
color: #64748b;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.status-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
color: #b87b1c;
background: rgba(206, 143, 40, 0.12);
padding: 3px 8px;
border-radius: 4px;
font-weight: 600;
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #CE8F28;
display: inline-block;
}
}
}
.inspection-tabs {
display: flex;
gap: 6px;
background: #f1f5f9;
padding: 4px;
border-radius: 10px;
margin-bottom: 20px;
.inspection-tab-btn {
flex: 1;
padding: 10px 12px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 600;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
&.active {
background: #091322;
color: #ffffff;
box-shadow: 0 2px 6px rgba(9, 19, 34, 0.18);
}
&:hover:not(.active) {
color: #091322;
}
}
}
.inspection-input-label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: #475569;
margin-bottom: 8px;
}
.inspection-input-wrapper {
position: relative;
display: flex;
align-items: center;
margin-bottom: 12px;
&.shake-error {
animation: inspectionShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
.inspection-url-input {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
}
.input-icon {
position: absolute;
left: 14px;
color: #94a3b8;
font-size: 0.95rem;
}
.inspection-url-input {
width: 100%;
padding: 14px 76px 14px 38px;
border: 1px solid #cbd5e1;
border-radius: 10px;
font-size: 0.85rem;
background: #ffffff;
color: #0f172a;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
&:focus {
outline: none;
border-color: #091322;
box-shadow: 0 0 0 2px rgba(9, 19, 34, 0.1);
}
}
.inspection-paste-btn {
position: absolute;
right: 8px;
padding: 6px 12px;
font-size: 0.75rem;
font-weight: 600;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 6px;
color: #334155;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: #e2e8f0;
}
}
}
.inspection-support-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 22px;
font-size: 0.72rem;
color: #64748b;
.tag-title {
color: #94a3b8;
}
.badge-portal {
background: #e2e8f0;
color: #334155;
padding: 2px 7px;
border-radius: 4px;
font-size: 0.68rem;
font-family: monospace;
font-weight: 600;
}
}
.inspection-cta-wrap {
margin-bottom: 12px;
.inspection-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #091322 0%, #17253d 100%);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 10px;
border: 1px solid rgba(206, 143, 40, 0.4);
box-shadow: 0 4px 14px rgba(9, 19, 34, 0.25);
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
transition: all 0.25s ease;
.cta-arrow {
color: #CE8F28;
transition: transform 0.2s ease;
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(9, 19, 34, 0.35);
border-color: #CE8F28;
.cta-arrow {
transform: translateX(4px);
}
}
}
}
.inspection-meta-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.74rem;
color: #64748b;
margin-bottom: 6px;
.meta-divider {
color: #cbd5e1;
}
}
.inspection-sample-toggle-wrap {
text-align: center;
margin-top: 14px;
margin-bottom: 6px;
.inspection-sample-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 480px;
padding: 11px 20px;
font-size: 0.84rem;
font-weight: 700;
color: #936011;
background: rgba(206, 143, 40, 0.08);
border: 1px solid rgba(206, 143, 40, 0.35);
border-radius: 10px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
.text-gold {
color: #CE8F28;
}
.sample-chevron-icon {
font-size: 0.75rem;
color: #CE8F28;
transition: transform 0.25s ease;
}
&:hover {
background: rgba(206, 143, 40, 0.15);
border-color: #CE8F28;
color: #091322;
box-shadow: 0 4px 14px rgba(206, 143, 40, 0.18);
transform: translateY(-1px);
}
&.is-open {
background: #091322;
color: #ffffff;
border-color: #091322;
box-shadow: 0 4px 14px rgba(9, 19, 34, 0.2);
.text-gold, .sample-chevron-icon {
color: #d4af37;
}
}
}
}
.inspection-dropzone {
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 24px 16px;
text-align: center;
background: #ffffff;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
cursor: pointer;
position: relative;
&:hover {
border-color: #CE8F28;
background: #fffdfa;
}
&.dragover {
border-color: #CE8F28;
background: #fdfbf7;
box-shadow: 0 0 0 4px rgba(206, 143, 40, 0.12);
}
.dropzone-icon {
font-size: 2rem;
color: #CE8F28;
margin-bottom: 8px;
}
.dropzone-primary-text {
font-size: 0.86rem;
font-weight: 700;
color: #091322;
margin-bottom: 6px;
}
.dropzone-secondary-text {
font-size: 0.75rem;
color: #64748b;
line-height: 1.5;
margin-bottom: 12px;
}
.dropzone-select-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #f1f5f9;
color: #091322;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
border: 1px solid #cbd5e1;
transition: all 0.2s;
pointer-events: none;
}
.selected-file-badge {
display: flex;
align-items: center;
gap: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 14px;
text-align: left;
.selected-file-icon {
font-size: 1.6rem;
color: #CE8F28;
flex-shrink: 0;
}
.selected-file-info {
flex: 1;
min-width: 0;
.selected-file-name {
font-size: 0.82rem;
font-weight: 700;
color: #091322;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.selected-file-meta {
font-size: 0.72rem;
color: #64748b;
}
}
.btn-clear-selected-file {
background: none;
border: none;
color: #94a3b8;
font-size: 0.9rem;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: color 0.2s;
&:hover {
color: #e11d48;
}
}
}
.dropzone-loading-view {
padding: 12px 0;
.dropzone-spinner {
width: 32px;
height: 32px;
border: 3px solid rgba(206, 143, 40, 0.2);
border-top-color: #CE8F28;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 10px;
}
.dropzone-loading-title {
font-size: 0.86rem;
font-weight: 700;
color: #091322;
margin-bottom: 4px;
}
.dropzone-loading-desc {
font-size: 0.72rem;
color: #64748b;
margin-bottom: 12px;
}
.dropzone-progress-bar {
height: 4px;
background: #e2e8f0;
border-radius: 2px;
overflow: hidden;
max-width: 240px;
margin: 0 auto;
.dropzone-progress-fill {
height: 100%;
background: #CE8F28;
width: 0%;
transition: width 0.3s ease;
}
}
}
.dropzone-error-msg {
background: #fff1f2;
border: 1px solid #fecdd3;
color: #e11d48;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.75rem;
margin-top: 10px;
text-align: left;
}
}
.inspection-privacy-note {
margin-top: 24px;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
font-size: 0.7rem;
color: #94a3b8;
line-height: 1.5;
p {
margin: 0;
display: flex;
align-items: flex-start;
gap: 6px;
}
i {
color: #CE8F28;
font-size: 0.75rem;
margin-top: 2px;
}
}
}
.inspection-right-panel {
padding: 24px 20px;
background: #f8fafc;
display: flex;
flex-direction: column;
justify-content: flex-start;
@media (max-width: 1024px) {
padding: 20px 14px;
}
.mockup-controls-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
.mockup-live-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 700;
color: #06152B;
background: #ffffff;
border: 1px solid #e2e8f0;
padding: 4px 10px;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
.live-dot {
width: 7px;
height: 7px;
background: #10B981;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
animation: pulseDot 2s infinite;
}
}
.mockup-page-tabs {
display: inline-flex;
background: #e2e8f0;
border-radius: 8px;
padding: 3px;
gap: 3px;
.mockup-page-tab {
border: none;
background: transparent;
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
padding: 5px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
i {
font-size: 0.72rem;
}
&:hover:not(.active) {
color: #06152B;
background: rgba(255, 255, 255, 0.5);
}
&.active {
background: #ffffff;
color: #06152B;
box-shadow: 0 2px 6px rgba(9, 19, 34, 0.08);
i {
color: #CE8F28;
}
}
}
}
.mockup-close-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 5px 10px;
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #091322;
color: #ffffff;
border-color: #091322;
}
}
}
.mockup-swipe-guide {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, rgba(206, 143, 40, 0.08) 0%, rgba(6, 21, 43, 0.04) 100%);
border: 1px dashed rgba(206, 143, 40, 0.35);
border-radius: 8px;
padding: 7px 14px;
margin-bottom: 12px;
font-size: 0.74rem;
font-weight: 600;
color: #06152B;
.swipe-arrow-icon {
color: #CE8F28;
font-size: 0.72rem;
}
}
.mockup-sheet-slider-container {
position: relative;
width: 100%;
}
.mockup-sheet-slider-track {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
box-sizing: border-box;
padding-bottom: 6px;
&::-webkit-scrollbar {
display: none;
}
}
.mockup-slide-item {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
display: flex;
justify-content: center;
scroll-snap-align: start;
scroll-snap-stop: always;
box-sizing: border-box;
.report-sheet {
width: 100%;
max-width: 100%;
margin: 0 auto 8px;
max-height: 640px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: 14px;
border: 1px solid #cbd5e1;
box-shadow: 0 8px 24px rgba(9, 19, 34, 0.08);
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f5f9;
}
&::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
&:hover {
background: #CE8F28;
}
}
@media (max-width: 1024px) {
max-height: 560px;
}
}
}
.mockup-slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #cbd5e1;
box-shadow: 0 4px 14px rgba(9, 19, 34, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #091322;
font-size: 13px;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
&:hover {
background: #091322;
color: #ffffff;
border-color: #091322;
transform: translateY(-50%) scale(1.08);
}
&.disabled {
opacity: 0.2;
cursor: not-allowed;
pointer-events: none;
}
&.mockup-slide-prev {
left: -14px;
}
&.mockup-slide-next {
right: -14px;
}
@media (max-width: 768px) {
display: none;
}
}
.mockup-dots-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 14px;
margin-bottom: 12px;
.mockup-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
border: none;
padding: 0;
cursor: pointer;
transition: all 0.25s ease;
&.active {
width: 24px;
border-radius: 4px;
background: #CE8F28;
}
}
}
.mockup-bottom-close-wrap {
text-align: center;
margin-top: 4px;
.mockup-bottom-close-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
font-size: 0.78rem;
font-weight: 700;
color: #64748b;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #091322;
color: #ffffff;
border-color: #091322;
}
}
}
.sheet-page-separator {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 22px 0 16px;
user-select: none;
.separator-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(206, 143, 40, 0.05), rgba(206, 143, 40, 0.35), rgba(206, 143, 40, 0.05));
}
.separator-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #CE8F28;
background: #06152B;
padding: 5px 14px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(6, 21, 43, 0.15);
i {
font-size: 0.68rem;
}
}
}
.report-sheet {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px 22px;
box-shadow: 0 8px 24px -4px rgba(9, 19, 34, 0.06), 0 0 0 1px rgba(206, 143, 40, 0.15);
position: relative;
overflow: hidden;
margin-bottom: 8px;
animation: fadeInReport 0.25s ease-in-out;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3.5px;
background: linear-gradient(90deg, #CE8F28 0%, #DFB15B 50%, #06152B 100%);
}
@media (max-width: 640px) {
padding: 18px 14px;
}
.sheet-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 2px solid #CE8F28;
padding-bottom: 10px;
margin-bottom: 14px;
gap: 12px;
.sheet-header-left {
flex: 1;
.sheet-badge {
display: inline-block;
background: #06152B;
color: #CE8F28;
font-size: 0.62rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 3px;
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.sheet-title {
font-size: 1.12rem;
font-weight: 800;
color: #06152B;
font-family: "Noto Serif JP", serif;
line-height: 1.35;
margin: 0 0 3px;
&.sheet-title-page2 {
font-size: 1.02rem;
}
}
.sheet-address {
font-size: 0.72rem;
color: #64748b;
display: flex;
align-items: center;
gap: 5px;
margin: 0;
.text-gold {
color: #CE8F28;
font-size: 0.75rem;
}
}
}
.sheet-agent-box {
text-align: right;
font-size: 0.68rem;
color: #64748b;
white-space: nowrap;
.sheet-agent-corp {
font-weight: 700;
color: #06152B;
display: block;
font-size: 0.7rem;
}
@media (max-width: 768px) {
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding-bottom: 6px;
margin-bottom: 8px;
.sheet-header-left {
width: 100%;
.sheet-title {
font-size: 0.94rem;
word-break: break-word;
line-height: 1.3;
margin-top: 4px;
}
.sheet-address {
font-size: 0.62rem;
margin-top: 3px;
}
}
.sheet-agent-box {
text-align: left;
width: 100%;
white-space: normal;
padding-top: 4px;
border-top: 1px dashed rgba(206, 143, 40, 0.25);
display: flex;
justify-content: space-between;
align-items: center;
.sheet-agent-corp {
font-size: 0.62rem;
}
.sheet-agent-date {
font-size: 0.58rem;
margin-top: 0;
}
}
}
}
.property-banner {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-left: 4px solid #06152B;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 14px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 12px;
@media (max-width: 640px) {
grid-template-columns: 1fr;
gap: 10px;
}
.prop-meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 8px;
@media (max-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
.meta-item-label {
color: #64748b;
font-size: 0.62rem;
font-weight: 500;
display: block;
margin-bottom: 1px;
}
.meta-item-value {
font-weight: 700;
color: #0f172a;
font-size: 0.74rem;
white-space: nowrap;
&.meta-accuracy-verified {
color: #10B981;
display: inline-flex;
align-items: center;
gap: 3px;
i {
font-size: 0.68rem;
}
}
}
}
.prop-price-box {
text-align: right;
border-left: 1px solid #e2e8f0;
padding-left: 10px;
display: flex;
flex-direction: column;
justify-content: center;
@media (max-width: 640px) {
border-left: none;
border-top: 1px dashed #e2e8f0;
padding-left: 0;
padding-top: 8px;
text-align: left;
}
.meta-item-label {
color: #64748b;
font-size: 0.62rem;
margin-bottom: 2px;
}
.price-main {
font-size: 1.35rem;
font-weight: 800;
color: #06152B;
font-family: "Cinzel", "Inter", sans-serif;
line-height: 1;
.price-unit {
font-size: 0.72rem;
font-weight: 600;
margin-left: 2px;
}
}
.price-sub {
font-size: 0.68rem;
color: #64748b;
margin-top: 2px;
}
.metrics-badges-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px;
margin-top: 6px;
@media (max-width: 640px) {
justify-content: flex-start;
}
.metric-chip {
font-size: 0.62rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
white-space: nowrap;
&.chip-tsubo {
background: rgba(206, 143, 40, 0.12);
color: #8C6D3F;
border: 1px solid rgba(206, 143, 40, 0.3);
}
&.chip-mgmt {
background: #f1f5f9;
color: #334155;
border: 1px solid #e2e8f0;
}
&.chip-seismic {
background: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
}
}
}
}
.building-profile-card {
background: #fcfaf7;
border: 1px solid rgba(197, 168, 128, 0.35);
border-left: 4px solid #CE8F28;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
box-shadow: 0 1px 4px rgba(6, 21, 43, 0.03);
.profile-card-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
.profile-card-badge {
background: #06152B;
color: #CE8F28;
font-size: 0.58rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
letter-spacing: 0.06em;
}
.profile-card-subhead {
font-size: 0.68rem;
font-weight: 700;
color: #8C6D3F;
}
}
.profile-headline {
font-size: 0.78rem;
font-weight: 700;
color: #06152B;
font-family: "Noto Serif JP", serif;
line-height: 1.45;
margin: 4px 0 8px;
padding-bottom: 5px;
border-bottom: 1px dashed rgba(197, 168, 128, 0.4);
}
.profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
@media (max-width: 640px) {
grid-template-columns: 1fr;
}
.profile-block {
background: #ffffff;
border: 1px solid #efece6;
border-radius: 6px;
padding: 8px 10px;
.profile-block-label {
font-size: 0.68rem;
font-weight: 700;
color: #8C6D3F;
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 4px;
.profile-icon {
font-size: 0.72rem;
}
}
.profile-block-body {
font-size: 0.66rem;
line-height: 1.5;
color: #334155;
margin: 0;
}
}
}
}
.section-h2 {
font-size: 0.8rem;
font-weight: 700;
color: #06152B;
border-left: 3px solid #CE8F28;
padding-left: 8px;
margin: 12px 0 8px;
display: flex;
justify-content: space-between;
align-items: center;
.section-h2-sub {
font-size: 0.64rem;
color: #64748b;
font-weight: normal;
}
.savings-tag {
background: rgba(206, 143, 40, 0.18);
color: #8C6D3F;
font-size: 0.68rem;
font-weight: 800;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(206, 143, 40, 0.3);
}
}
.cost-table-container {
margin-bottom: 14px;
.cost-table-wrapper {
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 6px;
}
.cost-table {
width: 100%;
border-collapse: collapse;
font-size: 0.72rem;
th, td {
padding: 6px 8px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
th {
background: #f8fafc;
color: #64748b;
font-weight: 600;
font-size: 0.66rem;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.cost-col-name { width: 35%; }
.cost-col-trad { width: 22%; text-align: right; }
.cost-col-sorai { width: 23%; text-align: right; }
.cost-col-note { width: 20%; text-align: center; }
td.amount {
text-align: right;
font-family: "Cinzel", "Inter", sans-serif;
font-weight: 600;
color: #334155;
}
.cost-sorai-amount {
color: #06152B;
font-weight: 700;
}
.font-bold-gold {
color: #CE8F28;
font-weight: 800;
}
.font-zero {
color: #10B981;
font-weight: 800;
}
.strike-text {
text-decoration: line-through;
color: #94a3b8;
font-size: 0.68rem;
}
.cost-note {
text-align: center;
font-size: 0.65rem;
color: #64748b;
}
.badge-cut {
font-size: 0.62rem;
background: #ecfdf5;
color: #065f46;
padding: 1px 5px;
border-radius: 3px;
font-weight: 700;
display: inline-block;
}
tr.total-row {
background: #f8fafc;
font-weight: 700;
border-top: 2px solid #06152B;
td {
padding: 7px 8px;
color: #06152B;
}
.cost-sorai-total {
color: #06152B;
font-size: 0.82rem;
font-weight: 800;
}
.cost-status-badge {
text-align: center;
font-size: 0.65rem;
font-weight: 700;
color: #06152B;
}
}
tr.savings-row {
background: #fffdf9;
font-weight: 700;
td {
padding: 7px 8px;
}
.savings-label {
text-align: right;
color: #B45309;
font-weight: 700;
font-size: 0.7rem;
}
.savings-amount {
color: #B45309;
font-size: 0.86rem;
font-weight: 800;
}
.savings-status-badge {
text-align: center;
font-size: 0.65rem;
font-weight: 800;
color: #B45309;
}
}
}
}
.slope-card-wrapper {
margin-bottom: 14px;
.slope-status-card {
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-left: 4px solid #10B981;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
.slope-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(16, 185, 129, 0.2);
flex-wrap: wrap;
gap: 6px;
.slope-header-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
.slope-badge {
font-size: 0.68rem;
font-weight: 800;
padding: 2px 7px;
border-radius: 4px;
color: #ffffff;
letter-spacing: 0.05em;
&.FLAT { background: #10B981; }
}
.slope-station-meta {
font-size: 0.72rem;
font-weight: 700;
color: #06152B;
}
.slope-terrain-badge {
font-size: 0.62rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
background: #06152B;
color: #E8D8C0;
border: 1px solid #CE8F28;
}
}
.slope-elevation-metrics {
font-size: 0.72rem;
font-weight: 700;
color: #065f46;
font-family: "Cinzel", "Inter", sans-serif;
}
}
.slope-commentary {
font-size: 0.68rem;
line-height: 1.55;
color: #1e293b;
}
.slope-card-footer {
font-size: 0.6rem;
color: #64748b;
margin-top: 6px;
padding-top: 4px;
border-top: 1px dashed rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
}
}
.hazard-section-wrapper {
margin-bottom: 14px;
.hazard-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
@media (max-width: 640px) {
grid-template-columns: 1fr;
}
.hazard-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 10px;
.hazard-title {
font-size: 0.62rem;
font-weight: 700;
color: #64748b;
margin-bottom: 2px;
}
.hazard-value {
font-size: 0.74rem;
font-weight: 700;
color: #06152B;
margin-bottom: 3px;
&.text-success {
color: #047857;
}
}
.hazard-note {
font-size: 0.62rem;
color: #64748b;
line-height: 1.4;
}
}
}
}
.verdict-section-wrapper {
margin-bottom: 14px;
.verdict-box {
background: #ffffff;
border: 1px solid #CE8F28;
border-radius: 8px;
padding: 10px 12px;
.verdict-item {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.verdict-label {
font-size: 0.68rem;
font-weight: 700;
color: #8C6D3F;
margin-bottom: 2px;
}
.verdict-text {
font-size: 0.66rem;
line-height: 1.55;
color: #1e293b;
font-family: "Noto Serif JP", serif;
}
}
}
}
.checklist-section-wrapper {
margin-bottom: 14px;
.checklist-container {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
.checklist-item {
display: flex;
gap: 8px;
padding: 6px 10px;
border-bottom: 1px solid #f1f5f9;
align-items: flex-start;
&:last-child {
border-bottom: none;
}
.checklist-num {
background: #06152B;
color: #CE8F28;
font-weight: 800;
font-size: 0.62rem;
width: 17px;
height: 17px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.checklist-content {
flex: 1;
.checklist-title {
font-weight: 700;
color: #06152B;
font-size: 0.68rem;
margin-bottom: 1px;
}
.checklist-prompt {
color: #64748b;
font-size: 0.64rem;
line-height: 1.4;
}
}
}
}
}
.sheet-footer {
border-top: 1px solid #e2e8f0;
padding-top: 8px;
margin-top: 12px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.62rem;
color: #94a3b8;
gap: 8px;
flex-wrap: wrap;
.footer-legal {
line-height: 1.4;
strong {
color: #334155;
}
}
.footer-auth {
.auth-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.62rem;
font-weight: 700;
color: #06152B;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
.text-gold {
color: #CE8F28;
}
}
}
}
}
}
@keyframes fadeInReport {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.inspection-next-banner {
margin-top: 36px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 28px 24px;
text-align: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
.next-banner-inner {
max-width: 680px;
margin: 0 auto;
}
.next-banner-kicker {
display: block;
font-size: 0.72rem;
font-weight: 700;
color: #CE8F28;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.next-banner-title {
font-size: 1.15rem;
font-weight: 800;
color: #091322;
margin-bottom: 8px;
}
.next-banner-desc {
font-size: 0.82rem;
color: #475569;
line-height: 1.6;
margin-bottom: 18px;
}
.next-banner-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
.next-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #091322;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
i {
color: #CE8F28;
}
&:hover {
border-color: #CE8F28;
color: #CE8F28;
transform: translateY(-1px);
}
}
.next-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #475569;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
&:hover {
border-color: #94a3b8;
color: #091322;
transform: translateY(-1px);
}
}
}
}
}
@keyframes inspectionShake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
40%, 60% { transform: translate3d(3px, 0, 0); }
}
#chatbot-toggle-btn,
#chatbot-popover-menu {
display: none !important;
}
#chatbot-close-btn {
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
font-size: 1.5rem !important;
position: relative !important;
z-index: 100 !important;
cursor: pointer !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.15) !important;
border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
border-radius: 50% !important;
transition: transform 0.15s ease, background 0.15s ease !important;
}
#chatbot-close-btn::before {
content: '' !important;
position: absolute !important;
inset: -8px !important;
cursor: pointer !important;
}
#chatbot-close-btn:active {
transform: scale(0.9) !important;
background: rgba(255, 255, 255, 0.35) !important;
}
#custom-chatbot-widget.custom-chatbot-open #chatbot-window {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
}
.staging-chat-dock {
position: fixed;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
right: 16px;
z-index: 10002;
display: flex;
flex-direction: column;
align-items: flex-end;
pointer-events: none;
font-family: var(--font-main, 'Noto Sans JP', sans-serif);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.3s ease;
}
@media (min-width: 769px) {
.staging-chat-dock {
bottom: 32px;
right: 32px;
}
}
#custom-chatbot-widget.custom-chatbot-open ~ .staging-chat-dock,
body.chatbot-open .staging-chat-dock {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(16px) scale(0.96);
}
.staging-pill-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg,
rgba(var(--primary-indigo-rgb, 0, 44, 101), 0.96) 0%,
rgba(15, 23, 42, 0.98) 100%);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1.5px solid rgba(206, 143, 40, 0.55);
border-radius: var(--border-radius-pill, 50px);
padding: 7px 16px 7px 9px;
color: #ffffff;
cursor: pointer;
box-shadow: 0 8px 28px rgba(var(--primary-indigo-rgb, 0, 44, 101), 0.32);
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.25s ease,
border-color 0.25s ease;
touch-action: manipulation;
pointer-events: auto;
text-align: left;
}
.staging-pill-btn::after {
content: '';
position: absolute;
inset: -2px;
border-radius: var(--border-radius-pill, 50px);
border: 1.5px solid rgba(206, 143, 40, 0.65);
box-shadow: 0 0 16px rgba(206, 143, 40, 0.38);
pointer-events: none;
opacity: 0.3;
will-change: opacity, transform;
animation: sorai-breathe-glow 4s ease-in-out infinite;
}
.staging-pill-btn > * {
position: relative;
z-index: 1;
}
@keyframes sorai-breathe-glow {
0%, 100% { opacity: 0.25; transform: scale(0.99); }
50%       { opacity: 0.85; transform: scale(1.018); }
}
.staging-pill-btn:hover {
transform: translateY(-2px) scale(1.025);
border-color: var(--color-sorai-gold, var(--sorai-gold, #CE8F28));
box-shadow: 0 12px 36px rgba(var(--primary-indigo-rgb, 0, 44, 101), 0.42),
0 0 24px rgba(206, 143, 40, 0.5);
}
.staging-pill-btn:hover::after { opacity: 0.95; }
.staging-pill-btn:active       { transform: scale(0.97); }
.staging-pill-logo-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(206, 143, 40, 0.45);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
overflow: hidden;
flex-shrink: 0;
padding: 3px;
}
.staging-pill-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.staging-pill-content {
display: flex;
flex-direction: column;
gap: 1px;
}
.staging-pill-main-row {
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.25;
}
.staging-pill-brand {
color: #ffffff;
font-family: var(--font-numeric, 'Outfit', 'Plus Jakarta Sans', sans-serif);
font-weight: 800;
font-size: 0.94rem;
letter-spacing: 0.03em;
}
.staging-pill-sep {
color: rgba(206, 143, 40, 0.65);
font-weight: 300;
font-size: 0.75rem;
}
.staging-pill-title {
color: #ffffff;
font-size: 0.81rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.staging-pill-subline {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.63rem;
color: rgba(255, 255, 255, 0.78);
letter-spacing: 0.02em;
line-height: 1.2;
}
.staging-pill-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--primary-emerald, #06c755);
box-shadow: 0 0 5px rgba(6, 199, 85, 0.8);
flex-shrink: 0;
}
.staging-pill-chat-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--color-sorai-gold, var(--sorai-gold, #CE8F28));
font-size: 0.82rem;
margin-left: 2px;
flex-shrink: 0;
transition: background 0.2s ease, transform 0.2s ease;
}
.staging-pill-btn:hover .staging-pill-chat-badge {
background: rgba(206, 143, 40, 0.22);
transform: scale(1.08);
}
.staging-chat-dock.dock-minimized .staging-pill-subline {
display: none;
}
.staging-chat-dock.dock-minimized .staging-pill-title,
.staging-chat-dock.dock-minimized .staging-pill-sep {
display: none;
}
.staging-chat-dock.dock-minimized .staging-pill-btn {
padding: 6px 10px 6px 8px;
gap: 6px;
}
.staging-chat-dock.dock-minimized .sorai-micro-bubble {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(6px) scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.staging-chat-dock.dock-hidden {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(16px) scale(0.96) !important;
}
@media (max-width: 480px) {
.staging-pill-btn {
padding: 6px 14px 6px 8px;
gap: 8px;
}
.staging-pill-brand {
font-size: 0.9rem;
}
.staging-pill-title {
font-size: 0.77rem;
}
.staging-pill-subline {
font-size: 0.6rem;
}
}
.sorai-micro-bubble {
position: relative;
width: 216px;
min-height: 40px;
background: linear-gradient(135deg,
rgba(var(--primary-indigo-rgb, 0, 44, 101), 0.96) 0%,
rgba(15, 23, 42, 0.98) 100%);
border: 1px solid rgba(206, 143, 40, 0.55);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(var(--primary-indigo-rgb, 0, 44, 101), 0.35);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
color: #ffffff;
cursor: pointer;
margin-bottom: 8px;
pointer-events: auto;
box-sizing: border-box;
animation: soraiBubbleFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
user-select: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sorai-micro-bubble:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(var(--primary-indigo-rgb, 0, 44, 101), 0.45);
}
.sorai-bubble-inner {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 10px;
min-height: 40px;
box-sizing: border-box;
}
.sorai-bubble-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
.sorai-bubble-icon svg {
display: block;
width: 12px;
height: 12px;
}
.sorai-bubble-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
}
.sorai-bubble-line1 {
font-size: 11px;
font-weight: 600;
line-height: 1.25;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.sorai-bubble-line2 {
font-size: 10px;
font-weight: 400;
line-height: 1.25;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.sorai-bubble-close {
flex-shrink: 0;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color 0.15s ease, background 0.15s ease;
}
.sorai-bubble-close:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
}
.sorai-bubble-arrow {
position: absolute;
bottom: -5px;
right: 28px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(206, 143, 40, 0.7);
}
@keyframes soraiBubbleFadeIn {
from {
opacity: 0;
transform: translateY(6px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 991px) {
.trust-ticker-container {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.user-path-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.hero-glass-card {
max-width: 620px;
margin: 20px auto;
}
.content-gateway-section .content-gateway-grid--stacked {
display: flex !important;
flex-direction: column !important;
overflow-x: visible !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 20px !important;
width: 100% !important;
}
.content-gateway-section .content-gateway-card {
width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
.ai-line-gateway-section .gateway-desktop-grid {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
}
.ai-line-gateway-section .gateway-card-item {
width: 100% !important;
}
.bottom-cta-buttons {
flex-direction: column !important;
width: 100% !important;
}
.bottom-cta-btn {
width: 100% !important;
max-width: 380px !important;
}
.editorial-property-section {
padding: 48px 16px 56px;
overflow-x: clip;
}
.editorial-showcase-card {
grid-template-columns: 1fr;
gap: 28px;
padding: 24px 16px;
min-width: 0;
overflow: hidden;
}
.editorial-visual-col {
min-width: 0;
width: 100%;
}
.process-steps-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.license-divider {
display: none;
}
}
@media (max-width: 768px) {
.editorial-property-section {
padding: 40px 16px 48px;
}
.editorial-title {
font-size: 1.55rem;
}
.editorial-tagline {
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 14px;
}
.editorial-badges-row {
gap: 6px;
}
.editorial-badge {
font-size: 0.75rem;
padding: 4px 12px;
text-align: center;
}
.showcase-nav-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 6px;
border-radius: var(--border-radius-md, 16px);
overflow: visible;
}
.showcase-tab-btn {
font-size: 0.78rem;
padding: 8px 6px;
border-radius: var(--border-radius-sm, 8px);
white-space: normal;
text-align: center;
line-height: 1.25;
gap: 5px;
}
.showcase-tab-btn i {
font-size: 0.82rem;
}
.plan-subselector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.plan-sub-btn {
font-size: 0.76rem;
padding: 8px 8px;
text-align: center;
line-height: 1.3;
white-space: normal;
}
.plan-sub-btn:nth-child(3) {
grid-column: span 2;
}
.figure-plan-wrap {
height: auto;
min-height: 180px;
max-height: 260px;
padding: 8px;
}
.editorial-plan-display {
max-height: 240px;
}
.amenities-editorial-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.spec-item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px 12px;
}
.spec-key {
width: 100%;
font-size: 0.76rem;
color: var(--accent-sage, #CE8F28);
font-weight: 700;
}
.spec-value {
font-size: 0.86rem;
word-break: break-word;
}
.deposit-highlight {
word-break: break-word;
max-width: 100%;
}
.editorial-actions {
margin-top: 10px;
}
.editorial-btn {
font-size: 0.9rem;
padding: 13px 16px;
width: 100%;
}
}
@media (max-width: 480px) {
.editorial-title {
font-size: 1.4rem;
}
.editorial-showcase-card {
padding: 20px 14px;
}
.showcase-tab-btn {
font-size: 0.74rem;
padding: 7px 4px;
}
.plan-sub-btn {
font-size: 0.72rem;
padding: 7px 6px;
}
}
@media (max-width: 820px) {
.simulation-accordion-toggle {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--white);
border: 1px solid var(--border-color);
padding: 16px 24px;
border-radius: var(--border-radius-md);
cursor: pointer;
font-weight: 700;
color: var(--neutral-dark);
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
margin-bottom: 16px;
}
.simulation-accordion-toggle:hover {
box-shadow: var(--hover-shadow);
}
.simulation-accordion-toggle .toggle-icon {
transition: transform 0.3s ease;
}
.simulation-glass-card {
display: none;
grid-template-columns: 1fr;
gap: 24px;
padding: 20px;
}
.simulation-glass-card.is-open {
display: grid !important;
}
.simulation-outputs {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--border-color);
padding-top: 24px;
}
.news-cards-grid:not(.expanded) .news-card-item:nth-child(n+4) {
display: none !important;
}
.news-load-more-btn {
display: block;
margin: 24px auto 0 auto;
padding: 12px 32px;
border: 1.5px solid var(--primary-indigo);
color: var(--primary-indigo);
background: transparent;
border-radius: var(--border-radius-pill);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.news-load-more-btn:hover {
background: var(--primary-indigo);
color: white;
box-shadow: 0 4px 14px rgba(0, 44, 101, 0.25);
}
.news-cards-grid.expanded + div .news-load-more-btn {
display: none !important;
}
.gateway-desktop-grid {
display: none;
}
.gateway-mobile-card {
display: flex;
flex-direction: column;
gap: 16px;
}
.mobile-card-half {
width: 100%;
text-decoration: none;
font-family: inherit;
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
padding: 20px;
box-shadow: var(--card-shadow);
cursor: pointer;
transition: transform 0.25s ease;
}
.mobile-card-half:active {
transform: scale(0.98);
}
.half-content {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.half-icon-wrapper {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-sage-bg);
color: var(--accent-sage);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.half-icon-wrapper.line-green-icon {
background: #06c755;
color: white;
}
.half-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--neutral-dark);
margin: 0 0 2px 0;
}
.half-subtitle {
font-size: 0.8rem;
color: var(--neutral-gray);
margin: 0;
}
.mobile-action-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
border-radius: var(--border-radius-pill);
font-weight: 700;
font-size: 0.9rem;
border: none;
cursor: pointer;
}
.mobile-ai-btn {
background: var(--neutral-dark);
color: var(--white);
}
.mobile-line-btn {
background: #06c755;
color: var(--white);
}
}
@media (min-width: 821px) {
.simulation-accordion-toggle {
display: none !important;
}
.simulation-glass-card {
display: grid !important;
}
.news-load-more-btn {
display: none !important;
}
.gateway-mobile-card {
display: none;
}
}
@media (max-width: 768px) {
.hero-section {
min-height: calc(100svh - 70px) !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding: 70px 0 16px !important;
}
.features-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
margin-top: 24px !important;
}
.feature-card {
padding: 24px 20px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.area-carousel-wrapper {
overflow: hidden !important;
}
.process-steps-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.area-card {
flex: 0 0 280px;
}
.carousel-nav-hints {
display: none;
}
.bottom-cta-section {
padding: 56px 20px !important;
}
.bottom-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.bottom-cta-btn {
width: 100%;
}
#custom-chatbot-widget {
display: block !important;
position: fixed !important;
bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
right: 16px !important;
left: auto !important;
z-index: 10001 !important;
pointer-events: none !important;
}
}
@media (max-width: 640px) {
.hero-section--glass {
min-height: clamp(540px, 80svh, 680px) !important;
height: calc(100svh - 120px) !important;
max-height: 720px !important;
padding: 18px 0 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
background: none !important;
position: relative !important;
}
.hero-section--glass .hero-bg-img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: center 30% !important;
display: block !important;
z-index: 1 !important;
}
.hero-section--glass::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
180deg,
rgba(7, 18, 34, 0.55) 0%,
rgba(7, 18, 34, 0.20) 28%,
rgba(7, 18, 34, 0.00) 45%,
rgba(7, 18, 34, 0.00) 60%,
rgba(7, 18, 34, 0.40) 78%,
rgba(7, 18, 34, 0.88) 100%
) !important;
z-index: 2 !important;
pointer-events: none !important;
}
.hero-section--glass .hero-overlay {
display: none !important;
}
.hero-section--glass .hero-container {
position: relative !important;
padding: 0 16px !important;
margin-top: 0 !important;
z-index: 5 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.hero-section--glass .hero-glass-card {
background: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
max-width: 100% !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
animation: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
.hero-section--glass .hero-glass-kicker {
display: none !important;
}
.hero-section--glass .hero-glass-title {
font-size: clamp(1.15rem, 5vw, 1.38rem) !important;
line-height: 1.32 !important;
margin-bottom: 0 !important;
font-weight: 800 !important;
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.95) !important;
letter-spacing: -0.01em !important;
text-align: left !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
.hero-section--glass .hero-glass-lead {
display: none !important;
}
.hero-section--glass .hero-glass-trust-pills {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 6px !important;
justify-content: flex-start !important;
}
.hero-section--glass .hero-glass-pill {
padding: 4px 10px !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
border-radius: 20px !important;
background: rgba(15, 23, 42, 0.65) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
color: #ffffff !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
gap: 5px !important;
}
.hero-section--glass .hero-glass-pill i {
color: #F6C774 !important;
font-size: 0.75rem !important;
}
.hero-section--glass .hero-glass-pill:nth-child(3) {
display: none !important;
}
.hero-section--glass .hero-glass-actions {
width: 100% !important;
max-width: 100% !important;
margin-top: auto !important;
padding-top: 16px !important;
}
.hero-section--glass .hero-glass-btn-primary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 13px 20px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
border-radius: 50px !important;
background: linear-gradient(135deg, #06c755 0%, #05b04c 100%) !important;
color: #ffffff !important;
box-shadow: 0 6px 20px rgba(6, 199, 85, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
white-space: normal !important;
text-align: center !important;
gap: 8px !important;
}
.hero-section--glass .hero-glass-btn-primary i {
font-size: 1.25rem !important;
color: #ffffff !important;
}
.hero-cta-microcopy,
.hero-section--glass .hero-cta-microcopy {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
margin-top: 6px !important;
line-height: 1.35 !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
text-align: center !important;
}
.hero-section--glass .hero-glass-secondary-row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
margin-top: 8px !important;
}
.hero-section--glass .hero-glass-btn-secondary {
min-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 6px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-align: center !important;
white-space: nowrap !important;
letter-spacing: -0.02em !important;
background: rgba(255, 255, 255, 0.16) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
color: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
transition: all 0.2s ease !important;
}
.hero-section--glass .hero-glass-btn-secondary i {
font-size: 0.82rem !important;
color: #F6C774 !important;
margin-right: 4px !important;
}
.section-title,
.user-path-title,
.feature-title,
.path-card-title,
.quote-intro-title {
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
.user-path-title {
font-size: clamp(1.2rem, 4.2vw, 1.55rem) !important;
line-height: 1.35 !important;
}
.features-section .section-title {
font-size: clamp(1.3rem, 4.5vw, 1.65rem) !important;
line-height: 1.35 !important;
}
.path-card-action-btn,
.area-card-btn,
.bottom-cta-btn {
white-space: nowrap !important;
}
.news-banner-header {
flex-wrap: wrap !important;
gap: 8px 16px !important;
align-items: baseline !important;
}
.news-banner-label {
font-size: 1.05rem !important;
}
.news-banner-all-link {
font-size: 0.82rem !important;
margin-left: auto !important;
}
.trust-ticker-container {
grid-template-columns: 1fr;
gap: 12px;
padding: 0 16px;
}
.trust-ticker-item {
gap: 10px;
}
.path-btn-group {
flex-direction: column;
gap: 8px;
}
.path-btn-group .path-btn--line,
.path-btn-group .path-btn--outline,
.path-btn-group .path-btn--hearing {
flex: 1 1 auto;
width: 100%;
}
.simulator-outer-card {
padding: 24px 16px;
border-radius: 20px;
}
}
#hs-eu-confirmation-button {
background-color: #002C65 !important;
color: #ffffff !important;
border-color: #002C65 !important;
font-weight: 600 !important;
}
#hs-eu-decline-button {
color: #2c2825 !important;
border-color: #706b64 !important;
}
@media (max-width: 1024px) {
.suite-tabs-nav {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
{
padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.suite-nav-arrow {
display: none;
}
.suite-carousel-track {
gap: 12px;
padding: 0 4%;
}
.suite-panel {
flex: 0 0 92%;
width: 92%;
min-width: 92%;
max-width: 92%;
scroll-snap-align: center;
opacity: 0.65;
transform: scale(0.98);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.suite-panel.active {
opacity: 1;
transform: scale(1);
}
.suite-panel .home-hearing-banner-section .hearing-embed-iframe {
height: 680px;
}
.simulator-outer-card {
padding: 20px 12px !important;
}
.suite-panel .inspection-left-panel {
padding: 20px 16px !important;
}
.suite-panel .suite-standalone-card {
padding: 20px 16px !important;
}
.compact-news-strip-section {
overflow: hidden !important;
}
.compact-news-item,
.compact-news-content {
min-width: 0 !important;
}
.compact-news-title {
min-width: 0 !important;
width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.bottom-cta-section {
overflow: hidden !important;
max-width: 100% !important;
padding: 36px 14px calc(36px + env(safe-area-inset-bottom, 0px)) !important;
}
.bottom-cta-card {
padding: 24px 14px 20px !important;
border-radius: 16px !important;
}
.bottom-cta-kicker {
font-size: 0.70rem !important;
padding: 3px 10px !important;
margin-bottom: 10px !important;
}
.bottom-cta-title {
font-size: 1.10rem !important;
line-height: 1.4 !important;
margin-bottom: 10px !important;
}
.bottom-cta-desc {
font-size: 0.80rem !important;
line-height: 1.65 !important;
margin-bottom: 18px !important;
}
.bottom-cta-secondary-group {
flex-direction: column !important;
width: 100% !important;
gap: 8px !important;
}
.bottom-cta-btn.secondary-btn {
width: 100% !important;
max-width: 340px !important;
padding: 9px 12px !important;
font-size: 0.74rem !important;
letter-spacing: -0.02em !important;
gap: 6px !important;
}
.quote-tab-nav {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
padding: 4px 2px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.quote-tab-nav::-webkit-scrollbar {
display: none !important;
}
.quote-tab-btn {
flex: 0 0 auto !important;
padding: 8px 14px !important;
font-size: 12.5px !important;
white-space: nowrap !important;
border-radius: 9999px !important;
}
.inspection-sample-toggle-wrap {
padding: 0 4px !important;
}
.inspection-sample-toggle-btn {
font-size: 0.82rem !important;
padding: 11px 12px !important;
white-space: nowrap !important;
width: 100% !important;
justify-content: center !important;
gap: 6px !important;
}
.inspection-sample-toggle-btn .sample-btn-text {
font-size: 0.80rem !important;
white-space: nowrap !important;
letter-spacing: -0.01em !important;
}
.inspection-right-panel {
padding: 14px 6px !important;
}
.mockup-slide-item {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
.mockup-slide-item .report-sheet {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto 8px !important;
padding: 12px 9px !important;
box-sizing: border-box !important;
font-size: 0.65rem !important;
line-height: 1.4 !important;
}
.report-sheet .sheet-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 5px !important;
padding-bottom: 6px !important;
margin-bottom: 8px !important;
}
.report-sheet .sheet-header-left {
width: 100% !important;
}
.report-sheet .sheet-header-left .sheet-title {
font-size: 0.94rem !important;
word-break: break-word !important;
line-height: 1.3 !important;
margin-top: 4px !important;
}
.report-sheet .sheet-header-left .sheet-address {
font-size: 0.62rem !important;
margin-top: 3px !important;
}
.report-sheet .sheet-agent-box {
text-align: left !important;
width: 100% !important;
white-space: normal !important;
padding-top: 4px !important;
border-top: 1px dashed rgba(206, 143, 40, 0.25) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.report-sheet .sheet-agent-box .sheet-agent-corp {
font-size: 0.62rem !important;
}
.report-sheet .sheet-agent-box .sheet-agent-date {
font-size: 0.58rem !important;
margin-top: 0 !important;
}
.report-sheet .section-h2 {
font-size: 0.72rem !important;
line-height: 1.35 !important;
margin-bottom: 6px !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px !important;
}
.report-sheet .section-h2-sub {
font-size: 0.56rem !important;
}
.report-sheet .property-banner {
padding: 8px 9px !important;
margin-bottom: 8px !important;
}
.report-sheet .prop-meta-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 3px 5px !important;
}
.report-sheet .meta-item-label {
font-size: 0.56rem !important;
}
.report-sheet .meta-item-value {
font-size: 0.66rem !important;
white-space: normal !important;
word-break: break-all !important;
}
.report-sheet .price-main {
font-size: 1.15rem !important;
}
.report-sheet .price-sub {
font-size: 0.65rem !important;
}
.report-sheet .metrics-badges-row {
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 3px !important;
margin-top: 5px !important;
}
.report-sheet .metric-chip {
font-size: 0.58rem !important;
padding: 2px 5px !important;
}
.report-sheet .building-profile-card {
padding: 8px !important;
margin-bottom: 8px !important;
}
.report-sheet .profile-card-badge {
font-size: 0.50rem !important;
}
.report-sheet .profile-card-subhead {
font-size: 0.58rem !important;
}
.report-sheet .profile-headline {
font-size: 0.68rem !important;
line-height: 1.3 !important;
margin: 4px 0 6px !important;
}
.report-sheet .profile-grid {
grid-template-columns: 1fr !important;
gap: 5px !important;
}
.report-sheet .profile-block {
padding: 5px 6px !important;
background: #f8fafc !important;
border-radius: 6px !important;
}
.report-sheet .profile-block-label {
font-size: 0.60rem !important;
font-weight: 700 !important;
margin-bottom: 2px !important;
}
.report-sheet .profile-block-body {
font-size: 0.58rem !important;
line-height: 1.4 !important;
color: #475569 !important;
margin: 0 !important;
}
.report-sheet .cost-table-container {
margin-bottom: 8px !important;
}
.report-sheet .savings-tag {
font-size: 0.56rem !important;
padding: 2px 5px !important;
white-space: nowrap !important;
}
.report-sheet .cost-table {
font-size: 0.60rem !important;
min-width: 240px !important;
}
.report-sheet .cost-table th,
.report-sheet .cost-table td {
padding: 3px 4px !important;
}
.report-sheet .cost-total-row th,
.report-sheet .cost-total-row td {
font-size: 0.64rem !important;
}
.report-sheet .slope-card-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
}
.report-sheet .slope-badge {
font-size: 0.54rem !important;
padding: 1px 4px !important;
}
.report-sheet .slope-station-meta {
font-size: 0.60rem !important;
}
.report-sheet .slope-terrain-badge {
font-size: 0.54rem !important;
padding: 1px 4px !important;
}
.report-sheet .slope-elevation-metrics {
font-size: 0.60rem !important;
}
.report-sheet .slope-commentary {
font-size: 0.58rem !important;
line-height: 1.4 !important;
margin: 5px 0 !important;
}
.report-sheet .slope-card-footer {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
font-size: 0.52rem !important;
}
.report-sheet .hazard-grid {
grid-template-columns: 1fr !important;
gap: 5px !important;
}
.report-sheet .hazard-card {
padding: 6px 8px !important;
}
.report-sheet .hazard-title {
font-size: 0.58rem !important;
}
.report-sheet .hazard-value {
font-size: 0.64rem !important;
}
.report-sheet .hazard-note {
font-size: 0.56rem !important;
line-height: 1.35 !important;
}
.report-sheet .verdict-item {
padding: 6px 8px !important;
margin-bottom: 5px !important;
}
.report-sheet .verdict-label {
font-size: 0.60rem !important;
}
.report-sheet .verdict-text {
font-size: 0.58rem !important;
line-height: 1.4 !important;
}
.report-sheet .checklist-item {
font-size: 0.58rem !important;
line-height: 1.35 !important;
}
.report-sheet .report-footer-bar {
font-size: 0.50rem !important;
padding: 4px 6px !important;
}
.bottom-cta-buttons {
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
}
.bottom-cta-btn.line-btn {
width: 100% !important;
max-width: 340px !important;
justify-content: center !important;
}
}
@media (max-width: 480px) {
.hero-section--glass .hero-glass-title {
font-size: clamp(1.2rem, 5.2vw, 1.45rem);
line-height: 1.32;
}
.hero-section--glass .hero-glass-kicker {
font-size: 0.68rem;
padding: 3px 8px;
}
.bottom-cta-btn.line-btn {
padding: 12px 16px !important;
font-size: 0.90rem !important;
}
.bottom-cta-btn.secondary-btn {
padding: 8px 10px !important;
font-size: 0.72rem !important;
letter-spacing: -0.02em !important;
}
.suite-carousel-track {
gap: 10px;
padding: 0 3.5%;
}
.suite-panel {
flex: 0 0 93%;
width: 93%;
min-width: 93%;
max-width: 93%;
}
}