@charset "UTF-8";

/*---------------------------------------------

Top Page CSS

coded by d-spica at 2017-12-04

---------------------------------------------*/


@import url(default.css);
@import url(base.css);


header.header {
	background: none;
}

.on-scroll header.header {
	background: #373737;
}

header.visual {
	position: relative;
	overflow: hidden;
	min-height: 22rem;
	background: #000;
}

header.visual h1 {
	position: absolute;
	top: 44%;
	left: 0;
	z-index: 1;
	margin-top: -2.25rem;
	padding: 0 10%;
	width: 80%;
	text-align: center;
}

header.visual .nav-play {
	display: none;
}

.smartphone header.visual .nav-play {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	margin: 8rem 0 0 -2rem;
	width: 4rem;
	opacity: 0.8;
}

header.visual .background:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.2) url(../../img/vs-layer.png) repeat 0 0;
	width: 100%;
	height: 100%;
}

header.visual .background video,
header.visual .background iframe,
header.visual .background img {
	max-width: none;
	min-width: 100%;
	min-height: 100%;
	vertical-align: bottom;
}

header.visual .background img {
	display: none;
}

.smartphone header.visual .background:after {
	background: rgba(0,0,0,0.3);
}

.smartphone header.visual .background img {
	display: inline-block;
}

.smartphone header.visual .background video,
.smartphone header.visual .background iframe {
	display: none;
	min-width: 100%;
	min-height: 100%;
	vertical-align: bottom;
}

.smartphone header.visual.on-movie h1,
.smartphone header.visual.on-movie .nav-play,
.smartphone header.visual.on-movie .background:after,
.smartphone header.visual.on-movie .background img {
	display: none;
}

.smartphone header.visual.on-movie .background video,
.smartphone header.visual.on-movie .background iframe {
	display: inline-block;
}

section.recent {
	/*margin-top: -3.45rem;*/
}

section.recent h2 {
	position: relative;
	z-index: 1;
	background: rgba(96,96,96,0.95) url(../img/ar-d-w20.png) no-repeat 50% 100%;
	padding: 1.2rem 1rem;
	text-align: center;
	font-size: 0.9rem;
	color: #FFF;
}

section.recent > div {
	background: #F1F1F1;
	padding: 2rem 1rem;
}

section.recent div div {
	overflow: hidden;
	margin: 0 auto;
	max-width: 46rem;
}

section.recent ul {
	float: left;
	width: 49em;
	line-height: 1.333;
	font-weight: 700;
}

section.recent li {
	position: relative;
	margin-bottom: 0.5rem;
	padding-left: 6.5rem;
}

section.recent li span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

section.recent li span:before {
	content: '';
	display: inline-block;
	margin-right: 0.5rem;
	background: #000;
	width: 1.5rem;
	height: 0.1rem;
	vertical-align: 0.2rem;
}

section.recent p.nav-more {
	position: relative;
	float: right;
	background: #555;
	padding: 0.85em 0;
	width: 15em;
	text-align: center;
	color: #FFF;
	font-size: 100%;
	cursor: pointer;
	transition: .3s;
}

section.recent p.nav-more:hover {
	opacity: 0.7;
}

section.recent p.nav-more:after {
	content: '';
	position: absolute;
	top: 1.25em;
	right: 1.7em;
	border: solid #FFF;
	border-width: 0 2px 2px 0;
	width: 0.6em;
	height: 0.6em;
	transform: rotate(-135deg);
}

section.recent p.nav-more.close:after {
	top: 0.85em;
	transform: rotate(45deg);
}


section.info {
	/*margin-top: -3.45rem;*/
	margin-top: -7.20rem;
}

section.info h2 {
	position: relative;
	z-index: 1;
	background: rgba(60,148,70,0.90) /*url(../img/ar-d-w20.png) no-repeat 50% 100%*/;
	padding: 1.2rem 1rem;
	text-align: center;
	/*font-size: 0.9rem;*/
	font-size: 1.7em;
	font-weight: bold;
	color: #FFF;
}

