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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*
 * Theme-wide styles for the Cocoon child theme.
 *
 * Put this file's contents in the child theme style.css.
 * It contains global layout, dark mode, header, cards, badges, breadcrumbs,
 * and music credits styles. YouTube system-specific styles are separated into
 * idm-youtube.css.
 */

body, 
#container, 
#main, 
#sidebar, 
.article,
.navi,
.navi-in {
    background-color: #161616 !important; 
    color: #e0e0e0 !important;           
}


footer,
.footer-container{
    background-color: #161616 !important; 
    color: #e0e0e0 !important;           
}

header,
.header-container {
    background: #1b1b1b !important;
}

.article {
    background: #1b1b1b !important;
    padding: 30px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02);
}

.entry-content p, 
.entry-content li,
.entry-title,
.article h1, .article h2, .article h3, .article h4 {
    color: #ffffff !important;
}

a,
.navi-in a {
    color: #b8b8b8 !important;
    text-decoration: none;
}
a:hover,
.navi-in a:hover {
    color: #ffffff !important;
}

.entry-card-wrap {
    background-color: #1d1d1d !important; 
    border: none !important;              
    box-shadow: none !important;          
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.entry-card-wrap:hover {
    background-color: #242424 !important; 
    transform: translateY(-2px);          
    opacity: 1 !important;                 
}

.entry-card-title,
.entry-card-snippet {
    color: #ffffff !important;
}

.sidebar, 
.widget, 
.widget_text,
.widget-title,
.sidebar-box {
    background-color: #1d1d1d !important; 
    color: #e0e0e0 !important;
    border: none !important;              
    box-shadow: none !important;          
    border-radius: 4px;
}

.widget a, 
.sidebar a {
    color: #b8b8b8 !important;
    border-bottom: 1px solid #282828; 
    display: block;
    padding: 8px 10px;
}
.widget a:hover {
    color: #ffffff !important;
    background-color: #242424;
}

.footer-bottom,
.footer-bottom-in {
    background-color: #111111 !important; 
    color: #888888 !important;
}

hr, 
.entry-content hr,
#main, 
#sidebar, 
.article,
header,
footer,
.navi {
    border: none !important;
}

.custom-meta-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px; 
    margin: 12px 0;
}

.meta-break {
    flex-basis: 100%;
    height: 0;
}

.meta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; 
    align-items: center;
}

.meta-badge {
    font-size: 11.5px; 
    padding: 3px 10px; 
    border-radius: 3px; 
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.4;
    transition: 0.2s;
    border: 1px solid transparent;
    display: inline-block;
}

.artist-badge {
    color: #f0f0f0;
    border-color: #7a7a7a;
}

.artist-badge {
    background: rgba(255,255,255,.08);
}
.artist-badge {
    font-size: 10px;
    padding: 2px 8px;
}
.artist-badge {
    border-radius: 999px;
}

.category-badge {
    background: #6b5338; 
    color: #f8f5f0 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.15);
}

.category-badge:hover {
    background: #6b5338;
    filter: brightness(1.32);
}

.tag-badge,
.year-badge,
.country-badge {
    background: #756b5e; 
    color: #f8f5f0 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.15);
}

.tag-badge:hover,
.year-badge:hover,
.country-badge:hover {
    background: #756b5e;
    filter: brightness(1.32);
}

#breadcrumb.breadcrumb {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.breadcrumbs-date {
    margin-left: auto; 
    font-size: 1em !important; 
    color: #888888;
}

.breadcrumbs-date .date-tags,
.breadcrumbs-date .post-date,
.breadcrumbs-date .post-update {
    display: inline-flex !important;
    align-items: center;
    margin: 0 0 0 14px !important; 
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 1em !important; 
    color: #888888 !important; 
}

.breadcrumbs-date .fa {
    margin-right: 5px;
    font-size: 1em !important;
    color: #666666 !important;
}

.music-credits-block {
    background-color: #262626; 
    border-left: none !important; 
    padding: 20px; 
    margin: 25px 0;
    border-radius: 6px; 
    font-size: 16px;
    line-height: 1.4; 
    color: #b3b3b3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.music-credits-block .credit-row {
    margin: 0 0 3px 0 !important; 
    padding: 0 !important;
}

.music-credits-block .credit-row:last-child {
    margin-bottom: 0 !important;
}

.music-credits-block .credit-title-row {
    font-weight: bold;
    font-size: 16px; 
    border-bottom: 1px solid #3d3d3d; 
    padding-bottom: 6px; 
    margin-bottom: 10px !important; 
    color: #ffffff; 
}

