@charset 'UTF-8';
@import url('/common/css/common/solution-top.css');

#top, #top .slider,#top .slider img{
	width:100%;	
}

/*
@media only screen and (min-width: 1400px) {
  .top-kv-block{
    height: 763px;
    overflow: hidden;
  }
}
*/
body.cm_s .top-kv-block{
    max-height: calc(100vh - 150px);
  width: 100%;
    overflow: hidden;
}

/*bx-wrapper_top*/
/* test */

body.cm_s .bxslider li{
  position: absolute;
  width: 100%;
  top: 0;
}

body.cm_s .bxslider li:first-child{
  position: relative;
  width: 100%;
  top: auto;
  
}

body.cm_s .bxslider li img{
  width: 100%;  
}

/* test */



/**slider-copy**/
.slidecopy{
    position: absolute;
    top: 50%;
		margin-top: -38px;
	z-index: 999;
	width: 100%;
  
}	

  .bxslider li { display: none;}
  .bxslider li:first-child { display: block;}
  .bx-viewport .bxslider li { display: block;} 

/*
@media all and (-ms-high-contrast: none){.bxslider li { display: block;}}/

*/


/*
.bx-viewport .bxslider li { 
 display: block; 
}
*/

/*
.bxslider li { 
   display: none; 
}


.bxslider li:first-child { 
   display: block; 
}

  
.bx-viewport .bxslider li { 
 display: block !important; 
} 

*/


@media only screen and (max-width: 750px) {
  .slidecopy{
		margin-top: -15px;
  }
  .bx-wrapper .bx-controls-direction a {
    width: 32px!important;
    height: 32px!important;
		margin-top:-15px;
  }
	
	#top .bx-wrapper_top .bx-prev {
    left: 0px;
  }
	#top .bx-wrapper_top .bx-next {
    right: 0px;
    background: url(/index/image/controls.png) no-repeat -40px -32px !important;
  }

}
.slidecopy p{
	text-align: center;
    text-shadow: 1px 1px 8px #000;
    color: #FFF;
    font-size: 45px;
		font-weight:bold;
	margin: 0;
}
/**slider-copy end**/

.bx-wrapper_top {
  margin-bottom:0 !important;
}
.bx-viewport{
	max-height:calc(100vh - 150px);
}

#top .contents-news-wrap{
	padding-top:16px;
}


/*事業領域ナビ*/
.business-nav{
	background-color:#b5cceb;
	width:100%;
}
.nav-btn{
  display: flex;
  flex-wrap: nowrap;
  max-width:960px;
	margin-left:auto;
	margin-right:auto;
}
.nav-btn li{
  width: calc(960px / 6);
	height: calc(960px / 6);
	font-size: 15px;
  border-right: solid 1px #FFF;
  border-collapse: collapse;
  box-sizing: border-box;
  text-align: center;
	color: #FFF;
	position: relative;
}
.nav-btn li a{
    display: block;
    height: 100%;
    text-decoration: none;
    color: #FFF;
    width: 100%;
}
.nav-btn li a span{
    position: absolute;
    bottom: 10%;
    right: 0;
    left: 0;
}
.nav-btn li.nolink span{
    position: absolute;
    bottom: 10%;
    right: 0;
    left: 0;
}

.sp{display:none;}

.nav-btn li:nth-child(1){
	  border-left: solid 1px #FFF;
    background: url(/index/image/000-nav-btn01.jpg) no-repeat #b5cceb top center;
}
.nav-btn li:nth-child(3){
    background: url(/index/image/000-nav-btn02.jpg) no-repeat #b5cceb top center;
}
.nav-btn li:nth-child(4){
    background: url(/index/image/000-nav-btn03.jpg) no-repeat #b5cceb top center;
}
.nav-btn li:nth-child(5){
    background: url(/index/image/000-nav-btn04.jpg) no-repeat #b5cceb top center;
}
.nav-btn li:nth-child(2){
    background: url(/index/image/000-nav-btn05.jpg) no-repeat #b5cceb top center;
}
.nav-btn li:nth-child(6) {
    background: url(/index/image/000-nav-btn06.jpg) no-repeat #b5cceb top center;
}

