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

/* 全体基本設定 */
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  overflow-x: hidden;
}

/* ヘッダー */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #ffffff;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ハンバーガーメニュー本体 */
.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 101;
  cursor: pointer;
  width: 30px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hamburger span {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  transition: transform 0.4s, opacity 0.4s, background-color 0.4s;
}

.hamburger span:nth-child(1) {
  transform: translateY(-8px);
}

.hamburger span:nth-child(2) {
  transform: translateY(0);
}

.hamburger span:nth-child(3) {
  transform: translateY(8px);
}

/* メニューオープン時の変形（クロス中央） */
.menu-open .hamburger span:nth-child(1) {
  transform: rotate(45deg);
  background-color: #fff;
}

.menu-open .hamburger span:nth-child(2) {
  opacity: 0;
}

.menu-open .hamburger span:nth-child(3) {
  transform: rotate(-45deg);
  background-color: #fff;
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 99;
}

.menu-open .overlay {
  visibility: visible;
  opacity: 1;
}

/* サイドメニュー */
.side-menu {
  position: fixed;
  top: 0; left: -250px;
  width: 250px;
  height: 100%;
  background: #111;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  transition: left 0.3s;
  z-index: 100;
}

.menu-open .side-menu {
  left: 0;
}

.side-menu ul {
  list-style: none;
  padding: 0;
  margin-top: 50px;
}

.side-menu ul li {
  margin-bottom: 20px;
}

.side-menu a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 18px;
  position: relative;
}

.side-menu a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #FFFFFF;
  transition: width 0.3s ease;
}

.side-menu a:hover::after {
  width: 100%;
}

.woocommerce-variation-availability,
.stock {
  display: none !important;
}

/* 商品価格を黒に */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #000 !important;
}

/* バリエーション選択後の価格 */
.woocommerce-variation-price .price {
  color: #000 !important;
}

/* バリエーション選択後の在庫表示 */
.woocommerce-variation-availability .stock {
  color: #000 !important;
}

/* 関連商品の価格 */
.woocommerce ul.products li.product .price {
  color: #000 !important;
}

/* 関連商品の商品名など */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  color: #000 !important;
}

/* 商品詳細の見出しなども黒に */
.woocommerce div.product .woocommerce-tabs h2,
.woocommerce div.product .product_title {
  color: #000 !important;
}

/* ▼ カートに追加ボタン：背景黒・文字白 */
.woocommerce div.product form.cart button.single_add_to_cart_button {
  background-color: #000 !important;
  color: #fff !important;
  border: none;
}

/* ▼ オプションを選択ボタン（関連商品や一覧ページ）背景黒・文字白 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: #000 !important;
  color: #fff !important;
  border: none;
}

/* ▼ 商品コード（SKU）を非表示 */
.product_meta .sku_wrapper,
.product_meta .sku {
  display: none !important;
}

/* ▼ 関連商品の下にある「カテゴリー一覧」非表示 */
.woocommerce div.product .product_meta {
  display: none !important;
}

/* ▼ 関連商品の下にある「他の商品ページ」リンク（ナビゲーション）非表示 */
.woocommerce-pagination,
.related + .upsells,
.related + .cross-sells {
  display: none !important;
}

/* ▼ 商品ページの「商品コード（SKU）」と「カテゴリー」「タグ」を非表示 */
.product_meta {
  display: none !important;
}

/* ▼ 関連商品の下に表示される他の商品ページ（ページネーション）を非表示 */
.woocommerce-pagination,
.upsells.products,
.cross-sells {
  display: none !important;
}

/* ▼ 商品詳細下の「バリエーション情報（選択内容表示）」を非表示 */
.woocommerce-variation.single_variation {
  display: none !important;
}

/* ▼ 商品ページ上部の「カテゴリ名のナビゲーション（パンくずリスト）」を非表示 */
.woocommerce-breadcrumb {
  display: none !important;
}

.woocommerce-product {
  display: none !important;
}

/* 商品下部のタグ部分（例：Black, L など）を非表示 */
div.entry-tags {
  display: none !important;
}

/* 商品カテゴリーリンク（例：Tops）を非表示 */
a.cat-link {
  display: none !important;
}

a.prev-post,
a.next-post {
  display: none !important;
}