@charset "utf-8";

@import url(common.css);
@import url(base.css);


/* index 
------------------------------------------------------------*/

#index article ul.project {
	width: 880px;
	margin: 0px auto 0px;
}

#index article ul.project li {
	
	background: #0055A7;
	text-align: center;
	height: 320px;
	float: left;
	width: 390px;
	margin: 0px 0px 77px 0px;
	font-size: 1.2em;
	font-weight: 500;
}

#index article ul.project li:nth-child(2n-1) {
	margin: 0px 100px 77px 0px;	
}

#index article ul.project li img {
	margin: 0px 0px 20px 0px;	
}

#index article ul.project li:nth-child(2) img,
#index article ul.project li:nth-child(4) img {
	margin: 0px 0px 10px 0px;	
}

#index article ul.project li a {
	color: #FFF;
	text-decoration: none;
	width: 390px;
	height: 320px;
	display: block;
}

#index article div.center {
	width: 880px;
	margin: 0px auto 180px;
}


#index article ul.realization {
	width: 1000px;
	margin: 0px auto 250px;
}

#index article ul.realization li {
	background: #E5EEF6;
	width: 1000px;
	margin: 0px 0px 50px 0px;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 123px;
}

#index article ul.realization li img:nth-child(1) {
	float: left;
}

#index article ul.realization li img:nth-child(2) {
	float: right;
}

#index article ul.realization li img {
	vertical-align: middle;
}

#index article ul.realization li a {
	color: #0959a9;
	text-decoration: none;
	width: 1000px;
	height: 123px;
	display: block;
}


@media screen and (max-width:768px) {
	
#index article ul.project {
	width: 90%;
	margin: 0px auto 10%;
}

#index article ul.project li {
	
	background: #0055A7;
	text-align: center;
	height: inherit;
	float: inherit;
	width: 100%;
	margin: 0px 0px 10% 0px;
	font-size: 3.7vw;
	font-weight: 500;
	padding: 0px 0px 5% 0px;
	line-height: 1.5em;
}

#index article ul.project li:nth-child(2n-1) {
	margin: 0px 0px 10% 0px;	
}

#index article ul.project li img {
	margin: 0px 0px 5% 0px;	
	width: 100%;
}

#index article ul.project li:nth-child(2) img {
	margin: 0px 0px 5% 0px;	
}

#index article ul.project li a {
	color: #FFF;
	text-decoration: none;
	width: 100%;
	height: inherit;
	display: block;
}

#index article section .line2 p {
	text-align: left;
	width: 90%;
	margin: 0px auto 5%;
	font-size: 3.1vw;
}

#index article ul.realization {
	width: 100%;
	margin: 0px auto 20%;
}

#index article ul.realization li {
	background: #E5EEF6;
	width: 100%;
	margin: 0px 0px 10% 0px;
	font-size: 3.4vw;
	font-weight: 500;
	line-height: inherit;
}

#index article ul.realization li img:nth-child(1) {
	float: inherit;
	width: 20%;
}

#index article ul.realization li img:nth-child(2) {
	float: inherit;
	width: 100%;
}

#index article ul.realization li img {
	vertical-align: middle;
}

#index article ul.realization li a {
	color: #0959a9;
	text-decoration: none;
	width: 100%;
	height: inherit;
	display: block;
}

}


/* project 
------------------------------------------------------------*/

#project article section .line2 {
	margin: 0px 0px 80px;
}

#project article section .line2 h2 {
	margin: 20px 0px 10px;
}

#project article section .line2 p {
	margin: 0px auto 20px;
}

#project article section h3 {
	height: inherit;
	width: 1000px;
	text-align: center;
	line-height: inherit;
	margin: 0px auto 0px;
}

#project #catch {
	color: #FFF;
	background: #8CA0D2;
	width: 700px !important;
	margin: 0px auto 0px !important;	
	padding: 30px 150px 30px 150px;
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1.6em;
}

#project #profile {
	width: 1000px;
	margin: 0px auto 50px;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;	
}

