@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){
  /*必要ならばここにコードを書く*/
}

/* ============================================================
   0. デザイントークン
   ツール（#tkd-resizer）と共通の設計言語:
   モノクロUI ＋ RGB3色ヘアライン ＋ データは等幅フォント
============================================================ */
:root{
  --tkd-ink:#20242B;
  --tkd-ink-soft:#5A616D;
  --tkd-line:#DFE3E8;
  --tkd-bg:#FFFFFF;
  --tkd-bg-soft:#F6F7F9;
  --tkd-r:#FF4D4D;
  --tkd-g:#22C55E;
  --tkd-b:#3B82F6;
  --tkd-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  --tkd-radius:10px;
  --tkd-rgb:linear-gradient(90deg,var(--tkd-r) 0 33.4%,var(--tkd-g) 33.4% 66.7%,var(--tkd-b) 66.7% 100%);
}

/* ============================================================
   1. ベース
============================================================ */
body{
  background:var(--tkd-bg);
  color:var(--tkd-ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium",YuGothic,Meiryo,sans-serif;
  line-height:1.8;
}
/* シグネチャー：ページ最上部のRGBヘアライン */
body::before{
  content:"";
  display:block;
  height:3px;
  background:var(--tkd-rgb);
}
::selection{background:var(--tkd-b);color:#fff;}
a{color:var(--tkd-b);transition:opacity .15s;}
a:hover{opacity:.8;}

/* ============================================================
   2. ヘッダー
============================================================ */
.header-container{
  background:var(--tkd-bg);
  border-bottom:1px solid var(--tkd-line);
}
.header{background:transparent;}
.site-name-text{
  color:var(--tkd-ink);
  font-weight:800;
  letter-spacing:.02em;
}
.tagline{
  color:var(--tkd-ink-soft);
  font-size:12px;
  letter-spacing:.04em;
}
/* グローバルナビ */
.navi{background:var(--tkd-bg);border-bottom:1px solid var(--tkd-line);}
.navi-in > ul > li > a{
  color:var(--tkd-ink);
  font-weight:600;
  font-size:14px;
  position:relative;
}
.navi-in > ul > li > a:hover{
  background:var(--tkd-bg-soft);
  color:var(--tkd-ink);
}
.navi-in > ul > li > a::after{
  content:"";
  position:absolute;
  left:12%;right:12%;bottom:0;
  height:2px;
  background:var(--tkd-rgb);
  transform:scaleX(0);
  transition:transform .18s ease;
}
.navi-in > ul > li > a:hover::after{transform:scaleX(1);}
.navi-in > ul .sub-menu{
  background:var(--tkd-bg);
  border:1px solid var(--tkd-line);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(32,36,43,.08);
}
.navi-in > ul .sub-menu a{color:var(--tkd-ink);}

/* パンくず */
.breadcrumb{
  color:var(--tkd-ink-soft);
  font-size:12px;
  font-family:var(--tkd-mono);
}
.breadcrumb a{color:var(--tkd-ink-soft);}

/* ============================================================
   3. 記事カード（一覧）
============================================================ */
.entry-card-wrap{
  border:1px solid var(--tkd-line);
  border-radius:var(--tkd-radius);
  background:var(--tkd-bg);
  overflow:hidden;
  position:relative;
  margin-bottom:1.2em;
  transition:transform .18s ease, box-shadow .18s ease;
}
.entry-card-wrap::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--tkd-rgb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
  z-index:1;
}
.entry-card-wrap:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(32,36,43,.08);
}
.entry-card-wrap:hover::before{transform:scaleX(1);}
.entry-card{padding:16px;}
.entry-card-title{
  color:var(--tkd-ink);
  font-weight:700;
  line-height:1.5;
}
.entry-card-snippet{
  color:var(--tkd-ink-soft);
  font-size:13px;
  line-height:1.7;
}
.entry-card-thumb{border-radius:6px;overflow:hidden;}
.entry-card-meta .post-date,
.entry-card-meta .post-update{
  color:var(--tkd-ink-soft);
  font-family:var(--tkd-mono);
  font-size:11.5px;
}
/* カテゴリラベル：モノクロのピル */
.cat-label{
  background:var(--tkd-bg);
  color:var(--tkd-ink);
  border:1px solid var(--tkd-ink);
  border-radius:99px;
  font-size:10.5px;
  font-weight:700;
  padding:2px 10px;
}

