﻿
/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
footer,#top_cms,#main_img .box_img,#main_img .fv_text{position: relative;}
/*リピートなし*/
#top_info .con_box:before,#under_page .under_box:before,#under_page .under_box:after,#main_img .box_img:before,#main_img .fv_text,#main_img .fv_text:before,#main_img .fv_text:after,#sp_nav:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

#main_img .box_img:before{
background-color: #050514;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
opacity: 0.3;
}
#main_img .fv_text:before{
    background-image: url(./Dup/img/paint1.png);
    width: 42px;
    height: 42px;
    top:50%;
	left: -15px;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
    z-index: -1;
}
#main_img .fv_text:after{
    background-image: url(./Dup/img/paint2.png);
    width: 80px;
    height: 70px;
    top: 46%;
    right: -65px;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
#sp_nav:before,
#top_info .con_box:before{
background-image: url(./Dup/img/obj7.png);
background-color: transparent;
background-size: 100%;
width: 125px;
height: 165px;
top: auto;
bottom: 0;
left: auto;
right: -42px;
transform: rotate(0deg);
}
#sp_nav:before{
    width: 7vw;
    height: 9vw;
    bottom: 20px;
    right: 24%;
    z-index: 1;
}

#under_page .under_box:before{
background-image: url(./Dup/img/obj5.png);
background-size: 100%;
width: 180px;
height: 135px;
top: -55px;
left: 0;
pointer-events: none;
}
#under_page .under_box:after{
background-image: url(./Dup/img/obj6.png);
background-size: 100%;
width: 120px;
height: 190px;
bottom: 0;
right: 0;
pointer-events: none;
}

/*リピートあり*/
footer:before,
#top_cms:before,#top_cms:after,
#contents2:after,#contents3:after,#page_title:before{
content: "";
display: block;
position: absolute;
}

footer:before,#top_cms:before,#contents3:after{
background-image: url(./Dup/img/border.png);
background-size: 500px;
width: 105%;
height: 15px;
top: -2px;
left: 0;
z-index: 2;
}
#contents3.con1_none:after{display:none;}


#top_cms:after,#contents2:after,#page_title:before{
background-image: url(./Dup/img/border.png);
background-size: 500px;
width: 105%;
height: 15px;
bottom: -2px;
left: 0;
transform: scale(1, -1);
z-index: 1;
}
/*--------------------------------
全体
--------------------------------*/
#loading .gauge.bg_color1{background-color: #e9e7e4;}
#loading img.width_300-max{max-width: 400px;}
#wrap.bg_color1{background-color: white;background-image: url(./Dup/img/bg.jpg);background-size: 30%;overflow: hidden;}

#header{padding-top: 20px;}
h1 img{max-width: 200px;box-sizing: border-box;}
#sp_nav nav,#top_info .con_box,#under_page .under_box{
    /*background: linear-gradient(135deg, rgba(50,50,40,0.9), rgba(50,50,40,0.9)), url("Dup/img/bg2.jpg");*/
    background: linear-gradient(135deg, rgba(77,60,35,0.6), rgba(77,60,35,0.6)), url("Dup/img/bg2.jpg");
}

.footer_logo.width_200-max{max-width: 350px;}

.more a::before{
border-top: solid 1px #dcdfcb;
border-right: solid 1px #dcdfcb;
}
.more a::after{
border-bottom: solid 1px #dcdfcb;
border-left: solid 1px #dcdfcb;
}
.more a:hover{background-color: rgba(220,225,205,0.1);}
/*--------------------------------
TOP
--------------------------------*/
header.height100vh,#main_img,.swiper-container,.swiper-slide{
    height: 810px!important;
    box-sizing: border-box;
}
/*.swiper-slide{width: 600px!important;}*/

/*.swiper-slide{height: 39vw!important;}*/
header.height100vh{position: relative;}
header .scroll_d{display: none;}

#pc_nav{z-index: 3;}

.swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-slide{
    /*margin-right: 3%;*/
    opacity: 1;
    overflow: hidden;
}
/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}
/* aspect-ratio */
.rectangle_box{
	aspect-ratio: 0.5;
}
.con_title{font-size: calc(1rem + 20px);}
.con_txt{font-size: 1rem;}
#main_img .fv_text{
    color: #ffffff;
    background-color: #323228;
    text-align: center;
    line-height: 1.2;
    padding: 5px 20px;
    font-size: 24px;
    bottom: 125px;
    left: 50%;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: 2;
}
#main_img,.top main,#contents2{margin-top:100px;}
#contents2 .con_box::before,#contents3 .con_box::before{display: none;}
#contents2:before{
    background: -moz-linear-gradient(left, rgba(0,0,0,0.1), rgba(50,50,40,0.8));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.1), rgba(50,50,40,0.8));
    background: linear-gradient(to right,  rgba(0,0,0,0.1), rgba(50,50,40,0.8));
