@charset "UTF-8";
/* Form */

/* smartphone
------------------------------------------------------------ */
@media screen and (max-width: 599px) {
    form table { font-size: 100%;}
    form table th {padding: 10px;}
    form table td {padding: 10px;}


    form input[type="text"], form input[type="email"], form input[type="url"], form input[type="password"] {
        font-size:14px;
        width:250px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:10px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }

    form div.select_box {
        background: #fff;
        margin-top: 6px;
        width: 298px;
        border-radius: 4px;
        background-image: url(/global/images/angle-down.svg);
        background-size: 14px 14px;
        background-position: right 20px center;
        background-repeat: no-repeat;
    }
    form div.select_box select {
        font-size: 14px;
        width: 298px;
        border: 1px solid #c8c8c8;
        background: transparent;
        padding: 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-box-sizing: border-box;
    }

    form select {
        font-size: 14px;
        width: 100px;
        border: 1px solid #c8c8c8;
        background: transparent;
        padding: 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-box-sizing: border-box;
    }

    form input[type="number"] {
        font-size:12px;
        width:20px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:12px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }

    form textarea {
        font-size:14px;
        width:100%;
        height:200px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:10px;
        margin-top:6px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }

    form .btn_form {
        width: 140px;
        font-size:100%;
        padding: 6px;
        background:#6a89e4;
        color: #FFF;
        font-weight:bold;
        border-radius:4px;
        -webkit-border-radius:4px;
        cursor:pointer;
        margin-right:10px;
    }

    form .btn_form:hover { opacity: 0.8; }

    form .btn_form_cancel {
        width: 140px;
        font-size:100%;
        padding: 6px;
        background: -moz-linear-gradient(top, #ccc, #b4b4b4);
        background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#b4b4b4));
        color: #FFF;
        font-weight:bold;
        border-radius:4px;
        -webkit-border-radius:4px;
        cursor:pointer;
    }

    form .btn_form_cancel:hover { opacity: 0.8;}



    /*	CheckBox
    ------------------------------------------------------------ */ 
    input[type="checkbox"] + label, input[type="checkbox"] + span, input[type="checkbox"] + input[type="hidden"] + span {
        display: block;
        position: relative;
        padding-left: 30px;
        color: #000;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    input[type="checkbox"] + label:before, input[type="checkbox"] + span:before, input[type="checkbox"] + input[type="hidden"] + span:before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid #000;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .6;
        -webkit-transition: all .12s, border-color .08s;
        transition: all .12s, border-color .08s;
    }

    input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + span:before, input[type="checkbox"]:checked + input[type="hidden"] + span:before {
        width: 10px;
        top: -5px;
        left: 5px;
        border: 2px solid #3abb28;
        border-radius: 0;
        opacity: 1;
        border-top-color: transparent;
        border-left-color: transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    span.wpcf7-list-item { margin-left: 0 !important; }
    label.span { cursor: pointer; }

    .radio-input{
        display: none;
    }
    .radio-input + label{
        padding-left: 20px;
        position:relative;
        margin-right: 20px;
    }
    .radio-input + label::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        border-radius: 50%;
    }
    .radio-input:checked + label{
        color: #1079be;
    }
    .radio-input:checked + label::after{
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 11px;
        height: 11px;
        background: #1079be;
        border-radius: 50%;
    }

    span.wpcf7-list-item {
        display: block !important;
    }
    .wpcf7c-conf {
        border: 0 !important;
        background-color: #c8c8c8 !important;
    }
}

span.required { color:#c80000; }
sup.required { color:#c80000; }

    /*	RadioButton
    ------------------------------------------------------------ */ 

label ~ label {
  margin-left: 15px;
}

input[type=radio] {
  margin-right: 8px;
}

/* ラジオボタン */
.radio-btns input[type=radio] {
  display: none;
}

.radio-btns label {
  position: relative;
  padding-left: 25px;
}

.radio-btns input[type=radio] + label::before {
  position: absolute;
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  left: 0;
  top: 0;
}

.radio-btns input[type=radio] + label::after {
  position: absolute;
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2e3175;
  left: 3px;
  top: 3px;
  opacity: 0;
  transition: .3s;
}

.radio-btns input[type=radio]:checked + label::after {
 opacity: 1;
}


/* tablet
------------------------------------------------------------ */
@media screen and (min-width: 600px) {
    form table { font-size: 100%;}
    form table th {padding: 10px;}
    form table td {padding: 10px;}


    form input[type="text"], form input[type="email"], form input[type="url"], form input[type="password"] {
        font-size:14px;
        width:250px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:10px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }

    form div.select_box {
        background: #fff;
        margin-top: 6px;
        width: 298px;
        border-radius: 4px;
        background-image: url(/global/images/angle-down.svg);
        background-size: 14px 14px;
        background-position: right 20px center;
        background-repeat: no-repeat;
    }
    form div.select_box select {
        font-size: 14px;
        width: 298px;
        border: 1px solid #c8c8c8;
        background: transparent;
        padding: 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-box-sizing: border-box;
    }

    form select {
        font-size: 14px;
        width: 100px;
        border: 1px solid #c8c8c8;
        background: transparent;
        padding: 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-box-sizing: border-box;
    }

    form input[type="number"] {
        font-size:12px;
        width:20px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:12px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }

    form textarea {
        font-size:14px;
        width:70vw;
        height:20vw;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:10px;
        margin-top:6px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }


    form .btn_form {
        width: 140px;
        font-size:100%;
        padding: 6px;
        background:#6a89e4;
        color: #FFF;
        font-weight:bold;
        border-radius:4px;
        -webkit-border-radius:4px;
        cursor:pointer;
        margin-right:10px;
    }

    form .btn_form:hover { opacity: 0.8; }

    form .btn_form_cancel {
        width: 140px;
        font-size:100%;
        padding: 6px;
        background: -moz-linear-gradient(top, #ccc, #b4b4b4);
        background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#b4b4b4));
color: #FFF;
        font-weight:bold;
        border-radius:4px;
        -webkit-border-radius:4px;
        cursor:pointer;
    }

    form .btn_form_cancel:hover { opacity: 0.8;}



    /*	CheckBox
    ------------------------------------------------------------ */ 
    input[type="checkbox"] + label, input[type="checkbox"] + span, input[type="checkbox"] + input[type="hidden"] + span {
        display: block;
        position: relative;
        padding-left: 30px;
        color: #000;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    input[type="checkbox"] + label:before, input[type="checkbox"] + span:before, input[type="checkbox"] + input[type="hidden"] + span:before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid #000;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .6;
        -webkit-transition: all .12s, border-color .08s;
        transition: all .12s, border-color .08s;
    }

    input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + span:before, input[type="checkbox"]:checked + input[type="hidden"] + span:before {
        width: 10px;
        top: -5px;
        left: 5px;
        border: 2px solid #3abb28;
        border-radius: 0;
        opacity: 1;
        border-top-color: transparent;
        border-left-color: transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    span.wpcf7-list-item { margin-left: 0 !important; }
    label.span { cursor: pointer; }

    .radio-input{
        display: none;
    }
    .radio-input + label{
        padding-left: 20px;
        position:relative;
        margin-right: 20px;
    }
    .radio-input + label::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        border-radius: 50%;
    }
    .radio-input:checked + label{
        color: #1079be;
    }
    .radio-input:checked + label::after{
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 11px;
        height: 11px;
        background: #1079be;
        border-radius: 50%;
    }

    span.wpcf7-list-item {
        display: block !important;
    }
    .wpcf7c-conf {
        border: 0 !important;
        background-color: #c8c8c8 !important;
    }
}



/* PC
------------------------------------------------------------ */
@media screen and (min-width: 1025px) {
    form table { font-size: 100%;}
    form table th {padding: 10px;}
    form table td {padding: 10px;}


    form input[type="text"], form input[type="email"], form input[type="url"], form input[type="password"] {
        font-size:14px;
        width:250px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:10px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }

    form div.select_box {
        background: #fff;
        margin-top: 6px;
        width: 298px;
        border-radius: 4px;
        background-image: url(/global/images/angle-down.svg);
        background-size: 14px 14px;
        background-position: right 20px center;
        background-repeat: no-repeat;
    }
    form div.select_box select {
        font-size: 14px;
        width: 298px;
        border: 1px solid #c8c8c8;
        background: transparent;
        padding: 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-box-sizing: border-box;
    }

    form select {
        font-size: 14px;
        width: 100px;
        border: 1px solid #c8c8c8;
        background: transparent;
        padding: 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-box-sizing: border-box;
    }

    form input[type="number"] {
        font-size:12px;
        width:20px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:12px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }

    form textarea {
        font-size:14px;
        width:700px;
        height:200px;
        background:#fff;
        border:1px solid #c8c8c8;
        padding:10px;
        margin-top:6px;
        border-radius:4px;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        -webkit-box-sizing: border-box;
    }


    form .btn_form {
        width: 140px;
        font-size:100%;
        padding: 6px;
        background:#6a89e4;
        color: #FFF;
        font-weight:bold;
        border-radius:4px;
        -webkit-border-radius:4px;
        cursor:pointer;
        margin-right:10px;
    }

    form .btn_form:hover { opacity: 0.8; }

    form .btn_form_cancel {
        width: 140px;
        font-size:100%;
        padding: 6px;
        background: -moz-linear-gradient(top, #ccc, #b4b4b4);
        background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#b4b4b4));
color: #FFF;
        font-weight:bold;
        border-radius:4px;
        -webkit-border-radius:4px;
        cursor:pointer;
    }

    form .btn_form_cancel:hover { opacity: 0.8;}



    /*	CheckBox
    ------------------------------------------------------------ */ 
    input[type="checkbox"] + label, input[type="checkbox"] + span, input[type="checkbox"] + input[type="hidden"] + span {
        display: block;
        position: relative;
        padding-left: 30px;
        color: #000;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    input[type="checkbox"] + label:before, input[type="checkbox"] + span:before, input[type="checkbox"] + input[type="hidden"] + span:before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid #000;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .6;
        -webkit-transition: all .12s, border-color .08s;
        transition: all .12s, border-color .08s;
    }

    input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + span:before, input[type="checkbox"]:checked + input[type="hidden"] + span:before {
        width: 10px;
        top: -5px;
        left: 5px;
        border: 2px solid #3abb28;
        border-radius: 0;
        opacity: 1;
        border-top-color: transparent;
        border-left-color: transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    span.wpcf7-list-item { margin-left: 0 !important; }
    label.span { cursor: pointer; }

    .radio-input{
        display: none;
    }
    .radio-input + label{
        padding-left: 20px;
        position:relative;
        margin-right: 20px;
    }
    .radio-input + label::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        border-radius: 50%;
    }
    .radio-input:checked + label{
        color: #1079be;
    }
    .radio-input:checked + label::after{
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 11px;
        height: 11px;
        background: #1079be;
        border-radius: 50%;
    }

    span.wpcf7-list-item {
        display: block !important;
    }
    .wpcf7c-conf {
        border: 0 !important;
        background-color: #c8c8c8 !important;
    }
}