@charset "utf-8";
/*----------------------------------------------------------------------------------------------------------
	スマホ用（～768px）　　HOME【トップページ】のスタイルシート
------------------------------------------------------------------------------------------------------------*/
/*ヘッダー（スマホ）
*************************************************/
.header_home{
	width: 100%;
	height: calc(159vw + 30px);
    max-height: 900px;
	position: relative;
	margin: 0 auto 1.5rem auto;
    background-color: #7196cb;
    z-index: 0;
}
h1.h1_logo_home01{
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
    max-width: 170px;
	margin: 50px 0 0 30px;
}
nav#nav_global_home01 {display: none;}

.ul_header01 {display: none;}


/*メインイメージ（スマホ）
*************************************************/
.mainImg_pc {display: none;}
.mainImg_sp {
    width: 68%;
    max-height: 440px;
	height:inherit;
    position: absolute;
    right:0;
    top: 186px;
	/*bottom:0;*/
    overflow: hidden;
}

.mainImg_sp .bg-slider-sp {
    position: absolute;
    top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-position:center top;
	background-size: cover;
    background-repeat:no-repeat;
}
.decoimg_bird {
    position: absolute;
    top:95px;
    right: 35px;
    width: 80px;
    background-image: url("../image/home/deco_bird01.png");
    background-size: 80px;
    background-repeat: no-repeat;
    min-height: 100px;
}

.decoimg_door {
    position: absolute;
    left: 72px;
    bottom:-30px;
    width: 30%;
}

/*メッセージ（スマホ）
*************************************************/
.headline_01 {
    position: absolute;
    top:156px;
    left:8%;
	font-size: 1rem;
	color: #FFFFFF;
	line-height: 180%;
    writing-mode:vertical-rl;
}

/*本工業について（スマホ）
*************************************************/
#area_home_about01 {
	max-width: 100%;
	margin: 60px auto 3rem auto;
    padding: 60px 0 382px 0;
    background-image: url("../image/common/bg_bokashi_blue.png"), url("../image/home/bk_aboutimg01.png"), url("../image/common/bg_bokashi_orange.png");
	background-size: 250px, 360px, 260px;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: -92px 0, 50% 100%, 200px 50%;
    position: relative;
}

h2.h2_home_about01,
h2.h2_home_business01,
h2.h2_home_works01{
	font-family: "Open Sans", sans-serif;
	font-weight: 800;
	font-size: 2.5rem;
	text-align: center;
	color: #1a1a1a;
	text-shadow: 2px 2px 0px #fff;
	margin: 0 0 2rem 0;
}
h2.h2_home_about01 {margin: 0 0 1rem 0;}

h2.h2_home_business01 .sub,
h2.h2_home_works01 .sub {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 0.9rem;
    display:inline-block;
    padding: 5px 0 5px 18px;
    font-weight: normal;
    background-image: url("../image/common/icn_square01.png");
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 0% 50%;
}


.about_name01 {
    color: #055a8c;
    font-size: 1.1rem;
    text-shadow: 2px 2px 0px #fff;
    text-align: center;
}


/*事業について（スマホ）
*************************************************/
#area_home_business01 {
	max-width: 100%;
	margin: 5rem auto 2rem auto;
}

#area_home_business01 .gradation {
    background-image: linear-gradient(180deg, #c9d1d9 5%, #eee7da 35%, #eee7da 45%, #BEC2C4 95%);
    position: relative;
}

#area_home_business01 .texture {
    background-size: 300px;
    position: relative;
    /*z-index: 12;*/
}

#area_home_business01 .texture:before{
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  background: url("../image/common/bg_texture01.png") repeat 0 0;
  mix-blend-mode:color-burn;
  opacity: 3%;
}

#area_home_business01 .head{
	position: absolute;
	top: -3.5rem;
	width: 100%;
    height: 300px; 
}

ul.ul_home_business01{
position: relative;
padding: 3rem 1rem 3rem 1rem;
}
ul.ul_home_business01 li{
    width: 100%;
    max-width: 340px;
    color: #055a8c;
    margin: 5rem auto 100px auto;
    padding: 1rem 0.5rem;
    height: 260px;
    background-color: #FFF;
    border-radius: 15px;
    box-shadow: 10px 10px 0 0 #6083b6;
    position:relative;
}
ul.ul_home_business01 li a {
    text-decoration: none;
    color: #055a8c; 
    margin: 0;
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    background: url("../image/common/icn_arrow01.svg") no-repeat left 94% top 95%;
    background-size: 26px;
}
ul.ul_home_business01 li:last-child{
    margin: 5rem auto 0 auto;
}
img.b01-icon {
    position: absolute;
    top:-80px;
    left: 25%;
    width: 163px;
}

