/* Page-content styles for migrated lower pages.
   Shared header and footer presentation lives in renewal.css. */
/* --- 1. Global & Variables --- */
:root {
  --bg: #ededed;
  --panel: #dfdfdf;

  --text: #313338;
  --blue: #3f8092;
  --blue-deep: #2f6674;
  --blue-soft: #b9d7de;
  --surface-border: #d0d0d0;
  --surface-border-strong: #bcbcbc;
  --surface-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  --surface-shadow-strong: 0 10px 22px rgba(0, 0, 0, 0.1);
  --surface-shadow-deep: 0 12px 26px rgba(0, 0, 0, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --c-white: #fff;
  --c-black: #000;
  --circle-border: #eaeaea;
  --c-ink: #111;
  --c-dark: #222;
  --c-muted: #555;
  --c-mid: var(--c-muted);
  --c-subtle: var(--c-muted);
  --c-subtle-strong: var(--text);
  --c-dim: #666;
  --c-body: #2f3136;
  --c-border-soft: #cfcfcf;
  --c-surface: #f5f5f5;
  --clr-border: #d3d7de;
  --clr-text: #1f2329;
  --clr-text-sub: var(--c-subtle-strong);
  --clr-bg-soft: #eef2f7;
  --clr-bg-hover: #eef4ff;
  --site-max: 1140px;
  --gutter: 15px;
  --fs-1: clamp(38px, 4.4vw, 64px);
  --fs-2: clamp(22px, 2.5vw, 34px);
  --fs-3: clamp(17px, 1.8vw, 20px);
  --fs-4: clamp(14px, 1.1vw, 17px);
  --fs-5: clamp(12px, 0.95vw, 14px);
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: var(--fs-4);
  background: var(--bg);
  color: var(--text);
}

/* --- Main Layout & Hero --- */
main nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

main nav a {
  position: relative;
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-5);
  font-weight: 700;
  letter-spacing: 0.01em;
  transform-origin: center bottom;
  transition: transform 0.2s ease, color 0.2s ease;
}

main nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-subtle) 0%, var(--c-border-soft) 50%, var(--c-subtle) 100%);
  background-size: 200% 100%;
  transform: scaleX(0.18);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease, background-position 0.35s ease;
}

main nav a:not(.nav-cta):hover {
  color: var(--blue-deep);
  transform: translateY(-2px) rotate(-1.2deg);
}

main nav a:not(.nav-cta):hover::after {
  opacity: 1;
  transform: scaleX(1);
  background-position: 100% 0;
}

main nav a[aria-current="page"]:not(.nav-cta) {
  color: var(--blue-deep);
}

main nav a[aria-current="page"]:not(.nav-cta)::after {
  opacity: 1;
  transform: scaleX(1);
}

main nav a.nav-cta:focus-visible {
  outline: 3px solid var(--blue-soft);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  main nav a,
  main nav a::after {
    transition: none;
  }

  main nav a:hover {
    transform: none;
  }
}

.container {
  width: 100%;
  max-width: var(--site-max);
  padding: 0 var(--gutter);
  margin: 28px auto 44px;
}

.hero {
  position: relative;
  height: 480px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.page-top .hero {
  height: 384px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.35);
}

.hero-content {
  position: relative;
  text-align: center;
  color: var(--c-white);
}

.hero h1 {
  margin: 0;
  font-size: clamp(32px, 4.7vw, 50px);
  font-weight: 900;
  letter-spacing: 0.01em;
}

.page-top .hero .hero-update-label {
  width: min(94%, 760px);
  margin-inline: auto;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.32))
    drop-shadow(0 0 20px rgba(63, 128, 146, 0.3));
}

.page-top .hero .hero-update-label svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.page-top .hero .hero-update-label text {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: 112px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.page-top .hero .hero-update-stroke {
  fill: transparent;
  stroke: var(--c-white);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1650;
  stroke-dashoffset: 1650;
  animation: hero-update-draw 4.2s cubic-bezier(0.65, 0, 0.35, 1) 2 forwards;
}

.page-top .hero .hero-update-fill {
  fill: var(--c-white);
  opacity: 0;
  animation: hero-update-fill 4.2s ease-in-out 2 forwards;
}

.hero p {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.7vw, 26px);
  font-weight: 700;
}

.page-top .hero .hero-subtitle {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.7vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-shadow: none;
  animation: none;
}

/* --- 5. Common Components (Panels, Cards, Grids, Buttons) --- */
.panel {
  margin-top: 34px;
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 30px 24px 24px;
}

.eyebrow {
  margin: 0;
  text-align: left;
  font-size: var(--fs-5);
  font-weight: 900;
  color: var(--c-ink);
}

.page-top .eyebrow {
  text-align: center;
}

h2 {
  margin: 12px 0 0;
  text-align: center;
  font-size: clamp(25px, 2.6vw, 44px);
  line-height: 1.25;
}

.h2-accent {
  font-size: clamp(32px, 3.4vw, 56px);
  font-weight: 900;
  line-height: 1.2;
}

.page-main h2 {
  text-align: left;
}

.page-main .sub {
  text-align: left;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 400;
}

.page-top h2 {
  text-align: center;
}

.page-top .sub {
  text-align: center;
}

/* Card Typography Policy: bold headings → center, regular text → left
   Rules are set directly on each component below (no !important needed) */

.sub {
  margin: 20px 0 32px;
  text-align: center;
  font-size: clamp(16px, 1.5vw, 28px);
  font-weight: 700;
}

.panel-note {
  margin: 12px 0 0;
  font-size: var(--fs-5);
  font-weight: 400;
  color: var(--c-subtle);
  line-height: 1.7;
  text-align: left;
}

.inner-panel {
  margin-top: 24px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 20px;
}

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

.member-grid video,
.member-grid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center 46%;
  border-radius: var(--radius-lg);
  background: var(--surface-border);
  display: block;
}

.about-row {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.bars {
  display: grid;
  gap: 14px;
}

.bars .typing-line,
.expert-category .typing-line {
  display: inline-block;
  width: fit-content;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--c-subtle-strong);
  color: var(--c-white);
  font-weight: 900;
  font-size: clamp(16px, 1.5vw, 24px);
  line-height: 1.25;
  padding: 2px 8px 4px;
  letter-spacing: 0.01em;
  border-right: 3px solid rgba(255, 255, 255, 0.92);
  will-change: max-width;
}

.bars .typing-line.typing-start,
.expert-category .typing-line.typing-start {
  animation:
    type-line 0.52s steps(var(--chars)) forwards var(--delay),
    caret-blink 0.6s step-end infinite var(--delay);
}

.bars .typing-line:nth-child(1) {
  --chars: 13;
}

.bars .typing-line:nth-child(2) {
  --chars: 15;
}

