@charset "shift_jis";
/* CSS Document */

/*===========================================
	hpc_1000xm3.css  18/09/26
=============================================*/


#contents h2{
	margin-top:2em;
}

#contents div.listArea{
	overflow:hidden;
	margin-left:1em;
	padding-bottom:1em;
	width:100%;
	height:1115px;
}

#contents div.left_img{
	display:inline-table;
	width:46%;
	float:left;
}

#contents div.textArea{
	display:inline-table;
	width:44%;

}

#contents div.textArea ul{
	list-style:none;
	position:relative;
}



#contents div.textArea ul li.abslt{
	position:absolute;
}

#contents div.textArea ul li a.btn_area{
	display: inline-block;
    width: 18em;
    padding: 0.5em;
	margin:0.2em 0 1em 0;
	color:#000;
}


#contents div.textArea ul li img,
#contents div.textArea ul li p img{
	display:none;
}

#list1{
	top:35px;
}

#list2{
	top:144px;
}
#list3{
	top:237px;
}

#list4{
	top:376px;
}
#list5{
	top:490px;
}
#list6{
	top:602px;
}

#list7{
	top:692px;
}
#list8{
	top:808px;
	
}
#list9{
	top:894px;
}
#list10{
	top:939px;
}


#list11{
	top:1016px;
}





#contents div.textArea ul li p,
#contents div.textArea ul li > ul{
	margin-left:0 !important;
}

#contents div.textArea ul li p{
	margin-bottom:0.3em;
}


#contents div.pictArea {
    margin-left:2em;
	margin-bottom:2em;
}

#contents ul.imageList{
	margin:2.5em 0.5em 2em 2em;
}

#contents ul.imageList li{
	display:inline-block;
	margin-right:0.5em;
}

#contents ul.imageList li:last-child{
	margin-right:0;
}
#contents ul.imageList li:nth-child(4),
#contents ul.imageList li:nth-child(5){
	margin-top:2em;
}

#contents figure figcaption{
	font-weight:700;
	text-align:center;
	margin-bottom:0.5em;
}

#contents .row-line img {
    vertical-align: middle;
}

#contents div.pictArea img.pc_arrow1{
	margin-left:5px;
	display:inline-block;
}
	
#contents div.pictArea span.mq_arrow{
	display: none;
	background-image: url(/support/headphone/howto/images/mq_arrow.png);
    height: auto;
    width: 51px;
    overflow: hidden;
    background-repeat: no-repeat;
    position: absolute;
    top: 46px;
    clear: both;
    left: 0;
    z-index: -1;
}


@media (max-width: 640px){

#contents div.listArea{
	height:auto;
	margin-left:0;
}

#contents div.left_img{
	width:100%;
	float:none;
	margin: 1em 0 2em 0;
	text-align:center;
}

#contents div.textArea{
	width:100%;
}

#contents div.textArea ul{
	display: inline-block;
	margin-left:1em;
}


#contents div.textArea > ul > li{
	margin-bottom:2em;
}

#contents div.textArea ul li p{
	display: inline-block;
    width: 80%;
	margin: 0 0.5em 1em 0 !important;
}

#contents div.textArea ul li.abslt{
	position:static;
}

#contents div.textArea ul li img{
	display: inline;
    float: left;
    padding-right: 1em;
}


#contents div.textArea ul li a.btn_area{
    width: 70%;
	margin-left:2.8em;
}

#contents div.pictArea {
	margin: 2em 0 3em 0;
	text-align:center;
}


#contents div.pictArea img.pc_arrow,
#contents div.pictArea img.pc_arrow1{
	display:none;
}

#contents div.pictArea span.mq_arrow{
	display:block;
	position:static;
	height:35px;
	margin:0 auto;
}

#contents ul.imageList{
	margin:2.5em 0 2em 0;
	text-align:center;
}


#contents ul.imageList li{
	margin:0 0 1em 0;
}

#contents ul.imageList li:nth-child(4),
#contents ul.imageList li:nth-child(5){
	margin-top:unset;
}

#contents p.annotation{
	
    margin-left: 0.5em;
}

#contents p.annotation.ml_0{
	margin-left:0;
}
	
}