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

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

/*---------------------------------
固定ページの日付を非表示にする
--------------------------------*/
.page .date-tags {
display: none;
}

/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}

/************************************
** 本文記事タイトル
************************************/
header.article-header.entry-header {
text-align:center;
}
.article-header h1 {
position: static;
font-size: 1.4em;
color: #333333;
background-color:#fff;
line-height:1.8em;
text-shadow: none;
margin:0;
padding: 1.5em .95em 1.1em;
}
.eye-catch{
box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2);
}
.eye-catch img{
height:auto!important;
-webkit-filter:none;
filter:none;
opacity:1;
transform: none;
width: 100%;
}
a.cat-link, a.tag-link{
font-size:.7em;
border-radius:10px;
border:0;
margin:0.5em;
padding:0 0.5em 0;
background:#90C31F!important;
color:#fff!important;
}
.cat-link:hover ,.tag-link:hover {
opacity: .5;
transition: all .3s ease-in-out;
}
.entry-categories-tags {
margin-bottom: 0.4em;
}
.date-tags{/*日付・更新日*/
font-size:1.2em;
color:#7b7b7b;
top:5px;
right:0;
left: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
div.date-tags span.post-update{/*投稿・更新の入れ替え*/
order: 1;
}
span.fa.fa-history::before{/*更新アイコン*/
content:”\f021″
}
div.date-tags span.post-update,div.date-tags span.post-date{
margin-right: 10px;
}
@media (max-width:1023px){
.entry-categories-tags.ctdt-one-row {
padding: 0;
}
}
@media (max-width:420px){
.article-header h1 {
font-size: 1.2em;
}
.date-tags{
top:3px;
}
}
@media (max-width:834px){/*画面幅834px以下のとき、本文周りの空白を非表示*/
main.main, div.sidebar {
padding:0;
}}
@media screen and (min-width: 601px) and (max-width: 834px){/*画面幅601px以上834px以下のとき、本文周りの空白を表示*/
div#content.content.cf{
margin:1em;
}}

/************************************
** H2~H5 見出しカスタマイズ
************************************/
.article h2, .article h3, .article h4, .article h5, .article h6{
padding: 0;
margin: 0;
font-size: medium;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: none;
position:relative;
}
.article h2:before {
background-image: none;
}
.article h2{
line-height: 2;
background-color: #f6f6f6;
font-size: 24px;
color: #333;
border-radius: 1px;
border-left: solid 14px #636b64;
padding: 1em;
margin-top: 70px;
margin-bottom: 35px;
}

.article h3{
line-height:2;
font-size:20px;
border:none;
display:inline-block;
color:#333333;
border-radius:2px;
border-left:10px solid #8b968d;
padding: 0.4em 0.8em;
margin-top:50px;
margin-bottom:20px;
}
.article h4{
line-height:2;
background-color:#e8ece9;
font-size: 17px;
font-weight:normal;
color:#333333;
border-radius:1px;
padding:1.5em;
margin-top:20px;
margin-bottom: 20px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.1);
}
.article h5{
background: #f9fff4;/* 背景色 */
font-size: 17px;
font-weight:normal;
line-height:2;
color:#333333;
border-radius: 4px;
padding: 1.5em;
margin-left:0 auto;
border:2px dotted;
border-color:#90C31F; /* 線の色 */
margin-top:20px;
margin-bottom: 20px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.1);
}
@media (max-width:480px){/*スマホ表示*/
.article h2{
font-size:18px;
padding:1.5em 1em 1.5em 0.5em;
}
.article h3{
font-weight:bold;
margin-top:3em;
margin-bottom:0em;
font-size:17px!important;
}
.article h4, .article h5, .article h6{
font-size:15px!important;
}
}

/************************************
**　吹き出し
************************************/
.sbp-l {/*吹き出し本体*/
margin: 4em 3em 5em 0;
}
div.sbs-think.sbp-l {
margin: 4em 2em 5em 0;
}