/* Shared A4 actions: rounded cut corners, morphing capsule, expanding dot. */
.button,.button-submit,.wpcf7-submit {
  --button-fill: #f4faf7; --button-edge: #4f8176; --button-ink: #103b3c;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between;
  gap: 26px; min-height: 60px; min-width: 240px; max-width: 100%; padding: 10px 26px;
  border: 1px solid var(--button-edge); border-radius: 4px; background: var(--button-fill); color: var(--button-ink);
  font: 700 16px/1.5 var(--font-body); text-decoration: none; vertical-align: middle; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.button::after,.button-submit::after { content: ''; width: 8px; height: 8px; flex: 0 0 8px; margin-inline: 11px; border-radius: 50%; background: currentColor; pointer-events: none; transition: transform .32s cubic-bezier(.22,.75,.3,1); }
.button--back::after { order: -1; }
.button:hover,.button-submit:hover { --button-fill: #e6f3ed; --button-edge: var(--green); color: var(--button-ink); }
.button--primary { --button-fill: #c34b40; --button-edge: #c34b40; --button-ink: #fff; }
.button--primary:hover { --button-fill: #ad3f35; --button-edge: #ad3f35; }
.button--submit,.button-submit,.wpcf7-submit { --button-fill: #0f7f74; --button-edge: #0f7f74; --button-ink: #fff; }
.button--submit:hover,.button-submit:hover,.wpcf7-submit:hover { --button-fill: #09695f; --button-edge: #09695f; }
.button--compact { min-height: 48px; min-width: 190px; padding: 6px 20px; gap: 18px; font-size: 14px; }
.primary-navigation .button--compact { font-size: 14px; }
.button:hover::after,.button:focus-visible::after,.button-submit:hover::after,.button-submit:has(:focus-visible)::after { transform: scale(2); }
.button:focus-visible,.button-submit:has(:focus-visible) { outline: 3px solid var(--green); outline-offset: 5px; }
.button.is-disabled,.button:disabled,.button-submit.is-disabled,.wpcf7-submit:disabled { --button-fill: #edf1ef; --button-edge: #dde5e0; --button-ink: #657973; cursor: not-allowed; }
.button.is-disabled::after,.button:disabled::after,.button-submit.is-disabled::after { transform: none; }
.button.has-button-shape,.button-submit.has-button-shape { border-color: transparent; background: transparent; }
.button-shape { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); z-index: -1; overflow: visible; pointer-events: none; }
.button-shape path { fill: var(--button-fill); stroke: var(--button-edge); stroke-width: 1; transition: fill .25s, stroke .25s; }
/* CF7 retains its native submit input, including validation and disabled handling. */
.button-submit,.wpcf7-submit { width: min(320px,100%); min-width: 0; }
.button-submit { height: 60px; padding: 0; }
.button-submit > .wpcf7-submit { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 10px 70px 10px 26px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; outline: none; }
.button-submit::after { position: absolute; right: 37px; top: calc(50% - 4px); margin: 0; }
.button-submit.is-busy > .wpcf7-submit { pointer-events: none; }
.service-round-link { flex: 0 0 68px; width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid #103b3c; border-radius: 50%; background: #fff; color: #103b3c; transition: background .25s,color .25s; }
.service-round-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-round-link:hover { background: #103b3c; color: #fff; }
.scene-controls button { width: 48px; height: 48px; }
.faq-filters button { border-color: #a3c3b9; }
.faq-filters button[aria-pressed=true] { background: var(--mint); color: #09695f; border-color: var(--green); text-decoration: underline; text-underline-offset: 5px; font-weight: 700; }
@media(max-width:480px) {
  .button { min-width: min(240px,100%); }
  .button--compact { min-width: min(190px,100%); }
  .contact-card .button { width: 100%; padding-inline: 20px; gap: 14px; }
}
@media(prefers-reduced-motion:reduce) { .button,.button::after,.button-submit,.button-submit::after,.button-shape path,.service-round-link { transition: none; } }

/* 問い合わせ文言と装飾ドットが狭いカード内でも1行に収まる余白を確保。 */
.contact-card .button { width: min(280px,100%); min-width: 0; padding-inline: 16px; gap: 12px; white-space: nowrap; }
.contact-card .button::after { margin-inline: 4px; }

/* Header menu uses the same rounded diagonal-cut outline as the shared actions. */
.menu-toggle {
  --button-fill: #0f7f74; --button-edge: #0f7f74; --button-ink: #fff;
  position: relative; isolation: isolate; width: 100px; min-height: 48px;
  padding: 10px 12px; border: 1px solid var(--button-edge); border-radius: 4px;
  background: var(--button-fill); color: var(--button-ink);
  transition: background .25s, color .25s, border-color .25s;
}
.menu-toggle.has-button-shape { border-color: transparent; background: transparent; }
.has-js .menu-toggle { justify-content: center; gap: 8px; }
.menu-toggle .menu-toggle__label { font: 700 11px/1.4 var(--font-body); }
.menu-toggle .menu-toggle__icon { position: relative; display: block; width: 16px; height: 18px; flex: 0 0 16px; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: ''; position: absolute; top: 50%; left: 0; width: 16px; height: 2px;
  border-radius: 2px; background: currentColor; transform: translateY(-4px);
  transition: transform .28s cubic-bezier(.22,.75,.3,1);
}
.menu-toggle__icon::after { transform: translateY(3px); }
.menu-toggle[aria-expanded=true] { --button-fill: #173e3d; --button-edge: #173e3d; }
.menu-toggle[aria-expanded=true] .menu-toggle__icon::before { transform: translateY(-.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] .menu-toggle__icon::after { transform: translateY(-.5px) rotate(-45deg); }
.menu-toggle:focus-visible { outline: 3px solid #0f7f74; outline-offset: 4px; }
@media (hover:hover) { .menu-toggle:hover { --button-fill: #09695f; --button-edge: #09695f; } }
@media (max-width:350px) {
  .has-js .menu-toggle { width: 88px; gap: 6px; padding-inline: 10px; }
  .menu-toggle .menu-toggle__label { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .menu-toggle, .menu-toggle__icon::before, .menu-toggle__icon::after { transition: none; }
}