/* ==========================================================
   MIYASAKA KORYO — site-v2
   写真主役のフルスクリーン構成
   ========================================================== */

/* 視覚的に隠すが、読み上げと文書構造には残すユーティリティ */
.u-visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:root {
/* 墨のヒーロー → 生成りの本文 → 墨のフッター(明暗のブックエンド) */
  --base: #eceae5;          /* 本文の地(生成り) */
  --card: #ffffff;          /* 重なる白カード */
  --accent: #a8863f;        /* 深箔 */
  --accent-soft: rgba(168, 134, 63, 0.35);
  --dark: #17150f;          /* ヒーロー下地・フッター */
  --text: #45433e;
  --gray: #8f8c85;
  --line: #dedbd3;
  --shadow-card: 0 30px 70px rgba(50, 46, 38, 0.16);
  --header-h: 72px;
  --font-en: 'Poppins', 'Noto Sans JP', sans-serif;
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ja);
  font-weight: 400;
  color: var(--text);
  background: var(--base);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }

img { max-width: 100%; vertical-align: middle; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------
   1. ヘッダー
   ---------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(236, 234, 229, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 32px;
  gap: 32px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header__logo-mark {
  width: 42px;
  height: auto;
}

.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.header__logo-en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.header__logo-ja {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--text);
}

.gnav { margin-left: auto; }

.gnav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.gnav__list a {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 6px 0;
  position: relative;
  transition: color .3s;
}

.gnav__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

.gnav__list a:hover { color: var(--accent); }
.gnav__list a:hover::after { transform: scaleX(1); }

/* Language 切り替え */
.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.lang__label { color: var(--gray); margin-right: 4px; }
.lang__item.is-active { color: var(--accent); font-weight: 400; border-bottom: 1px solid var(--accent); }
.lang__item.is-disabled { color: #b6b2a9; cursor: default; }
.lang__sep { color: #c8c4bb; }

.lang--pc { flex-shrink: 0; }
.lang--mobile { display: none; }

/* --- 言語切替(国旗) ---
   現在地の言語は不透明、もう一方は淡色のリンク。両方を並べることで
   「今どちらを見ているか」が分かる。日本語版・タイ語版で共通のスタイル */
.c-langSwitch {
  --langSwitch-gap: 9px;
  display: inline-flex;
  align-items: center;
  gap: var(--langSwitch-gap);
}
.c-langSwitch__item {
  position: relative;
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}
/* 国旗は小さいので、レイアウトに影響しない疑似要素で当たり判定を広げる。
   リンク側だけに付ける。現在地(span)にも付けると、隣り合うリンクの
   判定と重なって「押せないはずの国旗」がリンクを踏む恐れがあるため。
   横は11pxまで。2つの国旗の間隔は 9+1+9=19px あるので重ならない */
a.c-langSwitch__item::after {
  content: "";
  position: absolute;
  inset: -15px -11px;
}
.c-langSwitch__flag {
  display: block;
  width: 22px;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0.5px solid rgb(0 0 0 / 0.18);
}
a.c-langSwitch__item { opacity: 0.38; transition: opacity 0.3s ease; }
a.c-langSwitch__item:hover { opacity: 1; }
.c-langSwitch__sep {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: currentColor;
  opacity: 0.25;
}

/* --- タイ語版で未対応の下層リンク ---
   タイ語ページがまだ無いナビ項目は <a> ではなく
   <span class="... is-disabled" data-th-pending="..."> として出力される。
   リンクと同じ位置・字送りのまま、押せないことが分かる見た目にする */
.gnav__list .is-disabled,
.footer__col .is-disabled,
.footer__legal .is-disabled,
.btn-outline.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.btn-outline.is-disabled { border-style: dashed; }

/* ハンバーガー */
.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 110;
}

.menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin: 5px auto;
  transition: transform .3s, opacity .3s;
}

.menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { opacity: 0; }
.menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------
   共通: 写真セクション / ボタン / フェードイン
   ---------------------------------------------------------- */
.parallax {
  position: relative;
  overflow: hidden;
}

.parallax__bg {
  position: absolute;
  top: -12%; left: 0;
  width: 100%;
  height: 124%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.btn-outline {
  display: inline-block;
  min-width: 210px;
  padding: 15px 42px;
  border: 1px solid #35332d;
  border-radius: 0;
  color: #35332d;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  transition: background .35s, color .35s, border-color .35s;
}

.btn-outline:hover {
  background: #17150f;
  border-color: #17150f;
  color: #fff;
}

.btn-outline--dark {
  border-color: #35332d;
  color: #35332d;
}

.btn-outline--dark:hover {
  background: #17150f;
  border-color: #17150f;
  color: #fff;
}

.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   2. ヒーロー
   ---------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.hero-videos { position: absolute; inset: 0; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-video.is-active { opacity: 1; }

/* 動画フォールバック（モバイル / reduced-motion / 自動再生ブロック時） */
.hero-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: none;
  will-change: transform;
}

.hero-poster.is-active {
  display: block;
  animation: kenburns 20s ease-out forwards;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* 旧: 白文字コピーの可読性のための暗色グラデーション。
   コピー削除に伴い完全に撤去し、動画を素の明るさで見せる。
   要素はHTMLに残っているが何も描画しない */
.hero-overlay {
  display: none;
}

.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

.hero-copy__title {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  letter-spacing: 0.34em;
  line-height: 1;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .5);
}

.hero-copy__sub {
  margin-top: 24px;
  font-family: var(--font-en);
  font-weight: 200;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: 0.12em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.hero-copy__since { margin-left: 1.2em; color: #d8bc74; letter-spacing: 0.24em; }

.hero-scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.hero-scroll__text {
  font-family: var(--font-en);
  font-weight: 200;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  margin-bottom: 10px;
}

.hero-scroll__line {
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, .7);
  overflow: hidden;
  position: relative;
}

.hero-scroll__line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d8bc74;
  animation: scrollline 2.2s ease-in-out infinite;
}

@keyframes scrollline {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* ----------------------------------------------------------
   3. ブランドメッセージ
   ---------------------------------------------------------- */
main { counter-reset: biz; }

/* ----------------------------------------------------------
   2.5 About(日英対訳)
   ---------------------------------------------------------- */
.about {
  background: var(--base);
  padding: clamp(96px, 12vw, 180px) 40px;
}

.about__inner {
  width: min(1560px, 100%);
  margin: 0 auto;
}

.about__label {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.42em;
  color: #33312c;
  margin-bottom: clamp(48px, 6vw, 88px);
}

.about__grid {
  display: block;   /* 英文カラム廃止に伴い1カラム(和文を全幅に) */
}

.about__catch {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: 0.18em;
  line-height: 2;
  color: #33312c;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.about__catch-sub {
  font-size: 0.78em;
  letter-spacing: 0.14em;
}

.about__body {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 2.6;
  letter-spacing: 0.12em;
  color: #5a5750;
}
.about__body p + p { margin-top: 1.9em; }
.about__body-en p + p { margin-top: 1.9em; }

.about__catch-en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  line-height: 2.4;
  color: #55524b;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.about__body-en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  line-height: 2.4;
  color: var(--gray);
}

/* ----------------------------------------------------------
   2.6 調香(左断ち落とし写真 + 右下に重なる対訳カード)
   ---------------------------------------------------------- */
.feature {
  background: var(--base);
  padding: clamp(24px, 4vw, 64px) 0 clamp(96px, 11vw, 180px);
  --pw: min(70%, 1340px);              /* 写真の断ち落とし幅 */
  --f-overlap: clamp(180px, 24vw, 480px); /* カードが写真に食い込む量(横) */
}

.feature__inner { position: relative; }

.feature__photo {
  width: var(--pw);
  margin: 0;                            /* 左端から断ち落とし */
}
.feature__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.feature__card {
  position: relative;
  width: min(1020px, calc(100% - (var(--pw) - var(--f-overlap)) - 24px));
  margin: calc(-1 * clamp(100px, 13vw, 240px)) 0 0 calc(var(--pw) - var(--f-overlap));
  padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 76px);
  background: var(--card);
  border: 1px solid rgba(168, 134, 63, 0.22);
  box-shadow: var(--shadow-card);
}

.feature__jp {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 2.6;
  letter-spacing: 0.12em;
  color: #5a5750;
}

.feature__en {
  margin-top: 2.2em;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  line-height: 2.4;
  color: var(--gray);
}

/* スタッガード構成: 写真は比率を持つブロック、カードが角に重なる */
.message {
  --pw: min(70%, 1380px);              /* 写真の幅(横長の帯) */
  --xov: clamp(160px, 22vw, 440px);    /* カードの横の食い込み */
  --yov: clamp(100px, 12vw, 240px);    /* カードの縦の食い込み */
  background: var(--base);
  padding: clamp(56px, 7vw, 130px) 0 clamp(96px, 10vw, 170px);
}

.message__media,
.biz__media {
  position: relative;
  overflow: hidden;
  width: var(--pw);
  aspect-ratio: 16 / 9;                /* 横長の帯として断ち落とす */
}
.message__media { margin-left: auto; } /* 右端から断ち落とし */
.message__media .parallax__bg,
.biz__media .parallax__bg {
  left: 0;
  right: auto;
  width: 100%;
}

.message__overlay { display: none; }

.message__inner {
  position: relative;
  z-index: 2;
  display: block;
  /* 幅は「画面幅 - 写真の非重なり部分」から自動算出(上限720px) */
  width: min(1000px, calc(100% - (var(--pw) - var(--xov)) - 24px));
  /* 横: 写真幅から逆算して必ず --xov 重なる / 縦: --yov 分写真に乗り上げる */
  margin: calc(-1 * var(--yov)) calc(var(--pw) - var(--xov)) 0 auto;
  padding: clamp(40px, 4.5vw, 60px) clamp(32px, 4.5vw, 64px);
  background: var(--card);
  border: 1px solid rgba(168, 134, 63, 0.22);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.message__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: 0.18em;
  line-height: 1.9;
  color: #33312c;
  padding-left: 24px;
  border-left: 1px solid var(--accent);
}

.message__body {
  margin-top: 30px;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 2.25;
  letter-spacing: 0.12em;
  color: #5a5750;
}

.message__body p + p { margin-top: 2em; }

/* ----------------------------------------------------------
   4. 事業セクション
   ---------------------------------------------------------- */
.biz {
  counter-increment: biz;
  --pw: min(70%, 1380px);
  --xov: clamp(160px, 22vw, 440px);
  --yov: clamp(90px, 12vw, 250px);
  background: var(--base);
  padding: clamp(48px, 6vw, 110px) 0 clamp(96px, 11vw, 180px);
}
/* 写真: 既定(01 business / 03 recruit)は左端から断ち落とし */
.biz__media { margin-left: 0; margin-right: auto; }
/* 02 rd / 04 company は右端から断ち落とし */
#rd .biz__media, #company .biz__media { margin-left: auto; margin-right: 0; }

.biz__overlay { display: none; }

.biz__inner {
  position: relative;
  z-index: 2;
  width: min(1000px, calc(100% - (var(--pw) - var(--xov)) - 24px));
  /* 縦: --yov 分だけ写真に乗り上げる。左右は下の配置ルールで指定 */
  margin-top: calc(-1 * var(--yov));
  margin-bottom: 0;
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 68px);
  background: var(--card);
  border: 1px solid rgba(168, 134, 63, 0.22);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

/* カード左右配置: 写真の反対側に寄せ、横--xov だけ写真に重なる
   (ショートハンド margin を使わないよう .biz__inner の後に個別指定) */
/* 既定(01 business / 03 recruit): カード=右 */
.biz__inner {
  margin-left: calc(var(--pw) - var(--xov));
  margin-right: auto;
}
/* 02 rd / 04 company: カード=左 */
#rd .biz__inner, #company .biz__inner {
  margin-left: auto;
  margin-right: calc(var(--pw) - var(--xov));
}

/* ----------------------------------------------------------
   事業紹介: テキスト左 + タイルが右から左へ流れる帯
   他3節(写真帯 + 白カード)とは構図が異なるが、.biz クラスは
   維持しているので 01〜04 の連番と余白は従来どおり
   ---------------------------------------------------------- */
.biz.-gallery {
  padding: clamp(60px, 8vw, 130px) 0;
}
/* 白カード(.biz__inner)を使わず、地の上に直接テキストを置く */
.bizGal {
  display: grid;
  grid-template-columns: minmax(280px, 36%) 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}
.bizGal__text {
  padding-left: clamp(24px, 6vw, 110px);
  max-width: 560px;
}

