@charset "utf-8";

/* =========================================================
   下層ページ用Style（kasou.css）
   -----------------------------------------------------------
   ・読み込み順： style.css → micro-interactions.css → kasou.css（最後）
   ・色/見出し色は style.css の --c-* トークンを使用
   ・<main> の中身は 1 カラム
   ========================================================= */

:root{
  /* --header-h は style.css の :root に集約（ここでは定義しない） */
  --kasou-narrow: 920px; /* 本文1カラムの最大幅（可読性重視） */
  --kasou-wide: 1080px;  /* 帯・カード列のワイド幅（.container と同じ） */
}

/* ---------- main：固定ヘッダー分の余白を確保 ----------
   header が position:fixed のため、先頭コンテンツが潜り込まないよう
   main の上端にヘッダー高さ分の余白を入れる。
   横paddingは付けず、各ブロックが色帯を全幅で敷けるようにする。 */
main#main{
  padding-top: var(--header-h);
}

/* ---------- 内側コンテナ ---------- */
/* ワイド（帯・カード列用）。style.css の .container と同等 */
.l-wide{
  max-width: var(--kasou-wide);
  margin-inline: auto;
  padding-inline: 20px;
}
/* ナロー（1カラム本文用） */
.l-narrow{
  max-width: var(--kasou-narrow);
  margin-inline: auto;
  padding-inline: 20px;
}

/* =========================================================
   ページヘッダー（タイトル帯／写真背景）
   -----------------------------------------------------------
   ■ 基本の使い方（ページごとに写真を差し替える）
     <div class="page-header">
       <img class="page-header-bg" src="images/head-service.jpg" alt=""
            width="1920" height="720">
       <div class="l-wide"> …タイトルなど… </div>
     </div>
     推奨サイズ 1920×720 前後／alt は装飾画像なので空のままでOK。

   ■ 写真のトリミング位置を変えたい（人物の顔を切らない等）
     <img class="page-header-bg" … style="object-position:center 30%">

   ■ 暗さ（ベール）を変えたい ＝ クラスを足すだけ
       .is-veil-flat   … 全面フラットに暗く（どんな写真でも安全）
       .is-veil-bottom … 下側だけ暗く（写真をきれいに見せたい時）
       .is-veil-light  … 全体的に薄め（明るい写真向け）
     個別に微調整したい時は style="--ph-veil:rgba(11,31,58,.92)" のように上書き

   ■ 写真を入れない場合
     <img class="page-header-bg"> を削除すれば、従来どおり紺のグラデーション
   ========================================================= */
.page-header{
  /* ▼ ページ側から上書きできる変数 */
  --ph-veil:  rgba(11,31,58,.88);        /* ベール：文字が乗る左側の濃さ */
  --ph-veil2: rgba(11,31,58,.45);        /* ベール：右側の濃さ */
  --ph-min-h: clamp(260px, 30vw, 360px); /* 帯の高さ */

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--ph-min-h);
  color:#fff;
  padding-block: clamp(40px, 6vw, 72px);
  overflow: hidden;

  /* 写真未指定・読み込み前のフォールバック（従来の紺グラデ） */
  background: linear-gradient(120deg, var(--c-bg-footer) 0%, var(--c-navy) 100%);
}
/* 背景写真（object-fit で帯いっぱいにトリミング表示） */
.page-header > .page-header-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  border-radius:0;
  pointer-events:none;
  user-select:none;
}
/* ベール（文字の可読性を確保する半透明レイヤー） */
.page-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(100deg,
              var(--ph-veil) 0%,
              var(--ph-veil) 38%,
              var(--ph-veil2) 100%);
  pointer-events:none;
}
/* 中身（テキスト）は写真・ベールより前面に */
.page-header > .l-wide{
  position:relative;
  z-index:2;
  width:100%;
}

/* ---------- ベールのバリエーション（あとから差し替え用） ---------- */
.page-header.is-veil-flat::before{
  background: rgba(11,31,58,.66);
}
.page-header.is-veil-bottom::before{
  background: linear-gradient(to top,
              rgba(11,31,58,.85) 0%,
              rgba(11,31,58,.45) 55%,
              rgba(11,31,58,.15) 100%);
}
.page-header.is-veil-light::before{
  background: linear-gradient(100deg,
              rgba(11,31,58,.62) 0%,
              rgba(11,31,58,.62) 38%,
              rgba(11,31,58,.20) 100%);
}

