h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: inherit; }
header, nav, main, section, article, aside, footer, figure, figcaption, search, hgroup { margin: 0; padding: 0; border: 0; }

/* LP13 site layer. Loaded last.
   The opening stage is part of the shell on every page for フルスパ (hlspa.js).
   Sub pages hide it; the music keeps playing because the stage stays in the DOM. */

/* 1. Page kinds */
.page_kind_sub .page_stage,
.page_kind_sub .mode_control,
.page_kind_sub .header_site_nav,
.page_kind_sub .opening_skip { display: none; }
/* The game's menu button (the four pixels) belongs to the opening stage: it
   goes once the header docks at the company section, as on sub pages
   (2026-10-07, 代表). world.js closes its menu then. */
.site_header_docked .mode_control { display: none; }
/* Sub pages have their own menu row under the header. Once it has scrolled
   under the header, world.js sets header_menu_on and the header menu comes in,
   left of the sound button so the button does not move (2026-09-27). Without
   JavaScript the row alone serves. Phones keep the header small (no menu). */
@media (min-width: 768px) {
  .page_kind_sub.header_menu_on .header_site_nav { display: block; order: -1; }
  /* Room for "Music" (.sound_ring), shown at the button's upper left. */
  .page_kind_sub.header_menu_on .sound_control_wrap { margin-left: 18px; }
}
.page_swap { display: block; }
/* The header menu is in the HTML (readers without JavaScript get it). On the
   TOP, world.js decides when it shows; until then it stays out of the paint. */
.header_nav_boot .header_site_nav { display: none; }
.page_swap:focus { outline: none; }
.page_swap_enter { animation: page_swap_enter 220ms ease-out; }
@keyframes page_swap_enter { from { opacity: 0; } to { opacity: 1; } }
/* フルスパの骨組み（hlspa_skeleton.js、2026-10-02、代表）。次のページが
   0.3秒たっても届かない時、その最初の画面を、本物と同じHTMLとCSSのまま描く。
   字は透明にして、太い打ち消し線を灰色の帯にする。字を span で包むと、
   折り返し（text-wrap: pretty）が本物と変わったので、HTMLには手を入れず、
   線の指定を外側から流し込む。写真は灰色の箱にする。形が本物とずれないことが
   いちばん大事なので、大きさや余白には一切さわらない（ずれるなら出さない）。
   動きを減らす設定では、ゆっくり明滅もしない。 */
.hlspa_skeleton {
  -webkit-text-fill-color: transparent;
  text-decoration-line: line-through;
  text-decoration-thickness: .9em;
  text-decoration-color: #22322a17;
  text-decoration-skip-ink: none;
}
.hlspa_skeleton_link { text-decoration-color: transparent; }
.hlspa_skeleton_media { background: #22322a17; object-position: 200vw 0; }
.hlspa_skeleton { animation: hlspa_skeleton_breath 1.2s ease-in-out infinite alternate; }
@keyframes hlspa_skeleton_breath { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .hlspa_skeleton { animation: none; }
}
/* 1b. The sub pages' menu row lives in the shell, before the swap region, so a
   page change does not rebuild it; hlspa_gnavi.js only moves the underline
   (2026-09-27, 代表). The row takes the room under the fixed header. Each
   item also draws its label in bold from data-label, hidden and zero-high, so
   it is always as wide as its bold self and the items do not shift when the
   bold moves. The label is not repeated in the text of the page. */
.sub_menu_outer { position: relative; background: var(--paper); }
.page_kind_top .sub_menu_outer { display: none; }
/* The breadcrumb lives in the shell too, under the menu row (2026-10-03,
   代表: ホーム need not vanish on every page change). hlspa_sync.js keeps
   the crumbs two pages share and replaces only the rest. The TOP has none. */
.crumbs_outer { background: var(--paper); }
.page_kind_top .crumbs_outer { display: none; }
.page_kind_sub .sub_menu_outer { padding-top: 82px; }
.sub_menu_link { display: inline-flex; flex-direction: column; }
/* Only the current item had the 2px underline (craft.css), so the row was 2px
   lower on pages that are not in it (apps, go ...) and the page moved by 2px.
   Every item keeps the room for it (2026-10-02, found by the skeleton test). */
.sub_menu_link:not([aria-current="page"]) { border-bottom: 2px solid transparent; }
.sub_menu_link::after { height: 0; overflow: hidden; font-weight: 800; visibility: hidden; content: attr(data-label); }
.hlspa_gnavi_marker {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--marker_w, 0px);
  height: 2px;
  background: var(--ink);
  opacity: 0;
  transform: translate(var(--marker_x, 0px), var(--marker_y, 0px));
  pointer-events: none;
}
.hlspa_gnavi_marked .hlspa_gnavi_marker { opacity: 1; }
.hlspa_gnavi_marked .craft_nav_link[aria-current="page"] { border-bottom-color: transparent; }
.hlspa_gnavi_ready .hlspa_gnavi_marker { transition: transform 380ms var(--ease_glide), width 380ms var(--ease_glide); }
@media (prefers-reduced-motion: reduce) {
  .hlspa_gnavi_ready .hlspa_gnavi_marker { transition: none; }
}
.sub_page { background: var(--paper); color: var(--ink); }
.link_chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

/* 2. Stage dock: the story/NEXT row sits on top of the fixed tools row.
   stage_dock_outer / stage_dock_inner and stage_tools_outer / stage_tools_inner
   are permanent flex pairs. Do not put context tags between them. */
.a_plus .stage_dock_outer {
  position: absolute;
  inset: 0;
  z-index: 33;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 12px;
  padding: 0 20px 28px;
  pointer-events: none;
}
.a_plus .stage_dock_inner { min-width: 0; max-width: 100%; pointer-events: auto; }
.a_plus .stage_dock_outer .story_advance_control,
.a_plus .stage_dock_outer .game_next_control { position: relative; inset: auto; max-width: 100%; }
.a_plus .stage_tools_outer { display: flex; align-items: center; gap: 12px; }
.a_plus .stage_tools_inner { min-width: 0; }
.a_plus .stage_dock_outer .panel_palette_outer { position: relative; }
.a_plus .stage_dock_outer .experience_controls { position: relative; inset: auto; transform: scale(.78); }
.a_plus :is(.scene_thought_001, .scene_thought_002, .scene_thought_003, .scene_personas, .scene_forming, .scene_actor, .scene_story, .scene_play) .stage_dock_outer .experience_controls { transform: scale(1); }
/* At the entry the sound switch stays beside the entrance button 「魔法を起こす」
   (engine/surfaces rules). Once the opening starts it joins the tools row. */
