@charset "UTF-8";
/*---------------------------------------------------------------
common.css
-----------------------------------------------------------------
table of contents

	1. Reset
	2. Utility	
	3. Basic	
	4. #header	
	5. #footer	
	6. #dashboard	
	7. #detail	
	8. #contents	
	9. #focus	
	10. #work	
	11. #casestudies	
	12. #about	
	13. #career	
	14. #contact
	15.	#pickup
---------------------------------------------------------------*/
/*===============================================================
	1.	Reset
===============================================================*/
/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/*===============================================================
	2.	Utility
===============================================================*/
@-webkit-keyframes up-and-fadein {
  from {
    top: 10px;
    opacity: 0.0; }

  to {
    top: 0px;
    opacity: 1.0; } }
@-moz-keyframes up-and-fadein {
  from {
    top: 10px;
    opacity: 0.0; }

  to {
    top: 0px;
    opacity: 1.0; } }
@-ms-keyframes up-and-fadein {
  from {
    top: 10px;
    opacity: 0.0; }

  to {
    top: 0px;
    opacity: 1.0; } }
@keyframes up-and-fadein {
  from {
    top: 10px;
    opacity: 0.0; }

  to {
    top: 0px;
    opacity: 1.0; } }
@-webkit-keyframes flipup {
  from {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(0deg); }

  to {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(-15deg);
    opacity: 0.7; } }
@-moz-keyframes flipup {
  from {
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(0deg); }

  to {
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(-15deg);
    opacity: 0.7; } }
@-ms-keyframes flipup {
  from {
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(0deg); }

  to {
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(-15deg);
    opacity: 0.7; } }
@keyframes flipup {
  from {
    transform-origin: 0% 0%;
    transform: rotateX(0deg); }

  to {
    transform-origin: 0% 0%;
    transform: rotateX(-15deg);
    opacity: 0.7; } }
@-webkit-keyframes flipdown {
  from {
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(0deg); }

  to {
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(15deg);
    opacity: 0.7; } }
@-moz-keyframes flipdown {
  from {
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(0deg); }

  to {
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(15deg);
    opacity: 0.7; } }
@-ms-keyframes flipdown {
  from {
    -ms-transform-origin: 0% 100%;
    -ms-transform: rotateX(0deg); }

  to {
    -ms-transform-origin: 0% 100%;
    -ms-transform: rotateX(15deg);
    opacity: 0.7; } }
@keyframes flipdown {
  from {
    transform-origin: 0% 100%;
    transform: rotateX(0deg); }

  to {
    transform-origin: 0% 100%;
    transform: rotateX(15deg);
    opacity: 0.7; } }
@-webkit-keyframes from-flipup {
  from {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(-15deg);
    opacity: 0.7; }

  to {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(0deg);
    opacity: 1.0; } }
@-moz-keyframes from-flipup {
  from {
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(-15deg);
    opacity: 0.7; }

  to {
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(0deg);
    opacity: 1.0; } }
@-ms-keyframes from-flipup {
  from {
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(-15deg);
    opacity: 0.7; }

  to {
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(0deg);
    opacity: 1.0; } }
@keyframes from-flipup {
  from {
    transform-origin: 0% 0%;
    transform: rotateX(-15deg);
    opacity: 0.7; }

  to {
    transform-origin: 0% 0%;
    transform: rotateX(0deg);
    opacity: 1.0; } }
@-webkit-keyframes from-flipdown {
  from {
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(15deg);
    opacity: 0.7; }

  to {
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(0deg);
    opacity: 1.0; } }
@-moz-keyframes from-flipdown {
  from {
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(15deg);
    opacity: 0.7; }

  to {
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(0deg);
    opacity: 1.0; } }
@-ms-keyframes from-flipdown {
  from {
    -ms-transform-origin: 0% 100%;
    -ms-transform: rotateX(15deg);
    opacity: 0.7; }

  to {
    -ms-transform-origin: 0% 100%;
    -ms-transform: rotateX(0deg);
    opacity: 1.0; } }
@keyframes from-flipdown {
  from {
    transform-origin: 0% 100%;
    transform: rotateX(15deg);
    opacity: 0.7; }

  to {
    transform-origin: 0% 100%;
    transform: rotateX(0deg);
    opacity: 1.0; } }
.btn a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }
  .btn a:link, .btn a:visited {
    background-position: left top; }
  .btn a:hover, .btn a:active {
    background-position: left bottom; }

/*===============================================================
	3.	Basic
===============================================================*/
html {
  width: 100%;
  min-width: 1060px;
  font-size: 10px; }

body {
  width: 100%;
  min-width: 1060px;
  color: #333;
  font-family: Helvetica, Arial, sans-serif;
  overflow-y: scroll;
  overflow: hidden; }

a {
  text-decoration: none;
  outline: none; }
  a:link, a:visited {
    color: #333333; }
  a:hover, a:active {
    color: #999999; }

::-moz-selection {
  background: #000;
  color: #fff; }

::selection {
  background: #000;
  color: #fff; }

.win .ja {
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", Helvetica, Arial, sans-serif; }

.btn-load {
  width: 420px;
  height: 60px;
  margin: 0 auto;
  padding: 0 20px 0 0; }
  .btn-load a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/shared/btn_load.png) center center no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; }
    .btn-load a:link, .btn-load a:visited {
      background-color: #000; }
    .btn-load a:hover, .btn-load a:active {
      background-color: #999; }

/*===============================================================
	4.	#header
===============================================================*/
#header {
  z-index: 50;
  position: absolute;
  left: 0;
  top: -220px;
  width: 100%;
  min-width: 1060px;
  height: 219px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5; }
  #header h1 {
    position: absolute;
    left: 100px;
    top: 87px;
    width: 280px;
    height: 58px; }
    #header h1 a {
      display: block;
      width: 100%;
      height: 100%;
      background: url(../images/shared/logo.png) 0 0 no-repeat;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden; }
  #header h2 {
    position: absolute;
    left: 393px;
    top: 61px;
    width: 44px;
    height: 16px;
    background: url(../images/shared/beta.png) 0 0 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; }
  #header #global-nav {
    position: absolute;
    right: 95px;
    top: 132px;
    width: 367px;
    height: 21px; }
    #header #global-nav ul {
      margin: 0; }
    #header #global-nav li {
      position: absolute;
      display: block;
      margin: 0;
      list-style: none;
      font-size: 16px;
      font-size: 1.6rem;
      font-weight: bold;
      color: #999999;
      letter-spacing: 0.02em; }
    #header #global-nav #nav-about {
      left: -10px;
      top: -10px; }
    #header #global-nav #nav-focus {
      left: 66px;
      top: -10px; }
    #header #global-nav #nav-work {
      left: 142px;
      top: -10px; }
    #header #global-nav #nav-career {
      left: 211px;
      top: -10px; }
    #header #global-nav #nav-contact {
      left: 292px;
      top: -10px; }
    #header #global-nav a {
      display: block;
      padding: 10px; }
    #header #global-nav a.here:link,
    #header #global-nav a.here:visited,
    #header #global-nav a.here:hover,
    #header #global-nav a.here:active {
      color: #999999;
      cursor: default; }
  #header #lang-nav {
    position: absolute;
    right: 97px;
    top: 44px;
    width: 69px;
    height: 13px;
    margin: 0 -15px 0 0;
    background: url(../images/shared/bg_langnav.gif) 23px 2px no-repeat; }
    #header #lang-nav ul {
      margin: 0; }
    #header #lang-nav li {
      display: inline-block;
      margin: 0 15px 0 0;
      list-style: none;
      font-size: 13px;
      font-size: 1.3rem;
      font-weight: bold; }
    #header #lang-nav a {
      position: relative;
      top: -10px;
      display: block;
      padding: 10px 0; }
    #header #lang-nav a.here:link,
    #header #lang-nav a.here:visited,
    #header #lang-nav a.here:hover,
    #header #lang-nav a.here:active {
      color: #999999;
      cursor: default; }
    #header #lang-nav #nav-ja {
      color: #000000; }
    #header #lang-nav #nav-en {
      text-decoration: line-through; }
  #header #global-locator {
    display: none; }

