/*
* Ginalca theme — main stylesheet.
* (The theme root style.css only holds the required WordPress theme
* header comment; all actual rules live here for easier editing.)
*/
/* =========================================================
0. Reset & Design Tokens
========================================================= */
:root{
--ink:#0e0e0e;--ink-2:#2a2a2a;--gray:#8d8d8d;--gray-2:#b6b6b6;
--line:#e9e9e9;--line-2:#f2f2f2;--paper:#fff;--paper-2:#fafafa;--paper-3:#f4f4f4;
--r:18px;--ease:cubic-bezier(.76,0,.24,1);
--serif:"Times New Roman","Hiragino Mincho ProN",serif;
--sans:"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
--wrap:1180px;
--pad:24px;
--bg-y:0%; /* snapped per swipe-panel by assets/js/main.js — see .site-bg */
--header-h:64px; /* fallback; assets/js/main.js measures the real .site-header
height (taller on TAB/SP once .primary-nav-sub is added)
and overwrites this on load/resize. */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
/* Client report: in-page anchor links (e.g. the Blog TOC's #見出しid
links) land with the target hidden behind .site-header, since it's
position:sticky and stays pinned at the top instead of scrolling out
of the way. scroll-padding-top reserves that much space at the top of
the scrollport for ANY native anchor jump, so the browser stops short
instead of scrolling the target flush to the very top. TAB/SP get a
taller value since .site-header also carries the second
.primary-nav-sub-row there (<960px) on top of the 64px bar. */
html{scroll-padding-top:130px;}
@media(min-width:960px){
html{scroll-padding-top:90px;}
}
html.intro-lock{overflow:hidden;} /* suspended while .intro-overlay is up — see main.js */
body{
font-family:var(--sans);color:var(--ink);background:transparent;
-webkit-font-smoothing:antialiased;line-height:1.6;
}
/* Client request: on short viewports (landscape phones, small browser
windows, etc. — height ≤ 700px) scale everything, text included, down
to 90% in one shot. Every font-size in this stylesheet is a hardcoded
px value (not rem, relative to the root font-size), so a root
font-size trick wouldn't cascade to any of them — zoom is the one CSS
property that uniformly rescales an entire subtree (text, spacing,
layout — everything) without editing each rule individually. Widely
supported across current Chrome/Edge/Safari/Firefox. */
@media (max-height:700px){
html{zoom:0.9;}
}
/* Service/Contents/Contact sit every-other page in the swipe sequence
(Top → Service → Works → Contents → Company → Contact) — a faint tint
here (still shows the .site-bg pattern through it, since that layer's
own opacity is separate) differentiates them from their plain-white
neighbors (Top/Works/Company) as you move through the sequence.
Client request: all 5 tints temporarily disabled (all pages plain white
like Top, no color distinction) — may be restored later. Original values
kept in this comment for easy revert:
service:#fbfdff / works:#fffdf8 / contents:#f8faff / contact:#fafafa /
company:#fffdfd */
body.swipe-key-service,
body.swipe-key-works,
body.swipe-key-contents,
body.swipe-key-contact,
body.swipe-key-company{
background:#fff;
}
img{max-width:100%;display:block;}
a{color:inherit;}
ul,ol{list-style:none;}
button{font-family:inherit;}
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#111;padding:12px 18px;z-index:9999;}
.skip-link:focus{left:12px;top:12px;}
/* type helpers */
.eyebrow{font-family:var(--serif);font-size:11px;letter-spacing:.32em;color:var(--gray);text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;}
/* Client request: TOP's What we are / What we do labels moved from
pattern D (outline pill) to pattern "B. サイズ拡大＋下線" from the
label options shown earlier — its own class so no other .eyebrow
usage sitewide is affected. Keeps the SP/TAB/PC responsive sizing
from the prior request. */
.section-label{display:inline-block;font-family:var(--serif);font-size:14px;letter-spacing:.22em;color:var(--ink);text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:9px;margin-bottom:18px;}
@media(max-width:700px){
.section-label{font-size:12px;padding-bottom:8px;}
}
@media(min-width:960px){
.section-label{font-size:16px;padding-bottom:10px;}
}
.kicker{font-family:var(--serif);font-size:10px;letter-spacing:.26em;color:var(--gray);text-transform:uppercase;margin-bottom:12px;}
h1,h2,h3{font-weight:400;}
.title{font-family:var(--serif);font-size:32px;line-height:1.3;letter-spacing:.02em;margin:6px 0 20px;}
h3.big{font-family:var(--serif);font-size:25px;line-height:1.35;margin:4px 0 14px;letter-spacing:.02em;}
.lead{font-size:14.5px;line-height:2.0;color:var(--ink-2);letter-spacing:.02em;}
/* Client request: manual line-break inside the Works archive's intro
.lead (works-loop.php) is PC/TAB-only — the sentence just wraps
naturally on its own on narrow SP widths, so the is suppressed
there instead of forcing an extra-short first line. */
@media(max-width:700px){
.lead-br{display:none;}
}
.muted{color:var(--gray);}
/* Client request: Service page's "Service 01/02" .muted subtitle
(page-service.php) gets its own PC size — moved out of that element's
inline style into this scoped rule so it can vary by breakpoint. */
.service-grid .muted{font-size:12px;letter-spacing:.1em;}
@media(min-width:960px){
.service-grid .muted{font-size:14px;}
}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.tags span{font-size:11px;letter-spacing:.08em;color:var(--ink-2);border:1px solid var(--line);border-radius:40px;padding:6px 13px;}
/* .br-pc — a manual line break meant for PC/tablet layouts only; collapses
away on phones so the text just wraps naturally there instead. */
@media(max-width:700px){.br-pc{display:none;}}
@media(min-width:960px){
.title{font-size:42px;}
h3.big{font-size:30px;}
.lead{font-size:15.5px;}
}
/* Client request: Service page's "Service 01/02" h2.title gets its own
size/margin-bottom (see .service-grid .muted above for the same
scoping pattern) — moved out of that element's inline style so it can
vary by breakpoint; the FV h1.title above it still just uses the
plain .title rules with no page-specific override. */
.service-grid .title{font-size:28px;}
@media(min-width:960px){
.service-grid .title{font-size:34px;margin-bottom:10px;}
}
/* =========================================================
1. Header / Nav
========================================================= */
.site-header{
position:sticky;top:0;left:0;right:0;z-index:200;
background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--line-2);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand-logo{display:block;height:30px;width:auto;}
.primary-nav{display:none;}
.primary-nav ul{display:flex;gap:2px;align-items:center;}
.primary-nav a{
position:relative;display:block;padding:10px 16px;font-family:var(--serif);font-size:13px;letter-spacing:.12em;
text-decoration:none;color:var(--ink-2);transition:.25s;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-parent > a,
.primary-nav .current-menu-ancestor > a{color:var(--ink);}
.primary-nav .current-menu-item > a::after,
.primary-nav .current-menu-parent > a::after,
.primary-nav .current-menu-ancestor > a::after{
content:"";position:absolute;left:16px;right:16px;bottom:6px;height:1px;background:var(--ink);
}
.header-cta{display:none;}
.header-cta a{
font-family:var(--serif);font-size:12.5px;letter-spacing:.1em;color:#fff;background:var(--ink);
border-radius:40px;padding:10px 20px;text-decoration:none;white-space:nowrap;
}
.menu-btn{width:34px;height:34px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;}
.menu-btn span{width:20px;height:1.5px;background:var(--ink);transition:.3s;}
.menu-btn.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-btn.on span:nth-child(2){opacity:0;}
.menu-btn.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
/* TAB/SP only (<960px): a second row directly under the top header bar,
showing the SAME primary menu as PC (see .primary-nav-sub-row in
header.php — a second wp_nav_menu() call, not a CSS trick, since it
needs to sit as its own full-width row below the flex top bar rather
than squeezed inside it). The top bar itself (.site-header .container)
is untouched here — hamburger stays at the right edge exactly as
before. The column prev/next arrows (.navsub-arrow, icon only — no
label) sit at this row's two ends, but SP only (≤700px) — TAB
(701–959px) already has room for the original labeled .swipe-arrow
pair floating near the bottom, so .navsub-arrow stays hidden there to
avoid showing the same prev/next controls twice. */
.primary-nav-sub-row{display:none;}
.primary-nav-sub{display:none;}
@media(max-width:959.98px){
.primary-nav-sub-row{
display:flex;align-items:center;border-top:1px solid var(--line-2);
}
.primary-nav-sub{
display:block;flex:1;min-width:0;
overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.primary-nav-sub::-webkit-scrollbar{display:none;}
.primary-nav-sub ul{display:flex;gap:2px;padding:6px var(--pad);width:max-content;min-width:100%;}
.primary-nav-sub a{
position:relative;display:block;padding:10px 14px;font-family:var(--serif);font-size:12.5px;letter-spacing:.1em;
text-decoration:none;color:var(--ink-2);white-space:nowrap;
}
.primary-nav-sub a:hover,
.primary-nav-sub .current-menu-item > a,
.primary-nav-sub .current-menu-parent > a,
.primary-nav-sub .current-menu-ancestor > a{color:var(--ink);}
.primary-nav-sub .current-menu-item > a::after,
.primary-nav-sub .current-menu-parent > a::after,
.primary-nav-sub .current-menu-ancestor > a::after{
content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--ink);
}
.navsub-arrow{
display:none; /* re-enabled at ≤700px (SP) below — hidden here for TAB */
flex:0 0 auto;align-items:center;justify-content:center;
width:40px;height:46px;color:var(--ink);text-decoration:none;font-size:15px;
}
.navsub-arrow.left{border-right:1px solid var(--line-2);}
.navsub-arrow.right{border-left:1px solid var(--line-2);}
}
@media(max-width:700px){
.navsub-arrow{display:flex;}
/* SP only — TAB (701–959px) keeps the wider, horizontally-scrollable
version above. On phones the item list should fit one line and
center, never wrap or scroll; if a label genuinely can't fit (a very
long menu title on a very narrow phone), it truncates with an
ellipsis rather than breaking the row. */
.primary-nav-sub{overflow-x:visible;}
.primary-nav-sub ul{
width:100%;min-width:0;justify-content:center;flex-wrap:nowrap;gap:0;
}
.primary-nav-sub li{min-width:0;flex:0 1 auto;}
.primary-nav-sub a{
padding:8px 8px;font-size:10.5px;letter-spacing:.06em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Client request: header reads too tall on phones — shrinks both the
top bar (64px → 52px) and the sub-nav row's own link padding/arrow
height below it. main.js re-measures the real .site-header height
into --header-h on load/resize, so every .section's min-height
(calc(100dvh - var(--header-h))) adjusts to match automatically —
nothing else needs to change. */
.site-header .container{height:45px;}
.brand-logo{height:26px;}
.navsub-arrow{height:38px;}
}
.mobile-nav{
position:fixed;inset:0;z-index:190;background:#fff;
transform:translateY(-100%);transition:transform .5s var(--ease);
display:flex;flex-direction:column;padding:100px 30px 30px;overflow-y:auto;
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav ol{flex:1;}
.mobile-nav li{border-bottom:1px solid var(--line);}
.mobile-nav a{display:flex;align-items:baseline;gap:14px;padding:18px 2px;text-decoration:none;color:var(--ink);}
.mobile-nav a .no{font-family:var(--serif);font-size:12px;color:var(--gray);width:24px;}
.mobile-nav a .en{font-family:var(--serif);font-size:24px;letter-spacing:.04em;flex:1;}
.mobile-nav a .ja{font-size:11px;color:var(--gray);letter-spacing:.1em;}
.mobile-nav .foot{font-size:11px;color:var(--gray);letter-spacing:.12em;line-height:1.9;margin-top:20px;}
.mobile-nav .foot em{font-style:italic;}
/* var(--serif) alone won't do it here — its "Times New Roman" comes
first and already covers every Latin glyph in "Marketing Starts in
You.", so browsers never fall through to its Mincho fallback for pure
ASCII text like this. Naming the Mincho fonts directly (no Times New
Roman ahead of them) is the only way to actually get 明朝体 rendering
on plain English text. */
.mobile-nav .foot-tagline{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;}
/* SP-only stand-in for the real