@charset "utf-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css");

/* top
---------------------------------------------------*/
body {
    background:url(../img/common/bg_contents.jpg) no-repeat center 600px #e2dacf;
}

#mainvisual{
	margin: 100px 0 50px 0;
	background:#352820;
}

#mainvisual .slick-slide{
	width: 1200px !important;
	margin: 0 auto;
	overflow: hidden;
	opacity: 0.3;
}

#mainvisual .slick-slide.slick-current{
	opacity: 1;
}

#mainvisual .pic{
	float: left;
	width: 850px;
}

#mainvisual .pic img{
	width: 100%;
	height: auto;
}

#mainvisual .txt{
	font-size:24px;
	color:#fff;
	font-weight: bold;
	padding: 70px 20px;
	width: 310px;
	float: left;

}

#mainvisual .txt p{
	line-height: 36px;
	font-weight: bold;
	padding: 0 0 0 40px;
	background: url(../img/common/circle01.png) no-repeat left 8px;
}


#mainvisual .txt p.machining{
    background:url(../img/common/circle02.png) no-repeat left 8px;
}

#mainvisual .txt p.wekding{
    background:url(../img/common/circle03.png) no-repeat left 8px;
}

#mainvisual .txt p.surface-treatment{
    background:url(../img/common/circle04.png) no-repeat left 8px;
}

#mainvisual .txt p.material{
    background:url(../img/common/circle05.png) no-repeat left 8px;
}

#mainvisual .txt p.example{
    background:url(../img/common/circle06.png) no-repeat left 8px;
}

#mainvisual .txt p.artisan{
    background:url(../img/common/circle07.png) no-repeat left 8px;
}

#mainvisual .txt p.anatomy{
    background:url(../img/common/circle08.png) no-repeat left 8px;
}

#mainvisual .txt p.solution{
    background:url(../img/common/circle09.png);
}

#mainvisual .slick-prev:before,
#mainvisual .slick-next:before{
	display: none;
}

#mainvisual .slick-prev{
	width: 70px;
	height: 70px;
	left: 90px;
	background: url(../img/top/slick_prev.png);
	z-index: 10;
}

#mainvisual .slick-next{
	width: 70px;
	height: 70px;
	right: 90px;
	background: url(../img/top/slick_next.png);
	z-index: 10;
}

#contents .column03{
	overflow: hidden;
	margin-bottom: 60px;
}

#contents .column03 > div{
	background: #fff;
	width:31.65%;
	max-width: 380px;
	float: left;
	margin: 0 0 30px 0;
}

#contents .column03 > div:nth-of-type(2),
#contents .column03 > div:nth-of-type(5),
#contents .column03 > div:nth-of-type(8){
	margin: 0 2.52% 30px 2.52%;
}

#contents .column03 > div img{
	width: 100%;
	height: auto;
}

#contents .column03 i{
	text-align: center;
	display: block;
	padding: 10px 0;
	font-style: normal;
	font-size:20px;
}

#contents #leftArea > div{
    padding:30px;
}

#contents #leftArea .blogContents{
    padding-bottom:0;
	overflow: hidden;
}

#contents #leftArea .siteContents .column > div{
    margin-bottom:0;
}


@media only screen and (max-width:767px) {
body {
    background:url(../img/common/bg_contents.jpg) no-repeat center 600px #e2dacf;
}
	
#mainvisual{
	margin: 50px 0 30px 0;
}

#mainvisual .slick-slide{
	width: auto !important;
	max-width: 100vw;
}

#mainvisual .pic{
	float: inherit;
	width: auto !important;
	display: block;
}

#mainvisual .txt{
	float: inherit;
	width: auto !important;
	font-size:16px;
	padding: 15px 22px!important;
	display: block;
}

#mainvisual .txt p{
	line-height: 24px;
	padding: 0 0 0 20px;
	background: url(../img/common/circle01.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.machining{
    background:url(../img/common/circle02.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.wekding{
    background:url(../img/common/circle03.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.surface-treatment{
    background:url(../img/common/circle04.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.material{
    background:url(../img/common/circle05.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.example{
    background:url(../img/common/circle06.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.artusan{
    background:url(../img/common/circle07.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.anatomy{
    background:url(../img/common/circle08.png) no-repeat left 5px;
	background-size: 15px auto;
}

#mainvisual .txt p.solution{
    background:url(../img/common/circle09.png) no-repeat left 5px;
	background-size: 15px auto;
}

    #contents{
		margin-top:30px !important;
		
   }
	
    #contents .column03{
		margin: 0 15px 10px 15px;
		
    }

    #contents .column03 > div{
        margin-bottom:15px !important;
    }

    #contents .column03 i{
        padding: 5px 0;
		line-height: 12px;
        font-size:10px;
    }

	#contents .column03 > div:nth-of-type(9) i{
        font-size:8px;
    }

	
	#contents #leftArea > div{
        padding:20px;
    }
    
    #contents #leftArea > div + div{
        margin-top:30px;
        padding-bottom:0;
    }

    #contents #leftArea .siteContents{
        margin:0 -15px;
        padding:20px 15px;
    }

    #contents #leftArea .siteContents .column > div{
        width:48%;
        float:left !important;
        margin-bottom:0 !important;
    }

    #contents #leftArea .siteContents .column > div:nth-child(even){
        float:right !important;
    }
    
    #contents #leftArea .siteContents .column > div p.tit {
    font-size: 15px !important;
    }

}