@charset "UTF-8";
/* ============================================================
common.css — loaded on every page (inc/enqueue.php)
1. Tokens 2. Base 3. Header (gh-) / Footer (gf-) = v2 sample「_共通ヘッダー・フッター.html」
4. Phone bottom bar (su-mbar) 5. Shared parts (su-btn, su-crumb, su-contact, su-form)
6. Simple pages (404 / placeholder) 7. Reduced motion
Page CSS (top / laulea / recruit / legacy) loads after this file.
Custom properties here are prefixed (--gh-, --su-) so page tokens (--pink, --ink ...) do not collide.
============================================================ */
/* ===== 1. Tokens ===== */
:root{
--gh-h:64px;--gh-bg:rgba(14,26,31,.92);--gh-fg:#F4F1EA;--gh-muted:#B9C6CB;--gh-pink:#C8285A;--gh-pink-glow:#FF7EB0;--gh-focus:#5CC8F5;
--su-ink:#1B2328;--su-ink-muted:#4D5A60;--su-paper:#F6F1E7;--su-white:#FFFFFF;--su-line:#D9D3C7;
--su-night:#0E1A1F;--su-on-night:#F4F1EA;--su-on-night-muted:#B9C6CB;
--su-pink:#C8285A;--su-pink-ink:#B0004A;--su-blue-ink:#00689A;--su-teal-ink:#007267;--su-focus:#5CC8F5;
--su-error:#B3261E;--su-error-on-dark:#FFB4AB;
--su-font:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
/* ===== 2. Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--gh-h) + 8px)}
body{margin:0;font-family:var(--su-font);font-size:17px;line-height:1.8;color:var(--su-ink);overflow-x:clip}
img{max-width:100%;height:auto}
/* theme: flower mark WebP wrapper (su_flower(), inc/setup.php). No box of its own, so the ![]()
stays the flex/grid
item it was; the must not take a flex/grid slot either. */
.su-fl{display:contents}.su-fl>source{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* theme: hidden page title of legacy pages (inc/legacy.php su_legacy_page_title()). Clip method = still read aloud.
!important because legacy.css styles .legacy h1 (higher specificity). Never display:none. */
.su-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.gh-skip{position:fixed;left:12px;top:-80px;z-index:1000;background:var(--su-white);color:var(--su-ink);padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.gh-skip:focus{top:12px}
/* ===== 3. Header / Footer (v2 sample, unchanged except the lines marked "theme") ===== */
.gh{position:fixed;inset:0 0 auto 0;z-index:900;height:var(--gh-h);background:var(--gh-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gh-fg);font-family:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;line-height:1.5}
.gh-in{max-width:1320px;height:100%;margin:0 auto;padding:0 clamp(12px,3vw,32px);display:flex;align-items:center;gap:20px}
.gh-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-height:44px;margin-right:auto}
.gh-brand img{width:34px;height:auto}
.gh-brand b{display:block;font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.3}
.gh-brand small{display:block;font-size:12px;color:var(--gh-muted);letter-spacing:.06em;line-height:1.3}
.gh-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.gh-nav li{margin:0} /* theme */
.gh-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:inherit;text-decoration:none;font-size:15px;font-weight:500;border-radius:8px;position:relative;white-space:nowrap}
.gh-nav a:hover{background:rgba(255,255,255,.08)}
.gh-nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--gh-pink-glow);border-radius:2px}
.gh-tel{color:inherit;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.04em;min-height:44px;display:flex;align-items:center;white-space:nowrap}
.gh-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--gh-pink);color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;transition:background-color .2s}
.gh-cta:hover{background:#AD1F4C}
.gh-menu{display:none;min-height:44px;min-width:44px;padding:0 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.gh a:focus-visible,.gh button:focus-visible,.gf a:focus-visible,.gh-skip:focus-visible{outline:3px solid var(--gh-focus);outline-offset:2px}
/* theme: 6 menu items + phone + CTA need more room than the sample's 5 items, so the phone hides a little earlier */
@media (max-width:1180px){.gh-tel{display:none}}
@media (max-width:1020px){
.gh-tel{display:none}
.gh-menu{display:inline-flex;align-items:center}
.gh-nav{position:absolute;top:var(--gh-h);left:0;right:0;background:#0E1A1F;border-top:1px solid rgba(255,255,255,.1);display:none;padding:8px clamp(12px,3vw,32px) 16px;max-height:calc(100vh - var(--gh-h));overflow-y:auto}
.gh-nav.is-open{display:block}
.gh-nav ul{flex-direction:column;gap:0}
.gh-nav a{font-size:17px;min-height:52px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0}
.gh-nav a[aria-current="page"]::after{left:auto;right:12px;top:50%;bottom:auto;width:8px;height:8px;border-radius:50%;transform:translateY(-50%)}
}
.gh-menu{white-space:nowrap;flex-shrink:0}.gh-brand b{white-space:nowrap}
@media (max-width:560px){.gh-cta{display:none}.gh-brand small{display:none}.gh-in{gap:12px}}
@media (max-width:400px){.gh-brand b{font-size:14px;letter-spacing:.02em}.gh-brand img{width:30px}}
.gf{background:#0A1317;color:var(--gh-fg);font-family:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;padding:56px clamp(20px,5vw,72px) 32px;line-height:1.5}
.gf-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px}
.gf h2{font-size:15px;letter-spacing:.08em;color:var(--gh-muted);margin:0 0 14px;font-weight:700}
.gf p,.gf li{font-size:15px;line-height:1.9;margin:0}
.gf ul{list-style:none;margin:0;padding:0}
.gf a{color:inherit;text-underline-offset:.2em}
.gf .gf-nw{white-space:nowrap} /* theme: phone hours break as one unit (not inside 9:00〜17:00) */
.gf-links a{display:inline-flex;align-items:center;min-height:40px}
.gf-office{display:flex;align-items:center;gap:10px;min-height:40px}
.gf-office img{width:24px;height:auto}
.gf-office a{display:inline-flex;align-items:center;min-height:40px} /* theme */
.gf-tel{font-size:22px;font-weight:700;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.gf-bottom{max-width:1320px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;font-size:13px;color:var(--gh-muted)}
.gf-bottom a{color:var(--gh-muted)}
/* theme: the bottom links are a list (3 links incl. the「見える化」page) */
.gf .gf-legal{display:flex;flex-wrap:wrap;gap:0 20px}
.gf .gf-legal li{font-size:13px}
.gf-legal a{display:inline-flex;align-items:center;min-height:40px}
.gf a[aria-current="page"]{text-decoration-thickness:2px}
@media (max-width:860px){.gf-in{grid-template-columns:1fr;gap:28px}.gf{padding-bottom:110px}}
/* ===== 4. Phone bottom bar (template-parts/mobile-bar.php) ===== */
.su-mbar{display:none}
@media (max-width:767px){
body.has-su-mbar{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.su-mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:850;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(14,26,31,.96);font-family:var(--su-font);line-height:1.4}
.su-mbar a{min-height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:4px 10px;text-align:center;font-weight:700;font-size:16px;text-decoration:none;color:#fff}
.su-mbar__tel{background:var(--su-pink-ink)}
.su-mbar__go{background:var(--su-blue-ink)}
.su-mbar a:focus-visible{outline:3px solid var(--su-focus);outline-offset:2px}
}
/* Every page type has a phone bottom bar at 767px and below: legacy = .su-mbar (72px), top = .mbar (64px),
laulea = .mobile-bar (75px), recruit = .mbar (73px). 92px = the tallest bar + about 16px.
- scroll-padding-bottom: an element focused with Tab is scrolled to stay above the bar, not under it
(scroll-padding-top stays as it is)
- .grecaptcha-badge: the reCAPTCHA v3 badge of Contact Form 7 (live site only; fixed at the bottom right,
Google sets bottom:14px inline, hence !important) is lifted above the bar. It stays visible (required). */
@media (max-width:767px){
html{scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.grecaptcha-badge{bottom:calc(92px + env(safe-area-inset-bottom))!important}
}
/* ===== 5. Shared parts ===== */
/* Buttons */
.su-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font-family:var(--su-font);font-weight:700;font-size:16px;line-height:1.4;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .2s,color .2s}
.su-btn--pink{background:var(--su-pink);color:#fff}
.su-btn--pink:hover{background:#AD1F4C}
.su-btn--line{background:transparent;color:var(--su-ink);border-color:currentColor}
.su-btn--line:hover{background:rgba(0,0,0,.05)}
.su-btn:focus-visible{outline:3px solid var(--su-focus);outline-offset:3px}
.su-eyebrow{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--su-pink-ink)}
/* Breadcrumb (template-parts/breadcrumb.php) */
.su-crumb{font-size:14px;line-height:1.5}
.su-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;list-style:none;margin:0;padding:0}
.su-crumb li{display:flex;align-items:center;gap:8px;margin:0}
.su-crumb li+li::before{content:"/";opacity:.6}
.su-crumb a{color:inherit;display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.2em}
.su-crumb a:focus-visible{outline:3px solid var(--su-focus);outline-offset:2px}
/* Inquiry block (template-parts/contact-block.php) */
.su-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,4vw,56px);align-items:start;font-family:var(--su-font)}
.su-contact__h{margin:0 0 12px;font-size:18px;font-weight:700;line-height:1.5}
.su-contact__num{display:inline-flex;align-items:center;min-height:56px;font-size:clamp(30px,4vw,40px);font-weight:700;letter-spacing:.04em;text-decoration:none;color:inherit;line-height:1.2}
.su-contact__num:focus-visible{outline:3px solid var(--su-focus);outline-offset:3px}
.su-contact__hours,.su-contact__note{margin:8px 0 0;font-size:16px;line-height:1.8}
.su-contact--light{color:var(--su-ink)}
.su-contact--light .su-contact__hours{color:var(--su-ink-muted)}
.su-contact--dark{color:var(--su-on-night)}
.su-contact--dark .su-contact__hours{color:var(--su-on-night-muted)}
@media (max-width:860px){.su-contact{grid-template-columns:minmax(0,1fr)}}
/* Contact Form 7 inside .su-form (labels visible, inputs 16px+, readable errors) */
.su-form{font-size:16px;line-height:1.8}
.su-form .wpcf7 p{margin:0 0 18px}
.su-form .wpcf7 label{display:block;font-weight:700}
.su-form .wpcf7-form-control-wrap{display:block;margin-top:6px}
.su-form input[type="text"],.su-form input[type="email"],.su-form input[type="tel"],.su-form input[type="number"],.su-form input[type="date"],.su-form select,.su-form textarea{
width:100%;max-width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:16px;line-height:1.6;color:var(--su-ink);background:#fff;border:2px solid #9AA4A8;border-radius:10px}
.su-form textarea{min-height:160px;resize:vertical}
.su-form ::placeholder{color:#6B767B;opacity:1}
.su-form input:focus-visible,.su-form select:focus-visible,.su-form textarea:focus-visible{outline:3px solid var(--su-focus);outline-offset:2px;border-color:var(--su-ink)}
.su-form .wpcf7-list-item{display:inline-flex;align-items:center;margin:0 16px 0 0}
.su-form .wpcf7-list-item label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;cursor:pointer}
.su-form input[type="checkbox"],.su-form input[type="radio"]{width:22px;height:22px;margin:0;accent-color:var(--su-pink)}
.su-form .wpcf7-submit,.su-form input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--su-pink);color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.su-form .wpcf7-submit:hover{background:#AD1F4C}
.su-form .wpcf7-submit:focus-visible{outline:3px solid var(--su-focus);outline-offset:3px}
.su-form .wpcf7-not-valid{border-color:var(--su-error)}
.su-form .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:15px;font-weight:700;color:var(--su-error)}
.su-form .wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border-radius:10px;font-size:16px;font-weight:700}
.su-form .wpcf7-spinner{vertical-align:middle}
.su-form a{color:inherit;text-underline-offset:.2em}
/* Links in the form body (「資料をPDFでダウンロード」「プライバシーポリシー」): 44px tap area.
The padding is cancelled by the same negative margin, so the line keeps its 28.8px height (layout unchanged). */
.su-form .wpcf7 form a{display:inline-block;min-height:44px;padding:8px 0;margin:-8px 0}
.su-contact--dark .su-form .wpcf7-not-valid-tip{color:var(--su-error-on-dark)}
.su-contact--dark .su-form .wpcf7-response-output{color:var(--su-on-night)}
.su-form-fallback{margin:0}
/* ===== 6. Simple pages (404.php, page placeholders) ===== */
.su-page{padding:calc(var(--gh-h) + clamp(40px,8vw,96px)) clamp(20px,5vw,72px) clamp(56px,8vw,96px);background:var(--su-paper)}
.su-page__inner{max-width:880px;margin:0 auto}
.su-page__title{margin:0 0 20px;font-size:clamp(26px,4vw,36px);line-height:1.4;font-weight:700}
.su-page p{margin:0 0 16px}
.su-404__links{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:24px 0 0;padding:0}
.su-placeholder{padding:calc(var(--gh-h) + 48px) clamp(20px,5vw,72px) 48px;background:var(--su-paper)}
.su-placeholder h1{margin:0;font-size:28px;line-height:1.4}
/* ===== 7. Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
.gh-cta,.su-btn{transition:none}
html{scroll-behavior:auto}
}