/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* Google Fonts の読み込み（テーマで既に読み込んでいる場合は不要） */
/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap"); */
/* H1 */
.single .entry-title,
.page .entry-title {
  font-size: 30px;
  font-weight: 700;
  color: #272727;
  line-height: 1.5;
  padding-bottom: .4em;
  margin-bottom: .8em;
  border-bottom: 3px solid #5C8D76;
}
/* H2（Gutenberg／GenerateBlocks対応でセレクタ強化） */
.single .entry-content h2,
.page .entry-content h2,
.single .entry-content h2.wp-block-heading,
.page .entry-content h2.wp-block-heading,
.single .entry-content .gb-headline h2,
.page .entry-content .gb-headline h2  {
  font-size: 26px;
  border-left: 10px solid #5C8D76;
  padding: .5em .7em;
  background: rgba(92,141,118,.07);
  color: #272727;
  margin: 1.6em 0 .9em;
}

/* ブロック側の余計な背景や枠を無効化（付いている場合のみ） */
.single .entry-content h2.has-background,
.page .entry-content h2.has-background,
.single .entry-content h2.is-style-default,
.page .entry-content h2.is-style-default {
  background: rgba(92,141,118,.07) !important;
  box-shadow: none !important;
  border: none !important;
  border-left: 10px solid #5C8D76 !important;
  padding: .5em .7em !important;
}

.entry-content h3 {
  font-size: 20px !important;
  font-weight: 600;
  color: #272727;
  background: rgba(92,141,118,.10);
  padding: .6em .8em .4em;
  margin: 1.6em 0 .9em;
  border-top: 4px solid #5C8D76;
}

.entry-content h4 {
  font-size: 18px !important;
  font-weight: 600;
  color: #272727;
  margin: 1.4em 0 .6em;
  padding-bottom: .3em;
  border-bottom: 2px dashed #5C8D76;
}

/* ======
 * FONT SETTINGS
 * ==== */

　/* サイト全体のフォントを上書き（本文・UI含む） */
body,
p,
li,
a,
span,
div,
table,
th,
td,
input,
textarea,
button {
  font-family: "Noto Sans JP", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Meiryo", sans-serif !important;
  font-weight: 400;
}

　/* 見出し（必要に応じて調整） */
h1 {
	font-weight: 800;
	font-size: 28px;
}
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4 {
	font-weight: 500;
}
h5,
h6 { font-weight: 300; }

　/* 強調テキストの太さ調整（過剰なボールド感を防ぐ） */
strong,
b {
  font-weight: 600;
}

　/* 可読性の向上（行間・文字間・アンチエイリアス） */
body {
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ======
 * END FONT SETTINGS
 * ==== */
/* 蛍光ペン 細オレンジ */
.marker {
	background-image: -webkit-linear-gradient(transparent 60%, rgba(255,220,104,0.6) 0%);
	background-image: linear-gradient(transparent 60%, rgba(255,220,104,0.6) 0%);
    font-weight: bold;
}
/* ======
 * テーブル
 * ==== */
　/* === PCなど通常の画面幅用のスタイル === */
.sortable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: sans-serif;
}

.sortable th,
.sortable td {
  border: 1px solid #ddd;
  padding: 12px 15px; /* 左右の余白を少し広げました */
  text-align: left;
}

.sortable thead th {
  background-color: #fffcf4; /* 背景色を変更 */
  font-weight: 700;          /* 太さを少し強調 */
  font-size: 1.1em;          /* 文字を少し大きく */
  color: #333;
  cursor: pointer;
}

.sortable tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.sortable tbody tr:hover {
  background-color: #f0f8ff; /* ホバー色を少し変更 */
}

/* スクロールラッパー */
.table-scroll {
  overflow-x: auto !important;     /* 強制的に横スクロール許可 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
  padding-bottom: 4px;             /* 下に少し余白を入れる */
  margin: 1em 0;
}

