img{
    height: auto;
}

.tec_ttl{
    font-size: 3.0rem;
    font-weight: bold;
    margin-left: 9px;

    @media only screen and (max-width: 767px) {
        margin-left: 6px;
        font-size: 2.0rem;
    }

    &::before{
        content: '';
        display: inline-block;
        width: 20px;
        height: 30px;
        background: linear-gradient(to bottom, #004098, #4586D3);
        transform: skewX(-30deg);
        margin-right: 15px;
        margin-bottom: -4px;

        @media only screen and (max-width: 767px) {
            width: 15px;
            height: 20px;
            margin-right: 10px;
        }
    }

    &.is_straight{
        margin-left: 0;

        @media only screen and (max-width: 767px) {
            font-size: 1.8rem;
        }

        &::before{
            width: 12px;
            height: 40px;
            transform: skewX(0);
            margin-bottom: -8px;

            @media only screen and (max-width: 767px) {
                width: 6px;
                height: 20px;
                margin-bottom: -3px;
            }
        }
    }
}

.tec_btn{
    a{
        display: block;
        max-width: 400px;
        padding: 10px 15px;
        background-color: #FFF;
        border: 1px solid #5D5D5D;
        text-align: center;
        color: #333333;
        transition: all 0.3s ease;
        margin-inline: auto;

        &:hover{
            text-decoration: none;
            background-color: #5D5D5D;
            color: #fff;
        }
    }

    &.is_blue{
        a{
            border: 1px solid #004098;
            color: #004098;
            font-weight: bold;

            &[target="_blank"]::after {
                content: '';
                display: inline-block;
                width: 14px;
                height: 14px;
                margin-left: 5px;
                background: url('/technology/images/icon_blank.svg') no-repeat center center/contain;
                vertical-align: middle;
                transition: all 0.3s ease;
            }

            &:hover{
                text-decoration: none;
                background-color: #004098;
                color: #fff;

                &[target="_blank"]::after {
                    filter: invert(85%) sepia(99%) saturate(0%) hue-rotate(91deg) brightness(110%) contrast(101%);
                }
            }

            
        }
    }
}

.tec_banner{
    a{
        transition: all 0.3s ease;
        &:hover{
            opacity: 0.8;
        }
    }
}

.tec_col{
    display: flex;
    gap: 40px;

    @media only screen and (max-width: 767px) {
        flex-direction: column !important;
        gap: 46px;
    }

    a{
        display: block;
        transition: all 0.3s ease;
        text-decoration: none;

        &:hover{
            opacity: 0.8;
        }

        .tec_col_item_img{
            overflow: hidden;

            img{
                transition: all 0.3s ease;
                width: 100%;
            }

            &:hover{
                img{
                    transform: scale(1.2);
                }
            }
        }
    }
    
    &.is_2col{
        .tec_col_item{
            flex: 0 0 calc(50% - 20px);
        }
    }   

    &.is_3col{
        .tec_col_item{
            flex: 0 0 calc(33.333% - 26.666px);
        }
        .tec_col_item_ttl{
            font-size: 1.8rem;
        }
    }

    .tec_col_item_ttl{
        margin-top: 20px;
        font-size: 2.4rem;
        font-weight: bold;
        color: #004098;
        line-height: 1.2;

        @media only screen and (max-width: 767px) {
            font-size: 1.8rem;
        }
    }

    .tec_col_item_txt{
        color: #333333;
    }
}

.tec_end{
    .ly_inner{
        padding-top: 140px !important;
        padding-bottom: 170px !important;

        @media only screen and (max-width: 767px) {
            padding-top: 100px !important;
            padding-bottom: 100px !important;
        }
    }
}

.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}

.loading-overlay.is-visible {
opacity: 1;
visibility: visible;
}

.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#top{
    .un_mv{
        color: #FFF;
        background: url(../images/mv_pc.webp) no-repeat center center / cover;
        
        @media only screen and (max-width: 767px) {
            background: url(../images/mv_sp.webp) no-repeat center center / cover;
        }
        .bl_breadCrumb{
            li{
                color: #FFF;
            }
            a{
                color: #FFF;
            }
        }
    }

    .un_intro{
        background: url(../images/intro_bg_pc.webp) no-repeat center center / cover;

        @media only screen and (max-width: 767px) {
            background: url(../images/intro_bg_sp.webp) no-repeat top center / 100%;
        }

        .ly_inner{
            padding-top: 110px;
            padding-bottom: 100px;

            @media only screen and (max-width: 767px) {
                padding-top: 50px;
                padding-bottom: 60px;
            }
        }
    }

    .un_intro_box{
        display: flex;
        justify-content: center;
        gap: min(78px, calc((100vw) * 0.065));

        @media only screen and (max-width: 767px) {
            display: block;
        }
    }

    .un_intro_ttl{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .un_intro_ttl_logo{
        width: 335px;

        @media only screen and (max-width: 767px) {
            width: 214px;
        }
    }

    .un_intro_ttl_txt{
        margin-bottom: 25px;
        font-size: 3.6rem;
        font-weight: bold;
        text-align: center;
        color: #001E4B;
        
        @media only screen and (max-width: 767px) {
            margin-bottom: 46px;
            font-size: 2.4rem;
            line-height: 2;
        }
    }

    .un_intro_btn{
        a{
            min-width: 362px;

            @media only screen and (max-width: 767px) {
                min-width: 100%;
            }
        }
    }

    .un_intro_list{
        display: flex;
        flex-direction: column;
        gap: 20px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 40px;
        }
    }

    .un_intro_item{
        overflow: hidden;
        
        a{
            display: block;
            position: relative;
            text-decoration: none;

            &:hover{
                .un_intro_item_img{
                    transform: scale(1.2);
                }
            }
        }
    }

    .un_intro_item_img{
        transition: all 0.3s ease;

        img{
            max-width: 600px;
            width: 100%;

            @media only screen and (max-width: 767px) {
                max-width: 100%;
            }
        }
    }

    .un_intro_item_txtbox{
        position: absolute;
        bottom: 30px;
        left: 43px;

        @media only screen and (max-width: 767px) {
            bottom: 17px;
            left: 24px;
        }
    }

    .un_intro_item_ttl{
        font-size: 2.4rem;
        color: #FFF;
        font-weight: bold;

        @media only screen and (max-width: 767px) {
            font-size: 1.8rem;
        }
    }

    .un_intro_item_txt{
        color: #FFF;
    }

    .un_news{
        background-color: #EAEEF4;

        .ly_inner{
            padding-top: 54px;
            padding-bottom: 47px;

            @media only screen and (max-width: 767px) {
                padding-top: 50px;
                padding-bottom: 50px;
            }
        }
    }

    .un_news_box{
        display: flex;
        gap: min(130px, calc((100vw) * 0.1083));
        margin-bottom: 10px;
        
        @media only screen and (max-width: 767px) {
            flex-direction: column;
            gap: 20px;
            /* margin-bottom: 24px; */
        }
    }

    .un_news_ttl{
        font-size: 3.0rem;
        font-weight: bold;
        color: #004098;
        flex: 0 0 auto;

        @media only screen and (max-width: 767px) {
            font-size: 2.0rem;
        }
    }

    .un_news_item_box{
        display: flex;
        gap: 24px;

        @media only screen and (max-width: 767px) {
            flex-direction: column;
            gap: 5px;
        }
    }

    .un_news_list{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .un_news_item_date{
        color: #333333;
        flex: 0 0 auto;
    }

    .un_news_item_cat{
        display: flex;
        gap: 10px;
        margin-bottom: 8px;

        a{
            font-size: 1.2rem;
            padding: 0 15px;
            border-radius: 2px;
            border: 1px solid #5D5D5D;
            color: #5D5D5D;
            text-decoration: none;
            transition: all 0.3s ease;

            &:hover{
                background: #5D5D5D;
                color: #FFF;
            }
        }

        .is_press{
            color: #0089FF;
            border-color: #0089FF;

            &:hover{
                background: #0089FF;
                color: #FFF;
            }
        }
    }

    .un_news_item_ttl{
        a{
            display: block;
            transition: all 0.3s ease;

            &:hover{
                opacity: 0.8;
            }
        }
    }

    .un_news_btn{
        a{
            background: #EAEEF4;
            
            &:hover{
                background: #5D5D5D;
            }
        }
    }
    
    .un_sec{
        background: url(../images/sec_bg_pc.webp) no-repeat center center / cover;

        @media only screen and (max-width: 767px) {
            background: url(../images/sec_bg_sp.webp) no-repeat center center / cover;
        }

        .ly_inner{
            padding-top: 120px;
            padding-bottom: 120px;
            
            @media only screen and (max-width: 767px) {
                padding-top: 80px;
                padding-bottom: 90px;
            }
        }
    }

    .un_sec_banner{
        margin-bottom: 140px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 80px;
        }
    }

    .un_sec_col{
        &.is_2col{
            margin-bottom: 60px;

            @media only screen and (max-width: 767px) {
                margin-bottom: 46px;
            }
        }
    }
}

