@charset "UTF-8";

/* ----------------------------------------------カンタン在庫確認-------------------------------------------------- */

/**
 * 全体の設定
 * 背景色、縦並びの設定
 */
.kantan_inquiry {
    display: block;
    background-color: #FFFBD6;
    width: auto;
    padding: 24px;
    margin-bottom: 20px;
}

/**
 * 表示非表示切替用
 */
.kantan_inquiry .display-off {
    display: none;
}

/**
 * 見出し
 */
.kantan_inquiry p {
    text-align: left;
    letter-spacing: 0px;
    color: #1F3641;
    font-size: 18px;
    font-weight: bold;
}

/**
 * 1行の設定
 */
.kantan_inquiry ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/**
 * 1列の設定
 */
.kantan_inquiry li {
    display: flex;
    flex-direction: column;    
}

/**
 * 入力欄、セレクトボックス(プレースホルダー含む)の設定
 *  position: relative;はマークの位置をabsoluteで指定するために基点として設定
 */
.kantan_inquiry .input, 
.kantan_inquiry .select {
    width: 310px;
    height: 60px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    position: relative;
}

/**
 * 入力欄、セレクトボックス(プレースホルダー除く)の共通設定
 * ここで枠線を消して要素を1つに見せる
 * 
 */
.kantan_inquiry .input input,
.kantan_inquiry .select select {
    height: 40px;
    font: normal normal normal 14px/21px Meiryo;
    border: none;
    border-radius: 10px;
    outline: none;
    padding-left: 10px;
}

/**
 * セレクトボックス(プレースホルダー除く)の設定
 * 枠線を消して要素を1つに見せる
 * デフォルトの矢印を消す
 */
.kantan_inquiry .select select {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    -webkit-appearance: none;
    appearance: none;
}

/**
 * セレクトボックスの矢印の実装
 * select要素に疑似要素を設定できないため
 * 親要素のafterとして実装する
 * バリデーションチェック後はチェックマークや×マークを表示するため除く
 */
.kantan_inquiry .select:not(.is-error):not(.is-ok):after {
    align-self: center;
    border-bottom: solid 3px #707070;
    border-right: solid 3px #707070;
    content: '';
    width: 9px;
    height: 9px;
    position: absolute;
    right: 13px;
    top: 32px;
    transform: rotate(45deg);
}

/**
 * プレースホルダーの設定
 */
.kantan_inquiry .input .placeholder, 
.kantan_inquiry .select .placeholder {
    margin-left: 10px;
    margin-top: 5px;
    font: normal normal normal 12px Meiryo;
    color: #888888;
    display: flex;
    align-items: center;
}

/**
 * 必須マーク、任意マーク共通設定
 */
.kantan_inquiry .input .required::after, 
.kantan_inquiry .select .required::after,
.kantan_inquiry .input .optional::after,
.kantan_inquiry .select .optional::after {
    margin-left: 6px;
    margin-bottom: 2px;
    padding: 0.5px 3px  0.5px 3px;
    font: normal normal normal 8px Meiryo;
    color: #FFFFFF;
    border-radius: 3px;
}


/**
 * 必須マーク
 */
.kantan_inquiry .input .required::after, 
.kantan_inquiry .select .required::after {
    content: "必須";
    background: #EE3440 0% 0% no-repeat padding-box;
}

/**
 * 任意マーク
 */
.kantan_inquiry .input .optional::after,
.kantan_inquiry .select .optional::after {
    content: "任意";
    background: #888888 0% 0% no-repeat padding-box;
}

/**
 * カンタン在庫確認ボタン全体の設定
 * プライバシーポリシー含む
 * ul要素に設定される想定
 */
.kantan_inquiry .kantan_toiawase {
    justify-content: center;
    align-items: center;
}

/**
 * プライバシーポリシーのアンカーリンクの設定
 */
.kantan_inquiry .kantan_toiawase a {
    color: #1F3641;
    text-decoration: underline;
    cursor: pointer;
}

/**
 * カンタン在庫確認ボタンの設定
 */
