@charset "UTF-8";

/* ------------------------------------------------------------------
   合同会社東雲研究所 プライバシーポリシー
   キーカラー: 東雲色 #F8B862（夜明けの空の色）
   ------------------------------------------------------------------ */

:root {
  /* 東雲色とその可読派生 */
  --shinonome: #f8b862;        /* 東雲色。罫線・アクセント面のみ */
  --shinonome-deep: #8a5a12;   /* 白地本文用の濃色派生（対白 5.9:1） */

  /* 夜明け前の藍 */
  --yoake-900: #141c33;
  --yoake-700: #1f2a44;
  --yoake-500: #26314e;

  /* 紙と墨 */
  --kami: #f6f7f9;
  --kami-raised: #ffffff;
  --sumi: #1c1b18;
  --kasumi: #5c6478;           /* 対紙 5.5:1 */
  --rule: #dfe2e8;

  --measure: 38em;
  --pad-x: clamp(1.25rem, 5vw, 3rem);

  --font-mincho: Georgia, "Times New Roman", "Hiragino Mincho ProN",
    "Yu Mincho", YuMincho, "Noto Serif JP", "Songti SC", serif;
  /* 条番号用。Georgia はオールドスタイル数字しか持たず lnum が効かないため，
     等高数字を持つ和文明朝を先頭に置く */
  --font-mincho-jp: "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
    "Noto Serif JP", "Songti SC", "Times New Roman", serif;
  --font-gothic: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP",
    Meiryo, sans-serif;

  color-scheme: light dark;
}

@counter-style maru {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
  suffix: " ";
}

/* ------------------------------------------------------------------
   基本
   ------------------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kami);
  color: var(--sumi);
  font-family: var(--font-gothic);
  font-size: 1.0625rem;
  line-height: 1.95;
  font-feature-settings: "palt" 1;
  line-break: strict;
  overflow-wrap: break-word;
}

a {
  color: var(--shinonome-deep);
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--shinonome-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--yoake-700);
  color: #fff;
  text-decoration: none;
}

.skip:focus {
  left: 0;
}

/* ------------------------------------------------------------------
   地平線 — 読み進めるほど東雲色の光が横に伸びる
   ------------------------------------------------------------------ */

.horizon {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 100;
  background: rgba(31, 42, 68, 0.22);
  pointer-events: none;
}

