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

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

/************************************
 *指定の固定ページの更新日時を非表示にする
************************************/

.post-3 .date-tags,
.post-12 .date-tags,
.post-20 .date-tags,
.post-31 .date-tags,
.post-95 .date-tags,
.post-536 .date-tags,
.post-574 .date-tags,
.post-1008 .date-tags,
.post-1026 .date-tags,
.post-1028 .date-tags,
.post-1049 .date-tags,
.post-1052 .date-tags {
display: none;
}

/************************************
 *サイト右上に営業時間・営業日カレンダー・お問い合わせボタンを設置する
************************************/
/*ヘッダーのフレックスコンテナ*/
.header-in {
  display: flex;
  flex-direction: row;
  justify-content: right;
}
/*電話番号・営業時間*/
/*Googleフォントで電話番号用のフォントを読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

/*表示されるスタイルの調整：フレックスアイテムを右端に寄せて個別に配置*/
.header_text_set{
margin: 18px;
}

/*ヘッダー右端のボタン「お問い合わせ」用*/
#header_button{
	padding: 10px;
	border-radius: 2px;
	background: #95E6E6;
}

/*電話番号*/
.header_contact_phone {
font-family: Inter, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.6px;
}

/*営業時間*/
.header_business_hours {
font-size: 16px;
letter-spacing: 1px;
}

/*営業カレンダー*/
.header_business_calendar {
font-size: 16px;
letter-spacing: 1px;
}

/*お問い合わせボタン*/
.header_contact_button {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.6px;
text-align:center;
height:40px;
line-height:40px;
width: 160px;
}
.header_contact_button a{
color:#40322D;
}
/************************************
/*本文見出しh2の調節
************************************/
.article h2 {
	border-left: 8px solid #95E6E6;
	/*position: relative;*/
	line-height: 2;
	padding: 0.3em 0.3em 0.3em 0.5em;
	font-size: 20px;
	padding: 10px 20px;
}

/************************************
/*本文見出しh3の色をメインカラーにする
************************************/
.article h3 {
  border-left: 7px solid #95E6E6;
  border-right: none/*1px solid #ddd*/;
  border-top: none/*1px solid #ddd*/;
  border-bottom: none/*1px solid #ddd*/;
  font-size: 18px;
  padding: 8px 16px;
}


/************************************
/*リンクにオンカーソルしたときの色指定
************************************/

.entry-content a:hover { color: #4C64FF; }

/****************
タブ見出しボックスのカスタマイズ
****************/
.tab-caption-box-label{ 
	padding: 6px 16px; /*タブ内側余白*/
	font-size: 16px; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px;  /*タブ角丸*/
}

.tab-caption-box-content {
	position: relative;  /*配置に関するもの（ここを基準に）*/
	top: 1px; /*上から(1px）移動*/
	border: 2px solid; /*ボックス線*/
	padding: 24px 24px; /*ボックス内側余白*/
	border-radius: 4px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
}

/************************************
**トップページ用固定ページのカスタマイズ
************************************/

/*フロント固定ページのタイトルを非表示*/ .home.page .entry-title{ display: none; } 
/*フロント固定ページのシェアボタンを非表示*/ .home.page .sns-share{ display: none; }
/*フロント固定ページのフォローボタンを非表示*/ .home.page .sns-follow{ display: none; } 
/*フロント固定ページの投稿日を非表示*/ .home.page .post-date{ display: none; } 
/*フロント固定ページの更新日を非表示*/ .home.page .post-update{ display: none; } 
/*フロント固定ページの投稿者名を非表示*/ .home.page .author-info{ display: none; }

/**********************************************
** 固定ページ（トップページ）の新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 33%;
}

/************************************
**ヘッダーロゴ49.5%
************************************/
@media screen and (max-width: 834px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo {/*ロゴ画像を中央に配置したい方は、この3行を削除*/
text-align: left;
margin-right: auto;/*ロゴだけを左寄せにする*/
}
.logo-header img {
box-shadow: none!important;
}

/************************************
**ヘッダー　キャッチフレーズ表示位置
************************************/
.tagline {
	text-align: left;
	/*margin-bottom: -8px; /*キャッチフレーズ下マージンを調整（少し下へ）*/
}

/************************************
**ヘッダー　モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{
display:none;
}
}
@media (max-width:834px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}

/************************************
 * 検索窓
*************************************/
.search-box {
	width: 100%;
	margin-left: auto;
	margin-right: 0;
	margin-top: 0.3em;
	margin-bottom: auto;
position: relative;
  display: flex;
  border-radius: 50px; /*全体を囲むボックスの角丸*/
  box-shadow:0px 4px 6px 0px #c4c4c4; /*全体を囲むボックスのシャドウ*/
}

.search-menu-content .search-box {
  width: 100%;
  box-shadow:0px 4px 6px 0px #333; /*スライドイン表示でのシャドウ*/
}

.search-edit {
  width: 80%; /*入力部分の長さ*/
  background: #fff; /*入力部分の背景色*/
  padding: 0 10px;
  border: none; /*ボーダーを消す*/
  border-radius: 50px 0 0 50px; /*左上、左下のみ角丸*/
  font-size: 16px;
}	
.search-submit {
  width: 20%; /*ボタン部分の長さ*/
  background: #7AD7D9; /*ボタン部分の背景色*/
  color: #fff; /*アイコンの色*/
  position: static;
  right: auto;
  top: auto;
  font-size: 20px; /*アイコンの大きさ*/
  cursor: pointer;
  line-height: 40px; /*検索窓の高さ*/
  border: none;
  border-radius: 0 50px 50px 0; /*右上、右下のみ角丸*/
  padding: 0;
}

.search-box input::placeholder {
font-size: 14px; color: #aeab92;/*プレースホルダーのフォント大きさと色*/
}

/************************************
**　ヘッダーメニュー
************************************/
.navi-in > ul{/*メニューを中央に配置したい場合はこちらを削除してください*/
/*justify-content:flex-start;*/

}

.navi-in>ul li {
	line-height: 48px;
	height: 48px;
}

.navi-in a{
	font-size:18px;
}

#navi .navi-in a:hover {
transform: none!important;
background:#f7f7f7;
}

.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {
color:#ffffff;
border-top: 1px solid #333333;/*サブメニューの仕切りの線*/
padding:0 0 0 2em;
margin:0;
}

.navi-in > ul .sub-menu a:hover {
	transform: none!important;
	background:#f7f7f7;
}
div#header-container {
box-shadow: none;
}
div.item-label{
font-weight:bold;
}


/************************************
**　　サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.widget_search{
padding:0;
}
.sidebar h3{
color:#333333;/*#7b7b7b;*/
background-color:#ffffff;/*好きな背景色にする*/
border: none;
/*border-radius: 0%;
border-bottom:3px dotted;
border-color:#009DBF;*/
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
background-color:#f7f7f7;
color:#333333!important;/*#afafb0!important;*/
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{
background-color:#96DDE3;
color:#333333!important;
}
.tagcloud a{
background-color:#ffffff;
color:#333333!important;
font-size: 16px;
}
.tagcloud a:hover{
background-color:#f3f3f3;
color:#333333!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}

/************************************
** フッター　オンカーソル時の色指定
************************************/
/* フッター左のリンクhover */
#footer .footer-left a:hover {
	color: #4C64FF;
}

/* フッター中央のリンクhover */
#footer .footer-center a:hover {
	color: #4C64FF;
}

/* フッター右のリンクhover */
#footer .footer-right a:hover {
	color: #4C64FF;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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