#library{
    .ly_container.is_library{
        background: url(../library/images/mv_bg.webp) no-repeat right -100px top -150px / 70%;

        @media only screen and (max-width: 767px) {
            background-position: right -82px top 21px;
            background-size: 218%;
        }

        &.is_commendation{
            .bl_tab_item:nth-of-type(2).is_active{
                background-color: #577DB2;
            }
            .bl_select{
                background-color: #577DB2;
            }
            
            #article-table{

                th{
                    @media only screen and (min-width: 768px) {
                        &:nth-of-type(1){
                            width: 5%;
                        }
                        &:nth-of-type(2){
                            width: 27%;
                        }
                        &:nth-of-type(3){
                            width: 27%;
                        }
                        &:nth-of-type(4){
                            width: 41%;
                        }
                    }
                }

                thead{
                    th{
                        background-color: #577DB2;
                    }
                }
                tbody{
                    tr{
                        @media only screen and (max-width: 768px) {
                            border-color: #577DB2;
                        }
                        td.month{
                            background-color: #577DB2;
                        }
                        &:last-of-type{
                            border-color: #577DB2;
                        }
                    }
                }
            }
        }
    }

    .bl_mv{
        .ly_inner{
            padding-bottom: 0;
        }
    }

    .bl_select{
        background-color: #004098;

        .ly_inner{
            padding-top: 50px;
            padding-bottom: 50px;
        }
    }

    #select-container {
        display: inline-flex;
        align-items: center;
        position: relative;

        @media only screen and (max-width: 767px) {
            width: 100%;
        }
    }
    
    #select-container::after {
        position: absolute;
        right: 15px;
        width: 10px;
        height: 7px;
        display: inline-block;
        vertical-align: middle;
        color: #333;
        line-height: 1;
        width: 0.7em;
        height: 0.7em;
        border: 0.15em solid currentColor;
        border-left: 0;
        border-bottom: 0;
        box-sizing: border-box;
        transform: translateY(-25%) rotate(135deg);
        content: '';
        pointer-events: none;
    }
    
    #select-container select {
        appearance: none;
        min-width: 230px;
        height: 2.8em;
        padding: .4em calc(.8em + 30px) .4em .8em;
        border: 2px solid #FFF;
        background-color: #fff;
        color: #333333;
        font-size: 1.6rem;
        cursor: pointer;
        transition: all 0.3s ease;

        @media only screen and (max-width: 767px) {
            min-width: 100%;
        }

        &:hover{
            border-color: #004098;
        }
    }

    .bl_tab {
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        list-style: none;

        @media only screen and (max-width: 767px) {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            gap: 10px;
        }
    }
    
    .bl_tab_item {
        position: relative;
        bottom: -10px;
        padding: 10px 20px;
        cursor: pointer;
        border-bottom: none;
        background-color: #D0DDEF;
        text-align: center;
        color: #fff;
        font-size: 2.4rem;
        font-weight: bold;
        transition: all 0.3s ease;
    
        @media only screen and (max-width: 767px) {
            font-size: 1.8rem;
        }
    
        &:hover{
            bottom: 0px;
        }

        &.is_active {
            background-color: #004098;
            bottom: 0;
        }

    }

    .bl_content{
        background-color: #EAEEF4;

        .ly_inner{
            padding-top: 65px;
            padding-bottom: 150px;
        }
    }

    .bl_content_note{
        font-size: 1.2rem;
        color: #333;
        margin-bottom: 20px;
    }

    #article-table{
        background-color: #fff;

        table{
            width: 100%;
            table-layout: fixed; 
        }

        th{
            @media only screen and (min-width: 768px) {
                &:nth-of-type(1){
                    width: 5%;
                }
                &:nth-of-type(2){
                    width: 38%;
                }
                &:nth-of-type(3){
                    width: 38%;
                }
                &:nth-of-type(4){
                    width: 19%;
                }
            }
        }

        .month{
            background-color: #004098;
            color: #fff;
            vertical-align: middle;
            text-align: center;
            font-size: 1.6rem;
            font-weight: bold;
            border: none;
            border-bottom: 1px solid #FFF;

            @media only screen and (max-width: 767px) {
                width: 100%;
                border-bottom: none; 
                margin: 0;
                padding: 5px 15px;
                text-align: left;
            }
        }

        thead{
            @media only screen and (max-width: 767px) {
                display: none;
            }

            th{
                background-color: #004098;
                color: #fff;
                text-align: center;
                padding: 10px 15px;
                border: 1px solid #FFF;
                font-size: 1.6rem;
            }
        }

        tbody{
            tr{

                @media only screen and (max-width: 767px) {
                    border-bottom: 3px solid #004098;
                }

                td{
                    padding: 20px 18px;
                    border: 1px solid #999999;

                    @media only screen and (max-width: 767px) {
                        display: block;
                        margin: 0 15px;
                        padding: 10px 0;
                        border: none;
                        border-bottom: 1px solid #999999;
                    }

                    &:nth-of-type(1),&:nth-of-type(2){
                        border-left: none;
                    }

                    &:last-of-type{
                        border-right: none;

                        @media only screen and (max-width: 767px) {
                            border-bottom: none;
                        }
                    }
                }

                &:last-of-type{
                        
                    @media only screen and (min-width: 768px) {
                        border-bottom: 4px solid #004098;
                    }
                }
            }
        }
    }
}

