/* ============================================================
   IYOSUI 英語版グローバルページ (/en/) global-en.css
   カンプ: 260730_IY_web_Global.ai（2026-08-07）

   ★このファイルの全セレクタは body の `.gen-en-page` 配下に限定。
     ページ特化CSSなので、日本語版サイトには一切影響しない。
     - `.gen-en-page` は header-en.php の body_class('gen-en-page') で付与
     - このCSS自体も inc/enqueue.php でテンプレート global-en のときだけ読み込む
     ※新しい規則を足すときも必ず `.gen-en-page ` から書き始めること。
   独自クラス gen-* で構成（responsive-fluid の影響を避ける）
   ============================================================ */

.gen-en-page,
.gen-en-page .gen-main,
.gen-en-page .gen-header,
.gen-en-page .gen-footer {
  font-family: var(--font-en);
}

/* ---- 変数（このページ専用） ---- */
.gen-en-page .gen-main {
  --gen-gold: #796428;
  --gen-teal: #007c8f;      /* 本文ティール＝ブランド確定色（日本語版と統一。旧#1c7f92） */
  --gen-teal-strong: #007c8f;
  --gen-seafoam: #cddfe2;
  --gen-slate: #809cad;
  --gen-dark: #003a4a;
  /* カンプ実測(1200px換算): コンテンツ幅925px・左右マージン138px */
  --gen-maxw: 925px;
  --gen-pad: clamp(20px, 4vw, 30px);
  --gen-sec-pad: clamp(56px, 9vw, 108px);
}

/* ============ ヘッダー ============ */
.gen-en-page .gen-header {
  position: sticky; top: 0; z-index: 100;
  /* 260918校正 pc_1: 日本語版と同様に、後ろの写真が透けるよう半透明に */
  background: var(--color-primary, #007681);
  background: rgb(0 118 129 / 85%);
}
.gen-en-page .gen-header__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 3.2vw, 38px) clamp(18px, 4.2vw, 50px);
}
.gen-en-page .gen-header__logo img { display: block; width: clamp(120px, 12.9vw, 155px); height: auto; }
.gen-en-page .gen-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px);
}
.gen-en-page .gen-nav__list a {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 400;
  letter-spacing: .04em; transition: opacity .2s;
}
.gen-en-page .gen-nav__list a:hover { opacity: .7; }
.gen-en-page .gen-nav__lang a {
  border: 1px solid rgba(255,255,255,.6); border-radius: 3px;
  padding: 4px 12px; font-size: 13px;
}
.gen-en-page .gen-nav__toggle { display: none; }

/* ============ HERO ============ */
.gen-en-page .gen-hero {
  position: relative; min-height: clamp(220px, 26vw, 313px);
  background-size: cover; background-position: center;
  display: flex; align-items: center;
}
.gen-en-page .gen-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,90,110,.15), rgba(0,70,95,.30));
}
/* /en/ 限定（body.gen-en-page でスコープ）。260824 目視調整: 字送り .03em・上-0.2rem・左+0.4rem */
.gen-en-page .gen-hero__title {
  position: relative; z-index: 1;
  width: min(var(--gen-maxw), 100% - var(--gen-pad) * 2); margin: 0 auto;
  padding: 0;
  color: #fff; font-weight: 600;
  font-size: clamp(23.33px, 2.5vw, 30px);
  letter-spacing: .03em; text-shadow: 0 2px 14px rgba(0,0,0,.25);
  top: -0.2rem; left: 0.4rem;
}

