/* v13 — approved 1536 × 1024 composition. All dimensions scale from that canvas.
   No shared stylesheet is loaded: its external font @import conflicts with this page's CSP. */
.web-production-page {
  --wp-u: clamp(.66px, .0651041667vw, 1.05px);
  --wp-ivory: #faf7ef;
  --wp-ink: #301b11;
  --wp-gold: #d9bb83;
  --wp-cyan: #afe7eb;
  --wp-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  --wp-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  margin: 0;
  background: var(--wp-ivory);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
.web-production-page body {
  margin: 0;
  color: var(--wp-ink);
  background: var(--wp-ivory);
  font-family: var(--wp-sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'palt';
}
.service-page *, .service-page *::before, .service-page *::after { box-sizing: border-box; }
.service-page :is(h1, h2, h3, p, ol, ul) { margin: 0; padding: 0; }
.service-page a { color: inherit; text-decoration: none; transform: none !important; }
.service-page button { font: inherit; color: inherit; cursor: pointer; }
.service-page [hidden] { display: none !important; }
.service-page :is(a, button):focus-visible { outline: 3px solid #167f8d; outline-offset: 5px; }
.service-page :is(.wp-module, .wp-showcase-panel, .wp-flow) :is(a, button):focus-visible { outline-color: #c0f6ff; outline-offset: -5px; }
.service-page :is(#services, #showcase, #flow) { scroll-margin-top: 72px; } @media (max-width: 700px) { .service-page :is(#services, #showcase, #flow) { scroll-margin-top: 64px; } }
.service-page .wp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.service-page .wp-skip { position: fixed; left: 12px; top: -100px; z-index: 100; padding: 12px 20px; background: #fff9ea; border: 1px solid #5d482d; }
.service-page .wp-skip:focus { top: 12px; }
/* Shared JavaScript is retained; its page-wide overlays are disabled on this page. */
.web-production-page :is(.page-loader, .scroll-indicator, .scroll-to-top) { display: none !important; }
@media (any-hover: none) {
  .web-production-page :is(.magic-cursor, .magic-cursor-trail):not([data-cursor-active]) { display: none !important; }
}
.service-page .wp-header {
  position: relative;
  z-index: 5;
  height: calc(94 * var(--wp-u));
  padding: 0 calc(40 * var(--wp-u)) 0 calc(60 * var(--wp-u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--wp-u));
  background: linear-gradient(123deg, transparent 33%, #fffdf9b3 33.1%, transparent 34.8%, #fffdf9 35%, transparent 35.2%), #faf7f0;
  border-bottom: 1px solid #e1d1b9;
}
.service-page .wp-header::before { content: ''; position: absolute; left: 0; top: 28%; width: calc(47 * var(--wp-u)); height: calc(43 * var(--wp-u)); border-top: 1px solid #c6ad7b; border-right: 1px solid #98d4dd; transform: skewY(43deg); pointer-events: none; opacity: .75; }
.service-page .wp-brand { flex: 0 0 auto; }
.service-page .wp-brand p { font: 400 calc(12 * var(--wp-u))/1.6 Georgia, serif; letter-spacing: .38em; color: #a76e35; margin-bottom: calc(4 * var(--wp-u)); }
.service-page .wp-brand > span { display: block; font: 700 calc(36 * var(--wp-u))/1.25 var(--wp-serif); letter-spacing: .045em; white-space: nowrap; }
.service-page .wp-nav { display: flex; align-items: center; gap: calc(38 * var(--wp-u)); font-size: max(13px, calc(17 * var(--wp-u))); font-weight: 600; white-space: nowrap; }
.service-page .wp-nav a { padding-block: calc(12 * var(--wp-u)); }
.service-page .wp-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.service-page .wp-nav .wp-nav-contact { min-height: 44px; padding: calc(12 * var(--wp-u)) calc(30 * var(--wp-u)); border: 1px solid #fff7d8; border-radius: 99px; color: #fffaf1; background: linear-gradient(160deg, #e8b75e, #a56828 60%, #bc9c65); box-shadow: 0 0 0 2px #e2b57270, inset 0 0 8px #fff7bf, 0 2px 8px #ba803a45; }
.service-page .wp-nav .wp-office { color: #916b65; border-left: 1px solid #b69160; padding-left: calc(30 * var(--wp-u)); font-size: max(12px, calc(15 * var(--wp-u))); font-weight: 400; }
.service-page .wp-menu-toggle { display: none; }
.service-page .wp-hero { position: relative; height: calc(560 * var(--wp-u)); isolation: isolate; background: #bcb1a2; overflow: hidden; }
/* Keep the showcase and controls anchored to their approved positions.
   Only the media extends underneath the glass and past the hero's clipped right edge.
   1536: media left 330, width 1286; source x620 -> 952.91,
   source x495..734 -> 827.32..1067.44. Vertical 65% keeps y200..620 visible. */
.service-page .wp-city { position: absolute; inset: 0 0 0 calc(476 * var(--wp-u)); z-index: 0; }
.service-page .wp-city-media { position: absolute; inset: 0 calc(-80 * var(--wp-u)) 0 calc(-146 * var(--wp-u)); overflow: hidden; background: #34434c; }
.service-page :is(.wp-city-video, .wp-city-poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.service-page .wp-city-video { opacity: 0; }
.service-page .wp-city.is-playing .wp-city-video { opacity: 1; }
.service-page .wp-city-trim { position: absolute; inset: calc(18 * var(--wp-u)); border-top: 1px solid #c6faff8c; border-right: 1px solid #c6faff8c; clip-path: polygon(0 0, 97% 0, 100% 5%, 100% 78%, 99.8% 78%, 99.8% 6%, 96.8% .2%, 0 .2%); pointer-events: none; filter: drop-shadow(0 0 3px #b6ffff); }
.service-page .wp-compass-panel { position: relative; width: calc(610 * var(--wp-u)); height: 100%; z-index: 2; filter: drop-shadow(10px 0 8px #473d3033); }
.service-page :is(.wp-compass-face, .wp-compass-rings) { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.service-page .wp-compass-rings { overflow: hidden; }
.service-page .wp-ring { fill: none; stroke: #886233; stroke-width: 1.4; transform-origin: 0px 280px; animation: wp-compass-sway 12s ease-in-out infinite; }
.service-page .wp-ring-inner { stroke: #997442; animation-delay: -2s; }
.service-page .wp-ring-light { stroke: #b5f5f5; filter: drop-shadow(0 0 3px #ceffff); }
.service-page .wp-ring-dot { fill: #f9edcc; stroke: #d7a85c; stroke-width: 2; }
.service-page #wp-compass-ticks { stroke: #65421f; stroke-width: 1.8; opacity: 1; }
.service-page .wp-hero-copy { position: relative; padding-top: calc(51 * var(--wp-u)); margin-left: calc(60 * var(--wp-u)); width: calc(480 * var(--wp-u)); }
.service-page .wp-eyebrow { color: #90673d; font: 400 calc(13 * var(--wp-u))/calc(20 * var(--wp-u)) Georgia, serif; letter-spacing: .31em; }
.service-page .wp-hero-copy h1 { font: 900 calc(56 * var(--wp-u))/calc(78 * var(--wp-u)) var(--wp-serif); letter-spacing: -.035em; white-space: nowrap; margin: calc(14 * var(--wp-u)) 0 calc(6 * var(--wp-u)); }
.service-page .wp-intro { font: 700 calc(37 * var(--wp-u))/calc(50 * var(--wp-u)) var(--wp-serif); letter-spacing: .025em; }
.service-page .wp-copy-rule { display: block; width: calc(47 * var(--wp-u)); height: 1px; background: #a87b34; margin: calc(22 * var(--wp-u)) 0 calc(16 * var(--wp-u)); box-shadow: 0 1px #ecddbd; }
.service-page .wp-description { font-size: calc(17 * var(--wp-u)); line-height: calc(28 * var(--wp-u)); white-space: nowrap; letter-spacing: -.025em; }
.service-page .wp-hero-actions { display: grid; gap: calc(12 * var(--wp-u)); width: calc(438 * var(--wp-u)); margin-top: calc(28 * var(--wp-u)); }
.service-page .wp-action { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 99px; font-size: calc(22 * var(--wp-u)); border: 1px solid #ffefd0; }
.service-page .wp-action span { position: absolute; right: calc(32 * var(--wp-u)); font: 300 calc(29 * var(--wp-u))/1 var(--wp-serif); }
.service-page .wp-action-primary { height: calc(68 * var(--wp-u)); color: #fff8eb; background: radial-gradient(ellipse at top left, #9f7643, transparent 48%), linear-gradient(#60401f, #392313 67%, #674525); box-shadow: 0 0 0 2px #c89453, 0 0 0 5px #fff0cf6b, inset 0 0 10px #d5a567, 0 0 16px #ffc98591; }
.service-page .wp-action-secondary { height: calc(60 * var(--wp-u)); background: #e8ded22b; font-weight: 600; box-shadow: 0 0 0 1px #8c6847, inset 0 0 0 2px #f5ebdfaa; }
.service-page .wp-action-secondary span { color: #9e6a28; }
.service-page .wp-action:hover { filter: brightness(1.1); }
.service-page .wp-showcase-panel { position: absolute; right: 0; bottom: calc(22 * var(--wp-u)); width: calc(306 * var(--wp-u)); padding: calc(17 * var(--wp-u)) calc(27 * var(--wp-u)) calc(22 * var(--wp-u)); color: #fff9ee; background: linear-gradient(125deg, #e4e2bc29, #b8dfe822 65%, #a2815538); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #f5e4bc91; border-right: 0; clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 15px); }
.service-page .wp-showcase-panel::before { content: ''; position: absolute; inset: 6px; border-left: 1px solid #b6f4f5; border-bottom: 1px solid #b6f4f599; pointer-events: none; }
.service-page .wp-showcase-number { font: 400 calc(12 * var(--wp-u))/1.6 Georgia, serif; letter-spacing: .29em; }
.service-page .wp-showcase-panel h2 { margin: calc(4 * var(--wp-u)) 0 calc(10 * var(--wp-u)); font: 500 calc(27 * var(--wp-u))/1.3 var(--wp-serif); letter-spacing: .1em; }
.service-page .island-entrance { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; height: calc(53 * var(--wp-u)); white-space: nowrap; overflow: hidden; isolation: isolate; border-radius: 99px; border: 1px solid #ffe0a5; background: linear-gradient(140deg, #dba355dd, #a87732c9 60%, #d2ab76d9); color: #fff9ed; font-size: calc(17 * var(--wp-u)); box-shadow: inset 0 0 12px #fff0c891, 0 0 8px #ffcb855c; }
.service-page .island-entrance::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 45%; background: linear-gradient(105deg, transparent 30%, #fff8e626 42%, #ffecc8d9 50%, #ffffff59 58%, transparent 72%); pointer-events: none; mix-blend-mode: screen; animation: wp-island-shine 6.4s ease-in-out infinite; }
.service-page .ie-label { position: relative; z-index: 1; animation: wp-island-glow 2.8s ease-in-out infinite; }
.service-page .wp-motion-toggle { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 1px solid #fff9; border-radius: 50%; background: #312b2866; color: white; font-size: 15px; z-index: 1; }
.service-page main { padding-bottom: calc(22 * var(--wp-u)); background: linear-gradient(129deg, transparent 66%, #eee1cf38 66.2%, transparent 72%), linear-gradient(50deg, #fffdf8, #f7f0e6 38%, #fffcf7 73%, #eee2cf55); }
.service-page .wp-services { padding: calc(23 * var(--wp-u)) calc(56 * var(--wp-u)) 0; }
.service-page .wp-section-heading { display: flex; align-items: center; justify-content: space-between; min-height: calc(39 * var(--wp-u)); margin-bottom: calc(12 * var(--wp-u)); }
.service-page .wp-section-heading h2 { font: 700 calc(32 * var(--wp-u))/1.2 var(--wp-serif); letter-spacing: .06em; }
.service-page .wp-modules { display: grid; grid-template-columns: 469fr 442fr 467fr; gap: calc(24 * var(--wp-u)); align-items: start; }
.service-page .wp-module { min-width: 0; position: relative; color: #fff9ef; filter: drop-shadow(0 2px 3px #6b472855); }
.service-page .wp-module h3 { font: inherit; }
.service-page .wp-module-button { position: relative; width: 100%; min-height: calc(150 * var(--wp-u)); display: grid; grid-template-columns: calc(88 * var(--wp-u)) minmax(0, 1fr) calc(45 * var(--wp-u)); align-items: center; column-gap: calc(20 * var(--wp-u)); padding: calc(19 * var(--wp-u)) calc(23 * var(--wp-u)) calc(19 * var(--wp-u)) calc(31 * var(--wp-u)); text-align: left; border: 0; background: url('../assets/images/web-production/panel-frame.svg') center / 100% 100% no-repeat, radial-gradient(ellipse at 25% 0%, #73533355, transparent 65%), linear-gradient(115deg, #35271c, #30251d 65%, #221b16); clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px); }
.service-page .wp-module-button:hover { background-color: #57402c; filter: brightness(1.1); }
.service-page .wp-icon { width: calc(90 * var(--wp-u)); height: calc(90 * var(--wp-u)); fill: none; stroke: #f5e4bd; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 2px #efc06b65); }
.service-page .wp-icon-cyan { stroke: #9be5e9; }
/* Legacy HUD illustrations share the approved icon box and never affect layout. */
.service-page .hp-visual { stroke-linecap: round; stroke-linejoin: round; }
.service-page .hp-build { fill: #b9e7eb24; stroke: #b9e7eb; animation: wp-module-build 7.2s ease-in-out infinite; }
.service-page .hp-build-b { animation-delay: .55s; }
.service-page .hp-build-c { animation-delay: 1.1s; }
.service-page .hp-cube-wire { stroke: #b9e7eb; transform-origin: 60px 36px; animation: wp-cube-turn 9s ease-in-out -2.4s infinite; }
.service-page .hp-connect { stroke: #b9e7eb; stroke-dasharray: 110; stroke-dashoffset: 0; animation: wp-module-connect 7.2s ease-in-out -3.6s infinite; }
@keyframes wp-module-build { 0%, 8%, 100% { opacity: 0; transform: translateY(4px); } 22%, 68% { opacity: 1; transform: translateY(0); } 84% { opacity: 0; transform: translateY(0); } }
@keyframes wp-cube-turn { 0%, 100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(.68) skewY(12deg); } }
@keyframes wp-module-connect { 0%, 8%, 100% { stroke-dashoffset: 110; opacity: 0; } 36%, 72% { stroke-dashoffset: 0; opacity: 1; } 88% { stroke-dashoffset: 0; opacity: 0; } }

.service-page .wp-module-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.service-page .wp-module-number { color: #f3d58e; font: 400 calc(12 * var(--wp-u))/1.5 Georgia, serif; letter-spacing: .16em; margin-bottom: calc(8 * var(--wp-u)); }
.service-page .wp-module-title { white-space: nowrap; font-size: calc(27 * var(--wp-u)); font-weight: 700; line-height: 1.3; letter-spacing: .025em; }
.service-page .wp-tags { display: flex; gap: calc(8 * var(--wp-u)); margin-top: calc(10 * var(--wp-u)); }
.service-page .wp-tags > span { display: block; padding: calc(4 * var(--wp-u)) calc(11 * var(--wp-u)); border: 1px solid #cfbb90; border-radius: 5px; font-size: calc(13 * var(--wp-u)); font-weight: 500; white-space: nowrap; line-height: 1.6; box-shadow: inset 0 0 6px #ae8b3d19; }
.service-page .wp-module-arrow { display: grid; place-items: center; width: calc(44 * var(--wp-u)); height: calc(46 * var(--wp-u)); border: 1px solid #f1d08e; border-radius: 50%; font: 400 calc(29 * var(--wp-u))/1 var(--wp-serif); box-shadow: 0 0 10px #d9b47530; transition: transform .2s; }
.service-page .wp-module-button[aria-expanded='true'] .wp-module-arrow { transform: rotate(90deg); }
.service-page .wp-module-detail { background: #30251d; margin: -1px 12px 0; padding: 20px; border: 1px solid #c6a66f; border-top: 0; display: flex; align-items: center; justify-content: center; gap: 20px; }
.service-page .wp-module-detail svg { flex: 0 1 120px; max-width: 45%; height: auto; fill: none; stroke: #c5eced; stroke-width: 1.4; }
.service-page .hp-chips { list-style: none; display: grid; gap: 6px; font-size: 13px; color: #fff3d8; }
.service-page .wp-flow { position: relative; display: flex; align-items: center; gap: calc(26 * var(--wp-u)); min-height: calc(108 * var(--wp-u)); margin: calc(16 * var(--wp-u)) calc(33 * var(--wp-u)) 0; padding: calc(18 * var(--wp-u)) calc(28 * var(--wp-u)); color: #fff8ed; background: url('../assets/images/web-production/flow-frame.svg') center / 100% 100% no-repeat, linear-gradient(115deg, #3c2b1e, #30251d 70%, #261e18); clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px); }
.service-page .wp-flow > h2 { flex: 0 0 calc(155 * var(--wp-u)); font: 600 calc(24 * var(--wp-u))/1.6 var(--wp-serif); white-space: nowrap; }
.service-page .wp-flow > h2::after { content: ''; display: block; width: calc(80 * var(--wp-u)); height: 1px; background: #e1b95d; margin-top: calc(10 * var(--wp-u)); }
.service-page .wp-flow ol { display: grid; grid-template-columns: 1.04fr 1.02fr 1.04fr .8fr; gap: calc(23 * var(--wp-u)); list-style: none; flex: 1; min-width: 0; }
.service-page .wp-flow li { position: relative; display: grid; grid-template-columns: calc(48 * var(--wp-u)) calc(47 * var(--wp-u)) minmax(0, 1fr); align-items: center; gap: calc(11 * var(--wp-u)); min-width: 0; }
.service-page .wp-flow li:not(:last-child)::after { content: ''; position: absolute; height: 1px; width: 31%; right: 0; top: calc(23 * var(--wp-u)); background: linear-gradient(90deg, #d2b375, #c3e5dc); }
.service-page .wp-step-number { align-self: start; display: grid; place-items: center; width: calc(48 * var(--wp-u)); height: calc(49 * var(--wp-u)); border: 1px solid #e7c788; border-bottom-color: #a7e4ee; border-radius: 50%; font: 400 calc(23 * var(--wp-u))/1 Georgia, serif; background: radial-gradient(ellipse at top, #92623766, transparent 70%); }
/* The original HUD dot pulse sits just left of each heading without shifting the copy. */
.service-page .wp-node { position: absolute; left: -10px; top: calc(50% - 4px); display: block; flex-shrink: 0; width: 8px; height: 8px; border: 1px solid #b9e7eb; background: #3e2a1c; border-radius: 50%; animation: wp-node-guide 5.6s ease-in-out infinite; }
.service-page .wp-flow li:nth-child(2) .wp-node { animation-delay: 1.4s; }
.service-page .wp-flow li:nth-child(3) .wp-node { animation-delay: 2.8s; }
.service-page .wp-flow li:nth-child(4) .wp-node { animation-delay: 4.2s; }
@keyframes wp-node-guide { 0%, 30%, 100% { background: #3e2a1c; box-shadow: none; } 12% { background: #b9e7eb; box-shadow: 0 0 5px #b9e7eb; } }
.service-page .wp-flow .wp-icon { width: calc(47 * var(--wp-u)); height: calc(53 * var(--wp-u)); }
.service-page .wp-step-copy { padding-top: calc(8 * var(--wp-u)); }
.service-page .wp-step-copy h3 { position: relative; z-index: 1; width: fit-content; background: #33261c; padding-right: calc(9 * var(--wp-u)); font-size: calc(19 * var(--wp-u)); font-weight: 500; line-height: 1.6; white-space: nowrap; }
.service-page .wp-step-copy p { margin-top: calc(7 * var(--wp-u)); font-size: calc(11 * var(--wp-u)); white-space: nowrap; line-height: 1.7; letter-spacing: -.04em; }
@keyframes wp-compass-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes wp-island-shine { 0%, 4%, 76% { transform: translateX(-160%) skewX(-20deg); opacity: 0; } 8%, 80% { opacity: 1; } 16%, 88% { transform: translateX(320%) skewX(-20deg); opacity: .95; } 18%, 72%, 90%, 100% { transform: translateX(320%) skewX(-20deg); opacity: 0; } }
@keyframes wp-island-glow { 0%, 100% { text-shadow: 0 0 2px #ffecc833; } 50% { text-shadow: 0 0 8px #fff8dcbf, 0 0 18px #ffe6aa80; } }
.web-production-page.wp-motion-stopped :is(.wp-ring, .hp-build, .hp-cube-wire, .hp-connect, .wp-node, .ie-label), .web-production-page.wp-motion-stopped .island-entrance::after { animation-play-state: paused; }
/* Desktop disclosures open above the card, keeping the flow in place and uncovered.
   Without JavaScript, details stay in document flow so all three remain readable. */
@media (min-width: 1001px) {
  .service-page .wp-module.is-open { z-index: 3; }
  .service-page .wp-module.is-open .wp-module-detail { position: absolute; bottom: calc(100% + 8px); left: 12px; right: 12px; margin: 0; border-top: 1px solid #c6a66f; }
  .service-page .wp-module.is-open .wp-module-arrow { transform: rotate(-90deg); }
}
@media (min-width: 1001px) and (max-width: 1250px) {
  .service-page .wp-nav { gap: 16px; font-size: 12px; }
  .service-page .wp-brand > span { font-size: 25px; }
  .service-page .wp-nav .wp-office { padding-left: 15px; }
  .service-page .wp-nav .wp-nav-contact { padding-inline: 18px; }
}
@media (max-width: 1000px) {
  .web-production-page { --wp-u: 1px; }
  .service-page .wp-header { height: auto; min-height: 91px; padding: 16px 22px; flex-wrap: wrap; gap: 14px; }
  .service-page .wp-brand p { font-size: 10px; letter-spacing: .28em; }
  .service-page .wp-brand > span { font-size: clamp(21px, 3.8vw, 32px); letter-spacing: 0; }
  .service-page .wp-nav { width: 100%; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; white-space: normal; }
  .service-page .wp-nav .wp-office { font-size: 13px; padding-left: 18px; }
  .service-page .wp-menu-toggle:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 48px; height: 48px; padding: 6px; border: 1px solid #bca680; border-radius: 5px; background: #fffaf0; font-size: 9px; }
  .service-page .wp-menu-lines { width: 20px; height: 1px; background: #66452c; box-shadow: 0 -5px #66452c, 0 5px #66452c; }
  .service-page.wp-menu-ready .wp-nav { display: none; }
  .service-page.wp-menu-ready .wp-nav.is-open { display: flex; }
  .service-page .wp-hero { display: flex; flex-direction: column; height: auto; overflow: hidden; }
  .service-page .wp-compass-panel { width: 100%; height: auto; min-height: 480px; background: linear-gradient(115deg, #b4a99c, #c7baaa 60%, #b9ad9e); filter: none; }
  .service-page .wp-compass-face { width: 100%; height: 100%; opacity: .7; }
  .service-page .wp-compass-rings { left: auto; right: -28px; width: 610px; }
  .service-page .wp-hero-copy { padding: 36px 0 32px; margin: 0 auto; width: min(480px, calc(100% - 44px)); }
  .service-page .wp-eyebrow { font-size: 11px; letter-spacing: .22em; }
  .service-page .wp-hero-copy h1 { font-size: clamp(33px, 8.6vw, 51px); line-height: 1.3; margin-top: 18px; letter-spacing: -.055em; }
  .service-page .wp-intro { font-size: clamp(25px, 6.3vw, 34px); line-height: 1.5; margin-top: 10px; letter-spacing: -.015em; }
  .service-page .wp-description { font-size: 14px; line-height: 1.9; white-space: normal; max-width: 440px; }
  .service-page .wp-copy-rule { margin: 20px 0 15px; }
  .service-page .wp-hero-actions { width: min(100%, 438px); margin-top: 22px; gap: 12px; }
  .service-page .wp-action { font-size: 18px; height: 56px; }
  .service-page .wp-action-secondary { height: 52px; }
  .service-page .wp-action span { right: 22px; font-size: 24px; }
  .service-page .wp-city { position: relative; inset: auto; width: 100%; padding-top: clamp(300px, 64vw, 480px); background: #49483e; }
  .service-page .wp-city-media { inset: 0 0 auto; height: clamp(300px, 64vw, 480px); }
  .service-page :is(.wp-city-video, .wp-city-poster) { object-position: 50% 50%; }
  .service-page .wp-city-trim { display: none; }
  .service-page .wp-showcase-panel { position: relative; inset: auto; width: 100%; padding: 18px 22px 20px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; clip-path: none; border: 1px solid #ceb585; background: linear-gradient(120deg, #73808455, #b2996938); }
  .service-page .wp-showcase-number { font-size: 10px; }
  .service-page .wp-showcase-panel h2 { font-size: 24px; margin: 0; }
  .service-page .island-entrance { grid-column: 2; grid-row: 1 / 3; padding: 0 22px; height: 50px; font-size: 15px; }
  .service-page .wp-motion-toggle { width: 44px; height: 44px; }
  .service-page .wp-services { padding: 26px 22px 0; }
  .service-page .wp-section-heading { min-height: 36px; gap: 10px; margin-bottom: 15px; }
  .service-page .wp-section-heading h2 { font-size: 27px; }
  .service-page .wp-modules { grid-template-columns: 1fr; gap: 15px; }
  .service-page .wp-module-button { min-height: 140px; grid-template-columns: 76px minmax(0, 1fr) 42px; gap: 18px; padding: 22px 25px; }
  .service-page .wp-module-title { font-size: 25px; }
  .service-page .wp-module-number { font-size: 11px; }
  .service-page .wp-module-button > .wp-icon { width: 76px; height: 76px; }
  .service-page .wp-tags { gap: 8px; }
  .service-page .wp-tags > span { font-size: 12px; padding: 3px 9px; }
  .service-page .wp-module-arrow { width: 40px; height: 42px; font-size: 27px; }
  .service-page .wp-flow { display: block; margin: 18px 14px 0; padding: 24px; }
  .service-page .wp-flow > h2 { font-size: 24px; margin-bottom: 24px; }
  .service-page .wp-flow ol { grid-template-columns: 1fr 1fr; gap: 25px; }
  .service-page .wp-flow li { grid-template-columns: 44px 42px minmax(0, 1fr); gap: 10px; }
  .service-page .wp-step-number { width: 44px; height: 46px; font-size: 22px; }
  .service-page .wp-step-copy { padding-top: 0; }
  .service-page .wp-step-copy h3 { font-size: 18px; }
  .service-page .wp-step-copy p { white-space: normal; font-size: 12px; letter-spacing: 0; }
  .service-page .wp-flow li:not(:last-child)::after { display: none; }
  .service-page main { padding-bottom: 16px; }
}
@media (max-width: 600px) {
  .service-page .wp-header { padding-inline: 18px; column-gap: 8px; }
  .service-page .wp-brand > span { font-size: clamp(19px, 5.2vw, 26px); }
  .service-page .wp-showcase-panel { display: block; padding: 15px 22px 18px; }
  .service-page .wp-showcase-panel h2 { margin: 4px 0 12px; }
  .service-page .island-entrance { width: 100%; max-width: 360px; }
  .service-page .wp-section-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .service-page .wp-section-heading h2 { font-size: clamp(20px, 6vw, 25px); }
  .service-page .wp-module-button { grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 12px; padding: 19px 16px; min-height: 135px; }
  .service-page .wp-module-button > .wp-icon { width: 56px; height: 66px; }
  .service-page .wp-module-title { font-size: 21px; letter-spacing: 0; }
  .service-page .wp-tags { gap: 5px; margin-top: 9px; }
  .service-page .wp-tags > span { font-size: 11px; padding: 3px 6px; }
  .service-page .wp-module-arrow { width: 32px; height: 34px; font-size: 23px; }
  .service-page .wp-flow { padding: 24px 20px 28px; }
  .service-page .wp-flow ol { grid-template-columns: 1fr; gap: 25px; }
  .service-page .wp-flow li { grid-template-columns: 44px 42px minmax(0, 1fr); gap: 12px; }
  .service-page .wp-flow li:not(:last-child)::after { display: block; width: 1px; height: 26px; left: 22px; top: 46px; background: linear-gradient(#dfc188, #b5e3e4); }
}
@media (max-width: 359px) {
  .service-page .wp-header { padding-inline: 12px; }
  .service-page .wp-hero-copy { width: calc(100% - 36px); }
  .service-page .wp-eyebrow { font-size: 10px; letter-spacing: .18em; }
  .service-page .wp-hero-copy h1 { font-size: 32px; }
  .service-page .wp-intro { font-size: 24px; }
  .service-page .wp-services { padding-inline: 12px; }
  .service-page .wp-module-button { grid-template-columns: 42px minmax(0, 1fr) 28px; gap: 9px; padding-inline: 15px; }
  .service-page .wp-module-button > .wp-icon { width: 42px; height: 58px; }
  .service-page .wp-module-title { font-size: 20px; }
  .service-page .wp-module-arrow { width: 28px; height: 30px; }
  .service-page .wp-tags > span { font-size: 10px; padding-inline: 5px; }
  .service-page .wp-flow { margin-inline: 10px; padding-inline: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-production-page { scroll-behavior: auto; }
  .service-page *, .service-page *::before, .service-page *::after { animation: none !important; transition: none !important; }
  .service-page .wp-city-video { display: none; }
}

/* Keep the full office name and creative navigation on one desktop row. */
@media (min-width: 1001px) {
  .service-page .wp-brand > span { font-size: clamp(22px, 2vw, 30px); }
  .service-page .wp-nav { gap: clamp(12px, 1.25vw, 22px); font-size: 13px; }
  .service-page .wp-nav .wp-office { padding-left: 16px; font-size: 12px; }
  .service-page .wp-nav .wp-nav-contact { padding-inline: 18px; }
}

.service-page .wp-module-detail { flex-wrap: wrap; }
.service-page .wp-detail-link { display: block; font: 500 13px/1.6 var(--wp-sans); text-decoration: underline; text-underline-offset: 4px; padding: 8px 2px; color: #c5eced; }
.service-page .wp-module-detail .wp-detail-link { flex-basis: 100%; text-align: center; }

/* 2026-10-21: longer hero heading 「求める世界を、かたちに」 fits the compass panel */
.service-page .wp-hero-copy h1 { font-size: calc(44 * var(--wp-u)); }
@media (max-width: 1000px) { .service-page .wp-hero-copy h1 { font-size: clamp(26px, 7.6vw, 40px); } }
@media (max-width: 359px) { .service-page .wp-hero-copy h1 { font-size: 25px; } }
/* 2026-10-21: phones — slightly smaller hero text so nothing overflows with iPhone fonts */
@media (max-width: 600px) {
  .service-page .wp-brand > span { font-size: clamp(17px, 4.8vw, 23px); }
  .service-page .wp-eyebrow { font-size: 10px; }
  .service-page .wp-hero-copy h1 { font-size: clamp(24px, 6.9vw, 30px); letter-spacing: -.04em; }
  .service-page .wp-intro { font-size: clamp(20px, 5.9vw, 25px); }
  .service-page .wp-description { font-size: 12.5px; }
  .service-page .wp-action { font-size: 16px; }
  .service-page .wp-showcase-panel h2 { font-size: 21px; }
}
/* 2026-10-21: PC fonts ~9% smaller (phone rules at max-width 600/700 unchanged) */
@media (min-width: 701px) {
  .service-page .wp-brand p { font-size: calc(11 * var(--wp-u)); }
  .service-page .wp-brand > span { font-size: calc(33 * var(--wp-u)); }
  .service-page .wp-nav { font-size: max(12px, calc(15.5 * var(--wp-u))); }
  .service-page .wp-nav .wp-office { font-size: max(11px, calc(13.5 * var(--wp-u))); }
  .service-page .wp-eyebrow { font-size: calc(12 * var(--wp-u)); }
  .service-page .wp-hero-copy h1 { font-size: calc(40 * var(--wp-u)); }
  .service-page .wp-intro { font-size: calc(34 * var(--wp-u)); line-height: calc(46 * var(--wp-u)); }
  .service-page .wp-description { font-size: calc(15.5 * var(--wp-u)); line-height: calc(26 * var(--wp-u)); }
  .service-page .wp-action { font-size: calc(20 * var(--wp-u)); }
  .service-page .wp-action span { font-size: calc(26 * var(--wp-u)); }
  .service-page .wp-showcase-number { font-size: calc(11 * var(--wp-u)); }
  .service-page .wp-showcase-panel h2 { font-size: calc(24.5 * var(--wp-u)); }
  .service-page .island-entrance { font-size: calc(15 * var(--wp-u)); }
}