/* ==================================================
Margin adjustment
================================================== */
.m_adjt *+p,
.m_adjt *+a{
	margin-top: 1em;
}

@media screen and (min-width: 1024px) {
	.m_adjt *+p{
		margin-top: 20px;
	}
}

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

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

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

=================================== */
#main_content h2,
#main_content h3,
#main_content h4,
#main_content h5,
#main_content h6 {
	font-weight: normal;
}

.h2 { font-size: 24px; line-height: 26px; }
.h3 { font-size: 22px; line-height: 26px; }
.h4 { font-size: 20px; line-height: 24px; }
.h5 { font-size: 18px; line-height: 26px; }
.h6 { font-size: 16px; line-height: 24px; }

@media screen and (min-width: 768px) {
	.h2 { font-size: 32px; line-height: 36px; }
	.h3 { font-size: 26px; line-height: 30px; }
	.h4 { font-size: 20px; line-height: 26px; }
}

@media screen and (min-width: 1024px) {
	.h2 { font-size: 34px; line-height: 40px; }
	.h3 { font-size: 28px; line-height: 34px; }
	.h4 { font-size: 22px; line-height: 28px; }
	.h5 { font-size: 20px; line-height: 28px; }
}

@media screen and (min-width: 1920px) {
	.h2 { font-size: 38px; line-height: 42px; }
	.h3 { font-size: 30px; line-height: 36px; }
	.h4 { font-size: 24px; line-height: 32px; }
}

.bg_bl{
	background: #f2ebdc;
}

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

	PIM

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

.cam_model{
	padding: 0 .5rem .5rem;
	/*background:#007dba;*/
	/*border:.1rem#0096d6dotted;*/
	margin:2rem 0 6rem;
	position: relative;
}
.cam_model::after, .cam_model::before{
	content: "";
	position: absolute;
	top: -20px;
	border-bottom: solid 20px #000;
}
.cam_model::before {
    left: 0;
    border-left: solid 25px transparent;
}
.cam_model::after {
    right: 0;
    border-right: solid 25px transparent;
}


#firefly14_area{
	background: #000;
}
#firefly16_area{
	background: #333;
}
#power15_area{
	background: #000;
}





@media screen and (min-width:768px){
	.cam_model{
		padding:0 0 .5rem;
	}
}


@mediascreenand(max-width:1023px){
	.cam_model .hpj-pim:nth-child(n+2){
		margin-top:2rem;
	}

}


@media screen and (min-width:1024px){
	.cam_model > .aem-Grid{
		margin:0 5px;
	}
	.cam_model .hpj-pim{
		padding:0;
	}
	/*column1--------------------*/
	.column1 .hpj-pim:nth-child(n+2){
		margin-top:2rem;
	}
	/*column2*/
	.column2 .hpj-pim{
		width:50%!important;
	}
	.column2 .hpj-pim:nth-child(n+3){
		margin-top:2rem;
	}
	/*column3*/
	.column3 .hpj-pim{
		width:33.33333%!important;
	}
	.column3 .hpj-pim:nth-child(n+4){
		margin-top:2rem;
	}
}

/*----------------------------------------------------------------- h3.pro_ttl */
.cam_model .h3.pro_ttl{
	color: #fff;
	border-bottom: 3px #ccc dashed;
	padding-bottom: 5px;
}
@media screen and (min-width:768px){
	.cam_model .h3.pro_ttl{
		text-align: center;
	}
}

/*------------------------------------------------------------ model_box*/

.model_box{
	padding:0 0 .5rem;
	text-align:center;
	background:#000;
	/*border-top: 2px #f2ebdc dashed;*/
	position: relative;
	margin-top: 1rem;
	background:#007dba;
	position: relative;
}
.model_box.souten{
	background:#0096d6;
}
.model_box.shinku{
	background:#990000;
}

.model_box > div+div{
	padding: 0;
}


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

.model_box::before, .model_box::after {
    content: "";
    position: absolute;
    top: 0;
    border-style: solid;
    border-color: transparent;
}
.model_box::before {
    left: 0;
    border-width: 0 0 15px 15px;
    border-left-color: #000;
}
.model_box::after {
    right: 0;
    border-width: 15px 0 0 15px;
    border-top-color: #000;
}

#firefly14_area .model_box::before {
    border-left-color: #000;
}
#firefly14_area .model_box::after {
    border-top-color: #000;
}

#firefly16_area .model_box::before {
    border-left-color: #333;
}
#firefly16_area .model_box::after {
    border-top-color: #333;
}

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

