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

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

/* ===== 目次 (TOC) の視認性改善 ===== */
.toc {
  background: rgba(10, 15, 40, 0.85) !important;
  border: 2px solid #c9a227 !important;
}
.toc-title {
  color: #f0c040 !important;
}
.toc a, .toc ol a, .toc ul a, .toc li a {
  color: #ffffff !important;
  text-shadow: none !important;
}
.toc a:hover, .toc ol a:hover, .toc ul a:hover {
  color: #f0c040 !important;
  text-decoration: underline !important;
}
.toc-close, .toc-toggle {
  color: #f0c040 !important;
}
.toc ol, .toc ul {
  color: #ffffff !important;
}

/* ===== ページ内テーブルの背景リセット ===== */
/* Cocoonのデフォルトのテーブルスタイルをダークテーマ用に上書き */
.entry-content table tr,
.entry-content table tbody tr {
  background: transparent !important;
}
.entry-content table td,
.entry-content table th {
  border-color: rgba(201,162,39,0.2) !important;
}

/* ===== Contact Form 7 スタイル ===== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  background: rgba(255,255,255,0.08) !important;
  color: #7c3c3c !important;
  border: 1px solid rgba(201,162,39,0.4) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
.wpcf7 input[type="submit"] {
  background: linear-gradient(135deg, #c9a227, #f0c040) !important;
  color: #1a1a2e !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 12px 40px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  font-size: 1.1em !important;
}
.wpcf7 input[type="submit"]:hover {
  background: linear-gradient(135deg, #f0c040, #c9a227) !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1023px){}
@media screen and (max-width: 834px){}
@media screen and (max-width: 480px){}