@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以下｜小さめPC*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

/**********************************************************************************
 
	基本

**********************************************************************************/


/************************************
	カラー
************************************/

/* 背景色　｜ヘッダー */
#header-container {
	background-color: #b5aca7;
	box-shadow:0 3px 7px rgba(0,0,0,.4); /* 影 */
}

/* ナビメニュー */
.navi {
    background-color:#b5aca7;
}

/* 背景色　｜ボディ */
.body{
	background-color:#EDE8E1;
}


/* 記事内 */
.main {
	background-color: #EDE8E1;　
}

/* 背景色　｜フッター */
#footer {
	background: #b5aca7;
}


/*****************************
	LINK
******************************/

/*リンクの下線*/
a{
	text-decoration:none;
	color:#2163bf;
}

/*マウスオーバー時のリンク色*/
a:hover{
	color:#ba520d;
}

/*****************************
	箇条書き　
******************************/
ol, ul {
	padding-left:20px;
	padding-right:10px;
}

@media screen and (max-width: 480px){
ol {
	margin-left:0px !important;
}}


/*****************************
	見出し
******************************/

/* Cocoon親テーマCSSリセット */
	.article h2, .article h5, .article h3, .article h4, .article h5, .article h6{ 
	padding: 0;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
}

/* H1 タイトル*/
.article h1{
	font-size:1.7em;
	text-align:center;
	font-weight:900;
	margin:0 4% 1em 4%;
	padding:.5em 1em;
	background: repeating-linear-gradient(138deg, rgba(161, 162, 163, 0.29906542056074764), rgba(161, 162, 163, 0.29906542056074764) 12px, rgba(255, 255, 255, 0.3411214953271028) 0, rgba(255, 255, 255, 0.3411214953271028) 22px);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	transform: rotate(0deg); /* 見出しの角度 */ 
	border-right:1px solid #A8A8A8;
	border-bottom:1px solid #A8A8A8;
	border-radius:50px;
	color:#595959;
}

/* H1 ｜モバイル　*/
@media screen and (max-width: 480px){
.article h1, #archive-title{
	font-size:1.5em;
	padding: .4em 1.8em;
}}


/* アーカイブ表示でのタイトル  （H1と同デザイン） */
#archive-title {
	font-size:1.7em;
	text-align:center;
	font-weight:700;
	margin:0 20% 1em 20%;
	padding:.5em 1em;
	background: repeating-linear-gradient(138deg, rgba(161, 162, 163, 0.29906542056074764), rgba(161, 162, 163, 0.29906542056074764) 12px, rgba(255, 255, 255, 0.3411214953271028) 0, rgba(255, 255, 255, 0.3411214953271028) 22px);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	transform: rotate(0deg); /* 見出しの角度 */ 
	border-right:1px solid #A8A8A8;
	border-bottom:1px solid #A8A8A8;
	border-radius:50px;
	color:#595959;
}

/* アーカイブ｜モバイル　*/
@media screen and (max-width: 1000px){
#archive-title{
	margin-left:8%;
	margin-right:8%;
}}


/* H2 */
.article h2{
	font-size:1.6em;
	font-weight:600;
	padding:.3em .2em; 
	margin:2em 13% -.75em 13%;
	text-align:center;
	background-size: 20px 20px; /* テープの太さ */
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	background:rgba(82, 69, 60,0.4);
	opacity:.7; /* 透明感 */
}

/* H2 ｜モバイル　*/
@media screen and (max-width: 480px){
.article h2{
	font-size:1.4em;
	margin-left:8%;
	margin-right:8%;
}}

/* H3　 */
.article h3{
	display: inline-block;
	text-align:left;
	margin: .5em 0 1em -1.5em;
	padding: .3em 1em; /* 上下 左右の余白 */
	font-size:1.2em;
	color: #424242;
	border-left:2px dotted rgba(0,0,0,.2);
	border-right:2px dotted rgba(0,0,0,.2);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	background:rgba(186, 177, 160,.4);
	opacity:.7; /* 透明感 */
}

/* H3 ｜モバイル　*/
@media screen and (max-width: 480px){
.article h3{
	font-size:1.4em;
	padding: .4em .5em;
	margin-left:-.1em;
}}

/* H4 */
.article h4{
	display: inline-block;
	font-size:1.1em;
	font-weight:400;/* フォント太さ */
	padding:.3em .6em ;
	margin-left:-1em;
	margin-bottom: .9em;
	border-left: 12px solid rgba(92, 214, 169,0.6);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	background:rgba(244, 244, 244,.6);
}
.toggle-content h4{
	overflow: visible !important;
}


/* H4 モバイル */
@media screen and (max-width: 480px){
.article h4{
	padding-left:.8em;
	border-left: 10px solid rgba(92, 214, 169,0.6);	
	margin-left:-.5em;
}}

/* H5 */
.article h5{
	display: block;
	max-width: 50%;
	background-size: 20px 20px; /* テープの太さ */
	font-size:1.1em;
	font-weight:500; /* フォント太さ */
	text-align:center;
	padding: .2em 10px .2em 10px; 
	margin-left:auto;
	margin-right:auto;
	margin-top: .4em;
	margin-bottom: 1em;
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	background:rgba(222,222,222,0.4);
}

/* H5 モバイル
（なぜかmargin-bottom 0になってる件の調整 */

@media screen and (max-width: 480px){
.article h5{
	margin-bottom: .8em !important;
}}
	
/* H6 */
.article h6{
		font-size:1em;
}


/*****************************
	ヘッダーロゴ/サイト名
******************************/


.logo-text {
	padding:1em 0;
}

