@charset "Shift_JIS";

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

Name: modify.responsive.css

Description: Sub CSS

Create: 2016.03.08
Update: 2024.05.30

Copyright 2024 Hitachi Plant Services Co.,Ltd.

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



/* for all
=========================================================================================== */
.ShowTablet,
.ShowSD2,
.ShowSD1 {
	display: none;
}


/* for 1500px -
=========================================================================================== */
@media only screen and (min-width: 1500px) {
	/* --- 採用INdex --- */
	.recruitMainImage {
		background: url("/recruit/image/recruit_2022.jpg") center center no-repeat;
		background-size: 100% auto;
	}
}


/* for 995px -
=========================================================================================== */
@media screen and (min-width: 995px) {

	/* ------ xxxx ------ */
}



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

	/* --- 枠囲み内画像リスト設定 --- */
	.BoxPatternA .Inner .ImgW120SetStyle .Img,
	.BoxPatternB .Inner .ImgW120SetStyle .Img{
		width: calc(20% - 5px);
	}
	.BoxPatternA .Inner .ImgW120SetStyle .ImgSet,
	.BoxPatternB .Inner .ImgW120SetStyle .ImgSet {
		width: 80% !important;
	}

	/* ------ カラム設定／三分割 ------ */
	.JS div.Grid4 .Column_3rd_1 {
		width: 33.3%;
		padding-left: 15px !important;
		box-sizing: border-box;
	}

	/* ------ 採用Index ------ */
	.recruitMainImage {
		background: url("/recruit/image/sp_recruit_2022.jpg") right center no-repeat;
		background-size: cover;
	}

	.recruitMainImageIn {
		padding-left: 15px;
		padding-right: 15px;
	}

	.renewRecCon {
		padding-top: 15px;
	}
	.renewRecCon .GridSet {
		margin: 0 0 0 0;
	}

	/* ------ 社長メッセージ ------ */
	.greetingsMainImage .greetingsTitle {
		top: 10%!important;
	}
	.greetingsMainImage .greetingsText {
		bottom: 15%!important;
	}

	/* ------ 改行他 ------ */
	.JS .HideTablet {
		display: none;
	}
	.JS .ShowTablet {
		display: block;
	}
	.JS br.ShowTablet,
	.JS span.ShowTablet {
		display: inline;
	}

	/* ------ Floating Contact ------ */
	.JS #Contact .GridSet {
		max-width: none;
		margin-left: 0;
	}

	.JS #Contact .Grid4 {
		padding: 0 7px;
	}

	.JS #Contact .Multi li a span {
		padding-left: 30px;
	}

	/* ------ カラム設定／Flexカラム（2024/05追加） ------ */
	.JS .ColumnSet.FlexColumnSet {
		margin-left: -15px !important;
	}
}



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

	/* --- 3Grid 枠囲み内 2カラム --- */
	.JS .Grid3 .BoxPatternA .Inner .Column2 {
		float: none;
		width: 100% !important;
		margin: 0 !important;
	}

	/* ------ カラム設定／三分割 ------ */
	.JS div.Grid4 .Column_3rd_1 {
		width: 100%;
		float: none;
	}

	/* ------ トップの事業ボタン ------ */
	.JS .topMenu li {
		width: 48.959778%; /* 230px */
		margin: 0 2.0804438% 10px 0;
	}
	.JS .topMenu li:nth-child(2n) { margin-right: 0; }
	
	/* --- 事業内容リスト --- */
	.sol2 li {
		width: 48.6431478% !important;
		margin: 0 1.3568521% 0 0 !important;
	}
	
	/* --- データテーブル／767px以下で縦並び --- */
	.ResponsiveTableStyle4 th,
	.ResponsiveTableStyle4 td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
		border-bottom: none;
	}
	.ResponsiveTableStyle4 th { font-weight: bold; }
	.ResponsiveTableStyle4 tr:last-child td { border-bottom: 1px solid #ddd; }

	/* ------ 採用Index ------ */
	.recruitMainImage {
		height: auto;
		background-size: cover;
	}

	.recruitMainImage img {
		display: block;
		width: 100%;
		height: auto;
	}

	.recruitMainImageIn {
		padding: 15% 15px;
	}

	.recruitMainImageIn h1 {
		padding-top: 0px;
		font-size: 20px;
		font-weight: bold;
		color: #ffffff;
	}
	.recruitMainImageIn h1 img {
		max-width: 65%;
	}

	.recruitMainImageIn p {
		font-size: 16px;
		color: #ffffff;
	}

	.renewRecCon .GridSet {
		padding: 10%;
	}
	.renewRecCon .Grid_2col_item {
		float: none;
		width: 100%;
		margin-left: 0;
	}
	.renewRecCon .Grid_2col_item:last-child {
		margin-top: 15px;
	}
	.renewRecCon .Grid_2col_item a {
		font-size: 14px;
		padding: 25px 40px 20px;
	}

	/* ------ 企業情報 ------ */
	.comBoxStyle01 {
		margin-bottom: 15px!important;
	}
	.sbsImage img {
		width: 100%;
		height: auto;
	}

	/* ------ HPS WAY ------ */
	.hpsTitle01 {
		margin-bottom: 15px!important;
		font-size: 20px!important;
	}
	.hpsTitle02 {
		padding: 10px!important;
		font-size: 16px!important;
	}
	.hpsImageSet .hpsImageLeft {
		float: none!important;
		width: 100%!important;
		max-width: auto!important;
		margin-bottom: 10px;
		text-align: center;
	}
	.hpsImageSet .hpsImageRight {
		float: none!important;
		width: 100%!important;
	}
	.hpsPcOnly {
		display: none;
	}
	.hpsSpOnly {
		display: block;
	}

	.JS .ShowTablet.HideRWD {
		display: none;
	}

	/* ------ カラム設定／W580pxまでカラム維持（2021/10追加） ------ */
	.JS .Grid3 .Column1.Column1Clear2,
	.JS .Grid4 .Column3 .Column1.Column1Clear2 {
		float: left;
		width: 33.33333333%;
	}

	.JS .Grid4 .Column2.Column2Clear2,
	.JS .Grid3 .Column1andHalf.Column1andHalfClear2,
	.JS .Grid4 .Column3 .Column1andHalf.Column1andHalfClear2 {
		float: left;
		width: 50%;
	}

	.JS .Grid3 .Column2.Column2Clear2,
	.JS .Grid4 .Column3 .Column2.Column2Clear2 {
		float: left;
		width: 66.66666666%;
	}

	/* ------ カラム設定／W320pxまでカラム維持（2022/01追加） ------ */
	.JS .Grid3 .Column1.Column1Clear0,
	.JS .Grid4 .Column3 .Column1.Column1Clear0 {
		float: left;
		width: 33.33333333%;
	}

	.JS .Grid4 .Column2.Column2Clear0,
	.JS .Grid3 .Column1andHalf.Column1andHalfClear0,
	.JS .Grid4 .Column3 .Column1andHalf.Column1andHalfClear0 {
		float: left;
		width: 50%;
	}

	.JS .Grid3 .Column2.Column2Clear0,
	.JS .Grid4 .Column3 .Column2.Column2Clear0 {
		float: left;
		width: 66.66666666%;
	}

	/* ------ カラム設定／Flexカラム維持（2024/05追加） ------ */
	.JS .FlexColumnSet.QRcode {
		flex-direction: row;
	}

	.JS .Grid3 .ColumnSet.FlexColumnSet {
		flex-direction: row;
	}

	/* ------ Floating Contact ------ */
	.JS #Contact .GridSet {
		background-color: transparent !important;
	}

	/* ------ 会社情報等の右ナビ（リンクのないタイトル付き） ------ */
	.JS #VerticalLocalNavi .vlNaviTitle,
	.JS #VerticalLocalNavi .vlNaviTitle + ul {
		border-bottom-style: none;
	}
}