.nav-btn a:nth-child(1),
.nav-btn li:nth-child(2),
.nav-btn li:nth-child(3),
.nav-btn li:nth-child(4),
.nav-btn li:nth-child(5),
.nav-btn li:nth-child(6),
.nav-btn li:nth-child(1){ background-size: contain;}		

@media only screen and (min-width: 751px) {.nav-btn li:hover{opacity: 0.9;}}


/**nav2 btn end**/
@media only screen and (max-width: 750px) {
.nav-btn{
  flex-wrap: wrap;
}
.nav-btn li{
  /*width: calc(100vw / 3);*/
  width: calc(100% / 3);
  height: calc(100vw / 3);
	border-bottom: solid 1px #FFF;
}
.nav-btn li{
	font-size: 11px;
}
  
.nav-btn li:nth-child(3n) {border-right: none;}

.nav-btn li a span{
    position: absolute;
    bottom: 5%;
    right: 0;
    left: 0;
}
.nav-btn li.nolink span{
    position: absolute;
    bottom: 5%;
    right: 0;
    left: 0;
}
.sp{display:block;}

	
}

/**********Topics*************/

#topics-div{
	/*max-width: 1180px;*/
	max-width: 960px;
	margin: 0 auto;
}

.title-m{
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5em;
	padding-left: 15px;
	letter-spacing: .05em;
	color: #0068B7;
	border-left: 4px solid #0068B7;
	margin-top: 40px;
}
.topics-span_2{
	color: #0068B7;
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 13px;
    display: block;
	padding: 10px 0 10px 34px;
	border-left: solid 11px;
}


/* layout */
@media only screen and (min-width: 751px) {/* pc only */
  #top-content-custom-block{margin-bottom: 30px;}
  
  #top-content-custom-block .column_1{
    display: block;
    width: 100%;
    /*
    width: 938px;
    margin-left: 22px;*/
    /*overflow: hidden;*/
  }
  
  .youtube .youtube-banner{ overflow-y: hidden;}
  
  /* 2つ目以降のyoutube */
  .youtube .youtube-banner a:not(.mv-l){
    display: block;
    width: 313px;
    margin-right: 10px;
    margin-top: 10px;
    float: left;
  }

  .youtube .youtube-banner a:nth-child(3n){ margin-right: 0; }
  
  .youtube .youtube-banner a,
  .youtube .youtube-banner a img{
    display: block;
    border: none!important;
    text-decoration: none!important;
    outline: none!important;
    
  }
  
  .youtube .youtube-banner a::after{
    border: none!important;
  }
  
  .youtube .youtube-banner a img:focus{
    border: none;
    text-decoration: none;
    
  }
  
  #top-content-custom-block a::after{color: transparent; border: rgba(255,255,255,0.00);}
  

  /* END pc only */
}


  .youtube .youtube-banner a,
  .youtube .youtube-banner a img{outline: none!important;}

  .youtube .youtube-banner a:not(.mv-l){
    display: block;
    margin-top: 10px;
  }


@media only screen and (max-width: 750px) {
  #top-content-custom-block{margin-bottom: 15px;}
}

/*  youtube banner area */
.youtube{
  
}

.mv-play-wrapper{
  display: block;
  position: relative;
}

.mv-play-wrapper a{
  display: block;
   position: relative;
  
}

.mv-play-wrapper a::after{
  display: block;
  position: absolute;
  width: 120px;
  height: 120px;
  line-height: 1;
  z-index: 10 !important;
  /*
  font-family: 'FontAwesome';
  content: "\f16a";
  */
  content: '';
  top: 50%;
  left: 50%;
  margin-left: -60px;
  margin-top: -60px;
  background-image: url(/common/image/mvplay_normal.png);
  background-size: contain;
  
}

.mv-play-wrapper a:hover::after{
  background-image: url(/common/image/mvplay_over.png);
}

@media only screen and (min-width: 751px) {
  .mv-play-wrapper a:not(.mv-l)::after{
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
  }
  
}

