/**

最終更新日： 2019/02/15

**/

*{
	margin:0;
	padding:0;
	background-repeat:no-repeat;
	line-height:140%;
	font-size:100%;
	font-family: "メイリオ", Meiryo,"ＭＳ Ｐゴシック", Verdana, sans-serif;
	outline: none
}

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}/* Non count border size */

a {text-decoration:none; overflow:hidden; color:#06C}
a:hover {color:#F93}

img {border: none; line-height:0; vertical-align:bottom}

li {list-style: none}

h1,h2,h3,h4,h5,h6{font-weight:normal; font-size:100%;}

.clear{clear:both; height:0; line-height:0; font-size:0}

.space10 {height: 10px}
.space20 {height: 20px}
.space30 {height: 30px}
.space40 {height: 40px}
.space100 {height: 100px}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml10{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.mr10{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}

.font10{font-size:10px}
.font12{font-size:12px}
.font14{font-size:14px}
.font16{font-size:16px}
.font18{font-size:18px}
.font20{font-size:20px}
.font24{font-size:24px}

.bold{font-weight:bold}

.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}


.left {float:left}
.center{float:left}
.right {float:right}

a:hover img{
  filter: alpha(opacity=70);
  -moz-opacity:0.75;
  opacity:0.75;
}

.alpha_img a:hover,#bt-search:hover{
  filter: alpha(opacity=70);
  -moz-opacity:0.75;
  opacity:0.75;
}

.cursor{cursor:pointer; cursor:hand}

th,td{text-align:left}

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

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.red{color:#C00}




body{
	font-size:14px;
	text-align: center;
	color:#333;
}



/** *********************************************

フレームサイズ設定

********************************************* **/
#header-frame{width:1200px; height: 1040px}
#sidebar-frame{width:260px; height:2880px; margin-bottom: 30px}
#footer-frame{width:1200px; height:950px}




/** *********************************************

左側のバナーの設定

********************************************* **/

#left-bn a{ width:100px; height:100%; background-repeat:repeat-y; background-position:left top;position:fixed; top:0; left:0; z-index:9999; background-size:contain;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s}

@media screen and (max-width: 1400px) {
	#left-bn a{width:80px;}
}
@media screen and (max-width: 1200px) {
	#left-bn a{left:-50px}
	#left-bn a:hover{left:0px}
}




/** *********************************************

ページ共通設定

********************************************* **/

#wrapper{
	width:1200px;
	margin:0 auto;
	text-align:left
}


#main{width:1200px}

#contents{padding: 0 0 50px 30px; width: 940px}
#contents img{max-width: 100%; height: auto}






/** HEADER FIRST LEVEL - Non Frame - **/
#hd{padding: 5px 10px; margin-bottom: 10px; background-color:rgba(1,159,232,1.00)}
#hd .inner{margin: 0 auto; text-align: left; font-size: 0; color:#fff}
#hd h1{width: 30%; display: inline-block; font-size: 11px}
#hd ul{display: inline-block; width: 70%; text-align: right}
#hd li{display: inline-block; padding: 0 5px;border-right:solid 1px #fff}
#hd li:last-child{border-right:none}
#hd li a{color:#fff; font-size: 11px}
#hd li a:hover{color:#ccc}



/** *********************************************

HEADER

********************************************* **/


#header table{width: 1200px}
#header table td.td-1{width: 250px; padding: 10px; text-align: center}
#header table td.td-2{width: 600px;  padding-left: 18px; vertical-align: top}
#header table td.td-3{padding: 5px 0;width: 350px; text-align: right; vertical-align: top}
#header table td.td-2b{padding-left: 20px; padding-top: 10px}

#header table td.td-1 img{width: 100%; height: auto}
#header .p1{color:#e91c24 ;font-size: 15px; font-weight: bold; margin-bottom: 14px}
#header .p1 img{width: 18px; height: auto;}
#header .p1 span{font-size: 10px}

#sitem{font-size: 14px; display: inline-block;padding: 5px; border:solid 1px #ddd; width: 450px; border-right:none; vertical-align: top;outline: none}
#bt-search{width: 100px; display: inline-block;font-size: 18px; color:#fff; background-color: rgba(0,83,165,1.00); text-align: center; padding: 5px;  border:solid 1px rgba(0,83,165,1.00); vertical-align: top}


#header table td.td-2b a{color:#333;display: inline-block; background-color:rgba(228,234,242,1.00); padding: 5px 10px; font-size: 12px; border-radius: 3px;font-weight: bold}
#header table td.td-2b a:hover{background-color: #666; color:#fff}


/** *********************************************

GLOBAL MENU

********************************************* **/

#gnavi{background-color: rgba(0,83,165,1.00); margin-top: 10px; font-size: 0}
#gnavi > li{display: inline-block; width: 25%; font-size: 14px; position: relative}
#gnavi > li a{display: block;font-size: 14px; width: 100%; padding: 12px;padding-top:15px; text-align: center; color:#fff; font-weight: bold; border-right:solid 1px #fff}

#gnavi > li a.on,
#gnavi > li a:hover{background-color: #e25a24}
#gnavi > li a.on i,
#gnavi > li a:hover i{color: #e25a24}

#gnavi > li a:hover img{opacity:1}
#gnavi > li a img.icon{width: auto; position: absolute; left: 30px; top:50%}
#gnavi > li.menu-1 img.icon{height: 24px; margin-top:-12px}
#gnavi > li.menu-2 img.icon{height: 20px; margin-top:-10px}
#gnavi > li.menu-3 img.icon{height: 30px; margin-top:-15px}
#gnavi > li.menu-4 img.icon{height: 30px; margin-top:-15px}

#gnavi > li img.img-txt{height: 22px; width: auto}
#gnavi > li i{color:#0f1e2e; background-color: #fff; position: absolute; display: block; padding: 0 4px; top:50%; right:10px; width: 18px; height: 18px; margin-top: -9px; font-size: 16px; font-weight: bold; border-radius: 3px}



.show-menu{width: 100%; min-height: 300px; max-height: 500px; background-color: #fff; position: absolute; top:215px; left: 0; padding: 20px 0; display: none; z-index: 999; border:solid 1px #ddd; border-top:none}
.show-menu ul{font-size: 0; text-align: left; width: 840px;  display: inline-block; vertical-align: top}


.show-menu li{display: inline-block; font-size: 12px; width: 100px; vertical-align: top; margin: 10px; text-align: center}
.show-menu li a{color:#333}
.show-menu li .wrap-img{background-color: #fff; margin-bottom: 10px}
.show-menu li img{width: 100%; height: auto}





/** *********************************************

HEADER FRAME BANNER AREA

********************************************* **/

#hd-bns{margin-top: 20px}
#hd-bns table{padding: 10px}
#hd-bns td{padding: 5px 10px; text-align: center}
#hd-bns td img{width: 100%; height: auto; border:solid 1px #ddd}


/** *********************************************

TOP PAGE MAIN CONTENTS

********************************************* **/

#main{margin-top: 20px}

#contents .bns{margin-bottom: 30px}
#contents .bns a{display: block; margin-bottom: 1em}


.title{font-size:16px; font-weight:bold; padding:15px;text-align:center; background-color: #f5f5f5; border-top:solid 1px #333; margin-bottom: 20px}

.title-1{background-color:rgba(202,237,235,1.00)!important}
.title-2{background-color:rgba(238,244,226,1.00)!important}


/**

現在の注文状況

**/

#wrap-hitoke{margin-bottom: 50px; background-color: #eddf21; text-align: center; padding: 10px; padding-top: 15px;position: relative}
#wrap-hitoke .title-txt{padding: 0 0 15px 0}
#wrap-hitoke .title-txt img{width: auto; height: 34px}
#wrap-hitoke iframe{background-color: #fff}
#wrap-hitoke .catch{position: absolute; top:-10px; left: 10px;width: 150px; height: auto}


/**

新着商品

**/

#wrap-new{margin-bottom: 50px;  text-align: center; position: relative}
#wrap-new .title-txt{padding: 15px 0;background-color:rgba(1,82,165,1.00); margin-bottom: 15px}
#wrap-new .title-txt img{width: auto; height: 34px}
#wrap-new iframe{background-color: #fff}
#wrap-new .catch{position: absolute; top:10px; left: 10px;width: 180px; height: auto}



/**

ランキング

**/



#wrap-ranking{background-color:rgba(234,34,36,1.00); text-align: center; padding: 10px; padding-top: 15px;position: relative;margin-bottom: 50px; }
#wrap-ranking .title-txt{padding: 0 0 15px 0}
#wrap-ranking .title-txt img{width: auto; height: 34px}
#wrap-ranking .in{background-color: #fff; padding: 20px 10px}
#wrap-ranking h4{font-weight: bold;width: 800px; margin: 0 auto; font-size: 14px; background-color: rgba(228,234,242,1.00);border-radius: 20px; padding: 5px}
#wrap-ranking iframe{height: 250px; background-color: #fff; margin: 10px 0 20px}		
#wrap-ranking .catch{position: absolute; top:-10px; left: 10px;width: 75px; height: auto}






/**

スペシャルプライス

**/

#wrap-special{margin-bottom: 50px; background-color:rgba(228,234,242,1.00); text-align: center; position: relative}
#wrap-special .in{padding: 20px}
#wrap-special .title-txt{padding: 15px 0; background-color: rgba(15,30,46,1.00)}
#wrap-special .title-txt img{width: auto; height: 34px}
#wrap-special .catch{position: absolute; top:-10px; left: 10px;width: 80px; height: auto}






#contents .note{margin-top: 30px}





/** ***********************************************

SIDEBAR

*********************************************** **/

#sidebar{text-align: left}
#sidebar .side-title{text-align: center;padding: 10px; padding-top: 6px}
#sidebar .side-title img{height: 22px; width: auto}
#sidebar .wrap-camera{background-color: #000;padding: 10px; margin-bottom: 20px}
#sidebar .wrap-optics{background-color: #03A99E;padding: 10px; margin-bottom: 20px}
#sidebar .wrap-sp{background-color: #0072BE;padding: 10px; margin-bottom: 20px}
#sidebar .wrap-others{background-color: #98999A;padding: 10px; margin-bottom: 20px}

#sidebar ul.fist-level{text-align: left;background-color: #fff}

#sidebar li a{display:block; font-size: 13px; padding: 5px 3px; font-weight: bold; background-color: #fff; border-bottom:solid 1px #ddd; position: relative;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; padding-right: 12px; color:#333}

#sidebar li a:hover{opacity: .8}
#sidebar li img{width: 40px; height: auto; display: inline-block; vertical-align: middle; margin-right: 10px}
#sidebar li i{font-size: 18px;position: absolute; top:50%; right:5px; margin-top: -9px}
#sidebar li i.on{
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}

.has-sub{cursor:pointer; cursor:hand}
#sidebar li a span{font-size: 10px}

#sidebar .sub{display:none}
#sidebar .sub a{background-color: #f5f5f5; padding: 8px 10px; font-weight: normal; font-size: 12px}
#sidebar .sub a:hover{overflow:inherit;text-overflow: inherit;white-space: inherit; }
#sidebar .sub a:before{content:"- "}
#sidebar .sub li:last-child a{border-bottom: none}
#sidebar .sub {border-bottom:solid 1px #ddd}

.side-bns{margin-top: 20px}
.side-bns a{display: block; margin-bottom: 10px}

.title-h4{padding: 10px; font-weight: bold; text-align: center}



/** *********************************************

FOOTER

********************************************* **/
#footer{padding:10px;padding-bottom: 0}
#footer .title-txt{padding: 10px 0;background-color: rgba(41,167,222,1.00)}
#footer .title-txt img{width: auto; height: 30px}

#footer .td{width:50%; padding:20px; padding-bottom: 0}
#footer .item{padding:10px 0; border-bottom:solid 1px #ddd;}
#footer .item h5{padding-bottom:15px; font-weight: bold}
#footer .item p{padding-bottom:1em; font-size:13px; line-height: 160%}
#footer .item img{margin-bottom:1em; max-width:100%; height:auto}
#footer .item-03{border-bottom:none}

.staff{width:100%; height:auto}
.staff img{width:40%; height:auto; float:left; vertical-align:bottom}
.staff p{width:60%; padding:0 10px; float:right}



.tr{display:block;font-size: 0}
.td{ display: inline-block;width:50%; font-size: 14px;text-align: left; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;}
.th{font-weight:bold}




#f-menu{background-color:rgba(228,234,242,1.00); padding: 15px; text-align: center}
#f-menu li{display: inline-block; padding: 0}
#f-menu li:after{content: "|"; margin: 0 5px 0 8px; color:#ccc}
#f-menu li a{color:#333; font-size: 13px}


#copyright{font-size:10px; padding:20px 0; text-align:center; letter-spacing: 1.5px}



#bn-free{position:fixed; top:100px; right:0}
#bn-free div{margin-bottom: 5px}
#bn-free img{width: 80px; height: auto}

#bn-free ul{position:absolute; top:0; right:-250px; background-color: #f8f8d4; padding: 10px}
#bn-free li img{width: 200px; height: auto; display: block; margin-bottom: 5px}
.transition-1{-webkit-transition: all 0.4s;-moz-transition: all 0.4s;transition: all 0.4s}
#bn-free .item-1:hover ul{right: 0}





/** *********************************************

会社概要

********************************************* **/

#information{
	text-align:center;
	border:1px solid #CCCCCC;
}

#information h3{
	background-color: #999999;
	padding:5px 0
}

#information table{
	width:800px;
	margin:20px 0
	}

#information table td{
	text-align:left;
	padding:5px
}


