@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*
Theme Name: SWELL CHILD
Template: swell
Version: 1.0.0
*/

/* ここから下にカスタムCSSを記述 */

/* ===== 見出し共通のマージン設定のみ ===== */
h2, h3, h4,
.wp-block-heading {
    /* マージンだけを統一 */
    margin-top: 1.5em !important;
    margin-bottom: 1em !important;
}

/* 最初の見出しは上マージンを小さく */
.post_content > h2:first-child,
.post_content > h3:first-child,
.post_content > h4:first-child {
    margin-top: 0.5em !important;
}

/* ===== H3の余白問題の解決（装飾は保持） ===== */
h3,
h3.wp-block-heading,
.post_content h3,
article h3 {
    /* マージンのみ調整 */
    margin-top: 1.5em !important;
    margin-bottom: 1em !important;
    
    /* 余白問題の解決のみ */
    padding-left: 0 !important;  /* 先頭の余白を削除 */
}

/* 文字サイズの調整（必要な場合） */
h3,
h3.wp-block-heading {
    font-size: 1.2em !important;  /* または具体的なサイズ（例：1.2em） */
}

/* ===== H2見出しカスタムスタイル（セクション用見出しを除外） ===== */
h2:not(.is-style-section_ttl),
h2.wp-block-heading:not(.is-style-section_ttl),
.wp-block-heading h2:not(.is-style-section_ttl),
.post_content h2:not(.is-style-section_ttl),
.p-postContent h2:not(.is-style-section_ttl),
article h2:not(.is-style-section_ttl),
#main h2:not(.is-style-section_ttl),
main h2:not(.is-style-section_ttl),
body h2:not(.is-style-section_ttl) {
    /* SWELLのスタイルをリセット */
    background: none !important;
    background-color: #fdfdfd !important;
    border: 1px solid #80aec4 !important;
    
    /* 独自のスタイル */
    color: #574c78 !important;
    font-size: 1.4em !important;
    padding: 20px 30px !important;
    display: block !important;
    position: relative !important;
	border-radius: 4px !important; /* 角の丸みを追加 */
}
/* 左上の四角 */
h2:not(.is-style-section_ttl)::before,
h2.wp-block-heading:not(.is-style-section_ttl)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid #80aec4 !important;
    background-color: #fdfdfd !important;
    left: -10px !important;
    top: -10px !important;
    border-radius: 3px !important; /* 角の丸みを追加 */
}
/* 右下の四角 */
h2:not(.is-style-section_ttl)::after,
h2.wp-block-heading:not(.is-style-section_ttl)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid #80aec4 !important;
    background-color: #fdfdfd !important;
    right: -10px !important;
    bottom: -10px !important;
    border-radius: 3px !important; /* 角の丸みを追加 */
}

/* ===== H4見出しカスタムスタイル（font-size削除） ===== */
h4,
h4.wp-block-heading,
.wp-block-heading,
.post_content h4,
.p-postContent h4,
article h4,
#main h4,
body h4 {
    background: none !important;
    border: none !important;
    color: #574c78 !important;
    position: relative !important;
    padding: .3em 1em 1em 40px !important;
    /*font-size: 1.1em !important; */
}

h4::before {
    content: '' !important;
    position: absolute !important;
    top: .2em !important;  /* .6em から .2em に変更 */
    left: .2em !important;
    width: 22px !important;
    height: 22px !important;
    background: #80aec4 !important;
    opacity: .5 !important;
    border-radius: 0% !important;
    border-radius: 3px !important; /* 0%から変更して角を丸める */
}

h4::after {
    content: '' !important;
    position: absolute !important;
    top: .8em !important;  /* .7em から .9em に変更（下に移動） */
    left: .8em !important;  /* .7em から .9em に変更（右に移動） */
    width: 15px !important;
    height: 15px !important;
    background: #739cb0 !important;
    opacity: .5 !important;
    border-radius: 0% !important;
    border-radius: 3px !important; /* 0%から変更して角を丸める */
}

/* ===== SWELLの装飾要素を無効化 ===== */
h2 .c-headingDeco,
h2.wp-block-heading .c-headingDeco,
h4 .c-headingDeco,
h4.wp-block-heading .c-headingDeco {
    display: none !important;
}

/* ===== スマホ対応 ===== */
@media screen and (max-width: 960px) {
    h2:not(.is-style-section_ttl),
    h2.wp-block-heading:not(.is-style-section_ttl) {
        font-size: 18px !important;
        padding: 15px 20px !important;
    }
    
    /* h3とh4のフォントサイズ変更は削除 */
    
    /* スマホでも装飾を確実に表示 */
    h2:not(.is-style-section_ttl)::before,
    h2:not(.is-style-section_ttl)::after,
    h4::before,
    h4::after {
        display: block !important;
        visibility: visible !important;
    }
}

/* 投稿リストのタイトルをスマホで小さく - より詳細なセレクタ */
@media screen and (max-width: 599px) {
    .p-postList .p-postList__title {
        font-size: 16px !important;
    }
    
    /* カードタイプの場合 */
    .p-postList.-type-card .p-postList__title {
        font-size: 14px !important;
    }
    
    /* H2要素として直接指定 */
    .p-postList h2.p-postList__title {
        font-size: 16px !important;
    }
	
	/* H4要素として直接指定 */
    .p-postList h4.p-postList__title {
        font-size: 12px !important;
    }
}

/* より強力なセレクタ */
@media screen and (max-width: 599px) {
    body .p-postList .p-postList__title,
    body .p-postList h2.p-postList__title {
        font-size: 16px !important;
    }
	body .p-postList .p-postList__title,
    body .p-postList h4.p-postList__title {
        font-size: 12px !important;
    }
}