/* ==========================================================================
   custom-role.css
   - AsciiDoc の role / class 専用スタイル
   - 表現パーツ・レイアウト部品
   - 他プロジェクトへ流用しやすい
   ========================================================================== */

/* ==== Role variables (merged) ==== */
:root {
  /* 組織ロールの色 */
  --role-organization-700: #c76050;
  --role-organization-500: #e47f6d;
  --role-organization-300: #f2b2a6;
  --text-on-strong: #fff;
  --text-on-light: #111827;

  /* 丸数字（共通トークン） */
  --maru-bg: #000;
  --maru-fg: #fff;

  /* サイズ系：インライン丸数字と howto の丸数字で微調整できるよう分離 */
  --maru-size: 1.4em;        /* インライン用 */
  --maru-size-howto: 1.32em; /* howtoリスト用（あなたの現状値） */

  --maru-font-size-howto: 0.88em;
  --maru-font-weight: 500;   /* インライン既存に合わせる */
  --maru-font-weight-howto: normal;

  --maru-top-offset: 3px;    /* li::before の top */
  --maru-gap: 1.5em;         /* li の padding-left（番号分の余白） */
}

/* ==========================================================================
   機能メニュー（パネルメニュー/レスポンシブグリッド）
   ========================================================================== */

.panel-grid > .content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 1rem
}

/* パネルメニュー：外側のリンク */
.panel-grid > .content > a.flat-panel-link {
  display: block;
  text-decoration: none!important;
  color: inherit;
}

/* パネル本体：左アイコン固定幅 + 右テキスト可変、上寄せ */
.panel-grid .flat-panel {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  align-items: start; /* 上寄せ */
  align-content: center;
  box-sizing: border-box;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  background: #fff;
  padding: 12px 16px;
  min-height: 100px;
  grid-auto-rows: min-content; /* 行の高さをコンテンツにフィット */
  row-gap: 0 16px!important;

  /* ホバー用のトランジション */
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .08s ease, border-color .2s ease, background-color .2s ease;
}

.panel-grid > .content > a.flat-panel-link:hover .flat-panel {
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
  border-color: #d1d5db;
  background-color: #fafafa;
}

/* パネル＞キーボードフォーカス */
.panel-grid > .content > a.flat-panel-link:focus-visible .flat-panel {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* パネル＞左カラム（アイコン） */
.imageblock.panel-icon > .content img,
img.panel-icon,.imageblock.panel-icon {
  width: 40px;    /* アイコンサイズ */
  height: 40px;
  display: block;
  object-fit: contain;
  margin: 0 !important;
  background-color: #fff;
}

.imageblock.panel-icon {
  grid-column: 1;           /* 左列 */
  grid-row: 1 / span 2;     /* 1行目から2行ぶんを占有（=タイトル+説明の高さに合わせる） */
  align-self: center;       /* 縦中央寄せ（stretchを無効化） */
}

/* パネル＞右カラム */
/* タイトル */
.paragraph.panel-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0!important;
}
.paragraph.panel-title p {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #7B47D2;
}

/* 説明文 */
.paragraph.panel-description {
  grid-column: 2;
  grid-row: 2;
  margin: 0!important;
}
.paragraph.panel-description p {
  font-size: 0.8rem;
  margin: 0!important;
  color: #374151;
  line-height: 1.25;
  word-break: break-word;
}
.panel-grid .flat-panel .paragraph p {
  margin: 0!important;
  padding: 0!important;
  border: 0!important;
  display: block;
}

/* パネル＞線対策 */
.panel-grid > .content > a.flat-panel-link,
.panel-grid > .content > a.flat-panel-link * {
  text-decoration: none;
}
a.flat-panel-link * {
  text-decoration: none!important;
  text-decoration-style: none!important;
}


.category-index {
  margin-top: 2rem;
}
.category-index .title {
  margin-top: 1rem;
  font-weight: 700;
  font-size:1.1rem!important;
}


