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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ============================================
   COLOR VARIABLES
============================================ */
:root {
    --red-primary: #C8180A;
    --red-dark:    #a81208;
    --text-dark:   #1a1a1a;
    --text-muted:  #999;
    --border:      #e8e8e8;
    --bg-light:    #f8f7f5;
}

/* HEADER */
#header,
.header-container,
.header-container-in {
    background-color: var(--red-dark) !important;
    border-bottom: none !important;
}
#site-title a, #site-title, #site-description { color: #fff !important; }

/* GLOBAL NAVIGATION */
#navi, .navi-in {
    background-color: var(--red-dark) !important;
    border-bottom: none !important;
    border-top: none !important;
}
#navi .menu-item a, #navi .menu-item > a {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    padding: 12px 18px !important;
}
#navi .menu-item a:hover,
#navi .menu-item.current-menu-item > a {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}

/* PC: メニューボタン（ハンバーガー）を非表示 */
@media screen and (min-width: 835px) {
    .navi-menu-button,
    .menu-button,
    #menu-button {
        display: none !important;
    }
}

/* モバイル: ハンバーガーメニュー対応 */
@media screen and (max-width: 834px) {
    /* PCナビを非表示にしてハンバーガーボタンを表示 */
    #navi-in > .menu-header-container,
    #navi-in > #menu-header,
    #navi-in .menu-header {
        display: none !important;
    }

    /* ハンバーガーボタンを赤ヘッダーの右上に配置 */
    .navi-menu-button,
    .menu-button {
        display: flex !important;
        position: absolute !important;
        top: 12px !important;
        right: 16px !important;
        z-index: 100 !important;
        background: transparent !important;
        color: #fff !important;
        border: none !important;
    }

    .navi-menu-button-icon::before,
    .menu-icon::before {
        color: #fff !important;
    }

    .navi-menu-button-text {
        color: #fff !important;
        font-size: 11px !important;
    }

    /* ハンバーガーメニューを開いた時の背景 */
    .menu-drawer,
    #menu-drawer {
        background: #1a1a1a !important;
    }

    .menu-drawer a,
    #menu-drawer a {
        color: rgba(255,255,255,0.85) !important;
        border-bottom: 0.5px solid rgba(255,255,255,0.1) !important;
    }

    .menu-drawer a:hover {
        background: rgba(255,255,255,0.05) !important;
        color: #fff !important;
    }
}

/* LINKS */
a { color: var(--red-primary); }
a:hover { color: var(--red-dark); }

.cat-label, .cat-label-1, .cat-label-2, .cat-label-3, .cat-label-4, .cat-label-5 {
    background-color: var(--red-primary) !important;
    border-color: var(--red-primary) !important;
    color: #fff !important;
}

/* CATEGORY BAR（赤い帯のナビ） */
#sw-catbar {
    background: var(--red-dark) !important;
    padding: 0 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sw-catbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.sw-catbar-inner::-webkit-scrollbar { display: none; }
