@charset "utf-8";

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

Name: responsive.css

Description: Common Settings for Responsive Web Design

Create: 2017.12.28
Update: 

Copyright 2017 Hitachi High-Technologies Corporation.

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



/* content===========================================

[-] for all
[-] for 995px -
[-] for - 994px
[-] for - 965px
[-] for - 900px
[-] for - 767px
[-] for - 579px
[-] for - 399px

===================================================== */



/* science - contents
=========================================================================================== */

/* for - 994px
----------------------------------------------------- */

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

	/* ------ Link List ------ */

	.JS .ThumbW160SetStyle .Img {padding-right: 20px;}


.JS #ProductHead,
.JS .productsListArea {
margin-left: -15px;
margin-right: -15px;
}

.JS #ProductHead .PageTitleStyle1,
.JS #ProductHead .productMain {
width: auto;
padding-left: 15px;
padding-right: 15px;
}
.JS #ProductHead .PageTitleStyle1 h1 {
width: auto;
}

.JS #ProductHead .productMain img {
max-width: 100%;
height: auto;
}

.JS .productColumnSet {
width: auto;
margin: 0 0 0 -18px;
}
.JS .Grid4 .productColumnSet .Column1 {
width: 33.333333%;
margin: 0;
padding: 0 0 0 18px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.JS .productsListArea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.JS .ColumnSet.scienceStyle .Column1.FirstItem,
.JS .ColumnSet.scienceStyle .Column1andHalf.FirstItem,
.JS .ColumnSet.scienceStyle .Column2.FirstItem,
.JS .ColumnSet.scienceStyle .Column3.FirstItem {
margin-left: 0;
}

.JS #ProductDetailHead {
min-width: 290px;
padding-left: 15px;
padding-right: 15px;
}
.JS #ProductDetailHead img {
max-width: 100%;
height: auto;
}

.JS #ProductDetailHead .ColumnSet {
margin-left: -35px;
}
.JS #ProductDetailHead .Column1andHalf {
margin: 0;
padding: 0 0 0 35px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.JS #ProductDetailHead .Column1andHalf.FirstItem {
width: 36.5%;
}
.JS #ProductDetailHead .Column1andHalf.LastItem {
width: 63.5%;
}

.JS #TabNaviSet,
.JS [id*="productSub-"] {
width: 74.69%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.JS #TabNaviSet .Column1andHalf,
.JS [id*="productSub-"] .Column1andHalf {
width: 50%;
margin: 0;
padding: 0 0 0 15px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.JS #TabNaviSet .Column1,
.JS [id*="productSub-"] .Column1 {
width: 33.33333333%;
margin: 0;
padding: 0 0 0 15px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.JS .Grid4 #TabNaviSet .ColumnSet.Panel2 {
margin-left: -0.8333333333333333%;
}
.JS #TabNaviSet ul.Panel2 li {
margin: 0 0 15px 0.8333333333333333%;
width:24.15%;
}
.JS #TabNaviSet ul.Panel2 li a > img{
max-width: 100%;
width: 100%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

}



/* for - 965px
=========================================================================================== */

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

.JS #ProductDetailHead .ColumnSet {
margin-left: -15px;
}
.JS #ProductDetailHead .Column1andHalf {
padding-left: 15px;
}

.JS .TabNavi.scienceStyle {
margin-left: -15px;
}
.JS .TabNavi.scienceStyle.floating {
margin-left: 0;
}
}


/* for - 900px
=========================================================================================== */

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

.JS .CourtesyNavi {
margin-top: 0;
}

}

/* for - 767px
=========================================================================================== */

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

/* ------ Global Navi ------ */

.JS #CourtesyNaviSP #LangDropDown .langButton {
display: none;
}
.JS #CourtesyNaviSP #LangDropDown .langButton + ul li:first-child a {
border-top: solid 1px #444 !important;
}


/* ------ Link List ------ */

.JS .ThumbW160SetStyle h2,
.JS .ThumbW160SetStyle .LV1LinkSet {margin-left: 0;}


/* ------ Heading ------ */

.JS h2.scienceStyle {
padding-left: 15px;
padding-right: 15px;
}

.JS .productColumnSet {
margin-left: -15px;
}
.JS .Grid4 .productColumnSet .Column1 {
padding-left: 15px;
}

