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

/* ===== ノウハウノート LP用（.kn-lp）2026-09-21 ===== */
.kn-lp{font-size:17px;line-height:1.95;color:#222;letter-spacing:.02em}
.kn-lp p{margin:0 0 1.5em}
.kn-lp h2{font-size:1.32em;line-height:1.5;margin:2.8em 0 1.1em;padding:.7em .9em;background:#f3f6fa;border-left:5px solid #1f4e79;border-radius:2px}
.kn-lp h3{font-size:1.12em;margin:2em 0 .8em;padding-bottom:.35em;border-bottom:2px solid #d5dde6}
.kn-lp strong{background:linear-gradient(transparent 62%,#ffe97a 62%);font-weight:700}
.kn-lp .kn-list{margin:0 0 1.6em;padding:1em 1em 1em 2em;background:#fafbfc;border:1px solid #e3e8ee;border-radius:6px}
.kn-lp .kn-list li{margin:.35em 0}
.kn-lp .kn-note{font-size:.88em;color:#555}
.kn-lp .kn-template{margin:1.2em 0 1.8em;padding:1.1em 1.2em;background:#fffdf3;border:1px dashed #c9b458;border-radius:6px;font-size:.95em;line-height:1.8}
.kn-lp .kn-template::before{content:none}
.kn-lp .kn-cta{margin:2.4em 0;text-align:center}
.kn-lp .kn-btn{display:block;max-width:560px;margin:0 auto;padding:1.05em 1.1em;background:#e8590c;color:#fff!important;font-weight:700;font-size:1.02em;line-height:1.55;text-decoration:none;border-radius:8px;box-shadow:0 4px 0 #a93f06;transition:transform .08s,box-shadow .08s}
.kn-lp .kn-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 #a93f06;color:#fff}
.kn-lp .kn-btn--pending{background:#9aa5b1;box-shadow:0 4px 0 #6b7682;cursor:default}
.kn-lp .kn-foot{margin:4em 0 1em;padding-top:1.4em;border-top:1px solid #e3e8ee;font-size:.8em;color:#888;text-align:center;line-height:2.2}
.kn-lp .kn-foot a{color:#667;margin:0 .7em;text-decoration:underline;white-space:nowrap}
.kn-lp .kn-foot span{display:block}
.kn-lp .kn-fig{margin:1.8em 0 2.2em}
.kn-lp .kn-fig img{display:block;width:100%;height:auto;border:1px solid #e3e8ee;border-radius:8px}
.kn-lp .kn-jump{color:#1f4e79;font-weight:700;text-decoration:underline}
html{scroll-behavior:smooth}
.kn-lp .kn-cta-note{display:block;margin-top:.7em;font-size:.82em;color:#777}
@media (max-width:480px){.kn-lp{font-size:16px}.kn-lp h2{font-size:1.2em;margin-top:2.4em}}
.kn-lp .kn-refs{font-size:11px;line-height:1.6;color:#999;margin-top:2.5em}
.kn-lp .kn-btn-sub{display:block;margin-top:.45em;font-size:.78em;font-weight:600;opacity:.92;white-space:nowrap;letter-spacing:-.01em}
/* 2026-09-22 ヘッダー背景をノート風に: 画像は左端基準・高さ合わせで描き、スマホでも赤線と綴じ穴が見えるようにする */
#header{background-position:center top!important;background-size:auto 100%!important;background-repeat:repeat-x!important}
/* 2026-09-22 記事内の表 */
.kn-lp .kn-table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95em}
.kn-lp .kn-table th,.kn-lp .kn-table td{border:1px solid #d9dfe6;padding:.6em .7em;text-align:left;vertical-align:top}
.kn-lp .kn-table th{background:#f3f6f9;font-weight:700}
/* ==== 2026-09-22 note風レイアウト（あらいさん指示「他記事への動線と、見た目のスッキリ感」「noteに近く」） ==== */
body{background:#fff}
.main{border:0;box-shadow:none;background:#fff;padding:0 16px}
.wrap{margin-top:0}
/* 本文の幅と読みやすさ（noteは本文約620px・16〜17px・行間1.9） */
.article{font-size:17px;line-height:1.95;letter-spacing:.02em;color:#222}
.article p{margin-bottom:1.6em}
.entry-title,.article h1.entry-title{font-size:30px;font-weight:800;line-height:1.55;letter-spacing:.01em;margin:16px 0 14px}
.pr-label{font-size:11px;padding:2px 8px;border-color:#ccd}
/* メタ行を細く1行に（日付・著者） */
.article-header .post-date,.article-header .post-update,.article-header .author-info{font-size:13px;color:#8a949e}
.entry-categories-tags{margin-top:2em}
.cat-label{border:0;background:#f3f5f7;border-radius:999px;padding:2px 12px;font-size:12px}
.tag-link{border:0;background:#f3f5f7;border-radius:999px;font-size:12px}
/* アイキャッチは角丸で少し引く */
.eye-catch img,.eye-catch .eye-catch-image{border-radius:8px}
/* シェアは本文下だけ・小さく丸く */
.sns-share{margin:2.5em 0}
.sns-share-message{font-size:13px;color:#8a949e}
.sns-share-buttons a{border-radius:999px;height:40px;font-size:13px}
/* 関連記事＝「同じテーマの記事」を枠なしカードで */
.related-entry-heading{font-size:18px;font-weight:800;border:0;background:none;padding:0;margin:3em 0 1em}
.related-entry-card-wrap{border:0;box-shadow:none}
.related-entry-card-thumb img{border-radius:8px}
.related-entry-card-title{font-weight:700;line-height:1.5}
/* 前後記事ナビは薄く */
.prev-next-heading{font-size:14px;color:#8a949e;border:0;background:none;padding:0}
.post-navi{border:0}
/* 一覧（トップ）：note風のリスト＝枠なし・区切り線・余白 */
.entry-card-wrap{border:0;border-bottom:1px solid #eef0f2;border-radius:0;padding:22px 0;margin:0}
.entry-card-wrap:hover{background:none}
.entry-card-thumb img{border-radius:8px}
.entry-card-title{font-size:20px;font-weight:800;line-height:1.5;margin-bottom:8px}
.entry-card-snippet{font-size:14px;color:#6b7580;line-height:1.7}
.entry-card-meta{font-size:12px;color:#8a949e}
/* ヘッダーを少し薄く */
#header .header-container{padding-top:12px;padding-bottom:12px}
/* LP部品の余白を本文に合わせる */
.kn-lp .kn-cta{margin:2.2em 0}
@media screen and (max-width:640px){
  .main{padding:0 14px}
  .article{font-size:16.5px}
  .entry-title,.article h1.entry-title{font-size:24px}
  .entry-card-title{font-size:17px}
}
/* 2026-09-22 note風・追加調整 */
.wrap{max-width:900px;margin:0 auto}
.main>.pr-label,.article .pr-label{position:static!important;display:inline-block;margin:14px 0 0}
.eye-catch .cat-label,.entry-card-thumb .cat-label,.related-entry-card-thumb .cat-label{display:none}
.toc{border:0;background:#f7f8fa;border-radius:10px;padding:18px 22px;width:100%;margin:2em 0}
.toc-title{text-align:left;font-size:14px;color:#8a949e;font-weight:700}
.toc-title::before{display:none}
.toc-content{font-size:15px}
.toc-content>ol>li{margin:6px 0}
.entry-card-title{font-size:18px}
.entry-card-content{font-size:14px}
/* 2026-09-23 記事タイトルの改行位置（あらいさん指摘「読みにくいので改行を入れてほしい」）: 語の途中で折らず、句読点・？・空白で折る */
.entry-title,.article h1.entry-title{overflow-wrap:anywhere}
/* 2026-09-23 番号付きリスト（手順・チェック項目）: 項目ごとに余白とインデント */
.kn-lp ol.kn-steps{margin:1.2em 0 1.6em;padding-left:1.6em}
.kn-lp ol.kn-steps li{margin:0 0 .9em;padding-left:.3em;line-height:1.85}
.kn-lp ol.kn-steps li strong{display:table;margin-bottom:.15em}
.kn-lp ul.kn-list li{margin:0 0 .6em}
/* 2026-09-23 記事間の本文内リンク */
.kn-lp a.kn-inlink{color:#2f6db0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* ==== 2026-09-24 フロート目次（右側の追従カラム・1200px以上・JSは子テーマ functions.php） ==== */
body.kn-has-toc .content-in{max-width:1180px;display:flex;align-items:flex-start;gap:44px}
body.kn-has-toc .main{flex:1 1 auto;min-width:0;max-width:800px}
#kn-toc-float{flex:0 0 280px;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;margin-top:40px}
#kn-toc-float .toc{margin:0;padding:16px 18px;background:#f7f8fa;border-radius:10px}
#kn-toc-float .toc-title{font-size:13px;color:#8a949e;margin-bottom:6px;cursor:default}
#kn-toc-float .toc-content{font-size:14px}
#kn-toc-float .toc-list{margin:0;padding-left:1.4em}
#kn-toc-float .toc-list li{margin:.35em 0;line-height:1.55}
#kn-toc-float .toc-list a{color:#4b5563;text-decoration:none}
#kn-toc-float .toc-list a:hover{color:#1f4e79;text-decoration:underline}
#kn-toc-float .toc-list a.kn-toc-current{color:#1f4e79;font-weight:700}
/* ==== 2026-09-24 ヘッダーメニュー（あらいさん指摘「カテゴリリンクが殺風景」）: 細い区切り線・ゆとり・現在地の下線・運営者情報は枠付きボタン ==== */
#navi{border-bottom:1px solid #eceff2;background:#fff}
#navi .navi-in{max-width:1180px}
#navi .menu-pc{justify-content:center;gap:6px}
#navi .menu-pc>li>a{padding:0 18px;height:52px;line-height:52px;font-size:14.5px;font-weight:600;color:#3a4551;position:relative;transition:color .15s}
#navi .menu-pc>li>a:hover{color:#1f4e79;background:none}
#navi .menu-pc>li.current-menu-item>a::after,#navi .menu-pc>li.current-post-ancestor>a::after,#navi .menu-pc>li.current-menu-parent>a::after{content:"";position:absolute;left:18px;right:18px;bottom:8px;height:3px;border-radius:2px;background:#f5c518}
#navi .menu-pc>li.menu-item-object-page>a{margin-left:14px}
#navi .menu-pc>li.menu-item-object-page>a .item-label{display:inline-block;padding:0 16px;line-height:34px;border:1.5px solid #1f4e79;border-radius:999px;color:#1f4e79;font-size:13.5px;font-weight:700}
#navi .menu-pc>li.menu-item-object-page>a:hover .item-label{background:#1f4e79;color:#fff}
#navi .menu-pc>li>a .caption-wrap{display:flex;align-items:center;height:100%}
#kn-toc-float .toc-title::after{display:none}
/* ==== 2026-09-24 CTAボタンの見直し（あらいさん指摘「ボタンが見にくい」）: 文字を大きく・折り返しを整える・矢印と副文を分けて読ませる ==== */
.kn-lp .kn-cta{margin:2.6em 0;text-align:center}
.kn-lp .kn-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:640px;margin:0 auto;padding:18px 22px 18px 26px;background:#e8590c;color:#fff!important;font-weight:700;font-size:17px;line-height:1.55;text-align:left;text-decoration:none;border-radius:12px;box-shadow:0 5px 0 #a93f06,0 8px 18px rgba(232,89,12,.22);transition:transform .08s,box-shadow .08s;text-wrap:balance;-webkit-text-wrap:balance}
.kn-lp .kn-btn::after{content:"›";flex:none;width:34px;height:34px;line-height:32px;text-align:center;border-radius:50%;background:rgba(255,255,255,.22);font-size:26px;font-weight:700}
.kn-lp .kn-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #a93f06,0 4px 10px rgba(232,89,12,.2);color:#fff}
.kn-lp .kn-btn .kn-btn-sub{display:block;margin-top:5px;font-size:12.5px;font-weight:600;opacity:.88;white-space:normal;letter-spacing:.02em}
@media screen and (max-width:640px){.kn-lp .kn-btn{font-size:16px;padding:16px 16px 16px 18px;gap:12px}.kn-lp .kn-btn::after{width:30px;height:30px;line-height:28px;font-size:22px}}
/* 文字ノード＝左上・矢印＝右で縦中央・副文＝左下 のgrid配置（狭幅でも矢印が落ちない） */
.kn-lp .kn-btn{display:grid;grid-template-columns:minmax(0,1fr) 34px;column-gap:16px;align-items:center}
.kn-lp .kn-btn::after{grid-column:2;grid-row:1/3;align-self:center;margin:0}
.kn-lp .kn-btn .kn-btn-sub{grid-column:1;grid-row:2;margin-top:4px;padding-left:1.6em;font-size:12.5px;opacity:.85}
/* 2026-09-24 あらいさん指摘「文字が小さい」→ 本文17pxより大きく */
.kn-lp .kn-btn{font-size:20px;line-height:1.5;padding:20px 22px 20px 26px;grid-template-columns:minmax(0,1fr) 38px}
.kn-lp .kn-btn::after{width:38px;height:38px;line-height:36px;font-size:28px}
.kn-lp .kn-btn .kn-btn-sub{font-size:14px;margin-top:6px}
@media screen and (max-width:640px){.kn-lp .kn-btn{font-size:18px;padding:18px 16px 18px 18px}}
/* 2026-09-24 あらいさん指示「インデントをしてください」: 2行目以降を👉の後ろに揃える（ぶら下げインデント） */
.kn-lp .kn-btn{text-indent:-1.55em;padding-left:calc(26px + 1.55em)}
.kn-lp .kn-btn .kn-btn-sub{text-indent:0;padding-left:0}
@media screen and (max-width:640px){.kn-lp .kn-btn{padding-left:calc(18px + 1.55em)}}
.kn-lp .kn-btn::after{text-indent:0}