/* ==========================================
   Headings UI (bd1120 v4)  ※h2〜h4
   - デフォルト：タグ直付け
   - 代替：クラスで選択（hd--xxx）
   - .bg での色反転は行わない
   - サイズ/weight は core.css の値を使用
========================================== */

/* 規定の上下余白（トークン準拠） */
h2 { margin-block-start: var(--sp-L); }
h3 { margin-block-start: var(--sp-MS); }
h4 { margin-block-start: var(--sp-S); }


/* ------------------------------
   デフォルト（クラス不要）
------------------------------ */

/* h2：左ボーダー（バー見出し） */
h2{
  text-align: center;
  position: relative;
  padding-block-end: .9em;
}
h2::after{
  content: "";
  display: block;
  inline-size: 6rem; block-size: .4rem;
  margin: .9em auto 0;
  border-radius: .2rem;
  background: var(--colr-key);
}

/* h3：テキスト幅アンダーライン */
h3 {
  padding-block-end: .3em;
  background:
    linear-gradient(var(--colr-key), var(--colr-key)) 0 100% / 100% .1rem no-repeat;
  color: var(--colr-text-base);
}

/* h4：装飾なし（余白のみ） */
h4{
  text-align: left;
}

section p{margin-block-start: var(--sp-S);}

section img {
  display: block;
  inline-size: 100%;  /* 横幅いっぱい */
  height: auto;       /* 高さは元画像比率に従う */
}

/* 改行 */
br.pc{display: none;}
br.tb-pc{display: none;}
br.tb{display: none;}
@media(min-width: 601px){
  br.sp{display: none;}
  br.tb-pc{display: block;}
  br.tb{display: block;}
  br.sp-pc{display: none;}
}
@media(min-width: 901px){
  br.tb-sp{display: none;}
  br.tb{display: none;}
  br.pc{display: block;}
  br.sp-pc{display: block;}
}

/* 揃え：中央→左変換 */
.left-sp-tb{text-align: left !important;}
.left-sp{text-align: left !important;}
@media(min-width: 601px){
  .left-sp{text-align: center !important;}
}
@media(min-width: 901px){
  .left-sp-tb{text-align: center !important;}
}


/* ------------------------------
   代替パターン（必要時のみ付与）
   任意の見出しタグに使える汎用クラス
------------------------------ */


/* 左ボーダー（任意タグ用） */
.hd-barL{
  position: relative;
  padding-inline-start: 1.2em;
  border-inline-start: .4rem solid var(--colr-key);
}

/* テキスト幅アンダーライン（任意タグ用。h3デフォルトと同義） */
.hd-uline{
  display: inline-block;
  padding-block-end: .3em;
  background:
    linear-gradient(currentColor,currentColor) 0 100% / 100% .16rem no-repeat;
}

/* 左バレット（h3の別パターン） */
.hd-bullet{
  position: relative;
  padding-inline-start: 1.8em;
}
.hd-bullet::before{
  content:"";
  position:absolute; inset-inline-start:0; top: .1em;
  inline-size: 1.1em; block-size: 1.1em; border-radius:50%;
  background-color: var(--colr-key);
}

/* （任意）全幅の下線が欲しいとき用 */
.hd-accent::after{
  content: "";
  display: block;
  inline-size: 6rem; block-size: .4rem;
  margin: 1em auto 0;
  border-radius: .2rem;
  background: var(--colr-key);
}




/* 角丸ユニット（どんな高さでもピル型） */
.round-pill{ border-radius: 100vmax; } /* 9999px よりも確実で汎用 */





/* ==========================================
   テキスト装飾ユーティリティ
========================================== */
.al-right{text-align: right;}
.al-left{text-align-last: left;}
.al-center{text-align: center;}

/* 任意ブロックだけ明朝にしたい時に */
.min{ font-family: var(--font-serif); }
/* 逆に確実に本文系へ戻す */
.gos{ font-family: var(--font-body); }


em{
  font-style: inherit;
  color: red;
}

form em{
  display: inline-block; margin-inline: .5rem;
  font-size: .8em;
}

