/* Lumenium brand layer for the static pages (service details, 会社概要,
   料金, 実績, FAQ, ブログ…). Loaded after each page's own <style>, so these
   pages read exactly like the landing page: paper-light ground, black ink,
   Mincho headings, one indigo for links and the button you should press.
   Shared by every generated page (scripts/build-content-pages.mjs,
   build-service-pages.mjs) and the handwritten legal page. */

:root {
  --bg: #f6f4ef; --card: #fbfaf7; --border: rgba(23,23,28,.14);
  --text: #17171c; --sub: #45454f;
  --ink: #17171c; --ink-soft: #45454f; --ink-mute: #75757f;
  --accent: #3d3fbf; --accent-2: #2f31a3; --hair: rgba(23,23,28,.12);
  --serif: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
html, body { background: #f6f4ef !important; color: var(--ink); }
body { font-family: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; letter-spacing: .02em; }

/* ---------- Logotype (ink) ---------- */
.wm {
  display: inline-block; font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400;
  letter-spacing: -0.005em; --wm-lh: 0.95; line-height: var(--wm-lh); white-space: nowrap; color: var(--ink);
}
.wm-t { color: var(--ink); }
.wm-iw { position: relative; display: inline-block; }
.wm-i { clip-path: inset(34% 0 0 0); }
.wm-iw::after {
  content: ''; position: absolute; left: 0.131em; top: calc(0.28em - (1.1075em - var(--wm-lh) * 1em) / 2);
  width: 0.24em; height: 0.24em; transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath fill='%233d3fbf' d='M0.000 -1.000L0.077 -0.185L0.396 -0.396L0.185 -0.077L1.000 0.000L0.185 0.077L0.396 0.396L0.077 0.185L0.000 1.000L-0.077 0.185L-0.396 0.396L-0.185 0.077L-1.000 0.000L-0.185 -0.077L-0.396 -0.396L-0.077 -0.185Z'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none;
}

/* ---------- Brand bar ---------- */
header.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
header.brandbar a { text-decoration: none; }
header.brandbar .brand { display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); }
header.brandbar .brand .wm { font-size: 28px; }
header.brandbar .brand small { font-size: 10.5px; letter-spacing: .3em; color: var(--ink-mute); }
header.brandbar .home { font-size: 13px; color: var(--accent); font-weight: 600; }

/* ---------- Type ---------- */
.eyebrow, .group { font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--ink-mute); text-transform: none; }
h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 4.6vw, 38px); line-height: 1.5; letter-spacing: .02em;
  color: var(--ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important;
}
article h2, .wrap h2, .qa dt, .contact-strip h2, main h2 {
  font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.6; letter-spacing: .03em;
  color: var(--ink); border: 0 !important; padding-left: 0 !important;
}
.qa dt { font-size: 17px; margin-top: 28px; }
article h3, h3 { font-weight: 700; color: var(--ink); }
article p, .lead, .qa dd, article li, li, p, dd { color: var(--ink-soft); }
article p, .qa dd { font-size: 15px; line-height: 2; }
article li::before, li::before { color: var(--accent) !important; }
.meta, .facts dt, .list time, dt { color: var(--ink-mute) !important; }
.facts, dl { background: var(--card) !important; border: 1px solid var(--hair) !important; backdrop-filter: none !important; }
.facts div, dl > div { border-bottom-color: var(--hair) !important; }
.facts dd, dd { color: var(--ink) !important; }
a { color: var(--accent); }
.facts a, dd a { color: var(--accent) !important; }
.note, article p.keypoint { border-left: 2px solid var(--accent) !important; background: var(--card); color: var(--ink) !important; }
article p.keypoint { border: 1px solid var(--hair) !important; border-left: 3px solid var(--accent) !important; }
.price, .contact-strip, section[style] {
  background: var(--card) !important; border: 1px solid var(--hair) !important; color: var(--ink) !important;
}
section[style] h2, section[style] p { color: var(--ink) !important; }
.list li { border-bottom-color: var(--hair) !important; }
.list li::before { content: none !important; }
.list a { color: var(--ink) !important; }
.list a:hover { color: var(--accent) !important; }
.others a { border-color: var(--hair) !important; color: var(--ink-soft) !important; }
.others a:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
.sub { color: var(--ink-soft) !important; }