.horizon-fill {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(1);
  background: linear-gradient(90deg, #d98f2e 0%, var(--shinonome) 55%, #ffd9a0 100%);
}

@supports (animation-timeline: scroll()) {
  .horizon-fill {
    transform: scaleX(0);
    animation: horizon-rise linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes horizon-rise {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------------
   マストヘッド — 夜明け前の空と、地平線から昇る光
   ------------------------------------------------------------------ */

.masthead {
  position: relative;
  /* グラデーションが描画されない環境でも白文字が読めるよう単色を敷く */
  background-color: var(--yoake-700);
  background-image:
    radial-gradient(125% 82% at 50% 119%,
      rgba(248, 184, 98, 0.32) 0%,
      rgba(248, 184, 98, 0.07) 44%,
      rgba(248, 184, 98, 0) 70%),
    linear-gradient(180deg, var(--yoake-900) 0%, var(--yoake-700) 68%, var(--yoake-500) 100%);
  border-bottom: 2px solid var(--shinonome);
  color: #fff;
}

.masthead-inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(4rem, 11vw, 7.5rem) var(--pad-x) clamp(3rem, 8vw, 5rem);
}

.masthead-org {
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
  font-family: var(--font-gothic);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--shinonome);
}

.masthead-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(2.125rem, 7vw, 3.5rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: 0.055em;
}

.masthead-date {
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82);
}

/* ------------------------------------------------------------------
   本体レイアウト
   ------------------------------------------------------------------ */

.shell {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad-x) clamp(4rem, 9vw, 7rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .shell {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }
}

/* ------------------------------------------------------------------
   目次
   ------------------------------------------------------------------ */

.toc {
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (min-width: 62rem) {
  .toc {
    position: sticky;
    top: 2.5rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
}

.toc-heading {
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--kasumi);
}

.toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

@media (min-width: 62rem) {
  .toc-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

.toc-link {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.35rem;
  color: var(--kasumi);
  text-decoration: none;
}

.toc-link:hover {
  color: var(--sumi);
}

.toc-no {
  /* 条番号は引用される識別子なので等高数字で高さを揃える */
  font-family: var(--font-mincho-jp);
  color: var(--shinonome-deep);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
   文書本体
   ------------------------------------------------------------------ */

.doc {
  max-width: var(--measure);
}

.lede {
  margin: 0;
  padding-bottom: 0.5rem;
  font-size: 1.0625rem;
}

.article {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  scroll-margin-top: 2rem;
}

/* 地平線の光 — マストヘッドの意匠を各条の罫線に引き継ぐ */
.article::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  background: linear-gradient(
    90deg,
    var(--shinonome) 0,
    var(--shinonome) 2.5rem,
    var(--rule) 6rem,
    var(--rule) 100%
  );
}

.article-head {
  margin: 0 0 1.1rem;
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 3vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

.article-no {
  margin-right: 0.85em;
  font-family: var(--font-mincho-jp);
  color: var(--shinonome-deep);
  text-decoration: none;
  white-space: nowrap;
}

.article-no:hover {
  text-decoration: underline;
}

.doc p {
  margin: 0 0 1.15rem;
}

.doc p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   条文の項番 — 1. → (1) → ①
   ------------------------------------------------------------------ */

.lv1,
.lv2,
.lv3 {
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.lv1 > li,
.lv2 > li,
.lv3 > li {
  counter-increment: item;
  position: relative;
  margin-bottom: 0.7rem;
}

.lv1 > li:last-child,
.lv2 > li:last-child,
.lv3 > li:last-child {
  margin-bottom: 0;
}

.lv1 > li::before,
.lv2 > li::before,
.lv3 > li::before {
  position: absolute;
  left: 0;
  color: var(--kasumi);
  font-feature-settings: "palt" 0;
}

.lv1 > li {
  padding-left: 2.1em;
}

.lv1 > li::before {
  content: counter(item) ".";
}

.lv2 {
  margin-top: 0.85rem;
}

.lv2 > li {
  padding-left: 2.6em;
}

.lv2 > li::before {
  content: "(" counter(item) ")";
}

.lv3 {
  margin-top: 0.7rem;
}

.lv3 > li {
  padding-left: 1.9em;
}

.lv3 > li::before {
  content: counter(item, maru);
}

/* 単純箇条書き（利用目的など） */
.bullets {
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.bullets > li {
  counter-increment: item;
  position: relative;
  padding-left: 2.1em;
  margin-bottom: 0.55rem;
}

.bullets > li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  color: var(--kasumi);
  font-feature-settings: "palt" 0;
}

/* 安全管理措置の見出し付き項目 */
.measure-name {
  display: block;
  margin-bottom: 0.15rem;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   窓口
   ------------------------------------------------------------------ */

.contact {
  margin: 1.4rem 0;
  padding: clamp(1.4rem, 3.5vw, 1.9rem) clamp(1.4rem, 3.5vw, 2rem);
  background: var(--kami-raised);
  border-left: 3px solid var(--shinonome);
  border-radius: 0 3px 3px 0;
}

.contact-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  margin: 0;
}

.contact-row dt {
  color: var(--kasumi);
  font-size: 0.9375rem;
}

.contact-row dd {
  margin: 0 0 0.7rem;
}

.contact-row dd:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 28rem) {
  .contact-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .contact-row dt {
    font-size: 0.8125rem;
  }
}

.closing {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  text-align: right;
  font-family: var(--font-mincho);
  letter-spacing: 0.2em;
}

/* ------------------------------------------------------------------
   フッター
   ------------------------------------------------------------------ */

.foot {
  border-top: 1px solid var(--rule);
  background: var(--kami-raised);
}

.foot-inner {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--kasumi);
}

.foot p {
  margin: 0;
}

/* ------------------------------------------------------------------
   404
   ------------------------------------------------------------------ */

.notfound {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 8rem) var(--pad-x);
}

.notfound-code {
  margin: 0 0 1.25rem;
  font-family: var(--font-mincho-jp);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--shinonome-deep);
}

.notfound p {
  margin: 0 0 1.75rem;
  max-width: var(--measure);
}

/* ------------------------------------------------------------------
   ダークモード
   ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root {
    --kami: #14161d;
    --kami-raised: #1a1d26;
    --sumi: #e8e6e1;
    --kasumi: #9aa1b4;
    --rule: #2e3342;
    --shinonome-deep: var(--shinonome);
  }

  .masthead {
    border-bottom-color: var(--shinonome);
  }

  .horizon {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* ------------------------------------------------------------------
   モーション設定の尊重
   ------------------------------------------------------------------ */

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

  .horizon-fill {
    transform: scaleX(1);
    animation: none;
  }
}

/* ------------------------------------------------------------------
   印刷
   ------------------------------------------------------------------ */

@page {
  margin: 20mm 18mm;
}

@media print {
  :root {
    --kami: #fff;
    --kami-raised: #fff;
    --sumi: #000;
    --kasumi: #444;
    --rule: #bbb;
    --shinonome-deep: #000;
  }

  .horizon,
  .toc,
  .skip {
    display: none;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.8;
  }

  .masthead {
    background: none;
    color: #000;
    border-bottom: 1.5pt solid #000;
  }

  .masthead-inner {
    padding: 0 0 1.5rem;
  }

  .masthead-org,
  .masthead-date {
    color: #000;
  }

  .shell {
    display: block;
    max-width: none;
    padding: 1.5rem 0 0;
  }

  .doc {
    max-width: none;
  }

  .article {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .article::before {
    background: #999;
  }

  .contact {
    border-left: 1.5pt solid #000;
  }

  .foot-inner {
    padding: 1rem 0 0;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}