/* ==================================================
	common
================================================== */
#ink_sr_boxs .pro_price_inner p{
	white-space: nowrap;
}

/* ----------------------------------------
	title
---------------------------------------- */

h2.hLine {
	color: #767676;
	font-size: 1.8rem;
	letter-spacing: 2px;
}
h2.title {
	color: #0096d6;
	font-weight: bold;
	text-align:center;
}
h2.title > span {
	display: block;
	width: 40px;
	height: 55px;
	margin: 0 auto .3em;
	padding-top: 20px;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	background: url(images/num_bg.png) no-repeat center top;
	text-align: center;
}
.sub_title {
	font-size: 1.6rem;
	font-weight: bold;
}
.sub_title.line_b {
	padding-bottom: .3em;
	color: #767676;
	border-bottom: 3px solid #0096d6;
}
.sub_title.line_l {
	padding-left: .5em;
	color: #0096d6;
	border-left: 3px solid #0096d6;
}
h2.title + p {
	margin-top: 1em;
}
.sub_title + p {
	margin-top: .8em;
}
.sub_title.line_b + p {
	margin-top: 20px;
}
@media screen and (min-width: 768px) {
	h2.title {
		text-align: center;
	}
}
@media screen and (min-width: 1024px) {
	h2.hLine {
		font-size: 20px;
	}
	h2.title > span {
		display: inline-block;
		margin: 0 20px 0 0;
	}
	.sub_title {
		font-size: 18px;
	}
}


/*================================================= 
top area
===================================================== */
.product_detail_buy_content{
	margin-top: 2rem;
}



/* ==================================================
	contents_chara
================================================== */
.contents_chara img{
	width: auto;
	height: auto;
}

.contents_chara {
	margin-top: 3rem;
	color: #767676;
}
.contents_chara p + p {
	margin-top: 1em;
}

@media screen and (min-width: 1024px) {
	.contents_chara {
		margin-top: 50px;
	}
}

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

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


/*========================= 
inside_plus
=========================== */
.inside_plus {
	position: absolute;
	width: 36px;
	height: 36px;
	color: #000;
	text-align: center;
	line-height: 36px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0px 0px 12px -6px rgba(0,0,0,1);
	transition: .2s;
}
.inside_plus:hover,
.inside_plus.selected {
	text-decoration: none;
	color: #fff;
	background: #069;
}



/* inside_sp -------------------- */
/*
.inside_sp {
	padding: 0 20px;
}
*/
.inside_slider_area {
	max-width: 620px;
	margin: 40px auto 0;
}
.inside_slider {
	counter-reset: num;
}
.inside_slider_img {
	position: relative;
	margin: 0 30px;
}
.inside_slider_text {
	margin: 20px 30px 0;
}
.inside_slider_text a {
	color: #fff;
}
.inside_slider_text a:hover {
	text-decoration: none;
}
.inside_slider_text h3::before {
	counter-increment: num;
	content: counter(num) ".";
	margin-right: 10px;
}
.inside_slider_text p {
	margin-top: 0;
}
.inside_slider_text img{
	border-radius:1.5rem;
}