/* ==========================================================================
   画像サイズユーティリティ
   ========================================================================== */

.image-medium img {
  width: 21rem;
}

.image-small img {
  width: 16rem;
}

/* ==========================================================================
   2カラムレイアウト（role）
   ========================================================================== */

.lang-top .exampleblock.layout-2col .content {
  background-color: #fafafa;
}

/* 汎用2カラム：中身が画像でもリストでもOK */
.layout-2col > .content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  align-items: start;
}

.layout-2col > .content > .howto-list {
  padding-left: 1rem;
}

/* はみ出し対策（Grid/Flexで重要） */
.layout-2col > .content > * {
  min-width: 0;
}

/* 画像は親幅に追従 */
.layout-2col img {
  max-width: 100%;
  height: auto;
}

/* 狭い時は1列に落とす */
@media (max-width: 48rem) { /* 768px相当。必要に応じて調整 */
  .layout-2col > .content {
    grid-template-columns: 1fr;
  }
}

/* .doc が狭い時は1列に落とす（画面幅@media (max-width: 48rem) ではなく .doc の幅で判定） */
@container doc (max-width: 48rem) {
  .layout-2col > .content {
    grid-template-columns: 1fr;
  }
}

/* 左を広く：2:1 */
.layout-2col--2-1 > .content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 48rem) {
  .layout-2col--2-1 > .content {
    grid-template-columns: 1fr;
  }
}

/* 右を広く：1:2 */
.layout-2col--1-2 > .content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 48rem) {
  .layout-2col--1-2 > .content {
    grid-template-columns: 1fr;
  }
}

/* table-col2（2列テーブル）を小画面で1列表示にする */

table.table-2col{
  width:100%!important;
}

