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

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

/*広告ラベル*/
/* Cocoon Ad Label */
.ad-area .ad-label {
  font-size: 80% !important;
}

/*カルーセルのデザイン*/
.carousel .carousel-in {
  margin-top: 30px; /*上マージン調整*/
  background-color: #f4f4f4; /*カルーセル全体背景色*/
}
/*カルーセルのカテゴリラベル非表示*/
.carousel .cat-label {
	display: none;
}

/*ホーム画面　カテゴリータイトル表示方法変更*/

.list-title-in{
	font-size: 18px;
	letter-spacing: 2px;
	color:#494949;
}

.list-title-in:before, .list-title-in:after{
	width: 60px;
	height: 3px;
	background-color: #494949; /*ラインの色*/
}

/*ホーム画面　「もっと見る」表示方法変更*/
.list-more-button{
	color: #FECD16;
	border:solid 2px #FECD16;
}
a.list-more-button:hover{
	background-color: #FECD16;
	color: #fff;
}

/*サイドバープロフィール*/
/*枠線*/
.author-box {
  border: 0px;
}
/* 名前 */
.author-box .author-name {
	margin-bottom: 1em;
}
.author-box .author-content .author-name a{
	color: #303247; /* リンク色にしない */
	font-size: 1em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.2em; /* 字間を広く */
}
/* プロフィール文 */
.author-description{
	margin-bottom: 16px;
	font-size: 14px;
}
.author-description p{
	margin: 0 0 0.5em 0;
	text-align: left;
	line-height: 1.5;
}

/* SNSボタン */
.author-follows{
	padding: 12px 0;
	background-color: #FECD16;
}
.author-follows::before{
	content: '＼Follow Me／';
	color: #fff;
	letter-spacing: 0.1em; /* 字間を広く */
}
.author-box .sns-follow-buttons a.follow-button{
	width: 40px;
	height: 40px;
	margin: 6px 10px 2px 2px;
	border-radius: 20px;
	color: #fff;
	border-color: #fff;
	font-size: 24px;
	line-height: 1.6;
}
.author-box a.follow-button span::before {
	font-size: 22px;
}

/* SNSボタン マウスオーバーしたとき */
.author-box .sns-follow-buttons a.follow-button:hover{
	background-color: transparent;
	opacity: 0.6; /* 薄く */
	transform: scale(1.1); /* 1.1倍の大きさに */
}

/*サイドバーの見出しの背景色と文字色を変更する*/
.sidebar h3 {
	background: none;
	font-size: 16px;
	color:#FECD16;
	letter-spacing: 2px;
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 0;
	text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 28%; /*ラインの長さ*/
	border-top: 3px solid #FECD16; /*ラインの色*/
}
.sidebar h3::before {
	left: 0;
}
.sidebar h3::after {
	right: 0;
}

.widget-sidebar ul li a {
font-size: 0.9em;
}

/*カード開始*/
/*Cocoonのcat-label（カテゴリラベル）の位置と文字のカスタマイズ*/
.cat-label {
	top: 4%;
	left: 2.5%;
	line-height: 1.8;
	font-size: 0.67em;
	font-weight: 500;
	padding: 1px 10px;
	background-color: rgba(51, 51, 51, 0.5);
	border: 0;
	border-radius: 30px;
}
/*カードとカードの横の間*/
@media screen and (min-width: 481px) {
	.ect-vertical-card .entry-card-wrap {
		width: 49%;
	}
}
/*カードとカードの縦の間*/
.ect-vertical-card .entry-card-wrap {
	margin-bottom: 18px;
}

/*カードの影*/
.entry-card-wrap {
	box-shadow: 0 0 5px 0 rgba(0,0,0,.1), 0 3px 5px 0 rgba(0,0,0,.2);
}
/*カード終了*/

/*サイドバー検索窓*/
.search-box .search-edit {
font-size: 14px;
padding: 5px 20px;
border-color: #FECD16; /*枠の色*/
border-radius: 30px; /*角の丸さ*/
height: 50px;
}
.search-box .search-submit {
top: 0;
right: 0px;
height: 100%;
width: 60px;
color: #fff; /*ボタンの色*/
background-color: #FECD16; /*ボタンの背景色*/
border-radius: 0 30px 30px 0; /*丸さボタン側*/
}
.search-box input::placeholder {
color: #FECD16; /*テキスト色*/
}

/*サイドバー新着記事　日付表示*/
.new-entry-card-date {
	display: block;
	padding-top: 2em;
	text-align: right;
	position: absolute;
	/*right: 0;*/
	bottom: 0;
}

.new-entry-card-post-date::before{ /*投稿日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f017"; /*fa-clockアイコン*/
	padding-right: 4px; /*右余白*/
	font-weight: 400; /*アイコンの太さ*/
}

