/* 車両詳細ページ専用修正CSS */

/* 1. 本体価格のstrongフォントサイズ修正 - Lightning親テーマに負けない最強優先度 */
html body .detail__price h3 strong,
html body.page-id-178 .detail__price h3 strong,
html body.page-template-page-detail .detail__price h3 strong,
html body[class*="detail"] .detail__price h3 strong,
#searchApp .detail__price h3 strong {
    font-size: 40px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: inherit !important;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif !important;
}

/* 2. h4タイトルのグレー背景除去 - Lightning親テーマのh4背景色を完全上書き */
html body .detai__title--border,
html body.page-id-178 .detai__title--border,
html body.page-template-page-detail .detai__title--border,
html body[class*="detail"] .detai__title--border,
#searchApp .detai__title--border {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 2px solid #222 !important;
    margin-top: 30px !important;
    padding: 0 !important;
}

html body .detai__title--border span,
html body.page-id-178 .detai__title--border span,
html body.page-template-page-detail .detai__title--border span,
html body[class*="detail"] .detai__title--border span,
#searchApp .detai__title--border span {
    background: #222 !important;
    background-color: #222 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 5px 15px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

html body .detai__title--border span:after,
html body.page-id-178 .detai__title--border span:after,
html body.page-template-page-detail .detai__title--border span:after,
html body[class*="detail"] .detai__title--border span:after,
#searchApp .detai__title--border span:after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: 0 !important;
    height: 0 !important;
    border-right: 15px solid transparent !important;
    border-bottom: 30px solid #222 !important;
}

/* 3. detail__listのグレー背景修正 - dt/ddペアの正確な配置とグレー背景 */
html body .detail__list,
html body.page-id-178 .detail__list,
html body.page-template-page-detail .detail__list,
html body[class*="detail"] .detail__list,
#searchApp .detail__list {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .detail__list dl,
html body.page-id-178 .detail__list dl,
html body.page-template-page-detail .detail__list dl,
html body[class*="detail"] .detail__list dl,
#searchApp .detail__list dl {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html body .detail__list dt,
html body.page-id-178 .detail__list dt,
html body.page-template-page-detail .detail__list dt,
html body[class*="detail"] .detail__list dt,
#searchApp .detail__list dt {
    padding: 10px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    width: 23% !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html body .detail__list dd,
html body.page-id-178 .detail__list dd,
html body.page-template-page-detail .detail__list dd,
html body[class*="detail"] .detail__list dd,
#searchApp .detail__list dd {
    width: 27% !important;
    padding: 10px 10px 10px 0 !important;
    font-size: 13px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* グレー背景の正確な適用 */
html body .detail__list .bg-gray,
html body.page-id-178 .detail__list .bg-gray,
html body.page-template-page-detail .detail__list .bg-gray,
html body[class*="detail"] .detail__list .bg-gray,
#searchApp .detail__list .bg-gray {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
}

/* PC版での調整 */
@media (min-width: 960px) {

    html body .detail__list dt,
    html body.page-id-178 .detail__list dt,
    html body.page-template-page-detail .detail__list dt,
    html body[class*="detail"] .detail__list dt,
    #searchApp .detail__list dt {
        font-size: 14px !important;
        width: 20% !important;
    }

    html body .detail__list dd,
    html body.page-id-178 .detail__list dd,
    html body.page-template-page-detail .detail__list dd,
    html body[class*="detail"] .detail__list dd,
    #searchApp .detail__list dd {
        font-size: 14px !important;
        width: 30% !important;
    }
}

