@charset "UTF-8";
/**
 * header
 * NOTE: 
**/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #ddd;
  background: #fff;
  width: 100%;
  height: var(--header-height);
  padding: var(--header-padding-block) var(--header-padding-inline);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  transition: all 0.3s ease;
}


.header__logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: var(--header-logo-width);
  gap: var(--header-logo-gap);
}
.header__logo:has(.header__slogan) {
  width: calc( var(--header-logo-width) + var(--header-logo-gap) + var(--header-slogan-width) );
}
.header__logo a {
  display: block;
  color: inherit;
}
.header__logo img {
  width: var(--header-logo-width);
  height: auto;
}
.header__slogan {
  display: block;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .header__slogan {
    font-size: 10px;
  }
}


.head-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: calc( 100% - var(--header-logo-width) );
  gap: 20px;
  padding-left: 60px;
}
.header__logo:has(.header__slogan) ~ .head-nav {
  width: calc( 100% - ( var(--header-logo-width) + var(--header-logo-gap) + var(--header-slogan-width) ) );
}
@media (max-width: 959.98px) {
  .head-nav {
    width: auto;
    padding-left: 20px;
  }
}
@media (max-width: 767.98px) {
  .head-nav {
    width: auto;
    padding-left: 8px;
    gap: 8px;
  }
}


.head-nav > ul:not([class]) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 28px;
  margin-inline: 0 auto;
}
.head-nav > ul:not([class]) li {}
.head-nav > ul:not([class]) li a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  gap: 1ex;
}
.head-nav > ul:not([class]) .c-icon {
  
}
@media (max-width: 959.98px) {
  .head-nav > ul:not([class]) {
    display: none;
  }
}

/* Icon Button menu */
.head-icon-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
@media (max-width: 767.98px) {
  .head-icon-wrap {
    gap: 8px;
  }
}

.head-icon {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  text-align: center;
  gap: 6px;
  min-width: 4em;
  transition: opacity 0.2s ease;
}
.head-icon:hover {
  opacity: 0.6;
}
@media (max-width: 767.98px) {
  .head-icon {
    font-size: 8px;
    gap: 2px;
  }
}
.head-icon a {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-size: inherit;
  width: 100%;
  gap: 6px;
}
.head-icon a:hover {
  opacity: 1;
}
@media (max-width: 767.98px) {
  .head-icon a {
    gap: 2px;
  }
}
.head-icon i {
  display: block;
  width: 20px;
  height: 20px;
}
.head-icon i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.head-icon span {
  display: block;
  font-weight: 500;
  font-size: inherit;
  font-feature-settings: "palt";
  white-space: nowrap;
}



/* Button menu */
.head-btn-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.head-btn {
  display: block;
  text-align: center;
  height: 40px;
}
.head-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--btn-radius);
  border: 1px solid var(--font-c);
  background: #fff;
  color: var(--font-c);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  width: 100%;
  height: 100%;
  padding: 0 10px;
}
.head-btn a:hover {
  background: var(--font-c);
  color: #fff;
}
@media (max-width: 767.98px) {
  .head-btn {
    height: 36px;
    margin-left: 4px;
  }
  .head-btn a {
    font-size: 8px;
    line-height: 1.4;
    padding: 0 4px;
  }
}


.item__badge {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  border-radius: 20px;
  background: rgba(236, 13, 13, .8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 20px;
  width: auto;
  height: 20px;
  padding: 5px;
  position: absolute;
  right: -7px;
  top: -2px;
  z-index: 1;
  transition: all 0.6s ease 0.2s;
}

/**
 * ハンバーガー
 * NOTE: 
**/
#nav-drawer {
  display: unset;
}
@media (max-width: 767.98px) {
  #nav-drawer {
    margin-left: 4px;
  }
}
@media (max-width: 320.98px) {
  #nav-drawer {
    margin-left: 4px;
  }
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display: none;
}
/*アイコンのスペース*/
#nav-open {
  display: block;
  position: relative;
}

/*ハンバーガーアイコンをCSSだけで表現*/
/*閉じる用の薄黒カバー*/
#nav-close {
  display: block;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition:
    backdrop-filter 0.16s ease-in-out,
    opacity 0.16s ease-in-out;
  opacity: 1;
  pointer-events: none;
}
/*チェックが入った表示*/
#nav-input:checked ~ #nav-close {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  opacity: 1;
  pointer-events: auto;
}

/*中身*/
.nav-content {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  border-radius: var(--btn-radius);
  background: #fff;
  width: 90svw;
  max-width: 350px;
  height: 100%;
  padding: 0 40px 40px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  transform: translate(105%,0);
  overflow: auto;
  transition:
	  box-shadow 0.3s ease-in-out,
	  transform 0.3s ease-in-out;
}
/*チェックが入った表示*/
#nav-input:checked ~ .nav-content {
  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  transform: translate(0%,0);
}

/*リスト*/
.nav-content__list {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
  margin-top: 40px;
}
.nav-content__list.nav-content__list--small {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.nav-content__list li {
  margin: 0
}
.nav-content__list a {
  display: block;
  font-weight: 400;
  font-size: 15px;
  padding: 4px 0;
  position: relative;
}
.nav-content__list a::after {
  content: '\f105';
  display: var(--fa-display, inline-block);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  background: transparent;
  color: var(--main-c);
  font-family: "Font Awesome 7 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-rendering: auto;
  width: 1.5em;
  height: auto;
  aspect-ratio: 1 / 1;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1;
  transform: translate(0, -50%);
  transform-origin: right center;
}
.nav-content__list.nav-content__list--small a {
  color: var(--font-c-gray-dark);
  font-weight: 400;
  font-size: 11px;
  padding: 0;
}
.nav-content__list.nav-content__list--small a::after {
  display: none;
}
@media (max-width: 767.98px) {
  .nav-content {
    max-width: 280px;
    padding: 0 20px 20px;
  }
  .nav-content__list {
    margin-top: 20px;
  }
}


/**
 * 下部固定ボタン
 * NOTE: 
**/

.bottom-btn {
  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, 1);
  text-align: center;
  width: 100%;
  padding: 16px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
}
.bottom-btn__body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 500px;
  gap: 20px;
  margin: 0 auto;
}
.bottom-btn__btn,
.bottom-btn__btn.btn {
  max-width: none;
  margin: 0;
  flex: 1 1;
}
.bottom-btn__btn>*,
.bottom-btn__btn.btn>* {
  padding: 0 1em;
}
.bottom-btn__btn>*::after,
.bottom-btn__btn.btn>*::after {
  display: none;
}
.bottom-btn__btn i {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
  mix-blend-mode: screen;
  border-radius: 50%;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 8px 0 0;
  padding: 0 8px;
}

/**
 * footer
 * NOTE: 
**/
.footer {
  border-top: 1px solid #ddd;
  background: #fff;
  width: 100%;
  padding: 100px 0;
}
@media (max-width: 767.98px) {
  .footer {
    padding: 48px 0 16px;
  }
}

.footer__body {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-content: flex-start;
  align-items: flex-start;
  gap: 40px 48px;
}
@media (max-width: 959.98px) {
  .footer__body {
    justify-content: center;
    gap: 40px;
  }
}
@media (max-width: 767.98px) {
  .footer__body {
    gap: 32px;
  }
}

.footer__logo {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 160px;
  margin: 0 auto 0 0;
}
.footer__logo a {
  display: block;
}
.footer__logo img {
  width: 100%;
  height: auto;
}
@media (max-width: 959.98px) {
  .footer__logo {
    width: 100%;
    gap: 16px;
  }
  .footer__logo img {
    width: 160px;
    height: auto;
  }
}
@media (max-width: 767.98px) {
  .footer__logo {
    width: 100%;
  }
  .footer__logo img {
    width: 88px;
    height: auto;
  }
}