#information a{
	text-align:left;
	background-image: url(https://www.rakuten.ne.jp/gold/kenko-k/images/ArrowCBlack.gif);
	padding-left: 22px;
	background-position:left center
}


.about{
	text-align:left;
	border:1px solid rgba(0,83,164,1.00);
}

.about h3{

	font-size:14px;
	color: #FFFFFF;
	padding:3px 0;
	text-align:center;
	font-weight:bold
}

.about .bg_red{
	background-color: rgba(0,83,164,1.00);
}


.about td{
	padding:16px 10px
}


.about .wrap_img{
	border:solid 1px #CCCCCC;
	padding:1px
}

.about .notice{
	color:#FF0000;
	font-weight:bold
}

	
	
/** HOWTO **/

#howto{
	text-align:center;
	border:1px solid #CCCCCC;
	padding:0 0 40px 0
}


#howto h3{
	background-color: #999999;
	padding:5px 0
}


#howto h4{
	text-align:left;
	margin:20px;
	font-size:14px;
	font-weight:bold
}

#howto .howto_01{
	background-image: url(../images/01.gif);
	padding-left: 40px;
	height:25px;
	padding-top:4px

}

#howto .howto_02{
	background-image: url(../images/02.gif);
	padding-left: 40px;
	height:25px;
	padding-top:4px

}