#header.small {
  top: -120px; }
  #header.small h1 {
    left: 100px;
    top: 148px;
    width: 218px;
    height: 45px; }
    #header.small h1 a {
      background: url(../images/shared/logo.png) 0 -58px no-repeat; }
  #header.small h2 {
    left: 291px;
    top: 135px;
    width: 44px;
    height: 16px;
    background: url(../images/shared/beta_s.png) 0 0 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; }
  #header.small #global-nav {
    top: 164px;
    right: 100px;
    width: 312px;
    margin: 0 -20px 0 0; }
    #header.small #global-nav li {
      font-size: 13px;
      font-size: 1.3rem;
      letter-spacing: 0.03em; }
    #header.small #global-nav #nav-focus {
      left: 50px; }
    #header.small #global-nav #nav-work {
      left: 110px; }
    #header.small #global-nav #nav-career {
      left: 165px; }
    #header.small #global-nav #nav-contact {
      left: 230px; }
  #header.small #lang-nav {
    top: 164px; }
    #header.small #lang-nav a {
      position: relative;
      top: -10px;
      display: block;
      padding: 10px 0; }
  #header.small #global-locator {
    opacity: 0;
    display: block;
    position: absolute;
    left: 0;
    top: 51px;
    width: 40px;
    height: 9px;
    background: #000; }

#header-inner {
  position: relative;
  width: 100%;
  max-width: 1500px;
  height: 100%; }

/*===============================================================
	5.	#footer
===============================================================*/
#footer {
  position: relative;
  width: 100%;
  min-width: 1060px;
  height: 130px; }

#footer-inner {
  position: relative;
  width: 100%;
  max-width: 1500px; }

#social {
  overflow: hidden;
  position: relative;
  top: 60px;
  left: 70px;
  width: 512px;
  height: 31px;
  margin: 0 auto; }
  #social dt {
    height: 23px;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 23px;
    letter-spacing: 0.03em; }
  #social dd {
    position: absolute;
    top: 0;
    height: 100%;
    letter-spacing: 0.07em;
    font-size: 13px;
    font-size: 1.3rem; }
  #social a {
    display: block;
    width: 100%;
    height: 27px; }
    #social a:hover, #social a:active {
      border-bottom: 2px solid #000; }
  #social span {
    position: relative;
    display: block;
    height: 23px;
    background-image: url(../images/shared/icon_social.jpg);
    background-repeat: no-repeat;
    line-height: 23px;
    letter-spacing: 0.08em; }

#social-youtube {
  left: 102px;
  width: 83px; }
  #social-youtube span {
    left: -1px;
    width: 56px;
    padding: 0 0 0 26px;
    background-position: 0 0; }
  #social-youtube a:hover, #social-youtube a:active {
    color: #cd3b3b; }
    #social-youtube a:hover span, #social-youtube a:active span {
      background-position: 0 -92px; }

#social-instagram {
  left: 204px;
  width: 97px; }
  #social-instagram span {
    width: 64px;
    padding: 0 0 0 31px;
    background-position: 0 -23px; }
  #social-instagram a:hover, #social-instagram a:active {
    color: #674b1a; }
    #social-instagram a:hover span, #social-instagram a:active span {
      background-position: 0 -115px; }

#social-twitter {
  left: 204px;
  width: 74px; }
  #social-twitter span {
    left: -1px;
    width: 44px;
    padding: 0 0 0 29px;
    background-position: 0 -46px; }
  #social-twitter a:hover, #social-twitter a:active {
    color: #2691ba; }
    #social-twitter a:hover span, #social-twitter a:active span {
      background-position: 0 -138px; }

#social-facebook {
  left: 295px;
  width: 96px; }
  #social-facebook span {
    width: 64px;
    padding: 0 0 0 32px;
    background-position: 0 -69px; }
  #social-facebook a:hover, #social-facebook a:active {
    color: #254d9e; }
    #social-facebook a:hover span, #social-facebook a:active span {
      background-position: 0 -161px; }

#pagetop {
  position: absolute;
  right: 98px;
  top: 63px;
  width: 16px;
  height: 20px; }
  #pagetop a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/shared/pagetop.png) 0 0 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; }
    #pagetop a:hover, #pagetop a:active {
      opacity: 0.5; }

#copyright {
  position: absolute;
  left: 101px;
  top: 65px;
  color: #999;
  font-size: 12.4px;
  font-size: 1.24rem;
  letter-spacing: 0.032em; }

/*===============================================================
	6.	#dashboard
===============================================================*/
#dashboard {
  position: relative;
  padding: 31px 20px 20px 40px;
  background: #000; }

#dashboard-inner {
  position: relative;
  width: 100%;
  max-width: 1440px; }

#dashboard-header {
  position: relative;
  height: 17px;
  padding: 0 20px 32px 0; }
  #dashboard-header h1 {
    position: absolute;
    left: 60px;
    top: 0;
    width: 210px;
    height: 17px;
    color: #fff;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: normal; }