display:block;
content: "";
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#contents2 .d_flex, #contents3 .d_flex{min-height: 100vh;}
#contents3:before{
    background: -moz-linear-gradient(left, rgba(50,50,40,0.8), rgba(0,0,0,0.1));
    background: -webkit-linear-gradient(left,  rgba(50,50,40,0.8), rgba(0,0,0,0.1));
    background: linear-gradient(to right,  rgba(50,50,40,0.8), rgba(0,0,0,0.1));
display:block;
content: "";
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#contents2 .con_box,#contents3 .con_box{
    background: -moz-transparent;
    background: -webkit-transparent;
    background: transparent;
z-index: 1;
}
#contents3 :is(.con_title,.con_txt){
    position: relative;
	z-index: 1;
}
#contents3 .con_title{
    font-size: 6vw;
    line-height: 1;
}
#contents3 .con_txt{font-size:3vw;}

#contents4 a.top{
width: 33.333%;
height: 20vw;
}
#contents4 a.bottom{
width: 50%;
height: 25vw;
}
#contents4 a:hover figure{
-webkit-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
transform-origin: center
}
#contents4 a .con_txt::before{
height: 5vw;
top: -4vw;
}


#top_cms{background-color: #e4ebf1;}
#top_cms .cms_title::before{background-color: #003764;}

/*--------------------------------
下層
--------------------------------*/
#page_title.bg_black,footer .con_img.bg_black{background-color: rgba(50,50,40,0.4);}
#under_page .under_box{z-index: 2;color: #fff!important;}
#under_page .under_box .txt_color_nomal{color: #fff!important;}

.cate_list{border-bottom: solid 1px rgba(220,225,205,0.5);;}
.cate_list li a{color: #ffeecf;}
.cate_list li:not(:first-child):not(:nth-child(4n + 1))::before{background-color: rgba(220,225,205,0.5);}

#cms_2-c .box_description2{position: relative;}
#cms_2-c .box_description2:before{
content: "";
display: block;
position: absolute;
}

#cms_2-c .box_description2{padding-left: 40px;}
#cms_2-c .box_description2:before{
background-color: #ffeecf;
width: 30px;
height: 3px;
top: 38px;
left: 0;
}
#cms_2-c .box_description2.none:before{top: 33px;}

.cms_6-a .cate_box, .cms_6-a .cate_box .box_txt1, .cms_6-a .cate_box .box_txt2{
border-color: #cccccc;
word-break: break-all;
}
.cms_6-a .cate_box:first-of-type{border-top: 1px solid #cccccc;}
.cms_6-a .cate_box:last-of-type{border-bottom: 1px solid #cccccc;}

#cms_4-b .cate_title{position: relative;}
#cms_4-b .cate_title:before{
content: "";
display: block;
background-color: #fff;
width: 50px;
height: 1px;
position: absolute;
bottom: 40px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#cms_4-b .cate_box{margin: 0 auto;}

#under_page .info_box .d_flex:first-of-type,.page9 h3{border-color: #dcdfcb;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.contact_tel a{padding-bottom: 24px;}
#tel_txt h3{padding-bottom: 0;}
#tel_txt p{padding-bottom: 15px;}
}

@media  screen and (max-width: 1280px){
#pc_nav{display: none;}
}

/*タブレット用（768px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 768px){
#wrap{padding-top: 100px;}
header.height100vh,#main_img,.swiper-container{height: 48vh!important;}
#header{
top: 0;
background: -moz-rgba(175,175,165,0.8);
background: -webkit-rgba(175,175,165,0.8);
background: rgba(175,175,165,0.8);
padding-top: 0;
}
h1 img{max-width: 100px;}

header.height100vh,#main_img,.swiper-container,.swiper-slide{height: 600px!important;}
/*工場・設備・プラント*/
/*
#main_img :is(.box_img:nth-of-type(1),.box_img:nth-of-type(5)) .fv_text{
    width: 260px;
}
*/
/*大規模修繕工事*/
/*
#main_img :is(.box_img:nth-of-type(2),.box_img:nth-of-type(6)) .fv_text{
    width: 180px;
}
*/
/*住宅塗装工事*/
/*
#main_img :is(.box_img:nth-of-type(3),.box_img:nth-of-type(7)) .fv_text{
    width: 160px;
}
*/
/*防水工事*/
/*
#main_img :is(.box_img:nth-of-type(4),.box_img:nth-of-type(8)) .fv_text{
    width: 110px;
}
*/
#main_img .fv_text1{/*住宅塗装工事*/
    width: 160px;
}
#main_img .fv_text2{/*防水工事*/
    width: 110px;
}
#main_img .fv_text3{/*工場・設備・プラント*/
    width: 260px;
}
#main_img .fv_text4{/*大規模修繕工事*/
    width: 180px;
}

