@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* ==========================================================================
   ツクルベース 追加スタイル v1.0 / 2026-09-15
   設計書：02_設計書/ツクルベース_サイトデザイン設計書_v1.0.docx
   原本  ：07_デザイン/cocoon-child-style.css
   ========================================================================== */

:root {
  --tb-main:      #1F8ACB;
  --tb-main-dark: #12688F;
  --tb-accent:    #FF9A2E;
  --tb-accent-dk: #D97F16;
  --tb-accent-ink:#A85510;
  --tb-on-accent: #17212B;
  --tb-link-hover:#0D5273;
  --tb-text:      #24303A;
  --tb-text-sub:  #63727E;
  --tb-line:      #D8E4EC;
  --tb-bg:        #EFF5F9;
  --tb-box-info:  #E6F4FD;
  --tb-box-warn:  #FFF0DE;
  --tb-box-data:  #F7FAFC;
}

/* 1. 本文タイポグラフィ */
.entry-content { font-size: 17px; line-height: 1.9; color: var(--tb-text); }
body .entry-content > p:not(.tb-point):not(.tb-warn):not(.tb-data),
body .entry-content > ul, body .entry-content > ol,
body .entry-content > blockquote { line-height: 1.9; }
.entry-content p { margin-bottom: 1.8em; }
body { background-color: var(--tb-bg); }

/* 2. 見出し */
.entry-content h2 {
  background: var(--tb-main); color: #fff;
  font-size: 22px; font-weight: 700; line-height: 1.5;
  padding: 16px 20px; margin: 80px 0 28px;
  border: none; border-radius: 4px;
}
.entry-content h3 {
  font-size: 19px; font-weight: 700; color: var(--tb-text); line-height: 1.6;
  border: none; border-left: 6px solid var(--tb-accent);
  padding: 2px 0 2px 14px; margin: 48px 0 20px; background: none;
}
.entry-content h4 {
  font-size: 17px; font-weight: 700; color: var(--tb-main-dark);
  border: none; border-bottom: 1px solid var(--tb-line);
  padding: 0 0 6px; margin: 36px 0 16px; background: none;
}

/* 3. 枠は3種類だけ */
.tb-point, .tb-warn, .tb-data {
  position: relative; margin: 32px 0; padding: 18px 20px;
  border-radius: 6px; font-size: 16px; line-height: 1.8;
}
.tb-point > *:last-child, .tb-warn > *:last-child, .tb-data > *:last-child { margin-bottom: 0; }
.tb-point { background: var(--tb-box-info); border-left: 5px solid var(--tb-main); }
.tb-point::before { content: "ポイント"; display: block; font-weight: 700; font-size: 14px; color: var(--tb-main-dark); margin-bottom: 8px; letter-spacing: .04em; }
.tb-warn { background: var(--tb-box-warn); border-left: 5px solid var(--tb-accent-dk); }
.tb-warn::before { content: "注意"; display: block; font-weight: 700; font-size: 14px; color: var(--tb-accent-ink); margin-bottom: 8px; letter-spacing: .04em; }
.tb-data { background: var(--tb-box-data); border: 1px solid var(--tb-line); border-left: 5px solid var(--tb-main); }
.tb-data::before { content: "実測"; display: block; font-weight: 700; font-size: 14px; color: var(--tb-main-dark); margin-bottom: 8px; letter-spacing: .04em; }

