@charset "Shift_JIS";

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

Name: common.css
Description: common CSS
Create: 2025.08.01
Update: 
Copyright 2025 Hitachi, Ltd.

***************************************************** */
/* ==================== */
/* custom property */
/* ==================== */
:root {
    /* 色 */
    --color-primary-b-old: #333;
    --color-primary-b: #0c0c0c;
    --color-deep-contrast: #fff;

    --color-primary-g1: #f4f4f4;
    --color-primary-g1-rgb: 244,244,244;
    --color-primary-g2: #d9d9d9;
    --color-primary-g2-rgb: 217,217,217;
    --color-primary-g3: #b3b3b3;
    --color-primary-g3-rgb: 179,179,179;
    --color-primary-g4: #737373;
    --color-primary-g4-rgb: 115,115,115;
    --color-primary-g5: #4d4d4d;
    --color-primary-g5-rgb: 77,77,77;
    --color-primary-g6: #222222;
    --color-primary-g6-rgb: 34,34,34;

    --color-primary-r1: #fa000f;
    --color-primary-r1-rgb: 250,0,15;
    --color-primary-r2: #cc0000;
    --color-primary-r2-rgb: 204,0,0;
}


/* ==================== */
/* 共通パーツ */
/* ==================== */
/*文章*/
.csTextSizeM {
    font-size: 1rem;
    color: var(--color-primary-b-old);
    line-height: 1.6;
    margin: 0 0 1em;
}

/*見出し*/
.csHeadingLBox {
    margin: 80px 0 55px;
    padding: 0;
}

.csHeadingLBox .csHeadingLTxt {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 18px;
    color: var(--color-primary-b);
}

.csHeadingLBox .csHeadingL {
    margin: 0 auto;
    padding-right: 4.375rem;
    text-align: center;
}

.csHeadingL {
    position: relative;
    font-size:2.25rem;
    font-weight: bold;
    color: var(--color-primary-b);
    line-height: 1.3;
    padding: 0 0 0 4.375rem;
    margin: 80px 0 55px;
    width: fit-content;
    text-align: left;
    background: none;
}

.csHeadingL.csHeadingLCenter {
    margin-left: auto;
    margin-right: auto;
    padding-right: 4.375rem;
    text-align: center;
}

.csHeadingL::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0.9375rem;
    height: 2.5rem;
    background-color: var(--color-primary-r2);
    transform: skew(-45deg);
    transform-origin: left bottom;
}


@media (max-width:767px) {
    .csHeadingLBox {
        margin: 50px 0 30px;
    }

    .csHeadingLBox .csHeadingLTxt {
        margin-bottom: 10px;
        font-size: 0.8125rem;
    }

    .csHeadingLBox .csHeadingL {
        margin: 0 auto !important;
        padding-right: 2.1875rem;
    }

    .csHeadingL {
        margin: 40px 0 30px !important;
        padding: 0 0 0 2.1875rem;
        font-size: 1.375rem;
    }

    .csHeadingL.csHeadingLCenter {
        padding-right: 0;
        text-align: left;
    }

    .csHeadingL::before {
        width: 0.5rem;
        height: 1.375rem;
    }
}

.csHeadingLM {
    font-size:1.875rem;
    color: var(--color-primary-b);
    font-weight: bold;
    margin: 70px 0 40px;
    padding: 0;
    line-height: 1.6;
    background: none;
}

@media (max-width:767px) {
    .csHeadingLM {
        font-size: 1.25rem;
        margin: 40px 0 20px !important;
    }
}

.csHeadingM {
    font-size:1.5rem;
    font-weight: bold;
    color: var(--color-primary-b);
    position: relative;
    padding: 0 0 0 20px;
    margin: 50px 0 30px;
    line-height: 1.3;
}

.csHeadingM::before {
    content: "";
    display: block;
    width: 5px;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    background-color: var(--color-primary-r2);
}

@media (max-width:767px) {
    .csHeadingM {
        font-size: 1.125rem;
        padding: 0 0 0 15px;
        margin: 30px 0 20px;
    }
}

.csHeadingS {
    font-size:1.2rem;
    font-weight: bold;
    color:var(--color-primary-r2);
    padding: 0;
    margin: 20px 0 15px;
    line-height: 1.3;
}

.csHeadingM + .csHeadingS {
    margin-top: -10px;
}

@media (max-width:767px) {
    .csHeadingS {
        font-size: 1rem;
    }
}

/*ボタン*/
.csBtnS,
.csBtnM,
.csBtnL {
    display: inline-block;
    background-color: var(--color-primary-r2);
    color: var(--color-deep-contrast) !important;
    text-decoration: none !important;
    text-align: inherit;
    transition: background-color .3s ease;
}

.csBtnS:hover,
.csBtnS:active,
.csBtnM:hover,
.csBtnM:active,
.csBtnL:hover,
.csBtnL:active {
    background-color: var(--color-primary-b);
}

