/* ========================================
   D-Research — English pages only
   ----------------------------------------
   style.css の後に読み込む。英字組版に必要な差分のみを持つ。
   色・余白・影のトークンは style.css の :root を共有する。
   ======================================== */

:root {
  /* 英字用フォントスタック。日本語版の --font-sans / --font-serif は
     上書きせず、英語ページだけがこちらを参照する。 */
  --font-sans-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --font-serif-en: 'Noto Serif', Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--font-sans-en);
  /* 英文は日本語より行が詰まって見えるため、1.8 から下げる */
  line-height: 1.7;
}

h1, h2, h3,
.section-heading,
.section-subtitle,
.hero-title,
.page-hero-title,
.app-promo-title,
.hero-tagline {
  font-family: var(--font-serif-en);
  /* 日本語見出しの詰め組み前提の字間を英字用に戻す */
  letter-spacing: -0.01em;
}

/* ヒーロー内の日本語フォント前提の指定を英字用に置き換える。
   .hero-pillar / .hero-cross は Noto Sans JP、.hero-tagline は Noto Serif JP を
   前提にしているが、英語ページはどちらも読み込まないため。 */
.hero-pillar,
.hero-cross {
  font-family: var(--font-sans-en);
}

.hero-sub {
  line-height: 1.7;
}

/* 英文は行長が伸びやすい。可読な範囲に制限する。 */
.about-body,
.service-lead-text,
.contact-lead,
.hero-sub,
.en-prose p {
  max-width: 68ch;
}

/* 中央寄せの本文は左右マージンを auto にして 68ch を中央に置く */
.hero-sub,
.contact-lead {
  margin-left: auto;
  margin-right: auto;
}

/* 日本語版の縦書き風・詰め組み用の字間指定を英字向けに緩める */
.section-label,
.section-title,
.credentials-title {
  letter-spacing: 0.16em;
}

/* 日本語版で <br class="br-pc"> による改行制御をしている箇所は、
   英語版では自然改行に任せる */
.br-pc {
  display: none;
}

/* ---- 英語版固有のレイアウト ---- */

/* Who we work with — 読者3層への振り分け */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.audience-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.audience-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.audience-card h3 {
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.audience-card p {
  font-size: var(--text-base);
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}

.audience-card a {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-dark);
}

.audience-card a:hover {
  text-decoration: underline;
}

/* What we do — 4サービスカード */
.en-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.en-service-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.en-service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.en-service-card h3 {
  font-size: var(--text-xl);
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.en-service-card p {
  font-size: var(--text-base);
  color: var(--color-text-light);
  flex: 1;
  margin-bottom: var(--space-md);
}

.en-service-card .service-link {
  font-weight: 700;
  color: var(--color-accent-dark);
}

/* How we work — 4ステップ */
.en-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  counter-reset: en-step;
}

.en-step {
  counter-increment: en-step;
  position: relative;
  padding-top: var(--space-lg);
}

.en-step::before {
  content: counter(en-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-accent);
}

.en-step h3 {
  font-size: var(--text-md);
  color: var(--color-navy);
  margin-bottom: var(--space-2xs);
}

.en-step p {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

@media (max-width: 1024px) {
  .audience-grid,
  .en-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .audience-grid,
  .en-service-grid,
  .en-steps {
    grid-template-columns: 1fr;
  }
}

/* フッターの所在地表示（英語版のみ）。
   海外の読者が所在と連絡先を確認する手段がフッターにしかないため。 */
.footer-address {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}

.footer-address a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

.footer-address a:hover {
  color: var(--color-accent);
}