/* ============================================================
   4. 記事本文
============================================================ */
.entry-title{
  font-weight:800;
  line-height:1.45;
  letter-spacing:.01em;
}
.article .post-date,.article .post-update{
  font-family:var(--tkd-mono);
  color:var(--tkd-ink-soft);
}
/* h2：Cocoonのグレー背景をやめ、下線＋RGBアクセントに */
.article h2{
  background:transparent;
  color:var(--tkd-ink);
  font-weight:800;
  font-size:1.5em;
  padding:0 0 .5em;
  margin-top:2.4em;
  border-bottom:2px solid var(--tkd-line);
  border-radius:0;
  position:relative;
}
.article h2::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:64px;height:2px;
  background:var(--tkd-rgb);
}
.article h3{
  border:none;
  border-left:4px solid var(--tkd-ink);
  background:transparent;
  color:var(--tkd-ink);
  font-weight:700;
  padding:.2em 0 .2em .7em;
  margin-top:2em;
}
.article h4{
  border:none;
  border-bottom:1px dashed var(--tkd-line);
  color:var(--tkd-ink);
  font-weight:700;
  padding-bottom:.3em;
}
.article a{text-decoration:underline;text-underline-offset:3px;}
.article a:hover{text-decoration:none;}

/* 引用 */
.article blockquote{
  background:var(--tkd-bg-soft);
  border:none;
  border-left:3px solid var(--tkd-ink);
  border-radius:0 8px 8px 0;
  color:var(--tkd-ink-soft);
}
/* テーブル */
.article table{
  border-collapse:collapse;
  border:1px solid var(--tkd-line);
}
.article th{
  background:var(--tkd-bg-soft);
  color:var(--tkd-ink);
  border:1px solid var(--tkd-line);
  font-weight:700;
}
.article td{border:1px solid var(--tkd-line);}
/* コード */
.article pre,.article code{
  font-family:var(--tkd-mono);
}

/* 目次 */
.toc{
  background:var(--tkd-bg);
  border:1px solid var(--tkd-line);
  border-radius:var(--tkd-radius);
  padding:1.2em 1.4em;
}
.toc-title{
  font-weight:800;
  color:var(--tkd-ink);
}
.toc a{color:var(--tkd-ink);text-decoration:none;}
.toc a:hover{color:var(--tkd-b);}
.toc .toc-list li::marker{color:var(--tkd-ink-soft);}

/* ボタン（Cocoon汎用） */
.btn,.btn-wrap a,.button,input[type="submit"]{
  background:var(--tkd-ink);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:700;
  transition:opacity .15s;
}
.btn:hover,.btn-wrap a:hover,.button:hover,input[type="submit"]:hover{
  background:var(--tkd-ink);
  opacity:.85;
  color:#fff;
}

/* ブログカード（内部リンク） */
.blogcard{
  border:1px solid var(--tkd-line);
  border-radius:var(--tkd-radius);
}
.blogcard:hover{border-color:var(--tkd-ink-soft);}
.blogcard-label{
  background:var(--tkd-ink);
  color:#fff;
  border-radius:6px 0 6px 0;
}

/* ============================================================
   5. サイドバー
============================================================ */
.sidebar{background:transparent;}
.sidebar h3,.sidebar .widget > h3{
  background:transparent;
  color:var(--tkd-ink);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  border:none;
  border-bottom:2px solid var(--tkd-line);
  padding:0 0 .5em;
  position:relative;
}
.sidebar h3::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:40px;height:2px;
  background:var(--tkd-rgb);
}
.sidebar .widget{
  margin-bottom:2.2em;
}
/* 人気記事・新着のランキング数字を等幅に */
.popular-entry-card-rank,.widget-entry-card-rank{
  font-family:var(--tkd-mono);
  background:var(--tkd-ink);
  color:#fff;
}

/* ============================================================
   6. ページネーション
============================================================ */
.pagination .page-numbers{
  border:1px solid var(--tkd-line);
  border-radius:8px;
  color:var(--tkd-ink);
  background:var(--tkd-bg);
  font-family:var(--tkd-mono);
}
.pagination .page-numbers.current{
  background:var(--tkd-ink);
  border-color:var(--tkd-ink);
  color:#fff;
}
.pagination .page-numbers:hover{background:var(--tkd-bg-soft);}
.pagination-next-link,.pagination-prev-link{
  border:1px solid var(--tkd-line);
  border-radius:8px;
  color:var(--tkd-ink);
}

