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

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

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


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


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

body {
    color: #333;
    font-family: sans-serif;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

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

a:hover{
    opacity:0.7;
}

img{
    width:100%;
    display: block;
    vertical-align: bottom;/*余白を消す*/
    max-width: 100%;
    height: auto;
}

#first{
    box-shadow: 0 0 30px 0 rgba(0,0,0,1);
    position:relative;
    z-index:1;
}

#samurai .container{
    background-image:url('../img_n/samurai_bg.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:auto;
    display: flex;
    flex-direction:column;
    align-items:center;
    padding:0 20px;
    
}

#samurai .inner1 img{
    max-width:500px;
    margin-bottom:30px;
}

#samurai .inner2{
    font-size:1.2rem;
    line-height:2rem;
}

#product{
    background-color:#11141e;
    height:auto;
}

#product{
    background-image:url('../img_n/product_bgtire.png');
    background-position: right -50px top 350px;
    background-repeat:no-repeat;
    background-size:cover;
    background-size:700px auto;
    box-shadow: 0 0 30px 0 rgba(0,0,0,1);
        overflow:hidden;
}

#product .container{
    display: flex;
    flex-direction:column;
    align-items:center;
    color:#fff;
    max-width:1000px;
    margin:0 auto;
    padding:120px 10px;
}

#product .inner1{
    margin-bottom:100px;
}
#product .inner1 img{
    max-width:600px;
    position:relative;
    z-index: 1;
}

#product .inner2{
    display:flex;
    align-items:center;
    margin-bottom:100px; 
}

#product #HERO86 .inner2{
    margin-bottom:0; 
}

#product .inner2 .contents1{
    flex:0 0 40%;
    position:relative;
}



#product .inner2 .contents1 img{
    position:relative;
    z-index: 1;
}


#product .inner2 .contents1::after{
    content:"";
    position:absolute;
    right:-70%;
    top:-40%;
    width:210%;
    height:210%;
    background-image:url('../img_n/product_bglight.png');
    background-repeat:no-repeat;
    background-size:contain;
    pointer-events:none;

}

#product .inner2 .contents2{
    flex:0 0 60%;
}

#product .inner3{
    display:flex;
    align-items:center;
    width:100%;
}



#product .inner3 .contents1{
    flex:0 0 40%;
    min-width:0;
}



#product .buybtn{
    text-align:center;
 }

  #product .buybtn a{
    text-align: center;
    background:#ffe800;
    color:#11141e;
    padding:10px 40px;
    border-radius:50px;
    margin:0 auto;
 }

#product .inner3 .contents2{
    flex:0 0 60%;
    min-width:0;
}

#product .spec_head{
    display:flex;
    align-items:center;
    column-gap:15px;
    flex-wrap:wrap;
}


#product .spec .p_name{
    color:#ffe800;
    font-size:1.5rem;
    font-weight: bold;
    white-space:nowrap;
}
#product .spec .tw{
white-space:nowrap;
}

#product .spec .tw span{
    background-color: #fff;
    color:#000;
    margin-right:10px;
    padding:5px 10px;
    border-radius: 5px;
    font-size:0.8rem;
    display:inline-block;

}


#product .contents1,
#product .contents2{
    padding:0 20px;
}

#product .prolist table{
 border-collapse: collapse;
 font-size:.8rem;
    width:100%;
   text-align: center;
    margin-top:10px;
    margin-bottom:30px;

}

#product .prolist table th{
    background-color:rgb(183, 183, 183);
    color:#000;
}


#product .prolist table th,
#product .prolist table td{
    border-bottom:solid 1px #fff;
     border-right:solid 1px #fff;
     padding:5px 10px;
}

#product .prolist table th:last-child,
#product .prolist table td:last-child {
  border-right: none;
}

.chart-slider{
    width:100%;
    min-width:0;
}
.splide__pagination__page.is-active{
    background:#ffe800!important;
    opacity:1;
}

#product #HERO86 .inner2 .contents1{
    flex:0 0 50%;
}
#product #HERO86 .inner2 .contents1 img{
    width:80%;
    margin:0 0 0 auto;
}
#product #HERO86 .inner2 .contents2{
    max-width:40%;
}

#product #comparation .inner4{
     font-size:2rem;
     text-align: center;
     font-weight: bold;
}
#product #comparation .inner5{
     background:#fff;
     padding-top:30px;
}

