/* z全体の左右間隔調整CSS*/
#article01 h2 {
  margin-left: 0;
  margin-right: 0;
}
#article01 h3,
#article01 h4,
#article01 h5,
#article01 h6 {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
#article01 > p,
#article01 > ul,
#article01 > ol,
#article01 > pre,
#article01 > table,
#article01 > blockquote,
#article01 > dl,
#article01 > figure,
#article01 .wp-block-paragraph,
#article01 .wp-block-list,
#article01 .wp-block-table,
#article01 .wp-block-quote,
#article01 .wp-block-group,
#article01 .wp-block-image {
  margin-left: 1.5em;
  margin-right: 1.5em;
}

/* タイトル下メタデザイン */
.post-header-meta {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.post-meta-bar {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 0.4rem;
}

.post-meta-hr {
  border: none;
  border-top: 2px solid #666;
  margin: 0;
}
.post-header-meta {
  margin-bottom: 2rem;
}



/* ===============================
   アクセントカラー（全体共通）
   =============================== */
:root {
  --accent-color: #5A3D7A;
}


/* テキストBOXシンプルのCSS */
.list-8 { position: relative; display: block; width: 100%; max-width: calc(100% - 2.4em); margin-bottom: 1.8em; margin-top: 2em; padding: 1.5em 1em 1em 2.5em; border: 2px solid #5A3D7A; border-radius: 12px; background: #fff; box-sizing: border-box; }
/* タイトル（吹き出し風見出し） */
.list-8 > div { position: absolute; top: -0.85em; left: 1.2em; padding: 0 0.7em; background: #fff; color: #5A3D7A; font-weight: 600; font-size: 1em; border-radius: 10px; z-index: 10; line-height: 1.2; white-space: nowrap; }
/* リストスタイル */
.list-8 ol { list-style-type: disc; list-style-position: outside; margin: 0; padding-left: 1.3em; }
.list-8 li { padding: 0.3em 0.3em 0.3em 0; word-break: break-word; }
.list-8 li::marker { color: #5A3D7A; font-size: 1.1em; }
/* モバイル対応 */
@media (max-width: 600px) {
.list-8 { margin: 1.5em auto 1.2em; width: 100%; padding-left: 1.2em; margin-top: 1.5em; margin-bottom: 1.2em; }
.list-8 > div { left: 0.6em; font-size: 16px; white-space: normal; }
.list-8.list-8-num li { list-style: decimal outside !important; }
}

/* グリーンバージョン */
.list-8-green {
  border-color: #5EB49A !important;
}
.list-8-green > div {
  color: #5EB49A !important;
}
.list-8-green li::marker {
  color: #5EB49A !important;
}




/* ===============================
   Table of Contents（目次）カスタム
   =============================== */
.table-of-contents-custom .toc-details {
  max-width: 600px;
  margin: 3em auto;
  padding: 0 1.2em 1em;
  background: #fff;
  font-size: 100%;
  color: #6A6273;
  border: 2px solid #E0DCE6;
  border-top-width: 40px;
  border-radius: 8px;
  position: relative;
  box-sizing: border-box;
}

/* タイトルバー */
.toc-header {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: #E6DEEE;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  z-index: 2;
  box-sizing: border-box;
}
.toc-icon {
  color: #5A3D7A;
  font-size: 120%;
  margin-right: 5px;
}
.toc-title {
  color: #5A3D7A;
  font-size: 120%;
  font-weight: bold;
  margin-left: 5px;
}

/* リスト全体 */
.table-of-contents-custom .toc-details > ul{
  width: 450px;     /* ←中身幅にする */
  margin: 30px auto 20px; /* ←中央寄せ */
  padding: 0;
}

/* H2（第1階層）だけ間隔を作る */
.table-of-contents-custom .toc-details > ul > li{
  list-style-type: decimal;
  font-weight: bold;
  line-height: 1.6;
  margin: 28px 0 0;          /* ←H2同士の間隔 */
}

/* H2直下のH3リスト（所属感：近づける） */
.table-of-contents-custom .toc-details > ul > li > ul{
  margin-left: 0;         /* ←左に寄せる原因を消す */
  padding-left: 1em;      /* ←インデントは内側で確保 */
}


/* H3（第2階層）は詰める */
.table-of-contents-custom .toc-details > ul > li > ul > li{
  list-style: none;
  font-weight: normal;
  font-size: 100%;
  line-height: 1.6;
  margin: 6px 0 0;           /* ←H3同士の間隔 */
}

/* さらに下の階層がある場合（第3階層） */
.table-of-contents-custom .toc-details > ul > li > ul > li > ul > li{
  font-size: 90%;
}


/* リンクスタイル */
.table-of-contents-custom .toc-details a {
  color: #6A6273;
  text-decoration: none;
  display: block;
}
.table-of-contents-custom .toc-details > ul > li > a{
  min-width: 100%;        
  display: inline-block;
}

.table-of-contents-custom ul li a {
  border-bottom: dashed 1px #D8D3DF;
}

/* 自動連番：H3用 */
.table-of-contents-custom .toc-details > ul { counter-reset: toc-h2; }
.table-of-contents-custom .toc-details > ul > li { counter-increment: toc-h2; }
.table-of-contents-custom .toc-details > ul > li > ul { counter-reset: toc-h3; }


/* H3項目：番号＋テキスト */
.table-of-contents-custom .toc-details > ul > li > ul > li{
  display: flex;
  align-items: flex-start;
  gap: 0.4em;               /* 番号とテキストの隙間 */
  margin-left: 0em;         /* 左に完全寄せ */
  list-style: none;
  font-weight: normal;
  font-size: 100%;
}

/* 番号部分（1-1｜） */
.table-of-contents-custom .toc-details > ul > li > ul > li::before {
  counter-increment: toc-h3;
  content: counter(toc-h2) "-" counter(toc-h3) "｜";
  color: #74707A;
  font-weight: bold;
  display: inline-block;
  min-width: 2em;  
  text-align: right;
  flex-shrink: 0;
  line-height: 1.6;
}
/* summaryのデフォルト三角を消す */
.toc-details > summary {
  list-style: none;
}
.toc-details > summary::-webkit-details-marker {
  display: none;
}

/* タイトルバー全体を「ボタン」に見せる */
.toc-details > .toc-header{
  cursor: pointer;          /* ←これが超重要 */
  user-select: none;
}


/* 右側に開閉アイコン（▼▲）を表示 */
.toc-toggle{
  margin-left: auto;
  margin-right: 12px;   /* ←ここで内側へ */
  width: 1.8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5A3D7A;
  font-weight: bold;
}

.toc-details[open] .toc-toggle::before { content: "▲"; }
.toc-details:not([open]) .toc-toggle::before { content: "▼"; }



/* モバイル対応 */
@media (max-width: 600px) {
.table-of-contents-custom .toc-details {
  max-width: 80%;
}
.table-of-contents-custom .toc-details > ul{
  width: 90%;     /* ←中身幅にする */
  margin: 20px auto 20px; /* ←中央寄せ */
  padding: 0;
}

/* H2（第1階層）だけ間隔を作る */
.table-of-contents-custom .toc-details > ul > li{
  line-height: 1.6;
  margin: 20px 0 0;          /* ←H2同士の間隔 */
}
  /* H3側のインデント（marginで左ズレしないように） */
.table-of-contents-custom .toc-details > ul > li > ul{
  margin-left: 0;         /* ←左に寄せる原因を消す */
  padding-left: 0;      /* ←インデントは内側で確保 */
}

/* H3（第2階層）は詰める */
.table-of-contents-custom .toc-details > ul > li > ul > li{
  line-height: 1.6;
  margin: 3px 0 0;           /* ←H3同士の間隔 */
}

  /* 番号列（1-1｜）を小さめに・食い込み調整 */
  .table-of-contents-custom .toc-details > ul > li > ul > li::before{
    min-width: 2em;
    font-size: 0.9em;
    line-height: 1.6;
  }

  /* 文字サイズ */
  .table-of-contents-custom .toc-details{
    font-size: 15px;
  }
  .table-of-contents-custom .toc-details > ul > li > ul > li{
    font-size: 15px;
  }
  .table-of-contents-custom .toc-details > ul > li > ul > li > ul > li{
    font-size: 13px;
  }
}





/* フローチャートCSS（競合回避用）*/
.custom-flow-wrapper {
  display: flex;
  margin-left: 60px;
  margin-top: 30px;
  margin-bottom: 25px;
}

.custom-flow-wrapper ul {
  padding: 0;
}

.custom-flow-wrapper li {
  list-style-type: none;
}

.custom-flow-wrapper dd {
	margin-right: 30px;
	color: #6A6273;
}

.custom-flow-list {
  position: relative;
}

.custom-flow-list::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  border-radius: 20px;
}


.custom-flow-list > li {
  position: relative;
  margin-top: 20px;
}

.custom-flow-list > li:not(:last-child) {
  margin-bottom: 20px;
}

.custom-flow-list > li .custom-icon {
  font-size: 0.8em;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #7A63A6;
  display: inline-block;
  position: absolute;
  top: 15px;            /* ←点線（dl::after top:15px）と同じ */
  left: 40px;           /* ←点線の右端あたりに配置（微調整OK） */
  transform: translateY(-50%);  /* 上下中央にする */
  margin-right: 0;      /* 絶対配置なので不要 */
}

.custom-flow-list > li dl{
  position: relative;
  padding-left: 80px;   /* ←番号ぶん余白を広げる（お好みで調整） */
}

.custom-flow-list > li dl::before,
.custom-flow-list > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.custom-flow-list > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #7A63A6;
  border-radius: 50%;
  left: -4px;
}

.custom-flow-list > li dl::after {
  width: 38px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 2px;
}
.custom-flow-list > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #7A63A6;
  margin-bottom: 0.5em;
  display: block; /* 既存の flex を上書き */
  align-items: initial; /* 念のため */
}

@media (max-width: 600px) {
.custom-flow-wrapper {
  margin-left: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
 }
.custom-flow-list::before {
  height: 100%;
}
.custom-flow-list > li {
  margin-top: 10px;
}

.custom-flow-list > li dl dt {
  font-size: 1.1em;
}
.custom-flow-list > li .custom-icon {
  width: 1.8em;
  height: 1.8em;
  line-height: 1.7;
  left: 23px;          /* SP用に位置調整 */
   top: 15px;           /* 点線と合わせる（必要なら 14px など微調整） */
}
.custom-flow-list > li dl {
    padding-left: 55px;  /* SPは少し詰める */
	}
.custom-flow-list > li dl::after {
	width: 20px;
	}
}


/* !BOXのＣＳＳ */
.c-box-1 {
  max-width: 680px;
  width: 90%;
  position: relative;
  margin: 80px auto 60px auto;
  padding: 0.5em 1em 0.5em 1em;
  border: 2px solid #E2F1EC;
  background: #F8FCFB;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.c-box-1 .c-box1-title {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0px;
  padding: 0.2em 0.9em;
  margin-top: -2em;
  font-size: 16px;
  line-height: 1.6;
  background: #76C5AB;
  color: #fff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  z-index: 1;
}

.c-box-1 .c-box1-title i {
  margin-right: 0.5em;
}

.c-box-1 p {
  margin: 1em 0 0 0;
  line-height: 1.8;
}

.c-box-1 strong {
  display: block;
  margin-top: 0.5em;
  font-weight: bold;
  line-height: 1.8;
}




/*  ボタンの吹き出しＣＳＳ */
.slash-wrap {
  text-align: center;
  margin-top: 25px;
}

.slash {
  display: inline-block; /* ←これが重要！ */
}

.slash::before {
  content: '＼';
  margin-right: 0.5em;
}

.slash::after {
  content: '／';
  margin-left: 0.5em;
}

@media screen and (max-width: 600px) {
  .slash-wrap {
    font-size: 13px;
  }
}



/*FAQのCSS */
.FAQ {
    width: 85%;
    margin: auto;
    margin-bottom: 20px;
}

  /* Q部分（質問行の左）は現状維持でOK */
.FAQ details > summary > span:first-child {
    font-size: 18px;
    font-weight: bold;
    min-width: 40px;
    display: inline-block;
    color: #2daffe;
    text-align: center;
    margin-left: 20px;
    margin-right: 10px;
}

  /* ↓ A部分（回答の左）ここから修正 ↓ */
.FAQ p {
    text-indent: -1em;      /* ← 1行目だけ左へ(マイナス) */
    padding-left: 3.5em;    /* ← 2em+余白でA+スペース分だけ全体右寄せ */
    margin-bottom: 0;
}
.FAQ p span:first-child {
    color: #ff8d8d;
    font-weight: bold;
    font-size: 18px;
    min-width: 40px;
    display: inline-block;
    text-align: center;
    margin-left: -25px;
    margin-right: 0px;
    vertical-align: top;            /* 左右の余白はここではゼロでOK */
}

@media (max-width: 600px) {
    .FAQ {
        width: 95%;
        margin: auto;
        margin-bottom: 20px;
    }
    .FAQ details > summary > span:first-child {
        font-size: 15px;
        margin-left: 4px;
        margin-right: 4px;
    }
    .FAQ p {
        text-indent: -1.5em;
        padding-left: 2em;
    }
    .FAQ p span:first-child {
		font-size: 15px;
        min-width: 34px;
        margin-left: -1px;
        margin-right: -8px;
    }
}




/* 黄マーカー */
.marker-yellow {
    background-color: #FFF4C2;
}