@charset "utf-8";


#contents_chara sup{
	font-size: 12px;
}
#contents_chara img{
	height: auto;
}
/* ------------------------------------------

raeding

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


.reading p {
	font-size: 1.4rem;
	line-height: 1.6;
}
.reading * + p {
	margin-top: 1em;
}
.reading .footnote {
	font-size: 1.1rem;
}

.reading .txt_box_w{
	padding:1rem 1.5rem;
	background: #fff;
}
#contents_chara h2,
#contents_chara h3,
#contents_chara h4{
	font-weight:normal;
}


.reading .catch{
	position: relative;
	margin-top: 3rem;
}
.reading .catch::before {
	position: absolute;
	top: -2rem;
	left: 0;
	background: #f2f2f2;
	border-radius: 0.4rem;
	content: "\8A8D\5B9A\6E08\307F";
	color:#767676;
	font-size: 1.1rem;
	text-align: center;
	padding: .2rem .5rem;
	width: 35%;
}
.reading .catch.non::before {
	position: absolute;
	top: -2rem;
	left: 0;
	background: #fff;
	border-radius: 0.4rem;
	content: "";
	color:#767676;
	font-size: 1.1rem;
	text-align: center;
	padding: .2rem .5rem;
	width: 35%;
}

@media screen and (min-width: 1024px) {
	.reading h2,
	.reading h2.hLine > span {
		font-size: 27px;
	}
}





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

common

--------------------------------------------- */
@media screen and (min-width: 1024px) {
	.ttl_major_catergory {
		font-size: 30px;
	}
}

.sub_title {

	font-weight: normal;
}
.sub_title.small {
	font-size: 1.6rem;
}

@media screen and (min-width: 1024px) {
	.sub_title {
		font-size: 23px;
	}
	.sub_title.small {
		font-size: 20px;
	}
}

@media screen and (max-width: 1023px) {
	.oj_fit_w100{
		object-fit: cover;
		width: 100%;
	}
}

/*============================== 

emphasized_text

============================== */
.emphasized_text {
	font-size: 33px;
}
@media screen and (min-width: 768px) {
	.emphasized_text {
		font-size: 35px;
	}
}
@media screen and (min-width: 768px) {
	.emphasized_text {
		font-size: 40px;
	}
}


/*===================
 order1
======================== */
@media screen and (min-width: 768px) {
	.order1_md { order: 1 !important; }
}

@media screen and (min-width: 1024px) {
	.order1_lg { order: 1 !important; }
}


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

content_area

----------------------------------------- */
.content_area {
	padding: 4rem 1.6rem;
}
@media screen and (min-width: 1024px){
	.content_area {
	    padding: 60px 0;
	}
}


/* ==================================================
	color
================================================== */
:root {
	--color_eblue12: #0a1d4e;
	--color_eblue11: #0a2162;
	--color_eblue10: #0c2877;
	--color_eblue9: #0e3191;
	--color_eblue8: #103fb2;
	--color_eblue7: #024ad8;
	--color_eblue6: #296ef9;
	--color_eblue5: #518cff;
	--color_eblue4: #72a3ff;
	--color_eblue3: #8fbaff;
	--color_eblue2: #b2d2ff;
	--color_eblue1: #c9e0fc;
	--color_eblue0: #e4eefa;
}

.bg_ebl12 { background-color: var(--color_eblue12) !important; }
.bg_ebl11 { background-color: var(--color_eblue11) !important; }
.bg_ebl10 { background-color: var(--color_eblue10) !important; }
.bg_ebl9 { background-color: var(--color_eblue9) !important; }
.bg_ebl8 { background-color: var(--color_eblue8) !important; }
.bg_ebl7 { background-color: var(--color_eblue7) !important; }
.bg_ebl6 { background-color: var(--color_eblue6) !important; }
.bg_ebl5 { background-color: var(--color_eblue5) !important; }
.bg_ebl4 { background-color: var(--color_eblue4) !important; }
.bg_ebl3 { background-color: var(--color_eblue3) !important; }
.bg_ebl2 { background-color: var(--color_eblue2) !important; }
.bg_ebl1 { background-color: var(--color_eblue1) !important; }
.bg_ebl0 { background-color: var(--color_eblue0) !important; }


/* ==================================================
	data
================================================== */

.data {
	padding: 1.6rem;
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
	line-height: 2;
	background: #5a5a5a;
}
.data a {
	color: #fff;
	text-decoration: underline;
}

@media screen and (min-width: 768px) {
	.data {
		padding: 25px;
	}
}

@media screen and (min-width: 1024px) {
	.data {
		font-size: 18px;
	}
}




/*============================== 

mv__box

============================== */
.mv__box {
	background: #000;
	/*position: relative;*/
}
.mv__box p {
	font-size: 12px;
	color: #fff;
	padding: .5rem 2rem;
	text-align: right;
}




/*----------------------------------------------- 
spec_point__list
---------------------------------------------------*/
.spec_point__list {
    display: grid;
    gap: 1rem .8em;
}
@media screen and (max-width: 479px) {
	.spec_point__list {
	    flex-flow: wrap;
	}
}

