@charset "UTF-8";



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

	product detail

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

#wrapper {

	margin-bottom:35px;

}



/* nav area */

#localHeader, #localFooter {

	height: 7px;

}

#localHeader {

	background: url(../img/localNavi_header.gif) #F4F4F4 no-repeat bottom ;

	background: url(../img/localNavi_header.gif) no-repeat bottom ;

}

#localFooter {

	background: url(../img/localNavi_footer.gif) #F4F4F4 no-repeat bottom ;

	background: url(../img/localNavi_footer.gif) no-repeat top ;

}



#localNavi {

	width:314px;

	float:left;

	margin-right:12px;

}

#localContents {

	background: url(../img/localNavi_content.gif) repeat-y;

}

#localBody {

	padding-right: 12px;

	padding-left: 12px;

	background: url(../img/localNavi_body.gif) no-repeat bottom;

	padding-top: 6px;

}

#localBody p, #localBody a {

	font-size: 92%;

	line-height: 1.3;

	cursor: pointer;

}



.lineTop {

	border-top: 1px solid #dddddd;

	display: block;

	height: 30px;

	padding-top: 3px;

	padding-left: 5px;

	padding-bottom: 3px;

}

@media screen and (max-width: 480px) {

	#localHeader, #localFooter {

		display: none;

	}

	#localBody, #localContents {

		background: none;

	}

	#localNavi #localBody a {

		_display: none;

	}

	#localBody>a {

		display: none;

	}

}



/* contents area */

#slide {

	width:664px;

	position:relative;

	overflow: hidden;

	padding: 0 5px;

}

.catch {

	font-family:  "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;

	color:#95a379;

	margin: 5px 0.5em 7px 10px;

	display: block;

	font-size: 123%;

	line-height: 1.2;

	font-weight: bold;

}

.prod_desc {

	margin: 0 0.5em 30px 10px;

}

@media screen and (max-width: 480px) {

	#slide {

		width: 98%;

		position:relative;

		overflow: hidden;

		padding: 0 5px;

		padding: 0 1%;

	}

}



.heightLineParent {

	margin-bottom: 15px;

}

.heightLineParent div:first-child {

	background: url(../img/height_line.gif) repeat-y right top;

}



.categoryBlock {

	margin-bottom:20px;

}

.categoryBlock h3 {

	margin-bottom: 15px;

}



div.noMobile {

	display: block;

}



@media screen and (max-width: 480px) {

	.categoryBlock {

		margin-bottom: 0;

	}

	.categoryBlock h3 {

		margin-bottom: .923em;

	}

	div.noMobile {

		display: none !important;

	}

}



/* contents category */

#key_visual_box {

    position:relative;

	width: 100%;

	text-align: center;

	vertical-align: middle;

}

#key_visual {

	width: 100%;

	text-align: center;

	vertical-align: middle;

}

@media screen and (max-width: 480px) {

	#key_visual img {

		/*width="622" height="461"*/

		width: 100%;

		height: auto;

	}

}



#product_top_banner {

    position:absolute;

    top:380px;

    left:400px;

	width: 200px;

	height: 60px;

	text-align: center;

	vertical-align: middle;

}

@media screen and (max-width: 480px) {

	#product_top_banner {

		position:absolute;

        top:80%;

        left:62%;

		width: 30%;

		height: auto;

	}

	#product_top_banner img {

		width: 100%;

		height: auto;

	}

}



.keyFeature_box {

	width:100%;	

}

.column {

	width:265px;

	padding-right:15px;

	float:left;

	margin-left:15px;

}



.column ul li,.box ul li {

	list-style: url(../img/disc_img.gif) outside;

	margin-left:20px;

	padding-bottom:13px;

	line-height:1.4;

	font-size:92%;

}



.box,.pdf_column,.pdf_list {

  	padding: 10px;

}



/* brochure */

.brochure_box {

	float: left;

	width: 310px;

	/*display: block;*/

}

.brochure_box div {

	float: left;

	width: 149px;

	overflow: hidden;

	text-align: center;

}



.readerDl {

	padding-top:10px;

	background: url(../img/width_line.gif) repeat-x;

	margin-bottom: 20px;

}

.leadtxt {

	font-size: 92%;

	line-height: 1.3;

}



.pdf_mark  a  {

	color: #95A379;

}

.pdf_mark span.fS {

	font-weight: normal;

}

.col  {

	width: 310px;

	display:block;

}

.col_r {

	float: right;

	width: 151px;

	padding-top: 10px;

	padding-left: 10px;

}

.col2 {

	width: 455px;

	display: block;

}



