@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* BODY
---------------------------------------------------- */
body {
	background:#fff;
	color:#000;
	font-family:'Noto Sans JP',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ",  "游ゴシック体","Yu Gothic", YuGothic, Verdana, sans-serif !important;
	font-size:16px;
	line-height:28px;
	
	font-weight:250;
	-webkit-text-size-adjust: none;
	letter-spacing:0.5px;
	}

/* LINK
---------------------------------------------------- */
a:link		{ color:#ef643f; 	text-decoration:none; }
a:visited	{ color:#ef643f; 	text-decoration:none; }
a:hover		{ color:#ff8362; text-decoration:none;}
a:active	{ color:#ddd; 	text-decoration:none; }
.anim{
	
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
}

.forSP{ display:none;}
.forPC{ display:block;}

strong{
	font-weight:500;
	}
/* BASE
----------------------------------------------------- */
#wrapper{
	width:100%;
	text-align:left;
	position:relative;
	}
#contents{
	width:100%;
	position:relative;
	}
/* SNS
----------------------------------------------------- */

#socialBookmark{
	width:385px;
	position:relative;
	}
	#socialBookmark li{
		float:left;
		overflow:hidden;
	}
	#socialBookmark li#tw {
		width:70px;
		}
	#socialBookmark li#fb {
		width:105px;
		}
	#socialBookmark li#eigacom {
		width:110px;
		}
	#socialBookmark li#line {
		width:95px;
		}



	#snsLink{
	position:fixed;
	top:15px;
	right:80px;
}
#snsLink li{
	float:right;
	margin:0 0 0 10px;
}	
		
/* NAVIGATION
---------------------------------------------------*/
#overlay{
	width:100%;
	height:200%;
	background:rgba(0,0,0,.3);
	position:fixed;
	top:0;
	right:-100%;
	opacity:0;
	z-index: 9500 !important;
	}
#overlay.openedBg{
	opacity:1;
	right:0;
	}
#toggle {
	position: fixed !important;
	z-index: 9699 !important;
	width: 42px;
	height: 39px;
	top: 12px;
	right: 12px;
	cursor: pointer;
	padding:5px 9px;
	background:rgba(0,0,0,1.0)
	
	}
#toggle p{
	color:#000;
	font-size:11px;
	font-weight:bolder;
	position:absolute;
	top:36px;
	left:3px;
	letter-spacing:0.5px;
}
#globalnav.scroll #toggle p,
#toggle.open p{ opacity:0; }
	#toggle > span {
	display: block;
	position: absolute;
	width: 24px;
	height: 3px;
	background: #f7dc31;
	margin-top:13px;
	-webkit-transition: 250ms ease all;
	-moz-transition: 250ms ease all;
	transition: 250ms ease all;
	}

	#toggle > span:before,
	#toggle > span:after {
	content: " ";
	position: absolute;
	width: 100%;
	height: 3px;
	background: #f7dc31;
	-webkit-transition: 250ms ease all;
	-moz-transition: 250ms ease all;
	transition: 250ms ease all;
	}
	
	#toggle > span:before { margin: -9px 0 0 0; }
	
	#toggle > span:after { margin: 9px 0 0 0; }
	
	#toggle.open{ background:none; }
	#toggle.open span { background-color: transparent; }
	
	#toggle.open > span:before,
	#toggle.open > span:after {
	margin: 0;
	background: #f7dc31;
	}
	#toggle.open > span:before {
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
	}
	#toggle.open > span:after {
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
	}
	#globalnav {
	position: fixed;
	width: 340px;
	height: 200% !important;
	top: 0px;
	right: -100%;
	background: rgba(0,0,0,0.9);
 -webkit-transition: all 300ms linear;
 -moz-transition: all 300ms linear;
  transition:         all 300ms linear;
  z-index: 9501 !important;
	}
	
#globalnav.opened {
	visibility: visible;
	top: 0;
	right: 0;
	 -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
	  -moz-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
	  transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
	}
#globalnav nav ul{
	position:relative;
	z-index:9002;
	text-align:left;
	margin:50px 20px 0 20px;
	}
#globalnav nav li{
	position:relative;
	clear:both;
	font-size:18px;
	letter-spacing:0;
	padding:10px 0;
	color:#555;
	border-bottom:1px solid #222;
	font-weight:500 !important;
	}
	#globalnav nav li:last-child{
		border-bottom:none;
		}
#globalnav nav li a{
	opacity:0.7;
	color:#f7dc31;
	-webkit-transition: all 300ms linear;
 -moz-transition: all 300ms linear;
  transition:         all 300ms linear;
  	font-weight:500 !important;
	}	
#globalnav nav li a:hover{
	opacity:1;
	color:#f7dc31;
	}
#globalnav nav li .small{
	font-size:10px;
	margin-top:-5px;
	display:block;
	font-weight:normal !important;
	letter-spacing:1.3px;
	padding-left:1px;
	font-weight:300;
	}
#globalnav nav li a .small{	color:#9a8a28 !important;}

#pagetop{
	position:absolute;
	height:1px;
	width:1px;
	top:-1px;
	left:1px;
}

#pagetopBtn{
	bottom:20px;
	right:20px;
	opacity:0;
	position:fixed;
	-webkit-transition: all 100ms linear;
 -moz-transition: all 100ms linear;
  transition:         all 100ms linear;
 z-index: 9000 !important;
	}
.scrollDown #pagetopBtn{
	opacity:1;
	}
@media screen and (max-width: 450px){
	#pagetopBtn{
	bottom:10px;
	right:10px;
	}
	}

/* CONTENTS
----------------------------------------------------- */
#logo{
	width:140px;
	height:75px;
	position:fixed;
	top:0;
	left:20px;
	background:#f7dc31;
	
	}
	#logo img{
		width:110px;
		height:auto;
		display:block;
		margin:10px auto 0 auto;
	}

/* FOOTER
----------------------------------------------------- */
footer{
	width:100%;
	padding:45px 0 55px 0;
	background:#cacaca;
	}
#credit{
	display:block;
	margin: 0 auto;
	}
footer #socialBookmark{
	margin:10px auto 0 auto;
	}