@charset "UTF-8";
/* =================================================================
   事業概要（一覧）
   ================================================================= */
.page-template-page-business {
    .cat__title {
        font-size: 3.4rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.68px;
        @media screen and (max-width: 767px) {
            font-size: 2.5rem;
            letter-spacing: 0.5px;
        }
    }
    .cat__text {
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.3px;
        @media screen and (max-width: 1200px) {
            margin-bottom: 35px;
        }
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
            letter-spacing: 0.28px;
        }
    }
    .cat__cosmetics-brand {
        max-width: 1160px;
        margin: 0 auto 80px;
        display: flex;
        justify-content: space-between;
        gap: 12.76%;
        @media screen and (min-width: 1300px) {
            transform: translateX(30px);
        }
        @media screen and (max-width: 1299px) {
            padding: 0 24px;
        }
        @media screen and (max-width: 767px) {
            display: block;
            margin-bottom: 100px;
        }
        .cat__img {
            @media screen and (min-width: 768px) {
                max-width: 632px;
                order: 2;
            }
            @media screen and (max-width: 767px) {
                margin-bottom: 50px;
            }
        }
        .cat__text__wrapper {
            @media screen and (min-width: 768px) {
                order: 1;
            }
            .cat__title {
                margin-bottom: 48px;
                @media screen and (max-width: 767px) {
                    margin-bottom: 30px;
                }
            }
            .cat__text {
                margin-bottom: 40px;
            }
        }
    }
    .cat__wrapper {
        display: flex;
        justify-content: space-between;
        gap: 10.18%;
        max-width: 1100px;
        margin: 0 auto 120px;
        padding: 0 20px;
        @media screen and (max-width: 767px) {
            display: block;
        }
        > section {
            max-width: 494px;
            @media screen and (max-width: 767px) {
                max-width: 100%;
            }
            .cat__title {
                margin-bottom: 28px;
            }
            .cat__img {
                margin-bottom: 25px;
                border-radius: 10px;
                overflow: hidden;
            }
            .text__wrap {
                display: flex;
                justify-content: space-between;
                align-items: end;
                @media screen and (max-width: 1200px) {
                    display: block;
                }
                .cat__text {
                    max-width: 290px;
                    @media screen and (max-width: 767px) {
                        max-width: 100%;
                    }
                }
            }
            &.cat__oem {
                @media screen and (max-width: 767px) {
                    margin-bottom: 100px;
                }
            }
            &.cat__global {
                margin-top: 112px;
                @media screen and (max-width: 767px) {
                    margin-top: 0;
                }
            }
        }
    }
}

/* =================================================================
   事業概要（OEM事業）
   ================================================================= */
.page-template-page-oem{
    .cat__title {
        font-size: 3.4rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.68px;
        margin-bottom: 50px;
        @media screen and (max-width: 767px) {
            font-size: 2.5rem;
            letter-spacing: 0.5px;
        }
    }
    .cat__text {
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.3px;
        @media screen and (max-width: 1200px) {
            margin-bottom: 35px;
        }
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
            letter-spacing: 0.28px;
        }
    }
    .cat__oem {
        max-width: 1100px;
        margin: 0 auto 120px;
        padding: 0 20px;
        @media screen and (max-width: 767px) {
            display: block;
        }
        > .oem__item {
            max-width: 1040px;
            margin: 0 auto 50px;
            display: flex;
            justify-content: space-between;
            gap: 3.08%;
            @media screen and (max-width: 767px) {
                flex-wrap: wrap;
                max-width: 100%;
                margin: 0 auto 80px;
            }
            .cat__img {
                max-width: 430px;
                border-radius: 10px;
                overflow: hidden;
                @media screen and (max-width: 767px) {
                max-width: 100%;
                margin-bottom: 30px;
            }
            }
            .text__wrap {
                width: 100%;
                    h3 {
                    font-size: 2.5rem;
                    line-height: 1;
                    letter-spacing: 0.5px;
                    font-weight: 500;
                    margin-bottom: 30px;
                    @media screen and (max-width: 767px) {
                        font-size: 2rem;
                        letter-spacing: 0.4px;
                        margin-bottom: 15px;
                    }
                    }
                    h3 + .cat__text{
                    line-height: 1.8;
                    letter-spacing: 0.3px;
                    margin-bottom: 40px;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        letter-spacing: 0.28px;
                        margin-bottom: 30px;
                    }
                    }

                    h4 {
                    font-size: 1.5rem;
                    font-weight: 500;
                    margin-bottom: 5px;
                    }
                    h4 + .cat__text{
                    line-height: 1.5;
                    letter-spacing: 0.3px;
                    margin-bottom: 40px;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        letter-spacing: 0.26px;
                    }
                    }
            }
        }
    }
}

