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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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(255, 255, 255, 0.6); /* 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;
}

/*コメント欄のメールとサイトを非表示にする*/
.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}

/*スマホの画像の縦伸び修正*/
.article img {
    height: auto;
}


/*お買い物かごに追加ボタンの色*/
.woocommerce div.product form.cart .button {
    background-color: #e60012; /* ボタンの背景色 */
    color: #ffffff; /* ボタンの文字色 */
}

/*マウスをかざしたホバー時の色*/
.woocommerce div.product form.cart .button:hover {
    background-color: #cc0011; /* ホバー時のボタンの背景色 */
    color: #ffffff; /* ホバー時のボタンの文字色 */
}

/* 価格の色を変更 */
.woocommerce .price, .woocommerce .amount {
    color: #202020; /* 価格の色 */
}


/*購入手続きをするのボタンだが機能しないためこのように文字で置いている。テーマやプラグインと競合してしまっている？
.wc-block-components-button {
    background-color: #e60012 !important;
    color: #ffffff !important;
}
*/

/*購入手続きをするのボタンのホバー。こっちは機能する。*/
.wc-block-components-button:hover {
    background-color: #272727 !important;
    color: #ffffff !important;
}

/*Woocommerceの全ての商品ページの日付を非表示*/
.single-product .date-tags {
    display: none;
}

/*Woocommerceの商品ページの商品コードだけを非表示
.single-product .sku,
.single-product span.sku,
.single-product div.sku {
    display: none;
}
*/

/*Woocommerceの商品ページの「商品コード」のラベルと商品コードを非表示*/
.single-product span.sku_wrapper {
    display: none;
}

/*説明欄全てを非表示にする(実際のコード)
.woocommerce-Tabs-panel--description {
    display: none !important;
}
*/

/*商品ページの「説明」の見出しを非表示(h2の見出しにすると非表示になる。h3なら表示される)*/
.woocommerce-Tabs-panel--description h2 {
    display: none;
}

/*商品ページの「関連記事」のタイトルが非表示になる*/
.woocommerce.single-product .related-entry-main-heading {
    display: none;
}

/*商品ページの関連記事セクションにあるブログカードを非表示(マウスオーバーでクリックできてしまう中途半端な現象になる)
.woocommerce.single-product .related-entry-card-content {
    display: none;
}
*/

/*商品ページの関連記事セクション全体を非表示にする*/
.woocommerce.single-product #related-entries {
    display: none;
}

/* "(税込)"テキストの色を変更、テキストの大きさを変更する */
.woocommerce-price-suffix {
    color: #202020; /* ここに希望の色のHEXコードを入力してください */
	font-size: 12px; /* 希望のフォントサイズに変更してください */
}

/*機能するがボタンの文字ではなくボタン自体のマウスオーバー時の色を変更する*/
.wp-block-button__link:hover {
    background-color: #151515;
}

.wp-block-button__link:hover {
    color: #ffffff; /* テキスト色を白色に */
}

/*固定ページの目次を非表示。バグで支払いページだけ目次のチェック外れる挙動の対策*/
.page .toc {
    display: none;
}

/*支払いページ(購入完了ページ)ダウンロードボタンの色変更*/
a.woocommerce-MyAccount-downloads-file.button.alt {
  color: #ffffff; /* ボタンのテキスト色 */
  background-color: #e60012; /* ボタンの背景色 */
  /* 必要に応じて、他のスタイルを追加 */
}

/* 支払いページ(購入完了ページ)ホバー状態でのスタイル変更 */
a.woocommerce-MyAccount-downloads-file.button.alt:hover {
  background-color: #cc0011; /* ホバー時の背景色 */
  color: #ffffff; /* ホバー時のテキスト色 */
}

/*ショップページ、オプションの色とサイズと中央揃え*/
.woocommerce ul.products li.product .button {
	display: block;
	color: #707070;
	background-color: #fff0f5;
	font-size: 15px;
	text-align: center;
}

/*注文完了画面の再注文のボタンの色*/
.woocommerce a.button {
	color: #707070;
	background-color: #fff0f5;
}
/*注文完了画面の再注文のボタンのホバーの色*/
.woocommerce a.button:hover {
	color: #707070;
	background-color: #ffdbe7;
}

/*買い物かごの何も入っていませんの時のオプションボタンの色*/
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link{
	color: #707070;
	background-color: #fff0f5;
}

