@charset "utf-8";

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

Name: responsive.css

Description: Common Settings for Responsive Web Design

Create: 2017.06.01
Update: 2020.03.10

Copyright 2017 Hitachi, Ltd. 

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

.cWidth a {
display: block;
position: relative;
height: 574px;
}
.slText {
left: 0;
}
.offSpec {
left: -50px;
top: 35%;
}
#mainImageArea .bx-has-pager .bx-pager-link {
cursor: default;
}

/* for - 1500px
=========================================================================================== */
@media screen and (max-width: 1500px) {
	/* TOP slider
	***************************************************** */
	#topSlider li { background-size: auto 100%; }
}


/* for - 1050px
=========================================================================================== */
@media screen and (max-width: 1050px) {
	/* TOP slider
	***************************************************** */
	#mainImageArea .bx-has-pager { padding-right: 15px; }
	#whatsNewBox {
		width: 304px;
		height: 208px;
	/*	padding: 15px 10px 10px 24px;20190404*/
	}
}


/* for - 994px
=========================================================================================== */
@media screen and (max-width: 994px) {
	/* TOP slider
	***************************************************** */
	#mainImageArea h1 img { left: 15px; }

	.cWidth a {
		width: 52%;
	} 
	.slText {
		max-width: 100%;
		height: auto;
		left: 15px;
	}

}

/* for - 800px
=========================================================================================== */
@media screen and (max-width: 820px) {
	/* TOP slider
	***************************************************** */
	#mainImageArea h1 img {
		width: 350px;
		height: auto;
	}
}

/* for - 768px
=========================================================================================== */
@media screen and (max-width: 767px) {
	/* TOP slider
	***************************************************** */
	#mainImageArea { height: auto; }
	#mainImageArea h1 {
		position: relative;
		max-width: 965px;
		margin: 0 auto;
	}
	#mainImageArea h1 img {
		top: 20px;
		left: 10px;
		width: 280px;
	}
	#topSlider li {
		width: 100%!important;
		height: auto;
		background: none;
	}
	.cWidth {
		position: inherit;
		width: 100%;
		height: auto;
	}
	.cWidth a {
		position: static;
		width: 100%;
		height: auto;
	}
	.slideItem img {
		width: 100%;
		height: auto;
	}
	/*SP表示の画像変更スタイル 20180326 ohashi*/
	.slideItem img.forPC {
	display:none;
	}
	.slideItem img.slText {
		width: 70%;
		height: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	.slBackGround { display: block; }
	#searchBox {
		position: relative;
		top: auto;
		right: auto!important;
		width: 94%;
		margin: 15px auto;
	}
	#whatsNewBox { position: relative; }
	#mainImageArea .bx-has-pager {
		position: relative;
		width: 100%;
		height: auto;
		padding-left: 15px;
		padding-right: 15px;
	}
	#mainImageArea .bx-has-pager .bx-pager-link:hover { background-position : center center!important; }
	#mainImageArea .bx-has-pager .bx-pager-item:nth-child(1) { padding-top: 5px; }
	#mainImageArea .bx-has-pager .bx-pager-link {
    	width: 100%;
    	padding-top: 10px;
    	padding-bottom: 20px;
		-moz-transition: none;
		-o-transition: none;
		-webkit-transition: none;
		transition: none;
	}
	#mainImageArea .bx-has-pager .bx-pager-item:nth-child(1) .bx-pager-link {
		background: url("/-/media/image/renew/top/img_mv_btn01.png") center center no-repeat;
		background-size: 302px 52px;
	}
	#mainImageArea .bx-has-pager .bx-pager-item:nth-child(2) .bx-pager-link {
		background: url("/-/media/image/renew/top/img_mv_btn02.png") center center no-repeat;
		background-size: 302px 52px;
	}
	#mainImageArea .bx-has-pager .bx-pager-item:nth-child(3) .bx-pager-link {
		background: url("/-/media/image/renew/top/img_mv_btn03.png") center center no-repeat;
		background-size: 302px 52px;
	}
	#whatsNewBox {
		width: 100%!important;
		height: 208px;
		/*padding: 10px 15px;*/
	}
	#whatsNewBox dl.whatsNewTitle { 
	width: 100%;
	box-sizing: border-box;/*20190404*/
	 }
	
	.newsScroll { 
	width: 100%;
	padding-left:0;/*20190404*/
	 }
	 .newsScroll dl {
    padding-left: 25px;/*20190404*/
}
}


/* for - 399px
=========================================================================================== */

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

	#mainImageArea .bx-has-pager .bx-pager-item .bx-pager-link {
		background-size: 100% auto !important;
	}

}