@charset "UTF-8";

/* form */

#form {
    margin-top: 7rem;
    background: var(--white);
    overflow-x: hidden;
    width: 100%;
    max-width: 120rem;
    margin: auto;
}
.form-tit {
    text-align: center;
    width: 100%;
    max-width: 120rem;
    margin: 8rem auto 2rem;
}
.form-tit h2 {
    padding: 0 36rem;
    color: #231815;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    display: inline-block;
}
.form-tit h2::before,
.form-tit h2::after
{
    position: absolute;
    content: "";
    display: inline-block;
    background: #231815;
    width: 30%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}
.form-tit h2::before {
    left: 0;
}
.form-tit h2::after {
    right: 0;
}
.choice-wrap {
    display: flex;
    margin-top: 6rem;
    margin-bottom: 10rem;
}
.choice-wrap button {
    width: calc(50% - 3.5rem);
    display: inline-block;
    text-align: center;
    background: #3e3a39;
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    padding: 4rem;
    border-radius: 1rem;
    border: .2rem solid #999999;
    cursor: pointer;
}
.choice-wrap button:nth-of-type(2) {
    margin-left: 3rem;
}
.choice-wrap button.is-active {
    background-color: #a11e30;
    color: #fff;
    opacity: 1;
}

#form h3 {
    text-align: center;
    font-size: 2.75rem;
    font-weight: normal;
    color: var(--gray);
    margin: 0 auto 2rem;
    width: 100%;
    max-width: 96rem;
    display: flex;
    line-height: 1;
    justify-content: center;
}

#form h3 span {
    font-size: 1.66rem;
    background: var(--gray);
    color: var(--white);
    padding: .5rem 3rem;
    margin: 0 1rem 0 0;
    line-height: 1.3;
}

#form h3 em {
    background: #172a88;
    color: #fff;
    padding: .8rem 3.4rem;
    font-size: 1.6rem;
    vertical-align: middle;
    border-radius: .5rem;
}

#form .entry-area {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4rem;
}
#form .entry-area2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 4rem;
}
.entry-area2 li {
    width: calc(33.333% - 1rem);
}
.entry-area2 label {
    
    margin-top: 1rem;
    background-color: var(--gray);
    color: var(--white);
    position: relative;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    padding: 2.8rem 0;
    padding-left: 4rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    opacity: .6;
}

#form .entry-area li {
    width: calc(100% / 3 - 1.5rem);
    margin-top: 1rem;
    background: #3e3a39;
    color: var(--white);
    position: relative;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    padding: 4rem 0;
    justify-content: center;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    border: 0.2rem solid #999999;
}
#form .entry-area li::before {
    position: absolute;
    content: "";
    display: block;
    background: #b2b2b2;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    border-radius: 50%;
}
#form .entry-area li::after {
    background: #5f0f13;
    position: absolute;
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    top: 50%;
    transform: translateY(-50%);
    left: 1.3rem;
    border-radius: 50%;
    opacity: 0;
}
#form .entry-area li.is-active::after {
    opacity: 1;
}

#form .entry-area li.is-active {
    background-color: #a11e30;
    text-align: center;
    color: #fff;
    opacity: 1;
}

#form .shop-box {
    margin-bottom: 4em;
}

#form .entry-store {
    margin: 0 -1rem;
}

#form .entry-store>div {
    margin: 0 1rem;
    float: left;
    /* width: calc((100% - 12rem) / 6); */
    width: 18rem;
}

#form .entry-store input {
    width: .1rem;
    height: .1rem;
    display: inline-block;
}

#form .entry-store label {
    background-color: var(--white);
    color: var(--gray);
    border: 2px solid var(--gray);
    border-radius: 10px;
    height: 220px;
    display: block;
    padding-left: 0;
}

#form .entry-store .store-list-txt,
#form .entry-store .car-list-txt {
    height: 32%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: auto;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: bold;
    text-align: center;
    color: var(--gray);
}

#form .entry-radio-store+label {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: block;
}

#form .entry-radio-store+label::before {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    border: .2rem solid var(--white);
    border-radius: 50%;
    background: linear-gradient(#efefef, #cccccc);
    box-sizing: border-box;
    z-index: 1;
}

#form .entry-radio-store:checked+label::after {
    background: #5f0f13;
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    border: .2rem solid var(--white);
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 2;
}
.form-attention {
    font-size: 1.2rem;
    text-align: center;
}
.store-list-img {
    width: 100%;
    height: 64%;
    position: relative;
    margin: auto;
}
.store-list-img::before {
    content: "";
    display: block;
    padding-top: 45%;
}
.store-list-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/*--------------------ご希望の日にちを選んでください--------------------*/

