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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* グローバルナビメニューのホバー色を変更する例 */
#navi .navi-in a:hover {
  background-color: #B77B8B;
  color: #fff;
}

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 13px;
}

/*タイトルとキャッチフレーズの間隔*/
.logo-text {
	padding: 20px 0 0;
}
.tagline {
	margin: 0 0 .6em
}

/*ヘッダーの検索ボックスを右に寄せる*/
.header-in {
  position: relative;
}

.header-in .search-box {
  position: absolute;
  top: 20%;
  right: 10px;
  margin: 0;
  width: 250px;
  transform: translateY(-50%);
}

.header-in input[type="text"] {
  padding: 8px 14px 8px 40px;
  font-size: 14px;
  background: #edf6f9;
  border: 1px solid #9fcde1;
  border-radius: 10px 10px 10px 10px / 50% 50% 50% 50%;
}

.header-in .search-submit {
  left: 1px;
  right: auto;
  color: #378cb0;
}

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .header-in .search-box {
    display: none;
  }
}

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

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

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

/************************************
****　モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#B77B8B;/*検索マーク色変更はこちら*/
margin-left:1em;
}
span.fas.fa-bars::before{
color:#B77B8B;/*ハンバーガーメニュー色変更はこちら*/
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#B77B8B;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.1em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #B77B8B; /*点線の色変更はこちら*/
content: "Menu";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.1em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
border-bottom: solid 1px #C5ABC5;
}
.menu-drawer a:hover{
color:#ffffff;
background-color:#B77B8B;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
font-weight: normal;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#C5ABC5;
margin:0 .5em 0 1em;
}