/*
Theme Name: Up-Line New
Theme URI: https://www.up-line.co.jp
Author: Up-Line Corporation
Description: Up-Line Corporation（アップライン株式会社）コーポレートサイト リニューアル用オリジナルテーマ。白背景に、ロゴのライムグリーン（#8cc320）から起こしたグラデーションとポップな装飾を重ねたデザイン。
Version: 0.5.0
Requires at least: 6.0
Tested up to: 7.1
Text Domain: up-line-new
Update URI: false
*/

/* =============================================================
   1. Design tokens
   ============================================================= */

:root {
  /* Brand ramp.
     The anchor is #8cc320, the lime sampled from the client's own logo mark.
     The scale runs lime (light end, used for fills and decoration) into teal
     (dark end, used for text and deep surfaces), which is the same journey the
     brand gradient makes. 600 and 700 carry text, so they are taken dark
     enough to read on white (5.5:1 and 7.6:1). */
  --c-green-50:  #f6fbe9;
  --c-green-100: #e9f7c9;
  --c-green-200: #cfeb8a;
  --c-green-300: #a7d948;
  --c-green-400: #8cc320;  /* brand lime */
  --c-green-500: #2dd4bf;  /* hue turns to teal here */
  --c-green-600: #0f766e;
  --c-green-700: #115e59;

  /* Pop accents, the ones the approved design carried: the theme stays the
     logo's lime-to-teal, with sky and lemon as small highlights only. */
  --c-pop-lime:  #b6e05a;
  --c-pop-mint:  #6ee7b7;
  --c-pop-teal:  #5eead4;
  --c-pop-sky:   #7dd3fc;
  --c-pop-lemon: #fde68a;

  /* Sky taken dark enough to carry text on white (5.9:1), for the one
     accent in a run of greens (news dates, tabs). */
  --c-accent-sky: #0369a1;

  /* Neutrals */
  --c-ink:     #10202e;
  --c-body:    #465768;
  --c-muted:   #56687a;
  --c-line:    #e8f0e2;
  --c-surface: #ffffff;
  --c-tint:    #f6fbef;

  /* Gradients.
     --g-brand is the bright, poppy one for fills, buttons and decoration; it
       carries the ink, never white.
     --g-text is for large figures and headings set with background-clip:text.
       Both ends hold 3.9:1 on white, the large-text minimum with room to
       spare; keep it there. */
  --g-brand: linear-gradient(120deg, #a7d948 0%, #4ad6ae 55%, #2dd4bf 100%);
  /* "See more" buttons carry white text: 5.0:1 or better at both ends. */
  --g-more: linear-gradient(120deg, #3f7a0e 0%, #0d7d73 100%);
  --g-text: linear-gradient(120deg, #5a8f12 0%, #0f8a7e 100%);

  /* Type.
     Japanese runs in Zen Maru Gothic, a soft rounded gothic used at 500 and
     700 and never heavier: the reference site gets its friendliness from the
     letterforms, not from weight. Quicksand is reserved for Latin words and
     numerals. Never set Japanese in Quicksand — it has no kana or kanji and
     would fall through to a system face mid-sentence. */
  --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-display: "Quicksand", var(--font-jp);

  /* Type scale (fluid) */
  --t-display: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --t-h2:      clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  --t-h3:      1.125rem;
  --t-lead:    clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-body:    0.9375rem;
  --t-small:   0.8125rem;
  --t-micro:   0.75rem;

  /* Spacing scale (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5.5rem;
  --s-11: 7rem;

  /* Radii. The rule, applied everywhere:
       pill  interactive things (buttons, chips, tags)
       xl    full-width bands (contact band)
       lg    panels and cards
       md    images and media tiles
       sm    inline images inside prose
     Book covers are the exception: a trimmed book is cut square. */
  --r-sm: 0.5rem;
  --r-md: 1rem;
  --r-lg: 1.75rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  /* Shadows. --sh-book is the one heavy shadow, for a cover standing on the
     page. */
  --sh-sm: 0 2px 8px -2px rgba(16, 32, 46, 0.10);
  --sh-md: 0 12px 28px -12px rgba(16, 32, 46, 0.22);
  --sh-lg: 0 28px 48px -20px rgba(16, 32, 46, 0.32);
  --sh-glow: 0 12px 26px -10px rgba(74, 200, 140, 0.55);
  /* White cards on the white page: a soft shadow tinted with the brand,
     the way the reference site lifts its panels. */
  --sh-card: 0 10px 30px -12px rgba(45, 180, 140, 0.28), 0 2px 6px rgba(16, 32, 46, 0.04);
  --sh-book: 0 2px 4px rgba(16, 32, 46, 0.12), 0 18px 30px -12px rgba(16, 32, 46, 0.38);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);

  /* Layout */
  --w-page: 1160px;
  --w-text: 62ch;
  --header-h: 72px;
}

/* =============================================================
   2. Base
   ============================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  /* Keeps a focused link clear of the floating contact button. */
  scroll-padding-bottom: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--c-body);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

/* Wrap short Japanese lines between phrases, not inside a word: 「入稿／まで」
   and 「カ／タログ」 were both splitting mid-word, and book titles were
   leaving one character on a line of its own (「…作／る」). Meant for
   headings, titles and one- to three-sentence lines only; long body text
   keeps the normal rule. Browsers without these simply ignore them. */
h1, h2, h3, h4,
.mv__lead,
.svc__label,
.works-list__title,
.promise__text,
.news-list__title,
.company-tiles span,
.hub__title,
.hub__text,
.service-voice p,
.service-note,
.service-card__text,
.post-list__title,
.post-list__excerpt,
.entry-nav__title,
.ed-head__lead,
.head__lead,
.page-hero__lead,
.contact-band__text p,
.site-footer__about {
  word-break: auto-phrase;
  text-wrap: pretty;
  /* Strict kinsoku: no small kana or 「ー」 at the start of a line
     (「に／ゃんと」, 「コーディネ／ーター」). */
  line-break: strict;
  /* A phrase longer than the column (「住宅リフォームビジネス必携」 in a
     narrow list) may still break, rather than push past the edge. */
  overflow-wrap: anywhere;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--c-green-600);
  text-decoration: none;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

a:hover { color: var(--c-green-700); }

:focus-visible {
  outline: 2px solid var(--c-green-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =============================================================
   3. Layout primitives
   ============================================================= */

.wrap {
  position: relative;
  width: min(100% - 2.5rem, var(--w-page));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--s-10);
}

/* The page stays white throughout, as on the reference site. "tint" is only
   a hook now, kept so the templates need not change. */
.section--tint { background: transparent; }

.stack > * + * { margin-top: var(--s-4); }

/* =============================================================
   4. Components — buttons

   Two kinds. The way to get in touch is a luggage tag: the bright brand
   gradient carrying the ink (9:1 or better at both ends), rounded at the
   front and squarer at the back, with the tag's hole punched there. A link
   on to a listing is a white pill with a round green arrow at its end.
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 3rem;
  padding: 0.75rem 2rem;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary,
.float-cta {
  position: relative;
  padding-left: 2.5rem;
  border-radius: 0.75rem var(--r-pill) var(--r-pill) 0.75rem;
  background: var(--g-brand);
  color: var(--c-ink);
  box-shadow: var(--sh-glow);
}

/* The tag's hole, with its reinforcing ring. */
.btn--primary::before,
.float-cta::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.3rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(16, 32, 46, 0.3);
}

.btn--primary:hover { color: var(--c-ink); filter: brightness(1.04) saturate(1.1); }

/* "See more": a white pill, its edge a pale theme line, a round arrow in
   the brand gradient at the end. */
.btn--ghost {
  min-width: 16rem;
  justify-content: space-between;
  padding: 0.4rem 0.4rem 0.4rem 2rem;
  background: #fff;
  color: var(--c-ink);
  box-shadow: inset 0 0 0 2px var(--c-green-200), var(--sh-card);
}

.btn--ghost::after {
  content: "\2192";
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--g-brand);
  color: var(--c-ink);
  font-family: var(--font-display);
  transition: translate 0.2s var(--ease);
}

