@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
*/
/* 検索結果のみ：Cocoonの一覧直前に控えめな並び順切替を置く。 */
body.search .lhs-search-sort{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 18px;font-size:14px;color:var(--article-dark-text,#e7eff5)}
body.search .lhs-search-sort label{margin:0;white-space:nowrap}
body.search .lhs-search-sort select,body.search .lhs-search-sort button{box-sizing:border-box;min-height:42px;margin:0;border:1px solid var(--article-table-border,#384a59);border-radius:8px;font:inherit;line-height:1.4}
body.search .lhs-search-sort select{width:auto;max-width:100%;padding:8px 30px 8px 10px;background-color:var(--article-code-dark-bg,#202a33);color:var(--article-dark-text,#e7eff5)}
body.search .lhs-search-sort button{padding:8px 14px;background:var(--article-code-dark-bg,#202a33);color:var(--article-link-color,#70c5f5);cursor:pointer}
body.search .lhs-search-sort button:hover{border-color:var(--article-link-color,#70c5f5)}
body.search .lhs-search-sort select:focus-visible,body.search .lhs-search-sort button:focus-visible{outline:2px solid var(--article-link-color,#70c5f5);outline-offset:2px}

/* トップ専用検索バー。色は既存ポータルの変数を使う。 */
body.home .lhs-home-search{display:flex;align-items:stretch;box-sizing:border-box;width:100%;margin:18px 0 0;padding:0;overflow:hidden;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);color:var(--text-color)}
body.home .lhs-home-search__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body.home .lhs-home-search__input{display:block;flex:1 1 0;min-width:0;width:100%;height:48px;box-sizing:border-box;margin:0;padding:10px 16px;border:0;border-radius:0;background:transparent;color:var(--text-color);font-size:16px;line-height:1.5;box-shadow:none}
body.home .lhs-home-search__input::placeholder{color:var(--text-muted);opacity:1}
body.home .lhs-home-search__button{display:flex;flex:0 0 52px;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;margin:0;padding:0;border:0;border-left:1px solid var(--border-color);border-radius:0;background:transparent;color:var(--accent-color);cursor:pointer;transition:background-color .16s ease,color .16s ease}
body.home .lhs-home-search__button svg{display:block}
body.home .lhs-home-search__button:hover{background:var(--card-bg-hover);color:var(--link-color)}
body.home .lhs-home-search:focus-within{border-color:var(--accent-color);outline:2px solid var(--accent-color);outline-offset:2px}
body.home .lhs-home-search__input:focus{outline:0}
body.home .lhs-home-search__button:focus-visible{outline:2px solid var(--accent-color);outline-offset:-4px}
body.home .lhs-home-search+.lhs-layout{margin-top:18px}
@media screen and (max-width:767px){
  body.home .lhs-home-search{width:calc(100% - 16px);margin:12px 8px 0;border-radius:10px}
  body.home .lhs-home-search__input{padding-right:10px;padding-left:12px}
  body.home .lhs-home-search+.lhs-layout{margin-top:10px}
}

/* Mini portal top page: child theme only */
.lhs-home{background:#f4f8fb;padding:28px 0 54px}.lhs-inner{width:min(1180px,calc(100% - 32px));margin:auto}.lhs-hero{min-height:290px;display:flex;align-items:center;padding:38px 7%;box-sizing:border-box;border-radius:14px;background:linear-gradient(90deg,#eaf5ff 0%,rgba(245,250,255,.86) 48%,rgba(245,250,255,.12) 78%),var(--hero);background-position:center,right center;background-repeat:no-repeat;background-size:cover,55% auto}.lhs-hero>div{max-width:555px}.lhs-hero p,.lhs-hero span{display:block;color:#466078;margin:0 0 14px;font-size:14px;line-height:1.7}.lhs-hero p{color:#087ac6;font-weight:700}.lhs-hero h1{margin:0 0 13px;color:#152d4a;font-size:clamp(30px,4vw,46px);line-height:1.25}.lhs-hero a{display:inline-block;margin-top:5px;padding:12px 20px;border-radius:99px;background:#087ac6;color:#fff!important;font-weight:700;text-decoration:none}.lhs-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:26px;margin-top:26px}.lhs-section,.lhs-side section{padding:20px;background:#fff;border:1px solid #e3edf4;border-radius:12px;box-shadow:0 4px 15px #1a41500b}.lhs-section{margin-bottom:22px}.lhs-title{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid #e8eef3}.lhs-title h2,.lhs-side h2{margin:0;color:#173551;font-size:20px}.lhs-title i{font-style:normal;color:#087ac6;margin-right:9px}.lhs-title>a{color:#087ac6;font-size:13px;font-weight:700;text-decoration:none}.lhs-grid{display:grid;gap:14px}.lhs-latest{grid-template-columns:repeat(2,minmax(0,1fr))}.lhs-recommend{grid-template-columns:repeat(3,minmax(0,1fr))}.lhs-card{min-width:0;overflow:hidden;border:1px solid #e6edf3;border-radius:9px}.lhs-card a{display:block;height:100%;color:inherit!important;text-decoration:none!important}.lhs-thumb{display:block;aspect-ratio:16/9;background:#eaf3fa;overflow:hidden}.lhs-thumb img{width:100%;height:100%;object-fit:cover}.lhs-thumb b{display:grid;height:100%;place-items:center;color:#78a9cc}.lhs-card-text{display:block;padding:11px 12px}.lhs-card small,.lhs-card time{display:block;color:#087ac6;font-size:11px;font-weight:700}.lhs-card strong{display:-webkit-box;overflow:hidden;color:#1d3045;font-size:14px;line-height:1.52;-webkit-box-orient:vertical;-webkit-line-clamp:2}.lhs-card time{margin-top:8px;color:#8292a0;font-weight:400}.lhs-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.lhs-cats article{padding:15px;border:1px solid #e5edf4;border-radius:9px;background:#fbfdff}.lhs-cats h3{margin:0;color:#0871bc;font-size:16px}.lhs-cats h3 a{float:right;color:#087ac6;font-size:12px;text-decoration:none}.lhs-cats ul{padding:0;margin:11px 0 0;list-style:none}.lhs-cats li{padding:8px 0;border-top:1px solid #e8eef3}.lhs-cats li a{display:block;overflow:hidden;color:#364c61;font-size:13px;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.lhs-side{display:grid;align-content:start;gap:18px}.lhs-side section{padding:18px}.lhs-side h2{padding-bottom:12px;margin-bottom:13px;border-bottom:1px solid #e8eef3;font-size:17px}.lhs-side p{color:#5c7183;font-size:13px;line-height:1.7}.lhs-outline{display:block;padding:9px;border:1px solid #1684ca;border-radius:99px;color:#087ac6!important;font-size:12px;font-weight:700;text-align:center;text-decoration:none}.lhs-side ol,.lhs-side ul{padding:0;margin:0;list-style:none}.lhs-side li{display:flex;gap:8px;padding:8px 0;border-top:1px solid #e8eef3}.lhs-side li span{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#6ca0c4;color:#fff;font-size:11px;font-weight:700}.lhs-side li:nth-child(-n+3) span{background:#e6a321}.lhs-side li a{display:flex;justify-content:space-between;gap:8px;color:#38536a;font-size:12px;font-weight:700;line-height:1.4;text-decoration:none}.lhs-side em{color:#087ac6;font-style:normal}
@media(max-width:1199px){.lhs-layout{grid-template-columns:1fr}.lhs-side{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:767px){.lhs-home{padding:16px 0 32px}.lhs-inner{width:min(100% - 20px,680px)}.lhs-hero{min-height:240px;padding:26px 22px;border-radius:10px;background-size:cover,auto 100%}.lhs-hero h1{font-size:29px}.lhs-hero span{max-width:300px;font-size:13px}.lhs-layout{gap:16px;margin-top:16px}.lhs-section{padding:14px;margin-bottom:16px}.lhs-title{padding-bottom:10px;margin-bottom:10px}.lhs-title h2{font-size:18px}.lhs-latest,.lhs-recommend{grid-template-columns:1fr;gap:0}.lhs-card{border:0;border-radius:0}.lhs-card+.lhs-card{border-top:1px solid #e7eef4}.lhs-card a{display:grid;grid-template-columns:124px minmax(0,1fr);gap:11px;padding:10px 0}.lhs-thumb{align-self:center;border-radius:6px}.lhs-card-text{padding:0}.lhs-card strong{font-size:14px}.lhs-card time{margin-top:5px}.lhs-cats{grid-template-columns:1fr;gap:9px}.lhs-cats article{padding:12px}.lhs-cats ul{display:none}.lhs-side{grid-template-columns:1fr;gap:14px}.lhs-side section{padding:15px}.lhs-side ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}}

/* Cocoonの通常サイドバーは、このトップ専用サイドバーと重複するため非表示にする。 */
body.home .content-in > .sidebar { display:none!important; }
body.home .content-in > .main { width:100%!important; max-width:100%!important; }
@media screen and (min-width:768px){.lhs-hero{background-image:linear-gradient(90deg,#eaf5ff 0%,rgba(245,250,255,.98) 58%,rgba(245,250,255,.72) 70%,rgba(245,250,255,.08) 100%),var(--hero);background-size:cover,46% auto}}
@media (prefers-color-scheme:dark){.lhs-home{background:#151b21}.lhs-section,.lhs-side section{background:#202a33;border-color:#334352;box-shadow:none}.lhs-title,.lhs-side h2,.lhs-cats li,.lhs-side li{border-color:#344452}.lhs-title h2,.lhs-side h2,.lhs-card strong{color:#eef5fa}.lhs-hero{background-color:#dcecf8}.lhs-cats article{background:#26323d;border-color:#3a4c5c}.lhs-cats li a,.lhs-side li a{color:#d4e1eb}.lhs-card{border-color:#3a4c5c;background:#202a33}.lhs-card small{color:#55b8f5}.lhs-card time{color:#a8b7c3}}



/************************************
** ヘッダー
************************************/

/* ヘッダーメニュー全体の高さを詰める */
#navi,
#navi .navi-in,
#navi .navi-in > ul {
  min-height: 0 !important;
  height: auto !important;
}

/* ==================================================
   Mini portal: final visual tuning / colour tokens
================================================== */
.lhs-home{--page-bg:#f3f7fa;--card-bg:#fff;--card-bg-hover:#fafdff;--text-color:#1c3044;--text-muted:#687d8e;--border-color:#dbe6ee;--accent-color:#087ac6;--link-color:#076caf;background:var(--page-bg);padding-top:2px}
/* Cocoon標準: .content の margin-top 24px と .main の padding-top 36px が、
   ホーム先頭カードの前に計60pxの余白を作っていたため、ホーム限定で整理。 */
body.home .content{margin-top:0}body.home .content-in>.main{padding-top:0}
.lhs-hero{min-height:238px;padding-top:28px;padding-bottom:28px}
.lhs-hero p,.lhs-hero span{color:var(--text-muted)}.lhs-hero p,.lhs-card small{color:var(--accent-color)}
.lhs-section,.lhs-side section{background:var(--card-bg);border-color:var(--border-color);box-shadow:0 3px 12px rgba(26,65,95,.035)}
.lhs-title,.lhs-side h2,.lhs-cats li,.lhs-side li{border-color:var(--border-color)}
.lhs-title h2,.lhs-side h2,.lhs-card strong{color:var(--text-color)}.lhs-title>a,.lhs-cats h3 a,.lhs-outline{color:var(--link-color)!important}
.lhs-card{display:flex;border-color:var(--border-color);background:var(--card-bg);transition:background-color .16s ease,border-color .16s ease,transform .16s ease}.lhs-card a{width:100%}.lhs-card:hover{background:var(--card-bg-hover);border-color:#a9cce3;transform:translateY(-1px)}
.lhs-card-text{min-height:98px;box-sizing:border-box}.lhs-card strong{-webkit-line-clamp:3;min-height:4.56em}.lhs-card time{color:var(--text-muted)}
.lhs-cats article{background:#f9fcfe;border-color:var(--border-color)}.lhs-cats h3{color:var(--link-color);font-size:17px}.lhs-cats h3 a{font-size:13px}.lhs-section:last-child .lhs-title h2{font-size:21px}.lhs-section:last-child .lhs-title{border-bottom-color:#bfd9ea}
.lhs-side p{color:var(--text-muted)}.lhs-side li a,.lhs-cats li a{color:var(--text-color)}
.lhs-profile-head{display:flex;align-items:center;gap:11px;margin:0 0 13px}.lhs-profile-avatar{display:block;flex:0 0 56px;width:56px;height:56px;overflow:hidden;border:1px solid var(--border-color);border-radius:50%;background:var(--page-bg)}.lhs-profile-avatar img{display:block;width:100%;height:100%;object-fit:cover}.lhs-profile-name{display:block;color:var(--text-color);font-size:16px;line-height:1.25}.lhs-profile-lead{margin:4px 0 0!important;color:var(--text-muted)!important;font-size:12px!important;line-height:1.55!important}.lhs-profile-copy{margin:0 0 16px!important}.lhs-profile-copy p{margin:0 0 9px!important;color:var(--text-muted)!important;font-size:12px!important;line-height:1.72!important}.lhs-profile-copy p:last-child{margin-bottom:0!important}
.lhs-profile-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 11px}.lhs-profile-avatar{flex:0 0 56px;margin-top:2px}.lhs-profile-head>div{display:block;min-width:0;flex:1 1 0}.lhs-profile-name{font-size:21px;font-weight:800;letter-spacing:.02em}.lhs-profile-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0!important;margin:7px 0 0!important;list-style:none!important}.lhs-profile-tags li{display:inline-flex;align-items:center;max-width:100%;box-sizing:border-box;padding:4px 9px;margin:0!important;border:1px solid color-mix(in srgb,var(--accent-color) 42%,var(--border-color));border-radius:999px;background:color-mix(in srgb,var(--accent-color) 12%,var(--card-bg));color:var(--accent-color);font-size:12px;font-weight:700;line-height:1.35;white-space:normal}.lhs-profile-tags li:before{content:none!important}.lhs-profile-lead{flex:0 0 100%;position:relative;display:block;width:100%;max-width:100%;box-sizing:border-box;padding:9px 11px;margin:10px 0 0!important;border:1px solid color-mix(in srgb,var(--accent-color) 35%,var(--border-color));border-radius:10px;background:color-mix(in srgb,var(--card-bg) 90%,#fff);color:var(--text-color)!important;font-size:12px!important;line-height:1.65!important}.lhs-profile-lead:before{position:absolute;top:-5px;left:19px;width:8px;height:8px;border-top:1px solid color-mix(in srgb,var(--accent-color) 35%,var(--border-color));border-left:1px solid color-mix(in srgb,var(--accent-color) 35%,var(--border-color));background:color-mix(in srgb,var(--card-bg) 90%,#fff);content:"";transform:rotate(45deg)}.lhs-profile-copy{padding-top:2px}.lhs-profile-copy p{font-size:13px!important;line-height:1.8!important}
@media (prefers-color-scheme:light){.lhs-profile-lead,.lhs-profile-lead:before{background:#f5f9fc}}
@media screen and (min-width:1200px){.lhs-profile-head{align-items:center}.lhs-profile-avatar{margin-top:0}}
.lhs-side li.lhs-category-depth-1{padding-left:12px}.lhs-side li.lhs-category-depth-2{padding-left:24px}.lhs-side li.lhs-category-depth-1 a:before,.lhs-side li.lhs-category-depth-2 a:before{content:'└';margin-right:5px;color:var(--accent-color);font-weight:400}
.lhs-title-link{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;color:var(--text-color)!important;text-decoration:none}.lhs-title-link>span{color:var(--accent-color);font-size:16px;line-height:1;transition:color .16s ease}.lhs-title-link:hover h2,.lhs-title-link:focus-visible h2{color:var(--link-color)}.lhs-title-link:hover>span,.lhs-title-link:focus-visible>span{color:var(--link-color)}.lhs-title-link:focus-visible{outline:2px solid var(--accent-color);outline-offset:4px;border-radius:4px}
.lhs-side-heading-link{display:flex;justify-content:space-between;gap:8px;color:var(--text-color)!important;text-decoration:none}.lhs-side-heading-link span{color:var(--accent-color);font-size:13px}.lhs-side-heading-link:hover,.lhs-side-heading-link:focus-visible{color:var(--link-color)!important}.lhs-side-heading-link:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px;border-radius:4px}
.lhs-cats article{display:flex;flex-direction:column;overflow:hidden;padding:0;background:var(--card-bg);border-color:var(--border-color)}.lhs-category-image{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--page-bg)}.lhs-category-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}.lhs-category-image span{display:grid;width:100%;height:100%;place-items:center;color:var(--accent-color);font-size:24px}.lhs-cats h3{padding:13px 15px 0;margin:0;color:var(--link-color);font-size:18px;line-height:1.35}.lhs-cats h3 a{display:block;float:none!important;color:inherit!important;font:inherit;text-decoration:none}.lhs-cats ul{padding:0 15px;margin:8px 0 0}.lhs-cats li{padding:7px 0}.lhs-cats li a{display:-webkit-box;white-space:normal;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.lhs-cats .lhs-more--category{margin:10px 15px 14px;align-self:flex-start}.lhs-cats article:hover{border-color:var(--accent-color)}@media screen and (max-width:767px){.lhs-cats h3{padding:11px 12px 0;font-size:17px}.lhs-cats ul{padding:0 12px}.lhs-cats .lhs-more--category{margin:9px 12px 12px}}
.lhs-side-tags h2 a{display:flex;justify-content:space-between;gap:8px;color:var(--text-color)!important;text-decoration:none}.lhs-side-tags h2 a span{color:var(--accent-color);font-size:13px}.lhs-side-tags-more{margin-top:10px;font-size:12px}.lhs-tag-index{--page-bg:#f3f7fa;--card-bg:#fff;--text-color:#1c3044;--text-muted:#687d8e;--border-color:#dbe6ee;--accent-color:#087ac6;background:var(--page-bg);padding:32px 0 54px}.lhs-tag-index__inner{width:min(960px,calc(100% - 32px));margin:auto}.lhs-tag-index__card{padding:26px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px}.lhs-tag-index__header{padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--border-color)}.lhs-tag-index__header p{margin:0 0 5px;color:var(--accent-color);font-size:13px;font-weight:700}.lhs-tag-index__header h1{margin:0;color:var(--text-color);font-size:26px}.lhs-tag-index__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;padding:0;margin:0;list-style:none}.lhs-tag-index__list li{border-bottom:1px solid var(--border-color)}.lhs-tag-index__list a{display:flex;justify-content:space-between;gap:10px;padding:11px 0;color:var(--text-color);font-size:14px;text-decoration:none}.lhs-tag-index__list a:hover{color:var(--accent-color)}.lhs-tag-index__list span{color:var(--accent-color);font-size:12px;font-weight:700}@media (prefers-color-scheme:dark){.lhs-tag-index{--page-bg:#151c23;--card-bg:#202a33;--text-color:#e7eff5;--text-muted:#a8b9c6;--border-color:#384a59;--accent-color:#57b8ef}}@media screen and (max-width:767px){.lhs-tag-index{padding:18px 0 34px}.lhs-tag-index__inner{width:min(100% - 20px,680px)}.lhs-tag-index__card{padding:17px}.lhs-tag-index__header h1{font-size:22px}.lhs-tag-index__list{grid-template-columns:1fr;gap:0}}
.lhs-popular-tags{display:flex;flex-wrap:wrap;gap:9px}.lhs-popular-tags a,.lifehackshin-post-tags a{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid rgba(8,122,198,.34);border-radius:999px;background:rgba(8,122,198,.09);color:var(--link-color)!important;font-size:13px;font-weight:700;line-height:1.3;text-decoration:none}.lhs-popular-tags a:hover,.lifehackshin-post-tags a:hover{background:rgba(8,122,198,.18)}.lhs-popular-tags small{color:var(--accent-color);font-size:11px}.lifehackshin-post-tags{display:flex;align-items:flex-start;gap:10px;padding:13px 0;margin:0 0 20px;border-top:1px solid var(--article-table-border);border-bottom:1px solid var(--article-table-border)}.lifehackshin-post-tags>span{padding-top:7px;color:var(--article-dark-text);font-size:12px;font-weight:700}.lifehackshin-post-tags>div{display:flex;flex-wrap:wrap;gap:7px}.lifehackshin-related{margin:34px 0 12px;padding:20px;border:1px solid var(--article-table-border);border-radius:10px;background:var(--article-code-dark-bg)}.lifehackshin-related__heading p{margin:0 0 4px;color:var(--article-link-color);font-size:12px;font-weight:700}.lifehackshin-related__heading h2{margin:0 0 16px;padding:0!important;color:var(--article-dark-text-strong)!important;font-size:20px!important;background:transparent!important;border:0!important}.lifehackshin-related__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.lifehackshin-related article{min-width:0}.lifehackshin-related a{color:var(--article-dark-text)!important;text-decoration:none}.lifehackshin-related__thumb{display:block;overflow:hidden;aspect-ratio:16/9;margin-bottom:7px;border-radius:6px;background:#303641}.lifehackshin-related__thumb img{display:block;width:100%;height:100%;object-fit:cover}.lifehackshin-related__fallback{display:grid;height:100%;place-items:center;color:#cbd5df;font-size:10px}.lifehackshin-related strong{display:-webkit-box;overflow:hidden;font-size:12px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:3}.lifehackshin-related__more{display:inline-block;margin-top:14px;color:var(--article-link-color)!important;font-size:13px;font-weight:700}@media screen and (max-width:767px){.lhs-popular-tags{gap:7px}.lhs-popular-tags a,.lifehackshin-post-tags a{padding:6px 9px;font-size:12px}.lifehackshin-post-tags{display:block}.lifehackshin-post-tags>span{display:block;margin-bottom:7px}.lifehackshin-related{margin-top:26px;padding:15px}.lifehackshin-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lifehackshin-related__heading h2{font-size:18px!important}}
.lhs-side-recommend{display:grid;gap:10px}.lhs-side-recommend article{border-top:1px solid var(--border-color);padding-top:10px}.lhs-side-recommend article:first-child{border-top:0;padding-top:0}.lhs-side-recommend a{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:center;color:var(--text-color)!important;text-decoration:none}.lhs-side-recommend a>span{display:block;overflow:hidden;aspect-ratio:16/9;border-radius:6px;background:var(--page-bg);font-size:11px;text-align:center;line-height:44px}.lhs-side-recommend img{display:block;width:100%;height:100%;object-fit:cover}.lhs-side-recommend b{display:-webkit-box;overflow:hidden;font-size:12px;line-height:1.42;-webkit-box-orient:vertical;-webkit-line-clamp:3}.lhs-side-recommend small{display:block;color:var(--accent-color);font-size:10px;margin-bottom:3px}
.lhs-side-recommend h3{margin:5px 0 -3px;font-size:12px;line-height:1.3}.lhs-side-recommend h3:not(:first-child){margin-top:8px}.lhs-side-recommend h3 a{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid rgba(8,122,198,.32);border-radius:999px;background:rgba(8,122,198,.10);color:var(--accent-color)!important;font-weight:700;line-height:1.25;text-decoration:none;white-space:nowrap}.lhs-side-recommend h3 a:hover,.lhs-side-recommend h3 a:focus-visible{border-color:var(--accent-color);background:rgba(8,122,198,.18);color:var(--link-color)!important}.lhs-side-recommend h3 a span{display:inline;overflow:visible;aspect-ratio:auto;border-radius:0;background:transparent;font-size:11px;line-height:1}
.lhs-side-recommend a>.lhs-side-recommend__text{display:block;overflow:visible;aspect-ratio:auto;border-radius:0;background:transparent;font-size:inherit;text-align:left;line-height:normal}.lhs-side-recommend small.lhs-side-recommend__role{display:inline-flex!important;width:auto!important;flex:0 0 auto;align-self:flex-start;margin:0 0 3px;padding:2px 7px;border-radius:999px;background:rgba(8,122,198,.14);color:var(--accent-color);font-size:9px!important;font-weight:700;line-height:1.25!important}.lhs-side-recommend article:nth-of-type(even) small.lhs-side-recommend__role{background:rgba(8,122,198,.09);color:var(--link-color)}
.lhs-more{display:inline-block;margin-top:15px;color:var(--link-color)!important;font-size:13px;font-weight:700;text-decoration:none}.lhs-more:hover{text-decoration:underline}.lhs-more--category{margin-top:10px;font-size:12px}.lhs-section--featured .lhs-title i{color:#e6a321}
.lhs-section--basics .lhs-title i{color:var(--accent-color)}
.lhs-section--featured .lhs-grid{gap:18px}.lhs-section--featured .lhs-thumb{aspect-ratio:16/9}.lhs-section--featured .lhs-card-text{padding:13px 14px;min-height:106px}.lhs-section--featured .lhs-card strong{font-size:15px;line-height:1.55}
@media (prefers-color-scheme:dark){.lhs-home{--page-bg:#151c23;--card-bg:#202a33;--card-bg-hover:#293743;--text-color:#e7eff5;--text-muted:#a8b9c6;--border-color:#384a59;--accent-color:#57b8ef;--link-color:#70c5f5}.lhs-section,.lhs-side section{box-shadow:0 2px 9px rgba(0,0,0,.15)}.lhs-card:hover{border-color:#5b93b5}.lhs-cats article{background:#25323d}.lhs-section:last-child .lhs-title{border-bottom-color:#4d7893}.lhs-side-recommend h3 a{border-color:rgba(87,184,239,.45);background:rgba(87,184,239,.14)}.lhs-side-recommend h3 a:hover,.lhs-side-recommend h3 a:focus-visible{background:rgba(87,184,239,.22)}}
@media (prefers-color-scheme:light){.lhs-home{--page-bg:#f3f7fa;--card-bg:#fff;--card-bg-hover:#fafdff;--text-color:#1c3044;--text-muted:#687d8e;--border-color:#dbe6ee;--accent-color:#087ac6;--link-color:#076caf}}
@media screen and (max-width:1199px){body.home .content{margin-top:0}body.home .content-in>.main{padding-top:0}}@media screen and (max-width:767px){.lhs-home{padding-top:8px}.lhs-hero{min-height:220px;padding-top:24px;padding-bottom:24px}.lhs-card-text{min-height:0}.lhs-card strong{-webkit-line-clamp:3;min-height:0}.lhs-section:last-child .lhs-title h2{font-size:19px}.lhs-cats h3{font-size:16px}.lhs-section--featured .lhs-grid{gap:0}.lhs-section--featured .lhs-card-text{padding:0;min-height:0}.lhs-section--featured .lhs-card strong{font-size:14px}}

/* ヘッダーメニューの上下余白 */
#navi .navi-in > ul > li > a {
  padding: 4px 18px !important;
  line-height: 1.4 !important;
}

/* ロゴ周辺の余白 */
.logo-header {
  padding: 10px 0 0;
}


/************************************
** 前の記事・次の記事
************************************/

.prev-post.a-wrap.cf,
.next-post.a-wrap.cf {
  font-size: 16px;
  font-weight: bold;
}

@media screen and (max-width: 480px) {
  .prev-post.a-wrap.cf,
  .next-post.a-wrap.cf {
    font-size: 12px;
  }
}


/************************************
** トップページの記事カード
************************************/

/* 基本のタイトルサイズ */
.entry-card-title {
  font-size: 16px;
}

/* 481px以上 */
@media screen and (min-width: 481px) {
  .entry-card-title {
    font-size: 20px;
  }

  .entry-card-snippet {
    font-size: 14px;
  }
}

/* アイキャッチ画像を切らずに表示 */
.entry-card-thumb {
  overflow: hidden;
}

.entry-card-thumb img {
  object-fit: contain !important;
  object-position: center;
}


/************************************
** 記事本文の画像キャプション
************************************/

.article .wp-block-image > figcaption.wp-element-caption {
  margin-top: 6px;
  margin-bottom: 16px;
  color: inherit;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  opacity: 0.78;
}

/* 通常記事の画像キャプションだけ左寄せ（ブロック／旧形式ギャラリーは除外） */
body.single-post .entry-content .wp-block-image figcaption:not(.wp-block-gallery *):not(.gallery *),
body.single-post .entry-content .wp-caption .wp-caption-text:not(.wp-block-gallery *):not(.gallery *) {
  text-align: left !important;
}

/* キャプション本文を変えず、俺の一言として鉤括弧を添える */
body.single-post .entry-content .wp-block-image figcaption:not(.wp-block-gallery *):not(.gallery *)::before,
body.single-post .entry-content .wp-caption .wp-caption-text:not(.wp-block-gallery *):not(.gallery *)::before {
  content: "「";
}

body.single-post .entry-content .wp-block-image figcaption:not(.wp-block-gallery *):not(.gallery *)::after,
body.single-post .entry-content .wp-caption .wp-caption-text:not(.wp-block-gallery *):not(.gallery *)::after {
  content: "」";
}

/* 自動投稿で画像直後の段落として出力されたキャプションの余白補正 */
.article .wp-block-image:has(+ p.wp-block-paragraph.has-text-align-center.has-small-font-size) {
  margin-bottom: 0;
}

.article .wp-block-image + p.wp-block-paragraph.has-text-align-center.has-small-font-size {
  margin-top: 6px;
}


/************************************
** スマホの記事カード
************************************/

@media screen and (max-width: 768px) {

  /* カード全体を縦並びにする */
  .entry-card-wrap {
    display: block !important;
    width: 100% !important;
  }

  /* 画像を16:9で全体表示 */
  .entry-card-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0 0 8px !important;
    overflow: hidden;
    background-color: transparent;
  }

  .entry-card-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
  }

  /* タイトルと説明文のエリア */
  .entry-card-content {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 記事タイトル */
  .entry-card-title {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #222222 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
}

/* スマホ：トップページの記事カードの日付を下げる */
@media screen and (max-width: 768px) {
  .entry-card-meta .entry-card-info {
    transform: translateY(10px) !important;
  }
}

/* スマホの記事カード間隔 */
@media screen and (max-width: 767px) {
  .list {
    row-gap: 40px !important;
  }
}


/*************************************************************************************
** 目次
*************************************************************************************/







/* 目次全体 */
.toc {
  width: 86% !important;
  max-width: 920px !important;
  margin: 0 auto 30px !important;
  padding: 16px 20px 18px !important;
  box-sizing: border-box;
  background-color: #edf6ff;
  border-style: none;
}

/* 目次タイトル */
.toc-title {
  margin: 0 0 10px !important;
  padding: 0.15em 1em !important;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background-color: #393e4c;
}

/* 目次の中身 */
.toc-content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* 目次は画面幅にかかわらず1列表示 */
.toc-list {
  column-count: 1 !important;
  column-gap: 0 !important;
  margin: 0 !important;
  padding-left: 2.5em !important;
}

/* H2項目 */
.toc-list > li {
  break-inside: avoid !important;
  margin: 0.15em 0 !important;
  color: #8195a2;
  font-weight: bold;
}

/* H3以下 */
.toc-list > li li {
  margin: 0.1em 0 !important;
  color: #8195a2;
  font-weight: normal;
}

/* H3以下の番号を消す */
.article .toc-list > li li {
  list-style: none;
}

/* H3以下の先頭にドットを表示 */
.toc-list > li li ::before {
  position: relative;
  left: -15px;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-bottom: 2px;
  content: "";
  background: #cdcdcd;
  border-radius: 50%;
}

/* スマホでは1列・横幅いっぱい */
@media screen and (max-width: 768px) {

  .toc {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 30px !important;
    padding: 12px 14px 14px !important;
  }

  .toc-list {
    column-count: 1 !important;
    column-gap: 0 !important;
    padding-left: 2.5em !important;
  }
}







/************************************
** 投稿日
************************************/

.date-tags {
  color: #666666;
  line-height: 1.4;
}

.post-date,
.post-update {
  display: inline;
  padding-right: 4px;
  font-size: 14px;
  background-color: #f0f0f0;
}

/* 更新日を非表示 */
.post-update {
  display: none;
}


/************************************
** スマホ用ヘッダーメニュー
************************************/

/************************************
** 中間幅のPCメニューを3列×2段にする
************************************/

@media screen and (min-width: 835px) and (max-width: 1199px) {

  /* PC用メニューを3列×2段にする */
  #navi .navi-in > ul.menu-header {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0 !important;
  }

  #navi .navi-in > ul.menu-header > li {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #navi .navi-in > ul.menu-header > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 44px;
    padding: 4px 2px !important;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* スマホ用メニューは表示しない */
  #navi .navi-in > ul.menu-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 834px) {

  /* メニューを3列×2段にする */
  #navi .navi-in > ul.menu-mobile {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0 !important;
  }

  #navi .navi-in > ul.menu-mobile > li {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #navi .navi-in > ul.menu-mobile > li > a {
    width: 100% !important;
    padding: 2px !important;
    font-size: 15px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }

  /* キャッチコピー */
  .tagline {
    margin: 0.2em 1em 0.4em !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* ロゴ周辺の余白 */
  .logo-header {
    padding: 4px 0 0;
  }
}


/************************************
** サイドバーの新着記事・人気記事
************************************/

.widget_new_entries .widget-entry-card,
.widget_popular_entries .widget-entry-card {
  display: grid !important;
  grid-template-columns: 95px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  width: 100% !important;
  margin-bottom: 12px;
}

/* サムネイル */
.widget_new_entries .widget-entry-card-thumb,
.widget_popular_entries .widget-entry-card-thumb {
  float: none !important;
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  margin: 0 !important;
  overflow: hidden;
  aspect-ratio: 16 / 9 !important;
}

.widget_new_entries .widget-entry-card-thumb img,
.widget_popular_entries .widget-entry-card-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* タイトル部分 */
.widget_new_entries .widget-entry-card-content,
.widget_popular_entries .widget-entry-card-content {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.widget_new_entries .widget-entry-card-title,
.widget_popular_entries .widget-entry-card-title {
  font-size: 13px !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/************************************
** 画面幅が足りない場合は1カラム
************************************/

@media screen and (max-width: 1199px) {

  /* 記事を画面中央に広く表示 */
  .content,
  .content-in {
    display: block !important;
  }

  .main {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box;
  }

  /* 右側のサイドバーは表示しない */
  .sidebar {
    display: none !important;
  }
}


/************************************
** 十分に広い画面では2カラム
************************************/

@media screen and (min-width: 1200px) {

  /* 記事とサイドバーを横並びにする */
  .content-in {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  /* メイン記事 */
  .main {
    float: none !important;
    width: calc(100% - 354px) !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* サイドバー */
  .sidebar {
    display: block !important;
    float: none !important;
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }

  /* サイドバーの記事カード */
  .widget_new_entries .widget-entry-card,
  .widget_popular_entries .widget-entry-card {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  /* サイドバーのサムネイル */
  .widget_new_entries .widget-entry-card-thumb,
  .widget_popular_entries .widget-entry-card-thumb {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }
}










/* ==================================================
   Pz-LinkCard 内部リンクカード
   Cocoonのライト / ダークモード対応
================================================== */

.lkc-internal-wrap {
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;

  margin: 20px 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border-radius: 8px !important;
  background: transparent !important;
}


/* ==================================================
   カード本体
================================================== */

.lkc-internal-wrap .lkc-card {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 12px !important;

  box-sizing: border-box !important;

  background: rgba(128, 128, 128, 0.12) !important;
  border: 1px solid rgba(128, 128, 128, 0.25) !important;
  border-radius: 8px !important;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}


/* ホバー */
.lkc-internal-wrap .lkc-card:hover {
  background: rgba(128, 128, 128, 0.18) !important;
  border-color: rgba(128, 128, 128, 0.4) !important;
}


/* Pz-LinkCard標準の上部情報を消す */
.lkc-internal-wrap .lkc-info {
  display: none !important;
}


/* ==================================================
   カード内容

   PC：
   ┌───────────┬─────────────────────┐
   │           │ タイトル            │
   │ サムネイル │ タイトル            │
   │           │ 関連記事を見る →    │
   └───────────┴─────────────────────┘
================================================== */

.lkc-internal-wrap .lkc-content {
  display: grid !important;

  grid-template-columns:
    220px
    minmax(0, 1fr) !important;

  grid-template-rows:
    auto
    auto !important;

  column-gap: 18px !important;
  row-gap: 8px !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  float: none !important;
  position: static !important;

  align-items: center !important;
}


/* ==================================================
   サムネイル
================================================== */

.lkc-internal-wrap .lkc-thumbnail {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;

  display: block !important;

  width: 220px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  position: static !important;

  overflow: hidden !important;

  border-radius: 6px !important;
}


.lkc-internal-wrap .lkc-thumbnail img {
  display: block !important;

  width: 220px !important;
  height: auto !important;

  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;

  object-fit: contain !important;
  aspect-ratio: auto !important;

  border-radius: 6px !important;
}


/* ==================================================
   タイトル
================================================== */

.lkc-internal-wrap .lkc-title {
  grid-column: 2 !important;
  grid-row: 1 !important;

  display: -webkit-box !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;
  position: static !important;

  visibility: visible !important;
  opacity: 1 !important;

  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;

  color: inherit !important;
}


/* ==================================================
   「関連記事を見る →」
   タイトルとは別のGrid要素として表示
================================================== */

.lkc-internal-wrap .lkc-content::after {
  content: "関連記事を見る →";

  grid-column: 2 !important;
  grid-row: 2 !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  opacity: 0.8;
}


/* ==================================================
   リンク
================================================== */

.lkc-internal-wrap .lkc-link,
.lkc-internal-wrap .lkc-link:link,
.lkc-internal-wrap .lkc-link:visited {
  color: inherit !important;
  text-decoration: none !important;
}


/* ==================================================
   不要な情報
================================================== */

.lkc-internal-wrap .lkc-date,
.lkc-internal-wrap .lkc-excerpt {
  display: none !important;
}


.lkc-internal-wrap .clear {
  display: none !important;
}

/* ==================================================
   スマホ
================================================== */

@media screen and (max-width: 600px) {

  .lkc-internal-wrap {
    margin: 14px 0 !important;
  }

  .lkc-internal-wrap .lkc-card {
    padding: 7px 6px !important;
  }

  .lkc-internal-wrap .lkc-content {
    grid-template-columns:
      160px
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto !important;

    column-gap: 6px !important;
    row-gap: 4px !important;

    align-items: center !important;
  }

  .lkc-internal-wrap .lkc-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    width: 160px !important;
    height: auto !important;
  }

  .lkc-internal-wrap .lkc-thumbnail img {
    width: 160px !important;
    height: auto !important;

    max-width: 100% !important;

    object-fit: contain !important;
    aspect-ratio: auto !important;
  }

  .lkc-internal-wrap .lkc-title {
    grid-column: 2 !important;
    grid-row: 1 !important;

    font-size: 14px !important;
    line-height: 1.35 !important;

    -webkit-line-clamp: 3 !important;
  }

  .lkc-internal-wrap .lkc-content::after {
    grid-column: 2 !important;
    grid-row: 2 !important;

    font-size: 11px !important;
    margin-top: 3px !important;
  }
}

/* ==================================================
   関連記事
   レイアウトはライト / ダーク共通
================================================== */

.related-entry-card-wrap {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 14px !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.related-entry-card {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.related-entry-card-thumb {
  display: block !important;
  float: none !important;
  position: static !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
  align-self: center !important;
}

.related-entry-card-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

.related-entry-card-content {
  display: block !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.related-entry-card-title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.related-entry-card-snippet {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.related-entry-card-meta,
.related-entry-card-info {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* スマホ：関連記事 */
@media screen and (max-width: 600px) {
  .related-entry-card-wrap {
    margin-bottom: 12px !important;
    padding: 7px !important;
  }

  .related-entry-card {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  .related-entry-card-thumb {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  .related-entry-card-title {
    margin-bottom: 4px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .related-entry-card-snippet {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .related-entry-card-meta,
  .related-entry-card-info {
    font-size: 11px !important;
  }
}


/* ==================================================
   公開サイト専用 ダークモード
   記事本文の配色は common-article.css で管理
================================================== */

@media all {

  /* ページ全体 */
  html,
  body {
    color: var(--article-dark-text) !important;
    background-color: var(--article-dark-bg) !important;
  }

  .container,
  .content,
  .content-in,
  .main,
  .sidebar {
    color: var(--article-dark-text) !important;
    background-color: var(--article-dark-bg) !important;
  }

  /* ヘッダー：ロゴ背景色に統一 */
  #header-container,
  #header-container-in,
  #header,
  #navi,
  #navi-in {
    background-color: var(--article-heading-bg) !important;
  }

  #navi a,
  .tagline,
  .site-name-text {
    color: #ffffff !important;
  }

  /* 記事外も含む既存の通常テキスト指定を維持 */
  p,
  li,
  dt,
  dd,
  td,
  th {
    color: var(--article-dark-text);
  }

  .sidebar a {
    color: var(--article-link-color);
  }

  /* トップページの記事カード */
  .entry-card-wrap,
  .entry-card {
    color: var(--article-dark-text) !important;
    background-color: transparent !important;
  }

  .entry-card-title {
    color: #f1f1f1 !important;
  }

  .entry-card-snippet,
  .entry-card-meta {
    color: #b7b7b7 !important;
  }

  .entry-card-info,
  .entry-card-info *,
  .post-date,
  .post-update {
    color: #aeb3ba !important;
    background-color: transparent !important;
  }

  /* サイドバー */
  .sidebar {
    color: var(--article-dark-text) !important;
  }

  .sidebar h2,
  .sidebar h3,
  .widget-title {
    color: var(--article-dark-text-strong) !important;
  }

  .widget-entry-card-title {
    color: var(--article-dark-text) !important;
  }

  .widget-sidebar-title,
  .widget-title {
    color: var(--article-dark-text-strong) !important;
    background: #24272b !important;
    border-color: #3f444d !important;
  }

  .sidebar .widget_nav_menu .menu-item > a,
  .sidebar .widget_nav_menu .menu-item > a:link,
  .sidebar .widget_nav_menu .menu-item > a:visited {
    color: #cfd3d8 !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  .sidebar .widget_nav_menu .menu-item > a:hover {
    color: #ffffff !important;
    background: #24272b !important;
  }

  /* 目次 */
  .toc {
    color: var(--article-dark-text) !important;
    background-color: #24272b !important;
  }

  .toc-title {
    color: #ffffff !important;
    background-color: var(--article-heading-bg) !important;
  }

  .toc-list > li,
  .toc-list > li li {
    color: #b8c7d1 !important;
  }

  .toc a {
    color: #c9d7df !important;
  }

  /* 投稿日 */
  .date-tags {
    color: #aaaaaa !important;
  }

  /* Pz-LinkCard */
  .lkc-internal-wrap .lkc-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  .lkc-internal-wrap .lkc-card:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
  }

  .lkc-internal-wrap .lkc-title,
  .lkc-internal-wrap .lkc-link {
    color: #eeeeee !important;
  }

  /* フォーム類 */
  input,
  textarea,
  select {
    color: #eeeeee !important;
    background-color: #25272b !important;
    border-color: #4b4f57 !important;
  }

  /* ページネーション */
  .pagination,
  .pagination-next-link,
  .page-numbers {
    color: var(--article-dark-text) !important;
    background-color: #202225 !important;
    border-color: #444954 !important;
  }

  .pagination a,
  .page-numbers a {
    color: var(--article-dark-text) !important;
  }

  .pagination .current,
  .page-numbers.current {
    color: #ffffff !important;
    background-color: var(--article-heading-bg) !important;
  }

  /* フッター */
  #footer,
  .footer,
  .footer-container,
  .footer-in {
    color: #cfcfcf !important;
    background-color: var(--article-dark-bg) !important;
  }

  #footer a,
  .footer a {
    color: #cfcfcf !important;
  }

  /* パンくず */
  .breadcrumb,
  .breadcrumb a {
    color: #aaaaaa !important;
  }

  /* 白く残りやすい領域 */
  .pager-post-navi,
  .pager-links,
  .pagination-wrapper {
    background-color: var(--article-dark-bg) !important;
  }

  /* PR・アフィリエイト表記 */
  body .main span.pr-label.pr-label-s,
  body .main .pr-label {
    color: #cfcfcf !important;
    background: #202225 !important;
    border: 1px solid #444954 !important;
  }

  /* 関連記事 */
  .related-entry-card-wrap {
    color: var(--article-dark-text) !important;
    background: transparent !important;
    border: 1px solid #3a3f47 !important;
  }

  .related-entry-card {
    color: var(--article-dark-text) !important;
    background: transparent !important;
  }

  .related-entry-card-content {
    color: #d7d9dd !important;
  }

  .related-entry-card-title,
  .related-entry-card-title a {
    color: #f1f1f1 !important;
  }

  .related-entry-card-snippet {
    color: #b7bbc2 !important;
  }

  .related-entry-card-meta,
  .related-entry-card-info {
    color: #9fa4ad !important;
  }

  .related-entry-card-wrap:hover {
    background: #24272b !important;
    border-color: #505660 !important;
  }

  .related-entry-card-wrap:hover .related-entry-card-title,
  .related-entry-card-wrap:hover .related-entry-card-title a {
    color: #ffffff !important;
  }

  .related-entry-card-wrap:hover .related-entry-card-snippet {
    color: #c6c9ce !important;
  }

  .related-entry-card-wrap:hover .related-entry-card-meta,
  .related-entry-card-wrap:hover .related-entry-card-info {
    color: #aeb3ba !important;
  }

  /* 前の記事・次の記事 */
  .prev-post,
  .next-post,
  .prev-post.a-wrap,
  .next-post.a-wrap {
    color: #d7d9dd !important;
    background: transparent !important;
  }

  .prev-post-title,
  .next-post-title,
  .prev-post-title a,
  .next-post-title a,
  .prev-post .fa,
  .next-post .fa,
  .prev-post .fas,
  .next-post .fas {
    color: #d7d9dd !important;
  }

  .prev-post:hover,
  .next-post:hover,
  .prev-post.a-wrap:hover,
  .next-post.a-wrap:hover {
    background: #24272b !important;
  }

  .prev-post:hover .prev-post-title,
  .next-post:hover .next-post-title,
  .prev-post:hover .prev-post-title a,
  .next-post:hover .next-post-title a {
    color: #ffffff !important;
  }

  /* コメントを書き込むボタン */
  #comment-reply-btn,
  .comment-btn,
  .key-btn {
    color: #f1f1f1 !important;
    background: #24272b !important;
    border: 1px solid #4a4f58 !important;
  }

  #comment-reply-btn:hover,
  .comment-btn:hover,
  .key-btn:hover {
    color: #ffffff !important;
    background: #30343a !important;
    border-color: #5a606b !important;
  }

  /* サイドバー：新着記事・人気記事 */
  .widget_new_entries .widget-entry-card-wrap,
  .widget_popular_entries .widget-entry-card-wrap,
  .widget_new_entries .a-wrap,
  .widget_popular_entries .a-wrap {
    background: transparent !important;
  }

  .widget_new_entries .widget-entry-card-wrap:hover,
  .widget_popular_entries .widget-entry-card-wrap:hover,
  .widget_new_entries .a-wrap:hover,
  .widget_popular_entries .a-wrap:hover {
    background: #24272b !important;
  }

  .widget_new_entries .widget-entry-card-title,
  .widget_popular_entries .widget-entry-card-title {
    color: #d7d9dd !important;
  }

  .widget_new_entries .widget-entry-card-wrap:hover .widget-entry-card-title,
  .widget_popular_entries .widget-entry-card-wrap:hover .widget-entry-card-title,
  .widget_new_entries .a-wrap:hover .widget-entry-card-title,
  .widget_popular_entries .a-wrap:hover .widget-entry-card-title {
    color: #ffffff !important;
  }

  /* 商品アフィリエイトリンク */
  .easyLink-box,
  .easyLink-box *,
  .msmaflink-box {
    color: var(--article-dark-text) !important;
  }

  .easyLink-box,
  .msmaflink-box {
    background: #202225 !important;
    border-color: #444954 !important;
  }

  .easyLink-info-name,
  .easyLink-info-name a {
    color: #f1f1f1 !important;
  }

  .easyLink-info-maker,
  .easyLink-info-model,
  .easyLink-info-btn {
    color: #b8bcc3 !important;
  }
}

/* Home only: keep Cocoon's generic content spacing from reopening a gap. */
body.home .content { margin-top: 0 !important; }
body.home .content-in > .main,
body.home #main.portal-home { padding-top: 0 !important; margin-top: 0 !important; }
body.home .lhs-home { padding-top: 0 !important; }
body.home .lhs-home .lhs-section:first-child { margin-top: 0 !important; }

/* ヒーロー削除後は、PC・タブレットでレイアウト開始前の26px余白は不要。 */
@media screen and (min-width: 768px) {
  body.home .lhs-layout { margin-top: 16px !important; }
}

/* Tablet navigation: center the menu by its content width instead of stretching six cells. */
@media screen and (min-width: 835px) and (max-width: 1199px) {
  #navi .navi-in > ul.menu-header {
    display: flex !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }
  #navi .navi-in > ul.menu-header > li {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  #navi .navi-in > ul.menu-header > li > a {
    width: auto !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 834px) {
  #navi .navi-in > ul.menu-header { display: none !important; }
  #navi .navi-in > ul.menu-mobile {
    display: flex !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 4px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }
  #navi .navi-in > ul.menu-mobile > li { flex: 0 0 auto !important; width: auto !important; }
  #navi .navi-in > ul.menu-mobile > li > a { width: auto !important; padding: 4px 7px !important; white-space: nowrap !important; }
}

/* タブレットではカテゴリー一覧をコンパクトな2列で表示する。 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  body.home .lhs-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .lhs-section--basics .lhs-recommend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .lhs-section--basics .lhs-card:nth-child(n + 5) { display: none; }
  #navi .navi-in > ul.menu-header { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media screen and (max-width: 767px) {
  body.home .lhs-section--basics .lhs-card:nth-child(n + 5) { display: none; }
  /* 人気記事はモバイル時だけ、画像を活かした4件・2列カードにする。 */
  body.home .lhs-section--featured .lhs-recommend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.home .lhs-section--featured .lhs-card { border: 1px solid var(--border-color); border-radius: 8px; }
  body.home .lhs-section--featured .lhs-card a { display: block; padding: 0; }
  body.home .lhs-section--featured .lhs-thumb { aspect-ratio: 16 / 9; border-radius: 0; }
  body.home .lhs-section--featured .lhs-card-text { display: block; min-height: 0; padding: 8px 9px 9px; }
  body.home .lhs-section--featured .lhs-card small { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  body.home .lhs-section--featured .lhs-card strong { min-height: 2.84em; font-size: 12px; line-height: 1.42; -webkit-line-clamp: 2; }
  body.home .lhs-section--featured .lhs-card time { margin-top: 5px; font-size: 10px; }
}

/* PC・タブレットは従来の人気記事3件を維持し、4件目はモバイル専用にする。 */
@media screen and (min-width: 768px) {
  body.home .lhs-section--featured .lhs-card:nth-child(n + 4) { display: none; }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  body.home .lhs-side-recommend a { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
  body.home .lhs-side-recommend b { -webkit-line-clamp: 2; }
}

/* おすすめ記事: アイキャッチを主役にし、記事情報は画像の下へ配置する。 */
.lhs-side-recommend article > a { display:block; min-width:0; max-width:100%; }
.lhs-side-recommend article > a > span:first-child { display:block; width:100%; min-width:0; max-width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:7px; }
.lhs-side-recommend article > a > .lhs-side-recommend__text { display:block; min-width:0; max-width:100%; margin-top:7px; }
.lhs-side-recommend article > a b { -webkit-line-clamp:2; overflow-wrap:anywhere; }
.lhs-side-recommend article > a > span:first-child img { object-fit:contain; background:var(--page-bg); }

/* スマホのカテゴリ導線は、記事一覧ではなくコンパクトな2列の選択肢として見せる。 */
@media screen and (max-width:767px){
  body.home .lhs-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.home .lhs-cats h3{padding:8px 9px 0;font-size:15px;line-height:1.3}
  body.home .lhs-cats .lhs-more--category{margin:7px 9px 10px;font-size:11px;line-height:1.35}
  body.home .lhs-category-image{aspect-ratio:16/9}
}

/* PCでは、情報量を保ったまま補助テキストだけを一段読みやすくする。 */
@media screen and (min-width:1200px){
  .lhs-card small,.lhs-card time{font-size:12px}
  .lhs-card strong{font-size:15px;line-height:1.55}
  .lhs-section--featured .lhs-card strong{font-size:16px}
  .lhs-cats h3{font-size:19px}
  .lhs-cats li a{font-size:14px;line-height:1.5}
  .lhs-cats .lhs-more--category{font-size:13px}
  .lhs-side-recommend h3{font-size:13px}
  .lhs-side-recommend small.lhs-side-recommend__role{font-size:10px!important}
  .lhs-side-recommend article > a b{font-size:13px;line-height:1.48}
  .lhs-profile-name{font-size:17px}
  .lhs-profile-lead{font-size:13px!important;line-height:1.58!important}
  .lhs-profile-copy p{font-size:13px!important;line-height:1.76!important}
  .lhs-side li a{font-size:13px;line-height:1.46}
  .lhs-side em{font-size:13px}
  .lhs-side-tags-more{font-size:13px}
}

/* タブレットでも、見出しを変えず本文・補助情報だけをPCと同程度に読みやすくする。 */
@media screen and (min-width:768px) and (max-width:1199px){
  .lhs-card small,.lhs-card time{font-size:12px}
  .lhs-card strong{font-size:15px;line-height:1.53}
  .lhs-cats h3{font-size:19px}
  .lhs-cats li a{font-size:14px;line-height:1.5}
  .lhs-cats .lhs-more--category{font-size:13px}
  .lhs-side-recommend h3{font-size:13px}
  .lhs-side-recommend small.lhs-side-recommend__role{font-size:10px!important}
  .lhs-side-recommend article > a b{font-size:13px;line-height:1.48}
  .lhs-profile-name{font-size:17px}
  .lhs-profile-lead{font-size:13px!important;line-height:1.58!important}
  .lhs-profile-copy p{font-size:13px!important;line-height:1.76!important}
  .lhs-outline{font-size:13px}
  .lhs-side li a,.lhs-side em{font-size:13px;line-height:1.46}
  .lhs-side-tags-more{font-size:13px}
}

/* スマホでは横幅を圧迫しない範囲で、本文・ラベル・一覧を一段だけ拡大する。 */
@media screen and (max-width:767px){
  .lhs-card small,.lhs-card time{font-size:12px}
  .lhs-card strong{font-size:15px;line-height:1.53}
  body.home .lhs-cats h3{font-size:16px}
  body.home .lhs-cats .lhs-more--category{font-size:12px;line-height:1.4}
  .lhs-side-recommend h3{font-size:13px}
  .lhs-side-recommend small.lhs-side-recommend__role{font-size:10px!important}
  .lhs-side-recommend article > a b{font-size:13px;line-height:1.48}
  .lhs-profile-name{font-size:17px}
  .lhs-profile-lead{font-size:13px!important;line-height:1.58!important}
  .lhs-profile-copy p{font-size:13px!important;line-height:1.76!important}
  .lhs-outline{font-size:13px}
  .lhs-side li a,.lhs-side em{font-size:13px;line-height:1.46}
  .lhs-side-tags-more{font-size:13px}
}

/* モバイル: 記事画像を主役にし、おすすめ記事を人気記事の直後へ配置する。 */
@media screen and (max-width:767px){
  /* メインとサイドバーを同じ縦フローにし、各セクションを安全に並べ替える。 */
  body.home .lhs-layout{display:flex;flex-direction:column;gap:16px}
  body.home .lhs-layout>div,
  body.home .lhs-side{display:contents}
  body.home .lhs-layout .lhs-section,
  body.home .lhs-layout .lhs-side section{box-sizing:border-box;width:100%}
  body.home .lhs-layout .lhs-section{margin-bottom:0}
  body.home .lhs-section--featured{order:1}
  body.home #latest{order:2}
  body.home .lhs-side section:nth-child(2){order:3}
  body.home .lhs-section--basics{order:4}
  body.home .lhs-layout>div>.lhs-section:nth-child(4){order:5}
  body.home .lhs-profile-card{order:6}
  body.home .lhs-side-popular-tags{order:7}
  body.home .lhs-side section:nth-child(4){order:8}

  /* 新着・基礎解説は、画像の下に本文を置く縦型カードに統一する。 */
  body.home .lhs-latest,
  body.home .lhs-section--basics .lhs-recommend{gap:10px}
  body.home .lhs-latest .lhs-card,
  body.home .lhs-section--basics .lhs-card{border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg)}
  body.home .lhs-latest .lhs-card+.lhs-card,
  body.home .lhs-section--basics .lhs-card+.lhs-card{border-top:1px solid var(--border-color)}
  body.home .lhs-latest .lhs-card a,
  body.home .lhs-section--basics .lhs-card a{display:block;padding:0}
  body.home .lhs-latest .lhs-thumb,
  body.home .lhs-section--basics .lhs-thumb{width:100%;aspect-ratio:16 / 9;align-self:auto;border-radius:7px 7px 0 0}
  body.home .lhs-latest .lhs-thumb img,
  body.home .lhs-section--basics .lhs-thumb img{object-fit:cover;object-position:center}
  body.home .lhs-latest .lhs-card-text,
  body.home .lhs-section--basics .lhs-card-text{display:block;padding:10px 12px 12px}
  body.home .lhs-latest .lhs-card small,
  body.home .lhs-section--basics .lhs-card small{font-size:12px;line-height:1.45}
  body.home .lhs-latest .lhs-card strong,
  body.home .lhs-section--basics .lhs-card strong{font-size:16px;line-height:1.55}
  body.home .lhs-latest .lhs-card time,
  body.home .lhs-section--basics .lhs-card time{margin-top:7px;font-size:12px;line-height:1.4}

  /* おすすめ記事は画像を維持したまま、モバイルで一段読みやすくする。 */
  body.home .lhs-side-recommend h3{font-size:15px;line-height:1.4}
  body.home .lhs-side-recommend small.lhs-side-recommend__role{padding:3px 8px;font-size:12px!important;line-height:1.3}
  body.home .lhs-side-recommend article>a b{font-size:16px;line-height:1.55}
  body.home .lhs-side-recommend article>a>.lhs-side-recommend__text{margin-top:9px}
}

/* ==================================================
   公開サイトは常時ダーク表示
   OS / ブラウザの prefers-color-scheme では配色を切り替えない。
================================================== */
:root{color-scheme:dark}
body.home .lhs-home{
  --page-bg:#151c23;
  --card-bg:#202a33;
  --card-bg-hover:#293743;
  --text-color:#e7eff5;
  --text-muted:#a8b9c6;
  --border-color:#384a59;
  --accent-color:#57b8ef;
  --link-color:#70c5f5;
}
.lhs-tag-index{
  --page-bg:#151c23;
  --card-bg:#202a33;
  --text-color:#e7eff5;
  --text-muted:#a8b9c6;
  --border-color:#384a59;
  --accent-color:#57b8ef;
}
body.home .lhs-section,
body.home .lhs-side section{box-shadow:0 2px 9px rgba(0,0,0,.15)}
body.home .lhs-card:hover{border-color:#5b93b5}
body.home .lhs-cats article{background:#25323d}
body.home .lhs-section:last-child .lhs-title{border-bottom-color:#4d7893}
body.home .lhs-side-recommend h3 a{border-color:rgba(87,184,239,.45);background:rgba(87,184,239,.14)}
body.home .lhs-side-recommend h3 a:hover,
body.home .lhs-side-recommend h3 a:focus-visible{background:rgba(87,184,239,.22)}

/* タブレットでは新着の直後へおすすめ記事を配置し、4ジャンルを2×2で見せる。 */
@media screen and (min-width:768px) and (max-width:1199px){
  body.home .lhs-layout{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
  body.home .lhs-layout>div,
  body.home .lhs-side{display:contents}
  body.home .lhs-layout .lhs-section,
  body.home .lhs-layout .lhs-side section{box-sizing:border-box;margin:0}
  body.home .lhs-section--featured{grid-column:1/-1;grid-row:1}
  body.home #latest{grid-column:1/-1;grid-row:2}
  body.home .lhs-side section:nth-child(2){grid-column:1/-1;grid-row:3}
  body.home .lhs-section--basics{grid-column:1/-1;grid-row:4}
  body.home .lhs-layout>div>.lhs-section:nth-child(4){grid-column:1/-1;grid-row:5}
  body.home .lhs-profile-card{grid-column:1/3;grid-row:6}
  body.home .lhs-side-popular-tags{grid-column:3/5;grid-row:6}
  body.home .lhs-side section:nth-child(4){grid-column:5/-1;grid-row:6}

  body.home .lhs-side-recommend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:8px}
  body.home .lhs-side-recommend h3{margin:0!important}
  body.home .lhs-side-recommend article{padding-top:8px}
  body.home .lhs-side-recommend h3:nth-of-type(1){grid-column:1;grid-row:1}
  body.home .lhs-side-recommend article:nth-of-type(1){grid-column:1;grid-row:2}
  body.home .lhs-side-recommend article:nth-of-type(2){grid-column:1;grid-row:3}
  body.home .lhs-side-recommend h3:nth-of-type(2){grid-column:2;grid-row:1}
  body.home .lhs-side-recommend article:nth-of-type(3){grid-column:2;grid-row:2}
  body.home .lhs-side-recommend article:nth-of-type(4){grid-column:2;grid-row:3}
  body.home .lhs-side-recommend h3:nth-of-type(3){grid-column:1;grid-row:4;margin-top:8px!important}
  body.home .lhs-side-recommend article:nth-of-type(5){grid-column:1;grid-row:5}
  body.home .lhs-side-recommend article:nth-of-type(6){grid-column:1;grid-row:6}
  body.home .lhs-side-recommend h3:nth-of-type(4){grid-column:2;grid-row:4;margin-top:8px!important}
  body.home .lhs-side-recommend article:nth-of-type(7){grid-column:2;grid-row:5}
  body.home .lhs-side-recommend article:nth-of-type(8){grid-column:2;grid-row:6}
}

/* カテゴリー名を、画像や記事名より先に認識できる見出しとして強める。 */
body.home .lhs-cats h3{font-size:20px;font-weight:800;letter-spacing:.02em}
body.home .lhs-cats h3 a{padding-left:9px;border-left:3px solid var(--accent-color)}
body.home .lhs-cats h3 a:hover,
body.home .lhs-cats h3 a:focus-visible{color:var(--accent-color)!important}

/* モバイルでは各ジャンルの2記事を横に並べ、画像主体のカードを詰めすぎずにコンパクト化する。 */
@media screen and (max-width:767px){
  body.home .lhs-side-recommend{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:10px}
  body.home .lhs-side-recommend h3{grid-column:1/-1;margin:7px 0 0!important;font-size:14px;line-height:1.35}
  body.home .lhs-side-recommend article{padding-top:0;border-top:0}
  body.home .lhs-side-recommend article>a>.lhs-side-recommend__text{margin-top:6px}
  body.home .lhs-side-recommend small.lhs-side-recommend__role{padding:2px 6px;font-size:10px!important;line-height:1.25}
  body.home .lhs-side-recommend article>a b{font-size:14px;line-height:1.43;-webkit-line-clamp:2}
  body.home .lhs-cats h3{padding:9px 10px 0;font-size:17px;line-height:1.3}
  body.home .lhs-cats h3 a{padding-left:7px;border-left-width:3px}
}

/* モバイルのカード型記事一覧は、すべて画面幅に追従する2列を基本にする。 */
@media screen and (max-width:767px){
  body.home .lhs-section--featured .lhs-recommend,
  body.home .lhs-latest,
  body.home .lhs-section--basics .lhs-recommend{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  body.home .lhs-section--featured .lhs-card strong,
  body.home .lhs-latest .lhs-card strong,
  body.home .lhs-section--basics .lhs-card strong{min-height:0;font-size:13px;line-height:1.45;-webkit-line-clamp:3}
  body.home .lhs-section--featured .lhs-card small,
  body.home .lhs-latest .lhs-card small,
  body.home .lhs-section--basics .lhs-card small{font-size:10px;line-height:1.35}
  body.home .lhs-section--featured .lhs-card time,
  body.home .lhs-latest .lhs-card time,
  body.home .lhs-section--basics .lhs-card time{margin-top:5px;font-size:10px;line-height:1.35}
  body.home .lhs-latest .lhs-card-text,
  body.home .lhs-section--basics .lhs-card-text{padding:8px 9px 9px}
}

/* タブレットもモバイルと同じ順にセクションを縦に並べる。 */
@media screen and (min-width:768px) and (max-width:1199px){
  body.home .lhs-layout{display:flex!important;flex-direction:column;gap:16px;margin-top:16px!important}
  body.home .lhs-layout>div,
  body.home .lhs-side{display:contents!important}
  body.home .lhs-layout .lhs-section,
  body.home .lhs-layout .lhs-side section{box-sizing:border-box;width:100%;margin:0!important}
  body.home .lhs-section--featured{order:1}
  body.home #latest{order:2}
  body.home .lhs-side section:nth-child(2){order:3}
  body.home .lhs-section--basics{order:4}
  body.home .lhs-layout>div>.lhs-section:nth-child(4){order:5}
  body.home .lhs-profile-card{order:6}
  body.home .lhs-side-popular-tags{order:7}
  body.home .lhs-side-recommend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-items:stretch}
  body.home .lhs-side-recommend h3{grid-column:1/-1!important;grid-row:auto!important;margin:5px 0 -4px!important}
  body.home .lhs-side-recommend article{display:flex;grid-column:auto!important;grid-row:auto!important;min-width:0;padding-top:0;border-top:0}
  body.home .lhs-side-recommend article>a{display:flex;flex:1;flex-direction:column;min-width:0;max-width:none;gap:0}
  body.home .lhs-side-recommend article>a>span:first-child{width:100%;aspect-ratio:16/9}
  body.home .lhs-side-recommend article>a>.lhs-side-recommend__text{display:flex;flex:1;flex-direction:column;min-width:0;margin-top:8px}
  body.home .lhs-side-recommend article>a b{min-height:calc(2 * 1.48em);-webkit-line-clamp:2}
  body.home .lhs-side>section:not(:nth-child(2)){padding:18px 20px}
}

/* カテゴリ階層は控えめな字下げとガイド線で親子関係を読む。 */
body.home .lhs-side li.lhs-category-depth-1,
body.home .lhs-side li.lhs-category-depth-2{position:relative;padding-top:7px;padding-bottom:7px}
body.home .lhs-side li.lhs-category-depth-1{padding-left:19px}
body.home .lhs-side li.lhs-category-depth-2{padding-left:31px}
body.home .lhs-side li.lhs-category-depth-1 a:before,
body.home .lhs-side li.lhs-category-depth-2 a:before{content:'';width:8px;height:8px;margin:0 7px 0 -12px;border-left:1px solid var(--border-color);border-bottom:1px solid var(--border-color);transform:translateY(-2px)}

/* 人気タグと記事上部タグは、密度を下げてタップ領域を確保する。 */
.lhs-popular-tags{gap:11px}
.lhs-popular-tags a,.lifehackshin-post-tags a{min-height:34px;padding:8px 12px;box-sizing:border-box;font-size:13px;line-height:1.35}
.lifehackshin-post-tags{gap:12px;padding:15px 0;margin-bottom:22px}
.lifehackshin-post-tags>div{gap:9px}

/* 関連記事はPC 3列、タブレット・モバイルは2列を基準にする。 */
@media screen and (min-width:1200px){.lifehackshin-related__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:767px){
  body.home .lhs-section{margin-bottom:14px}
  body.home .lhs-section--featured .lhs-card-text,
  body.home .lhs-latest .lhs-card-text,
  body.home .lhs-section--basics .lhs-card-text{padding:10px 10px 11px}
  body.home .lhs-section--featured .lhs-card strong,
  body.home .lhs-latest .lhs-card strong,
  body.home .lhs-section--basics .lhs-card strong{font-size:13.5px;line-height:1.5}
  body.home .lhs-section--featured .lhs-card small,
  body.home .lhs-latest .lhs-card small,
  body.home .lhs-section--basics .lhs-card small{margin-bottom:3px;font-size:10.5px;line-height:1.4}
  .lhs-popular-tags{gap:8px}
  .lhs-popular-tags a,.lifehackshin-post-tags a{min-height:33px;padding:7px 10px;font-size:12px}
}

/* トップページの「よく使われているタグ」は件数を表示しない。 */
body.home .lhs-side-popular-tags .lhs-popular-tags small{display:none}

/* モバイルの記事タグは見出しと同じ行から始め、タグ数に応じて折り返す。 */
@media screen and (max-width:767px){
  .lifehackshin-post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 0}
  .lifehackshin-post-tags>span{display:inline-block;flex:0 0 auto;margin:0;padding-top:0}
  .lifehackshin-post-tags>div{display:flex;flex:1 1 0;flex-wrap:wrap;gap:5px;min-width:0}
}

/* iPhoneなどの小画面では枠と多列を減らし、本文と画像の表示幅を優先する。 */
@media screen and (max-width:767px){
  body.home .lhs-home{padding:0 0 24px}
  body.home .lhs-inner{width:calc(100% + 32px);max-width:none;margin-left:-16px}
  body.home .lhs-hero{border-radius:0;padding-right:18px;padding-left:18px}
  body.home .lhs-layout{gap:10px;margin-top:10px}
  body.home .lhs-section,
  body.home .lhs-side section{box-sizing:border-box;width:100%;padding:14px 8px;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  body.home .lhs-title{gap:8px;padding-bottom:10px;margin-bottom:12px}
  body.home .lhs-title h2,
  body.home .lhs-side h2{font-size:20px;line-height:1.4}

  body.home .lhs-section--featured .lhs-recommend,
  body.home .lhs-latest,
  body.home .lhs-section--basics .lhs-recommend{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}
  body.home .lhs-section--featured .lhs-card,
  body.home .lhs-latest .lhs-card,
  body.home .lhs-section--basics .lhs-card{overflow:hidden;border:0;border-radius:0;background:transparent}
  body.home .lhs-section--featured .lhs-card a,
  body.home .lhs-latest .lhs-card a,
  body.home .lhs-section--basics .lhs-card a{display:block;padding:0}
  body.home .lhs-section--featured .lhs-thumb,
  body.home .lhs-latest .lhs-thumb,
  body.home .lhs-section--basics .lhs-thumb{width:100%;aspect-ratio:16/9;border-radius:0}
  body.home .lhs-section--featured .lhs-card-text,
  body.home .lhs-latest .lhs-card-text,
  body.home .lhs-section--basics .lhs-card-text{padding:9px 0 13px}
  body.home .lhs-section--featured .lhs-card strong,
  body.home .lhs-latest .lhs-card strong,
  body.home .lhs-section--basics .lhs-card strong{font-size:17px;line-height:1.55;-webkit-line-clamp:3}
  body.home .lhs-section--featured .lhs-card small,
  body.home .lhs-latest .lhs-card small,
  body.home .lhs-section--basics .lhs-card small{font-size:12px;line-height:1.4}
  body.home .lhs-section--featured .lhs-card time,
  body.home .lhs-latest .lhs-card time,
  body.home .lhs-section--basics .lhs-card time{font-size:12px}

  body.home .lhs-side-recommend{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 8px}
  body.home .lhs-side-recommend h3{grid-column:1/-1;margin:8px 0 0!important;font-size:17px;line-height:1.45}
  body.home .lhs-side-recommend article{padding:0;border:0}
  body.home .lhs-side-recommend article>a>.lhs-side-recommend__text{margin-top:8px}
  body.home .lhs-side-recommend article>a b{font-size:17px;line-height:1.55;-webkit-line-clamp:3}
  body.home .lhs-side-recommend small.lhs-side-recommend__role{font-size:12px!important}

  body.home .lhs-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px}
  body.home .lhs-cats article{padding:0;border:0;border-radius:0;background:transparent}
  body.home .lhs-cats h3{padding:10px 0 0;font-size:18px;line-height:1.4}
  body.home .lhs-cats h3 a{padding-left:8px}
  body.home .lhs-cats .lhs-more--category{margin:7px 0 12px;font-size:13px}
  body.home .lhs-cats .lhs-category-image{aspect-ratio:16/9}

  body.home .lhs-profile-copy p{font-size:15px!important;line-height:1.75!important}
  body.home .lhs-profile-lead{font-size:15px!important;line-height:1.65!important}
  body.home .lhs-side-popular-tags .lhs-popular-tags a{min-height:38px;padding:8px 12px;font-size:14px}
}


/* DK02 draft3280 only: unique wrapper inserted solely in its review section. */
.entry-content .dk02-review04 {
  --dk02-chat-text: #f2f6f8;
  margin: 24px 0 30px;
}
.entry-content .dk02-review04 .dk02-chat {
  --dk02-bubble-bg: #1f353d;
  --dk02-bubble-border: #568592;
  --dk02-bubble-accent: #a1d9e2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 22px 0;
}
.entry-content .dk02-review04 .dk02-chat--concern {
  --dk02-bubble-bg: #3d3028;
  --dk02-bubble-border: #a28362;
  --dk02-bubble-accent: #edc99b;
}
.entry-content .dk02-review04 .dk02-chat--owner {
  --dk02-bubble-bg: #233149;
  --dk02-bubble-border: #6688b1;
  --dk02-bubble-accent: #b9d1f0;
  flex-direction: row-reverse;
}
.entry-content .dk02-review04 .speech-person {
  flex: 0 0 72px;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
}
.entry-content .dk02-review04 .speech-icon {
  margin: 0;
}
.entry-content .dk02-review04 .speech-icon img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--dk02-bubble-border);
  border-radius: 50%;
  background: #293740;
}
.entry-content .dk02-review04 .speech-name {
  margin-top: 7px;
  padding: 4px 2px;
  border-radius: 5px;
  background: #293740 !important;
  color: var(--dk02-chat-text) !important;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.entry-content .dk02-review04 .speech-balloon {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 17px 20px;
  border: 1px solid var(--dk02-bubble-border) !important;
  border-radius: 10px;
  background: var(--dk02-bubble-bg) !important;
  color: var(--dk02-chat-text) !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.entry-content .dk02-review04 .speech-balloon p,
.entry-content .dk02-review04 .speech-balloon strong {
  color: var(--dk02-chat-text) !important;
  font-size: 17px;
  line-height: 1.8;
}
.entry-content .dk02-review04 .speech-balloon p {
  margin: 0;
}
.entry-content .dk02-review04 .speech-balloon .dk02-chat-topic {
  margin: 0 0 6px;
  color: var(--dk02-bubble-accent) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.entry-content .dk02-review04 .speech-balloon::before,
.entry-content .dk02-review04 .speech-balloon::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: auto;
  width: 0;
  height: 0;
  border: 0 solid transparent;
  background: transparent;
}
.entry-content .dk02-review04 .speech-balloon::before {
  top: 23px;
  left: -12px;
  border-top-width: 8px;
  border-bottom-width: 8px;
  border-right: 12px solid var(--dk02-bubble-border);
}
.entry-content .dk02-review04 .speech-balloon::after {
  top: 24px;
  left: -10px;
  border-top-width: 7px;
  border-bottom-width: 7px;
  border-right: 11px solid var(--dk02-bubble-bg);
}
.entry-content .dk02-review04 .dk02-chat--owner .speech-balloon::before {
  right: -12px;
  left: auto;
  border-right: 0;
  border-left: 12px solid var(--dk02-bubble-border);
}
.entry-content .dk02-review04 .dk02-chat--owner .speech-balloon::after {
  right: -10px;
  left: auto;
  border-right: 0;
  border-left: 11px solid var(--dk02-bubble-bg);
}
.entry-content .dk02-review04 .dk02-review-source {
  margin: 26px 0 0;
  padding: 11px 14px;
  border: 1px solid #567583;
  border-radius: 7px;
  background: #23313a !important;
  color: var(--dk02-chat-text) !important;
  font-size: 14px;
  line-height: 1.8;
}
.entry-content .dk02-review04 .dk02-review-source a {
  color: #a9def3 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content .dk02-review04 .dk02-review-source a:focus-visible {
  outline: 2px solid #a9def3;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .entry-content .dk02-review04 .dk02-chat {
    gap: 12px;
    margin: 20px 0;
  }
  .entry-content .dk02-review04 .speech-person {
    flex-basis: 54px;
    width: 54px;
    min-width: 54px;
    max-width: 54px;
  }
  .entry-content .dk02-review04 .speech-name {
    font-size: 11px;
  }
  .entry-content .dk02-review04 .speech-balloon {
    padding: 13px 14px;
  }
  .entry-content .dk02-review04 .speech-balloon p,
  .entry-content .dk02-review04 .speech-balloon strong {
    font-size: 16px;
  }
  .entry-content .dk02-review04 .speech-balloon .dk02-chat-topic {
    font-size: 12px;
  }
}

/* macro3302-marker-readability: keep Cocoon underline markers legible on dark articles. */
.post-3302 .entry-content .marker-under {
  background: linear-gradient(transparent 70%, rgba(255, 255, 153, .28) 70%);
}

/* DK02 review10: only the requested comment section of post3280. */
.post-3280 .entry-content .dk02-review10 {
  --dk02-chat-text: #f3f7fa;
  margin: 28px 0 30px;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat {
  --dk02-bubble-bg: #203a44;
  --dk02-bubble-border: #608b98;
  --dk02-bubble-accent: #b0e4ea;
  width: 94%;
  max-width: 700px;
  gap: 16px;
  margin: 24px 0 28px;
  flex-direction: row;
}
.post-3280 .entry-content .dk02-review10 .speech-person {
  flex: 0 0 60px;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}
.post-3280 .entry-content .dk02-review10 .speech-icon img {
  border: 2px solid var(--dk02-bubble-border);
}
.post-3280 .entry-content .dk02-review10 .speech-name {
  padding: 0;
  margin-top: 6px;
  background: transparent !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
}
.post-3280 .entry-content .dk02-review10 .speech-balloon {
  padding: 18px 23px;
  border-radius: 28px;
  min-width: 0;
}
.post-3280 .entry-content .dk02-review10 .speech-balloon p {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1.8;
}
.post-3280 .entry-content .dk02-review10 .speech-balloon .dk02-chat-topic {
  font-size: 12px;
  margin-bottom: 7px;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--good .speech-balloon::before {
  top: 22px;
  left: -12px;
  right: auto;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--good .speech-balloon::after {
  top: 23px;
  left: -10px;
  right: auto;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--concern {
  --dk02-bubble-bg: #49352c;
  --dk02-bubble-border: #b08560;
  --dk02-bubble-accent: #f3d2a4;
  flex-direction: row-reverse;
  margin-left: auto;
  margin-right: 0;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--concern .speech-balloon {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 24px 28px;
  isolation: isolate;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--concern .speech-balloon::before {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  background: var(--dk02-bubble-bg);
  z-index: -1;
  clip-path: polygon(0 12px,12px 10px,14px 0,26px 8px,calc(50% - 10px) 8px,50% 0,calc(50% + 10px) 8px,calc(100% - 27px) 8px,calc(100% - 13px) 0,calc(100% - 10px) 12px,100% 14px,calc(100% - 6px) 30px,100% 46px,calc(100% - 6px) calc(100% - 26px),100% calc(100% - 14px),calc(100% - 13px) calc(100% - 10px),calc(100% - 16px) 100%,calc(100% - 28px) calc(100% - 8px),calc(50% + 10px) calc(100% - 8px),50% 100%,calc(50% - 10px) calc(100% - 8px),27px calc(100% - 8px),13px 100%,10px calc(100% - 12px),0 calc(100% - 14px),6px calc(100% - 28px),0 46px,6px 28px);
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--concern .speech-balloon::after {
  top: 27px;
  left: auto;
  right: -11px;
  border: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--dk02-bubble-bg);
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--owner {
  --dk02-bubble-bg: #263a59;
  --dk02-bubble-border: #7798c3;
  --dk02-bubble-accent: #c8ddfa;
  width: 100%;
  max-width: 720px;
  flex-direction: row;
  margin-top: 36px;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--owner .speech-balloon {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 24px 30px;
  isolation: isolate;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--owner .speech-balloon::before {
  inset: -3px -3px;
  width: auto;
  height: auto;
  border: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M38 17C53 2 89 2 107 14C131 1 172 1 195 12C223 1 266 1 289 13C320 1 363 1 387 14C417 1 459 2 481 16C516 3 554 9 563 27C595 31 601 55 586 72C602 94 597 117 577 127C593 154 569 171 540 164C518 181 473 179 449 167C420 180 376 180 354 168C325 181 281 180 258 168C232 181 184 180 162 167C132 180 92 176 76 163C43 173 14 156 20 133C-2 120-2 95 14 78C-1 52 5 31 38 17Z' fill='%23263a59' stroke='%237798c3' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.post-3280 .entry-content .dk02-review10 .dk02-chat--owner .speech-balloon::after {
  top: 26px;
  left: -15px;
  right: auto;
  width: 9px;
  height: 9px;
  border: 1px solid var(--dk02-bubble-border);
  border-radius: 50%;
  background: var(--dk02-bubble-bg);
  box-shadow: -9px 10px 0 -2px var(--dk02-bubble-bg);
}
.post-3280 .entry-content .dk02-review10 .dk02-review-source {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: inherit !important;
  opacity: .8;
  font-size: 12px;
  line-height: 1.7;
}
.post-3280 .entry-content .dk02-review10 .dk02-review-source a {
  color: inherit !important;
}
@media (max-width: 480px) {
  .post-3280 .entry-content .dk02-review10 .dk02-chat {
    width: 100%;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 26px;
  }
  .post-3280 .entry-content .dk02-review10 .speech-person {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
  }
  .post-3280 .entry-content .dk02-review10 .speech-name {font-size: 11px;}
  .post-3280 .entry-content .dk02-review10 .speech-balloon {padding: 15px 17px;}
  .post-3280 .entry-content .dk02-review10 .dk02-chat--concern .speech-balloon {padding: 23px 20px;}
  .post-3280 .entry-content .dk02-review10 .dk02-chat--owner {margin-top: 34px;}
  .post-3280 .entry-content .dk02-review10 .dk02-chat--owner .speech-balloon {padding: 24px 22px;}
  .post-3280 .entry-content .dk02-review10 .speech-balloon .dk02-chat-topic {font-size: 11px;}
}