#project #profile .o1 {
	background: #e5eef6;
	width: 100%;
	float: left;	
}


#project #profile .p1 {
	background: #e5eef6;
	width: 33.333%;
	float: left;	
}

#project #profile .p2 {
	background: #cedeee;
	width: 33.333%;
	float: left;	
}

#project #profile .p3 {
	background: #e5eef6;
	width: 33.333%;
	float: left;	
}

#project #profile .p4 {
	background: #cedeee;
	width: 50%;
	float: left;	
}

#project #profile .p5 {
	background: #e5eef6;
	width: 50%;
	float: left;	
}

#project #profile dt {
	margin: 30px 30px 0px 30px;
	padding: 0px 0px 30px;
	border-bottom: 2px solid #FFF;
	position: relative;
}

#project #profile dt img {
	margin: 0px 0px 20px;
}

#project #profile dt .name {
	font-size: 1.4em;
	position: absolute;
	top: 40px;
	left: 150px;
	display: block;
}

#project #profile dt .en {
	font-size: 0.9em;
	border-bottom: 2px solid #000;
	position: absolute;
	top: 65px;
	left: 150px;
	display: block;
}

#project #profile dt .info {
	font-size: 0.9em;
	clear: both;
	display: block;
	line-height: 1.6em;
}

#project #profile dd {
	margin: 10px 30px 30px 30px;
	font-size: 0.9em;
}

#project article h4 {
	border-bottom: 2px solid #000;
	width: 1000px;
	padding: 0px 0px 10px;
	margin: 0px auto 20px;
	color: #0068BD;
	font-size: 1.6em;
	font-weight: 500;
}

#project article p {
	width: 1000px;
	margin: 0px auto 50px;
}

#project article p .left {
	max-width: 400px;
	margin: 0px 20px 20px 0px;
	font-size: 0.9em;
	line-height: 1.3em;
}

#project article p .right {
	max-width: 400px;
	margin: 0px 0px 20px 20px;
	font-size: 0.9em;
	line-height: 1.3em;
}

#project article p .left img,
#project article p .right img {
	max-width: 300px;
	margin: 0px 0px 0px 0px;	
}

#project article #mirai {
	width: 1000px;
	margin: 0px auto 40px;
	padding: 20px 50px 20px;
	border: 1px solid #000;
	box-sizing: border-box;
}

#project article #mirai h4 {
	border-bottom: 1px solid #000;
	padding: 40px 0px 0px 50px;
	color: #0068BD;
	font-size: 1.3em;
	font-weight: 500;
	background: url(../../about/img/common/mirai_pc.png) no-repeat left top;
	height: 43px;
	width: 630px;
	margin: 0px 0px 20px 0px;
	float: left;
}


#project article #mirai span {
	float: right;
	max-width: 180px;
	background: #FFF;
	padding: 10px 0px 10px 30px;
	display: block;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.3em;
	margin: -100px 0px 10px 0px;
}

#project article #mirai span img {
	width: 100%;
	margin: 0px 0px 10px 0px;	
}

#project article #mirai p {
	margin: 0px 0px 0px 0px;
	float: left;
	width: 680px;	
}


@media screen and (max-width:1024px) {
	
#project article h4 {
	width: 90%;
}

#project article p {
	width: 90%;
}

#project article p {
	width: 90%;
}

#project article p.chart img {
	width: 100%;
}

#project article #mirai {
	width: 90%;
}
	
}

@media screen and (max-width:768px) {

#project article section .line2 {
	margin: 0px 0px 10%;
}

#project article section .line2 h2 {
	margin: 5% 0px 0%;
}

#project article section .line2 p {
	margin: 0px auto 5%;
	width: 90%;
}

#project article section .line2 p img {
	width: 100%;
}

#project article section h3 {
	height: inherit;
	width: 100%;
	text-align: center;
	line-height: 0;
	margin: 0px auto 0px;
}

#project #catch {
	color: #FFF;
	background: #8CA0D2;
	width: 90% !important;
	margin: 0px 0px 0px !important;	
	padding: 5%;
	font-size: 3.6vw;
	font-weight: 400;
	line-height: 1.6em;
}