/* arrow */
.inside_slider_area {
	position: relative;
}
.inside_slider_area .inside_slider {
	display: none;
}
.inside_slider.slick-initialized {
	display: block;
}
.inside_slider_area .slick-prev:before,
.inside_slider_area .slick-next:before {
	content: none;
}
.inside_slider_area .inside_arrow {
	z-index: 2;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,.3);
	border-radius: 50%;
}
.inside_slider_area .inside_arrow.prev {
	left: -10px;
}
.inside_slider_area .inside_arrow.next {
	right: -10px;
}
.inside_slider_area .inside_arrow span {
	display: block;
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.inside_slider_area .inside_arrow.prev span {
	left: 12px;
	transform: translateY(-50%) rotate(-135deg);
}
.inside_slider_area .inside_arrow.next span {
	right: 12px;
	transform: translateY(-50%) rotate(45deg);
}

/* dots */
.inside_slider_area .slick-dots li button:hover:before,
.inside_slider_area .slick-dots li button:focus:before,
.inside_slider_area .slick-dots li.slick-active button:before {
	background: #069;
}

/* plus */
.plus01 { top: calc(200 / 560 * 100%); left: calc(160 / 560 * 100%); }
.plus02 { top: calc(370 / 560 * 100%); left: calc(130 / 560 * 100%); }
.plus03 { top: calc(220 / 560 * 100%); left: calc(360 / 560 * 100%); }
.plus04 { top: calc(210 / 560 * 100%); left: calc(70 / 560 * 100%); }
.plus05 { top: calc(70 / 560 * 100%); left: calc(140 / 560 * 100%); }
.plus06 { top: calc(380 / 560 * 100%); left: -15px; }
.plus07 { top: calc(380 / 560 * 100%); left: -15px; }

@media screen and (min-width: 1024px) {
	.inside_sp {
		display: none;
	}
}



/* inside_pc -------------------- */

.inside_pc {
	display: none;
}

@media screen and (min-width: 1024px) {
	.inside_pc {
		display: flex;
		justify-content: space-between;
	}
	.inside_img {
		position: relative;
		width: 560px;
	}
	.inside_text {
		align-self: center;
		width: 400px;
	}
	.inside_list {
		counter-reset: num;
	}
	.inside_list > li:nth-child(n+2) {
		margin-top: 20px;
	}
	.inside_list h3:hover {
		cursor: pointer;
	}
	.inside_list h3::before {
		counter-increment: num;
		content: counter(num) ".";
		margin-right: 10px;
	}
	.inside_list h3+div {
		display: none;
		margin-top: 0;
	}
	.inside_list img{
		border-radius: 1.5rem;
		margin-top:1em;
	}
}

@media screen and (min-width: 768px) {
	/* plus */
	.plus01 { top: 190px; left: 170px; }
	.plus02 { top: 130px; left: 80px; }
	.plus03 { top: 200px; left: 20px; }
	.plus04 { top: 125px; left: 360px; }
	.plus05 { top: 250px; left: 330px; }
}


/*=========================== 
line_box
============================ */
.look_md{
	display:none;
}
@media screen and (min-width: 768px) {
	.look_md{
		display:table-cell;
	}
}
.line_box {
    display: block;
    position: relative;
    padding: 3rem 2rem 2rem;
    background: #fff;
    border: 2px solid #0096d6;
    border-radius: .6rem;
    margin-top:2rem;
}

.line_box_ttl{
	display: inline-block;
    background: #fff;
    color:#0096d6;
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 1em;
    white-space: nowrap;
}

@media screen and (min-width: 768px) {
	.line_box::before,
	.line_box::after {
		content: "";
	    position: absolute;
	    top: 50%;
	    left: -.8rem;
	    transform: rotate(-45deg);
	    border: 8px solid transparent;
	}
	.line_box::before {
		border-left: 8px solid #0096d6;
	    border-top: 8px solid #0096d6;
	}
	.line_box::after {
		margin-left: 3px;
	    border-left: 8px solid #fff;
	    border-top: 8px solid #fff;
	}

}

.ttl_lr_line{
    color: #0096d6;
    position: relative;
    display: inline-block;
    padding: 0 4rem;
    text-align:center;
}

@media screen and (min-width: 768px) {
	.ttl_lr_line::before{
	    content: "";
	    position: absolute;
	    top: -.5rem;
	    width: 2rem;
	    height: 6rem;
	    border-left: 2px solid #0096d6;
	    transform: rotate(-45deg);
	    left: 0;
	}
	.ttl_lr_line::after {
	    content: "";
	    position: absolute;
	    bottom: -1.2rem;
	    width: 2rem;
	    height: 6rem;
	    border-left: 2px solid #0096d6;
	    transform: rotate(45deg);
	    left: 100%;
	}
}

/*-------------------------
table p_adjt
--------------------------- */

table.style_basic.p_adjt th, table.style_basic.p_adjt td{
	padding: .5rem 1em;
	border:1px #ccc solid;
}
table.style_basic.p_adjt th{
	background:rgba(0,150,214,0.07);
}

/*============================ 
st_box
================================*/
.st_box{
	background:#f2f2f2;
	align-items: center;
}
.st_box h3{
	color:#0096d6;
	margin-bottom:1rem;
}

/*===================== 
panel_enlargement
============================ */
.dimensions{
	position: relative;
}
.dimensions::after{
	content: "";
    position: absolute;
    top: 30%;
    left: 23%;
    width: 25%;
    height: 15%;
    border: 2px solid #0096d6;
    border-radius: 0.5rem;
}
.panel_enlargement{
	position: relative;
}
.panel_enlargement::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 30%;
    width: 2px;
    height: 42%;
    background: #0096d6;
    z-index: 1;
}
@media screen and (min-width: 480px) {
	.panel_enlargement::after{
	    height: 37%;
	}
}
@media screen and (min-width: 768px) {
	.panel_enlargement::after{
		content: "";
	    position: absolute;
	    top: 38%;
	    left: -270px;
	    width: 270px;
	    height: 2px;
	    background: #0096d6;
		z-index: 1;
	}
}
@media screen and (min-width: 1024px) {
	.panel_enlargement::after{
		content: "";
	    position: absolute;
	    top: 38%;
	    left: -285px;
	    width: 285px;
	    height: 2px;
	    background: #0096d6;
		z-index: 1;
	}
}

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