.footer__nav {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  min-width: 128px;
  gap: 8px;
}
@media (max-width: 767.98px) {
  .footer__nav {
    width: 100%;
    gap: 6px;
  }
}
.footer__nav dt {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 8px;
}
.footer__nav dd {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
}
.footer__nav dd a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  color: inherit;
  line-height: inherit;
  position: relative;
}
.footer__nav dd a::before {
  content: '\f105';
  display: var(--fa-display, inline-block);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Font Awesome 7 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  color: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  text-rendering: auto;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .footer__nav dt {
    font-size: 12px;
    margin: 0 0 4px;
  }
  .footer__nav dd {
    font-size: 12px;
  }
}


.footer__copy {
  color: hsl(180, 0%, 61%);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  line-height: 1.4;
  width: 100%;
}
@media (max-width: 767.98px) {
  .footer__copy {
    font-size: 10px;
    text-align: center;
  }
}

.footer__copy p {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: inherit;
}
.footer__copy p+p {
  margin-top: 0.25em;
}


/**
 * パンくず
 * NOTE: 
**/
.breadcrumb {}
.breadcrumb__list {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 12px
}
.breadcrumb__item::before {
  content: '>';
  padding: 0 5px
}
.breadcrumb__item:first-child::before {
  content: none
}
@media (max-width: 767.98px) {
  .breadcrumb__list {
    height: 35px;
    line-height: 35px;
    font-size: 11px;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow: auto;
    white-space: nowrap
  }
  .breadcrumb__item {
    display: inline;
    flex: 0 0 40%
  }
}


/**
 * 検索一覧
 * NOTE: 独自レイアウト
**/

.wrap.page-search {}

.search-container {
  display: grid;
  grid-template-columns: 9fr 24fr;
  gap: 40px;
  width: 100%;
  max-width: var(--basewrap-width);
  margin: 0 auto;
  padding: 40px var(--basewrap-padding-inline);
  position: relative;
}
.search-container .l-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
@media (max-width: 1140.98px) {
  .search-container {
    gap: 20px;
    padding-block: 20px;
  }
}
@media (max-width: 767.98px) {
  .search-container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.page-search-section {}
.page-search-section--side {
  margin: 0;
  padding: 0;
}
.page-search-section--main {
  margin: 0;
  padding: 0;
}


/**
 * 車情報欄
 * NOTE: 独自部品
**/
.search-item {
  border-radius: var(--ui-radius-box);
  border: solid 1px var(--font-c);
  background: #fff;
  padding: 30px;
}
*+.search-item {
  margin-top: 40px;
}
.search-item__ID {
  border-radius: 4px;
  background: var(--bg-c-lightgray);
  color: var(--font-c);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 8px;
}
*+.search-item__ID {
  margin-top: 16px;
}
.search-item__name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
*+.search-item__name {
  margin-top: 16px;
}
.search-item__info {
  font-size: 14px;
}
*+.search-item__info {
  margin-top: 16px;
}
@media (max-width: 767.98px) {
  .search-item__info {
    display: grid;
    grid-template-columns: 88px 2fr;
    gap: 4px 1em;
  }
}
.search-item__info dt {
  color: var(--font-c-gray-dark);
  font-weight: 400;
  font-size: 14px;
}
.search-item__info dd {
  color: var(--font-c);
  font-weight: 400;
  font-size: 14px;
}
.search-item__info *+dt {
  margin-top: 16px;
}
.search-item__info *+dd {
  margin-top: 4px;
}
@media (max-width: 767.98px) {
  .search-item__info *+dt {
    margin-top: 0;
  }
  .search-item__info *+dd {
    margin-top: 0;
  }
}

/**
 * 検索条件
 * NOTE: 
**/
.search {
  padding-bottom: 0
}
.search__area {
  padding-bottom: 20px;
  border-bottom: 1px solid #e9eced
}
.search__area--second {
  padding-top: 20px;
  background: #fafafa
}
.search__word, .search__sort, .search__filter {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  flex-wrap: wrap
}
.search__sort {
  margin-top: 20px
}
.search__ttl {
  margin-right: 20px;
  font-weight: 700
}
.search__item {
  margin-right: 15px
}
.search__item:last-child {
  margin-right: 0
}
@media (max-width: 959.98px) {
  .search__word, .search__sort, .search__filter {
    max-width: unset;
    padding: 0 20px
  }
  .search__ttl, .search__item {
    margin-right: 10px
  }
  .search__filter .search__ttl {
    width: 100%;
    margin: 0
  }
  .search__filter .search__item {
    margin-top: 10px
  }
}
@media (max-width: 767.98px) {
  .search__word, .search__sort, .search__filter {
    padding: 0 15px
  }
  .search__sort {
    margin-top: 10px
  }
}


/**
 * modal
 * NOTE: 画面の高さを基準にしたブレークポイントがあるので注意してください。
**/

.modal-drawer,
[id="modal-drawer"] {
  width: 180px;
  margin: 0 auto;
}

/* NOTE: body直下に .modal-drawerを配置した場合は、z-indexを body>.wrapよりも上に */
body>.modal-drawer,
body>[id="modal-drawer"] {
  position: relative;
  z-index: 20;
}

@media (max-width: 959.98px) {

  .modal-drawer,
  [id="modal-drawer"] {
    font-size: 12px;
    width: 110px;
  }
}

.modal-unshown {
  display: none;
}

.modal__btn {
  max-width: 180px;
  margin-top: 0;
  margin-left: auto;
}

.modal__btn>span {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
  border-radius: var(--btn-radius);
  border: solid 1px var(--main-c);
  background: var(--main-c);
  color: #fff;
  text-align: center;
  width: 100%;
  height: var(--btn-height);
  padding-inline: 1.5em;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal__btn>span:hover {
  border: solid 1px var(--main-c);
  background: var(--main-c);
  color: #fff;
  opacity: 0.9;
}

.modal-open,
[id="modal-open"] {
  display: block
}

.modal-close,
[id="modal-close"] {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  opacity: 1;
  transition: all 0.16s ease-in-out;
  z-index: 1000;
  pointer-events: none;
}
.modal-dialog .modal-close,
.modal-dialog [id="modal-close"] {
  z-index: 2000;
}
.modal-switch:checked~.modal-close,
[id="modal-input"]:checked~[id="modal-close"] {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  opacity: 1;
  pointer-events: auto;
}


.modal-content,
[id="modal-content"] {
  /* NOTE: モーダルのサイズ変更は変数で可能。サイズ変更に各プロパティの調整は不要。 */
  --modal-content-width: 900px;
  --modal-content-height: 768px;
  border-radius: var(--btn-radius);
  border: 20px solid #fff;
  background: #fff;
  width: var(--modal-content-width);
  height: var(--modal-content-height);
  padding: 20px;
  position: fixed;
  top: calc((100dvh - var(--modal-content-height)) / 2);
  left: calc((100svw - var(--modal-content-width)) / 2);
  z-index: 1001;
  transform: translate(0, 0);
  opacity: 0;
  overflow: auto;
  pointer-events: none;
}
.modal-dialog .modal-content,
.modal-dialog [id="modal-content"] {
  /* NOTE: モーダルのサイズ変更は変数で可能。サイズ変更に各プロパティの調整は不要。 */
  --modal-content-width: 360px;
  --modal-content-height: 220px;
  width: var(--modal-content-width);
  height: var(--modal-content-height);
  padding: 0;
  top: calc((100dvh - var(--modal-content-height)) / 2);
  left: calc((100svw - var(--modal-content-width)) / 2);
  overflow: visible;
  z-index: 2001;
}

/* 縦方向制御 */
@media (max-height: 1023.98px) {
  .modal-content,
  [id="modal-content"] {
    height: calc(100dvh - 64px * 2);
    top: 64px;
  }
  .modal-dialog .modal-content,
  .modal-dialog [id="modal-content"] {
    --modal-content-width: 360px;
    --modal-content-height: 220px;
    width: var(--modal-content-width);
    height: var(--modal-content-height);
    top: calc((100dvh - var(--modal-content-height)) / 2);
    left: calc((100svw - var(--modal-content-width)) / 2);
  }
}

/* 横方向制御 */
@media (max-width: 959.98px) {
  .modal-content,
  [id="modal-content"] {
    width: calc((100svw - var(--basewrap-padding-inline) * 2));
    border: 8px solid #fff;
    padding: 16px 8px 8px;
    left: var(--basewrap-padding-inline);
  }
  .modal-dialog .modal-content,
  .modal-dialog [id="modal-content"] {
    --modal-content-width: 360px;
    --modal-content-height: 220px;
    width: var(--modal-content-width);
    height: var(--modal-content-height);
    top: calc((100dvh - var(--modal-content-height)) / 2);
    left: calc((100svw - var(--modal-content-width)) / 2);
  }
}
@media (max-width: 560.98px) {
  .modal-content,
  [id="modal-content"] {
    width: calc((100svw - 8px * 2));
    border: 8px solid #fff;
    padding: 16px 8px 8px;
    left: 8px;
  }
  .modal-dialog .modal-content,
  .modal-dialog [id="modal-content"]{
    --modal-content-width: calc( 100vw - 32px );
    --modal-content-height: 220px;
    width: var(--modal-content-width);
    height: auto;
    top: calc((100dvh - var(--modal-content-height)) / 2);
    left: calc((100svw - var(--modal-content-width)) / 2);
  }
}

.modal-switch {
  position: absolute;
  opacity: 0 !important;
}

.modal-switch:checked~.modal-content,
[id="modal-input"]:checked~[id="modal-content"] {
  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  opacity: 1;
  pointer-events: auto;
}

.modal-content::-webkit-scrollbar,
[id="modal-content"]::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.modal-content::-webkit-scrollbar-thumb,
[id="modal-content"]::-webkit-scrollbar-thumb {
  background: var(--main-c);
  border-radius: 6px;
  box-shadow: none;
}

.modal-content::-webkit-scrollbar-track,
[id="modal-content"]::-webkit-scrollbar-track {
  background: var(--ui-c-lightgray);
  border-radius: 6px;
  box-shadow: none;
}

.modal-content::-webkit-scrollbar-corner,
[id="modal-content"]::-webkit-scrollbar-corner {
  display: none;
}

/* === 査定ウィザード（無料査定モーダル）のステップ専用調整 ==========================
   旧: .modal-content が固定高(768px等)のため、STEP1のフォームが収まらず常に縦スクロール
       が発生し、ブランド色(赤)のスクロールバーが「別ポップアップ」のように見えていた。
   新: 内容に応じた高さ＋縦中央にして、収まる画面ではスクロール自体を出さない。収まらない
       小さい画面ではスクロールするが、控えめ（細い半透明）なスクロールバーにする。
   ※ メーカー/車種の一覧モーダル等、他のモーダルの赤いスクロールバーは従来どおり。 */
#free-appraisal--step-01 .modal-content,
#free-appraisal--step-02 .modal-content,
#free-appraisal--step-03 .modal-content {
  height: auto;
  max-height: calc(100dvh - 16px);
  top: 50%;
  transform: translateY(-50%);
}
#free-appraisal--step-01 .modal-content::-webkit-scrollbar,
#free-appraisal--step-02 .modal-content::-webkit-scrollbar,
#free-appraisal--step-03 .modal-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#free-appraisal--step-01 .modal-content::-webkit-scrollbar-thumb,
#free-appraisal--step-02 .modal-content::-webkit-scrollbar-thumb,
#free-appraisal--step-03 .modal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .25);
}
#free-appraisal--step-01 .modal-content::-webkit-scrollbar-track,
#free-appraisal--step-02 .modal-content::-webkit-scrollbar-track,
#free-appraisal--step-03 .modal-content::-webkit-scrollbar-track {
  background: transparent;
}

