/* 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-scroll,
#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: #0b68ba;
}

/* ===============================
   カスタムH2見出し（下三角付き）
   =============================== */
.custom-h2-design {
  position: relative;
  background: var(--accent-color);
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  margin: 100px auto 40px auto;
  border-bottom: 0;
  padding-left: 40px;
  padding-right: 40px;
}


/* 下三角形装飾 */
.custom-h2-design::before,
.custom-h2-design::after {
  position: absolute;
  left: 50%;
  content: "";
  height: 0;
  width: 0;
}

.custom-h2-design::before {
  top: 100%;
  border: 15px solid transparent;
  border-top-color: var(--accent-color);
  margin-left: -9px;
}

.custom-h2-design::after {
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--accent-color);
  margin-left: -6px;
}

/* モバイル対応 */
@media (max-width: 500px) {
.custom-h2-design{
    font-size: 20px;
    padding: 1em 0.8em;
    max-width: 95vw;
	margin: 65px auto 30px auto;
  }
.custom-h2-design::before {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid var(--accent-color);
    margin-left: -12px;
  }
}



/* H3のCSS */
.h3-design {
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin-bottom: 10px;
  background-image: linear-gradient(to top, #b2d5de 10%, #0b68ba 100%);
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
  font-weight: bold;
  font-size: 20px;
}

.h3-design.custom-spacer-top1 {
  margin-top: 70px;
}

@media (max-width: 500px) {
  .h3-design {
    font-size: 17.5px;
  }

  .h3-design.custom-spacer-top1 {
    margin-top: 50px;
  }
}



/* イエローバージョン */
.list-8-yellow {
  border-color: #b89c26 !important;
}
.list-8-yellow > div {
  color: #b89c26 !important;
}
.list-8-yellow li::marker {
  color: #b89c26 !important;
}



/* ===============================
   Table of Contents目次）カスタム
   =============================== */
.table-of-contents-custom {
  max-width: 900px;
  margin: 3em auto;
  padding: 0 1.2em 1em;
  background: #fff;
  font-size: 100%;
  color: #4fa3dc;
  border: 2px solid #4fa3dc;
  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: #4fa3dc;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  z-index: 2;
  box-sizing: border-box;
}
.toc-icon {
  color: #fff;
  font-size: 120%;
  margin-right: 5px;
}
.toc-title {
  color: #fff;
  font-size: 120%;
  font-weight: bold;
  margin-left: 5px;
}

/* リスト全体 */
.table-of-contents-custom > ul {
  margin: 0;
  padding: 0;
}
/* 最初のliが詰まりすぎるのを防ぐ（タイトルバーとの余白調整） */
.table-of-contents-custom > ul > li:first-child {
  margin-top: 1em;
}

.table-of-contents-custom li {
  list-style-type: decimal;
  font-weight: bold;
  margin: 0.2em 0 1em 1em;
  line-height: 1.6;
}
.table-of-contents-custom li ul {
  margin: 0 0 1em 0.5em;
  padding: 0;
}
.table-of-contents-custom li ul li {
  margin-left: 0;
  font-weight: normal;
  font-size: 100%;
}
.table-of-contents-custom li ul li ul li {
  font-size: 90%;
}

/* リンクスタイル */
.table-of-contents-custom a {
  color: #4fa3dc;
  text-decoration: none;
  display: block;
}
.table-of-contents-custom > ul > li > a {
  border-bottom: solid 2px #4fa3dc;
}
.table-of-contents-custom ul li a {
  border-bottom: dashed 1px #4fa3dc;
}

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

/* H3項目：番号＋テキスト */
.table-of-contents-custom > 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 > ul > li > ul > li::before {
  counter-increment: toc-h3;
  content: counter(toc-h2) "-" counter(toc-h3) "｜";
  color: #4fa3dc;
  font-weight: bold;
  display: inline-block;
  min-width: 2em;         /* 番号幅を狭くして全体を詰める */
  text-align: right;
  flex-shrink: 0;
  line-height: 1.6;
}

/* モバイル対応 */
@media (max-width: 600px) {
	.table-of-contents-custom {
    width: 90%;
  }
  .table-of-contents-custom > ul > li > ul > li {
    margin-left: 0.2em;       /* ← できる限り左に */
    gap: 0.3em;                /* 番号とテキストの間隔は控えめに */
  }

  .table-of-contents-custom > ul > li > ul > li::before {
    min-width: 2.1em;          /* 番号の表示幅を極力小さく */
    margin-left: -0.6em;       /* ← ★左に食い込ませて揃える */
    font-size: 0.95em;
    line-height: 1.6;
  }

  .table-of-contents-custom li ul li {
    font-size: 15px;
  }

  .table-of-contents-custom ul,
  .table-of-contents-custom li,
  .table-of-contents-custom a {
    font-size: 15px;
  }

  .table-of-contents-custom li ul li ul li {
    font-size: 13px;
  }
}

/* アンカー位置調整（見出しがナビ下に隠れない） */
:target {
  scroll-margin-top: 80px;
}




/* フローチャートCSS（競合回避用）*/
.custom-flow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 35px;
  margin-top: 30px;
  margin-bottom: 40px;
}

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

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

