@charset "utf-8";

/* blog
---------------------------------------------------*/
#contents{
    margin-top:125px;
}

#contents #leftArea{
    padding:20px 30px 40px 30px;
    box-sizing:border-box;
}

#contents #leftArea h1{
    font-size:40px;
    font-weight:bold;
    padding-left:50px;
    border-bottom:1px solid #e0e0e0;
    background: url(../img/blog/h1_circle01.png) no-repeat 10px 10px;
    line-height:1.2;
    padding-bottom:5px;
}

#contents #leftArea .consulting h1{
    background-image: url(../img/blog/h1_circle01.png);
}

#contents #leftArea .machining h1{
    background-image: url(../img/blog/h1_circle02.png);
}

#contents #leftArea .welding h1{
    background-image: url(../img/blog/h1_circle03.png);
}

#contents #leftArea .surface-treatment h1{
    background-image: url(../img/blog/h1_circle04.png);
}

#contents #leftArea .material h1{
    background-image: url(../img/blog/h1_circle05.png);
}

#contents #leftArea .example h1{
    background-image: url(../img/blog/h1_circle06.png);
}

#contents #leftArea .artisan h1{
    background-image: url(../img/blog/h1_circle07.png);
}

#contents #leftArea .anatomy h1{
    background-image: url(../img/blog/h1_circle08.png);
}

#contents #leftArea .voice h1{
    background-image: url(../img/blog/h1_circle09.png);
}

#contents #leftArea h2{
    font-size:30px;
    font-weight:bold;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

#contents #leftArea h3{
    font-size:24px;
    font-weight:bold;
}


#contents #leftArea h1.main{
    background: none;
    padding-left:0;
}


#contents #leftArea .hokudaiContact{
	text-align:center;
    margin-top: 30px;
}

@media only screen and (max-width:767px) {
body:before{
    content:"";
    width:100%;
    height:100%;
    z-index:-1;
    position:fixed;
    display:block;
    background:url(../img/common/bg_contents_sp.jpg) no-repeat center top #e2dacf;
    background-size:205% auto;
    left:0;
    top:0;
}

#contents{
    margin-top:125px;
}

#contents #leftArea{
    padding:15px 10px;
}

#contents #leftArea h1{
    font-size:24px;
    padding-left:30px;
    background: url(../img/blog/h1_circle01.png) no-repeat 3px 5px;
    background-size:20px 20px;
    padding-bottom:10px;
}

#contents #leftArea .consulting h1{
    background-image: url(../img/blog/h1_circle01.png);
    background-size:20px 20px;
}

#contents #leftArea .machining h1{
    background-image: url(../img/blog/h1_circle02.png);
    background-size:20px 20px;
}

#contents #leftArea .welding h1{
    background-image: url(../img/blog/h1_circle03.png);
    background-size:20px 20px;
}

#contents #leftArea .surface-treatment h1{
    background-image: url(../img/blog/h1_circle04.png);
    background-size:20px 20px;
}

#contents #leftArea .material h1{
    background-image: url(../img/blog/h1_circle05.png);
    background-size:20px 20px;
}

#contents #leftArea .example h1{
    background-image: url(../img/blog/h1_circle06.png);
    background-size:20px 20px;
}

#contents #leftArea .artisan h1{
    background-image: url(../img/blog/h1_circle07.png);
    background-size:20px 20px;
}

#contents #leftArea .anatomy h1{
    background-image: url(../img/blog/h1_circle08.png);
    background-size:20px 20px;
}

#contents #leftArea .voice h1{
    background-image: url(../img/blog/h1_circle09.png);
    background-size:20px 20px;
}

#contents #leftArea h2{
    font-size:20px;
    font-weight:bold;
    margin-bottom: 2px;
    padding-bottom: 2px;
}

#contents #leftArea h3{
    font-size:18px;
}

#contents #leftArea .hokudaiContact{
	text-align:center;
}

#contents #leftArea .hokudaiContact a img {
    width: 73.2%;
    max-width: 500px;
}

}
/* blog-archives & search
---------------------------------------------------*/
#contents #leftArea .archives.search h1{
    padding-left:0;
    background:none;
}

