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

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

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

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

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

#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 15px; /*アイコンのサイズ*/
	margin: 0 8px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 35px; /*ボタンの横幅*/
	height: 35px; /*ボタンの高さ*/
}

/*SNSシェアボタン*/	
.sns-share-message{	
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}	
.sns-share-buttons {	
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}	
.sns-share-buttons a {	
	border-radius: 50%; /*丸くする*/
	font-size: 15px; /*アイコンのサイズ*/
	margin: 0 8px; /*ボタン同士の間隔*/
}	
#main .sns-share a {	
	width: 35px; /*ボタンの横幅*/
	height: 35px; /*ボタンの高さ*/
}	
	
/*SNSフォローボタン*/	
.sns-follow-message{	
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}	
.sns-follow-buttons {	
	justify-content: center; /*中央寄せ*/
}	
.sns-follow-buttons a {	
	border-radius: 50%; /*丸くする*/
	font-size: 15px; /*アイコンのサイズ*/
	margin: 0 8px; /*ボタン同士の間隔*/
}	
#main .sns-follow a {	
	width: 35px; /*ボタンの横幅*/
	height: 35px; /*ボタンの高さ*/
}	


/*---------------------------------	
背景色はそのままで枠の色だけを変える	
--------------------------------*/	
.toc {	
  border: solid 1px;/*枠線の種類　太さ*/	
  border-color: #68F9F9 #68f96d #FF8DF7 #FBF266;	
  border-radius: 20px;	
}	

/*ボタンデザインブルー*/
a.bt-samp40{
  display: block;
  text-decoration: none;
  height:35px;
  width: 160px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #68F9F9;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
 
a.bt-samp40:hover{
  color: #68F9F9;
  border: dashed 1px #68F9F9;
  background: none;
}
a.bt-samp40:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

/*ボタンデザインピンク*/
a.bt-samp41{
  display: block;
  text-decoration: none;
  height:35px;
  width: 160px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #FF8DF7;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
 
a.bt-samp41:hover{
  color: #FF8DF7;
  border: dashed 1px #FF8DF7;
  background: none;
}
a.bt-samp41:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

/*ボタンデザインイエロー*/
a.bt-samp42{
  display: block;
  text-decoration: none;
  height:35px;
  width: 160px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #FBF266;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
 
a.bt-samp42:hover{
  color: #FBF266;
  border: dashed 1px #FBF266;
  background: none;
}
a.bt-samp42:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

/*ボタンデザイングリーン*/
a.bt-samp43{
  display: block;
  text-decoration: none;
  height:35px;
  width: 160px;
  line-height: 37px;
  text-align: center;
  color: #fff;
  background: #68f96d;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
 
a.bt-samp43:hover{
  color: #68f96d;
  border: dashed 1px #68f96d;
  background: none;
}
a.bt-samp43:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

/*ボタンを横並びにする*/
.menu{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.menu div{
    width: 100%;
    margin: 5px;
    padding: 5px;

}

/*ヘッダーデザイン*/
/* H2 */
.article h2 {
    padding: 0;
    background: none;
}

.article h2 {
  color: black;/*文字色*/
  border: solid 1px ;
  border-color: #68F9F9 #68f96d #FF8DF7 #FBF266;/*線色*/
  padding: 0.5em 1em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

/*サイドバーヘッダーデザイン*/
/* H3 */
.sidebar h3 {
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

.sidebar h3 {
	background: linear-gradient(transparent 98%, #68F9F9 98%);
	padding: 0 0.5em;
}

/* ヘッダーデザイン */
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

.article h3 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

.article h3:before, .article h3:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.article h3:before {
  border-left: solid 1px #FF8DF7;
  border-top: solid 1px #68f96d;
  border-bottom: solid 1px #FBF266;
  left: 0;
}
.article h3:after {
  content: '';
  border-top: solid 1px #FBF266;
  border-right: solid 1px #68F9F9;
  border-bottom: solid 1px #68f96d;
  right: 0;
}

/* ヘッダーデザイン */
/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
padding: 10px 10px 5px;
border-top: solid 1px #68F9F9;/* 上側に実線・色 */
border-bottom: solid 1px #FF8DF7;/* 下側に実線・色*/
}

/*---------------------------------
複数の固定ページの日付を非表示にする、おまじない
--------------------------------*/
.post-2062 .date-tags,
.post-2186 .date-tags,
.post-83 .date-tags,
.post-118 .date-tags {
  display: none;
}


#commentform label{
	display: inline-block;
}

/**********************************
コメント投稿フォームカスタマイズ
**********************************/
/* コメントフォーム */
#commentform textarea, #commentform input{
border: 1px solid #68F9F9; /* 枠線の色 */
border-radius: 0.3em; /*角丸 */
transition: all .2s ease;
font-size: 80%;
}
/* コメントフォーム選択時 */
#commentform textarea:focus, #commentform input:focus{
outline: none;
border: 1px solid #68f96d; /* 枠線の色 */
}
/* 送信ボタン */
#commentform #submit{
background-color: #ffffff; /* 送信ボタンの背景色 */
color: black;
border-radius: 0.5em; /*角丸 */
height: 40px;
width: 20em; /*ボタンの横幅をボタン内の文字数で指定 */
border: 2px solid #68F9F9; /* 枠線の色 */
padding: 0;
line-height: 40px;
vertical-align: middle;
text-align: center;
transition: all .2s ease;
}

/* name,emailの並列化 */
.comment-form-author {
margin: 0px 0px 0px 0px;
float: left;
}
.comment-form-email {
margin: 0px 0px 0px 0px;
float: right;
}
.comment-form-author, .comment-form-email {
width: calc(50% – 5px);
display: inline-block;
}
.comment-form-email+p {
clear: both;
}
/* name,emailの並列化ここまで */

/**********************************
コメントカスタマイズ
**********************************/
/* コメント本文のサイズ・行間調整 */
.st-comment-content p{
line-height: 1.6;
font-size: 0.8em;
color: #222222;
letter-spacing: 0.08em
}
.comment-author{
font-style: normal; /* 斜体の解除 */
}
/* コメントの上下間隔調整 */
.commets-list{
margin: 0px ;
padding: 8px !important;
border-top: 0px solid #555;
border-bottom: 0px solid #555;
}
/* 入れ子コメントの左に点線を表示 */
.commets-list .children{
margin: 0px 10px 50px 10px;
padding: 0px 5px 0px 15px;
border-left: 4px dotted #FF8DF7;
}
.commets-list .comment-body, .commets-list {
margin-bottom: 0.5em; /* コメントの間隔を狭める */
}
#commentform label{
display: inline-block;
}


/* 目次 */
/* H3の先頭の数字を消す */	
.article .toc-list > li li {
  list-style: none;
}

/* 目次 */
/* H3の先頭を・に変更 */	
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #666666;
  position: relative;
  margin-bottom: 2px;
 }

/* 目次 */
/* H3のフォントカラー・大きさ変更 */
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #666666;
  margin-left: -10px;
 }