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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Poppins:wght@600;700&display=swap');

/* ===== FP-MIRAI風 デザインカスタマイズ ===== */

/* --- 1. 基本・フォント設定 --- */
html, body {
    background-color: #1a1a2e !important; /* 背景色: 濃い紺 */
}
body {
    font-family: 'Noto Sans JP', sans-serif; /* 基本フォント */
    font-size: 16px; /* 基本の文字サイズ */
    line-height: 1.8; /* 行間を広めに */
    color: #e2e2e2; /* 基本の文字色: 薄いグレー */
}
/* 見出しの基本設定 */
h1, h2, h3, h4, h5, h6, .site-name-text a, .widget-title-inside {
    font-family: 'Poppins', sans-serif; /* 見出しフォント */
    font-weight: 700;
}

/* --- 2. カラー設定 --- */
/* リンクの色 */
a {
    color: #537fe7; /* アクセントカラー: 鮮やかな青 */
    text-decoration: none;
    transition: all 0.3s ease;
}
a:hover {
    color: #ffffff;
    opacity: 0.9;
}
/* 見出しの色 */
h1, h2, h3, h4, .entry-title {
    color: #ffffff;
}

/* --- 3. ヘッダーエリア --- */
.header-container, .navi-in {
    background-color: #16213e; /* ヘッダー背景 */
    border-bottom: 1px solid #2a3a60;
}
.site-name-text a, .navi-in a .menu-item-label {
    color: #ffffff;
    font-size: 1.1rem;
}
.site-name-text a {
    font-size: 1.8rem;
}

/* --- 4. メインコンテンツ --- */
.content, .main, .article {
    background-color: transparent !important;
}
/* 記事内の見出しデザイン */
.article h2 {
    font-size: 2rem; /* H2のサイズ */
    padding-bottom: 15px;
    border-bottom: 2px solid #537fe7; /* アクセントライン */
    margin-top: 50px;
    margin-bottom: 30px;
}
.article h3 {
    font-size: 1.5rem; /* H3のサイズ */
    border-left: 5px solid #537fe7;
    padding-left: 15px;
    margin-top: 40px;
    margin-bottom: 25px;
}

/* --- 5. トップページの記事カード --- */
.a-wrap, .entry-card-wrap {
    background-color: #16213e; /* カード背景 */
    border: none !important;
    border-radius: 8px; /* 角を丸く */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.a-wrap:hover, .entry-card-wrap:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(83, 127, 231, 0.2);
}
.a-wrap .entry-title, .entry-card-wrap .entry-title {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #ffffff;
}

/* --- 6. サイドバー --- */
.sidebar .widget {
    background-color: #16213e;
    border: none;
    border-radius: 8px;
    padding: 25px;
}
.widget-title-inside {
    background-color: transparent;
    color: #ffffff;
    font-size: 1.3rem;
    padding: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #0f3460;
}
.widget ul li, .widget a {
    color: #e2e2e2;
    border-color: #2a3a60;
}

/* --- 7. フォーム部品（検索窓など） --- */
input[type="text"], input[type="search"], textarea {
    background-color: #101a30;
    border: 1px solid #2a3a60;
    color: #ffffff;
    border-radius: 4px;
    padding: 10px;
}
input[type="text"]:focus, input[type="search"]:focus, textarea:focus {
    border-color: #537fe7; /* フォーカス時に青く光る */
}
button, input[type="submit"] {
    background-color: #537fe7;
    color: #ffffff;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
button:hover, input[type="submit"]:hover {
    background-color: #436ac4;
}

/* --- 8. フッターエリア --- */
.footer {
    background-color: #16213e;
    color: #a0a0a0;
    border-top: 1px solid #2a3a60;
    padding: 40px 0;
}
.footer a {
    color: #e2e2e2;
}

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

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

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