/* Palette Buzen shared components — improvement definition v1, R01–R08.
 * Page-specific photographs/compositions remain in their page stylesheets.
 */
:root {
 --service-section-space:96px;
 --service-gutter:20px;
 --component-body:max(16px,1rem);
 --component-small:max(15px,.9375rem);
}
.c-btn {
 max-width:100%; min-height:48px; font-size:var(--component-body);
 text-align:center; overflow-wrap:anywhere; flex-shrink:0;
}
.c-btn:focus-visible,.p-contact a:focus-visible,.p-footer a:focus-visible,
.p-visit-fixed-cta:focus-visible,.c-service-cases button:focus-visible,
.c-service-cases__scroll:focus-visible,.p-oshigoto-faq button:focus-visible {
 outline:3px solid var(--c-black); outline-offset:4px;
}
.p-contact a:focus-visible,.p-footer a:focus-visible { outline-color:#fff; box-shadow:0 0 0 3px var(--c-black); }
/* Let longer contact labels fit; balance lines only when the viewport requires wrapping. */
.c-btn.c-btn--contact {
 /* Override the legacy mobile button max-width:500px !important. */
 display:flex; max-width:100% !important;
 width:max-content; min-width:min(328px,100%); min-height:64px; padding:16px 24px;
 word-break:normal; text-wrap:balance;
}
.c-btn--contact > iconify-icon { flex:0 0 24px; width:24px; height:24px; }
.p-contact__btn-label { min-width:0; }
.p-contact__btn-part { display:inline-block; }
.c-btn--contact::after { content:none; }
.c-btn--positive:active { background:#e6cd2f; }

/* Shared fixed CTA: desktop tab and mobile vertical tab (2026-10-13). */
.p-visit-fixed-cta__close {
 width:44px; min-width:44px; max-width:44px;
 height:44px; min-height:44px; max-height:44px;
}

/* R02: contact content/background are passed by the template. */
.p-contact {
 position:relative; z-index:0; isolation:isolate;
 padding:var(--service-section-space) 0;
 background-image:var(--contact-image,url('../images/2_footer.jpg'));
 /* Preserve headroom for the group photo in both landscape and portrait crops. */
 background-size:cover; background-position:center 20%;
 color:#fff; font-family:var(--f-sans); font-size:var(--component-body); line-height:1.8;
}
.p-contact *, .p-contact *::before,.p-contact *::after,.p-footer * { box-sizing:border-box; }
/* Overlap the preceding background so fractional SVG edges cannot expose the photo. */
.p-contact__wave { position:absolute; inset:-2px 0 auto; line-height:0; z-index:1; pointer-events:none; }
.p-contact__wave img { display:block; width:100%; max-width:none; height:auto; aspect-ratio:1728/42; }
.p-contact--wave-flip .p-contact__wave--top img { transform:rotate(180deg); }
.p-contact__overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); pointer-events:none; z-index:0; }
.p-contact__inner {
 position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
 width:calc(100% - 2 * var(--service-gutter)); max-width:1096px;
 margin-inline:auto; padding-inline:0; gap:32px; text-align:center;
}
.p-contact__header { display:flex; flex-direction:column; align-items:center; gap:8px; }
.p-contact__title-en { font-family:var(--f-display); font-size:max(80px,5rem); line-height:1; color:#fff; margin:0; }
.p-contact__heading-row { display:flex; align-items:center; justify-content:center; gap:16px; }
.p-contact__icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--c-accent-4); color:var(--c-wood); flex:none; }
.p-contact__heading { font:700 max(30px,1.875rem)/1.5 var(--f-sans); letter-spacing:.05em; color:#fff; margin:0; padding:0; border:0; }
.p-contact__body { display:flex; flex-direction:column; gap:16px; max-width:700px; }
.p-contact__lead { font-size:max(24px,1.5rem); font-weight:700; margin:0; }
.p-contact__lead:empty { display:none; }
.p-contact__text { font-size:var(--component-body); line-height:1.8; margin:0; }
.p-contact__phone-card { display:flex; flex-direction:column; width:100%; max-width:660px; padding:24px; border-radius:8px; background:#fff; color:var(--c-black); }
.p-contact__phone-title { font-size:max(18px,1.125rem); font-weight:700; text-align:left; margin:0; }
.p-contact__phone-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; }
.p-contact__phone-num-wrap { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.p-contact__phone-icon { color:var(--c-wood); width:32px; height:32px; flex:none; }
.p-contact__phone-num { display:inline-flex; align-items:center; min-height:48px; font:700 max(35px,2.1875rem)/1.5 Jost,sans-serif; letter-spacing:.03em; color:var(--c-wood); text-decoration:none; overflow-wrap:anywhere; }
.p-contact__phone-num:hover { text-decoration:underline; }
.p-contact__phone-info { display:flex; flex-direction:column; text-align:left; gap:0; }
.p-contact__phone-info p { margin:0; font-size:var(--component-small); line-height:1.8; }

/* R03: one footer across the site. */
.p-footer { background:var(--c-wood); padding:32px 0; color:#fff; }
.p-footer__inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; padding-inline:0; width:calc(100% - 2 * var(--service-gutter)); max-width:1120px; margin-inline:auto; }
.p-footer__logo { display:block; width:280px; max-width:100%; height:auto; margin:0 0 8px; }
.p-footer__address,.p-footer__right { font-family:var(--f-sans); font-size:var(--component-small); letter-spacing:.05em; line-height:1.8; color:#fff; margin:0; }
.p-footer__right { text-align:right; }
.p-footer__right p { margin:0; line-height:1.8; }

/* R05: shared service heading, with an optional eyebrow and color tokens. */
.c-service-section-heading {
 position:relative; display:flex; flex-direction:column; align-items:center;
 width:calc(100% - 2 * var(--service-gutter)); max-width:1096px;
 margin:0 auto 32px; color:var(--c-black); text-align:center;
 font-family:var(--f-sans); isolation:isolate;
}
.c-service-section-heading--wide { width:100%; margin-bottom:0; }
.c-service-section-heading__word {
 position:absolute; z-index:-1; top:-41px; left:50%; transform:translateX(-50%);
 color:var(--heading-word-color,var(--c-black)); opacity:var(--heading-word-opacity,.05);
 font:400 clamp(70px,10vw,159px)/1 var(--f-display); letter-spacing:0; white-space:nowrap; pointer-events:none;
}
.c-service-section-heading__deco { position:relative; display:flex; align-items:flex-end; gap:5px; height:40px; flex:none; }
.c-service-section-heading__deco img { display:block; max-width:none; }
.c-service-section-heading__deco-side { width:35px; height:23px; flex:none; }
.c-service-section-heading__deco-side--right { transform:rotate(180deg); }
.c-service-section-heading__deco-face { position:relative; display:block; width:71px; height:40px; flex:none; }
.c-service-section-heading__deco-face-bg { position:absolute; inset:0; width:71px; height:40px; }
.c-service-section-heading__deco-face-left { position:absolute; top:11px; left:9px; width:19px; height:20px; }
.c-service-section-heading__deco-face-right { position:absolute; top:12px; right:11px; width:17px; height:19px; }
.c-service-section-heading h2 { margin:16px 0 0; padding:0; border:0; color:var(--c-black); font:700 max(40px,2.5rem)/1.6 var(--f-sans); letter-spacing:.05em; }
.c-service-section-heading__eyebrow { display:block; font-size:max(20px,1.25rem); line-height:1.6; }
.c-service-section-heading__lead { position:relative; margin-top:32px; font-size:var(--component-body); font-weight:500; line-height:1.8; letter-spacing:.05em; }
.c-service-section-heading__lead p { margin:0; }
.c-service-section-heading__lead p + p { margin-top:8px; }

/* R08: same FAQ card; static and accordion differ only in interaction. */
.p-oshigoto-faq { padding:var(--service-section-space) var(--service-gutter); background:var(--faq-background,var(--c-base)); color:var(--c-black); font-family:var(--f-sans); font-size:var(--component-body); }
.p-oshigoto-faq__inner { width:min(1096px,100%); margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:32px; }
.p-oshigoto-faq .p-oshigoto-faq__title { font-size:max(40px,2.5rem); line-height:1.6; }
.p-oshigoto-faq__list { width:100%; max-width:696px; display:flex; flex-direction:column; gap:24px; }
.p-oshigoto-faq__item { padding:8px; border-radius:16px; background:#fff; }
.p-oshigoto-faq__question,.p-oshigoto-faq__answer { display:flex; align-items:flex-start; gap:16px; padding:8px; color:var(--c-black); line-height:1.8; }
.p-oshigoto-faq__question { align-items:center; width:100%; min-height:48px; margin:0; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
.p-oshigoto-faq__q-label,.p-oshigoto-faq__a-label { display:flex; align-items:center; justify-content:center; width:32px; height:32px; min-width:32px; border-radius:50%; color:#fff; font-size:var(--component-body); font-weight:700; line-height:1; letter-spacing:0; flex:none; }
.p-oshigoto-faq__q-label { background:var(--c-accent-5); }
.p-oshigoto-faq__a-label { background:var(--c-accent-3); }
.p-oshigoto-faq__q-text,.p-oshigoto-faq__a-text { min-width:0; flex:1; font-size:var(--component-body); line-height:1.8; letter-spacing:.05em; overflow-wrap:anywhere; }
.p-oshigoto-faq__q-text { font-weight:700; }
.p-oshigoto-faq__a-text { font-weight:500; }
.p-oshigoto-faq__a-text p { margin:0; }
.p-oshigoto-faq__arrow { width:20px; height:20px; flex:none; transition:transform .2s; }
.p-oshigoto-faq__item.is-open .p-oshigoto-faq__arrow { transform:rotate(180deg); }
.p-oshigoto-faq__answer-wrap { max-height:0; overflow:hidden; transition:max-height .2s; }
.p-oshigoto-faq__answer { margin-top:8px; border-top:1px solid #e5e5e5; }
.p-oshigoto-faq--static .p-oshigoto-faq__question { cursor:default; }
.p-oshigoto-faq--static .p-oshigoto-faq__answer-wrap { max-height:none; overflow:visible; }

@media (min-width:768px) {
 .p-contact__lead br { display:none; }
}
@media (min-width:1025px) and (max-width:1439px) {
 #body_wrap.has-pallet-side-nav .o-faq .p-oshigoto-faq__inner { width:calc(100% - 128px); margin-left:128px; }
}
@media (max-width:1024px) {
 :root { --service-section-space:64px; }
 .p-visit-fixed-cta-wrap {
  display:block; right:env(safe-area-inset-right,0px);
  bottom:calc(88px + env(safe-area-inset-bottom,0px));
 }
 .p-visit-fixed-cta {
  box-sizing:border-box; flex-direction:column; justify-content:center;
  width:48px; min-height:170px; gap:8px; padding:12px 6px;
  border-radius:12px 0 0 12px;
 }
 .p-visit-fixed-cta__icon { width:28px; height:28px; }
 .p-visit-fixed-cta__copy { display:block; }
 .p-visit-fixed-cta__copy small,.p-visit-fixed-cta__arrow { display:none; }
 .p-visit-fixed-cta__copy strong {
  writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap;
  font-size:1rem; line-height:1.4; letter-spacing:.05em;
 }
 .p-visit-fixed-cta__close { top:-52px; right:0; left:auto; }
 body:has(#js-sp-menu.is-open) .p-visit-fixed-cta-wrap { display:none; }
 .p-visit-fixed-cta:focus-visible { outline-offset:-4px; }
 .p-visit-fixed-cta:hover { transform:none; }
 .p-contact { background-image:var(--contact-image-mobile,url('../images/1_footer.jpg')); }
 .p-contact__title-en { font-size:max(48px,3rem); }
 .p-contact__heading { font-size:max(28px,1.75rem); }
 .p-contact__heading-row { gap:8px; }
 .p-contact__lead { font-size:max(20px,1.25rem); }
 .p-contact__phone-card { padding:16px; }
 .p-contact__phone-title { text-align:center; }
 .p-contact__phone-row { flex-direction:column; gap:8px; }
 .p-contact__phone-num { font-size:max(28px,1.75rem); }
 .p-contact__phone-info { text-align:center; }
 .p-contact__text br { display:none; }
 .c-btn--contact { min-height:48px; }
 .p-footer__inner { flex-direction:column; align-items:center; text-align:center; }
 .p-footer__logo { margin:0 auto 16px; }
 .p-footer__right { text-align:center; }
 .c-service-section-heading h2,.p-oshigoto-faq .p-oshigoto-faq__title { font-size:max(28px,1.75rem); }
 .c-service-section-heading__eyebrow { font-size:max(18px,1.125rem); }
 .c-service-section-heading__word { font-size:clamp(58px,17vw,110px); top:-16px; }
 .c-service-section-heading__deco { transform:scale(.75); transform-origin:center bottom; }
 .c-service-section-heading__lead { margin-top:24px; }
 .c-service-section-heading__lead br { display:none; }
 .p-oshigoto-faq__question,.p-oshigoto-faq__answer { gap:8px; }
 .p-oshigoto-faq--static .p-oshigoto-faq__a-text br { display:none; }
 .p-kodomo-faq.p-oshigoto-faq { padding-block:var(--service-section-space); }
}
@media (max-width:374px) { :root { --service-gutter:16px; } }
@media (prefers-reduced-motion:reduce) {
 .c-btn,.c-btn::after,.c-shine-btn::before,.p-oshigoto-faq__arrow,.p-oshigoto-faq__answer-wrap { animation:none!important; transition:none!important; }
 .c-service-cases__scroll { scroll-behavior:auto; }
}

/* Keep shared headings inside their own section gutter and clear the fixed header. */
.c-service-cases > .c-service-section-heading { width:calc(100% - 2 * var(--service-gutter)); }
.p-contact,.c-service-section-heading h2 { scroll-margin-top:112px; }
.p-kodomo-faq.p-oshigoto-faq { padding-block:var(--service-section-space); }
.p-sp-menu :is(a,button):focus-visible,.p-sp-header button:focus-visible { outline:3px solid var(--c-black); outline-offset:3px; }

/* Shared emphasis rays: add this class only to decorative emphasis marks.
 * Two soft glints in 2.8 seconds; opacity keeps placement and shape unchanged.
 */
.c-emphasis-rays { opacity:1; }
@media (prefers-reduced-motion:no-preference) {
 .c-emphasis-rays { animation:palette-emphasis-twinkle 2.8s ease-in-out infinite; }
}
@keyframes palette-emphasis-twinkle {
 0%,40%,80%,100% { opacity:1; }
 20%,60% { opacity:.18; }
}
@media (prefers-reduced-motion:reduce) {
 .c-emphasis-rays { animation:none!important; opacity:1; }
}

/* Service hero: shared layout with the existing Jobs / Kodomo hero hooks.
 * Page-specific copy, photos and image focal points remain in their templates.
 */
.c-service-hero { position:relative; padding:0; background:#fff; }
.c-service-hero__visual,.p-oshigoto-hero,.p-kodomo-hero {
 position:relative; height:349px; overflow:hidden;
}
.c-service-hero .c-service-hero__photo {
 position:absolute; inset:0; width:100%; max-width:none; height:100%;
 object-fit:cover; object-position:var(--service-hero-photo-position,center);
}
.c-service-hero__copy,.p-oshigoto-hero__text-wrap,.p-kodomo-hero__copy {
 position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.c-service-hero__copy { z-index:2; }
.c-service-hero__text,.p-oshigoto-hero__text,.p-kodomo-hero h1 {
 display:block; width:100%; max-width:1096px; margin:0; padding-right:var(--sp-md);
 text-align:right; color:#fff; font-family:var(--f-sans); font-weight:700;
 text-shadow:0 0 3px #000,0 0 13px #000,0 0 7px #000;
}
.c-service-hero__audience,.c-service-hero__message { display:block; }
.c-service-hero__audience,.p-oshigoto-hero__heading,.p-kodomo-hero__audience {
 margin-bottom:var(--sp-xs); font-size:var(--fs-3xl);
 letter-spacing:var(--ls-wider); line-height:var(--lh-tight);
}
.c-service-hero__message,.p-oshigoto-hero__subheading,.p-kodomo-hero__message {
 font-size:var(--fs-2xl); letter-spacing:var(--ls-wider); line-height:var(--lh-normal);
}
/* Kodomo is the reference for the identity panel as well as the photo/copy. */
.c-service-hero__identity,.p-kodomo-hero__identity {
 position:absolute; z-index:3; bottom:0; left:0;
 display:flex; flex-direction:column; justify-content:center; gap:0;
 height:91px; padding:8px 8px 8px 344px;
 border-radius:0 24px 0 0; background:#fff;
}
.c-service-hero__category,.p-kodomo-hero__category {
 display:flex; align-items:center; gap:9.96px; margin:0;
 color:#b8861a; font-size:25.36px; font-weight:700;
 letter-spacing:1px; line-height:1; white-space:nowrap;
}
.c-service-hero__category img { width:9.96px; height:9.96px; flex:none; }
.c-service-hero .c-service-hero__name,.p-kodomo-hero__name {
 margin:0; padding:0; color:#000; font-size:35.02px; font-weight:700;
 letter-spacing:1.38px; line-height:45.68px; white-space:nowrap;
}
@media (min-width:1025px) and (max-width:1439px) {
 #body_wrap.has-pallet-side-nav .c-service-hero__text {
  box-sizing:border-box; width:var(--p-side-nav-content-width); max-width:none;
  margin-left:calc(var(--p-side-nav-reserve) + var(--p-side-nav-content-margin));
  margin-right:var(--p-side-nav-content-margin);
 }
}
@media (max-width:1024px) {
 .c-service-hero__visual,.p-oshigoto-hero,.p-kodomo-hero { height:280px; }
 .c-service-hero__identity,.p-kodomo-hero__identity { height:88px; padding-left:28px; }
}
/* Leave room for the shared floating menu in the tablet hero. */
@media (min-width:768px) and (max-width:1024px) {
 .c-service-hero__copy,.p-oshigoto-hero__text-wrap,.p-kodomo-hero__copy { padding-top:64px; }
 .c-service-hero__audience,.p-oshigoto-hero__heading,.p-kodomo-hero__audience { font-size:28px; }
 .c-service-hero__message,.p-oshigoto-hero__subheading,.p-kodomo-hero__message { font-size:24px; line-height:1.6; }
}
@media (max-width:767px) {
 .c-service-hero__visual,.p-oshigoto-hero,.p-kodomo-hero { height:auto; aspect-ratio:4/3; }
 .c-service-hero .c-service-hero__photo { object-position:var(--service-hero-photo-position-mobile,center); }
 .c-service-hero__visual::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent 14%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.34) 100%);
 }
 .c-service-hero__copy,.p-oshigoto-hero__text-wrap,.p-kodomo-hero__copy {
  align-items:flex-end; justify-content:flex-end; padding:var(--sp-md);
 }
 .c-service-hero__text,.p-oshigoto-hero__text,.p-kodomo-hero h1 { max-width:none; padding-right:0; }
 .c-service-hero__audience,.p-oshigoto-hero__heading,.p-kodomo-hero__audience { font-size:2rem; }
 .c-service-hero__message,.p-oshigoto-hero__subheading,.p-kodomo-hero__message { font-size:1.2rem; }
 .p-kodomo-hero__identity { display:none; }
 /* Keep the H1 available to assistive technology without inserting a mobile panel. */
 .c-service-hero__identity {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
 }
}


/* Shared service Instagram strip; dimensions follow the Kodomo reference. */
.c-service-instagram,.p-kodomo-instagram-strip {
 display:flex; align-items:center; justify-content:flex-start;
 box-sizing:border-box; min-height:42px; padding:8px 0;
 background:var(--kp-yellow,var(--o-yellow,#f5e04b)); color:#000; text-decoration:none;
}
.c-service-instagram__inner,.p-kodomo-instagram-strip__inner {
 display:flex; align-items:center; gap:0; padding:0 16px;
}
.c-service-instagram__label,.p-kodomo-instagram-strip__label {
 display:flex; align-items:center; height:26px;
 font-size:16px; font-weight:500; letter-spacing:2.5px; line-height:25.6px;
 text-decoration:underline; text-underline-offset:2px;
}
.c-service-instagram img,.p-kodomo-instagram-strip img { width:16px; height:16px; flex:0 0 16px; }
.c-service-instagram:hover,.p-kodomo-instagram-strip:hover { color:#000; filter:brightness(.97); }
@media (min-width:1025px) {
 #body_wrap.has-pallet-side-nav .c-service-instagram { width:100%; margin-left:0; }
 #body_wrap.has-pallet-side-nav .c-service-instagram__inner {
  box-sizing:border-box; width:100%; max-width:none; justify-content:flex-start; margin:0;
  padding-right:var(--sp-md); padding-left:calc(var(--p-side-nav-expanded-reserve) + var(--sp-md));
 }
}
@media (max-width:767px) {
 .c-service-instagram__inner,.p-kodomo-instagram-strip__inner { justify-content:center; }
 .c-service-instagram__label,.p-kodomo-instagram-strip__label { font-size:14px; letter-spacing:2px; }
}

/* Shared service sliders: quiet dots with a full 44px touch target. */
:is(.c-service-cases, .p-oshigoto-cases, .c-service-voices) .splide__pagination,
.c-service-cases__controls {
 position:static; display:flex; justify-content:center; flex-wrap:wrap; gap:0;
 margin:16px 0 0; padding:0; list-style:none;
}
.c-service-cases__controls[hidden] { display:none; }
:is(.c-service-cases, .p-oshigoto-cases, .c-service-voices) .splide__pagination__page,
.c-service-cases__dot {
 display:grid; place-items:center; width:44px; height:44px; min-height:44px;
 margin:0; padding:0; border:0; border-radius:50%; background:none;
 opacity:1; transform:none; cursor:pointer;
}
:is(.c-service-cases, .p-oshigoto-cases, .c-service-voices) .splide__pagination__page::before,
.c-service-cases__dot::before {
 content:''; width:8px; height:8px; border-radius:50%; background:#b0a79c;
}
:is(.c-service-cases, .p-oshigoto-cases, .c-service-voices) .splide__pagination__page.is-active,
.c-service-cases__dot[aria-current="true"] { background:none; transform:none; }
:is(.c-service-cases, .p-oshigoto-cases, .c-service-voices) .splide__pagination__page.is-active::before,
.c-service-cases__dot[aria-current="true"]::before { background:var(--c-black); }
:is(.c-service-cases, .p-oshigoto-cases, .c-service-voices) .splide__pagination__page:focus-visible,
.c-service-cases__dot:focus-visible { outline:2px solid var(--c-black); outline-offset:-4px; }
@media (max-width:767px) {
 .p-oshigoto-cases__lead-heading { text-align:left; }
}