@charset "Shift_JIS";
/* CSS Document */

@media screen and (min-width: 1600px){
#top_slider ul li.slider_list{
max-height: none;
}
}
@media screen and (max-width: 1304px){
/*top_mv */
.top_mv .indexContainer{
margin: 0;
}
.top_mv .top_slide_title .slideTitle{
margin-right: 15px;
margin-left: 15px;
}
/*whats new*/
.top_topics_list{
margin: 0 -21px 50px -21px;
}
/*contents menu*/
#ContentsMenu .indexContainer .contentsMenuBg{
margin-right: 0;
}
.contentsMenuSectionBG{
padding-left: 15%;
}
}

@media screen and (min-width: 995px) and (max-width: 1304px){
.OptionWideRWD #Contents .top_topics_img img{
max-width: none;
width: 100%;
height: 100%;
object-fit: cover;
}
.OptionWideRWD #Contents .pickupThumb img{
max-width: 100%;
height: 100%;
}
.OptionWideRWD #Contents .titleSpecial img{
max-width: auto;
height: 52px;
}
}

@media screen and (max-width: 1274px){
.contentsMenuSectionBG{
padding-left: 17%;
}
}

@media screen and (max-width: 1174px){
#ContentsMenu .indexContainer .contentsMenuBg::before{
width: 74%;
max-width: none;
}
.top_mv_controller::after{
top: -9px;
}
.contentsMenuSectionBG{
padding-left: 24%;
}
}

@media screen and (max-width: 1100px){
.ColumnSpecialSet{
flex-direction: column;
}
.ColumnSpecial{
flex: 100% 0 1;
max-width: none;
}
/**************************************************/
.top_mv_controller::after{
left: -915px;
}
.top_mv .top_slide_title .slideTitleInner{
height: auto;
}
.top_mv .top_slide_title .slideTitle{
margin-bottom: 20px;
width: 300px;
}
.top_mv .top_slide_title .slideTitle .h1_energy{
padding-top: 25px;
margin-bottom: 8px;
}
.h1_energy .langEn{
font-size: 40px;
}
.top_mv .top_slide_title .slideTitle .h1_energy+.h1_energySub span{
font-size: 16px;
line-height: 1.5em;
}
.top_mv .top_slide_title .slideTitleInner::before{
top: -580px;
left: -332px;
}
.top_mv_controller .slick-dots li,
.top_mv_controller .slick-dots li button:after{
width: 85px;
}
.ColumnContentsMenuSubSet{
flex-direction: column;
gap: 80px;
}
.ColumnContentsMenuSub{
flex: auto 0 1;
}
.ColumnContentsMenuSubInner .info{
flex: calc(100% - 282px) 0 1;
}
}

@media screen and (max-width: 994px){
.JS #Contents .titleSpecial img{
max-width: auto;
height: 52px;
}
}

@media screen and (max-width: 945px){
#ContentsMenu .indexContainer .contentsMenuBg::before{
width: 80%;
}
.contentsTitle span{
font-size: 22px;
}
.contentsMenuSectionBG{
padding-left: 28%;
}
}

@media screen and (max-width: 806px){
#ContentsMenu .indexContainer .contentsMenuBg::before{
width: 82%;
}
}

@media screen and (max-width: 994px){
.JS #Contents .pickupThumb img{
max-width: 100%;
height: 100%;
}
.JS #Contents .columnContentsMenuItem .contentsThumb img{
width: 100%;
height: 100%;
object-fit: cover;
}
.JS #Contents .titleSpecial img{
max-width: auto;
height: 52px;
}
}

@media screen and (max-width:767px){
.top_topics_controller{
top: 85px;
}
.top_topics_list{
margin: 0 0 50px;
}
.top_topics_item{
padding-right: 0;
padding-left: 0;
}
.top_topics_item.top_topics_new::before{
left: 0;
}
.top_topics_item{
max-width: none;
width: 100%;
}
.top_topics_img{
max-height: none;
}
#ContentsMenu .indexContainer .contentsMenuBg::after{
width: calc(100vw * 1.5);
max-width: none;
}
.columnContentsMenuItem{
flex: 1 1 100%;
width: 100%;
max-width: none;
}
.columnContentsMenuItem:last-child:nth-child(odd){
width: 100%;
margin-right: 0;
}
section#ContentsMenuSub{
padding-top: 150px;
}
.ColumnContentsMenuSubSet{
flex-direction: column;
gap: 180px;
}
.ColumnContentsMenuSubInner .info{
flex: auto 0 1;
}
.ColumnContentsMenuSubInner .thumb{
flex: auto 0 0.5;
}
.JS #Contents .ColumnContentsMenuSubInner .thumb img{
max-width: none;
width: 100%;
}
.ColumnContentsMenuSub{
flex: auto 0 1;
}
.ColumnContentsMenuSub .h3_energy{
top: -120px;
}
.ColumnContentsMenuSub .h3_energy span.langEn{
line-height: 1em;
}
.ColumnContentsMenuSub .energyBtnSet.alignLeft{
justify-content: center;
}
.ColumnSpecialSet{
flex-direction: column;
}
.ColumnSpecial{
position: relative;
flex: auto 0 1;
}
/*****************************************/
#top_slider .slick-initialized .slick-slide{
height: 500px !important;
}
#top_slider ul li.slider_list{
height: 500px;
}
.top_mv .top_slide_title{
height: auto;
}
.top_mv_controller::after{
top: 0;
}
.h2_energy span.langEn{
font-size: 40px;
}
.top_topics_controller{
top: 32px;
}
.top_topics_controller button.top_topics_prev,
.top_topics_controller button.top_topics_next,
.top_topics_controller button.top_topics_prev::after,
.top_topics_controller button.top_topics_next::after{
width: 44px;
}
.top_topics_category,
.top_topics_category+p{
font-size: 12px;
}
.energyBtnSet a span,
.energyBtnSet>div>span{
font-size: 16px;
}
.JS #Contents .energyBtnSet img{
height: 8px;
width: auto;
}
.energyBtnSet a:has(img[src*="icon_more.svg"]){
padding: 8px 12px;
height: auto;
}
#WhatsNew .indexContainer{
position: relative;
z-index: 2;
}