/* ラッパー内テーブル */
.table-scroll table {
  min-width: 700px;                /* 横スクロールが出る最低幅（調整可） */
  width: auto !important;          /* 100%指定を打ち消す */
  max-width: none !important;
  border-collapse: collapse;
  white-space: nowrap;             /* 折り返し防止 */
}

/* 横スクロールヒント（好みで削除可） */
.table-scroll::after {
  content: "→ 横スクロールできます";
  display: block;
  text-align: right;
  font-size: 12px;
  color: #9ca3af;
  padding-right: 10px;
  margin-top: -12px;
}

/* 親要素で overflow:hidden が効いている場合の防御 */
.entry-content,
.inside-article,
.site-content {
  overflow: visible !important;
}

/* ======
 * END テーブル
 * ==== */
/* ======
 * 特定のリストだけに適用するカスタムスタイル
 * ==== */
　/* .custom-list クラスが指定されたリスト全体を装飾 */
.custom-list {
  width: 85%;                       /* ← 幅を85%に設定 */
  margin: 1.5em auto;               /* ← 上下の余白はそのまま、左右を自動調整して中央揃えに */
  background: #fffcf4;              /* 背景色 */
  border: 1px solid #eee;           /* 枠線（薄いグレー）を追加 */
  border-radius: 8px;               /* 角の丸み */
  box-shadow: 0px 0px 5px silver;   /* 影 */
  padding: 0.8em 1em 0.8em 1.5em;   /* 内側の余白を少し調整 */
  list-style-position: inside;      /* 先頭の記号（・や数字）をボックスの内側に表示 */
}

　/* .custom-list内の各リスト項目のスタイル */
.custom-list li {
  line-height: 1.6;                 /* 行の高さを少し広げて読みやすく */
  padding: 0.6em 0.5em;               /* 各項目の上下左右の余白 */
  border-bottom: 1px dotted #ccc;   /* 項目の間に区切り線（点線）を入れる */
}

　/* 最後のリスト項目だけ、下の区切り線を消す */
.custom-list li:last-child {
  border-bottom: none;
}
/* ======
 * END 特定のリストだけに適用するカスタムスタイル
 * ==== */
/* ======
 * 公開日を非表示化
 * ==== */
　/* 既定の“左側投稿日”だけを消す：custom-meta-right には当てない */
.entry-header .entry-meta:not(.custom-meta-right) .posted-on {
  display: none !important;
}

　/* タイトル下の「最終更新日」ブロック（行間調整） */
.custom-meta-right {
  text-align: right;
  margin-top: 6px;      /* ← タイトルとの間に6pxの余白 */
  margin-bottom: 10px;  /* ← 下側にも少し余裕 */
  font-size: 0.9rem;
  opacity: .85;
  line-height: 1.6;
}

/* 本文末の公開日（右端揃え） */
.entry-meta.custom-meta-bottom {
  display: block;
  width: 100%;
  text-align: right;
  margin-top: 1em;
  font-size: 0.9em;
  color: #666;
}
.entry-header .custom-meta-right .posted-on {
  display: inline !important;
  visibility: visible !important;
}

　/* タイトルの下マージンを少し減らしてバランス調整 */
.entry-title {
  margin-bottom: 0.2em;
}

　/* 念のため、既定の著者表示も抑止（左側で出るケースの保険） */
.entry-header .entry-meta:not(.custom-meta-right) .byline,
.entry-header .entry-meta:not(.custom-meta-right) .author-name {
  display: none !important;
}
/* ======
 * END 公開日を非表示化
 * ==== */

/* ===== Related (CRP)  ===== */
　/* 見出し（任意）。見出しもワイドMAXにしない場合 */
h2.related-title{
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
 　 /* 横幅を狭める（列幅が広いテーマでも窮屈に見えない） */
  --rel-max: 640px;                          /* 好みで 560–720px 程度に */
  max-width: min(var(--rel-max), 100%);
}

