@charset "UTF-8";

/*車種別カーナビセレクト*/

/*[refer to] jpn.pioneer/ja/carrozzeria/carnavi/select/css/carnavi_select_sp.css ここから*/
#container #speaker_select .blur {
    height: 250px;
}

#container #speaker_select .select_info {
    height: 250px;
}

#speaker_select .select_info h2 {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
}

#speaker_select .select_info p {
    font-size: 12px;
    color: #fff;
}

#speaker_select .select_info .notes01 {
    padding-left: 1.5em !important;
}

#speaker_select .js-tabGroup {
    padding-bottom: 20px;
}


#speaker_select .tabStyle02 {
    padding-bottom: 40px;
}

#speaker_select .maker_midashi {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-top: 40px;
}

#speaker_select .ts02-contents .select_list:first-of-type {
    padding-top: 30px;
}

#speaker_select .select_area .pcFlex {
    justify-content: center;
    align-items: center;
}

#speaker_select .ts04-list :not(:last-child) {
    margin-right: 0;
}

#speaker_select .select_area .ts04-list {
    margin-bottom: 0;
}

#speaker_select .select_area .ts04-list .ts04-ttl {
    background: #000;
    color: #fff;
    width: 100%;
    border-bottom: #fff 1px solid;
}

#speaker_select .select_area .ts04-list .ts04-txt {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    line-height: 1.2em;
}

#speaker_select .select_area .ts04-box {
    width: 100%;
    height: auto;
    -webkit-transition: all .2s;
    transition: all .2s;
}

#speaker_select .select_area li.ts04-box.js-tabWrapper.spOn {
    border-bottom: 2px solid #fff;
}

#speaker_select .select_area .ts04-ttl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: auto;
    height: 100%;
    width: 100%;
    border-bottom: none;
    padding: 18px 15px 18px 10px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
    position: relative;
    opacity: 1;
}

#speaker_select .select_area .ts04-ttl:hover {
    cursor: pointer;
    opacity: .5;
}


#speaker_select .select_area .ts04-list .slideToggleBtn.black:after,
#speaker_select .select_area .ts04-list .slideToggleBtn.black:before {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    background: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#speaker_select .select_area .ts04-list .slideToggleBtn.js-toggleBtn.black.spOn:after,
#speaker_select .select_area .ts04-list .slideToggleBtn.js-toggleBtn.black.spOn:before {
    background: #000000;
}

#speaker_select .tabStyle04 .ts04-ttl.spOn {
    border-bottom: none;
    background: #a3a3a3;
    height: auto;
}

#speaker_select .tabStyle04 .ts04-ttl.spOn .ts04-txt {
    color: #000;
}

#speaker_select .tab-viewArea.select_view {
    background-color: #e8e8e8;
    padding: 16px 0;
    position: relative;
    z-index: 9999;
}

#speaker_select .tab_ul {
    margin: 0 auto;
    /*    padding-bottom: 14px;*/
    position: relative;
    z-index: 99999;
    background-color: #e8e8e8;
}

#speaker_select .tab_ul li {
    font-size: 14px;
    line-height: 43px;
    text-align: center;
    padding: 0;
    position: relative;
    height: 43px;
}

#speaker_select .select_area .ts04-box.link_area {
    position: relative;
}

#speaker_select .link_area .ts04-txt .linkStyle02,
#speaker_select .link_area .ts04-txt .linkStyle02_black,
#speaker_select .link_area .ts04-txt .linkStyle02_white,
#speaker_select .link_area .ts04-txt .linkStyle03,
#speaker_select .link_area .ts04-txt .linkStyle03_black,
#speaker_select .link_area .ts04-txt .linkStyle03_white {
    position: static;
}

#speaker_select .link_area .ts04-txt .linkStyle02:after,
#speaker_select .link_area .ts04-txt .linkStyle02_black:not(.window):after,
#speaker_select .link_area .ts04-txt .linkStyle02_white:after,
#speaker_select .link_area .ts04-txt .linkStyle03:after,
#speaker_select .link_area .ts04-txt .linkStyle03_black:after,
#speaker_select .link_area .ts04-txt .linkStyle03_white:after {
    width: 15px;
    height: 13px;
    -webkit-transition: .2s all;
    transition: .2s all;
    background-size: 8px;
    right: 10px;
    bottom: 0;
    top: 0;
}