.interior_photo {
	display: flex;
	flex-wrap: wrap;
}





/*=========================================================================== 
envy_inspire_original_function
=========================================== */

.circle2 {
    width: 220px;
    height: 110px;
    background-color: rgba(0,150,214,0.07);
    border-radius: 500px 500px 0 0;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.circle2_intxt {
    position: absolute;
    bottom: 1rem;
    color:#007dba;
    left: 50%;
    transform: translateX(-50%);
    width:85%;
    font-size: 125%!important;
    line-height:1.4;
}

.envy_inspire_original_function{
	margin:4rem 0;
}
.original_function_box{
	background:rgba(0,150,214,0.07);
	padding:2rem 1.6rem;
}
.original_function_cnt h3{
	color:#0096d6;
}
.original_function_cnt h3 + p{
	color:#767676;
	font-size:1.6rem;
}

.original_function_cnt > div{
	padding:1.6rem 1rem;
}
.original_function_cnt > div+div{
	border-top:1px #999 dotted;
}
.original_function_cnt .imgbox{
	margin-top: 2rem;
	text-align:center;
}

@media screen and (min-width: 480px) {
	.original_function_cnt .txtbox{
		width: 60%;
	}
	.original_function_cnt .imgbox{
		width: 35%;
		margin-top:0;
	}
}
@media screen and (min-width: 768px) {
	.envy_inspire_original_function{
		margin:40px 0;
	}
	.original_function_box{
		padding:2rem 1.6rem 3rem;
	}
	.original_function_cnt h3,
	.original_function_cnt h3 + p{
		letter-spacing:1px;
	}
}
@media screen and (min-width: 1024px) {
	.original_function_box{
		padding:2rem 2rem 4rem;
	}
	.original_function_cnt > div{
		padding:10px;
	}
	.original_function_cnt > div+div{
		border-top:none;
		border-left:1px #999 dotted;
	}
	.original_function_cnt h3,
	.original_function_cnt h3 + p{
		text-align:center;
	}
	.original_function_cnt .txtbox{
		width: 100%;
	}
	.original_function_cnt .imgbox{
		width: 100%;
		margin-top:20px;
	}
}

.nvic{
	max-width:8rem;
}



/* --------------------------------------------------------- 
smart_advanve_comp
-------------------------------------------------------------- */
.smart_advanve_comp {
	padding: 0 1.6rem 4rem;
	background: rgba(0,150,214,0.07);
}
@media screen and (min-width: 768px) {
	.smart_advanve_comp {
		padding: 0 10px 40px;
	}
}
.smart_advanve_comp h3{
	color: #0096d6;
	font-weight: normal;
	text-align:center;
	margin-bottom:2rem;
}
.btnbox{
	position: absolute;
	width: 100%;
	bottom: -2rem;
	left: 0;
}
.btn_action{
	position: relative;
	border-radius: 0 0 1rem 1rem;
	text-align:center;
	padding: 4rem 2rem;
}
.btn_action.open{
	background: linear-gradient(180deg,rgb(255, 255, 255, 0) 0%,rgb(255, 255, 255, 1) 30%);
}
.btn_action.open::after {
	content: "";
	position: absolute;
	top: 45%;
	transform: rotate(45deg);
	width: 8px;
	height: 8px;
	margin-left: 1rem;
	border-right: 2px solid #0096d6;
	border-bottom: 2px solid #0096d6;
}
.btn_action.close{
	background: none;
}
.btn_action.close::after {
	content: "";
	position: absolute;
	bottom: 45%;
	transform: rotate(45deg);
	width: 8px;
	height: 8px;
	margin-left: 1rem;
	border-left: 2px solid #0096d6;
	border-top: 2px solid #0096d6;
}

/*
.btnbox button {
	position: relative;
}
*/
.smart_advanve_comp div#open_close_box.open_close_box {
	position:relative;
	height: 280px;
	overflow-y: hidden;
}

