/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0.0
*/

/* =========================================================
  Child Theme CSS (Modular)
  ---------------------------------------------------------
  Load order policy:
  - tokens  : all custom properties (:root) first
  - base    : font-face + typographic baseline
  - utilities: a11y helpers / motion preferences / small generic helpers
  - components: reusable UI blocks (service card / category menu)
  - pages   : page-scoped overrides (top menu / forms / layout tweaks)
========================================================= */

/* =========================================================
  _tokens.css
  Purpose:
  - Centralize design tokens (custom properties) only.
  Dependencies:
  - Must load before all other files.
========================================================= */

:root {
  /* Breakpoints (documentation tokens)
     NOTE: custom properties cannot be used inside @media in plain CSS. */
  --bp-mobile: 767px;
  --bp-tablet: 1024px;
  --bp-wide: 1280px;

  /* Colors */
  --color-primary: #30baa0;
  --color-primary-deep: #2d836e;
  --color-primary-light: #d6f1ec;
  --color-secondary: #524331;
  --color-secondary-light: #c0b6a0;
  --color-accent: #d3433e;

  /* Typography */
  --font-sans: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);

  /* Heading theme */
  --hd-accent: var(--color-primary);
  --hd-accent-ring: rgba(48, 186, 160, .18);
  --hd-text: var(--color-secondary);
  --hd-strong: var(--color-primary-deep);

  /* Motion */
  --motion-duration: .3s;
  --motion-ease: ease;

  /* (NEW) Transition presets
     WHY: dedupe repeated transition lists without changing selectors/classes.
     NOTE: only used as values; doesn't affect specificity or layout. */
  --tr-ui:
    transform var(--motion-duration) var(--motion-ease),
    background-color var(--motion-duration) var(--motion-ease),
    box-shadow var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease),
    color var(--motion-duration) var(--motion-ease);

  --tr-ui-lite:
    transform var(--motion-duration) var(--motion-ease),
    background-color var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease),
    color var(--motion-duration) var(--motion-ease);

  /* Spacing scale (px-based, for tight UI rhythm) */
  --space-3xs: 6px;
  --space-2xs: 8px;
  --space-xs: 10px;
  --space-sm: 12px;
  --space-md: 14px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* Radii */
  --radius-2xs: 2px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-pill: 999px;

  /* Borders / strokes */
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;

  /* Sizes */
  --size-arrow: 9px;
  --size-arrow-stroke: 2px;

  --size-avatar-sm: 60px;
  --size-avatar-md: 80px;
  --size-avatar-lg: 90px;

  --size-logo-max: 200px;

  /* Focus */
  --focus-outline: 3px;
  --focus-offset: 3px;
  --focus-ring: var(--color-primary-deep);
  --focus-ring-soft: rgba(45, 131, 110, .25);

  /* Layout */
  --layout-max-md: 1200px;
  --layout-max-lg: 1400px;

  --gap-sm: 12px;
  --gap-md: 16px;

  /* Fluid helpers */
  --pad-page-y: clamp(1rem, 3vw, 3rem);
  --pad-page-x: clamp(1rem, 3vw, 2rem);

  --pad-card: clamp(1.2rem, 2.6vw, 1.6rem);
  --col-logo: clamp(220px, 22vw, 280px);
  --gap-col: clamp(0px, 3vw, 2rem);

  --fs-catch: clamp(1.25rem, 1.2vw + 1rem, 1.8rem);
  --fs-body: clamp(.95rem, .3vw + .9rem, 1.1rem);

  --avatar: clamp(60px, 7vw, 90px);

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, .12);

  --shadow-btn-primary: 0 3px 10px rgba(213, 68, 63, .3);
  --shadow-btn-primary-hover: 0 5px 15px rgba(213, 68, 63, .4);

  --shadow-menu: 0 10px 28px rgba(0, 0, 0, .06);
  --shadow-menu-current: 0 10px 22px rgba(48, 186, 160, .12);
  --shadow-menu-hover: 0 12px 26px rgba(0, 0, 0, .10);

  --shadow-sub-current: 0 10px 20px rgba(45, 131, 110, .25);
}

