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

/*---------------------------------------------------------------------------------------
	メインビジュアル
----------------------------------------------------------------------------------------*/

header{background:rgba(0,0,0,0.7);}
header nav ul > li.mega > ul{ background:rgba(0,0,0,0.7);}

#topmain{background: #000; height: 99px;}
@media screen and (max-width: 1240px) {
#topmain{height: 59px;}
}

#video{width: 100%; vertical-align: bottom;}
@media screen and (max-width: 800px) {
#video{display: none;}
#sliderarea{width:100%; margin-left:auto; margin-right:auto; overflow: hidden;}
.bxslider li{overflow: hidden;}
.bxslider img {display: block; margin: 0 auto;}
}

#contents{ width: 100%;}

/*---------------------------------------------------------------------------------------
	タイトル
----------------------------------------------------------------------------------------*/
.toptitle{width: 95%; max-width: 1200px; margin-left: auto; margin-right: auto; display:flex;}
.toptitle li:nth-child(1){padding-right: 50px; border-left: 2px solid #e50012; padding-left: 15px;}
.toptitle li:nth-child(2){padding-top: 30px;}
.subtitle{font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; color: #998675; font-size: 90%;}
.title{font-size: 160%; font-weight: bold;}
/*************** 800px以下 ***************/
@media screen and (max-width: 800px) {
.toptitle{display: block;}
.toptitle li:nth-child(2){padding-top: 10px; padding-left: 5px;}
}

/*---------------------------------------------------------------------------------------
	トピックス
----------------------------------------------------------------------------------------*/
#topics{background: #f5f0eb; padding-bottom: 80px; padding-top: 80px; }
#topics #topicsarea{width: 95%; max-width: 1200px; margin-left: auto; margin-right: auto;}
#topics #topicsarea table{width: 100%;}
#topics #topicsarea table th{width: 22%; font-weight: normal; border-left: 2px solid #e50012; padding-left: 15px; position: relative; padding-right: 10px;}
#topics #topicsarea table td div{box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); background: #fff; padding: 20px 20px 10px 20px; border-radius: 2px;}
#topics #topicsarea table td div dl{}
#topics #topicsarea table td div dt{width: 120px; display: block; float: left; text-align: left; font-weight: normal; padding-bottom: 10px;}
#topics #topicsarea table td div dd{padding-left:120px; text-align: left; padding-bottom: 10px;}
/*************** 800px以下 ***************/
@media screen and (max-width: 800px) {
#topics #topicsarea table th{width: 100%; display: block;}
#topics #topicsarea table td{width: 100%; display: block; padding-top: 20px;}
#topics #topicsarea table td div dt{width: 100%; padding-bottom: 0;}
#topics #topicsarea table td div dd{padding-left: 0; padding-bottom: 20px;}
}

/*---------------------------------------------------------------------------------------
	詳細button
----------------------------------------------------------------------------------------*/
.shosai{text-align: right; line-height: 1.5; font-size: 120%; font-weight: bold;}
.shosai::after {content: ''; display: inline-block; width: 40px; height: 40px; background-image: url("../common/images/link.png"); background-size: contain; background-repeat: no-repeat; vertical-align: bottom;}

.topicslink{position: absolute; bottom: 0; right: 10px; font-size: 120%; font-weight: bold;}
.topicslink::after {content: ''; display: inline-block; width: 40px; height: 40px; background-image: url("../common/images/link.png"); background-size: contain; background-repeat: no-repeat; vertical-align: bottom;}

/*---------------------------------------------------------------------------------------
	斜め背景
----------------------------------------------------------------------------------------*/
#top1{background: #fff url("images/bg2.jpg") no-repeat left top; background-size: 100% 100%; width: 100%;}

/*---------------------------------------------------------------------------------------
	未来
----------------------------------------------------------------------------------------*/
#mirai{padding-bottom: 70px;}


/*---------------------------------------------------------------------------------------
	会社情報
----------------------------------------------------------------------------------------*/
#com{margin-bottom: 70px;width: 100%; background: #F5F0EB;}
#comin{width: 100%; max-width: 1920px; margin-left: auto; margin-right: auto; position: relative;}
#comin img{width: 100%;}
#commap1{display: block; padding-top: 50px; padding-bottom: 50px;}
#commap2{display: none;}

#titlearea{width: 100%; max-width: 1200px; margin: 0 auto; position: relative;}
#comtitle{position: absolute; left: 30px; top: 30px; width: 1000px; z-index: 1; max-width: 100%;}

#compdf{position: absolute; right: 150px; bottom: 100px; z-index: 1;}
#compdf img{width: 250px;}
#marubenilink{position: absolute; right: 150px; bottom: 50px; z-index: 1;}
#marubenilink img{width: 250px;}

/*************** 1500px以下 ***************/
@media screen and (max-width: 1500px) {
#commap1{display: none;}
#commap2{display: block; padding-top: 50px; padding-bottom: 50px;}
#marubenilink{right: 10px;}
#compdf{right: 10px;}
}
/*************** 800px以下 ***************/
@media screen and (max-width: 800px) {
#com{padding-top: 20px; padding-bottom: 20px;}

#comtitle{left: 0px; top: 0px;}

#compdf{position: absolute; right: 5px; bottom: 25px;}
#compdf img{width: 110px;}
#marubenilink{position: absolute; right: 5px; bottom: 0px;}
#marubenilink img{width: 110px;}
}

/*---------------------------------------------------------------------------------------
	What's丸紅エネックス
----------------------------------------------------------------------------------------*/
#ennex{padding-bottom: 70px;}

/*---------------------------------------------------------------------------------------
	拠点紹介
----------------------------------------------------------------------------------------*/
#base{width: 95%; margin: 0 auto 70px auto;}
#base #basein ul{width: 100%; display:flex; margin-top: 40px;}
#base #basein li{width: 33.3333%;}
#base #basein li img{width: 100%;}
/*************** 800px以下 ***************/
@media screen and (max-width: 800px) {
#base #basein ul{width: 100%; display:block;}
#base #basein li{width: 100%; display: block; margin-bottom: 40px;}
}

/*---------------------------------------------------------------------------------------
	サステナビリティ・採用情報
----------------------------------------------------------------------------------------*/
#topbottom{width: 100%; margin-bottom: 70px;}
.menulistR{display: flex; width: 100%; justify-content: flex-end;}
.menulistL{display: flex; width: 100%; justify-content: flex-start;}
.menulistR, .menulistL{}
.menuarea1, .menuarea2, .menuarea3, .menuarea4{width: 50%; max-width: 600px; position: relative;}
.menuarea1{background: #fff url("../common/images/bg_half_a.jpg") no-repeat left top; background-size: 100% 100%;}
.menuarea2{background: #fff url("../common/images/bg_half_b.jpg") no-repeat left top; background-size: 100% 100%;}
.menuarea3{background: #fff url("../common/images/bg_half_c.jpg") no-repeat left top; background-size: 100% 100%;}
.menuarea4{background: #fff url("../common/images/bg_half_d.jpg") no-repeat left top; background-size: 100% 100%;}
.menuphoto{width: 50%;}
.menuphoto img{width: 100%;}
.boxmenu{width: 100%; padding: 30px; position: relative;}
.dlmenu{margin: 0px 30px;}
.dlmenu li{}
.dlmenu li::before{content: "〉"; font-size: 80%;}
.boxlink{font-size: 120%; font-weight: bold; padding-right: 20px; padding-top: 30px; text-align: right;}
.boxlink::after {content: ''; display: inline-block; width: 40px; height: 40px; background-image: url("../common/images/link.png"); background-size: contain; background-repeat: no-repeat; vertical-align: bottom;}
.listtxt{margin-top: 30px;}
/*************** 1000px以下 ***************/
@media screen and (max-width: 1000px) {
.menulistR, .menulistL{display: block;}
.menuarea1, .menuarea2, .menuarea3, .menuarea4{width: 100%; max-width: 100%;}
.menuphoto{width: 100%;}
}