.site-name-text{
	font-size: 2.1em;

	font-weight:550;
	letter-spacing:.05em;
}

@media screen and (max-width: 480px){
#header .site-name-text {
	font-size:2em;
}}


@media screen and (max-width: 834px){
#header .site-name-text {
	font-size:2em;
}}


.header-container-in.hlt-top-menu .logo-header .site-name{
	margin:.8em 0 .5em 0;
}


.tagline {
	font-size: 2em;
	margin:.1em 0 2em 1em;
}

/*　スクロール時など横寄せの際のヘッダーロゴ*/
.header-container-in.hlt-top-menu .site-name-text {
	font-size:2.1em;
	font-weight:1000;
	color:#595959;
	opacity:.5;
}
.header-container-in.hlt-top-menu .site-name-text:hover {
	opacity:.8;
}



/*****************************
	メニュー
******************************/

/* メニューを改行しない　*/
.navi-in > ul{
	flex-wrap:nowrap;
}


/* フォントまわり　*/
.navi-in a{
	font-size:1.3em;
	font-weight:800;
	color:#595959;
	opacity:.6;
}

#navi .navi-in a:hover{
	background-color:transparent;
	opacity:.9;
}

#navi .navi-in > .menu-mobile li a {
    font-size:1.2em;
}

/* *********************************************************************************************************
 
	MAIN｜TOPエントリーページ

******************************************************************************************************** */

/*****************************
	全体のレイアウト
******************************/

/*　センター寄せ */
.entry-content figure.wp-block-image {　/*　画像 */
	width:100%;
	text-align:center !important;
}

.content-bottom { /*　コンテンツ下 */
	margin:15px;
}


/* エントリーページのみ幅を広げる */
.home #main, .archive #main, .search #main{ 
	width:100%;
	margin:0;   /* 注意！！！強すぎてモバイル時の調整効かなくなる。ここで左右余白取るとモバイルでおかしくなる*/
}

/*****************************
	左右余白
******************************/

/* 1501px以上*/
@media screen and (min-width:1501px){ 
main.main{
	padding:0px 5%;
}}

 /* 1500px以下*/
@media screen and (max-width:1500px){
main.main{
	padding:0px 4%;
}}

 /* 1300px以下*/
@media screen and (max-width:1300px){
main.main{
	padding:0px 3%;
}}

 /* 800px以下*/
@media screen and (max-width:800px){
main.main{
	padding:0px 1%;
}}

/* 480px以下*/
@media screen and (max-width:480px){  
main.main{
	padding:0px 2.5%;
}}	


/******************************
	カードの個数 / カード間の余白
	モバイル
*******************************/

/* 1501px以上｜7列 */
@media screen and (min-width: 1501px) { 
.ect-vertical-card .entry-card-wrap {
	width:12.4%;	 /* 個数を決定 */
	margin:.8% ; /* カード間の余白 */
}}
/* 1500px以下｜6列*/
@media screen and (max-width:1500px){
.ect-vertical-card .entry-card-wrap {
	width:15%; 	/* 個数を決定 */
	margin:.8%;
}}

/* 1300px以下｜5列*/
@media screen and (max-width:1300px){
.ect-vertical-card .entry-card-wrap {
	width:18.3%; 	/* 個数を決定 */
	margin:.8%;
}}

/* 800px以下｜4列*/
@media screen and (max-width:800px){
.ect-vertical-card .entry-card-wrap {
	width:22%;	 /* 個数を決定 */
	margin:1.5%;
}}


/* 480px以下｜２列*/
@media screen and (max-width:480px){
.ect-vertical-card .entry-card-wrap {
	width:45.2% !important; 	/* 個数を決定 */
	margin:2%;
}}



/******************************
	カード
*******************************/


.ect-3-columns {
	justify-content:start;　/*　カードの並び方を左寄せにする */
}

/*　カードのデザイン */
.entry-card, .entry-card-wrap{
	background-color: #FFFFFF;
	opacity:.9;  /* 透明度 */
} 

.ecb-entry-border .entry-card-wrap {
	border: .1px solid #d3d3d3;
}

/*　影の装飾*/
.ect-vertical-card .entry-card-wrap {
	box-shadow:0 0 3px gray;　　
}

/* カードタイトル */
.entry-card-title {
	font-size:.7em;
	text-align:center;
	font-weight:normal;
	margin-bottom:0px; 
	line-height: 15px; /* 行間 */
	letter-spacing: .05em;/*文字間*/
} 

/* カードタイトルの外側 */
.entry-card-content, .related-entry-card-content {
    padding:0;
}

@media screen and (max-width:480px){ /* 480px以下*/
.entry-card-content, .related-entry-card-content {
    padding:0 .2em;
}}


/*　カードのホバー　*/
.entry-card-wrap:hover { 
	background-color: #FFFFFF;
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
	box-shadow: 0 0 10px #54524b; /*影の色*/
}



/* *********************************************************************************************************
 
	投稿エリア

******************************************************************************************************** */

/*****************************
	MAIN｜投稿記事　レイアウト
******************************/

.no-sidebar .content .main {
	margin:0 20%;
	width: 60%;
	padding-top:1em;
}
@media screen and (max-width:1200px){ /* モバイル　1200px以下*/
.no-sidebar .content .main {
	margin:0 15% ;
	width:70%;
	padding-top:1em;
}}

@media screen and (max-width:480px){ /* モバイル　480px以下*/
.no-sidebar .content .main {
	margin:0 1%;
	width:98%;
	padding-top:1em;
}}


/************************************
	マーカー
************************************/

