/*!
 * tailwind.css
 * Lightweight Tailwind-like utility CSS for WordPress Classic Theme skeletons.
 *
 * This is NOT the official Tailwind CSS.
 * No Node.js, npm, Tailwind CLI, PostCSS, or build tooling is required.
 *
 * Purpose:
 * - Provide layout utility classes only.
 * - Keep visual design in tokens.css / base.css / components.css / sections.css.
 */

/* ==========================================================================
   Display
   ========================================================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.contents { display: contents; }
.hidden { display: none; }

/* ==========================================================================
   Position
   ========================================================================== */

.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* ==========================================================================
   Z-index
   ========================================================================== */

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ==========================================================================
   Flexbox
   ========================================================================== */

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.grow { flex-grow: 1; }
.grow-0 { flex-grow: 0; }
.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.content-center { align-content: center; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }

.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* ==========================================================================
   Grid
   ========================================================================== */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* ==========================================================================
   Gap
   ========================================================================== */

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-x-12 { column-gap: 3rem; }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; }

/* ==========================================================================
   Width / Height
   ========================================================================== */

.w-auto { width: auto; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-fit { width: fit-content; }
.w-min { width: min-content; }
.w-max { width: max-content; }

.max-w-none { max-width: none; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-screen-sm { max-width: 640px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 1024px; }
.max-w-screen-xl { max-width: 1280px; }
.max-w-screen-2xl { max-width: 1536px; }

.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* ==========================================================================
   Margin
   ========================================================================== */

.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0 { margin-top: 0; }
.mt-auto { margin-top: auto; }
.mr-0 { margin-right: 0; }
.mr-auto { margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.mb-auto { margin-bottom: auto; }
.ml-0 { margin-left: 0; }
.ml-auto { margin-left: auto; }

/* ==========================================================================
   Padding - intentionally minimal.
   Prefer project CSS / tokens.css for primary spacing.
   ========================================================================== */

.p-0 { padding: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

/* ==========================================================================
   Overflow
   ========================================================================== */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-scroll { overflow-y: scroll; }

/* ==========================================================================
   Object fit
   ========================================================================== */

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

.object-center { object-position: center; }
.object-top { object-position: top; }
.object-right { object-position: right; }
.object-bottom { object-position: bottom; }
.object-left { object-position: left; }

/* ==========================================================================
   Text alignment - structural only
   ========================================================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ==========================================================================
   Vertical alignment
   ========================================================================== */

.align-baseline { vertical-align: baseline; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

/* ==========================================================================
   Visibility / Pointer events
   ========================================================================== */

.visible { visibility: visible; }
.invisible { visibility: hidden; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ==========================================================================
   Screen reader
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================================================
   Responsive utilities
   ========================================================================== */

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:inline-block { display: inline-block; }
  .sm\:inline { display: inline; }
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:grid { display: grid; }
  .sm\:hidden { display: none; }

  .sm\:relative { position: relative; }
  .sm\:absolute { position: absolute; }
  .sm\:fixed { position: fixed; }
  .sm\:sticky { position: sticky; }

  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:flex-wrap { flex-wrap: wrap; }
  .sm\:flex-nowrap { flex-wrap: nowrap; }

  .sm\:items-start { align-items: flex-start; }
  .sm\:items-center { align-items: center; }
  .sm\:items-end { align-items: flex-end; }

  .sm\:justify-start { justify-content: flex-start; }
  .sm\:justify-center { justify-content: center; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:justify-between { justify-content: space-between; }

  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .sm\:gap-0 { gap: 0; }
  .sm\:gap-2 { gap: 0.5rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:gap-8 { gap: 2rem; }
  .sm\:gap-10 { gap: 2.5rem; }
  .sm\:gap-12 { gap: 3rem; }

  .sm\:w-auto { width: auto; }
  .sm\:w-full { width: 100%; }
  .sm\:max-w-full { max-width: 100%; }

  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:inline { display: inline; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }

  .md\:relative { position: relative; }
  .md\:absolute { position: absolute; }
  .md\:fixed { position: fixed; }
  .md\:sticky { position: sticky; }

  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:flex-wrap { flex-wrap: wrap; }
  .md\:flex-nowrap { flex-wrap: nowrap; }

  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:items-end { align-items: flex-end; }

  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:justify-between { justify-content: space-between; }

  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .md\:gap-0 { gap: 0; }
  .md\:gap-2 { gap: 0.5rem; }
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:gap-8 { gap: 2rem; }
  .md\:gap-10 { gap: 2.5rem; }
  .md\:gap-12 { gap: 3rem; }
  .md\:gap-16 { gap: 4rem; }

  .md\:w-auto { width: auto; }
  .md\:w-full { width: 100%; }
  .md\:max-w-full { max-width: 100%; }

  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
}

@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:inline-block { display: inline-block; }
  .lg\:inline { display: inline; }
  .lg\:flex { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none; }

  .lg\:relative { position: relative; }
  .lg\:absolute { position: absolute; }
  .lg\:fixed { position: fixed; }
  .lg\:sticky { position: sticky; }

  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:flex-wrap { flex-wrap: wrap; }
  .lg\:flex-nowrap { flex-wrap: nowrap; }

  .lg\:items-start { align-items: flex-start; }
  .lg\:items-center { align-items: center; }
  .lg\:items-end { align-items: flex-end; }

  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-end { justify-content: flex-end; }
  .lg\:justify-between { justify-content: space-between; }

  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .lg\:gap-0 { gap: 0; }
  .lg\:gap-2 { gap: 0.5rem; }
  .lg\:gap-4 { gap: 1rem; }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:gap-8 { gap: 2rem; }
  .lg\:gap-10 { gap: 2.5rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-16 { gap: 4rem; }

  .lg\:w-auto { width: auto; }
  .lg\:w-full { width: 100%; }
  .lg\:max-w-full { max-width: 100%; }

  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
}

@media (min-width: 1280px) {
  .xl\:block { display: block; }
  .xl\:flex { display: flex; }
  .xl\:grid { display: grid; }
  .xl\:hidden { display: none; }

  .xl\:flex-row { flex-direction: row; }
  .xl\:flex-col { flex-direction: column; }

  .xl\:items-center { align-items: center; }
  .xl\:justify-between { justify-content: space-between; }

  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .xl\:gap-8 { gap: 2rem; }
  .xl\:gap-10 { gap: 2.5rem; }
  .xl\:gap-12 { gap: 3rem; }
  .xl\:gap-16 { gap: 4rem; }
}

@media (min-width: 1536px) {
  .\32xl\:block { display: block; }
  .\32xl\:flex { display: flex; }
  .\32xl\:grid { display: grid; }
  .\32xl\:hidden { display: none; }

  .\32xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .\32xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/*!
 * fluid-type.css
 * Cross-project fluid typography scale — permanent static file.
 * Loaded after tokens.css. Do NOT regenerate or overwrite per project.
 */

:root {
  --font-size-fluid-xs:  clamp(0.875rem, 0.82rem  + 0.25vw, 1rem);    /* 14–16px */
  --font-size-fluid-sm:  clamp(1rem,     0.94rem  + 0.35vw, 1.125rem); /* 16–18px */
  --font-size-fluid-md:  clamp(1.25rem,  1.05rem  + 0.85vw, 1.5rem);   /* 20–24px */
  --font-size-fluid-lg:  clamp(1.5rem,   1.25rem  + 1.2vw,  2rem);     /* 24–32px */
  --font-size-fluid-xl:  clamp(1.875rem, 1.45rem  + 1.8vw,  3rem);     /* 30–48px */
  --font-size-fluid-2xl: clamp(2.25rem,  1.6rem   + 2.8vw,  4rem);     /* 36–64px */
  --font-size-fluid-head-title: clamp(1.5rem,   1.25rem  + 1.2vw,  2rem);     /* 24–32px */
  --font-size-fluid-reassurance: clamp(28.00px, calc(2.04vw + 20.35px), 36.00px);     /* 28–36px */
}

/*!
 * form.css
 * Foundation form base styles — permanent static file.
 * Loaded after tokens.css, before base.css.
 * Do NOT regenerate or overwrite per project.
 */

/* ==========================================================================
   Text-like input fields
   ========================================================================== */

:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  textarea,
  select
) {
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.8em 1em;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  textarea,
  select
)::placeholder {
  color: var(--color-text-muted);
}

:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  textarea,
  select
):focus {
  outline: none;
  border-color: var(--color-border-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 20%, transparent);
}

:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  textarea,
  select
):disabled {
  background-color: var(--color-bg-strong);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ==========================================================================
   Textarea
   ========================================================================== */

textarea {
  min-height: 120px;
  line-height: var(--line-height-relaxed);
  vertical-align: top;
}

/* ==========================================================================
   Select
   ========================================================================== */

select {
  cursor: pointer;
  padding-right: 2.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 1.2em;
}

select::-ms-expand {
  display: none;
}

/* ==========================================================================
   Checkbox / Radio
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-brand-primary);
  width: auto;
  display: inline-block;
  margin-right: 0.5em;
  cursor: pointer;
}

/* ==========================================================================
   Button / Submit — default (neutral). Override with component CSS per project.
   ========================================================================== */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  appearance: none;
  display: inline-block;
  padding: 0.8em 2em;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  transition:
    opacity var(--transition-normal),
    background-color var(--transition-normal);
  background-color: var(--color-bg-strong);
  color: var(--color-text-primary);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  opacity: 0.8;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   WordPress: search block
   ========================================================================== */

.wp-block-search__inside-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.wp-block-search .wp-block-search__input {
  width: auto;
  flex-grow: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.wp-block-search .wp-block-search__button {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*!
 * typography.css
 * Foundation typography & semantic element base styles — permanent static file.
 * Loaded after form.css, before base.css.
 * Do NOT regenerate or overwrite per project.
 *
 * Not included here (handle in generated base.css per project):
 *   - color-scheme override
 *   - -webkit-font-smoothing (already in reset.css)
 *   - min-height: 0vw (iOS viewport workaround — project-specific)
 */

/* ==========================================================================
   Body
   ========================================================================== */

body {
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  font-family: var(--font-family-body);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-base);
  font-feature-settings: "palt";
  overflow-x: hidden;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  text-decoration: none;
  transition: opacity var(--transition-normal);
}

a:hover {
  opacity: 0.7;
}

/* Disable tel links on non-touch screens */
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* ==========================================================================
   Preformatted / code
   ========================================================================== */

pre {
  display: block;
  font-family: monospace;
  white-space: pre-wrap;
  margin: 1em 0;
  background-color: var(--color-bg-strong);
  padding: 1em;
}

code,
kbd,
samp,
tt {
  font-family: monospace;
}

/* ==========================================================================
   Definition list
   ========================================================================== */

dl {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0;
}

@media (max-width: 767px) {
  dl {
    flex-direction: column;
  }
}

dt {
  padding: 1em 1.5em 1em 0;
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid var(--color-brand-primary);
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  dt {
    width: 30%;
  }
}

@media (max-width: 767px) {
  dt {
    padding: 0.5em 0;
  }
}

dd {
  padding: 1em 1.5em;
  margin-left: 0;
  border-bottom: 1px solid var(--color-border-strong);
}

@media (min-width: 768px) {
  dd {
    width: 70%;
  }
}

@media (max-width: 767px) {
  dd {
    padding: 1.5em 0;
    border-bottom: none;
  }
}

/* ==========================================================================
   Inline elements
   ========================================================================== */

strong {
  font-weight: bold;
}

address {
  display: block;
  font-style: italic;
}

cite,
em,
var {
  font-style: italic;
}

ins {
  text-decoration: underline;
}

q {
  display: inline;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* ==========================================================================
   WordPress Content — Alignment & Caption
   ========================================================================== */

.entry-content .wp-caption-text {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-align: center;
}

.entry-content .alignleft:not(.wp-block-icon) {
  float: left;
  margin-top: 0;
  margin-right: 2em;
  margin-bottom: 2em;
  max-width: 50%;
}

.entry-content .alignright:not(.wp-block-icon)  {
  float: right;
  margin-top: 0;
  margin-left: 2em;
  margin-bottom: 2em;
  max-width: 50%;
}
.entry-content .alignleft.wp-block-icon {
float: left;
margin-right:0.5em;
}

.entry-content .alignright.wp-block-icon {
  float: right;
  margin-left: 0.5em;
}

.entry-content .aligncenter {
  display: block;
  margin-inline: auto;
  margin-bottom: 1.5em;
  text-align: center;

  & img {
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .entry-content .alignleft:not(.wp-block-icon),
  .entry-content .alignright:not(.wp-block-icon) {
    float: none;
    max-width: 100%;
    margin-inline: auto;
  }
}

    .entry-content h2 + p {
    margin-top: var(--space-10);
  }
    .entry-content h3 + p {
    margin-top: var(--space-8);
  }

/* ==========================================================================
   WordPress Content — Figure & Figcaption
   ========================================================================== */

.entry-content figure {
  margin-bottom: 1.5em;
  max-width: 100%;

  .wp-block-column & {
    margin-bottom: 0;
  }

  & img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
  }

  & figcaption {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: 0.5em;
  }
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   WordPress Content — Table
   ========================================================================== */

.entry-content .wp-block-table,
.entry-content .wp-block-flexible-table-block-table {
  & table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;

    & thead {
      border-bottom: 1px solid var(--color-border-strong);
    }

    & th,
    & td {
      border: 1px solid var(--color-border-strong);
      padding: 0.8em;
      vertical-align: baseline;
    }

    & th {
      background-color: var(--color-brand-secondary-soft);
      font-weight: bold;
      text-align: left;
    }
    & td {
      background-color: var(--color-surface-base);
    }
  }

  /* WP デフォルト: モバイルでスタック表示 */
  &.is-stacked-on-mobile {
    @media (max-width: 767px) {
      & table th,
      & table td {
        border-bottom: 0;
      }

      border-bottom: 1px solid var(--color-border-strong);
    }
  }

  /* ブロックスタイル: モバイル時に水平スクロール */
  &.is-style-scroll {
    @media (max-width: 767px) {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.5em;

      & table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
      }
    }
  }

  /* ブロックスタイル: 常に水平スクロール */
  &.is-style-scroll-always {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5em;

    & table {
      width: max-content;
      min-width: 100%;
      table-layout: auto;
    }
  }

  /* Flexible Table Block: モバイル時に水平スクロール（コアの is-style-scroll 相当。
     実際のスクロールコンテナは scroll-hint-init.js が挿入する .js-table-scroll のため、
     ここでは table 自体をコンテナ幅より広げてスクロール余地を作るだけでよい） */
  &.is-scroll-on-mobile {
    @media (max-width: 767px) {
      /* Flexible Table Block は table に style="width:auto" 等のインラインstyleを
         直接出力するため、外部CSSでは !important なしでは上書きできない */
      & table {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
      }
    }
  }
}

/* ==========================================================================
   WordPress Content — Embed  (.wp-block-embed)
   YouTube 等の埋め込みブロック。16:9 アスペクト比でレスポンシブ化。
   ========================================================================== */

.entry-content .wp-block-embed {
  margin-bottom: 1.5em;

  & .wp-block-embed__wrapper {
    position: relative;
    width: 100%;

    & iframe {
      width: 100%;
      height: auto;
      max-width: 840px;
      aspect-ratio: 16 / 9;
      margin-inline: auto;
    }
  }
}

/* ==========================================================================
   WordPress Content — Separator / HR
   is-style-dots ブロックスタイルバリアントは ui.css 参照
   ========================================================================== */

.entry-content hr,
.entry-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 3em 0;
}

/* ==========================================================================
   Lists — ul / ol
   is-style-check / is-style-arrow ブロックスタイルバリアントは ui.css 参照
   ========================================================================== */

.entry-content ul:not(.is-style-check):not(.is-style-arrow):not(.toc__list) {
  list-style: disc;
  list-style-position: inside;
  box-sizing: border-box;

  & li ul {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    margin-left: 1.5em;
  }

  & li ol {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
  }
}

.entry-content ol {
  list-style: none;
  counter-reset: ol-counter;
  margin-left: 0;
  margin-bottom: 2rem;

  & > li {
    position: relative;
    padding-left: 2.5em;
    margin-bottom: 0.4em;
    line-height: 1.6;

    & ol,
    & ul {
      margin-top: 0.8em;
      margin-bottom: 0.8em;
    }

    &::before {
      counter-increment: ol-counter;
      content: counter(ol-counter);
      position: absolute;
      left: 0;
      top: 0.1em;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.8em;
      height: 1.8em;
      background-color: var(--color-brand-primary);
      color: var(--color-text-on-brand, white);
      font-weight: var(--font-weight-bold);
      font-size: 0.9em;
      border-radius: 2px;
    }
  }
}

.entry-content ul,.entry-content ol{
  margin:var(--space-5) 0;
}

/* ==========================================================================
   WordPress Content — Pullquote  (.wp-block-pullquote)
   is-style-solid-color は WordPress ビルトインのブロックスタイルバリアント
   ========================================================================== */

.entry-content .wp-block-pullquote {
  margin: 4em 0;
  padding: 2em 0;
  text-align: center;
  border-top: 2px solid var(--color-brand-primary);
  border-bottom: 2px solid var(--color-brand-primary);

  & blockquote {
    margin: 0;
    padding: 0;
    background: none;
    border-left: none;

    &::before {
      content: none;
    }

    & p {
      font-size: 1.5rem;
      font-weight: bold;
      line-height: 1.4;
      color: var(--color-brand-primary);
      margin-bottom: 0.5em;
    }

    & cite {
      display: block;
      font-size: 0.8rem;
      color: var(--color-text-secondary);
      font-style: normal;
      margin-top: 10px;
    }
  }

  &.is-style-solid-color {
    background-color: var(--color-brand-primary);
    border: none;
    padding: 2em;

    & blockquote p {
      color: var(--color-text-on-primary, #fff);
    }

    & blockquote cite {
      color: var(--color-text-on-primary, #fff);
      opacity: 0.8;
    }
  }
}

/* ==========================================================================
   WordPress Content — Cover  (.wp-block-cover)
   背景画像・動画の上にテキストを重ねる全面ブロック。
   内部テキストは白前提のため、見出し・リンクの装飾をカバー用にリセット。
   ========================================================================== */

.entry-content .wp-block-cover {
  margin-bottom: 2em;
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 4px 15px rgba(0, 0, 0, 0.1));
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.05));

  & .wp-block-cover__inner-container {
    color: var(--color-text-on-primary, #fff);
    z-index: 10;

    & a {
      color: var(--color-text-on-primary, #fff);
      text-decoration: underline;

      &:hover {
        opacity: 0.8;
        text-decoration: none;
      }
    }

    & h2,
    & h3,
    & h4,
    & p {
      color: inherit;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }

    & h2,
    & h3 {
      background: none;
      border: none;
      padding: 0;
    }
  }

  @media (max-width: 767px) {
    min-height: 250px;
    padding: var(--space-5, 20px);
  }
}

/* ==========================================================================
   WordPress Content — Verse  (.wp-block-verse)
   pre のデフォルト（等幅フォント）を打ち消し、詩・歌詞向けの明朝体表示に整える
   ========================================================================== */

.entry-content .wp-block-verse {
  font-family: var(--font-family-verse, "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", "MS PMincho", serif);
  white-space: pre-wrap;
  font-size: 1.1rem;
  line-height: 2;
  padding: 2.5em;
  margin-bottom: 2em;
  background-color: var(--color-bg-page, #fff);
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
  box-shadow: var(--shadow-sm, 0 5px 15px rgba(0, 0, 0, 0.03));
  color: var(--color-text-primary);

  @media (max-width: 767px) {
    padding: 1.5em;
    font-size: 1rem;
  }
}

/* ==========================================================================
   WordPress Content — Media & Text  (.wp-block-media-text)
   画像とテキストを横並びにするブロック。
   .is-stacked-on-mobile で SP 時に縦積み表示（WP デフォルト設定）。
   ========================================================================== */

.entry-content .wp-block-media-text {
  margin-bottom: 2em;

  & .wp-block-media-text__media img {
    vertical-align: middle;
    border-radius: var(--radius-sm, 4px);
  }

  & .wp-block-media-text__content {
    padding: var(--space-5, 20px);

    & h2,
    & h3 {
      margin-top: 0;
    }
  }

  &.is-stacked-on-mobile {
    @media (max-width: 767px) {
      display: block !important;

      & .wp-block-media-text__media {
        margin-bottom: 1.5em;
        width: 100% !important;
      }

      & .wp-block-media-text__content {
        padding: 0 !important;
        width: 100% !important;
      }
    }
  }
}

/* ==========================================================================
   WordPress Content — Group (Grid Layout)  (.wp-block-group.is-layout-grid)
   グリッドレイアウトのグループブロック。
   SP 時にシングルカラムへフォールバック。
   ========================================================================== */

.entry-content .wp-block-group.is-layout-grid {
  margin-bottom: 2em;

  @media (max-width: 767px) {
    grid-template-columns: 1fr !important;
    gap: 1em !important;
  }

  & > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  & .wp-block-image {
    width: 100%;

    & img {
      width: 100%;
      height: auto;
      vertical-align: bottom;
      object-fit: cover;
    }

    & figcaption {
      font-size: 0.8rem;
      margin-top: 0.5em;
      text-align: center;
    }
  }
}

/* ==========================================================================
記事h1
   ========================================================================== */

.l-page__title {
  font-size: var(--font-size-fluid-head-title);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: var(--font-family-heading);
}

.post-template-default .l-page__title {
    background: var(--gradient-text-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cath-txt{
  font-size: var(--font-size-fluid-lg);
  line-height: var(--line-height-normal);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: var(--space-6);
background: var(--gradient-text-brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-family: var(--font-family-heading);

}
.entry-content .cath-txt{
      display: inline-block;
}
@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}

.scroll-hint-icon {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 120px;
  height: auto;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, .7);
  text-align: center;
  padding: 20px 10px 10px 10px;
  z-index: 10;
}

.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
}

.scroll-hint-text {
  font-size: 0.625rem;
  color: #FFF;
  margin-top: 5px;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8;
}

.scroll-hint-icon:before {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon:after {
  content: "";
  width: 34px;
  height: 14px;
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -20px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
  opacity: 0;
  transition-delay: 2.4s;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear;
  animation-iteration-count: 2;
}

.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}

.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}

.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}

.scroll-hint-shadow-wrap {
  position: relative;
}

.scroll-hint-shadow-wrap::after {
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.scroll-hint-shadow-wrap::before {
  content: "";
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after,
.scroll-hint-shadow-wrap.is-right-scrollable::after {
  opacity: 1;
  visibility: visible;
}

.scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before,
.scroll-hint-shadow-wrap.is-left-scrollable::before {
  opacity: 1;
  visibility: visible;
}

/**
 * ui.css — Fixed shared UI components
 *
 * プロジェクト間で共通の不変コンポーネント。
 * role-based token のみ参照。ハードコード値禁止。
 * プロジェクトごとに上書き・再生成しないこと。
 * プロジェクト固有の上書きは components.css で行う。
 */

/* ==========================================================================
   Scroll — TOC アンカーリンクのスムーズスクロール
   scroll-padding-top の値は tokens.css で --scroll-padding-top を定義して制御する
   例: --scroll-padding-top: 80px;（固定ヘッダーの高さに合わせる）
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-padding-top, 0px);
}

/* ==========================================================================
   Scroll Trigger  (html.scrolled)
   FV下のトリガー要素がビューポート外に出ると html に scrolled クラスが付与される。
   ヘッダースタイルの変更に使用。token参照のみで記述。
   ========================================================================== */

html.scrolled header {
  /* Customize header appearance when scrolled past FV */
  /* Example: background color, padding, shadow, etc. */
}

/* ==========================================================================
   Accessibility / AI-readable UI support
   ========================================================================== */

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button) {
  cursor: pointer;
}

:where(button:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
}

:where(a, button) {
  text-underline-offset: 0.18em;
}

:where(.c-button, .p-header__menu-button) {
  min-height: 44px;
  min-width: 44px;
}

/* ページ先頭の「本文へスキップ」リンク */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-skip-link, 9999);
  padding: var(--space-2) var(--space-6);
  background: var(--color-brand-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* スクリーンリーダー専用テキスト（アイコンのみボタン等） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
    a.c-floating-cta__link[href^="tel:"] {
        pointer-events: visible;
    }
}

/* ==========================================================================
   Page Header  (.l-page__header)
   背景タイプは customizer で選択。インラインstyleで background-image または
   background-color が付与される。画像モード時のみ cover 指定が意味を持つ。
   ========================================================================== */

.l-page__header {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.l-page__header .l-content{
    min-height: 160px;
  align-items: center;
}

.l-page__header h1.l-page__title, .l-page__header div.l-page__label{
  font-size: var(--font-size-fluid-head-title);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0;
  line-height: 0.8;
  font-family: var(--font-family-heading);
  letter-spacing: var(--letter-spacing-wider);
}

.l-page__header  .l-page__eyecatch {
  display: block;
  margin-block-start: var(--space-3);
  color: var(--color-page-eyecatch, var(--color-text-inverse));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  letter-spacing: 4px;
  opacity: var(--opacity-page-eyecatch, 0.7);
  font-family: var(--font-family-heading);
}


.l-page__header .l-content{
  align-content: center;
        gap: 0px;
}
@media (min-width: 1024px) {
.l-page__header .l-content{
    min-height: 200px;
  align-items: center;
}
}
/*
.blog .l-page__header {
margin-bottom: var(--space-12);
}
*/

/* ==========================================================================
   Breadcrumb  (.c-breadcrumb)
   ========================================================================== */

.c-breadcrumb {
  overflow: hidden;
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  padding:var(--space-4) 0 var(--space-8) 0;
}

.c-breadcrumb a {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.c-breadcrumb a:hover {
  color: var(--color-brand-primary-hover);
  text-decoration: underline;
}

.c-breadcrumb__list li:not(:last-of-type)::after {
  content: "›";
  margin: var(--space-2);
  color: var(--color-text-muted);
}

.c-breadcrumb__item {
  white-space: nowrap;
}

.c-breadcrumb__item:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
.c-breadcrumb__list {
  padding:var(--space-4) 0 var(--space-12) 0;
}
}

/* ==========================================================================
   TOC — Table of Contents  (.toc / .toc__*)
   inc/toc.php の the_content フックで自動挿入
   ========================================================================== */

.toc {
  margin: var(--space-8) 0;
}

.toc__details {
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

.toc__summary {
  padding: var(--space-3);
  background: var(--color-surface-card);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
  list-style: none;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.toc__summary:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.toc__summary::-webkit-details-marker {
  display: none;
}

.toc__details[open] > .toc__summary {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.toc__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.toc__arrow {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.toc__details[open] .toc__arrow {
  transform: rotate(180deg);
}

.toc__body {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-surface-base);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.entry-content ul.toc__list {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  counter-reset: toc-h2;
  margin-top: 0;
}

.toc__item--h2 {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  counter-increment: toc-h2;
}

.toc__item--h2 > .toc__link::before {
  content: counter(toc-h2) ". ";
}

.toc__item--h3 {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs, 0.75rem);
}

.toc__link {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-color);
}

.toc__link:hover {
  color: var(--color-brand-primary);
}

/* --- Sidebar sticky TOC (.toc--sidebar / .toc--inline) ---
   tw_toc_sticky_sidebar 設定がONのとき sidebar.php でレンダリングされる追従目次。
   SP: 非表示 / PC: sticky + スクロールスパイ（toc-spy.js）。
   プロジェクト固有の見た目は components.css で .toc--sidebar を上書きして調整する。  */

.toc--sidebar {
  display: none;
}

@media (min-width: 1024px) {
  /* .toc--sidebar が存在するときだけ l-sidebar 全体をsticky（TOCなしページは通常フロー） */
  .l-sidebar:has(.toc--sidebar) {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--sticky-toc-gap, 42px));
    align-self: start;
  }

  .toc--sidebar {
    display: block;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border-default);
    background: var(--color-surface-card);
    margin-bottom: var(--space-6);
  }

  /* インラインTOCをPC時に非表示（サイドバーに移譲） */
  .toc--inline {
    display: none;
  }
}

.toc--sidebar__heading {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-brand-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* ui.css の .toc__item--h2 counter に必要な counter-reset を上書き設定 */
.toc--sidebar .toc__list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-h2;
}

.toc--sidebar .toc__link {
  display: block;
  padding: var(--space-1) 0;
}

/* アクティブ状態（toc-spy.js が .is-active を付与） */
.toc--sidebar .toc__link.is-active {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Linkcard  (.linkcard / .linkcard__*)
   shortcodes.php の [linkcard url="..."] で出力
   ========================================================================== */

.linkcard {
  margin: var(--space-8) 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-card);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  text-decoration: none;
  transition:
    var(--transition-shadow),
    transform var(--transition-fast);
}

.linkcard:hover {
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

/* mobile: absolute 配置の img を受けるため固定高さが必要 */
.linkcard__image {
  height: 12rem;
  background: var(--color-surface-soft);
  display:none;
}

.linkcard__body {
  padding: var(--space-4) var(--space-5);
}

.linkcard__title {
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  transition: var(--transition-color);
}

.linkcard:hover .linkcard__title {
  color: var(--color-brand-primary);
}

.linkcard__excerpt {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* flex items-center は tailwind.css が担当 */
.linkcard__meta {
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.linkcard__meta svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  /* md:flex-row 切り替え後: 幅指定（tailwind の md:w-[32%] の代替） */
  .linkcard__image {
    width: 32%;
    height: auto;
    display: block;
  }

  .linkcard__body {
    padding: var(--space-5) var(--space-6);
  }
}

/* ==========================================================================
   Child Page Cards  (.child-page-card / .child-page-card__*)
   shortcodes.php の [child_pages_nav]（親ページ表示）で出力
   ========================================================================== */

.child-pages-nav {
  margin: var(--space-8) 0;
}

.child-page-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-card);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  text-decoration: none;
  transition:
    var(--transition-shadow),
    transform var(--transition-fast);
}

.child-page-card:hover {
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

/* tailwind の aspect-video 相当 */
.child-page-card__image {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-soft);
}

.child-page-card__body {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}

.child-page-card__title {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  transition: var(--transition-color);
}

.child-page-card:hover .child-page-card__title {
  color: var(--color-brand-primary);
}

/* ==========================================================================
   Child Pages Nav  (.child-pages-nav__*)
   shortcodes.php の [child_pages_nav]（子ページ表示）で出力
   ========================================================================== */

.child-pages-nav__inner {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-soft);
}

.child-pages-nav__back {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-default);
}

/* inline-flex items-center は tailwind.css が担当 */
ul.child-pages-nav__back-link {
  gap: var(--space-2);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.child-pages-nav__back-link:hover {
  color: var(--color-brand-primary-hover);
  text-decoration: underline;
}

.child-pages-nav__back-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.child-pages-nav__list {
  display: grid;
  gap: var(--space-1);
  list-style: none!important;
  padding-left: 0!important;
  margin-bottom: 0!important;
}

/* flex items-center justify-between は tailwind.css が担当 */
.child-pages-nav__item--current {
  padding: var(--space-2);
  /* border-left: 4px solid var(--color-brand-primary);*/
  background: var(--color-surface-base);
border: 1px solid var(--color-border-default);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
}

/* flex items-center gap-2 は tailwind.css が担当 */
.child-pages-nav__dot {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.child-pages-nav__badge {
  padding: 0.25rem 0.625rem;
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

/* flex items-center は tailwind.css が担当 */
.child-pages-nav__sibling-link {
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    var(--transition-color),
    border-color var(--transition-fast);
}

.child-pages-nav__sibling-link:hover {
  border-color: var(--color-border-accent);
  color: var(--color-brand-primary);
  text-decoration: none;
}

.child-pages-nav__sibling-link svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: var(--transition-color);
}

.child-pages-nav__sibling-link:hover svg {
  color: var(--color-brand-primary);
}

.child-pages-nav__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .child-pages-nav__inner {
    padding: var(--space-6) var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .linkcard:hover,
  .child-page-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Page Top Button  (.c-page-top)
   footer.php に配置。スクロール量に応じて is-active クラスで表示制御。
   ========================================================================== */

.c-page-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-page-top, 100);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--color-brand-secondary);
  box-shadow: var(--shadow-md);
  color: var(--color-text-on-primary);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

.c-page-top.is-active {
  opacity: 1;
  visibility: visible;
}

.c-page-top:hover {
  background: var(--color-brand-secondary-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

.c-page-top:focus-visible {
  outline: 3px solid var(--color-text-on-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  .c-page-top {
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast);
  }

  .c-page-top:hover {
    transform: none;
  }
}

/* ==========================================================================
   Layout — l-content / l-main / l-sidebar
   カラムレイアウト切り替え。カスタマイザーで設定した値を
   aigis_get_layout_class() がテンプレートに渡す。
   ========================================================================== */

.l-content {
  display: grid;
  gap: var(--space-layout-gap, 80px);
  max-width: var(--content-max-width, 1200px);
  margin-inline: auto;
  width: calc(100% - var(--layout-container-padding) - var(--layout-container-padding));
}

.l-content--one-column {
  grid-template-columns: minmax(0, 1fr);
}

.l-content--sidebar-right {
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 250px);
}

.l-content--sidebar-left {
  grid-template-columns: var(--sidebar-width, 250px) minmax(0, 1fr);
}

.l-content--sidebar-left .l-sidebar {
  order: -1;
}

.l-main {
  min-width: 0;
}

.l-sidebar {
  min-width: 0;
}

.single-post .entry-content,
.symptoms-template-default .entry-content{
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .l-content,
  .l-content--one-column,
  .l-content--sidebar-right,
  .l-content--sidebar-left {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
  }

  .l-content--sidebar-left .l-sidebar {
    order: initial;
  }
}
/* 改行用インラインブロック（文中の改行位置調整など）*/
.txtbr {
  display: inline-block;
}
/* ==========================================================================
   Marker  (.marker-yellow / .marker-pink / .marker-blue)
   editor-marker.js のカスタムフォーマットで挿入される <span> に適用。
   tokens.css で --color-marker-* を定義するとプロジェクトごとに上書き可能。
   ========================================================================== */

.marker-yellow {
  background-color: var(--color-marker-yellow, rgba(255, 255, 0, 0.4));
}

.marker-pink {
  background-color: var(--color-marker-pink, rgba(255, 100, 130, 0.35));
}

.marker-blue {
  background-color: var(--color-marker-blue, rgba(100, 160, 255, 0.35));
}

/* ==========================================================================
   Floating CTA  (.c-floating-cta)
   レスポンシブ対応：SP下部固定・横並び → PC右固定・縦並び
   ========================================================================== */

.c-floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  z-index: 100;
  display:none;
}

@media (min-width: 1024px) {
  .c-floating-cta {
display:none;
  }
}

.c-floating-cta__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background-color: var(--bg-color, #f0f0f0);
  color: white;
  text-decoration: none;
  transition:
    filter 0.2s,
    box-shadow 0.2s;
}

.c-floating-cta__link:hover {
  filter: saturate(1.2);
  color: white;
}

.c-floating-cta__link:focus-visible {
  outline: 3px solid var(--color-text-on-primary);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .c-floating-cta__link {
    padding: var(--space-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .c-floating-cta__link:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

.c-floating-cta__icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-primary);
}

.c-floating-cta__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.2;
}

/* フローティングCTAがモバイルで下部コンテンツを隠さないよう body に余白を確保する。
   --floating-cta-height は tokens.css でプロジェクトごとに定義（実測値に合わせる）。 */
body:has(.c-floating-cta) {
  padding-bottom: var(--floating-cta-height, 80px);
}

body:has(.c-floating-cta) .c-page-top {
  bottom: calc(var(--floating-cta-height, 80px) + var(--space-4));
}

@media (min-width: 1024px) {
  body:has(.c-floating-cta) {
    padding-bottom: 0;
  }
body:has(.c-floating-cta) .c-page-top {
  bottom: calc(var(--floating-cta-height, 80px) + var(--space-10));
}

}

/* ==========================================================================
   Icomoon Icon Font
   使用例: <span class="icon-telephone"></span>
   アイコン追加: icomoon.io で再生成し woff/woff2 を差し替え、
   下部の .icon-* クラスにコードポイントを追加する
   ========================================================================== */

@font-face {
  font-family: "icomoon";
  src:
    url("../../font/icomoon/icomoon.woff2") format("woff2"),
    url("../../font/icomoon/icomoon.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tiktok::before {
  content: "\e918";
}
.icon-freedial::before {
  content: "\e919";
}
.icon-envelope::before {
  content: "\e916";
}
.icon-cart::before {
  content: "\e917";
}
.icon-arrow-left::before {
  content: "\e900";
}
.icon-arrow-right::before {
  content: "\e901";
}
.icon-arrow-down::before {
  content: "\e902";
}
.icon-arrow-up::before {
  content: "\e903";
}
.icon-caret-down::before {
  content: "\e904";
}
.icon-caret-left::before {
  content: "\e905";
}
.icon-caret-right::before {
  content: "\e906";
}
.icon-caret-up::before {
  content: "\e907";
}
.icon-hospital::before {
  content: "\e908";
}
.icon-instagram::before {
  content: "\e909";
}
.icon-info::before {
  content: "\e90a";
}
.icon-link::before {
  content: "\e90b";
}
.icon-line::before {
  content: "\e90c";
}
.icon-facebook::before {
  content: "\e90d";
}
.icon-magnifying-glass::before {
  content: "\e90e";
}
.icon-map-pin::before {
  content: "\e90f";
}
.icon-question::before {
  content: "\e910";
}
.icon-youtube::before {
  content: "\e911";
}
.icon-warning::before {
  content: "\e912";
}
.icon-x-logo::before {
  content: "\e913";
}
.icon-calendar::before {
  content: "\e914";
}
.icon-telephone::before {
  content: "\e915";
}

/* ==========================================================================
   Recent Posts  (.c-recent-posts / .c-recent-posts__*)
   sidebar.php の最新の記事リスト
   ========================================================================== */

.c-recent-posts {
  margin-top: var(--space-8);
}

.c-recent-posts__heading,.l-sidebar h2.wp-block-heading {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-brand-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
  font-family: var(--font-family-heading);
}

.c-recent-posts__list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.c-recent-posts__link {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: var(--transition-color);
}

.c-recent-posts__link:hover {
  color: var(--color-brand-primary);
  text-decoration: none;
}

.c-recent-posts__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: var(--color-surface-soft);
}

.c-recent-posts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-recent-posts__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* ==========================================================================
   Related Posts  (.c-related-posts / .c-related-posts__*)
   template-parts/single/related-posts.php で出力。
   SP: 縦積み（各アイテムはサムネイル左・タイトル右の横並び）
   PC（≥768px）: 3カラムカード横並び
   ========================================================================== */

.c-related-posts {
  margin-top: var(--space-12);
}

.c-related-posts__heading {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-brand-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
}

.c-related-posts__list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
}

.c-related-posts__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.c-related-posts__thumb {
  flex-shrink: 0;
  width: 96px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-soft);
}

.c-related-posts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-related-posts__body {
  flex: 1;
  min-width: 0;
}

.c-related-posts__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

.c-related-posts__title a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: var(--transition-color);
  word-break: break-all;
}

.c-related-posts__title a:hover {
  color: var(--color-brand-primary);
}

.c-related-posts__date {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs, 0.75rem);
}

@media (min-width: 768px) {
  .c-related-posts__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .c-related-posts__item {
    flex-direction: column;
    border: 1px solid var(--color-border-default);
    border-radius: var(--component-radius-card);
    background: var(--color-surface-card);
    overflow: hidden;
gap: 0;
  }


  .c-related-posts__thumb {
    width: 100%;
    border-radius: 0;
  }

  .c-related-posts__body {
    padding: var(--space-4);
    width: 100%;
  }

  .c-related-posts__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-related-posts__item:hover {
    transform: none;
  }
}

/* ==========================================================================
   Scroll Hint  (.js-table-scroll / .scroll-hint)
   scroll-hint-init.js がテーブルをラッパー div に包んで ScrollHint を適用する。
   base.css の table { display:block; overflow-x:auto } はラッパーに委譲するため
   内側テーブルのみリセットする。
   ========================================================================== */

/* JS で動的生成されるテーブル用ラッパー */
/* ScrollHint がインラインで overflow: auto（縦横両方）を付与するため、
   縦方向のみ !important で打ち消す（行数の少ない表で不要な縦スクロールバーが出るのを防ぐ） */
.js-table-scroll {
  margin: var(--space-8) 0;
  overflow-y: hidden !important;
}

/* ラッパー内テーブル：overflow / display / margin を base.css から上書きリセット */
.js-table-scroll > table,
.entry-content .scroll-hint > table {
  display: table;
  overflow-x: visible;
  width: auto;
  min-width: 100%;
  margin: 0;
}

/* ==========================================================================
   Flexible Table Block — Sticky Header / Sticky First Column
   table.is-sticky-header / table.is-sticky-first-column はプラグインが
   テーブルブロックに付与するクラス。position: sticky はスクロール可能な
   祖先要素（.js-table-scroll 等）を基準に機能する。
   ========================================================================== */

.entry-content table.is-sticky-header thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}
.entry-content table.is-sticky-header thead td {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--color-surface-card);
}

