@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
/* ===== 見出し共通リセット ===== */
.entry-content h2:not(.sgb-heading),
.entry-content h3:not(.sgb-heading),
.entry-content h4:not(.sgb-heading),
.entry-content h5:not(.sgb-heading),
.entry-content h6:not(.sgb-heading) {
  background: none;
  border: none;
  padding: 0;
  color: #33403D;
  line-height: 1.5;
  font-weight: 700;
}

/* ===== H2：パステル背景＋左バー ===== */
.entry-content h2:not(.sgb-heading) {
  position: relative;
  margin: 2.8em 0 1em;
  padding: 0.75em 0.9em 0.75em 1.25em;
  background: var(--sgb-pastel-color);
  border-radius: 8px;
  font-size: 1.32em;
}
.entry-content h2:not(.sgb-heading)::before {
  content: "";
  position: absolute;
  top: 0.75em;
  bottom: 0.75em;
  left: 0.5em;
  width: 6px;
  border-radius: 3px;
  background: var(--sgb-main-color);
}

/* ===== H3：下線＋アクセントの短い線 ===== */
.entry-content h3:not(.sgb-heading) {
  position: relative;
  margin: 2.4em 0 0.9em;
  padding: 0 0 0.45em;
  border-bottom: 2px solid #E6EFEC;
  font-size: 1.18em;
}
.entry-content h3:not(.sgb-heading)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 3.2em;
  height: 2px;
  background: var(--sgb-main-color);
}

/* ===== H4：丸ドット ===== */
.entry-content h4:not(.sgb-heading) {
  position: relative;
  margin: 2.1em 0 0.8em;
  padding-left: 1.3em;
  font-size: 1.08em;
}
.entry-content h4:not(.sgb-heading)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: var(--sgb-accent-color);
  box-shadow: 0 0 0 3px rgba(255, 158, 94, 0.22);
}

/* ===== H5：点線 ===== */
.entry-content h5:not(.sgb-heading) {
  margin: 1.9em 0 0.7em;
  padding-bottom: 0.3em;
  border-bottom: 2px dotted #D9E4E1;
  font-size: 1em;
}

/* ===== H6：ラベル調 ===== */
.entry-content h6:not(.sgb-heading) {
  margin: 1.7em 0 0.6em;
  font-size: 0.95em;
  color: #6B7A77;
  letter-spacing: 0.04em;
}
.entry-content h6:not(.sgb-heading)::before {
  content: "―";
  margin-right: 0.4em;
  color: var(--sgb-main-color);
}

/* ===== スマホ調整 ===== */
@media only screen and (max-width: 480px) {
  .entry-content h2:not(.sgb-heading) { font-size: 1.2em; padding: 0.65em 0.7em 0.65em 1.1em; }
  .entry-content h3:not(.sgb-heading) { font-size: 1.1em; }
}

