@charset "UTF-8";
/* CSS Document */
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}

@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}



/*PC*/
@media print, screen and (min-width: 768px) {

#maintenance { position:relative; margin: 0 auto; overflow: hidden; }
#maintenance .section_wrap { width: 100%; margin: 0 auto; }


#maintenance .img_block .txt_box p {
font-size: 2.2rem;
font-weight: 600;
line-height: 2.2;
text-align: center;
margin: 0 0 60px;
}



/*block
---------------------------------------------*/
#maintenance .block { position: relative; margin: 120px 0; }

#maintenance article {
overflow: hidden;
}
#maintenance article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#maintenance article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 18rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#maintenance article .loop_wrap div:nth-child(odd) {
animation: txtloop 100s -51s linear infinite;
}
#maintenance article .loop_wrap div:nth-child(even) {
animation: txtloop2 100s linear infinite;
}

#maintenance .block .flex_wrap {
position: relative;
width: 95%;
margin: 50px auto 0 0;
padding-bottom: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#maintenance .block .flex_wrap::before {
content: '';
background: url("../images/com/bg.jpg") center center no-repeat;
background-size: cover;
width: 105%;
height: 62%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}

#maintenance .block .flex_wrap .imgbox { width: 50%; position: relative; }
#maintenance .block .flex_wrap .imgbox img { object-fit: cover; height: 800px; }

#maintenance .block .flex_wrap .txtbox { width: 47%; }
#maintenance .block .flex_wrap .txtbox h3 {
font-size: 4rem;
font-weight: 600;
margin: 20px 0 30px;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#maintenance .block .flex_wrap .txtbox p { font-size: 1.6rem; line-height: 2.4; }

#maintenance .block .flex_wrap .txtbox .bg .img { width: 450px; margin: 100px auto 0; }

#maintenance .block .contact a {
width: 40%;
margin: 50px auto 0px;
display: block;
text-align: center;
font-weight: 800;
color: #FFF;
background: #0066a1;
padding: 15px;
box-sizing: border-box;
border-radius: 0.5rem;
position: relative;
}
#maintenance .block .contact a::before {
content: "";
position: absolute;
right: 10px;
top: 22px;
background: url("../images/com/arrow_w.svg") 0 0 no-repeat;
background-size: auto;
background-size: 100% auto;
width: 10px;
height: 20px;
}
#maintenance .block .contact a:hover {
background: dodgerblue;
transition: .5;
}




}






/*sp*/
@media only screen and (max-width: 767px) {

#maintenance { position:relative; margin: 0 auto; overflow: hidden; }
#maintenance .section_wrap { width: 100%; margin: 0 auto; }


#maintenance .img_block .txt_box p {
font-size: 1.4rem;
font-weight: 600;
line-height: 2.2;
text-align: center;
margin: 0 5% 40px;
}



/*block
---------------------------------------------*/
#maintenance .block { position: relative; margin: 0 auto 60px; }

#maintenance article { overflow: hidden; }
#maintenance article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#maintenance article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 8rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#maintenance article .loop_wrap div:nth-child(odd) {
animation: txtloop 100s -51s linear infinite;
}
#maintenance article .loop_wrap div:nth-child(even) {
animation: txtloop2 100s linear infinite;
}

#maintenance .block .flex_wrap { width: 90%; margin: 10px auto 0; }

#maintenance .block .flex_wrap .imgbox { position: relative; }

#maintenance .block .flex_wrap .txtbox {  }
#maintenance .block .flex_wrap .txtbox h3 {
font-size: 2.2rem;
font-weight: 600;
margin: 10px 0;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#maintenance .block .flex_wrap .txtbox p { line-height: 2; }

#maintenance .block .flex_wrap .txtbox .bg {
margin-top: 40px;
padding: 10px 20px;
box-sizing: border-box;
background: url("../images/com/bg.jpg") center center no-repeat;
background-size: cover;
}

#maintenance .block .contact a {
width: 80%;
margin: 50px auto 0px;
display: block;
text-align: center;
font-weight: 800;
color: #FFF;
background: #0066a1;
padding: 15px;
box-sizing: border-box;
border-radius: 0.5rem;
position: relative;
}
#maintenance .block .contact a::before {
content: "";
position: absolute;
right: 10px;
top: 22px;
background: url("../images/com/arrow_w.svg") 0 0 no-repeat;
background-size: auto;
background-size: 100% auto;
width: 10px;
height: 20px;
}
#maintenance .block .contact a:hover {
background: dodgerblue;
transition: .5;
}


}