/*セールの背景の色変更*/
.woocommerce span.onsale {
background-color: #f50310;
color: #ffffff;
	/*box-sizing: content-box;*/
	padding: 0; /* パディングをゼロに設定。セールの円が微妙に縦長になるのを防ぐため。*/
}

/*各商品ページのセール時の線の色変更*/
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
color: #9d9d9d;
}

/*ショップページのセール時の線の色*/
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
	color: #9d9d9d;
}

/*お買い物かごページ(id376)、支払いページ(id377)のページでフッターモバイルボタン(ボタン部分だけでなくナビそのものを)非表示*/
body.page-id-376 .mobile-menu-buttons,
body.page-id-377 .mobile-menu-buttons {
    display: none;
}
/*ショートコードの決済フォームのbox部分の内側*/
.woocommerce-checkout #payment div.payment_box {
background-color: #e600331a; 
}
/*ショートコードの決済フォームのbox部分の外側*/
.woocommerce-checkout #payment {
    background: #ffffff;
    border-radius: 5px;
}
/*ショートコードの決済フォームのbox部分の矢印部分の線と矢印を白にする*/
.woocommerce-checkout #payment div.payment_box::before {
border: 
	0em
	 solid #ffffff;
}
/*注文するボタン*/
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt{
    background-color: #e60012;
}
/*ホバー時の色*/
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:hover {
    background-color: #cc0011;
}
/*クーポンコードの表示のbox部分も文字も全て非表示*/
.wc-block-components-notice-banner.is-info{
    display: none;
}

/*住所入力フォームのフォームの大きさ高さとか*/
.woocommerce form .form-row .input-text, .woocommerce-page form .form-row .input-text{
	padding: 8px;
}

/*住所フォームの会社の入力欄を非表示
#billing_company {
    display: none;
}

/*住所フォームの会社の上に出るラベル部分を非表示
label[for="billing_company"] {
    display: none !important;
}
/*住所フォームの国の入力欄を非表示
#billing_country {
    display: none;
}
/*住所フォームの国の上に出るラベル部分を非表示
label[for="billing_country"] {
    display: none !important;
}

/*住所フォームの上に出るラベルを非表示*/
/*.woocommerce form .form-row label, .woocommerce-page form .form-row label{
	display: none;
}
*/

/*住所フォームの上に出るラベルの文字の大きさ変更*/
.woocommerce form .form-row label, .woocommerce-page form .form-row label{
	font-size: 14px;
}
/*追加情報の見出し、入力フォーム非表示*/
.woocommerce-additional-fields {
    display: none;
}

/*このコードではカードの情報保存の欄を非表示にはならない*/
/*.woocommerce-checkout #payment div.payment_box p:last-child {
        display: none;
}
*/
/*コンビニ銀行振込の下の線の色*/
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid #ccc;
}
/*コンビニと銀行振込のimgのサイズ調整(checkoutページ全体のimgでそうなる？)*/
.woocommerce-checkout #payment ul.payment_methods li img {
	max-width: 10%;
}

/*cartページのコンビニなどのアイコンの大きさ*/
.wc-block-components-payment-method-icons .wc-block-components-payment-method-icon {
    width: 80px !important; /* 画像の幅を設定 */
    height: 60px !important; /* 画像の高さを設定して、おおよそのアスペクト比4:3を目指す */
    object-fit: scale-down !important; /* 画像のアスペクト比を保持しながら、指定されたサイズ内に収める */
}

/* "登録済みの方はこちら"の文言を非表示にする */
.woocommerce-form-login-toggle {
    display: none;
}

/* "クーポンお持ちですか"の文言を非表示にする */
.woocommerce-form-coupon-toggle {
    display: none;
}


/* checkoutページ（ショートコードの）下部の文言のプライバシーポリシーの文言を非表示にする */
.woocommerce-privacy-policy-text {
    display: none;
}

/* checkoutページ（ショートコードの）下部の文言の利用規約の文言を非表示にする
.woocommerce-terms-and-conditions-checkbox-text {
    display: none;
}

/* チェックアウトページの「注文する」ボタンをカスタマイズ */
.woocommerce #place_order {
    background-color: #ff5733; /* ボタンの背景色（例：オレンジ色） */
    color: #ffffff;           /* テキストの色（白） */
    font-size: 18px;          /* 文字サイズ */
    padding: 10px 20px;       /* ボタンの内側の余白（上下10px、左右20px） */
    border-radius: 5px;       /* ボタンの角を丸くする（5px） */
    border: none;             /* 枠線を消す */
    cursor: pointer;          /* カーソルをポインターにする */
    transition: background-color 0.3s ease; /* 背景色の変化を滑らかに */
}

