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

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


h1.entry-title[itemprop="headline"] {
    background-color: transparent !important; /* 背景色をなしに設定 */
    color: #2E4052 !important; /* テキストカラーを白に設定して読みやすく */
	border-bottom: 3px solid ;
	border-image: linear-gradient(to right, #28C443, #01B4ED) 1;
	font-size:20px;
	font-family: "Helvetica" !important;
}

h2 {
    background-color: #01b4ed !important;
    color: #FFFFFF !important; 
    font-size: 20px;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: 1.2em !important; /* アイコンとテキストの間のスペースを確保 */
    position: relative;
    line-height: 1.5; /* 見出し全体の行の高さを設定 */
    display: flex; /* アイコンとテキストをフレックスボックスで管理 */
    align-items: center; /* フレックス内の要素を垂直方向に中央揃え */
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 17l5-5-5-5v10z"/></svg>') no-repeat center;
    background-size: contain;
}

@media screen and (max-width: 768px) {
    h2 {
        padding-left: 1.3em !important; /* スマホ用に余裕を追加 */
    }
    h2::before {
        width: 1.5em !important; /* アイコンのサイズを調整 */
        height: 1.5em !important; /* アイコンのサイズを調整 */
    }
}

.article h3 {
    border: none !important; /* すべての境界線を削除 */
    font-size: 19px;
    padding: 0 !important; /* パディングをリセット */
    padding-left: 1.2em !important; /* アイコンとテキストの間のスペースを確保 */
    position: relative;
    line-height: 1.5; /* 見出し全体の行の高さを設定 */
    display: flex; /* アイコンとテキストをフレックスボックスで管理 */
    align-items: center; /* フレックス内の要素を垂直方向に中央揃え */
    border-top: 1px solid #01b4ed !important; /* 細めの上線を追加 */
    border-bottom: 1px solid #01b4ed !important; /* 細めの下線を追加 */
	padding-top: 5px !important; /* 上線とタイトルの間の余白 */
    padding-bottom: 5px !important; /* タイトルと下線の間の余白 */
}

.article h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2301b4ed"><path d="M10 17l5-5-5-5v10z"/></svg>') no-repeat center;
    background-size: contain;
}

@media screen and (max-width: 768px) {
.article h3 {
        padding-left: 1.3em !important; /* スマホ用に余裕を追加 */
    }
.article h3::before {
        width: 1.5em !important; /* アイコンのサイズを調整 */
        height: 1.5em !important; /* アイコンのサイズを調整 */
    }
}