@charset "UTF-8";
/**
 * common.css - サイト共通コンポーネント（ヘッダー・フッター）
 * 
 * 【概要】
 * このファイルは Days Pet Goods サイト全体で共通使用される
 * ヘッダーとフッターのスタイルを定義します。
 * 
 * 【命名規則】
 * - 接頭辞 `.wd-` を使用し、他のCSSとの競合を回避
 * - BEM記法を採用（Block__Element--Modifier）
 * 
 * 【ブランドカラー】
 * - Primary: #001437（濃紺）
 * - Accent: #11beae（ティール）
 * - Background: #f7f9fb
 * 
 * 【レスポンシブブレークポイント】
 * - モバイル: 768px以下
 * - タブレット: 769px〜1024px
 * - デスクトップ: 1025px以上
 */

/* ==========================================================================
   CSS変数（デザイントークン）
   - サイト全体で一貫したカラー・サイズを使用するためのカスタムプロパティ
   ========================================================================== */
:root {
    /* カラーパレット */
    --wd-color-primary: #001437;
    /* ブランドメインカラー（濃紺）*/
    --wd-color-primary-light: #1a3a5c;
    /* プライマリの明るい版 */
    --wd-color-accent: #11beae;
    /* アクセントカラー（ティール）*/
    --wd-color-text: #333333;
    /* 本文テキスト */
    --wd-color-text-light: #666666;
    /* 薄いテキスト */
    --wd-color-text-muted: #999999;
    /* さらに薄いテキスト */
    --wd-color-bg: #f7f9fb;
    /* 背景色 */
    --wd-color-white: #ffffff;
    --wd-color-border: #eeeeee;
    --wd-color-border-dark: #dddddd;

    /* スペーシング */
    --wd-spacing-xs: 4px;
    --wd-spacing-sm: 8px;
    --wd-spacing-md: 16px;
    --wd-spacing-lg: 24px;
    --wd-spacing-xl: 32px;
    --wd-spacing-xxl: 48px;

    /* コンテナ幅 */
    --wd-container-max: 1200px;

    /* ヘッダー高さ */
    --wd-header-height: 64px;
    --wd-header-height-mobile: 56px;

    /* トランジション */
    --wd-transition-fast: 0.15s ease;
    --wd-transition-normal: 0.3s ease;

    /* z-index レイヤー */
    --wd-z-header: 1000;
    --wd-z-menu-overlay: 999;
    --wd-z-mobile-menu: 1001;
}

/* ==========================================================================
   ヘッダー - メインコンテナ
   - sticky配置でスクロール時も上部に固定
   - 白背景、下部ボーダーでコンテンツと区切り
   ========================================================================== */