.btn--ghost:hover { color: var(--c-green-700); }
.btn--ghost:hover::after { translate: 3px 0; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* =============================================================
   5. Components — section heads
   ============================================================= */

/* Front page sections: the English name large in the brand gradient and the
   Japanese name (the real heading) under it, the pair set inside printer's
   crop marks, as a page sits on the sheet before it is trimmed. */
.sec-head {
  margin-bottom: var(--s-8);
  text-align: center;
}

.sec-head__crop {
  --crop: rgba(15, 118, 110, 0.55);
  display: inline-block;
  padding: var(--s-4) var(--s-7);
  background:
    linear-gradient(var(--crop), var(--crop)) top left / 1.1rem 2px no-repeat,
    linear-gradient(var(--crop), var(--crop)) top left / 2px 1.1rem no-repeat,
    linear-gradient(var(--crop), var(--crop)) top right / 1.1rem 2px no-repeat,
    linear-gradient(var(--crop), var(--crop)) top right / 2px 1.1rem no-repeat,
    linear-gradient(var(--crop), var(--crop)) bottom left / 1.1rem 2px no-repeat,
    linear-gradient(var(--crop), var(--crop)) bottom left / 2px 1.1rem no-repeat,
    linear-gradient(var(--crop), var(--crop)) bottom right / 1.1rem 2px no-repeat,
    linear-gradient(var(--crop), var(--crop)) bottom right / 2px 1.1rem no-repeat;
}

.sec-head__en {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
}

.sec-head__title {
  margin-top: var(--s-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  letter-spacing: 0.12em;
}

.sec-more {
  margin-top: var(--s-8);
  text-align: center;
}

/* The older head, still used by the blog index. */
.head { margin-bottom: var(--s-8); }

.head__eyebrow {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-green-600);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.head__num { margin-right: var(--s-2); }

.head__title { font-size: var(--t-h2); }

.head__rule {
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-block: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--g-brand);
}

.head__lead {
  max-width: 40rem;
  color: var(--c-muted);
  font-size: var(--t-lead);
}

/* --- Background decoration: fixed behind the whole page -------------- */

/* The studio's own tools as decoration, light and pastel: registration
   marks, halftone dots, bookmark ribbons and sticky notes. Scattered, not
   arranged: no two sides mirror each other and nothing sits at a corner,
   so the shapes never read as a frame round the page. They stay where they
   are while the page scrolls past. */
.bg-deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-deco__shape { position: absolute; display: block; }
.bg-deco__shape svg { display: block; width: 100%; height: auto; }

/* Halftone dots, the way print builds a tint. */
.bg-deco__shape--dots-1,
.bg-deco__shape--dots-2,
.bg-deco__shape--dots-3,
.bg-deco__shape--dots-4,
.bg-deco__shape--dots-5,
.bg-deco__shape--dots-6 {
  border-radius: 50%;
  background-image: radial-gradient(circle, currentColor 32%, transparent 34%);
  background-size: 12px 12px;
}

.bg-deco__shape--dots-1 { left: -4.75rem; top: 30vh; width: 7rem; height: 7rem; color: rgba(140, 195, 32, 0.45); }
.bg-deco__shape--dots-2 { right: 1.75rem; top: 15vh; width: 2.75rem; height: 2.75rem; color: rgba(125, 211, 252, 0.7); }
.bg-deco__shape--dots-3 { right: -3rem; top: 57vh; width: 6rem; height: 6rem; color: rgba(45, 212, 191, 0.4); }
.bg-deco__shape--dots-4 { left: 1.5rem; top: 79vh; width: 2.25rem; height: 2.25rem; color: rgba(253, 216, 102, 0.9); }
.bg-deco__shape--dots-5 { color: rgba(125, 211, 252, 0.6); }
.bg-deco__shape--dots-6 { color: rgba(140, 195, 32, 0.4); }

/* Registration marks: the circle and cross printed outside a page to line
   the colours up. */
.bg-deco__shape--reg-1 { left: 0.75rem; top: 52vh; width: 2.25rem; color: rgba(15, 118, 110, 0.5); }
.bg-deco__shape--reg-2 { right: 0.75rem; top: 85vh; width: 1.6rem; color: rgba(77, 124, 15, 0.45); }

/* Bookmark ribbons: one hangs in from the top edge, the other has slipped
   out of a book and lies askew low on the other side, so the two never
   gather at the top. */
.bg-deco__shape--ribbon-1,
.bg-deco__shape--ribbon-2 {
  width: 1.4rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  opacity: 0.75;
}

.bg-deco__shape--ribbon-1 { left: 3rem; top: 0; height: 6.5rem; background: linear-gradient(var(--c-pop-lime), var(--c-pop-mint)); }
.bg-deco__shape--ribbon-2 { right: 2.25rem; top: 67vh; height: 6rem; width: 1.15rem; background: linear-gradient(var(--c-pop-teal), var(--c-pop-sky)); rotate: -28deg; }

/* Sticky notes, each askew its own way. */
.bg-deco__shape--note-1,
.bg-deco__shape--note-2 { border-radius: 3px; }

.bg-deco__shape--note-1 { left: -0.75rem; top: 64vh; width: 3.5rem; height: 2.75rem; background: var(--c-pop-lemon); opacity: 0.8; rotate: 9deg; }
.bg-deco__shape--note-2 { right: -0.5rem; top: 36vh; width: 3rem; height: 2.4rem; background: var(--c-pop-mint); opacity: 0.55; rotate: -6deg; }

/* Shapes for wide screens only. */
.bg-deco__shape--wide { display: none; }

/* Wide screens: the side margins run from 120px at 1440 to over 700px on a
   large monitor. Each shape sits at its own fraction of the margin (--at,
   counted from the screen edge to the column), so the shapes spread out as
   the margin grows instead of lining up against the column like a frame.
   The upper bound keeps each one clear of the 1160px page column
   (50vw - 600px is 20px outside it); the lower bound keeps the small ones
   on screen. The large dots grow a little with the margin, and keep a
   wider gap (--gap) so that at 1440 they mostly bleed off the edge. */
@media (min-width: 1440px) {
  .bg-deco { --m: calc(50vw - 600px); }
  .bg-deco__shape--wide { display: block; }

  .bg-deco__shape--dots-1,
  .bg-deco__shape--dots-2,
  .bg-deco__shape--dots-3,
  .bg-deco__shape--dots-4,
  .bg-deco__shape--dots-5,
  .bg-deco__shape--dots-6 { width: var(--w); height: var(--w); }

  .bg-deco__shape--dots-1,
  .bg-deco__shape--dots-4,
  .bg-deco__shape--dots-5,
  .bg-deco__shape--reg-1,
  .bg-deco__shape--ribbon-1,
  .bg-deco__shape--note-1 { left: clamp(var(--min), calc(var(--m) * var(--at) - var(--w) / 2), calc(var(--m) - var(--w) - var(--gap, 0px))); }

  .bg-deco__shape--dots-2,
  .bg-deco__shape--dots-3,
  .bg-deco__shape--dots-6,
  .bg-deco__shape--reg-2,
  .bg-deco__shape--ribbon-2,
  .bg-deco__shape--note-2 { right: clamp(var(--min), calc(var(--m) * var(--at) - var(--w) / 2), calc(var(--m) - var(--w) - var(--gap, 0px))); }

  .bg-deco__shape--dots-5   { --at: 0.14; --w: 2.25rem; --min: 1rem; top: 11vh; }
  .bg-deco__shape--ribbon-1 { --at: 0.6; --w: 1.4rem; --min: 4.5rem; height: 8rem; }
  .bg-deco__shape--dots-1   { --at: 0.32; --w: clamp(10rem, var(--m) * 0.3, 14rem); --min: -6.5rem; --gap: 4rem; top: 24vh; }
  .bg-deco__shape--reg-1    { --at: 0.66; --w: 2.6rem; --min: 1.5rem; top: 55vh; width: var(--w); }
  .bg-deco__shape--dots-4   { --at: 0.5; --w: 3rem; --min: 1rem; top: 72vh; }
  .bg-deco__shape--note-1   { --at: 0.2; --w: 5rem; --min: -1rem; top: 84vh; width: var(--w); height: 4rem; }

  .bg-deco__shape--dots-2   { --at: 0.72; --w: 3.5rem; --min: 1rem; top: 13vh; }
  .bg-deco__shape--dots-6   { --at: 0.14; --w: 4rem; --min: 1rem; top: 30vh; }
  .bg-deco__shape--dots-3   { --at: 0.42; --w: clamp(9rem, var(--m) * 0.26, 13rem); --min: -5rem; --gap: 4rem; top: 46vh; }
  /* The ribbon is turned, so it reaches about 3.5rem across. */
  .bg-deco__shape--ribbon-2 { --at: 0.82; --w: 3.5rem; --min: 1.25rem; top: 64vh; height: 7rem; }
  .bg-deco__shape--note-2   { --at: 0.3; --w: 4.5rem; --min: -0.5rem; top: 80vh; width: var(--w); height: 3.5rem; }
  .bg-deco__shape--reg-2    { --at: 0.6; --w: 2rem; --min: 2rem; top: 90vh; width: var(--w); }
}

/* On opening, the shapes arrive one after another: dots swell, the hanging
   ribbon drops in from the top edge and the loose one falls into place,
   notes are stuck on with a small twist,
   registration marks fade up. Each runs once, from its own delay. */
@media (prefers-reduced-motion: no-preference) {
  .bg-deco__shape { animation: deco-pop 0.9s cubic-bezier(0.34, 1.45, 0.5, 1) both; }

  .bg-deco__shape--reg-1,
  .bg-deco__shape--reg-2 { animation-name: deco-fade; animation-timing-function: var(--ease); }

  .bg-deco__shape--ribbon-1 { animation-name: deco-drop; animation-timing-function: cubic-bezier(0.3, 1.3, 0.5, 1); }
  .bg-deco__shape--ribbon-2 { animation-name: deco-fall; animation-timing-function: cubic-bezier(0.3, 1.25, 0.5, 1); }

  .bg-deco__shape--note-1,
  .bg-deco__shape--note-2 { animation-name: deco-stick; }

  .bg-deco__shape--ribbon-1 { animation-delay: 0.1s; }
  .bg-deco__shape--dots-2   { animation-delay: 0.2s; }
  .bg-deco__shape--dots-1   { animation-delay: 0.3s; }
  .bg-deco__shape--reg-1    { animation-delay: 0.45s; }
  .bg-deco__shape--note-2   { animation-delay: 0.55s; }
  .bg-deco__shape--dots-3   { animation-delay: 0.65s; }
  .bg-deco__shape--ribbon-2 { animation-delay: 0.75s; }
  .bg-deco__shape--note-1   { animation-delay: 0.85s; }
  .bg-deco__shape--dots-4   { animation-delay: 0.95s; }
  .bg-deco__shape--dots-6   { animation-delay: 1s; }
  .bg-deco__shape--reg-2    { animation-delay: 1.1s; }
  .bg-deco__shape--dots-5   { animation-delay: 1.15s; }
}

/* Each animates from nothing to the shape's own opacity, scale and turn. */
@keyframes deco-pop {
  from { opacity: 0; scale: 0.3; }
}

@keyframes deco-fade {
  from { opacity: 0; scale: 0.6; rotate: -90deg; }
}

@keyframes deco-drop {
  from { translate: 0 -100%; }
}

@keyframes deco-stick {
  from { opacity: 0; scale: 1.4; rotate: -24deg; }
}

@keyframes deco-fall {
  from { opacity: 0; translate: 0 -3rem; rotate: 12deg; }
}

/* Below 1440px the margins are narrow enough that a shape can sit behind
   small grey text or a link: at half strength, those still read at 4.7:1. */
@media (max-width: 1439px) {
  .bg-deco { opacity: 0.5; }
}

/* Below 1280px the copy starts 20px from the edge. A registration mark is
   thin lines that would cross the first letters of every line scrolling
   past, and cut off at the edge it no longer reads as one: none here. */
@media (max-width: 1279px) {
  .bg-deco__shape--reg-1,
  .bg-deco__shape--reg-2 { display: none; }
}

/* Once the side margins are gone the shapes would sit under the copy:
   fewer of them. */
@media (max-width: 1000px) {
  .bg-deco__shape--dots-2,
  .bg-deco__shape--dots-4,
  .bg-deco__shape--note-2 { display: none; }

  .bg-deco__shape--dots-1 { left: -4.5rem; }
  .bg-deco__shape--dots-3 { right: -3.5rem; }
  .bg-deco__shape--ribbon-1 { left: 1rem; }
  .bg-deco__shape--ribbon-2 { right: 0.5rem; top: 70vh; }
}

@media print {
  .bg-deco { display: none; }
}

/* =============================================================
   6. Header & navigation
   ============================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
  padding-block: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  /* Never let flexbox squeeze this narrower than the words: with nowrap set,
     a squeezed box does not clip, it spills over whatever sits beside it. */
  flex: none;
  color: var(--c-ink);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand:hover { color: var(--c-green-700); }

/* The client's own logo mark, so it carries their exact lime. */
.brand__mark {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.6rem;
  box-shadow: var(--sh-glow);
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav__list a {
  position: relative;
  display: inline-block;
  padding-block: var(--s-2);
  color: var(--c-ink);
  font-size: var(--t-body);
  font-weight: 500;
  white-space: nowrap;
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--g-brand);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.25s var(--ease);
}

.nav__list a:hover { color: var(--c-ink); }

.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list .current-menu-ancestor > a::after,
.nav__list .current-page-ancestor > a::after { scale: 1 1; }

/* Contact entry that only appears inside the mobile drawer. */
.nav__drawer-only { display: none; }

/* The number and hours, beside the button, as the current site's header
   carries them. Shown only where the bar has room; see section 20. */
.header-tel {
  display: none;
  flex: none;
  color: var(--c-ink);
  line-height: 1.35;
  text-align: right;
}

.header-tel:hover { color: var(--c-green-700); }

.header-tel__hours {
  display: block;
  color: var(--c-muted);
  font-size: var(--t-micro);
}

.header-tel__number {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* First in the markup so focus moves from it straight into the list it
   opens; drawn last in the bar. */
.nav__toggle {
  display: none;
  order: 1;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
}

.nav__toggle svg { width: 1.5rem; height: 1.5rem; }

.nav__toggle-close,
.nav__toggle-open { display: none; }

.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

/* Closed, the menu is three lines in three theme colours, as the
   reference site draws its MENU; each holds 3:1 or better on white. */
.nav__toggle[aria-expanded="false"]::before {
  content: "";
  width: 1.4rem;
  height: 1rem;
  background:
    linear-gradient(#5a8f12, #5a8f12) top / 100% 2px no-repeat,
    linear-gradient(#0f8a7e, #0f8a7e) center / 100% 2px no-repeat,
    linear-gradient(#0369a1, #0369a1) bottom / 100% 2px no-repeat;
}

/* High-contrast modes drop background images, which would leave the button
   empty: show the plain icon, drawn in the text colour, instead. */
@media (forced-colors: active) {
  .nav__toggle[aria-expanded="false"]::before { display: none; }
  .nav__toggle[aria-expanded="false"] .nav__toggle-open { display: block; }
}

/* =============================================================
   7. Front page

   Laid out in the current front page's order, with its words. What carries
   the page is what the studio actually makes: the covers, and the client's
   own photographs and service images.
   ============================================================= */

/* --- Main visual ------------------------------------------------ */

.mv { padding-block: var(--s-6) var(--s-4); }

.mv__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-8);
  align-items: center;
}

/* Round buttons either side of the books, level with their middle: the
   books are as tall as 1.05 of the figure.s width (see .mv__covers). */
.kv__nav {
  position: absolute;
  top: 52.5cqw;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--c-green-200);
  border-radius: 50%;
  background: #fff;
  color: var(--c-green-600);
  box-shadow: var(--sh-glow);
  cursor: pointer;
  translate: 0 -50%;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.kv__nav--prev { left: -0.75rem; }
.kv__nav--next { right: -0.75rem; }
.kv__nav--prev svg { scale: -1 1; }
.kv__nav:hover { color: var(--c-green-700); transform: scale(1.06); }
.kv__nav[hidden] { display: none; }

/* Under the books: the slashes, one per book with the one in front lit,
   and the book in front, named and linked. */
.kv__meta {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  text-align: center;
}

/* Which book of how many, set like a page number in a book's margin. */
.kv__count {
  color: var(--c-muted);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-feature-settings: "tnum" 1;
}

.kv__count b {
  color: var(--c-ink);
  font-size: 1.25rem;
  font-weight: 700;
}

.kv__now {
  display: grid;
  gap: 0.1rem;
  min-height: 4.6rem;
}

.kv__now a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--c-green-600);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  text-wrap: balance;
}

.kv__now a:hover { color: var(--c-green-700); text-decoration: underline; text-underline-offset: 0.25em; }

.kv__now-pub {
  color: var(--c-muted);
  font-size: var(--t-small);
}

.mv__title {
  font-size: clamp(1.2rem, 0.95rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.6;
}

.mv__count {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-green-700);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.3;
}

/* The figure in the Latin face and the brand gradient; the words after it
   stay in the Japanese face. */
.mv__num {
  margin-right: 0.1em;
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: 1.6em;
  letter-spacing: 0.02em;
}

.mv__lead {
  max-width: 36rem;
  margin-top: var(--s-5);
  color: var(--c-body);
  font-size: var(--t-lead);
  line-height: 2;
}

/* The current page's 実績20年間 emblem: a laurel either side of the words. */
.laurel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  color: var(--c-green-600);
}

