@charset "Shift_JIS";

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

Name: item.css

Description: 

Create: 2026.01.08

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

/*news　お知らせ
=========================================================================================== */
.newsListBox dt{
font-size: 83%;
/*border-bottom: 1px solid #0057c3;
color: #0057c3;*/
font-weight: bold;
}
.newsListBox dt span{
display: block;
font-size:100% !important;
margin-left: -0.5em;
/*color: #000 !important;*/
}
.newsListBox dd{
font-size: 83%;
}

/* product　取扱製品
=========================================================================================== */
dl.productList dt{
margin-bottom: 5px;
font-size: 100%;
font-weight: bold;
/*color: #4D4D4D;*/
}
dl.productList dd{
margin-bottom: 15px;
font-size: 90%;
}
dl.productList dd.iconPositon{
position: relative;
}
dl.productList dd.iconPositon p{
position: absolute;
top: -4.0rem;
left: 12rem;
}
dl.productList dd.iconPositon p img{
width: auto;
max-height: 50px !important;
}

/*kouji 工事
=========================================================================================== */

.icoTtlBox{
clear: both;
overflow: hidden;
margin-bottom: 15px;
}

.icoTtlBox dt{
float: left;
margin-right: 15px;
min-height: 92px;
}

.icoTtlBox dd span{
font-size: 150%;
font-weight: bold;
display: inline-block;
margin-bottom: 15px;
}

.dottBborder{
border-bottom: 3px dotted #4d4d4d;
margin-bottom: 35px;
padding-bottom: 15px

}
/*--実績--*/

