@CHARSET "utf-8";

input,
select,
textarea{
	font-size:16px;
}

body {
	margin:0px;
	background-color:#FFFFFF;
}

a {
	text-decoration:none;
/*	color:#000; */
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


header, nav, footer, section, article, div {
  box-sizing: border-box;
}


.clicky {
	cursor:pointer;
}

.fixedElement {
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
/*	height:110px;*/
}

.underFixedElement {
/*	height:110px; */
	width:100%;
/*	background-color:#000000; */
}

.headerholder {
	width:100%;
	background-color:#002157;
	height:70px;
	max-width:100%;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.header {
	max-width:1000px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
}


.menuholder { /* this class gets hidden on smaller screens */
	width:100%;
	height:60px;
	background-color:#FFFFFF;
	max-width:100%;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
	border-bottom:2px solid #002157;
}

.menu {
	display:flex;
/*	width:100%; */
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
}

menubutton {
	margin-top:10px;
	margin-right:30px;
	text-align:center;
	cursor:pointer;
	font-size:14px;
}

menubutton a {
	color:#000000;
}

/*
menubutton:first-child {
	margin-left:auto; 
}
*/

.ht {
	width:100%;
	display:flex;
}

.htall {	
	color:#FFFFFF;
	line-height:55px;
	font-size:16px;
	width:100%;
	padding-left:10px;
	cursor:pointer;
}

.ht1 {
	color:#FFFFFF;
	line-height:55px;
	font-size:16px;
	width:50%;
	padding-left:10px;
	cursor:pointer;
}

.ht2 {
	color:#FFFFFF;
	line-height:55px;
	font-size:14px;
	width:50%;	
	padding-left:10px;
	text-align:right;
}

.loginbar {
	width:100%;
	display:flex;
}

.loginelement {
	color:#FFFFFF;
	margin-right:10px;
	line-height:40px;
}

.loginelement:first-child {
	margin-left:auto;
}


/* sidenav */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #002157;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.4s;
    padding-top: 60px;
	text-align:left;
}

.sidenav a {
    padding: 8px 8px 8px 10px;
    text-decoration: none;
    font-size: 16px;
    color: #FFFFFF;
    display: block;
    transition: 0.2s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 32px;
    margin-left: 50px;
}
.mobilemenu {
	display:none;
}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* end sidenav  */



.footerholder {
	width:100%;
	background-color:#FFFFFF;
	border-top:2px solid #002157;
	max-width:100%;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;

}

.footer {
	width:100%;
	background-color:#FFFFFF;
	max-width:1000px;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-left:auto;
	margin-right:auto;
	padding-top:10px;
	padding-bottom:40px;
	padding-left:100px;
}

.footermenu {
	width:30%;
	color:#000000;
	font-size:14px;
}

.footermenu a {
	color:#000000;

}


#logoutbutton, #loginbutton {
    background-color: #FFFFFF;
	border:1px solid #AAAAAA;
    color: #000000;
    padding: 1px 15px 1px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
	line-height:20px;
	border-radius:5px;
	cursor:pointer;
	margin-top:3px;
	margin-right:10px;
}

.logind {
	margin-right:10px;
}

.centerholder {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	display:flex;	
	flex-wrap: wrap;
	align-items: flex-start;
}


.centerholder img {
	max-width:100%;
}

.whole {
	width:100%;
}


.clickable {
	cursor:pointer;
	transition-duration: 0.4s;
}

.clickable:hover {
	background-color:#cccccc;
}

.paging {
	font-size:20px;
	margin-left:10%;
	padding-top:3px;
	padding-bottom:3px;
}



.productname {
		width:100%;
		font-size:28px;
		padding-left:30px;
		line-height:50px;
}

.productdetails {
	width:50%;
}

.mainimage {
	width:100%;
	padding-left:3px;
	padding-right:3px;
}

.mainimage img {
	max-width:100%;
}

.subimage {
	width:33%;
	padding-left:3px;
	padding-right:3px;
}

.producttext {
	font-size:18px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	display:flex;
}


.productprice {
	font-size:30px;
	
}
 
.pagetitle {
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	font-size:24px;
}
 
.pagemessage {
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	font-size:20px;
	color:orange;	
}

.pageinfo {
	margin-left:auto;
	margin-right:auto;
	display:flex;
	flex-wrap: wrap;
	margin-top:10px;
	margin-bottom:10px;
	width:90%;
}
 
