@charset "UTF-8";
/* =============================================================
   有限会社三共製作所 — トップページ専用スタイル (home.css)
   対応テンプレート: page-home.php
   画像参照は home.css と同階層の images/ を相対参照
   ============================================================= */

/* ---------- カラー / 変数 ---------- */
:root {
  --teal:        #00a9b2; /* ブランドメイン（ティール） */
  --teal-dark:   #00929a;
  --teal-light:  #61c1be;
  --orange:      #f39800; /* アクセント（オレンジ） */
  --ink:         #231815; /* 本文・見出し（ほぼ黒） */
  --gray:        #675952; /* 補助テキスト */
  --bg:          #ffffff; /* ベース背景（白） */
  --panel:       #efece9; /* セクション背景パネル */
  --white:       #ffffff;
  --max:         1180px;  /* コンテンツ最大幅 */
  --header-h:    92px;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 100vw を使った全幅要素（section--altの背景パネル・sec-head__mark等）が
   スクロールバー幅ぶんだけ画面より広くなり、右側に余白が出るのを防ぐ */
html, body { overflow-x: hidden; }
body.page-home {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Shippori Mincho", "游明朝", "Yu Mincho", YuMincho,
               "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .25s, color .25s, background-color .25s; }
a:hover { opacity: .8; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

/* 明朝（キャッチ・見出しの一部） */
.mincho {
  font-family: "Shippori Mincho", "游明朝", "Yu Mincho", YuMincho,
               "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
}
/* 英字見出し（Bebas Neue） */
.en {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: .08em;
}

.inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }

/* =============================================================
   ヘッダー
   ============================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color .25s, box-shadow .25s;
}
/* メインビジュアル（.hero）を通過したら白背景・黒文字で固定表示（JSで.is-scrolledを付与） */
.site-header.is-scrolled {
  background: var(--white);
  box-shadow: 0 2px 12px rgba(35,24,21,.10);
}
.site-header.is-scrolled .brand,
.site-header.is-scrolled .gnav__list a,
.site-header.is-scrolled .header-cta { color: var(--ink); }
.site-header.is-scrolled .header-cta__tel svg { fill: var(--ink); }
.site-header.is-scrolled .header-cta__btn { color: var(--white); }
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.brand__mark { width: 42px; height: 42px; flex: none; object-fit: contain; }
.brand__text { line-height: 1.2; }
.brand__sub { display: block; font-size: 11px; letter-spacing: .18em; opacity: .9; }
.brand__name { display: block; font-size: 21px; font-weight: 700; letter-spacing: .1em; }

.gnav { display: flex; align-items: center; gap: 26px; }
.gnav__list { display: flex; align-items: center; gap: 60px; }
.gnav__list a,
.site-header:not(.is-scrolled) .gnav__list a {
  color: var(--white); font-size: 18px; font-weight: 500; position: relative;
}
.gnav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--teal-light); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.gnav__list a:hover { opacity: 1; }
.gnav__list a:hover::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: 16px; color: var(--white); }
.header-cta__tel { display: flex; align-items: center; gap: 8px; }
.header-cta__tel .num { font-size: 22px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.header-cta__tel svg { width: 22px; height: 22px; fill: var(--white); }
.header-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal); color: var(--white);
  padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 14px;
}
.header-cta__btn:hover { background: var(--teal-dark); opacity: 1; }