#dashboard-nav {
  position: relative;
  width: 211px;
  height: 18px;
  margin: 0 auto; }
  #dashboard-nav ul {
    margin: 0; }
  #dashboard-nav li {
    position: absolute;
    top: 0px;
    margin: 0;
    list-style: none;
    font-weight: bold;
    font-size: 12.4px;
    font-size: 1.24rem;
    line-height: 1.2;
    letter-spacing: 0.01em; }
  #dashboard-nav #dashboard-press-li {
    left: 44px; }
  #dashboard-nav #dashboard-culture-li {
    left: 71px;
    display: none; }
  #dashboard-nav #dashboard-launch-li {
    left: 115px; }
  #dashboard-nav #dashboard-award-li {
    left: 233px; }
  #dashboard-nav span {
    overflow: hidden;
    display: block;
    height: 14px;
    padding: 0 0 0 19px;
    background-image: url(../images/shared/sort.png);
    background-repeat: no-repeat;
    cursor: pointer; }
    #dashboard-nav span.disabled, #dashboard-nav span.on {
      opacity: 0.5; }

#dashboard-press {
  background-position: 0 0;
  color: #6cc596; }

#dashboard-culture {
  background-position: 0 -14px;
  color: #1b8edf; }

#dashboard-launch {
  background-position: 0 -28px;
  color: #df981b; }

#dashboard-award {
  background-position: 0 -42px;
  color: #af1bdf; }

#dashboard-press.disabled {
  background-position: 0 -70px; }

#dashboard-culture.disabled {
  background-position: 0 -84px; }

#dashboard-launch.disabled {
  background-position: 0 -98px; }

#dashboard-award.disabled {
  background-position: 0 -112px; }

#dashboard-paging {
  position: absolute;
  top: 0;
  right: 77px;
  color: #fff;
  font-size: 12.4px;
  font-size: 1.24rem;
  line-height: 18px;
  letter-spacing: 0.08em; }
  #dashboard-paging span {
    padding: 0 3px;
    vertical-align: -3px;
    font-size: 18px;
    font-size: 1.8rem; }

#dashboard-entries {
  overflow: hidden;
  margin: 0 auto;
  min-height: 440px;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  perspective: 400px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%; }
  #dashboard-entries .entry {
    position: relative;
    z-index: 0;
    overflow: hidden;
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 20px 20px 0;
    list-style: none; }
    #dashboard-entries .entry.hidden {
      opacity: 0; }
    #dashboard-entries .entry.showed {
      -webkit-animation-name: up-and-fadein;
      -moz-animation-name: up-and-fadein;
      -ms-animation-name: up-and-fadein;
      animation-name: up-and-fadein;
      -webkit-animation-timing-function: ease-out;
      -moz-animation-timing-function: ease-out;
      -ms-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-duration: 0.3s;
      -moz-animation-duration: 0.3s;
      -ms-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both; }
    #dashboard-entries .entry.down {
      -webkit-animation-name: flipdown;
      -moz-animation-name: flipdown;
      -ms-animation-name: flipdown;
      animation-name: flipdown;
      -webkit-animation-timing-function: ease-out;
      -moz-animation-timing-function: ease-out;
      -ms-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-duration: 0.15s;
      -moz-animation-duration: 0.15s;
      -ms-animation-duration: 0.15s;
      animation-duration: 0.15s;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both; }
    #dashboard-entries .entry.up {
      -webkit-animation-name: flipup;
      -moz-animation-name: flipup;
      -ms-animation-name: flipup;
      animation-name: flipup;
      -webkit-animation-timing-function: ease-out;
      -moz-animation-timing-function: ease-out;
      -ms-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-duration: 0.15s;
      -moz-animation-duration: 0.15s;
      -ms-animation-duration: 0.15s;
      animation-duration: 0.15s;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both; }
    #dashboard-entries .entry.from-down {
      -webkit-animation-name: from-flipdown;
      -moz-animation-name: from-flipdown;
      -ms-animation-name: from-flipdown;
      animation-name: from-flipdown;
      -webkit-animation-timing-function: ease-out;
      -moz-animation-timing-function: ease-out;
      -ms-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-duration: 0.15s;
      -moz-animation-duration: 0.15s;
      -ms-animation-duration: 0.15s;
      animation-duration: 0.15s;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both; }
    #dashboard-entries .entry.from-up {
      -webkit-animation-name: from-flipup;
      -moz-animation-name: from-flipup;
      -ms-animation-name: from-flipup;
      animation-name: from-flipup;
      -webkit-animation-timing-function: ease-out;
      -moz-animation-timing-function: ease-out;
      -ms-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-duration: 0.15s;
      -moz-animation-duration: 0.15s;
      -ms-animation-duration: 0.15s;
      animation-duration: 0.15s;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both; }
    #dashboard-entries .entry a:link, #dashboard-entries .entry a:visited,
    #dashboard-entries .entry a:hover, #dashboard-entries .entry a:active {
      color: #fff; }
  #dashboard-entries .entry-inner {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    cursor: pointer; }
  #dashboard-entries .thumb {
    z-index: 5;
    position: relative; }
  #dashboard-entries .target {
    z-index: 10;
    position: absolute;
    left: -70px;
    top: -70px;
    display: block;
    width: 70px;
    height: 70px;
    background: url(../images/shared/icon_target.png) center center no-repeat; }
  #dashboard-entries .filter {
    opacity: 0;
    z-index: 15;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer; }
    #dashboard-entries .filter.filter-showed {
      opacity: 1.0;
      cursor: default; }
  #dashboard-entries .text {
    overflow: hidden;
    height: 135px;
    margin: 0 0 15px;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.6;
    word-break: break-all;
    word-wrap: break-word;
    text-align: justify; }
  #dashboard-entries .meta {
    font-size: 10px;
    font-size: 1rem; }
  #dashboard-entries .press {
    background: #6cc596; }
    #dashboard-entries .press .entry-inner {
      width: 160px;
      height: 160px;
      padding: 20px; }
    #dashboard-entries .press .target {
      background-color: #6cc596; }
  #dashboard-entries .culture {
    background: #1b8edf; }
    #dashboard-entries .culture .target {
      background-color: #1b8edf; }
  #dashboard-entries .launch {
    background: #df981b; }
    #dashboard-entries .launch .target {
      background-color: #df981b; }
  #dashboard-entries .award {
    background: #af1bdf; }
    #dashboard-entries .award .target {
      background-color: #af1bdf; }
  #dashboard-entries .twitter .entry-inner {
    width: 160px;
    height: 160px;
    padding: 20px; }

.win #dashboard-entries .entry-inner {
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", Helvetica, Arial, sans-serif; }

@media screen and (max-width: 1174px) {
  #dashboard-entries {
    width: 880px; } }
@media screen and (min-width: 1175px) and (max-width: 1379px) {
  #dashboard-entries {
    width: 1100px; } }
@media screen and (min-width: 1380px) {
  #dashboard-entries {
    width: 1320px; } }
