/*
Theme Name: Soara Static
Theme URI: http://soara.localhost/
Author: Codex
Description: WordPress theme converted from the static Soara HTML.
Version: 1.0.0
*/

      :root {
        color-scheme: light;
        --bg: #f3f6ef;
        --surface: #fffdf8;
        --surface-soft: #e8f0e5;
        --ink: #22312c;
        --muted: #68736d;
        --line: #dce4d7;
        --line-strong: #c7d5c7;
        --teal: #2f7657;
        --teal-dark: #18533e;
        --teal-soft: #e5f0e8;
        --wine: #557a67;
        --wine-soft: #edf4ee;
        --gold: #b08b4f;
        --gold-soft: #f5ead6;
        --violet: #607769;
        --shadow: 0 24px 58px rgba(25, 50, 40, 0.1);
        --radius: 8px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        overflow-x: hidden;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background:
          linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(243, 246, 239, 0.8) 560px),
          var(--bg);
        color: var(--ink);
        font-family:
          -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic",
          "Noto Sans JP", "Segoe UI", sans-serif;
        font-size: 16px;
        letter-spacing: 0;
        line-height: 1.6;
      }

      a {
        color: inherit;
      }

      button,
      input,
      select,
      textarea {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      img {
        display: block;
        max-width: 100%;
      }

      .app-header {
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid rgba(209, 220, 206, 0.82);
        background: rgba(255, 253, 248, 0.94);
        backdrop-filter: blur(18px);
        box-shadow: 0 10px 28px rgba(28, 61, 48, 0.045);
      }

      .header-inner {
        width: min(1460px, calc(100% - 64px));
        min-height: 84px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        min-width: max-content;
        text-decoration: none;
      }

      .brand-mark {
        position: relative;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(176, 139, 79, 0.58);
        border-radius: 999px;
        background:
          linear-gradient(90deg, transparent 48%, rgba(47, 118, 87, 0.75) 49% 51%, transparent 52%),
          linear-gradient(0deg, transparent 48%, rgba(176, 139, 79, 0.62) 49% 51%, transparent 52%),
          radial-gradient(circle, rgba(47, 118, 87, 0.11), transparent 58%);
      }

      .brand-mark::after {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid rgba(176, 139, 79, 0.66);
        transform: rotate(45deg);
      }

      .brand strong {
        display: block;
        color: var(--teal-dark);
        font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
        font-size: clamp(2.15rem, 2.65vw, 2.85rem);
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 0.9;
      }

      .brand-copy {
        display: grid;
        gap: 4px;
      }

      .brand-tagline {
        color: #44544e;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: clamp(0.78rem, 0.95vw, 0.92rem);
        font-weight: 500;
        line-height: 1;
      }

      .top-nav {
        display: flex;
        align-items: center;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .top-nav::-webkit-scrollbar {
        display: none;
      }

      .nav-button,
      .ghost-button,
      .primary-button,
      .secondary-button,
      .icon-button {
        min-height: 40px;
        border: 1px solid transparent;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        text-decoration: none;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          color 160ms ease,
          transform 160ms ease;
        white-space: nowrap;
      }

      .nav-button {
        background: transparent;
        color: #40524a;
        border-left: 1px solid rgba(196, 211, 193, 0.75);
        border-radius: 0;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: 0.96rem;
        font-weight: 500;
        min-width: 108px;
        min-height: 34px;
        padding: 0 24px;
        position: relative;
      }

      .nav-button[aria-current="page"] {
        background: transparent;
        color: var(--teal-dark);
        border-color: rgba(196, 211, 193, 0.75);
      }

      .nav-button[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: -9px;
        height: 2px;
        background: var(--teal);
      }

      .primary-button {
        background: var(--teal);
        color: #fff;
        border-color: var(--teal);
        font-weight: 700;
      }

      .primary-button:hover {
        background: var(--teal-dark);
      }

      .secondary-button {
        background: var(--surface);
        color: var(--teal-dark);
        border-color: var(--line-strong);
        font-weight: 700;
      }

      .ghost-button {
        background: transparent;
        color: var(--teal-dark);
        border-color: var(--line-strong);
      }

      .icon-button {
        width: 40px;
        padding: 0;
        background: var(--surface);
        border-color: var(--line-strong);
      }

      .menu-button {
        display: none;
        width: 52px;
        height: 42px;
        border: 0;
        background: transparent;
        color: var(--teal-dark);
        padding: 0;
      }

      .menu-button span {
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 999px;
        background: currentColor;
        transition:
          opacity 160ms ease,
          transform 160ms ease;
      }

      .menu-button span + span {
        margin-top: 12px;
      }

      .icon {
        width: 18px;
        height: 18px;
        flex: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }

      .shell {
        width: min(1320px, calc(100% - 40px));
        margin: 0 auto 56px;
      }

      .view {
        display: none;
      }

      .view.active {
        display: block;
      }

      .view.active:not(#view-list) {
        padding-top: 28px;
      }

      .top-hero {
        display: grid;
        grid-template-columns: minmax(520px, 0.9fr) minmax(560px, 1fr);
        grid-template-areas: "copy gallery";
        align-items: center;
        column-gap: clamp(28px, 4vw, 72px);
        min-height: 720px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: clamp(48px, 5vw, 82px) max(40px, calc((100vw - 1500px) / 2 + 40px));
        border-bottom: 1px solid rgba(209, 220, 206, 0.78);
        background:
          linear-gradient(90deg, rgba(255, 253, 248, 0.98), rgba(238, 244, 235, 0.8)),
          linear-gradient(135deg, rgba(250, 251, 244, 0.96), rgba(232, 240, 229, 0.76));
        overflow: hidden;
        position: relative;
      }

      .hero-copy {
        grid-area: copy;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        display: grid;
        align-content: center;
        gap: 24px;
        position: relative;
        z-index: 2;
      }

      .hero-copy h1 {
        margin: 0;
        overflow-wrap: anywhere;
        max-width: min(820px, 100%);
        color: #263932;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        --hero-title-default-size: clamp(3rem, 4.1vw, 4.7rem);
        font-size: var(--hero-title-size, var(--hero-title-default-size));
        font-weight: 500;
        line-height: 1.23;
      }

      .hero-title-line {
        display: block;
        max-width: 100%;
        white-space: nowrap;
      }

      .hero-copy h1 .accent {
        color: var(--teal-dark);
      }

      .hero-copy p {
        margin: 0;
      }

      .hero-copy .eyebrow {
        width: min(100%, 560px);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        color: #42554d;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: clamp(0.95rem, 1.28vw, 1.18rem);
        font-weight: 500;
        letter-spacing: 0.08em;
      }

      .hero-copy .eyebrow::before,
      .hero-copy .eyebrow::after {
        content: "";
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg, transparent, rgba(176, 139, 79, 0.55), transparent);
      }

      .hero-copy .eyebrow::before {
        max-width: 76px;
      }

      .hero-copy .eyebrow::after {
        max-width: 76px;
      }

      .hero-divider {
        width: min(100%, 590px);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 18px;
        color: var(--gold);
      }

      .hero-divider::before,
      .hero-divider::after {
        content: "";
        height: 1px;
        background: rgba(176, 139, 79, 0.34);
      }

      .hero-divider span {
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
        font-size: 1.34rem;
        line-height: 1;
      }

      .hero-lead {
        overflow-wrap: anywhere;
        max-width: min(590px, 100%);
        color: #53645d;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: clamp(1.02rem, 1.35vw, 1.23rem);
        line-height: 1.9;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        gap: 20px;
        position: relative;
        z-index: 3;
      }

      .hero-actions-mobile {
        display: none;
      }

      .hero-actions .primary-button,
      .hero-actions .secondary-button {
        min-width: min(290px, 100%);
        min-height: 76px;
        border-radius: 999px;
        border-color: rgba(176, 139, 79, 0.72);
        box-shadow: 0 18px 42px rgba(34, 68, 54, 0.08);
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: 1.12rem;
        font-weight: 500;
        letter-spacing: 0.06em;
      }

      .hero-gallery {
        grid-area: gallery;
        position: relative;
        z-index: 2;
        min-width: 0;
        max-width: 100%;
        display: grid;
        place-items: center;
        min-height: 620px;
      }

      .hero-art {
        display: block;
        width: min(100%, 820px);
      }

      .hero-art img {
        display: block;
        width: 100%;
        height: auto;
      }

      .search-panel {
        position: relative;
        z-index: 2;
        scroll-margin-top: 96px;
        margin: 28px auto 26px;
        border: 1px solid rgba(190, 204, 184, 0.72);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.97);
        box-shadow: var(--shadow);
        padding: 14px;
      }

      .search-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 0;
      }

      .search-panel.is-expanded .search-panel-head {
        margin-bottom: 14px;
      }

      .search-panel-toggle {
        width: 100%;
        border: 1px solid rgba(24, 83, 62, 0.2);
        border-radius: 14px;
        background:
          linear-gradient(135deg, rgba(247, 250, 244, 0.96), rgba(255, 253, 248, 0.98));
        box-shadow:
          0 10px 26px rgba(34, 68, 54, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.72);
        color: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 18px;
        text-align: left;
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
      }

      .search-panel-toggle:hover {
        border-color: rgba(24, 83, 62, 0.38);
        box-shadow:
          0 16px 34px rgba(34, 68, 54, 0.12),
          inset 0 0 0 1px rgba(255, 255, 255, 0.84);
        transform: translateY(-1px);
      }

      .search-panel-toggle:focus-visible {
        outline: 3px solid rgba(24, 83, 62, 0.22);
        outline-offset: 4px;
      }

      .search-panel-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .search-panel-title,
      .section-heading h2 {
        margin: 0;
        font-size: 1.28rem;
        font-weight: 700;
        letter-spacing: 0;
      }

      .search-panel-description,
      .section-heading p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 0.92rem;
      }

      .search-panel-status {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-shrink: 0;
      }

      .search-panel-action {
        min-height: 32px;
        border: 1px solid rgba(24, 83, 62, 0.28);
        border-radius: 999px;
        background: var(--wine);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 13px;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
      }

      .search-panel-action .when-expanded,
      .search-panel.is-expanded .search-panel-action .when-collapsed {
        display: none;
      }

      .search-panel.is-expanded .search-panel-action .when-expanded {
        display: inline;
      }

      .filter-chevron {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(24, 83, 62, 0.24);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        color: var(--wine);
        padding: 7px;
        transition: transform 160ms ease;
      }

      .search-panel.is-expanded .filter-chevron {
        transform: rotate(180deg);
      }

      .search-form-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(220px, 0.9fr);
        gap: 16px;
        align-items: end;
      }

      .finder-layout {
        display: block;
      }

      .filter-panel {
        position: static;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }

      .filter-head {
        display: none;
      }

      .filter-head h1 {
        margin: 0;
        font-size: 1.45rem;
        line-height: 1.25;
      }

      .filter-head p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .filter-body {
        padding: 0;
        display: grid;
        gap: 16px;
      }

      .field {
        display: grid;
        gap: 7px;
      }

      .field label,
      .field legend,
      .field-label {
        color: #38413e;
        font-size: 0.83rem;
        font-weight: 700;
      }

      .field input,
      .field select,
      .field textarea {
        width: 100%;
        min-height: 42px;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
        padding: 9px 11px;
        outline: none;
      }

      .field input::placeholder,
      .field textarea::placeholder,
      .soara-cf7-panel input::placeholder,
      .soara-cf7-panel textarea::placeholder {
        color: #adb8ae;
        opacity: 1;
      }

      .field textarea {
        min-height: 104px;
        resize: vertical;
      }

      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px rgba(15, 107, 97, 0.16);
      }

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

      .toolbar {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        align-items: center;
        margin-bottom: 18px;
      }

      .section-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 16px;
      }

      .section-actions {
        display: flex;
        align-items: end;
        justify-content: flex-end;
        gap: 12px;
      }

      .result-summary {
        color: var(--muted);
        min-width: 0;
        font-size: 0.92rem;
      }

      .result-summary strong {
        color: var(--ink);
        font-size: 1.08rem;
      }

      .sort-wrap {
        min-width: 180px;
      }

      .list-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
      }

      .profile-card {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: 0 16px 36px rgba(34, 68, 54, 0.075);
        overflow: hidden;
        display: grid;
        grid-template-columns: 38% minmax(0, 1fr);
      }

      .profile-visual {
        position: relative;
        min-height: 178px;
        background:
          linear-gradient(135deg, rgba(15, 107, 97, 0.2), rgba(85, 122, 103, 0.12)),
          var(--surface-soft);
      }

      .profile-visual img {
        width: 100%;
        height: 100%;
        min-height: 178px;
        object-fit: cover;
      }

      .profile-visual.is-fallback::after {
        content: attr(data-initials);
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--teal-dark);
        font-size: 2.2rem;
        font-weight: 800;
      }

      .profile-visual.is-fallback img {
        display: none;
      }

      .status-pill,
      .match-pill,
      .small-pill {
        min-height: 28px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 9px;
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
      }

      .match-pill {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        min-height: 0;
        display: block;
        padding: 5px 9px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--teal-dark);
        border: 1px solid rgba(185, 215, 200, 0.9);
        line-height: 1.35;
        overflow: hidden;
        overflow-wrap: anywhere;
        text-align: center;
        white-space: normal;
        z-index: 1;
      }

      .card-body {
        padding: 14px;
        display: grid;
        gap: 10px;
      }

      .card-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .profile-name {
        margin: 0;
        font-size: 1.02rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
      }

      .profile-name-link {
        color: inherit;
        text-decoration: none;
      }

      .profile-name-link:hover {
        color: var(--teal);
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .card-copy {
        margin: 0;
        color: #40524b;
        font-size: 0.86rem;
        min-height: 2.8em;
      }

      .meta-list,
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .small-pill {
        background: #f3f7f1;
        color: #4f665a;
        border: 1px solid #dce4d7;
      }

      .small-pill.wine {
        background: var(--wine-soft);
        border-color: #c8d8ce;
        color: #2d5b45;
      }

      .small-pill.gold {
        background: var(--gold-soft);
        border-color: #ebd6b5;
        color: #7d531b;
      }

      .card-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: center;
      }

      .search-submit {
        min-height: 48px;
        width: 100%;
        align-self: end;
      }

      .trust-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-top: 42px;
        padding: 24px 0 8px;
        border-top: 1px solid var(--line);
      }

      .trust-item {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
      }

      .trust-item .icon {
        width: 32px;
        height: 32px;
        color: var(--teal-dark);
      }

      .trust-item strong,
      .trust-item span {
        display: block;
      }

      .trust-item span {
        color: var(--muted);
        font-size: 0.84rem;
      }

      .empty-state {
        display: none;
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.72);
        padding: 28px;
        text-align: center;
      }

      .empty-state.visible {
        display: block;
      }

      .not-found-shell {
        min-height: 58vh;
      }

      .not-found-hero {
        max-width: 840px;
        margin: clamp(52px, 8vw, 104px) auto 28px;
        text-align: center;
      }

      .not-found-hero h1 {
        max-width: 760px;
        margin: 0 auto;
        color: var(--ink);
        font-size: clamp(1.9rem, 4vw, 3rem);
        line-height: 1.2;
      }

      .not-found-hero p:not(.eyebrow) {
        max-width: 680px;
        margin: 16px auto 0;
        color: var(--muted);
        line-height: 1.9;
      }

      .not-found-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 28px;
      }

      .not-found-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        max-width: 920px;
        margin: 0 auto clamp(48px, 7vw, 92px);
      }

      .not-found-links a {
        display: block;
        min-height: 124px;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
        color: inherit;
        text-decoration: none;
      }

      .not-found-links a:hover {
        border-color: var(--line-strong);
        transform: translateY(-1px);
      }

      .not-found-links span,
      .not-found-links strong {
        display: block;
      }

      .not-found-links span {
        margin-bottom: 10px;
        color: var(--muted);
        font-size: 0.84rem;
      }

      .not-found-links strong {
        color: var(--teal-dark);
        font-size: 1rem;
        line-height: 1.55;
      }

      @media (max-width: 820px) {
        .not-found-links {
          grid-template-columns: 1fr;
        }

        .not-found-links a {
          min-height: 0;
        }
      }


      .detail-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 16px;
      }

      .detail-bottom-actions {
        margin-top: 18px;
        margin-bottom: 0;
      }

      .detail-panel {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .detail-hero {
        display: grid;
        grid-template-columns: minmax(260px, 36%) minmax(0, 1fr);
        gap: 0;
      }

      .detail-photo {
        position: relative;
        min-height: 460px;
        background:
          linear-gradient(135deg, rgba(15, 107, 97, 0.24), rgba(176, 139, 79, 0.16)),
          var(--surface-soft);
      }

      .detail-photo img {
        width: 100%;
        height: 100%;
        min-height: 460px;
        object-fit: cover;
      }

      .detail-photo.is-fallback::after {
        content: attr(data-initials);
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--teal-dark);
        font-size: 2.8rem;
        font-weight: 800;
      }

      .detail-photo.is-fallback img {
        display: none;
      }

      .detail-copy {
        padding: 28px;
        display: grid;
        align-content: start;
        gap: 18px;
      }

      .eyebrow {
        margin: 0;
        color: var(--teal-dark);
        font-size: 0.86rem;
        font-weight: 800;
      }

      .detail-copy h1,
      .detail-copy h2 {
        margin: 0;
        font-size: clamp(1.85rem, 3vw, 2.65rem);
        line-height: 1.16;
        overflow-wrap: anywhere;
      }

      .detail-subtitle {
        margin: 0;
        color: var(--ink);
        font-size: clamp(1.08rem, 1.6vw, 1.38rem);
        font-weight: 700;
        line-height: 1.55;
      }

      .lead {
        margin: 0;
        color: #3d4542;
        font-size: 1.03rem;
      }

      .detail-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .stat-box {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px;
        background: #fafcfb;
        min-width: 0;
      }

      .stat-box span {
        display: block;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .stat-box strong {
        display: block;
        margin-top: 2px;
        font-size: 0.96rem;
        overflow-wrap: anywhere;
      }

      .detail-section-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
        gap: 24px;
        padding: 0 28px 28px;
      }

      .info-section {
        border-top: 1px solid var(--line);
        padding-top: 20px;
      }

      .info-section h3 {
        margin: 0 0 10px;
        font-size: 1rem;
      }

      .info-section p {
        margin: 0;
        color: #40524b;
      }

      .detail-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .detail-actions .primary-button {
        min-height: 48px;
        padding: 0 18px;
      }

      .cta-stack {
        display: grid;
        gap: 10px;
      }

      .external-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .toast {
        position: fixed;
        left: 50%;
        bottom: 22px;
        z-index: 40;
        transform: translate(-50%, 120%);
        opacity: 0;
        width: min(420px, calc(100% - 36px));
        border-radius: 8px;
        background: #18352b;
        color: #fff;
        padding: 12px 14px;
        box-shadow: var(--shadow);
        transition:
          transform 180ms ease,
          opacity 180ms ease;
        text-align: center;
      }

      .toast.visible {
        transform: translate(-50%, 0);
        opacity: 1;
      }

      .live-viewers {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 35;
        display: inline-flex;
        align-items: center;
        gap: 11px;
        max-width: min(430px, calc(100vw - 32px));
        border: 1px solid rgba(47, 118, 87, 0.46);
        border-radius: 999px;
        background: rgba(255, 252, 249, 0.94);
        color: #2f7657;
        padding: 13px 19px;
        box-shadow: 0 16px 38px rgba(28, 61, 48, 0.16);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.35;
        backdrop-filter: blur(10px);
      }

      .live-viewers strong {
        color: #2f7657;
        font-size: 1.1em;
      }

      .live-viewers-dot {
        position: relative;
        flex: 0 0 auto;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #b08b4f;
        box-shadow: 0 0 0 6px rgba(176, 139, 79, 0.14);
        animation: soaraLiveDotPulse 1.8s ease-in-out infinite;
      }

      .live-viewers-dot::after {
        position: absolute;
        inset: -7px;
        border: 1px solid rgba(176, 139, 79, 0.34);
        border-radius: 50%;
        content: "";
        animation: soaraLiveDotRing 1.8s ease-out infinite;
      }

      @keyframes soaraLiveDotPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(0.82);
        }
      }

      @keyframes soaraLiveDotRing {
        0% {
          opacity: 0.7;
          transform: scale(0.72);
        }
        100% {
          opacity: 0;
          transform: scale(1.45);
        }
      }

      .page-title {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
      }

      .page-title h1 {
        margin: 0;
        font-size: clamp(1.65rem, 3vw, 2.3rem);
        line-height: 1.2;
      }

      .page-title p {
        margin: 6px 0 0;
        color: var(--muted);
      }

      body.page:not(.home) .shell > .page-title,
      body.page:not(.home) .shell > .view > .page-title {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        margin: clamp(36px, 4.5vw, 64px) auto clamp(26px, 3.2vw, 42px);
        text-align: center;
      }

      body.page:not(.home) .shell > .page-title > div,
      body.page:not(.home) .shell > .view > .page-title > div {
        max-width: 780px;
        margin: 0 auto;
      }

      body.page:not(.home) .shell > .page-title p,
      body.page:not(.home) .shell > .view > .page-title p {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
      }

      body.page:not(.home) .shell > .page-title .eyebrow,
      body.page:not(.home) .shell > .view > .page-title .eyebrow {
        margin-bottom: 8px;
      }

      .form-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
        gap: 22px;
        align-items: start;
      }

      .form-layout-single {
        grid-template-columns: minmax(0, 820px);
        justify-content: center;
      }

      .form-panel,
      .side-note,
      .admin-panel {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .form-panel {
        padding: 22px;
      }

      .login-member-panel {
        position: relative;
        overflow: hidden;
        padding: clamp(24px, 3vw, 34px);
        border-color: rgba(176, 139, 79, 0.26);
        background:
          linear-gradient(135deg, rgba(252, 251, 245, 0.98), rgba(246, 250, 244, 0.94)),
          var(--surface);
      }

      .login-member-panel::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 5px;
        background: linear-gradient(90deg, var(--wine), var(--gold));
        opacity: 0.78;
      }

      .login-member-panel h2 {
        margin: 0 0 18px;
        color: #283832;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: clamp(1.28rem, 2vw, 1.62rem);
        font-weight: 600;
        line-height: 1.4;
      }

      .login-member-panel #loginform {
        display: grid;
        gap: 16px;
        margin: 0;
      }

      .login-member-panel #loginform p {
        margin: 0;
      }

      .login-member-panel #loginform label {
        display: grid;
        gap: 8px;
        color: #34463f;
        font-weight: 700;
      }

      .login-member-panel #loginform input[type="text"],
      .login-member-panel #loginform input[type="password"] {
        width: 100%;
        min-height: 56px;
        border: 1px solid rgba(196, 211, 193, 0.9);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.94);
        padding: 0 16px;
        color: var(--ink);
        font-size: 1rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      }

      .login-member-panel #loginform input[type="text"]:focus,
      .login-member-panel #loginform input[type="password"]:focus {
        border-color: var(--wine);
        outline: 0;
        box-shadow: 0 0 0 3px rgba(47, 118, 87, 0.14);
      }

      .login-member-panel .login-remember label {
        display: inline-flex !important;
        min-height: 42px;
        align-items: center;
        gap: 10px !important;
        border: 1px solid rgba(196, 211, 193, 0.72);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.68);
        padding: 10px 12px;
        color: #59685f;
        font-size: 0.94rem;
      }

      .login-member-panel .login-remember input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--wine);
      }

      .login-member-panel .login-submit {
        padding-top: 4px;
      }

      .login-member-panel .button-primary {
        width: 100%;
        min-height: 58px;
        border: 1px solid rgba(47, 118, 87, 0.35);
        border-radius: 999px;
        background: linear-gradient(135deg, #2f7657, #18533e);
        color: #fff;
        cursor: pointer;
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        box-shadow: 0 16px 32px rgba(24, 83, 62, 0.18);
      }

      .login-member-panel .button-primary:hover,
      .login-member-panel .button-primary:focus {
        background: linear-gradient(135deg, #368562, #154632);
        outline: 0;
      }

      .login-help-link {
        min-height: 0;
        margin-top: 18px;
        text-align: center;
      }

      .login-help-link a {
        color: var(--wine);
        font-weight: 700;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
      }

      .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .form-grid .wide {
        grid-column: 1 / -1;
      }

      .checkbox-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .check-tile {
        min-height: 42px;
        min-width: 0;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        color: #34413e;
        overflow-wrap: anywhere;
      }

      .check-tile input[type="checkbox"] {
        width: 18px;
        height: 18px;
        min-height: 0;
        flex: 0 0 18px;
        margin: 0;
        padding: 0;
        accent-color: var(--teal);
      }

      .consent-field {
        display: grid;
        gap: 8px;
      }

      .agreement-tile {
        align-items: flex-start;
        border-color: rgba(176, 139, 79, 0.34);
        background: linear-gradient(135deg, #fffdf6, #f6faf4);
        color: #34433d;
        line-height: 1.75;
      }

      .agreement-tile a {
        color: var(--teal-dark);
        font-weight: 700;
        text-underline-offset: 3px;
      }

      .field-help {
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.7;
      }

      .form-message {
        border-radius: var(--radius);
        padding: 14px 16px;
        margin-bottom: 16px;
        line-height: 1.7;
      }

      .form-message.error {
        border: 1px solid rgba(47, 118, 87, 0.32);
        background: rgba(47, 118, 87, 0.09);
        color: var(--teal-dark);
      }

      .side-note {
        padding: 18px;
        display: grid;
        gap: 14px;
      }

      .side-note h2 {
        margin: 0;
        font-size: 1.05rem;
      }

      .side-note ol {
        margin: 0;
        padding-left: 1.2em;
        color: #40524b;
      }

      .success-panel {
        display: none;
        border: 1px solid #b8d8d2;
        border-radius: var(--radius);
        background: var(--teal-soft);
        color: var(--teal-dark);
        padding: 16px;
        margin-top: 16px;
      }

      .success-panel.visible {
        display: block;
      }

      .legal-shell {
        display: grid;
        gap: 20px;
      }

      .legal-panel {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.94);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .legal-header {
        display: grid;
        gap: 12px;
        padding: clamp(28px, 4vw, 46px);
        border-bottom: 1px solid var(--line);
        background:
          linear-gradient(135deg, rgba(246, 250, 244, 0.9), rgba(255, 253, 248, 0.96)),
          radial-gradient(circle at 100% 0%, rgba(176, 139, 79, 0.16), transparent 34%);
      }

      body.page:not(.home) .legal-header {
        justify-items: center;
        padding-top: clamp(36px, 4.5vw, 58px);
        padding-bottom: clamp(30px, 4vw, 50px);
        text-align: center;
      }

      .legal-header h1 {
        margin: 0;
        color: var(--teal-dark);
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.2;
      }

      .legal-header p {
        max-width: 760px;
        margin: 0 auto;
        color: #52635c;
        font-size: 1.02rem;
        line-height: 1.9;
      }

      .legal-header span {
        color: var(--muted);
        font-size: 0.9rem;
      }

      .legal-body {
        display: grid;
        gap: 0;
        padding: 8px clamp(22px, 4vw, 46px) clamp(26px, 4vw, 42px);
      }

      .legal-section {
        padding: 24px 0;
        border-bottom: 1px solid rgba(209, 220, 206, 0.72);
      }

      .legal-section:last-child {
        border-bottom: 0;
      }

      .legal-section h2 {
        margin: 0 0 10px;
        color: #26342f;
        font-size: 1.15rem;
        line-height: 1.5;
      }

      .legal-section p {
        margin: 0 0 16px;
        color: #52635c;
        line-height: 2;
      }

      .legal-section p:last-child {
        margin-bottom: 0;
      }

      .legal-section ul {
        display: grid;
        gap: 10px;
        margin: 0 0 18px;
        padding: 0;
        list-style: none;
        color: #52635c;
        line-height: 1.9;
      }

      .legal-section li {
        position: relative;
        padding-left: 1.35em;
      }

      .legal-section li::before {
        content: "・";
        position: absolute;
        left: 0;
        color: var(--gold);
        font-weight: 700;
      }

      .legal-contact-box {
        margin-top: 28px;
        border: 1px solid rgba(176, 139, 79, 0.2);
        border-radius: var(--radius);
        background: rgba(248, 234, 214, 0.32);
        padding: 24px;
        display: grid;
        gap: 16px;
        justify-items: start;
      }

      .legal-contact-box p {
        margin: 0;
        color: #52635c;
        line-height: 1.9;
      }

      .listing-guide-shell {
        display: grid;
        gap: clamp(34px, 5vw, 58px);
        margin-bottom: 76px;
      }

      .listing-guide-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        gap: clamp(28px, 5vw, 68px);
        align-items: center;
        min-height: 520px;
        padding: clamp(34px, 5vw, 70px) 0 clamp(28px, 4vw, 52px);
        border-bottom: 1px solid rgba(209, 220, 206, 0.78);
      }

      .listing-guide-copy {
        display: grid;
        gap: 20px;
        max-width: 820px;
      }

      .listing-guide-copy h1 {
        margin: 0;
        color: #263932;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: clamp(2.35rem, 4vw, 3.6rem);
        font-weight: 500;
        line-height: 1.22;
      }

      .listing-guide-title-line {
        display: inline;
      }

      .listing-guide-copy p {
        max-width: 720px;
        margin: 0;
        color: #53645d;
        font-size: clamp(1rem, 1.3vw, 1.16rem);
        line-height: 1.9;
      }

      .listing-guide-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 4px;
      }

      .listing-guide-actions .primary-button,
      .guide-final-cta .primary-button {
        min-width: min(300px, 100%);
        min-height: 62px;
        border-radius: 999px;
      }

      .listing-preview-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.94);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .listing-preview-image {
        aspect-ratio: 4 / 3;
        background: var(--surface-soft);
      }

      .listing-preview-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .listing-preview-body {
        display: grid;
        gap: 12px;
        padding: 18px;
      }

      .listing-preview-body h2,
      .guide-section-head h2,
      .guide-final-cta h2 {
        margin: 0;
        color: #26342f;
        font-size: clamp(1.55rem, 2.8vw, 2.2rem);
        line-height: 1.28;
      }

      .listing-preview-body p {
        margin: 0;
        color: var(--muted);
        line-height: 1.75;
      }

      .listing-preview-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .guide-section {
        display: grid;
        gap: 22px;
        padding-top: clamp(26px, 4vw, 44px);
        border-top: 1px solid rgba(209, 220, 206, 0.82);
      }

      .guide-section-head {
        display: grid;
        gap: 8px;
        max-width: 760px;
      }

      .guide-large-text {
        max-width: 920px;
        margin: 0;
        color: #52635c;
        font-size: clamp(1.05rem, 1.5vw, 1.22rem);
        line-height: 2;
      }

      .guide-chip-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
      }

      .guide-chip-grid span {
        min-height: 48px;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.86);
        display: grid;
        place-items: center;
        padding: 10px;
        color: #403638;
        font-weight: 700;
        text-align: center;
      }

      .guide-card-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .guide-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.9);
        padding: 18px;
      }

      .guide-card h3,
      .guide-example-panel h3 {
        margin: 0 0 8px;
        color: var(--teal-dark);
        font-size: 1.04rem;
        line-height: 1.5;
      }

      .guide-card p,
      .guide-example-panel p {
        margin: 0;
        color: #5b6861;
        line-height: 1.8;
      }

      .guide-split-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 46px);
      }

      .guide-check-list {
        display: grid;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .guide-check-list li {
        position: relative;
        padding-left: 28px;
        color: #36463f;
        line-height: 1.8;
      }

      .guide-check-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.72em;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: var(--wine);
        box-shadow: 0 0 0 5px var(--wine-soft);
      }

      .guide-example-panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background:
          linear-gradient(135deg, rgba(247, 250, 244, 0.95), rgba(255, 253, 248, 0.95));
        padding: clamp(20px, 3vw, 30px);
      }

      .guide-flow-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .guide-flow-list li {
        min-height: 130px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.9);
        display: grid;
        align-content: start;
        gap: 14px;
        padding: 18px;
      }

      .guide-flow-list span {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: var(--wine);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 800;
      }

      .guide-flow-list strong {
        color: #26342f;
        line-height: 1.55;
      }

      .guide-faq-list {
        display: grid;
        gap: 10px;
      }

      .guide-faq-list details {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.9);
        padding: 0 18px;
      }

      .guide-faq-list summary {
        cursor: pointer;
        padding: 16px 0;
        color: #26342f;
        font-weight: 800;
        line-height: 1.5;
      }

      .guide-faq-list p {
        margin: 0;
        padding: 0 0 16px;
        color: #5b6861;
        line-height: 1.85;
      }

      .guide-final-cta {
        display: grid;
        justify-items: center;
        gap: 18px;
        padding: clamp(34px, 5vw, 58px) 20px;
        border-top: 1px solid rgba(209, 220, 206, 0.82);
        text-align: center;
      }

      .company-shell {
        display: grid;
        gap: clamp(34px, 5vw, 58px);
        margin-bottom: 72px;
      }

      .company-hero {
        display: grid;
        gap: 18px;
        max-width: 920px;
        padding: clamp(42px, 6vw, 82px) 0 clamp(28px, 4vw, 48px);
        border-bottom: 1px solid rgba(209, 220, 206, 0.82);
      }

      .company-hero h1,
      .company-section-head h2,
      .company-contact-section h2 {
        margin: 0;
        color: #26342f;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-weight: 500;
        line-height: 1.28;
      }

      .company-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.5rem);
      }

      .company-section-head h2,
      .company-contact-section h2 {
        font-size: clamp(1.55rem, 2.6vw, 2.25rem);
      }

      .company-hero p,
      .company-large-text,
      .company-contact-section p {
        margin: 0;
        color: #53645d;
        line-height: 2;
      }

      .company-hero p,
      .company-large-text {
        font-size: clamp(1rem, 1.35vw, 1.18rem);
      }

      .company-section {
        display: grid;
        gap: 22px;
        padding-top: clamp(24px, 4vw, 42px);
        border-top: 1px solid rgba(209, 220, 206, 0.82);
      }

      .company-section:first-of-type {
        border-top: 0;
        padding-top: 0;
      }

      .company-section-head {
        display: grid;
        gap: 8px;
        max-width: 760px;
      }

      .company-overview-section {
        grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(22px, 4vw, 44px);
      }

      .company-info-list {
        margin: 0;
        border-top: 1px solid var(--line-strong);
      }

      .company-info-list div {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 18px;
        padding: 18px 0;
        border-bottom: 1px solid var(--line);
      }

      .company-info-list dt {
        color: #18533e;
        font-weight: 800;
      }

      .company-info-list dd {
        margin: 0;
        color: #3d4d46;
        line-height: 1.85;
      }

      .company-info-list a {
        color: var(--teal-dark);
        font-weight: 700;
        text-underline-offset: 4px;
      }

      .company-policy-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .company-policy-grid article {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(255, 253, 248, 0.9);
        padding: 20px;
      }

      .company-policy-grid h3 {
        margin: 0 0 10px;
        color: var(--teal-dark);
        font-size: 1.04rem;
        line-height: 1.5;
      }

      .company-policy-grid p {
        margin: 0;
        color: #5b6861;
        line-height: 1.85;
      }

      .company-contact-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        border-top: 1px solid rgba(209, 220, 206, 0.82);
      }

      .company-contact-section > div {
        display: grid;
        gap: 10px;
        max-width: 760px;
      }

      .company-contact-section .primary-button {
        min-width: min(280px, 100%);
        min-height: 58px;
        border-radius: 999px;
      }

      .contact-shell {
        display: grid;
        gap: clamp(24px, 4vw, 40px);
        margin-bottom: 72px;
      }

      .contact-intro-panel,
      .contact-application-panel {
        border: 1px solid rgba(209, 220, 206, 0.86);
        border-radius: var(--radius);
        background:
          linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(246, 250, 244, 0.9)),
          var(--surface);
        box-shadow: var(--shadow);
      }

      .contact-intro-panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: clamp(20px, 3vw, 30px);
      }

      .contact-intro-panel h2,
      .contact-application-panel h2 {
        margin: 0;
        color: #26342f;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: clamp(1.35rem, 2.2vw, 1.85rem);
        font-weight: 500;
        line-height: 1.35;
      }

      .contact-intro-panel p,
      .contact-application-panel p {
        margin: 8px 0 0;
        color: #5b6861;
        line-height: 1.9;
      }

      .contact-intro-panel .secondary-button {
        flex: 0 0 auto;
        min-width: 190px;
      }

      .contact-form-layout {
        margin-top: 0;
      }

      .contact-form-panel {
        padding: clamp(22px, 3vw, 34px);
      }

      .contact-form-panel .form-grid {
        gap: 18px;
      }

      .contact-form-panel .field label {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 0.95rem;
      }

      .contact-form-panel .field label span {
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 500;
      }

      .contact-form-panel .field label em {
        border-radius: 999px;
        background: rgba(47, 118, 87, 0.1);
        padding: 2px 8px;
        color: var(--wine);
        font-size: 0.74rem;
        font-style: normal;
        font-weight: 800;
      }

      .contact-form-panel .field textarea {
        min-height: 180px;
      }

      .contact-form-panel .primary-button {
        width: min(280px, 100%);
        min-height: 56px;
        margin-top: 20px;
      }

      .soara-cf7-panel .wpcf7 {
        width: 100%;
      }

      .soara-cf7-panel form {
        margin: 0;
      }

      .soara-cf7-panel form p {
        margin: 0;
      }

      .soara-cf7-grid {
        display: grid;
        gap: 18px;
      }

      .soara-cf7-hidden {
        display: none;
      }

      .soara-cf7-grid > p {
        margin: 0;
      }

      .soara-cf7-grid br {
        display: none;
      }

      .soara-cf7-field {
        display: block;
        color: #38413e;
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1.6;
      }

      .soara-cf7-field > span {
        margin-left: 8px;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 500;
      }

      .soara-cf7-field em {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        border-radius: 999px;
        background: rgba(47, 118, 87, 0.1);
        padding: 2px 8px;
        color: var(--wine);
        font-size: 0.74rem;
        font-style: normal;
        font-weight: 800;
      }

      .soara-cf7-field .wpcf7-form-control-wrap {
        display: block;
        width: 100%;
        margin-top: 8px;
        color: inherit;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
      }

      .soara-cf7-field small {
        display: block;
        margin-top: 6px;
        color: #8b7f7f;
        font-size: 0.82rem;
        font-weight: 500;
        line-height: 1.6;
      }

      .soara-cf7-panel input:not([type="checkbox"]):not([type="submit"]),
      .soara-cf7-panel textarea {
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
        padding: 11px 13px;
        font: inherit;
        outline: none;
      }

      .soara-cf7-panel textarea {
        min-height: 168px;
        resize: vertical;
      }

      .soara-cf7-panel input:not([type="checkbox"]):not([type="submit"]):focus,
      .soara-cf7-panel textarea:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 3px rgba(15, 107, 97, 0.16);
      }

      .soara-cf7-field--locked input:not([type="checkbox"]):not([type="submit"]) {
        border-color: rgba(176, 139, 79, 0.28);
        background: #f4f7ef;
        color: #5f5555;
        cursor: default;
      }

      .soara-cf7-field--locked input:not([type="checkbox"]):not([type="submit"]):focus {
        border-color: rgba(176, 139, 79, 0.42);
        box-shadow: 0 0 0 3px rgba(176, 139, 79, 0.12);
      }

      div.soara-cf7-acceptance {
        border: 1px solid rgba(176, 139, 79, 0.34);
        border-radius: 8px;
        background: linear-gradient(135deg, #fffdf6, #f6faf4);
        padding: 12px 14px;
        color: #34433d;
        line-height: 1.8;
      }

      div.soara-cf7-acceptance .wpcf7-form-control-wrap,
      div.soara-cf7-acceptance .wpcf7-acceptance {
        display: block;
        border: 0;
        background: transparent;
        padding: 0;
        color: inherit;
        line-height: inherit;
      }

      div.soara-cf7-acceptance a {
        color: var(--teal-dark);
        font-weight: 800;
        text-underline-offset: 3px;
      }

      div.soara-cf7-acceptance .wpcf7-list-item {
        margin: 0;
      }

      div.soara-cf7-acceptance label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }

      div.soara-cf7-acceptance input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin-top: 0.35em;
        accent-color: var(--teal);
      }

      .soara-cf7-submit,
      .soara-cf7-submit p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin: 0;
      }

      .soara-cf7-submit .primary-button {
        min-height: 56px;
        min-width: min(280px, 100%);
        border-radius: 999px;
        cursor: pointer;
      }

      .soara-cf7-submit .primary-button.is-agreement-disabled,
      .form-panel .primary-button.is-agreement-disabled,
      .form-panel button[type="submit"].is-agreement-disabled,
      .form-panel input[type="submit"].is-agreement-disabled {
        background: #d8d2cf;
        border-color: #d8d2cf;
        color: #fff;
        box-shadow: none;
        cursor: not-allowed;
      }

      .soara-agreement-message {
        display: none;
        width: 100%;
        color: #8b3a2f;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.6;
      }

      .soara-agreement-message.is-visible {
        display: block;
      }

      .soara-cf7-panel .wpcf7-spinner {
        margin: 0;
      }

      .wpcf7 form .wpcf7-response-output {
        margin: 18px 0 0;
        border-radius: var(--radius);
        padding: 14px 16px;
        line-height: 1.7;
      }

      .wpcf7-not-valid-tip {
        margin-top: 6px;
        color: var(--wine);
        font-size: 0.86rem;
        font-weight: 700;
      }

      .contact-application-panel {
        display: grid;
        justify-items: center;
        gap: 10px;
        padding: clamp(28px, 4vw, 46px);
        text-align: center;
      }

      .contact-application-panel .primary-button {
        min-width: min(280px, 100%);
        margin-top: 10px;
      }

      .admin-panel {
        overflow: hidden;
      }

      .admin-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
        background: #fafcfb;
      }

      .admin-toolbar h2 {
        margin: 0;
        font-size: 1.05rem;
      }

      .admin-list {
        display: grid;
      }

      .admin-row {
        display: grid;
        grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1fr) minmax(110px, auto) minmax(170px, auto);
        gap: 12px;
        align-items: center;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
      }

      .admin-row:last-child {
        border-bottom: 0;
      }

      .admin-person {
        min-width: 0;
      }

      .admin-person strong,
      .admin-person span {
        display: block;
        overflow-wrap: anywhere;
      }

      .admin-person span,
      .admin-meta {
        color: var(--muted);
        font-size: 0.88rem;
      }

      .status-pill.pending {
        background: var(--gold-soft);
        color: #76501d;
      }

      .status-pill.approved {
        background: var(--teal-soft);
        color: var(--teal-dark);
      }

      .status-pill.revision {
        background: var(--wine-soft);
        color: #2d5b45;
      }

      .admin-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
      }

      .admin-actions .secondary-button,
      .admin-actions .ghost-button {
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.88rem;
      }

      @media (min-width: 921px) {
        .top-hero {
          min-height: 520px;
          padding-top: clamp(20px, 2.4vw, 34px);
          padding-bottom: clamp(24px, 2.6vw, 38px);
        }

        .hero-copy {
          align-content: start;
          align-self: start;
          gap: 16px;
          padding-top: clamp(4px, 0.8vw, 12px);
        }

        .hero-gallery {
          min-height: 460px;
        }

        .hero-art {
          width: min(90%, 620px);
        }

        .hero-lead {
          line-height: 1.72;
        }

        .hero-actions {
          margin-top: clamp(12px, 1.1vw, 18px);
        }

        .list-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .profile-card {
          grid-template-columns: minmax(210px, 52%) minmax(0, 1fr);
        }

        .profile-visual,
        .profile-visual img {
          min-height: 260px;
        }

        .profile-visual img,
        .detail-photo img {
          object-fit: contain;
        }
      }

      @media (max-width: 920px) {
        .header-inner {
          width: min(100% - 34px, 1320px);
          min-height: auto;
          padding: 10px 0;
          align-items: center;
          flex-wrap: wrap;
          gap: 12px;
        }

        .brand {
          gap: 10px;
        }

        .brand-copy {
          gap: 3px;
        }

        .brand-mark {
          width: 44px;
          height: 44px;
        }

        .brand-mark::after {
          inset: 8px;
        }

        .brand strong {
          font-size: 2.18rem;
        }

        .brand-tagline {
          font-size: 0.78rem;
        }

        .menu-button {
          display: grid;
          align-content: center;
          width: 36px;
          height: 28px;
          margin-left: auto;
          margin-top: 0;
        }

        .menu-button span {
          height: 2px;
        }

        .menu-button span + span {
          margin-top: 7px;
        }

        .menu-button[aria-expanded="true"] span:nth-child(1) {
          transform: translateY(9px) rotate(45deg);
        }

        .menu-button[aria-expanded="true"] span:nth-child(2) {
          opacity: 0;
        }

        .menu-button[aria-expanded="true"] span:nth-child(3) {
          transform: translateY(-9px) rotate(-45deg);
        }

        .top-nav {
          display: none;
        }

        .app-header.is-menu-open .top-nav {
          display: grid;
          grid-column: 1 / -1;
          grid-template-columns: 1fr;
          gap: 8px;
          width: 100%;
          margin-top: 2px;
          padding: 10px 0 4px;
          border-top: 1px solid rgba(196, 211, 193, 0.7);
          overflow: visible;
        }

        .nav-button {
          min-width: 0;
          min-height: 42px;
          justify-content: flex-start;
          padding: 0 14px;
          border: 1px solid rgba(196, 211, 193, 0.82);
          border-radius: 8px;
          background: rgba(255, 253, 248, 0.82);
          font-size: 0.96rem;
        }

        .nav-button:first-child {
          border-left: 1px solid rgba(196, 211, 193, 0.82);
        }

        .nav-button[aria-current="page"]::after {
          display: none;
        }

        .nav-button[aria-current="page"] {
          background: var(--wine-soft);
        }

        .top-hero {
          grid-template-columns: 1fr;
          grid-template-areas:
            "copy"
            "gallery"
            "actions";
          min-height: auto;
          padding: 36px 28px 42px;
          text-align: center;
          row-gap: 22px;
        }

        .hero-copy {
          width: 100%;
          justify-items: center;
          padding: 0;
          gap: 20px;
        }

        .hero-gallery {
          width: min(100%, 760px);
          min-height: auto;
          justify-self: center;
          margin-right: 0;
        }

        .hero-art {
          width: min(100%, 760px);
        }

        .hero-actions {
          justify-content: center;
          gap: 18px;
        }

        .hero-actions-desktop {
          display: none;
        }

        .hero-actions-mobile {
          display: flex;
          width: 100%;
          grid-area: actions;
        }

        .search-panel {
          margin-top: 20px;
        }

        .search-form-grid {
          grid-template-columns: 1fr 1fr;
        }

        .search-submit {
          grid-column: 1 / -1;
        }

        .finder-layout,
        .detail-hero,
        .detail-section-grid,
        .form-layout {
          grid-template-columns: 1fr;
        }

        .listing-guide-hero,
        .guide-split-section,
        .company-overview-section {
          grid-template-columns: 1fr;
        }

        .listing-guide-hero {
          min-height: auto;
          padding-top: 34px;
        }

        .listing-preview-card {
          max-width: 460px;
        }

        .guide-chip-grid,
        .guide-card-grid,
        .guide-flow-list,
        .company-policy-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .guide-example-panel {
          align-items: flex-start;
          flex-direction: column;
        }

        .company-contact-section {
          align-items: flex-start;
          flex-direction: column;
        }

        .contact-intro-panel {
          align-items: flex-start;
          flex-direction: column;
        }

        .filter-panel {
          position: static;
        }

        .filter-body {
          grid-template-columns: 1fr 1fr;
          align-items: end;
        }

        .list-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .trust-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .detail-photo,
        .detail-photo img {
          min-height: 340px;
        }

        .admin-row {
          grid-template-columns: 1fr 1fr;
        }

        .admin-actions {
          justify-content: flex-start;
        }
      }

      @media (max-width: 680px) {
        .shell,
        .header-inner {
          width: min(100% - 30px, 1320px);
        }

        .shell {
          margin-top: 0;
        }

        .header-inner {
          padding: 9px 0;
        }

        .brand-mark {
          width: 42px;
          height: 42px;
        }

        .brand strong {
          font-size: 2.02rem;
        }

        .brand-tagline {
          font-size: 0.74rem;
        }

        .menu-button {
          width: 34px;
          height: 26px;
        }

        .filter-body,
        .toolbar,
        .list-grid,
        .form-grid,
        .checkbox-grid,
        .detail-stats,
        .external-grid,
        .search-form-grid,
        .trust-strip,
        .guide-chip-grid,
        .guide-card-grid,
        .guide-flow-list,
        .company-policy-grid {
          grid-template-columns: 1fr;
        }

        .company-shell {
          gap: 30px;
          margin-bottom: 46px;
        }

        .company-hero {
          gap: 16px;
          padding: 34px 0 26px;
        }

        .company-hero h1 {
          font-size: 2rem;
        }

        .company-info-list div {
          grid-template-columns: 1fr;
          gap: 6px;
          padding: 16px 0;
        }

        .company-contact-section .primary-button {
          width: 100%;
          min-width: 0;
        }

        .contact-shell {
          gap: 26px;
          margin-bottom: 46px;
        }

        .contact-intro-panel {
          align-items: stretch;
          flex-direction: column;
          padding: 20px;
        }

        .contact-intro-panel .secondary-button,
        .contact-form-panel .primary-button,
        .contact-application-panel .primary-button,
        .soara-cf7-submit .primary-button {
          width: 100%;
          min-width: 0;
        }

        .contact-form-panel {
          padding: 20px;
        }

        .contact-form-panel .field textarea {
          min-height: 150px;
        }

        .listing-guide-shell {
          gap: 30px;
          margin-bottom: 46px;
        }

        .listing-guide-hero {
          gap: 24px;
          padding-bottom: 30px;
        }

        .listing-guide-copy {
          gap: 16px;
        }

        .listing-guide-copy h1 {
          font-size: 2rem;
          line-height: 1.3;
        }

        .listing-guide-title-line {
          display: block;
        }

        .listing-guide-actions .primary-button,
        .guide-final-cta .primary-button {
          width: 100%;
          min-width: 0;
        }

        .hero-copy h1 {
          width: 100%;
          --hero-title-default-size: 2.48rem;
          line-height: 1.32;
        }

        .hero-title-line {
          white-space: nowrap;
        }

        .hero-copy .eyebrow {
          width: 100%;
          min-width: 0;
          font-size: 1rem;
          letter-spacing: 0.06em;
        }

        .hero-divider {
          width: 92%;
        }

        .hero-lead {
          width: 100%;
          font-size: 1.05rem;
          line-height: 1.9;
        }

        .hero-actions .primary-button,
        .hero-actions .secondary-button {
          width: 100%;
          min-width: 0;
          min-height: 74px;
          font-size: 1.28rem;
        }

        .live-viewers {
          right: 15px;
          bottom: 12px;
          left: 15px;
          justify-content: center;
          max-width: none;
          padding: 13px 16px;
          font-size: 0.96rem;
        }

        .hero-gallery {
          width: 100%;
          min-height: auto;
        }

        .hero-art {
          width: min(100%, 830px);
        }

        .search-panel {
          padding: 16px;
        }

        .search-panel-head,
        .section-heading {
          align-items: stretch;
          flex-direction: column;
        }

        .search-panel-toggle {
          align-items: flex-start;
          flex-direction: column;
          gap: 12px;
        }

        .search-panel-status {
          display: grid;
          grid-template-columns: auto auto;
          gap: 7px;
          justify-content: start;
          width: 100%;
        }

        .result-summary {
          grid-column: 1 / -1;
          flex: 1;
          font-size: 0.86rem;
          white-space: normal;
        }

        .search-panel-action {
          min-height: 30px;
          padding-inline: 11px;
          font-size: 0.78rem;
        }

        .filter-chevron {
          width: 30px;
          height: 30px;
          padding: 6px;
        }

        .section-actions {
          align-items: stretch;
          flex-direction: column;
        }

        .page-title,
        .detail-top {
          align-items: stretch;
          flex-direction: column;
        }

        .sort-wrap {
          min-width: 0;
        }

        .card-actions {
          grid-template-columns: 1fr;
        }

        .profile-card {
          grid-template-columns: 38% minmax(0, 1fr);
        }

        .detail-copy,
        .detail-section-grid,
        .form-panel {
          padding: 18px;
        }

        .login-member-panel {
          padding: 22px 18px 20px;
        }

        .admin-row {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 430px) {
        .hero-copy h1 {
          --hero-title-default-size: 2.14rem;
        }
      }

      @media (max-width: 360px) {
        .hero-copy h1 {
          --hero-title-default-size: 1.84rem;
        }
      }

      @media (max-width: 920px) {
        .top-hero .hero-copy h1,
        .top-hero .hero-lead {
          justify-self: stretch;
          width: 100%;
          min-width: 0;
          max-width: 100%;
        }

        .top-hero .hero-title-line {
          width: 100%;
        }
      }

      .profile-section {
        margin-top: 28px;
        padding: 34px;
        border-top: 1px solid rgba(209, 220, 206, 0.86);
        background: rgba(252, 251, 245, 0.62);
      }

      .profile-basics {
        margin-top: 0;
        border-top: 1px solid rgba(209, 220, 206, 0.86);
        background:
          linear-gradient(135deg, rgba(255, 253, 248, 0.92), rgba(237, 244, 235, 0.7));
      }

      .profile-section-head {
        display: grid;
        gap: 6px;
        margin-bottom: 18px;
      }

      .profile-section-head h2 {
        margin: 0;
        color: var(--ink);
        font-family: var(--font-serif);
        font-size: clamp(1.7rem, 2.4vw, 2.6rem);
        font-weight: 500;
        letter-spacing: 0;
      }

      .profile-highlight {
        display: inline-flex;
        width: fit-content;
        margin: 0 0 16px;
        padding: 8px 14px;
        border: 1px solid rgba(47, 118, 87, 0.24);
        border-radius: 999px;
        background: rgba(47, 118, 87, 0.08);
        color: var(--wine);
        font-weight: 700;
      }

      .detail-highlight {
        margin: -4px 0 0;
      }

      .profile-body-text {
        margin: 0;
        color: var(--muted);
        font-size: 1.04rem;
        line-height: 2;
      }

      .profile-basic-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .profile-basic-card {
        min-width: 0;
        border: 1px solid rgba(209, 220, 206, 0.92);
        border-radius: 8px;
        background: rgba(255, 253, 248, 0.9);
        padding: 16px;
      }

      .profile-basic-card h3 {
        margin: 0 0 10px;
        color: var(--ink);
        font-size: 0.98rem;
      }

      .profile-basic-card p {
        margin: 0;
        color: #40524b;
        line-height: 1.75;
      }

      .profile-note {
        margin-top: 8px !important;
        color: var(--muted) !important;
        font-size: 0.88rem;
      }

      .profile-style-section .profile-body-text {
        max-width: 900px;
      }

      .profile-contact-section .profile-body-text {
        margin-bottom: 18px;
      }

      .service-grid,
      .profile-two-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .service-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid rgba(209, 220, 206, 0.92);
        border-radius: 8px;
        background: var(--surface);
      }

      .service-card img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
      }

      .service-card h3,
      .service-card p {
        margin-right: 18px;
        margin-left: 18px;
      }

      .service-card h3 {
        margin-top: 18px;
        margin-bottom: 8px;
        color: var(--ink);
        font-size: 1.22rem;
        letter-spacing: 0;
      }

      .service-card p {
        margin-top: 0;
        margin-bottom: 18px;
        color: var(--muted);
        line-height: 1.8;
      }

      .profile-timeline,
      .profile-list {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .profile-timeline li,
      .profile-list li {
        border-left: 3px solid rgba(47, 118, 87, 0.34);
        padding: 4px 0 4px 14px;
      }

      .profile-timeline strong {
        display: block;
        color: var(--ink);
        font-size: 1.05rem;
      }

      .profile-timeline span,
      .profile-list li {
        color: var(--muted);
        line-height: 1.75;
      }

      .qa-list {
        display: grid;
        gap: 14px;
      }

      .profile-info-item {
        border: 1px solid rgba(209, 220, 206, 0.9);
        border-radius: 8px;
        background: var(--surface);
        padding: 18px;
      }

      .profile-info-item h3 {
        margin: 0 0 8px;
        color: var(--ink);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.45;
      }

      .profile-info-item p {
        margin: 0;
        color: var(--muted);
        line-height: 1.8;
      }

      @media (max-width: 820px) {
        .profile-section {
          padding: 22px;
        }

        .profile-basic-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .service-grid,
        .profile-two-column {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 560px) {
        .profile-basic-grid {
          grid-template-columns: 1fr;
        }
      }

      .site-footer {
        margin-top: 72px;
        border-top: 1px solid rgba(209, 220, 206, 0.86);
        background:
          linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(232, 240, 229, 0.9));
      }

      .footer-inner {
        width: min(1320px, calc(100% - 40px));
        margin: 0 auto;
        padding: 34px 0 30px;
        display: grid;
        grid-template-columns: minmax(280px, 1.1fr) minmax(0, 1.4fr);
        gap: 28px;
        align-items: start;
      }

      .footer-brand-block {
        display: grid;
        gap: 12px;
      }

      .footer-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        width: fit-content;
        color: inherit;
        text-decoration: none;
      }

      .footer-brand-mark {
        position: relative;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(176, 139, 79, 0.62);
        border-radius: 999px;
        background:
          linear-gradient(90deg, transparent 48%, rgba(47, 118, 87, 0.7) 49% 51%, transparent 52%),
          linear-gradient(0deg, transparent 48%, rgba(176, 139, 79, 0.58) 49% 51%, transparent 52%);
      }

      .footer-brand-mark::after {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1px solid rgba(176, 139, 79, 0.66);
        transform: rotate(45deg);
      }

      .footer-brand strong {
        display: block;
        color: var(--teal-dark);
        font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
        font-size: 2rem;
        font-weight: 500;
        line-height: 0.95;
      }

      .footer-brand-tagline {
        display: block;
        color: #44544e;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
        font-size: 0.78rem;
        line-height: 1;
        margin-bottom: 4px;
      }

      .footer-brand-block p,
      .footer-meta {
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.8;
      }

      .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 18px;
      }

      .footer-nav a {
        color: #40524a;
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
        text-underline-offset: 4px;
      }

      .footer-nav a:hover {
        color: var(--teal-dark);
        text-decoration: underline;
      }

      .footer-meta {
        grid-column: 1 / -1;
        padding-top: 18px;
        border-top: 1px solid rgba(209, 220, 206, 0.72);
      }

      @media (max-width: 820px) {
        .site-footer {
          margin-top: 48px;
        }

        .footer-inner {
          grid-template-columns: 1fr;
          gap: 22px;
          padding: 28px 0 26px;
        }

        .footer-nav {
          justify-content: flex-start;
        }
      }

      @media (max-width: 560px) {
        .footer-nav {
          display: grid;
          grid-template-columns: 1fr;
          gap: 10px;
        }
      }