/* 共通部分 */
.pc{
    display: block !important;
}
.sp{
    display: none !important;
}
.slide-menu{
    width: 270rem;
    position: fixed;
    z-index: 11;
    top: 0;
    right: -100%;
    padding: 150rem 40rem 70rem 60rem; 
    background: rgba(255, 255, 255, .9) 0% 0% no-repeat padding-box;
    height: calc( var(--vh, 1vh) * 100 );
    overflow-y: scroll;
    /*スクロールバー非表示（IE・Edge）*/
    -ms-overflow-style: none;
    /*スクロールバー非表示（Firefox）*/
    scrollbar-width: none;
    transition: all ease .3s;
}
.slide-menu.open{
    right: 0;
}
.slide-menu-list a{
    letter-spacing: var(--unnamed-character-spacing-2);
    color: var(--unnamed-color-727273);
}
.slide-item{
    margin-bottom: 30rem;
}
.has-menu-child{
    margin-bottom: 30rem;
}
.menu-child{
    margin-top: 15rem;
    margin-left: 30rem;
}
.menu-child a{
    font-size: 15rem;
    line-height: 30rem;
    letter-spacing: .9rem;
}
.menu-child a::before{
    content: "- ";
}
.menu-child:first-of-type{
    margin-top: 20rem;
}
body{
    min-width: 1100rem;
}
h2{
    font-size: 62rem;
    line-height: 64rem;
    letter-spacing: 3.1rem;
    color: var(--unnamed-color-29332f);
    font-family: Questrial;
}
h3{
    font-size: var(--unnamed-font-size-24);
    line-height: 36rem;
    letter-spacing: 1.44rem;
    color: var(--unnamed-color-000000);
}
h4{
    font-size: 20rem;
    line-height: 29rem;
    color: var(--unnamed-color-29332f);
    font-weight: 600;
}
h5{
    font-size: 24rem;
    line-height: 36rem;
}
p{
    font-size: var(--unnamed-font-size-17);
    line-height: 25rem;
    letter-spacing: 0.9rem;
    color: var(--unnamed-color-29332f);
}

a{
    display: block;
    color: var(--unnamed-color-29332f);
    font-size: 20rem;
    font-weight: normal;
}
.flex{
    display: flex;
}

.content-title{
    text-align: center;
    display: flex;
    flex-direction: column;
}
.content-title span{
    font-size: 13rem;
    line-height: 19rem;
    color: #727273;
    margin-top: 30rem;
}

section{
    padding-top: 290rem;
}
/* 簡略命名 */
.p-15{
    font-size: var(--unnamed-font-size-15);
    line-height: 27rem;
    color: var(--unnamed-color-29332f);
}
.pt-145{
    padding-top: 145rem;
}
.pt-18{
    padding-top: 180rem;
}
.inner{
    width: 1000rem;
    margin: 0 auto;
}
.left{
    text-align: left;
}
.center{
    text-align: center;
}

/* ポップアップ */
.popup-mask{
    position: fixed;
    z-index: 30;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .8);
    padding: 85rem 0;
}
#news-popup{
    width: 1000rem;
    height: auto;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1rem solid #29332F;
    margin: 0 auto;
    min-height: 950rem;
    position: relative;
    padding: 60rem 180rem 170rem;
}
#news-popup .content{
    min-height: 200px; /* 高さの最低保証 */
}
.content h5{
    margin-bottom: 30rem;
}
.pro-img{
    width: 100%;
    height: 460rem;
    background-color: #29332F;
    margin-bottom: 50rem;
    background-size: cover;
}
.pop-item{
    color: var(--unnamed-color-29332f);
    font-size: 16rem;
    line-height: 30rem;
    padding: 20rem 0;
}
.pop-item:first-of-type{
    padding-top: 0rem;
}
.pop-item:last-of-type{
    padding-bottom: 0rem;
}
.content .p-15{
    width: 120rem;
}
.close-btn{
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    border: 1rem solid #29332F;
    border-radius: 2rem;
    width: 245rem;
    height: 50rem;
    line-height: 50rem;
    text-align: center;
    position: absolute;
    bottom: 60rem;
    left: 50%;
    transform: translateX(-50%);
}
.prev,
.next{
    position: absolute;
    background: none;
    border: none;
    width: 85rem;
    height: 85rem;
}
.prev:hover,
.next:hover{
    cursor: pointer;
}
button:hover{
    cursor: pointer;
}
.prev{
    top: 50%;
    left: 50rem;
    transform: translateY(-50%);
}
.next{
    top: 50%;
    right: 50rem;
    transform: translateY(-50%);
}
.close-btn:hover{
    cursor: pointer;
}
/* header */
header{
    width: 100%;
    height: 100rem;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    padding-left: 60rem;
    padding-right: 50rem;
    justify-content: space-between;
    align-items: center;
    transition: all ease .3s;
}