/* ハンバーガー（モバイルのみ表示。PCでは必ず非表示） */
.page-home .site-header .nav-toggle,
.nav-toggle {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

/* =============================================================
   ヒーロー
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* モバイルのアドレスバー等を考慮した実際の表示高さ */
  display: flex; align-items: center;
  color: var(--white);
  background: #1a1410 url("images/hero.jpg") center/cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.05) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto; padding: var(--header-h) 24px 0;
  display: flex; justify-content: flex-end;
}
.hero__copy { text-align: right; }
.hero__lead {
  position: relative;
  display: inline-block;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.7;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  text-align: right;
}
.hero__lead span { display: block; }
/* 「技術」の直後付近に絶対配置する装飾PNG（images/hero-deco.png を配置） */
.hero__deco {
  --hero-deco-size: 80px; /* アイコンの大きさ。この数値だけ変えればOK */

  position: absolute;
  top: -0.8em;
  left: -1em;
  width: var(--hero-deco-size);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: -1; /* hero__lead（mincho）のテキストより下のレイヤーに */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
/* 画像未配置（404）時は壊れたアイコンを出さない */
.hero__deco.is-empty {
  display: none;
}
.hero__title {
  margin-top: 22px; font-size: clamp(38px, 5.2vw, 72px); font-weight: 700;
  letter-spacing: .06em; line-height: 1.1; text-shadow: 0 3px 16px rgba(0,0,0,.55);
}
.hero__title small { display: inline-block; font-size: .4em; letter-spacing: .3em; opacity: .85; vertical-align: middle; margin-right: .4em; }

/* =============================================================
   INFORMATION（お知らせ）
   ============================================================= */
.information { padding: 86px 0 96px; background: var(--bg); }
.sec-title { text-align: center; margin-bottom: 48px; }
.sec-title__en { display: block; font-size: clamp(34px, 5vw, 56px); color: var(--ink); line-height: 1; }
.sec-title__jp { display: block; margin-top: 12px; font-size: 16px; letter-spacing: .35em; color: var(--teal); }
.sec-title__jp::before, .sec-title__jp::after { content: "─"; margin: 0 .5em; color: var(--teal-light); }

.news { max-width: 760px; margin-inline: auto; }
.news__item {
  display: flex; align-items: center; gap: 28px;
  padding: 20px 8px; border-bottom: 1px solid var(--teal);
  border-top: none;
}
/* 一番上の投稿の上線は出さない */
.news__item:first-child { border-top: none; }
.news__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 28px;
  width: 100%;
  color: inherit;
}
.news__date {
  font-size: 14px; color: var(--teal); letter-spacing: .08em;
  font-family: "Bebas Neue", sans-serif;
  grid-column: 1; grid-row: 1;
  border-top: none;
}
.news__title { font-size: 16px; grid-column: 1; grid-row: 2; }
.news__arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.news__arrow {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); position: relative;
}
.news__arrow::before {
  content: ""; position: absolute; top: 50%; left: 46%; width: 7px; height: 7px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.news__item:hover .news__arrow { background: var(--teal-dark); }

/* =============================================================
   コンテンツセクション（事業内容 / 主要設備 / 製品紹介 / 企業情報）
   ============================================================= */
.section { padding: 70px 0; }
.section__inner {
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; gap: clamp(32px, 5vw, 72px);
}
/* 偶数番（主要設備・企業情報）は画像を右側に */
.section:nth-of-type(even) .section__inner { flex-direction: row-reverse; }

.section__media {
  flex: 1 1 52%;
  min-width: 0;
  position: relative;
  /* ずらし板（上・左）が見切れない余白 ※参照画像のソリッド影 */
  --skss-media-shadow: clamp(14px, 2vw, 24px);
  padding: var(--skss-media-shadow) 0 0 var(--skss-media-shadow);
}
/* 写真後ろのソリッドなグレー板（ぼかし box-shadow ではない） */
.section__media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - var(--skss-media-shadow));
  height: calc(100% - var(--skss-media-shadow));
  background: #c2bdba;
  z-index: 0;
  pointer-events: none;
}
.section__media figure {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.section__media img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; display: block; }

/* 画像が右配置のセクションは、ずらし板を上・右にミラー */
.section:nth-of-type(even) .section__media {
  padding: var(--skss-media-shadow) var(--skss-media-shadow) 0 0;
}
.section:nth-of-type(even) .section__media::before {
  left: auto;
  right: 0;
}

.section__body {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: row-reverse; /* 右端から：見出し → リード → 本文 */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 36px);
  min-height: 260px;
}

/* sec-head / lead / text を縦書きで横並び */
.section__body > .section__lead,
.section__body > .section__text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
  margin: 0;
  flex-shrink: 0;
}
.section__body > .sec-head {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  text-orientation: mixed;
  margin: 0;
  flex-shrink: 0;
}

/* 主要設備・企業情報：section__lead のみ横書き（section__text は無し） */
#equipment .section__body > .section__lead,
#company .section__body > .section__lead {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  text-orientation: mixed;
  width: auto;
  max-width: 100%;
}

/* =============================================================
   sec-head（添付画像デザイン）
   - 中央のイラスト（縦ライン＋リング）は1枚の画像として
     img.sec-head__mark に埋め込み、.sec-head の高さいっぱいに伸ばす
     （images/sec-head-mark.png、無ければ .svg にフォールバック）
   - .sec-head__en / .sec-head__jp はその画像を基準に絶対位置調整
     （リング天面は画像下端から約21.1%の位置で実測済み）
   ============================================================= */