#speaker_select .link_area .ts04-txt .linkStyle02_black.window:after {
    position: absolute;
    content: "";
    width: 15px;
    height: 13px;
    background: url(/ja/carrozzeria/carnavi/select/img/icon_window_sp.svg) no-repeat;
    background-size: 13px;
    bottom: 0;
    top: 0;
    right: 14px;
    margin: auto;
}


#speaker_select .tab_ul .linkStyle02,
#speaker_select .tab_ul .linkStyle02_black,
#speaker_select .tab_ul .linkStyle02_white,
#speaker_select .tab_ul .linkStyle03,
#speaker_select .tab_ul .linkStyle03_black,
#speaker_select .tab_ul .linkStyle03_white {
    position: static;
}

#speaker_select .tab_ul .linkStyle02:after,
#speaker_select .tab_ul .linkStyle02_black:after,
#speaker_select .tab_ul .linkStyle02_white:after,
#speaker_select .tab_ul .linkStyle03:after,
#speaker_select .tab_ul .linkStyle03_black:after,
#speaker_select .tab_ul .linkStyle03_white:after {
    width: 7px;
    height: 10px;
    -webkit-transition: .2s all;
    transition: .2s all;
    background-size: 7px;
    right: 18px;
    bottom: 0;
    top: 0;
}

#speaker_select .select_area .ts04-list .ts04-ttl.gray_area {
    background-color: #e8e8e8;
    padding: 18px 15px 18px 10px;
    color: #000;
}

#speaker_select .select_area .gray_area .linkStyle02_black {
    color: #000;
}

#speaker_select.other_txt {
    text-align: center;
    padding: 30px 0;
}

#speaker_select .tabStyle02 .select_list {
    padding: 0;
    margin: 0 auto;
}


/*カーナビ選択画面*/

.pageTtl h1.pt_style {
    color: #000000 !important;
    display: block;
}

.pageTtl h1.cgt_style {
    color: #000000 !important;
    font-size: 12px;
    display: block;
    padding-top:5px;
}

#details_select .select_info {
    padding-top: 110px;
    padding-bottom: 30px;
}

#details_select .select_info p {
    font-size: 14px;
    text-align: center;
}

.details_list {
    background-color: #000;
    padding: 30px 0 60px;
}

.details_list .details_box {
    padding: 0 5px;
}

.details_list .details_ul {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
}

.details_list .flexP5.flexWrap li.box01:nth-child(odd) {
    margin: 5px auto 5px 0;
    position: relative;
}

.details_list .flexP5.flexWrap li.box01:nth-child(even) {
    margin: 5px 0 5px auto;
    position: relative;
}

/*横線*/

.details_list li.box01:nth-child(odd) {
    margin-right: 2.23%;
}

.details_list li.box01:nth-child(odd):after {
    height: calc(100% - 13px);
    width: 1px;
    background-color: #cccccc;
    display: block;
    position: absolute;
    right: -3.24%;
    top: 13px;
    bottom: 0;
    margin: auto;
    content: "";
}

/*下線*/

.details_list li.box01:nth-child(3):before {
    height: 1px;
    width: calc(100% - 13px);
    background-color: #cccccc;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    content: "";
}

.details_list li.box01:nth-child(5):before {
    height: 1px;
    width: calc(100% - 13px);
    background-color: #cccccc;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    content: "";
}

/*4つめの下線*/

.details_list li.box01:nth-child(4):after {
    height: 1px;
    width: calc(100% - 13px);
    background-color: #cccccc;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -11px;
    margin: auto;
    content: "";
}

/*4つめの上線*/

.details_list li.box01:nth-child(4):before {
    height: 1px;
    width: calc(100% - 13px);
    background-color: #cccccc;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    content: "";
}

.details_ul .box01 {
    height: 214px;
}

.details_ul .box01:nth-child(even) {
    border-right: none;
}

.details_list .box01 .title {
    color: #fff;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    padding: 5px 0;
}

.details_list .box01 .sub {
    color: #fff;
    font-size: 12px;
    text-align: right;
    padding: 5px 0;
}

.details_list .box01 .imgBox {
    width: 100%;
    height: 115px;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
}