.bars .typing-line:nth-child(3) {
  --chars: 16;
}

.copy p {
  margin: 0 0 12px;
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 700;
  line-height: 1.8;
}

.cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  background: var(--c-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-banner {
  background: var(--c-surface);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.card-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center 46%;
  display: block;
}

.card-banner h3 {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 900;
  padding: 0 16px;
}

.card-banner h4 {
  margin: 0;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  color: var(--c-muted);
  padding: 0 16px;
}

.card-banner-btn {
  display: inline-block;
  background: var(--c-dark);
  color: var(--c-white);
  padding: 11px 26px;
  border-radius: 999px;
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  margin-bottom: 18px;
}

.card-banner-btn:hover {
  background: var(--c-mid);
}

.card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body p {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.7;
}

.partner-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.partner-grid>div {
  background: var(--c-white);
  border-radius: var(--radius-md);
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 10px;
}

.partner-grid>div>a,
.partner-grid>div>span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.partner-grid img {
  max-width: 85%;
  max-height: 45px;
  width: auto;
  height: auto;
}

.page-main {
  width: 100%;
  max-width: var(--site-max);
  margin: 28px auto 44px;
  padding: 0 var(--gutter);
}

/* Shared surface styles */
:where(.card, .member-card, .support-card, .service-card, .works-tile, .faq-card, .flow-item, .spot-cta-card) {
  background: var(--c-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
}

:where(.cm-card, .member-card, .support-card, .service-card, .faq-card, .flow-item) {
  box-shadow: var(--surface-shadow);
}

:where(.service-card) {
  box-shadow: var(--surface-shadow-strong);
}

/* Shared card typography principles (bold centered, regular left-aligned) */
:where(
  .card, .cm-card, .member-card, .support-card, .service-card, .works-tile, .faq-card, .spot-cta-card
) {
  display: flex;
  flex-direction: column;
}

:where(
  .card, .cm-card, .member-card, .support-card, .service-card, .works-tile, .faq-card, .spot-cta-card
) :is(h3, h4, .role, .en-label, .works-tile-btn, .support-icon) {
  text-align: center;
}

:where(
  .card, .cm-card, .member-card, .support-card, .service-card, .works-tile, .faq-card, .spot-cta-card
) p {
  text-align: left;
}

/* --- 5b. Buttons, Breadcrumbs & Page Structure --- */
.cm-btn {
  display: inline-block;
  background: var(--c-dark);
  color: var(--c-white);
  padding: 14px 44px;
  border-radius: 30px;
  font-size: var(--fs-4);
  font-weight: 700;
  text-decoration: none;
}

.cm-btn:hover {
  background: var(--c-mid);
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  justify-content: flex-start;
  text-align: left;
  font-size: var(--fs-5);
  font-weight: 700;
  color: var(--c-subtle);
  line-height: 1.5;
  min-height: 20px;
  border-radius: 0;
}

.page-breadcrumb a {
  display: inline-flex;
  align-items: center;
  color: var(--c-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-soft);
}

.page-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  text-align: left;
  line-height: 1.5;
  min-height: 20px;
}

.page-breadcrumb-list li+li::before {
  content: "/";
  color: var(--c-dim);
  margin-right: 0;
}


.page-title {
  font-size: clamp(27px, 2.9vw, 36px);
  text-align: left;
  margin: 12px 0 0;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.content-stack {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}

.content-stack p,
.content-stack li {
  margin: 0;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.8;
}

.page-main>.panel:first-of-type,
.about-intro-dark {
  margin-top: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  padding-top: 6px;
  padding-bottom: 4px;
  padding-left: 0;
  padding-right: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
  align-items: start;
}

.about-intro-dark > * {
  min-width: 0;
}

.page-main>.panel:first-of-type .eyebrow,
.about-intro-dark .eyebrow {
  display: none;
}

.page-main>.panel:first-of-type .page-title,
.about-intro-dark .page-title {
  color: var(--c-ink);
  margin: 0;
}

.page-main>.panel:first-of-type .content-stack,
.about-intro-dark .content-stack {
  margin-top: 0;
}

.page-main>.panel:first-of-type .content-stack p,
.about-intro-dark .content-stack p {
  color: var(--c-ink);
  text-align: left;
  font-weight: 700;
}

.page-main>.panel:first-of-type + .panel,
.about-intro-dark + .panel {
  margin-top: 24px;
}

@media (max-width: 768px) {

  .page-main>.panel:first-of-type,
  .about-intro-dark {
    row-gap: 5px;
  }
}



.tile-grid {
  margin-top: 18px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.member-cards {
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.member-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.member-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center 46%;
  display: block;
}

.member-card h3 {
  margin: 0 0 2px;
  font-size: var(--fs-3);
  font-weight: 900;
  line-height: 1.3;
  padding-top: 16px;
  text-align: center;
}

.member-card .role {
  font-size: var(--fs-5);
  font-weight: 800;
  color: var(--c-subtle-strong);
  margin-bottom: 14px;
  text-align: center;
}

.member-card p {
  font-size: var(--fs-5);
  line-height: 1.75;
  margin: 0;
  flex: 1;
  color: var(--c-body);
  text-align: left;
}

.member-card> :not(img) {
  padding-left: 18px;
  padding-right: 18px;
}

.sns-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin-bottom: 24px;
}

.sns-grid a {
  background: var(--c-white);
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
  height: 52px !important;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  padding: 0;
}

.sns-grid img {
  max-width: 30px;
  max-height: 30px;
}

.copyright {
  margin: 0;
  text-align: center;
  border-top: 0;
  color: var(--surface-border-strong);
  font-size: var(--fs-5);
  padding: 0 0 18px;
}

/* --- 7. AOS (Animate On Scroll) Custom --- */
[data-aos] {
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}

[data-aos="fade-up"] {
  transform: translate3d(0, 22px, 0);
}

[data-aos="flip-left"] {
  transform: perspective(2500px) rotateY(-100deg);
  transform-origin: center;
  backface-visibility: hidden;
}

[data-aos="flip-left"].aos-animate {
  transform: perspective(2500px) rotateY(0);
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: none;
}

[data-aos].aos-animate {
  opacity: 1;
}

/* --- 8. Page Specific Styles --- */
/* --- 8a. Profile & Member --- */
.profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}

.page-speakingcircles .profile-row,
.page-sukeda .profile-row,
.page-community .profile-row {
  background: var(--c-white);
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--surface-shadow);
}

.profile-photo img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

.page-speakingcircles .profile-photo img,
.page-community .profile-photo img,
.page-sukeda .profile-photo img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 10%;
}

/* Sukeda profile: use a taller crop so the face is not too large */
.page-sukeda .profile-photo img {
  aspect-ratio: 1 / 1;
  object-position: center 20%;
}

