@font-face{
    font-family:'NotoSansCJKjp';
    src:url("../font/NotoSansCJKjp-Thin.otf") format("opentype");
    font-weight:100;
    font-style:normal
}
@font-face{
    font-family:'NotoSansCJKjp';
    src:url("fonts/NotoSansCJKjp-DemiLight.otf") format("opentype");
    font-weight:200;
    font-style:normal
}
@font-face{
    font-family:'NotoSansCJKjp';
    src:url("fonts/NotoSansCJKjp-Light.otf") format("opentype");
    font-weight:300;
    font-style:normal
}
@font-face{
    font-family:'NotoSansCJKjp';
    src:url("../font/NotoSansCJKjp-Regular.otf") format("opentype");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:'NotoSansCJKjp';
    src:url("../font/NotoSansCJKjp-Medium.otf") format("opentype");
    font-weight:500;
    font-style:normal
}
@font-face{
    font-family:'NotoSansCJKjp';
    src:url("../font/NotoSansCJKjp-Bold.otf") format("opentype");
    font-weight:700;
    font-style:normal
}
@font-face{
    font-family:'NotoSansCJKjp';
    src:url("../font/NotoSansCJKjp-Black.otf") format("opentype");
    font-weight:900;
    font-style:normal
}
@font-face{
    font-family:'NotoSansMonoCJKjp';
    src:url("../font/NotoSansMonoCJKjp-Bold.otf") format("opentype");
    font-weight:700;
    font-style:normal
}
@font-face{
    font-family:'NotoSansMonoCJKjp';
    src:url("fonts/NotoSansMonoCJKjp-Regular.otf") format("opentype");
    font-weight:500;
    font-style:normal
}

.hero {
	position: relative;
	overflow: hidden;
    margin-bottom: 50px;
}
@media screen and (max-width: 970px) {
	.hero {
		height: 56vw
	}
}
.hero #bgvid {
    width: 100%;
}
.hero .hero__catch {
    position: absolute;
    top: 1.25vw;
    right: 1vw;
    width: 30vw;
}

