@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.block-editor-block-list__block{border:1px dotted #D3D3D3;margin-top:16px;margin-bottom:16px;}

.navi-in.wrap {
    width: 100%;
}
.navi-in > ul li {
    flex: 1;
}

.navi-in > ul li a{
	font-size: 1.3rem;
    letter-spacing: 0.1rem;}

.navi-in > ul li a:hover{opacity:0.6}

.navi-in > ul li.camp a{background-color: #61C359; color:#FFF;}
.navi-in > ul li.emergency a{background-color: #FCAA00; color:#FFF;}


/*装飾*/

p.ketsuron {
    font-size: 1.3rem;
    margin-bottom: 16px;
	font-weight:600;
	padding-left: 1.2em;
	position:relative;
}

p.ketsuron::before{
	font-family: 'FontAwesome';
	content: "\f00c";
	font-weight: 900;
	position: absolute;
	font-size: 1em;
	left: 0;
	top: 0;
	color: #5ab9ff;
	font-weight: 900;
}

.ketsuron-wrapper{
	    background-color: rgb(97 195 89 / 0.1);
    padding: 16px;
    margin-top: 1em;
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    line-height: 1.75;
    font-weight: bold;
}

.entry-title, .archive-title {
    font-size: 26px;
    margin: 16px 0;
    line-height: 1.3;
}

.article h2{background: #f9f9f9;
    padding: 20px 15px;
    color: #333;
    border-left: 9px solid #61C359;}

.article h3{padding: 8px 15px;
    border: 0px none;
    border-left: 9px solid #61C359;
    color: #333;}
.article h4{
	border-top: 1px solid #61C359;
    border-bottom: 1px solid #61C359;
    padding: 5px 26px 5px;
    position: relative;
    color: #333;
}

.article h4::before{
	font-family: 'FontAwesome';
    content: "\f0c8";
    position: absolute;
    font-size: 0.7em;
    left: 5px;
    top: 11px;
    color: #61C359;
}

body.categoryid-2{}

body.categoryid-3 .article h2{border-color:#fcaa00;}
body.categoryid-3 .article h3{border-color:#fcaa00;}
body.categoryid-3 .article h4{border-color:#fcaa00;}
body.categoryid-3 .article h4::before{color: #fcaa00;}

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

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

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

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