@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){
  /*必要ならばここにコードを書く*/
}


/* ============================================
   JGFS DARK THEME
   黒背景 / 白テキスト / 黄アクセント
   ============================================ */

:root {
  --jgfs-black: #0A0A0A;
  --jgfs-black-mid: #141414;
  --jgfs-black-light: #1E1E1E;
  --jgfs-yellow: #FFD700;
  --jgfs-yellow-light: #FFE74C;
  --jgfs-yellow-dark: #E6B800;
  --jgfs-white: #F5F5F0;
  --jgfs-gray: #8A8A8A;
  --jgfs-border: #2A2A2A;
}

html, body {
  background: var(--jgfs-black) !important;
  color: var(--jgfs-white) !important;
}
#body-in, #main, #content, .main, .content,
#container, .container, .site, .body-bgcolor,
article, .article, .post, .page,
aside, .sidebar, #sidebar,
header.header, #header, .header-in,
footer, #footer, .footer-in,
.entry-content, .entry-card-wrap,
.widget, .related-entry-card-wrap,
.comments, .comment, #comments,
.appeal, .info-content, .topnews,
.menu-mobile, #navi, .navi-in,
.menu-content, .footer-bottom-content,
.toc, #toc, .author-box {
  background: var(--jgfs-black) !important;
  color: var(--jgfs-white) !important;
}

body, p, li, td, th, dd, dt, span, label {
  color: var(--jgfs-white) !important;
}
h1, h2, h3, h4, h5, h6, strong, b {
  color: var(--jgfs-yellow) !important;
}
a { color: var(--jgfs-yellow-light) !important; }
a:hover { color: var(--jgfs-yellow) !important; text-decoration: underline; }

.entry-content h2 {
  border-left: 5px solid var(--jgfs-yellow) !important;
  border-bottom: 1px solid var(--jgfs-yellow-dark) !important;
  background: var(--jgfs-black-mid) !important;
  padding: 18px 24px !important;
  margin: 48px 0 24px !important;
}
.entry-content h3 {
  border-left: 4px solid var(--jgfs-yellow) !important;
  padding: 8px 0 8px 16px !important;
  margin: 32px 0 16px !important;
}
.entry-content h4 {
  color: var(--jgfs-yellow-light) !important;
  border-bottom: 1px dashed var(--jgfs-border) !important;
}

.entry-card, .related-entry-card,
.widget-entry-cards, .related-list,
.info-box, .blank-box {
  background: var(--jgfs-black-mid) !important;
  border: 1px solid var(--jgfs-border) !important;
  color: var(--jgfs-white) !important;
}
.entry-card-title, .related-entry-card-title {
  color: var(--jgfs-yellow) !important;
}

.entry-content ul li::marker { color: var(--jgfs-yellow) !important; }

#header, .header-container, .header-container-in,
.navi, .navi-in, #navi-in {
  background: var(--jgfs-black) !important;
  border-bottom: 1px solid var(--jgfs-yellow-dark) !important;
}
#navi .item-label, .menu-header li a {
  color: var(--jgfs-white) !important;
}
#navi .item-label:hover, .menu-header li a:hover {
  color: var(--jgfs-yellow) !important;
}

.wp-block-button__link, .btn, .btn-primary,
button, input[type="submit"], .wpcf7-submit {
  background: var(--jgfs-yellow) !important;
  color: var(--jgfs-black) !important;
  border: 2px solid var(--jgfs-yellow) !important;
  font-weight: 800 !important;
  padding: 16px 36px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 14px rgba(255,215,0,0.3);
}
.wp-block-button__link:hover, .btn:hover, .btn-primary:hover,
button:hover, input[type="submit"]:hover, .wpcf7-submit:hover {
  background: var(--jgfs-white) !important;
  color: var(--jgfs-black) !important;
  box-shadow: 0 6px 20px rgba(255,215,0,0.5);
  transform: translateY(-2px);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], textarea, select {
  background: var(--jgfs-black-mid) !important;
  color: var(--jgfs-white) !important;
  border: 1px solid var(--jgfs-border) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--jgfs-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.2);
}

