@charset "utf-8";
/* CSS Document */

.slide{
	width:100%;
	height:690px;
	margin:0 auto;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	position:relative;
}

.slide-hover{
	display:block;
	width:100%;
	height:100%;
	background-image:url(../img/slide-hover_02.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	position:relative;
	
}

.slide-hover h2{
	color:#FFF;
	font-size:480%;
	line-height:1.7em;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:100;
	padding-top:200px;
	padding-left:15%;
}


.top-news{
	background-image:url(../img/top-info.jpg);
	background-position:left center;
	background-repeat:no-repeat;
	height:50px;
	width:100%;
	padding:25px 0;
	margin:0 auto;
}

.top-news h3{
	display:none;
}

.news-box{
	margin-left:27%;
	height:50px;
	width:720px;
	background-color:#999;
	float:left;
}

.news-link{
	display:block;
	height:50px;
	color:#FFF;
	font-size:80%;
	text-align:center;
	line-height:50px;
	float:left;
	width:145px;
	background-color:rgb(20,209,171);
}

.ser-menu{
	width:100%;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	flex-direction: row;
	justify-content: center;
}

.s-child{
	background-color:#F00;
	flex: 1; -webkit-flex: 1;
	height:400px;
	border-right:solid 1px #FFF;
	text-align:center;
	overflow: hidden;
	position:relative;
	
}

.scale{
	transition: 0.4s;
	-webkit-transition:0.4s;
}
/* .a_img{
	position:relative;
} */

.scale-hover{
	position:absolute;
	z-index:10;
	top:-390px;
	left:calc(50% - 10px);
	left:-webkit-calc(50% - 10px);
}

.s-child_service-name{
	color: white;
    font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    font-size: 160%;
    letter-spacing: 5px;
    position: absolute;
    right: 50%;
	transform: translateX(50%);
    top: 25%;
    writing-mode: vertical-rl;
    text-orientation: upright;
}



.a_img:hover > .scale{
	-moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
  /*拡大される比率を設定します*/
}

h3{
	text-align:center;
	height:160px;
}

h3 img{
	margin-top:50px;
}


.top-works{
	margin-bottom:65px;
}


.flex4-2{
	width:90%;
	margin:0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
  	flex-wrap:         wrap;
}

.f4-2{
	background-color:#000;
	height:200px;
	width:25%;
}

.c01{
	background-position:center center;
	background-size:cover;
}

.c02{
	background-position:center center;
	background-size:cover;
}

.c03{
	background-position:center center;
	background-size:cover;
}

.c04{
	background-position:center center;
	background-size:cover;
}

.c05{
	background-position:center center;
	background-size:cover;
}

.c06{
	background-position:center center;
	background-size:cover;
}

.c07{
	background-position:center center;
	background-size:cover;
}

.c08{
	background-position:center center;
	background-size:cover;
}

.f4-2-hover{
	display:none;
	background-color:rgba(0,0,0,0.5);
	width:100%;
	height:165px;
	padding-top:35px;
	text-align:center;
	transition: 0.4s;
	-webkit-transition:0.4s;
}

.f4-2-hover p{
	color:#FFF;
	display:block;
	width:60%;
	line-height:80px;
	padding:20px 0;
	border:solid 2px #FFF;
	margin:auto auto;
	
}

.c01:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

.c02:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

.c03:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

.c04:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

.c05:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

.c06:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

.c07:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

.c08:hover > .f4-2-hover{
	display:block;
	background-color:rgba(0,0,0,0.5);
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }


.top-flex-com{
	width:90%;
	margin:0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-justify-content: space-between; /* Safari */
  	justify-content:         space-between;
	margin-bottom:120px;
}

.fc-child{
	width:30%;
	height:150px;
}


.fc-l{
	width:50%;
	float:left;
	overflow:hidden;
	text-align:center;
}

.fc-l img{
	display:block;
	margin:0 auto;
	margin-left:-10px;
}

.fc01{
	/*background-image:url(../img/fc03bg.jpg);*/
	background-image:url(../img/fc03bg-2.jpg);
	background-size:cover;
	background-position:center center;
	float:left;
	width:50%;
	height:100%;
}

.fc02{
	background-image:url(../img/fc02bg.jpg);
	background-size:cover;
	background-position:center center;
	float:left;
	width:50%;
	height:100%;
}

.fc03{
	background-image:url(../img/fc01bg.jpg);
	background-size:cover;
	background-position:center center;
	float:left;
	width:50%;
	height:100%;
}

.fc-hover{
	display:none;
}


.fc-child:hover .fc-hover{
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	text-align:center;
	line-height:150px;
	color:#FFF;
	opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}



.news-p{
	line-height:50px;
	color:#FFF;
	padding-left:30px;
}

.news-p span{
	font-size:90%;
	padding-right:30px;
}

.news-p a{
	color:#FFF;
	font-size:120%;
}