/* ==================================================
	raeding
================================================== */
.reading p {
	font-size: 1.4rem;
	line-height: 1.6;
}
.reading * + p {
	margin-top: 1rem;
}
.reading .footnote {
	font-size: 1.1rem;
}
.reading .txt_box_w{
	padding:1rem 1.5rem;
	background: #fff;
}
.reading h2{
	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: 480px) {
	.reading h2{
		text-align: center;
	}
}

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

/* ==================================================
	common
================================================== */

.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;
	}
}

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

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

/*===================
img
======================== */

#contents_chara img{
	height: auto;
}

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

main

------------------------------------------- */
.main_product .ttl_box{
	padding: 2rem 1.6rem;
	/*border-bottom: 1px #999 dotted;*/
}
.main_product .ttl_box h2 {
	position: relative;
	padding-bottom: 10px;
	text-align: center;
}
.main_product .ttl_box h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: 4px;
	background: #ccc;
}
@media screen and (min-width: 480px) {
	.main_product .ttl_box{
		text-align: center;
	}
}
@media screen and (min-width: 768px) {
	.main_product .ttl_box{
		text-align: center;
		padding: 30px 20px;
	}
}

.main_product video {
    outline: 1px #000 solid;
    outline-offset: -1px;
}


.mv__box {
    outline: 1px #000 solid;
    outline-offset: -1px;
}

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


.workstyle_list > li {
	background: #000;
	color: #fff;
	position: relative;
	text-align: center;
}
.workstyle_list > li .ttl{
	position: absolute;
	top: 0;
	padding: 2rem;
	width: 100%;
	font-size: 1.8rem;
}
.workstyle_list > li .ttl span{
	font-size: 3.5rem;
	display: block;
	line-height: 1.2;
}
.workstyle_list > li .txt_box{
	position: absolute;
	bottom: 0;
	padding: 2rem;
	width: 100%;
}



/*----------------------------------------------------- design_style */

.design_style {
	display: grid;
	gap: 20px;

}
@media screen and (min-width: 768px) {
	.design_style {
		grid-template-columns: repeat(2, 1fr);
	}
}

.design_style > div {
	background: #fff;
	outline: 1px #000 solid;
	outline-offset: -1px;
}
.design_style .txt_box {
	padding:2rem 1.6rem;
}
.design_style .txt_box h4{
	border-bottom: 1px #000 solid;
	padding-bottom: 5px;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	#contents_chara .design_style > div.img__box img{
		height: 100%;
	    object-fit: cover;
	}
}
/*----------------------------------------------------- icon_text_box */
.icon_text_box {
	margin-top: 2rem;
}
.icon_text_box > li {
	display: flex;
	margin-top: 1rem;
}
.icon_text_box > li > div:nth-child(1) {
	min-width: 60px;
}
.icon_text_box > li img{
	max-height: 60px;
}
.icon_text_box > li > div:nth-child(2) {
	padding: 0 1rem;
}
@media screen and (min-width: 768px) {
	.icon_text_box > li {
		align-items: center;
	}
}


/*----------------------------------------------------- collaboration_area */

.collaboration_area .img_box{
	text-align: center;
}
.poly_camera_box02 {
	margin-top: 3rem;
}
.poly_camera_box02 > div {
	outline: 1px #000 solid;
	outline-offset: -1px;
}
.poly_camera_box02 .txt_box {
	padding: 2rem 1em;
}


/*------------------------------------------------- 
	features_point
----------------------------------------------------- */
.features_point > li h2{
	text-align: left;
}
.features_point > li h2 + p{
	margin-top: .5em;
}
.features_point > li + li{
	border-top: 1px #000 dotted;
	margin-top: 1em;
	padding-top: 1em;
}
@media screen and (min-width: 1024px) {
	.features_point > li + li{
		border-top: none;
		padding-top: 0;
		margin-top: 20px;
	}
}


/*------------------------------------------------- 
	security__area
----------------------------------------------------- */

.security__area {
	margin-top: 4rem;
}
.security__box {
	background: url(images/ai_antivirus_bgimages.jpg) right 0 /cover no-repeat;
	padding: 3rem 2rem;
}
@media screen and (min-width: 768px) {
	.security__box {
		padding: 40px 30px;
	}
}

.ai_antivirus_area {
	background: #fff;
	padding: 1em;
}

.ai_antivirus_box .txt_box {
	margin-top: 1rem;
}
.ai_antivirus_box .txt_box h4 {
	font-weight: 400;
}
.ai_antivirus_box .txt_box h4 + p {
	margin-top: .5rem;
}



/*--------------------------------------------- 
	heat_dissipation_list
------------------------------------------------ */

.heat_dissipation_list {
	display: grid;
    gap: 5px;
    padding: 1rem;
}
.heat_dissipation_list > li {
	border: 1px #ccc dotted;
	padding: 1em;
}