.entry-content table.is-sticky-first-column tbody th:first-child{
  position: sticky;
  left: 0;
  z-index: 1;
}
.entry-content table.is-sticky-first-column tbody td:first-child,
.entry-content table.is-sticky-first-column tfoot th:first-child,
.entry-content table.is-sticky-first-column tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--color-surface-card);
}

.entry-content table.is-sticky-header.is-sticky-first-column thead th:first-child,
.entry-content table.is-sticky-header.is-sticky-first-column thead td:first-child {
  left: 0;
  z-index: 3;
}

/* ==========================================================================
   WP Block Styles — List  (ul.is-style-check / ul.is-style-arrow)
   WordPress ブロックエディタのリストブロックスタイルバリエーション。
   functions.php の register_block_style() でエディタから選択可能になる。
   ========================================================================== */

.entry-content ul.is-style-check {
  list-style: none;
  margin-left: 0;

  & li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.6;

    &:last-child {
      margin-bottom: 0;
    }

    /* typography.css の ul:not(...) セレクタ詳細度 [0,2,1] を上書きするため !important */
    & ul {
      list-style: none !important;
      margin-left: 0 !important;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0.2em;
      width: 1em;
      height: 1em;
      border: 1px solid var(--color-brand-primary);
      background-color: var(--color-bg-page, white);
      border-radius: 2px;
      box-sizing: border-box;
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0.4em;
      top: 0.3em;
      width: 0.3em;
      height: 0.6em;
      border-right: 1px solid var(--color-brand-primary);
      border-bottom: 1px solid var(--color-brand-primary);
      transform: rotate(45deg);
    }
  }
}