@media (max-width: 640px) {
  /* テーブルを“テーブル”として扱わず縦積みにする */
  table.table-2col,
  table.table-2col tbody,
  table.table-2col tr,
  table.table-2col td,
  table.table-2col th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* colgroup の 50% 指定を無効化（Asciidoctorが出す幅指定対策） */
  table.table-2col colgroup {
    display: none !important;
  }

  /* キャプションも横幅100%に */
  table.table-2col caption,
  table.table-2col .title { /* テーマによっては caption ではなく .title の場合あり */
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 余白（好みで） */
  table.table-2col td {
    padding: .25rem 0;
  }
}


/* ==========================================================================
   tab-dl / indent（role）
   ========================================================================== */

.tab-dl dt {
  margin-top: 1rem;
}
.tab-dl dd+dt {
  margin-top: 2rem!important;
}

/* インデント（廃止予定）*/
.indent > p,.indent > ul ,.indent > img,.indent > div,.indent > ol ,.indent > dl, .indent > h4 {
  margin-left: 1.5rem!important;
}
.indent > h4 {
  margin-left: 1.5rem!important;
}

dd+dt.hdlist1 {
  margin-top: 1rem!important;
}

/* ==========================================================================
   手順・注釈・チェック（role）
   ========================================================================== */

/* olistの詳細部分 */
.step-detail,
.step-note {
  margin-left: 0;
 /* margin-left: -1em;
  padding-left:1em;
  border-left:3px solid #efefef;*/
}
.point-detail{
  margin-left: 1.5rem;
}

@media print {
  .step-detail,
  .step-note {
    margin-left: 2em; /* PDFでは少し詰める、なども可能 */
  }
}

/* ✓チェックマーク */
.check ul  {
  margin: 0;
  padding-left: 0;
  margin-top: 1rem!important;
}
.check ul li {
  position: relative;
  padding-left: 1rem;

  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: bold;
}
.check ul li::before {
  content: "";
  position: absolute;
  left: -0.25rem;
  top: 0.75em;
  inline-size: 1.5em;  /* 横幅（論理プロパティ） */
  block-size: 1.5em;   /* 高さ（論理プロパティ） */
  transform: translateY(-50%);    /* 縦中央揃え */
  background: url("../../ja/_images/icon-check.svg") no-repeat center / 0.75rem 0.75rem;
  background-size: 0.8rem;
  font-weight: bold;
}



/* 注釈 */
.remarks  {
  margin: 1rem 0 0 0!important;
}
.remarks ul {
  padding-left: 0em;
}
.remarks ul li {
  font-size: .7rem;
  line-height: 1.1;
  list-style: none ;
  padding: 0 .1rem;
  color:#555
}
.remarks ul li::marker {
  content: "- ";
}
.paragraph.remarks {
  position: relative;
  padding-left: 1.1em;
}
.paragraph.remarks li {
  list-style: none;
}

/* 手順のリスト：親 */


.howto-list > ol {
  font-weight: 700;
}
.howto-list > ol td,.howto-list > ol ul {
  font-weight: 400;
}
/* 手順のリスト：番号 */
.howto-list > ol > li::marker {
  font-weight: bold;
}

/* 手順のリスト：タイトル */
.howto-list .title {
  font-style: normal!important;
}

/* 手順のリスト：入れ子の ul/ol 用 */
/* ただし .link-list / .link-list--blank 配下は除外 */
.howto-list > ol li :is(ul, ol):not(.link-list *, .link-list--blank *) {
  font-weight: 400; /* normal */
  padding-left: 1rem;
}
.howto-list ol li .paragraph p,.howto-list dl dd {
  font-weight: normal!important;
}

.layout-2col ol.arabic,
.layout-2col .point-detail, .layout-2col--1-2 .point-detail,.layout-2col--2-1 .point-detail {
  padding-left: 0rem!important;
  margin-left: 0!important;
}
.layout-2col .howto-list ol {
  font-weight:400;
}

/* ==========================================================================
   リンク用リスト（role）
   ========================================================================== */

/* リンク用リスト（外部リンクは.link-list--blank） */
.link-list ul,.link-list--blank ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.link-list ul li ,.link-list--blank ul li{
  position: relative;
  padding-left: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1.2;
}
.link-list ul li a,.link-list--blank ul li a {
  text-decoration-line:none!important;
}
.link-list ul li a:hover,.link-list--blank ul li a:hover {
  text-decoration-style:solid!important;
  text-decoration-line:underline!important;
}
.link-list ul li::before,.link-list--blank ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  /*padding-left:0;*/
  inline-size: 0.85em;         /* 横幅（論理プロパティ） */
  block-size: 1em;             /* 高さ（論理プロパティ） */
  /* transform: translateY(-50%);  縦中央揃え */
  background: url("../../ja/_images/icon-link-arrow.svg") no-repeat center / 1em 1em;
  background-size: 8px;
}
/* 外部リンク（別窓マーク） */
.link-list--blank ul li a::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 0.3em;
  background: url("../../ja/_images/icon-taget-blank.svg") no-repeat center / contain;
}

.link-list.link-outline {
  font-size: 0.78rem;
  background-color:#efefef;
  margin:1rem 0;
  border-radius: 10px;
  padding:1rem 1rem;
}


/* ==========================================================================
   番号付き h3（role）
   ========================================================================== */

/* カウンタの初期化（h3 用） */
body {
  counter-reset: h3counter;
}

.num-h3 > h3::before {
  counter-increment: h3counter;
  content: counter(h3counter) ". ";
  margin-right: 0.25em;
  font-size: 1.1rem;
  font-weight: bold;
  color: #666;
}

/* 番号付きh3 の直後に howto-list が来た場合だけインデントをつける */
.num-h3 > h3 + .howto-list,
.num-h3 + .howto-list {
  margin-left: 1.25rem;
  margin-top: 0.6rem;
}

/* ==========================================================================
   定義（丸数字の説明）/ callout（role）
   ========================================================================== */

.callout dl dd{
  margin-left: 1.5rem!important;
  line-height: 1.6em;
}
.callout dl dd dl dd {
  margin-left: 0!important;
}