.profile-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-speakingcircles .profile-text,
.page-sukeda .profile-text,
.page-community .profile-text {
  padding: 4px 2px 4px 0;
}

.profile-text h1 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 900;
  line-height: 1.2;
}

.profile-text .profile-roles {
  margin: 0;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  line-height: 1.8;
}

.profile-text .profile-bio {
  margin: 0;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.8;
}

.profile-text .profile-tags {
  margin: 0;
  font-size: var(--fs-5);
  font-weight: 700;
}

.profile-link-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.profile-link-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-decoration: none;
  color: var(--c-ink);
  font-size: var(--fs-5);
  font-weight: 700;
}

.profile-link-btn img {
  height: 22px;
  width: auto;
}

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



.slider-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px auto 0;
}

.slider-2col .panel {
  margin: 0;
}


.values-slider-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.page-sukeda .honest-slider-card {
  background: var(--c-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.values-slider-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.values-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-subtle-strong);
}

.values-slider-track {
  position: relative;
  height: 6px;
  background: rgba(63, 128, 146, 0.18);
  border-radius: 99px;
}

.values-slider-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: rgba(76, 95, 100, 0.45);
}

.values-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--blue);
  border-radius: 99px;
}

.values-slider-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--c-white);
  border: 3px solid var(--blue);
  border-radius: 50%;
}

.values-slider-fill--weak {
  background: rgba(63, 128, 146, 0.68);
}

.values-slider-dot--weak {
  border-color: var(--blue);
}

.values-slider-track--weak {
  background: rgba(63, 128, 146, 0.12);
}

.slider-label-note {
  font-size: 0.7rem;
  color: var(--blue-deep);
}

.page-sukeda .tools-grid .support-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.page-sukeda .tools-grid .support-card p {
  flex: 1;
}

.page-sukeda .tools-grid .works-tile-btn {
  margin-top: 12px;
}

/* --- 8b-ii. Works Tiles --- */

.works-tile {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.works-tile-banner {
  background: var(--c-surface);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.works-tile-banner img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background-color: var(--c-white);
  padding: 6px;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.works-tile-banner h3 {
  margin: 0;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 900;
  line-height: 1.4;
}

.works-tile-client {
  font-size: clamp(10px, 0.75vw, 11px);
  font-weight: 900;
  color: var(--c-muted);
  margin-top: -4px;
  margin-bottom: 2px;
}

.works-tile-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.works-tile-body p {
  margin: 0;
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.7;
  flex: 1;
}

.works-tile-btn {
  display: inline-block;
  background: var(--c-dark);
  color: var(--c-white);
  padding: 7px 18px;
  border-radius: 6px;
  font-size: var(--fs-5);
  font-weight: 700;
  text-decoration: none;
}

.works-tile-btn:hover {
  background: var(--c-mid);
}


/* --- 8-Responsive. Component & Layout Breakpoints --- */

@media (max-width: 960px) {
  .page-breadcrumb a {
    border-bottom: none;
  }

  .page-breadcrumb a::after {
    display: none;
  }

  .slider-2col {
    grid-template-columns: 1fr;
  }

  .sns-grid {
    grid-template-columns: 1fr;
  }

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

  .hero {
    height: 256px;
  }

  .page-top .hero {
    height: 205px;
  }

  .bars .typing-line {
    font-size: clamp(14px, 4.4vw, 18px);
  }

}

/* --- 8c. About Page --- */

/* --- 8c-ii. Shared Avatar / Icon Border --- */
.support-icon,
.service-banner img.service-banner-avatar,
.page-about .support-icon img,
.page-sukeda .support-icon.image-icon {
  border: 3px solid var(--circle-border);
  border-radius: 999px;
}

/* --- 8c-iii. About — Support Grid --- */
.support-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.support-card {
  padding: 20px 14px;
  text-align: left;
}

.support-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 38px;
  line-height: 1;
}

.support-icon img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 46%;
}


.support-card .en-label {
  display: block;
  font-size: var(--fs-5);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--c-dim);
  margin-bottom: 4px;
  text-align: center;
}

.support-card h3 {
  margin: 0 0 10px;
  font-size: var(--fs-3);
  font-weight: 900;
  text-align: center;
}

.support-card p {
  margin: 0;
  font-size: var(--fs-5);
  line-height: 1.7;
  text-align: left;
}

/* カード高さ統一：p をフレックス伸縮、ボタンを下端に固定 */
.support-card > p {
  flex: 1;
}

.support-card > .works-tile-btn,
.support-card > .cm-btn {
  margin-top: auto;
}

/* --- 8c-iv. About — Corporate Info & Map --- */
.law-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.law-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-5);
}

.law-table th,
.law-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: top;
  line-height: 1.7;
}

.law-table th {
  font-weight: 700;
  white-space: nowrap;
  width: 38%;
  text-align: left;
}

.law-table td a {
  color: var(--blue);
}

.law-table td strong {
  display: block;
  margin-bottom: 4px;
  line-height: 1.5;
}

.law-table td span {
  display: block;
  color: var(--c-subtle);
  line-height: 1.65;
}

@media (max-width: 600px) {
  .page-direction .law-table thead {
    display: none;
  }
  .page-direction .law-table,
  .page-direction .law-table tbody,
  .page-direction .law-table tr,
  .page-direction .law-table td {
    display: block;
    width: 100%;
  }
  .page-direction .law-table tr {
    border-bottom: 2px solid var(--surface-border);
    padding: 4px 0;
  }
  .page-direction .law-table td {
    border-bottom: none;
    padding: 10px 12px;
  }
  .page-direction .law-table--dodont td:first-child::before {
    content: "DO";
    display: block;
    font-size: var(--fs-5);
    font-weight: 700;
    color: var(--c-dim);
    margin-bottom: 4px;
  }
  .page-direction .law-table--dodont td:last-child::before {
    content: "DON'T";
    display: block;
    font-size: var(--fs-5);
    font-weight: 700;
    color: var(--c-dim);
    margin-bottom: 4px;
  }
  .page-direction .law-table--dodont td:last-child {
    background: var(--c-surface);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
}

.map-embed {
  border-radius: 12px;
  overflow: hidden;
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}

.map-embed-card {
  position: relative;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.map-open-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.9);
  color: var(--c-white);
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition: transform 0.2s ease, background 0.2s ease;
}

.map-open-btn:hover {
  background: rgba(17, 17, 17, 1);
  transform: translateY(-1px);
}

