/* ハンバーガーメニュー & クローズ */
/*
[ html ]
<a class="wai-ham" href="#">
	<span></span>
	<span></span>
	<span></span>
</a>

[ jquery ]
$('.wai-ham').on('click',function(){
	$(this).toggleClass('active');
})
*/
.wai-ham,
.wai-ham span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.wai-ham {
	position: relative;
	width: 50px;
	height: 44px;
}
.wai-ham span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
}
.wai-ham span:nth-of-type(1) {
	top: 0;
}
.wai-ham span:nth-of-type(2) {
	top: 20px;
}
.wai-ham span:nth-of-type(3) {
	bottom: 0;
}
.wai-ham.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
}
.wai-ham.active span:nth-of-type(2) {
	opacity: 0;
}
.wai-ham.active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-20px) rotate(45deg);
}


/* inputのデザインをフラットに */
.wai-form-reset input{
	border: none;
	outline: none;
	font-size: 1.4rem;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* selectのデザインをフラットに */
.wai-form-reset select{
	background: white;
	font-size: 1.4rem;
	outline: none;
	border: none;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.wai-form-reset select::-ms-expand{
	display: none;
}


/* 下三角括弧矢印 */
.wai-arrow-down{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.wai-arrow-down::after{
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

/* 右三角括弧矢印 */
.wai-arrow-right{
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.wai-arrow-right::after{
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
}

/* 下三角 */
.wai-sankaku-down{
	position: absolute;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 50px solid #000;
}

/* RadioとText */
label.wai-radio_text {
	cursor       : pointer;
	position     : relative;
	padding-left : 5px;
	margin-right : 20px;
	overflow     : hidden;
	padding-left : 20px;
	display      : inline-block;
}
label.wai-radio_text::before {
	position      : absolute;
	width         : 15px;
	height        : 15px;
	border        : 1px solid #999;
	border-radius : 50%;
	left          : 0px;
	top           : 4px;
	content       : '';
	z-index       : 3;
}
label.wai-radio_text::after {
	content          : '';
	position         : absolute;
	width            : 11px;
	height           : 11px;
	border-radius    : 100%;
	left             : 3px;
	top              : 7px;
	background-color : #D65;
	z-index          : 1;
}
label.wai-radio_text input[type="radio"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	position   : absolute;
	z-index    : 2;
	width      : 20px;
	height     : 20px;
	left       : -23px;
	top        : 1px;
	margin     : 0px;
	box-shadow : 20px -1px #FFF;
}
label.wai-radio_text input[type="radio"]:checked {
	box-shadow : none;
}
label.wai-radio_text input[type="radio"]:focus {
	opacity    : 0.2;
	box-shadow : 20px -1px #FFF;
}

.wai-centerLineMove{
  display: inline-block;
  position: relative;
  transition: .3s ease;
}

.wai-centerLineMove::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  background-color: white;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.wai-centerLineMove:hover::after,
.wai-centerLineMove.active::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Checkbox と Text */
label.wai-check_text {
  cursor: pointer;
  position: relative;
  padding-left: 5px;
  margin-right: 20px;
  padding-left: 20px;
  display: inline-block;
  outline: none;
}

label.wai-check_text::before {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  left: 0px;
  top: 4px;
  content: '';
  z-index: 3;
}

label.wai-check_text::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  width: 6px;
  height: 12px;
  transform: rotate(40deg);
  border-bottom: 2px solid;
  border-right: 3px solid;
  border-color: #D65;
}

label.wai-check_text input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  left: -23px;
  top: 1px;
  margin: 0px;
  -webkit-box-shadow: 20px -1px #FFF;
          box-shadow: 20px -1px #FFF;
  outline: none;
}

label.wai-check_text input[type="checkbox"]:checked {
  -webkit-box-shadow: none;
          box-shadow: none;
}