/* =========================================================
  _base.css
  Purpose:
  - Font-face (optional local fonts)
  - Base typography (body / headings)
  - Site-wide heading system (.wp-block-heading)
  Dependencies:
  - Requires tokens loaded first.
========================================================= */

/* Font (enable if needed)
   Local font-face is optional; keep swap to avoid FOIT. */
@font-face {
  font-family: "MyJP";
  src: url("./assets/fonts/NotoSansJP-Regular.ttf") format("ttf");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MyJP";
  src: url("./assets/fonts/NotoSansJP-Bold.ttf") format("ttf");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-feature-settings: "palt";
  letter-spacing: -0.02em;
}

.wp-block-site-logo.is-default-size img {
  width: 420px;
}

/* ========================================
   Headings (site-wide) : wp-block-heading
   Motif: square marker + soft ring
======================================== */

/* Common */
.wp-block-heading {
  margin: 0 0 1rem;
  scroll-margin-top: 84px;

  line-height: 1.25;
  letter-spacing: .02em;

  color: var(--hd-text);
}

/* Marker: h2–h5 only */
h2.wp-block-heading::after,
h3.wp-block-heading::after,
h4.wp-block-heading::after,
h5.wp-block-heading::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-secondary);
  margin-top: 1rem;
}

/* h1: hero style with underline (no marker) */
h1.wp-block-heading {
  position: relative;

  margin: 0 0 1.25rem;
  padding: .25rem 0 .85rem;

  font-size: clamp(1.375rem, 1.1vw + 1.155rem, 1.625rem);
  font-weight: 900;
  letter-spacing: .01em;

  color: var(--hd-strong);
}

h1.wp-block-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: min(320px, 62%);
  height: var(--border-4);

  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--hd-accent), rgba(48, 186, 160, .10));
}

/* h2 */
h2.wp-block-heading {
  margin: 1.5rem 0 1rem;
  font-size: clamp(1.2rem, 1.1vw + 1rem, 1.75rem);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--hd-strong);
}

/* h3 */
h3.wp-block-heading {
  display: flex;
  align-items: center;
  gap: .6rem;

  margin: 1.25rem 0 .9rem;

  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--hd-strong);
}

/* h4 */
h4.wp-block-heading {
  display: flex;
  align-items: center;
  gap: .55rem;

  margin: 1.1rem 0 .75rem;

  font-size: .98rem;
  font-weight: 900;
  letter-spacing: .04em;

  color: var(--hd-text);
}

h4.wp-block-heading::before {
  width: var(--size-marker-sm);
  height: var(--size-marker-sm);

  border-radius: var(--radius-2xs);
  box-shadow: 0 0 0 var(--focus-offset) var(--hd-accent-ring);
}

/* h5 */
h5.wp-block-heading {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  margin: .9rem 0 .6rem;
  padding: .28rem .55rem;

  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .06em;

  color: var(--hd-strong);
  background: rgba(48, 186, 160, .10);
  border: var(--border-1) solid rgba(48, 186, 160, .20);
  border-radius: var(--radius-pill);
}

h5.wp-block-heading::before {
  width: var(--size-marker-xs);
  height: var(--size-marker-xs);

  border-radius: var(--radius-2xs);
  box-shadow: 0 0 0 var(--focus-offset) rgba(48, 186, 160, .14);
}

.c-headingAccent::before {
  content: attr(data-en);
  display: block;
  color: var(--color-secondary);
  font-size: 18px;
  margin-bottom: .3rem;
}

/* =========================================================
  _utilities.css
  Purpose:
  - Accessibility focus style (site-wide)
  - Reduced motion handling
  - Small generic guards (empty p, etc. where applicable)
  Dependencies:
  - Requires tokens loaded first.
========================================================= */