/* :::::: em-based highlight :::::: */
em.hl,
.hl em{
  --mark-h: 45%; /* 行の高さに対する塗りの厚み（%）。30–55%で調整が良い */
  background:
    linear-gradient(to top, var(--mark-color) var(--mark-h), transparent var(--mark-h));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; /* 折返しでも途切れない */
  color: inherit;
}


/* アンカー内で使う場合の軽い調整（必要なら） */
a em.hl, .hl a em{
  text-decoration: none;  /* リンクの下線が重なる場合は消す */
}

.fix-bold{
  font-weight: 700;
}


/* margin, padding 0 */
.mar-t0{ margin-block-start: 0 !important;}
.mar-b0{ margin-block-end: 0 !important;}
.mar-l0{ margin-inline-start: 0 !important;}
.mar-r0{ margin-inline-end: 0 !important;}

.pad-t0{ padding-block-start: 0 !important;}
.pad-b0{ padding-block-end: 0 !important;}
.pad-l0{ padding-inline-start: 0 !important;}
.pad-r0{ padding-inline-end: 0 !important;}


/* width */
.w0p{width:0}
.w333p{width:33.333%}.w666p{width:66.666%}
/* 1%刻み 幅ユーティリティ */
.w1p{width:1%}.w2p{width:2%}.w3p{width:3%}.w4p{width:4%}.w5p{width:5%}.w6p{width:6%}.w7p{width:7%}.w8p{width:8%}.w9p{width:9%}.w10p{width:10%}
.w11p{width:11%}.w12p{width:12%}.w13p{width:13%}.w14p{width:14%}.w15p{width:15%}.w16p{width:16%}.w17p{width:17%}.w18p{width:18%}.w19p{width:19%}.w20p{width:20%}
.w21p{width:21%}.w22p{width:22%}.w23p{width:23%}.w24p{width:24%}.w25p{width:25%}.w26p{width:26%}.w27p{width:27%}.w28p{width:28%}.w29p{width:29%}.w30p{width:30%}
.w31p{width:31%}.w32p{width:32%}.w33p{width:33%}.w34p{width:34%}.w35p{width:35%}.w36p{width:36%}.w37p{width:37%}.w38p{width:38%}.w39p{width:39%}.w40p{width:40%}
.w41p{width:41%}.w42p{width:42%}.w43p{width:43%}.w44p{width:44%}.w45p{width:45%}.w46p{width:46%}.w47p{width:47%}.w48p{width:48%}.w49p{width:49%}.w50p{width:50%}
.w51p{width:51%}.w52p{width:52%}.w53p{width:53%}.w54p{width:54%}.w55p{width:55%}.w56p{width:56%}.w57p{width:57%}.w58p{width:58%}.w59p{width:59%}.w60p{width:60%}
.w61p{width:61%}.w62p{width:62%}.w63p{width:63%}.w64p{width:64%}.w65p{width:65%}.w66p{width:66%}.w67p{width:67%}.w68p{width:68%}.w69p{width:69%}.w70p{width:70%}
.w71p{width:71%}.w72p{width:72%}.w73p{width:73%}.w74p{width:74%}.w75p{width:75%}.w76p{width:76%}.w77p{width:77%}.w78p{width:78%}.w79p{width:79%}.w80p{width:80%}
.w81p{width:81%}.w82p{width:82%}.w83p{width:83%}.w84p{width:84%}.w85p{width:85%}.w86p{width:86%}.w87p{width:87%}.w88p{width:88%}.w89p{width:89%}.w90p{width:90%}
.w91p{width:91%}.w92p{width:92%}.w93p{width:93%}.w94p{width:94%}.w95p{width:95%}.w96p{width:96%}.w97p{width:97%}.w98p{width:98%}.w99p{width:99%}.w100p{width:100%}





/* ==========================================
   Lists utility – .list
   resetを上書きして“普通のリスト”に戻す
========================================== */
.list{
  --list-indent: 1.6em;              /* マーカーぶんの字下げ */
  --list-gap: var(--sp-SS);           /* 行間（li間マージン） */
  --list-marker-color: var(--colr-bk);
}

/* ベース（UL/OLともに有効） */
ul.list ,
ol.list { padding-inline-start: var(--list-indent); margin: 1em 0; }
.list li + li{ margin-block-start: var(--list-gap); }

