@charset "utf-8";

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

Name: modify.responsive.css

Description: Sub CSS

Create: 2014.07.03
Update: 2022.05.20

Copyright 2022 Hitachi,Ltd.

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


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

Modify Setting

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


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

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

/* 環境factry */
.JS .EcoBox{
width: 100%;
margin: 0 auto;
}
.JS .Grid3 .EcoBox .Column1{
margin-left:-1px;
margin-bottom:10px;
padding:0;
}

.JS .Grid3 .EcoBox .Column1.FirstItem{
margin-left:0;
}

/* TOP */

/* branding for hero header */
.ResponsiveBrandingImgStyle .heroHeader .ImgText{
left:15px;
}

/* TOP */
.ProductList{
margin-left:0;
}

.ProductList li{
width:31%;
margin:0 1% 15px ;
justify-content: space-around;
}

}

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

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

/* 環境factry */
.EcoBox{
display: inline;
}

/* ProductList */
.ProductList li{
width:31%;
margin:0 1% 15px ;
justify-content: flex-start;
}
}

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

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

/* 環境TOP */
.bannerList{
flex-wrap: wrap;
}

.bannerList .listWrap{
margin:0 auto 15px;
}

/* TOP */
.ProductList li{
width:45%;
margin:0 2% 15px;
}
}


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

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

/* TOP */
.ProductList li{
width:100%;
max-width:100%;
margin:0 auto 15px !important;
}

}