.new-entry-card-update-date::before{ /*更新日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f1da"; /*fa-historyアイコン*/
	padding-right: 4px; /*右余白*/
	font-weight: 900; /*アイコンの太さ*/
}

/** サイドカテゴリ開始 **/
.widget_categories ul li a,.widget_nav_menu ul li a,
.widget_archive ul li a {
    display: block;
    font-size: 85%;
    margin: 0;
    position: relative;
  background-image : linear-gradient(to right, #ededed, #ededed 2px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
  background-size: 4px 2px;          /* グラデーションの幅・高さを指定 */
  background-position: left bottom;  /* 背景の開始位置を指定 */
  background-repeat: repeat-x;       /* 横向きにのみ繰り返す */
}

/*親カテゴリーのアイコン*/
.widget_categories ul li a::before,.widget_nav_menu ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f138"; /* FontAwesomeのユニコード */ 
color: #C3E4EC; /* アイコンの色 */
padding-right: 6px; 
font-weight: 900; /*アイコンの太さ*/
}
/*子カテゴリーのアイコン*/
.widget_categories ul li ul li a::before,.widget_nav_menu ul li ul li a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f105"; /* FontAwesomeのユニコード */
  color: #C3E4EC; /* アイコンの色 */
  padding-right: 6px;
	font-weight: 900; /*アイコンの太さ*/
}

.widget_archive ul li a .post-count,
.widget_categories ul li a .post-count,
.widget_nav_menu ul li a .post-count{
    float: initial;
    display: initial;
}

.widget_archive ul li a .post-count::after, 
.widget_categories ul li a .post-count::after, 
.widget_nav_menu ul li a .post-count::after {
    content: ')';
}
.widget_archive ul li a .post-count::before,
.widget_categories ul li a .post-count::before,
.widget_nav_menu ul li a .post-count::before{
    content: '(';
}
/** サイドカテゴリ終了 **/

/*サイドバー目次*/
.sidebar #toc-2 h3.widget-sidebar-scroll-title.widget-title{
	background: #FECD16;
	color:#fff;
	text-align: center;
	box-shadow: 0px 0px 0px 5px #FECD16;
	padding: 0.5em 0.5em;
	font-size: 17px;
}
.sidebar #toc-2 h3.widget-sidebar-scroll-title.widget-title::before, .sidebar #toc-2 h3.widget-sidebar-scroll-title.widget-title::after {
	content: none;
	position: none;
	top: none;
	width: none;
	border-top: none; /*ラインの色*/
}
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 390px; /* 目次の高さ上限 */
	padding-left: 1ex;
	font-size: 14px;
}
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px; /* スクロールバーの横幅 */
}

/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
}


/** サイドアーカイブ開始 **/
.widget_archive ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f138"; /* FontAwesomeのユニコード */ 
color: #C3E4EC; /* アイコンの色 */
padding-right: 6px; 
font-weight: 900; /*アイコンの太さ*/
}
/** サイドアーカイブ終了 **/

/************************************
** 本文マーカーの色
************************************/

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

/**ページ送りナビ開始**/
/**ページ送りナビデザイン**/
.pager-post-navi a {
	color: #494949;/*文字色*/
	line-height: 1;/*行間*/
	font-size: 1em;/*文字の大きさ*/
}

/* ページ送りナビの左右を入れ替える(Cocoon ver.2～) */
.pager-post-navi a.prev-post {
    flex-direction: row-reverse;
    padding:10px 5px 10px 10px;
}
.pager-post-navi a.next-post {
    flex-direction: row;
    padding:10px 10px 10px 5px;
}
.pager-post-navi a.next-post .iconfont:before {
	content: '\f053';
}
.pager-post-navi a.prev-post .iconfont:before {
	content: '\f054';
}
.pager-post-navi a.next-post .next-post-title {
	margin: 0 0 0 10px;
}
.pager-post-navi a.prev-post .prev-post-title {
	margin: 0 10px 0 0;
}
@media screen and (min-width: 481px) {
    .pager-post-navi.post-navi-square {
        flex-direction: row-reverse;
    }
    .post-navi-square.post-navi-border a:last-child {
        border-left-width: 1px;
    }
    .post-navi-square.post-navi-border a:first-child {
        border-left-width: 0;
    }
}

/* ページ送りナビの上下を入れ替える */
.pager-post-navi.post-navi-default {
    flex-direction: column-reverse;
}
.post-navi-default.post-navi-border a.prev-post {
    border-top-width: 0;
}
.post-navi-default.post-navi-border a:only-child,
.post-navi-default.post-navi-border a.next-post {
    border-top-width: 1px;
}
@media screen and (max-width: 480px) {
    .pager-post-navi.post-navi-square {
        flex-direction: column-reverse;
    }
    .post-navi-square.post-navi-border a:first-child {
        border-top-width: 0;
    }
    .post-navi-square.post-navi-border a:last-child {
        border-top-width: 1px;
    }
}
/**ページ送りナビ終了**/

