@charset "UTF-8";
@import url("/hcrd/fonts/hitachisans.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap");
/* 搜索窗口 */
@import "header.css";
@import "footer.css";


:root {
    --design-width: 82.8125rem;
    --contents-width: 79.6875rem;
    --contents-side-padding: 1.5rem;
    --title-h2-fz: 28px;
    --minwidth: 320px;
    --fixed-header-height: 100px;
    --root-fz: 16px;
    --line-height: 1.5;
    --hover-transform-ratio: 1.02;
    --hover-opacity-ratio: 0.8;
    --hover-duration: .3s;
    --color-base-1: #000;
    --color-base-1-rgb: 0, 0, 0;
    --color-black-1: #333333;
    --color-black-1-rgb: 51, 51, 51;
    --color-white-1: #fff;
    --color-white-1-rgb: 255, 255, 255;
    --color-gray-1: #4D4D4D;
    --color-gray-1-rgb: 77, 77, 77;
    --color-gray-2: #EFEFEF;
    --color-gray-2-rgb: 239, 239, 239;
    --color-gray-3: #B3B3B3; 
    --color-gray-3-rgb: 179, 179, 179;
    --color-gray-4: #6D6D6D;
    --color-gray-4-rgb: 109, 109, 109;
    --color-gray-5: #D9D9D9;
    --color-gray-5-rgb: 217, 217, 217;
    --color-gray-6: #cccccc;
    --color-gray-6-rgb: 204, 204, 204;
    --color-red-1: #B6001A;
    --color-red-1-rgb: 182, 0, 26;
    --color-red-2: #e60027;
    --color-red-2-rgb: 230, 0, 39;
    --brand-color: #fa000f;
    --brand-color-dark: #c00;
    font-size: 16px;
}


.bg_gray{
    background-color: #EFEFEF;
}

.bg_dark{
    background-color: #403E3E;
}

/* ---------------------------------------------
*   base start
--------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, hr {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
body *{
    box-sizing: border-box;
	font-family: "Hitachi Sans","Noto Sans SC",sans-serif,'微软雅黑',Meiryo,'宋体',Simsun,Arial,Helvetica;
    color: #333;
}
ol, ul {
    list-style: none;
}
[v-cloak] {
    display: none;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
q, blockquote {
    quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none;
    clear: both;
}
a {
    display: inline-flex;
    align-items: center;
    color: #000;
}
a:hover {
    color: var(--color-red-1);
    cursor: pointer;
}
a img {
    border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
input, button, textarea, select {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    text-indent: 0.01px;
    text-overflow: "";
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

button {
    touch-action: manipulation;
    cursor: pointer;
}

textarea {
    display: block;
    overflow: auto;
    resize: none;
}

sub{
    font-size: 12px;
}

mark{
    color: #B6001A;
    background: transparent;
    
}

select {
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

/* 注释样式 start */
ol.annotation{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
}
ol.annotation li{
    font-size: 14px;
    color: #4d4d4d;
}
ol.annotation li a{
    color: #4d4d4d;
}
/* 注解样式 end */
section p{
    margin-bottom: 20px;
    line-height: 1.5;
    font-size: 16px;
}
/***************** 文案位置 start *****************/
.RightAdjust{
    display: flex;
    justify-content: flex-end;
    text-align: right;
}
.CenterAdjust{
    display: flex;
    justify-content: center;
    text-align: center;
}
/***************** 文案位置 end *****************/

.cmp-container{
    padding-inline: var(--contents-side-padding);
    max-width: var(--design-width);
    margin-inline: auto;
}
picture {
    display: block;
}
picture img{
    width: 100%;
}
@media screen and (max-width: 994px) {
    br.forPc{
        display: none;
    }
}
@media screen and (max-width: 767px) {
    :root{
        --contents-side-padding: 15px;
    }
}

article section{
    padding-inline: 0;
}
a{
    transition: all .3s ease-in-out;
}
a:link{
    text-decoration: none;
}
main{
    width: 100%;
    min-height: calc(100vh - var(--fixed-header-height) * 1px);
    padding-block: var(--fixed-header-height) 100px;
    min-height: 800px;
}
section{
    margin-bottom: 70px;
    padding-inline: var(--contents-side-padding);
    max-width: var(--design-width);
    margin-inline: auto;
}
section p{
    line-height: 1.5;
    font-size: 1rem;
}


/******************* 面包屑列表 start *******************/
.cmp-breadcrumb {
    max-width: 1306px;
    padding-inline: 15px;
    margin-inline: auto;
}
.cmp-breadcrumb ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-block: 15px;
}
.cmp-breadcrumb ul li{
    font-size: 12px;
    line-height: 1.5;
    margin-left: 13px;
}
.cmp-breadcrumb ul li:first-child{
    margin-left: 0;
}
.cmp-breadcrumb ul li a{
    cursor: pointer;
    position: relative;
    transition: .3s ease;
    color: #c00;
    display: flex;
    align-items: center;
}
.cmp-breadcrumb ul li a::after {
    content: "";
    width: 10px;
    aspect-ratio: 1;
    display: block;
    background-image: url('/hcrd/image/icon/icon_arrow_r_gray.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right center;
    margin-left: 10px;
}

.cmp-breadcrumb ul li a:hover{
    text-decoration: underline;
    transition: .3s ease;
}
/******************* 面包屑列表 end *******************/


/****************** 标题 start ******************/
section h2{
    font-size: 32px;
}
h2.cmp-title {
    margin-bottom: 24px;
}
.cmp-title-center {
    text-align: center;
}
.cmp-title-left {
    text-align: left;
}
.cmp-title-right {
    text-align: right;
}
/****************** 标题 end ******************/


/***************** 自定义公共样式 end *****************/
@media screen and (max-width: 1320px) {
    .GridSet .Grid4 .Section{
        padding-inline: var(--contents-side-padding);
    }

}