@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
*/

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



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/* トップページの画像 */
.main {
	padding: 0px 29px;
}

.media_image-2 {
	/*PC用*/
	display: block !important;
	margin-right: -30px !important;
	margin-left: -30px !important;
	width: auto;
}

.media_image-3 {
	/*スマホ用*/
	display: none !important;
}


.page .entry-title {
	display: none;
}


@media screen and (max-width:480px) {

	/*画面幅が480px以下のとき*/
	.media_image-2 {
		/*PC用*/
		display: none !important;
	}

	.media_image-3 {
		/*スマホ用*/
		display: block !important;
		margin-right: -30px !important;
		margin-left: -30px !important;
		width: auto;
	}

	.navi {
		display: none;
	}

	.logo {
		display: none;

	}
}

.logo {
	text-align: left;
}

.header {}

/* 
* ヘッダーロゴ(テキスト)の反対側に問い合わせボタン表示
*/
div#header-in {
	/* ヘッダーロゴ(テキスト)と問い合わせボタンを横並び */
	flex-direction: row;
}

div#header-sp {
	flex-direction: column;
}

.header-in .logo-header {
	/* ヘッダーロゴ(テキスト)と問い合わせボタンの位置を両端にする */
	margin-right: auto;
}

.header-contact {
	/* 問い合わせボタンにパディングを追加（見た目を整える） */
	padding: 10px 0;
}

.header-sp {
	/* スマホ用 */
	display: none;
}

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

	/*必要ならばここにコードを書く*/
	.header-contact {
		display: none;
	}

	/* スマホ用ボタンを表示し、縦に並べる */
	.header-sp {
		display: flex;
		/* フレックスボックスを使う */
		flex-direction: column;
		/* 要素を縦に並べる */
		align-items: center;
		/* 要素を中央に揃える */
		justify-content: center;
		/* 必要に応じて調整 */
		padding: 10px 0;
		/* 余白を追加（オプション） */
	}

	.navi {
		display: none;
	}

	.logo {
		display: none;

	}

	main.main,
	div.sidebar {
		padding: 0 16px;
	}
}

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

	/*必要ならばここにコードを書く*/
	.header-contact {
		display: none;
	}

	/* スマホ用ボタンを表示し、縦に並べる */
	.header-sp {
		display: flex;
		/* フレックスボックスを使う */
		flex-direction: column;
		/* 要素を縦に並べる */
		align-items: center;
		/* 要素を中央に揃える */
		justify-content: center;
		/* 必要に応じて調整 */
		padding: 10px 0;
		/* 余白を追加（オプション） */
	}

	.navi {
		display: none;
	}

	.logo {
		display: none;

	}

	main.main,
	div.sidebar {
		padding: 0 16px;
	}
}

/*グローバルメニュー メニュー項目の左右の余白*/
#navi .navi-in>ul>li>a {
	font-size: 21px;
	padding-left: 1.6em;
	padding-right: 1.6em;
	padding-bottom: 1.6em;
	padding-top: 1.6em;

}

/*ホバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after {
	position: absolute;
	/*線の位置を絶対配置に*/
	content: "";
	/*文字はなし*/
	left: 0px;
	/*線の位置*/
	bottom: 0;
	/*線の位置*/
	height: 3px;
	/*線の高さ*/
	width: 100%;
	/*幅いっぱいに線を引く*/
	background: #246640;
	/*線の色*/
	transform: scale(0, 1);
	/*ホバー前は線を消す*/
	transition: 0.3s;
	/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after {
	transform: scale(1);
	/*マウスオーバー後、線を100%出す*/
}

/*メニューの色を薄くつける*/
#navi .navi-in>ul>li {
	border-color: #4D4D4D;
	background-color: #EBEBEB;
	height: 80px;
}

#navi .navi-in a:before {
	transform: scale(1);
	/*マウスオーバー後、線を100%出す*/
	position: absolute;
	/*線の位置を絶対配置に*/
	content: "";
	/*文字はなし*/
	left: 0px;
	/*線の位置*/
	bottom: 0;
	/*線の位置*/
	height: 3px;
	/*線の高さ*/
	width: 100%;
	/*幅いっぱいに線を引く*/
	background: #3eb370;
	/*線の色*/
}

/* メニューの区切り線 */
#navi .navi-in>ul>li {
	border-right: 2.5px solid #ffffff;
}

#navi .navi-in>ul>li:last-child {
	border-right-width: 0;
}

.navi-in>ul>.menu-item-has-children>a::after {
	right: 10px;
}

.navi {
	height: 100px !important;
}

/*.wrap{
	width:1556px;
}*/

/*選択中のメニュー項目にアンダーライン*/
.current-menu-item:not(:first-child):after {
	position: absolute;
	/*線の位置を絶対配置に*/
	content: "";
	/*文字はなし*/
	left: 0px;
	/*線の位置*/
	bottom: 0px;
	/*線の位置*/
	height: 2px;
	/*線の高さ*/
	width: 100%;
	/*幅いっぱいに線を引く*/
	background: #246640;
	/*線の色*/
}