/* -------------------------------------------------------
form style
---------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
button,
textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input {
  font-size: 100%;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: .8em .5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 110%;
  -webkit-transition: all .3s;
  transition: all .3s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  box-shadow: 0 0 4px #3498db;
  border: 1px solid #3498db;
}
input[type="email"] {
  width: 100%;
}
textarea {
  width: 100%;
  height: 10em;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 100%;
  -webkit-transition: all .3s;
  transition: all .3s;
}
textarea:focus {
  box-shadow: 0 0 4px #3498db;
  border: 1px solid #3498db;
}
select {
  padding: .5em;
  border: 1px solid #ccc;
  font-size: 100%;
}
input[type="submit"] {
  background: -moz-linear-gradient(top, #FFF 0%, #EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #111;
}
input[type="submit"]:hover {
  background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));
}
/*Radio Check*/
label.radio,
label.radio_t,
label.checkbox,
label.checkbox_t {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
}
label.radio {
  width: 18px;
  height: 18px;
  border: 1px solid #666666;
  border-radius: 100%;
}
label.radio_t {
  min-height: calc(18px + 5px);
  margin-right: calc(18px + 5px);
  padding-left: calc(18px + 5px);
  line-height: calc(18px + 5px);
}
label.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #B3B3B3;
  background: #fff;
}
label.checkbox_t {
  padding-left: calc(20px + 5px);
  line-height: 20px;
}
/** before after **/
label.radio:before,
label.radio_t:before,
label.checkbox_t:before,
label.checkbox:after,
label.radio_t:after,
label.checkbox_t:after {
  content: '';
  position: absolute;
}
label.radio:before,
label.radio_t:before {
  border-radius: 100%;
}
label.radio:before,
label.checkbox:after {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
}
label.checkbox:after,
label.checkbox_t:after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  border-right: 2px solid #0080ff;
  border-bottom: 2px solid #0080ff;
  top: calc(50% - (((15px / 12) * 5) / 2));
  display: block;
  margin-top: calc(((15px / 12) * 5) * -1);
  width: calc(((15px / 12) * 5));
  height: 15px;
  z-index: 1;
}
label.radio_t:before,
label.radio_t:after {
  top: 0px;
  bottom: 0px;
  margin-top: auto;
  margin-bottom: auto;
}
label.radio:before {
  display: block;
  width: 10px;
  height: 10px;
  z-index: 1;
  background-color: #0080ff;
}
label.radio_t:before {
  width: 18px;
  height: 18px;
  border: 1px solid #666666;
  left: 0px;
  z-index: 3;
}
label.checkbox_t:before {
  width: 20px;
  height: 20px;
  left: 0px;
  top: 0;
  border: 1px solid #B3B3B3;
  z-index: 3;
}
label.radio_t:after {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  left: calc(((18px/2) - (10px) / 2));
  background-color: #0080ff;
  z-index: 1;
}
label.checkbox_t:after {
  left: calc((20px / 2) - (((15px / 12) * 5) / 2));
}
/** input **/
label.radio input[type="radio"],
label.radio_t input[type="radio"],
label.checkbox input[type="checkbox"],
label.checkbox_t input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 2;
  margin: 0px;
  width: 20px;
  height: 20px;
  outline: none;
}
label.radio input[type="radio"],
label.radio_t input[type="radio"] {
  left: calc(18px * -1);
  width: 18px;
  height: 18px;
  top: 0px;
  bottom: 0px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 100%;
}
label.checkbox input[type="checkbox"],
label.checkbox_t input[type="checkbox"] {
  left: calc(20px * -1);
  padding: 0;
}
label.radio input[type="radio"] {
  display: block;
  box-shadow: 18px 0px #FFF;
}
label.radio_t input[type="radio"] {
  box-shadow: 18px 0px #FFF;
}
label.checkbox input[type="checkbox"] {
  box-shadow: 20px 0px #FFF;
}
label.checkbox_t input[type="checkbox"] {
  display: block;
  box-shadow: 20px 0px #FFF;
}

/** checked forcus */
label.checkbox_t input[type="checkbox"]:checked,
label.checkbox input[type="checkbox"]:checked,
label.radio_t input[type="radio"]:checked,
label.radio input[type="radio"]:checked {
  box-shadow: none;
}
label.checkbox_t input[type="checkbox"]:checked:focus,
label.checkbox input[type="checkbox"]:checked:focus {
  opacity: 0.1;
}
label.radio_t input[type="radio"]:focus,
label.radio input[type="radio"]:focus {
  opacity: 0.2;
}
label.checkbox_t input[type="checkbox"]:checked:focus {
  box-shadow: 20px 0px #666;
}
label.checkbox_t input[type="checkbox"]:focus {
  box-shadow: 20px 0px #EEE;
}
label.checkbox input[type="checkbox"]:checked:focus {
  box-shadow: 20px 0px #666;
}
label.checkbox input[type="checkbox"]:focus {
  box-shadow: 20px 0px #EEE;
}
label.radio_t input[type="radio"]:focus {
  box-shadow: 18px 0px #FFF;
}
label.radio input[type="radio"]:focus {
  box-shadow: 18px 0px #FFF;
}


/* -------------------------------------------------------
Common style
---------------------------------------------------------- */
.fs80 {font-size:80%;}
.fs90 {font-size:90%;}
.fs100 {font-size:100%;}
.fs120 {font-size:120%;}
.fs150 {font-size:150%;}

.lh18 {line-height:1.8;}
.lh20 {line-height:2.0;}

.mgt1em {margin-top:1em;}
.mgt2em {margin-top:2em;}
.mgb1em {margin-bottom:1em;}
.mgb2em {margin-bottom:2em;}
.mgt1rem {margin-top:1rem;}
.mgt2rem {margin-top:2rem;}
.mgb1rem {margin-bottom:1rem;}
.mgb2rem {margin-bottom:2rem;}

b, strong, .bold {font-weight: bold;}

.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}