/*マーカー*/
.marker {
	background-color: #ff9;
	padding:4px 6px;
	border-radius: 4px; /* 角丸 */
}
.marker-red {
	background-color: #ffd0d1;
	padding:4px 6px;
	border-radius: 4px; /* 角丸 */
}
.marker-blue {
	background-color: #e3e3e3;
	padding:4px 6px;
	border-radius: 4px; /* 角丸 */

}

/*下半分のマーカー色（km）*/
.marker-under {
  background: linear-gradient(transparent 60%, #ff9 60%);
}
.marker-under-red {
  background: linear-gradient(transparent 60%, #ffd0d1 60%);
}
.marker-under-blue {
  background: linear-gradient(transparent 60%, #e3e3e3 60%);
}

/************************************
	上部｜カルーセル
************************************/

.slick-slide img{
 padding:6px;
background-color:#FFF;
}

/* カード */
.carousel .a-wrap{
	max-height:60px;
	padding:0;
	color:#424242;
	opacity:.8;
}

/*　ホバー　*/
.carousel .a-wrap:hover{
	background-color: #FFFFFF;
	-webkit-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	transform: translateY(-50px);
}

.carousel-in {
	background: transparent !important;
	padding:0;
	max-width:100%;　/*画像の飛び出し防ぐ*/
}

/* タイトル装飾 */
.carousel-entry-card-title{ 
	font-size:0;	/*今の仕様だと消しておく*/
	line-height: 1.5; /*行の高さ指定*/
	margin: 0;
	text-align:center;
}


.carousel{
	background-color:#96918d;
	max-width:100%; /*画像の飛び出し防ぐ*/
	margin:0;
	padding:1px 10%;　/*画像の飛び出し防ぐ*/
}

.carousel .slick-arrow:before {
    color: #424242;
}


.carousel .a-wrap .cat-label{
	display:none;
}

.carousel-content {
    padding-bottom:0;
}

/*****************************
	アイキャッチ画像
******************************/

.eye-catch-wrap {
	margin:2em auto 0 auto;
	width: 40%;
	border-radius:1px;
	border: .3px solid #d3d3d3;
	background:#FFF;
	box-shadow:inset 0 0 30px rgba(227, 224, 213,.8);
	padding:12px 12px 35px 12px;
}

@media screen and (max-width: 480px){	/*480px以下*/
.eye-catch-wrap {
	width: 70%;
}}

/*固定記事では非表示*/
.page .eye-catch-wrap {display: none;}

/*****************************
	投稿日・更新日
******************************/

.date-tags {
    line-height: 0.8;
    text-align:center;
	margin-top:-1.5em;
    margin-bottom: 1em;
}


/*****************************
	装飾｜カテゴリーラベル
******************************/

/* TOP */
.cat-label {
	border:none;
	color: #FFF;
	left:0.4em;
	padding:.2em .4em .2em .7em;
	background-color: rgba(66, 66, 66, 0.5);
	margin-left:-1.5em;
	margin-top:.2em;
}

/* アイキャッチ */
.eye-catch .cat-label {
	margin-left:-1.7em;
	margin-top:.2em;
	padding:.2em .4em .2em .7em;
	border:none;
	font-size:.8em;
}

/* 関連記事でのラベル非表示 */
.related-entry-card .cat-label{
	display:none;
}

/* カテゴリーページ（世帯）でのラベル非表示 */
.category-content .cat-label{
	display:none;
}

/* ******************************
 	目次
****************************** */

.toc{
	border:none; 
	min-width:60%; /*目次横幅*/
	font-size:14px; 
	line-height:1.5; /*行の高さ指定*/
	padding:3%;
	background-color:#FFF;
	border-radius:1px;
	border: .3px solid #d3d3d3;
	box-shadow:inset 0 0 30px rgba(227, 224, 213,.8);
	opacity:.8;
}


/* 480px以下では幅 MAX*/
@media screen and (max-width: 480px){
.toc{
	min-width:100%; /*目次横幅*/
}}


/* 目次のタイトル文字 */
.toc-title {
	text-align:center;
	margin:0px 0px 10px -10px;
	padding-left: -20px;
	font-size:20px;
	font-weight:700;
	color:#424242; 
}
/* 目次のタイトル横アイコン */
.toc-title:before {
	top:0;
	left:-45px;
	width:18px;
	height:18px;
	font-family:"Font Awesome 5 Free";
	content:"\f03a"; /* アイコン */
	font-size:18px;
	margin-right:5px;
	color:#696969; /* アイコンの色 */
	background-color:transparent;
	padding:14px;
}

/* オンマウス */
.toc-content li a:hover {
	text-decoration:none; /*選択時装飾無し*/
	color:#424242; /*選択時フォントカラー*/
	background:#89fad0; /*選択時の背景カラー*/
}

/* アンダーライン */
.toc ul.toc-list>li>a,.toc ol	.toc-list>li>a {
	border-bottom:1px dotted #d3d3d3;  /*h2のアンダーラインの太さとカラー*/
	font-weight:500;
}
.toc ul li a,.toc ol li a {
	display:block;
	border-bottom:1px dotted #d3d3d3;  /* h3～h6のアンダーラインの太さとカラー */
	padding-left:10px; /*アンダーライン調整*/
}

/* H2 */
.toc-list > li a::before { 
	content:"▸ ";
	margin-right:7px;
	color:#696969; /* アイコンの色 */
}

/* H3以降 */
.toc-list > li li a { 
	font-size:13px; /*フォントサイズ*/
}

.toc-list > li li a::before { 
	content:"";
	width:5px;
	height:5px;
	left:-2px;
	display:inline-block;
	border-radius:50%;
	background:#999999; /* 点の色 */
	position:relative;
	margin-bottom:2px;
}

/* H4以降 */
.toc-list > li li li a::before { 
	content:"";
	width:3px;
	height:3px;
	left:-2px;
	display:inline-block;
	border-radius:50%;
	background:#999999; /* 点の色 */
	position:relative;
	margin-bottom:2px;
}


/************************************
	装飾｜テーブル
************************************/
table {
	border: solid 2px #696969 !important; 
	border-collapse:collapse;
	background:none !important;
}
table th{
	border: solid 1px #696969 !important;
	background:none !important;
}

table td {
	border: solid 1px #696969 !important;
	background:none !important;
}

table tr {
	background:none !important;
}

/************************************
 	本文左下
	装飾｜タグ/カテゴリー
************************************/

/* タグマークを消す*/
.fas.fa-tag::before{
	display:none;
}

.fa-folder:before {
	display:none;
}

.entry-categories-tags.ctdt-tag-only{
	margin-left:1.5em;
}

/*　細い付箋風の装飾 */
.tag-link, .cat-link {
	background:#FFF;
	border:none;
	border-left:solid 6px #89fad0;
	border-radius:1px;
	padding:3px 10px;
	margin:10px 8px 5px 0px;
	color:#424242;
	font-weight:normal;
	box-shadow:0px 0px 3px #999999;
	opacity:.7;
}

/* ホバー　*/
.tag-link:hover, .cat-link:hover{
	background:#FFF;
	padding:3px 10px;
	border-radius:1px;
	border:none;
	border-left:solid 6px #89fad0;
	box-shadow:1px 1px 5px #696969;
	color:#424242;
	opacity:1; /* 透明設定されてるのをオフにする*/
}

/********************************************************************************************
 
	記事内のパーツ

*********************************************************************************************/


/*****************************
	記事内パーツ
	COCOON ボックス
******************************/

/* 付箋 グレー（白） */
.blank-box.sticky{
	margin:0 1.3em 3em 1.5em;
	border-radius:1px;
	border: .3px solid #d3d3d3;
	background:#FFF;
	box-shadow:inset 0 0 30px rgba(227, 224, 213,.8);
	padding:1.5em;
}

/* 付箋 黄色（クリーム） */
.blank-box.sticky.st-yellow{
	margin-left:1.5em;
	margin-right:1.5em;
	margin-bottom:2em;
	padding:1em 1em 1.3em;
	border-radius:1px;
	border: .3px solid #d3d3d3;
	background:#fff9e7;
	box-shadow:inset 0 0 30px rgba(230,220,190,.8);
}

/* 付箋 赤 → グレー　 */
.blank-box.sticky.st-red{
	margin-left:.5em;
	margin-right:.5em;
	padding:1.5em 1em 1.3em;
	border-radius:1px;
	border:none;
	background:transparent;
	box-shadow:inset 0 0 30px rgba(181, 176, 159,.8);
	position: relative;
}

/* 付箋 青→濃いグレー */
.blank-box.sticky.st-blue{
	margin-left:.5em;
	margin-right:.5em;
	padding:1em 1em 1.3em;
	border-radius:1px;
	border:none;
	background:#97a2a6;
	box-shadow:inset 0 0 30px rgba(181, 176, 159,.9);
}

/* 付箋 緑→ 白の余白なしver. */
.blank-box.sticky.st-green{
	margin-left:.5em;
	margin-right:.5em;
	padding:1em 1em 1.3em;
	border-radius:1px;
	border: .3px solid #d3d3d3;
	background:#FFF;
	box-shadow:inset 0 0 30px rgba(227, 224, 213,.8);
}


/* モバイルでの左右余白調整　*/
@media screen and (max-width: 480px){
.blank-box.sticky {	/* 付箋 グレー（白） */
	margin-left:.2em;
	margin-right:.2em;
	margin-bottom:3em;
	padding:1.2em .8em 1em;
}}

@media screen and (max-width: 480px){
.blank-box.sticky.st-yellow{	/* 付箋 黄色（クリーム） */
	margin-left:.1em;
	margin-right:.1em;
}}


/******************************
	付箋内のカラム｜余白調整
	縦に重ねる時用
*******************************/
.blank-box.sticky .wp-block-columns{
	margin-bottom:.6em;
}

/******************************
	タグページ（特質）ページで
	付箋の装飾を使用した場合用の調整
*******************************/
.tag-content .blank-box.sticky, 
.category-content .blank-box.sticky{
	width:50%;
	margin-right:auto;
	margin-left:auto;
	padding:1.5em;
}

@media screen and (max-width: 800px){
.tag-content .blank-box.sticky, 
.category-content .blank-box.sticky{
	width:80%;
	margin-right:auto;
	margin-left:auto;
	padding:1em 2em;
}}

@media screen and (max-width: 480px){
.tag-content .blank-box.sticky, 
.category-content .blank-box.sticky{
	width:98%;
	margin-right:auto;
	margin-left:auto;
	padding:1em;
}}

/*****************************
ギャラリー表示
******************************/

.blocks-gallery-grid .blocks-gallery-item figure{
	align-items:flex-start !important; /*　上揃え　*/
}


/*　並び方を中心寄せにする */
.blocks-gallery-grid,
.wp-block-gallery{
	display:flex;
	justify-content:center !important;
}

/*　基本｜4列　固定表示 */
.wp-block-gallery.has-nested-images figure.wp-block-image{
	width:calc((100% - 30px)/4.1)!important; /* 基本は4列表示　*/
	flex-grow: 0 !important;　			　　　　		/* 奇数時に画像を拡大しない*/
	justify-content:center !important; 		/*　並び方を中心寄せにする */
} 

/*　2列 表示*/
.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image{
	width:calc((100% - 35px)/2.1)!important;
}


/*　3列 表示*/
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image{
	width:calc((100% - 35px)/3.1)!important;
}

/*　4列 表示*/
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image{
	width:calc((100% - 35px)/4.1)!important;
}

/*　5列 表示*/
.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image{
	width:calc((100% - 35px)/5.1)!important;
}

/*　6列 表示*/
.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image{
	width:calc((100% - 35px)/6.1)!important;
}

/***********************************
　ギャラリーレイアウト調整
************************************/

.wp-block-gallery {
    --wp--style--block-gap: 8px !important;
}


@media screen and (max-width: 480px){
.wp-block-gallery {
    --wp--style--block-gap: 4px !important;
}}

/************************************
	記事内パーツ
	ブログカード
************************************/

.blogcard{
	margin-top:3em;
	padding: 25px 15px 9px 18px; /* 余白 */
	border:none;
	border-radius:1px; /* 角丸の指定 */
	box-shadow:0 0 3px #999999;
}

.blogcard:hover{
	box-shadow:0 0 5px #696969;
}

/* ラベル */
.blogcard-type .blogcard-label{
	border-radius:2px 1px 0 0;
	top:-15px;
	left:auto;
	right:10px;
	color: #424242 ;
	background-color:rgba(244, 244, 244,.7);
	box-shadow:0 0 3px #999999;
}



/******************************
	記事内パーツ
	ボタン｜SNS
*******************************/

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

/* シェアメッセージ（見出し風）　*/
.sns-share-message,
.sns-follow-message{
	font-weight: bold; /* 太字 */
	color: #424242; /* 文字色 */
	text-align:left; /* 位置 */
	font-size:1.2em;
	padding:0 2em 0 .7em; /* 上下 左右の余白 */
	margin-bottom: 1em;
	background-size: 20px 20px;/*線の太さ*/
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.2); /*見出しの影*/
	background: #f2ede1;
	display:inline-block;
}

/* 上段｜右寄せ　*/
.ss-top .sns-share-buttons{
	justify-content: flex-end; /*位置*/
	margin-top:.2em;
	margin-bottom:.8em;
}

/* 下段｜右寄せ　*/
.ss-bottom .sns-share-buttons,
.sns-follow-buttons.sns-buttons{
	justify-content: flex-end; /*位置*/
	margin-top:.7em;
	margin-left:2em;
}

/* ボタンの枠　*/
#main .sns-share a,
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
	border-style:outset;
	border-color:#f7f7f7;
	border-width:1px 2px 2px 1px;
	border-radius:1px;
	background:#FFF;
	margin: 0 .5em;
	color:#696969;
}


#main .sns-share a:hover,
.sns-follow a:hover{
	border-radius:1px;
	background:#FFF;
	border-style:outset;
	border-color:#f7f7f7;
	border-width:1px;
}

/******************************
	クエリーループ用
	箇条書き設定
*******************************/

@media screen and (max-width: 834px){
.article ul, .article ol {
    padding-left:0; /*　タブレット幅でなぜか左に余白入るのを減らす */
}}


/**************************************************************************************************

	下部

***************************************************************************************************/

/******************************
	関連記事
	ポラロイド風
*******************************/

/* 見出し */
.related-entry-heading{
	display:inline-block;
	font-weight: bold;
	color: #424242;
	text-align:left;
	font-size:1.2em;
	padding: 0.2em 2em 0.2em 1em; 
	margin-bottom: 1.2em;
	background-size: 20px 20px;
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	background:rgba(224,220,214,0.7);
}



/* カード装飾 */
.rect-vertical-card .related-entry-card-wrap {
	border: none;
	box-shadow:0 0 3px #999999;
	text-align:center;
	height:auto;
	padding:5px;
	margin:.8%;
	background-color:#FFF;
}

.rect-vertical-card .related-entry-card-wrap:hover {
	box-shadow:0 0 5px #696969;
}


/* 並べ方 */
.rect-vertical-card .related-list {
	justify-content:start;
}

.related-list{
	margin-bottom:1.5em;
}

 /*　マージン　*/	
.recb-entry-border .related-entry-card-wrap{
	margin:0px 4px 8px 4px;
}


/* タイトル */
.rect-vertical-card .related-entry-card-title{
	font-size:10px;
	font-weight:400;
}



/* 5列表示 */
.rect-vertical-card .related-entry-card-wrap {
	max-width:18.2%;
}


/*800px以下｜4列*/
@media screen and (max-width: 800px){
.rect-vertical-card .related-entry-card-wrap {
	max-width:23%;
}}


/*480px以下｜3列*/
@media screen and (max-width: 480px){
.rect-vertical-card .related-entry-card-wrap {
	max-width:31%;
}}






/*****************************
	装飾｜パンくず
******************************/
.breadcrumb a {
	color:#FFF;
}

.breadcrumb a:hover {
	color:#000;
}

.breadcrumb {
	display: inline-block;
	padding:5px 5px 5px 10px;
	margin:0 0 1em 0;
	font-size:1em;
	color:#424242;
	background-size: 20px 20px; /* テープの太さ */
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	background:rgba(202,195,185,0.6);
	opacity:.7;
}

.widget_breadcrumb_navxt a{
	font-weight:normal !important;
}

.breadcrumb .sp{
	margin-right:0;
	margin-left:.4em;
}


/* 文字*/
.breadcrumb-caption{
	margin-right:.5em;
	margin-left:-.7em;
	font-weight:500;
	color:#424242;
}

.breadcrumb-caption:hover{
 color:#000;
}


/* フォルダアイコン（投稿）とファイルアイコン（固定）を消す */
.fa-folder::before, .fa-file:before{
	display:none;
}

#breadcrumb.breadcrumb .breadcrumb-home a span{
	font-size: 0px; /* 「ホーム」を消す */
}