#contents #leftArea .archives .column{
    padding: 20px 0;
}

#contents #leftArea .archives .column > div:last-child{
    margin-bottom:0 !important;
}

#contents #leftArea .archives.category .column > div dl.cate{
    display:none;
}

#contents #leftArea .archives.category .column > div dl.keyword{
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#contents ul.pager {
    clear:both;
    margin-bottom:60px;
}

#contents ul.pager li {
	line-height: normal;
    margin:0 3px;
    display:inline-block;
}

#contents ul.pager li.index span,
#contents ul.pager li.index a {
	color: #fff !important;
	font-weight: bold;
}

#contents ul.pager li.prev,
#contents ul.pager li.next{
    display:none;
}

#contents ul.pager {
    text-align: center;
}

#contents ul.pager li.index span,
#contents ul.pager li.index a {
    height: 40px;
    width: 40px;
    display: inline-block;
    line-height: 40px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
}

#contents ul.pager li.index a {
    background-color: #c3c3c3;
}

#contents ul.pager li.index a:hover,
#contents ul.pager li.index span {
    background-color: #5a4540;
    color:#FFFFFF;
    font-weight:bold;
}

.content-nav{
    display: block;
    text-align: center;
    line-height: 40px;
    font-weight:bold;
    color:#5a4540;
clear:both;
margin-top:20px;
}

.content-nav a{
    background-color: #5a4540;
    height: 40px;
    width: 40px;
    display: inline-block;
    line-height: 40px;
    color: #FFFFFF;
    margin:0 5px;
    text-decoration: none;
    text-align: center;
    overflow: hidden;
}


.content-nav span{
    background-color: #c3c3c3;
    color:#FFFFFF;
    font-weight:bold;
    height: 40px;
    width: 40px;
    display: inline-block;
    margin:0 5px;
    vertical-align: top;
    line-height: 40px;
}

@media only screen and (max-width:767px) {
#contents ul.pager li {
    margin:0 0 20px 0;
}

#contents ul.pager li {
    margin:0 2px;
    font-size:12px;
}

#contents ul.pager li.index span,
#contents ul.pager li.index a {
    height: 30px;
    width: 30px;
    line-height: 30px;
}

.content-nav{
    line-height: 30px;
}

.content-nav a,
.content-nav span{
    font-size:12px;
    height: 30px;
    width: 30px;
    margin:0 2px;
    line-height: 30px;
}


}
/* blog-post
---------------------------------------------------*/
#contents #leftArea .sns{
    display:block;
    text-align:right;
    margin-bottom:5px;
    line-height: 1;
}

#contents #leftArea .sns li{
    display:inline-block;
    margin:0 0 0 10px;
}

#contents #leftArea .sns li span{
    verticlal-align:top !important;
}

#contents #leftArea .post p.data{
    text-align:right;
    color:#888888;
}

#contents #leftArea .pageType dl{
    min-height:30px;
    overflow:hidden;
    display:inline-block;
    margin-right:30px;
}

#contents #leftArea .pageType dl dt{
    font-weight:bold;
    margin-right:10px;
    display:inline-block;
    line-height:30px;
}

#contents #leftArea .pageType dl dd{
    display:inline-block;
    margin-top:5px;
}

#contents #leftArea .pageType dl.cate dt:before{
    content:"";
    display:inline-block;
    width:30px;
    height:30px;
    background:url(../img/common/icn_category.png) no-repeat center center #5a453f;
    background-size:20px auto;
    margin-right:10px;
    float:left;
}

#contents #leftArea .pageType dl.cate dd{
    color:#FFFFFF;
    padding:2px 7px;
}

/*#contents #leftArea .method .pageType dl.cate dd{
    background:#3aafb0;
}*/

#contents #leftArea .consulting .pageType dl.cate dd{
    background:#276cb9;
}

#contents #leftArea .machining .pageType dl.cate dd{
    background:#3aafb0;
}

#contents #leftArea .welding .pageType dl.cate dd{
    background:#ebc323;
}

#contents #leftArea .surface-treatment .pageType dl.cate dd{
    background:#2acb7a;
}

