/* 案05 サイバー・HUD: ブラッシュアップ
   2026-10-22 Fable 5.1（コントラストと文字の大きさ）
   2026-10-23 広告代理店としての打ち出し（集客の進め方・自社開発ツール・サイトの収益化のご相談を追加）
   元の style.css の後に読み込む上書きだけ。配色（漆黒・ネオンシアン・ネオンマゼンタ）と HUD の部品（角だけのブラケット・
   目盛り・等幅のラベル）はそのまま使い、色を足さない。 */

/* =========================================================
   0. colours: grey text a little brighter on the black
   ========================================================= */
:root { --text-2: #C4D2DC; --text-3: #91A4B1; }
.profile-table th { color: #fff; }

/* =========================================================
   1. type scale
   PC 13 / 16 / 18 / 22 / 28 / 42, tablet 13 / 16 / 18 / 22 / 28 / 36, phone 13 / 16 / 18 / 20 / 24 / 28.
   No 1px neighbours (12/13, 15/16, 16/17, 17/18 were all in use before).
   ========================================================= */
.logo__ja { font-size: 13px; letter-spacing: .14em; }
/* the logo name is katakana now (2026-10-31, the client does not use the English name): Orbitron has no kana */
.logo__en { font-family: var(--f-ja); }
.btn--sm { font-size: 16px; }
.hero__eyebrow { font-size: 16px; }
.hero__title { font-size: 42px; }
.hero__lead { font-size: 18px; }
.hero__catch { font-size: 16px; }
.hero__scroll { font-size: 13px; }
.sec-title { font-size: 28px; }
.scan__head .sec-title, .query__head .sec-title, .profile__head .sec-title, .terminal__title, .inhouse__claim { font-size: 42px; }
.scan__note, .warn__text, .log-item__text { font-size: 18px; }
.modules__lead, .mod__en, .origin__word { font-size: 28px; }
.mod__io dt, .hub__code, .spec-item__en, .step__en, .terminal__en, .locator__label,
.profile-table th .mono, .form__title .mono, .req { font-size: 13px; }
.mod__text, .mod__io dd, .hub__text, .spec-item__body p:last-child, .step__body p { font-size: 16px; }
.hub__title, .step__title, .locator__place, .spec__lead, .philosophy { font-size: 22px; }
.profile-table th, .field label, .site-footer__addr, .site-footer__links a { font-size: 16px; }
.tel-big__num { font-size: 52px; }
@media (min-width: 1024px) {
  .gnav__tel { font-size: 16px; }
  /* the CTA keeps dark text when the scroll-spy marks it current (it turned light on cyan) */
  .gnav__cta a[aria-current] { color: #05070C; }
}
@media (min-width: 1200px) { .rail__name { font-size: 13px; } }
@media (min-width: 1024px) and (max-width: 1199px) { .inhouse__claim { font-size: 36px; } }

/* =========================================================
   2. reading width, spacing, WebKit repaint
   ========================================================= */
.sec { padding: clamp(72px, 8vw, 112px) 0; }
/* ...but the grid floor under the form keeps its own bottom space */
.contact { padding-bottom: clamp(160px, 18vw, 240px); }
.inhouse__body > p:not(.sec-code):not(.inhouse__claim), .contact__lead, .modules__intro p:not(.modules__lead) { max-width: 40em; }
.core__panel--origin p:last-child { max-width: 36em; }
/* own stacking context for the translucent panels: WebKit otherwise kept stale text in screenshots */
.qa, .mod, .warn, .hub, .terminal, .locator, .form, .tool, .advice { isolation: isolate; }
/* the question cards needed paint containment for the same WebKit repaint (they have no outside brackets to clip) */
.qa { contain: paint; }

/* line breaks that BudouX cannot help with (one long phrase): the address breaks only at its space,
   the short I/O labels only at the marked separators */
.profile-table .addr, .site-footer__addr { word-break: keep-all; overflow-wrap: anywhere; text-wrap: wrap; }
/* Chromium's "pretty" broke the business row before a "／"; plain wrapping keeps to the marked breaks */
.profile-table td { text-wrap: wrap; }
.mod__io dd { word-break: keep-all; }

/* leads of two or three sentences: one sentence per line where it fits, so lines never split "また|集める" */
.lead-line { display: block; text-wrap: balance; }

/* hero label over the video: a dark strip under it keeps 4.5:1 on any frame */
.hero__eyebrow { width: fit-content; padding: 4px 12px; background: rgba(5, 7, 12, .78); }

/* header: the PC bar shows the main items; the phone / tablet menu lists every section */
@media (min-width: 1024px) { .gnav__list .gnav__sub { display: none; } }

/* =========================================================
   3. 02 modules: advertising first and widest
   ========================================================= */
@media (min-width: 1200px) { .board__mods { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }
.board__mods > .mod:first-child {
  border-color: rgba(0, 240, 255, .34);
  background: linear-gradient(180deg, rgba(0, 240, 255, .07), rgba(0, 240, 255, 0) 60%), var(--panel);
}
.board__mods > .mod:first-child .mod__title { font-size: 28px; }
.mod__channels { margin: 0 0 22px; }
.mod__ch-label { margin: 0 0 10px; font-size: 13px; letter-spacing: .16em; line-height: 1.5; color: var(--cyan); }
.mod__channels ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mod__channels li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 240, 255, .26);
  background: rgba(0, 240, 255, .04);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.mod__channels li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--magenta); transform: rotate(45deg); }

/* small laptops: one module per row (the tablet arrangement), so the long SEO text is not squeezed */
@media (min-width: 1024px) and (max-width: 1199px) {
  .board { padding-left: 34px; }
  .board__mods { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mod {
    display: grid;
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head text" "title text" ". io";
    column-gap: 32px;
  }
  .mod__head { grid-area: head; }
  .mod__title { grid-area: title; align-self: start; }
  .mod__text { grid-area: text; margin-bottom: 16px; }
  .mod__io { grid-area: io; }
  .mod__bus { display: none; }
  .hub { width: 100%; margin: 28px 0 0; }
  /* footer: links on their own row, so the address keeps one line */
  .site-footer__grid { grid-template-columns: auto minmax(0, 1fr); }
  .site-footer__links { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .board__mods > .mod:first-child {
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "head text" "title text" ". chan" ". io";
  }
  .mod__channels { grid-area: chan; }
  /* "アフィリエイト広告" stays on one line in the narrower text column */
  .mod__channels ul { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
}

/* =========================================================
   4. 03 flow: four stages on one rail, closed into a loop (static)
   ========================================================= */
.flow__head, .tools__head {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px 72px;
  align-items: end;
  margin-bottom: 48px;
}
.flow__lead, .tools__lead { margin: 0; max-width: 39em; font-size: 18px; font-weight: 500; line-height: 1.8; }
.flow-map { position: relative; padding-top: 48px; }
/* arrow head where the loop comes back into 01 */
.flow-map::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 41px;
  z-index: 2;
  border-style: solid;
  border-width: 7px 5px 0;
  border-color: var(--magenta) transparent transparent;
}
.flow__loop {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 14px;
  transform: translateX(-50%);
  background: var(--bg);
  color: var(--magenta);
  font-size: 13px;
  letter-spacing: .2em;
  line-height: 28px;
  white-space: nowrap;
}
.flow__loop .ico { width: 13px; height: 13px; }
.flow-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the rail from the first node centre to the last node centre */
.flow-list::before {
  content: "";
  position: absolute;
  left: 22px;
  right: calc((100% - 72px) / 4 - 22px);
  top: 21px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 10px rgba(0, 240, 255, .35);
}
/* the return path from 04 back to 01, drawn above the rail */
.flow-list::after {
  content: "";
  position: absolute;
  left: 22px;
  right: calc((100% - 72px) / 4 - 22px);
  top: -34px;
  height: 34px;
  border: 1px dashed rgba(255, 46, 136, .6);
  border-bottom: 0;
}
.flow-step { position: relative; padding-top: 68px; }
.flow-step__node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--f-en);
  font-size: 14px;
  font-weight: 800;
  color: var(--cyan);
  background: var(--bg);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 14px rgba(0, 240, 255, .35);
}
.flow-step:last-child .flow-step__node { color: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 14px rgba(255, 46, 136, .4); }
.flow-step__en { margin: 0 0 2px; font-size: 13px; letter-spacing: .2em; line-height: 1.6; color: var(--cyan); }
.flow-step__title { margin: 0 0 14px; font-size: 22px; font-weight: 800; line-height: 1.45; }
.flow-step__items { display: grid; margin: 0; border-top: 1px solid var(--line); }
.flow-step__items > div { padding: 12px 0 14px; border-bottom: 1px dashed rgba(0, 240, 255, .2); }
.flow-step__items dt { font-weight: 700; line-height: 1.6; }
.flow-step__items dd { margin: 2px 0 0; color: var(--text-2); line-height: 1.75; }

/* =========================================================
   5. 04 tools: two HUD modules, each screen inside the brackets
   ========================================================= */
.tools__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.tool { padding: 22px 26px 28px; background: var(--panel); border: 1px solid rgba(0, 240, 255, .16); }
.tool__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--cyan);
}
.tool__plan { color: var(--text-2); letter-spacing: .08em; }
.tool__screen { margin: 0; }
/* both screens in the same frame ratio (the reportio one), so the two modules line up; only the empty
   bottom margin of the taller LINE screen is cut */
