hidden input + .cform__file-btn + .cform__file-name */
.cform__file { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.cform__file input[type="file"] {
position: absolute; width: 1px; height: 1px; opacity: 0;
overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
}
.cform__file-btn {
flex: none; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid #838383; padding: 9px 24px;
font-family: var(--f-serif); font-weight: 600; font-size: 16px; color: #9c9c9c;
transition: background .3s, color .3s;
}
.cform__file:hover .cform__file-btn { background: rgba(31,42,68,.06); color: var(--navy); }
.cform__file:focus-within { border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(184,166,201,.2); }
.cform__file-name {
font-family: var(--f-sans); font-size: 14px; color: #9c9c9c;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cform__file-name.has-file { color: var(--navy); }
/* ---------- Contact Form 7 — inherit the .cform look ---------- */
.cform .wpcf7-form-control-wrap { display: block; }
.cform .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.cform .wpcf7-radio .wpcf7-list-item { margin: 0; }
.cform .wpcf7-radio .wpcf7-list-item label,
.cform .wpcf7-acceptance .wpcf7-list-item label {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--f-serif); font-size: 17px; color: var(--navy); cursor: pointer;
}
.cform .wpcf7-radio input[type=radio],
.cform .wpcf7-acceptance input[type=checkbox] { accent-color: var(--lavender); width: 16px; height: 16px; }
.cform .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.cform input.wpcf7-file { font-family: var(--f-sans); font-size: 15px; color: var(--navy); padding: 12px 0; }
.cform .wpcf7-not-valid-tip { color: #ff1010; font-size: 13px; margin-top: 6px; font-family: var(--f-sans); }
.cform .wpcf7-response-output {
margin: 22px 0 0 !important; padding: 14px 18px !important; border-radius: 6px;
font-family: var(--f-serif); font-size: 14px; text-align: center;
}
.cform .wpcf7 form.sent .wpcf7-response-output { border: 1px solid #7aa88c; background: rgba(120,170,140,.12); color: #3a7a56; }
.cform .wpcf7 form.invalid .wpcf7-response-output,
.cform .wpcf7 form.failed .wpcf7-response-output { border: 1px solid #ff1010; background: rgba(255,16,16,.06); color: #d21; }
.cform .wpcf7-spinner { margin: 8px auto 0; display: block; }
/* ============================================================
SERVICES v2 — 事業内容-2 (Figma 修正済み/完成版 37:2477 PC / 37:1833 SP)
============================================================ */
.sp-only { display: none; }
.svc2-page { position: relative; background-color: #fdf7f0; overflow: hidden; }
.svc2-page__bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: fill; z-index: 0; pointer-events: none;
}
.svc2-fv, .svc2-intro, .svc2-item, .bl2-footer { position: relative; z-index: 1; }
/* ---------- FV ---------- */
.svc2-fv { position: relative; margin-top: 117px; height: 724px; }
.svc2-fv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.svc2-fv__inner { position: relative; max-width: 1440px; height: 100%; margin: 0 auto; }
.svc2-fv__text { position: absolute; left: 57.3%; top: 292px; width: 582px; }
.svc2-fv__title {
font-family: var(--f-serif); font-weight: 600;
font-size: 64px; line-height: 102px; letter-spacing: -0.04em;
color: var(--navy); white-space: nowrap;
}
.svc2-fv__sub {
margin-top: 36px;
font-family: var(--f-sans); font-weight: 400;
font-size: 20px; line-height: 1.94; letter-spacing: -0.1em;
color: var(--navy);
}
/* ---------- intro ---------- */
.svc2-intro { text-align: center; margin-top: 83px; padding: 0 40px; color: var(--navy); }
.svc2-intro__title {
font-family: var(--f-serif); font-weight: 600;
font-size: 48px; line-height: 1.94; letter-spacing: 4.32px;
}
.svc2-intro__sub {
margin-top: 30px;
font-family: var(--f-serif); font-weight: 600;
font-size: 24px; line-height: 1.5;
}
/* ---------- service items ---------- */
.svc2-item {
max-width: 1257px; margin: 127px auto 0; min-height: 712px;
display: flex; align-items: center; justify-content: center; gap: 50px;
padding: 0 24px; border-radius: 12px; color: var(--navy);
}
.svc2-item--drama { margin-top: 164px; }
.svc2-item__media { flex: 0 0 482px; height: 488px; }
.svc2-item__media img { width: 100%; height: 100%; object-fit: cover; }
.svc2-item__body { width: 643px; max-width: 100%; display: flex; flex-direction: column; gap: 50px; }
.svc2-item__title {
font-family: var(--f-serif); font-weight: 700;
font-size: 48px; line-height: 1.4; letter-spacing: 6.24px;
white-space: nowrap;
}
.svc2-item--drama .svc2-item__title {
font-size: 64px; letter-spacing: 8.32px;
text-shadow: 4px 4px 4px rgba(0,0,0,.25);
}
.svc2-item__catch {
font-family: var(--f-serif); font-weight: 600;
font-size: 32px; line-height: 1.4; letter-spacing: 4.16px;
}
.svc2-item--casting .svc2-item__catch { letter-spacing: -2.24px; }
.svc2-item__text { font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 46px; }
.svc2-item__text p { margin: 0; }
.svc2-item--drama .svc2-item__text > p { letter-spacing: -2.08px; }
.svc2-item__text ul { list-style: disc; margin: 0; padding-left: 36px; }
.svc2-item--sns .svc2-item__text ul { padding-left: 72px; }
.svc2-item__text li::marker { color: var(--navy); }
/* ============================================================
FOOTER v2 — dark CONTACT + footer block (Figma 37:2863 / 37:2243)
============================================================ */
.bl2-footer {
position: relative; margin-top: 128px;
background: var(--navy); color: #fff;
height: 977px; overflow: hidden;
}
.bl2-footer__wm {
position: absolute; left: 50%; top: 122px; transform: translate(-50%, -50%);
font-family: var(--f-cormorant); font-style: italic; font-weight: 400;
font-size: 200px; line-height: 1; letter-spacing: 26px;
color: rgba(156,156,156,.2); white-space: nowrap; pointer-events: none;
}
.bl2-footer__eyebrow { display: none; }
.bl2-footer__cta {
position: relative; padding-top: 84px;
display: flex; flex-direction: column; align-items: center; gap: 30px;
text-align: center;
}
.bl2-footer__title {
font-family: var(--f-serif); font-weight: 600;
font-size: 48px; line-height: 1.94; letter-spacing: 4.32px;
}
.bl2-footer__sub { font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 1.5; }
/* matches the About-page contact button: outline pill on the navy ground,
premium hover (flash sweep + lift) — client wants this look site-wide */
.bl2-footer__btn {
margin-top: 50px; display: inline-block;
background: transparent;
border: 1px solid rgba(255,255,255,.7);
border-radius: 132px;
padding: 30px 60px;
font-family: var(--f-serif); font-weight: 600; font-size: 32px; line-height: 1.4;
color: #fff !important;
position: relative; overflow: hidden; /* clip the flash sweep */
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.bl2-footer__btn::after {
content: "";
position: absolute; top: 0; left: -85%;
width: 60%; height: 100%;
background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.5) 50%, transparent 85%);
transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.bl2-footer__btn:hover { transform: translateY(-4px); }
.bl2-footer__btn:hover::after { animation: bl-flash .75s var(--ease-out); }
/* Width is FIXED px, matching フッター's absolute geometry — the rest of the
footer (nav, brand, copy) is fixed-px centred too, so a vw width would break
the line's proportion to the content on wide monitors.
MEASURE THIS WITH A COLUMN-MAX, NOT A SINGLE ROW. The stroke is a tapered,
very slightly off-axis line, so its faint ends drift onto neighbouring rows:
scanning one row reports x200..1219 (1020px) and silently loses 20% of the
line. Taking the max down rows 520..532 of the 1:1 1440 render gives the real
span, x61..1378 = 1318px, centred on 719.5. */
.bl2-footer__rule {
position: absolute; left: 50%; top: 527px; transform: translateX(-50%);
width: 1318px; max-width: calc(100% - 60px); height: 1px;
background: rgba(255,255,255,.35);
}
.bl2-footer__brand {
position: absolute; left: 50%; top: 595px; transform: translateX(-50%);
display: flex; align-items: center; gap: 33px;
}
/* 2026-07-22 client: drop the "BEYOND Lune" wordmark, keep only the logo,
bigger + centred (the brand block is already centre-pinned, so hiding the
span leaves the enlarged mark on the centre line). ©-copy line is untouched. */
.bl2-footer__brand img { width: 160px; height: 160px; object-fit: contain; }
.bl2-footer__brand span { display: none; }
.bl2-footer__nav {
position: absolute; left: 50%; top: 797px; transform: translateX(-50%);
display: flex; align-items: center; gap: 25px;
}
.bl2-footer__nav a {
width: 147px; height: 48px; display: grid; place-items: center;
font-family: var(--f-bodoni); font-style: italic; font-weight: 500;
font-size: 32px; color: #fff; text-align: center;
transition: opacity .3s;
}
.bl2-footer__nav a:hover { opacity: .7; }
/* Footer SNS row (v4.2) — between the nav row and copyright; same Bodoni
italic voice as the nav, one step smaller so it reads as secondary. */
.bl2-footer__sns {
position: absolute; left: 50%; top: 866px; transform: translateX(-50%);
display: flex; align-items: center; gap: 30px;
}
.bl2-footer__sns a {
font-family: var(--f-bodoni); font-style: italic; font-weight: 500;
font-size: 22px; color: #fff; transition: opacity .3s;
}
.bl2-footer__sns a:hover { opacity: .7; }
.bl2-footer__copy {
position: absolute; left: 50%; top: 927px; transform: translateX(-50%);
font-family: var(--f-serif); font-weight: 700; font-size: 20px; color: #fff; white-space: nowrap;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.svc-grid { gap: 50px; }
.plans__row, .works__cards { grid-template-columns: 1fr; }
.plans__wm, .works__wm { font-size: 120px; }
/* services v2 — tablet */
.svc2-fv { height: 560px; }
.svc2-fv__text { left: 52%; top: 190px; width: 44%; }
.svc2-fv__title { font-size: 44px; line-height: 72px; }
.svc2-fv__sub { font-size: 16px; margin-top: 22px; }
.svc2-intro__title { font-size: 36px; }
.svc2-intro__sub { font-size: 19px; }
.svc2-item { gap: 36px; min-height: 0; margin-top: 90px; }
.svc2-item--drama { margin-top: 110px; }
.svc2-item__media { flex: 0 0 340px; height: 344px; }
.svc2-item__body { gap: 34px; }
.svc2-item__title { font-size: 34px; letter-spacing: 4px; }
.svc2-item--drama .svc2-item__title { font-size: 44px; letter-spacing: 5px; }
.svc2-item__catch { font-size: 24px; letter-spacing: 2px; }
.svc2-item__text { font-size: 18px; line-height: 38px; }
.bl2-footer { height: auto; padding-bottom: 40px; margin-top: 96px; }
.bl2-footer__wm { font-size: 130px; letter-spacing: 16px; top: 90px; }
.bl2-footer__title { font-size: 38px; }
.bl2-footer__sub { font-size: 19px; padding: 0 30px; }
.bl2-footer__btn { font-size: 24px; padding: 24px 44px; }
.bl2-footer__rule, .bl2-footer__brand, .bl2-footer__nav, .bl2-footer__sns, .bl2-footer__copy { position: static; transform: none; }
.bl2-footer__rule { margin: 60px auto 0; }
.bl2-footer__brand { justify-content: center; margin-top: 56px; }
.bl2-footer__brand img { width: 120px; height: 120px; } /* 2026-07-22 client: bigger logo */
.bl2-footer__brand span { font-size: 38px; }
.bl2-footer__nav { justify-content: center; flex-wrap: wrap; margin-top: 48px; gap: 10px 14px; }
.bl2-footer__nav a { width: auto; padding: 0 14px; font-size: 28px; } /* v4.4: 26→28 = .footer-nav tablet size */
.bl2-footer__sns { justify-content: center; flex-wrap: wrap; margin-top: 22px; gap: 10px 26px; }
.bl2-footer__copy { display: block; text-align: center; margin-top: 44px; }
}
@media (max-width: 767px) {
.page-hero__inner { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; min-height: auto; }
.page-hero__img { height: 320px; }
.svc-hero { min-height: 460px; }
.svc-hero__title { font-size: 48px; }
.svc-hero__catch { font-size: 20px; }
.svc-intro { padding: 60px 24px 40px; }
.svc-intro__title { font-size: 26px; }
.svc-grid { grid-template-columns: 1fr; gap: 44px; padding-bottom: 60px; }
.svc-card__jp { font-size: 24px; }
.plans { padding: 60px 24px 70px; }
.plans__wm, .works__wm { font-size: 74px; }
/* mobile: less-creamy, near-white ground (client: SP bg too creamy) */
.contact-page { background: #FBFAF8; }
/* ---- news / contact FV — SP per Figma (390×408: centred text over 27% blob) ---- */
.news-hero, .contact-hero { padding-top: 63px; }
.news-hero__inner, .contact-hero__inner {
position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
min-height: 345px; padding: 30px 24px;
}
.news-hero__img, .contact-hero__img {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 100%; height: 100%; object-fit: cover;
opacity: .27; border-radius: 0; z-index: 0;
}
/* each blob's artwork sits in one half of the source image — face it */
.news-hero__img { object-position: right center; }
.contact-hero__img { object-position: left center; }
.news-hero__title, .news-hero__lead, .contact-hero__title, .contact-hero__sub {
position: relative; z-index: 1; width: 337px; max-width: 100%; margin-left: auto; margin-right: auto;
}
.news-hero__title { font-size: 32px; font-weight: 600; letter-spacing: -1.28px; margin-bottom: 12px; }
.news-hero__lead { font-family: var(--f-sans); font-size: 15px; letter-spacing: -1.5px; }
.contact-hero__title { font-size: 32px; letter-spacing: -1.28px; margin-bottom: 12px; }
.contact-hero__sub { font-family: var(--f-sans); font-size: 15px; letter-spacing: -1.5px; }
/* contact FV — お問合せ/SP-2: washed blob photo full-bleed behind a
left-aligned text block (390×408 frame under the 63px header).
display:contents on the media wrapper makes the absolute img resolve
against .contact-hero__inner — the wrapper was collapsing to 0×0 (its only
child is the absolute img), so the image rendered at 100% of 0 = invisible. */
.contact-hero .page-hero__media { display: contents; }
.contact-hero__inner { min-height: 408px; text-align: left; }
/* wash via filter:opacity (not the opacity property — the FV JS animates that
to 1, which would cancel a plain opacity wash). filter multiplies on top. */
.contact-hero__img { opacity: 1; height: 100% !important; filter: opacity(.5); }
/* ---- news filter tags — SP per Figma (2×2 grid, bordered pills w/ shadow) ---- */
.news-tabs {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 25px; width: 311px; margin: 0 auto; padding: 24px 0 40px;
}
.news-tab {
border: 1px solid var(--navy); border-radius: 10px;
box-shadow: 4px 4px 4px rgba(0,0,0,.25);
padding: 10px 8px; font-weight: 700; font-size: 15px; letter-spacing: 3.75px;
text-align: center; background: #fff; color: var(--navy);
}
/* ---- news list — SP per Figma (white card, 122px rows w/ category badge) ---- */
.news-list {
width: calc(100% - 30px); max-width: 360px;
margin: 0 auto; padding: 14px 27px 30px;
}
/* pager — お知らせ/SP-2: it sits INSIDE the white card (not on the cream
below it), left-aligned from the card's 27px padding, 30px cells on a 48px
pitch and the ">" in a 66px cell. Same white + width as .news-list above,
which is why that rule's 40px bottom margin moved down here. */
.news-pager {
width: calc(100% - 30px); max-width: 360px;
margin: 0 auto 40px; padding: 45px 27px 48px;
background: #fff; justify-content: flex-start; gap: 18px;
}
.news-pager__num {
width: 30px; height: 30px;
font-family: var(--f-serif); font-weight: 600; font-size: 16px; color: #000;
}
.news-pager__num.is-active { background: var(--gray); color: #000; }
.news-pager__ellipsis {
width: 30px; text-align: center; letter-spacing: 0;
font-family: var(--f-serif); font-size: 16px; color: #000;
}
.news-pager__arw {
width: 66px; padding: 0; text-align: center;
font-family: var(--f-serif); font-size: 20px; color: #000;
}
.news-row {
grid-template-columns: max-content max-content 1fr 24px;
grid-template-areas:
"date cat . arw"
"title title title arw";
row-gap: 14px; column-gap: 13px;
min-height: 122px; align-items: center; align-content: center;
padding: 16px 0; border-bottom: 1px solid #DAD8D8;
}
.news-row__date { grid-area: date; font-family: var(--f-serif); font-weight: 600; font-size: 12px; color: #838383; }
.news-list .news-row__cat {
grid-area: cat; display: inline-block;
border: 1px solid var(--navy); border-radius: 10px;
font-family: var(--f-sans); font-weight: 500; font-size: 14px; letter-spacing: .42px;
color: var(--navy); padding: 5px 10px; min-width: 76px; text-align: center;
}
.news-row__btn { display: none; }
.news-row__title { grid-area: title; font-family: var(--f-serif); font-weight: 600; font-size: 15px; color: var(--navy); }
.news-row__arw { grid-area: arw; font-size: 24px; }
.cform { padding: 30px 24px 70px; }
.cform__label { font-size: 17px; }
/* 送信 button — SP size per SP-2 (~282px, same rounded-rect style as PC) */
.cform__submit { width: 282px; max-width: 100%; font-size: 20px; padding: 18px 40px; border-radius: 12px; }
.cform__msg { font-size: 15px; }
/* 項目 radios — SP 2-col grid per お問合せ/SP-2 (15px keeps 取材・メディア出演 on one line) */
.cform__radios { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
.cform__radio { font-size: 15px; white-space: nowrap; }
/* contact form — SP polish per Figma (larger round radios, navy accent) */
.cform input[type="radio"], .cform input[type="checkbox"] {
width: 22px; height: 22px; accent-color: var(--navy); vertical-align: middle;
}
/* file attach — SP design shows plain gray text in the box, no inner button border */
.cform__file { gap: 12px; padding: 10px 12px; }
.cform__file-btn { border: 0; padding: 0; }
/* footer swap — SP shows the shared .bl2-footer (Contact CTA + footer per お問合せ/SP-2);
the simple .site-footer is PC-only on this page. .bl2-footer carries inline
display:none, so before this CSS lands nothing double-renders. */
.contact-page .site-footer { display: none; }
.contact-page .bl2-footer { display: block !important; }
/* ---- news detail modal — SP per Figma 37:1758 (compact card, title rule) ---- */
.bl-modal { width: min(360px, 100%); padding: 48px 15px 34px; border-radius: 4px; }
.bl-modal-close { top: 10px; right: 10px; }
.bl-modal-meta { gap: 13px; margin-bottom: 14px; }
.bl-modal-date { font-size: 15px; }
.bl-modal-cat { font-size: 14px; letter-spacing: .42px; border-radius: 10px; padding: 6px 12px; min-width: 76px; }
.bl-modal-title { font-size: 22px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #DAD8D8; }
.bl-modal-content { font-size: 15px; line-height: 1.9; }
.bl-modal-nav { display: none; } /* Figma SP modal has no prev/next */
/* ---------- services v2 — SP (390 ref, Figma 37:1833) ---------- */
.sp-only { display: inline; }
.pc-only { display: none; }
/* SP bg: the 1366×768 paper texture (object-fit:fill) stretched ~20× over the
4500px page smears into streaks and goes white mid-page (top stayed cream) —
non-uniform + off-centre. Figma SP bg is a flat soft cream: drop the texture
on mobile and use a clean, slightly-less-creamy uniform ground. PC unchanged. */
.svc2-page__bg { display: none; }
.svc2-page { background-color: #FCF9F5; }
.svc2-fv { margin-top: 63px; height: 408px; }
/* the FV artwork (hands/keyboard) sits in the image's LEFT ~50%; object-position
center cropped it so the artwork shoved to the container's left (com x≈149 vs
the Figma's centred x≈184). Anchor left so the full artwork spans the width,
centred like the reference. */
.svc2-fv__img { opacity: .27; object-position: left center; }
.svc2-fv__text {
left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 337px; max-width: calc(100% - 30px);
}
.svc2-fv__title { font-size: 32px; line-height: 102px; letter-spacing: -1.28px; }
.svc2-fv__sub { margin-top: 0; font-size: 15px; letter-spacing: -1.5px; }
.svc2-intro { margin-top: 107px; padding: 0 15px; }
.svc2-intro__title { font-size: 32px; letter-spacing: 0; }
.svc2-intro__sub { font-size: 15px; margin-top: 30px; }
.svc2-item {
flex-direction: column; gap: 20px; min-height: 0;
margin: 60px auto 0; padding: 0 15px; width: 100%; max-width: 390px;
text-align: center;
}
.svc2-item--drama { margin-top: 60px; }
.svc2-item__media { flex: 0 0 auto; width: 200px; height: 250px; }
.svc2-item__body { width: 360px; max-width: 100%; gap: 20px; align-items: center; }
.svc2-item__title { font-size: 32px !important; letter-spacing: 0; text-shadow: 4px 4px 4px rgba(0,0,0,.25); }
.svc2-item--drama .svc2-item__title { letter-spacing: 4.16px; }
.svc2-item__catch { font-size: 20px !important; letter-spacing: 0 !important; }
.svc2-item__text { font-size: 15px; line-height: 32px; letter-spacing: -1.2px; text-align: center; }
.svc2-item--drama .svc2-item__text > p { font-size: 13px; letter-spacing: -1.2px; }
.svc2-item--sns .svc2-item__text > p { font-size: 14px; }
.svc2-item__text ul { list-style: none !important; padding: 0 !important; margin-top: 32px; }
/* ---------- footer v2 — SP (Figma 37:2243) ---------- */
.bl2-footer { height: auto; margin-top: 90px; padding: 60px 15px 25px; }
.bl2-footer__wm { display: none; }
.bl2-footer__eyebrow {
display: block;
font-family: var(--f-cormorant); font-weight: 700;
font-size: 16px; letter-spacing: 2.08px; color: var(--gray); text-align: center;
}
.bl2-footer__cta { padding-top: 0; gap: 15px; }
.bl2-footer__title { font-size: 24px; letter-spacing: 2.16px; }
.bl2-footer__sub { font-size: 15px; }
.bl2-footer__btn { margin-top: 35px; padding: 20px 30px; font-size: 15px; filter: none; }
/* width now comes from the ≤767 block below, after the ≤1100 rules */
.bl2-footer__rule { position: static; transform: none; margin: 65px auto 0; }
.bl2-footer__brand { position: static; transform: none; justify-content: center; margin-top: 65px; gap: 15px; }
.bl2-footer__brand img { width: 84px; height: 84px; } /* 2026-07-22 client: bigger logo */
.bl2-footer__brand span { font-size: 24px; color: #ffeaea; }
.bl2-footer__nav {
position: static; transform: none; margin: 45px auto 0;
/* v4.4: centered flex-wrap (was a 3-col grid that spread the links edge-to-
edge); matches .footer-nav so the SP footer menu reads centred everywhere */
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 20px 15px; max-width: 380px; padding: 0 12px; /* 380 (was 360) so row 1 fits 4 items like About */
}
/* v4.4: SP footer nav = same Bodoni italic as About's .footer-nav (was
Noto Serif upright bold — the odd one out; every PC footer + About SP are
already Bodoni italic, so this makes the footer menu identical site-wide) */
.bl2-footer__nav a { width: auto; height: auto; padding: 0; font-family: var(--f-bodoni); font-style: italic; font-weight: 500; font-size: 20px; } /* padding:0 clears the ≤1100 0 14px so links are gap-spaced like .footer-nav */
.bl2-footer__copy { position: static; transform: none; display: block; text-align: center; margin-top: 40px; font-size: 10px; }
}
/* ============================================================
TOP-2 — home (Figma TOP-2 37:2584 PC 1440 / TOP/SP-2 37:2047 SP 390)
FV animation = services-style (data-reveal fade-ups, no intro veil)
============================================================ */
.top2-page { position: relative; background-color: #fdf7f0; overflow: hidden; }
/* cover, not fill: stretching the 1366x768 texture over the full page height
smears it into vertical streaks and washes the peach out to white below the
fold. Figma scales this fill to cover — that keeps the warm tone all the way
down (verified against the TOP-2 render). */
.top2-page__bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0; pointer-events: none;
}
.top2-fv, .top2-svc, .top2-plans, .top2-works, .top2-about, .top2-news, .top2-page .bl2-footer { position: relative; z-index: 1; }
.top2-svc, .top2-plans, .top2-works, .top2-about, .top2-news { scroll-margin-top: 130px; }
/* ---------- FV ---------- */
/* full-bleed like the About hero: the photo starts at the very top, behind
the transparent header (client 2026-07-17). Content offsets +117 keep the
title/catch/CTA at their original visual positions. */
.top2-fv { height: 1078px; overflow: hidden; }
.top2-fv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; }
.top2-fv__inner { position: relative; max-width: 1440px; height: 100%; margin: 0 auto; }
.top2-fv__title {
position: absolute; left: 50%; top: 450px; transform: translate(-50%, -50%);
font-family: var(--f-display); font-weight: 700; font-size: 96px; line-height: 1.2;
color: #fff; white-space: nowrap; margin: 0;
}
.top2-fv__catch {
position: absolute; left: 50%; top: 593px; transform: translate(-50%, -50%);
/* v5.4 client: PC catch typeface gothic→明朝 (serif) to match SP — family only */
/* v5.6 client: PC catch colour navy→white to match SP — colour only, type untouched */
font-family: var(--f-serif); font-weight: 400; font-size: 48px; line-height: 1.94;
letter-spacing: 4.32px; color: #fff;
text-shadow: 4px 4px 4px rgba(0,0,0,.25); white-space: nowrap;
}
.top2-fv .btn-pill {
position: absolute; right: 50px; top: 810px;
width: 362px; height: 94px; justify-content: center;
padding: 0; font-size: 24px; letter-spacing: 3.12px;
filter: drop-shadow(4px 4px 2px rgba(0,0,0,.25));
}
/* ---------- shared heading / watermark ---------- */
.top2-head { position: relative; text-align: center; color: var(--navy); padding: 0 20px; }
.top2-head__title { font-family: var(--f-serif); font-weight: 600; font-size: 48px; line-height: 1.94; letter-spacing: 4.32px; }
.top2-head__sub { margin-top: 30px; font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 39px; }
.top2-wm {
position: absolute; left: 50%; transform: translate(-50%, -50%);
font-family: var(--f-cormorant); font-style: italic; font-weight: 400;
line-height: 1; color: rgba(156,156,156,.1); white-space: nowrap; pointer-events: none;
}
/* ---------- SERVICE ---------- */
.top2-svc { padding-top: 117px; }
.top2-svc .top2-wm { top: 251px; font-size: 350px; letter-spacing: 28px; color: rgba(131,131,131,.1); }
.top2-svc__grid {
position: relative; max-width: 1242px; margin: 44px auto 0;
display: grid; grid-template-columns: 551px 551px; gap: 0 140px; justify-content: center;
}
.top2-card { position: relative; width: 551px; height: 948px; text-align: center; color: var(--navy); }
.top2-card__num {
position: absolute; left: 111px; top: 296px; width: 330px; height: 597px;
display: flex; align-items: center; justify-content: center;
font-family: var(--f-serif); font-weight: 400; font-size: 500px; line-height: 1;
color: rgba(218,216,216,.35); pointer-events: none;
}
.top2-card__img { position: relative; width: 100%; height: 495px; object-fit: contain; }
.top2-card__body { position: relative; margin-top: 15px; display: flex; flex-direction: column; gap: 30px; }
.top2-card__en { font-family: var(--f-serif); font-weight: 700; font-size: 24px; letter-spacing: 7.2px; text-shadow: 0 4px 4px rgba(0,0,0,.25); }
.top2-card__title { font-family: var(--f-serif); font-weight: 700; font-size: 48px; text-shadow: 0 4px 4px rgba(0,0,0,.25); }
.top2-card__text { font-family: var(--f-serif); font-weight: 600; font-size: 20px; line-height: 30px; letter-spacing: -1.2px; }
/* ---------- PLAN ---------- */
.top2-plans { padding: 195px 0 96px; }
.top2-plans .top2-wm { top: 280px; font-size: 350px; letter-spacing: 122.5px; }
.top2-plans .top2-head__sub { margin-top: 50px; line-height: normal; }
.top2-plans__row { position: relative; margin: 128px auto 0; display: flex; justify-content: center; align-items: stretch; gap: 20px; }
.top2-plan {
position: relative; width: 406px; min-height: 742px;
background: #fff; border: 2px solid var(--lavender); border-radius: 12px;
padding-top: 106px; color: var(--navy);
display: flex; flex-direction: column;
}
.top2-plan--std { border-width: 10px; border-radius: 8px; padding-top: 98px; }
.top2-plan__head {
position: absolute; top: -2px; left: -2px; right: -2px; height: 108px;
background: var(--lavender); border-radius: 8px 8px 0 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--f-serif); font-weight: 700; font-size: 32px; letter-spacing: 4.16px; color: #fff;
}
.top2-plan--std .top2-plan__head { top: -10px; left: -10px; right: -10px; letter-spacing: -0.96px; }
.top2-plan__head::after { content: none; }
/* body fills the card so the CTA can sit on a fixed baseline (see __cta) */
.top2-plan__body {
width: 333px; margin: 71px auto 0; padding-bottom: 49px; flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 42px;
}
.top2-plan--std .top2-plan__body { gap: 30px; margin-top: 48px; }
.top2-plan--prem .top2-plan__body { gap: 20px; margin-top: 13px; }
.top2-plan__sub { font-family: var(--f-serif); font-weight: 400; font-size: 20px; line-height: 1.36; letter-spacing: 3px; text-align: center; }
.top2-plan--std .top2-plan__sub, .top2-plan--prem .top2-plan__sub { line-height: 1; letter-spacing: 2px; }
.top2-plan__line { width: 219px; height: 1px; background: rgba(31,42,68,.45); }
.top2-plan__list { width: 275px; display: flex; flex-direction: column; gap: 5px; }
.top2-plan--prem .top2-plan__list { gap: 3px; }
.top2-plan__item {
display: flex; align-items: center; gap: 15px;
font-family: var(--f-serif); font-weight: 400; font-size: 16px; letter-spacing: 2.08px; white-space: nowrap;
}
.top2-plan__item img { width: 30px; height: 30px; object-fit: cover; flex: 0 0 30px; }
.top2-plan__item--sm { font-size: 14px; letter-spacing: 0; }
.top2-plan__reco { display: flex; flex-direction: column; gap: 11px; align-items: center; }
.top2-plan__reco-head {
display: flex; align-items: center; justify-content: center;
font-family: var(--f-serif); font-size: 12px; color: #000; letter-spacing: -0.12px;
}
.top2-plan__reco-head img { width: 29px; height: 26px; object-fit: cover; }
.top2-plan__reco-text { font-family: var(--f-serif); font-size: 14px; color: #000; line-height: 25px; text-align: center; }
/* margin-top:auto pins all three CTAs to one baseline regardless of how many
feature rows a plan has (Figma aligns them; premium styling unchanged). */
.top2-plan__cta {
display: block; width: 100%; margin-top: auto; padding: 15px 25px;
border-radius: 100px; text-align: center;
box-shadow: 0 8px 20px rgba(187,160,175,.35);
font-family: var(--f-serif); font-weight: 600; font-size: 14px; letter-spacing: 1.82px;
position: relative; overflow: hidden;
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.top2-plan__cta, .top2-plan__cta:hover, .top2-plan__cta:focus { color: #fff !important; background: linear-gradient(135deg, #C8B6D6, #B8A6C9); }
.top2-plan__cta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(187,160,175,.55); }
.top2-plan__cta::after {
content: ""; position: absolute; top: 0; left: -85%; width: 60%; height: 100%;
background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.5) 50%, transparent 85%);
transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.top2-plan__cta:hover::after { animation: bl-flash .75s var(--ease-out); }
.top2-plans__note {
position: relative; margin-top: 56px; text-align: center;
font-family: var(--f-serif); font-weight: 500; font-size: 24px; letter-spacing: 3.6px; color: var(--navy);
}
/* ---------- WORK ---------- */
.top2-works { padding: 199px 0 110px; }
.top2-works .top2-wm { top: 291px; font-size: 350px; letter-spacing: 45.5px; }
.top2-works .top2-head__sub { margin-top: 27px; line-height: normal; }
.top2-works__note { margin-top: 27px; text-align: center; font-family: var(--f-serif); font-weight: 600; font-size: 16px; letter-spacing: 1.12px; color: var(--navy); }
.top2-works__rows { position: relative; margin-top: 141px; display: flex; flex-direction: column; gap: 20px; }
.top2-wrow { position: relative; min-height: 461px; display: flex; align-items: center; justify-content: center; gap: 65px; color: var(--navy); }
.top2-wrow--sns, .top2-wrow--cast { gap: 20px; }
.top2-wrow--pv { gap: 30px; }
.top2-wrow__text { display: flex; flex-direction: column; gap: 36px; text-align: left; }
.top2-wrow--drama .top2-wrow__text { width: 403px; }
.top2-wrow--sns .top2-wrow__text { width: 449px; }
.top2-wrow--pv .top2-wrow__text { width: 427px; }
.top2-wrow--cast .top2-wrow__text { width: 422px; }
.top2-wrow__title { font-family: var(--f-serif); font-weight: 700; font-size: 36px; }
.top2-wrow--sns .top2-wrow__title { letter-spacing: 4.68px; }
.top2-wrow--pv .top2-wrow__title { letter-spacing: -0.72px; text-align: center; }
.top2-wrow__body { font-family: var(--f-serif); font-weight: 400; font-size: 20px; letter-spacing: -1px; }
.top2-wrow--sns .top2-wrow__body { letter-spacing: 2.6px; }
.top2-wrow__cards { display: flex; align-items: center; gap: 20px; }
.top2-wrow--pv .top2-wrow__cards, .top2-wrow--cast .top2-wrow__cards { gap: 15px; }
.top2-wrow__ind { display: none; }
.top2-wcard { position: relative; flex: 0 0 271px; width: 271px; height: 420px; border-radius: 12px; }
.top2-wcard__img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.top2-wcard__cap {
position: absolute; left: 0; right: 0; top: 336px; text-align: center;
font-family: var(--f-serif); font-weight: 700; font-size: 12px; letter-spacing: 1.56px; color: #fff;
}
.top2-wcard--sns { background: var(--lavender); }
.top2-wcard__t24 { position: absolute; left: 0; right: 0; top: 20px; text-align: center; font-family: var(--f-serif); font-weight: 700; font-size: 24px; color: #fff; }
.top2-wcard__t20 { position: absolute; left: 0; right: 0; top: 21px; text-align: center; font-family: var(--f-serif); font-weight: 700; font-size: 20px; color: #fff; }
.top2-wcard__meta {
position: absolute; left: 0; right: 0; top: 77px; text-align: center;
font-family: var(--f-serif); font-weight: 700; font-size: 12px; letter-spacing: 1.56px; color: #fff; line-height: 18px;
}
.top2-wcard__shot { position: absolute; left: 17px; top: 179px; width: 237px; height: 200px; object-fit: cover; }
.top2-pvcard { flex: 0 0 422px; width: 422px; }
.top2-pvcard__img { width: 100%; height: 218px; object-fit: cover; border-radius: 12px 12px 0 0; display: block; }
.top2-pvcard__bar {
background: var(--navy); border-radius: 0 0 12px 12px; padding: 10px; text-align: center;
font-family: var(--f-serif); font-weight: 700; font-size: 24px; letter-spacing: 3.12px; color: #fff;
}
/* both sources are portraits dropped into a 422x296 landscape slot; centring the
crop cuts the models' heads off. Figma anchors cast1 at the top and cast2 at
20% (solved by matching the crops against the TOP-2 render). */
.top2-castimg { flex: 0 0 422px; width: 422px; height: 296px; object-fit: cover; object-position: center top; border-radius: 12px; }
.top2-castimg + .top2-castimg { object-position: center 20%; }
.top2-wrow__model { position: absolute; left: calc(50% + 267px); top: 396px; font-family: var(--f-serif); font-size: 16px; letter-spacing: -1.6px; color: #000; }
.top2-works__foot { position: relative; margin-top: 23px; text-align: center; font-family: var(--f-serif); font-weight: 400; font-size: 32px; color: #000; padding: 0 20px; }
/* ---------- ABOUT ---------- */
.top2-about { padding: 177px 0 170px; }
.top2-about .top2-wm { top: 224px; font-size: 300px; letter-spacing: 39px; }
.top2-about__inner {
position: relative; max-width: 1094px; margin: 136px auto 0; padding: 0 20px;
display: flex; flex-direction: column; align-items: center; gap: 100px; color: var(--navy);
}
.top2-about__catchrow { display: flex; align-items: center; justify-content: center; gap: 15px; }
.top2-about__catchrow img { width: 121px; height: 130px; object-fit: contain; }
.top2-about__catch { font-family: var(--f-serif); font-weight: 400; font-size: 40px; letter-spacing: -1.2px; white-space: nowrap; }
.top2-about__defs { font-family: var(--f-serif); font-weight: 500; font-size: 40px; letter-spacing: 7.6px; line-height: 74px; text-align: center; white-space: nowrap; }
.top2-about__defs b { font-family: var(--f-cormorant); font-style: italic; font-weight: 700; color: var(--lavender); }
.top2-about__defs .eq { font-family: var(--f-sans); font-weight: 500; }
.top2-about__body { font-family: var(--f-serif); font-weight: 700; font-size: 28px; letter-spacing: 2.8px; line-height: 2; text-align: center; max-width: 1074px; }
.top2-about__btn {
display: flex; align-items: center; justify-content: center;
width: 397px; height: 66px; border-radius: 60px;
box-shadow: 0 10px 26px rgba(187,160,175,.4);
font-family: var(--f-serif); font-weight: 700; font-size: 24px; letter-spacing: 10.8px;
position: relative; overflow: hidden;
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.top2-about__btn, .top2-about__btn:hover, .top2-about__btn:focus { color: #fff !important; background: linear-gradient(135deg, #C8B6D6, #B8A6C9); }
.top2-about__btn:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(187,160,175,.55); }
.top2-about__btn::after {
content: ""; position: absolute; top: 0; left: -85%; width: 60%; height: 100%;
background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.5) 50%, transparent 85%);
transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.top2-about__btn:hover::after { animation: bl-flash .75s var(--ease-out); }
/* ---------- NEWS ---------- */
.top2-news { padding: 163px 0 150px; }
.top2-news .top2-wm { top: 209px; font-size: 300px; letter-spacing: 69px; }
.top2-news__head { position: relative; max-width: 1215px; margin: 0 auto; text-align: center; color: var(--navy); padding: 0 20px; }
.top2-news__more { display: block; margin-top: 15px; text-align: right; font-family: var(--f-serif); font-weight: 600; font-size: 24px; color: var(--navy); transition: opacity .3s; }
.top2-news__more:hover { opacity: .7; }
.top2-news__list-wrap { position: relative; max-width: 1337px; margin: 180px auto 0; padding: 0 30px; }
.top2-news .news-list { background: transparent; max-width: none; padding: 0; display: flex; flex-direction: column; gap: 42px; }
/* fixed date/badge tracks so every title starts on the same x, whatever the
category label's length (Figma badge = 136px; 実績 would otherwise pull its
title 46px left of お知らせ's). A longer label just overflows into the gap. */
.top2-news .news-row { display: grid; grid-template-columns: 122px 136px 1fr; align-items: center; gap: 0 88px; padding: 0; border: 0; background: none; }
.top2-news .news-row:hover { background: none; opacity: .75; }
.top2-news .news-row__btn, .top2-news .news-row__arw { display: none; }
.top2-news .news-row__date { font-family: var(--f-serif); font-weight: 600; font-size: 24px; color: #838383; }
.top2-news .news-row__cat {
display: inline-flex; align-items: center; justify-content: center;
width: max-content; min-width: 136px; height: 53px; justify-self: start;
background: #fff; border: 1px solid var(--navy); border-radius: 18px;
padding: 0 20px; font-family: var(--f-serif); font-weight: 600; font-size: 24px; color: var(--navy); white-space: nowrap;
}
.top2-news .news-row__title { font-family: var(--f-serif); font-weight: 600; font-size: 24px; color: var(--navy); max-width: 870px; }
/* the cat badge only renders inside .top2-news (news page grid stays intact) */
.news-row__cat { display: none; }
/* ---------- TOP-2 tablet ---------- */
@media (max-width: 1330px) and (min-width: 768px) {
.top2-fv__title { font-size: 72px; }
.top2-fv__catch { font-size: 34px; }
.top2-svc__grid { grid-template-columns: 1fr 1fr; gap: 0 60px; max-width: 96%; }
.top2-card { width: auto; height: auto; padding-bottom: 60px; }
.top2-card__num { left: 50%; transform: translateX(-50%); top: 200px; font-size: 340px; height: 420px; }
.top2-card__img { height: 360px; }
.top2-card__title { font-size: 36px; }
.top2-card__text { font-size: 17px; }
.top2-plans__row { flex-wrap: wrap; }
.top2-wrow { flex-wrap: wrap; gap: 30px; padding: 0 24px; }
.top2-wrow__model { position: static; width: 100%; text-align: center; margin-top: 6px; }
.top2-wm { font-size: 220px !important; }
.top2-about__body { font-size: 22px; }
.top2-about__defs { font-size: 30px; line-height: 58px; }
.top2-about__catch { font-size: 30px; }
.top2-news .news-row { gap: 40px; }
}
/* ---------- TOP-2 SP (390 ref) ---------- */
@media (max-width: 767px) {
/* SP ground: client wants the mobile bg WHITE, not the warm cream (#fdf7f0 +
peach texture). Drop the texture on mobile + flat near-white ground. The dark
sections (FV/plans/footer) carry their own opaque bg, so they're unaffected.
PC keeps the texture + cream (base rule untouched). */
.top2-page__bg { display: none; }
.top2-page { background-color: #FCFAF8; }
.top2-fv { margin-top: 0; height: 569px; }
/* v4.0: TOP/SP-2 stack is tighter — title y152 / catch y255 / pill y385 */
.top2-fv__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 52px; padding: 55px 15px 20px; }
.top2-fv__title, .top2-fv__catch { position: static; transform: none; }
.top2-fv .btn-pill { position: static; }
.top2-fv__title { font-size: 40px; }
.top2-fv__catch {
/* 2026-07-22 client: SP hero catch → white (navy was unreadable on the
chiffon crop; PC keeps navy — client said the lighter PC crop is fine) */
font-family: var(--f-serif); font-weight: 700; font-size: 32px; line-height: 1.63;
letter-spacing: .96px; text-align: center; white-space: normal; color: #fff; text-shadow: 4px 4px 4px rgba(0,0,0,.25);
}
.top2-fv .btn-pill { width: 262px; height: 68px; font-size: 20px; letter-spacing: 2.6px; }
.top2-head__title { font-size: 32px; letter-spacing: 2.88px; }
.top2-head__sub { margin-top: 25px; font-size: 15px; line-height: normal; }
/* SERVICE */
.top2-svc { padding-top: 80px; }
.top2-svc .top2-wm { top: 151px; font-size: 96px; letter-spacing: 10.56px; }
.top2-svc__grid { margin-top: 50px; display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 100%; }
.top2-card { width: 349px; height: auto; min-height: 369px; }
.top2-card__num { left: 62px; top: 95px; width: 203px; height: 260px; font-size: 300px; }
.top2-card__img { width: 179px; height: 163px; margin: 0 auto; }
.top2-card__body { margin-top: 15px; gap: 30px; }
.top2-card__en { font-size: 15px; letter-spacing: 4.5px; }
.top2-card__title { font-size: 32px; }
.top2-card__text { font-size: 15px; letter-spacing: -0.9px; line-height: 30px; }
/* PLAN — collapsed lavender bars, tap to expand (accordion) */
.top2-plans { padding: 60px 15px 40px; }
.top2-plans .top2-wm { top: 95px; font-size: 96px; letter-spacing: 33.6px; }
.top2-plans .top2-head__title { font-size: 32px; letter-spacing: 0; }
.top2-plans .top2-head__sub { margin-top: 25px; font-size: 15px; }
.top2-plans__row { margin-top: 50px; flex-direction: column; align-items: center; gap: 50px; }
.top2-plan { width: 360px; min-height: 0; border: 0; border-radius: 8px; background: transparent; padding-top: 0; }
.top2-plan--std { padding-top: 0; }
.top2-plan__head {
position: relative; top: 0 !important; left: 0 !important; right: 0 !important;
height: 108px; border-radius: 8px; cursor: pointer;
font-weight: 400; font-size: 28px; letter-spacing: 3.64px;
}
.top2-plan--std .top2-plan__head { letter-spacing: -0.84px; }
.top2-plan__head::after { content: " ▼"; font-size: 24px; }
.top2-plan.is-open .top2-plan__head { border-radius: 8px 8px 0 0; }
.top2-plan.is-open .top2-plan__head::after { content: " ▲"; font-size: 24px; }
.top2-plan__body { display: none; }
.top2-plan.is-open { background: #fff; border: 2px solid var(--lavender); }
.top2-plan.is-open .top2-plan__head { margin: -2px 0 0 -2px; width: calc(100% + 4px); }
.top2-plan.is-open .top2-plan__body { display: flex; width: 300px; margin-top: 30px; gap: 25px; padding-bottom: 30px; }
.top2-plan__sub { font-size: 22px; line-height: 1.36; }
.top2-plan--std .top2-plan__sub, .top2-plan--prem .top2-plan__sub { font-size: 20px; line-height: 1.3; }
.top2-plans__note { margin-top: 40px; font-size: 15px; letter-spacing: 1.5px; }
/* WORK */
.top2-works { padding: 80px 0 60px; }
.top2-works .top2-wm { top: 105px; font-size: 96px; letter-spacing: 12.48px; }
.top2-works .top2-head__title { font-size: 24px; letter-spacing: 3.12px; font-weight: 700; }
.top2-works .top2-head__sub { margin-top: 50px; font-size: 15px; }
.top2-works__note { display: none; }
.top2-works__rows { margin-top: 90px; gap: 70px; }
.top2-wrow { flex-direction: column; align-items: center; gap: 30px; min-height: 0; }
.top2-wrow__text { width: 360px !important; max-width: calc(100% - 30px); text-align: center; gap: 26px; }
.top2-wrow__title { font-size: 24px !important; letter-spacing: 3.12px !important; text-align: center !important; }
.top2-wrow__body { font-size: 15px !important; letter-spacing: 1.95px !important; }
.top2-wrow--cast .top2-wrow__body { letter-spacing: 0 !important; }
.top2-wrow > div { width: 100%; min-width: 0; max-width: 100%; }
.top2-wrow__cards { width: 100%; max-width: 100%; overflow-x: auto; justify-content: flex-start; padding: 0 15px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.top2-wrow__cards::-webkit-scrollbar { display: none; }
.top2-wrow--pv .top2-wrow__cards, .top2-wrow--cast .top2-wrow__cards {
flex-direction: column; overflow: visible; align-items: center; gap: 15px; padding: 0 15px;
}
.top2-wrow__ind { display: block; width: 80px; height: 3px; margin: 10px auto 0; background: var(--navy); border-radius: 2px; opacity: .6; }
.top2-wrow--pv .top2-wrow__ind, .top2-wrow--cast .top2-wrow__ind { display: none; }
.top2-pvcard { flex: 0 0 auto; width: 360px; max-width: 100%; }
.top2-pvcard__img { height: 317px; }
.top2-castimg { flex: 0 0 auto; width: 360px; max-width: 100%; height: 202px; }
.top2-wrow__model { position: static; width: 360px; max-width: 100%; margin-top: 0; font-size: 15px; letter-spacing: 0; text-align: left; }
.top2-works__foot { margin-top: 70px; font-size: 15px; }
/* ABOUT */
.top2-about { padding: 100px 0 90px; }
.top2-about .top2-wm { top: 116px; font-size: 96px; letter-spacing: 12.48px; }
.top2-about .top2-head__title { font-size: 24px; letter-spacing: 2.16px; }
.top2-about__inner { margin-top: 90px; gap: 70px; max-width: 390px; }
.top2-about__catchrow img { display: none; }
.top2-about__catch { font-size: 32px; letter-spacing: -0.96px; white-space: normal; text-align: center; }
.top2-about__defs { font-size: 15px; letter-spacing: 2.85px; line-height: 29px; white-space: normal; }
.top2-about__body { font-size: 15px; letter-spacing: 1.5px; line-height: 1.95; }
.top2-about__btn { width: 218px; height: 45px; font-size: 15px; letter-spacing: 6.75px; }
/* NEWS */
.top2-news { padding: 66px 0 90px; }
.top2-news .top2-wm { top: 91px; font-size: 96px; letter-spacing: 22.08px; }
.top2-news__head { max-width: 390px; }
.top2-news__head .top2-head__title { font-size: 24px; letter-spacing: 2.16px; }
.top2-news__more { font-size: 10px; margin-top: 15px; }
.top2-news__list-wrap { margin-top: 72px; padding: 0 30px; max-width: 390px; margin-left: auto; margin-right: auto; }
.top2-news .news-list { gap: 42px; }
.top2-news .news-row { grid-template-columns: 1fr; justify-items: start; gap: 20px; }
.top2-news .news-row__date { font-size: 15px; }
.top2-news .news-row__cat { min-width: 0; height: auto; padding: 6px 16px; font-size: 15px; }
.top2-news .news-row__title { font-size: 20px; text-align: left; }
}
/* ============================================================
PC TYPE SCALE — align News / Services / Contact / Works to ABOUT
============================================================
Client 2026-07-18: "the font on the ABOUT page appears slightly larger than
on the other pages — make every page the same as ABOUT."
ABOUT's PC scale is the reference (measured live at /about/ @1440):
hero sub / lead ..... 24px (.hero__sub)
body copy ........... 24px (.mv__text, .ceo__body, .ceo__sign)
fine print .......... 18px (.contact__sub)
The other pages were running 15–22px for the same roles.
SIZE ONLY — family, weight, colour and letter-spacing are left exactly as the
Figma-matched rules above set them. PC-only: the SP scale was already
consistent (news/contact leads 15px against About's 12px sub), and several of
the rules below have no SP override, so the whole block is gated at 768 to
keep mobile byte-identical. Fixed grid tracks that carry resized text are
widened just enough to hold it — nothing else moves. */
@media (min-width: 768px) {
/* ---- NEWS (and /services/, which renders the same お知らせ-2 design) ---- */
.news-hero__lead { font-size: 24px; } /* 22 → = .hero__sub */
.news-tab { font-size: 20px; } /* 17 */
/* date + badge tracks grow with the type (128/148 were sized for 16/15px) */
.news-row { grid-template-columns: 140px 170px 1fr 24px; }
.news-row__date { font-size: 24px; } /* 16 → = home's rows */
.news-page .news-list .news-row__cat { min-width: 150px; font-size: 20px; } /* 15 */
.news-row__title { font-size: 24px; } /* 17 → = home + About body */
/* /services/ still renders the older static rows, which show ここをクリック in the
badge slot instead of a category pill — give it the badge's size (it had none
and was falling back to the inherited 16px). */
.news-row__btn { font-size: 20px; }
/* article view (PC opens the detail in-page, not as a modal) */
.news-detail__date { font-size: 24px; } /* 20 */
.news-detail__cat { min-width: 150px; font-size: 20px; } /* 16 */
.news-detail__body { font-size: 24px; } /* 17 → = About body */
.news-detail__nav button { font-size: 18px; } /* 16 */
/* ---- CONTACT ---- */
.contact-hero__sub { font-size: 24px; } /* 22 → = .hero__sub */
.cform__label { font-size: 24px; } /* 20 → = About body */
.cform__input, .cform__textarea, .cform__file { font-size: 20px; } /* 16 */
.cform__radio { font-size: 20px; } /* 17 */
/* 17 not 18: the 個人情報保護 sentence is 34 chars and the form's content column
is 602px, so 18px spills "い。" onto a second line as an orphan. */
.cform__note { font-size: 17px; } /* 15 */
.cform__file-btn { font-size: 18px; } /* 16 */
.cform__file-name { font-size: 16px; } /* 14 */
.cform__msg { font-size: 18px; } /* 16 */
/* keep the CF7 fallback markup in step with .cform */
.cform .wpcf7-radio .wpcf7-list-item label,
.cform .wpcf7-acceptance .wpcf7-list-item label { font-size: 20px; }
.cform input.wpcf7-file { font-size: 18px; }
.cform .wpcf7-not-valid-tip { font-size: 15px; }
.cform .wpcf7-response-output { font-size: 16px; }
/* ---- WORKS — the FV sub was the one item under the page's own 24px body ---- */
.svc2-fv__sub { font-size: 24px; } /* 20 */
}
/* Tablet: same scale one step down, and tighter news tracks so the title column
keeps a usable width between 768 and 1100. (Re-states the values the ≤1100
block above sets, which the min-width:768 block would otherwise outrank.) */
@media (min-width: 768px) and (max-width: 1100px) {
.news-row { grid-template-columns: 120px 150px 1fr 24px; gap: 20px; }
.news-row__date { font-size: 20px; }
.news-page .news-list .news-row__cat { min-width: 130px; font-size: 18px; }
.news-detail__body { font-size: 20px; }
.svc2-fv__sub { font-size: 20px; }
}
/* ============================================================
v3.3 — FIGMA 1440 ALIGNMENT: お知らせ-2 (37:2416) / お問合せ-2 (37:2276)
============================================================
Client asked whether the coded pages really match the Figma frames at
1440px. Measured at 1440 (DPR-2 capture, box + ink scans in
scratchpad/compare/): they did not.
Figma was note
news page height 3205 2302
list row pitch 127 95 row 77 + 50 gap
badge radius 18 6
row arrow 40 22
tab 230×65 ~150×48
pager cell 66 44
contact height 4019 2362
field width 971 602 the big one — form ran ~62% scale
field height 66 46
field group gap 81 30
label 32 24
placeholder 32 20
submit 565×115 560×~80
Every number below is read off the Figma node, not eyeballed. This block is
last in the file on purpose: it is the authority for these two pages at PC
width and must outrank the v3.2 type-scale block above.
THREE DELIBERATE DEVIATIONS FROM FIGMA — all are prior client decisions and
must survive this pass:
1. 送信 button stays #BFAECE, not Figma's #BBA0AF. The client rejected the
rose tone ("send button red nhi hona chahiye") in v3.1.
2. News / Contact hero lead stays 24px, not Figma's 20px. The client asked
in v3.1 for parity with About's 24px hero sub, across pages.
3. The header stays transparent-until-scroll (site-wide, v1.9); Figma
draws a solid 117px navy bar on every subpage frame.
Gated at 1100 so the SP build stays byte-identical — the Figma numbers here
are the 1440 frame's, and the ≤1100 blocks above own mobile + tablet. */
@media (min-width: 1101px) {
/* ---------- NEWS — お知らせ-2 ---------- */
/* FV frame is 722px tall under the 117px header, and in Figma the photo is
FULL-BLEED behind it (a 1440×722 object-cover fill), not a half-width column
image — that is why the artwork read as too small. The media wrapper is
lifted out of the 2-col grid and stretched over the whole frame; the copy
column stays in flow above it. */
.news-hero__inner { position: relative; min-height: 722px; padding: 0 var(--pad-x); }
.news-hero .page-hero__media { position: absolute; inset: 0; z-index: 0; }
.news-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.news-hero__text { position: relative; z-index: 1; }
/* Figma does not centre the FV copy in the frame — it sits 38px below centre,
with the text box at x145. Both measured off the render: title ink 148/444,
lead ink 147/557 (grid centring alone put them at 100/406 and 100/501). */
.news-hero__text { padding-left: 56px; transform: translateY(47px); }
/* NEWS: 64px / tracking 15.36px / line-height 102px (was .02em ≈ 1.28px) */
.news-hero__title { font-size: 64px; letter-spacing: 15.36px; line-height: 102px; margin-bottom: 28px; }
/* lead: Figma 20px — held at 24px per the client's cross-page parity request */
.news-hero__lead { font-size: 24px; line-height: 1.94; }
/* filter tabs: 230×65, gap 80, radius 10, ExtraBold 24 / tracking 6px.
Padding places the row at Figma's y871..936 under the 839px-tall FV, and
opens the 185px gap down to the list card at y1121. */
.news-tabs { gap: 80px; padding: 31px var(--pad-x) 185px; }
.news-tab {
width: 230px; height: 65px; padding: 10px 30px; border-radius: 10px;
font-size: 24px; font-weight: 800; letter-spacing: 6px; line-height: 1.94;
box-shadow: 4px 4px 4px rgba(0,0,0,.25);
}
/* 実績 is 2 chars and Figma tracks it out to fill the same 230px cell.
Markup keys the tabs by data-filter, not by their label. */
.news-tab[data-filter="work"] { letter-spacing: 11.76px; }
/* list card 1228 wide, 25px side padding → 1178 rows, 50px apart */
.news-list {
max-width: 1228px; padding: 30px 25px;
display: flex; flex-direction: column; gap: 50px;
}
/* row: date | badge | title | > with a 126px gutter, 10px vertical padding */
.news-row {
grid-template-columns: 130px 136px 1fr 40px; gap: 126px;
padding: 10px 0; border-bottom: 1px solid #DAD8D8;
}
.news-row__date { font-size: 24px; color: #838383; font-family: var(--f-serif); font-weight: 600; }
/* badge drives the row height (it is the tallest cell), so its line-height is
pinned to Figma's "normal" for 24px — inheriting the body's 1.7 made every
row 4px tall and the drift compounds down the list.
136px is also Figma's badge width, and the track stays at it so every title
starts on the same x — but メディア掲載 is 6 chars (≈144px of ink at 24px) and
with nowrap it broke out through the pill's border on both sides. The box
now grows to its own text and keeps the 20px side padding; a long label just
overflows into the 126px gutter, same as .top2-news. */
.news-page .news-list .news-row__cat {
width: max-content; min-width: 136px; justify-self: start;
border-radius: 18px; padding: 10px 20px;
font-size: 24px; line-height: 35px;
}
.news-row__title { font-size: 24px; font-family: var(--f-serif); font-weight: 600; }
.news-row__arw { font-size: 40px; color: #000; }
/* pager: 66×66 cells, radius 20, 32px serif, 45px apart.
119px above puts its centre on Figma's y1918; 267px below carries the page
down to the footer at y2228. */
.news-pager { gap: 45px; padding: 119px 20px 267px; }
.news-pager__num {
width: 66px; height: 66px; border-radius: 20px;
font-family: var(--f-serif); font-weight: 600; font-size: 32px; color: #000;
}
.news-pager__num.is-active { background: var(--gray); color: #000; }
.news-pager__ellipsis, .news-pager__arw { font-family: var(--f-serif); font-size: 32px; color: #000; }
/* detail view (お知らせ詳細-2): card bottom y1805 → cells y1918‑1984 → footer
y2228, so 113 above and 244 below instead of the list page's 119/267. */
body.news-page.is-detail .news-pager { padding: 113px 20px 244px; }
/* ---------- CONTACT — お問合せ-2 ---------- */
/* same full-bleed FV as News. The ![]()
is a direct grid child here, so once it
goes absolute the copy would fall back into column 1 — it is pinned to
column 2, which is where Figma puts it (text box x853). */
.contact-hero__inner { position: relative; min-height: 722px; padding: 0 var(--pad-x); }
.contact-hero__img {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.contact-hero__text { position: relative; z-index: 1; grid-column: 2; }
/* same off-centre FV copy as News: Figma puts the text box at x853, 38px below
the frame's centre (measured title ink 858/438, sub ink 857/559). */
.contact-hero__text { padding-left: 113px; transform: translateY(47px); }
/* お問い合わせ: 64px / tracking 5.76px / line-height 102px */
.contact-hero__title { font-size: 64px; letter-spacing: 5.76px; line-height: 102px; margin-bottom: 28px; }
/* Figma 20px — held at 24px, same client parity request as News above */
.contact-hero__sub { font-size: 24px; line-height: 1.94; }
/* form card 1011 wide → 971 fields; 44px inner padding, 81px between groups.
12px top margin lands the card on Figma's y851 under the 839px FV. */
.cform { max-width: 1011px; margin: 12px auto 0; padding: 44px 20px 178px; }
.cform__field { margin-bottom: 81px; }
/* label 32 + badge 20, 20px gap to the input.
!important because every 必須/任意 span carries an inline font-size:.72em
(added in v2.6 so the badges rendered before that plugin upload landed);
inline wins otherwise and .72em of 32px would be 23px, not Figma's 20. */
/* line-height 46 = Figma's "normal" for 32px Noto Serif. Without it the label
box is 32px tall and every field group lands 14px short (pitch 199 vs 213). */
.cform__label { font-size: 32px; line-height: 46px; margin-bottom: 20px; }
.cform .req, .cform .opt { font-size: 20px !important; margin-left: 20px !important; }
/* input 32px text, 10/20 padding → 66px tall incl. border */
.cform__input, .cform__textarea, .cform__file { font-size: 32px; padding: 10px 20px; }
.cform__textarea { min-height: 256px; } /* pt10 + line + pb200 */
/* 項目: 3 equal columns, 20px gaps, 35px radio + 32px label */
.cform__radios { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cform__radio { font-size: 32px; gap: 10px; }
.cform__radio input { width: 35px; height: 35px; }
/* 取材・メディア出演 is the long one — Figma drops it to 30px / -3px tracking so
it still fits its column ((971-40)/3 = 310px). Matched on the input value:
the markup gives every radio the same class. */
.cform__radio:has(input[value="取材・メディア出演"]) { font-size: 30px; letter-spacing: -3px; }
/* 個人情報保護 block: the heading and the sentence share one
(heading is the ), so they are sized separately — 32 vs 24 per Figma. */
.cform__note { font-size: 24px; }
.cform__note b { font-size: 32px; }
/* 同意する is a .cform__radio too, but Figma sets it at 24px, not 32 */
.cform__radio:has(input[name="agree"]) { font-size: 24px; }
.cform__file-btn { font-size: 32px; padding: 10px; }
.cform__file-name { font-size: 24px; }
/* 送信する 565×115, radius 12, 32px. Colour intentionally NOT Figma's
#BBA0AF — see deviation 1 at the top of this block. */
/* Figma puts 134px between the last field and the button (內容's 44px bottom
padding + the 90px flex gap); the last .cform__field already contributes
its own 81px margin, so 53 completes it.
COLOUR: now Figma's #BBA0AF, at the client's request on 2026-07-18. Note the
history — v3.1 moved this fill OFF a rose tone after the client said the
button looked red. The diagnosis then was that the ROSE DROP SHADOW was what
read as red, so the shadow is kept lavender/neutral here. If "red" comes
back as a complaint, put the fill back to #BFAECE — one line, nothing else
depends on it. */
.cform__submit {
width: 565px; height: 115px; padding: 20px 40px; margin: 53px auto 0;
border-radius: 12px; font-size: 32px;
background: #BBA0AF;
}
.cform__submit:hover { background: #B295A4; }
.cform__msg { max-width: 971px; font-size: 24px; }
/* CF7 fallback markup tracks .cform */
.cform .wpcf7-radio .wpcf7-list-item label,
.cform .wpcf7-acceptance .wpcf7-list-item label { font-size: 32px; }
.cform .wpcf7-radio input[type=radio],
.cform .wpcf7-acceptance input[type=checkbox] { width: 35px; height: 35px; }
.cform input.wpcf7-file { font-size: 32px; }
}
/* ============================================================
v3.3 — FIGMA FOOTER, SITE-WIDE
============================================================
The site runs two footer builds:
a) .bl2-footer — one 977px block. Home uses it. Already Figma-exact.
b) .contact + .site-footer — two sections. News / About / Works / Services
use this pair, and together they measured 810px, not 977.
c) contact-2 shows .site-footer alone (its .bl2-footer is SP-only), 241px
against Figma お問合せ-2's 630px short footer.
This block brings (b) and (c) onto the same landmarks .bl2-footer already
hits, so all three builds agree with Figma:
full footer 977 wm centre 122 · title 84 · rule 527
brand 595 · nav 797 · copy 927
short footer 630 brand 108 · nav 310 · copy 440 (no CTA — you are
already on the contact page)
The pair is split at the divider: .contact owns y0..527 and .site-footer owns
the remaining 450, whose border-top IS Figma's rule at 527.
DEVIATION, consistent with the three listed in the block above: Figma draws
the CTA as a white filled button with navy text. It stays the outline pill —
the client asked for the premium outline treatment site-wide (v1.9), and
.bl2-footer already renders it that way on the home page.
PC only (SP footers are already pixel-matched to the SP frames). */
@media (min-width: 1101px) {
/* ---- CTA half: Figma y0..527 of the 977px footer ---- */
.contact { height: 527px; padding: 84px 20px 0; box-sizing: border-box; }
/* Figma carries the watermark here and no small eyebrow */
.contact__label { display: none; }
.contact__wm {
top: 122px; font-size: 200px; letter-spacing: 26px; font-style: italic;
}
.contact__title {
font-weight: 600; font-size: 48px; line-height: 1.94; letter-spacing: 4.32px;
margin: 0 0 30px;
}
.contact__sub {
font-size: 24px; line-height: 1.5; color: #fff; margin: 0 0 80px;
}
/* the CTA here is a generic .btn-pill (18px); Figma sizes this button at
32px / 30px 60px — the same box .bl2-footer__btn already uses on home, so
the two footer builds now render an identical button. */
.contact .btn-pill { font-size: 32px; padding: 30px 60px; line-height: 1.4; }
/* ---- brand half: Figma y527..977, i.e. 450 tall ---- */
.site-footer { position: relative; height: 450px; padding: 0; box-sizing: border-box; }
.site-footer__logo {
position: absolute; left: 50%; top: 68px; transform: translateX(-50%);
gap: 33px; margin: 0;
}
.site-footer__logo img { height: 120px; }
.site-footer__logo span { font-size: 48px; }
.footer-nav { position: absolute; left: 50%; top: 270px; transform: translateX(-50%); }
.footer-nav ul { gap: 25px; margin: 0; }
.footer-nav a { width: 147px; height: 48px; display: grid; place-items: center; font-size: 32px; }
.site-footer__copy {
position: absolute; left: 50%; top: 400px; transform: translateX(-50%);
font-family: var(--f-serif); font-weight: 700; font-size: 20px;
letter-spacing: 0; color: #fff; white-space: nowrap;
}
/* ---- contact-2: short 630px footer, no CTA half ---- */
.contact-page .site-footer { height: 630px; }
.contact-page .site-footer__logo { top: 108px; }
.contact-page .footer-nav { top: 310px; }
/* Figma tightens the nav cells to 138px on this frame */
.contact-page .footer-nav a { width: 138px; }
.contact-page .site-footer__copy { top: 440px; }
/* v4.2 — SNS row sits between the nav row and the copyright in the
absolute PC layouts (generic 450px footer / contact 630px footer) */
.site-footer__sns { position: absolute; left: 50%; top: 344px; transform: translateX(-50%); margin: 0; }
.contact-page .site-footer__sns { top: 384px; }
}
/* ============================================================
v3.5 — HEADER LOGO to Figma size (PC)
============================================================
Measured on お知らせ-2: the logo mark's ink box is 82×82 (x104..186,
y17..99 — vertically centred in the 117px bar). Ours rendered 44×44 from a
64px box: the PNG carries transparent padding, so the box has to be ~1.86×
the ink to land it. 64 × 82/44 = 119, capped at the header's own 117 so the
bar cannot grow and shift the FV frames calibrated against it (ink ≈80 vs
Figma 82 — 2px on an 82px mark).
PC only: SP keeps its 40px box against the 63px bar. */
@media (min-width: 1101px) {
/* the translate takes out the PNG's own asymmetric padding: at 117px the ink
landed at x111/y23 against Figma's x104/y17. */
.site-header__logo { height: 117px; transform: translate(-7px, -6px); }
}
/* ============================================================
v3.5 — ABOUT FV to Figma (About-2 37:2522), PC
============================================================
The about page ran 178px short of the 5156 frame, and all 178 sat in the FV:
`.hero` resolves `min-height: max(100vh, 900px)` to 900 at a 900px viewport,
where Figma's FV frame (37:2576) is 1078. Everything below simply started
178px early — the Mission / Message / 概要 sections and the footer all measured
the right height once the FV was fixed.
Measured against the render (ink boxes, x40..1400):
Figma was
catch top 527 331 ← the 178 + the line-height below
catch ink width 874 804 ← tracking 4.32px was missing entirely
sub line width 560 571 ← -0.06em, Figma is -0.08em (-1.92px)
pill top 777 598
Title is 96px in Figma (Kaisei Decol Bold), not the 102px we shipped.
`align-items:flex-end` + the 208px bottom padding already matches Figma's
207px below the pill, so fixing the frame height lands the whole stack.
Scoped to .about-page and PC-only. */
@media (min-width: 1101px) {
.about-page .hero { min-height: 1078px; }
.about-page .hero__title { font-size: 96px; }
/* margins are measured from the pill upward, because the stack is bottom-
anchored: with the frame at 1078 the pill already lands on Figma's y777, so
these two gaps place the sub (y628) and the catch (y527) above it. */
.about-page .hero__catch { font-size: 48px; line-height: 1.94; letter-spacing: 4.32px; margin-bottom: 21px; }
.about-page .hero__sub { letter-spacing: -0.08em; margin-bottom: 21px; }
}
/* ============================================================
v3.8 — FOOTER RULE / MISSION-VISION / NEWS BADGE to Figma
============================================================
Client sent three crops ("footer line", "misson", "news box"). All three
render at 0.80 scale off a ~1678px viewport, so every live number below is
the crop measurement / 0.80. Figma numbers are pixel-scans of the 1:1 node
renders (フッター 37:2863, About-2 37:2522, お知らせ-2 37:2416) kept in
scratchpad/figma-*.png.
---- 1. FOOTER DIVIDER ------------------------------------------------
The 1340px width was already right; the LINE ITSELF was not. Scanned across
Figma's footer at row 526:
x 160 200 240 280 320 360 ... 1040 1080 1120 1160 1200 1240
white 0% 6% 37% 63% 87% 100% ... 100% 87% 69% 50% 12% 0%
i.e. a 4px bar of PURE WHITE that fades out to transparent at both ends —
not the flat 1px rgba(255,255,255,.35) hairline we shipped. Vertically the
solid core is y525..527 with partial coverage at 524/528, so the 4px bar
sits at 524 and stays centred on the documented y527 landmark. Stops below
are that ramp mapped onto the 1340 box (x50..1390), symmetrised.
The site runs two footer builds (see the v3.3 block) and only .bl2-footer
had a real rule element; on News / About / Services the divider was
.site-footer's own border-top — 1px at .12 alpha, full-bleed edge to edge,
nothing like Figma. That border is dropped and both builds now draw the
same bar. contact-2's SHORT footer (37:2277) has no CTA half above it and
no rule in Figma, so it is explicitly excluded.
---- 2. MISSION / VISION (About) --------------------------------------
Watermark ink 503×127 and label ink height 30 already matched Figma exactly,
as did label→lead (148) and both line pitches (lead 57 / body 45). Only the
two offsets were out, measured off the column's own text edge:
Figma live fix
label ink from col L 31 / 33 41 -9 (both columns)
wm ink from col L 17 / 16 0 +17
wm ink above label top 65 / 60 45 -17
The wm keeps most of the deliberate v2 drop (top -18 → 61, "wm should sit
centred behind the label"); this only trims the last 17px of it to land on
Figma. PC only — the ≤1100 block owns the SP frame and is untouched.
---- 3. NEWS CATEGORY BADGE -------------------------------------------
Every badge in お知らせ-2 measures 136×53 with a ~13px radius, INCLUDING the
2-char 実績 — Figma sizes the box fixed and centres the label in it. We
shipped `width:max-content; min-width:136px` + 10/20 padding, which rendered
お知らせ 138×57, 実績 136×57 and blew メディア掲載 out to 185×57. Fixing the box
at 136×53 and dropping the padding is what the client asked for ("box size
same ho"). メディア掲載 is 6 chars — 144px of ink at Figma's 24px — and is the
one label the Figma frame never shows, so it steps down to 19px to sit
inside the same 136 box rather than stretching it. */
@media (min-width: 1101px) {
/* ---- 1a. the shared rule, both footer builds ----
Stops traced off the フッター stroke's alpha ramp, column-max over rows
520..532 of the 1:1 1440 render: ink starts at x61, is full white x181,
holds to x1245, gone by x1378. Against the 1318px box that is
0 → 9.1% → 89.8% → 100%.
The fade must start AT the box edge. The shipped 10/23/75/89 stops fade in
from 10% and out by 89%, so ~20% of an already-narrow box drew nothing and
the visible ink collapsed to 1059px against Figma's 1318 — that 20% deficit
is exactly the "line looks too short" the client reported. */
/* 3px, not 4: integrating the stroke's alpha down a core column of the 1:1
render gives 3.17px of ink (rows 524@22% / 525 / 526 / 527@95%). A flat 4px
bar is 26% heavier and — because every row is hard 100% — reads as a blunt
slab next to Figma's crisp hairline, which is the difference the client's
crop actually shows. */
.bl2-footer__rule,
.contact + .site-footer::before {
height: 3px;
background: linear-gradient(90deg,
rgba(255,255,255,0) 0%, #fff 9.1%, #fff 89.8%, rgba(255,255,255,0) 100%);
}
/* Figma's ink sits on rows 525..527, so top:525 for the 3px bar */
.bl2-footer__rule { top: 525px; }
/* build (b): the rule lives on the footer half, straddling the y527 seam
between .contact (527 tall) and .site-footer, so it lands on the same
absolute row as .bl2-footer__rule does inside its one-piece block. */
.contact + .site-footer { border-top: 0; }
.contact + .site-footer::before {
content: "";
position: absolute; left: 50%; transform: translateX(-50%);
top: -2px; width: 1318px; max-width: calc(100% - 60px);
}
/* short 630 footer on contact-2: no CTA half above it, and no rule in Figma */
.contact-page .site-footer { border-top: 0; }
.contact-page .site-footer::before { content: none; }
/* ---- 2. Mission / Vision offsets ---- */
.mv__label { left: 31px; }
.mv__wm { left: 11px; top: 44px; }
/* ---- 3. news badge: fixed 136×53 box, label centred in it ---- */
.news-page .news-list .news-row__cat,
.top2-news .news-row__cat {
width: 136px; min-width: 0; height: 53px;
padding: 0; border-radius: 13px;
font-size: 24px; line-height: 1;
}
.news-page .news-list .news-row[data-cat="media"] .news-row__cat,
.top2-news .news-row[data-cat="media"] .news-row__cat { font-size: 19px; }
}
/* SP: フッター/SP feathers at both ends exactly like the PC stroke — this is the
one real mismatch the client's crop shows. Live ships a SOLID bar with hard
ends (alpha jumps 0→100% inside one pixel at x22 and holds flat to x374),
which reads far blunter than the design at this size.
Column-max over rows 350..361 of the 1:1 390 render: ink spans x24..x371
(348px, 89.2% of the frame) and is fully opaque only x51..x324 — against that
box, 0 → 7.8% → 86.2% → 100%. (Unlike the PC stroke this one is axis-aligned,
so a single-row scan agrees with the column-max here.) */
@media (max-width: 1100px) {
/* 3.5px here, vs 3px on PC — フッター/SP really does draw a proportionally
heavier stroke (3.44px of ink in a 390 frame), which keeps the divider
readable at phone size. Measured the same way as the PC one. */
.bl2-footer__rule,
.contact + .site-footer::before {
height: 3.5px;
background: linear-gradient(90deg,
rgba(255,255,255,0) 0%, #fff 7.8%, #fff 86.2%, rgba(255,255,255,0) 100%);
}
/* the ≥1101 block gives .site-footer position:relative; SP needs it too so
the bar anchors to the footer and not to some outer positioned ancestor. */
.contact + .site-footer { position: relative; border-top: 0; }
.contact + .site-footer::before {
content: "";
position: absolute; left: 50%; transform: translateX(-50%); top: -2px;
width: 91.5vw; max-width: none;
}
.contact-page .site-footer::before { content: none; }
}
/* Phone keeps a ratio rather than fixed px (unlike PC, where the surrounding
footer is a fixed 1440 layout): フッター/SP draws the stroke 348px in a 390
frame = 89.2vw, so it stays proportional across 360–430px handsets and is
exactly 348px at the 390 reference. Has to sit after the ≤1100 block above,
which also sets a width on .contact + .site-footer::before at equal
specificity. */
@media (max-width: 767px) {
.bl2-footer__rule,
.contact + .site-footer::before { width: 89.2vw; max-width: none; }
}
/* ============================================================
v4.0 — SP FIGMA-MATCH (2026-07-19)
Client: "har page ka mobile view Figma SP ke saath pixel-perfect hona
chahiye — font size, section size, font style, background color, lines,
har section ka pixel count." Exclusions per client: contact CTA button and
the footer stay as they are.
Every number is measured off the 1:1 SP-2 node renders (TOP/SP-2 37:2047,
About/SP-2 37:1874, 事業内容/SP-2 37:1833) with compare/{ink,bands}.ps1;
ink height ≈ font-size for kana/kanji. Applies at ≤767 only — the PC
calibration (v3.3/v3.9) is untouched.
NOTE: restores Figma's creamy textured ground on home SP, reversing the
v3.0 "mobile bg whiter" override at the client's request.
============================================================ */
@media (max-width: 767px) {
/* ---- HOME ground: TOP/SP-2 has the same warm texture as PC ---- */
.top2-page__bg { display: block; }
.top2-page { background-color: #fdf7f0; }
/* ---- HOME intro (SERVICE) — catch 30px on a 62px line, 2 lines ---- */
/* clamp: the plans title line ご予算や目的に合わせた is 11 chars — at a fixed
30px it fits 390 but orphans た on 375/360 phones (client crop) */
.top2-svc .top2-head__title, .top2-plans .top2-head__title { font-size: clamp(22px, 7.7vw, 30px); line-height: 62px; }
.top2-svc { padding-top: 82px; }
.top2-svc .top2-wm { top: 176px; }
.top2-svc__grid { margin-top: 62px; gap: 44px; }
.top2-card__title { font-size: 30px; }
.top2-card__text { font-size: 14px; letter-spacing: 0.5px; }
/* ---- HOME plans — lead 14/21, pill label 24 (ink 22), note absent in SP-2 ---- */
.top2-plans .top2-head__title { letter-spacing: 0; }
/* base .top2-head adds 20px sides on top of the section's 15 = 70px chrome;
SP-2's title ink starts x27, so the frame only reserves ~48. Without this
the 11-char ご予算や目的に合わせた line wraps its た on ≤375 phones. */
.top2-plans .top2-head { padding: 0 8px; }
/* SP-2 puts 141px between the casting card and the plans catch (ours was 99,
hidden until the catch's orphaned 3rd line was fixed): catch y2752, pills
y2977 */
.top2-plans { padding-top: 130px; }
.top2-plans .top2-head__sub { margin-top: 30px; font-size: 14px; line-height: 21px; }
.top2-plans__row { margin-top: 54px; }
.top2-plan__head { font-size: 24px; }
.top2-plans__note { display: none; }
/* ---- HOME works rows — heads 23 (ink 22), bodies 14/22, Figma's dash-dots ---- */
.top2-works { padding-top: 100px; }
.top2-works .top2-head__title { font-size: 23px; }
.top2-works .top2-head__sub { margin-top: 44px; }
.top2-works__rows { margin-top: 62px; gap: 56px; }
.top2-wrow__title { font-size: 23px !important; }
.top2-wrow__body { font-size: 14px !important; line-height: 22px !important; letter-spacing: 0 !important; }
.top2-wrow__text { gap: 22px; }
.top2-wrow__model { font-size: 12px; line-height: 22px; }
.top2-works__foot { margin-top: 16px; font-size: 14px; line-height: 22px; }
.top2-wrow__ind { display: none !important; }
/* per-row gaps in SP-2 are wider than the uniform 56 flex gap */
.top2-wrow--pv { margin-top: 46px; }
.top2-pvcard__bar { padding: 22px 10px; } /* SP-2 caption bar is 78 tall */
.top2-wrow--cast .top2-wrow__cards { gap: 10px; }
.top2-castimg { height: 235px; } /* SP-2: 360×235 + 360×260 */
.top2-castimg + .top2-castimg { height: 260px; }
.top2-dots { display: flex; justify-content: center; gap: 9px; margin-top: 12px; }
.top2-dots i { width: 24px; height: 4px; border-radius: 2px; background: #C9C9C9; transition: background .3s; }
.top2-dots i.is-on { background: var(--navy); }
/* ---- HOME about teaser — head 20 (ink 18), catch 30/46, defs+body 14/29,
SP-2 has no 会社概要を見る button ---- */
.top2-about { padding: 100px 0 120px; }
.top2-about .top2-head__title { font-size: 20px; }
.top2-about__inner { margin-top: 84px; gap: 72px; }
.top2-about__catch { font-size: clamp(22px, 7.7vw, 30px); line-height: 46px; }
.top2-about__defs { font-size: 14px; }
/* tracking 0.5 not 1.5: at 1.5 the two longest forced lines run ~344px and
orphan their last character (measured vs SP-2's ~0.3px/char) */
.top2-about__body { font-size: 14px; line-height: 29px; letter-spacing: 0.5px; }
.top2-about__btn { display: none; }
/* ---- HOME news teaser — plain rows on the ground (no white card), stacked
date → 42px pill badge → 19px title, no pager in SP-2 ---- */
.top2-news__head .top2-head__title { font-size: 23px; }
.top2-news__list-wrap { margin-top: 70px; padding: 0 24px; }
.top2-news .news-list { background: transparent; padding: 0; gap: 41px; }
/* areas:none matters — the news-page SP rule's grid-template-areas implies 4
columns even under a 1fr template; the 3 empty ones + their column gaps
were eating 60px and wrapping long titles */
.top2-news .news-row { grid-template-columns: 1fr !important; grid-template-areas: none !important; gap: 20px !important; }
/* the PC grid pins date/badge/title to columns — SP-2 stacks them left.
grid-area:auto resets all four placement lines (the news-page SP rules
assign named areas that would otherwise spill into implicit tracks) */
.top2-news .news-row > * { grid-area: auto !important; grid-column: 1 !important; grid-row: auto !important; justify-self: start !important; max-width: 100% !important; }
.top2-news .news-row__cat { min-width: 0; min-height: 42px; padding: 8px 20px; border-radius: 21px; font-size: 16px; display: inline-flex; align-items: center; }
.top2-news .news-row__title { font-size: 20px; }
.top2-news .news-pager { display: none !important; }
/* SP-2: last title → navy footer = 123; the footer's own 90px top margin is
PC-era — zero it so the section padding is the whole gap. 131 lands the
footer on Figma's y9143 exactly (the residual +23 page diff is all inside
the footer, which stays untouched per the client). */
.top2-news { padding-bottom: 131px; }
.top2-page .bl2-footer { margin-top: 0; }
/* ---- WORKS page — SP-2 shows a solid navy header bar and the textured
ground (the texture was hidden on SP since v1.x) ---- */
body.page-id-997 .site-header { background: #1F2A44; }
.svc2-page__bg { display: block; }
}
/* ============================================================
v4.1 — PRIVACY POLICY PAGE + client SP feedback round
(weight unify + tracking relax; font SIZES untouched = Figma)
============================================================ */
.pp-page { background: #FDFAF5; color: var(--navy); padding-top: 117px; }
.pp-hero { text-align: center; padding: 90px 24px 70px; }
.pp-hero__en {
font-family: var(--f-cormorant); font-style: italic; font-weight: 600;
font-size: 20px; letter-spacing: 4px; color: var(--gray);
}
.pp-hero__title {
margin-top: 14px; font-family: var(--f-serif); font-weight: 600;
font-size: 40px; letter-spacing: 2px; color: var(--navy);
}
.pp-body { max-width: 840px; margin: 0 auto; padding: 0 24px 120px; }
.pp-lead, .pp-sec p, .pp-list li {
font-family: var(--f-serif); font-size: 16px; line-height: 2; color: var(--navy);
}
.pp-lead { margin-bottom: 56px; }
.pp-sec { margin-bottom: 48px; }
.pp-sec h2 {
font-family: var(--f-serif); font-weight: 600; font-size: 20px; line-height: 1.6;
color: var(--navy); margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 1px solid rgba(31,42,68,.18);
}
.pp-sec p + p { margin-top: 10px; }
.pp-list { margin: 10px 0 0; padding-left: 1.4em; list-style: disc; }
.pp-list li { margin-top: 4px; }
.pp-sec a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.pp-sec a:hover { opacity: .7; }
.pp-company { margin-top: 14px; }
.pp-date { margin-top: 64px; text-align: right; font-family: var(--f-serif); font-size: 14px; line-height: 2; color: var(--navy); }
/* footer privacy link (both footer builds) */
.footer-pp {
display: block; text-align: center; margin: 10px 0 8px;
font-family: var(--f-serif); font-size: 12px; letter-spacing: 1px;
color: #fff; opacity: .85; text-decoration: underline; text-underline-offset: 3px;
}
.footer-pp:hover { opacity: 1; }
@media (max-width: 767px) {
.pp-page { padding-top: 63px; }
.pp-hero { padding: 56px 24px 40px; }
.pp-hero__en { font-size: 15px; letter-spacing: 3px; }
.pp-hero__title { font-size: 26px; letter-spacing: 1px; }
.pp-body { padding: 0 24px 80px; }
.pp-lead, .pp-sec p, .pp-list li { font-size: 14px; line-height: 2; }
.pp-lead { margin-bottom: 40px; }
.pp-sec { margin-bottom: 36px; }
.pp-sec h2 { font-size: 17px; }
.pp-date { margin-top: 44px; font-size: 12px; }
/* ---- client feedback 1⃣: home FV catch weight → About's 600 (was 700).
Size/line-height untouched (Figma). ---- */
.top2-fv__catch { font-weight: 600; }
/* ---- client feedback 2⃣: the FV sub/lead texts ran negative tracking
(−0.96/−1.5px, from Figma) and read as overlapping on phones — relaxed to
−0.5 at the client's request (deliberate Figma deviation; sizes untouched).
Not 0: at 0 the works line 女性視点の映像・SNS・広告・キャスティングで、
no longer fits 390 and orphans で、 onto its own line. */
.hero__sub { letter-spacing: -0.05em; }
.svc2-fv__sub { letter-spacing: -0.05em; }
.news-hero__lead { letter-spacing: -0.05em; }
.contact-hero__sub { letter-spacing: -0.05em; }
}