#load-dashboard {
  display: none; }

/*===============================================================
	7.	#detail
===============================================================*/
#detail {
  z-index: 100;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 1060px;
  height: auto;
  min-height: 100%;
  background: #fff; }

#detail-inner {
  position: relative;
  overflow: hidden;
  min-height: 100%; }

#detail-loading {
  z-index: 140;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/shared/icon_loading.gif) center 300px no-repeat white; }

#detail-body {
  overflow: hidden;
  position: relative;
  width: 980px;
  height: auto;
  margin: 0 auto;
  padding: 60px 0; }
  #detail-body h1 {
    font-size: 36px;
    font-size: 3.6rem;
    letter-spacing: 0.02em;
    line-height: 1.4; }
  #detail-body .date {
    line-height: 1;
    font-size: 18px;
    font-size: 1.8rem;
    letter-spacing: 0.02em; }
  #detail-body .text {
    margin: 0 0 24px;
    line-height: 2.1;
    font-size: 18px;
    font-size: 1.8rem;
    letter-spacing: 0.02em; }
    #detail-body .text a {
      border-bottom: 2px dotted #000; }
  #detail-body .ja, #detail-body .en {
    display: none; }

.win #detail-body .text {
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", Helvetica, Arial, sans-serif; }

/* press */
#detail-body.press {
  width: 780px; }
  #detail-body.press h1 {
    margin: 0 0 24px;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2.1; }
  #detail-body.press .date {
    position: relative;
    top: -3px;
    margin: 0 0 26px; }

/* press.image */
#detail-body.press.image {
  width: 980px;
  min-height: 500px; }
  #detail-body.press.image h1, #detail-body.press.image .date, #detail-body.press.image .body {
    position: relative;
    left: 540px;
    width: 440px; }
  #detail-body.press.image #detail-media {
    position: absolute;
    left: 0;
    top: 60px; }
  #detail-body.press.image #detail-press-media {
    margin: 0;
    list-style: none; }
  #detail-body.press.image .media {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 500px; }

/* instagram */
#detail-body.instagram {
  min-height: 500px; }
  #detail-body.instagram h1, #detail-body.instagram .date, #detail-body.instagram .body, #detail-body.instagram .account {
    position: relative;
    left: 540px;
    width: 440px; }
  #detail-body.instagram h1 {
    margin: 0 0 24px; }
  #detail-body.instagram .date {
    margin: 0 0 26px; }
  #detail-body.instagram .account {
    height: 48px;
    line-height: 48px;
    vertical-align: middle;
    font-size: 18px;
    font-size: 1.8rem; }
    #detail-body.instagram .account img {
      margin: 0 20px 0 0;
      border: 1px solid #eee;
      vertical-align: middle; }
  #detail-body.instagram .body {
    position: absolute;
    bottom: 117px; }
  #detail-body.instagram footer {
    position: absolute;
    bottom: 59px;
    height: 20px; }
  #detail-body.instagram #detail-media {
    position: absolute;
    left: 0;
    top: 60px; }
  #detail-body.instagram .image {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 500px; }

/* work */
#detail-body.work {
  min-height: 500px; }
  #detail-body.work h1, #detail-body.work .date, #detail-body.work .body {
    position: relative; }
  #detail-body.work h1 {
    top: -8px;
    margin: 0 0 42px; }
  #detail-body.work .date {
    top: -3px;
    margin: 0 0 26px; }
  #detail-body.work #detail-media {
    position: relative;
    height: 684px;
    margin: 0 0 46px; }
  #detail-body.work #detail-work-media {
    height: 640px;
    margin: 0 0 8px;
    list-style: none; }
    #detail-body.work #detail-work-media .media {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      width: 980px;
      height: 640px; }
    #detail-body.work #detail-work-media .video {
      display: none;
      background: #000;
      overflow: hidden; }
      #detail-body.work #detail-work-media .video object {
        margin: 44px 0 0;
        background: #000; }
      #detail-body.work #detail-work-media .video iframe {
        margin: 44px 0 0;
        background: #000; }
  #detail-body.work #detail-work-thumbs {
    position: relative;
    height: 36px;
    list-style: none; }
    #detail-body.work #detail-work-thumbs .detail-thumb {
      opacity: 0;
      float: left;
      width: 53px;
      height: 36px;
      margin: 0 1px 0 0; }
    #detail-body.work #detail-work-thumbs img {
      padding: 1px;
      border: 1px solid #fff;
      cursor: pointer; }
      #detail-body.work #detail-work-thumbs img.here {
        border-color: #000; }
  #detail-body.work .body {
    float: left;
    width: 700px; }
  #detail-body.work .text {
    letter-spacing: 0.04em; }
  #detail-body.work .categories {
    font-size: 13px;
    font-size: 1.3rem; }
    #detail-body.work .categories .category {
      margin: 0 9px 0 0;
      padding: 0 0 1px;
      border-bottom: 1px solid #000;
      cursor: pointer; }
      #detail-body.work .categories .category.on {
        color: #999;
        border-bottom: 1px solid #999; }
  #detail-body.work .meta {
    float: right;
    width: 240px; }
    #detail-body.work .meta .data {
      margin: -29px 0 33px; }
      #detail-body.work .meta .data dt {
        margin: 34px 0 12px;
        font-size: 12.4px;
        font-size: 1.24rem; }
      #detail-body.work .meta .data dd {
        margin: 0 0 5px;
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold;
        letter-spacing: 0.01em; }
      #detail-body.work .meta .data a {
        display: block;
        height: 17px;
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.7; }
        #detail-body.work .meta .data a:link span, #detail-body.work .meta .data a:visited span {
          border-bottom: 2px solid #fff; }
        #detail-body.work .meta .data a:hover span, #detail-body.work .meta .data a:active span {
          color: #000;
          border-bottom: 2px solid #000; }
      #detail-body.work .meta .data span {
        position: relative;
        top: -4px;
        padding: 0 0 0 11px;
        background: url(../images/shared/icon_link.gif) 0 2px no-repeat; }
  #detail-body.work .btn ul {
    margin: 0; }
  #detail-body.work .btn li {
    width: 100%;
    height: 40px;
    margin: 10px 0 0;
    list-style: none; }
  #detail-body.work .btn a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 40px;
    text-indent: inherit;
    white-space: inherit;
    text-align: center;
    font-size: 18px;
    font-size: 1.8rem;
    letter-spacing: 0.05em; }
    #detail-body.work .btn a:link, #detail-body.work .btn a:visited {
      background: #000; }
    #detail-body.work .btn a:hover, #detail-body.work .btn a:active {
      background: #999; }