/* --- 8d. Activity Pages — Service Cards --- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.service-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--surface-shadow-strong);
}

.service-banner {
  background: var(--c-surface);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.service-banner img {
  max-height: 90px;
  max-width: 85%;
  object-fit: contain;
}

.service-banner img.service-banner-avatar {
  width: 112px;
  height: 112px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.service-banner img.service-banner-avatar--logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  padding: 18px;
}


.line-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: var(--fs-5);
  font-weight: 800;
  color: var(--c-white);
  background: #06c755;
  vertical-align: middle;
}

.service-banner-title {
  font-size: var(--fs-3);
  font-weight: 900;
  line-height: 1.4;
  margin: 0;
}

.service-banner-btn {
  display: inline-block;
  background: var(--c-dark);
  color: var(--c-white);
  padding: 14px 44px;
  border-radius: 30px;
  font-size: var(--fs-4);
  font-weight: 700;
  text-decoration: none;
}

.service-banner-btn:hover {
  background: var(--c-mid);
}

.page-lport .service-banner-btn.line-green-cta {
  background: #06c755;
}

.page-lport .service-banner-btn.line-green-cta:hover {
  background: #05b54d;
}

.service-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-body p {
  margin: 0 0 12px;
  font-size: var(--fs-5);
  line-height: 1.7;
  flex: 1;
}

.service-body a {
  display: none;
}

/* --- 8e. Inquiry Form --- */
.inquiry-note {
  font-size: var(--fs-5);
  line-height: 1.8;
  margin-bottom: 48px;
}

.inquiry-note a {
  color: var(--blue);
}

.page-main .panel>form {
  margin-top: 14px;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-5);
  margin-bottom: 6px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border-soft);
  border-radius: 8px;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: var(--fs-4);
  background: var(--c-surface);
  box-sizing: border-box;
}

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

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--blue);
  border-color: var(--blue);
  background: var(--c-white);
}

.form-submit-wrap {
  text-align: center;
  margin-top: 28px;
}

.form-submit {
  background: var(--c-dark);
  color: var(--c-white);
  padding: 14px 60px;
  border: none;
  border-radius: 8px;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: var(--fs-4);
  font-weight: 700;
  cursor: pointer;
}

.form-submit:hover {
  background: var(--c-mid);
}

/* --- 8f. Member Cards & Concept Grid --- */
.member-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--c-border-soft);
  justify-content: flex-end;
  min-height: 54px;
}

.member-links a:not(.x-icon-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--c-mid);
  border-radius: 8px;
  font-size: 0;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
}

.member-links a:not(.x-icon-link)::before {
  content: "↗";
  font-size: var(--fs-5);
  color: var(--c-white);
  font-weight: 900;
}

.x-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--c-ink);
  color: var(--c-white) !important;
  border-radius: 8px;
  font-size: var(--fs-5);
  font-weight: 900;
  text-decoration: none !important;
  flex-shrink: 0;
}

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

/* マージされたコンセプトカード用の画像アイコン指定 */
.support-card-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
}

a.support-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Reusable detail card template: centered title + left-aligned body */
.detail-card {
  padding: 24px 18px;
}

.detail-card h3 {
  text-align: center;
}

.detail-card p {
  text-align: left;
}

.detail-card p+p {
  margin-top: 8px;
}

.detail-card .service-banner-btn {
  margin-top: 14px;
}

.page-community .related-projects .support-card {
  padding: 0;
  overflow: hidden;
}

.page-community .related-projects .support-card p {
  margin: 0;
}

.page-community .related-projects .support-card-image {
  width: 100%;
  height: 100%;
  min-height: 240px;
  margin: 0;
  object-fit: cover;
  object-position: center 46%;
  display: block;
}


.flow-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.flow-item {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.flow-num {
  font-size: var(--fs-3);
  font-weight: 900;
  width: 44px;
  height: 44px;
  background: var(--c-surface);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.flow-content h3 {
  margin: 0 0 4px;
  font-size: var(--fs-3);
  font-weight: 900;
  text-align: left;
}

.flow-content p {
  margin: 0;
  font-size: var(--fs-5);
  color: var(--c-subtle);
  text-align: left;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.faq-card {
  padding: 20px;
}

.faq-card dt {
  font-weight: 900;
  font-size: var(--fs-3);
  margin-bottom: 10px;
  line-height: 1.5;
  text-align: center;
}

.faq-card dd {
  margin: 0;
  font-size: var(--fs-5);
  line-height: 1.7;
  color: var(--c-muted);
}







/* --- 8g. Membership Page --- */
.page-membership .panel {
  border-radius: 14px;
  background: var(--panel);
}

.page-membership .panel:first-of-type .page-title {
  letter-spacing: 0.02em;
}

.page-membership .law-grid {
  margin-top: 20px;
}

.page-membership .law-table {
  border-radius: 12px;
  overflow: hidden;
}

.page-membership .law-table th {
  width: 32%;
  background: transparent;
  color: inherit;
  font-size: var(--fs-5);
  letter-spacing: normal;
}

.page-membership .law-table td {
  background: transparent;
  font-size: var(--fs-5);
}

.page-membership .law-table tr:nth-child(even) td {
  background: transparent;
}



/* --- 8h. SPOT WORKS Page --- */

.page-partner .member-card {
  background: var(--c-white);
}

.page-partner .member-card> :not(img) {
  padding-left: 18px;
  padding-right: 18px;
}

.page-partner .member-card p:last-child {
  padding-bottom: 14px;
}



.spot-faq-cta-wrap {
  margin-top: 40px;
  margin-bottom: 0;
  text-align: center;
}

.spot-cta-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: min(560px, 94%);
  border-radius: 18px;
  padding: 20px 26px 24px;
  box-shadow: var(--surface-shadow-deep);
}

.spot-cta-label {
  margin: 0;
  font-size: var(--fs-5);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--c-mid);
}

.spot-cta-copy {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 900;
  line-height: 1.45;
  color: var(--c-ink);
}

.spot-cta-card .service-banner-btn {
  margin-bottom: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


.terms-content {
  max-width: 920px;
  margin-top: 18px;
}

.speakingcircles-feature {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 340px);
  gap: 0;
  align-items: stretch;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 243, 236, 0.98) 100%);
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
}

.speakingcircles-feature__body {
  padding: 24px;
}

.speakingcircles-feature__body :is(p, li) {
  font-size: var(--fs-4);
  line-height: 2;
}

.speakingcircles-feature__media {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border-radius: 0;
  overflow: hidden;
  min-height: 100%;
  background: transparent;
}

.speakingcircles-feature__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  object-fit: cover;
  object-position: center 12%;
  display: block;
  filter: saturate(0.98) contrast(0.99);
}

.sc-content-icon-wrap {
  margin: 2px 0 20px;
  display: flex;
  justify-content: center;
}

.sc-content-icon {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 2px solid rgba(123, 101, 68, 0.24);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 241, 232, 0.98) 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.75);
  padding: 16px;
  object-fit: contain;
  display: block;
}