/* ホバー時のスタイル */
.woocommerce #place_order:hover {
    background-color: #e74c3c; /* ホバー時の背景色（例：少し暗いオレンジ色） */
    color: #ffffff;           /* ホバー時のテキスト色（白） */
}


/* チェックアウトフォームの強制表示 */
.woocommerce-checkout form .form-row {
    visibility: visible !important; /* 要素を強制的に表示 */
    opacity: 1 !important;          /* 透明度をリセット */
    display: block !important;      /* 非表示状態を解除 */
    overflow: visible !important;   /* 隠れている部分を表示 */
}

/* カード入力欄の親要素を表示 */
.woocommerce-checkout form .form-row .wc-credit-card-form {
    display: block !important; 
    height: auto !important;       /* 高さを自動調整 */
    min-height: 300px !important;  /* 十分な高さを確保 */
}

/* WooCommerceの商品ページの「クリア」ボタンを非表示にする */
.woocommerce .reset_variations {
    display: none !important;
}

/* Site Reviewsボタンの背景色とテキスト色を変更 */
button.glsr-button.wp-block-button__link {
    background-color: #ff0000 !important; /* ボタンの背景色（例：赤） */
    color: #ffffff !important;           /* ボタンのテキスト色（例：白） */
    border-radius: 5px;                  /* ボタンの角を丸くする */
    padding: 10px 20px;                  /* ボタンの内側の余白 */
    font-size: 16px;                     /* 文字サイズ */
    border: none;                        /* ボタンの枠線を削除 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボタンに影を追加 */
}

/* ボタンのホバー時の色を変更 */
button.glsr-button.wp-block-button__link:hover {
    background-color: #cc0000 !important; /* ホバー時の背景色（例：暗い赤） */
    color: #ffffff !important;           /* ホバー時のテキスト色 */
}



/* WooCommerceの通知メッセージの背景色を変更 */
.woocommerce-notices-wrapper {
    background-color: #ffffff !important; /* 例: 白色 */
    padding: 15px;
    border-radius: 5px; /* 角を丸くする */
}

/* WooCommerceのメッセージボックスの背景色と枠線を変更（買い物かごに入れるを押したときに表示されるページ） */
.woocommerce-message {
    background-color: #ffffff !important; /* 背景色を白に */
    color: #333 !important; /* テキストの色 */
    border: 2px solid #ff4500 !important; /* 上、右、下、左すべての枠線を追加 */
    padding: 15px;
    font-size: 16px;
    border-radius: 5px; /* 角を丸くする（必要に応じて） */
}

/* メッセージのボタンのスタイル */
.woocommerce-message a.button {
    background-color: #ff4500 !important; /* ボタンの背景色 */
    color: #fff !important; /* ボタンの文字色 */
    border-radius: 5px;
    padding: 10px 15px;
}

.woocommerce-message a.button:hover {
    background-color: #cc3700 !important; /* ホバー時の色 */
}

/* WooCommerceのメッセージボックスのチェックマークを非表示（枠線を維持） */
.woocommerce-message::before {
    visibility: hidden !important;
    width: 0;
    height: 0;
}


/* WooCommerceの商品ページの「説明」タブ（見出し）を非表示 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.description_tab {
    display: none !important;
}


/* WooCommerceの通知メッセージエリアの余白を削除（noneにしてしまうとお買い物かごに入れた時の通知メッセージが出なくなると。） */
.woocommerce-notices-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}


/* WooCommerceの商品ページ下部のタグ一覧を非表示 */
.entry-tags {
    display: none !important;
}

/*課税ステータス「なし」に設定時の、表示だけ（税込）にした部分の文字サイズと色。表示コードはfunction*/
.tax-label {
    color: #000000;         /* 黒色 */
    font-size: 0.6em;       /* 小さめの文字サイズ */
}


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

/* カートの「商品名の横」に出る金額だけ非表示 */
.wc-block-cart .wc-block-cart-items .wc-block-components-product-price__value {
    display: none !important;
}