/* ---------- 文字 ---------- */
.page-header .page-title-en{
  display:block;
  color: var(--gold-light, #e6c96f);
  font-size: 1rem;
  font-weight:700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.page-header .page-title{
  color:#fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.7;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.page-header .page-lead{
  max-width: 44em;
  margin: 1em 0 0;
  color: var(--c-note-on-navy);
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* =========================================================
   パンくずリスト
   ========================================================= */
.breadcrumb{
  background: var(--c-bg-section);
  border-bottom: 1px solid var(--border, #d0dcea);
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 0.35em 0.75em;
  list-style:none;
  margin: 0 auto;
  padding: 12px 20px;
  max-width: var(--kasou-wide);
  font-size: 1rem;
  color: var(--c-note);
}
.breadcrumb li{
  display:flex;
  align-items:center;
  gap: 0.35em 0.75em;
}
/* 区切りの「›」を疑似要素で描画 */
.breadcrumb li:not(:last-child)::after{
  content:"";
  width:7px; height:7px;
  border-top: 1.5px solid var(--c-note);
  border-right: 1.5px solid var(--c-note);
  transform: rotate(45deg);
  flex:none;
}
.breadcrumb a{
  color: var(--c-navy);
  text-decoration:none;
}
.breadcrumb a:hover{
  text-decoration:underline;
  text-underline-offset: 0.2em;
}
.breadcrumb [aria-current="page"]{
  color: var(--c-note);
}

/* =========================================================
   本文（1カラム）
   ========================================================= */
.page-body{
  padding-block: clamp(48px, 7vw, 80px);
  background: var(--c-bg);
}

/* ---------- リッチテキスト（記事本文の汎用スタイル） ---------- */
.rich-text{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text);
}
/* 縦のリズム（隣接要素の間隔） */
.rich-text > * + *{ margin-top: 1.5em; }

.rich-text h2{
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  color: var(--c-navy);
  line-height: 1.7;
  margin-top: 2.5em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--c-navy);
}
.rich-text h2:first-child{ margin-top: 0; }

.rich-text h3{
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  color: var(--c-navy);
  line-height: 1.7;
  margin-top: 2em;
  padding-left: 0.65em;
  border-left: 1px solid var(--gold, #9a7b0a);
}

.rich-text h4{
  font-size: 1.125rem;
  color: var(--c-navy);
  line-height: 1.7;
  margin-top: 1.8em;
}

.rich-text p{ margin: 0; }

.rich-text a{
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.rich-text a:hover{ text-decoration-thickness: 3px; }

/* リスト */
.rich-text ul,
.rich-text ol{
  margin: 1em 0;
  padding-left: 1.6em;
}
.rich-text li + li{ margin-top: 0.5em; }
.rich-text ul{ list-style: disc; }
.rich-text ol{ list-style: decimal; }
.rich-text li::marker{ color: var(--c-navy); }
/* 入れ子リスト */
.rich-text li > ul,
.rich-text li > ol{ margin-top: 0.5em; }

/* 引用 */
.rich-text blockquote{
  margin: 0;
  padding: 1em 1.4em;
  background: var(--c-bg-section);
  border-left: 1px solid var(--c-navy);
  border-radius: 0 8px 8px 0;
  color: var(--c-text);
  font-style: italic;
}
.rich-text blockquote :last-child{ margin-bottom: 0; }

/* 区切り線 */
.rich-text hr{
  border: 0;
  border-top: 1px solid var(--border, #d0dcea);
  margin-block: 2.5em;
}

/* 強調・マーカー・コード */
.rich-text strong{ font-weight: 700; }
.rich-text mark{ background: #fff3bf; padding: 0 0.2em; border-radius: 2px; }
.rich-text code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--c-bg-section);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.95em;
}

/* =========================================================
   ページ内リンク（アンカー）の着地位置
   -----------------------------------------------------------
   header が position:fixed（高さ --header-h）のため、そのままだと
   ジャンプ先の見出しがヘッダーの下に隠れてしまう。
   scroll-margin-top で「その分だけ手前で止める」。
   ※ スムーズスクロール自体は style.css の html{scroll-behavior:smooth}
     が効くので JS は不要（OS側で「視差効果を減らす」設定の人は自動で
     瞬間移動になる＝アクセシビリティ対応済み）。
   ========================================================= */
.rich-text :where(h2, h3, h4)[id],
[id].anchor-target{
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* =========================================================
   ページ内目次（TOC）
   -----------------------------------------------------------
   <nav class="toc" aria-labelledby="toc-title">
     <p class="toc-title" id="toc-title">目次</p>
     <ul>
       <li><a href="#env">環境保護のとりくみ</a></li>
       …
     </ul>
   </nav>
   ・リンク先の見出しに id="env" のように id を付けるだけ
   ・PCは2列、SPは1列に自動で切り替わります
   ========================================================= */
.toc{
  margin-block: 2em;
  padding: clamp(18px, 3vw, 24px) clamp(18px, 3vw, 28px);
  background: var(--c-bg-section);
  border: 1px solid var(--border, #d0dcea);
  border-radius: 12px;
}
.toc-title{
  margin: 0 0 0.8em;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .5em;
}
/* 見出し左の小さな縦棒 */
.toc-title::before{
  content:"";
  width: 3px;
  height: 1.1em;
  background: var(--gold, #9a7b0a);
  border-radius: 2px;
  flex: none;
}
/* .rich-text ul の disc / padding を打ち消して、2列のリンク一覧にする */
.rich-text .toc ul,
.toc ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
}
.rich-text .toc li + li,
.toc li + li{ margin-top: 0; }

.rich-text .toc a,
.toc a{
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .55em .2em;
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease, padding-left .25s ease;
}
/* 下向きの矢印（＝ページ内を下に移動する、の合図） */
.rich-text .toc a::before,
.toc a::before{
  content:"";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--gold, #9a7b0a);
  border-bottom: 1.5px solid var(--gold, #9a7b0a);
  transform: rotate(45deg) translate(-1px,-1px);
  flex: none;
  transition: transform .25s ease;
}
.rich-text .toc a:hover,
.toc a:hover,
.toc a:focus-visible{
  text-decoration: none;
  border-bottom-color: var(--c-navy);
}
.toc a:hover::before{ transform: rotate(45deg) translate(1px,1px); }

@media (prefers-reduced-motion: reduce){
  .toc a, .toc a::before{ transition: none; }
  .toc a:hover::before{ transform: rotate(45deg) translate(-1px,-1px); }   /* ホバーでも矢印を動かさない（2026-10-21） */
}

/* =========================================================
   チェックリスト（.check-list）
   -----------------------------------------------------------
   <ul class="check-list">
     <li>全社員への定期的な教育訓練の実施</li>
     …
   </ul>
   ・「取り組み項目」「対応できること」など、実績・できることの列挙に。
   ・アイコンは CSS だけで描いています（外部のアイコンフォントや画像を
     読み込まないので、表示が速く・他社サービスに依存しません）。
   ・大きさは文字サイズ（em）に連動するので、拡大表示でも崩れません。
   ・色を変えたいときは、この2つの変数を上書きするだけ：
       <ul class="check-list" style="--chk-bg:#9a7b0a">  … 丸の色
       <ul class="check-list" style="--chk-fg:#fff">     … チェックの色
   ========================================================= */
.check-list{
  --chk-bg: var(--c-navy);   /* 丸の色 */
  --chk-fg: #fff;            /* チェックの色 */
  --chk-size: 1.25em;        /* 丸の直径 */

  list-style: none;
  margin: 1.2em 0;
  padding-left: 0;
}
/* .rich-text ul の disc / padding-left を打ち消す */
.rich-text ul.check-list,
.rich-text ol.check-list{
  list-style: none;
  padding-left: 0;
}

.check-list > li{
  position: relative;
  padding-left: calc(var(--chk-size) + 0.7em);
  margin-top: 0.6em;
}
.check-list > li:first-child{ margin-top: 0; }
.rich-text .check-list > li + li{ margin-top: 0.6em; }

/* 丸（塗り） */
.check-list > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.95em - var(--chk-size) / 2);  /* 1行目の中心に合わせる */
  width: var(--chk-size);
  height: var(--chk-size);
  background: var(--chk-bg);
  border-radius: 50%;
}
/* チェック（2本の線を45度回して「レ」を作る） */
.check-list > li::after{
  content: "";
  position: absolute;
  left: calc(var(--chk-size) / 2);
  top: 0.95em;
  width: 0.3em;
  height: 0.58em;
  border-right: 2px solid var(--chk-fg);
  border-bottom: 2px solid var(--chk-fg);
  transform: translate(-50%, -62%) rotate(45deg);
}

/* =========================================================
   本文中のリンクボタン（方針PDF・別ページへの導線）
   -----------------------------------------------------------
   <p><a class="btn btn-ghost btn-sm" href="…">環境方針<span class="arrow">→</span></a></p>
   ・.btn / .btn-ghost は style.css、ホバーの動きは micro-interactions.css
     のものをそのまま使うので、サイト全体と同じ挙動になります
   ・.btn-sm は本文中で浮かないよう一回り小さくするための追加クラス
   ========================================================= */
.rich-text a.btn{
  text-decoration: none;   /* .rich-text a の下線を打ち消す */
}
.btn-sm{
  font-size: 0.9375rem;
  padding: calc(0.62em + 1px) calc(1.4em + 1px);
}
/* ボタンだけの段落は前後に少しゆとりを持たせる */
.rich-text .btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.8em;
}

/* =========================================================
   規程・方針ページ用のパーツ
   （個人情報保護方針・情報セキュリティ基本方針 などで使用）
   ========================================================= */

/* ---------- 右寄せ（制定日・署名など） ----------
   HTML に style="text-align:right" を書かずに済むようにクラス化。
   署名部分は少し余白を広めに取り、本文と区別する。 */
.rich-text .text-right{
  text-align: right;
}
.rich-text .signature{
  margin-top: 2em;
  text-align: right;
  color: var(--c-note);
  line-height: 1.7;
}

/* ---------- リストの項目の中に段落を入れる場合 ----------
   <li><p>…</p><p>…</p></li> のときに段落間の余白が消えないように */
.rich-text li > p{ margin: 0; }
.rich-text li > p + p{ margin-top: 0.6em; }
.rich-text li > ul,
.rich-text li > ol{ margin-bottom: 0.5em; }

/* ---------- 「1）2）3）」の入れ子リスト ----------
   <ol class="paren"> と書くと、番号が全角の閉じカッコ付きになる。
   数字は自動採番なので、項目を増減しても番号がズレない。 */
.rich-text ol.paren{
  list-style: none;
  padding-left: 2.4em;
  counter-reset: paren;
}
.rich-text ol.paren > li{
  position: relative;
}
.rich-text ol.paren > li::before{
  counter-increment: paren;
  content: counter(paren) "）";
  position: absolute;
  left: -2.4em;
  width: 2.4em;
  color: var(--c-navy);
  font-weight: 700;
}

/* ---------- 問い合わせ窓口などの囲みボックス ----------
   <div class="info-box"> … </div>
   左に紺のラインを入れた、本文から少し浮かせた囲み。 */
.info-box{
  margin-block: 2em;
  padding: clamp(18px, 3vw, 24px) clamp(18px, 3vw, 28px);
  background: var(--c-bg-section);
  border-left: 3px solid var(--c-navy);
  border-radius: 0 8px 8px 0;
  line-height: 1.7;
}
.info-box > :first-child{ margin-top: 0; }
.info-box .info-box-title{
  margin: 0 0 0.5em;
  font-weight: 700;
  color: var(--c-navy);
}
.rich-text .info-box p{ margin: 0; }

/* =========================================================
   表（table）
   ========================================================= */
/* 横に長い表は .table-wrap で囲むと SP で横スクロールできる */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: 1.5em;
}
.rich-text table,
.tbl{
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.7;
}
.rich-text th,
.rich-text td,
.tbl th,
.tbl td{
  border: 1px solid var(--border, #d0dcea);
  padding: 0.75em 1em;
  text-align: left;
  vertical-align: top;
}
/* 見出しセル（列見出し） */
.rich-text thead th,
.tbl thead th{
  background: var(--c-navy);
  color:#fff;
  font-weight: 700;
  white-space: nowrap;
}
/* 行見出し（左列を見出しにする表） */
.rich-text tbody th,
.tbl th[scope="row"]{
  background: var(--c-bg-section);
  color: var(--c-navy);
  white-space: nowrap;
}
/* 交互の背景色（ゼブラ） */
.rich-text tbody tr:nth-child(even),
.tbl tbody tr:nth-child(even){
  background: #f7f9fc;
}

/* =========================================================
   画像・図版
   ========================================================= */
.rich-text img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
figure{
  margin: 2em 0;
}
figure > img,
figure > .ph{
  display: block;
  width: 100%;
  height: auto;
}
figcaption{
  margin-top: 0.6em;
  font-size: 1rem;
  color: var(--c-note);
  text-align: center;
}
/* 本文中で左右に回り込ませる（PCのみ） */
.img-left,
.img-right{ max-width: 45%; }
.img-left{ float: left;  margin: 0.3em 1.6em 1em 0; }
.img-right{ float: right; margin: 0.3em 0 1em 1.6em; }
.clear{ clear: both; }

/* =========================================================
   ページ下部 CTA（お問い合わせ誘導）
   ========================================================= */
.page-cta{
  background: var(--c-bg-section);
  padding-block: clamp(40px, 6vw, 64px);
  text-align: center;
}
.page-cta h2{
  color: var(--c-navy);
  margin-bottom: 0.4em;
}
.page-cta p{ margin-bottom: 1.5em; }
/* ボタンは style.css の .btn をそのまま利用 */

/* =========================================================
   関連リンク（カード）
   ========================================================= */
.related-links{
  padding-block: clamp(40px, 6vw, 64px);
  background: var(--c-bg);
}
.related-links h2{
  text-align: center;
  margin-bottom: 1.2em;
}
.link-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.link-card a{
  display: flex;
  flex-direction: column;
  height: 100%;
  background:#fff;
  border: 1px solid var(--border, #d0dcea);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-text);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.link-card a:hover{
  box-shadow: 0 10px 30px rgba(0,30,80,0.12);
  transform: translateY(-3px);
  border-color: var(--c-navy);
}
.link-card .ph,
.link-card img{
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border, #d0dcea);
  min-height: 150px;
  width: 100%;
}
.link-card .label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 16px 18px;
  font-weight: 700;
  color: var(--c-navy);
}
.link-card .label::after{
  content: "→";
  color: var(--c-navy);
  flex: none;
  transition: transform .25s ease;
}
.link-card a:hover .label::after{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .link-card a,
  .link-card .label::after{ transition: none; }
  .link-card a:hover{ transform: none; }
  .link-card a:hover .label::after{ transform: none; }   /* 2026-10-21 追加 */
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 820px){
  .link-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  /* ページヘッダー：SPは高さを抑え、横幅が狭いので縦方向のベールに切替 */
  .page-header{
    --ph-min-h: clamp(200px, 46vw, 280px);
  }
  .page-header::before,
  .page-header.is-veil-light::before{
    background: linear-gradient(to top,
                rgba(11,31,58,.88) 0%,
                rgba(11,31,58,.70) 100%);
  }

  /* 本文中の回り込み画像は SP では全幅に */
  .img-left,
  .img-right{
    float: none;
    max-width: 100%;
    margin: 1.5em 0;
  }
  /* 表のセル余白を詰める */
  .rich-text th,
  .rich-text td,
  .tbl th,
  .tbl td{ padding: 0.6em 0.7em; }

  /* 目次：SPは1列に */
  .rich-text .toc ul,
  .toc ul{ grid-template-columns: 1fr; }

  /* 本文中のボタンはSPで横いっぱいに（タップしやすく） */
  .rich-text .btn-row{ flex-direction: column; align-items: stretch; }
  .rich-text .btn-row .btn{ justify-content: center; }
}
@media (max-width: 520px){
  .link-cards{ grid-template-columns: 1fr; }
}