/*　Renewal pages
=========================================================================================== */
/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
  .topHero {
    margin-left: -15px;
    margin-right: -15px;
    width: auto;
  }
  .introCI ul li a span {
    padding: 0 15px;
    min-height: 68px;
    font-size: 22px;
  }
  .introProducts {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

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

@media screen and (max-width: 767px) {
  /* top */
  .topHero {
    height: auto;
  }
  .topHero .slick-slide {
    height: 100vw;
  }
  .topHero .slick-slide>span,
  .topHero .slick-slide>a {
    height: 100%;
  }
  .topHero .Slide1>span,
  .topHero .Slide1>a {
    background-image: url("/common/image/top/slide01_sp.png");
  }
  .topHero .Slide2>span,
  .topHero .Slide2>a {
    background-image: url("/common/image/top/slide02_sp.png");
  }
  .topHero .Slide3>span,
  .topHero .Slide3>a {
    background-image: url("/common/image/top/slide03_sp.png");
  }
  .topHero .Slide4>span,
  .topHero .Slide4>a {
    background-image: url("/common/image/top/slide04_sp.png");
  }
  .topHero .Slide5>span,
  .topHero .Slide5>a {
    background-image: url("/common/image/top/slide05_sp.png");
  }
  .topHero .Slide6>span,
  .topHero .Slide6>a {
    background-image: url("/common/image/top/slide06_sp.jpg");
  }
  .topHero .Slide7>span,
  .topHero .Slide7>a {
    background-image: url("/common/image/top/slide07_sp.png");
  }
  .topHero .slick-slider {
    margin: 0;
  }
  .topHero .slick-prev {
    left: 15px;
  }
  .topHero .slick-next {
    right: 15px;
  }
  .topHero .slick-arrow:hover {
    opacity: .6;
  }
  .topHero .AutoMenu {
    bottom: 15px;
  }
  .topHero .slideDots {
    margin-right: 10px;
  }
  .topHero .heroWrap {
    margin: 0 auto;
    padding: calc(80/750*100%) 0 0;
    width: calc(480/750*100%);
  }
  .topHero .heroTxt {
    font-size: 30px;
  }
  .topHero .heroTxt.otherPxTxt {
    font-size: 30px;
  }
  
  .topHero .heroTxt2 {
    margin: .5em 0 1em;
    font-size: 16px;
    font-weight: normal;
  }
  .topHero .linkBtn {
    position: static;
  }
  .topHero .Slide1 .heroWrap {
    padding: 0 60px;
    width: auto;
    height: auto;
  }
  .topSectionHead {
    margin: 0 0 10px;
    padding: 0;
  }
  .topSectionHeadBdr {
  }
  .GridSet .topSectionHead {
  }
  .topSectionHeadTitle {
    margin: 0 !important;
    font-size: 30px;
  }
  .topSectionHeadTitle a {
    padding-right: 20px;
  }
  .topSectionHeadTitle a:after {
    border-top-width: 3px;
    border-right-width: 3px;
    top: calc(50% - 8px);
    width: 12px;
    height: 12px;
  }
  

  .topSectionHead .linkBtn {
    margin: 5px 0 25px;
    position: static;
  }
  .introGN {
  }
  .introGNList {
    height: calc(600/750*100vw);
    background: url("../image/top/globalnetwork_sp.png") center center no-repeat;
    background-size: cover;
  }
  .introGNList ul {
  }
  .introGNList ul li {
    font-size: 18px;
  }
  .introGNList ul li a {
    padding-right: 15px;
  }
  .introCI {
  }
  .introCI ul {
    display: block;
  }
  .introCI ul li {
    width: 100%;
  }
  .introCI ul li + li {
    margin-top: 20px;
  }
  .introCI ul li a {
    display: block;
    position: relative;
    color: #fff;
    text-decoration: none;
  }
  .introCI ul li a .image {
  }
  .introCI ul li a span {
    padding: 0 20px;
    line-height: 1.38;
    min-height: 80px;
    height: 80px;
    font-size: 21px;
  }
  .introProducts {
    margin: 0 -15px 40px;
    padding: 40px 15px;
  }
  .productsList {
    display: block;
  }
  .productsList li {
    margin: 0;
    width: 100%;
  }
  .productsList li + li {
    margin-top: 20px;
  }
  .productsList li a {
  }
  .productsList li a p {
    padding: 15px;
    line-height: 1.72;
    color: #1A3053;
    font-size: 18px;
    font-weight: bold;
    box-sizing: border-box;
  }
  .productsList li a img {
    width: 100%;
  }





  /* global network */
  .GNHead {
    margin: 0 -15px;
  }
  .GNHeadText {
    font-size: 21px;
  }
  .GNAnchorArea {
    margin: -10px -15px 60px;
    padding: 20px 30px;
    height: auto;
  }
  .GNAnchor {
    position: static;
    display: block;
    height: auto;
    transform: none;
  }
  .GNAnchor.fixed {
    position: static !important;
  }
  .GNAnchor ul {
    display: block;
    height: auto;
  }
  .GNAnchor ul li {
    border-right: none;
    display: block;
    line-height: 1.39;
    text-align: left;
  }
  .GNAnchor ul li:first-child {
    border-left: none;
  }
  .GNAnchor ul li +li {
    margin-top: 15px;
  }
  .GNAnchor ul li a {
    padding-right: 13px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAZCAYAAADuWXTMAAAACXBIWXMAAAsSAAALEgHS3X78AAAA4ElEQVQ4jZ3UwQ2CMBTG8b/1Lm6gbsCVGyO4ga4Ae9jGCfTm1S3kiBvoBjoB5hExFQX6eEmT0vT3FchLqaqqHjtrl808dBgA61wMlNa5I4qazqJoCRRABMSXolglSXIOiZCTH8DNW9uEvoHJs0xwCly1AfU3jw0wzWRMgPEftAGmvaAJ+MGagL84NKAThwRMpEeHyjo3l/YFFt7Wfe/JXq1b8AkcB7F1bgscWjDNs6zsxX2Qvh82BDtxCPyLQ+EP1sAvrIUfPAZKyR0mDXDSwuZkub8EqGCN3xul+e8aCPACFGyx6gJhn/oAAAAASUVORK5CYII=) center right no-repeat;
    background-size: 7px 12px;
  }
  .regionArea {
    margin-top: 0;
    padding-top: 0;
  }
  .regionArea + .regionArea {
    margin-top: 60px;
  }
  .regionName {
    margin: 0 0 25px;
    padding: 5px 20px 0;
    border-top: 4px #1a3053 solid;
  }
  .regionBox {
    padding: 25px 20px;
    display: block;
  }
  .regionBox:last-of-type {
    margin-bottom: 0;
  }
  .regionBox h2 {
    margin-bottom: 15px;
    width: auto;
  }
  .regionBox h2 span {
  }
  .regionBox .regionData {
    width: auto;
  }
  .regionBox h3 {
  }
  .regionBox .TextStyle1 {
    margin: 0;
  }



  /* history */
  .historyTable {
    margin: 0 30px;
  }
  .historyTable:before {
    top: 43px;
    left: 0;
    height: calc(100% - 43px);
  }
  .historyTable dl {
    display: block;
  }
  .historyTable dl:first-child:before {
    display: none;
  }
  .historyTable dl + dl {
    margin-top: 30px;
  }
  .historyTable dl dt {
    padding: 0;
    width: 120px;
    line-height: 1;
    font-size: 40px;
    text-align: right;
  }
  .historyTable dl dd {
    padding: 25px 0 0 35px;
    display: block;
    width: 100%;
  }
  .historyTable dl dd:before {
    top: 0;
    left: -5px;
    width: 16px;
    height: 16px;
    background-color: #909191;
  }
  .historyTable dl dd:after {
    top: 7px;
    left: 0;
    width: 100%;
  }
  .historyTable dl dd .historyImg {
    margin-bottom: 10px;
    width: 100% !important;
  }
  .historyTable dl dd p {
    padding: 0 !important;
    width: 100% !important;
    max-width: inherit !important;
    line-height: 1.77;
    font-size: 13px;
  }
  .historyTable dl:nth-of-type(2) dd,
  .historyTable dl:nth-of-type(6) dd {
    display: flex;
    flex-direction: column-reverse;
  }
  
  /* TOPカテゴリ名複数行指定 */
  .topSectionHeadTitle.TitlePT02 a {
    display: inline-block;
    width: auto;
    padding-right: 20px;
  }   
  
  
}


/* for - 720px
=========================================================================================== */

@media screen and (max-width: 720px) {
  .HideRWD02 {display: none;}
  .ShowRWD02 {display: inline-block;}
    .table-scroll01 {overflow-x: auto;}
}

@media screen and (min-width: 721px) {
  .ShowRWD02 {display: none;}
}


/* for - 374px
=========================================================================================== */

@media screen and (max-width: 374px) {
  /* top */
  .topHero .heroTxt,
  .topHero .heroTxt.otherPxTxt {
    font-size: 20px;
  }
}

/* for - 360px
=========================================================================================== */

@media screen and (max-width: 360px) {
  .topSectionHeadTitle.TitlePT02 a {
    display: inline-block;
    padding-right: 20px;
    width: calc(74%);
  }
}