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

/* Google Fonts: Shippori Mincho */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700;800&display=swap');

/* Google Fonts: Dancing Script */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');

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

/* ヘッダー、h系、タイトルなど特定の要素のみShippori Minchoに変更 */

/* ヘッダー関連 */
#header,
.header,
.header-container,
.header-in,
.site-name,
.site-name-text,
.logo-header,
.logo-footer,
.navi,
.menu-header,
.menu-footer,
.genre-header,
.genre-header-link {
    font-family: 'Shippori Mincho', serif !important;
}

/* 見出しタグ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.article-header h1,
.archive-title,
.list-title,
.browser-title,
.category-title,
.tag-title {
    font-family: 'Shippori Mincho', serif !important;
}

/* 一覧のタイトル */
.entry-card-title,
.card-title,
.post-title,
.list-entry-title,
.related-entry-title,
.widget-title,
.footer-title {
    font-family: 'Shippori Mincho', serif !important;
}

/* ハッシュタグ・タグ関連 */
.tag-link,
.cat-link,
.instagram-tag,
.manga-title-tags,
.manga-title-tags .tag-link,
.genre-tag,
.coupling-tag,
.content-tag,
.other-tag,
.tag-value,
.tag-label,
.manga-tags-title,
.entry-categories-tags,
.entry-tags,
.entry-categories {
    font-family: 'Shippori Mincho', serif !important;
}

/* インスタグラムレイアウトのタイトル */
.instagram-title,
.card-title,
.instagram-card .title {
    font-family: 'Shippori Mincho', serif !important;
}

/* タイトル関連（追加） */
.title,
.page-title,
.single-title,
.archive-title,
.category-title,
.tag-title,
.taxonomy-title,
.search-title {
    font-family: 'Shippori Mincho', serif !important;
}

/* ブラウザ風ラベル・R18テキストなど */
.card-browser-label,
.browser-header-label,
.r18-text,
.r18-label,
[class*="r18"],
[class*="browser-label"] {
    font-family: 'Shippori Mincho', serif !important;
}

/* FontAwesomeのアイコンフォントを除外 */
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
.icon-fontawesome,
[class*="fa-"],
[class^="fa-"] {
    font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'Font Awesome 5 Pro' !important;
}

