@charset "Shift_JIS";
/*CSS Document*/
@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');


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

	01. 

---------------------------------------------------------*/
/*
---------------------------------------------------------*/
.cmn_container {
margin: 0 auto;
max-width: 1305px;
padding: 0 15px;
position: relative;
}
.flr {
float: right;
}
h2.h2_energy,
h2.h3_energy{
margin: 0 0 0;
background-color: transparent;
background-image: none;}
h2.h2_energy span,
h2.h3_energy span{
background-color: transparent;
padding: 0;
}
.JS h2.h2_energy,
.JS h2.h3_energy {
margin: 0 0 0;
}


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

	02. 

---------------------------------------------------------*/
/*****************************
Slider Section
*****************************/
section.top_mv{
padding: 0;
position: relative;
z-index: 1;
}
section.top_mv div{
line-height: 0;
}
.top_mv .top_slide_title{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
z-index: 3;
height: calc(100% - 37px);
overflow: hidden;
pointer-events: none;
}
.top_mv .top_slide_title .slideTitleInner{
max-width: 1275px;
margin: 0 auto;;
height: auto;
position: relative;
}
.top_mv .top_slide_title .slideTitle{
width: 366px;
margin-left: 15px;
}
.top_mv .top_slide_title .slideTitle .h1_energy{
padding-top: 55px;
margin-bottom: 20px;
}
.top_mv .top_slide_title .slideTitle .h1_energy+.h1_energySub{
position: relative;
z-index: 3;
}
.top_mv .top_slide_title .slideTitle,
.top_mv .top_slide_title .slideTitle{
opacity: 0;
width: fit-content;
transition: opacity 0.3s ease-in-out;
}
.top_mv .top_slide_title .slideTitle.is-active,
.top_mv .top_slide_title .slideTitle.is-active{
opacity: 1;
}
.top_mv .top_slide_title .slideTitle .h1_energy span {
color: #c50000;
}
.top_mv .top_slide_title .slideTitle .h1_energySub span.langJa {
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 20px;
line-height: 1.9em;
color: #1e1e1e;
}
.top_mv .top_slide_title .slideTitleInner::before{
content: "";
display: block;
width: 1000px;
height: 2000px;
position: absolute;
transform-origin: top left;
transform: rotate(36.5deg) skew(-1deg, -1deg);
top: -469px;
left: -200px;
background-color: transparent;
z-index: 1;
transition: all .5s;
}

/*case, title backgournd color white*/
.top_mv .top_slide_title:has(div.white) .slideTitleInner::before{
background-color: rgba(242, 244, 246, .6);
} 
.top_mv .top_slide_title:has(div.white) .slideTitle .h1_energy span{
color: #c50000;
}
.top_mv .top_slide_title:has(div.white) .slideTitle .h1_energy+.h1_energySub span{
color: #1e1e1e;
}

/*case, title backgournd color red*/
.top_mv .top_slide_title:has(div.red) .slideTitleInner::before{
background-color: rgba(197,0,0,.8);
} 
.top_mv .top_slide_title:has(div.red) .slideTitle .h1_energy span{
color: #fff;
}
.top_mv .top_slide_title:has(div.red) .slideTitle .h1_energy+.h1_energySub span{
color: #fff;
}

.slider_list .h1_energy{
position: relative;
z-index: 5;
}


/*slider and UI*/
#top_slider{
position: relative;
z-index: 2;
}
/*slide*/
#top_slider ul li.slider_list {
height: 44vw;
max-height: 685px;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

#top_slider ul li.topslide01 {
background-image: url("/products/energy/portal/image/index/kv1.png");
}
#top_slider ul li.topslide02 {
background-image: url("/products/energy/portal/image/index/kv3.png");
}
#top_slider ul li.topslide03 {
background-image: url("/products/energy/portal/image/index/kv3.png");
}

