@charset "UTF-8";

/* ==================================================
shared
================================================== */
#wrapper {
	min-height: 100%;
}
.top #wrapper {
	background:url(../images/top/bg.jpg) repeat left top;
}
.container {
	width:100%;
	max-width:1280px;
	margin:0 auto;
	padding:0 20px;
	clear:both;
}
/* in_btn
============================== */
.in_btn a:hover {
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5) !important;
}
/* header
============================== */
#header_inner {
	background:url(../images/main/bg.jpg) repeat-x left bottom;
}
header .container {
	position:relative;
}
#header_name {
	float:left;
	padding:15px 0 20px;
}
#header_navi {
	position:absolute;
	top:10px;
	right:15px;
	z-index:10;
}
#header_name p {
	display:inline-block;
	vertical-align:top;
}
#header_name .shop {
	letter-spacing:0.2em;
	line-height:1.2;
	background-color:#000D57;
	color:#fff;
	padding:4px 10px 4px 14px;
	margin:0 5px 0 0;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}
#header_name .shop_name {
	color:#1F242D;
	font-weight:bold;
	font-size:128.6%;
	line-height:1.4;
	text-shadow: 
		-2px -2px 1px #fff, 
		2px -2px 1px #fff, 
		2px 2px 1px #fff, 
		-2px 2px 1px #fff;
}
/*
#header_account {
	background-color:#20242F;
	color:#fff;
}
#header_account p {
	display:inline-block;
	padding:7px 100px 7px 15px;
	color:#fff;
	background: -moz-linear-gradient(left, #572D57, #572D57 80%, #20242F);
	background: -webkit-linear-gradient(left, #572D57, #572D57 80%, #20242F);
	background: linear-gradient(to right, #572D57, #572D57 80%,  #20242F);
	background-color:#572D57;
}
#header_account span {
	font-weight:bold;
}
*/
#header_account,
#header_logout,
#header_logo {
	width: 10%;
	display: table-cell;
	vertical-align: middle;
}
#header_account {
	text-align: left;
	padding-left: 15px;
	font-size: 87.5%;
	color: #6C6D70;
	font-weight: bold;
}
#header_logout {
	text-align: right;
	padding-right: 15px;
	font-size: 75%;
}
#header_logout p {
	display: inline-block;
}
#header_logout a {
	border: solid #fff 2px;
	position: relative;
	padding: 8px 20px 6px 50px;
	display: block;
	text-decoration: none;
	background: -webkit-gradient(linear, center top, center bottom, from(#FF6600), to(#FF3300));
	background: -moz-linear-gradient(center top, #FF6600, #FF3300);
	background: linear-gradient(to bottom, #FF6600, #FF3300);
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
#header_logout a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#FF3300), to(#FF6600));
	background: -moz-linear-gradient(center top, #FF3300, #FF6600);
	background: linear-gradient(to bottom, #FF3300, #FF6600);
}
#header_logout a::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -10px;
	width: 20px;
	height: 18px;
	background: url(../images/icon/logout_icon.png) no-repeat;
}
#header_navi p {
	float:left;
	min-width:100px;
	display:table;
	font-weight:bold;
	text-align:center;
	line-height:1.2;
	padding:5px;
	background-color: rgba( 255, 255, 255, 0.7 );
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
#header_navi p a {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	height:70px;
	padding:28px 5px 2px;
	text-decoration:none;
	color:#000C57;
	border:2px solid #000C57;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	position:relative;
	background: -moz-linear-gradient(top left, #fff, #fff 50%, #F7EEF4 50%); 
	background: -webkit-linear-gradient(top left, #fff, #fff 50%, #F7EEF4 50%); 
	background: linear-gradient(to bottom right, #fff, #fff 50%, #F7EEF4 50%);
	background-color:#fff;
}
#header_navi p:hover {
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
#header_navi p:hover a{
	border-color:#93C;
	background: -moz-linear-gradient(top left, #F7EEF4, #F7EEF4 50%, #EFDEEA 50%); 
	background: -webkit-linear-gradient(top left, #F7EEF4, #F7EEF4 50%, #EFDEEA 50%); 
	background: linear-gradient(to bottom right, #F7EEF4, #F7EEF4 50%, #EFDEEA 50%);
	background-color:#F7EEF4;
}
#header_navi .regrading {
	margin-right:10px;
}
#header_navi p span {
	display:block;
}
#header_navi p a::before {
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:5px;
	margin:auto;
	width:22px;
	height:22px;
	background-repeat:no-repeat;
	background-position:center center;
}
#header_navi .regrading a::before {
	background-image:url(../images/header/regrading_icon.png);
}
#header_navi .logout a::before {
	background-image:url(../images/header/logout_icon.png);
}
/* reserve */
.reserve #header_inner {
	border-bottom:10px solid #20242F;
}
.reserve #header_name {
	float:none;
	display:table;
	margin:0 auto;
}
/* main
============================== */
#main {
	padding:20px 0;
}
.reserve #main {
	padding:20px;
}
#main.error {
	padding-top:50px;
}
/* pnavi
============================== */
#pnavi {
	position:fixed;
	right:0;
	bottom:70px;
	z-index:100;
}
#pnavi a {
	background:url(../images/main/pnavi.gif) no-repeat left top;
	display:block;
	width:30px;
	height:130px;
}
#pnavi span {
	display:block;
	width:30px;
	height:130px;
	position:relative;
	z-index:-1;
	overflow:hidden;
}
/* footer
============================== */
footer {
	background:#20242F url(../images/main/footer_bg.jpg) repeat-x left top;
	color:#fff;
	padding:60px 0 20px;
	clear:both;
}
footer address {
	font-size:85.7%;
	font-style:normal;
	text-align:center;
}
/* topcontrol
============================== */
#topcontrol {
	width:40px;
	height:120px;
	z-index:100;
}
#topcontrol p {
	display:block;
	width:40px;
	height:120px;
	background:url(../images/main/ptop.gif) no-repeat left top;
}
#topcontrol p span {
	text-align:center;
	display:block;
	width:40px;
	height:120px;
	position:relative;
	z-index:-1;
	overflow:hidden;
}
/* ==================================================
clearfix
================================================== */
header:after,
.container:after,
#progress ul:after,
footer:after {
	content: ""; 
	display: table;
	clear: both;
}