/* マーカー種類（UL/OLの標準） */
ul.list { list-style: disc outside; }
ol.list { list-style: decimal outside; }

/* ネスト時のスタイル（慣例値） */
ul.list  ul{ list-style: circle; }
ul.list  ul ul{ list-style: square; }
ol.list  ol{ list-style: lower-alpha; }
ol.list  ol ol{ list-style: lower-roman; }

/* マーカー色だけ変えたいとき */
.list.marker li::marker{ color: var(--list-marker-color); }
.list.marker-key{ --list-marker-color: var(--colr-key); }

/* “文字内側”に入れたい（行頭揃え用） */
ul.list.in ,
ol.list.in {
  list-style-position: inside;
  padding-inline-start: 0;
}

/* 余白の微調整バリエーション */
.list.tight  li + li{ margin-block-start: var(--sp-SS); }
.list.loose  li + li{ margin-block-start: var(--sp-MS); }

/* ==========================================
   .list.inl – バレット保持のインライン並び
   - UL: ・（disc）相当を疑似要素で描画
   - OL: 連番をCSSカウンタで描画
   - 各アイテムは inline-block（途中改行しても“ぶら下がり”しやすい）
   - アイテム間の余白は --list-indent を使用
========================================== */

/* 共通（UL/OL） */
ul.list.inl,
ol.list.inl{
  list-style: none;               /* 既定のマーカーは無効化 */
  padding-inline-start: .3em;
  margin: 1em 0;
}

.list.inl li{
  position: relative;
  display: inline-block;          /* 行内で横並び＋内部はブロック整形 */
  vertical-align: top;
  margin-inline-end: var(--list-indent);
  padding-inline-start: .9em;    /* 疑似マーカーの分だけ字下げ */
  /* 長い語でのはみ出し対策（任意） */
  overflow-wrap: anywhere;
}
.list.inl li:last-child{ margin-inline-end: 0; }

/* --- UL: バレット（disc相当） --- */
ul.list.inl li::before{
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  top: 0.2em;                    /* ベースライン合わせ微調整 */
  line-height: 1;
  color: var(--list-marker-color);
  font-weight: 700;               /* 視認性を少し高める（任意） */
}

/* --- OL: 連番表示（1. 2. 3. …） --- */
ol.list.inl{ counter-reset: inl; }
ol.list.inl li::before{
  counter-increment: inl;
  content: counter(inl) ".";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  line-height: 1;
  color: var(--list-marker-color);
}

/* 余白バリエーション（既存ルールと整合） */
.list.inl.tight  li{ margin-inline-end: var(--sp-SS); }
.list.inl.loose  li{ margin-inline-end: var(--sp-MS); }





/* ==========================================
   .hyou – 表（モダン・最小罫線）
   - フォントサイズは継承
   - th は太字
   - 縦列 th（tbody 内）は左/上寄せ（既定）
   - 横列 th（thead 内）は中央/中央
   - .hyou.th-middle で縦 th を中央寄せ
   - .hyou.td-center で td を中央寄せ
========================================== */

.hyou{
  width: 100%; table-layout: fixed;
  border-collapse: separate;   /* 角丸や影を入れる余地を残す */
  border-spacing: 0;
  font-size: inherit;
  border-top: .3rem solid var(--colr-bk);
}

.hyou th,
.hyou td{
  padding: 1.5rem 1.8rem;
  border-bottom: .1rem solid var(--colr-border);
  vertical-align: top;
  text-align: left;
}



/* 見出しセル */
.hyou th{ font-weight: 700; }

/* 横列の見出し（カラム見出し） */
.hyou thead th{
  text-align: center;
  vertical-align: middle;
}

/* 縦列の見出し（行見出し）= tbody 内 th */
.hyou tbody th{
  text-align: left;
  vertical-align: top; /* 既定：上寄せ */
}

/* モディファイア：縦 th を中央寄せに */
.hyou.th-middle tbody th{
  vertical-align: middle;
}

/* セルの整列：既定は左。中央寄せにしたい表だけ .td-center を併用 */
.hyou.td-center td{
  text-align: center;
}