.laurel__branch {
  width: 2.4rem;
  height: 6rem;
  flex: none;
  color: var(--c-green-400);
}

.laurel__branch:last-child { scale: -1 1; }

.laurel__text {
  display: grid;
  justify-items: center;
  color: var(--c-ink);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2em;
}

.laurel__text strong {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.laurel__num {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* The book of the moment in front, two of the latest covers leaning behind
   it, on a soft gradient blob. */
.mv__book {
  position: relative;
  justify-self: center;
  width: min(26rem, 100%);
  margin: 0;
  container-type: inline-size;
}

/* Behind the books only: they stand 1.05 of the figure.s width tall. */
.mv__blob {
  position: absolute;
  top: 4cqw;
  left: 4%;
  right: 0;
  height: 92cqw;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: var(--g-brand);
  opacity: 0.18;
}

.mv__covers {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.05;
  perspective: 1400px;
  transform-style: preserve-3d;
  /* The whole stand drifts up and down, slowly. */
  animation: covers-float 6s ease-in-out infinite alternate;
}

@keyframes covers-float {
  from { translate: 0 0; }
  to   { translate: 0 -10px; }
}

/* The latest covers take turns in depth: each one comes in from far back on
   the right, swings round to the front and settles with a small bounce,
   steps back to the left turned away, and sinks out behind. Every cover
   shares one box and a slot only sets its transform, so each move is one
   transition. Two classes, so this wins over the plain .book rule further
   down. */
.mv__covers .mv__cover {
  position: absolute;
  left: 24%;
  top: 8%;
  width: 52%;
  display: block;
  background: #fff;
  box-shadow: var(--sh-lg);
  opacity: 0;
  filter: brightness(0.9) saturate(0.85);
  transform: translate(78%, 10%) translateZ(-360px) rotateY(-48deg) scale(0.62);
  transition:
    transform 1.1s cubic-bezier(0.22, 0.9, 0.3, 1),
    opacity 0.9s var(--ease),
    filter 0.9s var(--ease),
    box-shadow 0.9s var(--ease);
}

.mv__cover img { width: 100%; }

/* The front one overshoots a touch on arrival, so it lands rather than
   stops. */
.mv__covers .is-front {
  z-index: 3;
  opacity: 1;
  filter: none;
  transform: rotateY(-6deg) rotate(2deg);
  box-shadow: 0 2px 4px rgba(16, 32, 46, 0.14), 0 36px 48px -20px rgba(16, 32, 46, 0.45);
  transition:
    transform 1.1s cubic-bezier(0.34, 1.38, 0.5, 1),
    opacity 0.6s var(--ease),
    filter 0.6s var(--ease),
    box-shadow 0.9s var(--ease);
}

.mv__covers .is-left {
  z-index: 1;
  opacity: 1;
  transform: translate(-54%, -3%) translateZ(-160px) rotateY(30deg) rotate(-4deg) scale(0.86);
}

.mv__covers .is-right {
  z-index: 2;
  opacity: 1;
  transform: translate(54%, 8%) translateZ(-160px) rotateY(-30deg) rotate(4deg) scale(0.84);
}

/* On its way out, behind the others. */
.mv__covers .is-leave {
  z-index: 0;
  opacity: 0;
  transform: translate(-80%, -6%) translateZ(-360px) rotateY(52deg) scale(0.6);
}

/* The name under the books comes in with its book. */
.kv__now.is-in { animation: now-in 0.7s var(--ease) both; }

@keyframes now-in {
  from { opacity: 0; translate: 0 6px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mv__covers,
  .kv__now.is-in { animation: none; }
}


/* --- Services: one group for publishers, one for agencies ------- */

/* Each group is a white panel with its name on a bookmark ribbon hanging
   in over the top edge, the way a ribbon marks a place in a book. */
.svc {
  position: relative;
  margin-top: var(--s-5);
  padding: 4.75rem var(--s-7) var(--s-7);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.svc + .svc { margin-top: var(--s-8); }

/* The ribbon: one flat theme colour each, carrying white (5.5:1 and 5.0:1),
   cut with a notch at its foot. */
.svc__title,
.promise__label {
  position: absolute;
  top: -0.6rem;
  left: var(--s-7);
  padding: 0.75rem 1.6rem 1.4rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.65rem), 0 100%);
  background: var(--c-green-600);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.svc + .svc .svc__title { background: #4d7c0f; }

.svc__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}

.svc__item a {
  display: block;
  color: var(--c-ink);
}

.svc__item img {
  width: 100%;
  aspect-ratio: 448 / 216;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.svc__label {
  display: block;
  margin-top: var(--s-3);
  font-weight: 700;
  line-height: 1.6;
}

.svc__item a:hover { color: var(--c-green-700); }

.svc__item a:hover img {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.svc__item a:hover .svc__label {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Promise: the three promises, one card to a row ---------------- */

.promise {
  display: grid;
  gap: var(--s-6);
  padding-top: 0.6rem;
}

/* A white panel each, the label on a ribbon at the top left. */
.promise__item {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: 4.5rem var(--s-7) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

/* Every second card steps in, so the three read as a lively run rather
   than a table. */
.promise__item:nth-child(2) { margin-left: var(--s-8); }

.promise__label {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
}

/* Three theme colours in turn, each carrying white at 5.0:1 or better. */
.promise__item:nth-child(2) .promise__label { background: #4d7c0f; }
.promise__item:nth-child(3) .promise__label { background: #0e7490; }

.promise__label span {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.promise__title {
  font-size: 1.25rem;
}

.promise__text {
  max-width: 44rem;
}

/* --- Information beside the two banners -------------------------- */

.info {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

/* White rounded cards on the page, the date above the title, each date in
   the next brand colour, as the reference site lists its news. */
.news-list {
  display: grid;
  gap: var(--s-4);
}

.news-list__item {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.news-list__date {
  color: var(--c-green-600);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum" 1;
}

.news-list__item:nth-child(3n+2) .news-list__date { color: #0369a1; }
.news-list__item:nth-child(3n) .news-list__date { color: #4d7c0f; }

.news-list__title { color: var(--c-ink); }

.news-list__title:hover {
  color: var(--c-green-700);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.info__more {
  margin-top: var(--s-5);
  text-align: right;
}

.info__more a {
  color: var(--c-green-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Down by the height of the title beside them, so the banners start level
   with the first entry rather than with the heading. */
.info__banners {
  display: grid;
  gap: var(--s-5);
}

.info__banners a {
  display: block;
  transition: transform 0.25s var(--ease);
}

.info__banners a:hover { transform: translateY(-3px); }

.info__banners img,
.company-tiles img {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

/* --- Company: six tiles, each the client's own picture ----------- */

/* The pictures are 156px wide, as the current site has them; the tiles never
   grow past that, so they stay sharp. */
.company-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 156px));
  justify-content: space-between;
  gap: var(--s-5) var(--s-4);
}

.company-tiles a {
  display: block;
  color: var(--c-ink);
  font-weight: 700;
  text-align: center;
}

.company-tiles img {
  aspect-ratio: 156 / 168;
  object-fit: cover;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.company-tiles span {
  display: block;
  margin-top: var(--s-3);
  line-height: 1.6;
}

.company-tiles a:hover { color: var(--c-green-700); }

.company-tiles a:hover img {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

/* =============================================================
   8. Book covers
   ============================================================= */

/* A jacket scan is a picture of a book, not a book. Flat on a white page it
   reads as stock artwork, which is the wrong claim for a studio whose product
   is a physical object someone picks up in a shop.

   Two marks fix that, both drawn from the artwork's own box so no markup
   changes: the fore-edge stacked to the right of the cover, and the roll of
   the spine down its left with the hinge highlight beside it. Covers stay
   square: a trimmed book is cut square. */
.book {
  position: relative;
  /* Thin books and thick ones are all one scan, so the block is a proportion
     of the cover with a floor and a ceiling rather than a measured spine. */
  --book-edge: clamp(3px, 2.2%, 10px);
  border-radius: 0;
}

.book > img {
  display: block;
  border-radius: 0;
}

/* The page block. Sits outside the jacket so none of the design is covered. */
.book::after {
  content: "";
  position: absolute;
  top: 1.5%;
  right: 0;
  bottom: 1.5%;
  width: var(--book-edge);
  translate: 100% 0;
  /* 1px stripes read as stacked leaves at any size; the wash over the top
     keeps the block from looking like a barcode. */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 1px, rgba(0, 0, 0, 0.07) 1px 2px),
    linear-gradient(90deg, #efe8d9, #c9c0ac);
  box-shadow: 1px 1px 2px rgba(16, 32, 46, 0.18);
}

/* Spine roll and hinge, over the artwork. */
.book::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 32, 46, 0.34) 0, rgba(16, 32, 46, 0.10) 2.4%, rgba(16, 32, 46, 0) 6%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 6.4%, rgba(255, 255, 255, 0.28) 7.5%, rgba(255, 255, 255, 0) 9.4%);
}

/* =============================================================
   9. Works list

   The latest books on the front page and the full listings share one
   layout: the cover standing on the page, the title and the publisher
   under it.
   ============================================================= */

.works-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--s-6);
}

/* Each entry takes three rows of the list (cover, title, publisher) through
   subgrid, so the covers stand on one line however tall each book is and
   the titles start level beneath them. */
.works-list__item,
.works-list__link {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  min-width: 0;
}

.works-list__item { padding-bottom: var(--s-7); }

.works-list__link { color: var(--c-ink); }

.works-list__cover {
  display: block;
  align-self: end;
  background: #fff;
  box-shadow: var(--sh-book);
}

.works-list__cover img { width: 100%; }

.works-list__title {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.6;
}

.works-list__pub {
  margin-top: var(--s-1);
  color: var(--c-muted);
  font-size: var(--t-micro);
}

.works-list__link:hover { color: var(--c-green-700); }

.works-list__link:hover .works-list__title {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.works-list--archive { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* An entry without a cover keeps its place in the row. */
.work__placeholder {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--c-tint);
}

/* =============================================================
   10. Contact band

   Closes the front page, the pages and the entries: the FAQ's own words,
   then the number and the form.
   ============================================================= */

.contact-band { padding-block: var(--s-9); }

/* A white panel lifted off the page by a soft brand-tinted shadow. */
.contact-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6) var(--s-8);
  align-items: center;
  padding: var(--s-8);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.contact-band__title { font-size: var(--t-h2); }

.contact-band__text p { margin-top: var(--s-2); }

.contact-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
}

.contact-band__tel {
  display: grid;
  color: var(--c-green-700);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.contact-band__tel span {
  color: var(--c-body);
  font-family: var(--font-jp);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.contact-band__tel:hover { color: var(--c-green-600); }

/* =============================================================
   11. Footer
   ============================================================= */

/* A pastel brand wash, as the reference site closes its pages; the ink
   carries the text (11:1 or better across it). */
.site-footer {
  position: relative;
  padding-block: var(--s-9) var(--s-5);
  background: linear-gradient(120deg, #e4f5c2 0%, #c9f1df 50%, #cdeefb 100%);
  color: var(--c-ink);
}

.site-footer a { color: var(--c-ink); }

.site-footer a:hover {
  color: var(--c-green-700);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer .brand { color: var(--c-ink); }

.site-footer .brand__kana {
  margin-left: var(--s-1);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.site-footer .brand:hover { text-decoration: none; }
.site-footer .brand__mark { box-shadow: none; }

.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(16, 32, 46, 0.12);
}

.site-footer__about {
  margin-top: var(--s-4);
  font-size: var(--t-small);
}

.site-footer__contact {
  margin-top: var(--s-4);
  font-size: var(--t-small);
}

.site-footer__list li + li { margin-top: var(--s-2); }
.site-footer__list a { font-size: var(--t-small); }

.site-footer__legal {
  padding-block: var(--s-5);
  border-bottom: 1px solid rgba(16, 32, 46, 0.12);
}

.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--t-small);
}

.site-footer__bottom {
  padding-top: var(--s-5);
  color: var(--c-body);
}

/* =============================================================
   12. Back to top
   ============================================================= */

/* The contact button floating in the corner, the same luggage tag as the
   other contact buttons (section 4).
   Only where the header has folded its own contact button into the menu
   (see section 20), and main.js puts it away while the contact band or the
   footer is on screen, so the way to get in touch shows once, not three
   times. */
.float-cta {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  /* Under the header, so an open menu is never covered. */
  z-index: 90;
  display: none;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.85rem 1.9rem 0.85rem 2.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: transform 0.2s var(--ease), opacity 0.3s var(--ease), translate 0.3s var(--ease), visibility 0.3s;
}

.float-cta.is-away {
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
}

.float-cta:hover { color: var(--c-ink); transform: translateY(-2px); }

/* Keyboard focus needs its own ring, clear of the tag. */
.float-cta:focus-visible {
  outline: 2px solid var(--c-green-700);
  outline-offset: 3px;
}

.to-top {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 90;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), translate 0.3s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.to-top__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--sh-md);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.to-top__icon svg { width: 1.25rem; height: 1.25rem; }

.to-top:hover .to-top__icon {
  background: var(--c-ink);
  color: var(--c-surface);
}

/* =============================================================
   13. Blog / archive fallback
   ============================================================= */

.post-card__date {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--c-green-600);
  font-size: var(--t-small);
  font-weight: 700;
}

.pagination {
  margin-top: var(--s-8);
  text-align: center;
}

.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  margin-inline: var(--s-1);
  padding-inline: var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 700;
}

.pagination a.page-numbers:hover { border-color: var(--c-ink); }

.pagination .page-numbers.current {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-surface);
}

/* =============================================================
   14. Utilities and listing heads
   ============================================================= */

/* Figures that should line up: counts, dates. */
.u-display { font-feature-settings: "tnum" 1; }

/* Keeps a word together where auto-phrase still splits it (「役に／立つ」). */
.u-nowrap { white-space: nowrap; }

.ed-head {
  max-width: 44rem;
  margin-bottom: var(--s-8);
}

.ed-head__title {
  font-size: var(--t-h2);
  line-height: 1.5;
}

.ed-head__lead {
  max-width: 40rem;
  margin-top: var(--s-4);
  color: var(--c-muted);
  font-size: var(--t-lead);
}

/* =============================================================
   15. Page hero, breadcrumbs
   ============================================================= */

/* Left aligned, the title under the trail, as the current site opens its
   inner pages. */
.page-hero { padding-block: var(--s-6) var(--s-4); }

.page-hero__eyebrow {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-green-700);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
}

.page-hero__title {
  max-width: 34ch;
  font-size: var(--t-display);
}

.page-hero__lead {
  max-width: 46rem;
  color: var(--c-body);
}

.crumbs {
  margin-bottom: var(--s-5);
  color: var(--c-body);
  font-size: var(--t-small);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.crumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--c-muted);
}

.crumbs a { color: var(--c-green-700); }
.crumbs [aria-current] { color: var(--c-body); }

.section--top-tight { padding-top: var(--s-7); }

.wrap--reading { max-width: 46rem; }

.archive-count {
  margin-bottom: var(--s-5);
  color: var(--c-muted);
  font-size: var(--t-small);
  font-weight: 700;
}

.empty {
  padding-block: var(--s-9);
  text-align: center;
  color: var(--c-muted);
}

/* =============================================================
   16. Prose — content carried over from the previous site
   ============================================================= */

.prose {
  font-size: 0.9375rem;
  line-height: 2;
  overflow-wrap: anywhere;
}

.prose > * + * { margin-top: var(--s-4); }

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  line-height: 1.6;
}

.prose h2 {
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-green-200);
  font-size: 1.35rem;
}

.prose h3 {
  position: relative;
  padding-left: var(--s-4);
  font-size: 1.1rem;
}

.prose h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 1.1em;
  border-radius: var(--r-pill);
  background: var(--c-green-400);
}

.prose h4 { font-size: 1rem; }

/* Some legacy headings are images rather than text; the accent bar makes no
   sense next to those. */
.prose h3:has(> img) {
  padding-left: 0;
  text-align: center;
}

.prose h3:has(> img)::before { display: none; }

.prose a {
  color: var(--c-green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose ul,
.prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-block: var(--s-1); }
.prose li::marker { color: var(--c-green-500); }

.prose img {
  border-radius: var(--r-sm);
  margin-inline: auto;
}

/* Whole covers in place of the cut-off collages on 選ばれる理由 (see
   upline_reason_covers_filter). Three books standing on one line, each
   whole and square-cornered, each a link to its entry. */
.prose .reason-covers {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--s-5);
  padding-block: var(--s-3) var(--s-2);
}

.prose .reason-covers__item {
  width: min(8.5rem, 28%);
  background: #fff;
  box-shadow: var(--sh-book);
  transition: translate 0.25s var(--ease);
}

.prose .reason-covers__item:hover { translate: 0 -4px; }

.prose .reason-covers__item img {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.prose strong { color: var(--c-ink); }

.prose blockquote {
  margin-inline: 0;
  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--c-green-300);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-tint);
  color: var(--c-muted);
}

/* Tables (会社概要 etc.). Rows are separated by a single hairline rather than
   boxed in on all four sides, which reads closer to a spec list than a
   spreadsheet. Wide ones scroll rather than break the page. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  font-size: var(--t-body);
}

.prose th,
.prose td {
  padding: var(--s-4) var(--s-4);
  border: 0;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  position: relative;
  padding-left: var(--s-5);
  color: var(--c-green-700);
  white-space: nowrap;
  font-size: var(--t-small);
  font-weight: 700;
}

/* A short brand tick in place of the old cell border. */
.prose th::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s-4) + 0.45em);
  width: 4px;
  height: 1em;
  border-radius: var(--r-pill);
  background: var(--c-green-400);
}