#fellows{
    overflow: hidden;

    .un_end{
        .ly_inner{
            padding-top: 140px;
            padding-bottom: 170px;

            @media only screen and (max-width: 767px) {
                padding-top: 80px;
                padding-bottom: 140px;
            }
        }
    }

    /* 一覧ページ */
    .un_mv{
        .ly_inner{
            display: flex;
            gap: 90px;
            padding-top: 0;
            padding-bottom: 0;
            
            @media only screen and (max-width: 959px) {
                gap: 40px;
            }

            @media only screen and (max-width: 767px) {
                display: block;
                padding-bottom: 60px;
            }
        }
    }

    .un_mv_box{
        max-width: 600px;
        padding-top: 40px;

        @media only screen and (max-width: 767px) {
            padding-top: 20px;
        }
    }

    .un_main_sec{
        padding: 70px 0;
        border-bottom: 1px solid #707070;

        &:last-of-type{
            border-bottom: none;
        }

        @media only screen and (max-width: 767px) {
            padding: 40px 0;
        }
    }
    
    .un_mv_img{
        flex: 0 0 auto;
        width : 710px;
        margin-right: -200px;
        
        @media only screen and (max-width: 959px) {
            width : 590px;
        }

        @media only screen and (max-width: 767px) {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            margin-bottom: 30px;
        }
    }

    .un_main{
        background-color: #EAEEF4;
    }

    .un_main_ttl{
        margin-bottom: 40px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 20px;
        }
    }
    .un_main_ttl + .update{
        font-size: 1.4rem;
        margin-top: -70px;
        margin-bottom: 40px;
        text-align: right;

        @media only screen and (max-width: 767px) {
            margin-top: -20px;
            margin-bottom: 20px;
        }
    }

    .un_main_box{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        
        @media only screen and (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
        }
    }

    .un_main_card{
        display: block;
        box-shadow: 0 0 10px rgba(0, 64, 152, 0.1);
        background-color: #fff;
        transition: all 0.3s ease;

        &:hover{
            text-decoration: none;
            opacity: 0.8;

            .un_main_img{
                img{
                    transform: scale(1.2);
                }
            }
        }
    }

    .un_main_img{
        overflow: hidden;
        
        img{
            transition: all 0.3s ease;
            width: 100%;
        }
    }
    
    .un_main_info{
        padding: 0 30px 30px;
    }

    .un_main_info_ttl{
        font-size: 1.4rem;
        font-weight: 400;
        color: #333;
        margin-bottom: 25px;

        @media only screen and (max-width: 767px) {
            &::before{
                width: 12px;
                height: 40px;
            }
        }
    }

    .un_main_info_name{
        font-size: 1.2rem;
        color: #333;

        span{
            display: inline-block;
            font-size: 1.7rem;
            font-weight: 600;
            color: #004098;
            margin-right: 10px;
        }
    }

    .un_main_info_subttl{
        margin-top: 2px;
        font-size: 1.4rem;
    }

    /* 詳細ページ */
    .un_profile{
        background: url(../human/fellows/images/mv_bg.webp) no-repeat right top 20px / 900px 610px, #EAEEF4;

        @media only screen and (max-width: 767px) {
            background-position: right top;
            background-size: 100%;
        }

        .ly_inner{
            padding-top: 80px;
            padding-bottom: 80px;

            @media only screen and (max-width: 767px) {
                padding-top: 40px;
                padding-bottom: 40px;
            }
        }
    }

    .un_profile_ttl{
        font-size: 3.6rem;
        font-weight: bold;
        margin-bottom: 15px;

        @media only screen and (max-width: 767px) {
            font-size: 2.4rem;
        }

        span{
            font-size: 1.8rem;
            font-weight: bold;
            display: block;
            color: #004098;
            border-bottom: 2px solid #004098;
            margin-bottom: 5px;
        }
    }

    .un_profile_box{
        display: flex;
        gap: 80px;

        @media only screen and (max-width: 767px) {
            flex-direction: column;
            gap: 20px;
        }
    }

    .un_profile_img{
        flex: 0 0 auto;
        max-width: 400px;
    }

    .un_profile_item{
        margin-bottom: 15px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 0;
        }

        &:last-of-type{
            margin-bottom: 10px;

            @media only screen and (max-width: 767px) {
                margin-bottom: 0;
            }
        }

        span{
            display: inline-block;
            font-weight: bold;
            font-size: 1.8rem;
            margin-right: 20px;
        }
    }

    .un_profile_subttl{
        margin-top: 55px;
        margin-bottom: 10px;

        @media only screen and (max-width: 767px) {
            margin-top: 30px;
        }
    }

    .un_content{
        .ly_inner{
            padding-top: 90px;
            padding-bottom: 0;

            @media only screen and (max-width: 767px) {
                padding-top: 56px;
            }
        }
    }

    .un_content_ttl{
        margin-bottom: 20px;
    }

    .un_content_table{
        border-color: #999999;

        @media only screen and (max-width: 767px) {
            border-top: none;
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
        }

        colgroup{
            @media only screen and (max-width: 767px) {
                display: none;
            }
        }

        /* tr{
            @media only screen and (max-width: 767px) {
                border-bottom: 1px solid #999999;
            }
        } */
        
        th,td{
            border-color: #999999;
            padding: 40px 50px;

            @media only screen and (max-width: 767px) {
                display: block;
                text-align: left;
                padding: 10px 15px;
                border: none;
            }
        }

        th{
            background-color: #EAEEF4;
            border-right: none;
            vertical-align: middle;

            @media only screen and (max-width: 767px) {
                border-top: 1px solid #999999;
            }
        }
        
        td{
            @media only screen and (max-width: 767px) {
                font-size: 1.4rem;
            }
        }
    }
}

