@charset "Shift_JIS";

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

Name: common_new.css

Create: 2020.01.15
Update: 2020.01.15

Copyright 2020 Hitachi, Ltd.

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

/* common
=========================================================================================== */
@media screen and (max-width: 994px) {
    #Contents,#Contents > .GridSet,#Contents > .GridSet > .Grid4 {
        margin: 0!important;
        padding: 0!important;
    }
    .newBaseWidIn {
        padding: 0 15px;
        box-sizing: border-box;
    }
}


/* Video Controller
=========================================================================================== */
@media screen and (max-width: 994px) {
    #topMainImage {
        padding-bottom: 55px;
    }
    .moreDetails {
        right: 15px;
        bottom: 10px;
    }
    .JS #VideoControl {
        left: 0;
    }
}


/* index
=========================================================================================== */
@media screen and (max-width: 994px) {
    #tpBnrAreaIn,#topicsAreaIn {
        padding: 0 15px;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 767px) {
    #tpSearchArea {
        height: auto;
        padding: 15px;
    }
    #tpSearchBox { height: 42px; }
    #tpSearchBox::before { height: 32px; }
    #tpSearchBox input[type="text"] { height: 30px; }
    #tpSearchBox input[type="submit"] { height: 42px; }
    #emergencyArea .emTitle {
        float: none;
        margin: 5px auto 0 auto;
    }
    #emergencyArea .emLink {
        float: none;
        width: 100%;
        padding-bottom: 10px;
        line-height: 130%!important;
    }
    #emergencyArea .emLink a,#emergencyArea .emLink a span { display: inline!important; }
    .newBaseWid.pt40 { padding-top: 30px!important; }
    #tpBnrArea {
        height: auto;
        margin-top: 30px;
        padding-top: 15px;
        background: #ffffff url("/image/global/index/new/bg_bnrarea_sp.png") bottom center no-repeat;
        background-size: cover;
    }
    #tpBnrAreaIn ul li {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 15px;
        box-shadow: none;
    }
    #tpBnrAreaIn ul li a {
        padding-bottom: 0;
        text-decoration: none;
    }
    #tpBnrAreaIn ul li a::after { display: none; }
    #tpBnrAreaIn ul li a > span { position: relative; }
    #topicsArea {
        margin-left: 0;
        margin-right: 0;
        padding: 30px 0 0 0;
        background: none;
    }
    .tpLink,.tpLink dd { display: block; }
    .tpLink dt {
        display: inline-block;
        font-weight: bold;
    }
    .tpLink dd:nth-child(2) {
        display: inline-block;
        padding-left: 5px;
    }
    .tpLink dd:nth-child(3) { width: 100%; }
    .topicsLink { margin-top: 20px; }
    .topicsLink li { text-align: right; }
    .btmText { padding-top: 50px; }
    .DateListStyle2 dt { font-weight: bold; }
    .topNews li {
        width: calc(50% - 2px);
        margin: 0 4px 4px 0;
    }
    .topNews li:nth-child(2n) { margin-right: 0; }
    .topNews > li > a {
        padding: 10px;
        border-bottom: none!important;
        background-color: #e8e8e8;
        transition: 0.2s;
    }
    .topNews > li > a::after { display: none; }
    .topNews > li.Current > a,.topNews > li > a:hover {
        background-color: #e60027;
        color: #ffffff;
    }
    #infoArea { padding-bottom: 30px; }
}


/* about
=========================================================================================== */
@media screen and (max-width: 994px) {
    .contentBodyIn {
        padding: 0 15px;
        box-sizing: border-box;
    }
    .contentBody .section { padding: 30px 0; }
}
@media screen and (max-width: 767px) {
    .sppt30 { padding-top: 30px!important; }
    .contentBody {
        padding-top: 15px;
        background-color: #ffffff;
    }
    .naviBlock {
        margin-top: 30px;
        margin-bottom: 15px;
        padding-top: 0;
    }
    .naviBlockIn {
        height: auto;
        background-position: center bottom!important;
        background-size: 100% auto;
    }

    .positionR .naviBLink { padding: 15px; }
    .naviBlock.positionR .naviBlockIn .naviBImage {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
    }
    .positionL .naviBLink {
        float: none;
        padding: 15px;
        margin-right: 0;
    }
    .naviBlock.positionL .naviBLink.isShow,.naviBlock.positionR .naviBLink.isShow {
        animation-name: animeSPtext;
        animation-duration: 0.8s;
        animation-delay: 0.4s;
        animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
        animation-fill-mode: forwards;
    }
    .naviBlock.positionL .naviBlockIn .naviBImage {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
    }
    .naviBlock.positionL .naviBlockIn .naviBImage.isShow,.naviBlock.positionR .naviBlockIn .naviBImage.isShow {
        animation-name: animeLeft01;
        animation-duration: 0.8s;
        animation-delay: 0s;
        animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
        animation-fill-mode: forwards;
    }
    .tileList li {
        width: 48.7%;
        max-width: 100%!important;
        margin-right: 2.6%;
        margin-bottom: 15px;
    }
    .tileList li:nth-child(3n) { margin-right: 2.6%; }
    .tileList li:nth-child(2n) { margin-right: 0; }
    .contentBody .linkBoxWrap01 { display: block!important; }
}
@media screen and (max-width: 399px) {
    .tileList li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .tileList li:nth-child(3n) { margin-right: 0; }
}


