@charset "UTF-8";

@media screen and (min-device-width: 769px) {
#sc-common-header #grade,
#sc-common-header #grade .main_btn img {
width: calc(230px / 2);
}

#sc-common-header #design,
#sc-common-header #design .main_btn img {
width: calc(320px / 2);
}

#sc-common-header #accessory,
#sc-common-header #accessory .main_btn img {
width: calc(210px / 2);
}

#sc-common-header #utility,
#sc-common-header #utility .main_btn img {
width: calc(220px / 2);
}

#sc-common-header #driving,
#sc-common-header #driving .main_btn img {
width: calc(150px / 2);
}

#sc-common-header #safety,
#sc-common-header #safety .main_btn img {
width: calc(250px / 2);
}

#sc-common-header #spec,
#sc-common-header #spec .main_btn img {
width: calc(140px / 2);
}

#sc-common-header #special,
#sc-common-header #special .main_btn img {
width: calc(182px / 2);
}

#sc-common-header .sub li.compare {
text-align: right;
}

#sc-common-header .sub li.compare a {
border-radius: 25px;
border: 1px solid #666;
padding: 0.5em 2.0em 0.3em 1.8em;
color: #333;
background: url(https://www.subaru.jp/sc-common/Img/common_lineup/arrow/arrow_m.png) no-repeat right 10px center;
background-size: 6px;
}

/* sitecore menu */
/* 一列 有图 */
#sc-common-header .column1 {
width: 390px;
overflow: hidden;
}

/* 两列 有图 */
#sc-common-header .column2 {
width: 750px;
overflow: hidden;
}

/* 一列 无图 */
#sc-common-header .column1.thumb-none {
width: 220px;
overflow: hidden;
}

#sc-common-header .column1.thumb-none .thumb {
display: none;
}

/* 两列 无图 */
#sc-common-header .column2.thumb-none {
width: 440px;
overflow: hidden;
}

#sc-common-header .column2.thumb-none .thumb {
display: none;
}

/* 一行 有图 无按钮 */
#sc-common-header .row1 {
height: 125px;
}

/* 一行 有图 有按钮 */
#sc-common-header .row1.compare-block {
height: 155px;
}

/* 一行 无图 无按钮 */
#sc-common-header .row1.thumb-none {
height: 85px;
}

/* 一行 无图 有按钮 */
#sc-common-header .row1.thumb-none.compare-block {
height: 125px;
}

/* 两行 有图 无按钮 */
#sc-common-header .row2 {
height: 240px;
}

/* 两行 有图 有按钮 */
#sc-common-header .row2.compare-block {
height: 280px;
}

/* 两行 无图 无按钮 */
#sc-common-header .row2.thumb-none {
height: 170px;
}

/* 两行 无图 有按钮 */
#sc-common-header .row2.thumb-none.compare-block {
height: 210px;
}

/* 三行 有图 无按钮 */
#sc-common-header .row3 {
height: 360px;
}

/* 三行 有图 有按钮 */
#sc-common-header .row3.compare-block {
height: 400px;
}

/* 三行 无图 无按钮 */
#sc-common-header .row3.thumb-none {
height: 256px;
}

/* 三行 无图 有按钮 */
#sc-common-header .row3.thumb-none.compare-block {
height: 296px;
}

/*-------------------------------------------------
/////////// sub menu position end ////////////////*/

#sc-common-header .rpsv_menu {
position: relative;
}

#sc-common-header .rpsv_menu .menu_inner {
width: 100%;
margin: 0 auto;
}

#sc-common-header .rpsv_menu .sp_menu {
display: none;
}

#sc-common-header .rpsv_menu .top_logo {
height: 60px;
background: #f8f8f8;
}

#sc-common-header .rpsv_menu .breadcrumb {
margin: -20px auto 0;
max-width: 1200px;
width: 96%;
}

#sc-common-header .rpsv_menu h1 {
width: 240px;
height: 60px;
margin: 0 auto;
position: relative;
}

#sc-common-header .rpsv_menu h1 .logo_svg {
width: 160px;
height: 40px;
position: absolute;
top: 5px;
left: 20px;
}

#sc-common-header .rpsv_menu h1 .logo_svg #logo_body {
width: 160px;
}

#sc-common-header .rpsv_menu nav {
width: 100%;
height: 50px;
}

#sc-common-header .rpsv_menu nav ul.menu_block {
display: flex;
justify-content: space-between;
position: relative;
width: 96%;
top: auto;
left: auto;
margin: 0 auto;
padding: 10px 0;
max-width: 1200px;
}

#sc-common-header .rpsv_menu nav ul li img {
height: auto;
margin: 0;
}

#sc-common-header .rpsv_menu .main_btn {
height: 30px;
overflow: hidden;
}

#sc-common-header .rpsv_menu a.menu_btn:hover > .main_btn img {
margin: -32px 0 0;
}

#sc-common-header .rpsv_menu .submenu .sub {
display: none;
background: #fff;
border: 6px solid #eee;
border-radius: 5px;
top: 50px;
left: auto;
right: auto;
bottom: auto;
z-index: 1000;
position: absolute;
box-sizing: content-box;
box-shadow: 0 4px 6px #ccc;
padding: 10px 0 0;
}