#howto .howto_03{
	background-image: url(../images/03.gif);
	padding-left: 40px;
	height:25px;
	padding-top:4px

}

#howto .howto_04{
	background-image: url(../images/04.gif);
	padding-left: 40px;
	height:25px;
	padding-top:4px

}

#howto .howto_05{
	background-image: url(../images/05.gif);
	padding-left: 40px;
	height:25px;
	padding-top:4px

}


#howto .wrap_howto{
	border:1px solid #CCCCCC;
	margin-left:60px;
	width:697px;
}


#howto .wrap_howto p{
	background-color:#333;
	color:#FFFFFF;
	text-align:left;
	padding:10px 40px

}




 .wrap_table{
    width:100%;
	background-color:#ccc
}

.wrap_table table{
    width:100%
}

.wrap_table th{
    font-weight:normal;
	padding:10px;
	background-color:#eee;
	white-space:nowrap
}

.wrap_table td{
    font-weight:normal;
	padding:10px;
	background-color:#fff
}


#points{background-color:#fff; text-align:center;  margin:40px auto 20px auto; padding:5px; width:100%}
#points table{width:100%}
#points td{width:80%; text-align:center; padding-bottom:8px}







@media screen and (max-width: 1300px) {
#bn-free {display: none}
}


@media screen and (max-width: 480px) {
img{max-width:100%; height:auto}
}


div.wrap_youtube{margin:20px; text-align:center; background-color:#eee; padding:20px 0; margin-bottom:40px}

#pagetop{display: block;width: 100%; padding: 10px; text-align: center; background-color: aliceblue}