@charset "utf-8";

.fixbody {overflow-y: hidden;}

/* reusable classes */
.vehicle-survey .hide, .vehicle-survey.hide {display:none}
.vehicle-survey h2 {font-size: 18px;margin:15px 0}
.vehicle-survey h2::before { content: ""; display: inline; border: 3px solid #ffaa3d; border-radius: 3px; margin-right: 10px; }
.vehicle-survey .horizonal-margin { margin: 0 10px; }
.vehicle-survey .bottom-margin { margin-bottom: 50px; }
.vehicle-survey ul.horizonal-list {display:flex; flex-direction: row; flex-wrap: wrap; padding:0}
.vehicle-survey ul.horizonal-list > li {list-style: none; padding: 13px 16px; font-size:16px}
.vehicle-survey ul.vertical-list {padding:0}
.vehicle-survey ul.vertical-list > li {list-style: none; font-size: 16px; font-weight: 700; border-bottom: 1px solid #d7d7d7d7; padding: 15px 10px; position: relative;}
.vehicle-survey .cursor-selectable {cursor: pointer;}
.vehicle-survey .scroll-y {overflow-y: auto;}


/* progress visual */
.vehicle-survey .window .progresses { display: flex; justify-content: space-between; flex-direction: row-reverse; margin-right: 22px; margin-bottom: 30px; }
.vehicle-survey .window .progresses > .item { display:flex; flex-direction: column; justify-content: center; align-items: center; width: 23.8%; text-align: center; font-weight: 700; position: relative; background-color: #f2f2f2; color: #959595; height: 56px; }
.vehicle-survey .window .progresses > .item:nth-child(-n+3)::before { content: ""; position: absolute; width: 32px; height: 56px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: #fff; top: 0px; left: 0px;}
.vehicle-survey .window .progresses > .item::after { content:""; position:absolute; width:32px; height:56px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: #f2f2f2; top:0px; right:-32px; }
.vehicle-survey .window .progresses > .item.active { background-color: #ffaa3d; color: #fff; }
.vehicle-survey .window .progresses > .item.active::after { background-color: #ffaa3d; }
.vehicle-survey .window .progresses > .item:has(p:not(:empty)) p:first-child {font-size:13px}
.vehicle-survey .window .progresses > .item:has(p:not(:empty)) p:last-child {font-size:12px}
.vehicle-survey .window .progresses > .item:has(p:empty) p {font-size:16px !important}

/* japanese 50-on index visual */
.vehicle-survey .indexes-area { background-color: #FFF0DD; margin: 15px 0; }
.vehicle-survey .indexes { display: flex; flex-wrap: wrap; padding: 15px 0; }
.vehicle-survey .indexes > div { text-align: center; width:10%; }
.vehicle-survey .indexes button { width: 90%; background-color: #FFF; border: solid 1.5px #d7d7d7; border-radius: 5px; box-shadow: 2px 2px #C4B8AA; font-size: 13px; font-weight: 700; margin: 5px 0; color: #000; padding: 3px 0; }
.vehicle-survey .indexes button.active { background-color: #d7d7d7 !important; box-shadow: none !important; }
.vehicle-survey .indexes button.disabled { background-color: #C4B8AA !important; border: solid 1.5px #C4B8AA !important; box-shadow: none !important; }

/* 50-on filter behavior */
.vehicle-survey .indexes-filterable {display:none}
.vehicle-survey .indexes-filterable:has(li:not(.hide)) {display:initial}

/* modal overlay */

.vehicle-survey .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(0,0,0,0.6); display: flex; justify-content: center;opacity:0}
.vehicle-survey .close-button { position: absolute; background-color: #fff; border-radius: 3px; color: #959595; padding: 1px 6px; top: -40px; right: 10px; font-weight: 700; cursor: pointer; font-size: 17px; width: 27px; height: 27px; }
.vehicle-survey .container { background-color: #fff; padding: 27px 12px; margin:0 20px; max-width: 768px; width: 100%; height:70%; border-radius: 4px; box-sizing: border-box; position: relative; z-index:3}

.vehicle-survey .vehicle-survey-content { margin:0 auto; position: relative; list-style: none; padding: 0; display: block; max-height:100%;}

.vehicle-survey .vehicle-survey-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
    box-sizing: content-box;
}

.vehicle-survey .window {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 768px;
    margin: 0 auto;
}

@media screen and (min-width:769px) {
    .vehicle-survey ul.horizonal-list-pc {display:flex; flex-direction: row; flex-wrap: wrap; padding:0}
    .vehicle-survey ul.horizonal-list-pc > li {list-style: none; padding: 13px 16px; font-size:16px}
    .vehicle-survey .overlay {align-items: center;}
}
@media screen and (max-width:768px){
    
    .vehicle-survey .horizonal-margin { margin: 0 3px; }

    .vehicle-survey ul.vertical-list-sp {padding:0}
    .vehicle-survey ul.vertical-list-sp > li {list-style: none; font-size: 16px; font-weight: 700; border-bottom: 1px solid #d7d7d7d7; padding: 15px 10px; position: relative;}
    .vehicle-survey ul.vertical-list-sp.next-arrow > li::after {content: ''; width: 8px; height: 8px; border: 0; border-top: solid 2px #686868; border-right: solid 2px #686868; position: absolute; top: 41%; right: 4%; transform: rotate(45deg); border-radius: 2px;}

    .vehicle-survey .container {height:auto; padding: 20px 3px 20px 3px; margin:0; max-width: initial; width: 100%; border-radius: 0px;}
    .vehicle-survey .close-button {top:0px}
    .vehicle-survey .vehicle-survey-content {padding-top:20px;max-height: 100%;}


    .vehicle-survey .window .progresses {margin-right:18px;}
    .vehicle-survey .window .progresses > .item p {z-index: 2;}
    .vehicle-survey .window .progresses > .item:nth-child(-n+3) p {padding-left:17px}
    .vehicle-survey .window .progresses > .item:nth-child(-n+3)::before { width: 16px; left: 0px;}
    .vehicle-survey .window .progresses > .item::after { width:16px; right:-16px; }
    .vehicle-survey .window .progresses > .item:has(p:not(:empty)) p:first-child {font-size:10px}
    .vehicle-survey .window .progresses > .item:has(p:not(:empty)) p:last-child {font-size:11px}
    .vehicle-survey .window .progresses > .item:has(p:empty) p {font-size:12px !important}


    .vehicle-survey .indexes > div {width:20%}

}