#breadcrumb.breadcrumb .breadcrumb-home a span::before{
	font-size:17px;
	content:"HOME"; /* 「HOME」を挿入 */
	padding-left:.3em;
	padding-right:.5em;
}


/*****************************
	ページ送り
******************************/

/* 次のページ を消す */
.pagination-next-link {
	display:none;
}

/* < > */
.pager-post-navi a .iconfont {
    color: #A8A8A8;
}

/* カードの枠*/
.pager-post-navi a.prev-post, .pager-post-navi a.next-post {
	background-color:#F4F4F4;
	box-shadow:0 0 2px #999999;
	margin:0 2px;
}

/* 画像サイズ */
.pager-post-navi a figure {
    min-width:60px;
    max-width:60px;
}

/************************************
	関連記事/新着記事エリア
************************************/


/*　タイトルエリア　*/
.is-list-horizontal .card-title {
	font-size:12px;
	line-height:17px; /*行の高さ指定*/
	margin: 0.5em 0.5em;
	padding:2px;
	color:white;
	overflow: hidden;
	text-align:center;
	opacity:.9;
}

/*　タイトルエリアの外側（余白調整）　*/
.widget-entry-cards.card-large-image .card-content {
    margin:0;
    padding:0;
}


/*　テキストエリアの高さ指定　*/
.is-list-horizontal.large-thumb .card-title, 
.is-list-horizontal.large-thumb-on .card-title {
    height:38px;
}