.model_inner{
	padding:0 1.6rem;
	border: 4px #007dba solid;
	border-top: none;
	border-bottom: 5px #007dba solid;
	border-radius: 0 0 0.8rem 0.8rem;
}

.model_box.bg_cyan .model_inner{
	padding:0 1.6rem;
	border: 4px #0096d6 solid;
	border-top: none;
	border-bottom: 10px #0096d6 solid;
	border-radius: 0 0 0.8rem 0.8rem;
}

.model_box.souten .model_inner{
	border: 4px #0096d6 solid;
	border-bottom: 5px #0096d6 solid;
}
.model_box.shinku .model_inner{
	border: 4px #990000 solid;
	border-bottom: 5px #990000 solid;
}

.model_inner > .model_r{
	padding: 1em 1rem;
	background: #fff;
}
.md_spec__box {
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
    border: 1px solid #eee;
    border-radius: 8px;
    transition: .2s;
    padding: 1rem .8em;
	border-top: 4px #000 solid;
}


@media screen and (min-width:1024px){
	.model_box{
		padding:0 0 5px;
	}
	/*column1--------------------*/
	.model_inner,
	.model_box.bg_cyan .model_inner{
		display:flex;
		justify-content:space-between;
		padding:0;
	}
	.model_inner > .model_l{
		width:calc((100% / 2) + 10px);
		background: #fff;
	}
	.model_inner > .model_r{
		width:calc((100% / 2) - 10px);
		padding: 20px 10px;
		background: #fff;
	}
	
	.md_spec__box {
	    box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
	    border: 1px solid #eee;
	    border-radius: 8px;
	    transition: .2s;
	    padding: 10px;
		border-top: 4px #000 solid;
	}
}

/*series_name--------------------*/

.series_name{

}

/*cam_model_name--------------------*/

.ttl_area.posA{
	bottom: 0;
	left: 0;
	padding: 1em 1.6rem .5rem;
}


.cam_model_name{
	/*background:#222 url(images/model_ttl_bg.jpg) right 0 / cover no-repeat;
	border-top:3px #0096d6 solid;
	border-bottom:3px #0096d6 solid;*/
	color:#fff;
	/*padding:1rem;*/
	line-height: 1.4;
}


@media screen and (min-width:480px){

	.ttl_area.posA{
		bottom: 15%;
		left: 0;
		padding: 1em 1.6rem .5rem;
	}

	.cam_model_name{
		/*text-align:center;
		padding: 1.6rem 1rem;*/
	}

}
@media screen and (min-width:480px){
	.cam_model_name{
		font-size:19px;
		line-height:1.4;
	}
}
@media screen and (min-width:768px){

	.ttl_area.posA{
		bottom: 5%;
		left: 0;
		padding: 1em 1.6rem .5rem;
	}


	.cam_model_name{
		font-size:25px;
	}
}
@media screen and (min-width:1024px){
	.cam_model_name{
		font-size:33px;
		font-weight:normal!important;
		line-height:1.4;
		/*letter-spacing:1px;
		padding:2rem 1rem;*/
	}
}
/*prod_img--------------------*/


.prod_img{
	text-align:center;
}
.prod_img img{
	width: 100%;
	height: auto;
	max-width: 100%;
}

@media screen and (min-width:1024px){
	.prod_img{
		text-align:left;
	}
	.prod_img img{
		width: 490px;
		height: 900px;
		max-width: 490px;
	}
}

/*price_area--------------------*/
.regular_price{
	margin-top:.5rem;
}

.hpj-pim.general-tax-price .regular_price_taxed{
	margin-left: .5rem;
}


.price_off{
	color:#eb5f01;
	font-size:1.4rem;
	font-weight:bold;
	line-height:1.4;
}

.price_off span{ font-size:160%; }
.price_off span:last-child{ font-size:140%; }

.price_off > span{
	display: block;
}

.price_off > span + span{
	margin-right: -5px;
}

@media screen and (min-width:480px){
	.price_off > span{
		display: inline-block;
	}
}


/*pc*/
@media screen and (min-width:1024px){
	.price_off{
		font-size:1.6rem;
	}
	.price_area .price{ font-size:16px; }
	.price_area .price span{ font-size:35px; }

}

.balloon{
	display:inline-block;
	position:relative;
	padding:.6em 1em .3em;
	background:rgba(255,204,0,.1);
	border-radius:.6rem;
	/*width:100%;*/
	text-align:center;
	margin:1rem 0 1.6rem;
	letter-spacing:.1rem;
}

