
/*** PC-TOP CSS ***/

html,body {
	margin:0;
	padding:0;
	height: 100%;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,header,footer,address, article, section{ 
	margin:0;
	padding:0;
}

body{
	background:#FFF;
	/*
	overflow-y: scroll;
	overflow-x: hidden;]*/
}

body,h1,h2,h3,h4,h5,h6,li,p,input{
	font-size:13px;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif!important;
}

a{
	color:#03C;
	text-decoration: none;
}

a:hover{
	color:#F3C;
	text-decoration: none;
}

img { 
	border:0;
}

ol,ul {
	list-style:none;
}

h1,h2,h3,h4,h5,h6, p {
	font-weight:normal;
}

input.m_price{
	font-size:100% !important;
	width:70px;
}

/* All
--------------------------------------------------------------------------*/

#wrapper{
	padding:100px 0 40px 0;
	width:100%;
	overflow:hidden;
}

.wrapper-org{
	width:1000px;
	margin:0 auto;
	overflow:hidden;
}


/* HEADER
--------------------------------------------------------------------------*/

#header{
	position:fixed;
	width:100%;
	height:57px;
	background:#ff6600;
	z-index:200;
}

.hd-box{
	width:1000px;
	height:57px;
	margin:0 auto;
}

.hd-wspace{
	width:100%;
	height:0px;
	background:#eeeeee;
	border-bottom: 1px solid #CCC;
}

.hd-logo{
	float:left;
}

.hd-bt{
	float:right;
}

.hd-bt li{
	float:left;
}

.hd-login p{
	display:none;
}

a.M_loginBtn{
	display: block;
	background:url(../img/cmn/hd-bt-login_off.png) no-repeat;
	width:98px;
	height:57px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

a:hover.M_loginBtn{
	background:url(../img/cmn/hd-bt-login_on.png) no-repeat;
}

a.M_logoutBtn{
	display: block;
	background:url(../img/cmn/hd-bt-logout_off.png) no-repeat;
	width:98px;
	height:40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

a:hover.M_logoutBtn{
	background:url(../img/cmn/hd-bt-logout_on.png) no-repeat;
}

/* TOP PAGE
--------------------------------------------------------------------------*/

#top-logo{
	width:100%;
	padding:0 0 10px 0;
}

.top-logo{
	width:601px;
	margin:10px auto 0 auto;
}

.top-info-w{
    width: 96%;
    padding: 20px 30px;
	margin:0 2% 0 2%;
    background:#f7ffa3;
    border-radius: 8px;
    border: solid 4px #e70000;
    text-align: left !important;
    color: #e70000;
}

.top-info-w h4{
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
} 

.top-info-w p{
    font-size:100%;
    line-height: 160%;
    letter-spacing: 0.1em;
    text-align: center;
}

.top-info{
    box-sizing: border-box;
	width:880px;
    padding: 20px 30px;
	margin:0 auto 0 auto;
    background:#f7ffa3;
    border-radius: 8px;
    border: solid 4px #e70000;
    text-align: left !important;
    color: #e70000;
}

.top-info h4{
    font-size: 130%;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
} 

.top-info p{
    font-size:110%;
    line-height: 180%;
    letter-spacing: 0.1em;
    text-align: center;
}

.top-info p.top-info-day{
    text-align:right;
    margin-bottom: 10px;
    font-size:100%;
}

#top-category{
	width:100%;
}

.top-category-ttl{
	width:640px;
	margin:0 auto 0 auto;
	padding:25px 0 20px 0;
	text-align:center;
}

.top-category-ttl h2{
	font-size:140%;
	color:#222;
	letter-spacing: 0.3em;
}

.top-category{
    box-sizing: border-box;
	width:1000px;
	margin:50px auto 0 auto;
	padding:0 43px 0 0;
	text-align:center;
	position:relative;
	overflow:hidden;
}

.top-category li{
	float:left;
	width:275px;
	height:265px;
	padding:0 0 44px 44px;
}

#top-info{
	width:100%;
	height:30px;
}

#ctg-category{
    box-sizing: border-box;
    position: relative;
    width: 1000px;
    background-color: #f2f2f2;
    padding: 0px 90px 80px 110px;
    margin: auto;
    overflow: hidden;
}

.ctg-ttl{
    position: relative;
    width: 316px;
    margin: 10px auto 15px auto;
}