/* focus */
#detail-body.focus {
  width: 780px; }
  #detail-body.focus h1 {
    margin: -4px 0 40px;
    text-align: center; }
  #detail-body.focus .text {
    margin: 0 0 48px;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2;
    text-align: center; }
  #detail-body.focus .btns {
    width: 240px;
    margin: 0 auto; }
  #detail-body.focus .btn {
    width: 240px;
    height: 40px;
    margin: 0 0 10px; }
    #detail-body.focus .btn a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      font-size: 1.8rem;
      text-indent: inherit;
      letter-spacing: 0.04em; }
      #detail-body.focus .btn a:link, #detail-body.focus .btn a:visited {
        background: #000; }
      #detail-body.focus .btn a:hover, #detail-body.focus .btn a:active {
        background: #999; }

/* career */
#detail-body.career {
  width: 780px; }
  #detail-body.career h1 {
    display: block;
    margin: -4px 0 40px;
    text-align: center; }
  #detail-body.career h2 {
    font-weight: bold;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.7; }
  #detail-body.career .text {
    display: block;
    margin: 0 0 21px;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.7; }
  #detail-body.career .list {
    margin: 0 0 25px; }
    #detail-body.career .list li {
      padding: 0 0 0 16px;
      background: url(../images/shared/icon_dot.gif) 4px 12px no-repeat;
      list-style: none;
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1.7; }
  #detail-body.career .btns {
    width: 240px;
    margin: 0 auto; }
  #detail-body.career .btn {
    width: 240px;
    height: 40px;
    margin: 0 0 10px;
    padding: 24px 0 0; }
    #detail-body.career .btn a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      font-size: 1.8rem;
      text-indent: inherit;
      letter-spacing: 0.04em; }
      #detail-body.career .btn a:link, #detail-body.career .btn a:visited {
        background: #000; }
      #detail-body.career .btn a:hover, #detail-body.career .btn a:active {
        background: #999; }

#detail-close {
  display: none;
  z-index: 150;
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px; }
  #detail-close a {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/shared/btn_close.gif);
    background-repeat: no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; }
    #detail-close a:link, #detail-close a:visited {
      background-position: 20px 0; }
    #detail-close a:hover, #detail-close a:active {
      background-position: 20px -60px; }

.detail-paging {
  display: none;
  z-index: 150;
  overflow: hidden;
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0;
  cursor: pointer;
  color: #fff; }

.detail-paging-arrow {
  z-index: 155;
  position: absolute;
  top: 0;
  width: 40px;
  height: 60px;
  background-image: url(../images/shared/btn_paging.gif);
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

.detail-paging-category,
.detail-paging-text {
  position: relative;
  z-index: 155;
  display: none;
  width: 264px; }

.detail-paging-category {
  overflow: hidden;
  max-width: 256px;
  height: 1.2em;
  padding: 10px 0 0;
  font-size: 12.4px;
  font-size: 1.24rem;
  line-height: 1.2; }

.detail-paging-text {
  position: relative;
  top: 10px;
  overflow: hidden;
  max-width: 256px;
  height: 1.15em;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.2; }

.detail-paging-mask {
  position: relative;
  z-index: 155;
  display: none;
  position: absolute;
  top: 0px;
  width: 56px;
  height: 60px;
  background: url(../images/shared/mask_paging.png) 0 0 no-repeat; }

.detail-paging-bg {
  z-index: 150;
  position: absolute;
  top: 0px;
  width: 0;
  height: 60px;
  background: #000; }

#detail-prev {
  left: 0; }
  #detail-prev .detail-paging-arrow {
    background-position: 0 0; }
  #detail-prev .detail-paging-category,
  #detail-prev .detail-paging-text {
    margin: 0 0 0 50px;
    word-break: break-all;
    word-wrap: break-word; }
  #detail-prev .detail-paging-mask {
    right: 18px; }
  #detail-prev .detail-paging-bg {
    left: 0; }

#detail-next {
  right: 0; }
  #detail-next .detail-paging-arrow {
    right: 0;
    background-position: -40px 0; }
  #detail-next .detail-paging-category,
  #detail-next .detail-paging-text {
    margin: 0 0 0 20px; }
  #detail-next .detail-paging-mask {
    right: 48px; }
  #detail-next .detail-paging-bg {
    right: 0; }

.detail-paging.on {
  /*width: 324px;*/
  background: #000; }
  .detail-paging.on .detail-paging-mask {
    display: block; }

#detail-prev.on .detail-paging-arrow {
  background-position: 0 -60px; }

#detail-next.on .detail-paging-arrow {
  background-position: -40px -60px; }

/*===============================================================
	8.	#contents
===============================================================*/
#scroller {
  overflow: hidden;
  width: 100%; }

#contents {
  z-index: 3;
  overflow: hidden;
  position: relative;
  left: 0;
  top: 0;
  min-height: 219px;
  margin: 0 0 60px;
  border-bottom: 1px solid #e5e5e5;
  background-color: white; }
  #contents.home {
    border-bottom: 1px solid #fff;
    margin-top: -180px; }
  #contents article {
    display: none;
    position: absolute;
    top: 160px;
    width: 16.66%; }
  #contents .en {
    display: none; }

#home {
  left: 0; }

/*===============================================================
	9.	#focus
===============================================================*/
#focus {
  left: 33.33333%; }

#focus-inner {
  min-height: 700px;
  padding: 0 100px 60px; }

#focus-header {
  position: relative;
  width: auto;
  height: 92px;
  margin: 0 auto; }
  #focus-header h1 {
    position: relative;
    left: -2px;
    top: -1px;
    font-size: 36px;
    font-size: 3.6rem; }

#focus-message {
  width: auto;
  margin: 0 auto 47px; }
  #focus-message h1 {
    margin: 0 0 49px;
    font-size: 22px;
    font-size: 2.2rem;
    letter-spacing: -0.06em; }
  #focus-message .message {
    margin: 0 0 10px;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2.1; }
    #focus-message .message span {
      margin: 0 -3px;
      font-size: 12.4px;
      font-size: 1.24rem;
      letter-spacing: 0.04em; }

.android #focus-message .message {
  font-size: 10px;
  font-size: 1rem; }

#focus-area {
  overflow: hidden;
  max-width: 1340px; }
  #focus-area h1 {
    margin: 0 0 34px;
    font-size: 28px;
    font-size: 2.8rem;
    letter-spacing: 0.01em; }

#focus-areas {
  width: 100%; }
  #focus-areas .area-category {
    width: 16.66%;
    height: 125px;
    border: 1px solid #e5e5e5;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    font-size: 1.8rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    cursor: pointer; }
    #focus-areas .area-category.on {
      color: #999; }

#focus-locator-wrapper {
  position: relative;
  width: 100%;
  height: 0; }