/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px) {
	
	/* --- 枠囲み内画像リスト設定 --- */
	.BoxPatternA .Inner .ImgW120SetStyle .Img,
	.BoxPatternB .Inner .ImgW120SetStyle .Img {
		width: 100%;
	}
	.BoxPatternA .Inner .ImgW120SetStyle .CenterAdjust,
	.BoxPatternB .Inner .ImgW120SetStyle .CenterAdjust {
		margin-left: -15px;
	}
	.BoxPatternA .Inner .ImgW120SetStyle .ImgSet,
	.BoxPatternB .Inner .ImgW120SetStyle .ImgSet {
		width: 100% !important;
	}
	
	/* ------ レフアシスト横並びボックス／579px以下で縦並び ------ */
	.JS .RefItColumnSet {
		background: url(/business/datacenter/ref_assist/it/image/ref_it_005.jpg) no-repeat center center;
		margin: 0 auto !important;
		width: 100% !important;
	}
	.JS .LeftColum,
	.JS .RightColum {
		float: none !important;
		width: 100% !important;
	}
	.JS .LeftColum { padding-bottom: 30px; }

	/* ------ 社長メッセージ ------ */
	.greetingsMainImage.spVmi .greetingsTitle {
		margin-top: -105px!important;
	}

	/* ------ 改行他 ------ */
	.JS .HideSD2 {
		display: none;
	}
	.JS .ShowSD2 {
		display: block;
	}
	.JS br.SD2,
	.JS span.SD2 {
		display: inline;
	}

	/* ------ カラム設定／W580pxまでカラム維持（2021/10追加） ------ */
	.JS .Grid4 .Column2.Column2Clear2,
	.JS .Grid3 .Column1.Column1Clear2,
	.JS .Grid4 .Column3 .Column1.Column1Clear2,
	.JS .Grid3 .Column2.Column2Clear2,
	.JS .Grid4 .Column3 .Column2.Column2Clear2,
	.JS .Grid3 .Column1andHalf.Column1andHalfClear2,
	.JS .Grid4 .Column3 .Column1andHalf.Column1andHalfClear2 {
		float: none;
		width: auto;
	}

	/* --- 枠囲み内カラム設定（2021/10追加） --- */
	.JS .BoxPatternB.BoxB01 .Column1andHalf.FirstItem .Box01TitleInner {
		margin-right: 15px;
	}
	.JS .BoxPatternB.BoxB01 .Column1andHalf.LastItem .Box01TitleInner {
		margin-left: 15px;
	}

	.JS .BoxPatternB.BoxB01 .Column1andHalf.FirstItem p,
	.JS .BoxPatternB.BoxB01 .Column1andHalf.FirstItem ul,
	.JS .BoxPatternB.BoxB01 .Column1andHalf.FirstItem dl {
		padding-right: 15px;
	}
	.JS .BoxPatternB.BoxB01 .Column1andHalf.LastItem p,
	.JS .BoxPatternB.BoxB01 .Column1andHalf.LastItem ul,
	.JS .BoxPatternB.BoxB01 .Column1andHalf.LastItem dl {
		padding-left: 15px;
	}

	/* ------ Floating Banner ------ */
	.JS #PickUp {
		top: 400px;
	}

	/* ------ Floating Contact ------ */
	.JS #Contact .Grid4 {
		text-align: center;
	}

	.JS #Contact ul {
		display: inline-flex;
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}

	.JS #Contact ul li {
		margin-left: 0;
		margin-top: 7px;
	}
	.JS #Contact ul li:first-child {
		margin-top: 0;
	}

	.JS #Contact li a {
		width: 100%;
		justify-content: flex-start;
	}

	.JS #Contact li a span {
		padding-left: 30px;
	}

	/* ------ カラム設定／Flexカラム（2024/05追加） ------ */
	.JS .Grid3 .ColumnSet.FlexColumnSet {
		flex-direction: column;
	}

	/* --- 20240530 ニュースリリース（Nakanoshima Qross）対応--- */
	.JS .DateListStyle2.Address dd {
		margin-left: 0;
		margin-bottom: 15px;
	}
}



/* for - 399px
=========================================================================================== */
@media screen and (max-width: 399px) {
	
	/* ------ トップの事業ボタン ------ */
	.JS .topMenu li {
		float: none;
		width: 100%;
		margin: 0 0 10px 0;
	}

	/* --- 事業内容リスト --- */
	.sol2 li {
		width: 100% !important;
		margin: 0 !important;
	}

	/* ------ 改行他 ------ */
	.JS .HideSD1 {
		display: none;
	}
	.JS .ShowSD1 {
		display: block;
	}
	.JS br.SD1,
	.JS span.SD1 {
		display: inline;
	}

	/* --- 枠囲み設定（2021/10追加） --- */
	.JS .BoxPatternB.BoxB01 .TextStyle1.CenterAdjust {
		padding-left: 5px;
		padding-right: 5px;
	}

	/* ------ Floating Banner ------ */
	.JS #PickUp {
		top: 350px;
	}

	/* ------ Floating Contact ------ */
	.JS #Contact li a {
		padding-left: 8px;
		padding-right: 8px;
	}
}