@charset "UTF-8";
/* CSS Document */
/* 株式会社ワーク */
/* ヘッダー＆フッターCSS */

/*ヘッダー*/
/*PC*/
@media only screen and (min-width: 769px) {
	/*グローバルメニュー*/
	header {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		background: #fff;
	}
	
	.logo {
		z-index: 102;
		position: absolute;
		top: 50%;
		left: 50px;
		transform: translate(0, -50%);
		width: 150px;
		height: auto;
	}
	
	.logo img {
		display: block;
		position: relative;
		width: 100%;
		height: auto;
	}
	
	/*グローバルメニュー*/
	nav {
		z-index: 101;
		position: absolute;
		top: 50%;
		right: 50px;
		transform: translate(0, -50%);
		width: 910px;
		height: auto;
	}
		
	nav ul.hd-nav {
		position: relative;
		z-index: 103;
	}
		
	nav ul.hd-nav li {
		display: block;
		position: relative;
		z-index: 104;
		width: auto;
		height: auto;
		padding: 0;
		list-style: none;
		float: left;
	}
	
	nav ul.hd-nav li a {
		z-index: 1;
		display: block;
		position: relative;
		width: auto;
		padding-left: 25px;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 20px;
		text-align: center;
		color: #333;
		transition: 0.3s;
	}
	
	nav ul.hd-nav li a:hover {
		color: #F18405;
	}
		
}

