@charset "UTF-8";
/* deploy-test 2026-09-23 再デプロイ */
/* ==========================================================================
   株式会社見本製作所 コーポレートサイト 追加CSS
   --------------------------------------------------------------------------
   - 全セレクタを .additional.additional 配下にスコープしてテーマ側へ影響を出さない
   - 対象は WordPress 標準ブロック（core/*）が出力する DOM
   - 元データ: static-site/assets/css/style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. トークン
   -------------------------------------------------------------------------- */
.additional.additional {
  --color-main: #1B3C8E;
  --color-main-dark: #12275E;
  --color-accent: #D93A2B;
  --color-white: #FFFFFF;
  --color-bg-gray: #EAEAEA;
  --color-bg-gray-2: #F1F1F1;
  --color-text: #222222;
  --color-text-light: #767676;
  --color-border: #DDDDDD;
  --color-footer: #333333;
  --color-cta-bg: #2A2D31;
  --font-jp: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en: 'Barlow', sans-serif;
  --inner-max: 1040px;
  --gutter: 24px;

  color: var(--color-text);
  font-family: var(--font-jp);
  -webkit-font-smoothing: antialiased;
  background: var(--color-white);
}

.additional.additional *,
.additional.additional *::before,
.additional.additional *::after { box-sizing: border-box; }

.additional.additional a { color: var(--color-main); text-decoration: none; }
.additional.additional a:hover { color: var(--color-main-dark); }
.additional.additional img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   1. 標準ブロックの既定スタイルを打ち消す
   -------------------------------------------------------------------------- */
/* ブロックエディタ用の吸収レイヤー
   --------------------------------------------------------------------------
   エディタの編集キャンバスだけに現れる DOM / スタイルをここで打ち消し、
   フロントと同じ見え方にする。フロント側にはこれらのクラスが存在しないため
   無害（＝1ファイルのまま両方に効く）。

   - .wp-block-group__inner-container … エディタは group の内側にラッパー div を
     描画する（フロントでは出力しない）。display:contents で存在しないものとして扱う
   - .wp-block / .block-editor-block-list__block … エディタが記事幅
     （SWELL の --block_max_width = 852px）を max-width で強制する。
     各セクションは自前で幅を持つので解除する

   ※この2行は「打ち消し」なので必ずデザイン指定より前に置くこと
     （同じ詳細度のため、後に書いたデザイン側の max-width が優先される）
   -------------------------------------------------------------------------- */
.additional.additional .wp-block-group__inner-container { display: contents; }

.additional.additional .wp-block,
.additional.additional .block-editor-block-list__block { max-width: none; }

/* セクション内側コンテナの max-width に !important を付けている理由
   --------------------------------------------------------------------------
   SWELL のエディタ専用CSS（build/gutenberg/blocks/full-wide/index.css）に

     [data-type="loos/full-wide"][data-content-size="full"] .wp-block {
       max-width: 100% !important;
     }

   がある。コンテンツサイズが「フルワイド」のとき、エディタ上では中の
   ブロックを全て画面幅いっぱいに広げる、というSWELL側の表現。
   フロントにこの指定はなく、内側コンテナ（.chapter__inner 等）が自前の
   max-width で内容を絞るため、そのままだとエディタだけ横に広がってしまう。

   !important には !important でしか勝てないため、内側コンテナの max-width
   （.stats__grid / .about__grid / .chapter__inner / .timeline など計15か所）
   には !important を付けてある。フロント側では競合相手がいないので影響はない。

   ※ これらの max-width を変更・追加するときは !important を落とさないこと。
   -------------------------------------------------------------------------- */

.additional.additional .wp-block-group,
.additional.additional .wp-block-columns,
.additional.additional .wp-block-column { margin: 0; }

/* セクションは SWELL のフルワイドブロック（loos/full-wide）で組んでいる。
   背景色・背景画像・上下余白・上下の境界線はブロックのGUI設定が持つため、
   ここにはセクション単位の背景・余白を書かない。

   SWELL は連続するフルワイド同士に margin-top:-2em を当てる（本文の
   ブロック間マージンを相殺するための指定）。このテンプレートは post_content の
   マージンを使っていないので、そのまま効くとセクションが重なる。打ち消す。 */
.additional.additional .swell-block-fullWide + .swell-block-fullWide { margin-top: 0; }

/* 左右の余白は下の「内側コンテナ」側（.chapter__inner など）が --gutter で持つ。
   フルワイドの --swl-fw_inner_pad は 0 のまま使う。

   ※ ここで .swell-block-fullWide__inner に max-width:none を当てないこと。
     ブロック設定の「コンテンツサイズ」は、SWELL が __inner に l-container /
     l-article を付けて max-width を与えることで効く。none で潰すと
     「サイト幅」「記事」に切り替えても何も変わらなくなる。 */

.additional.additional .wp-block-columns {
  display: block;
  gap: 0;
  margin-bottom: 0;
}

.additional.additional .wp-block-column { flex-basis: auto; min-width: 0; }

.additional.additional .wp-block-image,
.additional.additional .wp-block-table { margin: 0; }

.additional.additional .wp-block-image img { width: 100%; }

.additional.additional .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.additional.additional .wp-block-separator {
  border: 0;
  height: 2px;
  opacity: 1;
  margin: 0;
  max-width: none;
}
/* SWELL の blocks.css が
   .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { margin-left:auto; margin-right:auto }
   で中央寄せしてくる（詳細度 0,3,0）。同じ :not() を重ねて上書きする。
   中央に置きたい見出し（.section-head）は flex の align-items:center で中央に来るので、
   ここで左寄せに固定しても影響しない。 */
.additional.additional .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* ボタンは SWELL の loos/button。見た目は元デザインに合わせる。 */
.additional.additional .swell-block-button { margin: 0; }
.additional.additional .swell-block-button .swell-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--color-footer);
  color: var(--color-white);
  font: 700 14px/1 var(--font-jp);
  letter-spacing: .1em;
  padding: 18px 32px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.additional.additional .swell-block-button .swell-block-button__link:hover {
  background: var(--color-main);
  color: var(--color-white);
}
.additional.additional .swell-block-button .swell-block-button__link::after {
  content: ">>>";
  font: 400 12px/1 var(--font-en);
  letter-spacing: .1em;
}
.additional.additional .btn--light .swell-block-button__link { background: var(--color-white); color: var(--color-main); }
.additional.additional .btn--light .swell-block-button__link:hover { background: var(--color-main); color: var(--color-white); }

/* 定義リスト（loos/dl）を、従来の2列テーブルの見た目にする。 */
.additional.additional .swell-block-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  margin: 0;
}
.additional.additional .swell-block-dl .swell-block-dl__dt,
.additional.additional .swell-block-dl .swell-block-dl__dd {
  margin: 0;
  padding: 16px 20px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font: 400 14px/1.8 var(--font-jp);
  color: var(--color-text);
}
.additional.additional .swell-block-dl .swell-block-dl__dt {
  background: var(--color-bg-gray);
  font-weight: 700;
  letter-spacing: .04em;
}
.additional.additional .swell-block-dl .swell-block-dl__dd { background: var(--color-white); }
.additional.additional .swell-block-dl__dd p { margin: 0; font: inherit; color: inherit; }