#sc-common-header .rpsv_menu .active .menu_arrow {
content: "";
border-bottom: 10px solid #eee;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: 40px;
left: 0;
z-index: 1000;
}

#sc-common-header .rpsv_menu nav .active .submenu .sub {
display: inline-flex;
flex-flow: column wrap;
justify-content: flex-start;
}

#sc-common-header .rpsv_menu .active .submenu .sub ::after {
border: none;
}

/*    .rpsv_menu nav .active .submenu li :hover{
opacity: 0.8;
}*/
#sc-common-header .rpsv_menu .submenu li {
padding: 10px;
margin: 0 10px;
}

#sc-common-header .rpsv_menu .submenu .thumb {
position: relative;
margin: 0 0 0 10px;
}

#sc-common-header .rpsv_menu .submenu .stxt,
#sc-common-header .rpsv_menu .submenu .thumb {
display: inline-block;
width: 160px;
}

#sc-common-header .rpsv_menu .submenu .stxt,
#sc-common-header .rpsv_menu .submenu a .stxt {
color: #333;
font-weight: bold;
vertical-align: top;
}

#sc-common-header .rpsv_menu .submenu .stxt strong {
display: block;
margin: 0 0 10px;
font-size: 1.1em;
}

#sc-common-header .rpsv_menu .submenu .ptxt {
font-size: 0.9em;
}

#sc-common-header .rpsv_menu .submenu a .thumb .price {
font-size: 1em;
text-align: center;
display: inherit;
font-weight: bold;
color: #333;
}

#sc-common-header .rpsv_menu .submenu .thumb img {
width: 100%;
}

#sc-common-header .rpsv_menu .submenu .topcontent {
cursor: pointer;
}

#sc-common-header .rpsv_menu .borderline {
border-bottom: 1px solid #eee;
}

#sc-common-header .rpsv_menu .submenu .photo .thumb::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 24px;
height: 100%;
background: url(https://www.subaru.jp/sc-common/Img/common_lineup/arrow/arrow_m_w.png) 50% 50% no-repeat rgba(0, 0, 0, 0.6);
transform: rotate(180deg);
}

#sc-common-header .rpsv_menu .submenu .photo .thumb::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 24px;
height: 100%;
background: url(https://www.subaru.jp/sc-common/Img/common_lineup/arrow/arrow_m_w.png) 50% 50% no-repeat rgba(0, 0, 0, 0.6);
}

#sc-common-header .rpsv_menu .submenu .movie .thumb::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: url(https://www.subaru.jp/sc-common/Img/common_lineup/btn/btn_play.png) 50% 50% no-repeat rgba(0, 0, 0, 0.3);
background-size: 50%;
}
}

@media screen and (max-device-width: 768px) {
#sc-common-header #container {
position: relative;
}

#sc-common-header #container,
#sc-common-header #contents,
#sc-common-header #lineup_contents {
width: 100%;
min-width: 320px;
}

#sc-common-header #lineup_contents {
background: #fff;
width: 100%;
overflow: hidden;
}

/*inactive elements
---------------------------------------------------*/
#sc-common-header #gnav_header,
#sc-common-header #conversion,
#sc-common-header #footer_campaign,
#sc-common-header #common_footer,
#sc-common-header #footer {
display: none !important;
}

/*SP menu
-------------------------------------------------*/
#sc-common-header .rpsv_menu {
background: #fff;
}

#sc-common-header .sp_menu {
width: 100%;
height: 0;
margin: 0 0 24px;
padding: 30px 0 0;
z-index: 99;
background: #eee;
position: relative;
display: block;
top: 0;
}

#sc-common-header .sp_menu h1 {
width: 120px;
height: calc(120px*0.3);
position: absolute;
top: -28px;
left: 50%;
margin: -3px 0 0 -55px;
z-index: 300;
padding: 0;
overflow: hidden;
}

#sc-common-header .top_logo {
position: relative;
}

#sc-common-header .sp_menu h1 .logo_svg {
width: 100px;
height: 30px;
position: absolute;
top: 0;
}

#sc-common-header .sp_menu .hnbgr {
position: absolute;
left: 15px;
top: 50%;
margin: -9px 0 0;
cursor: pointer;
}

#sc-common-header .sp_menu .hnbgr img {
width: 30px;
height: auto;
}

#sc-common-header .sp_menu nav {
width: 100%;
height: auto;
margin: 0;
z-index: 0;
display: none;
position: relative;
}

#sc-common-header .rpsv_menu nav::after {
content: "";
width: 100%;
height: 10px;
display: block;
background: linear-gradient(rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
position: absolute;
bottom: -10px;
}

#sc-common-header .sp_menu nav .menu_block {
width: 100%;
height: auto;
margin: 0 auto;
/*padding: 0 0 500px;*/
/*position: absolute;
top: auto;
left: 0;*/
padding: 0;
background: #fff;
z-index: 100px;
}

#sc-common-header .sp_menu nav ul .mainmenu {
float: none;
margin: 0;
border-bottom: solid #ccc 1px;
width: 100%;
padding: 0;
}