section.info > div {
	background: #F1F1F1;
	padding: 2rem 1rem;
}

section.info div div {
	overflow: hidden;
	margin: 0 auto;
	max-width: 46rem;
}

section.info ul {
	float: left;
	width: 49em;
	line-height: 1.333;
	font-weight: 700;
}

section.info li {
	position: relative;
	margin-bottom: 0.5rem;
	padding-left: 6.5rem;
}

section.info li span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

section.info li span:before {
	content: '';
	display: inline-block;
	margin-right: 0.5rem;
	background: #000;
	width: 1.5rem;
	height: 0.1rem;
	vertical-align: 0.2rem;
}

section.info p.nav-more {
	position: relative;
	float: right;
	background: #555;
	padding: 0.85em 0;
	width: 15em;
	text-align: center;
	color: #FFF;
	font-size: 100%;
	cursor: pointer;
	transition: .3s;
}

section.recent2 p.nav-more:hover {
	opacity: 0.7;
}

section.recent2 p.nav-more:after {
	content: '';
	position: absolute;
	top: 1.25em;
	right: 1.7em;
	border: solid #FFF;
	border-width: 0 2px 2px 0;
	width: 0.6em;
	height: 0.6em;
	transform: rotate(-135deg);
}

section.recent2 p.nav-more.close:after {
	top: 0.85em;
	transform: rotate(45deg);
}





section.company,
section.business,
section.works{
	margin-bottom: 3rem;
}
section.csr{
	margin-bottom: 3rem;
}

section.company h2,
section.works h2,
section.training h2,
section.csr h2 {
	padding: 4rem 1rem 2rem;
	text-align: center;
	font-size: 1.7rem;
}
section.csr h2 {
	color: #ffffff;
}
section.company p.summary,
section.works p.summary,
section.training p.summary,
section.csr p.summary{
	margin: 0 auto;
	padding-bottom: 3rem;
	max-width: 40rem;
	text-align: center;
	line-height: 1.7;
	font-size: 114%;
}
section.csr p.summary{
	color: #ffffff;
}
/*section.company div {
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 55rem;
}*/
/*20210315変更*/
section.company div {
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 40rem;
}
/*20210315変更ここまで*/
section.company ul {
	overflow: hidden;
	line-height: 1.5;
}
/*
section.company li {
	float: left;
	margin-left: 1%;
	margin-bottom: 2em;
	width: 19.2%;
	text-align: center;
}*/
/*20210315変更*/
section.company li {
	float: left;
	margin-left: 1%;
	margin-bottom: 2em;
	width: 32%;
	text-align: center;
}
/*20210315変更ここまで*/
section.company li:nth-child(1) {
	margin-left: 0;
}

section.company li a:hover {
	opacity: 1;
}

section.company li span {
	display: block;
	position: relative;
	margin-bottom: 1em;
}

section.company li span img {
	width: 100%;
}

section.company li span i {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgba(128,128,128,0.95);
	width: 2.8em;
	height: 2.8em;
	text-indent: -9999em;
}

section.company li a:hover span i {
	background: #3A9735;
}

section.company li span i:after {
	content: '';
	display: block;
	position: absolute;
	top: 0.9em;
	left: 0.8em;
	width: 0.8em;
	height: 0.8em;
	border: solid #FFF;
	border-width: 1px 1px 0 0;
	transform: rotate(45deg);
}

section.company li em {
	display: block;
	height: 3em;
}

section.business {
	overflow: hidden;
}

section.business ul {
	line-height: 1.7;
	font-size: 100%;
	color: #FFF;
}

section.business li {
	position: relative;
	margin-bottom: 2px;
}

section.business li:nth-child(2n+1) p:first-child {
	margin-left: 50%;
}

section.business li p {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	width: 50%;
}

section.business li p:last-child {
	position: absolute;
	top: 0;
	max-height: 100%;
	height: 40rem;
}

section.business li:nth-child(2n+1) p:last-child {
	left: 0;
}

section.business li:nth-child(2n) p:last-child {
	right: 0;
}

section.business li:nth-child(1) p:first-child {
	background-image: url(../../img/bs-railway-bg.jpg);
}

