@charset "utf-8";

@import url("./default.css");
@import url("./layout.css");
@import url("./reset.css");

/*------------------------------------------------------------
common
------------------------------------------------------------*/
body {
    background-image: url(../img/main-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    font-family: 'Yu Gothic',sans-serif;

}
.swiper-wrapper .swiper-slide{
    user-select: none;
}

.main-wrap{
    overflow: hidden;
}
body::-webkit-scrollbar{
    width: 14px;
}

body::-webkit-scrollbar-track{
    background: #fff;
}

body::-webkit-scrollbar-thumb{
    background: #777777;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
    cursor: pointer;
}

body::-webkit-scrollbar-thumb:hover{
    background: #a4a4a4;
    border: 3px solid transparent;
    background-clip: content-box;
}

.no-scroll {
    /*overflow: hidden;*/
    /*padding-right: 17px;*/
}




* {
    box-sizing: border-box;
}

a {
    transition: opacity .3s;
}

a[href^="tel:"] {
    display: inline-block;
    transition: none;
}

a:hover {
    text-decoration: none;
}

a:focus-visible {
    outline: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.js-fadein {
    opacity: 0;
    transform: translate(0, 20px);
    transition-property: opacity, transform;
    transition-duration: 1s;
}

.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

.pc-br {
    display: inline;
}

.sp-br {
    display: none;
}

.inner {
    max-width: 1582.19px;
    margin: 0 auto;
    width: 100%;
}

.inner-1468{
    width: calc(100% - 20px);
    max-width: 1468px;
    margin: 0 auto;
}

.w-bg{
    background:#ffffff;
}

.y-bg{
    background: #FFFF00;
}

.fl{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
picture{
    display: block;
}

table, div, p
{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    color: #4e4e4e;
}

table th{
    font-weight: 700;
}

table tr td, table th{
    border:1px solid black;
    padding:10px;
}

.main-header .inner{
    padding: 44px 29px;
    border: solid 4px #000;
    border-top: none;
    align-items: center;
}

.main-header .inner .logo{
    width: 20.208vw;
}

.main-header .inner .main-menu{
    width: calc(100% - 63.3px - 20.208vw);
}

.main-header .inner .main-menu ul{
    display: flex;
    flex-wrap: wrap;
    column-gap: 82px;
    position: relative;
    top: 11px;
    justify-content: flex-end;
}
.main-header .inner .main-menu ul li a{
    font-size: 19px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.74;
    letter-spacing: normal;
    text-align: center;
    color: #4E4E4E;
}

/*SINGLGE*/
/*SINGLE COMPANY*/
.single img{
    width: 100%;
    margin: 0 auto;
    display: block;
}

#interview .feature-img, #copo-labo .feature-img{
    width: 75%;
    margin: 0 auto;
    display: block;
}

.single{
    padding: 68.5px 0 49.5px 0;
    background-image: url(../img/bg-inner-sm.png);
    background-size: cover;
    border: solid 4px #000;
    border-top: none;
    border-bottom: none;
}
.single .inner-1468{
    background: #fff;
    overflow: hidden;
}
.single .single-ttl{
    /*margin-bottom: 50px;*/
}
.single .single-ttl span{
    display: block;
}
.single .single-ttl span.en{
    font-size: 60px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    font-family: "Bebas Neue", serif;
}
.single .single-ttl span.en small{
    color:#ed1c24;
}
.single .single-ttl span.jp{
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.77;
    letter-spacing: normal;
    text-align: center;
    color: #000;
    margin-top:4px;
}
.single .category-list{
    max-width: 967px;
    margin: 38.5px auto 75px auto;
    justify-content: center;
    gap: 26.2px;
    overflow: hidden;
    display: none;
}
.single .category-list .category-item a{
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    display: block;
    padding:12px 64.8px 12px 57.3px;
    background: linear-gradient(180deg, rgba(240,87,85,1) 50%, rgba(245,138,136,1) 50%);
}
.single #table-of-contents{
    display: block;
    max-width: 881px;
    margin: 30px auto 30px;
    padding: 38px 48px;
    border-radius: 23px;
    border: solid 1px #707070;
    background-image: linear-gradient(to bottom, #fff, #ebebeb);
}

.single #table-of-contents strong{
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: 1.56px;
    text-align: center;
    color: #4e4e4e;
    padding-bottom: 17px;
    border-bottom: 1px solid #BFBFBF;
    width: 100%;
    display: block;
}

.single #table-of-contents ul{
    margin-top:32px;
}

