@charset "utf-8";
/*========= ナビゲーション ===============*/


#g-nav{
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position:fixed;
	z-index: 999;
	/*ナビのスタート位置と形状*/
top:0;
	right: -120%;
width:100%;
	height: 100vh;/*ナビの高さ*/
background: #fff;
	/*動き*/
transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
	right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;/*表示する高さ*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
	/*ナビゲーション天地中央揃え*/
	position: absolute;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
	text-align: center;
}

#g-nav li a{
color: #4a4947;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

/*========= ハンバーガーメニューのボタン ===============*/
.openbtn{
position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
top:10px;
right: 5px;
cursor: pointer;
	width: 50px;
	height:50px;
	background-color: #fff;
}

/*×に変化*/	
.openbtn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	right: 14px;
	height: 2px;
	border-radius: 2px;
background-color: #666;
	width: 45%;
}

.openbtn span:nth-of-type(1) {
top:15px;	
width: 45%;
}

.openbtn span:nth-of-type(2) {
top:23px;
width: 55%;
}

.openbtn span:nth-of-type(3) {
top:31px;
width: 45%;
}

.openbtn.active span:nth-of-type(1) {
	top: 18px;
	right: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 50%;
	background-color: #4a4947;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
	top: 30px;
	right: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 50%;
	background-color: 4a4947;
}



/*== ボタン共通設定 */

.job {
	width: 100%;
}
.btn_area {
	text-align: center;
}
.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	 border: 1px solid #555;/* ボーダーの色と太さ */
	width: 60%;
	padding: 10px 0 10px 0;
	margin-top: 20px;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/   
	transition: ease .2s;
}


/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#333;
}

.btn:hover span{
color:#333;
}

/*== 背景が流れる（中央から外） */

.bgcenterout:before {
content: '';
	/*絶対配置で位置を指定*/
position: absolute;
top: 0;
left: 0;
z-index: 2;
	/*色や形状*/
background: #FBE2DA;
width: 100%;
height: 100%;
	/*アニメーション*/
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 0);
transform-origin:center;
}

/*hoverした際の形状*/
.bgcenterout:hover:before{
transform:scale(1, 1);
}




/*========= Q&A ===============*/
.accordion {
	margin: 3em auto;
	max-width: 85vw;
	}
	.toggle {
	display: none;
	}
	.option {
	position: relative;
	margin-bottom: 1em;
	}
	.title,
	.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
	}
	.title {
	border: solid 1px #ccc;
	padding: 1em;
	display: block;
	color: #333;
	font-weight: bold;
	background-color: #F6F6F6;
	font-size: 14px;
	}

	.title::after,
	.title::before {
	content: "";
	position: absolute;
	right: 1.25em;
	top: 1.25em;
	width: 2px;
	height: 0.75em;
	background-color: #999;
	transition: all 0.3s;

	}
	.title::after {
	transform: rotate(90deg);
	}
	.content {
	max-height: 0;
	overflow: hidden;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	margin-top: -1px;
	}
	.content p {
	margin: 0;
	padding: 0.5em 1em 1em;
	font-size: 14px;
	line-height: 1.5;
	}
	.toggle:checked + .title + .content {
	max-height: 500px;
	transition: all 1.5s;
	}
	.toggle:checked + .title::before {
	transform: rotate(90deg) !important;
	}

/* 下からの動き　*/
	.fadeUpTrigger{
		opacity: 0;
		}

		.fadeUp {
			animation-name: fadeUpAnime;
			animation-duration:2s;
			animation-fill-mode:forwards;
			opacity: 0;
	}
	@keyframes fadeUpAnime{
	from {
			opacity: 0;
			transform: translateY(100px);
	}
	to {
			opacity: 1;
			transform: translateY(0);
	}
	}

	/*スクロールダウン全体の場所*/
.scrolldown2{
	/*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:10px;
left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
	/*描画位置*/
position: absolute;
left:10px;
bottom:10px;
	/*テキストの形状*/
color: #666;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
	content: "";
	/*描画位置*/
	position: absolute;
	bottom:0;
	left:-4px;
	/*丸の形状*/
width:10px;
height:10px;
border-radius: 50%;
background:#666;
	/*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
	circlemove 1.6s ease-in-out infinite,
	cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
		0%{bottom:45px;}
	 100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
		0%{opacity:0}
	 50%{opacity:1;}
	80%{opacity:0.9;}
100%{opacity:0;}
}

/* 線の描写 */
.scrolldown2:after{
content:"";
	/*描画位置*/
position: absolute;
bottom:0;
left:0;
	/*線の形状*/
width:2px;
height: 50px;
background:#808080;
}

@media screen and  (min-width: 769px) {


		/*== ボタン共通設定 */

#job {
	width: 100%;
	margin-top: 100px;
	padding-bottom: 100px;
}
.btn_area {
	text-align: center;
}
.btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	 border: 1px solid #555;/* ボーダーの色と太さ */
	width: 15%;
	padding: 10px 0 10px 0;
	margin: 20px 10px 0 10px;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/   
	transition: ease .2s;
}


/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#333;
}

.btn:hover span{
color:#333;
}

.openbtn{
	position:fixed;
		z-index: 9999;/*ボタンを最前面に*/
	top:20px;
	right: 5px;
	cursor: pointer;
		width: 50px;
		height:50px;
		background-color: #fff;
	}

/*========= Q&A ===============*/
.accordion {
	margin: 3em auto;
	max-width: 50vw;
	}
	.toggle {
	display: none;
	}
	.option {
	position: relative;
	margin-bottom: 1em;
	}
	.title,
	.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
	}
	.title {
	border: solid 1px #ccc;
	padding: 1em;
	display: block;
	color: #333;
	font-weight: bold;
	background-color: #F6F6F6;
	font-size: 14px;
	}

	.title::after,
	.title::before {
	content: "";
	position: absolute;
	right: 1.25em;
	top: 1.25em;
	width: 2px;
	height: 0.75em;
	background-color: #999;
	transition: all 0.3s;

	}
	.title::after {
	transform: rotate(90deg);
	}
	.content {
	max-height: 0;
	overflow: hidden;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	margin-top: -1px;
	}
	.content p {
	margin: 0;
	padding: 0.5em 1em 1em;
	font-size: 14px;
	line-height: 1.5;
	}
	.toggle:checked + .title + .content {
	max-height: 500px;
	transition: all 1.5s;
	}
	.toggle:checked + .title::before {
	transform: rotate(90deg) !important;
	}

	}