.sec-head {
  position: relative;
  width: clamp(108px, 10vw, 136px);
  min-height: clamp(268px, 30vw, 320px);
  margin-bottom: 0;

  /* 調整用（必要ならセクション単位で上書き） */
  --sec-head-mark-max-w: 64px;
  --sec-head-ring-top: 21.1%; /* 画像内リング天面（下端からの割合） */
  --sec-head-text-gap: 14px;
  --sec-head-en-x: 0px;
  --sec-head-en-y: 0px;
  --sec-head-jp-x: 0px;
  --sec-head-jp-y: 0px;
  --sec-head-en-bottom: calc(var(--sec-head-ring-top) + 8px);
  --sec-head-jp-bottom: calc(var(--sec-head-ring-top) + 20px);
}
.sec-head__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sec-head__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: var(--sec-head-mark-max-w);
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.sec-head__jp {
  position: absolute;
  left: calc(50% + var(--sec-head-text-gap) + var(--sec-head-jp-x));
  bottom: calc(var(--sec-head-jp-bottom) + var(--sec-head-jp-y));
  writing-mode: vertical-rl;
  text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
  font-family: "Shippori Mincho", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.1;
  color: var(--teal);
  white-space: nowrap;
  z-index: 1;
  margin: 0;
}
.sec-head__en {
  position: absolute;
  right: calc(50% + var(--sec-head-text-gap) + var(--sec-head-en-x));
  bottom: calc(var(--sec-head-en-bottom) + var(--sec-head-en-y));
  writing-mode: vertical-rl;
  text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.65;
  color: var(--gray);
  white-space: nowrap;
  z-index: 1;
}

/* 事業内容・製品紹介：sec-head__mark の画像だけ、.section--alt .section__inner::before
   （背景パネル）と全く同じ高さ・余白ゼロで表示する。
   - .sec-head__jp / .sec-head__en は引き続き .sec-head 基準の絶対位置なので、
     .sec-head 自体は position:relative のまま変更しない
   - 画像だけ HTML 側で .section__inner 直下（.sec-head の外）に出し、
     .section__inner 基準・%指定のみ（px併用なし）で位置調整する。
     高さは同じ変数 --alt-deco-h を使うのでパネルと必ずぴったり一致し、
     画面幅が変わっても比率が保たれズレない */
#business .section__inner > .sec-head__mark,
#product .section__inner > .sec-head__mark {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: auto;
  right: 5.3%; /* .section__inner基準の位置調整はこの%だけでOK */
  height: var(--alt-deco-h);
  width: auto;
  max-width: none;
  transform: translateY(-50%);
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

/* =============================================================
   主要設備・企業情報：sec-head を横書きデザインに変更
   - .sec-head__mark は images/sec-head-mark-wide.png（1500×55px）に差し替え。
     100vw幅の画像を「見切れずに画面いっぱいへ広げる」には、画像の中心を
     ページ全体の水平中心（= .section__inner の中心）に置く必要がある。
     .sec-head を基準にすると sec-head が画面中心からズレた位置にあるため
     画像の片側が画面からはみ出し、反対側が見切れてしまう（実機で確認した不具合）。
     そのため中心は必ず .section__inner 基準（.sec-head/.section__body は
     position:static のままにして絶対位置の基準を .section__inner まで届かせる）。
   - 幅は 100vw のまま（ビューポートより必ず広いので左右どちらの画面幅でも絶対に見切れない）
   - z-index: .section__media::before(0) < この画像(1) < figure(2)
     （画像の下・::beforeの上を通る）
   - .sec-head__jp / .sec-head__en は縦書きをやめ通常の横書き2行に
   - .sec-head__jp と .sec-head__en の間に画像内の横線を収める処理は、
     front-page.php 末尾のJavaScript（alignSecHeadMarks）が実測して
     .sec-head__mark の top を都度補正する方式に変更済み。そのため
     .section__inner の align-items はここでは上書きしない（既定の center
     のままにして、section__body が .section--alt .section__inner::before
     （高さは変更しない＝--alt-deco-h のまま）の内側に収まる状態を維持する）
   ============================================================= */
#equipment .sec-head,
#company .sec-head {
  position: static;
  display: block;
  width: auto;
  min-height: 0;
  margin-bottom: 18px;
}
#equipment .section__body,
#company .section__body {
  position: static; /* .sec-head__mark の絶対位置基準を .section__inner まで届かせるため */
}
#equipment .sec-head__mark,
#company .sec-head__mark {
  position: absolute;
  top: 40px;          /* 上下位置。sec-head__jpとsec-head__enの間に横線が来る値（この数値だけ変えればOK） */
  left: 50%;
  width: 100vw;        /* 画面幅いっぱい＝どんな画面幅でも絶対に見切れない */
  max-width: none;     /* .sec-head__mark 共通ルールの max-width:64px を打ち消す */
  height: auto;
  transform: translateX(-50%); /* .section__inner（＝画面の水平中心）に自動で揃える */
  z-index: 1;
  pointer-events: none;
}
#equipment .section__media figure,
#company .section__media figure {
  z-index: 2;
}
#equipment .sec-head__jp,
#company .sec-head__jp {
  position: relative;
  left: auto; right: auto; bottom: auto;
  display: block;
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  margin-bottom: 20px;
  font-size: 34px; /* 画面幅で伸縮すると sec-head__mark の線との位置関係がズレるため固定値にする */
  z-index: 1;
}
#equipment .sec-head__en,
#company .sec-head__en {
  position: relative;
  left: auto; right: auto; bottom: auto;
  display: block;
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  padding-left: 56px;
  margin-top: 4px;
  z-index: 1;
}