.spec_point__list > li {
	position: relative;
	padding: .8em .8em .8em 4rem;
	font-size: 130%;
	background: #fff;
	border: 1px #024ad8 dashed;
	border-radius: .8em;
	color: #024ad8;
	width: 100%;
}

.spec_point__list > li::after {
	content: "";
	display: block;
	position: absolute;
	top: 17px;
	left: 11px;
	width: 20px;
	height: 12px;
	border-left: 2px solid #024ad8;
	border-bottom: 3px solid #024ad8;
	transform: rotate(-45deg);
}


@media screen and (min-width: 768px) {
	.spec_point__list > li {
		padding: .8em 4rem;
	}
	.spec_point__list > li::after {
		content: "";
		display: block;
		position: absolute;
		top: 15px;
		left: 8px;
		width: 20px;
		height: 12px;
		border-left: 2px solid #024ad8;
		border-bottom: 3px solid #024ad8;
		transform: rotate(-45deg);
	}

	.spec_point__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.spec_content__box {
	display: grid;
	gap: 1em;
}
@media screen and (min-width: 1024px) {
	.spec_content__box {
		grid-template-columns: 400px 1fr;
		place-items: center;
	}
}

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

.spec_content__box table.style_basic th {
	background: var(--color_eblue10) ;
	color: #fff;;
	white-space: nowrap;
}
.spec_content__box table.style_basic th, 
.spec_content__box table.style_basic td {
	border: 1px #666 solid;
}


/*--------------------------------------- 
	key_spec__list
----------------------------------------- */
.key_spec__list {
	display: grid;
	gap: 1em 3rem;
	margin-top: 3rem;
	text-align: center;
}
@media screen and (min-width: 480px) {
	.key_spec__list {
		grid-template-columns: repeat(2, 1fr);
		/*align-items: center;*/
	}
}
@media screen and (min-width: 1024px) {
	.key_spec__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.key_spec__list > li {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: .5em;
	background: #fff;
	border: 1px #024ad8 solid;
	border-radius: .8em;
	padding: 2rem .8em;
	
}

.key_spec__list * + p {
	margin-top: 0;
}

.key_spec__list .emphasized_text {
	color: #024ad8;
}


.txt_explanation {
	font-size: 140%;
}
.txt_explanation > span {
	display: block;
	font-size: 80%;
	line-height: 1.2;
}

/*------------------------------------------------ 
	key_spec2__box
-------------------------------------------------- */
.key_spec2__box {
	background: #fff;
	border: 3px #b2d2ff dashed;
	border-radius: .8em;
	padding: .8em 1rem;
	margin-top: 2rem;
}

.key_spec__list2 {
	display: flex;
	flex-flow: wrap;
}

.key_spec__list2 > li {
	position: relative;
	padding: 5px 20px;
	font-size: 16px;
}

.key_spec__list2 > li::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	background: #c9e0fc;
	border-radius: 50%;
	transform: translateY(-50%);
}


/*------------------------------------------------ 
environment___box
---------------------------------------------------- */
.environment___box {
	margin-top: 3rem;
	color: #fff;
}
.environment___box > .item_box + .item_box {
	margin-top: 4rem;
	position: relative;
}

.environment___box > .item_box:nth-child(2)::after {
	content: "";
	position: absolute;
	top: -4rem;
	left: 50%;
	width: 2px;
	height: 4rem;
	background: #000;
	transform: translateX(-50%);
}


@media screen and (max-width: 438px) {
	.environment___box > .item_box:nth-child(3) {
		padding-left: 6rem;
	}
	.environment___box > .item_box:nth-child(3)::after {
		content: "";
		position: absolute;
		top: -4rem;
		left: 2rem;
		width: 2px;
		height: calc(100% - 7%);
		background: #000;
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 767px) {
	.environment___box > .item_box:nth-child(3) {
		padding-left: 6rem;
	}
	.environment___box > .item_box:nth-child(3)::after {
		content: "";
		position: absolute;
		top: -4rem;
		left: 2rem;
		width: 2px;
		height: calc(100% - 4.5%);
		background: #000;
		transform: translateX(-50%);
	}
}

/*-------------------------------------- 
	ai_tool__list
-------------------------------------------- */
.ai_tool__list {
	margin-top: 2rem;
	display: grid;
	gap: 2rem 1em;
}
@media screen and (min-width: 480px) {
	.ai_tool__list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (min-width: 768px) {
	.ai_tool__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ai_tool__list > li {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	row-gap: .8em;
	padding: 1em;
	background: #333;
	border-radius: .8em;
}
	

/*-------------------------------------------- 
	environment__lastlist
-------------------------------------------------- */
.environment__lastlist {
	display: grid;
	gap: 3rem 1em;
}
@media screen and (min-width: 768px) {
	.environment__lastlist {
		grid-template-columns: repeat(3, 1fr);
	}
}

.environment__lastlist > li {
	background: #024ad8;
	border-radius: 5px;
	padding: 2rem;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: .5em;
	position: relative;
}

@media screen and (max-width: 767px) {
	.environment__lastlist > li::after {
		content: "";
		position: absolute;
		top: 50%;
		left: -4rem;
		width: 4rem;
		height: 2px;
		background: #000;
		transform: translateY(-50%);
	}
}
@media screen and (min-width: 768px) {
	.environment__lastlist > li::after {
		content: "";
		position: absolute;
		top: -4rem;
		left: 50%;
		width: 2px;
		height: 4rem;
		background: #000;
		transform: translateX(-50%);
	}
}



/*------------------------------------ 
toolkit_runtime__area
---------------------------------------- */

.toolkit_runtime__area {
    position: relative;
}




.toolkit_runtime__box {
	display: grid;
	gap: 220px 180px;
	margin-top: 3rem;
}
@media screen and (min-width: 1024px) {
	.toolkit_runtime__box {
		grid-template-columns: repeat(2, 1fr);
	}
}

.toolkit_runtime__box > div:nth-child(1),
.toolkit_runtime__box > div:nth-child(2) {
	border-radius: .8em;
	padding: 2rem;
	word-break: break-all;
	display: grid;
	row-gap: 1em;
	z-index: 0;
}
/*
@media screen and (min-width: 1024px) {
	.toolkit_runtime__box > div:nth-child(1),
	.toolkit_runtime__box > div:nth-child(2) {
		grid-template-rows: subgrid;
		grid-row: span 3;
	}
}*/

.toolkit_runtime__box > div:nth-child(1){
	background: #fff;
	border: 3px #8fbaff solid;
}
.toolkit_runtime__box > div:nth-child(2) {
	background: #f4f4f4;
	border: 3px #666 solid;
}


/*------------------------------------------------------- ttl__box */
.toolkit_runtime__box .item_cnt .ttl__box {
	border-bottom: 1px #000 solid;
	padding-bottom: .8em;
	display: flex;
	align-items: center;
	gap: 1rem 1em;
}

/*------------------------------------------------------- txt__point */
.toolkit_runtime__box .item_cnt .txt__point {
	border-radius: .8em;
	text-align: center;
	padding: .5em;
	font-size: 120%;
	line-height: 1.2;
}
.toolkit_runtime__box > div:nth-child(1) .txt__point {
	background: #c9e0fc;
}
.toolkit_runtime__box > div:nth-child(2) .txt__point {
	background: #ccc;
}



/*----------------------------------------------  circle_icon__area */
.circle_icon__area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.circle_icon__area::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: calc(100% * 1.3);
        background: #024ad8;
        transform: translate(-50%, -50%);
        z-index: -1;
}
@media screen and (min-width: 1024px) {
	.circle_icon__area::after {
			top: 41%;
	        width: calc(100% * 1.3);
	        height: 2px;
	}
}


.circle_icon {
	background: #024ad8;
	border-radius: 50%;
	color: #fff;
	font-size: 19px;
	line-height: 1.0;
	letter-spacing: -.3rem;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 140px;
	height: 120px;

}
.circle_icon span {
	font-size: 2.4rem;
	margin-right: -.5rem;
	line-height: 1.2;
	letter-spacing: 0;
	white-space: nowrap;
}



/*--------------------------------------- 
cluster_connection__area
----------------------------------------- */
.cluster_connection__area {
	border: 1px #333 solid;
	border-radius: 1rem;
	padding: 2rem 1.6rem;
	margin: 3rem 0;
}
@media screen and (min-width: 1024px) {
	.cluster_connection__area {
		padding: 20px;
		margin: 40px 0;
	}
}


.cluster_connection__box {
	display: grid;
	gap: 2rem .5rem;
	margin-top: 3rem;
}
@media screen and (min-width: 1024px) {
	.cluster_connection__box {
		grid-template-columns: 1fr 600px;
	}
}


/*------------------------------------------------ 
scaleout__list
---------------------------------------------- */
.scaleout__list > li {
	position: relative;
	padding: .5em .5em 0 3rem;
	font-size: 110%;
	color: #024ad8;
	width: 100%;
}

.scaleout__list > li::after {
	content: "";
	display: block;
	position: absolute;
	top: 15px;
	left: 9px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}
.scaleout__list > li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 4px;
	width: 20px;
	height: 20px;
	line-height: 16px;
	background: #024ad8;
	border-radius: 50%;
}

/*------------------------------------ 
rack_scaleout__box
---------------------------------------- */

.rack_scaleout__box {
	display: grid;
	gap: 1em;
}
#contents_chara .rack_scaleout__box .img__box img{
	border-radius: .8em;
	object-fit: cover;
	height: 100%;
}

@media screen and (min-width: 1024px) {
	.rack_scaleout__box {
		/*grid-template-columns: 400px 1fr;*/
		grid-template-columns: 570px 1fr;
	}
	/*
	#contents_chara .rack_scaleout__box .img__box {
		height: 160px;
	}*/
}