@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;
  display: inline-block;
  margin-left: 10px;
}
.arrow-r::after {
  width: 4px;
  height: 4px;
  border-top: 1px solid #6a3906;
  border-right: 1px solid #6a3906;
  -webkit-transform: rotate(45deg);
  				transform: rotate(45deg);
}
.arrow-l::after {
  left: 15px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #6a3906;
  border-left: 1px solid #6a3906;
  -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;
	width: 100%;
	height: 66px;
	margin: 0 auto;
  transition: all 0.2s ease-in-out;
}
.btn a {
	display: block;
	position: absolute;
	width: 100%;
	height: 66px;
	border-radius: 33px;
	top: 50%;
	left: 50%;
  background: #fff;
	transform: translate(-50%,-50%);
	z-index: 111;
	font-size: 1.5rem;
  color: #6a3906;
  text-align: center;
  line-height: 66px;
  transition: all 0.4s ease-in-out;
}
/* .btn color バリエーション
----------------------------------------------------- */
/* 基本色 */
.btnBase {
	border-color: #fff;
}
.btnBase a {
	color: #6a3906;
}
.btn.btnBase::after {
  border-color: #002d52 #002d52 transparent transparent;
}
.btnBase::before {
  background: #002d52;
}
.btnBase::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: '';
	border-radius: 25px;
  transform-origin: center center;
  transform: scale(0, 1);
  transition: transform .3s;
}
/* 白 */
.btnWhite {
	background: #002d52;
	border-color: #fff;
}
.btnWhite a,
.btnWhite input {
	color: #fff;
}
.btnWhite input {
	height: 48px;
}
.btnWhite::after {
  border-color: #fff #fff transparent transparent;
}
/* =====================================================
  ・ ページトップへ(SP)
======================================================== */
#page-top {
  position: fixed;
  bottom: 60px;
  right: 4%;
  z-index: 100;
}
#page-top a {
  display: block;
  z-index: 999;
  padding: 0;
  /* border-radius: 30px; */
  width: 80px;
  height: 80px;
}


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

/* --------------mobaile_fast--------------------- */
@media screen and (min-width:960px) {
  /*　for PC　*/
	/* =====================================================
  ・ btn(min-width:960px)
	======================================================== */
  .btn:hover input{
    position: relative;
    color: #002d52;
    z-index: 11;
  }
  .btn a:hover {
    background: #f1e5d4;
  }
  /* .btn color バリエーション
  ----------------------------------------------------- */
  /* 基本色 */
  .btnBase:hover a {
    color: #fff;
  }
  .btnBase input:hover {
    color: #fff;
  }
  .btnBase:hover::after {
    border-color: #fff #fff transparent transparent;
    z-index: 11;
  }
  .btnBase:hover::before {
    transform: scale(1, 1);
    transform-origin: center center;
  }
  /* 白 */
  .btnWhite:hover a {
    color: #002d52;
  }
  .btnWhite:hover::after{
    border-color: #002d52 #002d52 transparent transparent;
  }
  .btnWhite:hover {
    background: #fff;
    border-color: #002d52;
  }
	/* =====================================================
  ・ ページトップへ  (min-width:960px)
	======================================================== */
	#page-top {
		position: fixed;
		right: 30px;
    bottom: 190px;
	}
	#page-top a:hover {
		text-decoration: none;
		opacity: 0.7;
	}
}