.button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/**/
.button {
	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
}
.button span {
	display: block;
	position: absolute;
	width: 200px;
	height: 60px;
	border: 2px solid #333;
	text-align: center;
	line-height: 56px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;
}
.button span:nth-child(1) {
	background-color: #333;
	color: #fff;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.button span:nth-child(2) {
	background-color: #fff;
	color: #333;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.button:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.button:hover span:nth-child(2) {
	background-color: #333;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}




/*-----------------------------------------*/

.button2 {
	display: inline-block;
	width: 240px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button2::before,
.button2::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button2,
.button2::before,
.button2::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/**/

.button2 {
	position: relative;
	z-index: 2;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
	-webkit-perspective: 300px;
	perspective: 300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.button2:hover {
	color: #333;
}
.button2::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}
.button2:hover::after {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}







/*-----------------------------------------*/

.button3 {
	display: inline-block;
	width: 240px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;

	

}
/*
.button3::before,
.button3::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}*/
/*.button3,
.button3::before,
.button3::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}*/
/**/

.button3 {
	background-color: rgba(50, 50, 50, .8);
	border-radius: 4px;
	color: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);

}
.button3:hover {
	background-color: rgba(255, 255, 255, 1);
	color: #000;

}


/*-----------------------------------------*/

.button5 span {
	display: inline-block;
	position: absolute;
	width: 200px;
	height: 60px;
	border: 2px solid #333;
	text-align: center;
	line-height: 60px;
}
.button5 span:nth-child(1) {
	background-color: #fff;
	color: #333;

}
.button5 span:nth-child(2) {
	background-color: #333;
	color: #fff;

}
.button5:hover span:nth-child(2) {
	display: none;
}


/*-----------------------------------------*/
.button6 {
	display: inline-block;
	width: 240px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button6::before,
.button6::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button6,
.button6::before,
.button6::after {
/*	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;*/
}
/**/
.button6 {
	position: relative;
/*	-webkit-perspective: 300px;
	perspective: 300px;*/

}
.button6 span {
	display: block;
	position: absolute;
	width: 240px;
	height: 54px;
	border: 0px solid #333;
	text-align: center;
	line-height: 54px;
	border-radius: 4px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
	text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
/*	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;*/
}
.button6 span:nth-child(1) {
	background-color: #fff;
	color: #333;
/*	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;*/

}
.button6 span:nth-child(2) {
	background-color: #544e46;
	color: #fff;
/*	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;*/
}
.button6:hover span:nth-child(1) {
/*	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);*/

}
.button6:hover span:nth-child(2) {
	background-color: #fff;
	color: #000;
/*	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);*/
	display: none;
}

/*-----------�y�[�W�g�b�v��--------------*/
#pagetop {
    position: fixed;
    z-index: 10;   
    bottom: 50px;
    right: 30px;
}
#pagetopsumaho {
    position: fixed;
    z-index: 10; 
    bottom: 30px;
    right: 10px;
}


/*-----------���w�\�񂷂�--------------*/
.btn1{
background-image:url(http://reoccstylehouse.com/2017-00/_userdata/img/ken-yoyaku.svg);
background-repeat : no-repeat;
width:83px;
height:35px;
}
.btn1:hover{
background-image:url(http://reoccstylehouse.com/2017-00/_userdata/img/ken-yoyaku-on.svg);
background-repeat : no-repeat;
}




/*-----------�v���_�E��--------------*/
.selectboxDL {
    width:90%;
    margin:1em auto;
  position:relative;
}
select{
  -webkit-appearance:none;
    appearance:none;
  width:100%;
  padding:1em 1em;
  box-sizing:border-box;
  font-size:1em;
  border:#ccc 1px solid;
  border-radius:0;
  background:#fff;
}
.selectbox::after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  position:absolute;
  right:5%;
  top:35%;
  border-bottom:#333 2px solid;
  border-right:#333 2px solid;
  transform:rotate(45deg)translateY(-30%);
}
.color.selectbox select{
  background:blue;
  color:#fff;
  border-radius:2em;
}
.color.selectbox::after{
  border-bottom:#fff 5px solid;
  border-right:#fff 5px solid;
}