.entry-content ul.is-style-arrow {
  list-style: none;
  margin-left: 0;

  & li {
    position: relative;
    padding-left: 1.2em;

    /* typography.css の ul:not(...) セレクタ詳細度 [0,2,1] を上書きするため !important */
    & ul {
      list-style: none !important;
      margin-left: 0 !important;
      margin-top: 0.2em;
      margin-bottom: 0.2em;
    }

    &::before {
      content: '▶';
      position: absolute;
      left: 0;
      top: 0.5em;
      color: var(--color-brand-primary);
      font-size: 0.6em;
    }
  }
}

/* ==========================================================================
   WP Block Styles — Separator  (hr.is-style-dots / .wp-block-separator.is-style-dots)
   WordPress ブロックエディタのセパレーターブロックスタイルバリエーション。
   functions.php の register_block_style() でエディタから選択可能になる。
   ========================================================================== */

.entry-content hr.is-style-dots,
.entry-content .wp-block-separator.is-style-dots {
  background: none;
  border: none;
  text-align: center;
  height: auto;

  &::before {
    content: "···";
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    color: var(--color-text-muted);
  }
}

/* ==========================================================================
   WP Block Styles — Paragraph  (p.is-style-info-box / p.is-style-alert)
   WordPress ブロックエディタの段落ブロックスタイルバリエーション。
   functions.php の register_block_style() でエディタから選択可能になる。
   ========================================================================== */

