@charset "Shift_JIS";
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200&display=swap;');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');



/* CSS Document */


/* ---------------------------------------------------------

01. 共通設定

--------------------------------------------------------- */

/* 既存CSSの上書き
--------------------------------------------------------- */

#Contents{
background-color: #fff;
overflow: hidden;
padding: 0 !important;
}
#Contents *{box-sizing: border-box;}
.FatMenuWide{border-top: none;}

/*****************************
Section, container
*****************************/
section{
width: 100%;
padding: 80px 0;
}
.indexContainer{
max-width: 1275px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 1304px){
.indexContainer{
margin-right: 15px;
margin-left: 15px;
}
}
/* オプション
--------------------------------------------------------- */
/*===============================================
オプション：1250px未満
===============================================*/
@media screen and (max-width:1250px){
.hide1250px{display: none;}
}
/*===============================================
オプション：768px以上
===============================================*/
@media screen and (min-width:768px){
.only_sp{display: none;}
}
/*===============================================
オプション：768px未満
===============================================*/
@media screen and (max-width:767px){
.only_pc{display: none;}
}



/*****************************
Head Line
*****************************/
/*title h1*/
.h1_energy{
text-align: left;
position: relative;
z-index: 3;
}
.h1_energy .langEn{
font-family: "Barlow", sans-serif;
font-weight: 100;
line-height: 1.1em;
font-style: normal;
font-size: 60px;
color: #fff;
background-color: transparent;
margin: 0;
padding: 0;
text-decoration: none;
}
.h1_energy .langJa{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
line-height: 1.3em;
font-style: normal;
font-size: 40px;
color: #fff;
}

/*title h2*/
.h2_energy{
display: flex;
gap: 0 43px;
justify-content: left;
align-items: first baseline;
flex-wrap: wrap;
margin: 0;
padding: 0;
background-image: none;
}
.h2_energy span{
background-color: transparent;
margin: 0;
padding: 0;
color: #1e1e1e;
}
.h2_energy span.langEn{
font-family: "Barlow", sans-serif;
font-weight: 100;
line-height: 1.3em;
font-style: normal;
font-size: 60px;
}
@media screen and (max-width: 767px){
.h2_energy span.langEn{
font-size: 60px;
}
}

.h3_energy span.langEn{
font-family: "Barlow", sans-serif;
font-weight: 100;
line-height: 1.3em;
font-style: normal;
/*font-size: 70px;*/
font-size: 28px;
}
.h2_energy span.langJa{
font-family: "Noto Sans JP", sans-serif;
font-weight: 200;
line-height: 1.3em;
font-style: normal;
font-size: 40px;
}
.h2_energy.CenterAdjust{
justify-content: center;
}