#top_slider ul li a {
display: table;
width: 100%;
height: 100%;
vertical-align: middle;
text-decoration: none;
}
#top_slider ul li a.no_link{
cursor: default;
pointer-events: none;
}
#top_slider ul li a:hover {
text-decoration: none;
}
.sliderInner{
position: absolute;
top: 0;
left: 0;
display: none;
}
.top_mv_controller::after {
content: "";
display: block;
width: 1077px;
height: 1000px;
transform: skew(-37.8deg);
background-color: #f2f4f6;
position: absolute;
top: 0;
left: -900px;
transform-origin: top left;
z-index: -1;
}
/*top slide controler*/
.top_mv_controller{
max-width: 1275px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: row-reverse;
align-items: start;
position: relative;
z-index: 0;
}
/*top slide controler - slick dots*/
#top_slider .slick-prev,
#top_slider .slick-next {
display: none!important;
}
.top_mv_controller .slick-dots {
display: inline-block;
padding-top: 21px;
text-align: center;
line-height: 14px!important;
}
.top_mv_controller .slick-dots li {
position: relative;
display: inline-block;
width: 100px;
height: 14px;
margin-right: 10px;
text-align: center;
cursor: pointer;
}
.top_mv_controller .slick-dots li button {
position: absolute;
left: 0;
top: 2px;
display: inline-block;
width: 100px;
height: 14px;
padding: 0;
border: none;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-color: transparent;
cursor: pointer;
outline: none;
appearance: none;
transition: 0.2s;
box-sizing: content-box;
font-size: 0;
}
.top_mv_controller .slick-dots li button:after {
content: " ";
position: absolute;
top: 50%;
left: 0;
width: 100px;
height: 4px;
margin-top: -4px;
margin-left: -4px;
background-color: #faccd4;
font-size: 0;
}
.top_mv_controller .slick-dots li.slick-active button:after,
.top_mv_controller .slick-dots li button:hover:after {
background-color: #e50027;
}
#top_slider .slick-initialized .slick-slide {
height: auto !important;
overflow: hidden;
}

/*controler  (pause, play)*/
.top_mv_controller .slider_stop_play {
height: 14px;
line-height: 14px;
width: 14px;
position: relative;
display: flex;
gap: 10px;
padding-top: 15px;
top: 7px;
}
/*pause, palay*/
.top_mv_controller .slider_stop_play .slider-btn {
display: block;
width: 14px;
height: 14px;
line-height: 14px;
cursor: pointer;
position: relative;
}
.top_mv_controller .slider_stop_play .slider-btn span {
display: block;
width: 14px;
height: 14px;
position: relative;
}
/*pause*/
.top_mv_controller .slider_stop_play .slider-btn:not(.paused) span::before,
.top_mv_controller .slider_stop_play .slider-btn:not(.paused) span::after {
content: "";
display: block;
width: 2px;
height: 12px;
background-color: #faccd4;
position: absolute;
}
.top_mv_controller .slider_stop_play .slider-btn span::before{
top: 1px;
left: 3px;
}
.top_mv_controller .slider_stop_play .slider-btn span::after{
top: 1px;
right: 3px;
}
.top_mv_controller .slider_stop_play .slider-btn:hover span::before,
.top_mv_controller .slider_stop_play .slider-btn:hover span::after {
background-color: #e50027;
}
/*play*/
.top_mv_controller .slider_stop_play .slider-btn.paused span::before {
content: "";
display: block;
border-style: solid;
border-width: 6px 0 6px 14px;
border-color: transparent transparent transparent #faccd4;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
}
.top_mv_controller .slider_stop_play .slider-btn.paused span::after{
display: none;
}
.top_mv_controller .slider_stop_play .slider-btn.paused:hover span::before {
border-color: transparent transparent transparent #e50027;
}