/* Accessibility: Focus (unified) */
:where(a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-outline) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-outline) + 2px) var(--focus-ring-soft);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .p-serviceCard__btn:hover,
  .p-serviceCard__btn--primary:hover,
  .p-serviceCatMenu__subLink:hover {
    will-change: auto !important;
    transform: none !important;
  }
}

/* Screen reader response (Contact Form 7) */
.screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* =========================================================
  _components.css
  Purpose:
  - Reusable components (cards, menus)
  - Component-local responsive overrides
  Dependencies:
  - Requires tokens + base + utilities loaded first.
========================================================= */
/* =========================================================
   Service Cards - Base (PC-first)
========================================================= */
body.home .wp-block-search__button-outside {
  margin-bottom: 3rem;
}

.p-serviceCards {
  display: grid;
  gap: clamp(1.5rem, 2vw, 2rem);
  max-width: var(--layout-max-md);
  margin: 0 auto;
  padding: 0;
}

.p-serviceCard {
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-duration) var(--motion-ease);
}

.p-serviceCard:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Grid layout */
.p-serviceCard__inner {
  display: grid;
  grid-template-columns: var(--col-logo) 1fr;
  grid-template-rows: auto auto auto 1fr auto auto;
  /* ← 1行追加 */

  row-gap: clamp(12px, 1vw, 30px);
  column-gap: var(--gap-col);
  align-items: start;

  padding: var(--pad-card) var(--pad-card) 0;
}

/* =========================
   Right column
========================= */

/* title */
.p-serviceCard__title {
  grid-column: 2;
  grid-row: 1;

  margin: 0;
  font-size: clamp(1.05rem, .5vw + 1rem, 1.15rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary-deep);
}

/* area（追加） */
.p-serviceCard__area {
  grid-column: 2;
  grid-row: 2;

  margin: 0;
  font-size: 0.85em;
  color: var(--color-secondary);
  line-height: 1.4;
  
  display: flex;
  flex-wrap: wrap;
  gap: .4em;

  span {
    background-color: var(--color-primary-light);
    padding: 5px 10px;
    border-radius: 100px;
    display: inline-block;
    font-size: 16px;
  }
}

.p-serviceCard__area span+span {
  margin-left: 0;
}

/* catch */
.p-serviceCard__catch {
  grid-column: 2;
  grid-row: 3;

  margin: 0;
  font-size: var(--fs-catch);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-secondary);
}

/* content */
.p-serviceCard__content {
  grid-column: 2;
  grid-row: 4;

  margin: 0;
}

.p-serviceCard__content>p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: clamp(1.8em, 0.4vw + 1.8em, 2em);
  color: var(--color-secondary);
  line-height: 1.6;
}

.p-serviceCard__content>p:empty {
  display: none;
}

/* =========================
   Left column
========================= */

/* logo */
.p-serviceCard__logo {
  grid-column: 1;
  grid-row: 1 / 6;
  /* ← 最下段まで合わせる */

  margin: 0;
  text-align: center;
}

.p-serviceCard__logo>img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 30px 30px 30px 0;
}

/* =========================
   Bottom blocks
========================= */

/* staff */
.p-serviceCard__staff {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 1.5vw, 1.25rem);

  grid-column: 1 / -1;
  grid-row: 5;

  margin-top: clamp(12px, 1vw, 20px);
  padding: 1rem;

  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
}

.p-serviceCard__staffName {
  font-weight: 700;
}

/* actions */
.p-serviceCard__actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--gap-sm);

  grid-column: 1 / -1;
  grid-row: 6;

  width: 100%;
}

.p-serviceCard__actions>br {
  display: none;
}

.p-serviceCard__btn {
  display: inline-block;

  flex: 1 1 0;
  min-width: 0;
  padding: clamp(.875rem, .6vw + .7rem, 1rem) clamp(1.5rem, 2vw, 2rem);

  font-size: clamp(.95rem, .25vw + .9rem, 1rem);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  color: var(--color-secondary);
  background: #fff;
  border: var(--border-2) solid var(--color-secondary);
  border-radius: var(--radius-sm);

  transition: var(--tr-ui);
}