/* 黄色マーカー：下寄りの淡い蛍光ペン風＋太字 */
.entry-content mark {
  background: linear-gradient(transparent 62%, #FFEFA8 62%);
  color: inherit;
  font-weight: 700;
  padding: 0 0.08em;
}

/* 赤強調文字：インラインstyleの #ff0000 を上書き */
.entry-content span[style*="#ff0000"],
.entry-content span[style*="#FF0000"],
.entry-content span[style*="rgb(255, 0, 0)"],
.entry-content span[style*="rgb(255,0,0)"],
.entry-content .has-vivid-red-color {
  color: #E0603F !important;
  font-weight: 700;
}

/* ===== パンくずリスト ===== */
.breadcrumb {
  background: #EFF8F6;
  border-bottom: 1px solid #DCEDE9;
}
.breadcrumb li { color: #586B67; }
.breadcrumb li a { color: #1D9C88; }
.breadcrumb li a:hover { color: #35B9A3; text-decoration: underline; }
.breadcrumb li:after { color: #A6D2CB; }   /* 区切りの「▶」 */
.breadcrumb li:last-child:after { display: none; }
.breadcrumb li:first-child a:before { color: #35B9A3; }  /* ホームアイコン */

/* ===== フォント ===== */
html body {
  --sgb-font-family:
    "Noto Sans JP",            /* Windows 10/11 */
    "Noto Sans CJK JP",        /* Android 6.0以降 */
    "Hiragino Sans",           /* iOS / macOS */
    "BIZ UDPGothic",           /* 旧Windows向けの保険 */
    "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: 0.02em;
}
.entry-content > p { line-height: 1.95; }

/* 記事下の最終更新日 */
.entry-modified-bottom {
  margin: 2.5em 0 0;
  text-align: right;
  color: #7A8A87;
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

/* ヘッダー（タイトル下）の日付を非表示 */
.single .article-header .entry-meta {
  display: none;
}

/* ============================================
   リスト共通
   ============================================ */
.entry-content ul:not([class]),
.entry-content ol:not([class]),
.entry-content ul.wp-block-list:not([class*="is-style-"]),
.entry-content ol.wp-block-list:not([class*="is-style-"]) {
  margin: 1.8em 0;
  padding: 1.1em 1.2em 1.1em 1.3em;
  border: 1px solid #DCEDE9;
  border-radius: 10px;
  background: #F7FCFB;
  list-style: none;
}

.entry-content ul:not([class]) > li,
.entry-content ol:not([class]) > li,
.entry-content ul.wp-block-list:not([class*="is-style-"]) > li,
.entry-content ol.wp-block-list:not([class*="is-style-"]) > li {
  position: relative;
  margin: 0;
  padding: 0.35em 0 0.35em 1.75em;
  line-height: 1.8;
}

/* ===== 箇条書き：ミントのドット ===== */
.entry-content ul:not([class]) > li::before,
.entry-content ul.wp-block-list:not([class*="is-style-"]) > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.82em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--wp--preset--color--sango-main, #35B9A3);
  box-shadow: 0 0 0 3px rgba(53, 185, 163, 0.16);
}

/* ===== 番号付き：丸バッジ ===== */
.entry-content ol:not([class]),
.entry-content ol.wp-block-list:not([class*="is-style-"]) {
  counter-reset: sango-ol;
}
.entry-content ol:not([class]) > li,
.entry-content ol.wp-block-list:not([class*="is-style-"]) > li {
  padding-left: 2.2em;
}
.entry-content ol:not([class]) > li::before,
.entry-content ol.wp-block-list:not([class*="is-style-"]) > li::before {
  counter-increment: sango-ol;
  content: counter(sango-ol);
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: var(--wp--preset--color--sango-main, #35B9A3);
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  text-align: center;
  line-height: 1.55em;
}

/* ===== 入れ子リストは枠を外す ===== */
.entry-content li > ul,
.entry-content li > ol {
  margin: 0.4em 0 0;
  padding: 0 0 0 0.2em;
  border: none;
  background: transparent;
  border-radius: 0;
}
.entry-content li > ul > li::before {
  background: #fff;
  box-shadow: 0 0 0 2px var(--wp--preset--color--sango-main, #35B9A3);
}

/* ===== 引用内のリストは素のまま ===== */
.entry-content blockquote ul,
.entry-content blockquote ol {
  padding: 0.5em 0 0.5em 1.2em;
  border: none;
  background: transparent;
}

/* ============================================
   表
   ============================================ */
.table-scroll {
  overflow-x: auto;
  margin: 1.9em 0;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #DCEDE9;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table {
  margin: 0;
  min-width: 100%;
}

.entry-content table {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 0.95em;
}

.entry-content th,
.entry-content td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
  padding: 0.85em 1em;
  border: none;
  border-bottom: 1px solid #E7F0EE;
  border-right: 1px solid #E7F0EE;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 見出し行 */
.entry-content thead th,
.entry-content .wp-block-table thead th {
  background: var(--wp--preset--color--sango-main, #35B9A3);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  border-right-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

/* 行見出し（左端がthの場合） */
.entry-content tbody th {
  background: #EAF7F4;
  color: #2C4742;
}

/* 縞模様 */
.entry-content tbody tr:nth-child(even) { background: #F8FBFA; }

/* 端の線を消す */
.entry-content th:last-child,
.entry-content td:last-child { border-right: none; }
.entry-content tbody tr:last-child th,
.entry-content tbody tr:last-child td { border-bottom: none; }

/* ===== スマホ ===== */
@media only screen and (max-width: 600px) {
  .entry-content table { font-size: 0.88em; }
  .entry-content th,
  .entry-content td { padding: 0.65em 0.75em; }

  /* 3列以上のときだけ横スクロールさせる */
  .table-scroll > table:has(tr > *:nth-child(3)) { min-width: 560px; }
  .table-scroll > table:has(tr > *:nth-child(4)) { min-width: 700px; }

  /* スクロール中も左端の項目名を固定 */
  .table-scroll > table:has(tr > *:nth-child(3)) :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .table-scroll > table:has(tr > *:nth-child(3)) tbody td:first-child {
    background: #fff;
    box-shadow: 1px 0 0 #E7F0EE;
  }
  .table-scroll > table:has(tr > *:nth-child(3)) tbody tr:nth-child(even) td:first-child {
    background: #F8FBFA;
  }
}