.csBtnS {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.4;
    padding: 8px 35px 8px 15px;
    background-image: url(/image/jp/r1/icon/icon_link_right_l_white_hd.gif);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 10px center;
}

.csBtnM {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.4;
    padding: 15px 40px 15px 25px;
    background-image: url(/image/jp/r1/icon/icon_link_right_l_white_hd.gif);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 15px center;
}

.csBtnL {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.6;
    padding: 15px 55px 15px 40px;
    background-image: url(/image/jp/r1/icon/icon_link_right_l_white_hd.gif);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: right 15px center;
}

.csBtnS.csNewWin,
.csBtnM.csNewWin,
.csBtnL.csNewWin {
    background-image: url(/image/jp/r1/icon/icon_new_window_white_hd.png);
}

.csBtnS.csPDF,
.csBtnM.csPDF,
.csBtnL.csPDF {
    background-image: url(/image/jp/r1/icon/icon_pdf_white_hd.png);
}

.csBtnCenter {
    text-align: center;
    margin: 40px 0;
}

.csBtnListVertical {
    margin: 20px 0;
}

.csBtnListVertical > li {
    margin-bottom: 15px;
}

.csBtnListSide {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}



/*BOXリスト*/
.csBoxList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 50px calc(calc(1 - calc(390 * 3 / 1275)) / 2 * 100%);
    margin: 50px 0;
}

.csBoxList > li {
    width: calc(390 / 1275 * 100%);
    margin: 0;
    padding: 0;
    background-color: var(--color-primary-g1);
}

.csBoxList > li a {
    text-decoration: none !important;
    color: var(--color-primary-b-old);
    display: block;
    background-image: url(/image/jp/r1/icon/icon_link_right_hd.gif);
    background-repeat: no-repeat;
    background-position: right 20px bottom 20px;
    background-size: 20px 20px;
}

.csBoxList > li a.csNewWin {
    background-image: url(/image/jp/r1/icon/icon_new_window_hd.gif);
}

.csBoxList > li a.csPDF {
    background-image: url(/image/jp/r1/icon/icon_pdf_hd.gif);
}

.csBoxListImgBox {
    background-color: #fff;
    aspect-ratio: 78 / 43;
    overflow: hidden;
}

.csBoxListImgBox > img {
    transition: opacity .3s ease;
    width: 100%;
    aspect-ratio: 78 / 43;
    object-fit: cover;
    object-position: center center;
}

.csBoxListImgBox > img.csBLImgLeftCenter {
    object-position: left center;
}

.csBoxListImgBox > img.csBLImgRightCenter {
    object-position: right center;
}

.csBoxListImgBox > img.csBLImgCenterTop {
    object-position: center top;
}

.csBoxListImgBox > img.csBLImgCenterBottom {
    object-position: center bottom;
}

.csBoxList > li a:hover .csBoxListImgBox > img {
    opacity: 0.8;
}

.csBoxListTxtBox {
    padding: 20px 20px 50px;
}

.csBoxListTxt {
    font-size: 0.875rem;
    margin: 0 0 1em;
}

.csBoxListTxt:last-child {
    margin-bottom: 0;
}

@media (max-width:767px) {
    .csBoxList {
        margin: 25px 0;
        gap: 20px 15px;
    }

    .csBoxList > li {
        width: calc(calc(100% - 15px) / 2);
    }
}

@media (max-width:579px) {
    .csBoxList > li {
        width: 100%;
    }
}

/*フットバナー*/
.FatBanner.csFatBannerCustom a.csNewWin strong {
    background-image: url(/image/jp/r1/icon/icon_new_window_white_hd.png);
    border-right: none !important;
    background-position: right 5px center;
}

.FatBanner.csFatBannerCustom a:link strong,
.FatBanner.csFatBannerCustom a:visited strong {
    background-color: var(--color-primary-r2);
    transition: background-color .3s ease;
}

.FatBanner.csFatBannerCustom a:hover strong,
.FatBanner.csFatBannerCustom a:active strong {
    background-color: var(--color-primary-g6);
}

.FatBanner.csFatBannerCustom > ul img {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 30 / 13;
    width: 100%;
}

.FatBanner.csFatBannerCustom > ul .csFBCImgLeftCenter {
    object-position: left center;
}

.FatBanner.csFatBannerCustom > ul .csFBCImgRightCenter {
    object-position: right center;
}

.FatBanner.csFatBannerCustom > ul .csFBCImgCenterTop {
    object-position: center top;
}

.FatBanner.csFatBannerCustom > ul .csFBCImgCenterBottom {
    object-position: center bottom;
}





/* ==================== */
/* フッター・フローティングお問い合わせ共通 */
/* ==================== */
.csFooterContactBtn {
    display: inline-block;
    text-align: center;
    background-color: #fff;
    border: 2px solid var(--color-primary-r2);
    color: var(--color-primary-r2);
    font-size: 1.125rem;
    font-weight: bold;
    width: fit-content;
    min-width: 280px;
    max-width: 100%;
    line-height: 1.4;
    padding: 5px 15px;
    box-sizing: border-box;
    text-decoration: none !important;
    border-radius: 100vmax;
    margin: 5px;
    transition: all .3s ease;
}

