@charset "utf-8";
/* CSS Document */



/*///////////////////////////////////////////
////////////　　　　共通　　　　////////////
///////////////////////////////////////////*/



.container {
    line-height: 1.8;
}

/*float*/


.f_o{
	overflow:hidden;
}

.f_l{
	float:left;
}

.f_r{
	float:right;
}



/*img*/

*:first-child+html img {
	vertical-align: top;
}
* html img {
	vertical-align: top;
}

a:hover{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: “alpha( opacity=70 )”;

}


/* header */

header{}


/* footer */

footer{}


/*///////////////////////////////////////////
////////////　　　　個別　　　　////////////
///////////////////////////////////////////*/



a {
    color: #333;
    text-decoration: none;
}

#nav {
    background-color: #030303;
    color: #fff;
    overflow: hidden;
    padding: 10px;
    font-size: 14px;
}

#nav .name {
    float: left;
    margin: 10px 0 0;
}


#nav a {
    float: right;
    color: #fff;
    background: #b8030e;
    display: block;
    width: 10%;
    height: 42px;
    text-align: center;
    padding: 10px 0 0;
}


div#pankuzu {
font-size: 12px;
    padding: 16px 5%;
}

.inner{
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}

.bx-viewport {
    height: 680px!important;
}

.bx-pager,
.bx-pager2{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bx-pager a,
.bx-pager2 a{
width: calc(100% / 5);

}

.bx-pager a img,
.bx-pager2 a img{
    width: 94%;
    margin: 1% 4% 8%;
}

.bx-wrapper{
  margin-bottom:0!important;
}

.bx-wrapper2{
  margin-bottom:0!important;
}

.bx-wrapper .bx-prev {
  left: 10px;
  background: url('images/controls.png') no-repeat 0 -32px!important;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('images/controls.png') no-repeat -43px -32px!important;
}




.container img{
  width: 100%;
}

.bx-wrapper {
    box-shadow: none!important;
    background: transparent!important;
    border: none!important;
}


section {
    padding: 5% 0;
}


section#alpine_car {
    padding: 2% 0;
}

section#gaikan{
    padding: 0 0 5%;
background-image: url(../img/bg_mv.png);
    background-size: 100% 64vh;
    background-position: top center;
    background-repeat: no-repeat;
}

section#gaikan p,
section#naiso p{
    background-color: #ccc;
    display: block;
    padding: 2%;
    width: 100%;
    height: 60px;
    position: absolute;
    z-index: 99999;
    bottom: 10px;
}

section#pickup {
    background-image: url(../img/bg1.png);
    color: #fff;
    background-size: cover;
    background-position: top center;
    padding: 5% 0;
}


section#pickup ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

section#pickup ul li {
    width: calc(92%/4);
    padding: 1%;
}


section#pickup p {
    padding: 2% 1% 0;
    line-height: 2.2;
}


section#naiso {
    background-image: url(../img/sbg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5% 0;
}

ul#bxslider li:after,
ul#bxslider2 li:after{
content: "";
    display: block;
    width: 150px;
    height: 150px;
    background-image: url(../img/logo_set.png);
    position: absolute;
    right: 30px;
    bottom: 65px;
    background-repeat: no-repeat;
    background-size: cover;
}









section#base_spec {
    padding: 5% 0;
    background-color: #f4f4f4;

}


section#contact{
    text-align: center;
}

section#contact ul{
    margin:3% 0 ;
}

section#alpine_car h1 {
    font-size: 32px;
    font-weight: bold;
    margin: 1% 0;
}

section#pickup h2,
section#base_spec h2,
section#contact h2 {
    text-align: center;
    font-size: 26px;
    margin: 0 0 3%;
    font-weight: bold;
}


h2:after {
    content: "";
    background-color: #fff;
    width: 50px;
    display: block;
    height: 5px;
    margin: 5px auto;
}

section#base_spec h3 {
    font-size: 18px;
    margin: 0 0 3%;
font-weight: bold;
    border-left: 10px solid #B8030E;
    padding: 0 0 0 10px;
}

section#base_spec a,
section#contact a,
section#common_link ul li a,
section.shop_info a{
    display: block;
    background-color: #B8030E;
    color: #fff;
    width: 240px;
    padding: 20px 25px;
    border-radius: 5px;
    margin: 0 auto 3%;
    text-align: center;
transition: 1.0s ;
    font-weight: bold;

}

section#base_spec a:hover,
section#contact a:hover,
section#common_link ul li a:hover,
section.shop_info a:hover{
    background-color: #000;
    color: #fff;

}


section#base_spec .attention_text {
    background-image: url(../img/bg1.png);
    padding: 2%;
    color: #fff;
    border-radius: 10px;
}




.attention_text:before {
    content: "!";
    background-color: #B8030E;
    color: #fff;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    text-align: center;
    font-size: 42px;
    margin: 5px 0 -40px 25px;
}