/* 写真は右端まで断ち落とす */
.bizGal__media {
  /* 写真どうしの隙間(横方向) */
  --bizGal-gap: clamp(10px, 1.2vw, 20px);
  /* 角の丸み。値を大きくするほど円に近づく。
     写真の高さの半分まで上げると完全な楕円になる */
  --bizGal-radius: clamp(20px, 3.8vw, 56px);
  /* 上下段の隙間。行方向の gap は横スクロールの計算に影響しない */
  --bizGal-rowGap: clamp(8px, 1vw, 16px);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--bizGal-rowGap);
  height: clamp(320px, 40vw, 540px);
}
.bizGal__row { overflow: hidden; }

/* 写真を1枚ずつ隙間をあけて並べる。
   同じ並びを2回繰り返しているので、1周 = 写真6枚 + 隙間6個。
   ただし gap は写真12枚に対して11個しか入らないため、
   -50%(= 6枚 + 隙間5.5個)では隙間の半分ぶん足りない。
   calc で半分を足して正確に1周させる。
   gap の個数は必ず「枚数 - 1」と決まっているので、
   この計算はマージン相殺のような挙動に依存しない */
.bizGal__track {
  display: flex;
  width: max-content;
  height: 100%;
  gap: var(--bizGal-gap);
  will-change: transform;
  animation: bizGalSlide 72s linear infinite;
}
@keyframes bizGalSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--bizGal-gap) / 2)); }
}

.bizGal__card {
  flex: 0 0 auto;
  margin: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--bizGal-radius);
}
.bizGal__card img {
  display: block;
  height: 100%;
  width: auto;
  /* カードの縦横比。届く写真に合わせて変えるならここ */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 動きを減らす設定では止める */
@media (prefers-reduced-motion: reduce) {
  .bizGal__track { animation: none; }
}

@media screen and (max-width: 860px) {
  .bizGal {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 48px);
  }
  .bizGal__text {
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
  }
  .bizGal__media {
    --bizGal-gap: 10px;
    --bizGal-rowGap: 8px;
    --bizGal-radius: clamp(14px, 5vw, 32px);
    height: clamp(240px, 56vw, 380px);
  }
}

/* ----------------------------------------------------------
   会社案内: 2×2の4分割グリッド
   .biz の帯(16:9)の中身を4枚のグリッドに差し替える形。
   白カードの乗り上げと連番04は従来どおり。
   パララックスは単一背景前提の仕組みのため、この節では使わない
   ---------------------------------------------------------- */
/* 01 事業紹介と同じ「テキスト左 + 写真右」の骨格。
   白カードの乗り上げをやめ、写真4枚がすべて見える */
.bizSplit {
  display: grid;
  grid-template-columns: minmax(280px, 36%) 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}
.bizSplit__text {
  padding-left: clamp(24px, 6vw, 110px);
  max-width: 560px;
}
/* .biz__media の帯用の指定(幅・16:9・右寄せ)をこの節では打ち消す */
.biz.-quad .biz__media {
  width: 100%;
  margin: 0;
  aspect-ratio: auto;
  height: clamp(320px, 40vw, 540px);
}

.bizQuad {
  --bizQuad-gap: clamp(8px, 1vw, 16px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--bizQuad-gap);
}
.bizQuad__cell {
  margin: 0;
  overflow: hidden;
}
.bizQuad__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 860px) {
  .bizSplit {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 48px);
  }
  .bizSplit__text {
    padding-left: clamp(20px, 6vw, 40px);
    padding-right: clamp(20px, 6vw, 40px);
  }
  .biz.-quad .biz__media { height: clamp(260px, 62vw, 420px); }
  .bizQuad { --bizQuad-gap: 6px; }
}

/* 「01」の箔ナンバー */
.biz__sub::before {
  content: counter(biz, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-en);
  font-weight: 200;
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  color: var(--accent);
}
/* 和文を主見出しに昇格 */
.biz__sub {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: 0.2em;
  line-height: 1.8;
  color: #33312c;
  margin-bottom: 10px;
}

/* 欧文は添えの小見出しに */
.biz__title {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 30px;
  padding-bottom: 22px;
  position: relative;
}
.biz__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 1px;
  background: var(--accent);
}

.biz__text {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 2.5;
  letter-spacing: 0.12em;
  color: #5a5750;
  margin-bottom: 44px;
}

/* ----------------------------------------------------------
   5. ニュース
   ---------------------------------------------------------- */
.news {
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 120px 40px;
}

/* ヒーロー直下に置かれた場合のみ、上罫線を消す(下層ページの .news には非適用) */
.hero + .news { border-top: none; }

.news__inner {
  width: min(1240px, 100%);
  margin: 0 auto;
}

/* --- 見出し行(横並び・下罫) --- */
.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--text);
}
.news__title {
  font-family: var(--font-en);
  font-weight: 200;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  letter-spacing: 0.06em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.news__title-ja {
  font-family: var(--font-ja);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--accent);
}
.news__head .btn-outline--dark { flex-shrink: 0; }

/* --- タブ --- */
.news__tabs {
  display: flex;
  gap: 8px;
  margin: 36px 0 8px;
  border-bottom: 0;
}
.news__tab {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 9px 22px;
  cursor: pointer;
  position: relative;
  transition: color .3s, border-color .3s, background .3s;
}
.news__tab::after { display: none; }
.news__tab:hover { color: var(--text); border-color: var(--gray); }
.news__tab.is-active {
  color: var(--card);
  background: var(--dark);
  border-color: var(--dark);
  font-weight: 400;
}

/* --- リスト --- */
.news__list {
  counter-reset: news;
  list-style: none;
  margin: 0;
  padding: 0;
}
.news__item {
  counter-increment: news;
  border-bottom: 1px solid var(--line);
}
.news__item:first-child { border-top: 1px solid var(--line); }
.news__item.is-hidden { display: none; }

.news__item a {
  display: grid;
  grid-template-columns: 56px 128px 152px 1fr;
  align-items: center;
  gap: 28px;
  padding: 30px 8px;
  position: relative;
  color: var(--text);
  text-decoration: none;
  transition: padding .45s cubic-bezier(.2,.7,.3,1), color .3s;
}
/* 大きな連番 */
.news__item a::before {
  content: counter(news, decimal-leading-zero);
  font-family: var(--font-en);
  font-weight: 200;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  transition: color .3s;
}
/* ホバーで箔金の敷き面が左から差し込む */
.news__item a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(168,134,63,0.10), rgba(168,134,63,0) 70%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.news__item a:hover { padding-left: 24px; }
.news__item a:hover::after { opacity: 1; }
.news__item a:hover .news__text { color: #2a2823; }

.news__item time {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--gray);
  white-space: nowrap;
}
.news__cat {
  justify-self: start;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--gray);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 15px;
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.news__cat--sustainability {
  color: var(--accent);
  border-color: var(--accent-soft);
}
.news__text {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  transition: color .3s;
}
/* 行末の矢印: グリッド最終セルに擬似要素で描画(HTML変更不要) */
.news__item a > .news__text::after {
  content: "→";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en);
  color: var(--gray);
  transition: color .3s, transform .45s cubic-bezier(.2,.7,.3,1);
}
.news__item a:hover > .news__text::after {
  color: var(--accent);
  transform: translateY(-50%) translateX(6px);
}

