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

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

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

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

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


/************************************
** アイキャッチ・関連記事画像を元の縦横比で表示
************************************/
.entry-card-thumb,
.related-entry-card-thumb {
  height: auto !important;
  aspect-ratio: auto !important;
}

.entry-card-thumb img.entry-card-thumb-image,
.related-entry-card-thumb img.related-entry-card-thumb-image {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center;
}


/************************************
** 関連記事は画像とタイトルだけを表示
************************************/
.related-entry-card-snippet,
.related-entry-card-meta,
.related-entry-card .post-date,
.related-entry-card .cat-label {
  display: none !important;
}


/************************************
** 固定ページでは投稿日・更新日を非表示
************************************/
.page .date-tags {
  display: none !important;
}


/************************************
** Uminobon ダーク×ピンク デザイン
************************************/
:root{--um-bg:#0d0d10;--um-panel:#18181d;--um-panel-soft:#202027;--um-border:#303039;--um-text:#f7f7f8;--um-muted:#aaaab4;--um-pink:#f02f72;--um-pink-strong:#d91f61;--um-radius:14px}
html,body.body{background:var(--um-bg)!important;color:var(--um-text)}
.container,.content,.content-in,.breadcrumb,.footer-bottom{background-color:transparent!important}
.header-container{background:linear-gradient(135deg,#ff3b7f 0%,var(--um-pink) 52%,#cf1f61 100%)!important;color:#fff;box-shadow:0 8px 24px rgba(240,47,114,.2)}
.header-container .site-name-text,.header-container a{color:#fff!important}.site-name-text{font-weight:800;letter-spacing:.06em}.navi{background:rgba(0,0,0,.08)!important}
.main,.sidebar{background:var(--um-panel)!important;color:var(--um-text);border:1px solid var(--um-border);border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.24)}
a,.article a{color:var(--um-pink)}a:hover,.article a:hover{color:#ff72a4}
.entry-card-wrap,.related-entry-card-wrap,.pager-post-navi a{background:var(--um-panel-soft)!important;color:var(--um-text)!important;border:1px solid var(--um-border)!important;border-radius:var(--um-radius);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.entry-card-wrap:hover,.related-entry-card-wrap:hover,.pager-post-navi a:hover{border-color:rgba(240,47,114,.75)!important;box-shadow:0 10px 28px rgba(0,0,0,.28);transform:translateY(-2px)}
.entry-card-title,.related-entry-card-title,.card-title,.article h1,.article h2,.article h3,.article h4{color:var(--um-text)}
.entry-card-snippet,.post-date,.post-update,.breadcrumb,.article-footer,.sns-share-message{color:var(--um-muted)!important}
.entry-card-thumb,.related-entry-card-thumb,.eye-catch,.sample-image-item,.wp-block-image{border-radius:12px;overflow:hidden}
.entry-card-thumb img,.related-entry-card-thumb img,.eye-catch img,.sample-image-item img,.wp-block-image img{border-radius:12px}
.cat-label{background:var(--um-pink)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:.25em .7em!important}
.article h2{background:var(--um-panel-soft);border:0;border-left:5px solid var(--um-pink);border-radius:8px;padding:.75em .9em}.article h3{border:0;border-bottom:2px solid var(--um-pink);padding-bottom:.45em}
.toc,.author-box,.information-box,.blank-box,.alert-box{background:var(--um-panel-soft)!important;color:var(--um-text);border-color:var(--um-border)!important;border-radius:var(--um-radius)}
.comment-area{background:#141419;border:1px solid var(--um-border);border-radius:16px;padding:20px}.comment-title,.comment-reply-title{color:var(--um-text);border-left:4px solid var(--um-pink);padding-left:10px}
.comment-list .comment,.comment-list li{background:var(--um-panel-soft);border:1px solid var(--um-border);border-left:4px solid var(--um-pink);border-radius:10px;color:var(--um-text);padding:14px}
.comment-area input[type=text],.comment-area input[type=email],.comment-area input[type=url],.comment-area textarea{width:100%;background:#0d0d10;color:var(--um-text);border:1px solid #3a3a44;border-radius:8px;padding:12px}
.comment-area input:focus,.comment-area textarea:focus{border-color:var(--um-pink);box-shadow:0 0 0 3px rgba(240,47,114,.18);outline:none}
.comment-btn,.key-btn,.form-submit .submit{background:var(--um-pink)!important;color:#fff!important;border:0!important;border-radius:7px!important;font-weight:700;box-shadow:0 6px 18px rgba(240,47,114,.22)}
.comment-btn:hover,.key-btn:hover,.form-submit .submit:hover{background:var(--um-pink-strong)!important}
.footer{background:#111116!important;color:var(--um-muted);border-top:1px solid var(--um-border)}
.mobile-footer-menu-buttons,.mobile-menu-buttons{background:#17171c!important;color:var(--um-text)!important;border-color:var(--um-border)!important}
@media screen and (max-width:834px){.main,.sidebar{border-radius:12px}.comment-area{padding:15px}}


/************************************
** フッター・モバイルメニュー・表の視認性
************************************/
.footer a,
.footer .site-name-text,
.footer-bottom a,
.footer-bottom-logo .site-name-text,
.footer-menu a {
  color: #fff !important;
}

.mobile-menu-buttons a,
.mobile-menu-buttons a *,
.mobile-menu-buttons .menu-caption,
.mobile-menu-buttons .menu-icon,
.mobile-footer-menu-buttons a,
.mobile-footer-menu-buttons a *,
.mobile-footer-menu-buttons .menu-caption,
.mobile-footer-menu-buttons .menu-icon {
  color: #fff !important;
}

.article table,
.article .scrollable-table {
  background: var(--um-panel) !important;
  color: var(--um-text) !important;
}

.article table th,
.article table td {
  color: var(--um-text) !important;
  border-color: #3a3a44 !important;
}

.article table th {
  background: #292930 !important;
}

.article table td {
  background: #1b1b21 !important;
}

.article table tr:nth-child(even) td {
  background: var(--um-panel-soft) !important;
}

.article table a {
  color: #ff72a4 !important;
}


/************************************
** 記事内メイン画像は角丸なし・本文パネル幅いっぱい
************************************/
.affiliate-image-wrap,
.sample-image-list {
  width: calc(100% + 58px);
  max-width: none;
  margin-left: -29px;
  margin-right: -29px;
}

.affiliate-image-wrap,
.affiliate-image-wrap div,
.sample-image-item {
  border-radius: 0 !important;
  overflow: visible !important;
}

.affiliate-image-wrap img,
.sample-image-item img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

@media screen and (max-width: 1023px) {
  .affiliate-image-wrap,
  .sample-image-list {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }
}


/************************************
** フル幅画像を維持しつつ横方向のはみ出しを防止
************************************/
html,
body.body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.container,
.content,
.content-in,
.main {
  max-width: 100%;
  box-sizing: border-box;
}

.affiliate-image-wrap,
.sample-image-list,
.sample-image-item,
.affiliate-image-wrap img,
.sample-image-item img {
  box-sizing: border-box;
}


/************************************
** 作品情報バッジの視認性とバランスを改善
************************************/
.work-header {
  margin-bottom: 16px;
}

.work-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.work-badges .badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px 3px;
  background: #f39800;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 10px rgba(243, 152, 0, 0.18);
}