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

/************************************
** Pink Float：カラートークン
************************************/
:root{
  --pf-main: #f17aa4;      /* メイン */
  --pf-sub:  #00a1b8;      /* セカンド */
  --pf-sub-dark: #008ea3;  /* hover等の濃色 */
  --pf-sub-soft: #e6f7fa;  /* 薄い背景（通知/ボックス用） */
}

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


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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: var(--pf-sub) !important;              /* アイコンや文字色 */
  border-left-color: var(--pf-sub) !important;
  border-top-color: var(--pf-sub) !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--pf-sub) !important;              /* 通知内リンク */
}


/* ==================================================
   WooCommerce：在庫表示
================================================== */
.woocommerce div.product .stock.in-stock {
  color: var(--pf-sub) !important;              /* 在庫あり */
}

.woocommerce div.product .stock.out-of-stock {
  color: #cc3344 !important;                    /* 在庫切れ（赤系） */
}


/* ==================================================
   Cocoon：チェック系（成功表示）
================================================== */
.cocoon-check,
.cocoon-check::before,
.success,
.success::before {
  color: var(--pf-sub) !important;
}

.cocoon-check-box,
.success-box {
  border-color: var(--pf-sub) !important;
  background-color: var(--pf-sub-soft) !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);
  }

  /* スマホではサイドバーを非表示に */
  #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: var(--pf-main);     /* 見出し文字色 */
  position: relative;
  line-height: 1.6;
  white-space: nowrap;
}

/* ◆マークを左に表示 */
.pf-spec dt::before {
  content: "◆";
  color: var(--pf-main);     /* ◆の色（見出しと同じピンク） */
  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：商品価格を黒に統一（定価感）
================================================== */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #000 !important;
}
/* ==================================================
   WooCommerce：カートに入れるボタンを #00a1b8 系に
================================================== */
.woocommerce button.single_add_to_cart_button,
.woocommerce a.add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background: var(--pf-sub) !important;
  border-color: var(--pf-sub) !important;
  color: #fff !important;
}

.woocommerce button.single_add_to_cart_button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce button.single_add_to_cart_button:focus,
.woocommerce a.add_to_cart_button:focus,
.woocommerce a.button.alt:focus{
  background: var(--pf-sub-dark) !important;
  border-color: var(--pf-sub-dark) !important;
  color: #fff !important;
}

.woocommerce button.single_add_to_cart_button:disabled,
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce a.add_to_cart_button.disabled,
.woocommerce a.button.alt.disabled{
  background: #8fd3dd !important;
  border-color: #8fd3dd !important;
  color: #fff !important;
  opacity: 1 !important;
}