@charset "utf-8";

@import "base.css";
@import "common.css";
@import "layout.css";
@import "layoutFull.css";
@import "layoutNav.css";

/* nav
---------------------------------------------------*/
#basic #flexNav .technology_nav01 a,
#making #flexNav .technology_nav02 a,
#choice #flexNav .technology_nav03 a,
#alloy #flexNav .technology_nav04 a,
#film #flexNav .technology_nav05 a,
#extrusion #flexNav .technology_nav06 a,
#fsw-welding #flexNav .technology_nav07 a,
#di #flexNav .technology_nav08 a,
#mating-technology #flexNav .technology_nav09 a,
#metal3dprinter #flexNav .technology_nav10 a,
#topology-cooling-device #flexNav .technology_nav11 a{
    color: #dc186e;    
}

/* basic
---------------------------------------------------*/
#basic #box03 .tableDesing01 th{
    font-size: 12px;
}

@media only screen and (max-width: 767px) {
  #basic #box03 .tableDesing01 th {
    padding: calc(15vw / 7.5) calc(10vw / 7.5);
    white-space: nowrap;
  }
}


/* making
---------------------------------------------------*/
#making .processBl > *{
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 50px;
    position: relative;
    gap:0 6.134969325%;
}

#making .processBl > * + *{
    margin-top: 50px;
}

#making .processBl > *:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 250px;
    background: #f1f1f1;
    z-index: -1;   
}

#making .processBl .txt{
    width: 190px;
}

#making .processBl .txt h3{
    margin-top: 0;
}

#making .processBl .img{
    max-width: 560px;
    margin-right: 6.871165644%;
    position: relative;
    flex: 1;
}

#making .processBl .img:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -60px;
    width: 100%;
    height:60px;
    background: url("../img/common/icn_arrow02.svg") no-repeat center center;
    background-size: 24px auto;
}

#making .processBl > *:last-child .img:after{
    display: none;
}

#making .processBl .movieBtn{
    margin: 0 auto;
    height: 46px;
    max-width: 190px;
}

#making .processBl .movieBtn a{
    font-size: 1.8rem;
    font-weight: 700;
    background: #fff;
    border: 2px solid #dc186e ;
    line-height: 46px;
    display: block;
    border-radius: 25px;
    padding: 0 10px;
    transition: .5s ease;
}

#making .processBl .movieBtn a .icon{
    width: 30px;
    height: 30px;
    fill:#dc186e;
    vertical-align: middle;
    margin-bottom: 6px !important;
    transition: .5s ease;
}

/* hover反転 */
#making .processBl .movieBtn a:hover{
  background: #dc186e;
  color: #fff;
}

#making .processBl .movieBtn a:hover .icon{
  fill: #fff;
}

@media only screen and (max-width:1080px) {
    #making .processBl > *:before{
        height: 180px;
    }    
}

@media only screen and (max-width:767px) {
    #making .processBl{
        flex-direction: column;
        justify-content: flex-end;
    }

    #making .processBl > *{
        display: block;
        padding-top:  calc(45vw / 7.5);
    }

    #making .processBl > * + *{
        margin-top: calc(80vw / 7.5);
    }

    #making .processBl > *:before{
        content: "";
        height: calc(285vw / 7.5);
        right: calc(-40vw / 7.5);
    }

    #making .processBl .img{
        margin-right: 0;
        text-align: right;
        max-width: 100%;
    }

    #making .processBl .img img{
        max-width: calc(560vw / 7.5);
    }

    #making .processBl .img:after{
        content: "";
        position: absolute;
        left: 0;
        bottom:calc(-80vw / 7.5);
        height:calc(80vw / 7.5);
        background: url("../img/common/icn_arrow02.svg") no-repeat center center;
        background-size:calc(35vw / 7.5) auto;
    }

    #making .processBl > *:last-child .img:after{
        display: none;
    }

    #making .processBl .txt{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: calc(40vw / 7.5);
    }

    #making .processBl .movieBtn{
        margin: 0;
        height:calc(60vw / 7.5);
        max-width: inherit;
    }

    #making .processBl .movieBtn a{
        font-size: calc(24vw / 7.5);
        line-height: calc(56vw / 7.5);
        border-radius: calc(30vw / 7.5);
        padding: 0 calc(28vw / 7.5);
    }

    #making .processBl .movieBtn a .icon{
        width: calc(36vw / 7.5);
        height: calc(36vw / 7.5);
        margin-bottom: calc(6vw / 7.5);
    }
}