/* --- おすすめの香料(M3-NEWS-RECOMMEND-1013) --- */
.news__cat--recommend {
  color: #4361ad; /* ロゴ青 #5472c0 は小さい字で 4.5:1 に届かないため一段濃く */
  border-color: rgba(84,114,192,.45);
}
.news__item a.news__open { cursor: pointer; }
.news__item a.news__open:focus-visible { outline: 2px solid var(--logo-blue, #5472c0); outline-offset: -2px; }
.news__empty {
  margin: 0;
  padding: 30px 8px;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--gray);
}
.pr-modal--single .pr-modal__dialog { width: min(720px, 100%); grid-template-columns: 1fr; }
.pr-modal--single .pr-modal__title { margin-top: 16px; }
.pr-modal--single .pr-modal__body p { white-space: pre-line; }
.pr-modal--single .pr-modal__action { margin: 28px 0 0; }
.pr-modal--single .pr-modal__action .btn-outline { display: inline-block; }

/* ----------------------------------------------------------
   6. フッター
   ---------------------------------------------------------- */
.footer {
  background: var(--dark);
  color: #d9d5cc;
  padding: 72px 40px 32px;
}

.footer__inner {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.footer__top {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 64px;
  padding-bottom: 48px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.footer__logo-mark {
  width: 48px;
  height: auto;
}

.footer__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.footer__logo-en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.footer__logo-ja {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: #f0ede6;
}

.footer__address {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 24px;
  line-height: 2;
}

.footer__sitemap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer__col-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  padding-bottom: 8px;
  color: #f0ede6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer__col li { margin-bottom: 10px; }

.footer__col a {
  font-size: 0.82rem;
  color: #a8a49b;
  transition: color .3s;
}

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

.footer__cert {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.footer__cert img { height: 56px; width: auto; border-radius: 3px; }

.footer__cert-caption {
  font-size: 0.78rem;
  color: var(--gray);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__legal a {
  font-size: 0.75rem;
  color: var(--gray);
  transition: color .3s;
}

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

.footer__copyright {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--gray);
}

/* ----------------------------------------------------------
   モバイル
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .gnav__list { gap: 18px; }
  .gnav__list a { font-size: 0.8rem; }
  .lang--pc .lang__label { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 60px; }

  .header__inner { padding: 0 16px; }

  .menu-btn { display: block; margin-left: auto; }

  .lang--pc { display: none; }
  .lang--mobile { display: flex; justify-content: center; margin-top: 40px; }

  .gnav {
    position: fixed;
    inset: 0;
    background: rgba(236, 234, 229, 0.97);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px;
    margin-left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s;
    z-index: 105;
  }

  .gnav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .gnav__list {
    flex-direction: column;
    gap: 0;
  }

  .gnav__list li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--line);
  }

  .gnav__list a {
    display: block;
    padding: 16px 0;
    font-size: 1rem;
  }

  .hero-copy__title { font-size: clamp(1.9rem, 8vw, 2.4rem); letter-spacing: 0.26em; }
  .hero-copy__since { display: block; margin-left: 0; margin-top: 6px; }

  .about { padding: 80px 24px; }

  .feature { --pw: 100%; padding-bottom: 96px; }
  .feature__card {
    width: calc(100% - 32px);
    margin: -48px auto 0;
    padding: 40px 26px;
  }

  /* SP: 写真フル幅 → カードが下から重なる */
  .message, .biz { --pw: 100%; }
  .message__media, .biz__media { aspect-ratio: 3 / 2; }
  .feature__photo img { aspect-ratio: 3 / 2; }

  .message__inner,
  .biz__inner,
  #rd .biz__inner,
  #company .biz__inner {
    width: calc(100% - 32px);
    margin: -44px auto 0;
    padding: 40px 26px;
  }

  .btn-outline { min-width: 170px; padding: 12px 32px; }

  .news { padding: 80px 24px; }

  .news__head { flex-direction: column; align-items: flex-start; gap: 20px; }

  .news__tabs { gap: 8px; flex-wrap: wrap; }

  .news__item a {
    grid-template-columns: auto auto;
    gap: 8px 16px;
    padding: 22px 4px;
  }

  .news__item a::before { grid-row: 1; }
  .news__text { grid-column: 1 / -1; }
  .news__item a:hover { padding-left: 8px; }

  .footer { padding: 56px 24px 24px; }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer__sitemap {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ----------------------------------------------------------
   prefers-reduced-motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-video { transition: none; }
  .hero-poster.is-active { animation: none; }
  .hero-scroll__line::after { animation: none; }

  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .parallax__bg {
    top: 0;
    height: 100%;
    transform: none !important;
  }
}

/* ==========================================================
   下層ページ共通
   ========================================================== */

/* --- サブヒーロー（下層の共通ヘッダー写真） --- */
/* 固定ヘッダー(白・不透明)の下に写真が始まる構成。
   .parallax を併用すると既存のパララックスJSがそのまま効く。 */
.subhero {
  position: relative;
  min-height: 44svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.subhero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.3) 60%, rgba(0,0,0,.15));
}
.subhero__inner {
  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
  /* 固定ヘッダー分をpaddingで確保 → タイトルがヘッダーに隠れない */
  padding: calc(var(--header-h) + 48px) 40px 48px;
}
.subhero__en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: .12em;
  line-height: 1.25;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.subhero__ja {
  display: block;
  margin-top: 12px;
  font-size: .9rem;
  letter-spacing: .22em;
  opacity: .95;
}

/* --- パンくず --- */
.breadcrumb { background: var(--base); border-bottom: 1px solid var(--line); }
.breadcrumb__inner {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 14px 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .75rem; letter-spacing: .04em; color: var(--gray);
}
.breadcrumb a { color: var(--gray); transition: color .3s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--text); }
.breadcrumb__sep { color: #565049; }

/* --- 標準セクション --- */
.section { padding: 96px 40px; background: var(--base); }
.section--gray { background: #f4f2ed; }
.section__inner { width: min(1100px, 100%); margin: 0 auto; }
.section__inner--narrow { width: min(820px, 100%); margin: 0 auto; }

/* --- セクション見出し（英大 + 和小、newsのタイトル流儀に合わせる） --- */
.sec-head { margin-bottom: 48px; }
.sec-head__en {
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: .1em; line-height: 1.3; color: var(--text);
}
.sec-head__ja {
  display: block; margin-top: 6px;
  font-size: .8rem; letter-spacing: .22em; color: var(--accent);
}
.sec-head--center { text-align: center; }

/* --- 本文テキスト --- */
.lead { font-size: 1.05rem; line-height: 2.2; letter-spacing: .04em; max-width: 760px; }
.prose { line-height: 2.1; letter-spacing: .03em; }
.prose p + p { margin-top: 1.6em; }
.prose h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: .04em; color: var(--accent); margin: 2em 0 .6em; }

/* --- 塗りボタン（明るい背景のCTA用。既存 .btn-outline は写真上用） --- */
.btn-fill {
  display: inline-block; min-width: 200px; padding: 15px 40px;
  border-radius: 0; background: var(--accent); color: #fff;
  font-family: var(--font-en); font-weight: 300; font-size: .85rem;
  letter-spacing: .14em; text-align: center; transition: opacity .3s;
}
.btn-fill:hover { opacity: .88; }

/* --- 定義テーブル（会社概要など） --- */
.def-table { width: 100%; border-collapse: collapse; }
.def-table th, .def-table td {
  text-align: left; vertical-align: top;
  padding: 20px 8px; border-bottom: 1px solid var(--line);
  font-size: .92rem; line-height: 1.9; font-weight: 400;
}
.def-table th { width: 200px; color: var(--accent); font-weight: 500; letter-spacing: .06em; }

/* --- 沿革 --- */
.history { border-top: 1px solid var(--line); }
.history__row {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px;
  padding: 22px 8px; border-bottom: 1px solid var(--line);
}
.history__year {
  font-family: var(--font-en); font-weight: 300; color: var(--accent);
  letter-spacing: .06em; font-size: 1rem;
}
.history__event { font-size: .92rem; line-height: 1.9; }

/* --- カードグリッド --- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card__img { aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; background: #e3e0da; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card__img img { transform: scale(1.05); }
.card__title { margin-top: 18px; font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; }
.card__text { margin-top: 8px; font-size: .88rem; color: #5f5c55; line-height: 1.9; }

/* --- 画像 + テキストの2カラム --- */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.media-row + .media-row { margin-top: 72px; }
.media-row--reverse .media-row__media { order: 2; }
.media-row__media img { width: 100%; border-radius: 4px; }
.media-row__title { font-family: var(--font-serif); font-weight: 300; font-size: 1.5rem; letter-spacing: .06em; margin-bottom: 18px; line-height: 1.7; }

/* --- 図版 + キャプション --- */
.figure img { width: 100%; border-radius: 4px; }
.figure figcaption { margin-top: 10px; font-size: .78rem; color: var(--gray); }

/* ===== M3-PHILOSOPHY-0904b start ===== */
/* --- 経営理念ブロック(0904b: 見出し拡大・本文サイズ統一・左揃え) --- */
.philosophy { display: grid; gap: 56px; }
.philosophy__block { text-align: left; }
.philosophy__label {
  font-family: var(--font-ja);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 10px;
}
/* ミッションだけ大きかったのを他ブロックの本文と同じ見え方に統一 */
.philosophy__phrase,
.philosophy__text {
  max-width: 680px;
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: normal;
  line-height: 2.1;
  color: #55524b;
}
/* 行動指針(0930): 項目ごとに li 化し、折り返し行をラベル直後=本文の頭に揃える。
   行間・文字サイズ・色は併記した .philosophy__text をそのまま使う */
.philosophy__guide { list-style: none; margin: 0; padding: 0; }
.philosophy__guide li { padding-left: 3em; text-indent: -3em; }   /* 「成長：」= 2字+全角コロン = 3em のぶら下げ */
/* th はラベル長が不揃いなので、ラベル列+本文列の grid で揃える */
.philosophy__guide--grid li {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .25em;
  padding-left: 0;
  text-indent: 0;
}
/* ===== M3-PHILOSOPHY-0904b end ===== */

/* --- 共通CTAバンド --- */
.cta { position: relative; padding: 100px 40px; text-align: center; overflow: hidden; color: #fff; }
.cta__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cta__inner { position: relative; width: min(720px, 100%); margin: 0 auto; }
.cta__title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .12em;
  line-height: 1.8; margin-bottom: 28px;
}

/* --- お問い合わせフォーム --- */
.form { max-width: 760px; }
.form__row { margin-bottom: 28px; }
.form__label { display: block; font-size: .88rem; font-weight: 500; letter-spacing: .06em; margin-bottom: 8px; }
.form__req { color: #c0392b; font-size: .72rem; margin-left: 8px; }
.form__control {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px;
  font-family: inherit; font-size: .95rem; background: #fff; color: var(--text);
  transition: border-color .3s;
}
.form__control:focus { outline: none; border-color: var(--accent); }
textarea.form__control { min-height: 160px; resize: vertical; }
.form__note { font-size: .8rem; color: var(--gray); line-height: 1.9; }
.form__submit { text-align: center; margin-top: 8px; }
.form__error { color: #c0392b; font-size: .78rem; margin-top: 6px; display: none; }
.form__control.is-invalid { border-color: #c0392b; }

/* --- ニュース一覧のページャ --- */
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.pager a, .pager span {
  min-width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-en); font-size: .85rem; color: var(--text); transition: .3s;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- ニュース詳細 --- */
.article__head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.article__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.article__title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
.article__body { line-height: 2.1; letter-spacing: .03em; }
.article__body h2 { font-size: 1.2rem; color: var(--accent); margin: 2em 0 .8em; }
.article__body p { margin-bottom: 1.4em; }

/* --- グローバルナビ現在地 --- */
.gnav__list a.is-current { color: var(--accent); }
.gnav__list a.is-current::after { transform: scaleX(1); }

/* --- 下層レスポンシブ --- */
@media (max-width: 860px) {
  .subhero__inner { padding: calc(var(--header-h) + 28px) 24px 28px; }
  .breadcrumb__inner { padding: 12px 24px; }
  .section { padding: 64px 24px; }
  .sec-head { margin-bottom: 32px; }
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; gap: 28px; }
  .media-row { grid-template-columns: 1fr; gap: 28px; }
  .media-row--reverse .media-row__media { order: 0; }
  .media-row + .media-row { margin-top: 48px; }
  .def-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .def-table th, .def-table td { display: block; border-bottom: none; padding: 2px 0; }
  .def-table th { width: auto; }
  .history__row { grid-template-columns: 84px 1fr; gap: 16px; }
  .cta { padding: 72px 24px; }
}


/* ==========================================================
   下層ページ 追加コンポーネント (会社情報系フェーズ)
   ========================================================== */

/* --- プレーンヒーロー(写真なし・生成り) --- */
.subhero--plain {
  min-height: 0;
  color: var(--text);
  background: var(--base);
  border-bottom: 1px solid var(--line);
}
.subhero--plain .subhero__en {
  color: #33312c;
  text-shadow: none;
}
.subhero--plain .subhero__ja {
  color: var(--accent);
  opacity: 1;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
}

/* --- サイドメニュー付き2カラムレイアウト --- */
.sub-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(48px, 5vw, 88px);
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 72px 40px 120px;
}

.sidenav {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  align-self: start;
}
.sidenav__title {
  margin-bottom: 16px;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  color: var(--gray);
}
.sidenav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.sidenav a {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--text);
  transition: color 0.3s, padding-left 0.3s;
}
.sidenav a:hover {
  color: var(--accent);
  padding-left: 10px;
}
.sidenav a[aria-current="page"] {
  position: relative;
  padding-left: 16px;
  color: var(--accent);
  font-weight: 500;
}
.sidenav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* 本文側の見出し・表の余白微調整 */
.sub-content .sec-head { margin-bottom: 36px; }
.sub-content .def-table + .sec-head { margin-top: 72px; }
/* 組織図の前後。表のあとに見出しが続く流れを揃える */
.sub-content .orgchart + .sec-head { margin-top: 72px; }
.sub-content .orgchart { margin-bottom: 8px; }

@media (max-width: 860px) {
  .sub-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 24px 80px;
  }
  .sidenav { position: static; }
  .sidenav ul { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .sidenav a {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: 0.8rem;
  }
  .sidenav a:hover { padding-left: 14px; }
  .sidenav a[aria-current="page"] { padding-left: 14px; border-color: var(--accent); }
  .sidenav a[aria-current="page"]::before { display: none; }
}


/* ==========================================================
   組織図 (会社概要ページ)
   会社案内PDFの階層をそのまま再現する。
   罫線・字送りは def-table と同じトーンに合わせ、
   カードの立体感は出さずに平面で構成する
   ========================================================== */
.orgchart {
  --org-line: var(--line);
  --org-gap: clamp(14px, 1.6vw, 24px);
  margin-top: 8px;
  font-size: .86rem;
  letter-spacing: .04em;
}

/* 箱の共通形 */
.orgchart__box {
  display: grid;
  place-items: center;
  min-height: 46px;
  /* 課の箱は2段ネストの内側に3列入るため横幅が細い。
     左右の余白を絞り、文字が1字ずつ縦積みになるのを防ぐ */
  padding: 10px 4px;
  border: 1px solid var(--org-line);
  background: #fff;
  text-align: center;
  line-height: 1.6;
  /* 5文字の課名が2行で収まる下限。これ以上は縮めない */
  min-width: 0;
  word-break: keep-all;
}
.orgchart__box.-head {
  border-color: var(--accent);
  color: var(--accent);
  letter-spacing: .08em;
}

/* 縦の連結線。各段の上に生やす */
.orgchart__level {
  position: relative;
  padding-top: 28px;
}
.orgchart__level::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 28px;
  background: var(--org-line);
}

/* 横に分岐する段。子の頭をつなぐ水平線を引く */
.orgchart__branch {
  display: grid;
  gap: var(--org-gap);
  position: relative;
}
.orgchart__branch.-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orgchart__branch.-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 分岐の水平線。両端の子の中心どうしを結ぶ。
   N列・間隔gのとき先頭列の中心は 100%/2N から g×(N-1)/(2N) を「引いた」位置。
   足すと中心より内側で止まり、縦線との間に隙間ができる(実測11px) */
.orgchart__branch::before {
  content: "";
  position: absolute;
  top: -14px;
  left: calc(25% - var(--org-gap) / 4);
  right: calc(25% - var(--org-gap) / 4);
  height: 1px;
  background: var(--org-line);
}
.orgchart__branch.-three::before {
  left: calc(16.666% - var(--org-gap) / 3);
  right: calc(16.666% - var(--org-gap) / 3);
}

/* 子それぞれの頭に立てる縦線 */
.orgchart__node {
  position: relative;
  padding-top: 14px;
}
.orgchart__node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 14px;
  background: var(--org-line);
}

/* 部の下にぶら下がる課のまとまり。
   最下段は横幅が最も狭いので、字と間隔を一段落とす */
.orgchart__children {
  display: grid;
  gap: calc(var(--org-gap) / 2);
  margin-top: 0;
  font-size: .92em;
}
.orgchart__children.-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 3項目でも2列に折り返す。2段ネストの内側で3列に割ると
   1列あたり実効43pxとなり、5文字の課名が3行に割れてしまうため。
   3項目のときは最後の1つが下段に単独で並ぶ */
.orgchart__children.-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .orgchart {
    --org-gap: 8px;
    font-size: .74rem;
  }
  .orgchart__box { min-height: 36px; padding: 7px 2px; }
  /* 課は横に並べると1文字幅まで潰れるので縦積みにする。
     縦の連結線は各段の::beforeが残るため階層は読み取れる */
  .orgchart__children.-two,
  .orgchart__children.-three { grid-template-columns: 1fr; }
}
/* ==========================================================
   下層ページ 明度調整 (第1弾: 地の色と節の区切り)

   下層だけを白基調にする。トップページは --base(生成り)のまま。
   明朝体・箔色・角丸なしは維持するので、トーンの断絶は起きない。

   戻すときは --sub-base / --sub-base-alt を
   var(--base) / #f4f2ed に書き換えれば元の見え方になる
   ========================================================== */
:root {
  --sub-base: #ffffff;      /* 下層の地(白) */
  --sub-base-alt: #f7f6f3;  /* 交互配色の薄い生成り */
}

/* 下層の各面を白基調に差し替える */
.breadcrumb { background: var(--sub-base); }
.section { background: var(--sub-base); }
.section--gray { background: var(--sub-base-alt); }
.subhero--plain { background: var(--sub-base); }

