@charset "shift_jis";

/*---------------------------------
  3@ CSS Document 2014
---------------------------------*/

@import "base.css";



/*####################　枠　####################*/


.container.gray {
	border:solid #eeeeee;
	border-width:1px 0;
	background:#f7f7f7;
	margin-bottom:20px;
	padding:20px 0 0;
	}
.main {
	width:320px;
	margin:0 auto;
	overflow:hidden;
	}

p.buy {text-align:center; margin:0 0 20px;}
p.buy span,
p.buy a {
/*	display:inline-block;
	background:url(../../sp360/img/sp/btn-cart.png);
	background-size:296px 80px;
	width:296px;
	height:80px;
	text-indent:-9999px;
*/	}



#PagePixPro small {
	display:block;
	text-align:right;
	font-size:12px;
	color:#ffffff;
	}

#PagePixPro #Header {
	position:relative;
	z-index:1;
	background:url(../img/wall-head.png) bottom repeat-x;
	height:45px;
	margin-bottom:-5px;
}




#PagePixPro #Header .wrap {font-size:0;}
#PagePixPro #Header h1 {float:left; margin-top:8px; margin-left:12px;}
#PagePixPro #Header p {float:right; margin-top:12px; margin-right:12px;}



/*#PagePixPro .contentsBox#Spec {width:980px; padding:50px 0;}*/
#PagePixPro .contentsBox#Spec h2 {text-align:center;}
#PagePixPro .contentsBox#Spec h3 {text-align:center;}
#PagePixPro .contentsBox#Spec table {
	/*width:100%;*/
}

#PagePixPro .contentsBox#Spec table th {
	background:#fbfbfb;
	padding:5px;
	font-size:10px;
	font-weight:normal;
	border-color:#dddddd;
	vertical-align:top;
	white-space:normal;
}
#PagePixPro .contentsBox#Spec table td {
	padding:5px;
	font-size:10px;
	border-color:#dddddd;
	vertical-align:top;
}
#PagePixPro .contentsBox#Spec table td.nowrap {white-space:nowrap;}








#PagePixPro small {
	display:block;
	background:#000000;
	padding:25px 0 20px;
	text-align:center;
	line-height:1;
}



/*####################　扉ページ　####################*/
#PagePixPro.door {background:#000000;}
#PagePixPro.door .main {background:#ffffff;}

#PagePixPro.door h1 {
	background:url(../../img/sp/mainimg.png);
	background-size:320px 153px;
	width:320px;
	height:153px;
	margin:0 auto -40px;
	text-indent:-9999px;
	}
#PagePixPro.door p.supple {
	margin:-60px auto 5px;
	text-align:right;
	color:#ffffff;
	font-size:8px;
	}

#PagePixPro.door .banna {position:relative; width:320px;}
#PagePixPro.door .banna.about_sp360 a,
#PagePixPro.door .banna dt {
    position:absolute;
    display:block;
    height:41px;
    /*background:url(../wall-sample.gif);*/
}

#PagePixPro.door .banna.sp360_4K {
	background:url(../../img/sp/img_sp360_4k.png);
	background-size:320px 198px;
	height:198px;
	}
	#PagePixPro.door .banna.sp360_4K dt {top:144px; left:4px; width:156px;}

#PagePixPro.door .banna.about_sp360 {
	background:url(../../img/sp/img_about_sp360.png);
	background-size:320px 155px;
	height:155px;
    }
	#PagePixPro.door .banna.about_sp360 a {top:98px; left:10px; width:145px;}


#PagePixPro.door .banna.sp360 {
	background:url(../../img/sp/img_sp360.png);
	background-size:320px 166px;
	height:166px;
	}
	#PagePixPro.door .banna.sp360 dt {top:112px; left:161px; width:147px;}



#PagePixPro.door .banna.wp1 {
	background:url(../../img/sp/img_wp1.png);
	background-size:320px 154px;
	height:154px;
	}
	#PagePixPro.door dl.wp1 dt {top:100px; left:12px; width:146px;}

#PagePixPro.sp360 th {
    border: 1px solid #bbbbbb;
    vertical-align: top;
    text-align: left;
    font-weight: bold;
	white-space:inherit;
}

#PagePixPro.door .banna.sp1 {
	background:url(../../img/sp/img_sp1.png);
	background-size:320px 160px;
	height:160px;
	}
	#PagePixPro.door .banna.sp1 dt {top:106px; left:161px; width:147px;}

#PagePixPro.door .banna a {
    display:block;
    height:40px;
    text-indent:-9999px;
}
#PagePixPro.door .banna.about_sp360 a {height:35px;}