.wd-header {
    position: sticky;
    top: 0;
    z-index: var(--wd-z-header);
    background: var(--wd-color-white);
    border-bottom: 1px solid var(--wd-color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ヘッダー内部コンテナ - 最大幅制限と中央寄せ */
.wd-header__inner {
    max-width: var(--wd-container-max);
    margin: 0 auto;
    padding: 0 var(--wd-spacing-lg);
    height: var(--wd-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   ロゴエリア
   - クリック可能なリンクとして機能
   - 画像とテキストの両方に対応
   ========================================================================== */
.wd-header__logo {
    display: flex;
    align-items: center;
    gap: var(--wd-spacing-sm);
    text-decoration: none;
    flex-shrink: 0;
}

/* ロゴ画像 - 高さ固定、幅は自動調整 */
.wd-header__logo-img {
    height: 36px;
    width: auto;
}

/* ロゴテキスト（画像がない場合のフォールバック）*/
.wd-header__logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--wd-color-primary);
    letter-spacing: -0.5px;
}

/* ==========================================================================
   デスクトップナビゲーション
   - 768px以上で表示
   - 横並びメニュー
   ========================================================================== */
.wd-header__nav {
    display: flex;
    align-items: center;
    gap: var(--wd-spacing-xl);
}

/* ナビリンク - ホバーでアンダーライン */
.wd-header__nav-link {
    color: var(--wd-color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: var(--wd-spacing-sm) 0;
    position: relative;
    transition: color var(--wd-transition-fast);
}

/* アンダーラインアニメーション用の疑似要素 */
.wd-header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--wd-color-primary);
    transition: width var(--wd-transition-normal);
}

.wd-header__nav-link:hover {
    color: var(--wd-color-primary);
}

.wd-header__nav-link:hover::after {
    width: 100%;
}

/* ==========================================================================
   カートボタン
   - アイコン＋バッジで構成
   - バッジは商品数を表示（0の場合は非表示）
   ========================================================================== */
.wd-header__cart {
    display: flex;
    align-items: center;
    gap: var(--wd-spacing-xs);
    color: var(--wd-color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: var(--wd-spacing-sm) var(--wd-spacing-md);
    border-radius: 6px;
    background: var(--wd-color-bg);
    transition: background var(--wd-transition-fast);
    position: relative;
}

.wd-header__cart:hover {
    background: var(--wd-color-border);
}

/* カートアイコン */
.wd-header__cart-icon {
    font-size: 18px;
}

/* カートバッジ - 商品数表示 */
.wd-header__cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #fa5171;
    color: var(--wd-color-white);
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* バッジが0の時は非表示 */
.wd-header__cart-badge:empty,
.wd-header__cart-badge[data-count="0"] {
    display: none;
}

/* ==========================================================================
   ハンバーガーメニューボタン（モバイル用）
   - 768px以下でのみ表示
   - 3本線 → × に変形するアニメーション
   ========================================================================== */
.wd-header__menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: var(--wd-z-mobile-menu);
}

/* ハンバーガーの3本線 */
.wd-header__menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--wd-color-primary);
    border-radius: 2px;
    transition: transform var(--wd-transition-normal), opacity var(--wd-transition-normal);
}

/* メニューオープン時のアニメーション（×形状へ変形）*/
.wd-header__menu-btn.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.wd-header__menu-btn.is-active span:nth-child(2) {
    opacity: 0;
}

.wd-header__menu-btn.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   モバイルメニュー（ドロワー）
   - 画面右側からスライドイン
   - オーバーレイ付き
   ========================================================================== */
.wd-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    background: var(--wd-color-white);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    z-index: var(--wd-z-mobile-menu);
    transform: translateX(100%);
    transition: transform var(--wd-transition-normal);
    padding: 80px var(--wd-spacing-lg) var(--wd-spacing-lg);
    overflow-y: auto;
}

/* メニューオープン時 */
.wd-mobile-menu.is-open {
    transform: translateX(0);
}

/* オーバーレイ（背景暗転）*/
.wd-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--wd-z-menu-overlay);
    opacity: 0;
    transition: opacity var(--wd-transition-normal);
}

.wd-mobile-overlay.is-visible {
    opacity: 1;
}

/* モバイルメニュー内のリンク */
.wd-mobile-menu__link {
    display: block;
    padding: var(--wd-spacing-md) 0;
    color: var(--wd-color-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--wd-color-border);
    transition: color var(--wd-transition-fast);
}

.wd-mobile-menu__link:hover {
    color: var(--wd-color-primary);
}

/* ==========================================================================
   レスポンシブ: モバイル（768px以下）
   - デスクトップナビ非表示
   - ハンバーガーメニュー表示
   ========================================================================== */
@media (max-width: 768px) {
    .wd-header__inner {
        height: var(--wd-header-height-mobile);
        padding: 0 var(--wd-spacing-md);
    }

    /* デスクトップナビを非表示 */
    .wd-header__nav {
        display: none;
    }

    /* ハンバーガーボタンを表示 */
    .wd-header__menu-btn {
        display: flex;
    }

    /* モバイルメニューを有効化 */
    .wd-mobile-menu,
    .wd-mobile-overlay {
        display: block;
    }

    .wd-header__logo-img {
        height: 32px;
    }
}

/* ==========================================================================
   フッター - メインコンテナ
   - 4列レイアウト（デスクトップ）
   - モバイルでは1列スタック
   ========================================================================== */
.wd-footer {
    background: var(--wd-color-primary);
    color: var(--wd-color-white);
    padding: var(--wd-spacing-xxl) var(--wd-spacing-lg) var(--wd-spacing-lg);
    margin-top: var(--wd-spacing-xxl);
}

