@charset "utf-8"; 

/*@font-face {
    font-family: "EngraversGothicBT-regular";
    src: url("../fonts/EngraversGothicBT-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Constantia";
    src: url("../fonts/Constantia.ttf") format("truetype");
}*/


:root{
    --blue:#1b2b7a;
    --red:#e60012;
    --section-margin:10rem;
}

[data-image="logo"]{ width:100%; max-width:16rem; aspect-ratio:376 / 108 }
[data-image="first_pc"]{width:100%;max-width: 100%;aspect-ratio: 2200 / 1450;}
[data-image="first_sp"]{ width:100%; max-width:51.25rem; aspect-ratio:820 / 510 }
[data-image="scroll"]{width:100%; max-width: 2.5rem;aspect-ratio:50 / 50}
[data-image="catch"]{ width:100%; max-width:43.5625rem; aspect-ratio:697 / 813 }
[data-image="bb_five_logo"]{width:100%; max-width: 23.625rem;aspect-ratio:570 / 48}
[data-image="bbfive"]{ width:100%; max-width:100%; aspect-ratio:1500 / 856 }
/* [data-image="bbfive_01"]{ width:100%; max-width:100%; aspect-ratio:300 / 600 }
[data-image="bbfive_02"]{ width:100%; max-width:100%; aspect-ratio:300 / 600 }
[data-image="bbfive_03"]{ width:100%; max-width:100%; aspect-ratio:300 / 600 }
[data-image="bbfive_04"]{ width:100%; max-width:100%; aspect-ratio:300 / 600}
[data-image="bbfive_05"]{ width:100%; max-width:100%; aspect-ratio:300 / 600 } */
[data-image="tire"]{ width:100%; max-width:100%; aspect-ratio:656 / 552 }
[data-image="wheel"]{ width:100%; max-width:100%; aspect-ratio:656 / 552 }
[data-image="parts_kit"]{ width:100%; max-width:100%; aspect-ratio:656 / 552 }
[data-image="accessoris"]{ width:100%; max-width:100%; aspect-ratio:656 / 552 }
[data-image="sansen_01"]{ width:100%; max-width:100%; aspect-ratio:1000 / 666 }
[data-image="sansen_2025"]{ width:100%; max-width:100%; aspect-ratio:1000 / 563 }
[data-image="BBgirls_logo"]{ width:100%; max-width:100%; aspect-ratio:430 / 102 }

[data-image="sansen_02"]{ width:100%; max-width:100%; aspect-ratio:1000 / 666 }
[data-image="sansen_03"]{ width:100%; max-width:100%; aspect-ratio:1000 / 666 }
[data-image="b-style"]{width:100%; max-width: 23rem;aspect-ratio:624 / 168}
[data-image="instagram"]{ width:100%; max-width:18rem; aspect-ratio:460 / 158 }
[data-image="youtube"]{ width:100%; max-width:18rem; aspect-ratio:460 / 158 }
[data-image="x"]{ width:100%; max-width:18rem; aspect-ratio:460 / 158 }
[data-image="weld"]{ width:100%; max-width:18.75rem; aspect-ratio:300 / 100 }
[data-image="d1logo"]{ width:100%; max-width:9.375rem; aspect-ratio:150 / 131 }

@media (min-width:1921px){
    [data-image="first_pc"]{ width: 100%;aspect-ratio: 2550 / 1359; }
}
@media (max-width:820px){
    [data-image="b-style"]{ max-width:30rem; }
}

@media (max-width:480px){
    [data-image="logo"]{ max-width:70%;}
    #link [data-image="instagram"]{ max-width:80%;}
    #link [data-image="youtube"]{ max-width:80%;}
    #link [data-image="x"]{ max-width:80%;}
    #link [data-image="weld"]{ max-width:80%;}
    #link [data-image="logo"]{ max-width:80%;}
}

/*start 共通*/
html{
    font-size:calc(1000px / 62);
    min-height:0;
}
@media (max-width:1000px){
    html{
        font-size:calc(var(--full-vw) / 62);
    }   
}

@media (max-width:820px){
    html{
        font-size:calc(var(--full-vw) / 48);
    }
}

/* @media (max-width:480px){
    html{
        font-size:calc(var(--full-vw) / 34);
    }
}
 */

@media (min-width:481px){ .show-S { display:none !important; } }
@media (min-width:821px){ .show-MS{ display:none !important; } }
@media (min-width:821px){ .show-M { display:none !important; } }
@media (max-width:480px){ .show-M { display:none !important; } }
@media (max-width:480px){ .show-LM{ display:none !important; } }
@media (max-width:820px){ .show-L { display:none !important; } }


* {
    box-sizing: border-box;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    font-family:inherit;
}

