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


h1 {
font-size: 27px !important;/*文字のサイズ*/
padding:0.5em 0.1em;
margin-bottom: 1.0em  !important;
}
@media screen and (max-width: 480px){
h1 {
font-size: 22px !important;/*文字のサイズ*/
padding: 0.5em 1em !important;
margin: 0.5em -0.7em !important;
}
}
	
	
/* 見出し2 */
.article h2 {
font-size: 21px !important;/*文字のサイズ*/
border-left: 12px solid #44bba9;/*左線*/
 color: #112782;/*文字色*/
background: #eaf3ff;
border-bottom: solid 3px #1a88b3;/*下線*/
padding:0.7em 0.6em 0.7em 0.6em;
margin-bottom: 1.5em !important;
margin-top: 2.3em;
  border-top: none;
border-right: none;
}



/* 見出し3 */
.article h3 {
font-size: 20px !important;/*文字のサイズ*/
border-left: 8px solid #d65636;/*左線*/
 color: #d65636;/*文字色*/
padding:0.2em 0.6em 0.01em 0.6em;
margin-bottom: 1.5em !important;
margin-top: 2.3em;
  border-top: none;
border-right: none;
border-bottom: none;
}



/* 見出し4 */
.article h4{
line-height:1.4;
font-size:19px;
border:none;
color:#333333;
border-radius:2px;
border-left:8px solid #8b968d;/*H3の色の変更はこちら*/
padding: 0.07em 0.8em;
margin-top: 3.3em;
margin-bottom: 18px;
}





/************************************
** アイコンボックス
************************************/
.wp-block-cocoon-blocks-icon-box{
	border-radius: 15px; /* 角を四角く */
	padding: 1.0em 1.5em 1.2em 4em; /* 内側余白（上・右・下・左） */
	border-width: 0;/* 外枠なし */
}

.wp-block-cocoon-blocks-icon-box::before {
	font-size: 1.3em; /* アイコンのフォントサイズ */
border-right: 0; /* 右側のボーダーなし */
}

/*モバイル調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1em 1.5em 1em 3.5em;/* モバイルでの内側余白 */
	}
	
	/* モバイルでのアイコンの位置調整*/
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;/*縦の中央揃え*/
		left: 5px;
		margin-left: 0;
		width: 35px;
	}
	
	.wp-block-cocoon-blocks-icon-box::before{
		border-right: 1px solid;/*アイコン横の線を追加*/
	}
}
/*アイコンボックス（プロフィール）のカスタマイズ*/
.profile-box  {
  background:rgba(230,251,240);  /*背景色の変更（※RGBA形式で透明度を設定）*/
 
  
}
.profile-box:before {
  color:#cea2dd;  /*アイコンの色を変更*/
  border-right: none;  /*アイコンと文章の間の線をなくす*/
}










/*リストの数字*/
ol li{
list-style-type:decimal;
}
ol li::marker {
color:#ff6c26;
font-weight: bold;
}


/*リストの点*/
/****************
リストドットの色
****************/
ul li{
}
ul li::marker {
color:#ff6c26;
font-size: 16px;
font-weight: bold; /*太字*/
}

    



/****************
タブ見出しボックス
****************/
.tab-caption-box {
	position: relative;/* 配置 */
max-width: 700px; /* ボックスの横幅 */
	line-height: 35px;
	margin: 0 auto;
}




.tab-caption-box-content {
	padding: 2.4em 1.5em 2.0em;/* ボックスの内側余白 */
	margin-top: 5em;
	border-radius:  8px 8px 8px 8px !important;/* ボックスの丸み */
	border-width: 0px;/* 枠線の太さ */
}



.tab-caption-box-label {
	font-size: 16px;
	padding: 0 1em;/* 見出しの内側余白 見出し付き囲み枠 */
	border-radius: 6px;/* 見出しの丸み */
	position: absolute;/* 配置 */
	top: -14px;
	left: 30px;
}



	

/*リストの行間*/
ul li, ol li {
padding-top:4px;
padding-bottom:5px;
line-height:1.9;}



/*---------------------------------
ボックス（白抜き）の枠の太さを変える
--------------------------------*/
.blank-box {border-width: 1px;
line-height:1.8;
font-size: 16px;/*文字の大きさ*/
}


/*ラベルボックスのカスタマイズ*/
.label-box-content{
padding: 0.9em 1.8em 1.1em 1.0em;/* ボックスの内側余白 */
border: 1px solid #D9C9C9;  /*線の種類、太さ、色*/
border-radius: 0px;  /*角の丸みをなくす*/

}