.kantan_inquiry .kantan_toiawase button[type=button] {
    padding: 10px;
    font: normal normal bold 14px/21px Meiryo;
    border: 1px solid #FB4809;
    background: transparent linear-gradient(180deg, #FF6E3F 0%, #FC491E 100%) 0% 0% no-repeat padding-box;
    color: #FFFFFF;
    border-radius: 4px; 
}

/**
 * カンタン在庫確認ボタンのマウスオーバー時
 */
.kantan_inquiry .kantan_toiawase button[type=button]:hover {
    border: 1px solid #f5d3cb;
    background: #FFFBFA;
    background: linear-gradient(to bottom, #FFFBFA 10%, #FEE8E2 90%);
    color: #fb4809;
    text-decoration: none
}


/**
 * カンタン在庫確認ボタン非活性時の設定
 */
.kantan_inquiry .kantan_toiawase button[type=button]:disabled,
.kantan_inquiry .kantan_toiawase button[type=button]:disabled:hover {
    border: 1px solid #CCCCCC;
    background: #CCCCCC 0% 0% no-repeat padding-box;
    color: #747474;
    text-decoration: none;
}

/**
 * FLEXからの新着、お得情報などのお知らせを受け取るチェックボックス全体
 * ul要素に設定される想定
 */
.kantan_inquiry .request_info {
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

/**
 * FLEXからの新着、お得情報などのお知らせを受け取るチェックボックスの1行の設定
 */
.kantan_inquiry .request_info li {
    flex-direction: row;
}

/**
 * 入力バリデーションOK時の枠線色
 * jsから設定される
 */
.kantan_inquiry .is-ok {
    border:1px solid #008000;
}

/**
 * 入力バリデーションOK時のマーク
 */
.kantan_inquiry .is-ok::after {
    align-self: center;
    border-left: 4px solid #008000;
    border-bottom: 4px solid #008000;
    content: '';
    width: 10px;
    height: 5px;
    position: absolute;
    right: 13px;
    top: 32px;
    transform: rotate(-45deg);
}

/**
 * 入力バリデーションNG時の枠線
 * jsから設定される
 */
.kantan_inquiry .is-error {
    border: 1px solid #EE3440;
}

/**
 * 入力バリデーションNG時のマーク
 */
.kantan_inquiry .is-error::before {
    align-self: center;
    border-left: 4px solid #EE3440;
    border-bottom: 4px solid #EE3440;
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: 13px;
    top: 40px;
    transform: rotate(135deg);
}

/**
 * 入力バリデーションNG時のマーク
 */
.kantan_inquiry .is-error::after {
    align-self: center;
    border-left: 4px solid red;
    border-bottom: 4px solid red;
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: 13px;
    top: 30px;
    transform: rotate(-45deg);
}

/**
 * バリデーションエラーメッセージ
 * 文字色：赤
 * 初期表示：非表示
 */
.kantan_inquiry li ~ .error-msg {
    display: block;
    width: 310px;
    font: normal normal normal 12px/18px Meiryo;
    color: #EE3440;
    visibility: hidden;
}

/**
 * バリデーションエラーメッセージ
 * バリデーションチェックでNGの場合、errorクラスが追加されるため
 * errorクラスを検出したときにvisibility: hiddenを解除する
 */
.kantan_inquiry .is-error ~ .error-msg {
    visibility: visible;
}

/* ----------------------------------------------カンタン在庫確認-------------------------------------------------- */
/* ----------------------------------------------カンタン在庫確認完了---------------------------------------------- */
.kantan_inquiry_complete,
.kantan_inquiry_complete_error {
    display: block;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.8);
    width: 640px;
    padding-top: 10px;
    padding-bottom: 24px;
    text-align: center;
}

.kantan_inquiry_complete ul,
.kantan_inquiry_complete_error ul {
    display: block;
}

.kantan_inquiry_complete li,
.kantan_inquiry_complete_error li {
    display: block;
    margin-top: 10px;
}
.kantan_inquiry_complete li:has(.message3) {
    margin-top: 20px;
}
.kantan_inquiry_complete .message1,
.kantan_inquiry_complete_error .message1 {
    font: normal normal bold 20px/30px Meiryo;
    text-align: center;
}
.kantan_inquiry_complete_error .message1 {
    color: #EE3440;
}
.kantan_inquiry_complete .message2,
.kantan_inquiry_complete_error .message2 {
    font: normal normal normal 14px/21px Meiryo;
}
.kantan_inquiry_complete .message3 {
    font: normal normal normal 12px/18px Meiryo;
}

/* ----------------------------------------------カンタン在庫確認完了---------------------------------------------- */
/* ----------------------------------------------お電話でのお問い合わせ-------------------------------------------- */

/**
 * お電話でのお問い合わせ全体
 */
.tel_inquiry {
    display: block;
    background-color: #FFFBD6;
    margin-bottom: 20px;
}

/**
 * お電話でのお問い合わせ1行の設定
 */
.tel_inquiry ul {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/**
 * お電話でのお問い合わせの左側のテキスト部分の設定
 */
.tel_inquiry .left-text {
    display: block;
    margin-right: 10px;
}
/* ----------------------------------------------お電話でのお問い合わせ-------------------------------------------- */
/* ----------------------------------------------閲覧履歴---------------------------------------------------------- */
@media only screen and (max-width: 480px){
    .detail-browsingHistory {
        display: flex;
        overflow-x: scroll;
        position: relative;
        justify-content: space-between;
    }
    
    .detail-browsingHistory .item {
        border: 1px solid #c9c9c9;
        border-radius: 6px;
        min-width: 170px;
        width: 50%;
    }
    
    /**
     * 隣接する要素の間隔を設定
     */
    .detail-browsingHistory .item + .item {
        margin-left: 14px;
    }
    
    /**
     * 車種タイトル
     */
    .detail-browsingHistory .item .tittle {
        overflow: hidden;
        width: 160px;
        margin: 10px 0 0 5px;
    }
    .detail-browsingHistory .item .tittle a {
        font-size: 14px;
        line-height: 22px;
        font-weight: bold;
        color: #0055b8;
        display: block;
        height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /**
     * 車種グレード
     */
    .detail-browsingHistory .item .tittle h4 {
        font-size: 12px;
        line-height: 20px;
        font-weight: normal;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /**
     * 車両画像
     */
    .detail-browsingHistory .item img {
        height: 136px;
        object-fit: cover;
        width: 100%;
    }
    
    /**
     * 在庫確認・見積依頼ボタン
     */
    .detail-browsingHistory .item .toiawase_d a {
        width: 90%;
        padding: 10px 5px 10px 5px;
        margin: 15px 8px 0 8px;
    }

    /**
     * 車両データ(全体)
     */
    .detail-browsingHistory .item .item-data {
        margin-top: 15px;
    }
    
    /**
     * 車両データ(1行分)
     */
    .item-data li {
        width: 100%;
        height: 50px;
        padding: 8px;
    }
    
    /**
     * 車両データ(小見出し)
     */
    .item-data li p {
        font-weight: bold;
        font-size: 14px;
    }
    
    /**
     * 車両データ(奇数行)
     */
    .item-data li:nth-child(even) {
        background-color: #f5f5f5; 
    }
    
    /**
     * 車両データ(偶数行)
     */
    .item-data li:nth-child(odd) {
        background-color: #fff;
    }
    
    /**
     * 閲覧履歴をもっと見るリンク
     */
    .detail-browsingHistory + a {
        display: block;
        margin-top: 20px;
        text-align: right;
    }
    .detail-browsingHistory + a::after {
        content: " >";
    }
}
/* ----------------------------------------------閲覧履歴---------------------------------------------------------- */
/* ------------------------------------閲覧中人数、検討中人数、総閲覧回数表示欄------------------------------------ */
.engage-float ul {
  display: flex;
  justify-content: space-between
}
.engage-float ul li {
  flex: 0 0 33%;
  padding: 4px 0;
  background-color: #FFF;
}
.engage-float .activeuser {
  display: inline-block;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  width: 1.125em;
}
@media only screen and (min-width: 481px){
    .engage-float {
        display: block;
    }
    
    .engage-float ul li {
        text-align: end;
    }
}

@media only screen and (max-width: 480px){
    .engage-float {
      position: fixed;
      width: 100%;
      bottom: -30px;
      background-color: rgba(0, 0, 0, 0.65);
      z-index: 1000;
      overflow: hidden;
    }
    
    .engage-float ul li {
        padding: 4px 8px;
    }
}
/* ------------------------------------閲覧中人数、検討中人数、総閲覧回数表示欄------------------------------------ */

/* ------------------------------------画面下部のフローティングエリア------------------------------------ */
.float-under {
    display: block;
    position: sticky;
    background-color: #FFFBD6;
    border-top: 1px solid #CCC;
    z-index: 1000;
    bottom: 0px;
}

/**
 * お電話でのお問い合わせ
 */
.float-under .inquiry-tel {
    display: flex;
    flex-direction: column;
}

/**
 * QRコード
 */
.float-under .tel-qr {
    
    display: flex;
    flex-direction: column;
}
.float-under .tel-qr img {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.float-under .tel-qr img + p {
    margin-top: 3px;
    font-size: 10px;
}
/**
 * オンライン問い合わせ
 */
.float-under .inquiry-button {
    display: flex;
    flex-direction: column;
}
.float-under .inquiry-button p {
    font-weight: bold;
}
.float-under .inquiry-button .inquiry-button__inner {
    display: flex;
    justify-content: space-between;
}
 /**
  * オンライン問い合わせ
  */
.float-under .inquiry-button .inquiry__button {
    height: 40px;
    padding: 0 10px;
    margin: 5px 0;
}
.float-under .inquiry-button .inquiry__button + .inquiry__button {
    margin-left: 10px;
}
/**
 * ボタンの中をテキストを中央揃えにする
 */
.float-under .inquiry-button .inquiry__button > div {
    margin: 0 auto;
    display: flex;
    align-items: center;
}

/**
 * オリコ審査申し込みボタンの色をここだけ変える
 * hoverと通常時を入れ替える
 */
.float-under .inquiry-button .inquiry__button--loan {
    border: 1px solid #ff9800;
    background: linear-gradient(to bottom, #ffc107 10%, #ff9800 90%);
    color: #FFF;
}
.float-under .inquiry-button .inquiry__button--loan .inquiry__icon__loan {
    fill: #FFF;
}
.float-under .inquiry-button .inquiry__button--loan:hover {
    border: 1px solid #ffc107;
    background: linear-gradient(to bottom, #ffffd2 10%, #fff594 90%);
    color: #ff5722;
}
.float-under .inquiry-button .inquiry__button--loan:hover .inquiry__icon__loan {
    fill: #ff9800;
}
/* ------------------------------------画面下部のフローティングエリア------------------------------------ */