﻿/* Radio ---------------------------------------------------*/
/*
input[type="radio"] {
    display: none;

    & + label {
        display: block;
        cursor: pointer;
        margin: 0;

        //通常時の見た目
        &::before {
            width: 30px;
            height: 30px;
            display: inline-block;
            content: "";
            border-radius: 17px;
            vertical-align: middle;
            border: 2px solid #dddddd;
            background-color: #f0f0f0;
            margin: -2px 5px 0 0;
            -webkit-transition: .1s;
                    transition: .1s;
        }
        //hover時の見た目
        &:hover {
            color: #808080;
            &::before {
                background-color: #fff;
            }

        }
    }
    //checked時の見た目
    &:checked + label {
        color: $blue;
        cursor: default;

        &::before {
            border-color: $blue !important;
            background-color: $blue !important;
            box-shadow: inset 0 0 0 7px #fff;
        }
    }  
}
*/
/* Checkbox ------------------------------------------------*/
.simulation input[type="checkbox"] {
  display: none;
  /*checked時の見た目*/ }
  .simulation input[type="checkbox"] + label {
    display: block;
    cursor: pointer;
    margin: 0;
    /*通常時の見た目*/
    /*hover時の見た目*/ }
    .simulation input[type="checkbox"] + label::before {
      width: 34px;
      height: 34px;
      line-height: 32px;
      font-size: 42px;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      content: "\2713";
      color: transparent;
      padding: 0;
      border-radius: 5px;
      border: 2px solid #dddddd;
      background: #f0f0f0;
      margin: -2px 5px 0 0;
      -webkit-transition: 0.1s;
      transition: 0.1s;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
    .simulation input[type="checkbox"] + label:hover {
      color: #808080; }
      .simulation input[type="checkbox"] + label:hover::before {
        background-color: #fff; }
  .simulation input[type="checkbox"]:checked + label {
    color: #36bbe7; }
    .simulation input[type="checkbox"]:checked + label::before {
      font-size: 25px;
      background: #fff !important;
      border-color: #36bbe7 !important;
      color: #36bbe7 !important; }

/*# sourceMappingURL=checkradio.css.map */