.entry-content p.is-style-info-box {
  background-color: var(--color-surface-soft, #f9f9f9);
  border: 1px solid var(--color-border-default, #ddd);
  padding: 1.5em;
}

.entry-content p.is-style-alert {
  color: var(--color-danger, #d00);
  font-weight: bold;

  &::before {
    content: "";
    margin-right: 0.3em;
  }
}

/* ==========================================================================
   Link Pages  (.c-link-pages)
   wp_link_pages() で出力される改ページナビゲーション（<!--nextpage-->）
   ========================================================================== */

.c-link-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.c-link-pages__label {
  margin-right: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-link-pages a,
.c-link-pages .post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border-default);
  color: var(--color-brand-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition:
    var(--transition-color),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.c-link-pages a:hover {
  border-color: var(--color-brand-primary);
  background-color: var(--color-brand-primary-soft);
  text-decoration: none;
}

.c-link-pages .post-page-numbers.current {
  border-color: var(--color-brand-primary);
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

/* ==========================================================================
   WP Core Accordion  (.wp-block-accordion / .wp-block-accordion-item)
   WordPress ブロックエディタの標準アコーディオンブロック。
   WP Interactivity API が .is-open をアイテムに、inert をパネルに付与して開閉を制御。
   ========================================================================== */

.entry-content .wp-block-accordion:not(.is-layout-flow) {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.entry-content .wp-block-accordion-item:not(.is-layout-flow) {
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  overflow: hidden;
}

.entry-content .wp-block-accordion-heading {
  margin: 0;
}

.entry-content .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-soft);
  border: none;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.entry-content .wp-block-accordion-heading__toggle:hover,
.entry-content .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
  text-decoration: none;
}

.entry-content .wp-block-accordion-heading__toggle-title {
  flex: 1;
  text-decoration: none;
}

.entry-content .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

.entry-content .wp-block-accordion-heading__toggle-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-circle);
  background: var(--color-brand-primary);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-sm);
  line-height: 1;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-normal);
}

