@charset "UTF-8";
/* CSS Document */
#wrapper{
	overflow-x: hidden;
}


video {
  width: 100%;
}
.video-container video:last-of-type{
	display: none;
}
.video-container{
	position: relative;
}
.video-container img{
    position: absolute;
    width: 60px;
    z-index: 9999;
    bottom: 5rem;
    left: 45%;
}
/*ーーーーーフェードインーーーーー*/
.diagonal-right{
	background-image:linear-gradient(-73.5deg, #fff 65rem, #e7e7e7 65rem); 
	position: relative;
	margin-top: -10px;
}
.diagonal-right p{
	margin: 0;
	position: absolute;
	top: 50%;
	right: 0%;
	transform: translate(0, -50%);
	
	font-weight: bold;
	font-size: 30px;
	font-size: 3rem;
	color: #006837;
	line-height: 60px;
	z-index: 2;
}
.diagonal-right img{
	display: block;
	margin-left: auto;
	margin-top: 8rem;
}
.diagonal-right div div:first-of-type img{
	width: 35vw;
	margin: 20vh 0 0 auto;
}

.diagonal-left img{
	display: block;
	margin-top: 8rem;
	margin-right: 5rem;
}
.diagonal-left{
	background-image:linear-gradient(73.5deg, #fff 65rem, #e7e7e7 65rem); 
	position: relative;
/*
	background-image:-webkit-linear-gradient(-45deg, #fff 50%, #e7e7e7 50%);
	background-image:-moz-linear-gradient(-45deg, #fff 50%, #e7e7e7 50%);
	background-image:-ms-linear-gradient(-45deg, #fff 50%, #e7e7e7 50%);
*/
	margin: 5rem 0;
}

/*ーーーーーbannerーーーーー*/
#banner{
	margin: 5rem auto 7rem;
}
#banner a{
	transition: all 0.2s ease-in-out;
}
#banner a:hover{
	opacity: 0.6
}


/*ーーーーーinformationーーーーー*/
#information{
	padding-bottom: 5rem;
}

/* blogfeed */
#blogitembox > div{
	padding-right: 8px;
}
.blogitem {
	background-color: #a2a2a2;
	color: #fff;
	margin: 0 5px 15px 5px;
	overflow: hidden;
	border-radius: 5px;
	text-align: left;
	width: 100%;
	pointer-events: none;
}
.blogitem a{
	color: #fff;
	pointer-events: auto;
}
.blogitem:hover{
	background-color: #006837;
}
.trim {
    overflow: hidden;
    /*width: 190px; トリミングしたい枠の幅 */
    position: relative;
}
/* 画像の縦と横、大きいほうに合わせてリサイズ */
.trim img { 
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*max-width: 100%;
  max-height: 100%;*/
  width: 100%;
  height: auto;
}
.blogdate {
	margin: 5px 0 0	0;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: right;
}
.blogtitle {
	margin-top: 10px;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 20px;
	line-height: 2rem;
	text-align: justify;
}
.floatright .blogtitle {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #FFFFFF;
	display: block;
}
.blogitem .text {
	margin-top: 5px;
	text-align: justify;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 20px;
	line-height: 2rem;
	padding-left: 0;
}

.insta a{
	display: block;
	background: -webkit-linear-gradient(bottom left, #fed97c 0%, #f8722e 25%, #da2e7d 50%, #ba32a9 75%, #4c65d4 100%);
	background: -o-linear-gradient(bottom left, #fed97c 0%, #f8722e 25%, #da2e7d 50%, #ba32a9 75%, #4c65d4 100%);
	background: linear-gradient(to top right, #fed97c 0%, #f8722e 25%, #da2e7d 50%, #ba32a9 75%, #4c65d4 100%);
	border-radius: 15px;
	color: #Fff;
	font-weight: bold;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.3;
	padding: 1rem 2rem 2rem 2rem;
}
.insta span{
	font-size: 400%;
}
/*ーーーーー３つの強みーーーーー*/
#strengths{
	padding: 6rem 0;
}
#strengths img{
	width: 100%;
}
#strengths .row{
	border-bottom: 1px solid #006837;
	padding: 3rem 0;
}
#strengths .row:last-of-type{
	border-bottom: none;
}
#strengths dl dt{
	color: #006837;
	font-size: 23px;
	font-size: 2.3rem;
	letter-spacing: 1px;
	margin-bottom: 25px;
	line-height: 30px;
}
#strengths button{
	border: none;
	display: block;
	margin: 5px 0 0 auto;
	padding: 0;
}
#strengths button a{
	background-color: #000000;
	color: #FFF;
	font-weight: bold;
	font-size: 15px;
	font-size: 1.5rem;
	border-radius: 5px;
	padding: 4px 25px;
}
#strengths button a:hover{
	background-color: #006837;
}

