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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.video-container {
margin: 0px auto;
}
.instagram-container, 
.facebook-container,
.twitter-tweet,
.instagram-media {
    margin: 30px auto !important;
}
#header-container-in.wrap {
    width: auto;
}
/*モバイルメニュー*/
.mobile-header-menu-buttons.mobile-menu-buttons .menu-button {
  color: #ffffff;
  background-color: #3e618b;
}
.navi-menu-content {
  background-color: #F9F7F2;
}
.menu-close-button {
  color: #ffffff;
  background-color: #3E618B;
}
.menu-close-button:hover {
  background-color:#E58A5B;
}
.menu-drawer a {
  font-size: 0.9em;
  line-height: 1.6em;
  border-bottom: solid 1px #DDDDDD;
}
.menu-drawer a:hover {
  color: #3E618B;
  background-color:#F0EDE5;　/*マウスオーバー時の背景色*/
}
.appeal-content {
  background-color:rgba(255, 255, 255, 0.7);
}

/*ヘッダー検索*/
#navi .navi-in>ul>li:last-child {
    display: none;
}
.menu-drawer .search-menu-button-header {
    display: none;
}
@media screen and (min-width: 1024px) {
#navi .navi-in>ul>li:last-child {
	display: block;	
}	
}
#search-menu-open-header {
	padding: 15px 15px;
	margin-left: 5px;
	display: flex;
}
#search-menu-content-header,
#search-menu-content-header .search-box {
	max-width: 920px;
	margin-right: auto;
	margin-left: auto;
}
#search-menu-content-header .search-box {
    margin: 0;
}
.search-menu-content-header {
	transition: .3s ease-in-out;
	position: fixed;
	top: 40%;
	z-index: 99;
	width: 90%;
	left: 5%;
	right: 5%;
	-webkit-transform: translateY(900%);
	transform: translateY(900%);
	opacity: 0;
}
/*黒背景*/
#search-menu-close-header {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	transition: .3s ease-in-out;
}
#search-menu-input-header:checked ~ #search-menu-close-header {
	display: block;
	opacity: .5;
}
#search-menu-input-header:checked ~ #search-menu-content-header {
	transition: .3s ease-in-out;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	opacity: 1;  
}
#search-menu-content-header .search-edit {
	font-size: 16px;
}
.search-menu-button-header {
	border-right: 0px;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.appeal-message p br {
		display: none;
	}
}