.music-credits-block .credit-indent-row {
    padding-left: 2em !important;
}

.music-credits-block .credit-space {
    height: 0.6em; 
    margin: 0 !important;
    padding: 0 !important;
}

.music-credits-block a {
    color: #4da6ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.music-credits-block a:hover {
    color: #80bfff;
    text-decoration: underline;
}

#header-container, #header, .header, .header-container, .navi-header {
    display: none !important;
}

.custom-minimal-global-header {
    width: 100% !important;
    max-width: 100% !important;
    height: 74px !important;              
    background-color: #161616 !important; 
    padding: 0 40px !important;          
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;       
    justify-content: space-between !important; 
}

.custom-logo-left a {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #ffffff !important;            
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    transition: .2s;
}
.custom-logo-left a:hover {
    opacity: .8 !important;
}

.site-nav {
    margin-left: auto !important;         
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.site-nav > a {
    text-decoration: none !important;
    color: #e0e0e0 !important;           
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .08em !important;
    transition: .2s !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.site-nav > a:hover {
    opacity: .6 !important;
    background: transparent !important;
}

.lang-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.lang-switcher a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    color: #888 !important;               
    background: transparent !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: .2s !important;
}

.lang-switcher a.current,
.custom-menu-zone .lang-switcher a.current {
    background: #b89c62 !important; 
    color: #161616 !important;     
}

.lang-switcher a:hover {
    opacity: .8 !important;
    background: transparent !important;
}

.custom-logo-left a {
    display: inline-block !important; 
    transition: transform 0.3s ease, opacity 0.3s ease !important; 
}

.custom-logo-left a:hover {
    opacity: 1 !important; 
    
    
    transform: rotate(-1deg) translateY(-2px) !important; 
}

.entry-card-thumb .cat-label {
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    border: none !important;        
    border-radius: 0 !important;    
    box-shadow: none !important;
}

.entry-card-thumb .cat-label {
    background-color: rgba(0, 0, 0, 0.75) !important; 
    color: #ffffff !important;        
    font-size: 11px !important;       
    font-weight: 600 !important;      
    letter-spacing: 0.03em !important; 
    
    
    padding: 5px 10px !important;
    line-height: 1.2 !important;
}

.breadcrumbs,
#breadcrumbs,
.breadcrumb,
#breadcrumb,
.v-breadcrumbs,
div[class*="breadcrumb"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

.lang-switcher a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;          
    width: auto !important;           
    height: 26px !important;
    padding: 0 12px !important;       
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    color: #888 !important;
    background: transparent !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: .2s !important;
}

@media screen and (max-width: 768px) {
    
    .custom-minimal-global-header {
        height: auto !important;
        padding: 15px 20px !important; 
        flex-direction: column !important; 
        justify-content: center !important;
        gap: 12px !important; 
    }

    
    .custom-logo-left {
        text-align: center !important;
        width: 100% !important;
    }
    .custom-logo-left a {
        display: block !important;
        word-break: break-word !important; 
        line-height: 1.3 !important;
    }
    .custom-logo-left a span {
        display: inline-block !important; 
        margin-left: 4px !important;
        margin-top: 2px !important;
    }

    
    .site-nav {
        margin-left: 0 !important; 
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important; 
    }
}



.wp-block-embed-youtube {
    margin-top: 0px  !important;
}





.idm-title-top-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: #777777;
    font-size: 11.5px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.idm-title-top-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.idm-title-top-label {
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 600;
}

.idm-title-top-value {
    color: #999999;
    font-weight: 500;
}

.idm-title-top-separator {
    color: #555555;
    margin: 0 2px;
}




/* =========================================================
   Song Credits
========================================================= */

.idm-credits-dark-box {
    background-color: #1e1e1e;
    color: #b3b3b3;
    padding: 22px 24px;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    margin: 25px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.idm-track-title-row {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333333;
    margin-bottom: 15px;
}

.idm-release-date-line {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 400;
    color: #aaaaaa;
}

.idm-release-left {
    min-width: 0;
}

.idm-credit-line {
    margin-bottom: 4px;
}

.idm-label {
    color: #888888;
}

.idm-indent-line {
    padding-left: 20px;
    font-size: 13.5px;
    color: #aaaaaa;
    margin-bottom: 4px;
}

a.idm-subtle-link {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    box-shadow: none !important;
    cursor: pointer;
}

a.idm-subtle-link:hover {
    color: #ffffff !important;
    border-bottom-color: #666666;
}

.idm-credit-jp {
    display: none;
}

.idm-credits-dark-box.is-original .idm-credit-en {
    display: none;
}

.idm-credits-dark-box.is-original .idm-credit-jp {
    display: inline;
}

.idm-original-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #777777;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.idm-switch {
    position: relative;
    width: 34px;
    height: 18px;
    flex: 0 0 auto;
}

.idm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.idm-slider {
    position: absolute;
    inset: 0;
    background: #444444;
    border-radius: 18px;
    transition: .2s;
}

.idm-slider:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: #bbbbbb;
    border-radius: 50%;
    transition: .2s;
}

