﻿.maindesign .feature-hdg3{
    border-left: 3px solid #e5002d;
    padding: 0.3rem 1rem 0.4rem; 
}

.maindesign .slider-content{
    margin-top: calc(40px - 0.75rem);
}
/*
.maindesign .comparison-table th:first-child{
    position: inherit;
}
.maindesign .comparison-table th:first-child::before{
    display: none;
}
*/

.maindesign .vertical-writing span{
    -webkit-writing-mode: vertical-rl; /* Safari用 */
    writing-mode: vertical-rl;
    -webkit-text-orientation: upright; /* Safari/iOS用 */
  text-orientation: upright;
    text-orientation: mixed;
    white-space: nowrap;
    display: inline-block; 
}
.maindesign .comparison-table th{
    background-color: #fef4e0;
}
.maindesign .comparison-table .vertical-writing{
    background-color: #feeabe;
}

.maindesign .comparison-table .basic th{
    background-color: #eee;
}
.maindesign .comparison-table .basic .vertical-writing{
    background-color: #ddd;
}

.maindesign .comparison-table td{
    width: 220px;
    text-align: center;
}

.maindesign .comparison-table .size td{
    font-size: 2.0rem;
    font-weight: bold;
    color: #fff;
}
.maindesign .comparison-table .size span{
    font-size: 1.0rem;
    display: block;
}

.maindesign .comparison-table .s20{
    background-color: #8f82bc;
}
.maindesign .comparison-table .s24{
    background-color: #eb6ea5;
}
.maindesign .comparison-table .s24-26{
    background-image: linear-gradient(105deg, #eb6ea5 50%, #00b0ec 50%);
}
.maindesign .comparison-table .s26{
    background-color: #00b0ec;
}
.maindesign .comparison-table .s27{
    background-color: #115fad;
}

.maindesign .comparison-table .emphasis td{
    font-size: 2.0rem;
    font-weight: bold;
}
.maindesign .comparison-table .emphasis span{
    font-size: 1.0rem;
    padding-right:  5px;
}

.maindesign .comparison-table .b5{
    background-color: #fef4e0;
}
.maindesign .comparison-table .b8{
    background-color: #feeabe;
}
.maindesign .comparison-table .b12{
    background-color: #fcd475;
}
.maindesign .comparison-table .b14{
    background-color: #fbca4d;
}
.maindesign .comparison-table .b16{
    background-color: #fabf1c;
}




@media screen and (max-width: 767px){
.maindesign .slider-content{
    position: relative;
    overflow: scroll;
}
.maindesign .comparison-table td{
    width: 160px;
}
.maindesign .comparison-table .basic .arrow-r::after{
    display: none;
}

.maindesign .comparison-table .fs-medium{
    font-size: 0.8em;
}

.maindesign .bicycle-search{
    justify-content: space-between;
}
.maindesign .bicycle-search a{
    width: calc(48% - 22px);
    margin-right: 0; 
}
.maindesign .comparison-table th, .maindesign .comparison-table td{
    padding: 5px;        
}
.maindesign .comparison-table .basic th,
.maindesign .comparison-table .emphasis th{
    left: 32px;
    position: sticky; 
}
.maindesign .comparison-table .basic .vertical-writing,
.maindesign .comparison-table .emphasis .vertical-writing {
    left: 0; 
}
.maindesign .comparison-table .basic .vertical-writing span,
.maindesign .comparison-table .emphasis .vertical-writing  span{
    padding: 0;
    display: block;
}
.maindesign .comparison-table .mileage th {
    left: 64px;
}   
.maindesign .comparison-table .mileage .vertical-writing {
    left: 32px;
    z-index: 10;
}   
.maindesign .comparison-table .basic th::before,
.maindesign .comparison-table .emphasis th::before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #333;          
}
.maindesign .comparison-table .flatbtn{
    z-index: -1;
}
    .maindesign .comparison-table .vertical-writing{
        width: 22px;
    }  
    
    
}