.comparison_chart-table{
    border-collapse:collapse;
    font-weight: bold;
}
.comparison_chart-table th{
    text-align:left;
    color:#000;
}
.comparison_chart-table th + th{
    padding-left:0.7rem;
}
.comparison_chart-table :not(:first-child) td{
    border-top:1px solid #888;
}
.comparison_chart-table td{
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
}
.chart-wrap{
    display:flex;
}
.chart-wrap > span{
    display:block;
    width: 1.3rem;
    text-align: right;
    font-size: 1rem;
}
.chart-wrap > span > span{
    font-size:0.5em;
}
.chart{
    display:flex;
height:1.5rem;
    margin-left: 0.4rem;
    transform:skewX(-25deg)
}
.chart > span{
    display:block;
    width: 1.1rem;
    height:100%;
    margin-right:0.25rem;
    background-color:#ddd;
    position:relative;
}
.chart > span:before{
    content:"";
    display:block;
    width:0%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

.chart > .gauge_100:before{
    width:100%;
}
.chart > .gauge_50:before{
    width:50%;
}

.comparison_chart-table .even{
    color:#000;
}
.comparison_chart-table .even .chart > span:before{
    background-color:#000;
}
.comparison_chart-table .odd{
    color:#dc241a;
}
.comparison_chart-table .odd .chart > span:before{
    background-color:#dc241a;
}
.spec_table-title{
    display:inline-block;
    background-color:#000;
    color:#fff;
    font-weight:normal;
    font-size:0.75rem;
    padding:0.1rem 0.5rem;
}
.note-text{
    font-size:0.7rem;
    font-weight:normal;
    margin-top: -0.5rem;
    display: block;
    color:#000;
}
.note-row{
    font-size:0.8rem;
    margin-top: 0.5rem;
}



#d1gp{
    height:auto;
    padding:0 20px;
}

#d1gp .inner1{
    max-width:1300px;
    margin:100px auto;
   background-image:url('../img_n/d1gp_bgsansen.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:auto;
    display:flex;
    align-items: center;
    gap:50px;
    padding:80px;
    
}


#d1gp .inner1 .contents1{
    flex:3;
    
}
#d1gp .inner1 .contents2{
    flex:7;
}
#d1gp .inner1 .contents2 p{
    color:#fff;
    margin-top:50px;
}



#d1gp .inner2{
    max-width:1000px;
    margin:0 auto;
}
#d1gp .inner2 .contents1 .kakomi_oya{
    max-width:800px;
    background-image: linear-gradient(90deg, rgba(54, 54, 54, 1) 35%, rgba(20, 20, 20, 1));
    margin:-20px auto 100px auto;
    position:relative;
    z-index:1;
    border-radius: 20px;
    border:solid 1px #fff;
    display:flex;
    gap:20px;
    align-items:center; 
    padding:30px 50px;
    color:#fff;
}
#d1gp .inner2 .contents1 .kakomi_left{
    flex:4;
    font-size:2.5rem;
    font-weight:bold;
    border-right:solid 1px #808080
}
#d1gp .inner2 .contents1 .kakomi_right{
    flex:6;
}

#d1gp .inner3{
    max-width:400px;
    margin:0 auto;
}
#d1gp .inner3 a{
    display: inline-block;
    -webkit-filter: drop-shadow(0 0 20px rgba(0,0,0,1)); /* Safari用 */
    transition: filter 0.3s, -webkit-filter 0.3s;
    will-change: filter; /* 再描画を最適化 */
    margin-bottom:100px;
}
#d1gp .inner3 a:hover{
    filter:none;
    -webkit-filter: none;
    opacity:0.7;
}

footer{
    box-shadow: 0 0 30px 0 rgba(0,0,0,1);

}

footer .container{
    background-image:url('../img_n/footer_bg.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    height:auto;
    display: flex;
    flex-direction:column;
    align-items:center;
    padding:0 20px;
}
footer .inner1{
    margin:80px 0 10px 0;
}
footer .inner1 img{
    max-width:400px;
    margin:0 auto;
}
footer .inner2{
    display:flex;
    gap:15px;
    margin-bottom:50px;
}
footer .inner2 a{
   max-width:60px;
}
footer .inner3{
    color:#fff;
    text-align: center;
}
footer .inner3 .copy{
    margin-bottom:20px;
}
footer .inner3 .asset{
    margin-bottom:20px;
}


@media (max-width:768px){

#product{
    background-image:none;
}
#product .container{
    padding:70px 0;
}
#product .inner1{
    margin-bottom: 50px;
}
#product .inner2{
    margin-bottom: 50px;
}
#product .inner2 .contents1{
    margin-bottom:40px;
}
#product .inner2,
#product .inner3{
    display:flex;
    flex-direction:column;
}
#product .inner3 .contents1{
    margin-bottom:40px;
    order:2;
}
#product .inner2 .contents1 img{
    width:80%;
    margin:0 auto;
}

#product .inner3 .contents2{
    order:1;
     margin-bottom:30px;
}

#product #HERO86 .inner2 .contents1{
    flex:0 0 50%;
}
#product #HERO86 .inner2 .contents1 img{
    width:80%;
    margin:0 auto;
}
#product #HERO86 .inner2 .contents2{
    max-width:100%;
}

#d1gp .inner1{
    flex-direction: column;
    padding:50px 30px;
    gap:0;
    margin:70px auto;
}
#d1gp .inner1 .contents2 p{
    margin-top:0;
}
#d1gp .inner1 .contents1 .drift_logo img{
    max-width:300px;
    margin:20px auto;
}
#d1gp .inner2 .contents1 .kakomi_oya{
    flex-direction: column;
    max-width:90%;
    padding:20px 30px;
    margin:-15px auto 50px auto;
}
#d1gp .inner2 .contents1 .kakomi_left{
    border-right:none;
    border-bottom:solid 1px #808080;
}
}