.balloon::after{
	content:"";
	position:absolute;
	top:100%;
	top:auto \9;/*IE10*/
	bottom:-11px \9;/*IE10*/
	left:50%;
	transform:translateX(-50%);
	border:.6rem solid transparent;
	border-top:.6rem solid rgba(255,204,0,.1);
}


/*list_basic--------------------*/

.cam_model .list_basic{
	font-size:1.3rem;
	text-align:left;
	
}


.cam_model .list_basic > li > *{
	float:none;
}

.cam_model .list_basic .model_spec_title{
	display:none;
}

.cam_model .list_basic .model_spec_text{
	width:100%;
}

.cam_model .list_basic .icon_customize::after{
	content:none;
	background:none;
}
/*
.cam_model .list_basic .model_spec_momery .model_spec_text::after{
	display:inline;
	content:"\30E1\30E2\30EA";
}
*/


.list_basic > li.dot_non{
	padding-left:0;
	padding-top:1rem;
}
.cam_model .list_basic > li.dot_non::before{
	background:#fff;
}

/*link_area--------------------*/


.link_area > div{
	margin-top:1rem;
}



/* ==================================================
	chara_list
================================================== */
.chara_list > li{
	padding: 2rem 1rem;
	background:#f2f2f2;
	border-radius: 0.6rem;
	border:1px #ccc solid;
}
.chara_list > li p{
	font-size:1.4rem;
	color:#5a5a5a;
	text-align:left;
}

/*---------------------------------------------------
main
-------------------------------------------------------- */

.main img{
	width: 100%;
	height: auto;
}



/* ==================================================
	raeding
================================================== */
.reading p {
	font-size: 1.6rem;
	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;
}
.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: 1024px) {
	.reading h2,
	.reading h2.hLine > span {
		font-size: 27px;
	}
}

/*---------------------------
main
--------------------------------- */
.main .d_none_lg img{
	width: 100%;
	height:auto;
	max-width: 100%;
}
@media screen and (min-width:768px){
	.main .d_block_md img{
		width: 100%;
		height:auto;
		max-width: 100%;
	}
}
@media screen and (min-width:1024px){
	.main .d_block_md img{
		width: 1000px;
		height: 280px;
		max-width: 1000px;
	}
}


/* -------------------- 
icon_box
 ------------------------ */
.icon_box {
	margin: 2rem 0 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-top: 1px #999 dotted;
	padding-top: 1rem;
}
.icon_box li {
	color: #666;
	text-align: center;
}
.icon_box [class*="hpic_"]::before {
	display: block;
	line-height: 60px;
}
.icon_box p {
	font-size: 11px;
	line-height: 1.1;
}
.icon_box li:first-child {
	display: block;
	width: 100%;
	padding-bottom: 15px;
}
.icon_box li:nth-child(n+3) {
	margin-left: 20px;
}
.icon_box li.hpic_ssd,
.icon_box li.hpic_display,
.icon_box li.hpic_touchscreen,
.icon_box li.hpic_full_hd{
	font-size: 35px!important;
}
.icon_box li.hpic_display .text {
    font-size: 14px;
    line-height: 55px;
}

/*------------------------------------------------- 
cpu_gra_box_area
-------------------------------------------------- */
.cpu_gra_box_area {
	background: #fff;
	border-radius: 0.8rem;
	padding: 1em;
}
.bo_light_bl { border: 3px rgba(0,150,214,0.3) solid; }

.cpu_gra_box{
	margin-top: 2rem;
}
@media screen and (min-width:480px){
	.cpu_gra_box{
		display: flex;
		justify-content: space-between;
	}
	.cpu_gra_box_area > .cpu_gra_box + .cpu_gra_box{
		padding-top: 1em;
		border-top: 2px #000 solid;
	}
	.cpu_gra_box .logo_box{
		width: 25%;
		white-space: nowrap;
	}
	.cpu_gra_box .text_box{
		width: 75%;
		padding-left: 1rem;
	}
}



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


.products_area > div + div{
	margin-top: 3rem;
}
@media screen and (min-width: 768px) {
	.products_area{
		display: flex;
		justify-content: center; 
		flex-flow: wrap;
		margin: 0 -10px;
	}
	.products_area > div{
		margin: 0 10px;
		width: calc((100% - 40px) / 2);
	}
	.products_area > div + div{
		margin-top: 0;
	}
}
@media screen and (min-width: 1024px) {
	.products_area > div{
		width: calc((100% - 60px) / 3);
	}
}

.products_area .ttl_h3{
	margin-top: 1em;
	background: #000;
	color: #fff;
	font-weight: normal;;
	text-align: center;
	padding: .5rem 1rem;
}

/* icon -------------------- */

