@charset "utf-8";
/* CSS Document */

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

	-- App Page Style --
	
	author:     Pioneer Design
	date:       2013/3/18
	
	
	-- CONTENTS --
	
	1: Base Setting
	2: Rayout
	3: Heading
	4: Link
	5: txt
	6: column
	7: max-width:920px
	8: Smart Phone / max-width 640px
	9: RETINA Display
	
	-- COLORS --
	
	text dark gray	#343434
	link red(hover)	#B91440(Pioneer Read)
	

==========================================================
*/
/* ------------------------------------------------------------- */
/* 1: Base Setting */
/* ------------------------------------------------------------- */
*{-webkit-text-size-adjust: none;}
body{
 width:100%;
 font-size:100%;
 line-height:1.2em;
}
#content {
	width:920px;
	margin:0 auto;
	font-family:sans-serif;
}
p, li{font-size:80%;}
.pecw_logo{margin:10px 0 13px 10px;}
a {	color:#000;}
.clear_both{clear:both;}
img {border:none;}
ul{	margin-left:15px;}
ol{	margin:5px 0 5px 20px;}
ol li {	margin-bottom:10px;}
.li_title{color:#B91440; font-weight:bold;}
p{overflow:hidden;}
ol img {vertical-align:middle; margin-right:3px;}

.float_left{float:left;}
.small{font-size:75%;}
	
.text_align_center{text-align:center;}
.text_align_left{text-align:left;}
.vertical_align_middle{vertical-align:middle;}


/* ------------------------------------------------------------- */
/* 2: Rayout */
/* ------------------------------------------------------------- */

/*----- Title Area -----*/
.box01{
	background:url(../img/bg_title.jpg) no-repeat left top;
	min-height:610px;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e7e7e7), to(#fff));
	background: -moz-linear-gradient(#e7e7e7 0%, #fff 80%);
	background: linear-gradient(#e7e7e7 0%, #fff 80%);
	border-radius: 7px;      
	-webkit-border-radius: 7px;  
	-moz-border-radius: 7px;
	padding:20px 4%;
	position:relative;
}
#support .box01{
	background:url(../img/bg_title_02.jpg) no-repeat left top;
}
.box_left{width:50%; float:left;}
.box_right{
	width:50%;
	float:right;
	text-align:right;
	/*margin-top:50px;
	position:relative;
	top:-120px;*/
}
img.icon_app{
	position:relative;
	top:-200px;
	left:-30px;
}


.language{text-align:right;}

/* Support Page Adjust */
#support .box01{
	padding:6% 4%; 
	min-height:200px;
}
#support .box_right{
	position:absolute;
	right:5%;
	top:10%;	
}

/* App Store BTN */
.app_btn{
	text-align:center;
	width:270px;
	border:solid 1px #d7d7d7;
	padding:10px 0 15px 0;
	background:#fff;
	border-radius: 7px;      
	-webkit-border-radius: 7px;  
	-moz-border-radius: 7px;
	box-shadow: 0px 2px 1px #aaa;
	-moz-box-shadow:0px 2px 1px #aaa;
	-webkit-box-shadow:0px 2px 1px #aaa;
	line-height:2.6em;
	margin:20px auto;
}
.app_btn a {text-decoration:none;}
.app_btn a span {
	text-decoration:none;
	background: url(../img/arr.gif) no-repeat left center;
	padding-left:10px;
}

/*----- Gray Box -----*/
.box02{
	background:#eee;
	padding:0 4% 4% 4%; 
	clear:both;
	margin:20px 0 25px 0;
}
/*----- White Box -----*/
.box03{
	background:#fff;
	padding:15px 3%;
	box-shadow: 0px 1px 1px #d5d5d5;
	-moz-box-shadow:0px 1px 1px #d5d5d5;
	-webkit-box-shadow:0px 1px 1px #d5d5d5;
}
/*----- Q&A Box -----*/
.box04{
	background:#fff;
	padding:3% 3% 2% 3%;
	margin-bottom:10px;
	box-shadow: 0px 1px 1px #d5d5d5;
	-moz-box-shadow:0px 1px 1px #d5d5d5;
	-webkit-box-shadow:0px 1px 1px #d5d5d5;
}
.box04 p{margin-bottom:10px;}

.border_gray{
	border:solid 2px #ccc;
	padding:25px 25px 5px 25px;
	border-radius: 10px;      
	-webkit-border-radius: 10px;  
	-moz-border-radius: 10px;
}

/* ------------------------------------------------------------- */
/* 3: Heading */
/* ------------------------------------------------------------- */
h1{ font-size:290%; line-height:1em;}
h1 span{ font-size:70%; font-style:italic;}
h2{
	font-size:150%;
	margin:5px 0 25px 0;
	line-height:1.2em;}

.box01 p.subtitle{
	font-size:90%;
	
}
.box01 h3{
	font-size:100%;
	margin:30px 0 10px 0;
	font-weight:bold;
}
.box02 h4 {
    background: url("../img/title_bg02.gif") no-repeat scroll 0 0 transparent;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e3e3e3), to(#fefefe));
	background: -moz-linear-gradient(#e3e3e3, #fefefe);
	background: linear-gradient(#e3e3e3, #fefefe);
	box-shadow: 0px 2px 1px #d5d5d5;
	-moz-box-shadow:0px 2px 1px #d5d5d5;
	-webkit-box-shadow:0px 2px 1px #d5d5d5;
	border-radius: 3px;      
	-webkit-border-radius: 3px;  
	-moz-border-radius: 3px;
    font-size: 14px;
    /*height: 29px;*/
    line-height: 1.4em;
    margin-bottom: 13px;
    padding: 5px 10px;
/*    padding: 3px 10px;*/
	font-weight:bold;
	margin-top:20px;
}
.box02 h3 {
    border-left: 3px solid #999999;
    font-size: 140%;
    line-height: 1.4em;
    margin-bottom: 15px;
    padding: 20px 0 5px 14px;
	font-weight:bold;
}

.box02 .col_2 h4{
    background: url("../img/title_bg01.gif") no-repeat scroll 0 0 transparent;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e3e3e3), to(#fefefe));
	background: -moz-linear-gradient(#e3e3e3, #fefefe);
	background: linear-gradient(#e3e3e3, #fefefe);
	text-align:left;
	}

#support .box02 h4{
	text-align:left;
	margin-bottom:0;
	border-radius: 3px 3px 0 0;
	/*height:25px;*/
}
h5 {font-weight:bold;}
#support h5 {
	border-bottom:solid 1px #829d9c;
	border-left:solid 6px #829d9c;
	font-weight:bold;
	padding:4px 10px;
	margin:10px 0 15px 0;
	font-size:95%;
}
#support h6 {
    color: #507776;
    font-weight: bold;
	margin:10px 0 ; 
	font-size:80%;
	background:url(../img/dia2.gif) no-repeat left center;
	padding-left:15px;
}
.icon_dia{
	background:url(../img/dia.gif) no-repeat left center;
	padding-left:15px;
	margin-bottom:15px;
}


/* ------------------------------------------------------------- */
/* 4: Link */
/* ------------------------------------------------------------- */
.anchor{margin:5px 0;}
.anchor a {
	text-decoration:none;
	background: url(../img/arr_down.gif) no-repeat left center;
	padding-left:15px;
	margin-right:15px;
}

/* ------------------------------------------------------------- */
/* 5: txt */
/* ------------------------------------------------------------- */

.tx04 {
    color: #507776;
    font-weight: bold;
	margin:10px 0 ; 
	font-size:95%;
	font-size:100%;
}
.tx05 {
    color: #B91440;
    font-weight: bold;
}
.tx07 {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
	margin-bottom:1em;
}

/* ------------------------------------------------------------- */
/* 6: column */
/* ------------------------------------------------------------- */
.column{width:100%; text-align:left;}
.column:after{content: ""; display: block; clear:both;}
.column_inner {	float:left; margin-bottom:15px;}
.col_2 .column_inner{width:49%; margin-right:0.5%;}
.column_inner.column_last { width:48.5%; float:right; margin-right:0;}
.col_3 .column_inner{width:32%; margin-right:1%;}
.col_4 .column_inner{width:23%; margin-right:1%;}
.col_5 .column_inner{width:19%; margin-right:1%;}
.column_inner span{	display:block; margin:5px 0;}
.column_inner img {
	margin:0 10px 10px 0;

}

/* ------------------------------------------------------------- */
/* 7: max-width:920px*/
/* ------------------------------------------------------------- */
	
@media only screen and (max-width:920px) {
.column_inner img{
	max-width: 100%;
	height:auto;
}
.column_inner, .col_2 .column_inner,
.col_2 .column_inner.col_left, .col_2 .column_inner.col_right,
.col_2 .column_inner.col_left1, .col_2 .column_inner.col_right1,
.col_2 .column_inner.col_left2, .col_2 .column_inner.col_right2,
.col_2 .column_inner.col_left3, .col_2 .column_inner.col_right3,
.col_3 .column_inner,
.col_4 .column_inner, .col_5 .column_inner {	
	float:none;
	width:100%;
	clear:both;
}
.box_left, .box_right{
	width:100%;
	float:none;
} 
.box_right{
	text-align:center;
	/*position:relative;
	top:0;*/
	margin-top:20px;
}
h1 { margin-top:20px;}
h1 img{
	 max-width:100%;
	 margin-top:15px;
}
#content{
	width:95%;
}
img.icon_app{
	position:relative;
	top:-46px;
	left:0;
	margin:0 2%;
}
.box_right img{
	max-width:50%;
	height:auto;
}
.box_right img.icon_app{
	max-width:30%;
	height:auto;
}
p{overflow: visible;}
#support .box_right{
	position: relative;
	right:0;
	top:0px;	
}

}
/* ------------------------------------------------------------- */
/* 8: Smart Phone / max-width 640px */
/* ------------------------------------------------------------- */
		
@media only screen and (max-width:640px) {
.box_right{text-align:center;}
.box02 h3 {	font-size:100%;}
.box06{background:#fff;	padding:5% 5% 4% 5%;}
.anchor a {	display:block; margin:15px 0;}
.anchor {margin-bottom:20px;}
#support .box01{padding-top:3%;}
h2{	font-size:100%;}
.column_inner img{text-align:center;}
}

/* ------------------------------------------------------------- */
/* 9: RETINA Display */
/* ------------------------------------------------------------- */
/*----- Logo -----*/

/*@media only screen and (-webkit-min-device-pixel-ratio : 2),only screen and (min-device-pixel-ratio : 2){*/
@media only screen and (min-device-pixel-ratio : 2){

.pecw_logo {
	padding:0;
	border: none;
	vertical-align:top;
	background:url(/common/img/sp/header/pioneer_logo.gif) no-repeat left center;
	-webkit-background-size:110px 16px;
	background-size:110px 16px;
	width:110px;
	height:16px;
	}
.pecw_logo img {
	white-space:nowrap;
	overflow:hidden;
	text-indent:100%;
	width:0;
	height:0;
}
}