@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/**タイトル画像余白**/
.site-name-text img {
margin-top: 10px;
margin-bottom:-30px;
}
/*ナビメニュー*/
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}

.menu-header .item-label{
    color: #666 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #fff !important;
    border-bottom: 3px solid #F43E43;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #F43E43 !important;
    transition: all .2s ease;
}
/*検索窓*/
.search-edit{
	height: 40px;
	border-radius: 5px;
}
.search-edit:focus{
	outline: none;
	border-color: pink; /* フォーカス時の枠色 */
}
/*見出し*/
.article h1 {
	color: #B70000;
	padding-left: 10px;
    border-left: solid 10px #F43E43;
}
.article h2 {
    color: #fff;
	font-size: 1.1em;
	padding: .8em 1em;
    margin-top: 50px;
    background: #fcaa00;
    border-top: 4px solid #ffcc33;
    border-bottom: 4px solid #ffcc33;
}
.article h3 {
	font-size: 1.2em;
}	
/*ブログカード・続きを読む*/
.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	border-color: #ccc ; /* 枠線の色を変更 */
}

a.blogcard-wrap:hover{
	background-color: transparent;
	opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.1);
	transition: .3s;
}

.blogcard-thumbnail {
	margin-right: 1rem;
}

.blogcard-title{
	margin-bottom: .5rem;
}

.blogcard-snipet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}

@media screen and (max-width: 480px){
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snipet{
		display: none;
	}
}
.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

.blogcard::before{
	content: 'あわせて読みたい'; /* タイトルの文言 */
	position: absolute;
	top: -.8rem;
	left: auto;
	font-size: 60%;
	background-color:#95A507; /* タイトルの背景色 */
	padding: .6em 1em;
	font-weight: bold;
	color: #fff;  /* タイトルの文字色 */
	border-radius: 2px;
}
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #FF9800; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
/*コメント欄*/
#commentform label{
	display: inline-block;
}
#commentform textarea, #commentform input{
    border: 1px solid #fcaa00; /* 枠線の色 */
	font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 80%;
}
#commentform textarea:focus, #commentform input:focus{
	outline: none;
	border: 3px solid #fcaa00; /* 枠線の色 */
}
#commentform #submit{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
	background-color: #fcaa00; /* 送信ボタンの背景色 */
	color: white;
	border-radius: 15px;
	height: 40px;
	border: none;
	padding: 0;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	transition: all .2s ease;
}
/*ページネーション*/
.pagination-next, .next, .prev, .pager-prev-next{ display: none; }
.pager-numbers a { text-decoration: none; }
.page-numbers{
    border: none;
    border-radius: 50%;
    font-family: sans-serif;
    font-size: 80%;
    color: #666 ;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    transition: all .1s ease;
    background-color: #ffffff;
}
.pagination a.page-numbers:hover,.pager-numbers a:hover .page-numbers{
    background-color: #f44336; /* マウスオーバー時の背景色 */
    color: #fff t;
}
.pagination .current, .pager-links .current{
    background-color: #FF9800;
    color: #fff;
}
/*プロフィール*/
.author-box .author-content .author-description p{
	margin: .5em auto;
	line-height: 1.5;
	max-width: 500px;
	font-size: 82%;
	text-align: left;
}
.author-box .author-widget-name{
	color: #666;
	background-color: #eaedf2;
	display: inline-block;
	margin: 0 auto 3px 1rem;
	padding: .4em;
	border-radius: 4px;
	font-weight: bold;
	position: relative;
	z-index: 2;
	font-size: .9em;
}

/**サイドバー背景透過**/
#sidebar{
background-color: transparent;
}
/**サイドバータイトル**/
.sidebar h3{
line-height: 50px;
padding: 0;
border-radius: 0;
font-weight: 700;
color: #2f4f4f;
background-color: transparent;
border-bottom: solid 3px #fcaa00;
}

/* トップページ見出し３　CSS変更 */
.page-id-13101 .article h3 {
/* 見出し３のスタイル */
font-size: 20px;
text-align: center;
border-bottom: solid 5px #cc3300;	
}
.page-id-13101 .article h2{
line-height: 0.3em;	
}
.page-id-13101 .article h3::before, .page-id-13101 .article h3::after {
content: '';
position: absolute;
top: 50%;
}

/*フロント固定ページの本文*/
.home.page .article p{
font-size: 0.9em;
line-height: 1.5em;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}
/*フロント固定ページタグ一覧*/
.home.page .widget h3{
display: none;
}
/*サイドバーフォントサイズ*/
.widget-entry-card {
    font-size: 14px;
}
/*タブボックス*/
.box2-green{
	margin: 2em auto; /* ボックスの余白 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	border:1px solid #58be89; /* ボックス線 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box2-green .box-title {
	background: #58be89; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box2-green p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}
.box5-green {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 2em 2em 1.7em;	/* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
	border: 1px solid #58be89;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
	background: #eef8f3; /* ボックス背景色 */
}
.box5-green .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -18px; /* 上から（-18px）移動*/
	left: 27px; /* 左から(27px)移動 */
	background: #58be89; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	padding: 0.6em 1em;/* タイトルの内側余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 17px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
	border-radius:4px;/* タイトルの角丸 */
}
.box5-green p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}