@charset "utf-8";

/* ----------------------------------------
general
---------------------------------------- */
body{
	background:#faf7ed;
	}

a{
	color:#333;
	text-decoration:none;
	}

a:hover{
	color:#ff3c7c;
	text-decoration:underline;
	}
p,td,th,h1,h2,h3{
	color:#333;
	}
.l_box{
	float:left;
	}
.r_box{
	float:right;
	}
.b{
	font-weight:bold;
}
/* ----------------------------------------
header
---------------------------------------- */
#header{
	margin:0 auto;
	background-color:#fff;
	background:url(../img/header_bg.png) repeat-x ;
	}

#header-inner{
	margin:0 auto;
	width:960px;
	position:relative;
	padding:15px 0;
	display:block;
	height:68px;
	background:url(../img/header_bg.png) repeat-x #FAF7ED;
	}

#sitelogo{
	position:absolute;
	width:186px;
	padding:0 20px 0 12px;
	}
#global-nav{
	padding-left:218px;
	}
#global-nav-sp{
	display: none;
	}
#global-nav li{
	float:left;
	}

#header #sp-menu{
	display: none;
}

/* ----------------------------------------
content
---------------------------------------- */
#content{
	margin:0 auto;
	width:960px;
	}
#content #title{
	margin:38px 0 26px 20px;
	}
/* ----------------------------------------
main
---------------------------------------- */
#main{
	float:left;
	width:716px;
	margin-bottom:48px;
	}

/* ----------------------------------------
sub
---------------------------------------- */
#sub{
	float:right;
	width:236px;
	margin-bottom:36px;
	}
#sub #pickup_nav{
	background:#fff;
	width:236px;
	}
/* ----------------------------------------
footer
---------------------------------------- */
.sp-fnav{
	display: none;
}


#footer{
	margin:0 auto;
	background:url(../img/footer_bg.png) bottom left repeat-x;
	width:100%;
	}
#footer .nav_inner{
	margin:0 auto;
	background:#fff url(../img/footer_nav_bg.png) top left repeat-x;
	width:100%;
	}
#footer .nav_inner .nav{
	margin:0 auto;
	display:table;
	width:960px;
	background:#fff url(../img/footer_nav_bg.png) top left repeat-x;
	position:relative;
	}
#footer .nav_inner .nav .up{
	margin-top:-26px;
	right:6px;
	position:absolute;
	background-color:#FAF7ED;
}
#footer .nav_inner .nav ul{
	float:left;
	width:192px;
	background:url(../img/dot_h.png) top left repeat-y #fff;
	margin-top:26px;
	margin-bottom:26px;
	}
#footer .nav_inner .nav ul.first{
	background:none;
	}
#footer .nav_inner .nav ul li{
	background:url("../img/arrow_pink.png") no-repeat scroll 0 8px;
	padding-left:10px;
	margin-left:18px;
	color:#333;
	line-height:2;
	}
#footer #copyright{
	margin:0 auto;
	background:url(../img/copyright_bg.png) top left repeat-x  #cecccc;
	}
#footer #copyright .inner{
	margin:0 auto;
	position:relative;
	text-align:center;
	width:960px;
	background:url(../img/copyright_bg.png) top left repeat-x  #cecccc;
	padding-bottom:40px;
	padding-top:14px;
	}
#footer #copyright .inner p{
	color:#000;
	font-size:100%;
	}

/* ----------------------------------------
socialBtn
---------------------------------------- */
#socialBtn ul{
	position:absolute;
	top:10px;
	left:10px;
	width:380px;
	height:21px;
}
#socialBtn ul li{
	float:left;
	list-style:none;
	padding-left:4px;
}
#socialBtn ul li #plusone{
	width:60px !important;
}
#socialBtn ul li .twitter-share-button{
	width:90px !important;
}
#plusone{
	display:block !important;
	}
.clearFix:after{
	clear:both;
	content: ".";
	display:block;
	height:0;
	line-height:0;
	visibility:hidden;
}
.clearFix{
	min-height:1%;
	display: inline-block;
}
html[xmlns] .clearfix {
	display:block;
}