body {
    color: #fff;
    font-family: sans-serif;
    background-color:#000;
}
.body-inner{
    overflow:hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

body,p {
    margin: 0;
    font-size: 1rem;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    margin:0;
    line-height: 1;
    font-size:inherit;
}

.image {
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
}
.image a{
    display:block;
    vertical-align:bottom;
    width:100%;
}
.image-exp img{
    object-fit:cover;
    object-position: center;
}

img {
    vertical-align: bottom;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


[href^="tel:"] {
    color: inherit;
    font-size: inherit;
}

.pageTop-btn a,
[href]{
    opacity:1;
    transition:opacity 0.3s ease;
}
.pageTop-btn a.active:hover,
[href]:hover{
    opacity:0.5;
}

[data-smooth]{
    cursor:pointer;
}

.inner-width{
    max-width:calc(1000px + 2rem);
    padding-left:1rem;
    padding-right:1rem;
    margin: 0 auto;
}

header{
    background-color:var(--blue);
    position: absolute;
    left:0;
    top:0;
    z-index: 1000;
    width:100%;
}


.header-inner{
    display:flex;
    justify-content:space-between;
    padding:1rem 3rem;
    max-width:1920px;
    width:100%;
    margin:0 auto;
}
.logo-image{
    text-align:center;
}
.header-inner > ul{
    display:flex;
    align-items:center;
}
.header-inner > ul > li{
    padding: 0 1.3rem;
}

.header-inner > ul > li > a{
    font-weight:bold;
}
@media (max-width:820px){
 .header-inner{
     flex-wrap:wrap;
     justify-content:center;
     padding-top: 0.5rem;
 } 
    .header-inner > ul{
        margin-top:2rem;
        justify-content:center;
        flex-wrap:wrap;
    }
    .header-inner > ul > li{
        /* margin:0 calc((100% / 10) / 2); */
        min-width: 13rem;
        text-align:center;
    }
    .header-inner > ul > li:nth-last-child(3) ~ li{
        margin-top: 1.5rem;
    }
}
@media (max-width:480px){
    .header-inner > ul > li > a{
        font-size:1.5rem;
    }
}

#first{
    /* height:100vh; */
    margin-top:var(--header-height);
}
#first > .sec-inner{
    /* position:relative; */
    /* height:100%; */
}

.first-image{
    max-width:1920px;
    margin:0 auto;
    height:100%;
}
.scroll-row{
    /* position:absolute; */
    /* bottom:5rem; */
    /* left:0; */
    /* right:0; */
    margin-top: 2rem;
}
.scroll-image{
    text-align:center;
}





#catch{
    margin-top:var(--section-margin);
}

.catch-image{
    text-align:center;
}
.catch-text{
    text-align:center;
    margin-top:-6rem;
}
.catch-text h2{
    font-weight:bold;
    font-size: 2rem;
    color:var(--red);
    letter-spacing: 0.2rem;
    line-height: 1.3;
}
.catch-text h2 + span{
    display:block;
    text-align:center;
    font-size: 1.3rem;
    line-height: 1.6;
    margin-top: 2rem;
    letter-spacing: 0.2rem;
}



#news{
    margin-top:var(--section-margin);
}
#news > div > h3{
    max-width:768px;
    margin:0 auto;
    line-height:1;
    margin-bottom: 0.25rem;
    font-weight:bold;
    font-size:2rem;
}

.news-container{
    background-color:#fff;
    /* padding: 2rem 0; */
    max-width:768px;
    margin:0 auto;
    overflow: hidden;
}

.news-row{
    /* background-color:#fff; */
    /* padding: 2rem 0; */
    /* max-width:768px; */
    /* margin:0 auto; */
    overflow: hidden;
}
.news-wrap{
    height: 17.4rem;
    overflow:hidden;
    margin-top: -1px;
}
.news-wrap #news-iframe{
    display: block;
    width:100%;
    height: 100%;
    /* padding-right: 2rem; */
    /* padding-left: 2rem; */
    transition: transform 0.3s ease;
}
.scroll-btn{
    display:flex;
    max-width: 768px;
    margin: 0 auto;
    padding: 0 2rem;
}
.scroll-btn > a{
    display:block;
    height:3.5rem;
    width: calc(50% - 1rem);
    background-color:var(--blue);
    margin:0 auto;
    opacity:1;
    cursor:pointer;
}
.scroll-btn > a{
    position:relative;
}
.scroll-btn > a:hover{
    opacity:0.8;
}
.scroll-btn > a:active{
    opacity:0.65;
}
.scroll-btn > a:before{
    content:"";
    display:block;
    position:absolute;
    left:50%;
    top: 0%;
    width:1.5rem;
    height:1.5rem;
    border-bottom:2px solid #fff;
    border-left:2px solid #fff;
    transform:rotate(-45deg) translate(-50%);
}