/**
* ユーチューブ　ホップアップ用スタイル
*/
  
  .mfp-s-loading { display: none!important;}
  
  
  
.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out; 
  -moz-transition: all 0.15s ease-out; 
  transition: all 0.15s ease-out;
}
  
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
  
  }
.mfp-fade.mfp-bg.mfp-removing {opacity: 0;}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out; 
  -moz-transition: all 0.15s ease-out; 
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {opacity: 1;}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {opacity: 0;}
  


/*  END youtube banner area */

/* topics */
.maintopic{
    width: 100%;
    height: 400px;
    margin: 0 auto;
    position: relative;
	background: url(/index/image/000-topic-bg.jpg) no-repeat center;
	background-size: cover;
}
.maintopic a,.maintopic div{
    color: #FFF;
    border-radius: 1px;
	text-align: center;
	font-size:28px;
	text-decoration:none;
}
 

.maintopic div{position: absolute;
    top: 20%;
    left: 0;
    right: 0;
}


.listtopic{
/*	max-width: 1042px;
*/
	max-width: 960px;
	margin:0 auto;
	line-height: 2em;
	height: auto;
}
.listtopic a{
	color: #FFF;
  position: relative;
  overflow: hidden;
}

/* 
CMS対策の時使用する
背景イメージではなく、ポジションでレイヤー化（検証済み）
*/
.listtopic a .image-wrap{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: inherit;
}

.listtopic a .image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;/* 基本的には近い縦横比にシステムトリミングする（IE対策） */
  line-height: 1;
}


.topic01{
	background: url(/thermal/image/99-02-top.jpg) no-repeat top left / 0px 0px;
	background-size: cover;
}	
.topic02{
	background: url(/nuclearenergy/image/99-01-top-470.jpg) no-repeat right;
	background-size: cover;
}	
.topic03{
	background: url(/nuclearenergy/image/99-02-top-470.jpg) no-repeat right;
	background-size: cover;
}	

.topic04{
	background: url(/renewable-energy/image/99-04-top.jpg) no-repeat right;
	background-size: cover;
}	
.topic05{
	background: url(/hydrogen/image/01-bg-01.jpg) no-repeat right;
	background-size: cover;
}	

.topic06{
	background: url(/transmission/image/01-bg_01.jpg) no-repeat top left / 0px 0px;
	background-size: cover;
}	
.topic07{
	background: url(/heavy-ion/image/99-02-top.jpg) no-repeat top left / 0px 0px;
	background-size: cover;
}	

.topic08{
    background: url(/renewable-energy/image/99-03-top.jpg) no-repeat right;
    background-size: cover;
}


.topic09{
    background: url(/hydrogen/image/01-bg-03.jpg) no-repeat right;
    background-size: cover;
}

.topic10{
	background: url(/index/image/000-topic-bg10.jpg) no-repeat right;
	background-size: cover;
}	
.topic11{
	background: url(/index/image/000-topic-bg11.jpg) no-repeat right;
	background-size: cover;
}	

.topic12{
	background: url(/index/image/000-topic-bg12.jpg) no-repeat right;
	background-size: cover;
}	


/*
.topics-image-1{
	background: url(/thermal/image/99-02-top.jpg) no-repeat top left / 0px 0px;
	background-size: cover;
}	
.topics-image-2{
	background: url(/nuclearenergy/image/99-01-top-470.jpg) no-repeat right;
	background-size: cover;
}	
.topics-image-3{
	background: url(/nuclearenergy/image/99-02-top-470.jpg) no-repeat right;
	background-size: cover;
}	

.topics-image-4{
	background: url(/renewable-energy/image/99-04-top.jpg) no-repeat right;
	background-size: cover;
}	
.topics-image-5{
	background: url(/hydrogen/image/01-bg-01.jpg) no-repeat right;
	background-size: cover;
}	

.topics-image-6{
	background: url(/transmission/image/01-bg_01.jpg) no-repeat top left / 0px 0px;
	background-size: cover;
}	
.topics-image-7{
	background: url(/heavy-ion/image/99-02-top.jpg) no-repeat top left / 0px 0px;
	background-size: cover;
}	

.topics-image-8{
    background: url(/renewable-energy/image/99-03-top.jpg) no-repeat right;
    background-size: cover;
}


.topics-image-9{
    background: url(/hydrogen/image/01-bg-03.jpg) no-repeat right;
    background-size: cover;
}

.topics-image-10{
	background: url(/index/image/000-topic-bg10.jpg) no-repeat right;
	background-size: cover;
}	
.topics-image-11{
	background: url(/index/image/000-topic-bg11.jpg) no-repeat right;
	background-size: cover;
}	

.topics-image-12{
	background: url(/index/image/000-topic-bg12.jpg) no-repeat right;
	background-size: cover;
}	

*/


