/*
Theme Name: KADAN Child
Theme URI: https://tcd-theme.com/tcd056
Template: kadan_tcd056
Author: TCD
Author URI: https://tcd-theme.com/
Description: WordPress theme "KADAN" is developed to express Japan. The vertical layout and text animations are elegance. You can create a Japanese style website by combining beautiful layouts.
Version: 1.11.1749394390
Updated: 2025-06-08 23:53:10

*/

/* ウーコマース導入カスタマイズ関連 */

/* 共通調整：PC用 */
.single-product .l-main,
.woocommerce-cart .l-main,
.woocommerce-checkout .l-main,
.woocommerce-order-received .l-main,
.woocommerce-account .l-main {
  margin-top: 8%;
}

/* スマホ用：768px以下は個別に指定 */
@media (max-width: 767px) {
  .single-product .l-main,
  .woocommerce-cart .l-main,
  .woocommerce-checkout .l-main,
  .woocommerce-order-received .l-main,
  .woocommerce-account .l-main {
    margin-top: 130px;
  }
}

/* 商品一覧ページ */

/* .woocommerce ul.products{
  display: flex;
  flex-wrap: wrap;
} */

.woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before{
  content: none!important;
}

.woocommerce ul.products li.product {
  width: calc(25% - 18px); /* 4列 */
  box-sizing: border-box;
  margin: 0!important;
  display: flex;
  flex-direction: column;
}

.product-buttons{
  margin-top: auto;
}

/* 768px未満（タブレット以下）は2列 */
@media (max-width: 767px) {
  .woocommerce ul.products li.product {
    width: calc(50% - 12px)!important;
  }
}

/* 600px未満（スマホ）は1列 */
@media (max-width: 599px) {
  .woocommerce ul.products{
    max-width: 400px;
    width: 100%;
    margin: auto;
  }
  .woocommerce ul.products li.product {
    width: 100%!important;
  }
}

/* 商品名 */
.woocommerce-loop-product__title{
  font-size: 1em!important;
  text-align: center;
  width: 100%;
}

/* レビューの星 */
.woocommerce .star-rating{
  float: initial!important;
  margin: 0 auto .5em!important;
}

/* 価格 */
.woocommerce ul.products li.product .price{
  text-align: center;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  text-align: center;
}

/* セールバッジ */
.woocommerce ul.products li.product .onsale{
  top: 4px!important;
  left: 4px!important;
  margin: 0!important;
  right: initial!important;
}

.woocommerce ul.products li.product .cfvsw_variations_form{
  display: none!important;
}

/* 商品下のボタン */
.woocommerce ul.products li.product .button{
  background: #e57716;
  box-shadow: 2px 2px 2px #aaa;
  color: #fff;
  max-width: 170px;
  width: 100%;
  border-radius: 0;
  box-sizing: border-box;
  padding: 10px;
}

@media (max-width: 767px) {
  .woocommerce ul.products li.product .button{
    min-width: initial;
    width: 80%;
    font-size: 14px;
    /* padding: 10px; */
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 14px!important;
  }
}

.woocommerce ul.products li.product .button:hover{
  background: #660000;
}

/*----------------------
商品詳細ページ 
----------------------*/

/* 商品名 */
@media (max-width: 767px){
  .summary.entry-summary .product_title.entry-title{
    font-size: 24px;
  }
}

/* 値段 */
.summary.entry-summary .price{
  display: flex;
  gap: 16px;
  margin-bottom: .5em;
}

/* 商品の簡単な説明（商品画像左） */
.summary.entry-summary .woocommerce-product-details__short-description{
  margin-bottom: 2em;
}