/* メーカー/車種の選択モーダルは STEP（無料査定依頼）モーダルの「中」から開くため、
   ステップモーダル(z-index 1000/1001)より前面に重ねる必要がある。これが無いと、
   後から開いたメーカー/車種モーダルがステップモーダルの裏に隠れてしまう。
   キャンセルダイアログ(2000/2001)より下に収める。 */
#free-appraisal--maker .modal-close,
#free-appraisal--car .modal-close {
  z-index: 1500;
}
#free-appraisal--maker .modal-content,
#free-appraisal--car .modal-content {
  z-index: 1501;
}

.modal-close-cross {
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}
@media (max-width: 959.98px) {
  .modal-close-cross {
    top: 8px;
    right: 8px;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--bg-c-silvergray);
  padding: 16px 16px 16px 0;
}
.modal-header__ttl {
  font-weight: 700;
  font-size: 16px;
}
.modal-body {
  padding: 20px 0;
}
@media (max-width: 767.98px) {

}

.modal-dialog .modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 8px 0 12px;
}
.modal-dialog .modal-header__ttl {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.modal-dialog .modal-body {
  font-size: 15px;
  line-height: 1.6;
  padding: 12px 0 24px;
}
.modal-dialog .modal-body .btn {
  margin-top: 12px;
}
@media (max-width: 767.98px) {

}

.modal-content .table th,
.modal-content .table td,
[id="modal-content"] .table th,
[id="modal-content"] .table td {
  padding: 10px 20px
}

@media (max-width: 767.98px) {

  .modal-content .table td,
  [id="modal-content"] .table td {
    padding: 10px 10px 15px
  }
}

.modal-content .c-head {
  margin: 0 0 12px;
}

.modal-content .c-head__ttl {
  font-size: 28px;
  line-height: 1.4;
}

.modal-content .c-head__txt {
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .modal-content .c-head__ttl {
    font-size: 20px;
  }

  .modal-content .c-head__txt {
    font-size: 14px;
  }
}

.modal-content .formset {
  box-shadow: none;
  border-radius: 0;
  border: none;
  background: transparent;
  margin-bottom: 32px;
  padding: 0;
}

.modal-content .formset__img {
  margin-block: 32px -32px;
}

/* モーダル内部 ボタンラッパー */
.modal-content .box-btn {
  max-width: 560px;
  margin-inline: auto;
}

/* 戻るボタンの矢印の位置と向きを調整 */
/* NOTE: 暫定処置のため、ボタン数の仕様変更があった場合、以下のスタイルで対応不可になります。 */
/* 
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>a,
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>[type="submit"],
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>[type="button"],
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>button,
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>span {
  padding-inline: 2.5em 1.5em;
}
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>a::after,
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>[type="submit"]::after,
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>[type="button"]::after,
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>button::after,
.modal-drawer .box-btn:has(.btn:nth-child(2):last-child) .btn:first-child>span::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 1.5em;
  transform: translate(100%, -50%) scaleX(-1);
  transform-origin: left center;
} */


/* モーダル内部 submitなど（ボタンラッパー風に配置する） */
.modal-content>.btn.btn__attract,
[id="modal-content"]>.btn.btn__attract {
  display: flex;
  margin: 40px auto;
}


/* 車種のモーダル内ナビゲーション */
.modal-nav {
  display: flex;
  flex-wrap: wrap;
  background: var(--bg-c-lightgray);
  width: 100%;
  padding: 12px;
  gap: 8px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}
*+.modal-nav {
  margin-top: 12px;
}
.modal-nav a {
  border-radius: 4px;
  border: 1px solid var(--bg-c-silvergray);
  background: #fff;
  color: var(--font-c);
  font-size: 13px;
  text-decoration: none;
  padding: 4px 8px;
}
.modal-nav a.is--disabled {
  border: 1px solid var(--bg-c-silvergray);
  background: var(--bg-c-disabledgray);
  color: #333;
  pointer-events: none;
}

.modal-section {}
*+.modal-section {
  margin-top: 1em;
}
.modal-section__ttl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--bg-c-lightgray);
  font-weight: 700;
  font-size: 16px;
  height: 40px;
  padding: 0 12px;
}


/* メーカー選択 */
.maker-select__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 横に7等分 */
  gap: 12px;
}
@media (max-width: 768px) {
  .maker-select__grid { grid-template-columns: repeat(4, 1fr); } /* スマホ時は4列など */
}
.maker-select__item {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition:
    border 0.2s ease,
    background 0.2s ease;
}
.maker-select__item:hover {
  background: #f5f5f5;
}
.maker-select__item:has(:checked) {
  border-color: var(--main-c);
  background-color: var(--sub-c-light);
}