.attention_text p {
    text-align: left;
    margin: -51px 0 0 120px;
    display: block;
    font-size: 18px;
}

section#base_spec h3 {
    margin: 5% 0 0;
    text-align: left;
}




.s {
    font-size: 80%;
}

.b {
    font-size: 32px;
    font-weight: bold;
}

.big_price {
    font-size: 160%;
    padding: 0 10px;
}


section#attention {
    padding: 5% 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0;
}


.bx-pager a img,
.bx-pager2 a img  {
    margin: 5px;
}
.bx-pager a.active img ,
.bx-pager2 a.active img {
    border: 5px solid #B8030E;
    margin: 0px;
}




section#base_spec table.f_l, section#base_spec table.f_r {
    width: 48%;
    text-align: left;
    margin: 5% 0 0;
}

section#base_spec table th{
    width: 36%;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding: 1%;
}
section#base_spec table td{
    width: 56%;
    border-bottom: 1px solid #ccc;
    padding: 1%;
}

section#base_spec h2:after ,
section#contact h2:after {
    background-color: #030303;
}



section#common_btn{
    padding: 5% 0;
    background-image: url(../img/sbg3.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;

}


section#common_btn ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

section#common_btn ul li {
    width: calc(94%/3);
    padding: 1%;
}


section#common_link {
    padding: 3% 0;
    background: #000;
}

section#common_link ul{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

section#common_link ul li{
    width: calc(96%/2);
    padding: 1%;
}

section#common_link ul li a{

}

.price{
    text-align: center;
}

.price p {
    padding: 0 0 3%;
}


.scroll-box {
    margin: 3% 0;
}

.contact_shop {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 5%;
}

section#contact img {
    margin: 0 0 5%;
}

section#base_spec a {
    width: 360px;
    margin: 5% auto;
}

section#contact{
    padding: 5% 0;
    background-image: url(../img/sbg2.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}



.shop_info{
    background-image: url(../img/alpine_8_contact_haikei.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10%;
    color: #fff;
}



section#common_btn ul li p{
    font-size: 15px;
    font-weight: bold;
}

section#common_btn ul li img{
padding: 0 0 3%;
}













/*///////////////////////////////////////////
////////////　ブレイクポイント　////////////
///////////////////////////////////////////*/


/*PC・SP切り分け*/

@media (max-width: 640px) {
.pc{ display:none!important;}
}

@media screen and (min-width: 641px) {
.sp{ display:none!important;}
}



/* デスクトップ */
@media screen and (min-width:1401px) {

}

/* ノートパソコン */
@media screen and (min-width:960px) and ( max-width:1400px) {


}

/* タブレット */
@media screen and (min-width:640px) and ( max-width:959px) {

}


/*スマホ*/
@media (max-width: 639px) {


div#pankuzu {
    font-size: 10px;
    padding: 1%;
}

.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.scroll-box img {
  max-width: 100%;
min-width: 980px;
  vertical-align: top;
}

.bx-pager a, .bx-pager2 a {
    width: calc(100%/3);
}


section {
padding: 10% 5%;
}



section#alpine_car {
    padding: 3% 5% ;
}

section#gaikan {
padding: 10% 0;
    background-image: none;
}

.bx-viewport {
    height: 250px!important;
}



ul#bxslider li:after, ul#bxslider2 li:after {
    width: 70px;
    height: 60px;
    right: 20px;
    bottom: 65px;
}


.big_price {
    font-size: 140%;
}


.attention_text:before {
    margin: 5px auto 0;
}

section#base_spec .attention_text {
    padding: 5% 1%;
}

.attention_text p {
    text-align: center;
    margin: 0;
    display: block;
    font-size: 15px;
}

.contact_shop {
    font-size: 14px;
}

section#common_link ul {
    display: -webkit-block;
    display: flex;
}


section#common_link ul li {
    width: 100%;
}


section#common_link ul li a {
    margin: 0 auto;
}

section#base_spec a {
    width: 100%;
    padding: 15% 0;
}


.b {
    font-size: 22px;
    font-weight: bold;
}

section#pickup ul li {
    width: calc(92%/2);
}


#nav .name {
    width: 65%;
    margin: 5px 0 0;
}

#nav a {
    width: 30%;
    height: 30px;
   padding: 3px 0;
}

section#alpine_car h1 {
    font-size: 22px;
    margin: 5% 0;
}

section#pickup h2, section#base_spec h2, section#contact h2 {
    font-size: 20px;
}
.s {
    font-size: 10px;
}


section#gaikan p, section#naiso p {
font-size: 12px;
    height: 50px;
}

section#naiso {
    padding: 10% 0;
}


section#common_btn ul li p {
    font-size: 12px;
}

section#pickup,
section#base_spec,
section#contact,
section#attention,
section#common_btn {
    padding: 10% 5%;
}



}