.ancorlink {

	font-size: 108%;

	line-height: 1.3;

	font-weight: bold;

	color: #95A379;

	background-image: url(../products/common/icon_arrow_ancor.gif);

	background-repeat: no-repeat;

	background-position: left top;

	padding-left: 22px;

	min-height:20px;

	_height:20px;

	height:auto !important;

	padding-top: 3px;

}

.column  h5   {

	font-size: 105%;

	color: #95a379;

	padding-bottom: 6px;

	padding-left: 8px;

	font-family: "Times New Roman", Times, serif;

	font-family:  "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;

	font-weight: bold;

}



/* content specific */

@media screen and (max-width: 480px) {

	.wt10 {

		width: 10%;

		height: auto;

	}

	.wt20 {

		width: 20%;

		height: auto;

	}

	.wt30 {

		width: 30%;

		height: auto;

	}

	.wt45 {

		width: 45%;

		height: auto;

	}

	.wt100 {

		width: 100%;

		height: auto;

	}

	#intruction-video iframe, 

	.img100 {

		width: 100%;

		height: auto;

	}

	.hscroll {

		-webkit-overflow-scrolling:touch;

		overflow:auto;

	}

	#recommend p {

		margin-left: 2%;

	}

	#shopping table {

		width: 80%;

	}

	#shopping table img {

		width: 90%;

		height: auto;

	}

}



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

	local navi backgroud (mockup)

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

.navi_bg {

	background: url(../img/anchor_mark.png) no-repeat;

	font-size: 125%;

	font-weight: 400;

	padding-top: 6px;

	/*cursor: pointer;*/

}

.navi_bg_blue {

	background: url(../img/anchor_mark_blue.png) no-repeat;

	/*_background: url(../img/anchor_mark_blue_ie6.png) no-repeat;*/

}

.navi_bg_yellow {

	background: url(../img/anchor_mark_yellow.png) no-repeat;

	/*_background: url(../img/anchor_mark_yellow_ie6.png) no-repeat;*/

}

.navi_bg_red {

	background: url(../img/anchor_mark_red.png) no-repeat;

	_background: url(../img/anchor_mark_red_ie6.png) no-repeat;

}

.navi_bg span {

	margin-left: 26px;

	margin-top: 4px;

	display: block;

	letter-spacing: 0.05em;

	font-weight: bold;

	font-size: 13px;

	color: #666666;

}

.navi_bg span small{

	font-size: 70%;

	letter-spacing: normal;

}



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

	H4 backgroud (mockup3)

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



.h4bg {

	background: url(../img/subtitle_bg.gif) no-repeat;

	font-size: 120%;

	font-weight: 600;

}

.h4bg span {

	display: block;

	margin-left: 12px;

	padding-top: 6px;

	color: #9CA982;

}



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

	Carousel

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

.slide_line {

    border-top: 1px solid #DDDDDD;

		margin-top: 36px;

    margin-bottom: 18px;

    margin-left: auto;

    margin-right: auto;

		width:592px;

}

#slide_thums {

	width:607px;

	padding-bottom:2px;

	padding-left: 14px;

}



#slide_thums li {

	display:block;

	float: left;

	padding-right: 9px;

	padding-bottom: 9px;

}

#slide_thums li img {

	height: 113px;

	width: 112px;

	cursor:pointer;

}

#image-library .dl_btn,

#image-library #pageTop_btn {

	display: block;

}

@media screen and (max-width: 480px) {

	/*ul#mycarousel li {

		width: 100%;

		height: auto;

		float: left;

	}*/

	ul#mycarousel li {

/*		width: 100%;

		width: 98%;

		width: 408px;

		height: auto;*/

	}

	ul#mycarousel li > img {

		width: 103%;

		height: auto;

	}

	#image-library .dl_btn,

	#image-library #pageTop_btn {

		display: none;

	}



	.slide_line {

		margin-top: 5px;

		margin-bottom: 3px;

		border: 0;

	}	

	#slide_thums {

		width: 100%;

		padding: 0;

	}

	#slide_thums li {

		padding-right: 5px;

		padding-bottom: 5px;

	}

	#slide_thums li img {

		width: 10%;

		height: auto;

		width: 56.5px;

		height: 56px;

	}

}



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

	Color Variation

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

#table_overlay {

	margin-bottom: 15px;

}

#table_overlay table {

	width: 644px;

	border-collapse: collapse;

}

#table_overlay table tr {

	height: 21px;

}



#spec_table {

	position: relative;

	width: 100%;

}

#spec_table .spec_table th, 

#spec_table .spec_table td {

	border-bottom: solid 1px;

}



#overlay_table {

	position: absolute;

	top: 0;

	left: 0;

}

#overlay_table .overlay_table th, 

