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

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

/*見出しデザインリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
  padding: 0;　/*内側余白*/
  background-color:transparent;　/*背景色を無効に*/
  border:0;　/*上下左右の枠線を消す*/
  border-radius: 0;　/*角の丸みなし*/
  box-shadow: none;
}
/*h2見出しのブロックにドロップシャドウが落ちるのをリセット*/
.article h2 {
    box-shadow: none;
}

/*グローバルナビの文字を太字に*/
div.item-label{
	font-weight: bold;
}

/*ヘッダー下部しましまなくす*/
div#header-container.header-container::after {
    display:none;
}
/*ロゴ背景のグラデーションなくす*/
h1.logo.logo-header.logo-image {
	background: #ffffff;
}
div.logo.logo-header.logo-image {
	background: #ffffff;
}

/*サイドバーウィジェットタイトルカスタム*/
h3.widget-sidebar-title, h3.widget-sidebar-scroll-title {
	color: #5AC3EF;
	border-top: 2px solid #5AC3EF;
    border-bottom: 2px solid #5AC3EF;
    background-image:
    radial-gradient(#5AC3EF 15%, transparent 30%);
    background-size: 4px 4px;
	box-shadow: none;
	/*background: #5AC3EF;
	color: #ffffff;*/
}

/*見出しカスタム*/
.article h1 {
  font-size: 2rem;
}
.article h2 {
  color: #5AC3EF;
  padding: 1em .75em;
  border-top: 2px solid #5AC3EF;
  border-bottom: 2px solid #5AC3EF;
  background-image:
    radial-gradient(#5AC3EF 15%, transparent 30%);
  background-size: 4px 4px;
}

.article h3  {
  color: #5AC3EF;
  padding: .25em 0 .25em .25em;
  padding-bottom: .5em;
  border-bottom: 3px dotted #5AC3EF;
}
.article h4 {
  color: #5AC3EF;
  position: relative;
  padding: 0 .5em .5em 1.5em;
}
.article h4::before,
.article h4::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
.article h4::before {
  top: .2em;
  left: .2em;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: #5AC3EF;
}
.article h5 {
  color: #5AC3EF;
  position: relative;
  padding: 0 .5em .5em .5em;
}


/*コードブロックの背景色を薄黄色に
pre.wp-block-code {
	background: #FEF8DC;
}*/

/*タブ見出しボックス*/
.tab-caption-box-label{ 
	line-height: ０; /*タブ設定をリセット*/
	padding: .4rem 2rem .4rem 2rem ; /*タブ内側余白*/
	font-size: 1.2rem; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px;  /*タブ角丸*/
	background-color: #F2B81D;
	color: #ffffff;
}

.tab-caption-box-content {
	position: relative;  /*配置に関するもの（ここを基準に）*/
	top: .2rem; /*上から(1px）移動*/
	border: 3px solid; /*ボックス線*/
	padding: 24px 24px; /*ボックス内側余白*/
	border-radius: 5px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
	border-color: #F2B81D;
}

/*見出しボックス*/
.caption-box{
	border:0;　/*上下左右の枠線を消す*/
}
.caption-box-label{ 
	line-height: ０; /*タブ設定をリセット*/
	padding: .8rem 2rem .4rem 2rem ; /*タブ内側余白*/
	font-size: 1.2rem; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px;  /*タブ角丸*/
	background-color: #89BA55;
	color: #ffffff;
}
.caption-box-content {
	position: relative;  /*配置に関するもの（ここを基準に）*/
	top: .2rem; /*上から(1px）移動*/
	border: 5px solid; /*ボックス線*/
	padding: 24px 24px; /*ボックス内側余白*/
	border-radius: 5px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
	border-top-right-radius: 0px; /*ボックス左上角丸*/
	border-color: #89BA55;
}

/*ブログカード
div.blogcard.internal-blogcard.ib-left{
	background-color: #ECF4E4; 
}

div.blogcard.external-blogcard.eb-left.cf{
	background-color: #ECF4E4; 
}*/

/*目次バー背景色*/
label.toc-title{
	background: none;
	background-image:
    radial-gradient(#5AC3EF 15%, transparent 30%);
    background-size: 4px 4px;
}

/*ラベルボックスのタブ部分を塗りに*/
.label-box-label.block-box-label.box-label.fab-book::before{
	color: #ffffff;
	text-shadow: none;
	background: #5AC3EF;
	border-radius: 4px 0px 0px 4px;  /*タブ角丸*/
	padding: .8rem 2rem .4rem 2rem ; /*タブ内側余白*/
	margin:0;	
}
.label-box-label-text{
	color: #ffffff;
	text-shadow: none;
	background: #5AC3EF;
	border-radius: 0px 4px 4px 0px;  /*タブ角丸*/
	padding: .8rem 2rem .4rem 0rem ; /*タブ内側余白*/
	margin:0;
}
/*ラベルボックスの枠線色をサイトカラーに、、でもちゃんとできてないかも。。*/
html .body .label-box.has-blue-border-color .box-content{
	border-color: #5AC3EF;
}
.label-box-content{
	border: 3px solid #5AC3EF;
}

/*フロントページのタイトル非表示*/
.home.page .entry-title{
  display: none;
}

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

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

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

/************************************
****　アピールエリア
************************************/
.appeal{
padding:0 0 .1em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:60px;
max-height:60px;
}
.appeal-content{
background-color:#297ca5; /*エリア背景色・ボタン色と同じカラーコードを入力*/
margin:auto;
padding:0;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;/*文字色はこちらで変更できます*/
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
.appeal{
padding:.1em 0 .25em;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}