.tool__screen img { width: 100%; aspect-ratio: 1600 / 889; object-fit: cover; object-position: top; border: 1px solid rgba(0, 240, 255, .3); }
.tool__note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-2); text-align: right; }
.tool__id { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.tool__logo { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: #fff; }
.tool__logo img { width: 100%; height: 100%; }
/* reportio-logo.png is a white square (52-460px of 512) on a pale margin: show the square only */
.tool__logo--crop img { position: absolute; left: -12.75%; top: -12.75%; width: 125.5%; height: 125.5%; max-width: none; }
.tool__name { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; }
.tool__read { margin: 2px 0 0; font-size: 13px; letter-spacing: .08em; line-height: 1.6; color: var(--text-2); }
.tool__catch { margin: 18px 0 0; font-size: 18px; font-weight: 700; line-height: 1.7; }
.tool__text { margin: 10px 0 0; color: var(--text-2); }
.tool__list {
  display: grid;
  gap: 6px 24px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px dashed rgba(0, 240, 255, .28);
}
.tool__list li { position: relative; padding-left: 22px; line-height: 1.7; }
.tool__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}

/* =========================================================
   6. 05 monetize: the advice list in one HUD panel
   ========================================================= */
.monetize__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; }
.monetize__lead { margin: 20px 0 0; font-size: 18px; font-weight: 500; line-height: 1.8; }
.monetize__note { margin: 14px 0 0; color: var(--text-2); }
.advice { background: var(--panel); border: 1px solid rgba(0, 240, 255, .16); }
.advice__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 26px;
  font-size: 13px;
  letter-spacing: .2em;
  line-height: 1.5;
  color: var(--cyan);
  background: rgba(0, 240, 255, .04);
  border-bottom: 1px solid rgba(0, 240, 255, .2);
}
.advice__bar span + span { color: var(--text-3); }
.advice-list { margin: 0; padding: 4px 26px 6px; list-style: none; }
.advice-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px dashed rgba(0, 240, 255, .18);
}
.advice-item:last-child { border-bottom: 0; }
.advice-item__no { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--magenta); }
.advice-item__title { margin: 0 0 4px; font-size: 18px; font-weight: 800; line-height: 1.6; }
.advice-item p { margin: 0; color: var(--text-2); }