/* 定義：1段ネスト（callout の中の callout） */
.callout .callout dl {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.callout .callout dl dd {
  margin-left: 1.5rem !important;
}

/* ==========================================================================
   丸数字（role）
   ========================================================================== */

.num-maru {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--maru-size);
  height: var(--maru-size);
  margin: 0 0.1em;
  color: var(--maru-fg);
  font-weight: var(--maru-font-weight);
  font-size: 1em;
  font-variant-numeric: tabular-nums;
  line-height: 1.4em;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--maru-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 丸数字用色スタイル */
/* 丸数字：黒 */
.maru-black {
  --maru-bg: #000;
  --maru-fg: #fff;
}

/* 無効状態時の色 */
.maru-disabled {
  --maru-bg: #666;
  --maru-fg: #fff;
}

/* 丸数字：サブ（情報色） */
.maru-sub {
  --maru-bg: #9279ac; /*#5C78A0*/
  --maru-fg: #fff;
}
.maru-violet {
  --maru-bg: #7B47D2;
  --maru-fg: #fff;
}

/* 丸数字：アウトライン（①） */
.maru-outline {
  display: inline-block;
  --maru-bg: #fff;
  --maru-fg: #333;/*48217A*/
  border: 1.5px solid #333;
}

/* 丸数字リストスタイル*/
/* howto 丸数字リスト（共通） */
.olist.howto-maru > ol > li > p {
  font-weight: bold;
}
.olist.howto-maru.maru-violet> ol > li > p {
  font-weight: bold; /* 使用しているか確認のうえ削除 */
}
.olist.howto-maru > ol {
  list-style: none;
  counter-reset: howto-circle;
  padding-left: 0;
  line-height: 1.5;
}
.olist.howto-maru > ol > li {
  counter-increment: howto-circle;
  position: relative;
  padding-left: var(--maru-gap);
}

/* 疑似要素で丸数字を描画（maru-* の変数を利用） */
.olist.howto-maru > ol > li::before {
  content: counter(howto-circle);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--maru-size-howto);
  height: var(--maru-size-howto);
  border-radius: 50%;

  background: var(--maru-bg);
  color: var(--maru-fg);

  font-size: var(--maru-font-size-howto);
  font-weight: var(--maru-font-weight-howto);
  line-height: 1;
  font-variant-numeric: tabular-nums;

  /* 配置 */
  position: absolute;
  left: 0;
  top: var(--maru-top-offset);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* テーブルに丸数字を入れたときの指定 */
/* セル外へのはみ出し防止 */
.tableblock td {
  overflow: hidden;
  position: relative;
}

/* 丸数字の共通（崩れ防止） */
.tableblock td .num-maru {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 無効状態の行の指定（テキストに付けた role（=class）をセルに拡張）
   - “枠組み”だけ定義（色は別ブロック）
*/
.tableblock td .bg-disabled,
.tableblock td .bg-red {
  display: block;
  width: calc(100% + 2rem);  /* td padding 分を足す */
  margin: -1rem;             /* td padding を相殺 */
  padding: 1rem;             /* 元の余白を再現 */
}

/* 色バリエーション（disabled は現状どおり #efefef） */
.tableblock td .bg-disabled {
  color: #666;
  background: #efefef;
}

/* （将来追加用：未定義のredなど）
.tableblock td .bg-red {
  color: #fff;
  background: #e53935;
}
*/

/* 無効状態の結合セル（rowspan）塗りつぶし */
.tableblock td[rowspan]:has(.bg-disabled) {
  background: #efefef;
}

.tableblock td[rowspan] .bg-disabled {
  display: flex;
  align-items: center;
  height: 100%;
}

/* maru-disabled の丸数字が “セル内で最初” のときだけセル面を塗る */
.tableblock td .num-maru.maru-disabled:first-of-type {
  box-shadow: 0 0 0 9999px #efefef;
}

/* 2つ目以降は塗らない（2つ以上丸数字がある場合に1つめの背景が消えるから）*/
.tableblock td .num-maru.maru-disabled:not(:first-of-type) {
  box-shadow: none;
}


/* ==========================================================================
   対象ロール：role / role-badge（role）
   ========================================================================== */

.role dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr; /* 左列は用語に合わせる、右列は残り幅 */
  column-gap: 0.3rem;
  row-gap: 0.75rem;
  align-items: baseline;     /* start行を上揃え（画像が複数で高さが出るため） */
  background-color: #efefef;
  padding: 0 0 10px 15px;
  border-radius: 8px;
}
.role dl dt {
  font-size: small;
  font-weight: normal;
  color: #1E1E1E;
  line-height: 1;
  grid-column: 1
}
.role dl dd { grid-column: 2; }
.role dl dt,.role dl dd  {
  margin: 0;
  padding: 0;
}
.role dl dd img {
  display: block;
  max-width: 100%;    /* コンテナに収める */
  object-fit: contain;
  width: 95px;
  padding: 0; margin: 0;
}

/* 対象ロール：バッジ */
.role-badge {
  --bg: #ccc; --fg: #fff; --radius: 3px; --px: 10px; --py: 4px; --fs: 12px; --fw: 500;
  display: inline-block; background: var(--bg); color: var(--fg);
  border-radius: var(--radius); padding: var(--py) var(--px);
  font-size: var(--fs); font-weight: var(--fw); line-height: 1; white-space: nowrap;
}

/* 組織ロール × 濃淡 */
.role-badge.org.owner   { --bg: var(--role-organization-700); --fg: var(--text-on-strong); }
.role-badge.org.manager { --bg: var(--role-organization-500); --fg: var(--text-on-strong); }
.role-badge.org.member  { --bg: var(--role-organization-300); --fg: var(--text-on-light);  }

@media (max-width: 600px) {
  .role dl {
    grid-template-columns: 1fr;    /* 1列に切り替え */
    column-gap: 0;                 /* 不要なら0に */
    align-items: start;            /* baselineの影響を避ける */
    padding: 10px 12px;            /* パディング微調整は好みで */
  }
  .role dl dt,
  .role dl dd {
    grid-column: 1 / -1;           /* 同じ列（全幅）に並べる */
  }
  /* もし行間を詰めたい/広げたいなら調整 */
  .role dl dt { margin-bottom: 0.25rem; }
  .role dl dd { margin-bottom: 0.75rem; }
}

/* ==========================================================================
   テーブル：シンプルバージョン / color ユーティリティ（role）
   ========================================================================== */

   /* 画像セルだけ横中央 */
.tableblock td.img-center {
  text-align: center;
}

/* 画像の下に余計な余白が出る場合 */
.tableblock td.img-center > p {
  margin: 0;
}

table.table-basic  {
  width: 100% !important;
  table-layout: fixed;
}

.table-basic th {
  /*background-color:#F7F3FC;*/
  background-color: #fafafa;
}
.table-basic th p {
  color: #000;
  font-weight: bold;
}

table.table-basic thead tr th  {
  color: #000!important;
  font-weight: bold;
  text-align: center!important;
  border-width: 1px!important;
}

table.table-ui  {
  width: 100% !important;
  table-layout: fixed;
}

table.table-ui th {
  background-color: #fafafa;
  text-align: center;
  font-weight:400!important;
  font-size:.75rem;
}
table.table-ui td,
table.table-ui th {
  vertical-align: middle!important;
}

table.table-ui td > p,
table.table-ui th > p {
  margin: 0;
}
table.table-ui thead tr th  {
  color: #000!important;
  text-align: center!important;
  border-width: 1px!important;
  padding:0!important;
}
table.table-ui th p {
  color: #000;
  font-weight: bold;
}

/* ==========================================================================
   カラー
   ========================================================================== */
/* 共通カラープリセット */
.color-violet {
  color: #7B47D2
}

/* ProVisionaire Cloud用 */
.color-room-condition {
  color: #4EB17D!important;
}

.color-room-view {
  color: #30A1F2!important;
}

.color-room-design {
  color: #E97635!important;
}

.color-room-actions {
  color: #8F6ACC!important;
}

.color-gray {
  color: #8b8b8b!important;
}

/* リンクにカラークラスを使った場合 */
/* (A) a側の下線を消す：対象色クラスが含まれるリンクだけ */
.doc a:has(.color-room-design),
.doc a:has(.color-room-condition),
.doc a:has(.color-room-view),
.doc a:has(.color-room-actions) {
  text-decoration: none !important;
}

/* (B) 下線は色クラス側 */
.doc a:has(.color-room-design)    .color-room-design,
.doc a:has(.color-room-condition) .color-room-condition,
.doc a:has(.color-room-view)      .color-room-view,
.doc a:has(.color-room-actions)   .color-room-actions {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.01em;
}

/* (C) hover/focusで見た目を強調（色は変えない） */
.doc a:has(.color-room-design):hover    .color-room-design,
.doc a:has(.color-room-condition):hover .color-room-condition,
.doc a:has(.color-room-view):hover      .color-room-view,
.doc a:has(.color-room-actions):hover   .color-room-actions,
.doc a:has(.color-room-design):focus-visible    .color-room-design,
.doc a:has(.color-room-condition):focus-visible .color-room-condition,
.doc a:has(.color-room-view):focus-visible      .color-room-view,
.doc a:has(.color-room-actions):focus-visible   .color-room-actions {
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.14em;
}


/* 重要箇所：蛍光ペン風（デフォルト＝黄色） */
.marker {
  --marker-color: rgba(255, 235, 59, 0.65); /* 黄（半透明） */
  --marker-height: 0.55em;                 /* 帯の太さ */
  --marker-offset: 0.12em;                 /* 文字下からの位置 */

  background-image: linear-gradient(
    transparent calc(100% - var(--marker-height)),
    var(--marker-color) 0
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.08em;
  border-radius: 0.08em;
  box-decoration-break: clone; /* 改行時に帯を自然につなぐ */
  -webkit-box-decoration-break: clone;
}


.highlight-box dd {
  margin:5px 0 15px 3px!important;
  border-left: 3px solid #666;
  padding: 3px 5px 17px 15px;
  background-color: #fafafa;
  border-radius: 0px;
}

.highlight-box dd li::marker {
  color: #8F6ACC;
}

/* =========================================================
   常時展開するカテゴリ（PC/モバイル両対応・安全版）
   - 「navが開いている状態」のときにだけ配下リストを強制表示
   - transform / visibility / opacity は触らない（モバイル開閉と衝突するため）
   ========================================================= */

/* 1) PC（nav常時表示前提）：そのまま強制展開してOK */
@media (min-width: 1024px) {
  .nav-panel-menu.is-active .nav-menu
    li.nav-item:has(> a.nav-link:is(
      [href$="introduction.html"],
      [href$="plan-creation.html"],
      [href$="advanced-features.html"],
      [href$="appendix.html"]
    )) > ul.nav-list {
      display: block !important;
      max-height: none !important;
      height: auto !important;
      overflow: visible !important;
  }

  /* 章見出し化：トグル非表示（PCも） */
  .nav-panel-menu.is-active .nav-menu
    li.nav-item:has(> a.nav-link:is(
      [href$="introduction.html"],
      [href$="plan-creation.html"],
      [href$="advanced-features.html"],
      [href$="appendix.html"]
    )) > button.nav-item-toggle {
      display: none;
  }

  /* 章リンクの見た目（任意） */
  .nav-panel-menu.is-active .nav-menu
    li.nav-item:has(> a.nav-link:is(
      [href$="introduction.html"],
      [href$="plan-creation.html"],
      [href$="advanced-features.html"],
      [href$="appendix.html"]
    )) > a.nav-link {
      font-weight: 600;
      color: #222;
  }
}

/* 2) モバイル（nav開閉あり）：開いている間だけ強制展開 */
@media (max-width: 1023.98px) {
  html.is-clipped--nav .nav-panel-menu.is-active .nav-menu
    li.nav-item:has(> a.nav-link:is(
      [href$="introduction.html"],
      [href$="plan-creation.html"],
      [href$="advanced-features.html"],
      [href$="appendix.html"]
    )) > ul.nav-list {
      display: block !important;
      max-height: none !important;
      height: auto !important;
      overflow: visible !important;
  }

  html.is-clipped--nav .nav-panel-menu.is-active .nav-menu
    li.nav-item:has(> a.nav-link:is(
      [href$="introduction.html"],
      [href$="plan-creation.html"],
      [href$="advanced-features.html"],
      [href$="appendix.html"]
    )) > button.nav-item-toggle {
      display: none;
  }

  html.is-clipped--nav .nav-panel-menu.is-active .nav-menu
    li.nav-item:has(> a.nav-link:is(
      [href$="introduction.html"],
      [href$="plan-creation.html"],
      [href$="advanced-features.html"],
      [href$="appendix.html"]
    )) > a.nav-link {
      font-weight: 600;
      color: #222;
  }
}


/* =========
   Flow SVG (shared styles)
   ========= */

svg.flow {
  font-family: var(--body-font-family, system-ui, -apple-system, "Segoe UI", Roboto,
                   "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif);
}

/* Step fills */
svg.flow .flow-step {
  fill: var(--flow-step-fill, #757575);
}

svg.flow.is-step-1 .flow-step[data-step="1"],
svg.flow.is-step-2 .flow-step[data-step="2"],
svg.flow.is-step-3 .flow-step[data-step="3"],
svg.flow.is-step-4 .flow-step[data-step="4"] {
  fill: var(--flow-step-active-fill, #1e1e1e);
}

/* Step texts */
svg.flow .flow-label {
  fill: var(--flow-step-text, #fff);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.019em;
}

svg.flow .flow-num {
  fill: var(--flow-step-text, #fff);
  font-size: 36px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.019em;
}

/* Loop lines */
svg.flow .flow-loop {
  fill: none;
  stroke: var(--flow-loop-stroke, #b3b3b3);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Loop label (white background + icon + text) */
svg.flow .flow-loop-label-bg {
  fill: var(--flow-loop-label-bg, #fff);
  stroke: var(--flow-loop-label-border, #b3b3b3);
  stroke-width: 0;
  width: 300px;
}
svg.flow .flow-loop-label{
  text-align: center;
}

svg.flow .flow-loop-icon {
  fill: none;
  stroke: var(--flow-loop-icon-stroke, rgba(0,0,0,.85));
  stroke-width: 1;
}

svg.flow .flow-loop-text {
  fill: var(--flow-loop-text, rgba(0,0,0,.8));
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.011em;
}

/* Optional: keep stroke thickness when scaled */
svg.flow .flow-loop,
svg.flow .flow-loop-icon {
  vector-effect: non-scaling-stroke;
}
/* ベース：全部通常色 */
.flow-wrap svg.flow .flow-step {
  fill: var(--flow-step-fill, #757575);
}

/* 文字は白（工程内） */
.flow-wrap svg.flow .flow-label,
.flow-wrap svg.flow .flow-num {
  fill: var(--flow-step-text, #fff);
}

.flow-wrap.is-off svg.flow .flow-step {
  fill: var(--flow-step-fill, #757575);
}



/* =========================================================
   Room Planner用
   ========================================================= */
.flow-badge {
  display: block;
  margin: 0;
  padding: 10px 15px;
  /*border-radius: 8px;*/
  width:100%;
}
.flow-badge.app {
  color:#8F6ACC;
  font-size:1rem;
  font-weight:bold;
  text-align:center;
  border-bottom:2px solid #8F6ACC;
}