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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background: #34353c;
	color: #ffffff;
	height: 64px;
}

.logo-menu-button.menu-button{
	background: #34353c;
	height: 64px;
}

.mobile-menu-buttons{
	background: #34353c;
}

.menu-caption {
	display: none !important;
}

.menu-close-button {
	height: 64px;
   text-align: left;
}

.fa-times {
	padding-top: 16px;
	padding-left: 20px;
}
#navi-menu-close,
#sidebar-menu-close,
#search-menu-close,
#share-menu-close,
#follow-menu-close {
  z-index: 79;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #34353c;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 20px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
/***************************
** グローバルナビのカスタマイズ
****************************/
/* ナビメニュー 文字*/
#navi {
	font-family: 'Roboto', sans-serif;/*〇〇にはお好きなGoogleフォントを入力*/
	font-weight: bold; /* 太文字 */
	letter-spacing: 0.12em;/*字間を広げる*/
	color: #333;
}
.navi-in a {
	font-size: 15px;/*文字サイズ*/
}

#navi .navi-in>ul>li>a {
    padding:0 2em;
}

/* safari文字の太さ指定 */
_::-webkit-full-page-media, _:future, :root  
#navi {
	-webkit-text-stroke-width: .1px !important; 
}

 /* ブラウザChromeのみ太文字にする */
@media screen and (-webkit-min-device-pixel-ratio:0){
  #navi {
	-webkit-text-stroke-width: .4px !important;
}
}

/* ナビメニュー 下線*/
#navi .navi-in a::after {
	position: absolute;/*線の位置を絶対配置に*/
	bottom: 12px;/*線の位置*/
	left: 0;
	content: '';
	width: 100%;
	height: 2px;/*線の太さ*/
	background: #FF0000;/*線の色*/
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform 0.3s;/*変形の時間*/
}

#navi .navi-in a:hover::after {
	transform: scale(1, 1);
}
/* タブレットメニュー中央寄せ */
@media screen and (max-width: 768px){
#navi-in{
	display: flex;
	justify-content: center;
}
}
/* タブレットメニュー中央寄せ */
@media screen and (min-width: 1024px){
#navi-in{
	display: flex;
	justify-content: left;
	padding-left: 8%;
}
.hlt-top-menu nav div	{
	display: flex;
	justify-content: left;
	padding-left: 0 !important;
}
}

.header-container-in.hlt-top-menu {
  width:100%;
}

/*検索ボックスのカスタマイズ（一体型・丸縁）*/
/*ここから*/
/*入力欄*/
.search-box .search-edit {
	padding: 8px 16px;
	padding-right: 68px;
	border-color: #999;
	border-radius: 20px;
}

/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #999;
	border-radius: 0 20px 20px 0;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
	margin-right: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/*ここまで*/

.home.page .entry-title,
.home.page .date-tags {
	display: none;
}

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

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

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