.header-logo img{
    width: auto;
    height: 35rem;
}

.header-logo .scroll{
    display: none;
}
.header-list{
    display: flex;
}
.header-list li{
    margin-left: 40rem;
}
.header-list a{
    font-size: 18rem;
    line-height: 19rem;
    color: var(--unnamed-color-ffffff);
}
.sub .header-logo .scroll,
.flow .scroll{
    display: block;
}
.sub .header-logo .top,
.flow .top{
    display: none;
}
.flow header{
    background-color: rgba(255, 255, 255, .8);
}
.sub .header-list a,
.flow .header-list a{
    color: var(--unnamed-color-727273);
}



/* footer */
footer{
    padding: 290rem 60rem 95rem;
    position: relative;
    justify-content: space-between;
}
footer::after{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 5rem;
    bottom: 0;
    left: 0;
    background-image: url('/assets/img/footer-bottom.png');
    background-size: 100% 100%;
}
footer img{
    width: 200rem;
    height: 111rem;
}
.footer-item{
    margin-left: 50rem;
    letter-spacing: var(--unnamed-character-spacing-2);
}
.footer-item:first-of-type{
    margin-left: 0;
}
.footer-item a{
    font-size: 20rem;
    color: var(--unnamed-color-727273);
}
.copy{
    margin-top: 80rem;
    font-size: 12rem;
    letter-spacing: var(--unnamed-character-spacing-0-72);
    color: var(--unnamed-color-727273);
}