.p-serviceCard__btn:hover {
  /* will-change only on hover to avoid permanent layer promotion */
  will-change: transform;

  background: var(--color-secondary-light);
  transform: translateY(-2px);
}

/* Primary */
.p-serviceCard__btn--primary {
  color: #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-btn-primary);
}

.p-serviceCard__btn--primary:hover {
  will-change: transform;

  background: #c23a35;
  border-color: #c23a35;
  box-shadow: var(--shadow-btn-primary-hover);

  transform: translateY(-2px);
}

/* ========================================
   Sidebar (Taxonomy) : Category Menu
======================================== */

.wp-block-template-part {
  padding: clamp(12px, 2vw, 16px);
}

.p-serviceCatMenu {
  position: relative;
}

.p-serviceCatMenu__list,
.p-serviceCatMenu__sub {
  margin: 0;
  padding: 0;

  list-style: none;
}

.p-serviceCatMenu__item+.p-serviceCatMenu__item {
  margin-top: var(--space-xs);
}

.p-serviceCatMenu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  padding: var(--space-xs) var(--space-sm);

  font-weight: 800;
  text-decoration: none;

  color: var(--color-secondary);
  background: #fff;
  border: var(--border-1) solid rgba(0, 0, 0, .10);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);

  transition: var(--tr-ui);
}

/* Chevron arrow */
.p-serviceCatMenu__link::after {
  content: "";

  width: var(--size-arrow);
  height: var(--size-arrow);
  flex: 0 0 auto;
  margin-left: auto;

  border-right: var(--size-arrow-stroke) solid rgba(82, 67, 49, .45);
  border-bottom: var(--size-arrow-stroke) solid rgba(82, 67, 49, .45);

  transform: rotate(-45deg);
}

/* Current */
.p-serviceCatMenu__link.is-current {
  color: #fff;
  background: var(--color-primary-deep);
  border-color: rgba(48, 186, 160, .35);
  box-shadow: var(--color-primary);
}

.p-serviceCatMenu__link.is-current::after {
  border-right-color: rgba(249, 255, 253, 0.7);
  border-bottom-color: rgba(249, 255, 253, 0.7);
}

/* Hover */
@media (hover:hover) {
  .p-serviceCatMenu__link:hover {
    border-color: rgba(48, 186, 160, .30);
    box-shadow: var(--shadow-menu-hover);

    background: var(--color-primary-deep);
  }

}

/* Sub */
.p-serviceCatMenu__sub {
  margin-top: var(--space-xs);
  border-radius: var(--radius-xl);
}

.p-serviceCatMenu__subItem {
  margin-left: 1rem;
}

.p-serviceCatMenu__subItem+.p-serviceCatMenu__subItem {
  margin-top: var(--space-3xs);
}

.p-serviceCatMenu__subLink {
  display: block;
  padding: var(--space-2xs) var(--space-xs);

  font-weight: 800;
  text-decoration: none;

  color: rgba(82, 67, 49, .92);
  background: rgba(255, 255, 255, .9);
  border: var(--border-1) solid rgba(0, 0, 0, .06);
  border-left: 4px solid var(--color-primary);

  transition: var(--tr-ui-lite);
}

.p-serviceCatMenu__subLink.is-current {
  color: var(--color-primary-deep);
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sub-current);
}

@media (hover:hover) {
  .p-serviceCatMenu__subLink:hover {
    will-change: transform;

    color: #fff;
    background: var(--color-secondary);
    border-color: rgba(255, 255, 255, .18);

    transform: translateY(-1px);
  }
}

