@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      common.css
 Update:         2017.2.10
 Style Info:     共通CSSファイル
----------------------------------------------------------- */
/**********************************************************
全ページ共通設定（デフォルト）モバイルファースト
**********************************************************/
body{
	font-size: 100%;
	font-size: 14px !important;
	font-weight: normal;
	line-height:1.4;
	font-family: "Trebuchet MS", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust:none;
	background:#ffffff;
	text-align:left;
	position:relative;
	word-wrap: break-word;
}

/********************************************
モバイルファースト
*********************************************/
/***ヘッダー***/
#head {
	position:fixed;
	width:100%;
	height:48px;
	top:0;
	left:0;
	z-index:100;
	background:#FFF;
	/*-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:    0px 3px 3px 0px rgba(0, 0, 0, 0.1);
	box-shadow:         0px 3px 3px 0px rgba(0, 0, 0, 0.1);*/
}
#head.over {
	background:#f9f9f9;
}
h1#logo_sp {
	text-align:center;
	height:48px;
	padding:5px 0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
h1#logo_sp img {
	max-height:100%;
}
h1#logo_pc {
	display:none;
}
/*ハンバーガーメニュー*/
#hamburger {
	position:absolute;
	top:15px;
	right:10px;
}
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 30px;
	height: 21px;
	cursor:pointer;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #000;
	border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 10px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}

/***ナビゲーション***/
#navi {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:48px;
	left:0;
	padding-top:30px;
	text-align:center;
	background:#f9f9f9;
	z-index:99;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#global {
	width:50%;
	margin:0 auto;
	font-size:16px;
	padding:0 10px;
	text-align:center;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#global>li {
	position: relative;
}
#global>li:first-child:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 0;
	border-top: 1px solid #cdcdcd;
	border-bottom: 2px solid #fff;
}
#global>li:after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 0;
	border-top: 1px solid #cdcdcd;
	border-bottom: 2px solid #fff;
}
#global>li>a {
	color:#000;
	display:block;
	width:100%;
	height:100%;
	padding:10px 0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	transition: color 0.5s;
}
#global>li>a:hover {
	color:#006e36;
}
#global .sub_global {
	display:none;
}


#sns {
	display:table;
	position:relative;
	width:100%;
	padding:0 10px;
	margin-top:30px;
	/*bottom:30px;*/
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#sns li {
	display:table-cell;
	width:20%;
	vertical-align:middle;
	text-align:center;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#sns li#icon_twitter img {
	width:35px;
	height:auto;
}
#sns li#icon_facebook img {
	width:15px;
	height:auto;
}
#sns li#icon_blog img {
	width:32px;
	height:auto;
}
#sns li#icon_instagram img {
	width:32px;
	height:auto;
}
#sns li#icon_line img {
	width:32px;
	height:autopx;
}

/***コンテンツ***/
#wrap {
	margin-top:48px;
}

/***フッター***/
#foot {
	width:100%;
	background:#000;
	padding:10px 5px;
	color:#FFF;
	position:relative;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#foot #logo_f img {
	width:137px;
	height:auto;
}
#foot #btn_top {
	position:absolute;
	width:40px;
	height:40px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	top:10px;
	right:5px;
	cursor:pointer;
}
/*LINEアニメーション*/
#btn_top {
	position: relative;
	padding: 10px;
	border: 1px solid #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	transition: all .2s;
	background-color:rgba(0,0,0,0.65);
}
#btn_top::before,
#btn_top::after {
	position: absolute;
	z-index: 2;
	content: '';
	width: 0;
	height: 0;
	border: 1px solid transparent;
}
#btn_top::before {
	top: -1px;
	left: -1px;
}
#btn_top::after {
	bottom: -1px;
	right: -1px;
}
#btn_top:hover::before,
#btn_top:hover::after {
	width: 100%;
	height: 100%;
}
#btn_top:hover::before {
	border-bottom-color: #a4a4a4;
	border-left-color: #a4a4a4;
	transition: height .3s, width .3s .3s;
}
#btn_top:hover::after {
	border-top-color: #a4a4a4;
	border-right-color: #a4a4a4;
	transition: height .3s, width .3s .3s;
}
/*LINEアニメーション end*/

#foot ul {
	margin-top:30px;
}
#foot ul li {
	float:left;
	width:20%;
	border-left:1px solid #FFF;
	text-align:center;
	font-size:10px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#foot ul li:last-child {
	border-right:1px solid #FFF;
}
#foot ul li a {
	color:#FFF;
	transition:color 0.5s;
}
#foot ul li a:hover {
	color:#a4a4a4;
}

#foot #copyright {
	font-size:10px;
	text-align:center;
	margin-top:30px;
}
#foot img {
	max-width:100%;
}


/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:480px){
	/***フッター***/
	#foot {
		padding:10px 10px;
	}
	#foot #logo_f img {
		width:180px;
	}
	#foot #btn_top {
		right:10px;
	}
	#foot ul li {
		font-size:14px;
	}	
	#foot #copyright {
		font-size:12px;
	}
}