#Pickup{
padding: 100px 0 40px;
}
#Pickup .indexContainer{
  margin-right: 0;
  margin-left: 0;
}
#Pickup .indexContainer{
padding: 34px 15px 46px;
}
#Pickup .indexContainer::before{
border-width: 82px 64px 0 0;
}
#Pickup .h2_energy{
margin-left: 10px;
top: -28px;
}

.ColumnPickupSet{
flex-direction: column;
}
.ColumnPickupSet:not(:last-child){
  margin-bottom: 23px;
}
.pickupThumb{
flex: auto 1 1;
}
.pickupInfo{
flex: auto 1 1;
padding: 12px;
}
.pickupTilte{
font-size: 20px;
margin-bottom: 5px;
}
.pickupOverview{
font-size: 16px;
}

#ContentsMenu .indexContainer .contentsMenuBg{
padding: 40px 0;
}
#ContentsMenu .indexContainer .contentsMenuBg::before{
width: 179%;
}

.columnContentsMenuSet{
gap: 10px;
}
.contentsTitle span{
font-size: 16px;
}
.contentsTitle::after{
width: 180px;
}
.contentsTitle span{
top: 17px;
left: 15px;
}

.ColumnContentsMenuSub::before{
border-width: 53px 39px 0 0;
}
.contentsMenuSectionBG{
left: 43px;
transform: skew(2deg);
padding-left: 17%;
}
.columnContentsMenuItem .energyBtnSet{
right: 14px;
bottom: 14px;
}
.energyBtnSet .plus a{
width: 30px;
height: 30px;
min-width: auto;
}
.energyBtnSet a span.stateIcon{
width: 15px;
height: 15px;
}
.energyBtnSet a span.stateIcon::before,
.energyBtnSet a span.stateIcon::after{
width: 15px;
}

.contentModalBox{
padding: 40px 10px;
width: 90%;
}
.btnContentsModalClose{
top: 12px;
right: 12px;
width: 30px;
height: 30px;
}
.btnContentsModalClose::before,
.btnContentsModalClose::after{
height: 30px;
width: 2px;
}

.contentsModalInner{
top: 0;
}
.contentsModalInner .h3_energy{
margin-bottom: 12px;
}
.contentsModalInner .h3_energy .langEn{
font-size: 40px;
}
.contentsModalInner .h4_energy{
margin-bottom: 10px;
}
.contentsModalInner .h4_energy .langJa{
font-size: 20px;
}
.contentsModalInner .modalLinkList{
flex-direction: column;
gap: 30px;
}
.contentsModalInner .modalLinkList>ul{
width: 100%;
}
.contentsModalInner .modalLinkList>ul>li:not(:last-child){
margin-bottom: 10px;
}
.contentsModalInner .modalLinkList ul li{
font-size: 16px;
}

.h3_energy span.langEn{
font-size: 40px;
}

#ContentsMenuSub{
padding: 56px 0;
}
.ColumnContentsMenuSubInner{
padding: 32px 7px 16px 7px;
}
.ColumnContentsMenuSubSet{
gap: 56px;
}
.ColumnContentsMenuSub .h3_energy{
top: -25px;
}
.ColumnContentsMenuSubInner .info .text{
font-size: 16px;
}

#Special{
padding: 40px 0;
}
.infoSpecial{
align-items: flex-end;
}
.ColumnSpecial .thumb{
height: 220px;
}
.JS #Contents .ColumnSpecial .thumb img{
width: 100%;
height: 100%;
object-fit: cover;
}

.textSpecial{
font-size: 14px;
}
.titleSpecial.h52px{
height: 26px;
}
.JS #Contents .titleSpecial img{
height: 26px;
}
}