/* 4. 表 */
.entry-content table { font-size: 16px; border-collapse: collapse; width: 100%; }
/* Cocoonの figure.wp-block-table table { width: auto } に勝つために指定を強くする */
.entry-content figure.wp-block-table table { width: 100%; }
.entry-content table th { background: var(--tb-main-dark); color: #fff; font-weight: 700; padding: 12px 14px; border: 1px solid var(--tb-main-dark); text-align: left; }
.entry-content table td { padding: 12px 14px; border: 1px solid var(--tb-line); background: #fff; }
.entry-content table tr:nth-child(even) td { background: #FAFBFC; }
.entry-content table td.num, .entry-content table th.num,
.entry-content table td.has-text-align-right, .entry-content table th.has-text-align-right { text-align: right; font-variant-numeric: tabular-nums; }

/* 5. CTAボタン */
.tb-cta { margin: 36px 0; text-align: center; }
.tb-cta a {
  display: inline-block; min-width: 320px; max-width: 100%;
  background: var(--tb-accent); color: var(--tb-on-accent) !important;
  font-size: 17px; font-weight: 700; text-decoration: none;
  padding: 16px 28px; border-radius: 6px; box-shadow: 0 2px 0 var(--tb-accent-dk);
  transition: transform .08s ease, box-shadow .08s ease;
}
.tb-cta a:hover { background: var(--tb-accent-dk); transform: translateY(1px); box-shadow: 0 1px 0 var(--tb-accent-dk); }
.tb-cta .tb-cta-note { display: block; margin-top: 8px; font-size: 13px; color: var(--tb-text-sub); }

/* 6. この記事でわかること */
.tb-summary {
  background: #fff; border: 2px solid var(--tb-main); border-radius: 6px;
  padding: 20px 24px 20px 40px; margin: 28px 0; font-size: 16px;
}
.tb-summary::before { content: "この記事でわかること"; display: block; margin: -4px 0 12px -16px; font-weight: 700; color: var(--tb-main-dark); font-size: 15px; }
.tb-summary li { margin-bottom: 8px; }
.tb-summary li:last-child { margin-bottom: 0; }

/* 7. リンクと細部 */
.entry-content a { color: var(--tb-main-dark); text-decoration: underline; text-underline-offset: 3px; }
.entry-content .wp-block-image a, .entry-content .tb-cta a, .entry-content .blogcard-wrap a { text-decoration: none; }
.entry-content a:hover { color: var(--tb-link-hover); }
.tb-num { color: var(--tb-accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.entry-content img { border-radius: 4px; }
.entry-content figure.wp-block-image img { border: 1px solid var(--tb-line); }
.entry-content figcaption { font-size: 13px; color: var(--tb-text-sub); text-align: center; }

/*834px以下（モバイル）*/
@media screen and (max-width: 834px){
  .entry-content { font-size: 16px; line-height: 1.85; }
  body .entry-content > p:not(.tb-point):not(.tb-warn):not(.tb-data),
  body .entry-content > ul, body .entry-content > ol,
  body .entry-content > blockquote { line-height: 1.85; }
  .entry-content p { margin-bottom: 1.6em; }
  .entry-content h2 { font-size: 20px; padding: 14px 16px; margin-top: 64px; }
  .entry-content h3 { font-size: 18px; margin-top: 40px; }
  .entry-content table { font-size: 15px; }
  .entry-content table th, .entry-content table td { padding: 10px; font-size: 15px; }
  .tb-cta a { display: block; min-width: 0; width: 100%; font-size: 16px; }
}


/* 8. トップの紹介帯（インデックスリストトップのウィジェット） 2026-09-23 */
.tb-hero { background: var(--tb-box-info); border-radius: 10px; padding: 22px 24px; margin-bottom: 24px; }
.tb-hero__lead { font-size: 20px; font-weight: 700; color: var(--tb-main-dark); margin: 0 0 6px; line-height: 1.5; }
.tb-hero__sub { font-size: 15px; color: var(--tb-text); margin: 0 0 12px; line-height: 1.8; }
.tb-hero__nums { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tb-hero__nums li { background: var(--tb-accent); color: var(--tb-on-accent); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 8px; font-variant-numeric: tabular-nums; }
@media screen and (max-width: 834px) {
  .tb-hero { padding: 18px 16px; }
  .tb-hero__lead { font-size: 18px; }
  .tb-hero__nums li { font-size: 13px; }
}

/* 9. 記事末の「次に読む」カード 2026-09-23 */
.tb-next { display: flex; gap: 14px; align-items: center; margin: 32px 0; padding: 12px; border: 1px solid var(--tb-line); border-radius: 10px; background: #fff; text-decoration: none !important; }
.tb-next:hover { background: var(--tb-box-info); }
.tb-next img { width: 160px; height: auto; border-radius: 6px; display: block; flex: none; }
.tb-next__label { display: block; font-size: 12px; font-weight: 700; color: var(--tb-accent-ink); letter-spacing: .04em; }
.tb-next__title { display: block; font-size: 16px; font-weight: 700; color: var(--tb-main-dark); line-height: 1.6; margin-top: 2px; }
@media screen and (max-width: 834px) {
  .tb-next { gap: 10px; padding: 10px; }
  .tb-next img { width: 108px; }
  .tb-next__title { font-size: 15px; }
}

/* 10. 記事末のCTA枠 2026-09-23 */
.tb-cta-box { margin: 36px 0; padding: 20px 22px; border: 1px solid var(--tb-line); border-left: 5px solid var(--tb-accent); border-radius: 10px; background: #fff; }
.tb-cta-box .tb-cta-lead { font-size: 17px; font-weight: 700; color: var(--tb-main-dark); margin: 0 0 8px; line-height: 1.6; }
.tb-cta-box .tb-cta-text { font-size: 15px; line-height: 1.85; margin: 0 0 16px; color: var(--tb-text); }
.tb-cta-box .tb-cta { margin: 0; }
@media screen and (max-width: 834px) {
  .tb-cta-box { padding: 16px; }
  .tb-cta-box .tb-cta-lead { font-size: 16px; }
  .tb-cta-box .tb-cta-text { font-size: 14px; }
}

/* 11. 前提枠 2026-09-23 */
.tb-pre { background: var(--tb-box-info); border: 1px solid var(--tb-line); border-left: 5px solid var(--tb-main-dark); border-radius: 6px; padding: 18px 20px; margin: 32px 0; font-size: 16px; line-height: 1.8; }
.tb-pre::before { content: "前提"; display: block; font-weight: 700; font-size: 14px; color: var(--tb-main-dark); margin-bottom: 8px; letter-spacing: .04em; }
.tb-pre > *:last-child { margin-bottom: 0; }
.tb-pre ul { margin: 0; padding-left: 20px; }
.tb-pre li { margin-bottom: 6px; }
.tb-pre li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. PR表記（アフィリエイトリンクを含む記事の冒頭） 2026-09-23
   ※ 上の .tb-pre（前提枠）とは別物。紛らわしいので名前を .tb-pr-note にしてある
   -------------------------------------------------------------------------- */
.entry-content p.tb-pr-note {
  margin: 0 0 1.4em;
  padding: 8px 12px;
  border: 1px solid var(--tb-line);
  border-radius: 4px;
  background: var(--tb-box-data);
  font-size: 14px;
  line-height: 1.7;
  color: var(--tb-text-sub);
}