.entry-content .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
  transform: rotate(45deg);
}

.entry-content .wp-block-accordion-panel {
  padding: var(--space-5);
  border-top: 1px solid var(--color-border-default);
}

.entry-content .wp-block-accordion-panel[inert] {
  display: none;
}

/* ==========================================================================
   Block Pattern: Related Links Box  (.p-related-links-box)
   ========================================================================== */

.p-related-links-box {
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface-card);
  padding: 1rem 1.5rem;
  margin: 2.5rem auto;
  position: relative;
}

.p-related-links-box__title {
  margin: 0 0 1rem !important;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  color: var(--color-brand-primary);
}

.p-related-links-box__title::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background-color: currentColor;
  mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" /></svg>') no-repeat center;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" /></svg>') no-repeat center;
}

.p-related-links-box__list {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.p-related-links-box__list li {
  margin-bottom: 0.5em;
  padding-left: 1.2em;
  position: relative;
  line-height: 1.6;
}

.p-related-links-box__list li:last-child {
  margin-bottom: 0;
}

.p-related-links-box__list li::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 0.18em;
  font-size: 0.7em;
  color: var(--color-brand-primary);
}

.p-related-links-box__list a {
  color: var(--color-text-primary);
  transition: color var(--transition-fast, 0.15s ease);
}

