@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/* 本文見出し */
.article :is(h2, h3, h4, h5, h6) {
    background-color: unset;
    border: 0;
    font-weight: bold;
    line-height: 1.25;
	margin-bottom: 1.4em;
    padding: 0;
    position: relative;
    text-align: left;
    z-index: 0;
}

.body .article h2 {
    font-size: 22px;
}

.body .article h3 {
    font-size: 20px;
}

.body .article :is(h4, h5, h6) {
    font-size: 16px;
}


.article h2 {
    background: linear-gradient(135deg, transparent 25%, #e6eaf5 26%, #e6eaf5 50%, transparent 51%, transparent 75%, #e6eaf5 76%, #e6eaf5);
    background-size: 4px 4px;
    border-left: 10px solid #465daa;
    color: #333;
    padding: 20px 15px !important;
    box-shadow: 1px 1px 2px 0px #40559c;
}

.article h3 {
    position: relative;
    background: none;
    padding: 8px 25px 8px 5px;
    color: #333;
    border-bottom: solid 2px #e6eaf5;
}


.article h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #465daa;
    bottom: -2px;
    left: 0px;
    width: 30%;
}


.article h4 {
    border-left: 5px solid #465daa;
    padding: 8px 25px 8px 8px;
}


.article h5 {
    border-left: 5px solid #e6eaf5;
    padding: 8px 25px 8px 8px;
}

/* 見出し直上の要素すべてに余白指定 */
.body *:has(+ :is(.article h2,.article h3,.article h4,.article h5,.article h6)) {
    margin-bottom: 5.6em;
}

/* 見出しが連続する場合に余白縮小 */
.body .article h2:has(+ h3) {
    margin-bottom: 1.4em;
}


.body .article h3:has(+ h4) {
    margin-bottom: 1.4em;
}


.body .article h4:has(+ h5) {
    margin-bottom: 1.4em;
}


.body .article h5:has(+ h6) {
    margin-bottom: 1.4em;
}



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

}

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

/* モバイルヘッダー */
.mobile-header-menu-buttons {
    background: #465daa;
    color: #fff;
	box-shadow: 0px 1px 2px 0px #40559c;
}

.logo-menu-button .menu-button-in {
    color: #fff !important;
    font-weight: normal;
}

}


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

}


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

 /* パンくずリストと記事タイトルの余白調整 */
.entry-title {
	margin: 0 !important;
}


}