html,
body {
  padding: 0;
  margin: 0;
}
html {
  background: #a0a0a0;
}
body {
  min-width: 360px;
  background: #fff;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #fafafa;
  z-index: 999;
}
#site-header .logo {
  float: left;
  margin: 18px 0 0 24px;
  width: 182px;
  height: 20px;
  background: transparent url("../images/index-assets.png");
  background-size: 915px 450px;
  text-indent: -9999em;
}
#site-header .drawer-button {
  float: right;
  box-sizing: border-box;
  padding-left: 6px;
  width: 56px;
  border-radius: 28px 0 0 28px;
  height: 100%;
  background: #e00;
}
#site-header .drawer-button .drawer-icon {
  margin: 20px auto 0;
  width: 20px;
  height: 16px;
  background: transparent url("../images/index-assets.png") -200px -2px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
#site-header .drawer-button.close .drawer-icon {
  margin: 20px auto 0;
  width: 16px;
  height: 16px;
  background: transparent url("../images/index-assets.png") -238px -2px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
#site-header .drawer-menu {
  display: none;
  position: absolute;
  box-sizing: border-box;
  top: 56px;
  left: 0;
  width: 100%;
  padding: 0 24px;
  background: #e00;
}
#site-header .drawer-menu.show {
  display: block;
}
#site-header .drawer-menu .link {
  display: block;
  width: 100%;
  height: 52px;
  line-height: 52px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 12pt;
  font-weight: 700;
  color: #fff;
}
#site-header .drawer-menu .link:last-of-type {
  border-bottom: none;
}
.main {
  margin-top: 56px;
}
.main .top-consult-wrap {
  padding: 80px 0 36px;
  background: url("../images/top-consult-wrap-bg.png") 0 100% no-repeat;
  background-size: 100% auto;
}
.main .top-consult-wrap .question-wrap {
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 24px;
  width: 360px;
}
.main .top-consult-wrap .question-wrap .question {
  width: 263px;
  height: 70px;
  background: transparent url("../images/index-assets.png") 0 -56px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
.main .top-consult-wrap .question-wrap .looking-for-wrap {
  position: relative;
  width: 242px;
  height: 53px;
}
.main .top-consult-wrap .question-wrap .looking-for-wrap .looking-for-best-agency {
  position: absolute;
  width: 242px;
  height: 53px;
  top: 0;
  left: 0;
  background: transparent url("../images/index-assets.png") -299px -56px;
  background-size: 915px 450px;
  text-indent: -9999em;
  transition: opacity 1s;
}
.main .top-consult-wrap .question-wrap .looking-for-wrap .looking-for-biz-partner {
  position: absolute;
  opacity: 0;
  width: 242px;
  height: 53px;
  top: 0;
  left: 0;
  background: transparent url("../images/index-assets.png") -577px -56px;
  background-size: 915px 450px;
  text-indent: -9999em;
  transition: opacity 1s;
}
.main .top-consult-wrap .consult-button {
  display: block;
  margin: 24px 0 36px;
  width: 120px;
  height: 48px;
  background: #e00;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  border-radius: 24px;
  line-height: 48px;
  text-align: center;
  font-size: 12pt;
  font-weight: 700;
  color: #fff;
}
.main .top-consult-wrap .video-button {
  display: block;
  width: 360px;
  height: 258px;
  margin: 0 auto;
  background: transparent url("../images/index-images.png");
  background-size: 654px 1095px;
  text-indent: -9999em;
}
.main #section-what-we-do {
  padding: 90px 0 48px;
  background: #f5f7f8;
}
.main #section-what-we-do .title-wrap {
  width: 360px;
  margin: 0 auto;
}
.main #section-what-we-do .title-wrap .section-title {
  width: 162px;
  height: 113px;
  margin-left: 32px;
  background: transparent url("../images/index-assets.png") 0 -219px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
.main #section-what-we-do .professional-areas {
  margin: 0 auto;
  width: 360px;
  height: 423px;
  background: transparent url("../images/professional-area-images.png");
  background-size: 1512px 423px;
}
.main #section-what-we-do .professional-areas.order-2 {
  background-position-x: -384px;
}
.main #section-what-we-do .professional-areas.order-3 {
  background-position-x: -768px;
}
.main #section-what-we-do .professional-areas.order-4 {
  background-position-x: -1152px;
}
.main #section-portfolio {
  overflow: hidden;
}
.main #section-portfolio .portfolio-wrap {
  background: transparent url("../images/section-portfolio-bg.png") 50% 50%;
  background-size: cover;
}
.main #section-portfolio .portfolio-wrap .portfolio {
  margin: 0 auto;
  width: 360px;
  height: 608px;
  background: transparent url("../images/portfolio-images.png");
  background-size: 1200px 608px;
}
.main #section-portfolio .portfolio-wrap .portfolio.order-1 {
  background-position-x: -420px;
}
.main #section-portfolio .portfolio-wrap .portfolio.order-2 {
  background-position-x: -840px;
}
.main #section-portfolio .portfolio-button-wrap {
  width: 306px;
  margin: 0 auto;
  text-align: right;
}
.main #section-portfolio .portfolio-button-wrap .button {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: transparent url("../images/index-images.png");
  background-position-y: -506px;
  background-size: 654px 1095px;
}
.main #section-portfolio .portfolio-button-wrap .button.previous {
  background-position-x: 0;
}
.main #section-portfolio .portfolio-button-wrap .button.previous.disabled {
  background-position-x: -100px;
}
.main #section-portfolio .portfolio-button-wrap .button.next {
  margin-left: 24px;
  background-position-x: -50px;
}
.main #section-portfolio .portfolio-button-wrap .button.next.disabled {
  background-position-x: -150px;
}
.main #section-portfolio + .line-wrap {
  width: 360px;
  margin: 56px auto 32px;
}
.main #section-portfolio + .line-wrap .line {
  margin-left: 32px;
  width: 42px;
  height: 36px;
  background: transparent url("../images/index-images.png") 0 -574px;
  background-size: 654px 1095px;
}
.main #section-workflow .title-wrap {
  width: 360px;
  margin: 0 auto;
}
.main #section-workflow .title-wrap .section-title {
  margin-left: 32px;
  width: 126px;
  height: 113px;
  background: transparent url("../images/index-assets.png") -430px -219px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
