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

company.css

***********************************************************************************************************************/
.company{

}

.company main{
	overflow: hidden;
}



/* sec *********************************/
.sec_hd{
	position: relative;
}
.sec_lead{
	padding: 8% 0 0;
}
.sec_ceo{
	padding: 5% 0 0;
}
.sec_outline{
	padding: 8% 0 0;
}



@media screen and (max-width: 767px) {
.sec_lead{
	padding: 12% 0 0;
}
.sec_ceo{
	padding: 8% 0 0;
}
.sec_outline{
	padding: 18% 0 0;
}
}



/* hd_main *********************************/
.hd_main{
}
.hd_main img{
	width: 100%;
	height: auto;
}
.hd_main .pc{}
.hd_main .sp{ display: none;}


p.p_hd_ttl{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	padding: 0;
	margin: 0;
	font-size: 40px;
	font-size: clamp(20px, 4vw, 40px);
	font-weight: 600;
	color: #fff;
	text-align: center;
}
p.p_hd_ttl .en{
	display: block;
	font-size: 16px;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1;
}


@media screen and (max-width: 767px) {
.hd_main .pc{ display: none;}
.hd_main .sp{ display: block;}
}




/* list_subnavi *********************************/
.list_subnavi{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	width: 100%;
	max-width: 820px;
	margin: 8% auto 0;
}
.list_subnavi.ft{
	margin: 8% auto;
}

.list_subnavi li{
	width: 32%;
}
.list_subnavi li.active .btn_arrow{
	background-color: #000;
	background-image: none;
}


@media screen and (max-width: 767px) {
.list_subnavi.ft{
	margin: 12% auto;
}

.list_subnavi li{
	width: 49%;
}
.list_subnavi li:first-child{
	width: 100%;
	margin-bottom: 2%;
}
}



/*** h1〜  **********************************/
h1.h1_ttl{
	font-size: 44px;
	font-size: clamp(24px, 4.4vw, 44px);
	font-weight: 800;
	line-height: 1.5em;
	margin-bottom: 0.8em;
}
.company_dx h1.h1_ttl,
.company_sdgs h1.h1_ttl{
	text-align: center;
}

h1.h1_ttl .en{
	display: block;/**/
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
	line-height: 1.6em;
	margin-bottom: 0.5em;
}

h2.h2_ceo{
	font-size: 30px; /*26px*/
	font-size: clamp(20px, 3vw, 30px); /*clamp(20px, 2.6vw, 26px)*/
	font-weight: 800;
	margin-bottom: 1.2em;
}
h2.h2_ceo .en{
	display: block;/**/
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
	color: #004da0;
	line-height: 1.6em;
	margin-bottom: 0.5em;
}
h2.h2_ceo .en .big{
	font-size: 160%;
	padding-right: 0.5em;
}

h3.h3_outline{
	font-size: 22px;
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 700;
	margin-bottom: 1em;
}



p.p_lead{
	text-align: center;
}


@media screen and (max-width: 767px) {
p.p_lead{
	text-align: justify;
}
p.p_lead .resp_autowrap{
	display: inline;
}
}





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

社長挨拶／会社概要ページ

*************************************************************************************
**************************************************************************************/
.company_outline{
}



/*** ceo_wrap **********************************/
.ceo_wrap{
	width: 75%;
	margin-left: auto;
}

@media screen and (max-width: 767px) {
.ceo_wrap{
	width: 90%;
}
}



/*** list_ceo **********************************/
.list_ceo{
}
.list_ceo li{
	margin-top: 8%;
}
.list_ceo li:first-child{
	margin-top: 0;
}
.list_ceo li p.p_ceo{
	text-align: right;
}
.list_ceo li .sign{
	display: inline-block;
	width: 220px;
	padding-left: 1em;
}



@media screen and (max-width: 767px) {
.list_ceo li .sign{
	width: 160px;
}
.list_ceo li p{
	text-align: justify;
}
.list_ceo li p .resp_autowrap{
	display: inline;
}
}