.sc-content-emoji {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 2px solid rgba(123, 101, 68, 0.24);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 241, 232, 0.98) 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.75);
  display: grid;
  place-items: center;
  font-size: 40px;
  line-height: 1;
}

.sc-photo-marquee {
  width: 100%;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--surface-border);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 242, 235, 0.98) 100%);
  padding: 14px 0;
}

.sc-photo-track {
  display: flex;
  width: max-content;
  gap: 14px;
  padding: 0 14px;
  animation: sc-marquee 52s linear infinite;
}

.sc-photo-frame {
  margin: 0;
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 2px dashed rgba(116, 95, 60, 0.45);
  background:
    linear-gradient(45deg, rgba(187, 165, 128, 0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(187, 165, 128, 0.1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(187, 165, 128, 0.1) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(187, 165, 128, 0.1) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  display: grid;
  place-items: center;
}

.sc-photo-frame figcaption {
  margin: 0;
  font-size: var(--fs-5);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(106, 84, 51, 0.9);
}

.sc-photo-frame--image {
  border: 1px solid rgba(116, 95, 60, 0.2);
  background: #fff;
  overflow: hidden;
  place-items: stretch; /* .sc-photo-frame の grid center を上書き → 画像がフレーム全体を埋める */
}

.sc-photo-frame--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@keyframes sc-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 7px));
  }
}

.terms-content h3 {
  margin: 22px 0 10px;
  font-size: var(--fs-3);
  font-weight: 900;
}

.terms-content p,
.terms-content li {
  font-size: var(--fs-4);
  line-height: 1.9;
}

.terms-content ol {
  margin: 8px 0 14px 20px;
  padding: 0;
}

.terms-content hr {
  border: 0;
  border-top: 1px solid var(--c-border-soft);
  margin: 18px 0;
}

.page-member .member-card {
  background: var(--c-white);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
}

.page-member .member-links {
  border-top: none;
  margin-top: 0;
}

.page-member .member-card p:not(.role) {
  flex: initial;
  align-self: start;
}

/* Fine-tune portrait crop so head line matches other member cards */
.page-member .member-card .member-photo--sukeda {
  object-position: center 32%;
}


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

.expert-category {
  margin: 36px 0 16px;
  padding: 0;
  text-align: left;
}

.expert-category:first-of-type {
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {

  .bars .typing-line,
  .expert-category .typing-line {
    animation: none;
    max-width: none;
    border-right: 0;
  }
}

@media (max-width: 960px) {
  .speakingcircles-feature {
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 16px;
  }

  .speakingcircles-feature__body {
    padding: 0;
  }

  .speakingcircles-feature__media {
    position: static;
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;
    margin-top: 12px;
    border-radius: 14px;
  }

  .speakingcircles-feature__media img {
    width: 100%;
    border-radius: 14px;
  }

  .sc-photo-marquee {
    border-radius: 16px;
    padding: 12px 0;
  }

  .sc-photo-track {
    gap: 12px;
    padding: 0 12px;
    animation-duration: 44s;
  }

  .sc-photo-frame {
    width: clamp(160px, 62vw, 240px);
    border-radius: 12px;
  }

  .sc-content-icon {
    width: 84px;
    height: 84px;
    padding: 14px;
  }

  .sc-content-emoji {
    width: 84px;
    height: 84px;
    font-size: 36px;
  }
}

/* --- 9. Intro Overlay --- */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--c-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  cursor: pointer;
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease 0.5s,
    border-radius 0.9s ease;
}

.intro-logo {
  width: 220px;
  max-width: 50vw;
  filter: brightness(0) invert(1);
}

.intro-hint {
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  opacity: 0.45;
  animation: intro-bounce 1.6s ease-in-out infinite;
}

@keyframes intro-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}

@keyframes hero-update-draw {
  0%,
  10% {
    stroke-dashoffset: 1650;
    opacity: 1;
  }

  60%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes hero-update-fill {
  0%,
  52% {
    opacity: 0;
  }

  68%,
  88% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes type-line {
  from {
    max-width: 0;
  }

  to {
    max-width: 100%;
  }
}

@keyframes caret-blink {

  0%,
  49% {
    border-right-color: rgba(255, 255, 255, 0.92);
  }

  50%,
  100% {
    border-right-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top .hero h1 {
    animation: none;
  }

  .page-top .hero .hero-update-stroke {
    stroke-dashoffset: 0;
    animation: none;
  }

  .page-top .hero .hero-update-fill {
    opacity: 1;
    animation: none;
  }

  .bars .typing-line {
    max-width: none;
    animation: none;
    border-right: 0;
  }
}

/* --- 10. Typography Scale & Global Utilities --- */

.panel h2 {
  font-size: var(--fs-2);
}

.page-main h2 {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
}


.page-about .support-card p {
  font-size: var(--fs-5);
  line-height: 1.7;
}

.content-stack p,
.content-stack li,
.support-card p,
.flow-content p,
.faq-card dd,
.profile-bio,
.profile-roles {
  font-size: var(--fs-4);
}

/* --- 11. Responsive — Global Grid Overrides --- */
@media (max-width: 960px) {

  .member-grid,
  .cards,
  .partner-grid,
  .about-row,
  .tile-grid,
  .member-cards,
  .support-grid,
  .service-grid,
  .law-grid,
  .sns-grid,
  .profile-row,
  .support-grid--2,
  .speakingcircles-feature,
  .faq-grid,
  .support-grid--3 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* Mobile typography policy: disable manual line breaks and rely on natural wrapping */
  body br {
    display: none;
  }

  /* Allow deliberate manual line breaks in headings on mobile */
  :is(h1, h2, h3, h4, h5, h6) br {
    display: initial;
  }

  /* Unify headings and body line heights on mobile for absolute consistency */
  h2, h3, .h2-accent {
    line-height: 1.3 !important;
  }

  .content-stack p,
  .content-stack li,
  .card p,
  .support-card p,
  .flow-content p,
  .faq-card dd,
  .service-body p,
  .profile-bio {
    line-height: 1.62 !important;
  }

  .bars .typing-line {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    border-right: 0;
    line-height: 1.45;
    animation: none !important;
  }

  .hero-content p {
    font-size: var(--fs-5);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}


/* --- 8c-v. About / Sukeda — Oversize Avatars --- */
.page-about .support-icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  overflow: visible;
  font-size: initial;
}

.page-about .support-icon img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  object-position: center;
}

.page-about .support-icon:not(:has(img)) {
  background: var(--c-white);
  border: 3px solid var(--circle-border);
  font-size: 46px;
  display: grid;
  place-items: center;
  line-height: 1;
}

.page-sukeda .support-icon.image-icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 12px;
  background: var(--c-white);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.page-sukeda .support-icon.image-icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* --- 8i. AI部 — Slack Sample Cards --- */
.slack-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
  align-items: stretch;
}

.slack-card {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  background: var(--c-surface);
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  box-shadow: none;
}

.slack-card-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: 0.01em;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-border);
}