.details_list .box01 img {
    max-width: 100%;
    position: absolute;
    max-height: 100%;
    width: auto;
    vertical-align: middle;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

@media screen and (max-width: 360px) {
    .details_list .box01 .imgBox {
        width: 140px;
        height: 110px;
        text-align: center;
        vertical-align: middle;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
    }

    .details_list .box01 img {
        max-width: 140px;
        position: absolute;
        max-height: 100%;
        width: auto;
        vertical-align: middle;
        margin: auto;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }
    #result_area .top_image .main_visual .image_box img {
    height: auto;
    width: auto;
    max-width: 290px;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
    }

}

.details_list .not_applicable {
    font-size: 14px;
    letter-spacing: .025em;
    line-height: 1.7;
    color: #fff;
    height: 120px;
    display: flex;
    align-items: center;
}

.details_list .not_applicable .txt {
    text-align: center;
    margin: 0 auto;
}

.details_list .box01 .link_area {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    padding: 5px;
}

.small.linkBoxStyle01_white:after {
    background-image: url(/ja/support/img/icon_arrow01_w.svg);
}

.select_list {
    padding-top: 30px;
}

.details_list .flexS2 > * {
    width: 48%;
}

/*検索結果画面*/

/*トップイメージ*/

#result_area {
    box-sizing: border-box;
}

#result_area .bgWhite {
    color: #fff;
}

#result_area .select_info {
    padding-top: 40px;
}

#result_area .select_info h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: arial;
}

.tl_pr_area {
    background-color: #515151;
    padding: 0 0 12px;
}

#result_area .tl_pr_area h1 {
    color: #fff !important;
}

.tl_pr_area .pageTtl {
    position: relative;
}

#result_area .print_area {
    display: none;
}

.anc_area {
    padding-top: 10px;
    padding-bottom: 30px;
}

.anc_area .btn_size,
#just_area .btn_size {
    width: 100%;
    margin: 0 auto;
    color: #000;
}

.select_list .btn_size {
    padding-top: 20px;
    padding-bottom: 40px;
}

#result_area .anc_area .linkStyle01_black,
#result_area #just_area .linkStyle01_black {
    border: solid #fff 1px;
    background-color: #fff;
}

#result_area .anc_area .linkStyle01_black:hover,
#result_area #just_area .linkStyle01_black:hover {
    border: solid #fff 1px;
    background-color: #000;
    cursor: pointer;
}

#result_area .anc_area .linkStyle01_black.anc:after {
    right: 17px;
    background-image: url(/ja/carrozzeria/carnavi/select/img/icon_arrow_down01.svg);
    content: "";
    display: block;
    background-size: 11px;
    margin-right: 11px;
    content: "";
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    height: 7px;
    width: 11px;
}

#result_area .anc_area .linkStyle01_black.anc:hover:after {
    right: 17px;
    background-image: url(/ja/carrozzeria/carnavi/select/img/icon_arrow_w_down01.svg);
    content: "";
    display: block;
    background-size: 11px;
    margin-right: 11px;
    content: "";
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    height: 7px;
    width: 11px;
}

#result_area .top_image {
    color: #000;
    padding: 0;
}

.toptxt_box {
    text-align: center;
}

#result_area .top_image .product_toptxt h2.VehicleType {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

#result_area .top_image .product_toptxt h2.ContentTtl {
    display:block;
    margin-top: 10px;
    margin-bottom: 20px;
}

.multiplyX {
    display: block;
    color: #000;
    font-size: 26px;
    line-height: 1.4em;
    text-align: center;
    padding: 0 10px;
    font-weight: 700;
}

#result_area .top_image .product_toptxt .ttl_r {
    padding-right: 10px;
}

#result_area .top_image .product_toptxt .ttl_l2 {
    display: block;
}

#result_area .top_image .product_toptxt h2 {
    color: #000;
    font-size: 20px;
    line-height: 1.4em;
    text-align: center;
    font-weight: 700;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#result_area .boxType01.attention {
    /*width: 100%;*/
    border: 3px solid #fff;
    line-height: 1.2em;
    padding: 10px;
    margin: 0 5px 40px 5px;
}

#result_area .boxType01.attention .attention_ttl {
    text-align: center;
}