section.business li:nth-child(1) p:last-child {
	background-image: url(../../img/bs-railway-ph.jpg);
}

section.business li:nth-child(2) p:first-child {
	background-image: url(../../img/bs-telecommunication-bg.jpg);
}

section.business li:nth-child(2) p:last-child {
	background-image: url(../../img/bs-telecommunication-ph.jpg);
}

section.business li:nth-child(3) p:first-child {
	background-image: url(../../img/bs-general-bg.jpg);
}

section.business li:nth-child(3) p:last-child {
	background-image: url(../../img/bs-general-ph.jpg);
}

section.business li:nth-child(4) p:first-child {
	background-image: url(../../img/bs-technology-bg.jpg);
}

section.business li:nth-child(4) p:last-child {
	background-image: url(../../img/bs-technology-ph.jpg);
}

section.business li:nth-child(5) p:first-child {
	background-image: url(../../img/bs-leasemanagement-pg.jpg);
}

section.business li:nth-child(5) p:last-child {
	background-image: url(../../img/bs-leasemanagement-ph.jpg);
}

section.business p span {
	display: block;
	padding: 5rem 0;
	max-width: 37rem;
}

section.business li:nth-child(2n) p span {
	margin-left: auto;
}

section.business p em {
	display: block;
	margin: 0 10% 4%;
	font-size: 185%;
}

section.business p i {
	display: block;
	margin: 0 10% 4%;
	height: 5.1em;
}

section.business p a {
	display: block;
	margin: 0 10%;
	border: solid 1px;
	padding: 0.7em 1em;
	width: 13em;
	text-align: center;
}

section.business p a:hover {
	border-color: #FFF;
	background: #FFF;
	color: #111;
	opacity: 1;
	cursor: default;
}

section.business p a.no-link {
	border-color: inherit;
	background: inherit;
	color: inherit;
}




/*20211225追加*/
section.csr {
	background-color: #fbb56a;
	padding-bottom: 60px;
}
section.csr div {
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 40rem;
}
section.csr div:last-child {
	margin: 0 auto;
	padding: 0 1rem 0.01rem;
	max-width: 55rem;
}
section.csr ul {
	overflow: hidden;
	line-height: 1.5;
}
section.csr li {
	float: left;
	margin-left: 1%;
	margin-bottom: 2em;
	width: 32%;
	text-align: center;
}
section.csr li:nth-child(1) {
	margin-left: 0;
}
section.csr li a:hover {
	opacity: 1;
}

section.csr li span {
	display: block;
	position: relative;
	margin-bottom: 1em;
}

section.csr li span img {
	width: 100%;
}

section.csr li span i {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgba(128,128,128,0.95);
	width: 2.8em;
	height: 2.8em;
	text-indent: -9999em;
}

section.csr li a:hover span i {
	background: #3A9735;
}

section.csr li span i:after {
	content: '';
	display: block;
	position: absolute;
	top: 0.9em;
	left: 0.8em;
	width: 0.8em;
	height: 0.8em;
	border: solid #FFF;
	border-width: 1px 1px 0 0;
	transform: rotate(45deg);
}

section.csr li em {
	display: block;
	height: 3em;
}
section.csr p.nav-index {
	text-align: center;
}

section.csr p.nav-index a {
	display: inline-block;
	margin: 0 10%;
	border: solid 1px #FFF;
	padding: 0.7em 1em;
	width: 13em;
	color: #FFF;
}

section.csr p.nav-index a:hover {
	border-color: #FFF;
	background: #FFF;
	color: #fbb56a;
	opacity: 1;
}

/*20211225追加ここまで*/





section.works div {
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 63rem;
}

section.works dl {
	position: relative;
	margin-bottom: 1.5rem;
	padding: 0 4rem;
}

section.works dt {
	margin-bottom: 0.8em;
	font-size: 142%;
	font-style: italic;
}

section.works ul {
	overflow: hidden;
}

section.works li {
	float: left;
	margin: 0 0 1em 2%;
	width: 23.5%;
}