.p-related-links-box__list a:hover {
  color: var(--color-brand-primary);
  text-decoration: none;
}

/* ==========================================================================
   Block Pattern: Chat Bubble  (.p-chat-bubble)
   ========================================================================== */
.entry-content .p-chat-bubble {
  margin-bottom: var(--space-6)!important;
}
.entry-content .p-chat-bubble__meta > .wp-block-group__inner-container {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 1rem);
}

.entry-content .p-chat-bubble--right .p-chat-bubble__meta > .wp-block-group__inner-container {
  flex-direction: row-reverse;
}

.entry-content .p-chat-bubble--left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 1rem);
}

.entry-content .p-chat-bubble__icon-wrap {
  flex-shrink: 0;
}

.entry-content .p-chat-bubble__icon-wrap > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry-content .p-chat-bubble__icon {
  width: 80px;
  flex-shrink: 0;
  margin: 0 !important;
}

.entry-content .p-chat-bubble__icon img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border-default);
  aspect-ratio: 1 / 1;
}

.entry-content .p-chat-bubble__name {
  font-size: var(--font-size-xs, 0.75rem);
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0;
}

.entry-content .p-chat-bubble__body {
  position: relative;
  background-color: var(--color-surface-base);
  padding: 1.5rem;
  border-radius: var(--radius-md, 8px);
  margin: 0 !important;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.entry-content .p-chat-bubble__body::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--color-surface-base) transparent transparent;
}

.entry-content .p-chat-bubble--right .p-chat-bubble__body {
  background-color: var(--color-bg-section-alt);
}

.entry-content .p-chat-bubble--right .p-chat-bubble__body::before {
  left: auto;
  right: -10px;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--color-bg-section-alt);
}

.entry-content .p-chat-thread .p-chat-bubble--left {
  margin-bottom: 0.5em;
}

@media (max-width: 767px) {
  .entry-content .p-chat-bubble--left,
  .entry-content .p-chat-bubble--right {
    gap: var(--space-5, 0.75rem);
  }

  .entry-content .p-chat-bubble__icon,
  .entry-content .p-chat-bubble__icon img {
    width: 60px;
    height: 60px;
  }

  .entry-content .p-chat-bubble__body {
    padding: var(--space-4, 1rem);
  }
}

/* ==========================================================================
   Block Pattern: Flow Steps  (.p-flow)
   ========================================================================== */

.entry-content .p-flow {
  margin: 2em auto;
  counter-reset: p-flow-counter;
}

.entry-content .p-flow__step {
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: 2rem;
  display: flow-root;
}

.entry-content .p-flow__step::before {
  counter-increment: p-flow-counter;
  content: counter(p-flow-counter, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-bold);
  font-family: 'Helvetica', sans-serif;
  text-align: center;
  line-height: 2.5rem;
  border-radius: 50%;
  z-index: 1;
}

.entry-content .p-flow__step::after {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: 1.25rem;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background-color: var(--color-border-default);
  z-index: 0;
}

.entry-content .p-flow__step:last-child {
  padding-bottom: 0;
}

.entry-content .p-flow__step:last-child::after {
  display: none;
}

.entry-content .p-flow__step-title {
  margin-top: 0!important;
  margin-bottom: 1rem;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.entry-content .p-flow__step-desc {
  margin-bottom: 0;
  font-size: var(--font-size-base, 0.95rem);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.entry-content .p-flow__item {
  width: 100%;
}

@media (max-width: 767px) {
  .entry-content .p-flow__item figure.alignright,
  .entry-content .p-flow__item figure.alignleft {
    float: none;
    margin-left: 0;
    margin-bottom: 1.5em;
    max-width: 100%;
  }
}

/* ==========================================================================
   Block Pattern: Accordion / Q&A  (.p-accordion / .p-qa)
   ========================================================================== */

.wp-block-details[open].p-qa,
.wp-block-details[open].p-accordion {
  box-shadow: none;
}

.wp-block-details.p-qa,
.wp-block-details.p-accordion {
  border: 1px solid var(--color-border-default);
}

.wp-block-details.p-qa .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-details.p-accordion .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100% !important;
}

.wp-block-details.p-qa > summary,
.wp-block-details.p-accordion > summary {
  background-color: var(--color-surface-card);
padding: var(--space-4);
  font-weight: var(--font-weight-bold);
  position: relative;
}

.wp-block-details.p-accordion > summary::marker {
color:var(--color-brand-accent);
}
.p-accordion__body,
.wp-block-group.p-qa__a{
padding: var(--space-4);
background-color: var(--color-surface-card);
}
.wp-block-details.p-qa > summary::marker{
  content:none;
}

.p-accordion__body p:last-of-type,
.p-qa__body p:last-of-type {
  margin-bottom: 0;
}

.wp-block-details.p-qa > summary:hover,
.wp-block-details.p-accordion > summary:hover {
  background-color: var(--color-brand-secondary-soft);
}

.wp-block-details.p-qa > summary {
  padding-left: var(--space-10);
}

.wp-block-details.p-qa > summary::before {
  content: "Q";
  position: absolute;
  left:var(--space-4);
  top: 0.6em;
  font-size: 130%;
  color: var(--color-brand-accent);
}

.p-qa__label--a {
  font-size: 110%;
  font-weight: var(--font-weight-bold);
  margin-bottom:0.5em!important;
}

.p-qa__label--a span {
  color: var(--color-error);
}
.wp-block-details.p-accordion,
.wp-block-details.p-qa{
  margin-bottom: var(--space-4);
  margin-top: var(--space-4);
}

/* ==========================================================================
   Block Pattern: Summary Box  (.p-summary-box)
   ========================================================================== */

.p-summary-box {
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface-card, var(--color-surface-soft));
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}