/*　カテゴリーエリア　*/
.info-list-item-categorys .entry-category {
	background-color:#f2ede1;
	padding: 1px 1em;
	margin-right: 8px;
	height: 20px;
	line-height: 17px;
	display: inline-block;
	border:none;
	border-radius: 10px;
}

/*　カードの外側　*/
.is-list-horizontal.large-thumb .widget-entry-card-link,
.is-list-horizontal.large-thumb-on .widget-entry-card-link{
	background-color:#424242;
	padding:5px 7px;
	margin:5px;
	border-radius:4px;
	max-width:12%;
}


/*　ホバー　*/
.is-list-horizontal.large-thumb .widget-entry-card-link:hover,
.is-list-horizontal.large-thumb-on .widget-entry-card-link:hover{
	background-color:#686868;
}


/*　モバイル　*/
@media screen and (max-width: 480px){
.is-list-horizontal.large-thumb .widget-entry-card-link,
.is-list-horizontal.large-thumb-on .widget-entry-card-link{
	padding:2px 5px;
	margin:2px;
	max-width:35%;
	font-size:.7em;
}}
@media screen and (max-width: 480px){
.is-list-horizontal .card-title {
	font-size:10px;
}}

/***********************************
	cocoonの機能｜新着・人気記事
	ショートコード [new_list][popular_list]
************************************/