/* fsw-welding
---------------------------------------------------*/
#fsw-welding .catchBox{
	border:1px solid #dc186e;
	text-align:center;
	padding:15px;
    margin-bottom: 60px;
	font-weight:700;
}


#fsw-welding .catchBox div{
	text-align:left;
	display:inline-block;
	font-size:3.0rem;
	letter-spacing:3px;
	line-height: 1.5;
}

#fsw-welding .catchBox div span{
	color:#dc186e;
    width: 1em;
    display: inline-block;
    text-align: center;    
}

@media only screen and (max-width:767px) {
    #fsw-welding .catchBox{
        padding: calc(25vw / 7.5);
        margin-bottom: calc(80vw / 7.5);
    }

    #fsw-welding .catchBox div{
        font-size: calc(36vw / 7.5);
        letter-spacing:2px;
    }

}


/* di
---------------------------------------------------*/
#di .bgPinkArea{
    margin-bottom: 40px;
}

@media only screen and (max-width:767px) {
    #di .bgPinkArea{
        margin-bottom: calc(60vw / 7.5);
    }

}


/* mating-technology
---------------------------------------------------*/
#mating-technology #box02{
    margin-top: 30px;
}
@media only screen and (max-width:767px) {
  #mating-technology #box02{
     margin-top: calc(50vw / 7.5);
  }

}

/* metal3dprinter
---------------------------------------------------*/
#metal3dprinter #box02 .imgBl{
    max-width: 265px;
}

#metal3dprinter #box02 .txt{
    width: inherit;
    flex: 1;
}

#metal3dprinter #box03 .heading{
    border-bottom: 1px  solid #bfbfbf;
    padding: 0 5px;
    margin-bottom: 10px;
    font-size: 2.0rem;
}

@media only screen and (max-width:767px) {
    #metal3dprinter #box02 .imgBl{
        width: calc(530vw / 7.5);
        margin: 0 auto;
    }
    
    #metal3dprinter #box03 .heading{
        margin-bottom: calc(20vw / 7.5);
        font-size: calc(28vw / 7.5);
    }    

}


/* topology-cooling-device
---------------------------------------------------*/
#topology-cooling-device #box01 .bgPinkArea{
    margin-bottom: 50px;
    font-size: 1.8rem;
}

#topology-cooling-device #box01 .bgPinkArea p:nth-child(1){
    margin-bottom: 20px;
}

#topology-cooling-device #box01 .bgPinkArea .fontS{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2;
}

#topology-cooling-device #box01 ul .fontB{
    font-size: 1.8rem;
    display: contents;
}

#topology-cooling-device #box01 p{
    margin-bottom: 50px;
}

#topology-cooling-device #box02 .imgBl.border{
    border: 1px solid #ccc;
    padding: 80px 20px;
}

@media only screen and (max-width:767px) {
    #topology-cooling-device #box01 .bgPinkArea p:nth-child(1){
        margin-bottom:  calc(40vw / 7.5);
    }

    #topology-cooling-device #box01 .bgPinkArea .fontS{
        font-size:  calc(24vw / 7.5);
        line-height: 1.8 !important;
    }    
    
    #topology-cooling-device #box01 ul .fontB{
        font-size: calc(28vw / 7.5);
        margin-bottom: calc(60vw / 7.5);
    }

    #topology-cooling-device #box01 p{
        margin-bottom: calc(60vw / 7.5);
    }
    
    #topology-cooling-device #box02 .imgBl.border{
        padding: calc(40vw / 7.5);
    }  
    
    #topology-cooling-device #box02 .img02 img{
        width: calc(602vw / 7.5);
    }

    #topology-cooling-device #box02 .img03 img{
        width: calc(456vw / 7.5);
    }
    

}