/* 見出し列が白い版（元デザインの .info-table--onwhite）。会社概要ページの会社概要表で使う。
   loos/dl は className:false でクラスを持てないため、本文側では group で包んである。 */
.additional.additional .info-table--onwhite .swell-block-dl .swell-block-dl__dt {
  background: var(--color-white);
}

/* ステップ（loos/step）を、従来の横並びカードの見た目にする。
   SWELL は縦1列＋左に丸数字＋点線でつなぐレイアウト。 */
.additional.additional .step-grid .swell-block-step {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.additional.additional .step-grid--4 .swell-block-step { grid-template-columns: repeat(4, 1fr); }
.additional.additional .swell-block-step__item {
  margin: 0 !important;
  padding: 28px 24px !important;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-main);
}
.additional.additional .swell-block-step__item::before { content: none; }
.additional.additional .swell-block-step__item .swell-block-step__number {
  position: static;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  gap: 10px;
  width: auto;
  height: auto;
  margin: 0 0 10px;
  padding: 0;
  background: none !important;
  border-radius: 0;
  color: var(--color-main);
}
.additional.additional .swell-block-step__number .__label {
  font: 700 11px/1 var(--font-en);
  letter-spacing: .24em;
  color: var(--color-accent);
}
.additional.additional .swell-block-step__number::after { font: 600 20px/1 var(--font-en); color: var(--color-main); }
.additional.additional .swell-block-step__item .swell-block-step__title {
  margin: 0 0 14px;
  font: 700 16px/1.6 var(--font-jp);
  letter-spacing: .06em;
  color: var(--color-text);
}
.additional.additional .swell-block-step__body p { margin: 0; font: 400 14px/2 var(--font-jp); }

/* 新着情報（loos/post-list）は SWELL 標準の「シンプル」リストをそのまま使う。
   --------------------------------------------------------------------------
   SWELL 側が以下を持っているので、ここでは何も上書きしない。

     .p-postList.-type-simple        … 上端の境界線
     .-type-simple .p-postList__link … padding 1em .25em / 下端の境界線 /
                                       background-color の transition
     .-type-simple .p-postList__link:hover … 背景 var(--swl-color_hov_gray)

   以前はここで display:flex・padding:0・background:none を当てて
   「日付・カテゴリ・タイトル横並び」にしていたが、行の高さが詰まり、
   ホバーの背景も消えていた。標準の見た目に戻すため削除した。

   ※ フォント・色を変えたくなった場合も、行の高さ・境界線・ホバー背景
     （padding / border / background）には手を入れないこと。 */

/* 唯一の例外。上の .additional.additional a / a:hover（0,3,0）が SWELL の
   .p-postList__link { color: inherit }（0,1,0）を打ち消し、記事タイトルが
   リンク色（紺）になってしまうので、標準の挙動に戻す。
   ホバー時も色は変えない（SWELL 標準は背景がグレーになるだけ）。 */
.additional.additional .p-postList__link,
.additional.additional .p-postList__link:hover { color: inherit; }

.additional.additional .wp-block-list { margin: 0; padding: 0 0 0 1.2em; }

.additional.additional p { margin: 0; }

.additional.additional h1, .additional.additional h2, .additional.additional h3, .additional.additional h4 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
}
.additional.additional h2::before, .additional.additional h2::after,
.additional.additional h3::before, .additional.additional h3::after,
.additional.additional h4::before, .additional.additional h4::after { content: none; }

/* --------------------------------------------------------------------------
   2. 共通パーツ
   -------------------------------------------------------------------------- */
.additional.additional .eyebrow {
  margin: 0 0 16px;
  font: 400 12px/1 var(--font-en);
  letter-spacing: .34em;
  color: var(--color-text-light);
}

.additional.additional .section-heading {
  margin: 0 0 20px;
  font: 700 28px/1.4 var(--font-jp);
  letter-spacing: .1em;
  color: var(--color-main);
}

.additional.additional .rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  color: var(--color-accent);
}

.additional.additional .section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 56px;
  text-align: center;
}

.additional.additional .subhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 20px;
}
.additional.additional .subhead__ja { font: 700 18px/1.6 var(--font-jp); letter-spacing: .08em; color: var(--color-text); }
.additional.additional .subhead__en { font: 400 11px/1 var(--font-en); letter-spacing: .24em; color: var(--color-text-light); }

.additional.additional .hint { margin: 16px 0 0; font: 400 13px/1.9 var(--font-jp); color: var(--color-text-light); }
.additional.additional .hint a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   4. トップ：メインビジュアルのキャッチコピー
   --------------------------------------------------------------------------
   メインビジュアル本体は SWELL の機能（カスタマイザー > トップページ >
   メインビジュアル）で表示する。画像の枚数・スライド・オーバーレイは
   すべて SWELL 側の設定。

   キャッチコピー欄には <span class="additional mv-copy"> で包んだマークアップを
   入れてあるため、テーマのテンプレート出力でありながら、この追加CSSが
   .additional.additional スコープのまま効く。
   -------------------------------------------------------------------------- */
.additional.additional.mv-copy {
  display: block;
  /* 他セクションの内側幅（1040px）と左端を揃える */
  max-width: var(--inner-max);
  margin: 0 auto;
  background: none;
  color: inherit;
  text-align: left;
}
.additional.additional.mv-copy .hero__rule {
  width: 48px;
  height: 2px;
  margin: 0 0 28px;
  background: var(--color-accent);
}
.additional.additional.mv-copy .hero__eyebrow {
  display: block;
  margin: 0 0 24px;
  font: 400 13px/1 var(--font-en);
  letter-spacing: .32em;
  color: rgba(255,255,255,.82);
}
.additional.additional.mv-copy .hero__title {
  display: block;
  margin: 0 0 28px;
  font: 700 44px/1.6 var(--font-jp);
  letter-spacing: .08em;
  color: var(--color-white);
}
.additional.additional.mv-copy .hero__lead {
  display: block;
  margin: 0;
  font: 400 17px/1.8 var(--font-jp);
  letter-spacing: .08em;
  color: rgba(255,255,255,.92);
}

/* --------------------------------------------------------------------------
   5. トップ：実績バンド
   -------------------------------------------------------------------------- */