/* サイドナビ付きページ(about配下)は sub-layout が地を持たないため、
   body 側ではなくラッパーで面を作る */
.sub-layout { background: var(--sub-base); }

/* 節の切れ目を罫線で明示する。
   交互配色だけだと白とごく薄い生成りの差が小さく、
   区切りが見えにくいため */
.section + .section { border-top: 1px solid var(--line); }

/* ==========================================================
   下層ページ 明度調整 (第1弾-b: 全幅化とヘッダーの整合)

   第1弾で出た2点を修正する。HTMLは変更しない。

   ① .sub-layout は width:min(1160px,100%) の中央寄せボックスのため、
      背景を持たせると1160px超の画面で左右に生成りの帯が残った。
      面を作る役割を .sub-layout の外側に移し、全幅を白にする。
      下層ページは必ず .breadcrumb を持ち、トップは持たないので、
      これを下層の判定に使う(HTMLへのクラス追加が不要になる)。

   ② 本文が白になったことで、生成り半透明のヘッダーだけが
      灰色の帯として浮いた。下層でのみヘッダーを白系に寄せる。

   戻すときはこの見出し以降を削除すれば元に戻る
   ========================================================== */

/* .breadcrumb を持つページ = 下層。
   :has() で判定し、body の地を白にして全幅の面を作る。
   Safari 15.4+ / Chrome 105+ / Firefox 121+ で対応済み */
body:has(.breadcrumb) { background: var(--sub-base); }

/* 面は body 側で作るので、.sub-layout の背景は外す(帯の原因) */
body:has(.breadcrumb) .sub-layout { background: transparent; }

/* 下層のヘッダーを白系に寄せる。トップは生成り半透明のまま */
body:has(.breadcrumb) .header { background: rgba(255, 255, 255, 0.92); }

/* :has() 非対応ブラウザ向けの保険。
   面が生成りのままでも、各セクションは白なので破綻はしない */

/* ==========================================================
   サイトマップ
   フッターの分類(事業 / 会社情報 / その他)と同じ並びにする
   ========================================================== */
.sitemap__group + .sitemap__group {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.sitemap__title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--accent);
}
.sitemap__title a { transition: opacity .3s; }
.sitemap__title a:hover { opacity: .7; }
.sitemap__list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 32px;
}
.sitemap__list a {
  display: block;
  padding: 10px 4px 10px 18px;
  position: relative;
  font-size: .92rem;
  transition: color .3s, padding-left .3s;
}
/* 箇条書きの点の代わりに短い罫線。定義表・サイドナビと同じ流儀 */
.sitemap__list a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--line);
  transition: background .3s;
}
.sitemap__list a:hover {
  color: var(--accent);
  padding-left: 24px;
}
.sitemap__list a:hover::before { background: var(--accent); }

@media (max-width: 860px) {
  .sitemap__list { grid-template-columns: 1fr; }
  .sitemap__group + .sitemap__group { margin-top: 28px; padding-top: 28px; }
}

/* アンカーで飛んだとき、固定ヘッダーの下に見出しが隠れないようにする。
   scroll-behavior: smooth と併用する場合はこれが無いと
   着地位置がヘッダーに潜り込む */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ==== M3-LOGO-OGAWA-STYLE start (M3-logo-color-0819c) ==== */
/* ロゴ・ロックアップ: Didone系ワードマーク + センター揃えサブライン。
   0818b: 比率をOGAWA準拠(サブライン比 約0.30)に。
   0819c: 英字の色を先方選定の薄い青 #5472c0 に変更
          (ロゴマークの青 #162c65 実測から明度調整した派生色)。 */
:root {
  --font-logo: 'Bodoni Moda', 'Didot', 'Bodoni MT', 'Noto Serif JP', serif;
  --logo-blue: #5472c0;
}

.header__logo-text,
.footer__logo-text {
  align-items: center;
  text-align: center;
}

.header__logo-en,
.footer__logo-en {
  font-family: var(--font-logo);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--logo-blue);
}

.header__logo-en { font-size: 1.85rem; }
.footer__logo-en { font-size: 1.95rem; }

.header__logo-ja,
.footer__logo-ja {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.28em;
  margin-top: 3px;
}

.header__logo-ja { font-size: 0.56rem; }
.footer__logo-ja { font-size: 0.58rem; }

@media (max-width: 860px) {
  .header__logo-en { font-size: 1.5rem; }
  .header__logo-ja { font-size: 0.5rem; letter-spacing: 0.22em; }
}
/* ==== M3-LOGO-OGAWA-STYLE end ==== */

/* ==== M3-FLAVORS-FIELDS start (M3-flavors-fields-0820e) ==== */
/* flavors「当社香料の主な開発分野」: パンフ準拠(丸写真+見出し罫線+行組み) */
.fieldset {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 40px;
}
.fieldset:first-of-type { margin-top: 8px; }
.fieldset__img { flex: 0 0 112px; }
.fieldset__img img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.fieldset__body { flex: 1 1 auto; min-width: 0; }
.fieldset__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 8px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cfccc3;
}
.fieldset__row {
  margin: 0 0 8px;
  line-height: 1.8;
}
.fieldset__term {
  font-weight: 700;
  margin-right: 1em;
}
.fieldset__items { }
@media (max-width: 860px) {
  .fieldset { gap: 18px; margin-top: 32px; }
  .fieldset__img { flex-basis: 72px; }
  .fieldset__img img { width: 72px; height: 72px; }
  .fieldset__title { font-size: 1.05rem; }
  .fieldset__term { display: block; margin-right: 0; }
}
/* ==== M3-FLAVORS-FIELDS end ==== */

/* ==== M3-FLAVORS-DEVFLOW start (M3-flavors-devflow-0820g) ==== */
/* flavors 開発フロー図: 丸ノード+矢印(パンフ6ページ準拠・0820gでPC1段化)。
   Start/Goal はブランド色(--logo-blue / --accent)。矢印は疑似要素。 */
.devflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
}
.devflow__step {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border: 1px solid #b9b6ac;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.73rem;
  line-height: 1.5;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}
