/* ============================================================
   デザイン刷新（実証5）
   採用案: A. Notion Warm Workspace（青軸）＋ B. HealthTech の角丸

   移植元のテーマ CSS（HubSpot 由来・minified）は書き換えず、
   このファイルを後から読み込んで上書きする。
   元に戻したいときは functions.php の enqueue を外すだけでよい。
   ============================================================ */

:root {
  /* --- 色: B. HealthTech Plataforma Clinica（グリーン軸）
     値は参照レンダリング shiftone-reference-selection.local.html の
     .k-health トークンセットに合わせている。 --- */
  --ink: #1a1a1a;          /* 純黒をやめる（DESIGN.md の Don'ts）。白地 17.40:1 */
  --black: #1a1a1a;        /* 既存CSSが --black を参照しているため合わせる */
  --alt: #f4faf7;          /* 緑みのある白（セクション交互の背景） */
  --gray: #f4faf7;
  --line: #e1ebe6;
  --line-soft: #eef4f1;
  --muted: #4b5563;        /* 白地 7.56:1 */
  --muted-strong: #4b5563;
  /* サンプルの #9CA3AF は白地 2.54:1 で AA を割る。装飾専用にして、
     文字には --label を使う。 */
  --faint: #9ca3af;
  --label: #6b7280;        /* 小さなラベル文字: 白地 4.83:1 */

  /* ブランド色は仕様通り #059669。ただし白地・白文字ともに 3.77:1 で
     通常サイズの文字では AA(4.5:1) に届かないため、
     「文字が乗る面」だけ同系の濃い #047857(5.48:1) を使う。 */
  --accent: #059669;       /* Emerald 600 = ブランド色（塗り・図版） */
  --accent-ink: #047857;   /* Emerald 700 = 文字色／白文字を載せる面 */
  --deep: #065f46;         /* Emerald 800。白文字 7.68:1 */
  --tint: #ecfdf5;         /* Emerald 50 */

  /* --- 角丸: 現行は全9箇所 0。B の rounded スケールを導入 --- */
  --r-btn: 12px;           /* B: rounded.sm */
  --r-card: 24px;          /* B: rounded.md */
  --r-lg: 36px;            /* B: rounded.lg */
  --r-pill: 9999px;

  /* --- 見出し: 巨大タイポを「人間の話し声」のサイズへ --- */
  --fs-h1: clamp(25px, 3.7vw, 42px);
  --ls-h1: -0.015em;
  --lh-display: 1.42;
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --ls-h2: -0.01em;
  --lh-heading: 1.3;

  /* --- 影: サンプルに合わせ単層。緑みの落ち影で hover を柔らかく --- */
  --shadow: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow-hover: 0 4px 20px rgba(5, 150, 105, .14);
}

/* 8px グリッド・--container・--header-h・書体は無変更 */

body {
  color: var(--ink);
  background: #fff;
}

/* 元は罫線で仕切る全幅グリッドだったため、セクション自身に左右余白が無い。
   カード基調にすると端に貼り付くので、ガターを戻す。 */
.home-services,
.home-process,
.home-voices,
.works-featured,
.home-company {
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------
   ヒーロー: 全面タイポ → split-screen（左テキスト / 右ビジュアル）

   元の構造は「.hero が縦2段（main / rail）」「.hero__main が2列（見出し / シェブロン）」
   「.hero__rail が3列のボーダー付きストリップ」。
   これを grid-template-areas で「左=見出し＋コピー＋CTA / 右=イラスト」に組み替える。
   ------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "main visual"
    "rail visual";
  align-items: center;
  gap: clamp(24px, 3vw, 40px) clamp(32px, 5vw, 72px);
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  min-height: auto;
  border-bottom: 0;
}

.hero__main {
  grid-area: main;
  align-self: end;
  display: block;          /* 元の2列グリッドを解除 */
  grid-template-columns: none;
  min-height: 0;
  padding: 0;
  gap: 0;
}

.hero__title {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-display);
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  margin: 0;
  max-width: min(20ch, 100%);
}

/* 巨大タイポの装飾シェブロンは、話し声サイズの見出しには過剰 */
.hero__chevrons { display: none; }

.hero__rail {
  grid-area: rail;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border: 0;
  padding: 0;
  min-height: 0;
  grid-template-columns: none;
  max-width: min(48ch, 100%);
}

