@charset "utf-8";
@import url("global_navigation.css");
@import url("footer_navigation.css");
@import url("body_interior_color.css");
@import url("img_slider.css");
@import url('https://fonts.googleapis.com/css?family=Cabin+Condensed:400,600,500,700');

/*------------------------------------------------------------------------------------------
*
*
    car_common.css
*
*
------------------------------------------------------------------------------------------ */

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/*HTML5display-roleresetforolderbrowsers*/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}


/*201706 ua add*/
#contents { width: 100% !important;}

div.finish{
	background:#fafafa;
	padding:0.4em 0;
	overflow: hidden;
}

div.finish div{
	width:980px;
	margin:0 auto;
}

div.finish div p.finishcopy{
	float:left;
	width:50%;
	color:#C00;
	line-height:1.5;
	font-size:12px;
	text-align:left !important;
}

div.finish div ul{
	float:right;
	width:50%;
	font-size:12px;
	text-align:right;
	padding-top:0.3em;
}

div.finish div ul li{
	margin-bottom:0.1em;
}

.finishTimeSP { display: none ;}


/* overwrite */
body{
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ", meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
}

#auto-header, #auto-header-overlay{ z-index: 65535 !important;}

a, li, p, div, button{ outline: none !important; }
a{ text-decoration: none;}
.bold{ font-weight: bold !important;}
/* ------------ */

body.only_sp .device_pc_only,
body.only_tablet .device_pc_only{ display: none !important;}

.device_sp_only{ display: none !important;}
body.only_sp .device_sp_only,
body.only_tablet .device_sp_only{ display: inherit !important;}


/* ------------------------------------------------------------
*
    #contents_area
*
------------------------------------------------------------ */
#contents_area{
    color: #444;
    position: relative;
    text-align: left;
    overflow: hidden;
}

#contents_area:after{
    content: '';
    clear: both;
    display: block;
}

#contents_area a{ color: #0064a1; transition: opacity .1s ease;}
#contents_area a:hover{ opacity: .7;}

#contents_footer_navigation{
    text-align: left;
}


/* ------------------------------------------------------------
*
    MOVIE PLAYER
*
------------------------------------------------------------ */
.bc-iframe body, .bc-player-4k5Jg43ag_default { background-color: transparent;}
.bc-player-4k5Jg43ag_default .vjs-poster { background-color: transparent;}
.bc-player-4k5Jg43ag_default.vjs-mouse .vjs-big-play-button { top: 0; left: 0;}
.bc-player-4k5Jg43ag_default.vjs-mouse .vjs-big-play-button {
    left: 242px\9 !important;
    top: 140px\9 !important;
}
.vjs-big-play-button {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto;
}

.only_sp .vjs-big-play-button{
/*    display: none; */
}

.bc-player-4k5Jg43ag_default .vjs-progress-holder:before {
	background-color:#000 !important;
	filter:alpha(opacity=30) !important;
	opacity:0.3!important;
}

.bc-player-4k5Jg43ag_default .vjs-load-progress {
	background-color:#c00 !important;
	background-color:#000\9 !important;
	filter:alpha(opacity=0) !important;
	opacity:0.3!important;
}

.bc-player-4k5Jg43ag_default .vjs-play-progress, .bc-player-4k5Jg43ag_default .vjs-volume-level {
	background-color:#c00!important;
}

.movie_player{
    display: none;
}

#movie_modal_data video,
#movie_modal_data .video-js{
    width: 100% !important;
    height: auto !important;
    position: relative;
}

#movie_modal .m_mov{
    display: none;
}

.box_link img{
    transition: opacity .1 ease;
}

.box_link:hover img{
    opacity: .7;
}