/* キャプション（使う場合） */
.hyou caption{
  caption-side: top;
  text-align: left;
  font-weight: 700;
  margin-block-end: .8rem;
}

/* セル内の段落・リストの基本余白（ULが増えたときの整形） */
.hyou td :is(p, ul, ol){ margin: 0 0 1em; }
.hyou td :is(ul, ol){
  padding: 0;
  margin: .4rem 0 0 1.4em;         /* デフォルトより少し控えめ */
}
.hyou td li{ margin: .2rem 0; }


/* ==========================================
   .hyou.sp1 – 縦見出し2列の“SP=1列化”モディファイア（mobile-first）
   - SP既定：各行をブロック化し、th→td の縦積み
   - TAB+：通常の2列テーブルへ復帰
   - th は薄い背景で識別
========================================== */

/* SP（既定）: 1列スタック */
.hyou.sp1 tbody tr{
  display: block;
  margin-block-start: 1rem;
  border: none;
}
.hyou.sp1 tbody th,
.hyou.sp1 tbody td{
  display: block;                 /* セルもブロックに（横幅100%） */
  width: 100%;
  border: none;
}

/* th を帯風に。td との間の境界を軽めに */
.hyou.sp1 tbody th{
  background: #eee;
  border-bottom: 0;               /* th 下の線は外す */
  border-top-left-radius: .8rem;
  border-top-right-radius: .8rem;
}
.bg .hyou.sp1 tbody th{
  background: #fff;
}


.hyou.sp1 tbody th + td{
  padding-block-start: 1rem;      /* th→td の切り替えにゆとり */
}



/* TAB+（601px〜）: ふつうの2列レイアウトへ戻す */
@media (min-width:601px){
  .hyou.sp1 tbody tr{ display: table-row; }
  .hyou.sp1 tbody th,
  .hyou.sp1 tbody td{
    display: table-cell;
    width: auto;
  }
  .hyou.sp1 tbody th{
    background: none;
    border-bottom: .1rem solid var(--colr-border);
    border-right: .1rem dotted var(--colr-border);
    border-radius: 0;
  }
  .bg .hyou.sp1 tbody th{
  background: none;
  }
  .hyou.sp1 tbody td{
    border-bottom: .1rem solid var(--colr-border);
  }
  .hyou.sp1 tbody tr + tr{ border-top: 0; } /* 行境界はセルのボーダーに委譲 */
}


/* 既存モディファイアとの併用 */
.hyou.sp1.th-middle tbody th{ vertical-align: middle; }
.hyou.sp1.td-center  td{ text-align: center; }

/* SPで幅を殺す（クラス幅・インライン幅どちらにも効く） */
@media (max-width:600px){
.hyou.sp1{ table-layout:auto; } 
.hyou.sp1 col{ width:auto}
}



/* ==========================================
   unit.css – Buttons (bd1120 v4)
   - .btn.dan1〜4 を伴って使用（単独/複数どちらもOK）
   - ul: 段組ラッパ, li: 幅担当, a: 見た目＆クリック領域
========================================== */
:root{
  --btn-dot-right: 1.6rem;  /* 右端から円の外縁までの距離 */
  --btn-dot-size:  1.8rem;  /* 円の直径 */
}

.btn{
  margin-block-start: var(--sp-MS);
}
/* 共通（帯切替は tokens の --sp-* で） */
.btn ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-SS);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media(min-width: 601px){
  .btn ul{
    gap: var(--sp-MS);
  }
  .btn.left ul{
    justify-content: left;
  }
}
.btn li{
  flex: 0 1 auto;   /* 理想幅を基準にしつつ、狭い時は縮む */
  max-width: 100%;
}

/* ボタン本体 */
.btn li a{
  position: relative;
  display: block;
  padding: 1rem 3rem;                 /* クリック領域 */
  font-size: var(--tx-S);            /* 15px下限/帯連動の変数を想定 */
  color: var(--colr-text-base);
  background: var(--colr-wt);
  border-radius: 99rem;               /* ピル型 */
  border: 0.1rem solid transparent;   /* hoverで枠を出す前提として先に枠を確保 */
  box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.2);
  text-decoration: none;
  text-align: center;
  transition: box-shadow .4s ease, border-color .4s ease, color .4s ease, background-color .4s ease;
}