.section__lead {
  font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; line-height: 1.9;
  letter-spacing: .12em;
}
.section__text {
  font-size: 15px; color: #3a312d; line-height: 2;
  letter-spacing: .08em;
  max-height: 420px;
}

.section__body > .btn-more {
  flex: 1 0 100%;
  writing-mode: horizontal-tb;
  align-self: flex-start;
  margin-top: 4px;
}

.btn-more {
  display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid var(--ink); color: var(--ink);
  padding: 12px 30px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .08em;
}
.btn-more:hover { background: var(--ink); color: var(--white); opacity: 1; }

/* .btn-more--section-mobile はPC含むデフォルトでは非表示
   （モバイル用@media内でのみ表示に切り替える）。
   このルールは必ずモバイル用@media（後方）より前に置くこと。
   同じセレクタ・同じ詳細度のため、後に書かれた方が勝ってしまい、
   このルールをモバイル用@mediaより後ろに置くとボタンが常に非表示になる
   （実際にこの順序ミスでREAD MOREボタンが表示されない不具合が発生していた） */
.btn-more--section-mobile {
  display: none;
}

/* セクション背景の淡いパネル（交互に色味を変える）
   - .section__inner を基準に絶対位置で調整（--alt-deco-x/y）
   - 高さは section__inner の80%（--alt-deco-h）
   - 幅は画面いっぱい（100vw）。PCは固定サイドバー（z-index:1000）が
     はみ出し分を覆うため、rail幅を差し引く計算は不要 */
.section--alt {
  position: relative;
  z-index: 0; /* ::before の z-index:-1 をこのセクション内に閉じ込める */
}
.section--alt .section__inner {
  position: relative;

  --alt-deco-x: 0px;
  --alt-deco-y: 0px;
  --alt-deco-h: 80%;
}
.section--alt .section__inner::before {
  content: "";
  position: absolute;
  left: calc(50% + var(--alt-deco-x));
  top: calc(50% + var(--alt-deco-y));
  width: 100vw;
  height: var(--alt-deco-h);
  transform: translate(-50%, -50%);
  background: var(--panel);
  z-index: -1;
  pointer-events: none;
}
/* 事業内容・製品紹介：パネル高さは主要設備・企業情報と同じ80%（共通デフォルト）に統一。
   その代わり縦書きテキストが section__media（写真）より高くならないよう、
   section__lead / section__text に max-height を設定して折り返す（段組みが増える）ようにする */
#business .section__lead,
#product .section__lead {
  max-height: 280px;
}
#business .section__text {
  max-height: 300px;
  margin-top: 35px;
}
/* section__body の flex-wrap を外す（指示）。折り返しをやめる代わりに、
   万一コンテンツが section__body の幅より広くなっても .section--alt
   .section__inner::before の外へ視覚的にはみ出さないよう、
   section__body 自身で横スクロールに閉じ込める */
#business .section__body,
#product .section__body {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
}
/* #business/#productはsection__mediaが左側のため、section__lead/section__text
   （縦書きコンテンツ）はsection__media側＝左に寄せる。sec-headだけは
   section__bodyの右端に固定したいので、sec-headの左側にauto marginを入れて
   両者を切り離す（justify-content一括ではsec-headまで一緒に左へ寄ってしまうため） */
#business .section__body > .sec-head,
#product .section__body > .sec-head {
  margin-left: auto;
}

/* =============================================================
   事業内容セクション（#business）— Figmaデザイン準拠
   ※ #business / #business::before（背景パネル）は、対応する
     .section__inner--business 等の旧マークアップが現行 front-page.php に
     存在しないため削除済み（現行デザインは .section--alt 側の
     .section__inner::before に統一）。以下は同じく旧マークアップ専用の
     descendant セレクタのみのため無害（現行構造には一致しない）。
   ============================================================= */
#business .section__inner--business {
  position: relative;
  z-index: 1;
  align-items: stretch;
  gap: clamp(36px, 5.5vw, 72px);
}

/* 全4セクション共通：写真に重ねるオレンジのREAD MOREボタン
   （旧デザインの片流れ型の角ばったボタンは廃止し、サイトになじむシンプルな角丸ボタンに統一）
   位置：事業内容・製品紹介＝右下／主要設備・企業情報＝左下 */
.section__media .btn-more--float {
  position: absolute;
  bottom: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(35,24,21,.18);
}
#business .btn-more--float,
#product .btn-more--float {
  right: -20px;
}
#equipment .btn-more--float,
#company .btn-more--float {
  left: -25px;
}
.section__media .btn-more--float:hover {
  background: #e08c00;
  color: var(--white);
  opacity: 1;
}

/* 右：縦書きテキスト（section__body） */
#business .section__body--vertical {
  flex: 1 1 44%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
  min-height: 440px;
  height: 100%;
}