.main #section-workflow .workflow-illustration {
  margin: 0 auto;
  width: 360px;
  height: 820px;
  background: transparent url("../images/workflow-illustration.png");
  background-size: 360px 820px;
}
.main .section-contact-now {
  position: relative;
  padding: 58px 0;
  background: #000;
}
.main .section-contact-now #contact-link {
  display: block;
  margin: 0 auto;
  width: 220px;
  height: 44px;
  background: transparent url("../images/index-assets.png") 0 -368px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
.main .section-contact-now .contact-on {
  position: absolute;
  left: 50%;
  margin-left: -144px;
  bottom: -32px;
  width: 288px;
  height: 64px;
  background: transparent url("../images/index-assets.png") -256px -368px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
.main #section-recruit {
  padding: 56px 0 0;
  background: transparent url("../images/section-recruit-bg.png");
  background-size: cover;
}
.main #section-recruit .section-content {
  width: 360px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 32px;
}
.main #section-recruit .section-content .section-title {
  width: 165px;
  height: 66px;
  background: transparent url("../images/index-assets.png") -592px -219px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
.main #section-recruit .recruitment-areas-outer-wrap {
  margin-top: 15px;
  width: 100%;
  overflow: hidden;
}
.main #section-recruit .recruitment-areas-outer-wrap .recruit-areas-wrap {
  margin: 0 auto;
  width: 360px;
  box-sizing: border-box;
  padding: 0 32px;
}
.main #section-recruit .recruitment-areas-outer-wrap .recruit-areas-wrap .recruit-areas .recruit-area {
  box-sizing: border-box;
  width: 120px;
  height: 120px;
  padding-left: 16px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
  background: transparent url("../images/index-images.png") 0 -646px;
  background-size: 654px 1095px;
}
.main #section-recruit .recruitment-areas-outer-wrap .recruit-areas-wrap .recruit-areas .recruit-area.order-2 {
  background-position-x: -156px;
}
.main #section-recruit .recruitment-areas-outer-wrap .recruit-areas-wrap .recruit-areas .recruit-area.order-3 {
  background-position-x: -312px;
}
.main #section-recruit .recruitment-areas-outer-wrap .recruit-areas-wrap .recruit-areas .recruit-area .d-day {
  margin-top: 62px;
  width: 40px;
  height: 20px;
  line-height: 20px;
  border-radius: 2px;
  background: rgba(224, 0, 0, 0.72);
  text-align: center;
  font-size: 10pt;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
.main #section-recruit .recruitment-areas-outer-wrap .recruit-areas-wrap .recruit-areas .recruit-area .area {
  margin-top: 6px;
  font-size: 11.5pt;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}
.main #section-recruit .mail-wrap {
  margin: 40px auto 0;
}
.main #section-recruit .mail-wrap .label {
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.6em;
}
.main #section-recruit .mail-wrap .mail {
  font-size: 11pt;
  font-weight: 400;
  color: #4297f7;
}
.main #section-recruit + .lines {
  margin: 20px 32px 20px;
}
.main #section-recruit + .lines .line-1 {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: #000;
}
.main #section-recruit + .lines .line-2 {
  display: inline-block;
  margin-left: 2px;
  width: 12px;
  height: 2px;
  background: #000;
}
.main .section-recommend {
  padding: 12px 0 120px;
  background: transparent url("../images/section-recommend-bg.png") 0 100%;
  background-size: cover;
}
.main .section-recommend .section-content {
  position: relative;
  box-sizing: border-box;
  padding-left: 24px;
  width: 360px;
  margin: 0 auto;
}
.main .section-recommend .section-title {
  margin-left: 8px;
  width: 118px;
  height: 27px;
  background: transparent url("../images/index-assets.png") -793px -219px;
  background-size: 915px 450px;
  text-indent: -9999em;
}
.main .section-recommend .arrow {
  top: -126px;
  left: 200px;
  position: absolute;
  width: 112px;
  height: 110px;
  background: transparent url("../images/index-images.png") 0 -275px;
  background-size: 654px 1095px;
}
.main .section-recommend .recommend-cards-outer-wrap {
  margin-top: 12px;
  overflow: hidden;
  width: 100%;
}
.main .section-recommend .recommend-cards-outer-wrap .recommend-cards-wrap {
  margin: 0 auto;
  width: 360px;
  box-sizing: border-box;
  padding: 0 24px;
}
.main .section-recommend .recommend-cards-outer-wrap .recommend-cards .recommend-card {
  width: 309px;
  height: 192px;
  background: transparent url("../images/index-images.png") 0 -802px;
  background-size: 654px 1095px;
}
.main .section-recommend .recommend-cards-outer-wrap .recommend-cards .recommend-card.order-2 {
  background-position-x: -345px;
}
.footer {
  padding: 40px 0 40px;
  background: #000;
}
.footer .copyright {
  margin: 0 auto;
  width: 180px;
  height: 41px;
  background: transparent url("../images/index-images.png") 0 -1054px;
  background-size: 654px 1095px;
}