　/* リスト本体：装飾は極力削り、幅だけスリムに */
ul.crp_related{
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  max-width: min(var(--rel-max, 640px), 100%);  /* 見出しと同じ幅に */
}

　/* 左のごちゃつきを全部カット（矢印・縦線など） */
ul.crp_related > li{ 
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative;
}
ul.crp_related > li:last-child{ border-bottom: none; }
ul.crp_related > li::before{ content: none !important; } /* 左アイコン/罫線を消す */

/* リンクのスタイルはテーマ既定を尊重（色・下線は変更しない） */
/* 何も書かないのが最小。行全体の押しやすさだけ微調整したい場合は下を解放 */
/*
ul.crp_related a{ display: inline-block; }
ul.crp_related > li:hover a{ text-decoration: underline; }
*/

　/* 見出しとボックスをセットで左揃えにしたい場合のラッパ（任意） */
.related-wrap{ margin-top: 24px; }
.related-wrap > *{ max-width: min(var(--rel-max, 640px), 100%); }
/* ===== END Related (CRP)  ===== */

/* ===== RankMathのパンくず ===== */
/* パンくず全体の枠・配置 */
.breadcrumbs-wrapper {
  padding: 10px 20px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;      /* 本文との間隔 */
  box-sizing: border-box;
  
  /* デザイン */
  font-size: 14px;
  line-height: 1.5;         /* 行間を少し広げて読みやすく */
  color: #666;
  background-color: #f9f9f9;
  border-radius: 4px;
}

/* 内部要素の余計な余白を強制リセット */
.breadcrumbs-wrapper p,
.breadcrumbs-wrapper span,
.breadcrumbs-wrapper div {
  margin: 0 !important;
  padding: 0 !important;
}

/* リンクデザイン */
.breadcrumbs-wrapper a {
  color: #0066cc;
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumbs-wrapper a:hover {
  text-decoration: underline;
  color: #004499;
}

/* ▼ スマホ微調整（折り返し表示に変更） */
@media (max-width: 768px) {
  .breadcrumbs-wrapper {
    padding: 8px 15px;      /* 余白を少し詰める */
    font-size: 11px;        /* 文字サイズを小さくして圧迫感を軽減 */
    line-height: 1.4;       /* 行間調整 */
    white-space: normal;    /* 自動で改行させる */
    overflow-x: visible;    /* スクロールさせない */
  }
}
/* ===== END RankMathのパンくず===== */

/* 当サイトでは広告を掲載しています。 */
.entry-content .ad-disclosure{
  display:flex; justify-content:center; align-items:center;
  font-size:.8rem; line-height:1.6;
  color:#9ca3af;
  padding:.45em .8em; margin:0 0 0.4 0em;
  border:none; border-radius:.3em; text-align:center;
}
.entry-content .ad-disclosure p{ margin:0; letter-spacing:.02em; }
/* END 当サイトでは広告を掲載しています。 */

/* タイトル（h1） */
.entry-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 .6em;
  word-break: keep-all;
}

/* 検索ページの大見出し（Search Results for ...） */
.search .page-header .page-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.25;
}

/* 見出し（h2） */
.single .entry-content h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  line-height: 1.4;
  margin: 2em 0 1em;
  font-weight: 700;
}
/* 本文の行間・段落間を広げて読みやすく */
.single .entry-content { line-height: 1.9; }
.single .entry-content p { margin: 0 0 1.0em; }
.single .entry-content li { line-height: 1.8; margin: .3em 0; }

/* 最終更新日の右寄せ＆トーン調整 */
.entry-meta.custom-meta-right {
  display: flex;
  justify-content: flex-end;  /* ← 右寄せ */
  align-items: center;
  gap: .4em;
  text-align: right;
  font-size: 0.9rem;
  color: #6b7280;             /* サブ情報らしいグレー */
  margin-top: 0.4em;
}

