/*
Theme Name:		Welcart Basic Child
Description:	Welcart Basic Child is child theme for Welcart Basic.
Author:			WElcart Inc.
Author URI:		https://www.welcart.com/
Template:		welcart_basic
Version:		1.0.0
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			responsive-layout, basic-child, two-columns, right-sidebar. left-sidebar
*/

/* ==========================================================================
   基本設定
   ========================================================================== */

/* Basic Styles */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
}

/* ヘッダーの余分なマージンを削除 */
header {
    margin: 0 !important;
    padding: 0;
}

/* サイドバー全体を非表示 */
#sidebar,
.sidebar,
#secondary,
.widget-area,
.side_category,
.side_calendar,
.welcart_calendar,
.widget {
    display: none !important;
}

/* コンテンツエリアを適切な幅に調整 */
#main,
#primary,
.site-content,
#content {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* ==========================================================================
   ヒーローセクション・スライダー
   ========================================================================== */

/* Hero Slider Styles */
.hero-slider {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s ease-in-out;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide .max-w-lg {
    max-width: 400px;
}

/* PC display background settings */
@media (min-width: 1024px) {
    .slide:nth-child(1) {
        background-position: center center;
        background-size: cover;
    }
    
    .slide:nth-child(2) {
        background-image: url('./images/run_pc.png') !important;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .slide:nth-child(3) {
        background-image: url('./images/hero_2_pc.jpg') !important;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/* Mobile display background settings */
@media (max-width: 1023px) {
    .slide:nth-child(2) {
        background-image: url('./images/run_smp.png') !important;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .slide:nth-child(3) {
        background-image: url('./images/hero_2_smp.jpg') !important;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/* Navigation Dots */
.nav-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: white;
}

/* ==========================================================================
   ボタンスタイル
   ========================================================================== */

.btn-hero {
    background-color: #4CAF50;
    color: white;
    transition: all 0.3s ease;
}

.btn-hero:hover {
    background-color: #388E3C;
    transform: translateY(-2px);
}

.btn-primary {
    background-color: #4CAF50 !important;
    color: white !important;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #388E3C !important;
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid #4CAF50;
    color: #4CAF50;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: #4CAF50;
    color: white;
}

/* ==========================================================================
   カード・アニメーション
   ========================================================================== */

.category-icon,
.product-card,
.testimonial-card,
.quality-card {
    transition: all 0.3s ease;
}

/* カテゴリアイコンのアンダーライン削除 */
.category-icon {
    text-decoration: none !important;
}

.category-icon:hover {
    text-decoration: none !important;
}

.category-icon:hover,
.quality-card:hover {
    transform: translateY(-5px);
}

.product-card:hover,
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Product Card Highlight Effects */
.product-card.highlighted {
    position: relative;
    z-index: 10;
}

.product-card.highlighted:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.product-card:not(.highlighted):hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.product-card.highlighted.ring-4 {
    box-shadow: 0 0 0 4px rgb(34 197 94 / 0.75) !important;
}

.product-card.highlighted.ring-red-400 {
    box-shadow: 0 0 0 4px rgb(248 113 113 / 0.75) !important;
}

.product-card.highlighted.ring-green-400:hover {
    box-shadow: 0 0 0 4px rgb(34 197 94 / 0.75), 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

.product-card.highlighted.ring-red-400:hover {
    box-shadow: 0 0 0 4px rgb(248 113 113 / 0.75), 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* Ranking Badge */
.product-card .bg-orange-600 {
    background-color: #ea580c !important;
    color: white !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999 !important;
    display: block !important;
}

.product-card.border-orange-600 {
    border-color: #ea580c !important;
    border-width: 2px !important;
}

/* ==========================================================================
   Welcartページレイアウト修正
   ========================================================================== */

/* 基本レイアウト */
.site-content,
#primary,
#content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
}

/* 商品詳細ページ */
body.single-post .site-content,
body.single .site-content,
#itempage {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 会員関連ページ */
#wc_login,
#wc_member,
#wc_newmemberform,
#wc_editmemberform,
#wc_changepassword,
#wc_lostmemberpassword {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
}

/* カート・注文関連ページ */
#wc_cart,
#wc_customer,
#wc_delivery,
#wc_confirm,
#wc_ordercompletion {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
}

/* カートナビゲーション */
.cart_navi {
    max-width: 1200px;
    margin: 0 auto 20px;
}

/* フォーム要素 */
.customer_form {
    max-width: 100%;
    margin: 0 auto;
}

.customer_form table {
    width: 100%;
    max-width: none;
}

/* テーブル */
#cart_table,
#confirm_table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

/* ==========================================================================
   メッセージ・エラー表示
   ========================================================================== */

/* 空のメッセージエリアを非表示 */
div.error_message:empty,
div.success_message:empty,
div.warning_message:empty,
div.info_message:empty {
    display: none !important;
}

/* エラーメッセージ */
div.error_message {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 成功メッセージ */
div.success_message {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

/* メッセージ内のテキスト */
div.error_message p,
div.success_message p {
    margin: 0;
    padding: 0;
}

/* 空の説明エリアを非表示 */
.header_explanation:empty,
.footer_explanation:empty {
    display: none !important;
}

/* 説明エリア（内容がある場合のスタイル改善） */
.header_explanation,
.footer_explanation {
    max-width: 800px;
    margin: 15px auto;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    color: #495057;
    font-size: 14px;
    line-height: 1.5;
}

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

/* ページタイトル */
.cart_page_title,
.member_page_title,
.item_page_title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* 商品画像 */
.itemimg img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 商品情報テーブル */
.item-info table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

.item-info th,
.item-info td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.item-info th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* 数量入力とボタン */
.quantity input {
    width: 80px;
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.skubutton {
    padding: 12px 24px;
    background-color: #ff8c00;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.skubutton:hover {
    background-color: #e67e00;
}

/* 在庫状況 */
.itemsoldout {
    color: #f44336;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    margin: 20px 0;
}

/* ==========================================================================
   フォーム・ボタン
   ========================================================================== */

/* 送信ボタンエリア */
.send {
    text-align: center;
    margin: 30px 0;
}

.send input[type="submit"],
.send input[type="button"] {
    padding: 12px 30px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin: 5px;
}

.send input[type="submit"]:hover,
.send input[type="button"]:hover {
    background-color: #45a049;
}

/* ==========================================================================
   ナビゲーション
   ========================================================================== */

.navigation {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* サイドバー */
#sidebar {
    max-width: 300px;
    margin: 20px auto;
    padding: 20px;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 768px) {
    .hero-slider {
        height: 400px;
    }
    
    .site-content,
    #primary,
    #content,
    #wc_login,
    #wc_member,
    #wc_newmemberform,
    #wc_cart,
    #wc_customer,
    #wc_delivery,
    #wc_confirm,
    #itempage {
        max-width: 100%;
        padding: 15px;
        margin: 0;
    }
    
    .customer_form table,
    #cart_table,
    #confirm_table {
        font-size: 14px;
    }
    
    .cart_page_title,
    .member_page_title,
    .item_page_title {
        font-size: 20px;
    }
    
    div.error_message,
    div.success_message {
        margin: 10px 15px;
        padding: 10px 12px;
        font-size: 13px;
    }
}