@import url('column_pc.css');

.contentArea.column{
  background-size: 17px 150px; 
}
.contentArea.column>h1{
  text-align: center;
}
.contentArea.column>h1 img{
  width: auto;
}
.contentArea.column .innerWrap{
  width: 960px;
  margin: 0 auto;
}
ul.contentList{
  justify-content: left;
}
.contentList li{
  width: calc( 100% / 4 - 10px);
  margin: 0 0 .5rem ;
}
.contentList li:not(:nth-of-type(4n+1)){
  margin-left: calc(40px / 3);
}
.indexArea ul{
  justify-content: space-around;
}
.column h2.basic{
  color: #39d3dc;
  border-color: #39d3dc;
  font-size: 1.5em;
  margin-top: 2.5rem;
}

div.recommend{
  padding: 1.5rem 2rem;
  /*border: 10px solid #fde514;*/
  border-radius: 3px;
  margin-top: 1rem;
}
.recommend h2{
  background: transparent;
  border: none;
  margin: 0 0 2rem ;
  padding: 0 .5rem;
  font-size: 1.5em;
  text-align: left;
}
.recommend .contentList{
  justify-content: space-between;
}

.recommend .contentList li{
  width: calc( 100% / 4 - 10px);
  margin: 0;
}
.recommend .contentList a span:before{
  font-size: .9em;
}

nav.indexArea{
/*  position: absolute; */
  border: none;
  margin: .75rem 0;
/*  top: 280px;
  width: 100%; */
}
.indexArea ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
}
.indexArea li{
  background: #fff;
  border-radius: 3px;
  flex-grow: 1;
  margin: 5px;
}
.indexArea a{
  border: 2px solid #2ad4dd;
  background: rgba(42,212,221, 1);
  border-radius: 3px;
  color: #fff;
  text-align: center;

}
.indexArea li+li{
  border-top: none;
}