/* ============ セクション共通 ============ */
.gen-en-page .gen-sec { position: relative; padding: var(--gen-sec-pad) 0; }
.gen-en-page .gen-sec--white { background: #fff; }
.gen-en-page .gen-sec--seafoam { background: var(--gen-seafoam); }
.gen-en-page .gen-sec--slate { background: var(--gen-slate); }
.gen-en-page .gen-sec--photo { background-size: cover; background-position: center; }
.gen-en-page .gen-sec__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,33,46,.74), rgba(0,40,56,.66)); }
.gen-en-page .gen-sec__overlay--philosophy { background: linear-gradient(180deg, rgba(0,36,68,.62), rgba(0,32,60,.56)); }
/* 写真セクションの白文字は影を付けて可読性確保 */
.gen-en-page .gen-sec--photo .gen-head__title,
.gen-en-page .gen-sec--photo .gen-head__sub,
.gen-en-page .gen-sec--photo .gen-body--light p,
.gen-en-page .gen-sec--photo .gen-body--light .gen-list li,
.gen-en-page .gen-sec--photo .gen-subhead,
.gen-en-page .gen-philosophy .gen-philo dt,
.gen-en-page .gen-philosophy .gen-philo dd { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.gen-en-page .gen-inner {
  position: relative; z-index: 1;
  width: min(var(--gen-maxw), 100% - var(--gen-pad) * 2); margin: 0 auto; padding: 0;
}

/* ---- 見出し（カンプ実測: H2=21pt→29.9px, sub=17pt→24.2px） ---- */
.gen-en-page .gen-head__title {
  font-weight: 600; line-height: 1.2; letter-spacing: .028em;
  font-size: clamp(23.33px, 2.5vw, 30px); margin: 0 0 5px;
  color: #fff;
}
.gen-en-page .gen-head__title--gold { color: var(--gen-gold); }
.gen-en-page .gen-head__sub {
  font-weight: 400; line-height: 1.35; letter-spacing: .028em;
  font-size: clamp(19.33px, 2vw, 24px); margin: 0 0 31.4px;
  color: #fff;
}
.gen-en-page .gen-head__sub--gold { color: var(--gen-gold); }

/* ---- 本文（カンプ実測: 13pt=18.5px・行送り16pt=1.24・折返しはコンテンツ全幅） ---- */
.gen-en-page .gen-body { max-width: none; }
.gen-en-page .gen-body p,
.gen-en-page .gen-body__p {
  color: var(--gen-teal); font-weight: 300; line-height: 1.24;
  letter-spacing: .028em; font-size: clamp(16.33px, 1.54vw, 18.5px);
  text-align: justify; text-justify: inter-word;
  margin: 0 0 22.8px;
}
.gen-en-page .gen-body--light p,
.gen-en-page .gen-body--light .gen-body__p,
.gen-en-page .gen-body--light .gen-subhead { color: rgba(255,255,255,.92); }
.gen-en-page .gen-body p:last-child { margin-bottom: 0; }

.gen-en-page .gen-subhead {
  font-weight: 600; color: var(--gen-teal-strong); line-height: 1.24;
  font-size: clamp(18.33px, 1.67vw, 20px); letter-spacing: .02em;
  margin: 22.5px 0 6px;
}
.gen-en-page .gen-subhead--light { color: #fff; }

/* ---- 箇条書き ---- */
.gen-en-page .gen-list { list-style: none; margin: 0 0 22.3px; padding: 0; }
.gen-en-page .gen-list li {
  position: relative; padding-left: 1.1em; margin-bottom: 0;
  color: var(--gen-teal); font-weight: 300; line-height: 1.24;
  letter-spacing: .028em; font-size: clamp(16.33px, 1.54vw, 18.5px);
}
.gen-en-page .gen-list li::before {
  content: "•"; position: absolute; left: 0; color: currentColor; opacity: .7;
}
.gen-en-page .gen-body--light .gen-list li { color: rgba(255,255,255,.92); }
.gen-en-page .gen-list--2col { display: block; } /* カンプは1カラム */

/* ---- Quality: 特徴リスト（dt太字＋dd） ---- */
.gen-en-page .gen-featlist { margin: 65.9px 0 0; }
.gen-en-page .gen-featlist dt:first-of-type { margin-top: 0; }
.gen-en-page .gen-featlist dt {
  font-weight: 600; color: var(--gen-teal-strong);
  font-size: clamp(18.33px, 1.67vw, 20px); margin-top: 22.5px; line-height: 1.24;
}
.gen-en-page .gen-featlist dd {
  margin: 0; color: var(--gen-teal); font-weight: 300;
  line-height: 1.24; font-size: clamp(16.33px, 1.54vw, 18.5px); letter-spacing: .028em;
}

/* ---- Quality: 2×2画像グリッド ---- */
.gen-en-page .gen-grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .75vw, 9px);
  margin-top: clamp(32px, 4.6vw, 55px);
}
.gen-en-page .gen-grid2__img {
  aspect-ratio: 458 / 296.5; background-size: cover; background-position: center;
  border-radius: 2px;
}

