/* title-area */
.title-area {
  height: 35px;
  position: relative;
  background-image: url("../img/ttl_area_bg.png");
  background-repeat: no-repeat;
}

.title-area h1 {
  position: absolute;
  top: 14px;
  left: 15px;
  height: 35px;
}

.title-area .update {
  position: absolute;
  right: 4px;
  top: 10px;
}

/* main-inner */
.main-inner {
  position: relative;
  left: -31px;
}

.head-area {
  position: relative;
}

.head-area .lead-item2 {
  position: absolute;
  top: 51px;
  left: 247px;
}

.head-area .lead-item4 {
  position: absolute;
  top: 170px;
  left: 247px;
}

.head-area .icon {
  position: absolute;
  left: -3px;
  top: 156px;
  z-index: 10;
}

/* section1 */
.section1 {
  position: relative;
}

.section1 h2 {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
}

.section1-inner {
  position: absolute;
  top: 102px;
  width: 100%;
  text-align: center;
}

.section1-inner .items {
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}

.section1-inner .item {
  width: 25%;
  float: left;
}

/**
 * remove if this elements becomes 4 and above
 */
.section1-inner .item:first-of-type {
  margin-left: 12.5%;
}

.section1-inner .complement {
  position: absolute;
  right: 81px;
  top: 154px;
}

.section1-inner .btn {
  position: absolute;
  right: 0;
  bottom: -69px;
  left: 0;
}

/* section2 */
.section2 {
  position: relative;
}

.section2 h2 {
  position: absolute;
  top: 0;
  left: 0;
}

.section2 .section2-inner {
  position: absolute;
  top: 111px;
  left: 0;
  width: 100%;
}

.section2-inner .items {
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}

.section2-inner .item {
  width: 25%;
  float: left;
}

.section2 .icon {
  position: absolute;
  right: 21px;
  bottom: 5px;
}

/* c-charaNav
---------------------------------- */
.c-charaNav{
  background-color: rgba(0,0,0,0.2);
  background-image: url('../img/section3_bg.png');
  padding: 0 0 30px;
}
.c-charaNav__ttl{
  height: 60px;
  text-align: center;
}
.c-charaNav__inner .items{
  max-width: 700px;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}
.c-charaNav__inner .item{
  display: inline-block;
  padding: 0 8px;
  font-size: 12px;
  vertical-align: top;
}
.c-charaNav__inner .item:nth-of-type(n+6){
  margin-top: 20px;
}
.c-charaNav__inner .item img {
  vertical-align: top;
}