/* CSS Document */
/*スライドショー*/


.top-image{
	width: 100%;
	position: relative;
	z-index: 6!important;
	margin: 0 auto;
	overflow: hidden;
	max-height: 930px;
}
.top-image::after{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	border: 8px solid #2030a6;
}

.top-image .photo {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}
.top-image .photo img{
	width: 100%;
	height: auto;
	line-height: 0;
	vertical-align: bottom;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1); /* 拡大率 */
  }
}
.add-animation .zoom-in {
  animation: zoomUp 10s linear 0s normal both;
}
.add-animation .zoom-out {
  animation: zoomOut 10s linear 0s normal both;
}

.top-image .over{
	position: absolute;
	right: 0;
	top: 0;
	width: 37%;
	width: 600px;
}
.top-image .tate_com{
	position: absolute;
	right: 15px;
	top: 35%;
	width: 10px;
}
.top-image .sch{
	position: absolute;
	right: 15px;
	bottom: 3%;
	width: 10px;
}
.top-image .catch{
	position: absolute;
	bottom: 20%;
	left: 8%;
	font-size: 6rem;
	line-height: 1.4em;
	color: #fff;
	font-weight: 700;
}



@media print , screen and (min-width:1px) and (max-width: 1280px) {

.top-image .catch{
	position: absolute;
	bottom: 15%;
	left: 8%;
	font-size: 4vw;
	line-height: 1.4em;
	color: #fff;
	font-weight: 700;
}

.top-image .sch{
	display: none;
}
}

@media print , screen and (min-width:1px) and (max-width: 960px) {	
.top-image .over{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 70%;
}
	
}
@media print , screen and (min-width:1px) and (max-width: 768px) {

.top-image .photo {
	width: 130%;
	overflow: hidden;
	margin: 0 -15%;
}
	
}
@media print , screen and (min-width:1px) and (max-width: 480px) {

.top-image .photo {
	width: 150%;
	overflow: hidden;
	margin: 0 -25%;
}
.top-image .tate_com{
	position: absolute;
	right: 15px;
	top: 35%;
	width: 8px;
}
	
.top-image .catch{
	position: absolute;
	bottom: 15%;
	left: 8%;
	font-size: 2.5rem;
	line-height: 1.4em;
	color: #fff;
	font-weight: 700;
}
}


.company{
	background: url("../img/top/contents_back.png") center center no-repeat;
	background-size: cover;
	padding: 5% 0;
}
.company .txt{
	width: 45%;
	padding: 20px;
}

.company .title {
	text-align: left;
}
.company .title .jp{
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2em;
	text-align: left;
}
.company .title .en{
	color: #2030a6;
	font-size: 7.0rem;
	line-height: 1.2em;
	font-weight:600;
	text-align: left;
}
.company .txt p{
	margin: 30px auto;
	text-align: left;
}
.company .txt a{
	width: 100px;
	display: block;
}
.company .txt a:hover{
	transform: scale(1.1); /* ボタンを1.1倍拡大 */
}
.company .photo{
	width: 55%;
	padding: 20px;
}

@media print , screen and (min-width:1px) and (max-width: 960px) {
.company .title .en{
	font-size: 5.0rem;
}
}
@media print , screen and (min-width:1px) and (max-width: 768px) {

.company .txt{
	width: 100%;
	padding: 20px;
}

.company .photo{
	width: 80%;
	margin: 0 0 0 auto;
	padding: 20px;
}

	
}
@media print , screen and (min-width:1px) and (max-width: 480px) {

	
}

.service{
	margin: 0 auto;
}
.service .photo{
	width: 55%;
	position: relative;
}
.service .photo img{
	width: 100%;
	height: auto;
}

.service .title {
	position: absolute;
	right: 10px;
	bottom: 5%;	
}
.service .title .jp{
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2em;
	text-align: left;
}
.service .title .en{
	color: #2030a6;
	font-size: 7.0rem;
	line-height: 1.2em;
	font-weight:600;
	text-align: left;
}
.service .txt{
	width: 45%;
	padding: 20px;
}
.service .txt ul.btn{
	border-top:1px solid #ccc;
	max-width: 500px;
}
.service .txt ul.btn li{
	padding: 50px 20px;
	border-bottom:1px solid #ccc;
	text-align: left;
}
.service .txt a{
	display: block;
	background: url("../img/top/arrow.svg") right center no-repeat;
	background-size: 30px;
	text-decoration: none;
	font-size: 2.2rem;
	font-weight: 700;
	color: #333;
}
.service .txt a .num{
	font-size: 1.5rem;
	color: #2030a6;
	display: inline-block;
	padding-right: 10px;
}
.service .txt a:hover{
	transform: scale(1.1); /* ボタンを1.1倍拡大 */
}

