﻿@charset "utf-8";

/*===================================================
+全体構造

+枠
　-container
　-contents

+header ヘッダー

+globalnavi グローバルナビゲーション

+search 検索

+menu サイドメニュー
 -btn_cart

+main_images
 	flash

+item

+news

+footer フッター
　-copy right コピーライト
==================================================== */


/* 全体構造
---------------------------------------------------- */
* { 
	font-family: Verdana, Arial, sans-serif;
	font-size: 100%;
}
body,form,fieldset,p,div,pre,blockquote{
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6{
	margin: 0px; 
	padding: 0px; 
	font-weight: normal;
	font-size: 100%;
} 
ul,ol,li,dl,dt,dd,img {
	list-style: none;
	margin:0;
	padding:0;
	border:0;
}
img{
	display: inline;
}
br {
	margin:0;
	padding:0;
	border:0;
	letter-spacing:0; /* IE */
}
.clear {
	clear: both; 
	font-size: 1px; 
	line-height: 1px; 
	height: 1px;
}

.clearboth {
	clear: both; 
}

.clearfix:after {
  content: ".";  
  display: block;  
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*-*//*/
  height: auto;
  overflow: hidden;
  /**/
}

a:hover img{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}




/* リンク
---------------------------------------------------- */
a {
	color: #0087BF;
	text-decoration: none;
}
a:hover {
	color: #09C;
	/*text-decoration:underline;*/
}
/* body,container
---------------------------------------------------- */
body{
	text-align: center;
	color: #333;
	line-height: 1.4;
	background-color: #efefef;
	margin: 0px;
	padding: 0px;
}
/* 枠
---------------------------------------------------- */
#container{
	position:relative;
	width: 900px;
	font-size: 90%;
	text-align:left;
	background-color: #FFF;
	/*background: #FFF url(../img/container_bk.gif) repeat-y left top;*/
	margin:0 auto;
	padding: 0px;
}
#contents{
	width: 900px;
	margin: 0 0px;
	padding: 0px 10px 15px 10px;
	/*border-color: #e6e6e6;
	border-style: solid;
	border-width: 0 1px 1px 1px;*/
}
/* ヘッド
---------------------------------------------------- */

#header-wrapper {
	width: 100%;
	height: 364px;
	overflow: hidden;
	background-color:#FFF;
	background: url("../img/wrapper-bg.png") repeat-x left bottom;
	margin: 0px auto ;
	padding-bottom: 0px;
}


#rotator {
	width: 100%;
	height: 361px;
	/*background-color:#EFEFEF;*/
	background: url("https://x103.secure.ne.jp/~x103094/pansstore/img/bg/rotate.php") repeat-x center top;
	margin: 0px auto ;
	padding-bottom: 10px;
}


#header-wrapper-bgimg {
	width: 100%;
	height: 361px;
	/*background-color:#EFEFEF;*/
	background: url("../img/bg/rotate.php?img=bg-img-01.png") repeat-x center top;
	margin: 0px auto ;
	padding-bottom: 10px;
}

#header-innerwrapper,
#header-innerwrapper-top {
	width: 900px;
	margin: 0px auto;
}


#header{
	/*background: url(../img/header_contents.gif) no-repeat 40px bottom;*/
	width: 900px;
	height: 68px;
}


#about h2.logo a{
	display: block;
	width: 138px;
	height: 20px;
	text-indent: -9999px;
	text-decoration: none;
	background: url(../img/logo.gif) no-repeat left top;
	margin: 20px 0px 20px 10px;
}


.logo-top {
	float: left;
	width: 226px;
	height: 38px;
	}
.logo-top a{
	display: block;
	width: 226px;
	height: 38px;
	text-indent: -9999px;
	text-decoration: none;
	background: url(../img/logo_wh.png) no-repeat left top;
	margin-top: 20px;
}


#header h1{
	top: 0px;
	left: 54px;
	width: 200px;
	font-size: 80%;
}
#header h1.fix10{
	font-size: 10px;
}

#header_contents{
	position: relative;
	/*height: 170px;
	background: url(../img/header_.gif) no-repeat left top;*/
}

/* global_navi　グローバルナビゲーション
---------------------------------------------------- */
#global_navi{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 900px;
	color: #FFF;
}
#global_navi ul{
	display: block;
	float: right;
	/*border: 2px solid #FFF;*/
}
#global_navi li {
	float: left;
	display: block;
	text-align: left;
	/*background: url(../img/navi_bk_over2.gif) no-repeat left top;*/
}
#global_navi li a{
	height: 20px;
	color: #FFF;
	text-decoration: none;
	/*background: url(../img/navi_bk2.gif) no-repeat left top;*/
	overflow: hidden;
}
#global_navi li a:hover,
#global_navi li a.current{
	background: none;
	color: #ff9900;
}
#global_navi ul:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: ".";
}
#global_navi ul{
	height: 20px;
	/*\*//*/
	overflow: hidde;
	/**/
}
/*#global_navi li.cv{
	font-size: 90%;
}*/