#project #profile {
	width: 100%;
	margin: 0px auto 10%;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;	
}
	
#project #profile .o1 {
	background: #e5eef6;
	width: 100%;
	float: inherit;	
}

#project #profile .p1 {
	background: #e5eef6;
	width: 100%;
	float: inherit;	
}

#project #profile .p2 {
	background: #cedeee;
	width: 100%;
	float: inherit;		
}

#project #profile .p3 {
	background: #e5eef6;
	width: 100%;
	float: inherit;		
}

#project #profile .p4 {
	background: #cedeee;
	width: 100%;
	float: inherit;		
}

#project #profile .p5 {
	background: #e5eef6;
	width: 100%;
	float: inherit;		
}

#project #profile dt {
	margin: 5% 5% 5% 5%;
	padding: 0px 0px 5%;
	border-bottom: 2px solid #FFF;
	position: relative;
}

#project #profile dt img {
	margin: 0px 0px 2%;
}

#project #profile dt .name {
	font-size: 5.0vw;
	position: absolute;
	top: 40px;
	left: 150px;
	display: block;
}

#project #profile dt .en {
	font-size: 3.0vw;
	border-bottom: 2px solid #000;
	position: absolute;
	top: 65px;
	left: 150px;
	display: block;
}

#project #profile dt .info {
	font-size: 3.5vw;
	clear: both;
	display: block;
	line-height: 1.6em;
}

#project #profile dd {
	margin: 0px 5% 5% 5%;
	font-size: 3.5vw;
	line-height: 1.6em;
}

#project article h4 {
	border-bottom: 2px solid #000;
	width: 90%;
	padding: 0px 5% 2%;
	margin: 0px auto 5%;
	color: #0068BD;
	font-size: 5.0vw;
	font-weight: 500;
	line-height: 1.3em;
}

#project article p {
	width: 90%;
	margin: 0px auto 10%;
}

#project article p .left {
	max-width: 70%;
	width: 70% !important;
	margin: 0px auto 5%;
	font-size: 3.0vw;
	line-height: 1.3em;
	float: inherit;
	text-align: center;
	display: block;
}

#project article p .right {
	max-width: 70%;
	width: 70% !important;
	margin: 0px auto 5%;
	font-size: 3.0vw;
	line-height: 1.3em;
	float: inherit;
	text-align: center;
	display: block;
}

#project article p .left img,
#project article p .right img {
	max-width: 100%;
	width: 100%;
	margin: 0px 0px 0% 0px;	
}

#project article #mirai {
	width: 90%;
	margin: 0px auto 10%;
	padding: 3% 5% 5%;
	border: 1px solid #000;
	box-sizing: border-box;
}

#project article #mirai h4 {
	border-bottom: 1px solid #000;
	padding: 8% 0px 3% 10%;
	color: #0068BD;
	font-size: 3.2vw;
	font-weight: 500;
	background: url(../../about/img/common/mirai_pc.png) no-repeat left top;
	background-size: contain;
	height: inherit;
	width: 90%;
	margin: 0px 0px 5% 0px;
	line-height: 1.3em;
}

#project article #mirai p {
	width: 100%;
}

#project article #mirai span {
	float: inherit;
	max-width: 50%;
	width: 50%;
	background: #FFF;
	padding: 0px;
	display: block;
	font-size: 3.0vw;
	font-weight: 400;
	line-height: 1.3em;
	margin: 0px auto 0px;
}

#project article #mirai span img {
	width: 100%;
	margin: 0px 0px 3% 0px;
	text-align: center;
}

#project article #mirai p {
	margin: 0px 0px 5% 0px;
	width: 100%;	
}
	
}


/* door 
------------------------------------------------------------*/


#door article section .title {
	width: 1000px;
	margin: 0px auto 30px;
	line-height: 0;
}

#door article section .line2 {
	margin: 0px 0px 80px;
}

#door article section .line2 h2 {
	margin: 20px 0px 10px;
}

#door article section .line2 p {
	margin: 0px auto 20px;
}