#contents #leftArea .material .pageType dl.cate dd{
    background:#9b3ab0;
}

#contents #leftArea .example .pageType dl.cate dd{
    background:#eb8123;
}

#contents #leftArea .artisan .pageType dl.cate dd{
    background:#fa4f80;
}

#contents #leftArea .anatomy .pageType dl.cate dd{
    background:#beeb23;
}

#contents #leftArea .solution .pageType dl.cate dd{
    background:#eb5723;
}

#contents #leftArea .pageType dl.keyword dt:before{
    content:"";
    display:inline-block;
    width:30px;
    height:30px;
    background:url(../img/common/icn_keyword.png) no-repeat center 6px #5a453f;
    background-size:20px auto;
    margin-right:5px;
    float:left;
}

#contents #leftArea .pageType dl.keyword dd{
    background:#eaeaea;
    padding:2px 7px;
    margin-right:5px;
}

#contents #leftArea .picArea{
    margin:40px auto;
    width:640px;
}

#contents #leftArea .picArea ul.thumb-item{
    margin-bottom:20px;
}

#contents #leftArea .picArea ul.thumb-item li{
    position:relative;
}

#contents #leftArea .picArea ul.thumb-item li:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border:10px solid #fff;
    box-sizing:border-box;
    opacity:0.5;
    position:absolute;
    left:0;
    top:0;    
}

#contents #leftArea .picArea ul.thumb-item-nav li{
    margin:0 10px;
    display:inline-block;
    position:relative;
}

#contents #leftArea .picArea ul.thumb-item-nav li:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border:5px solid #fff;
    box-sizing:border-box;
    opacity:0.5;
    position:absolute;
    left:0;
    top:0;    
}

#contents #leftArea .picArea  ul.thumb-item-nav li img{
    width:100%;
    height:auto;
}

#contents #leftArea .picArea .slick-prev, 
#contents #leftArea .picArea .slick-next {
    display:none !important;
}

#contents #leftArea .txtArea{
    letter-spacing: 0.5px;
    font-size:18px;
}

#contents #leftArea .txtArea p{
    margin-bottom:10px;
}

#contents #leftArea .txtArea .imgBl_full{
    margin:30px 0;
    text-align:center;
}

#contents #leftArea .txtArea .imgBl{
    margin:30px 0;
}

#contents #leftArea .txtArea .imgBl p{
    margin-bottom:0;
}

#contents #leftArea .txtArea .imgBl.full{
    text-align:center;
}

#contents #leftArea .txtArea .imgBl_full img,
#contents #leftArea .txtArea .imgBl.full img{
    max-width:100%;
}

#contents #leftArea .txtArea .imgBl.half{
    overflow:hidden;
}

#contents #leftArea .txtArea .imgBl.half .floatL{
    width:390px;
    margin-right:20px;
    float:left;
}

#contents #leftArea .txtArea .imgBl.half .floatR{
    width:390px;
    margin-left:20px;
    float:right;
}

#contents #leftArea .txtArea .imgBl.half .floatL img,
#contents #leftArea .txtArea .imgBl.half .floatR img{
    width:100%;
    height:auto;
}

#contents #leftArea .txtArea ul{
    margin-bottom:20px;
}

#contents #leftArea .txtArea ul li{
    padding-left:1rem;
    text-indent:-1rem;
}

#contents #leftArea .txtArea ul li + li{
    margin-top:5px;
}

#contents #leftArea .txtArea ul li:before{
    content:"・";
    color:#000;
    font-weight:bold;
}

#contents #leftArea .txtArea p.link{
    background: #eeeeee;
    padding: 10px 20px;
    margin-bottom:20px;
}

#contents #leftArea .txtArea p.link a{
    font-weight:bold;
    background:url(../img/blog/arrow_right_brown.png) no-repeat left center;
    background-size:8px auto;
    padding-left:18px;
}

#contents #leftArea .txtArea .profileArea{
    background:#eeeeee;
    padding:20px;
    overflow:hidden;
    margin-top:30px;
}

#contents #leftArea .txtArea .profileArea .pic{
    float:left;
}