.precut{
    background-color:#FFFFFF
}
.precut .lowerHero{
    background-image:url(../images/precut/kv_precut.jpg)
}
@media screen and (max-width: 970px){
    .precut .lowerHero{
        background-image:url(../images/precut/sp_kv_precut.jpg)
    }
}
.precut .breadcrumb{
    position:relative
}
.precut .breadcrumb:before{
    content:'SERVICE';
    font-size:23rem;
    font-family:roboto;
    position:absolute;
    top:-27px;
    left:0;
    line-height:1;
    color:#fef8f8;
    z-index:0
}
@media screen and (max-width: 970px){
    .precut .breadcrumb:before{
        font-size:25vw;
        top:-2.5vw
    }
}
.precut .service{
    padding:0 0 90px 0;
    position:relative
}
@media screen and (max-width: 970px){
    .precut .service{
        padding:0 0 60px 0
    }
}
@media screen and (max-width: 970px){
    .precut .service .serviceBlock{
        padding:0
    }
}
.precut .service .serviceText{
    text-align:left;
    padding:0 235px;
    font-size:1.8rem
}
@media screen and (max-width: 970px){
    .precut .service .serviceText{
        padding:30px 20px;
        line-height:2;
        font-size:1.4rem
    }
}
.precut .service .servicePhoto{
    width:745px;
    margin:53px auto 0
}
@media screen and (max-width: 970px){
    .precut .service .servicePhoto{
        margin:0 auto;
        width:100%
    }
}
.precut .point1{
    position:relative;
    padding:95px 0 80px;
    background-color:#fef8f8
}
.precut .point1:before{
    content:'POINT1';
    font-size:23rem;
    font-family:roboto;
    position:absolute;
    top:-27px;
    right:0;
    line-height:1;
    color:#FFFFFF;
    z-index:0
}
@media screen and (max-width: 970px){
    .precut .point1:before{
        font-size:29vw;
        top:67vw
    }
}
.precut .point1:after{
    content:'';
    position:absolute;
    right:0;
    top:95px;
    background-image:url(../images/precut/point1_img_1.jpg);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    width:43vw;
    z-index:0;
    height:31vw;
    max-height:500px
}
@media screen and (max-width: 970px){
    .precut .point1:after{
        top:0;
        left:0;
        right:auto;
        width:100%;
        z-index:0;
        height:71vw
    }
}
@media screen and (max-width: 970px){
    .precut .point1{
        padding:69vw 0 50px 0
    }
}
.precut .point1 h2{
    position:absolute
}
.precut .point1 h2:before{
    content:'';
    position:absolute;
    background-image:url(../images/common/bgimg_left.png);
    background-repeat:no-repeat;
    bottom:-57px;
    left:-73px;
    width:150px;
    z-index:0;
    height:150px
}
@media screen and (max-width: 970px){
    .precut .point1 h2:before{
        display:none
    }
}
.precut .point1 .point1__content{
    text-align:left;
    padding:20px 43px;
    margin:0 0 0 90px;
    width:550px;
    line-height:2;
    position:relative
}
@media screen and (max-width: 970px){
    .precut .point1 .point1__content{
        background-color:rgba(0,0,0,0);
        text-align:left;
        padding:46px 0 0;
        margin:0;
        line-height:2;
        font-size:1.6rem;
        width:100%
    }
}
.precut .point1 .point1__head{
    font-size:1.8rem;
    font-weight:bold
}
@media screen and (max-width: 970px){
    .precut .point1 .point1__head{
        font-size:1.6rem
    }
}
.precut .point1 .point1__txt{
    margin:0 0 30px 0
}
@media screen and (max-width: 1299px){
    .precut .point1 .point1__txt{
        width:38vw;
        max-width:464px
    }
}
@media screen and (max-width: 970px){
    .precut .point1 .point1__txt{
        font-size:1.4rem;
        margin:4px 0 20px 0;
        width:100%;
        max-width:100%
    }
}
.precut .point1 .point1__img{
    width:600px;
    margin:20px auto
}
@media screen and (max-width: 970px){
    .precut .point1 .point1__img{
        width:100%;
        margin:40px auto 0
    }
}
@media screen and (max-width: 970px){
    .precut .point1 h2{
        z-index:2
    }
}
.precut .point2{
    position:relative;
    padding:95px 0 60px
}
.precut .point2:before{
    content:'POINT2';
    font-size:23rem;
    font-family:roboto;
    position:absolute;
    top:-27px;
    left:0;
    line-height:1;
    color:#fef8f8;
    z-index:0
}
@media screen and (max-width: 970px){
    .precut .point2:before{
        font-size:29vw;
        top:auto;
        bottom:-4.5vw
    }
}
@media screen and (max-width: 970px){
    .precut .point2{
        padding:45px 0 45px
    }
}
.precut .point2 h2{
    position:absolute
}
@media screen and (max-width: 970px){
    .precut .point2 h2{
        top:-30px
    }
}
.precut .point2 h2:before{
    content:'';
    position:absolute;
    background-image:url(../images/common/bgimg_right.png);
    background-repeat:no-repeat;
    top:-52px;
    right:-87px;
    width:150px;
    z-index:0;
    height:150px
}
@media screen and (max-width: 970px){
    .precut .point2 h2:before{
        display:none
    }
}
.precut .point2 .point2__content{
    padding:25px 50px;
    background-color:#fef8f8;
    margin:25px 0 0 0
}
@media screen and (max-width: 970px){
    .precut .point2 .point2__content{
        padding:25px 50px 25px 81px
    }
}
.precut .point2 .point2__inner{
    width:600px;
    position:relative
}
@media screen and (max-width: 970px){
    .precut .point2 .point2__inner{
        width:100%
    }
}
.precut .point2 .point2__text{
    line-height:2
}
@media screen and (max-width: 970px){
    .precut .point2 .point2__text{
        width:calc(100% - 93px);
        margin:0 auto 0 5px
    }
}
.precut .point2 .point2__list{
    display:flex;
    flex-wrap:wrap
}
@media screen and (max-width: 970px){
    .precut .point2 .point2__list{
        display:block
    }
}
.precut .point2 .point2__item{
    width:50%;
    display:flex;
    margin:10px 0 10px 0
}
@media screen and (max-width: 970px){
    .precut .point2 .point2__item{
        width:100%;
        margin:0;
        padding:6px 0px 6px 0
    }
}
.precut .point2 .point2__dt{
    width:60%;
    position:relative
}
.precut .point2 .point2__dt:before{
    content:'・';
    position:absolute;
    left:-16px
}
.precut .point2 .point2__dd{
    width:40%
}
.precut .pointPhoto{
    display:flex
}
@media screen and (max-width: 970px){
    .precut .pointPhoto{
        display:block
    }
}
.precut .pointPhoto img{
    width:calc(100% / 3)
}
@media screen and (max-width: 970px){
    .precut .pointPhoto img{
        width:100%
    }
}
.precut .pointCompany{
    background-color:#fef8f8;
    padding:130px 0 54px
}
@media screen and (max-width: 970px){
    .precut .pointCompany{
        padding:70px 20px 15px
    }
}
.precut .pointCompany .pointCompany__block{
    display:flex;
    flex-direction:column;
    padding:92px 0
}
@media screen and (max-width: 970px){
    .precut .pointCompany .pointCompany__block{
        padding:40px 0 0
    }
}
.precut .pointCompany .company__list{
    padding:48px 160px
}
@media screen and (max-width: 970px){
    .precut .pointCompany .company__list{
        padding:20px 30px
    }
}
.precut .pointCompany .company__item{
    display:flex;
    height:56px;
    border-bottom:1px solid #dcdcdc
}
@media screen and (max-width: 970px){
    .precut .pointCompany .company__item{
        height:auto;
        display:block
    }
}
.precut .pointCompany .company__label{
    width:190px;
    line-height:56px;
    font-weight:bold
}
@media screen and (max-width: 970px){
    .precut .pointCompany .company__label{
        width:100%;
        line-height:1.5;
        padding:21px 0 10px
    }
}
.precut .pointCompany .company__text{
    flex:1;
    line-height:56px
}
@media screen and (max-width: 970px){
    .precut .pointCompany .company__text{
        width:100%;
        line-height:1.5;
        padding:0px 0 23px
    }
}
.precut .pointCompany .company__map{
    margin:0 auto
}
@media screen and (max-width: 970px){
    .precut .pointCompany .company__map{
        padding:30px
    }
}
.precut .pointCompany .company__mapInner{
    height:0;
    overflow:hidden;
    padding-bottom:75%;
    position:relative;
    width:500px
}
@media screen and (max-width: 970px){
    .precut .pointCompany .company__mapInner{
        width:300px
    }
}
.precut .pointCompany .company__mapInner iframe{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%
}
.precut .next{
    background-color:#fef8f8;
    display:flex;
    justify-content:center;
    padding:33px 0 100px
}
.precut .next .next__btn{
    display:flex;
    align-items:center
}
.precut .next .next__more{
    margin-left:20px
}
/* 代表変更に伴う修正 */
 .precut .lowerHero__catch{
     font-size: 2.4rem;
}
 @media screen and (max-width: 970px){
     .precut .lowerHero__catch {
         font-size: 1.5rem;
    }
}
 .serviceCopy {
     margin-bottom: 1em;
     font-family: serif;
     font-size: 3em;
     font-weight: bold;
     text-align: center;
}
 @media screen and (max-width: 780px){
     .serviceCopy {
         font-size: 2em;
         margin-top: 20px;
    }
}