#overlay_table .overlay_table td {

	_height: 22px;

}

#overlay_table a {

	display:block;

	width:100%;

	height:100%;

}

#overlay_table a:hover {

	background-color:#ffcccc;

	filter:alpha(opacity=35);

	-moz-opacity:0.35;

	-khtml-opacity: 0.35;

	opacity:0.35;

}



#lineup > div {

	margin-left: 20px;

}

#lineup h4 {

	margin-top: 10px;

}

#lineup .color_pattern {

	width: 110px;

	width: 60px;

	float: left;

}

#lineup div.cp_legend {

	height: 60px;

	/*width: 20px;*/

	text-align: right;

	margin-right: 5px;

	margin: 2px 5px;

}

#lineup div.cp_legend p {

	height: 60px;

}



#lineup div.cp_desc {

	height: 60px;

	/*width: 20px;*/

	text-align: left;

	margin-right: 5px;

	margin: 2px 5px;

}

#lineup div.cp_desc p {

	height: 60px;

}



#lineup .color_pattern img {

	margin: 2px 0;

}

#lineup .color_pattern span {

	padding: 2px 5px;

	text-align: center;

}



#lineup .divider {

}



@media screen and (max-width: 480px) {

	#table_overlay {

		margin-bottom: 15px;

	}

	#table_overlay table {

		width: 644px;

		width: 100%;

		border-collapse: collapse;

	}

	#table_overlay table tr {

		height: 2em;

	}

	

	#spec_table {

/*		position: relative;

		width: 100%;*/

	}

	#spec_table .spec_table th, 

	#spec_table .spec_table td {

		border-bottom: solid 1px;

	}

	

	/*#overlay_table, #lineup h4, #lineup div.divider {*/

	/*#overlay_table, #lineup div[id^="cp_"] {*/

	#overlay_table {

		display: none;

	}

	

}



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

	Product List

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

.product_thumb {

	float: left;

	width: 190px;

	margin-top: 20px;

	text-align: center;



	color: #939393;

	font-weight: bold;

}

@media screen and (max-width: 480px) {

	.product_thumb {

		margin: 0 0 10px 0;

		width: 156px;

		height: 230px;

	}

	.product_thumb img {

		width: 156px;

		height: auto;

	}

}


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

	Block Definition

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

.ColumnBlock {
	
	Width:100%;
	Clear:both;
	margin-bottom:10px;
	
}

.MaxSize {
	
	Width:100%;
	Height:auto;
	float:left;
	list-style:none;
	
}

.FullSize {
	
	Width:622px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px;
	
}

.FullSizeText {
	
	Width:622px;
	Height:auto;
	float:left;
	list-style:none;
	margin-right:5px;
	margin-bottom:5px;
	margin-left:5px;
	
}

.FiveColTable {
	
    width:640px;
    border:1px #E3E3E3 solid;
    border-collapse:collapse;
    border-spacing:0;
	margin-left:10px;
	
}

.FiveColTable th {
	
    width:100px;
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
/*    background: #F5F5F5;  */
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	
}

.FiveColTable td {
	
    width:100px;
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	
}

.FourColTable {
	
    width:640px;
    border:1px #E3E3E3 solid;
    border-collapse:collapse;
    border-spacing:0;
	margin-left:10px;
	
}

.FourColTable th {
	
    width:150px;
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
/*    background: #F5F5F5;  */
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	
}

.FourColTable td {
	
    width:150px;
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	
}

.ThreeColTable {
	
    width:640px;
    border:1px #E3E3E3 solid;
    border-collapse:collapse;
    border-spacing:0;
	margin-left:10px;
	
}

.ThreeColTable th {
	
    width:203px;
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
/*    background: #F5F5F5;  */
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	
}

.ThreeColTable td {
	
    width:203px;
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	
}

.HalfSize {
	
	Width:300px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px 15px 5px 5px;
	
}

.OneThird {
	
	Width:200px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px;
	
}

.Quarter {
	
	Width:150px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px;
	
}

.TwoThirds {
	
	Width:400px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px;
	
}

.ThreeQuarters {
	
	Width:450px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px;
	
}

.OneEighth {
	
	Width:70px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px 2px 5px 2px;
	
}

.OneTenth {
	
	Width:60px;
	Height:auto;
	float:left;
	list-style:none;
	margin:5px 2px 5px 2px;
	
}

.MaxSize h4, p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.FullSize h4, p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.FullSizeText h4 {
	
	margin-bottom:5px;
	
}

