@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

/*テーマカラー スカーレット */

/* 特に明るい #FCEBE7 rgba(252,235,231) */
/* 明るい #F29E8B rgba(242,158,139) */
/* 少し明るい #EE775D rgba(238,119,93) */
/* テーマカラー #EA5532 rgba(234,85,50) */
/* 少し暗い #CF3715 rgba(207,55,21) */
/* 暗い #A12B10 rgba(161,16,43) */
/* 特に暗い #2E0C04 rgba(46,12,4) */

/* スカーレットの補色／インディゴより若干明るい */

/* 特に明るい #E5F2FE rgba(229,242,254) */
/* 明るい #0D88FB rgba(13,136,251) */
/* 少し明るい #036ED2 rgba(3,110,210) */
/* 補色 #0254A5 rgba(2,84,165) */
/* 少し暗い #01396E rgba(1,57,110) */
/* 暗い #001F3C rgba(0,31,60) */
/* 特に暗い #001A32 rgba(0,26,50) */

.parallax-window {
    min-height: 400px;
    background: transparent;
}
strong{
	color: #CF3715; /* 少し暗い #CF3715 rgba(207,55,21) */
}
/*ぽっかぽか*/
body.page-pokka .entry-content p{
	font-size: 1rem;
	line-height: 2;
	margin: 20px 0 30px;
}
.page-pokka h2.align-center {
	display:flex;
	align-items:center;
}
/*タイトルの左右にライン引*/
.page-pokka h2.align-center::before {
	margin-right:5px;
	border-top:1px solid #F29E8B;
	content:"";
	flex-grow:1;
}
/*タイトルの左右にライン引*/
.page-pokka h2.align-center::after {
	margin-left:5px;
	border-top:1px solid #F29E8B; 
	content:""; 
	flex-grow:1;
}
/*イメージを横長にカット*/
.pokka-img-hr{
	height: 300px;
	object-fit: cover;
}
.trim-top{
	object-position: 100% 10% ;
}
/*内部コンテンツを等間隔*/
.contents-box{
	display: flex;
	justify-content: space-between; /*コンテンツ内は等間隔*/
}
.contents-item{
	width: 100%;
	margin: 0 15px;
}
.contents-item:first-child{
	margin-left: 0;
}
.contents-item:last-child{
	margin-right: 0;
}
.image-wrap{
	position: relative;
	display: block;
	font-size: 0;
}
.image-wrap img{
	vertical-align: bottom;
}
.image-wrap span{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: .8rem;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}
.image-wrap .description{
	font-size: .9rem;
	color: white;
	padding: 4px 8px;
	position: absolute;
	display: inline-block;
	bottom: 0;
	width: 100%;
	background: rgba(207,55,21, .7);
}
.img-level-4{
	height: 150px;
	object-fit: cover;
}
.Explanation{
	font-size: .9rem;
}
.display-posts-listing .date::before {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	content: "\f017";
	padding-right: 4px;
}