.idm-switch input:checked + .idm-slider {
    background: #666666;
}

.idm-switch input:checked + .idm-slider:before {
    transform: translateX(16px);
}


.idm-credit-section-gap {
    height: 0.5em;
}


.idm-video-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 14px;
  font-size: 11.5px;
  line-height: 1.4;
}

.idm-english-cc-badge {
  display: inline-flex;
  align-items: center;
  color: #888888;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}







.idm-analytics-section {
  margin-top: 28px;
}

.idm-analytics-heading {
  color: #777777;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.idm-analytics-accordion {
  border-top: 1px solid #2a2a2a;
  background: transparent;
  margin: 0;
  padding: 0;
}

.idm-analytics-accordion:last-child {
  border-bottom: 1px solid #2a2a2a;
}

.idm-analytics-summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 0;
  color: #dddddd;
  font-size: 13px;
  font-weight: 700;
  user-select: none;
}

.idm-analytics-summary::-webkit-details-marker {
  display: none;
}

.idm-accordion-icon::before {
  content: "+";
  display: inline-block;
  width: 16px;
  color: #777777;
  font-weight: 700;
}

.idm-analytics-accordion[open] .idm-accordion-icon::before {
  content: "−";
}

.idm-analytics-content {
  padding: 4px 0 18px;
}

.yt-history-accordion > div {
  padding: 0 !important;
  background: transparent !important;
}

.yt-history-accordion table,
.yt-history-table {
  background: transparent !important;
}

.yt-history-table th,
.yt-history-table td {
  background: transparent !important;
  border-color: #262626 !important;
}

.yt-history-table th {
  color: #777777 !important;
}




/* Historical Tracking: clean table */

.yt-history-accordion .yt-history-table {
  background: transparent !important;
  border: none !important;
}

.yt-history-accordion .yt-history-table th,
.yt-history-accordion .yt-history-table td {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #2a2a2a !important;
}

.yt-history-accordion .yt-history-table th {
  color: #777777 !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.yt-history-accordion .yt-history-table tr {
  background: transparent !important;
}

.yt-history-accordion .yt-history-table tr:last-child td {
  border-bottom: none !important;
}

.yt-history-accordion > div,
.yt-history-accordion > div > div {
  background: transparent !important;
  border: none !important;
}




.yt-history-table th,
.yt-history-table td {

    background: transparent !important;

    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.yt-history-table th {

    background: transparent !important;
    color: #666666 !important;
}

@media (max-width: 768px) {

    .yt-history-table th,
    .yt-history-table td {

        font-size: 11px !important;
        padding: 6px 5px !important;
    }
}






.yt-date-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.yt-init-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 16px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    color: #70a1ff;
    background: rgba(112, 161, 255, 0.12);
    border: 1px solid rgba(112, 161, 255, 0.25);
    border-radius: 3px;
    box-sizing: border-box;
}

.yt-init-badge.is-empty {
    visibility: hidden;
}


.yt-history-scroll {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}

.yt-history-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.yt-history-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.yt-history-scroll::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 999px;
}

.yt-history-scroll::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}






.idm-home-tagline {
    text-align: center;
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    margin: 0 0 30px;
    padding: 10px 20px;
    letter-spacing: 0.02em;
}




/* Dark mode hover fix for sidebar widgets and article navigation */
.sidebar a:hover,
.related-entry-card-wrap:hover,
.prev-post a:hover,
.next-post a:hover,
.navi-entry-card:hover,
.widget a:hover {
  background-color: #222 !important;
  color: #fff !important;
}

/* Prev / Next navigation hover fix */
.pager-post-navi a:hover,
.pager-links a:hover,
.related-entry-card-wrap a:hover,
.navi-entry-card-link:hover {
    background-color: #222 !important;
    color: #fff !important;
}



.pagination-next a,
.pagination .page-numbers {
  background: #161616;
  color: #ddd;
}

.pagination-next a:hover,
.pagination .page-numbers:hover {
  background: #181818;
  color: #fff;
}

.pagination .page-numbers.current {
  background: #f5f5f5;
  color: #111;
}




.archive-title .fa,
.archive-title .fas,
.archive-title .far {
    display: none;
}





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

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

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