.FullSizeText p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.HalfSize h4, p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.OneThird h4, p{
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.Quarter h4, p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.TwoThirds h4, p{
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.ThreeQuarters h4, p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.OneEighth h4, p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

.OneTenth h4, p {
	
	margin-top:5px;
	margin-bottom:5px;
	
}

@media screen and (max-width: 480px) {

.MaxSize {
	
	Width:100%;
	Height:auto;
	float:left;
	list-style:none;
	
}

.FullSize {
	
	Width:98%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1%;
	
}

.FullSizeText {
	
	Width:98%;
	Height:auto;
	float:left;
	list-style:none;
	margin-right:1%;
	margin-bottom:1%;
	margin-left:1%;
	
}

.FiveColTable {
	
    width:98%;
    border:1px #E3E3E3 solid;
    border-collapse:collapse;
    border-spacing:0;
	
}

.FiveColTable th {
	
    width:19%;
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
/*    background: #F5F5F5;  */
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	
}

.FiveColTable td {
	
    width:19%;
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	
}

.FourColTable {
	
    width:98%;
    border:1px #E3E3E3 solid;
    border-collapse:collapse;
    border-spacing:0;
	
}

.FourColTable th {
	
    width:24%;
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
/*    background: #F5F5F5;  */
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	
}

.FourColTable td {
	
    width:24%;
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	
}

.ThreeColTable {
	
    width:98%;
    border:1px #E3E3E3 solid;
    border-collapse:collapse;
    border-spacing:0;
	
}

.ThreeColTable th {
	
    width:32%;
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
/*    background: #F5F5F5;  */
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	
}

.ThreeColTable td {
	
    width:32%;
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	
}

.HalfSize {
	
	Width:46%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1% 3% 1% 1%;
	
}

.OneThird {
	
	Width:31%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1%;
	
}

.Quarter {
	
	Width:23%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1%;
	
}

.TwoThirds {
	
	Width:62%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1%;
	
}

.ThreeQuarters {
	
	Width:65%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1%;
	
}

.OneEighth {
	
	Width:23%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1%;
	
}

.OneTenth {
	
	Width:18%;
	Height:auto;
	float:left;
	list-style:none;
	margin:1%;
	
}

}

hr {
	
	border-width:1px 0px 0px 0px;
	border-style:dotted;
	border-color:#aaa;
	height:1px;
	
}

#fopo_area {
	
	position:relative;
	width:622px;
	height:352px;
	
}

#fopo_area_shape {
	
	width:622px;
	height:352px;
	
}

#fopo_area01 {
	
	position:absolute;
    top:85px;
    left:413px;
	width: 60px;
	height: 60px;
	
}

#fopo_area02 {
	
	position:absolute;
    top:105px;
    left:217px;
	width: 60px;
	height: 60px;
	
}

#fopo_area03 {
	
	position:absolute;
    top:120px;
    left:277px;
	width: 60px;
	height: 60px;
		
}

#fopo_area04 {
	
	position:absolute;
    top:115px;
    left:354px;
	width: 60px;
	height: 60px;
		
}

#fms_area {
	
	position:absolute;
    top:280px;
    left:440px;
	width: 180px;
	height: 60px;
		
}

#fopo_area_btn {
	
	position:absolute;
    top:280px;
    left:30px;
		
}

.radius {
	
    width:640px;
    border:1px solid #ccc;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	
}

@media screen and (max-width: 480px) {

#fopo_area {
	
	position:relative;
	width:98%;
	height:auto;
	
}

#fopo_area_shape {
	
	width:98%;
	height:auto;
		
}

#fopo_area01 {
	
	position:absolute;
    top:25%;
    left:66%;
	width: 60px;
	height: 60px;
	
}

#fopo_area01 img {
	
	width: 50%;
	height: 50%;
	
}

#fopo_area02 {
	
	position:absolute;
    top:30%;
    left:35%;
	width: 60px;
	height: 60px;
	
}

#fopo_area02 img {
	
	width: 50%;
	height: 50%;
	
}

#fopo_area03 {
	
	position:absolute;
    top:34%;
    left:45%;
	width: 60px;
	height: 60px;
		
}

#fopo_area03 img {
	
	width: 50%;
	height: 50%;
	
}

#fopo_area04 {
	
	position:absolute;
    top:32%;
    left:56%;
	width: 60px;
	height: 60px;
		
}

#fopo_area04 img {
	
	width: 50%;
	height: 50%;
	
}

#fms_area {
	
	position:absolute;
    top:80%;
    left:70%;
	width: 180px;
	height: 60px;
		
}

#fms_area img {
	
	width: 50%;
	height: 50%;
	
}

#fopo_area_btn {
	
	position:absolute;
    top:85%;
    left:2%;
		
}

.radius {
	
    width:98%;
    border:1px solid #ccc;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	
}

}