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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
<style>
/* ▼▼▼ ここからデザインの定義（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） ▲▲▲ */

/* ===== CARLINE design 2026-10-08 (BEGIN) ===== */
/* 色は仕様書（カーアイテムコム_デザイン刷新_SEO_20261008.md）の表と同じ。変更はここの変数だけで行う */
:root{--cl-pit:#121A23;--cl-pit2:#1E2A36;--cl-red:#C8102E;--cl-red-d:#A30D25;--cl-gauge:#3FC1D0;--cl-bg:#F3F5F7;--cl-card:#fff;--cl-text:#1B232C;--cl-muted:#4F5B67;--cl-line:#D5DCE3;--cl-soft:#C9D3DD;--cl-link:#0B5CAD;
--cl-ticks:repeating-linear-gradient(90deg,var(--cl-gauge) 0 1px,transparent 1px 14px)}
body{background:var(--cl-bg);color:var(--cl-text)}
a{color:var(--cl-link)}
/* ヘッダー：上端の目盛り帯（モチーフ）・ロゴ */
#header-container{background:var(--cl-pit)}
#header-container::before{content:"";display:block;height:8px;background:var(--cl-ticks),var(--cl-pit);opacity:.9}
.header-container .tagline{color:var(--cl-soft);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(--cl-pit2)}
#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{background:var(--cl-pit);color:#fff;border-bottom-color:var(--cl-red)}
#navi .sub-menu a{color:#fff}
/* 全ページ上部のカテゴリ選択・検索 */
.content-top{margin-top:14px}
.widget-content-top .wp-block-search__inside-wrapper{border:2px solid var(--cl-pit);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(--cl-red);color:#fff;border:0;margin:0;padding:0 22px;font-weight:700}
.widget-content-top .widget-content-top-title{color:var(--cl-text);font-weight:800;font-size:15px;border-left:5px solid var(--cl-red);padding-left:8px}
.widget-content-top select{border:2px solid var(--cl-line);border-radius:6px;background:#fff}

/* ===== トップ（固定ページ 22839 の案内所）。本文は変えず見た目だけ ===== */
body.home .top-guide-simple .top-guide-hero{position:relative;background:linear-gradient(90deg,var(--cl-pit) 38%,rgba(18,26,35,.82) 58%,rgba(18,26,35,.2) 100%),url(/wp-content/uploads/2026/10/carline-hero.jpg) right center/cover no-repeat,var(--cl-pit);border:0;border-radius:10px;padding:44px 40px 36px;overflow:hidden}
body.home .top-guide-simple .top-guide-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--cl-ticks)}
body.home .top-guide-simple .top-guide-hero h1{color:#fff!important;font-size:30px;font-weight:800;max-width:640px;letter-spacing:.02em}
body.home .top-guide-simple .top-guide-hero h1::after{content:"";display:block;width:90px;height:5px;background:var(--cl-red);margin-top:14px;border-radius:2px}
body.home .top-guide-simple .top-guide-hero p{color:var(--cl-soft)!important;max-width:640px;font-size:15px}
body.home .top-guide-simple h2.top-guide-heading{background:var(--cl-pit)!important;border-left:8px solid var(--cl-red)!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:30%;background:repeating-linear-gradient(90deg,rgba(63,193,208,.55) 0 2px,transparent 2px 12px);-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
body.home .top-guide-simple .top-guide-lead{color:var(--cl-muted)!important}
body.home .top-guide-simple .top-guide-card,body.home .top-guide-simple .top-guide-box{border:1px solid var(--cl-line);border-top:4px solid var(--cl-pit);border-radius:8px;transition:transform .15s,box-shadow .15s,border-color .15s}
body.home .top-guide-simple .top-guide-card:hover,body.home .top-guide-simple .top-guide-box:hover,body.home .top-guide-simple .top-guide-card:focus,body.home .top-guide-simple .top-guide-box:focus{transform:translateY(-3px);box-shadow:0 8px 18px rgba(18,26,35,.14);border-color:var(--cl-line);border-top-color:var(--cl-red)}
body.home .top-guide-simple .top-guide-card-title,body.home .top-guide-simple .top-guide-box strong{color:var(--cl-text)!important}
body.home .top-guide-simple .top-guide-card-text,body.home .top-guide-simple .top-guide-box span{color:var(--cl-muted)!important}
body.home .top-guide-simple .top-guide-tags a{border:1px solid var(--cl-line);color:var(--cl-link)!important;font-weight:700}
body.home .top-guide-simple .top-guide-tags a:hover{border-color:var(--cl-red);background:#fff!important}
body.home .top-guide-simple .top-guide-note{background:#fff;border:1px solid var(--cl-line);border-left:6px solid var(--cl-gauge)}
body.home .top-guide-simple .top-guide-note p{color:var(--cl-text)!important}

/* ===== 記事一覧：格子状に固定し、自動広告の挿入で並びが崩れないようにする（広告の数・位置は変えない） ===== */
#list.ect-vertical-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;grid-auto-flow:row dense}
#list.ect-vertical-card>.entry-card-wrap{width:auto;max-width:none;margin:0}
#list.ect-vertical-card>.google-auto-placed,#list.ect-vertical-card>ins.adsbygoogle,#list.ect-vertical-card>.ad-area,#list.ect-vertical-card>div:not(.entry-card-wrap):not(a){grid-column:1/-1;width:100%}
#list.ect-vertical-card>.google-auto-placed:has(ins[data-ad-status="unfilled"]),#list.ect-vertical-card>ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.archive-title{text-align:left;background:var(--cl-pit)!important;color:#fff!important;border:0!important;border-left:10px solid var(--cl-red)!important;border-radius:4px;padding:.7em 1em;font-size:1.4em}
.archive-title span,.archive-title .fa{color:#fff!important}
/* 記事カード */
.entry-card-wrap{background:#fff;border:1px solid var(--cl-line);border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(18,26,35,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.entry-card-wrap:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(18,26,35,.14);border-color:var(--cl-red)}
.entry-card-title{font-weight:700;color:var(--cl-text);line-height:1.5}
.entry-card-snippet{color:var(--cl-muted)}
.cat-label{background:var(--cl-red)!important;color:#fff!important;font-weight:700;border:0}

/* ===== 記事（投稿）の見出し・目次。カテゴリの案内ボックスなど独自部品の見出しには当てない ===== */
.single .article .entry-title{text-align:left;color:var(--cl-text);font-weight:800;line-height:1.5;border-bottom:4px solid var(--cl-pit);padding-bottom:.4em;position:relative}
.single .article .entry-title::after{content:"";position:absolute;left:0;bottom:-4px;width:90px;height:4px;background:var(--cl-red)}
.single .article .entry-content>h2{text-align:left;background:var(--cl-pit)!important;color:#fff!important;border:0!important;border-left:8px solid var(--cl-red)!important;border-radius:4px;padding:.65em 1em;font-size:1.28em}
.single .article .entry-content>h3{background:#fff!important;color:var(--cl-text)!important;border:0!important;border-left:6px solid var(--cl-pit)!important;border-bottom:1px solid var(--cl-line)!important;padding:.45em .8em}
.single .article .entry-content>h4{background:none!important;border:0!important;border-left:4px solid var(--cl-gauge)!important;padding:.1em .7em;color:var(--cl-text)}
.toc{background:#fff;border:1px solid var(--cl-line);border-top:6px solid var(--cl-pit);border-radius:6px}
.toc-title{color:var(--cl-text);font-weight:800}
.pr-label-l{border-color:var(--cl-line);color:var(--cl-muted)}

/* ===== サイドバー・フッター ===== */
.sidebar h2,.sidebar h3{background:none!important;color:var(--cl-text)!important;border:0!important;border-left:6px solid var(--cl-red)!important;border-bottom:1px solid var(--cl-line)!important;padding:.35em .2em .35em .7em;font-weight:800;border-radius:0}
#footer{background:var(--cl-pit)}
#footer::before{content:"";display:block;height:8px;background:var(--cl-ticks);opacity:.9}
#footer,#footer a,#footer .copyright{color:var(--cl-soft)}
#footer a:hover{color:#fff;text-decoration:underline}
.logo-footer img{max-height:48px;width:auto}
.navi-footer-in>.menu-footer li{border-color:rgba(201,211,221,.35)}

/* ===== レスポンシブ ===== */
@media screen and (max-width:1023px){#list.ect-vertical-card{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:834px){
 #list.ect-vertical-card{gap:10px}
 body.home .top-guide-simple .top-guide-hero{background:linear-gradient(180deg,rgba(18,26,35,0) 0,rgba(18,26,35,.35) 110px,var(--cl-pit) 170px),url(/wp-content/uploads/2026/10/carline-hero-sp.jpg) center top/100% auto no-repeat,var(--cl-pit);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}
}
@media screen and (max-width:480px){#list.sp-entry-card-1-column{grid-template-columns:1fr}}
/* ===== CARLINE design (END) ===== */