/*
  OurBest かわいい版デザイン  2026-11-09
  読み込み: 子テーマ functions.php で cocoon-child-style の後に enqueue
  方針: Cocoon のスキンは使わず、CSS の上書きだけで雰囲気を変える（元に戻すときはこのファイルの enqueue を外す）
  パレット: ネイビー(ロゴ) #2b3f7e / パステルブルー #dcebfb #eaf3ff #f3f8fe / ピンク #f28cb4 #fde6ef / 本文 #3f4a5c
*/

:root {
  --ob-navy: #2b3f7e;
  --ob-navy-deep: #182e6f;
  --ob-text: #3f4a5c;
  --ob-muted: #8a94a6;
  --ob-blue: #9cc5ef;
  --ob-blue-l: #dcebfb;
  --ob-blue-xl: #eaf3ff;
  --ob-bg: #f3f8fe;
  --ob-pink: #f28cb4;
  --ob-pink-d: #e0709c;
  --ob-pink-l: #fde6ef;
  --ob-pink-xl: #fff6fa;
  --ob-yellow: #fff3c4;
  --ob-mint: #cdeee6;
  --ob-shadow: 0 4px 16px rgba(43, 63, 126, .08);
  --ob-shadow-hover: 0 10px 24px rgba(43, 63, 126, .14);
  --ob-radius: 16px;
}

/* ===== 全体 ===== */
body.body,
body.body.ff-hiragino,
.body .menu-content,
.body input,
.body button,
.body textarea,
.body select {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
}
body.body {
  background: var(--ob-bg);
  color: var(--ob-text);
  font-weight: 500;
}
body.body strong, body.body b, body.body th { font-weight: 700; }
.body ::selection { background: var(--ob-pink-l); color: var(--ob-navy); }
.body a { color: #2f6bd1; transition: color .2s, background-color .2s, box-shadow .2s, transform .2s; }
.body a:hover { color: var(--ob-pink-d); }

/* ===== ヘッダー ===== */
#header-container { background: #fff; box-shadow: 0 2px 12px rgba(43, 63, 126, .06); }
#header { background: transparent; }
.hlt-center-logo .header-in { padding: 18px 0 8px; }
.logo-image img { max-height: 56px; width: auto; }

/* グローバルナビをピル型に */
#navi { background: transparent; border: none; }
.navi-in > ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 6px 0 14px; height: auto;
}
.navi-in > ul > li { height: auto; width: auto !important; border: none; }
.navi-in > ul > li > a {
  display: block; height: auto; line-height: 1.4;
  padding: 9px 20px; border-radius: 999px;
  background: var(--ob-blue-xl); color: var(--ob-navy); font-weight: 700; font-size: 15px;
  transition: all .2s;
}
.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current-category-ancestor > a {
  background: var(--ob-pink-l); color: var(--ob-pink-d); transform: translateY(-1px);
}
.navi-in > ul > li > a .caption-wrap { height: auto; }
.navi-in > ul > li > a .item-label { font-weight: 700; }

/* ===== パンくず・PR表記 ===== */
.breadcrumb { font-size: .85em; color: var(--ob-muted); padding: 12px 0 0; }
.breadcrumb a { color: var(--ob-navy); }
.breadcrumb .fa { color: var(--ob-blue); }
.pr-label.pr-label-s {
  position: static; display: inline-block; margin: 0 0 12px;
  padding: 3px 14px; border: none; border-radius: 999px;
  background: var(--ob-pink-l); color: var(--ob-pink-d); font-size: .75em; font-weight: 700;
}

/* ===== メインカラム ===== */
.main {
  background: #fff; border: none !important; border-radius: 20px;
  padding: 28px 32px; box-shadow: var(--ob-shadow);
}
/* 一覧ページはカードを直接パステル背景に置く */
.front-top-page .main, .archive .main, .search .main, .error404 .main {
  background: transparent; box-shadow: none; padding: 20px 0 0;
}
.sidebar { display: none; }

