/* 英語版（/en, /en/japan, /en/tomoya）専用の層（2026-10-05）。
   トップの css/home.css の部品（ヒーローの流れの絵・数字・サービス枠・進め方の線・導入前後の切替）を再利用し、
   ここには英語版にしか無い部品だけを書く。色は styles.css の既存トークンと home.css の紫〜ミントだけ。
   文字サイズは 14 / 16 / 25 / 40 / 64 の5段（home.css と同じ）。 */

/* 英語の見出しは Inter で組む（和文の display 書体は英語ページでは読み込まない） */
html[lang="en"] { --font-display: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html[lang="en"] .h-title { letter-spacing: -.02em; }
html[lang="en"] .h-head h2, html[lang="en"] .h-statement { letter-spacing: -.01em; }

/* ヒーローの絵：英語ではガラスの文字を横書きにする */
html[lang="en"] .h-glass-label { writing-mode: horizontal-tb; letter-spacing: .02em; text-align: center; line-height: 1.5; padding-inline: var(--s-2); }
html[lang="en"] .h-sources li { font-weight: 500; }

/* --- 交点（Technology × Business × People）：表の形で3行 ------------------------ */
.e-cross { margin-top: var(--s-7); border-top: 1px solid var(--line); }
.e-cross div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.e-cross dt { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--brand); }
.e-cross dd { max-width: 40em; font-size: var(--fs-base); line-height: 1.8; color: var(--body); }

/* --- サービス3本柱：上段に「広い1つ＋狭い1つ」、下段に日本向けを全幅で（home.css の h-svc を使う） --- */
.e-pillars > :nth-child(3) { grid-column: 1 / -1; }
/* 主要サービス3つ（2026-10-07）：海外向けの主役である中央（Japan Launch）を広く・淡色の面に。等幅にしない */
.e-pillars.is-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.e-pillars.is-three > :nth-child(3) { grid-column: auto; }
.e-secondary { margin-top: var(--s-6); font-size: var(--fs-base); line-height: 1.8; color: var(--body); }
.e-secondary a, .e-cross dd a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) { .e-pillars.is-three { grid-template-columns: minmax(0, 1fr); } }

/* --- 横に並ぶ5段階（Japanページ）。home.css の h-solve を5列で使う ------------- */
.h-solve.e-five .h-solve-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }

/* --- 2列の項目一覧（対象読者・できること） --------------------------------- */
.e-list2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); margin-top: var(--s-7); padding: 0; list-style: none; border-top: 1px solid var(--line); }
.e-list2 li { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.e-list2 b { display: block; font-size: var(--fs-base); line-height: 1.6; color: var(--ink); }
.e-list2 span { display: block; margin-top: var(--s-1); font-size: var(--fs-base); line-height: 1.8; color: var(--body); }

/* 強みの式：日本の実務 + 業務設計 + テクノロジー + 実装 */
.e-formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding: 0; list-style: none; }
.e-formula li { padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background-color: var(--surface); font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.e-formula li.is-op { padding: 0; border: 0; background: none; color: var(--meta); font-weight: 400; }

/* Japanページのヒーロー：右側にブランドのリボンだけを置く（文字の後ろには敷かない） */
.e-hero-ribbon { position: relative; }
.e-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: -1; pointer-events: none; }
.e-hero-art .home-ribbon { left: -10%; width: 130%; opacity: .8; }
.e-hero-ribbon .home-hero-copy { max-width: 46rem; }

/* 実績の出どころの注記（海外の実績があるように見せない） */
.e-note { margin-top: var(--s-5); max-width: 40em; font-size: var(--fs-note); line-height: 1.7; color: var(--meta); }

/* --- Tomoya：デジタル名刺 ---------------------------------------------------- */
.t-card { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.t-card-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.t-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 30px 60px -30px rgba(50, 50, 93, .25), 0 18px 36px -18px rgba(0, 0, 0, .18); }
.t-name { margin-top: var(--s-4); font-family: var(--font-display); font-size: var(--fs-home-hero); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.t-role { margin-top: var(--s-4); font-size: var(--fs-base); font-weight: 700; line-height: 1.6; color: var(--ink); }
.t-role span { display: block; font-weight: 400; color: var(--meta); }
.t-line { margin-top: var(--s-5); font-size: var(--fs-h3); line-height: 1.5; color: var(--body); }
/* すぐ押せるリンク。li を足せば Instagram などを追加できる */
.t-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); padding: 0; list-style: none; }
.t-links a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background-color: var(--surface);
  font-size: var(--fs-base); font-weight: 700; color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-micro) ease, color var(--dur-micro) ease;
}
.t-links a.is-primary { border-color: var(--brand-fill); background-color: var(--brand-fill); color: var(--on-dark); }
.t-links a:hover { border-color: var(--brand); color: var(--brand); }
.t-links a.is-primary:hover { background-color: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-dark); }
.t-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t-links .i { width: 16px; height: 16px; stroke-width: 2; }