/* ========================================
   Responsive (<= 767px): Component overrides
======================================== */
@media (max-width: 767px) {

  /* Headings: tighter tracking on small screens */
  h2.wp-block-heading,
  h3.wp-block-heading {
    letter-spacing: .06em;
  }

  /* Service cards */
  .p-serviceCards {
    gap: 2rem;
  }

  .p-serviceCard__inner {
    display: block;
    padding: 1.5rem;
  }

  .p-serviceCard__title,
  .p-serviceCard__area {
    margin: 0 0 .35rem;
  }

  .p-serviceCard__catch {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
  }

  .p-serviceCard__logo {
    margin-bottom: 1.5rem;
  }

  .p-serviceCard__logo>img {
    max-width: var(--size-logo-max);
  }

  .p-serviceCard__content {
    margin-bottom: 2rem;
  }

  .p-serviceCard__content>p {
    font-size: .95rem;
    line-height: 1.8;
  }

  .p-serviceCard__staff {
    margin-bottom: 2rem;
    padding: 1.25rem;
    gap: 1rem;
  }

  .p-serviceCard__staffPhoto>img {
    width: var(--size-avatar-sm);
    height: var(--size-avatar-sm);
  }

  .p-serviceCard__actions {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .p-serviceCard__btn {
    flex: 1 1 180px;
    min-width: 140px;
    padding: .875rem 1.5rem;

    font-size: .95rem;
    white-space: normal;
  }

  .p-serviceCard__btn--primary {
    font-size: 1rem;
  }

  .p-serviceCatMenu {
    border-radius: var(--radius-2xl);
  }

  .p-serviceCatMenu__link {
    padding: var(--space-xs) var(--space-xs);
  }

  body.home .is-layout-flex main {
    width: 90%;
    margin: auto;
    ;
  }
}

/* =========================================================
  _pages.css
  Purpose:
  - Page-scoped styles and overrides.
  - Layout tweaks that are not reusable components.
  Dependencies:
  - Requires tokens + base + utilities + components loaded first.
========================================================= */

/* Layout container tweak (PC) */
@media screen and (min-width: 1024px) {
  body .is-layout-flex {
    width: 90%;
    margin: auto;
    max-width: 1200px;
  }
}

/* top cover min-height */
:root :where(.wp-block-cover) {
  min-height: 320px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   商談フォーム用スタイル (Contact Form 7)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-id-408 main {
  margin-top: 0 !important;
  padding-top: 0 !important;

  .wp-block-post-title {
    font-size: 22px;
    padding: 0;
    text-align: center;
  }
}

.wpcf7-form {
  font-size: var(--fs-body);
}

/* ページタイトル */
.wp-block-post-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #524331;
  margin-bottom: 2rem;
  line-height: 1.3;
}

/* お問い合わせ対象ラベル */
.p-inquiryTarget {
  background: var(--color-secondary);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(48, 186, 160, 0.15);
}

.p-inquiryTarget__label {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

/* フォームコンテナ */
.wpcf7 {
  max-width: 680px;
  margin: 0 auto;
}

.wpcf7-form {
  background: #ffffff;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* フォームフィールド共通 */
.wpcf7-form p {
  margin-bottom: 1.75rem;
}

.wpcf7-form label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #524331;
  margin-bottom: 0.5rem;
}

/* 入力フィールド */
.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #333333;
  background: #fafafa;
  border: 2px solid #e5e5e5;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: #30baa0;
  box-shadow: 0 0 0 3px rgba(48, 186, 160, 0.1);
}

/* テキストエリア */
.wpcf7-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

/* 送信ボタン */
.wpcf7-submit {
  display: inline-block;
  padding: 1rem 3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #d3433e 0%, #b83835 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(211, 67, 62, 0.3);
  position: relative;
  overflow: hidden;
}

.wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(211, 67, 62, 0.4);
}

.wpcf7-submit:active {
  transform: translateY(0);
}

.wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* スピナー */
.wpcf7-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border: 3px solid rgba(48, 186, 160, 0.2);
  border-top-color: #30baa0;
  border-radius: 50%;
  animation: wpcf7-spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes wpcf7-spin {
  to {
    transform: rotate(360deg);
  }
}