/* search
---------------------------------------------------- */
#search{
	position: absolute;
	top: 26px;
	right: 54px;
}

/* about
---------------------------------------------------- */
#about{
	float: left;
	width: 300px;
	height: 270px;
	text-align: left;
	border: 4px solid #CCC;
	background-color: #FFF;
	/*border-color: #e6e6e6;
	border-style: solid;
	border-width: 4px 15px 4px 4px;*/
}
#about p{
	line-height: 1.2;
	font-size: 10px;
	margin: 10px 10px 5px 10px;
}

#about-title {
	 float: left;
	 width: 130px;
	 _width: 120px;
	 height: 12px;
	 overflow:hidden;
	 font-weight: bold;
	 padding: 4px 0 0 4px;
}

#about_selector {
	float: right;
	margin: 10px 11px 0 0;
}

#about_selector li {
	float: left;
	font-size: 80%;
	border: none;
	margin-right: 3px;
}

#about_selector li a {
	display:block;
	text-indent: -9999px;
}

#selector01 a {
	width: 60px;
	height: 21px;
	background: url(../img/tab_mission.png) left top no-repeat;
}

#selector01 a.activo {
	width: 60px;
	height: 21px;
	background: url(../img/tab_mission_active.png) left top no-repeat;
}

#selector02 a {
	width: 60px;
	height: 21px;
	background: url(../img/tab_about.png) left top no-repeat;
}

#selector02 a.activo {
	width: 60px;
	height: 21px;
	background: url(../img/tab_about_active.png) left top no-repeat;
}

#about_block_wrapper {
	clear: both;
	height: 115px;
}

#about_block,
#about_block2 {
	width: 270px;
	_width: 270px;
	padding: 5px;
}

#about_block2 { display:none; }

#about_block,
#about_block2 {
	clear: both;
	background-color: #F0F0F0;
	margin: 0px 12px 12px 12px;
	padding: 2px;
}

#btn_cart {
	width: 275px;
	height: 72px;
	background: url(../img/btn_shoppingcart_hover.png) no-repeat left top;
}

#btn_cart a{
	display: block;
	width: 275px;
	height: 72px;
	text-indent: -9999px;
	text-decoration: none;
	background: url(../img/btn_shoppingcart.png) no-repeat left top;
}
#btn_cart a:hover{
	background: none;
}


.paragraph01 {
	clear: both;
	display: block;
}

.paragraph02 {
	clear: both;
	display: block;
}


#btns_outersns {
	margin-left: 10px;
}

#btns_outersns li {
	float: left;
	margin: 0px 5px 0 0px;
}

#btns_outersns li a {
	text-indent: -9999px;
}

#btn_fb a {
	display: block;
	width: 31px;
	height: 34px;
	background: url(../img/btn_facebook.png) left top no-repeat;		
}

#btn_twitter a {
	display: block;
	width: 31px;
	height: 34px;
	background: url(../img/btn_twitter.png) left top no-repeat;		
}

#addthis-btns {
	padding: 5px 0 0 5px;
	font-size: 90%;
}

#addthis-btns a {
	color: #333;
}


#language-selector {
	float: right;
	margin-top: 42px;
}

#language-selector li {
	float: left;
	margin-right: 0px;
}

#language-selector li a {
	float: left;
	display: block;
	text-indent: -9999px;
	}
	
#language-selector li#en a:hover,
#language-selector li#tw a:hover,
#language-selector li#ja a:hover {
	background: none;
	}

#language-selector #en {
	width: 98px;
	height: 26px;
	background: url(../img/btn_english_hover.png) no-repeat left top;
	}

#language-selector #en a {
	width: 98px;
	height: 26px;
	background: url(../img/btn_english.png) no-repeat left top;
	}

#language-selector #tw {
	width: 60px;
	height: 26px;
	background: url(../img/btn_chinese_hover.png) no-repeat left top;
	}

/*#language-selector #tw a {
	width: 60px;
	height: 26px;
	background: url(../img/btn_chinese.png) no-repeat left top;
	}
	*/
	
#language-selector #ja {
	width: 113px;
	height: 26px;
	background: url(../img/btn_japanese_hover.png) no-repeat left top;
	}
	
#language-selector #ja a {
	width: 113px;
	height: 26px;
	background: url(../img/btn_japanese.png) no-repeat left top;
	}
	


