/* ジムナストブレイン（/gymnast-brain）。7th_aniv と同じ生成り・ネイビー・オリーブ・罫線。
   3D の舞台はデスクトップで右に固定、スマートフォンでは上に固定し、文章はその横（下）を流れる。
   地の色と文字の色は節ごとに変わる（moods.js が --ground・--ink・--muted・--line を書き換える）。
   ボタンは紺の1種（角6px・影なし）、ほかは下線のリンク。見出し・フック・引用・キャプションは明朝のサブセット。 */
@font-face {
  font-family: "Campaign Mincho";
  src: url("/assets/fonts/noto-serif-jp-headings.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* the story's heading only (Klee One SemiBold, OFL; scripts/subset-heading-font.mjs) */
@font-face {
  font-family: "Campaign Hand";
  src: url("/assets/fonts/klee-one-story-heading.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Cormorant;
  src: url("/assets/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* registered so a reduced-motion visitor gets a short fade instead of a jump */
@property --ground {
  syntax: "<color>";
  inherits: true;
  initial-value: #f7f5ee;
}
@property --ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #28244e;
}
@property --muted {
  syntax: "<color>";
  inherits: true;
  initial-value: #686671;
}
@property --line {
  syntax: "<color>";
  inherits: true;
  initial-value: #dcdad0;
}
:root {
  --ground: #f7f5ee;
  --ink: #28244e;
  --muted: #686671;
  --line: #dcdad0;
  --olive: #56613e;
  --pending: #b0743a;
  --mincho: "Campaign Mincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --num: Cormorant, "Campaign Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  /* 1vh and 1svh. Every length here that follows the screen's height is a multiple of these.
     On phones and tablets viewport.js holds them in px at the height the page opened with (an
     in-app browser such as LINE's resizes the view as its bars move, and vh and svh with it) */
  --gb-vh: 1vh;
  --gb-svh: 1vh;
  /* phones: the stage takes 38% of the screen (46% until 2026-10-13: 本人「スマホの時に3Dモデルが
     大きすぎる」). The pillow is framed by its width, so it keeps its size and the room above and
     below it goes; the text docked under the stage gets the rest */
  --stage-h: calc(var(--gb-svh) * 38);
  --gutter: 20px;
  --margin: var(--gutter);
}
@supports (height: 1svh) {
  :root {
    --gb-svh: 1svh;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    transition:
      --ground 0.5s ease,
      --ink 0.5s ease,
      --muted 0.5s ease,
      --line 0.5s ease;
  }
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.9 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* no ー or small kana at the start of a line */
  line-break: strict;
}
/* paragraphs and quotes: no last line of a single character (「合わせ直せま｜す。」) where the browser
   can (Chrome, Safari 26). Not balance: in Japanese it evens the lines by cutting words (「…寝｜れる」) */
.gb-body,
.gb-returns,
.gb-faq__a,
.gb-refill,
.gb-note,
.gb-after__lead,
.gb-after__owner-lead,
.gb-trial__lead,
.gb-trial__flow,
.gb-gallery__lead,
.gb-howto__b,
.gb-words blockquote p,
.gb-voice blockquote p {
  text-wrap: pretty;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
p,
h1,
h2,
h3,
dl,
dd,
ol,
figure,
blockquote {
  margin: 0;
}
ol {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}
a:focus-visible {
  outline: 3px solid #ad6a35;
  outline-offset: 4px;
}
::selection {
  background: #d9e0ad;
  color: #28244e;
}
[hidden] {
  display: none !important;
}
.skip-link {
  position: absolute;
  z-index: 20;
  left: 16px;
  top: -100px;
  padding: 12px 16px;
  background: #28244e;
  color: #f7f5ee;
}
.skip-link:focus {
  top: 12px;
}
.gb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gb-u {
  display: inline-block;
}
/* preview only: a value that is a stand-in (provisional) or waits to be decided (pending) */
.gb-pending {
  text-decoration: underline dotted var(--pending);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
  cursor: help;
}

/* ---------- header ---------- */
.gb-header {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  padding: 16px var(--gutter);
}
.gb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: 0.06em;
}
.gb-brand img {
  width: 26px;
  height: 26px;
}
.gb-brand__chev {
  color: var(--olive);
  letter-spacing: -0.04em;
  margin-inline: 1px 2px;
}

/* ---------- the stage ---------- */
.gb-story {
  position: relative;
}
.gb-stage {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--stage-h);
  /* the page's own ground: depth comes from the pillow's shadow and light */
  background: var(--ground);
}
.gb-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.24s ease;
}
/* phones: text and photos passing under the stage fade into the ground over a short band
   instead of being cut by a straight edge. The band ends where the docked text starts
   (stage-h + 28px), so text at rest is never under it. */
@media (max-width: 1023.98px) {
  .gb-stage::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(var(--ground), transparent);
    /* the ground at no opacity, so no browser fades through grey */
    background: linear-gradient(var(--ground), color-mix(in srgb, var(--ground) 0%, transparent));
    pointer-events: none;
  }
}
/* hidden boxes the scripts measure: story.js the height the page is laid out for (.gb-vh,
   100svh as held), viewport.js the viewport's own vh and svh (.gb-probe, height in JS) */
.gb-vh,
.gb-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  visibility: hidden;
  pointer-events: none;
}
.gb-vh {
  height: calc(var(--gb-svh) * 100);
}
.gb-view.is-fading {
  opacity: 0;
}
.gb-stills,
.gb-stills picture,
.gb-stills img,
.gb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gb-stills img {
  object-fit: cover;
}
/* phones: the hero picture is cut from its foot, not both ends, on a stage shorter than the
   picture's (the 3D frames the hero lower there too, under the brand; story.js stillAnchors) */