/* フッター内部コンテナ */
.wd-footer__inner {
    max-width: var(--wd-container-max);
    margin: 0 auto;
}

/* フッターコンテンツ - グリッドレイアウト */
.wd-footer__content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--wd-spacing-xl);
    margin-bottom: var(--wd-spacing-xl);
}

/* ==========================================================================
   フッターセクション（各列）
   ========================================================================== */
.wd-footer__section {
    /* 各列共通スタイル - フレックス収縮を防止 */
    flex-shrink: 0;
}

/* セクションタイトル */
.wd-footer__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 var(--wd-spacing-md) 0;
    color: var(--wd-color-white);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   フッター - ショップ情報（左端列）
   ========================================================================== */
.wd-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--wd-spacing-sm);
    margin-bottom: var(--wd-spacing-md);
}

.wd-footer__brand-logo {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    /* 白色に変換 */
}

.wd-footer__brand-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--wd-color-white);
}

.wd-footer__description {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* ==========================================================================
   フッターリンクリスト
   ========================================================================== */
.wd-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wd-footer__links li {
    margin-bottom: var(--wd-spacing-sm);
}

.wd-footer__link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--wd-transition-fast);
}

.wd-footer__link:hover {
    color: var(--wd-color-white);
}

/* ==========================================================================
   フッター - SNSリンク
   - アイコンボタン形式で横並び
   ========================================================================== */
.wd-footer__social {
    display: flex;
    gap: var(--wd-spacing-sm);
    margin-top: var(--wd-spacing-md);
}

.wd-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--wd-color-white);
    text-decoration: none;
    font-size: 16px;
    transition: background var(--wd-transition-fast);
}

.wd-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   フッターボトム（コピーライト）
   ========================================================================== */
.wd-footer__bottom {
    padding-top: var(--wd-spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wd-spacing-md);
}

.wd-footer__copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.wd-footer__legal {
    display: flex;
    gap: var(--wd-spacing-lg);
}

.wd-footer__legal-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 12px;
    transition: color var(--wd-transition-fast);
}

.wd-footer__legal-link:hover {
    color: var(--wd-color-white);
}

/* ==========================================================================
   レスポンシブ: タブレット（769px〜1024px）
   - 2列レイアウト
   ========================================================================== */
@media (max-width: 1024px) {
    .wd-footer__content {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   レスポンシブ: モバイル（768px以下）
   - 1列スタックレイアウト
   - コンパクトな表示
   ========================================================================== */
@media (max-width: 768px) {
    .wd-footer {
        padding: var(--wd-spacing-xl) var(--wd-spacing-md) var(--wd-spacing-md);
    }

    .wd-footer__content {
        grid-template-columns: 1fr;
        gap: var(--wd-spacing-lg);
    }

    .wd-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .wd-footer__legal {
        justify-content: center;
    }
}

/* ==========================================================================
   BASEプラットフォーム既存ヘッダー/フッター非表示
   - 商品詳細ページでカスタムヘッダー/フッターと重複するため
   - !important を使用して BASE のスタイルを確実に上書き
   ========================================================================== */
.layout-headerDesktop,
.layout-headerMobile,
.layout-footerContainer,
.layout-footerNav,
.layout-footer,
.layout-footerBlock {
    display: none !important;
}

/* ==========================================================================
   BASE layout-containerのグリッドレイアウトを無効化
   - law.htmlとprivacy.htmlでフッターが正しく表示されるように
   - layout-containerはBASEのグリッドレイアウトを使用しているため、
     カスタムフッターが全幅で表示されるように上書き
   ========================================================================== */
body[data-current-route="law"] .layout-container,
body[data-current-route="privacy"] .layout-container {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    max-width: none !important;
}

/* フッターがlayout-containerの外側に配置されている場合のスタイル */
body[data-current-route="law"] .wd-footer,
body[data-current-route="privacy"] .wd-footer {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: both !important;
}

/* layout-mainのグリッド配置を解除 */
body[data-current-route="law"] .layout-main,
body[data-current-route="privacy"] .layout-main {
    display: block !important;
    grid-column: unset !important;
    grid-row: unset !important;
    max-width: var(--wd-container-max, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 var(--wd-spacing-lg, 24px) !important;
}