/* ============================================================
   7. フッター
============================================================ */
.footer{
  background:var(--tkd-ink);
  color:#C9CED6;
  position:relative;
}
.footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--tkd-rgb);
}
.footer a{color:#E6E9EE;}
.footer .copyright{
  font-family:var(--tkd-mono);
  font-size:11.5px;
  color:#9AA1AC;
}
/* トップへ戻る */
.go-to-top-button{
  background:var(--tkd-ink);
  color:#fff;
  border-radius:10px;
  opacity:.9;
}

/* ============================================================
   8. モバイル調整
============================================================ */
.mobile-menu-buttons{
  background:var(--tkd-bg);
  border-top:1px solid var(--tkd-line);
}
.mobile-menu-buttons .menu-button a{color:var(--tkd-ink);}
@media screen and (max-width:834px){
  .entry-card{padding:12px;}
  .article h2{font-size:1.3em;}
}

/* ============================================================
   9. 検索フォーム
============================================================ */
.search-box input[type="text"],.search-edit{
  border:1px solid var(--tkd-line);
  border-radius:8px;
  background:var(--tkd-bg);
}
.search-box input[type="text"]:focus,.search-edit:focus{
  border-color:var(--tkd-b);
  outline:none;
}
.search-submit{
  background:var(--tkd-ink);
  color:#fff;
  border-radius:0 8px 8px 0;
}

/* ============================================================
   10. アクセシビリティ・モーション配慮
============================================================ */
:focus-visible{outline:2px solid var(--tkd-b);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;}
}

/* ============================================================
   11. 記事内装飾（ブロックスタイル・最小7種）
   使い方: 段落/グループ/リストブロックを選択 →
   右サイドバー「スタイル」から選ぶだけ（SWELL方式）
============================================================ */

/* ---- 共通：ラベル付きボックス ---- */
.is-style-tkd-point,
.is-style-tkd-memo,
.is-style-tkd-caution,
.is-style-tkd-good{
  position:relative;
  border-radius:10px;
  padding:1.4em 1.4em 1.1em;
  margin:2.2em 0 1.8em;
}
.is-style-tkd-point::before,
.is-style-tkd-memo::before,
.is-style-tkd-caution::before,
.is-style-tkd-good::before{
  position:absolute;
  top:-0.8em;
  left:14px;
  padding:0 10px;
  background:#fff;
  font-family:var(--tkd-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.6;
}

/* ポイント：主張の核。インクの枠 */
.is-style-tkd-point{border:1.5px solid var(--tkd-ink);}
.is-style-tkd-point::before{content:"POINT";color:var(--tkd-ink);}

/* メモ：補足。枠なし・淡い面 */
.is-style-tkd-memo{background:var(--tkd-bg-soft);}
.is-style-tkd-memo::before{content:"MEMO";color:var(--tkd-ink-soft);background:transparent;top:-1.6em;left:2px;}
.is-style-tkd-memo{margin-top:2.8em;}

/* 注意：Rアクセント */
.is-style-tkd-caution{border:1px solid var(--tkd-line);border-left:4px solid var(--tkd-r);}
.is-style-tkd-caution::before{content:"CAUTION";color:var(--tkd-r);}

/* 結論・OK：Gアクセント */
.is-style-tkd-good{border:1px solid var(--tkd-line);border-left:4px solid var(--tkd-g);}
.is-style-tkd-good::before{content:"GOOD";color:var(--tkd-g);}

/* ボックス内の余白調整 */
.is-style-tkd-point > :last-child,
.is-style-tkd-memo > :last-child,
.is-style-tkd-caution > :last-child,
.is-style-tkd-good > :last-child{margin-bottom:0;}

/* ---- チェックリスト（G） ---- */
.article ul.is-style-tkd-check{
  list-style:none;
  padding-left:0;
  border:none;
}
.article ul.is-style-tkd-check > li{
  position:relative;
  padding-left:1.9em;
  margin-bottom:.55em;
}
.article ul.is-style-tkd-check > li::before{
  content:"";
  position:absolute;
  left:2px;top:.42em;
  width:1.05em;height:1.05em;
  border-radius:50%;
  background:var(--tkd-g);
}
.article ul.is-style-tkd-check > li::after{
  content:"";
  position:absolute;
  left:.32em;top:.62em;
  width:.42em;height:.24em;
  border-left:2.5px solid #fff;
  border-bottom:2.5px solid #fff;
  transform:rotate(-45deg);
}

/* ---- バツリスト（R） ---- */
.article ul.is-style-tkd-cross{
  list-style:none;
  padding-left:0;
  border:none;
}
.article ul.is-style-tkd-cross > li{
  position:relative;
  padding-left:1.9em;
  margin-bottom:.55em;
  color:var(--tkd-ink-soft);
}
.article ul.is-style-tkd-cross > li::before,
.article ul.is-style-tkd-cross > li::after{
  content:"";
  position:absolute;
  left:.52em;top:.5em;
  width:2.5px;height:.95em;
  background:var(--tkd-r);
  border-radius:2px;
}
.article ul.is-style-tkd-cross > li::before{transform:rotate(45deg);}
.article ul.is-style-tkd-cross > li::after{transform:rotate(-45deg);}

/* ---- 手順リスト（番号リスト用・等幅ナンバー） ---- */
.article ol.is-style-tkd-steps{
  list-style:none;
  counter-reset:tkd-step;
  padding-left:0;
  border:none;
}
.article ol.is-style-tkd-steps > li{
  position:relative;
  counter-increment:tkd-step;
  padding:0 0 1.3em 2.6em;
  margin:0;
}
.article ol.is-style-tkd-steps > li::before{
  content:counter(tkd-step,decimal-leading-zero);
  position:absolute;
  left:0;top:.1em;
  font-family:var(--tkd-mono);
  font-size:.85em;
  font-weight:700;
  color:#fff;
  background:var(--tkd-ink);
  border-radius:7px;
  padding:.15em .4em;
  line-height:1.5;
}
/* 手順をつなぐ縦ライン */
.article ol.is-style-tkd-steps > li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:1em;
  top:2.1em;
  bottom:.2em;
  width:2px;
  background:var(--tkd-line);
}