.scroll-btn > a:last-child:before{
    transform:rotate(135deg) translate(50%);
    top: 28%;
}

@media (max-width:480px){
    #news > div > h3{
        font-size: 2.5rem;
        /* margin-bottom: -3px; */
    }
    .news-wrap{
        height: 33.9rem;
    }
    .scroll-btn > a{
        height:5.5rem;
    }
    .scroll-btn > a:before{
        top: 20%;
    }
    .scroll-btn > a:last-child:before{
        top: 35%;
    }
}

#bb_five{
    margin-top:var(--section-margin);
}





.bb_five-wrap{
    background-color:var(--blue);
    padding-top:2rem;
    padding-bottom: 1.5rem;
}
.bb_five_logo-row{
    text-align:center;
}

.bb_five-image + span{
    display:block;
    font-size:1.3rem;
    letter-spacing: 0.25rem;
    margin-top: 1rem;
}
.member-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.member-box>.item {
    width: calc((100% - 0rem) / 5);
    margin-top: 1rem;
}
.member-image a{
    display:block;
}
.member-image a img{
    width:100%;
}

@media (max-width:820px) {
    .member-box>.item {
        width: calc((100% - 1rem) / 3);
        margin-top:2rem;
    }
    /* .member-box>.item:nth-child(n + 4){
        margin-top:2rem;
    } */
    
    #bb_five .inner-width{
        max-width:100%;
        padding:0;
    }
    .member-row{
        padding:0 1rem;
    }

    #bb_five .inner-width{
        padding-left:1rem;
        padding-right:1rem;
    }
}


#movie{
    margin-top:var(--section-margin);
    position: relative;
    z-index: 1000;
}



#detail{
    margin-top:var(--section-margin);
}
.detail-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.detail-row{
    background-color:var(--blue);
    margin-top: 8rem;
    padding-top:5rem;
    padding-bottom:5rem;
}
.detail-row .item_1{
    position:relative;
}
.detail-row .item_1:after{
    content:"";
    display:block;
    width:260%;
    aspect-ratio:976 / 1114;
    background-image:url("../img/obj_back.png");
    background-size:cover;
    background-position:center;
    position:absolute;
    top: -100%;
    left: -108%;
    z-index:0;
    pointer-events: none;
}
.detail-row .item_1 img{
    position:relative;
    z-index:10;
}
.detail-box>.item_1 {
    width:calc(100% * (435 / 1000));
}
.detail-box>.item_2{
    width:calc(100% * (526 / 1000));
    position: relative;
    z-index: 100;
}

.detail-title h3{
    font-family:"antique";
    font-size: 3.5rem;
    color:var(--red);
    line-height: 1;
    letter-spacing:0.2rem;
}
.detail-title h3 + span{
    font-size: 1.25rem;
    line-height: 1;
}
.detail-title + p{
    line-height:1.8;
    margin-top:1.2rem;
}

@media (min-width:821px){
    .detail-row:nth-child(even) .item_1{
        order:2;
    }
    .detail-row:nth-child(even) .item_2{
        order:1;
    }
}

@media (max-width:820px) {

    .detail-row .item_1{
        order:2;
        margin-top: 5rem;
    }
    .detail-row .item_1 .image-exp{
        width:80%;
        margin:0 auto;
    }
    .detail-row .item_2{
        order:1;
    }
    
    .detail-box>.item {
        width: calc((100% - 0rem) / 1);
    }
    .detail-row .item_1:after{
        width:130%;
        top:-55%;
        left:-20%;
    }
}
@media (max-width:480px){
    .detail-row .item_1:after{
        width:140%;
        top:-50%;
        left:-15%;
    }
    .detail-title h3{
        font-size: 5rem;
    }
    .detail-title h3 + span{
        font-size:1.7rem;
    }
    .detail-title + p{
        font-size:1.5rem;
        margin-top: 2.5rem;
    }
}

#sansen{
    margin-top:calc(var(--section-margin) * 2);
    /* background-color: #b1b3b3; */
    /* background-color: #ffe7c7; */
    background-color: #ddd;
    position:relative;
    padding-top: 8rem;
    padding-bottom:8rem;
}
#sansen .inner-width{
    position:relative;
}
#sansen:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    display:block;
    height:100%;    
    background-color:var(--blue);
}

.sansen_text-row{
    margin-left:calc(10rem + 2rem);
    color:var(--blue);
    position: relative;
}