#contents #leftArea .txtArea .profileArea .txt{
    padding-left: 200px;
    line-height:1.4;
}

#contents #leftArea .txtArea .profileArea .txt p.name{
    font-size:24px;
    margin-bottom:5px;
    font-weight:bold;
}

@media only screen and (max-width:767px) {
#contents #leftArea .sns{
    margin-bottom:3px;
}

#contents #leftArea .sns li{
    margin:0 0 0 5px;
}

#contents #leftArea .post p.data{
    font-size: 12px;
}

#contents #leftArea .pageType dl{
    font-size: 12px;
    display:block;
}

#contents #leftArea .pageType dl dt{
    margin-right:5px;
    line-height:23px;
}

#contents #leftArea .pageType dl dd{
    display:inline-block;
    margin-top:5px;
}

#contents #leftArea .pageType dl.cate dt:before{
    content: "";
    width: 22px;
    height: 22px;
    background: url(../img/common/icn_category.png) no-repeat center center #5a453f;
    background-size: 15px auto;
    margin-right: 5px;
}

#contents #leftArea .pageType dl.cate dd{
    color:#FFFFFF;
    padding:2px 7px;
}

#contents #leftArea .pageType dl.keyword dt:before{
    content: "";
    width: 22px;
    height: 22px;
    background: url(../img/common/icn_keyword.png) no-repeat center 4px #5a453f;
    background-size: 15px auto;
}

#contents #leftArea .pageType dl.keyword dd{
    padding: 1px 5px;
    margin-right: 3px;
}

#contents #leftArea .picArea{
    margin:20px auto;
    width:100%;
}

#contents #leftArea .picArea ul.thumb-item{
    margin-bottom:10px;
}

#contents #leftArea .picArea ul.thumb-item li:after{
    content:"";
    border:5px solid #fff;
}

#contents #leftArea .picArea ul.thumb-item img{
    width:100%;
    height:auto;
}

#contents #leftArea .picArea ul.thumb-item-nav li{
    max-width:149px;
    margin: 0 5px;
}

#contents #leftArea .picArea ul.thumb-item-nav li:after{
    content:"";
    border:3px solid #fff;
}

#contents #leftArea .picArea ul.thumb-item-nav li img{
    width:100%;
    height:auto;
}

#contents #leftArea .txtArea{
    font-size:15px;
}

#contents #leftArea .txtArea p{
    margin-bottom:5px;
}

#contents #leftArea .txtArea .imgBl,
#contents #leftArea .txtArea .imgBl_full{
    margin:20px 0;
}

#contents #leftArea .txtArea .imgBl_full img,
#contents #leftArea .txtArea .imgBl.full img{
    width:100%;
    height:auto;
}

#contents #leftArea .txtArea .imgBl.half{
    overflow:hidden;
}

#contents #leftArea .txtArea .imgBl.half .floatL{
    width:49%;
    margin-right:2%;
}

#contents #leftArea .txtArea .imgBl.half .floatR{
    width:49%;
    margin-left:2%;
}

#contents #leftArea .txtArea .imgBl.half .floatL img,
#contents #leftArea .txtArea .imgBl.half .floatR img{
    width:100%;
    height:auto;
}

#contents #leftArea .txtArea ul{
    margin-bottom:20px;
}

#contents #leftArea .txtArea ul li + li{
    margin-top:3px;
}

#contents #leftArea .txtArea p.link{
    padding: 5px 10px;
    margin-bottom:10px;
}

#contents #leftArea .txtArea p.link a{
    background:url(../img/blog/arrow_right_brown.png) no-repeat left center;
    background-size:6px auto;
    padding-left:15px;
}

#contents #leftArea .txtArea .profileArea{
    padding:15px 10px;
    margin-top:20px;
}

#contents #leftArea .txtArea .profileArea .pic{
    margin:0 10px 10px 0;
}

#contents #leftArea .txtArea .profileArea .pic img{
    width:100px;
}

#contents #leftArea .txtArea .profileArea .txt{
    padding-left:inherit;
}

#contents #leftArea .txtArea .profileArea .txt p.name{
    font-size: 18px;
    margin-bottom:5px;
}

}