@charset "utf-8";

.contentArea div,
.contentArea ul,
.contentArea li,
.contentArea section,
.contentArea a{margin: 0; padding: 0; box-sizing: border-box;}
.contentArea a{text-decoration: none;}
.contentArea li{list-style: none;}

.contentArea{color: #333333; line-height: 1.4;
font-family: 'Noto Sans Japanese', sans-serif;
}
.contentArea .inner{width: 960px; margin-left: auto; margin-right: auto; position: relative; display: block;}
.contentArea .abs{position: absolute; display: block;}
.contentArea .rel{position: relative; display: block;}

.contentArea .imgRes{max-width: 100%; margin-left: auto; margin-right: auto; display: block;}

.contentArea .flexBlock{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}

.contentArea .anim{
	-webkit-transition: 0.3s ease-out;
	transition:0.3s ease-out;
}


.contentArea .clearBlock:after{
content:"";
display:block;
clear:both;
}

.contentArea .related-video .column-block:hover,
.contentArea section:not(.main-top) a:hover{
	animation-name: push;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
	display: block;
}



@keyframes push {
    50% {
        transform: scale(.96);
    }

    100% {
        transform: scale(1);
    }
}


.contentArea .breadcrumbs{padding: 20px 0 0;}
.contentArea .breadcrumbs li{float: left; font-size: 14px;}
.contentArea .breadcrumbs li a{color: #333333; text-decoration: underline;}
.contentArea .breadcrumbs li a:hover{
	text-decoration: none;
}
.contentArea .breadcrumbs li span{display: inline-block; padding: 0 5px;}
.contentArea .main-top{width: 100%; height: 558px;}
.contentArea .main-top .text-box{width: 570px;}
.contentArea .main-top h2{margin-top: 40px; font-weight: bold; font-size: 65px; margin-bottom: 30px; line-height: 1.2;}
.office .main-top h2,
.retail .main-top h2{margin-top: 70px;}
.contentArea .main-top .sub-text{font-size: 30px; color: #e51e1e; margin-bottom: 20px; font-weight: bold; line-height: 1.2;}
.contentArea .main-top .text{font-size: 16px;}
.contentArea .main-img{top: 0; right: 0;}

.logistics_manufacturing .main-top{background: #e0e4f8;}
.office .main-top{background: #e0f8f2;}
.retail .main-top{background: #f8eee0;}



.contentArea .middle-h3{width: 100%; background-size: auto 100% !important;}
@media screen and (min-width:1500px) {
	.contentArea .middle-h3{background-size: 100% auto!important;}
}
.contentArea .middle-h3 span{height: 200px; line-height: 200px; font-weight: bold; font-size: 30px; text-align: center; color: #ffffff; width: 100%; display: block;}

.logistics_manufacturing .middle-h3{
	background: url("../png/lm_case_main.png") no-repeat center center;
}
.logistics_manufacturing .middle-h3-02{
	background: url("../png/rs_main.png") no-repeat center center;
}

.office .middle-h3{
	background: url("../png/office_case_main.png") no-repeat center center;
}

.retail .middle-h3{
	background: url("../png/retail_case_main.png") no-repeat center center;
}


.contentArea .imgBlock{padding: 100px 0 200px;}
.contentArea .imgBlock .flexBlock{flex-wrap: wrap;}
.contentArea .imgBlock .flexBlock > div:nth-child(1),
.contentArea .imgBlock .flexBlock > div:nth-child(2){margin-bottom: 40px;}
.contentArea .imgBlock .flexBlock .text-block{
	background: rgba(0,0,0,0.6); padding: 20px; box-sizing: border-box;
	bottom: 0; left: 0; width: 100%; color: #ffffff;
}

.contentArea .imgBlock .flexBlock .text-block .title{font-size: 18px; text-align: center; margin-bottom: 15px; font-weight: bold;}
.contentArea .imgBlock .flexBlock .text-block .text{font-size: 15px;}


.contentArea.logistics_manufacturing .imgBlock .flexBlock > div .text-block{min-height: 148px;}
.contentArea.logistics_manufacturing .imgBlock .flexBlock > div:nth-child(3) .text-block,
.contentArea.logistics_manufacturing .imgBlock .flexBlock > div:nth-child(4) .text-block{min-height: 186px;}
.contentArea.office .imgBlock .flexBlock > div .text-block{min-height: 190px;}


.contentArea .column-04{padding: 60px 0 180px;}
.contentArea .column-04 img{margin-bottom: 15px;}
.contentArea .column-04 .column-block{width: 210px;}
.contentArea .column-04 .column-block .title{font-weight: bold; font-size: 18px; height: 80px; border-bottom: 1px dotted #cbcbcb; padding-bottom: 7px;}

.office.contentArea .column-04 .column-block .title{height: 55px;}
.retail.contentArea .column-04 .column-block .title{height: 30px;}

.contentArea .column-04 .column-block .text{font-size: 15px; padding: 10px 0; border-bottom: 1px dotted #cbcbcb;}
.contentArea .column-04 .column-block a{font-size: 18px; background: url("../png/btn_more-3.png") no-repeat left center; padding-left: 20px; color: #333333;
margin-top: 10px; display: block;}

.office .column-04 .flexBlock{justify-content: center;}
.office .column-04 .column-block{
	margin-right: 40px;
}
.office .column-04 .column-block:last-child{margin-right: 0;}


.contentArea .column-03{padding: 60px 0 150px;}
.contentArea .column-03 .column-block{width: 300px;}
.contentArea .column-03 img{margin-bottom: 15px;}
.contentArea .column-03 .column-block .title{height: 48px; font-size: 18px; font-weight: bold; padding-bottom: 7px;}
.contentArea .column-03 .column-block .text{font-size: 15px; height: 80px; border-bottom: 1px dotted #cbcbcb;}
.contentArea .column-block a.pdf{font-size: 18px; background: url("../png/btn_pdf.png") no-repeat left center; padding-left: 29px; color: #333333;
margin-top: 10px; display: block; min-height: 29px; line-height: 29px;}


.contentArea .related-products{
	background: #f8f8f8;
	padding: 100px 0 60px;
}

.contentArea .related-products h3{font-size: 30px; text-align: center; margin-bottom: 30px;}
.contentArea .related-products .flexBlock{justify-content:center;}
.contentArea .related-products .column-block{width: 340px; background: #ffffff;
	box-shadow: 1px 1px 1px #d3d3d3; padding: 0 20px 20px;
}
.contentArea .related-products .column-block:first-child{margin-right: 30px;}
.contentArea .related-products img{margin-bottom: 15px; margin-left: -20px; margin-right: -20px;}
.contentArea .related-products .column-block .title{font-weight: bold; font-size: 18px; padding-bottom: 7px;}
.contentArea .related-products .column-block .text{font-size: 15px; padding: 10px 0; height: 110px; border-bottom: 1px solid #cbcbcb;}
.contentArea .related-products .column-block a{font-size: 18px; background: url("../png/btn_more-3.png") no-repeat left 6px; padding-left: 20px; color: #333333;
margin-top: 10px; display: block;}

.contentArea.office .related-products .column-block:nth-child(2) .text{height: 85px;}

.retail.contentArea .related-products .flexBlock{flex-wrap: wrap;}
.retail.contentArea .related-products .column-block{margin: 0 15px;}
.retail.contentArea .related-products .column-block:nth-child(3),
.retail.contentArea .related-products .column-block:nth-child(4){margin-top: 30px;}


.contentArea .related-video{padding: 0px 0 60px;}
.contentArea .related-video h3{font-size: 30px; text-align: center; margin-bottom: 30px;}
.contentArea .related-video img{margin-bottom: 15px;}
.contentArea .related-video .column-block{cursor: pointer;}
.contentArea .related-video .column-block .title{font-weight: bold; font-size: 18px; padding-bottom: 7px;}


.contentArea .lbbg{position: fixed; top: 0; left: 0; width: 100vw; height: 100vw; z-index: 999; display: none; background: rgba(0,0,0,0.8);}
.contentArea .video_block{position: fixed; z-index: 999; display: none; width: 720px; height: 480px;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}
.contentArea .video_block .movie_inner{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.contentArea .video_block .movie_inner iframe{
	position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


.closeBtn{
  display: inline-block;
  width: 50px;
  height: 50px;
  position: absolute; right: 0; top: -60px;
  cursor: pointer;
}
.closeBtn span:before,
.closeBtn span:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 16%;
  margin: -8% 0 0 -42%;
  background: #ffffff;
}
.closeBtn span::before {
  transform: rotate(-45deg);
}
.closeBtn span::after {
  transform: rotate(45deg);
}