/* about > corporate
=========================================================================================== */
@media screen and (max-width: 767px) {
    .spCompanyImage { display: block; }
    .spCompanyImage img {
        width: 100%;
        height: auto;
    }
    .companyInfoBlock {
        margin-bottom: 15px;
        background-color: #ffffff;
    }
    .companyInfoBlockIn {
        background-image: none!important;
        box-sizing: border-box;
    }
    .companyInfoBlockIn .colTable {
        display: block;
        width: 100%;
        height: auto;
    }
    .companyInfoBlockIn .colTable .col {
        display: block;
        padding: 10px 15px;
        text-align: left;
        box-sizing: border-box;
    }
    .companyInfoBlockIn .colTable .col .centerBlock01 {
        width: 100%;
        margin: 0;
    }
    .cibNameImage {
        width: 100%;
        margin-top: 0;
        text-align: right;
    }
    .cibNameImage img { max-width: 145px; }
    #boxMenu01 {
        margin-top: 15px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    #boxMenu01 ul li { width: 50%; }
    #cib02 .companyInfoBlockIn .colTable {
        float: none;
        margin-right: auto;
    }
}


/* products
=========================================================================================== */
@media screen and (min-width: 1800px) {
    #productsMenu {
        background: url("/image/global/products/new/bg_productsmenu.jpg") bottom center no-repeat;
        background-size: 100% 248px;
    }
}
@media screen and (max-width: 994px) {
    #productsMenu {
        height: auto;
        padding-bottom: 50px;
    }
    #productsMenuIn {
        padding: 0 15px;
        box-sizing: border-box;
    }
    .productsBnrList li {
        width: 49.2227979%;
        max-width: 100%;
        margin-right: 1.5544041%;
    }
    .productsBnrList li:nth-child(3n) { margin-right: 1.5544041%; }
    .productsBnrList li:nth-child(2n) { margin-right: 0; }
}
@media screen and (max-width: 767px) {
    .pmCopyArea { display: none; }
    .titleProducts01 { margin-top: 15px!important; }
    .contentBodyIn.mb40 { margin-bottom: 30px!important; }
    #productsMenu {
        padding-bottom: 0;
        background: url("/image/global/products/new/bg_productsmenu.jpg") top center no-repeat;
        background-size: auto 100%;
    }
    #productsMenuIn { padding: 15px; }
    #pmList li {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }
    #pmList li:last-child { margin-bottom: 0; }
    #pmList li p.pmTab {
        position: relative;
        display: table;
        padding-right: 60px;
        border: solid 1px #ffffff;
        background-color: #dedede;
        transition: 0s;
    }
    #pmList li p.pmTab::before {
        content: " ";
        position: absolute;
        top: 50%;
        right: 30px;
        z-index: 9999;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        background: url("/image/common/hht/new/icon_link_down_xl_hd.png") right center no-repeat;
        background-size: 26px;
        transform: scaleX(-1);
        transition: 0s;
    }
    #pmList li p.pmTab.currentSP::before { transform: scale(-1,-1); }
    #pmList li p.pmTab:hover { background-color: #cccccc; }
    #pmList li p.pmTab::after { display: none; }
    #pmList li p.pmTab img.spOnly {
        display: inline!important;
        width: 100px;
        max-width: 100px;
    }
    #pmList li .pmText {
        position: relative;
        bottom: auto;
        left: auto;
        display: table-cell;
        width: 100%;
        height: auto;
        box-shadow: none;
        border-left: solid 1px #ffffff;
        background: none!important;
        line-height: 130%;
        vertical-align: middle;
    }
    #pmList li .pmText::after { display: none; }
    #pmList li .pmTabInMenu .col1,#pmList li .pmTabInMenu .col2 { display: block; }
    #pmList .col2 li:first-child a { border-top: solid 1px #e5e5e5; }
    .pmTabInMenu {
        display: none;
        background-color: #ffffff;
    }
    .pmTabInMenu .pmTabBody .pmTabBodyIn ul li {
        margin-bottom: 0!important;
        padding: 0 15px;
        box-sizing: border-box;
        transition: 0.2s;
    }
    .pmTabInMenu .pmTabBody .pmTabBodyIn ul li:hover { background-color: #efefef; }
    .pmTabInMenu .pmTabBody .pmTabBodyIn ul li a {
        display: block;
        padding: 12px 30px 12px 0;
        border-bottom: solid 1px #e5e5e5;
        background: url("/image/common/jp/r1/icon/icon_link_right_hd.gif") right 5px center no-repeat;
        background-size: 16px;
        text-decoration: none;
        font-size: 16px;
        color: #333333;
    }
    .pmTabInMenu .pmTabBody .pmTabBodyIn ul li:last-child a { border-bottom: none; }
    .pmTabInMenu .pmTabBody .pmTabBodyIn ul li a:hover {
        background: url("/image/common/jp/r1/icon/icon_link_right_hd.gif") right 3px center no-repeat;
        background-size: 16px;
    }
}
@media screen and (max-width: 650px) {
    .productsBnrList li {
        width: 100%;
        margin-right: 0;
    }
    .productsBnrList li:nth-child(3n) { margin-right: 0; }
}