.maker-select__item>[type="checkbox"],
.maker-select__item>[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.maker-select__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 100%;
  margin-bottom: 5px;
  aspect-ratio: 1 / 1;
}
.maker-select__logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.maker-select__name {
  font-size: 12px;
  font-weight: 700;
}


/* 車種選択 */
.car-lineup__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 8px;
}
*+.car-lineup__list {
  margin-top: 8px;
}
.car-lineup__list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 4px;
  line-height: 1.4;
  text-align: center;
  padding: 12px;
  cursor: pointer;
  transition:
    border 0.2s ease,
    background 0.2s ease;
}
.car-lineup__list-item:hover {
  background: #f5f5f5;
}
.car-lineup__list-item:has(:checked) {
  border-color: var(--main-c);
  background-color: var(--sub-c-light);
}

.car-lineup__list-item [type="checkbox"],
.car-lineup__list-item [type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.car-lineup__list-item>span {
  display: block;
  font-weight: 400;
  font-size: 16px;
}


/**
 * result
 * NOTE: 
**/

/* list section */
.result {}

/* current search condition */
.result__cond {
  --result-cond-gap: 40px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  gap: var(--result-cond-gap);
  margin: 0 0 20px;
}
*+.result__cond {
  margin-top: 20px;
}
@media (max-width: 767.98px) {
  .result__cond {
    --result-cond-gap: 20px;
    flex-flow: row wrap;
    gap: var(--result-cond-gap);
    margin: 0 0 20px;
  }
  *+.result__cond {
    margin-top: 16px;
  }
}

.result__cond-item {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: calc( var(--result-cond-gap) * 0.25 );
  position: relative;
}
*+.result__cond-item::before {
  content: '';
  display: block;
  border-left: solid 1px;
  position: absolute;
  inset: 0 auto 0 calc( var(--result-cond-gap) * -0.5 );
}
@media (max-width: 767.98px) {
  .result__cond-item {
    gap: calc( var(--result-cond-gap) * 0.25 );
    width: 100%;
  }
  *+.result__cond-item::before {
    border-top: solid 1px;
    border-left: none;
    position: absolute;
    inset: calc( var(--result-cond-gap) * -0.5 ) 0 auto 0;
  }
}
.result__cond-item>dt {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
}
.result__cond-item>dd {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
}
.result__cond-em {
  color: var(--main-c);
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
}
.result__cond-yen {
  color: var(--main-c);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 767.98px) {
  .result__cond-item>dt {
    font-size: 12px;
    line-height: 20px;
  }
  .result__cond-item>dd {
    font-size: 12px;
    line-height: 20px;
  }
  .result__cond-em {
    font-size: 20px;
    line-height: 20px;
  }
  .result__cond-yen {
    font-size: 12px;
    line-height: 20px;
  }
}


/* list wrapper */
.result__list {}

/* list item */
.result__item {
  --result-item-img-size: 80px;
  --result-item-gap: 20px;
  --result-item-btn-wrapper-size: 208px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  box-shadow: none;
  border-radius: var(--ui-radius-box);
  border: 1px solid var(--font-c);
  background: #fff;
  width: 100%;
  margin: 0 0 30px;
  padding: 30px 30px 30px 56px;
  gap: var(--result-item-gap);
  position: relative;
  overflow: hidden;
}
@media (max-width: 959.98px) {
  .result__item {
    --result-item-img-size: 80px;
    --result-item-gap: 20px;
    --result-item-btn-wrapper-size: 208px;
    padding: 16px 16px 16px 42px;
    gap: var(--result-item-gap);
  }
}
@media (max-width: 767.98px) {
  .result__item {
    --result-item-img-size: 72px;
    --result-item-gap: 12px;
    --result-item-btn-wrapper-size: 208px;
    margin-bottom: 20px;
    padding: 12px 12px 12px 38px;
    gap: var(--result-item-gap);
  }
}

.result__top {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  margin: 0;
  gap: var(--result-item-gap);
}

.result__img {
  width: var(--result-item-img-size);
}
.result__img img {
  border-radius: var(--btn-radius);
  width: var(--result-item-img-size);
  height: var(--result-item-img-size);
  object-fit: cover;
}
.result__info {
  display: block;
  width: calc( 100% - var(--result-item-gap) - var(--result-item-img-size) );
  margin: 0;
  padding: var(--result-item-gap) 0 0;
}


.result__ttl {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}
.result__name {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
}
*+.result__name {
  margin-top: 4px;
}
.result__address {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
}
*+.result__address {
  margin-top: 4px;
}
@media (max-width: 959.98px) {
  .result__ttl {
    font-size: 20px;
  }
}
@media (max-width: 767.98px) {
  .result__ttl {
    font-size: 20px;
  }
}


.result__bottom {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin: 0;
  gap: 0;
}
@media (max-width: 767.98px) {
  .result__bottom {
    gap: 12px 0;
  }
}
.result__txt {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  width: calc( 100% - var(--result-item-btn-wrapper-size) );
  margin: 0;
}
@media (max-width: 959.98px) {
  .result__txt {
    font-size: 16px;
  }
}
@media (max-width: 767.98px) {
  .result__txt {
    font-size: 14px;
    width: 100%;
  }
}

.result__checkbox-overlay {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-image: linear-gradient(var(--bg-c-lightgray) 0%, var(--bg-c-lightgray) 100%);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 26px 100%;
  color: #fff;
  padding: 0 0 0 13px;
  position: absolute;
  inset: 0;
  z-index: 10;
}
.result__checkbox-overlay:has(:checked) {
  background-image: linear-gradient(var(--main-c) 0%, var(--main-c) 100%);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 26px 100%;
}

.result__checkbox-overlay::before {
  content: '';
  display: var(--fa-display, inline-block);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Font Awesome 7 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  color: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  text-rendering: auto;
  border-radius: 4px;
  border: solid 1px #ccc;
  background: #fff;
  width: 1.25em;
  height: 1.25em;
  transform: translate(-50%,0);
}
.result__checkbox-overlay:has(:checked)::before {
  content: '\f00c';
  border-radius: 4px;
  border: solid 1px transparent;
  background: transparent;
  font-weight: 700;
}

.result__checkbox-overlay input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.result__checkbox-overlay~* a,
.result__checkbox-overlay~a {
  position: relative;
  z-index: 20;
}
@media (max-width: 767.98px) {
  .result__checkbox-overlay {}
}

.result__bit-price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.result__bit-price>dt {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--btn-radius);
  background: var(--main-c);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  height: 26px;
  padding: 0 12px;
}
.result__bit-price>dd {
  color: var(--main-c);
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
}
.result__bit-price>dd i{
  color: var(--main-c);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
}
@media (max-width: 767.98px) {
  .result__bit-price>dt {
    font-size: 12px;
    line-height: 20px;
  }
  .result__bit-price>dd {
    font-size: 20px;
    line-height: 20px;
  }
  .result__bit-price>dd i{
    font-size: 12px;
    line-height: 20px;
  }
}

.result__btn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: var(--result-item-btn-wrapper-size);
  gap: 8px;
}
.result__btn .btn {
  font-size: 14px;
  max-width: none;
  margin-top: 0;
}
.result__btn .btn a,
.result__btn .btn button,
.result__btn .btn [type="submit"],
.result__btn .btn [type="button"],
.result__btn .btn span,
.result__btn .btn label {
  padding: 0 8px;
}
.result__btn .btn a::after,
.result__btn .btn button::after,
.result__btn .btn [type="submit"]::after,
.result__btn .btn [type="button"]::after,
.result__btn .btn span::after,
.result__btn .btn label::after,
.result__btn .btn a::before,
.result__btn .btn button::before,
.result__btn .btn [type="submit"]::before,
.result__btn .btn [type="button"]::before,
.result__btn .btn span::before,
.result__btn .btn label::before {
  display: none;
}
@media (max-width: 959.98px) {
  .result__btn {
    gap: 8px;
  }
}
@media (max-width: 767.98px) {
  .result__btn {
    width: 100%;
  }
  .result__btn .btn a,
  .result__btn .btn button,
  .result__btn .btn [type="submit"],
  .result__btn .btn [type="button"],
  .result__btn .btn span,
  .result__btn .btn label {
    height: 40px;
  }
}