/* レスポンスメッセージ */
.wpcf7-response-output {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
}

.wpcf7-validation-errors {
  background: #fff3cd;
  border: 2px solid #ffc107;
  color: #856404;
}

.wpcf7-mail-sent-ok {
  background: #d4edda;
  border: 2px solid #28a745;
  color: #155724;
}

.wpcf7-mail-sent-ng {
  background: #f8d7da;
  border: 2px solid #dc3545;
  color: #721c24;
}

/* バリデーションエラー */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #d3433e;
  font-weight: 500;
}

span.wpcf7-not-valid .wpcf7-form-control {
  border-color: #d3433e;
  background: #fff5f5;
}

.hidden-fields-container {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .wpcf7-form {
    padding: 1.5rem 1rem;
  }

  .wpcf7-submit {
    width: 100%;
    padding: 1rem;
  }

  .p-inquiryTarget {
    padding: 0.875rem 1rem;
  }
}

/* =========================================================
   TOP: Category menu override (scoped)
   - Keep existing .p-serviceCatMenu base styles
   - Force 2 columns on PC/SP
========================================================= */
.p-topServiceMenu .p-serviceCatMenu {
  margin: 0 0 var(--space-xl);
}

.p-topServiceMenu .p-serviceCatMenu__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* PC/SPともに2col */
  gap: var(--gap-sm);

  margin: 0;
  padding: 0;
  list-style: none;
}

.p-topServiceMenu .p-serviceCatMenu__item+.p-serviceCatMenu__item {
  margin-top: 0;
}

.p-topServiceMenu .p-serviceCatMenu__link {
  min-height: 56px;

  justify-content: center;
  text-align: center;
}

.p-topServiceMenu .p-serviceCatMenu__link::after {
  content: none;
}


/* =========================================================
   TOP: Category sections override (scoped)
========================================================= */

.p-topServiceMenu h2[id^="cat-"] {
  margin: var(--space-2xl) 0 var(--space-sm);
  position: relative;

  font-weight: 900;
  letter-spacing: .06em;
  color: var(--color-secondary);
}

.p-topServiceMenu .p-serviceCatSection {
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg);

  background: rgba(255, 255, 255, .9);
  border: var(--border-1) solid rgba(0, 0, 0, .08);
  border-radius: var(--radius-2xl);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.p-topServiceMenu .p-serviceCatSection__title {
  margin: var(--space-sm) 0 var(--space-sm);
  font-weight: 900;
}

.p-topServiceMenu .p-serviceCatSection__title>a {
  color: var(--color-secondary);
  text-decoration: none;
}

.p-topList__item {
  margin-bottom: .5rem;
}

.p-topServiceMenu .p-serviceCatSection__title a:link {
  text-decoration: underline;
}

.p-topServiceMenu .p-serviceCatSection__title a:hover {
  text-decoration: none;
}

@media (hover:hover) {
  .p-topServiceMenu .p-serviceCatSection__title a:link {
    text-decoration: none;
  }

  .p-topServiceMenu .p-serviceCatSection__title a:hover {
    text-decoration: underline;
  }
}


.p-topServiceMenu .p-serviceCatSection__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);

  margin: 0;
  padding: 0;
  list-style: none;
}

.p-topServiceMenu .p-serviceCatSection__link {
  display: block;
  padding: var(--space-xs) var(--space-sm);

  font-weight: 800;
  text-decoration: none;

  color: rgba(82, 67, 49, .92);
  background: rgba(255, 255, 255, .95);
  border: var(--border-1) solid rgba(0, 0, 0, .06);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-xl);

  transition: var(--tr-ui);
}

@media (hover:hover) {
  .p-topServiceMenu .p-serviceCatSection__link:hover {
    will-change: transform;

    color: #fff;
    background: var(--color-secondary);
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-1px);
    box-shadow: var(--shadow-menu-hover);
  }
}

.p-topServiceMenu .p-serviceCatSection__list:empty {
  display: none;
}