/* Shared component styles — Riz株式会社 */

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  font-family: var(--font-body);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
}

/* 日本語の折り返し品質を全体で改善（禁則・文節考慮・孤立行防止）
   ※ 折返し制御はブロック級のみ。span/a/label には掛けない（ボタン等の意図せぬ改行を避ける） */
h1, h2, h3, h4, p, li, dd, dt {
  line-break: strict;             /* 行頭・行末の禁則処理 */
  word-break: auto-phrase;        /* 文節単位で改行（対応ブラウザ。非対応は自動でnormal） */
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;             /* 見出しの各行の長さを均等化 */
}
p { text-wrap: pretty; }          /* 段落末の孤立文字・短い行を防ぐ */

.container-x { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }

/* Section eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-primary-dark);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
  background: var(--color-primary);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading); font-weight: 600;
  padding: .8rem 1.5rem; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--dur) var(--ease);
  text-decoration: none; line-height: 1;
}
.btn-primary { background: var(--color-accent-dark); color: #fff; }
.btn-primary:hover { background: #036249; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(5,150,105,.5); }
.btn-secondary { background: var(--color-primary-dark); color: #fff; }
.btn-secondary:hover { background: #0B5566; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(8,145,178,.5); }
.btn-ghost { border: 1.5px solid var(--color-border); color: var(--color-foreground); background: #fff; }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-surface); }

/* Card */
.card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 2rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(22,48,58,.25); border-color: var(--color-secondary); }

/* Icon chip */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: .875rem; flex: none;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Focus visibility */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 4px;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-link { font-weight: 500; color: var(--color-foreground); text-decoration: none; transition: color var(--dur) var(--ease); }
.nav-link:hover { color: var(--color-primary); }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }