@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// asphalt共通
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.concept_area {
	display: flex;
	justify-content:space-between;
	margin-bottom: 90px;
}

.concept_area .box{
	width: 210px;
	min-height: 210px;
	padding: 4px;
	box-sizing: border-box;
	margin: 0;
	border-radius:50%;
	border:dotted 2px #cad3d8;
	font-size: 0;
}

.concept_area .box p{
	color: #455a64;
	font-size:3.0rem;
	text-align: center;
	width: 200px;
	height: 200px;
	font-family: 'Roboto Condensed', sans-serif;	
	background: #eceff1;
	border-radius:50%;
	vertical-align: middle;
	display: table-cell;	
}

.concept_area .box p span{
	font-size:1.8rem;
	display: block;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// h3
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

h3.ttl{
	font-size:2.8rem;
	text-align: center;
	margin: 10px;
	font-weight: normal;
	font-family: 'Roboto Condensed', sans-serif;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// overview
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

#main_img_overview{
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
	position: relative;
	background: url(/en/asphalt/overview/images/bg01.jpg) left top repeat-x;
	overflow: hidden;
}

#main_img_overview ul{
	width: 1000px;
	position:   relative;
	top:-430px;	
	left:calc((100% - 1000px) / 2);
	z-index: 5;
	text-align: left;
}

#main_img_overview ul li{
	position: absolute;
	padding-left: 20px;
	background: url(/en/common/images/icon_arrow07.png) left 6px no-repeat;
}

#main_img_overview ul li a:hover{
	text-decoration: underline;
}

#main_img_overview .nav01{
	left:-10px;
	top:93px;
}
#main_img_overview .nav02{
	left:-10px;
	top:150px;
}
#main_img_overview .nav03{
	left:-10px;
	top:180px;
}
#main_img_overview .nav04{
	left:-10px;
	top:180px;
}
#main_img_overview .nav05{
	left:-10px;
	top:265px;
}
#main_img_overview .nav06{
	left:-10px;
	top:310px;
}

#main_img_overview .nav07{
	left:790px;
	top:53px;
}
#main_img_overview .nav08{
	left:790px;
	top:150px;
}

.concept_area.overview .box{
	width: 124px;
	height: 124px;
	min-height: 124px;
}
.concept_area.overview .box p{
	width: 112px;
	height: 112px;
	font-size:1.6rem;	
}

.overview_design{
	display: flex;
	background: #eceff1;
	margin-bottom: 30px;
}
.overview_design > figure{
	width: 226px;
}
.overview_design > figure img{
	width: 100%;
}
.overview_design .detail{
	width: calc(100% - 226px);
	padding-bottom: 10px;
}
.overview_design .detail h3{
	font-size:2.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	padding: 25px 10px 10px 25px;
	
	margin-bottom: 30px;
	display: flex;
}

.overview_design .detail h3:nth-child(1){
	border-bottom:solid 2px #ced7db;
}

.overview_design .detail h3.no_bd{
	border-bottom: none;
}

.overview_design .detail .exp{
	font-size:1.6rem;
	color: #616161;
	line-height: 1.4;
	padding:0 25px 15px;
}
.overview_design .detail .txt{
	font-size:1.8rem;
	color: #616161;
	padding:0 25px;
}

.overview_design .more_info {
	margin:0 15px 0 auto;
}
.overview_design .more_info a{
	padding: 0 0 0 50px;
	display: inline-block;
	font-size:2.0rem;
	font-family: 'Roboto Condensed', sans-serif;
	background: url(/en/common/images/icon_arrow07.png) 25px 10px no-repeat;
}

.overview_design .more_info a:hover{
	text-decoration: underline;
}

.overview_design .more_info.active a{
	padding: 0 0 0 50px;
	display: inline-block;
	
	font-family: 'Roboto Condensed', sans-serif;
	background: url(/en/common/images/icon_arrow08.png) 25px 10px no-repeat !important;
}


.overview_design .btn_close{
	border-top:solid 2px #ced7db;
	text-align: right;
	width: calc(100% + 276px);
	margin-left: -256px;
	padding-right: 20px;
	box-sizing: border-box;
}
.overview_design .btn_close a{
	padding: 10px 0 0 50px;
	display: inline-block;
	font-size:2.0rem !important;
	font-family: 'Roboto Condensed', sans-serif !important;
	font-weight: bold;
	background: url(/en/common/images/icon_arrow08.png) 25px 20px no-repeat;
}
.overview_design .btn_close a:hover{
	text-decoration: underline;
}
.overview_design .detail_info{
	padding:0 20px 0 30px;
}

.overview_design .detail_info h3{
	padding: 0;
}

.overview_design .flex{
	display: flex;
}
.overview_design .flex .detail_left{
	width: 58%;
	padding-right: 2%;
}
.overview_design .flex .detail_right{
	width: 40%;
}