.prose tr:last-child th,
.prose tr:last-child td { border-bottom: 0; }

.prose tbody tr:hover td,
.prose tbody tr:hover th { background: var(--c-green-50); }

/* The old theme's scaffolding: strip the grid and widget chrome so the text
   flows in this layout instead of fighting it. */
.prose .row,
.prose [class*="col-md-"],
.prose [class*="col-sm-"],
.prose .widget,
.prose .widget_text,
.prose .textwidget,
.prose .gridt,
.prose .minimax_column,
.prose .minimax_content_area,
.prose .block {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  border: 0;
  background: none;
}

.prose .widgettitle {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-green-200);
  color: var(--c-ink);
  font-size: 1.25rem;
  font-weight: 700;
}

.prose .clearfix::after,
.prose .clear {
  content: "";
  display: block;
  clear: both;
}

.prose p.tit {
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  color: var(--c-green-700);
  font-weight: 700;
}

.prose .indent { padding-left: var(--s-4); }

/* Layout blocks from the old theme that the reset above flattened. These were
   float-based pairs and column grids; putting them back as grids keeps the
   original reading order and behaves on small screens. */

/* These blocks carry a clearfix class because they were written around a
   floated image. Restoring the float is truer to the markup than imposing a
   grid, and it copes with the varying child order across pages. */