@media screen and (min-width: 480px) {
	.heat_dissipation_list {
	    grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (min-width: 768px) {
	.heat_dissipation_list {
	    grid-template-columns: repeat(3, 1fr);
	}
}




/*------------------------------------------------- 
	portfolio__area
----------------------------------------------------- */
.portfolio__ttl {
	background: #000;
	margin-top: 2rem;
}
.portfolio__ttl .txt__box {
	color: #fff;
	padding: 2rem;
}
@media screen and (min-width: 768px) {
	.portfolio__ttl {
		position: relative;
	}
	.portfolio__ttl .txt__box {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
}



.portfolio__area .sub_ttl {
	font-size: 155%;
	font-weight: normal;
}
.portfolio__area .portfolio_box {
	margin-top: 4rem;
}
.portfolio__area .portfolio_box h4{
	font-size: 1.8rem;
	margin-top: 1em;
}

@media screen and (min-width: 480px) {
	.portfolio__area .portfolio_box {
		display: flex;
	}
	.portfolio__area .portfolio_box .img_area{
		margin-right: 1em;
	}
	.portfolio__area .portfolio_box h4{
		margin-top: 0;
	}
}

.chk {
	position: relative;
	padding-left: 20px;
}
.chk::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 8px);
	left: 50%;
	width: 12px;
	height: 8px;
	border-left: 3px solid #000;
	border-bottom: 3px solid #000;
	transform: rotate(-45deg) translate(-50%, -50%);
}


/*------------------------------------------------- 
	material__list
----------------------------------------------------- */

.material__list {
    display: grid;
    gap: 30px 10px;
    grid-template-columns: repeat(2, 1fr);
}
.material__list > li .img_box {
	text-align: center;
}
.material__list > li .img_box img {
	max-width: 80px;
}
.material__list > li .txt_box {
	padding: 5px;
}

.material__list > li .txt_box p > span {
	display: block;
	font-size: 120%;
}

@media screen and (min-width: 768px) {
	.material__list > li {
		display: flex;
		align-items: center;
		flex: 1;
	}
}

@media screen and (min-width: 1024px) {
	.material__list {
		grid-template-columns: none;
	}
}

 
/*------------------------------------------------- 
	intel_point_area
----------------------------------------------------- */
.intel_point_area {
	margin: 0 1rem 2rem;
	padding: 1rem 1.6rem 2rem;
	background: #333;
	border-radius: 0.5rem;
}
@media screen and (min-width: 768px) {
	.intel_point_area {
		margin: 2rem;
		padding: 1rem 2rem 2rem;
	}
}

/*------------------------------------------------ logo_area */
.logo_area{
	display: flex;
	justify-content: center;
}
.logo_area > li {
	margin: 1rem;
}
.cpu_gra_area .logo_area img{
	max-height: 100px;
}

/*-----------------------------------------*/
.intel_point_list img {
	max-width: 130px;
}
.intel_point_list > li {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 0.8rem;
	padding: 1rem .5rem;
}

/*---------------------------------------- 
	nvidia_point_area 
------------------------------------------ */
.nvidia_point_area {
	margin: 0 1rem;
	padding: 1rem 1.6rem 2rem;
	background: #333;
	border-radius: 0.5rem;
}
@media screen and (min-width: 768px) {
	.nvidia_point_area {
		margin: 2rem;
		padding: 1rem 2rem 2rem;
	}
}




/*----------------------------------------
isv_area
---------------------------------------- */

.isv_area .posA_md{
	padding: 2rem 1.6rem;
}
.isv_area .posA_md p{
	margin-top: 1rem;
}


@media screen and (min-width: 768px) {
	.isv_area .posA_md{
		width: 44%;
		top: 10px;
		right: 10px;
		padding: 0;
	}
	.isv_area .posA_md p{
		color: #fff;
	}
}

@media screen and (min-width: 1024px) {
	.isv_area .posA_md{
		width: 43%;
		padding: 20px;
	}
	.isv_area .posA_md p{
		color: #fff;
		margin-top: 15px;
		line-height: 2.0;
	}
}

/*----------------------------------------
security_trust_spt_box
---------------------------------------- */
.security_trust_spt_box > li{
	padding: 1em;
	border: 1px #000 solid;
}
.security_trust_spt_box > li h3{
	font-weight: 400;
}

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

spec_icon_area

---------------------------------------------- */
.spec_icon_area{
	text-align: center;
}

.spec_icon_area > div{
	background: #fff;
	border: 1px #000 solid;
	padding: 15px;
}


.spec_icon_area > div img{
	width: 80px;
	height: 80px;
	max-width: 80px;
}

.spec_icon_area > div h4 {
	font-weight: 400;
	margin-top: 1rem;
}


/*---------------------------------------------------- 
	intel_gf__box
-------------------------------------------------- */
.intel_gf__box {
	border: 1px #000 solid;
	padding: 2rem 1em;
}
.intel_gf__box > li {
	display: grid;
	gap: 30px 20px;
}
.intel_gf__box > li + li {
	border-top: 1px #000 solid;
	padding-top: 2rem;
	margin-top: 2rem;
}
@media screen and (min-width: 768px) {
	.intel_gf__box {
		padding: 30px 20px;
	}
	.intel_gf__box > li + li {
		padding-top: 30px;
		margin-top: 30px;
	}
}
@media screen and (min-width: 1024px) {
	.intel_gf__box > li {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 30px;
	}
}

/*------------------------------------------------ logo_area */
.logo_area{
	display: flex;
	justify-content: center;
}
.logo_area > li {
	margin: 1rem;
}


/*------------------------------------------ 
display_style
-------------------------------------- */
.display_style > li {
	outline: 1px #000 solid;
	outline-offset: -1px;
	padding: 2rem;
}
.display_style > li h4{
	border-bottom: 1px #000 solid;
	padding-bottom: 5px;
}