/* =========================================================
   TABLET (641px - 1023px)
   ========================================================= */
@media (max-width: 1023px) {
  /* the terrain band above the two panels (the shorter .sec padding had pushed the panels into it) */
  .core { padding: var(--band) 0 120px; }
  .header-tel { font-size: 16px; }
  .hero__title { font-size: 36px; }
  .scan__head .sec-title, .query__head .sec-title, .profile__head .sec-title, .terminal__title, .inhouse__claim { font-size: 36px; }
  .modules__lead { font-size: 22px; }
  .tel-big__num { font-size: 36px; }

  .flow__head, .tools__head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 36px; }

  /* flow: a vertical rail like the request steps; the loop becomes a note under 04 */
  .flow-map { display: flex; flex-direction: column; padding-top: 0; }
  .flow-map::before { display: none; }
  .flow__loop { order: 2; position: static; align-self: flex-start; margin: 20px 0 0 70px; padding: 0; transform: none; background: none; }
  .flow-list { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-left: 70px; }
  .flow-list::before {
    left: 21px;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--cyan), var(--magenta));
  }
  .flow-list::after { display: none; }
  .flow-step { padding-top: 0; }
  .flow-step__node { left: -70px; }
  .flow-step__items { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 28px; }

  .tools__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tool__text { max-width: 40em; }
  .tool__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .monetize__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .monetize__lead, .monetize__note { max-width: 36em; }
}

/* =========================================================
   PHONE (<= 640px)
   ========================================================= */
