@charset "utf-8";

/*
* デザイン
* --------------------------------------------------
*/
::placeholder,
select:invalid {
    color: #cccccc !important;
}

.v3-form-title h2:before {
    position: absolute;
    content: '';
    bottom: 0px;
    height: 1px;
    background: #333333;
    display: inline-block;
    width: 10cqi;
}

.v3-form-table .th {
    border-top: 1px dotted #cccccc;
    background: #efefef;
    font-size: 1.5cqi;
    letter-spacing: 0.1cqi;
}

.v3-form-table .th span {
    /* border-radius: 0.5cqi; */
    border-radius: 0px;
}

.v3-form-table .th span.required {
    color: #ffffff;
    background: #c50014;
}

.v3-form-table .th span.optional {
    color: #478cb8;
    background: #dae8f1;
}

.v3-form-table .th span.question {
    color: #666666;
    background: #cccccc;
}

.v3-form-table .td {
    border-top: 1px dotted #cccccc;
    font-size: 1.5cqi;
    letter-spacing: 0.2cqi;
}

.v3-form-table .th:nth-of-type(1),
.v3-form-table .td:nth-of-type(2) {
    border: none;
}

.v3-form-table_caution {
    background: #fafafa;
    border: 1px solid #cccccc;
    font-size: 1.2cqi;
    letter-spacing: 0.1cqi;
}

.v3-form-table_caution a {
    color: #133967;
    text-decoration: underline;
}

.v3-form-table a {
    color: #00396b;
}

.v3-form-table .td .w10,
.v3-form-table .td .w20,
.v3-form-table .td .w25,
.v3-form-table .td .w40,
.v3-form-table .td .w50,
.v3-form-table .td .w100 {
    font-size: 1.5cqi;
}

.v3-form-table a {
    font-size: 1.5cqi;
    letter-spacing: 0.1cqi;
}

.v3-form-table label {
    font-size: 1.5cqi;
    letter-spacing: 0.1cqi;
}

.v3-form-table_intro {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5cqi;
    width: 100%;
    font-size: 1.6cqi;
    line-height: 1.8;
}

.v3-form-table_caution {
    background: #fafafa;
    border: 1px solid #cccccc;
    font-size: 1.2cqi;
    letter-spacing: 0.1cqi;
}

.v3-form-table_caution span {
    font-size: 1.2cqi;
}

.v3-form-table_caution a {
    font-size: 1.2cqi;
    color: #133967;
    text-decoration: underline;
}

.red {
    color: #ff505a;
}

@media (max-width: 767px) {
    .v3-form-title h2:before {
        font-size: 1.5cqi;
        margin-right: 1cqi;
    }

    .v3-form-title h2:after {
        font-size: 1.5cqi;
        margin-left: 1cqi;
    }

    .v3-form-table .td,
    .v3-form-table .th {
        font-size: 4cqi;
    }

    .v3-form-table .th {
        border-radius: 1cqi;
        background: #efefef;
    }

    .v3-form-table .td .w10,
    .v3-form-table .td .w20,
    .v3-form-table .td .w25,
    .v3-form-table .td .w40,
    .v3-form-table .td .w50,
    .v3-form-table .td .w100 {
        font-size: 3.5cqi;
    }

    .v3-form-table a {
        font-size: 3.5cqi;
        letter-spacing: 0.1cqi;
    }

    .v3-form-table label {
        font-size: 3.5cqi;
        letter-spacing: 0.1cqi;
    }

    .v3-form-table_caution {
        font-size: 3cqi;
    }

    .v3-form-table_caution span {
        font-size: 3cqi;
    }

    .v3-form-table_caution a {
        font-size: 3cqi;
    }

    .v3-form-table_intro {
        padding: 15px 0px;
        font-size: 3.5cqi;
        line-height: 1.5;
    }
}

/*
* フォーム入力エリア設定
* --------------------------------------------------
*/
.v3-form-table .form-group .pristine-error {
    color: #ff505a;
}

.v3-form-table input[type="text"],
.v3-form-table input[type="email"],
.v3-form-table input[type="tel"],
.v3-form-table input[type="number"],
.v3-form-table input[type="date"],
.v3-form-table select {
    font-size: 1.4cqi;
    letter-spacing: 0.2cqi;
    border-radius: 0.5cqi;
    border: 1px solid #cccccc;
    background: #ffffff;
}

