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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* モバイルトップメニュー */
@media screen and (max-width: 480px){
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		color: #000;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}
/**アイコン画像余白**/
.site-name-text img {
margin-top: 15px;
margin-bottom: 0px;
}
/*グローバルナビ*/
/************************
* グローバルナビ
/************************/
.header-container .navi {
background: #f2f2f2;
box-shadow: 0px 3px 5px 0px #333; /*影*/
}
#navi ul li a{
color: #000; /*メインメニューにポインタを置く前の文字色*/
}
#navi ul li a:hover{
color: #000; /*メインメニューにポインタを置いたときの文字色*/
}
ul.sub-menu li a {
color: #000!important; /*サブメニューにポインタを置く前の文字色*/
}
ul.sub-menu li a:hover {
color: #000!important; /*サブメニューにポインタを置いたときの文字色*/
}
#navi .navi-in>.menu-header .sub-menu {
color:#fff;
}
#navi .navi-in>.menu-header .sub-menu {
background:#ff9;
}
#navi .navi-in>.menu-header .sub-menu {
background:#ff9;
}
#navi .navi-in a:hover {
background-color: #ffc430;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 2px 1px #000000;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor {
border-bottom: 3px solid #000000;
background: #ffc430;
}
.menu-header .menu-item:hover {
border-bottom: 3px solid #ffc430;
background: #ffc430;
}
/* ▼ 親メニューにカーソルをのせたときのサブメニューの表示 */
.navi li:hover > .sub-menu {
  opacity: 1;                     /* 透明度100% */
  transform: translateY(0);       /* 元の位置に戻す */
  visibility: visible;            /* 表示 */
}
@media screen and (max-width: 480px){
	.logo img {
		height: 40px !important; /* スマホ時のロゴの画像タテサイズ */
		margin: .5em auto;
	}
}
#main .button-caption {
	display: none; /*キャプション非表示*/
}
/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); /*影*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
/*フッターモバイルメニュー変更*/
.mobile-menu-buttons {
	background:rgba(50, 205, 50,0.9);/*フッターメニューの背景を半透明化*/
}

/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
	background:rgba(50, 205, 50,0.9); /* 背景色 */
	color: #fff; /* 文字の色 */
}

/* トップ・ホームの『文字』は構造上別途必要 */
.top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/
.home-menu-button a:hover {
	color: #fff; /* ここは同じ文字色を */
}
/* reCAPTCHA v3　表示位置 */
.grecaptcha-badge{
    margin-bottom: 60px;
}