.d1logo{
    position:absolute;
    left:-12rem;
    top: 0.5rem;
    width: 10em;
}
.sansen_text-row h2{
    font-weight:bold;
    letter-spacing:0.5rem;
    font-size: 2.8rem;
    font-family: "notosans";
}
.sansen_text-row h2 + p{
    margin-top:2rem;
    letter-spacing:0.2rem;
    line-height:1.8;
}
.sansen_image-row{
    margin-top:2rem;
}
.sansen-box{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}
.sansen-box p{
    color:#000;
    text-align:center;
    margin-top:1.5rem;
    font-size: 0.87rem;
    padding: 0 11rem;
}
.BBgirls_logo-image{
    max-width: 50%;
    margin: auto;
}
.sansen-box .item_1{
    
}
.sansen-box .item_2,
.sansen-box .item_3{
    margin-top: 5rem;
    /* width: calc(65% - 1rem); */
}
@media (min-width:821px){
    #sansen:before{
        width:11.8rem;
    }
    .d1logo{
        width: 8rem;
    }
    
}
@media (min-width:1070px){
    #sansen:before{
        width:calc( ( ( var(--full-vw) - 1000px ) / 2 )  + 10rem);
    }
}
@media (max-width:820px){
    #sansen:before{
        width: 8rem;
    }
    .sansen-box p{
        font-size: 1rem;
        padding: 0 8rem;
        text-align: left;
    }
    .sansen_text-row h2{
        font-size:2rem;
    }
}
@media (max-width:480px){
    #sansen:before{
        width: 6rem;
    }
    .sansen-box p{
    font-size: 1.5rem;
    padding: 0 7rem;
    line-height: 1.5;
}
    .sansen_text-row h2{
        font-size: 4rem;
        line-height: 1.2;
    }
    .sansen_text-row h2 + p{
        font-size:2rem;
    }
    .sansen_text-row{
        padding-right:2.5rem;
    }
    .sansen_image-row{
        margin-top:4rem;
    }
}


#b_style{
    margin-top: var(--section-margin);
}

.b_style-container{
    background-color:var(--blue);
    padding-top:2rem;
    padding-bottom:2rem;
    text-align:center;
    border-radius: 1rem;
}

.b_style_text-row{
    margin-top:1rem;
}
.b_style_text-row p{
    letter-spacing:0.3rem;
    line-height: 1.8;
    font-size: 1.1rem;
}
.b_style_link-row{
    margin-top: 2rem;
}

@media(max-width:820px){
    .b_style_text-row{
        margin-top:2rem;
    }
    
}


#link{
    margin-top: var(--section-margin);
    background-color:#fff;
    padding-top:6rem;
    padding-bottom:6rem;
}
.link-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.link-box>.item {
    /* width: calc((100% - 2rem) / 3); */
    /* margin-top: 1rem; */
    color: #000;
    text-align: center;
    padding: 0 1rem;
}
.link-box > .item > a{
    display:inline-block;
}
.link-box>.item  span{
    letter-spacing:0.25rem;
    font-weight:bold;
}

@media (min-width:821px){
    .link-box>.item:nth-child(n + 4){
        margin-top:4rem;
    }
}
@media (max-width:820px) {
    .link-box>.item {
        max-width: calc((100% - 1rem) / 3);
    }
    .link-box>.item:nth-child(n + 4){
        margin-top:4rem;
        max-width: calc((100% - 1rem) / 2);
    }
    .link-box>.item span{
        font-size:0.9rem;
    }
}

@media (max-width:480px) {
    .link-box>.item:nth-child(n + 4),
    .link-box>.item {
        max-width:none;
        width:100%;
    }
    .link-box>.item + .item{
        margin-top:5rem;
    }
    .link-box>.item span{
        font-size:1.5rem;
    }
}







.pageTop-btn a{
    width: 3rem;
    height: 3rem;
    background-color:rgba(0,0,0,0.5);
    border-radius:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    z-index:100;
    right: 1.2rem;
    bottom: 3rem;
    transition:opacity 0.3s ease;
    pointer-events:none;
    opacity:0;
}

.pageTop-btn a:before{
    content:"";
    display:block;
    width: 0.5rem;
    height: 0.5rem;
    margin-bottom:-0.25rem;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
    transform:rotate(45deg);
}
@media (min-width:481px){
    .pageTop-btn a{
        bottom:1.5rem;
    }
}


/*.pageTop-btn a.active{
    pointer-events:auto;
    opacity:1;
}
*/


footer{
    text-align:center;
    padding-top:3rem;
    padding-bottom:3em;
    letter-spacing:0.2rem;
    background-color: #000;
}


.link_btn-row{
    display: flex;
    justify-content: center;
    background-color: #ddd;
    max-width: 25rem;
    margin:0 auto;
    margin-top: 1.5rem;
}

.link_btn-row a{
    display:block;
    border:1px solid #fff;
    background-color:var(--blue);
    padding:0.5rem;
    width:100%;
    letter-spacing: 0.5rem;
    text-align:center;
}

@media (max-width:480px){
    .link_btn-row a{
        font-size: 1.5rem;
    }
    #sansen .link_btn-row a{
        letter-spacing:0.25rem;
    }
}