.custom-flow-wrapper dd {
	margin-left:10px;
	margin-right: 30px;
}

.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: #4D9BC1;
  display: inline-block;
  margin-right: 0.4em;
}

.custom-flow-list > li dl {
  padding-left: 38px;
  position: relative;
}

.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: #4D9BC1;
  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: #4D9BC1;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}

@media (max-width: 600px) {
.custom-flow-wrapper {
  margin-top: 30px;
  margin-bottom: 30px;
 }
.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;
}
.custom-flow-list > li dl {
  padding-left: 30px;
	}
.custom-flow-list > li dl::after {
	width: 30px;
	}
}


/* !BOXのＣＳＳ */
.c-box-1 {
  max-width: 680px;
  width: 90%;
  position: relative;
  margin: 50px auto 30px auto;
  padding: 0.5em 1em 0.5em 1em; /* タイトル分の余白確保 */
  border: 3px solid #bfa021;
  background: #f8f3df;
  box-sizing: border-box;
  border-radius: 6px;
}

.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: #bfa021;
  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;
  }
}




/*  AppボタンのCSS */
.appreach {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  max-width: 600px;
  margin: 2em auto;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
/* 上段：アイコン＋右側 */
.appreach__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.appreach__icon {
  width: 100px;
  height:100px;
  border-radius: 16px;
  flex-shrink: 0;
  margin-left: 10px;
  margin-right:20px;
  margin-top: 3px;
}
.appreach__right {
  flex: 1;
}
.appreach__name {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}
.appreach__info {
  font-size: 14px;
  color: #666;
  margin: 0 0 16px;
}
.appreach__links {
  display: flex;
  margin-left: 40px;
  gap: 30px;
  margin-top: 12px;  /* ← これを追加！ */
}
.appreach__links img {
  height: 44px;
}
/* SP用：PC用ボタンを非表示、SP用だけ表示 */
.appreach__links--pc {
  display: flex;
}
.appreach__links--sp {
  display: none;
}

/* スマホレイアウト調整 */
@media screen and (max-width: 600px) {
  .appreach {
    max-width: 90%;
  }
  .appreach__top {
    flex-direction: row;
    gap: 10px;
	margin-top: -5px;
  }

  .appreach__icon {
    width: 70px;
    height: 70px;
    margin-top: 5px;
    margin-left: -5px;
    margin-right: 0px;
  }

  .appreach__name {
    font-size: 16px;
  }
  .appreach__info {
    font-size: 13px;
  }
  /* ✅ 親ボックスには height 指定しない */
  .appreach__links {
  margin-left: 0;  /* ← 不要な左マイナスマージンを削除 */
  justify-content: center;  /* ← 中央揃え */
  display: flex;
  gap: 17px;
}
  /* ✅ 画像のサイズを明示 */
  .appreach__links img {
    height: 36px;
    width: auto;
  }
  .appreach__links--pc {
    display: none;
  }

  .appreach__links--sp {
    display: flex;
    justify-content: center;
    margin-top: 2px;
  }
}



/*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: #ff9;
}



.custom-blockquote {
  width: 80%;
  border-left: 5px solid #2589d0;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  color: #333;
  font-style: normal;
  padding: 0 5px 0 0;
  margin: 0 10px 0 auto;
}