#PagePixPro.door dd {display:none;}

/*170221 追加*/
#PagePixPro.door .main div.kvr360 h1{
	background: url(../../img/sp/4kvr360_top.png) no-repeat !important;
	background-size:cover;
	width:320px;
	padding-bottom:30px;
}
#PagePixPro.door .main div.kvr360 dl {
	background: url(../../img/sp/4kvr360_big.png) no-repeat;
	width:320px;
	height:177px;
	position:relative;
}
#PagePixPro.door .main div.kvr360 a{
	position:absolute;
	width:155px;
	left:5px;
	top:123px;
}

#PagePixPro.door dl.kvr360{
	background: url(../../img/sp/4kvr360.jpg) left top no-repeat;
	width:320px;
	height:150px;
	position:relative;
}
#PagePixPro.door dl.kvr360 a{
	position:absolute;
	width:146px;
	height:50px;
	left:12px;
	top:102px;
}
#PagePixPro.door .sp3604k{
	background:url(../../img/sp/sp3604k.png) no-repeat;
	width:320px;
	height:150px;
	position:relative;
}
#PagePixPro.door .sp3604k a{
	position:absolute;
	width:146px;
	height:50px;
	left:12px;
	top:102px;
}






/*####################　SP360　####################*/

#PagePixPro.sp360 .wrap {width:320px; margin:0 auto;}

#PagePixPro.sp360 .contentsBox {
	border-bottom:1px solid #dddddd;
	margin-bottom:20px;
	padding-bottom:50px;
}
#PagePixPro.sp360 .contentsBox h2 {margin-bottom:5px;}

#PagePixPro.sp360 .contentsBox p {color:#5F6065;}
#PagePixPro.sp360 .contentsBox li {color:#5F6065;}
#PagePixPro.sp360 .contentsBox dl {color:#5F6065;}

#PagePixPro.sp360 #MainImg {
	background:url(../../sp360/img/sp/mainimg.png);
	background-size:320px auto;
	width:320px;
	height:262px;
	margin:0 auto 50px;
	}
#PagePixPro.sp360 #MainImg h2,
#PagePixPro.sp360 #MainImg p {display:none;}

#PagePixPro.sp360 .contentsBox {padding:0 12px;}

#PagePixPro.sp360 #Contents01 ul {width:312px; margin-right:-16px;}
#PagePixPro.sp360 #Contents01 ul:after {content:""; display:block; clear:both; height:0; visibility:hidden;}
#PagePixPro.sp360 #Contents01 li {float:left; margin:0 15px 16px 0;}

#PagePixPro.sp360 #Contents02 ul {width:312px; margin-right:-16px;}
#PagePixPro.sp360 #Contents02 ul:after {content:""; display:block; clear:both; height:0; visibility:hidden;}
#PagePixPro.sp360 #Contents02 li {float:left; margin:0 15px 16px 0;}

#PagePixPro.sp360 #Contents03 {padding:0;}
#PagePixPro.sp360 #Contents03 h2 {margin-bottom:0;}
#PagePixPro.sp360 #Contents03 #photoFrame {
  position: relative;
  width: 320px;
  height: 230px;
  background:url(../../sp360/img/wall-arrow.gif) center no-repeat;
  background-size:280px auto;
}
#PagePixPro.sp360 #Contents03 #photoFrame img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

#PagePixPro.sp360 #Contents04 ul {width:312px; margin-right:-16px;}
#PagePixPro.sp360 #Contents04 ul:after {content:""; display:block; clear:both; height:0; visibility:hidden;}
#PagePixPro.sp360 #Contents04 li {float:left; margin:0 13px 16px 0;}
#PagePixPro.sp360 #Contents04 li a {position:relative;}

#PagePixPro.sp360 #Contents04 li a:after {
	content:"";
	display:inline-block;
	position:absolute;
	top:50%;
	left:50%;
	background:url(../../sp360/img/ico-play.png);
	background-size:21px 21px;
	width:21px;
	height:21px;
	margin:-33px 0 0 -10px;
}

#PagePixPro.sp360 #Contents05 {overflow:hidden; text-align:center; padding-bottom:15px;}
#PagePixPro.sp360 #Contents05 p {margin-bottom:10px;}
#PagePixPro.sp360 #Contents05 dl { position:relative; left:50%; float:left;}
#PagePixPro.sp360 #Contents05 dt { position:relative; left:-50%; margin-bottom:5px;}
#PagePixPro.sp360 #Contents05 dd { position:relative; left:-50%; float:left; margin:0 4px 0;}