/* ---- Global Reach ---- */
.gen-en-page .gen-global__cols {
  display: grid; grid-template-columns: minmax(0,430px) 1fr; gap: clamp(20px, 2.7vw, 32px);
  align-items: start; margin-top: 0;
}
.gen-en-page .gen-global__map img { width: 100%; height: auto; display: block; border-radius: 2px; }
.gen-en-page .gen-global__species { margin-top: 22.5px; }

/* ---- Narita: フル幅画像 ---- */
.gen-en-page .gen-fullimg {
  aspect-ratio: 926 / 547; background-size: cover; background-position: center;
  border-radius: 2px; margin-top: clamp(28px, 3.6vw, 43px);
}

/* ---- Certifications ---- */
.gen-en-page .gen-cert__cols {
  display: grid; grid-template-columns: minmax(0,501px) 1fr; gap: clamp(24px, 4.8vw, 58px);
  align-items: start; margin-top: 0;
}
.gen-en-page .gen-cert__imgs { position: relative; display: block; aspect-ratio: 366 / 208; margin-top: 26px; }
.gen-en-page .gen-cert__imgs img {
  position: absolute; width: 56%; height: auto; display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,.16); border-radius: 2px;
}
.gen-en-page .gen-cert__imgs img:nth-child(1) { left: 2.7%;  top: 0; }
.gen-en-page .gen-cert__imgs img:nth-child(2) { left: 44.3%; top: 30.3%; z-index: 2; }

/* ---- Corporate Information ---- */
.gen-en-page .gen-corp__dl {
  display: block; margin: 45px 0 0;
}
.gen-en-page .gen-corp__dl dt {
  font-weight: 600; color: var(--gen-teal-strong); line-height: 1.15;
  font-size: clamp(18.33px, 1.67vw, 20px); margin-top: 22.5px; padding: 0;
}
.gen-en-page .gen-corp__dl dt:first-of-type { margin-top: 0; }
.gen-en-page .gen-corp__dl dd {
  margin: 0; color: var(--gen-teal); font-weight: 300; line-height: 1.24;
  font-size: clamp(16.33px, 1.54vw, 18.5px); padding: 0;
}
.gen-en-page .gen-corp__cols {
  display: block; margin-top: 0;
}

/* ---- Philosophy ---- */
.gen-en-page .gen-philo { margin: 0; }
.gen-en-page .gen-philo dt {
  color: #fff; font-weight: 600; letter-spacing: .02em; line-height: 1.24;
  font-size: clamp(16.33px, 1.54vw, 18.5px); margin-top: 22.5px;
}
.gen-en-page .gen-philo dt:first-of-type { margin-top: 0; }
.gen-en-page .gen-philo dd {
  margin: 0; color: rgba(255,255,255,.9); font-weight: 300;
  font-size: clamp(16.33px, 1.54vw, 18.5px); line-height: 1.24;
}