#focus-locator {
  position: absolute;
  left: 0;
  top: -11px;
  display: block;
  width: 125px;
  height: 11px;
  background: url(../images/shared/bg_locator.gif) center bottom no-repeat; }

#focus-detail {
  position: relative;
  overflow: hidden;
  width: auto;
  min-height: 180px;
  background: #000; }

#focus-details {
  position: relative;
  width: 600%; }

.focus-detail {
  position: absolute;
  top: 0;
  width: 16.66667%; }
  .focus-detail .focus-detail-inner {
    padding: 0 80px; }
  .focus-detail .body {
    position: relative;
    float: left;
    margin: 0 188px 0 0; }
  .focus-detail .text {
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: -0.06em;
    line-height: 2;
    color: #fff; }
  .focus-detail .btns {
    position: absolute;
    top: 0;
    right: 80px;
    width: 108px; }
    .focus-detail .btns .btn {
      width: 100%;
      margin: 0 0 6px; }
      .focus-detail .btns .btn:last-child {
        margin: 0; }
      .focus-detail .btns .btn a {
        display: inline-block;
        width: auto;
        height: 17px;
        padding: 0 0 0 11px;
        background: url(../images/shared/icon_link_w.gif) 0 2px no-repeat;
        font-size: 14px;
        font-size: 1.4rem;
        color: #fff;
        text-indent: inherit;
        letter-spacing: 0.04em; }
        .focus-detail .btns .btn a:link, .focus-detail .btns .btn a:visited {
          border-bottom: 2px solid #000; }
        .focus-detail .btns .btn a:hover, .focus-detail .btns .btn a:active {
          border-bottom: 2px solid #fff; }

#focus-branding {
  left: 0; }

#focus-strategyx {
  left: 16.66667%; }

#focus-pcmobiletablet {
  left: 33.33333%; }

#focus-installation {
  left: 50%; }

#focus-signage {
  left: 66.66667%; }

#focus-mediasocial {
  left: 83.33333%; }

/*===============================================================
	10.	#work
===============================================================*/
#work {
  left: 50%; }

#work-inner {
  padding: 0 20px 60px 40px; }

#work-inner2 {
  position: relative;
  width: 100%;
  max-width: 1440px; }

#work-header {
  position: relative;
  height: 27px;
  padding: 0 20px 63px 0; }
  #work-header h1 {
    position: absolute;
    left: 61px;
    top: -1px;
    font-size: 36px;
    font-size: 3.6rem; }

#work-nav {
  position: absolute;
  right: 78px;
  top: 5px;
  width: 710px;
  height: 18px;
  margin: 0 auto; }
  #work-nav ul {
    margin: 0; }
  #work-nav li {
    position: absolute;
    top: 0px;
    margin: 0;
    list-style: none;
    font-weight: bold;
    font-size: 12.8px;
    font-size: 1.28rem;
    letter-spacing: 0.03em;
    line-height: 1.3; }
  #work-nav span {
    display: block;
    height: 14px;
    padding: 0 19px 0 23px;
    background-image: url(../images/shared/sort.png);
    background-repeat: no-repeat;
    background-position: 0 -56px;
    cursor: pointer; }
    #work-nav span.disabled, #work-nav span.on {
      opacity: 0.5; }
    #work-nav span.disabled {
      background-position: 0 -126px; }
  #work-nav #work-strategyux-li {
    left: 98px; }
    #work-nav #work-strategyux-li span {
      padding-left: 22px; }
  #work-nav #work-pcmobiletablet-li {
    left: 227px; }
    #work-nav #work-pcmobiletablet-li span {
      padding-left: 23px; }
  #work-nav #work-installation-li {
    left: 390px; }
    #work-nav #work-installation-li span {
      padding-left: 22px; }
  #work-nav #work-signage-li {
    left: 502px; }
    #work-nav #work-signage-li span {
      padding-left: 22px; }
  #work-nav #work-mediasocial-li {
    left: 594px;
    width: 140px; }
    #work-nav #work-mediasocial-li span {
      padding-left: 22px; }

#work-entries {
  overflow: hidden;
  margin: 0 auto;
  padding: 0 0 20px;
  min-height: 440px; }
  #work-entries .entry {
    position: relative;
    z-index: 0;
    overflow: hidden;
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 20px 20px 0;
    list-style: none; }
    #work-entries .entry.hidden {
      opacity: 0; }
    #work-entries .entry.showed {
      -webkit-animation-name: up-and-fadein;
      -moz-animation-name: up-and-fadein;
      -ms-animation-name: up-and-fadein;
      animation-name: up-and-fadein;
      -webkit-animation-timing-function: ease-out;
      -moz-animation-timing-function: ease-out;
      -ms-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-duration: 0.3s;
      -moz-animation-duration: 0.3s;
      -ms-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both; }
    #work-entries .entry a:link, #work-entries .entry a:visited,
    #work-entries .entry a:hover, #work-entries .entry a:active {
      color: #fff; }
  #work-entries .entry-inner {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    cursor: pointer; }
  #work-entries .thumb {
    z-index: 5;
    position: relative; }
  #work-entries .target {
    z-index: 10;
    position: absolute;
    left: -180px;
    top: -180px;
    display: block;
    width: 150px;
    height: 150px;
    padding: 14px 15px 15px;
    background: #fff;
    color: #333; }
    #work-entries .target span {
      display: block;
      line-height: 1.4;
      padding-right: 10px; }
  #work-entries .client {
    margin: 0 0 7px;
    font-size: 12.4px;
    font-size: 1.24rem;
    letter-spacing: 0.02em; }
  #work-entries .name {
    margin: 0;
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: 0.02em; }
  #work-entries .text {
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: 0.02em; }
  #work-entries .meta {
    display: block;
    position: absolute;
    left: 16px;
    bottom: 10px;
    font-size: 12.4px;
    font-size: 1.24rem; }
  #work-entries .date {
    letter-spacing: -0.02em; }
  #work-entries .filter {
    opacity: 0;
    z-index: 15;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer; }
    #work-entries .filter.filter-showed {
      opacity: 1.0;
      cursor: default; }

.win #work-entries .entry-inner {
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", Helvetica, Arial, sans-serif; }

@media screen and (max-width: 1174px) {
  #work-entries {
    width: 880px; } }
@media screen and (min-width: 1175px) and (max-width: 1379px) {
  #work-entries {
    width: 1100px; } }
@media screen and (min-width: 1380px) {
  #work-entries {
    width: 1320px; } }
#load-work {
  display: none; }

/*===============================================================
	11.	#casestudies
===============================================================*/
/*===============================================================
	12.	#about
===============================================================*/
#about {
  left: 16.66667%; }

#about-inner {
  padding: 0 100px; }

