/* =============================================
   お片付けプランナー - 新部品専用CSS（components.css）
   kplan-style / components.css

   新部品専用。既存部品は既存CSSから移動しない。
   生値禁止・tokens.cssの変数のみ使用（design/DESIGN.md
   「新部品作成プロトコル」参照）。
   ============================================= */

/* =============================================
   price-table（表形式の目安表示。page-ihinseiri.php で初採用）
   .bunkatsu-table（bunkatsu-page.css）のCSSパターンを複製・改名。
   bunkatsu-page.cssはページ専有ファイルのため、ページを跨いで
   再利用する表部品はcomponents.css側に複製する（命名規則は継承）。
   コピー元の生値（padding/font-size/line-height）は
   tokens.cssの最近似トークンに置換済み（完全一致した値を優先）。
   min-widthは横スクロール発生用の構造値でありデザイントークンの
   対象外と判断し、コピー元の値のまま維持する。
   ============================================= */
.price-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-6) 0 0;
    border-radius: var(--radius-md);
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 600px;
}

.price-table th,
.price-table td {
    padding: var(--space-3-5) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.price-table thead th {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--fw-bold);
    text-align: center;
}

.price-table thead th small {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    margin-top: 4px;
    opacity: 0.85;
}

.price-table tbody th {
    background: var(--color-primary-lt);
    color: var(--color-primary-dk);
    font-weight: var(--fw-bold);
    width: 30%;
}

.price-table tbody td small {
    color: var(--color-text-lite);
    font-size: var(--fs-xs);
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 786px) {
    .price-table {
        font-size: var(--fs-sm);
        min-width: 480px;
    }
    .price-table th,
    .price-table td {
        padding: var(--space-2-5) var(--space-3);
    }
}

/* =============================================
   hero-cta-group--center（既存 .hero-cta-group の中央寄せmodifier）
   .hero-cta-group（main-kplan.css）はjustify-content未指定＝左寄せ。
   .cta-section等の中央寄せセクション内で使う場合の見た目を
   .bunkatsu-cta（bunkatsu-page.css）の中央寄せに揃えるための
   modifierのみを追加する（他プロパティは既存 .hero-cta-group を継承）。
   ============================================= */
.hero-cta-group--center {
    justify-content: center;
}

/* =============================================
   footer-tel-group（フッター電話番号の2系統分離。2026-07-09）
   ポータル経由の営業電話がフリーダイヤルへ混入する対策として、
   ご相談・ご依頼専用（0120）と営業・企業窓口（050）を分離表示する。
   footer.php の .footer-dl「電話」行を置き換え、.footer-info内の
   独立ブロックとして配置する。
   ============================================= */
.footer-tel-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.footer-tel-label {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.55);
    margin-bottom: 2px;
}

.footer-tel-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}

.footer-tel-number {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-white);
}

.footer-tel-note {
    font-size: var(--fs-2xs);
    color: rgba(255,255,255,0.55);
}


/* =============================================
   新着の作業実績（トップページ / works-latest）
   2026-07-24 追加 / 同日 2件表示・ビフォーアフター型に変更
   ============================================= */
.works-latest-section {
    padding: var(--section-pad);
    background: var(--color-bg);
}

.works-latest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.works-latest-card {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-base), transform var(--duration-base);
}

.works-latest-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

/* ビフォー → アフター（中央に矢印） */
.works-latest-ba {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3);
    background: var(--color-bg-gray);
}

.works-latest-ba-item {
    position: relative;
    margin: 0;
    width: 100%;
}

.works-latest-ba-item:only-child {
    grid-column: 1 / -1;
}

.works-latest-ba-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}

.works-latest-ba-label {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    line-height: var(--lh-relaxed);
}

.works-latest-ba-label--before {
    background: var(--color-primary);
}

.works-latest-ba-label--after {
    background: var(--color-accent);
}

.works-latest-ba-arrow {
    color: var(--color-accent);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1;
}

.works-latest-noimg {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-10) 0;
    font-size: var(--fs-xs);
    color: var(--color-text-lite);
}

.works-latest-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.works-latest-title {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--color-primary-dk);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-2);
}

.works-latest-price {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--color-accent-dk);
    margin-bottom: var(--space-2);
}

.works-latest-price span {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-lite);
    margin-right: var(--space-2);
}

.works-latest-memo {
    font-size: var(--fs-sm);
    color: var(--color-text-sub);
    line-height: var(--lh-loose);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.works-latest-more {
    text-align: center;
}

@media (max-width: 786px) {
    .works-latest-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .works-latest-ba-arrow {
        font-size: var(--fs-md);
    }
}


/* =============================================
   トップバナー（oplan-donna）全幅表示
   2026-07-31 ワイド画面で右に余白が出る対策
   ============================================= */
img[src*="oplan-donna"] {
    width: 100%;
}