/* ============ フッター ============ */
.gen-en-page .gen-footer {
  position: relative; overflow: hidden;
  background: var(--color-bg-dark, #003a3f); color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);   /* 日本語版と同じ視認性対応 */
}
/* 日本語版フッターと同じ水面写真を使用（assets/images/footer-bg.jpg） */
.gen-en-page .gen-footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('../../images/footer-bg.jpg?v=4') center / cover no-repeat;
}
.gen-en-page .gen-footer > * { position: relative; z-index: 1; }
.gen-en-page .gen-footer__inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(22px, 5vw, 48px) clamp(28px, 4vw, 40px);
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.gen-en-page .gen-footer__logo { width: 150px; height: auto; }
.gen-en-page .gen-footer__addr {
  margin: 14px 0 0; font-size: 13px; line-height: 1.9;
  color: rgba(255,255,255,.82); font-weight: 300; letter-spacing: .02em;
}
.gen-en-page .gen-footer__nav { display: flex; flex-direction: column; gap: 9px; }
.gen-en-page .gen-footer__nav a {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 14px;
  letter-spacing: .03em; transition: opacity .2s;
}
.gen-en-page .gen-footer__nav a:hover { opacity: .65; }
.gen-en-page .gen-footer__lang { margin-top: 6px; color: #e6cf92 !important; }
.gen-en-page .gen-footer__social { display: flex; gap: 14px; }
.gen-en-page .gen-footer__social img { display: block; }
.gen-en-page .gen-footer__copy {
  border-top: 1px solid rgba(255,255,255,.14); text-align: center;
  padding: 18px; font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .04em;
}

/* ============ レスポンシブ（タブレット以下） ============ */
@media (max-width: 900px) {
  .gen-en-page .gen-global__cols,
.gen-en-page .gen-cert__cols,
.gen-en-page .gen-corp__cols {
    grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px);
  }
  .gen-en-page .gen-cert__imgs {
    position: static; display: flex; flex-direction: row; justify-content: center;
    gap: 14px; aspect-ratio: auto; margin-top: 22px;
  }
  .gen-en-page .gen-cert__imgs img { position: static; width: 46%; }
  .gen-en-page .gen-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ============ スマホ ============ */
@media (max-width: 640px) {
  .gen-en-page .gen-nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: none; border: 0; cursor: pointer;
  }
  .gen-en-page .gen-nav__toggle span { display: block; width: 24px; height: 2px; background: #fff; }
  .gen-en-page .gen-nav__list {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(0,118,129,.98); padding: 6px 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .gen-en-page .gen-nav[data-open="1"] .gen-nav__list { max-height: 80vh; }
  .gen-en-page .gen-nav__list li { border-top: 1px solid rgba(255,255,255,.12); }
  .gen-en-page .gen-nav__list a { display: block; padding: 13px 24px; font-size: 15px; }
  .gen-en-page .gen-nav__lang a { border: 0; padding: 13px 24px; }

  .gen-en-page .gen-grid2 { grid-template-columns: 1fr; }
  .gen-en-page .gen-grid2__img { aspect-ratio: 16 / 9; }
  .gen-en-page .gen-list--2col { grid-template-columns: 1fr; }
  .gen-en-page .gen-footer__inner { grid-template-columns: 1fr; }
  .gen-en-page .gen-fullimg { aspect-ratio: 4 / 3; }
  .gen-en-page .gen-corp__cols { margin-top: 0; }
}

/* ---- カンプ実測の個別余白 ---- */
.gen-en-page .gen-philosophy { padding-bottom: clamp(28px, 2.3vw, 28px); }
/* Closing: カンプは白背景ではなく波写真＋白オーバーレイ */
.gen-en-page .gen-closing {
  background-size: cover; background-position: center 45%;
  padding-top: clamp(72px, 13.8vw, 166px); padding-bottom: clamp(56px, 7.8vw, 94px);
}
.gen-en-page .gen-closing .gen-sec__overlay--closing { background: rgba(255,255,255,.87); }
/* 末尾リストの下マージンがセクション余白に足されるのを防ぐ */
.gen-en-page .gen-list:last-child,
.gen-en-page .gen-corp__cols > div:last-child > :last-child { margin-bottom: 0; }
/* Corporate はカンプ実測で上下余白が小さい（約96px） */
.gen-en-page .gen-corp { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
/* .gen-body p より詳細度を上げ、本文内の小見出しを確実に太字ティール20pxにする */
.gen-en-page .gen-body p.gen-subhead,
.gen-en-page p.gen-subhead {
  font-weight: 600; color: var(--gen-teal-strong); line-height: 1.24;
  font-size: clamp(18.33px, 1.67vw, 20px); letter-spacing: .02em;
  text-align: left; margin: 22.5px 0 6px;
}
.gen-en-page .gen-body--light p.gen-subhead,
.gen-en-page p.gen-subhead--light { color: #fff; }

/* スコープ化(v4.1.24)で詳細度が上がり、これまで打ち消されていた
   段組み内・最終要素の下マージンが効くようになったため明示的に0に戻す
   （スコープ化前と同じ見た目を維持するための調整） */
.gen-en-page .gen-global__left > :last-child,
.gen-en-page .gen-cert__left > :last-child { margin-bottom: 0; }

/* ============================================================
   260918 校正対応（コトヴィア 田中様）— PC版/スマホ版
   写真セクションの色はカンプのレンダリング結果に数値で一致させた
   （オーバーレイ無しの実測色から必要なαを逆算）
   ※保留: ヘッダー透過(要確認)／スマホ本文+1pt(要確認)
   ============================================================ */

/* A2 pc_1: ヘッダーのナビを下揃えに */
.gen-en-page .gen-header__inner { align-items: flex-end; }

/* A3 pc_1/sp_1: 見出しと本文の間をアケル（カンプ実測 66.8px） */
.gen-en-page .gen-head__title + .gen-body { margin-top: 26px; }

/* A5 pc_4: 世界地図を「Our products are trusted by:」の高さまで下げる */
.gen-en-page .gen-global__map { margin-top: 14px; }

/* A6 pc_7/sp_9: Sustainability 背景をもう少しクリアに（オーバーレイを薄く） */
.gen-en-page .gen-sustain .gen-sec__overlay {
  background: linear-gradient(180deg, rgba(0,50,58,.60), rgba(0,56,66,.54));
}

/* pc_2: About 背景の光が見えるように（カンプ実測と誤差0で一致） */
.gen-en-page .gen-about .gen-sec__overlay {
  background: linear-gradient(180deg, rgba(0,80,120,.67), rgba(0,80,120,.63));
}

/* A8 pc_9: Partnership の背景地をやや強く・やや黄みに（カンプ #809CAD から調整） */
.gen-en-page .gen-partner { background: #7E98A3; }

/* A9 pc_10/sp_12: Corporate Information 見出しの下の余白を倍に */
.gen-en-page .gen-corp .gen-head__title + .gen-subhead { margin-top: 45px; }

/* A10 pc_10/sp_12: Company Overview を上の見出しと同じ色（ゴールド）に */
.gen-en-page .gen-corp .gen-head__title + .gen-subhead { color: var(--gen-gold); }

/* A11 pc_11: Philosophy 背景をもう少し青みに
   ※カンプ完全一致(rgba(60,105,175,.52))だと写真の明部で白文字が読めなくなるため、
     青みは足しつつ可読性を確保する値に調整。完全一致には写真のトリミング(B工程)が必要。 */
.gen-en-page .gen-sec__overlay--philosophy {
  background: linear-gradient(180deg, rgba(18,66,136,.70), rgba(12,56,126,.66));
}

/* A12 pc_11/sp_14: Philosophy の濃い背景をもう少し下まで延ばす */
.gen-en-page .gen-philosophy { padding-bottom: clamp(48px, 7.5vw, 90px); }

/* A13 pc_12/sp_16: フッター */
.gen-en-page .gen-footer::before {                    /* 背景をもっと濃く深い紺に */
  background: linear-gradient(rgba(0,26,56,.58), rgba(0,26,56,.58)),
              url('../../images/footer-bg.jpg?v=4') center / cover no-repeat;
}
.gen-en-page .gen-footer__addr {                      /* ロゴとの間をアケル＋やや太く大きく */
  margin-top: 26px; font-size: 14px; font-weight: 400;
  color: rgba(255,255,255,.88);
}
.gen-en-page .gen-footer__nav a {                     /* ナビもやや太く大きく */
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,.92);
}

/* B工程(260925): 写真をカンプの配置矩形から切り出し直した。
   philosophy.jpg は Philosophy帯＋Closing帯をまたぐ1枚の連続写真のため、
   各セクションで表示位置を分ける（カンプと同じ見え方になる）。 */
.gen-en-page .gen-philosophy { background-position: center top; }
.gen-en-page .gen-closing    { background-position: center bottom; }

/* 260926: Global Reach の2カラム — 上の隙間を開け、左カラムと地図の上端を揃える */
.gen-en-page .gen-global__cols { margin-top: 45px; }
.gen-en-page .gen-global__left > :first-child { margin-top: 0; }
.gen-en-page .gen-global__map { margin-top: 0; }

/* ============================================================
   261003 校正の保留2件を反映（コトヴィア経由・イヨスイ様ご回答）
   ============================================================ */

/* pc_1 / sp_1：ヘッダーを透過し、ヒーロー写真をその下へ潜り込ませる。
   ヘッダー高さは実寸と同じ式で算出（上下padding×2 ＋ ロゴ高さ）。
   1200px=約129px / 500px=約73px で実測値と一致する。 */
.gen-en-page {
  --gen-header-h: calc(2 * clamp(16px, 3.2vw, 38px) + clamp(120px, 12.9vw, 155px) / 2.913);
}
.gen-en-page .gen-hero {
  margin-top: calc(-1 * var(--gen-header-h));
  padding-top: var(--gen-header-h);
  /* 写真の「見えている高さ」を従来どおり保つため、潜り込ませた分を足す */
  min-height: calc(clamp(220px, 26vw, 313px) + var(--gen-header-h));
}

/* sp_17 ほか：スマホで固定pxのまま残っていた箇所も +1pt
   （PCの見え方は変えないため、スマホ幅のみで指定） */
@media (max-width: 640px) {
  .gen-en-page .gen-nav__list a { font-size: 16.33px; }
  .gen-en-page .gen-footer__addr { font-size: 15.33px; }
  .gen-en-page .gen-footer__nav a { font-size: 16.33px; }
  .gen-en-page .gen-footer__copy { font-size: 13.33px; }
}

/* ≤600px では responsive-tune.css の汎用ルール
   （p, li, dd, dt … に !important で clamp(13px,3.6vw,15.5px)）が
   /en/ にも効いてしまい、本文が一律15.5px以下に潰れていた。
   イヨスイ様ご指示「一番小さいフォントを一律1pt上げる」に合わせ、
   その下限・上限をそれぞれ +1pt(=1.333px) した値で上書きする。 */
@media (max-width: 599.98px) {
  .gen-en-page .gen-body p,
  .gen-en-page .gen-body__p,
  .gen-en-page .gen-list li,
  .gen-en-page .gen-subhead,
  .gen-en-page .gen-head__sub,
  .gen-en-page .gen-featlist dt,
  .gen-en-page .gen-featlist dd,
  .gen-en-page .gen-corp__dl dt,
  .gen-en-page .gen-corp__dl dd,
  .gen-en-page .gen-philo dt,
  .gen-en-page .gen-philo dd,
  .gen-en-page .gen-footer__addr,
  .gen-en-page .gen-footer__nav a {
    font-size: clamp(14.33px, 3.6vw, 16.83px) !important;
  }
}