@media (max-width: 640px) {
  .core { padding: var(--band) 0 96px; }
  /* the address does not fit one line: a very wide space makes the only break the one after the postcode
     (Chromium otherwise broke inside the house number, "2-14-10-" / "701") */
  .profile-table .addr, .site-footer__addr { word-spacing: 400px; }
  .logo__en { font-size: 16px; }
  /* greedy wrap: "集客の回路を組む、" / "広告代理店。" (balance split the verb from its object) */
  .hero__title { font-size: 28px; line-height: 1.45; text-wrap: wrap; }
  .hero__lead { font-size: 16px; }
  .sec-title, .scan__head .sec-title, .query__head .sec-title, .profile__head .sec-title, .terminal__title { font-size: 24px; }
  .inhouse__claim { font-size: 28px; }
  .modules__lead, .mod__en, .mod__title, .hub__title, .spec__lead, .spec-item__title, .step__title,
  .locator__place, .fax__num, .flow-step__title { font-size: 20px; }
  .board__mods > .mod:first-child .mod__title, .origin__word, .tool__name { font-size: 24px; }
  .philosophy { font-size: 18px; }

  .mod__channels ul { grid-template-columns: minmax(0, 1fr); }

  .flow-list { padding-left: 60px; }
  .flow-step__node { left: -60px; }
  .flow__loop { margin-left: 60px; }
  .flow-step__items { grid-template-columns: minmax(0, 1fr); }

  .tool { padding: 18px 16px 22px; }
  .tool__logo { width: 56px; height: 56px; border-radius: 12px; }
  .tool__list { grid-template-columns: minmax(0, 1fr); }

  .advice__bar { padding: 12px 18px; }
  .advice-list { padding: 0 18px 4px; }
  .advice-item { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 18px 0; }
}

/* =========================================================
   10. 2026-10-31 先方の指摘から
   社名の由来（赤い花・赤い色）／自社ECの店名とURL／プライバシーポリシーのページ（privacy.html）
   ========================================================= */
.origin__word .origin__name { color: var(--cyan); }

/* 自社事業の写真は博多ふく蔵の実物（黒い箱と一本物）。食べ物なので青く染めない。
   上下が切れる横長の枠（タブレット 16:9）でも、箱の「ふく蔵」の文字が残るよう上寄りに切る */
.inhouse__fig img { object-position: 45% 0%; }

.data-rows a {
  display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0;
  color: var(--cyan); text-underline-offset: 4px; overflow-wrap: anywhere;
}
.data-rows .num { font-family: var(--f-mono); font-weight: 500; letter-spacing: .02em; }

.policy { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); }
.policy__wrap { max-width: 760px; }
/* 本文は1行 全角40字前後まで（42字を超えると読みにくい） */
.policy__lead, .policy__item > p { max-width: 38em; }
.policy__sub { max-width: calc(38em + 1.7em); }
.policy__title { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: .03em; }
.policy__lead { margin: 32px 0 0; font-size: 16px; line-height: 1.9; color: var(--text-2); }
.policy__list { margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.policy__item { padding: 32px 0; border-bottom: 1px solid var(--line); }
.policy__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0 0 14px; font-size: 20px; font-weight: 800; line-height: 1.5; color: #fff;
}
.policy__no { font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: .16em; color: var(--cyan); }
.policy__item p { margin: 0 0 12px; font-size: 16px; line-height: 1.9; color: var(--text-2); }
.policy__item p:last-child { margin-bottom: 0; }
.policy__sub { margin: 0 0 14px; padding-left: 1.7em; list-style: decimal; color: var(--text-2); }
.policy__sub:last-child { margin-bottom: 0; }
.policy__sub li { padding-left: 4px; font-size: 16px; line-height: 1.9; }
.policy__sub li + li { margin-top: 6px; }
.policy__sub li::marker { font-family: var(--f-mono); color: var(--cyan); }
.policy__sub b { color: #fff; }
.policy__contact { margin: 18px 0 0; border-top: 1px solid var(--line); }
.policy__contact div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.policy__contact dt { font-size: 14px; font-weight: 700; color: var(--cyan); }
.policy__contact dd { margin: 0; font-size: 16px; line-height: 1.8; }
.policy__contact .addr { font-family: var(--f-addr); font-weight: 500; word-break: keep-all; overflow-wrap: anywhere; }
.policy__contact .num { font-family: var(--f-mono); letter-spacing: .02em; }
.policy a:not(.btn) { color: var(--cyan); text-underline-offset: 4px; }
.policy__contact a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
.policy__back { margin: 48px 0 0; }
@media (max-width: 767px) {
  .policy__item { padding: 26px 0; }
  .policy__h { font-size: 18px; }
  .policy__contact div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}