@charset "UTF-8";
/* =========================================================
   EFO 子テーマ カスタムCSS（custom.css）
   - 子テーマ style.css の代わりに読み込む（stylesheet_uri フィルタ）
   - ?ver=filemtime で更新時に自動キャッシュ更新
   ========================================================= */

/* =========================================================
   目次（outline）：番号を全廃。H2＝•、H3/H4＝ツリー記号（├ / └）
   - 非末尾＝├（縦線が上下に貫通）／末尾＝└（上半分で止める）
   - 参考サイト風に小さめ・控えめに
   ========================================================= */

/* pタグの設定ここから */
@media screen and (max-width: 767px){
#main p {
    line-height: 1.5;
    letter-spacing: .8pt;
    margin-top: 20px;
}
}

/* aタグの設定ここから */

.content a {
  text-underline-offset: 4px;
}

@media (min-width: 768px){
.content a:hover {
  text-decoration: none;
}  
}

/* aタグの設定ここまで */
/* 小見出しここから */

.content h2 {
    border-bottom: 2px solid #373737;
    border-top: 2px solid #373737;
    padding: 16px;
    letter-spacing: 1.2pt;
}

.content h3 {
    padding: 20px;
    background-color: #f3f3f3;
    border-radius: 8px;
    line-height: 1.4;
    letter-spacing: 1.2pt;
}

.content h4 {
    border-bottom: solid 2px #cecece;
    position: relative;
    padding: 0 0 10px 12px;
}

.content h4:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #129259;
    bottom: -2px;
    left: 0;
    width: 30%;
}

@media (max-width: 767px){
.content h2 {
    padding: 16px 14px;
    line-height: 1.3;
}
.content h3 {
  padding: 16px;
}
}
/* 小見出しここまで */

/* 外枠：斜線ハッチ背景＋上下のみ4px二重線（参考サイト風）
   ※干渉していた custom-css-js(157) の #main .outline は削除済みのため、素の .content .outline でOK */
.content .outline {
  display: block;
  padding: 20px 28px;
  margin-top: 20px;
  border: 0;
  border-top: 4px double #d8d8d8;
  border-bottom: 4px double #d8d8d8;
  background-color: #fff;
  background-image: linear-gradient(-45deg, transparent 25%, #f2f2f2 25%, #f2f2f2 50%, transparent 50%, transparent 75%, #f2f2f2 75%, #f2f2f2);
  background-size: 4px 4px;
  background-clip: padding-box;
}

/* 番号（1. / 3.1. 等）は functions.php の the_content フィルタで
   出力HTMLから除去済み（ここでの display:none は不要） */

/* 目次タイトル：中央寄せ */
.outline__title {
  display: block;
  text-align: center;
}

/* 目次タイトルの左にリストアイコン（SVGデータURI） */
.outline__title::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  vertical-align: -0.18em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="%23333333"><circle cx="4" cy="6" r="1.6"/><circle cx="4" cy="12" r="1.6"/><circle cx="4" cy="18" r="1.6"/><rect x="8" y="5" width="13" height="2" rx="1"/><rect x="8" y="11" width="13" height="2" rx="1"/><rect x="8" y="17" width="13" height="2" rx="1"/></g></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* H2：番号の代わりに小さな • */
.outline__list-2 > .outline__item {
  position: relative;
  padding-left: 1em;
  list-style: none;
}
.outline__list-2 > .outline__item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  top: calc(1.3em - 3px);   /* テーマの li padding-top(10px)ぶん下げて先頭行に合わせる */
  width: 6px;
  height: 6px;
  background-color: #129259;
  border-radius: 50%;
}

/* H3/H4：小さめのツリー記号（├ / └） */
.outline__list-3 > .outline__item,
.outline__list-4 > .outline__item {
  position: relative;
  padding-left: 0.85em;
  list-style: none;
}
/* 縦線：既定=├（横棒の上下に貫通・小さめ・細線） */
.outline__list-3 > .outline__item::before,
.outline__list-4 > .outline__item::before {
  content: "";
  position: absolute;
  left: 0em;
  top: 0.8em;      /* 先頭行に合わせて下げる */
  width: 1.5px;
  height: 1em;     /* 横棒(1.3em)を中間に含む＝├ */
  background: #129259;
  opacity: 0.75;
}
/* 末尾＝└：縦線を横棒の位置で止める（上半分だけ） */
.outline__list-3 > .outline__item:last-child::before,
.outline__list-4 > .outline__item:last-child::before {
  height: 0.5em;   /* 0.8em〜1.3em＝横棒で終了 */
}
/* 横棒（枝）：先頭行の高さに合わせる */
.outline__list-3 > .outline__item::after,
.outline__list-4 > .outline__item::after {
  content: "";
  position: absolute;
  left: 0em;
  top: 1.3em;
  width: 0.4em;
  height: 1.5px;
  background: #129259;
  opacity: 0.75;
}

/* =========================================================
   目次：もっと見る / 折りたたむ（部分表示）
   - 既存の開閉スイッチは隠し、もっと見るボタンに統一
   ========================================================= */
/* 目次リンクの下線を消す */
.content .outline__link { text-decoration: none; }

.outline__switch { display: none !important; }
@media (min-width: 768px){
  #main .outline__link:hover {
      color: #129259;
  }
}
/* 折りたたみ時：リスト下端をふわっとフェード（内容をマスクで透明化＝背景の斜線に溶け込む） */
.outline.is-collapsed .outline__list-2 {
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
/* 折りたたみ時：もっと見るボタンの左右に「····」 */
.outline.is-collapsed .outline__more { position: relative; }
.outline.is-collapsed .outline__more::before,
.outline.is-collapsed .outline__more::after {
  content: "····";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
  letter-spacing: 2px;
}
.outline.is-collapsed .outline__more::before { right: 100%; margin-right: 0.6em; }
.outline.is-collapsed .outline__more::after { left: 100%; margin-left: 0.6em; }

.outline__more {
  display: block;
  margin: 0.1em auto 0;
  padding: 0.35em 1.5em;
  font-size: 0.85em;
  line-height: 1.4;
  color: #555;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 999px;
  cursor: pointer;
}
.outline__more:hover { background: #f5f5f5; }

#main .outline:not(.is-collapsed) ul {
  margin-bottom: 20px;
}