@media screen and (min-width : 769px){ 
/*------------------------------------------------------------------------------------------
*
*
    min-width : 769px
*
*
------------------------------------------------------------------------------------------ */
#auto-header, #auto-header-overlay{ min-width: 980px;}

/* common style */
body{ position: relative !important; overflow: auto !important;}
br{ display: block !important;}
br.sp{ display: none !important;}
.switch_pc{ display: block;}
.switch_sp{ display: none;}


/* ------------------------------------------------------------------------------------------
*
    #global_navigation
*
------------------------------------------------------------------------------------------ */
.gnav_ico{ display: none;}
#global_navigation{
    width: 100%;
    min-width: 980px;
    height: 57px;
    background-image:url(../image_gNavi/parts_gnav_bg_pc.png);
    text-align: left;
    position: absolute;
    /*top: 56px; ←ua delete*/
    left: 0;
    z-index: 100;
}

#global_navigation.fixed{
    position: fixed;
    top: 0;
}

#global_navigation a{
    font-size: 12px;
    font-weight: bold;
    color: #444;
}

#global_navigation_inner{
    width: 980px;
    margin: 0 auto;
    position: relative;
}

#global_navigation h1{
    width: 43px;
    height: 53px;
    line-height: 53px;
    position: absolute;
    top: 0;
    left: 30px;
}

#global_navigation h1 img{
    width: auto;
    height: 25px;
    vertical-align: middle;
}

#global_navigation ul{
    width: auto;
    float: right;
}

#global_navigation ul:after{
    content: '';
    clear: both;
    display: block;
}

#global_navigation li{
    float: left;
    height: 57px;
    line-height: 57px;
    white-space: nowrap;
    position: relative;
    transition: background .1s ease;
}

#global_navigation .parents p.current,
#global_navigation li.current,
#global_navigation li:hover{
    background-color: #dbdbdb;
    background-image: none;
}

#global_navigation li a{
    display: block;
}

#global_navigation li ul{
    display: none;
    width: auto;
    padding: 0;
    position: absolute;
    top: 57px;
    left: 0;
    z-index: 5;
}

#global_navigation li ul li{
    min-width: 100px;
    height: 35px;
    line-height: 35px;
    float: none;
    position: relative;
    background-image:url(../image_gNavi/parts_gnav_bg_pc.png);
    transition: none;
}

#global_navigation li ul li:hover{
    background-image: none;
}


/* ------------------------------
    #side_navigation
------------------------------ */
#side_navigation{
    width: 184px;
    position: fixed;
    top: 204px;
    right: 0;
    z-index: 100;
}

#side_navigation li{
    width: 184px;
    height: 50px;
    line-height: 50px;
    background-position: top right;
    background-repeat: no-repeat;
    background-color: rgba(82, 82, 82, 0.9) !important;
    margin-bottom: 1px;
    overflow: hidden;
    transition: opacity .1s ease;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

#side_navigation li.side_search{ top: 0;}
#side_navigation li.side_test{ top: 51px;}
#side_navigation li.side_catalog{ top: 102px;}
#side_navigation li.side_estimate{ top: 153px;}

#side_navigation li:hover{
    opacity: .8;
}

#side_navigation li a{
    width: 72px;
    height: 50px;
    display: block;
    font-weight: normal;
    font-size: 12px;
    color: #fff;
    position: absolute;
    right: 50px;
}

#side_navigation li a span{
    width: 70px;
    height: 50px;
    display: block;
    font-size: 12px;
    color: #fff;
    position: absolute;
    right: 50px;
    display: block;
}

#side_navigation li.side_search{ background-image: url("../image_gNavi/parts_side_nav_search_pc.png");}
#side_navigation li.side_test{ background-image: url("../image_gNavi/parts_side_nav_test_pc.png");}
#side_navigation li.side_catalog{ background-image: url("../image_gNavi/parts_side_nav_estimate_pc.png");}
#side_navigation li.side_estimate{ background-image: url("../image_gNavi/parts_side_nav_estimate_pc.png");}


/* ------------------------------ */
#top_topic_path{
    width: 980px;
    margin: 50px auto 20px auto;
    font-size: 16px;
}

#top_topic_path ul{
    padding: 0 25px;
}

#contents_area{
    width: 100%;
    min-width: 980px;
    padding: 56px 0 0 0;
    box-sizing: border-box;
}

