@charset "utf-8";

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

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

#backAreaTop {
	border-top:none;	
	border-bottom:2px #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: 800px) {
.backArea {
	padding:2px 0 0;
}

.backArea .content {
	width:728px;
	padding:0 20px;
}

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

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

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

.backAreaButton {
	margin:2px 0 0;
}

.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 0 0 20px;*/
	font-size:1.2rem;
}

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

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

}

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

#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: 800px) {
.backArea .content {
	width:800px;
	padding: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 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 a:hover {
	color:#ff9900;
}
}

@media screen and (min-width: 801px) {
	.backAreaText {
		margin:0 0 0 20px;
	}
}
@media screen and (max-width: 800px) {
	.backArea {
		border-bottom:2px #ccc solid;
	}
	.backArea .content{
		padding-top: 4px;
	}
	.backArea .content p.backAreaText {
		border-left: #ccd 1px solid;
	}
	.backArea .content p.backAreaButton{
	}

	p.backAreaText a span,
	p.backAreaButton a span{
		display: inline-block;
		padding: 16px;
	}
}
@media screen and (max-width: 480px) {
	p.backAreaText a span,
	p.backAreaButton a span{
		display: inline-block;
		padding: 8px 6px;
	}
}
/* ===============================================
	SNS
=============================================== */
#SNS ul {
	letter-spacing:-0.4em;
}

#SNS li {
	display:inline-block;
	letter-spacing:normal;
	vertical-align: top;
}
@media screen and (min-width: 800px) {
	#SNS {
		margin:10px 0 0;
		float:right;
	}
	#SNS ul {
		white-space:nowrap;
		display:-webkit-box;
		display:-moz-box;
		display:-ms-box;
		display:-webkit-flexbox;
		display:-moz-flexbox;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:flex;
		-webkit-box-pack:end;
		-moz-box-pack:end;
		-webkit-flex-pack:end;
		-moz-flex-pack:end;
		-webkit-justify-content:flex-end;
		-moz-justify-content:flex-end;
		justify-content:flex-end;
		display:-ms-flexbox;
		display:flex;
	}
	#SNS ul li{ 
		display: block;
		flex-wrap:wrap
		-ms-flex-align:flex-end;
		flex-line-pack:flex-end;
		space-between:end;
	}
	#SNS li.snsFacebook{
		margin: -2px 0 0 0;
	}

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

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

#Breadcrumb .content {
	margin:0 auto;
	padding:0 8px;
	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:728px;
	padding: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 .content {
	width:768px;
	padding:0;
}
}
*/


@media screen and (min-width: 801px){
	#Breadcrumb .content {
		width: 800px;
	}
	#Breadcrumb li {
		font-size:1.2rem;
	}
}
@media screen and (max-width: 800px){
	#Breadcrumb .content {
		width: 98%;
		padding: 0 2px;
		margin: 0 auto;
	}
	#Breadcrumb li {
		font-size:1rem;
	}
}
@media screen and (max-width: 480px){
	#Breadcrumb .content {
		width: 100%;
	}
}