/* ========================================
   integrated.css - integrated.html 専用スタイル（整理・一本化版）
   Goals:
   - ルール重複を排除（ow-dangerの二重定義を解消）
   - NGアイコン（SVG/mask）をテキストに追従（1em基準）に統一
   - 既存の見た目は維持しつつ、崩れやすい固定値(rem)を削減
   ======================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0) Tokens（このCSSだけで完結するための変数）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root{
  /* LINE風（送り手） */
  --line-bubble-bg: #bfeea0;
  --line-text: #1a2332;
  --line-radius: 18px;

  /* 受け手（白） */
  --recv-bubble-bg: #ffffff;
  --recv-bubble-text: #111827;
  --recv-bubble-border: rgba(15, 23, 42, 0.12);

  /* しっぽ */
  --tail-top: 12px;
  --tail-out: 7px;

  /* 吹き出しサイズ（基準） */
  --bubble-pad-y: .95rem;
  --bubble-pad-x: 1.15rem;
  --bubble-font: 1rem;
  --bubble-lh: 1.65;

  /* NG 表示（アイコン・バッジ）共通
     - 1em ＝現在の文字サイズと同じ高さ → フォント変更でも崩れにくい */
  --ng-gap: .45rem;     /* NGと本文の間 */
  --ng-size: 1em;       /* ←固定remをやめ、テキストに追従 */
  --ng-nudge-y: .12em;  /* ←縦位置の微調整（必要ならここだけ調整） */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1) 表示モード切替（data-layer）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.show-both   [data-layer],
body.show-gfi    [data-layer],
body.show-lux    [data-layer],
body.show-check  [data-layer],
body.show-script [data-layer]{
  display: none !important;
}

body.show-both   [data-layer="gfi"],
body.show-both   [data-layer="lux"],
body.show-both   [data-layer="check"],
body.show-gfi    [data-layer="gfi"],
body.show-lux    [data-layer="lux"],
body.show-check  [data-layer="check"],
body.show-script [data-layer="script"]{
  display: block !important;
}

/* 関連ブロック（LUX） */
.lux-related{ display: none !important; }
body.show-both .lux-related,
body.show-lux  .lux-related{ display: block !important; }

/* show-script のときは grid2 / related を非表示 */
body.show-script .grid2,
body.show-script .lux-related{ display: none !important; }

/* 開いているアコーディオンの中身は必ず表示（保険） */
.acc[aria-expanded="true"] .acc-body [data-layer]{
  display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2) Grid（工程の左右カラム）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.grid2{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px){
  .grid2{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3) Layer cards（gfi/lux/check）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-layer="gfi"],
