/* --------------------------------------------------------
	チェックボックスデザイン
-------------------------------------------------------- */
input[type="checkbox"] {
    -ms-transform: scale(2);
    transform: scale(2);
}

/* -------------------------------------------------------
    Chrome用CSSハック（チェックボックス）
-------------------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0){
    input[type="checkbox"] 
    {
		vertical-align:-webkit-baseline-middle;
		margin-left:20px;
    }
}

/* -------------------------------------------------------
    Firefox用CSSハック（チェックボックス）
-------------------------------------------------------- */
@-moz-document url-prefix(){
    input[type="checkbox"] 
    {
		vertical-align:bottom;
		margin-left:20px;
    }
}

/* -------------------------------------------------------
    safari用CSSハック（チェックボックス）
-------------------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, input[type="checkbox"] 
    {
		vertical-align:-webkit-baseline-middle;
		margin-left:20px;
    }
}

/* --------------------------------------------------------
	ボタンデザイン
-------------------------------------------------------- */
.square_btn{
    display: inline-block;
    padding: 15px 50px;
    border-bottom: solid 4px #d8bfd8;
    border-right: solid 4px #d8bfd8;
	border-radius: 50px;
    text-decoration: none;
	font-size:16pt;
    color: #FFF;
    background-image: -webkit-linear-gradient(45deg, #DD1144 0%, #DD1144 100%);
    background-image: linear-gradient(45deg, #DD1144 0%, #DD1144 100%);
    transition: .4s;
}

.square_btn:hover {
    background-image: -webkit-linear-gradient(45deg, #DD1144 0%, #DD1144 100%);
    background-image: linear-gradient(45deg, #DD1144 0%, #DD1144 100%);
}

.square_btn:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

.square_btn_gray{
    display: inline-block;
    padding: 15px 60px;
    border-bottom: solid 4px #c0c0c0;
    border-right: solid 4px #c0c0c0;
    border-radius: 50px;
    text-decoration: none;
	font-size:16pt;
    color: #FFF;
    background-image: -webkit-linear-gradient(45deg, #808080 0%, #808080 100%);
    background-image: linear-gradient(45deg, #808080 0%, #808080 100%);
    transition: .4s;
}

.square_btn_gray:hover {
    background-image: -webkit-linear-gradient(45deg, #808080 0%, #808080 100%);
    background-image: linear-gradient(45deg, #808080 0%, #808080 100%);
}

.square_btn_gray:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

.square_btn_blue{
    display: inline-block;
    padding: 15px 60px;
    border-bottom: solid 4px #c0c0c0;
    border-right: solid 4px #c0c0c0;
    text-decoration: none;
	font-size:16pt;
    color: #FFF;
    background-image: -webkit-linear-gradient(45deg, #004191 0%, #004191 100%);
    background-image: linear-gradient(45deg, #004191 0%, #004191 100%);
    transition: .4s;
}

.square_btn_blue:hover {
    background-image: -webkit-linear-gradient(45deg, #004191 0%, #004191 100%);
    background-image: linear-gradient(45deg, #004191 0%, #004191 100%);
}

.square_btn_blue:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

.unabled_btn{
    display: inline-block;
    padding: 15px 60px;
    border-bottom: solid 4px #c0c0c0;
    border-right: solid 4px #c0c0c0;
    border-radius: 50px;
    text-decoration: none;
	font-size:16pt;
    color: #FFF;
    background-image: -webkit-linear-gradient(45deg, #808080 0%, #808080 100%);
    background-image: linear-gradient(45deg, #808080 0%, #808080 100%);
}

/* --------------------------------------------------------
	ドロップダウンリストデザイン
-------------------------------------------------------- */
.dropdown_list{
    position: relative;
    width: 100%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	border-radius: 10px;
	background: #ffffff;
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
}

.dropdown_list_label {
	position: relative;
}
 
.dropdown_list_label::after {
	display: block;
	content: " ";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 20px;
	height: 20px;
	margin-top: -8px;
	background: url(../image/arrow01.png) 0 0 no-repeat;
	background-size: 20px;
	pointer-events: none;
}

select::-ms-expand {
	display: none;
}

/* --------------------------------------------------------
	ラジオボタンデザイン
-------------------------------------------------------- */
.radio_btn{
    position: relative;
    padding: 15px 20px 15px 53px;
    transition: .3s;
    color: #444;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: inline-block;
    line-height: 1;
}

/* --------------------------------------------------------
	ラベルデザイン
-------------------------------------------------------- */
.lbl_radio_btn{
    width:100px;
    border: 1px solid #999;
	border-radius: 5px;
	padding-left:10px;
	padding-right:20px;
	padding-top:5px;
	padding-bottom:5px;
	cursor: pointer;
	background: #f3f3f3;
}

.lbl_radio_btn:hover {
	background: #999;
}

/* --------------------------------------------------------
	チェックボックスデザイン（規約同意チェック）
-------------------------------------------------------- */
.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 10px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 10px;
  width: 15px;
  height: 15px;
  box-shadow:0px 0px 1px;
  border: 1px solid #999;
  border-radius: 4px;
  background: #dcdcdc
}

.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 14px;
  width: 5px;
  height: 10px;
  transform: rotate(40deg);
  border-bottom: 3px solid #000000;
  border-right: 3px solid #000000;
}

/* -------------------------------------------------------
    safari用CSSハック（規約確認チェックボックス）
-------------------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome, checkbox01-parts::before 
    {
		top: 3px;
    }
    
    ::i-block-chrome, checkbox01-input:checked + .checkbox01-parts::after 
    {
		top: 3px;
    }
}