/*フッター*/
/*PC*/
@media only screen and (min-width: 769px) {
	/*フッター*/
	footer {
		z-index: 0;
		position: relative;
		width: 100%;
		height: auto;
		padding: 70px 0 30px 0;
		background: #F3F6F6;
	}
	
	.ft-con {
		z-index: 2;
		position: relative;
		width: 1300px;
		height: 290px;
		margin: 0 auto;
	}
	
	.ft01 {
		position: relative;
		width: 270px;
		height: auto;
		margin: 0 auto 0 0;
	}
	
	.ft01 a img {
		display: block;
		position: relative;
		width: 150px;
		height: auto;
	}
	
	.ft01 p {
		margin: 20px 0 0 0;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 26px;
		text-align: left;
		color: #333;
		white-space: nowrap;
	}
	
	.ft02 {
		position: absolute;
		top: 0;
		left: 290px;
		width: 150px;
		height: auto;
	}
	
	.ft03 {
		position: absolute;
		top: 0;
		left: 465px;
		width: 90px;
		height: auto;
	}
	
	.ft04 {
		position: absolute;
		top: 0;
		left: 580px;
		width: 90px;
		height: auto;
	}
	
	.ft05 {
		position: absolute;
		top: 0;
		left: 690px;
		width: 160px;
		height: auto;
	}
	
	.ft06 {
		position: absolute;
		top: 0;
		left: 870px;
		width: 230px;
		height: auto;
	}
	
	.ft07 {
		position: absolute;
		top: 0;
		right: 0;
		width: 170px;
		height: auto;
	}
	
	.ft-btn01 {
		z-index: 1;
		display: block;
		position: relative;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 20px;
		text-align: left;
		color: #333;
	}
	
	.ft-btn02 {
		z-index: 1;
		display: block;
		position: relative;
		margin: 0 0 10px 0;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 16px;
		text-align: left;
		color: #333;
	}
	
	.ft-b {
		margin-bottom: 18px;
	}
	
	.ft07 .ft-b {
		margin-bottom: 35px;
	}
	
	.ft-con a:hover {
		text-decoration: underline;
	}
	
	.ft-cre {
		z-index: 2;
		position: relative;
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 16px;
		text-align: center;
		color: #333;
	}
	
	/*トップへ戻る*/
	.ft-top-btn {
		z-index: 10;
		display: block;
		position: fixed;
		right: 0;
		width: 60px;
		height: 60px;
		padding: 14px 0 0 0;
		font-size: 24px;
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 24px;
		text-align: center;
		color: #fff;
		background: -moz-linear-gradient(left, #F18405, #FBC16A);
		background: -webkit-linear-gradient(left, #F18405, #FBC16A);
		background: linear-gradient(to right, #F18405, #FBC16A);
		border: solid 1px rgba(241,132,5,0.00);
		box-sizing: border-box;
		border-radius: 10px;
		transition: 0.4s;
	}
	
	.ft-top-btn span {
		display: block;
		transform:rotate(-90deg);
	}
	
	.ft-top-btn:hover {
		color: #F18405;
		background: #fff;
		border: solid 1px #F18405;
	}
	
		
}

/*ヘッダー*/
/*SP*/
@media only screen and (max-width: 768px) {
	/*グローバルメニュー*/
	header {
		position: fixed;
		z-index: 100;
		width: 100%;
		height: 50px;
		background: #fff;
	}
	
	.logo {
		z-index: 102;
		position: absolute;
		top: 2px;
		left: 15px;
		transform: translate(0, 0);
		width: 75px;
		height: auto;
	}
	
	.gb-menu {
		position: absolute;
		z-index: 104;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		background: #F18405;
	}
		
	nav.globalMenuSp {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		transform: translateX(100%);
		transition: all 0.6s;
		width: 86%;
		height: auto;
		padding: 70px 7% 20px 7%;
		overflow-y: scroll;
		background: #F3F6F6;
		background-size: 100% 100%;
	}
		
	.gb-btn {
		display: block;
		position: relative;
		margin: 0 0 14px 0;
		padding-bottom: 14px;
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 15px;
		text-align: left;
		color: #333333;
		border-bottom: solid 1px #333333;
	}
	
	.gb-btn::before {
		content: "";
		z-index: 2;
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 50px;
		height: 1px;
		background: #F18405;
	}
	
	.gb-btn01 {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 0 14px 0;
		padding-bottom: 10px;
		border-bottom: solid 1px #333333;
	}
	
	.gb-btn01::before {
		content: "";
		z-index: 2;
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 50px;
		height: 1px;
		background: #F18405;
	}
	
	.gb-btn01-0 {
		display: block;
		position: relative;
		margin: 0 0 14px 0;
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 15px;
		text-align: left;
		color: #333333;
	}
	
	.gb-btn01-1 a {
		display: block;
		position: relative;
		margin: 0 0 12px 0;
		font-size: 13px;
		font-weight: normal;
		letter-spacing: 0.5px;
		line-height: 10px;
		text-align: left;
		color: #333333;
		float: left;
	}
	
	.gb-btn01-1 a:nth-child(1) {
		width: 43%;
	}
	
	.gb-btn01-1 a:nth-child(2) {
		width: 57%;
	}
	
	.gb-btn01-1 a:nth-child(3) {
		width: 43%;
	}
	
	.gb-btn01-1 a:nth-child(4) {
		width: 57%;
	}
	
	.gb-btn01-1 a:nth-child(5) {
		width: 100%;
	}
	
	.gb-btn01-2 {
		width: 100%!important;
	}
	
	.gb-btn01-3 {
		width: 100%!important;
	}
	
	.gb-btn01-4 {
		width: 100%!important;
	}
	
	.gb-btn01-5 {
		width: 100%!important;
	}
	
	.gb-btn01-6 {
		width: 100%!important;
	}
		
	/* このクラスを、jQueryで付与・削除する */
	nav.globalMenuSp.active {
		transform: translateX(0%);
	}
	
	.navToggle {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		cursor: pointer;
		z-index: 999;
		text-align: center;
	}
	
	.navToggle span {
		display: block;
		position: absolute;
		right: 0;
		left: 0;
		margin: auto;
		width: 30px;
		border-bottom: solid 4px #fff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	
	.navToggle span:nth-child(1) {
		top: 12px;
	}
	
	.navToggle span:nth-child(2) {
		top: 23px;
	}

	.navToggle span:nth-child(3) {
		top: 34px;
	}
	
	/* 最初のspanをマイナス45度に */
	.navToggle.active span:nth-child(1) {
		width: 30px;
		position: absolute;
		top: 50%;
		border-bottom: solid 3px #F18405;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
 
	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
		width: 30px;
		position: absolute;
		top: 50%;
		border-bottom: solid 3px #F18405;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
		
	.navToggle.active {
		width: 50px;
		height: 50px;
	}
		
}

/*フッター*/
/*SP*/
@media only screen and (max-width: 768px) {
	/*フッター*/
	footer {
		z-index: 0;
		position: relative;
		width: 100%;
		height: auto;
		padding: 40px 0 15px 0;
		background: #F3F6F6;
	}
	
	.ft-con {
		z-index: 2;
		position: relative;
		width: 260px;
		height: auto;
		margin: 0 auto;
	}
	
	.ft01 {
		position: relative;
		width: 220px;
		height: auto;
		margin: 0 auto 25px auto;
	}
	
	.ft01 a {
		display: block;
		position: relative;
		width: 140px;
		height: auto;
		margin: 0 auto;
	}
	
	.ft01 a img {
		display: block;
		position: relative;
		width: 150px;
		height: auto;
	}
	
	.ft01 p {
		margin: 10px 0 0 0;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.5px;
		line-height: 19px;
		text-align: left;
		color: #333;
		white-space: nowrap;
	}
	
	.ft02 {
		position: relative;
		width: 130px;
		height: auto;
		margin: 0 auto 15px 0;
	}
	
	.ft03 {
		position: relative;
		width: 130px;
		height: auto;
		margin: 0 auto 15px 0;
	}
	
	.ft04 {
		position: relative;
		width: 130px;
		height: auto;
		margin: 0 auto 15px 0;
	}
	
	.ft05 {
		position: relative;
		width: 130px;
		height: auto;
		margin: 0 auto 15px 0;
	}
	
	.ft06 {
		position: relative;
		width: 130px;
		height: auto;
		margin: 0 auto 50px 0;
	}
	
	.ft07 {
		position: absolute;
		bottom: 26px;
		right: 0;
		width: 115px;
		height: auto;
	}
	
	.ft-btn01 {
		z-index: 1;
		display: block;
		position: relative;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.5px;
		line-height: 10px;
		text-align: left;
		color: #F18405;
		white-space: nowrap;
	}
	
	.ft-btn02 {
		display: none;
	}
	
	.ft07 .ft-b {
		margin-bottom: 15px;
	}
	
	.ft-cre {
		z-index: 2;
		position: relative;
		font-size: 13px;
		font-weight: normal;
		letter-spacing: 0.5px;
		line-height: 9px;
		text-align: center;
		color: #333;
	}
	
	/*トップへ戻る*/
	.ft-top-btn01 {
		z-index: 9;
		display: block;
		position: fixed;
		right: 0;
		bottom: 290px;
		width: 35px;
		height: 35px;
		padding: 8px 0 0 0;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 18px;
		text-align: center;
		color: #fff;
		background: -moz-linear-gradient(left, #F18405, #FBC16A);
		background: -webkit-linear-gradient(left, #F18405, #FBC16A);
		background: linear-gradient(to right, #F18405, #FBC16A);
		box-sizing: border-box;
		border-radius: 5px;
	}
	
	.ft-top-btn01 span {
		display: block;
		position: absolute;
		left: 9px;
		transform:rotate(-90deg);
	}
	
		
}