.addbutton, 
.cartbutton,
.userbutton,
.checkoutbutton,
.checkoutbuttonl,
.checkoutbuttonr {
	padding-top:10px;
	padding-left:15px;
	padding-right:15px;
	padding-bottom:10px;
	border:1px solid #002157;
	border-radius:10px;
	background-color:#ededed;
}

.checkoutbutton {
	background-color:#f7bb6c;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	cursor:pointer;
}

.checkoutbuttonl {
	background-color:#f7bb6c;
	margin-left:auto;
	margin-right:5px;
	margin-top:10px;
	margin-bottom:10px;
	cursor:pointer;
}

.checkoutbuttonr {
	background-color:#f7bb6c;
	margin-left:5px;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	cursor:pointer;
}

.cartlisting {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	border-bottom:dotted 1px #888888;
	display:flex;
	flex-wrap: wrap;
}

.cartimage {
	width:20%;
}

.cartimage img {
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
}

.cartname {
	width:30%;
	font-size:16px;
	line-height:40px;
}

.cartcost {
	width:10%;
	font-size:16px;	
	text-align:right;
	line-height:40px;
}
.carttax {
	width:10%;
	font-size:16px;	
	text-align:right;
	line-height:40px;
}

.carttotal,
.cartgrandtotal {
	width:10%;
	font-size:16px;	
	text-align:right;
	line-height:40px;
}

.cartquantity {
	width:10%;
	text-align:right;
	line-height:40px;
}

.cartdelete {
	width:10%;
	font-size:25px;
	line-height:40px;
	text-align:center;
}

.narrowdetails {
	width:100%;
	display:none;
}

.narrowcartcost {
	text-align:right;
	padding-right:10px;
	padding-left:10px;
}

.narrowcarttax {
	text-align:right;	
	padding-right:10px;
	padding-left:10px;
}

.narrowcartquantity {
	text-align:right;
	padding-right:10px;
	padding-left:10px;
}

.narrowcarttotal {
	text-align:right;
	padding-right:10px;
	padding-left:10px;
}

.blueback {
	background-color:#002157;
	color:#FFFFFF;
}

.blueborder {
	border: 1px solid #002157;
}

.orderdetailheader {
	background-color:#002157;
	color:#FFFFFF;
	min-width:150px;
	padding:2px 10px 5px 2px;
}

.orderdetail {
	padding:2px 10px 5px 2px;
	width:75%;
}

.orderdetail input{
	width:100%;
}


.topi {
	margin-left:25%;
}

.topi img {
	max-width:100%;
}

.toph {
	font-size:30px;
	line-height:70px;
	padding-left:10px;
	color:#000000;
	padding-right:10px;
}

.topd {
	color:#000000;
	margin-left:30%;
	font-size:22px;
	padding-right:10px;
}

.givespace {
	margin-top:30px;
}

.spacebottom {
	margin-bottom:30px;
}

.filterbox {
	margin-top:10px;
	border:1px solid #454545;
	margin-left:auto;
	margin-right:auto;
}

.fbt {
	padding-top:2px;
	text-align:center;
	font-size:18px;
	color:#FFFFFF;
	background-color:#002157;
}

.listfiltering {
	margin-top:10px;
	margin-bottom:20px;
	margin-left:5px;
	margin-right:20px;
}