/* =================================================================
   事業概要（海外事業）
   ================================================================= */
.page-template-page-global{
    .cat__global {
        max-width: 1100px;
        margin: 0 auto 120px;
        display: grid;
        gap:0 11.82%;
        @media screen and (min-width: 1300px) {
            transform: translateX(30px);
        }
        @media screen and (max-width: 1299px) {
            padding: 0 24px;
        }
        @media screen and (max-width: 767px) {
            grid-auto-flow: row;
            margin-bottom: 130px;
        }
            .cat__title {
                font-size: 2.5rem;
                font-style: normal;
                font-weight: 500;
                line-height: 170%;
                letter-spacing: 0.5px;
                margin-bottom: 35px;
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                    margin-bottom: 30px;
                    grid-column: auto;
                    grid-row: 1;
                    line-height: 170%;
                    letter-spacing: 0.36px; 
                }
            }
            .global-event__list{
                grid-column-start: 1;
                grid-row-start: 2;
                .global-event__item {
                    font-size: 1.5rem;
                    font-weight: 400;
                    line-height: 150%;
                    letter-spacing: 0.3px;
                    padding:25px 0;
                    border-bottom: 1px solid #C7C7C7;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        letter-spacing: 0.28px;
                    }
                }
                @media screen and (max-width: 767px) {
                    grid-column: auto;
                    grid-row: 3;
                }
            }
            .cat__img {
                max-width: 550px;
                grid-row: span 2 / span 2;
                grid-column-start: 2;
                grid-row-start: 1;
                @media screen and (max-width: 767px) {
                    max-width: 100%;
                    grid-column: auto;
                    grid-row: 2;
                }
            }
            
    }
}

/* =================================================================
   会社情報
   ================================================================= */
.page-template-page-company {
    .cat__title {
        font-size: 3.4rem;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.68px;
        margin-bottom: 35px;
        @media screen and (max-width: 1299px) {
            min-width: 140px;
        }
        @media screen and (max-width: 767px) {
            font-size: 2.5rem;
            letter-spacing: 0.5px;
        }
    }
    .cat__text {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.3px;
        @media screen and (max-width: 1200px) {
            margin-bottom: 35px;
        }
        @media screen and (max-width: 767px) {
            font-size: 1.4rem;
            letter-spacing: 0.28px;
        }
    }

/* 企業理念------------------------------------------------- */

    .cat__philosophy {
        max-width: 1100px;
        margin: 0 auto 80px;
        display: flex;
        justify-content: space-between;
        gap: 12.73%;
        @media screen and (min-width: 1300px) {
            transform: translateX(30px);
        }
        @media screen and (max-width: 1299px) {
            padding: 0 24px;
        }
        @media screen and (max-width: 767px) {
            display: block;
            margin-bottom: 100px;
        }
    }
    .philosophy__lists{
        width: 100%;
        max-width: 821px;
        border-top: 1px solid #C7C7C7;
        .philosophy__item{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #C7C7C7;
            padding: 35px 0;
            @media screen and (max-width: 1299px) {
                gap: 10%;
            }
            @media screen and (max-width: 767px) {
                display: block;
                padding: 50px 0;
            }
            .philosophy__head{
            @media screen and (max-width: 767px) {
                margin-bottom: 20px;
            }
                h3{
                    font-family: "League Spartan";
                    font-size: 2.4rem;
                    font-weight: 500;
                    line-height: 100%; 
                    letter-spacing: 0.48px;
                    margin: 12px 0 20px;
                    @media screen and (max-width: 767px) {
                        font-size: 1.8rem;
                        margin-bottom: 6px;
                    }
                }
                span{
                    font-size: 1.6rem;
                    font-weight: 400;
                    line-height: 100%; 
                    letter-spacing: 0.32px;
                    color: #3B3A3A;
                }
            }
            .philosophy__body{
                max-width: 528px;
                h4{
                    font-size: 2.5rem;
                    font-weight: 500;
                    line-height: 180%; 
                    letter-spacing: -0.5px;
                    margin-bottom: 15px;
                    @media screen and (max-width: 767px) {
                        font-size: 2.0rem;
                        margin-bottom: 20px;
                    }
                }
                .philosophy__text{
                    font-size: 1.5rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 210%;
                    letter-spacing: 0.3px;
                    color: #3B3A3A;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        font-weight: 400;
                        line-height: 200%; /* 28px */
                        letter-spacing: 0.28px;
                    }
                }
            }
        }
}