　/* 内包テキストの余白と改行防止 */
.entry-meta.custom-meta-right .posted-on {
  white-space: nowrap;
  margin: 0;
  padding: 0;
  font-weight: 400;
}
/* END 最終更新日の右寄せ＆トーン調整 */
/* RTOC 目次トグル「目次を開く／閉じる」を可視化 */
.entry-content #rtoc-mokuji-wrapper .rtoc_open_close{
  color:#111 !important;                 /* 文字を濃く */
  background:#f3f4f6 !important;         /* 白地で読める薄グレー背景 */
  border:1px solid #e5e7eb !important;
  border-radius:4px;
  padding:2px 8px !important;
  font-size:.8rem;
  line-height:1.4;
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  text-indent:0 !important;
}
.entry-content #rtoc-mokuji-wrapper .rtoc_open_close:hover{
  background:#e5e7eb !important;
  color:#000 !important;
}
　/* 子要素に色が継承されない場合の保険 */
.entry-content #rtoc-mokuji-wrapper .rtoc_open_close *{
  color:inherit !important;
  opacity:1 !important;
  filter:none !important;
}

/* サイドバー追従 */
@media (min-width: 1024px) {
  #ai_widget-2 {
    z-index: 1000;
  }
}
/* END サイドバー追従 */

/* ===== AdSense CLS（レイアウトシフト）対策 ===== */
/* 1. 広告ブロックの基本設定（全共通） */
.code-block {
    display: block;
    clear: both;
    text-align: center; /* 広告を中央寄せ */
    margin-top: 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
    /* 読み込み前のガタつきを防ぐための「仮の高さ」 */
    min-height: 250px; 
    transition: min-height 0.3s ease; /* 高さが変わる際のアニメーション */
}

/* 2. 例外設定：PR表記（code-block-1）
   ※これは広告本体ではないため、高さを強制しない */
.code-block-1 {
    min-height: auto !important;
    margin: 0 0 10px 0 !important;
    text-align: left; /* PR表記は左寄せが自然 */
}

/* 3. ユニットごとの個別高さ調整（モバイル基準） */

/* 最初のH2直前(2) & まとめのH2直前(6)
   → レクタングル（300x250）が基本 */
.code-block-2, 
.code-block-6 {
    min-height: 250px;
}

/* 2つ目のH2直前(4)
   → 記事内広告は縦に少し伸びる傾向があるため余裕を持たせる */
.code-block-4 {
    min-height: 280px; 
}

/* 記事本文後(3)：Multiplex広告
   → 関連記事風に縦に並ぶため、十分な高さを確保 */
.code-block-3 {
    min-height: 400px;
}

/* サイドバー追従(5)
   → モバイルでサイドバーが記事下に落ちた際のスペース確保 */
.code-block-5 {
    min-height: 250px;
}


/* 4. PC（タブレット以上）での表示最適化
   screen width 769px以上の場合の設定 */
@media (min-width: 769px) {
    /* PCではレクタングル広告の余白も含め少し高さを増やす */
    .code-block-2,
    .code-block-4,
    .code-block-6 {
        min-height: 280px; 
    }

    /* サイドバー追従(5)
       → PCのスカイスクレイパー（縦長）広告用に高さを確保 */
    .ai-sticky-widget,
    .code-block-5 {
        min-height: 600px;
    }
}
/* ===== END AdSense CLS（レイアウトシフト）対策 ===== */

/* ===== 比較表（Table）のデザイン調整 ===== */
/* スマホで表がはみ出さないようにスクロール化 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5em;
    padding-bottom: 5px; /* スクロールバー用余白 */
}

/* 表のレイアウト崩れ防止 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 列幅を固定してガタつき防止 */
    font-size: 0.95em; /* スマホで見やすい文字サイズ */
}
/* ===== END 比較表（Table）のデザイン調整 ===== */