/* all page */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Zen+Old+Mincho&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Noto+Serif+JP:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Zen+Old+Mincho&display=swap');

#wrap {
    background-color:#f4f4f4;
        font-family: "Zen Old Mincho", serif;
}

/* カーソル変更 */
.cursor, .follower{
	border-radius: 50%;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	transition: 0.3s;
	transition-property: opacity,background,width,height,transform
}
.cursor {
	width: 8px;
	height: 8px;
	z-index: 11;
	background-color: #333;
}
.cursor.is-active{
	background-color: var(--color1);
}
.follower {
	width: 40px;
	height: 40px;
	border: solid 1px #333;
}
.follower.is-active{
	transform: scale(1.8,1.8);
	border: solid 1px var(--color1);
}

/* .main_txt.active {
    transform: none;
    opacity: 1;
    filter: none;
} */



.font_serif {
    font-family: "Zen Old Mincho", serif;
  font-style: normal;
}

.en {
      font-family: "Libre Caslon Text", serif!important;
      font-style: italic;
      font-weight: bold;
}


/* #logo {
    width: 160px;
    margin: 0px auto 0px 70px;
} */

#logo2 {
    width: 180px;
}

/*fonts*/

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: var(--color1);text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
#google_privacy a{color: var(--color1);}
:root{
	/*--color1: #4ea9b8;*/
	/*--color2: #b9cd75;*/
	/*--color3: #b9cd75;*/
--color4: #dfdede;
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}

/*.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}*/
/*.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}*/
/*.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}*/
/*.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}*/

/* background-color */
/*.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}*/
/*.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}*/
/*.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}*/
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/

/* border-color ※!important */
/*.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}*/
/*.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}*/
/*.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}*/
.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}


/* header */

#header_contact a.btn_back {height: 82px;}

#header_contact span{top: 50%;transform: translateY(-50%);}

.headfix {
    background-color: #111;
}

#pc_nav li a {
    color: #111;
}

.headfix #pc_nav li a {
    color: #fff!important;
}


/* footer */
footer {
    background-image: url(/Files/img/item29.png)!important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* video用 css */
#vegas{overflow: hidden;height: 100vh!important;max-height: 55vw;}
#header{top: 0;}
header span.after,header span.before{height: 100%!important;}
header span.before {height: 100%!important;left: -350px;}
header span.after {height: 100%!important;right: -350px;}

/* FV */
.main_txt {
    z-index: 1;
    width: 60%;
    max-width: 850px;
    left: 6%;
    bottom: 10%;
}

.fadein{
	transform: translateX(-40px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.fadein.start{transform: translateX(0);opacity: 1;}


/* top ----------------------------------------------------------------*/

.top_main #page-top {
    right: 0;
    bottom: 10px!important;
}

.font_custom01 {
    font-size: clamp(20px, 4vw, 70px);
}

.font_cusom02 {
    font-size: clamp(25px, 3vw, 40px);
    line-height: 1.4;
}

.font_cusom03 {
    font-size: clamp(20px, 2vw, 35px);
}

.img_car02 {
    width: 85%;
    position: absolute;
    left: -31%;
    transform: translateX(-50%);
    /* top: -40%; */
    z-index: 1;
    bottom: -60%;
}

.top_contents {
    background-image: url('/Files/img/bg02.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 150px 0;
}

.top_contents_img {
    width: 80%;
    max-width: 640px;
    margin: 50px auto 20px auto;
}

.top_contents_txt:after {
    position: absolute;
    bottom: -60%;
    content: "";
    width: 1px;
    height: 70px;
    background-color: #fff;
    right: 50%;
}

.top_contents1_subtxt {
    margin-top: 140px;
}

#top_contents1 h3::before {
/*     content: "01"; */
    content: "";
    top: -65px;
    left: -70px;
    background-image: url(/Files/img/item10.png);
    display: inline-block;
    background-position: center;
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
}

#top_contents2 h3::before {
    content: "";
    top: -65px;
    left: -70px;
    background-image: url(/Files/img/item11.png);
    display: inline-block;
    background-position: center;
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* main img */


/* main */

/* intro */
.intro_title {
    width: 60%;
    max-width: 500px;
    top: 3%;
}


/* contents */


/* topcms */
.cms_title {
    text-align: center;
    border-color: #e2e2e2;
    padding-bottom: 10px;
}

.cms_title:after {
    content: "";
    display: block;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2px;
    width: 30%;
    border-bottom: 2px solid var(--color1);
}

.top_cms_sec01 {
    padding-bottom: 300px;
}

.top_cms_sec span.after {
    width: 340px;
    height: 678px;
    position: absolute;
    -webkit-transform: skewX(-26.35deg);
    transform: skewX(-26.35deg);
    right: -200px;
    bottom: 0;
}

.img_car01 {
    width: 55%!important;
    max-width: 550px;
    position: absolute;
    bottom: 0;
    right: 5%;
    z-index: 1;
}

/* under page ----------------------------------------------------------------*/
.btn_container {
        width: 60%;
    margin: 0 auto;
}

#page_title h2 {
    color: #fff;
}

#page-top {
    width: 120px;
}