/* main_images
---------------------------------------------------- */
#main_images{
	float: right;
	width: 570px;
	height: 270px;
	border: 4px solid #CCC;
	background-color: #FFF;
}
/* flash */
#flash{
	margin-bottom: 18px;
}
.main_txt{
	width: 508px;	
	font-size: 70%;
	margin-top: 10px;	
}



/* menu
---------------------------------------------------- */
#menu{
	float: left;
	width: 280px;
	height: 214px;
	margin: 8px 8px 0 0;
	padding: 10px 0;
	border: 4px solid #E8E8E8;
	/*border-color: #e6e6e6;
	border-style: solid;
	border-width: 4px 15px 4px 4px;*/
}

#menu h3 {
	width: 50px;
	height: 14px;
	background: url(../img/title_menu.png) no-repeat left center;
	text-indent: -9999px;
	margin: 0 0 10px 10px;
}

#menu p{
	line-height: 1.2;
	font-size: 60%;
	margin: 0 10px 5px 10px;
}

#menu ul{
	margin: 0px 0 10px 0;
}
#menu li{
	border-bottom: 1px solid #EFEFEF;
	padding: 0.5em 0 0.5em 20px;
}
#menu li span{
	padding-left: 20px;
}
#menu li a{
	color: #000;
	display: block;
	width: 245px;
}
#menu li a:hover{
	text-decoration: none;
	color: #069;
}


.circle01 {
	background: #EFEFEF url(../img/circle_blu.png) no-repeat 10px 10px;
}

.circle02 {
	background: url(../img/circle_ylw.png) no-repeat 10px 10px;
}

.circle03 {
	background: #EFEFEF url(../img/circle_ppl.png) no-repeat 10px 10px;
}

.circle04 {
	background: url(../img/circle_og.png) no-repeat 10px 10px;
}

.circle01-title {
	background: url(../img/circle_blu.png) no-repeat 0px 0px;
}

.circle02-title {
	background: url(../img/circle_ylw.png) no-repeat 0px 0px;
}

.circle03-title {
	background: url(../img/circle_ppl.png) no-repeat 0px 0px;
}

.circle04-title {
	background: url(../img/circle_og.png) no-repeat 0px 0px;
}



/* item
---------------------------------------------------- */

.item_waku{
	/*background: #FFF url(../img/item_waku_bk.gif) repeat-y left top;*/
	clear: both;
	width: 900px;
	/*border: 4px solid #e6e6e6;*/
	margin-top: 0px;
}
.items{
	/*position: relative;*/
	float: left;
	/*width: 257px;
	height: 298px;*/
}
.items a{
	color: #333;
}

.items h2{
	border-bottom: 1px solid #efefef;
	margin-bottom: 5px;
	padding: 3px 8px;
}

.item{
	float: left;
	width: 260px;
	height: 214px;
	margin: 8px 8px 0 0;
	padding: 10px;
	border: 4px solid #E8E8E8;
}
.item:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: ".";
}
.item{
	/*\*//*/
	overflow: hidde;
	/**/
}

.item h3{
	min-height: 18px;
	font-weight: bold;
	padding-left: 20px;
	font-size: 90%;
	margin-top: 10px;
}
.item p.center {
	text-align: center;
	vertical-align: middle;
	height: 105px;
	/*float: right;
	border: 1px solid #CCC;*/
	margin-right: 5px;
}
.item_txt{
	margin: 2px 0 0 0;
	font-size: 12px;
}

.itemwrapper-waku {
	clear:both;
	background: url(../img/contents-border.png) left top no-repeat; 
	padding: 20px 10px;
}

.itemwrapper-waku p {
	margin-top: 8px;

}

.float-left-img img,
.float-right-img img {
	padding: 0px 0 0px 0;
	
}

.float-left-img {
	float: left;
	width: 152px;
}

.float-left-img_ss2 {
	float: left;
	width: 295px;
}

.float-right-img {
	float: right;
	width: 152px;
	margin-right: 80px;
}

.img-text {
	width: 120px;
	font-size: 70%;
}

.float-left-text {
	float: left;
	width: 360px;
}


.float-right-text {
	float: right;
	width: 360px;
}

.float-right-text_ss2 {
	float: left;
	width: 217px;
}

.itemwrapper-waku .font-s {
	font-size: 80%;
}

.itemwrapper-waku .emphis {
	clear: both;
	background: url(../img/highlight-bg01.png) left top repeat;
	padding: 10px;
	border: solid 2px #CCC;
	margin: 20px 40px;
}

.cart-converter {
	
}

.cart-converter td {
	vertical-align: top;
	
}

#c-converter-wrapper {
	width:222px;
	background-color:#FFF;
	border:4px solid #EFEFEF;
	text-align:center;
	margin:20px auto;
	padding:5px;
}

