/*
Theme Name: Lightning Child kibounomori
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: lightning
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
Tags: 
Version: 0.0.1
*/
/* --- Google Webフォント -------------- */
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
body ,body *{
	font-family: 'Sawarabi Gothic', sans-serif;
}


:root {
	--my-keycolor :        #5aa169;
	--my-keycolor-dark :   #437a58;
	--my-keycolor-light :  #A6CEB3;
	--my-backcolor :       #fff;
	--my-color :           #fff;

	--my-color-h2 :        #5aa169;
	--my-color-h3 :        #5aa169;

	--roundedCorners :     #437a58;
	--roundedCorners2 :    #5aa169;

	--
}
@media {
	:root {
		--my-keycolor :        #5aa169;
		--my-keycolor-dark :   #437a58;
		--my-keycolor-light :  #A6CEB3;
		--my-backcolor :       #fff;
		--my-color :           #fff;

		--my-color-h2 :        #5aa169;
		--my-color-h3 :        #5aa169;

		--roundedCorners :     #437a58;
		--roundedCorners2 :    #5aa169;
		}
}


/* --- Google reCAPTCHAの保護マークを非表示 -------------- */
/* --- ※別途、サイトに表記する必要がある -------------- */
div.grecaptcha-badge { visibility: hidden; }

p:empty {
	display: none;
}
/* --- Post Grid プラグイン 画像が無い場合に表示しない-------------- */
div.layer-media:empty {
	display: none;
}

/* --- タグの直前で改行する -------------- */
.br {
	display:block;
}

/* --- 1文字インデント -------------- */
.indent {
	padding-left:1em;
}
/* --- 画像 CAPTION 指定時のマージン-------------- */
.wp-caption {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* --- サイドバー ----------------------------------------------------------------------- */
.sideSection > .widget h3 {
	font-size: 14pt;
}


/*--- DIV 角丸 ---------------------------------------------------------------------------*/
div.roundedCorners ,
div.textBunner {
	border:4px solid var(--roundedCorners );
	border-radius: 10px;
	box-sizing:border-box;
	padding:15px;
}
/* --- ゴーストボタン ------------------------ */
a.btn-ghostex {
	display: inline-block;
	border: 1px solid var(--my-keycolor);
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	padding:10px 12px 7px 12px ;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
	font-size:12px;
	line-height: 1em;
	margin: 0px 0px 0px 8px;

}
.btn-ghostex:hover {
	color: #fff;
	background: var(--my-keycolor);
}
/* --- リンクカラー -------------- */
/* Origin�U（Bootstrap4） */
a {
		color: var(--my-keycolor);
}
a:hover {
		color: var(--my-keycolor-dark);
}

/* --- スライドショー画像上の文字背景 -------------- */
/*    JavaScriptで追加される要素（テーマ本体に手を加えないため）    */
div.slide-text-container {
	min-width:10% ;          /*  最小横幅の設定  */
	max-width:90% ;          /*  最大横幅の設定  */
	display: inline-block ;
	text-align:center ;
	border-radius: 10px 10px 10px 10px ;
	padding: 5px ;
	background-color:rgba(255,255,255,0.75) ;
}
/* --- スライドショー画像上のナビゲーション prev next -------------- */

/* Origin（非推奨） */

#top__fullcarousel a.carousel-control {
	width:30px;
	background-image:none;
	/* background-color:rgba(226,108,144,0.75) ; */
	background-color:rgba(255,255,255,0.50) ;
}
#top__fullcarousel a.right {
	margin-right:5px;
}
#top__fullcarousel a.left {
	margin-left:5px;
}

	#top__fullcarousel a.carousel-control i {
		position:absolute;
		top:50%;
		left:0;					/*          */
		right:0;				/* 中央寄せ */
		margin:0 auto;	/*          */
		z-index:5;
		display:inline-block;
		color: var(--my-keycolor);
		text-shadow:none;
	}