.additional.additional .stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: calc(var(--inner-max) + var(--gutter) * 2) !important;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
}
.additional.additional .stats__item {
  padding: 4px 24px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.additional.additional .stats__item + .stats__item { border-left: 1px solid rgba(255,255,255,.28); }
.additional.additional .stats__num { font: 600 30px/1 var(--font-en); color: var(--color-white); }
.additional.additional .stats__label { font: 500 14px/1.6 var(--font-jp); letter-spacing: .06em; color: var(--color-white); }

/* --------------------------------------------------------------------------
   6. トップ：about / reasons
   -------------------------------------------------------------------------- */
.additional.additional .about__grid,
.additional.additional .reasons__grid,
.additional.additional .news__grid {
  display: grid;
  max-width: calc(var(--inner-max) + var(--gutter) * 2) !important;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
  gap: 48px;
}
.additional.additional .about__grid { grid-template-columns: 40.5% 1fr; align-items: center; }
.additional.additional .reasons__grid { grid-template-columns: 40.5% 1fr; align-items: start; }
.additional.additional .news__grid { grid-template-columns: 40% 1fr; align-items: start; }

.additional.additional .about__title {
  margin: 0;
  font: 700 28px/1.7 var(--font-jp);
  letter-spacing: .1em;
  color: var(--color-main);
}
.additional.additional .about__body {
  margin: 0;
  font: 400 16px/2 var(--font-jp);
  letter-spacing: .03em;
}

.additional.additional .reasons__grid .section-heading { margin: 0 0 20px; }
.additional.additional .reasons__grid .rule { margin: 0 0 28px; }
.additional.additional .reasons__lead { margin: 0 0 32px; font: 400 15px/2 var(--font-jp); }
/* 各項目はリンクではないので、ホバーの背景は付けない。
   （元の静的デザインには :hover の背景があったが、押せると誤解されるため外した） */
.additional.additional .reasons__list {
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 0;
  grid-auto-rows: 1fr;  /* 説明文の行数が違っても全項目を同じ高さに揃える */
}
.additional.additional .reasons__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  align-items: start;
  align-content: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}
.additional.additional .reasons__num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font: 300 26px/1.4 var(--font-en);
  color: var(--color-main);
}
.additional.additional .reasons__item-title {
  grid-column: 2;
  margin: 0 0 10px;
  font: 700 17px/1.6 var(--font-jp);
  letter-spacing: .06em;
}
.additional.additional .reasons__item-desc { grid-column: 2; font: 400 14px/2 var(--font-jp); }

/* --------------------------------------------------------------------------
   7. 加工技術タイル
   -------------------------------------------------------------------------- */
.additional.additional .technology__head {
  max-width: var(--inner-max) !important;
  margin: 0 auto 0;
  padding: 0 24px;
}
.additional.additional .technology__grid { display: grid; grid-template-columns: 1fr 1fr; margin: 56px 0 0; }

.additional.additional .tech-tile { position: relative; display: block; background: var(--color-bg-gray); }
.additional.additional .tech-tile__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.additional.additional .tech-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.additional.additional .tech-tile__label {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--color-main-dark), #2E5BB8, var(--color-main-dark));
}
.additional.additional .tech-tile__label a {
  font: 700 15px/1 var(--font-jp);
  letter-spacing: .12em;
  color: var(--color-white);
}
.additional.additional .tech-tile__label a::after { content: ""; position: absolute; inset: 0; }
.additional.additional .tech-tile__label::after {
  content: ">>>";
  position: absolute;
  right: 20px;
  font: 400 12px/1 var(--font-en);
  letter-spacing: .1em;
  color: rgba(255,255,255,.9);
}
.additional.additional .tech-strip__lead { margin: 24px 0 0; font: 400 15px/2 var(--font-jp); text-align: center; }

/* --------------------------------------------------------------------------
   8. トップ：加工事例カード
   -------------------------------------------------------------------------- */
.additional.additional .works__head { max-width: var(--inner-max) !important; margin: 0 auto; padding: 0 24px; }
.additional.additional .works__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 56px 0 0; }
.additional.additional .works__grid .case-card { border: 0; }
.additional.additional .works__grid .case-card__body {
  min-height: 56px;
  background: var(--color-main);
  display: flex;
  align-items: center;
  padding: 14px 20px;
}
.additional.additional .works__grid .case-card__title { margin: 0; font: 500 14px/1.6 var(--font-jp); letter-spacing: .04em; }
.additional.additional .works__grid .case-card__title a { color: var(--color-white); }
.additional.additional .works__more { display: flex; justify-content: center; margin: 56px 0 0; }

/* --------------------------------------------------------------------------
   9. トップ：新着情報
   -------------------------------------------------------------------------- */
.additional.additional .news__head { position: relative; padding: 34px 0 0; }
.additional.additional .news__deco {
  position: absolute;
  left: -3px;
  top: -16px;
  margin: 0;
  font: 300 104px/1 var(--font-en);
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px #D8D8D8;
  user-select: none;
  pointer-events: none;
}
.additional.additional .news__head .section-heading,
.additional.additional .news__head .rule { position: relative; }
.additional.additional .news__more { display: flex; justify-content: flex-end; margin: 28px 0 0; }
.additional.additional .news__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 13px/1 var(--font-jp);
  letter-spacing: .08em;
  color: var(--color-main);
}
.additional.additional .news__more a::after { content: ">"; font: 400 11px/1 var(--font-en); }

/* --------------------------------------------------------------------------
   10. CTA
   -------------------------------------------------------------------------- */
