#sub_categoly {
  margin: 30px auto;
}
#sub_categoly ul {
  text-align: center;
}
#sub_categoly ul li {
  display: inline-block;
  border-right: 1px solid black;
  line-height:1;
}
#sub_categoly ul li:last-child {
  border-right: none;
}

#sub_categoly ul li a {
  display: inline-block;
  padding: 0 10px;
  color: black;
  text-decoration: none;
  font-weight:bold;
}
#sub_categoly ul li a:hover,
#sub_categoly ul li.current a {
  color:#aaa;
}

#list:after {
  content: "";
  display: block;
  clear: both;
}
#list article {
  width: 22.1%;
  float: left;
  margin-right: 3.8%;
  padding-bottom: 35px;
}
#list article:nth-child(4n) {
  margin-right: 0;
  float: right;
}
#list article:nth-child(4n+1) {
  clear: both;
}

#list article .item_head dt {
  padding-bottom: 13px;
}
#list article .item_head dt a {
  display: block;
  width: 100%;
  height: 130px;
  overflow:hidden;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  -ms-transition: opacity .3s;
  transition: opacity .3s;
}
#list article .item_head dt a:hover {
  opacity: 0.7;
}
#list article .item_head dt a img {
  height: 100%;
}

#list article .item_head dd {
  font-weight: bold;
  padding-bottom: 12px;
}

#list article .spec {
  width: 100%;
  border-bottom: 1px solid #dcdcdc;
  display: table;
}
#list article .spec dt {
  display: table-cell;
  font-size: 0.9em;
  padding: 4px 0;
  vertical-align:top;
  width: 80px;
}
#list article .spec dd {
  display: table-cell;
  vertical-align:top;
  font-size: 0.9em;
  padding: 4px 0;
}
#list article > p {
  margin-top: 12px;
  font-size: 0.9em;
  margin-bottom: 10px;
}
#list article .more {
  text-align:center;
}
#list article .more a img {
  height: 15px;
}
#list article .more a {
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  -ms-transition: opacity .3s;
  transition: opacity .3s;
}
#list article .more a:hover {
  opacity: 0.7;
}

/*content_CSS*/
.concept_title{
    font-size:3.84em;
    text-align:center;
    letter-spacing:0.2em;
    margin-bottom:20px;
}
#black_box{
    display:table;
    margin:0 auto;
    border-collapse:separate;
    border-spacing:5px;
}
.boxbox{
    display:table-cell;
    /* border-radius */
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    background-color:#000;
    color:#FFF;
    font-size:0.92em;
    padding:5px 15px;
}
#renove_concept{
    font-size:1.69em;
    font-weight:bold;
    text-align:center;
    margin-top:20px;
    margin-bottom:45px;
}
#renove_concept span{
display: inline-block;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 82.96%,rgba(255,230,0,1.00) 90.34%,rgba(255,230,0,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 82.96%,rgba(255,230,0,1.00) 90.34%,rgba(255,230,0,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 82.96%,rgba(255,230,0,1.00) 90.34%,rgba(255,230,0,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 71.96%,rgba(255,230,0,1.00) 72.34%,rgba(255,230,0,1.00) 100%);
line-height: 1;
}
#renove_concept,#one_stop{
font-size: 1.69em;
font-weight: bold;
text-align: center;
}
#one_stop{
    margin-bottom:15px;
}
#one_stop_graph{
    text-align:center;
}
#one_stop_graph dt{
    margin-bottom:18px;
}
#one_stop_graph dd{
    margin-bottom:45px;
}
#one_stop_graph cite{
    display:inline-block;
    font-size:0.92em;
    font-weight:bold;
    width:126px;
    text-align:center;
    padding:3px 0;
    border:1px solid #000;
    margin-bottom:5px;
}
#start_text{/*302*/
    width:29.4%;
    margin:60px auto 30px;
}
#start_text img{
    width:100%;
}
#gogo_text{
    text-align:center;
}
#gogo_text img{
    height:32px;
    padding-bottom:15px;
}
#toiro dt{/*476*/
    width:46.5%;
    margin:20px auto 60px;
}
#toiro dt img{
    width:100%;
}
#toiro dd{
    line-height:1.8em;
}
#graph_container{
    width:90%;
    margin:40px auto 0;
    margin-top:40px;
}
#graph_container:after{
    content:"";
    display:block;
    clear:both;
}
.graph_image{
    float:left;
    width:43%;
}
.graph_image:nth-child(2){
    float:right;
}

.graph_image img{
    width:100%;
}



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

                      Media Query

*******************************************************/
@media only screen and (max-width: 830px) {
    .boxbox {
    display: list-item;
    text-align:center;
    margin-bottom: 10px;
}
.concept_title{
    font-size:3.07em;
}
#start_text {
width: 37%;
}
}
@media only screen and (max-width: 768px) {
#list article {
  width: 32.4%;
  margin-right: 1.3%;
}
#list article:nth-child(4n) {
  margin-right: 1.3%;
  float: left;
}
#list article:nth-child(4n+1) {
  clear: none;
}

#list article:nth-child(3n) {
  margin-right: 0;
  float: right;
}
#list article:nth-child(3n+1) {
  clear: both;
}
#gogo_text img {
height: 24px;
}
#toiro dt {
width: 50%;
}
}
@media only screen and (max-width: 568px) {
#list article {
  width: 48.9%;
  margin-right: 0;
}
#list article:nth-child(4n) {
  margin-right: 0;
}
#list article:nth-child(4n+1) {
  clear: none;
}

#list article:nth-child(3n) {
  margin-right: 0;
  float: right;
}
#list article:nth-child(3n+1) {
  clear: none;
}
#list article:nth-child(odd) {
  float: left;
  clear: both;
}
#list article:nth-child(even) {
  float: right;
}
#toiro dt {
width: 80%;
}
.graph_image{
    float:none;
    width:90%;
    margin:35px auto 60px;
}
}
@media only screen and (max-width: 414px) {
#list article {
  width: 100%;
  float: none!important;
  clear: none!important;
}
#list article > p {
  display: none;
}
#list article .item_head dt a {
  text-align:center;
}
#list article .more {
  padding-top: 15px;
}
#renove_concept,#one_stop{
    font-size: 1.19em;
}
#start_text {
width: 65%;
}
}