/* ==========================================================
   Products Page Styling
   ========================================================== */
.l-main-products {
    background-color: var(--color-bg);
    overflow-x: hidden;
}

/* 共通パーツ：セクション大見出し */
.c-section-title {
    color: var(--color-blue);
    font-family: Arial;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 80px;
}

.c-section-title__line {
    width: 40px;
    height: 5px;
    background: var(--color-blue);
    margin-left: 80px; 
    margin-bottom: 40px;
}

/* Hero Section */
.p-products-hero {
    width: 100%;
    height: 482px;
}

.p-products-hero__inner {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center; 
}

.p-products-hero__left {
    width: 35%;
    flex-shrink: 0;
}

.p-products-hero__title {
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 3.2px;
    margin: 0;
}

.p-products-hero__right {
    width: 65%;
    height: 490px;
    background: url(../images/products-hero.jpg);
    background-position: center;
    background-size: cover;
}

/* Intro Section */
.p-products-intro {
    padding: 100px 80px 20px;
}

.p-products-intro__inner {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
}

.p-products-intro__text {
    width: 100%;
    max-width: 1224px;
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

/* 白枠の制御: 画面端から 80px */
.p-products-section1,
.p-products-section2,
.p-products-section3 {
    padding: 0 80px;
}

.p-products-section1__inner,
.p-products-section2__inner,
.p-products-section3__inner {
    width: 1200px;
    background-color: #F2F2F2;
    margin: 80px auto;
    padding: 60px 0;
}

/* --- コンテンツ幅の出し分け --- */

/* Section 1:画面端から計 240px */
.p-products-section1__content-inner {
    padding: 0 150px; /* 80px(白枠端) + 160px = 240px */
}

/* Section 2 & 3: 画面端から計 160px */
.p-products-section2__content-inner,
.p-products-section3__content-inner {
    padding: 0 150px; /* 80px(白枠端) + 80px = 160px */
}

/* Section 1 固有スタイル */
.p-products-section1__sub-header { margin-bottom: 60px; }
.p-products-section1__title-en { color: #333; font-family: Arial; font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.p-products-section1__title { color: #333; font-family: "Noto Sans JP"; font-size: 20px; font-weight: 700; line-height: 30px; }
.p-products-section1__top-images { display: flex; justify-content: space-between; margin-bottom: 40px; gap: 50px;}
.p-products-section1__image-box { width: calc(50% - 10px); height: 160px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.p-products-section1__image-box--01 { background-image: url('../images/products-tech-01.jpg'); }
.p-products-section1__image-box--02 { background-image: url('../images/products-tech-02.jpg'); }
.p-products-section1__main-text { width: 100%; max-width: none; color: #333; font-size: 16px; line-height: 30px; margin-bottom: 100px; }

/* Grid Section */
.p-products-grid { margin-top: 100px; }
.p-products-grid__main-title { color: var(--color-blue); text-align: left; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.p-products-grid__main-subtitle { color: #333; text-align: left; font-size: 16px; margin-bottom: 60px; }
.p-products-grid__container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 80px; }
.p-products-grid__image { width: 100%; max-width: none; height: 230px; background-size: 100%; background-position: center; background-repeat: no-repeat; margin-bottom: 20px; }
.p-products-grid__image--01 { background-image: url('../images/products-grid-01.jpg'); }
.p-products-grid__image--02 { background-image: url('../images/products-grid-02.jpg'); }
.p-products-grid__image--03 { background-image: url('../images/products-grid-03.jpg'); }
.p-products-grid__image--04 { background-image: url('../images/products-grid-04.jpg'); }
.p-products-grid__image--05 { background-image: url('../images/products-grid-05.jpg'); }
.p-products-grid__image--06 { background-image: url('../images/products-grid-06.jpg'); }
.p-products-grid__title { color: #333; font-family: "Noto Sans JP"; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.p-products-grid__text { width: 100%; color: #333; font-size: 15px; line-height: 25px; }

/* Section 2 & 3 固有スタイル */
.p-products-section2__inner, .p-products-section3__inner { border-top: 1px solid #EEE; padding-top: 80px; }
.p-products-section2__title, .p-products-section3__title { color: var(--color-blue); font-family: "Noto Sans JP"; font-size: 24px; font-weight: 700; margin-bottom: 30px; }
.p-products-section2__intro-text, .p-products-section3__intro-text { color: #333; font-size: 16px; line-height: 30px; margin-bottom: 50px; }
.p-products-section2__graphs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 80px; }
.p-products-section2__graph-item img, .p-products-section3__image img { width: 100%; height: auto; }

/* --- Responsive (834px基準) --- */
@media (max-width: 834px) {
    /* Hero Section Responsive: 文字を画像の中央に重ねる */
    .p-products-hero {
        position: relative;
        height: 482px; 
    }
    .p-products-hero__inner {
        position: relative;
        z-index: 10;
        height: 100%;
        display: flex;
        justify-content: center; /* 横中央寄せ */
        align-items: center;     /* 縦中央寄せ */
        padding: 0 20px;
    }
    .p-products-hero__left {
        width: 100%;
        position: relative;
        z-index: 20; /* 画像より確実に前面に配置 */
    }
    .p-products-hero__title {
        text-align: center;
        color: #FFF;
        font-size: 45px;
        letter-spacing: 2px;
    }
    .p-products-hero__right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* 背面に配置 */
        margin: 0;
        background-position: center;
        background-size: cover;
    }

    .p-products-intro, .p-products-section1, .p-products-section2, .p-products-section3 { padding: 0 20px; }
    .p-products-section1__inner, .p-products-section2__inner, .p-products-section3__inner { margin-bottom: 60px; padding: 40px 20px; }
    
    /* Section 1 のみ、スマホでも一段内側にインデント */
    .p-products-section1__content-inner { padding: 0; }

    /* モバイル時：写真を100%幅にしてバランス調整 */
    .p-products-section1__image-box { width: 100% !important; margin-bottom: 20px; }

    .p-products-intro__inner, .p-products-section2__content-inner, .p-products-section3__content-inner, .c-section-title, .c-section-title__line { padding: 0; margin-left: 0; }
    .p-products-grid__text, .p-products-grid__image { width: 100% !important; max-width: 100% !important; }
}



/* Responsive */
@media (max-width: 1280px) {
    .p-products-section1__inner, .p-products-section2__inner, .p-products-section3__inner, .c-cta__inner {
    width: 100%;
    }
}

@media (max-width: 1024px) {
    .p-products-hero__left {
    width: 40%;
    }
}

@media (max-width: 834px) {
    .p-products-hero__left {
    width: 100%;
    }
    .p-products-intro__text {
        padding: 40px 20px 0px;
        margin-bottom: -20px;
    }
}

@media (max-width: 480px) {
    .p-products-section2__graphs,
    .p-products-section1__top-images,
    .p-products-grid__container {
        grid-template-columns: none;
        flex-direction: column;
        gap: 30px;
    }
}