/* 代表メッセージ------------------------------------------------- */
    .cat__message{
        max-width: 1100px;
        margin: 0 auto 100px;
        @media screen and (max-width: 1299px) {
            padding: 0 24px;
        }
        @media screen and (max-width: 767px) {
            display: block;
            margin-bottom: 100px;
        }
        .message__wrapper{
            display: flex;
            gap: 4.45%;
            @media screen and (max-width: 767px) {
                display: block;
            }
            .cat__img{
                width: 100%;
                max-width: 460px;
                border-radius: 10px;
                overflow: hidden;
            }
            h3{
                font-size: 2.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 190%; 
                letter-spacing: -0.25px;
                margin:50px 0 35px;
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                    letter-spacing: -0.18px;
                }
            }

        }
    }

/* 企業理念------------------------------------------------- */
    .cat__company{
        padding: 120px 0;
        background-color: #FAFAFA;
        margin: 0 auto;
        @media screen and (max-width: 1299px) {
            padding: 120px 24px;
        }
        @media screen and (max-width: 767px) {
            display: block;
            padding: 80px 24px;
        }
            h2{
            max-width: 1100px;
            margin: 0 auto 50px;
            }
        .company__info{
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            border-bottom: 1px solid #C7C7C7;
            dt{
                width: 20%;
                font-size: 1.6rem;
                font-weight: 500;
                letter-spacing: 0.32px;
                padding: 30px 0;
                border-top: 1px solid #C7C7C7;
                color: #3B3A3A;
                @media screen and (max-width: 767px) {
                    width: 100%;
                    padding: 27px 0 10px;
                }
            }
            dd{
                width: 80%;
                font-size: 16px;
                font-weight: 400;
                line-height: 180%; /* 28.8px */
                letter-spacing: -0.16px;
                padding: 30px 0;
                color: #3B3A3A;
                border-top: 1px solid #C7C7C7;
                @media screen and (max-width: 767px) {
                    width: 100%;
                    border-top: none;
                    padding: 10px 0 27px;
                }
                .company__address{
                    display: flex;
                    align-items: end;
                    margin-bottom: 20px;
                    @media screen and (max-width: 767px) {
                        display: block;
                    }
                    p{
                        line-height: 150%;
                        letter-spacing: -0.16px;
                        margin-right: 40px;
                        @media screen and (max-width: 767px) {
                            display: block;
                            margin-bottom: 13px;  
                            line-height: 150%;
                            letter-spacing: -0.15px;
                        }
                    }
                    a{
                        padding-right:20px;
                        background-image: url(../images/company/ico_open.svg);
                        background-repeat: no-repeat;
                        background-size: 12px 12px;
                        background-position: right;
                        border-bottom: 1px solid #3B3A3A;
                        color: #3B3A3A;
                        font-size: 1.3rem;
                    }
                }
            }
        }
    }
}
/* =================================================================
   代表メッセージ
   ================================================================= */
.page-template-page-message {
    .message__lead {
        font-size: 3.2rem;
        font-weight: 400;
        line-height: 190%; /* 60.8px */
        letter-spacing: -0.32px;
        margin: 60px 0;
        @media screen and (max-width: 767px) {
            font-size: 2.5rem;
            letter-spacing: 0.5px;
            margin: 40px 0 66px;
        }
    }
    
    .cat__message {
        max-width: 1000px;
        margin: 0 auto 80px;
        @media screen and (min-width: 1300px) {
            transform: translateX(30px);
        }
        @media screen and (max-width: 1299px) {
            padding: 0 24px;
        }
        @media screen and (max-width: 767px) {
            display: block;
            margin-bottom: 100px;
        }
       .cat__img {
            border-radius: 10px;
            overflow: hidden;
                img{
                @media screen and (max-width: 767px) {
                aspect-ratio: 74 / 47;
                object-fit: cover;
                width: 100%;
                height: 100%;
                }
            }
        }
        .cat__text__wrapper{
            .message__title{
                font-size: 2rem;
                font-weight: 500;
                line-height: 170%; /* 34px */
                letter-spacing: 0.4px;
                position: relative;
                padding-left: 56px;
                margin-bottom: 15px;
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 170%;
                    letter-spacing: 0.36px;
                    padding-left: 9.36%;
                    margin-bottom: 20px;
                }
                &::before{
                    content: "";
                    width: 40px;
                    height: 1px;
                    background-color: #C52626;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    @media screen and (max-width: 767px) {
                        width: 5.85%;
                    }
                }


                }
        .cat__text {
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 210%;
            letter-spacing: 0.3px;
            color: #3B3A3A;
            margin-bottom: 40px;
            @media screen and (max-width: 1200px) {
                margin-bottom: 35px;
            }
            @media screen and (max-width: 767px) {
                margin-bottom: 60px;
                font-size: 1.5rem;
            }
        }
        .message__profile{
            display: flex;
            align-items: end;
            flex-direction: column;
        @media screen and (max-width: 767px) {
            margin-top: -10px;
        }
            .message__company{
                display: block;
                text-align: right;
                font-size: 1.4rem;
                font-weight: 400;
                line-height: 150%;
                letter-spacing: -0.14px;
                margin-bottom: 8px;
            }
            .message__name{
                text-align: right;
                font-size: 1.8rem;
                font-weight: 500;
                line-height: 100%; 
                letter-spacing: -0.18px;
                margin-bottom: 28px;
            }
            .message__signature{
                display: block;
                width: 100%;
                max-width: 180px;
                @media screen and (max-width: 767px) {
                    max-width: 169px;
                }
            }

        }
        }
 
    }
}

