/*
Template: jin
Theme Name: jin-child
Author: CrossPiece
Version: 1.00
*/

/* ===================================================
   LearnNova Praxis カスタムスタイル
=================================================== */

/* ---------- 1. 基本フォント・読みやすさ ---------- */
body {
  font-size: 16px;
  line-height: 1.9;
  color: #333333;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  word-break: normal;
  overflow-wrap: break-word;
}

p {
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin-bottom: 1.4em;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---------- 2. 極端に大きい文字ブロックを修正 ---------- */
.wp-block-paragraph,
.wp-block-paragraph.has-large-font-size,
.wp-block-paragraph.has-x-large-font-size,
.wp-block-paragraph.has-huge-font-size {
  font-size: 16px !important;
  line-height: 1.9 !important;
}

.wp-block-quote,
.wp-block-pullquote {
  font-size: 16px !important;
  line-height: 1.9 !important;
}

/* ---------- 3. 見出しスタイルの統一・改善 ---------- */
h1 {
  font-size: 26px;
  line-height: 1.5;
  margin-bottom: 20px;
}

h2 {
  font-size: 20px !important;
  line-height: 1.5 !important;
  padding: 12px 18px !important;
  margin-bottom: 24px !important;
  border-radius: 4px;
}

h3 {
  font-size: 18px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

h4, h5, h6 {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ---------- 4. コンテンツ幅・中央揃え ---------- */
#main-contents-one {
  max-width: 860px !important;
  margin: 0 auto !important;
  float: none !important;
  padding: 0 20px;
}

.post-body {
  font-size: 16px;
  line-height: 1.9;
}

/* ---------- 5. 画像が切れる問題を修正 ---------- */
img {
  max-width: 100%;
  height: auto;
}

#main-image img,
#main-image {
  max-width: 100%;
  overflow: hidden;
}

/* ---------- 6. ヘッダーロゴの表示改善 ---------- */
#header-logo img {
  max-width: 100%;
  height: auto;
}

/* ---------- 7. 箇条書き・リストの読みやすさ ---------- */
ul, ol {
  padding-left: 1.5em;
  line-height: 2.0;
}

li {
  font-size: 16px;
  margin-bottom: 6px;
}

/* ---------- 8. ボタンデザインの改善 ---------- */
.btn,
.wp-block-button__link,
a.jin-btn {
  border-radius: 6px !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
  transition: opacity 0.2s ease;
}

.btn:hover,
.wp-block-button__link:hover {
  opacity: 0.85;
}

/* ---------- 9. セクション間の余白 ---------- */
.wp-block-group,
.wp-block-columns {
  margin-bottom: 40px !important;
}

/* ---------- 10. 記事タイトル（投稿一覧）の修正 ---------- */
/* 原因：JINの .h2-style01 が全h2に background-color: $base-color（濃紺）を適用 */
/* 対策：wp-block-post-title を明示的に上書きして背景を完全除去 */

.h2-style01 h2.wp-block-post-title,
.h2-style01 .wp-block-post-title,
h2.wp-block-post-title,
.wp-block-post-title {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #1a3a5c !important;
  padding: 8px 0 !important;
  margin: 4px 0 12px 0 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.h2-style01 h2.wp-block-post-title a,
.h2-style01 .wp-block-post-title a,
h2.wp-block-post-title a,
.wp-block-post-title a {
  color: #1a3a5c !important;
  background: none !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

.h2-style01 h2.wp-block-post-title a:hover,
.wp-block-post-title a:hover {
  color: #c9a227 !important;
  text-decoration: underline !important;
}

/* 記事一覧の日付スタイル */
.wp-block-post-date {
  font-size: 13px !important;
  color: #888888 !important;
  margin-bottom: 4px !important;
}

/* 記事カード全体の余白改善 */
.wp-block-post-template {
  gap: 24px !important;
}

.wp-block-post-template > li {
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 0 !important;
}

/* ---------- 11. 紺色背景内の文字を白に ---------- */
.wp-block-group[style*="background-color:#1a3a5c"] p,
.wp-block-group[style*="background-color:#1a3a5c"] h2,
.wp-block-group[style*="background-color:#1a3a5c"] h3,
.wp-block-group[style*="background-color:#1a3a5c"] strong,
.wp-block-group[style*="background-color:#1a3a5c"] li {
  color: #ffffff !important;
}

/* ゴールドボタンのテキストを濃紺に（視認性向上） */
.wp-block-button__link[style*="background-color:#c9a227"] {
  color: #1a3a5c !important;
  font-weight: 700 !important;
}

/* 青ボタン（道徳）のテキストを白に */
.wp-block-button__link[style*="background-color:#2a5c8a"] {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ボタンの共通スタイル改善 */
.wp-block-button__link {
  border-radius: 6px !important;
  padding: 14px 28px !important;
  transition: opacity 0.2s ease !important;
}

.wp-block-button__link:hover {
  opacity: 0.85 !important;
}

/* ---------- 12. grammarページ(350)の背景・文字色修正 ---------- */
/* accent-2プリセット色を紺に上書き */
.page-id-350 .has-accent-2-background-color {
  background-color: #1a3a5c !important;
}
.page-id-350 .has-accent-2-background-color p,
.page-id-350 .has-accent-2-background-color h2,
.page-id-350 .has-accent-2-background-color strong,
.page-id-350 .has-accent-2-background-color li {
  color: #ffffff !important;
}

/* ---------- 14. privacyページ(7)のh2背景・文字色修正 ---------- */
.page-id-7 h2 {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #1a3a5c !important;
  border-left: 4px solid #c9a227 !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  margin-bottom: 16px !important;
}

/* ---------- 13. モバイル対応 ---------- */
@media (max-width: 767px) {
  body {
    font-size: 15px;
  }
  p {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }
  h2 {
    font-size: 18px !important;
  }
  h3 {
    font-size: 16px !important;
  }
  #main-contents-one {
    padding: 0 12px;
  }
}