/* --- SPデフォルト（〜600px） --- */
.btn ul{ gap: 0; }/* 二重取り防止で gap はゼロに */
.btn li + li{ margin-block-start: var(--sp-MS); }  /* 2個目以降だけ余白 */

/* --- TAB/PC（601px〜）: gap復活＆マージン解除 --- */
@media (min-width: 601px){
  .btn ul{ gap: var(--sp-MS); }/* 既存の値でOK。mini等はそのまま効きます */
  .btn li + li{ margin-block-start: 0; }  /* 追加マージンを戻す */
}

footer nav.btn li a{
  border-radius: .6rem;               /* やや角丸*/
}
@media (min-width: 601px){
  footer nav.btn li a{
    border-radius: 99rem;               /* ピル型 */
  }
}

/* 右端の丸ドット */
.btn li a::before{
  content: "";
  position: absolute;
  top: 50%;
  right: var(--btn-dot-right);
  transform: translateY(-50%);
  inline-size: var(--btn-dot-size);
  block-size:  var(--btn-dot-size);
  border-radius: 50%;
  background: var(--colr-key);
  pointer-events: none;
}
/* › 記号 */
.btn li a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  inline-size: 1.5rem;
  block-size:  1.5rem;

  /* 単色シルエットSVGをマスクとして使用 */
  -webkit-mask: url("../img/arw.svg") no-repeat center / contain;
  mask:         url("../img/arw.svg") no-repeat center / contain;
  background-color: var(--colr-wt); /* ←ここで色を制御（白） */
  pointer-events: none; /* hover判定を邪魔しない */
}

/* hover：影は“消さずに透明化”、枠を出す */
.btn li a:hover{
  color: var(--colr-text-weak);
  border-color: var(--colr-border);
  box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0);   /* 透明化 */
}
.btn li a:hover::before{
  background: var(--colr-key-lighten);         /* ほんのり明るく */
}


/* :::::: Button-type: .btn.mini / .btn.color :::::: */
/* ミニ：文字小さめ、幅は内容に追従（段幅の固定を無効化） */
.btn.mini ul{ gap: var(--sp-S); }
.btn.mini li{ width: auto !important; flex: 0 0 auto; }
.btn.mini li a{
  font-size: var(--tx-XS);      /* 小さめ文字 */
  padding: .6rem 4rem .6rem 2rem;        /* コンパクト */
  box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.18);
}

/* 塗り（キーカラー） */
.btn.color li a{
  color: var(--colr-wt);
  background: var(--colr-key);
  border-color: transparent;
}
.btn.color li a:hover{
  background: var(--colr-key-darken);
  box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0);
}
/* 右端の丸と矢印を反転配色に */
.btn.color li a::before{ background: var(--colr-wt); }
.btn.color li a::after { background-color: var(--colr-key); }




/* :::::: dan別の理想幅（PC/TAB/SP切替） :::::: */

/* SP(〜600) */
@media (max-width:600px){
  /* 指定どおり SP は 1,2,3 段 = 540基準、4段=260 */
  .btn.dan1 li,
  .btn.dan2 li,
  .btn.dan3 li{ width: 40rem; }
  .btn.dan4 li{ width: 26rem; }
  footer .btn.dan3 li{ width: 56rem; }
}

/* TAB(601–900) */
@media (min-width:601px) and (max-width:900px){
  .btn.dan1 li{ width: 82rem; }
  .btn.dan2 li{ width: 40rem; }
  .btn.dan3 li{ width: 26rem; }
  .btn.dan4 li{ width: 26rem; }
}

/* PC(901+) */
@media (min-width:901px){
  .btn.dan1 li{ width: 112rem; }
  .btn.dan2 li{ width: 54rem; }
  .btn.dan3 li{ width: 35rem; }
  .btn.dan4 li{ width: 26rem; }
}



/* ==========================================
   Round Figure w caption　円に色帯タイトルユニット
========================================== */

