@charset "UTF-8";
/*!
* (c) Ancar Inc. 2017
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*
全体のベースになる部分
Block
*/
html {
  font-size: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","Noto Sans Japanese","游ゴシック体","Yu Gothic",YuGothic,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: 14px;
  text-align: justify;
  line-height: 1.3;
  outline: 0;
  vertical-align: baseline;
  word-wrap: break-word;
  text-size-adjust: 100%; }

*, *::before, *::after {
  box-sizing: border-box; }

a:link, a:visited {
  color: #003CE0;
  cursor: pointer; }

a:hover, a:active {
  color: #2e61ad; }

ul {
  margin: 0;
  padding: 0; }

li {
  list-style: none;
  line-height: 1.3; }

dl, dt, dd {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

img {
  max-width: 100%;
  height: auto; }

i, cite, em, var, address, dfn {
  font-style: normal; }

h1, h2, h3, h4, h5, h6 {
  font-size: 14px;
  margin: 10px 0; }

input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.clearfix:after {
  content: " ";
  display: block;
  clear: both; }

.global-container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  color: #000;
  background-color: #f6f6f6; }
  .global-container .main-container {
    width: 100%;
    margin: 57px auto 0;
    padding: 0; }
  .global-container .container {
    position: relative;
    width: 980px;
    margin: 0 auto; }
  .global-container .mincontainer {
    width: 480px;
    margin: 0 auto; }
  .global-container .section-container {
    display: block;
    width: 100%;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 10px 0; }
  .global-container .section-container--fixed {
    margin-bottom: 0; }
  .global-container .headline {
    margin: 0;
    padding: 30px 0 10px 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center; }
  .global-container .minheadline {
    margin: 0;
    padding: 24px 0 8px 0;
    font-size: 16px;
    font-weight: bold;
    color: #4a4a4a; }
  .global-container .headline-round {
    position: relative;
    margin: 0;
    padding: 16px 16px 14px 36px;
    font-size: 16px;
    font-weight: bold; }
    .global-container .headline-round::after {
      position: absolute;
      top: 24px;
      left: 10px;
      content: "";
      width: 20px;
      height: 20px;
      background-color: #003CE0;
      border-radius: 50%; }
  .global-container .headline-number {
    position: relative;
    margin: 0;
    padding: 16px 16px 14px 36px;
    font-size: 16px;
    font-weight: bold; }
    .global-container .headline-number::after {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 16px;
      color: #003CE0; }
  .global-container .minheadline-square {
    position: relative;
    margin: 0;
    padding: 8px 16px 10px 42px;
    font-size: 16px;
    font-weight: bold; }
    .global-container .minheadline-square::after {
      position: absolute;
      top: 16px;
      left: 16px;
      content: "";
      width: 14px;
      height: 14px;
      background-color: #003CE0;
      border-radius: 4px; }

.pc-header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 57px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 50; }
  .pc-header__navwrap {
    width: 980px;
    margin: 0 auto; }
    .pc-header__navwrap .pc-globalnav {
      float: left;
      width: 70%;
      margin: 0;
      background-color: #fff; }
      .pc-header__navwrap .pc-globalnav__navbox {
        display: flex;
        align-items: center;
        text-decoration: none; }
        .pc-header__navwrap .pc-globalnav__navbox__link {
          margin-left: 20px;
          font-size: 14px;
          color: #000;
          line-height: 1.3;
          text-decoration: none; }
          .pc-header__navwrap .pc-globalnav__navbox__link:hover, .pc-header__navwrap .pc-globalnav__navbox__link:focus {
            color: #000;
            border-bottom: 4px solid #003CE0; }
        .pc-header__navwrap .pc-globalnav__navbox__logo {
          width: 140px;
          margin-right: 20px; }
    .pc-header__navwrap .pc-accountnav {
      float: right;
      width: 30%;
      margin: 0;
      background-color: #fff; }
      .pc-header__navwrap .pc-accountnav__navbox {
        display: flex;
        height: 55px;
        flex-direction: row-reverse;
        align-items: center;
        margin-left: 20px;
        text-decoration: none;
        line-height: 1.3; }
        .pc-header__navwrap .pc-accountnav__navbox__link {
          display: flex;
          align-items: center;
          margin-left: 20px;
          color: #000;
          font-size: 14px;
          text-decoration: none; }
          .pc-header__navwrap .pc-accountnav__navbox__link:hover, .pc-header__navwrap .pc-accountnav__navbox__link:focus {
            color: #000;
            border-bottom: 4px solid #003CE0; }
        .pc-header__navwrap .pc-accountnav__navbox__iconlink {
          display: flex;
          align-items: center;
          margin-left: 30px;
          color: #000;
          font-size: 24px;
          text-decoration: none; }
          .pc-header__navwrap .pc-accountnav__navbox__iconlink:hover, .pc-header__navwrap .pc-accountnav__navbox__iconlink:focus {
            color: #003CE0; }
        .pc-header__navwrap .pc-accountnav__navbox__usericon {
          display: flex;
          align-items: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin-left: 30px; }
          .pc-header__navwrap .pc-accountnav__navbox__usericon:hover, .pc-header__navwrap .pc-accountnav__navbox__usericon:focus {
            box-shadow: 0 0 0 2px #003CE0; }

.global-container .navbar__nav-item .btn {
  display: inline;
  height: 30px;
  padding: 7px 9px;
  font-size: 14px; }

.global-container .navbar__nav-item .btn--primary {
  color: #ffffff;
  background-color: #003CE0;
  border: 1px solid transparent; }

.global-container .navbar__nav-item .btn--secondary {
  color: #666666;
  background-color: #f4f4f4;
  border: 1px solid #666666; }

/*
共通フッター
全画面で共通のフッター
*/
.global-footer {
  display: block;
  padding: 30px 0 10px;
  background-color: #fff;
  text-align: center;
  border-top: 1px solid #ddd; }
  .global-footer__brand-logo {
    display: inline-block;
    width: 160px;
    height: auto; }
  .global-footer__linkbox {
    display: flex;
    justify-content: center; }
    .global-footer__linkbox__link {
      display: inline-block;
      margin: 16px 8px; }
  .global-footer__copy {
    margin: 10px 0; }

/*
toppage
TOPページのコンポーネント
文字通りトップページ
*/
.toppage-header {
  position: absolute;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  z-index: 100; }
  .toppage-header__brand-link {
    text-decoration: none; }
  .toppage-header__brand-logo {
    display: inline-block;
    width: 160px;
    height: auto; }

.mainvisual {
  position: relative;
  width: 100vw;
  height: 800px;
  background-position: center; }
  .mainvisual .covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    max-height: 100%;
    overflow: hidden;
    z-index: 90; }
    .mainvisual .covervid-wrapper img, .mainvisual .covervid-wrapper video {
      min-width: 100%;
      min-height: 800px;
      width: auto;
      height: auto;
      overflow: hidden; }
  .mainvisual .catchcopy {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 200px;
    margin: auto;
    text-align: center;
    font-size: 32px;
    font-weight: 300;
    color: #fff;
    line-height: 1.3;
    z-index: 100; }
  .mainvisual .topmenu-container {
    position: absolute;
    bottom: 160px;
    width: 100%;
    z-index: 100; }
    .mainvisual .topmenu-container .mainmenu {
      width: 980px;
      margin: 0 auto;
      display: flex; }
      .mainvisual .topmenu-container .mainmenu__btn {
        display: inline-block;
        width: 200px;
        padding: 16px 0;
        text-align: center;
        color: #fff;
        text-decoration: none; }
        .mainvisual .topmenu-container .mainmenu__btn__action {
          font-size: 28px;
          margin: 0; }
        .mainvisual .topmenu-container .mainmenu__btn--left {
          border: 1px solid #fff;
          border-radius: 16px; }
        .mainvisual .topmenu-container .mainmenu__btn--right {
          margin-left: auto;
          border: 1px solid #fff;
          border-radius: 16px; }
        .mainvisual .topmenu-container .mainmenu__btn:hover {
          background-color: rgba(255, 255, 255, 0.3);
          text-decoration: none; }
    .mainvisual .topmenu-container .merit {
      width: 980px;
      margin: 0 auto;
      display: flex;
      color: #fff; }
      .mainvisual .topmenu-container .merit__sell {
        padding-top: 10px;
        font-size: 16px; }
      .mainvisual .topmenu-container .merit__buy {
        padding-top: 10px;
        font-size: 16px;
        margin-left: auto; }

/*
text
テキスト全般
ずべての画面共通
*/
.textbox {
  display: block;
  padding: 8px 10px 8px 10px;
  margin-bottom: 20px; }
  .textbox--text-right {
    text-align: right; }
  .textbox--text-center {
    text-align: center; }
  .textbox--text-lg {
    font-size: 16px; }
  .textbox--text-sm {
    font-size: 12px; }
  .textbox--text-red {
    color: #c60000; }
  .textbox--text-blue {
    color: #003CE0; }
  .textbox--text-bold {
    font-weight: bold; }
  .textbox--text-bolder {
    font-weight: bolder; }
  .textbox--text-highlight {
    font-size: 24px;
    margin: 8px; }
  .textbox--note {
    color: #666; }
  .textbox__tag {
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 600;
    margin: 10px 4px 0 4px; }
    .textbox__tag--blue {
      border: 2px solid #003CE0;
      color: #003CE0; }
    .textbox__tag--gray {
      border: 2px solid #999; }
    .textbox__tag--red {
      border: 2px solid #c60000;
      color: #c60000; }
  .textbox__link {
    color: #003CE0;
    text-decoration: underline; }
  .textbox--finishmessage {
    padding: 10px 10px;
    text-align: center;
    color: #666; }

/*
grid.scss
Ancarで使用するグリッドシステム
*/
.row {
  display: flex; }
  .row__col--1-1, .row__col--1-2, .row__col--1-3, .row__col--1-4, .row__col--1-6, .row__col--1-12 {
    position: relative; }
  .row__col--1-1 {
    width: 100%; }
  .row__col--1-2 {
    width: 50%; }
  .row__col--1-3 {
    width: 33.3333%; }
  .row__col--2-3 {
    width: 66.6666%; }
  .row__col--1-4 {
    width: 25%; }
  .row__col--3-4 {
    width: 75%; }
  .row__col--1-5 {
    width: 20%; }
  .row__col--2-5 {
    width: 40%; }
  .row__col--3-5 {
    width: 60%; }
  .row__col--4-5 {
    width: 80%; }
  .row__col--1-6 {
    width: 16.6666%; }
  .row__col--5-6 {
    width: 83.3333%; }
  .row__col--1-12 {
    width: 8.3333%; }
  .row__col--11-12 {
    width: 91.6663%; }

/*
HELP
ヘルプページ
*/
.helpcontainer {
  width: 100%;
  background-color: #fff; }
  .helpcontainer .questionbox {
    display: flex;
    width: 100%;
    padding: 0 16px;
    background-color: #f6f6f6;
    align-items: center;
    margin-bottom: 10px;
    text-decoration: none; }
    .helpcontainer .questionbox__head {
      font-size: 24px;
      font-weight: 700;
      color: #003CE0; }
    .helpcontainer .questionbox__text {
      font-size: 14px;
      font-weight: 400;
      padding-left: 10px;
      color: #000; }
  .helpcontainer .answerbox {
    display: flex;
    width: 100%;
    padding: 0 16px;
    align-items: center;
    margin-bottom: 10px; }
    .helpcontainer .answerbox__head {
      font-size: 24px;
      font-weight: 500;
      color: #003CE0; }
    .helpcontainer .answerbox__text {
      font-size: 14px;
      padding: 0 0 0 10px;
      margin: 0;
      color: #000; }

/*
searchwindow
検索ウィンドウ
*/
.searchwindow {
  position: relative;
  width: 320px;
  background-color: #fff;
  padding: 20px 10px; }
  .searchwindow__close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #000;
    font-size: 24px;
    text-decoration: none; }
  .searchwindow .searchform .range {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; }
    .searchwindow .searchform .range--start, .searchwindow .searchform .range--end {
      width: 45%;
      padding: 8px 16px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 18px; }
      .searchwindow .searchform .range--start:before, .searchwindow .searchform .range--end:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        display: block;
        width: 0;
        height: 0;
        margin: -2px 0 0 0;
        border: 5px solid transparent;
        border-top: 7px solid #003CE0; }
    .searchwindow .searchform .range--end:before {
      content: "";
      position: absolute;
      top: 50%;
      right: 10px;
      display: block;
      width: 0;
      height: 0;
      margin: -2px 0 0 0;
      border: 5px solid transparent;
      border-top: 7px solid #003CE0; }
  .searchwindow .searchform .choose-color {
    display: flex; }
    .searchwindow .searchform .choose-color__item {
      position: relative;
      text-align: center; }
      .searchwindow .searchform .choose-color__item .color-icon {
        font-size: 4.0rem;
        margin-left: 10px; }
        .searchwindow .searchform .choose-color__item .color-icon--black {
          background-color: #000; }
        .searchwindow .searchform .choose-color__item .color-icon--gray {
          background-color: #999; }
        .searchwindow .searchform .choose-color__item .color-icon--white {
          background-color: #fff;
          border: 1px solid #ddd; }
        .searchwindow .searchform .choose-color__item .color-icon--silver {
          background-color: #ccc; }
        .searchwindow .searchform .choose-color__item .color-icon--gold {
          background-color: #e5c050; }
        .searchwindow .searchform .choose-color__item .color-icon--red {
          background-color: #c40000; }
        .searchwindow .searchform .choose-color__item .color-icon--orange {
          background-color: #e8641b; }
        .searchwindow .searchform .choose-color__item .color-icon--yellow {
          background-color: #f1d200; }
        .searchwindow .searchform .choose-color__item .color-icon--green {
          background-color: #007520; }
        .searchwindow .searchform .choose-color__item .color-icon--blue {
          background-color: #0669b2; }
        .searchwindow .searchform .choose-color__item .color-icon--purple {
          background-color: #67087b; }
        .searchwindow .searchform .choose-color__item .color-icon--pink {
          background-color: #ec2892; }
        .searchwindow .searchform .choose-color__item .color-icon--brown {
          background-color: #724c21; }
        .searchwindow .searchform .choose-color__item .color-icon--all {
          background-color: #003CE0; }
      .searchwindow .searchform .choose-color__item__text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 0.5rem; }
  .searchwindow .searchform .search-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px; }
    .searchwindow .searchform .search-action__reset, .searchwindow .searchform .search-action__close {
      padding: 8px 10px;
      text-align: center;
      color: #003CE0;
      background-color: #fff;
      border-radius: 20px;
      text-decoration: none; }
    .searchwindow .searchform .search-action__search {
      padding: 8px 20px;
      text-align: center;
      color: #fff;
      background-color: #003CE0;
      border-radius: 20px;
      text-decoration: none; }

/*
グローバルメニュー
グローバルナビから遷移できるメニュー一覧
全ての画面
*/
.globalnav {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background-color: #f6f6f6; }
  .globalnav__btn-close {
    display: inline-block;
    padding: 8px 40px;
    color: #fff;
    background-color: #003CE0;
    border-radius: 20px; }
  .globalnav__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    .globalnav__row .nav-item {
      position: relative;
      width: 90px;
      height: 90px;
      margin: 20px 0;
      padding-top: 20px;
      color: #333;
      background-color: #fff;
      border-radius: 50%;
      text-decoration: none; }
      .globalnav__row .nav-item__icon {
        font-size: 30px; }
      .globalnav__row .nav-item__text {
        font-size: 10px; }

/*
tabmenu
タブメニュー
新規登録・ログイン画面・マイページ
*/
.tabcontainer {
  display: flex;
  overflow: hidden; }
  .tabcontainer__switch {
    width: 50%;
    cursor: pointer;
    background-color: #ddd;
    border-top: 1px solid #ddd;
    padding: 10px 0;
    text-align: center; }
    .tabcontainer__switch.select {
      background-color: #fff; }
  .tabcontainer__content {
    background-color: #f6f6f6;
    display: block;
    width: 100%;
    padding-bottom: 20px; }
    .tabcontainer__content.hide {
      display: none; }

/*
カラー選択
車両検索menu内
*/
.color-wrap {
  display: flex;
  flex-wrap: wrap;
  text-align: center; }
  .color-wrap .color-select {
    align-items: center;
    width: 16.6667%;
    padding: 10px 0; }
    .color-wrap .color-select .button {
      align-content: center;
      display: inline-block;
      width: 24px;
      height: 24px;
      cursor: pointer;
      border-radius: 50%; }
      .color-wrap .color-select .button input[type="radio"] {
        display: none; }
      .color-wrap .color-select .button--black {
        background-color: #000; }
      .color-wrap .color-select .button--gray {
        background-color: #999; }
      .color-wrap .color-select .button--white {
        background-color: #fff;
        border: 1px solid #ddd; }
      .color-wrap .color-select .button--silver {
        background-color: #ccc; }
      .color-wrap .color-select .button--gold {
        background-color: #e5c050; }
      .color-wrap .color-select .button--red {
        background-color: #c40000; }
      .color-wrap .color-select .button--orange {
        background-color: #e8641b; }
      .color-wrap .color-select .button--yellow {
        background-color: #f1d200; }
      .color-wrap .color-select .button--green {
        background-color: #007520; }
      .color-wrap .color-select .button--blue {
        background-color: #0669b2; }
      .color-wrap .color-select .button--purple {
        background-color: #67087b; }
      .color-wrap .color-select .button--pink {
        background-color: #ec2892; }
      .color-wrap .color-select .button--brown {
        background-color: #724c21; }
      .color-wrap .color-select .button--all {
        background-color: #003CE0; }
      .color-wrap .color-select .button--selected {
        box-shadow: 0 0 0 2px #003CE0; }
    .color-wrap .color-select__name {
      margin: 0;
      font-size: 0.6rem; }

/*
Terms
利用規約のあれこれ
*/
.terms {
  padding: 40px;
  background-color: #fff;
  margin-bottom: 40px; }
  .terms__headline {
    margin: 0;
    padding: 20px 0 10px 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px; }
  .terms p {
    margin: 0 0 20px 10px; }
  .terms ol {
    list-style-type: decimal;
    margin: 0 0 0 10px;
    padding: 0; }
    .terms ol > li {
      display: block;
      margin-bottom: 16px; }
  .terms dl {
    width: calc(100% -10px);
    margin: 16px 0 0 10px; }
    .terms dl > dt {
      width: 34px;
      display: inline-block;
      vertical-align: top;
      padding: 4px 0 8px 0; }
    .terms dl > dd {
      width: calc(100% - 40px);
      display: inline-block;
      padding: 4px 0 8px 0; }

/*
mypage
マイページ
*/
.userinfo {
  display: flex;
  align-items: center;
  padding: 10px 2.5%;
  background-color: #fff; }
  .userinfo__img {
    width: 50px;
    height: 50px;
    border-radius: 50%; }
  .userinfo__account {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding-left: 16px; }
    .userinfo__account__id {
      font-weight: 600;
      margin: 5px 0; }
    .userinfo__account__name {
      font-weight: 300;
      margin: 5px 0; }

.mycarlist {
  background-color: #fff;
  border: 1px solid #ddd;
  margin-bottom: 20px; }
  .mycarlist__item {
    border-top: 1px solid #ddd; }

.btn-refine, a.btn-refine {
  display: inline-block;
  width: 80%;
  height: 43px;
  margin-left: 20%;
  padding: 12px 0;
  color: #fff;
  background-color: #003CE0;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 28px; }
  .btn-refine:hover, a.btn-refine:hover {
    background-color: #1462FF; }

.mycarinfo {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #ddd; }
  .mycarinfo__category {
    font-size: 14px;
    margin: 0;
    line-height: 1.3; }
  .mycarinfo__edit {
    margin-left: auto;
    align-items: center; }
    .mycarinfo__edit .btn-edit, .mycarinfo__edit a.btn-edit {
      display: inline-block;
      width: 150px;
      padding: 12px 0;
      margin-left: auto;
      background-color: #003CE0;
      color: #fff;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      border-radius: 24px; }
      .mycarinfo__edit .btn-edit:hover, .mycarinfo__edit .btn-edit:active, .mycarinfo__edit a.btn-edit:hover, .mycarinfo__edit a.btn-edit:active {
        background-color: #1462FF; }
  .mycarinfo--footer {
    @extend　 .mycarinfo;
    display: block; }

/*
#carlist
車一覧のコンポーネント
使用する箇所：車一覧全般
*/
.search-section {
  display: flex;
  padding: 20px 40px 0; }
  .search-section .btn-search {
    display: inline-block;
    width: 120px;
    height: 40px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    color: #003CE0;
    border: 2px solid #003CE0;
    border-radius: 20px; }
    .search-section .btn-search:hover {
      color: #fff;
      background-color: #003CE0; }

.carlist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 2%;
  justify-content: space-between;
  background-color: #fff; }
  .carlist__item {
    width: 32%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 12px -1px #aaa;
    margin-top: 20px; }
    .carlist__item:hover {
      opacity: 0.7; }
    .carlist__item__header {
      max-width: 100%;
      height: 66px;
      padding: 0 7%;
      text-align: center;
      overflow: hidden;
      text-decoration: none; }
      .carlist__item__header .carname {
        margin: 20px 0 5px;
        font-size: 18px;
        text-align: left;
        line-height: 1.4; }
      .carlist__item__header .cargrade {
        margin: 0 0 5px 0;
        color: #666;
        font-size: 14px;
        line-height: 1.1;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
    .carlist__item__link {
      display: block;
      position: relative;
      width: 100%;
      text-decoration: none;
      color: #000 !important; }
      .carlist__item__link .thumnail {
        position: relative;
        padding-top: 75%;
        overflow: hidden;
        background-image: url(../../../img/ancar/pc/default_car_image.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #f4f4f4; }
      .carlist__item__link--whitecover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.6);
        z-index: 10; }
      .carlist__item__link .soldoutbadge {
        position: absolute;
        top: calc(50% - 110px);
        left: calc(50% - 110px);
        z-index: 10; }
      .carlist__item__link .raceCar {
        position: absolute;
        width: 35%;
        top: 0%;
        left: 0%;
        z-index: 10; }
    .carlist__item__caption {
      padding: 5px 7% 13px; }
      .carlist__item__caption .carinfo {
        display: flex;
        justify-content: left;
        align-items: baseline; }
        .carlist__item__caption .carinfo span + span {
          margin-left: 8px; }
      .carlist__item__caption__footer {
        display: flex;
        align-items: baseline;
        margin-top: 5px; }
        .carlist__item__caption__footer .updatedat {
          color: #666; }
        .carlist__item__caption__footer .price {
          margin-left: auto;
          text-align: right;
          color: #000;
          text-decoration: none; }
          .carlist__item__caption__footer .price .link {
            font-size: 24px;
            margin-right: 5px;
            cursor: pointer;
            text-decoration: none; }
          .carlist__item__caption__footer .price em {
            font-size: 26px;
            color: #000;
            font-weight: bold;
            text-decoration: none;
            margin-right: 8px; }
      .carlist__item__caption__assessment {
        display: flex;
        align-items: baseline;
        margin-top: 5px;
        text-overflow: ellipsis;
        white-space: nowrap; }
        .carlist__item__caption__assessment .price {
          align-items: baseline;
          margin-left: auto;
          color: #000;
          text-align: right;
          text-decoration: none; }
          .carlist__item__caption__assessment .price .link {
            font-size: 26px;
            margin-right: 5px;
            cursor: pointer;
            text-decoration: none; }
          .carlist__item__caption__assessment .price em {
            font-size: 18px;
            font-weight: bold;
            color: #054be1;
            text-decoration: none;
            margin-right: 8px; }
    .carlist__item__assessment-caption {
      padding: 5px 2.5% 10px; }
      .carlist__item__assessment-caption .repair {
        display: flex;
        align-items: baseline;
        font-size: 16px; }
        .carlist__item__assessment-caption .repair .cost {
          display: flex;
          align-items: baseline;
          margin-left: auto; }
          .carlist__item__assessment-caption .repair .cost em {
            font-size: 24px;
            margin-right: 8px; }

/*
#carlist
車一覧のコンポーネント
使用する箇所：車一覧全般
*/
.cardetail {
  background-color: #fff;
  border-bottom: 1px #ddd; }
  .cardetail__header {
    position: relative;
    max-width: 100%;
    overflow: hidden; }
    .cardetail__header .btn-opengallery {
      position: absolute;
      left: 0;
      bottom: 0;
      text-decoration: none;
      cursor: pointer;
      font-size: 40px;
      background-color: #000;
      padding: 0 5px;
      z-index: 40; }
  .cardetail__aside {
    margin-left: auto; }
  .cardetail__caption {
    position: relative;
    padding: 16px 2.5%; }
    .cardetail__caption__caption-name {
      color: #666;
      font-weight: normal;
      font-size: 12px; }
    .cardetail__caption__carname {
      margin: 5px 0;
      font-size: 20px;
      line-height: 1.3; }
    .cardetail__caption__subtitle, .cardetail__caption__spectitle {
      font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0; }
    .cardetail__caption__gradename {
      font-size: 14px;
      margin-bottom: 20px; }
    .cardetail__caption__carinfo {
      margin-bottom: 20px; }
      .cardetail__caption__carinfo p {
        display: inline-block;
        font-size: 16px;
        line-height: 1.5;
        margin-top: 0;
        margin-bottom: 0; }
        .cardetail__caption__carinfo p + p {
          margin-left: 25px;
          padding-left: 25px;
          border-left: 1px solid #ccc; }
      .cardetail__caption__carinfo .cargrade {
        margin: 4px 0; }
      .cardetail__caption__carinfo .modelyear {
        display: inline;
        margin: 2px 10px 0 0; }
      .cardetail__caption__carinfo .mileage {
        display: inline; }
    .cardetail__caption .card-container .card {
      width: auto;
      padding: 0 16px;
      margin-right: 8px;
      margin-top: 8px;
      line-height: 1.8; }

/*
#cardetail
車両詳細画面のコンポーネント
使用する箇所：車両詳細画面
*/
.detail-headline {
  border-left: 4px solid #003CE0;
  margin-top: 20px;
  padding: 16px 0 16px 10px;
  font-size: 16px;
  line-height: 1.3; }

.circle-btn--fav {
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 50; }

/*
ページ内参考動画
*/
.reference-video {
  position: relative;
  width: 100%;
  height: 0px;
  padding-bottom: 56.25%;
  margin: 20px 0; }
  .reference-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*
点検依頼
*/
.inspection-request .textbox {
  background: url(/assets/img/ancar/pc/top/pro_repairer.png) no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 250px;
  display: table;
  padding: 10%; }
  .inspection-request .textbox > .wrapper {
    display: table-cell;
    vertical-align: middle; }
  .inspection-request .textbox h4, .inspection-request .textbox p {
    color: #fff;
    color: #fff;
    text-shadow: 0px 0px 8px #000; }
  .inspection-request .textbox h4 {
    font-size: 20px; }
  .inspection-request .textbox .btn {
    background: #fff;
    color: #003CE0;
    border: 1px solid #003CE0; }

/*
アクションエリア
*/
.cardetail__aside .aside {
  position: absolute;
  right: 0;
  border-top: 4px solid #003CE0; }
  .cardetail__aside .aside .aside__insurance {
    padding-bottom: 20px; }
  .cardetail__aside .aside .btn {
    margin-bottom: 0; }

/*
comparison
価格比較
車両詳細画面で使用
*/
.comparison {
  display: flex;
  text-align: center; }
  .comparison__price {
    width: 33.333%;
    padding: 8px 0;
    margin-bottom: 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd; }
    .comparison__price em {
      font-size: 24px;
      font-weight: 300;
      text-decoration: none;
      margin-right: 8px; }
    .comparison__price--marketprice {
      color: #999; }
    .comparison__price--ancarprice {
      color: #003CE0; }
    .comparison__price--discount {
      color: #ef5e5e; }

/*
inspection-result
点検結果の表
車両詳細ページで使用
*/
.inspectionresult {
  padding: 10px 2.5%; }
  .inspectionresult .staff {
    display: flex;
    padding: 10px 2.5%;
    background-color: #fff; }
    .inspectionresult .staff__icon {
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 50%; }
    .inspectionresult .staff__info {
      flex-direction: column;
      padding-left: 30px; }
      .inspectionresult .staff__info__profile {
        font-size: 16px;
        font-weight: 600;
        margin: 5px 0; }
      .inspectionresult .staff__info__comment {
        font-size: 14px;
        font-weight: 300;
        margin: 5px 0; }
  .inspectionresult .criterion {
    margin: 15px 0; }
    .inspectionresult .criterion ul {
      padding: 3%;
      background: #f6f6f6; }
      .inspectionresult .criterion ul li {
        display: inline-block; }
        .inspectionresult .criterion ul li span {
          color: #003CE0; }
  .inspectionresult__info {
    list-style: none; }
    .inspectionresult__info .resultcategory {
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      padding: 16px 10px;
      color: #000;
      text-decoration: none; }
      .inspectionresult__info .resultcategory__arrow {
        display: inline-block;
        font-size: 20px;
        margin-right: 20px;
        color: #003CE0; }
      .inspectionresult__info .resultcategory__icon {
        display: inline-block;
        margin-right: 10px;
        font-size: 32px;
        color: #999; }
      .inspectionresult__info .resultcategory__name {
        display: inline-block;
        font-size: 16px;
        margin: 0; }
      .inspectionresult__info .resultcategory__scorebox {
        margin-left: auto;
        letter-spacing: 2px;
        text-decoration: none; }
        .inspectionresult__info .resultcategory__scorebox .score {
          font-size: 24px;
          font-weight: bold;
          color: #003CE0; }
    .inspectionresult__info .results {
      width: 96%;
      margin: 0 2% 20px; }
      .inspectionresult__info .results__itemname {
        padding: 10px 12px;
        margin: 0 auto;
        font-size: 14px;
        background-color: #f6f6f6;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd; }
        .inspectionresult__info .results__itemname--heading {
          border-top: 1px solid #ddd; }
      .inspectionresult__info .results__subject {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd; }
        .inspectionresult__info .results__subject__info {
          display: inline;
          margin: 0;
          font-size: 14px;
          font-weight: normal;
          line-height: 1.3; }
        .inspectionresult__info .results__subject__scorebox {
          margin-left: auto;
          letter-spacing: 2px;
          text-decoration: none; }
          .inspectionresult__info .results__subject__scorebox .score {
            font-size: 20px;
            font-weight: bold;
            color: #666; }

/*
owner-comment
オーナーコメント
車両詳細ページで使用
*/
.owner-comment {
  padding: 10px 2.5%; }
  .owner-comment__info {
    display: flex;
    align-items: center; }
    .owner-comment__info__img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px; }
    .owner-comment__info__name {
      font-size: 14px;
      font-weight: 600; }

/*
listing-comment
オーナーへ質問
車両詳細ページで使用
*/
.listing-comment {
  padding: 10px 2.5%; }
  .listing-comment .badge--info {
    display: inline-block;
    margin: 0;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
    line-height: 1;
    border: 1px solid #003CE0;
    color: #003CE0;
    vertical-align: top; }
  .listing-comment__box + .listing-comment__box {
    margin-top: 20px; }
  .listing-comment__info {
    display: flex;
    align-items: center; }
    .listing-comment__info__img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px; }
    .listing-comment__info__name {
      font-size: 14px;
      font-weight: bold;
      margin: 0; }
    .listing-comment__info__date {
      color: #666666;
      font-size: 12px;
      margin: 0; }
  .listing-comment__btn-show {
    margin-top: 20px !important; }
  .listing-comment__content {
    background-color: #f4f4f4;
    padding: 12px;
    border-radius: 4px;
    margin-top: 10px; }
  .listing-comment__form {
    padding: 0;
    margin-top: 20px; }
    .listing-comment__form .form-area {
      padding: 0 !important; }
    .listing-comment__form__textarea {
      border-radius: 4px;
      padding: 12px;
      font-size: 12px; }
      .listing-comment__form__textarea::placeholder {
        color: #ccc; }
    .listing-comment__form__attention {
      margin-top: 40px;
      width: 100%;
      background-color: #f4f4f4;
      height: 100px;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .listing-comment__form__attention p {
        padding: 12px;
        text-align: center; }
    .listing-comment__form__btn {
      padding: 20px 0; }

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 240; }
  .dialog__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 241;
    background-color: rgba(49, 49, 49, 0.4); }
  .dialog__container {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 32px 24px;
    width: 296px;
    max-height: 90vh;
    z-index: 242;
    overflow-y: scroll;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    width: 560px;
    text-align: center; }
  .dialog__title {
    margin-bottom: 32px;
    text-align: center;
    font-size: 18px;
    font-weight: 600; }
  .dialog .btn-group {
    display: flex;
    flex-flow: row nowrap; }
    .dialog .btn-group .btn--secondary {
      color: #666666;
      background-color: #f4f4f4;
      border: 1px solid #666666;
      text-align: center; }
    .dialog .btn-group .btn + .btn {
      margin-left: 8px; }

.mg-top-20 {
  margin-top: 20px !important; }

/*
spec
装備・スペック早見表
車両詳細ページで使用
*/
.speclist {
  padding: 10px;
  display: flex;
  flex-wrap: wrap; }
  .speclist .status, .speclist .status--on, .speclist .status--off {
    display: flex;
    width: 50%;
    padding: 5px 0;
    align-items: center; }
    .speclist .status--on > i {
      color: #003CE0; }
    .speclist .status--off {
      color: #999; }
    .speclist .status__icon {
      display: inline-block;
      margin-right: 16px;
      font-size: 30px; }
    .speclist .status__name {
      display: inline-block; }

.toggle {
  display: none; }

.toggle-label {
  padding: 1em;
  display: block;
  color: #fff;
  background: #003CE0; }

.toggle-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  position: absolute;
  top: calc( 50% - 3px);
  right: 20px;
  transform: rotate(135deg); }

.toggle-label,
.accordion-content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s; }

.accordion-content {
  height: 0;
  margin-bottom: 10px;
  padding: 0 20px;
  overflow: hidden; }

.toggle:checked + .toggle-label + .accordion-content {
  height: auto;
  padding: 20px;
  transition: all .3s; }

.toggle:checked + .toggle-label::before {
  transform: rotate(-45deg) !important; }

/*
slider
車画像スライダー
車両詳細画面など
*/
.slider {
  overflow: hidden;
  position: relative; }
  .slider__container {
    height: calc((980px - 45px) * 0.5625);
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 5; }
  .slider__slide {
    float: left;
    width: calc(980px - 45px);
    height: auto;
    padding-left: 7.5px;
    padding-right: 7.5px;
    list-style: none;
    box-sizing: border-box; }
    .slider__slide__thumbnail {
      position: relative;
      width: 100%;
      max-height: 100%;
      border: 0;
      box-sizing: border-box;
      overflow: hidden;
      background-image: url(../../../img/ancar/pc/default_car_image.jpg);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat; }
      .slider__slide__thumbnail:before {
        content: "";
        display: block;
        padding-top: 56.25%; }
    .slider__slide__header {
      height: 56px;
      text-align: center;
      padding: 0 8px;
      line-height: 1.3; }
      .slider__slide__header .carname {
        margin: 10px 0 0 0;
        font-weight: 600; }
      .slider__slide__header .cargrade {
        margin: 8px 0 10px 0;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
    .slider__slide__caption {
      display: flex;
      align-items: center;
      height: 46px;
      padding: 0 8px; }
      .slider__slide__caption .modelyear, .slider__slide__caption .mileage {
        margin-right: 10px; }
      .slider__slide__caption .price {
        display: flex;
        align-items: baseline;
        margin-left: auto;
        color: #000;
        text-align: right;
        text-decoration: none; }
        .slider__slide__caption .price .link {
          font-size: 24px;
          margin-right: 5px;
          cursor: pointer;
          text-decoration: none; }
        .slider__slide__caption .price em {
          font-size: 24px;
          font-weight: 300;
          text-decoration: none;
          margin-right: 4px; }
  .slider__nav {
    position: absolute;
    display: block;
    z-index: 20;
    top: calc(50% - 54px);
    font-size: 108px;
    text-shadow: 0px 0px 8px #000;
    text-decoration: none; }
    .slider__nav--prev {
      left: 0; }
      .slider__nav--prev .icon-arrow_right:before {
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 0, 0, 0.2); }
    .slider__nav--next {
      right: 0; }
      .slider__nav--next .icon-arrow_left:before {
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 0, 0, 0.2); }
  .slider__dots {
    width: calc(100% - 20px);
    min-height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center; }
  .slider__dot {
    width: 10px;
    height: 10px;
    margin: 5px;
    padding: 0;
    background-color: #ccc;
    border: 0;
    border-radius: 50%; }
    .slider__dot:hover {
      cursor: pointer;
      background-color: #666; }
    .slider__dot--active {
      background-color: #666; }
  .slider--bordered .slider__slide__thumbnail {
    border: 1px solid #eee; }
  .slider--fullwidth .slider__container {
    height: calc(980px * 0.5625); }
    .slider--fullwidth .slider__container--wrap {
      /*車両名、走行距離、価格などの車両情報もまとめてスライドさせる時に使用*/
      height: calc(980px * 0.5625 + 56px + 46px); }
  .slider--fullwidth .slider__slide {
    width: 980px;
    padding-left: 0;
    padding-right: 0; }
  .slider--fullwidth .slider__nav--left {
    left: 10px; }
  .slider--fullwidth .slider__nav--right {
    right: 10px; }
  .slider--minwidth .slider__container {
    height: calc((480px - 45px) * 0.5625); }
    .slider--minwidth .slider__container--wrap {
      /*車両名、走行距離、価格などの車両情報もまとめてスライドさせる時に使用*/
      height: calc((480px - 45px) * 0.5625 + 56px + 46px); }
  .slider--minwidth .slider__slide {
    width: calc(480px - 45px); }
  .slider--minwidth .slider__nav {
    top: calc(50% - 36px);
    font-size: 72px; }

/*
aside
車両詳細サイドバー（サポート担当、支払総額確認）
車両詳細ページで使用
*/
.aside {
  border: 1px solid #ddd;
  width: 300px; }
  .aside__baseprice {
    border-bottom: 1px solid #ddd; }
    .aside__baseprice__header {
      padding: 8px 0 4px;
      text-align: center;
      margin: 0; }
    .aside__baseprice__price {
      text-align: center;
      font-size: 14px;
      color: #000;
      text-decoration: none;
      margin: 0;
      padding: 4px 0 8px; }
      .aside__baseprice__price em {
        font-size: 36px;
        text-decoration: none;
        margin-right: 8px; }
  .aside__differenceprice__btn {
    padding: 20px 0; }
  .aside__differenceprice__header {
    padding: 20px 15px 0;
    text-align: center;
    margin: 0; }
    .aside__differenceprice__header .catch {
      font-size: 12px;
      color: #003CE0;
      border: #003CE0 1px solid;
      padding: 5px 10px;
      display: inline-block; }
    .aside__differenceprice__header p {
      margin: 10px 0 0; }
  .aside__differenceprice__price {
    text-align: center;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    margin: 0;
    padding: 5px 10px 10px; }
    .aside__differenceprice__price em {
      font-size: 22px;
      text-decoration: none;
      color: #003CE0; }
  .aside__differenceprice__detail {
    margin: 5px 15px 0;
    padding: 17px 15px;
    text-align: center;
    background: #f6f6f6;
    font-size: 14px; }
    .aside__differenceprice__detail__recommendprice__header {
      margin: 0; }
    .aside__differenceprice__detail__recommendprice__price {
      margin: 5px 0 0; }
    .aside__differenceprice__detail__recommendprice__note {
      color: #999;
      margin: 5px 0 0; }
  .aside__tranceportcost {
    border-bottom: 1px solid #ddd; }
    .aside__tranceportcost__header, .aside__insurance__header {
      padding: 8px 0 4px;
      text-align: center;
      font-weight: bold;
      margin: 0; }
    .aside__tranceportcost__cost {
      text-align: center;
      font-size: 20px;
      margin: 0;
      padding: 4px 0 8px; }
  .aside__insurance__img {
    width: 100%;
    padding: 0 10% 4px 10%; }
  .aside__supporter {
    display: flex;
    padding: 16px 8px; }
    .aside__supporter__img {
      width: 50px;
      height: 50px;
      border-radius: 50%; }
    .aside__supporter__info {
      margin-left: 20px; }
      .aside__supporter__info__name {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3; }
      .aside__supporter__info__comment {
        line-height: 1.3; }

/*
車両詳細画像ギャラリー
*/
.photogallery-fullschreen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 50;
  display: none; }
  .photogallery-fullschreen__content {
    position: relative;
    width: 100%;
    height: 100%; }
    .photogallery-fullschreen__content .btn-close {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      color: #fff;
      font-size: 40px;
      font-weight: 600; }
    .photogallery-fullschreen__content .left-allow {
      position: absolute;
      top: calc(50% - 40px);
      left: 20px;
      cursor: pointer;
      color: #fff;
      font-size: 80px;
      z-index: 55;
      text-shadow: 0px 0px 8px #000;
      -moz-text-shadow: 0px 0px 8px #000;
      -webkit-text-shadow: 0px 0px 8px #000; }
    .photogallery-fullschreen__content .right-allow {
      position: absolute;
      top: calc(50% - 40px);
      right: 20px;
      cursor: pointer;
      color: #fff;
      font-size: 80px;
      z-index: 55;
      text-shadow: 0px 0px 8px #000;
      -moz-text-shadow: 0px 0px 8px #000;
      -webkit-text-shadow: 0px 0px 8px #000; }
    .photogallery-fullschreen__content .gallery-item {
      position: fixed;
      top: calc(45% - 275px);
      left: calc(50% - 490px);
      display: block;
      max-width: 980px;
      margin: 0 auto; }
    .photogallery-fullschreen__content .thumb-nav {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 32px 0 20px;
      text-align: center;
      background-color: #000; }
      .photogallery-fullschreen__content .thumb-nav__gallery {
        margin: 0 20px;
        white-space: nowrap;
        overflow: hidden; }
        .photogallery-fullschreen__content .thumb-nav__gallery__item {
          display: inline-block;
          width: 120px;
          margin-right: 20px;
          opacity: .5; }
          .photogallery-fullschreen__content .thumb-nav__gallery__item.active {
            opacity: 1; }

/*
tapped-question
車一覧、車両詳細内の
「？」を押した際にでるモーダル
*/
.modalbg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7); }

.questionmodal {
  position: absolute;
  top: calc(50% - 250px);
  left: calc(50% - 240px);
  width: 480px;
  height: auto;
  padding: 40px;
  border: 1px solid #ddd;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9); }

/*
performance
今までの販売実績のコンポーネント
カンタン査定
*/
.sell-performance {
  display: flex;
  width: 100%;
  margin: 10px 10px 20px 10px;
  /* トリミングします */ }
  .sell-performance__img {
    display: inline-block;
    width: 40%;
    height: 220px;
    border: 1px solid #ddd;
    background-image: url(../../../img/ancar/samplecar.jpg);
    background-size: cover; }
  .sell-performance__caption {
    width: 50%;
    padding-left: 10%; }
    .sell-performance__caption__name {
      font-size: 24px;
      font-weight: 600;
      margin: 0; }
    .sell-performance__caption__modelyear, .sell-performance__caption__mileage {
      font-size: 16px;
      margin-right: 8px; }
    .sell-performance__caption__grade {
      font-size: 16px;
      color: #666;
      margin: 10px 0; }
    .sell-performance__caption__performance {
      padding-top: 10px;
      text-align: center;
      font-weight: 600;
      font-size: 16px;
      color: #c60000;
      line-height: 1.3;
      letter-spacing: 2px; }
      .sell-performance__caption__performance em {
        font-size: 24px;
        font-style: italic; }

/*
assessment-result
査定結果表示
査定結果画面
*/
.assessment-header {
  width: 100%;
  height: 400px;
  background-image: url(../../../img/ancar/pc/assessment/assessment_header.jpg) no-repeat;
  overflow: hidden; }

.recommended-price {
  font-weight: bold;
  margin-left: 4px; }
  .recommended-price em {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    margin: 0 8px; }
  .recommended-price--used {
    color: #999; }
  .recommended-price--good {
    color: #05aee4; }
  .recommended-price--excellent {
    color: #003CE0; }

.result-box {
  width: 95%;
  margin: 10px 2.5%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd; }
  .result-box--used {
    border-top: 4px solid #999; }
  .result-box--good {
    border-top: 4px solid #05aee4; }
  .result-box--excellent {
    border-top: 4px solid #003CE0; }
  .result-box__result {
    font-size: 20px;
    margin: 10px 0; }
    .result-box__result--used {
      color: #999; }
    .result-box__result--good {
      color: #05aee4; }
    .result-box__result--excellent {
      color: #003CE0; }

.bargainprice {
  font-size: 20px;
  font-weight: bold;
  color: #c60000; }
  .bargainprice em {
    font-size: 28px;
    margin: 0 12px; }

.want-users {
  display: flex; }
  .want-users__icon {
    padding: 0 5px; }
    .want-users__icon__img {
      border-radius: 50%; }

/*
tabmenu
タブメニュー
新規登録・ログイン画面・マイページ
*/
.couponcard {
  display: flex;
  width: 300px;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 3px #999;
  border-radius: 10px; }
  .couponcard__leftside {
    width: 50%;
    padding: 10px;
    color: #fff;
    background-color: #003CE0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px; }
  .couponcard__rightside {
    width: 50%;
    padding: 10px;
    background-color: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px; }

/*
#cardetail
車両詳細画面のコンポーネント
使用する箇所：車両詳細画面
*/
.page-headline {
  width: 100%;
  padding: 20px 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd; }

.todo-headline {
  display: flex;
  align-items: center;
  margin-top: 30px;
  background-color: #fff;
  line-height: 1.3; }
  .todo-headline .icon {
    display: inline-block;
    width: 30px;
    text-align: center;
    font-size: 30px;
    z-index: 10; }
    .todo-headline .icon--blue {
      color: #00b7ee;
      background-color: #fff;
      border-radius: 50%; }
    .todo-headline .icon--green {
      color: #009944;
      background-color: #fff;
      border-radius: 50%; }
    .todo-headline .icon--yellow {
      color: #ffb800;
      background-color: #fff;
      border-radius: 50%; }
    .todo-headline .icon--red {
      color: #c60000;
      background-color: #fff;
      border-radius: 50%; }
    .todo-headline .icon--gray {
      color: #999;
      background-color: #fff;
      border-radius: 50%; }
  .todo-headline__text {
    font-size: 16px;
    margin-left: 10px;
    line-height: 1.3; }
  .todo-headline--done {
    opacity: 0.3; }
  .todo-headline--notstarted {
    opacity: 0.5;
    color: #999; }

.todo-section {
  background-color: #fff; }
  .todo-section .container-left {
    float: left; }
  .todo-section .todo-wrapper {
    width: 630px;
    padding: 0 10px 20px; }
    .todo-section .todo-wrapper .headline {
      border-bottom: 1px solid #ddd; }
  .todo-section .aside {
    float: right;
    border-top: none; }
  .todo-section .todo-container {
    margin-left: 40px; }
    .todo-section .todo-container .form-area {
      margin: 0 -8px 0 -16px;
      width: calc(100% + 16px);
      padding: 0; }
      .todo-section .todo-container .form-area .label {
        display: inline-block;
        padding: 8px 0 4px 16px !important; }
        .todo-section .todo-container .form-area .label--block {
          display: block;
          padding: 8px 0 4px 16px !important; }
  .todo-section__text {
    margin: 0 0 20px; }
  .todo-section .decisionbox {
    padding: 10px;
    border: 2px solid #ddd; }
    .todo-section .decisionbox__name {
      margin: 20px 0;
      font-size: 16px;
      text-align: center; }
    .todo-section .decisionbox__text {
      margin: 0;
      font-size: 20px; }
    .todo-section .decisionbox dl {
      display: flex;
      align-items: baseline;
      margin-bottom: 16px; }
      .todo-section .decisionbox dl > dt {
        width: 30%; }
      .todo-section .decisionbox dl > dd {
        width: 70%;
        font-weight: 600; }
  .todo-section .saledocuments {
    width: 95%;
    margin: 10px 2.5%;
    vertical-align: middle;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    border-collapse: collapse; }
    .todo-section .saledocuments__singledocument {
      width: 60%;
      padding: 20px 10px;
      border: 1px solid #ddd;
      border-collapse: collapse; }
      .todo-section .saledocuments__singledocument__icon-pdf {
        width: 30px;
        margin-right: 10px; }
      .todo-section .saledocuments__singledocument__icon-dl {
        width: 30px;
        text-align: right; }
    .todo-section .saledocuments__bulk {
      width: 40%;
      padding: auto 10px;
      text-align: center;
      border: 1px solid #ddd; }
    .todo-section .saledocuments__not-document {
      padding: 20px 10px;
      background-color: #fff;
      border: 1px solid #ddd; }
  .todo-section .schedule {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 20px; }
    .todo-section .schedule .select {
      display: flex;
      align-items: center;
      position: relative;
      width: 33.333%;
      height: 40px;
      border-right: 1px solid #ddd; }
      .todo-section .schedule .select--noborder {
        border: none; }
      .todo-section .schedule .select:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        display: block;
        width: 0;
        height: 0;
        margin: -2px 0 0;
        border: 5px solid transparent;
        border-top: 7px solid #003CE0; }
      .todo-section .schedule .select select {
        position: relative;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        padding: 0 4px 0 16px;
        font-size: 14px; }
    .todo-section .schedule .select:last-child {
      border: none; }

/*
todolist
Todo画面内のやることリスト
Todo画面以外でも使えそう
*/
.todolist {
  display: block;
  font-weight: bold;
  font-size: 16px; }
  .todolist__item {
    list-style-type: decimal;
    padding: 5px 10px 5px 0;
    margin-left: 30px; }
    .todolist__item--done {
      color: #003CE0; }
    .todolist__item--notyet {
      color: #999; }

/*
security
Ancar保証
保証内容確認画面
*/
.insurance-case {
  display: flex;
  flex-direction: column;
  padding: 10px;
  line-height: 1.3; }
  .insurance-case__number {
    text-align: center;
    color: #666; }
    .insurance-case__number em {
      font-size: 30px;
      font-weight: 600; }
  .insurance-case__detail {
    padding-top: 10px; }
    .insurance-case__detail__title {
      margin: 0 0 20px 0;
      font-size: 16px; }
    .insurance-case__detail__infoitem {
      display: flex;
      align-items: center;
      margin-top: 10px; }
      .insurance-case__detail__infoitem .category {
        width: 30%; }
        .insurance-case__detail__infoitem .category--total {
          font-weight: bold;
          color: #c60000; }
      .insurance-case__detail__infoitem .content {
        width: 70%; }
        .insurance-case__detail__infoitem .content--total {
          font-size: 24px;
          font-weight: bold;
          color: #c60000; }

.insuarance-conditions h3 {
  margin-top: 30px; }

.insuarance-conditions .info-lists {
  list-style: none;
  padding-left: 1em;
  text-indent: -1em; }
  .insuarance-conditions .info-lists li {
    line-height: 1.5;
    margin-top: 10px; }

.insuarance-conditions .container {
  padding-bottom: 40px; }

/*
mycar
マイカー情報（出品価格、紹介文など）
マイカーページ
*/
.mycar-heading {
  position: relative;
  padding: 16px 0 16px 16px;
  background-color: #fff;
  border-bottom: 1px solid #ddd; }
  .mycar-heading > h2 {
    font-size: 16px;
    margin: 0; }
  .mycar-heading .btn--edit {
    position: absolute;
    top: 10px;
    right: 16px;
    display: inline-block;
    width: 96px;
    height: 36px;
    font-size: 14px;
    padding: 10px 0;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-color: #003CE0;
    border-radius: 4px; }

/*
#Button
クリックできるボタンのコンポーネント
使用する箇所：ほぼ全ての画面
*/
.btnarea {
  width: 100%;
  text-align: center; }

.btn, a.btn {
  display: inline-block;
  text-decoration: none;
  margin: 20px 0;
  cursor: pointer;
  width: 320px;
  font-size: 14px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px; }
  .btn--text-lg, a.btn--text-lg {
    font-size: 18px !important;
    font-weight: bold;
    padding: 16px 0; }
  .btn--primary, a.btn--primary {
    background-color: #003CE0;
    color: #fff; }
    .btn--primary:hover, a.btn--primary:hover {
      background-color: #1462FF; }
  .btn--success, a.btn--success {
    background-color: #c60000;
    color: #fff; }
    .btn--success:hover, a.btn--success:hover {
      background-color: #dd2424; }
  .btn--default, a.btn--default {
    background-color: #ddd;
    color: #000; }
    .btn--default:hover, a.btn--default:hover {
      background-color: #e8e8e8; }
  .btn--facebook, a.btn--facebook {
    background-color: #3B5998;
    color: #fff; }
    .btn--facebook:hover, a.btn--facebook:hover {
      background-color: #355089; }
  .btn--twitter, a.btn--twitter {
    background-color: #00aced;
    color: #fff; }
    .btn--twitter:hover, .btn--twitter:active, a.btn--twitter:hover, a.btn--twitter:active {
      background-color: #3DBCF1; }
  .btn--line, a.btn--line {
    background-color: #00c300;
    color: #fff; }
    .btn--line:hover, .btn--line:active, a.btn--line:hover, a.btn--line:active {
      background-color: #00E000; }
  .btn--sm, a.btn--sm {
    padding: 8px auto;
    width: 240px;
    font-size: 12px; }
  .btn--disabled, a.btn--disabled {
    pointer-events: none;
    background-color: #99c7ea;
    cursor: not-allowed; }
  .btn--fav-fixed, a.btn--fav-fixed {
    margin-top: 20px; }
  .btn--deal-fixed, a.btn--deal-fixed {
    margin-bottom: 0; }
    .btn--deal-fixed + .note, a.btn--deal-fixed + .note {
      color: #003CE0; }

.socialbtn {
  width: 100%;
  color: #fff;
  text-align: center; }

.circle-btn {
  display: block;
  width: 70px !important;
  height: 70px !important;
  border-radius: 50%;
  text-decoration: none;
  text-align: center; }
  .circle-btn--fav {
    background: #fff;
    border: 1px solid #999;
    padding: 25px 23px 23px; }
  .circle-btn--disabled {
    pointer-events: none;
    border: 1px solid #003CE0;
    cursor: not-allowed; }

.btn + .note {
  margin-top: 5px;
  margin-bottom: 0; }

a.btn--default.btn--disabled {
  background-color: #fff;
  color: #999;
  border: 1px solid #999; }

/*
Navigation
ナビゲーション全般
TOPページ、グローバルナビ
*/
.mainmenu {
  width: 100%; }
  .mainmenu__item {
    text-align: center; }
    .mainmenu__item .btn--sellcar {
      position: fixed;
      bottom: 40px;
      right: 40px;
      width: 96px;
      height: 96px;
      vertical-align: middle;
      margin: 0;
      padding: 10px;
      font-size: 32px;
      color: #003CE0;
      background: rgba(255, 255, 255, 0.9);
      cursor: pointer;
      text-decoration: none;
      z-index: 30;
      border: 4px solid #003CE0;
      border-radius: 50%; }
      .mainmenu__item .btn--sellcar span {
        position: absolute;
        left: 16px;
        bottom: 10px;
        font-size: 14px;
        letter-spacing: 1px; }

/*
accordion
開閉アコーディオン
FAQなど
*/
.accordion__panel {
  cursor: pointer; }

.accordion__body {
  height: 0;
  overflow: hidden; }
  .accordion__body--open {
    height: auto; }

/*
基本情報などが入る表
*/
.infobox {
  width: 95%;
  margin: 10px 2.5%;
  background-color: #fff;
  border: 1px solid #ddd; }
  .infobox > dl {
    display: flex;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ddd; }
    .infobox > dl:last-child {
      border: none; }
    .infobox > dl > dt {
      width: 50%;
      padding: 10px;
      border-right: 1px solid #ddd;
      background-color: #f6f6f6; }
    .infobox > dl > dd {
      width: 50%;
      padding: 10px;
      background-color: #fff; }

/*
costlist
料金表・何にいくらかかったか一覧
合計金額・オプション合計金額などなど
Todoリスト、車両詳細、その他
*/
.costlist-item {
  display: flex;
  align-items: baseline;
  width: 100%;
  padding: 5px 0 20px;
  font-size: 14px; }
  .costlist-item__category {
    width: 50%;
    padding-left: 10px; }
  .costlist-item__cost {
    width: 50%;
    font-size: 16px;
    text-align: right;
    padding-right: 10px;
    font-weight: bold; }
  .costlist-item--border {
    border-bottom: 1px solid #ddd; }
  .costlist-item--essencial {
    font-size: 24px;
    color: #003CE0; }

.card {
  position: relative;
  display: block;
  width: 100%;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: 80; }
  .card__content {
    margin: 0; }
  .card__label {
    position: absolute;
    top: -8px;
    text-align: center;
    z-index: 85; }
    .card__label--primary {
      color: #ffffff;
      background-color: #003CE0;
      border: 1px solid transparent; }
    .card__label--info {
      color: #003CE0;
      background-color: #ffffff;
      border: 1px solid #003CE0; }
    .card__label--left_side {
      left: -8px; }
    .card__label--right_side {
      right: -8px; }
    .card__label--sm {
      width: 96px;
      font-size: 10px;
      line-height: 1.7; }
    .card__label--lg {
      width: 160px;
      font-size: 12px;
      line-height: 2.0; }
  .card:hover {
    text-decoration: none; }

.card-container {
  display: flex;
  width: 100%;
  flex-flow: row wrap; }
  .card-container .card {
    margin-bottom: spacer(md); }

.table {
  width: 100%;
  background-color: #fff;
  margin: 10px 0;
  box-shadow: none;
  text-align: left;
  vertical-align: middle;
  margin-bottom: 20px;
  border-collapse: separate;
  border-spacing: 0; }
  .table th, .table td {
    width: 33.333%;
    background-color: #f6f6f6;
    color: rgba(0, 0, 0, 0.87);
    padding: 12px 10px;
    font-weight: bold;
    vertical-align: inherit;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd; }
    .table th:last-child, .table td:last-child {
      border-left: 1px solid rgba(34, 36, 38, 0.1); }
  .table td {
    background-color: #fff; }
    .table td:last-child {
      border-right: 1px solid #ddd; }
  .table tr:last-child th, .table tr:last-child td, .table tr:last-child td {
    border-bottom: 1px solid #ddd; }
  .table .null {
    border: none; }

/*
form
入力フォーム全般
登録画面、ユーザーに入力してもらう部分全般
*/
.form-area {
  width: 100%;
  padding: 10px 2.5%; }
  .form-area--nopadding {
    padding: 0; }
  .form-area .label {
    display: inline-block;
    padding: 8px 0 4px 16px !important; }
    .form-area .label--block {
      display: block;
      padding: 8px 0 4px 16px !important; }

.errortext {
  display: block;
  margin: -5px 0 15px 16px;
  color: #ef5e5e; }

.form-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 10px 28px 10px 0; }

.form-block {
  display: block;
  vertical-align: middle;
  margin: 10px 0; }
  .form-block--error .form-control--input,
  .form-block--error .form-control--textarea,
  .form-block--error .selectbox {
    border: 1px solid #ef5e5e;
    background-color: #fff; }
  .form-block--error .uploader {
    border: 1px solid #ef5e5e; }

.form-protrude {
  display: block;
  margin: 0 -8px 0 -16px;
  width: calc(100% + 16px); }
  .form-protrude .label {
    display: inline-block;
    padding: 8px 0 4px 16px !important; }
    .form-protrude .label--block {
      display: block;
      padding: 8px 0 4px 16px !important; }

input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=search],
input[type=url],
input[type=tel],
input[type=date] {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 14px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  border-radius: 32px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  input[type=text].error,
  input[type=password].error,
  input[type=number].error,
  input[type=email].error,
  input[type=search].error,
  input[type=url].error,
  input[type=tel].error,
  input[type=date].error {
    border: 1px solid #ef5e5e;
    background-color: #fff; }

textarea {
  width: 100%;
  padding: 18px 24px;
  font-size: 14px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  border-radius: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.todo-section .form-block--error .schedule {
  border: 1px solid #ef5e5e; }

/*
selectbox
Ancarで使用するセレクトボックス
*/
.selectbox {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 24px; }
  .selectbox:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 0;
    height: 0;
    margin: -2px 0 0 0;
    border: 5px solid transparent;
    border-top: 5px solid #003CE0; }
  .selectbox select {
    position: relative;
    width: 100%;
    font-size: 14px;
    color: black; }

.select-placeholding {
  color: #999; }

/*
Dete
日時を指定するためのフォーム
各入力画面
*/
.date-box {
  position: relative;
  padding: 10px;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  display: block;
  width: 100%;
  color: #000;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px; }

/*
radio
Ancarで使用するラジオボタン
*/
input[type="radio"] {
  display: none; }

.radio {
  position: relative;
  display: inline-block;
  padding: 12px 32px;
  cursor: pointer; }
  .radio--block {
    position: relative;
    display: block;
    padding: 12px 0 12px 32px;
    cursor: pointer; }
  .radio::before, .radio::after {
    position: absolute;
    content: '';
    top: 50%;
    border-radius: 100%;
    -webkit-transition: all .2s;
    transition: all .2s; }
  .radio::before {
    left: 0;
    width: 28px;
    height: 28px;
    margin-top: -12px;
    background: #fff;
    border: 1px solid #ccc; }
  .radio:hover::before {
    background: #fff; }
  .radio::after {
    opacity: 0;
    left: 6px;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    background: #003CE0;
    -webkit-transform: scale(2);
    transform: scale(2); }

input[type="radio"]:checked + .radio::before {
  background: #fff;
  border: 1px solid #003CE0; }

input[type="radio"]:checked + .radio::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1); }

/*
checkbox
Ancarで使用するチェックボックス
*/
input[type="checkbox"] {
  display: none; }

.checkbox {
  position: relative;
  display: inline-block;
  padding: 8px 0 8px 36px;
  cursor: pointer; }
  .checkbox::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%; }

input[type="checkbox"]:checked + .checkbox::before {
  border: 1px solid #003CE0; }

input[type="checkbox"]:checked + .checkbox::after {
  position: absolute;
  content: '';
  top: calc(50% - 5px);
  left: 5px;
  width: 18px;
  height: 8px;
  border-left: 3px solid #003CE0;
  border-bottom: 3px solid #003CE0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

/*
#uploader
画像アップローダー
使用する箇所：Todo画面・マイページなど
*/
.uploader {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 10px 8px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ddd;
  background: #f6f6f6;
  border-radius: 20px;
  overflow: hidden; }
  .uploader > input[type="file"] {
    display: inline-block;
    width: 100%;
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0; }
  .uploader__icon {
    margin-left: 20px; }

/*
#Alert
入力内容が正しいか間違ってるかなどのアラート
使用する箇所：フォーム部分とか
*/
.alert {
  display: block;
  width: 95%;
  margin: 10px auto;
  padding: 10px 2.5%;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  background-color: #fff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px; }
  .alert--success {
    color: #009944;
    border: 1px solid #009944; }
  .alert--error {
    color: #cc0000;
    border: 1px solid #cc0000; }

/*
PCビュー（）用のコンポーネント
主にPCビュー内車一覧ページ
*/
.pc-container {
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: #fff; }

.pc-main {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  flex-grow: 1;
  padding-left: 320px;
  width: calc(100% - 320px); }

.pc-sidebar {
  position: fixed;
  display: flex;
  -moz-box-flex: 1.0;
  -webkit-box-flex: 1.0;
  -ms-box-flex: 1.0;
  flex-grow: 1;
  width: 320px;
  height: 90%;
  background-color: #f6f6f6;
  border-right: 1px solid #ccc;
  z-index: 5;
  overflow-y: scroll; }

@media screen and (max-width: 1199px) {
  .carlist__item {
    width: 49%; } }

@media screen and (max-width: 999px) {
  .carlist__item {
    width: 49%; } }

@media screen and (max-width: 767px) {
  .carlist__item {
    width: 100%; } }