.constructionList{
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.constructionList li{
flex: 0 0 calc(100% / 4); 
}

/* service 保守・メンテナンス
=========================================================================================== */

.inBoxBKF{
margin: 15px 15px 0;
padding-top: 15px;
background-color: #FFF;
}
.inBoxBKF{
margin: 15px;
background-color: #FFF;
}
.inBoxBKF02{
margin: 0 15px 12px 15px;
background-color: #FFF;
}
.inBoxBKF02 ul{
margin: 0 !important;
}
.inBoxBKF02 li{
padding: 20px 0;
font-size: 110%;
}

.listDot li{
margin: 0 0 5px !important;
padding: 0 0 0 1em !important;
background: url(/niigata-hitachi/image/jp/r1/icon/icon_list_marker_hd.gif) no-repeat 0 2px !important;
background-size: 16px 16px !important;
-moz-background-size: 16px 16px !important;
-webkit-background-size: 16px 16px !important;
-o-background-size: 16px 16px !important;
-ms-background-size: 16px 16px !important;
line-height: 140% !important;
}

.ThumbW120SetStyle .Img, .ImgW120SetStyle .imgW300 {
    width: 300px !important;
}

.BoxPatternC .ImgW120SetStyle .imgW300Set {
    margin-left: -450px !important;
}

.BoxPatternC .ImgW120SetStyle .imgW300Set dl {
    margin-left: 340px !important;
}

.grayArea{
display: flex;
}

.bkGrayBox{
margin-bottom: 15px;
padding:10px;
background-color: #F4F4F4;
height: 80%;
}
.bkWhiteBoxTtl{
background-color: #FFF;
padding: 10px 0;
}

/*about　会社情報
=========================================================================================== */

/*アクセスアップ*/
.mapArea{
display: flex;
text-align: center;
align-items: center;
}
.mapArea iframe{
margin-bottom: 10px;
border: 1px solid #CCC !important;
}
.mapArea .TextStyle1{
display: inline-block;
max-width: 260px;
margin: 0 auto;
text-align: left;
}
.TxtBB{
font-weight: bold;
color:#00029d;
}

/*new-building 新社屋ページ
=========================================================================================== */

/*画像テキスト横並び配置パターン*/
.cornerArea{
display: flex;
padding: 25px;
background: #def2fc;
border-radius: 8px;
margin-bottom: 25px;
}
.cornerArea img{width: 100%;}

.cornerAreaLeft {
/*float: left;*/
width: 48%;
margin: 0 2% 0 0;
}
.cornerAreaRight {
/*float: left;*/
width: 50%;
margin: 0;
}

.cornerAreaRight .ImgOnlyStyle{
margin-bottom: 0;
}

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

/*画像テキスト縦並び配置パターン*/
.cornerArea02{
display: block;
padding: 25px;
background: #def2fc;
border-radius: 8px;
margin-bottom: 25px;
}
.cornerAreaArea02 img{width: auto;}

.cornerArea p.TextStyle1, .cornerArea02 p.TextStyle1{font-size: 100%;}

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

h3.buildingTtl{
font-size:150%;
border-bottom: 3px solid #226586;
margin-bottom: 25px;
padding-bottom: 15px;
}

/*丸数字*/
h3.buildingTtl span {
position: relative; /* 擬似要素の位置の基準にする */
display: inline-block; /* 擬似要素が配置できるようブロック要素化 */
margin-right: 15px;
padding: 0.5em; /* 数字と丸の間の余白 */
font-weight: bold;
font-size: 1.2em;
z-index: 7;
color: #226586;
}

h3.buildingTtl span::before {
content: ""; /* 擬似要素にはcontentプロパティが必要 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 中央寄せ */
width: 1.8em; /* 丸の大きさ */
height: 1.8em;
border-radius: 50%;
background-color: #FFF;
z-index: -1; /* 数字より奥に配置 */
}

/*------ 色指定 ------*/
/*---緑---*/
.colorGreen{background: #defce7;}
.colorGreen h3.buildingTtl{border-bottom: 3px solid #228637;}
.colorGreen h3.buildingTtl span {color: #228637;}
/*---黄緑---*/
.colorYGreen{background: #ebfcde;}
.colorYGreen h3.buildingTtl{border-bottom: 3px solid #668622;}
.colorYGreen h3.buildingTtl span {color: #668622;}
/*---黄色---*/
.colorYellow{background: #fcfcde;}
.colorYellow h3.buildingTtl{border-bottom: 3px solid #beb33a;}
.colorYellow h3.buildingTtl span {color: #beb33a;}
/*---オレンジ---*/
.colorOrange{background: #fcf2de;}
.colorOrange h3.buildingTtl{border-bottom: 3px solid #dfac52;}
.colorOrange h3.buildingTtl span {color: #dfac52;}
/*---赤---*/
.colorRed{background: #faecec;}
.colorRed h3.buildingTtl{border-bottom: 3px solid #c55757;}
.colorRed h3.buildingTtl span {color: #c55757;}
/*---ピンク---*/
.colorPink{background: #faecf6;}
.colorPink h3.buildingTtl{border-bottom: 3px solid #c55798;}
.colorPink h3.buildingTtl span {color: #c55798;}
/*---紫---*/
.colorPurple{background: #f6ecfa;}
.colorPurple h3.buildingTtl{border-bottom: 3px solid #9357c5;}
.colorPurple h3.buildingTtl span {color: #9357c5;}


/*recruit 採用情報
=========================================================================================== */
h3.recruitTtl{
margin: 0 0 15px;
padding: 0 0 0 52px;
font-size: 130%;
border-bottom: 2px solid #CC0000;
background-image: url('/niigata-hitachi/images/recruit/ico_recruit.gif');
background-repeat: no-repeat;
background-position: 5px bottom;
color: #CC0000;
}
.recruitTtl-s01, .recruitTtl-s02, .recruitTtl-s03{ padding-left: 8px; font-size: 130%;}
.recruitTtl-s01{border-left: 4px solid #0090d6; color: #0090d6;}
.recruitTtl-s02{border-left: 4px solid #e58804; color: #e58804;}
.recruitTtl-s03{border-left: 4px solid #66ab27; color: #66ab27;}

/*--------　メインビジュアル下ボタン　-----------*/
.recruitMenu{
display: flex;
justify-content: center;
}

.recruitMenu li a{
min-width: 240px;
font-size: 100%;
display: inline-block;
text-align: center;
border: 1px solid #CC0000;
padding: 15px 20px;
margin: 0 20px 0 0;
text-decoration: none;
box-sizing: border-box;
background-image: url(../../../image/jp/r1/icon/icon_link_right_hd.gif);
background-repeat: no-repeat;
background-position: right center;
background-size: 20px 20px;
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
-o-background-size: 20px 20px;
-ms-background-size: 20px 20px;
word-break: break-all;
}
.recruitMenu li a:hover{
background-color: #EEE;
background-image: url(../../../image/jp/r1/icon/icon_link_right_hover_hd.gif);
}

/*------　各職種説明　-------*/

.recruitItem {
display: flex;
padding: 25px;
background: #def2fc;
border-radius: 8px;
margin-bottom: 25px;
}
.recruitColor01 {
background: #d1edfa;
}
.recruitColor02 {
background: #f7ead4;
}
.recruitColor03 {
background: #e4f4da;
}
.recruitItemLeft {
width: 58%;
margin: 0 2% 0 0;
}
.recruitItemLeft p.TextStyle1{
font-size: 100% !important;
}

.recruitItemLeft ul.LinkListStyle1{
font-size: 100% !important;
}

.recruitItemRight {
width: 40%;
margin: 0;
}
.recruitItemRight img {
width: 100%;
height: auto;
}

	/*---------- 福利厚生 -----------*/
	.img-txtBox{
	display: flex;
	flex-wrap: wrap;
	font-size: 100%;
	}
.img-txtBox h4{
font-size:110%;
border-bottom: 2px dotted #c86868;
	}
	.img-txtBox h4 span{
	color: #c86868;
	}
	
	.img-txtBox p.TextStyle1{
		font-size: 100%;
	}
	
	.img-txtBoxLeft{
	width: calc(50% - 0px); /* 列の幅を均等に分配し、マージンを考慮して計算 */
		margin: 0px;
		padding: 10px;
		box-sizing: border-box; /* ボックスモデルを維持するために必要なスタイル */
}
	.img-txtBoxLeft02{
width: calc(33% - 10px);
margin: 0px 10px 0 0;
padding: 10px;
box-sizing: border-box; /* ボックスモデルを維持するために必要なスタイル */
}
	.img-txtBoxLeft02 ul{
		display: flex;
	flex-wrap: wrap;
	}
.img-txtBoxLeft02 li{
display: flex;
width: calc(33% - 10px);
min-height: 60px;
border: 1px solid #c86868;
box-sizing: border-box;
border-radius: 8px;
margin:0 10px 15px 0;
padding: 8px;
font-size: 90%;
text-align: center;
background-color: #f4e1e1;
justify-content: center;
align-items: center;
}
.img-txtBoxLeft02 ul.item2 li {
width: calc(50% - 10px);
}
.img-txtBoxLeft02 ul.item1 li {
width: calc(100% - 10px);
}

	/*---------- 働きやすい職場環境の取組み -----------*/
.effortBox{
	display: flex;
	flex-wrap: wrap;
	font-size: 100%;
	}

.effortBox li{
display: flex;
flex-direction: column;
width: calc(25% - 25px);
/*height: 180px;*/
/*border: 1px solid #ddd;*/
box-sizing: border-box;
border-radius: 8px;
margin:0 25px 15px 0;
padding: 20px 10px;
font-size: 90%;
text-align: center;
background-color: #f4e1e1;
/*justify-content: center;
align-items: bottom;*/
}
.effortTtl{
display: block;
font-size:110%;
font-weight: bold;
margin-bottom: 15px;
min-height: 2.0rem;
}

.effortImg{
display: block;
margin-top: auto;
margin-bottom: 0;
}

.efforRedTxt{
font-size: 200%;
color: #CC0000;
font-weight: bold;
display: inline-block;
margin: 0 15px;
}

/*sports イベント
=========================================================================================== */
.borderBox{
padding: 25px;
border: 1px solid #ddd;
}






/*流用パーツ
=========================================================================================== */
hr.border3D15MB{
display: block;
border: 3px dotted #DDD;
margin-bottom: 25px;
}
.mb0{margin-bottom: 0px;}
.mb25{margin-bottom: 25px;}
.mr15-0{margin-right: 15px !important;}

.txtUnderber{
text-decoration-line: underline;       /* 下線を引く */
text-decoration-color: #000;            /* 下線の色 */
text-decoration-thickness: 2px;        /* 下線の太さ */
text-underline-offset: 4px;            /* 下線と文字の間隔 */
}
/*-----------------------------*/

span.NewWin a {
    background-image: url(../../../image/jp/r1/icon/icon_new_window_hd.gif) !important;
}

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

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


/*kouji 工事
=========================================================================================== */
/*--実績--*/
.constructionList li{
flex: 0 0 calc(100% / 3); 
}


/*service 保守・メンテナンス
=========================================================================================== */
.ThumbW120SetStyle .Img, .ImgW120SetStyle .imgW300 {
    width: 100% !important;
				float: none !important;
}
.BoxPatternC .ImgW120SetStyle .imgW300Set {
margin-left: 0px !important;
overflow:auto !important;
}
.BoxPatternC .ImgW120SetStyle .imgW300Set dl {
margin-left: 0px !important;
}

/*about　会社情報
=========================================================================================== */

/*アクセスアップ*/
.mapArea{
display: block;
text-align: center;
}
.mapArea iframe{
width: 100%;
margin-bottom: 10px;
border: 1px solid #CCC !important;
}
.mapArea .TextStyle1{
display: inline-block;
margin: 0 auto;
max-width: 100%;
text-align: left;
}

/*------------ 共有パーツ ------------*/
.scrollArea{
overflow-x: auto; /* 横スクロールを有効化 */
white-space: nowrap; 
}


}

/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px) {

/* service　保守・メンテナンス
=========================================================================================== */
.grayArea{
display: block;
}
}

/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px) {

/* product 取扱製品
=========================================================================================== */
dl.productList dd.iconPositon{
position: static;
}
dl.productList dd.iconPositon p{
position: static;
top: 0;
left: 0;
}

/*kouji 工事
=========================================================================================== */

.icoTtlBox dt{
float: left;
margin-right: 15px;
}
.icoTtlBox dt img{
width: 60px;
}

.icoTtlBox dd span{
font-size: 120%;
font-weight: bold;
display: inline-block;
margin-bottom: 15px;
line-height: 60px;
}
.mr15-0{margin-right: 0px !important;}

/*--実績--*/
.constructionList li{
flex: 0 0 calc(100% / 2); 
}

/* service　保守・メンテナンス
=========================================================================================== */
.accordion-content {
padding: 10px;
}

/*new-building　新社屋ページ
=========================================================================================== */
.cornerArea{
display: block;
padding: 25px;
border-radius: 8px;
margin-bottom: 25px;
}

.cornerAreaLeft {
/*float: left;*/
width: 100%;
margin: 0 2% 0 0;
}
.cornerAreaRight {
/*float: left;*/
width: 100%;
margin: 0;
}
h3.buildingTtl{
font-size:120%;
border-bottom: 3px solid #226586;
margin-bottom: 25px;
padding-bottom: 15px;
}


/*recruit 採用情報
=========================================================================================== */

.recruitItem {
display: block;
}
.recruitItemLeft {
width: 100%;
}
.recruitItemRight {
width: 100%;
}

.img-txtBoxLeft02 {
width: calc(100% - 10px);
}

.effortBox li {
width: calc(50% - 25px);
}
.effortTtl{
font-size:90%;
line-height: 140%;
letter-spacing: -0.08em;
}

/*メイン画像下のボタン設定*/
.recruitMenu{
display: block;
margin: 0 0 15px;
text-align: center;
}
.recruitMenu li a {
min-width: 240px;
font-size: 90%;
display: inline-block;
text-align: center;
border: 1px solid #CC0000;
box-sizing: border-box;
padding: 15px 20px;
margin: 0 0 15px 0;
}

}

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

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

/*kouji　工事
=========================================================================================== */
/*--実績--*/
.constructionList li{
flex: 0 0 calc(100% / 1); 
}

}