.prose .detail p.img { float: right; margin: 0 0 var(--s-4) var(--s-6); }
.prose .reason_table p.img { float: left; margin: 0 var(--s-6) var(--s-4) 0; }

.prose .detail::after,
.prose .reason_table::after {
  content: "";
  display: block;
  clear: both;
}

.prose p.img { max-width: 45%; }
.prose p.img img { border-radius: var(--r-sm); }

.prose .ico_step + .ico_step { margin-top: var(--s-7); }

/* 装丁・本文: the design proposals, back in a row.
   Each case is a card of proposals with the chosen one stamped 決定. The old
   markup keeps the stamp outside the list and the old stylesheet pinned it with
   fixed pixel offsets; upline_cover_archives() moves it into the item it marks,
   so it can simply sit in that item's corner at any width. */
.prose .cover_archive {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
}

.prose .cover_archive .tit {
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  font-weight: 700;
}

.prose .cover_archive ul {
  display: grid;
  grid-template-columns: repeat(var(--picks, 5), minmax(0, 1fr));
  gap: var(--s-4);
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose .cover_archive li {
  position: relative;
  margin: 0;
  text-align: center;
  font-size: var(--t-micro);
  font-weight: 700;
}

.prose .cover_archive li::marker { content: none; }

/* These are jackets and spreads, so they are cut square like the rest. */
.prose .cover_archive li img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: 0;
}