.a_plus :is(.scene_thought_001, .scene_thought_002, .scene_thought_003, .scene_personas, .scene_forming, .scene_actor, .scene_story, .scene_play) .stage_dock_outer .stage_sound_control {
  position: relative;
  inset: auto;
  transform: none;
}
.a_plus :is(.scene_thought_001, .scene_thought_002, .scene_thought_003, .scene_personas, .scene_forming, .scene_actor, .scene_story, .scene_play) .stage_dock_outer .stage_volume_panel {
  top: auto;
  right: auto;
  bottom: calc(100% + 12px);
  left: 0;
  transform-origin: left bottom;
}

/* The 小・中・大 under J/K/L follow the key color, so they stay readable on
   the paper keys as well as on the dark ones. */
.a_plus .jump_control small { color: currentColor; opacity: .78; font-size: .62rem; font-weight: 700; line-height: 1; }
/* On phones アド子 is 72px tall and the JUMP keys sat just above her head:
   the 96px flask of the later part (world.js obstacle_kinds) went under
   the keys. They stay above that flask now (2026-10-08). */
@media (max-width: 47.99rem) {
  .a_plus .jump_guide { bottom: calc(19% + max(var(--actor_height), 96px) + 1rem); }
}

/* アド子's one-line speech (LP13). It sits inside .actor_adoko, so it follows
   her when she walks: upper right of her head, never takes clicks. A separate
   live region (.actor_speech_status) reads it out. No display here, so
   [hidden] keeps working.
   A game's text window with a pixel font (2026-09-30, 代表): blue and red
   show a dark window with a light line inside, the paper opening a light box
   with an ink line. The font is DotGothic16 (SIL OFL 1.1), cut down to the
   characters of her lines; it is cut again whenever a line changes, which
   also moves the ?v= below. Its dots are drawn for 16px, so the size stays
   16px everywhere, and the spacing stays in whole pixels. */
@font-face {
  font-family: "speech_dot";
  src: url("assets/fonts/speech_dot.woff?v=202609301411") format("woff");
  font-display: swap;
}
.a_plus .actor_speech {
  --speech_fill: #1c2531;
  --speech_ink: #f3efe4;
  --speech_tail_line: var(--speech_fill);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 58%;
  width: max-content;
  max-width: min(21rem, var(--speech_max, 70vw));
  padding: 15px 19px 15px 21px;
  border-radius: 8px;
  outline: 2px solid var(--speech_ink);
  outline-offset: -6px;
  background: var(--speech_fill);
  color: var(--speech_ink);
  box-shadow: 4px 5px 0 #00000030;
  font-family: "speech_dot", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 1px;
  word-break: auto-phrase;
  transform-origin: 24px 100%;
  pointer-events: none;
  animation: actor_speech_life var(--speech_duration, 3600ms) var(--ease_glide) both;
}
/* The paper opening: a light box with a 2px ink line and a hard shadow. The
   fill is the paper control color made solid, so neither the tail's line nor
   the box line under the tail shows through. */
.surface_paper .a_plus .actor_speech {
  --speech_fill: #f9f3e6;
  --speech_ink: var(--surface_ink);
  --speech_tail_line: var(--speech_ink);
  padding: 12px 16px 12px 18px;
  border: 2px solid var(--speech_ink);
  border-radius: 0;
  outline: 0;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--speech_ink) 20%, transparent);
}
/* The tail: steps on a 2px grid. The outer shape takes the line color and the
   same shape 2px smaller the fill, so the line stays 2px on every step and
   opens into the box. In the dark window both are the fill (a solid tail). */
.a_plus .actor_speech::before,
.a_plus .actor_speech::after {
  position: absolute;
  top: 100%;
  left: 14px;
  width: 20px;
  height: 18px;
  content: "";
}
.a_plus .actor_speech::before {
  background: var(--speech_tail_line);
  clip-path: polygon(0 0, 20px 0, 20px 2px, 18px 2px, 18px 4px, 16px 4px, 16px 6px, 14px 6px, 14px 8px, 12px 8px, 12px 10px, 10px 10px, 10px 12px, 8px 12px, 8px 14px, 6px 14px, 6px 16px, 4px 16px, 4px 18px, 0 18px);
}
.a_plus .actor_speech::after {
  background: var(--speech_fill);
  clip-path: polygon(2px 0, 18px 0, 18px 2px, 16px 2px, 16px 4px, 14px 4px, 14px 6px, 12px 6px, 12px 8px, 10px 8px, 10px 10px, 8px 10px, 8px 12px, 6px 12px, 6px 14px, 4px 14px, 4px 16px, 2px 16px);
}
/* アド子が舞台の右寄りにいる時は、左向きに出す。尾も左右を入れ替える。 */
.a_plus .actor_speech_left { right: 58%; left: auto; transform-origin: calc(100% - 24px) 100%; }
.a_plus .actor_speech_left::before,
.a_plus .actor_speech_left::after { right: 14px; left: auto; }
.a_plus .actor_speech_left::before {
  clip-path: polygon(20px 0, 0 0, 0 2px, 2px 2px, 2px 4px, 4px 4px, 4px 6px, 6px 6px, 6px 8px, 8px 8px, 8px 10px, 10px 10px, 10px 12px, 12px 12px, 12px 14px, 14px 14px, 14px 16px, 16px 16px, 16px 18px, 20px 18px);
}
.a_plus .actor_speech_left::after {
  clip-path: polygon(18px 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px, 8px 8px, 10px 8px, 10px 10px, 12px 10px, 12px 12px, 14px 12px, 14px 14px, 16px 14px, 16px 16px, 18px 16px);
}
/* ミニゲームのあとの誘い（2026-09-29）：この吹き出しだけは押せる。マウス・タッチ用で、
   アド子ごと aria-hidden なのでタブには入れない（大きいロゴと同じ扱い）。
   押せる印は、ゲームの選択の印のようなドットの右向きの三角。 */