/* table */

.smart_advanve_comp .table_scroll_none_lg table{
	table-layout: fixed;
}
.smart_advanve_comp table.style_basic thead th{
	vertical-align: middle;
	color:#0096d6;
}
.smart_advanve_comp table.style_basic tbody td:nth-child(n+4){
	vertical-align: middle;
	text-align:center;
}
.smart_advanve_comp table.style_basic tbody td.ttl{
	color:#5a5a5a;
	font-weight: bold;

}
.smart_advanve_comp table.style_basic tbody td.bg{
	background:rgba(0,150,214,0.07);
}


/*---------------------------------------- 
function 
----------------------------------------------- */
.function_icon_box{
	margin-top:2rem;
	text-align:center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.function_icon_box > li{
	margin: 1rem;
}
.function_icon_box > li > p{
	font-size: 1.2rem!important;
	color:#0096d6;
	line-height: 1.1;
	margin-top:1rem;
}
@media screen and (min-width: 768px) {
	.function_icon_box{
		justify-content: center;
	}
}
#function ::marker {
	color: #0096d6;
	font-size: 140%;
}
#function .list_num > li{
	padding:1rem;
}
#function .list_num > li h4{
	color:#007dba;
	letter-spacing: 1px;
	line-height:2;
}


.function_nm > li{
	background:rgba(0,150,214,0.85);
	border:1px #fff solid;
	border-radius: 0.2rem;
	display:inline-block;
	position: relative;
}
.function_nm > li a{
	padding: 1.3rem;
	font-size: 130%;
	line-height: 2;
	color: #fff;
}
.function_nm > li:nth-child(1){
	position: absolute;
	top:4%;
	right:30%
}
@media screen and (min-width: 768px) {
	.function_nm > li:nth-child(1){
		top:15%;
		right:35%;
	}
}

.function_nm > li:nth-child(2){
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
}

.function_nm > li:nth-child(3){
	position: absolute;
	top: 25%;
	left: 15%;
}
@media screen and (min-width: 768px) {
	.function_nm > li:nth-child(3){
		position: absolute;
		top: 50%;
		left: 23%;
		transform: translateY(-50%);
	}
}

.function_nm > li:nth-child(4){
	position: absolute;
	top: 23%;
	left: 38%;
}
@media screen and (min-width: 768px) {
	.function_nm > li:nth-child(4){
		position: absolute;
		top: 35%;
	}
}

.function_nm > li:nth-child(5){
	position: absolute;
	top: 40%;
	right: 13%;
}
@media screen and (min-width: 768px) {
	.function_nm > li:nth-child(5){
		position: absolute;
		top: 55%;
		right:20%;
	}
}



/* ============================================================
environment
=========================================================== */
.environment .img_area{
	background:url(/content/dam/jp-ext-hp-com/jp/ja/ec/printers/personal/inkjet/images/environment_photo.webp) center bottom / cover;
	min-height: 600px;
}
.environment .img_area .posA {
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 1rem;
}

@media screen and (min-width: 768px){
	.environment .img_area{
		min-height: 500px;
	}
}