/*****************************
Whats New Section
*****************************/
section#WhatsNew{
padding: 0 0 80px;
position: relative;
z-index: 1;
margin-top: 40px;
}
#WhatsNew .h2_energy{
margin-bottom: 15px;
}
.top_topics_list{
margin: 0 -21px 50px -21px;
overflow: hidden;
}
.top_topics_item{
padding-top: 20px;
position: relative;
width: 286px;
padding-right: 21px;
padding-left: 21px;
}
.top_topics_item a,
.top_topics_item a:link,
.top_topics_item a:visited,
.top_topics_item a:active{
text-decoration: none;
}
.top_topics_img{
margin-bottom: 12px;
max-height: 165px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.top_topics_img img{
width: 100%;
height: 100%;
object-fit: cover;
}

/*top topics NEW*/
.top_topics_item.top_topics_new::before{
content: "NEW";
position: absolute;
top: 0;
left: 21px;
display: block;
width: 40px;
height: 20px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #fff;
background-color: #ff0300;
text-align: center;
}
/*top topics category*/
.top_topics_category{
font-family: "Noto Sans JP", sans-serif;
font-weight: 800;
font-style: normal;
font-size: 16px;
line-height: 1.3em;
color: #575757;
margin-bottom: 10px;
}
.top_topics_category+p{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.6em;
color: #575757;
margin-bottom: 0;
}
.top_topics_news .top_topics_category{
color: #c50000;
}
.top_topics_highlight .top_topics_category{
color: green;
}
.top_topics_facebook .top_topics_category{
color: #3a66f6;
}
.top_topics_youtube .top_topics_category{
color: #ff0300;
}
/*top topics controller*/
.top_topics_controller{
display: flex;
position: absolute;
top: 76px;
right: 0;
gap: 10px;
}
.top_topics_controller button {
-webkit-appearance: none;
appearance: none;
border: none;
background-color: transparent;
cursor: pointer;
}
/*prev, next button*/
.top_topics_controller button.top_topics_prev,
.top_topics_controller button.top_topics_next{
width: 53px;
height: 11px;
position: relative;
}
.top_topics_controller button.top_topics_prev::before,
.top_topics_controller button.top_topics_next::before{
content: "";
display: block;
width: 2px;
height: 11px;
position: absolute;
bottom: 0;
transition: all .3s;
}
.top_topics_controller button.top_topics_prev::before{
left: 2px;
background-color: #cccccc;
transform: skew(-35deg);
}
.top_topics_controller button.top_topics_next::before{
right: 2px;
background-color: #cccccc;
transform: skew(35deg);
}
.top_topics_controller button.top_topics_prev::after,
.top_topics_controller button.top_topics_next::after{
content: "";
display: block;
width: 53px;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #cccccc;
}
/*pause*/
.top_topics_controller button.top_topics_pause{
width: 15px;
height: 11px;
position: relative;
}
.top_topics_controller button.top_topics_pause:not(.is-pause):before,
.top_topics_controller button.top_topics_pause:not(.is-pause)::after{
content: "";
display: block;
width: 2px;
height: 11px;
position: absolute;
bottom: 0;
background-color: #cccccc;
}
.top_topics_controller button.top_topics_pause::before{
left: 4px;
}
.top_topics_controller button.top_topics_pause::after{
right: 4px;
}
/*paused*/
.top_topics_controller button.top_topics_pause.is-pause::before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 5.5px 0 5.5px 11px;
border-color: transparent transparent transparent #cccccc;
transition: all .3s;
}
/*hover*/
.top_topics_controller button.top_topics_prev:hover::before,
.top_topics_controller button.top_topics_next:hover::before,
.top_topics_controller button.top_topics_prev:hover::after,
.top_topics_controller button.top_topics_next:hover::after,
.top_topics_controller button.top_topics_pause:not(.is-pause):hover::before,
.top_topics_controller button.top_topics_pause:not(.is-pause):hover::after{
background-color: #c50000;
}
.top_topics_controller button.top_topics_pause:hover::before{
border-color: transparent transparent transparent #c50000;
}
#WhatsNew .energyBtnSet a{
gap: 80px;
}

/*****************************
Pickup Section
*****************************/
#Pickup{
padding: 100px 0;
position: relative;
z-index: 1;
}
#Pickup .h2_energy {
position: absolute;
left: 0;
top: -56px;
}
#Pickup .indexContainer{
padding: 60px 40px 40px;
background-color: #f2f4f6;
}
#Pickup .indexContainer::before{
content: "";
border-style: solid;
border-width: 166px 130px 0 0;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 0;
left: 0;
}
.ColumnPickupSet{
display: flex;
align-items: stretch;
gap: 0;
}
.ColumnPickupSet:not(:last-child){
margin-bottom: 40px;
}
.pickupThumb{
flex: 596px 1 1;
}
.pickupThumb img{
object-fit: cover;
width: 100%;
height: 100%;
}
.pickupInfo{
background-color: #fff;
flex: 594px 1 1;
padding: 30px;
}
.pickupTilte {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 30px;
line-height: 1.3em;
color: #1e1e1e;
margin-bottom: 18px;
}
.pickupOverview{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 1.8em;
color: #1e1e1e;
margin-bottom: 18px;
}


