@charset "utf-8";
/* CSS Document */
/* --------------mobaile_fast--------------------- */

/* =====================================================
  ・ ＞マーク(SP)
		-r:right	-b:bottom	-l:right
======================================================== */
.arrow-r,
.arrow-l,
.arrow-t,
.arrow-b {
  position: relative;
}
.arrow-r::after,
.arrow-l::after,
.arrow-t::after,
.arrow-b::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.arrow-r::after {
  right: 15px;
  width: 4px;
  height: 4px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  				transform: rotate(45deg);
}
.arrow-l::after {
  left: 15px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  				transform: rotate(45deg);
}
.arrow-t::after {
  right: 15px;
  width: 4px;
  height: 4px;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  				transform: rotate(45deg);
}
.arrow-b::after {
  right: 15px;
  width: 4px;
  height: 4px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  				transform: rotate(45deg);
}
/* =====================================================
  ・ btn(SP)
======================================================== */
.btn {
	position: relative;
	display: block;
	width: 100%;
	max-width: 420px;
	height: 70px;
	margin: 0 auto;
	line-height: 70px;
	border: none;
  transition: all 0.2s ease-in-out;
}
.btn a {
	display: block;
	position: absolute;
	width: 100%;
	height: 70px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 1.8rem;
  text-align: center;
	transition: all 0.3s ease-in-out;
  overflow: hidden;
}
/* .btn color バリエーション
----------------------------------------------------- */
/* 基本色 */
.btnBase {
	background: #fff;
}
.btnBase a {
	color: #756f65;
}
.btnBase2 {
	background: #d1c74e;
}
.btnBase2 a {
	color: #fff;
}
.btnBase3 {
	background: #756F65;
}
.btnBase3 a {
	color: #fff;
}
/* =====================================================
  ・ ページトップへ(SP)
======================================================== */
#page-top {
  position: fixed;
  bottom: 30px;
  right: 4%;
  z-index: 100;
}
#page-top a {
  display: block;
  z-index: 999;
  padding: 0;
  width: 60px;
  height: 60px;
	background: url("../images/gototop.png") center no-repeat;
	background-size: contain;
}

/*================================
  ▼ブレイクポイントのルール▼
  -スマホを基本設計にする-
  *〜479px：SP縦
  *480px〜：SP横
  *600px〜タブレット
  *960px〜小型PC
  *1280px〜大型PC
================================*/

/* --------------mobaile_fast--------------------- */
@media screen and (min-width:600px) {
  /*　for PC　*/
	/* =====================================================
  ・ btn(min-width:600px)
	======================================================== */
	.btn a {
		text-align: left;
	}
	.btn01 a{
		padding-left: 2em;
	}
	.btn02 a{
		padding-left: 6em;
	}
	.btn a::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		content: '';
		width: 120%;
		height: 100%;
		background: rgba(117,111,101,.5);
		transform-origin: right top;
		transform: skewX(-30deg) scale(0, 1);
		transition: transform .3s;
	}
	.btn::before, .btn::after {
		display: block;
		position: absolute;
		top: 50%;
		height: 1px;
		background: #756f65;
		content: "";
		transition: .6s .2s;
	}
	.btnBase2::after,
	.btnBase2::before,
	.btnBase2 a::before,
	.btnBase3::before,
	.btnBase3::after,
	.btnBase3 a::before {
		background: #fff;
	}
	.btn::before {
		right: 20px;
		width: 40px;
		margin-top: -1px;
	}
	.btn::after {
		right: 20px;
		width: 6px;
		margin-top: -3px;
		transform: rotate(45deg);
	}
	.btn01::before {
		right: 44px;
	}
	.btn01::after {
		right: 44px;
	}
	.btn02::before {
		right: 88px;
	}
	.btn02::after {
		right: 88px;
	}
}



@media screen and (min-width:960px) {
  /*　for PC　*/
	/* =====================================================
  ・ btn(min-width:960px)
	======================================================== */
  /* .btn color バリエーション
  ----------------------------------------------------- */
  /* 基本色 */
	.btnBase:hover a {
		/*background: #756f65;*/
		color: #fff;
		border-radius: 0.25rem;
	}
	.btnBase a:hover::before {
		transform-origin: left top;
		transform: skewX(-30deg) scale(1, 1);
	}
	.btnBase2 a:hover::before {
		background: #756f65;
		transform-origin: left top;
		transform: skewX(-30deg) scale(1, 1);
	}
	.btnBase3 a:hover::before {
		background: #d1c74e;
		transform-origin: left top;
		transform: skewX(-30deg) scale(1, 1);
	}
/*	.btnBase a:hover::after {
		transform: translateX(50%);
		opacity: 1;
	}*/
	.btn:hover::before, .btn:hover::after {
		background: #fff;
		z-index: 1;
	}

	
	/* =====================================================
  ・ ページトップへ  (min-width:960px)
	======================================================== */
	#page-top {
		position: fixed;
		right: 10%;
		bottom: 100px;
	}
	#page-top a {
		width: 80px;
		height: 80px;
	}
	#page-top a:hover {
		text-decoration: none;
		opacity: 0.7;
	}
}