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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*　見出しをリセット　*/
.article h2 {
padding: 0;
background: none;
}
.article h3 {
border: none;
padding: 0;
}
.article h4 {
border: none;
padding: 0;
}
.article h5 {
border: none;
padding: 0;
}
.article h6 {
border: none;
padding: 0;
}

/************************************
** H2~H5
************************************/
.article h2, .article h3, .article h4, .article h5, .article h6{
padding: 1.5em;
margin: 0;
font-size: medium;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: none;
position:relative;
}

.article h2 {
   position: relative;
   background-color:#c5b7a5;
   color:#fff;
}

.article h2:before,
.article h2:after {
   position: absolute;
   left: 0;
   width: 100%;
   content: '';
   border-top: 1px solid #fff; /*ライン：太さ・実線・色 */
}

.article h2:before {
   top: 2px;
}

.article h2:after {
   bottom: 2px;
}

.article h3 {
   position: relative;
   padding: 0.3em 0; /* 内側余白調整 */
   border-bottom: solid 3px #e3e3e3; /* 下線１：実線・太さ・色 */
   color:#595857; /* 文字色（黒）*/
}

.article h3:after{
   position: absolute;
   content: '';
   display: block;
   border-bottom: solid 3px #c5b7a5; /* 下線２：実線・太さ・色 */
   bottom:-3px;
   width:30%; /* 下線２の幅*/
}

.article h4 {
  padding: 1rem 2rem;
  border-left: 6px double #000;
}

.article h5{
background: #f9fff4;/* 背景色 */
font-size: 17px;
font-weight:normal;
line-height:2;
color:#333333;
border-radius: 4px;
padding: 1.5em;
margin-left:0 auto;
border:2px dotted;
border-color:#90C31F; /* 線の色 */
margin-top:20px;
margin-bottom: 20px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.1);
}
@media (max-width:480px){/*スマホ表示*/
.article h2{
font-size:18px;
padding:1.5em 1em 1.5em 0.5em;
}
.article h3{
font-weight:bold;
margin-top:3em;
margin-bottom:0em;
font-size:17px!important;
}
.article h4, .article h5, .article h6{
font-size:17px!important;
}

font-size: 1.5em; /* 文字サイズ */
background-color: #ebebeb;/* 背景色 */
padding: 10px;
border-left: solid 10px #008000; /* 左側に実線・色*/
}

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

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

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

.widget h3,
.related-entry-heading,
.comment-title{
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}	

.sidebar h3{
  background-color:#ffffff;
  color:#2b2b2b;/*文字の色を変える*/
  padding:16px 10px;
  margin:16px 0;
}

.sidebar h3 {
  border-bottom:2px solid #2b2b2b;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  text-align:center;
  padding:10px 0 5px 3px
}
	
div.sidebar {
	padding: 20px;
}	

.sidebar h3 {
	background:transparent; /* Cocoon親テーマCSSリセットのため */
	padding: 8px 0px;
	border-bottom: 2px #2b2b2b dotted; /* ドット下線追加 */
	letter-spacing: 0.2em; /* 字間を広げる */
}	

.author-box .sns-follow-buttons a.follow-button {
  background-color: #fff;
  color: black;
  border: 0px;
}
.author-box {
  border: 0px;
}
.author-box p {
  margin-top: 0.3em;
  line-height: 1.6;
}
.author-box p a {
  text-decoration: none;
}
.author-box p a:hover {
  text-decoration: underline;
  color: #2b2b2b; /* プロフィールにリンクを貼っている場合, ホバーした際の色指定 */
}
/* スマホサイドバー設定 */
#sidebar .author-box {
  border: none;
  border-radius: 4px;
  margin: 1em 0;
  line-height: 1.4;
  position: relative;
  padding: 1.4% 2% 1.8%;
}
#sidebar .author-thumb {
  float: none;
  width: 100%;
  margin: 9px auto 0;
  height: 0;
  padding-top: 75px;
  position: relative;
}
#sidebar .author-thumb img {
  border: 3px dashed #2b2b2b;
  width: 20%;
  padding: 6px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
}
#sidebar .author-content {
  margin-top: 16%;
  font-size: 0.9em;
}

.box3-pink {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #2b2b2b;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-pink .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #2b2b2b; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-pink p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

.entry-card-title {
 font-size: 16px;
}

.ect-entry-card img{border-radius:8px;}

.entry-card-wrap{
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

.site-name-text{
font-family: 'Outfit', cursive;
font-size: 50px!important;
color:#595857;
}

.tagline {
font-size: 18px!important;
}
@media screen and (max-width: 767px){
.tagline {
font-size: 18px!important;
}
}

/* トップページの「カテゴリごと」のタイトル変更 */
.list-title-in{
	color: #2b2b2b;/*文字の色*/
	font-size: 20px;/*文字の大きさ*/
}

.list-title-in:before, .list-title-in:after {
	background-color: #2b2b2b;/*線の色*/
	top: 40%;/*線の高さ*/
}

/************************
/ SNSボタン
/************************/
#container .sns-buttons a{
background-color: #ffffff; /*背景色*/
color: #2b2b2b; /*文字色*/
border: 0;
}

/************************
/ SNSフォローボタン
/************************/
#container .sns-follow .sns-buttons a{
font-size:22px; /*文字サイズ*/
border: 0;
border-radius: 50%; /*丸くする*/
width:40px;
height:40px;
}

#appeal {
    height: calc(100vw * calc(900 / 1600));
}
/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){
#appeal {
height: 100vw; 
}
	
#recommended .navi-entry-card-thumb img{
width:170px;
height:120px;
}

#recommended .navi-entry-card-thumb img{
border-radius:10px; /*角丸め*/
}

/* フッターモバイルボタン透明背景色（スマホ） */
.mobile-menu-buttons {
background: rgba(225,225,225,0.7); /* RGBA形式で半透明にする */
}

/************************************
** マーカーの色
************************************/

.marker { /*黄色マーカー*/
 background-color: #eabd00;
}
.marker-red { /*赤色マーカー*/
 background-color: #ff8d82;
}
.marker-blue { /*青色マーカー*/
  background-color: #cfe6d7;
}
.marker-under { /*黄色アンダーラインマーカー*/
 background: linear-gradient(transparent 70%, #f6bfbc 80%);
}
.marker-under-red { /*赤色アンダーラインマーカー*/
 background: linear-gradient(transparent 70%, #92b5a9 90%);
}
.marker-under-blue { /*青色アンダーラインマーカー*/
 background: linear-gradient(transparent 70%, #f8e58c 90%);
}
	
/**目次**/
.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #ffffff solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #c5b7a5;
  color: #ffffff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #ffffff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #708090;
  margin-left: -10px;
}
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
}
.article .toc-list > li li {
  list-style: none;
}
	
/*---------------------------------
ボックス（白抜き）の枠の色と太さを変える
--------------------------------*/
.blank-box {border-width: 1px; border-color: #2b2b2b;} /* 枠の太さと灰色の変更 */

.blank-box.bb-yellow {border-color: #FAB162;} /* 黄色 */
.blank-box.bb-red {border-color: #FD8FA3;} /* 赤色 */

.blank-box.bb-blue {border-color: #5FB3F5;} /* 青色 */

.blank-box.bb-green {border-color: #95CE4B;} /* 緑色 */

/*ダーク*/
.dark-box{
background-color: #f3f3f2;
}