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


/* 以下、追加分 */
/* プロフィールボックスの外枠を消す */
.author-box {
   border: none !important;
}

/* トップページのヘッダーを消す */
.page-id-35 .header, 
.page-id-35-header {
    display: none;
}

/* フォント指定 */
body, html {
　font-family: Lato,"Noto Sans JP","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif
}

/* Cocoon見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none; /* 背景色を削除 */
  border: none;     /* 枠線を削除 */
  border-radius: 0; /* 角丸を削除 */
}

/*H2見出し*/
.article h2 {
   --stripe-color: #F4F4E5; /*ストライプの色 */
   color: #2d3230; /* 文字色 */
   background: linear-gradient(135deg, transparent 25%, var(--stripe-color) 26%, var(--stripe-color) 50%, transparent 51%, transparent 75%, var(--stripe-color) 76%, var(--stripe-color));
   background-size: 4px 4px;
		margin-bottom: 0.8em;
		margin-top: 2em;
}

/*H3見出し*/
.article h3 {
   position: relative;
   padding: 0.3em 0; /* 内側余白調整 */
   border-bottom: solid 3px #F4F4E5; /* 下線１：実線・太さ・色 */
   color:#2d3230; /* 文字色（黒）*/
}

.article h3:after{
   position: absolute;
   content: '';
   display: block;
   border-bottom: solid 3px #c7ddd6; /* 下線２：実線・太さ・色 */
   bottom:-3px;
   width:30%; /* 下線２の幅*/
}

/*H4見出し*/
.article h4 {
   border-left: double 10px #c7ddd6; /* 左線：実線・太さ・色 */
   color:#2d3230; /* 文字色（黒）*/  
}

/*H5見出し*//* 先頭に丸いアクセント*/
.article h5 {
   background:none;
   color: #333;
   position: relative;
   padding: .3em 1em 1em 40px;
	margin-bottom: 0.3em;
  }

h5::before,
h5::after{
   position: absolute;
   content: '';
   border-radius: 100%;
}

h5::before {
   top: .5em;
   left: .2em;
   z-index: 2;
   width: 22px;
   height: 22px;
   background: #c7ddd6;
   opacity: .5;
}
h5::after{
   top: 1.1em;
   left: .7em;
   width: 15px;
   height: 15px;
   background: #c7ddd6;
   opacity: .5;
}

/* ::marker を使ったカスタムマーカー */
ul li::marker {
  color: #89aca2;  /* 点の色をピンク系に変更 */
}

/* ボックスデザイン *//* めくれた紙風 */
.cstm-box-paper {
   margin: 3em auto; /* 外側余白 */
   padding: 3em; /* 内側余白 */
   background-color: #fafaf8ff; /* 背景色 */
   position: relative; /* 相対位置指定 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-paper::after {
   position: absolute; /* 絶対位置指定 */
   content: ''; /* 擬似要素にコンテンツを表示しない */
   right: 0px; /* 右端に配置 */
   top: 0px; /* 上端に配置 */
   border-width: 0 25px 25px 0; /* 形状 */
   border-style: solid; /* 線の種類 */
   border-color: #ccc #fff #ccc; /* 線の色 */
   box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* 影*/
}

/* ボックス内の段落 */
.cstm-box-paper p { margin:0; }

/* ふせん風 */
.cstm-box-sticky {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-left: solid 5px #c7ddd6;  /* 左側の線 */
   background-color: #fdfdfa;   /* 背景色 */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-sticky p { margin:0; }