h3.h3_home_business01 {
    display: inline-block;
    font-size: 1.125rem;
    margin: 0 0 1rem 0;
    padding: 0 50px;
    position: relative;

}
h3.h3_home_business01:before,
h3.h3_home_business01:after{
	content: '';
  position: absolute;
  top: 46%;
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color:#055a8c;
}
h3.h3_home_business01:before{left:0;}
h3.h3_home_business01:after{right: 0;}

.home-text-business {
    margin: 5.75rem 1rem 0 1rem;
    font-size: 0.875rem;
    line-height: 160%;
    
}

/*施工実績（スマホ）
*************************************************/
#area_home_works01 {
	max-width: 100%;
	margin: 0 auto 2rem auto;
    background-color: #FFFFFF;
    position: relative;
}

.box_works_link {
    text-align: center;
	width: 210px;
    margin: 0 auto;
}

.box_works_link a {
    text-decoration: none;
    color: #1a1a1a;
    padding: 0 45px 0 0;
    background: url("../image/common/icn_arrow02.svg") no-repeat left 95% top 40%;
    background-size: 26px;
}
.box_works_link a:hover {color:#6a8ec0;background: url("../image/common/icn_arrow02.svg") no-repeat left 100% top 40%;background-size: 26px;}


#home-works_slide				{width:100%;margin:0 0 3.5rem 0;}
#home-works_slide .carousel		{margin:0;display:flex;}
#home-works_slide .carousel .item{
    width:250px;
    margin:0 15px 1rem 15px;
    overflow: hidden;
    position: relative;
}

.carousel .item img {margin-bottom: 10px;}

.carousel .works-title {font-weight: bold; display: block; }
/*長いタイトル「...」で省略*/
.carousel .works-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}

.carousel .item a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:all .3s;
}
.carousel .works-tag {
    display: inline;
    font-size: 0.8rem;
    border: 1px solid #1a1a1a;
    margin: 0 10px 5px 0;
    padding: 3px 1rem;
    white-space: nowrap;
}





/*-------------------------------------------------------------------------------------------------------------------------------
	タブレット用（768px～）
---------------------------------------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:768px){
/*ヘッダー（タブレット）
*************************************************/
.header_home{
	height: calc(67.8vw); /*+ 120px*/
	max-height: 880px;
	margin: 0 auto 3rem auto;
	position: relative;
}
/*h1.h1_logo_home01{
	width: 224px;
	padding: 50px 0 0 30px;
}
*/
nav#nav_global_home01 {
    display: block;
    position: absolute;
    top:190px;
    left: 30px;
}

.ul_header01 {display: block;}
.ul_header01 li {
    /*height: 46px;
	line-height: 46px;*/
    margin: 10px 0 10px 40px;
    padding-left: 10px;
    position:relative;
}

.ul_header01 li:after{
  content:"";
  position: absolute;
  top: 8px;
  left: -12px;
  width: 10px;
  height:10px;
  background: #FFF;
  /*color: #fff;*/
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);}

.ul_header01 li a{ color: #FFF; text-decoration: none; text-shadow: 1px 1px 0 #003a68;}



/*メインイメージ（タブレット）
*************************************************/
.mainImg_sp {display: none;}
.mainImg_pc {
    display: block;
    width: 57%;
    height:inherit;
    position: absolute;
    top: 0;
	right: 0;
	overflow: hidden;
}

.mainImg_pc .bg-slider-pc {
    position: absolute;
    top: 0;
	right: 0;
	width: 100%;
	height: 100%;
    min-height: 880px;
	background-position:center top;
	background-size: cover;
    background-repeat:no-repeat;
}
.decoimg_bird {
    top:68%;/*460px*/
    left: 20%;
    width: 120px;
    background-size: 120px;
    min-height: 130px;
}

.decoimg_door {
    left: 7%;
    bottom:-80px;
    width: 160px;
}


/*メッセージ（タブレット）
*************************************************/
.headline_01 {
    top:146px;
    left:30%;
	font-size: 1.125rem;
	line-height: 180%;
}

/*本工業について（タブレット）
*************************************************/
#area_home_about01 {
	margin: 60px auto 3rem auto;
    padding: 60px 0 0 0;
    background-image: url("../image/common/bg_bokashi_blue.png"), url("../image/home/bk_aboutimg01.png"), url("../image/common/bg_bokashi_orange.png"), url("../image/home/deco_window02.jpg");
    background-size: 250px, 50%, 260px, 250px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: -92px 0, 110% 10%, 110% 100%, -196px 95%;
}

