#contents.about {
  color: #000;
  width: 100%;
}

#contents.about > header.page-header {
  background-image: url(../img/about/head_image.jpg);
  background-position: center top;
}

#contents.about > header.page-header p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -70px;
  margin-left: -244px;
}

#contents.about > section.slide {
  opacity: 0;
  width: 100%;
  height: 220px;
  background-repeat: repeat-x;
  background-position: 1550px 5px;
  background-image: url("../img/about/slide.jpg");
  -moz-animation: wave_anim 50s linear infinite;
  -webkit-animation: wave_anim 50s linear infinite;
  animation: wave_anim 50s linear infinite;
}

#contents.about > section.introduction {
  padding: 0;
}

#contents.about > section.introduction div {
  padding: 62px 0;
  background-image: url("../img/about/intro_bg.jpg");
  background-position: center bottom;
}

#contents.about > section.introduction div p.text {
  position: relative;
  z-index: 1;
}

#contents.about > section.introduction span {
  left: 50%;
}

#contents.about > section.introduction span.anago {
  background-image: url(../img/about/about_anago.png);
  width: 150px;
  height: 83px;
  top: 340px;
  margin-left: -530px;
}

#contents.about > section.introduction span.fune {
  background-image: url(../img/about/about_fune.png);
  width: 198px;
  height: 169px;
  top: 516px;
  margin-left: -530px;
}

#contents.about > section.introduction span.hana {
  background-image: url(../img/about/about_hana.png);
  width: 147px;
  height: 96px;
  top: 56px;
  margin-left: -460px;
}

#contents.about > section.introduction span.ki {
  background-image: url(../img/about/about_ki.png);
  width: 100px;
  height: 110px;
  top: 400px;
  margin-left: 440px;
}

#contents.about > section.introduction span.tako {
  background-image: url(../img/about/about_tako.png);
  width: 100px;
  height: 110px;
  top: 235px;
  margin-left: -570px;
}

#contents.about > section.introduction span.tamanegi {
  background-image: url(../img/about/about_tamanegi.png);
  width: 77px;
  height: 94px;
  top: 555px;
  margin-left: 350px;
}

#contents.about > section.introduction span.awaji {
  position: absolute;
  background-image: url(../img/about/about_awaji.png);
  width: 180px;
  height: 252px;
  top: 75px;
  margin-left: 360px;
}

#contents.about > section.about {
  height: 420px;
  overflow: hidden;
  *zoom: 1;
}

#contents.about > section.about > div {
  width: 50%;
  height: 100%;
  float: left;
  background-color: #0068b7;
  color: #FFF;
}

#contents.about > section.about > div:nth-of-type(1) {
  background: url("../img/about/about_pic.jpg") center center no-repeat;
  background-size: cover;
}

#contents.about > section.about > div:nth-of-type(2) dl {
  padding: 50px 60px 0 70px;
}

#contents.about > section.about > div:nth-of-type(2) dl dt {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 44px;
}

#contents.about > section.about > div:nth-of-type(2) dl dd {
  line-height: 1.8;
  margin-bottom: 24px;
}

#contents.about > section.about > div:nth-of-type(2) dl dd:last-of-type {
  padding-top: 12px;
}

#contents.about > section.feature {
  background: #FFF;
}

#contents.about > section.feature h3 {
  padding-top: 45px;
  margin: 0;
  background-image: url("../img/about/feature_cap.png");
  background-color: #e8f3f8;
  border-bottom: solid 44px #e8f3f8;
}

#contents.about > section.feature ul {
  width: 100%;
  min-width: 980px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}

#contents.about > section.feature ul li {
  position: relative;
  float: left;
  width: 33.333333%;
  padding: 40px 0 52px;
  text-align: center;
}

#contents.about > section.feature ul li:nth-of-type(1) {
  background-color: #ffad2d;
}

#contents.about > section.feature ul li:nth-of-type(1) span.anim.hashi {
  background-image: url(../img/index/food_hashi.png);
  width: 110px;
  height: 120px;
  margin-left: -243px;
  top: 2px;
}

#contents.about > section.feature ul li:nth-of-type(1) span.anim.tako {
  background-image: url(../img/index/food_tako.png);
  width: 82px;
  height: 77px;
  margin-left: 97px;
  top: 40px;
}

#contents.about > section.feature ul li:nth-of-type(1) span.anim.sakana {
  background-image: url(../img/index/food_sakana.png);
  width: 70px;
  height: 87px;
  margin-left: 78px;
  top: 150px;
}

#contents.about > section.feature ul li:nth-of-type(1) span.anim.tamanegi {
  background-image: url(../img/index/food_tamanegi.png);
  width: 71px;
  height: 59px;
  margin-left: -169px;
  top: 147px;
}

#contents.about > section.feature ul li:nth-of-type(2) {
  background-color: #f977a8;
}

#contents.about > section.feature ul li:nth-of-type(2) span.anim.kumo {
  background-image: url(../img/index/play_kumo.png);
  width: 196px;
  height: 52px;
  margin-left: -204px;
  top: 202px;
}

