@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/************************************
** 共通の設定
************************************/
@import url(https://fonts.googleapis.com/css?family=Neucha);
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Philosopher);
/*------------------------------
  ヘッダー
------------------------------*/
/*全体*/
#header-container {
	position:relative;
	height:100px;
	box-shadow:0 5px 15px -5px rgba(0,0,0,.8);
}
/*ヘッダーロゴ*/
/*ヘッダーロゴの縦横比がおかしくなるのを修正
  自動設定の場合は以下の流れになる
  ①ロゴの高さがヘッダーの高さと同じ60pxになる
　②これに合わせて親要素の幅が120pxになる
  ③これに合わせてロゴの幅が100%のため、幅が120なる
　結果、高さ60、幅120となり、本来の縦横比ではなくなる*/
.header-container-in.hlt-top-menu .logo-header img {
	max-width:none;		/*親の要素にひきづられないための設定*/
	max-height:100px;	/*親の要素にひきづられないための設定*/
	height:100px;
}
/*モバイル対応*/
@media screen and (max-width:1023px){
	#header-container {
		height:0;	/*モバイルはheader-containerではなくheader-menuにロゴが含まれるためこの領域は不要*/
	}
}
/*------------------------------
  グローバルメニュー
------------------------------*/
/*全体*/
.navi-in .item-label {
	font-size:1rem;
}
/*マウスオーバー時*/
.navi-in .item-label:hover {
	color:#3eb370;				/*文字色を緑に*/
	text-decoration:underline;	/*下線を引く*/
}
/*下記1,2,3の設定は順番があるので注意*/
/*1.選択されている親メニュー*/
.current-menu-parent a{
	color:#3eb370;	/*文字色を緑に*/
}
/*2.サブメニュー*/
.sub-menu a{
	color:initial;	/*色を親から継承しないように*/
}
/*3.選択されている子メニュー*/
.current-menu-item a{
	color:#3eb370;	/*文字色を緑に*/
}
/*------------------------------
  通知エリア
------------------------------*/
/*全体*/
.notice-area {
	font-size:1.3rem;
	font-weight:600;
	text-shadow:1px 1px 5px #000000;	/*文字が見づらいため影をつける*/
}
/*モバイル対応*/
@media screen and (max-width:480px){
	.notice-area {
		font-size:0.8rem;
		font-weight:500;
		text-shadow:1px 1px 3px #000000;/*文字が見づらいため影をつける*/
	}
}
/*------------------------------
  アピールエリア設定
------------------------------*/
/*全体*/
#appeal .appeal-in {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
#appeal .appeal-content {
	max-width:none;
	width:100%;
	max-height:none;
	height:100%;
	background:none;	/*背景が白くなるのを透明にする*/
	padding:0;
	margin:0;
}
/*アピールエリア内のメッセージ*/
#appeal .appeal-message {
	position:relative;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
/*------------------------------
  メイン設定
------------------------------*/
/*全般*/
/*アイキャッチをヘッダーのすぐ下に表示するための設定*/
.page .main {
	border-top:0px;
	padding-top:0px;
	margin-top:0px;
}
/*------------------------------
  ボディ設定
------------------------------*/
/*全般*/