.sw-catbar-list {
    display: flex;
    gap: 0;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sw-catbar-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sw-catbar-list li a {
    display: block;
    padding: 11px 18px;
    font-size: 12px;
    color: rgba(255,255,255,0.7) !important;
    white-space: nowrap;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.sw-catbar-list li a:hover,
.sw-catbar-list li.current-menu-item a {
    color: #fff !important;
    border-bottom: 2px solid #fff;
}

/* HERO */
#sw-hero { background: #fff; }
#sw-hero-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 300px;
}
.sw-hero-main {
    position: relative; height: 380px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.sw-hero-main img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.sw-hero-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; height: 75%;
    background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
}
.sw-hero-content { position: relative; z-index: 2; padding: 24px; }
.sw-hero-cat {
    display: inline-block; background: var(--red-primary); color: #fff;
    font-size: 10px; letter-spacing: .1em; padding: 3px 8px;
    margin-bottom: 10px; font-weight: 500;
}
.sw-hero-title {
    font-size: 19px; font-weight: 500; color: #fff;
    line-height: 1.65; margin-bottom: 10px;
}
.sw-hero-title a { color: #fff !important; text-decoration: none; }
.sw-hero-date { font-size: 12px; color: rgba(255,255,255,0.5); }

.sw-hero-sub {
    background: #fff; display: flex; flex-direction: column;
    border-left: 0.5px solid #e0e0e0;
}
.sw-hero-sub-item {
    display: flex; gap: 12px; padding: 14px 16px;
    border-bottom: 0.5px solid #f0f0f0; align-items: flex-start;
    text-decoration: none;
}
.sw-hero-sub-item:last-child { border-bottom: none; }
.sw-hero-sub-thumb {
    width: 76px; height: 58px; background: #e0e0e0;
    flex-shrink: 0; border-radius: 3px; overflow: hidden;
}
.sw-hero-sub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sw-hero-sub-cat {
    font-size: 10px; color: var(--red-primary);
    margin-bottom: 4px; letter-spacing: .08em; font-weight: 500;
}
.sw-hero-sub-title { font-size: 12px; color: var(--text-dark); line-height: 1.55; }
.sw-hero-sub-date { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* TICKER */
#sw-ticker { background: #fff; border-bottom: 0.5px solid var(--border); padding: 0 24px; }
.sw-ticker-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; height: 38px; gap: 16px;
}
.sw-ticker-label {
    background: var(--red-primary); color: #fff;
    font-size: 10px; letter-spacing: .1em; padding: 3px 10px;
    white-space: nowrap; font-weight: 500;
}
.sw-ticker-text {
    font-size: 13px; color: #444;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* SECTION HEADING */
.sw-section-head {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 22px;
}
.sw-section-title {
    font-size: 16px; font-weight: 500; color: var(--text-dark);
    padding-left: 12px; border-left: 3px solid var(--red-primary); border-radius: 0;
}
.sw-see-all { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.sw-see-all:hover { color: var(--red-primary); }

/* CARD GRID */
#sw-new-posts { padding: 36px 24px; background: #fff; }
.sw-cards-inner { max-width: 1100px; margin: 0 auto; }
.sw-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.sw-card {
    border: 0.5px solid var(--border); border-radius: 4px;
    overflow: hidden; background: #fff; transition: box-shadow .15s;
}
.sw-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.sw-card-thumb { height: 140px; overflow: hidden; background: #e0e4e0; }
.sw-card-thumb img {
    width: 100%; height: 100%; object-fit: cover; transition: transform .2s;
}
.sw-card:hover .sw-card-thumb img { transform: scale(1.03); }
.sw-card-body { padding: 14px; }
.sw-card-cat {
    font-size: 10px; font-weight: 500; letter-spacing: .1em;
    color: var(--red-primary); margin-bottom: 6px;
}
.sw-card-title { font-size: 13px; font-weight: 500; line-height: 1.6; margin-bottom: 6px; }
.sw-card-title a { color: var(--text-dark); text-decoration: none; }
.sw-card-title a:hover { color: var(--red-primary); }
.sw-card-date { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* RANKING */
#sw-ranking { background: var(--bg-light); padding: 36px 24px; border-top: 0.5px solid #eee; }
.sw-ranking-inner { max-width: 1100px; margin: 0 auto; }
.sw-rank-list { display: flex; flex-direction: column; }
.sw-rank-item {
    display: flex; gap: 16px; padding: 15px 0;
    border-bottom: 0.5px solid #eee; align-items: center; text-decoration: none;
}
.sw-rank-item:last-child { border-bottom: none; }
.sw-rank-num { font-size: 20px; font-weight: 500; color: #ddd; min-width: 30px; flex-shrink: 0; }
.sw-rank-num.top { color: var(--red-primary); }
.sw-rank-info { flex: 1; }
.sw-rank-cat { font-size: 10px; color: var(--red-primary); margin-bottom: 3px; letter-spacing: .08em; }
.sw-rank-title { font-size: 13px; font-weight: 500; color: var(--text-dark); line-height: 1.55; }
.sw-rank-date { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.sw-rank-thumb {
    width: 80px; height: 60px; background: #ddd;
    border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.sw-rank-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* WIDGET TITLES */
.widget-title, .sidebar h3, .widget h2 {
    border-left: 3px solid var(--red-primary) !important;
    border-radius: 0 !important; padding-left: 10px !important;
    font-size: 15px !important; background: none !important;
    color: var(--text-dark) !important;
}

/* フルワイドレイアウト（Cocoonラッパー修正） */
body.home #main,
body.home #content-in,
body.home .content-in,
body.home #container,
body.home #wrap,
body.home .wrap,
body.home #body-in,
body.home .body-in {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.home #main {
    background: #fff !important;
}

/* 最外側の余白を白に */
body.home,
body.home #body,
body.home #body-in {
    background: #fff !important;
}

/* ヘッダーとカテゴリーバーの隙間を消す */
body.home #header,
body.home .header-container,
body.home .header-container-in {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 各セクションの上下余白を整える */
body.home #sw-hero,
body.home #sw-ticker,
body.home #sw-new-posts,
body.home #sw-ranking {
    margin: 0 !important;
}

/* ヒーロー直下の余白を詰める */
body.home #sw-hero {
    padding-bottom: 0 !important;
}

/* TICKER（NEWバー）の上下余白 */
body.home #sw-ticker {
    padding: 0 24px !important;
}

/* 新着記事セクションの上下余白を詰める */
body.home #sw-new-posts {
    padding: 28px 24px !important;
}

/* ランキングセクションの上下余白を詰める */
body.home #sw-ranking {
    padding: 28px 24px !important;
}

/* メインコンテンツとフッター間の余白 */
body.home #main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* FOOTER */
#footer, .footer-container {
    background-color: var(--text-dark) !important;
    color: rgba(255,255,255,0.5) !important;
}
#footer a, .footer-container a { color: rgba(255,255,255,0.45) !important; }
#footer a:hover { color: rgba(255,255,255,0.8) !important; }

/* ============================================
   SINGLE POST（記事ページ）のデザイン
============================================ */

/* 記事ページもフルワイドに */
body.single #main,
body.single #content-in,
body.single .content-in,
body.single #container,
body.single #wrap,
body.single .wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.single,
body.single #body,
body.single #body-in {
    background: #fff !important;
}

body.single #main {
    background: #fff !important;
    padding-bottom: 60px !important;
}

/* 記事タイトル＋アイキャッチエリア */
body.single article,
body.single article.post,
body.single .article,
body.single .main-content,
body.single main {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 40px 24px 0 !important;
    float: none !important;
    box-sizing: border-box;
}

body.single #main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* タイトル */
body.single .entry-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: var(--text-dark) !important;
    margin: 16px 0 20px !important;
    padding: 0 !important;
    border: none !important;
}

