@charset "utf-8";

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

Name: hsif2025.css

Create: 2025.9.26
update: 

Copyright 2025 Hitachi, Ltd.

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

#area_content {
    min-width: 0;
}

.ContentsWidth{
	max-width:1275px;
	margin:0 auto;
	padding:0 16px;
}

p.TextStyle1, ul.ListStyle1, ul.LinkListStyle1 {
    font-size: 115%;
    margin-bottom: 15px;
}
p.TextStyle1 img {
    margin-bottom: 10px;
}
@media screen and (min-width: 995px) and (max-width: 1304px) {
	.OptionWideRWD #Contents {
		min-width: 290px;
		padding-right: 0;
		padding-left: 0;
	}
}

@media screen and (max-width: 994px) {
	.JS #Contents {
		min-width: 290px;
		padding-right: 0;
		padding-left: 0;
	}
    .JS #area_content {
        max-width: none;
    }
}

.GridSet {
	width: 100%;
}
@media screen and (min-width: 995px) and (max-width: 1304px) {
	.OptionWideRWD .GridSet {
		width: auto;
		max-width: 1329px;
		margin: 0 0 0 -25px;
		}
}
@media screen and (max-width: 994px) {
	.JS .GridSet {
		width: auto;
		max-width: 1009px;
		margin: 0 0 0 -15px;
	}
}


div.PageTitleStyle1, div.CacthCopy, div.Section {box-sizing: border-box;} /*--box-sizing--*/

.Section {
	padding: 0 15px 50px;
	max-width: 1275px;
	margin: 0 auto;
}

.ImgCap{
	max-width:480px;
}

span.U767show{
	display:none;
}
@media screen and (max-width: 767px) {
	span.U767show{
		display:inline;
	}
}

/*---------------------------全文ページのブランディング部分のスタイル-----------------------------------*/

div.TitleArea {margin-bottom: 30px;}

.TitleArea{
	position:relative;
}

.TitleArea:before{
	content:'';
	position:absolute;
	top:0;
	width:100%;
	height:45%;
	background-color:#7F7F7F;
}

.TitleArea:after{
	content:'';
	position:absolute;
	bottom:0;
	width:100%;
	height:45%;
	background-color:#7F7F7F;
}

.PageTitleStyle1{
	position:relative;
	z-index:1;
	width:80% !important;
	height:auto;
	margin:0 auto;
	padding:30px;
	background-image:url(/products/it/harmonious/cloud/articles/harc/hsif2025/image/branding.jpg);
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

.PageTitleStyle1 h1{
	font-size: 2.4em;
	color:#fff;
	line-height:110%;
}

.PageTitleStyle1 h1 span.mainTitle{
	font-size: 80% !important;
	display: inline-block;
	line-height: 140%;
}

.PageTitleStyle1 h1 span.subTitle{
	font-size: 50% !important;
	display: inline-block;
	margin-top: 15px;
	line-height: 140%;
}

@media screen and (max-width: 767px) {
	.JS .PageTitleStyle1{
		margin:0 auto;
		padding:20px;
	}

	.PageTitleStyle1 h1 {
		width: 100%;
	}
    
    .PageTitleStyle1 h1 span.mainTitle{
        font-size: 120% !important;
    }

    .PageTitleStyle1 h1 span.subTitle{
        font-size: 90% !important;
    }
}

@media screen and (max-width: 579px) {
	.ContentsWidth:has(.PageTitleStyle1){
		padding:0;
	}
	.PageTitleStyle1{
		width:100% !important;
	}
}

/*---------------------------h2のスタイル-----------------------------------*/

.Section h2 {
	border-bottom: solid 1px #ccc;
	background : none !important;
	text-align: left;
	padding-bottom : 5px !important;
	font-size: 140%;
	font-weight: bold;
	line-height: 1.4em;
	display: flex;
}

.Section h2::before {
	content: ' ';
	border-left :solid 8px #333;
	padding-right : 10px;
}


/*---------------------------入口ページの「続きを読む」のスタイル-----------------------------------*/
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box .AnnotationsStyle2 {
    display: inline-block;
}
.cp_box a {
	position: absolute;
    display: block;
	z-index: 1;
	bottom: 0;
	width: calc(100% - 30px);
	height: 200px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 60%);
}
.cp_box a:after {
	line-height: 3rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	width: 300px;
	content: '続きを読む';
	transform: translate(-50%, 0);
	color: #ffffff;
	border-radius: 10px;
	background-color: #156082;
    font-size: 125%;
    font-weight: bold;
}
.cp_box a:hover:after {
	background-color:#0F6EA9;
}

@media screen and (max-width: 399px) {
    .cp_box a:after {
        width: 260px;
    }    
}


/*---------------------------flexBox-----------------------------------*/
.flexBox {
    display: flex;
    justify-content: space-between;
}
.flexBox.col3 > * {
    width: calc( (100% - 30px)/3);
}
.flexBox.col3 > * > img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    
    .flexBox {
        flex-direction: column;
    }
    .flexBox.col3 > * {
        width: 100%;
    }
}

.ImgRightAdjust,
.ImgLeftAdjust {
    max-width: 480px;
    width: 40%;
}
.ImgRightAdjust > p,
.ImgLeftAdjust > p {
    font-size: 95%;
}
.ImgRightAdjust > p > img,
.ImgLeftAdjust > p > img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 994px) {
    .JS #Contents .ImgRightAdjust > p > img,
    .JS #Contents .ImgLeftAdjust > p > img {
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    
    .ImgRightAdjust,
    .ImgLeftAdjust {
        max-width: none;
        width: 100%;
    }
    .ImgRightAdjust > p,
    .ImgLeftAdjust > p {
        text-align: center;
    }
    
}

/*---------------------------graficBOX-----------------------------------*/
.graficBOX{
	max-width:1275px;
	margin:0 auto;
}

.BoxHeader p{
	padding:20px;
	font-weight:bold;
}

.BoxHeader{
	background-image:url(/products/it/harmonious/cloud/articles/harc/hsif2025/image/branding.jpg);
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow:hidden;
}

.BoxHeader p{
	font-size:160%;
	color:#fff;
	text-align:center;
}

.BoxContent{
	background-color:#e5e5e5;
	padding:20px;
	text-align:center;
}

.BoxContent p.ButtonStyle1.principalBT a{
	margin-bottom:0;
	background:linear-gradient(to top, #B1000E 0%, #E60027 100%);
}

.BoxContent p.ButtonStyle1.principalBT a:hover{
	color: #CC0022;
	font-weight: bold;
	text-decoration: none;
	background:none;
	background-color: #fff;
}

/*---------------------------関連リンク-----------------------------------*/
.content_list {
    margin-top: 50px!important;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 56px 29px;
}
.content_list_item * {
    box-sizing: border-box;
}
.content_list_item a {
    color: #000;
    text-decoration: none;
    transition: .3s;
}
.content_list_item a:hover figure > img {
    scale: 1.15;
}
.content_list_item a:hover {
    opacity: .7;
}
.content_list_item_img {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px;
}
.content_list_item_img > img {
    transition: .3s;
    width: 100%;
    height: auto;
}
.content_list_item_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 13px;
}
.content_list_item_genre {
    display: inline-block;
    background: #1eb9b9;
    padding:4px 24px 6px;
    line-height: 1;
    font-weight: 500;
}
.content_list_item_ttl {
    margin: 0 0 13px;
}
.content_list_item_dtl > span {
    font-size: .75rem;
}

@media screen and (max-width: 767px) {
    .content_list {
        grid-template-columns: 1fr;
        font-size: .875rem;
        gap: 40px;
    }   
}