@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){
/*スマホだけ記事フォントサイズ14pxに指定を上書き*/
.entry-card-title { font-size: 14px;
	}
}
/************************************
** Contact Form 7カスタマイズ
************************************/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
	.inquiry th,.inquiry td {
		display:block!important;
		width:100%!important;
		border-top:none!important;
		-webkit-box-sizing:border-box!important;
		-moz-box-sizing:border-box!important;
		box-sizing:border-box!important;
	}
	.inquiry tr:first-child th{
		border-top:1px solid #d7d7d7!important;
	}
/* 必須・任意のサイズ調整 */
	.inquiry .haveto,.inquiry .any {
		font-size:10px;
	}
}
/*見出し欄*/
.inquiry th{
	text-align:left;
	font-size:14px;
	color:#444;
	padding-right:5px;
	width:30%;
	background:#f7f7f7;
	border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
	font-size:13px;
	border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
	border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
	font-size:8px;
	padding:5px;
	background:#ff7f7f;
	color:#ffffff;
	border-radius:2px;
	margin-right:5px;
	position:relative;
	bottom:1px;
}
/*任意の調整*/
.any{
	font-size:8px;
	padding:5px;
	background:#7f7fff;
	color:#ffffff;
	border-radius:2px;
	margin-right:5px;
	position:relative;
	bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
	display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
	display: block;
	padding:1em 0;
	margin-top:30px;
	width:100%;
	background:#e6b422;
	color:#ffffff;
	font-size:18px;
	font-weight:bold;
	border-radius:2px;
	border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
	background:#e6c35c;
	color:#ffffff;
}
/************************************
** タグの色形変更
************************************/
.tag-link{
	border-radius: 20px;
	padding: 1px 10px;
	background-color: #2d343a;
	border: 2px solid #e6b422;
}
.tagcloud a {
	border-radius: 20px;
	padding: 1px 10px;
	background-color: #2d343a;
	border: 2px solid #e6b422;
    color: #fff;
}
/************************************
**Cocoonのcat-label（カテゴリラベル）のカスタマイズ（全体）
************************************/
.cat-label, .related-entry-card .cat-label{
	padding: 1px 10px;
	opacity: 0.7;
	top: 4%;
	left: 2.5%;
	border: 0;
	border-radius: 30px;
	line-height: 1.8;
	font-size: 0.67em;
	font-weight: 500;
}

