/*================================================
    page-mainvisual
================================================*/

.page-mainvisual {
    background-image: url(../../image/production-technology/page-mainvisual.png), linear-gradient(to right, #1B2E39 , #365C72);
    background-position: center, center;
    background-size: cover, cover;

}

/*================================================
    production-technology-lead
================================================*/

.production-technology-lead-wrapper {
    padding-block: calc(var(--layout-gap) * 2);
    color: var(--color-primary);
    overflow-x: hidden;
}

.production-technology-lead-wrapper.flow-bg::before {
    background-image: url(../../image/production-technology/production-technology-lead.png);
    top: calc(50% - 110px);
}

.production-technology-lead-title {
    font-size: 2.1rem;
    font-weight: 900;
    padding-bottom: calc(var(--layout-gap) * 1.5);
    position: relative;
}

/* .production-technology-lead-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    background-image: url(../../image/production-technology/production-technology-lead.png);
    aspect-ratio: 2740 / 220;
    background-position: center;
    background-size: contain;
} */

.production-technology-lead-text p {
    width: fit-content;
    margin-left: auto;
    font-weight: 700;
}

@media print,
screen and (min-width: 769px) {
    .production-technology-lead-title {
        font-size: 3rem;
        padding-bottom: calc(var(--layout-gap) * 2);
    }

}

@media print,
screen and (min-width: 1200px) {
    .production-technology-lead-wrapper {
        padding-block: calc(var(--layout-gap) * 4);
    }

    .production-technology-lead-title {
        font-size: 4rem;
        padding-bottom: calc(var(--layout-gap) * 3);
    }
}

/*================================================
    section-clip
================================================*/

.section-clip {
    position: relative;
    background-size: cover;
    background-position: center;
    text-align: center;
    /* padding-top: 150px; */
    padding-block: calc(var(--layout-gap) * 2) calc(var(--layout-gap) / 2);
}

.section-clip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 50px;
    /* 三角の高さ */
    /* 次のセクションの背景色（黄色） */
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    z-index: 1;
    transform: translateY(-0.5px);
}

.section-clip-lead {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    display: inline-block;
    border: 2px solid var(--color-text);
    padding: 5px 10px;
    margin-top: calc(var(--layout-gap) * 1);
    margin-bottom: calc(var(--layout-gap) / 2);
}

.section-clip-text {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: calc(var(--layout-gap) * 1.5);
}

.section-clip-text > span {
    display: inline-block;
}

.section-clip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* gap: 20px; */
}

.section-clip-list img {
    border-radius: 20px;
}

.section-clip-list p {
    font-size: 1.6rem;
    font-weight: 700;
    padding-block: calc(var(--layout-gap) / 4);
}

.section-clip-sub-text {
    font-size: 2rem;
    font-weight: 700;
    margin-top: calc(var(--layout-gap) * 1);
}

.section-clip-sub-text > span {
    display: inline-block;
}

@media print,
screen and (min-width: 769px) {
    .section-clip {
        padding-top: 100px;
    }
    .section-clip::after {
        /* height: 200px; */
        height: 100px;
    }
    .section-clip-lead {
        font-size: 3rem;
    }

    .section-clip-text {
        font-size: 1.8rem;
    }

    .section-clip-list p {
        padding-block: calc(var(--layout-gap) / 2.5);
    }

    .section-clip-sub-text {
        font-size: 2.4rem;
        margin-top: calc(var(--layout-gap) * 2);
    }
}

@media print,
screen and (min-width: 1200px) {
    .section-clip {
        padding-top: 150px;
    }
    .section-clip::after {
        /* height: 200px; */
        height: 150px;
    }

    /* .section-clip {
        padding-block: calc(var(--layout-gap) * 4);
    } */

    .section-clip-lead {
        font-size: 4rem;
        margin-top: 0;
        /* margin-top: calc(var(--layout-gap) * 1.5); */
    }

    .section-clip-text {
        font-size: 2rem;
        margin-bottom: calc(var(--layout-gap) * 2.5);
    }


    .section-clip-sub-text {
        font-size: 3.6rem;
    }
}

@media print,
screen and (min-width: 1600px) {
    .section-clip {
        /* padding-block: calc(var(--layout-gap) * 4); */
        padding-block: 200px;
    }
    .section-clip::after {
        height: 200px;
    }
}

/*================================================
section-bg-title::after
================================================*/