.additional.additional .cta__inner,
.additional.additional .page-cta__inner {
  max-width: calc(var(--inner-max) + var(--gutter) * 2) !important;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.additional.additional .cta__title {
  margin: 0 0 36px;
  font: 700 28px/1.6 var(--font-jp);
  letter-spacing: .1em;
  color: var(--color-white);
  text-align: center;
}
.additional.additional .cta__box {
  width: 100%;
  border: 1px solid var(--color-accent);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: center;
}
.additional.additional .cta__copy { margin: 0; font: 400 15px/2 var(--font-jp); color: var(--color-white); }
.additional.additional .cta__aside { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.additional.additional .cta__tel { margin: 0; font: 700 28px/1.2 var(--font-en); letter-spacing: .02em; color: var(--color-white); }
.additional.additional .cta__hours { margin: 6px 0 0; font: 400 12px/1.6 var(--font-jp); color: var(--color-white); }
/* CTA のボタンは右カラム（320px）いっぱいに広げる。
   loos/button へ置き換えた際にクラス名が変わったため、旧 .cta__btn は使わない。 */
.additional.additional .cta__buttons { display: block; }
.additional.additional .cta__buttons .swell-block-button { display: block; }
.additional.additional .cta__buttons .swell-block-button__link { width: 100%; justify-content: center; }


/* --------------------------------------------------------------------------
   11. デモ注記
   -------------------------------------------------------------------------- */
.additional.additional .demo-note { background: var(--color-white); padding: 22px 24px; text-align: center; }
.additional.additional .demo-note__text { margin: 0; font: 400 12px/1.8 var(--font-jp); color: var(--color-text-light); }
.additional.additional .demo-note__text a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. 下層共通セクション
   -------------------------------------------------------------------------- */
/* セクションの左右余白。以前はセクション側の padding で持っていたが、
   フルワイドの余白設定は上下のみなので、内側コンテナ側に移している。
   box-sizing: border-box のため、内容幅は従来どおり最大 1040px になる。 */
.additional.additional .chapter__inner {
  max-width: calc(var(--inner-max) + var(--gutter) * 2) !important;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
}

.additional.additional .chapter__intro {
  display: grid;
  grid-template-columns: 40.5% 1fr;
  gap: 48px;
  align-items: start;
}
.additional.additional .chapter__intro--center { align-items: center; }
.additional.additional .chapter__intro--44 { grid-template-columns: 44% 1fr; }

.additional.additional .chapter__num { margin: 0 0 12px; font: 300 64px/1 var(--font-en); letter-spacing: .02em; color: var(--color-main); }
.additional.additional .chapter__eyebrow { margin: 0 0 16px; font: 400 12px/1 var(--font-en); letter-spacing: .34em; color: var(--color-text-light); }
.additional.additional .chapter__title { margin: 0 0 20px; font: 700 26px/1.7 var(--font-jp); letter-spacing: .08em; color: var(--color-main); }
.additional.additional .chapter__title--lg { font-size: 28px; line-height: 1.4; }
.additional.additional .chapter__subtitle { margin: 0 0 18px; font: 700 22px/1.7 var(--font-jp); letter-spacing: .06em; color: var(--color-text); }
.additional.additional .chapter__body { margin: 0; font: 400 16px/2 var(--font-jp); letter-spacing: .03em; }
.additional.additional .chapter__body + .chapter__body { margin-top: 20px; }
.additional.additional .chapter__note { margin: 0; font: 400 15px/2 var(--font-jp); letter-spacing: .03em; }
.additional.additional .chapter__note + .chapter__note { margin-top: 20px; }
.additional.additional .chapter__block { margin: 64px 0 0; }
.additional.additional .chapter__block + .chapter__block { margin-top: 56px; }

.additional.additional .chapter__photo { margin: 32px 0 0; aspect-ratio: 16 / 9; overflow: hidden; }
.additional.additional .chapter__photo img { width: 100%; height: 100%; object-fit: cover; }
.additional.additional .chapter__photo--43 { margin: 0; aspect-ratio: 4 / 3; }

/* 章送りナビ */
.additional.additional .chapter-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: var(--inner-max) !important;
  margin: 48px auto 0;
  border-top: 1px solid #CFCFCF;
  border-left: 1px solid #CFCFCF;
}
.additional.additional .chapter-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  height: 100%;
  background: var(--color-white);
  border-right: 1px solid #CFCFCF;
  border-bottom: 1px solid #CFCFCF;
}
.additional.additional .chapter-nav__item:hover { background: var(--color-main); }
.additional.additional .chapter-nav__item:hover .chapter-nav__num,
.additional.additional .chapter-nav__item:hover .chapter-nav__label a { color: var(--color-white); }
.additional.additional .chapter-nav__num { font: 300 22px/1 var(--font-en); color: var(--color-main); }
.additional.additional .chapter-nav__label a { font: 500 13px/1.7 var(--font-jp); letter-spacing: .04em; color: var(--color-main); }
.additional.additional .chapter-nav__label a::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   13. データテーブル
   -------------------------------------------------------------------------- */
.additional.additional .info-table th,
.additional.additional .info-table td {
  border: 1px solid var(--color-border);
  padding: 16px 20px;
  font: 400 14px/1.8 var(--font-jp);
  color: var(--color-text);
  text-align: left;
  vertical-align: top;
}
.additional.additional .info-table tbody th { width: 200px; background: var(--color-bg-gray); font-weight: 700; letter-spacing: .04em; }
.additional.additional .info-table tbody td { background: var(--color-white); }
.additional.additional .info-table--head thead th {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
  font: 700 13px/1.6 var(--font-jp);
  letter-spacing: .06em;
}
.additional.additional .info-table--head tbody th { background: var(--color-white); }

/* --------------------------------------------------------------------------
   14. 得意な加工パネル
   -------------------------------------------------------------------------- */
.additional.additional .capability-panel {
  max-width: var(--inner-max) !important;
  margin: 48px auto 0;
  background: var(--color-white);
  padding: 32px 36px;
}
.additional.additional .capability-panel__label { margin: 0 0 18px; font: 700 14px/1 var(--font-jp); letter-spacing: .1em; color: var(--color-main); }
.additional.additional .capability-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.additional.additional .capability-panel__grid .wp-block-column {
  padding: 0 28px;
  font: 400 14px/2 var(--font-jp);
}
.additional.additional .capability-panel__grid .wp-block-column:first-child { padding-left: 0; }
.additional.additional .capability-panel__grid .wp-block-column:last-child { padding-right: 0; }
.additional.additional .capability-panel__grid .wp-block-column + .wp-block-column { border-left: 1px solid var(--color-border); }

/* --------------------------------------------------------------------------
   15. 事例カード
   -------------------------------------------------------------------------- */
.additional.additional .works-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 32px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-border);
}
.additional.additional .works-toolbar__count { margin: 0; font: 700 15px/1.6 var(--font-jp); letter-spacing: .06em; }
.additional.additional .works-toolbar__filters { display: flex; align-items: center; gap: 12px; }
.additional.additional .works-toolbar__label { font: 400 12px/1 var(--font-jp); color: var(--color-text-light); }
.additional.additional .tag-filter a {
  display: inline-block;
  font: 500 12px/1 var(--font-jp);
  letter-spacing: .06em;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  padding: 8px 14px;
}
.additional.additional .tag-filter a:hover { background: var(--color-main); color: var(--color-white); }

.additional.additional .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.additional.additional .case-grid + .case-grid { margin-top: 32px; }
.additional.additional .case-card { position: relative; height: 100%; border: 1px solid var(--color-border); background: var(--color-white); }
.additional.additional .case-card:hover { border-color: var(--color-main); }
.additional.additional .case-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.additional.additional .case-card__media img { width: 100%; height: 100%; object-fit: cover; }
.additional.additional .case-card__body { padding: 20px; }
.additional.additional .case-card__date { margin: 0 0 10px; font: 400 12px/1 var(--font-en); letter-spacing: .06em; color: var(--color-text-light); }
.additional.additional .case-card__title { margin: 0 0 14px; font: 700 16px/1.7 var(--font-jp); letter-spacing: .04em; }
.additional.additional .case-card__title a { color: var(--color-text); }
.additional.additional .case-card__title a::after { content: ""; position: absolute; inset: 0; }
.additional.additional .case-card__title:last-child { margin-bottom: 0; }

.additional.additional .tag-chip {
  display: inline-block;
  font: 500 12px/1 var(--font-jp);
  letter-spacing: .06em;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  padding: 6px 12px;
}
.additional.additional .tag-chip a { color: inherit; }

/* 事例詳細 */
.additional.additional .case-detail__tag { margin: 0 0 32px; }
.additional.additional .case-detail__grid { display: grid; grid-template-columns: 1fr 46%; gap: 48px; align-items: start; }
.additional.additional .case-detail__media { aspect-ratio: 4 / 3; overflow: hidden; }
.additional.additional .case-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.additional.additional .case-detail__more { display: flex; justify-content: center; margin: 64px 0 0; }