/*ーーーーー各ページボタンーーーーーー*/
#eachlink ul li {
	text-align: center;
}
#eachlink ul li a{
	color: #006837;
	font-size: 3rem;
	font-size: 30px;
	font-weight: bold;
	display: block;
	padding-top: 90px;
	letter-spacing: 1px;
	border: solid #FFF 2px;
}
#eachlink ul li a span{
	font-size: 65%;
	font-weight: 400;
}
#eachlink ul li:first-of-type a{
	background: url("../img/top-button-profile.png");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	height: 240px;
}
#eachlink ul li:nth-child(2) a{
	background: url("../img/top-button-business.png");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	height: 240px;
}
#eachlink ul li:nth-child(3) a{
	background: url("../img/top-button-trucks.png");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	height: 240px;
}
#eachlink ul li:nth-child(4) a{
	background: url("../img/top-button-safety.png");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	height: 240px;
}
#eachlink ul li:nth-child(5) a{
	background: url("../img/top-button-gallery.png");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	height: 240px;
}
#eachlink ul li:nth-child(6) a{
	background: url("../img/top-button-recruit.png");
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	height: 240px;
}
#eachlink ul li:nth-child(2),
#eachlink ul li:nth-child(4){
	padding-right: 0;
}
#eachlink ul li:nth-child(3),
#eachlink ul li:nth-child(5){
	padding-left: 0;
}

#eachlink ul li a:hover{
	color: #FFF;
}
#eachlink ul li:first-of-type a:hover{
	background: url("../img/top-button-profile-h.png");
    background-position: center center;
}
#eachlink ul li:nth-child(2) a:hover{
	background: url("../img/top-button-business-h.png");
    background-position: center center;
}
#eachlink ul li:nth-child(3) a:hover{
	background: url("../img/top-button-trucks-h.png");
    background-position: center center;
}
#eachlink ul li:nth-child(4) a:hover{
	background: url("../img/top-button-safety-h.png");
    background-position: center center;
}
#eachlink ul li:nth-child(5) a:hover{
	background: url("../img/top-button-gallery-h.png");
    background-position: center center;
}
#eachlink ul li:nth-child(6) a:hover{
	background: url("../img/top-button-recruit-h.png");
    background-position: center center;
}

/* ↓　lg 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 1199px) {
.diagonal-right{
	background-image:linear-gradient(-73.5deg, #fff 50rem, #e7e7e7 50rem); 
	}
.diagonal-left{
	background-image:linear-gradient(73.5deg, #fff 50rem, #e7e7e7 50rem); 
	}
.diagonal-right p,.diagonal-left p{
	font-size: 28px;
	font-size: 2.8rem;
	line-height: 50px;
}
}
/* ↓　md 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 991px) {
.video-container img {
    width: 40px;
	bottom: 2rem;
}	
	
.diagonal-right div div:first-of-type img {
    width: 45vw;
    margin: 10vh 0 0 auto;
}
.diagonal-right{
	background-image:linear-gradient(-73.5deg, #fff 40rem, #e7e7e7 40rem); 
	position: relative;
	}
.diagonal-left{
	background-image:linear-gradient(73.5deg, #fff 40rem, #e7e7e7 40rem); 
	position: relative;
	}
}
/* ↓　sm 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 767px) {
.diagonal-right img,.diagonal-left img{
	width: 100%;
	margin-top: 0;
}
.diagonal-right div div:first-of-type img {
    width: 80vw;
    margin: 5rem auto 0;
}
.diagonal-left{
	background-image:linear-gradient(73.5deg, #fff 60rem, #e7e7e7 60rem); 
	position: static;
	}
.diagonal-right{
	background-image:linear-gradient(-73.5deg, #fff 60rem, #e7e7e7 60rem); 
	position: static;
	}
#strengths dl dt {
    margin-top: 1rem;
}
	
	
#eachlink ul li:first-of-type a,
#eachlink ul li:nth-child(2) a,
#eachlink ul li:nth-child(3) a,
#eachlink ul li:nth-child(4) a,
#eachlink ul li:nth-child(5) a,
#eachlink ul li:nth-child(6) a
{
    height: 150px;
}
#eachlink ul li a {
    padding-top: 45px;
}
}
/* ↓　col 幅以下の時に反映される設定　↓ */
@media only screen and (max-width: 575px) {
.video-container video:first-of-type{
	display: none;
}	
.video-container video:last-of-type{
	display: block;
}	
.diagonal-right img,.diagonal-left img{
	width: 95%;
}
.diagonal-right p,.diagonal-left p{
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 3.5rem;
	margin: 1.5rem 2rem;
	text-align: justify;
}
.diagonal-left{
	background-image:linear-gradient(73.5deg, #fff 35rem, #e7e7e7 35rem); 
	}
.diagonal-right{
	background-image:linear-gradient(-73.5deg, #fff 35rem, #e7e7e7 35rem); 
	}

#strengths dl dt {
    margin-top: 2rem;
}
#eachlink ul li:first-of-type a,
#eachlink ul li:nth-child(2) a,
#eachlink ul li:nth-child(3) a,
#eachlink ul li:nth-child(4) a,
#eachlink ul li:nth-child(5) a,
#eachlink ul li:nth-child(6) a
{
    height: 110px;
}
#eachlink ul li a {
	font-size: 25px;
	font-size: 2.5rem;
    padding-top: 35px;
	line-height: 0.9;
}
	
}