#about-inner2 {
  position: relative;
  width: 100%;
  max-width: 1300px; }

#about-header {
  position: relative;
  height: 27px;
  padding: 0 20px 56px 0; }
  #about-header h1 {
    position: absolute;
    left: 1px;
    top: -1px;
    font-size: 36px;
    font-size: 3.6rem; }

#about-body {
  overflow: hidden; }
  #about-body .message {
    width: 48%;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2.1; }
    #about-body .message.left {
      float: left; }
    #about-body .message.right {
      float: right; }

#about-company {
  clear: both;
  padding: 46px 0 60px; }
  #about-company h1 {
    margin: 0 0 34px;
    font-size: 28px;
    font-size: 2.8rem;
    letter-spacing: 0.02em; }

.company-logos {
  z-index: 0;
  position: relative;
  overflow: hidden;
  margin: 0;
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5; }

.company-logo {
  float: left;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.33333%;
  height: 199px;
  border-right: 1px solid #e5e5e5;
  list-style: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  /* cursor: pointer; */ }
  .company-logo div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center; }
    .company-logo div.on {
      opacity: 0.41; }

.company-logo-2cols {
  width: 50% !important; }

.company-logo--type_logo-imgsrc {
  width: 100%; }
  .company-logo--type_logo-imgsrc div {
    background-image: url(../images/shared/logo_imgsrc.png); }

.company-logo--type_logo-d2c {
  width: 100%; }
  .company-logo--type_logo-d2c div {
    background-image: url(../images/shared/logo_d2c.png);
    background-size: 144px auto;
  }

#logo-imgsrcshanghai div {
  background-image: url(../images/shared/logo_imgsrcshanghai.png); }

#logo-nongrid div {
  background-image: url(../images/shared/logo_nongrid.png); }

#logo-a4a div {
  background-image: url(../images/shared/logo_a4a.png); }

#logo-s2factory div {
  background-image: url(../images/shared/logo_s2factory.png); }

#logo-tagle div {
  background-image: url(../images/shared/logo_tagle.png); }

#logo-aiinc div {
  background-image: url(../images/shared/logo_aiinc.png); }

.logo-locator-wrapper {
  z-index: 5;
  position: relative;
  width: 100%;
  height: 0; }

.logo-locator {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 33.33333%;
  height: 11px;
  background: url(../images/shared/bg_locator.gif) center bottom no-repeat; }

.company-details-wrapper2 {
  clear: both;
  width: 100%;
  height: 0;
  background: #000; }

.company-details-wrapper1 {
  overflow: hidden;
  height: 100%; }

.company-details {
  position: relative;
  width: 300%; }

.company-detail {
  position: absolute;
  top: 0;
  width: 33.33333%; }
  .company-detail .company-detail-inner {
    padding: 0 80px; }
  .company-detail .body {
    position: relative;
    float: left;
    margin: 0 188px 0 0; }
  .company-detail .text {
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: -0.06em;
    line-height: 2;
    color: #fff; }
  .company-detail .btns {
    position: absolute;
    top: 0;
    right: 80px;
    width: 108px; }
    .company-detail .btns .btn {
      width: 100%;
      margin: 0 0 6px; }
      .company-detail .btns .btn:last-child {
        margin: 0; }
      .company-detail .btns .btn a {
        display: inline-block;
        width: auto;
        height: 17px;
        padding: 0 0 0 11px;
        background: url(../images/shared/icon_link_w.gif) 0 2px no-repeat;
        font-size: 14px;
        font-size: 1.4rem;
        color: #fff;
        text-indent: inherit;
        letter-spacing: 0.04em; }
        .company-detail .btns .btn a:link, .company-detail .btns .btn a:visited {
          border-bottom: 2px solid #000; }
        .company-detail .btns .btn a:hover, .company-detail .btns .btn a:active {
          border-bottom: 2px solid #fff; }

.tier {
  margin: 0 0 40px;
}

.tier0 .body {
  float: none;
  width: 680px;
  margin: 0 auto; }
.tier0 .logo-locator {
  opacity: 1.0;
  left: 33.33333%;
  top: -11px; }
.tier .company-details-wrapper2 {
  height: 199px; }

#tier2 {
  border-bottom: 1px solid #e5e5e5; }

#company-imgsrc,
#company-imgsrcshanghai,
#company-s2factory {
  left: 0; }

#company-nongrid,
#company-tagle {
  left: 33.33333%; }

#company-a4a,
#company-aiinc {
  left: 66.66667%; }

#about-awards {
  clear: both;
  padding: 44px 0 20px; }
  #about-awards h1 {
    margin: 0 0 35px;
    font-size: 28px;
    font-size: 2.8rem;
    letter-spacing: 0.02em; }
  #about-awards h2 {
    margin: 0 0 18px;
    font-size: 18px;
    font-size: 1.8rem; }
  #about-awards table {
    width: 100%;
    margin: 0 0 40px;
    border-top: 1px solid #e5e5e5; }
  #about-awards th, #about-awards td {
    padding-top: 11px;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    font-weight: normal; }
  #about-awards th {
    width: 80px;
    border-bottom: 1px solid #e5e5e5;
    letter-spacing: 0.14em; }
  #about-awards td {
    letter-spacing: 0.08em; }
  #about-awards .first th, #about-awards .first td {
    padding-top: 16px; }
  #about-awards .last th, #about-awards .last td {
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5; }
  #about-awards p {
    margin: 0 40px 0 0; }
  #about-awards .product {
    width: 420px; }

/*===============================================================
	13.	#career
===============================================================*/
#career {
  left: 66.66667%; }

#career-header {
  position: relative;
  width: auto;
  height: 84px;
  margin: 0 auto;
  padding: 0 100px; }
  #career-header h1 {
    position: relative;
    left: -1px;
    top: 0;
    font-size: 36px;
    font-size: 3.6rem;
    letter-spacing: 0.02em; }

#career-body {
  width: auto;
  padding: 0 100px 60px; }
  #career-body .message {
    margin: 0 0 45px;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2.1;
    letter-spacing: -0.02em; }
    #career-body .message span {
      margin: 0 -3px;
      font-size: 12.4px;
      font-size: 1.24rem;
      letter-spacing: 0.04em; }
    #career-body .message a {
      font-weight: normal;
      border-bottom: 2px dotted #000; }
      #career-body .message a:hover, #career-body .message a:active {
        color: #000; }
  #career-body .officies {
    overflow: hidden; }
  #career-body .office {
    float: left;
    width: 300px;
    margin: 0 0 -5px; }
    #career-body .office .name {
      margin: 0 0 33px;
      font-weight: bold;
      font-size: 28px;
      font-size: 2.8rem;
      letter-spacing: 0.01em; }
    #career-body .office .job {
      margin: 0 0 6px;
      font-size: 13px;
      font-size: 1.3rem;
      font-weight: bold;
      letter-spacing: 0.06em; }
      #career-body .office .job a {
        display: inline-block;
        padding: 0 0 2px 20px;
        background: url(../images/shared/icon_floating.gif) left top no-repeat; }
        #career-body .office .job a:link, #career-body .office .job a:visited {
          border-bottom: 2px solid #fff; }
        #career-body .office .job a:hover, #career-body .office .job a:active {
          color: #000;
          border-bottom: 2px solid #000; }