#organization{

    .js-fixed-footer-target{
        transition: transform .4s;
        transform: translateY(100%);
        
        &.is-active{
            transform: translateY(0);
        }
    }

    .js-aco-target{
        height: 0;
        overflow: hidden;
        transition: 0.4s height;
    }

    .ly_container{
        background: url(../organization/images/mv_bg.webp) no-repeat right -100px top -150px / 70%;

        @media only screen and (max-width: 767px) {
            background-position: right -82px top 21px;
            background-size: 218%;
        }
    }

    .un_main{
        position: relative;

        &::before{
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 900px;
            background: linear-gradient(#EFF4FA, transparent); 
        }

        &::after{
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 900px;
            background: linear-gradient(transparent, #EFF4FA);
        }

        .ly_inner{
            padding-top: 100px;
            padding-bottom: 160px;
            position: relative;
            z-index: 1;

            @media only screen and (max-width: 767px) {
                padding-top: 60px;
                padding-bottom: 80px;
            }
        }
    }

    .un_main_ttl{
        margin-bottom: 30px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 15px;
        }
    }

    .un_mvList_ttl{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        font-size: 1.8rem;
        font-weight: bold;
        margin: 10px 0;
        color: #004098;
        text-align: center;

        @media only screen and (max-width: 767px) {
            gap: 20px;
            font-size: 1.4rem;
        }

        &::before,
        &::after{
            content: '';
            height: 1px;
            flex-grow: 1;
            background-color: #004098;
        }
    }

    .un_mvList_list{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px 12px;
        
        @media only screen and (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

        .global &,.collaborating &{
            grid-template-columns: repeat(3, 1fr);

            
            @media only screen and (max-width: 767px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .technology &,.departments &,.departments_engineering &{
            grid-template-columns: repeat(4, 1fr);

            
            @media only screen and (max-width: 767px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    .un_mvList_item{
        a{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 50px;
            padding: 8px 2px;
            background-color: #fff;
            color: #004098;
            border: 1px solid #004098;
            text-align: center;
            font-weight: bold;
            font-size: 1.8rem;
            transition: all 0.3s ease;
            height: 100%;
            line-height: 1.4;
            letter-spacing: 0;

            @media only screen and (max-width: 767px) {
                min-height: auto;
                font-size: 1.2rem;
            }

            &:hover{
                text-decoration: none;
                background-color: #004098;
                color: #fff;
            }
        }

        &.is_letter_small{
            a{
                letter-spacing: -0.06em;
            }
        }

        &.is_active{
            a{
                background-color: #004098;
                color: #fff;
            }
        }
    }

    .un_catchcopy{
        display: flex;
        gap: min(100px, calc((100vw) * 0.083));
        margin-bottom: 160px;
        
        @media only screen and (max-width: 767px) {
            flex-direction: column;
            gap: 30px;
            margin-bottom: 90px;
        }
    }

    .un_catchcopy_img{
        flex: 0 0 auto;
        width: min(600px, calc((100vw - 100px) * 0.5));

        @media only screen and (max-width: 767px) {
            width: 100%;
        }
    }

    .un_catchcopy_ttl{
        margin-bottom: 32px;
        font-size: 2.4rem;
        font-weight: bold;
        line-height: 1.5;
        
        @media only screen and (max-width: 767px) {
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
    }

    .un_theme{
        background-color: #EFF4FA;
        margin-bottom: 160px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 90px;
        }
    }

    .un_theme_box{
        padding: 70px 60px;

        @media only screen and (max-width: 767px) {
            padding: 40px 15px;
        }
    }

    .un_theme_list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;

        @media only screen and (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .un_theme_ttl{
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 5px;
        color: #004098;
    }

    .un_results{
        margin-bottom: 160px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 90px;
        }
    }

    .un_results_list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 60px;
        
        @media only screen and (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr);
            gap: 18px;
        }
    }

    .un_results_item{
        a{
            display: block;
            transition: all 0.3s ease;
            text-decoration: none;

            &:hover{
                opacity: 0.8;
                .un_results_img{
                    img{
                        transform: scale(1.2);
                    }
                }
            }
        }

        &.is_border{
            .un_results_img{
                border: 2px solid #dfdfdf;
            }
        }
    }

    .un_results_img{
        margin-bottom: 5px;
        overflow: hidden;
        
        img{
            transition: all 0.3s ease;
            width: 100%;
        }
    }

    .un_results_banner{
        margin-top: 80px;

        @media only screen and (max-width: 767px) {
            margin-top: 40px;
        }

        a{
            display: block;
            transition: all 0.3s ease;
            text-decoration: none;
            overflow: hidden;

            img{
                transition: all 0.3s ease;
                width: 100%;
            }

            &:hover{
                opacity: 0.8;
                img{
                    transform: scale(1.2);
                }
            }
        }
    }

    .un_results_link{
        color: #004098;
        font-weight: bold;

        &.is_blank{
            &::after{
                content: '';
                display: inline-block;
                width: 14px;
                height: 14px;
                margin-left: 5px;
                background: url('/technology/images/icon_blank.svg') no-repeat center center/contain;
            }
        }
    }

    .un_results_note{
        font-size: 1.2rem;
    }

    .un_news{
        margin-bottom: 160px;
        padding: 40px 47px 20px;
        background-color: #EFF4FA;

        @media only screen and (max-width: 767px) {
            margin-bottom: 90px;
            padding: 40px 20px 20px;
        }
    }

    .un_info{
        margin-bottom: 160px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 90px;
        }
    }

    .un_info_list{
        display: flex;
        justify-content: center;
        gap: 20px;
        
        @media only screen and (max-width: 767px) {
            flex-direction: column;
            gap: 30px;
        }
    }

    .un_info_item{
        width: 33%;

        @media only screen and (max-width: 767px) {
            width: 100%;
        }
    }

    .un_access{
        padding-top: 60px;
        border-top: 1px solid #707070;
        display: flex;
        gap: min(110px, 10vw);
        margin-bottom: 160px;
        
        @media only screen and (max-width: 767px) {
            padding-top: 0;
            border-top: 0;
            flex-direction: column;
            gap: 40px;
            margin-bottom: 90px;
        }

        iframe{
            flex: 0 0 auto;
            height: auto;
            min-height: 100%;
            width:  min(790px, calc((100vw - 110px) * 0.66));
            resize: both;
            
            @media only screen and (max-width: 767px) {
                height: 250px;
                width: 100%;
            }
        }
    }

    .un_access_box{
        flex-grow: 1;
    }

    .un_access_ttl{
        margin-bottom: 50px;

        @media only screen and (max-width: 767px) {
            margin-bottom: 15px;
        }
    }

    .un_access_subttl{
        font-size: 2.4rem;
        font-weight: bold;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #707070;

        @media only screen and (max-width: 767px) {
            font-size: 1.8rem;
            padding-bottom: 5px;
        }
    }

    .un_access_txt{
        padding-bottom: 20px;
        border-bottom: 1px solid #707070;

        @media only screen and (max-width: 767px) {
            padding-bottom: 5px;
        }
    }

    .bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
        max-width: 745px;
        z-index: 3;
        
        @media only screen and (max-width: 767px) {
            width: 85%;
            right: auto;
        }

        .global &{
            max-width: 780px;
        }
    }

    .bottom__btn{
        a{
            position: relative;
            display: block;
            text-align: center;
            color: #FFF;
            font-weight: bold;
            padding: 20px;
            font-size: 1.8rem;
            transition: all 0.3s ease;
            line-height: 1;
            background: #004098;
            border-radius: 8px 8px 0 0;
            
            @media only screen and (max-width: 767px) {
                font-size: 1.4rem;
                border-radius: 0 10px 0 0;
            }

            &:hover{
                background: #577DB2;

                .is-open{

                    &::before{
                        top: -5px;

                        @media only screen and (max-width: 767px) {
                            top: 6px;
                        }
                    }
                }
            }

            span{
                position: relative;
                
                &.is-open{
                    display: inline-block;

                    &::before{
                        content: '';
                        position: absolute;
                        top: 6px;
                        bottom: 0;
                        left: -22px;
                        margin: auto;
                        width: 10px;
                        height: 10px;
                        border-top: 2px solid #fff;
                        border-right: 2px solid #fff;
                        transform: rotate(-45deg);
                        transition: all 0.3s ease;
                        
                    }
                }

                &.is-close{
                    display: none;
                }
            }
        }

        &.is-active{
            a{
                &::after{
                    content: "✕";
                    position: absolute;
                    top: 15px;
                    right: 25px;
                    margin: auto;
                    font-size: 2.4rem;
                    color: #fff;

                    @media only screen and (max-width: 767px) {
                        top: 18px;
                        right: 10px;
                        font-size: 1.8rem;
                    }
                }

                span{
                    
                    &.is-open{
                        display: none;
                    }

                    &.is-close{
                        display: inline-block;
                    }
                }

                &:hover{
                    background: #004098;
                }
            }
        }
    }

    .bottom__wrap{
        background: #004098;
    }

    .bottom_ttl{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        font-size: 1.6rem;
        font-weight: bold;
        margin: 10px 25px;
        color: #FFF;
        text-align: center;

        @media only screen and (max-width: 767px) {
            font-size: 1.4rem;
            margin: 10px;
        }

        &::before,
        &::after{
            content: '';
            height: 1px;
            flex-grow: 1;
            background-color: #FFF;
        }
    }

    .bottom__list{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 25px;
        
        @media only screen and (max-width: 767px) {
            padding: 0 10px;
            gap: 4px 2px;
        }

        .departments_engineering &{
            grid-template-columns: repeat(2, 1fr);
        }

        &:last-of-type{
            padding-bottom: 25px;
        }
    }

    .bottom__item{
        a{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 100%;
            padding: 10px 5px;
            background-color: #99B3D6;
            color: #004098;
            font-weight: bold;
            text-align: center;
            transition: all 0.3s ease;
            font-size: 1.6rem;
            line-height: 1.2;
            letter-spacing: 0;
            
            @media only screen and (max-width: 767px) {
                padding: 5px;
                font-size: 1.2rem;
            }

            &:hover{
                background-color: #FFF;
                text-decoration: none;
            }

            .global &{
                padding: 5px;
            }
        }

        &.is-active{
            a{
                opacity: 0.6;
            }
        }

        &.is-letter-small{
            a{
                font-size: 1.5rem;
                letter-spacing: -0.06em;

                @media only screen and (max-width: 767px) {
                    font-size: 1.2rem;
                }
            }
        }
    }

    &.top{
        .ly_container{
            background: none;
        }

        .un_mv_ttl{
            margin-bottom: 20px;
        }

        .un_conts{
            background: #F6F6F6;

            .ly_inner{
                padding-top: 100px;
                padding-bottom: 100px;

                @media only screen and (max-width: 767px) {
                    padding-top: 60px;
                    padding-bottom: 60px;
                }
            }
        }

        .un_conts_box{
            margin-bottom: 60px;
            
            @media only screen and (max-width: 767px) {
                margin-bottom: 30px;
            }

            &:last-of-type{
                margin-bottom: 0;
            }
        }

        .un_conts_ttl{
            background: url(../organization/images/tit_01_pc.webp) no-repeat right center / auto 100%, #13335F;
            color: #FFF;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            gap: 50px;
            
            @media only screen and (max-width: 767px) {
                font-size: 1.6rem;
                display: block;
                padding: 25px 30px;
            }

            &.is_01{
                background: url(../organization/images/tit_01_pc.webp) no-repeat right center / auto 100%, #13335F;

                @media only screen and (max-width: 767px) {
                    background: url(../organization/images/tit_01_sp.webp) no-repeat center center / cover;
                }
            }

            &.is_02{
                background: url(../organization/images/tit_02_pc.webp) no-repeat right center / auto 100%, #13335F;

                @media only screen and (max-width: 767px) {
                    background: url(../organization/images/tit_02_sp.webp) no-repeat center center / cover;
                }
            }

            &.is_03{
                background: url(../organization/images/tit_03_pc.webp) no-repeat right center / auto 100%, #13335F;

                @media only screen and (max-width: 767px) {
                    background: url(../organization/images/tit_03_sp.webp) no-repeat center center / cover;
                }
            }

            span{
                width: 343px;
                padding: 30px 0 30px 60px;
                position: relative;
                overflow: hidden;
                z-index: 1;
                font-weight: bold;

                @media only screen and (max-width: 767px) {
                    width: 100%;
                    display: block;
                    padding: 0;
                    margin-bottom: 20px;
                    text-align: center;
                }

                &::before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -20px;
                    width: 100%;
                    height: 100%;
                    background: #13335F;
                    transform: skewX(-20deg);
                    z-index: -1;

                    @media only screen and (max-width: 767px) {
                        display: none;
                    }
                }
            }
        }

        .un_conts_unit{
            padding: 36px 60px;
            background: #FFF;

            @media only screen and (max-width: 767px) {
                padding: 30px 20px;
            }
        }

        .un_conts_list{
            display: flex;
            flex-direction: column;
            gap: 60px;

            @media only screen and (max-width: 767px) {
                gap: 50px;
            }
        }

        .un_conts_item_ttl_01{
            background: #D0DDEF;
            padding: 0px 20px;
            font-size: 1.8rem;
            font-weight: bold;
            color: #5D5D5D;
            text-align: center;
            margin-bottom: 25px;

            @media only screen and (max-width: 767px) {
                font-size: 1.6rem;
            }
        }

        .un_conts_item_ttl_02{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            font-size: 1.8rem;
            font-weight: bold;
            margin: 10px 0;
            color: #5D5D5D;
            text-align: center;

            @media only screen and (max-width: 767px) {
                gap: 20px;
                font-size: 1.4rem;
            }

            &::before,
            &::after{
                content: '';
                height: 1px;
                flex-grow: 1;
                background-color: #5D5D5D;
            }
        }

        .un_conts_item_list{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;

            @media only screen and (max-width: 767px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 10px;
            }

            &.is_col3{
                grid-template-columns: repeat(3, 1fr);

                @media only screen and (max-width: 767px) {
                    grid-template-columns: repeat(1, 1fr);
                }
            }
        }

        .un_conts_item_list_item{
            a{
                max-width: 100%;
                font-weight: bold;
            }
        }
    }
}

#rd-capability{
    .un_labo_link{
        margin-top: 30px;
        text-align: center;

        a{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            text-decoration: underline;
            transition: all 0.3s ease;

            &:hover{
                opacity: 0.6;
            }

            &::before{
                content: '';
                display: inline-block;
                width: 14px;
                height: 16px;
                background: url(../images/icon_zoom.svg) no-repeat center center / contain;
            }

            &::after{
                content: '';
                display: inline-block;
                width: 12px;
                height: 12px;
                background: url(../images/icon_blank.svg) no-repeat center center / contain;
            }
        }
    }
    &.top{
        .un_mv{
            .ly_inner{
                padding-bottom: 30px;
            }
        }
    
        .un_intro{
            background: url(../test/images/intro_bg_pc.webp) no-repeat center center / auto 100%, #002C69;
    
            @media only screen and (max-width: 767px) {
                background: url(../test/images/intro_bg_sp.webp) no-repeat top center / auto 100%, #002C69;
            }
    
            .ly_inner{
                padding-top: 90px;
                padding-bottom: 75px;
    
                @media only screen and (max-width: 767px) {
                    padding-top: 50px;
                    padding-bottom: 50px;
                }
            }
        }
    
        .un_intro_list{
            display: flex;
            gap: 40px;
    
            @media only screen and (max-width: 767px) {
                flex-direction: column;
                gap: 30px;
            }
        }
        
        .un_intro_item{
            a{
                transition: all 0.3s ease;
                text-decoration: none;
    
                &:hover{
                    .un_intro_item_img{
                        img{
                            transform: scale(1.1);
                        }
                    }
                }
            }
        }
    
        .un_intro_item_img{
            margin-bottom: 15px;
            overflow: hidden;
    
            img{
                width: 100%;
                transition: all 0.3s ease;
            }
        }
    
        .un_intro_item_ttl{
            font-size: 2.4rem;
            font-weight: bold;
            color: #FFF;
    
            @media only screen and (max-width: 767px) {
                font-size: 1.8rem;
            }
        }
    
        .un_intro_item_txt{
            color: #FFF;
        }
    
        .un_sec{
            .ly_inner{
                padding-top: 90px;
                padding-bottom: 0;
    
                @media only screen and (max-width: 767px) {
                    padding-top: 80px;
                }
            }
        }
    
        .un_sec_banner{
            margin-bottom: 90px;
            
            @media only screen and (max-width: 767px) {
                margin-bottom: 80px;
            }
        }
    }
    &.philosophy{
        .un_mv{
            height: 300px;
            background: url(../rd-capability/images/philosophy_mv_pc.webp) no-repeat center center / cover;

            @media only screen and (max-width: 767px) {
                height: 280px;
                background: url(../rd-capability/images/philosophy_mv_sp.webp) no-repeat top center / cover;
            }
        }
        .bl_breadCrumb{
            a,li{
                color: #FFF;
            }
        }
        .bl_headingLv1{
            margin-top: 70px;
            color: #FFF;
            text-align: center;
        }
        .un_catchcopy{
            background: url(../rd-capability/images/philosophy_round.webp) no-repeat bottom -1px center / 100% auto;

            .ly_inner{
                padding-top: 130px;
                padding-bottom: 130px;

                @media only screen and (max-width: 767px) {
                    padding-top: 80px;
                    padding-bottom: 80px;
                }
            }
        }
        .un_catchcopy_ttl{
            text-align: center;
            font-weight: bold;
            font-size: 3.0rem;
            line-height: 1.4;

            @media only screen and (max-width: 767px) {
                font-size: 2.0rem;
            }

            span{
                display: block;
                font-family: "Lato", sans-serif;
                font-weight: 900;
                font-size: 6.0rem;
                text-align: center;
                letter-spacing: 0.07em;
                color: #D0DDEF;

                @media only screen and (max-width: 767px) {
                    font-size: 4.0rem;
                }
            }
        }
        .un_catchcopy_img{
            margin-top: 20px;
            text-align: center;

            @media only screen and (max-width: 767px) {
                margin-top: 10px;
            }
        }
        .un_catchcopy_txt{
            margin-top: 20px;
            text-align: center;
            
            @media only screen and (max-width: 767px) {
                text-align: left;
            }
        }
        .un_sticky{
            background: #EAEEF4;

            .ly_inner{
                padding-bottom: 200px;
                max-width: calc(1080px + 4%);

                @media only screen and (max-width: 767px) {
                    padding-top: 100px;
                    padding-bottom: 100px;
                }
            }
        }
        .un_sticky_list{
            @media only screen and (max-width: 767px) {
                display: flex;
                flex-direction: column;
                gap: 100px;
            }
        }
        .un_sticky_item{
            height: 1000px;

            @media only screen and (max-width: 767px) {
                height: auto;
            }
        }
        .un_sticky_item_inner{
            position: sticky;
            top: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 130px;
            opacity: 0;
            transition: opacity 0.3s ease;

            @media only screen and (max-width: 959px) {
                top: 150px;
                gap: 30px;
            }

            @media only screen and (max-width: 767px) {
                position: static;
                flex-direction: column;
                gap: 30px;
                opacity: 1;
            }
        }
        .un_sticky_txtbox{
            width: 449px;

            @media only screen and (max-width: 767px) {
                width: 100%;
            }
        }
        .un_sticky_ttl{
            font-size: 3.0rem;
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1.4;
            text-align: center;

            @media only screen and (max-width: 767px) {
                font-size: 2.0rem;
            }
        }
        .un_sticky_txt{
            line-height: 1.8;
        }
        .un_sticky_paging{
            position: absolute;
            bottom: -30px;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            display: flex;
            justify-content: center;
            gap: 20px;

            @media only screen and (max-width: 767px) {
                display: none;
            }
            
            li{
                span{
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    background-color: #FFF;
                    border-radius: 50%;
                }

                &.is_active{
                    span{
                        background-color: #577DB2;
                    }
                }
            }
        }
        .un_sticky_item.is_active{
            .un_sticky_item_inner{
                opacity: 1;
            }

            &:not(:first-of-type){
                .un_sticky_item_inner{
                    position: fixed;
                    right: 0;
                    left: 0;
                    margin: auto;
                    padding: 0 2%;

                    @media only screen and (max-width: 767px) {
                        position: static;
                        padding: 0;
                    }
                }
            }
        }

        .un_sticky_item.is_end{
            .un_sticky_item_inner{
                position: fixed;
                right: 0;
                left: 0;
                margin: auto;

                @media only screen and (max-width: 767px) {
                    position: static;
                }
            }

            &:last-of-type{
                .un_sticky_item_inner{
                    position: sticky;
                    opacity: 1;

                    @media only screen and (max-width: 767px) {
                        position: static;
                    }
                }
            }
        }

        .un_sec{
            .ly_inner{
                padding-top: 130px;
                padding-bottom: 0;

                @media only screen and (max-width: 767px) {
                    padding-top: 100px;
                }
            }
        }
    }
    &.rdpower{
        .un_mv{
            height: 300px;
            background: url(../rd-capability/images/rdpower_mv_pc.webp) no-repeat center center / cover;

            @media only screen and (max-width: 767px) {
                height: 280px;
                background: url(../rd-capability/images/rdpower_mv_sp.webp) no-repeat top center / cover;
            }
        }
        .bl_breadCrumb{
            a,li{
                color: #FFF;
            }
        }
        .bl_headingLv1{
            margin-top: 70px;
            color: #FFF;
            text-align: center;
        }
        .un_catchcopy{
            .ly_inner{
                padding-top: 130px;
                padding-bottom: 100px;
                max-width: calc(1080px + 4%);

                @media only screen and (max-width: 767px) {
                    padding-top: 80px;
                    padding-bottom: 80px;
                }
            }
        }
        .un_catchcopy_ttl{
            text-align: center;
            font-weight: bold;
            font-size: 3.0rem;
            line-height: 1.4;

            @media only screen and (max-width: 767px) {
                font-size: 2.0rem;
            }

            span{
                display: block;
                font-family: "Lato", sans-serif;
                font-weight: 900;
                font-size: 6.0rem;
                text-align: center;
                letter-spacing: 0.07em;
                color: #D0DDEF;

                @media only screen and (max-width: 767px) {
                    font-size: 4.0rem;
                }
            }
        }
        .un_catchcopy_img{
            margin-top: 20px;
            text-align: center;

            @media only screen and (max-width: 767px) {
                margin-top: 10px;
            }
        }
        .un_catchcopy_txt{
            margin-top: 20px;
            text-align: center;
            
            @media only screen and (max-width: 767px) {
                text-align: left;
            }
        }
        .un_featureContents{
            position: relative;
            margin-bottom: 100px;
            overflow: hidden;
            
            @media only screen and (max-width: 767px) {
                background: url(../rd-capability/images/rdpower_round_pc.webp) no-repeat bottom -1px center / 100% auto;
                background-color: #EAEEF4;
            }

            &::before{
                content: "";
                position: absolute;
                top: 0px;
                left: -10%;
                width: 120%;
                height: 470px;
                background-color: #EAEEF4;
                border-radius: 0 0 50% 50%;
                z-index: -1;
                
                @media only screen and (max-width: 767px) {
                    top: -250px;
                    left: -10%;
                    width: 120%;
                    height: 350px;
                    background-color: #FFF;
                    z-index: 0;
                }
            }

            &::after{
                content: "";
                position: absolute;
                top: -280px;
                left: -10%;
                width: 120%;
                height: 470px;
                background-color: #FFF;
                border-radius: 0 0 50% 50%;
                z-index: -1;
                
                @media only screen and (max-width: 767px) {
                    width: 0;
                    height: 0;
                }
            }
            
            .ly_inner{
                padding-bottom: 137px;
                
                @media only screen and (max-width: 767px) {
                    padding-top: 0;
                    padding-bottom: 100px;
                }
            }
        }
        .un_featureContents_ttl{
            position: relative;
            margin-bottom: 40px;
            text-align: center;
            font-size: 2.4rem;
            font-weight: 600;
            
            @media only screen and (max-width: 767px) {
                margin-bottom: 88px;
                font-size: 1.8rem;
            }

            span{
                display: block;
                font-size: 2.0rem;
                font-family: "Lato", sans-serif;
                font-weight: 900;
                color: #577DB2;

                @media only screen and (max-width: 767px) {
                    font-size: 1.8rem;
                }
            }
        }
        .un_featureContents_list{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 39px;
            
            @media only screen and (max-width: 767px) {
                gap: 55px;
                grid-template-columns: repeat(1, 1fr);
            }
        }
        .un_featureContents_item{
            a{
                position: relative;
                display: block;
                padding: 20px 20px 57px;
                background-color: #FFF;
                box-shadow: 0 0 10px rgba(0, 64, 152, 0.1);
                transition: all 0.3s ease;
                border-radius: 5px;

                &:hover{
                    opacity: 0.6;
                    text-decoration: none;
                }

                &::before{
                    content: "";
                    position: absolute;
                    bottom: 30px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    display: inline-block;
                    vertical-align: middle;
                    color: #004098;
                    line-height: 1;
                    width: 10px;
                    height: 10px;
                    border: 0.1em solid currentColor;
                    border-left: 0;
                    border-bottom: 0;
                    box-sizing: border-box;
                    transform: translateY(-25%) rotate(135deg);
                }
            }
        }
        .un_featureContents_item_ttl{
            margin-top: -52px;
            margin-bottom: 20px;
            text-align: center;
            font-size: 1.8rem;
            font-weight: 600;
            color: #333333;
            line-height: 1.4;

            span{
                margin-bottom: 15px;
                display: block;
                font-size: 4.4rem;
                font-family: "Lato", sans-serif;
                font-weight: 900;
                color: #577DB2;
            }
        }
        .un_featureContents_item_txt{
            padding: 0 32px;
            color: #333333;
        }
        .un_feature{
            .ly_inner{
                padding-top: 0;
                padding-bottom: 150px;
                max-width: calc(1080px + 4%);
                
                @media only screen and (max-width: 767px) {
                    padding-bottom: 130px;
                    padding-top: 0;
                }
            }

            &.is_blue{
                background-color: #EAEEF4;
            }

            &#feature03{
                .ly_inner{
                    @media only screen and (max-width: 767px) {
                        padding-bottom: 50px;
                    }
                }
            }
        }
        .un_feature_num{
            position: relative;
            top: -60px;
            text-align: center;
            font-size: 8.0rem;
            font-family: "Lato", sans-serif;
            font-weight: 900;
            color: #577DB2;
            line-height: 1;
            
            @media only screen and (max-width: 767px) {
                top: -47px;
                font-size: 5.4rem;
            }

            span{
                display: block;
                font-size: 2.0rem;
                font-family: "Lato", sans-serif;
                font-weight: 900;
                color: #577DB2;

                @media only screen and (max-width: 767px) {
                    font-size: 1.8rem;
                }
            }
        }
        .un_feature_ttl{
            font-size: 3.0rem;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            line-height: 1.4;

            @media only screen and (max-width: 767px) {
                margin-top: -10px;
                font-size: 2.0rem;
            }
        }
        .un_feature_img_wrap{
            margin-top: 40px;
        }
        .un_labo_txt{
            margin-top: 40px;
        }
        .un_sec{
            .ly_inner{
                padding-top: 130px;
                padding-bottom: 0;
    
                @media only screen and (max-width: 767px) {
                    padding-top: 100px;
                }
            }
        }
    }
    &.brands{
        .un_box{
            padding: 130px 0 180px;
            background: url(../rd-capability/images/brands_sec_bg_01_01.webp) no-repeat center top / 100% auto, #0E2646;

            @media only screen and (max-width: 767px) {
                padding: 60px 0;
            }

            .ly_inner{
                padding-top: 0;
                padding-bottom: 0;
            }

            &.is_01{
                .un_box_titbox_img{
                    img{
                        @media only screen and (max-width: 767px) {
                            width: 106px;
                            height: auto;
                        }
                    }
                }
            }

            &.is_02{
                background: url(../rd-capability/images/brands_sec_bg_02_01.webp) no-repeat center top / 100% auto, #000000;

                .un_box_technology{
                    background: url(../rd-capability/images/brands_sec_bg_02_02.webp) no-repeat center top / 100% auto, #EAEEF4;
                }

                .un_box_titbox_img{

                    @media only screen and (max-width: 767px) {
                        margin: 60px 0;
                    }

                    img{
                        @media only screen and (max-width: 767px) {
                            width: 200px;
                            height: auto;
                        }
                    }
                }
            }
            &.is_03{
                padding: 130px 0 110px;
                background: url(../rd-capability/images/brands_sec_bg_03_01.webp) no-repeat center top / 100% auto, #000000;

                @media only screen and (max-width: 767px) {
                    padding: 60px 0;
                }

                .un_box_titbox_img{
                    img{
                        @media only screen and (max-width: 767px) {
                            width: 240px;
                            height: auto;
                        }
                    }
                }

                .un_box_technology{
                    background: url(../rd-capability/images/brands_sec_bg_03_02.webp) no-repeat center top / 100% auto, #EAEEF4;
                }
            }
        }
        .un_box_titbox{
            margin-bottom: 80px;

            @media only screen and (max-width: 767px) {
                margin-bottom: 40px;
            }
        }
        .un_box_titbox_ttl{
            color: #FFF;
            font-size: 2.4rem;
            text-align: center;
            font-weight: bold;

            @media only screen and (max-width: 767px) {
                font-size: 1.8rem;
            }
        }
        .un_box_titbox_img{
            margin: 50px 0;
            text-align: center;

            @media only screen and (max-width: 767px) {
                margin: 30px 0;
            }
        }
        .un_box_titbox_txt{
            max-width: 800px;
            margin-inline: auto;
            color: #FFF;
        }
        .un_box_technology{
            padding: 60px 20px 80px;
            background: url(../rd-capability/images/brands_sec_bg_01_02.webp) no-repeat center top / 100% auto, #EAEEF4;

            @media only screen and (max-width: 767px) {
                padding: 40px 20px;
            }
        }
        .un_box_technology_inner,
        .un_box_solution_inner{
            max-width: 800px;
            margin-inline: auto;
        }
        .un_box_technology_ttl,
        .un_box_solution_ttl{
            font-size: 1.4rem;
            font-weight: bold;
            margin-bottom: 40px;
            color:#004098;
            text-align: center;
            position: relative;

            @media only screen and (max-width: 767px) {
                margin-bottom: 30px;
            }

            &::before{
                content: "";
                position: absolute;
                bottom: -5px;
                width: 53px;
                height: 2px;
                background-color: #004098;
                left: 0;
                right: 0;
                margin: auto;
            }
        }
        .un_box_technology_txt,
        .un_box_solution_txt{
            margin-bottom: 40px;
            font-size: 2.4rem;
            font-weight: bold;
            text-align: center;

            @media only screen and (max-width: 767px) {
                margin-bottom:20px;
                font-size: 1.8rem;
                text-align: left;
            }
        }
        .un_box_technology_img{
            text-align: center;
        }
        .un_box_solution{
            position: relative;
            padding: 60px 20px 80px;
            background: #FFF;

            @media only screen and (max-width: 767px) {
                padding: 40px 20px;
            }

            &::before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                translate: 0 -50%;
                margin: auto;
                width: 26px;
                height:38px;
                background: url(../rd-capability/images/brands_arrow.webp) no-repeat center center / contain;
            }
        }
        .un_box_solution_list{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            
            @media only screen and (max-width: 767px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 30px;
            }
        }
        .un_box_solution_list_img{
            margin-bottom: 15px;
            text-align: center;
        }
        .un_box_solution_list_ttl{
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 5px;
            text-align: center;

            @media only screen and (max-width: 767px) {
                font-size: 1.6rem;
            }
        }
        .un_box_solution_list_txt{
            text-align: center;

            @media only screen and (max-width: 767px) {
                text-align: left;
            }
        }
        .un_box_banner{
            margin-top: 60px;

            @media only screen and (max-width: 767px) {
                margin-top: 40px;
            }
        }
        .un_box_banner_ttl{
            margin-bottom: 20px;
            text-align: center;
            color: #FFF;

            @media only screen and (max-width: 767px) {
                margin-bottom: 10px;
            }
        }
        .un_box_banner_img{
            text-align: center;

            a{
                overflow: hidden;
                display: block;
                max-width: 580px;
                margin-inline: auto;
                transition: all 0.3s ease;

                &:hover{
                    opacity: 0.8;

                    img{
                        transform: scale(1.2);
                    }
                }
            }

            img{
                transition: all 0.3s ease;
            }
        }
        .un_sec{
            .ly_inner{
                padding-top: 130px;
                padding-bottom: 0;
    
                @media only screen and (max-width: 767px) {
                    padding-top: 100px;
                }
            }
        }
    }
    &.history{
        .un_mv{
            .ly_inner{
                padding-bottom: 0;
    
                @media only screen and (max-width: 767px) {
                    padding-bottom: 0;
                }
            }
        }
    
        .un_graph{
            .ly_inner{
                padding-top: 0;
                padding-bottom: 120px;
    
                @media only screen and (max-width: 767px) {
                    padding-top: 30px;
                    padding-bottom: 67px;
                }
            }
        }
    
        .un_graph_txt{
            margin-bottom: 60px;
    
            @media only screen and (max-width: 767px) {
                margin-bottom: 20px;
            }
        }
        
        .un_graph_img{
            margin-bottom: 30px;
    
            img{
                width: 100%;
            }
        }
    
        .un_labo{
            background-color: #EAEEF4;
    
            .ly_inner{
                padding-top: 100px;
                padding-bottom: 100px;
    
                @media only screen and (max-width: 767px) {
                    padding-top: 60px;
                    padding-bottom: 60px;
                }
            }
        }
    
        .un_labo_ttl{
            font-size: 3.0rem;
            font-weight: bold;
            margin-bottom: 15px;
    
            @media only screen and (max-width: 767px) {
                font-size: 2.0rem;
            }
        }
    
        .un_labo_txt{
            margin-bottom: 70px;
    
            @media only screen and (max-width: 767px) {
                margin-bottom: 20px;
            }
        }
    
        .un_labo_img{
            text-align: center;
        }
    
        .un_sec{
            .ly_inner{
                padding-top: 120px;
                padding-bottom: 0;
    
                @media only screen and (max-width: 767px) {
                    padding-top: 70px;
                }
            }
        }
        
    }
}