/* top-fv */
.fv-container{
    width: 100%;
    height: 750rem;
    background-image: url('/assets/img/fv_pc.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.fv-container img{
    position: absolute;
    width: 334rem;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* top-content */
.project-list{
    display: flex;
    flex-wrap: wrap;
    margin-top: 90rem;
}
.project-item{
    margin-right: 2rem;
    width: calc((100% - 4rem) / 3);
    background-color: #727273;
    height: 320rem;
    position: relative;
    background-size: cover;
}
.project-item:hover{
    cursor: pointer;
}
/* 画像一覧のエフェクト */
.project-item .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
    opacity: 0;
    padding: 95rem 0;
}
.caption{
    color: var(--unnamed-color-ffffff);
    text-align: center;
    font: normal normal 500 18rem/30rem Noto Sans JP;
}
.project-item:hover .mask {
    opacity: 1;
}
.mask img{
    width: 84rem;
    height: 84rem;
    display: block;
    margin: 20rem auto 0;
}

.project-item:nth-of-type(3n){
    margin-right: 0;
}
.project-item:nth-of-type(n+4){
    margin-top: 60rem;
}
.content-text-box{
    margin-bottom: 130rem;
}
.content-text-box h3,
.content-text-box p{
    width: 567rem;
    margin-left: auto;
}
.content-text-box h3{
    margin-bottom: 35rem;
}
.scroll-list{
    overflow-x: scroll;

    /*スクロールバー非表示（IE・Edge）*/
    -ms-overflow-style: none;
    /*スクロールバー非表示（Firefox）*/
    scrollbar-width: none;
}
.business-list{
    padding: 0 183rem;
    width: calc(183rem*2 + 310rem*6 + 50rem*5);
    position: relative;
}
.business-list::before{
    content: "";
    display: block;
    width: 100%;
    height: 1rem;
    background-color: var(--unnamed-color-29332f);
    position: absolute;
    left: 0;
    top: 180rem;
}
.busi-item{
    position: relative;
    z-index: 1;
    width: 310rem;
    margin-right: 50rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.busi-item:last-of-type{
    margin-right: 0;
}
.busi-item img{
    width: 150rem;
}
.busi-item h3{
    margin-top: 20rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rem;
}
.busi-item h3 span{
    font-size: 28rem;
    line-height: 29rem;
    margin-bottom: 5rem;
    font-family: Questrial;
}
.color01{
    color: #AD3450;
}
.color02{
    color: #749D24;
}
.color03{
    color: var(--unnamed-color-de9a00);
}
.color04{
    color: var(--unnamed-color-1d75b5);
}
.color05{
    color: var(--unnamed-color-22792c);
}
.color06{
    color: var(--unnamed-color-743d6e);
}

.company-list,
.recruit-list{
    width: 100%;
}
.com-item,
.rec-item{
    width: calc(100% / 3);
    text-align: center;
    height: 370rem;
    border-right: 1rem solid #707070;
    margin-top: 90rem;
    margin-bottom: 290rem;
    transition: all ease .5s;
}
.com-item a,
.rec-item a{
    transition: all ease .3s;
    height: 100%;
    padding: 170rem 0;
}
.com-item img,
.rec-item img{
    display: block;
    opacity: 0;
    width: 85rem;
    height: 85rem;
        margin: 15rem auto 0;
    transition: all ease .3s;
}

.com-item:hover,
.rec-item:hover{
    background-color: #F4F4F4;
}
.com-item:hover a,
.rec-item:hover a{
    padding: 120rem 0;
}
.com-item:hover img,
.rec-item:hover img{
    opacity: 1;
    margin: 15rem auto 0;
}
.rec-item{
    margin-bottom: 0;
}
.gray{
    background: #F4F4F4 0% 0% no-repeat padding-box;
}

/* sub-page */
.sub-fv{
    height: 668rem;
    background: var(--unnamed-color-f4f4f4) 0% 0% no-repeat padding-box;
    width: 100%;
    position: relative;
}
.sub-fv .content-title{
    position: absolute;
    top: 340rem;
    left: calc( 183vw/ ( 1366/ 100));
    text-align: left;
}

.sub-container{
    width: 930rem;
    margin: 0 auto;
}
.sub-container:last-of-type{
    margin-bottom: 290rem;
}
.sub-title{
    position: relative;
    padding-left: 70rem;
    margin-bottom: 165rem;
}
.sub-title::before{
    content: "";
    display: block;
    width: 60rem;
    height: 1rem;
    background-color: var(--unnamed-color-29332f);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.com-text{
    line-height: 64rem;
    margin-bottom: 100rem;
}
.com-name{
    width: 370rem;
    display: block;
    margin: 0 auto;
}
table{
    width: 100%;
}
dl{
    display: flex;
    padding: 60rem 0;
    border-bottom: 1rem solid #BEC1C0;
}
dl:first-of-type{
    padding-top: 0;
}
dl:last-of-type{
    border-bottom: 0;
}
dt{
    width: 230rem;
    font-size: 17rem;
    line-height: 30rem;

}
dd,
dd p{
    letter-spacing: var(--unnamed-character-spacing-1-02);
    color: var(--unnamed-color-727273);
    font-size: 17rem;
    line-height: 35rem;
}
#recruit-page dd p{
    text-align: left;
    padding-left: 1em;
    text-indent: -1em;

}
#recruit-page dd p::before{
    content: "⚫︎";
}
#recruit-page dd .entry-text-box p{
    padding-left: 0;
    text-indent: 0;
}
#recruit-page dd .entry-text-box p::before{
    content: "";
}
.header-list-has-child{
    position: relative;
    
}
.header-list-children{
    position: absolute;
    bottom: 0rem;
    left: 50%;
    transform: translate(-50% , 100%);
    width: 200rem;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all ease .3s;
}
.header-list-has-child:hover .header-list-children{
    height: auto;
    opacity: 1;
    visibility: visible;
}
.header-list-children li{
    margin-left: 0;
    margin: 20rem 0;
}
.header-list-children a{
    font-size: 14rem;
    text-align: center;
    filter: drop-shadow(0rem 0rem 14rem rgba(255,255,255,0.6));
}
.dl-link{
    display: flex; 
    align-items: center;
    margin: 30rem 0 45rem;
}
.dl-link img{
    width: 84rem;
    height: 84rem;
    margin-left: 30rem;
}
.entry-text-box{
    width: 100%;
    padding: 30rem;
    border: 1rem solid var(--unnamed-color-29332f);
    position: relative;
}
.entry-text-box::before{
    content: "";
    position: absolute;
    display: block;
    width: 95rem;
    height: 30rem;
    background-color: var(--unnamed-color-ffffff);
    top: 0;
    left: 10rem;
    transform: translateY(-50%);
}
.entry-text-box .abs{
    position: absolute;
    top: 0;
    left: 30rem;
    transform: translateY(-50%);
}
#recruit-page .gray{
    display: none;
}
#recruit-page footer{
    border-top: 1rem solid var(--unnamed-color-bec1c0);
}
#news-popup .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#news-popup .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;        /* 薄い色 */
  border-top: 4px solid #333;    /* 濃い色（回転部分） */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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



