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

/* ここから独自 */

/* ==========================================
   1. フッターエリアのカスタマイズ（濃い青背景＋白文字）
   ========================================== */
/* フッター全体の背景色と文字色を変更 */
#footer,
.skin-grayish .footer-bottom {
    background-color: #1a365d !important; /* 背景色：ミッドナイトネイビー */
    color: #ffffff !important;            /* 文字色：白 */
    border-top: none;                     /* 上部の境界線を非表示 */
}

/* フッター内のリンクテキストの設定 */
#footer a,
.skin-grayish .footer-bottom a {
    color: #ffffff !important;            /* リンク文字色：白 */
    text-decoration: none;                /* 下線を非表示 */
}

/* フッター内のリンクにカーソルを合わせた時（ホバー時）の設定 */
#footer a:hover,
.skin-grayish .footer-bottom a:hover {
    opacity: 0.8;                         /* 少し透過させてクリックできることを示す */
}

/* ==========================================
   2. 記事本文中の見出し（H3）のリセット
   ========================================== */
/* デフォルトの背景色と下線を消してプレーンな文字だけにする */
.article h3 {
    background-color: transparent !important; /* 背景色を透明に */
    border-bottom: none !important;           /* 下線を非表示に */
}

/* ==========================================
   3. サイドバーの見出し（H2・H3）のカスタマイズ
   ========================================== */
/* シンプルな下線デザインに変更 */
.sidebar h2, 
.sidebar h3 {
    background-color: transparent !important; /* 背景色を透明に */
    color: #535252;                           /* 文字色：ダークグレー */
    border-bottom: 2px solid #1976d2;         /* 下線：メインアクセントの青 */
    border-radius: 0;                         /* 角丸を解除してシャープに */
    padding: 0 0 8px 0;                       /* 内側の余白（下部のみ設定） */
    margin-top: 24px;                         /* 上部外側の余白 */
}

/* ==========================================
   4. オリジナル記事ボックス（CASE / COMPASS / SOLUTION）
   ========================================== */
/* ボックス全体の共通デザイン */
.compass-box {
    position: relative;
    margin: 2.5em 0 1.5em;                    /* 上下の外側の余白 */
    padding: 1.5em;                           /* ボックス内側の余白 */
    border: 2px solid #ccc;                   /* 枠線のデフォルト設定 */
    border-radius: 8px;                       /* ボックスの角を少し丸める */
    background-color: #ffffff;                /* ボックスの背景色：白 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);   /* うっすらと影をつけて立体感を出す */
}
/* --- ボックス内の余白調整 --- */
/* ボックスの中にある「一番最後」の要素の下余白をゼロにする */
.compass-box > *:last-child {
    margin-bottom: 0 !important;
}
/* ボックスの中にある「一番最初」の要素の上余白も念のためゼロにする */
.compass-box > *:first-child {
    margin-top: 0 !important;
}

/* ボックス上部のタイトル（アイコン＋文字）の共通デザイン */
.compass-box::before {
    font-family: "Font Awesome 5 Free";       /* Cocoon標準のアイコンフォント */
    font-weight: 900;                         /* アイコンを太字（Solid）に設定 */
    position: absolute;
    top: -18px;                               /* 枠線の上に飛び出させる配置 */
    left: 20px;                               /* 左からの位置 */
    padding: 0 15px;                          /* タイトル左右の余白 */
    background-color: #ffffff;                /* 背景を白にして枠線と重なる部分を隠す */
    font-size: 1.1rem;                        /* タイトルの文字サイズ */
    font-weight: bold;                        /* タイトルの文字を太字に */
    letter-spacing: 0.05em;                   /* 文字の間隔を少し広げる */
}

/* 4-1. CASE ボックス（青色：現状・課題） */
.box-case {
    border-color: #1976d2;                    /* 枠線：青 */
}
.box-case::before {
    content: "\f0b1  CASE";                   /* カバンのアイコンと文字 */
    color: #1976d2;                           /* タイトル色：青 */
}

/* 4-2. COMPASS ボックス（赤色：思考法・指針） */
.box-compass {
    border-color: #d32f2f;                    /* 枠線：赤 */
}
.box-compass::before {
    content: "\f14e  COMPASS";                /* コンパスのアイコンと文字 */
    color: #d32f2f;                           /* タイトル色：赤 */
}

/* 4-3. SOLUTION ボックス（緑色：解決策・行動） */
.box-solution {
    border-color: #27ae60;                    /* 枠線：緑 */
}
.box-solution::before {
    content: "\f0eb  SOLUTION";               /* 電球のアイコンと文字 */
    color: #27ae60;                           /* タイトル色：緑 */
}