/* inquiry
=========================================================================================== */
@media screen and (min-width: 2032px) {
    #inquiryMenu {
        background: url("/image/global/products/new/bg_productsmenu.jpg") bottom center no-repeat;
        background-size: 100% 280px;
    }
}
@media screen and (max-width: 994px) {
    #inquiryMenuIn {
        padding: 0 15px;
        box-sizing: border-box;
    }
    .iqCopyArea .iqTabBody .iqTabBodyIn::before {
        width: 20%;
        margin-left: 15px;
    }
    .iqCopyArea .iqMenu1 .iqTabBody .iqTabBodyIn::before { left: 0; }
    .iqCopyArea .iqMenu2 .iqTabBody .iqTabBodyIn::before { left: calc(20% + 3px); }
    .iqCopyArea .iqMenu3 .iqTabBody .iqTabBodyIn::before { left: calc(40% + 6px); }
    .iqCopyArea .iqMenu4 .iqTabBody .iqTabBodyIn::before { left: calc(60% + 9px); }
    .contentGrayAreaIn {
        padding: 0 15px;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 767px) {
    .iqCopyArea { display: none; }
    #inquiryMenu {
        height: auto;
        padding: 15px 0;
    }
    #iqList {
        float: none;
        width: 100%;
        border-left: none;
    }
    #iqList > li {
        float: none;
        width: 100%;
        margin-bottom: 10px;
        border: none;
    }
    #iqList > li .iqTab {
        position: relative;
        display: table;
        height: auto;
        padding-right: 60px;
        border: solid 1px #ffffff;
        background-image: none!important;
        background-color: #dedede!important;
        box-sizing: border-box;
        transition: 0s;
    }
    #iqList > li .iqTab::after { display: none; }
    #iqList > li .iqTab .iqImage {
        display: table-cell;
        width: 100px;
    }
    #iqList > li .iqTab .iqImage img {
        width: 100%;
        height: auto;
    }
    #iqList > li .iqTab .iqText {
        display: table-cell;
        padding: 10px;
        border-left: solid 1px #ffffff;
        text-align: left;
        text-shadow: none;
        font-weight: bold;
        color: #333333;
    }
    .iqRightMenu {
        display: table;
        float: none;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .iqRightMenu > a {
        display: table-cell;
        width: 100%;
        height: 87px;
        vertical-align: middle;
        box-sizing: border-box;
    }
    .iqRightMenu > a::after { display: none; }
    #enPage .iqRightMenu > a::after {
        display: block;
        bottom: 17px;
    }
    .iqTabInMenu { display: none; }
    #iqList li .iqTab::before,.iqTabInMenu .dotRedList::before {
        content: " ";
        position: absolute;
        top: 50%;
        right: 30px;
        left: auto;
        z-index: 9999;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        background: url("/image/common/hht/new/icon_link_down_xl_hd.png") right center no-repeat;
        background-size: 26px;
        opacity: 1;
        transform: scaleX(-1);
        transition: 0s;
    }
    #enPage #iqList > li .iqTab::before {
        background: url("/image/common/jp/r1/icon/icon_link_right_hd.gif") right center no-repeat;
        background-size: 26px;
        transform: scaleX(1);
        opacity: 1;
    }
    #iqList li p.iqTab.currentSP::before,.iqTabInMenu .dotRedList.currentSP::before { transform: scale(-1,-1); }
    #iqList li p.iqTab:hover { background-color: #cccccc!important; }
    #enPage #iqList li a.iqTab:hover { background-color: #cccccc!important; }
    #iqList li p.iqTab::after { display: none; }
    #iqList li .iqTabInMenu .colSection { display: block; }
    #iqList > li .iqTab.current:hover::before { opacity: 1.0; }
    .iqTabInMenu .dotRedList {
        position: relative;
        margin-bottom: 0;
        padding: 20px 60px 20px 15px!important;
        border-bottom: solid 1px #dedede;
        background-image: none;
        background-color: #ffffff;
        font-size: 15px;
        cursor: pointer;
    }
    .spSection { padding: 15px; }
    hr.hrLine01 { display: none; }
    .spToggleClass { background-color: #efefef; }
    .spToggleClass .TextStyle1,.spToggleClass .LinkListStyle1 { margin-bottom: 0; }
    .iq2ColBlock { display: block; }
    .iq2ColBlock .col1 {
        display: block;
        width: calc(100% - 30px);
        margin: 0 auto;
        padding: 15px 0;
        border-bottom: solid 1px #ffffff;
    }
    .iq2ColBlock .col2 {
        display: block;
        width: calc(100% - 30px);
        margin: 0 auto;
        padding: 15px 0;
        border-left: none;
        border-bottom: solid 1px #ffffff;
    }
    .iq2ColBlockEN {
        display: block;
        width: 100%;
    }
    .iq2ColBlockEN .col1 {
        display: block;
        width: 100%;
        padding-right: 0;
    }
    .iq2ColBlockEN .col2 {
        display: block;
        width: 100%;
        padding-left: 0;
    }
    .iq2ColBlockEN .LinkListStyle1 { margin-top: 0!important; }
    .iq2ColBlockEN .col1 .LinkListStyle1 > li:first-child { padding-top: 0!important; }
    .spWTopLine { border-top: solid 1px #ffffff; }
    .spBorderBtmNone { border-bottom: none!important; }
    .spAdTitle {
        margin-left: 15px;
        margin-bottom: 0;
        padding-top: 15px;
    }
    .contentGrayArea { padding: 15px 0; }
    .contentGrayArea .titleProducts01 { margin-top: 0!important; }
    .contentGrayArea .boxType02 { margin-top: 15px; }
    .contentGrayArea .TextStyle1.pt30 { padding-top: 15px!important; }
    .contentBodyIn.mb40 { margin-bottom: 15px!important; }
    .inquiryArea { padding: 15px 0 30px 0; }
    .inquiryArea .boxType01 { margin-top: 15px; }
    .spToggleClass { display: none; }
}

@media screen and (max-width: 579px) {
    .inquiryArea .colBlock2 {
        display: block;
        margin-bottom: 0;
    }
    .inquiryArea .colBlock2 .col {
        display: block;
        width: 100%;
    }
    .inquiryArea .boxType01 { padding: 0 15px; }
    .inquiryArea .dotRedList { margin-left: 0; }
    .inquiryArea .colBlock2 .col { padding: 0; }
    .inquiryArea .colBlock2 .col .colInBox { padding-left: 15px; }
    .inquiryArea .colBlock2 .col .colInBox.boxLine { border-left: none; }
    .inquiryArea .spIqSection {
        padding: 15px 0;
        border-bottom: solid 1px #999999;
    }
    .inquiryArea .spIqSectionLast { padding: 15px 0; }
    .inquiryArea .spIqSectionLast .LinkListStyle1.pl30 { padding-left: 15px!important; }
}


/* adjust
=========================================================================================== */
@media screen and (max-width: 767px) {
    .pcOnly { display: none; }
    .spOnly { display: block; }
}