/****************************************************************************
 style.css
    Theme Name: Astra Child
    Template: astra
    Version: 1.0.0
* -------------------------------------------------------------------------
* 針先集計データ取込
* -------------------------------------------------------------------------
* 日付        担当者       修正No      修正内容
* -------------------------------------------------------------------------
* 2023/04/01  M.Konda                  新規作成
'***************************************************************************/

@import url("../astra/style.css");


/********************************************************************************
    全ページ対象
*********************************************************************************/



/* 商品画像を正方形に収める */

/* 商品リンク全体を画像枠として使う（Woo一覧の一般的構造） */
.woocommerce ul.products li.product a.woocommerce-LoopProduct__link {
  display: grid;               /* 子要素（img）を簡単に中央揃え */
  place-items: center;         /* 縦横とも中央 */
  aspect-ratio: 1 / 1;         /* ★枠の比率：1:1（正方形） */
  background-color: #fff;      /* 余白の色 */
  overflow: hidden;            /* はみ出し防止 */
}

/* 中の画像は“枠に収める”＋“中央配置”＋“トリミングしない” */
.woocommerce ul.products li.product a.woocommerce-LoopProduct__link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;                 /* レイアウトの安定化用 */
  height: auto;
  object-fit: contain;         /* ★切り抜きなし */
  object-position: center;     /* ★中央揃え（上寄せ防止） */
  display: block;
  background-color: #fff;      /* 画像自体に余白色を持たせたい場合 */
}







/********************************************************************************
    ホーム(Home)
*********************************************************************************/

/* ドロップダウンメニューの通常時の文字色を黒に設定 */
.main-header-menu .sub-menu li a {
    background-color: #dcdcdc !important;
    color: #000000 !important;
}


/* ヘッダー ドロップダウンメニュー ホバー時の色変更 */
.main-header-menu .sub-menu li a:hover {
    background-color: #000000 !important;
    color: #e0ffff !important;
}







/********************************************************************************
    商品ページ(Shop)
*********************************************************************************/
/**
 * 商品画像に左右矢印追加(商品詳細画面)
 */




/* 商品画像のサイズを小さくする */
.woocommerce ul.products li.product img {
    width: 80%; /* 例：画像の幅を80%に */
    height: auto;
}


/* 商品詳細画面の「関連商品」文字サイズを小さくする */
.woocommerce .related.products h2 {
    font-size: 30px; /* お好みのサイズに調整可能 */
}


/* 商品検索画面の英語 非表示対応 */
.ast-archive-description p {
    display: none;
}


/* カテゴリ画面 カテゴリ名(表題) サイズ調整 */
.page-title.ast-archive-title {
    font-size: 50px !important;
}


/* 商品ホバー時 拡大対応 */
/* WooCommerceの商品画像に限定 */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.home .product img {
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img,
.woocommerce div.product div.images:hover img,
.home .product:hover img {
    transform: scale(1.02);
}

/* 商品画像のホバー効果（白色の半透明オーバーレイ） */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    position: relative;
    display: block;
    overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    display: block;
    transition: transform 0.3s ease;
}

/* オーバーレイ用の疑似要素 */
.woocommerce ul.products li.product .woocommerce-loop-product__link::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.3) !important; /* 白色の半透明 */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* ホバー時にオーバーレイ表示 */
.woocommerce ul.products li.product .woocommerce-loop-product__link:hover::after {
    opacity: 1;
}


/* 商品在庫切れ表示変更 */
.ast-shop-product-out-of-stock {
    background-color: #000000 !important; /* 黒背景 */
    color: #ffffff !important; /* 白文字 */
    font-weight: bold;
}


/* 商品一覧ページの上部画像 高さ調整 */
.woocommerce-page .ast-archive-description {
    max-height: 100px !important;
    overflow: hidden;
}

.woocommerce-page .ast-archive-description img {
    max-height: 100px !important;
    width: 100%;
    object-fit: cover;
}


/* 商品詳細ページの「& 送料無料」非表示 */
.ast-shipping-text {
    display: none !important;
}



/********************************************************************************
    購入手続き(Check out)
*********************************************************************************/
.wcf-embed-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered.wc-stripe-select2-container {
  padding-top: 4px !important;
  line-height: 1.2 !important;
  position: relative !important;
  top: -2px !important;
}








/********************************************************************************
    検索
*********************************************************************************/

/* 検索結果ページの商品画像を正方形にする */
.search .wp-post-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}








/********************************************************************************

    スマホ画面対応

*********************************************************************************/
@media only screen and (max-width: 976px) {
    .wp-block-uagb-container.uagb-block-cfb64d3f {
        background-image: url(https://xs178412.xsrv.jp/wp-content/uploads/2025/09/outdoor.png) !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 200px;
    }
}