@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:13px;
	line-height:1.875;
	font-weight:250 !important;
	-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; }

h3{
	font-size:15px;
	font-weight:700;
	line-height:1.65;
	}
p{
	font-size:13px;
	line-height:1.8;
	font-weight:250 !important;
	}


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

strong{
	font-weight:500;
	}

/* BASE
----------------------------------------------------- */
#wrapper{
	width:100%;
	position:relative;
	text-align:left;
	}

	
	
/* 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;
		}
@media screen and (max-width: 384px){
#socialBookmark{
	width:300px;
	margin:10px auto 0 auto;
	}
	#socialBookmark li#eigacom{
		
		margin-left:90px;
		margin-top:4px;
	}
}

/* HEADER
---------------------------------------------------*/
header{
	
	}
	header.scroll{
		background:rgba(247,220,49,1);
	}
#snsLink{
	position:fixed;
	top:14px;
	right:60px;
	z-index: 9702 !important;
}
#snsLink li{
	float:right;
	margin:0 0 0 6px;
	width:30px;
	}
		

		
/* NAVIGATION
---------------------------------------------------*/
#overlay{
	width:100%;
	height:200%;
	background:rgba(0,0,0,.3);
	position:fixed;
	top:0;
	right:-100%;
	opacity:0;
	z-index: 9699 !important;
	}
#overlay.openedBg{
	opacity:1;
	right:0;
	}
#toggle {
	position: fixed !important;
	z-index: 9702 !important;
	width: 42px;
	height: 39px;
	top:8px;
	right: 8px;
	cursor: pointer;
	padding:5px 9px;
	background:rgba(0,0,0,1.0)
	
	}
#toggle p{
	color:#000;
	font-size:10px;
	font-weight:bolder;
	position:absolute;
	top:36px;
	left:5px;
	letter-spacing:0.5px;
	opacity:1;
}

#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: 100%;
	height: 800px !important;
	top: -740px;
	right: 0%;
	background: rgba(247,220,49,0);
 -webkit-transition: all 300ms linear;
 -moz-transition: all 300ms linear;
  transition:         all 300ms linear;
  z-index: 9701 !important;
	}
#globalnav.scroll{
	background: rgba(247,220,49,1);
	}

#globalnav.opened {
	visibility: visible;
	top: 0;
	right: 0;
	background: rgba(0,0,0,0.9);
	 -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;
	border-bottom:1px solid #222;
	font-weight:500 !important;
	color:#555;
	}
	#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{
	position:fixed;
	bottom:10px;
	right:10px;
	opacity:0;
	-webkit-transition: all 100ms linear;
	 -moz-transition: all 100ms linear;
  	transition:         all 100ms linear;
 	z-index: 9000 !important;
	}
#pagetopBtn.scroll {
	opacity:1;
	}


/* CONTENTS
----------------------------------------------------- */
#logo{
	width:110px;
	height:auto;
	position:fixed;
	top:10px;
	left:10px;
	z-index: 9702 !important;
	}
	#logo img{
		width:80px;
		height:auto;
		margin:0 0 0 0;
	}

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