@charset "UTF-8";


ul.category_list {display:flex;flex-wrap:wrap;}
ul.category_list li {width:calc(17.6% - 24px); margin: 0 3% 3% 0;text-align: center;border: 2px solid #5EB7E8;border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding: 10px;
transition: all 0.2s ease;
}
ul.category_list li:nth-child(5n) {margin-right: 0;}
ul.category_list li:nth-child(2n) {padding: 10px;}
ul.category_list li .category_icon {}
ul.category_list li .category_icon img {width: 60%;margin:0 auto 3%;}
ul.category_list li p.category_text {
font-size: 1vw;line-height: 1.6; min-height: 3vw;color: #5EB7E8;
color: inherit;
position: inherit;
top: inherit;
left: inherit;
transform: inherit;
}
ul.category_list li a {text-decoration: none;}
ul.category_list li:hover {opacity: 0.5;}
@media screen and (max-width: 1060px) {


}
@media screen and (max-width: 767px) {
ul.category_list {display:flex;flex-wrap:wrap;}
ul.category_list li {width:calc(48% - 24px); margin: 0 4% 4% 0;text-align: center;border: 2px solid #5EB7E8;border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding: 10px;
transition: all 0.2s ease;
}
ul.category_list li:nth-child(5n) {margin-right: inherit;}
ul.category_list li:nth-child(n+3) {margin: 0 4% 4% 0;}
ul.category_list li:nth-child(2n) {padding: 10px;margin-right: 0;}

ul.category_list li .category_icon {}
ul.category_list li .category_icon img {width: 60%;margin:0 auto 3%;}
ul.category_list li p.category_text {
font-size: 2.8vw;line-height: 1.6; min-height: 3vw;color: #5EB7E8;
color: inherit;
position: inherit;
top: inherit;
left: inherit;
transform: inherit;
}
ul.category_list li p.category_text span.pc {display: none;}
ul.category_list li a {text-decoration: none;}
ul.category_list li:hover {opacity: 0.5;}




}

.tabs {
margin-top: 50px;
padding-bottom: 40px;
width: 80vw;
margin: 0 auto;}
.tab_item {
width: calc(100%/2);
height: 50px;
border-bottom: 3px solid #5EB7E8;
background-color: #d9d9d9;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
margin: auto;
}
.tab_item:hover {
opacity: 0.75;
cursor: pointer;
}
input[name="tab_item"] {
display: none;
}
.tab_content {
display: none;
padding: 60px 0 0;
clear: both;
overflow: hidden;
}
#solution:checked ~ #solution_content,
#category:checked ~ #category_content {
display: block;
}
.tabs input:checked + .tab_item {
background-color: #5EB7E8;
color: #fff;
opacity: 1;
cursor: default;
}
@media screen and (max-width: 1060px) {


}
@media screen and (max-width: 767px) {
.tab_item {

font-size: 3vw;
}
.tab_content {
padding: 10% 0 0;
}



}