/* 準備中パネル */
.additional.additional .empty-state {
  border: 1px solid var(--color-border);
  background: var(--color-bg-gray);
  padding: 48px 24px;
  text-align: center;
}
.additional.additional .empty-state__text { margin: 0 0 20px; font: 400 15px/2 var(--font-jp); }
.additional.additional .empty-state__more { display: flex; justify-content: center; margin: 0; }


/* --------------------------------------------------------------------------
   17. Before / After 提案カード
   -------------------------------------------------------------------------- */
.additional.additional .proposal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 56px 0 0; }
.additional.additional .proposal-card { height: 100%; background: var(--color-white); border: 1px solid var(--color-border); }
.additional.additional .proposal-card__head {
  margin: 0;
  padding: 18px 24px;
  background: var(--color-main);
  font: 700 15px/1.6 var(--font-jp);
  letter-spacing: .06em;
  color: var(--color-white);
}
.additional.additional .proposal-card__body { padding: 28px 24px; }
.additional.additional .proposal-card__tag { margin: 0 0 8px; font: 700 12px/1 var(--font-en); letter-spacing: .2em; color: var(--color-text-light); }
.additional.additional .proposal-card__tag--after { color: var(--color-accent); }
.additional.additional .proposal-card__text { margin: 0 0 24px; font: 400 14px/2 var(--font-jp); }
.additional.additional .proposal-card__text:last-child { margin-bottom: 0; }
.additional.additional .proposal-card__text strong { font-weight: 700; color: var(--color-main); }

/* --------------------------------------------------------------------------
   18. 検査機器 / ISO パネル
   -------------------------------------------------------------------------- */
.additional.additional .equipment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin: 56px 0 0; }
.additional.additional .cert-panel {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  margin: 56px 0 0;
  background: var(--color-bg-gray);
  padding: 32px;
}
/* 白い台紙は敷かず、ロゴをグレーのパネルに直接置く。
   高さはロゴの縦横比に任せる（aspect-ratio を持たせると上下に余白ができる）。 */
.additional.additional .cert-panel__media { background: transparent; }
.additional.additional .cert-panel__media img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   19. 会社案内
   -------------------------------------------------------------------------- */
.additional.additional .message-grid { display: grid; grid-template-columns: 1fr 38%; gap: 56px; align-items: start; }
.additional.additional .message-grid__media { aspect-ratio: 8 / 5; overflow: hidden; background: var(--color-bg-gray); }
.additional.additional .message-grid__media img { width: 100%; height: 100%; object-fit: cover; }
.additional.additional .message-sign { margin: 28px 0 0; font: 500 14px/1.8 var(--font-jp); letter-spacing: .06em; text-align: right; }

.additional.additional .map-frame { width: 100%; height: 360px; border: 1px solid var(--color-border); display: block; }

.additional.additional .timeline { max-width: 800px !important; margin: 0 auto; border-top: 1px solid var(--color-border); }
.additional.additional .timeline__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.additional.additional .timeline__year { font: 500 15px/1.8 var(--font-en); letter-spacing: .04em; color: var(--color-main); }
.additional.additional .timeline__text { font: 400 15px/1.8 var(--font-jp); }

/* --------------------------------------------------------------------------
   20. 採用情報
   -------------------------------------------------------------------------- */
.additional.additional .numbers-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  margin: 0 0 32px;
  background: var(--color-main);
  padding: 36px 40px;
}
.additional.additional .numbers-panel__label { margin: 0 0 8px; font: 500 13px/1 var(--font-jp); letter-spacing: .1em; color: var(--color-white); }
.additional.additional .numbers-panel__value { margin: 0; font: 600 56px/1 var(--font-en); color: var(--color-white); }
.additional.additional .numbers-panel__unit { font: 500 18px/1 var(--font-jp); letter-spacing: .06em; margin-left: 8px; }
.additional.additional .numbers-panel__bar { display: flex; height: 14px; margin: 0 0 12px; }
.additional.additional .numbers-panel__bar-male { width: 72.2%; background: var(--color-white); }
.additional.additional .numbers-panel__bar-female { width: 27.8%; background: var(--color-accent); }
.additional.additional .numbers-panel__legend { display: flex; gap: 28px; flex-wrap: wrap; }
.additional.additional .numbers-panel__legend p { font: 500 14px/1.6 var(--font-jp); color: var(--color-white); }

.additional.additional .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.additional.additional .stat-grid--last { border-top: 0; }
.additional.additional .stat-grid__item { padding: 32px 28px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.additional.additional .stat-grid__label { margin: 0 0 12px; font: 500 13px/1 var(--font-jp); letter-spacing: .08em; color: var(--color-text-light); }
.additional.additional .stat-grid__value { margin: 0; font: 300 44px/1 var(--font-en); color: var(--color-main); }
.additional.additional .stat-grid__unit { font: 500 15px/1 var(--font-jp); color: var(--color-text); margin-left: 8px; }

.additional.additional .job-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.additional.additional .job-card { height: 100%; background: var(--color-white); }
.additional.additional .job-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-gray-2); }
.additional.additional .job-card__media img { width: 100%; height: 100%; object-fit: cover; }
.additional.additional .job-card__body { padding: 28px; }
.additional.additional .job-card__num { margin: 0 0 14px; font: 300 26px/1 var(--font-en); color: var(--color-main); }
.additional.additional .job-card__title { margin: 0 0 14px; font: 700 18px/1.7 var(--font-jp); letter-spacing: .06em; color: var(--color-text); }
.additional.additional .job-card__text { margin: 0; font: 400 14px/2 var(--font-jp); }

/* --------------------------------------------------------------------------
   21. お問い合わせ
   -------------------------------------------------------------------------- */
.additional.additional .form-lead { max-width: 880px !important; margin: 0 auto; }
.additional.additional .form-lead__text { margin: 0; font: 400 15px/2.1 var(--font-jp); letter-spacing: .03em; }
.additional.additional .form-lead__text a { text-decoration: underline; }

.additional.additional .form-section { max-width: 880px !important; margin: 0 auto; }
.additional.additional .form-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 32px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-border);
}
.additional.additional .form-section__title { margin: 0; font: 700 22px/1.5 var(--font-jp); letter-spacing: .1em; color: var(--color-main); }
.additional.additional .form-section__en { font: 400 11px/1 var(--font-en); letter-spacing: .24em; color: var(--color-text-light); }