/* Lightning親テーマのh4やdl要素のスタイルを完全に無効化 */
html body.page-template-page-detail h4,
html body.page-id-178 h4,
html body[class*="detail"] h4 {
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

html body.page-template-page-detail dl,
html body.page-id-178 dl,
html body[class*="detail"] dl {
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

html body.page-template-page-detail dt,
html body.page-id-178 dt,
html body[class*="detail"] dt {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

html body.page-template-page-detail dd,
html body.page-id-178 dd,
html body[class*="detail"] dd {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 装備項目（detail__option）の間隔とフォント修正 */
html body .detail__option,
html body.page-template-page-detail .detail__option,
html body.page-id-178 .detail__option,
html body[class*="detail"] .detail__option,
#searchApp .detail__option {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .detail__option li,
html body.page-template-page-detail .detail__option li,
html body.page-id-178 .detail__option li,
html body[class*="detail"] .detail__option li,
#searchApp .detail__option li {
    display: inline-block !important;
    color: #333 !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    border: 1px solid #ddd !important;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif !important;
}

/* 装備の説明文のスタイル調整 */
html body .detail__equipment__text,
html body.page-template-page-detail .detail__equipment__text,
html body.page-id-178 .detail__equipment__text,
html body[class*="detail"] .detail__equipment__text,
#searchApp .detail__equipment__text {
    margin-top: 16px !important;
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* 「同じタイプの車があります」の赤線問題修正 */
html body .result__recomended__title,
html body.page-template-page-detail .result__recomended__title,
html body.page-id-178 .result__recomended__title,
html body[class*="detail"] .result__recomended__title,
#searchApp .result__recomended__title {
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    margin: 40px 0 20px 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

html body .result__recomended__title span,
html body.page-template-page-detail .result__recomended__title span,
html body.page-id-178 .result__recomended__title span,
html body[class*="detail"] .result__recomended__title span,
#searchApp .result__recomended__title span {
    background: #222 !important;
    color: #fff !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    display: inline-block !important;
    position: relative !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Lightning親テーマのh2要素の影響を完全除去 */
html body.page-template-page-detail h2.result__recomended__title,
html body.page-id-178 h2.result__recomended__title,
html body[class*="detail"] h2.result__recomended__title {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 40px 0 20px 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* PC版での装備項目調整 */
@media (min-width: 960px) {

    html body .detail__option li,
    html body.page-template-page-detail .detail__option li,
    html body.page-id-178 .detail__option li,
    html body[class*="detail"] .detail__option li,
    #searchApp .detail__option li {
        font-size: 14px !important;
        padding: 8px 16px !important;
    }
}

/* 車両カード価格表示の移行元スタイル再現 - 検索ページと詳細ページ両方対応 */
/* 1. 本体価格テキスト部分のスタイル（移行元: font-weight: bold） */
html body .result__price,
html body.page-template-page-car-search .result__price,
html body.page-template-page-detail .result__price,
html body.page-id-178 .result__price,
html body[class*="detail"] .result__price,
#searchApp .result__price {
    font-size: 12px !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
    line-height: 1.4 !important;
    color: inherit !important;
}

/* 2. 価格数値部分のスタイル（移行元: font-weight指定なし = normal） */
html body .result__price strong,
html body.page-template-page-car-search .result__price strong,
html body.page-template-page-detail .result__price strong,
html body.page-id-178 .result__price strong,
html body[class*="detail"] .result__price strong,
#searchApp .result__price strong,
html body .result .result__price strong,
html body.page-template-page-car-search .result .result__price strong,
html body.page-template-page-detail .result .result__price strong,
html body.page-id-178 .result .result__price strong,
html body[class*="detail"] .result .result__price strong,
#searchApp .result .result__price strong,
html body .results .result .result__price strong,
html body.page-template-page-car-search .results .result .result__price strong,
html body.page-template-page-detail .results .result .result__price strong,
html body.page-id-178 .results .result .result__price strong,
html body[class*="detail"] .results .result .result__price strong,
#searchApp .results .result .result__price strong {
    font-size: 20px !important;
    font-weight: normal !important;
    /* 移行元では指定なし = normal */
    line-height: 1 !important;
    color: inherit !important;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif !important;
}

/* 3. PC版での車両価格調整（移行元: 32px） */
@media (min-width: 960px) {

    html body .result__price,
    html body.page-template-page-car-search .result__price,
    html body.page-template-page-detail .result__price,
    html body.page-id-178 .result__price,
    html body[class*="detail"] .result__price,
    #searchApp .result__price {
        font-size: 14px !important;
    }

    html body .result__price strong,
    html body.page-template-page-car-search .result__price strong,
    html body.page-template-page-detail .result__price strong,
    html body.page-id-178 .result__price strong,
    html body[class*="detail"] .result__price strong,
    #searchApp .result__price strong,
    html body .result .result__price strong,
    html body.page-template-page-car-search .result .result__price strong,
    html body.page-template-page-detail .result .result__price strong,
    html body.page-id-178 .result .result__price strong,
    html body[class*="detail"] .result .result__price strong,
    #searchApp .result .result__price strong,
    html body .results .result .result__price strong,
    html body.page-template-page-car-search .results .result .result__price strong,
    html body.page-template-page-detail .results .result .result__price strong,
    html body.page-id-178 .results .result .result__price strong,
    html body[class*="detail"] .results .result .result__price strong,
    #searchApp .results .result .result__price strong {
        font-size: 32px !important;
        font-weight: normal !important;
        /* 移行元では指定なし = normal */
    }
}

/* ============================ */
/* 車両カードホバー効果の修正    */
/* ============================ */

/* 車両詳細ページでの車両カードホバー時の青色を防止し、影のアニメーションのみ適用 */
#searchApp .result:hover,
#searchApp .result:focus,
.result:hover,
.result:focus {
    color: #222 !important;
    text-decoration: none !important;
    background-color: #fafafa !important;
    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .1) !important;
}

/* 車両カード内のテキスト要素も青色を防止 */
#searchApp .result:hover span,
#searchApp .result:focus span,
.result:hover span,
.result:focus span,
#searchApp .result:hover .result__maker,
#searchApp .result:focus .result__maker,
.result:hover .result__maker,
.result:focus .result__maker,
#searchApp .result:hover .result__name,
#searchApp .result:focus .result__name,
.result:hover .result__name,
.result:focus .result__name,
#searchApp .result:hover .result__price,
#searchApp .result:focus .result__price,
.result:hover .result__price,
.result:focus .result__price {
    color: inherit !important;
}

/* 車両価格のstrong要素も青色を防止 */
#searchApp .result:hover .result__price strong,
#searchApp .result:focus .result__price strong,
.result:hover .result__price strong,
.result:focus .result__price strong {
    color: inherit !important;
}

/* result__makerとresult__icon_newの色を固定 */
#searchApp .result:hover .result__maker,
#searchApp .result:focus .result__maker,
.result:hover .result__maker,
.result:focus .result__maker {
    color: #9d9d9d !important;
}

#searchApp .result:hover .result__icon_new,
#searchApp .result:focus .result__icon_new,
.result:hover .result__icon_new,
.result:focus .result__icon_new {
    color: #f4121c !important;
}

/* 関連車両カードにも同じ効果を適用 */
#searchApp .results .result:hover,
#searchApp .results .result:focus,
.results .result:hover,
.results .result:focus {
    color: #222 !important;
    text-decoration: none !important;
    background-color: #fafafa !important;
    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .1) !important;
}