/*次のページ非表示*/
.pagination-next-link {
  display: none;
}

/*ページ番号設定開始*/
.page-numbers {
	color: #FECD16;
	border: 1px solid #FECD16;
	border-radius: 50%;
}
.pagination .current {
	background-color: #FECD16;
	color: #fff;
	border-color: #FECD16;
}
.page-numbers.dots {
	opacity: 1;
	border: 1px solid #FECD16;
	background: none;
}
.pagination a:hover {
	background-color: #FECD16;
	color: #fff;
}

/*ページ番号設定終了*/

#navi-footer li {
  border: none;
}

#navi-footer ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f105"; /* FontAwesomeのユニコード */ 
color: #ffffff; /* アイコンの色 */
padding-right: 6px; 
font-weight: 900; /*アイコンの太さ*/
}

/*SNSボタンデザイン変更*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}
/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #FECD16; /*文字色*/
	margin-bottom: 1rem;
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 20px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #FECD16; /*文字色*/
	margin-bottom: 1rem;
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 20px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/** マウスオーバー背景色設定開始 **/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
/*.pagination a:hover,*/
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
/*.mobile-menu-buttons .menu-button:hover,*/
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
	background-color: #ffffff; /*背景色*/
	transition: all 0.5s ease;
	opacity: 0.5 ;
}
/** マウスオーバー背景色設定終了 **/

/*記事　目次デザイン変更開始*/
.toc {
  padding: 0px;
  border: 1.2px #63B8CD solid ;
 }

.toc-title {
  position: relative;
  padding: 10px 0;
  background: #63B8CD;
  color: #fff;
  font-weight: bold;
 }

.toc .toc-content {
	padding: 15px 25px;
 }

/*記事　目次デザイン変更終了*/

/* 見出しリセット */
/* 見出し2 */
.article h2{
	background:none;
	padding: 0;
}

/*記事　見出し２デザイン変更開始*/
.article h2 {
	background: #63B8CD;
	box-shadow: 0px 0px 0px 5px #63B8CD;
	border: dashed 1px white;
	padding: 0.5em 0.5em;
}
/*記事　見出し２デザイン変更終了*/

/* 見出しリセット */
/* 見出し6 */
.article h6{
	background:none;
	padding: 0;
}

/*記事　見出し6デザイン変更開始*/
.article h6 {
	font-size: 22px !important;/*文字のサイズ*/
 	border-left: 7px solid #63B8CD;/*左線*/
 	padding: .5em .7em;/*余白*/
  	margin-bottom: 15px;
  	border-top: none;
  	border-bottom: none;
}
/*記事　見出し6デザイン変更終了*/

/*記事　タブ見出しボックスデザイン変更開始*/
.tab-caption-box-content {
	position: relative;  /*配置に関するもの（ここを基準に）*/
	top: 1px; /*上から(1px）移動*/
	padding: 25px 10px; /*ボックス内側余白*/
}
/*記事　タブ見出しボックスデザイン変更終了*/

/*記事内　文字色　指定*/
.red{
color: #EA7547;
}
.blue{
color: #63B8CD;
}
.green{
color: #FECD16;
}

/*記事内　太文字色　指定*/
.bold-red{
color: #EA7547;
}
.bold-blue{
color: #63B8CD;
}
.bold-green{
color: #FECD16;
}

/*記事内　マーカー色　指定*/
.marker-red{
background-color: #FBCCBB;
}
.marker-blue{
background-color: #C3E4EC;
}
.marker{
background-color: #FCE488;
}

