@charset "UTF-8";

/* ----------------------------------------------------------------
    TOPページ用CSS
---------------------------------------------------------------- */

/* ========================================
    ヒーローセクション
========================================= */
.heroSection {
    width: 100%;
    background-image: url('../img/top_herosection_bg.jpg');
    background-size: cover;
    background-position: center left 68%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

@media print, screen and (min-width: 768px) {
    .heroSection {
        background-position: center;
        height: 460px;
    }
}

.heroSection_container {
    width: 100%;
    max-width: 375px;
    padding: var(--space-size-32) var(--space-size-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-size-24);
    align-items: center;
    justify-content: center;
}

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

.heroSection_title {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    color: var(--color-neutral-white);
    text-align: left;
    margin: 0;
    width: 100%;
}

@media print, screen and (min-width: 768px) {
    .heroSection_title {
        font-size: var(--font-size-42);
    }
}

.heroSection_description {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-180);
    color: var(--color-neutral-white);
    text-align: left;
    margin: 0;
    width: 100%;
}

@media print, screen and (min-width: 768px) {
    .heroSection_description {
        font-size: var(--font-size-20);
    }
}

/* ========================================
    ニュースセクション
========================================= */
.newsSection {
    width: 100%;
    padding: var(--space-size-32) 0 var(--space-size-56);
}

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

.newsSection_inner {
    width: 94.44%;
    margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
    .newsSection_inner {
        width: 1000px;
    }
}

/* お知らせボックス */
.newsBox {
    background-color: var(--color-neutral-white);
    border: 2px solid var(--color-brand-kayakublue);
    border-radius: var(--border-radius-8);
    padding: var(--space-size-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-size-8);
}

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

.newsBox_title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-180);
    color: var(--color-brand-kayakublue);
    margin: 0;
    flex-shrink: 0;
}

@media print, screen and (min-width: 768px) {
    .newsBox_title {
        font-size: var(--font-size-24);
        width: 96px;
    }
}

.newsBox_divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-brand-kayakublue);
    flex-shrink: 0;
}

@media print, screen and (min-width: 768px) {
    .newsBox_divider {
        width: 1px;
        height: 104px;
    }
}

.newsBox_content {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-8);
    flex: 1;
}

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

@media print, screen and (min-width: 768px) {
    .newsBox_item {
        flex-direction: row;
        gap: var(--space-size-24);
        align-items: center;
    }
}

.newsBox_date {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-180);
    flex-shrink: 0;
}

@media print, screen and (min-width: 768px) {
    .newsBox_date {
        font-size: var(--font-size-20);
    }
}

.newsBox_headline {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    margin: 0;
}

@media print, screen and (min-width: 768px) {
    .newsBox_headline {
        font-size: var(--font-size-20);
    }
}

.newsBox_text {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublack);
    margin: 0;
}

@media print, screen and (min-width: 768px) {
    .newsBox_text {
        font-size: var(--font-size-16);
    }
}

/* ========================================
    製品紹介セクション
========================================= */
.productSection {
    padding: 0 0 var(--space-size-56);
}

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


/* 製品サブセクション */
.productSubsection {
    margin-top: var(--space-size-40);
}

@media print, screen and (min-width: 768px) {
    .productSubsection {
        margin-top: var(--space-size-80);
    }
    .el_heading2 + .productSubsection {
        margin-top: var(--space-size-56);
    }
}

.productSubsection:first-child {
    margin-top: 0;
}

.el_heading3 + .productSubsection_description {
    line-height: var(--line-height-160);
    margin-top: var(--space-size-24);
}

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

/* 製品カード */
.productSubsection .bl_productCards {
    margin-top: var(--space-size-32);
}

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

/* 製品比較テーブル */
.productTable {
    margin-top: var(--space-size-24);
}

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

/* スクロールヒント（SP専用） */
.productTable_scrollHint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-size-16);
}

.productTable_scrollIcon {
    width: 31.347px;
    height: 24px;
    flex-shrink: 0;
}

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

@media print, screen and (min-width: 768px) {
    .productTable_scrollHint {
        display: none;
    }
}

.productTable_sclrollContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media print, screen and (min-width: 768px) {
    .productTable_sclrollContainer {
        overflow-x: visible;
    }
}

.productTable_table {
    width: 800px;
    border-collapse: collapse;
    font-size: var(--font-size-14);
    line-height: var(--line-height-160);
}

@media print, screen and (min-width: 768px) {
    .productTable_table {
        width: 800px;
        margin: 0 auto;
    }
}

.productTable_table th {
    background-color: var(--color-brand-kayakublue02);
    color: var(--color-neutral-white);
    font-weight: var(--font-weight-700);
    text-align: center;
    padding: var(--space-size-8);
    border: 1px solid var(--color-brand-kayakublack);
}

.productTable_table td {
    text-align: center;
    padding: var(--space-size-8);
    border: 1px solid var(--color-brand-kayakublack);
    vertical-align: middle;
}

.productTable_cell__bold {
    font-weight: var(--font-weight-700);
}

.productTable_cell__green {
    background-color: #e5f7e8;
}

.productTable_cell__blue {
    background-color: #e5eff7;
}

.productTable_cell__pink {
    background-color: #ffe9f0;
}

.productTable_cell__orange {
    background-color: #ffede9;
}

.productTable_cell__gray {
    background-color: var(--color-brand-footergray);
}

.productTable_note {
    line-height: var(--line-height-160);
    margin-top: var(--space-size-24);
}

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

/* ========================================
    当社の技術セクション
========================================= */
.technologySection {
    background-color: var(--color-brand-kayakubluebackground);
    padding: var(--space-size-32) 0;
}

.technologySection_inner {
    width: 94.44%;
    margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
    .technologySection {
        padding: var(--space-size-64) 0;
    }
    .technologySection_inner {
        display: flex;
        align-items: center;
        gap: 48px;
        max-width: 1000px;
    }
}

/* 画像エリア */
.technologySection_image {
    width: 100%;
}

@media print, screen and (min-width: 768px) {
    .technologySection_image {
        width: 460px;
        height: 240px;
        flex-shrink: 0;
    }
}

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

/* コンテンツエリア */
.technologySection_content {
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .technologySection_content {
        margin-top: 0;
    }
}

/* タイトル */
.technologySection_title {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublack);
}

@media print, screen and (min-width: 768px) {
    .technologySection_title {
        font-size: var(--font-size-32);
    }
}

/* 説明文 */
.technologySection_description {
    line-height: var(--line-height-160);
    margin-top: var(--space-size-24);
}

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

/* ボタンエリア */
.technologySection_button {
    display: flex;
    justify-content: center;
    margin-top: var(--space-size-24);
}

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

/* ========================================
    製品リンクボタン
========================================= */
.productLinkButton {
    margin-top: var(--space-size-32);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .productLinkButton {
        margin-top: var(--space-size-56);
        flex-direction: row;
        justify-content: center;
        gap: var(--space-size-40);
    }
}