.single #table-of-contents ul li a{
    font-size: 23px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.7;
    letter-spacing: normal;
    text-align: left;
    color: #0847a6;
    position: relative;
    padding-left: 12px;
}

.single #table-of-contents ul li a:before{
    width: 4px;
    height: 4px;
    background:#0847a6;
    border-radius: 100%;
    left:0;
    top:50%;
    transform: translateY(-50%);
    position: absolute;
    content:"";
}




.single .category-list .category-item:nth-child(4n+1) a{
    background: linear-gradient(180deg, rgba(240,87,85,1) 50%, rgba(245,138,136,1) 50%);
}
.single .category-list .category-item:nth-child(4n+2) a{
    background: linear-gradient(180deg, rgba(86,197,214,1) 50%, rgba(137,215,227,1) 50%);
}
.single .category-list .category-item:nth-child(4n+3) a{
    background: linear-gradient(180deg, rgba(253,189,38,1) 50%, rgba(254,209,104,1) 50%);
}
.single .category-list .category-item:nth-child(4n+4) a{
    background: linear-gradient(180deg, rgba(254,116,5,1) 50%, rgba(255,158,80,1) 50%);
}
.single .single-content{
    background: #fff;
    padding: 74px 58.4px 191.7px 69.4px;
    border: solid 4px #000;
    margin-top:60px;
}

.single .single-content .company-name{
    font-size: 29px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.72;
    letter-spacing: normal;
    text-align: right;
    color: #000;
    margin-top: 42.5px;
    padding-right: 17px;
}

.single .single-content .content01{
    padding-top: 51.6px;
    max-width: 1184.12px;
    margin: 0 auto;
}

.single .single-content .content01 .company-logo{
    max-width: 388.8px;
    margin-left: 28px;
}

.single .single-content .content01 .company-title{
    margin: 78px 0 68.4px 0;
    font-size: 50px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.74;
    letter-spacing: normal;
    text-align: center;
    color: #000;
}

.single .single-content .content01 h2{
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: center;
    color: #000;
    margin: 78.6px 0 46px 0;
}

.single .single-content .content01 picture{
    max-width: 1184.12px;
    margin: 0 auto;
}

.single .single-content .content01 .company-box p{
    font-size: 28px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.86;
    letter-spacing: normal;
    text-align: center;
    color: #666;
    max-width: 80%;
    margin: 0 auto;
}
.single .single-content .content01 .company-box{
    padding: 34.2px 0 48px 0;
    position: relative;
    max-width: 1238px;
    margin: 0 auto;
    overflow: hidden;
}
.single .single-content .content01 .company-box .bor{
    position: absolute;
    width: 508px;
}
.single .single-content .content01 .company-box .bor.botren{
    top:0;
    right:0;
}
.single .single-content .content01 .company-box .bor.boduoi{
    bottom:0;
    left:0;
}
/*CONTENT02*/
.single .single-content .content02{
    margin: 114.7px auto 77.7px auto;
    max-width: 1270px;
}

.single .single-content .content02 .person-list .person-item .box-img{
    width: 514.61px;
}
.single .single-content .content02 .person-list .person-item .box-img img{
    height: 687.02px;
    object-fit: cover;
    object-position: top;
}
.single .single-content .content02 .person-list .person-item .box-text{
    width:calc(100% - 514.61px - 34px)
}