/* フォーム（注文数とボタン） */
.summary.entry-summary .cart{
  margin-top: 0!important;
  margin-bottom: .5em!important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 在庫数 */
.summary.entry-summary .stock.in-stock{
  margin-bottom: .5em;
}

/* 数量ボックス */
.summary.entry-summary .cart .quantity .qty{
  height: 100%;
  box-sizing: border-box;
}

/* 謎の擬似要素 */
.woocommerce div.product form.cart::after, .woocommerce div.product form.cart::before{
  content: none!important;
}

/* バリエーション名の表示 */
.summary.entry-summary .variations_form .variations tr th.label{
  display: block!important;
  width: 100%;
  text-align: left;
}

.summary.entry-summary .variations_form .variations tr td.value{
  display: block!important;
  width: 100%;
}

/* バリエーション選択中のカラー */
.cfvsw-swatches-option.cfvsw-label-option.cfvsw-selected-swatch{
  background: #ebf7fe;
  border-color: #0097e2!important;
}

/* レビューの星 */
.woocommerce .woocommerce-product-rating .star-rating{
  margin: .5em 4px 0 0!important;
  float: left!important;
}

/* 説明下部見出し */
.woocommerce-Tabs-panel.woocommerce-Tabs-panel--description.panel.entry-content.wc-tab h2{
  margin: 40px 0 20px!important;
}

/* アップセル見出し */
.up-sells.upsells.products h2{
  margin: 40px 0 20px!important;
}

/* コメント見出し */
.woocommerce #reviews #comments h2{
  text-align: center;
}

/* 関連商品見出し */
.related.products h2{
  margin: 40px 0 20px!important;
}

@media (max-width: 767px){
  .woocommerce-Tabs-panel.woocommerce-Tabs-panel--description.panel.entry-content.wc-tab h2,
  .woocommerce #reviews #comments h2,
  .related.products h2,
  .up-sells.upsells.products h2{
    font-size: 24px!important;
  }
}

/* レビューのメタ情報 */
.woocommerce #reviews #comments ol.commentlist li .comment-text p{
  margin-top: 1em;
}

.comment-form-rating{
  margin-top: 1em;
}

.woocommerce #review_form #respond p{
  margin-top: 1em;
}



/* 商品画像サイズの統一（正方形） */
/* .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 500px;
} */

/*----------------------
カートページ
----------------------*/

/* お買い物かごの合計テキスト */
.is-large.wc-block-cart .wc-block-cart__totals-title{
  width: 100%;
}

.woocommerce-cart .l-primary{
  flex: 1 1 auto;
}

/* 右側謎のサイドバーを削除 */
.woocommerce-cart .l-secondary{
  display: none!important;
}

/* 購入ボタン */
.wc-block-cart__submit-container .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained{
  background: #ee6e5c;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: .3s all;
}

.wc-block-cart__submit-container .wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover{
  background: #660000;
}

/* 買い物を続けるボタン（固定ページ段落にて作成+高度設定でクラス名付与） */
.woocommerce-cart .back-btn a{
  background: #32373c;
  width: 100%;
  display: inline-block;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 8px;
  box-sizing: border-box;
  line-height: 2;
  text-decoration: none;
  transition: .3s all;
}

.woocommerce-cart .back-btn a:hover{
  background: #7d7d7d;
}

/*----------------------
カートが空の時のカートページ
----------------------*/

/* （カートが空の時のカートページ表示関連）  */
.wp-block-heading.has-text-align-center.with-empty-cart-icon.wc-block-cart__empty-cart__title{
  width: 100%!important;
}

/* カートページに何も入っていない時のページ上部中央のアイコンを非表示（カートが空の時のカートページ表示関連）  */
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before{
  display: none!important;
}

@media (max-width: 767px) {
  .wp-block-heading.has-text-align-center.with-empty-cart-icon.wc-block-cart__empty-cart__title{
    font-size: 24px!important;
  }
}

/* 「New in store」を非表示（カートが空の時のカートページ表示関連） */
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(:first-child){
  display: none!important;
}
/* 商品一覧を非表示（カートが空の時のカートページ表示関連）  */
.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-product-new.wp-block-woocommerce-product-new.wc-block-product-new.has-4-columns{
  display: none!important;
}
/* ドットの非表示（カートが空の時のカートページ表示関連）  */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.has-alpha-channel-opacity.is-style-dots{
  display: none!important;
}
/* ショップへ戻るボタン中央配置（カートが空の時のカートページ表示関連）  */
.wp-block-woocommerce-empty-cart-block{
  text-align: center;
}
/* ショップへ戻るボタンのスタイリング（カートが空の時のカートページ表示関連）  */
.empty-cart-wc-back-to-shop-button{
  background: #ee6e5c;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px #444;
  box-shadow: 2px 2px 2px #aaa;
  box-sizing: border-box;
  display: inline-block;
  max-width: 220px;
  width: 100%;
  height: 55px;
  padding: 0 15px;
  font-size: 14px;
  line-height: 55px;
  text-align: center;
  text-decoration: none!important;
}