@media print,
screen and (min-width: 769px) {
    .section-bg-title::after {
        width: 70%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/*================================================
    development-design
================================================*/

.development-design {
    background-image: url(../../image/production-technology/development_design_bg.jpg);
    background-size: 200%;
    background-position: center top;
    background-color: #BCD4DF;
}

.development-design .section-bg-title::after {
    background-image: url(../../image/production-technology/development-design-title.png);
    aspect-ratio: 850 / 288;
}

.development-design .section-bg-title {
    aspect-ratio: 850 / 288;
}

.development-design.section-clip::after {
    background-color: #BCD4DF;
}

@media print,
screen and (min-width: 769px) {
    .development-design {
        background-size: contain;
        padding-block: 100px 0;
    }
    .development-design .section-clip-item {
        width: calc(100% / 2.1);
    }
}

@media print,
screen and (min-width: 1200px) {
    .development-design .section-clip-item {
        width: calc(100% / 4.5);
    }
}


/*================================================
    production-line
================================================*/

.production-line {
    /* background-image: url(../../image/production-technology/productionline_img_bg.png); */
    background-image: url(../../image/production-technology/productionline_img_bg_left.png),  url(../../image/production-technology/productionline_img_bg_right.png);
    background-size: 50%, 50%;
    background-color: #F5C800;
    background-position:top 100px left, top 100px right;
}

.production-line .section-bg-title::after {
    background-image: url(../../image/production-technology/productionline-title.png);
    aspect-ratio: 790 / 288;
}

.production-line .section-bg-title {
    aspect-ratio: 790 / 288;
}

.production-line.section-clip::after {
    background-color: var(--color-primary-second);
}

@media print,
screen and (min-width: 769px) {
    .production-line {
        padding-block: 100px 0;
        background-position:center left, center right;
    }
    .production-line .section-clip-list {
        display: flex;
        justify-content: center;
        gap: 40px;
    }

    .production-line .section-clip-item {
        width: calc(100% / 4);
    }
}

@media print,
screen and (min-width: 1200px) {
    .production-line {
        padding-block: 200px 0;
    }
    .production-line .section-clip-list {
        display: flex;
    }
}

/*================================================
    production
================================================*/


.production {
    background-image: url(../../image/production-technology/production_bg.jpg);
    color: var(--color-white);
}

.production .section-bg-title::after {
    background-image: url(../../image/production-technology/production-title.png);
    aspect-ratio: 1186 / 252;
}

.production .section-bg-title {
    aspect-ratio: 1186 / 252;
}

.production.section-clip {
    padding-bottom: 50px;
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 50px),
            50% 100%,
            0 calc(100% - 50px));
}

.production.section-clip::after {
    background-color: transparent;
}

.production .section-bg-title-en {
    color: rgba(var(--color-white-rgb), .65);
}

.production .section-clip-lead {
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

@media print,
screen and (min-width: 769px) {
        .production.section-clip {
        padding-bottom: 150px;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 100px),
                50% 100%,
                0 calc(100% - 100px));
    }

    .production .section-clip-list {
        justify-content: center;
        gap: 40px;
    }

    .production .section-clip-item {
        width: calc(100% / 4);
    }
}

@media print,
screen and (min-width: 1200px) {

    .production.section-clip {
        padding-bottom: 150px;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 150px),
                50% 100%,
                0 calc(100% - 150px));
    }
}


@media print,
screen and (min-width: 1600px) {

    .production.section-clip {
        padding-bottom: 200px;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 200px),
                50% 100%,
                0 calc(100% - 200px));
    }
}

/*================================================
    quality
================================================*/

.quality {
    background-image: url(../../image/production-technology/quality-bg.png);
    margin-top: -100px;
    /* background-color: var(--color-white); */
    z-index: -1;
    background-size: contain;
    background-position: right bottom;
}

.quality .section-bg-title::after {
    background-image: url(../../image/production-technology/quality-title.png);
    aspect-ratio: 1186 / 252;
}

.quality .section-bg-title {
    aspect-ratio: 1186 / 252;
}

.quality.section-clip {
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 50px),
            50% 100%,
            0 calc(100% - 50px));
    padding-block: 120px 80px;
}

.quality.section-clip::after {
    background-color: transparent;
}


@media print,
screen and (min-width: 769px) {
    .quality.section-clip {
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 100px),
                50% 100%,
                0 calc(100% - 100px));
        padding-block: 120px;
    }
    .quality .section-clip-item {
        width: calc(100% / 2.1);
    }
}


@media print,
screen and (min-width: 1200px) {
    .quality.section-clip {
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 150px),
                50% 100%,
                0 calc(100% - 150px));
        padding-block: 150px;
    }
}

@media print,
screen and (min-width: 1600px) {

    .quality {
        margin-top: -200px;
    }

    .quality.section-clip {
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 200px),
                50% 100%,
                0 calc(100% - 200px));
        padding-block: 200px;
    }

    .quality .section-clip-item {
        width: calc(100% / 4.5);
    }

}

/*================================================
    section-text
================================================*/

.patents {
    background-image: url(../../image/production-technology/patents_bg.jpg);
    background-position: center;
    background-size: cover;
    margin-top: -65px;
    clip-path: polygon(0 0,
            50% 50px,
            100% 0,
            100% 100%,
            0 100%);
    padding-block: calc(var(--layout-gap) * 2);
    color: var(--color-white);
    text-align: center;
    border-bottom: 15px solid #BCD4DF;
}

.patents-title {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.5;
}

.patents-title span {
    font-size: 2.1rem;
    font-weight: 900;
    display: block;
    margin-block:2em 1em;
}

.patents-text {
    font-size: 2.1rem;
    font-weight: 900;
    margin-top: 0.5em;
}

.patents-text > span {
    display: inline-block;
}

@media print,
screen and (min-width: 769px) {
    .patents {
        clip-path: polygon(0 0,
            50% 100px,
            100% 0,
            100% 100%,
            0 100%);
        margin-top: -120px;
        padding-block: calc(var(--layout-gap) * 3);
    }
    .patents-title {
        font-size: 5.2rem;
    }

    .patents-title span {
        font-size: 2.4rem;
    }

    .patents-text {
        font-size: 2.4rem;
    }
}

@media print,
screen and (min-width: 1200px) {
    .patents{
        font-size: 7.2rem;
        margin-top: -200px;
        clip-path: polygon(0 0,
                50% 200px,
                100% 0,
                100% 100%,
                0 100%);
        padding-top: calc(var(--layout-gap) * 6);
        padding-bottom: calc(var(--layout-gap) * 4);
    }

    .patents-title span {
        font-size: 3rem;
    }

    .patents-text {
        font-size: 3rem;
    }
}