/* NOTE: 以下の .result系部品は使っていません。 */
.result__desc {}
.result__rate {
  width: 100px;
  height: 25px;
  margin: 5px 0;
  color: #fffc20;
  font-size: 10px;
  font-weight: 700;
  background: var(--main-c);
  border-radius: var(--btn-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center
}
.result__point {
  padding-left: 2px;
  font-size: 15px
}
.result__public {
  width: 100px;
  height: 25px;
  margin: 5px 0;
  color: #ff3a31;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #ff3a31;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center
}
.result__profile {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  font-size: 11px
}
.result__profile li {
  margin-top: 5px;
  color: var(--font-c-gray-dark);
  line-height: 1
}


/**
 * 検索結果下フォーム
 * NOTE: 
**/

.result-search-cond {}
*+.result-search-cond {
  margin-top: 40px;
}

.result-search-cond__formset {
  border-radius: var(--ui-radius-box);
  background: #FBCC34;
  color: var(--font-c);
  padding: 30px;
}
@media (max-width: 767.98px) {
  .result-search-cond__formset {
    padding: 16px;
  }
}

.result-search-cond__formset-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
.result-search-cond__formset-header::before {
  content: '';
  display: block;
  background-image: url(../images/icon-page-note.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 28px;
  height: 28px;
}
.result-search-cond__formset-header>span {
  display: block;
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
}
@media (max-width: 767.98px) {
  .result-search-cond__formset-header>span {
    font-size: 20px;
    line-height: 1.4;
  }
}
.result-search-cond__formset-header>small {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
@media (max-width: 767.98px) {
  .result-search-cond__formset-header>small {
    font-size: 12px;
    line-height: 1.4;
    max-width: 9em;
  }
}

.result-search-cond__formset-body {
  border-radius: var(--ui-radius-box);
  background: #fff;
  padding: 24px 30px;
}
@media (max-width: 767.98px) {
  .result-search-cond__formset-body {
    padding: 16px;
  }
}

.result-search-cond__formset-item {}
*+.result-search-cond__formset-item {
  margin-top: 20px;
}
.result-search-cond__formset-ttl {
  font-weight: 400;
  font-size: 16px;
  margin: 0 0 8px;
}

.result-search-cond__formset-input {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  gap: 20px;
  color: var(--font-c-gray-dark);
  font-weight: 400;
  font-size: 14px;
}
.result-search-cond__formset-date {
  flex: 1 1;
}
@media (max-width: 767.98px) {
  .result-search-cond__formset-date {
    width: 100%;
    flex: initial;
  }
}
.result-search-cond__formset-date>dt {
  margin: 0 0 8px;
}
.result-search-cond__formset-date>dd {}

.result-search-cond__formset-input [type="text"],
.result-search-cond__formset-input [type="date"] {
  border-radius: var(--ui-radius-box);
  border: solid 1px var(--ui-input-c-border);
  background: #fff;
  color: var(--font-c-gray-dark);
  font-size: var(--ui-input-fs);
  width: 100%;
  height: var(--ui-input-height);
  padding: 8px;
}
.result-search-cond__formset-input [type="text"][onfocus*="date"] {
  background-image: url(../images/icon-ui-calendar.svg);
  background-position: right 1em top 50%;
  background-repeat: no-repeat;
  background-size: auto 1em;
}

.result-search-cond__formset-input .select {}
.result-search-cond__formset-input .select>select {
  box-shadow: none;
  border-radius: var(--ui-radius-box);
  border: solid 1px var(--ui-input-c-border);
  background: #fff;
  color: var(--font-c-gray-dark);
  font-size: var(--ui-input-fs);
  width: 100%;
  height: var(--ui-input-height);
}
.result-search-cond__formset-input .select>select>option {}
.result-search-cond__formset-input textarea {
  border-radius: var(--ui-radius-box);
  border: solid 1px var(--ui-input-c-border);
  background: #fff;
  color: var(--font-c-gray-dark);
  font-size: var(--ui-input-fs);
  width: 100%;
  height: 6em;
  padding: 8px;
}

.result-search-cond__cta {
  border-radius: var(--ui-radius-box);
  background: #FEF0C1;
  color: var(--font-c);
  padding: 30px 60px;
}
*+.result-search-cond__cta {
  margin-top: 20px;
}
@media (max-width: 767.98px) {
  .result-search-cond__cta {
    padding: 16px;
  }
}
.result-search-cond__cta-notes {
  text-align: center;
}
.result-search-cond__cta-box-btn {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 20px;
}
*+.result-search-cond__cta-box-btn {
  margin-top: 20px;
}
@media (max-width: 767.98px) {
  .result-search-cond__cta-box-btn {
    gap: 8px;
  }
}
.result-search-cond__cta-box-btn>.btn {
  max-width: none;
  margin-top: 0;
  flex: 1 1;
}
.result-search-cond__cta-box-btn>.btn>a {}
.result-search-cond__cta-box-btn>.btn>button {}


/**
 * カード型リスト
 * NOTE: 
**/
.card__list {
  display: flex;
  flex-wrap: wrap
}
.card__item {
  width: 23.5%;
  margin-right: 2%;
  margin-bottom: 2%;
  padding: 15px;
  background: #fff;
  border: 1px solid #e9eced;
  border-radius: var(--btn-radius);
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  position: relative
}
@media (min-width:768px) {
  .card__item:nth-child(4n) {
    margin-right: 0
  }
}
.card__img {
  width: 100%
}
.card__img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  font-family: 'object-fit: cover;'
}
.card__desc {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.card__ttl {
  margin: 10px 0;
  font-size: 16px;
  font-weight: 700
}
.card__btn .btn--small:first-child {
  margin-bottom: 5px
}
.card__item .btnBox .btn--small {
  width: 49%;
  margin-top: 2%;
}
@media (max-width:959px) {
  .card__img img {
    height: 140px
  }
}
@media (max-width: 767.98px) {
  .card__item {
    width: 49%;
    padding: 10px
  }
  .card__item:nth-child(2n) {
    margin-right: 0
  }
  .card__ttl {
    font-size: 15px
  }
}


/**
 * スレッド型リスト
 * NOTE: 
**/
.thread__list {
  margin-bottom: 30px;
  padding: 40px;
  border: 1px solid #e9eced;
  border-radius: var(--btn-radius);
}
.thread__item {
  border-top: 1px solid #e9eced
}
.thread__item:last-child {
  border-bottom: 1px solid #e9eced
}
.thread__item a {
  padding: 15px;
  display: block;
}
@media (max-width: 767.98px) {
  .thread__list {
    padding: 10px 0;
    margin-bottom: 20px;
  }
}


/**
 * チャット
 * NOTE: 
**/

.chat {
  padding-bottom: 200px;
}
@media (max-width: 959.98px) {
  .chat {
    padding-bottom: 140px;
  }
}

/* chat outline */
/* NOTE: ヘッダー、フレーム、フッターの親ラッパー */
.chat-outline {
  padding: 10px 0;
}
@media (max-width: 767.98px) {
  .chat-outline {
    padding: 5px 0;
  }
}

.chat-outline .c-head {
  margin-bottom: 5px
}
.chat-outline .c-head .c-head__ttl {
  font-size: 18px;
}
@media (max-width: 767.98px) {
  .chat-outline .c-head .c-head__ttl {
    font-size: 16px;
  }
}

/* chat header */
.chat-header {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
  gap: 8px;
}
@media (max-width: 767.98px) {
  .chat-header {
    gap: 4px;
  }
}

.chat-header .c-head {
  width: 100%;
}
.chat-header .chat__status {
  float: none;/* .chat-header内部ではfloat解除 */
}

.chat__status {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  border-radius: var(--btn-radius);
  border: 1px solid #e9eced;
  background: var(--main-c);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  width: auto;
  margin-bottom: 10px;
  padding: 8px;
  float: left;
}
.chat__status .btn {
  color: #fff;
  margin: 0;
  max-width: none;
}
.chat__status .btn > * {
  height: auto;
}
.chat__status input {
  color: #fff;
}
@media (max-width: 767.98px) {
  .chat__status {
    font-size: 10px;
    width: auto;
    margin-bottom: 5px;
    padding: 6px;
  }
  .chat__status .btn,
  .chat__status input {
    font-size: 12px;
  }
  .chat__status .btn > * {
    font-size: inherit;
  }
}

.chat-inner body {
  /* 不使用 */
  margin: 0 !important;
}

/* chat iframe */
.chat-inner .inner {
  /* 不使用 */
  overflow: hidden;
}

/* chat iframe */
.chat-inner .ifrm {
  width: 100%;
  min-height: 55vh;
  padding: 10px 0;
  background: #fff;
  border: 1px solid #e9eced;
  border-radius: var(--btn-radius);
}
@media (max-width: 767.98px) {
  .chat-inner .ifrm {
    min-height: 50vh;
    padding: 5px 0;
  }
}
@media (max-width: 320.98px) {
  .chat-inner .ifrm {
    min-height: 42vh;
    padding: 0;
  }
}

/* chat 吹き出し */
.left_balloon, .right_balloon {
  margin: 10px 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
@media (max-width: 767.98px) {
  .left_balloon, .right_balloon {
    margin: 18px 12px;
  }
}
.right_balloon {
  justify-content: flex-end;
}
.faceicon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .faceicon img {
    width: 25px;
    height: 25px;
  }
}
.right_balloon .faceicon {
  margin-left: 25px;
  order: 2 !important;
  display: none
}
.left_balloon .faceicon {
  margin-right: 25px;
}
@media (max-width: 767.98px) {
  .left_balloon .faceicon {
    margin-right: 12px;
  }
}
.balloon_div_right {
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 10px 13px 10px 18px;
  border-radius: 12px;
  background: #c5f281;
  box-sizing: border-box;
  margin: 0 !important;
  line-height: 1.5;
}
.left_balloon .balloon_div_right {
  background: #eee;
}
.system_balloon {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 10px 13px 10px 18px;
  border-radius: 12px;
  background: #c9efff;
  box-sizing: border-box;
  line-height: 1.5;
}
.but_send {
  background-color: #99DEED;
  color: #fff;
  border-radius: 4px !important;
  margin: 5px 10px 5px 0;
  border-left: none !important;
}
.but_send:hover {
  background-color: var(--main-c);
}
.but_agree {
  border-left: none !important;
}
.enterprise {
  background: #ddd !important;
}
@media (max-width: 767.98px) {
  .balloon_div_right, .system_balloon {
    padding: 8px 13px 10px 15px;
  }
}
.balloon_div_right p, .system_balloon p {
  width: 100%;
  margin: 0;
  display: block;
  font-size: 14px;
}
@media (max-width: 767.98px) {
  .balloon_div_right p, .system_balloon p {
    font-size: 12px;
  }
}
.balloon_div_right p:first-child, .system_balloon p:first-child {
  margin-top: 0 !important;
}
.balloon_div_right::after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
  /*   margin-top:-3px;  */
}
.left_balloon .enterprise::after {
  left: -26px;
  border-right: 22px solid #ddd !important;
}
.left_balloon .balloon_div_right::after {
  left: -26px;
  border-right: 22px solid #eee;
}
.right_balloon .balloon_div_right::after {
  right: -26px;
  border-left: 22px solid #c5f281;
}
@media (max-width: 767.98px) {
  .left_balloon .balloon_div_right::after {
    top: 4px;
    left: -20px;
    border-right: 22px solid #eee;
  }
  .right_balloon .balloon_div_right::after {
    top: 4px;
    right: -20px;
    border-left: 22px solid #c5f281;
  }
}
.balloon_sub {
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap
}
.balloon_name {
  margin-right: 5px;
  font-size: 13px;
  font-weight: 700;
  display: block;
}
.balloon_date {
  margin-right: 5px;
  color: #7d7d7d;
  font-size: 11px
}
.balloon_kidoku {
  padding: 0 5px;
  font-size: 10px;
  border: 1px solid #B4BFC2;
  border-radius: 3px;
}
@media (max-width: 767.98px) {
  .balloon_name {
    width: 100%;
  }
  .balloon_name, .balloon_date {
    font-size: 10px;
  }
  .balloon_kidoku {
    font-size: 8px;
  }
}

/* chat footer */
.chat-footer {
  position: relative;
}
.chat-footer textarea {
  max-width: none;
  width: 100%;
  height: 6em; /* ここは適度に */
  padding-bottom: 40px;
}

.submit__area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  bottom: 6px;
  right: 20px;
}

.chat__submit [type="submit"],
.chat__submit [type="button"],
.chat__submit [type="file"] {
  border-left: 1px solid #e9eced;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  width: auto;
  height: 40px;
  padding: 0 1ex;
}
.btn-file {
  height: 40px;
}
.btn-file::before {
  content: "";
  width: 40px;
  height: 40px;
  margin-right: 10px;
  background: url("../images/icon-clip.png") center center / 100% no-repeat;
  display: inline-block;
  position: relative;
  top: 0;
  right: 0;
}
@media (max-width: 767.98px) {
  .chat-footer textarea {
    max-height: 40vh;
    padding: 15px 10px 40px;
  }
  .chat-footer textarea::placeholder {
    font-size: 13px;
    line-height: 2
  }
  .submit__area {
    right: 10px;
  }
  .btn-file {
    height: 30px;
  }
  .btn-file::before {
    width: 30px;
    height: 30px;
    margin-right: 0;
  }
  .chat__submit [type="submit"],
  .chat__submit [type="button"],
  .chat__submit [type="file"] {
    font-size: 10px;
    height: 30px;
    padding: 0 10px;
  }
}


/**
 * pagination
 * NOTE: 
**/
.pagination {}
.pagination__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-end
}
.pagination span, .pagination a {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  background: #fafafa;
  border-radius: var(--btn-radius);
  display: flex;
  align-items: center;
  justify-content: center
}
.pagination span:last-child, .pagination a:last-child {
  margin-right: 0
}
.pagination .current, .pagination a:hover {
  color: #fff;
  background: var(--main-c)
}
@media (max-width: 767.98px) {
  .pagination {
    padding: 20px 0
  }
}
@media (max-width: 320.98px) {
  .pagination {
    font-size: 11px
  }
  .pagination span, .pagination a {
    padding: 8px 10px 8px 10px
  }
  .pagination .current {
    padding: 8px 10px 8px 10px
  }
}


