/* Hallmark · component: 作業説明 · theme: Carlman flyer
 * 自己点検: P4 H4 E4 S5 R4 V5。深緑・生成りと既存ゴシックを継承。
 * 個別の操作UIを外し、写真・図解を読み進める構成へ。自動演出は表示中だけ。
 */
.craft-exp {
  --craft-color-photo-shade: oklch(18% .025 158 / .30);
  --craft-color-beam-core: oklch(96% .08 85 / .25);
  --craft-color-beam-edge: oklch(96% .08 85 / 0);
  --craft-color-metal: oklch(77% .015 154);
  --craft-color-metal-dark: oklch(49% .018 154);
  --craft-color-wall: oklch(92% .022 87);
  --craft-color-tint: oklch(93% .025 152);
  --craft-color-dark-rule: oklch(62% .03 156);
  --craft-color-dark-muted: oklch(85% .02 152);
  --craft-color-transparent: transparent;
  --craft-duration-seal: 450ms;
  --craft-duration-fade: 325ms;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
}
.craft-exp *, .craft-exp *::before, .craft-exp *::after { box-sizing: border-box; }
.craft-exp [hidden] { display: none !important; }
.craft-exp h2, .craft-exp h3, .craft-exp h4 { font-family: var(--font-display); font-style: normal; font-weight: 800; letter-spacing: -.04em; overflow-wrap: anywhere; min-width: 0; }
.craft-exp p, .craft-exp h2, .craft-exp h3, .craft-exp h4, .craft-exp figure, .craft-exp dl, .craft-exp dd { margin: 0; }
.craft-exp img { display: block; width: 100%; height: auto; }
.craft-clean-frame figcaption { color: var(--color-paper); }
.craft-wrap { width: min(1080px, calc(100% - 32px)); margin-inline: auto; }
.craft-exp article { scroll-margin-top: 100px; }
.craft-exp h3 { font-size: clamp(1.875rem, 3.6vw, 3.125rem); line-height: 1.5; }
.craft-intro { padding-block: 56px 36px; }
.craft-intro h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.45; }
.craft-intro > p { margin-top: 20px; max-width: 45rem; }
.craft-inspect { padding-block: 40px; color: var(--color-paper); background: var(--color-green-dark); }
.craft-inspect-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.craft-inspect-copy h3 { color: var(--color-paper); }
.craft-inspect-copy h3 span { color: var(--color-marker); }
.craft-inspect-copy > p { margin-top: 24px; }
.craft-observations { margin-top: 28px !important; }
.craft-observations > div { border-top: 1px solid var(--craft-color-dark-rule); padding-block: 16px; }
.craft-observations dt { font-weight: 800; }
.craft-observations dd { margin-top: 4px; color: var(--craft-color-dark-muted); }
.craft-light-photo { position: relative; overflow: clip; isolation: isolate; }
.craft-light-photo img { aspect-ratio: 1.12; object-fit: cover; object-position: 50% 30%; }
.craft-light-shade, .craft-light-beam { position: absolute; pointer-events: none; }
.craft-light-shade { inset: 0; background: var(--craft-color-photo-shade); }
.craft-light-beam { inset: -15% 0 -15% -45%; width: 85%; opacity: 0; background: radial-gradient(ellipse at center, var(--craft-color-beam-core), var(--craft-color-beam-edge) 65%); animation: craft-light-sweep 8s var(--ease-in-out) infinite both; animation-play-state: paused; }
.craft-light-photo.craft-auto-running .craft-light-beam { animation-play-state: running; }
.craft-seal { padding-block: 56px; }
.craft-seal-head > p { margin-top: 20px; max-width: 47rem; }
.craft-seal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 28px; }
.craft-seal-demo { background: var(--color-paper-2); color: var(--color-ink); padding: 16px 12px; border: 1px solid var(--color-rule); }
.craft-diagram-heading { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.craft-diagram-heading strong { font-size: 1rem; }
.craft-diagram-heading > span { color: var(--color-muted); font-size: .75rem; }
.craft-seal-svg { display: block; width: 100%; height: auto; margin-block: 4px; }
.craft-svg-wall { fill: var(--craft-color-wall); stroke: var(--color-rule); stroke-width: 1.5; }
.craft-svg-hatch { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.craft-svg-gap { fill: var(--color-green-dark); }
.craft-svg-plate { fill: var(--craft-color-metal); stroke: var(--craft-color-metal-dark); stroke-width: 2; }
.craft-svg-screw { fill: var(--color-paper-2); stroke: var(--craft-color-metal-dark); stroke-width: 1.8; }
.craft-svg-pipe { fill: var(--craft-color-metal-dark); stroke: var(--color-green-dark); stroke-width: 2; }
.craft-svg-pipe-inside { fill: var(--color-green-dark); }
.craft-svg-leader { fill: none; stroke: var(--color-green); stroke-width: 1.5; }
.craft-svg-label { font: 700 24px var(--font-body); fill: var(--color-green); }
.craft-seal-route { fill: none; stroke: var(--color-green); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.craft-seal-plate { transform: translateX(0); opacity: 1; transition: transform var(--craft-duration-seal) var(--ease-out), opacity var(--craft-duration-fade) var(--ease-out); }
.craft-seal-label--open { opacity: 0; }
.craft-seal-label--sealed, .craft-seal-label--open, .craft-seal-route { transition: opacity var(--craft-duration-fade) var(--ease-out); }
[data-craft-seal-state="open"] .craft-seal-plate { transform: translateX(90px); opacity: 0; }
[data-craft-seal-state="open"] .craft-seal-label--sealed { opacity: 0; }
[data-craft-seal-state="open"] .craft-seal-label--open, [data-craft-seal-state="open"] .craft-seal-route { opacity: 1; }
.craft-seal-explanation { display: flex; flex-wrap: wrap; gap: 0 8px; justify-content: center; align-items: center; border-top: 1px solid var(--color-rule); padding-top: 12px; font-size: .875rem; color: var(--color-muted); }
.craft-seal-explanation strong { color: var(--color-green); }
.craft-seal-explanation > * { white-space: nowrap; }
.craft-emphasis { font-size: clamp(1.5rem, 2.7vw, 1.875rem); font-weight: 800; line-height: 1.65; letter-spacing: -.035em; }
.craft-technical-list { margin-top: 24px !important; }
.craft-technical-list > div { padding-block: 16px; border-top: 1px solid var(--color-rule); }
.craft-technical-list dt { color: var(--color-green); font-weight: 800; }
.craft-technical-list dd { margin-top: 4px; }
.craft-seal-photo { margin-top: 28px !important; }
.craft-seal-photo img { aspect-ratio: 1.35; object-fit: cover; object-position: 50% 50%; }
.craft-clean { color: var(--color-paper); background: var(--color-green); padding-block: 44px 40px; }
.craft-clean-head h3 { color: var(--color-paper); font-size: clamp(1.5rem, 5.75vw, 3.125rem); }
.craft-clean-head h3 span { color: var(--color-marker); }
.craft-clean-head > p { margin-top: 20px; font-size: 1.125rem; }
.craft-clean-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 28px; }
.craft-clean-gallery { position: relative; min-width: 0; }
.craft-clean-frame { position: relative; overflow: clip; color: var(--color-paper); background: var(--color-green-dark); }
.craft-clean-frame + .craft-clean-frame { margin-top: 20px; }
.craft-clean-frame img { aspect-ratio: 1.25; object-fit: cover; object-position: center; }
.craft-clean-frame figcaption { display: flex; align-items: center; gap: 12px; padding: 16px; font-size: 1rem; line-height: 1.5; }
.craft-clean-frame figcaption > span { color: var(--color-marker); font-variant-numeric: tabular-nums; font-weight: 800; }
.craft-clean-gallery[data-craft-gallery-ready] { display: grid; grid-template-columns: minmax(0, 1fr); isolation: isolate; }
.craft-clean-gallery[data-craft-gallery-ready] .craft-clean-frame { grid-area: 1 / 1; margin-top: 0; opacity: 0; pointer-events: none; transition: opacity var(--craft-duration-fade) var(--ease-in-out); }
.craft-clean-gallery[data-craft-gallery-ready] .craft-clean-frame.craft-current { opacity: 1; }
.craft-clean-gallery[data-craft-gallery-ready] .craft-clean-frame figcaption { padding-bottom: 36px; }
.craft-clean-indicators { position: absolute; inset: auto 16px 16px; display: flex; align-items: center; gap: 8px; }
.craft-clean-indicators span { flex: 1; height: 2px; background: var(--craft-color-dark-rule); }
.craft-clean-indicators span.craft-current { background: var(--color-marker); }
.craft-clean-copy h4 { font-size: 1.5rem; line-height: 1.55; color: var(--color-paper); }
.craft-clean-copy > p { margin-top: 16px; }
.craft-clean-steps { padding: 0; margin: 24px 0 0; list-style: none; }
.craft-clean-steps li { padding-block: 16px; border-top: 1px solid var(--craft-color-dark-rule); }
.craft-clean-steps strong { display: flex; align-items: center; gap: 12px; color: var(--color-marker); font-size: 1.0625rem; }
.craft-clean-steps strong span { display: inline-grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid var(--craft-color-dark-rule); color: var(--color-marker); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.craft-clean-steps .craft-current strong span { background: var(--color-marker); color: var(--color-green-dark); border-color: var(--color-marker); }
.craft-clean-steps p { color: var(--craft-color-dark-muted); margin-top: 8px; }
.craft-clean-close { margin-top: 28px !important; border-top: 1px solid var(--craft-color-dark-rule); padding-top: 24px; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.6; letter-spacing: -.035em; }
.craft-clean-close strong { color: var(--color-marker); }
.craft-desktop { display: none; }
.craft-mobile { display: initial; }
.craft-auto-paused *, .craft-auto-paused *::before, .craft-auto-paused *::after { animation-play-state: paused !important; transition: none !important; }
@keyframes craft-light-sweep {
  0%, 10% { transform: translateX(-25%) rotate(-16deg); opacity: 0; }
  22% { opacity: 1; }
  72% { opacity: 1; }
  90%, 100% { transform: translateX(155%) rotate(16deg); opacity: 0; }
}
@media (min-width: 48rem) {
  .craft-wrap { width: min(1080px, calc(100% - 40px)); }
  .craft-intro { padding-block: 88px 48px; }
  .craft-intro > p { margin-top: 24px; }
  .craft-inspect { padding-block: 64px; }
  .craft-inspect-layout { grid-template-columns: minmax(0, .94fr) minmax(0, 1fr); gap: 48px; }
  .craft-light-photo img { aspect-ratio: 4 / 5; object-position: 50% 36%; }
  .craft-seal { padding-block: 88px 80px; }
  .craft-seal-layout { grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: 48px; margin-top: 40px; }
  .craft-seal-demo { padding: 20px 20px 16px; }
  .craft-svg-label { font-size: 16px; }
  .craft-seal-explanation { font-size: 1rem; }
  .craft-seal-photo { margin-top: 44px !important; }
  .craft-seal-photo img { aspect-ratio: 1.9; }
  .craft-clean { padding-block: 72px 48px; }
  .craft-clean-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; margin-top: 40px; }
  .craft-clean-frame img { aspect-ratio: 1.05; }
  .craft-clean-frame figcaption { padding-inline: 20px; }
  .craft-clean-close { margin-top: 44px !important; padding-top: 32px; }
  .craft-desktop { display: initial; }
  .craft-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .craft-exp *, .craft-exp *::before, .craft-exp *::after { animation-play-state: paused !important; transition: none !important; }
  .craft-light-beam { opacity: 0 !important; }
}
html[data-motion="off"] .craft-exp *, html[data-motion="off"] .craft-exp *::before, html[data-motion="off"] .craft-exp *::after { animation-play-state: paused !important; transition: none !important; }
html[data-motion="off"] .craft-light-beam { opacity: 0 !important; }