.ctg-category{
    display: block;
}

.ctg-category li{
	float:left;
	width:140px;
	height:150px;
	padding:0 20px 20px 0;
}

.ctg-category li:last-child{
	padding:0 0 20px 0;
}

.ctg-list1{
    position: relative;
    width: 140px;
    margin: auto;
}

.ctg-list1w{
    position: relative;
    width: 300px;
    margin: auto;
}

.ctg-list2{
    position: relative;
    width: 300px;
    margin: auto;
}

.ctg-list3{
    position: relative;
    width: 460px;
    margin: auto;
}

.ctg-list4{
    position: relative;
    width: 620px;
    margin: auto;
}


.ctg-category ul.ctg-list1 li{
	float:none;
	width:140px;
	height:150px;
	padding:0 20px 0 0;
}

.ctg-category ul.ctg-list1w li{
	float:none;
	width:300px;
	height:200px;
	padding:0 20px 0 0;
}

.ctg-category ul.ctg-list1w li img{
	width:100%;
}

/* CATEGORY PAGE
--------------------------------------------------------------------------*/

ul.prd-list{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: wrap
}

ul.prd-list li{
	position: relative;
	box-sizing: border-box;
	width: 25%;
	padding: 0.5rem;
	display: block;
}

ul.prd-list li a{
	width: 100%;
	display: block;
	color: #171717;
	opacity: 1;
	transform: scale(1,1);
	transition: all 0.5s;
}


ul.prd-list li a:hover{
	color: #E53200;
	opacity: 0.8;
	transform: scale(1.05,1.05);
}

ul.prd-list li .prd-name{
	font-size: 1rem;
}
ul.prd-list li .prd-price{
	font-size: 0.9rem;
}

.category-art{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 2rem 3rem;
	background: #FFFFFF;
	margin-top: 2rem;
}
.category-art h4{
	position: relative;
	box-sizing: border-box;
	font-size: 1.2rem;
	margin-bottom: 1em;
	border-bottom: 1px dotted #8F8F8F;
}
.category-art h5{
	font-size: 1rem;
	margin-bottom: 1rem;
}

.prd-art{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 1rem auto;
	padding: 1rem 1.4rem 1.4rem 1.4rem;
	background:#EFEFEF;
	border-radius: 0.5rem;
}

.prd-art h4{
	font-size: 1.1rem;
	color:#CC4127;
	margin-bottom: 1rem;
}

.prd-art ul{
	position: relative;
	width: 100%;
	margin:0;
}

.prd-art ul li{
	position: relative;
	box-sizing: border-box;
	padding: 0 0.3rem 0 0.9rem;
}

.prd-art ul li:before {
	content: "*";
	position: absolute;
	color:#CC4127;
	left: 0;
	top: 0.3rem;
	display: inline-block;
}

.prd-art-lt{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 1rem auto 0rem auto;
	padding: 0.8rem 1.4rem 0.9rem 1.4rem;
	background:#F5F5F5;
	border-radius: 0.3rem;
}

.prd-art-lt h5{
    font-size: 1.1rem;
    letter-spacing: 0.05rem;
    padding: 0.1rem 0  0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px #CCCCCC solid;
    text-align: center;
    color:#FF0004;
}

.prd-art-lt p{
    color:#FF0004;
    font-size: 0.95rem;
    letter-spacing: 0.05rem;
}

.prd-art-lt ul.list-art{
	position: relative;
	width: 100%;
	margin:0;
}

.prd-art-lt ul.list-art li{
	position: relative;
	box-sizing: border-box;
	padding: 0 0.3rem 0 0.9rem;
    color:#FF0004;
}

.prd-art-lt ul.list-art li:before {
	content: "*";
	position: absolute;
    color:#FF0004;
	left: 0;
	top: 0.3rem;
    font-size: 1.8rem;
	display: inline-block;
}


/* CATEGORY PAGE
--------------------------------------------------------------------------*/

#ctg-logo{
	width:100%;
	padding:20px 0 50px 0;
}

.ctg-logo{
	width:800px;
	margin:0 auto;
	clear:both;
}

.cgt-logo-box{
	width:140px;
	margin-right:30px;
	float:left;
}

.cgt-logo-tx{
	float:left;
	width:630px;
	color:#333;
}

.cgt-logo-tx h1{
	font-size:165%;
	margin:80px 0 10px 0;
}