/**
 * outline-head
 * NOTE: 詳細ページのヘッダー部分
**/

/* outline header */
.outline-head {
  background: #fff;
}

.outline-head__body {
  display: grid;
  grid-template-columns: 3fr 4fr 2fr;
  gap: 40px;
}
@media (max-width: 959.98px) {
  .outline-head__body {
    grid-template-columns: 1fr 2fr;
    gap: 20px;
  }
}
@media (max-width: 767.98px) {
  .outline-head__body {
    grid-template-columns: 1fr 2fr;
    gap: 16px;
  }
}


.outline-head__img {}
.outline-head__img img {
  background: #fff;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 20 / 11;
}

.outline-head__desc {
  display: flex;
  flex-flow: column;
  gap: 20px;
}
@media (max-width: 959.98px) {
  .outline-head__desc {
    gap: 16px;
  }
}
@media (max-width: 767.98px) {
  .outline-head__desc {
    gap: 8px;
  }
}


.outline-head__top {
  display: flex;
  flex-flow: column;
  gap: 8px;
  margin: 0;
}
@media (max-width: 959.98px) {
  .outline-head__top {
    gap: 8px;
  }
}
@media (max-width: 767.98px) {
  .outline-head__top {
    gap: 4px;
  }
}

.outline-head__bottom {
  display: flex;
  flex-flow: column;
  gap: 8px;
  margin: 0;
}
@media (max-width: 959.98px) {
  .outline-head__bottom {
    gap: 8px;
  }
}
@media (max-width: 767.98px) {
  .outline-head__bottom {
    gap: 4px;
  }
}