.slack-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slack-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 0;
}

.slack-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  border: 1px solid var(--clr-border);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--c-subtle-strong);
  margin-top: 1px;
}

.slack-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.slack-name {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--clr-text);
}

.slack-body p {
  font-size: 0.84rem;
  color: var(--clr-text-sub);
  line-height: 1.62;
  margin: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
}

.slack-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 40px;
}

.slack-reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--clr-border);
  background: var(--clr-bg-soft);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-subtle-strong);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .slack-cards {
    grid-template-columns: 1fr;
  }

  .slack-card {
    padding: 18px 14px;
  }

  .slack-reactions {
    margin-left: 0;
  }
}

/* --- 8j. Top Page — X Posts --- */
.x-posts {
  margin-top: 36px;
  border-top: 1px solid var(--clr-border);
  padding-top: 28px;
}

.x-posts-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--clr-text-sub);
  margin-bottom: 18px;
}

.x-posts-list {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  padding: 20px;
  overflow: hidden;
}

.x-post {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--clr-border);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}

.x-post:hover {
  background: rgba(255, 255, 255, 0.65);
}

.social-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 2px 4px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.social-chip--x {
  background: var(--c-ink);
  color: var(--c-white);
}

.x-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.x-post-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.x-post-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text);
}

.x-post-handle {
  font-size: 0.82rem;
  color: var(--clr-text-sub);
}

.x-post-date {
  font-size: 0.76rem;
  color: var(--clr-text-sub);
  margin-left: 0;
  white-space: nowrap;
}

.x-post-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 769px) { /* desktop-only: inverse of 768px */
  .x-post {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
  }

  .x-post-meta {
    margin-bottom: 0;
    flex-wrap: nowrap;
  }

  .x-post-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.45;
  }

  .x-post-date {
    justify-self: end;
  }

  .x-post:hover {
    background: var(--clr-bg-hover);
  }
}

@media (max-width: 768px) {
  .x-posts-list {
    padding: 10px;
  }

  .x-post {
    padding: 12px 0;
  }

  .x-post-avatar {
    width: 20px;
    height: 20px;
  }

  .x-post-text {
    font-size: 0.8rem;
  }

  .x-post-date {
    display: block;
    margin-top: 4px;
    text-align: right;
  }
}

.footer-legal {
  margin: 0;
  padding: 22px 0 14px;
  border-top: 1px solid #252525;
  text-align: center;
  color: var(--surface-border-strong);
  font-size: var(--fs-5);
  line-height: 1.7;
}

.footer-legal a {
  color: var(--surface-border);
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}

/* --- 8k. Component Showcase (design.html / direction.html) --- */
.page-components .sc-section {
  margin-top: 28px;
}
.page-components .sc-label {
  font-size: var(--fs-5);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--surface-border);
}
.page-components .sc-demo {
  background: var(--c-white);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 8px;
  overflow: hidden;
}
.page-components .sc-demo-dark {
  background: var(--c-black);
}
.page-components .sc-code {
  background: #1a1d1f;
  color: #c5ea1f;
  font-family: "SF Mono", "Fira Mono", monospace;
  font-size: 12px;
  line-height: 1.65;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  white-space: pre;
  margin-bottom: 20px;
}
.page-components .sc-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.page-components .sc-token {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}
.page-components .sc-token-swatch {
  height: 44px;
  display: block;
  width: 100%;
}
.page-components .sc-token-info {
  padding: 5px 7px;
  background: var(--c-white);
  font-family: monospace;
  overflow-wrap: break-word;
}
.page-components .sc-token-name {
  font-size: 9.5px;
  font-weight: 700;
  display: block;
  color: var(--c-ink);
}
.page-components .sc-token-value {
  font-size: 9.5px;
  color: var(--c-muted);
  display: block;
  margin-top: 1px;
}
.page-components .sc-token-usage {
  font-size: 9px;
  color: var(--blue);
  display: block;
  margin-top: 3px;
  font-family: sans-serif;
}
.page-components .sc-shadow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.page-components .sc-shadow-box {
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  font-size: var(--fs-5);
  color: var(--c-muted);
}
.page-components .sc-radius-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.page-components .sc-radius-box {
  background: var(--blue-soft);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-deep);
}

.page-direction .sc-code {
  background: #0f1115;
  color: #f5f7fa;
  border: 1px solid #262a33;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-family: "SF Mono", "Fira Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
}

.page-direction .content-stack > p > .cm-btn {
  min-width: 260px;
  justify-content: center;
}

.page-direction .cm-btn.copied {
  background: var(--blue-deep);
}

.page-direction .support-grid {
  margin-top: 28px;
}

.page-direction #patterns .support-card > h3 {
  line-height: 1.3;
  min-height: 2.6em;
}

.page-direction #patterns .flow-content h3 {
  line-height: 1.35;
  min-height: 2.7em;
}

@media (min-width: 961px) {
  .page-direction #patterns .support-card > p {
    flex: none;
    min-height: 7.2em;
  }
  .page-direction #patterns .flow-item {
    min-height: 145px;
  }
}

.page-direction .inner-panel {
  margin-top: 24px;
}

.page-direction .inner-panel .inner-panel {
  margin-top: 12px;
}

.page-direction pre.sc-code.sc-code--mini {
  margin: 0;
  font-size: 11px;
  max-height: 120px;
}

.page-direction .txt-center {
  text-align: center;
}

.page-direction .txt-left {
  text-align: left;
}

.page-direction .mt-12 {
  margin-top: 12px;
}

.page-direction .m-0 {
  margin: 0;
}

.page-direction .law-table th {
  width: 50%;
}

.page-direction #tokens .law-table th:first-child {
  width: 20%;
}

.page-direction #tokens .law-table th:nth-child(2) {
  width: 30%;
}

