@charset "UTF-8";

/* ----------------------------------------------------------------
    KPM製品ページ用CSS
---------------------------------------------------------------- */

/* ========================================
    KPM-500 DFRヒーローセクション
========================================= */
.kpmHero {
    padding: 0;
    background-color: var(--color-brand-kayakubluebackground);
}

.kpmHero_title {
    padding: var(--space-size-40) var(--space-size-16);
    text-align: center;
}

.kpmHero_title_text {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublack);
    margin: 0;
}

@media print, screen and (min-width: 768px) {
    .kpmHero_title {
        padding: var(--space-size-64) 0;
    }

    .kpmHero_title_text {
        font-size: var(--font-size-42);
    }
}

/* ========================================
    KPM-500 DFR概要セクション
========================================= */
.kpmOverview {
    padding: var(--space-size-32) 0 0;
}

@media print, screen and (min-width: 768px) {
    .kpmOverview {
        padding: var(--space-size-40) 0 0;
    }
}

/* ========================================
    特長セクション - リストと画像の横並び
========================================= */
.kpmFeatureContent {
    display: block;
    margin-top: var(--space-size-24);
}

.kpmFeatureContent .featureList {
    margin-bottom: var(--space-size-24);
}

.kpmFeatureImage {
    width: 100%;
}

.kpmFeatureImage img {
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) {
    .kpmFeatureContent {
        display: flex;
        gap: 80px;
        align-items: flex-start;
        margin-top: var(--space-size-32);
    }

    .kpmFeatureContent .featureList {
        margin: 0;
    }

    .kpmFeatureImage {
        flex-shrink: 0;
        width: 300px;
    }

    .kpmFeatureImage img {
        width: 300px;
        height: auto;
    }
}

/* ========================================
    製品特性 - 画像複数表示対応
========================================= */
/* KPM製品では画像が2枚並ぶケースがあるため、その対応 */

/* 画像を縦に並べる（スマホ） */
.kpm .productCharacteristics_item .productCharacteristics_image + .productCharacteristics_image {
    margin-top: var(--space-size-16);
}

@media print, screen and (min-width: 768px) {
    /* 画像を横に並べる（PC） */
    .kpm .productCharacteristics_item .productCharacteristics_image {
        display: inline-block;
        vertical-align: top;
    }

    .kpm .productCharacteristics_item .productCharacteristics_image + .productCharacteristics_image {
        margin-top: 0;
        margin-left: var(--space-size-24);
    }

    /* 画像の幅を調整（2枚並びの場合） */
    .kpm .productCharacteristics_item .productCharacteristics_image img {
        max-width: 180px;
    }
}

/* ========================================
    製品イメージセクション
========================================= */
.kpmProductImage {
    display: flex;
    gap: var(--space-size-16);
    margin-top: var(--space-size-24);
    flex-wrap: wrap;
}

.kpmProductImage_item {
    flex: 1 1 calc(33.333% - var(--space-size-16));
    min-width: 100px;
}

.kpmProductImage_item img {
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) {
    .kpmProductImage {
        flex-wrap: nowrap;
        gap: var(--space-size-24);
        margin-top: var(--space-size-32);
    }

    .kpmProductImage_item {
        flex: 1;
    }
}

/* ========================================
    適用事例セクション
========================================= */
.kpmCaseStudy {
    margin-top: var(--space-size-24);
}

.kpmCaseStudy_row {
    display: block;
    margin-bottom: var(--space-size-16);
}

.kpmCaseStudy_row:last-child {
    margin-bottom: 0;
}

.kpmCaseStudy_item {
    margin-bottom: var(--space-size-16);
}

.kpmCaseStudy_item:last-child {
    margin-bottom: 0;
}

.kpmCaseStudy_item img {
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) {
    .kpmCaseStudy {
        margin-top: var(--space-size-32);
    }

    .kpmCaseStudy_row {
        display: flex;
        gap: var(--space-size-24);
        margin-bottom: var(--space-size-24);
    }

    .kpmCaseStudy_item {
        flex: 1;
        margin-bottom: 0;
    }

    /* 最後の行が1つの場合は幅を調整 */
    .kpmCaseStudy_row:last-child .kpmCaseStudy_item:only-child {
        flex: 0 0 calc(50% - 12px);
    }
}

/* ========================================
    プロセスフローセクション
========================================= */
.kpmProcessFlow {
    margin-top: var(--space-size-24);
}

.kpmProcessFlow_row {
    display: block;
    margin-bottom: var(--space-size-16);
}

.kpmProcessFlow_row:last-child {
    margin-bottom: 0;
}

.kpmProcessFlow_item {
    margin-bottom: var(--space-size-16);
}

.kpmProcessFlow_item:last-child {
    margin-bottom: 0;
}

.kpmProcessFlow_item img {
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) {
    .kpmProcessFlow {
        margin-top: var(--space-size-32);
    }

    .kpmProcessFlow_row {
        display: flex;
        gap: var(--space-size-24);
        margin-bottom: var(--space-size-24);
    }

    .kpmProcessFlow_item {
        flex: 1;
        margin-bottom: 0;
    }
}

/* ========================================
    比較セクション（液状品 vs DFR）
========================================= */
.kpmComparison {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-16);
    margin-top: var(--space-size-24);
}

.kpmComparison_item {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-16);
}

.kpmComparison_header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 4px 16px;
}

.kpmComparison_header__light {
    background-color: var(--color-primitive-blue-50);
}

.kpmComparison_header__blue {
    background-color: var(--color-brand-kayakublue);
}

.kpmComparison_header_text {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-180);
    color: var(--color-brand-kayakublack);
    margin: 0;
    text-align: center;
}

.kpmComparison_header__blue .kpmComparison_header_text {
    color: var(--color-neutral-white);
}

.kpmComparison_content {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-16);
    align-items: center;
}

.kpmComparison_image {
    width: 200px;
    height: 200px;
}

.kpmComparison_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kpmComparison_description {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublack);
    margin: 0;
    text-align: center;
}

.kpmComparison_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kpmComparison_list_item {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublack);
}

.kpmComparison_list_bullet {
    color: var(--color-brand-kayakublue);
}

.kpmComparison_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.kpmComparison_arrow svg {
    width: 48px;
    height: 80px;
    transform: rotate(90deg);
}

@media print, screen and (min-width: 768px) {
    .kpmComparison {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-size-32);
        margin-top: var(--space-size-32);
    }

    .kpmComparison_item {
        flex: 1;
        max-width: 276px;
    }

    .kpmComparison_header_text {
        font-size: var(--font-size-20);
    }

    .kpmComparison_arrow {
        flex-shrink: 0;
        width: 80px;
        height: 48px;
        align-self: center;
    }

    .kpmComparison_arrow svg {
        width: 80px;
        height: 48px;
        transform: rotate(0deg);
    }
}