.figcirc{
  --cap-bg: var(--colr-key);          /* バンド色（上書き可） */
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1 / 1;                /* 正円 */
  border-radius: 50%;
  overflow: hidden;
}
.figcirc>img{
  display:block; width:100%; height:100%; object-fit:cover;
}
/* キャプション：円内ボトムにバンド */
.figcirc>figcaption{
  position:absolute; inset-inline:0; inset-block-end:0;
  padding: 1rem 1rem;
  text-align:center;
  color: var(--colr-wt);
  font-weight:700;
  background: color-mix(in srgb, var(--cap-bg) 90%, transparent);
  /* ほんの少し上へ食い込ませて丸みに沿わせるなら ↓ */
  /* box-shadow: 0 -1rem 0 color-mix(in srgb, var(--cap-bg) 90%, transparent); */
}

/* カラーバリエ（必要な時だけクラス追加） */
.figcirc.cap--sub1{ --cap-bg: var(--colr-sub1); }
.figcirc.cap--sub2{ --cap-bg: var(--colr-sub2); }
.figcirc.cap--sub3{ --cap-bg: var(--colr-sub3); }



/* ---- Figcaption に丸アイコン付き（下向きアロー） ---- */
/* アイコンぶんの余白だけキープ */
.figcirc.cap--icon > figcaption{ padding-block-end: 3.6rem; }

/* 白い丸 = ::before（背面） */
.figcirc.cap--icon > figcaption::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:1rem;
  translate:-50% 0;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  background: var(--colr-wt);
  z-index: 1;                    /* 念のため背面に固定 */
}

/* 下向き矢印 = ::after（前面） */
.figcirc.cap--icon > figcaption::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: .9rem;
  translate:-50% 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  -webkit-mask: url("../img/arw.svg") no-repeat center / contain;
  mask:         url("../img/arw.svg") no-repeat center / contain;
  background: var(--cap-bg);     /* バンドと同色。白にしたければ var(--colr-wt) */
  transform: rotate(90deg);
  z-index: 2;                    /* 丸より前面に */
}

@media (min-width:601px){
  .figcirc.cap--icon > figcaption{ padding-block-end: 3rem; }
}



/* ==========================================
   .dlbox（枠＋左上ラベル）  ※dl に付与
   - dl 1本につき dt/dd を1セット想定
   - ラベルの下に枠線が見えないように背景でマスク
========================================== */
.dlbox{
  --dlbox-radius: .5rem;
  --dlbox-border: .1rem;                 /* 枠の太さ */
  --dlbox-border-color: #bbb;
  --dlbox-pad-y: 1.6rem;                 /* 内側余白（上下）*/
  --dlbox-pad-x: 2rem;                 /* 内側余白（左右）*/

  position: relative;
  margin: 4rem 0 4rem 0;
  padding: 2rem 2rem;
  border: var(--dlbox-border) solid var(--dlbox-border-color);
  border-radius: var(--dlbox-radius);
  background: transparent;               /* 影や地色は付けない */
}

/* ラベル（dt）：枠の上に“かぶせる” */
.dlbox > dt{
  position: absolute;
  left: calc(var(--dlbox-pad-x) - .2rem); /* ほんの少し枠に食い込ませる */
  top: 0;
  transform: translateY(-50%);
  display: inline-block;
  padding: .2rem .8rem;
  font-weight: 700;
  line-height: 1.2;
  background: var(--colr-wt);     /* これで枠線をマスク */
}
.bg .dlbox > dt{
  background: var(--colr-bg-item);
}

/* 本文（dd） */
.dlbox > dd{
  margin: 0 0 0 .5rem;                              /* まずはゼロ */
  color: inherit;
  line-height: 1.9;
}

/* dd 内の段落やリストの扱い（お好みで） */
.dlbox > dd :is(p, ul, ol){ margin: 0 0 1em; }
.dlbox > dd :last-child{ margin-bottom: 0; }

/* 連続配置時の間隔を少し広めに（任意） */
.dlbox + .dlbox{ }

/* ラベルの位置微調整バリエ（必要なら） */
.dlbox.label-tight > dt{ left: var(--dlbox-pad-x); }