.box_home_about02 {
    float: left;
    width: 50%;
    margin: 2rem;
}

h2.h2_home_about01,
h2.h2_home_business01,
h2.h2_home_works01{
	text-align: left;
    font-size: 2.5rem;
}
.about_name01 {text-align: left;}
.about_text01 {margin: 1.5rem 0 1rem 1rem;}


/*事業について（タブレット）
*************************************************/
#area_home_business01 {margin: 5rem auto 3rem auto;}
#area_home_business01 .head{
    position: absolute;
    top: -4rem;
    feft:0 !important;
	width: 300px;
    height: 200px; 
}


#area_home_business01 .gradation {
  background-image: linear-gradient(90deg, #c9d1d9 5%, #eee7da 35%, #eee7da 45%, #BEC2C4 95%);
}

/*ul.ul_home_business01{
width: 100%;
margin: 0 auto;
}*/

ul.ul_home_business01 li{
    float: left;
    width: 44%;
    max-width: 340px;
    margin: 5rem 3% 4rem 3%;
    padding: 1rem;
    height: 250px;
}
ul.ul_home_business01 li:nth-child(3){
    clear: left;
    margin: 5rem auto 4rem 28%;
}

img.b01-icon {

    top:-80px;
    left: 25%;
    width: 163px;
}

/*施工実績（タブレット）
*************************************************/
#area_home_works01 {margin: 5rem auto 3rem auto; position: relative;}

/*.box_works_link {
position: absolute;
right:5%;
top:0;
}*/

#home-works_slide .carousel .item{
    width:340px;
    margin:0 15px 1.5rem 15px;
}

.carousel.prev_arrow{
position: absolute;
	z-index: 2;
	left: 24px;
	top: 30%;
	width: 24px;
}
.carousel.next_arrow{
position: absolute;
	z-index: 2;
	right: 24px;
	top: 30%;
	width: 24px;
}

/*お知らせ（タブレット）
*************************************************/


/********/
}












/*-------------------------------------------------------------------------------------------------------------------------------
	PC用（1100px～）
---------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1100px){

/*ヘッダー（PC）
*************************************************/
.header_home{
	/*height: calc(159vw + 30px);*/
    height: 880px;
}
h1.h1_logo_home01{
	width: 228px;
	margin: 62px 0 0 62px;
    padding: 0
}

nav#nav_global_home01 {
    top:220px;
    left: 30px;
}
.ul_header01 li:after{ top: 9px;}
.ul_header01 li a:hover { opacity: 0.6;}


/*メインイメージ（PC）
*************************************************/
.headline_01 {
    top:156px;
    left:34%;
	font-size: 1.5rem;
}

.decoimg_bird {
    top:540px;
    left: 18%;
    width: 128px;
    background-size: 128px;
    min-height: 136px;
}
.decoimg_door {
    left: 8%;
    bottom:-100px;
    width: 200px;
}

/*本工業について（PC）
*************************************************/
#area_home_about01 {
	margin: 70px auto 3rem auto;
    padding: 70px 0 70px 0;
    min-height: 700px;
    background-image: url("../image/common/bg_bokashi_blue.png"), url("../image/home/bk_aboutimg01.png"), url("../image/common/bg_bokashi_orange.png"), url("../image/home/deco_window02.jpg");
    background-size: 250px, 40%, 260px, 250px;
    background-position: -92px 0, 101% 20%, 110% 100%, -196px 95%;
}
.about_text01 {margin: 1.5rem 0 1rem 2rem;}

h2.h2_home_about01,
h2.h2_home_business01,
h2.h2_home_works01{
    font-size: 3.75rem;
}

/*事業について（PC）
*************************************************/
ul.ul_home_business01 li{
    width: 29.3%;
    max-width: 340px;
    margin: 6em 2% 3rem 2%;
    padding: 1rem;
    height: 250px;
}
/*ul.ul_home_business01 li:nth-child(2){margin: 6rem 3% 3rem 0;}*/
ul.ul_home_business01 li:nth-child(3){clear: none; float: left; margin: 6.3rem 2% 3rem 2%;}



/*施工実績（PC）
*************************************************/
#area_home_works01 {}

.box_works_link {
	position: absolute;
right:10%;
top:10%;
}
.carousel.prev_arrow{
	left: 40px;
	top: 30%;
	width: 24px;
}
.carousel.next_arrow{

	right: 40px;
	top: 30%;
	width: 24px;
}
/*お知らせ（PC）
*************************************************/


/********/
}








/*-------------------------------------------------------------------------------------------------------------------------------
	大PC用（1550px～）
---------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1550px){

/********/
}