@charset "utf-8"; 

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

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

@media (max-width:540px){
    html{
        font-size:calc(100vw / 34);
    }
}


@media (min-width:541px){ .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:540px){ .show-M { display:none !important; } }
@media (max-width:540px){ .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: #000000;
}


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;
    color:#fff;
}

img {
    vertical-align: bottom;
}

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



/*[href]{
    opacity:1;
    transition:opacity 0.3s ease;
}
[href]:hover{
    opacity:0.5;
}*/

[data-smooth]{
    cursor:pointer;
}


.inner-width{
    padding: 0 2rem;
    max-width:1600px;
    margin:0 auto;
}

.small{
    font-size:0.8em;
}


.background-arrow{
    background-image:url(../img/split.png);
    background-position:center;
    height:268px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
.background-arrow > span{
    display:block;
    text-shadow:0 0 1rem rgba(0,0,0,1) , 0 0 1rem rgba(0,0,0,1);
}


/*img setting*/
img{
    display:block;
    width:100%;
    object-fit:cover;
}

.first{
    width:100%;
    aspect-ratio:1920 / 1056;
    background-color: #333;
}
.name{
    width:80%;
    max-width: 700px;
    margin:0 auto;
    aspect-ratio: 1214 / 100;
}
/*end img setting*/



.yellow{
    color:#ffff00;
    font-weight:bold;
    font-size: 1.3em;
    margin:0.25rem;
    letter-spacing:0.05rem;
    position:relative;
    line-height:1;
}
.intro-flex .yellow:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-0.5rem;
    display:block;
    width:100%;
    height:1px;
    background-color:#f00;
}

.yellow.aotf-U{
    letter-spacing:0.1rem;
}


.intro-image{
    position:relative;
}
.intro-image > div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    aspect-ratio: 511 / 218;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6vw;
    text-align:center;
    line-height: 2;
}
@media (min-width:1632px){
    .intro-image > div{
        font-size: 1.6rem;
    }
}
@media (max-width:820px){
    .intro-image > div{
        font-size: 1.2rem;
    }
}
@media (max-width:540px){
    .intro-image > div{
        font-size: 1.8rem;
    }
}

.intro-flex{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    /* padding: 0 1rem; */
}
.intro-flex > .item{
    width: calc((100% - 5rem) / 3);
    margin-top:1rem;
}
@media (max-width:820px){
    .intro-flex > .item{
        /* width:calc((100% - 1rem) / 2); */
        width:calc((100% - 0rem) / 1);
        max-width:480px;
        margin-right:auto;
        margin-left:auto;
    }
    .intro-arrow{
        max-width:480px;
        margin:0 auto;
    }
}
@media (max-width:540px){
    .intro-flex > .item{
        width:calc((100% - 0rem) / 1);
    }
}

.intro-arrow{
    width:100%;
    height:5rem;
    background-color:#f00;
    clip-path: polygon( 0% 0% , 5px 0% , 5px 40% , calc(100% - 5px) 40% , calc(100% - 5px) 0% , 100% 0% , 100% calc(40% + 5px) , calc(50% + 20px) calc(40% + 5px) , 50% 100% , calc(50% - 20px) calc(40% + 5px) , 0% calc(40% + 5px) );
    margin-top:1.5rem;
}

.intro_on{
    width: 35rem;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    text-align:center;
    font-size: 4rem;
    line-height: 1.3;
}
.intro_on > div{
    letter-spacing:0;
}
.intro_on:after{
    content:"";
    position:absolute;
    z-index:-1;
    width: 80%;
    aspect-ratio:1 / 1;
    background-image:url(../img/background.png);
    background-size:cover;
}


.title{
    font-size:3rem;
    text-align:center;
    line-height: 1.5;
}
@media (max-width:540px){
    .title{
        font-size: 2.2rem;
    }
    .background-arrow{
        height: 160px;
        background-size: auto 100%;
    }
}

.text-row > p{
    color:#fff;
    text-align: center;
    line-height: 2.5;
    font-size: 1.3rem;
}




.valino_tire{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.valino_tire > .item{
    width:calc((100% - 1rem) / 2);
}
@media (max-width:540px){
    .valino_tire > .item{
        width:calc((100% - 0rem) / 1);
    }
    .valino_tire > .item + .item{
        margin-top:1rem;
    }
}


#valino_tire{
    padding:5rem 0;
    background-color:#4d4d4d;
}


#spec{
    text-align:center;
    padding: 5rem 0;
    background-color: #262626;
}
#spec strong{
    letter-spacing:0.25rem;
    font-size:1.5rem;
    line-height: 1;
}
.tire-image{
    max-width:28rem;
}

.table-resposive{
    margin-top: 1rem;
}
.table-resposive,
.js-scrollable{
    display:inline-block;
}

#spec table{
    border-collapse:collapse;
}
#spec table tr:first-child{
    background-color:#a5a6a5;
    color:#000;
}
#spec table tr th{
    /* color:#000; */
    font-weight:normal;
}
#spec table tr td:first-child{
    /* background-color:#000; */
}
#spec table tr th,
#spec table tr td{
    border-right:2px solid #fff;
    padding:0 1rem;
}
#spec table tr th:last-child,
#spec table tr td:last-child{
    border-right:0px solid #fff;
}

#spec table tr:first-child{
    border-top:2px solid #fff;
}
#spec table tr{
    border-bottom:2px solid #fff;
}

.space1{
    height:5rem;
}
.space2{
    height:3rem;
}
.space3{
    height:10rem;
}
.space4{
    height:1.5rem;
}

@media(max-width:540px){
    .space1{
        height:3rem;
    }
    .space2{
        height:2rem;
    }
    .space3{
        height:8rem;
    }
    .space4{
        height:1rem;
    }
    
}