.btn_pagetop{
    width: 45px;
    height: 45px;
    background-image:url(../image_common/btn_pagetop.png);
    background-repeat: no-repeat;
    background-size: 45px;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    transition: opacity .1s ease;
    z-index: 10;
}

.btn_pagetop:hover{ opacity: .7 !important;}



/* ------------------------------------------------------------------------------------------
*
    .rect_nav
*
------------------------------------------------------------------------------------------ */
.rect_nav{
    width: 930px;
    margin: 0 auto 75px auto;
    font-size: 16px;
    opacity: 0;
}

.rect_nav .sp_current{ display: none;}

.rect_nav ul{width: 100%; height: 34px;}
.rect_nav li{
    height: 34px;
    line-height: 34px;
    float: left;
    text-align: center;
    background-color: #ededed;
    transition: background .1s ease;
}

.rect_nav a{
    width: 100%;
    height: 34px;
    opacity: 1 !important;
    color: #444 !important;
    display: block;
    white-space: nowrap;
}

.rect_nav li.current{
    background-color: #808080 !important;
    color: #fff;
}

.rect_nav li:hover{
    background-color: #dbdbdb;
}

.rect_nav li.current a{
    color: #fff !important;
}
/* ------------------------------------------------------------------------------------------ */


/* ------------------------------------------------------------------------------------------
*
    .section
*
------------------------------------------------------------------------------------------ */
.section{
    clear: both;
    margin: 0 0 100px 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    color: #444;
}

.section.bg{
    padding: 100px 0;
    background-color: #f8f8f8;
}

.section:after{
    content: '';
    clear: both;
    display: block;
    width: 0;
}