/* 見出しエリア（右端） */
#business .section__body-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  writing-mode: vertical-rl;
  flex-shrink: 0;
  gap: clamp(16px, 2vw, 24px);
  min-height: 400px;
}
/* page-home.php の旧マークアップ（.section__body-head 配下）専用。
   front-page.php の共通 .sec-head デザインには影響させない */
#business .section__body-head > .sec-head__jp {
  margin: 0;
  padding: 0;
  font-family: "Shippori Mincho", "游明朝", "Yu Mincho", serif;
  font-size: clamp(38px, 4.2vw, 52px);
  font-weight: 700;
  color: var(--teal);
  letter-spacing: .28em;
  line-height: 1;
  white-space: nowrap;
}
#business .section__body-head > .sec-head__jp::after { display: none; }

#business .sec-head__sub {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  writing-mode: vertical-rl;
  align-self: stretch;
  gap: clamp(20px, 3vw, 36px);
  min-height: 380px;
}
#business .sec-head__sub .sec-head__en {
  font-family: "Shippori Mincho", "游明朝", "Yu Mincho", serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .14em;
  line-height: 1.65;
  white-space: nowrap;
}
#business .sec-head__ring {
  display: block;
  flex-shrink: 0;
  width: 42px;
  height: 64px;
  line-height: 0;
}
#business .sec-head__ring svg { width: 100%; height: 100%; display: block; }

/* 縦ライン（見出しと本文の区切り） */
#business .sec-head__vline {
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  min-height: 400px;
  background: var(--teal);
  margin-inline: clamp(18px, 2.5vw, 30px);
}

/* 本文エリア（左側） */
#business .section__copy {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  writing-mode: vertical-rl;
  flex: 1;
  gap: clamp(28px, 4vw, 48px);
  padding-block: 4px;
}
#business .section__lead,
#business .section__text-col {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  writing-mode: vertical-rl;
  flex-shrink: 0;
  margin: 0;
}
#business .section__lead { gap: .95em; }
#business .section__text-col { gap: .85em; }
#business .section__lead,
#product .section__lead {
  margin-left: auto;
  margin-top: 35px;
}

#business .section__lead p,
#business .section__text-col p {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
}
#business .section__lead p {
  font-family: "Shippori Mincho", "游明朝", "Yu Mincho", serif;
  font-size: clamp(16px, 1.55vw, 18px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .16em;
  line-height: 1.95;
}
#business .section__text-col p {
  font-family: "Shippori Mincho", "游明朝", "Yu Mincho", serif;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .12em;
  line-height: 1.9;
}

@media (max-width: 920px) {
  #business .section__inner--business { flex-direction: column; }
  #business .section__media { flex: 1 1 100%; width: 100%; }
  #business .section__media-frame { padding: 24px 32px 0 20px; }
  #business .section__media-frame::before {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
  .section__media .btn-more--float { bottom: 14px; padding: 10px 20px; font-size: 13px; }
  #business .btn-more--float,
  #product .btn-more--float { right: 14px; }
  #equipment .btn-more--float,
  #company .btn-more--float { left: 14px; }
  #business .section__body--vertical {
    flex: 1 1 100%;
    width: 100%;
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    flex-direction: column;
    min-height: auto;
    height: auto;
    gap: 24px;
  }
  #business .section__body-head {
    writing-mode: horizontal-tb;
    flex-direction: row;
    align-items: center;
    min-height: auto;
    gap: 16px;
  }
  #business .sec-head__sub {
    writing-mode: horizontal-tb;
    flex-direction: row;
    align-items: center;
    min-height: auto;
    gap: 12px;
  }
  #business .section__body-head > .sec-head__jp { white-space: normal; letter-spacing: .14em; }
  #business .sec-head__vline {
    width: 100%;
    height: 3px;
    min-height: 0;
    margin-inline: 0;
  }
  #business .section__copy {
    writing-mode: horizontal-tb;
    flex-direction: column;
    gap: 20px;
  }
  #business .section__lead,
  #business .section__text-col {
    writing-mode: horizontal-tb;
    flex-direction: column;
    gap: 0;
  }
  #business .section__lead p,
  #business .section__text-col p {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    margin-bottom: .5em;
  }
}

/* =============================================================
   フッター／ページトップへ戻るボタン
   - トップページもtemplate-parts/skss-subpage-footer.phpを共通利用するようになったため、
     スタイルはassets/sankyo-global.cssに集約済み（.page-home / .skss-subpage 両対応）。
     このファイルに個別のfooter__*/to-topルールは置かない。
   ============================================================= */