@media screen and (max-width:900px){
    .pc{
        display: none !important;
    }
    .sp{
        display: block !important;
    }
    body{
        min-width: auto;
    }
    html{
        font-size: calc( 1vw/ ( 390/ 100));
    }
    header{
        padding: 0 20rem;
        height: 90rem;
    }
    a{
        font-size: 18rem;
    }
    .header-logo img{
        width: auto;
        height: 37rem;
    }
    .header-list{
        display: none;
    }
    .hum{
        display: block;
        position: fixed;
        width: 50rem;
        height: 50rem;
        top: 20rem;
        right: 20rem;
        border-radius: 100%;
        border: 1rem solid var(--unnamed-color-ffffff);
        z-index: 20;
    }
    .hum.open,
    .sub .hum,
    .flow .hum{
        border: 1rem solid var(--unnamed-color-29332f);
    }
    .hum:hover{
        cursor: pointer;
    }
    .hum span{
        position: absolute;
        width: 25rem;
        height: 1rem;
        transition: all ease .5s;
        background-color: var(--unnamed-color-ffffff);
    }
    .hum.open span,
    .sub .hum span,
    .flow .hum span{
        background-color: var(--unnamed-color-29332f);
    }
    .hum span:first-of-type{
        top: 21rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .hum span:last-of-type{
        bottom: 21rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .hum.open span:first-of-type{
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%) rotate(25deg);
    }
    .hum.open span:last-of-type{
        bottom: 50%;
        left: 50%;
        transform: translate(-50% , 50%) rotate(-25deg);
    }
    footer{
        flex-direction: column;
    }
    .footer-list{
        flex-direction: column;
    }
    
    /* top */
    .fv-container{
        height: 675rem;
            background-image: url('/assets/img/fv_sp.jpg');
    }
    .fv-container img{
        width: 270rem;
        height: auto;
        top: 265rem;
    }
    .pt-18{
        padding-top: 90rem;
    }
    h2{
        font-size: 35rem;
        line-height: 36rem;
    }
    h3{
        font-size: 18rem;
        line-height: 30rem;
    }
    h4{
        font-size: 18rem;
        line-height: 27rem;
    }
    .p-15{
        font-size: 14rem;
        line-height: 24rem;
        letter-spacing: .84rem;
    }
    section{
        padding-top: 150rem;
    }
    .content-title span{
        margin-top: 15rem;
        font-size: 12rem;
        line-height: 18rem;
    }
    .project-list{
        margin-top: 30rem;
        flex-direction: column;
    }
    .project-item{
        width: 100%;
        height: 275rem;
        margin-right: 0;
        margin-bottom: 15rem;
    }
    .project-item:nth-of-type(n+4){
        margin-top: 0;
    }
    .project-item:last-of-type{
        margin-bottom: 0;
    }
    .inner{
        width: 100%;
        padding: 0 30rem;
    }
    .content-text-box h3, .content-text-box p{
        width: 100%;
        margin-left: 0;
        margin-top: 30rem;
    }
    .business-list{
        padding: 0 30rem;
        width: calc(230rem * 6 + 30rem * 2 + 30rem * 5);
    }
    .busi-item{
        width: 230rem;
    }
    .busi-item h3{
        margin-top: 5rem;
        margin-bottom: 10rem;
    }
    .busi-item h3 span{
        font-size: 24rem;
        line-height: 25rem;
        margin-bottom: 0;
    }
    .company-list{
        margin-bottom: 115rem;
    }
    .company-list, .recruit-list{
        flex-direction: column;
    }
    .com-item, .rec-item{
        width: 100%;
        border-right: none;
        border-bottom: 1rem solid #707070;
        height: 200rem;
        line-height: 200rem;
        margin: 0;
    }
    footer{
        padding-top: 150rem;
        padding-bottom: 60rem;
    }
    footer img{
        margin-bottom: 60rem;
    }
    .footer-item{
        margin-left: 0;
        margin-bottom: 30rem;
    }
    .footer-item:last-of-type{
        margin-bottom: 0;
    }
    .cop{
        margin-top: 60rem;
    }
    footer::after{
        height: 3rem;
    }
    .sub-fv{
        height: 400rem;
    }
    .sub-fv .content-title{
        top: 180rem;
        left: 30rem;
    }
    .sub-container{
        width: 100%;
        padding: 150rem 30rem 0;
    }
    .pt-145{
        padding-top: 90rem;
    }
    .sub-title{
        margin-bottom: 90rem;
    }
    .com-text{
        font-size: 15rem;
        line-height: 25rem;
        text-align: left;
        margin-bottom: 60rem;
    }
    .com-name{
        width: 188rem;
        height: auto;
        margin: 60rem 0 0;
    }
    dl{
        flex-direction: column;
        align-items: center;
        padding: 30rem 0;
    }
    dt{
        width: 100%;
    }
    dd,
    dd p{
        width: 100%;
    }
    #recruit-page dd{
        margin-top: 15rem;
    }
    #recruit-page dd p{
        text-align: left;
        padding-left: 1em;
        text-indent: -1em;
    }
    #recruit-page dd p::before{
        content: "⚫︎";
    }
    .slide-img{
        width: calc(100% + 30rem);
        overflow-x: scroll;
        /*スクロールバー非表示（IE・Edge）*/
        -ms-overflow-style: none;
        /*スクロールバー非表示（Firefox）*/
        scrollbar-width: none;
    }
    .slide-img img{
        width: 470rem;
    }
    .sp-slide{
        margin-top: 30rem;
    }
    .sub-container:last-of-type{
        margin-bottom: 150rem;
    }
    .sub-fv ul{
        position: absolute;
        bottom: 40rem;
        right: 30rem;
        text-align: right;
    }
    .sub-fv ul li a{
        font-size: 14rem;
        line-height: 20rem;
        color: var(--unnamed-color-727273);
        margin-bottom: 15rem;
        text-decoration: underline;
    }
    .dl-link img{
        width: 80rem;
        height: 80rem;
    }
    .entry-text-box{
        padding: 25rem 20rem 20rem;
    }
    .entry-text-box p{
        font-size: 15rem;
        text-align: left;
    }
    dd{
        letter-spacing: 1.02rem;
    }
    #news-popup{
        width: 330rem;
        padding: 30rem 30rem 80rem;
        min-height: 700rem;
    }
    .pro-img{
        height: 190rem;
        margin-bottom: 30rem;
    }
    .close-btn{
        margin-top: 10rem;
        position: absolute;
        bottom: 30rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .prev, .next{
        width: 70rem;
        height: 70rem;
        position: static;
        transform: translateY(0);
        margin-top: 30rem;
    }
    .prev{
        margin-left: 50rem;
        margin-right: 20rem;
    }
    .content .flex{
        flex-direction: column;
    }
    .pop-item:first-of-type{
        padding-top: 20rem;
    }
    .project-item:hover .mask {
    opacity: 0;
    }
    .com-item a, .rec-item a{
        padding: 0;
    }
    .com-item:hover img,
    .rec-item:hover img{
        opacity: 0;
        margin: 0 auto 0;
    }
    .com-item:hover a,
    .rec-item:hover a{
        padding: 0;
    }
    .com-item:hover{
        background-color: #FFFFFF;
    }
}