#door article section h3 {
	height: inherit;
	width: 1000px;
	text-align: center;
	line-height: inherit;
	margin: 0px auto 0px;
}


#door article h4 {
	border-bottom: 2px solid #000;
	width: 1000px;
	padding: 0px 0px 10px;
	margin: 0px auto 20px;
	color: #0068BD;
	font-size: 1.6em;
	font-weight: 500;
}

#door article p {
	width: 1000px;
	margin: 0px auto 50px;
}

#door article p .left {
	max-width: 400px;
	margin: 0px 20px 20px 0px;
	font-size: 0.9em;
	line-height: 1.3em;
}

#door article p .right {
	max-width: 400px;
	margin: 0px 0px 20px 20px;
	font-size: 0.9em;
	line-height: 1.3em;
}

#door article p .left img,
#door article p .right img {
	max-width: 300px;
	margin: 0px 0px 10px 0px;	
}

#door article #yakuwari {
	width: 1000px;
	margin: 0px auto 80px;
	padding: 50px;
	border-top: 3px solid #0068BD;
	border-bottom: 3px solid #0068BD;
	box-sizing: border-box;
}

#door article #yakuwari h4 {
	margin: 0px 0px 10px 0px;
	border-bottom: none;
}


#door article #yakuwari p {
	width: 100%;
	margin: 0px;
}


#door article a.link {
	line-height: 70px;
	color: #FFF;
	background: #0055A6;
	height: 70px;
	width: 100%;
	font-size: 1.5em;
	font-weight: 500;
	text-decoration: none;
	display: block;
}

@media screen and (max-width:1024px) {
	
#door article h4 {
	width: 90%;
}

#door article p {
	width: 90%;
}
	
}

@media screen and (max-width:768px) {

#door article section .title {
	width: 100%;
	margin: 0px auto 10%;
	line-height: 0;
}

#door article section .title img {
	width: 100%;
}

#door article section .line2 {
	margin: 0% 0px 10%;
}

#door article section .line2 h2 {
	margin: 5% 0px 0px;
}

#door article section .line2 p {
	margin: 0px auto 5%;
	width: 90%;
}

#door article section h3 {
	height: inherit;
	width: 100%;
	text-align: center;
	line-height: inherit;
	margin: 0px auto 0px;
	line-height: 0em;
}


#door article h4 {
	border-bottom: 2px solid #000;
	width: 90%;
	padding: 0px 5% 2%;
	margin: 0px auto 5%;
	color: #0068BD;
	font-size: 5.0vw;
	font-weight: 500;
	line-height: 1.3em;
}

#door article p {
	width: 90%;
	margin: 0px auto 10%;
}

#door article p .left {
	max-width: 100%;
	width: 100% !important;
	margin: 0px auto 5%;
	font-size: 3.0vw;
	line-height: 1.3em;
	float: inherit;
	text-align: center;
	display: block;
}

#door article p .right {
	max-width: 100%;
	width: 100% !important;
	margin: 0px auto 5%;
	font-size: 3.0vw;
	line-height: 1.3em;
	float: inherit;
	text-align: center;
	display: block;
}

#door article p .left img,
#door article p .right img {
	max-width: 70%;
	width: 70%;
	margin: 0px 0px 0% 0px;
}

#door article #yakuwari {
	width: 100%;
	margin: 0px auto 10%;
	padding: 5% 10%;
	border-top: 3px solid #0068BD;
	border-bottom: 3px solid #0068BD;
	box-sizing: border-box;
}

#door article #yakuwari h4 {
	margin: 0px 0px 2% 0px;
	border-bottom: none;
	padding: 0px;
}


#door article #yakuwari p {
	width: 100%;
	margin: 0px;
}

#door article p .link {
	width: 100%;
}

#door article a.link {
	line-height: inherit;
	color: #FFF;
	background: #0055A6;
	height: inherit;
	width: 90%;
	font-size: 3.5vw;
	font-weight: 500;
	text-decoration: none;
	display: block;
	padding: 5%;
}
	
}