.calendar-wrap {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    max-width: 120rem;
    margin: 2rem auto 10rem;
}
#calendar2 {
    margin-left: 2rem;
}

.entry-days h4 {
    text-align: center;
    margin: 1rem 0 .5rem;
    font-size: 2.5rem;
    font-weight: normal;
    color: var(--gray);
}

.ui-datepicker-inline {
    border: .1rem solid #acacac;
}

.ui-datepicker-header {
    background: #888888;
    padding: 2rem;
}

.ui-datepicker-prev {
    float: left;
    cursor: pointer;
    color: var(--white);
    padding: 0 0 0 2rem;
    position: relative;
}

.ui-datepicker-prev:before {
    content: "";
    border: .7rem solid transparent;
    border-right: .7rem solid var(--white);
    position: absolute;
    left: -.7rem;
    top: calc(50% - 0.51rem);
}

.ui-datepicker-next {
    float: right;
    cursor: pointer;
    color: var(--white);
    padding: 0 2rem 0 0;
    position: relative;
}

.ui-datepicker-next:after {
    content: "";
    border: .7rem solid transparent;
    border-left: .7rem solid var(--white);
    position: absolute;
    right: -.7rem;
    top: calc(50% - 0.51rem);
}

.ui-datepicker-title {
    text-align: center;
    color: var(--white);
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.ui-datepicker-year:after {
    content: "年";
}

.entry-days table {
    width: 100%;
    background: var(--white);
}

.entry-days th,
.entry-days td {
    border: .1rem solid #acacac;
}

.entry-days th {
    padding: 2rem;
}

.entry-days th {
    background: #e8e8e8;
    font-weight: normal;
}

.entry-days td {
    text-align: center;
    font-size: 2rem;
}

.entry-days td a.ui-state-active {
    background: #902935;
    color: var(--white);
}

.entry-days td.ui-datepicker-week-end {
    background: #ffc9c9;
}

.entry-days td.ui-datepicker-week-end:last-child {
    background: #bae4f6;
}

.entry-days a.ui-state-default,
.entry-days span.ui-state-default {
    display: block;
    padding: 2rem;
}

.entry-days .ui-datepicker-calendar td {
    color: #cccccc;
}

.entry-days input#days,
.entry-days input#days2 {
    color: var(--white);
    /* display: none; */
    font-size: 1.6rem;
}


/*--------------------お名前を入力してください--------------------*/


/*--------------------電話番号を入力してください--------------------*/


/*--------------------メールアドレスを入力してください--------------------*/

.entry-name input,
.entry-tel input,
.entry-email input {
    border: .2rem solid var(--gray);
    width: 100%;
    max-width: 96rem;
    padding: 3.5rem;
    font-size: 2.75rem;
    margin: 0rem auto 7rem;
    display: block;
    border-radius: 1rem;
}
.entry-present {
    margin-bottom: 13rem;
}
.entry-present ul {
    display: flex;
    justify-content: center;
}

.entry-present li {
    display: flex;
    align-items: center;
    margin: 0 8rem;
    cursor: pointer;
}
.entry-present img {
    margin: 0 1.5rem;
}
.entry-present label {
    display: flex;
    align-items: center;
    font-size: 2.5rem;
}
.entry-present input[type=radio] + label:before {
    content: "";
    background: var(--white);
    border-radius: 100%;
    border: 1px solid var(--gray);
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    top: -0.2em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}
.entry-present input[type=radio]:checked + label:before {
    background-color: var(--gray);
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.entry-present input[type=radio] {
    position: absolute;
    opacity: 0;
}

.submit {
    text-align: center;
    padding-bottom: 0;
}

input[type="submit"].submit-btn {
    background-color: #a11e30;
    width: 64rem;
    padding: 3.5rem 0;
    font-size: 4rem;
    line-height: 1;
    color: #fff;
    border-radius: 1rem;
    cursor: pointer;
    margin: 0 auto 3rem;
    display: block;
}

input[type="submit"].submit-btn:hover {
    opacity: 0.8;
}

.submit-link {
    color: var(--white);
    display: inline-block;
    text-align: center;
    font-size: 1.6rem;
    margin: -3rem auto 0;
    padding-bottom: 1rem;
    border-bottom: .1rem solid var(--white);
}

.submit-link:hover {
    border-bottom: .1rem solid var(--gray);
}

.copy {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    background: var(--gray);
    color: var(--white);
}


/*--------------------確認画面--------------------*/

#confirm header {
    padding: 2rem 0 6rem;
}