/* ==========================================
   Form common (mobile-first)
   - 使い方：<form class="form-common">…</form>
========================================== */
.form-common{
  /* ローカル変数（このブロック内だけ） */
  --fc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --fc-text: #111;
  --fc-muted: #6a717a;
  --fc-bg: #fff;
  --fc-bg-muted: #f6f7f8;
  --fc-border: #d7dbe0;
  --fc-border-strong: #bfc6cf;
  --fc-accent: #009fde;         /* 必要に応じてサイトカラーへ */
  --fc-valid: #1a8f5a;
  --fc-invalid: #d64545;

  --fc-gap: 1rem;               /* ラベルと入力の隙間 */
  --fc-gap-row: 1.2rem;         /* フィールド同士の縦間隔 */
  --fc-pad: 0.9rem;             /* テキスト系の内側余白 */
  --fc-radius: .6rem;
  --fc-line: 1.6;
  --fc-shadow: 0 .1rem .2rem rgba(0,0,0,.04);
  --fc-focus-ring: 0 0 0 .2rem color-mix(in srgb, var(--fc-accent) 25%, transparent);
}

.form-common, .form-common *{
  box-sizing: border-box;
}

.form-common{
  font-family: var(--fc-font);
  color: var(--fc-text);
  line-height: var(--fc-line);
}

/* 行：ラベル＋コントロールの基本レイアウト */
.form-common .f-row{
  display: grid;
  gap: var(--fc-gap);
  margin-block: var(--fc-gap-row);
}

/* 2カラム化したい行だけ .cols を付ける */
.form-common .f-row.cols{
  align-items: start;
}
@media (min-width: 601px){
  .form-common .f-row.cols{
    grid-template-columns: 16rem 1fr; /* ラベル幅 / コントロール */
  }
}

/* ラベル */
.form-common .f-label{
  font-weight: 700;
  color: var(--fc-text);
}
.form-common .f-label .req{
  font-weight: 700;
  color: var(--fc-accent);
  margin-inline-start: .4rem;
  font-size: .9em;
}

/* テキスト系コントロールの共通外観 */
.form-common input[type="text"],
.form-common input[type="email"],
.form-common input[type="tel"],
.form-common input[type="url"],
.form-common input[type="password"],
.form-common input[type="number"],
.form-common input[type="search"],
.form-common input[type="date"],
.form-common input[type="time"],
.form-common input[type="datetime-local"],
.form-common textarea,
.form-common select{
  /* display: block;width: 100%; */
  font-size: 2.1rem;
  max-width: 100%;
  padding: var(--fc-pad) calc(var(--fc-pad) + .8rem) var(--fc-pad) var(--fc-pad);
  background: var(--fc-bg);
  color: var(--fc-text);
  border: .1rem solid var(--fc-border);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* フォーカス */
.form-common :is(
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  textarea, select
):focus-visible{
  border-color: var(--fc-accent);
  box-shadow: var(--fc-focus-ring);
}

/* 無効 */
.form-common :is(input, select, textarea)[disabled]{
  background: var(--fc-bg-muted);
  color: var(--fc-muted);
  cursor: not-allowed;
}

/* プレースホルダ */
.form-common ::placeholder{
  color: var(--fc-muted);
  opacity: .85;
}

/* セレクト：矢印（シンプル） */
.form-common select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right .9rem center, right .5rem center;
  background-size: .6rem .6rem, .6rem .6rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

/* テキストエリア */
.form-common textarea{
  min-height: 8rem;
  resize: vertical;
}

/* チェックボックス／ラジオ：モダンに */
.form-common input[type="checkbox"],
.form-common input[type="radio"]{
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--fc-accent);
  vertical-align: middle;
}
.form-common .f-choice{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.form-common .f-inline{
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.2rem; /* 行/列 */
}

/* ヒント／エラー */
.form-common .f-hint{
  color: var(--fc-muted);
  font-size: .9rem;
  margin-block-start: .4rem;
}
.form-common .f-error{
  color: var(--fc-invalid);
  font-size: .9rem;
  margin-block-start: .4rem;
}

/* 検証状態（入力本体に付ける） */
.form-common .is-invalid{
  border-color: var(--fc-invalid) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fc-invalid) 20%, transparent) !important;
}
.form-common .is-valid{
  border-color: var(--fc-valid) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fc-valid) 20%, transparent) !important;
}