/************************************
** ブログカードスニペット
************************************/
/*ブログカード 説明文(スニペット) 非表示 */
.blogcard-snippet {
	display: none;
}
/************************************
** ブログカード続きを読む
************************************/
.blogcard::before{
	position: absolute;
	z-index: 99;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f061"; /*アイコン*/
	bottom: 10px; /*調整OK→カード下端からの位置*/
	right: 100px; /*調整OK→カード右端からの位置*/
	font-size: 16px;
	color: #fff; /*変更OK→アイコン色*/
	text-align: center;
	background-color: #e6b422; /*変更OK→円の背景色*/
	width: 30px;
	height: 30px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #2d363f;
	line-height: 30px;
}
.blogcard::after{
	position: absolute;
	z-index: 1;
	content: "続きを読む"; /*変更OK→表示テキスト*/
	bottom: 10px; /*調整OK→カード下端からの位置*/
	right: 15px; /*調整OK→カード右端からの位置*/
	background-color: #e6b422; /*変更OK→文字の背景色*/
	font-size: 12px;
	color: #fff; /*変更OK→文字色*/
	border-radius: 20px;
	padding-right: 15px;
	padding-left: 30px;
	line-height: 30px;
}
/************************************
** エントリーカード点滅続きを読む
************************************/
@media screen and (min-width:1260px) { /*PCのみ表示*/
	.list .entry-card-wrap.a-wrap:hover:before,
	.list .related-entry-card-wrap.a-wrap:hover:before { /*エントリーカードホバー時に【続きを読む】を表示*/
		position: fixed;
		width: 120px; /*横サイズ*/
		height: 25px; /*縦サイズ*/
		transform: translate(0,0);
		right: 15px; /*位置決め*/
		top: 355px; /*位置決め*/
		content: "つづきを読む"; /*表示文字列*/
		font-size: 80%; /*フォントサイズ*/
		color: white; /*フォントカラー*/
		background-color: #e6b422; /*背景色*/
		text-align: center; /*表示文字列中央位置決め*/
		border-radius: 4px; /*角丸コーナー*/
		z-index: 1;
	}
}
.related-entry-card-wrap.a-wrap:hover:before, /*エントリーカードホバー時に【続きを読む】を表示*/
.entry-card-wrap.a-wrap:hover:before { /*エントリーカードホバー時に【続きを読む】を表示*/
	animation:blink 2.0s ease-in-out infinite alternate!important; /*アニメーション点滅間隔2.0秒設定*/
}
@keyframes blink {
	0% {
		opacity: 0.2;
	}
	81% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
/************************************
** 検索ボックス大きさ
************************************/
@media screen and (min-width: 481px) {
	.search-box {
		width: 40%;
		margin-left: auto;
		margin-right: auto;
	}
}
/*検索フォーム*/
.search-edit {
	height:50px;
	padding:0;
	border-radius:25px!important;
	background:#242529;/*検索バー本体の色(背)*/
}
[type="submit"].search-submit {
	height:44px;
	width:44px;
	top:3px;
	right:3px;
	background:#242529;/*検索ボタンの色(通常)*/
	color:#e6b422;/*検索ボタン虫眼鏡の色(通常)*/
	border:0;
	border-radius:25px 25px 25px 25px;/*角丸4つ*/
}
[type="submit"].search-submit:hover{
	color:#e6b422;/*検索虫眼鏡の色(ホバー)*/
	background:#fff;/*検索ボタンボタンの色(ホバー)*/
}
/************************************
** グローバルナビメニュー
************************************/
.navi-in>ul li {
	height: 64px; /*メニューの高さ（縦幅）*/
	line-height: 64x; /*ナビ全体の高さ（縦幅）*/
}
nav#navi, .menu-header .sub-menu{
	font-weight: bold;
	box-shadow: 0 5px 15px -5px rgba(0,0,0,0.3);
}
.menu-header .sub-menu .item-label{
	font-size: 100%;
}
.menu-header .item-label{
	color: #b5b5b5 !important;
	padding-top: 10px;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
	color: #e6b422 !important;
	border-bottom: 4px solid #e6b422;
	transition: all .2s ease;
}
.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
	border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
	color: #e6b422 !important;
	transition: all .2s ease;
}
/************************
/ SNSボタン
/************************/
.sns-share-message{/*SNSシェアボタン*/
	font-weight: bold; /*太字にする*/
}
.sns-follow-message{/*SNSフォローボタン*/
	font-weight: bold; /*太字にする*/
}
#container .button-caption {
	display: none; /*キャプション非表示*/
}
#container .sns-buttons {
	justify-content: center; /*中央揃え*/
}
#container .sns-buttons a {
	border-radius: 50%; /*丸み*/ 
	margin: 2px; /*ボタン同士の間隔*/ 
	width: 40px; /*ボタンの幅*/
	height: 40px; /*ボタンの高さ*/
	margin-bottom: 0.5em; /*ボタンの下の余白*/
	font-size: 20px;
}
.sns-buttons a {
    background-color: #2d343a;
}
/*ホバー時回転*/
#container .sns-buttons a:hover {
	-webkit-transform: scale(1.1) rotate(360deg);
	-moz-transform: scale(1.1) rotate(360deg);
	-ms-transform: scale(1.1) rotate(360deg);
	-o-transform: scale(1.1) rotate(360deg);
	transform: scale(1.1) rotate(360deg);
}
/************************************
** ヘッダーカスタマイズ
************************************/
.header{
	background:linear-gradient(135deg, #2d343a 10%, #e6b422 10%, #e6b422 90%, #2d343a 90%)/*グラデーション化*/
}
/************************************
** 記事内目次
************************************/
.toc {
	background: #323232!important;
	border: 0!important;
	display: block!important;
	border-top: 8px solid!important;
	border-top-color: #e6b422!important;/*お好みの色に*/
	box-shadow: 3px 3px 2px rgba(0,0,0,.2)!important;
	padding: 20px 32px 7px 32px!important;
	margin-bottom: 5%!important;
	width:95%;
	border-radius:15px;
}
@media screen and (min-width:768px){
	.toc {
		padding: 20px 35px 15px 35px!important;
		width:70%;
	}
}
.toc-title{
	margin: 0 20px 20px -10px!important;
	font-size: 20px!important;
	font-weight: 700!important;
	color: #e6b422!important;/*お好みの色に*/
	background-color: initial;
}
.toc-title:before{
	font-family: "Font Awesome 5 Free";
	content: "\f03a";
	font-weight: 900 !important;
	font-size: 20px;
	color: #fff;
	background-color: #e6b422;/*お好みの色に*/
	border-radius: 50%;
	padding: 14px;
}
.toc a{
	color:#fff;
	display: block;
	border-bottom: dashed 1px silver;
	padding-bottom: .5em;/*下の点線との間*/
	padding-top: 0em!important;/*下の点線との間*/
}
.toc ul li{
	font-weight: 700;
	line-height: 1.5;
	padding: 0 0 .4em 1.4em;
	position: relative;
}
.toc ul li:before{
	font-family: "Font Awesome 5 Free"!important;
	content: "\f0a9";
	position: absolute!important;
	left: -0.3em!important;
	color: #e6b422;/*お好みの色に*/
	font-weight: 900;
}
.toc li li{
	font-weight: 400;
	padding-top:.5em;
	margin-top:0!important;
}
.toc_list li{
	margin-top:-5%!important;
}
@media screen and (min-width:834px){
	.toc_list li{/*PCでは目次のh2同士の間隔は抑えめに*/
		margin-top:-1.8%!important;
	}
}
@keyframes slide {
100% {
	opacity:1;
	padding-left:1.2%;
	}
}
/*目次のアイコンにアニメーションを*/
.toc ul li:before{
	opacity:.4;
	animation: slide 1.5s infinite;
}
/************************************
** ボタンエフェクト
************************************/
/*hoverを使って、ボタンが重なったときに、下に沈む動きをつける*/
.btn:hover{
	transform: translateY(5px);
	-webkit-transform: translateY(5px);
}
/*マウスを外したときの動きをスムーズに*/
.btn{
	transition:.5s ease-in-out;
}
/************************************
** ページ送りボタンの文字
************************************/
.pagination-next-link{
    font-weight: 900; /*太字*/
}
.page-numbers{
	font-weight: 900; /*太字*/
}
/************************************
** ページ送りナビの間隔
************************************/
.pager-post-navi.post-navi-square a {
    width: 49%;
}
@media screen and (max-width: 480px){
	.pager-post-navi.post-navi-square a {
		width: 100%;
		padding: 5px;
	}
}
.pager-post-navi a {
    margin: 1%;
}
/************************************
** 固定ページ更新日非表示
************************************/
.page .date-tags {
	display: none;
}
/************************************
** ■見出しカスタマイズ（h1-6）
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6,{ /*見出し初期化*/
	padding: 0;
	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: normal;
	position:relative;
	background:none;
}
.article h1{ /*見出し１（タイトル）カスタマイズ*/
	background: #323232; /*背景カラー*/
	font-size: 22px; /*フォントサイズ*/
	letter-spacing: 1px; /*文字間隔*/
	margin: -8px -8px 20px -8px;
	padding: 9px 10px 9px 10px;
	border-left: 12px solid #e6b422; /*左ラインの太さとカラー*/
	line-height: 35px; /*高さ*/
	border-radius: 3px; /*角丸コーナー*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー*/
}
.article h2{ /*見出し２カスタマイズ*/
	font-size: 22px; /*フォントサイズ*/
	letter-spacing: 1px; /*文字間隔*/
	margin: 35px -8px 20px -8px;
	padding: 10px 7px 10px 10px;
	border-left: 10px solid #e6b422; /*左ラインの太さとカラー*/
	border-bottom: 2px solid #e6b422; /*アンダーラインの太さとカラー*/
	line-height: 30px; /*高さ*/
	box-shadow: 0px 3px 2px rgba(0,0,0,0.2); /*シャドー*/
}
.article h3{ /*見出し３カスタマイズ*/
	background: #e6b422; /*背景カラー*/
	font-size: 18px; /*フォントサイズ*/
	letter-spacing: 1px; /*文字間隔*/
	margin: 35px -8px 20px -8px;
	padding: 9px 7px 9px 10px;
	line-height: 25px; /*高さ*/
	border-radius: 5px; /*角丸コーナー*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー*/
}
.article h4{ /*見出し４カスタマイズ*/
	background: #323232; /*背景カラー*/
	font-size: 16px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: 35px -8px 20px -8px;
	padding: 8px 7px 8px 10px;
	border-left: 2px solid #e6b422; /*左ラインの太さとカラー*/
	line-height: 23px; /*高さ*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー*/
}
.article h5{ /*見出し５カスタマイズ*/
	background: #323232; /*背景カラー*/
	font-size: 16px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: 35px 20px 20px 20px;
	padding: 5px 5px 5px 5px;
	line-height: 27px; /*高さ*/
	text-align: center; /*文字位置中央*/
	border-radius: 20px; /*角丸コーナー*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー*/
}
.article h6{ /*見出し６カスタマイズ*/
	font-size: 16px; /*フォントサイズ*/
	letter-spacing: 2px; /*文字間隔*/
	margin: 35px 0px 20px 0px;
	padding: 8px 16px 8px 25px;
	line-height: 25px; /*高さ*/
	background-color: #323232; /*背景カラー*/
	border-radius: 20px; /*角丸コーナー*/
	position: relative;
}
.article h6::after{ /*見出し６の逆三角部分のカスタマイズ*/
	position: absolute;
	top: 100%;
	left: 20px;
	content: '';
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-top: 13px solid #323232;
}
/************************************
** 埋め込み動画中央配置,サイズ
************************************/
.video-container{
	margin: 0px auto;
	max-width: 100%;
}
/************************************
** もっと見るボタンの変更
************************************/
.list-more-button {
	border-color: #e6b422; /*色を変更 */
	font-weight: 700;
	font-size: 18px;
	transition:.1s ease-in-out;
	padding: 1% 20% 1% 20%;
}
/************************************
** 折り畳みアーカイブウィジェット
************************************/
.widget_archive a.year{ /*各年*/
	cursor: pointer;
	border-bottom: 2px dotted #fff; /*各年に下線を引く*/
}
.widget_archive a.year::after{ /*各年横のアイコン*/
	font-family: "Font Awesome 5 Free";
	content: '\f107'; /* アイコンの指定 */
	position: relative; /* 相対配置 */
	left: 5px; /* アイコンの位置 */
	font-weight: bold;
}
.widget_archive .years ul { /*各月*/
	display: flex;
	flex-flow: row wrap;
	margin-left: 5px; /*インデント*/
	font-size: 1rem;
	text-decoration: underline; /*各月に下線を引く*/
	text-decoration-color: #fff;
}
.widget_archive ul.years li {
	padding: 4px 2px; /*各月の間隔*/
	line-height: 1.2;
}
#sidebar .widget_archive ul.years li :hover { /*マウスホバー時*/
	background: none;
	transition: 0.1s;
}
.widget_archive ul.years .hide { /*各年をクリックすると開閉*/
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}
/************************************
** カテゴリウィジェット調整
************************************/
/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{
	border-bottom: 2px dotted #fff; /* 下線の種類 */
	line-height: 1.2;
	margin-bottom: 4px;
}
.widget_categories ul li a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f07b"; /* FontAwesomeのユニコード */
	color: #fff; /* アイコンの色 */
	padding-right: 5px;
	font-weight: 900;
}
.widget_categories > ul > li > a:first-child{ 
	border-top: none;
}
/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f07b"; /* FontAwesomeのユニコード */
	color: #fff; /* アイコンの色 */
	padding-right: 5px;
	font-weight: 400;
}
/************************************
** フッターウィジェットタイトル
************************************/
.footer h3 {
    background: none;
    font-size: 18px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
	margin-bottom: 5px;
}
.footer h3::before, .footer h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 27%; /*ラインの長さ*/
    border-top: 3px solid #333; /*ラインの色*/
}
.footer h3::before {
    left: 0;
}
.footer h3::after {
    right: 0;
}
/************************************
** ブログカードサムネ縦横比統一
************************************/
.blogcard-thumbnail img {
	width: 160px;
	height: 160px;
	object-fit:cover;
	object-position: center center;
}
@media screen and (max-width: 834px){
.blogcard-thumbnail img {
	width: 120px;
	height: 120px;
	object-fit:cover;
	object-position: center center;
	}
}
/************************************
** ■ウィジェットの見出しのカスタマイズ
************************************/
#main .main-widget-label {
	margin-top: 20px; /*上マージン*/
	margin-bottom: 15px; /*下マージン*/
	border-radius: 6px; /*角丸コーナー*/
	color: #fff; /*フォントカラー*/
	font-size: 22px; /*フォントサイズ*/
	font-weight: 700; /*フォント太さ*/
	position: relative;
	background:linear-gradient(165deg, #e6b422, #e6b422, #e6c35c); /*タイトル背景カラー*/
	padding-top: 5px; /*上内側余白設定*/
	padding-bottom: 5px; /*下内側余白設定*/
	padding-left: 26px; /*左内側余白設定*/
}
#main .main-widget-label::after {
	position: absolute;
	top: 0.4em;
	left: 0.6em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 0.8em);
	height: calc(100% - 0.8em);
	background-color: #fff;
	border-radius: 6px;
}
.recommended.cf.rcs-large-thumb-on { /*ウィジェット[C]おすすめカード*/
	margin-top:0; /*上マージンクリア*/
}
#main .main-widget-label::after { /*ウィジェット カスタムHTMLタイトル*/
	animation:blink 1.8s ease-in-out infinite alternate; /*点滅間隔1.8秒設定*/
}
@keyframes blink {
	0% {
		opacity: 0.2;
	}
	81% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
/************************************
** スライドショー横幅調整
************************************/
.pgcsimplygalleryblock-slider-collection .pgcsimplygalleryblock-slider-content {
    width: 810px;
    margin: 0 auto;
}
/************************************
** Ultimate色調整
************************************/
.um-meta-text {
	color: #fff !important;
}
.um-profile.um .um-name a {
	color: #fff !important;
}
.um .um-field-label {
	color: #fff !important;
}
.um-profile.um .um-profile-headericon a {
	color: #666 !important;
}
.um-account-main div.um-account-heading {
	color: #fff !important;
}
.um-account-name a {
	color: #fff !important;
}
.um:not(.um-admin) {
	color: #fff !important;
}
.um-item-link i {
	color: #fff !important;
}
.um-item-link a {
	color: #fff !important;
}
/************************************
** 投稿一覧 人気記事ウィジェットタイトル4行まで表示 
************************************/
.entry-card-content h2 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
.is-list-horizontal.large-thumb .card-title, .is-list-horizontal.large-thumb-on .card-title {
    -webkit-line-clamp: 4;
    height: 5em;
}
/************************************
** ライブドアRSS文字サイズ
************************************/
.blogroll-channel .blogroll-list {
    font-size: 15px !important;
}
/************************************
** 新着記事非表示(サイト型のページに変更したらONにする)

.list-new-entries {
	display: none;
}
************************************/