/* =========================================================
いい任売.jp — styles.css
Order:
1. :root tokens
2. Reset / base
3. Typography defaults
4. Layout utilities
5. Global components (header, footer, mobile CTA bar) — step 2
6. Section styles (hero, anxiety, ...) — step 3+
========================================================= */
/* 1. Tokens ------------------------------------------------ */
:root {
/* Primary brand */
--color-primary: #0072B7;
--color-primary-40: rgba(0, 114, 183, 0.4);
--color-primary-70: rgba(0, 114, 183, 0.7);
/* Accent / emphasis */
--color-accent: #FF8018;
--color-accent-light: #FEBF8A;
--color-magenta: #E30080;
/* CTAs */
--color-line: #06C755;
--color-email: #00B7FF;
/* Gold */
--color-gold: #FFD710;
--color-gold-light: #FFE45F;
--color-gold-mid: #FFD076; /* inner concentric ring on gold badges (dump "Ellipse 3") */
--color-gold-dark: #C2A468; /* outer concentric ring on gold badges (dump "Ellipse 2") */
--gradient-gold: linear-gradient(158.39deg, #D19F54 8.57%, #F5EEC0 46.41%, #F1C555 91.42%);
--gradient-gold-text: linear-gradient(158.39deg, #D19F54 8.57%, #BE8421 46.41%, #F1C555 91.42%);
/* Backgrounds */
--bg-tint-blue: #E6EDFA;
--bg-light-blue: #F5F8FF;
--bg-ice: #F9FDFF;
--bg-warm-gray: #F5F5F3;
--bg-white: #FFFFFF;
/* Text */
--text-dark: #333333;
--text-mid: #595959;
--text-light: #949494;
--text-white: #FFFFFF;
/* Type */
--font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
--font-latin: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-numeric: 'Monomaniac One', 'Noto Sans JP', sans-serif;
/* Layout */
--container-max: 1200px;
--container-padding-mobile: 16px;
--container-padding-desktop: 40px;
/* Shadow */
--shadow-card: 2px 4px 4px rgba(0, 0, 0, 0.25);
}
/* 2. Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.03em; /* deep-audit batch 2: base tracking for Japanese text */
color: var(--text-dark);
background: var(--bg-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-break: break-word;
min-height: 100vh;
}
img, picture, svg, video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
background: none;
border: 0;
cursor: pointer;
}
button, input, textarea, select {
font: inherit;
color: inherit;
}
ul, ol { list-style: none; }
/* 3. Typography defaults ---------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.4;
}
/* 4. Layout utilities ------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding-mobile);
}
@media (min-width: 1100px) {
.container {
padding-inline: var(--container-padding-desktop);
}
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 4.1 Anchor scroll offset ---------------------------------
Sticky desktop header is ~97px tall + 33px top margin. Without offset,
anchor jumps land under the header. scroll-margin-top pushes the target
down so it lands below the header band. */
section[id] { scroll-margin-top: 24px; }
@media (min-width: 1100px) {
section[id] { scroll-margin-top: 140px; }
}
/* 5. Global components ------------------------------------ */
/* Push page content clear of the fixed mobile CTA bar.
Desktop has no bottom bar, so this padding is mobile-only. */
body { padding-bottom: 73px; }
@media (min-width: 1100px) { body { padding-bottom: 0; } }
/* ---------- 5.1 Site header ----------
Figma spec (cold frame):
Mobile 375×48.5 bg #F9FDFF radius 50px logo@(17,14) 98.4×18.5
hamburger@(324,11.5) 35×25 (3 lines 2px thick each, #0072B7)
Desktop 1283×97 bg #F9FDFF radius 100px
logo@(56,28) 197×37
CTA row with LINE (256×54 #06C755 r31),
phone (327×54 #FF8018 r30),
email (256×54 #00B7FF r31) — all w700 white labels
Text inside pills renders around 22–26px to fit the designed pill size;
Figma's recorded 43.6px on LINE is a source-file artefact the designer
didn't render — using 26px matches the published design visually.
*/
.site-header {
position: fixed;
top: 8px;
left: 8px;
right: 8px;
z-index: 100;
background: transparent;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
background: #F9FDFF;
height: 48px;
padding: 0 17px;
border-radius: 50px; /* Figma mobile header is a full pill */
}
.site-header__logo {
height: 18.5px; /* Figma mobile logo 98.4×18.5 */
width: auto;
display: block;
}
.site-header__ctas { display: none; }
.site-header__hamburger {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 35px;
height: 25px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.site-header__hamburger span {
display: block;
width: 35px;
height: 2px;
border-radius: 1px;
background: #0072B7;
}
/* ---------- Desktop header ----------
Figma: centered 1283px pill, 97px tall, 33px from top. */
@media (min-width: 1100px) {
.site-header {
top: 33px;
left: 50%;
right: auto;
transform: translateX(-50%);
width: 1283px;
max-width: calc(100vw - 32px);
}
.site-header__inner {
height: 97px;
border-radius: 100px;
padding: 0 56px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
gap: 0;
}
.site-header__logo { height: 37px; }
.site-header__hamburger { display: none; }
.site-header__ctas {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
}
/* ---------- 5.2 Header CTA pills ---------- */
/* Mobile menu overlay + fallback inline — base keeps pills usable in the
mobile drawer. Desktop overrides sizes to match Figma exactly. */
.header-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 20px;
border-radius: 999px;
color: #FFFFFF;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.3;
white-space: nowrap;
text-decoration: none;
transition: opacity 0.15s ease;
}
.header-cta:hover { opacity: 0.88; }
.header-cta__icon { width: 24px; height: 24px; object-fit: contain; }
.header-cta__label { display: inline-flex; flex-direction: column; text-align: center; }
.header-cta__sub { font-size: 0.75rem; font-weight: 500; }
.header-cta__number { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }
.header-cta--line { background: #06C755; }
.header-cta--phone { background: #FF8018; }
.header-cta--email { background: #00B7FF; }
@media (min-width: 1100px) {
/* Header-pill CTA dimensions from Figma spec. */
.site-header__ctas .header-cta {
height: 54px;
padding: 0 52px;
gap: 12px;
border-radius: 31px;
font-size: 1.625rem; /* 26px — matches Figma メール pill metric */
line-height: 1;
}
.site-header__ctas .header-cta__icon { width: 30px; height: 30px; }
.site-header__ctas .header-cta--line { width: 256px; }
.site-header__ctas .header-cta--phone {
width: 327px;
padding: 0 50px;
border-radius: 30px;
}
.site-header__ctas .header-cta--email { width: 256px; }
.site-header__ctas .header-cta--phone .header-cta__label { text-align: left; }
.site-header__ctas .header-cta__sub { font-size: 0.875rem; font-weight: 500; line-height: 1.2; } /* ~14px */
.site-header__ctas .header-cta__number { font-size: 1.625rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
}
/* ---------- 5.3 Mobile menu overlay ---------- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background: var(--bg-white);
padding: 80px 24px 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__close {
position: absolute;
top: 16px; right: 16px;
width: 44px; height: 44px;
font-size: 32px;
line-height: 1;
color: var(--color-primary);
}
.mobile-menu .header-cta {
width: 100%;
justify-content: center;
padding: 16px 20px;
font-size: 1rem;
}
@media (min-width: 1100px) {
.mobile-menu { display: none !important; }
}
/* ---------- 5.4 Mobile fixed bottom CTA bar ----------
Figma spec (cold mobile 相談誘導, measured pixel-exact):
Bar 375 × 77.5 bg #0072B7
Padding 17px left / 16px right / 4px top (gap=8px between tabs)
Tabs 109 × 73.5 top-rounded r=5 (tl,tr)
LINE #06C755 @ 17, 4
電話 #FF8018 @ 133.5, 4 (icon 21.5×25, label @ 167.5,45)
メール #00B7FF @ 250, 4 (icon 38×25, label @ 273.5,45)
Icon at y=13.5 from tab top, ~25px tall, width auto
Label at y=41 from tab top, 20px w700 #FFFFFF ls 0.8px, lh 30px
*/
.mobile-cta-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 50;
display: flex;
justify-content: center; /* center the 3 buttons on wider mobile screens */
height: 78px;
padding: 4px 16px 0 17px;
gap: 8px;
background: #0072B7;
}
.mobile-cta {
flex: 1 1 109px;
max-width: 109px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 13.5px 4px 0;
color: #FFFFFF;
font-weight: 700;
font-size: 20px;
line-height: 30px;
letter-spacing: 0.8px;
border-radius: 5px 5px 0 0;
text-decoration: none;
}
.mobile-cta__icon { width: auto; height: 25px; object-fit: contain; }
.mobile-cta--line { background: #06C755; }
.mobile-cta--phone { background: #FF8018; }
.mobile-cta--email { background: #00B7FF; }
.mobile-cta:active { transform: translateY(1px); opacity: 0.9; }
@media (min-width: 1100px) {
.mobile-cta-bar { display: none; }
}
/* ---------- 5.5 Site footer ---------- */
.site-footer {
background: var(--color-primary);
color: var(--text-white);
padding: 56px 16px 32px;
text-align: center;
}
.site-footer__inner {
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.site-footer__logo-pill {
background: var(--bg-white);
border-radius: 4px;
padding: 14px 36px;
display: inline-flex;
}
.site-footer__logo-pill img { height: 40px; width: auto; }
.site-footer__info {
font-style: normal;
font-weight: 700;
line-height: 2;
font-size: 0.875rem;
}
.site-footer__tel {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.site-footer__tel a { color: inherit; }
.site-footer__copy {
font-family: var(--font-latin);
font-weight: 700;
font-size: 0.875rem;
margin-top: 16px;
opacity: 0.95;
}
@media (min-width: 1100px) {
.site-footer { padding: 80px 40px 48px; text-align: left; }
.site-footer__tel { font-size: 1.75rem; }
.site-footer__inner {
display: grid;
grid-template-columns: auto auto;
justify-content: center;
column-gap: 56px;
row-gap: 20px;
align-items: center;
}
.site-footer__logo-pill {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
justify-self: start;
}
.site-footer__info { grid-column: 2; grid-row: 1; margin: 0; }
.site-footer__tel { grid-column: 2; grid-row: 2; margin: 0; }
.site-footer__copy {
grid-column: 1 / -1;
text-align: center;
margin-top: 32px;
}
}
/* 6. Section styles --------------------------------------- */
/* ---------- 6.1 Hero (cold / warm) ----------
Pixel-perfect implementation — every element absolutely-positioned at its
exact Figma coordinates. Mobile canvas 375×754, desktop canvas 1440×766.
Source of truth:
Mobile cold — frame 56:6071 (FV) 375×754
Desktop cold — frame 56:3804 (TOPイメージ group) 1440×766
Mobile warm — frame 56:5298 375×749
Desktop warm — frame 56:2980 1440×819
*/
.hero {
position: relative;
overflow: hidden;
background: #CCEAFF; /* Figma Rectangle 113 (cold + warm both use #CCEAFF) */
isolation: isolate;
}
.hero__bg, .hero__tint { display: none; } /* no longer used; .hero itself is the bg */
.hero__inner {
position: relative;
width: 100%;
max-width: 375px;
height: 754px;
margin: 0 auto;
}
/* --- Text block ----------------------------------------------------
Mobile: @ (16, 98) 326×221
Desktop: @ (167, 178) 495×312
*/
.hero__text {
position: absolute;
top: 98px;
left: 16px;
width: 326px;
max-width: none;
text-align: left;
margin: 0;
}
.hero__lead {
margin: 0;
color: #0072B7;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 36px;
letter-spacing: 1.8px;
}
.hero__main {
margin: 0;
color: #0072B7;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 30px; /* kanji default */
line-height: 40px;
letter-spacing: 0.33px;
display: block;
}
.hero__main-line { display: block; }
.hero__main-line:last-child {
margin-top: 6px;
font-size: 30px;
line-height: 35px;
letter-spacing: 2.36px;
}
.hero__main-line--row {
display: block;
white-space: nowrap;
}
.hero__main-line--row > * { display: inline; vertical-align: baseline; }
/* Mobile-only line break inside a --row span. On desktop, hide the
so the row stays inline; on mobile it forces a wrap. Used in warm hero
to put 任意売却の相談 and 2,500組。 on separate lines on mobile. */
.hero__mobile-break { display: inline; }
@media (min-width: 1100px) {
.hero__mobile-break { display: none; }
}
.hero__main-orange {
color: #FF8018;
font-weight: 700;
font-size: 50px; /* Figma mobile numbers 50-53px */
line-height: 50px;
letter-spacing: -1px;
}
.hero__main-blue { color: #0072B7; }
.hero__main-line--row .hero__main-blue {
font-size: 30px; /* Figma mobile kanji 30px */
}
.hero__highlight {
color: #0072B7;
background: #FFE45F;
padding: 0 4px;
border-radius: 4px 24px 4px 24px;
}
.hero__sub {
margin: 14px 0 0;
color: #0072B7;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 22px;
letter-spacing: 0.74px;
}
/* --- Woman / man figure --------------------------------------------
Mobile: bottom-anchored, near full-bleed so badges overlay the photo
(cold woman ~88% wide, warm man full 100% with sky behind).
Desktop cold: @ (797, 148) 494×681
*/
.hero__figure {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 88%;
max-width: 330px;
height: 460px;
object-fit: contain;
object-position: bottom center;
margin: 0;
z-index: 1;
}
.hero--warm .hero__figure {
/* Mobile warm — figma 56:5308: man at (-30, 316) size 414×341 (real px),
mask cuts to (0, 257)–(375, 675). The man overflows the hero left edge
by ~30px and we let the mask (overflow:hidden on .hero) clip it. */
top: 316px;
left: -30px;
bottom: auto;
right: auto;
transform: none;
width: 414px;
height: 341px;
max-width: none;
object-fit: cover;
object-position: center top;
}
/* Warm hero background — Tokyo cityscape per Figma (frame 56:2980).
Two layered backgrounds, top to bottom in CSS source order:
1. Light blue (#cceaff) at 30% opacity tinting the photo
2. Cityscape photo, sized 2728×1821, positioned at -660, -739
(image is pre-flipped horizontally to match Figma's transform).
Mobile values (375×~750 hero): image 2248×1500 at -1217, -609. */
.hero--warm {
background-color: #CCEAFF;
background-image:
linear-gradient(rgba(204, 234, 255, 0.3), rgba(204, 234, 255, 0.3)),
url('../assets/photos/hero-warm-desktop.jpg');
background-size: 100% 100%, 2248px 1500px;
background-position: 0 0, -1217px -609px;
background-repeat: no-repeat, no-repeat;
}
@media (min-width: 1100px) {
.hero--warm {
background-size: 100% 100%, 2728px 1821px;
background-position: 0 0, -660px -739px;
}
}
/* Cold hero background — sky/clouds per Figma + SPEC §7.
Same layered approach as warm: tint overlay + photo. The 1440×766
asset is sized exactly for desktop, so `cover` is enough; mobile
crops via cover too. Photo is pre-mirrored to match Figma's flip. */
.hero--cold {
background-color: #CCEAFF;
background-image:
linear-gradient(rgba(204, 234, 255, 0.3), rgba(204, 234, 255, 0.3)),
url('../assets/photos/hero-desktop.jpg');
background-size: 100% 100%, cover;
background-position: 0 0, center;
background-repeat: no-repeat, no-repeat;
}
/* --- Badge cluster --------------------------------------------------
Mobile: 5 badges, 3+2 grid at @ (43, 489) 288×187
Desktop cold: 5 badges in one row at @ (210, 528) 1020×211
*/
.hero__badges {
position: absolute;
top: 489px;
left: 0;
right: 0;
width: 100%; /* full width; flex centers the children */
padding: 0;
margin: 0;
z-index: 2;
background: transparent;
display: flex;
justify-content: center;
}
/* =========================================================
Desktop overrides (≥1100px) — Figma 1440×766 canvas
Below 1100 the mobile hero (375-wide, absolute-positioned at Figma
coords) is shown centered on the #CDEAFF background, since the
desktop layout requires ~1100px of horizontal room (figure at
left: 797px + 494px width pushes to the right edge of 1291).
========================================================= */
@media (min-width: 1100px) {
.hero__inner {
max-width: 1440px;
height: 766px;
}
.hero__text {
top: 178px;
left: 167px;
width: 495px;
}
.hero__lead {
font-size: 40px;
line-height: 48px;
letter-spacing: 2.4px;
}
.hero__main {
font-size: 52.67px;
line-height: 63.2px;
letter-spacing: 0;
}
.hero__main-line:last-child {
margin-top: 5px;
font-size: 40px;
line-height: 48px;
letter-spacing: 2.8px;
}
.hero__main-orange {
font-size: 80px; /* Figma desktop numbers 80-85px */
line-height: 80px;
letter-spacing: -1.5px;
}
.hero__main-line--row .hero__main-blue { font-size: 40px; }
.hero__highlight { padding: 0 10px; border-radius: 6px 44px 6px 44px; }
.hero__sub {
margin-top: 20px;
font-size: 20px;
line-height: 30px;
letter-spacing: 0.8px;
}
/* Reset mobile bottom-anchor + center for desktop absolute coords */
.hero--cold .hero__figure,
.hero--warm .hero__figure {
top: 148px;
bottom: auto;
left: 797px;
transform: none;
width: 494px;
height: auto;
max-width: none;
object-fit: initial;
}
.hero--cold .hero__badges,
.hero--warm .hero__badges {
top: 528px;
left: 0;
right: 0;
width: 100%; /* flexbox on .hero__badges centers the .badge-grid */
transform: none;
}
}
/* Warm hero — exact Figma specs (file 56:2980 desktop, 56:5298 mobile).
The "2,500" number uses a gold gradient fill; the
elements below the title use the same gradient. */
.hero--warm .hero__main-orange {
background: linear-gradient(180deg, #D19F54 0%, #BE8421 46%, #F1C555 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero--warm .hero__sub {
white-space: nowrap;
}
/* MOBILE warm sizes per Figma (375 viewport):
任意売却の相談 = 30px / 700 / #0072B7
2,500 = 60px / 700 / gold gradient
組。 = 33px / 700 / #0072B7
売却の先にある... = 20px / 700 / #0072B7
Body text = 16px / 500 / #0072B7 */
@media (max-width: 1099px) {
.hero--warm .hero__main-line--row .hero__main-blue { font-size: 30px; }
.hero--warm .hero__main-orange { font-size: 60px; line-height: 60px; }
.hero--warm .hero__main-line--row .hero__main-blue + .hero__main-orange + .hero__main-blue,
.hero--warm .hero__main-line--row > .hero__main-blue:last-child { font-size: 33px; }
.hero--warm .hero__main-line:last-child {
font-size: 20px;
line-height: 27px;
letter-spacing: 1.4px;
white-space: nowrap; /* keep on one line per Figma */
}
.hero--warm .hero__sub { font-size: 16px; line-height: 25px; }
}
/* DESKTOP warm sizes per Figma (1440 viewport):
任意売却の相談 = 44px / 700 / #0072B7
2,500 = 93px / 700 / gold gradient
組。 = 47px / 700 / #0072B7
売却の先にある... = 39px / 700 / #0072B7
Body text = 22px / 500 / #0072B7 */
@media (min-width: 1100px) {
.hero--warm .hero__main-line--row .hero__main-blue { font-size: 44px; }
.hero--warm .hero__main-orange { font-size: 93px; line-height: 112px; }
.hero--warm .hero__main-line--row > .hero__main-blue:last-child { font-size: 47px; }
.hero--warm .hero__main-line:last-child {
font-size: 39px;
line-height: 53px;
letter-spacing: 2.7px;
white-space: nowrap;
}
.hero--warm .hero__sub { font-size: 22px; line-height: 33px; }
/* Desktop man photo — figma at (722, 309) size 636×523 in 1440×819 hero. */
.hero--warm .hero__figure {
top: 309px;
left: 722px;
width: 636px;
height: 523px;
object-fit: contain;
object-position: left top;
}
/* Warm desktop badge cluster — figma バッジ 56:3001:
Badge 1 (1st): 219×219 at rel(0, 0)
Badges 2-5: 155×155 at rel(248-, 64)
Badge 6 (last): 209×209 at rel(984, 10)
All BOTTOMS align at y=219 → use align-items: flex-end. */
.hero--warm .badge-grid {
align-items: flex-end;
gap: 28px; /* figma gap ≈ 29 between badge edges */
}
.hero--warm .badge {
flex: 0 0 155px;
width: 155px;
height: 155px;
}
.hero--warm .badge-grid > .badge:first-child {
flex: 0 0 219px;
width: 219px;
height: 219px;
}
.hero--warm .badge-grid > .badge:last-child {
flex: 0 0 209px;
width: 209px;
height: 209px;
}
/* Warm badge typography — per Figma. Reset the cold-specific overrides
and apply warm sizes that fill the discs without overflowing. */
.hero--warm .badge__title { font-size: 22px; line-height: 28px; font-weight: 400; }
.hero--warm .badge__big { font-size: 22px; line-height: 28px; font-weight: 400; }
.hero--warm .badge__big strong { font-size: 38px; line-height: 44px; font-weight: 500; }
/* Badge 1 (219, 解決実績 / 2,500組超) */
.hero--warm .badge-grid > .badge:nth-child(1) .badge__title { font-size: 32px; line-height: 38px; font-weight: 500; }
.hero--warm .badge-grid > .badge:nth-child(1) .badge__big { font-size: 26px; line-height: 32px; font-weight: 400; }
.hero--warm .badge-grid > .badge:nth-child(1) .badge__big strong { font-size: 50px; line-height: 56px; }
/* Badge 2 (155, 任意売却専門 / 20年) */
.hero--warm .badge-grid > .badge:nth-child(2) .badge__title { font-size: 22px; }
.hero--warm .badge-grid > .badge:nth-child(2) .badge__big strong { font-size: 47px; line-height: 52px; }
/* Badge 3 (155, 解決事例数 / 全国最大級) — both lines same size */
.hero--warm .badge-grid > .badge:nth-child(3) .badge__title { font-size: 26px; line-height: 30px; }
.hero--warm .badge-grid > .badge:nth-child(3) .badge__big { font-size: 26px; line-height: 30px; font-weight: 500; }
.hero--warm .badge-grid > .badge:nth-child(3) .badge__big strong { font-size: 26px; line-height: 30px; font-weight: 500; }
/* Badge 4 (155, テレビ神奈川 / CM放映中) */
.hero--warm .badge-grid > .badge:nth-child(4) .badge__title { font-size: 22px; }
.hero--warm .badge-grid > .badge:nth-child(4) .badge__big strong { font-size: 38px; line-height: 44px; }
/* Badge 5 (155, 24時間 / 年中無休 / 対応) */
.hero--warm .badge-grid > .badge:nth-child(5) .badge__title:first-child { font-size: 34px; line-height: 38px; font-weight: 500; }
.hero--warm .badge-grid > .badge:nth-child(5) .badge__title { font-size: 26px; line-height: 30px; font-weight: 500; }
.hero--warm .badge-grid > .badge:nth-child(5) .badge__note { font-size: 19px; line-height: 22px; font-weight: 400; }
/* Badge 6 (209, 手続き / 自己負担金 / 0円) */
.hero--warm .badge-grid > .badge:nth-child(6) .badge__title { font-size: 25px; line-height: 30px; font-weight: 500; }
.hero--warm .badge-grid > .badge:nth-child(6) .badge__big { font-size: 35px; line-height: 40px; font-weight: 500; }
.hero--warm .badge-grid > .badge:nth-child(6) .badge__big strong { font-size: 63px; line-height: 70px; font-weight: 500; }
}
/* In hero line 1 (rows marked with --row), shrink the surrounding blue text
so the orange numbers ("20", "2,500") stay the prominent, oversized parts. */
.hero__main-line--row .hero__main-blue {
font-size: clamp(1.5rem, 4.5vw, 2.5rem);
}
.hero__rule {
border: 0;
height: 3px;
margin: 6px 0;
background: linear-gradient(90deg, #D19F54 0%, #BE8421 46%, #F1C555 100%);
border-radius: 2px;
}
/* ---------- 6.2 Hero badge cluster ----------
Mobile (375): 5 badges at 90×90 arranged 3+2 inside a 288×187 box.
Desktop (1440): 5 badges inside a 1020×211 box — badges 1 and 5 are
211×211; the middle three are 159×159 (vertically centered).
*/
.badge-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 7px 8px; /* 3×90 + 2×8 = 286 — fits in 300 with room */
width: 300px; /* mobile grid width — generous so 3-up doesn't wrap to 2 */
margin: 0;
padding: 0;
list-style: none;
}
.badge {
flex: 0 0 90px;
width: 90px;
height: 90px;
background: url('../assets/icons/badge-frame.png') center/contain no-repeat;
filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.18));
}
/* Badge typography — Figma uses #333333 w500 (medium) throughout, with
size hierarchy instead of heavy weights. "Numbers / emphasis" text is
wrapped in which we render as w500 + larger size (not w900). */
.badge__inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 6px;
gap: 1px;
color: #333333;
}
/* Mobile badge typography — tuned so every label + number fits inside the
90×90 gold disc with no overflow (text area ≈ 74px wide inside the circle). */
.badge__note {
font-size: 6px;
font-weight: 400;
color: #333333;
line-height: 1.2;
white-space: nowrap;
}
.badge__title {
font-size: 11px;
font-weight: 400;
color: #333333;
line-height: 1.25;
white-space: nowrap;
}
.badge__big {
font-size: 11px;
font-weight: 400;
color: #333333;
line-height: 1.25;
white-space: nowrap;
}
/* Mobile first / last badges — emphasized title */
.badge-grid > .badge:first-child .badge__title,
.badge-grid > .badge:last-child .badge__title { font-weight: 500; font-size: 12px; }
/* = numbers, shown bigger via size not weight */
.badge__big strong { font-size: 17px; line-height: 20px; }
.badge-grid > .badge:first-child .badge__big { font-size: 10px; line-height: 13px; }
.badge-grid > .badge:first-child .badge__big strong { font-size: 19px; line-height: 22px; }
.badge-grid > .badge:last-child .badge__title { font-size: 9px; line-height: 11px; }
.badge-grid > .badge:last-child .badge__big { font-size: 14px; line-height: 16px; font-weight: 500; }
.badge-grid > .badge:last-child .badge__big strong { font-size: 14px; }
/* inside badges: NOT heavy bold (Figma uses w500), just visually
bigger via size override per badge-class (see below). */
.badge__inner strong { font-weight: 500; font-style: normal; }
@media (min-width: 1100px) {
/* Desktop badges — Figma spec: first/last 211×211, middle three 159×159
(vertically centered). All text #333333 w500 (medium), not bold. */
.badge-grid {
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 30px;
padding: 0;
width: auto;
}
.badge {
flex: 0 0 159px;
width: 159px;
height: 159px;
}
.badge-grid > .badge:first-child,
.badge-grid > .badge:last-child {
flex: 0 0 211px;
width: 211px;
height: 211px;
}
.badge__inner { padding: 10px 6px; gap: 0; }
.badge__big, .badge__title { white-space: nowrap; }
/* Middle badges (159×159):
title 23px w400 (任意売却専門, テレビ神奈川)
big 21px w400 (年の実績 / 放映中 / 免許)
strong 33px w500 (20, CM)
*/
.badge__note { font-size: 11px; line-height: 14px; }
.badge__title { font-size: 21px; line-height: 26px; font-weight: 400; }
.badge__big { font-size: 21px; line-height: 26px; font-weight: 400; }
.badge__big strong { font-size: 33px; line-height: 40px; font-weight: 500; }
/* Badge 1 (first, 211×211) — Figma:
相談実績 30.6px w500
※2025年5月現在 11.4px w400
2,500 48.4px w500
組超 25.5px w400
*/
.badge-grid > .badge:first-child .badge__title { font-size: 28px; line-height: 34px; font-weight: 500; }
.badge-grid > .badge:first-child .badge__note { font-size: 11px; line-height: 14px; }
.badge-grid > .badge:first-child .badge__big { font-size: 22px; line-height: 28px; font-weight: 400; }
.badge-grid > .badge:first-child .badge__big strong { font-size: 44px; line-height: 52px; font-weight: 500; }
/* Badge 5 (last, 211×211) — Figma:
24時間・年中無休 22.9px w500 (full 8 Japanese chars — needs smaller size)
相談何度でも 22.9px w500
無料 34.9px w500
*/
.badge-grid > .badge:last-child .badge__title { font-size: 20px; line-height: 26px; font-weight: 500; }
.badge-grid > .badge:last-child .badge__big { font-size: 30px; line-height: 36px; font-weight: 500; }
.badge-grid > .badge:last-child .badge__big strong { font-size: 30px; font-weight: 500; }
}
/* ---------- 6.3 Hero CTA strip (desktop only) ----------
Figma spec (cold desktop, pixel-measured from Rectangle 7 + Group 15):
Bar 1440 × 269 bg #0072B7 (content at y=799..981 of page)
Content at (281, 799) max-width 879
Heading at y=799, 52 tall
"無料で相談する" 30px/45 w700 ls=1.2 #FFFFFF
＼ left line: 4×48 rotated 61° (bbox 24.4×43.7), white stroke
／ right line: 4×48 rotated -61°
gap text ↔ line ≈ 15px
CTA row at y=859, 54 tall (8px gap from heading)
LINE 256×54 r=31 #06C755 "LINEで相談" 26.2px
Phone 327×54 r=30 #FF8018 24時間... 0800-222-1281
Email 256×54 r=31 #00B7FF "メールで相談"
gap between pills ≈ 20px
Reassurance at y=921 (8px gap from CTAs)
2 lines × 30px line-height, 20px w400 white ls=0.8 lh=30
Bottom padding 43px (to reach rectangle bottom y=1024)
*/
.hero-cta-strip { display: none; }
@media (min-width: 1100px) {
.hero-cta-strip {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: #0072B7;
color: #FFFFFF;
padding: 44px 40px 43px;
}
.hero-cta-strip__heading {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
height: 52px;
}
.hero-cta-strip__title {
color: #FFFFFF;
font-size: 30px;
font-weight: 700;
letter-spacing: 1.2px;
line-height: 45px;
margin: 0;
}
/* Thin 4×48 white slashes, rotated ~61° (bbox 24.4×43.7 per Figma). */
.hero-cta-strip__line {
display: block;
width: 4px;
height: 48px;
background: #FFFFFF;
border-radius: 0;
}
.hero-cta-strip__line--left { transform: rotate(-30deg); } /* ＼ */
.hero-cta-strip__line--right { transform: rotate( 30deg); } /* ／ */
.hero-cta-strip__ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.hero-cta-strip__ctas .header-cta {
height: 54px;
padding: 0 52px;
gap: 12px;
border-radius: 31px;
font-size: 26.2px;
font-weight: 700;
line-height: 1;
}
.hero-cta-strip__ctas .header-cta__icon { width: 30px; height: 30px; }
.hero-cta-strip__ctas .header-cta--line { width: 256px; }
.hero-cta-strip__ctas .header-cta--phone {
width: 327px;
padding: 0 50px;
border-radius: 30px;
}
.hero-cta-strip__ctas .header-cta--email { width: 256px; }
.hero-cta-strip__ctas .header-cta--phone .header-cta__label { text-align: left; }
.hero-cta-strip__ctas .header-cta__sub { font-size: 14px; font-weight: 500; line-height: 1.2; }
.hero-cta-strip__ctas .header-cta__number { font-size: 26.2px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.hero-cta-strip__reassurance {
margin: 0;
text-align: center;
color: #FFFFFF;
font-weight: 400;
font-size: 20px;
line-height: 30px;
letter-spacing: 0.8px;
}
}
/* ---------- 6.4 Section 2: Anxiety ----------
Mobile (375×886, Figma @2x halved)
Section bg #F5F5F3, padding 48/16
Title "あなたの不安に寄り添います" 20px w700 #0072B7 lh=24 @y=47.5, 260 wide centered
Cards 5 cards, vertical stack, 260×99, gap=14
bg #FFFFFF r=21, text 16.5px w500 #333333 lh=21.5, centered
Reassurance 343×134 banner (r=25), bg #0072B7
Text 15px w900 #FFFFFF lh=21.6 ls=0.75 centered
解決 override: 20px w900 #FFD710 (40/2 = 20 on mobile)
Businessman 78.5×83 at bottom-left, Businesswoman 62.5×83 at bottom-right
Desktop (1440×874, 1:1)
Section bg #F5F5F3, padding 80/48/96
Title 40px w700 #0072B7 lh=48 @y=80 centered (520 wide)
Cards 5 cards 378×144, 3+2 staggered grid; bg #FFFFFF r=30
Text 24px w500 #333333 lh=31.2 centered
Reassurance 1194×209 group: banner 1194×144 r=50 bg #0072B7 centered
Text 30px w900 #FFFFFF lh=43.2 ls=1.5
解決 override: 40px w900 #FFD710
Businessman 195×209 overlaps above (extends 65 above banner)
Businesswoman 137×184 overlaps right
*/
.anxiety {
background: #F5F5F3;
padding: 48px 16px;
}
.anxiety__inner {
max-width: 1200px;
margin: 0 auto;
}
.anxiety__title {
color: #0072B7;
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
margin: 0;
}
/* Mobile-only divider line under the title (Figma Line 9: 267×3 #0072B7). */
.anxiety__divider {
width: 267px;
height: 3px;
background: #0072B7;
margin: 14px auto 0;
border: 0;
border-radius: 0;
}
.anxiety__cards {
display: flex;
flex-direction: column;
gap: 14px;
margin: 26px auto 0;
max-width: 260px;
}
.anxiety-card {
background: #FFFFFF;
border: 3px solid #0072B7; /* Figma mobile stroke ≈3.4px, round to 3 */
border-radius: 21px;
min-height: 99px;
padding: 18px 16px;
text-align: center;
color: #333333;
font-weight: 500;
font-size: 16.5px;
line-height: 21.5px;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
}
.anxiety__reassurance {
position: relative;
margin: 40px auto 0;
max-width: 343px;
min-height: 134px;
background: #0072B7;
border-radius: 25px;
padding: 18px 16px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.anxiety__reassurance-text {
color: #FFFFFF;
font-weight: 900;
font-size: 15px;
line-height: 21.6px;
letter-spacing: 0.75px;
text-align: center;
margin: 0;
position: relative;
z-index: 1;
}
.anxiety__reassurance-highlight {
color: #FFD710; /* Figma spec: gold #FFD710 */
font-size: 20px;
font-weight: 900;
}
/* Each "row" span becomes its own non-wrapping line on mobile so the banner
wraps exactly per Figma:
その不安、すべて私たちが一緒に
解決します。
売却のことだけでなく、
売った後の生活のことまで */
.anxiety__reassurance-row {
display: block;
white-space: nowrap;
}
/* Mobile: both figures sit at the banner bottom, inside it. */
.anxiety__reassurance-fig {
position: absolute;
bottom: 0;
object-fit: contain;
object-position: bottom center;
z-index: 0;
pointer-events: none;
}
.anxiety__reassurance-fig--left {
left: 0;
width: 78.5px;
height: 83px;
}
.anxiety__reassurance-fig--right {
right: 0;
width: 62.5px;
height: 83px;
}
/* Tablet: 2-per-row grid (5 cards → 2 + 2 + 1, last card centered) */
@media (min-width: 768px) and (max-width: 1099px) {
.anxiety__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: 640px;
margin: 26px auto 0;
}
.anxiety-card:nth-child(5) {
grid-column: 1 / -1;
justify-self: center;
width: calc((100% - 16px) / 2); /* match single-column width */
}
}
@media (min-width: 1100px) {
.anxiety { padding: 80px 48px 96px; }
.anxiety__title { font-size: 40px; line-height: 48px; }
.anxiety__cards {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6-col for 3+2 staggered */
grid-auto-rows: 144px;
gap: 34px;
max-width: 1194px;
margin: 68px auto 0;
}
.anxiety-card {
border: 4px solid #0072B7;
border-radius: 20px;
min-height: 110px;
padding: 17px 24px;
font-size: 24px;
line-height: 31.2px;
grid-column: span 2;
}
/* Desktop does not show the mobile divider line */
.anxiety__divider { display: none; }
/* 3+2 staggered: first 3 cards in row 1 (cols 1-2, 3-4, 5-6);
last 2 cards in row 2, offset by 1 col (cols 2-3, 4-5). */
.anxiety-card:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
.anxiety-card:nth-child(5) { grid-column: 4 / span 2; grid-row: 2; }
.anxiety__reassurance {
max-width: 1194px;
min-height: 144px;
border-radius: 50px;
padding: 32px clamp(200px, 18%, 260px);
margin-top: 100px; /* leave room for businessman to extend above */
}
.anxiety__reassurance-text {
font-size: 30px;
line-height: 43.2px;
letter-spacing: 1.5px;
max-width: 920px;
}
.anxiety__reassurance-highlight { font-size: 40px; }
/* Desktop: rows behave as normal inline content so the natural 2-line break
happens between the second and third span (after 解決します。). */
.anxiety__reassurance-row { display: inline; white-space: normal; }
/* Desktop: both figures sit at the banner BOTTOM but extend ABOVE its top.
Businessman 195×209 (extends 65 above the 144-tall banner top)
Businesswoman 137×184 (extends 40 above)
align-self: bottom via bottom:0 inside the banner's flex box. */
.anxiety__reassurance-fig--left {
left: 0;
bottom: 0;
width: 195px;
height: 209px;
}
.anxiety__reassurance-fig--right {
right: 0;
bottom: 0;
width: 137px;
height: 184px;
}
}
/* ---------- 6.5 Section 3: Support ----------
Mobile (375×2756)
bg #E6EDFA
Title "私たちが大切にしていること" 20px w700 #0072B7 lh=24 @y=47
Divider 298×1.5 #0072B7 @y=82
Subtitle "私たちの仕事は..." 12px w400 #333333 lh=15.6 @y=91
Heading "具体的なサポート内容" 15px w500 #0072B7 lh=18 @y=169
Cards 343 wide, vertical stack, gap 15, r=19.7
Photo 262×188, title 19px w700 #FF8018, desc 15px w400 #333333 lh=18
Desktop (1440×1435)
bg #E6EDFA
Title 40px w700 #0072B7 lh=48 @y=75 (519 wide, centered)
Divider 596×3 #0072B7 @y=138
Subtitle 24px w400 #333333 lh=31.2 @y=168
Heading 30px w500 #0072B7 lh=36 @y=310
Cards 3×2 grid, each card 370.5×435 r=10.6, inner gap 20
Photo 283×203, title 20.5px w700 #FF8018, desc 16.2px #333333 lh=19.4
*/
.support {
background: #E6EDFA;
padding: 48px 16px;
}
.support__inner {
max-width: 1200px;
margin: 0 auto;
}
.support__title {
color: #0072B7;
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
margin: 0;
}
.support__divider {
width: 298px;
max-width: 100%;
height: 1.5px;
background: #0072B7;
border: 0;
border-radius: 0;
margin: 11px auto 0;
}
.support__subtitle {
color: #333333;
font-weight: 400;
font-size: 12px;
line-height: 15.6px;
text-align: center;
letter-spacing: 0;
margin: 11px 0 0;
}
.support__heading {
color: #0072B7;
font-weight: 500;
font-size: 15px;
line-height: 18px;
text-align: center;
letter-spacing: 0;
margin: 30px 0 13px;
}
.support__cards {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 343px;
margin: 0 auto;
}
.support-card {
background: #FFFFFF;
border-radius: 19.7px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: none;
}
.support-card__photo {
width: 262px;
max-width: 100%;
height: 188px;
object-fit: cover;
border-radius: 0;
margin: 0 auto;
}
.support-card__title {
color: #FF8018;
font-weight: 700;
font-size: 19px;
line-height: 22.8px;
text-align: center;
letter-spacing: 0;
margin: 0;
}
.support-card__desc {
color: #333333;
font-weight: 400;
font-size: 15px;
line-height: 18px;
letter-spacing: 0;
text-align: left;
margin: 0;
}
/* Tablet: 2-per-row grid */
@media (min-width: 768px) and (max-width: 1099px) {
.support__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: center;
gap: 20px 16px;
max-width: 720px;
}
.support-card { width: auto; }
}
@media (min-width: 1100px) {
.support { padding: 75px 48px 75px; }
.support__title { font-size: 40px; line-height: 48px; }
.support__divider {
width: 596px;
height: 3px;
margin: 15px auto 0;
}
.support__subtitle {
font-size: 24px;
line-height: 31.2px;
margin: 13px 0 0;
}
.support__heading {
font-size: 30px;
line-height: 36px;
margin: 70px 0 100px;
}
.support__cards {
display: grid;
grid-template-columns: repeat(3, 370.5px);
justify-content: center;
gap: 54px 41.5px; /* Figma: rows 924-446-435 =43, cols 423px between */
max-width: 1194px;
}
.support-card {
width: 370.5px;
padding: 25px;
border-radius: 10.6px;
gap: 20px;
height: 435.3px;
display: flex;
flex-direction: column;
align-items: center;
}
.support-card__photo {
width: 283px;
height: 203px;
}
.support-card__title {
font-size: 20.5px;
line-height: 24.6px;
min-height: calc(24.6px * 2); /* reserve 2 lines for alignment */
display: flex;
align-items: center;
justify-content: center;
}
.support-card__desc {
font-size: 16.2px;
line-height: 19.4px;
width: 283px;
}
}
/* ---------- 6.6 Section 4: Solutions ----------
Mobile (375×1759)
bg #FFFFFF; padding 48/16
Title 20px w700 #0072B7 lh=24 (2 lines)
Divider 234.5×1.5 #0072B7
Cards vertical stack, each 263 wide. Thin blue divider line between cards.
Card parts (per card):
Situation box: 260×57 r=10, white bg, 0.5px #0072B7 stroke
"あなたの状況" 10px w500 #333333 + モヤモヤ icon
main text 15px w700 #333333 lh=18
Arrow triangle (polygon), 19×17.5 below situation box
Plan box: 260×215 r=11.56 bg #0072B7
"オススメ！" badge 13.6px w700 #333333 on #FFD710, r=9
＼解決方法／ label 12.5px w500 #FFD710 lh=15
Plan title 20px w700 white (22px for リースバック/plan names)
Plan subtitle 14px w400 white lh=16.8
＋ symbol 12.2px w900 #FFD710 (for card 4)
Illustration 95–110×85–99
Footer text 15px w700 #333333 lh=22.5 (2 lines)
Desktop (1440×812)
bg #E6EDFA; padding 74/0/75
Title 40px w700 #0072B7 lh=48
Divider 848×3
Cards 4 columns, each card 267×324, 42.7px gap
Card: situation 264.2×57.6 r=5 (0.5px stroke)
plan box 264.2×219 r=5.87
Title 20.3px w700 white
Subtitle 14.2px white
Footer 30px w700 #333333 lh=45
*/
.solutions {
background: #FFFFFF; /* mobile: white bg */
padding: 48px 16px;
}
.solutions__inner {
max-width: 1200px;
margin: 0 auto;
}
.solutions__title {
color: #0072B7;
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
margin: 0;
}
.solutions__title-line { display: block; }
.solutions__divider {
width: 234.5px;
max-width: 100%;
height: 1.5px;
background: #0072B7;
border: 0;
border-radius: 0;
margin: 16px auto 24px;
}
.solutions__cards {
display: flex;
flex-direction: column;
gap: 50px; /* leaves room for thin divider visually */
max-width: 263px;
margin: 0 auto;
padding: 0;
}
.solution-card {
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
height: 100%;
}
/* Plan box fills remaining card height; illustrations pin to bottom so
cards with shorter title content still align visually. */
.solution-card__plan { flex: 1 1 auto; }
.solution-card__illustration,
.solution-card__pair { margin-top: auto; }
.solution-card + .solution-card::before {
content: '';
position: absolute;
top: -25px;
left: -24px;
right: -24px;
height: 1px;
background: #0072B7;
}
/* Situation box (white, blue thin border) */
.solution-card__situation {
position: relative;
background: #FFFFFF;
border: 0.5px solid #0072B7;
border-radius: 10px;
padding: 7px 16px 11px;
min-height: 57px;
display: flex;
flex-direction: column;
gap: 4px;
}
.solution-card__sit-header {
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
}
.solution-card__sit-label {
color: #333333;
font-weight: 500;
font-size: 10px;
line-height: 12px;
letter-spacing: 0;
}
.solution-card__sit-icon {
width: 16px;
height: auto;
flex: 0 0 auto;
}
.solution-card__sit-text {
color: #333333;
font-weight: 700;
font-size: 15px;
line-height: 18px;
text-align: center;
letter-spacing: 0;
}
/* Arrow indicator (downward triangle, Figma uses polygon) */
.solution-card__arrow {
width: 19px;
height: auto;
margin: 6px auto;
display: block;
}
/* Plan box (navy blue) */
.solution-card__plan {
position: relative;
background: #0072B7;
border-radius: 11.56px;
padding: 23px 20px 16px;
text-align: center;
color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-height: 215px;
box-shadow: none;
}
/* "オススメ！" yellow badge, top-left corner */
.solution-card__badge {
position: absolute;
top: -9px;
left: 0;
background: #FFD710;
color: #333333;
font-weight: 700;
font-size: 13.6px;
line-height: 16.3px;
padding: 4px 12px;
border-radius: 9px;
transform: rotate(-4deg);
letter-spacing: 0;
}
/* ＼解決方法／ — use CSS-only decoration with pseudo elements */
.solution-card__plan-label {
color: #FFD710;
font-weight: 500;
font-size: 12.5px;
line-height: 15px;
letter-spacing: 0.04em;
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
}
.solution-card__plan-label::before,
.solution-card__plan-label::after {
content: '';
display: inline-block;
width: 2px;
height: 16px;
background: #FFD710;
}
.solution-card__plan-label::before { transform: rotate(-25deg); }
.solution-card__plan-label::after { transform: rotate( 25deg); }
.solution-card__plan-title {
color: #FFFFFF;
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
margin: 0;
}
.solution-card__plan-title-small {
display: inline;
font-weight: 400;
font-size: 12px;
line-height: 14.4px;
letter-spacing: 0;
}
.solution-card__plan-subtitle {
color: #FFFFFF;
font-weight: 400;
font-size: 14px;
line-height: 16.8px;
letter-spacing: 0;
margin: 0;
}
.solution-card__plan-subtitle-bold { font-weight: 700; }
.solution-card__plan-plus {
color: #FFD710;
font-weight: 900;
font-size: 12.2px;
line-height: 14.7px;
margin: 2px 0;
}
.solution-card__illustration {
width: 95px;
height: 85px;
object-fit: contain;
margin-top: auto;
}
.solution-card__pair {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
padding-top: 8px;
width: 100%;
}
.solution-card__pair-figure {
width: 40px;
height: 97px;
object-fit: contain;
flex: 0 0 auto;
}
.solution-card__pair-arrow {
position: relative;
flex: 0 0 auto;
width: 36px;
height: 3px;
background: #FFFFFF;
border-radius: 1px;
}
.solution-card__pair-arrow::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 10px solid #FFFFFF;
}
.solutions__footer {
margin-top: 40px;
color: #333333;
font-weight: 700;
font-size: 15px;
line-height: 22.5px;
letter-spacing: 0;
text-align: center;
}
/* Mobile-only line break between どのプランが最適かは、 and 状況によって... */
.solutions__footer-break-mobile { display: inline; }
/* Tablet: 2-per-row grid (no inter-card divider line) */
@media (min-width: 768px) and (max-width: 1099px) {
.solutions__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: center;
gap: 32px 24px;
max-width: 640px;
}
.solution-card + .solution-card::before { display: none; }
}
@media (min-width: 1100px) {
.solutions {
background: #E6EDFA; /* desktop: tint blue */
padding: 74px 48px 75px;
}
.solutions__title { font-size: 40px; line-height: 48px; }
.solutions__title-line { display: inline; }
.solutions__divider {
width: 848px;
height: 3px;
margin: 20px auto 40px;
}
.solutions__cards {
display: grid;
grid-template-columns: repeat(4, 267.2px);
justify-content: center;
gap: 32px 42.7px;
max-width: 1197px;
padding: 0;
}
.solution-card + .solution-card::before { display: none; } /* no divider between horiz cards */
.solution-card { height: 100%; }
.solution-card__situation {
min-height: 57.6px;
padding: 8px 16px 10px;
border-radius: 5px;
}
.solution-card__sit-label { font-size: 10.2px; line-height: 12.2px; }
.solution-card__sit-icon { width: 16.4px; }
.solution-card__sit-text { font-size: 15.2px; line-height: 18.3px; }
.solution-card__arrow { width: 19.3px; margin: 7px auto; }
.solution-card__plan {
padding: 24px 16px 16px;
border-radius: 5.87px;
min-height: 219px;
gap: 4px;
}
.solution-card__badge {
font-size: 13.8px;
line-height: 16.6px;
padding: 6px 12px;
border-radius: 4.59px;
}
.solution-card__plan-label {
font-size: 12.7px;
line-height: 15.2px;
gap: 8px;
}
.solution-card__plan-label::before,
.solution-card__plan-label::after { height: 15px; }
.solution-card__plan-title { font-size: 20.3px; line-height: 24.4px; }
.solution-card__plan-title-small { font-size: 12.2px; line-height: 14.6px; }
.solution-card__plan-subtitle { font-size: 14.2px; line-height: 17.1px; font-weight: 700; }
.solution-card__plan-plus { font-size: 12.4px; line-height: 14.9px; margin: 0; }
.solution-card__illustration {
width: 97px;
height: 86.9px;
}
.solution-card__pair { gap: 6px; height: 100px; padding-top: 4px; }
.solution-card__pair-figure { width: 41px; height: 98px; }
.solution-card__pair-arrow { width: 44px; height: 3px; }
.solution-card__pair-arrow::after {
right: -7px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 11px solid #FFFFFF;
}
.solutions__footer {
font-size: 30px;
line-height: 45px;
margin-top: 80px;
}
/* Desktop: drop the extra mobile line break so the footer reads in 2 lines */
.solutions__footer-break-mobile { display: none; }
}
/* ---------- 6.7 Section 5: Reasons ----------
Mobile (375×1495):
Soft decorative bg (city image + white overlay); simplified to white here.
Title 20px w700 #0072B7 lh=24, divider 280×1.5
4 cards vertical stack, 343×309 each (r=26)
Number badge 44.3×44.3 circle (#0072B7) centered overlapping top
Icon + title row: icon ~26-38px, title 19px w700 #0072B7 (lh=23)
Bullet list: 9.8×9.8 #0072B7 dots, text 15px w500 #333333 lh=18
Card 2 CTA pill: 292.8×30 r=52 #0072B7, "交渉..." 14px w700 white + ▶
Desktop (1440×1253):
Title 40px w700 #0072B7 lh=48, divider 602×3
Cards 2×2 grid, each 526×474 (r=20)
Number badge 68×68 circle (at x~352 top for row), 40px w400 white
Title row: icon 48-59 × 40, title 30px w700 #0072B7
Bullets: 15×15 dots, text 24px w500 #333333
Card 2 CTA pill: 390×43 r=40, 18px w700 white
*/
.reasons {
background-color: #FFFFFF;
background-image:
linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
url('../assets/photos/reasons-bg.jpg');
background-size: 100% 100%, cover;
background-position: 0 0, center;
background-repeat: no-repeat, no-repeat;
padding: 48px 16px;
}
.reasons__inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
z-index: 1;
}
.reasons__title {
color: #0072B7;
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
margin: 0;
}
.reasons__divider {
width: 280px;
height: 1.5px;
background: #0072B7;
border: 0;
border-radius: 0;
margin: 11px auto 40px;
}
.reasons__cards {
display: flex;
flex-direction: column;
gap: 29px;
max-width: 343px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.reason-card {
position: relative;
background: #FFFFFF;
border-radius: 26px;
padding: 46px 21px 21px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
list-style: none;
}
/* Number badge (circle) overlaps the top of the card */
.reason-card__number {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
width: 44.3px;
height: 44.3px;
background: #0072B7;
color: #FFFFFF;
border-radius: 50%;
font-family: var(--font-numeric);
font-size: 26.1px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.reason-card__header {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
}
.reason-card__icon {
width: auto;
height: 26px;
object-fit: contain;
flex: 0 0 auto;
}
.reason-card__icon-wrap {
position: relative;
display: inline-flex;
width: 31px;
height: 26px;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.reason-card__icon-wrap .reason-card__icon {
width: 31px;
height: 26px;
}
.reason-card__icon-overlay {
position: absolute;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
color: #0072B7;
font-family: 'Noto Sans JP', sans-serif;
font-size: 15.7px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
word-break: keep-all;
pointer-events: none;
}
.reason-card__title {
color: #0072B7;
font-weight: 700;
font-size: 19px;
line-height: 23px;
letter-spacing: 0;
margin: 0;
}
.reason-card__bullets {
text-align: left;
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.reason-card__bullets li {
position: relative;
padding-left: 16px;
color: #333333;
font-weight: 500;
font-size: 15px;
line-height: 18px;
}
.reason-card__bullets li::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 9.8px;
height: 9.8px;
background: #0072B7;
border-radius: 50%;
}
/* Character-override spans (per Figma inline accents).
Orange #FF8018 = numbers and emphasized phrases (2,500組超, 20年, 最短12日, 日本最大級, 任意売却専門)
Blue #0072B7 = card-3 labels (弁護士、司法書士、税理士、専属FP技能士)
Dark #333333 700 = emphasis in card-2 '実績例' and card-4 '9,999'
*/
/* Figma text style for accented phrases: #FF8018 w700 bold (slightly heavier
than the #333333 w500 body) — gives the emphasis pattern seen in cards 1 & 4 */
.reason-card__bullet--orange { color: #FF8018; font-weight: 700; }
.reason-card__bullet-num { color: #FF8018; font-weight: 700; }
.reason-card__bullet-accent { color: #FF8018; font-weight: 700; }
.reason-card__bullet-label { color: #0072B7; font-weight: 700; }
.reason-card__bullet-label--medium { font-weight: 500; }
.reason-card__bullet-emphasis { color: #333333; font-weight: 700; }
.reason-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #0072B7;
color: #FFFFFF;
padding: 6px 20px;
border-radius: 52px;
font-size: 14px;
font-weight: 700;
line-height: 17px;
margin-top: 8px;
letter-spacing: 0;
transition: opacity 0.15s ease;
text-decoration: none;
align-self: center;
}
.reason-card__cta:hover { opacity: 0.88; }
/* Tablet: 2-per-row grid (matches desktop layout, just narrower cards) */
@media (min-width: 768px) and (max-width: 1099px) {
.reasons__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: center;
gap: 24px 20px;
max-width: 720px;
}
}
@media (min-width: 1100px) {
.reasons { padding: 80px 48px 75px; }
.reasons__title { font-size: 40px; line-height: 48px; }
.reasons__divider { width: 602px; height: 3px; margin: 15px auto 55px; }
.reasons__cards {
display: grid;
grid-template-columns: repeat(2, 526px);
justify-content: center;
gap: 41px 40px;
max-width: 1194px;
}
.reason-card {
width: 526px;
padding: 66px 32px 40px; /* Figma: title at left-edge ~25px, bullets at 32px */
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
gap: 20px;
min-height: 440px;
}
.reason-card__number {
top: -34px;
width: 68px;
height: 68px;
font-size: 40px;
font-weight: 400;
}
.reason-card__header { gap: 15px; }
.reason-card__icon { height: 40px; }
.reason-card__icon-wrap,
.reason-card__icon-wrap .reason-card__icon {
width: 48px;
height: 40px;
}
.reason-card__icon-overlay {
font-size: 24px;
top: 40%;
left: 52%;
font-family: 'Noto Sans JP', sans-serif;
}
.reason-card__title { font-size: 30px; line-height: 36px; }
.reason-card__bullets { gap: 14px; }
.reason-card__bullets li {
font-size: 24px;
line-height: 31.2px;
font-weight: 500;
padding-left: 25px;
}
.reason-card__bullets li::before {
width: 15px;
height: 15px;
top: 9px;
}
.reason-card__cta {
font-size: 18px;
line-height: 22px;
padding: 10px 30px;
border-radius: 40px;
margin-top: 20px;
}
}
/* ---------- 6.8 Section 6: Case Studies ---------- */
/* Mobile values = Figma @2x ÷ 2. Frame: 750×2273 → 375×1136. */
.cases {
background: #E6EDFA;
padding: 48px 0 48px;
}
.cases__inner {
margin: 0 auto;
padding: 0 16px;
}
.cases__title {
color: #0072B7;
font-weight: 700;
font-size: 20px;
line-height: 24px;
text-align: center;
letter-spacing: 0;
}
.cases__divider {
width: 267.5px;
max-width: 100%;
height: 1px;
background: #0072B7;
border-radius: 0;
margin: 12px auto 0;
}
.cases__subtitle {
color: #333333;
font-weight: 400;
font-size: 15px;
line-height: 19.5px;
text-align: center;
margin: 18px 0 24px;
}
.cases__carousel {
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 -16px;
padding: 8px 16px 16px;
}
.cases__carousel::-webkit-scrollbar { display: none; }
.cases__track {
display: flex;
gap: 12px;
width: max-content;
align-items: stretch;
}
.case-card {
scroll-snap-align: center;
flex: 0 0 344px;
width: 344px;
background: #FFFFFF;
border: 1.5px solid #0071B7;
border-radius: 22.7px;
padding: 22px 27px;
display: flex;
flex-direction: column;
gap: 10px;
}
.case-card__tag {
color: #000000;
font-weight: 500;
font-size: 15px;
line-height: 18px;
text-align: center;
min-height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.case-card__title {
color: #000000;
font-weight: 500;
font-size: 15px;
line-height: 18px;
text-align: center;
letter-spacing: 0;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.case-card__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
min-height: 47px; /* sized to tallest mobile variant (card 3 wraps to 2 rows = 45px) so all cards' chip rows match */
}
.case-chip {
background: #949494;
color: #FFFFFF;
padding: 4px 4px;
border-radius: 3.8px;
font-size: 10.5px;
font-weight: 350;
line-height: 12.7px;
white-space: nowrap;
flex-shrink: 0;
}
.case-card__attribute {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 5px 0;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
color: #000000;
font-size: 12px;
font-weight: 350;
line-height: 14.5px;
min-height: 43px; /* sized to tallest mobile variant (card 2 wraps = 41px) so all cards' attribute rows match */
box-sizing: border-box;
}
.case-card__person-icon { width: 22px; height: 25px; object-fit: contain; }
.case-card__debt {
background: #E6EDFA;
border-radius: 7.6px;
padding: 11px 11px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
gap: 11px;
min-height: 162px; /* sized to tallest mobile variant (card 3 = 160px) so all cards' debt boxes match */
box-sizing: border-box;
}
.case-card__debt-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
}
.case-card__debt-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 72.5px;
}
.case-card__debt-label {
font-size: 12px;
color: #333333;
font-weight: 400;
line-height: 14.5px;
}
.case-card__debt-col--after .case-card__debt-label { color: #E30080; }
.case-card__debt-value {
font-weight: 900;
font-size: 15px;
color: #333333;
line-height: 18px;
text-align: center;
}
.case-card__debt-value--after { color: #E30080; }
.case-card__debt-sub {
font-size: 10.5px;
font-weight: 350;
line-height: 12.7px;
color: #000000;
text-align: center;
letter-spacing: 0;
margin-top: 2px;
}
.case-card__debt-sub--muted { color: #333333; }
.case-card__debt-arrow {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}
.case-card__debt-arrow svg { display: block; width: 28px; height: 17.4px; }
.case-card__plan-pill {
background: #0072B7;
color: #FFFFFF;
text-align: center;
padding: 14px 15px;
border-radius: 5px;
font-weight: 700;
font-size: 15px;
line-height: 18px;
letter-spacing: 0;
width: 100%;
}
.case-card__block { display: flex; flex-direction: column; }
.case-card__block--before { min-height: 118px; } /* sized to tallest mobile variant (116) so all cards match */
.case-card__block--after { min-height: 146px; } /* already uniform across cards */
.case-card__response-wrap {
display: flex;
flex-direction: column;
min-height: 196px; /* sized to tallest mobile variant (card 2 = 194) */
}
.case-card__section-label {
font-family: var(--font-latin);
font-weight: 600;
font-size: 13.5px;
color: #949494;
line-height: 16.5px;
text-align: center;
}
.case-card__section-label--after { color: #FF8018; }
.case-card__section-divider {
height: 1px;
background: #949494;
margin: 6px 0 10px;
}
.case-card__section-text {
color: #333333;
font-weight: 400;
font-size: 13.5px;
line-height: 16.4px;
text-align: justify;
}
.case-card__arrow-down {
display: flex;
justify-content: center;
margin: 0;
}
.case-card__arrow-down img { width: 19px; height: auto; }
.case-card__response {
border: 1px solid #0072B7;
border-radius: 5px;
padding: 8px 19px 12px;
}
.case-card__response-title {
color: #0072B7;
font-weight: 700;
font-size: 13.5px;
text-align: center;
line-height: 16.4px;
}
.case-card__response-divider {
height: 1px;
background: #0072B7;
margin: 6px 0 10px;
}
.case-card__response .case-card__section-text {
color: #333333;
font-weight: 500;
}
.case-card__after-box {
background: #FEBF8A;
border-radius: 7.6px;
padding: 11px;
margin-top: 6px;
}
.cases__dots {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 24px;
}
.cases__dot {
width: 18.5px;
height: 18.5px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid #0072B7;
cursor: pointer;
transition: background 0.15s ease;
list-style: none;
padding: 0;
}
.cases__dot--active { background: #0072B7; }
@media (min-width: 1100px) {
/* Desktop frame 1440×1610 — exact Figma values. */
.cases { padding: 75px 0 75px; }
.cases__inner { padding: 0 48px; max-width: 1440px; }
.cases__title {
font-size: 40px;
line-height: 48px;
}
.cases__divider { width: 602px; height: 1px; margin: 15px auto 0; }
.cases__subtitle {
font-size: 24px;
line-height: 31.2px;
margin: 20px 0 40px;
}
.cases__carousel { margin: 0 -48px; padding: 12px 48px 20px; }
.cases__track { gap: 20px; }
.case-card {
flex: 0 0 455px;
width: 455px;
border-radius: 30px;
border: 2px solid #0071B7;
padding: 30px 35.5px;
gap: 13px;
}
.case-card__tag {
font-size: 20px;
line-height: 24px;
min-height: 24px;
}
.case-card__title {
font-size: 20px;
line-height: 24px;
min-height: 48px;
}
.case-chip {
font-size: 14px;
line-height: 17px;
padding: 5px 5px;
border-radius: 5px;
}
.case-card__chips { gap: 5px; min-height: 61px; } /* sized to tallest desktop variant (card 3 wraps = 59px) */
.case-card__attribute {
font-size: 16px;
line-height: 19.2px;
padding: 7px 0;
gap: 10px;
min-height: 56px; /* sized to tallest desktop variant (card 2 wraps = 54px) */
}
.case-card__person-icon { width: 29px; height: 33px; }
.case-card__debt {
border-radius: 10px;
padding: 15px 19px;
gap: 0; /* figma: Group 153 stacks loan-row + plan-pill flush */
min-height: 200px; /* sized to tallest desktop variant (cards 3+4 = 197) so all debt boxes match */
}
.case-card__debt-row {
gap: 17px;
/* Match mobile: both cols vertically center-aligned. The previous
flex-start + first-child self-center hack made AFTER-col labels
sit higher than BEFORE-col labels for cards with debt-sub. */
align-items: center;
min-height: 89px; /* figma Frame 154 baseline; grows for cards with sub */
}
.case-card__debt-col {
min-width: 96px;
gap: 6px; /* figma: ~6px between label/value/sub */
}
.case-card__debt-label {
font-size: 16px;
line-height: 19.2px;
}
.case-card__debt-value {
font-size: 20px;
line-height: 24px;
}
.case-card__debt-sub {
font-size: 14px; /* figma: 14 fw 350 */
line-height: 17px;
margin-top: 0;
}
.case-card__debt-arrow svg { width: 37px; height: 23px; }
.case-card__plan-pill {
border-radius: 6.6px;
font-size: 20px;
line-height: 24px;
padding: 15px 20px; /* figma Frame 1134 height 54: 24 line + 30 vpad = 54 */
}
.case-card__section-label {
font-size: 18px;
line-height: 22px;
}
.case-card__section-divider { margin: 8px 0 13px; }
.case-card__section-text {
font-size: 18px;
line-height: 21.6px;
}
.case-card__block--before { min-height: 156px; } /* sized to tallest desktop variant (152) */
.case-card__block--after { min-height: 194px; } /* already uniform across cards */
.case-card__response-wrap { min-height: 254px; } /* sized to tallest desktop variant (card 2 = 251) */
.case-card__response {
border-radius: 6.6px;
border-width: 1px;
padding: 10px 24px 13px;
}
.case-card__response-title {
font-size: 18px;
line-height: 22px;
}
.case-card__response-divider { margin: 8px 0 13px; }
.case-card__after-box {
border-radius: 10px;
padding: 15px;
margin-top: 8px;
}
.case-card__arrow-down img { width: 25px; }
.cases__dots {
gap: 100px;
margin-top: 32px;
}
.cases__dot {
width: 30px;
height: 30px;
}
}
/* ---------- 6.9 Section 7: Staff ---------- */
.staff {
background: var(--bg-white);
padding: 24px 16px 32px;
}
.staff__inner {
max-width: 1200px;
margin: 0 auto;
}
.staff__title {
color: var(--color-primary);
font-weight: 700;
font-size: 1.75rem;
line-height: 1.3;
text-align: center;
letter-spacing: 0.02em;
}
.staff__divider {
width: 80%;
max-width: 596px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
margin: 24px auto 20px;
}
.staff__subtitle {
color: var(--text-dark);
font-weight: 500;
font-size: 1rem;
line-height: 1.7;
text-align: center;
}
.staff__footnote {
color: var(--text-mid);
font-weight: 400;
font-size: 0.8125rem;
line-height: 1.5;
text-align: center;
margin: 6px 0 32px;
}
/* Mobile (<768px): 4 rows, each row is its own horizontal scroll carousel.
Cards have a fixed flex-basis so each row track exceeds the viewport and
reveals the rest via swipe. Hidden scrollbar matches the cases pattern. */
.staff__rows {
display: flex;
flex-direction: column;
gap: 16px;
}
.staff__row-track {
display: flex;
gap: 12px;
list-style: none;
padding: 4px 16px 12px;
margin: 0 -16px; /* extend scroll area edge-to-edge */
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.staff__row-track::-webkit-scrollbar { display: none; }
.staff__row-track .staff-card {
flex: 0 0 180px;
scroll-snap-align: start;
}
.staff-card {
background: var(--bg-white);
border-radius: 35px;
padding: 14px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
box-shadow: none;
text-align: center;
}
.staff-card__photo-wrap {
width: clamp(96px, 28vw, 128px);
aspect-ratio: 1 / 1;
height: auto;
border-radius: 50%;
background: #D9D9D9;
overflow: hidden;
flex: 0 0 auto;
}
.staff-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.staff-card__name {
color: var(--text-dark);
font-weight: 400;
font-size: 1.125rem; /* 18px mobile (2-per-row gives more room) */
letter-spacing: 0.06em;
line-height: 1.3;
}
.staff-card__desc {
color: var(--text-dark);
font-weight: 400;
font-size: 0.875rem; /* 14px mobile (2-per-row gives more room) */
line-height: 1.7;
text-align: justify;
}
.staff-card__qual {
color: var(--text-mid);
font-weight: 400;
font-size: 0.75rem; /* 12px mobile */
line-height: 1.6;
text-align: center;
margin-top: auto;
}
/* Tablet: each row becomes a non-scrolling 4-card flex row */
@media (min-width: 768px) and (max-width: 1099px) {
.staff__rows { gap: 20px; }
.staff__row-track {
gap: 16px;
padding: 0;
margin: 0;
overflow: visible;
}
.staff__row-track .staff-card { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1100px) {
.staff { background: var(--bg-tint-blue); padding: 80px 48px 96px; }
.staff__title { font-size: 2.5rem; }
.staff__subtitle { font-size: 1.5rem; }
.staff__footnote { font-size: 1rem; margin: 12px 0 48px; }
.staff__divider { margin: 32px auto 28px; }
.staff__rows { gap: 24px; }
.staff__row-track {
gap: 20px;
padding: 0;
margin: 0;
overflow: visible;
}
.staff__row-track .staff-card { flex: 1 1 0; min-width: 0; }
.staff-card {
padding: 24px 24px;
border-radius: 45px;
gap: 14px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.staff-card__photo-wrap { width: 160px; height: 160px; aspect-ratio: auto; }
.staff-card__name { font-size: 1.375rem; } /* 22px */
.staff-card__desc { font-size: 1rem; } /* 16px */
.staff-card__qual { font-size: 0.8125rem; } /* 13px */
}
/* ---------- 6.10 Section 8: Flow ---------- */
.flow {
position: relative;
background: url('../assets/photos/flow-bg.jpg') center/cover no-repeat;
padding: 24px 16px 32px;
}
.flow::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.5); /* 50% white wash, vs 60% in §5 */
z-index: 0;
}
.flow__inner {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.flow__title {
color: var(--color-primary);
font-weight: 700;
font-size: 1.75rem;
line-height: 1.3;
text-align: center;
letter-spacing: 0.02em;
}
.flow__divider {
width: 80%;
max-width: 596px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
margin: 24px auto 28px;
}
.flow__steps {
display: flex;
flex-direction: column;
gap: 14px;
}
.flow-step {
background: transparent;
border-radius: 24px;
padding: 14px 18px 16px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: none;
}
.flow-step__label {
font-family: var(--font-numeric);
color: var(--color-primary);
font-size: 51px;
line-height: 1;
letter-spacing: 0.04em;
}
.flow-step__heading {
color: var(--color-primary);
font-weight: 700;
font-size: 1.25rem; /* 20px mobile */
line-height: 1.4;
letter-spacing: 0.02em;
}
.flow-step--final .flow-step__heading {
color: var(--color-accent);
}
.flow-step__desc {
color: var(--text-dark);
font-weight: 400;
font-size: 0.9375rem; /* 15px mobile */
line-height: 1.8;
text-align: justify;
margin-top: 4px;
}
@media (min-width: 1100px) {
.flow { padding: 80px 48px 96px; }
.flow__title { font-size: 2.5rem; }
.flow__divider { margin: 32px auto 39px; }
.flow__steps { gap: 24px; }
.flow-step { padding: 24px; border-radius: 30px; }
.flow-step__label { font-size: 51px; line-height: 67px; }
.flow-step__heading { font-size: 1.5rem; } /* 24px */
.flow-step__desc { font-size: 1rem; } /* 16px */
}
/* ---------- 6.11 Section 9: FAQ ---------- */
.faq {
background: var(--bg-tint-blue);
padding: 24px 16px 32px;
}
.faq__inner {
max-width: 800px;
margin: 0 auto;
}
.faq__title {
color: var(--color-primary);
font-weight: 700;
font-size: 1.75rem;
line-height: 1.3;
text-align: center;
letter-spacing: 0.02em;
}
.faq__divider {
width: 80%;
max-width: 596px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
margin: 24px auto 28px;
}
.faq__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.faq-item__row {
background: rgb(255, 255, 255);
opacity: 0.8;
border-radius: 8px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 14px;
}
.faq-item__row--q {
border: 1px solid var(--color-primary-40);
column-gap: 23px;
}
.faq-item__row--a {
border: 1px solid var(--color-primary);
column-gap: 8px;
}
.faq-item__label {
font-family: var(--font-latin);
font-weight: 400;
font-size: 28px;
color: var(--text-dark);
line-height: 1;
flex: 0 0 auto;
}
.faq-item__highlight {
color: var(--color-accent);
font-weight: 900;
}
.faq-item__text {
color: var(--text-dark);
font-weight: 500;
font-size: 0.8125rem;
line-height: 1.7;
}
.faq-item__emphasis {
color: var(--color-accent);
font-weight: 700;
}
@media (min-width: 1100px) {
.faq { padding: 80px 48px 96px; }
.faq__title { font-size: 2.5rem; }
.faq__divider { margin: 32px auto 39px; }
.faq__list { gap: 22px; }
.faq-item { gap: 12px; }
.faq-item__row { padding: 16px 24px; gap: 18px; border-radius: 20px; }
/* Desktop border stays 2px (deep-audit batch 2: thin border is mobile-only). */
.faq-item__row--q { border-width: 2px; column-gap: 18px; }
.faq-item__row--a { border-width: 2px; column-gap: 18px; }
.faq-item__label { font-size: 36px; }
.faq-item__text { font-size: 1.375rem; } /* 22px */
}
/* ---------- 6.12 Section 10: Contact ---------- */
.contact {
background: var(--bg-light-blue);
padding: 24px 16px 32px;
}
.contact__inner {
max-width: 800px;
margin: 0 auto;
}
/* Part A — CTA zone */
.contact__title {
color: var(--color-primary);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.4;
text-align: center;
letter-spacing: 0.02em;
margin-bottom: 28px;
}
.contact__ctas {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.contact__ctas .header-cta {
justify-content: center;
text-align: center;
}
/* Mobile: figma shows LINE only at top of contact (phone reachable via sticky bar) */
.contact-cta--phone { display: none; }
@media (min-width: 1100px) {
.contact-cta--phone { display: inline-flex; }
}
.contact-cta__qr {
width: 56px;
height: 56px;
background: var(--bg-white);
padding: 4px;
border-radius: 4px;
object-fit: contain;
margin-left: 12px;
}
.contact__trust {
color: var(--text-dark);
font-weight: 400;
font-size: 0.8125rem;
line-height: 1.7;
text-align: center;
margin-bottom: 28px;
}
.contact__deco-heading {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 28px;
}
.contact__deco-text {
color: var(--text-dark);
font-weight: 500;
font-size: 1.125rem;
line-height: 1.5;
text-align: center;
}
.contact__deco-line {
flex: 0 0 auto;
width: 60px;
height: 3px;
background: #000000;
border-radius: 2px;
}
.contact__deco-line--left { transform: rotate(60deg); }
.contact__deco-line--right { transform: rotate(-60deg); }
/* Part B — Mail form */
.mail-form {
background: transparent;
border-radius: 24px;
padding: 32px 20px;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 20px;
}
.mail-form__heading {
color: var(--color-primary);
font-weight: 700;
font-size: 1.75rem;
line-height: 1.3;
text-align: center;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-field__head {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.form-field__label {
color: var(--text-dark);
font-weight: 500;
font-size: 0.9375rem;
}
.form-badge {
font-weight: 700;
font-size: 0.75rem;
color: var(--text-white);
padding: 4px 12px;
border-radius: 6px;
letter-spacing: 0.04em;
line-height: 1.3;
}
.form-badge--required { background: var(--color-accent); }
.form-badge--optional { background: var(--text-mid); }
.form-field__input,
.form-field__textarea {
width: 100%;
background: var(--bg-white);
border: 0;
border-radius: 8px;
padding: 18px 20px;
font-size: 1rem;
color: var(--text-dark);
outline: none;
}
.form-field__input:focus,
.form-field__textarea:focus {
outline: none;
}
.form-field__textarea {
resize: vertical;
min-height: 220px;
line-height: 1.6;
}
/* Inline validation: red ring on invalid fields, red message under them */
.form-field__input.is-error,
.form-field__textarea.is-error {
outline: 2px solid #D33A2C;
outline-offset: -2px;
}
.form-field__error {
margin: 8px 0 0;
color: #D33A2C;
font-weight: 500;
font-size: 0.875rem; /* 14px */
line-height: 1.5;
letter-spacing: 0.02em;
}
.form-field__error::before {
content: '⚠ ';
margin-right: 2px;
}
@media (min-width: 1100px) {
.form-field__error { font-size: 0.9375rem; }
}
/* Radio group (field 4) — stacked vertically per Figma */
.form-radio-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.form-radio {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
position: relative;
}
.form-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0; height: 0;
}
.form-radio__dot {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--color-primary);
background: var(--bg-white);
position: relative;
}
.form-radio input:checked ~ .form-radio__dot::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--color-primary);
}
.form-radio input:focus-visible ~ .form-radio__dot {
box-shadow: 0 0 0 3px var(--color-primary-40);
}
.form-radio__label {
color: var(--text-dark);
font-weight: 500;
font-size: 0.9375rem;
}
.form-radio__reset {
margin-left: 0;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary);
background: var(--bg-white);
border: 1px solid var(--color-primary);
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.form-radio__reset:hover {
background: var(--color-primary);
color: var(--text-white);
}
/* Loan info toggle — chunky rectangular block per Figma (not pill) */
.loan-toggle {
position: relative;
display: flex; /* full-width on mobile so text doesn't wrap awkwardly */
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
align-self: stretch;
background: var(--color-primary);
color: var(--text-white);
border: 0;
border-radius: 8px;
padding: 20px 24px;
font-weight: 700;
font-size: 0.9375rem;
cursor: pointer;
letter-spacing: 0.02em;
transition: opacity 0.15s;
}
.loan-toggle:hover { opacity: 0.92; }
/* hide original + icon image; render a chevron via CSS instead */
.loan-toggle__icon { display: none; }
.loan-toggle::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -3px;
transition: transform 0.2s ease;
}
.loan-toggle[aria-expanded="true"]::after {
transform: rotate(225deg);
margin-top: 3px;
}
.loan-info {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.loan-info.is-open { max-height: 1400px; }
.loan-info__inner {
padding: 16px 0 0;
display: flex;
flex-direction: column;
gap: 18px;
/* All loan-info text inputs / selects share the same width — sized to fit
the prefecture dropdown's longest option (都道府県をお選びください). */
--loan-input-width: 280px;
}
.loan-info .form-field__input,
.loan-info .form-field__pair,
.loan-info .form-field__suffix {
width: var(--loan-input-width);
max-width: 100%;
}
.loan-info .form-field__suffix .form-field__input { width: auto; }
/* loan-info: prefecture select + city input — always stacked vertically */
.form-field__pair {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
/* input + 万円 suffix label inline */
.form-field__suffix {
display: flex;
align-items: center;
gap: 8px;
}
.form-field__suffix .form-field__input { flex: 1; }
.form-field__suffix-label {
color: var(--text-dark);
font-weight: 500;
font-size: 0.9375rem;
flex: 0 0 auto;
}
/* checkbox group used by 物件種別 (multi-select) — stacked vertically */
.form-checkbox-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.form-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.9375rem;
color: var(--text-dark);
}
.form-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.form-checkbox__box {
width: 18px;
height: 18px;
border: 1.5px solid var(--color-primary);
border-radius: 3px;
background: var(--bg-white);
flex: 0 0 auto;
position: relative;
}
.form-checkbox input[type="checkbox"]:checked + .form-checkbox__box::after {
content: '';
position: absolute;
inset: 2px;
background: var(--color-primary);
border-radius: 1px;
}
.form-checkbox input[type="checkbox"]:focus-visible + .form-checkbox__box {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
/* "その他" row — sibling text input next to the label so user can specify */
.form-checkbox__other {
flex: 0 1 200px;
margin-left: 8px;
background: var(--bg-white);
border: 0;
border-radius: 6px;
padding: 8px 12px;
font-size: 0.9375rem;
color: var(--text-dark);
outline: none;
}
/* stacked variant for 債務状況 radios */
.form-radio-group--stacked {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.form-privacy {
margin-top: 8px;
padding: 14px 16px;
border-radius: 8px;
}
.form-privacy__heading {
margin: 0 0 6px;
font-weight: 700;
font-size: 0.875rem; /* 14px */
line-height: 1.5;
color: #333333;
}
.form-privacy__body {
margin: 0;
font-weight: 700;
font-size: 0.8125rem; /* 13px */
line-height: 1.7;
color: #555555;
}
.form-privacy__link {
color: var(--color-primary);
text-decoration: underline;
}
.form-submit,
.form-confirm {
display: inline-block;
width: auto;
align-self: center;
color: var(--text-white);
border: 0;
border-radius: 999px;
padding: 14px 48px;
font-weight: 700;
font-size: 1rem;
text-align: center;
cursor: pointer;
letter-spacing: 0.04em;
margin-top: 16px;
transition: opacity 0.15s;
}
.form-submit { background: var(--color-primary); } /* main 送信する — solid blue */
.form-confirm { background: linear-gradient(180deg, #00B7FF 0%, #0890E3 100%); } /* loan-info 入力内容を確認する — cyan gradient */
.form-submit:hover,
.form-confirm:hover { opacity: 0.92; }
@media (min-width: 1100px) {
.contact { padding: 80px 48px 96px; }
.contact__title { font-size: 2rem; line-height: 1.3; white-space: nowrap; }
.contact__title br { display: none; }
.contact__ctas {
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 32px;
margin-bottom: 28px;
}
.contact__ctas .header-cta {
padding: 0 80px;
gap: 16px;
min-height: 80px;
font-size: 1.375rem;
justify-content: center;
text-align: center;
}
.contact__ctas .header-cta__icon { width: 32px; height: 32px; }
.contact__ctas .header-cta__sub { font-size: 0.875rem; }
.contact__ctas .header-cta__number { font-size: 1.5rem; letter-spacing: 0.04em; }
.contact__trust { font-size: 1rem; }
.contact__deco-text { font-size: 1.5rem; }
.contact__deco-line { width: 68px; }
.mail-form { padding: 48px 40px; gap: 24px; }
.mail-form__heading { font-size: 2.5rem; }
.form-field__head { gap: 14px; }
.form-field__label { font-size: 1.25rem; } /* 20px */
.form-badge { font-size: 0.875rem; padding: 6px 14px; }
.form-field__input,
.form-field__textarea { font-size: 1.0625rem; padding: 22px 24px; }
.form-field__textarea { min-height: 320px; }
.loan-toggle {
display: inline-flex;
width: auto;
align-self: center;
padding: 26px 64px;
font-size: 1.0625rem;
}
.form-submit,
.form-confirm {
margin: 20px auto 0;
padding: 16px 80px;
font-size: 1.125rem; /* 18px */
}
}
/* ---------- 6.13 Section 11: Rep Message ---------- */
.rep {
background: var(--bg-tint-blue);
padding: 24px 16px 32px;
}
.rep__inner {
max-width: 1200px;
margin: 0 auto;
}
.rep__title {
color: var(--color-primary);
font-weight: 700;
font-size: 1.75rem;
line-height: 1.3;
text-align: center;
letter-spacing: 0.02em;
margin-bottom: 32px;
}
.rep__divider {
width: 80%;
max-width: 596px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
margin: 24px auto 28px;
}
.rep__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.rep__photo-wrap {
position: relative;
width: 220px;
height: 220px;
flex: 0 0 auto;
}
/* Light-blue circular bg, offset behind the photo */
.rep__photo-wrap::before {
content: '';
position: absolute;
inset: 0;
background: #DAF1FF;
border-radius: 50%;
transform: translate(16px, 16px);
z-index: 0;
}
.rep__photo {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.rep__text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.rep__quote {
color: var(--text-dark);
font-weight: 700;
font-size: 1.25rem; /* 20px mobile */
line-height: 1.7;
letter-spacing: 0.02em;
}
.rep__signature-block {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
align-self: flex-end;
gap: 8px;
}
.rep__signatory {
color: var(--text-dark);
font-weight: 400;
font-size: 0.875rem; /* 14px mobile */
}
.rep__signature {
width: 140px;
height: auto;
/* PNG has a near-white opaque bg from a screenshot crop;
mix-blend-mode: darken hides the off-white edges on the white section bg. */
mix-blend-mode: darken;
}
@media (min-width: 1100px) {
.rep { padding: 80px 48px 96px; }
.rep__title { font-size: 2.5rem; text-align: center; margin-bottom: 48px; }
.rep__divider { margin: 32px auto 39px; }
.rep__content {
flex-direction: row;
align-items: center;
gap: 56px;
}
.rep__photo-wrap {
width: 240px;
height: 240px;
}
.rep__photo-wrap::before {
transform: translate(20px, 20px);
}
.rep__text {
flex: 1;
align-items: flex-end;
text-align: right;
}
.rep__quote {
font-size: 1.625rem; /* 26px */
text-align: left;
width: 100%;
}
.rep__signature-block {
margin-top: 28px;
align-items: flex-end;
}
.rep__signatory { font-size: 1.125rem; } /* 18px */
.rep__signature { width: 145px; }
}
.scaffold-marker {
max-width: 600px;
margin: 4rem auto;
padding: 1.5rem;
border: 2px dashed var(--color-primary-40);
border-radius: 12px;
text-align: center;
color: var(--text-mid);
font-weight: 500;
}
.scaffold-marker strong { color: var(--color-primary); font-weight: 700; }
/* ---------- 6.14 Partners modal (Reasons CTA target) ----------
Figma: ポップアップ frame (56:1560), 4 tabs:
- 金融機関 (banks) — 4 categories
- 債権回収会社 (debt) — flat list
- 提携不動産会社 (re) — flat list
- 専門家 (experts) — 3 categories
Tab pills: 209×46, blue/white toggle.
Content card: white panel with #E6EDFA category strip on left. */
.partners-modal[hidden] { display: none !important; }
.partners-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.partners-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.partners-modal__panel {
position: relative;
background: var(--bg-tint-blue);
border-radius: 16px;
width: 100%;
max-width: 1000px;
max-height: 90vh;
display: flex;
flex-direction: column;
padding: 28px 16px 24px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.partners-modal__close {
position: absolute;
top: 8px;
right: 12px;
background: transparent;
border: 0;
font-size: 32px;
line-height: 1;
color: var(--text-dark);
cursor: pointer;
padding: 4px 8px;
z-index: 2;
}
.partners-modal__close:hover { opacity: 0.6; }
.partners-modal__title {
color: var(--text-dark);
font-weight: 500;
font-size: 18px;
line-height: 1.3;
text-align: center;
margin: 0 24px 16px;
letter-spacing: 0.02em;
}
.partners-modal__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-bottom: 0;
}
.partners-modal__tab {
flex: 1 1 0;
min-width: 0;
background: var(--bg-white);
color: var(--color-primary);
border: 1px solid var(--color-primary);
border-bottom: 0;
border-radius: 8px 8px 0 0;
padding: 10px 4px;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.partners-modal__tab.is-active {
background: var(--color-primary);
color: var(--bg-white);
}
.partners-modal__tab:hover:not(.is-active) {
background: var(--bg-light-blue);
}
.partners-modal__content {
background: var(--bg-white);
border-radius: 0 0 12px 12px;
border: 2px solid var(--color-primary);
padding: 16px;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.partners-modal__content[hidden] { display: none; }
/* Categorized tabs (banks, experts) — mobile: stacked categories */
.partners-modal__categories {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.partners-modal__category {
display: flex;
flex-direction: column;
gap: 6px;
}
.partners-modal__category-name {
background: var(--bg-tint-blue);
color: var(--text-dark);
font-size: 15px;
font-weight: 500;
padding: 8px 12px 8px 26px;
margin: 0;
position: relative;
}
.partners-modal__category-name::before {
content: '';
position: absolute;
left: 12px;
top: 50%;
width: 8px;
height: 8px;
background: var(--color-primary);
transform: translateY(-50%);
}
.partners-modal__items {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 12px;
}
.partners-modal__items li {
color: var(--text-dark);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.02em;
padding-left: 14px;
position: relative;
}
.partners-modal__items li::before {
content: '';
position: absolute;
left: 2px;
top: 0.55em;
width: 6px;
height: 6px;
background: var(--color-primary);
border-radius: 50%;
}
.partners-modal__items--flat {
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.partners-modal__tab { font-size: 14px; padding: 12px 8px; }
.partners-modal__title { font-size: 22px; margin-bottom: 20px; }
.partners-modal__items { grid-template-columns: repeat(3, 1fr); font-size: 14px; }
.partners-modal__items--flat { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.partners-modal__panel {
padding: 36px 28px 32px;
max-height: 85vh;
}
.partners-modal__close { top: 12px; right: 16px; font-size: 36px; }
.partners-modal__title { font-size: 28px; margin-bottom: 28px; }
.partners-modal__tab {
font-size: 18px;
padding: 12px 16px;
border-radius: 10px 10px 0 0;
}
/* Default content padding for flat-list tabs (debt, realestate). The
categorized tabs (banks, experts) reset this to 0 so the label column
can fill edge-to-edge. */
.partners-modal__content { padding: 28px; border-radius: 0 0 14px 14px; }
.partners-modal__content:has(.partners-modal__categories) { padding: 0; }
/* Desktop: each .category is a flex row (label + items) at align-items
stretch so the label fills its row's full height. With gap:0 between
categories the label backgrounds visually form one continuous column.
The horizontal divider is drawn by a ::after pseudo on each category,
inset 16px from each side (so it doesn't touch the card border). */
.partners-modal__categories {
display: flex;
flex-direction: column;
gap: 0;
}
.partners-modal__category {
display: flex;
flex-direction: row;
align-items: stretch;
position: relative;
}
.partners-modal__category:not(:last-child)::after {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: 0;
height: 2px;
background: var(--color-primary);
}
.partners-modal__category-name {
flex: 0 0 220px;
font-size: 19px;
padding: 22px 16px 22px 40px;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
}
.partners-modal__category-name::before {
left: 18px;
width: 10px;
height: 10px;
}
.partners-modal__items {
flex: 1;
grid-template-columns: repeat(3, 1fr);
gap: 8px 20px;
padding: 22px 28px 22px 24px;
align-content: start;
}
.partners-modal__items li { font-size: 18px; }
.partners-modal__items--flat {
grid-template-columns: repeat(3, 1fr);
padding: 0;
}
/* Per-tab layout overrides to match design:
realestate → 2-col flat list
experts → 1-col items inside each category (only 1-2 items per row) */
.partners-modal__content[data-panel="realestate"] .partners-modal__items--flat {
grid-template-columns: repeat(2, 1fr);
}
.partners-modal__content[data-panel="experts"] .partners-modal__items {
grid-template-columns: 1fr;
}
}
/* Lock body scroll when modal is open */
body.partners-modal-open { overflow: hidden; }
/* =====================================================================
PROMOTED FROM preview.html (post-feedback round, 2026-04-28)
① Solution-detail modals ② Cases counter + carousel takeover
③ Staff mobile carousel arrows ④ Phone + LINE bridge modals
===================================================================== */
/* ---------- ② & ③ Carousel arrows + chevron ---------- */
.preview-carousel-wrap {
position: relative;
}
.preview-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 2px solid #0072B7;
color: #0072B7;
font-size: 0; /* hide the text glyph; chevron drawn via ::before */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
z-index: 5;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
padding: 0;
outline: none;
}
.preview-arrow::before {
content: '';
display: block;
width: 10px;
height: 10px;
border-top: 2.5px solid currentColor;
border-right: 2.5px solid currentColor;
border-radius: 1px;
}
.preview-arrow--left::before { transform: rotate(-135deg); margin-right: -3px; }
.preview-arrow--right::before { transform: rotate(45deg); margin-left: -3px; }
@media (hover: hover) and (pointer: fine) {
.preview-arrow:hover {
background: #0072B7;
color: #fff;
border-color: #0072B7;
transform: translateY(-50%) scale(1.05);
box-shadow: 0 4px 14px rgba(0, 114, 183, 0.35);
}
}
.preview-arrow:active {
transform: translateY(-50%) scale(0.96);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.preview-arrow:focus-visible { outline: 2px solid #0072B7; outline-offset: 3px; }
.preview-arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
background: #fff;
color: #0072B7;
border-color: #0072B7;
transform: translateY(-50%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.preview-arrow--left { left: 8px; }
.preview-arrow--right { right: 8px; }
/* Cases carousel: switch the live mandatory snap to PROXIMITY so
programmatic scrollTo isn't yanked off-target. Natural touch swipe
still snaps when settling near a card. */
.preview-carousel-wrap--cases .cases__carousel {
scroll-snap-type: x proximity;
}
.preview-carousel-wrap--cases .preview-arrow {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, 0.55);
border-color: rgba(0, 114, 183, 0.55);
color: rgba(0, 114, 183, 0.75);
box-shadow: none;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.preview-carousel-wrap--cases .preview-arrow::before {
width: 8px;
height: 8px;
border-width: 2px;
}
@media (max-width: 1099px) {
.preview-carousel-wrap--cases {
margin: 0 -16px;
position: relative;
}
.preview-carousel-wrap--cases .preview-arrow--left { left: 0; }
.preview-carousel-wrap--cases .preview-arrow--right { right: 0; }
.preview-carousel-wrap--cases .cases__carousel {
margin: 0;
padding-left: 36px;
padding-right: 36px;
scroll-padding-left: 36px;
scroll-padding-right: 36px;
}
}
@media (min-width: 1100px) {
.preview-carousel-wrap--cases .preview-arrow {
background: rgba(255, 255, 255, 0.95);
border-color: #0072B7;
color: #0072B7;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.preview-carousel-wrap--cases {
position: relative;
padding: 0 56px;
}
.preview-carousel-wrap--cases .cases__carousel {
margin: 0;
}
.preview-carousel-wrap--cases .preview-arrow {
width: 56px;
height: 56px;
}
.preview-carousel-wrap--cases .preview-arrow::before {
width: 14px;
height: 14px;
border-width: 3px;
}
.preview-carousel-wrap--cases .preview-arrow--left { left: 0; }
.preview-carousel-wrap--cases .preview-arrow--right { right: 0; }
}
/* Top counter for cases: large current number, slash, smaller total */
.preview-cases-counter {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
margin: 24px 0 16px;
font-family: 'Inter', 'Noto Sans JP', sans-serif;
color: #0072B7;
letter-spacing: 0.04em;
position: relative;
}
.preview-cases-counter__current { font-size: 44px; font-weight: 700; line-height: 1; }
.preview-cases-counter__sep { font-size: 28px; font-weight: 400; color: #888; margin: 0 4px; }
.preview-cases-counter__total { font-size: 22px; font-weight: 500; color: #888; }
.preview-cases-progress {
width: 120px;
height: 3px;
background: #DDE5EE;
border-radius: 2px;
margin: 10px auto 24px;
overflow: hidden;
position: relative;
}
.preview-cases-progress__fill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(90deg, #0072B7 0%, #00B7FF 100%);
border-radius: 2px;
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1100px) {
.preview-cases-counter { margin: 32px 0 16px; }
.preview-cases-counter__current { font-size: 56px; }
.preview-cases-counter__sep { font-size: 36px; }
.preview-cases-counter__total { font-size: 28px; }
.preview-cases-progress { width: 180px; height: 4px; margin: 14px auto 32px; }
}
/* Staff arrows — mobile only (24px circles, semi-transparent, viewport-edge). */
@media (min-width: 768px) {
.staff__row .preview-arrow { display: none; }
}
.staff__row .preview-arrow {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.55);
border-color: rgba(0, 114, 183, 0.55);
color: rgba(0, 114, 183, 0.75);
box-shadow: none;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.staff__row .preview-arrow::before { width: 6px; height: 6px; border-width: 2px; }
@media (max-width: 767px) {
.staff__row {
margin: 0 -16px;
position: relative;
}
.staff__row .preview-arrow--left { left: 0; }
.staff__row .preview-arrow--right { right: 0; }
.staff__row-track {
margin: 0;
padding: 4px 32px 12px;
scroll-snap-type: x mandatory;
scroll-padding-left: 32px;
scroll-padding-right: 32px;
}
.staff__row-track .staff-card {
flex: 0 0 calc((100% - 12px) / 2);
min-width: 0;
scroll-snap-align: none;
}
.staff__row-track .staff-card:nth-child(odd) { scroll-snap-align: start; }
}
/* ---------- ④ Bridge modals (phone + LINE) ---------- */
.bridge-modal[hidden] { display: none !important; }
.bridge-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.bridge-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
cursor: pointer;
}
.bridge-modal__panel {
position: relative;
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 440px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.bridge-modal__accent { height: 6px; }
.bridge-modal--phone .bridge-modal__accent { background: #FF8018; }
.bridge-modal--line .bridge-modal__accent { background: #06C755; }
.bridge-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #eee;
color: #555;
border: 0;
font-size: 18px;
cursor: pointer;
z-index: 2;
}
.bridge-modal__close:hover { opacity: 0.7; }
.bridge-modal__body { padding: 28px 24px 22px; text-align: center; }
.bridge-modal__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #0072B7; }
.bridge-modal__sub { margin: 0 0 18px; color: #888; font-size: 14px; }
.bridge-modal__list-box {
background: #F5F7FA;
border-radius: 8px;
padding: 16px 18px;
text-align: left;
margin-bottom: 20px;
}
.bridge-modal__list-heading { text-align: center; font-size: 13px; font-weight: 700; color: #555; margin: 0 0 12px; }
.bridge-modal__list { list-style: none; padding: 0; margin: 0; }
.bridge-modal__list li {
padding-left: 22px;
position: relative;
font-size: 13px;
line-height: 1.7;
color: #444;
}
.bridge-modal__list li::before {
content: '✓';
position: absolute;
left: 4px;
top: 0;
color: #0072B7;
font-weight: 700;
}
.bridge-modal__cta {
display: block;
width: 100%;
padding: 16px 20px;
border-radius: 8px;
border: 0;
color: #fff;
font-weight: 700;
font-size: 17px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: opacity 0.15s;
}
.bridge-modal__cta:hover { opacity: 0.92; }
.bridge-modal--phone .bridge-modal__cta { background: #FF8018; }
.bridge-modal--line .bridge-modal__cta { background: #06C755; }
.bridge-modal__cta-sub { display: block; font-size: 11px; font-weight: 400; margin-top: 4px; opacity: 0.95; }
.bridge-modal__defer {
display: block;
text-align: center;
margin-top: 14px;
color: #888;
text-decoration: underline;
font-size: 13px;
cursor: pointer;
background: transparent;
border: 0;
width: 100%;
padding: 4px;
}
/* ---------- ① Solution-detail modal ---------- */
.sol-modal[hidden] { display: none !important; }
.sol-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.sol-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
cursor: pointer;
}
.sol-modal__panel {
position: relative;
background: #fff;
border-radius: 14px;
border: 2px solid #0072B7;
width: 100%;
max-width: 720px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.sol-modal__header {
background: #0072B7;
color: #fff;
padding: 18px 50px 18px 24px;
text-align: center;
position: relative;
flex: 0 0 auto;
}
.sol-modal__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
@media (min-width: 768px) { .sol-modal__title { font-size: 24px; } }
.sol-modal__close {
position: absolute;
top: 12px;
right: 16px;
background: transparent;
color: #fff;
border: 0;
font-size: 24px;
cursor: pointer;
line-height: 1;
}
.sol-modal__body {
padding: 24px 24px 28px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) { .sol-modal__body { padding: 28px 32px 32px; } }
.sol-modal__tagline {
text-align: center;
color: #FF8018;
font-weight: 700;
font-size: 17px;
margin: 0 0 22px;
}
.sol-modal__section { margin-bottom: 22px; }
.sol-modal__section:last-child { margin-bottom: 0; }
.sol-modal__section-title {
background: #E6EDFA;
color: #0072B7;
padding: 8px 14px;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
margin: 0 0 12px;
}
.sol-modal__list { list-style: none; padding: 0; margin: 0; }
.sol-modal__list li {
padding-left: 18px;
position: relative;
line-height: 1.7;
margin-bottom: 8px;
font-size: 14px;
color: #333;
}
.sol-modal__list li::before {
content: '';
position: absolute;
left: 2px;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #0072B7;
}
.sol-modal__body p { font-size: 14px; line-height: 1.8; margin: 0 0 8px; color: #333; }
/* Solution cards: clickable affordance (cards now open detail modals) */
.solution-card { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.solution-card:hover { transform: translateY(-3px); }
.solution-card:hover .solution-card__plan { box-shadow: 0 6px 18px rgba(0, 114, 183, 0.25); }
/* Lock body scroll when any sol-modal or bridge-modal is open */
body.preview-modal-open { overflow: hidden; }