.v3-form-table textarea {
    font-size: 1.4cqi;
    letter-spacing: 0.2cqi;
    border-radius: 0.5cqi;
    border: 1px solid #cccccc;
    background: #ffffff;
}

.v3-form-table input:required,
.v3-form-table select:required,
.v3-form-table textarea:required {
    background: #fff6f6;
    border: 1px solid #ccbbbb;
}

.v3-form-table input:not(:placeholder-shown),
.v3-form-table select:valid {
    background: rgba(245, 250, 255, 1);
    border: 1px solid #cccccc;
}

/* オートコンプリート対策 */
.v3-form-table input:-internal-autofill-selected {
    box-shadow: 0px 0px 100px 100px rgba(245, 250, 255, 1) inset;
    border: 1px solid #cccccc !important;
}

.v3-form-table select:has(option:checked[value=""]) {
    color: #cccccc;
    background: #ffffff;
}

.v3-form-table select:has(option:checked[value=""]):required {
    background: #fff6f6;
}

.v3-form-table input:disabled,
.v3-form-table select option:disabled {
    color: #dddddd !important;
    border: 1px solid #dddddd !important;
    background: #f5f5f5 !important;
}

.v3-form-table .td.confirm {
    font-size: 1.5cqi;
    line-height: 1.2;
}

@media (max-width: 767px) {

    .v3-form-table input[type="text"],
    .v3-form-table input[type="email"],
    .v3-form-table input[type="tel"],
    .v3-form-table input[type="number"],
    .v3-form-table input[type="date"],
    .v3-form-table select {
        border-radius: 1cqi;
        font-size: 3.5cqi;
        letter-spacing: 0.2cqi;
    }

    .v3-form-table textarea {
        border-radius: 1cqi;
    }
}

/*
* 時間
* --------------------------------------------------
*/

.form-time-select {
    background: #eceef1;
}

.form-time-select li {
    background: #ffffff;
    color: rgba(50, 50, 50, 1);
}

.form-time-select li:hover {
    background: #e6f2ff;
}


/*
* アンケートに答えるボタン
* --------------------------------------------------
*/

.enquete-button {
    appearance: none;
    border: 1px solid #ffffff;
    cursor: pointer;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
    display: flex;
    width: 100%;
    height: auto;
    margin: 30px auto;
    padding: 20px 0px;
    background: #c50014;
    color: #ffffff;
    font-size: 1.6cqi;
    letter-spacing: 0.1cqi;
    font-weight: 700;
    animation: fuwafuwa 2s infinite ease-in-out alternate;
    justify-content: center;
    align-items: center;
}

@keyframes fuwafuwa {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, -5px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@media (max-width: 767px) {
    .enquete-button {
        margin: 15px auto;
        font-size: 3.5cqi;
        letter-spacing: 0.2cqi;
        padding: 15px 0px;
    }
}

/*
* 送信
* --------------------------------------------------
*/

.v3-form-submit p {
    background: #efefef;
    border: 1px solid #cccccc;
}

.v3-form-submit p span {
    color: #ff0000;
}

.btnForm {
    background: #c00800;
    border-radius: 1cqi;
}

.cmnBtn {
    background: #333333;
}

@media (max-width: 767px) {
    .btnForm {
        border-radius: 3cqi;
    }
}

/*
* インカム　プログレスバー
* --------------------------------------------------
*/

.progressbar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.progressbar .process {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% / 3);
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 10cqi;
    padding: 0px;
    font-size: 1.6cqi;
    line-height: 1.5;
    background: #F5F5F5;
    color: #999999;
    justify-content: center;
    align-items: center;
}

.progressbar .process:not(:last-child)::before,
.progressbar .process:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 5cqi solid transparent;
    border-left: 2.5cqi solid #F5F5F5;
    margin: auto;
}

.progressbar .process:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

.progressbar .process.active {
    z-index: 1;
    background: #c50014;
    color: #ffffff;
}

.progressbar .process.active:not(:last-child)::after {
    border-left-color: #c50014;
}

.progressbar .process.active:not(:last-child)::before {
    border-left: none;
}

@media screen and (max-width: 767px) {
    .progressbar .process {
        font-size: 3cqi;
        line-height: 1.5;
        height: 15cqi;
    }

    .progressbar .process:not(:last-child)::before,
    .progressbar .process:not(:last-child)::after {
        border: 7.5cqi solid transparent;
        border-left: 3.25cqi solid #F5F5F5;
    }
}