#sc-common-header .sp_menu .top_arrow {
position: absolute;
top: -5px;
left: 50%;
margin: 0 0 0 -12px;
display: none;
}

#sc-common-header .sp_menu .mainmenu {
width: auto;
height: auto;
position: relative;
z-index: 100;
}

#sc-common-header .sp_menu a.menu_btn {
display: block;
height: 30px;
cursor: pointer;
margin: 0;
padding: 5px 0;
position: relative;
}

#sc-common-header .sp_menu .sub li.compare a {
padding: 10px 50px 10px 10px;
font-size: 15px;
}

#sc-common-header .sp_menu .sub li.compare a::after {
content: url(https://www.subaru.jp/sc-common/Img/common_lineup/arrow/arrow_m.png);
position: absolute;
top: 50%;
right: 30px;
margin: -10px 0 0;
}

/*.sp_menu a.menu_btn .main_btn::after,*/
#sc-common-header .sp_menu .sub li .stxt::after {
content: url(https://www.subaru.jp/sc-common/Img/common_lineup/arrow/arrow_m.png);
position: absolute;
top: 50%;
right: 30px;
margin: -10px 0 0;
}

#sc-common-header .sp_menu .mon::after {
content: none;
}

#sc-common-header .sp_menu .main_btn {
height: 30px;
position: relative;
overflow: hidden;
margin: 0;
}

/*////  icon animation  ////*/
#sc-common-header .sp_menu .main_btn::before {
content: "";
display: block;
position: absolute;
background: #999;
width: 20px;
height: 2px;
right: 26px;
top: 50%;
margin: -1px 0 0;
}

#sc-common-header .sp_menu .main_btn:active::before {
transition: 0.3s;
transform: rotate(90deg);
}

#sc-common-header .sp_menu .main_btn.open::before {
width: 2px;
right: 35px;
transform: rotate(90deg);
}

#sc-common-header .sp_menu .main_btn::after {
content: "";
display: block;
position: absolute;
background: #999;
width: 2px;
height: 18px;
right: 35px;
top: 50%;
margin: -9px 0 0;
}

#sc-common-header .sp_menu .main_btn:active::after {
transform: rotate(90deg);
transition: 0.3s;
}

#sc-common-header .sp_menu .main_btn.open::after {
transform: rotate(90deg);
}

/*////////////////////////////*/

#sc-common-header .sp_menu .mainmenu .main_btn img {
position: absolute;
left: 5px;
width: auto;
height: 55px;
}

/*////sub menu////*/
#sc-common-header .sp_menu .submenu {
position: relative;
top: auto;
left: auto;
background: none;
border-bottom: none;
border-radius: 0;
z-index: auto;
display: block;
box-shadow: none;
width: 100%;
}

#sc-common-header .sp_menu .submenu .thumb,
#sc-common-header .sp_menu .submenu .thumb img {
display: none;
}

#sc-common-header .sp_menu .posi1::after,
#sc-common-header .sp_menu .posi2::after,
#sc-common-header .sp_menu .posi3::after,
#sc-common-header .sp_menu .posi4::after {
content: none;
position: relative;
top: auto;
margin: 0;
}

#sc-common-header .sp_menu .sub li {
display: block;
margin: 0;
width: 100%;
border-top: solid #eee 1px;
position: relative;
}

#sc-common-header .sp_menu .sub li a {
display: block;
margin: 0;
width: 100%;
}

#sc-common-header .sp_menu .sub li span {
display: table-cell;
vertical-align: middle;
padding: 10px 20px 0 0;
}

#sc-common-header .sp_menu .sub li .stxt {
width: 100%;
margin: 0;
font-size: 12px;
padding: 10px 50px 10px 10px;
color: #333;
line-height: 1.4em;
letter-spacing: 0;
}

#sc-common-header .lineup_menu_area .sub li .ptxt {
display: none;
}

#sc-common-header .sp_menu .sub li .stxt strong,
#sc-common-header .sp_menu .sub li.spcont .stxt {
font-size: 15px;
font-weight: normal;
display: block;
margin: 0;
line-height: 1.4em;
}

#sc-common-header .sp_menu .sub hr {
display: none;
}

#sc-common-header .sp_menu .sub li.spcont {
display: block;
padding: 0;
width: auto;
height: auto;
margin: 0 auto 0;
}

#sc-common-header .sp_menu .sub li.spcont .spbnr {
display: none;
}
}

@media screen and (-ms-high-contrast: active), #sc-common-header  (-ms-high-contrast: none) {
#sc-common-header .row1.compare-block {
height: 165px;
}

#sc-common-header .row1.thumb-none.compare-block {
height: 135px;
}

#sc-common-header .row2 {
height: 245px;
}

#sc-common-header .row2.compare-block {
height: 290px;
}

#sc-common-header .row2.thumb-none.compare-block {
height: 220px;
}

#sc-common-header .row3 {
height: 375px;
}

#sc-common-header .row3.compare-block {
height: 415px;
}

#sc-common-header .row3.thumb-none.compare-block {
height: 306px;
}
}