.devflow__step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  transform: translateX(65px);
  color: #7a776e;
  font-size: 1.05rem;
}
.devflow__step { position: relative; margin-right: 34px; }
.devflow__step:last-child { margin-right: 0; }
.devflow__step--start,
.devflow__step--goal {
  border: none;
  color: #fff;
  font-family: var(--font-logo, serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.devflow__step--start { background: var(--logo-blue, #5472c0); }
.devflow__step--goal { background: var(--accent, #a8863f); }
@media (max-width: 860px) {
  .devflow { row-gap: 16px; }
  .devflow__step { width: 84px; height: 84px; font-size: 0.66rem; margin-right: 28px; }
  .devflow__step:not(:last-child)::after { transform: translateX(56px); font-size: 0.95rem; }
}
/* ==== M3-FLAVORS-DEVFLOW end ==== */

/* ==== M3-FIELDS-CTA start (M3-fields-cta-move-0824b) ==== */
/* flavors 開発分野の contact 導線ボタン: sec-head の右横に配置。
   PC=見出し行の右端(下端揃え) / SP=見出しの下に折り返し。 */
.sec-head--cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
}
.sec-head--cta .sec-head__cta {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: 6px;
}
@media (max-width: 860px) {
  .sec-head--cta .sec-head__cta { margin-bottom: 0; }
}
/* ==== M3-FIELDS-CTA end ==== */

/* ==== M3-CTA-BTN start (M3-cta-btn-green-0827k) ==== */
/* 共通CTAのボタン: 立体感のあるグリーン塗り+白文字(参考: 影+角丸+矢印)。
   0824e の白枠版から差し替え。.cta 限定で --dark 系には影響しない。 */
.cta .btn-outline {
  background: linear-gradient(180deg, #6ba55e 0%, #4f8045 100%);
  border: none;
  border-radius: 6px;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 14px rgba(35, 62, 30, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cta .btn-outline::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.55em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='1.8'/%3E%3Cpolyline points='3.2,6.2 12,13 20.8,6.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='1.8'/%3E%3Cpolyline points='3.2,6.2 12,13 20.8,6.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta .btn-outline::after {
  content: '\2192';
  margin-left: 0.6em;
  font-size: 0.9em;
}
.cta .btn-outline:hover {
  background: linear-gradient(180deg, #5f9a52 0%, #44713b 100%);
  border: none;
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 7px 18px rgba(35, 62, 30, 0.48);
}
.cta .btn-outline:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px rgba(35, 62, 30, 0.4);
}
.cta .btn-outline:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* ==== M3-CTA-BTN end ==== */

/* ==== M3-POLICY start (M3-sus-policy-0825b) ==== */
/* サステナビリティ配下: カードのリンク化と方針ページの下位項目インデント */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.policy-sub {
  padding-left: 1.6em;
}
/* ==== M3-POLICY end ==== */

/* ==== M3-GNAV-SUB start (M3-gnav-sub-0827b) ==== */
/* gnav「会社情報」ドロップダウン。PC=hover/focus-within、SP=ドロワー内常時展開 */
.gnav__has-sub {
  position: relative;
  padding-right: 18px;
}
.gnav__has-sub::after {
  content: '\25BE';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: currentColor;
  opacity: 0.7;
  pointer-events: none;
}
.gnav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 190px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  background: rgba(252, 251, 248, 0.97);
  border: 1px solid var(--line, #cfccc3);
  box-shadow: 0 10px 28px rgba(23, 21, 15, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 120;
}
.gnav__sub::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.gnav__has-sub:hover .gnav__sub,
.gnav__has-sub:focus-within .gnav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.gnav__sub li {
  border: 0;
  width: auto;
  text-align: left;
}
.gnav__sub a {
  display: block;
  padding: 9px 20px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.gnav__sub a::after {
  display: none;
}
.gnav__sub a:hover {
  background: rgba(23, 21, 15, 0.05);
}
@media (max-width: 860px) {
  .gnav__has-sub {
    padding-right: 0;
  }
  .gnav__has-sub::after {
    display: none;
  }
  .gnav__sub {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  /* M3-GNAV-SUB-SPFIX-0827q: PC用 hover/focus-within の translate を SP で確実に打ち消す
     (同一詳細度で上書き。sticky hover 対策) */
  .gnav__has-sub:hover .gnav__sub,
  .gnav__has-sub:focus-within .gnav__sub {
    transform: none;
    left: auto;
  }
  .gnav__sub::before {
    display: none;
  }
  .gnav__sub li {
    width: 100%;
    text-align: center;
    border: 0;
  }
  .gnav__sub a {
    padding: 10px 0;
    font-size: 0.85rem;
    opacity: 0.85;
    white-space: normal;
  }
}
/* ==== M3-GNAV-SUB end ==== */

/* ==== M3-HEADER-BF start (M3-header-bf-0827c) ==== */
/* SPドロワー修正: .header の backdrop-filter が fixed 子孫(.gnav)の
   包含ブロックとなり、ドロワー inset:0 がヘッダー高に潰れる既存バグの対処。
   ぼかしを ::before に移設(見た目不変・包含ブロック化のみ解消)。 */
.header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ==== M3-HEADER-BF end ==== */

/* ==== M3-GNAV-POS start (M3-header-right-0827r) ==== */
/* 配置のみ(案1): ロゴは左端、ナビ+Language をひと塊で右端寄せ(参考=ギオン)。
   ナビ〜Language 間は flex gap のみ。右端の余白は inner padding(32px)。 */
.header__logo {
  margin-left: 0;
}
.gnav {
  margin-left: auto;
  margin-right: 0;
}
.lang--pc {
  margin-right: 0;
}
@media (max-width: 860px) {
  .header__logo {
    margin-left: 0;
  }
  .gnav {
    margin: 0;
  }
  .lang--pc {
    margin: 0;
  }
}
/* ==== M3-GNAV-POS end ==== */

/* ==== M3-HEADER-PAD start (M3-HEADER-PAD-1200-0827y via M3-header-pad-fix-0827x-mid120) ==== */
/* ヘッダー左右の対称余白。240px はワイド画面(≥1520px)でのみ適用し、
   1519px 以下は中身が入る値へ段階的に縮小して左右対称を保つ。 */
.header__inner {
  padding-left: 240px;
  padding-right: 240px;
}
@media (max-width: 1519px) {
  .header__inner {
    padding-left: 120px;
    padding-right: 120px;
  }
}
@media (max-width: 1400px) {
  .header__inner {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (max-width: 1200px) {
  .header__inner {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 860px) {
  .header__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* ==== M3-HEADER-PAD end ==== */

/* ==== M3-GNAV-NOWRAP start (M3-gnav-nowrap-0827t) ==== */
/* PCナビの項目内折り返しを禁止(0827s の余白拡張で生じた 1198〜1121px の
   2行化、および従来からの 900/861px の2行化を解消)。 */
.gnav__list a {
  white-space: nowrap;
}
@media (max-width: 860px) {
  .gnav__list a {
    white-space: normal;
  }
}
/* ==== M3-GNAV-NOWRAP end ==== */

/* ==== M3-HEADER-NARROW start (M3-header-narrow-fix-0827v) ==== */
/* 1000px以下でヘッダーを一段縮め、nowrap 時も Language を画面内に保つ。
   下限861pxを付けて SP(≤860px)のルールと二重適用にならないようにする。 */
@media (min-width: 861px) and (max-width: 1000px) {
  .header__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .gnav__list {
    gap: 12px;
  }
  .gnav__list a {
    font-size: 0.75rem;
  }
}
/* ==== M3-HEADER-NARROW end ==== */

/* ==== M3-NAV-SERIF start (M3-nav-serif-0827z2) ==== */
/* ヘッダーのナビ・Language を明朝(Noto Serif JP w500)に。
   w500 は link に追加済みの実体ウェイト(合成太字ではない)。
   タイ語ページのナビは style-th.css の --font-th が後勝ちするため対象外。 */
.gnav__list a {
  font-family: var(--font-serif);
  font-weight: 500;
}
.lang__label {
  font-family: var(--font-serif);
  font-weight: 500;
}
/* ==== M3-NAV-SERIF end ==== */


/* ==== M3-NAV-SANS-BACK-0828b start ==== */
/* 0827z2(明朝化)の巻き戻し。ナビ・ドロップダウン子項目・Language を
   元のゴシックに戻す(M3-NAV-SERIF ブロックを後勝ちで打ち消す)。 */
.gnav__list a {
  font-family: var(--font-ja);
  font-weight: 400;
}
.lang__label {
  font-family: var(--font-en);
  font-weight: 400;
}
/* ==== M3-NAV-SANS-BACK-0828b end ==== */

/* ==== M3-SUBHERO-JA start (M3-flavors-subhero-ja-0828d) ==== */
/* flavors のみ subhero 大見出しを和文化。欧文前提の字間・行間を和文向けに補正。
   他18ページの .subhero__en には影響しない(modifier 方式)。
   タイ語版は英字のまま(タイ字は line-height 1.25 で声調記号が切れるため)。 */
.subhero__en--ja {
  letter-spacing: 0.05em;
}
.subhero__en--ja .subhero__ja {
  margin-top: 16px;
  letter-spacing: 0.18em;
}
/* ==== M3-SUBHERO-JA end ==== */

/* ==== M3-FIELDS-CTA-3D start (M3-FIELDS-CTA-SIZE-0830b via M3-fields-cta-3d-0830a) ==== */
/* 事業紹介ページの見出し横ボタンを CTA と同じ立体グリーンに揃え、2倍サイズに。
   .sec-head--cta 内に限定するため、contact の送信ボタン・sustainability の
   PDFボタン・recruit のエントリーボタン(いずれも .btn-fill)には波及しない。
   JP/th とも同じマークアップなので CSS だけで両方に反映される。 */
.sec-head--cta .btn-fill {
  min-width: 300px;
  padding: 22px 60px;
  font-size: 1.28rem;
  background: linear-gradient(180deg, #6ba55e 0%, #4f8045 100%);
  border: none;
  border-radius: 9px;
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    0 6px 21px rgba(35, 62, 30, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sec-head--cta .btn-fill::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.55em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='1.8'/%3E%3Cpolyline points='3.2,6.2 12,13 20.8,6.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='1.8'/%3E%3Cpolyline points='3.2,6.2 12,13 20.8,6.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sec-head--cta .btn-fill::after {
  content: '\2192';
  margin-left: 0.6em;
  font-size: 0.9em;
}
.sec-head--cta .btn-fill:hover {
  background: linear-gradient(180deg, #5f9a52 0%, #44713b 100%);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    0 11px 27px rgba(35, 62, 30, 0.48);
}
.sec-head--cta .btn-fill:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 3px 12px rgba(35, 62, 30, 0.4);
}
.sec-head--cta .btn-fill:focus-visible {
  outline: 2px solid #4f8045;
  outline-offset: 3px;
}
@media (max-width: 860px) {
  /* SP は 2倍だと収まらないため 1.4倍程度に抑える */
  .sec-head--cta .btn-fill {
    min-width: 0;
    width: 100%;
    padding: 20px 24px;
    font-size: 1.2rem;
  }
}
/* ==== M3-FIELDS-CTA-3D end ==== */

/* ==== M3-SUS-TILE start (M3-sus-tile-0830d) ==== */
/* 未来共創の方針カードをタイル型に(miyasaka2 の意匠を移植)。
   .card-grid--tile 限定なので、.card__img を持つ既存カードには影響しない。
   列数は現行の段階式(860px で 3→1列)を維持。 */
.card-grid--tile .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line, #e3e0da);
  border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-grid--tile .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 40, 30, 0.10);
}
.card-grid--tile .card__title {
  margin-top: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.card-grid--tile .card__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent, #a8863f);
}
@media (max-width: 860px) {
  .card-grid--tile .card {
    min-height: 0;
    padding: 24px 22px;
  }
}
/* ==== M3-SUS-TILE end ==== */

/* ==== M3-DRAWER-SCROLL start (M3-drawer-scroll-0830g) ==== */
/* SPドロワー: 項目が増えて画面に収まらないときスクロールできるようにする。
   justify-content:center のままだと上下にはみ出した分へ到達できないため、
   flex-start + 子の margin:auto で「収まれば中央 / 溢れたら上から」を両立。 */
@media (max-width: 860px) {
  .gnav {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .gnav > * {
    flex-shrink: 0;
  }
  .gnav__list {
    margin-top: auto;
  }
  .gnav .lang--mobile {
    margin-bottom: auto;
  }
}
/* ==== M3-DRAWER-SCROLL end ==== */

/* ==== M3-CTA-OVERLAY-SUS start (M3-sus-cta-img3-0831b) ==== */
/* sustainability の CTA だけ overlay を濃くする。新背景(明るい木目+白い紙の
   模型)では 45% だと白文字のコントラストが 4.85 まで落ちるため、55% にして
   現行相当(6.57)に戻す。他ページの CTA は 45% のまま。 */
.cta--sus .cta__overlay {
  background: rgba(0, 0, 0, 0.55);
}
/* ==== M3-CTA-OVERLAY-SUS end ==== */

/* ===== M3-GNAV-MEGA-0901a start ===== */
/* 現行 0901b: 大見出し(左固定)+リンク横並び。PC専用、SP(≤860)は無変更 */
/* 帯の左右余白 = .header__inner の余白ラダー(0827x/y・M3-HEADER-NARROW と同値。値を変えるときは両方) */
@media (min-width: 861px)  { .gnav__sub { --mega-pad: 24px; } }
@media (min-width: 1001px) { .gnav__sub { --mega-pad: 48px; } }
@media (min-width: 1201px) { .gnav__sub { --mega-pad: 80px; } }
@media (min-width: 1401px) { .gnav__sub { --mega-pad: 120px; } }
@media (min-width: 1520px) { .gnav__sub { --mega-pad: 240px; } }

@media (min-width: 861px) {
  /* 親 li 下端〜ヘッダー下端の隙間を li 幅だけ埋めるホバー橋(帯は li の子なので hover が途切れない) */
  .gnav__has-sub::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: var(--header-h, 72px);
  }
  /* 旧ホバー橋(帯上 12px)は全幅化すると隣 li まで覆うため無効化 */
  .gnav__sub::before { display: none; }

  .gnav__sub {
    --mega-head-w: 240px;      /* 見出しカラム幅(縦罫・右余白込み)。th の長い見出しもこの幅に収まる想定 */
    --mega-pt: 36px;
    --mega-pb: 40px;
    position: fixed;
    top: var(--header-h, 72px);
    left: 0; right: 0;
    min-width: 0; width: auto;
    margin: 0;
    padding: var(--mega-pt) var(--mega-pad, 32px) var(--mega-pb)
             calc(var(--mega-pad, 32px) + var(--mega-head-w));
    box-sizing: border-box;
    background: rgba(255, 255, 255, .98);
    border: 0;
    border-top: 1px solid rgba(23, 21, 15, .10);
    box-shadow: 0 16px 28px -16px rgba(23, 21, 15, .25);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 48px;
    row-gap: 12px;
    min-height: calc(var(--mega-pt) + var(--mega-pb) + 44px);
    transform: translateY(-6px);
  }
  /* 0827b の開閉ルール(translate(-50%,0))と同詳細度で後勝ち打ち消し */
  .gnav__has-sub:hover .gnav__sub,
  .gnav__has-sub:focus-within .gnav__sub { transform: none; }

  /* 大見出し(data-title から生成)。絶対配置の固定幅カラムなので右側が折り返しても巻き込まれない */
  .gnav__sub::after {
    content: attr(data-title);
    position: absolute;
    left: var(--mega-pad, 32px);
    top: var(--mega-pt);
    bottom: var(--mega-pb);
    width: calc(var(--mega-head-w) - 40px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(23, 21, 15, .12);
    font-family: inherit;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .06em;
    color: #17150f;
    white-space: nowrap;
  }

  .gnav__sub > li { margin: 0; padding: 0; }
  .gnav__sub > li > a {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: 8px 0;
    font-size: 1.1rem;
    white-space: nowrap;
  }
  /* ▶ は CSS 三角形(フォント依存なし・th も同形) */
  .gnav__sub > li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent var(--logo-blue, #5472c0);
  }
  .gnav__sub > li > a:hover { color: var(--logo-blue, #5472c0); }
}
/* ===== M3-GNAV-MEGA-0901a end ===== */

/* ===== M3-FOOTER-LIGHT-0901d start ===== */
/* 旧3列フッター(本体 1036〜 の .footer 系ルール)を淡青地 #E4EBF2 で使うための色再定義。0827ac/0828a の実績値 */
.footer {
  background: #E4EBF2;
  color: #2c3530;
  border-radius: 20px 20px 0 0;   /* 0827ab2 以来の上2角の角丸は維持(不要なら 0) */
}
.footer__logo-ja { color: #5f6b64; }                     /* 4.75:1(0827ac) */
.footer__address,
.footer__cert-caption,
.footer__legal a,
.footer__copyright { color: #5f6b64; }
.footer__col-title {
  color: #2c3530;
  border-bottom-color: rgba(30, 43, 36, .16);
}
.footer__col a { color: #4a5750; }                       /* 約6.3:1 */
.footer__col a:hover,
.footer__legal a:hover {
  color: var(--logo-blue, #5472c0);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.footer__cert,
.footer__bottom { border-top-color: rgba(30, 43, 36, .16); }
.footer__cert img { border: 1px solid rgba(30, 43, 36, .12); }
/* ===== M3-FOOTER-LIGHT-0901d end ===== */

/* ==== M3-COMMUNITY start (M3-community-page-0901e) ==== */
/* 未来共創タイルの4枚組。既存 .card-grid(3列) には触れず、
   card-grid--4 併用時のみ PC4列 / 中間2列 / SP1列 にする */
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-grid--4 { grid-template-columns: 1fr; }
}
/* ==== M3-COMMUNITY end ==== */

/* ==== M3-ENV-EXTRA start (M3-env-extra-0901f) ==== */
/* environment.html 追補: media-row 画像の4:3切り抜きと Coverflow スライドショー */
.media-row__media--crop43 img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.coverflow {
  margin-top: 64px;
  /* 親の narrow(820px)から張り出す。transform での中央寄せは
     .fade-in.is-visible { transform: translateY(0) } に上書きされるので margin-left で寄せる */
  width: min(1160px, calc(100vw - 48px));
  margin-left: calc(50% - min(580px, 50vw - 24px));
  -webkit-user-select: none;
  user-select: none;
}
.coverflow__stage {
  --cf-w: 460px;
  position: relative;
  height: calc(var(--cf-w) * 0.75 + 48px);
  perspective: 1100px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.coverflow__stage:active { cursor: grabbing; }
.coverflow__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.coverflow__track {
  position: absolute; inset: 0;
  list-style: none; margin: 0; padding: 0;
  transform-style: preserve-3d;
}
.coverflow__item {
  position: absolute; left: 50%; top: 50%;
  width: var(--cf-w); aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  transition: transform .45s ease, opacity .45s ease;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(35, 40, 30, 0.18);
  background: #e3e0da;
  cursor: grab;
}
.coverflow__stage:active .coverflow__item { cursor: grabbing; }
.coverflow.is-static .coverflow__item { transition: none; }
.coverflow__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.coverflow__ui {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 24px;
}
.coverflow__btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: #fff;
  font-size: 1.2rem; line-height: 1; color: var(--text);
  cursor: pointer; transition: .3s;
}
.coverflow__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.coverflow__btn:disabled { opacity: .35; cursor: default; }
.coverflow__dots { display: flex; gap: 10px; }
.coverflow__dot {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: #cfccc4; cursor: pointer; transition: background .3s;
}
.coverflow__dot.is-active { background: var(--accent); }
.coverflow__caption {
  margin-top: 14px; text-align: center;
  font-size: .85rem; color: var(--gray);
}
.coverflow__caption:empty { display: none; }
@media (max-width: 1200px) {
  .coverflow__stage { --cf-w: 380px; }
}
@media (max-width: 860px) {
  .coverflow__stage { --cf-w: 200px; }
}
/* ==== M3-ENV-EXTRA end ==== */

/* ===== M3-FOOTER-WAVE-0902a start ===== */
/* 本文とフッターの境を波形に。SVG は塗りのみ(背景透過)なので、直前セクションの背景画像の上にもそのまま乗る */
.footer {
  --wave-h: 72px;
  position: relative;
  border-radius: 0;
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: var(--wave-h);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23E4EBF2' d='M0,48 C240,88 480,8 720,48 C960,88 1200,8 1440,48 L1440,80 L0,80 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
@media (max-width: 860px) {
  .footer { --wave-h: 40px; }
}
/* ===== M3-FOOTER-WAVE-0902a end ===== */

/* ===== M3-GNAV-SUB-SPFIX-0902c start ===== */
/* SP: 閉じたドロワー内の .gnav__sub が visibility:visible(0830g)で親 .gnav の hidden を打ち消し、
   不可視のリンクが固定位置でタップを奪っていた。親に従わせる。開いた状態では親が visible なので表示は不変 */
@media (max-width: 860px) {
  .gnav__sub,
  .gnav__has-sub:hover .gnav__sub,
  .gnav__has-sub:focus-within .gnav__sub {
    visibility: inherit;
    transition: none;
  }
  /* 閉じたドロワーはフェードアウト中(visibility .35s)も含めてタップを素通しにする。
     #menuBtn は .gnav の外(header__inner 直下)なので開閉操作には影響しない */
  .gnav:not(.is-open) { pointer-events: none; }
}
/* ===== M3-GNAV-SUB-SPFIX-0902c end ===== */

/* ===== M3-RD-FAQ-0904f start ===== */
/* 研究開発ページの FAQ(会社案内 P9)。details/summary の素の実装・JS 不要
   0904i: 初期閉じ + 開くときに grid-template-rows 0fr→1fr で高さアニメーション */
.faq { margin-top: 8px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "Q";
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--logo-blue, #5472c0);
}
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin: .55em 0 0 auto;
  border-right: 1.5px solid var(--gray, #8f8c85);
  border-bottom: 1.5px solid var(--gray, #8f8c85);
  transform: rotate(45deg);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.faq__item[open] > .faq__q::after { transform: rotate(-135deg); }
/* 閉じるアニメ中(faq.js が付ける)。open は縮み終わってから外すので、
   矢印だけ本文より遅れて回るのを防ぐ。上と同詳細度なので後勝ちで効く */
.faq__item.is-closing > .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--logo-blue, #5472c0); }

/* 回答は grid の行高で伸縮させる(高さを固定値で書かずにアニメーションできる) */
.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1);
}
.faq__item[open] > .faq__body { grid-template-rows: 1fr; }
.faq__body > * { min-height: 0; overflow: hidden; }
.faq__a {
  display: flex;
  gap: 12px;
  padding: 0 0 24px;
  font-size: .95rem;
  line-height: 2.1;
  color: #55524b;
}
.faq__a::before {
  content: "A";
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 1rem;
  line-height: 2.1;
  color: var(--accent);
}
@media (max-width: 860px) {
  .faq__q { font-size: 1rem; padding: 18px 0; }
  .faq__a { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__body { transition: none; }
  .faq__q::after { transition: none; }
}
/* ===== M3-RD-FAQ-0904f end ===== */

/* ===== M3-ABOUT-SUBHERO-0904m start ===== */
/* 会社情報の subhero だけ、背景画像を PC/SP で出し分け、overlay も濃くする。

   背景画像を HTML の inline style ではなくここで持つ理由:
   inline に勝つには !important が要るが、この2枚は同じ要素の出し分けなので
   両方 CSS 側に置けば通常のカスケードで済む。パスは style.css からの相対なので
   JP/ と th/ のどちらのページからでも同じ1本で解決する。

   PC(861px以上)= about_hero.jpg(1920×645・比2.977)
     横長なので cover では上下が切れず左右が 1.5% 落ちるだけ。コルク栓・瓶の首・
     上の余白・左右の花がすべて入る。
   SP(860px以下)= about_hero_sp.jpg(比 約1.03)
     PC 用をそのまま使うと表示枠(375×364・比1.031)に対して横長すぎ、
     画像中央の 34.6% しか映らず瓶に寄りすぎるため、正方形寄りに切った別画像にする。

   overlay を 0.82→0.44→0.20 にする理由:
   60%地点の .44 は当初の想定範囲(.30〜.40)を超えるが、SP では画像の中央しか
   映らず左端の濃さが効かないため、左端を上限の .82 にしても 375 が 4.38 止まりで
   AA(4.5)に届かなかった。60%地点を .44 に上げると届く。
   右側の花の明るさは .40 のときと実測 0.441→0.432 でほぼ変わらない。
   他ページの subhero は既定(0.55→0.15)のまま。 */
.subhero--about .parallax__bg {
  background-image: url("../images/optimized/about_hero.jpg");
}
@media (max-width: 860px) {
  .subhero--about .parallax__bg {
    background-image: url("../images/optimized/about_hero_sp.jpg");
  }
}
.subhero--about .subhero__overlay {
  background: linear-gradient(to right, rgba(0,0,0,.82), rgba(0,0,0,.44) 60%, rgba(0,0,0,.20));
}
/* ===== M3-ABOUT-SUBHERO-0904m end ===== */

/* ===== M3-CONTACT-SUBHERO-0907d start ===== */
/* お問い合わせの subhero を汎用素材 dv_img03.jpg(353×234・1440幅に対し約4.1倍の
   引き伸ばし)から contact_hero.jpg(1920×1280・比1.500)に差し替える。

   背景画像を HTML の inline style ではなくここで持つ理由:
   inline に勝つには !important が要る。CSS 側に置けば通常のカスケードで済み、
   JP/ と th/ のどちらのページからも style.css 基準の同じ相対パス1本で解決する
   (.subhero--about と同じ方式)。

   overlay を SP だけ上げる理由:
   この画像は麻布と明るいガラス瓶で、暗い領域が一切ない(横10分割の平均輝度
   L=0.352〜0.444、素の白文字コントラストは 2.1〜2.6 しかない)。
   それでも PC は表示枠 1440×491(比2.933)に対し画像が縦長なので上下24.4%が落ち、
   文字帯には瓶の下部と布だけが来るため既定 overlay(.55/.30/.15)で
   .subhero__ja(14.4px・通常文字)が 5.71 と 4.5 を通る。
   SP は表示枠 375×364(比1.031)で左右15.6%しか落ちず、画像中央の明るい瓶が
   そのまま「お問い合わせ」の背後に来るため 4.18 まで落ちて AA(4.5)に届かない。
   よって SP(860px以下)だけ濃度を上げる。PC(861px以上)は既定のまま無改修。
   en(54.4px/32px)は大文字扱いで基準3.0、いずれの条件でも余裕がある。 */
.subhero--contact .parallax__bg {
  background-image: url("../images/optimized/contact_hero.jpg");
}
@media (max-width: 860px) {
  .subhero--contact .subhero__overlay {
    background: linear-gradient(to right, rgba(0,0,0,.60), rgba(0,0,0,.38) 60%, rgba(0,0,0,.20));
  }
}
/* ===== M3-CONTACT-SUBHERO-0907d end ===== */

/* ===== M3-FOOTER-CERT-SP-0907e start ===== */
/* FSSC ロゴが横長(比 2.1)になり、SP でキャプションが語中で折り返す(「食/品部門」)ため縦積みに。
   PC(861px以上)は横並びのまま。0907b と同内容(0907b は旧版ロゴ差し戻し時に撤去) */
@media (max-width: 860px) {
  .footer__cert {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* ロゴ自身が「上尾工場 食品部門 / FSSC22000 認証取得」を持つため、縦積みでは文言が上下に重複する。
     SP ではキャプションを非表示。PC(861px以上)は横並びで離れるので残す */
  .footer__cert-caption { display: none; }
}
/* ===== M3-FOOTER-CERT-SP-0907e end ===== */

/* ===== M3-SUS-LEAD-0909b start ===== */
/* 未来共創ページの導入文(仮文言を差し替え)。小見出しは sec-head より一段小さく、philosophy__label と同格 */
.sus-lead__title {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
}
.sus-lead .lead + .lead { margin-top: 1.4em; }
/* 0909c: 45文字の行(「六方よし」…創っていく。)が 786px 必要で 760px を超えるため */
.sus-lead .lead { max-width: 800px; }
/* SP では支給文の <br> 位置で折り返すと行が細切れになるので、自然折り返しに任せる */
@media (max-width: 860px) {
  .sus-lead .lead br { display: none; }
  .sus-lead__title { font-size: 1.2rem; }
}
/* ===== M3-SUS-LEAD-0909b end ===== */

/* ===== M3-CERT-LOGO-0909d start ===== */
/* 取得認証ページ本文の FSSC22000 ロゴ。フッターの 56px(.footer__cert img)とは別枝 */
.cert-logo {
  display: block;
  width: min(100%, 400px);   /* 810×387 の画像 → 幅400 で高さ約191px。Retina 2x を保てる上限 */
  height: auto;
  margin-bottom: 16px;
  border: 1px solid rgba(30,43,36,.12);   /* 参考サイトどおり薄い枠。白背景なので無しでも可 */
  border-radius: 4px;
}
@media (max-width: 860px) {
  .cert-logo { width: 100%; }   /* SP は td 幅いっぱい(327px 前後) */
}
.cert-logo--ea21 { width: 204px; }   /* 768×846(ロゴ+認証番号の合成)。ロゴ部分(幅の240/256)が FSSC の表示高191px と同じになる幅。SP も固定 */
/* 認証ページの PDF リンクをボタン風に(0930) */
.pdf-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 14px 8px 12px;
  border: 1px solid var(--logo-blue, #5472c0); border-radius: 6px;
  color: var(--logo-blue, #5472c0); font-size: .9rem; letter-spacing: .04em; line-height: 1.4;
  text-decoration: none; transition: background .25s, color .25s;
}
.pdf-link::before { content: "\2197"; font-size: .95em; }   /* ↗ 別タブで開く印。SVG アイコンにしてもよい */
.pdf-link__tag {
  font-family: var(--font-en); font-size: .7rem; font-weight: 500; letter-spacing: .1em;
  padding: 2px 6px; border-radius: 3px; background: var(--logo-blue, #5472c0); color: #fff;
}
.pdf-link:hover { background: var(--logo-blue, #5472c0); color: #fff; }
.pdf-link:hover .pdf-link__tag { background: #fff; color: var(--logo-blue, #5472c0); }
/* ===== M3-CERT-LOGO-0909d end ===== */

/* ===== M3-RECRUIT-0915b start ===== */
/* 採用停止画面(0915f: 大見出し / メッセージ / トップページへ の中央揃え)。
   既定で表示、recruit-render.js が status:"open" のときだけ .recruit-open と入れ替える */
.recruit-closed__inner { text-align: center; padding-top: 24px; padding-bottom: 24px; }
.recruit-closed__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--logo-blue, #5472c0);
  margin: 0 0 40px;
}
.recruit-closed__msg {
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: .04em;
  white-space: pre-line;      /* recruit-data.js の改行をそのまま行として表示 */
  margin: 0 0 56px;
}
.recruit-closed__action { margin: 0; }
.recruit-closed__btn { min-width: 320px; padding-top: 22px; padding-bottom: 22px; }
/* ボタンはロゴ青(見出しと同系)。.btn-fill は border/box-shadow 無し・transition は opacity のみ・hover は opacity .88 なので、
   ここでは transition を background に、hover は opacity 1 で濃い青をそのまま見せる */
.btn-fill.recruit-closed__btn { background: var(--logo-blue, #5472c0); border-color: var(--logo-blue, #5472c0); transition: background .3s, border-color .3s; }
.btn-fill.recruit-closed__btn:hover { background: #4361ad; border-color: #4361ad; opacity: 1; }
@media (max-width: 860px) {
  .recruit-closed__title { margin-bottom: 28px; }
  .recruit-closed__msg { margin-bottom: 40px; font-size: .95rem; }
  .recruit-closed__btn { min-width: 0; width: 100%; box-sizing: border-box; }
}
/* ===== M3-RECRUIT-0915b end ===== */
/* ===== M3-RECRUIT-FORM-0915d start ===== */
/* 応募フォーム(採用ページ・募集中モード)。基本部品は contact の .form 系を共用。select と同意チェックのみ追加 */
.form__control--select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238f8c85' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}
.form__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  cursor: pointer;
}
.form__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--logo-blue, #5472c0); }
.form__check a { text-decoration: underline; text-underline-offset: .2em; }
.form__check a:hover { color: var(--logo-blue, #5472c0); }
/* ===== M3-RECRUIT-FORM-0915d end ===== */

/* ===== M3-RECRUIT-POSITIONS-0915i start ===== */
/* 募集中の職種一覧(recruit-render.js が recruit-data.js の positions から描画)。押すと応募フォームの希望職種が選ばれる */
.recruit-positions__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.recruit-positions__item { border-bottom: 1px solid var(--line); }
.recruit-positions__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 8px 22px 16px;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--text);
  transition: color .3s;
}
.recruit-positions__link:hover { color: var(--logo-blue, #5472c0); }
.recruit-positions__arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--logo-blue, #5472c0);
  position: relative;
  transition: transform .3s;
}
.recruit-positions__arrow::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.recruit-positions__link:hover .recruit-positions__arrow { transform: translateX(4px); }
@media (max-width: 860px) {
  .recruit-positions__link { padding: 18px 4px 18px 8px; font-size: 1.05rem; }
  .recruit-positions__arrow { width: 36px; height: 36px; }
}
/* ===== M3-RECRUIT-POSITIONS-0915i end ===== */

/* ===== M3-RECRUIT-DETAIL-0915k start ===== */
/* 職種詳細ページ(recruit-{id}.html)と選考フロー */
.recruit-detail__h {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--text);
  margin: 40px 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--logo-blue, #5472c0);
}
.recruit-detail__h:first-child { margin-top: 0; }
.sec-head + .recruit-detail__h { margin-top: 0; }
.recruit-detail__table th { width: 180px; white-space: nowrap; }
.recruit-flow {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: flex;
  gap: 8px;                    /* 0918i 連結をやめて隙間を入れる */
}
.recruit-flow__step {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: auto;          /* 円をやめる */
  border-radius: 0;
  background: var(--logo-blue, #5472c0);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 26px 28px 26px 40px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  margin-left: 0;              /* 0918i 重なり(-22px)をやめる */
}
.recruit-flow__step:first-child {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  margin-left: 0;
  padding-left: 28px;
}
/* 0918i: 最後も右を尖らせる(見本に合わせ :last-child の clip-path 上書きを廃止) */
/* 白文字 4.5:1 を満たす4段(0918h 実測 4.60 / 4.61 / 5.53 / 6.79)。--accent 金は帯用に少し暗くした値 */
.recruit-flow__step:nth-child(1) { background: #8e7135; }
.recruit-flow__step:nth-child(2) { background: #5472c1; }
.recruit-flow__step:nth-child(3) { background: #4b66ac; }
.recruit-flow__step:nth-child(4) { background: #415996; }
.recruit-flow__num { font-family: var(--font-en); font-size: .7rem; letter-spacing: .18em; opacity: .85; }
.recruit-flow__en { font-family: var(--font-en); font-size: 1.05rem; letter-spacing: .1em; font-weight: 500; line-height: 1.2; }
.recruit-flow__en { display: none; }  /* 0918j 英字を非表示(戻す時はこの1行を削除) */
.recruit-flow__ja { font-size: .8rem; letter-spacing: .04em; margin-top: 4px; }
.recruit-detail__entry { text-align: center; margin: 0; }
.recruit-detail__btn { min-width: 320px; padding-top: 20px; padding-bottom: 20px; }
@media (max-width: 860px) {
  .recruit-detail__table th { width: 110px; white-space: normal; }
  .recruit-flow { flex-direction: column; gap: 0; }   /* 0918i SP は step の margin-top 8px で空ける(gap と二重にしない) */
  .recruit-flow__step {
    padding: 18px 20px 26px;
    /* 上辺の V 切り込みで、前のステップの下向きの尖りを見せる(PC の左切り込みと同じ理屈) */
    clip-path: polygon(0 0, 50% 16px, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px));
    margin: 8px 0 0;           /* 0918i 重なり(-16px)→ 隙間 */
  }
  .recruit-flow__step:first-child { margin-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px)); }
  /* 0918j: SP も最後を下向きに尖らせる(:last-child の上書きを廃止) */
  .recruit-flow__en { font-size: .9rem; }
  .recruit-detail__btn { min-width: 0; width: 100%; box-sizing: border-box; }
}
/* ===== M3-RECRUIT-DETAIL-0915k end ===== */

/* ===== M3-RECRUIT-CARDS-0916a start ===== */
/* 採用トップの職種カード(sustainability のタイルと同部品)。件数が少ないときも左詰めで自然に並ぶ */
.recruit-cards { margin-top: 0; }
.recruit-cards .card { min-height: 150px; }
@media (max-width: 860px) { .recruit-cards .card { min-height: 0; } }
/* ===== M3-RECRUIT-CARDS-0916a end ===== */

/* ===== M3-CONTACT-LEAD-SIDE-0916c start ===== */
/* ① お問い合わせの導入文(2段落・<br> は PC のみ) */
.contact-lead .lead { max-width: 800px; }
.contact-lead .lead + .lead { margin-top: 1.4em; }
.contact-lead .lead:nth-child(3) { margin-top: 0; }   /* 2段落目と3段落目は空けない(行は分ける) */
.contact-lead { margin-bottom: 40px; }                /* 導入文とフォーム(お名前)の間 */
@media (max-width: 860px) { .contact-lead .lead br { display: none; } }

/* ② フォームのラベルを入力欄の左に(contact のみ form--side) */
.form--side .form__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 24px;
  row-gap: 6px;
  align-items: start;
}
.form--side .form__label { margin: 0; padding-top: 1em; } /* 0916c 実測: .75em だとラベル baseline が入力文字より 3.45px 上 → 1em(14.08px) */
.form--side .form__error { grid-column: 2; margin: 0; }
.form--side .form__note, .form--side .form__submit { margin-left: 0; }
@media (max-width: 860px) { /* SP は従来の縦積み(ラベル下 8px・エラー上 6px)に戻す */
  .form--side .form__row { display: block; }
  .form--side .form__label { padding-top: 0; margin-bottom: 8px; }
  .form--side .form__error { grid-column: auto; margin-top: 6px; }
}
/* ===== M3-CONTACT-LEAD-SIDE-0916c end ===== */

/* ===== M3-CONTACT-COMPANY-0916f start ===== */
/* フォーム内の補助注記(会社名の下)。form--side では入力欄の列に揃える */
.form__help {
  margin: 8px 0 0;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--gray, #8f8c85);
}
.form--side .form__help { grid-column: 2; margin-top: 0; }
@media (max-width: 860px) {
  .form__help br { display: none; }
  .form--side .form__help { grid-column: auto; margin-top: 8px; }
}
/* ===== M3-CONTACT-COMPANY-0916f end ===== */

/* ===== M3-CONTACT-FORM-STYLE-0916h start ===== */
/* お問い合わせフォーム(form--side): 行の区切り線と入力欄の薄青背景 */
.form--side .form__row {
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--line);
}
/* 最終行(ご相談内容)の下は線を出さない。:last-of-type は同種(div)の最後=.form__submit を指して効かないため、後続に .form__row を持たない行を指す */
.form--side .form__row:not(:has(~ .form__row)) { border-bottom: 0; }
.form--side .form__control {
  background-color: #EEF3F9;                /* フッターの淡青 #E4EBF2 より一段明るい薄青 */
  border-color: transparent;
}
.form--side .form__control:focus {
  background-color: #fff;
  border-color: var(--logo-blue, #5472c0);
}
.form--side .form__control.is-invalid { border-color: #c0392b; }
.form--side .form__control::placeholder { color: #6b6b6b; } /* 既定 #757575 は薄青地で 4.13:1(AA 4.5 未満)→ 4.78:1 */
/* 導入文の下にも同じ破線(3段落目→線 28px、線→お名前ラベル 40px は既存の margin-bottom) */
.contact-lead { max-width: 760px; padding-bottom: 28px; border-bottom: 1px dashed var(--line); }
@media (max-width: 860px) {
  .form--side .form__row { padding-bottom: 20px; }
  .contact-lead { padding-bottom: 20px; }
}
/* form__note 内のリンク(プライバシーポリシー)。共通 a は text-decoration:none なので下線を付ける */
.form__note a { text-decoration: underline; text-underline-offset: .2em; }
.form--side .form__note { text-align: center; margin: 32px auto 24px; }
@media (max-width: 860px) { .form__note br { display: none; } } /* SP は <br> で細切れになる(JP 375 で 2行目 114px)ため自然折返し */
/* 応募フォーム(recruit-entry)にも form--side を適用: 同意チェックの行はラベル列を持たないので1列にし、PC は入力欄の列(200px + gap 24px)に揃える */
.form--side .form__row--check { grid-template-columns: 1fr; }
.form--side .form__row--check .form__check { grid-column: 1; }
.form--side .form__row--check .form__error { grid-column: 1; }
@media (min-width: 861px) { .form--side .form__row--check { padding-left: 224px; } }
/* ===== M3-CONTACT-FORM-STYLE-0916h end ===== */

/* ===== M3-CONTACT-SUBMIT-0916k start ===== */
/* お問い合わせの送信ボタンを共通 CTA(.cta .btn-outline / 0827k)と同じ立体グリーンに。hover はロゴ青。
   封筒アイコン・矢印(::before/::after)は付けない。.form--side 限定で recruit の「応募する」「トップページへ」には波及しない */
/* 1005b: 職種詳細の「エントリー」(.recruit-detail__btn)も同じ意匠に(セレクタ併記。min-width 320px は 0915k のまま) */
.form--side .form__submit .btn-fill,
.recruit-detail__btn {
  background: linear-gradient(180deg, #6ba55e 0%, #4f8045 100%);
  border: none;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 14px rgba(35, 62, 30, 0.4);
  padding: 15px 42px;
  letter-spacing: .24em;
  color: #fff;
  transition: background .3s, box-shadow .3s, transform .3s;
}
.form--side .form__submit .btn-fill:hover,
.recruit-detail__btn:hover {
  background: linear-gradient(180deg, #6a86cc 0%, #5472c0 55%, #4361ad 100%);  /* ロゴ青 #5472c0 基調 */
  opacity: 1;                                   /* 既存 .btn-fill:hover の opacity .88 を打ち消す */
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 7px 18px rgba(35, 62, 30, 0.48);
}
.form--side .form__submit .btn-fill:active,
.recruit-detail__btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px rgba(35, 62, 30, 0.4);
}
/* ===== M3-CONTACT-SUBMIT-0916k end ===== */

/* ===== M3-INDEX-SUS-0916l start ===== */
/* トップ 3番目の biz(未来共創)本文: PC は <br> で2文を分け、SP(≤860px)は細切れ(375 で 2行目 148px)を避けて自然折返し */
@media (max-width: 860px) { .biz__text br { display: none; } }
/* PC の孤立解消(1440: 2文目 38字が textW 587px に収まらず「きます。」4字が3行目に出る)。
   a) 字間 .12em→.08em だけでは 47px、b) カード+48px だけでは 32px の3行目が残るため両方を併用(a+b で 619/635px に収まる)。
   .biz__inner は max-width でなく width(min(1000px, calc(...) - 24px)) で決まるので calc 側に +48px */
/* ★id 付きは SP の .biz__inner{width:calc(100% - 32px)}(0,1,0)より強く SP のカードを 184px に潰すため PC 限定 */
@media (min-width: 861px) {
  #sustainability .biz__text { letter-spacing: .08em; }
  /* 右余白 24px を保つため、+48px は写真側(左)へ食い込ませる(margin-left も -48px)。width だけ +48 だと右端で 24px 切れる */
  #sustainability .biz__inner { margin-left: calc(var(--pw) - var(--xov) - 48px); width: min(1048px, calc(100% - (var(--pw) - var(--xov)) + 24px)); }
}
/* ===== M3-INDEX-SUS-0916l end ===== */

/* ===== M3-BTN-HOVER-BLUE-0917a start ===== */
/* 立体グリーンボタンの hover をロゴ青(#5472c0 基調・contact 送信 0916k と同じグラデ)に統一。通常時は緑のまま。
   0827k / 0830b / 0916k の各ブロックは触らず、同セレクタ・同詳細度の後勝ちで上書き。transform と影の寸法は元のまま、影色のみ青系に。
   金の .btn-fill(応募する)・青の .recruit-closed__btn(トップページへ)は対象外 */
.cta .btn-outline:hover {
  background: linear-gradient(180deg, #6a86cc 0%, #5472c0 55%, #4361ad 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 7px 18px rgba(35, 45, 90, 0.45);
}
.sec-head--cta .btn-fill:hover {
  background: linear-gradient(180deg, #6a86cc 0%, #5472c0 55%, #4361ad 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    0 11px 27px rgba(35, 45, 90, 0.45);
}
/* contact 送信(0916k)は背景が既に青。影だけ緑系のままだったので色を揃える */
.form--side .form__submit .btn-fill:hover,
.recruit-detail__btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 7px 18px rgba(35, 45, 90, 0.45);
}
/* 後勝ちの :hover が押下中(:hover かつ :active)の影まで上書きしてしまうので、元と同値の :active を hover の後ろに再掲して順序を保つ */
.cta .btn-outline:active,
.form--side .form__submit .btn-fill:active,
.recruit-detail__btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px rgba(35, 62, 30, 0.4);
}
.sec-head--cta .btn-fill:active {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 3px 12px rgba(35, 62, 30, 0.4);
}
/* ===== M3-BTN-HOVER-BLUE-0917a end ===== */

/* ===== M3-ABOUT-CARDS-0917b start ===== */
/* 会社情報の入口: 上段2枚(写真付き)+ 下段4枚(タイル・タイトル+一文) */
.about-cards-top + .about-cards-sub { margin-top: 32px; }
.about-cards-sub .card__text { margin-top: 10px; font-size: .88rem; line-height: 1.9; color: #5f5c55; }
.about-cards-sub .card { justify-content: flex-start; }
/* 0924c: 6枚に「詳しく見る →」を追加。下段は下端に寄せて4枚の位置を揃える。
   上段(写真カード・card-grid--tile ではない)は tile 用 .card__more と同じ見た目を与える。 */
.about-cards-sub .card__more { margin-top: auto; padding-top: 18px; }
.about-cards-top .card__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent, #a8863f);
}
@media (max-width: 860px) {
  .about-cards-top + .about-cards-sub { margin-top: 28px; }
}
/* ===== M3-ABOUT-CARDS-0917b end ===== */

/* ===== M3-PRESIDENT-BG-0918a start ===== */
/* 社長写真は背景を透過させた PNG。背後の色は CSS で敷く(色を変えたいときはこの2行だけ) */
.card__img--president,
.media-row__media--president {
  background: linear-gradient(180deg, #D6E9E5 0%, #EAF2F0 55%, #FBFCFC 100%);
}
.card__img--president img { object-position: center top; }
.media-row__media--president { border-radius: 4px; overflow: hidden; }
.media-row__media--president { max-width: 320px; }   /* 面を写真幅(img max-width:320px)に揃え、顔を面の中央に */
/* ===== M3-PRESIDENT-BG-0918a end ===== */

/* ===== M3-RECRUIT-SITES-0918p start ===== */
/* 採用トップの職種カードを勤務地ごとに2群(上尾工場 / 本社)で表示 */
.recruit-site + .recruit-site { margin-top: 48px; }
.recruit-site__name {
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--logo-blue, #5472c0);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--text);
}
@media (max-width: 860px) {
  .recruit-site + .recruit-site { margin-top: 36px; }
  .recruit-site__name { font-size: 1rem; }
}
/* ===== M3-RECRUIT-SITES-0918p end ===== */

/* ===== M3-ORGCHART start ===== */
/* 組織図(M3-orgchart.py が生成するインライン SVG)。文字はページのフォントを継承 */
.orgchart { width: 100%; margin: 0 auto; }
.orgchart svg { display: block; width: 100%; height: auto; font-family: inherit; }
.orgchart .oc-box { fill: #fff; stroke: var(--line, #dedbd3); stroke-width: 1; }
.orgchart .oc-box--root { fill: var(--logo-blue, #5472c0); stroke: var(--logo-blue, #5472c0); }
.orgchart .oc-box--l1 { fill: #EEF3F9; stroke: #cfd9e8; }
.orgchart .oc-text { fill: var(--text, #17150f); font-size: 19px; letter-spacing: .04em; }
html[lang="th"] .orgchart .oc-text { font-size: 16px; letter-spacing: 0; }   /* タイ語は語が長いので控えめ(社長 ประธานกรรมการบริหาร 161.9 は ROOT_W 190 で収める) */
.orgchart .oc-text--root { fill: #fff; font-weight: 500; }
.orgchart .oc-line { fill: none; stroke: var(--gray, #8f8c85); stroke-width: 1.2; }
@media (max-width: 860px) {
  /* .sub-layout(grid)の子 .sub-content は min-width:auto なので、SVG の min-width 900px が
     親を押し広げてページ全体が横溢れする。固有幅の寄与を切ってスクロールを .orgchart 内に閉じる */
  .orgchart { overflow-x: auto; -webkit-overflow-scrolling: touch; contain: inline-size; }
  .orgchart svg { min-width: 900px; }   /* SP は横スクロールで文字 10px 以上を保つ(縮小すると潰れるため) */
}
/* ===== M3-ORGCHART end ===== */

/* ===== M3-FORM-HP-1006a start ===== */
/* フォームの honeypot(ボット用の罠)。人には見えず、スクリーンリーダーにも読ませない */
.form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* ===== M3-FORM-HP-1006a end ===== */

/* ===== M3-PRODUCTS-1006c start ===== */
/* 製品紹介ページ(独立)。画像主役のヒーロー + グリッド + モーダル */
.pr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pr-hero { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 56px; background: #111; min-height: 520px; display: grid; }
.pr-hero__media, .pr-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-hero__media img { object-fit: cover; transform: scale(1.02); }
/* スライド: 重ねて crossfade。is-active が relative になって高さを決める(min-height 520 は .pr-hero 側) */
.pr-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; display: grid; transition: opacity .9s ease, visibility 0s linear .9s; }
.pr-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; position: relative; transition: opacity .9s ease, visibility 0s; }
/* Ken Burns: 表示中のスライドだけ 1.02→1.06 へ 6秒 */
@keyframes pr-kenburns { from { transform: scale(1.02); } to { transform: scale(1.06); } }
.pr-hero__slide.is-active .pr-hero__media img { animation: pr-kenburns 6s ease forwards; }
@media (prefers-reduced-motion: reduce) { .pr-hero__slide.is-active .pr-hero__media img { animation: none; transform: scale(1.02); } }
/* 操作 UI(N >= 2) */
.pr-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.72); color: #17150f; font-size: 26px; line-height: 44px; padding: 0; cursor: pointer; transition: background .25s; }
.pr-hero__nav:hover, .pr-hero__nav:focus-visible { background: #fff; }
.pr-hero__nav--prev { left: 20px; } .pr-hero__nav--next { right: 20px; }
.pr-hero__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.pr-hero__dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .25s; }
.pr-hero__dots button::before { content: ""; position: absolute; inset: -8px; } /* タップ領域 */
.pr-hero__dots button.is-active { background: #fff; }
.pr-hero--multi .pr-hero__body { padding-bottom: 72px; }
.pr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%); }
.pr-hero__body { position: relative; z-index: 1; isolation: isolate; align-self: end; padding: 48px; color: #fff; max-width: 640px; }
/* 1007d: 写真に関係なく白文字が読めるよう、本文の背面に局所の暗幕(左下ほど濃い楕円) */
.pr-hero__body::before { content: ""; position: absolute; inset: -40px -40px -40px -48px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 20% 80%, rgba(0,0,0,.70) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,0) 68%); } /* 0 は 68%: 箱の上端・右端は半径の約70.7%なので、75% だと切れて直線の境目が出る。濃さは最も明るい写真で実測して決定 */
.pr-hero__title { font-family: var(--font-serif, "Noto Serif JP", serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .06em; line-height: 1.25; margin: 14px 0 10px; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 24px rgba(0,0,0,.35); }
.pr-hero__catch { font-size: 1.05rem; letter-spacing: .06em; line-height: 1.9; margin: 0 0 26px; opacity: .92; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 24px rgba(0,0,0,.35); }
.pr-tag { display: inline-block; font-size: .7rem; letter-spacing: .14em; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; margin: 0 6px 6px 0; opacity: .85; }
.pr-tag--new { background: var(--accent, #a8863f); border-color: var(--accent, #a8863f); color: #fff; opacity: 1; }
.pr-more { font: inherit; font-size: .85rem; letter-spacing: .14em; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.6); padding: 12px 22px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(4px); transition: background .3s; }
.pr-more:hover { background: var(--logo-blue, #5472c0); border-color: var(--logo-blue, #5472c0); }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.pr-card__btn { all: unset; display: block; cursor: pointer; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line, #dedbd3); transition: transform .35s ease, box-shadow .35s ease; }
.pr-card__btn:hover, .pr-card__btn:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(35,40,30,.12); outline: none; }
.pr-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; }
.pr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; display: block; }
.pr-card__btn:hover .pr-card__media img { transform: scale(1.06); }
.pr-card__body { display: block; padding: 20px 22px 24px; color: var(--text, #17150f); }
.pr-card__body .pr-tag { color: var(--gray, #8f8c85); }
.pr-card__body .pr-tag--new { color: #fff; } /* 1006c 追補: 2クラス指定に負けて金地に灰文字になるのを防ぐ */
.pr-card__title { display: block; font-family: var(--font-serif, "Noto Serif JP", serif); font-size: 1.25rem; letter-spacing: .06em; margin: 6px 0 6px; }
.pr-card__catch { display: block; font-size: .9rem; color: #5f5c55; letter-spacing: .04em; line-height: 1.8; }
/* モーダル */
.pr-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .25s; }
.pr-modal[hidden] { display: none; } /* 1006c 追補: display:grid が hidden 属性に勝ってページ全体を覆うのを防ぐ */
.pr-modal.is-open { opacity: 1; }
.pr-modal__backdrop { position: absolute; inset: 0; background: rgba(20,22,26,.72); }
.pr-modal__dialog { position: relative; width: min(1040px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 18px; display: grid; grid-template-columns: 1.2fr 1fr; transform: translateY(12px); transition: transform .25s; }
.pr-modal.is-open .pr-modal__dialog { transform: none; }
.pr-modal__close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 24px; line-height: 1; cursor: pointer; }
.pr-modal__gallery { background: #f4f2ee; display: flex; flex-direction: column; }
/* 1006c 追補: メイン1枚 + サムネ帯(2枚以上のとき)。縦写真でも 4:3 の箱に収めてダイアログが画面高を超えないようにする */
.pr-modal__main { position: relative; flex: 1 0 auto; aspect-ratio: 4 / 3; min-height: 420px; overflow: hidden; }
.pr-modal__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-modal__thumbs { display: flex; gap: 8px; padding: 10px 12px; background: #e9e6df; }
.pr-modal__thumb { all: unset; cursor: pointer; width: 72px; height: 54px; border-radius: 6px; overflow: hidden; opacity: .55; outline: 2px solid transparent; outline-offset: 1px; transition: opacity .2s; }
.pr-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-modal__thumb:hover, .pr-modal__thumb:focus-visible { opacity: .85; }
.pr-modal__thumb.is-active { opacity: 1; outline-color: var(--logo-blue, #5472c0); }
.pr-modal__text { padding: 44px 40px; }
.pr-modal__title { font-family: var(--font-serif, "Noto Serif JP", serif); font-weight: 400; font-size: 1.8rem; letter-spacing: .06em; margin: 10px 0 8px; }
.pr-modal__catch { font-size: 1rem; color: var(--accent, #a8863f); letter-spacing: .06em; margin: 0 0 20px; }
.pr-modal__body p { font-size: .95rem; line-height: 2; letter-spacing: .03em; margin: 0 0 1em; }
body.pr-modal-open { overflow: hidden; }
@media (max-width: 860px) {
  .pr-hero { min-height: 420px; border-radius: 12px; margin-bottom: 36px; }
  .pr-hero__body { padding: 28px 22px; }
  .pr-hero__title { font-size: 1.75rem; } /* 375 で7字タイトルが「チ」だけ2行目に落ちるのを防ぐ(32px×1.06em×7=237 > 内寸235) */
  .pr-hero--multi .pr-hero__body { padding-bottom: 72px; }
  .pr-hero__nav { display: none; } /* SP はスワイプで代替 */
  .pr-grid { grid-template-columns: 1fr; gap: 24px; }
  .pr-modal { padding: 0; align-items: end; }
  .pr-modal__dialog { grid-template-columns: 1fr; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .pr-modal__main { min-height: 0; aspect-ratio: auto; height: 44vh; max-height: 44vh; flex: 0 0 auto; }
  .pr-modal__thumb { width: 60px; height: 45px; }
  .pr-modal__text { padding: 28px 22px 40px; }
}
/* ===== M3-PRODUCTS-1006c end ===== */