#ctg-prd{
	width:100%;
	background:url(../img/top/top-ttl-bg.png);
}

.ctg-prd{
	width:885px;
	margin:0 auto 0 auto;
	padding:30px 0 0 0;
	text-align:center;
	overflow:hidden;
}

.ctg-prd li{
	float:left;
	width:255px;
	height:285px;
	padding:0 20px;
	margin-bottom:30px;
}


/* PRODUCT
--------------------------------------------------------------------------*/

#r_contract{
	width: 810px;
	text-align:left !important;
}

#contractBox {
    border: 1px solid #b2b2b2;
    height: 280px;
    margin-top: 0px;
    margin-bottom: 20px;
    overflow: auto;
    padding: 10px;
    text-align: left;
    width: 770px;
}


#prd-left{
	width:140px;
	text-align:left !important;
	margin-right: 43px;
}

#prd-left li, #prd-left2 li{
	line-height:0;
	margin-bottom:10px;
}


#prd-left li.on{
	margin-bottom:35px;
}

#prd-main {
	width: 810px;
	text-align:left !important;
}

#prd-left2{
	width:140px;
	text-align:left !important;
	margin-right: 50px;
	float:left;
}

#prd-main2 {
	width: 810px;
	text-align:left !important;
	float:left;
}

#prd-main h2{
	font-size:160%;
	margin:0 0 38px 0;
	color:#947041;
}

.prd-main-ibox{
	width:380px;
	float:left;
}

.prd-main-tbox{
	float:left;
	width:390px;
	margin-left:40px;
}


.prd-main-info{
	padding:20px 0;
	color:#333;
	border-top: dotted 1px #CCC;
}

.prd-main-info-f{
	padding:0 0 20px 0;
	color:#333;
}

.prd-main-dtl{
	padding:20px 0;
	border-top: dotted 1px #CCC;
}

#M_usualValue td{
	padding:0 0 10px 0;
}

#M_usualValue{
	font-size:150%;
	color:#333;
	letter-spacing: 0.1em;
}

.prd-main-bt{
	padding:20px 0;
	border-top: dotted 1px #CCC;
}

/* CONTENT
--------------------------------------------------------------------------*/

#cnt-common{
	width:770px;
	margin:0 20px;
}

#cnt-common-guide{
	width:770px;
	margin:20px 20px 0 20px;
}


.cnt-box{
	margin-bottom:20px;
}

.cnt-box h3{
	font-size:150%;
	margin-bottom:12px;
	border-bottom: dotted 1px #888;
}

.cnt-box h4{
	font-size:120%;
	margin:15px 0 15px 0;
	color:#78672E;
}
.cnt-box p{
	margin-bottom:7px;
	width:770px;
}

/* Guide
--------------------------------------------------------------------------*/

#guideLink{
	display:none;
}

#guideMain #method, #guideMain #payment, #guideMain #delivery, #guideMain #tax, #guideMain #return {
    margin: 20px auto;
    padding: 40px 0 10px;
    width: 770px;
	text-align:left;
}

/* Login
--------------------------------------------------------------------------*/

#r_login{
	width:360px;
	margin:0 20px;
	float:left;
}

#r_member{
	width:360px;
	margin:0 20px;
	float:left;
}

.inputTd input{
	width:200px;
}

#memberlogin h3, #lostpass h3{
	font-size:150%;
	margin-bottom:12px;
	border-bottom: dotted 1px #888;
	text-align:left;
}

#memberlogin p, #lostpass p{
	margin-bottom:20px;
	text-align:left;
}

table.formTable{
	margin:0 auto 20px auto;
}

.formTable th{
	font-weight:normal;
	text-align:right;
	padding-right:15px;
}

.btnWrap{
	text-align:center;
}

.btnWrap img{
	margin-bottom:10px;
}

table#stdTable { margin:10px 0 20px 0; background:#CCC; }
#stdTable th{ background-color:#eaecef; text-align:left; font-weight:normal; padding: 3px 6px; }
#stdTable td{ background-color:#FFF; padding: 3px 6px; }


table#basketTable { margin:20px 0 30px 0; border-spacing: 0;}
#basketTable th{ background-color:#eaecef; text-align:left; font-weight:normal; padding: 10px 12px; }
#basketTable td{ background-color:#FFF; padding: 10px 12px;}