/*** float_outline **********************************/
.float_outline{
	font-size: 16px;
	font-size: clamp(14px, 1.6vw, 16px);
	border-top: 1px solid #e5e5e5;
}
.float_outline tr{
	border-bottom: 1px solid #e5e5e5;
}
.float_outline th{
	width: 10em;
	font-weight: 700;
	text-align: center;
	padding: 1.5em 0;
}
.float_outline td{
	color: #4d4d4d;
	padding: 1.5em 0;
}


@media screen and (max-width: 767px) {
.float_outline th{
	display: block;
	width: auto;
	text-align: left;
	padding: 1.5em 0 0;
}
.float_outline td{
	display: block;
	width: auto;
	padding: 0.8em 0 1.5em;
}
}






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

DX宣言ページ

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

.company_dx{
}


/* sec *********************************/
.sec_dx_policy{
	margin-top: 6%;
	padding: 6% 0;
	background-color: #f7f7f7;
}
.sec_dx_strategy{
	padding: 6% 0;
}
.sec_dx_utilization{
	margin-top: 6%;
	padding: 6% 0;
	background-color: #f7f7f7;
}
.sec_dx_human{
	padding: 6% 0 0;
}

.atc_dx{
	margin-top: 5%;
}


@media screen and (max-width: 767px) {
.sec_dx_policy{
	margin-top: 12%;
	padding: 12% 0;
}
.sec_dx_strategy{
	padding: 12% 0;
}
.sec_dx_utilization{
	margin-top: 12%;
	padding: 12% 0;
}
.sec_dx_human{
	padding: 12% 0 0;
}

.atc_dx{
	margin-top: 10%;
}
}




/*** h1〜  **********************************/
h2.h2_dx{
	font-size: 34px;
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 800;
	margin-bottom: 1em;
}
h2.h2_dx .ttl{
	position: relative;
	display: block;
	font-size: 26px;
	font-size: clamp(18px, 2.6vw, 26px);
	font-weight: 700;
	color: #004da0;
	line-height: 1em;
	padding-left: 1.4em;
	margin-bottom: 0.5em;
}
h2.h2_dx .ttl::before{
	content: "";
	position: absolute;
	top: 0.05em;
	left: 0;
	width: 1.2em;
	height: 1em;
	background: url("/common/img/icon_electric/icon_electric.svg") center center / contain no-repeat;
}

h3.h3_dx{
	font-size: 22px;
	font-size: clamp(16px, 2.2vw, 22px);
	font-weight: 700;
	margin-bottom: 0.8em;
}
h4.h4_dx_phase{
	font-size: 24px;
	font-size: clamp(18px, 2.4vw, 24px);
	font-weight: 700;
	margin-bottom: 0.4em;
}




/*** list_dx_phase **********************************/
.list_dx_phase{
}
.list_dx_phase li{
	margin-top: 20px;
}
.list_dx_phase li dl{
	display: flex;
	justify-content: space-between;
}
.list_dx_phase li dl dt{
	width: 14em;
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
	color: #fff;
	text-align: center;
	padding: 2em 0;
	border-radius: 5px 0 0 5px;
	background-color: #004da0;
}
.list_dx_phase li dl dt .big{
	display: block;
	font-size: 180%;
}
.list_dx_phase li dl dd{
	width: calc(100% - 17em);
	padding: 2em 1em 2em 2em;
	border-radius: 0 5px 5px 0;
	background-color: rgba(0,77,160, 0.04);
}
.list_dx_phase li dl dd p{
	padding: 0;
	margin: 0;
}


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

.list_dx_phase li dl{
	flex-direction: column;
}
.list_dx_phase li dl dt{
	width: auto;
	padding: 0.6em 0;
	border-radius: 5px 5px 0 0;
}
.list_dx_phase li dl dt .big{
	display: inline-block;
	padding-right: 0.5em;
}
.list_dx_phase li dl dd{
	width: auto;
	padding: 2em;
	border-radius: 0 0 5px 5px;
}
}