/* ===== 記事カード（一覧） ===== */
.ect-vertical-card .entry-card-wrap,
.ect-vertical-card .a-wrap.entry-card-wrap {
  background: #fff; border: none !important; border-radius: var(--ob-radius);
  overflow: hidden; box-shadow: var(--ob-shadow); transition: transform .25s, box-shadow .25s;
}
.ect-vertical-card .a-wrap:hover,
.ect-vertical-card .entry-card-wrap:hover {
  background: #fff; transform: translateY(-4px); box-shadow: var(--ob-shadow-hover);
}
.ect-vertical-card .entry-card-thumb {
  margin: 0; width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ob-blue-l), var(--ob-pink-l));
}
.ect-vertical-card .entry-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ect-vertical-card .entry-card-content { padding: 14px 16px 16px; margin: 0; }
.entry-card-title { font-size: 1em; font-weight: 700; line-height: 1.55; color: var(--ob-navy); }
.entry-card-snippet { font-size: .82em; line-height: 1.7; color: #6b7588; margin-top: 8px; }
.entry-card-meta { font-size: .75em; color: #a0a8b8; margin-top: 8px; }
.entry-card-meta .fa { color: var(--ob-blue); }

/* カテゴリーラベルをピル型・カテゴリー別の色に */
.cat-label {
  top: 10px; left: 10px; padding: 3px 12px; border: none !important; border-radius: 999px;
  background: var(--ob-pink) !important; color: #fff !important;
  font-size: .72em; font-weight: 700; letter-spacing: .02em; opacity: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.category-internet-post .cat-label    { background: #6fa9e6 !important; }  /* 光回線 */
.category-homerouter-post .cat-label  { background: #5fc3ad !important; }  /* ホームルーター */
.category-mobile-wifi-post .cat-label { background: #f0a85a !important; }  /* ポケット型WiFi */
.category-keitai-post .cat-label      { background: var(--ob-pink) !important; }  /* 携帯電話・格安SIM */

/* ページ送り */
.pagination-next-link.key-btn,
.pagination-next-link {
  border: 2px solid var(--ob-blue-l) !important; border-radius: 999px !important;
  background: #fff !important; color: var(--ob-navy) !important; font-weight: 700;
  box-shadow: var(--ob-shadow);
}
.pagination-next-link:hover { background: var(--ob-blue-xl) !important; }
.pagination .page-numbers {
  width: 42px; height: 42px; line-height: 38px; margin: 0 4px;
  border: 2px solid var(--ob-blue-l); border-radius: 50%; background: #fff; color: var(--ob-navy); font-weight: 700;
}
.pagination .page-numbers.current { background: var(--ob-pink); border-color: var(--ob-pink); color: #fff; }
.pagination a.page-numbers:hover { background: var(--ob-blue-xl); color: var(--ob-navy); }
.pagination .page-numbers.dots { border: none; background: transparent; }

/* ===== 記事ページ ===== */
.entry-title {
  font-size: 1.55em; line-height: 1.5; color: var(--ob-navy); font-weight: 700;
  padding: 0 0 14px; margin: 8px 0 18px;
  border-bottom: 3px dotted #f6bcd3;
}
.date-tags { color: #a0a8b8; font-size: .85em; }
.date-tags .fa { color: var(--ob-blue); }
.eye-catch { margin: 0 auto 24px; }
.eye-catch img { border-radius: var(--ob-radius); box-shadow: var(--ob-shadow); }

.article h2 {
  position: relative; margin: 2.2em 0 1.2em;
  padding: 12px 18px 12px 22px; border-radius: 12px; border: none;
  background: var(--ob-blue-xl); color: var(--ob-navy); font-size: 1.25em; line-height: 1.5;
}
.article h2::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 6px;
  border-radius: 999px; background: var(--ob-pink);
}
.article h3 {
  position: relative; margin: 2em 0 1em; padding: 6px 4px 8px 26px;
  border: none; border-bottom: 3px dotted var(--ob-blue); background: transparent;
  color: var(--ob-navy); font-size: 1.12em; line-height: 1.5;
}
.article h3::before {
  content: ""; position: absolute; left: 4px; top: .75em; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ob-pink);
}
.article h4 {
  margin: 1.6em 0 .9em; padding: 4px 0 6px; border: none; border-bottom: 2px solid var(--ob-blue-l);
  color: var(--ob-navy); font-size: 1.04em;
}
.article h4::before { content: "◆"; color: var(--ob-pink); font-size: .8em; margin-right: .4em; }

.article p, .article li { line-height: 1.9; }
.article p strong, .article li strong {
  background: linear-gradient(transparent 62%, var(--ob-yellow) 62%);
  padding: 0 .1em;
}
.article ul > li::marker { color: var(--ob-pink); }
.article ol > li::marker { color: var(--ob-navy); font-weight: 700; }

/* 冒頭のPR・注意書き（blockquote を使っている） */
.article blockquote {
  position: relative; margin: 0 0 1.8em; padding: 14px 18px;
  background: var(--ob-pink-xl); border: 2px dashed #f6bcd3; border-left: 2px dashed #f6bcd3; border-radius: 12px;
  color: #6b7588; font-size: .92em; line-height: 1.8;
}
.article blockquote::before, .article blockquote::after { display: none; }
.article blockquote p:last-child { margin-bottom: 0; }

/* 目次 */
.article .toc, .toc.border-element {
  background: #fff; border: 3px solid var(--ob-blue-l); border-radius: var(--ob-radius);
  padding: 16px 26px 18px; margin: 0 auto 1.8em;
}
.toc-title { color: var(--ob-navy); font-weight: 700; font-size: 1.05em; }
.toc-title::before { content: "📑"; margin-right: .4em; }
.toc-title::after { color: var(--ob-muted); font-weight: 500; }
.toc-content { color: var(--ob-text); }
.toc-list > li { margin: .35em 0; }
.toc-list a { color: var(--ob-navy); }
.toc-list a:hover { color: var(--ob-pink-d); text-decoration: underline; }

/* 表 */
.article table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  border: 1px solid var(--ob-blue-l); border-radius: 12px; overflow: hidden;
  background: #fff; margin-bottom: 1.8em;
}
.article table th, .article table td { border: none; border-bottom: 1px solid #e8f0fa; padding: 10px 12px; vertical-align: top; }
.article table thead th { background: var(--ob-blue-l); color: var(--ob-navy); font-weight: 700; }
.article table tbody th { background: var(--ob-bg); color: var(--ob-navy); font-weight: 700; text-align: left; }
.article table tbody tr:nth-child(even) td { background: #fafcff; }
.article table tbody tr:last-child th, .article table tbody tr:last-child td { border-bottom: none; }
.article table tbody tr:hover td { background: var(--ob-pink-xl); }

/* ボタン類（既存クラス） */
.super-link {
  width: 82%; padding: 14px 0; margin: 14px auto 24px;
  background: linear-gradient(135deg, var(--ob-pink), #f7a8c6); color: #fff;
  border-radius: 999px; box-shadow: 0 5px 0 0 var(--ob-pink-d); font-size: 17px; font-weight: 700;
}
.super-link:hover { opacity: 1; filter: brightness(1.04); transform: translateY(3px); box-shadow: 0 2px 0 0 var(--ob-pink-d); color: #fff; }
span.btn_04 { background: var(--ob-navy); border-color: var(--ob-navy); }
span.btn_04:hover { color: var(--ob-navy); }
.btn_box1 { background: var(--ob-bg); border-radius: 14px; padding: 22px 14px 14px; }
.btn_box1 p:first-child { color: var(--ob-navy); }
.textlink { color: #2f6bd1; }
.textlink:hover { color: var(--ob-pink-d); }

/* Cocoon のボックス類をやわらかく */
.body .information-box, .body .question-box, .body .alert-box, .body .memo-box,
.body .comment-box, .body .common-icon-box, .body .blank-box, .body .caption-box, .body .label-box {
  border-radius: 12px;
}
.body .blank-box.bb-key-color, .body .bb-key-color { border-color: var(--ob-blue); }

/* 著者・シェア */
.author-box { background: var(--ob-bg); border: none !important; border-radius: var(--ob-radius); padding: 20px; }
.author-widget-name { color: var(--ob-navy); font-weight: 700; }
.author-thumb img { border: 3px solid #fff; box-shadow: var(--ob-shadow); }
.author-name a { color: var(--ob-navy); font-weight: 700; }
.author-description { color: #6b7588; font-size: .9em; }
.sns-share-message { color: var(--ob-navy); font-weight: 700; }
.sns-buttons a { border-radius: 999px; }
.post-views { color: #a0a8b8; }

/* カテゴリー・タグ表示 */
.article-footer .cat-tag-link, .article .category-tag { font-size: .85em; }
.cat-link, .tag-link {
  display: inline-block; padding: 2px 12px; border-radius: 999px; border: none !important;
  background: var(--ob-blue-xl) !important; color: var(--ob-navy) !important; font-size: .85em;
}

/* ===== フッター ===== */
footer#footer { border-top: 3px solid #f6bcd3; background: var(--ob-blue-xl); }
#footMenu { border-bottom: 1px solid #fff; }
#footMenu .innerBox a { color: var(--ob-navy); }
#siteBottom { background: var(--ob-blue-l); border-top: none; color: var(--ob-navy); }
#siteBottom a { color: var(--ob-navy); }

/* トップへ戻る（PC） */
.go-to-top-button { background: var(--ob-pink); color: #fff; border-radius: 50%; box-shadow: var(--ob-shadow); }
.go-to-top-button:hover { background: var(--ob-pink-d); }

/* ===== スマホ ===== */
.mobile-footer-menu-buttons, .mobile-menu-buttons {
  background: #fff; border-top: 1px solid var(--ob-blue-l); box-shadow: 0 -2px 12px rgba(43, 63, 126, .06);
}
.mobile-menu-buttons .menu-button-in { color: var(--ob-navy); }
.mobile-menu-buttons .menu-icon { color: var(--ob-pink); }
.mobile-menu-buttons .menu-caption { font-weight: 700; }
.mobile-menu-buttons .sidebar-menu-button { display: none; } /* サイドバーは使っていないのでボタンを出さない */
.menu-content { background: var(--ob-bg); }
.menu-drawer { padding: 8px 12px; }
.menu-drawer li a {
  display: block; margin: 6px 0; padding: 12px 16px; border-radius: 12px;
  background: #fff; color: var(--ob-navy); font-weight: 700; box-shadow: var(--ob-shadow);
}
.menu-drawer li a:hover { background: var(--ob-pink-l); color: var(--ob-pink-d); }
.menu-close-button { color: var(--ob-navy); }
.search-box .search-edit { border: 2px solid var(--ob-blue-l); border-radius: 999px 0 0 999px; }
.search-box .search-submit { border-radius: 0 999px 999px 0; background: var(--ob-pink); color: #fff; }

@media screen and (max-width: 1023px) {
  .main { padding: 22px 20px; border-radius: 16px; }
}
@media screen and (max-width: 834px) {
  .hlt-center-logo .header-in { padding: 14px 0 6px; }
  .logo-image img { max-height: 44px; }
  .main { padding: 18px 14px; border-radius: 14px; margin: 0 8px; }
  .front-top-page .main, .archive .main, .search .main { padding: 10px 0 0; margin: 0; }
  .entry-title { font-size: 1.28em; }
  .article h2 { font-size: 1.14em; padding: 10px 14px 10px 18px; }
  .article h3 { font-size: 1.05em; }
  .ect-vertical-card .entry-card-content { padding: 10px 12px 12px; }
  .entry-card-title { font-size: .92em; }
  .entry-card-snippet { display: none; }
  .cat-label { font-size: .68em; padding: 2px 10px; top: 8px; left: 8px; }
  .super-link { width: 92%; font-size: 16px; }
  .article table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media screen and (max-width: 480px) {
  .pr-label.pr-label-s { margin: 10px 8px 6px; }
  .breadcrumb { padding: 10px 8px 0; }
  .entry-title { font-size: 1.18em; }
  .eye-catch img { border-radius: 12px; }
  .article .toc, .toc.border-element { padding: 12px 16px 14px; }
}