/* タイトル前のカテゴリー */
body.single .entry-categories-tags {
    margin-bottom: 8px !important;
}
body.single .entry-categories-tags .cat-link,
body.single .entry-categories-tags a {
    display: inline-block;
    background: var(--red-primary) !important;
    color: #fff !important;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    padding: 4px 12px !important;
    border-radius: 0 !important;
    text-decoration: none;
    font-weight: 500;
}

/* 投稿日 */
body.single .date-tags {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
body.single .post-date,
body.single .post-update {
    color: var(--text-muted) !important;
}

/* アイキャッチ画像 */
body.single .eye-catch {
    margin: 0 -24px 32px !important;
    max-width: none !important;
}
body.single .eye-catch img {
    width: 100%;
    height: auto;
    border-radius: 0;
}
body.single .eye-catch-label {
    display: none !important;
}

/* 本文 */
body.single .entry-content {
    font-size: 16px;
    line-height: 1.95;
    color: #2a2a2a;
}

body.single .entry-content > p {
    margin: 0 0 1.5em !important;
}

/* 本文中の画像 */
body.single .entry-content img {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;
}

/* 見出し h2 */
body.single .entry-content h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 48px 0 20px !important;
    padding: 0 0 0 16px !important;
    border-left: 4px solid var(--red-primary) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    background: none !important;
    color: var(--text-dark) !important;
}

/* 見出し h3 */
body.single .entry-content h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 36px 0 16px !important;
    padding: 0 0 8px !important;
    border: none !important;
    border-bottom: 2px solid var(--red-primary) !important;
    background: none !important;
    color: var(--text-dark) !important;
    display: inline-block !important;
}

/* 見出し h4 */
body.single .entry-content h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 28px 0 12px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--text-dark) !important;
}

/* リンク */
body.single .entry-content a {
    color: var(--red-primary);
    text-decoration: underline;
}
body.single .entry-content a:hover {
    color: var(--red-dark);
}

/* シェアボタンエリア */
body.single .sns-share,
body.single .sns-follow {
    max-width: 760px;
    margin: 32px auto;
    padding: 0 24px;
}

body.single .sns-share-buttons,
body.single .sns-follow-buttons {
    gap: 6px;
}

/* 関連記事 */
body.single .related-entries,
body.single .under-entry-content {
    max-width: 760px;
    margin: 60px auto 0;
    padding: 0 24px;
}

body.single .related-entry-heading {
    font-size: 20px !important;
    font-weight: 700;
    color: var(--text-dark);
    padding-left: 12px;
    border-left: 3px solid var(--red-primary);
    margin-bottom: 24px !important;
    background: none !important;
}

body.single .related-entry-card-wrap,
body.single .related-entries-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.single .related-entry-card,
body.single .related-entry-card-link {
    display: block !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #fff !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.single .related-entry-card-thumb,
body.single .related-entry-card-figure {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single .related-entry-card-thumb img,
body.single .related-entry-card-figure img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    display: block !important;
}

body.single .related-entry-card-content {
    padding: 10px 12px !important;
}

body.single .related-entry-card-title,
body.single .related-entry-card-snippet {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: var(--text-dark) !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
    display: block !important;
}

body.single .related-entry-card-snippet {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-weight: normal !important;
}

/* コメントエリア */
body.single .comments-area,
body.single #comments {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 24px;
}

body.single .comments-title,
body.single #reply-title {
    font-size: 18px !important;
    font-weight: 700;
    padding-left: 12px;
    border-left: 3px solid var(--red-primary);
    margin-bottom: 16px;
}

/* 著者情報 */
body.single .author-box {
    max-width: 760px;
    margin: 32px auto;
    padding: 20px 24px;
    background: var(--bg-light);
    border: none !important;
    border-radius: 4px;
}

/* パンくず */
body.single .breadcrumb {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 24px 0;
    font-size: 12px;
    color: var(--text-muted);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
    #sw-hero-inner { grid-template-columns: 1fr 260px; }
}

/*834px以下*/
@media screen and (max-width: 834px){
    #sw-hero-inner { grid-template-columns: 1fr; }
    .sw-hero-main { height: 260px; }
    .sw-hero-sub { border-left: none; border-top: 0.5px solid #e0e0e0; }
    .sw-cards-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
    #sw-new-posts, #sw-ranking { padding: 24px 16px; }
    #sw-ticker { padding: 0 16px; }
}

/*480px以下*/
@media screen and (max-width: 480px){
    .sw-hero-main { height: 220px; }
    .sw-hero-title { font-size: 16px; }
    .sw-cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sw-rank-thumb { display: none; }
}