/* みたか塾ブランド（ティール＋黄・丸ゴ・手描き）
   このファイルが本体。functions.php から filemtime() 付きで読み込まれるので、
   直して上げれば ?ver= が変わり、閲覧者のキャッシュが確実に切れる。
   色と書体の正本は 20_HP/index.html の :root。変えるときは両方そろえること。 */

/* ============================================================
   みたか塾 WordPress 側デザイン
   サーバー上の置き場所:
     /home/xs011351/mitakanojuku.com/public_html/wp-content/themes/lightning-child/style.css
   静的ページ側の正本は 20_HP/index.html の :root。色と書体はそこと必ず揃える。
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Yusei+Magic&display=swap");

:root {
  --teal:       #2f7f95;
  --teal-deep:  #215d6e;
  --teal-soft:  #e8f2f4;
  --yellow:     #fdd456;
  --yellow-soft:#ffe184;
  --yellow-pale:#fff8e3;
  --navy:       #1854b6;
  --ink:        #22333a;
  --muted:      #5f7078;
  --line:       #e4ded0;
  --cream:      #fdf8ec;

  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body:  "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-hand:  "Yusei Magic", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
}

/* ---------- 土台：ここが一番効く（既定は 14px / 行間1.5 で詰まっている） ---------- */
body,
body.wp-singular,
.entry-body,
.mainSection {
  font-family: var(--font-body);
  color: var(--ink);
}
body { font-size: 16px; line-height: 1.9; }
.entry-body p,
.entry-body li { font-size: 1rem; line-height: 1.95; }

h1, h2, h3, h4, h5,
.page-header_pageTitle,
.vk_faq_title,
.vk_borderBox_title {
  font-family: var(--font-round);
  font-weight: 900;
  letter-spacing: 0.01em;
}

a { color: var(--teal-deep); }
a:hover { color: var(--teal); }

/* ---------- ヘッダー ---------- */
.siteHeader { border-bottom: 1px solid var(--line); background: #fff; }
.siteHeader_logo a,
.siteHeader_logo span {
  font-family: var(--font-round); font-weight: 900; color: var(--teal);
}
.gMenu > li > a { color: var(--muted); font-weight: 500; }
.gMenu > li > a:hover,
.gMenu > li.current-menu-item > a { color: var(--teal); }
.gMenu > li > a .gMenu_name { font-family: var(--font-body); font-weight: 500; }
.gMenu > li > a::after,
.gMenu > li > a::before { background-color: var(--yellow) !important; }
.gMenu > li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--yellow); }

/* ---------- ページ見出しの帯（既定は濃紺 #145DA0） ---------- */
.page-header {
  background: var(--teal) !important;
  padding: 34px 0;
  position: relative;
}
.page-header_pageTitle {
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.5;
}

/* ---------- パンくず ---------- */
.breadSection { background: var(--cream); border-bottom: 1px solid var(--line); }
.breadSection .breadcrumb,
.breadSection a { font-size: 0.85rem; color: var(--muted); }
.breadSection a:hover { color: var(--teal); }

/* ---------- 本文の見出し ----------
   注意：このサイトの記事内は見出しレベルが h1→h4 と飛んでいて、
   タグでは区別できない。「色つき背景がついた見出しブロック」を
   セクション見出しとして扱う（ブロックエディタでそう作られているため）。 */

/* 記事の先頭にある大見出し（h1で置かれている） */
.entry-body h1.wp-block-heading {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.5; color: var(--ink); margin: 6px 0 30px;
}

/* セクション見出し：バラバラのパステル帯をやめて、黄色い手描き下線に */
.entry-body h2,
.entry-body h2.wp-block-heading,
.entry-body .wp-block-heading.has-background {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--teal-deep) !important;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  line-height: 1.55;
  padding: 0 0 8px !important;
  margin: 52px 0 20px;
  position: relative;
  display: block;
}
.entry-body h2::after,
.entry-body h2.wp-block-heading::after,
.entry-body .wp-block-heading.has-background::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; max-width: 18em; height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3,13 C60,3 120,17 180,8 C225,2 270,12 297,7' fill='none' stroke='%23fdd456' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
}
/* 中央寄せの見出しでは下線も中央に */
.entry-body .wp-block-heading.has-text-align-center::after { left: 50%; transform: translateX(-50%); }

.entry-body h3,
.entry-body h3.wp-block-heading {
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink);
  background: none; border: none;
  padding: 0 0 0 14px;
  margin: 34px 0 14px;
  border-left: 5px solid var(--teal);
  border-radius: 0;
}
.entry-body h3.has-text-align-center { border-left: none; padding-left: 0; }
/* h4は「見出し」として使われているページと「リード文」のページが混在している。
   どちらでも読める中間の大きさにする（レベルで大きさを決めない）。 */
.entry-body h4:not(.has-background) {
  font-size: 1.15rem; line-height: 1.65; color: var(--teal-deep);
  margin: 30px 0 12px; padding-left: 12px; border-left: 4px solid var(--teal);
}
.entry-body h4.has-text-align-center:not(.has-background) { border-left: none; padding-left: 0; }