@media (max-width: 1023.98px) {
  .gb-stills [data-still="hero"] img {
    object-position: 50% 0;
  }
}
.gb-stills {
  transition: opacity 0.7s ease 0.15s;
}
.gb-canvas {
  display: block;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.gb-stage.is-live .gb-canvas {
  opacity: 1;
}
.gb-stage.is-live .gb-stills {
  opacity: 0;
}
.gb-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.gb-lines line {
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0;
}
.gb-lines .gb-dash {
  stroke-dasharray: 2 4;
  stroke: var(--olive);
}
.gb-lines [data-line="drop"] {
  stroke-width: 2;
}
.gb-lines [data-line="ref"] {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
/* the top view's two outer corners: each triangle outlined on the pillow (the 3D tints inside) */
.gb-lines .gb-tri {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.75;
  stroke-linejoin: round;
  opacity: 0;
}
/* the pale halo under the outline: desktop only (below) */
.gb-lines .gb-tri-halo {
  display: none;
  fill: none;
  stroke: var(--ground);
  stroke-linejoin: round;
  opacity: 0;
}
.gb-tag {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  white-space: nowrap;
  text-align: center;
  font: 500 12.5px/1.4 var(--sans);
  letter-spacing: 0.04em;
  transform: translate(-9999px, 0);
  text-shadow:
    0 0 3px var(--ground),
    0 0 6px var(--ground);
  pointer-events: none;
}
.gb-tag--mat {
  display: grid;
  justify-items: center;
  line-height: 1.45;
}
.gb-tag__pos {
  font-size: 11.5px;
  color: var(--muted);
}
.gb-tag__mat {
  font-size: 13px;
}
.gb-tag--g {
  font: 19px/1 var(--num);
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
}
.gb-tag--g small {
  font-size: 13px;
  margin-left: 1px;
}
.gb-tag--heading {
  font-size: 11.5px;
  color: var(--muted);
}
/* 「頸椎サポート」: the neck scene is there to show this one place, so its label is a plate the size of
   body text with a firmer line and a dot on the spot (本人 2026-10-14「文言とその部位への線が小さすぎて
   目立たない」). The plate keeps it legible where it falls over the pillow's front edge. */
.gb-tag--callout {
  padding: 5px 13px 6px;
  border-radius: 999px;
  font: 600 15.5px/1.3 var(--sans);
  letter-spacing: 0.08em;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent);
  text-shadow: none;
}
.gb-lines [data-line="lead-neck"] {
  stroke-width: 1.75;
}
.gb-lines [data-dot="neck"] {
  fill: var(--ink);
  stroke: var(--ground);
  stroke-width: 2;
}
/* preview only: the 3D's proportions are an estimate until measured */
.gb-stage-pending {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: 8px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- the steps beside the stage ---------- */
.gb-flow {
  position: relative;
}
.gb-step {
  position: relative;
  z-index: 1;
  padding: 30px var(--gutter) 0;
}
/* what is read while the stage holds: docked under the stage on phones */
.gb-step__text {
  position: sticky;
  top: calc(var(--stage-h) + 28px);
  max-width: 32em;
  padding-bottom: 36px;
}
.gb-step__hold {
  min-height: calc(var(--gb-vh) * 68);
}
.gb-step--hero {
  padding-bottom: calc(var(--gb-vh) * 12);
}
.gb-step--hero .gb-step__text {
  position: static;
  padding-bottom: 0;
}
/* the shape holds while its text, the try-out photos, the ear and the corner are read */
.gb-step--shape .gb-step__hold {
  min-height: calc(var(--gb-vh) * 88);
}
.gb-step--neck .gb-step__hold {
  min-height: calc(var(--gb-vh) * 70);
}
/* after the hands the stage needs a moment in view before the height's text arrives */
.gb-step--height {
  padding-top: var(--stage-h);
}
.gb-step--height .gb-step__hold {
  min-height: calc(var(--gb-vh) * 120);
}
/* what flows past after the text: on phones edge to edge, under the stage */
.gb-step__more {
  position: relative;
  z-index: 1;
  max-width: 34em;
  padding-bottom: 48px;
}
.gb-step--shape .gb-step__more {
  padding-bottom: calc(var(--gb-vh) * 32);
}
.gb-step--back .gb-step__more {
  padding-bottom: calc(var(--gb-vh) * 22);
}
.gb-eyebrow {
  font: 13.5px/1.6 var(--mincho);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.gb-name {
  margin-top: 6px;
  font: 17px/1.5 var(--mincho);
  letter-spacing: 0.08em;
}
/* the name in capitals (Cormorant), its katakana reading small under it (本人 2026-10-16). The capitals
   fill one line of the column at most (about 14.6 font sizes wide), so the hero grows by the reading only */
.gb-name__en {
  display: block;
  font: 400 min(26px, calc((100vw - 40px) / 14.6))/1.1 var(--num);
  letter-spacing: 0.06em;
}
.gb-name__ja {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  color: var(--muted);
}
h1 {
  margin-top: 4px;
  font: 400 32px/1.4 var(--mincho);
  letter-spacing: 0.03em;
}
.gb-sub {
  margin-top: 10px;
  font: 17px/1.7 var(--mincho);
  letter-spacing: 0.04em;
}
h2 {
  font: 400 25px/1.6 var(--mincho);
  letter-spacing: 0.04em;
}
/* the small line over a heading: a question, a sound, a likeness, a reason */
.gb-hook {
  margin-bottom: 6px;
  font: 15px/1.6 var(--mincho);
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* the second line is indented one character; both lines stay whole down to 320px */
.gb-step--shape h2 {
  font-size: clamp(24px, 7.2vw, 28px);
  line-height: 1.5;
}
.gb-step--shape h2 .gb-u {
  display: block;
}
.gb-step--shape h2 .gb-u + .gb-u {
  padding-left: 1em;
}
.gb-body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.9;
}
/* The words a paragraph is there to say (data **…**): one weight heavier, on a thin band (本人
   2026-10-14「大げさに強調しすぎないように…多少の違いを」). On the day grounds the band is the text's own
   colour, faint; on the navy night it is the brand's lime, since a faint band of the light ink could
   not be seen there (本人 2026-10-14「背景が青の時に、分かり辛い色」). story.js paints --mark with the
   ground (moods.js); without it, or without color-mix, it is the day's band or just heavier. */
/* A photo still on its way shows as a soft tone of the ground in its own box (width and height
   are set, so nothing moves), not as a hole in the page on a slow line. */
img[srcset][loading="lazy"] {
  background-color: color-mix(in srgb, var(--ink) 7%, var(--ground));
}
.gb-key {
  --band: var(--mark, color-mix(in srgb, currentColor 16%, transparent));
  font-weight: 600;
  background-image: linear-gradient(transparent 68%, var(--band) 68%, var(--band) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gb-hook + h2 + .gb-body,
.gb-step__text h2 + .gb-body {
  margin-top: 12px;
}

/* ---------- the hero's offer: when, shipping, one button ---------- */
.gb-offer {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.gb-launch {
  font: 15.5px/1.7 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-ship {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
/* when a pre-order arrives, on the shipping line; moves to the next line whole when narrow */
.gb-deliver {
  display: inline-block;
  margin-left: 1em;
}
.gb-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
/* the one kind of button: navy, 6px corners, no shadow */
.gb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  min-width: 220px;
  max-width: 100%;
  padding: 10px 28px;
  border-radius: 6px;
  background: #28244e;
  color: #f7f5ee;
  font: 600 15px/1.5 var(--sans);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}
.gb-button:hover {
  background: #3d3769;
}
/* the hero's button is still on screen while the ground turns to night (desktop): an inner ring in
   the ink's colour, navy on the day ground (not seen on the navy button) and light on the night one,
   keeps its edge */
.gb-offer--hero .gb-button {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 60%, transparent);
}
.gb-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
}
.gb-shortcuts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}
#gb-trial,
#gb-spec,
#gb-faq,
#gb-gallery {
  scroll-margin-top: 28px;
}
/* phones that opened short (viewport.js .gb-short: LINE's and Safari's bars shown, small phones;
   read from the height held at opening, so the bars never toggle it): the hero is set tighter, so
   its button is whole on the first screen. 390×844 keeps the spacing above. */
@media (max-width: 1023.98px) {
  /* and the words docked under the stage fit the shorter screen (高さ with its two small lines) */
  .gb-short .gb-step__text .gb-body {
    line-height: 1.75;
  }
  .gb-short .gb-step__text .gb-refill {
    font-size: 14.5px;
    line-height: 1.55;
  }
  .gb-short .gb-step__text .gb-body + .gb-refill {
    margin-top: 10px;
  }
  .gb-short .gb-step--hero {
    padding-top: 14px;
  }
  .gb-short .gb-eyebrow {
    line-height: 1.45;
  }
  .gb-short .gb-name {
    margin-top: 0;
  }
  .gb-short .gb-name__en {
    line-height: 1.05;
  }
  .gb-short .gb-name__ja {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.25;
  }
  .gb-short h1 {
    font-size: 28px;
    line-height: 1.35;
  }
  .gb-short .gb-sub {
    margin-top: 6px;
    line-height: 1.5;
  }
  .gb-short .gb-step--hero .gb-body {
    margin-top: 10px;
    line-height: 1.72;
  }
  .gb-short .gb-offer--hero {
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
  }
  .gb-short .gb-offer--hero .gb-launch {
    line-height: 1.5;
  }
  .gb-short .gb-offer--hero .gb-ship {
    line-height: 1.45;
  }
  .gb-short .gb-offer--hero .gb-offer__actions {
    margin-top: 8px;
  }
  .gb-short .gb-offer--hero .gb-button {
    min-height: 52px;
  }
}

/* ---------- the height's small lines and its LINE link ---------- */
.gb-refill {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
}
.gb-body + .gb-refill {
  margin-top: 14px;
}
.gb-consult {
  padding: 4px 0 28px;
  font: 17px/1.7 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-consult a,
.gb-consult a .gb-u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
/* the link down to the height's film (動画で見る), right under the LINE one */
.gb-consult + .gb-consult--film {
  margin-top: -16px;
}

/* ---------- a block among what flows past a step ---------- */
.gb-block {
  padding: 28px 0 8px;
  border-top: 1px solid var(--line);
}
.gb-block + .gb-block {
  margin-top: 20px;
}
.gb-block h3 {
  font: 400 21px/1.55 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-block .gb-body {
  margin-top: 10px;
}
/* 中央 黒と白のエラストマー: the place set small above what fills it */
.gb-block--mat h3 .gb-u:first-child {
  display: block;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
/* what the owner has noticed (中身: 朝の髪が ぺたんとしにくい), in the page's words: the owner's card,
   white with a thin line, no shadow */
.gb-block--voice {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: color-mix(in srgb, #fff 62%, var(--ground));
  color: #28244e;
  --muted: #686671;
}
.gb-block.gb-block--voice {
  margin-top: 28px;
}
.gb-block--voice h3 {
  font-size: 19px;
}
.gb-block--voice .gb-body {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.85;
}
/* the maker's words summed up where a quote used to stand: a plain paragraph */
.gb-said {
  max-width: 30em;
}
.gb-step__more > .gb-said:first-child {
  margin-top: 0;
}

/* ---------- words, quoted: the maker's (a rule beside) and the owner's (a card) ---------- */
.gb-words {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.gb-words blockquote p {
  font: 16px/1.85 var(--mincho);
  letter-spacing: 0.03em;
  text-indent: -0.5em;
}
.gb-words blockquote p + p {
  margin-top: 6px;
}
.gb-words blockquote .gb-u {
  text-indent: 0;
}
.gb-words figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.gb-words[data-pending],
.gb-words[data-provisional],
.gb-voice[data-provisional] {
  outline: 2px dotted var(--pending);
  outline-offset: 6px;
}
/* the owner's voice: one card, white with a thin line, no shadow */
.gb-words--voice,
.gb-voice {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: color-mix(in srgb, #fff 62%, var(--ground));
  color: #28244e;
  --muted: #686671;
}
.gb-words--voice {
  margin-top: 28px;
}
/* what the owner's words show, set over them in the card (中身: 朝の髪が ぺたんとしにくい) */
.gb-words__head {
  margin-bottom: 10px;
  font: 400 19px/1.55 var(--mincho);
  letter-spacing: 0.04em;
}
/* phones: the neck's quote after its text, passing under the stage like the photos */
.gb-words--step.gb-only-narrow {
  margin: 0;
}
.gb-step__more > .gb-words--step:first-child {
  margin-top: 0;
}

/* ---------- a photo or a loop beside the text ---------- */
.gb-inset {
  position: relative;
}
.gb-inset img,
.gb-inset video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
figcaption {
  margin-top: 10px;
  font: 15px/1.7 var(--mincho);
  letter-spacing: 0.05em;
}
figcaption .gb-u + .gb-u {
  margin-left: 0.7em;
}
/* who is at work: a small credit under the caption */
.gb-credit {
  display: block;
  margin-top: 2px;
  font: 13px/1.7 var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.gb-credit .gb-u + .gb-u {
  margin-left: 0.35em;
}
.gb-inset[data-pending] img,
.gb-inset[data-pending] video,
.gb-inset[data-provisional] img,
.gb-pair[data-provisional] img {
  outline: 2px dotted var(--pending);
  outline-offset: -6px;
}
.gb-loop {
  position: relative;
}
.gb-loop__toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 112px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: #28244e;
  color: #f7f5ee;
  font: 500 14px/1 var(--sans);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.gb-loop__toggle:focus-visible {
  outline: 3px solid #ad6a35;
  outline-offset: 3px;
}
/* the try-out photos: side by side, edge to edge on phones, each with its caption */
.gb-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 calc(var(--gutter) * -1) 36px;
}
.gb-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gb-pair figcaption {
  padding-inline: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.gb-pair figcaption .gb-u {
  display: block;
}
.gb-pair figcaption .gb-u + .gb-u {
  margin-left: 0;
}
.gb-pair figcaption .gb-u:first-child {
  font-size: 15.5px;
}
/* phones: a loop or a photo under the text, edge to edge, passing beneath the stage */
.gb-only-wide {
  display: none;
}
.gb-step__more .gb-inset {
  margin: 28px calc(var(--gutter) * -1) 0;
}
.gb-step__more .gb-inset figcaption {
  padding-inline: var(--gutter);
}
.gb-step__more > .gb-inset:first-child {
  margin-top: 0;
}

/* ---------- 洗う: into the washing machine, pipes and all ---------- */
.gb-wash {
  position: relative;
  padding: 64px var(--margin);
}
.gb-wash .gb-body {
  max-width: 30em;
}
.gb-wash__steps {
  max-width: 30em;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.gb-wash__steps li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.gb-wash__n {
  flex: none;
  width: 1.2em;
  font: 30px/1 var(--num);
  font-variant-numeric: lining-nums;
  color: var(--olive);
}
.gb-wash__step {
  font: 20px/1.5 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-wash__detail {
  margin-top: 32px;
}
.gb-wash .gb-words {
  max-width: 34em;
}
.gb-wash__detail > .gb-body:first-child {
  margin-top: 0;
}

/* ---------- 枕 いくつ買い替えてきましたか ---------- */
.gb-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 64px var(--margin);
  background: #f4f1e9;
}
.gb-after__q {
  grid-area: 1 / 1;
  font: 400 26px/1.45 var(--mincho);
  letter-spacing: 0.02em;
}
/* 枕 on its own line, large: the one place the eye stops first in this section */
.gb-after__q .gb-u:first-child {
  display: block;
  font-size: 2.4em;
  line-height: 1.1;
}
/* beside 枕, never under the next line of the question (the pile is no taller than 枕) */
.gb-after__pile {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  width: clamp(112px, 36vw, 140px);
  height: auto;
  margin-top: 2px;
}
.gb-after__recall {
  margin-top: 18px;
  font: 19px/1.6 var(--mincho);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.gb-after__recall .gb-u + .gb-u {
  margin-left: 0.5em;
}
.gb-after__lead {
  max-width: 30em;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.95;
}
.gb-after__owner {
  margin-top: 36px;
}
.gb-after__owner-lead {
  max-width: 30em;
  font-size: 16px;
  line-height: 1.9;
}
.gb-after__owner .gb-voice {
  margin-top: 16px;
}
.gb-voice__label {
  font: 600 12.5px/1.5 var(--sans);
  letter-spacing: 0.1em;
  color: var(--olive);
}
.gb-voice blockquote {
  margin-top: 6px;
}
.gb-voice blockquote p {
  font: 17px/1.8 var(--mincho);
  letter-spacing: 0.03em;
  text-indent: -0.5em;
}
.gb-voice blockquote p + p {
  margin-top: 4px;
}
.gb-voice figcaption {
  margin-top: 8px;
  font: 13.5px/1.6 var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* the morning after: a little louder than the years before it */
.gb-voice--after {
  border-color: #c9c1ac;
}
.gb-voice--after blockquote p {
  font-size: 19px;
}
.gb-steps {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.gb-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.gb-steps__n {
  grid-row: span 2;
  font: 30px/1 var(--num);
  font-variant-numeric: lining-nums;
  color: var(--olive);
}
.gb-steps h3 {
  font: 400 19px/1.6 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-steps p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.8;
}
.gb-steps__art {
  grid-column: 2;
  margin-top: 12px;
}
.gb-after__closing {
  margin-top: 32px;
  font: 24px/1.55 var(--mincho);
  letter-spacing: 0.05em;
}
.gb-after__closing .gb-u {
  display: block;
}
.gb-after__said {
  margin-top: 18px;
}

/* ---------- 物語: the maker at work, then four chapters, each in its own shape ---------- */
.gb-tale {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 44px;
  padding: 0 var(--margin) 64px;
  background: #ece4d4;
  --muted: #635c55;
  --line: #d6cbb6;
}
.gb-tale__film {
  margin: 0 calc(var(--margin) * -1);
}
.gb-tale__loop video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gb-tale__loop figcaption {
  padding-inline: var(--margin);
}
/* the three steps of the work, in a row along one rule */
.gb-tale__process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px var(--margin) 0;
  border-top: 1px solid var(--line);
  font: 14.5px/1.5 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-tale__process li {
  padding: 12px 8px 0 0;
}
.gb-tale__process li + li {
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.gb-tale__kicker {
  font: 15px/1.6 var(--mincho);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.gb-tale__head h2 {
  margin-top: 8px;
  font-size: clamp(32px, 9.4vw, 40px);
  line-height: 1.4;
}
.gb-tale__head h2 .gb-u {
  display: block;
}
.gb-tale__head h2 .gb-u + .gb-u {
  padding-left: 1em;
}
/* 物語の見出しだけ手書き（Klee One SemiBold）。行ごとに後ろにライムの筆の帯（本人 2026-10-16、design/story-heading/） */
.gb-tale__head h2.gb-brush {
  font-family: "Campaign Hand", var(--mincho);
  font-weight: 600;
  letter-spacing: 0.05em;
  --gb-brush: #d9e0ad;
}
/* each line a box as wide as its characters, never broken inside (a broken line would carry its band on its last row only) */
.gb-tale__head h2.gb-brush .gb-u {
  position: relative;
  z-index: 0;
  width: fit-content;
  white-space: nowrap;
}
/* the second line's indent as a margin, so the band does not reach into it */
.gb-tale__head h2.gb-brush .gb-u + .gb-u {
  padding-left: 0;
  margin-left: 1em;
}
.gb-brush__mark {
  position: absolute;
  z-index: -1;
  left: -0.16em;
  bottom: 0.2em;
  width: calc(100% + 0.4em);
  max-width: none;
  height: 0.52em;
  fill: var(--gb-brush);
  pointer-events: none;
}
.gb-tale__chapter {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.gb-tale__h {
  font: 400 21px/1.5 var(--mincho);
  letter-spacing: 0.06em;
}
/* ① the years: the year large, what happened beside it */
.gb-years {
  margin-top: 18px;
}
.gb-years li {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 8px 0;
}
.gb-years__y {
  font: 30px/1.1 var(--num);
  font-variant-numeric: lining-nums;
  color: var(--olive);
}
.gb-years__t {
  font: 17px/1.6 var(--mincho);
  letter-spacing: 0.03em;
}
/* the years' last line: the new pillow */
.gb-years li:last-child .gb-years__t {
  font-size: 19px;
}
.gb-years__more {
  padding-top: 0;
}
.gb-tale__text > :first-child {
  margin-top: 0;
}
.gb-tale__history .gb-tale__text {
  margin-top: 22px;
}
/* a closed passage that opens to read more */
.gb-more {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gb-more > summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.gb-more > summary::-webkit-details-marker {
  display: none;
}
.gb-more > summary::after {
  content: "＋";
  color: var(--muted);
  transition: transform 0.24s cubic-bezier(0.2, 0, 0, 1);
}
.gb-more[open]:not(.is-closing) > summary::after {
  transform: rotate(45deg);
}
.gb-more.is-sliding {
  overflow: hidden;
}
.gb-more > summary:focus-visible {
  outline: 3px solid #ad6a35;
  outline-offset: 2px;
}
.gb-more__body {
  padding-bottom: 20px;
}
.gb-more__body > .gb-body:first-child {
  margin-top: 0;
}
.gb-note {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
/* photos of the chapters: 4:3, the portrait 4:5 */
/* 工場見学（YouTube）: 16:9 の絵と再生の印。押すと同じ枠に再生器が入る */
.gb-yt {
  margin: 0;
}
.gb-yt__poster,
.gb-yt__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #1d1b3a;
}
.gb-yt__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gb-yt__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 50px;
  border-radius: 12px;
  background: rgba(38, 35, 84, 0.88);
  transform: translate(-50%, -50%);
  transition: background 0.2s;
}
.gb-yt__play svg {
  width: 26px;
  height: 26px;
  fill: #fff;
}
.gb-yt__poster:hover .gb-yt__play,
.gb-yt__poster:focus-visible .gb-yt__play {
  background: rgba(38, 35, 84, 1);
}
.gb-yt__poster:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.gb-tale__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.gb-tale__portrait img {
  aspect-ratio: 4 / 5;
}
/* phones: the portrait at two thirds of the width, so it does not take the whole screen; its
   caption (name, then title) in two lines */
@media (max-width: 1023.98px) {
  .gb-tale__portrait {
    width: 68%;
  }
  .gb-tale__portrait figcaption .gb-u {
    display: block;
    margin-left: 0;
  }
}
.gb-tale__photo + .gb-tale__text {
  margin-top: 24px;
}
/* ② what he noticed, small, then his answer quoted large; its opening 「 hangs into the margin */
.gb-tale__big {
  text-indent: -0.5em;
}
.gb-tale__big .gb-u {
  text-indent: 0;
}
.gb-tale__small {
  font: 16px/1.8 var(--mincho);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.gb-tale__big {
  margin-top: 10px;
  font: 400 clamp(24px, 7vw, 28px)/1.55 var(--mincho);
  letter-spacing: 0.02em;
}
.gb-tale__by {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* ③ and ④: one line set large, then what it means */
.gb-tale__line {
  font: 400 24px/1.55 var(--mincho);
  letter-spacing: 0.03em;
}
.gb-tale__line .gb-u {
  display: block;
}
/* what he holds to: four lines between thin rules, in no order (no numbers; the page has its
   numbered lists where order matters: washing, the days after, the work) */
.gb-tale__points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.gb-tale__points li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font: 17px/1.6 var(--mincho);
  letter-spacing: 0.03em;
}
.gb-tale__changes {
  margin-top: 18px;
}
/* what changed, each on one line (11 characters at most); the reason wraps beside it */
.gb-table.gb-tale__changes {
  font-size: 15px;
}
.gb-table.gb-tale__changes tbody th {
  width: 54%;
  padding-right: 12px;
  color: var(--ink);
}
.gb-tale__staff {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--olive);
  font: 18px/1.6 var(--mincho);
  letter-spacing: 0.04em;
}

/* ---------- 長く使う枕を選ぶなら: one column, this shop's own ---------- */
.gb-choose {
  padding: 64px var(--margin) 48px;
}
.gb-choose h2 {
  font-size: 26px;
}
.gb-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.7;
}
.gb-table th,
.gb-table td {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  /* two even lines rather than a lone character on the second */
  text-wrap: balance;
}
.gb-table thead th {
  padding: 0 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.gb-table tbody th {
  width: 40%;
  padding-right: 16px;
  font-weight: 400;
  color: var(--muted);
}
/* The tables and the spec break between their phrases (the data's spaces and ​), never inside
   one: 「高さを変｜えられるか」 at 390px was a phrase cut in two by balance. A phrase longer than its
   column (320px) still wraps inside itself rather than overflow. */
.gb-table .gb-u,
.gb-spec__rows .gb-u {
  display: inline-block;
  overflow-wrap: anywhere;
}
.gb-choose__bridge {
  margin-top: 36px;
  font: 400 24px/1.55 var(--mincho);
  letter-spacing: 0.04em;
}

/* ---------- 購入 and 仕様: the price, the page's largest number ---------- */
.gb-spec {
  display: grid;
  gap: 32px;
  padding: 48px var(--margin) 64px;
  border-top: 1px solid var(--line);
}
.gb-spec__cover {
  margin-bottom: 28px;
}
.gb-spec__cover img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.gb-spec__name {
  font: 400 28px/1.4 var(--mincho);
  letter-spacing: 0.06em;
}
.gb-spec .gb-offer {
  margin-top: 18px;
  padding-top: 18px;
}
.gb-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 3px;
  font: 16px/1.2 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-num {
  font: 56px/1 var(--num);
  font-variant-numeric: lining-nums;
  letter-spacing: 0.01em;
  margin-right: 3px;
}
.gb-made {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  letter-spacing: 0.2em;
}
/* 360px: 日本製 stays on the price's line, closer to it; 320px: on a line of its own, no rule */
@media (max-width: 374.98px) {
  .gb-made {
    margin-left: 10px;
    padding-left: 10px;
    letter-spacing: 0.1em;
  }
}
@media (max-width: 339.98px) {
  .gb-made {
    flex-basis: 100%;
    margin: 6px 0 0;
    padding-left: 0;
    border-left: 0;
  }
  /* the navy buttons on one line */
  .gb-button {
    padding-inline: 14px;
    font-size: 14px;
    letter-spacing: 0.03em;
  }
}
/* the year-end launch price (M74): its last day over the number, the price from 1 January under it.
   The olive plate is the only filled thing in 購入 besides the navy button. */
.gb-sale__label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px 5px;
  border-radius: 3px;
  background: var(--olive);
  color: #f7f5ee;
  font: 600 13px/1.5 var(--sans);
  letter-spacing: 0.08em;
}
.gb-sale__label .gb-u + .gb-u {
  margin-left: 0.3em;
}
.gb-sale__regular {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.7em;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.gb-sale__regular .gb-u + .gb-u {
  font-weight: 600;
  color: var(--olive);
}
/* what comes with it, at the same price (M63), right under the price */
.gb-included {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}
.gb-set {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
}
.gb-set .gb-u {
  display: block;
}
.gb-set-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.gb-set-note .gb-u + .gb-u {
  margin-left: 0.4em;
}
.gb-set-link {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.6;
}
.gb-set-link a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gb-spec .gb-ship {
  margin-top: 8px;
}
.gb-bonus {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.7;
}
.gb-line-link {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.gb-line-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.gb-returns {
  max-width: 30em;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.85;
}
.gb-law {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.gb-law a {
  display: inline-block;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.gb-spec__rows > div {
  display: grid;
  /* 「届いたときの高さ」 on one line */
  grid-template-columns: 8em minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.gb-spec__rows > div:first-child {
  border-top: 1px solid var(--line);
}
.gb-spec__rows dt {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.gb-spec__rows dd {
  font-size: 16px;
  line-height: 1.8;
}
.gb-faq h3 {
  font: 400 22px/1.5 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-faq details {
  border-bottom: 1px solid var(--line);
}
.gb-faq h3 + details {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.gb-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 14px 0;
  font-size: 16px;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.gb-faq summary::-webkit-details-marker {
  display: none;
}
.gb-faq summary::after {
  content: "＋";
  color: var(--muted);
  transition: transform 0.24s cubic-bezier(0.2, 0, 0, 1);
}
/* main.js slides the answer open and shut; while it shuts the ＋ is already turning back */
.gb-faq details[open]:not(.is-closing) summary::after {
  transform: rotate(45deg);
}
.gb-faq details.is-sliding {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .gb-faq summary::after,
  .gb-more > summary::after {
    transition: none;
  }
}
.gb-faq summary:focus-visible {
  outline: 3px solid #ad6a35;
  outline-offset: 2px;
}
.gb-faq__a {
  padding: 0 0 18px;
  font-size: 16px;
  line-height: 1.9;
}
.gb-faq .gb-words {
  margin: 0 0 22px;
}

/* ---------- 買う前に サロンで寝てみる ---------- */
.gb-trial {
  padding: 48px var(--margin);
  background: #fdfbf6;
  border-block: 1px solid var(--line);
}
.gb-trial h2 {
  font-size: 26px;
}
.gb-trial__lead {
  max-width: 34em;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.9;
}
.gb-trial .gb-words {
  max-width: 34em;
}
.gb-trial__book {
  margin-top: 28px;
}
.gb-trial__flow {
  max-width: 30em;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
}
.gb-trial__guide {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.gb-trial__guide[data-pending] {
  outline: 2px dotted var(--pending);
  outline-offset: 4px;
}
.gb-trial__guide > summary {
  padding-block: 16px;
  min-height: 52px;
  font-size: 15px;
  cursor: pointer;
}
.gb-trial__guide > summary:focus-visible {
  outline: 3px solid #ad6a35;
  outline-offset: 3px;
}
.gb-trial__steps {
  margin-top: 0;
  border-top: 0;
}
.gb-trial__steps li {
  grid-template-columns: 24px minmax(0, 1fr) clamp(112px, 36vw, 160px);
  column-gap: 12px;
  align-items: start;
  padding: 24px 0;
}
.gb-trial__steps .gb-steps__n {
  grid-row: 1;
}
.gb-trial__steps h3 {
  font: 600 16px/1.7 var(--sans);
  letter-spacing: 0;
}
.gb-trial__steps p {
  font-size: 15px;
}
.gb-trial .gb-steps__art {
  grid-column: 3;
  margin-top: 0;
}
.gb-trial .gb-steps__art img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.gb-steps__art[data-provisional] img,
.gb-howto__art[data-provisional] img {
  outline: 2px dotted var(--pending);
  outline-offset: -6px;
}

/* ---------- 動画で見る: the shop's films; the height's first, its steps beside it ---------- */
.gb-gallery {
  padding: 64px var(--margin);
  /* the films' own ground (the height's is set on #f7f5ee around its picture), so no edge shows */
  background: #f7f5ee;
}
.gb-gallery h2 {
  font-size: 26px;
}
.gb-gallery__lead {
  max-width: 30em;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.9;
}
.gb-gallery__height {
  margin-top: 28px;
}
/* a film: the picture with the browser's own player on it (M104), its title and caption under it */
.gb-film {
  max-width: 400px;
}
.gb-film video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 2px;
}
.gb-film--3x4 video {
  aspect-ratio: 3 / 4;
}
.gb-film--16x9 video {
  aspect-ratio: 16 / 9;
}
.gb-film--1x1 video {
  aspect-ratio: 1;
}
.gb-film[data-pending] video,
.gb-film[data-provisional] video {
  outline: 2px dotted var(--pending);
  outline-offset: -6px;
}
.gb-film__title {
  display: block;
}
.gb-film__caption {
  display: block;
  font: 13px/1.7 var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.gb-film figcaption .gb-film__caption .gb-u + .gb-u {
  margin-left: 0.35em;
}
/* where the voice comes from (data `credit`), as small as the caption allows yet plain to read:
   音読さん asks for its name and a link where viewers see them */
.gb-film__credit {
  display: block;
  font: 12px/1.7 var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.gb-film__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* the height's steps, in the maker's order and the film's numbers: the number and what to do on
   one line, then the photo with a few words beside it */
.gb-howto {
  margin-top: 40px;
}
.gb-howto h3 {
  font: 400 21px/1.5 var(--mincho);
  letter-spacing: 0.04em;
}
.gb-howto__steps {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.gb-howto__steps li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "n t t"
    ". art b";
  column-gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.gb-howto__steps li.gb-howto__plain {
  grid-template-areas:
    "n t t"
    ". b b";
}
.gb-howto__n {
  grid-area: n;
  font: 26px/1 var(--num);
  font-variant-numeric: lining-nums;
  color: var(--olive);
}
.gb-howto__t {
  grid-area: t;
  font: 17px/1.55 var(--mincho);
  letter-spacing: 0.03em;
}
.gb-howto__b {
  grid-area: b;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.75;
}
.gb-howto__plain .gb-howto__b {
  margin-top: 4px;
}
.gb-howto__art {
  grid-area: art;
  margin-top: 10px;
}
.gb-howto__art img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
/* films the shop adds later (the talk, the salon, washing), in a row after the height's */
.gb-gallery__films {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 36px 28px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.gb-gallery__height + .gb-gallery__films {
  margin-top: 56px;
}
.gb-gallery h2 + .gb-gallery__films {
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}
.gb-gallery__films .gb-film--9x16,
.gb-gallery__films .gb-film--3x4 {
  max-width: 300px;
}

/* ---------- the password-gated review page only: what the dotted marks are ---------- */
.gb-review-note {
  max-width: 21em;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1.5px dotted var(--pending);
  background: var(--ground);
  font: 12.5px/1.65 var(--sans);
  color: var(--ink);
}

/* ---------- preview only: the stand-ins and what waits ---------- */
.gb-todo {
  margin: 0 var(--margin) 48px;
  padding: 18px 20px;
  border: 2px dotted var(--pending);
  font: 13px/1.7 var(--sans);
}
.gb-todo h2 {
  font: 600 15px/1.5 var(--sans);
  letter-spacing: 0.04em;
}
.gb-todo h3 {
  margin-top: 14px;
  font: 600 13px/1.5 var(--sans);
}
.gb-todo ul {
  margin-top: 6px;
  padding-left: 1.2em;
  list-style: disc;
}
.gb-todo li + li {
  margin-top: 4px;
}

/* ---------- phones: the bar at the foot of the screen, once the 3D has gone by ---------- */
.gb-bar {
  display: none;
}
@media (max-width: 1023.98px) {
  .gb-bar {
    position: fixed;
    z-index: 6;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "price actions" "when actions";
    align-items: center;
    column-gap: 12px;
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background: var(--ground);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    visibility: hidden;
    transition:
      transform 0.25s,
      visibility 0.25s;
  }
  .gb-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
  }
  /* after the launch the BASE button joins LINE beside the price; the line about when moves
     under them, across the whole width, so neither is squeezed on a narrow phone */
  .gb-bar:has(.gb-bar__buy:not([hidden])) {
    grid-template-areas: "price actions" "when when";
  }
  .gb-bar:has(.gb-bar__buy:not([hidden])) .gb-bar__when {
    margin-top: 4px;
  }
  .gb-bar__price {
    grid-area: price;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
  }
  .gb-bar .gb-price {
    font-size: 12px;
  }
  .gb-bar .gb-num {
    font-size: 24px;
    margin-right: 1px;
  }
  .gb-bar__sale {
    flex-basis: 100%;
    margin-bottom: 1px;
    font: 600 10.5px/1.3 var(--sans);
    letter-spacing: 0.08em;
    color: var(--olive);
  }
  .gb-bar .gb-ship {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
  }
  .gb-bar__when {
    grid-area: when;
    font: 12.5px/1.5 var(--mincho);
    letter-spacing: 0.04em;
  }
  .gb-bar__when .gb-u + .gb-u {
    margin-left: 0.4em;
  }
  .gb-bar__actions {
    grid-area: actions;
    display: flex;
    gap: 8px;
  }
  .gb-bar__buy,
  .gb-bar__line {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 6px;
    font: 600 13px/1 var(--sans);
    letter-spacing: 0.06em;
    text-decoration: none;
  }
  .gb-bar__buy {
    background: #28244e;
    color: #f7f5ee;
  }
  .gb-bar__line {
    border: 1px solid currentColor;
  }
}
@media (max-width: 359.98px) {
  .gb-bar__buy,
  .gb-bar__line {
    padding: 0 10px;
  }
  /* the narrowest phones: the price and its yen already take two lines; 購入 still says 発売記念価格 */
  .gb-bar__sale {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gb-bar {
    transition: none;
  }
}

/* the foot: the shop and where it is, its other places (small links, never buttons), the legal lines */
.gb-footer {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
  padding: 36px var(--margin) 40px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.gb-footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--ink);
}
/* the SNS: icons in the ink, a 44px target each, the first glyph's edge under the text above */
.gb-footer__sns {
  display: flex;
  gap: 4px;
  margin: 0 0 0 -11px;
  padding: 0;
  list-style: none;
}
.gb-footer__sns a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
}
.gb-footer__sns svg {
  fill: currentColor;
}
@media (hover: hover) {
  .gb-footer__sns a:hover {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }
}
.gb-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}
.gb-footer__links a,
.gb-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink);
  text-underline-offset: 3px;
}
.gb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
}
.gb-footer__legal a {
  color: inherit;
}
.gb-footer .analytics-note a {
  color: inherit;
}
/* phones: the bar (taller after the launch, with two buttons) never covers the last words */
@media (max-width: 1023.98px) {
  .gb-footer {
    padding-bottom: calc(36px + 100px + env(safe-area-inset-bottom));
  }
}

/* ---------- desktop: stage on the right, text on the left ---------- */
@media (min-width: 1024px) {
  :root {
    --stage-h: calc(var(--gb-vh) * 100);
    --gutter: 28px;
    --margin: clamp(48px, 7vw, 128px);
  }
  .gb-header {
    padding: 26px var(--margin);
  }
  .gb-brand {
    font-size: 12px;
  }
  .gb-stage {
    width: 60%;
    margin-left: auto;
  }
  /* the close views (首の下・高さ) run past the stage's left edge: fade them into the ground there
     instead of a straight cut (the labels and lines stay sharp) */
  .gb-canvas,
  .gb-stills {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 64px);
    mask-image: linear-gradient(to right, transparent, #000 64px);
  }
  .gb-flow {
    margin-top: calc(var(--stage-h) * -1);
  }
  .gb-step {
    width: 40%;
    padding: 0 clamp(28px, 3vw, 56px) 0 var(--margin);
  }
  .gb-step__text {
    top: calc(var(--gb-vh) * 22);
    max-width: 28em;
    padding-bottom: calc(var(--gb-vh) * 26);
  }
  .gb-step__hold {
    min-height: calc(var(--gb-vh) * 125);
  }
  .gb-step--hero {
    display: flex;
    align-items: flex-start;
    min-height: calc(var(--gb-vh) * 100);
    padding-bottom: 0;
  }
  .gb-step--hero .gb-step__text {
    /* Added shortcuts must not lift the product name into the review banner. */
    padding-block: max(118px, calc(var(--gb-vh) * 13)) 56px;
  }
  .gb-step--shape .gb-step__hold {
    min-height: calc(var(--gb-vh) * 120);
  }
  .gb-step--shape .gb-step__text {
    top: calc(var(--gb-vh) * 12);
  }
  /* desktop: what flows past sits in the text column, beside the 3D */
  .gb-step__more {
    max-width: 28em;
    padding-bottom: calc(var(--gb-vh) * 18);
  }
  .gb-step--shape .gb-step__more {
    padding-bottom: calc(var(--gb-vh) * 30);
  }
  .gb-pair {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0 0 40px;
  }
  .gb-pair figcaption {
    padding-inline: 0;
  }
  .gb-pair figcaption .gb-u {
    display: inline-block;
  }
  .gb-pair figcaption .gb-u + .gb-u {
    margin-left: 0.7em;
  }
  .gb-step--inside .gb-step__hold {
    min-height: calc(var(--gb-vh) * 120);
  }
  .gb-step--height {
    padding-top: calc(var(--gb-vh) * 30);
  }
  .gb-step--height .gb-step__hold {
    min-height: calc(var(--gb-vh) * 210);
  }
  .gb-step--neck .gb-step__hold {
    min-height: calc(var(--gb-vh) * 100);
  }
  .gb-step--back .gb-step__hold {
    min-height: calc(var(--gb-vh) * 100);
  }
  .gb-step--back .gb-step__more {
    padding-bottom: calc(var(--gb-vh) * 30);
  }
  .gb-step__more .gb-inset {
    margin: 28px 0 0;
  }
  .gb-step__more .gb-inset figcaption {
    padding-inline: 0;
  }
  .gb-words blockquote p {
    font-size: 18px;
  }
  .gb-voice blockquote p {
    font-size: 18px;
  }
  .gb-voice--after blockquote p {
    font-size: 20px;
  }
  .gb-step--inside .gb-step__text,
  .gb-step--height .gb-step__text {
    top: calc(var(--gb-vh) * 11);
  }
  .gb-only-wide {
    display: block;
  }
  .gb-only-narrow {
    display: none;
  }
  .gb-step--height .gb-inset.gb-only-wide {
    width: 74%;
    margin-top: 28px;
  }
  .gb-eyebrow {
    font-size: 15px;
  }
  .gb-name {
    margin-top: 10px;
    font-size: 20px;
  }
  h1 {
    margin-top: 10px;
    font-size: clamp(40px, 3.9vw, 56px);
    line-height: 1.34;
  }
  .gb-sub {
    margin-top: 14px;
    font-size: 20px;
  }
  h2 {
    font-size: clamp(30px, 2.6vw, 38px);
    line-height: 1.55;
  }
  .gb-hook {
    font-size: 17px;
  }
  .gb-step--shape h2 {
    font-size: clamp(28px, 2.7vw, 42px);
    line-height: 1.45;
  }
  .gb-body {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.9;
  }
  .gb-hook + h2 + .gb-body,
  .gb-step__text h2 + .gb-body {
    margin-top: 18px;
  }
  .gb-block h3 {
    font-size: 23px;
  }
  .gb-offer {
    margin-top: 30px;
    padding-top: 20px;
    gap: 6px;
  }
  .gb-launch {
    font-size: 17px;
  }
  .gb-consult {
    font-size: 18px;
  }
  .gb-tag__pos {
    font-size: 12px;
  }
  .gb-tag__mat {
    font-size: 14px;
  }
  /* the top view's triangles are large here and their inner edge crosses the pillow's shadow: a
     thicker outline over a pale halo, a little colour inside, a larger label */
  .gb-lines .gb-tri {
    stroke-width: 3;
    fill: var(--olive);
    fill-opacity: 0.16;
  }
  .gb-lines .gb-tri-halo {
    display: inline;
    stroke-width: 7;
    stroke-opacity: 0.7;
  }
  .gb-tag[data-tag="corner"] {
    font-size: 14.5px;
  }
  .gb-tag--callout {
    padding: 6px 16px 7px;
    font-size: 18px;
  }
  .gb-lines [data-line="lead-neck"] {
    stroke-width: 2;
  }
  .gb-tag--g {
    font-size: 22px;
  }

  /* 洗う: what to do on the left, why on the right */
  .gb-wash {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 72px;
    padding: 96px var(--margin);
  }
  .gb-wash__detail {
    margin-top: 0;
    padding-top: 6px;
  }
  .gb-wash__step {
    font-size: 22px;
  }

  .gb-after {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 44px);
    padding: 96px var(--margin) 88px;
  }
  .gb-after__q {
    grid-column: 1 / 9;
    align-self: end;
    font-size: clamp(42px, 4.1vw, 60px);
    line-height: 1.35;
  }
  .gb-after__q .gb-u:first-child {
    font-size: 1.9em;
    line-height: 1.05;
  }
  .gb-after__pile {
    grid-column: 9 / 13;
    align-self: end;
    width: 100%;
    max-width: 400px;
    margin-top: 0;
  }
  .gb-after__recall {
    grid-column: 1 / 9;
    margin-top: 26px;
    font-size: 24px;
  }
  .gb-after__lead {
    grid-column: 1 / 8;
    margin-top: 14px;
    font-size: 18px;
  }
  /* the owner's years before (the page's words) on the left, her morning after on the right */
  .gb-after__owner {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 44px);
    align-items: center;
    margin-top: 48px;
  }
  .gb-after__owner-lead {
    grid-column: 1 / 6;
    font-size: 17px;
  }
  .gb-after__owner .gb-voice {
    grid-column: 6 / 13;
    margin-top: 0;
  }
  /* the four after one another along one rule, numbers kept small */
  .gb-after .gb-steps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 40px);
    margin-top: 64px;
  }
  .gb-after .gb-steps li {
    display: block;
    padding: 22px 0 0;
    border-bottom: 0;
  }
  .gb-after .gb-steps__n {
    display: block;
  }
  .gb-after .gb-steps h3 {
    margin-top: 14px;
    font-size: 19px;
  }
  .gb-after .gb-steps p {
    margin-top: 6px;
    font-size: 17px;
  }
  .gb-after__closing {
    grid-column: 1 / 7;
    margin-top: 56px;
    font-size: clamp(30px, 2.8vw, 40px);
    line-height: 1.5;
  }
  /* the maker's words, summed up, beside the closing: the first sentence on one line where it fits */
  .gb-after__said {
    grid-column: 7 / 13;
    max-width: 26.5em;
    align-self: end;
    margin-top: 56px;
  }

  /* 動画で見る: the height's film on the left, held on screen while its steps are read on the right */
  .gb-gallery {
    padding: 96px var(--margin) 88px;
  }
  .gb-gallery h2 {
    font-size: clamp(30px, 2.8vw, 40px);
  }
  .gb-gallery__lead {
    font-size: 17px;
  }
  .gb-gallery__height {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
    margin-top: 40px;
  }
  .gb-gallery__height .gb-film {
    position: sticky;
    top: calc(var(--gb-vh) * 10);
    /* no taller than about three quarters of the screen */
    max-width: min(100%, calc(var(--gb-vh) * 54));
  }
  .gb-howto {
    margin-top: 0;
  }
  .gb-howto h3 {
    font-size: 23px;
  }
  .gb-howto__steps li {
    grid-template-columns: 2rem minmax(0, 1fr) 168px;
    /* the words stay right under what to do; the photo's extra height goes below them */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "n t art"
      ". b art";
    column-gap: 16px;
    padding: 18px 0;
  }
  .gb-howto__steps li.gb-howto__plain {
    grid-template-areas:
      "n t t"
      ". b b";
  }
  .gb-howto__t {
    font-size: 18px;
  }
  .gb-howto__b {
    margin-top: 6px;
    font-size: 15.5px;
  }
  .gb-howto__art {
    margin-top: 0;
  }
  .gb-gallery__films {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 44px);
  }

  /* 物語: the film and the heading side by side, then the chapters, photos left and right */
  .gb-tale {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 44px);
    row-gap: 96px;
    padding: 96px var(--margin);
  }
  .gb-tale__film {
    grid-column: 1 / 8;
    margin: 0;
  }
  .gb-tale__loop figcaption {
    padding-inline: 0;
  }
  .gb-tale__process {
    margin: 22px 0 0;
    font-size: 15.5px;
  }
  .gb-tale__head {
    grid-column: 8 / 13;
    align-self: end;
  }
  .gb-tale__head h2 {
    font-size: clamp(40px, 3.8vw, 56px);
    line-height: 1.35;
  }
  .gb-tale__head .gb-body {
    font-size: 17px;
  }
  /* a photo and its words side by side, centred on each other so neither leaves a hole */
  .gb-tale__chapter {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 44px);
    align-items: center;
    padding-top: 48px;
  }
  .gb-tale__history {
    align-items: start;
  }
  .gb-tale__history .gb-tale__h,
  .gb-tale__history .gb-years {
    grid-column: 1 / 7;
  }
  .gb-tale__history .gb-tale__text {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    margin-top: 0;
  }
  .gb-years__y {
    font-size: 36px;
  }
  .gb-years__t {
    font-size: 19px;
  }
  .gb-years li:last-child .gb-years__t {
    font-size: 22px;
  }
  /* the factory tour across the middle of the story's columns */
  .gb-tale__factory .gb-yt {
    grid-column: 3 / 11;
  }
  .gb-tale__meet .gb-tale__photo,
  .gb-tale__salon .gb-tale__photo {
    grid-column: 1 / 7;
  }
  .gb-tale__meet .gb-tale__text,
  .gb-tale__salon .gb-tale__text {
    grid-column: 8 / 13;
    margin-top: 0;
  }
  .gb-tale__idea .gb-tale__photo {
    grid-column: 8 / 13;
    grid-row: 1;
  }
  .gb-tale__idea .gb-tale__text {
    grid-column: 1 / 7;
    grid-row: 1;
    margin-top: 0;
  }
  /* 「…世の中にないんじゃないかな」 on one line beside the photo */
  .gb-tale__big {
    font-size: clamp(26px, 2.2vw, 31px);
  }
  .gb-tale__line {
    font-size: clamp(28px, 2.5vw, 34px);
  }
  .gb-tale__points li {
    font-size: 19px;
  }
  .gb-tale__staff {
    font-size: 20px;
  }

  .gb-choose {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 44px);
    padding: 88px var(--margin) 64px;
  }
  .gb-choose h2 {
    grid-column: 1 / 5;
    font-size: clamp(30px, 2.6vw, 40px);
    line-height: 1.5;
  }
  .gb-choose h2 .gb-u {
    display: block;
  }
  .gb-table {
    grid-column: 6 / 13;
    margin-top: 0;
    font-size: 18px;
  }
  .gb-table thead th {
    font-size: 13px;
  }
  .gb-table th,
  .gb-table td {
    padding: 20px 0;
  }
  .gb-tale__changes {
    margin-top: 22px;
    font-size: 17px;
  }
  .gb-choose__bridge {
    grid-column: 6 / 13;
    margin-top: 44px;
    font-size: clamp(28px, 2.5vw, 36px);
  }

  .gb-spec {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 44px);
    row-gap: 48px;
    align-items: start;
    padding: 72px var(--margin) 88px;
  }
  .gb-spec__buy {
    grid-column: 1 / 6;
  }
  .gb-spec__name {
    font-size: clamp(32px, 2.8vw, 44px);
  }
  .gb-spec .gb-num {
    font-size: 72px;
  }
  .gb-price {
    font-size: 18px;
  }
  .gb-spec__rows {
    grid-column: 7 / 13;
    grid-row: 1;
  }
  .gb-spec__rows dt {
    font-size: 15px;
  }
  .gb-spec__rows dd {
    font-size: 17px;
  }
  .gb-faq {
    grid-column: 7 / 13;
  }
  .gb-faq summary,
  .gb-faq__a {
    font-size: 17px;
  }

  .gb-trial {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    column-gap: 64px;
    padding: 72px var(--margin);
  }
  .gb-trial h2 {
    grid-column: 1;
    font-size: clamp(30px, 2.8vw, 40px);
  }
  .gb-trial .gb-hook,
  .gb-trial__lead {
    grid-column: 1;
  }
  .gb-trial__book {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    margin-top: 0;
  }
  .gb-trial__guide {
    grid-column: 1 / -1;
  }
  .gb-trial__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 40px);
  }
  .gb-trial__steps li {
    grid-template-columns: 28px minmax(0, 1fr);
    border-bottom: 0;
  }
  .gb-trial .gb-steps__art {
    grid-column: 2;
    width: 160px;
    margin-top: 20px;
  }
}

/* The grounds, ink and 3D light of each state are one table in moods.js (day hero → night
   形 → studio 中身 → workbench 高さ → morning 届いてから → workshop 物語); this file only reads
   --ground, --ink, --muted and --line. 動画で見る, between 届いてから and 物語, paints its own ground
   (the day's, the one the height film is set on). Colour from the product (the elastomer's black and white,
   the clear pipe, the white bag) stays on the product, never on a wall. */