* html .clearfix {
	height:1%;
}
/* ----------------------------------------
pickup-nav
---------------------------------------- */
ul#pickup-nav{
	margin-bottom:10px;
}
ul#pickup-nav-top{
	margin-bottom:10px;
}
/* ----------------------------------------
twitter
---------------------------------------- */
div.twitter{
	padding-left:4px;
	margin-bottom:10px;
}


@media screen and (max-width:767px) and (min-width: 1px){

	body{
		overflow: hidden;
	}

	/* ----------------------------------------
	header
	---------------------------------------- */

	#header{
		position: relative;
		z-index: 10;
		width: auto;
		height: auto;
		margin:0 auto;
		background: #fff;
		box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
	}

	#header-inner{
		display:block;
		position:relative;
		width: auto;
		height: auto;
		padding:9px 0;
		background: none;
		border-top: 4px solid #ff3c7c;
	}

	#global-nav{
		padding-left: 0;
	}

	/* global-nav */
	#global-nav{
		display: none;
	}
	#global-nav-sp{
		display: block;
	}

	#global-nav-sp li{
		float: left;
		background-size:contain;
	}

	#global-nav-sp li{
		width: 33.3333%;
		line-height: 0;
	}

	#global-nav-sp li img{
		width: 100%;
	}

	#global-nav-sp li a{
		display: block;
		width: 100%;
	}

	#sitelogo{
		position:static;
		width:186px;
		padding:0 20px 0 12px;
	}

	#sitelogo img{
		width: 100%;
	}

	#header .menu{
		display: block;
		position: absolute;
		top: 11px;
		right: 0;
		width: 40px;
	}

	/* spmenu */

	#header div#sp-menu{
		display: block;
		position: absolute;
		top: -5px;
		right: -205px;
		z-index: 10;
		width: 200px;
		background-color: #fff;
		border-left: 5px solid #ff3c7c;
	    -webkit-transition-property:right;
	    -webkit-transition-duration:0.4s;
	    -webkit-transition-timing-function: ease;
	    transition-property:right;
	    transition-duration:0.4s;
	    transition-timing-function: ease;
	    -moz-transition-property:right;
	    -moz-transition-duration:0.4s;
	    -moz-transition-timing-function: ease;
	}

	#header div#sp-menu.open{
		right: 0;
	}

	#header div#sp-menu ul li img{
		width: 100%;
	}

	#header div#sp-menu ul li.half{
		float: left;
		width: 50%;
	}

	#header .slide-btn{
		position: absolute;
		top: 10px;
		left: -45px;
		width: 40px;
		cursor: pointer;
	}

	#header .slide-btn img{
		width: 100%;
	}
	#header .close-btn{
		cursor: pointer;
	}

	/* ----------------------------------------
	content
	---------------------------------------- */

	#content{
		width: auto;
	}

	#main{
		float: none;
		width: auto;
		margin-bottom: 0;
	}

	#sub{
		float: none;
		width: auto;
		padding: 0 7px;
		margin-bottom: 0;
	}

	/* ----------------------------------------
	footer
	---------------------------------------- */

	/* sp-fnav */
	.sp-fnav{
		display: block;
		margin: 0 7px 30px;
	}
	.sp-fnav p.title{
		font-size: 160%;
	}

	.sp-fnav ul.col2 li{
		float: left;
		width: 50%;
	}

	.sp-fnav ul.col2 li img{
		width: 100%;
	}

	.sp-fnav ul.col3 li{
		float: left;
		width: 33.3333%;
	}

	.sp-fnav ul.col3 li img{
		width: 100%;
	}

	#footer #copyright .inner{
		width: auto;
	}

	#socialBtn ul{
		position: static;
		margin-bottom: 10px;
		width: auto;
		height: auto;
		text-align: center;
	}

	#socialBtn ul li{
		display: inline-block;
		float: none;
		margin-bottom: 10px;
	}

	#footer .nav_inner .nav{
		width: auto;
	}

	#footer .nav_inner ul{
		display: none;
	}

	#footer .nav_inner .nav .up{
		position: static;
		margin: 0 auto;
		width: 59px;
	}
	#footer .nav_inner .nav .up img{
		margin-top: -25px;
	}

	/* twitter */
	#sub div.twitter{
		display: none;
	}

	#pickup-nav{
		display: none;
	}


}