@charset "utf-8";
/* =============================================================================
   デザインからの調整（ご指摘対応）
   -----------------------------------------------------------------------------
   デザインの CSS（design/）は書き換えず、差分だけをここに書く。
   ここに書いたルールは scripts/build-chrome-css.py で chrome.css にも取り込まれ、
   旧デザインのページのヘッダー・フッターにも同じ調整が効く。
   ========================================================================== */

/* ヘッダー2段目：内容は最大 1920px で中央寄せ */
.lnav__tabs { max-width: 1920px; margin-inline: auto; width: 100%; }

/* ロゴ（ヘッダー・フッター）：ホバーで透過 */
.pnav__logo,
.jfooter2__logolink { display: inline-block; transition: opacity .2s ease; }
.pnav__logo:hover,
.jfooter2__logolink:hover { opacity: .7; }

/* 並び替えのドロップダウン */
.hc-select { cursor: pointer; }

/* ページ送りの省略記号（丸囲みにしない） */
.hc-pager .hc-pager__gap {
  min-width: 20px; min-height: auto; padding-inline: 2px;
  background: none; border: 0; border-radius: 0;
  color: var(--ink-muted);
}

/* 廃棄物マネジメント TOP：ファーストビューの実績ボックスの透明度を下げる（0.7 → 0.8） */
.wm-metrics { background: rgba(238, 252, 246, .8); }

/* 廃棄物マネジメント TOP：支援領域タブ。ホバーで色が変わり、選択中はポインタにしない */
.sa-tab { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.sa-tab:not(.is-selected):hover { background: var(--fg-waste-50); box-shadow: inset 0 -3px 0 var(--fg-waste-300); }
.sa-tab.is-selected { cursor: default; }

/* よくあるご質問：質問行のホバー */
.faq summary { transition: background-color .2s ease, color .2s ease; }
.faq summary:hover { background: var(--fg-waste-50); }

/* お問い合わせ・資料請求：左の案内が固定ヘッダーに隠れないようにする（デザインは top:24px） */
.fm-side { top: calc(var(--header-h, 56px) + 24px); }

/* ===========================================================================
   移行した本文に残っている旧サイトのブロック（導入事例4件）
   旧テーマのスライダー用 CSS/JS が無いため、そのままだと縦に積まれてしまう。
   カード並びとタグの見た目をこちらで整える
   ========================================================================= */

/* 関連コラム（旧 #column_slider） */
.hc-body #column_slider { margin: 24px 0 8px; }
.hc-body #column_slider .slide_area {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.hc-body #column_slider .slide {
  display: flex;
  flex-direction: column;
  background: var(--fg-canvas, #fff);
  border: 1px solid var(--fg-card-line, #dfe3e8);
  border-radius: var(--fg-radius-card, 20px);
  overflow: hidden;
}
.hc-body #column_slider .img_area { margin: 0; }
.hc-body #column_slider .img_area img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hc-body #column_slider .txt_area {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}
.hc-body #column_slider ul.cate {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hc-body #column_slider ul.cate li {
  margin: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--fg-gray, #f1f5f9);
  color: var(--fg-charcoal, #354341);
  font-size: 11px;
  line-height: 1.7;
}
.hc-body #column_slider ul.cate li:nth-child(n + 4) { display: none; } /* タグが多い記事があるため3つまで */
.hc-body #column_slider .entry-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.6;
}
.hc-body #column_slider .slide_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.hc-body #column_slider .slide_foot .date { margin: 0; color: var(--fg-news-date, #838383); font-size: 12px; }
.hc-body #column_slider .slide_foot .btn { margin: 0; }
.hc-body #column_slider .slide_foot .btn a { font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) {
  .hc-body #column_slider .slide_area { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hc-body #column_slider .slide_area { grid-template-columns: 1fr; }
}

/* 関連キーワード（旧 .search_list02）。旧サイトのリンク先（column/?post_type=case）は
   移行後に機能しないため、投稿の本文をリンクなしのタグ表示に整理した */