.topic01,.topic02,.topic03,.topic04,.topic05 ,.topic06,.topic07,.topic08 ,.topic09,.topic10,.topic11,.topic12,.topic13{
	text-decoration: none;
	display: block;
	height:auto;
  font-size: 18px;
	/*border-radius: 4px;*/

}

/*
body.cm_s .topic01,
body.cm_s .topic02,
body.cm_s .topic03,
body.cm_s .topic04,
body.cm_s .topic05,
body.cm_s .topic06,
body.cm_s .topic07,
body.cm_s .topic08,
body.cm_s .topic09,
body.cm_s .topic10,
body.cm_s .topic11,
body.cm_s .topic12,
body.cm_s .topic13{
  border-radius: 0;
  overflow: hidden;
}
*/


.topic01,.topic06,.topic07{
	width: 49.4%;
  height: 220px;
  position: relative;
	float: left;
  display:block;
}
.topic02,.topic03,.topic04,.topic05,.topic08,.topic09,.topic10,.topic11,.topic12,.topic13{
	width: 24.2%;
    height: 220px;
    position: relative;
	float: left;
	display: block;
}


.maintopic,.topic01,.topic06,.topic07,.topic12{
	margin-bottom:1%;
}	
.topic02,.topic03,.topic08,.topic09{
	margin:0 0 1% 1%;
}	

.topic04,.topic05,.topic10,.topic11,.topic13{
	margin:0 1% 1% 0%;
}	
.topic13{
	margin: 0 auto;
}








.topic-name{
	position: absolute;
	top: 10%;
	left: 4%;
	font-weight: 100;
  text-shadow: 3px 3px 7px #000;
}

@media only screen and (max-width: 750px) {
#topics-div {
/*    padding-top: 10px;*/
}	
.title-m {
    font-size: 18px;
    padding-left: 10px;
    width: 90%;
    margin: 20px auto;
}
.maintopic {
    height: 250px;
	}
.maintopic a, .maintopic div {
    font-size: 24px;
}	
	

.listtopic {
    width: 100%;
    line-height: 1em;
	
}

.listtopic .topic-name{
  line-height: 1.5em;
  color: #FFF;
}
  

/*	
.topic01, .topic06, .topic07 {
    width: 100%;
    height: 212px;
}
.topic02, .topic03, .topic04, .topic05, .topic08, .topic09, .topic10, .topic11, .topic12, .topic13 {
    width: 49.5%;
    height: 210px;
}

	.topic02,.topic05,.topic08,.topic11,.topic13{
	margin:0;
}
*/  
  
  
  .listtopic a[class^="topic"]:nth-child(6n){/* 6 */
    width: 100%;
    height: 212px;
  }
  .listtopic a[class^="topic"]:nth-child(6n-1){/* 5 */
    width: 49.5%;
    height: 210px;
    margin:0;
    
  }
  .listtopic a[class^="topic"]:nth-child(6n-2){/* 4 */
    width: 49.5%;
    height: 210px;
  }
  .listtopic a[class^="topic"]:nth-child(6n-3){/* 3 */
    width: 49.5%;
    height: 210px;
  }
  .listtopic a[class^="topic"]:nth-child(6n-4){/* 2 */
    width: 49.5%;
    height: 210px;
    margin:0;
  }
  
  .listtopic a[class^="topic"]:nth-child(6n-5){/* 1 */  
    width: 100%;
    height: 212px;
  }
  
 
  
}