.additional.additional .field-grid { display: grid; grid-template-columns: 200px 1fr; gap: 24px 32px; align-items: start; }
.additional.additional .field-label { display: flex; align-items: center; gap: 12px; padding: 12px 0 0; }
.additional.additional .field-label span:first-child { font: 700 14px/1.8 var(--font-jp); letter-spacing: .04em; color: var(--color-text); }
.additional.additional .field-required { font: 700 11px/1 var(--font-jp); letter-spacing: .06em; color: var(--color-white); background: var(--color-accent); padding: 5px 8px; }
.additional.additional .field-optional { font: 700 11px/1 var(--font-jp); letter-spacing: .06em; color: var(--color-text-light); border: 1px solid #CFCFCF; padding: 4px 8px; }

.additional.additional .field-grid input[type="text"],
.additional.additional .field-grid input[type="tel"],
.additional.additional .field-grid input[type="email"],
.additional.additional .field-grid textarea {
  width: 100%;
  border: 1px solid #CFCFCF;
  border-radius: 0;
  background: #FAFAFA;
  padding: 14px 16px;
  font: 400 14px/1.6 var(--font-jp);
  color: var(--color-text);
}
.additional.additional .field-grid textarea { line-height: 1.9; resize: vertical; }
.additional.additional .field-grid input:focus,
.additional.additional .field-grid textarea:focus { border-color: var(--color-main); outline: none; background: var(--color-white); }

.additional.additional .file-list { display: flex; flex-direction: column; gap: 10px; }
.additional.additional .file-list input[type="file"] {
  width: 100%;
  border: 1px dashed #CFCFCF;
  background: #FAFAFA;
  padding: 12px 16px;
  font: 400 13px/1.6 var(--font-jp);
  color: var(--color-text);
}
.additional.additional .file-note { margin: 14px 0 0; font: 400 12px/1.9 var(--font-jp); color: var(--color-text-light); }

.additional.additional .form-submit { display: flex; justify-content: center; margin: 48px 0 0; }
.additional.additional .form-submit button {
  background: var(--color-main);
  color: var(--color-white);
  border: none;
  border-radius: 0;
  cursor: pointer;
  font: 700 15px/1 var(--font-jp);
  letter-spacing: .14em;
  padding: 20px 80px;
  transition: background .15s;
}
.additional.additional .form-submit button:hover { background: var(--color-main-dark); }

.additional.additional .phone-band__inner {
  max-width: calc(var(--inner-max) + var(--gutter) * 2) !important;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.additional.additional .phone-band__title { margin: 0 0 28px; font: 700 22px/1.6 var(--font-jp); letter-spacing: .1em; color: var(--color-white); text-align: center; }
.additional.additional .phone-band__tel { margin: 0 0 10px; font: 700 40px/1.2 var(--font-en); letter-spacing: .02em; color: var(--color-white); }
.additional.additional .phone-band__hours { margin: 0; font: 400 13px/1.8 var(--font-jp); color: var(--color-white); }

/* --------------------------------------------------------------------------
   22. 個人情報の取扱いについて
   -------------------------------------------------------------------------- */
.additional.additional .legal-lead {
  max-width: 880px !important;
  margin: 0 auto 56px;
  font: 400 15px/2.1 var(--font-jp);
  letter-spacing: .03em;
  text-wrap: pretty;
}
.additional.additional .legal-article { max-width: 880px !important; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.additional.additional .legal-article__title {
  margin: 0 0 18px;
  padding: 0 0 0 18px;
  border-left: 4px solid var(--color-main);
  font: 700 18px/1.6 var(--font-jp);
  letter-spacing: .06em;
  color: var(--color-main);
}
.additional.additional .legal-article__item p { margin: 0 0 12px; font: 400 14px/2 var(--font-jp); }
.additional.additional .legal-article__item p:last-child { margin-bottom: 0; }
.additional.additional .legal-article__item li { font: 400 14px/2 var(--font-jp); }
.additional.additional .legal-article__item a { text-decoration: underline; }
.additional.additional .legal-date {
  max-width: 880px !important;
  margin: 56px auto 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border);
  font: 400 13px/1.9 var(--font-jp);
  color: var(--color-text-light);
  text-align: right;
}

/* --------------------------------------------------------------------------
   23. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .additional.additional .chapter__intro,
  .additional.additional .chapter__intro--44,
  .additional.additional .message-grid,
  .additional.additional .case-detail__grid,
  .additional.additional .equipment-grid { grid-template-columns: 1fr; gap: 32px; }
  .additional.additional .capability-panel__grid,
  .additional.additional .step-grid .swell-block-step,
  .additional.additional .step-grid--4 .swell-block-step,
  .additional.additional .job-grid,
  .additional.additional .case-grid,
  .additional.additional .proposal-grid,
  .additional.additional .stat-grid,
  .additional.additional .cert-panel,
  .additional.additional .numbers-panel { grid-template-columns: 1fr 1fr; }
  .additional.additional .stat-grid--last { border-top: 0; }
  .additional.additional .chapter-nav { grid-template-columns: repeat(2, 1fr); }
  .additional.additional .field-grid { grid-template-columns: 1fr; }
  .additional.additional .field-label { padding-top: 0; }
}

@media (max-width: 860px) {
  .additional.additional .about__grid,
  .additional.additional .reasons__grid,
  .additional.additional .news__grid { grid-template-columns: 1fr; gap: 32px; }
  .additional.additional .news__head { padding-top: 0; }
  .additional.additional .news__deco { display: none; }
  .additional.additional .technology__grid,
  .additional.additional .works__grid { grid-template-columns: 1fr; }
  .additional.additional .cta__box { grid-template-columns: 1fr; }
  .additional.additional.mv-copy .hero__title { font-size: 32px; }
}

@media (max-width: 600px) {
  /* セクションの上下余白は loos/full-wide の sp-py-* が !important で持つため、
     ここにセクション単位の padding は書かない（書いても効かない）。 */
  .additional.additional .case-grid,
  .additional.additional .proposal-grid,
  .additional.additional .job-grid,
  .additional.additional .stat-grid,
  .additional.additional .capability-panel__grid { grid-template-columns: 1fr; }
  .additional.additional .step-grid .swell-block-step,
  .additional.additional .step-grid--4 .swell-block-step { grid-template-columns: 1fr; }
  /* SWELL本体のstepブロックは、この幅で .swell-block-step__body に margin-left:-48px を
     強制するが、これは「丸数字を絶対配置で左に出す」標準デザイン用。子テーマ側は
     .swell-block-step__number を通常のフローに変更しているため、そのままだと本文が
     カード外にはみ出して崩れる。ここで打ち消す。 */
  .additional.additional .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body {
    margin-left: 0;
  }
  /* 定義リストはスマホでは縦積みにする（200px固定だと窮屈なため） */
  .additional.additional .swell-block-dl { grid-template-columns: 1fr; }
  .additional.additional .swell-block-dl .swell-block-dl__dt { border-bottom: none; }
  .additional.additional .capability-panel__grid .wp-block-column { padding: 0; border: none; }
  .additional.additional .capability-panel__grid .wp-block-column + .wp-block-column {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
  }
  .additional.additional .numbers-panel { grid-template-columns: 1fr; gap: 24px; }
  .additional.additional .cert-panel { grid-template-columns: 1fr; }
  .additional.additional .timeline__row { grid-template-columns: 1fr; gap: 6px; }
  .additional.additional .stats__grid { grid-template-columns: 1fr; }
  .additional.additional .stats__item { padding: 8px 0; justify-content: flex-start; }
  .additional.additional .stats__item + .stats__item { border-left: none; border-top: 1px solid rgba(255,255,255,.28); padding-top: 16px; }
  .additional.additional.mv-copy .hero__title { font-size: 26px; }
  .additional.additional.mv-copy .hero__lead { font-size: 15px; }
  .additional.additional .works-toolbar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .additional.additional .form-submit button { padding: 20px 40px; width: 100%; }
}

/* --------------------------------------------------------------------------
   24. 親テーマ（SWELL）の !important 指定への対応
   --------------------------------------------------------------------------
   SWELL の blocks.css は columns の gap とテーブルセル幅を !important で
   指定している。いずれも CSS 変数経由なので、変数を上書きして解決する。
   （!important の打ち合いを避けるため）
   -------------------------------------------------------------------------- */
.additional.additional .wp-block-columns { --wp-column-gap: 0px; }

.additional.additional .about__grid,
.additional.additional .reasons__grid,
.additional.additional .news__grid,
.additional.additional .chapter__intro,
.additional.additional .case-detail__grid { --wp-column-gap: 48px; }

.additional.additional .proposal-grid,
.additional.additional .case-grid,
.additional.additional .job-grid,
.additional.additional .cert-panel { --wp-column-gap: 32px; }


.additional.additional .equipment-grid { --wp-column-gap: 40px; }
.additional.additional .message-grid { --wp-column-gap: 56px; }
.additional.additional .numbers-panel { --wp-column-gap: 48px; }

@media (max-width: 900px) {
  .additional.additional .chapter__intro,
  .additional.additional .chapter__intro--44,
  .additional.additional .message-grid,
  .additional.additional .case-detail__grid,
  .additional.additional .equipment-grid { --wp-column-gap: 32px; }
}

@media (max-width: 860px) {
  .additional.additional .about__grid,
  .additional.additional .reasons__grid,
  .additional.additional .news__grid { --wp-column-gap: 32px; }
}

@media (max-width: 600px) {
  .additional.additional .numbers-panel { --wp-column-gap: 24px; }
}

/* テーブル：1列目の幅とセルの最小幅を SWELL の変数で制御する */
.additional.additional .info-table { --swl-cell1-width: 200px; --swl-minwidth-cell: 0px; }
.additional.additional .info-table--head { --swl-cell1-width: auto; }

/* --------------------------------------------------------------------------
   25. 画像スロットの未差し替え表示
   --------------------------------------------------------------------------
   画像は src / alt ともに元ファイル名を入れてある（メディアで差し替える前提）。
   差し替え前は画像が解決されないため、代替テキスト＝ファイル名が
   グレーの枠内に収まって見えるようにしておく。

   ※ .cert-panel__media はここに入れないこと。
     他のスロットは画像を object-fit:cover で敷き詰めるので差し替え後は
     この背景が隠れるが、認証ロゴだけは object-fit:contain で白い台紙の上に
     置く作りなので、背景が余白として見えてしまう。
     （グレーのパネルの中にもう一段グレーが入り「背景が二重」に見える）
     .cert-panel__media の背景は上の 18. で transparent を指定している。
   -------------------------------------------------------------------------- */
.additional.additional .chapter__photo,
.additional.additional .tech-tile__media,
.additional.additional .case-card__media,
.additional.additional .case-detail__media,
.additional.additional .message-grid__media,
.additional.additional .job-card__media { background: #E4E6E8; }

.additional.additional .wp-block-image img {
  font: 400 12px/1.6 var(--font-jp);
  color: #8A8F94;
  text-align: center;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   26. ブロックエディタ内プレビュー用の微調整
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .additional { max-width: none; }

/* トップページ加工事例カードの矢印ボックス */
.additional.additional .works__grid .case-card__body { justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; }
.additional.additional .works__grid .case-card__body::after {
  content: ">";
  flex: none;
  width: 36px;
  height: 36px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 13px/1 var(--font-en);
  color: var(--color-main);
}

/* --------------------------------------------------------------------------
   27. エディタからの「テキスト配置」を優先する
   --------------------------------------------------------------------------
   配置は has-text-align-* クラスで出力される（詳細度 0,1,0）。デザイン側で
   text-align を指定している箇所ではそのままでは勝てないので、最後に上書きする。
   色と文字サイズはエディタ側が !important／インラインで出すため上書き不要。
   -------------------------------------------------------------------------- */
.additional.additional .has-text-align-left { text-align: left; }
.additional.additional .has-text-align-center { text-align: center; }
.additional.additional .has-text-align-right { text-align: right; }

/* 縦積みで中央寄せにしている箇所は、配置に合わせてブロックの位置も動かす */
.additional.additional .section-head .has-text-align-left,
.additional.additional .cta__inner .has-text-align-left,
.additional.additional .page-cta__inner .has-text-align-left,
.additional.additional .phone-band__inner .has-text-align-left { align-self: flex-start; }

.additional.additional .section-head .has-text-align-center,
.additional.additional .cta__inner .has-text-align-center,
.additional.additional .page-cta__inner .has-text-align-center,
.additional.additional .phone-band__inner .has-text-align-center { align-self: center; }

.additional.additional .section-head .has-text-align-right,
.additional.additional .cta__inner .has-text-align-right,
.additional.additional .page-cta__inner .has-text-align-right,
.additional.additional .phone-band__inner .has-text-align-right { align-self: flex-end; }

/* --------------------------------------------------------------------------
   28. フルワイドの「コンテンツサイズ」を効かせる
   --------------------------------------------------------------------------
   loos/full-wide の「コンテンツサイズ」（記事 / サイト幅 / フルワイド）は、
   SWELL がフロントで __inner に l-article / l-container を付けることで効く。

   このサイトは「フルワイド」を既定とし、内側コンテナ（.chapter__inner など）が
   デザイン幅 1088px を持つ。そのため「サイト幅」「記事」に切り替えたときは
   デザイン幅を解除して、SWELL の幅に委ねる必要がある。

   また、SWELL のエディタは data-content-size に対して左右 52px の padding を
   足すだけで幅を再現しない（＝エディタでは3つとも同じに見える）。
   フロントと同じ幅になるよう、ここで再現する。
   -------------------------------------------------------------------------- */

/* フロント：サイト幅／記事 のときはデザイン幅と左右余白を解除する。
   直下の子＝内側コンテナのみが対象。中の .timeline などの幅は維持される。 */
.additional.additional .swell-block-fullWide__inner.l-container > *,
.additional.additional .swell-block-fullWide__inner.l-article > * {
  max-width: none !important;
  padding-left: 0;
  padding-right: 0;
}

/* エディタ：フロントと同じ幅・余白を再現する。
   --container_size / --article_size は子テーマの functions.php から渡している。
   詳細度を (0,4,0) にしてあるのは、SWELL の
   [data-type][data-content-size] .swell-block-fullWide__inner (0,3,0) に勝つため。 */
.editor-styles-wrapper [data-type="loos/full-wide"][data-content-size="container"] .swell-block-fullWide__inner {
  max-width: calc(var(--container_size, 1200px) + var(--swl-pad_container, 48px) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--swl-pad_container, 48px);
  padding-right: var(--swl-pad_container, 48px);
}
.editor-styles-wrapper [data-type="loos/full-wide"][data-content-size="article"] .swell-block-fullWide__inner {
  max-width: var(--article_size, 900px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--swl-pad_post_content, 16px);
  padding-right: var(--swl-pad_post_content, 16px);
}
.editor-styles-wrapper [data-type="loos/full-wide"][data-content-size="container"] .swell-block-fullWide__inner > .wp-block,
.editor-styles-wrapper [data-type="loos/full-wide"][data-content-size="article"] .swell-block-fullWide__inner > .wp-block {
  max-width: none !important;
  padding-left: 0;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   29. 加工事例（カスタム投稿タイプ）
   --------------------------------------------------------------------------
   タグは「加工方法」「材質」の2タクソノミーから出すため、
   1件に複数のチップが並ぶ。固定ページ時代は1つだけだったので
   間隔の指定がなく、詰まって見える。ここで並びを整える。
   -------------------------------------------------------------------------- */
.additional.additional .case-card__body .tag-chip + .tag-chip,
.additional.additional .case-detail__tag .tag-chip + .tag-chip { margin-left: 8px; }

.additional.additional .case-detail__tag { display: flex; flex-wrap: wrap; gap: 8px; }
.additional.additional .case-detail__tag .tag-chip + .tag-chip { margin-left: 0; }

/* 絞り込み中のタグを強調する（tag-filter の -current） */
.additional.additional .tag-filter.-current a {
  background: var(--color-main);
  color: var(--color-white);
}

/* ページャー（SWELL 標準の見た目をそのまま使うので余白だけ） */
.additional.additional .wp-block-query-pagination,
.additional.additional .navigation.pagination { margin: 48px 0 0; }

/* --------------------------------------------------------------------------
   30. トップ：加工事例のスライダー
   --------------------------------------------------------------------------
   4枚を並べ、左右の端でカードが見切れる状態にして「横に送れる」ことを示す。
   右から左へ自動で流れ、ドラッグでも動かせる（assets/js/works-slider.js）。

   scroll-snap は使わない。自動送りが常にスナップ位置へ引き戻されてしまうため。
   -------------------------------------------------------------------------- */
.additional.additional .works-slider {
  --peek: 40px;      /* 左右に見切れさせる幅 */
  --per-view: 4;     /* 一度に見せる枚数 */
  position: relative;
  margin: 56px 0 0;
}

.additional.additional .works-slider__track {
  display: flex;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* カード全体がリンクなので、通常時は指マークにしてクリックできることを示す。
     ドラッグ中だけ「つかんでいる手」に変える。 */
  cursor: pointer;
  /* スクロールバーは出さない（送れることは見切れたカードで示す） */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.additional.additional .works-slider__track::-webkit-scrollbar { display: none; }

/* つかんで動かす操作が、画像やテキストの「持ち上げ」にならないようにする。
   これがないと、ブラウザ既定の画像ドラッグが始まってスライドできない。 */
.additional.additional .works-slider__track,
.additional.additional .works-slider__track * {
  user-select: none;
  -webkit-user-drag: none;
}
.additional.additional .works-slider__track img {
  -webkit-user-drag: none;
  pointer-events: none;   /* 画像自体はリンクではないので無効化して問題ない */
}

/* ドラッグ中はカーソルを変え、リンクのクリックを抑止する */
.additional.additional .works-slider__track.is-dragging { cursor: grabbing; }
.additional.additional .works-slider__track.is-dragging a { pointer-events: none; }

/* 1枚の幅。4枚ぶん＋左右の見切れ分で画面幅になるようにする */
.additional.additional .works-slider__track > .wp-block-column {
  flex: 0 0 calc((100% - var(--peek) * 2) / var(--per-view));
}

@media (max-width: 1024px) {
  .additional.additional .works-slider { --per-view: 3; }
}
@media (max-width: 860px) {
  .additional.additional .works-slider { --per-view: 2; --peek: 32px; }
  /* 縦1列にする指定はスライダーには効かせない */
  .additional.additional .works-slider__track.works__grid { grid-template-columns: none; }
}
@media (max-width: 600px) {
  .additional.additional .works-slider { --per-view: 1; --peek: 48px; }
}

/* カード下の帯は高さを一定にする。
   タイトルが長いと2行になり、カードごとに帯の高さがずれてしまうため、
   1行に収めてはみ出した分は「…」で省略する。 */
.additional.additional .works-slider .case-card__body {
  min-height: 56px;
  height: 56px;
}
.additional.additional .works-slider .case-card__title {
  min-width: 0;          /* flex の子が縮めるようにする（これが無いと省略されない） */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.additional.additional .works-slider .case-card__title a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   31. タグ（tag-chip）をリンクとして扱う
   --------------------------------------------------------------------------
   枠線と余白は .tag-chip（p要素）が持っているため、そのままだと
   中の文字の部分しかクリックできず、枠の内側の余白が反応しない。
   リンクを含むタグに限って余白を a 側へ移し、枠の中全体を当たり判定にする。
   （:has(a) で限定しているので、リンクの無いタグは従来どおりの見た目）
   -------------------------------------------------------------------------- */
.additional.additional .tag-chip:has(a) { padding: 0; }

.additional.additional .tag-chip a {
  display: block;
  padding: 6px 12px;
  color: inherit;
  transition: background-color .15s, color .15s;
}

/* ホバーで色を反転させる（絞り込みのタグ .tag-filter と同じ挙動） */
.additional.additional .tag-chip a:hover {
  background: var(--color-main);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   お問い合わせフォーム（デモ）の注意書き

   送信ボタンを押したときに assets/js/contact-demo.js が差し込む。
   実際に送信できるようにしたら、スクリプトごと不要になる。
   -------------------------------------------------------------------------- */
.additional.additional .contact-form__demoNote {
  max-width: 880px;
  margin: 20px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--color-accent);
  background: #FDF3F2;
  font: 400 14px/1.9 var(--font-jp);
  letter-spacing: .03em;
  color: var(--color-text);
  text-align: center;
  opacity: 0;
  transform: translateY(-4px);
}

.additional.additional .contact-form__demoNote.is-shown {
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .additional.additional .contact-form__demoNote,
  .additional.additional .contact-form__demoNote.is-shown {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   32. 電話番号リンク（[site_tel_link]）
   --------------------------------------------------------------------------
   上の .additional.additional a がリンク色（紺）を付けるため、
   置かれた場所の文字色（CTA・電話帯では白）をそのまま使わせる。
   PC幅のカーソルの指定は、フッターと共通なので style.css にある。 */
.additional.additional a.mihon-tel,
.additional.additional a.mihon-tel:hover { color: inherit; }