.a_plus .actor_speech_link { pointer-events: auto; cursor: pointer; }
.a_plus .actor_speech_link .actor_speech_text::after {
  display: inline-block;
  width: 8px;
  height: 14px;
  margin-left: 10px;
  vertical-align: -1px;
  background: currentColor;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px, 8px 8px, 6px 8px, 6px 10px, 4px 10px, 4px 12px, 2px 12px, 2px 14px, 0 14px);
  content: "";
}
@media (hover: hover) {
  .a_plus .actor_speech_link:hover .actor_speech_text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
/* ボソッと言う時は、線を点線にして影を消し、少し静かに出す。飛び出す動きもしない。
   ドットは16pxで描かれているので、字の大きさは変えない。 */
.a_plus .actor_speech_quiet {
  padding: 13px 17px 13px 19px;
  outline-style: dashed;
  box-shadow: none;
  color: color-mix(in srgb, var(--speech_ink) 84%, transparent);
  animation-name: actor_speech_life_quiet;
}
.surface_paper .a_plus .actor_speech_quiet {
  padding: 10px 14px 10px 16px;
  border-style: dashed;
  box-shadow: none;
}
/* アド子が話している間は、頭の上の案内（「ミニゲームまで、あと9回」など）が一歩下がる。
   吹き出しと同じ場所に出て、ドットの字は小さくしないので重なるため。world.js が
   話している間だけ actor_speaking を付ける。消える動きは案内のもの（0.42秒）。 */
.a_plus .actor_speaking .movement_guide_actor_label { opacity: 0; }
@keyframes actor_speech_life_quiet {
  0% { opacity: 0; }
  12%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes actor_speech_life {
  0% { opacity: 0; transform: translateY(6px) scale(.92); }
  9%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* 2d. タイプライターのまわりに言葉が浮かぶ（2026-09-27、代表の案）。機体が折り畳まれて
   タイプライターが正面に来る場面（scene_thought_003）で、world.js が言葉を置く。
   箱は機体（.thoughtcraft）と同じ位置・同じ大きさ。機体の影（filter）が言葉に
   かからないよう、機体の中ではなく隣に置く。言葉は機体の左右（スマホは上下）にだけ置き、
   枠なしで、ほわんと浮かんで消える。 */
.a_plus .typewriter_words {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82vw, 70rem);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.a_plus .typewriter_word {
  position: absolute;
  /* The stage's own text color: dark on paper, light on the blue and red panels. */
  color: var(--surface_ink);
  font-size: clamp(18px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  animation: typewriter_word_float 2800ms ease-in-out both;
  animation-delay: var(--delay, 0ms);
}
/* Where the word hangs from its spot: left of the machine it ends at the spot,
   right of it it starts there, above and below it is centred. */
.a_plus .typewriter_word_left { transform: translate(-100%, -50%); }
.a_plus .typewriter_word_right { transform: translate(0, -50%); }
.a_plus .typewriter_word_center { transform: translate(-50%, -50%); }
@keyframes typewriter_word_float {
  0% { opacity: 0; translate: 0 18px; filter: blur(8px); }
  30% { opacity: 1; translate: 0 0; filter: blur(0); }
  70% { opacity: 1; translate: 0 -12px; filter: blur(0); }
  100% { opacity: 0; translate: 0 -28px; filter: blur(6px); }
}

/* 2c. 会社紹介の背景は、スライドごとに色が変わる（background_scroll.js）。
   固定ヘッダーはその上に乗っているので、同じ色を敷いて地続きに見せる
   （2026-09-24、代表）。背景の帯（site_mode_glow）は画面の高さいっぱいで
   描かれているので、ヘッダーにも同じ絵を「画面の高さ」で敷き、上端だけを見せる。
   こうすると光の位置と向きまで揃うので、境目に色の段差が出ない。
   色は background_scroll.js が root へ渡す。下層ページは渡されないので紙色に戻る。
   物語の間（まだ docked でない時）は、舞台の上なので紙色のまま。
   background-color は付けない（2026-09-30、代表の指摘）。絵がヘッダーを覆うので
   ふだんは見えないが、ヘッダーの背景の移り変わり（engine.css、0.32秒）で色だけが
   ゆっくり戻り、TOPから移った直後にスライドの色一色が残ってちらついた。 */
.page_kind_top .site_header_docked {
  background-image:
    radial-gradient(ellipse 56rem 42rem at 13% 29%, var(--site_head_glow_a, transparent), transparent 69%),
    radial-gradient(ellipse 48rem 40rem at 82% 66%, var(--site_head_glow_b, transparent), transparent 72%),
    linear-gradient(145deg, var(--site_head_top, #f3ead7), var(--site_head_bottom, #fff8e8) 76%);
  background-repeat: no-repeat;
  background-size: 100% 100svh;
  background-position: 0 0;
}

/* 2b. v006の名残の案内の列。会社紹介の右上に絶対配置されていて、ヘッダーの
   案内が出るまでの間だけ表示される（world.js の sync_header_navigation）。
   文字色は暗い背景用の白系のままなので、紙色の上では文字が見えず、罫線
   （craft_nav_outer の下線とホームの現在地の線）だけが残っていた。ヘッダーが
   すぐ引き継ぐし、見えない行き先はキーボードの人にも渡せないので、列ごと
   出さない。2026-09-24、代表の指摘。 */
.a_plus .site_local_nav { display: none; }

/* 3. The fixed "つづきを見る" lands where the tools row was. */
.a_plus .site_slide_advance_fixed {
  right: calc(max(clamp(18px, 3.5vw, 58px), (100% - 1740px) / 2) + 21px);
  bottom: calc(57px + var(--next_lift, 0px));
}
.a_plus .site_slide_advance_fixed:not([hidden]) { animation: next_drop 300ms cubic-bezier(.2, .8, .2, 1); }
@keyframes next_drop { from { opacity: 0; transform: translateY(-64px); } to { opacity: 1; transform: none; } }

/* The step icon: two chevrons, the lower one lighter (option B). The first
   try, an arrow landing on a ripple, read as a download mark. It replaces the
   plain ↓ in the slide links, the fixed NEXT and the header link. Turning it
   around is enough for the last slide, which goes back up. */
.step_icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}
.step_icon_echo { opacity: .5; stroke-width: 1.3; }
.site_slide_advance_arrow_up .step_icon,
.opening_skip_up .step_icon { transform: rotate(180deg); }
.opening_skip .step_icon { width: 14px; height: 14px; }
.site_slide_advance_fixed_arrow .step_icon { width: 16px; height: 16px; }
.a_plus .site_slide_advance_fixed_link:hover .step_icon,
.a_plus .site_slide_advance_fixed_link:focus-visible .step_icon,
.a_plus .opening_skip:hover .step_icon { transform: translateY(2px); }
.a_plus .site_slide_advance_arrow_up .step_icon,
.a_plus .opening_skip_up .step_icon { transform: rotate(180deg); }
.a_plus .site_slide_advance_fixed_link:hover .site_slide_advance_arrow_up .step_icon,
.a_plus .opening_skip_up:hover .step_icon { transform: rotate(180deg) translateY(2px); }

/* 3b. The sound buttons while music plays. The header button takes the look
   of the one on the stage (paper face, thin line), and both glow emerald and
   breathe slowly. On blue and red panels the stage button keeps its dark
   face; only the marks and the glow turn emerald. */
.a_plus {
  --sound_on_face: #fcf7e9f2;
  --sound_on_line: #12b88666;
  --sound_on_mark: #12b886;
  --sound_on_glow: #12b88680;
}
.a_plus .site_header .sound_control_header[aria-pressed="true"] {
  border: 1px solid var(--sound_on_line);
  background: var(--sound_on_face);
}
.a_plus .sound_control_stage[aria-pressed="true"] { border-color: var(--sound_on_line); }
.a_plus .sound_control[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--sound_on_line), 0 0 14px var(--sound_on_glow), 0 8px 20px var(--surface_shadow);
  animation: sound_on_glow 2.8s ease-in-out infinite;
}
.a_plus .site_header .sound_control[aria-pressed="true"] .sound_star,
.a_plus .sound_control_stage[aria-pressed="true"] .sound_star {
  background: var(--sound_on_mark);
  box-shadow: 0 0 6px var(--sound_on_mark), 0 0 16px var(--sound_on_glow);
}
.a_plus .site_header .sound_control[aria-pressed="true"] .sound_arc,
.a_plus .sound_control_stage[aria-pressed="true"] .sound_arc {
  border-top-color: var(--sound_on_mark);
  border-right-color: var(--sound_on_mark);
  filter: drop-shadow(0 0 2px var(--sound_on_glow));
}
@keyframes sound_on_glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--sound_on_line), 0 0 8px var(--sound_on_glow), 0 8px 20px var(--surface_shadow); }
  50% { box-shadow: 0 0 0 1px var(--sound_on_mark), 0 0 24px var(--sound_on_glow), 0 8px 20px var(--surface_shadow); }
}
/* "Music" along the upper left of the header's sound button (2026-10-07,
   代表). It comes and goes with the volume panel (.volume_open, set by
   world.js on hover, focus and click). The SVG is centered on the button;
   the word sits on an arc 7px outside the circle (shell.html; 3px looked
   stuck to it, 代表). It turns in from the left as it comes. */
.a_plus .sound_ring {
  --ring_turn: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform: rotate(calc(var(--ring_turn) - 14deg));
  transition: opacity 200ms ease, transform 420ms var(--ease_glide);
}
.a_plus .sound_control_wrap.volume_open .sound_ring {
  opacity: 1;
  transform: rotate(var(--ring_turn));
}
/* Phones put the header's buttons higher (12px from the top): turned a
   little to the left, the word stays inside the header. */
@media (max-width: 767px) {
  .a_plus .sound_ring { --ring_turn: -22deg; }
}
.a_plus .sound_ring_path { fill: none; }
.a_plus .sound_ring_text {
  fill: #344a40;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-anchor: middle;
}

/* 3c. The big STAMPP above 「魔法を起こす」, like a search page (LP13).
   Same lettering as the header logo, so the two read as one logo: the header
   one waits while this one is on screen, and when the magic starts this one
   spins up into the header (world.js fly_stage_logo). Taking .stage_logo out
   of the shell brings back the old entrance. */
.a_plus .stage_logo {
  position: absolute;
  bottom: calc(100% + clamp(22px, 4.2vh, 42px));
  left: 50%;
  /* left: 50% leaves only half the entrance width; keep the logo on one line. */
  width: max-content;
  color: var(--surface_ink);
  transform: translateX(-50%);
  /* Pressing the logo starts the same magic as the entrance button (world.js).
     It is a second way in for mouse and touch; keyboard and screen readers
     use the button, so the logo stays aria-hidden and out of the tab order. */
  cursor: pointer;
  pointer-events: auto;
  transition: transform 220ms ease;
}
.a_plus .stage_logo .brand_visual { font-size: clamp(54px, 7vw, 96px); }
.a_plus .stage_logo .brand_p_002 { transition: transform 220ms ease; }
/* A hint that the logo can be pressed: it lifts a little and the last P tips. */
@media (hover: hover) {
  .a_plus .stage_logo:hover { transform: translate(-50%, -3px); }
  .a_plus .stage_logo:hover .brand_p_002 { transform: translateY(.08em) rotate(10deg); }
}
.a_plus .stage_logo_flown { visibility: hidden; }
.a_plus .brand_link { transition: opacity 240ms ease; }
.brand_waiting_boot .brand_link,
.a_plus .brand_link_waiting { opacity: 0; pointer-events: none; }
.a_plus .brand_link_waiting:focus-visible { opacity: 1; }
/* Landing: no fade, a small bounce in place. */
.a_plus .brand_link_landing { transition: none; }
.a_plus .brand_link_landing .brand_visual { animation: brand_landing 460ms ease-out; }
@keyframes brand_landing {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.2); }
}
/* The copy that flies. It lives on the body, above the header. */
.a_plus .brand_flyer {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.a_plus .brand_flyer_spin { display: flex; }
.a_plus .brand_flyer .brand_visual { font-size: inherit; }

/* 4c. MCP開発 (LP13). The chain shows where Stamp's part sits: the AI, the
   MCP mouth Stamp builds, and the system the customer already has.
   mcp_chain_outer / _inner are a fixed pair. The dashed line behind the
   parts only joins them; it is not an arrow. */
.mcp_lead { max-width: 860px; margin-top: 18px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.9; word-break: auto-phrase; }
.mcp_chain_outer { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); max-width: 980px; margin: 30px 0 0; padding: 0; list-style: none; }
.mcp_chain_outer::before { position: absolute; top: 50%; right: 10%; left: 10%; border-top: 2px dashed #22322a66; content: ""; }
.mcp_chain_inner { position: relative; min-width: 0; }
.mcp_chain_part { height: 100%; padding: 20px 18px; border: 1px solid var(--line); background: #fffdf7; text-align: center; }
.mcp_chain_part_mouth { border: 2px solid var(--ink); background: var(--yellow); box-shadow: 7px 8px 0 var(--ink); }
.mcp_chain_role { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.4; }
.mcp_chain_text { margin-top: 6px; color: #3d5448; font-size: 14px; line-height: 1.7; }
.mcp_about { max-width: 860px; margin-top: 32px; padding: 18px 22px; border-left: 4px solid var(--green); background: #fffdf7; }
.mcp_about_label { color: var(--green); font-size: 14px; font-weight: 800; }
.mcp_about_text { margin-top: 6px; font-size: 15px; line-height: 1.9; }
.mcp_more { margin-top: 22px; }
/* 「MCPの口」 is one word; do not split it across lines. */
.mcp_term { white-space: nowrap; }
/* The paragraphs after the first in the MCP page's explanation get some air. */
.mcp_copy_next { margin-top: 14px; }
/* On the MCP page the steps sit in the narrow detail column, so they stack. */
.mcp_steps_outer { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }

/* 4d. アプリ（LP13、2026-09-26）。TOPのスライドは、左にストアの紹介画像、右に
   アプリそのもの。apps_feature_outer / _inner、apps_status_outer / _inner、
   アプリのページの apps_shots_outer / _inner は、それぞれ組の対。 */
.apps_lead { max-width: 860px; margin-top: 18px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.9; word-break: auto-phrase; }
.apps_feature_outer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 44px); align-items: center; max-width: 1120px; margin-top: 30px; }
.apps_feature_inner { min-width: 0; }
.apps_banner { overflow: hidden; border: 2px solid var(--ink); border-radius: 18px; background: #ffffff; box-shadow: 9px 10px 0 var(--ink); }
.apps_banner_img { display: block; width: 100%; height: auto; }
.apps_app { padding: 22px 24px 24px; border: 1px solid var(--line); background: #fffdf7; }
.apps_app_head { display: flex; align-items: center; gap: 16px; }
.apps_app_icon { flex: none; width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 16px #22322a26; }
.apps_app_name { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; line-height: 1.35; }
.apps_app_copy { margin-top: 16px; font-size: 15px; line-height: 1.9; word-break: auto-phrase; }
.apps_status_outer { display: grid; gap: 4px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px dashed #22322a40; list-style: none; }
.apps_status_inner { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 14px; line-height: 1.8; }
.apps_status_name { min-width: 6.5em; font-weight: 800; }
.apps_app_link { margin-top: 16px; }
/* アプリのページ */
.apps_page_head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.apps_page_tagline { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; line-height: 1.6; }
.apps_shots_outer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.apps_shots_inner { min-width: 0; }
.apps_shot_frame { overflow: hidden; border: 1px solid #22322a40; border-radius: 16px; background: #ffffff; box-shadow: 0 12px 28px #22322a1f; }
.apps_shot { display: block; width: 100%; height: auto; }
.apps_shot_caption { margin-top: 10px; color: #4d6358; font-size: 13px; line-height: 1.7; word-break: auto-phrase; }
.apps_copy_next { margin-top: 14px; }
/* The development case: the points follow a paragraph. The legal links sit small. */
.apps_case_points { margin-top: 18px; }
.apps_legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 13px; }
@media (max-width: 767px) {
  .apps_feature_outer { grid-template-columns: 1fr; }
  .apps_shot_frame { border-radius: 10px; }
  .apps_shot_caption { font-size: 12px; }
}

/* 4b. STAMPP Local CMS の紹介 */
.local_cms_points_outer { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.local_cms_points_inner { min-width: 0; padding: 14px 18px; border: 1px solid #22322a40; background: #fffdf7; font-size: 15px; line-height: 1.9; }
.local_cms_point_name { display: block; margin-bottom: 2px; font-weight: 800; }
/* Screens of the CMS (development captures). local_cms_shots_outer / _inner are a fixed pair. */
.local_cms_shot_frame { overflow: hidden; border: 1px solid #22322a40; border-radius: 8px; background: #ffffff; box-shadow: 0 14px 34px #22322a1f; }
.local_cms_shot { display: block; width: 100%; height: auto; }
.local_cms_shot_caption { margin-top: 10px; color: #4d6358; font-size: 13px; }
.local_cms_shot_block { margin-top: 28px; }
.local_cms_shots_outer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 28px; }
.local_cms_shots_inner { min-width: 0; }
/* The two local tools side by side. local_tools_outer / _inner are a fixed pair. */
.local_cms_lead { max-width: 820px; margin-top: 18px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.9; word-break: auto-phrase; }
.local_tools_outer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: 30px; }
.local_tools_inner { min-width: 0; }
.local_tool { height: 100%; border: 1px solid var(--line); background: #fffdf7; }
.local_tool_shot { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: #ffffff; }
.local_tool_shot .local_cms_shot { height: 100%; object-fit: cover; object-position: center top; }
/* The editorial room shot keeps its lower half, where the circle mark is. */
.local_tool_shot_bottom .local_cms_shot { object-position: center bottom; }
.local_tool_body { padding: 20px 22px 24px; }
.local_tool_role { color: #287159; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.local_tool_name { margin: 6px 0 10px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.4; }
.local_tool_copy { font-size: 15px; line-height: 1.9; }
.local_tool_link { margin-top: 14px; }
.local_tool_note { margin-top: 14px; color: #4d6358; font-size: 13px; }

/* 4. CMS corner (from v006, in A's paper colors) */
.cms_since_outer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 28px; }
.cms_since_inner { min-width: 0; }
.cms_since_lead { font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; letter-spacing: .04em; }
.cms_since_years { color: #b0651a; font-family: Georgia, "Times New Roman", serif; font-size: clamp(84px, 11vw, 150px); font-weight: 700; line-height: .85; letter-spacing: -.04em; }
.cms_since_unit { color: #b0651a; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; }
.cms_types_outer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.cms_types_compact { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
.cms_types_inner { min-width: 0; }
.cms_type { padding: 26px 26px 30px; border: 1px solid var(--line); background: #fffdf7; }
.cms_type_number { color: #4d6358; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.cms_type_name { margin: 12px 0 14px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.45; }
.cms_type_copy { font-size: 15px; line-height: 1.9; }

/* 5. 始めました */
.start_cards_outer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.start_cards_inner { min-width: 0; }
.start_card { border: 1px solid var(--line); background: #fffdf7; }
.start_card_visual { display: grid; place-items: center; aspect-ratio: 940 / 365; overflow: hidden; border-bottom: 1px solid var(--line); background: #ffffff; }
.start_card_banner { display: block; width: 100%; height: 100%; object-fit: contain; }
.start_card_body { padding: 20px 22px 24px; }
.start_card_heading { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 22px; font-weight: 600; line-height: 1.5; }
.start_card_link { text-decoration: none; }
.start_card_link:hover { text-decoration: underline; }
.start_card_copy { margin-top: 8px; font-size: 15px; }
.start_card_text_banner { display: grid; place-content: center; gap: 2px; width: 100%; height: 100%; background: #d6e7dc; color: var(--ink); text-align: center; }
.start_card_text_banner_main { font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 3vw, 38px); font-weight: 700; letter-spacing: .02em; }
.start_card_text_banner_sub { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; }
.start_article_banner_frame { max-width: 940px; margin-top: 32px; border: 1px solid var(--line); background: #ffffff; }
.start_article_banner { display: block; width: 100%; height: auto; }
.start_article_text_banner { max-width: 940px; margin-top: 32px; aspect-ratio: 940 / 300; border: 1px solid var(--line); }
.start_article_credit { margin-top: 10px; color: #4d6358; font-size: 12px; }
.start_article_list { margin: 0; padding-left: 1.3em; font-size: 17px; line-height: 2; }

/* 6. Topics */
.a_plus_slide.topics_slide { min-height: 0; padding-bottom: 96px; }
.topics_list_outer { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.topics_list_inner { border-bottom: 1px solid #22322a33; }
.topics_item_outer { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 18px 2px; }
.topics_item_inner { min-width: 0; }
.topics_date { color: #4d6358; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.topics_title { font-size: 16px; }
.topics_link { font-size: 16px; font-weight: 700; }

/* 7. Sub pages */
/* Jumping to a section (services.html#service_cms など) has to clear the fixed
   header, the way the TOP slides already do in surfaces.css. Without it the
   section label landed behind the header (2026-09-20, 代表が気づいた). */
.craft_detail_outer[id] { scroll-margin-top: 82px; }
.service_steps_outer { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.service_steps_inner { min-width: 0; padding: 14px 18px; border: 1px solid #22322a40; background: #fffdf7; font-size: 15px; }
.service_step_name { display: block; margin-bottom: 2px; font-weight: 800; }
.works_case_outer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 64px); align-items: center; padding: 44px 0; border-top: 1px solid var(--line); }
.works_case_inner { min-width: 0; }
.works_case_meta { color: #4d6358; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.works_case_client { margin-top: 8px; font-size: 14px; font-weight: 700; }
.works_case_heading { margin-top: 10px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(26px, 3vw, 38px); font-weight: 500; line-height: 1.5; }
.works_case_copy { margin-top: 16px; font-size: 16px; line-height: 2; }
.works_case_quote { margin-top: 18px; padding-left: 16px; border-left: 3px solid var(--green); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 18px; line-height: 1.8; }
.works_case_image_frame { padding: 10px; border: 1px solid var(--line); background: #fffdf7; }
.works_case_image { display: block; width: 100%; height: auto; }
.works_case_caption { margin-top: 8px; color: #4d6358; font-size: 12px; }
.works_case_image_gap { margin-top: 18px; }
.company_table_outer { overflow-x: auto; }
.company_table { width: 100%; border-collapse: collapse; background: #fffdf7; font-size: 16px; }
.company_table th,
.company_table td { padding: 16px 18px; border: 1px solid #22322a40; text-align: left; vertical-align: top; }
.company_table th { width: 11em; background: #ebe3cf; font-weight: 700; }
.company_list { margin: 0; padding-left: 1.2em; }
.company_note { margin-top: 6px; font-size: 14px; }
.contact_facts_outer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.contact_facts_inner { min-width: 0; padding: 24px; border: 1px solid var(--line); background: #fffdf7; }
.contact_fact_label { color: #4d6358; font-size: 13px; font-weight: 800; }
.contact_fact_value { margin-top: 6px; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 700; }
.contact_fact_note { margin-top: 6px; font-size: 14px; }
/* The first pillar says what it builds under the big 「PHP」 (2026-10-15):
   on one line, 「PHP・Webシステム」 broke into pieces at every width. The
   hidden 「・」 keeps the heading read as 「PHP・Webシステム」. */
.craft_pillar_sub { display: block; margin-top: 8px; font-size: .34em; letter-spacing: .02em; line-height: 1.3; }
/* Slide pages besides the TOP (2026-10-16, 代表): the Local CMS page moves
   one slide at a time like the TOP (.site_mode, .a_plus_slide and the fixed
   「つづきを見る」 are the TOP's; the colors are in background_scroll.js). The
   sections lose their rules and sit on the moving background; 「はじめに戻る」
   lands on the page head below the fixed header. */
.slide_page .craft_detail_outer { padding: 0; border-top: 0; }
.slide_page .slide_body { width: 100%; }
.craft_sub_intro[id] { scroll-margin-top: 82px; }
@media (max-width: 767px) {
  .craft_sub_intro[id] { scroll-margin-top: 72px; }
}
/* Consultation entry points (2026-10-16): a row of a button and links; the
   TOP's closing block after the news; two links in the 相談窓 card; the
   examples on the contact page. */
.actions_row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.craft_consult_links { display: grid; justify-items: start; gap: 6px; }
.closing_consult { margin: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 72px) 0; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--line); background: #fffdf7e6; }
.contact_examples { margin-top: clamp(48px, 7vw, 80px); }
.contact_example_list { margin-top: 18px; }
.contact_fact_action { margin-top: 16px; }
/* Google Form: the iframe (.contact_form_frame) replaces .contact_form_slot once the form exists.
   The iframe cannot grow with its content, so its height is set here; match it to the real form. */
.contact_form_outer { margin-top: clamp(48px, 7vw, 80px); scroll-margin-top: 82px; }
.contact_form_note { margin-top: 12px; font-size: 14px; }
.contact_form_slot { margin-top: 20px; padding: 24px; border: 1px dashed var(--line); background: #fffdf7; }
.contact_form_slot_text { font-size: 15px; }
.contact_form_frame { display: block; width: 100%; max-width: 760px; height: 1200px; margin-top: 20px; border: 0; background: #fffdf7; }
@media (max-width: 767px) {
  .contact_form_outer { scroll-margin-top: 72px; }
  .contact_form_frame { height: 1400px; }
}
.message_body { max-width: 760px; }
.message_text { font-size: 17px; line-height: 2.1; }
.message_text + .message_text { margin-top: 22px; }
.message_sign { margin-top: 36px; font-weight: 700; line-height: 1.9; }
.book_subtitle { max-width: 760px; margin-top: 14px; font-size: 15px; font-weight: 700; line-height: 1.8; }
.book_meta { margin-top: 18px; color: #3d5448; font-size: 14px; }
/* The cover sits beside the book text. book_outer / book_inner are a fixed pair. */
.book_outer { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.book_inner { min-width: 0; }
.book_cover_frame { overflow: hidden; border-radius: 4px; box-shadow: 0 16px 34px #0f1f1733; }
.book_cover { display: block; width: 100%; height: auto; }

/* 8. Footer */
.footer_nav_outer { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.footer_nav_inner { min-width: 0; }
.footer_nav_link { color: #fffdf7; font-size: 14px; text-decoration: none; }
.footer_nav_link:hover,
.footer_nav_link[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.footer_nav_link:focus-visible { outline-color: #f4db54; }
.footer_copyright { margin-top: 12px; font-size: 12px; opacity: .8; }

/* The menu button on phones (2026-10-09, 代表): three lines and
   「メニュー」. Open, the lines turn into a cross and the header's own six
   links drop down under the header (menu_toggle.js, #site_menu). The
   display rules are single-class, so the hidden attribute (no JavaScript)
   still wins. */
.menu_toggle { display: none; align-items: center; gap: 5px; height: 40px; padding: 0 12px 0 10px; border: 1px solid #22322a40; border-radius: 20px; background: #fffaf0; color: #24392f; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.menu_toggle:focus-visible { outline: 2px solid #287159; outline-offset: 2px; }
.menu_toggle_icon { display: block; width: 18px; height: 18px; }
.menu_icon { display: block; width: 100%; height: 100%; }
.menu_icon_close { display: none; }
.menu_toggle[aria-expanded="true"] .menu_icon_bars { display: none; }
.menu_toggle[aria-expanded="true"] .menu_icon_close { display: inline; }
@media (max-width: 767px) {
  /* 「メニュー」 under the three lines: side by side, the header had no room
     before the company section and the sound button lay on the logo. */
  .menu_toggle { display: inline-flex; order: 9; flex-direction: column; justify-content: center; gap: 3px; width: 48px; height: 46px; padding: 0; border-radius: 12px; font-size: 10px; letter-spacing: 0; line-height: 1; }
  :root.site_menu_open .header_site_nav { display: block; position: fixed; top: 72px; right: 0; left: 0; z-index: 60; padding: 0 0 6px; background: #fbf6ea; box-shadow: 0 18px 32px #22322a24; }
  :root.site_menu_open .header_site_nav_inner { display: grid; gap: 0; filter: none; }
  :root.site_menu_open .header_site_nav a { display: block; padding: 13px 24px; border-bottom: 1px solid #22322a1a; color: #24392f; font-size: 15px; letter-spacing: .06em; }
  :root.site_menu_open .header_site_nav a[aria-current="page"] { font-weight: 800; }
}
/* Very narrow phones (under 360px): 「会社の紹介へ」 keeps only its icon in
   the header; the words stay for screen readers. */
@media (max-width: 359px) {
  .opening_skip_text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Touch screens (2026-10-09, 代表). The story button says 「タップで次へ」.
   In the play scene a sideways drag walks アド子 (world.js), so the stage
   keeps only the up-and-down scroll for itself. In the game the 小・中・大
   keys sit big under the horizon, where the thumbs do not cover アド子 or the
   flasks; the stage tools step aside for them while the game runs. */
.story_advance_touch_text { display: none; }
@media (hover: none) and (pointer: coarse) {
  .story_advance_keys_text { display: none; }
  .story_advance_touch_text { display: inline; }
  .a_plus .story_advance_key { display: none; }
  .a_plus .experience_stage.scene_play { touch-action: pan-y pinch-zoom; }
  .a_plus .touch_dragging .actor_adoko { transition: transform 90ms linear, opacity 500ms ease; }
  .a_plus .touch_dragging .movement_guide_actor { transition: left 90ms linear, opacity 420ms ease, transform 520ms var(--ease_glide); }
  .a_plus .jump_guide { top: calc(84% + 12px); right: auto; bottom: auto; left: 50%; grid-template-columns: 1fr; width: min(100% - 32px, 24rem); min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; transform: translateX(-50%); }
  .a_plus .jump_guide_title,
  .a_plus .jump_guide_line { display: none; }
  .a_plus .jump_guide_keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .a_plus .jump_control { width: auto; height: 56px; border-radius: 12px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .a_plus .jump_control span { display: none; }
  .a_plus .jump_control small { font-size: 18px; font-weight: 800; opacity: 1; }
  .a_plus .inline_game_active .stage_tools_outer { visibility: hidden; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 47.99rem) {
  .a_plus .jump_guide { top: calc(81% + 12px); bottom: auto; }
}
/* Once the opening has started, the entrance button 「魔法を起こす」 fades out
   with its row, but it used to stay clickable (opacity 0) in the middle of
   the stage: a click or tap there started the opening again, and Tab still
   reached it (2026-10-09). It leaves the hit test at once and the Tab order
   after the fade. */
.a_plus :is(.scene_thought_001, .scene_thought_002, .scene_thought_003, .scene_personas, .scene_forming, .scene_actor, .scene_story, .scene_play) .portal_control { visibility: hidden; pointer-events: none; transition: visibility 0s linear 520ms; }

/* 4c. 一番目の柱・PHP (2026-10-08). php_ways_outer / _inner are a fixed
   pair: the two things PHP does for STAMPP, side by side. */
.php_ways_outer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.php_ways_inner { min-width: 0; }
.php_way { padding: 26px 26px 30px; border: 1px solid var(--line); background: #fffdf7; }
.php_way_label { color: #287159; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.php_way_name { margin: 10px 0 14px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.45; }
.php_way_copy { font-size: 15px; line-height: 1.9; }
.php_points { margin-top: 18px; }
.php_copy_next { margin-top: 16px; }
/* 4d. HLSPA（フルスパ）始めました (2026-10-08): the invitation to try it on
   this site, and the closing line. */
.hlspa_try { max-width: 760px; margin-top: 26px; padding: 18px 22px; border: 1px solid var(--line); border-left: 6px solid #287159; background: #fffdf7; font-size: 16px; line-height: 1.9; }
.hlspa_punch { margin-top: 26px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; line-height: 1.5; word-break: auto-phrase; }
/* 4e. サービス (2026-10-10, 代表): the shelf of what STAMPP sells. The
   three big cards (products_outer / _inner, a fixed pair) and the smaller
   ones (more_services_outer / _inner, a fixed pair) open their page from
   anywhere on the card: the card's one link stretches over it. 「お困りごと
   から探す」 (find.html) and 「スタンプの姿勢」 (stance.html, the former
   services content) are pages of their own. */
.find_route_outer { margin-top: 28px; }
.find_route { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf7; color: var(--ink); text-decoration: none; transition: background 160ms ease, transform 160ms ease; }
.find_route:hover { background: #ffffff; transform: translateY(-2px); }
.find_route_name { font-size: 17px; font-weight: 800; }
.find_route_text { color: #4d6358; font-size: 14px; }
.products_outer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); margin-top: 32px; }
/* grid, so the card inside the article fills the row's height */
.products_inner { display: grid; min-width: 0; }
.product_hlspa { --product_tint: #f6eef8; --product_art: #8a5aa6; }
.product_local_cms { --product_tint: #edf5ef; }
.product_cms { --product_tint: #faf2e2; }
.product_card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--product_tint, #fffdf7); transition: transform 200ms ease, box-shadow 200ms ease; }
.product_card:hover,
.product_card:focus-within { transform: translateY(-3px); box-shadow: 0 18px 36px #22322a26; }
.product_visual { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: #ffffff; }
.product_visual_art { display: grid; place-items: center; padding: 5% 8%; background: #efe2f3; }
.product_shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.product_art { display: block; width: 100%; height: auto; }
.product_art_page { fill: #fffdf7; stroke: #22322a66; stroke-width: 1.5; }
.product_art_bar { fill: #22322a40; }
.product_art_line { fill: #22322a24; }
.product_art_wave { fill: none; stroke: var(--product_art); stroke-width: 3.5; stroke-linecap: round; }
.product_art_note { fill: var(--product_art); }
.product_art_stem { fill: none; stroke: var(--product_art); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.product_body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 26px; }
.product_role { color: #287159; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.product_name { margin: 8px 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.35; }
.product_catch { font-size: 16px; font-weight: 800; line-height: 1.7; word-break: auto-phrase; }
.product_copy { margin-top: 10px; font-size: 15px; line-height: 1.9; }
.product_note { margin-top: 8px; color: #4d6358; font-size: 13px; }
.product_actions,
.more_service_actions { margin-top: auto; padding-top: 16px; }
.product_actions .craft_text_link::after,
.more_service_actions .craft_text_link::after { content: ""; position: absolute; inset: 0; }
.more_services_head { margin-top: clamp(56px, 7vw, 90px); }
.more_services_outer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.more_services_inner { display: grid; min-width: 0; }
.more_service { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf7; transition: transform 200ms ease, box-shadow 200ms ease; }
.more_service:hover,
.more_service:focus-within { transform: translateY(-2px); box-shadow: 0 12px 26px #22322a1f; }
.more_service_role { color: #287159; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.more_service_name { margin: 6px 0 8px; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.4; }
.more_service_copy { font-size: 14px; line-height: 1.85; }
.stance_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
/* お困りごとから探す (find.html). troubles_outer / _inner are a fixed pair;
   the cards jump down the page, so their icon points down. */
.troubles_outer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.troubles_inner { min-width: 0; }
.trouble_link { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf7; color: var(--ink); font-size: 15px; font-weight: 800; line-height: 1.6; text-decoration: none; word-break: auto-phrase; transition: background 160ms ease, transform 160ms ease; }
.trouble_link:hover { background: #ffffff; transform: translateY(-2px); }
.trouble_icon { flex: none; color: #287159; }
.find_block_label { color: #287159; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.find_block_label_next { margin-top: 22px; }
.find_cases { margin: 8px 0 0; padding-left: 1.3em; font-size: 16px; line-height: 1.9; }
.find_links { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 16px; }
/* STAMPP CMS (cms.html): the track record, then the three ways. */
.cms_works_case { align-items: start; }
.cms_works_note { margin-top: 14px; color: #4d6358; font-size: 13px; }
.cms_types_block { margin-top: clamp(56px, 7vw, 90px); }
@media (prefers-reduced-motion: reduce) {
  .find_route,
  .product_card,
  .more_service,
  .trouble_link { transition: none; }
  .find_route:hover,
  .product_card:hover,
  .product_card:focus-within,
  .more_service:hover,
  .more_service:focus-within,
  .trouble_link:hover { transform: none; }
}
@media (max-width: 920px) {
  .products_outer,
  .more_services_outer { grid-template-columns: 1fr; max-width: 600px; }
  .troubles_outer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .troubles_outer { grid-template-columns: 1fr; }
}
/* 「WordPressやMTと、何が違うの？」 on the TOP's Local CMS slide.
   local_cms_vs_outer / _inner are a fixed pair. */
.local_cms_vs_outer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 8px 28px; align-items: baseline; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.local_cms_vs_inner { min-width: 0; }
.local_cms_vs_question { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; line-height: 1.5; }
.local_cms_vs_answer { font-size: 15px; line-height: 1.9; }
.local_cms_vs_link { margin-top: 8px; }
@media (max-width: 767px) {
  .php_ways_outer,
  .local_cms_vs_outer { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .cms_types_outer { grid-template-columns: 1fr; }
  .works_case_outer { grid-template-columns: 1fr; }
}
/* 768-900px: the header menu has six items since 代表あいさつ joined
   (2026-09-19). Tighter gaps keep the right-hand group off the logo. Below
   768px the menu is hidden, so this range is the tight one. */
@media (min-width: 768px) and (max-width: 900px) {
  .a_plus .experience_actions { gap: 10px; }
  .a_plus .header_site_nav_inner { gap: 10px; }
  .a_plus .header_site_nav a { letter-spacing: .02em; }
}
@media (max-width: 767px) {
  .craft_detail_outer[id] { scroll-margin-top: 72px; }
  .page_kind_sub .sub_menu_outer { padding-top: 72px; }
  .a_plus .site_slide_advance_fixed { right: 35px; bottom: calc(53px + var(--next_lift, 0px)); }
  .start_cards_outer { grid-template-columns: 1fr; }
  .book_outer { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 20px; }
  .local_tools_outer { grid-template-columns: 1fr; }
  .mcp_chain_outer { grid-template-columns: 1fr; max-width: 420px; }
  .mcp_chain_outer::before { top: 8%; right: auto; bottom: 8%; left: 50%; border-top: 0; border-left: 2px dashed #22322a66; }
  .contact_facts_outer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topics_item_outer { grid-template-columns: 1fr; }
  .book_outer { grid-template-columns: 1fr; }
  .book_cover_frame { max-width: 190px; }
  .local_cms_shots_outer { grid-template-columns: 1fr; }
  .local_cms_shot_phone { max-width: 220px; }
  .company_table th,
  .company_table td { display: block; width: auto; }
  .company_table th { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page_swap_enter,
  .a_plus .site_slide_advance_fixed:not([hidden]),
  .a_plus .actor_speech,
  .a_plus .brand_link_landing .brand_visual,
  .a_plus .sound_control[aria-pressed="true"] { animation: none; }
  .a_plus .sound_ring { transform: rotate(var(--ring_turn)); transition: opacity 200ms ease; }
  .a_plus .stage_logo,
  .a_plus .stage_logo .brand_p_002 { transition: none; }
}