#contents.about > section.feature ul li:nth-of-type(2) span.anim.ki {
  background-image: url(../img/index/play_ki.png);
  width: 100px;
  height: 110px;
  margin-left: -180px;
  top: 24px;
}

#contents.about > section.feature ul li:nth-of-type(2) span.anim.hito {
  background-image: url(../img/index/play_hito.png);
  width: 55px;
  height: 112px;
  top: 129px;
  margin-left: 120px;
}

#contents.about > section.feature ul li:nth-of-type(2) span.anim.taiyou {
  background-image: url(../img/index/play_taiyou.png);
  width: 71px;
  height: 70px;
  margin-left: 76px;
  top: 15px;
}

#contents.about > section.feature ul li:nth-of-type(3) {
  background-color: #34b255;
}

#contents.about > section.feature ul li:nth-of-type(3) span.anim.beer {
  background-image: url(../img/index/shopping_beer.png);
  width: 77px;
  height: 85px;
  margin-left: 86px;
  top: 42px;
}

#contents.about > section.feature ul li:nth-of-type(3) span.anim.cake {
  background-image: url(../img/index/shopping_cake.png);
  width: 57px;
  height: 49px;
  margin-left: -152px;
  top: 30px;
}

#contents.about > section.feature ul li:nth-of-type(3) span.anim.kaban {
  background-image: url(../img/index/shopping_kaban.png);
  width: 72px;
  height: 81px;
  margin-left: -170px;
  top: 124px;
}

#contents.about > section.feature ul li:nth-of-type(3) span.anim.soup {
  background-image: url(../img/index/shopping_soup.png);
  width: 81px;
  height: 87px;
  margin-left: 62px;
  top: 155px;
}

#contents.about > section.feature ul li span.anim {
  left: 50%;
}

#contents.about > section.feature ul li h4 {
  position: relative;
  height: 185px;
  z-index: 1;
}

#contents.about > section.feature ul li div,
#contents.about > section.feature ul li p {
  width: 375px;
  margin: 0 auto;
  text-align: left;
}

#contents.about > section.feature ul li p {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 36px;
}

#contents.about > section.feature ul li div {
  height: 146px;
  font-size: 18px;
  color: #FFF;
  line-height: 1.6;
}

#contents.about > section.feature ul li span {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
}

#contents.about > section.character,
#contents.about > section.sns {
  padding: 60px 0 50px;
}

#contents.about > section.character {
  background: url("../img/about/chara_bg.gif");
}

#contents.about > section.character h3 {
  background-image: url("../img/about/chara_cap.png");
}

#contents.about > section.character ul {
  width: 990px;
  margin: 0 auto;
  padding-left: 10px;
  overflow: hidden;
  *zoom: 1;
}

#contents.about > section.character ul li {
  float: left;
  width: 310px;
  height: 574px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

#contents.about > section.character ul li:nth-of-type(n + 2) {
  margin-left: 30px;
}

#contents.about > section.character ul li:nth-of-type(1) {
  background-image: url("../img/about/chara_1.png");
}

#contents.about > section.character ul li:nth-of-type(2) {
  background-image: url("../img/about/chara_2.png");
}

#contents.about > section.character ul li:nth-of-type(3) {
  background-image: url("../img/about/chara_3.png");
}

#contents.about > section.character ul li dl {
  padding-top: 396px;
}

#contents.about > section.character ul li dl dt {
  text-align: center;
  margin-bottom: 26px;
}

#contents.about > section.character ul li dl dd {
  padding-left: 46px;
  padding-right: 56px;
  color: #FFF;
  line-height: 1.5;
}

#contents.about > section.character div {
  width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 0;
  background: url("../img/about/chara_fukidasi.png") 70px 17px no-repeat;
}

#contents.about > section.sns {
  padding: 60px 0 65px;
  background: url("../img/about/sns_bg.gif");
}

#contents.about > section.sns h3 {
  background-image: url("../img/about/sns_cap.png");
}

#contents.about > section.sns > p {
  margin-bottom: 70px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}

#contents.about > section.sns ul {
  width: 980px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}

#contents.about > section.sns ul li {
  float: left;
  width: 290px;
  text-align: center;
}

#contents.about > section.sns ul li:nth-of-type(2) {
  margin: 0 47px;
}

#contents.about > section.sns ul li:nth-of-type(3) {
  width: 305px;
}

#contents.about > section.sns ul li h4 {
  height: 130px;
}

#contents.about > section.sns ul li dl dt {
  font-size: 20px;
  font-weight: bold;
}

#contents.about > section.sns ul li dl dd {
  height: 90px;
  padding-top: 28px;
  line-height: 1.6;
}

@-moz-keyframes wave_anim {
  0% {
    background-position: 1550px 5px;
  }
  100% {
    background-position: 0 5px;
  }
}

@-webkit-keyframes wave_anim {
  0% {
    background-position: 1550px 5px;
  }
  100% {
    background-position: 0 5px;
  }
}

@keyframes wave_anim {
  0% {
    background-position: 1550px 5px;
  }
  100% {
    background-position: 0 5px;
  }
}