.basketQuantity{ width:120px; }
.basketPoint{ width:60px; text-align:center; }
.basketPrice{ width:80px; text-align:right; }
.basketBtns{ width:60px; text-align:center; }

.quantityInput, .basketQunantity, .basketQunantity{
	float:left;
}

.basketQunantity tr, .basketQunantity td{
	padding:0 !important;
	margin:0 !important;
}

.quantityInput, .quantityAmend{
	padding:4px 0 0 0;
}

#basketTable th, #basketTable td {
    border-bottom: 1px solid #d4d8de;
    text-align: center;
}

.basketName{
	text-align:left !important;
}

.basketTotal{
	text-align:right !important;
	font-size:140%;
}

td .basketTotal{
	background:#fffdef !important;
}

.basketTotal em{
	color:#C00;
}

.btnBack{
	float:left;
}

.btnOrder{
	float:right;
	margin-top:-8px;
}


/* CART
--------------------------------------------------------------------------*/

.sold{
	color:#F00;
}

.sold-size{
	font-size:120%;
}

#M_categoryList{
width:100%;
margin-bottom:16px;
}
.M_innerList{
overflow:hidden;
_zoom:1;
border-bottom:1px solid #ccc;
background:#eee;   
}
.M_innerList li{
float:left;
width:20%;/* 商品数が5つなので100%÷5=20% */
}
.M_innerList li .M_innerBox{
border-right:1px dotted #ccc;
margin:8px auto;
}
.M_innerList li.lastChild .M_innerBox{
border-right:none;/* 一番右のボックスだけ右の罫線を消す */
}
.M_innerList li .M_cl_detail{
margin:8px;
margin-bottom:0;
}
.M_innerList .M_cl_name{
margin-bottom:4px; 
}
.M_innerList .M_cl_price{
text-align:right;  
}
.M_innerList .M_cl_imgWrap{
height:140px;
text-align:center;
}
.M_innerList .M_cl_taxPrice{
font-weight:bold;
color:#cc0000;
font-size:11px;
}
.M_innerList .M_cl_content{
font-size:11px;
margin-top:4px;
}   

/* CART
--------------------------------------------------------------------------*/

#basket{
	margin:0 20px;
}

#basketTable{
	width:770px;
}

.line {
    font-size: 1px;
    line-height: 1px;
}


/* 会員トップ
--------------------------------------------------------------------------*/

.login-bar{
	background: #0f0f0f;
	width:100%;
	padding:15px 0;
	margin-bottom:20px;
	overflow:hidden;
}

.login-category{
	width:784px;
	margin:0 auto;
	padding-bottom:30px;
	overflow:hidden;
}

.login-new{
	width:300px;
	margin:0 20px;
	padding:25px;
	border: 1px solid #999;
	float:left;
}

.login-new h3{
	font-size:150%;
	margin-bottom:12px;
	border-bottom: dotted 1px #888;
}

.login-new p{
	margin-bottom:15px;
}

.login-art{
	text-align:center;
	padding-bottom:25px;
}

.a-center{
	text-align:center;
}

.a-right{
	text-align: right;
}

/* CONTACT
--------------------------------------------------------------------------*/

#contact{
	text-align:center;	
	margin:20px;
	color:#333;
}
#contact *{
	margin:0;
	padding:0;	
}
#contact p{
	text-align:left;
	margin-bottom:10px;	
}
#closeBtn{
	margin-top:30px;	
}
#contactForm{
	border-collapse:collapse;
	width:100%;	
	margin-bottom:10px;
}
#contactForm th,#contactForm td{
	padding:6px 8px;
	border:1px solid #b2b2b2;
	font-size:13px;
	text-align:left;
}

#contactForm td{
}

#contactForm th{
	background:#eee;
	width:150px !important;
}

#contactForm input{
	width:250px !important;
}

#contactForm td input,#contactForm td textarea{
	border:1px solid #b3b3b3;	
}

/* 特別商取
--------------------------------------------------------------------------*/

#tokusyo {line-height:150%; font-size:100%;}
#tokusyo table { margin:20px 0 30px 0; border-spacing: 0; width:808px;}
#tokusyo Table th{ background-color:#eaecef; text-align:left; font-weight:normal; padding: 10px 12px; border-bottom:solid 3px #FFF; }
#tokusyo Table td{ background-color:#f7f8f9; padding: 10px 12px; border-bottom:solid 3px #FFF;}

