@charset "utf-8";

/* ===============================================
	FOOTER NAV
=============================================== */
.backArea {
	background:#fff;
	border-top:1px #ccc solid;
}

.backArea .content {
	margin:0 auto;
	overflow:hidden;
	*zoom:1;
}
.backArea .content:after {
	clear:both;
}

#backAreaTop {
	border-top:none;	
	border-bottom:1px #ccc solid;
}

#backAreaTop .Logo {
	text-align:left;
	float:left;
}

#backAreaTop .topIcon em {
	display:block;
	height:100%;
	background:#DCDDDD url(../img/common/icon_top.png) center center no-repeat;
	border-radius:2px;
	text-indent:-9999px;
}

.backAreaButton {
	float:left;
}

.backAreaButton a {
	display:block;
	color:#ED2900;
	font-size:1.2rem;
	font-weight:bold;
}

.backAreaText {
	float:right;
}

.backAreaText a {
	display:block;
	color:#595757;
	text-decoration:underline;
}

@media screen and (min-width: 768px) {
.backArea {
	padding:2px 0 0;
}

.backArea .content {
	width:768px;
}

#backAreaTop {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:40px;
	padding:0;
	z-index:9999;
}

#backAreaTop .content {
	overflow:visible;
}

#backAreaTop .Logo {
	margin:10px 0 0 20px;
}

#backAreaTop .topIcon {
	width:32px;
	height:32px;
	margin:4px 0 0 10px;
	float:left;
}

.backAreaButton {
	margin:2px 0 0 20px;
}

.backAreaButton a {
	padding:0.6em 0;
	line-height:1.2em;
}

.backAreaButton a img {
	width:130px;
	margin:0 5px 0 0;
	vertical-align:top;
}

.backAreaText {
	margin:0 20px 0 0;
	font-size:1.2rem;
}

.backAreaText a {
	padding:10px 0;
}
}

@media screen and (max-width: 767px) {
.backArea {
	padding:5px 0;
}

.backArea .content {
	padding:0 10px;
}

#backAreaTop {
	padding:0 0 5px;
}

#backAreaTop .content {
	padding:0;
}

#backAreaTop .Logo {
	width:40%;
	margin:0 0 0 10px;
}

#backAreaTop .content .Logo img {
	width:100%;
}

#backAreaTop .topIcon {
	display:none;
	text-indent:-9999px;
}

.backAreaButton a {
	padding:0.2em 0;
	line-height:1em;
}
.backAreaButton a:before {
	content:"<<";
}

.backAreaButton a img {
	display:none;
}

.backAreaText {
	margin:0 0 0 10px;
	font-size:1.0rem;
}

.backAreaText a {
	padding:0.2em 0;
}
}

@media screen and (min-width: 769px) {
.backArea .content {
	width:768px;
	padding:0;
}

#backAreaTop .Logo {
	margin:10px 0 0;
}
#backAreaTop .Logo:hover {
	opacity:0.75;
	filter:alpha(opacity=75);
	-ms-filter:"alpha(opacity=75)";
}

#backAreaTop .topIcon em:hover {
	background:#3E3A39 url(../img/common/icon_top.png) center center no-repeat;
}

.backAreaButton {
	margin:2px 0 0;
}
.backAreaButton a {
	padding:0.5em 0 0.7em;
	font-size:1.3rem;
}
.backAreaButton a:hover {
	opacity:0.75;
	filter:alpha(opacity=75);
	-ms-filter:"alpha(opacity=75)";
}

.backAreaText:first-child {
	margin:0;
}
.backAreaText a:hover {
	color:#ff9900;
}
}


/* ===============================================
	SNS
=============================================== */
#SNS ul {
	letter-spacing:-0.4em;
}

#SNS li {
	display:inline-block;
	letter-spacing:normal;
	vertical-align:top;
}

@media screen and (min-width: 768px) {
#SNS {
	margin:10px 0 0;
	float:right;
}

#SNS ul {
	white-space:nowrap;
}
}

@media screen and (max-width: 767px) {
#SNS {
	margin:0 0 10px;
	padding:5px 0 2px;
	background:rgba(0, 0, 0, 0.5);
}

#SNS li {
	margin:0 0 2px;
}
}


/* ===============================================
	BREAD CRUMB
=============================================== */
#Breadcrumb {
	margin:0 auto;
	padding:5px 0;
	background:#595757;
}

#Breadcrumb .content {
	margin:0 auto;
	text-align:left;
}

#Breadcrumb ul {
}

#Breadcrumb li {
	display:inline-block;
	margin:0 0 0 5px;
	color:#fff;
}
#Breadcrumb li:before {
	content:" > ";
}
#Breadcrumb li:first-child {
	margin:0;
}
#Breadcrumb li:first-child:before {
	content:"";
}

#Breadcrumb li a {
	color:#fff;
	text-decoration:underline;
}

@media screen and (min-width: 768px) {
#Breadcrumb .content {
	width:768px;
}

#Breadcrumb ul {
	margin:0 20px;
}

#Breadcrumb li {
	font-size:1.2rem;
}
}

@media screen and (max-width: 767px) {
#Breadcrumb .content {
	padding:0 10px;
}

#Breadcrumb li {
	font-size:1rem;
}
}

@media screen and (min-width: 769px) {
#Breadcrumb ul {
	margin:0;
}
}