.android #career-body .message {
  font-size: 10px;
  font-size: 1rem; }

#career-areas-inner {
  height: 1064px;
  margin: 0 auto; }

/*===============================================================
	14.	#contact
===============================================================*/
#contact {
  left: 83.33333%; }

#contact-header {
  position: relative;
  width: auto;
  height: 84px;
  margin: 0 auto;
  padding: 0 100px; }
  #contact-header h1 {
    position: relative;
    left: -1px;
    top: 0;
    font-size: 36px;
    font-size: 3.6rem;
    letter-spacing: 0.02em; }

#contact-body {
  width: auto;
  padding: 0 100px; }
  #contact-body .message {
    margin: 0 0 47px;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2.1;
    letter-spacing: -0.04em; }
  #contact-body .office {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0 0 60px; }
    #contact-body .office h1 {
      margin: 0 0 28px;
      font-weight: bold;
      font-size: 28px;
      font-size: 2.8rem;
      letter-spacing: 0.01em; }
  #contact-body .info {
    overflow: hidden;
    padding: 0 0 0 39px; }
  #contact-body .adress {
    margin: 0 0 26px;
    font-size: 14px;
    font-size: 1.4rem; }
    #contact-body .adress dl {
      clear: both;
      overflow: hidden;
      padding: 0 0 5px; }
    #contact-body .adress dt {
      float: left;
      width: 100px;
      letter-spacing: 0.02em;
      line-height: 1.4; }
    #contact-body .adress dd {
      padding: 0 0 0 100px;
      letter-spacing: 0.04em;
      line-height: 1.4; }
  #contact-body .guide {
    margin: 0 0 35px;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7; }
  #contact-body .links .emails {
    margin: 0 0 36px; }
    #contact-body .links .emails li {
      margin: 0 0 6px;
      list-style: none;
      font-size: 13px;
      font-size: 1.3rem;
      font-weight: bold;
      letter-spacing: 0.06em; }
    #contact-body .links .emails a {
      display: inline-block;
      padding: 0 0 2px 20px;
      background: url(../images/shared/icon_email.gif) left top no-repeat; }
      #contact-body .links .emails a:link, #contact-body .links .emails a:visited {
        border-bottom: 2px solid #fff; }
      #contact-body .links .emails a:hover, #contact-body .links .emails a:active {
        color: #000;
        border-bottom: 2px solid #000; }
  #contact-body .links .map {
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: -0.02em; }
    #contact-body .links .map a {
      display: inline-block;
      padding: 0 0 2px 20px;
      background: url(../images/shared/icon_map.gif) left top no-repeat; }
      #contact-body .links .map a:link, #contact-body .links .map a:visited {
        border-bottom: 2px solid #fff; }
      #contact-body .links .map a:hover, #contact-body .links .map a:active {
        color: #000;
        border-bottom: 2px solid #000; }
  #contact-body .graphic {
    float: left;
    width: 520px;
    height: 520px;
    padding: 4px 0 0; }

/*===============================================================
	15.	#pickup
===============================================================*/
@-webkit-keyframes key-pickup-animation {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1); }

  100% {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    transform: scale(1.03); } }
@-moz-keyframes key-pickup-animation {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1); }

  100% {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    transform: scale(1.03); } }
@keyframes key-pickup-animation {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1); }

  100% {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    transform: scale(1.03); } }
@-webkit-keyframes key-pickup-title {
  0% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    transform: translateX(10%);
    opacity: 0; }

  100% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1; } }
@-moz-keyframes key-pickup-title {
  0% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    transform: translateX(10%);
    opacity: 0; }

  100% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1; } }
@keyframes key-pickup-title {
  0% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    transform: translateX(10%);
    opacity: 0; }

  100% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1; } }
@-webkit-keyframes key-pickup-title-gone {
  0% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    transform: translateX(-30%);
    opacity: 0; } }
@-moz-keyframes key-pickup-title-gone {
  0% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    transform: translateX(-30%);
    opacity: 0; } }
@keyframes key-pickup-title-gone {
  0% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(-30%);
    -moz-transform: translateX(-30%);
    transform: translateX(-30%);
    opacity: 0; } }
#pickup {
  width: 100%;
  position: relative;
  background-color: black;
  overflow: hidden;
  color: white !important;
  z-index: 0;
  cursor: pointer; }
  #pickup .cover-container {
    width: 100%; }
    #pickup .cover-container.active {
      position: absolute; }
    #pickup .cover-container.deactive {
      position: absolute; }
    #pickup .cover-container .cover {
      width: 100%; }
      #pickup .cover-container .cover.start {
        -webkit-animation: key-pickup-animation 10s ease-out 0s 1 forwards;
        -moz-animation: key-pickup-animation 10s ease-out 0s 1 forwards;
        animation: key-pickup-animation 10s ease-out 0s 1 forwards; }
  #pickup .title-container {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1px;
    margin: auto;
    margin-left: 9.76563%;
    width: 100%;
    z-index: 1; }
  #pickup .title {
    font-size: 3vw; }
  #pickup .sub-title {
    margin-top: 30px;
    font-size: 2vw;
    opacity: 0; }
    #pickup .sub-title.active {
      display: block;
      -webkit-animation: key-pickup-title 0.5s ease-out 0.5s 1 forwards;
      -moz-animation: key-pickup-title 0.5s ease-out 0.5s 1 forwards;
      animation: key-pickup-title 0.5s ease-out 0.5s 1 forwards; }
    #pickup .sub-title.deactive {
      -webkit-animation: key-pickup-title-gone 0.3s ease-out 0s 1 forwards;
      -moz-animation: key-pickup-title-gone 0.3s ease-out 0s 1 forwards;
      animation: key-pickup-title-gone 0.3s ease-out 0s 1 forwards; }
    #pickup .sub-title img {
      vertical-align: middle; }
  #pickup .dot-container {
    position: absolute;
    z-index: 10;
    width: 100%;
    bottom: 40px;
    text-align: center; }
    #pickup .dot-container .dot {
      width: 8px;
      margin: 5px;
      opacity: 0.3; }
      #pickup .dot-container .dot.active {
        opacity: 1; }