#PagePixPro.sp360 #Contents06 {border:none;}
#PagePixPro.sp360 #Contents06 ul {width:312px; margin-right:-16px; font-size:0;}
#PagePixPro.sp360 #Contents06 ul:after {content:""; display:block; clear:both; height:0; visibility:hidden;}
#PagePixPro.sp360 #Contents06 li {float:left; margin:0 17px 15px 0;}
#PagePixPro.sp360 #Contents06 li a {position:relative;}

#PagePixPro.sp360 #Contents07 {border:none;}
#PagePixPro.sp360 #Contents07 p {text-align:center;}

/*####################　sp360-4k　####################*/

#PagePixPro.sp360 #MainImg4k {
	background:url(../../sp360-4k/img/sp/mainimg.png);
	background-size:320px auto;
	width:320px;
	height:247px;
	margin:0 auto 20px;
	}
#PagePixPro.sp360 #MainImg4k h2,
#PagePixPro.sp360 #MainImg4k p {display:none;}


/*####################　SP1　####################*/

#PagePixPro.sp1 .wrap {width:320px; margin:0 auto;}

#PagePixPro.sp1 #MainImg {
	background:url(../img/wall-grid.gif);
	background-size:15px 15px;
	margin-bottom:0;
	}
#PagePixPro.sp1 #MainImg .wrap {
	background:url(../../sp1/img/sp/mainimg.png) center 15px no-repeat;
	background-size:300px 160px;
	width:320px;
	margin:0 auto;
	padding:195px 0 20px;
}
#PagePixPro.sp1 #MainImg h2 {display:none;}
#PagePixPro.sp1 #MainImg p {width:270px; margin:0 auto; line-height:1.7;}

#PagePixPro.sp1 .contentsBox {margin-bottom:25px;}
#PagePixPro.sp1 .contentsBox p {margin:0 12px;}
#PagePixPro.sp1 .contentsBox p.photo {margin:0 0 15px; padding:0;}
#PagePixPro.sp1 .contentsBox h2 {margin-bottom:15px;}


/*####################　WPZ2　####################*/

#PagePixPro.wpz2 .wrap {width:320px; margin:0 auto;}

#PagePixPro.wpz2 #MainImg {
	margin-bottom:20px;
	}
#PagePixPro.wpz2 #MainImg .wrap {
	background: url(../../wpz2/img/sp/mainimg.png) center top no-repeat;
	background-size: 320px 350px;
	width: 320px;
	padding: 0px;
	height: 350px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#PagePixPro.wpz2 #MainImg h2 {display:none;}
#PagePixPro.wpz2 #MainImg p {display:none;}

#PagePixPro.wpz2 #Contents01{background: url(../../wwpz2/img/sp/dotline.gif) center bottom no-repeat;margin-bottom:25px; padding-bottom:25px;}
#PagePixPro.wpz2 #Contents01 h2 {margin-bottom:20px;}
#PagePixPro.wpz2 .contentsBox p {margin:0 12px;}
#PagePixPro.wpz2 .contentsBox p.photo {margin:0; padding:0;}

#PagePixPro.wpz2 #Contents02{margin-bottom:35px;}

#PagePixPro.wpz2 #Contents02 h3{margin-bottom:25px;}
#PagePixPro.wpz2 #Contents02 div.forteBox{
	background-image: url(../../wpz2/img/sp/line.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
#PagePixPro.wp1 #Contents02 div.forteBox h4{margin-bottom:0px;}
#PagePixPro.wp1 #Contents02 div.forteBox p.photo{ margin:15px 10px 0px 10px;}

#PagePixPro.wp1 #Spec h2 { margin-bottom:10px;}




/*####################　WP1　####################*/

#PagePixPro.wp1 .wrap {width:320px; margin:0 auto;}

#PagePixPro.wp1 #MainImg {
	margin-bottom:20px;
	}
#PagePixPro.wp1 #MainImg .wrap {
	background: url(../../wp1/img/sp/mainimg.png) center top no-repeat;
	background-size: 320px 350px;
	width: 320px;
	padding: 0px;
	height: 350px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#PagePixPro.wp1 #MainImg h2 {display:none;}
#PagePixPro.wp1 #MainImg p {display:none;}

#PagePixPro.wp1 #Contents01{background: url(../../wp1/img/sp/dotline.gif) center bottom no-repeat;margin-bottom:25px; padding-bottom:25px;}
#PagePixPro.wp1 #Contents01 h2 {margin-bottom:20px;}
#PagePixPro.wp1 .contentsBox p {margin:0 12px;}
#PagePixPro.wp1 .contentsBox p.photo {margin:0; padding:0;}