/* 元の .hero__rail>* は flex + 大きな padding。ストリップ用の指定なので解除する */
.hero__rail > * {
  display: block;
  padding: 0;
  margin: 0;
}

.hero__rail-index {
  border-right: 0;
  color: var(--accent-ink);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  justify-content: flex-start;
}

.hero__rail-copy {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.8;
  padding-inline: 0;
  max-width: none;
}

/* ヒーローの CTA は「プライマリボタン」にする。
   候補A の front-matter は背景 #ffffff / 文字 #213183 で、
   これは実質セカンダリボタン。アクセントを塗りにするのが正（判定時に検出済み）。 */
.hero__rail-link {
  justify-self: start;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 13px 22px;
  border: 0;
  border-top: 0;
  border-left: 0;
  border-radius: var(--r-btn);
  background: var(--accent-ink);   /* 白文字を載せるので濃い方 */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: background 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}
/* 元は「反転して黒背景」。角丸ボタンには合わないのでネイビーに沈める */
.hero__rail-link:hover {
  background: var(--deep);
  color: #fff;
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.hero__rail-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hero__rail-link:hover svg { transform: translateX(2px); }

/* 右側のビジュアル枠（フラットイラスト） */
.hero__visual {
  grid-area: visual;
  align-self: center;
  border-radius: var(--r-lg);
  background: var(--tint);
  padding: clamp(20px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__visual svg { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "main"
      "rail";
  }
}

/* ------------------------------------------------------------
   セクション見出し
   元は「120px の番号 | 見出し | 説明」を罫線で仕切る3列グリッド。
   角丸カード基調と噛み合わないので、罫線を外して縦積みにする。
   ------------------------------------------------------------ */
.sectionHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 8px clamp(24px, 4vw, 56px);
  border-bottom: 0;
  min-height: 0;
  padding-block: clamp(32px, 4vw, 56px);
}
.sectionHeader > * {
  display: block;
  padding: 0;
  margin: 0;
}
.sectionHeader span,
.home-section-heading span {
  border-right: 0;
  color: var(--accent-ink);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.6;
  justify-content: flex-start;
  grid-column: 1;
}
.sectionHeader h2 { grid-column: 1; }
.sectionHeader p {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-left: 0;
  border-top: 0;
  align-self: end;
}

@media (max-width: 900px) {
  .sectionHeader { grid-template-columns: 1fr; }
  .sectionHeader h2,
  .sectionHeader p { grid-column: 1; grid-row: auto; }
}

.sectionHeader h2,
.home-section-heading h2,
.works-section-title {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-heading);
  color: var(--ink);
}

.sectionHeader p,
.home-section-heading p {
  color: var(--muted);
  line-height: 1.8;
  max-width: min(72ch, 100%);
}

/* ------------------------------------------------------------
   Services: 4等分カラム → 非対称グリッド
   （両 DESIGN.md とも「等幅3分割」を禁止している）
   ------------------------------------------------------------ */
.home-service-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.home-service-card,
.home-service-card:nth-child(2n) {
  grid-column: span 3;
  background: #fff;
  border: 1px solid var(--line);   /* 元は border-bottom/right のみ */
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 32px);
  /* 元は min-height 390px ＋ h3 に margin-top 112px で下端を揃える設計。
     カード化したので詰めて、内容量に追従させる */
  min-height: 0;
  box-shadow: var(--shadow);
  transition: box-shadow 240ms ease-out, transform 240ms ease-out;
}
/* 1枚目を広く取り、2列目以降を非対称に割る */
.home-service-card:nth-child(1) { grid-column: span 4; }
.home-service-card:nth-child(2) { grid-column: span 2; }
.home-service-card:nth-child(3) { grid-column: span 2; }
.home-service-card:nth-child(4) { grid-column: span 4; }

.home-service-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.home-service-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.home-service-card__top span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--tint);
  /* --accent は --tint 上で 3.58:1 と AA に届かない。--deep なら 9.23:1 */
  color: var(--deep);
  font-size: .8125rem;
  font-weight: 700;
}
.home-service-card__top p {
  margin: 0;
  color: var(--label);
  font-size: .75rem;
  letter-spacing: .1em;
}

.home-service-card h3 {
  font-size: 1.25rem;
  letter-spacing: -.01em;
  line-height: 1.5;
  color: var(--ink);
  /* 元は margin-top: clamp(64px,8vw,112px) で下端揃え */
  margin: 0 0 8px;
  max-width: none;
}
.home-service-card > p,
.home-service-card p {
  color: var(--muted);
  line-height: 1.8;
  margin-top: 0;
  max-width: none;
}
.home-service-card__top > span { font-size: .8125rem; letter-spacing: 0; }