.single .single-content .content02 .person-list .person-item .box-text .ttl{
    font-size: 43px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: normal;
    text-align: left;
    color: #000;
    margin-bottom: 24.9px;
    margin-top: 20px;
}

.single .single-content .content02 .person-list .person-item .box-text p{
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.84;
    letter-spacing: normal;
    text-align: left;
    color: #666;
}

.single .single-content .content02 .person-list .person-item{
    margin-bottom:72.3px;
}
.single .single-content .content02 .person-list .person-item:last-child{
    margin-bottom :0;

}
.single .single-content .content02 .person-list .person-item:nth-child(even){
    flex-direction: row-reverse;
}

/*CONTENT03*/
.single .single-content .content03 picture{
    max-width: 1285px;
    margin: 0 auto;
}
.single .single-content .content03 h2{
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: normal;
    text-align: center;
    color: #000;
    margin: 52.7px 0 22.9px 0;
}
.single .single-content .content03 p{
    font-size: 28px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.86;
    letter-spacing: normal;
    text-align: center;
    color: #666;
}

.banner-bottom .inner{
    /*padding-top:39.2px;*/
    background: #ffffff;
    border: solid 4px #000;
    border-bottom:none;
}
.banner-bottom img{
    width: 100%;
}

.footer{
    background-image: linear-gradient(to bottom, #fff, #ebebeb);
}

.footer .footer-inner{
    padding:53px 128px 20px 75px;
}

.footer .footer-inner .box-left{
    width: 428px;
}

.footer .footer-inner .box-left .footer-logo{
    width: 278px;
}

.footer .footer-inner .box-left .mbutton {
    font-size: 23px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.83;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    padding: 15px 0px 15px 0px;
    border-radius: 36px;
    background-image: linear-gradient(to bottom, #ff4c38, #ff8000);
    display: block;
    width: 100%;
    margin: 36px auto 0;
}

.footer .footer-inner .box-left .mbutton svg {
    margin-left: 30px;
    transform: translateX(0);
    transition: .3s;
}
.footer .footer-inner .box-left .mbutton:hover svg{
    transform: translateX(5px);
}

.footer .footer-inner .box-right{
}
.footer .footer-inner a{
    font-size: 23px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.74;
    letter-spacing: normal;
    text-align: left;
    color: #4e4e4e;
    display: block;
    margin-bottom:17px;
}


.footer .footer-inner .box-right ul li a.pdl{
    padding-left: 0px;
}

.footer .footer-inner .box-right ul li a:last-of-type{
    margin-bottom:0;
}
.footer .footer-inner .footer-end a{
    padding-left:11px;
}

.footer .footer-inner .footer-end .copyright{
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.36;
    letter-spacing: 0.84px;
    text-align: left;
}

.footer .footer-inner .footer-start{
    column-gap: 179px;
    justify-content: flex-start;
    position: relative;
    right: 160px;
}

.footer .footer-inner .footer-end{
    width: 363px;
    margin:15px 0 0 auto;
}

.main-header{
    width: 100%;
    /*background:#fff;*/
    z-index: 9999;
}

.novideos{
    width: 100%;
    text-align: center;
}

/* Pagination */
.pagination {
    text-align: center;
    margin: 100px 0 0 0;
    display: flex;
    justify-content: center;
    column-gap: 19px;
}
.pagination .prev, .pagination .next{
    border: none;
    width: unset;
    height: unset;
}
.pagination .prev img, .pagination .next img{
    width: 15px;
}

.pagination .prev img{
    transform: rotate(180deg);
}

.pagination a, .pagination span {
    text-decoration: none;
    font-size: 23px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.5;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    border: 2px solid #fff;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.pagination .current {
    color: #fff;
    background: #FF7E00;
    border: 1px solid #FF7E00;
}
table{
    margin:20px 0;
}

/* 黄色マーカー */
.marker {
    background: linear-gradient(transparent 60%, #F3DC23 85%);
    font-weight: bold;
}

/* 赤バッジ */
.badge {
    display: inline-block;
    color: #fff;
    padding: 0.2rem 0.3rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.bg-red {
    background-color: #E74C3C;
}


@media print, screen and (max-width: 767px) {
    table, div, p {
        font-size: 16px;
    }
    body{
        background-image: unset;
    }
    .sp-br {
        display: inline;
    }

    .pc-br {
        display: none;
    }
    /*MENU MOBILE*/
    .main-header{
        position: relative;
    }
    .main-header .inner .ham{
        width: 36px;
        right:13px;
        top:36px;
        position: absolute;
    }
    .main-header .inner .logo {
        width: 157.24px;
    }
    .main-header .inner{
        padding: 15px;
        border-left:none;
        border-right:none;
    }
    /*SINGLE*/
    /*SINGLE COMPANY*/
    .single{
        padding: 42px 0 62px 0;
        border:none;
    }
    .single .single-ttl span.en{
        font-size: 36px;
    }

    .single .single-ttl span.jp{
        font-size: 18px;
        padding: 0 35px;
    }

    .single .category-list .category-item a{
        font-size: 13px;
        line-height: 1.23;
        padding: 8.6px 53.9px 10.5px 41px;

    }
    .single .category-list{
        margin: 20px auto 36px auto;
        row-gap: 16.8px;
        column-gap: 17.8px;
    }
    .inner-1468{
        width: calc(100%);
    }
    .single .single-content{
        border-left: none;
        border-right: none;
        padding: 40.5px 0 56.5px 0;
    }
    .single-content .sbanner{
        max-width: 338px;
        margin:0 auto;
    }
    .single .single-content .company-name{
        font-size: 23px;
        padding-right: 0;
        margin-top: 40.4px;
        text-align: center;
    }
    /*CONTENT01*/
    .single .single-content .content01 .company-logo {
        max-width: 255px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .single .single-content .content01 {
        padding-top: 9.1px;
    }
    .single .single-content .content01 .company-title{
        margin: 41px 0 19.4px 0;
        font-size: 20px;
        line-height: 1.75;
    }
    .single .single-content .content01 h2{
        margin: 40px auto;
        font-size: 20px;
        line-height: 1.8;
        padding: 0 35.5px;
    }
    .single .single-content .content01 .company-box p{
        font-size: 18px;
        font-weight: 500;
        color: #000;
        text-align: center;
        padding: 0 26px;
        max-width: 86%;
    }
    .single .single-content .content01 .company-box .bor {
        width: 174.86px;
    }
    .single .single-content .content01 .company-box .bor.botren{
        right:18.3px;
    }
    .single .single-content .content01 .company-box .bor.boduoi {
        left: 18.3px;
    }
    .single .single-content .content01 .company-box {
        padding: 45px 0 36px 0;
    }

    /*CONTENT02*/
    .single .single-content .content02 {
        margin: 63px auto 51px auto;
        width: calc(100% - 26px);
    }
    .single .single-content .content02 .person-list .person-item .box-img img {
        height: 277px;
    }
    .single .single-content .content02 .person-list .person-item .box-img {
        width: 100%;
    }
    .single .single-content .content02 .person-list .person-item .box-text {
        width: 100%;
    }
    .single .single-content .content02 .person-list .person-item .box-text .ttl{
        margin-bottom: 32.5px;
        margin-top: 43px;
        font-size: 20px;
        line-height: 1.4;
    }
    .single .single-content .content02 .person-list .person-item .box-text .text{
        font-size: 18px;
        font-weight: 500;
        color: #000;
    }
    .single .single-content .content02 .person-list .person-item {
        margin-bottom: 79.5px;
    }
    /*CONTENT03*/
    .single .single-content .content03 picture img{
        height: 629px;
        object-fit: cover;
        object-position: 18%;
    }
    .single .single-content .content03 h2{
        margin: 54.5px 0 40px 0;
        font-size: 20px;
        line-height: 1.8;
        padding: 0 35px;
    }
    .single .single-content .content03 p{
        font-size: 18px;
        font-weight: 500;
        line-height: 2;
        color: black;
        padding: 40px 26px;
        position: relative;
    }
    .single .single-content .content03 p .bor {
        width: 174.86px;
        position: absolute;
    }
    .single .single-content .content03 p .bor.botren {
        top:0;
        right: 18.3px;
    }
    .single .single-content .content03 p .bor.boduoi {
        left: 18.3px;
        bottom:0;
    }

    /*FOOTER*/
    .banner-bottom .inner{
        border: none;
        border-top: solid 4px #000;
        padding-top: 0px;
    }

    .main-header{
        z-index: 9999;
    }
    /*MENU*/
    .main-header .inner .main-menu{
        position: absolute;
        width: 100%;
        background: rgb(255, 255, 255);
        /*height: 0;*/
        height: 0;
        transition: .5s;
        overflow: hidden;
        top: 97px;
        left: 0%;
        opacity: 0;
    }
    .main-header.is-open .inner .main-menu {
        height: calc(100vh - 97px);
        opacity: 1;
    }
    .main-header .inner .main-menu ul{
        flex-direction: column;
        top:0;
    }
    .main-header .btn-menu{
        border: 0;
        width: 36px;
        height: 25px;
        background-color: transparent;
        cursor: pointer;
        display: block;
        position: absolute;
        top: 34px;
        right: 15px;
    }
    .main-header .btn-menu .bar, .btn-menu .bar:before, .btn-menu .bar:after {
        display: block;
        position: absolute;
        width: 36px;
        height: 5px;
        background-color: #000;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .main-header .btn-menu .bar {
        top: 10px;
        left: 0;
    }
    .main-header .btn-menu .bar:before {
        position: absolute;
        content: '';
        top: 10px;
        left: 0;
    }
    .main-header .btn-menu .bar:after {
        position: absolute;
        content: '';
        top: -10px;
        left: 0;
    }
    body.lock{
        overflow: hidden;
    }

    .main-header.is-open .btn-menu .bar:before {
        top: 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .main-header.is-open .btn-menu .bar:after {
        top: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .main-header.is-open .btn-menu .bar {
        background-color: transparent;
    }
    .main-header .inner .main-menu ul li a{
        display: block;
        padding:20px 0;
    }
    .main-header .inner .main-menu ul li{
        border-bottom: 1px solid black;
    }

    .main-header.collapse{
        position: fixed;
    }
}

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

    body{
        min-width: 1200px;
    }


}

@media (max-width: 767px) {
    #interview .feature-img, #copo-labo .feature-img{
        width: 100%;
    }
    .footer .footer-inner {
        padding: 40px 30px 40px;
    }
    .footer .footer-inner .box-left .footer-logo {
        width: 220px;
        margin: 0 auto;
        display: block;
    }
    .footer .footer-inner .box-left .mbutton {
        font-size: 16px;
        margin: 20px auto 0;
    }

    .footer .footer-inner .box-left .mbutton svg {
        margin-left: 5px;
        width: 12px;
    }

    .footer .footer-inner .footer-start {
        column-gap: 179px;
        justify-content: flex-start;
        position: relative;
        right: 0px;
        row-gap: 17px;
    }

    .footer .footer-inner .box-right {
        margin-top: 40px;
    }

    .footer .footer-inner a {
        font-size: 15px;
    }
    .footer .footer-inner .box-right ul li a.pdl {
        padding-left: 0;
    }
    .footer .footer-inner .footer-end a {
        padding-left: 0;
        margin-bottom: 48px;
        display: none;
    }
    .footer .footer-inner .footer-end {
        width: auto;
        margin: 15px 0 0 auto;
    }
    .single #table-of-contents ul li a:before{
        top: 9px;
    }

    .footer .footer-inner .mb-grid{
        position: relative;
        padding-bottom:100px;
    }
    .footer .footer-inner .box-left .mbutton{
        position: absolute;
        bottom: 11px;
    }
}