/*記事内　アンダーライン色　指定*/
.marker-under-red{
background: linear-gradient(transparent 70%, #FBCCBB 70%);
}
.marker-under-blue{
background: linear-gradient(transparent 70%, #C3E4EC 70%);
}
.marker-under{
background: linear-gradient(transparent 70%, #FCE488 70%);
}

/*記事下　CTA-BOXデザイン変更*/
.cta-box {
border: solid 1px #63B8CD;
border-radius: 8px;
background-color: #fff;
color:#444;
}


/*モバイルデザイン変更*/
/*メニュー色変更*/
.mobile-menu-buttons {
background: #63B8CD;
color: white;
}

.mobile-menu-buttons .menu-button > a {
color: white;
}

/* モバイルスライドインメニュー */
.fa-times {
color: #000057;/* 閉じるボタンの色 */
font-size: 0.8em;
}
ul.menu-drawer:before {
background-color: #000057;/* Menu背景色 */
font-size: 1.2em;
}
ul.menu-drawer:after {
background-color: #fff;
}
.menu-drawer a {
color: #333 !important;/* 文字色 */
font-size: 1.2em;
font-weight: 900;
}
.menu-drawer a:hover {
background-color: #eff8f9;
}
.menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab {
margin-right: 3px;
}
.sub-menu li {
font-size: 0.8em;
}

/************************************
** スマホ追尾目次
************************************/
#mobile-toc-widget-wrap .menu-trigger,
#mobile-toc-widget-wrap .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
#mobile-toc-widget-wrap .menu-trigger {
	position: relative;
	width: 25px;
	height: 35px;
}
#mobile-toc-widget-wrap .menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff; /* 三本線色 */
	border-radius: 4px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(1) {
	top: 13px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(2) {
	top: 20px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(3) {
	top: 27px;
}
#mobile-toc-widget-wrap .menu-trigger.active {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
	top:0;
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(2) {
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(3) {
	opacity: 0;
}
#mobile-toc-widget-wrap{
	position: fixed;
	bottom: 50px;
	right: 20px;
	margin: 0;
	padding: 0;
	z-index:5;
	counter-reset: mobile-toc;
}
#mobile-toc-widget-wrap label .mobile-toc-button {
	width: 58px;
	height: 58px;
	border-radius:50%;
	background: #63B8CD; /* ボタン色 */
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
	transition: ease-out 0.3s;
	text-align:center;
	position:relative;
	z-index: 3;
}
#mobile-toc-widget-wrap label .mobile-toc-button .mobile-toc-button-title {
	color: #fff; /* ボタン文字色 */
	font-size: 0.65em;
	letter-spacing: 0;
	position: absolute;
	bottom: 7px;
	left: 0;
	right: 0;
	margin: auto;
}
#mobile-toc-widget-wrap label:hover {
	background: #efefef;
}
#mobile-toc-widget-wrap input {
	display: none;
}
#mobile-toc-widget-wrap .mobile-toc-show {
	display:none;
}
#mobile-toc-widget-wrap input:checked ~ .mobile-toc-show {
	background:#fff;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2.5em 1em;
	opacity:0.97; /* 20190924数値変更 */
	position:fixed;
	width:100%;
	height:100%;
	display:block;
	animation: 0.5s fade-in;
	-webkit-animation: 0.5s fade-in;
	overflow-y:scroll;
}
@-webkit-keyframes fadeIn { 
	0% {display: none;opacity: 0;}
	1% {display: block;opacity: 0;}
	100% {display: block;opacity: 0.93;}
}
@keyframes fade-in {
	0% {display: none;opacity: 0;}
	1% {display: block;opacity: 0;}
	100% {display: block;opacity: 0.93;}
}
#mobile-toc-widget-wrap .widgettitle{
	text-align: center;
	margin: 0 0 1em; /* 20190924数値変更 */
	color: #63B8CD; /* 目次名の色 */
	font-size: 1.1em;
	letter-spacing:2px;
	font-weight:600; /* 20190924追記 */
}

#mobile-toc-widget-wrap .mobile-toc-show .toc{
	border:none;
	margin: 0 !important;
	padding: 0 !important;
}
#mobile-toc-widget-wrap .toc .toc-list > li {
	list-style-type: none !important;
	position: relative;
	margin-left: 13px;
	margin-right: 25px;
	padding-left: 32px;
	margin-bottom: 15px;
	padding-bottom: 0px;
	font-size: 1.1em;
	line-height: 1.8;
}
#mobile-toc-widget-wrap .toc a {
	font-size: 0.8em;
	font-weight:600;/* 20190924追記 */
}
#mobile-toc-widget-wrap .toc-list{
	padding:0 !important;
}
#mobile-toc-widget-wrap .toc-list > li:before{
	counter-increment: mobile-toc;
	content: counter(mobile-toc);
	position: absolute;
	left: 5px;
	top: 5px;
	background: none;
	font-size: 0.8em;
	color: #63B8CD; /* 数字の色 */
}
#mobile-toc-widget-wrap .toc_widget_list > li ol {
	margin-top: 5px;
	padding-left: 20px;
}
#mobile-toc-widget-wrap .toc-list ol{
	list-style:none;
}
#mobile-toc-widget-wrap .toc-list > li > ol > li a {
	position: relative;
	text-decoration: none !important;
	font-weight:500;/* 20190924追記 */
}
#mobile-toc-widget-wrap .toc-list > li ol li a:before {
	position: absolute;
	content: "・";
	font-size: 1.4em;
	left: -20px;
	top: -10px;
	color: #63B8CD; /* 点の色 */
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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