.overview_design .detail_left .flex{
	display: flex;
}
.overview_design .detail_left .flex .txt{
	width: 58%;
	padding: 0 2% 0 0;
}
.overview_design .detail_left .flex .img{
	width: 40%;
}

.overview_design .detail_info h4{
	margin-bottom: 10px;
}

.overview_design .detail_info .list_txt li{
	margin-bottom: 0;
	font-size:1.5rem;
}
.overview_design .detail_info p{
	font-size:1.5rem;
}

.overview_design .combustion_box{
	display: flex;
	justify-content: space-between;
	background: url(../overview/images/plus.png) center center no-repeat #fff;
	background-size:12px auto;
	padding: 5px;
}

.overview_design .combustion_box h5{
	font-size:1.4rem;
	margin-bottom: 5px;
}
.overview_design .combustion_box div{
	width: calc(50% - 20px);
}
.overview_design .combustion_box .list_txt{
	margin-left: 10px;
}
.overview_design .combustion_box .list_txt li{
	font-size:1.2rem;
}

.overview_design .combustion_box02{
	display: flex;
	justify-content: space-between;
	background-size:12px auto;
	margin-bottom: 10px;
}
.overview_design .combustion_box02 h5{
	font-size:1.4rem;
	margin-bottom: 5px;
	text-align: center;
}
.overview_design .combustion_box02 div{
	width: calc(50% - 20px);
	background: #fff;
	padding: 5px;
}
.overview_design .combustion_box02 .list_txt{
	margin-left: 10px;
}
.overview_design .combustion_box02 .list_txt li{
	font-size:1.2rem;
}

.overview_design .combustion_box03{
	padding-top: 30px;
	background: url(../overview/images/arrow.png) 23% top no-repeat, url(../overview/images/arrow.png) right 23% top no-repeat;
}
.overview_design .combustion_box03 h5{
	font-size:1.4rem;
	margin-bottom: 5px;
	text-align: center;
}
.overview_design .combustion_box03 div{
	background: #fff;
	padding: 5px;
}
.overview_design .combustion_box03 .list_txt{
	margin-left: 10px;
}
.overview_design .combustion_box03 .list_txt li{
	font-size:1.2rem;
}


.overview_design .combustion_box04 h5{
	font-size:1.8rem;
	text-align: center;
	margin-bottom: 10px;
}
.overview_design .combustion_box04 div{
	background: #fff;
	padding:15px;
}

.overview_design .dust_box{
	padding: 10px;
	background: #fff;
}
.overview_design .dust_box figure{
	width: 50%;
	margin: 0 auto 10px;
}
.overview_design .dust_box .list_txt{
	margin-left: 10px;
}
.overview_design .dust_box .list_txt li{
	font-size:1.2rem;
}

.overview_box .box{
	background: #eceff1;
	margin-bottom: 30px;
}

.overview_box .inner{
	padding: 30px 30px 20px;
}

.overview_box .flex{
	display: flex;
}
.overview_box .flex div{
	width: 50%;
}

.overview_box h3{
	font-size:3.0rem;
	font-family: 'Roboto Condensed', sans-serif;
	margin-bottom: 10px;
}
.overview_box p{
	fotn-size:2.0rem;
}

.overview_box .link_txt{
	margin-top: 20px;
	padding-left: 15px;
	background: url(/en/common/images/icon_arrow01.png) left 5px no-repeat;
    background-size: 6px auto;
}
.overview_box .link_txt a{
	color:#212121;	
}

.overview_box .box{
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.overview_box .box:hover{
	opacity: 0.7;
}

.overview_design .pht_2clm figure figcaption {
	margin-top: 0;
}
.overview_design figcaption {
	font-size: 1.4rem;
	margin-top: 5px;
}

/*-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// anchor link
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----*/

#anc01,#anc02,#anc03,#anc04,#anc05,#anc06,#anc07,#anc08{
	margin-top:-116px;
	padding-top:116px;
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// MBD
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.concept_area.nbd{
	width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// compact
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.compact_img{
	display: flex;
	justify-content: space-around;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// Recycle
+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

h1.recycle span{
	display: block;
	font-size:4.0rem;
}

.exhaust_img01{
	width: 655px;
	margin: 0 auto;
}

.concept_area.recycle .box{
	width: 180px;
	min-height: 180px;
}
.concept_area.recycle .box p{
	width: 176px;
	height: 176px;
}

.flow_img .box{
	width: 30%;
	margin: 0;
}
.flow_img .box img{
	margin-bottom: 10px;
}
.flow_img .arrow{
	width: 5%;
	display: flex;
	align-items: center;
	padding-bottom: 20px;
}
.flow_img .arrow img{
	width: 70%;
	margin: 0 auto;
}