/* 固定サイドCTA（お問合わせタブ） */
.side-cta {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  writing-mode: vertical-rl; background: var(--orange); color: #fff;
  padding: 22px 12px; font-weight: 700; letter-spacing: .25em; font-size: 15px;
  border-radius: 8px 0 0 8px; box-shadow: -4px 4px 14px rgba(0,0,0,.18);
}
.side-cta:hover { opacity: 1; background: #e08c00; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 920px) {
  :root { --header-h: 70px; }
  /* site-headerが常に見えるよう、gnavはヘッダーの下端から始まる（inset:0にしない） */
  .gnav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; width: 100%;
          background: var(--skss-teal); flex-direction: column; align-items: stretch;
          padding: 40px 32px 40px; transform: translateX(100%); transition: transform .3s; z-index: 60; }
  .gnav.is-open { transform: translateX(0); }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 10px; }
  .gnav__list a {
    padding: 12px 0; border-bottom: none;
    font-size: 20px; text-align: left;
  }
  .gnav__list a::before { content: "- "; }
  .header-cta { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 20px; }
  .header-cta__tel { justify-content: center; }

  /* フッターのモバイル調整はassets/sankyo-global.css側（.page-home対応済み）に集約 */

  .nav-toggle,
  .page-home .site-header .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; z-index: 70; position: relative;
    visibility: visible; pointer-events: auto;
  }
  .nav-toggle span { display: block; height: 2px; width: 26px; background: #fff; transition: transform .3s, opacity .3s; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* site-header.is-scrolled（白背景）になると、ハンバーガーの横線が白のまま背景と
     同化してしまうため黒に戻す */
  .site-header.is-scrolled .nav-toggle span {
    background: var(--ink);
  }
  /* ×ボタン（メニューを開いた状態）は、is-scrolledかどうかに関わらず常に黒にする */
  .nav-toggle.is-open span {
    background: var(--ink);
  }
  /* メニューを開いている間は、スクロール位置に関わらずsite-headerをis-scrolledと
     同じ見た目（白背景・黒文字）に統一する */
  .site-header:has(.gnav.is-open) {
    background: var(--white);
    box-shadow: 0 2px 12px rgba(35,24,21,.10);
  }
  .site-header:has(.gnav.is-open) .brand,
  .site-header:has(.gnav.is-open) .header-cta {
    color: var(--ink);
  }
  .site-header:has(.gnav.is-open) .header-cta__tel svg {
    fill: var(--ink);
  }
  .site-header:has(.gnav.is-open) .header-cta__btn {
    color: var(--white);
  }
  /* is-scrolledになると.gnav__list aがink色になる（PC用の白背景ヘッダー対応）が、
     モバイルのフルスクリーンメニューは背景が--skss-tealのままなので、
     開いたときのテキストは常に白のままにする */
  .site-header.is-scrolled .gnav__list a {
    color: #fff;
  }

  .section__inner,
  .section:nth-of-type(even) .section__inner { flex-direction: column; }
  .section__media, .section__body { flex: 1 1 100%; width: 100%; }

  /* モバイルでもずらし板は維持（やや小さめ）。縦並び時はすべて上・左 */
  .section__media,
  .section:nth-of-type(even) .section__media {
    --skss-media-shadow: clamp(12px, 3.2vw, 18px);
    padding: var(--skss-media-shadow) 0 0 var(--skss-media-shadow);
  }
  .section:nth-of-type(even) .section__media::before {
    left: 0;
    right: auto;
  }

  /* 縦書き横並び → モバイルは横書き縦積み */
  .section__body {
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 0;
    gap: 10px;
  }
  .section__body > .sec-head,
  .section__body > .section__lead,
  .section__body > .section__text {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    text-orientation: mixed;
    max-height: none;
  }
  .sec-head { flex-direction: row; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
  .sec-head__jp { white-space: normal; padding-bottom: 12px; }
  .sec-head__jp::after {
    left: 0; right: auto; top: auto; bottom: 0;
    width: 56px; height: 4px;
  }
  .section__body > .btn-more { flex: none; width: auto; margin-top: 8px; }

  .hero__inner { justify-content: center; }
  .hero__copy { text-align: center; }
  .hero__lead { text-align: center; }
  .hero__deco {
    --hero-deco-size: 48px; /* スマホ・タブレットではPC(80px)より小さく。位置(top/left)はベースのhero__lead基準の値をそのまま使用 */
  }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .information { padding: 60px 0; }
  .news__item { flex-wrap: wrap; gap: 6px 16px; }
  .section { padding: 48px 0; }
  .side-cta { display: none; }
}

/* ---------- 全ページ共通の左固定サイドバー（sankyo-global.css）との整合 ---------- */
/* PC: 上部ナビを左サイドバー分だけ右へ。ロゴ・電話・お問合わせはサイドバーが担当 */
@media (min-width: 900px) {
  .site-header { left: var(--skss-rail, 122px); }
  .site-header .brand { display: none; }
  .site-header .inner { justify-content: center; }
}
/* モバイル: サイドバーは隠れるので、ヘッダー内にロゴを表示（電話・問合せは下部固定バー） */
@media (max-width: 899px) {
  .site-header .brand { display: flex; }
}

/* PCではハンバーガーを強制非表示（SWELL等の上書き対策） */
@media (min-width: 921px) {
  .page-home .site-header .nav-toggle,
  .nav-toggle {
    display: none;
    visibility: hidden;
    pointer-events: none;
  }
}

/* =============================================================
   モバイル追加調整（事業内容/主要設備/製品紹介/企業情報）
   - すべて @media (max-width: 920px) 内のみ。PC（921px以上）には一切影響しない
   ============================================================= */
@media (max-width: 920px) {
  /* ①事業内容・製品紹介：section__inner直下の縦長装飾画像（sec-head__mark）が
     --alt-deco-h（section__innerの80%）基準だとモバイルでは大きくなりすぎるため、
     背景パネルの高さとは切り離し、画面幅に応じた控えめな高さに固定する */
  #business .section__inner > .sec-head__mark,
  #product .section__inner > .sec-head__mark {
    height: clamp(180px, 80vw, 300px);
    right: 13%;
    top: 70%;
  }

  /* 製品紹介のみ：sec-head__markのheight/topを個別調整（rightは共通の13%のまま） */
  #product .section__inner > .sec-head__mark {
    height: clamp(180px, 70vw, 300px);
    top: 72%;
  }

  /* 事業内容のみ：sec-head__markのtopを個別調整 */
  #business .section__inner > .sec-head__mark {
    top: 65%;
  }

  /* 製品紹介のみ：section__bodyのgapを個別調整（汎用ルールの10pxを上書き） */
  #product .section__body {
    gap: 30px;
  }

  /* 製品紹介のみ：section__innerのgap指定を削除 */
  #product .section__inner {
    gap: 0;
  }

  /* 製品紹介のみ：sec-head__enのbottomを個別調整 */
  #product .sec-head__en {
    bottom: 30px;
  }

  /* ②事業内容・製品紹介：section__body（sec-head/section__lead/section__text）は
     直前の汎用モバイルルール（.section__body系、横書き・縦積みへの変換）の対象から
     実質的に除外し、PCと基本的に同じ「横並び＋縦書き」レイアウトを維持する。
     ID込みで詳細度を確保しているため、後続の汎用ルールの有無に関わらず確実に勝つ */
  #business .section__body,
  #product .section__body {
    flex-direction: row-reverse;
  }
  #business .section__body > .sec-head,
  #product .section__body > .sec-head {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
  }
  #business .section__body > .section__lead,
  #business .section__body > .section__text,
  #product .section__body > .section__lead {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-writing-mode: vertical-rl;
  }

  /* ③主要設備・企業情報：背景パネル（.section--alt .section__inner::before）が
     固定80%高さだと、縦積みになったsection__bodyの内容がどんなデバイス幅でも
     絶対にはみ出さない保証がないため、section__innerの実高さに完全一致させる */
  #equipment .section__inner,
  #company .section__inner {
    --alt-deco-h: 100%;
  }

  /* 主要設備・企業情報：sec-head__markの画像をモバイル専用のものに差し替え。
     position/size等の既存スタイルは一切変更せず、contentプロパティで
     表示される画像だけをすげ替える（マークアップ・他のCSSは無変更） */
  #equipment .sec-head__mark,
  #company .sec-head__mark {
    content: url("images/mobile-deco.png");
  }

  /* ③'事業内容：背景パネル（.section--alt .section__inner::before）の縦位置を
     モバイルのみ下にずらす（--alt-deco-x/--alt-deco-hは基本ルールのまま） */
  #business.section--alt .section__inner {
    --alt-deco-y: 120px;
  }

  /* 製品紹介：背景パネルの縦位置をモバイルのみ調整（--alt-deco-x/--alt-deco-hは基本ルールのまま） */
  #product.section--alt .section__inner {
    --alt-deco-y: 80px;
  }

  /* sec-head__enのフォントサイズをモバイルのみ13pxに */
  .sec-head__en {
    font-size: 13px;
  }

  /* 事業内容・製品紹介のsec-headのバランスを揃える：
     事業内容のsec-headは既にmargin-left:0にしているため、製品紹介側も同じくmargin-left:0にする
     （元は#business/#product双方にmargin-left:autoが付いており、#businessだけ後から解除していたため
     文章の位置バランスがズレていた） */
  #product .section__body > .sec-head {
    margin-left: 0;
  }

  /* ③''企業情報：section__leadのmargin-bottom指定は削除（主要設備に続き企業情報も削除） */

  /* section__innerの左右余白をモバイルのみ縮小 */
  .section__inner {
    padding-inline: 15px;
  }

  /* sec-head__jpのフォントサイズをモバイルのみ縮小（下限32px→28px、中間・上限は変更なし） */
  .sec-head__jp {
    font-size: clamp(28px, 3.6vw, 46px);
  }

  /* 主要設備・企業情報のsec-head__jpは、#equipment/#companyのID指定で
     font-size: 34px固定（詳細度1ID+1クラス）になっており、事業内容の可変フォント
     サイズと食い違っていた。同じセレクタ・同じ詳細度で上書きし、事業内容と同じ
     可変サイズに揃える */
  #equipment .sec-head__jp,
  #company .sec-head__jp {
    font-size: clamp(28px, 3.6vw, 46px);
  }

  /* 事業内容・製品紹介：section__bodyのoverflow-x（PC向けの横スクロール安全策）をモバイルでは解除 */
  #business .section__body,
  #product .section__body {
    overflow-x: visible;
  }

  /* ④btn-more--float（写真に重なる絶対配置のREAD MOREボタン）はモバイルでは隠し、
     代わりにsection__inner直下・section__bodyの下（section__bodyの外の兄弟要素）に
     配置した通常配置のボタン（.btn-more--section-mobile）を表示する。
     以前はsection__body内部（#business/#productの複雑なrow-reverse＋縦書き
     レイアウトの中）に置いていたため、そのレイアウトに埋もれて見えなくなっていた */
  .section__media .btn-more--float {
    display: none;
  }
  .btn-more--section-mobile {
    display: inline-flex;
  }
  /* section__innerはalign-items:centerを引き継いでいる（モバイルでは
     flex-directionのみcolumnに上書き）ため、何もしないと中央寄せになってしまう。
     左寄せ・section__bodyとの間隔を明示する */
  .section__inner > .btn-more--section-mobile {
    align-self: flex-start;
  }

  /* 主要設備・企業情報のみ：btn-more--section-mobileの下にmargin-bottomを追加 */
  #equipment .section__inner > .btn-more--section-mobile,
  #company .section__inner > .btn-more--section-mobile {
    margin-bottom: 48px;
  }

  /* ⑤事業内容・製品紹介：section__lead/section__text（縦書き列）のmax-heightは
     PC（section__mediaの写真高さに収めるための値）専用のもので、モバイルでは
     不要かつ有害（列の高さが低い分、列数＝横幅が増え、画面幅からはみ出して
     section__body自身の横スクロール（overflow-x:auto）に頼る状態になっていた）。
     モバイルはsection__innerが縦積み（写真の下にsection__bodyが来る）のため
     高さ方向の制約が無く、上限を外すほど列の高さを確保でき、列数（横幅）が
     減って画面内に収まりやすくなる。今後section__body内の各要素の間隔・位置を
     モバイル用に調整したい場合は、このブロック内に#business/#product等の
     IDセレクタで個別ルールを追加すればよい（PCには一切影響しない） */
  #business .section__lead,
  #product .section__lead {
    max-height: none;
  }
  #business .section__text {
    max-height: none;
  }

  /* ⑥事業内容：section__leadはモバイル専用の改行違いテキスト（.section__lead--mobile）に
     差し替え、PC用テキスト（.section__lead--pc）は隠す。
     グローバルなdisplay:none側を#business .section__lead.section__lead--mobile
     （詳細度1,2,0）に上げた際、こちらの表示側がそれより詳細度が低いままだったため
     モバイルでも非表示側が勝ってしまっていた（.section--altクラスも足して1,3,0にして
     確実に表示側を勝たせる） */
  #business .section__lead--pc {
    display: none;
  }
  #business.section--alt .section__lead.section__lead--mobile {
    display: block;
  }

  /* ⑦事業内容：sec-head・section__lead--mobileのmargin-left: auto;だけをモバイルで解除
     （PC用のmargin-top等、margin-left以外の指定はそのまま維持） */
  #business .section__body > .sec-head {
    margin-left: 0;
  }
  #business .section__lead--mobile {
    margin-left: 0;
  }

  /* ⑧事業内容：section__textはモバイル専用の改行違いテキスト（.section__text--mobile）に
     差し替え、PC用テキスト（.section__text--pc）は隠す */
  #business .section__text--pc {
    display: none;
  }
  #business .section__text--mobile {
    display: block;
  }
}

/* .section__lead--mobile はPC含むデフォルトでは非表示
   （モバイル用@mediaでのみ表示に切り替える）。
   #business .section__lead { display: flex; }（旧page-home.php専用マークアップ向けの
   ルール。ID+クラスで詳細度1,1,0）が同じクラス名のためこの要素にも効いてしまい、
   単なる.section__lead--mobile（詳細度0,1,0）ではdisplay:noneが負けてPCでも
   表示されてしまっていたため、#business + 両クラスで詳細度1,2,0にして確実に勝たせる */
#business .section__lead.section__lead--mobile {
  display: none;
}

/* .section__text--mobile も同様にPC含むデフォルトでは非表示 */
.section__text--mobile {
  display: none;
}