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

/* TJP-E PRODUCTS CSS（日本語版とスタイルが違うので注意） */

/* リセットしてしまった検索窓のサイズ調整 */
input{
	padding:5px 12px;
	}
/* 全体の囲い */
#wrapper{ 
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; /* フォント指定 */
	margin:0 auto;
	width:810px;
	font-size:14px;
	}
	
/* 見出し */
/* （今後サイト改装でh1h2を使うことがあるかもしれないので未設定にしてあります） */
h1{
	}
h2{
	}
h3 {
	font-size:18px;
	font-weight:bold;
	text-align: left;
	margin:30px 0 0 30px;
	padding-left:8px;
	border-left: 6px solid #009245;
	}
h4{
	text-align: left;
	font-size:15px;
	font-weight:bold;
	color:#009245;
	margin:30px 0 0 45px;
	padding-left:5px;
	}

/*
========================================================
メニュー部分共通
========================================================
*/

/* メインイメージ */
.main-area{
	margin:10px auto 0;
	}
.main-area img{
	vertical-align:bottom;
	}

/* テキスト */
.text-area{
	text-align:left;
	font-size:14px;
	line-height:1.4;
	margin:15px 55px 0;
	}
.text-area p{
	padding-bottom:15px;
	}

/* 画像 */
.img-area img{
	margin:10px auto 0;
	}
/* 画像の下のキャプション */
.img-area .caption{
	padding-top:10px;
	}

/* 中央揃えのお知らせテキスト（欠品など） */
.attention-area{
	font-weight:bold;
	font-size:15px;
	margin:15px auto 0 ;
	}
.attention-area p{
	line-height:1.2;
	}

/* スペックのボタン（大） */
.spec-area-main{
	margin:15px 0 0 28px;
	text-align:left;
	height:105px; 
	}
/* スペックのボタン（小） */
.spec-area{
	margin:15px 0 0 26px;
	text-align:left;
	height:125px;
	}
.spec-area img{
	margin:0 3px 0 2px;
	}


/* ラインナップ･ユーザーズボイスのボタン */
.btn-area{
	list-style-type: none;
	width:810px;
	padding-left:32px;
	margin-top:30px;
	overflow: hidden; /*floatの解除*/
	position: relative; /*DWで正常にプレビューできるようになる*/
	zoom:1; /*IE6でレイアウト崩れを防ぐ*/
	}
.btn-area-center{
	padding-left:220px;
	}
.btn-area li{
	display:block;
	float:left;
	width:370px;
	}