.JS .productList .ThumbW120SetStyle .Img,
.JS .productList .ThumbW160SetStyle .Img,
.JS .productList .ThumbW180SetStyle .Img {
float: none;
margin-left: auto;
margin-right: auto;
}


.JS #ProductDetailHead .Column1andHalf {
float: none;
width: auto !important;
}
.JS #ProductDetailHead .Column1andHalf:after {
content: "";
display: block;
clear: both;
}

/* ------ ContactNavi ------ */

.JS #ContactNavi li {
float: left;
margin: 0 10px 10px 0;
}
.JS #ContactNavi a {
display: inline-block;
width: auto;
min-width: 155px;
}
.JS #ContactNavi li.NoArrow a {
width: auto;
min-width: 160px;
}

/* ------ TabNavi ------ */

.JS .TabNavi.scienceStyle {
float: none;
width: auto;
padding-bottom: 0px;
margin-left: 0;
}
.JS .TabNavi.scienceStyle .TabBtn {
width: auto;
}
.JS .TabNavi.scienceStyle .TabBtn li {
border-top: none;
}
.JS .TabNavi.scienceStyle .TabBtn li a {
padding: 10px 25px 10px 15px;
width: auto;
}
.JS .TabNavi.scienceStyle .TabBtn li a:before {
	width: 16px;
	height: 16px;
	margin: -8px 0 0;
	background-image: url(/image/global/science/icon/icon_down_l_black_hd.gif);
	background-size: 16px 16px;
	-moz-background-size: 16px 16px;
	-webkit-background-size: 16px 16px;
	-o-background-size: 16px 16px;
	-ms-background-size: 16px 16px;
}

.JS .TabNavi.scienceStyle .TabBtn li.Current a {
	color: #333;
  background-color: #ececec !important;
}
.JS .TabNavi.scienceStyle .TabBtn li.Current a:hover,
.JS .TabNavi.scienceStyle .TabBtn li.Current a:active {
	color: #fff;
  background-color: #e9001d !important;
}

.JS .TabNavi.scienceStyle .TabBtn li a:link,
.JS .TabNavi.scienceStyle .TabBtn li a:visited { border-color: #fff; }

.JS .TabNavi.scienceStyle .TabBtn li a:hover, 
.JS .TabNavi.scienceStyle .TabBtn li a:active,
.JS .TabNavi.scienceStyle .TabBtn li.Current a,
.JS .TabNavi.scienceStyle .TabBtn li:first-child a:hover, 
.JS .TabNavi.scienceStyle .TabBtn li:first-child a:active,
.JS .TabNavi.scienceStyle .TabBtn li:first-child.Current a,
.JS .TabNavi.scienceStyle .TabBtn li.Current:first-child a,
.JS .TabNavi.scienceStyle .TabBtn li.Current:first-child a { border-color: #fff; }

.JS .TabNavi.scienceStyle .TabBtn li a:link:before,
.JS .TabNavi.scienceStyle .TabBtn li a:visited:before { right: 7px; }
.JS .TabNavi.scienceStyle .TabBtn li a:hover:before,
.JS .TabNavi.scienceStyle .TabBtn li a:active:before {
right: 7px;
background-image: url(/image/common/en/r1/icon/icon_down_l_white_hd.gif);
}

.JS .TabNavi.scienceStyle .TabBtn li:hover::after,
.JS .TabNavi.scienceStyle .TabBtn li:active::after,
.JS .TabNavi.scienceStyle .TabBtn li.Current::after { content: none; }

.JS .TabNavi.scienceStyle.floating,
.JS .TabNavi.scienceStyle.bottomaArrival {
position: relative;
top: initial;
left: initial;
right: initial;
bottom: initial;
}


.JS .TabNavi.scienceStyle .TabLinkBtn,
.JS .TabNavi.scienceStyle p {
display: none;
}
.JS #TabNaviSet,
.JS [id*="productSub-"] {
width: auto;
float: none;
}
/* floatingHeadMenu 対応 */
.JS [id*="productSub-"] {
margin-top: 0;
padding-top: 0;
}

.JS #TabNaviSet .Column1andHalf,
.JS #TabNaviSet .Column1,
.JS [id*="productSub-"] .Column1andHalf,
.JS [id*="productSub-"] .Column1 {
float: none;
width: auto;
}


/* ------ Common ------ */

.JS .MagnifyingArea {
display: inline-block;
}


}


/* for - 579px
=========================================================================================== */

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

.JS .DateListStyle2.scienceStyle dt {
width: auto;
}
.JS .DateListStyle2.scienceStyle dd {
margin-left: 0;
}

.JS .productColumnSet .ImgHeadingStyle {
margin-bottom: 15px;
}

.JS .Grid4 .productColumnSet .Column1 {
width: 50%;
}

.JS #ScienceSearch {
padding-left: 42px;

background-position: 12px center;
background-size: 18px 18px;
-moz-background-size: 18px 18px;
-webkit-background-size: 18px 18px;
-o-background-size: 18px 18px;
-ms-background-size: 18px 18px;

}
.JS #ScienceSearch .SearchTextBox {
width: 79%;
width: -moz-calc(100% - 89px);
width: -webkit-calc(100% - 89px);
width: calc(100% - 89px);
padding: 18px 15px;
}
.JS #ScienceSearch input[type="submit"]{
padding: 16.5px 10px;
}

