@charset "utf-8";

/*
fun
----------------------------------------------------------------------------------------------------*/	
.products-cb{
     padding-top: 140px!important;
}
.products-img{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    float: left;
    
    
}
.products-text{
    width: 40%;
     float: left;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 0px;

}
.products p{
    font-size: 100%;
    line-height:2;
    
}
.products-text h2{

    text-align: left;
    font-size: 220%;
    margin-bottom: 60px!important;
}
.position{
    color:#70ab81;
    font-size: 110%!important;
   font-family: 'Inter', sans-serif;
    font-weight: 300;
}
.romaji{

    margin-bottom: 60px;
    font-size: 110%!important;
    font-family: 'Inter', sans-serif;
     font-weight: 300;
}
.text-mg{
    margin-left: 5%;
    margin-right: 5%;
}
@media only screen and (max-width: 640px) {
    .products-cb{
     padding-top: 80px!important;
}
.products-img{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0;
    float: none;    
}
.products-text{
    width: 90%;
    float: none;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 30px;

}
    .position{
     margin-bottom: 10px!important;
}
 .fan-text h2{
    margin-bottom: 10px!important;
}
}

/*テーブル*/

table.brwsr2 {
margin: 0 auto;
width:100%;
border: none;
border-top: solid 1px #666;
border-bottom: solid 1px #666;
border-collapse: separate;
border-spacing: 0 10px;
}

table.brwsr2 th {
width: 22%;
    color: #000;
border-bottom: solid 0px #666;
font-weight: bold;
    padding-top: 0px;
    padding-left: 10px;
    padding-bottom: 0px;
}

table.brwsr2 td {
    padding-top: 0px;
    padding-bottom: 0px;
    border: none;
    text-align: left;
}


#mainImg{
    width: 100%;
    margin-bottom: 15px;
    
}
#mainImg img{
    width: 100%;
    height: auto;
    
}
#subImg {
    display:flex;
     flex-wrap:wrap;
    justify-content: flex-start; 
  gap: 10px 2%;
}


#subImg li{
   width: 15%;
      border-bottom: 3px solid #f8f8fa;
  
}
#subImg li img{
   width: 100%;
    height: auto;
  
}
.current{
    border-bottom: 3px solid #70ab81!important;
 
}
.function h3{
    margin-left: 5%;
    margin-right: 5%;
  
}
.feature-text{
    margin-left: auto;
    margin-right: auto;
    max-width: 750px;
  
}
.products .function .text{
   height: 50px;
    text-align: left!important;
    margin-left: 5%;
    margin-right: 5%;
  
}
@media only screen and (max-width: 640px) {
.feature-text{
     margin-left: 5%;
    margin-right: 5%;
    max-width: 90%;
  
}
 .products .function .text{
   height: 75px;
     
    }
    
}