/* =============================================================
   多言語（EN / ES）ページ用
   - 言語切替スイッチャー（JP / EN / ES）
   - 欧文ページの組み（和文前提の字間・行間を欧文向けに戻す）
   日本語ページには .lang-ja が付くので、ここの調整は当たらない。
   ============================================================= */

/* ---------- 言語切替スイッチャー ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem;
  background: rgba(255, 255, 255, 0.6);
}

.lang-switch-item {
  display: inline-block;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--gray);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.lang-switch-item:hover { color: var(--gold); }

.lang-switch-item.is-current {
  background: var(--gold);
  color: #fff;
}

.lang-switch-item.is-current:hover { color: #fff; }

/* ヘッダー右側（ナビ＋言語切替＋ハンバーガー）をひとまとめに */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* 言語切替は nav-links の外に置く＝スマホでも常に見える */
.nav-lang-slot { display: flex; align-items: center; }
.nav-lang-slot:empty { display: none; }
.nav-lang-slot a::after { display: none !important; }

@media (max-width: 900px) {
  .nav-right { gap: 0.6rem; }
  .lang-switch-item { padding: 0.3rem 0.5rem; font-size: 0.68rem; }
}


/* ---------- 欧文ページの組み ---------- */
.lang-en,
.lang-es {
  /* 和文用に詰めてある字間を欧文の標準へ戻す */
  letter-spacing: 0;
}

.lang-en .hero-title,
.lang-es .hero-title,
.lang-en .section-title,
.lang-es .section-title,
.lang-en .page-title,
.lang-es .page-title,
.lang-en .biz-detail-title,
.lang-es .biz-detail-title,
.lang-en .cta-import-title,
.lang-es .cta-import-title {
  font-family: var(--font-serif);
  letter-spacing: 0.01em;
  line-height: 1.24;
  /* 和文は禁則で自然に折れるが、欧文は単語単位で折らないと不格好になる */
  word-break: normal;
  overflow-wrap: break-word;
}

.lang-en .hero-desc,
.lang-es .hero-desc,
.lang-en .page-desc,
.lang-es .page-desc,
.lang-en .section-desc,
.lang-es .section-desc,
.lang-en .trade-lead,
.lang-es .trade-lead,
.lang-en .trade-cat p,
.lang-es .trade-cat p,
.lang-en .biz-detail-text p,
.lang-es .biz-detail-text p,
.lang-en .biz-feature-list li,
.lang-es .biz-feature-list li,
.lang-en .mvv-detail-item p,
.lang-es .mvv-detail-item p {
  letter-spacing: 0;
  line-height: 1.75;
}

/* セクションラベルは日本語ページでは英字を大文字で入れているが、
   EN / ES では文章として書いているので大文字変換を外す */
.lang-en .section-label,
.lang-es .section-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* 会社概要テーブル：欧文の見出し（Representative 等）は日本語より長いので
   nowrap を外す。狭い画面では左右2列だと値の側が潰れるので縦積みにする。 */
.lang-en .company-table th,
.lang-es .company-table th { white-space: normal; }

@media (max-width: 640px) {
  .lang-en .company-table tr,
  .lang-es .company-table tr {
    display: block;
    border-bottom: 1px solid var(--border);
  }
  .lang-en .company-table th,
  .lang-es .company-table th,
  .lang-en .company-table td,
  .lang-es .company-table td {
    display: block;
    width: auto;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
  }
  .lang-en .company-table th,
  .lang-es .company-table th { padding-bottom: 0.2rem; }
  .lang-en .company-table td,
  .lang-es .company-table td { padding-top: 0; }
}

/* 「次に探している領域」の見出しに余白 */
.trade-spec-label--gap { margin-top: 2rem; }


/* ---------- 欧文ヒーローの折り返し ---------- */
/* 日本語は短い行で改行しても収まるが、欧文は同じ位置で折ると
   1行が余って間延びする。狭い画面では手動改行を無効にして自然に流す。 */
@media (max-width: 780px) {
  .lang-en .hero-title br,
  .lang-es .hero-title br,
  .lang-en .cta-import-title br,
  .lang-es .cta-import-title br,
  .lang-en .biz-detail-title br,
  .lang-es .biz-detail-title br,
  .lang-en .hero-desc br,
  .lang-es .hero-desc br { display: none; }
}

/* 和文用の広い字送りは欧文だと単語が分断されて読みにくい */
.lang-en .hero-sub,
.lang-es .hero-sub {
  letter-spacing: 0.22em;
  font-size: 0.72rem;
}

.lang-en .hero-desc,
.lang-es .hero-desc { line-height: 1.7; }

@media (max-width: 600px) {
  .lang-en .hero-title,
  .lang-es .hero-title { font-size: 2rem; line-height: 1.2; }
  .lang-en .hero-desc,
  .lang-es .hero-desc { font-size: 0.92rem; margin-bottom: 2rem; }
}

/* ---------- 実物を見せる3枚組（自社ドリップバッグ等） ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.proof-item {
  margin: 0;
}

.proof-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}

.proof-item figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--gray);
}

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .proof-item:last-child { grid-column: 1 / -1; }
  .proof-item:last-child img { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
  .proof-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .proof-item:last-child img { aspect-ratio: 4 / 3; }
}

/* 会社ページの創業者ブロック：引用が左寄せの本文カラムに入るので中央寄せを外す */
.biz-detail-text .story-quote {
  padding-left: 0;
  margin-bottom: 1.6rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

/* 欧文は1段落が長くなるので段落間に余白を入れる（和文ページには当てない）。
   テーマの p は margin:0 なので、そのままだと段落の切れ目が消える。 */
.lang-en .biz-detail-text p + p,
.lang-es .biz-detail-text p + p,
.lang-en .mvv-detail-item p + p,
.lang-es .mvv-detail-item p + p,
.lang-en .trade-cat p + p,
.lang-es .trade-cat p + p { margin-top: 1.1rem; }

/* 本文カラムに入れた引用は、中央寄せ用の行送りだと間延びする */
.biz-detail-text .story-quote { line-height: 1.55; }

/* 本文カラムの引用符は 2.5rem だと1行目の行間だけ広がって見えるので小さくする */
.biz-detail-text .story-quote::before,
.biz-detail-text .story-quote::after { font-size: 1.4rem; }