@charset "utf-8";


/* loading ※https://projects.lukehaas.me/css-loaders/参照*/

.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  animation: load1 1s infinite ease-in-out;
  width: 0.5em;
  height: 1em;
}
.loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}

@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 1em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 2em;
  }
}


/* area */

#container{
    overflow-x: hidden;
    /*以下、IE11用*/
    z-index: 1;
    position: relative;
}

/* vidualarea */
#vidual-area{
    position: relative;
    height: 100vh;
}

body.appear #vidual-area::after{
    content:'';
    background:#960021;
    width:0;
    height: 12%;
    position: absolute;
    bottom:0;
    right:0;
    z-index: -1;
	animation-name:vidualbgRLextendAnime;
    animation-duration:.2s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
}

@keyframes vidualbgRLextendAnime{
	0% {
		width:0;
	}
	100% {
		width:40%;
	}
}


#vidual-area #slider-area{
    position: absolute;
    top:0;
    right: 0;
    width:85%;
    z-index: -1;/*最背面へ*/
}

@media screen and (max-width:960px) {
#vidual-area{
    height: 90vh;
}
#vidual-area #slider-area{
    width:100%;
    height: 90vh;
}
#vidual-area h2{
    font-size:2.1rem;
}
#vidual-area dl{
    left:20px;
    bottom:16px;
}
#vidual-area ul li{
    margin:0 2px;
}
    
}

@media screen and (max-width:450px) {
#vidual-area h2{
    font-size:7vw;
    top: inherit;
    bottom: 13%;
}

}

/* service */

#service{
    padding: 10% 0 10% 15%;
}

@media screen and (max-width:768px) {
#service{
    padding: 30% 0 10% 30px;
}
}

@media screen and (max-width:500px) {
    #service .service-lead{
        padding: 0 10% 0 0;
    }
#service .service-lead br{
    display: none;
}
}

#service .service-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding:10% 0 0 10%;
    position: relative;
}

#service .service-area::after{
    opacity: 0;
}

#service .service-area.startwd::after{
     content:'';
    position: absolute;
    top:10%;
    right:0;
    width:80%;
    height: 60vh;
    background:#232323;
    z-index: -1;
	animation-name:sevicebgRLextendAnime;
    animation-duration:.9s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
}

@keyframes sevicebgRLextendAnime{
	0% {
        opacity: 0;
		width:0;
	}
	100% {
        opacity: 1;
		width:80%;
	}
}

#service .service-area section{
     width:30%;   
}

@media screen and (max-width:570px) {
#service .service-area section{
     width:100%;
    margin: 0 0 100px 0;
    padding: 0 10% 0 0;
}
 
}

#service .service-area section h3{
    font-size:1.5rem;
    margin: 0 0 30px 0;
}

#service .service-area section p{
    margin: 0 0 30px 0;
}

#service .service-img-wrapper{
    position:relative;
    overflow: hidden;
    width:30%;
    height: 60vh;
}

#service .service-img{
    height: 60vh;
    background:url("../img/01.jpg") no-repeat center;
    background-size: cover;
}

@media screen and (max-width:570px) {
#service .service-img-wrapper,
#service .service-img{
    width:100%;
    height: 40vh;
    background-position: right;
    }
    #service .service-img-wrapper{
        margin:0 0 50px 0;
    }
}