#result_area .boxType01.attention .attention_ttl:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background: url(/ja/carrozzeria/speaker/select/img/attention.png) no-repeat;
    background-size: contain;
    transform: translateY(6px);
}

#result_area .boxType01.attention p {
    color: #fff;
    font-size: 14px;
    line-height: 2em;
}

#result_area .boxType01.attention a {
    padding: 11px 40px 13px;
    color: #000;
    border: solid #fff 1px;
    background-color: #fff;
}

#result_area .boxType01.attention a:hover {
    color: #fff;
    border: solid #fff 1px;
    background-color: #000;
    cursor: pointer;
}

#result_area .model_center {
    margin: 0 auto;
    padding: 10px 0 10px;
    text-align: center;
}

#result_area .model_center h2 {
    color: #fff;
    font-size: 22px;
    line-height: 1.4em;
    text-align: center;
    font-weight: 700;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
}

#result_area .model_center .up:after {
    content: "×";
    text-align: center;
    margin: 0 auto;
    font-size: 22px;
    color: #fff;
    line-height: 1.4em;
    display: inline-block;
    padding: 0 7px;
}

#result_area .top_image .product_toptxt dl {
    text-align: left;
    font-size: 14px;
    border: 1px solid #000;
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
}

#result_area .top_image .product_toptxt dt {
    float: left;
    border-bottom: 1px solid #000;
    padding: 3px 5px;
    margin-right: 5px;
    width: 25%;
}

#result_area .top_image .product_toptxt dt:last-of-type,
#result_area .top_image .product_toptxt dd:last-of-type {
    border-bottom: none;
}

#result_area .top_image .product_toptxt dd {
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    padding: 3px 5px;
    width: 75%;
    margin-left: 25%;
}

/*商品一覧*/

#result_area .bgBlack .category_head {
    color: #fff;
    padding: 0;
    margin-top: 20px;
}

#result_area .bgWhite .category_head {
    color: #000;
    padding: 0;
    margin-top: 20px;
}

#result_area .side_left .category_head,
#result_area .side_right .category_head {
    margin-top: 20px;
}


#result_area .side_right .category_head {
    padding-top: 20px;
}

#result_area .side_right {
    position: relative;
}

#result_area .side_right:before {
    height: 1px;
    width: 100%;
    background-color: #a3a3a3;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    content: "";
}


#result_area h2 {
    margin-top: 40px;
    margin-bottom: 40px;
}

#proposal h2 {
    margin-top: 0;
    margin-bottom: 30px;
}

#result_area .category_head p {
    font-size: 20px;
    font-weight: 500;
    padding-left: 10px;
}

#result_area .bgBlack .category h2.ttlStyle02:after {
    background: #fff;
}

#result_area .navilogo img {
    float: right;
    width: 45%;
}

#result_area .bgBlack .product_box {
    color: #fff;
}

#result_area .product_box .boxtype01 {
    padding: 10px 15px 20px;
    margin-bottom: 20px;
    position: relative;
}

/*
#result_area .flexP2 .boxtype01:nth-last-child(2):after {
    height: 1px;
    width: calc(100% - 30px);
    background-color: #e8e8e8;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    content: "";
}

#result_area .flexP2 .boxtype01:nth-last-child:after {
    display: none;
}
*/

#result_area .product_box .category_image {
    width: 167px;
    margin: 5px auto;
    background-color: #fff;
}

#result_area .product_box .image_area {
    position: relative;
    width: 155px;
    height: 105px;
    text-align: center;
    vertical-align: middle;
    contain: content;
    overflow: hidden;
    margin: 0 auto;
}

#result_area .product_box .category_image img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
    width: auto;
    max-width: 155px;
    vertical-align: middle;
    text-align: center;
}

#result_area .product_box .category_txt {
    font-size: 13px;
    padding-left: 10px;
    width: 100%;
    margin: 5px auto;
}

#result_area .product_box .flex_style01 {
    padding-bottom: 5px;
}

#result_area .flex_style04 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
}

#result_area .product_box .flex_center {
    display: none;
}

.product_box .category_txt .note {
    font-size: 12px;
    padding-bottom: 5px;
    line-height: 1.2em;
    height: auto;
}

#result_area .product_box .category_txt .p_name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4em;
}

#result_area .product_box .category_txt .release {
    text-align: right;
    font-size: 14px;
    line-height: 1.4em;
}