/* 折りたたみ（details）ブロック */
.entry-body details.wp-block-details {
  background-color: var(--cream) !important;
  border: 2px solid var(--line); border-radius: 16px;
  padding: 4px 20px !important; margin-bottom: 12px;
}
.entry-body details.wp-block-details summary {
  font-family: var(--font-round); font-weight: 700;
  color: var(--teal-deep); padding: 13px 0; cursor: pointer;
}
.entry-body details.wp-block-details summary::marker { color: var(--teal); }

/* ---------- リスト：黄色い点 ---------- */
.entry-body ul:not(.gMenu):not(.menu) { list-style: none; padding-left: 4px; }
.entry-body ul:not(.gMenu):not(.menu) > li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
}
.entry-body ul:not(.gMenu):not(.menu) > li::before {
  content: ""; position: absolute; left: 2px; top: 0.78em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--yellow);
}
.entry-body ol > li { margin-bottom: 8px; }
.entry-body ol > li::marker { color: var(--teal); font-family: var(--font-round); font-weight: 900; }

/* ---------- 表：ヘッダーをティール、偶数行をクリーム ---------- */
.entry-body table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.entry-body table th {
  background: var(--teal) !important;
  color: #fff !important;
  font-family: var(--font-round); font-weight: 700; font-size: 0.88rem;
  border-color: var(--teal) !important;
  padding: 11px 13px;
}
.entry-body table td {
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 11px 13px;
}
.entry-body table tbody tr:nth-child(even) td { background: var(--cream); }
.wp-block-flexible-table-block-table,
.wp-block-table { overflow-x: auto; }