/* 本文・誌面 labels its proposals with a filled bar; 装丁 uses bare text. */
.prose .cover_archive li span {
  display: block;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--c-green-400);
  color: #fff;
}

.prose .cover_archive .is-picked img { border-color: var(--c-green-400); }

/* Sitting mostly over its own proposal, with just enough overhang to read as a
   stamp. Pushed further out it starts to look like it belongs to the gap. */
.prose .cover_archive .kettei {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: clamp(44px, 26%, 68px);
  translate: 14% -38%;
}

.prose .cover_archive .kettei img {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.prose .cover_archive .link_genre {
  margin-top: var(--s-4);
  text-align: right;
  font-size: var(--t-small);
}

/* Two-proposal cases (本文・誌面デザイン) would look stranded in five columns. */
.prose .cover_archive:has(li:nth-child(2):last-child) ul { --picks: 2; }
.prose .cover_archive:has(li:nth-child(3):last-child) ul { --picks: 3; }
.prose .cover_archive:has(li:nth-child(4):last-child) ul { --picks: 4; }

@media (max-width: 700px) {
  .prose .cover_archive ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .prose .cover_archive { padding-inline: var(--s-4); }
}

/* 事務所風景: a real gallery again. */
.prose .un_company_office_list {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.prose .un_company_office_list.-col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .un_company_office_list.-col4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prose .un_company_office_img {
  border-radius: var(--r-md);
  overflow: hidden;
}

.prose .un_company_office_img img { width: 100%; }

.prose .un_company_office_text {
  margin-top: var(--s-3);
  color: var(--c-muted);
  font-size: var(--t-small);
  line-height: 1.8;
}

/* Two-column step blocks on the service pages. */
.prose .service_step {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-5);
  align-items: center;
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.prose .service_box_l,
.prose .service_box_r {
  float: none;
  width: auto;
  margin: 0;
}

.prose .service_arw {
  display: block;
  margin: var(--s-3) auto;
  text-align: center;
  color: var(--c-green-400);
}

/* -------------------------------------------------------------
   ブロックエディタで書かれた本文
   スタッフブログは投稿画面から書かれるので、エディタが出力する
   配置クラスとブロックをここで受ける。旧サイトでは回り込みが
   効いていたため、同じ見え方になるようにしている。
   ------------------------------------------------------------- */

.prose .alignleft {
  float: left;
  max-width: 50%;
  margin: var(--s-2) var(--s-6) var(--s-4) 0;
}

.prose .alignright {
  float: right;
  max-width: 50%;
  margin: var(--s-2) 0 var(--s-4) var(--s-6);
}

.prose .aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}

/* Floats inside an article must not escape into the next section. */
.prose::after {
  content: "";
  display: block;
  clear: both;
}

.prose .wp-block-image { margin-block: var(--s-6); }
.prose .wp-block-image img { border-radius: var(--r-md); }

.prose figure { margin: var(--s-6) 0; }

.prose figcaption {
  margin-top: var(--s-2);
  color: var(--c-muted);
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: center;
}

.prose .wp-block-gallery {
  display: grid;
  gap: var(--s-4);
  margin-block: var(--s-6);
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prose .wp-block-gallery.columns-1 { grid-template-columns: minmax(0, 1fr); }
.prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.prose .wp-block-gallery figure,
.prose .wp-block-gallery .blocks-gallery-item { margin: 0; }

.prose .wp-block-gallery img {
  width: 100%;
  border-radius: var(--r-md);
}

.prose .wp-block-embed { margin-block: var(--s-6); }

/* WordPress は既定でブロックごとにCSSを分けて読み込むが、本文が wp_head の
   あとに組み立てられるこの構成では、そのCSSが出力されないまま終わる。
   コアの読み込み方に頼らず、スタッフが使いそうなブロックはここで整える。 */

.prose .wp-block-columns {
  display: grid;
  gap: var(--s-6);
  margin-block: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.prose .wp-block-column > :first-child { margin-top: 0; }

.prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block: var(--s-6);
}

.prose .wp-block-button__link {
  display: inline-block;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  background: var(--c-green-600);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.prose .wp-block-separator {
  height: 0;
  margin-block: var(--s-8);
  border: 0;
  border-top: 1px solid var(--c-line);
}

.prose .wp-block-quote {
  margin-block: var(--s-6);
  padding-left: var(--s-5);
  border-left: 4px solid var(--c-green-200);
}

.prose .wp-block-quote cite {
  display: block;
  margin-top: var(--s-2);
  color: var(--c-muted);
  font-size: 0.875rem;
  font-style: normal;
}

/* 横に長い表は本文の幅を押し広げてしまうので、表の中だけを横スクロールさせる。 */
.prose .wp-block-table {
  margin-block: var(--s-6);
  overflow-x: auto;
}

.prose .wp-block-table table { margin: 0; }

.prose .wp-block-list { padding-left: 1.4em; }

@media (max-width: 640px) {
  /* Below this width a floated image leaves a column of text too narrow to
     read, so the image takes the full measure instead. */
  .prose .alignleft,
  .prose .alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }

  .prose .wp-block-gallery,
  .prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   17. Single entry — works spec, article nav
   ============================================================= */

.entry-thumb {
  margin: 0 0 var(--s-6);
  border-radius: var(--r-md);
  overflow: hidden;
}

.work-single__body {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--s-8);
  align-items: start;
}

.work-gallery__main {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.work-gallery__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
}

.work-gallery__sub li { margin: 0; }

.work-gallery__sub img {
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
}

.work-single__spec {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-tint);
}

.work-single__spec-title {
  margin-bottom: var(--s-4);
  font-size: var(--t-h3);
}

.spec { margin: 0; }

.spec dt {
  margin-top: var(--s-4);
  color: var(--c-green-700);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.spec dt:first-of-type { margin-top: 0; }

.spec dd {
  margin: var(--s-1) 0 0;
  color: var(--c-ink);
  font-size: var(--t-small);
}

.spec__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--c-green-200);
  color: var(--c-green-700);
  font-size: var(--t-micro);
  font-weight: 700;
}

.chip:hover {
  background: var(--c-green-50);
  color: var(--c-green-700);
}

.chip--tag {
  background: var(--c-green-600);
  border-color: transparent;
  color: #fff;
}

.chip--tag:hover { color: #fff; filter: saturate(1.1); }

.entry-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.entry-nav__link {
  flex: 1 1 16rem;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color 0.2s var(--ease);
}

.entry-nav__link:hover { border-color: var(--c-ink); }

.entry-nav__link--next { text-align: right; }

.entry-nav__label {
  display: block;
  color: var(--c-green-600);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.entry-nav__title {
  display: block;
  margin-top: var(--s-1);
  color: var(--c-ink);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.7;
}

/* =============================================================
   18. Archive cards
   ============================================================= */

/* Genre filter above the 制作実績 index. 595 entries need a way in. */
.genre-filter {
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-line);
}

.genre-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.genre-filter .chip {
  gap: var(--s-2);
  padding: 0.4rem 0.9rem;
  font-size: var(--t-small);
}

.chip__count {
  color: var(--c-muted);
  font-size: var(--t-micro);
  font-weight: 700;
}

.genre-filter .chip:hover .chip__count { color: var(--c-green-700); }





.search-form {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
}

.search-form input[type="search"] {
  flex: 1 1 16rem;
  max-width: 22rem;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  font: inherit;
}

.search-form input[type="search"]:focus {
  outline: 2px solid var(--c-green-600);
  outline-offset: 1px;
  border-color: var(--c-green-600);
}

.search-form button,
.search-form input[type="submit"] {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-green-600);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* =============================================================
   19. Inner page layouts

   The title band suits a static content page, but it made every
   inner page open the same way. Works entries, articles and listings each
   get their own opening instead, and on a works page the cover leads rather
   than sitting below a slab of type.
   ============================================================= */

/* --- Standalone breadcrumb, left aligned ---------------------- */

.crumbs--bar {
  margin-bottom: 0;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-tint);
}

