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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*--------------------------------------------------
 * キジトラIT用語集様 ヘッダー専用スタイル（キャッチフレーズ修正版）
 *-------------------------------------------------*/

/* 1. Google Fonts から「Zen Maru Gothic」を読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&display=swap');

/* 2. サイトタイトル（文字）の装飾 */
.logo-header .site-name a,
.logo-text a,
.site-name a,
.site-name-text,      
.logo-text a span {   
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-weight: 900 !important; /* 最大の太さ */
    color: #1A3056 !important;   /* 文字色：画像の濃い青 */
    text-decoration: none !important;
    
    /* 文字サイズ（パソコン表示時） */
    font-size: 52px !important; 
    
    /* 白い縁取り（アウトライン） */
    text-shadow: 
        3px  3px 0 #fff, -3px -3px 0 #fff,
        3px -3px 0 #fff, -3px  3px 0 #fff,
        0px  3px 0 #fff,  0px -3px 0 #fff,
        3px  0px 0 #fff, -3px  0px 0 #fff !important;
}

/* 3. キャッチフレーズ（サブタイトル）の装飾 */
/* ★Cocoon独自のクラス「.tagline」を指定して強制適用します */
.tagline,
.site-description,
.logo-header .tagline,
.header-container .tagline {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-weight: 700 !important; /* 太さ */
    color: #333333 !important;   /* 文字色：濃いグレー */
    
    /* もしキャッチフレーズの文字サイズも大きくしたい場合は、 */
    /* 下の行のコメントを外して数字を調整してください */
    /*font-size: 18px !important; */
}

/* ★4. フッター部分のサイトタイトル調整（PC・スマホ共通） */
/* ヘッダーの大きいサイズがフッターに影響するのを防ぎ、サイズを小さくします */
.footer .site-name a,
.footer .logo-text a,
.footer .site-name-text,
.footer .logo-text a span {
    /* フッター用の控えめなサイズ（お好みに合わせて数値を調整してください） */
    font-size: 24px !important; 
    
    /* 文字が小さくなった分、白縁も1.5pxに細くして文字が潰れるのを防ぎます */
    text-shadow: 
        1.5px  1.5px 0 #fff, -1.5px -1.5px 0 #fff,
        1.5px -1.5px 0 #fff, -1.5px  1.5px 0 #fff,
        0px  1.5px 0 #fff,  0px -1.5px 0 #fff,
        1.5px  0px 0 #fff, -1.5px  0px 0 #fff !important;
        
    /* 【お好みで切り替え】 */
    /* もし「フッターには白い縁取りは一切不要で、すっきりしたプレーンな文字にしたい」という場合は、 */
    /* 上の「text-shadow: ...」のブロックを削除して、すぐ下の行のコメント（/* と */）を外してください */
    /* text-shadow: none !important; */
}

/* タグを濃いめのセージグリーンにする */
.entry-tags a, .tagcloud a {
    background-color: #dcfce7; /* 一段階濃くしたミントグリーン */
    color: #14532d;            /* 深みのあるディープグリーン */
    border: 1px solid #bbf7d0; /* 枠線もくっきりと */
    border-radius: 4px;        /* 角の丸み */
}

/* マウスを乗せたとき（ホバー効果） */
.entry-tags a:hover, .tagcloud a:hover {
    background-color: #bbf7d0; /* ホバー時にさらに濃く */
    color: #14532d;
    text-decoration: none;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    /* タイトルの文字サイズ */
    .logo-header .site-name a,
    .logo-text a,
    .site-name a,
    .site-name-text,
    .logo-text a span {
        font-size: 24px !important; /* ほんの少しだけ小さくして縦幅を稼ぎます */
    }
    
    /* キャッチフレーズのスマホ時のサイズと余白を詰める */
    .tagline,
    .site-description {
        font-size: 13px !important;   /* スマホで見やすいスッキリサイズに */
        margin-top: 3px !important;   /* タイトルとの隙間を極限まで詰める */
        margin-bottom: 0px !important;
        line-height: 1.2 !important;  /* 行間を詰める */
		font-size: 10px !important;
    }

    /* ヘッダー内部の上下の余白をギュッと縮めて、全体の高さを抑える */
    .header-in,
    .logo-header {
        padding-top: 10px !important;   /* 上の余白をカット */
        padding-bottom: 10px !important; /* 下の余白をカット */
    }

}