/* アイキャッチ画像を横100%に */
.eye-catch-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.eye-catch {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.eye-catch-image,
.eye-catch img,
.eye-catch figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* 広告画像を横100%に */
.ad-area img,
.ad-area iframe,
.post-affiliate-ad img,
.affiliate-ad-image,
.affiliate-ad-item img,
.default-affiliate-ad img,
.ad-above-title img,
.ad-below-title img,
.ad-content-top img,
.ad-content-bottom img,
.ad-above-sns-buttons img,
.ad-below-sns-buttons img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 記事内画像を横100%に */
.entry-content img,
.article img,
.entry-content figure img,
.article figure img,
.entry-content [class*="wp-image"] img,
.article [class*="wp-image"] img,
.entry-content [class*="attachment"] img,
.article [class*="attachment"] img,
.entry-content .size-full,
.entry-content .size-large,
.entry-content .size-medium,
.entry-content .size-thumbnail,
.article .size-full,
.article .size-large,
.article .size-medium,
.article .size-thumbnail {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* 記事内のfigure要素も調整 */
.entry-content figure,
.article figure {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ジャンルアーカイブページでヘッダーを非表示 */
body.manga-genre-archive #header-container {
    display: none !important;
}

/* ジャンルアーカイブページでHTMLとbodyの間の隙間を削除 */
html body.manga-genre-archive {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.manga-genre-archive {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ジャンルアーカイブページでヘッダーとコンテンツの間の余白を削除 */
body.manga-genre-archive #container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 通知エリア、アピールエリア、おすすめカード、カルーセルなどの余白を削除 */
body.manga-genre-archive #notice,
body.manga-genre-archive #appeal,
body.manga-genre-archive #recommended-cards,
body.manga-genre-archive #carousel,
body.manga-genre-archive #content-top {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

body.manga-genre-archive #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ジャンル名の上の余白は残す（#mainのmargin-topはそのまま） */

/* ジャンルキービジュアルのマージン・パディングを削除 */
body.manga-genre-archive .manga-genre-key-visual {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.manga-genre-archive .manga-genre-key-visual img {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* キービジュアルの前後の要素のマージン・パディングも削除 */
body.manga-genre-archive #archive-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.manga-genre-archive #main > *:first-child,
body.manga-genre-archive #main .archive-title:first-child,
body.manga-genre-archive #main .manga-genre-key-visual:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* wrapクラスのパディングも削除 */
body.manga-genre-archive .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.manga-genre-archive #main .wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  
  /* モバイルメニューのサブメニューを初期状態で非表示 */
  .menu-mobile .menu-item-has-children > .sub-menu {
    display: none;
    background-color: #000000 !important;
  }
  
  /* モバイルメニューのサブメニューが開いている状態 */
  .menu-mobile .menu-item-has-children.menu-open > .sub-menu {
    display: block;
    background-color: #000000 !important;
    padding-bottom: 15px !important;
    margin-bottom: 10px !important;
  }
  
  /* モバイルメニューのサブメニュー内の最後のアイテムにマージンを追加 */
  .menu-mobile .sub-menu li:last-child,
  .menu-mobile .sub-menu .lang-item:last-child,
  .menu-mobile .sub-menu .menu-item:last-child {
    margin-bottom: 0 !important;
  }
  
  .menu-mobile .sub-menu li:last-child a,
  .menu-mobile .sub-menu .lang-item:last-child a,
  .menu-mobile .sub-menu .menu-item:last-child a {
    margin-bottom: 0 !important;
  }
  
  /* モバイルメニューのサブメニュー内のリンクのスタイル */
  #navi .menu-mobile .sub-menu li,
  #navi .menu-mobile .sub-menu .lang-item,
  #navi .menu-mobile .sub-menu .menu-item,
  .menu-mobile .sub-menu li,
  .menu-mobile .sub-menu .lang-item,
  .menu-mobile .sub-menu .menu-item {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #navi .menu-mobile .sub-menu li a,
  #navi .menu-mobile .sub-menu .lang-item a,
  #navi .menu-mobile .sub-menu .menu-item a,
  .menu-mobile .sub-menu li a,
  .menu-mobile .sub-menu .lang-item a,
  .menu-mobile .sub-menu .menu-item a {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    margin: 0 !important;
    position: relative !important;
  }
  
  .menu-mobile .sub-menu li a:hover,
  .menu-mobile .sub-menu li a:focus,
  .menu-mobile .sub-menu .lang-item a:hover,
  .menu-mobile .sub-menu .lang-item a:focus,
  .menu-mobile .sub-menu .menu-item a:hover,
  .menu-mobile .sub-menu .menu-item a:focus {
    color: #cccccc !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* モバイルメニューのサブメニュー内の現在の言語リンクのスタイル */
  .menu-mobile .sub-menu li.current-lang a,
  .menu-mobile .sub-menu .lang-item.current-lang a {
    color: #ffffff !important;
    font-weight: bold !important;
  }
  
  /* モバイルメニューのサブメニュー内のcaption-wrapのスタイル調整 */
  .menu-mobile .sub-menu li a .caption-wrap,
  .menu-mobile .sub-menu .lang-item a .caption-wrap,
  .menu-mobile .sub-menu .menu-item a .caption-wrap {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* モバイルメニューのサブメニュー内のitem-labelのスタイル調整 */
  .menu-mobile .sub-menu li a .caption-wrap .item-label,
  .menu-mobile .sub-menu .lang-item a .caption-wrap .item-label,
  .menu-mobile .sub-menu .menu-item a .caption-wrap .item-label {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* モバイルメニューのサブメニュー内のtop-has-subを非表示 */
  .menu-mobile .sub-menu li a .top-has-sub,
  .menu-mobile .sub-menu .lang-item a .top-has-sub,
  .menu-mobile .sub-menu .menu-item a .top-has-sub {
    display: none !important;
  }
}

/* 1024px以上（PCサイズ）のヘッダースタイル */
@media screen and (min-width: 1024px) {
  /* ヘッダーの左側にパディングを追加 */
  #header-in,
  .header-in {
    padding-left: 20px !important;
  }
  
  /* ヘッダーコンテナーの左側にパディングを追加（必要に応じて） */
  #header-container-in,
  .header-container-in {
    padding-left: 20px !important;
  }
}

/* ========================================
   メインコンテンツ幅の制限（常に834px以下）
   ======================================== */

/* 3カラムレイアウト - コンテンツエリア全体 */
.content-in,
#content-in {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
}

/* メインカラムの最大幅を834pxに設定（全ページ） */
#main,
main.main {
    max-width: 834px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
}

/* サイドバーの幅を固定 */
#sidebar,
.sidebar {
    max-width: 300px !important;
    min-width: 250px !important;
    flex-shrink: 0 !important;
}

/* ジャンルアーカイブ時のメインカラムのパディングを削除 */
body.manga-genre-archive #main,
body.manga-genre-archive .main,
body.manga-genre-archive main.main {
    padding: 0 !important;
}

/* キービジュアル - フル幅で表示 */
.manga-genre-key-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.manga-genre-key-visual img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ブラウザ風カードデザイン */
.genre-browser-card {
    width: calc(100% - 32px);
    border: 2px solid #000;
    background: #fff;
    margin: 0 16px 30px;
    padding-top: 0;
    font-family: 'Courier New', Courier, monospace;
}

.genre-browser-card .browser-header {
    background: #000;
    color: #fff;
    padding: 6px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.genre-browser-card .browser-header-label {
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.genre-browser-card .browser-buttons {
    font-size: 8px;
}

.genre-browser-card .browser-content {
    padding: 20px 16px 16px;
}

.genre-browser-card .browser-title {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.genre-browser-card .browser-description {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: none;
}

.genre-browser-card .browser-description p {
    margin: 0;
}

.genre-browser-card .browser-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.genre-browser-card .barcode {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 24px;
}

.genre-browser-card .barcode-bar {
    background: #000;
}

.genre-browser-card .sku {
    font-size: 8px;
    color: #999;
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* ジャンルアーカイブページのmain.mainのパディング/マージンを削除 */
  body.manga-genre-archive main.main {
    padding: 0 !important;
    margin: 0 auto !important;
  }
  
  .genre-browser-card {
    max-width: 100%;
  }
  
  .genre-browser-card .browser-title {
    font-size: 16px !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .genre-browser-card .browser-content {
    padding: 12px;
  }
  
  .genre-browser-card .browser-title {
    font-size: 14px !important;
  }
  
  .genre-browser-card .browser-description {
    font-size: 11px;
  }
}

/* Cocoonのフッター著作権表示を非表示 */
.source-org.copyright {
    display: none !important;
}

/* 投稿詳細・サイトトップ・一覧ページでCocoonデフォルトヘッダーを非表示 */
body.single #header-container,
body.home #header-container,
body.blog #header-container,
body.archive #header-container,
body.category #header-container {
    display: none !important;
}
body.single,
body.home,
body.blog,
body.archive,
body.category {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.single #container,
body.single #content,
body.home #container,
body.home #content,
body.blog #container,
body.blog #content,
body.archive #container,
body.archive #content,
body.category #container,
body.category #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}