section.works li:first-child {
	margin-left: 0;
}

section.works p.nav-more {
	position: absolute;
	top: 49%;
	right: 0;
}

section.works p.nav-more a {
	display: inline-block;
	position: relative;
	background: #000;
	width: 2.4rem;
	height: 2.4rem;
	text-indent: -9999em;
}

section.works p.nav-more a:after {
	content: '';
	display: block;
	position: absolute;
	top: 1.1em;
	left: 1em;
	border: solid #FFF;
	border-width: 1px 1px 0 0;
	width: 1em;
	height: 1em;
	transform: rotate(45deg);
}

section.works p.nav-index {
	text-align: center;
}

section.works p.nav-index a {
	display: inline-block;
	margin: 0 10%;
	border: solid 1px;
	padding: 0.7em 1em;
	width: 13em;
	text-align: center;
}

section.works p.nav-index a:hover {
	border-color: #111;
	background: #111;
	color: #FFF;
	opacity: 1;
}


section.training {
	background: url(../../img/tr-bg.jpg) no-repeat 50% 50%;
	background-size: cover;
}

section.training div:first-child {
	background: rgba(51,119,44,0.7);
	padding: 0 1rem;
	color: #FFF;
}

section.training div:last-child {
	margin: 0 auto;
	padding: 0 1rem 0.01rem;
	max-width: 55rem;
}

section.training ul {
	overflow: hidden;
	margin: 5.5rem 0 3.5rem;
	line-height: 1.4;
}

section.training li {
	float: left;
	margin: 0 4% 3em;
	width: 25.333%;
}

section.training li em {
	display: block;
	margin-bottom: 0.8em;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 3.25em auto;
	padding-top: 4.2em;
	text-align: center;
	font-size: 171%;
	color: #208013;
}

section.training li span {
	display: block;
	margin-bottom: 1.5em;
	height: 7em; /* 要調整 */
}

section.training li a {
	display: block;
	margin: 0 auto;
	background: #33772C;
	padding: 0.7em 1em;
	width: 9.5em;
	text-align: center;
	color: #FFF;
}

section.training li a.no-link:hover {
	cursor: default;
	opacity: 1;
}

section.training li:nth-child(1) em {
	background-image: url(../../img/tr-ic-safety.png);
}

section.training li:nth-child(2) em {
	background-image: url(../../img/tr-ic-technica.png);
}

section.training li:nth-child(3) em {
	background-image: url(../../img/tr-ic-experience.png);
}

section p.notice {
	margin-bottom: 3rem;
	text-align: center;
	line-height: 1.666;
	font-size: 0.9rem;
}


.sp_only{
  display: none;
}
.pc_only{
  display: block;
}	


@media screen and (max-width:1250px) {

	section.business p span {
		padding: 8% 0;
	}
	
	section.business p em {
		margin: 0 8% 4%;
	}

	section.business p i {
		margin: 0 8% 4%;
		height: 6.8em;
	}

	section.business p a {
		margin: 0 8%;
	}


.background video,
.background iframe {
	width: 100%;
	height: 100%;
}


.sp_only{
  display: block;
}
.pc_only{
  display: none;
}



}

@media screen and (max-width:1000px) {

	header.header {
		background: #373737;
	}

	header.visual h1 {
		margin-top: -8%;
	}

	.smartphone header.visual .nav-play {
		margin-top: 15%;
	}

	section.recent ul {
		float: none;
		width: auto;
	}

	section.recent p.nav-more {
		float: none;
		margin: 1em auto 0;
	}

	section.company,
	section.business,
	section.works{
		margin-bottom: 2rem;
	}
	section.csr {
		margin-bottom: 0rem;
		padding-bottom: 40px;
	}
	section.company h2,
	section.works h2,
	section.csr h2,
	section.training h2 {
		padding: 3rem 1rem 1.5rem;
	}

	section.company p.summary,
	section.works p.summary,
	section.csr p.summary,
	section.training p.summary {
		padding-bottom: 2rem;
		text-align: left;
	}

	section.business p span {
		padding: 6% 0;
	}

	section.business p em {
		margin: 0 8% 2%;
		font-size: 150%;
	}

	section.business p i {
		margin: 0 8% 2%;
	}

	section.works dl {
		padding-left: 0;
	}
	
	section.training ul {
		margin: 3rem 0 1rem;
		line-height: 1.4;
	}	
}