/* FOOTER
--------------------------------------------------------------------------*/

#footer{
	background: #0f0f0f;
	width:100%;
	padding:30px 0;
	overflow:hidden;
}

.ftr-menu{
	width:900px;
	margin:0 auto;
}

.ftr-menu li a{
	color:#4e4e4e;
	width:160px;
	padding:5px 10px;
	text-align:center;
	float:left;
	
	transition: background 0.8s ease 0s;
}

.ftr-menu li a:hover{
	color:#222;
	background:#F60;
}

.ftr-official{
	width:131px;
	margin:20px auto;
}

.ftr-copy{
	color:#272727;
	text-align:center;
	margin-top:25px;
}

#pagetop {
	display: none;
	z-index:500;
	position: fixed;
	bottom: 40px;
	right: 24px;
	padding: 10px 10px 7px 10px;
	cursor: pointer;
	background:#555;
	color: #fff;
	
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	
	filter: alpha(opacity=90);
	-moz-opacity:0.90;
	opacity:0.90;
	
	behavior: url(/PIE.htc);
}

/* ART-BOX
--------------------------------------------------------------------------*/

.art-area{
	position: relative;
	width: 100%;
	overflow: hidden;
	display: block;
}

.art-box{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 914px;
	margin: auto;
	display: block;
	border: 2px solid #CF5B1F;
	padding: 1.2rem;
}
.art-box dl{
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
.art-box dt{
	position: relative;
	width: 16%;
	float: left;
	text-align: left;
}
.art-box dd{
	position: relative;
	width: 84%;
	text-align: left;
}
.art-box p, .art-box dt, .art-box dd{
	font-size: 0.95rem;
}

.art-box p a{
	color: #24457A;
	text-decoration: underline;
}

.art-box1{
	color:#c0392b;
	padding:0.8rem 1rem 0.8rem 1rem;
	border:solid 4px #c0392b;
	margin-top:16px;
	font-size:16px;
	text-align: center;
	background:#FFF;
}


.art-box2{
	color:#224D80;
	padding:0.8rem 1rem 0.8rem 1rem;
	border:solid 4px #224D80;
	margin-top:16px;
	font-size:16px;
	background:#FFF;
}


@media screen and (max-width: 751px) {
.art-box1 br{
	display: inline;
}
	
}

/* NEWS-BOX
--------------------------------------------------------------------------*/

.news-area{
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 1rem auto;
}

.news-box{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 914px;
	margin: auto;
	display: block;
}

.news-box h2{
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 2rem;
}

.news-box h3{
	font-size: 1rem;
	margin: 1rem auto;
	padding: 0.5rem 0;
	border-bottom: 1px dotted #828282;
	font-weight: bold;
}
.news-box p{
	font-size: 0.95rem;
	margin: 0 auto 1rem auto;
}


/* BT
--------------------------------------------------------------------------*/

.bt-area{
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 2rem auto;
}

.bt-std a{
		position: relative;
		box-sizing: border-box;
		display: block;
		text-align: center;
		text-decoration: none;
		width: 260px;
	background: #FF4F00;
	color: #FFFFFF;
	padding: 0.6rem 1rem; 
		margin: auto;
		transition: background-color 0.5s ease 0s;
}
.bt-std a:hover{
        background-color:#F1BB00;
    }

/* TEXT
--------------------------------------------------------------------------*/

.red-w{
    color: #FF0004;
    font-weight: bold;
}
.red-tx{
    color: #FF0004;
}

/* Clear
--------------------------------------------------------------------------*/

.clear:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clear{display:inline-table;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */

.tx-xs{ font-size:55% !important;}
.tx-s{ font-size:75% !important;}
.tx-m{ font-size:120% !important;}
.tx-l{ font-size:150% !important;}

table.stdTable {
  margin: 10px 0 20px 0;
  background: #CCC;
  width: 100%;
	border-collapse: collapse;
  border-spacing: 1!important;
}
.stdTable th {
  background-color: #eaecef;
  text-align: center;
  font-weight: normal;
  padding: 3px 6px;
  border: solid 1px #d5d7db;
}
.stdTable td {
  background-color: #FFF;
  padding: 3px 6px;
  border: solid 1px #d5d7db;
  text-align: center;
}

div.bnr-area a{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 260px;
	display: block;
	margin: 1rem 0 0 0; 
}