/* ブログカードのタイトル文字色 */
.blogcard-title {
color: #5e95f0; /*文字色*/
line-height: 1.5;/*行間*/
font-size: 1.0em;/*文字の大きさ*/
}
/* ブログカードカスタマイズ */
.blogcard{
padding: 1.3em 1.5em 0.3em 1.5em; 
}
/* ブログカードラベル */
.blogcard-type .blogcard-label{
  background-color:#ad8cc1;
border-radius: 10px;
}

/* 内部ブログカードのURLを非表示 */
.internal-blogcard-site {
    display: none;
}

/* 枠線を変える*/
.blogcard{
	border: 1px solid #ad8cc1 !important
}

/* ブログカードの説明文大きさ */
.blogcard-snippet {
color: #8f8f8f;
line-height: 1.7;
font-size: 0.9em;
}



/* 引用 */
blockquote {
    background-color: #ffffff;
    border: 1px solid #ccc;
}

blockquote::before, 
blockquote::after {
    color: #C8C8C8;
} 

/* ブログカードホバー時 */
.main .blogcard { /*ブログカード*/
margin-top: 3em;
}
.blogcard-wrap:hover{
	background: transparent;
	opacity: 0.5;
}


/* スマホのテーブル表の文字だけを大きく */
@media screen and (max-width: 480px){
table td, table th{
font-size:14px !important;
}
}



/*マーカー*/






/*吹き出しアイコンサイズ*/
.speech-person {
width: 70px;
min-width: 70px;
margin-left: 8px;
margin-right: 8px;
}

/*吹き出しを中央に寄せる*/
@media screen and (min-width: 835px){
.sbp-l,.sbp-r{
margin-right: 5em;
margin-left: 5em;
}
}

@media screen and (max-width: 767px) {
  table {
    line-height: 1.7; /* 調整したい行間 */
  }
}

/*YouTube動画の中央配置*/
.video-container{
margin: 0px auto;
}

.cat-label {display:none}


/* 目次
-------------------------------------------------- */
#main .entry-content .toc {
  /* 目次全体デザイン */
  background: #F9F9F9;
  /* 目次全体の背景色を変える場合はここを変更 */
  border: none;
  display: block;
  border-top: 5px solid;
  border-top-color: #ff9f67;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
}

#main .entry-content .toc .toc-title {
  /* 目次の文字指定 */
  text-align: left;
  margin: 0 20px 20px -10px;
  padding-left: -20px;
  font-size: 23px;
  font-weight: 700;
  color: #ff9f67;
  /* 目次の文字色を変える場合はここを変更 */
}

#main .entry-content .toc .toc-title:before {
  /* 目次のアイコン設定 */
  top: 0;
  left: -45px;
  width: 50px;
  height: 50px;
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  /* アイコンを変える場合はここを変更 */
  font-size: 20px;
  margin-right: 5px;
  color: #FFF;
  /* アイコンの色を変える場合はここを変更 */
  background-color: #ff9f67;
  /* アイコンの背景色を変える場合はここを変更 */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 14px;
}

#main .entry-content .toc .toc-content ol {
  /* 目次のデザインカスタマイズ */
  padding: 0 0.5em;
  position: relative;
}

#main .entry-content .toc .toc-content ol li {
  line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none !important;
}

#main .entry-content .toc .toc-content ol li:before {
  /* 目次の各節の先頭にあるアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #ff9f67;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}

#main .entry-content .toc .toc-content ol li:last-of-type {
  border-bottom: none;
}

#main .entry-content .toc .toc-content .toc-list li {
  font-weight: 700;
  /* h2のみ太文字に */
}

#main .entry-content .toc .toc-content .toc-list li li {
  font-weight: normal;
  /* h3以降の文字サイズを普通に */
}
/* 目次内の見出しリンクを青にする */
#main .entry-content .toc .toc-content ol li a {
  color: #3f7ade;     /* 青色（例） */
  text-decoration: none;
}

/* ホバー時に少しまったり色を変える（お好みで） */
#main .entry-content .toc .toc-content ol li a:hover {
  color: #c86104;
  text-decoration: underline;
}






/* ヘッダーを消す */
@media screen and (max-width: 768px) {
	.single #header-container {
		display: none;
	}
}

/* 付箋ボックスの赤色変更 */
.blank-box.sticky.st-red {
  border-color: #da5883;
  background-color: #fdf2fd;
}



/* サイドバープロフィール画像をFlexboxで完全中央 */
.sidebar .author-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.sidebar .author-box .author-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.sidebar .author-box .author-thumb img {
width: 240px !important;
height: 240px !important;
max-width: 240px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}