/* motion,btn
---------------------------------------- */
*:selection {
	background: #f27649;
	color: #fff;
}
a, img, .photo, .over, aside#sns li span, .nav-child, .ico-area dd ul {
	-webkit-transition: All 0.5s ease;
	-moz-transition: All 0.5s ease;
	-o-transition: All 0.5s ease;
	transition: All 0.5s ease;
}
.btn {
	text-align: center;
  margin-bottom: 1.5rem;
}
.btn a,
.btn input,
.btn button {
	display: flex;
  align-items: center;
	margin: auto;
  xborder-radius: 40px;
  color: #FFF;
  justify-content: center;
  position: relative;
}


/*ボタンサイズ*/
.btn_s a,
.btn_s input,
.btn_s button{
  width: 200px;
  height: 40px;
  border: none;
}
.btn_l a,
.btn_l input,
.btn_l button{
  width: 300px;
  height: 60px;
  border: none;
}
.btn_full a,
.btn_full input,
.btn_full button{
  width: 100%;
  height: 60px;
  border: none;
}
/*ボタンカラー*/
.btn_corp a,
.btn_corp input{
  background-color: var(--accent);
}
.btn.btn_corp a:hover,
.btn.btn_corp input:hover{
  opacity: 0.8;
}
.btn_key a,
.btn_key input{
  background-color: var(--key);
}
.btn.btn_key a:hover,
.btn.btn_key input:hover{
  opacity: 0.8;
}

.btn_line a,
.btn_line input,
.btn_line button{
  background-color: #06c755;
}
.btn.btn_line a:hover,
.btn.btn_line input:hover,
.btn.btn_line button:hover{
opacity: 0.8;
}

.btn_gray a,
.btn_gray input,
.btn_gray button{
  background-color: var(--dark);
}
.btn.btn_gray a:hover,
.btn.btn_gray input:hover,
.btn.btn_gray button:hover{
opacity: 0.8;
}
.btn_accent a,
.btn_accent input{
  background-color: var(--accent);
}
.btn.btn_accent a:hover,
.btn.btn_accent input:hover{
opacity: 0.8;
}
.btn_contact a,
.btn_contact input{
  background-color: var(--member_s);
}
.btn.btn_contact a:hover,
.btn.btn_contact input:hover{
opacity: 0.8;
}
.btn_contact a.member_b,
.btn_contact input.member_b{
  background-color: var(--member_b);
}
.btn.btn_contact a.member_b:hover,
.btn.btn_contact input.member_b:hover{
opacity: 0.8;
}
.btn_join a,
.btn_join input{
  background-color: var(--join);
}
.btn.btn_join a:hover,
.btn.btn_join input:hover{
opacity: 0.8;
}

.btn_terms a,
.btn_terms input{
  background-color: #2a54ab;
}
.btn.btn_terms a:hover,
.btn.btn_terms input:hover{
opacity: 0.8;
}

.btn_document a,
.btn_document input{
  background-color: #ab5d2a;
}
.btn.btn_document a:hover,
.btn.btn_document input:hover{
opacity: 0.8;
}

.btn.return a,
.btn.return input{
	position: relative;
}
.btn.return a:after,
.btn.return input:after{
	content: '\f432';
	font: lighter 20px Genericons;

	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.btn.next a,
.btn.next input {
}
.btn.next a:hover,
.btn.next input:hover {
}
.btn.next a:after,
.btn.next input:after {
	font-family: 'FontAwesome';
	content: '\f105';
	position: absolute;
	right: 20px;
	margin: auto;
}

.btn.open a,
.btn.open input {
}
.btn.open a:hover,
.btn.open input:hover {
}
.btn.open a:after,
.btn.open input:after {
	font-family: 'FontAwesome';
	content: '\f105';
	position: absolute;
	left: 20px;
	margin: auto;
}

.btn.back a,
.btn.back input {

}
.btn.back a:hover,
.btn.back input:hover {
}
.btn.back a:after,
.btn.back input:after {
	font-family: 'FontAwesome';
	content: '\f104';
	position: absolute;
	left: 20px;
	margin: auto;
}

.square a,
.square input{
  border-radius: 0;
}

.btn.kodate_btn{
  background: var(--main_a);
  position: relative;
}
.btn.kodate_btn a:hover,
.btn.kodate_btn input:hover{
opacity: 0.8;
}
.btn.kodate_btn a:after,
.btn.kodate_btn input:after{
    content: "";
    display: block;
    left: 50%;
    width: 60px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: 14px;
    transform: translate(-50%, 0);
    transition: all .5s ease;
}
.btn.kodate_btn a:hover:after,
.btn.kodate_btn input:hover:after{
  width: 20px;
}
.btn.btn_full a,
.btn.btn_full input{
  width: 100%;
  height: 60px;
}
.contact_items.contact_tel .btn.footer_contact_btn a {
  background-color: #fff;
  border-color: var(--black);
  border-width: 1px;
  border-style: solid;
  color: var(--black);
  font-size:1.5rem;
}
.contact_items.contact_tel .btn.footer_contact_btn a:hover{
opacity: 0.8;
}
.contact_items.contact_mail .btn.footer_contact_btn a{
  background-color: var(--main_b);
  border-color: #fff;
  border-width: 1px;
  border-style: solid;
  color:#fff;
  font-size:1.25rem;
}
.contact_items.contact_mail .btn.footer_contact_btn a:hover{
  opacity: 0.8;
}


.no_btn.tel a {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: block;
}

.btn.btn_request a{
  background-color:var(--main_b);
}
.btn.btn_request a:hover{
  opacity: 0.8;
}
.btn.btn_reserve a{
background-color:var(--main_a);
}
.btn.btn_reserve a:hover{
  opacity: 0.8;
}
.btn.btn_detail a{
  background-color:#fff;
  color: var(--black);
  border: 1px solid var(--black);
  }
  .btn.btn_detail a:hover{
    opacity: 0.8;
  }


  /*====================
ボタンエフェクト用
 ====================*/

.button01 {
	text-align: center;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   xheight: 20px;
   line-height: 20px;
   font-family: Arial;
   xwidth: 60%;
   font-size: 16px;
   font-weight: bold;
   padding: 10px 50px;
   color: #fff;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   color: #000;
   background: #ddd;
   margin: 0;
}
.button01:hover{
opacity: 0.9;
}

.button02:hover{
	opacity: 0.9;
}

.join-color{
	background-color: var(--key);
	color:#fff;
}
.contact-color{
	background-color: var(--key);
	color:#fff;
}