/* サイズバリエーション（任意） */
.form-common .sm{ padding: .6rem .8rem; font-size: .95rem; }
.form-common .lg{ padding: 1.1rem 1.2rem; font-size: 1.05rem; }

/* フィールドセット */
.form-common fieldset{
  border: .1rem solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 1.2rem;
}
.form-common legend{
  padding: 0 .4rem;
  font-weight: 700;
}

/* 送信ボタン（必要なら最低限） */
.form-common .btn-submit{
  display: inline-block;
  padding: .9rem 1.4rem;
  border-radius: 99rem;
  border: .1rem solid transparent;
  background: var(--fc-accent);
  color: #fff;
  cursor: pointer;
  transition: filter .15s ease;
}
.form-common .btn-submit:hover{ filter: brightness(1.05); }
.form-common .btn-submit:disabled{
  background: var(--fc-border-strong); cursor: not-allowed;
}

/* 余計なトランジションを抑制（OS設定尊重） */
@media (prefers-reduced-motion: reduce){
  .form-common *{ transition: none !important; }
}

/* ===== form-common: submit button (CF7対応) ===== */
.form-common :is(input[type="submit"], button[type="submit"], .wpcf7-submit){
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 4rem;
  min-inline-size: 20rem;
  line-height: 1;
  font: inherit;
  color: #fff;
  background: var(--fc-accent, var(--colr-key, #007acc));
  border: 0;
  border-radius: 99rem;                  /* ピル型 */
  box-shadow: 0 .1rem .5rem rgba(0,0,0,.18);
  cursor: pointer;
  transition: filter .2s ease, box-shadow .2s ease, transform .02s ease-in-out;
}

.form-common :is(input[type="submit"], button[type="submit"], .wpcf7-submit):hover{
  filter: brightness(0.96);
}

.form-common :is(input[type="submit"], button[type="submit"], .wpcf7-submit):active{
  transform: translateY(1px);
}

.form-common :is(input[type="submit"], button[type="submit"], .wpcf7-submit):focus-visible{
  outline: none;
  box-shadow:
    0 .1rem .5rem rgba(0,0,0,.18),
    0 0 0 .2rem color-mix(in srgb, var(--fc-focus, #2aa3ff) 35%, transparent);
}

/* disabled / 送信中 */
.form-common :is(input[type="submit"], button[type="submit"], .wpcf7-submit)[disabled],
.form-common :is(input[type="submit"], button[type="submit"], .wpcf7-submit).is-disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* 配置ユーティリティ（必要なら） */
.form-common .actions{ display:flex; flex-wrap:wrap; gap: 1rem; justify-content:center; }
.form-common .btn-wide{ inline-size: min(100%, 28rem); } /* 全幅気味にしたいとき */




/* ==========================================
   Flow steps（テキスト行の区切り→を丸背景で）
========================================== */
ul.flowlist{
  /* 調整用トークン */
  --flow-dot:  #333;   /* ●の色 */
  --flow-size: 1.2em;    /* ●の直径（行高に追従） */
  --flow-gap:  1.2em;    /* ●の左右マージン（= 矢印前後の余白） */
  --flow-arrow-scale: .75; /* 矢印だけ少し小さく */

  display: flex;
  flex-wrap: wrap;
  gap: .6rem 0;               /* 折返し時の行間だけ */
  list-style: none;
  margin: 0;
  padding: 0;
  margin-inline-start: 0 !important;
}

.flowlist > li{
  /* テキストはそのままインライン感覚で */
  display: inline;
}

/* 2個目以降の項目の“前”に区切りを挿入 → 前後が等間隔になる */
.flowlist > li + li{
  position: relative;
}
.flowlist > li + li::before{
  content: "→";
  display: inline-flex;
  inline-size: var(--flow-size);
  block-size:  var(--flow-size);
  margin-inline: var(--flow-gap);     /* ← 矢印の左右が同じ余白 */
  border-radius: 50%;
  background: var(--flow-dot);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: calc(1em * var(--flow-arrow-scale)); /* 矢印だけ小さめ */
  line-height: 1;
  vertical-align: middle;             /* ベースライン揃え */
}