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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#navi .navi-in a:hover{
	color: #000000!important;
	background: #ffffff;
	transition: all 0.5s ease;
}

/*選択中のメニュー項目にアンダーライン*/
.current-menu-item:not(:first-child):after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #fcf404;/*線の色*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* =========================
   商品ページ全体：左(画像) + 右(情報)
========================= */
.single-product div.product{
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 18px;
  align-items: start;
}

.single-product div.product .woocommerce-product-gallery{ grid-column: 1; }
.single-product div.product .summary{ grid-column: 2; }

/* =========================
   ギャラリー内：左(サムネ) + 右(メイン)
========================= */
.single-product div.product .woocommerce-product-gallery{
  display: grid !important;
  grid-template-columns: 90px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

/* 左：自前サムネ */
.single-product .woocommerce-product-gallery .ss-thumb-col{
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 6px;
}

.single-product .ss-thumb-btn{
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.single-product .ss-thumb-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* 右：メイン画像（Woo標準） */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport{
  grid-column: 2 !important;
}

/* 矢印（テーマが消している場合の保険） */
.single-product .woocommerce-product-gallery .flex-direction-nav a{
  opacity: 1 !important;
  display: block !important;
}

/* ==========================
   メインギャラリー画像を100%に戻す
========================== */

.single-product .woocommerce-product-gallery img.wp-post-image{
  width: 60% !important;
  max-width: 60% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important; /* 中央寄せを解除 */
}
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery .flex-viewport{
  width: 100% !important;
  max-width: 100% !important;
}


/* モバイル：縦並び */
@media (max-width: 768px){
  .single-product div.product{
    grid-template-columns: 1fr;
  }
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary{
    grid-column: 1;
  }
  .single-product div.product .woocommerce-product-gallery{
    grid-template-columns: 1fr !important;
  }
  .single-product .woocommerce-product-gallery .ss-thumb-col{
    grid-column: 1 !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none;
    padding-right: 0;
  }
  .single-product .ss-thumb-img{
    width: 90px;
  }
}

/* flex-control-thumbs 内のテキストを消す（画像は残す） */
.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs{
  font-size: 0 !important;
  line-height: 0 !important;
}


/* 画像サムネは表示・サイズは任意 */
.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img{
  display: block !important;
  width: 110px !important;  /* 好きなサイズに */
  height: auto !important;
}

.single-product div.product .woocommerce-tabs.wc-tabs-wrapper{
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================
   商品説明（tabs）だけを全幅1カラム表示
========================== */

/* 親が grid(58% 42%) のままでも、tabs を全幅に跨がせる */
.single-product div.product .woocommerce-tabs.wc-tabs-wrapper{
  grid-column: 1 / -1 !important;  /* ← これが核心（全幅） */
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 20px;                /* 写真下に余白 */
}

/* タブパネルも全幅 */
.single-product .woocommerce-tabs.wc-tabs-wrapper .woocommerce-Tabs-panel{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* もし flex や overflow が残っていれば解除 */
.single-product .woocommerce-tabs.wc-tabs-wrapper{
  display: block !important;
  overflow: visible !important;
}
/* ==========================
   スマホ：商品ページを完全フル幅にする
========================== */
@media (max-width: 768px){

  /* ページ全体の左右余白を消す */
  body.single-product{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 親コンテナの幅制限解除 */
  .single-product .container,
  .single-product .site-content,
  .single-product .content-area,
  .single-product .wrap,
  .single-product .inner-content{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 商品ページ全体1カラム */
  .single-product div.product{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ギャラリー画像を画面幅に合わせる */
  .single-product .woocommerce-product-gallery img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 商品説明を画面幅に合わせる */
  .single-product .summary,
  .single-product .woocommerce-tabs.wc-tabs-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;   /* ほんの少し余白 */
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

}

/* WooCommerce サムネイル画像を50%縮小 */
.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* 商品一覧タイトルを50%縮小 */
.woocommerce-loop-product__title{
  font-size: 100% !important;
}

/* ==========================
   スマホ：商品タイトルを60%に縮小
========================== */
@media (max-width: 768px){

  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 80% !important;   /* 60%縮小 */
    line-height: 1.4 !important; /* 行間調整（崩れ防止） */
  }

}

/* ==========================
   商品タイトルの幅を50%に縮小（左寄せ）
========================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  /* 長いタイトルは折り返す */
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.woocommerce-Price-amount{
  font-size: 100% !important;
}

/* ==========================
   スマホ：メイン商品画像を80%に拡大
========================== */
@media (max-width: 768px){

  .single-product .woocommerce-product-gallery__wrapper img,
  .single-product .woocommerce-product-gallery img.wp-post-image{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;   /* 中央寄せ */
  }

　.woocommerce-Price-amount{
  font-size: 100% !important;
}
}
/* ==========================
   カートボタンを完全非表示（全デバイス）
========================== */

/* 商品一覧ページ */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple{
  display: none !important;
}

.single-product .flex-control-nav.flex-control-thumbs{
  display: none !important;
}


.woocommerce-breadcrumb {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.2px;
}

body.single-product .woocommerce-breadcrumb {
  font-size: 11px !important;
  margin: 0px 0 !important;
}