#cms_7-c {
    padding: 40px;
}


/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    .l-header__toggle{top: 21px!important;}
    
    .top_page #header {
        background-color: #111;
    }

#vegas{overflow: hidden;height: 100vh!important;max-height: 80vw;}

#video {
    top:12%;
}

.video {
    width: 140%!important;
}
    
.img_car02 {
    width: 60%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* top: -40%; */
    z-index: 1;
    bottom: -230px;
}
    
    .top_contents1_subtxt {
        width: 90%!important;
    }
    
    .top_contents {
    background-image: url(/Files/img/bg02.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 80px 0;
}

#top_contents1 h3::before {
    top: -9%;
    left: 50%;
    width: 13vw;
    height: 13vw;
    opacity: 0.7;
}

#top_contents2 h3::before {
    top: -9%;
    left: 50%;
    width: 13vw;
    height: 13vw;
    opacity: 0.7;
}

.top_contents_txt:after {
    bottom: -190%;
}

.cursor, .follower{
    display: none;
}
.cursor {
    display: none;
}

.img_car01 {
    right: 4%;
        bottom: 90px;
}

.top_cms_sec01 {
    padding-bottom: 350px;
}

.top_main #page-top {
        right: 50%;
        transform: translateX(50%);
        bottom: -20px!important;
}



}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
        .l-header__toggle{top: 16px!important;}
    
.img_car02 {
        width: 70%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* top: -40%; */
        z-index: 1;
        bottom: -160px;
    }
    .top_cms_sec01 {
        padding-bottom: 280px;
    }
    
    .intro_title {
        width: 70%;
        top: 3%!important;
    }
    
    #top_contents1 h3::before {
        top: 9%;
    }

    #top_contents2 h3::before {
        top: 9%;
    }
    
    .top_contents {
        padding: 50px 0;
    }
    
    .top_contents1_subtxt {
        margin-top: 70px;
    }
    
    .top_contents_txt:after {
        bottom: -150%;
        height: 50px;
    }
    
    .page_tel {
        padding: 20px!important;
    }

}


.v_type2 .demo_box {padding-top: 70px}
.v_type2 {counter-reset: number 0;}
.v_type2 .cate_box {padding: 50px 20px 30px;}
.v_type2 .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -43px;
    left: -5px;
    z-index: 1;
    font-size: 80px;
    font-weight: 100;
    font-style: italic;
    color: #a67c52;
    background-color: #fff;
    line-height: 1;
    padding: 0 25px 0 0;
}

.link_type2 .cate_box a {
    transform: skewX(-21.35deg)!important;
}

@media screen and (max-width: 667px){
.v_type2 .cate_box{padding: 42px 25px 25px;}
.v_type2 .cate_box:before{top: -31px;font-size: 48px;}
}

.link_type2 .cate_box a {
    color: #fff;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 100%;
    background-color: #c52e3d;
    transition: 0.5s;
	z-index: 3;
}
.link_type2 .cate_box a:hover:after {
    top: 0;
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
	letter-spacing: 3px;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity .8s;
	z-index: 4;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}

@media screen and (max-width: 768px){
.link_type2 .cate_box a {
    transform: none!important;
}


}

/* ---------- 施工事例 ---------- */

.v_type1 .triangle {
    display: block;
    border: #000 solid 2px;
    box-shadow: 5px 5px 0 0 #e2e2e2;
}
.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}
.v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: #000 transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
}