#c-converter-content {
	 background-color:#FFF;
	 border-bottom:2px solid #EFEFEF;
	 width:100%;
	 margin:0px;
	 padding:0px;
	 align:center;
	 text-align:center;
}

.spec-wrapper {
	display: none;
}


.spec {
	font-size: 80%;
	border: 1px #CCC solid;
	margin: 0px 0 20px 0;
}

.spec th {
	padding: 4px;
	border-right: 1px #CCC solid;
	border-bottom: 1px #CCC solid;
	
}

.spec td {
	padding: 4px;
	border-bottom: 1px #CCC solid;
	
}

.spec-btn {
	margin: 10px 0;
}


.table-02 {
	border: 2px solid #CCC;
	background-color: #CCC;
	font-size: 90%;
}

.table-02 td {
	padding: 15px;
	vertical-align: top;
	background-color: #FFF;
}

.table-02 span {
	display: block;
	font-weight: bold;
}

.table-02 .border2 {
	border-right: 2px solid #CCC;
	border-left: 2px solid #CCC;
}

.table-02 .bg01 {
	background: #FFF url(../img/1500/img_1500mah_10.png) 100% 80% no-repeat;
}

/* news
---------------------------------------------------- */
/*#news{
	position: relative;
	float: left;
	width: 518px;
	height: 298px;
	background-color: #FFF;
}
#news h2{
	background-color: #c6c4c4;
	padding: 10px;
	font-size: 120%;
	font-weight: bold;
	color: #FFF;
}
#news ul{
	margin: 7px 10px 21px 10px;
}
#news li{
	line-height: 1.2;
	background: #FFF url(../img/list_bullet1.gif) no-repeat 0 0.6em;
	border-bottom: 1px dotted #999;
	padding: 0.2em 0 0.2em 10px;
}
*/

/* footer
---------------------------------------------------- */
#footer{
	clear: both;
	position: relative;
	width: 900px;
	margin-left: 0px;
	margin-top: 5px;
	padding-bottom: 20px;
}

#footer-nav {
	width: 860px;
	background-color: #E8E8E8;
	margin-left: 10px;
	padding: 10px;
}

#footer ul{
	width: 300px;
	float: left;
}
#footer li{
	float: left;
}
#copyright{
	float: right;
	font-size: 80%;
}
#paypal_footerlink{
	clear:both;
	text-align: left;
	margin: 20px 0 0 0px;
}

#paypal_footerlink2{
	clear:both;
	text-align: center;
	margin: 20px 0 0 0px;
}

#btn_top a {
	position: absolute;
	bottom: 0px;
	right: 0px;
	display: block;
	width: 24px;
	height: 23px;
	background: url(../img/btn_top.png) no-repeat left top;
	text-indent: -9999px;
	margin: 0px 10px 0 0;
}


/* others
---------------------------------------------------- */
img.left{
	float:left;
	padding: 0 5px 0 0;
}
.right{
	float:right;
	text-align: right;
}

.padding-t1{
	padding-top: 1px;
}

.margin-t1{
	margin-top: 1px;
}
.margin-t15{
	margin-top: 15px;
}
.margin-l4{
	margin-left: 4px;
}
.margin-b10{
	margin-bottom: 10px;
}
.margin-b20{
	margin-bottom: 20px;
}
.caution{
	color: #cc0000;
}
.font10{
	font-size: 80%;
}

.padding-t20 {
	padding-top: 20px;
	}
.clear {
	clear: both;
	}

.font-b {
	font-weight: bold;
}

.hilight01 {
	font-weight: bold;
	font-size: 130%;
	color: #09C;
}



/*------2008-12-22 added-----*/

#irregular-space { 
	background-color: #FFE1E1; 
	width: 778px; 
	border: 1px solid #FF0000;
	text-align: center; 
	padding: 5px;
	margin-bottom: 10px;
	}
#irregular-space a {
	text-decoration: underline;
	}



/*
-------------------------*/
/*#main_area {
	float: right;
	width: 570px;
	}
	
#main_cont {
	width: 570px;
	margin: 0;
	}
	
#main_cont div.title {
	width: 570px;
	}

#contents {
	_width: 788px;
	}
#global_navi {
	_width: 708px;
	}
#global_navi ul {
	_width: 708px;
	}
	
*/

/* *:first-child+html body #contents {
	width: 788px;
	}*/
/**:first-child+html body #global_navi {
	width: 800px;
	}
*:first-child+html body #global_navi ul {
	width: 800px;
	}*/


#gallery {
	margin: 20px 0;
}


#gallery ul li {
	float: left;
	margin-right: 20px;
	
}


#gallery .preview {
	width: 100px;
	border: 4px solid #EFEFEF;
	padding: 4px;
}
	