/* カード装飾 */
.widget-entry-cards .a-wrap {
	border:none;
	box-shadow:0 0 3px #999999;
	display: inline-flex; /* 並べ方 */
	height:auto;
	padding:5px 5px 1px 5px;
	margin-right:.1em;
	margin-bottom:.5em;
	background-color:#FFF;
}

.widget-entry-cards .a-wrap:hover {
	box-shadow:0 0 5px #696969;
}

/* カード周り余白 */
.widget-entry-card-link.a-wrap{
	margin-left:5px;
}

/* 481px以上は4列 */
@media screen and (min-width: 481px) {
.widget-entry-cards.card-large-image .a-wrap{
	width:23%; /* 個数を決定 */
}}

/* モバイル　480px以下は3列*/
@media screen and (max-width: 480px){
.widget-entry-cards.card-large-image .a-wrap {
	width:30%; /* 個数を決定 */
}}

/* タイトル */
.widget-entry-cards.card-large-image .card-content .widget-entry-card-title {
    font-size:auto;
    font-weight: 300;
    line-height: 1.2rem;
    padding:0;
    text-align: center;
}

/* 横スクロール時のタイトル*/
.popular-entry-card-title.widget-entry-card-title.card-title{
	font-size: .5em;
}

/* 文字部分の余白調整　*/
.widget-entry-card-content{
	height:27px;
	padding:1px;
	margin-left: 110px;
}

.widget-entry-cards.card-large-image .card-content {
	padding:.2em 0;
	margin-bottom:1px !important;
	text-align:center;
}


/***********************************
	cocoonの機能｜新着・人気記事
	ショートコード [new_list][popular_list]
	横並びスクロールありver.
************************************/

/* 横スクロール時のタイトル*/
.popular-entry-card-title.widget-entry-card-title.card-title{
	font-size: .4em;
}

.is-list-horizontal.large-thumb .card-title, .is-list-horizontal.large-thumb-on .card-title {
    height:1.5em;
}



/*****************************
	ウィジェット見出し
	（サイドバー見出しも連動）
******************************/

.widget h2 {
}

.widget h3{
	margin:.5em 2em 1.5em;
	font-size:1.2em;
	font-weight: bold;
	text-align:center;
	padding:.1em .2em; /* 上下 左右の余白 */
	border-left:2px dotted rgba(0,0,0,.5);
	border-right:2px dotted rgba(0,0,0,.5);
	box-shadow:0 0 5px rgba(0,0,0,.5); /* 影 */
	background:#e0dcd6;
	opacity:.4;
}

