@charset "UTF-8";
.form-content{
    margin-bottom: 30px;
}
.contact-form dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px dotted #004098;
}

@media screen and (min-width: 768px) {
    .contact-form dl:last-child {
        border-bottom: 1px dotted #004098;
    }
}

.contact-form dt,
.contact-form dd {
    padding: 15px 40px;
}

@media screen and (max-width: 767px) {

    .contact-form dt,
    .contact-form dd {
        padding: 20px 0;
    }
}

.contact-form dt {
    position: relative;
    width: 25%;
    font-size: 17px;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 80px;
    background: rgba(0,64,152,0.11);
    padding-left: 20px;
}
@media screen and (max-width: 767px) {
    .contact-form dt {
        width: 100%;
        padding: 10px 80px 10px 15px;
    }
}

.contact-form dt .form-title {
    line-height: 1.5;
    margin: 6px 0;
}

.contact-form dt small {
    font-size: 12px;
    display: block;
}

.contact-form dt .form-label {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    text-align: center;
    line-height: 1;
    width: 37px;
    height: 22px;
    line-height: 22px;
    color: #fff;
    font-size: 13px;
}

@media screen and (max-width: 767px) {
    .contact-form dt .form-label {
        width: 50px;
        
    }
}

.contact-form dt .ninni {
    background-color: #1A1A1C;
}

.contact-form dt .hissu {
    background-color: #004098;
}

.contact-form dd {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .contact-form dd {
        width: 100%;
        display: block;
        padding: 10px 0;
    }
}

.contact-form dd ul li label {
    display: flex;
    align-items: center;
}

.contact-form dd input[type="radio"] {
    display: inline-block;
    margin-right: 10px;
}

.contact-form dd input[type="text"],
.contact-form dd input[type="password"],
.contact-form dd input[type="email"],
.contact-form dd input[type="tel"],
.contact-form dd select{
    padding: 3px 10px;
    height: 40px;
    width: 100%;
    border: 1px solid #CCCCCC;
    background: #fff;
    color: #1A1A1A;
}

.contact-form dd input[type="text"]::placeholder,
.contact-form dd input[type="password"]::placeholder,
.contact-form dd input[type="email"]::placeholder,
.contact-form dd input[type="tel"]::placeholder {
    font-weight: normal;
    color: #9B9B9B;
    line-height: 1.5;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", 'Noto Sans JP', "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 767px) {
.contact-form dd input[type="text"]::placeholder,
.contact-form dd input[type="password"]::placeholder,
.contact-form dd input[type="email"]::placeholder,
    .contact-form dd input[type="tel"]::placeholder {
        font-size: 13px;
    }
}
.contact-form dd .ipt-address {
    max-width: 415px;
}

.contact-form dd input,
.contact-form dd select,
.contact-form dd optgroup,
.contact-form dd option,
.contact-form dd textarea {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", 'Noto Sans JP', "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    background: #fff;
    font-weight: normal;
}
@media screen and (max-width: 767px) {
    .contact-form dd input,
.contact-form dd select,
.contact-form dd optgroup,
.contact-form dd option,
    .contact-form dd textarea {
        font-size: 14px;
    }
}
.contact-form dd .form-row {
    display: flex;
}
.contact-form dd .form-zip {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.form-zip-btn {
    background: #ba7b70;
    border-radius: 5px;
    padding: 7px 10px;
    line-height: 1.5;
    margin-left: 20px;
    border: none;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .form-zip-btn {
        margin: 10px 0;
        display: block;
        margin-left: 40px;
    }
}

.form-zip-btn:hover {
    opacity: 0.8;
    transition: all 0.5s;
}

.form-state {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.contact-form dd .form-zip input[type="text"] {
    width: 270px;
}

@media screen and (max-width: 640px) {
    .contact-form dd .form-zip input[type="text"] {
        width: 230px;
    }
}
.box-select {
  position: relative;
  display: inline-block;
    width: 400px;
    max-width: 100%;
}

.box-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}

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

.box-select:after {
  position: absolute;
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid transparent;
  border-top: 9px solid #000000;
  right: 10px;
  top: 40%;
}

select {
  width: 100%;
  padding: 5px 20px 5px 10px;
  height: 40px;
  border: 1px solid #888888;
  color: #999999;
  background-color: #ffffff;
  letter-spacing: 0.15em;
}

select:focus {
  border: 1px solid #000000;
  outline: none;
}

select option {
  color: #313131;
}
.contact-form dd textarea {
    width: 100%;
    height: 160px;
    padding: 5px 10px;
    resize: none;
    border: 1px solid #888888;
}

.contact-form dd textarea::placeholder {
    color: #a8a8a8;
    line-height: 1.5;
}
.contact-form dd .list-radio{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.contact-form dd .list-radio li{
    margin: 5px 0;
    margin-right: 40px;
}
.contact-form dd .list-radio li.other{
    margin: 0;
    width: 100%;
}
.contact-form dd .list-radio input[type="radio"] {
    width: 15px;
    height: 15px;
    border-color: #D8D5D5;
}
.contact-form dd .select_time {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 50%;
}

.contact-form dd .select_time li {
    width: 47%;
}

.contact-form dd .select_time li select {
    width: calc(100% - 30px);
    height: 36px;
    border: 1px solid #000000;
}

.contact-form dd .flex .flex {
    margin: 5px 0;
    flex-wrap: nowrap;
}

.contact-submit {
    margin: 60px 0 20px;
    text-align: center;
}
.contact-submit-btn.back a{
    text-align: right;
}
.contact-submit-btn.back:after{
    right: auto;
    left: 20px;
      transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
@media screen and (max-width: 767px) {
    .contact-submit {
        margin: 20px 0;
        text-align: left;
    }
}

.contact-submit input[type="checkbox"] {
    margin: 0 5px 3px 0;
}

.contact-submit-btn {
    text-decoration: none;
    display: inline-block;
    position: relative;
    font-size: 16px;
    width: 345px;
    height: 60px;
    margin: 10px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    border: 1px solid #1A1A1C;
    text-decoration: none;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}
.contact-submit-btn:hover{
    background: #1A1A1C;
    color: #fff;
}
.contact-submit-btn:hover .arrow{
    background: #fff;
}
.contact-submit-btn:hover .arrow:after{
    border-left-color: #1A1A1C;
}
.contact-submit-btn .arrow {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    z-index: 2;
    border: none;
}

.contact-submit-btn.back .arrow {
    right: auto;
    left: 0;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.contact-submit-btn input, .contact-submit-btn button{
    text-align: left;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", 'Noto Sans JP', "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: relative;
    border: none;
    outline: none;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.contact-submit-btn a {
    text-align: left;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 100%; */
    font-size: 22px;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", 'Noto Sans JP', "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: relative;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    border-radius: 55px;
    /* cursor: pointer; */
    font-weight: normal;
}
@media screen and (max-width: 767px) {
    .contact-submit-btn a, .contact-submit-btn input, .contact-submit-btn button{
        font-size: 15px;
    }
    .contact-form .flex.flex-jus-center{
        flex-wrap: nowrap;
    }
}
.contact-submit-btn input.dbd{
    color: #ccc;
}
/* @media screen and (min-width: 768px) {
    .contact-submit-btn:hover .arrow {
        background: #fff;
        &:after{
            background: url(../images/common/arr-blue02.png) center center no-repeat;
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
        }
    }
} */

.form-submit {
    margin-bottom: 30px;
}

.form-submit input {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}