.hc-body .search_list02 { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.hc-body .search_list02 p { margin: 0; }
.hc-body .search_list02 .kwtag,
.hc-body .search_list02 a {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--fg-card-line, #dfe3e8);
  border-radius: 999px;
  background: var(--fg-canvas, #fff);
  font-size: 12px;
  line-height: 1.8;
  text-decoration: none;
}
.hc-body .search_list02 a:hover { background: var(--fg-gray, #f1f5f9); }
.hc-body .search_list02 .kwtag { color: var(--fg-charcoal, #354341); }

/* ===========================================================================
   お客様ご指摘の反映（2026-09-25）
   ========================================================================= */

/* サービスページ：システム名の小さな添え書き（例：廃棄物管理システム（名称：GENESYS-ECO）） */
.wms-svc__sys {
  margin: 2px 0 6px;
  color: var(--ink-muted, #5f6564);
  font-size: 12px;
  line-height: 1.7;
}

/* 導入事例のタグ。すぐ下のカルーセルが影の余地として上に 56px 張り出しており、
   そのままではタグがクリック・選択できないため、重ね順を上げる */
.wms-casetags { position: relative; z-index: 1; }

/* 事業部 TOP：効果アイコンを一回り大きく（AUN vbr3j2 #1） */
.tmeffect__ico { width: 62px; height: 62px; }
.tmeffect__ico img { width: 52px; height: 52px; }
.tmeffect__item:last-child .tmeffect__ico img { width: 40px; height: 40px; }

/* 事業部 TOP：結びの帯。文字が読みやすいよう地色を一段薄く（AUN vbr3j2 #26） */
.tmclosing { background: #ddf5da; }

/* 事業部 TOP：見出しが長くなったぶん、字だけ少し小さくして収める（AUN vbr3j2 #22） */
.sec-head__title--long { font-size: clamp(24px, 3.4vw, 34px); }

/* 廃マネ TOP：支援領域パネルの地色。白文字が読みやすいよう一段明るくする
   （AUN 7d4b57 #20／vbr3j2 #29・#30） */
:root { --wm-sa-panel: #1f8a68; }

/* 廃マネ TOP：クラウドシステムのシステム名（AUN vbr3j2 #28）
   タイトルの直下に添える（.sa-solution の gap 12px を打ち消して 2px に詰める）。
   システム名がない右2つは、説明文の上端がそろうよう同じ高さ（2+20+12=34px）を空ける */
.sa-solution__sys { margin: -10px 0 0; text-align: center; color: var(--ink-muted, #5f6564); font-size: 12px; line-height: 20px; }
@media (min-width: 1025px) {
  .sa-solution:not(:has(.sa-solution__sys)) .sa-solution__desc { margin-top: 22px; }
}

/* 廃マネ TOP：3つのソリューションの補足（AUN vbr3j2 #46）
   3枠の下に置き、サービス名が目に入るよう大きく見せる */
.sa-solutions__note {
  position: relative; z-index: 1;
  width: fit-content; max-width: 100%; margin: -46px auto 0;
  padding: 16px 32px; border-radius: 12px;
  border: 1px solid var(--fg-waste-200, #a9efd6);
  background: var(--fg-waste-50, #ebfbf4);
  box-shadow: 0 6px 20px rgba(9, 61, 46, .12);
  text-align: center; font-size: 17px; font-weight: 700; line-height: 1.7;
  color: var(--fg-waste-800, #176f55);
}
.sa-solutions__note span { font-size: 19px; }
.sa-solutions__note-br { display: none; }   /* PC は1行、スマホだけ3行に折る */
@media (max-width: 767px) {
  .sa-solutions__note { margin-top: -34px; padding: 14px 18px; font-size: 14px; }
  .sa-solutions__note span { font-size: 15px; }
  .sa-solutions__note-br { display: inline; }
}

/* ピックアップ：リリース予定の注記（AUN vbr3j2 #47） */
.sa-pickup__note { display: inline-block; margin: 2px 0 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--cv-50, #fdf3e6); color: var(--cv-700, #8a4a07); font-size: 11px; line-height: 1.8; }

/* 可視化分析ダッシュボード：リリース予定の表示（AUN yb748q #1・#30）
   MV ではサービス名の末尾に添え、100px ほどスクロールすると固定ヘッダーの下にバーで出す */
.pk-hero__release {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--cv-50, #fdf3e6);
  color: var(--cv-700, #8a4a07);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}
.pk-releasebar {
  position: fixed;
  top: var(--header-h, 56px);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 8px 0;
  background: var(--cv-50, #fdf3e6);
  border-bottom: 1px solid var(--cv-100, #fbe3c4);
  color: var(--cv-700, #8a4a07);
  /* 表示・非表示はフェードで切り替える */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.pk-releasebar.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.pk-releasebar__inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding-inline: 16px;
}
.pk-releasebar__name { font-size: 15px; font-weight: 700; line-height: 1.7; }
.pk-releasebar__tag {
  padding: 2px 12px; border-radius: 6px;
  background: var(--fg-canvas, #fff); border: 1px solid var(--cv-200, #f2c88d);
  font-size: 12px; font-weight: 700; line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  .pk-releasebar { transition: none; }
}
@media (max-width: 640px) {
  .pk-hero__release { margin-left: 0; font-size: 12px; }
  .pk-hero__name .pk-release__br { display: block; height: 0; } /* スマホは改行して2行にする */
  .pk-releasebar__inner { gap: 6px; }
  .pk-releasebar__name { font-size: 13px; }
  .pk-releasebar__tag { font-size: 11px; padding: 1px 10px; }
}

/* 法令遵守・運用標準化：見出し「適正な運用は、／3つの情報の整合から始まります。」の
   2行目が折り返さないよう、右のベン図を少し小さくして文字側の幅を確保する */
/* 図を少し小さくして見出しの2行目の折り返しを防ぐ。
   縦積みになる 1023px 以下は、設計どおり幅いっぱい（100%）のままにする */
@media (min-width: 1024px) {
  .wms-trio__head .wms-venn { width: 42%; max-width: 480px; }
}
.wms-trio__head .sec-head__title { text-wrap: nowrap; }
@media (max-width: 1100px) {
  .wms-trio__head .sec-head__title { text-wrap: balance; }
}

/* 見出しの2行目が折り返さないよう、幅の上限を外して1行に収める
   （法令遵守・運用標準化「業務の標準化により、／だれでも正しく廃棄物管理ができる運用へ。」） */
.sec-head--wide { max-width: none; }
.sec-head--wide .sec-head__title { text-wrap: nowrap; }
@media (max-width: 1100px) {
  .sec-head--wide .sec-head__title { text-wrap: balance; }
}

/* サービスページの「導入事例」だけ枠が左右40pxずつ広く、見出しやカードの左端が
   ほかのセクションと揃っていなかったため、標準の幅にそろえる。
   カルーセルは引き続き枠いっぱいに並ぶ */
.wm-sec .jw--wide { --container: var(--container-default, 1200px); }

/* 電子マニフェスト導入ガイド：MV の2つのボタンの幅をそろえる（長いほうに合わせる）。
   768px 以上のときだけ横並びで等幅にし、それ以下は設計どおり縦積み */
@media (min-width: 768px) {
  .wms-hero__actions--even {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: fit-content;
    max-width: 100%;
  }
}

/* サービスページ MV のボタン：ラベルが長いと文字が縮まず、右の矢印がボタンからはみ出す。
   （design 側で .cvbtn__txt が flex:none のため）幅が足りないときは折り返して収める */
.wms-hero__actions .cvbtn__txt { flex: 0 1 auto; min-width: 0; text-wrap: balance; }

/* 料金・プラン：各プランの説明文を2px小さく（16px → 14px）
   ※「主な対応内容」を削除したため、行数をそろえる高さ指定は不要になった */
.pl-plan__desc { font-size: 14px; }

/* おすすめのカードは上下に12pxせり出すぶん、中身も12px上にずれる。
   上に同じだけ余白を足して、4枚の「主な対応内容」の高さをそろえる
   （カードの上下パディングは 1200px 未満で 28px → 24px に変わる。
     1023px 以下はせり出し自体がなくなるので何もしない） */
@media (min-width: 1200px) {
  .pl-plan--rec { padding-top: 40px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .pl-plan--rec { padding-top: 36px; }
}
/* 「Standard Plus」はバッジ分の右余白で折り返しやすい。名前は1行で保つ */
.pl-plan__name { white-space: nowrap; }

/* 廃マネTOP：支援領域の課題リスト。文字が読みやすいよう地色を一段薄く
   #96f6d2（waste-200）→ #d3f9e9（waste-100）（AUN 7d4b57 #20／vbr3j2 #30） */
.sa-issues { background: var(--fg-waste-100, #d3f9e9); }

/* 廃マネTOP：CLIENTS のロゴ一覧を Figma（0925_調整［/env-mgt/］）に合わせる。
   1行6枠の等幅グリッドにし、ロゴは枠の中で縦横比を保ったまま収める
   （AUN 7d4b57 #63／vbr3j2 #43） */
.wm-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 40px;
  align-items: center;
}
.wm-logos__cell { min-height: 75px; padding: 12px 0; }
/* ロゴごとに Figma の表示サイズ（--logo-w / --logo-h、マークアップ側で指定）で出す。
   枠に収まらないときだけ縮む */
.wm-logos__cell img {
  width: calc(var(--logo-w, 120) * 1px * var(--logo-scale, 1));
  height: calc(var(--logo-h, 40) * 1px * var(--logo-scale, 1));
  /* 枠（166.67px）より広いロゴ（ENEOS・東邦ホールディングス）は Figma でも
     枠からはみ出して置かれているため、上限で縮めない */
  max-width: none;
  object-fit: contain;
}
@media (max-width: 1023px) {
  /* Figma（node 855-246）：3列・セル 108.66×64px・列間12px・行間16px・ロゴはPCの0.6倍 */
  .wm-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .wm-logos__cell { min-height: 64px; padding: 0; }
  .wm-logos__cell img { --logo-scale: .6; max-width: 100%; }
}

/* 事業部TOP：業種カードの画像の角丸を Figma（node 843-2）に合わせる（12px → 8px） */
.indcard__visual { border-radius: 8px; }

/* 廃マネTOP：支援領域の非アクティブタブも、課題リストと同じ淡さにそろえる
   #96f6d2（waste-200）→ #d3f9e9（waste-100） */
.sa-tab { background: var(--fg-waste-100, #d3f9e9); }
.sa-tab.is-selected { background: var(--wm-sa-panel); }

/* ヘッダー1段目のタブ：ラベルを「排出事業者向けサービス TOP」に変えたぶん、
   スマホの3等分（1枠130px前後）では1行に収まらず、文字の頭とお尻が切れていた。
   折り返して中央にそろえる */
@media (max-width: 767px) {
  .pnav__tab {
    white-space: normal;
    padding: 6px 6px;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
  }
}

/* 移行した本文には alignleft / alignright の画像が残っており、見出しや後続の
   ブロックが回り込んで細くなる（導入事例の関連コラムが1文字幅になる原因）。
   見出しと移行ブロックの前で回り込みを解除する */
.hc-body h2,
.hc-body h3,
.hc-body #column_slider,
.hc-body .search_list02 { clear: both; }

/* 事業部TOP：導入企業のロゴバンド（Figma node 881-2408／26社・50音順）。
   ロゴごとに Figma の表示サイズ（--logo-w / --logo-h）で出し、
   セルの高さ75px・ロゴ間40px・上下段の間24px にそろえる */
.logoband__rows { gap: 24px; }
.logoband__track { gap: 40px; }
.logoband__cell { min-height: 75px; }
.logoband__cell img {
  width: calc(var(--logo-w, 120) * 1px * var(--logo-scale, 1));
  height: calc(var(--logo-h, 40) * 1px * var(--logo-scale, 1));
  object-fit: contain;
}
@media (max-width: 767px) {
  /* SP のデザインはないため、PC と同じ比率で約0.6倍に縮める（CLIENTS と同じ考え方） */
  .logoband__cell img { --logo-scale: .6; }
  .logoband__cell { min-height: 45px; }
  .logoband__track { gap: 24px; }
  .logoband__rows { gap: 16px; }
}

/* 廃棄物管理支援の追従CTA（Figma node 892-3031）。
   PC は右下のカード（200px・角丸16px）、SP は画面下いっぱいの帯。
   ファーストビューを過ぎたら現れ、Cookie 同意バナーが出ている間は --cc-h ぶん持ち上げる */
.fabcta {
  position: fixed;
  z-index: 45;
  right: 24px;
  bottom: calc(24px + var(--cc-h, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 200px;
  padding: 14px 12px 12px;
  background: var(--fg-canvas, #fff);
  border: 1px solid var(--fg-waste-200, #96f6d2);
  border-radius: 16px;
  filter: drop-shadow(0 8px 10px rgba(9, 61, 46, .18));
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.fabcta.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.fabcta__lead {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--fg-waste-700, #1d8466);
  text-align: center;
}
.fabcta__btns { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fabcta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: filter .2s ease, background-color .2s ease;
}
.fabcta__btn--outline {
  background: var(--fg-canvas, #fff);
  border: 1px solid var(--fg-waste-200, #96f6d2);
  color: var(--fg-waste-700, #1d8466);
}
.fabcta__btn--outline:hover { background: var(--fg-waste-50, #ebfbf4); }
.fabcta__btn--fill { background: var(--fg-waste-600, #269f7b); color: var(--fg-canvas, #fff); }
.fabcta__btn--fill:hover { filter: brightness(1.04); }
@media (prefers-reduced-motion: reduce) {
  .fabcta { transition: none; }
}
@media (max-width: 767px) {
  /* SP は画面下の帯。角丸なし・上辺だけ罫線・影は上向き */
  .fabcta {
    right: 0;
    left: 0;
    bottom: var(--cc-h, 0px);
    width: auto;
    gap: 6px;
    padding: 8px 16px 12px;
    border: 0;
    border-top: 1px solid var(--fg-waste-200, #96f6d2);
    border-radius: 0;
    filter: drop-shadow(0 -4px 8px rgba(9, 61, 46, .11));
  }
  .fabcta__btns { flex-direction: row; gap: 8px; }
  .fabcta__btn { flex: 1 1 0; min-width: 0; }
}

/* フッターのサービス欄：リンクが4件になり、デザインの min-height（147px＝3件ぶん）を
   超えて「お問い合わせ／資料請求」の縦位置がずれるため、4件ぶんに広げてそろえる。
   スマホは縦積みのため対象外（デザイン側で min-height:0） */
@media (min-width: 1024px) {
  .fgroup--svc .fgroup__links { min-height: 194px; }
}