@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){
  /*必要ならばここにコードを書く*/
}
/* WooCommerce 通知（カートに追加されました 等） */
.woocommerce-message,
.woocommerce-message::before,
.woocommerce-info,
.woocommerce-info::before,
.woocommerce-error,
.woocommerce-error::before {
  color: #514c98 !important;       /* アイコンや文字色 */
  border-left-color: #514c98 !important;
  border-top-color: #514c98 !important;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: #514c98 !important;       /* 通知内リンク */
}

/* 在庫表示 */
.woocommerce div.product .stock.in-stock {
  color: #514c98 !important;       /* 在庫あり */
}
.woocommerce div.product .stock.out-of-stock {
  color: #cc3344 !important;       /* 在庫切れ（赤系） */
}

/* Cocoonのチェックアイコン・ボックス */
.cocoon-check,
.cocoon-check::before,
.success,
.success::before {
  color: #514c98 !important;
}
.cocoon-check-box,
.success-box {
  border-color: #514c98 !important;
  background-color: #f3f2f9 !important; /* 薄紫背景 */
}
/* 商品ページの価格（単品・範囲） */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #e60073 !important;  /* 濃いピンク */
}

/* 商品一覧（ショップページ）の価格 */
.woocommerce ul.products li.product .price {
  color: #e60073 !important;
}
/************************************
** 商品タイトル 英語併記用
************************************/
.product-title .en,
.woocommerce-loop-product__title .en,
.product_title .en {
  font-size: 0.85em;  /* 英語部分を少し小さく */
  color: #999;        /* グレーで控えめに */
  margin-left: 4px;   /* 日本語との間にスペース */
  white-space: nowrap; /* 改行しない */
}

/************************************
 * モバイル：Cocoonのヘッダーメニューを強制上書き
*************************************/
@media (max-width:768px){

  /* プレート（サブメニュー） */
  #navi .navi-in ul li > .sub-menu{
    display:none;                 /* 既定は閉じる（JSでopen時に表示） */
    position:absolute;
    left:0;
    min-width:220px;              /* 240～280pxで調整可 */
    max-width:90vw;
    height:auto;
    max-height:none;
    overflow:visible;
    padding:8px 0;
  }
  #navi .navi-in ul li.open > .sub-menu{ display:block !important; }

  /* 各項目の“文字バー”（ここが肝） */
  #navi .navi-in ul li > .sub-menu li{ width:auto !important; float:none !important; }
  #navi .navi-in ul li > .sub-menu a{
    display:block !important;
    width:auto !important;        /* 180px固定を解除 */
    max-width:86vw !important;    /* はみ出し防止の上限 */
    box-sizing:border-box;

    white-space:normal !important;     /* 折り返し可 */
    overflow:visible !important;
    text-overflow:clip !important;     /* 省略記号を無効化 */

    line-height:1.4;
    padding:8px 12px;
  }

  /* ▼記号（任意） */
  #navi .navi-in ul li.menu-item-has-children > a::after{
    content:'▼'; float:right; font-size:.8em; margin-left:.4em; transition:transform .2s;
  }
  #navi .navi-in ul li.menu-item-has-children.open > a::after{ transform:rotate(180deg); }
}
/* スマホではサイドバーを非表示に */
@media (max-width: 768px){
  #sidebar, .sidebar { display:none !important; }

  /* サイドバーを消した分、本文を全幅に（余白が残る場合） */
  #main, .main, #content, .content { width:100% !important; }
}
/* ==============================
   商品仕様（Pink Float 専用）
   ============================== */
.pf-spec {
  margin: 1.5em 0;
  font-size: 95%;
  line-height: 1.6;
  border: none;              /* 外枠は無し */
  border-collapse: collapse;
  width: 100%;
}

.pf-spec dl {
  margin: 0;
}

.pf-spec dt {
  margin: 0;
  padding: 8px 0 8px 20px;   /* 左に余白を確保 */
  font-weight: 700;
  font-size: 1.05em;
  color: #f17aa4;            /* 見出し文字色 */
  position: relative;
  line-height: 1.6;
  white-space: nowrap;
}

/* ◆マークを左に表示 */
.pf-spec dt::before {
  content: "◆";
  color: #f17aa4;            /* ◆の色（見出しと同じピンク） */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;          /* ◆の大きさ調整 */
}

.pf-spec dd {
  margin: 0 0 1em 0;
  padding: 0 0 0.5em 0;
  border-bottom: 1px solid #eee;  /* 各項目の下に区切り線 */
}

.pf-spec ul {
  margin: .3em 0 .6em 1.2em;
  padding: 0;
}

.pf-spec li {
  margin: .2em 0;
}

.pf-spec small {
  font-size: 86%;
  color: #666;
}
/* 商品価格を黒に統一 */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #000 !important;
}