.page-direction #tokens .law-table th:nth-child(3) {
  width: 50%;
}
@media (max-width: 960px) {
  .page-components .sc-shadow-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-components .panel {
    padding: 16px;
  }

  .page-components .sc-section {
    margin-top: 20px;
  }

  .page-components .sc-label {
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }

  .page-components .sc-demo {
    padding: 14px;
    overflow: visible;
    max-width: 100%;
  }

  .page-components .sc-demo > * {
    min-width: 0;
    max-width: 100%;
  }

  .page-components .sc-code {
    font-size: 11px;
    line-height: 1.55;
    padding: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .page-components .sc-token-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-components .sc-radius-grid {
    gap: 10px;
    justify-content: flex-start;
  }

  .page-components .sc-radius-box {
    width: 72px;
    height: 72px;
    font-size: 10px;
  }

  .page-components .sc-demo table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .page-components .sc-demo th,
  .page-components .sc-demo td {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .page-components .cm-btn,
  .page-components .service-banner-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .page-components .page-title {
    line-height: 1.15;
  }
}

@media (max-width: 768px) {
  /* 明示的にスライダーを無効化したいグリッド（dense content など） */
  .support-grid--no-swipe:has(> :nth-child(3)) {
    display: grid !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .support-grid--no-swipe:has(> :nth-child(3)) > * {
    flex: initial !important;
    max-width: none !important;
    width: auto !important;
    scroll-snap-align: none !important;
  }

  .page-direction .panel {
    padding: 16px;
  }

  .page-direction .support-card,
  .page-direction .flow-item,
  .page-direction .inner-panel {
    padding: 14px;
  }

  .page-direction .flow-item {
    gap: 12px;
    align-items: flex-start;
  }

  .page-direction .flow-num {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .page-direction .sc-code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 11px;
    line-height: 1.5;
    padding: 12px;
  }
}



/* --- Inline Style Migration Utilities (auto-generated) --- */
.u-inline-074bd2d5 {font-size:48px; line-height:1; display:flex; align-items:center; justify-content:center;}
.u-inline-07b6132a {position:absolute; left:-9999px;}
.u-inline-08f6b20d {margin-top:16px; margin-bottom:8px; line-height:2; max-width:760px;}
.u-inline-0fc10c1e {margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;}
.u-inline-106c2a94 {background:#d0d0d0;}
.u-inline-1ae678b5 {display:none; visibility:hidden;}
.u-inline-1cc95885 {left:90%;}
.u-inline-20ceff19 {margin:8px 0; line-height:1.9;}
.u-inline-22ca54a8 {padding:6px 10px;}
.u-inline-24db982c {left:95%;}
.u-inline-257583f7 {border:2px dashed var(--surface-border); border-radius:var(--radius-md); padding:16px; font-size:var(--fs-5); color:var(--c-muted);}
.u-inline-279777bc {object-fit: contain; object-position: center; padding: 12px; background-color: #ff6d00;}
.u-inline-2813659d {left:85%;}
.u-inline-291b7bbb {margin-top:0;}
.u-inline-30f9baef {--chars: 16; --delay: 0s;}
.u-inline-3343fd64 {margin-top:24px;}
.u-inline-337ebb40 {border-bottom:1px solid var(--surface-border);}
.u-inline-3801d6f9 {width:90%;}
.u-inline-3a595e33 {padding:6px 10px; font-family:monospace; font-size:11px;}
.u-inline-3ac23d8e {background:var(--c-surface);}
.u-inline-3e3b81bf {border-radius:var(--radius-lg);}
.u-inline-3fa673af {margin-top:8px; font-size:13px; color:#555;}
.u-inline-4206b327 {background:#b9d7de;}
.u-inline-49369acc {margin:0 0 10px; font-weight:700;}
.u-inline-4997e164 {margin:22px 0 10px;}
.u-inline-542a5760 {--chars: 18; --delay: 1.2s;}
.u-inline-591f297f {background:#ededed; border-bottom:1px solid #d0d0d0;}
.u-inline-5baca5f8 {font-weight:900; font-size:clamp(22px,2.5vw,34px); color:var(--c-ink); line-height:1;}
.u-inline-5e039bea {display:inline-block; margin-top:12px;}
.u-inline-5f16c157 {text-align:left; padding:6px 10px;}
.u-inline-659874bf {background:var(--c-surface); padding:18px; border-radius:var(--radius-md); margin-bottom:18px; font-size:var(--fs-5); line-height:1.7;}
.u-inline-6abe90a7 {box-shadow:var(--surface-shadow);}
.u-inline-6d6d18e3 {margin-top:14px; text-align:center;}
.u-inline-6da0aabe {margin-top: 56px;}
.u-inline-6ffeaf54 {margin:0; font-size:var(--fs-5);}
.u-inline-7363e982 {padding:6px 10px; color:var(--c-muted);}
.u-inline-737bf0f4 {width:85%;}
.u-inline-75a6fd1b {border-radius:var(--radius-md);}
.u-inline-784c47c5 {background:#f5f5f5; border-bottom:1px solid #d0d0d0;}
.u-inline-7b22574d {display:grid; gap:14px;}
.u-inline-84e23ce6 {box-shadow:var(--surface-shadow-strong);}
.u-inline-86489fbc {--chars: 15; --delay: 0.6s;}
.u-inline-8c94f63a {width:80px; height:80px; object-fit:cover;}
.u-inline-8d3d133a {object-fit: contain; object-position: center; padding: 12px; background-color: #2b2b2b;}
.u-inline-92ffe335 {font-size:var(--fs-5); font-weight:700; color:var(--c-muted); margin:14px 0 6px;}
.u-inline-93420d78 {border:0;}
.u-inline-941a4e1a {width:80%;}
.u-inline-96d196cc {font-size:var(--fs-5); color:var(--c-muted); margin:0; font-family:monospace;}
.u-inline-98ad3549 {text-align:left; margin:0;}
.u-inline-98fe97cd {background:#555;}
.u-inline-99ab02bf {padding:6px 10px; font-family:monospace; font-weight:700;}
.u-inline-9abca5f5 {box-shadow:var(--surface-shadow-deep);}
.u-inline-9afd1ddc {width:48px; height:48px; object-fit:contain;}
.u-inline-9c5bd73c {font-size:var(--fs-5); color:var(--c-muted); font-family:monospace;}
.u-inline-9c9cee20 {margin-top: 12px;}
.u-inline-a2ef9a7e {font-size:var(--fs-5); color:var(--c-muted); margin-top:10px;}
.u-inline-a3201d65 {background:#313338;}
.u-inline-a3a0419e {width:20%;}
.u-inline-a4214ae9 {text-align:left; margin-top:12px;}
.u-inline-a8900fe1 {text-align:center; margin-top:12px;}
.u-inline-aef04b02 {font-family:'Inter',sans-serif; font-size:clamp(22px,2.5vw,34px); font-weight:700; color:var(--c-ink); margin:0 0 4px; line-height:1.2;}
.u-inline-af3fee87 {margin-bottom:10px;}
.u-inline-b1465c07 {line-height:1.9;}
.u-inline-b4c8c8bc {font-family:'Noto Sans JP',sans-serif; font-size:clamp(22px,2.5vw,34px); font-weight:700; color:var(--c-ink); margin:0 0 4px; line-height:1.2;}
.u-inline-b559fa09 {border-collapse:collapse; width:100%; font-size:var(--fs-5);}
.u-inline-b64b05d1 {border-radius:999px; width:96px; height:96px;}
.u-inline-b65373e8 {margin-top: 8px; margin-bottom: 24px; color: var(--c-gray-text);}
.u-inline-b66d8c4d {font-size:var(--fs-5); font-weight:700; color:var(--c-muted); margin:20px 0 6px;}
.u-inline-b71eaea2 {margin:18px 0 10px;}
.u-inline-bbc4ab88 {left:20%;}
.u-inline-c265c20e {--chars: 13; --delay: 0.15s;}
.u-inline-c28bd948 {text-align:left;}
.u-inline-c8bde2be {background:#111;}
.u-inline-c8be1ccb {display:none;}
.u-inline-d26af9fe {width:25%;}
.u-inline-d498f00b {text-align:center; margin:0;}
.u-inline-d8104c4e {background:#3f8092;}
.u-inline-d8cbb9db {margin-top:10px; font-size:13px;}
.u-inline-dac4fe6c {text-align:center;}
.u-inline-dd36e4cf {--chars: 13; --delay: 0.45s;}
.u-inline-dfe6a95f {left:25%;}
.u-inline-e0491d7f {background:var(--bg);}
.u-inline-e12f5e8e {padding:6px 10px; font-family:monospace;}
.u-inline-e1434868 {font-weight:700; font-size:clamp(22px,2.5vw,34px); color:var(--c-ink); line-height:1;}
.u-inline-e22475a8 {margin-top:18px; line-height:1.9;}
.u-inline-e2f3ba1c {display:grid; gap:20px;}
.u-inline-e4c93071 {background:var(--c-ink);}
.u-inline-e883810a {display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;}
.u-inline-e8c5dc62 {background:#2f6674;}
.u-inline-ecd600e6 {background:#dfdfdf;}
.u-inline-ed4c9335 {margin-top:14px; line-height:1.9;}
.u-inline-f0778f9d {margin-top:28px;}
.u-inline-f465f4af {--chars: 15; --delay: 0.3s;}
.u-inline-f50ca353 {border-radius:var(--radius-sm);}
.u-inline-f6ec797b {font-weight:400; font-size:clamp(22px,2.5vw,34px); color:var(--c-ink); line-height:1;}
.u-inline-f9f742b3 {width:95%;}
.u-inline-fe210ed1 {--chars: 13; --delay: 0s;}
.u-inline-feb93d32 {left:80%;}
/* --- End Inline Style Migration Utilities --- */

/* --- 12. UI/UX Refinements (Usability Checklist) --- */

/* スキップリンク（キーボードナビゲーション用） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  background: var(--c-ink);
  color: var(--c-white);
  padding: 8px 18px;
  border-radius: 6px;
  font-size: var(--fs-5);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.skip-link:focus {
  left: 8px;
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* フォーカスリング — キーボード操作時のみ表示 */
a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* フォーム入力はborderで表現済みなのでfocus-visibleのoutlineは不要 */
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
}

/* 必須フィールドマーク（* で視覚的に必須を示す） */
.form-field:has(input[required]) label::after,
.form-field:has(textarea[required]) label::after {
  content: " *";
  color: #c0392b;
  font-weight: 900;
}

/* エラー状態 — ユーザー操作後に :invalid になった入力欄 */
.form-field input:user-invalid,
.form-field textarea:user-invalid {
  border-color: #c0392b;
  background: #fff8f8;
}

.form-field input.is-invalid,
.form-field textarea.is-invalid {
  border-color: #c0392b;
  background: #fff8f8;
}

/* 送信ボタンのトランジション */
.form-submit {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.form-submit:active:not(:disabled) {
  transform: scale(0.98);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 送信結果メッセージ */
.form-result {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: var(--fs-4);
  font-weight: 700;
  text-align: center;
}

.form-result--success {
  background: #eaf7ec;
  color: #1e7a31;
  border: 1px solid #a8e0b0;
}

.form-result--error {
  background: #fff0f0;
  color: #c0392b;
  border: 1px solid #f5a8a8;
}

/* タッチターゲット拡大（最小 40px） */
.member-links .x-icon-link {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

/* ↗ リンクをテキストラベル付きバッジに変更（Recognition over Recall） */
.member-links a:not(.x-icon-link) {
  width: auto;
  min-width: auto;
  min-height: 40px;
  height: auto;
  font-size: var(--fs-5);
  padding: 0 10px;
  color: var(--c-white);
}

.member-links a:not(.x-icon-link)::before {
  content: none;
}

/* カード・バナーボタンのホバーに立体感を追加 */
.card-banner-btn,
.service-banner-btn,
.works-tile-btn,
.cm-btn {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.card-banner-btn:hover,
.service-banner-btn:hover,
.works-tile-btn:hover,
.cm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

/* プロフィールリンクボタンのホバー */
.profile-link-btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.profile-link-btn:hover {
  background: var(--bg);
  border-color: var(--surface-border-strong);
  transform: translateY(-1px);
}

/* SNS・フッターリンクのフォーカス */
.sns-grid a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* --- Outcome CTA: toC の悩み募集 / toB の課題相談 --- */
.outcome-panel {
  overflow: hidden;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.outcome-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 30px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--surface-shadow);
}

.outcome-card--toc {
  background: linear-gradient(145deg, #fff9dc 0%, #fff 72%);
}

.outcome-card--tob {
  background: linear-gradient(145deg, #eef6ff 0%, #fff 72%);
}

.outcome-card__label {
  margin: 0 0 12px;
  color: var(--c-dim);
  font-size: var(--fs-5);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.outcome-card h3 {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.45;
}

.outcome-card > p:not(.outcome-card__label) {
  flex: 1;
  margin: 0 0 24px;
  line-height: 1.8;
}

.outcome-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--c-dark);
  color: var(--c-white);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.outcome-card__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.18);
}

.form-field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-ink);
  font: inherit;
}

.form-field select:focus,
.form-field select:focus-visible {
  border-color: var(--blue);
  outline: 3px solid var(--blue-soft);
  outline-offset: 1px;
}

.form-field:has(select[required]) label::after {
  content: " *";
  color: #c0392b;
}

@media (max-width: 700px) {
  .outcome-grid {
    grid-template-columns: 1fr;
  }

  .outcome-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .outcome-card__button {
    width: 100%;
  }
}

/* アイコン: Material Symbols Outlined（絵文字は使わない） */
/* 文中・ラベル内に置くアイコン（見出し・チップ・表ヘッダーなど） */
.material-symbols-outlined.icon-inline {
  font-size: 1.2em;
  vertical-align: -0.2em;
}

.support-icon .material-symbols-outlined {
  font-size: 44px;
}

.asset-list-icon .material-symbols-outlined {
  font-size: 1.1em;
  vertical-align: -0.18em;
}