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


/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}

.article h2, .article h3, .article h4, .article h5, .article h6 {
line-height : 1.5;
font-size: 22px;
}

.article h2{
	margin-top: 4em;
}
.article h3{
	margin-top: 3em;
}
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
	margin-bottom: 1.4em;
}

.article h2 {
	position: relative;
	padding: 16px 25px 16px 25px;
	border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
	border-bottom: 4px solid #F7DB70;
	border-right: 4px solid #F7DB70;
	background: #75CCE8;
	font-size: 22px;
	color: #fff;
}


.article h3:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 5px;
	left: 0;
	background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, #75CCE8 3px, #75CCE8 6px, white 6px, white 9px, #F7DB70 9px, #F7DB70 12px);
	background: repeating-linear-gradient(135deg, #fff, #fff 3px, #75CCE8 3px, #75CCE8 6px, white 6px, white 9px, #F7DB70 9px, #F7DB70 12px);
	bottom: -5px;
	font-size: 24px;
}

h4 {
	--baloon-color:#D6A3DC;
	position: relative;
	padding: 1rem 2rem;
	background: var(--baloon-color);
	color: #fff;
}
h4:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	bottom: -10px;
	left: 1.5em;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: var(--baloon-color) transparent transparent transparent;
}


.article h5 {
	border-bottom: none; /* Cocoon親テーマCSSリセットのため */
	margin: 1.5em 0 1em;
	padding: 0.25em 0.5em; /* 上下 左右の余白 */
	border-left: solid 8px #D6A3DC;
}



/*中央に丸い飾り*/
h6{
	position: relative;
	text-align:center;
       color:#333;/*文字色（黒）*/  
}

h6:before {
	content: '';
	position: absolute;
	border-bottom: 10px dotted #75CCE8;
	width: 50px;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}


/*****SWELL目次風*****/
.toc{
       border:none;/*目次枠線リセット*/
}

.toc{
	--border-color-1:#fafafa; /*ストライプの色*/
	--border-color-2:#ddd;/*上下枠線の色*/
	margin: 2em auto;
	padding:2em;/*内側余白*/
	background:linear-gradient(-45deg,transparent 25%,var(--border-color-1) 25%,var(--border-color-1) 50%,transparent 50%,transparent 75%,var(--border-color-1) 75%,var(--border-color-1));
	background-size: 4px 4px;
	border-bottom: 4px double var(--border-color-2);
	border-top: 4px double var(--border-color-2);
	background-clip: padding-box;
}





/* Liquid speech balloonの余白サイズを調整 */
.liquid-speech-balloon-text p{
  margin-bottom: inherit;
}
/* Liquid speech balloonの余白サイズを調整 */	

/************************************
** マーカーの色
************************************/
 
.marker { /*黄色マーカー*/
 background-color: #F7DB70;
}
.marker-red { /*赤色マーカー*/
 background-color: #D6A3DC;
}
.marker-blue { /*青色マーカー*/
 background-color: #A5DEE5;
}
.marker-under { /*黄色アンダーラインマーカー*/
 background: linear-gradient(transparent 70%, #F7DB70 70%);
}
.marker-under-red { /*赤色アンダーラインマーカー*/
 background: linear-gradient(transparent 70%, #D6A3DC 70%);
}
.marker-under-blue { /*青色アンダーラインマーカー*/
 background: linear-gradient(transparent 80%, #A5DEE5 80%);
}

/****************
タブ見出しボックス
****************/
.tab-caption-box-label{ 
	padding: 6px 16px; /*タブ内側余白*/
	font-size: 16px; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px;  /*タブ角丸*/
}

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

/* サイドバー全体 */

.sidebar{
	background:transparent;
	font-size: 14px;
}

/* プロフィール全体 */
.nwa .author-box{
	border: none;
	padding: 0 20px;
}

/* アイコン */
.nwa .author-box .author-thumb{
	width: 120px;
}


/* 下側 */
.nwa .author-box .author-content{
	padding: 1em 0;
}


/* 名前 */
.author-box .author-name{
	margin-bottom: 1em;
}
.author-box .author-content .author-name a{
	font-size: 1.2em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.2em; /* 字間を広く */
}
.author-name a{
text-decoration:none;
color:#D6A3DC; /*文字色*/
}
.author-name a:hover{
color:#333333; /*ホバー色*/
}

/* プロフィール文 */
.author-description{
	margin-bottom: 16px;
}
.author-description p{
	margin: 0 0 0.5em 0;
	text-align: left;
	line-height: 1.5;
}

/************************************
****　目次
************************************/
.toc-title{
font-weight:bold;
}
.toc-title::after {
color:#337ab7;
}

.toc{
 background-color: #fff;
 border: 3px double #c1c1c1;
}

.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f144";
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #D6A3DC;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}


/*リスト*/
.nomadList8 {
  position: relative;
  margin: 15px 0;
  padding: 1.5em 3.2em;
  color: #75CCE8;
  border-top: solid 2px #75CCE8;
  border-bottom: solid 2px #75CCE8;
  max-width: 100% !important;
  width: 100% !important;
}
.nomadList8:before,
.nomadList8:after {
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: #323232;
}
.nomadList8:before {left: 10px;}
.nomadList8:after {right: 10px;}
.nomadList8 ul {
  margin: 0;
  padding: 0;
}
.nomadList8 ul li {
  margin-bottom: 5px;
}

/*マスキングテープ風*/
.box75{
margin: 2em auto;
background-color: #F6EEEC;/*ボックス背景色*/
padding:2.5em 2em 2em;/*ボックス内側余白*/
position:relative;/*配置(ここを基準に)*/
}
.box75 .box-title {
background-image: repeating-linear-gradient(-45deg,#F6EEEC 0, #F6EEEC 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
transform: rotate(-2deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;	/*配置(ここを動かす)*/
top: -15px; /*上から（-10px）移動*/
left: 20px; /*左から(20px)移動*/
}

/*「上寄り」を選んだ時のCSS*/
.article .micro-bottom {
  margin-top: -1.62em;
}