/* トップページの日付とパンくずを非表示 */
.home.page .date-tags,
.home.page .breadcrumb{display:none;}

/* 新着・人気記事一覧のタイトルを本文リンク装飾から除外 */
.article a.ect-entry-card-link,
.article a.popular-entry-card-link{
  text-decoration:none;
  color:var(--tkd-ink);
}
.article a.ect-entry-card-link:hover .card-title,
.article a.popular-entry-card-link:hover .card-title{
  color:var(--tkd-b);
}

/* トップ見出し：単語の途中で改行させない（句読点でのみ折り返す） */
#tkd-home .th-copy{word-break:keep-all;overflow-wrap:anywhere;}

/* ============================================================
   【style.cssへの追記】12. ツールページ アプリ表示モード v1
   子テーマの style.css の一番下に、このファイルの中身を
   丸ごと貼り付けてください。
   仕組み：ツール（#tkd-resizer / #tkd-heic / #tkd-ar / #tkd-exif）
   を含むページだけを自動判定し、ブログ的要素を非表示にして
   Webアプリの見た目にします。ページ個別の設定は不要です。
============================================================ */

/* --- ブログ的要素の非表示 --- */
body:is(:has(#tkd-resizer),:has(#tkd-heic),:has(#tkd-ar),:has(#tkd-exif)) :is(
  .breadcrumb,          /* パンくず（ホーム） */
  .date-tags,           /* 投稿日・更新日 */
  .eye-catch,           /* 本文上のアイキャッチ大写し */
  .ad-label,            /* PRラベル */
  .sns-share,           /* SNSシェアボタン */
  .sns-follow,          /* フォローボタン */
  .author-box,          /* 著者ボックス */
  .related-entries,     /* 関連記事 */
  .pager-post-navi,     /* 前後ページナビ */
  .comment-area,
  .sidebar              /* サイドバー（人気記事・目次・タグ等ごと） */
){display:none!important;}

/* --- サイドバーを畳んだ分、本文を全幅に --- */
body:is(:has(#tkd-resizer),:has(#tkd-heic),:has(#tkd-ar),:has(#tkd-exif)) .main{
  width:100%!important;
  max-width:100%!important;
}

/* --- タイトルをアプリのヘッダー風に（中央寄せ・引き締め） --- */
body:is(:has(#tkd-resizer),:has(#tkd-heic),:has(#tkd-ar),:has(#tkd-exif)) .entry-title{
  text-align:center;
  font-size:clamp(21px,3.4vw,29px);
  font-weight:800;
  letter-spacing:.01em;
  margin:14px auto 26px;
  line-height:1.5;
}

/* --- 上部の余白を整える（パンくずが消えた分） --- */
body:is(:has(#tkd-resizer),:has(#tkd-heic),:has(#tkd-ar),:has(#tkd-exif)) .article{
  padding-top:8px;
}

/* --- ガイド部分は読みやすい幅に留める（ツール下の解説） --- */
body:is(:has(#tkd-resizer),:has(#tkd-heic),:has(#tkd-ar),:has(#tkd-exif)) .article > :is(h2,h3,p,ul,ol,table,figure,.blogcard-wrap){
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}