@charset "utf-8";
/**----------------------------------------------------------
 *CSS information 
 *
 * file name	: top.css
 * style info	: page styles
 -----------------------------------------------------------*/

/* #flash
----------------------------------------------------------- */
#flash {
  width: 1280px;
  position: absolute;
  left: 50%;
  margin-left: -640px;
}

/* #top
----------------------------------------------------------- */

#top a {
  color: #666;
  outline: none;
  text-decoration: none;
  -webkit-transition: color ease-out 0.25s;
  -moz-transition: color ease-out 0.25s;
  -o-transition: color ease-out 0.25s;
  transition: color ease-out 0.25s;
}
#top a:hover {
  color: #007b0f;
  text-decoration: none;
  -webkit-transition: color ease-out 0s;
  -moz-transition: color ease-out 0s;
  -o-transition: color ease-out 0s;
  transition: color ease-out 0s;
}

/* #header
----------------------------------------------------------- */

#top #header {
  width: 100%;
  height: 630px;
  background: url(../img/top/top_background.png);
  overflow: hidden;
  background-position: center top;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}

#top #header #hyde {
  position: absolute;
  bottom: -2px;
  width: 100%;
  z-index: 10000;
}
#top #header #hyde img {
  width: 100%;
}

#top #header #hyde_lp {
  position: absolute;
  bottom: -15px;
  width: 100%;
  z-index: 10000;
}
#top #header #hyde_lp img {
  width: 100%;
}

/* #header #characters
----------------------------------------------------------- */
#header #characters li {
  position: absolute;
}

#header #characters li:nth-child(1) {
  left: -50px;
  top: 160px;
  z-index: 100;
}

#header #characters li:nth-child(2) {
  left: 330px;
  top: 320px;
  z-index: 10;
}

#header #characters li:nth-child(3) {
  left: 150px;
  top: 400px;
  z-index: 9;
}

#header #characters li:nth-child(4) {
  left: -50px;
  top: 400px;
  z-index: 8;
}

#header #characters li:nth-child(5) {
  left: 240px;
  top: 220px;
  z-index: 7;
}

#header #characters li:nth-child(6) {
  left: 590px;
  top: 360px;
  z-index: 6;
}

#header #characters li:nth-child(7) {
  left: 690px;
  top: 300px;
  z-index: 5;
}

#header #characters li:nth-child(8) {
  left: -100px;
  top: 250px;
  z-index: 4;
}

#header #characters li:nth-child(9) {
  left: 840px;
  top: 300px;
  z-index: 3;
}

#header #characters li:nth-child(10) {
  left: 400px;
  top: 230px;
  z-index: 2;
}

/*	#concept_unit
--------------------------------------- */

#concept_unit {
  text-align: center;
}

#concept_unit h4 {
  font-weight: normal;
  font-size: 2em;
  line-height: 2.4em;
  color: #1c5a22;
}

#concept_unit p {
  line-height: 2.2em;
}

/*	#blog_unit
--------------------------------------- */

#blog_unit #blog_area {
  margin-top: 30px;
  overflow: hidden;
  background-color: #f8f8f8;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

#blog_unit #blog_area #blog_photo_area {
  position: relative;
  width: 570px;
  float: left;
}

#blog_unit #blog_area #blog_photo_area div {
  position: absolute;
  top: 46px;
  left: 53px;
  z-index: 100;
  width: 480px;
  height: 300px;
  overflow: hidden;
  background: url(../img/top/no_photo.gif) no-repeat 50% 50% #eee;
}
#blog_unit #blog_area #blog_photo_area div img {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#blog_unit #blog_area #blog_photo_area p#ribbon {
  position: absolute;
  top: 26px;
  left: 33px;
  z-index: 1000;
}

#blog_unit #blog_area #blog_photo_area p#photo_base {
  margin: 17px 0 10px 20px;
  width: 540px;
}

#blog_unit #blog_area #blog_text_area {
  margin-top: 40px;
  width: 300px;
  float: right;
  margin-right: 60px;
}
#blog_unit #blog_area #blog_text_area h3 {
  margin-top: 10px;
  font-weight: bold;
  color: #1a1a1a;
  font-size: 1.4em;
  line-height: 1.5em;
  padding: 10px 0;
}
#blog_unit #blog_area #blog_text_area #date {
  float: right;
  padding: 0.3em 0;
}

/*	#min_area
------------- */

#blog_unit ul#min_area {
  margin-top: 20px;
}

#blog_unit ul#min_area li {
  width: 225px;
  float: left;
  margin-right: 20px;
}

#blog_unit ul#min_area li:last-child {
  margin-right: 0;
}

#blog_unit ul#min_area .blog_photo {
  position: relative;
  width: 225px;
  height: 144px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#blog_unit ul#min_area .blog_photo img {
  position: relative;
  z-index: -1;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#blog_unit ul#min_area .blog_photo:after {
  content: url("../img/modules/no_photo.gif");
  width: 225px;
  height: 144px;
  position: absolute;
  left: 0;
  z-index: -100;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#blog_unit ul#min_area .tag {
  padding: 0.2em 1.5em;
  font-size: 0.9em;
  margin-top: 10px;
  display: inline-block;
}

#blog_unit ul#min_area .date {
  margin-top: 0.5em;
  font-size: 0.8em;
  line-height: 2.5em;
}

/*	#service_unit
--------------------------------------- */

#service_unit .slider_unit {
  overflow: hidden;
  height: 230px;
  margin-top: 30px;
}

#service_unit .slider_unit div {
  margin-right: 20px;
  height: 230px;
}

#service_unit .slider_unit a {
  text-align: center;
  display: block;
}

#service_unit .slider_unit div h2 {
  margin-top: 40px;
  font-weight: bold;
  line-height: 1.4em;
}

#service_unit .slider_unit .promotion {
  background: url(../img/top/tag_service.png) left 155px no-repeat;
}
#service_unit .slider_unit .promotion a:hover {
  color: #3293ac;
}

#service_unit .slider_unit .creative {
  background: url(../img/top/tag_creative.png) left 155px no-repeat;
}
#service_unit .slider_unit .creative a:hover {
  color: #90801b;
}

#service_unit .slider_unit .other {
  background: url(../img/top/tag_other.png) left 155px no-repeat;
}

html .www_FlowSlider_com-branding {
  display: none !important;
  right: -99999999px !important;
}

@media screen and (max-width: 1000px) {
  #header #characters li:nth-child(1) {
    left: 30px;
  }
  #header #characters li:nth-child(1) img {
    width: 880px;
  }
}

/*	404 error
--------------------------------------- */
.error_content {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}
.error_content .error_title {
  font-size: 50px;
}
.error_content .error_text {
  font-size: 18px;
  margin: 0 0 30px;
}
.error_content .error_btn {
  font-size: 16px;
  text-align: center;
  margin: 0 0 30px;
}

#characters > li.chara_10 img {
  position: relative;
  top: -47px;
}