#result_area .product_box .category_txt .new {
    color: #b91440;
    font-size: 14px;
    padding-right: 5px;
    font-weight: 700;
    vertical-align: baseline;
    line-height: 1.4em;
}

#result_area .product_box .explanation {
    padding-bottom: 5px;
    line-height: 1.4em;
}

.product_box .category_txt .more {
    text-align: right;
    font-size: 14px;
    float: right;
}

#result_area .product_box .category_txt .price::after,
#result_area .product_box .category_txt .contact::after,
#result_area .product_box .category_txt .more::after {
    clear: both;
    content: "";
    display: table;
}

#result_area .boxType03.attention {
    width: 100%;
    border-color: #FF8C00;
    line-height: 1.2em;
    padding: 10px 5px;
    margin: 0 auto 30px;
}

#result_area .boxType03.attention p {
    color: #FF8C00;
    font-size: 14px;
    line-height: 2em;
    text-align: center;
}

#result_area .flex_center .blandlogo {
    font-size: 56px;
    font-weight: 900;
    color: #dee0e2;
}

#result_area .bdB_gray {
    border-bottom: solid #a3a3a3 1px;
    margin-top: 20px;
    margin-bottom: 20px;
}


#result_area .bgWhite {
    color: #000;
}

#result_area .bgWhite .product_box {
    color: #000;
}


#result_area #just_area {
    padding: 20px 0 20px;
}

#result_area #product_area {
    padding: 30px 0 20px;
}


#result_area #speaker_other {
    padding: 20px 0;
}

#result_area #just_area p,
#result_area #speaker_other p {
    font-size: 16px;
    text-align: center;
    font-weight: normal;
}

/*タブエリア*/

.select_tab {
    padding-bottom: 60px;
}

#result_area .select_tab .tabStyle02 .ts02-list {
    height: 100% !important;
    word-break: break-word;
    margin-bottom: 2px;
}

#container #result_area .select_tab .tabStyle02 .ts02-ttl,
#container #result_area .select_tab .tabStyle02 .ts02-ttl.on {
    height: auto !important;
}

#result_area .select_tab li.ts02-ttl {
    padding: 1.2em 5px;
}

#result_area .tab02-contents {
    padding: 30px 0;
}

#result_area .tab02-contents .linkList03 .ll03-list {
    font-size: 16px;
    padding: 14px 0;
}

#result_area .tab02-contents .txt {
    font-size: 16px;
    padding: 14px 0;
    text-align: center;
}

#result_area .select_tab .linkList03 .ll03-list a {
    padding-right: 16px;
}

/*20191202注記*/
.attention02 p {
    font-size: 14px;
    line-height: 2em;
    /*text-align: center; 20210405 add ks*/
    /*margin-bottom: 40px;*/
}

/*20191206 検索結果に 車を選びなおす 追加*/
#result_area .select_list {
    padding-top: 0;
}

/*プリント用 非表示*/
.logo_area,
.printOnly,
#simplefooter {
    display: none;
}

/*20210405 add ks*/
.attention02 {
    width: 100%;
}
.attention02 p:last-of-type {
    margin-bottom: 40px;
}

/*[refer to] jpn.pioneer/ja/carrozzeria/carnavi/select/css/carnavi_select_sp.css ここまで*/

#Related_content_links {
    padding: 40px 0;
}
#Related_content_links .flexP4 > div {
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
}
#Related_content_links .flexP4 > div:first-of-type {
border-top: 1px solid #000;
}
.RContent_text {
    margin-bottom: 40px;
    text-align: center;
}
.RContent_ttl {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.RContent_text {
    font-size: 16px;
    margin-bottom: 40px;
    text-align: center;
}
.linkStyle01_black {
    margin-bottom: 30px;
}

.shop_btn_wrapper > div > ul > li {
    margin: auto !important;
    width: 100%;
    flex: none !important;
}
.shop_btn_wrapper > div > ul > li > a > span {
    background: url(//assets.jpn.pioneer/ja/assets/img/icon_window_w_sp.svg) right no-repeat, url(//assets.jpn.pioneer/ja/assets/img/icon_shop_w.svg) left 9px no-repeat !important;
    background-size: 13px, 15px !important;
}