/*****************************
Link
*****************************/
.energyBtnSet{
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.energyBtnSet.alignLeft{
justify-content: left;
}
.energyBtnSet.alignRight{
justify-content: right;
}

.energyBtnSet a{
border: 1px solid #c50000;
border-radius: 30px;
background-clip: padding-box;
position: relative;
overflow: hidden;
padding: 7px 17px;
text-decoration: none;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
transition: .2s;
height: 38px;
min-width: 38px;
}
.energyBtnSet .whiteBtn a{
background-color: #fff;
}

.energyBtnSet a span{/*リンクにテキストがある場合はspanを使う*/
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 18px;
color: #c50000;
text-decoration: none;
position: relative;
z-index: 1;
transition: .2s;
white-space: nowrap;/*共通設定だと「Advertising Gallery 一覧」が折り返しになるため*/
}
.energyBtnSet a img{
display: block;
}
.energyBtnSet a:hover span{
color: #fff;
}
.energyBtnSet a:hover{
background-color: #c50000;
}
.energyBtnSet a:hover:before{
left: 0%;
}
.energyBtnSet a:hover img{
filter: invert(100%) sepia(57%) saturate(0%) hue-rotate(307deg) brightness(112%) contrast(109%);
}
/*ボタンの外にテキストがある場合*/
.energyBtnSet div{
display: flex;
gap: 10px;
align-items: center;
}
.energyBtnSet>div>span{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #c50000;
overflow: hidden;
position: relative;
}

/*+のみのボタン（CSSで描画）*/
.energyBtnSet .plus a{
padding: 0;
}
.energyBtnSet a span.stateIcon{
display: block;
position: relative;
width: 19px;
height: 19px;
}
.energyBtnSet a span.stateIcon::before{
/*yoko*/
content: "";
display: block;
width: 19px;
height: 1px;
background-color: #c50000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .2s;
}
.energyBtnSet a span.stateIcon::after{
/*tate*/
content: "";
display: block;
width: 19px;
height: 1px;
background-color: #c50000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(90deg);
transition: all .2s;
}
.energyBtnSet a:hover span.stateIcon::before,
.energyBtnSet a:hover span.stateIcon::after{
background-color: #fff;
}
.energyBtnSet a.opened span.stateIcon::after{
transform: translate(-50%,-50%) rotate(0);
}
.columnContentsMenuItem .energyBtnSet{
position: absolute;
right: 26px;
bottom: 22px;
}

.energyBtnSet .plus a::before{
width: 0%;
height: 0%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.energyBtnSet .plus a:hover:before{
width: 100%;
height: 100%;
}


/*button more plus*/
.energyBtnSet span+span{
margin-right: 10px;
}
.energyBtnSet span:not(:empty){
margin-left: 10px;
}
.energyBtnSet span span,
.energyBtnSet span:not(:empty) span{
margin-right: 0;
margin-left: 0;
}

/*****************************
Related Link Section
*****************************/
/*h2*/
#RelatedLink h2{
margin-bottom: 30px;
}

/*related link*/
.relatedLink ul{
display: flex;
align-items: stretch;
justify-content: center;
gap: 42px;
}
.relatedLink ul li{
width: 286px;
}
.relatedLink ul li img{
width: 100%;
max-width: 284px;
border: 1px solid #1e1e1e;
}

.relatedLink ul li a img[src*="baseball"]{
border-color: #fcac0f;
}
.relatedLink ul li a img[src*="hyoron"]{
border-color: #999;
}
.relatedLink ul li a img[src*="social"]{
border-color: #e60013;
}
.relatedLink ul li a img[src*="environment"]{
border-color: #1e1e1e;
}
@media screen and (max-width:767px){
#RelatedLink{
padding: 40px 0;
}
.relatedLink ul{
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
}
.relatedLink ul li{
width: calc((100% - 12px) / 2);
}

}

/*****************************
cmn_container_w
*****************************/
.top_company{
background-color: #333;
padding: 35px 0;
margin-bottom: 60px;
}
.top_company h2{
background: none;
color: #fff;
font-size: 100%;
font-weight: normal;
margin: 0 0 15px;
padding: 0;
}
.top_company_list_wrap{
display: flex;
justify-content: space-between;
}
.top_company_list{
width: 23%;
}
.top_company_list li{
color: #fff;
font-size: 90%;
}
.top_company_list li + li{
margin-top: 5px;
}
.top_company_list a{
color: #fff;
text-decoration: none;
}
.top_company_list a[target="_blank"]::after{
content: '';
background: url(/products/energy/portal/image/ico_window_sp.png) right center/10px no-repeat;
display: inline-block;
height: 10px;
margin-left: 6px;
width: 10px;
}
.top_company_list a:hover{
text-decoration: underline;
}

.cmn_container_w{
margin: 0 auto;
max-width: 1275px;
padding: 0 15px;
position: relative;
}

@media screen and (max-width:767px){
.top_company{
padding: 30px 0;
}
.top_company_list_wrap{
display: block;
}
.top_company_list{
width: 100%;
}
.top_company_list:nth-child(n+3){
margin-top: 10px;
}
.top_company_list li + li{
margin-top: 10px;
}
}