@charset "utf-8";

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

Name: common.css

Description: common

Create: 2026.10.02
Update: 

Copyright 2026 Hitachi, Ltd.


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

img {
  image-rendering: auto;
}

/*====================*/
/*AEM対応 color
/*====================*/
:root{
	--color-red1: #fa000f;
	--color-red2: #cc0000;
	--color-white: #fff;
	--color-gray1: #f4f4f4;
	--color-gray2: #d9d9d9;
	--color-gray3: #b3b3b3;
	--color-gray4: #737373;
	--color-gray5: #4d4d4d;
	--color-gray6: #222222;
	--color-black: #0c0c0c;
}

a {
	color: var(--color-black);
}

/*====================*/
/*AEM対応 文字サイズ、フォント幅
/*====================*/
.AemTextBannerHeading{
	font-size: 56px;
	line-height: 70px;
	font-weight: 600;
}

.AemTextH1{
	font-size: 40px;
	line-height: 50px;
	font-weight: 600;
}

.AemTextH2{
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
}

h2.AemTextH2{
	background: none;
}

.AemTextH3{
	font-size: 28px;
	line-height: 35px;
	font-weight: 600;
}

.AemTextTitle{
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
}

.AemTextSubTitle{
	font-size: 18px;
	line-height: 27px;
	font-weight: 600;
}

.AemTextNormal{
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
}

.AemTextS{
	font-size: 14px;
	line-height: 21px;
	font-weight: normal;
}

.AemTextL{
	font-size: 24px;
	line-height: 36px;
	font-weight: normal;
}

.AemTextXL{
	font-size: 32px;
	line-height: 40px;
	font-weight: normal;
}

.AemText2XL{
	font-size: 48px;
	line-height: 60px;
	font-weight: normal;
}

.AemTextWightM{
	font-weight: 500;
}

.AemTextWightSB{
	font-weight: 600;
}

@media (max-width:994px) {
	.AemTextBannerHeading{
		font-size: 48px;
		line-height: 60px;
	}

	.AemTextH1{
		font-size: 32px;
		line-height: 40px;
	}

	.AemTextH2{
		font-size: 28px;
		line-height: 35px;
	}

	.AemTextH3{
		font-size: 26px;
		line-height: 33px;
	}

	.AemTextL{
		font-size: 22px;
		line-height: 33px;
	}

	.AemTextXL{
		font-size: 28px;
		line-height: 35px;
	}

	.AemText2XL{
		font-size: 40px;
		line-height: 50px;
	}
}

/*====================*/
/*AEM対応 Button
/*====================*/
.AemButtonBox{
	text-align: right;

	.AemButton {
		display: inline-flex;
		align-items: center;   /* 文字と矢印を縦中央揃え */
		gap: 6px;
		color: var(--color-black);
		text-decoration: none;
		text-underline-offset: 2px;
		text-decoration-thickness: 1px;
	}
	.Label{
		text-decoration: underline;
	}

	.AemButton .Arrow {
		display: inline-block;
		width: 16px;
		height: 16px;
		background-image: url("/products/it/CloudDX/modernization/specialists/image/arrow_bk.svg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	.AemButton:hover {
		color: var(--color-red2);
	}
	.AemButton:hover .Arrow {
		background-image: url("/products/it/CloudDX/modernization/specialists/image/arrow_red.svg");
	}
}

/*====================*/
/*AEM対応 ボタンセカンダリー
/*====================*/
.AemBtnSecondBox{
	text-align: center;

	.AemBtnSecond {
		display: inline-flex;
		margin-inline: auto;
		align-items: center;
		gap: 6px;
		padding: 12px 20px;
		border: 2px solid var(--color-red2);
		border-radius: 100vmax;
		color: var(--color-red2);
		text-decoration: none;
		justify-content: center;
		min-width: 200px;
		line-height: 1;
		margin-top: 32px;
	}

	.AemBtnSecond:link,
	.AemBtnSecond:visited{
		text-decoration: none;
		color: var(--color-red2);
		font-weight: bold;
		font-size: 1rem;
	}

	.AemBtnSecond .Arrow {
		width: 16px;
		height: 16px;
		display: block;
		content: url("/products/it/CloudDX/modernization/specialists/image/arrow_red.svg");
	}

	.AemBtnSecond:hover,
	.AemBtnSecond:active{
		border: 2px solid var(--color-black);
		color: var(--color-black);
	}

	.AemBtnSecond:hover .Arrow {
		width: 16px;
		height: 16px;
		display: block;
		content: url("/products/it/CloudDX/modernization/specialists/image/arrow_bk.svg");
	}
}