@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.5
*/

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ▼▼▼ ここからデザインの定義（CSS） ▼▼▼ */
.subcat-nav-container {
    background-color: #f8f9fa; /* 背景色（薄いグレー） */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5em 1em;
    margin-bottom: 2.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.subcat-nav-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.2em;
}

.subcat-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列表示 */
    gap: 12px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* PCやタブレット（画面幅768px以上）では3列表示にする */
@media (min-width: 768px) {
    .subcat-nav-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.subcat-nav-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.subcat-nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #333333;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    padding: 12px 8px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.3;
}

/* マウスカーソルを乗せた時の動き（ホバーエフェクト） */
.subcat-nav-list a:hover {
    background-color: #3498db; /* ホバー時の背景色（ブルー） */
    color: #ffffff; /* ホバー時の文字色（白） */
    border-color: #3498db;
    transform: translateY(-2px); /* 少し上に浮くアニメーション */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* ▲▲▲ ここまでデザインの定義（CSS） ▲▲▲ */

/* ===== PCLINE design 2026-10-09 (BEGIN) ===== */
/* 色は仕様書（pc_P0S1_現状測定と診断_P1仕様_S2施策_20261009.md §2-3）の表と同じ。変更はここの変数だけで行う */
/* 画像URLは完全なURLで書く（CocoonのCSS縮小化が /wp-content/… を子テーマ基準に書き換えるため） */
:root{--pc-ink:#22104C;--pc-nav:#33197A;--pc-act:#5A2DC8;--pc-act-d:#45209F;--pc-lime:#B6F03C;--pc-bg:#F4F3F9;--pc-card:#fff;--pc-text:#1E1B2E;--pc-muted:#4C4862;--pc-line:#CFCAE0;--pc-chip:#ECE6FB;--pc-foot:#CEC8E8;
--pc-trace:linear-gradient(90deg,transparent 0 6px,var(--pc-lime) 6px 10px,transparent 10px) 0 50%/48px 4px repeat-x,linear-gradient(var(--pc-lime),var(--pc-lime)) 0 50%/100% 1px no-repeat}
body{background:var(--pc-bg);color:var(--pc-text)}
a{color:var(--pc-act)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,label:focus-visible{outline:3px solid var(--pc-act);outline-offset:2px}

/* ヘッダー：上端の配線帯（モチーフ）・ロゴ */
#header-container{background:var(--pc-ink)}
#header-container::before{content:"";display:block;height:10px;background:var(--pc-trace),var(--pc-ink);opacity:.95}
.header-container .tagline{color:var(--pc-foot);font-size:12px;letter-spacing:.06em}
.logo-header img{max-height:56px;width:auto}
.logo-header .site-name-text{color:#fff}
#navi,#navi .navi-in>ul,#navi .navi-in>.menu-header .sub-menu{background:var(--pc-nav)}
#navi .navi-in>ul>li>a{color:#fff;font-weight:700;letter-spacing:.04em;border-bottom:3px solid transparent}
#navi .navi-in>ul>li>a:hover,#navi .navi-in>ul>li>a:focus,#navi .navi-in>ul>li.current-menu-item>a,#navi .navi-in>ul>li.current-menu-ancestor>a{background:var(--pc-ink);color:#fff;border-bottom-color:var(--pc-lime)}
#navi .navi-in>ul>li>a:focus-visible{outline-color:var(--pc-lime)}
#navi .sub-menu a{color:#fff}

/* 全ページ上部の検索・カテゴリ選択 */
.content-top{margin-top:14px}
.widget-content-top .wp-block-search__inside-wrapper{border:2px solid var(--pc-ink);border-radius:6px;background:#fff;overflow:hidden;padding:0}
.widget-content-top .wp-block-search__input{border:0;padding:10px 14px}
.widget-content-top .wp-block-search__button{background:var(--pc-act);color:#fff;border:0;margin:0;padding:0 22px;font-weight:700}
.widget-content-top .wp-block-search__button:hover{background:var(--pc-act-d)}
.widget-content-top .widget-content-top-title{color:var(--pc-text);font-weight:800;font-size:15px;border-left:5px solid var(--pc-act);padding-left:8px}
.widget-content-top select{border:2px solid var(--pc-line);border-radius:6px;background:#fff}

/* ===== トップ（固定ページ 13053 の案内所）。本文は変えず見た目だけ。ページ個別CSSが後から読まれるため詳細度を上げる ===== */
body.home .top-guide-simple .top-guide-hero{position:relative;background:linear-gradient(90deg,var(--pc-ink) 50%,rgba(34,16,76,.6) 62%,rgba(34,16,76,0) 76%),url(https://pc-parts.net/wp-content/uploads/2026/10/pc-hero.jpg) right top/auto 320px no-repeat,var(--pc-ink);border:0;border-radius:10px;padding:46px 42% 38px 40px;overflow:hidden}
body.home .top-guide-simple .top-guide-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--pc-trace)}
body.home .top-guide-simple .top-guide-hero h1{color:#fff!important;font-size:28px;font-weight:800;letter-spacing:.02em}
body.home .top-guide-simple .top-guide-hero h1::after{content:"";display:block;width:90px;height:5px;background:var(--pc-lime);margin-top:14px;border-radius:2px}
body.home .top-guide-simple .top-guide-hero p{color:var(--pc-foot)!important;font-size:15px}
body.home .top-guide-simple h2.top-guide-heading{background:var(--pc-ink)!important;color:#fff!important;border-left:8px solid var(--pc-lime)!important;border-radius:6px!important;position:relative;overflow:hidden;font-size:22px!important}
body.home .top-guide-simple h2.top-guide-heading::after{content:"";position:absolute;right:0;top:0;bottom:0;width:28%;background:repeating-linear-gradient(90deg,rgba(182,240,60,.45) 0 2px,transparent 2px 14px);-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
body.home .top-guide-simple .top-guide-note h2.top-guide-heading{border-left-color:var(--pc-lime)!important}
body.home .top-guide-simple .top-guide-lead{color:var(--pc-muted)!important}
body.home .top-guide-simple .top-guide-box,body.home .top-guide-simple .top-guide-card-full{border:1px solid var(--pc-line);border-top:4px solid var(--pc-ink);border-radius:8px;transition:transform .15s,box-shadow .15s,border-color .15s}
body.home .top-guide-simple .top-guide-box:hover,body.home .top-guide-simple .top-guide-card-full:hover,body.home .top-guide-simple .top-guide-box:focus,body.home .top-guide-simple .top-guide-card-full:focus{transform:translateY(-3px);box-shadow:0 8px 18px rgba(34,16,76,.14);border-top-color:var(--pc-act)}
body.home .top-guide-simple .top-guide-box strong,body.home .top-guide-simple .top-guide-card-full .top-guide-card-title{color:var(--pc-text)!important}
body.home .top-guide-simple .top-guide-box span,body.home .top-guide-simple .top-guide-card-full .top-guide-card-text{color:var(--pc-muted)!important}
body.home .top-guide-simple .top-guide-card-bg{border-radius:8px}
body.home .top-guide-simple .top-guide-tags a{background:var(--pc-chip);border:1px solid var(--pc-line);color:var(--pc-act)!important;font-weight:700}
body.home .top-guide-simple .top-guide-tags a:hover{background:var(--pc-act);border-color:var(--pc-act);color:#fff!important}
body.home .top-guide-simple .top-guide-note{background:#fff;border:1px solid var(--pc-line);border-left:6px solid var(--pc-act)}
body.home .top-guide-simple .top-guide-note p{color:var(--pc-text)!important}

/* ===== 一覧（横長カード）。自動広告の枠には当てない（広告の数・位置は変えない） ===== */
.archive-title{text-align:left;background:var(--pc-ink)!important;color:#fff!important;border:0!important;border-left:10px solid var(--pc-lime)!important;border-radius:4px;padding:.7em 1em;font-size:1.4em}
.archive-title span,.archive-title .fa{color:#fff!important}
#list .entry-card-wrap{background:#fff;border:1px solid var(--pc-line);border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(34,16,76,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
#list .entry-card-wrap:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(34,16,76,.12);border-color:var(--pc-act)}
.entry-card-title{font-weight:700;color:var(--pc-text);line-height:1.5}
.entry-card-snippet{color:var(--pc-muted)}
.cat-label{background:var(--pc-ink)!important;color:#fff!important;font-weight:700;border:0}

/* ===== 記事（投稿）の見出し・目次。カテゴリ説明の手作りハブなど独自部品には当てない（直下の子だけ） ===== */
.single .article .entry-title{text-align:left;color:var(--pc-text);font-weight:800;line-height:1.5;border-bottom:4px solid var(--pc-ink);padding-bottom:.4em;position:relative}
.single .article .entry-title::after{content:"";position:absolute;left:0;bottom:-4px;width:90px;height:4px;background:var(--pc-act)}
.single .article .entry-content>h2{text-align:left;background:var(--pc-ink)!important;color:#fff!important;border:0!important;border-left:8px solid var(--pc-lime)!important;border-radius:4px;padding:.65em 1em;font-size:1.28em}
.single .article .entry-content>h3{background:#fff!important;color:var(--pc-text)!important;border:0!important;border-left:6px solid var(--pc-act)!important;border-bottom:1px solid var(--pc-line)!important;padding:.45em .8em}
.single .article .entry-content>h4{background:none!important;border:0!important;border-left:4px solid var(--pc-line)!important;padding:.1em .7em;color:var(--pc-text)}
.single .article .entry-content>.toc{background:#fff;border:1px solid var(--pc-line);border-top:6px solid var(--pc-ink);border-radius:6px}
.single .article .entry-content>.toc .toc-title{color:var(--pc-text);font-weight:800}
.pr-label-l{border-color:var(--pc-line);color:var(--pc-muted)}
/* 固定ページ（運営者情報など）の見出し */
.page:not(.home) .article .entry-content>h2{background:none!important;color:var(--pc-text)!important;border:0!important;border-left:6px solid var(--pc-act)!important;border-bottom:1px solid var(--pc-line)!important;border-radius:0;padding:.4em .8em}

/* ===== フッター ===== */
#footer{background:var(--pc-ink)}
#footer::before{content:"";display:block;height:10px;background:var(--pc-trace);opacity:.9}
#footer,#footer a,#footer .copyright{color:var(--pc-foot)}
#footer a:hover,#footer a:focus{color:#fff;text-decoration:underline}
.logo-footer img{max-height:48px;width:auto}
.navi-footer-in>.menu-footer li{border-color:rgba(206,200,232,.35)}

/* ===== レスポンシブ ===== */
@media screen and (max-width:834px){
 .menu-mobile{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
 .menu-mobile>li{flex:0 0 auto}
 body.home .top-guide-simple .top-guide-hero{background:linear-gradient(180deg,rgba(34,16,76,0) 0,rgba(34,16,76,.4) 90px,var(--pc-ink) 150px),url(https://pc-parts.net/wp-content/uploads/2026/10/pc-hero-sp.jpg) right top/auto 170px no-repeat,var(--pc-ink);padding:150px 18px 22px}
 body.home .top-guide-simple .top-guide-hero h1{font-size:22px}
 body.home .top-guide-simple .top-guide-hero p{font-size:14px}
 body.home .top-guide-simple h2.top-guide-heading{font-size:19px!important}
 .logo-header img{max-height:44px}
}
@media (prefers-reduced-motion:reduce){#list .entry-card-wrap,body.home .top-guide-simple .top-guide-box,body.home .top-guide-simple .top-guide-card-full{transition:none}#list .entry-card-wrap:hover,body.home .top-guide-simple .top-guide-box:hover,body.home .top-guide-simple .top-guide-card-full:hover{transform:none}}
/* ===== PCLINE design (END) ===== */