/* ---------- Buttons ---------- */
.cta a, a.back, section[style] a[style] {
  border-radius: 8px !important; font-weight: 700; letter-spacing: .04em; text-transform: none !important;
}
.cta .primary, section[style] a[style*="gradient"] { background: var(--accent) !important; color: #fff !important; border: 1px solid var(--accent) !important; }
.cta .primary:hover { background: var(--accent-2) !important; }
.cta .ghost, a.back { background: transparent !important; border: 1px solid rgba(23,23,28,.3) !important; color: var(--ink) !important; }
.cta .ghost:hover, a.back:hover { border-color: var(--ink) !important; }

footer { border-top-color: var(--hair) !important; }
footer, footer a { color: var(--ink-mute) !important; }
footer a:hover { color: var(--ink) !important; }

@media (max-width: 480px) {
  header.brandbar .brand .wm { font-size: 24px; }
  header.brandbar .brand small { display: none; }
}
.others span { font-size: 12px; color: var(--ink-soft); padding: 5px 12px; border: 1px solid var(--hair); border-radius: 999px; }

/* Reference material (the brand/disambiguation Q&A and question-shaped
   FAQs written for search and AI answers): collapsed, so a reader sees the
   page and can open it if they want. Collapsed content is still part of
   the page for search engines. */
details.ref { margin: 28px 0 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
details.ref > summary {
  cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative;
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
details.ref > summary::-webkit-details-marker { display: none; }
details.ref > summary::after { content: '+'; position: absolute; right: 4px; top: 13px; font-size: 18px; color: var(--ink-mute); }
details.ref[open] > summary::after { content: '−'; }
details.ref[open] { padding-bottom: 12px; }
details.ref + details.ref { margin-top: 0; border-top: 0; }
/* Q&A panels: the text sat flush against the panel's edge. */
dl.qa { padding: 6px 20px 18px; border-radius: 10px; }
.wm .wm-iw > .wm-i { display: inline-block; -webkit-transform: translateZ(0); }

/* =========================================================================
   Page frame (scripts/_page-frame.mjs): the same header as the top page,
   a full-width title band, then text + sticky sidebar on a computer and
   one column on a phone.
   ========================================================================= */
.site-in { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.site-hd { position: sticky; top: 0; z-index: 50; background: #f6f4ef; border-bottom: 1px solid var(--hair); }
.site-hd-in { height: 68px; display: flex; align-items: center; gap: 28px; }
.site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-logo .wm { font-size: 26px; }
.site-nav { display: flex; gap: 24px; margin-left: auto; }
.site-nav a { font-size: 14px; color: var(--ink-soft) !important; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink) !important; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 4px; }
.site-cta, .side-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px;
  border-radius: 8px; background: var(--accent); color: #fff !important; font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-decoration: none;
}
.site-cta:hover, .side-btn:hover { background: var(--accent-2); }

.page-head { border-bottom: 1px solid var(--hair); padding: 64px 0 48px; }
.page-head .eyebrow { margin: 0 0 14px; }
.page-head h1 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 16px; max-width: 22em; }
.page-head .meta, .page-head .lead { font-size: 16px; line-height: 1.9; color: var(--ink-soft) !important; max-width: 44em; margin: 0; }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 72px; align-items: start; padding-top: 48px; padding-bottom: 72px; }
.page-main { min-width: 0; max-width: 760px; }
.page-main > h2:first-child, .page-main > article > h2:first-child { margin-top: 0; }
.page-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px; }
.side-title { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-mute) !important; margin: 0 0 10px; }
.side-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair); }
.side-toc li { padding: 0; margin: 0; border: 0 !important; }
.side-toc li::before { content: none !important; }
.side-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft) !important; text-decoration: none; }
.side-toc a:hover { color: var(--ink) !important; border-left-color: var(--accent); }
.side-cta { background: #fff; border: 1px solid var(--hair); border-radius: 10px; padding: 20px; }
.side-cta p:not(.side-title) { font-size: 13.5px; line-height: 1.8; margin: 0 0 14px; }
.side-btn { width: 100%; }
[id] { scroll-margin-top: 88px; }

.site-ft { border-top: 1px solid var(--hair) !important; margin: 0 !important; padding: 28px 0 40px; display: block !important; }
.site-ft .site-in { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12.5px; }

/* FAQs on a computer: question on the left, answer on the right. */
@media (min-width: 1024px) {
  dl.qa { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; padding: 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0; }
  dl.qa dt { margin: 0 !important; padding: 20px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
  dl.qa dd { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--hair); }
}

/* Tablet: no sidebar; the page already ends with the contact block. */
@media (max-width: 1023px) {
  .page-grid { grid-template-columns: 1fr; gap: 0; }
  .page-side { display: none; }
  .page-main { max-width: none; }
}
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .site-in { padding: 0 16px; }
  .site-hd-in { height: 58px; gap: 12px; }
  .site-logo .wm { font-size: 22px; }
  .site-logo img { width: 24px; height: 24px; }
  .site-cta { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .page-head { padding: 36px 0 28px; }
  .page-head h1 { font-size: 26px; }
  .page-grid { padding-top: 28px; padding-bottom: 48px; }
}
dl.qa dt { color: var(--ink) !important; }

/* Footer, the same as the top page's: a dark band, brand and note on the
   left, three columns of links, a thin bottom line. */
.site-ft { background: #15162b !important; color: #c9c8c1; border-top: 0 !important; padding: 72px 0 0 !important; }
.site-ft a { color: #c9c8c1 !important; text-decoration: none; }
.site-ft a:hover { color: #ffffff !important; }
.ft-grid { display: grid !important; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; font-size: 14px; }
.ft-logo { display: inline-flex; align-items: center; gap: 12px; }
.ft-name { display: inline-flex; flex-direction: column; line-height: 1; }
.ft-name .wm { font-size: 32px; }
.site-ft .wm .wm-t, .site-ft .wm .wm-i { color: #f2f1ec !important; -webkit-text-fill-color: #f2f1ec !important; }
.site-ft .wm-iw::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath fill='white' d='M0.000 -1.000L0.077 -0.185L0.396 -0.396L0.185 -0.077L1.000 0.000L0.185 0.077L0.396 0.396L0.077 0.185L0.000 1.000L-0.077 0.185L-0.396 0.396L-0.185 0.077L-1.000 0.000L-0.185 -0.077L-0.396 -0.396L-0.077 -0.185Z'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 0.08em rgba(165, 180, 252, .9)); }
.ft-name small { margin-top: 8px; font-size: 11px; letter-spacing: .3em; color: #a9a8a1; }
.ft-tag { margin: 20px 0 10px !important; font-size: 15px; font-weight: 700; color: #f2f1ec !important; }
.ft-sub { margin: 0 0 18px !important; font-size: 13.5px; line-height: 2; color: #a9a8a1 !important; }
.ft-facts { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.ft-facts div { display: flex; gap: 18px; padding: 4px 0; border: 0 !important; font-size: 13.5px; }
.ft-facts dt { color: #a9a8a1 !important; font-size: 12px; letter-spacing: .2em; font-weight: 700; }
.ft-facts dd { color: #f2f1ec !important; margin: 0; }
.ft-col { display: flex; flex-direction: column; gap: 14px; }
.ft-h { margin: 0 0 6px !important; font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #a9a8a1 !important; padding-bottom: 12px; position: relative; }
.ft-h::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 1px; background: rgba(180, 189, 246, .55); }
.ft-bottom { display: flex !important; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; padding: 22px 32px 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12px; color: #a9a8a1; }
.ft-bottom span { margin-right: auto; }
@media (max-width: 900px) {
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-ft { padding-top: 48px !important; }
  .ft-grid { gap: 32px 20px; }
  .ft-bottom { padding: 20px 16px 26px; }
  .ft-bottom span { margin-right: 0; flex-basis: 100%; }
}

/* 次に読む */
.next-read { margin: 48px 0 8px; }
.next-read-h { font-size: 12.5px !important; font-weight: 700; letter-spacing: .06em; color: var(--ink-mute) !important; margin: 0 0 12px !important; }
.next-read-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.next-read a { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #fff; border: 1px solid var(--hair); border-radius: 10px; text-decoration: none; transition: border-color .2s; }
.next-read a:hover { border-color: var(--ink); }
.nr-t { font-size: 15px; font-weight: 700; color: var(--accent); }
.nr-d { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 720px) { .next-read-grid { grid-template-columns: 1fr; } }
.nr-t { line-height: 1.5; font-size: 14.5px; }
.nr-d { margin-top: 0; }