#confirm header img {
    display: block;
    max-width: 80px;
    margin: auto;
    text-align: center;
}

#confirm h2 {
    margin: 0 0 2rem;
    text-align: center;
}

#confirm p,
#finish p {
    text-align: center;
    line-height: 1.6;
}

#confirm table {
    width: 100%;
    margin: 1rem 0;
}

#confirm table th,
#confirm table td {
    border: .1rem solid #cccccc;
    padding: 2rem;
}

#confirm table th {
    font-weight: normal;
    background: #efefef;
}

input[type="submit"].prev-btn {
    border: .1rem solid #acacac;
    padding: .5rem;
    color: #acacac;
    border-radius: .3rem;
    cursor: pointer;
    display: block;
    font-size: 1rem;
}

input[type="submit"].prev-btn:hover {
    opacity: 0.8;
}

#confirm .mainbanner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#confirm .mainbanner img {
    width: 50%;
}

#confirm a.thnkas-anchor-close {
    text-decoration: underline;
    color: #0000ff;
}

.switch {
    display: flex;
}

.switch img,
.switch a {
    width: 100%;
}
.entry-radio-store2 {
    display: none;
}
.entry-radio-store2.is-active {
    display: none !important;
}
.entry-radio-store2+label {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: block;
}
.entry-radio-store2+label::before {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid var(--white);
    border-radius: 50%;
    background: linear-gradient(#efefef, #cccccc);
    box-sizing: border-box;
}
.entry-radio-store2:checked+label::after {
    background: #9e1b32;
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid var(--white);
    border-radius: 50%;
    box-sizing: border-box;
}

/*----------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------タブレット／ブレイクポイント-------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width:768px) and (max-width:1199px) {
    img {
        max-width: 100%;
    }
    .form-tit h2 {
        padding: 0 5vw;
        font-size: 3vw;
    }
    .form-tit h2::before {
        left: -24%;
    } 
    .form-tit h2::after {
        right: -24%;
    } 
    .choice-wrap button {
        font-size: 2.4rem;
        padding: 3rem;
    }
    #form .entry-area li {
        font-size: 2.4rem;
        padding: 3rem;
    }
}


/*----------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------*/


/*-------------------------------------------スマートフォン／ブレイクポイント-------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:767px) {
    img {
        width: 100%;
    }
	
		.form-tit {
				margin: 3rem auto 1rem;
		}

    .form-tit h2 {
        font-size: 1.5rem;
        padding: 1rem;
    }

    #form .inner {
        width: 100%;
        padding: 0;
    }
    #form h3 {
        font-size: 1.4rem;
        padding: 1rem 0;
        margin: 3rem auto 0;
        width: 100%;
        align-items: center;
    }
    #form .entry-body {
        margin-bottom: 0;
    }
    #form h3 span,
    #form h3 em {
        font-size: 1rem;
        padding: .5rem 1rem;
    }
    #form .entry-models>div {
        margin: -.5rem .5rem 0;
        width: calc((100% - 3rem)/3);
        height: 15rem;
    }
    #form .entry-radio-models+label::before,
    #form .entry-radio-store+label::before {
        top: .5rem;
        left: .5rem;
        width: 1.5rem;
        height: 1.5rem;
        border: .3rem solid var(--white);
        border-radius: 50%;
        background: linear-gradient(#efefef, #cccccc);
        box-sizing: border-box;
    }
    #form .car-list .entry-radio-car:checked+label::after {
        top: 1.1rem;
    }
    #form .entry-store>div {
        margin: 0 .5rem;
        float: left;
        width: calc((100% - 3rem) / 3);
    }
    #form .column7>div {
        margin: 0 .5rem;
        float: left;
        width: calc((100% - 3rem) / 3);
    }
    .calendar-wrap {
        width: 100%;
        display: block;
        margin: 1rem auto 2rem;
    }
    .entry-days h4 {
        font-size: 1.6rem;
    }
    .entry-days table {
        table-layout: fixed;
    }
    .entry-days th,
    .entry-days td {
        font-size: 1.4rem;
    }
    .entry-days th {
        padding: 1rem;
    }
    .entry-days a.ui-state-default,
    .entry-days span.ui-state-default {
        padding: 1rem;
    }
    .entry-name input,
    .entry-tel input,
    .entry-email input,
    .entry-campaign select {
        width: 100%;
        font-size: 1.6rem;
        padding: 2rem 1rem;
        margin: 0;
    }
    input[type="submit"].submit-btn {
        width: 70%;
        font-size: 1.6rem;
        margin: 2rem auto 1rem;
        padding: 1.5rem 0;
    }
    #confirm img.logo {
        width: 15rem;
    }
    #confirm h2 {
        font-size: 1.6rem;
        line-height: 1.4;
        margin: 1.5rem 0 !important;
    }
    #confirm p {
        font-size: 1.3rem;
    }
    #confirm a.thnkas-anchor {
        text-decoration: underline;
        color: #0000ff;
        margin: 0 0 2rem;
        display: block;
    }
    #button {
        width: 100%;
        font-size: 1.5rem;
        margin: 2rem auto;
    }
    .entry-note {
        line-height: 1.3;
    }
    .shop-box {
        width: 100%;
        padding: .5rem 0 2rem;
    }
    #form {
        padding: 0 1rem;
        margin-top: 0;
    }
    .select-model {
        justify-content: space-between !important;
    }
    .clean ul {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .clean ul li {
        margin: 3rem 0 0;
        width: 21.6rem;
    }
    .safety img.safty-text {
        width: 60%;
        margin: 0 auto 1rem;
    }
    #form .entry-body {
        justify-content: space-between;
    }
    #form .entry-area {
        margin-bottom: 1rem;
    }
    #form .entry-area li {
        /* width: calc(50% - .5rem); */
    }
    #form .entry-area li:nth-of-type(3n) {
        margin-right: 0;
    }

    #form #body-list .entry-radio-body:checked+label::after {
        content: "";
        display: block;
        position: absolute;
        top: .5rem;
        left: .5rem;
        width: 1.5rem;
        height: 1.5rem;
        background: var(--pink);
        border-radius: 50%;
    }
    #form .entry-store {
        margin: 0 -.5rem;
    }
    #form .entry-store label {
        height: 120px !important;
    }
    #form .entry-store .store-list-txt,
    #form .entry-store .car-list-txt {
        font-size: 1.3rem;
        text-align: center;
    }
    #form .car-list-txt {
        display: inline-block;
        width: 100%;
    }
    .submit-link {
        margin: auto;
        font-size: 1.3rem;
    }
    .submit {
        padding-bottom: 2.5rem;
    }
    #form .entry-area li {
        font-size: 1.2rem;
        padding: 1.4rem;
        padding-left: 1.7rem;
        padding-right: 0.3rem;
    }
    .entry-present {
        margin-bottom: 7rem;
    }
    .entry-present ul {
        display: grid;
    }
    .entry-present li {
        margin: 1rem 0;
    }
    .entry-present img {
        width: 4rem;
    }
    .entry-present label {
        justify-content: center;
        font-size: 1.8rem;
    }
    .entry-present input[type=radio] + label:before {
        top: .2em;
        width: .8em;
        height: .8em;
    }
    .choice-wrap button {
        width: calc(50% - 30px / 2);
        display: inline-block;
        text-align: center;
        background: #3e3a39;
        color: #fff;
        font-size: 1.2rem;
        font-weight: 700;
        padding: 1rem;
        border-radius: 1rem;
        border: 1px solid #999999;
    }
    .form-tit h2::before {
        left: -22%;
    }
    .form-tit h2::after {
        right: -22%;
    }
    .form-tit h2::before,
    .form-tit h2::after {
        width: 25%;
    }
    #form .entry-radio-store:checked+label::after {
        top: 3%;
        left: 2%;
        z-index: 2;
    }
    #calendar2 {
        margin-left: 0;
        margin-top: 3rem;
    }
    #form .entry-area li::before {
        width: 13px;
        height: 13px;
    }
    #form .entry-area li::after {
        width: 9px;
        height: 9px;
        left: 1.2rem;
    }
    .choice-wrap {
        margin-top: 2rem;
        margin-bottom: 3rem;
    }
    #form .shop-box {
        margin-bottom: 0;
    }
    .choice-wrap {
        justify-content: space-evenly;
    }
    .choice-wrap button:nth-of-type(2) {
        margin-left: 0;
    }
    #form .entry-area li {
        width: calc(100% / 3 - 0.5rem);
    }
    .footer {
        margin-top: 4rem;
        margin-bottom: 8rem;
    }
    .footer img {
        width: 24rem;
    }
}

.is-hide {
    display: none !important;
}

.is-active {
    display: inline-block !important;
}