.outline-head__name {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
}
.outline-head__ttl {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.outline-head__txt {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
}


.outline-head__btnarea {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
}
@media (max-width: 959.98px) {
  .outline-head__btnarea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
  }
}
@media (max-width: 767.98px) {
  .outline-head__btnarea {
    grid-column: 1 / -1;
  }
}

.outline-head__btn {
  margin: 0;
}

@media (max-width: 959.98px) {}
@media (max-width: 767.98px) {}

.outline-head__rate {
  width: 100px;
  height: 25px;
  margin: 5px 0;
  color: #fffc20;
  font-size: 10px;
  font-weight: 700;
  background: var(--main-c);
  border-radius: var(--btn-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center
}
.outline-head__point {
  padding-left: 2px;
  font-size: 15px
}

.outline-head__info {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-end;
  align-items: flex-end;
  font-feature-settings: "palt";
  font-size: 11px;
  line-height: 1.4;
  gap: 4px;
}
.outline-head__info li {
  color: var(--font-c-gray-dark);
  font-feature-settings: "palt";
  font-size: 11px;
  line-height: 1.4;
}

.outline-head__blacklist {
  font-feature-settings: "palt";
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
  margin: 0;
}



/**
 * outline
 * NOTE: 詳細ページの本文
**/

/* outline section */
.outline {}

.outline__ttl {
  color: var(--font-c);
  margin: 0 0 30px;
}
*+.outline__ttl {
  margin-top: 40px;
}
.outline__ttl {
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}
@media (max-width: 959.98px) {
  .outline__ttl {
    font-size: 20px;
  }
}
@media (max-width: 767.98px) {
  .outline__ttl {
    font-size: 20px;
  }
}



.outline__gallery ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.outline__gallery img {
  background: #fff;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 16 / 9;
}
@media (max-width: 959.98px) {
  .outline__gallery {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
}
@media (max-width: 767.98px) {
  .outline__gallery {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.outline .tableset {
  border-radius: var(--ui-radius-box);
  border: 1px solid var(--font-c);
}


/**
 * knowledge
 * NOTE: 
**/

/* knowledge section */
.knowledge {}

/* knowledge list wrapper */
.knowledge__list {
  --knowledge-list-gap: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-content: stretch;
  align-items: stretch;
  gap: var(--knowledge-list-gap);
}
@media (max-width: 959.98px) {
  .knowledge__list {
    --knowledge-list-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--knowledge-list-gap);
  }
}
@media (max-width: 767.98px) {
  .knowledge__list {
    --knowledge-list-gap: 32px;
    grid-template-columns: 1fr 1fr;
    gap: var(--knowledge-list-gap) 16px;
  }
}

/* knowledge list item */
.knowledge__item {}
@media (min-width: 768px) {
  .knowledge__item {
    width: auto;
    margin: 0;
  }
}
@media (max-width: 767.98px) {
  .knowledge__item {
    width: auto;
    margin: 0;
  }
}

.knowledge__img img {
  border-radius: var(--btn-radius);
  height: 160px;
  object-fit: cover;
}
@media (max-width: 959.98px) {
  .knowledge__img img {
    height: 100px;
  }
}

.knowledge__desc {
  margin-top: 10px;
}
.knowledge__ttl {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
}
.knowledge__txt {
  display: none;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 5px;
}

.knowledge__txt--more {
  display: none;
  color: var(--main-c);
}

.knowledge__more {
  text-align: right;
}
*+.knowledge__more {
  margin-top: 32px;
}
@media (max-width: 959.98px) {
  .knowledge__more {
    text-align: right;
  }
  *+.knowledge__more {
    margin-top: 32px;
  }
}
@media (max-width: 767.98px) {
  .knowledge__more {
    text-align: right;
  }
  *+.knowledge__more {
    margin-top: 32px;
  }
}



/**
 * mypage blog list
 * NOTE: 
**/

#column__main {
  width: 100%;
  max-width: 700px;
  margin: 0 auto
}
.column__ttl {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700
}
.column__inner {
  padding: 30px;
  border: 1px solid #e9eced;
  border-radius: var(--btn-radius);
  line-height: 2;
}
.column__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--font-c-gray-dark);
}
.column__img {
  margin: 20px 0;
}
@media (max-width: 767.98px) {
  .column__inner {
    padding: 10px;
  }
  .column__ttl {
    font-size: 18px
  }
  #column__main .btn {
    font-size: 12px
  }
}



/**
 * about page
 * NOTE: 
**/

[id="about"] section {
  padding-block: 80px;
}

.about__ttl {
  margin-bottom: 60px;
  font-size: 38px;
  font-weight: 700;
  text-align: center;
}
.about__txt {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  line-height: 2
}
.about__txt p {
  margin-bottom: 20px
}
.about-section__ttl {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}



/**
 * component solve
 * NOTE: 
**/