.csFooterContactBtn:link,
.csFooterContactBtn:visited {
    color: var(--color-primary-r2);
}

.csFooterContactBtn:hover,
.csFooterContactBtn:active {
    color: var(--color-deep-contrast);
    background-color: var(--color-primary-r2);
    border: 2px solid var(--color-primary-r2);
}

.csFooterContactBtn.csContactBtn,
.csFooterContactBtn.csDownloadBtn {
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    padding-right: 40px;
    padding-left: 20px;
}

.csFooterContactBtn.csContactBtn {
    background-image: url(/image/jp/r1/icon/icon_mail_hd.gif);
}

.csFooterContactBtn.csContactBtn:hover,
.csFooterContactBtn.csContactBtn:active {
    background-image: url(/image/jp/r1/icon/icon_mail_white_hd.png);
}

.csFooterContactBtn.csDownloadBtn {
    background-image: url(/image/jp/r1/icon/icon_download_hd.gif);
    background-position: right 15px top 5px;
}

.csFooterContactBtn.csDownloadBtn:hover,
.csFooterContactBtn.csDownloadBtn:active {
    background-image: url(/image/jp/r1/icon/icon_download_white_hd.png);
}

@media (max-width: 767px) {
    .csFooterContactBtn {
        width: 100%;
        margin: 0;
    }

    .csFooterContactBtn + .csFooterContactBtn {
        margin-top: 15px;
    }

    .csFooterContactBtn.csContactBtn,
    .csFooterContactBtn.csDownloadBtn {
        padding-left: 40px;
    }
}

/* ==================== */
/* フッターお問い合わせ */
/* ==================== */
#csFooterContact {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 100px 15px 90px;
    margin: 0;
}

#Contents + #IncludeFooterContactArea > #csFooterContact,
div:has(#Contents) + #IncludeFooterContactArea > #csFooterContact {
    padding-top: 35px;
}

#csFooterContactInner {
    max-width: 1275px;
    box-sizing: border-box;
    margin: 0 auto;
    background-color: var(--color-primary-g5);
    border-radius: 6px;
    padding: 40px 220px;
    position: relative;
    align-items: center;
    text-align: center;
}

#csFooterContactInner:has(#csFooterContactInnerBtnList) {
    padding: 30px 0;
}

#csFooterContactTitleBox {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

#csFooterContactSubtitle {
    color: var(--color-deep-contrast);
    font-size: 1rem;
    padding: 0;
    margin: 0;
}

#csFooterContactTitle {
    color: var(--color-deep-contrast);
    font-size: 1.625rem;
    font-weight: bold;
    background: none;
    margin: 0;
    padding: 0;
}

#csFooterContactInnerBtnList {
    margin: 0 15px 0 max(220px, calc(292 / 1275 * 100%));
    display: flex;
    gap: 25px;
    max-width: 825px;
    flex-wrap: wrap;
}

#csFooterContactInnerBtnList > li {
    background-color: rgba(255,255,255,.1);
    border-radius: 6px;
    flex: 1;
    padding: 30px 15px;
    color: var(--color-deep-contrast);
}

#csFooterContactInnerBtnList > li > p {
    color: inherit;
}

.csFooterContactBtn + p {
    margin-top: 20px;
}



@media (max-width: 767px) {
    #csFooterContact {
        padding-top: 50px;
    }

    #Contents + #IncludeFooterContactArea > #csFooterContact,
    div:has(#Contents) + #IncludeFooterContactArea > #csFooterContact {
        padding-top: 0;
        margin-top: -15px;
    }


    #csFooterContactInner,
    #csFooterContactInner:has(#csFooterContactInnerBtnList) {
        padding: 20px 15px;
    }

    #csFooterContactTitleBox {
        position: static;
        text-align: center;
        transform: translateY(0);
        margin-bottom: 15px;
    }

    #csFooterContactSubtitle {
        font-size: 0.8125rem;
    }

    #csFooterContactTitle {
        font-size: 1.375rem;
    }

    #csFooterContactInnerBtnList {
        margin: 0;
    }
}




/* ==================== */
/* フローティングお問い合わせ */
/* ==================== */
#csFloatingContact {
    position: fixed;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    z-index: 20000;
    width: 100%;
    height: auto;
    background-color: rgba(var(--color-primary-g5-rgb), 0.8);
    transition: 0.5s;
    box-sizing: border-box;
    text-align: center;
}
#csFloatingContact.csPosFix {
    transform: translateY(0);
    transition: transform ease 0.5s;
}

#csFloatingContactInner {
    position: relative;
    padding: 13px 15px 13px;
    max-width: 1275px;
    margin: 0 auto;
}

#csFloatingContact .csFooterContactBtn {
    min-width: 220px;
}

@media (max-width: 767px) {
    #csFloatingContactInner #FooterPageTop {
        right: 0;
    }
}