.p-summary-box__header {
  margin-bottom: var(--space-3) !important;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  font-family: var(--font-family-heading);
}

.p-summary-box__header > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  gap:0;
}
.p-summary-box .wp-block-list{
padding-left: 0em;
}

.p-summary-box__title {
  margin: 0 !important;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}

.p-summary-box .wp-block-list {
  margin: 0 !important;
}
.p-summary-box .alignleft.wp-block-icon{
float: none;
    margin-right: 0.5em;
    margin-left: 0px;
}

.wp-block-group.p-point-box {
    border-bottom: 1px solid var(--color-border-default);
    margin-bottom: var(--space-8);
    margin-top: var(--space-8);
    padding-bottom: var(--space-4);
}

.p-point-box-title{
  color: var(--color-brand-accent);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  font-family: var(--font-family-heading);
}
.p-point-box-title .wp-block-paragraph{
margin-bottom: var(--space-2);
}
.p-point-box .wp-block-list{
line-height: var(--line-height-tight);
}

/* ==========================================================================
   Block Pattern: full Box  (.p-breakout)
   ========================================================================== */
.p-breakout {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-10) 0;
  margin: 0 auto;
}

.single .p-breakout__inner {
  max-width: 900px;
  width: calc(100% - var(--layout-container-padding) - var(--layout-container-padding));
  margin-inline: auto;
}

.page .p-breakout__inner,.archive .p-breakout__inner {
  max-width: 1200px;
  width: calc(100% - var(--layout-container-padding) - var(--layout-container-padding));
  margin-inline: auto;
}

.p-page-section--subtle{
  background-color: var(--color-bg-section);
}
.p-page-section--alt{
  background-color: var(--color-bg-section-alt);
}
.p-page-section--cta{
  background-color: var(--color-brand-accent-soft);
}

.entry-content .p-breakout__inner h2{
margin-top: 0;
}
.entry-content .p-breakout__inner p:last-of-type{
margin-bottom: 0;
}
@media (min-width: 1024px) {
.p-breakout {
padding: var(--space-16) 0;
}
}
/* ==========================================================================
   Block Pattern: author Box  (.p-author-box)
    single.php で記事下に出力される著者情報ボックス。
   ========================================================================== */
.p-author-box{
background-color: var(--color-surface-card);
border: 1px solid var(--color-border-default);
padding: var(--space-8);
margin: var(--space-12) 0;
}
.p-author-box-img img{
  border-radius: var(--radius-circle);
  aspect-ratio: 1/1;
  width: 100px;
  height: auto;
  margin-inline: auto;
  object-fit: cover;
}
@media (min-width: 1024px) {
.p-author-box-img img{
  width: 100%;
}
  }

.p-author-box .wp-block-social-links{
margin-bottom: 0;
padding-left: 0;
}
.p-author-box .p-author-box-title{
  color: var(--color-brand-primary);
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-4);
    line-height: 1;
    font-family: var(--font-family-heading);
}
.p-author-box .p-author-box-name{
margin-bottom: var(--space-0);

}
.p-author-box .p-author-box-txt{
font-size: var(--font-size-sm);
}
.p-author-box .p-author-box-txt p:last-of-type{
margin-bottom: 0;}

.p-author-box .wp-block-columns{
  margin-bottom:0;
}

/* ==========================================================================
   Block Pattern: sitemap  (.sitemap)

   ========================================================================== */

.sitemap__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .sitemap__list {
    columns: 2;
    column-gap: var(--space-8, 2rem);
  }
}

@media (min-width: 1024px) {
  .sitemap__list {
    columns: 3;
  }
}

.sitemap__item {
  break-inside: avoid;
}

.sitemap__item::marker {
  color: var(--color-brand-primary);
}

.sitemap__item a {
  color: var(--color-text-primary);
}

/* ==========================================================================
   single
   ========================================================================== */
.c-entry-meta {
      margin:var(--space-12) 0 var(--space-4) 0;
      border-top: 1px solid var(--color-border-default);
      padding-top: var(--space-4);
      color: var(--color-text-muted);
}
.c-entry-meta .c-entry-meta__item{
display: flex;
gap: 12px;
margin-bottom: var(--space-2);
}
.c-label-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-1);
}
.c-label-group a{
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-primary);
  margin-right: var(--space-1);
  line-height: 1;
}
.l-page__meta {
    margin-bottom: var(--space-10);
    color: var(--color-text-muted);
}
span.c-entry-meta__label {
    line-height: 1;
    font-size: var(--font-size-xs, 0.75rem);
}
.c-entry-meta__label:after{
  content: ':';
}
.l-page__meta span{
margin-right: var(--space-1);
}
.l-page__date-modified{
font-size: var(--font-size-xs, 0.75rem);
}
.l-page__thumbnail{
  margin-bottom: var(--space-8);
}
.l-page__thumbnail img{
margin-inline: auto;
}
.wp-block-image .aligncenter>figcaption{
  display: block;
}

/* ==========================================================================
   globalnav
   ========================================================================== */

   html.is-menu-open,
body.is-menu-open {
  overflow: hidden;
}

.p-menuDialog .sub-menu[hidden] {
  display: none;
}

.p-menuDialog__submenuToggle[aria-expanded="true"]::before {
  content: "−";
}

.p-menuDialog__submenuToggle[aria-expanded="false"]::before {
  content: "+";
}

.p-header__menuButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
}

.p-header__menuLine {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-text-primary);
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

@media (max-width: 1023px) {
.p-header__nav{
display: none;
}
}
@media (min-width: 1024px) {
  .p-header__menuButton {
    display: none;
  }

  /* PC: 横並びナビ */
  .p-header__nav-list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .p-header__nav-list > li {
    position: relative;
    display: flex;
    align-items: stretch;
  }

  .p-header__nav-list > li > a {
    display: flex;
    align-items: center;
/*    padding-inline: var(--space-4); */
    white-space: nowrap;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition-color);
    font-weight: var(--font-weight-bold);
  }

  .p-header__nav-list > li > a:hover,
  .p-header__nav-list > li:focus-within > a {
    color: var(--color-brand-primary);
  }

  /* PC: ホバーでスライドアウト */
  .p-header__nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown, 200);
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    min-width: var(--nav-submenu-min-width, 12rem);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--space-1)));
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-fast);
  }

  .p-header__nav-list li:hover > .sub-menu,
  .p-header__nav-list li:focus-within > .sub-menu {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .p-header__nav-list .sub-menu a {
    display: block;
    padding: var(--space-1) var(--space-4);
    white-space: nowrap;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition-color);
    font-size: 14px;
    min-height: 1rem;
    font-family: var(--font-family-body);
    text-align: left;
  }

  .p-header__nav-list .sub-menu a:hover {
    color: var(--color-brand-primary);
    background: var(--color-brand-primary-soft);
  }
  .p-header__megamenu-list a{
    font-family: var(--font-family-body)!important;
  }
.p-header__megamenu-col a.p-header__megamenu-heading{
    font-weight: var(--font-weight-bold);
    display: block;
    padding:0 0 var(--space-2) 0;
    min-height:1em;
    border-bottom: 1px solid var(--color-border-default);
    letter-spacing: var(--letter-spacing-wider);
  }
}

/* ==========================================================================
   Menu Dialog  (.p-menuDialog / .p-menuDialog--*)
   menu-dialog.js が showModal() / close() を制御。
   スタイルはモディファイアで切り替える。
   ========================================================================== */

.p-menuDialog {
  border: none;
  padding: var(--space-16) var(--space-8) var(--space-8) var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  z-index: var(--z-dialog, 500);
}

.p-menuDialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.p-menuDialog__close:hover {
  color: var(--color-brand-primary);
}

.p-menuDialog__close span {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.p-menuDialog__close span::before,
.p-menuDialog__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-circle);
}

.p-menuDialog__nav-list li{
position: relative;
}

.p-menuDialog__submenuToggle{
  padding: var(--space-1) var(--space-4);
position:absolute;
right:0;
}


.p-menuDialog__close span::before {
  transform: translateY(-50%) rotate(45deg);
}

.p-menuDialog__close span::after {
  transform: translateY(-50%) rotate(-45deg);
}

.p-menuDialog::backdrop {
  background: var(--color-overlay, rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.p-menuDialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .p-menuDialog[open]::backdrop {
    opacity: 0;
  }
}

/* drawerRight — 右からスライドイン */
.p-menuDialog--drawerRight {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--nav-drawer-width, 320px);
  max-width: 90vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}

.p-menuDialog--drawerRight[open] {
  transform: translateX(0);
}

@starting-style {
  .p-menuDialog--drawerRight[open] {
    transform: translateX(100%);
  }
}