.solve__item {
  width: 100%;
  margin-bottom: 40px;
}
.solve__item:last-child {
  margin-bottom: 0
}
.solve__img {
  width: calc((100% - 80px)/2);
}
.solve__img img {
  width: 100%;
  height: 300px;
  border-radius: var(--btn-radius);
  object-fit: cover;
}
.even .solve__desc {
  order: 1;
}
.solve__desc {
  width: calc((100% - 80px)/2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.solve__num {
  color: #818393;
}
.solve__ttl {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}
.solve__txt {
  text-align: left;
}
@media (max-width: 959.98px) {
  .solve__desc, .solve__img {
    width: calc((100% - 20px)/2);
  }
}
@media (max-width: 767.98px) {
  .solve__item {
    margin-bottom: 35px;
  }
  .solve__desc, .solve__img {
    width: 100%;
  }
  .solve__desc {
    margin-top: 10px;
    order: 1;
  }
  .solve__ttl {
    font-size: 20px;
  }
  .solve__img img {
    height: 220px;
  }
}




/**
 * component flow
 * NOTE: --basewrap-widthにブレークポイントを合わせてあるので注意
**/
.flow__list {
  --flow-gap: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--flow-gap);
}
@media (max-width: 1140.98px) {
  .flow__list {
    --flow-gap: 32px;
    gap: var(--flow-gap);
  }
}
@media (max-width: 767.98px) {
  .flow__list {
    --flow-gap: 32px;
    gap: var(--flow-gap);
  }
  .swipe .flow__list {
    width: 200%;
  }
}
@media (max-width: 480.98px) {
  .flow__list {
    --flow-gap: 32px;
    gap: var(--flow-gap);
  }
  .swipe .flow__list {
    width: 300%;
  }
}

.flow__item {
  container-type: inline-size;
  width: auto;
  position: relative;
}
*+.flow__item::before {
  content: '';
  display: block;
  background-image: url(../images/flow-arrow.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 40px;
  position: absolute;
  inset: 50cqw auto auto calc( var(--flow-gap) * -0.5 );
  z-index: 1;
  transform: translate(-50%,-50%);
}

.flow__img {
  width: 100%;
  margin: 0 auto 16px;
}
.flow__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.flow__desc {
  text-align: center;
}
.flow__ttl {
  color: var(--main-c);
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
}
.flow__txt {
  font-feature-settings: "palt";
  font-size: 15px;
  line-height: 1.4;
}
*+.flow__txt {
  margin-top: 1em;
}
@media (max-width: 1140.98px) {
  .flow__ttl {
    font-size: 20px;
  }
  .flow__txt {
    font-size: 16px;
  }
}

/**
 * component ご利用ガイド
 * NOTE: 
**/
.guide__item {
  width: 100%;
  margin-top: 50px;
  display: flex;
  align-items: flex-start;
}
.guide__item:first-child {
  margin-top: 0
}
.guide__img {
  padding-right: 40px;
}
.guide__img img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 12px;
  background: #faf9f6;
}
.guide__desc {
  width: 100%;
  padding: 0 0 20px 40px;
  border-left: 1px solid #e7e6e6;
}
.guide__ttl {
  margin: 20px 0 10px;
  font-size: 22px;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .guide__item {
    margin: 40px 0;
    flex-wrap: wrap
  }
  .guide__img {
    width: 100%;
    padding: 0;
  }
  .guide__img img {
    display: block;
    width: 240px;
    height: 240px;
    margin: 0 auto;
  }
  .guide__desc {
    width: 100%;
    padding: 0;
    border: none;
  }
  .guide__ttl {
    font-size: 18px
  }
}



/**
 * component faq
 * NOTE: 
**/
.faq__area {
  margin-bottom: 80px
}
.faq__anchor {
  margin-bottom: 50px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.faq__link {
  margin-right: 30px;
}
.faq__link a {
  width: 100%;
  height: 45px;
  padding: 0 5px;
  color: #a5a5a5;
  font-size: 18px;
  border-bottom: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq__link a:hover, .faq__link a.is-current {
  color: var(--main-c);
}
@media (max-width: 767.98px) {
  .faq__link {
    width: 32.333333%;
    margin-right: 1.5%;
  }
  .faq__link:nth-child(3n) {
    margin-right: 0
  }
  .faq__link a {
    font-size: 12px;
  }
}

.listAccordion {
  margin: 0 auto;
}

.listAccordion__Q,
.listAccordion__A {
  display: block;
  border-radius: var(--btn-radius);
  border: 2px solid var(--font-c);
  background: #fff;
  margin: 0;
  padding: 24px 5px 24px 75px;
  position: relative;
  transition:
    border 0.1s ease,
    border-radius 0.1s ease,
    color 0.4s ease,
    opacity 0.4s ease;
}

.listAccordion__Q {
  border-radius: var(--btn-radius);
}
.listAccordion__A {
  border-radius: var(--btn-radius);
  border-color: #fff;
  color: #fff;
  padding-top: 0;
  opacity: 1;
}
.listAccordion__Q.is--active {
  border-radius: var(--btn-radius) var(--btn-radius) 0 0;
  border-bottom-color: #fff;
  border-bottom-width: 0;
}
.listAccordion__Q.is--active + .listAccordion__A {
  border-radius: 0 0 var(--btn-radius) var(--btn-radius);
  border-top-color: #fff;
  border-right-color: var(--font-c);
  border-bottom-color: var(--font-c);
  border-left-color: var(--font-c);
  border-top-width: 0;
  color: var(--font-c);
  opacity: 1;
}
@media (max-width: 568.98px) {
  .listAccordion__Q,
  .listAccordion__A {
    padding-left: 50px;
    padding-right: 50px;
  }
}

.listAccordion__Q {
  font-weight: 700;
  margin-top: 20px;
  padding-right: 75px;
  cursor: pointer;
}
.listAccordion__Q:hover {
  background: #fafafa;
}

/*開閉アイコン */
.listAccordion__Q::before {
  content: '\f107';
  display: var(--fa-display, inline-block);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Font Awesome 7 Free";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  color: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  text-rendering: auto;
  position: absolute;
  right: 30px;
  top: 50%;
  z-index: 1;
  transform: translate(0,-50%);
  transition: all 0.4s ease;
  pointer-events: none;
}
.listAccordion__Q.is--active::before {
  transform: translate(0,-50%) scaleY(-1);
}
@media (max-width: 768.98px) {
  .listAccordion__Q::before {
    right: 15px;
  }
}

.listAccordion__A {
  background: #fff;
  margin: 0;
}

.listAccordion .iconq,
.listAccordion .icona {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background: #fff;
  font-size: 20px;
  font-weight: 700;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 20px;
  transition: all 0.4s ease;
}
.listAccordion .iconq::before,
.listAccordion .icona::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 41.33%;
  width: 100%;
  height: 100%;
}
.listAccordion .iconq {
  background: var(--main-c);
  top: 15px;
}
.listAccordion .icona {
  background: var(--font-c);
  top: 0;
}
.listAccordion__A .icona {
  background: #fff;
}
.listAccordion__Q.is--active + .listAccordion__A .icona {
  background: var(--font-c);
}

.listAccordion .iconq::before {
  background-image: url(../images/icon-faq-Q.svg);
}
.listAccordion .icona::before {
  background-image: url(../images/icon-faq-A.svg);
}

@media (max-width: 568.98px) {
  .listAccordion .iconq,
  .listAccordion .icona {
    left: 5px;
  }
}



/**
 * ログインページ
 * NOTE: 
**/
.page-login {}
.page-login [data-header],
.page-login .footer {
  display: none;
}
.page-login {}
.page-login .breadcrumb {
  display: none;
}
.page-login {}
.login .l-container {
    max-width: 768px;
}



/**
 * 利用規約ページ
 * NOTE: その他流用可能
**/



/**
 * 利用規約ページ
 * NOTE: その他流用可能
**/
.terms__article {
  width: 100%;
}
@media (min-width: 768px) {
  .terms__article {
    border-radius: var(--btn-radius);
    border: 1px solid #e9eced;
    background: #fff;
    padding: 40px 40px 0;
  }
}

.terms__ttl {
  font-size: 22px;
  font-weight: 700;
}
.terms__item {
  margin-bottom: 40px;
}
.terms__txt {
  margin-top: 10px;
}
@media (max-width: 767.98px) {
  .terms__ttl {
    font-size: 18px;
  }
}



/**
 * プライバシーポリシーページ
 * NOTE: その他流用可能
**/
.policy__article {
  width: 100%;
}
@media (min-width: 768px) {
  .policy__article {
    border-radius: var(--btn-radius);
    border: 1px solid #e9eced;
    background: #fff;
    padding: 40px 40px 0;
  }
}

.policy__ttl {
  font-size: 22px;
  font-weight: 700;
}
.policy__item {
  margin-bottom: 40px;
}
.policy__txt {
  margin-top: 10px;
}
@media (max-width: 767.98px) {
  .policy__ttl {
    font-size: 18px;
  }
}

/* 2026-10-09 スマホで入力欄をタップしたときに iPhone が自動で拡大しないよう、入力欄の文字は16px以上にする（RS-003） */
@media (max-width: 767.98px) {
  html body input[type="text"], html body input[type="email"], html body input[type="tel"], html body input[type="number"], html body input[type="password"], html body input[type="date"], html body input[type="search"], html body input:not([type]), html body select, html body textarea,
  html body .select select, html body .select__dummy-select, html body .result-search-cond__formset-input input, html body .result-search-cond__formset-input select {
    font-size: 16px;
  }
}

/* 2026-10-14 査定ウィザード STEP1 の追加項目（ボディカラーの色見本・写真プレビュー） */
.fa-req { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:3px; background:#e53935; color:#fff; font-size:11px; font-weight:700; vertical-align:middle; }
.fa-color-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; width:100%; flex:1 1 100%; }
.fa-color { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer; font-size:12px; line-height:1.3; text-align:center; }
.fa-color input { position:absolute; opacity:0; pointer-events:none; }
.fa-color i { display:block; width:30px; height:30px; border-radius:50%; border:1px solid rgba(0,0,0,.2); }
.fa-color.is-checked { border-color:#e53935; box-shadow:0 0 0 2px #e53935 inset; font-weight:700; }
.fa-color:has(input:checked) { border-color:#e53935; box-shadow:0 0 0 2px #e53935 inset; font-weight:700; }
.fa-photo-preview { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fa-photo-preview img { width:72px; height:72px; object-fit:cover; border-radius:6px; border:1px solid #ddd; }
.o2-photos { display:flex; flex-wrap:wrap; gap:8px; }
.o2-photos a img { width:120px; height:90px; object-fit:cover; border-radius:6px; border:1px solid #ddd; }