@media screen and (max-width:800px) {

	section.company li {
		width: 32.66%;
	}

	section.company li:nth-child(3n+1) {
		margin-left: 0;
	}

	section.business li p span {
		padding: 4% 0;
		max-width: none;
	}
	
	section.business li p {
		position: static !important;
		margin-left: 0 !important;
		width: auto;
	}

	section.business li p:last-child {
		height: 0;
		padding-bottom: 56%;
	}
	
	section.business li p i {
		height: auto;
	}
	
	section.business li p a {
		margin: 0 8% 0 auto;
	}
	
	section.training li {
		margin: 0 2.5% 3em;
		width: 28.333%;
	}

	section.training li span {
		height: 8.4em;
	}
}

@media screen and (max-width:640px) {
	
	header.visual {
		min-height: 2rem;
	}

	header.visual .background:after {
		background-size: 5px 5px;
	}

	section.recent {
		/*margin-top: -3.05rem;*/
	}
	
	section.recent h2 {
		background-image: none;
		padding: 1rem;
	}

	section.recent > div {
		padding: 1rem 1rem;
	}

	section.recent p.nav-more {
		width: 8rem;
	}
	
	section.recent li span:before {
		width: 0.5rem;
	}
	
	section.recent li {
		padding: 1rem 0 0 1rem;
	}
	
	section.info {
	/*margin-top: -3.45rem;*/
	margin-top: -6.54rem;
	font-size: 1.2em;
	font-weight: bold;
	}
	section.info h2 {
	font-size: 1.0em;
	}

	section.company,
	section.business,
	section.works,
	section.csr {
		margin-bottom: 2rem;
	}

	section.company h2,
	section.works h2,
	section.csr h2,
	section.training h2 {
		padding: 1.5rem 1rem;
		font-size: 1.2rem;
	}

	section.company p.summary,
	section.works p.summary,
	section.csr p.summary,
	section.training p.summary {
		padding-bottom: 1.5rem;
		font-size: 107%;
	}

	section.company li {
		margin-left: 2%;
		width: 49%;
		font-size: 92%;
	}

	section.company li:nth-child(3n+1) {
		margin-left: 2%;
	}

	section.company li:nth-child(2n+1) {
		margin-left: 0;
	}

	section.works dl {
		padding-right: 0;
	}
	
	section.works dt {
		font-size: 128%;
	}

	section.works li {
		margin: 0 0 1em 3%;
		width: 48.5%;
	}

	section.works li:nth-child(2n+1) {
		margin-left: 0;
	}
	
	section.works li img {
		width: 100%;
	}

	section.works p.nav-more {
		position: static;
		padding-bottom: 1em;
		text-align: center;
	}

	section.works p.nav-more a:after {
		top: 0.8em;
		left: 1.25em;
		border-width: 0 1px 1px 0;
	}
	section.csr dl {
		padding-right: 0;
	}
	
	section.csr dt {
		font-size: 128%;
	}

	section.csr li {
		margin: 0 0 1em 3%;
		width: 48.5%;
	}

	section.csr li:nth-child(2n+1) {
		margin-left: 0;
	}
	
	section.csr li img {
		width: 100%;
	}

	section.csr p.nav-more {
		position: static;
		padding-bottom: 1em;
		text-align: center;
	}

	section.csr p.nav-more a:after {
		top: 0.8em;
		left: 1.25em;
		border-width: 0 1px 1px 0;
	}
	section.training li {
		float: none;
		margin: 0 auto 3em;
		max-width: 20rem;
		width: auto;
	}

	section.training li em {
		margin-bottom: 0.3em;
		padding-top: 3.5em;
	}
	
	section.training li span {
		margin-bottom: 1em;
		height: 5.6em;
	}
}