/**
 * Law Page Styles
 * 
 * 特定商取引法に基づく表記ページ専用のスタイル
 * BEM形式: .law-page__Block__Element--Modifier
 * 
 * @package KICKOFF_WEB_Theme
 */

/* ============================================
   基本スタイル
   ============================================ */
.law-page {
    padding: var(--spacing-3xl) var(--spacing-md);
    background-color: var(--color-white);
    min-height: 80vh;
}

.law-page__container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.law-page__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    text-align: center;
    color: var(--color-text);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.4;
}

.law-page__content {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* ============================================
   テーブルスタイル
   ============================================ */
.law-page__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.law-page__table-row {
    border-bottom: 1px solid #e0e0e0;
}

.law-page__table-row:last-child {
    border-bottom: none;
}

.law-page__table-header {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 700;
    color: var(--color-text);
    background-color: #f4f7f9;
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    vertical-align: top;
    width: 30%;
    min-width: 120px;
    border-right: 1px solid #e0e0e0;
}

.law-page__table-data {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--color-text);
    padding: var(--spacing-md) var(--spacing-lg);
    line-height: 1.8;
    vertical-align: top;
}

/* ============================================
   レスポンシブ対応（タブレット以下）
   ============================================ */
@media (max-width: 991px) {
    .law-page {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .law-page__title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-xl);
    }
    
    .law-page__table-header {
        font-size: clamp(13px, 2.5vw, 15px);
        padding: var(--spacing-sm) var(--spacing-md);
        width: 35%;
    }
    
    .law-page__table-data {
        font-size: clamp(13px, 2.5vw, 15px);
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* ============================================
   レスポンシブ対応（スマホ）
   ============================================ */
@media (max-width: 575px) {
    .law-page {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .law-page__title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-lg);
    }
    
    .law-page__content {
        border-radius: var(--border-radius);
    }
    
    /* スマホでは1行1項目（縦並び）にする */
    .law-page__table,
    .law-page__table tbody,
    .law-page__table-row,
    .law-page__table-header,
    .law-page__table-data {
        display: block;
        width: 100%;
    }
    
    .law-page__table-row {
        border-bottom: 1px solid #e0e0e0;
        padding: 0;
        margin-bottom: 0;
    }
    
    .law-page__table-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    
    .law-page__table-header {
        font-size: clamp(14px, 3vw, 16px);
        font-weight: 700;
        background-color: #f4f7f9;
        color: var(--color-text);
        padding: var(--spacing-md) var(--spacing-lg);
        margin-bottom: 0;
        border-right: none;
        text-align: left;
        width: 100%;
        min-width: auto;
    }
    
    .law-page__table-data {
        font-size: clamp(14px, 3vw, 16px);
        padding: var(--spacing-md) var(--spacing-lg);
        line-height: 1.8;
        width: 100%;
    }
    
    /* テーブルのボーダーを調整 */
    .law-page__table {
        border: none;
    }
}