@charset "UTF-8";

/* スタイルシート
作成者：Hirama Inc.
作成日：R3.03.29

-------------------------------------------------------------------------------------*/

.tab {
width:100%;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-wrap: wrap; 
}

#main .tabContainer.hide {
display: none;
}

/*************************************************************************************
**************************************************************************************

 home

**************************************************************************************
**************************************************************************************/

body.home .tab {}

@media only screen  and (min-width: 701px){
body.home .tab {
gap: 1rem .5rem;
margin:1.5rem 0 2.5rem;
}
}

@media only screen and (max-width: 700px){
body.home .tab {
gap: 1rem .5rem;
margin:2.5rem 0
}
}

body.home .tab li{
display: flex;
flex-direction: column;
justify-content: center;
}

body.home .tab li,
body.home .tab li.select{
border: 2px solid #555;
background-color: #555;
color: #FFF;
border-radius:7px;
cursor: pointer;
text-decoration: none;
line-height: 1.3;
}

@media only screen and (min-width: 701px){
body.home .tab li,
body.home .tab li.select{
text-align: center;
}
}

@media only screen and (max-width: 700px){
body.home .tab li,
body.home .tab li.select{
text-align: left;
}
}

body.home .tab li:hover,
body.home .tab li.select:hover {
border: 2px solid #555;
background-color:transparent;
color: #555;
}

@media only screen  and (min-width: 701px){
body.home .tab li {
width: calc((100% - 5rem) / 6);
}
}

@media only screen and (max-width: 700px){
body.home .tab li {
width: calc((100% - 2rem) / 3);
}

/*Edge*/
@supports (-ms-ime-align: auto){
body.home .tab li {
margin-bottom: 1rem;
}
}
}

@media only screen  and (min-width: 1201px){
body.home .tab li {
padding:10px 10px;
font-size:1.0rem;
}
}

@media only screen  and (min-width: 700px) and (max-width: 1200px){
body.home .tab li {
padding:10px 10px;
font-size:1.0rem;
}
}

@media only screen  and (min-width: 481px) and (max-width: 700px){
body.home .tab li {
padding:10px 10px;
font-size:1.2rem;
}
}

@media only screen and (max-width: 480px){
body.home .tab li {
padding:10px 10px;
font-size:1.0rem;
}
}

body.home .tab li.color_cat_a {
border-color:#F8A94B;
background-color: #F8A94B; 
}

body.home .tab li.color_cat_a.select {
border-color: #F8A94B;
background-color:transparent;
color: #F8A94B;
}

body.home .tab li.color_cat_a:hover,
body.home .tab li.color_cat_a.select:hover {
border-color: #F8D098;
background-color:#F8D098;
color: #FFF;
}

body.home .tab li.color_cat_b {
border-color:#F36C72;
background-color: #F36C72; 
}

body.home .tab li.color_cat_b.select {
border-color: #F36C72;
background-color:transparent;
color: #F36C72;
}

body.home .tab li.color_cat_b:hover,
body.home .tab li.color_cat_b.select:hover {
border-color: #F4B0B2;
background-color:#F4B0B2;
color: #FFF;
}

body.home .tab li.color_cat_c {
border-color:#C987CC;
background-color: #C987CC; 
}

body.home .tab li.color_cat_c.select {
border-color: #C987CC;
background-color:transparent;
color: #C987CC;
}

body.home .tab li.color_cat_c:hover,
body.home .tab li.color_cat_c.select:hover {
border-color: #E1C0E6;
background-color:#E1C0E6;
color: #FFF;
}

body.home .tab li.color_cat_d {
border-color:#5CA4D4;
background-color: #5CA4D4; 
}

body.home .tab li.color_cat_d.select {
border-color: #5CA4D4;
background-color:transparent;
color: #5CA4D4;
}

body.home .tab li.color_cat_d:hover,
body.home .tab li.color_cat_d.select:hover {
border-color: #ACCFEA;
background-color:#ACCFEA;
color: #FFF;
}

body.home .tab li.color_cat_e {
border-color:#54BCE8;
background-color: #54BCE8; 
}

body.home .tab li.color_cat_e.select {
border-color: #54BCE8;
background-color:transparent;
color: #54BCE8;
}

body.home .tab li.color_cat_e:hover,
body.home .tab li.color_cat_e.select:hover {
border-color: #A9DDF5;
background-color:#A9DDF5;
color: #FFF;
}

body.home .tab li.color_cat_f {
border-color:#3BBAB1;
background-color: #3BBAB1; 
}

body.home .tab li.color_cat_f.select {
border-color: #3BBAB1;
background-color:transparent;
color: #3BBAB1;
}

body.home .tab li.color_cat_f:hover,
body.home .tab li.color_cat_f.select:hover {
border-color: #9CDBD6;
background-color:#9CDBD6;
color: #FFF;
}


/*************************************************************************************
**************************************************************************************

 rewalk

**************************************************************************************
**************************************************************************************/

body.rewalk .tab {}

@media only screen  and (min-width: 701px){
body.rewalk .tab {
gap: 1rem .5rem;
margin:1.5rem 0 2.5rem;
}
}

@media only screen and (max-width: 700px){
body.rewalk .tab {
gap: 1rem .5rem;
margin:2.5rem 0
}
}

body.rewalk .tab li{
display: flex;
flex-direction: column;
justify-content: center;
border-style: solid;
border-width: 2px;
}

body.rewalk .tab li,
body.rewalk .tab li.select{
border-radius:7px;
cursor: pointer;
text-decoration: none;
line-height: 1.3;
}

body.rewalk .tab li,
body.rewalk .tab li.select{
text-align: center;
}

@media only screen and (min-width: 601px) and (max-width: 700px){
body.rewalk .tab li:nth-of-type(2),
body.rewalk .tab li:nth-of-type(2).select{
text-align: left;
}
}


@media only screen  and (min-width: 601px){
body.rewalk .tab li {
width: calc((100% - 3rem) / 4);
}
}

@media only screen and (max-width: 600px){
body.rewalk .tab li {
width: calc((100% - 1rem) / 2);
}

/*Edge*/
@supports (-ms-ime-align: auto){
body.rewalk .tab li {
margin-bottom: 1rem;
}
}
}

@media only screen  and (min-width: 1201px){
body.rewalk .tab li {
padding:10px 10px;
font-size:1.0rem;
}
}

@media only screen  and (min-width: 700px) and (max-width: 1200px){
body.rewalk .tab li {
padding:10px 10px;
font-size:1.0rem;
}
}

@media only screen  and (min-width: 481px) and (max-width: 700px){
body.rewalk .tab li {
padding:10px 10px;
font-size:1.2rem;
}
}

@media only screen and (max-width: 480px){
body.rewalk .tab li {
padding:10px 10px;
font-size:1.0rem;
}
}

body.rewalk .tab li {
border-color:#2A9245;
background-color: #2A9245; 
color: #FFF;
line-height: 1.5;
}

body.rewalk .tab li.select {
border-color:#2A9245;
color: #2A9245;
background-color: #FFF;
}

body.rewalk .tab li:hover {
border-color:#E1EFE3;
color: #2A9245;
background-color: #E1EFE3;
}