@media print , screen and (min-width:1px) and (max-width: 960px) {
.service .title .en{
	font-size: 5.0rem;
}
.service .txt ul.btn li{
	padding: 30px 20px;
	border-bottom:1px solid #ccc;
	text-align: left;
}
.service .txt a{
	font-size: 1.8rem;
}
}
@media print , screen and (min-width:1px) and (max-width: 768px) {
	
.service .photo{
	width: 100%;
	position: relative;
}
.service .txt{
	width: 100%;
	padding: 20px;
	margin: auto;
}
.service .txt ul.btn{
	max-width: 100%;
}
}

.facility{
	background: url("../img/top/facility_p.png") top left no-repeat;
	background-size: cover;
	padding: 5% 0 15%;
}
.facility .txt{
	padding: 20px;
}

.facility .title {
	text-align: left;
}
.facility .title .jp{
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2em;
	text-align: left;
	color: #fff;
}
.facility .title .en{
	color: #fff;
	font-size: 7.0rem;
	line-height: 1.2em;
	font-weight:600;
	text-align: left;
}
.facility .txt p{
	color: #fff;
	margin: 30px auto;
	text-align: left;
}
.facility .txt a{
	width: 100px;
	display: block;
}
.facility .txt a:hover{
	transform: scale(1.1); /* ボタンを1.1倍拡大 */
}


@media print , screen and (min-width:1px) and (max-width: 1080px) {

}

@media print , screen and (min-width:1px) and (max-width: 960px) {
.facility .title .en{
	font-size: 5.0rem;
}
}
@media print , screen and (min-width:1px) and (max-width: 480px) {

	
}

.other{
	padding: 5% 0;
	position: relative;
	z-index: 1;
}
.other::after{
	background: url("../img/top/contents_back02.png") center bottom no-repeat;
	content: "";
	width: 100%;
	height: 50%;
	position: absolute;
	left: 0;
	bottom: 0;
	background-size: cover;
	z-index: -1;
}

.other .btn_recruit,
.other .btn_contact{
	width: 40%;
	position: relative;
}
.other .btn_recruit .photo,
.other .btn_contact .photo{
	position: relative;
	overflow: hidden;
	transition: .5s;
}
.other .btn_recruit .photo img,
.other .btn_contact .photo img{
	transition: .5s;
}
.other .btn_recruit:hover .photo img,
.other .btn_contact:hover .photo img{
	transform: scale(1.1);
}

.other .title {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	top :35%;
}
.other .title .jp{
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2em;
	color: #fff;
}
.other .title .en{
	color: #fff;
	font-size: 4.0rem;
	line-height: 1.2em;
	font-weight:600;
}
.other .arrow{
	position: absolute;
	right: 0;
	bottom: -20px;
	width: 80%;
	background: #fff;
	text-align: center;
	font-weight: 500;
	padding: 15px 5px 15px 5px;
}
.other .arrow span{
	display: block;
	background: url("../img/top/arrow.svg") right center no-repeat;
	background-size: 30px;}
/*
.other a:hover .arrow span{
	transform: scale(1.05);
}
*/

@media print , screen and (min-width:1px) and (max-width: 1080px) {

}

@media print , screen and (min-width:1px) and (max-width: 960px) {

.other .btn_recruit,
.other .btn_contact{
	width: 45%;
	position: relative;
}
}
@media print , screen and (min-width:1px) and (max-width: 768px) {
	
.other .btn_recruit,
.other .btn_contact{
	width: 50%;
}
.other .title .jp{
	font-size: 1.3rem;
}
.other .title .en{
	font-size: 3.0rem;
}
.other .arrow{
	position: absolute;
	right: 0;
	bottom: -20px;
	width: 90%;
	background: #fff;
	text-align: center;
	font-weight: 500;
	padding: 12px 15px 12px 5px;
}
	
}
@media print , screen and (min-width:1px) and (max-width: 610px) {

	
.other .btn_recruit,
.other .btn_contact{
	width: 90%;
	margin: 20px auto 0 0
}
}