[data-layer="lux"],
[data-layer="check"]{
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

[data-layer="gfi"]{
  background: rgba(22,119,255,.05);
  border-color: rgba(22,119,255,.2);
}
[data-layer="lux"]{
  background: rgba(7,132,198,.05);
  border-color: rgba(7,132,198,.2);
}
[data-layer="check"]{
  background: rgba(245,158,11,.05);
  border-color: rgba(245,158,11,.2);
}

[data-layer] h3.label{ margin: 0 0 .75rem; }
[data-layer] p{ margin: .75rem 0 1rem; }

/* grid2 内：黄色ラベルのみ上下に余白 */
.grid2 h3.label.yellow{ margin: .75rem 0; }

/* 「次工程へ送る一言」の直後の lux-lines だけ調整 */
[data-layer] h3.label + ul.lux-lines{ margin-top: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4) Script card（最短台本）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lux-card{
  background: var(--white);
  border: 1px solid var(--emerald);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: .75rem;
}
.lux-card h4{
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .5rem;
}

/* script（GFI側台本） */
.script-card{
  border: 1px solid hsla(217, 85%, 40%, 0.278);
  background: hsla(217, 59%, 34%, 0.102);
}
.script-card h4{ color: var(--navy); }

/* bold（HTMLは lux-script 自体に bold を付けている前提） */
.lux-script.bold{ font-weight: 800; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5) grid2：通常リスト（✓）※ data-layer直下ul限定
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.grid2 > [data-layer] > ul:not(.lux-lines){
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.grid2 > [data-layer] > ul:not(.lux-lines) > li{
  list-style: none;
  padding-left: 1.3rem;
  position: relative;
}

/* ✓（SVG mask） */
.grid2 > [data-layer] > ul:not(.lux-lines) > li::before{
  content:"";
  position: absolute;
  left: 0;
  top: .25em;
  width: 1rem;
  height: 1rem;
  background: var(--emerald);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M7.667 13.2 4.8 10.333l-1.2 1.2 4.067 4.067L16.4 6.867l-1.2-1.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M7.667 13.2 4.8 10.333l-1.2 1.2 4.067 4.067L16.4 6.867l-1.2-1.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3.5) 運用ルール（要約）: integrated.html 上部
   方針:
   - “rules.html（憲法）への入口”に徹する（長文化しない）
   - base.css の card / card-header / card-body と 100%統一
   - 崩れ防止（長文・タグ・ボタンのはみ出し防止）を内側で担保
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* 閉じた状態（JSで付与） */


/* 要約を閉じた場合の「再表示」バー（JSで #s0 上に挿入） */


/* card-header を使う（base側に定義あり） */


/* lead（主軸宣言）: card-body の中で“短く” */


/* ルール箇条書き（短く読む前提） */


/* NGタグ（5個まで想定） */


/* CTA行：折り返し前提（スマホで縦積みでも崩れない） */


/* 崩れ防止：長文・タグ・ボタンのはみ出しを抑制 */


/* s0: 全て開く/閉じる（inline style を廃止してクラス化） */
.s0-actions{
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin: 1.1rem 0 1.5rem;
}
@media (max-width: 767px){
  .s0-actions{
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: .9rem 0 1.1rem;
  }
  .s0-actions .mini-btn{
    width: 100%;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6) 吹き出し（LINE風）※PC/スマホとも幅100%
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 単発：共通 */
.lux-script{
  width: 100%;
  max-width: 100%;
  margin: .75rem 0;

  background: var(--line-bubble-bg);
  color: var(--line-text);
  border: none;
  border-radius: var(--line-radius);

  padding: var(--bubble-pad-y) var(--bubble-pad-x);
  font-size: var(--bubble-font);
  line-height: var(--bubble-lh);
  font-weight: 400;

  position: relative;
  display: block;
}

/* 送り手：右しっぽ */
.lux-script::after{
  content:"";
  position: absolute;
  right: calc(-1 * var(--tail-out));
  top: var(--tail-top);
  width: 0;
  height: 0;
  border-left: 11px solid var(--line-bubble-bg);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: rotate(-18deg);
}

/* 受け手：白 */
.lux-script.is-recv{
  background: var(--recv-bubble-bg);
  color: var(--recv-bubble-text);
  border: 1px solid var(--recv-bubble-border);
}

/* 受け手：左しっぽ */
.lux-script.is-recv::after{
  right: auto;
  left: calc(-1 * var(--tail-out));
  border-left: 0;
  border-right: 11px solid var(--recv-bubble-bg);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: rotate(18deg);
}

/* 受け手：しっぽ枠 */
.lux-script.is-recv::before{
  content:"";
  position:absolute;
  left: calc(-1 * (var(--tail-out) + 1px));
  top: var(--tail-top);
  width: 0;
  height: 0;
  border-right: 12px solid var(--recv-bubble-border);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transform: rotate(18deg);
  z-index: 0;
}
.lux-script.is-recv > *{
  position: relative;
  z-index: 1;
}

/* 複数：リスト（全幅） */
.lux-lines{
  list-style: none;
  margin: .75rem 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.lux-lines > li{
  width: 100%;
  max-width: 100%;
  margin: 0;

  list-style: none;
  background: var(--line-bubble-bg);
  color: var(--line-text);
  border: none;
  border-radius: var(--line-radius);

  padding: var(--bubble-pad-y) var(--bubble-pad-x);
  font-size: var(--bubble-font);
  line-height: var(--bubble-lh);
  font-weight: 400;

  position: relative;
}

/* 送り手：右しっぽ */
.lux-lines > li::after{
  content:"";
  position: absolute;
  right: calc(-1 * var(--tail-out));
  top: var(--tail-top);
  width: 0;
  height: 0;
  border-left: 11px solid var(--line-bubble-bg);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: rotate(-18deg);
}

/* 受け手：白 */
.lux-lines > li.is-recv{
  background: var(--recv-bubble-bg);
  color: var(--recv-bubble-text);
  border: 1px solid var(--recv-bubble-border);
}

/* 受け手：左しっぽ */
.lux-lines > li.is-recv::after{
  right: auto;
  left: calc(-1 * var(--tail-out));
  border-left: 0;
  border-right: 11px solid var(--recv-bubble-bg);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: rotate(18deg);
}

/* 受け手：しっぽ枠 */
.lux-lines > li.is-recv::before{
  content:"";
  position:absolute;
  left: calc(-1 * (var(--tail-out) + 1px));
  top: var(--tail-top);
  width: 0;
  height: 0;
  border-right: 12px solid var(--recv-bubble-border);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transform: rotate(18deg);
  z-index: 0;
}
.lux-lines > li.is-recv > *{
  position: relative;
  z-index: 1;
}

/* Mobile調整：はみ出し軽減 & 少しだけ小さく */
@media (max-width: 767px){
  :root{
    --bubble-pad-y: .85rem;
    --bubble-pad-x: 1.05rem;
    --bubble-font: .975rem;
    --bubble-lh: 1.6;
  }
  .lux-script::after{ right: -6px; }
  .lux-script.is-recv::after{ left: -6px; }
  .lux-script.is-recv::before{ left: -7px; }

  .lux-lines > li::after{ right: -6px; }
  .lux-lines > li.is-recv::after{ left: -6px; }
  .lux-lines > li.is-recv::before{ left: -7px; }
}

@media (max-width: 375px){
  :root{
    --bubble-pad-y: .8rem;
    --bubble-pad-x: 1rem;
    --bubble-font: .95rem;
    --bubble-lh: 1.55;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6.5) LINE風マーカー（重要フレーズ）
   使い方: <mark class="mk">重要</mark>
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
mark.mk{
  --mk-bg: rgba(255, 235, 59, .55);
  background: linear-gradient(transparent 62%, var(--mk-bg) 62%);
  padding: .08em .22em;
  border-radius: .25em;
  color: inherit;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lux-script mark.mk,
.lux-lines > li mark.mk{
  --mk-bg: rgba(255, 230, 0, .62);
}
.lux-script.is-recv mark.mk,
.lux-lines > li.is-recv mark.mk{
  --mk-bg: rgba(255, 235, 59, .45);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7) Notice / Danger / Related / Hint
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* 重要通知：SVGアイコン版
   - アイコン高さを本文の行高に馴染ませるなら「em」基準もOKだが、
     現状はカード的に見せたいので 26px を維持（崩れにくい） */
/* ========================================
   OKワード
   ======================================== */
.ok{
  background: var(--emerald-light);
  border: 2px solid var(--emerald);
}

/* ========================================
   合格ワード（PASS）
   ======================================== */
.pass{
  background: rgba(7, 132, 198, 0.12); 
  border: 2px solid var(--emerald-dark);
}

/* 合格バッジ */
.pass ul > li::before{
  content: "✔";
}
/* ========================================
   OK / 合格ワード共通
   ======================================== */
.ok,
.pass{
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

/* 見出し余白を揃える */
.ok h3.label,
.pass h3.label{ margin-top: 0; }


/* Labels / Badges（下層共通） */
.label{
  display: inline-flex;
}


/* リスト共通 */
.ok ul,
.pass ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

.ok ul > li,
.pass ul > li{
  display: flex;
  align-items: flex-start;
}

/* バッジ */
.ok ul > li:before{
  height: 1rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--emerald-dark);
  color: var(--emerald-dark);
  font-weight: 800;
  font-size: .7rem;
  border-radius: 999px;
  background: #fff;
  margin-right: var(--ng-gap, .45rem);  
  margin-top: .4em; 
}

.pass ul > li::before{
  height: 1rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald-dark);
  font-weight: 800;
  font-size: .7rem;
  border-radius: 999px;
  margin-right: var(--ng-gap, .45rem);  
  margin-top: .4em; 
}
.pass p,
.danger p{
  font-weight: 600;
}

/* danger（共通） */
.danger{
  background: var(--danger-light);
  border: 2px solid var(--danger);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.danger h3.label{ margin-top: 0; }

.danger ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

/* ── NG表示（danger内）
   - is-ng      : ×アイコン（SVG mask）
   - is-ng-text : NGバッジ（テキスト）
   - どちらも「文字サイズに追従（1em）」で高さ揃え */
.danger ul > li.is-ng,
.danger ul > li.is-ng-text{
  display: flex;
  align-items: flex-start;
}

/* NG: ×アイコン（is-ng） */
.danger ul > li.is-ng::before{
  content: "";
  height: 1rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .7rem;
  background: #ef4444;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.293 5.293 10 10l4.707-4.707 1.414 1.414L11.414 11.414l4.707 4.707-1.414 1.414L10 12.828l-4.707 4.707-1.414-1.414 4.707-4.707-4.707-4.707z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.293 5.293 10 10l4.707-4.707 1.414 1.414L11.414 11.414l4.707 4.707-1.414 1.414L10 12.828l-4.707 4.707-1.414-1.414 4.707-4.707-4.707-4.707z'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-right: var(--ng-gap, .45rem); 
  margin-top: 0.5em; 
}

/* NG: バッジ（is-ng-text） */
.danger ul > li.is-ng-text::before{
  content: "NG";
  height: 1rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #ef4444;
  border-radius: 999px;
  color: #ef4444;
  font-weight: 800;
  font-size: .7rem;
  background: #fff;
  margin-right: var(--ng-gap, .45rem); 
  margin-top: .4em; 
}

.hint{
  font-size: .875rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: .5rem;
}

.related-mount{ margin-top: 1rem; }

.lux-related{
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border);
}
.lux-related h3{
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8) Outdoor Work（頻出アウトワード）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ow-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.2rem;
}
@media (max-width: 840px){
  .ow-grid{ grid-template-columns:1fr; }
}

.ow-divider{
  grid-column:1 / -1;
  padding:.9rem 1rem;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}
.ow-divider-title{ font-weight:900; color:#111827; }
.ow-divider-sub{ font-size:.9rem; color:#4b5563; }
.ow-divider--early{ background:#eff6ff; border-color:#bfdbfe; }
.ow-divider--late{  background:#fff1f2; border-color:#fecdd3; }

.ow-card{
  border-radius:14px;
  padding:1rem;
  color:#111827;
}
.ow-head{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
}
.ow-body{
  display:grid;
  gap:.6rem;
  font-size:.95rem;
  line-height:1.6;
}

/* ── ow-danger（label red + ow-danger）
   以前は「同じセレクタが2回」＋後半 !important で上書きしていたため、
   最初から“ボックス仕様”として一本化（重複を削除） */
.label.ow-danger{
  display:block;                 /* labelのinline-flexを無効化 */
  border-radius:14px;            /* 999pxピルを無効化 */
  padding:.45rem .7rem;
  line-height:1.3;

  background: var(--danger-light);
  border: 1px solid var(--danger);
}

/* ow-danger 内の ul/li のデフォルト余白を殺して縦並びに統一 */
.label.ow-danger ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.label.ow-danger li{
  margin:0;
  padding:0;
  line-height:1.3;
}

/* ow-danger 内：NGバッジ（テキストに追従） */
.label.ow-danger li.is-ng-text{
  display:flex;
  align-items:flex-start;
}
.label.ow-danger li.is-ng-text::before{
  content:"NG";
  block-size: var(--ng-size);
  flex: 0 0 auto;

  padding: 0 .45em;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #ef4444;
  border-radius:999px;
  color:#ef4444;
  font-weight:800;
  font-size:.75em;
  line-height:1;
  background:#fff;

  margin-right: var(--ng-gap);
  transform: translateY(var(--ng-nudge-y));
}

/* base.css の talk-example との競合回避 */
.talk-example{ border-left: none; }

@media (max-width: 640px){
  .ow-card{ padding: .875rem; }
}


/* ========================================
   Map Section（合格基準マップ）index専用
   ======================================== */
.map-container{
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.map-placeholder{
  background: var(--white);
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  border: 2px solid var(--border);
}
.map-placeholder img{
  max-width: 100%;
  height: auto;
  display:block;
  border-radius: 8px;
}

.map-principles{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  text-align:left;
  margin-bottom: 2rem;
}
@media (min-width: 1024px){
  .map-principles{ grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.principle-card{
  background: var(--white);
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 4px solid var(--emerald);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: all .3s ease;
  position: relative;
}
.principle-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(7,132,198,.15);
  border-left-color: var(--emerald-dark);
}
.principle-card h3{
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: .75rem;
  display:flex;
  align-items:center;
  gap: .625rem;
}

/* 先頭の丸アイコン（疑似要素） */
.principle-card h3::before{
  content:"✓";
  width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  color: var(--white);
  border-radius: 50%;
  font-size: .875rem;
  font-weight: 900;
  flex: 0 0 auto;
}
.principle-card p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}
.principle-card strong{
  color: var(--emerald-dark);
  font-weight: 800;
  background: rgba(7,132,198,.1);
  padding: .125rem .25rem;
  border-radius: 3px;
}

/* 2枚目/3枚目の色変化 */
.principle-card:nth-child(2){ border-left-color: var(--danger); }
.principle-card:nth-child(2) h3::before{
  content:"✕";
  background: linear-gradient(135deg, var(--danger) 0%, #DC2626 100%);
}
.principle-card:nth-child(2) strong{
  color: #DC2626;
  background: rgba(239,68,68,.1);
}
.principle-card:nth-child(3){ border-left-color: var(--gfi-accent); }
.principle-card:nth-child(3) h3::before{
  content:"★";
  background: linear-gradient(135deg, var(--gfi-accent) 0%, #08699f 100%);
}
.principle-card:nth-child(3) strong{
  color: #08699f;
  background: rgba(22,119,255,.1);
}

/* スマホ時：#mapを全幅にしたい場合（必要ならON）
   ※不要なら削除OK */
@media (max-width: 767px){
  #map.section{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }
  #map .section-header{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #map .map-container{
    border-radius: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9) ポイント表示（dl/dt/dd）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lux-point{
  margin: 1rem 0 0;
  padding: .875rem 1rem;
  background: rgba(22, 119, 255, 0.05);
  border-left: 3px solid rgba(22, 119, 255, 0.5);
  border-radius: 4px;
}

.lux-point dt{
  font-size: .8rem;
  font-weight: 700;
  color: rgba(22, 119, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin: 0 0 .4rem;
}

.lux-point dd{
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #334155;
}

/* スマホでの調整 */
@media (max-width: 767px){
  .lux-point{
    padding: .75rem .875rem;
    margin: .875rem 0 0;
  }
  
  .lux-point dt{
    font-size: .75rem;
  }
  
  .lux-point dd{
    font-size: .9rem;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Reading Progress + Current Section (rules.php / wisdom.php style)
   - s1 到達後に .is-visible / .visible が付与される
   - 表示位置：ヘッダー直下（--header-h は progress.js が設定）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* Appendix heading label spacing（【別冊】の余白を詰める） */
.acc.sx .acc-head h2 .label,
#app-outwords .acc-head h2 .label{
  padding: .22rem .55rem;
  border-radius: 10px;
  line-height: 1;
}

/* Appendix label spacing fix */
.acc-head h2 .label{
  margin-right: .5rem;
}