.crumbs--bar ol { justify-content: flex-start; }

/* --- Works entry: the cover leads ----------------------------- */

.work-lead {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-8) var(--s-9);
  background: var(--c-tint);
}

.work-lead__inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--s-9);
  align-items: center;
}

.work-lead__cover {
  margin: 0;
  box-shadow: var(--sh-lg);
}

.work-lead__cover img { width: 100%; height: auto; }

.work-lead__title {
  margin-bottom: var(--s-5);
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 600;
  line-height: 1.5;
}

/* Publisher and date read as a single line of catalogue detail. */
.work-lead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.work-lead__fact dt {
  color: var(--c-green-700);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.work-lead__fact dd {
  margin: var(--s-1) 0 0;
  color: var(--c-ink);
  font-size: var(--t-body);
  font-weight: 700;
}

.work-lead__chips { display: grid; gap: var(--s-3); }

.work-lead__chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.work-lead__chip-label {
  color: var(--c-muted);
  font-size: var(--t-micro);
  font-weight: 700;
}

/* --- Works gallery below the lead ----------------------------- */

.work-gallery-section { padding-block: var(--s-9); }

.work-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

/* Printed spreads, trimmed square like the jackets. */
.work-shots figure {
  margin: 0;
  box-shadow: var(--sh-md);
}

.work-shots img { width: 100%; height: auto; }

/* --- Related works -------------------------------------------- */

.related { padding-block: var(--s-9); background: var(--c-tint); }

/* --- Work behind a service page -------------------------------- */

.service-works { position: relative; overflow: hidden; }

.service-works__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.service-works__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.4;
}

.service-works__lead {
  margin: var(--s-2) 0 0;
  color: var(--c-muted);
  font-size: var(--t-small);
}

@media (max-width: 700px) {
  .service-works__head { align-items: start; }
}

/* --- サービスご案内: rebuilt cards ----------------------------- */

.service-intro {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-10);
}

.service-voice { margin: 0; }

.service-voice figcaption {
  color: var(--c-body);
  font-size: var(--t-small);
}

.service-voice blockquote { margin: var(--s-2) 0 0; }

.service-voice p {
  color: var(--c-green-700);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.9;
}

.service-note {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-tint);
  color: var(--c-body);
}

.service-group + .service-group { margin-top: var(--s-10); }

.service-group__heading {
  margin-bottom: var(--s-6);
  padding-left: var(--s-3);
  border-left: 3px solid var(--c-green-400);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.4;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8) var(--s-6);
}

.service-card__link {
  display: block;
  color: var(--c-body);
}

.service-card__media {
  margin: 0 0 var(--s-4);
  background: var(--c-tint);
}

/* The source artwork carries the service name on a bar across the bottom,
   measured at roughly 26% of the 660x438 banner. At 2.2:1 the top 68% shows,
   which clears the bar with room to spare, so the title below is the only one. */
.service-card__media img {
  width: 100%;
  aspect-ratio: 2.2 / 1;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.2s var(--ease);
}

.service-card__title {
  margin-bottom: var(--s-2);
  font-size: 1.125rem;
}

.service-card__text {
  font-size: var(--t-small);
  line-height: 1.9;
}

a.service-card__link:hover .service-card__media img { opacity: 0.85; }

a.service-card__link:hover .service-card__title {
  color: var(--c-green-700);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Contact form --------------------------------------------- */

.form-steps {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
  counter-reset: formstep;
}

.form-steps li {
  flex: 1;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-tint);
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: var(--t-small);
  font-weight: 700;
  text-align: center;
}

.form-steps li::before {
  counter-increment: formstep;
  content: counter(formstep) ". ";
  font-family: var(--font-jp);
}

.form-steps .is-current {
  background: var(--c-green-600);
  border-color: transparent;
  color: #fff;
}

.form-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.form-row:first-of-type { border-top: 1px solid var(--c-line); }

.form-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-top: 0.7rem;
  color: var(--c-ink);
  font-size: var(--t-body);
  font-weight: 700;
}

.form-req {
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--c-green-600);
  color: #fff;
  font-size: var(--t-micro);
  font-weight: 700;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-ink);
  font: inherit;
  line-height: 1.7;
}

.form input:focus,
.form textarea:focus {
  outline: 2px solid var(--c-green-600);
  outline-offset: 1px;
  border-color: var(--c-green-600);
}

.form ::placeholder { color: var(--c-muted); }

.form-zip {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.form-zip input { max-width: 7rem; }

.form-hint {
  margin-top: var(--s-2);
  color: var(--c-muted);
  font-size: var(--t-small);
}

.form-error {
  margin-top: var(--s-2);
  color: #b3261e;
  font-size: var(--t-small);
  font-weight: 700;
}

.form-row--error input,
.form-row--error textarea { border-color: #b3261e; }

.form-value {
  padding: 0.7rem 0;
  color: var(--c-ink);
  font-weight: 500;
  line-height: 1.9;
}

.form-errors {
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1.5px solid #f2b8b5;
  background: #fdf2f2;
}

.form-errors__title {
  margin-bottom: var(--s-2);
  color: #b3261e;
  font-weight: 700;
}

.form-errors ul {
  list-style: disc;
  padding-left: 1.2em;
  color: #b3261e;
  font-size: var(--t-small);
}

/* Never shown to people; catches automated submissions. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

.form-note {
  color: var(--c-muted);
  font-size: var(--t-small);
}

.form-done {
  padding: var(--s-9) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--c-tint);
  border: 1px solid var(--c-line);
  text-align: center;
}

.form-done__title {
  margin-bottom: var(--s-4);
  font-size: 1.35rem;
}

.form-done__text {
  margin-bottom: var(--s-6);
  color: var(--c-muted);
}

/* --- Hub index: child pages as a list --------------------------- */

/* Two to a row, each with the picture the front page uses for that page,
   the title and the page's own opening sentence. */
.hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-8);
  border-top: 1px solid var(--c-line);
}

.hub > li { border-bottom: 1px solid var(--c-line); }

.hub__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-5);
  color: var(--c-ink);
}

.hub__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--c-tint);
  transition: opacity 0.2s var(--ease);
}

.hub__title {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
}

.hub__text {
  display: block;
  margin-top: var(--s-1);
  color: var(--c-muted);
  font-size: var(--t-small);
  line-height: 1.8;
}

.hub__item:hover { color: var(--c-green-700); }
.hub__item:hover .hub__photo { opacity: 0.85; }

.hub__item:hover .hub__title {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Article header ------------------------------------------- */

.article-head {
  max-width: 46rem;
  margin: 0 auto var(--s-7);
}

.article-head__date {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--c-green-600);
  font-family: var(--font-jp);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.article-head__title {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.5;
}

/* Shrinks to the picture rather than stretching it: many of the migrated
   eyecatches are 200px wide, and filling the 736px column blurred them. */
.article-lead-image {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--s-8);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.article-lead-image img { max-width: 100%; height: auto; }

/* --- Archive: one featured entry, then a compact list ---------- */

.feature-post {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  margin-bottom: var(--s-9);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-line);
}

.feature-post__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.feature-post__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.feature-post__title {
  margin-block: var(--s-3) var(--s-4);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
}

.post-list { display: grid; gap: var(--s-6); }

.post-list__item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-line);
}

.post-list__item:last-child { border-bottom: 0; padding-bottom: 0; }

.post-list__media {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-tint);
}

/* Whole, at its own shape: a cover crop cut the company logo in half. */
.post-list__media img {
  width: 100%;
  height: auto;
}

.post-list__title {
  margin-block: var(--s-2) var(--s-2);
  font-size: 1.05rem;
}

.post-list__title a { color: var(--c-ink); }