/*** list_dx **********************************/
.list_dx{
}
.list_dx li{
	position: relative;
	font-size: 16px;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.6em;
	margin-top: 0.8em;
	padding-left: 0.8em;
}
.list_dx li:first-child{
	margin-top: 0;
}
.list_dx li::before{
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 0.4em;
	height: 0.4em;
	background-color: #f29600;
	border-radius: 50%;
}



/*** float_dx **********************************/
.float_dx{
	font-size: 16px;
	font-size: clamp(13px, 1.6vw, 16px);
	border: 1px solid #d5e7f6;
}
.float_dx tr:nth-child(odd){
	background-color: rgba(0,77,160, 0.04);
}
.float_dx tr:nth-child(even){
	background-color: #fff;
}

.float_dx th{
	width: 33.3333333%;
	font-weight: 700;
	color: #fff;
	text-align: center;
	padding: 1em 0;
	background-color: #004da0;
	border-right: 1px solid #d5e7f6;
}
.float_dx td{
	vertical-align: middle;
	text-align: center;
	padding: 1em 0.5em;
	border-right: 1px solid #d5e7f6;
}





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

SDGsページ

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

.company_sdgs{
}


/* sec *********************************/
.sec_sdgs{
	padding: 6% 0 0;
}
.sec_attempt{
	padding: 8% 0 0;
}


@media screen and (max-width: 767px) {
.sec_sdgs{
	padding: 12% 0 0;
}
.sec_attempt{
	padding: 15% 0 0;
}
}




/*** h1〜  **********************************/
h2.h2_sdgs{
	font-size: 26px;
	font-size: clamp(18px, 2.6vw, 26px);
	font-weight: 700;
	text-align: center;
	margin-bottom: 0.8em;
}



/* logo_sdgs *********************************/
.sdgs_ttl_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	align-items: center;
}
.sdgs_ttl_box_l{
	width: 24%;
}
.sdgs_ttl_box_r{
	width: 70%;
}

.logo_sdgs{
}


@media screen and (max-width: 639px) {
.sdgs_ttl_box_l{
	width: 70%;
	margin: 0 auto;
}
.sdgs_ttl_box_r{
	width: 100%;
	margin-top: 1em;
}
}



/*** float_sdgs **********************************/
.float_sdgs_wrap{
}

.float_sdgs{
	font-size: 16px;
	font-size: clamp(13px, 1.6vw, 16px);
	border: 1px solid #d5e7f6;
}
.float_sdgs tr:nth-child(odd){
	background-color: rgba(0,77,160, 0.04);
}
.float_sdgs tr:nth-child(even){
	background-color: #fff;
}

.float_sdgs th{
	font-weight: 700;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	padding: 1em 0;
	background-color: #004da0;
	border-right: 1px solid #d5e7f6;
}
.float_sdgs td{
	vertical-align: middle;
	padding: 1em 1em;
	border-right: 1px solid #d5e7f6;
}
.icon_sdgs{
	width: 120px;
}
.only_sp_scroll{
	display: none;
}


@media screen and (max-width: 767px) {
.icon_sdgs{
	width: 80px;
}
}


@media screen and (max-width: 639px) {
.float_sdgs_wrap{
	width: 100%;
  overflow-x: auto;   /* はみ出たときに横スクロールさせる */
  -webkit-overflow-scrolling: touch; /* iOSで滑らかにスクロールさせる */
}
.float_sdgs{
  width: 100%;
  min-width: 640px;   /* これ以下に縮まない最小幅（列数に応じて調整） */
  border-collapse: collapse;
}
.icon_sdgs{
	width: 80px;
}
.only_sp_scroll{
	display: block;
}

}





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

print

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

@media print {

}