/* ---------- ボタン：黄色いピル ---------- */
.entry-body .wp-block-button__link,
.entry-body .vk_button_link,
.vk_button .vk_button_link {
  background: var(--yellow) !important;
  color: var(--navy) !important;
  border-color: var(--yellow) !important;
  font-family: var(--font-round); font-weight: 700;
  border-radius: 999px !important;
  padding: 15px 30px;
  box-shadow: 0 5px 0 #e0b634;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.entry-body .wp-block-button__link:hover,
.vk_button .vk_button_link:hover {
  transform: translateY(2px); box-shadow: 0 3px 0 #e0b634;
}
.vk_button_link_caption { color: var(--muted); font-size: 0.86rem; }

/* 横幅いっぱいのボタンは「申込」ではなく目次リンクとして使われている
   （動画メニューのページなど）。全部を黄色にすると黄色だらけになるので、
   幅100%/50%のものだけティールの淡い面にする。 */
.entry-body .wp-block-button__width-100 > .wp-block-button__link,
.entry-body .wp-block-button__width-50 > .wp-block-button__link {
  background: var(--teal-soft) !important;
  color: var(--teal-deep) !important;
  border: 2px solid var(--teal-soft) !important;
  box-shadow: none;
}
.entry-body .wp-block-button__width-100 > .wp-block-button__link:hover,
.entry-body .wp-block-button__width-50 > .wp-block-button__link:hover {
  border-color: var(--teal) !important; transform: none;
}

/* ---------- VK：FAQ ---------- */
.vk_faq {
  background: #fff; border: 2px solid var(--line);
  border-radius: 18px; padding: 20px 22px; margin-bottom: 16px;
}
.vk_faq .vk_faq_title {
  font-size: 1.02rem; color: var(--teal-deep); line-height: 1.7;
}
.vk_faq .vk_faq_title::before {
  background: var(--teal) !important; color: #fff !important;
  font-family: var(--font-round); font-weight: 900;
  border-radius: 50% !important;
}
.vk_faq .vk_faq_content { color: var(--muted); font-size: 0.96rem; }
.vk_faq .vk_faq_content::before {
  background: var(--yellow) !important; color: var(--navy) !important;
  font-family: var(--font-round); font-weight: 900;
  border-radius: 50% !important;
}

/* ---------- VK：枠ボックス ---------- */
.vk_borderBox {
  border: 2px solid var(--line) !important;
  border-radius: 18px !important;
  background: #fff;
}
.vk_borderBox_title_container { border-radius: 16px 16px 0 0 !important; }
.vk_borderBox_title {
  color: var(--teal-deep);
  font-size: 1.1rem;
}
/* タイトル帯つきの枠（is-style-…-kado-tit-banner）。テーマ既定は青。 */
.vk_borderBox_title_container {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
}
.vk_borderBox_title_container .vk_borderBox_title { color: #fff !important; }
.vk_borderBox[class*="kado-tit-banner"] { border-color: var(--teal) !important; }

/* ---------- VK：フロー ---------- */
.vk_flow_frame { border-color: var(--line); }
.vk_flow_frame_title { font-family: var(--font-round); color: var(--teal-deep); }
.vk_flow_frame::after { border-top-color: var(--yellow) !important; }

/* ---------- 画像 ---------- */
.entry-body img { border-radius: 12px; height: auto; }
.entry-body figure { margin-bottom: 22px; }
.entry-body figcaption { color: var(--muted); font-size: 0.86rem; }

/* ---------- 記事内の色つきボックスをクリームに統一 ----------
   ブロックエディタで1個ずつ違うパステル色（#ffe7ca / #fff3e4 / #0792e33b …）が
   直接指定されていて、これがバラバラに見える最大の原因。
   元のカラフルな状態に戻したいときは、このブロックごと消す。            */
.entry-body .wp-block-columns.has-background[style*="background-color"],
.entry-body .wp-block-column.has-background[style*="background-color"],
.entry-body .wp-block-group.has-background[style*="background-color"],
.entry-body details.wp-block-details.has-background[style*="background-color"] {
  background-color: var(--cream) !important;
  border-radius: 18px;
  padding-top: 22px; padding-bottom: 22px;
}
.entry-body .wp-block-columns.has-background .wp-block-column.has-background[style*="background-color"] {
  background-color: transparent !important; padding-top: 0; padding-bottom: 0;
}

/* ---------- 黄色マーカー（既定はレモン色）をブランドの黄に ---------- */
.vk_highlighter,
.entry-body [style*="linear-gradient(transparent"] {
  background: linear-gradient(transparent 62%, var(--yellow-soft) 62%) !important;
}

/* ---------- フッター ---------- */
.siteFooter {
  background: var(--teal-deep) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}
.siteFooter a,
.siteFooter .footerMenu a { color: rgba(255, 255, 255, 0.86) !important; }
.siteFooter a:hover { color: var(--yellow) !important; }
.siteFooter h4, .siteFooter .widget-title { color: var(--yellow-soft) !important; }
.footerMenu { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.copySection {
  background: var(--teal-deep) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.82rem;
}

/* ---------- モバイル ---------- */
.vk-mobile-nav-menu-btn { border-color: var(--teal) !important; color: var(--teal) !important; }
.vk-mobile-nav { background: #fff; }
.vk-mobile-nav .menu a { font-family: var(--font-body); color: var(--ink); }

@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .page-header { padding: 24px 0; }
  .entry-body h2 { margin-top: 40px; }
}

/* ============================================================
   ブログ記事まわり（サイドバー・記事情報・コメント欄・前後記事）
   ============================================================ */

.entry-title {
  font-family: var(--font-round); font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.5;
  color: var(--ink); margin-bottom: 14px;
}
.entry-meta, .entry-meta_items, .published, .updated {
  color: var(--muted) !important; font-size: 0.86rem;
}
.entry-meta_items_term_button,
.btn-primary {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
  font-family: var(--font-round); font-weight: 700;
  border-radius: 999px !important;
}
.btn-primary:hover { background: var(--teal-deep) !important; border-color: var(--teal-deep) !important; }

/* サイドバー */
.subSection-title, .widget-title {
  font-family: var(--font-round); font-weight: 900;
  font-size: 1rem; color: var(--teal-deep);
  border: none !important; background: none !important;
  padding: 0 0 8px !important; margin-bottom: 14px;
  border-bottom: 3px solid var(--yellow) !important;
}
.subSection .widget { margin-bottom: 34px; }
.widget_postlist .media { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.media-heading, .media-heading a { font-family: var(--font-round); font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.media-heading a:hover { color: var(--teal); }
.localNav li a, .widget_categories li a, .widget_archive li a {
  border-color: var(--line) !important; color: var(--ink);
}
.localNav li a:hover, .widget_categories li a:hover { background: var(--teal-soft); color: var(--teal-deep); }

/* 前後記事のカード */
.card-post, .postNextPrev .card {
  border: 2px solid var(--line) !important; border-radius: 18px !important; overflow: hidden;
}
.postNextPrev_label { font-family: var(--font-hand); color: var(--teal); }
.card-title, .card-title a { font-family: var(--font-round); font-weight: 700; color: var(--ink); }
.card-date { color: var(--muted); font-size: 0.84rem; }

/* コメント欄 */
.comment-reply-title { font-family: var(--font-round); font-weight: 900; color: var(--teal-deep); }
.comment-notes, .required-field-message { color: var(--muted); font-size: 0.88rem; }
.comment-form label { font-family: var(--font-round); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.entry-body input[type="text"],
.entry-body input[type="email"],
.entry-body textarea {
  border: 2px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 1rem;
  background: #fff;
}
.comment-form input:focus, .comment-form textarea:focus {
  outline: none; border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.form-submit input[type="submit"],
.entry-body input[type="submit"] {
  background: var(--yellow) !important; color: var(--navy) !important;
  border: none !important; border-radius: 999px !important;
  font-family: var(--font-round); font-weight: 700;
  padding: 13px 30px; box-shadow: 0 5px 0 #e0b634;
}

/* ページトップへ戻るボタン */
.page_top_btn { background: var(--teal) !important; border-radius: 50% !important; }
.page_top_btn:hover { background: var(--teal-deep) !important; }