.specs_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	color: #0096d6;
	margin: 10px -4px;
}
.specs_list > li{
	padding: 2px 7px;
	background: rgba(0,150,214,0.07);
	border-radius: 3px;
	margin: 2px;
}





/*--------------------------------------------- */
.txt_area_box{
	border: 1px #000 solid;
	background: #fff;
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

.callcenter_box{
	margin: 1rem 0;
	padding: 0.5rem;
	background: rgba(255,204,0,.1);
	border-radius: 1rem;
	text-align: center;
	color: #d7410b;
}
.callcenter_box span{
	display: inline-block;
	margin-left: 5px;
	font-size: 160%;
}

.link_arrow_box{
	margin-top: auto;
	text-align: center;
}



/*---------------------------------------------------- 
pro_use_photo_box 
----------------------------------------------------  */
.pro_use_photo_box{
	margin-top: 2rem;
}
.pro_use_photo_box > div + div{
	margin-top: 2rem;
}

@media screen and (max-width: 1023px) {
	.pro_use_photo_box img{
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

}
@media screen and (min-width: 768px) {
	.pro_use_photo_box > div + div{
		margin-top: 0;
	}
}
@media screen and (min-width: 1024px) {
	.pro_use_photo_box img{
		max-width: 480px;
	}
}

/*----------------------------------------- 
spec_icon_area 
-----------------------------------------  */
.spec_icon_area > li img{
	width: 80px;
	height: 80px;
	max-width: 80px;
}
.spec_icon_area h3 {
	position: relative;
	padding-bottom: 10px;
	text-align: center;
	color: #0096d6;
}
.spec_icon_area h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: 4px;
	background: rgba(0,150,214,0.5);
}

.spec_icon_area .sub_title + p{
	margin-top: 1rem;
}


/*-------------------------------------------------- sub_title */
.sub_title {
	font-weight: normal;
	border-bottom: 1px #666 dotted;
	line-height: 1.3!important:
}
.sub_title.small {
	font-size: 1.6rem;
}
@media screen and (min-width: 1024px) {
	.sub_title {
		font-size: 18px;
	}
}



/*----------------------------------------
intel_point
---------------------------------------- */
.intel_point > li + li{
	margin-top: 1em;
}
.intel_point > li h5{
	font-weight: normal;
	background: #f2f2f2;
}
.intel_point > li .list_basic{
	margin-top: 1rem;
}

/*----------------------------------------
isv_area
---------------------------------------- */
.isv_area .posA_md{
	padding: 2rem 1.6rem;
}
.isv_area .posA_md p{
	margin-top: 1rem;
	color: #fff;
}


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




/*===================
sound_area
======================== */
.sound_area .col1.space > *:nth-of-type(n+2){
	margin-top: 4rem;
}
.sound_area .sub_title{
	margin-top: 1rem;
	border-bottom: 1px #999 dotted;
}
.sound_ic > li {
	background: #e7e7e7;
	border-radius: 0.5rem;
	padding: 1rem;
}

@media screen and (min-width: 768px) {
	.sound_area .col1.space > *:nth-of-type(n+2){
		margin-top: 0;
	}
}


/*===================
#power15
======================== */
#power15_area .sound_area .col1.space > *:nth-of-type(n+2){
	margin-top: 4rem;
}
#power15_area .sound_area .sub_title{
	margin-top: 1rem;
	border-bottom: 1px #999 dotted;
}
#power15_area .sound_ic > li {
	background: #e7e7e7;
	border-radius: 0.5rem;
	padding: 1rem;
}

@media screen and (min-width: 768px) {
	#power15_area .sound_area .col1.space > *:nth-of-type(n+2){
		margin-top: 0;
	}
}



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

protection_area

-------------------------------------------------- */
.protection_area{
	background: url(/content/dam/jp-ext-hp-com/jp/ja/ec/workstations/images/bg_light.webp) repeat 0 0 / cover;
	padding: 2rem 1.6rem;
	margin-bottom: 4rem;
	text-align: center;
}
.protection_box > li{
	background: #fff;
	border: 1px #000 solid;
	border-radius: .3rem;
	padding: 2rem 1em;
	display: flex;
	flex-direction: column;
}
.protection_box > li h4{
	margin: 1em 0 1rem;
	padding-bottom: .5rem;
	border-bottom : 1px #000 dotted;
}
.protection_box > li p{
	text-align: left;
	margin-bottom: 1em;
}
.protection_box > li .btn_link_area{
	margin-top: auto;
}
@media screen and (min-width:768px){
	.protection_area{
		padding: 40px 20px;
	}
}