.JS #TabNaviSet ul.Panel2 li {
width: 49.15%;
}

}


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

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

.JS .Grid4 .productColumnSet .Column1 {
width: auto;
}
.JS .productColumnSet .ImgHeadingStyle .Title {
background-color: transparent;
}
.JS .productColumnSet .ImgHeadingStyle .Title p,
.JS .productColumnSet .ImgHeadingStyle h2,
.JS .productColumnSet .ImgHeadingStyle h3,
.JS .productColumnSet .ImgHeadingStyle h4 {
padding: 0 !important;
color: #333;
background-color: transparent;
}
.JS .productColumnSet .ImgHeadingStyle .Title p a,
.JS .productColumnSet .ImgHeadingStyle .Title h2 a,
.JS .productColumnSet .ImgHeadingStyle .Title h3 a,
.JS .productColumnSet .ImgHeadingStyle .Title h4 a {
padding: 0 17px 0 0 !important;
background-size: 15px 15px;
-moz-background-size: 15px 15px;
-webkit-background-size: 15px 15px;
-o-background-size: 15px 15px;
-ms-background-size: 15px 15px;
}
.JS .productColumnSet .ImgHeadingStyle .Title p a:link,
.JS .productColumnSet .ImgHeadingStyle .Title h2 a:link,
.JS .productColumnSet .ImgHeadingStyle .Title h3 a:link,
.JS .productColumnSet .ImgHeadingStyle .Title h4 a:link, 
.JS .productColumnSet .ImgHeadingStyle .Title p a:visited,
.JS .productColumnSet .ImgHeadingStyle .Title h2 a:visited,
.JS .productColumnSet .ImgHeadingStyle .Title h3 a:visited,
.JS .productColumnSet .ImgHeadingStyle .Title h4 a:visited {
background-image: url(/image/global/science/icon/icon_link_right_black.png) !important;
color: #333;
}
.JS .productColumnSet .ImgHeadingStyle .Title p a:hover,
.JS .productColumnSet .ImgHeadingStyle .Title h2 a:hover,
.JS .productColumnSet .ImgHeadingStyle .Title h3 a:hover,
.JS .productColumnSet .ImgHeadingStyle .Title h4 a:hover, 
.JS .productColumnSet .ImgHeadingStyle .Title p a:active,
.JS .productColumnSet .ImgHeadingStyle .Title h2 a:active,
.JS .productColumnSet .ImgHeadingStyle .Title h3 a:active,
.JS .productColumnSet .ImgHeadingStyle .Title h4 a:active,
.JS .productColumnSet .ImgHeadingStyle.hover .Title p a,
.JS .productColumnSet .ImgHeadingStyle.hover .Title h2 a,
.JS .productColumnSet .ImgHeadingStyle.hover .Title h3 a,
.JS .productColumnSet .ImgHeadingStyle.hover .Title h4 a {
background-image: url(/image/global/science/icon/icon_link_right_black_hover.png) !important;
color: #333;
}

/* ------ ContactNavi ------ */

.JS #ContactNavi li {
float: none;
display: block;
margin-left: 0;
}
.JS #ContactNavi a {
display: block;
min-width: 0;
}

.JS .Grid4 #TabNaviSet .ColumnSet.Panel2 {
margin-left: 0;
}
.JS #TabNaviSet ul.Panel2 li {
float: none;
margin-left: 0;
width: 100%;
}

}


/* for print
=========================================================================================== */

@media print {
}