.empty-cart-wc-back-to-shop-button:hover{
  background: #660000;
}

/*----------------------
検索フォーム関連
----------------------*/

.custom-filter-form{
  display: flex;
  gap: 1%;
  flex-wrap: wrap;
  row-gap: 6px;
}

.custom-filter-form select{
  padding: 2px;
  max-width: 193px;
  width: 100%
}

.custom-filter-form input{
  max-width: 193px;
  width: 100%;
  box-sizing: border-box;
}

/*----------------------
ショップページ用ナビゲーション
----------------------*/

.shop-subnav{
  margin-bottom: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #ccc;
}

.shop-subnav ul{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-subnav ul li{
  line-height: 2.2;
}

.shop-subnav ul li a{
  transition: .3s all;
  text-decoration: none!important;
  padding: 10px;
}

.shop-subnav ul li a:hover{
  background: black;
  color: #fff;
}

/*----------------------
購入ページ
----------------------*/

/* 商品名 */
.wc-block-checkout__sidebar .wc-block-components-product-name{
  width: 100%;
}

@media (max-width: 767px){
  .wc-block-components-product-name{
    width: 100%!important;
  }
}

/* カートに戻るボタン */
/* .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button{

} */

/* 各見出し */
@media (max-width: 767px){
  .wc-block-components-title.wc-block-components-checkout-step__title{
    font-size: 24px!important;
  }
}

/* クロスセル見出し */
.wp-block-woocommerce-cart-cross-sells-block h2{
  font-size: 24px!important;
  margin: 0 0 .5em!important;
  width: 100%;
}

/* クロスセルアイテムラッパー */
.wp-block-woocommerce-cart-cross-sells-block div{
  display: flex;
  flex-direction: column;
}

/* クロスセルアイテム */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product{
  width: 100%!important;
  padding-left: 16px;
  padding-right: 16px!important;
  padding-bottom: 16px;
  box-sizing: border-box!important;
  border-bottom: 1px solid rgba(18, 18, 18, 0.11);
}

/* クロスセルアイテム画像 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product div .wc-block-components-product-image{
  max-width: 100px;
  width: 100%;
  margin: 0!important;
}

/* クロスセル商品名 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product div .wp-block-cart-cross-sells-product__product-title{
  font-size: 14px!important;
  text-align: left;
  padding-left: 16px;
  border: none!important;
  margin: 0!important;
}

/* クロスセル値段 */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product div .wc-block-components-product-price{
  flex-grow: 1;
  text-align: right;
}

/* クロスセルアイテム */
.cross-sells-product div{
  flex-direction: row;
}

/* クロスセルボタンラッパー */

.wp-block-button.wc-block-components-product-button.wp-block-cart-cross-sells-product__product-add-to-cart{
  display: block!important;
  text-align: left!important;
}

/* クロスセルボタン */
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button{
  background: #e57716;
  box-shadow: 2px 2px 2px #aaa;
  color: #fff;
  max-width: 170px;
  width: 100%;
  border-radius: 0;
  box-sizing: border-box;
  padding: 10px;
  transition: .3s all;
  text-decoration: none!important;
  font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:hover{
  background: #660000;
}

@media (max-width: 740px){

  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product{
    padding-left: 0;
    padding-right: 0!important;
  }

  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product div .wc-block-components-product-image{
    max-width: 64px;
  }

  .wp-block-woocommerce-cart-cross-sells-block h2{
    margin: 1em 0 1em!important;
    padding-bottom: 0!important;
    font-size: 20px!important;
  }
}