.section_inner{
    width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

.section_inner .head_title{
    margin: 0 0 25px -25px;
    padding: 0 50px;
    font-size: 16px;
}

.section.col_right .section_inner{
    padding: 0 0 0 460px;
}

.section h3{
    margin: 0 0 20px 0;
    padding: 0 50px;
    font-size: 38px;
    line-height: 1.368em;
    white-space: nowrap;
}

.section h3.small{
    font-size: 30px;
}

.section .section_inner h4.sub_title{
    padding: 0 50px;
    margin: -20px 0 50px 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4em;
}

.section .section_inner h4.subtitle .small{
    margin: 0 0 0 5px;
    font-size: 16px !important;
    line-height: 1.5em;
    font-weight: normal;
}

.section .section_inner h4.equipment{
    padding: 0 50px;
    margin: -20px 0 50px 0;
    font-size: 18px !important;
    font-weight: bold;
    line-height: 1.4em;
}

.section .section_inner h4.equipment .small{
    font-size: 14px !important;
    line-height: 1.5em;
    font-weight: normal;
}

.section .section_desc{
    margin: 0 0 50px 0;
    padding: 0 50px;
    font-size: 18px;
    line-height: 1.6em;
}

.section .bold{
    font-weight: bold;
}

.section .section_desc .size_mid{
    margin: 5px 0 0 0;
    font-size: 14px;
    line-height: 1.714em !important;
    display: block;
}

.section .detail{
    clear: both;
    padding: 0 50px;
    position: relative;
}

#rt-personalize-area-a a,
.section .detail a{ position: relative; font-size: 16px; line-height: 1em;}

#rt-personalize-area-a a:after,
.section .detail a:after{
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 1em;
    background-image:url(../image_common/parts_ico_btn_detail_arrow.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 20px 20px;
    position: relative;
    top: 3px;
    left: 5px;
}

.section .pic{
    max-width: 980px;
    text-align: center;
    position: relative;
}

.section .pic .caption{
    margin: 5px 0 0 0;
    font-size: 12px;
    text-align: left;
    display: block;
}

.section .pic img{ width: 100%; height: auto;}

.section .pic_full{
    width: 100%;
    text-align: center;
    position: relative;
}

.section .pic_full img{
    width: 100%;
    max-width: 1440px;
    height: auto;
}


/* ------------------------------
    .section_column
------------------------------ */
.section_column{
    clear: both;
    width: 880px;
    margin: 0 auto 80px auto;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.6em;
}

.section_column:last-child{ margin-bottom: 0;}

.section_column:after{
    content: '';
    display: block;
    clear: both;
}

.section_column h4{
    margin: 0 0 20px 0;
    font-size: 38px;
    line-height: 1.4em;
}

.section_column h4.small{
    font-size: 16px;
    font-weight: bold;
}

.section_column h5{
    margin: 10px 0 20px 0;
    font-size: 18px;
    line-height: 1.4em;
}

.section_column h5 .small{
    font-size: 18px;
}

.section_column .col_left{
    width: 420px;
    float: left;
}

.section_column .col_right{
    width: 420px;
    float: right;
}

.section_column p{
    margin: 0 0 10px 0;
}

.section_column p:last-child{
    margin: 0;
}

.section_column span.caption{
    margin: -5px 0 0 0;
    font-size: 12px;
    line-height: 1.5em;
    display: block;
}

.section_column span.caption.right{
    text-align: right;
}

.section_column .desc.size_mid{
    font-size: 14px;
    line-height: 1.5em;
}

.section_column .desc_small{
    font-size: 12px;
    line-height: 1.5em;
    display: block;
}

.section_column .notes{
    font-size: 12px;
    line-height: 1.5em;
    display: block;
    text-indent: -1em;
    padding-left: 1em;
}

.section_column img{
    width: 100%;
    height: auto;
}

.section_column .pic_caption{
    margin: -10px 0 5px 0 !important;
    font-size: 12px;
    line-height: 1.5em;
}

.section_column .pic_caption_large{
    margin: -10px 0 10px 0 !important;
    font-size: 16px;
    line-height: 1.5em;
}

.section_column .pic_caption_large img{
    vertical-align: text-top;
    margin: 0 5px;
    width: auto;
    height: 1em;
}

/* ------------------------------------------------------------------------------------------
*
    .through_content
*
------------------------------------------------------------------------------------------ */
.through_content{
    width: 880px;
    margin: 0 auto;
}

.through_content img{
    width: 100%;
    height: auto;
}

.through_content td{
    padding: 0 20px;
    vertical-align: top;
    font-size: 12px;
    line-height: 1.5em;
}

.through_content td img{
    margin: 0 0 5px 0;
}

.through_content td:first-child{ padding-left: 0;}
.through_content td:last-child{ padding-right: 0;}

/* ------------------------------------------------------------------------------------------
*
    #section_caution
*
------------------------------------------------------------------------------------------ */
#section_caution{
    margin: -35px auto 80px auto;
}

#section_caution .section_inner{
    width: 930px;
}

#section_caution p{
    margin: 0 0 10px 0;
    font-size: 11px;
    line-height: 1.4em;
}

#section_caution .section_inner div{ margin: 0 0 20px 0;}
#section_caution .section_inner div:last-child{ margin: 0;}

#section_caution .caution p{
    text-indent: -2em;
    padding: 0 0 0 2em;
}

#section_caution .caution.short p{
    text-indent: -1.5em;
    padding: 0 0 0 1.5em;
}

#section_caution .notes p{
    text-indent: -1em;
    padding: 0 0 0 1em;
}

#section_caution .color{
    color: #da4058;
}

/* ------------------------------------------------------------------------------------------
*
    .fuel_table
*
------------------------------------------------------------------------------------------ */
.fuel_table p{ margin: 0 !important; line-height: 1em !important;}
.fuel_table th,
.fuel_table td{ vertical-align: middle;}
.fuel_table table{ width: 100%; line-height: normal;}
.fuel_table th.jc08{ width: 115px;}
.fuel_table td.num{ width: 180px; padding: 0; font-size: 76px;}
.fuel_table td.fuel{ font-size: 42px;}

.fuel_table .jc08 img{
    width: 95px;
    margin: 0 0 8px 0 !important;
    height: auto;
}

.fuel_table th{ font-size: 13px;}
.fuel_table th .small{ font-size: 10px;}