.post-list__title a:hover {
  color: var(--c-green-700);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.post-list__excerpt {
  color: var(--c-muted);
  font-size: var(--t-small);
}

/* =============================================================
   20. Responsive
   ============================================================= */

/* The header number joins the bar only on screens wide enough to hold it
   beside six menu items and the button. */
@media (min-width: 1440px) {
  .header-tel { display: block; }
}

/* The navigation runs out of room before the rest of the layout does: six
   items, the brand and the call to action stop fitting on one line at about
   1180px, so the bar folds into the drawer there rather than at 1000px. */
@media (max-width: 1180px) {
  .nav__list { display: none; }
  .nav__toggle { display: grid; }

  /* The header's own contact button has gone into the menu: the floating
     one stands in for it, with the back-to-top control above it. */
  .float-cta { display: inline-flex; }
  .to-top { bottom: calc(var(--s-5) + 4.5rem); }

  /* The header CTA moves into the drawer so the bar never overflows; the
     number takes its place while there is room for it. */
  .nav > .btn--primary { display: none; }
  .header-tel { display: block; }
  .nav__drawer-only a { color: var(--c-green-700); font-weight: 700; }
  .brand { font-size: 1rem; }
  .brand__mark { width: 1.875rem; height: 1.875rem; }

  /* Mobile drawer */
  .nav__list.is-open {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* A phone on its side is shorter than the list: the drawer scrolls. */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-5) var(--s-5);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-md);
  }

  .nav__list.is-open .nav__drawer-only { display: block; }

  .nav__list.is-open li + li { border-top: 1px solid var(--c-line); }
  .nav__list.is-open a { display: block; padding-block: var(--s-3); }
  .nav__list.is-open a::after { display: none; }
}

@media (max-width: 1000px) {
  /* Front page: the copy first, the book under it. */
  .mv__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .mv__book { width: min(22rem, 100%); }
  .promise__item:nth-child(2) { margin-left: 0; }
  .svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info { grid-template-columns: 1fr; }
  .info__banners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    padding-top: 0;
  }
  .contact-band__inner { grid-template-columns: 1fr; }
  /* One entry to a row: two left too little room for a title beside its
     picture (「DTPオペレーショ／ン」). */
  .hub { grid-template-columns: 1fr; }

  .works-list--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The spec panel drops below the images and stops sticking. */
  .work-single__body { grid-template-columns: 1fr; gap: var(--s-6); }
  .work-single__spec { position: static; }
  .prose .service_step { grid-template-columns: 1fr; }


  /* Labels move above their fields once the pair no longer fits. */
  .form-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .form-label { padding-top: 0; }
  .form-steps li { font-size: var(--t-micro); }

  /* Inner pages: the cover moves above the details. */
  .work-lead__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .work-lead__cover { max-width: 20rem; }
  .feature-post { grid-template-columns: 1fr; gap: var(--s-5); }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: span 2; }
}

@media (max-width: 700px) {
  :root { --s-10: 3.5rem; --s-9: 2.75rem; }

  .brand { font-size: 0.875rem; gap: var(--s-2); }

  /* The bar holds the brand and the menu button and nothing else; the
     number is in the band at the foot of every page. */
  .header-tel { display: none; }

  /* Front page */
  .mv { padding-block: var(--s-7) var(--s-4); }
  .svc__list { gap: var(--s-5) var(--s-4); }
  .svc__label { font-size: var(--t-small); }
  .works-list,
  .works-list--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
  /* Two to a row leaves about 13 characters a line; a step smaller, the
     longer single-word titles still fit whole. */
  .works-list__title { font-size: var(--t-micro); }
  /* Six books, three rows: the full list is one tap away. */
  .works-list--latest .works-list__item:nth-child(n+7) { display: none; }
  .promise__item { padding: 4.85rem var(--s-5) var(--s-5); }
  /* The longest titles need a third line at the narrowest widths. */
  .kv__now a { -webkit-line-clamp: 3; }
  .kv__now { min-height: 6rem; }
  .promise__label {
    left: var(--s-5);
    max-width: calc(100% - 2 * var(--s-5));
    flex-wrap: wrap;
    padding-inline: 1.25rem;
    font-size: 1rem;
    white-space: normal;
  }
  .news-list__item { grid-template-columns: 1fr; gap: var(--s-1); }
  .info__banners { grid-template-columns: 1fr; }
  .company-tiles {
    grid-template-columns: repeat(3, minmax(0, 156px));
    gap: var(--s-4) var(--s-3);
  }
  .company-tiles a { font-size: var(--t-small); }
  .btn--ghost { min-width: 0; width: 100%; }
  .contact-band__inner { padding: var(--s-7) var(--s-5); border-radius: var(--r-lg); }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
  .to-top { right: var(--s-4); bottom: calc(var(--s-4) + 3.75rem); }
  .float-cta {
    right: var(--s-4);
    bottom: var(--s-4);
    min-height: 3rem;
    padding: 0.65rem 1.3rem 0.65rem 2.3rem;
    font-size: var(--t-small);
  }
  /* Room at the foot of the page, so the floating button never sits over
     the last line of the footer. */
  .site-footer { padding-bottom: 8.5rem; }
  .kv__nav { width: 2.75rem; height: 2.75rem; }
  .kv__nav--prev { left: -0.25rem; }
  .kv__nav--next { right: -0.25rem; }
  .svc { padding: 4.5rem var(--s-4) var(--s-5); }
  /* INFORMATION is the widest name: the marks come in close at phone width. */
  .sec-head__crop { max-width: 100%; padding-inline: var(--s-4); }
  .sec-head__en { font-size: clamp(1.9rem, 1rem + 4.6vw, 2.25rem); }
  .svc__title {
    left: var(--s-4);
    max-width: calc(100% - 2 * var(--s-4));
    padding-inline: 1.25rem;
    font-size: 0.9375rem;
    white-space: normal;
  }

  .work-gallery__sub { grid-template-columns: 1fr; }
  .entry-nav__link--next { text-align: left; }

  /* Legacy layout pairs stack rather than squeeze. */
  .prose .detail p.img,
  .prose .reason_table p.img {
    float: none;
    max-width: 100%;
    margin: var(--s-4) 0;
  }
  .prose .un_company_office_list.-col2,
  .prose .un_company_office_list.-col4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .service-cards { grid-template-columns: 1fr; }
  .work-shots { grid-template-columns: 1fr; }
  .post-list__item { grid-template-columns: 5.5rem 1fr; gap: var(--s-4); }
}

/* The smallest phones: beside a picture, a list entry had about ten
   characters a line and broke 「…新聞」 / 「の」 / 「…しまし」 / 「た！」.
   The picture goes above instead. */
@media (max-width: 360px) {
  .post-list__item { grid-template-columns: 1fr; gap: var(--s-3); }
  .post-list__media { max-width: 8.5rem; }
}

/* =============================================================
   21. Print

   The brand is flat colour now, so it reaches paper as it is, provided the
   browser is told to keep backgrounds. What is left is to drop what only
   works on screen and to say where a page may break.
   ============================================================= */

@media print {
  /* No `size`: the paper is whatever the reader picked in the
     dialog. Forcing A4 here would only scale their choice down. */
  @page { margin: 12mm 10mm; }

  /* The tinted bands and the lime rules are part of the layout, and
     browsers drop background colour unless asked to keep it. */
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body { background: #fff; }

  /* Motion says nothing on paper, and a soft shadow prints as grey
     mush. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
  }

  /* With the shadow gone, a hairline keeps a pale cover off white
     paper. */
  .book { outline: 1px solid var(--c-line); }

  /* Things that only mean something on screen. */
  .nav,
  .to-top,
  .genre-filter,
  .search-form,
  .pagination,
  .entry-nav,
  .form-steps,
  .form-actions { display: none !important; }

  /* The header stays, for the logo, but stops floating. */
  .site-header { position: static; }

  /* Screen spacing is built for a scroll. Left alone on A4 it pushes
     whole blocks onto the next sheet and leaves the one before it
     half empty. */
  .mv { padding-block: var(--s-5); }
  /* On paper the copy and the books stack, the books a fixed small size, so
     the main visual sits well inside the first sheet on any paper or margin
     rather than just fitting, and being pushed whole onto the second. */
  .mv__inner { display: block; }
  .mv__book { width: 60mm; margin: var(--s-5) auto 0; }
  /* The ribbons sit inside their panel on paper, so a page break never
     leaves one at the foot of a sheet with its panel on the next. */
  .svc__title,
  .promise__label { top: 0; }
  /* Controls for the turning covers mean nothing on paper. */
  .kv__nav,
  .kv__meta,
  .float-cta { display: none !important; }
  .section { padding-block: var(--s-6); }
  .contact-band { padding-block: var(--s-6); }
  .site-footer { padding-block: var(--s-6) var(--s-4); }

  /* Never strand a heading at the foot of a sheet, and never split
     an entry or a figure across two. */
  h1, h2, h3, h4,
  .head,
  .ed-head,
  .sec-head,
  .page-hero__title,
  .service-group__heading {
    break-after: avoid;
    break-inside: avoid;
  }

  .mv__book,
  .svc,
  .svc__item,
  .works-list__item,
  .promise__item,
  .news-list__item,
  .company-tiles li,
  .contact-band,
  .hub__item,
  .service-card,
  .service-works__item,
  .post-list__item,
  .work-lead,
  .site-footer,
  figure,
  img,
  table,
  blockquote { break-inside: avoid; }

  /* Plain text. Printing the URL after every link would wreck the
     Japanese line rhythm, and the reader has the site open anyway. */
  a { text-decoration: none; }
}