@charset "UTF-8";

/* =========================================
   Results Page Specific Styles
   ========================================= */

/* Hero Section */
.hero-bg {
    background: linear-gradient(135deg, #f9f9f9 50%, #ffffff 50%);
}

.page-title {
    letter-spacing: 0.03em !important;
    font-family: 'Noto Serif JP', serif;
}

/* Section Title */
.section-title {
    font-family: 'Noto Serif JP', serif;
}

/* Result Metrics (数字部分) */
.result-metric {
    transition: transform 0.3s ease;
}
.result-metric:hover {
    transform: translateY(-5px);
}

/* Case Cards */
.case-card {
    transition: all 0.3s ease;
    height: 100%;
    /* カードの高さを揃えるためのFlex設定 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5%;
}

.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* 実績ページ：body の overflow-x が box-shadow を切るため緩和 */
body[data-page="results"] {
    overflow-x: visible;
}

/* Webマーケティング事例：ホバー影の余白（負マージンで横幅を維持） */
.web-marketing-cases {
    overflow: visible;
}

.web-marketing-card-shell {
    overflow: visible;
    padding: 1.25rem 1rem 1.5rem;
    margin: -1.25rem -1rem -1.5rem;
    min-height: 0;
}

@media (min-width: 1024px) {
    .web-marketing-card-shell {
        padding: 1.5rem 1.25rem 1.75rem;
        margin: -1.5rem -1.25rem -1.75rem;
    }
}

.web-marketing-card-shell > .case-card {
    height: 100%;
}

/* 影が端で切れにくいようやや抑えめ（必要なら元の値に戻せます） */
.web-marketing-card-shell .case-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

/* Graph Animation Bar */
.animate-bar {
    width: 0;
    transition: width 1.5s ease-out;
}


@media (max-width: 640px) {
    .grid.gap-8 {
        gap:4%;
    }
}