.fuel_table td.fuel .ruby{
    margin: 0 0 6px 0 !important;
    font-size: 14px;
}



/* ------------------------------------------------------------------------------------------
*
    #pdf_donwload
*
------------------------------------------------------------------------------------------ */
#pdf_download:after{
    content: '';
    clear: both;
    display: block;
}

#pdf_download{
    padding: 40px 0 20px 0;
}

#pdf_download h4{
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
    font-size: 16px;
    border-bottom: 1px solid #818488;
}

#pdf_download h4 span{ margin: 0 0 0 5px; font-size: 12px;}

#pdf_download .pdf{
    width: 170px;
    min-height: 55px;
    display: table;
    float: left;
}

#pdf_download .pdf a{
    color: #fff;
}

#pdf_download .pdf .ico{
    width: 50px;
    height: 55px;
    display: table-cell;
    vertical-align: middle;
    background-image:url(../image_common/parts_ico_pdf.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
}

#pdf_download .pdf .detail{
    height: 55px;
    padding: 0 0 0 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.285em;
}

#pdf_download .pdf .detail .size{
    color: #ccc;
    font-size: 11px;
    display: block;
} 



/* ------------------------------------------------------------------------------------------
*
    element
*
------------------------------------------------------------------------------------------ */
.ico_type{
    width: auto !important;
    height: 18px !important;
    line-height: 19px;
    padding: 0 5px;
    font-size: 11px !important;
    border: 1px solid #ccc;
    color: #666 !important;
    font-weight: normal !important;
    display: inline-block !important;
    vertical-align: text-top;
    position: relative;
    top: -1px;
    left: 10px;
}

.ico_type.block{
    top: 0;
    left: 0;
}

.sup{
    margin: 0 2px;
    padding: 0 !important;
    font-size: 60%;
    line-height: 1em;
    text-indent: 0 !important;
    display: inline-block;
    vertical-align: text-top;
    position: relative;
    top: -2px;
}

h3.sup{ font-size: 40%;}

/* ------------------------------------------------------------------------------------------
*
    Accordion Content
        // car_common.js
*
------------------------------------------------------------------------------------------ */
.accordion_content{
    border-top: 1px solid #ccc;
}

.accordion_inner{
    height: 0;
    margin-top: 20px;
    overflow: hidden;
}

.btn_accordion_detail{
    width: 210px;
    height: 20px;
    margin: 0 auto;
    font-size: 16px;
    text-indent: -25px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.25em;
    background-color: #fff;
    color: #0064a1;
    position: relative;
    top: -12px;
    cursor: pointer;
}

.bg .btn_accordion_detail{
    background-color: #f8f8f8;
}

.btn_accordion_detail.on{
    width: 210px !important;
}

.btn_accordion_detail:before{
    content: 'さらに詳しく';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: -5px;
}

.btn_accordion_detail:after{
    content: '';
    width: 20px;
    height: 100%;
    display: block;
    background-image:url(../image_common/parts_ico_btn_detail_arrow_btm.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    position: absolute;
    top: -1px;
    right: 45px;
}

.btn_accordion_detail:hover{
    color: #008cc9;
}

.btn_accordion_detail.on:before{
    content: '閉じる' !important;
}

.btn_accordion_detail.on:after{
    background-image:url(../image_common/parts_ico_btn_detail_arrow_on.png);
    right: 65px;
}



/* ------------------------------
    #movie_modal
------------------------------ */
#movie_modal{
    width: 100%;
    height: 100%;
    display: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 65535;
}

#movie_modal .movie_overlay{
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

#movie_modal .movie_btn_close{
    width: 30px;
    height: 30px;
    margin: 0 0 0 0;
    background-image:url(../image_common/parts_modal_close.png);
    background-repeat: no-repeat;
    background-size: 30px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2;
    cursor: pointer;
    transition: opacity .1s ease;
}

#movie_modal .movie_btn_close:hover{
    opacity: .7;
}

#movie_modal_inner{
    margin: 0 auto;
    opacity: 0;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 2;
}

}