/*****************************
Contents Menu Section
*****************************/
#ContentsMenu{
background-color: #fff;
padding: 0;
position: relative;
z-index: 2;
}
#ContentsMenu .indexContainer .contentsMenuBg{
background: #c8cdd2;
padding: 100px 0;
margin-right: -50px;
position: relative;
z-index: 1;
transform: skew(-2deg);/**/
}
.contentsMenuSectionBG{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) skew(2deg);/**/
z-index: 2;
width: 100%;
padding-left: 14%;
}
.contentsMenuSectionBG img{
opacity: .5;
}
#ContentsMenu .indexContainer .contentsMenuBg::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 2600px;
width: 65vw;
max-width: 820px;
background: #c8cdd3;
background-color: #c8cdd2;
transform: rotate(36.5deg);
transform-origin: left top;
z-index: 1;
}
#ContentsMenu .indexContainer .contentsMenuBg::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 2600px;
width: 65vw;
max-width: 820px;
background: #c8cdd3;
background-color: #c8cdd2;
transform: rotate(36.5deg);
transform-origin: right bottom;
z-index: 1;
} 
.columnContentsMenuSet{
display: flex;
gap: 40px;
flex-wrap: wrap;
position: relative;
z-index: 2;
transform: skew(2deg);/**/
}
.columnContentsMenuItem{
position: relative;
flex: 1 1 calc((100% - 40px)/2);
overflow: hidden;
max-width: 615px;
max-height: 280px;
z-index: 1;
}
.columnContentsMenuItem:last-child:nth-child(odd) {
width: 84%;
margin-right: calc((100% / 2) + 20px);
}
.contentsTitle{
width: 314px;
height: inherit;
position: absolute;
top: 0;
left: 0;
}
.contentsTitle::after{
content: "";
width: 314px;
height: 280px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,.6);
transform: skew(-37.5deg);
transform-origin: top right;
z-index: 1;
}
.contentsTitle span{
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 28px;
line-height: 1.4em;
color: #1e2328;
position: absolute;
top: 20px;
left: 30px;
z-index: 2;
}
/*Content menu button*/
.columnContentsMenuItem .btnSet{
position: absolute;
bottom:24px;
right: 28px;
}
.columnContentsMenuItem .btnSet li.plus a .stateIcon{
background-color: #fff;
}
.columnContentsMenuItem .modalContents{
display: none;
}

/*modal*/
.contentsModalArea {
background-color: rgba(0,0,0,.6);
position:fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: none;
z-index: 100;
}
.contentModalBox{
background-color: #fff;
padding: 38px 44px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1200px;
width: 80%;
}
.contentsModalArea.opened{
display: block;
z-index: 100;
}
.btnContentsModalClose{
width: 38px;
height: 38px;
position: absolute;
top: 24px;
right: 29px;
cursor: pointer;
}
.btnContentsModalClose::before,
.btnContentsModalClose::after{
display: block;
content: "";
width: 3px;
height: 50px;
position: absolute;
background-color: #faccd4;
top: 0;
left: 50%;
transform:  translateX(-50%);
border-radius: 3px;
transition: all .3s;
}
.btnContentsModalClose::before{
transform: rotate(-45deg);
}
.btnContentsModalClose::after{
transform: rotate(45deg);
}
.btnContentsModalClose:hover::before,
.btnContentsModalClose:hover::after{
background-color: #c50000;
}