/*親の設定を継承しない要素*/
button, input, select, textarea {
	font-family:inherit;/*フォントを親要素から継承*/
	font-size:100%;		/*フォントサイズを親要素から継承*/
}
/*------------------------------
  コンテンツ設定
------------------------------*/
/*全般*/
.content {
	margin-top:0;	/*無駄な余白を削除*/
}
/*全般*/
.toc,				/*目次*/
.entry-title,		/*エントリータイトル*/
.author-info		/*著者情報*/
{
	display:none;	/*非表示*/
}
/*------------------------------
  カバー設定
------------------------------*/
/*カバー*/
.wp-block-cover.org_cover01 {
	min-height:300px;
	box-shadow:0 0 2px 2px rgba(0,0,0);
}
/*カバーの中のボタン*/
.wp-block-cover .btn-l {
	background-color:unset;
	margin:0;
}
/*カバーの中のボタンの文字*/
.wp-block-cover .btn-l > span {
	font-weight:400;
}
@media screen and (max-width: 480px) {
	/*カバー*/
	.wp-block-cover.org_cover01 {
		min-height:200px;
	}
	/*カバーの中の文字*/
	.wp-block-cover p {
		font-size:1rem;
	}
	/*カバーの中のボタンの文字*/
	.wp-block-cover .btn-l > span {
		font-size:1rem;
	}
}
/*------------------------------
  ＢＯＸ設定
------------------------------*/
.blank-box p.has-background{
	line-height:2em;
}
@media screen and (max-width: 480px) {
	.blank-box {
		margin:1em 0 0 0;
		padding:0.5em;
	}
	.blank-box p.has-background{
		line-height:2em;
		padding:1em;
	}
}
/************************************
** 固定ページ共通の設定
************************************/
/*全般*/
.page .date-tags,					/*投稿日＆更新日*/
.page .new-entry-card-update-date {	/*エントリーカードの更新日*/
	display:none;	/*非表示*/
}
/*エントリーカード*/
.page .new-entry-cards .display-none {
	display:block;
	text-align:right;
	padding-top:0.2em;
}
/*------------------------------
  改行設定
------------------------------*/
@media screen and (min-width:480px) {
	.org_br01 {
		display:none;
  }
}
@media screen and (max-width:480px) {
	.org_br02 {
		display:none;
  }
}
/*------------------------------
  見出し設定
------------------------------*/
/*下線2色*/
/*タイトルの親要素*/
.org_ttl01 {
	position:relative;
	z-index:0;
}
/*文字と下線*/
.org_ttl01 p {
	position:relative;
	width:14em;
	font-size:2rem;
	font-weight:500;
	border-bottom:solid 2px #88cb7f;
}
/*上から重ねる下線*/
.org_ttl01 p:after {
	display:block;
	position:absolute;
	content:" ";
	left:0;
	bottom:-2px;
	width:70%;
	border-bottom:solid 2px #007b43;
}
/*モバイル対応*/
@media screen and (max-width:480px){
	.org_ttl01 p {
		font-size:1.2rem;
		font-weight:400;
	}
}
/*左右「」*/
/*タイトルの親要素*/
.org_ttl02 {
	position:relative;
	z-index:0;
	width:100%;
	text-align:center;
}
/*文字*/
.org_ttl02 p {
	display:inline-block;
	position:relative;
	font-size:2.2rem;
	font-weight:500;
	line-height:1.2em;
	padding:0.5em 0.5em;
	margin:0.75em 0;	
}
/*左「*/
.org_ttl02 p:before {
	display:inline-block;
	position:absolute;
	content:'';
	top:0;
	left:0px;
	width:20px;
	height:30px;
	border-top:solid 3px #e60033;
	border-left:solid 3px #e60033;
}
/*右」*/
.org_ttl02 p:after {
	display:inline-block;
	position:absolute;
	content:'';
	right:0px;
	bottom:0;
	width:20px;
	height:30px;
	border-right:solid 3px #e60033;
	border-bottom:solid 3px #e60033;
}
/*モバイル対応*/
@media screen and (max-width:480px){
	.org_ttl02 p {
		font-size:1.2rem;
	}
}
/*付箋風タイトル*/
.org_ttl03 {
	position:relative;
	z-index:0;
	padding:0;
	margin:0;
}
.org_ttl03 p {
	position:relative;
	width:100%;
	background-color:#ffffff;
	font-size:1.5em;
	font-weight:400;
	border-left:5px solid #007b43;
	padding:.5em .75em;
	margin:1em 0;
}
.org_ttl03 p::before {
	position:absolute;
	z-index:-1;
	content:"";
	left:20px;
	bottom:15px;
	max-width:300px;
	width:90%;
	max-height:300px;
	height:90%;
	/*影*/
	box-shadow:rgba(0,0,0,0.3) -15px 15px 10px;
	-moz-box-shadow:rgba(0,0,0,0.3) -15px 15px 10px;
	-webkit-box-shadow:rgba(0,0,0,0.3) -15px 15px 10px;
	-o-box-shadow:rgba(0,0,0,0.3) -15px 15px 10px;
	-ms-box-shadow:rgba(0,0,0,0.3) -15px 15px 10px;
	/*要素の傾き*/
	transform:translate(-3deg,-3deg);
	-moz-transform:translate(-3deg,-3deg);
	-webkit-transform:translate(-3deg,-3deg);
	-o-transform:translate(-3deg,-3deg);
	-ms-transform:translate(-3deg,-3deg);
}
/*モバイル対応*/
@media screen and (max-width:480px){
	.org_ttl03 p {
		width:100%;
		font-size:1rem;
		font-weight:400;
	}
}
/*下線中央*/
.org_ttl04 {
	position:relative;
	z-index:0;
	text-align:center;
	padding:0;
	margin:0;
}
.org_ttl04 p {
	display:inline-block;
	position:relative;
	font-size:1.5em;
	font-weight:600;
	line-height:1.4;
	padding:0;
	margin:.75em 0;
}
.org_ttl04 p:before {
	display:inline-block;
	position:absolute;
	content:'';
	left:50%;
	bottom:-15px;
	width:100%;
	height:2px;
	background-color:#007b43;
	border-radius:2px;
	/*要素の傾き*/	
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-moz-transform:translate(-50%);
	-o-transform:translate(-50%);
	-ms-transform:translate(-50%);
}
/*------------------------------
  ボタン設定
------------------------------*/
/*浮いているボタン*/
/*親要素*/
.org_btn01 {
	position:absolute;
	left:0;
	margin-left:calc(50% - 16rem);	/*ブラウザの真中に*/
}
/*ボタン*/
.org_btn01s {
	display:inline-block;
	position:relative;
	width:16em;
	height:2.3em;
	background-color:#e60033;
	color:#ffffff;
	font-family:'Indie Flower', cursive;
	font-size:2rem;
	font-weight:500;
	text-align:center;
	text-decoration:none;
	line-height:2.3em;
	border-radius:8px;
	box-shadow:0 0 18px #ee7800;
	box-sizing:border-box;	/*パディングとボーダーを幅と高さに含める*/
	margin:0;
	padding:0;
	/*要素の変化*/
	transition-property:transform;
	-webkit-transition-property:-webkit-transform;
	transition-duration:0.3s;	/*変化にかかる時間*/
	-webkit-transition-duration:0.3s;
	transition-duration:0.3s;	
	transform:translateZ(0);	/*要素に近づいたり離れたりz軸*/
	-webkit-transform:translateZ(0);
	-ms-transform:translateZ(0);
	transform:translateY(-6px);	/*要素に近づいたり離れたりy軸*/
	-webkit-transform:translateY(-6px);
	-ms-transform:translateY(-6px);
	/*アニメーション*/
	animation-name:hover;
	-webkit-animation-name:hover;
	animation-duration:1.5s;
	-webkit-animation-duration:1.5s;
	animation-delay:0.3s;
	-webkit-animation-delay:0.3s;
	animation-timing-function:linear;
	-webkit-animation-timing-function:linear;
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
}
/*ボタンの影*/
.org_btn01s:before {
	position:absolute;
	z-index:-1;
	content:'';
	opacity:0;
	pointer-events:none;/*要素に対するホバーやクリックなどのマウスイベントをキャンセル*/
	top:120%;
	left:5%;
	width:90%;
	height:10px;
	background:radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	background:-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	/*要素の変化*/
	transition-property:transform, opacity;
	opacity:.4;
	-webkit-transition-property:-webkit-transform, opacity;
	transition-duration:0.3s;	/*変化にかかる時間*/
	-webkit-transition-duration:0.3s;
	transform:translateY(6px);	/*要素に近づいたり離れたりy軸*/
	-webkit-transform:translateY(6px);
	-ms-transform:translateY(6px);
	/*アニメーション*/
	animation-name:hover-shadow;
	-webkit-animation-name:hover-shadow;
	animation-duration:1.5s;
	-webkit-animation-duration:1.5s;
	animation-delay:0.3s;
	-webkit-animation-delay:0.3s;
	animation-timing-function:linear;
	-webkit-animation-timing-function:linear;
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
}
/*マウスオーバー時*/
.org_btn01s:hover {
	color:#e60033;
	background-color:#ffffff;
	border:solid 1px #e60033;
}
/*ボタンのアニメーション*/
@keyframes hover {
	50% {
		transform:translateY(-3px);
		-webkit-transform:translateY(-3px);
		-ms-transform:translateY(-3px);
	}
	100% {
		transform:translateY(-6px);
		-webkit-transform:translateY(-6px);
		-ms-transform:translateY(-6px);
	}
}
@-webkit-keyframes hover {
	50% {
		transform:translateY(-3px);
		-webkit-transform:translateY(-3px);
	}
	100% {
		transform:translateY(-6px);
		-webkit-transform:translateY(-6px);
	}
}
/*ボタンの影のアニメーション*/
@keyframes hover-shadow {
	0% {
		transform:translateY(6px);
		opacity:0.4;
		-webkit-transform:translateY(6px);
		-ms-transform:translateY(6px);
	}
	50% {
		transform:translateY(3px);
		opacity:1;
		-webkit-transform:translateY(3px);
		-ms-transform:translateY(3px);
	}
	100% {
		transform:translateY(6px);
		opacity:0.4;
		-webkit-transform:translateY(6px);
		-ms-transform:translateY(6px);
	}
}
@-webkit-keyframes hover-shadow {
	0% {
		transform:translateY(6px);
		opacity:0.4;
		-webkit-transform:translateY(6px);
	}
	50% {
		transform:translateY(3px);
		opacity:1;
		-webkit-transform:translateY(3px);
	}
	100% {
		transform:translateY(6px);
		opacity:0.4;
		-webkit-transform:translateY(6px);
	}
}
/*モバイル対応*/
@media screen and (max-width:480px){
	.org_btn01 {
		margin-left:calc(50% - 8rem);	/*ブラウザの真中に*/
	}
	.org_btn01s {
		font-size:1rem;
	}
}
.org_btn02 {
	display:block;
	position:relative;
	width:22em;
	height:3em;
	background-color:#ffffff;
	color:#f08300;
	text-align:center;
	overflow:hidden;	/*はみだした場合*/
	border:1px solid #f08300;	
	margin:1em auto;	
}
.org_btn02 a {
	color:#f08300;
	font-size:1.5em;
	text-decoration:none;
}
/*------------------------------
  矢印設定
------------------------------*/
/*流れる矢印*/
/*親要素*/
.org_arr01{
	position:relative;
	margin-top:0;
	margin-left:calc(50% - 15px);
}
.org_arr01 span{
	display:block;
	width:30px;
	height:30px;
	border-bottom:5px solid #2ca9e1;
	border-right:5px solid #2ca9e1;
	transform:rotate(45deg);
	animation:flow 2s infinite;
}
.org_arr01 span:nth-child(2){
	animation-delay:-0.2s;
}
.org_arr01 span:nth-child(3){
	animation-delay:-0.4s;
}
@keyframes flow {
	0%{
		opacity:0;
		transform:rotate(45deg) translate(-20px,-20px);
	}
	50%{
		opacity:1;
	}
	100%{
		opacity:0;
		transform:rotate(45deg) translate(20px,20px);
	}
}
/*モバイル対応*/
@media screen and (max-width:480px){
.org_arr01{
	margin-left:calc(50% - 10px);
	margin-bottom:0;
}
.org_arr01 span{
	width:20px;
	height:20px;
	border-bottom:3px solid #2ca9e1;
	border-right:3px solid #2ca9e1;
	animation:flow2 2s infinite;
}
}
@keyframes flow2 {
	0%{
		opacity:0;
		transform:rotate(45deg) translate(-10px,-10px);
	}
	50%{
		opacity:1;
	}
	100%{
		opacity:0;
		transform:rotate(45deg) translate(10px,10px);
	}
}
/*------------------------------
  SNSシェアボタン設定
------------------------------*/
.ss-top {
	margin-top:1em;
}
.button-caption { display: none; }
.sns-share-buttons a {
	height:25px;
	font-size:14px; 
	border-radius:3px;
	box-shadow:0px 1px 3px rgba(0, 0, 0, 0.18);
}
.bc-brand-color-white.sns-share a {
	font-size:20px;
	text-shadow:0px 1px 3px rgba(0, 0, 0, 0.18);
	border:none;
	box-shadow:none;
}
/************************************
** smart Slider 3の設定
************************************/
.sm3-txt01 {
	font-size:1.2em;
}
/************************************
** Contact Form 7の設定
************************************/
/*見出し欄*/
.inquiry th {
	width:30%;
	background:#f8fbf8;
	color:#000000;
	font-size:1rem;
	text-align:left;
	border:solid 1px #c0c6c9;
	padding-right:5px;
}
/*内容欄*/
.inquiry td {
	font-size:1rem;
	border:solid 1px #c0c6c9;
}
/*テキスト欄*/
.inquiry .textsp,
.inquiry .mailsp,
.inquiry .tel,
.inquiry .p-postal-code,
.inquiry .prefectures,
.inquiry .p-locality,
.inquiry .content {
	height:3em;
	font-size:1rem;
}
/*項目設定 全角入力制御*/
.inquiry .textsp,
.inquiry .p-locality,
.inquiry .content {
	ime-mode:active;	/*全角*/
}
/*項目設定 半角入力制御*/
.inquiry .mailsp,
.inquiry .tel,
.inquiry .p-postal-code {
	ime-mode:inactive;	/*半角*/
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr, .entry-content table {
	border:solid 1px #c0c6c9;	/*枠線*/
}
/*必須の文字の調整*/
.haveto {
	position:relative;
	bottom:1px;
	background:#e95464;
	color:#ffffff;
	font-size:0.8rem;
	border-radius:2px;
	padding:5px;
	margin-right:5px;
}
/*任意の文字の調整*/
.any {
	position:relative;
	bottom:1px;
	background:#2ca9e1;
	color:#ffffff;
	font-size:0.8rem;
	border-radius:2px;
	padding:5px;
	margin-right:5px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item {
	display:block;
}
/*送信ボタンのデザイン変更*/
.spam1 {
	margin-right:10px;
}
#formbtn {
	display:block;
	width:20em;
	background:#ffffff;
	color:#ee7800;
	font-size:1em;
	font-weight:bold;
	border:2px solid #ee7800;
	padding:0.8em;
	margin:1em auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover {
	background:#ee7800;
	color:#ffffff;
	border-radius:2px;
}
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px) {
	/*見出しと内容の設定*/
	.inquiry th, .inquiry td {
		display:block!important;
		width:100%!important;
		border-top:none!important;
		/*ボックスサイズの算出方法*/
		box-sizing:border-box!important;
		-webkit-box-sizing:border-box!important;
		-moz-box-sizing:border-box!important;
	}
	/*最初の行の設定*/
	.inquiry tr:first-child th {
		border-top:1px solid #c0c6c9!important;
	}
	/*必須・任意の文字の設定*/
	.inquiry .haveto, .inquiry .any {
		font-size:0.8em;
	}
	#formbtn {
		width:15em;	/*幅*/
	}
}
/*------------------------------
  smartSlider3
------------------------------*/
.sm3_txt01 {
	color:#007b43;
	font-weight:500;
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}
/*------------------------------
  googleMap設定
------------------------------*/
.googleMap {
	min-height:500px;
	box-shadow:0 0 5px #000000;
}
@media screen and (max-width: 480px) {
	.googleMap {
		min-height:250px;
		box-shadow:0 0 5px #000000;
	}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width:1240px){
}

/*1023px以下*/
@media screen and (max-width:1023px){
}

/*834px以下*/
@media screen and (max-width:834px){
}

/*480px以下*/
@media screen and (max-width:480px){
}