の行送りは strut の 42px 固定なので、32px送りになる行を実測差ぶん引き上げる。
card2: L4/L5 が -10px / card3: L3 -10px・L4/L5 -20px (ベースライン実測 7469/7501/7543 ほか) */
.cases__spec-line--up1 { position: relative; top: -1rem; }
.cases__spec-line--up2 { position: relative; top: -2rem; }
.cases__more {
position: absolute;
left: 19.25rem; top: 55.2rem;
display: flex;
align-items: center;
font-size: 2.4rem;
font-weight: 700;
line-height: 4.2rem;
letter-spacing: 0.18rem;
color: var(--c-rose);
}
.cases__more .carret { margin-left: -0.1rem; }
.cases__btn { left: 55.8rem; top: 105.3rem; }
.cases__foot-car { position: absolute; left: 111.77rem; top: 103.4rem; width: 22.07rem; height: 21.41rem; }
/* ============================================================
よくある質問 (h1476)
============================================================ */
.faq { background: var(--c-bg-off); height: 147.6rem; }
.faq__wm { left: 99.8rem; top: 13.5rem; color: rgba(65, 167, 54, 0.12); }
.faq__title { left: 9.6rem; top: 18.4rem; color: var(--c-black); }
.faq__wave { position: absolute; left: 9.6rem; top: 24.4rem; width: 124.8rem; height: 1.5rem; opacity: 0.8; }
.faq__head-car { position: absolute; left: 121.1rem; top: 17.9rem; width: 11.7rem; height: 8rem; }
.faq__lead {
position: absolute;
left: 9.6rem; top: 29.1rem;
font-size: 2.4rem;
font-weight: 500;
line-height: 4.2rem;
letter-spacing: 0.18rem;
}
.faq__item { position: absolute; left: 12rem; width: 120rem; }
.faq__item--1 { top: 36.7rem; }
.faq__item--2 { top: 65.5rem; }
.faq__item--3 { top: 94.3rem; }
.faq__q {
position: relative;
height: 10.8rem;
background: var(--c-bg-green);
border-radius: 4rem 4rem 0 0;
}
.faq__a {
position: relative;
height: 13rem;
background: var(--c-white);
border-radius: 0 0 4rem 4rem;
}
.faq__q-mark, .faq__a-mark {
position: absolute;
left: 5rem; top: 2.8rem;
font-size: 4rem;
font-weight: 700;
line-height: 4.8rem;
letter-spacing: 0.18rem;
}
.faq__a-mark { color: var(--c-green); }
.faq__q p {
position: absolute;
left: 11.6rem; top: 3.1rem;
width: 83rem;
font-size: 2.4rem;
font-weight: 700;
line-height: 4.2rem;
letter-spacing: 0.18rem;
}
.faq__a p {
position: absolute;
left: 11.1rem; top: 2.8rem;
width: 103.9rem;
font-size: 2.4rem;
font-weight: 500;
line-height: 3.5rem;
letter-spacing: 0.18rem;
}
.faq__btn { left: 55.8rem; top: 124.1rem; }
/* ============================================================
フッター (h304) + コピーライト (h63)
============================================================ */
.site-footer { background: #D4E9CE; height: 30.4rem; }
.site-footer__logo {
position: absolute;
left: 26rem; top: 3rem;
width: 37.1rem; height: 13rem;
}
.site-footer__logo img { position: absolute; left: 6rem; top: 2.2rem; width: 25rem; height: 8.5rem; }
.site-footer__company {
position: absolute;
left: 18.1rem; top: 17.6rem;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.92rem;
}
.site-footer__addr {
position: absolute;
left: 18.1rem; top: 19.5rem;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.92rem;
}
.site-footer__tel {
position: absolute;
left: 18.1rem; top: 23.2rem; /* 実測: 文字1px低(フォント固定後) → -0.1rem */
font-size: 3.5rem;
font-weight: 700;
line-height: 4.2rem;
letter-spacing: 0.158rem;
}
.site-footer__btn {
left: 46.9rem; top: 20rem;
padding-left: 2.5rem;
padding-right: 1rem;
width: 25.1rem;
height: 7.5rem;
font-size: 2.5rem;
padding-bottom: 0.2rem; /* 実測: 文字1px低(フォント固定後) → flex中央を1px上へ */
box-shadow: 0.278rem 0.556rem 0.833rem rgba(0, 0, 0, 0.08), inset 0 0 0 0.278rem var(--c-white);
}
.site-footer__btn .carret { width: 5.7rem; height: 5.8rem; }
.site-footer__btn .carret::before { width: 1.12rem; height: 1.83rem; }
.site-footer__catch {
position: absolute;
left: 77.1rem; top: 6.6rem; /* 実測: 1px左 */
width: 39rem;
text-align: center;
font-size: 4rem;
font-weight: 700;
line-height: 4.8rem;
letter-spacing: 0.18rem;
}
.site-footer__nav a {
position: absolute;
top: 20.9rem;
font-size: 1.704rem;
font-weight: 500;
line-height: 2.044rem;
white-space: nowrap;
}
.site-footer__nav a:nth-child(1) { left: 76.6rem; }
.site-footer__nav a:nth-child(2) { left: 86.9rem; }
.site-footer__nav a:nth-child(3) { left: 97.2rem; }
.site-footer__nav a:nth-child(4) { left: 110.9rem; }
.site-footer__policy {
position: absolute;
left: 77rem; top: 24.6rem;
font-size: 1.704rem;
font-weight: 500;
line-height: 2.044rem;
}
.copyright { background: #5A5957; height: 6.3rem; }
.copyright p {
position: absolute;
left: 55.3rem; top: 2.1rem;
font-size: 1.704rem;
font-weight: 500;
line-height: 2.044rem;
color: var(--c-white);
}
.bottom-divider { height: 0.3rem; background: #E0E0E0; }
/* カード3の個別座標 (Figma上3pxずれ) */
.reasons__card--3 .reasons__card-title { top: 29.3rem; }
.reasons__card--3 .reasons__card-text { top: 34.9rem; }
/* ステップ内アイコンの個別位置 (Figma上で1-3pxずれ) */
.nagare__step--1 img { left: 2.7rem; }
.nagare__step--2 img { top: 2.3rem; }
.about__sp-heart { display: none; }
.sp-only { display: none; }
.br-pc { display: inline; }
.site-header__menu, .nagare__arrow-sp { display: none; }
.br-sp { display: none; }
/* 実測ズレ補正 (probe_shift) — PC限定。min-widthでSPへの漏れを防ぐ */
@media (min-width: 768px) {
.reasons__card--1 .reasons__card-text { top: 35.1rem; }
.reasons__card--1 .reasons__icon { position: relative; left: -0.1rem; }
.reasons__card--3 .reasons__icon { position: relative; top: -0.1rem; }
.about__btn3 { padding-left: 5.2rem; }
.about__btn .carret::before, .about__btn2 .carret::before, .about__btn3 .carret::before {
transform: translate(calc(-50% - 0.1rem), calc(-50% - 0.1rem)); /* 実測: シェブロン1px低右 */
}
.about__lead .q-open, .about__lead .q-close { position: relative; top: 0.3rem; } /* 実測: PC引用記号のみ3px高 */
/* ---- 2026-08-20 トリアージ収束 (8/19の新TOPカンプに対する再実測) ----
Chromeはグリフのベースラインを整数pxにしかスナップできない
(0.25/0.5/0.75pxのCSS移動では描画が1bitも変わらず、1pxでちょうど1px動くことを実測)。
下記は「カンプに遠い方の整数」に落ちていた要素を、近い方の整数へ1px送る。
カッコ内は補正前のインク重心実測値(+=カンプが下 / -=カンプが上)。 */
.about__col-title--1 { top: 83.5rem; } /* dy -0.63 */
.about__col-title--2 { top: 83.9rem; } /* dy -0.63 */
.about__col-text--1 { top: 90.1rem; } /* dy -0.97 */
.about__col-text--2 { top: 90.5rem; } /* dy -1.00 */
.slash--l, .slash--r { top: 0.1rem; } /* dy +1.03 */
.reasons__card--1 .reasons__card-title,
.reasons__card--2 .reasons__card-title { top: 29rem; } /* dy -0.97 / -1.00 */
.reasons__card--2 .reasons__card-text { top: 35.1rem; } /* dy -1.01 */
.voices__card--1 .voices__name { top: 0.2rem; } /* dy +0.85 */
.voices__card--1 .voices__quote { transform: translateY(0.1rem); } /* dy +1.01 */
.partner__text { top: 18.4rem; } /* dy -0.94 */
.reasons__bubble--1 { top: 26.1rem; } /* dy +0.79 */
.about__badge--2 { left: 89.9rem; } /* dx -0.62 (マスク走査 dx=+1) */
.nagare__text--1 { left: 38.1rem; } /* マスク走査 dx=+1 (90.4→10.6) */
/* 数字01-03: マスク走査 dx=-1。+0.5px/+1px/+1.5px を実測し +1px が最良 (47.2→37.1) */
.nagare__num--1 { left: 48.9rem; }
.nagare__num--2 { left: 78.3rem; }
.nagare__num--3 { left: 107.7rem; }
.reasons__card--3 .reasons__card-title { transform: translateX(0.1rem); } /* マスク走査 dx=-1 (56.0→20.5) */
/* 透かし "Voice" はインク実測で ref y4122-4403 x30-121 / site y4125-4406 x27-120
＝3px下・2px左。しきい値32未満なので全体差分には出ないが実ズレなので直す */
.voices__wm { left: 1.6rem; top: 5.4rem; }
/* ボタンのシェブロンは実測1px低い → 1px上げる */
.nagare__btn .carret::before,
.cases__btn .carret::before,
.faq__btn .carret::before { transform: translate(-50%, calc(-50% - 0.1rem)); } /* dy -0.99 / -0.98 / -0.98 */
}
/* ============================================================
SP (〜767px) — デザイン390px基準
============================================================ */
@media (max-width: 767px) {
/* --- PC専用要素の非表示 --- */
.site-header__link,
.about__foot-car, .about__foot-wave,
.about__badge,
.nagare__arrow,
.cases__foot-car,
.site-footer__catch,
.bottom-divider { display: none; }
/* --- ヘッダー (h64) --- */
.site-header { height: 6.4rem; box-shadow: inset 0 -0.1rem 0 #E0E0E0; }
.site-header__logo { width: 14.5rem; height: 6.4rem; }
.site-header__logo img { left: 2rem; top: 1.4rem; width: 10.5rem; height: 3.6rem; }
.site-header__nav { gap: 0.8rem; padding-right: 1.5rem; }
.site-header__cta {
width: 12rem; height: 3rem;
border-radius: 1.5rem;
font-size: 1.2rem; font-weight: 700;
}
.site-header__menu {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.6rem;
width: 4rem; height: 4rem;
padding: 0.8rem 1rem;
background: none; border: none;
cursor: pointer;
}
.site-header__menu span { display: block; width: 2rem; height: 0.2rem; border-radius: 0.1rem; background: var(--c-text); }
/* --- HERO (h419) --- */
.hero__inner { height: 41.9rem; }
.hero { height: 41.9rem; }
.hero__bg { }
.hero__ribbon { height: 6rem; border-radius: 0 0.646rem 0.646rem 0; }
.hero__ribbon--1 { top: 4.5rem; width: 30.9rem; }
.hero__ribbon--2 { top: 11rem; width: 17.2rem; }
.hero__title {
left: 2.6rem; top: 3.97rem; /* 実測: 1px上左 */
font-size: 3.753rem;
line-height: 6.524rem;
letter-spacing: 0.31rem;
}
.hero__title .lg { font-size: 4.157rem; }
.hero__l2 { position: relative; top: -0.1rem; left: -0.1rem; } /* 実測: SP2行目のみ1px低右 */
.hero__bubble { left: 26.72rem; top: 12.99rem; width: 10.66rem; height: 9.53rem; }
.hero__family { left: 1.0rem; top: 17.5rem; width: 23.4rem; height: 22.2rem; }
/* --- ABOUT (h700+963=1663) --- */
.about { height: 166.3rem; }
.about__head-en {
left: 2.1rem; top: 4.9rem;
font-family: var(--font-base);
font-size: 3.6rem;
line-height: 4.32rem;
letter-spacing: 0;
}
.about__head-wave { left: 1.6rem; top: 8.3rem; width: 36rem; height: 1rem; }
.about__head-car { left: 32.1rem; top: 5.6rem; width: 5rem; height: 3.3rem; }
.about__lead {
left: 1.6rem; top: 11.85rem;
width: 36rem;
font-size: 1.8rem;
font-weight: 500;
line-height: 3.02rem;
letter-spacing: 0;
}
.about__lead .q { font-size: 2rem; font-weight: 900; line-height: 3.02rem; letter-spacing: 0; position: relative; top: 0.1rem; /* 実測: 引用行のみ1px高 */ }
.about__lead .q-close { position: relative; top: 0.1rem; } /* 実測: 閉じ引用符のみさらに1px高 */
.about__lead .num { font-size: 2rem; letter-spacing: 0; }
.about__btn { left: 6.6rem; top: 62.1rem; }
.about__nico { left: 1.6rem; top: 35.5rem; width: 36rem; height: 23.1rem; }
.about__yellow { left: 2.8rem; top: 73.7rem; width: 34.8rem; height: 71.3rem; }
.about__card {
left: 1.5rem; top: 72.4rem;
width: 35rem; height: 71.3rem;
box-shadow: inset 0 0 0 0.15rem var(--c-text);
border-radius: 1.5rem;
}
.about__photo { left: 1.5rem; top: 1.5rem; width: 32rem; height: 21.3rem; border-radius: 1.219rem; }
.about__sp-heart { display: block; position: absolute; width: 7rem; height: 6.4rem; }
.about__sp-heart--1 { left: 1.5rem; top: 24.8rem; }
.about__sp-heart--2 { left: 1.5rem; top: 46.2rem; }
.about__col-title { font-size: 2rem; line-height: 2.4rem; letter-spacing: 0; }
.about__col-title--1 { left: 1.5rem; top: 31.2rem; color: var(--c-rose-light); }
.about__col-title--2 { left: 1.5rem; top: 52.5rem; }
.about__col-car { width: 5.2rem; height: 3.2rem; }
.about__col-car--1 { left: 16rem; top: 30.4rem; }
.about__col-car--2 { left: 18rem; top: 51.7rem; }
.about__col-text {
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
letter-spacing: 0;
}
.about__col-text--1 { left: 1.5rem; top: 34.6rem; width: 32rem; }
.about__col-text--2 { left: 1.5rem; top: 55.9rem; width: 32rem; }
.about__btn2 { left: 6.6rem; top: 148.5rem; }
.about__btn3 { left: 6.6rem; top: 155.9rem; width: 26rem; }
/* --- SPボタン共通 (260x54 r18) --- */
.btn {
width: 26rem; height: 5.4rem;
border-radius: 1.8rem;
font-size: 1.8rem;
font-weight: 700;
box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.08);
}
.btn--red, .btn--green, .btn--thin { font-size: 1.8rem; font-weight: 700; box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.08), inset 0 0 0 0.2rem var(--c-white); }
.carret { width: 4.2rem; height: 4.2rem; }
.carret::before { width: 0.8rem; height: 1.3rem; }
.about__btn3, .partner__btn { letter-spacing: 0; }
.partner__btn .carret::before { margin-top: 0; }
/* --- 選ばれる３つの理由 (h1308) --- */
.reasons { height: 130.8rem; }
.reasons__title { top: 5rem; height: 5.5rem; }
.slash { font-size: 3.8rem; line-height: 5.502rem; }
.slash--l { left: 2.1rem; font-family: var(--font-kiwi); }
.slash--r { left: 33.1rem; }
.reasons__title-main { top: 1rem; font-size: 2.8rem; line-height: 3.36rem; }
.reasons__card {
left: 1.5rem !important;
width: 36rem;
border-radius: 1.8rem;
box-shadow: inset 0 0 0 0.25rem #96CB8C, 0 0 0 0.25rem #96CB8C;
}
.reasons__card--1 { top: 13.2rem; height: 35.9rem; }
.reasons__card--2 { top: 55.1rem; height: 31.9rem; }
.reasons__card--3 { top: 93.1rem; height: 33rem; }
.reasons__card--1 .reasons__icon { width: 13.5rem !important; height: 14.9rem !important; margin-top: 3rem !important; }
.reasons__card--2 .reasons__icon { width: 13.5rem !important; height: 13.3rem !important; margin-top: 3rem !important; }
.reasons__card--3 .reasons__icon { width: 13.5rem !important; height: 14.4rem !important; margin-top: 3rem !important; }
.reasons__card-title { top: 19.9rem; font-size: 2.1rem; line-height: 3.36rem; letter-spacing: 0.021rem; }
.reasons__card--3 .reasons__card-title { top: 19.4rem; }
.reasons__card--2 .reasons__card-title { top: 18.4rem; }
.reasons__card-text {
top: 23.3rem; left: 2rem;
width: 32rem;
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
letter-spacing: 0.12rem;
}
.reasons__card--2 .reasons__card-text { top: 21.8rem; }
.reasons__card--3 .reasons__card-text { top: 22.8rem; }
.reasons__bubble--1 { left: 0.5rem; top: 11.7rem; width: 18rem; height: 10.8rem; }
.reasons__bubble--2 { left: 0.5rem; top: 53.6rem; width: 18rem; height: 10.3rem; }
.reasons__bubble--3 { left: 0.5rem; top: 91.6rem; width: 18rem; height: 10.8rem; }
/* --- お客様の声 (h1239) --- */
.voices { height: 123.9rem; }
.voices__wm { left: 0.6rem; top: 2rem; font-size: 5rem; line-height: 6rem; }
.voices__title { top: 6rem; font-size: 2.8rem; line-height: 3.64rem; }
.voices__sparkle { left: 29.1rem; top: 5.4rem; width: 1.9rem; height: 1.9rem; }
.voices__card { left: 1.5rem; width: 36rem; border-radius: 1.8rem; }
.voices__card--1 { top: 12.8rem; height: 31.1rem; }
.voices__card--2 { top: 47.9rem; height: 33.5rem; }
.voices__card--3 { top: 85.4rem; height: 33.5rem; }
.voices__card > img { left: 7.4rem; top: 3rem; width: 21.2rem; height: 14.5rem; }
.voices__body { position: static; width: auto; }
.voices__quote {
position: absolute;
left: 5rem; top: 23.3rem;
width: 26.4rem;
margin: 0;
font-size: 1.6rem;
line-height: 2.4rem;
letter-spacing: 0.12rem;
}
.voices__name {
position: absolute;
left: 0; right: 0;
top: 18.1rem;
margin: 0;
text-align: center;
font-size: 2.1rem;
line-height: 4.2rem;
letter-spacing: 0.158rem;
}
/* --- 買取の流れ (h1143) --- */
.nagare { height: 114.3rem; }
.nagare__wm { left: auto; right: 0; top: 2rem; font-size: 5rem; line-height: 6rem; }
.nagare__title { left: 0; right: 0; text-align: center; top: 6rem; font-size: 2.8rem; line-height: 3.64rem; }
.nagare__heart { left: 25rem; top: 3.5rem; width: 3.5rem; height: 3.4rem; }
.nagare__illust { z-index: auto; }
.faq__wm { z-index: 2; }
.nagare__illust { left: 1.5rem; top: 12.8rem; width: 20.9rem; height: 21.4rem; }
.nagare__num { font-size: 3.2rem; line-height: 1; padding: 0.9rem 0 0 0.7rem; } /* 実測: 数字3-4px高→padding-top+0.4 */
.nagare__num--1 { left: 26.6rem; top: 15.8rem; width: 5.2rem; height: 5.2rem; }
.nagare__num--2 { left: 7.6rem; top: 62.3rem; width: 5.2rem; height: 5.2rem; }
.nagare__num--3 { left: 26.1rem; top: 62.2rem; width: 5.4rem; height: 5.4rem; }
.nagare__step { border-radius: 2.61rem; box-shadow: inset 0 0 0 0.33rem #99B386; }
.nagare__step--1 { left: 21.6rem; top: 19.5rem; width: 15.2rem; height: 15.2rem; }
.nagare__step--2 { left: 2.4rem; top: 66rem; width: 15.6rem; height: 15.6rem; }
.nagare__step--3 { left: 20.9rem; top: 65.7rem; width: 15.9rem; height: 15.9rem; }
.nagare__step img { width: 11.5rem; height: 11.5rem; }
.nagare__step--1 img { left: 1.5rem; top: 1.5rem; }
.nagare__step--2 img { left: 2.4rem; top: 1.9rem; }
.nagare__step--3 img { left: 2.1rem; top: 1.7rem; }
.nagare__step span { font-size: 1.308rem; line-height: 1.57rem; letter-spacing: 0.059rem; }
.nagare__step--1 span { top: 12rem; }
.nagare__step--2 span { top: 12.1rem; font-size: 1.341rem; }
.nagare__step--3 span { top: 12.3rem; font-size: 1.368rem; } /* 実測: 2px低 */
.nagare__arrow-sp { display: block; position: absolute; left: 17.5rem; top: 57.1rem; width: 4.1rem; height: 3.1rem; }
.nagare__h3 { font-size: 2.3rem; line-height: 2.99rem; }
.nagare__h3--1 { left: 1.5rem; top: 36.7rem; }
.nagare__h3--2 { left: 1.5rem; top: 84.4rem; }
.nagare__text {
font-size: 1.6rem;
line-height: 2.4rem;
letter-spacing: 0.12rem;
}
.nagare__text--1 { left: 1.5rem; top: 40.6rem; width: 36.3rem; } /* 実測: 1px低→-0.1rem */
.nagare__text--2 { left: 1.5rem; top: 88.3rem; width: 36.3rem; } /* 実測: 1px低→-0.1rem */
.nagare__btn { left: 6.5rem; top: 103.9rem; }
.nagare__btn .carret { margin-left: 1rem; }
/* --- パートナーシップ (h544 / 背景白) --- */
.partner { height: 54.4rem; background: var(--c-white); }
.partner__title { left: 0; right: 0; text-align: center; top: 6.1rem; font-size: 2.8rem; line-height: 3.64rem; }
.partner__deco { left: 29.8rem; top: 2.9rem; width: 5.7rem; height: 7.5rem; }
.partner__photo { left: 1.5rem; top: 12.8rem; width: 36rem; height: 18rem; border-radius: 1.8rem; }
.partner__text {
left: 1.5rem; top: 33.3rem;
width: 36rem;
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
letter-spacing: 0;
}
.partner__btn { left: 6.5rem; top: 44rem; }
/* --- 買取事例 (h1632) ---
2026-08-21 SPカンプ改版: カード中身が「Sさま/在住地＋【車種名】＋スペック箇条書き」に。
カード 436→414(1枚目)/412(2・3枚目)、左右パディング 16→35、
セクション 1702→1632 (-70)。カード間ギャップ40は不変 */
.cases { height: 163.2rem; }
.cases__wm { left: 25.4rem; top: 5rem; font-size: 3.161rem; line-height: 3.793rem; color: var(--c-white); }
.cases__title { left: 2rem; top: 5.5rem; font-size: 2.8rem; line-height: 3.64rem; }
.cases__wave { left: 1.5rem; top: 8.1rem; width: 36rem; height: 1rem; }
.cases__head-car { left: 32rem; top: 5.4rem; width: 5rem; height: 3.3rem; }
.cases__lead { left: 1.5rem; top: 12.1rem; font-size: 1.8rem; line-height: 2.88rem; letter-spacing: 0.135rem; }
.cases__card { left: 1.5rem !important; width: 36rem; height: 41.2rem !important; border-radius: 1.8rem; }
.cases__card--1 { top: 18rem; height: 41.4rem !important; }
.cases__card--2 { top: 63.4rem; }
.cases__card--3 { top: 108.6rem; }
.cases__photo { width: 36rem; height: 20.5rem !important; border-radius: 1.8rem 1.8rem 0 0; }
.cases__card-title { left: 3.5rem; top: 22.1rem !important; width: 29rem; font-size: 1.8rem; line-height: 2.16rem; letter-spacing: 0; color: var(--c-text); } /* SPカンプは #231816 */
/* SPは行送りがフォントサイズ比例 (150%)。1枚目の1行目だけ17px＝25.5px送りで、
PCのような固定px送りではない → line-height は無次元の 1.5 にする (Figma 2120:8462 ほか) */
.cases__card-text { left: 3.5rem; top: 25rem !important; width: 29rem; font-size: 1.6rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
/* SPカンプの【車種名】は Medium 500 (PCは Bold 700。Figma 2120:8462 ov7 は fontWeight 未指定＝基底500) */
.cases__spec-car { font-size: 1.7rem; font-weight: 500; letter-spacing: 0; }
/* 1枚目だけ1行目が17px＝行送り25.5pxで、以降の24px送りとの端数(0.31px)が
ブラウザのベースライン整数丸めで1px化する。本文ブロックは4/5行が合う位置に置き、
1行目だけ1px戻す (実測: ref y6816 / 補正前 6815) */
.cases__card--1 .cases__spec-car { position: relative; top: 0.1rem; }
.cases__card--2 .cases__spec-car,
.cases__card--3 .cases__spec-car { font-size: 1.6rem; }
.cases__spec-name,
.cases__card--2 .cases__spec-name { letter-spacing: 0; }
.cases__spec-tri { font-size: 1.3rem; letter-spacing: 0; }
/* SPは全行が同じ行送り比なので、PCの行送り差の引き上げは打ち消す */
.cases__spec-line--up1,
.cases__spec-line--up2 { position: static; top: auto; }
.cases__more { left: auto; right: 3.5rem; top: 38.1rem !important; font-size: 1.4rem; line-height: 1.68rem; letter-spacing: 0; }
/* 2・3枚目はカードが2px低い(412 vs 414)ぶん「続きを読む」もカード上端から379px (1枚目は381px) */
.cases__card--2 .cases__more,
.cases__card--3 .cases__more { top: 37.9rem !important; }
.voices__card--2 .voices__quote { transform: translateY(-0.1rem); } /* 実測: 引用文のみ1px低 */
.cases__more .carret { position: relative; top: 0.1rem; margin-left: 0.4rem; } /* 実測: 文字と間隔4px詰まり→gap拡張で文字を-4px */
.cases__more .carret { width: 1.6rem; height: 1.6rem; }
.cases__btn { left: 6.5rem; top: 152.8rem; }
/* --- FAQ (h1043) --- */
.faq { height: 104.3rem; }
.faq__wm { left: 25.2rem; top: 5rem; font-size: 3.161rem; line-height: 3.793rem; color: #E2EFE0; }
.faq__title { left: 2rem; top: 5.5rem; font-size: 2.8rem; line-height: 3.64rem; } /* 実測: 1px低→-0.1rem */
.faq__wave { left: 1.5rem; top: 8.2rem; width: 36rem; height: 1rem; }
.faq__head-car { left: 32rem; top: 5.5rem; width: 5rem; height: 3.3rem; }
.faq__lead { left: 1.5rem; top: 12.2rem; font-size: 1.8rem; line-height: 2.88rem; letter-spacing: 0.135rem; }
.faq__item { left: 1.5rem; width: 36rem; }
.faq__item--1 { top: 18.1rem; }
.faq__item--2 { top: 44.5rem; }
.faq__item--3 { top: 68.5rem; }
.faq__q { height: 7.6rem; border-radius: 1.8rem 1.8rem 0 0; }
.faq__a { border-radius: 0 0 1.8rem 1.8rem; }
.faq__item--1 .faq__a { height: 14.8rem; }
.faq__item--2 .faq__a { height: 12.4rem; }
.faq__item--3 .faq__a { height: 14.8rem; }
.faq__q-mark, .faq__a-mark { left: 1.6rem; font-size: 2rem; font-weight: 900; line-height: 2.4rem; letter-spacing: 0; }
.faq__q-mark { top: 2.6rem; }
.faq__a-mark { top: 1.4rem; }
.faq__q p { left: 4.4rem; top: 1.4rem; width: 30rem; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: 0; }
.faq__a p { left: 4.2rem; top: 1.4rem; width: 30.2rem; font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; letter-spacing: 0; }
.faq__btn { left: 6.5rem; top: 93.9rem; }
.sp-only { display: inline; }
.pc-only { display: none; }
.br-pc { display: none; }
.br-sp { display: inline; }
.about__col-text--2 br { display: none; }
.carret::before { width: 0.8rem; height: 1.3rem; }
/* --- フッター (h431+37) --- */
.site-footer { height: 43.1rem; }
.site-footer__logo { left: 6.5rem; top: 4rem; width: 26rem; height: 8.9rem; }
.site-footer__logo img { left: 0; top: 0; width: 26rem; height: 8.9rem; }
.site-footer__company { left: 6.5rem; top: 14.5rem; font-size: 1.4rem; font-weight: 700; line-height: 1.68rem; }
.site-footer__addr { left: 6.5rem; top: 16.8rem; font-size: 1.3rem; font-weight: 400; line-height: 1.56rem; }
.site-footer__tel { left: 6.5rem; top: 20.6rem; font-size: 2.4rem; font-weight: 900; line-height: 2.88rem; letter-spacing: 0; }
.site-footer__btn {
left: 6.5rem; top: 26.7rem;
width: 26rem; height: 5.4rem;
padding-left: 5rem; padding-right: 3rem;
font-size: 1.8rem;
box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.08), inset 0 0 0 0.2rem var(--c-white);
}
.site-footer__btn .carret { width: 4.2rem; height: 4.2rem; }
.site-footer__btn .carret::before { width: 0.8rem; height: 1.3rem; }
.site-footer__nav a { top: 35.3rem; font-size: 1.4rem; line-height: 1.68rem; }
.site-footer__nav a:nth-child(1) { left: 6.5rem; }
.site-footer__nav a:nth-child(2) { left: 13.7rem; }
.site-footer__nav a:nth-child(3) { left: 20.9rem; }
.site-footer__nav a:nth-child(4) { left: 6.5rem; top: 38.2rem; }
.site-footer__policy { left: 12.6rem; top: 38.2rem; font-size: 1.4rem; line-height: 1.68rem; }
.copyright { height: 3.7rem; }
.copyright p { left: 7.1rem; top: 1.2rem; font-size: 1.1rem; font-weight: 350; line-height: 1.32rem; }
/* ---- 2026-08-20 トリアージ収束 (SP) ----
Chromeはグリフのベースラインを整数pxにしかスナップできない (0.25/0.5/0.75pxのCSS移動では
描画が1bitも変わらないことを実測)。下記は「カンプに遠い方の整数」に落ちていた要素を
近い方の整数へ1px送る。カッコ内はインク重心の実測値 (+=カンプが下 / -=カンプが上)。 */
.about__col-text--1 { top: 34.5rem; } /* dy -1.15 */
.reasons__card--1 .reasons__card-text { top: 23.2rem; } /* dy -0.75 */
.reasons__card--2 .reasons__card-text { top: 21.7rem; } /* dy -1.31 */
.reasons__card--3 .reasons__card-text { top: 22.7rem; } /* dy -1.32 */
.voices__wm { left: 0.9rem; top: 1.9rem; } /* dy -0.56 dx +1.81 */
.voices__title { top: 6.1rem; } /* dy +0.67 */
.voices__name { top: 18.2rem; transform: translateX(0.1rem); } /* dy +0.70 dx +0.66 */
.cases__wm, .cases__title { transform: translateY(-0.1rem); } /* Frame172 マスク走査 dy=+1 */
.voices__card--1 .voices__quote,
.voices__card--3 .voices__quote { transform: translateY(-0.1rem); } /* dy -1.30 */
.nagare__title { top: 6.1rem; } /* dy +0.65 */
.partner__text { top: 33.2rem; } /* dy -1.15 */
.faq__q p, .faq__a p { top: 1.3rem; } /* dy -1.0 前後 */
/* フッターCTAのシェブロンのみ1px高い (ボタン枠は現在位置が最良＝枠ごと動かすと悪化する)。
TOPのSPカンプ限定の差なので、下層3ページでは打ち消す (下層は補正前が最良を実測済み) */
.site-footer__btn .carret::before { margin-top: 0.1rem; } /* base 83.4→43.0 */
.company .site-footer__btn .carret::before,
.faq-page .site-footer__btn .carret::before,
.contact-page .site-footer__btn .carret::before { margin-top: 0; }
}
/* ============================================================
404ページ (デザイン未定義 → トークン流用の提案ベース実装)
============================================================ */
.nf404 { background: var(--c-bg-off); min-height: 60rem; display: flex; align-items: center; justify-content: center; }
.nf404__box { text-align: center; padding: 8rem 2rem; max-width: 68rem; margin: 0 auto; }
/* 日本語の折返しは文節を割りやすい。対応ブラウザでは文節単位で折り、
非対応ブラウザ向けには 404.php 側の
が効く。 */
.nf404__title, .nf404__text { word-break: auto-phrase; text-wrap: balance; }
.nf404__code { font-family: var(--font-en); font-size: 10rem; font-weight: 700; color: var(--c-green); line-height: 1; letter-spacing: 0.3rem; }
.nf404__title { margin-top: 2rem; font-size: 3.2rem; font-weight: 700; color: var(--c-text); line-height: 1.5; }
.nf404__text { margin-top: 1.6rem; font-size: 1.8rem; line-height: 2; color: var(--c-text); }
.nf404__btn { position: static; display: inline-flex; margin-top: 4rem; }
.nf404__car { width: 15.3rem; height: 14.9rem; margin: 3rem auto 0; }
@media (max-width: 767px) {
.nf404 { min-height: 44rem; }
.nf404__code { font-size: 7rem; }
.nf404__title { font-size: 2.2rem; }
.nf404__text { font-size: 1.5rem; }
}
/* ============================================================
SPドロワーメニュー (デフォルト閉。開閉はmain.js)
============================================================ */
.sp-drawer {
display: none;
position: absolute;
left: 0; right: 0; top: 100%;
background: #fff;
box-shadow: 0 0.8rem 1.6rem rgba(0,0,0,.12);
padding: 1rem 2rem 2rem;
z-index: 90;
}
.sp-drawer__link {
display: block;
padding: 1.4rem 0.4rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--c-text);
text-decoration: none;
border-bottom: 0.1rem solid #E0E0E0;
}
.sp-drawer__cta {
display: block;
margin-top: 1.6rem;
padding: 1.2rem;
text-align: center;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
background: var(--c-red, #E60012);
border-radius: 0.6rem;
text-decoration: none;
}
@media (max-width: 767px) {
.site-header { position: relative; }
.sp-drawer:not([hidden]) { display: block; }
.site-header__menu.is-open span:nth-child(1) { transform: translateY(0.8rem) rotate(45deg); }
.site-header__menu.is-open span:nth-child(2) { opacity: 0; }
.site-header__menu.is-open span:nth-child(3) { transform: translateY(-0.8rem) rotate(-45deg); }
.site-header__menu span { transition: transform .25s ease, opacity .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
.site-header__menu span { transition: none; }
}
/* ============================================================
カード別実測値 (旧インラインstyleをCSS化 2026-08-09 規約対応)
末尾配置=インラインと同じカスケード位置(!important以外に勝つ)
============================================================ */
.reasons__card--1 .reasons__icon { width: 20.01rem; height: 22.09rem; margin-top: 4rem; }
.reasons__card--2 .reasons__icon { width: 20.01rem; height: 19.76rem; margin-top: 6.3rem; }
.reasons__card--3 .reasons__icon { width: 19.2rem; height: 20.45rem; margin-top: 5.7rem; }
/* 2026-08-21 改版で買取事例カードのカード別上書きは消滅
(写真高・見出し/本文/リンクの縦位置が3枚とも同値になった) */
/* ============================================================
CMS(お知らせ/ブログ) — Figma未定義のためトークン流用の提案ベース (2026-08-09)
対象: home.php / archive.php / single.php (手動メンテ・build_theme生成対象外)
============================================================ */
.cms-hero { background: var(--c-bg-green); padding: 6rem 2rem 5rem; text-align: center; }
.cms-hero__title { font-family: var(--font-kiwi); font-size: 3.6rem; font-weight: 500; color: var(--c-text); line-height: 1.4; }
.cms-hero__title .g { color: var(--c-green); }
.cms-hero__sub { font-family: var(--font-en); font-size: 1.4rem; font-weight: 700; color: var(--c-green); letter-spacing: 0.2rem; margin-top: 0.8rem; }
.news { background: var(--c-white); padding: 6rem 2rem 8rem; }
.news__inner { max-width: 90rem; margin: 0 auto; }
.news__list { list-style: none; }
.news__item { border-bottom: 0.1rem solid #E5E5E0; }
.news__link { display: flex; align-items: baseline; gap: 2rem; padding: 2.4rem 1rem; transition: background-color 0.2s; }
.news__link:hover { background: var(--c-bg-off); }
.news__date { font-family: var(--font-en); font-size: 1.4rem; font-weight: 700; color: var(--c-green); white-space: nowrap; }
.news__cat { font-size: 1.2rem; font-weight: 700; color: var(--c-white); background: var(--c-green); border-radius: 999rem; padding: 0.3rem 1.4rem; white-space: nowrap; }
.news__title { font-size: 1.6rem; font-weight: 500; color: var(--c-text); line-height: 1.6; }
.news__empty { text-align: center; font-size: 1.6rem; color: var(--c-text); padding: 6rem 0; }
/* WP出力のページネーション(.nav-links)はクラス名変更不可 → ラッパー配下で装飾 */
.news__pagination { margin-top: 4rem; }
.news__pagination .nav-links { display: flex; justify-content: center; gap: 1rem; }
.news__pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; border-radius: 50%; font-family: var(--font-en); font-size: 1.5rem; font-weight: 700; color: var(--c-text); box-shadow: inset 0 0 0 0.1rem #E5E5E0; padding: 0 1rem; }
.news__pagination a.page-numbers:hover { color: var(--c-green); box-shadow: inset 0 0 0 0.1rem var(--c-green); }
.news__pagination .page-numbers.current { color: var(--c-white); background: var(--c-green); box-shadow: none; }
.news__pagination .page-numbers.dots { box-shadow: none; }
.post { background: var(--c-white); padding: 6rem 2rem 8rem; }
.post__inner { max-width: 80rem; margin: 0 auto; }
.post__meta { display: flex; align-items: center; gap: 1.6rem; }
.post__date { font-family: var(--font-en); font-size: 1.4rem; font-weight: 700; color: var(--c-green); }
.post__cat { font-size: 1.2rem; font-weight: 700; color: var(--c-white); background: var(--c-green); border-radius: 999rem; padding: 0.3rem 1.4rem; }
.post__title { font-size: 3rem; font-weight: 700; color: var(--c-text); line-height: 1.5; margin-top: 1.6rem; padding-bottom: 2.4rem; border-bottom: 0.2rem solid var(--c-bg-green); }
.post__thumb { margin-top: 3.2rem; }
.post__thumb img { width: 100%; height: auto; border-radius: 1.2rem; }
/* 本文タイポグラフィ: the_content()のWP出力(クラスなしタグ)に当てる */
.post__body { margin-top: 3.2rem; font-size: 1.6rem; line-height: 2; color: var(--c-text); }
.post__body > * + * { margin-top: 1.6em; }
.post__body h2 { font-size: 2.4rem; font-weight: 700; line-height: 1.5; margin-top: 2.4em; padding: 0.6em 1em; background: var(--c-bg-green); border-radius: 0.8rem; }
.post__body h3 { font-size: 2rem; font-weight: 700; line-height: 1.5; margin-top: 2em; padding-left: 1em; border-left: 0.4rem solid var(--c-green); }
.post__body ul, .post__body ol { padding-left: 1.6em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li + li { margin-top: 0.4em; }
.post__body a { color: var(--c-green); text-decoration: underline; }
.post__body img { max-width: 100%; height: auto; border-radius: 1.2rem; }
.post__body blockquote { padding: 1em 1.5em; background: var(--c-bg-off); border-left: 0.4rem solid #E5E5E0; border-radius: 0.4rem; }
.post__body table { border-collapse: collapse; width: 100%; }
.post__body th, .post__body td { border: 0.1rem solid #E5E5E0; padding: 0.8em 1em; text-align: left; }
.post__body th { background: var(--c-bg-green); }
.post__foot { margin-top: 5rem; text-align: center; }
.post__back { display: inline-flex; align-items: center; justify-content: center; min-width: 24rem; height: 5.6rem; border-radius: 999rem; font-size: 1.6rem; font-weight: 700; color: var(--c-white); background: var(--c-red); box-shadow: 0.2rem 0.4rem 0.6rem rgba(0, 0, 0, 0.08), inset 0 0 0 0.2rem var(--c-white); transition: opacity 0.2s; }
.post__back:hover { opacity: 0.85; }
@media (max-width: 767px) {
.cms-hero { padding: 4rem 2rem 3.2rem; }
.cms-hero__title { font-size: 2.6rem; }
.news { padding: 4rem 2rem 6rem; }
.news__link { flex-wrap: wrap; gap: 1rem 1.4rem; padding: 2rem 0.5rem; }
.news__title { width: 100%; font-size: 1.5rem; }
.post { padding: 4rem 2rem 6rem; }
.post__title { font-size: 2.2rem; }
.post__body { font-size: 1.5rem; }
.post__body h2 { font-size: 2rem; }
.post__body h3 { font-size: 1.8rem; }
}
/* ============================================================
会社情報ページ (company.html / Figma 2093:21 PC・2093:729 SP)
既存TOPに一切影響させないため、すべて .company / .co-* にスコープする。
座標は Figma のページ絶対座標からセクション先頭を引いた値 (px/10 = rem)。
Figma側に小数座標が多いので、丸めずそのまま rem に落とす。
============================================================ */
/* ---------- ヘッダー: companyカンプ仕様 (TOPと高さ・ロゴ枠が違う) ---------- */
.company .site-header__logo { width: 13rem; height: 13rem; }
.company .site-header__logo img { left: 2.1rem; top: 2.25rem; width: 8.8rem; height: 8.5rem; }
.company .site-header__link { line-height: 3.5rem; margin-top: -0.1rem; }
.company .site-header__cta {
width: 22rem; height: 6.35rem;
border-radius: 4rem;
padding-bottom: 0.25rem;
}
.company .bottom-divider { display: none; }
.company .site-footer__catch { top: 6.7rem; }
/* フッター/コピーライトの帯はFigmaの実寸どおり(304 / 63)。
2026-08-20: 旧refは 8372.734 以降を1px上に丸めて描いており 30.33/6.31rem で合わせていたが、
新ref(2100:3053)はFigma座標そのままで描く。コピーライト境界の実測 = 8676.746
(ref y8676 の混色 181,197,176 = 暗色25.4% → 8676+0.746) ＝ Figmaの 8676.734。
総高も 8676.7+63 = 8739.7 → 8740 で ref(8740) と一致する。SPには効かせない */
@media (min-width: 768px) {
.company .site-footer { height: 30.4rem; }
.company .copyright { height: 6.3rem; }
}
/* Figmaのルートフレームは1440/390でクリップする。装飾のはみ出しを同じ位置で切る */
.company .inner { overflow-x: clip; }
/* Chromeは CSS Text L4 の text-spacing-trim を既定ON(normal)で実装しており、
和文の約物(、。「」“”)の内側アキを自動的に詰める。Figmaは詰めない(全角ベタ組み)ため
字送り・折返し位置が食い違う → 詰めを無効化してFigmaに合わせる。 */
.company main { text-spacing-trim: space-all; }
/* ---------- 共通部品 ---------- */
.co-sec-en { /* セクション英字見出し 72px/86.4 #DB8687 */
position: absolute;
font-size: 7.2rem;
font-weight: 700;
line-height: 8.6rem;
color: var(--c-rose-pale);
white-space: nowrap;
}
.co-wm { /* 黄色の透かし英字 */
position: absolute;
font-weight: 700;
color: var(--c-yellow);
white-space: nowrap;
pointer-events: none;
}
.co-hatch { position: absolute; opacity: 0.8; } /* 見出し下の黄色マーカー */
.co-car { position: absolute; } /* 緑の車イラスト */
.co-ring { position: absolute; display: block; } /* 巨大楕円リング(白い帯) */
.co-ring::before {
content: "";
position: absolute;
inset: -7.5rem;
border: 15rem solid #FAFCF8;
border-radius: 50%;
box-sizing: border-box;
}
/* 角丸写真 + Figmaのinside stroke。
img自身に inset shadow を掛けると画像本体に隠れて描画されないので、
で確定。Figmaの箱幅656はテキスト実寸ぴったりで、
ブラウザの字送り差だと1語こぼれて3行になる */
}
.ct-recaptcha--sp { display: none; }
/* ---------- 実測ズレ補正 (ink実測) — PC限定。min-widthでSPへの漏れを防ぐ ---------- */
@media (min-width: 768px) {
/* 見出し・フッター文字はem一括補正が1px効きすぎる → co-* の見出しと同じ +0.05rem 版に差し替え */
.ct-intro__title,
.contact-page .site-footer__company, .contact-page .site-footer__addr, .contact-page .site-footer__tel,
.contact-page .site-footer__catch, .contact-page .site-footer__nav a,
.contact-page .site-footer__policy { transform: translateY(calc(0.05rem - 0.0265em)); }
/* コピーライト行は実測で1px高い (ref ink y2724 / site y2723) */
.contact-page .copyright p { top: 2.2rem; }
/* 送信ボタンのシェブロンが実測1px低い (ref y1979-1995 / site y1980-1996) */
.ct-submit .carret::before { transform: translate(-50%, calc(-50% - 0.1rem)); }
}
/* ============================================================
お問い合わせページ SP (〜767px) — デザイン390px基準
============================================================ */
@media (max-width: 767px) {
/* --- ヘッダー/フッター (contactはロゴ枠が正方形64・下線なし) --- */
.contact-page .site-header { box-shadow: none; }
.contact-page .site-header__logo { width: 6.4rem; height: 6.4rem; }
.contact-page .site-header__logo img { left: 0.8rem; top: 0.9rem; width: 4.8rem; height: 4.6rem; }
.contact-page .site-header__cta { width: 12rem; height: 3rem; border-radius: 1.5rem; padding-bottom: 0; }
.contact-page .site-footer__btn { padding-bottom: 0; }
/* ヘッダー/フッターはTOP側SPで既に個別補正済み → em一括補正を打ち消す */
.contact-page .site-header__link,
.contact-page .site-footer__company, .contact-page .site-footer__addr, .contact-page .site-footer__tel,
.contact-page .site-footer__catch, .contact-page .site-footer__nav a, .contact-page .site-footer__policy,
.contact-page .copyright p { transform: none; }
/* --- HERO y=64..315 (楕円はcompanyの#F8F9F7ではなく#FFFFFF) --- */
.contact-page .co-hero { height: 25.1rem; }
.contact-page .co-hero__band { height: 25.1rem; }
.contact-page .co-hero__ellipse { background: var(--c-white); }
/* --- 見出し + リード y=315..526 --- */
/* --- 実測ズレ補正 (ink実測) — SPのみ --- */
.contact-page .co-hero__title { transform: translateY(calc(-0.15rem - 0.0265em)); }
.ct-intro__lead, .ct-label { transform: translateY(calc(0.05rem - 0.0265em)); }
.ct-intro { height: 21.1rem; }
.ct-intro__title { left: 1.5rem; top: 2rem; font-size: 2.3rem; line-height: 3.22rem; white-space: normal; }
.ct-intro__lead { left: 1.5rem; top: 10.7rem; width: 36rem; font-size: 1.8rem; font-weight: 400; line-height: 2.79rem; letter-spacing: 0; }
/* --- フォーム y=526..1551 (白地・カード/黄色背景なし) --- */
.ct-form { height: 102.5rem; background: var(--c-white); }
.ct-form__yellow, .ct-form__card { display: none; }
.ct-label { left: 1.5rem; width: 36rem; font-size: 1.6rem; line-height: 1.92rem; letter-spacing: 0; }
.ct-label__sub { margin-top: 0; font-size: 1.4rem; line-height: 1.68rem; }
.ct-input {
left: 1.5rem;
width: 36rem; height: 4.8rem;
padding: 0 1.4rem;
font-size: max(1.6rem, 16px); /* iOSの自動ズーム防止 (空欄なのでピクセルには出ない) */
line-height: 1.92rem;
}
.ct-input--area { height: 12rem; padding: 1.2rem 1.4rem; }
.ct-field--1 .ct-label { top: 4rem; } .ct-field--1 .ct-input { top: 6.7rem; }
.ct-field--2 .ct-label { top: 13.1rem; } .ct-field--2 .ct-input { top: 15.8rem; }
.ct-field--3 .ct-label { top: 22.2rem; } .ct-field--3 .ct-input { top: 24.9rem; }
.ct-field--4 .ct-label { top: 31.3rem; } .ct-field--4 .ct-input { top: 34rem; }
.ct-field--5 .ct-label { top: 40.4rem; } .ct-field--5 .ct-input { top: 43.1rem; }
.ct-field--6 .ct-label { top: 49.5rem; } .ct-field--6 .ct-input { top: 52.2rem; }
.ct-field--7 .ct-label { top: 58.6rem; } .ct-field--7 .ct-input { top: 61.3rem; }
.ct-field--8 .ct-label { top: 67.7rem; } .ct-field--8 .ct-input { top: 72.1rem; }
.ct-submit { left: 6.5rem; top: 87.3rem; }
.ct-recaptcha--pc { display: none; }
.ct-recaptcha--sp {
display: block;
left: 1.5rem; top: 95.9rem;
width: 36rem;
text-align: center;
font-size: 1.1rem; font-weight: 500; line-height: 1.32rem;
}
}
/* ============================================================
よくある質問ページ (faq.html) — Figma 2100:4428 / 2100:5024
既存ページに一切影響させないため、すべて .faq-page / .fq-* にスコープする。
座標は Figma のページ絶対座標からセクション先頭を引いた値 (px/10 = rem)。
============================================================ */
/* ---------- ヘッダー: faqカンプ仕様 (companyカンプと同一・TOPと高さ/ロゴ枠が違う) ---------- */
.faq-page .site-header__logo { width: 13rem; height: 13rem; }
.faq-page .site-header__logo img { left: 2.1rem; top: 2.2rem; width: 8.8rem; height: 8.5rem; }
.faq-page .site-header__link { line-height: 3.5rem; margin-top: -0.1rem; }
.faq-page .site-header__cta {
width: 22rem; height: 6.35rem;
border-radius: 4rem;
padding-bottom: 0.25rem;
}
/* カンプ最下端はコピーライト帯で終わる (PC 4754 / SP 3870) → TOPの3px罫は出さない */
.faq-page .bottom-divider { display: none; }
.faq-page .site-footer__catch { top: 6.7rem; }
/* Figmaのルートフレームは1440/390でクリップする。装飾のはみ出しを同じ位置で切る */
.faq-page .inner { overflow-x: clip; }
/* Chrome既定の text-spacing-trim (和文約物の自動アキ詰め) はFigmaの全角ベタ組みと
字送り・折返しが食い違う → 詰めを無効化してFigmaに合わせる (スコープ限定) */
.faq-page main { text-spacing-trim: space-all; }
/* ---------- Figma↔ブラウザのベースライン差の一括補正 ----------
実測でブラウザ側が「0.5px + 0.0265em」低い (会社情報ページで確立した係数)。 */
.fq-hero__label, .fq-hero__title,
.fq-intro__title-i, .fq-intro__lead,
.fq-q__mark, .fq-q__text, .fq-a__mark, .fq-a__text,
.faq-page .site-header__link,
.faq-page .site-footer__company, .faq-page .site-footer__addr, .faq-page .site-footer__tel,
.faq-page .site-footer__catch, .faq-page .site-footer__nav a, .faq-page .site-footer__policy { transform: translateY(calc(-0.05rem - 0.0265em)); }
/* 大きい字面(35px〜)とQ/Aマークは em一括補正が1px効きすぎる → 実測で1px戻す */
.fq-q__mark, .fq-a__mark,
.faq-page .site-footer__tel, .faq-page .site-footer__catch,
.faq-page .site-footer__nav a, .faq-page .site-footer__policy { transform: translateY(calc(0.05rem - 0.0265em)); }
/* ---------- HERO (ページタイトル帯) y=130..567 ---------- */
.fq-hero { background: var(--c-bg-green); height: 43.7rem; }
.fq-hero__band { position: absolute; left: 0; top: 0; width: 144rem; height: 43.7rem; overflow: hidden; }
.fq-hero__ellipse { position: absolute; left: 58.2rem; top: 2.2rem; width: 99.1rem; height: 81.9rem; border-radius: 50%; background: var(--c-white); }
.fq-hero__town { position: absolute; left: 1.2rem; top: 20.9rem; width: 96.5881rem; height: 19.9733rem; }
.fq-hero__nico { position: absolute; left: 103.2rem; top: 13.7rem; width: 26.1rem; height: 25.3rem; }
.fq-hero__hello { position: absolute; left: 88.2rem; top: 6.6rem; width: 24.9rem; height: 16.6rem; }
.fq-hero__label {
position: absolute; left: 9.4rem; top: 9.5rem;
font-size: 3rem; font-weight: 700; line-height: 3.6rem; letter-spacing: 0.1rem;
color: var(--c-green-hero);
}
.fq-hero__title {
position: absolute; left: 9.4rem; top: 13.1rem;
font-size: 5rem; font-weight: 700; line-height: 6.5rem; letter-spacing: 0.1rem;
white-space: nowrap;
}
/* ---------- 本文帯 y=567..4387 (#F8F9F7 + 末尾3pxのフレーム地色) ---------- */
.fq-body { background: var(--c-bg-off); }
/* Figmaの外枠フレーム(Frame 223)の地色が、内側の#F8F9F7とフッターの隙間3pxだけ露出する。
カンプ実測どおり再現 (y=4384..4387 の黒帯)。SPには無い。 */
.fq-body::after { content: ""; display: block; height: 0.3rem; background: #000000; }
/* ---------- イントロ y=567..966 ---------- */
.fq-intro { height: 39.9rem; }
.fq-intro__title {
position: absolute; left: 12rem; top: 14.4rem;
font-size: 5rem; font-weight: 700; line-height: 4.2rem;
}
.fq-intro__title-i { display: block; }
.fq-intro__lead {
position: absolute; left: 12rem; top: 21.4rem; width: 124.8rem;
font-size: 2.4rem; font-weight: 500; line-height: 3.5rem; letter-spacing: 0.04rem;
color: #000000;
}
/* ---------- Q&A リスト y=966..4384 ---------- */
.fq-list { padding-bottom: 7.5rem; }
.fq-items { width: 120rem; margin: 0 auto; display: flex; flex-direction: column; gap: 5rem; }
.fq-item { border-radius: 4rem; overflow: hidden; background: var(--c-white); }
.fq-q {
position: relative;
display: flex; align-items: center; gap: 3.5rem;
padding: 3rem 5rem;
background: var(--c-bg-green);
}
.fq-q__mark {
flex: none; width: 3.1rem;
font-size: 4rem; font-weight: 700; line-height: 4.8rem; letter-spacing: 0.18rem;
}
.fq-q__text {
width: 95rem;
font-size: 2.4rem; font-weight: 700; line-height: 4.2rem; letter-spacing: 0.18rem;
}
.fq-a {
display: flex; align-items: flex-start; gap: 3.5rem;
padding: 3rem 5rem;
background: var(--c-white);
}
.fq-a__mark {
flex: none; width: 3.1rem;
font-size: 4rem; font-weight: 700; line-height: 4.8rem; letter-spacing: 0.18rem;
color: var(--c-green);
}
.fq-a__text {
width: 103.4rem;
font-size: 2.4rem; font-weight: 500; line-height: 3.5rem; letter-spacing: 0.18rem;
}
/* 01のみ Figma上の字間が 0.4px (他は 1.8px) */
.fq-item--01 .fq-q__text, .fq-item--01 .fq-a__text { letter-spacing: 0.04rem; }
/* 3行回答(10/11)はFigma上の下パディングが35px */
.fq-item--10 .fq-a, .fq-item--11 .fq-a { padding-bottom: 3.5rem; }
/* アコーディオン矢印 (パス 22x11 / 線5px CENTER 丸端 → 実描画 27x16) */
.fq-arrow {
position: absolute;
right: 3.85rem; top: 5.4rem;
width: 2.7rem; height: 1.6rem;
transform: translateY(-50%);
background: var(--c-red);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 16'%3E%3Cpath d='M2.5 2.5 L13.5 13.5 L24.5 2.5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 16'%3E%3Cpath d='M2.5 2.5 L13.5 13.5 L24.5 2.5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* JSアコーディオン(任意)。既定は全開＝カンプの静止状態 */
.fq-item.is-closed .fq-a { display: none; }
.fq-item.is-closed .fq-arrow { transform: translateY(-50%) rotate(180deg); }
.fq-q[role="button"] { cursor: pointer; }
/* ---------- CTA ---------- */
.fq-cta { position: static; margin: 7rem auto 0; }
/* PC限定の実測ズレ補正 (min-widthでSPへの漏れを防ぐ) */
@media (min-width: 768px) {
.fq-hero__title, .fq-q__text { transform: translateY(calc(0.05rem - 0.0265em)); }
/* Figmaの "FAQ Intro" フレーム(y=711..851)がクリップする。50px/lh42 の見出しは
グリフ上端が2pxはみ出すのでref同様に切る (SPのフレームはクリップ無し)。
ベースライン補正は内側spanに掛ける(外箱ごと動かすとクリップ位置もズレるため) */
.fq-intro__title { overflow: hidden; height: 14rem; }
/* 2026-08-20 トリアージ収束 (実測): フッター社名/住所はカンプのインクが実装より
+1.03px / +0.89px 低い → -0.05rem版が1px効きすぎ。tel/catch/nav/policy と同じ +0.05rem版へ */
.faq-page .site-footer__company,
.faq-page .site-footer__addr { transform: translateY(calc(0.05rem - 0.0265em)); }
/* CTAボタンのシェブロンは実測1px低い (重心Δ dy=-0.99px) */
.fq-cta .carret::before { transform: translate(-50%, calc(-50% - 0.1rem)); }
}
/* ============================================================
よくある質問ページ SP (〜767px) — デザイン390px基準
============================================================ */
@media (max-width: 767px) {
/* --- ヘッダー (faqはロゴ枠が正方形64・下線あり) --- */
.faq-page .site-header__logo { width: 6.4rem; height: 6.4rem; }
.faq-page .site-header__logo img { left: 0.8rem; top: 0.9rem; width: 4.8rem; height: 4.6rem; }
/* 2026-08-20 トリアージ収束 (実測): CTA文字がカンプより1px低い(重心Δ dy=-0.99px)
→ flex中央を1px上げる (padding-bottom 0.2rem = 2px の半分) */
.faq-page .site-header__cta { width: 12rem; height: 3rem; border-radius: 1.5rem; padding-bottom: 0.2rem; }
.faq-page .site-footer__btn { padding-bottom: 0; }
/* ヘッダー/フッターはTOP側SPで既に個別補正済み → em一括補正を打ち消す */
.faq-page .site-header__link,
.faq-page .site-footer__company, .faq-page .site-footer__addr, .faq-page .site-footer__tel,
.faq-page .site-footer__catch, .faq-page .site-footer__nav a, .faq-page .site-footer__policy,
.faq-page .copyright p { transform: none; }
/* --- HERO y=64..315 --- */
.fq-hero { height: 25.1rem; }
.fq-hero__band { width: 39rem; height: 25.1rem; }
.fq-hero__ellipse { left: 11.6rem; top: 9.34rem; width: 33.8rem; height: 29.22rem; }
.fq-hero__town { left: 0; top: 16.81rem; width: 24.9rem; height: 6.7rem; }
.fq-hero__nico { left: 27.5rem; top: 14.1rem; width: 9.2rem; height: 8.9rem; }
.fq-hero__hello { left: 22.5rem; top: 12.4rem; width: 8.8rem; height: 6.4rem; }
.fq-hero__label { left: 1.5rem; top: 4.3944rem; font-size: 1.88665rem; line-height: 2.3rem; letter-spacing: 0; }
.fq-hero__title { left: 1.5rem; top: 7.9521rem; font-size: 2.93478rem; line-height: 3.5rem; letter-spacing: 0; }
/* --- 本文帯: SPは黒帯なし --- */
.fq-body::after { display: none; }
/* --- イントロ y=315..546 --- */
.fq-intro { height: 23.1rem; }
.fq-intro__title { left: 1.5rem; top: 2rem; width: 36rem; font-size: 2.3rem; line-height: 3.22rem; letter-spacing: 0; }
.fq-intro__lead {
left: 1.5rem; top: 10.7rem; width: 36rem;
font-size: 1.8rem; font-weight: 400; line-height: 2.79rem; letter-spacing: 0;
color: var(--c-text);
}
/* --- Q&A リスト y=546..3402 --- */
.fq-list { padding-bottom: 5rem; }
.fq-items { width: 36rem; gap: 4rem; }
.fq-item { border-radius: 1.8rem; }
.fq-q { align-items: flex-start; gap: 1.2rem; padding: 1.4rem 1.6rem; }
.fq-q__mark { width: 1.6rem; font-size: 2rem; font-weight: 900; line-height: 2.4rem; letter-spacing: 0; }
.fq-q__text { width: 24.3rem; font-size: 1.6rem; font-weight: 700; line-height: 2.4rem; letter-spacing: 0; }
.fq-a { gap: 1.2rem; padding: 1.4rem 1.6rem; }
.fq-a__mark { width: 1.4rem; font-size: 2rem; font-weight: 900; line-height: 2.4rem; letter-spacing: 0; }
.fq-a__text { width: 30.2rem; font-size: 1.6rem; font-weight: 400; line-height: 2.8rem; letter-spacing: 0; }
.fq-item--01 .fq-q__text, .fq-item--01 .fq-a__text { letter-spacing: 0; }
.fq-item--10 .fq-a, .fq-item--11 .fq-a { padding-bottom: 1.4rem; }
/* 設問の行高: Figma上で 24 と 28 が混在 */
.fq-item--04 .fq-q__text, .fq-item--05 .fq-q__text, .fq-item--07 .fq-q__text,
.fq-item--10 .fq-q__text, .fq-item--11 .fq-q__text { line-height: 2.8rem; }
/* 回答の行高: 同上 */
.fq-item--04 .fq-a__text, .fq-item--05 .fq-a__text, .fq-item--07 .fq-a__text,
.fq-item--10 .fq-a__text, .fq-item--11 .fq-a__text { line-height: 2.4rem; }
/* 08だけ設問の折返し幅が広い (Figma実測 256px) */
.fq-item--08 .fq-q__text { width: 25.6rem; }
/* 矢印: パス 15x7.5 / 線3.409px CENTER → 実描画 18.4x10.9 */
.fq-arrow { right: 2.13rem; top: 2.6rem; width: 1.84rem; height: 1.09rem; }
/* 09だけ設問がオートレイアウト内で右詰めされず、テキスト直後に置かれている */
.fq-item--09 .fq-arrow { right: 4.43rem; }
/* SPは本文16pxの一括補正がそのまま合う → 1px戻しはリード文だけ */
.fq-intro__lead { transform: translateY(calc(0.05rem - 0.0265em)); }
.fq-cta { margin: 4rem auto 0; }
}
/* ============================================================
下層ページ共通の実測ズレ補正 (2026-08-20 トリアージ収束)
ページ固有ブロックではなく「header-sub を使う3ページ共通」の事情なのでここに集約する。
※ contact 系のフォームスタイル(.ct-*)には一切触れていない
============================================================ */
@media (min-width: 768px) {
/* フッターCTAのシェブロンがカンプより1px高い。全探索の実測(base→最良):
会社情報 補正前(+0.2rem)から -1px / よくある質問・お問い合わせ 74.6 → dy=-1 で 41.6。
TOPだけは無補正が最良(54.7 / どちらへ動かしても悪化)なので対象から外す */
.company .site-footer__btn .carret::before,
.faq-page .site-footer__btn .carret::before,
.contact-page .site-footer__btn .carret::before { transform: translate(-50%, calc(-50% + 0.1rem)); }
}
/* ============================================================
FC募集（準備中）— カンプ未定義。既存トークンを流用した提案ベース
（404ページと同じ扱い。デザイン確定後に差し替える）
============================================================ */
.fc-prep { padding: 12rem 0 14rem; background: var(--c-bg-green); text-align: center; }
/* .inner の基本は width:144rem 固定。max-width だけ上書きすると SP で 84rem(840px) の
ままはみ出すので、width ごと指定して max-width:100% を効かせる。 */
.fc-prep .inner { width: 84rem; max-width: 100%; }
/* 日本語の折返しを文節単位に（非対応ブラウザ向けには fc.html の
）*/
.fc-prep__title, .fc-prep__lead, .fc-prep__note { word-break: auto-phrase; text-wrap: balance; }
.fc-prep__en { font-size: 1.4rem; letter-spacing: 0.2em; color: var(--c-green); font-weight: 700; }
.fc-prep__title { margin-top: 1.6rem; font-size: 4rem; line-height: 1.4; color: var(--c-text); }
.fc-prep__lead { margin-top: 3.2rem; font-size: 2rem; line-height: 1.9; color: var(--c-text); }
.fc-prep__note { margin-top: 2.4rem; font-size: 1.6rem; line-height: 2; color: var(--c-text); }
/* .btn の基本は position:absolute（カンプ準拠）なので、通常フローで置くページでは
必ず static に戻す。戻し忘れると後続要素と重なる（404で同じ処置。fcで再発）*/
/* .btn の基本は position:absolute（カンプ準拠）なので、通常フローで置くページでは
必ず static に戻す。戻し忘れると後続要素と重なる（404で同じ処置。fcで再発）。
さらに inline-flex のままだと次のリンクが同じ行に並ぶので block にして中央寄せする。 */
.fc-prep__btn { position: static; display: flex; align-items: center; justify-content: center;
margin: 4rem auto 0; width: 32.5rem; height: 7.5rem; font-size: 1.8rem; }
.fc-prep__back { display: block; margin-top: 2.4rem; font-size: 1.5rem;
color: var(--c-text); text-decoration: underline; }
@media (max-width: 767px) {
.fc-prep { padding: 8rem 1.5rem 10rem; }
.fc-prep__title { font-size: 2.8rem; }
.fc-prep__lead { margin-top: 2.4rem; font-size: 1.6rem; }
.fc-prep__note { font-size: 1.4rem; }
.fc-prep__btn { margin: 3.2rem auto 0; width: 100%; max-width: 32.5rem; height: 6rem; font-size: 1.6rem; }
}
/* --- SP拡大の上限に伴う中央寄せ（.inner の基本定義より後に置く必要がある） --- */
@media (max-width: 767px) { .inner { width: 39rem; max-width: 100%; margin-inline: auto; } }