/*modalbox Inner*/
.contentsModalInner .h3_energy{
margin-top: -20px;
margin-bottom: 15px;
}
.contentsModalInner .h4_energy{
margin-bottom: 30px;
}
.contentsModalInner .h3_energy .langEn{
/*font-size: 70px;*/
font-size: 28px;
color: #1e1e1e
}
.contentsModalInner .h4_energy .langJa{
font-size: 28px;
color: #1e1e1e
}
.contentsModalInner .modalLinkList{
display: flex;
gap: 40px;
}
.contentsModalInner .modalLinkList>ul{
width: calc((100% - 40px) / 2);
display: block;
}
.contentsModalInner .modalLinkList>ul>li:not(:last-child){
margin-bottom: 30px;
}
.contentsModalInner .modalLinkList ul li{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
line-height: 1.4em;
font-style: normal;
color: #1e1e1e;
margin-bottom: 10px;
}
.contentsModalInner .modalLinkList ul li a{
text-decoration: none;
color: #c50000;
}
.contentsModalInner .modalLinkList ul li a::after{
content: "";
display: inline-block;
border-top: 2px solid #c50000;
border-right: 2px solid #c50000;
height: 7px;
width: 7px;
transform: rotate(45deg);
transition: all .3s;
margin-left: 5px;
vertical-align: middle;
margin-top: -3px;
}
.contentsModalInner .modalLinkList ul li a:hover::after{
margin-left: 10px;}

.contentsModalInner .modalLinkList ul>li{
font-size: 20px;
font-weight: 800;
}
.contentsModalInner .modalLinkList ul>li>ul{
padding-left: 1em;
}
.contentsModalInner .modalLinkList ul>li>ul>li{
font-weight: 400;
}
.contentsModalInner .modalLinkList>ul>li>ul {
margin-top: 10px;
}
.contentsModalInner .modalLinkList ul>li>ul>li a::after{
border-top-width: 1px;
border-right-width: 1px;
}
.contentsModalInner .modalLinkList ul>li>ul>li>ul>li{
font-size: 16px;
font-weight: 400;
}

/*****************************
Contents Menu Sub Section
*****************************/
#ContentsMenuSub{
padding: 113px 0;
position: relative;
}
.ColumnContentsMenuSubSet{
display: flex;
gap: 40px;
}
.ColumnContentsMenuSub{
background-color: #f2f4f6;
position: relative;
flex: 615px 0 1;
}
.ColumnContentsMenuSub::before{
content: "";
border-style: solid;
border-width: 105px 82px 0 0;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 0;
left: 0;
}
.ColumnContentsMenuSub .h2_energy,
.ColumnContentsMenuSub .h3_energy{
position: absolute;
left: 0;
top: -56px;
z-index: 3;
}
.ColumnContentsMenuSubInner{
display: flex;
gap: 22px;
padding: 49px 20px 21px 61px;
}
.ColumnContentsMenuSubInner .info{
flex: 252px 0 1;
position: relative;
z-index: 3;
}
.ColumnContentsMenuSubInner .info .text{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #333;
margin-bottom: 24px;
}
.ColumnContentsMenuSubInner .thumb{
flex: 260px 0 1;
}


/*****************************
Special Section
*****************************/
#Special{
background-color: #f2f4f6;
}

.ColumnSpecialSet{
display: flex;
gap: 40px;
}
.ColumnSpecial{
position: relative;
flex: calc((100% - 40px) / 2) 0 1;
max-width: 617.5px;
}
.ColumnSpecial .thumb img{
width: 100%;
}
.ColumnSpecialInner{
width: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.8);
padding: 10px 16px 10px 9px;
}
.titleSpecial{
margin-bottom: 7px;
}
.titleSpecial.h52px{
height: 52px;
}
.titleSpecial.h52px img{
height: inherit;
width: auto;
}

.infoSpecial{
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
}
.textSpecial{
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #fff;
padding-left: 2px;
width: calc(100% - 92px);
}
.infoSpecial .btnSet{
width: 72px;
}
.infoSpecial .btnSet a{
background-color: #fff;
}

@media screen and (max-device-width:767px){
#top_slider ul li.topslide01 {
background-image: url("/products/energy/portal/image/index/kv1sp.png");
background-position: right top;
}
#top_slider ul li.topslide03 {
background-image: url("/products/energy/portal/image/index/kv3sp.png");
}
}
@media screen and (max-width:767px){
#top_slider ul li.topslide01 {
background-position: center top;
}
#top_slider ul li.topslide02 {
background-image: url("/products/energy/portal/image/index/kv3sp.png");
background-size: contain;
}
.top_mv_controller::after {
top: 0;
}
}