#PagePixPro.wp1 #Contents02{margin-bottom:35px;}

#PagePixPro.wp1 #Contents02 h3{margin-bottom:25px;}
#PagePixPro.wp1 #Contents02 div.forteBox{
	background-image: url(../../wp1/img/sp/line.gif);
	background-repeat: no-repeat;
	background-position: center bottom;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
#PagePixPro.wp1 #Contents02 div.forteBox h4{margin-bottom:0px;}
#PagePixPro.wp1 #Contents02 div.forteBox p.photo{ margin:15px 10px 0px 10px;}

#PagePixPro.wp1 #Spec h2 { margin-bottom:10px;}



/*####################　ACCESSORY　####################*/
#PagePixPro.accessory .wrap {width:320px; margin:0 auto;}
#PagePixPro.accessory h2{ margin-bottom:20px;}
#PagePixPro.accessory .copy{
	text-align: center;
	background-color: #FFF;
	background-image: url(../../accessory/img/sp/line-dotted.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	padding-bottom: 10px;
}
#PagePixPro.accessory .copy p{margin-bottom:10px;}

#PagePixPro.accessory .main{
	background-image: url(../../accessory/img/wall-grid.gif);
	background-repeat: repeat;
}
#PagePixPro.accessory .main .container{	
	padding: 20px 0px;
	text-align: center;}

#PagePixPro.accessory .contentsBox {
	display: flex;
    flex-wrap: wrap;
	font-size: 0;
	text-align: left;
	width: 320px;
	margin-top: 0;
	margin-right: -8px;
	margin-bottom: 0;
	margin-left: 8px;
    vertical-align:top;
}

#PagePixPro.accessory .contentsBox .entry {
	display:inline-block;
	width: 125px;
	border: 1px solid #ebebeb;
	border-bottom-color: #bbbbbb;
	background: #ffffff;
	padding: 10px;
	font-size: 12px;
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 20px;
    vertical-align:top;
}

#PagePixPro.accessory .entry .photo {
	    border:1px solid #DDDDDD;
    margin-bottom:5px;
    font-size:0;
}
#PagePixPro.accessory .entry .icon {
    margin:0 -2px 7px;
    text-align:center;
    font-size:0;
    }
#PagePixPro.accessory .entry .icon li {
    box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    display:inline-block;
    vertical-align:top;
    width:33.333%;
    padding:0 2px;
    margin-bottom:2px;
}

#PagePixPro.accessory .entry .icon li img {
    width:100%;
    height:auto;
}

#PagePixPro.accessory .entry .pop {
    background:url(../../accessory/img/sp/wall_pop_bottom.png) bottom no-repeat;
	    background-size: contain;
    padding-bottom:10px;
    width:125px;
    margin:0 auto 5px;
    text-align:center;
}
#PagePixPro.accessory .entry .pop .popIn {
	background: url(../../accessory/img/sp/wall_pop_top.png) top no-repeat;
	background-size: 125px auto;
	font-size: 11px;
	color: #D88C00;
	padding-top: 7px;
	padding-right: 3px;
	padding-bottom: 0;
	padding-left: 3px;
}

#PagePixPro.accessory .entry dl {
    text-align:left;
}

#PagePixPro.accessory .entry dt {
    border-bottom:2px solid #000000;
    margin-bottom:5px;
    font-size:16px;
    font-weight:bold;
}
#PagePixPro.accessory .entry dt span {
    display:block;
    font-size:11px;
    font-weight:normal;
}

#PagePixPro.accessory .entry .scene {
    text-align:center;
}
#PagePixPro.accessory .entry dd{    margin-bottom:5px;}




/*####################　印刷対応　####################*/

@media print{
	#Main h2	{page-break-before:avoid; page-break-after:avoid;}
	#LineUp		{page-break-before:avoid; display:block; zoom:1;}
	/*#Main .contentsBox.item {page-break-inside:avoid;}*/

	#Main .contentsBox.item .title {
		font-size:87%;
		margin-bottom:0;
		height:10px;
		margin:0;
		padding:0;
		page-break-after:avoid;
		display:none;
		}
	#Main .contentsBox.item .title * {margin:0; padding:0;}
	#Main .contentsBox.item .title h3 {float:none; display:block;}
	#Main .contentsBox.item .title ul {display:none;}

	#Main .contentsBox.item .wrap {page-break-before:avoid; padding-top:0;}


}




/*####################　おおみだし　####################*/

/*　こみだし
-------------------------------------*/

/* まごみだし */


/*end*/