/*
 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
*/
.entry-content h2 {
  font-size: 24px !important;/*文字のサイズ*/
  border-left: 10px solid #4DA1FF;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(77,161,255,.05);/*背景色*/
  color: #272727;
  margin-bottom: 15px;
}

.entry-content h3 {
  font-size: 20px !important;
  font-weight: 600;
  color: #272727;
  background: rgba(77,161,255,.08);
  padding: .6em .8em .4em;
  margin: 1.6em 0 .9em;
  border-top: 4px solid #4DA1FF; /* 上部ラインに変更 */
}

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


/* 交差ラインブロック */
.CrossBox {
  position: relative;
  width: 85%;
  margin: 30px auto; /* 上下余白を増やしつつ中央に配置 */
  padding: 1.5em;
  color: #323232;
  border-top: solid 2px #5E8B6D;
  border-bottom: solid 2px #5E8B6D;

  /* ▼ 追加：フォントを“少しだけ”小さく＆行間確保 */
  font-size: 0.95rem;   /* 例：約−5％（ベース16pxなら約15.2px） */
  line-height: 1.7;     /* 可読性のため行間をやや広めに */
}

/* モバイルでさらに少しだけ小さく */
@media (max-width: 480px) {
  .CrossBox {
    font-size: 0.92rem; /* 例：スマホでは更に微調整 */
  }
}

.CrossBox:before,
.CrossBox:after {
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: calc(100% + 20px);
  background-color: #5E8B6D;
}

.CrossBox:before { left: 10px; }
.CrossBox:after  { right: 10px; }

.CrossBox p {
  margin: 0;
  padding: 0;
}

/* （任意）CrossBox内に見出しを入れる場合の過剰縮小防止 */
.CrossBox h2,
.CrossBox h3,
.CrossBox strong {
  font-size: 1em; /* 見出しがある場合は本文と同サイズに揃える */
  font-weight: 600;
}

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

/* Google Fonts の読み込み（テーマで既に読み込んでいる場合は不要） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap");

/* サイト全体のフォントを上書き（本文・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: 700;
	font-size: 28px;
}
h2 { font-weight: 600; }
h3,
h4 {
	font-weight: 600;
	font-size: 20px;
}
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; /* ホバー色を少し変更 */
}


/* === スマートフォンなど画面幅が狭い時用のスタイル === */
@media screen and (max-width: 768px) {
  /* テーブルの罫線をリセット */
  .sortable, .sortable thead, .sortable tbody, .sortable th, .sortable td, .sortable tr {
    display: block;
  }

  /* 元のヘッダーは非表示にする */
  .sortable thead {
    display: none;
  }

  .sortable tr {
    border: 1px solid #ccc;
    margin-bottom: 1em; /* 各項目の間に余白をとる */
  }

  .sortable td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; /* ラベルを表示するスペースを確保 */
    text-align: right; /* 値を右揃えに */
  }
  
  /* :before擬似要素を使って、各セルにラベル（項目名）を表示する */
  .sortable td:before {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label); /* HTMLのdata-label属性の値を取得 */
  }

  .sortable td:last-child {
    border-bottom: 0;
  }

  /* 縞模様やホバーは不要なのでリセット */
  .sortable tbody tr:nth-child(even),
  .sortable tbody tr:hover {
    background-color: #fff;
  }
}

/* ---------------- ラッパーにスクロールを持たせる（全端末） ----------------  */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-scroll > table{
  display: table !important;
  width: auto !important;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: auto;
}

/* PCはそのまま */
@media (min-width: 769px){
  .table-scroll{ overflow: visible; }
  .table-scroll > table{ min-width: auto; }
}

/* ---------------- スマホ時 ---------------- */
@media (max-width: 768px){

  /* 積み上げ化を無効化（本来の表に戻す） */
  .table-scroll .sortable,
  .table-scroll .sortable thead,
  .table-scroll .sortable tbody,
  .table-scroll .sortable tr,
  .table-scroll .sortable th,
  .table-scroll .sortable td{
    display: table !important;
  }
  .table-scroll .sortable thead{ display: table-header-group !important; }
  .table-scroll .sortable tbody{ display: table-row-group !important; }
  .table-scroll .sortable tr   { display: table-row !important; }
  .table-scroll .sortable th,
  .table-scroll .sortable td   { display: table-cell !important; }

  /* レイアウト調整 */
  .table-scroll .sortable tr{
    border: none !important;
    margin: 0 !important;
  }
  .table-scroll .sortable th,
  .table-scroll .sortable td{
    border: 1px solid #eee;
    text-align: left !important;
    vertical-align: middle;
    white-space: nowrap;
    position: static !important;
    float: none !important;
    width: auto !important;
    /* ★ここで読みやすい余白を再設定 */
    padding: 8px 12px !important;
  }

  /* 疑似ラベルを消す */
  .table-scroll .sortable td:before{
    content: none !important;
  }

  /* 偶数行やhover色リセット */
  .table-scroll .sortable tbody tr:nth-child(even),
  .table-scroll .sortable tbody tr:hover{
    background: inherit !important;
  }
}

/* .sortable を付けていない通常tableも横スクロール化 */
@media (max-width: 768px){
  .table-scroll > table:not(.sortable){
    min-width: 720px;
  }
  .table-scroll > table:not(.sortable) th,
  .table-scroll > table:not(.sortable) td{
    white-space: nowrap;
    text-align: left;
    padding: 8px 12px !important;
  }
}
@media (max-width: 768px){
  .table-scroll{
    position: relative;
    padding-bottom: 20px; /* スクロールバー用の空間（ヒントと被らない程度） */
  }

  /* ---- 横スクロールヒント ---- */
  .table-scroll::after{
    content: "→ 横にスクロールできます";
    position: absolute;
    left: 6px;              /* 左寄せ */
    bottom: 10px;           /* ← スクロールバーとの間を数pxあける（自然） */
    font-size: 12px;
    color: #666;
    background: rgba(240,240,240,0.85);
    padding: 2px 7px;       /* 少しコンパクト */
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    transition: opacity .3s ease; /* ← フェード用をここで設定 */
  }

  /* フェードアウト時 */
  .table-scroll.scrolled::after{
    opacity: 0;
  }
}
/* ======
 * 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: 0 0 8px 0;
  font-size: 0.9rem;
  opacity: .85;
}
.entry-header .custom-meta-right .posted-on {
  display: inline !important;
  visibility: visible !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-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 公開日を非表示化
 * ==== */