/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:640px){
	/***ナビゲーション***/
	#global>li>a {
		padding:20px 0;
	}
	#sns {
		width:80%;
		margin:0 auto;
		padding:0 10px;
		margin-top:30px;
	}
	/***フッター***/
	#foot ul {
		width:90%;
		margin:0 auto;
		margin-top:30px;
	}
}

/********************************************
タブレット
*********************************************/
@media screen and (min-width:768px){
	/***ナビゲーション***/
	#sns {
		width:70%;
		margin:0 auto;
		padding:0 10px;
		margin-top:30px;
	}
	/***フッター***/
	#foot ul {
		width:80%;
		margin:0 auto;
		margin-top:30px;
	}
}

/********************************************
タブレット　ランドスケープ
*********************************************/
@media only screen and (min-width: 1024px) {

}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1051px) {
	/***コンテンツ***/
	#wrap {
		margin-top:0;
		margin-left:170px;
	}
	
	/***head***/
	#head {
		width:200px;
		height:100px;
		background:none;
		top:35px;
	}
	h1#logo_sp {
		display:none;
	}
	h1#logo_pc {
		position:relative;
		display:block;
		width:170px;
		height:56px;
		padding:3px 10px;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		z-index:100;
	}
	h1#logo_pc img {
		max-width:100%;
	}
	/*ハンバーガーメニュー*/
	#hamburger {
		display:none;
	}
	
	/***ナビゲーション***/
	#navi {
		display:block !important;
		width:170px;
		min-height:600px;
		top:0;
		border-right:1px solid #f4f4f4;
	}
	#global {
		position:absolute;
		width:100%;
		height:254.4px;
		padding:0;
		bottom:80px;
		z-index:90;
	}
	#global>li:first-child:before {
		top: 0;
		left: 0;
		right:0;
		margin:auto;
		width: 90%;
	}
	#global>li:after {
		bottom: 0;
		left: 0;
		right:0;
		margin:auto;
		width: 90%;
	}
	#global>li>a {
		padding:10px 0;
	}
	#global .sub_global {
		display:block;
		width:0px;
		height:100%;
		background:#cdcdcd;
		position:fixed;
		min-height:600px;
		top:0;
		left:170px;
		margin-top:0;
	}
	@keyframes show{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	
	#global .sub_global>ul {
		position:absolute;
		width:100%;
		bottom:52px;
		font-size:16px;
		padding:0;
		text-align:left;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		display: none;
	}
	#global .sub_global.online>ul {
		bottom:110px;
	}
	#global .sub_global>ul.show{
		display: block;
		animation: show 1.0s linear 0s;
	}
	
	
	#global .sub_global>ul>li {
		position: relative;
		padding:0 10px;
	}
	#global .sub_global>ul>li:first-child:before {
		position: absolute;
		top: 0;
		left: 0;
		right:0;
		margin:auto;
		content: '';
		width: 90%;
		height: 0;
		border-top: 1px solid #b4b4b4;
		border-bottom: 1px solid #eeeeee;
	}
	#global .sub_global>ul>li:after {
		position: absolute;
		bottom: 0;
		left: 0;
		right:0;
		margin:auto;
		content: '';
		width: 90%;
		height: 0;
		border-top: 1px solid #b4b4b4;
		border-bottom: 1px solid #eeeeee;
	}
	#global .sub_global>ul>li>a {
		color:#FFF;
		display:block;
		width:100%;
		height:100%;
		padding:10px 0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		transition: color 0.5s;
	}
	#global .sub_global>ul>li>a:hover {
		color:#006e36;
	}
	
	#sns {
		width:100%;
		position:absolute;
		margin-top:0;
		bottom:40px;
	}
	
	#sns li#icon_twitter img {
		width:22px;
		height:19px;
	}
	#sns li#icon_facebook img {
		width:10px;
		height:21px;
	}
	#sns li#icon_blog img {
		width:21px;
		height:21px;
	}
	#sns li#icon_instagram img {
		width:19px;
		height:19px;
	}
	#sns li#icon_line img {
		width:22px;
		height:21px;
	}
	
	/***フッター***/
	#foot {
		padding:20px 10px 10px 10px;
		position:relative;
	}
	
	#foot ul {
		width:60%;
		margin:0 auto;
		position:absolute;
		top:35px;
		left:0;
		right:0;
		margin:auto;
		padding-left:70px;
	}
	#foot ul li:last-child {
		border-right:1px solid #FFF;
	}
	#foot ul li a {
		color:#FFF;
		transition:color 0.5s;
	}
	#foot ul li a:hover {
		color:#a4a4a4;
	}
	
	#foot #copyright {
		font-size:10px;
		text-align:center;
		margin-top:30px;
	}
	#foot img {
		max-width:100%;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1280px) {
	#foot ul {
		width:666px;
	}
}