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

/*******************

PC work

********************/

.work__img{
	background-image:url(img/img_work.jpg);
	background-size:cover;
	height:600px;
	position:relative;
	margin-bottom:400px;
	}
.work__img .txt{
  max-width: 1000px;
  box-sizing: border-box;
  position:absolute;
  top:500px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 50px;
  display: block;
  background-color:#fff;
}
.work .ttl{
	color:#5e952d;
	font-weight:800;
	font-size:70px;
	padding-left:400px;
	margin-bottom:50px;
}
.work dl{
	padding-left:400px;
}
.work dl dt{
	font-size:40px;
	font-weight:600;
	margin-bottom:.4em;
}
.work dl dd{
	margin-bottom:1em;
}
.work__structure{
	max-width:1000px;
	margin:0 auto 50px;
	clear:both;
	background:url(img/img_structure.png)0 0 no-repeat;
	min-height:304px;
	padding-top:20px;
	}
.work__design{
	max-width:1000px;
	margin:0 auto 50px;
	clear:both;
	background:url(img/img_design.png)0 0 no-repeat;
	min-height:304px;
	padding-top:20px;
	}
.work__convert{
	max-width:1000px;
	margin:0 auto 100px;
	clear:both;
	background:url(img/img_convert.png)0 0 no-repeat;
	min-height:304px;
	padding-top:20px;
	}
.bn_flow{
	margin:0 auto 60px;
	text-align:center;
	}
.bn_flow img{
	display:inline;
}

.top__work {
  text-align: center;
  display: block;
  margin: 120px auto 270px;
  background: url(../img/bg_work.png) no-repeat 0% 100%;
  max-width: 1500px;
  padding-bottom: 90px;
}
.top__work__ttl {
  font-size: 32px;
  font-weight: 600;
  margin: 50px auto;
}
.top__work__menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
  margin: 50px auto 70px;
}
.top__work__menu div {
  position: relative;
  display: block;
  margin: 0;
}
.top__work__menu img {
  display: block;
  position: relative;
  z-index: 3;
}
.top__work__menu--cir {
  background-color: #5e952d;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 234px;
  height: 234px;
  border-radius: 50%;
  z-index: 1;
  margin-top: -117px;
  margin-left: -117px;
}
.top__work__menu div:nth-child(1) .top__work__menu--cir {
  margin-left: -110px;
}
.top__work__menu div:nth-child(3) .top__work__menu--cir {
  margin-left: -122px;
}
.top__work__menu a .top__work__menu--cir:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #154d8f;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  z-index: 1;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.top__work__menu a:hover .top__work__menu--cir:before {
  content: "";
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* sturcture */

.sturcture__img{
	background:url(structure/img/img_structure.jpg) 100% 0 no-repeat;
	position:relative;
	min-height:670px;
	margin-bottom:100px;
	}
.sturcture__ttl{
	position:absolute;
	top:50px;
	left: 0;
	z-index:3;
	color:#eeeeee;
	font-weight:800;
	font-size:70px;
	margin-bottom:.4em;
}
.sturcture__img .txt{
  max-width: 485px;
  box-sizing: border-box;
  position:absolute;
  top:70px;
  left: 0;
  padding:60px 30px 30px 0;
  display: block;
  z-index:2;
  background-color:#fff;
}

/* design */

.design__img{
	background:url(design/img/img_design.jpg) 100% 0 no-repeat;
	position:relative;
	min-height:670px;
	margin-bottom:100px;
	}
.design__ttl{
	position:absolute;
	top:150px;
	left: 0;
	z-index:3;
	color:#eeeeee;
	font-weight:800;
	font-size:70px;
	margin-bottom:.4em;
}
.design__img .txt{
  max-width: 485px;
  box-sizing: border-box;
  position:absolute;
  top:170px;
  left: 0;
  padding:60px 30px 30px 0;
  display: block;
  z-index:2;
  background-color:#fff;
}

/* convert */

.convert__img{
	background:url(convert/img/img_convert.jpg) 100% 0 no-repeat;
	position:relative;
	min-height:670px;
	margin-bottom:150px;
	}
.convert__ttl{
	position:absolute;
	top:50px;
	left: 0;
	z-index:3;
	color:#eeeeee;
	font-weight:800;
	font-size:70px;
	margin-bottom:.4em;
}
.convert__img .txt{
  max-width: 640px;
  box-sizing: border-box;
  position:absolute;
  top:70px;
  left: 0;
  padding:60px 30px 30px 0;
  display: block;
  z-index:2;
  background-color:#fff;
}

/* flow */

.flow__box {
display: flex; /* 要素をFlexコンテナとして定義する */
flex-wrap: wrap; /* flexアイテムの折り返しを指定する */
border:5px solid #e5e5e5;/* flex コンテナの境界線を実線で指定する */
}
.no{
	font-size:100px;
	display:block;
	color:#fff;
	margin-right:60px;
	margin-bottom:40px;
	font-weight:800;
	padding-top:10px;
	}
.name{
	font-size:36px;
	font-weight:600;
	margin-bottom:15px;
	}
.type{
	background-color:#5e952d;
	color:#fff;
	font-size:16px;
	line-height:1em;
	padding:0.6em;
	margin-right:60px
	}
.flex-item1 {
padding:50px 30px;
width:340px;
background-color:#e5e5e5;
}
.flex-item2 {
width:780px;
display: flex;
flex-wrap: wrap;
align-items: center;
 -ms-align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  background-color:#fff;
}
.flex-item2 p{
  padding: 25px;
}
.arrow img{
	text-align:center;
	margin:15px auto;
	}