#contents2 .d_flex{min-height: 60vh;}
#contents3,#contents3 .d_flex{min-height: 550px;}
#contents4 a.top,
#contents4 a.bottom{
width: 100%;
height: 300px;
}

#page_title .page_title_box{top: 100px;}
#under_page .under_box:before{
width: 150px;
height: 115px;
top: -80px;
}
#under_page .under_box:after{
width: 85px;
height: 130px;
}
}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){
#loading img.width_300-max{max-width: 300px;}
#wrap{padding-top: 70px;}


header .menu_stick{width: 30px;top: 25px;right: 25px;}
#header{height: 70px;padding-top: 3px;padding-bottom: 0px;}
h1 img{max-width: 70px;}

.footer_logo.width_200-max{max-width: 300px;}

#main_img, .top main, #contents2{margin-top:50px;}

header.height100vh,#main_img,.swiper-container,.swiper-slide{height: 350px!important;}

#main_img .box_img .fv_text{
    font-size: 16px;
    padding: 3px 5px;
    bottom: 65px;
}
/*工場・設備・プラント*/
/*
#main_img :is(.box_img:nth-of-type(1),.box_img:nth-of-type(5)) .fv_text{
    width: 150px;
    padding:3px 0;
    letter-spacing: -1.5px;
}
*/
/*大規模修繕工事*/
/*
#main_img :is(.box_img:nth-of-type(2),.box_img:nth-of-type(6)) .fv_text{
    width: 140px;
}
*/
/*住宅塗装工事*/
/*
#main_img :is(.box_img:nth-of-type(3),.box_img:nth-of-type(7)) .fv_text{
    width: 120px;
}
*/
/*防水工事*/
/*
#main_img :is(.box_img:nth-of-type(4),.box_img:nth-of-type(8)) .fv_text{
    width: 90px;
}
*/
#main_img .fv_text1{/*住宅塗装工事*/
    width: 120px;
}
#main_img .fv_text2{/*防水工事*/
    width: 90px;
}
#main_img .fv_text3{/*工場・設備・プラント*/
    width: 150px;
    padding:3px 0;
    letter-spacing: -1.5px;
}
#main_img .fv_text4{/*大規模修繕工事*/
    width: 140px;
}

#main_img .fv_text:before{
    width: 29px;
    height: 29px;
	left: -12px;
}
#main_img .fv_text:after{
    width: 50px;
    height: 43.75px;
    top: 46%;
    right: -45px;
}
#top_info .con_box{
    width: 95% !important;
    padding-left: 15px;
}
#top_info .con_box:before {
    background-size: 100%;
    width: 90px;
    height: 118px;
    bottom: 0;
    right: -30px;
}
#sp_nav:before{
    width: 70px;
    height: 92px;
    bottom: 0;
    right: -15px;
}
.con_title{font-size: calc(1rem + 8px);}

#contents3,#contents3 .d_flex{min-height: 275px;}
#contents3 .con_txt{font-size:3.5vw;}

#contents4 a.top,
#contents4 a.bottom{
height: 200px;
margin-bottom: 0;
}


#page_title{height: 200px;}
#page_title .page_title_box{top: 55px;}
#under_page .under_box:before{
width: 120px;
height: 90px;
top: -55px;
left: 0;
}
#under_page .under_box:after{
    width: 60px;
    height: 95px;
}
#under_page .under_box.page9{padding-bottom: 55px;}
#cms_2-c .box_description2{padding-left: 30px;}
#cms_2-c .box_description2:before{
width: 20px;
top: 31px;
left: 0;
}
#cms_2-c .box_description2.none:before{top: 29px;}
}

/*--------------------------自動リンク--------------------------*/
/* color */
.linkStyle{color: #82c8ff; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #82c8ff;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #003764;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------カラー--------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #fff!important;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #323228;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #ffeecf;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #333333;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #e6e6e6;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #323228;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #dcdfcb;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #333333;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #e6e6e6;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #323228;}
.border_color2,.hvr_border_color2:hover{border-color: #dcdfcb;}
.border_color3,.hvr_border_color3:hover{border-color: #333333;}
.border_color4,.hvr_border_color4:hover{border-color: #e6e6e6;}