table { background: var(--jgfs-black-mid) !important; color: var(--jgfs-white) !important; }
table th { background: var(--jgfs-black-light) !important; color: var(--jgfs-yellow) !important; }
table th, table td { border-color: var(--jgfs-border) !important; }

blockquote {
  background: var(--jgfs-black-mid) !important;
  border-left: 4px solid var(--jgfs-yellow) !important;
  color: var(--jgfs-white) !important;
}
code, pre {
  background: var(--jgfs-black-light) !important;
  color: var(--jgfs-yellow-light) !important;
  border: 1px solid var(--jgfs-border) !important;
}

.toc, #toc {
  background: var(--jgfs-black-mid) !important;
  border: 1px solid var(--jgfs-border) !important;
}
.toc-title { color: var(--jgfs-yellow) !important; background: var(--jgfs-black-light) !important; }
.toc a { color: var(--jgfs-white) !important; }
.toc a:hover { color: var(--jgfs-yellow) !important; }

.sidebar h3, .sidebar .widget-title {
  background: var(--jgfs-black-light) !important;
  color: var(--jgfs-yellow) !important;
  border-left: 4px solid var(--jgfs-yellow);
  padding: 12px 16px;
}

.footer, #footer {
  background: var(--jgfs-black) !important;
  border-top: 2px solid var(--jgfs-yellow-dark) !important;
}
.footer a { color: var(--jgfs-white) !important; }
.footer a:hover { color: var(--jgfs-yellow) !important; }
.copyright { color: var(--jgfs-gray) !important; }

.mobile-footer-menu-buttons, .menu-mobile {
  background: var(--jgfs-black) !important;
  border-top: 1px solid var(--jgfs-yellow-dark) !important;
}
.mobile-footer-menu-buttons a { color: var(--jgfs-white) !important; }
.mobile-footer-menu-buttons a:hover { color: var(--jgfs-yellow) !important; }

.entry-content .blogcard-wrap {
  background: var(--jgfs-black-mid) !important;
  border: 1px solid var(--jgfs-border) !important;
  color: var(--jgfs-white) !important;
}
.blogcard-title { color: var(--jgfs-yellow) !important; }
.blogcard-snippet { color: var(--jgfs-white) !important; }
.blogcard-footer, .blogcard-site-name { color: var(--jgfs-gray) !important; }

.entry-meta, .post-meta, .date-tags, .post-date, .post-update {
  color: var(--jgfs-gray) !important;
}
.cat-label, .category {
  background: var(--jgfs-yellow) !important;
  color: var(--jgfs-black) !important;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
}

img { border-radius: 4px; }


/* ===== CTAボタン視認性修正 ( https://jgfs.jp/trial/ ) ===== */
/* グローバルの strong/b 黄色化からCTAボタン内を除外 */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link strong,
.wp-block-button .wp-block-button__link b,
a.wp-block-button__link,
a.wp-block-button__link strong,
a.wp-block-button__link b {
  color: #0a0a0a !important;
  text-decoration: none !important;
}
/* CTAボタンの見た目を強化（ホバーしなくてもボタンとわかるように） */
.wp-block-button .wp-block-button__link,
a.wp-block-button__link {
  background-color: var(--jgfs-yellow) !important;
  color: #0a0a0a !important;
  font-weight: 800 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  display: inline-block !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 0 0 2px var(--jgfs-yellow) inset !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.wp-block-button .wp-block-button__link:hover,
a.wp-block-button__link:hover {
  background-color: #ffec5c !important;
  color: #0a0a0a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 0 0 2px var(--jgfs-yellow) inset !important;
  text-decoration: none !important;
}
.wp-block-button { margin: 24px 0 !important; }