/*****************************
	フッター
	レイアウト
******************************/

/* モバイルで余白を狭くする*/
.footer-mobile {
	padding: 10px 2%;
}





/**********************************************************************************

	モバイル専用ページ｜	メニュー

**********************************************************************************/


/* スライドイン｜左からニョキ */
.navi-menu-content {
	background-color: #f3f0e9; 
	font-size: 14px;
}

.menu-content .menu-drawer {
    padding: 1em;
}


/* 上部｜バツ印エリア */
.menu-close-button	{
	font-size:0;	
	padding: 14px; /* 余白の指定 */
	background: #434343;
	color:#FFF;
}
.menu-close-button::before {
	font-size: 16px; content: "CLOSE";　/* 代わりのテキスト*/
}

/*****************************
	下部｜モバイル メニューバー
******************************/

.mobile-menu-buttons {
	background: #b5aca7;
}


/**************************************************************************************************

	固定記事用

***************************************************************************************************/

/*****************************
	サイトマップ｜カテゴリ一覧
******************************/

/* 文字まわり */
.sitemap ul a{ /* 1階層目 */
	color:#424242;
	font-size:1.5em;
	margin-left:.5em;
	padding-right:.2em;
}

/* ホバー */
.sitemap ul a:hover{
	color:#1967d2;
}

/* ポチ消す */
.sitemap ul li{
	list-style-type:none;
	padding-left:1px;
}

/* 1階層目にだけボーダー */
.sitemap ul li ul li:first-child{ 
	border-top:dotted 1px gray;
	padding-top:1em;
}

.sitemap ul li ul li ul li:first-child{ 
	border:none;
	padding-top:.1em;
}


/* 1階層目 */
.sitemap ul {
	margin-bottom:.5em;
	text-align:right;
	font-weight:800;
	line-height:1em;
}


/* ２階層目以降 */
.sitemap ul li ul{
	text-align:left;
	line-height:.7em;
}

.sitemap ul li ul li{ 
	padding-left:0.2em;
	padding-bottom:5px;
	font-size:0.65em;
	font-weight:400;
}


/* 2階層目 アイコン */
.sitemap ul li ul li:before{ 
	content:"⚫︎";
	margin-right:-5px;
	color:#5cd6a9; /* アイコンの色 */
}


/* 3階層目以降 */

.sitemap ul li ul li ul li:before { 
	content:"・";
	color:#424242; /* アイコンの色 */
}
.sitemap ul li ul li ul li { 
	margin-left:0;
	font-size:0.5em;
	font-weight:500; /* フォント太さ */
}

/* 4階層目以降 */
.sitemap ul li ul li ul li ul li { 
	font-size:13px;
	font-weight:normal; /* フォント太さ */
margin-left:1.8em;
}

.sitemap ul li ul li ul li ul li a{ 
	background:none;
}

/* モバイルでの妙な余白取る */
@media screen and (max-width:480px){
.sitemap ul, .sitemap ol {
	padding-left:5px;
}}

/* ショートコードsitemapで見出しを非表示 */
.sitemap h2{
	display:none;
}


/*****************************
	新着記事｜固定ページで利用
******************************/
.info-list.is-style-frame-border {
	border: .3px solid #d3d3d3;
	background-color:#FFF;
	border-radius:1px;
	padding:.5em .8em;
	opacity:.8;
	box-shadow:inset 0 0 30px rgba(227, 224, 213,.8);
}

.info-list-item {
    padding: 12px 0;
    font-size: 1em;
    line-height: 1.5;
}

/**************************************************************************************************

	プラグイン用

***************************************************************************************************/

/*****************************
	List Category Postsの機能
	記事内にカテゴリー一覧を呼び出す｜ショートコード [catlist]
******************************/

.lcp_catlist li{
	list-style: none; 　/* 点を取る */
}

.lcp_catlist {
	overflow: auto; /* 下にはみ出ないようにする*/
	padding:1px;
	margin:0;
}

.lcp_thumbnail{
	float:left; /* 横並びにする*/
	margin:.5em .2em 1em .2em;
}

/*カードデザイン*/
.lcp_thumbnail.wp-post-image{ 
	max-width:18.1%;
	box-shadow:0 0 2px #999999;
	padding:.3em .3em 1.5em .3em;
	background-color:#F4F4F4;
}

/* モバイル　480px以下は3列*/
@media screen and (max-width: 480px){
.lcp_thumbnail.wp-post-image{
	max-width:31%;
}} 


/***********************************
	いいねボタン｜WP Ulike
************************************/

.wpulike{
	text-align:right;
	padding-right:1em;
}


.wpulike-heart .wp_ulike_general_class {
	box-shadow:none;
	border-radius: 4px;
	background-color:#FFF;
	opacity:.8;
}


/******************************
	下部｜人気のシム用ウィジェット
	WP Ulike
*******************************/

.most_liked_post.wp_ulike_style_simple{
	border-radius:2px;
	border-right:.3px solid #8E8E8E;
	border-bottom:.3px solid #8E8E8E;
	padding:1.5em 1% .6em;
	background:rgba(255, 255, 255, .1);
	box-shadow:0 0 5px rgba(0,0,0,.1); /* 影 */
}


/*　並べ方　親指定*/
div ul.most_liked_post.wp_ulike_style_simple{　
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;　/*　均等に並べる*/
}

ul.most_liked_post.wp_ulike_style_simple{　
	list-style:none;
}