@media (max-width: 900px) {
  .home-service-grid { grid-template-columns: 1fr; }
  .home-service-card,
  .home-service-card:nth-child(n) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   リンク・ボタン共通
   ------------------------------------------------------------ */
/* 元は border-bottom 付きの全幅リンクで、hover で黒背景に反転していた。
   角丸カードの中では罫線が「壊れた下線」に見えるため、テキストリンクに戻す。 */
.home-link {
  border-bottom: 0;
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  justify-content: flex-start;
  gap: 8px;
  margin-top: auto;
  padding: 6px 0 0;
  border-radius: var(--r-btn);
  transition: color 200ms ease-out, gap 200ms ease-out;
}
a.home-link:hover {
  background: transparent;   /* 黒背景反転を打ち消す */
  color: var(--deep);
  gap: 12px;
}
.home-connection-panel > .home-link,
.home-connection-panel > nav { border-left: 0; }

/* キーボード操作の可視性は落とさない */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Works: 罫線グリッド＋純黒の巨大タイポ → 角丸カード
   ------------------------------------------------------------ */
.works-featured { border-bottom: 0; }

.works-featured-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.works-featured-card,
.works-featured-card:nth-child(n) {
  border: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 240ms ease-out, transform 240ms ease-out;
}
.works-featured-card:first-child,
.works-featured-card:nth-child(4) { grid-column: span 7; }
.works-featured-card:nth-child(2),
.works-featured-card:nth-child(3) { grid-column: span 5; }
.works-featured-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.works-featured-card > a {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  height: 100%;
}
/* 元は hover で全面が黒に反転。柔らかい配色に合わないので面は白のまま */
.works-featured-card > a:hover { background: #fff; color: var(--ink); }
.works-featured-card > a:hover .works-featured-copy > p { color: var(--muted); }
.works-featured-card > a:hover .works-arrow { filter: none; }

.works-image,
.works-typographic-visual { border-bottom: 1px solid var(--line); background: var(--alt); }

/* 純黒の面はネイビーへ（両 DESIGN.md とも純黒を Don'ts にしている） */
.works-typographic-visual { background: var(--deep); color: #fff; }
.works-typographic-visual strong {
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -.02em;
  line-height: 1.2;
  text-transform: none;
}

.works-featured-copy { min-height: 0; padding: clamp(20px, 2.4vw, 28px); }
.works-featured-copy h3 {
  font-size: 1.25rem;
  letter-spacing: -.01em;
  line-height: 1.5;
  margin-top: 12px;
}
.works-featured-copy > p { color: var(--muted); margin-top: 8px; }
.works-featured-copy > .works-arrow { display: none; }  /* 角丸カードでは矢印の絶対配置が浮く */

.works-card-meta { color: var(--label); }

.works-image-label {
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--deep);
}

.works-section-mark { display: none; }  /* 巨大シェブロンは新しい見出しサイズに対して過剰 */

.works-more {
  background: var(--tint);
  border: 0;
  border-radius: var(--r-card);
  color: var(--deep);
  margin-top: clamp(16px, 2vw, 24px);
  padding: clamp(20px, 2.4vw, 28px);
}
.works-more > span:first-child { font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.4; }
.works-more .works-arrow { filter: none; }

@media (max-width: 900px) {
  .works-featured-card,
  .works-featured-card:nth-child(n) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   その他のカード類
   ------------------------------------------------------------ */
.home-connection-panel,
.home-evidence,
.home-process {
  border-radius: var(--r-card);
}

.home-connection-panel { border-top: 0; }
.home-connection-panel h3 {
  /* 元は clamp(38px,5vw,72px)。話し声サイズの見出しに合わせて落とす */
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.015em;
  line-height: 1.5;
  max-width: 22em;
}
.home-connection-panel--dark {
  background: var(--deep);   /* 純黒をやめる */
  color: #fff;
  border-radius: var(--r-lg);
}
.home-connection-panel--dark a { color: #fff; }
.home-connection-panel--dark a.home-link:hover { background: transparent; color: #fff; opacity: .8; }

/* セクション背景を白 / 暖色白の交互に */
.home-evidence,
.home-process { background: var(--alt); }

/* ------------------------------------------------------------
   お客さまの声（新設）
   ------------------------------------------------------------ */
.home-voices {
  padding-block: clamp(48px, 7vw, 96px);
}

.home-voices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
}

.home-voice {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-voice blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.9;
}

.home-voice figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .875rem;
}

.home-voice__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 auto;
}

.home-voice__name { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------
   動きは transform / opacity のみ（DESIGN.md の規定）
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------
   お問い合わせ（CTA）
   元は「グレースケールにした写真＋黒45%オーバーレイ＋純黒70%の帯」で、
   刷新後の配色から完全に浮いていた。
   参照レンダリングの .sp-cta（濃緑ベタ＋白文字＋白ボタン）に合わせる。

   構造は section#contact > .contact_area > (.contact_bg, .black_bg)。
   .contact_area を緑のブロック本体にして、子2つをその中に収める。
   ------------------------------------------------------------ */
#contact { padding: clamp(48px, 7vw, 96px) var(--gutter); }

.contact_area,
.home-page .contact_area {
  background: var(--deep);
  border-radius: var(--r-lg);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px clamp(20px, 3.6vw, 46px);
  padding: clamp(32px, 4.5vw, 56px);
  margin: 0;
  overflow: visible;
}

/* 写真のグレースケールと黒被せをやめ、単なる中身の入れ物にする */
.contact_bg,
.home-page .contact_bg {
  filter: none;
  background-image: none !important;
  background: transparent;
  min-height: 0;
  height: auto;
  width: auto;
  padding: 0;
  padding-inline: 0;
  display: block;
}
.contact_bg::after { display: none; }   /* 黒45%オーバーレイを消す */

.contact_box,
.home-page .contact_box {
  color: #fff;
  max-width: min(48ch, 100%);
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
}
.contact_box h2 {
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.45;
  margin: 0;
  padding: 0;
}

/* CTA ボタン: 濃緑の上なので白ベタ＋濃緑文字（7.68:1）。
   元は width:100% の枠線ボタンだったので、幅も戻す */
.contact_box .form_link,
.home-page .form_link {
  display: inline-flex;
  width: auto;
  min-width: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 21px;
  border: 0;
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--deep);
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.contact_box .form_link span { font-size: 1rem; letter-spacing: 0; }
.contact_box .form_link:hover {
  background: #fff;
  color: var(--deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transform: translateY(-1px);
}
.contact_box .form_link img { width: 18px; filter: none; }
.contact_box .form_link:hover img { filter: none; }

/* 元は「黒70%の帯を写真に重ねる」レイアウト。緑ブロック内の右側テキストにする */
.contact_area .black_bg,
.home-page .contact_area .black_bg {
  background: transparent;
  color: #fff;
  position: static;
  top: auto;
  width: auto;
  height: auto;
  margin: 0 0 0 auto;
  padding: 0;
  max-width: min(36ch, 100%);
  display: flex;
  align-items: center;
}
.contact_area .black_bg p {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0;
  opacity: .85;
  max-width: none;
}

@media (max-width: 900px) {
  .contact_area { flex-direction: column; align-items: flex-start; }
  .contact_area .black_bg { margin-left: 0; }
}

/* ------------------------------------------------------------
   フッター
   元は純黒ベタ＋グレー文字。刷新後は濃緑の CTA の直後に来るため、
   暗い塊が二つ続いて重くなる。緑みの白（--alt）に反転させて着地させる。
   参照レンダリングにフッターの指定は無いので、ここは設計判断。
   ------------------------------------------------------------ */
footer {
  background: var(--alt);
  color: var(--ink);
  border-top: 1px solid var(--line);
  min-height: 0;
}

footer > div {
  border-right: 1px solid var(--line);
}
footer > div:last-child { border-right: 0; }

footer strong {
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--ink);
}

footer p { color: var(--muted); text-align: left; padding: 0; }
footer p a { color: var(--muted); }

footer .footer-heading {
  color: var(--label);
  letter-spacing: .08em;
}

footer a {
  color: var(--ink);
  transition: color 200ms ease-out, opacity 200ms ease-out;
}
footer a:hover { color: var(--accent-ink); opacity: 1; }

footer small { color: var(--label); }

@media (max-width: 900px) {
  footer > div { border-right: 0; border-bottom: 1px solid var(--line); }
  footer > div:last-child { border-bottom: 0; }
}