/* circle -------------------------------------------- */
.circle {
    width: 100%;
    height: 150px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.circle::after{
	position: absolute;
	content: "";
	background: url(/content/dam/jp-ext-hp-com/jp/ja/ec/printers/personal/inkjet/images/icon/ic_eco.png) no-repeat;
	width: 60px;
	height: 48px;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
}

.circle_intxt {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width:80%;
    font-size: 110%!important;
    line-height:1.3;
}
@media screen and (min-width: 480px) {
	.circle {
		height: 220px;
	}
}
@media screen and (min-width: 1024px) {
	.circle {
	    width: 280px;
	    height: 280px;
	}
	.circle_intxt {
	    position: absolute;
	    top: 45%;
	    left: 50%;
	    -webkit-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
	    width:85%;
	    font-size: 120%!important;
	    line-height:1.8;
	}
}


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

.product_detail_price_area{
	display: none;
}

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

@media screen and (max-width: 1023px){
	.local_navi.style_block .local_navi_menu_level1 > li.local_navi_menu_buy > a {
	    color: #fff;
	    background: #d7410b;
	    width: 100%;
	    text-align: center;
	}
}


.local_navi.style_block .local_navi_menu_level1 > li.local_current_users > a,
.local_navi.style_block .local_navi_menu_level1 > li.local_current_users.current > a  {
	background: #000;
	color: #fff;
}

@media screen and (max-width: 1023px){
	.local_navi.style_block .local_navi_menu_level1 > li.local_current_users > a {
		text-align: center;
	}
}
@media screen and (min-width: 1024px){
	.local_navi.style_block .local_navi_menu_level1 > li.local_current_users:hover > a {
		background: #333;
	}
}


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

.spec .productsize > div img{
	height: auto;
}
@media screen and (min-width: 1024px){
	.spec .productsize > div img{
		max-width: 300px;
	}
}


/* ==================================================
	ink / option / consumables<--追加-->
================================================== */

/* ----------------------------------------
	consumables
---------------------------------------- */

.consumables_area .pro_name { width: 100%; }
.consumables_area .pro_color { width: 25%; }
.consumables_area .pro_no { width: 25%; }
.consumables_area .pro_price { width: 50%; }

.consumables_area .pro_no,
.consumables_area .pro_price {
	border-left: 1px dotted #ccc;
}

.consumables_area .list_dtl .pro_no {
	display: flex;
	justify-content: center;
	align-items: center;
}

.consumables_area .list_dtl .pro_price {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 1024px) {
	.consumables_area .pro_name {width: 58%;}
	.consumables_area .pro_color {width: 12%;}
	.consumables_area .pro_no {width: 12%;}
	.consumables_area .pro_price {width: 18%;}

	.consumables_area .list_dtl .pro_price_inner {
		display: block;
	}
	.consumables_area .list_dtl .pro_price_inner .buy_cart {
		margin: .8em 0 0 0;
	}
}



/* ver_sheets -------------------- */

.consumables_area.ver_sheets .pro_color,
.consumables_area.ver_sheets .pro_no,
.consumables_area.ver_sheets .pro_price { width: 33.33333%; }

.consumables_area.ver_sheets .pro_sheets {
	border-left: 1px dotted #ccc;
}

.consumables_area.ver_sheets .list_dtl .pro_sheets {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 1024px) {
	.consumables_area.ver_sheets .pro_name { width: 58%; }
	.consumables_area.ver_sheets .pro_color { width: 12%; }
	.consumables_area.ver_sheets .pro_no { width: 12%; }
	.consumables_area.ver_sheets .pro_price { width: 18%; }
}



/* ==================================================
	catalog_list
================================================== */

.catalog_list > li {
	padding-top: 2rem;
}
.catalog_list > li:nth-child(n+2) {
	margin-top: 2rem;
	border-top: 1px solid #ccc;
}
.catalog_list h4 {
	line-height: 1.4;
	font-wieght: normal;
}
.catalog_detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.catalog_img {
	width: 92px;
}
.catalog_img img {
	border: 1px solid #ccc;
}
.catalog_text {
	width: calc(100% - 110px);
}

.catalog_text .button {
	margin-top: 1.5rem;
}

@media screen and (max-width: 479px) {
	.catalog_text .button {
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 1024px) {
	.catalog_list {
		display: flex;
		flex-wrap: wrap;
	}
	.catalog_list > li {
		width: 50%;
		padding: 0 20px;
	}
	.catalog_list > li:nth-child(n+2) {
		margin-top: 0;
		border-top: none;
	}
}



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

content_current_users

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

.content_current_users img { height: auto; }
.current_users_list {
	margin-top: 2rem;
	display: grid;
	gap: 4rem 2rem;
}

.current_users_list > li {
	border: 1px #999 solid;
	padding: 3rem 2rem;
}
.current_users_list > li {
	padding: 15px 30px;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	row-gap: 20px;
}

@media (min-width: 768px) {
	.current_users_list {
		grid-template-columns: repeat(3, 1fr);
	}
}


.current_users_list > li h3 {
	position: relative;
	padding-left: 2rem;
	font-weight: normal;
}
.current_users_list > li h3::after {
	content: "";
	position: absolute;
	top: .5em;
	left: 0;
	width: .5em;
	height: .5em;
	background: #000;
	border-radius: 50%;
}

.linkarrow__list > li + li {
	margin-top: 1em;
}
.linkarrow__list > li .button.line {
	display: block;
	text-align: center;
}