@charset "UTF-8";

/* ---------------------------------------
  TECHNOLOGY & EQUIPMENT
-----------------------------------------*/

@media screen and (min-width: 768px) {
	#pagettl {
		background-image: url(../img/technology/pagettl_pc.jpg);
	}
}

@media screen and (max-width: 767px) {
	#pagettl {
		background-image: url(../img/technology/pagettl_sp.jpg);
	}
}


/* mv
--------------------------------*/
#page_technology .mv {
	position: relative;
	height: 460px;
}

#page_technology .mv::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #00a0e9;
	z-index: 3;
}

#page_technology .mv.is-show::before {
	-webkit-animation: passing-img 1s ease .5s 1 normal forwards;
	animation: passing-img 1s ease .5s 1 normal forwards;
}

@keyframes passing-img {
	0% {
		left: 0;
		width: 0;
	}

	50% {
		left: 0;
		width: calc(100% + 1px);
	}

	51% {
		left: 0;
		width: calc(100% + 1px);
	}

	100% {
		left: 100%;
		width: 0;
	}
}

#page_technology .mv .mainimg {
	width: 100%;
	height: 100%;
}

#page_technology .mv .mainimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#page_technology .mv .inner {
	width: calc(50% - 46px);
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
}

#page_technology .mv .inner::before {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 102, 204, .6);
	transform: translateX(-100%);
	z-index: 1;
	transition: .6s ease;
	transition-delay: 1.5s;
}

#page_technology .mv.is-show .inner::before {
	transform: translateX(0);
}

#page_technology .mv .ttlwrap {
	position: relative;
	width: 504px;
	padding-right: 70px;
	margin-left: auto;
	z-index: 2;
}

#page_technology .mv .ttlwrap .lead {
	font-weight: 500;
	font-size: 2rem;
	line-height: 1.9;
	margin-bottom: 1em;
}

#page_technology .contents_wrap > * + * {
	margin-top: 100px;
}

#page_technology .tb {
	width: 100%;
	border-collapse: collapse;
}

#page_technology .tb th,
#page_technology .tb td {
	position: relative;
}

#page_technology .tb th:not(:first-child)::before,
#page_technology .tb td:not(:first-child)::before {
	content: "";
	width: 1px;
	height: calc(100% - 2rem);
	position: absolute;
	left: 0;
	top: 1rem;
}

#page_technology .tb th::before {
	background-color: #fff;
}

#page_technology .tb td::before {
	background-color: #c1c1c1;
}

#page_technology .tb thead th {
	text-align: center;
	font-weight: 500;
	color: #fff;
	font-size: 1.8rem;
	line-height: 1.5;
	background-color: #0066cc;
	padding: 1.65rem 2rem;
}

#page_technology .tb tbody td {
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.05em;
	padding: 1.525rem 1.8rem;
	border-bottom: 1px solid #c1c1c1;
}

#page_technology .tb thead th:nth-child(1) {
	width: 265px;
}

#page_technology .tb thead th:nth-child(2) {
	width: 425px;
}

#page_technology .tb thead th:nth-child(3) {
	width: 255px;
}

#page_technology .tb thead th:nth-child(4) {
	width: 155px;
}

#page_technology .tb tbody td:nth-child(3) {
	text-align: center;
}

#page_technology .tb tbody td:nth-child(4) {
	text-align: center;
}

#page_technology .tbwrap .tb thead th:nth-child(1) {
	width: 350px;
	text-align: left;
}

#page_technology .tbwrap .tb thead th:nth-child(2) {
	width: 162px;
}

#page_technology .tbwrap .tb tbody td:nth-child(2) {
	text-align: center;
}

#page_technology .block .blockttl + * {
	margin-top: 0;
}

#page_technology .block .blockttl {
	color: #fff;
	font-weight: 500;
	font-size: 2.4rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	padding: 16px 25px;
	background-color: #0066cc;
	border-radius: 0px 20px 0px 0px;
	margin-bottom: 40px;
}

#page_technology .block .imgwrap .img._1 {
	width: 558px;
}

#page_technology .block .imgwrap .col2 {
	width: 519px;
}