.productlisting {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.listingtable {
	width:100%;
}

.listingtable {
	border-bottom:1px dotted #c3c3c3;
}

.listingname {
	padding-left:24px;
	font-size:18px;
}

.listingprice {
	padding-left:24px;
	font-size:18px;
	padding-top:5px;
	padding-bottom:5px;
}

.listingnote{
	padding-left:25px;
	font-size:16px;
}

.accounttitle {
	min-width:250px;
	margin-left:10%;
	background-color:#002157;
	color:#FFFFFF;
	margin-bottom:2px;
	line-height:35px;
}


.accountdetail {
	width:40%;
}
.accountdetail input {
	width:100%;
}
.accountdetail textarea {
	width:100%;
	height:60px;
}



.orderdetails {
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
	margin-top:5px;
	border-bottom:dotted 1px #444444;
}

.ordermaindate {
	width:100%;
	background-color:#002157;
	color:#FFFFFF;
	padding-left:20px;
	line-height:30px;
}

.orderaddress {
	width:100%;
	padding-left:20px;
	line-height:30px;
	border-left:1px solid #002157;
}

.ordertitle {
	width:100%;
	background-color:#002157;
	color:#FFFFFF;
	padding-left:20px;
	line-height:30px;
}


.orderitemdetails {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	border-left:1px solid #002157;
}


.odname {
	width:60%;
}

.odprice,
.odtax,
.odquantity,
.odtotalprice {
	width:10%;
}

.pagewidth {
	width:100%;
	display:flex;
}
.prodinfoholder1 {
	width:45%;
	padding:10px 5px 5px 10px;
}

.prodinfoholder2 {
	width:35%;
	padding:10px 5px 5px 10px;
}

.prodinfoholder3 {
	width:20%;
	padding:10px 5px 5px 10px;
}

.pdtable {
	width:100%;
	padding:0;
	margin:0;
}

.pdtable th {
	border:1px solid #000000;	
	background-color:#cccccc;
	color:#000000;
	text-align:left;
	padding-left:5px;
	font-weight:400;
	width:180px;
}

.pdtable td {
	border:1px solid #000000;	
	padding-left:5px;
}

.prodinfoheader {
	background-color:#cccccc;
	color:#000000;
	border:1px solid #002157;
	font-size:18px;
	padding-left:2px;
}


.producerphoto {
	width:50%;
	padding-left:20px;
	padding-right:20px;
}

.producerphoto img {
	max-width:100%;
	padding-left:20px;
	padding-right:20px;
}

.phototitle {
	font-size:20px;
	line-height:40px;
	margin-bottom:10px;
	border-bottom:dotted #000000 1px;
}


#passwordresetdiv {
	display:none;
}

#passwordresetsent {
	display:none;
}

@media screen and (max-width:900px) {
	.prodinfoholder1 {
		width:600px;
		max-width:100%;
	}

	.prodinfoholder2 {
		width:600px;
		max-width:100%;
	}

	.prodinfoholder3 {
		width:240px;
		max-width:100%;
	}
}

@media screen and (max-width:840px) {
	
	.mobilemenu {
		display:inline-block;
		width:10%;
		padding-right:5px;
		text-align:right;
	}
	.smbuttons {
		text-align:right;
		width:30%; 
	}
	
	.menuholder {
		display:none;
	}
	
	.headerholder {
		height:80px;
		border-bottom:2px solid #FFFFFF;
	}
	
	.fixedElement {
/*		height:82px; */
	}

	.underFixedElement {
/*		height:82px; */
	}

	.ht {
		display:inline-block;
		width:90%;
	}
	
	.ht1, .htall {
		line-height:40px;
		width:100%;
	}
	
	.ht2 {
		line-height:20px;
		width:100%;
		text-align:left;
	}
	
	.loginelement:first-child {
		margin-left:5px;
	}	

	.footer {
		padding-left:30px;
		font-size:12px;
		padding-bottom:50px;
	}

	.footermenu {
		width:48%;
/*		margin-right:30px; */
	}
	
	.topi {
		margin-left:10%;
	}
	.topd {
		margin-left:15%;
	}
}



@media screen and (max-width:800px) {
	.toph {
		font-size:24px;
	}
	
	.topd {
		font-size:20px;
	}
	.listfiltering {
		width:100%;
	}
	
	.narrowdetails {
		width:100%;
		display:flex;
	}	
	
	.cartname {
		width:70%;
	}
	
	.cartcost,
	.carttax,
	.cartquantity,
	.carttotal {
		display:none;
	}
	
	
	
}

@media screen and (max-width:700px) {
	
	.odprice,
	.odtax {
		display:none;
	}
	
	.odquantity,
	.odtotalprice {
		width:20%;
	}
	
	.orderdetailheader {
		width:100%;
	}

	.orderdetail {
		width:100%;
	}


}

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

	.productdetails {
		width:100%;
	}

	.accounttitle {
		width:100%;
		margin-right:10%;
	}
		
	.accountdetail {
		width:100%;
		margin-left:10%;
		margin-right:10%;
	}
	.accountdetail input {
		width:100%;
	}
	.accountdetail textarea {
		width:100%;
		height:60px;
	}
		
	.producerphoto {
		width:100%;
	}
}