@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){
  /*必要ならばここにコードを書く*/
}

/* カテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
 display: none;
}

/************************************
** サイトタイトル非表示
************************************/
 
.site-name-text{
  display:none;
}
 
/*ヘッダーレイアウトがトップメニューのとき*/
.header-container-in.hlt-top-menu.site-name-text{
  display:none;
}
 
/*ヘッダーレイアウトがトップメニュー（小）のとき*/
.header-container-in.hlt-top-menu.hlt-tm-small.site-name-text{
  display:none;
}
 
/*端末幅が768px以下のとき*/
@mediascreenand(max-width:768px){
  #header .site-name-text{
    display:none;
  }
}
 
/*端末幅が480px以下のとき*/
@mediascreenand(max-width:480px){
  #header .site-name-text{
    display:none;
  }
}

/* ナビメニュー 文字*/
#navi {
font-weight: bold; /* 太文字 */
text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 影 */
}

/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: #C0C0C0;
	transform: translateX(101%);
}
/*スライドインメニューをカスタマイズ。半透明とか。*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(192, 192, 192, 0.5);
	transform: translateX(101%);
	font-weight: bold;
}

.menu-drawer a{
	font-size: 1.2em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(0, 0, 0, 0.7);
	background-color: rgba(192, 192, 192, 0);
}

/* フッターモバイルボタン透明背景色（スマホ） */
.mobile-menu-buttons {
background: rgba(192, 192, 192, 0.9); /* RGBA形式で半透明にする */
}

/*センター設定時のロゴとキャッチフレーズ左寄せ*/
.header-in .tagline {
  text-align:left;
  padding-left: 20px;
}
.header-in .logo {
  text-align: left;
  padding-left: 20px ;
}

/* サイズ① 指定の幅より大きいデバイスのロゴ上下余白 */
.logo-header {
padding: 10px 0 0px 0;
}
/* サイズ② デバイスの幅を指定。それ以下のサイズのデバイスのロゴ上下余白 */
@media screen and (max-width: 1023px) {
.logo-image {
padding: 10px 0 10px 0;
}
}

/* モバイルトップメニュー 横スクロール*/
@media screen and (max-width: 480px){
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		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;
	}
}

/*480以下でロゴの大きさ変更
@media screen and (max-width: 480px){
.logo-menu-button img {
	width: 180px;
    　　max-height: none;
	margin: 2px auto 0;
}
}*/

/*ヘッダーボタンの(真ん中も含め(ロゴになってる部分))文字と背景の色を変える。高さも変える。アイコンの位置も微調整。*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #000000;
	color: #FFFFFF;
	height: 55px;
	padding-top: 8px;
}

.logo-menu-button.menu-button{
	background-color: #000000;
	height: 55px;
}

/*固定ページのヘッダー画像を変える。id-○○の部分に編集時のプレビューで出るid=○○の数字入れる。
.page-id-300 .logo > a img {
visibility: hidden;
}
.page-id-300 .logo > a .site-name-text {
display: inline-block;
background: url("https://fainvest-fx.com/wp-content/uploads/2022/02/image-9-edited.jpeg") no-repeat;
background-size: contain;
background-position: center;
}
*/

/*カスタムHTML用広告バナー中央寄せ
 * <div style="text-align:center">
広告コード
</div>
*/

/*----------------------------------*/
/* 投稿日付を非表示                 */
/*----------------------------------
.post-date {
    display:none;
}
*/

/*全ての固定ページの日付非表示*/
.page .date-tags {
display: none;
}


.entry-date.date.published {
    display: none; /* 日付を非表示 */
}

.fa.fa-clock-o {
    display: none; /* 時計アイコンを非表示 */
}

/*マーカーの色指定。変更*/
:root {
    --custom-yellow: #ffff66;
    --custom-green: #B1F9D0;
    --custom-blue: #0066FF;
    --custom-red: #FF1A6F;
}

.marker {
    padding: 0 2px;
}

.marker-yellow {
    background-color: var(--custom-yellow);
}

.marker-green {
    background-color: var(--custom-green);
}

.marker-blue {
    background-color: var(--custom-blue);
	color: white; /* 🔹 文字色を白にする */
}

.marker-red {
    background-color: var(--custom-red);
}


/*記事内のブログカードのファビコンとURLを非表示。日付も非表示になる。高さが、下の部分が上がるイメージ。*/
.internal-blogcard-footer{
	display: none
}

.blogcard{
	position: relative
}


/* 商品ページの金額を非表示 */
.woocommerce div.product p.price {
    display: none !important;
}