#page_technology .block .imgwrap .col2 > * {
	width: 248px;
}

#page_technology .block .imgwrap .col2 .img + .img {
	margin-top: 13px;
}

#page_technology .block .imgwrap figcaption {
	display: block;
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: 0;
	margin-top: 5px;
}

@media screen and (min-width: 768px) {
	#page_technology .tbwrap .tb {
		width: 512px;
	}
	#page_technology .tbcover .tb td:nth-child(2) {
		padding-left: 4rem;
		padding-right: 4rem;
	}
}

@media screen and (max-width: 767px) {
	#page_technology .mv {
		height: 112.6rem;
	}

	#page_technology .mv .inner {
		width: 100%;
		height: auto;
		min-height: 53.3rem;
		display: block;
		top: 0;
		bottom: auto;
		padding: 7.5rem 0 6rem;
	}

	#page_technology .mv .ttlwrap {
		position: relative;
		width: 84%;
		margin: 0 auto;
		padding: 0;
	}

	#page_technology .mv .ttlwrap .secttl {
		margin-bottom: 5rem;
	}

	#page_technology .mv .ttlwrap .lead {
		font-size: 3rem;
		margin-bottom: 0;
	}

	#page_technology .contents_wrap {
		padding: 10rem 0 15rem;
	}

	#page_technology .contents_wrap > * + * {
		margin-top: 10rem;
	}

	#page_technology .tbcover {
		overflow-x: scroll;
		overflow-y: hidden;
		margin-right: -6rem;
	}

	#page_technology .tbcover::-webkit-scrollbar {
		display: none;
	}

	#page_technology .tbcover .tb {
		position: relative;
		width: 130rem;
	}

	#page_technology .tbcover .tb::before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: url(../img/service/detail/iconScroll.png) no-repeat 20.5rem center / 22rem auto;
		transition: all 0.2s ease-out 0.2s;
		animation: scrollAnimation 1s linear infinite;
		z-index: 10;
		pointer-events: none;
	}

	#page_technology .tbcover.scrolled .tb::before {
		opacity: 0;
	}

	#page_technology .tb th:not(:first-child)::before,
	#page_technology .tb td:not(:first-child)::before {
		width: .2rem;
		height: calc(100% - 3rem);
		top: 1.5rem;
	}

	#page_technology .tb thead th {
		font-size: 2.7rem;
		padding: 1.65rem 2rem;
	}

	#page_technology .tb tbody td {
		border-bottom: .2rem solid #c1c1c1;
	}

	#page_technology .tb thead th:nth-child(1) {
		width: 32rem;
	}

	#page_technology .tb thead th:nth-child(2) {
		width: 48rem;
	}

	#page_technology .tb thead th:nth-child(3) {
		width: 38rem;
	}

	#page_technology .tb thead th:nth-child(4) {
		width: 12rem;
	}

	#page_technology .tbwrap .tb thead th:nth-child(1),
	#page_technology .tbwrap .tb tbody td:nth-child(1) {
		width: 46rem;
	}

	#page_technology .tbwrap .tb thead th:nth-child(2),
	#page_technology .tbwrap .tb tbody td:nth-child(2) {
		width: 17rem;
	}

	#page_technology .tbwrap .tb tbody td:nth-child(2) {
		text-align: center;
	}

	#page_technology .block .blockttl {
		font-size: 3.6rem;
		letter-spacing: 0.1em;
		padding: 2.5rem 4rem;
		border-radius: 0px 3rem 0px 0px;
		margin-bottom: 6rem;
	}

	#page_technology .block .imgwrap .img._1 {
		margin-bottom: 3rem;
	}

	#page_technology .block .imgwrap .img._1 {
		width: 100%;
	}

	#page_technology .block .imgwrap .col2 {
		width: 100%;
	}

	#page_technology .block .imgwrap .col2 > * {
		width: 30rem;
	}

	#page_technology .block .imgwrap .col2 .img + .img {
		margin-top: .5rem;
	}

	#page_technology .block .imgwrap figcaption {
		font-size: 2.4rem;
		margin-top: 1rem;
	}
}