.btn-area a{
	display:block;
	position: relative; /* 子要素にabsoluteを使うので、親要素にこれを入れる */ 
	font-size:16px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align: center;
	background:#009844;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009844), color-stop(50%,#009844), color-stop(51%,#007531), color-stop(100%,#007531)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #009844 0%,#009844 50%,#007531 51%,#007531 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top, #009844 0%,#009844 50%,#007531 51%,#007531 100%); /* IE10+ */
	background: linear-gradient(to bottom, #009844 0%,#009844 50%,#007531 51%,#007531 100%); /* W3C */
	margin:0 10px;
	padding:15px 0;
	border-radius: 15px;  /* CSS3草案 */
	-webkit-border-radius: 15px;  /* Safari,Google Chrome用 */
	-moz-border-radius: 15px;/* Firefox用 */
	}
.btn-area a:hover{
	background: #007531;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#007531), color-stop(50%,#007531), color-stop(51%,#009844), color-stop(100%,#009844)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #007531 0%,#007531 50%,#009844 51%,#009844 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top, #007531 0%,#007531 50%,#009844 51%,#009844 100%); /* IE10+ */
	background: linear-gradient(to bottom, #007531 0%,#007531 50%,#009844 51%,#009844 100%); /* W3C */
	}
/* ボタン左の三角マーク */
.btn-area a:before{
	display: block; 
	content: "";   /* これがないと表示されません */  
	position: absolute; 
	top: 50%; 
	left: 20px; 
	width: 0; 
	height: 0; 
	margin-top: -8px;  
	border: 8px solid transparent;   /* 左ボーダー以外は非表示 */  
	border-left: 8px solid #fff;    /* 左ボーダーで三角形を作る */  
	}

/* スペック一覧メニューと、スペック詳細の間の矢印 */
.arrow-spec{
	background:#DEF1E6 url(/products/img/spec/img_arrow_spec.png) no-repeat center 45px;
	color:#009245;
	font-weight:bold;
	font-size:18px;
	padding:15px 0 55px;
	margin:70px auto 0;
	}




/*
========================================================
各スペック共通
========================================================
*/

/* スペックの見出し */
.tit-spec{
	margin:40px auto 0;
	} 
p.staz-only{
	color:#f00;
	font-size:12px;
	font-weight:bold;
	text-align:right;
	margin-top:-18px;
	padding-right:35px; 
	} 

/* キャッチコピー */
.copy{
	font-size:15px;
	font-weight:bold;
	line-height:1.4;
	margin:10px 0 20px;
	}
.emphasis{
	color:#009245;
	font-weight:bold;
	}

/* 写真とテキスト横並び */
.detail-whole-area{
	_zoom: 1;
	overflow : hidden;
	width:750px;
	margin:15px 0 30px 50px;
	text-align:left;
	} 

.detail-img-area{
	float:left;
	width:260px;
	} 
.detail-txt-area{
	float:left;
	margin-left:30px;
	width:400px;
	font-size:14px;
	line-height:1.5;
	} 


/* 注釈文を付けて文字を赤くしたいときに */
.addition{
	color:#f00;
	line-height:1.3;
	padding-bottom:2px;
	}	
/* 上に隙間を空けたいとき */
.top-space{
	margin-top:10px;
	}
/* 用語の解説・緑枠（キャンバーの説明など） */
.commentary{
	margin:10px 65px 0;
	border: 2px solid #009245;
	padding:15px 30px 15px 30px;
	}  
.commentary p{
	line-height:1.5;
	font-size:12px;
	text-align:left;
	}
/* 横並びの写真＋キャプション（画像にwidthを指定すること） */
.listfield {
	margin-top:30px;
	position:relative;
	overflow:hidden;
	}
.listfield ul {
	float: left;
	position: relative;
	left: 50%;
	}
.listfield li {
	position: relative;
	left: -50%;
	display: table-cell;
	vertical-align: middle;
	float: left;
	padding:0 15px;
	font-size:14px;
	}
.listfield li p{
	padding:3px 0 15px;
	}

 

/*
========================================================
FLA
========================================================
*/

/* HBS */
.bumprubber-area{
	width:750px;
	min-height:105px;
	height:105px;
	background:url(http://www.tein.co.jp/products/img/fla/bg_bumprubber.png) no-repeat center top ;  /* TJP-Eでも同じ画像を使うため絶対指定 */
	margin:30px auto 40px;
	border:solid 2px #009245;
	}
.bumprubber-text{
	font-size:12px;
	width:320px;
	text-align:left;
	line-height:1.5;
	margin:15px auto 0 125px;
	}
	
.ms-area{
	width:746px;
	margin:30px auto 40px;
	border:solid 2px #333;
	}	
.ms-area p{
	margin: 15px auto 5px;
	}	
	
/* マウント付きページ・写真エリア */
.mount{
	_zoom: 1;
	overflow : hidden;
	width:500px;
	padding:20px 0 20px 120px;
	text-align:center;
} 
.mount dl{
	width : 200px;
	background-color:#DEF1E6;
	margin-right : 12px;
	float : left;
} 
.mount dt img{
	display : block;
	width:100%;
} 
.mount dd{
	width : 200px;
	padding : 10px;
	margin-left:-10px;
	text-align:center;
	font-size:12px;
}

/* EDFCページの特徴 */
.edfc-txt-area{
	font-size:14px;
	float:left;
	margin-left:30px;
	width:400px;
	line-height:1.6;
} 
.edfc-featurea{
	line-height:3.4;
	font-size:12px;
	padding:5px 8px;
	margin:0 5px 0 0;
	border:2px solid #009245;
	border-radius: 5px;
	-webkit-border-radius: 5px;  
	-moz-border-radius: 5px; 
}


/*
========================================================
EAP
========================================================
*/

/* 対応アイテム一覧エリア */
.compatible-product{
	background-color:#DEEDD1;
	width:720px;
	text-align:left;
	margin:10px auto 15px;
	padding:25px 0 12px 25px;
	border-radius: 15px;
	-webkit-border-radius: 15px;  
	-moz-border-radius: 15px; 
	}
.compatible-product p{
	margin-bottom:8px;
	font-size:12px; /* TJP-E only */
	}
.compatible-product p.compatible-product-title{
	font-size:14px; /* TJP-E only */
	}

/* 緑の角丸ボタン（小） */
.compatible-product a{
	display: inline-block;
	position: relative;  /* 子要素にabsoluteを使うときは、親要素にこれを入れる */  
	padding:8px 10px 8px 20px;
	margin: 0 15px 8px 0;
	color:#FFF;
	font-weight:bold;
	background-color:#009245;
	border-radius: 5px;
	-webkit-border-radius: 5px;  
	-moz-border-radius: 5px; 
	}
.compatible-product a:hover{
	color:#ccc;
	background-color:#007531;
	}
/* ボタン左の三角 */
.compatible-product a:before{
	display: block; 
	content: "";    /* これがないと表示されません */  
	position: absolute; 
	top: 50%; 
	left: 10px; 
	width: 0; 
	height: 0; 
	margin-top: -5px;  
	border: 5px solid transparent;
	border-left: 5px solid #fff;
	}


/* EAP価格表・シリーズ機能一覧リンクボタン */
.eap-btn-area img{
	padding:0 2px 10px;
	} 
/* GPSキット装着により可能となる表示部分 */
.gps_kit{
	margin:0 50px 40px;
	border: 2px solid #009245;
	padding:30px 15px 15px 30px;
	border-radius: 15px;
	-webkit-border-radius: 15px;  
	-moz-border-radius: 15px; 
	}  

/* 価格表テーブル */
.price-list {
	border-collapse: collapse;
	margin:20px auto 40px;
	border-top:1px solid #999999;
	border-left:1px solid #999999;
	width:700px;
	}
.price-list td{
	border-bottom:1px solid #999999;
	border-right:1px solid #999999;
	text-align:center;
	background-color:#ffffff;
	padding:5px;
	}
.price-list td img{
	 margin:;
	}
.price-list th{
	border-bottom:1px solid #999999;
	border-right:1px solid #999999;
	text-align:center;
	background-color:#DEEDD1;
	padding:5px 0;
	}
.price-list td.biko{
	text-align:left;
	}


/* EDFCスペック・機能一覧テーブル（旧ページの直書きCSSから移植） */
.tb_spec{
	border-top:2px solid #333; 
	border-left:2px solid #333;
	color:#333;
	width:750px;
	margin:30px auto 0;
	}
.tb_spec td{
	text-align:center;
	font-size:11px;
	padding:3px 3px;
	}
.tb_spec td.title{
	background-color:#ccc;
	font-weight:bold;
	font-size:13px;
	text-align:left;
	border-top:2px solid #333;
	border-bottom:2px solid #333;
	border-right:2px solid #333;
	}
.tb_spec td.komoku{
	text-align:left;
	border-top:1px solid #333; 
	border-right:2px solid #333;
	}
.tb_spec td.komoku0{
	border-top:0px solid #333; 
	border-right:1px solid #333;
	}
.tb_spec td.komoku2{
	text-align:left;
	border-top:1px solid #333; 
	border-right:2px solid #333;
	}
.tb_spec td.komoku3{
	text-align:left;
	border-top:1px solid #333; 
	border-right:0px solid #333;
	}
.tb_spec td.pink{
	background-color:#ffcccc;
	color:#000;
	border-top:1px solid #333; 
	border-right:1px solid #333;
	}
.tb_spec td.pink2{
	background-color:#FFFFFF;
	color:#000;
	border-top:1px solid #333; 
	border-right:2px solid #333;
	}
.tb_spec td.white{
	background-color:#FFFFFF;
	color:#000;
	border-top:1px solid #333; 
	border-right:2px solid #333;
	}
.tb_spec td.green{
	background-color:#DEEDD1;
	color:#000;
	border-top:1px solid #333; 
	border-right:1px solid #333;
	}
.tb_spec td.green2{
	background-color::#FFFFFF;
	color:#000;
	border-top:1px solid #333; 
	border-right:2px solid #333;
	}
.tb_spec td.yellow{
	background-color:#ffffcc;
	color:#000;
	border-top:1px solid #333; 
	border-right:2px solid #333;
	}
.tb_spec td.maru {
	font-size:1.5em;
	}

/*新価格表示注記(2016/11/30追加)*/
.flz_newPrice {
	margin: 15px 28px 0; 
	height: 50px;
}
.flz_newPrice_text {
	float:left; 
	width: 360px; 
	font-size: 18px; 
	padding-top: 3px;
}
.flz_newPrice_button {
	float:left; 
	width: 350px; 
	background: #ED1C24; 
	padding-top: 5.5px; 
	padding-bottom: 5.5px; 
	margin-left: 10px; 
	border-radius: 7px;
}
.srch_link a {
	color: #fff;
}
.srch_link p:hover {
	background: #E38A75;
}
.flz_newPrice_text strong {
	color: #f00;
	font-weight: bold;
}
.srch_link p {
	position: relative;
}
.srch_link p::before {
	display: block; 
	content: "";   /* これがないと表示されません */  
	position: absolute; 
	top: 50%; 
	left: 70px; 
	width: 0; 
	height: 0; 
	margin-top: -8px;  
	border: 8px solid transparent;   /* 左ボーダー以外は非表示 */  
	border-left: 8px solid #fff;    /* 左ボーダーで三角形を作る */
}


/*
========================================================
六角テント 2016年8月追加
========================================================
*/
/* テントページの写真エリア */
.other-img-area{
	width:300px;
	}
.other-img-area p{
	margin-bottom:18px;
	}
.other-txt-area{
	width:360px;
	font-size:14px;
	}
.setlist{
	background-color:#DEEDD1;
	font-size:12px;
	margin-bottom:20px;
	padding:15px ;
	line-height:1.4;
	border-radius: 10px;
	-webkit-border-radius: 10px;  
	}
	
/* テントの価格部分（テーブル風定義リスト） */ 
.tent-price{
	width:100%;
	margin:8px 0;
	text-align:left;
	}
.tent-price dl{
	display:table;
	border:1px solid #ccc;
	border-style: none solid none solid;
	}
.tent-price dl:last-child{
	border-style:none solid solid solid;
	}
.tent-price dt{
	width:250px;
	display:table-cell;
	border-top:1px solid #ccc;
	padding:5px 0 5px 10px;
	background:#F5F5F5;
	}
.tent-price dd{
	width:110px;
	display:table-cell;
	vertical-align: middle;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	padding:5px 0 5px 15px;
	}
	
/*商品スペックの表・調整用*/
.tent-spec td{
	padding:0; 
	}
td.tent-spec-color{
	background-color:#DEEDD1;
	text-align:left;
	padding-left:40px;
	}







/*
========================================================
TJP-Eのみのスタイル
========================================================
*/

/* EDFCスペック・機能一覧下の注釈（TJP-Eのみ） */
.annotation{
	font-size:12px;
	text-align:left;
	margin:20px 55px 0;
	}
.annotation ul{
	list-style-type:disc;
	padding-left:1.5em;
	}
.check_mark{
	font-size:18px;
	font-weight:bold;
	color:#009245;
	}
p.tein-only{
	color:#f00;
	font-size:12px;
	font-weight:bold;
	text-align:right;
	padding-right:35px; 
	}