/* 物語：年表ではなく、章ごとの左右2列 */
.t-story { margin-top: var(--s-7); padding: 0; list-style: none; border-top: 1px solid var(--line); }
.t-story li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.t-story h3 { font-size: var(--fs-h3); line-height: 1.4; color: var(--ink); }
.t-story .t-when { display: block; margin-bottom: var(--s-2); font-size: var(--fs-note); font-weight: 700; letter-spacing: .08em; color: var(--brand); }
.t-story p { font-size: var(--fs-base); line-height: 1.8; color: var(--body); }
.t-story p + p { margin-top: var(--s-3); }

/* --- 相談（英語版共通） ------------------------------------------------------- */
.e-contact .contact-inner { max-width: none; }
.e-contact h2, .e-contact .lead { max-width: 30em; }
.e-contact .lead { font-size: var(--fs-base); }
.e-contact .actions .button { gap: var(--s-3); }

/* --- タブレット・スマホ ------------------------------------------------------ */
@media (max-width: 1024px) {
  .t-card-grid, .t-story li { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .t-photo { max-width: 360px; }
  .h-solve.e-five .h-solve-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); }
  .h-solve.e-five .h-solve-steps > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .e-cross div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .e-list2 { grid-template-columns: minmax(0, 1fr); }
  .h-solve.e-five .h-solve-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .t-line { font-size: var(--fs-base); }
  /* 名刺のQRから来た人が、最初の画面で名前とリンクに届くよう写真を小さくする */
  .t-card { padding-top: var(--s-6); }
  .t-photo { max-width: 128px; }
  .e-hero-art { width: 100%; opacity: .5; }
  .t-links li { flex: 1 1 calc(50% - var(--s-3)); }
  .t-links a { width: 100%; justify-content: center; }
}

/* ヒーローの下の小さな名札。ACLab は個人の屋号なので、最初の画面で「誰がやっているか」を見せる */
.e-founder { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background-color: rgba(255, 255, 255, .7); color: var(--ink); text-decoration: none; min-height: 44px; }
.e-founder img { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; }
.e-founder span { font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }
.e-founder b { display: block; font-size: var(--fs-base); color: var(--ink); }
.e-founder:hover { border-color: var(--brand); }
.e-founder:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Japanページのヒーロー（案B）：本社の仕事 → 日本向けに合わせて作る → 日本側の運営、の橋渡し */
.e-bridge .h-out.e-out { stroke-width: 3; }
.e-targets { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.e-targets li {
  position: absolute; right: 0; top: calc(var(--y) / 440 * 100%); transform: translateY(-50%);
  padding: var(--s-1) var(--s-3); border: 1px solid var(--brand-fill); border-radius: var(--r-sm);
  background-color: var(--tint); font-size: var(--fs-note); font-weight: 700; line-height: 1.5; color: var(--brand-strong); white-space: nowrap;
}
.e-side { position: absolute; top: 8%; font-size: var(--fs-note); font-weight: 700; letter-spacing: .06em; color: var(--meta); }
.e-side-l { left: 0; }
.e-side-r { right: 0; }
@media (max-width: 768px) {
  /* 狭い幅ではガラスを細くし、左右の札を2行まで折り返して重ならないようにする */
  .e-bridge .h-glass { width: 16%; }
  .e-bridge .h-glass-label { font-size: var(--fs-note); padding-inline: var(--s-1); }
  .e-bridge .h-sources li, .e-targets li { max-width: 32%; white-space: normal; text-align: center; }
}

/* 事例：何を作ったかの1行（道具名まで書く） */
.e-built { margin-top: var(--s-2); font-size: var(--fs-note); line-height: 1.6; color: var(--meta); }
.e-contact .e-expect-title { margin-top: var(--s-8); font-size: var(--fs-h3); line-height: 1.4; color: var(--ink); }
.e-contact .spec { max-width: 52rem; }