/* =================================================================
   FAQ
   ================================================================= */
    .faq__wrap {
        padding: 0 20px 120px;
        .faq__inner {
            max-width: 1000px;
            margin: 0 auto;
            .faq__title {
                font-size: 2.5rem;
                font-style: normal;
                font-weight: 500;
                line-height: 170%;
                letter-spacing: 0.5px;
                margin-bottom: 35px;
                margin-top:80px;
                :first-of-type{
                    margin-top:0;
                }
                @media screen and (max-width: 767px) {
                    font-size: 1.8rem;
                    margin-bottom: 30px;
                    grid-column: auto;
                    grid-row: 1;
                    line-height: 170%;
                    letter-spacing: 0.36px; 
                }}
            ul {
                li {
                    border-top: 1px solid #C7C7C7;
                    &:last-child {
                        border-bottom: 1px solid #C7C7C7;
                    }
                    .faq__quetion {
                        font-size: 1.6rem;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 150%; /* 24px */
                        letter-spacing: 0.32px;
                        padding: 20px 20px 20px 0;
                        @media screen and (max-width: 767px) {
                            font-size: 1.5rem;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 150%;
                            letter-spacing: 0.3px;
                        }
                        .icon__quetion {
                            color: #3B3A3A;
                            font-family: "League Spartan";
                            font-size: 2rem;
                            font-weight: 400;
                            line-height: 100%; /* 20px */
                            margin-right: 16px;
                            @media screen and (max-width: 767px) {
                                margin-right: 8px;
                            }
                        }
                    }
                    .faq__answer {
                        font-size: 1.6rem;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 150%; /* 24px */
                        letter-spacing: 0.32px;
                        padding: 10px 20px 40px 35px;
                        transition: height 0.3s ease, padding-bottom 0.3s ease;
                        text-indent: -35px;
                        @media screen and (max-width: 767px) {
                            font-size: 1.5rem;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 150%;
                            letter-spacing: 0.3px;
                            padding: 10px 12px 20px 25px;
                            text-indent: -25px;
                        }
                        .icon__answer {
                            color: #C52626;
                            font-family: "League Spartan";
                            font-size: 2rem;
                            font-weight: 400;
                            line-height: 100%; /* 20px */
                            margin-right: 16px;
                            @media screen and (max-width: 767px) {
                                margin-right: 8px;
                            }
                        }
                    }
                }
            }
        }
        .faq__icon {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            flex-shrink: 0;
            width: 20px;
            height: 20px;
        }
        
        .faq__icon-minus,
        .faq__icon-plus {
            position: absolute;
            display: flex;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        /* 初期状態：プラス表示 */
        .faq__icon-minus {
            opacity: 0;
            transform: rotate(-90deg);
        }
        
        .faq__icon-plus {
            opacity: 1;
            transform: rotate(0deg);
        }
        
        /* 開いた状態：マイナス表示 */
        .faq__icon.is-open .faq__icon-minus {
            opacity: 1;
            transform: rotate(0deg);
        }
        
        .faq__icon.is-open .faq__icon-plus {
            opacity: 0;
            transform: rotate(90deg);
        }
    }

/* =================================================================
   私たちの開発における信念
   ================================================================= */
.page-research-and-development {
    /* FV */
    .philosophy__wrap {
        max-width: 1050px;
        display: flex;
        gap: 9.52%;
        margin: 0 auto 140px;;
        @media screen and (max-width: 1000px) {
            display: block;
            margin-bottom: 100px;
        }
        .philosophy__text {
            @media screen and (max-width: 1000px) {
                margin-bottom: 50px;
                padding: 0 24px;
            }
            .philosophy__title {
                font-family: "League Spartan";
                font-size: 6.5rem;
                font-style: normal;
                font-weight: 200;
                line-height: 100%; /* 65px */
                letter-spacing: -0.65px;
                margin-bottom: 60px;
                @media screen and (max-width: 767px) {
                    font-size: 4.3rem;
                    font-style: normal;
                    font-weight: 200;
                    line-height: 100%; /* 43px */
                    letter-spacing: -0.43px;
                    margin-bottom: 40px;
                }
            }
            .philosophy__lead {
                color: #3B3A3A;
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 210%; /* 31.5px */
                letter-spacing: 0.3px;
            }
        }
        .philosophy__image {
            position: relative;
            width: 100%;
            max-width: 616px; /* PCでの最大サイズ */
            margin: 0 auto;
            background-image: url('../images/research-and-development/bg-philosophy.png'); /* 画像のパスを指定 */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            @media screen and (max-width: 767px) {
                padding: 0 15px;
            }
        
            /* 擬似要素を使ってコンテナの「高さ」を画像の比率に合わせる */
            &::before {
                content: "";
                display: block;
                padding-top: 94.6%; /* 高さ583 ÷ 幅616 × 100 */
            }
        
            /* 3つの要素の共通設定 */
            .philosophy__mission,
            .philosophy__vision,
            .philosophy__value {
                position: absolute;
                width: 52%;  /* 画像内の1つの円の横幅 */
                height: 55%; /* 縦幅を微調整 */
                border-radius: 50%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                box-sizing: border-box;
                padding: 5%; /* PC時は元の5%に戻しました */    
                @media screen and (max-width: 767px) {
                    width: 54%;
                    height: 57%;
                } 
                .philosophy__image__title {
                    color: #C52626;
                    /* スマホ時の最小を少し小さく */
                    font-size: clamp(12px, 2vw, 13px);
                    font-style: normal;
                    font-weight: 700;
                    line-height: 160%;
                    letter-spacing: 0.26px;
                    margin-bottom: 25px;
                    @media screen and (max-width: 767px) {
                        margin-bottom: 11px;
                    }
                }
        
                .philosophy__image__lead {
                    color: #3B3A3A;
                    /* バリューの4行を収めるため、最小をさらに詰める */
                    font-size: clamp(10px, 2.5vw, 16px); 
                    font-style: normal;
                    font-weight: 500;
                    /* 改行による縦伸びを防ぐため、さらに行間を詰める */
                    line-height: 180%; 
                    letter-spacing: 0.32px;
                }
            }
            
            /* Mission（上の円） */
            .philosophy__mission {
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        
            /* Vision（左下の円） */
            .philosophy__vision {
                bottom: 0.5%; /* 画像下部のわずかな隙間に合わせて調整 */
                left: 0;
            }
        
            /* Value（右下の円） */
            .philosophy__value {
                bottom: 0.5%; /* 画像下部のわずかな隙間に合わせて調整 */
                right: 0;
            }
        }
    }

    /* レカルカのものづくりの原則 */
    .principle__wrap {
        max-width: 1084px; /* 全体の最大幅 */
        margin: 0 auto 160px;
        @media screen and (max-width: 767px) {
            margin-bottom: 100px;
        }
        .principle__title {
            font-size: 3.4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 100%; /* 34px */
            letter-spacing: 0.68px;
            margin-bottom: 60px;
            @media screen and (max-width: 767px) {
                margin-bottom: 30px;
                padding-left: 24px;
                font-size: 2.5rem;
                line-height: 170%; /* 42.5px */
                letter-spacing: 0.5px;
            }
        }
        
        .principle__lists {
            display: flex;
            flex-wrap: wrap;
            gap: 60px 80px;
            @media screen and (max-width: 1200px) {
                gap: 30px 40px;
                padding: 0 24px;
            }
            @media screen and (max-width: 767px) {
                display: block;
                margin-bottom: 100px;
            }
            li {
                max-width: 436px;
                &:nth-child(3) {
                    margin-left: 132px;
                }
                @media screen and (max-width: 1200px) {
                    max-width: 100%;
                    width: calc(50% - 20px);
                    &:nth-child(3) {
                        margin-left: 0;
                    }
                }
                @media screen and (max-width: 768px) {
                    width: 100%;
                    margin-bottom: 50px;
                }
        
                .principle__lists__img {
                    width: 100%;
                    overflow: hidden;
                    margin-bottom: 30px;
                    border-radius: 10px;
                    @media screen and (max-width: 767px) {
                        margin-bottom: 15px;
                        img {
                            width: 100%;
                            height: auto;
                            object-fit: cover;
                            object-position: center;
                            aspect-ratio: 342 / 194;
                        }
                    }
                }
        
                .principle__lists__title {
                    position: relative;
                    font-size: 2rem;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 170%; /* 34px */
                    letter-spacing: 0.4px;
                    margin-bottom: 15px;
                    padding-left: 20px;
                    @media screen and (max-width: 767px) {
                        margin-bottom: 25px;
                        padding-left: 15px;
                        font-size: 1.8rem;
                        letter-spacing: 0.36px;
                    }
            
                    /* 左側の赤い縦線 */
                    &::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        width: 3px;
                        background-color: #C52626;
                    }
            
                    /* ナンバリング（01. などの制御） */
                    span {
                        display: block;
                        color: #C52626;
                        font-family: "League Spartan";
                        font-size: 2.2rem;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 100%; /* 22px */
                        letter-spacing: 0.44px;
                        @media screen and (max-width: 767px) {
                            font-size: 1.8rem;
                            letter-spacing: 0.36px;
                        }
                    }
                }
        
                .principle__lists__text {
                    font-size: 1.5rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 150%; /* 22.5px */
                    letter-spacing: 0.3px;
                    @media screen and (max-width: 767px) {
                        font-size: 1.4rem;
                        line-height: 180%; /* 25.2px */
                        letter-spacing: 0.28px;
                    }
                }
            }
        }
    }

    /* 開発姿勢 */
    .posture__wrap {
        margin-bottom: 160px;
        @media screen and (max-width: 1000px) {
            padding: 0 15px;
        }
        .posture__title {
            font-size: 3.4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 100%; /* 34px */
            letter-spacing: 0.68px;
            max-width: 1084px;
            margin: 0 auto 60px;
            @media screen and (max-width: 767px) {
                margin: 0 0 40px 5px;
                font-size: 2.5rem;
                letter-spacing: 0.5px;
            }
        }
        .posture__lists {
            max-width: 960px;
            margin: 0 auto;
            padding: 76px 88px;
            border-radius: 20px;
            background-color: #FAFAFA;
            @media screen and (max-width: 1000px) {
                padding: 38px 44px;
            }
            @media screen and (max-width: 767px) {
                padding: 40px 21px 40px 15px;
            }
            .posture__list {
                border-left: 4px solid #C52626;
                padding: 0 0 62px 41px;
                border-radius: 2px;
                @media screen and (max-width: 767px) {
                    padding: 7px 0 45px 27px;
                }
                &:not(:first-child) {
                    margin-top: -23px;
                    @media screen and (max-width: 767px) {
                        margin-top: -16px;
                    }
                }
                &:nth-child(1) {
                    margin-left: 94px;
                    @media screen and (max-width: 767px) {
                        margin-left: 30px;
                    }
                }
                &:nth-child(2) {
                    margin-left: 188px;
                    @media screen and (max-width: 767px) {
                        margin-left: 54px;
                    }
                }
                &:nth-child(3) {
                    margin-left: 282px;
                    padding-bottom: 87px;
                    @media screen and (max-width: 767px) {
                        margin-left: 78px;
                        padding-bottom: 62px;
                    }
                }
                .posture__list__inner {
                    position: relative;
                    &::before {
                        content: "";
                        width: 48px;
                        height: 48px;
                        background-repeat: no-repeat;
                        background-size: contain;
                        background-position: top left;
                        position: absolute;
                        top: 0;
                        left: -67px;
                        z-index: 2;
                        @media screen and (max-width: 767px) {
                            width: 30px;
                            height: 30px;
                            top: -7px;
                            left: -44px;
                        }
                    }
                    &.icon-voice {
                        &::before {
                            background-image: url(../images/research-and-development/icon-posture-voice.svg);
                        }
                    }
                    &.icon-quetion {
                        &::before {
                            background-image: url(../images/research-and-development/icon-posture-quetion.svg);
                        }
                    }
                    &.icon-evolution {
                        &::before {
                            background-image: url(../images/research-and-development/icon-posture-evolution.svg);
                        }
                    }
                    &::after {
                        content: "";
                        width: 94px;
                        height: 4px;
                        background-color: #C52626;
                        position: absolute;
                        top: 20px;
                        left: -138px;
                        border-radius: 2px;
                        z-index: 1;
                        @media screen and (max-width: 767px) {
                            width: 24px;
                            top: 6px;
                            left: -55px;
                        }
                    }
                    .posture__list__title {
                        font-size: 1.8rem;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 100%; /* 18px */
                        margin-bottom: 15px;
                        @media screen and (max-width: 767px) {
                            font-size: 1.6rem;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 100%; /* 16px */
                            margin-bottom: 10px;
                        }
                    }
                    .posture__list__text {
                        font-size: 1.4rem;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 170%; /* 23.8px */
                        letter-spacing: 0.28px;
                        max-width: 460px;
                        @media screen and (max-width: 767px) {
                            max-width: 220px;
                        }
                    }
                }
                &:last-child {
                    color: #C52626;
                    font-size: 2.2rem;
                    font-weight: 500;
                    line-height: 100%; /* 22px */
                    margin: -13px 0 0 429px;
                    padding: 0 0 0 12px;
                    font-size: 2.2rem;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 100%; /* 22px */
                    border: none;
                    position: relative;
                    @media screen and (max-width: 767px) {
                        margin-left: 98px;
                    }
                    &::before {
                        content: "";
                        width: 147px;
                        height: 4px;
                        background-color: #C52626;
                        position: absolute;
                        top: 50%;
                        left: -147px;
                        transform: translateY(-50%);
                        border-radius: 2px;
                        @media screen and (max-width: 767px) {
                            width: 20px;
                            left: -20px;
                        }
                    }
                }
            }
        }
    }

    /* ものづくりの先にあるもの */
    .feature__wrap {
        max-width: 1000px;
        margin: 0 auto 140px;
        .feature__title {
            font-size: 2.8rem;
            font-style: normal;
            font-weight: 400;
            line-height: 100%; /* 28px */
            letter-spacing: 0.56px;
            margin-bottom: 60px;
            @media screen and (max-width: 1000px) {
                font-size: 2rem;
                letter-spacing: 0.4px;
                margin: 0 0 50px 20px;
            }
        }
        .feature__inner {
            display: flex;
            gap: 7.2%;
            @media screen and (max-width: 1000px) {
                display: block;
                padding: 0 25px 0 30px;
            }
            .feature__text__wrap {
                max-width: 428px;
                width: 100%;
            }
            .feature__image__wrap {
                padding: 142px 0 0 0;
                @media screen and (max-width: 1000px) {
                    padding: 0;
                }
                .feature__image__img {
                    max-width: 420px;
                    border-radius: 10px;
                    overflow: hidden;
                    margin: 0 0 80px 100px;
                    @media screen and (max-width: 1000px) {
                        width: 52%;
                        margin: 0 0 50px;
                    }
                }
                @media screen and (max-width: 1000px) {
                    .feature__text {
                        padding-left: 26%;
                    }
                }
            }
            .feature__text {
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 210%; /* 31.5px */
                letter-spacing: 0.3px;
                &:not(:last-child) {
                    margin-bottom: 30px;
                }
                @media screen and (max-width: 1000px) {
                    margin-bottom: 30px;
                }
            }
        }
    }

    /* リリース情報  */
    .development__area {
        padding: 120px 0;
        background-color: #F7F7F7;
        @media screen and (max-width: 1200px) {
            padding: 120px 10px;
        }
        @media screen and (max-width: 767px) {
            margin-bottom: 124px;
            padding: 50px 0 40px 10.3%;
        }
        .development__inner {
            max-width: 1100px;
            margin: 0 auto;
            .development__title {
                font-size: 2.5rem;
                font-style: normal;
                font-weight: 500;
                line-height: 100%; /* 25px */
                letter-spacing: 0.5px;
                margin-bottom: 35px;
                @media screen and (max-width: 767px) {
                    margin-left: -17px;
                }
            }
        }

        .slider-mask {
            position: relative;
            max-width: 998px;
            margin: 0 auto;
            @media screen and (max-width: 767px) {
                .swiper-development-pagination {
                    margin-left: -7.3%;
                }
            }
            .slide-caption {
                color: #3B3A3A;
            }
            .nav-btn-development {
                border: 1px solid #3B3A3A;
            }
            .swiper-pagination-bullet {
                background: #E5E5E5;
            }
        }
    }
}

/* =================================================================
   お問い合わせ
   ================================================================= */
   .contact__wrapper {
        margin-bottom: 120px;
        .contact__inner {
            max-width: 1000px;
            background-color: #fff;
            border-radius: 20px;
            margin: 0 auto;
            padding: 66px 140px 59px;
            @media screen and (max-width: 1000px) {
                padding: 30px 14%;
            }
            @media screen and (max-width: 767px) {
                max-width: 96%;
                padding: 30px 20px;
            }
            .contact-tabs__nav {
                display: flex;
                gap: 6px;
                margin-bottom: 32px;
            }

            .contact-tabs__btn {
                position: relative;
                padding: 10px 20px 10px 46px;
                border: 1px solid transparent;
                background: #F5F0F0;
                border-radius: 2px;
                cursor: pointer;
                appearance: none;
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; /* 15px */
                letter-spacing: 0.3px;
            }

            .contact-tabs__btn::before {
                content: "";
                position: absolute;
                left: 16px;
                top: 50%;
                width: 22px;
                height: 22px;
                border: 1px solid #C7C7C7;
                border-radius: 50%;
                background: #fff;
                transform: translateY(-50%);
            }

            .contact-tabs__btn.is-active {
                background: #fff;
                border: 1px solid #C52626;
            }

            .contact-tabs__btn.is-active::after {
                content: "";
                position: absolute;
                left: 20px;
                top: 50%;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: #C52626;
                transform: translateY(-50%);
            }

            .contact-tabs__panel {
                display: none;
            }

            .contact-tabs__panel.is-active {
                display: block;
            }

            .form-item__label {
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; /* 15px */
                letter-spacing: 0.3px;
                margin-bottom: 15px;
                display:flex;
                align-items: center;
                .required {
                    font-size: 1.1rem;
                    font-style: normal;
                    font-weight: 500;
                    padding: 2px 6px;
                    border-radius: 4px;
                    background-color: #FA3A2A;
                    color: #fff;
                    margin-left: 4px;
                }
            }
            [data-name="type-general"] select {
                padding: 13px 16px 14px;
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_1696_2768' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1696_2768)'%3E%3Cpath d='M11.6446 15.9424C11.5378 15.9038 11.433 15.8369 11.3305 15.7416L6.17682 10.9474C6.06682 10.8453 6.0081 10.7199 6.00066 10.5714C5.99302 10.423 6.05175 10.2907 6.17682 10.1745C6.3017 10.0582 6.44019 10 6.59227 10C6.74436 10 6.88284 10.0582 7.00772 10.1745L11.9946 14.8131L16.9815 10.1745C17.0913 10.0722 17.2261 10.0176 17.3858 10.0107C17.5453 10.0035 17.6875 10.0582 17.8124 10.1745C17.9375 10.2907 18 10.4195 18 10.561C18 10.7024 17.9375 10.8313 17.8124 10.9474L12.6587 15.7416C12.5562 15.8369 12.4515 15.9038 12.3446 15.9424C12.2377 15.9808 12.1211 16 11.9946 16C11.8682 16 11.7515 15.9808 11.6446 15.9424Z' fill='%233B3A3A'/%3E%3C/g%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 16px center;
                background-size: 24px 24px;
                background-color: #fff;
                padding-right: 48px;
                &:has(option:first-child:checked) {
                    background-color: #F7F7F7;
                    color: #969696;
                }
            }
            .form__item {
                margin-bottom: 36px;
                input::placeholder,
                textarea::placeholder {
                    color: #969696;
                }
            }
            .form-item__input,
            .form-item__textarea,
            .form-item__select {
                width: 100%;
                border-radius: 2px;
                border: 1px solid #C7C7C7;
                background: #fff;
                padding: 10px 16px 11px;
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; /* 15px */
                letter-spacing: 0.3px;
                &:placeholder-shown {
                    background-color: #F7F7F7;
                }
                &:focus {
                    background-color: #fff;
                }
            }
            .wpcf7-not-valid-tip {
                font-size: 1.3rem;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; /* 13px */
                color: #FA3A2A;
                margin-top: 4px;
                &::before {
                    content:"※";
                }
            }

            .form__item__check {
                text-align: center;
                .wpcf7-list-item {
                    margin: 0;
                }
                
                .wpcf7-list-item label {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    cursor: pointer;
                }
                
                input[type="checkbox"] {
                    width: 20px;
                    height: 20px;
                    margin: 0;
                    border-radius: 4px;
                    border: 1px solid #C7C7C7;
                    background-color: #fff;
                    appearance: none;
                    -webkit-appearance: none;
                    cursor: pointer;
                    position: relative;
                    flex-shrink: 0;
                }
                
                input[type="checkbox"]:checked {
                    border-color: #C52626;
                    background-color: #C52626;
                }
                
                input[type="checkbox"]:checked::after {
                    content: "";
                    position: absolute;
                    left: 6px;
                    top: 2px;
                    width: 6px;
                    height: 11px;
                    border-right: 2px solid #fff;
                    border-bottom: 2px solid #fff;
                    transform: rotate(45deg);
                }
                
                input[type="checkbox"]:focus-visible {
                    outline: 2px solid rgba(199, 51, 51, 0.25);
                    outline-offset: 3px;
                }
                
                .wpcf7-list-item-label {
                    color: #333;
                    font-size: 14px;
                    line-height: 1.6;
                    cursor: pointer;
                }

            }
            
            .wpcf7-spinner {
                display: none;
            }
            .form-item__btn-box input,
            .form-item__submit {
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 316px;
                width: 100%;
                height: 54px;
                border-radius: 6px;
                background: #110101;
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; /* 15px */
                letter-spacing: 0.3px;
                margin: 0 auto;
                color: #fff;
                transition: opacity 0.3s ease;
                @media screen and (min-width: 768px) {
                    &:hover {
                        opacity: 0.6;
                    }
                }
                
            }
            .form__item__value {
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; /* 15px */
                letter-spacing: 0.3px;
                word-wrap: break-word;
            }

            .wpcf7 form.invalid .wpcf7-response-output,
            .wpcf7 form.unaccepted .wpcf7-response-output,
            .wpcf7 form.payment-required .wpcf7-response-output {
                font-size: 15px;
            }



            
        }
   }

   .single-product {
    .p-single-product {
        padding-bottom: 0;
    }
   }