/* 画像の下に名前を並べる*/
.most_liked_post.wp_ulike_style_simple li{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
}

/* サムネサイズ*/
.wp_ulike_thumbnail{
	width:90px;
	margin:0 20px;
	border-radius:50%;
	opacity:.7;
}

@media screen and (max-width: 480px){/* モバイル　480px以下*/
.wp_ulike_thumbnail{
	width:70px;
	margin:0 10px;
}}


/* 文字　*/
.most_liked_post.wp_ulike_style_simple a{
	text-align:center;
	padding:1em;
	padding-top:.2em;
	font-size:11px;
	width:130px
}

@media screen and (max-width: 480px){/* モバイル　480px以下*/
.most_liked_post.wp_ulike_style_simple a{
	text-align:center;
	font-size:9px;
	width:90px
}}



/***********************************
	サーチ&フィルター
************************************/

/* タイトル */
.main-widget-label{
	display:inline-block;
	margin:1em 0;
	font-size: 1.3em;
	font-weight:900;
	padding:.2em 1em;
	letter-spacing:3px;
	background-size: 20px 20px; /* テープの太さ */
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
	background:rgba(228,211,188,.4);
	opacity:.8; /* 透明度 */
}

/* 外枠*/
div .searchandfilter ul{
	padding:20px;
	margin:0 1em;
	border-radius:3px;
	border-right:2px solid #A8A8A8;
	border-bottom:2px solid #A8A8A8;
	background:#f0edeb;
	box-shadow:inset 0 0 30px rgba(181, 176, 159,.8);
	position: relative;
}

@media screen and (max-width:480px){
	div .searchandfilter ul {
	padding:1em .7em;
	margin:0;
}}

/* 外枠の子ボックス*/
div .searchandfilter ul.children{
	padding:.3em .2em;
	margin:0 1em;
	border:none;
	border-radius:3px;
	background:transparent;
	box-shadow:none;
}

.searchandfilter ul {
	padding:0;
}


.searchandfilter li{
	display:inline-block;
	list-style:none;
	margin-left:.5em;
	padding:0;
}

.searchandfilter li.cat-item{
	margin:0;
	padding:2px 5px;
}

.searchandfilter ul > li > ul:not(.children) {
	margin-left: 0;
	padding:0;
	box-shadow: none;
	border-right:none;
	border-bottom:none;
	border-radius:3px;
	background-color:rgba(209, 208, 205,0.3);
}

/* タグ・カテゴリの見出し */
.searchandfilter h4{
	padding-top:0;
	padding-bottom:0;
	margin:1.2em 0 0 0;
	font-size:.9em;
	font-weight:500;
	border:none;
	background-color:transparent;
	box-shadow:none;
}

/* キーワードのフォントサイズ */
.searchandfilter label{
	font-size:.85em;
	padding: 2px;
}

/* 検索窓 */
.searchandfilter input[type="text"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	border-width:1px;
	border-color:#696969;
	border-style:none none solid none;
	border-radius:0;
	width:auto;
	height:33px;
	margin:.2em;
}


/*　プルダウン　*/
.searchandfilter select{
	appearance: none; /* 影と矢印を消す */
	-webkit-appearance: none;
 	-moz-appearance: none; 
	background-color:transparent;
	width:100px;
	height:33px;
	padding:5px 10px;
	margin:.2em;
	border-width:1px;
	border-color:#696969;
	border-style:none none solid none;
	border-radius:0;
	font-size:.9em;
}

/* 送信ボタン */
.searchandfilter input[type="submit"]{
	font-size:1em;
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	margin-top:1em;
	text-decoration: none;
	color: #FFF;
	background: #fd5d35;/*色*/
	border-radius: 4px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
	border: solid 2px #a84f39;/*線色*/
}

.searchandfilter input[type="submit"]:hover {/* 送信ボタン　ホバー */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}




/**************************************************************************
 
	追加CSSクラス用｜ページ毎設定　（オリジナルCSS装飾）

***************************************************************************/

/* マスキングテープ用パーツ　　
	※主に再利用ブロック呼び出し*/

.pko-maskingtape {
	font-size:1.2em;
	font-weight: bold; /* フォント太さ */
	padding:.1em .2em; /* 上下 左右の余白 */
	margin-left:10%;
	margin-right:10%;
	margin-top:-2em;
	margin-bottom:1em !important;
	text-align:center;
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	box-shadow:0 0 5px rgba(0,0,0,.5); /* 影 */
	background:#e0dcd6;
	opacity:.4;
}


/* トグルを付箋風に装飾 */
.pko-toggle-fusen .toggle-button {/*　トグル上部　*/
	padding:.2em .3em; 
	margin-left:4%;
	margin-right:4%;
	margin-bottom:0;
	background-size: 20px 20px; /* テープの太さ */
	border-radius:1px;
	border-left:2px dotted rgba(0,0,0,.1);
	border-right:2px dotted rgba(0,0,0,.1);
	border-top:none;  /*　枠線なし　*/
	border-bottom:1px;
	background:rgba(224,220,214,0.7);
	box-shadow:0 0 5px rgba(0,0,0,.2); /* 影 */
}

.pko-toggle-fusen .toggle-content{ /*　トグルの中身　*/
	margin:0 3em;
}

.pko-toggle-fusen .toggle-checkbox:checked~.toggle-content{ /*　トグルの中身　*/
	border:none;  /*　枠線なし　*/
	padding:1em ;
	margin:0 7%;
	box-shadow: 2px 2px 5px #999999; /* 影 */
	border-bottom: 2px dotted rgba(0,0,0,.3);　/*　レシート風にギザギザ　*/
}