/* Origin�U（Bootstrap4） */
a.carousel-control-prev,
a.carousel-control-next {
	width:30px;
	background-image:none;
	/* background-color:rgba(226,108,144,0.75) ; */
	background-color:rgba(255,255,255,0.50) ;
}
a.carousel-control-next {
	margin-right:5px;
}
a.carousel-control-prev {
	margin-left:5px;
}

	a.carousel-control-prev *,
	a.carousel-control-next * {
		position:absolute;
		top:50%;
		left:0;					/*          */
		right:0;				/* 中央寄せ */
		margin:0 auto;	/*          */
		z-index:5;
		display:inline-block;
		color: var(--my-keycolor);
		text-shadow:none;
	}

/* --- ページタイトルのアイキャッチ画像 -------------- */
.page-header-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
		border:0px solid red;
}
@media screen and (max-width: 992px) {
	.page-header-image {
	    width: 100%;
	    height: auto;
	    overflow: hidden;
			border:0px solid green;
	}

}
 
.page-header-image img {
    width: 100%;
}

/* --- 2カラムコンテンツの幅変更 -------------- */
@media screen and (min-width: 992px) {
	div.col-md-8 {
			width: 73%;
	}
	.col-md-offset-1 {
			margin-left: 2%;
			width: 25%;
	}

}

/* --- 投稿内のグリッド表示 ２カラム-------------- */
div.grid2col {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(auto-fit, 300px);
	padding-left:20px;
}

/* --- 投稿内のグリッド表示 ３カラム-------------- */
div.grid3col {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(auto-fit, 190px);
	padding-left:20px;
}

/* --- 投稿内で画像上に重ねる文字 -------------- */
div.overlayimg {
	position: relative;
}
	div.overlayimg div.overlaytext {
		position: absolute;
		bottom: 10px;
		right: 10px;
		border-radius: 10px 10px 10px 10px;
		padding: 10px;
		background-color: rgba(255,255,255,0.75);
		border: 1px solid #fff;
	}
		div.overlayimg div.overlaytext p {
			margin:0;
		}


@media screen and (max-width: 576px) {
	div.overlayimg div.overlaytext p ,
	div.overlayimg div.overlaytext p * {
		font-size: 2.5vw !important;
		line-height: 1.3em;
		margin:7px 0px 0px 0px;
	}
}

/* --- フッターメニュー -------------- */

.footerMenuEX ul.nav{
	display:unset
}
	.footerMenuEX ul.nav > li.menu-item{
		display:inline-block;
		vertical-align: top;
		border:0px double #ccc;
		font-weight:bold;
		width:auto;
		padding:2px;
		margin:2px;
	}
		.footerMenuEX ul.sub-menu {
			margin:0 0 0 0;
			padding:0 0 0 10px;
		}
			.footerMenuEX ul.sub-menu > li {
				display:block;
				border-left:1px solid var(--my-keycolor-light);
				font-weight:normal;
			}
.footerMenuEX li {
	margin:.3em .5em .2em .5em;
	padding:0 0 0 5px;
}
.footerMenuEX a,
.nav li a {
	color: var(--my-keycolor);
	font-size:14px;
}
.footerMenuEX a:hover,
.nav li a:hover {
	color: var(--my-keycolor-dark);
}

.copySection {
    clear: both;
    display: block;
}

/*
  ---------------------------------------------
   Post Grid
  ---------------------------------------------
*/

/* グリッド表示 枠の色 */
div.grid-items > div.item{
	border:1px solid var(--my-keycolor);
}
div.post-grid > div.pagination > div.paginate {
	margin:  0 auto;
}
div.post-grid > div.pagination > div.paginate > .current{
	color: var(--my-keycolor-dark) !important;
	background-color:#fff !important;
	border:1px solid var(--my-keycolor) !important;
}
div.grid-items > div.item .element-media{
		margin: 5px 0 0 0;
}
div.grid-items > div.item .title_link{
		margin: 5px;
}
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━
	ウィジット
━━━━━━━━━━━━━━━━━━━━━━━━━━
*/