.display-posts-listing .date {
	display: block;
	color: #e40053;
	font-size: .8rem;
}
body{
	text-align: justify;
	text-justify: inter-ideograph;
}
main#main{
	margin-top: 0 !important;
}
#footer-off{
	background-position: center center;
	background-size: cover;
	background-image: url(https://tobe-pokkapoka.net/wp/wp-content/uploads/2020/03/children.png);
}
/*bg-slider内のアイコンはPCで非表示*/
.site-icon{
	display: none;
}
/*カテゴリーラベル*/
.cat-label{
	padding: 8px;
	top: 0;
	left: 0;
	border: none;
}
/*カルーセル内画像左肩のカテゴリー名*/
.cat-label-1{
	background-color: rgba(207,55,21, .8);
}
.cat-label-5{
	background-color: rgba(44, 169, 225, .9);
}
/*DisplayPost飾り*/
.display-posts-listing a.title::before {
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	padding-right: 6px;
	content: '\f075';
}
.head-sub-menu{
	position: absolute;
	right: 0;
	top: 0;
	margin: 10px;
	z-index: 2;
}
.head-sub-menu span{
	font-size: .9rem;
	background: #EA5532;
	padding: 10px;
	text-align: center;
}
.head-sub-menu i{
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
}
.head-sub-menu span a > i, .head-sub-menu span > a{
	color: #FFF;
	text-decoration: none;
}
.head-sub-menu span:hover{
	background: #FFF;
	color:  #EA5532;
}
.head-sub-menu a:hover, .head-sub-menu a:hover i{
	color: #EA5532 !important;
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6, .article h7{
	font-family: 'Sen','Arial','Bellota Text', "新ゴ R";
	margin: 40px 0 20px;
	padding: 10px 20px;
	border: none;
	background: none;
	color: #EA5532;
}
.article h2{
	font-weight: bold;
	font-size: 2rem;
}

.align-center{
	text-align: center;
}

/* 記事に付くアイキャッチサイズ */
.eye-catch img {
	height: 250px;
	object-fit: cover;
}
.headline_area{
	position: absolute;
	text-align: center;
	min-width: 35vw;
	height: 140px;
	padding: 0 30px;
	bottom: 0;
	border-radius: 20px 20px 0 0;
	z-index:2;
}
.headline_area_bg{
	position: absolute;
	bottom: -0.5px;
	margin: 0 auto;	
	background-image: url('https://tobe-pokkapoka.net/wp/wp-content/uploads/2020/04/pokka-cat.png');
	background-repeat: no-repeat;
	opacity: .9;
	width: 500px;
	height: 150px;
}
.headline_area_inner{
	position: relative;
	text-align: center;
	top: 60%;
	transform: translateY(-50%);
	z-index:9;
}
.headline{
	font-family: 'Bellota Text', cursive, 'Cardo', "新ゴ R", serif ;
	font-size: 3rem;
	line-height: 1.2;
}

.animated{
	animation-delay: 2s;
	transition : all 4000ms;
}

@font-face {
	/*フォントの名前*/
	font-family: "pastel-crayon";
	/*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
	src: url("https://tobe-pokkapoka.net/font/pastel-crayon.woff") format("woff");
}
@font-face {
	font-family: "Shintia-Script";
	src: url("https://tobe-pokkapoka.net/font/Shintia-Script.woff") format("woff");
}
@font-face {
	font-family: "MkPOP";
	src: url("https://tobe-pokkapoka.net/font/851MkPOP.woff") format("woff");
}
.pastel-crayon{
	font-family: "pastel-crayon";
}
.Shintia-Script{
	font-family: "Shintia-Script";
}
.MkPOP{
	font-family: "MkPOP";
}
.eiji{
	font-size: 15vw;
	opacity: .08;
	color: #FFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	margin: auto;
}
.half-circle{
	position: absolute;
	bottom: 0;
}
/*グローバルメニューのうちホーム画面のみhomeボタン非表示*/
/* .home ul#menu-main li:first-child だとサブメニューの先頭項目も非表示になる*/
.home ul#menu-main > li:first-child{
	display: none;
}
/*グローバルナビ含むヘッダー*/
#header-container{
	font-family: "新ゴ R";
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
	border-bottom: solid 2px #EA5532; /*テーマカラー */
	z-index: 999;
}
#header-container .navi.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
	-webkit-transition: all .4s ease 0s,background .6s ease .2s;
	transition: all .4s ease 0s,background .6s ease .2s;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	border-bottom: solid 2px #EA5532; /*テーマカラー */	
}
#navi{
	z-index: 99;
}
#header-container .navi.hide{
	transform: translateY(-100%);
}
#navi .navi-in a:hover, .navi-footer-in a:hover{
	color: #fff;
	font-weight: bold;
	background-color: rgba(234, 85, 50, .9); /*テーマカラーより若干濃く #004A7F #0068b7 rgba(0, 104, 183) */
}
/*subメニュー*/
ul.sub-menu{
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
	border-bottom: solid 2px #EA5532; /*テーマカラー */
}
i.fas{
	color: #EA5532;
}
.menu-item a:hover .fas {
	color: #FFF;
}
/*サブメニュー ロールオーバー時,テキストカラー変更*/
#sub-menu ul{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	margin: 0;
	padding: 6px;
}
#sub-menu ul li {
	display: block;
	padding: 0;
	margin-left: 10px;
}
#sub-menu a{
	font-size: 0.8rem;
	color: #fff;
	display: inline-block;
	box-sizing: border-box;
	text-decoration:none;
	background: #de4307;
	padding: 0.3rem 0.5rem;
}
#sub-menu a:hover{
	color: #000;
	background: rgba(242, 156, 43, .9);　/*#f29c2b*/
}
.author-info, body:not(.single) .date-tags{
	display: none;
}
/*スライダー（slick）*/
.bg-slider {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 50vh;
	background-position:center center;
	background-repeat: no-repeat;
	/*iPhoneでfixedをすると画像の一部しか表示されない。将来、vegasに移行予定*/
	background-size: cover;
	/*background-attachment: fixed;*/
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.home .bg-slider{
	height: 60vh;
}
.bg-header{
	text-align: center;
	font-family: "新ゴ R";
	color: #FFF;
	text-shadow: 
		#222 1px 1px 5px, #222 -1px 1px 5px,
		#222 1px -1px 5px, #222 -1px -1px 5px;
	z-index: 1;
}
.bg-header h1{
	font-size: 6vw;
	line-height: 1.2;
}
.s_cover{
	filter: brightness(.1);
	background-image: url(https://tobe-pokkapoka.net/wp/wp-content/uploads/ami.png);
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.scroll-down{
	position: absolute;
	z-index:2;
	bottom: 0;
	margin: 0 auto;
}
/*背景写真を暗く 1*/
.bg-dark{
	color: white;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}
.bg-dark img{
	filter: brightness(.4);
}
/*背景写真を暗く 2*/
.bg-dark::before{
	content: '';
	background: inherit;/*.bgImageで設定した背景画像を継承する*/
	filter: blur(1px);
	filter: brightness(50%) ; /* blur(1px) brightness()の後に続けてもよい*/
	position: absolute;
	/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;/*重なり順序を一番下にしておく*/
}
.bg-dark h2, .bg-dark h3{
	color: white;
}
div.bg_01{
	background: url(https://tobe-pokkapoka.net/wp/wp-content/uploads/2020/03/bg_01.jpg) no-repeat center center fixed;
	background-size: cover; /* 背景画像だけを親要素の幅まで拡げる */
}
div.bg_02{
	background: url(https://tobe-pokkapoka.net/wp/wp-content/uploads/2020/03/bg_02.jpg) no-repeat center center fixed;
	background-size: cover; /* 背景画像だけを親要素の幅まで拡げる */
}
div.bg_03{
	background: url(https://tobe-pokkapoka.net/wp/wp-content/uploads/2020/03/bg_03.jpg) no-repeat center center fixed;
	background-size: cover; /* 背景画像だけを親要素の幅まで拡げる */
}
div.bg_04{
	background: url(https://tobe-pokkapoka.net/wp/wp-content/uploads/2020/03/bg_04.jpg) no-repeat center center fixed;
	background-size: cover; /* 背景画像だけを親要素の幅まで拡げる */
}
.pokka_02{
	background: url(https://tobe-pokkapoka.net/wp/wp-content/uploads/2020/03/pokkapoka_02.jpg) no-repeat center center;
	background-size: cover; /* 背景画像だけを親要素の幅まで拡げる */
}
/* フッター住所 */
.footer_address{
	display: inline-block;
	width: 100%;
	font-size: .8rem;
	text-align: center;
}
/*フロート解除*/
.clearfix::after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	font-size: 0.1em;
	line-height: 0;
	visibility: hidden;
	overflow: hidden;
}
.full-width{
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	margin: 0 calc(50% - 50vw);
	padding: 50px calc(50vw - 50%); /*div要素そのものの幅は維持しつつ*/
	overflow: hidden;
	background-attachment: fixed; /* 背景画像固定、パララックス効果 */
	z-index: 0;
}
.dir-row{
	flex-direction: row;
}
.full-wide{
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	padding: 0;
	margin: 0 -50vw;
	background-repeat:  no-repeat; /* 画像の繰り返しを指定  */
	background-position: center center;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* 笑顔アイコン */
ul.lahgh li{
	padding-left: 1.2em;
	text-indent: -1.3em;
}
ul.laugh li::before{
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	padding-right: 6px;
	color: #EE775D;	
	content: '\f599';
}
dl.lahgh dt{
	padding-left: 1.2em;
	text-indent: -1.3em;
}
dl.laugh dt::before{
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	padding-right: 6px;
	color: #EE775D;	
	content: '\f599';
}/*リンクサムネイル画像のはみ出し防止*/
figure.card-thumb img {
	vertical-align: bottom;
}
/* 記事内画像（img）＋リンク(a)にhoverで隣接イメージを拡大 */
figure.carousel-entry-card-thumb, figure.card-thumb{
	overflow: hidden;
}
figure.card-thumb img:hover, .a-wrap:hover img {
	filter: brightness(.7);
	transform: scale(1.2);	/*画像の拡大率*/
	transition-duration: 0.5s;	/*変化に掛かる時間*/
	animation-timing-function: ease;
}
h2.border-left{
	border-left: 3px solid #0254A5;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
	/*必要ならばここにコードを書く*/
}

/*1023px以下*/
@media screen and (max-width: 1023px){
	/*必要ならばここにコードを書く*/
	.bg-header img.site-icon{
		display: none;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*必要ならばここにコードを書く*/
	.head-sub-menu{
		display: none;
	}
	#header-container{
		display: none;
	}
	/*subメニュー*/
	#header-container, .sub-menu{
		box-shadow: none;
		border: none;
	}
	.headline_area{
		max-height: 90px;
	}
	.bg-header h1 {
		font-size: 8vw;
	}
	.headline{
		font-size: 2rem;
	}
	ul.sub-menu{
		box-shadow: none;
		border-bottom: none; /*テーマカラー */
	}
	.site-icon{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	div.bg_04{
		display: flex;
		flex-direction: column;
	}
	iframe.facebook{
		width: 100vw;
	}
	/*内部コンテンツを等間隔*/
	.contents-box{
		flex-direction: column;
	}
	.contents-item{
		margin: 0;
	}
	body.page-pokka .entry-content p{
		line-height: 1.7 !important;
	}
	.page-pokka h2.align-center {
		padding: none !important;
	}
	.page-pokka h2:before, .page-pokka h2:after {
		display: none;
	}
	section.align-center{
		text-align: left;
	}
	section.align-center br{
		display: none;
	}

}

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

}

/* ボタン */
section.btn-box {
  text-align: center;
  margin-top: 50px;
}
section.btn-box input.wpcf7-form-control {
    display: inline-block;
    font-size: 0.94rem;
    padding: 10px 30px;
    border: 3px solid var(--theme-color-lightest);
    background-color: #f5f8fa;
    width: auto;
    margin: 3px;
    border-radius: 5px;
    cursor: pointer;
}