/* drawerTop — 上からスライドイン */
.p-menuDialog--drawerTop {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  /* max-height: 90dvh;*/
  margin: 0;
  transform: translateY(-100%);
  transition: transform var(--transition-normal);
}

.p-menuDialog--drawerTop[open] {
  transform: translateY(0);
}

@starting-style {
  .p-menuDialog--drawerTop[open] {
    transform: translateY(-100%);
  }
}

/* fullscreen — フェードイン */
.p-menuDialog--fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.p-menuDialog--fullscreen[open] {
  opacity: 1;
}

@starting-style {
  .p-menuDialog--fullscreen[open] {
    opacity: 0;
  }
}

/* クローズアニメーション — JS が .is-closing を付与し transitionend 後に close() */
.p-menuDialog.is-closing::backdrop {
  opacity: 0;
}

.p-menuDialog--drawerRight.is-closing {
  transform: translateX(100%);
}

.p-menuDialog--drawerTop.is-closing {
  transform: translateY(-100%);
}

.p-menuDialog--fullscreen.is-closing {
  opacity: 0;
}

/* ==========================================================================
   Post Pager  (.l-page__pager / .l-page__pager-prev / .l-page__pager-next)
   single.php の前後記事ナビゲーション
   ========================================================================== */

.l-page__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-block-start: var(--space-10);
}

.l-page__pager-prev,
.l-page__pager-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-0);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
  transition:
    color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-fast);
}
/*
.l-page__pager-prev{
  border-left: 4px solid var(--color-border-default);
}
.l-page__pager-next{
  border-right: 4px solid var(--color-border-default);
}
  */
.l-page__pager-prev::before,
.l-page__pager-next::before {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  letter-spacing: var(--letter-spacing-wide);
}

.l-page__pager-prev::before {
  content: "← 前の記事";
}

.l-page__pager-next {
  text-align: right;
}

.l-page__pager-next::before {
  content: "次の記事 →";
}


@media (max-width: 767.98px) {
  .l-page__pager {
    grid-template-columns: 1fr;
  }

  .l-page__pager-next {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-page__pager-prev:hover,
  .l-page__pager-next:hover {
    transform: none;
  }
}

/* ==========================================================================
   WP Block: Page List / Navigation Submenu
   ========================================================================== */

.widget_block .wp-block-page-list a {
  color: var(--color-text-primary);
}

.widget_block .wp-block-navigation__submenu-container .wp-block-pages-list__item::before {
  content: "-";
}
.widget_block .wp-block-navigation__submenu-container{
  padding-left: var(--space-4);
  margin: var(--space-2) 0;
  font-size: var(--font-size-sm);
}
.widget_block .wp-block-pages-list__item{
  margin-bottom: var(--space-1);
}
/* ==========================================================================
  footer
   ========================================================================== */
   .p-footer{
/* margin-top: var(--space-12);*/
padding-bottom: var(--space-2);
   }
   .p-footer__bottom{
text-align: center;
margin-top: var(--space-4);
   }
   @media (min-width: 1024px) {
   .p-footer{
   padding-bottom:100px;
  }
  }

/* ==========================================================================
   Archive Grid  (.l-archive__grid)
   PC（≥1024px）で4カラム表示
   ========================================================================== */

@media (min-width: 768px) {
  .l-archive__grid:has(.c-card) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

    .c-entry{
margin-bottom: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .l-archive__grid:has(.c-card) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .l-content--one-column .l-archive__grid:has(.c-card) {
  grid-template-columns: repeat(4, 1fr);
  }
}
.c-entry__body {
    width: 100%;
}
.c-card__title, .c-entry__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-card__cats,.c-entry__cats{
    font-size:var(--font-size-xs);
}
.c-card__cats a{
      padding:2px var(--space-3);
    background:var(--color-brand-primary-soft);
    color:var(--color-brand-primary);
}

.c-entry__cats a{
      padding:2px var(--space-3);
    background:var(--color-brand-primary-soft);
    color:var(--color-brand-primary);
    margin-bottom: var(--space-2);
    display: inline-block;
}

h2.c-card__title {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
line-height: var(--line-height-normal);
font-size: var(--font-size-fluid-sm);
font-family: var(--font-family-heading);
}
h2.c-entry__title{
  margin-top: var(--space-0);
  margin-bottom: var(--space-2);
line-height: var(--line-height-normal);
font-size: var(--font-size-fluid-sm);
font-family: var(--font-family-heading);
}

h2.c-card__title a, h2.c-entry__title a{
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}
p.c-card__text,p.c-entry__text{
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-wide);
}
.c-card__image img,.c-entry__image img{
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.c-card__image{
  margin-bottom: var(--space-2);
}
.c-card__date,.c-entry__date{
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
      text-align: right;
    display: block;
}
.c-entry{
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  border-bottom: 1px dotted var(--color-border-default);
    padding-bottom: var(--space-6);
}
.c-entry__image{
flex-shrink: 0;
}
.c-entry__image img{
width: 200px;
}

@media (max-width: 767px) {
  .c-card:has(.c-card__image) {
    display: grid;
    grid-template-columns: 7rem 1fr;
    align-items: start;
  }

  .c-card:has(.c-card__image) .c-card__image {
    grid-row: 1 / -1;
  }
}
@media (max-width: 1023px) {
  .c-card__text,p.c-entry__text {
    display: none;
  }
  h2.c-card__title{
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}
.c-card:has(.c-card__image){
    gap:0 var(--space-4);
}
.c-entry__image img{
width: 100px;
}
.c-card,.c-entry{
  margin-bottom: var(--space-4);
}
}

/* ==========================================================================
   Taxonomy Filter  (.c-taxonomy-filter / .c-taxonomy-filter__*)
   home.php / archive.php のカテゴリ・タクソノミーフィルターナビ。
   JS不要。リンクベースでSEO・アクセシビリティ対応。
   ========================================================================== */

.c-taxonomy-filter {
  margin-bottom: var(--space-8);
}

.c-taxonomy-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-taxonomy-filter__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}
.c-taxonomy-filter__link:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  text-decoration: none;
}

.c-taxonomy-filter__link.is-active {
  border-color: var(--color-brand-primary);
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

/* ==========================================================================
   Archive Pager  (.l-archive__pager)
   the_posts_pagination() で出力されるアーカイブページネーション
   home.php / archive.php / search.php で共通使用
   ========================================================================== */

.l-archive__pager {
  margin-block-start: var(--space-10);
}

.l-archive__pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.l-archive__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border-default);
  color: var(--color-brand-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.l-archive__pager .page-numbers:hover {
  border-color: var(--color-brand-primary);
  background-color: var(--color-brand-primary-soft);
  text-decoration: none;
}

.l-archive__pager .page-numbers.current {
  border-color: var(--color-brand-primary);
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}

.l-archive__pager .page-numbers.dots {
  border-color: transparent;
  pointer-events: none;
  color: var(--color-text-muted);
}

/* ==========================================================================
   404 
   ========================================================================== */

   .l-404{
text-align: center;
padding: var(--space-16) var(--space-4);
   }
   .l-404__text:nth-child(2){
    margin-bottom: var(--space-8);
   }

.l-404 .search-form {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.l-404 .search-form label {
  flex: 1;
  min-width: 0;
}

.l-404 .search-form .search-field {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.l-404 .search-form .search-field:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-color: var(--color-brand-primary);
}

.l-404 .search-form .search-submit {
  padding: var(--space-2) var(--space-5);
  border: none;
  background: var(--color-brand-secondary);
  color: var(--color-text-on-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.l-404 .search-form .search-submit:hover {
  background: var(--color-brand-secondary-hover);
}

/* ==========================================================================
   search results
   ========================================================================== */
   .l-archive__count{
    border-bottom: 1px dotted var(--color-border-default);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
   }
/* Fade In */
.fadein {
  opacity: 0;
  transform: translate(0, 45px);
  transition: all 1s;
}

.effect-scroll.fadein {
  opacity: 1;
  transform: translate(0, 0);
}

/* Slide Up */
.slideup {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s;
}

.effect-scroll.slideup {
  opacity: 1;
  transform: translateY(0);
}

/* Slide In from Left */
.slidein-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s;
}

.effect-scroll.slidein-left {
  opacity: 1;
  transform: translateX(0);
}

/* Slide In from Right */
.slidein-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 1s;
}

.effect-scroll.slidein-right {
  opacity: 1;
  transform: translateX(0);
}

/* Scale Up */
.scaleup {
  opacity: 0;
  transform: scale(0.9);
  transition: all 1s;
}

.effect-scroll.scaleup {
  opacity: 1;
  transform: scale(1);
}

/* Rotation */
.rotatein {
  opacity: 0;
  transform: rotate(-5deg) scale(0.95);
  transition: all 1s;
}

.effect-scroll.rotatein {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Animation Delay Utilities */
.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-400 {
  transition-delay: 0.4s;
}

.delay-500 {
  transition-delay: 0.5s;
}