@charset "UTF-8";
/* IEハック用mixin */
@font-face {
  font-family: DINCB;
  src: url(../fonts/DINCB.eot); }
@font-face {
  font-family: DINCB;
  src: url(../fonts/DINCB.woff); }
* {
  box-sizing: border-box;
  font-size: 13px; }

u {
  font-weight: bold; }

body {
  color: #FFF;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.05em; }

.flex {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap; }
  .flex._center {
    -webkit-justify-content: center;
    /* Safari */
    justify-content: center; }
  .flex._start {
    -webkit-justify-content: flex-start;
    /* Safari */
    justify-content: flex-start; }
  .flex._between {
    -webkit-justify-content: space-between;
    /* Safari */
    justify-content: space-between; }
  .flex._around {
    -webkit-justify-content: space-around;
    /* Safari */
    justify-content: space-around; }
  .flex._align_start {
    -webkit-align-items: flex-start;
    /* Safari */
    align-items: flex-start; }
  .flex._align_stretch {
    -webkit-align-items: stretch;
    /* Safari */
    align-items: stretch; }
  .flex._align_center {
    -webkit-align-items: center;
    /* Safari */
    align-items: center; }

a {
  color: #3cbee9; }
  a:hover {
    color: #40d9ff; }

header {
  position: fixed;
  z-index: 5;
  width: 100%;
  display: -webkit-flex;
  /* Safari */
  display: -webkit-box;
  /*--- Androidブラウザ用 ---*/
  display: -ms-flexbox;
  /*--- IE10 ---*/
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
  box-pack: justify;
  flex-pack: justify;
  padding: 20px 60px 0 60px; }
  _:-ms-fullscreen, :root header {
    /* IE11以上 */
    display: block; }
    _:-ms-fullscreen:after, :root header:after {
      content: "";
      display: table;
      clear: both; }
  @media screen and (max-width: 768px) {
    header {
      overflow-x: hidden; } }
  header h1 {
    width: 200px;
    height: 45px; }
    _:-ms-fullscreen, :root header h1 {
      /* IE11以上 */
      float: left; }
    header h1 a {
      width: 200px;
      height: 45px;
      text-indent: -9999px;
      display: block;
      background: url(../images/logo_yoko.svg) no-repeat; }
    @media screen and (max-width: 768px) {
      header h1 {
        margin: 20px auto; } }
  _:-ms-fullscreen, :root header nav {
    /* IE11以上 */
    width: 200px;
    float: right; }
  @media screen and (max-width: 768px) {
    header nav {
      width: 100%;
      margin: 0 auto;
      display: block; } }
  header nav ul {
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-flex-wrap: wrap;
    /* Safari */
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    /* Safari */
    justify-content: flex-end; }
    @media screen and (max-width: 768px) {
      header nav ul {
        -webkit-justify-content: center;
        /* Safari */
        justify-content: center; } }
    header nav ul li {
      min-width: 55px; }
      header nav ul li a {
        color: #FFF;
        font-family: DINCB;
        font-size: 18px;
        text-align: center;
        text-decoration: none;
        padding: 10px; }
        header nav ul li a span {
          font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
          display: block;
          text-align: center;
          font-size: 10px;
          font-weight: bold; }
        header nav ul li a:hover {
          color: #40d9ff; }
  header:before {
    width: 120%;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
    display: block;
    content: "";
    position: absolute;
    top: -110px;
    left: -10%;
    z-index: -1; }
    @media screen and (max-width: 768px) {
      header:before {
        top: -90px; } }
  header:after {
    width: 120%;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    -moz-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
    display: block;
    content: "";
    position: absolute;
    top: -110px;
    left: -10%;
    z-index: -1; }
    @media screen and (max-width: 768px) {
      header:after {
        top: -90px; } }

#firstView {
  width: 100%;
  height: 100vh;
  background: black url(../images/ph_firstView.jpg) no-repeat center center;
  background-blend-mode: luminosity;
  background-size: cover;
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: 5s;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    #firstView {
      background: black url(../images/ph_firstView.jpg) no-repeat center center;
      background-blend-mode: luminosity;
      background-size: auto 100%; } }
  #firstView:hover {
    background: rgba(0, 0, 0, 0) url(../images/ph_firstView.jpg) no-repeat center center;
    background-blend-mode: luminosity;
    background-size: cover;
    transform: translate3d(0, 0, 0);
    transition: 5s; }
  #firstView img {
    width: 200px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -60px 0 0 -100px; }
  #firstView:before {
    width: 120%;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    -moz-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
    display: block;
    content: "";
    position: absolute;
    bottom: -110px;
    left: -10%;
    z-index: 1; }
  #firstView:after {
    width: 120%;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
    display: block;
    content: "";
    position: absolute;
    bottom: -110px;
    left: -10%;
    z-index: 1; }

_::-webkit-full-page-media, _:future, :root #firstView {
  background: rgba(0, 0, 0, 0) url(../images/ph_firstView_ie.jpg) no-repeat center center;
  background-size: auto 100%; }

@supports (-ms-ime-align: auto) {
  #firstView {
    background: rgba(0, 0, 0, 0) url(../images/ph_firstView_ie.jpg) no-repeat center center;
    background-size: cover; } }
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, #firstView {
    background: rgba(0, 0, 0, 0) url(../images/ph_firstView_ie.jpg) no-repeat center center;
    background-size: cover; }

  /* IE11 */ }
@media all and (-ms-high-contrast: none) {
  #firstView {
    background: rgba(0, 0, 0, 0) url(../images/ph_firstView_ie.jpg) no-repeat center center;
    background-size: cover; }

  /* IE10 */ }
#secondView {
  position: relative;
  z-index: 2;
  background: #000; }
  #secondView article h2 {
    font-size: 18px;
    margin-bottom: 20px; }
  #secondView article p {
    line-height: 1.8em; }
  #secondView article:nth-of-type(1) {
    width: 100%;
    min-height: 580px;
    background: black url(../images/ph_secondView_01.jpg) no-repeat center center;
    background-size: 100% auto;
    background-blend-mode: luminosity;
    position: relative;
    transition: 3s;
    transform: translate3d(0, 0, 0); }
    @media screen and (max-width: 768px) {
      #secondView article:nth-of-type(1) {
        min-height: 100vh;
        background: black url(../images/ph_secondView_01.jpg) no-repeat center bottom;
        background-size: 100% auto; } }
    #secondView article:nth-of-type(1):before {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      transition: 5s;
      transform: translate3d(0, 0, 0); }
    #secondView article:nth-of-type(1):hover {
      background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01.jpg) no-repeat center center;
      background-size: 100% auto;
      background-blend-mode: luminosity;
      transition: 3s;
      transform: translate3d(0, 0, 0); }
      @media screen and (max-width: 768px) {
        #secondView article:nth-of-type(1):hover {
          background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01.jpg) no-repeat bottom center;
          background-size: 100% auto;
          background-blend-mode: luminosity;
          transition: 3s;
          transform: translate3d(0, 0, 0); } }
    #secondView article:nth-of-type(1) div {
      position: absolute;
      z-index: 1;
      text-align: center;
      right: 50%;
      top: 25%;
      width: 500px; }
      @media screen and (max-width: 768px) {
        #secondView article:nth-of-type(1) div {
          position: static;
          width: 100%;
          padding-top: 150px; } }
  #secondView article:nth-of-type(2) {
    width: 100%;
    height: 110px;
    background: #FFF;
    position: relative;
    color: #000; }
    @media screen and (max-width: 768px) {
      #secondView article:nth-of-type(2) {
        height: 100vh; } }
    #secondView article:nth-of-type(2) div {
      position: absolute;
      z-index: 5;
      width: 500px;
      left: 50%;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #secondView article:nth-of-type(2) div {
          position: static;
          width: 100%;
          height: 50vh;
          padding: 20px; } }
    #secondView article:nth-of-type(2):before {
      width: 120%;
      height: 200px;
      background: #FFF;
      background-blend-mode: multiply;
      -moz-transform: rotate(7deg);
      -webkit-transform: rotate(7deg);
      -o-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
      transform: rotate(7deg);
      display: block;
      content: "";
      position: absolute;
      top: -110px;
      left: -10%;
      z-index: 1; }
      @media screen and (max-width: 768px) {
        #secondView article:nth-of-type(2):before {
          display: none; } }
    #secondView article:nth-of-type(2):after {
      width: 120%;
      height: 200px;
      background: #FFF;
      background-blend-mode: multiply;
      -moz-transform: rotate(7deg);
      -webkit-transform: rotate(7deg);
      -o-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
      transform: rotate(7deg);
      display: block;
      content: "";
      position: absolute;
      bottom: -110px;
      left: -10%;
      z-index: 1; }
      @media screen and (max-width: 768px) {
        #secondView article:nth-of-type(2):after {
          display: none; } }
    #secondView article:nth-of-type(2) .phCircle {
      width: 500px;
      height: 500px;
      border-radius: 250px;
      overflow: hidden;
      position: absolute;
      z-index: 3;
      right: 50%;
      top: -200%;
      background: black url(../images/ph_secondView_02.jpg) no-repeat;
      background-size: contain;
      background-blend-mode: luminosity;
      transition: 3s;
      transform: translate3d(0, 0, 0); }
      @media screen and (max-width: 768px) {
        #secondView article:nth-of-type(2) .phCircle {
          width: 100%;
          height: 50vh;
          position: static;
          display: block;
          border-radius: 0px;
          background-size: 100% auto;
          background-position: center center;
          background-size: cover; } }
      #secondView article:nth-of-type(2) .phCircle:hover {
        background: rgba(0, 0, 0, 0) url(../images/ph_secondView_02.jpg) no-repeat;
        background-size: cover;
        transition: 3s;
        transform: translate3d(0, 0, 0); }
  #secondView article:nth-of-type(3) {
    width: 100%;
    min-height: 580px;
    background: #000;
    position: relative;
    overflow: hidden; }
    @media screen and (max-width: 768px) {
      #secondView article:nth-of-type(3) {
        height: 100vh;
        padding: 150px 20px 20px 20px; } }
    #secondView article:nth-of-type(3) div {
      text-align: center;
      width: 500px;
      position: absolute;
      top: 35%; }
      #secondView article:nth-of-type(3) div:first-of-type {
        right: 50%; }
      #secondView article:nth-of-type(3) div:last-of-type {
        left: 50%; }
      @media screen and (max-width: 768px) {
        #secondView article:nth-of-type(3) div {
          width: 100%;
          position: static; }
          #secondView article:nth-of-type(3) div h2 {
            margin-top: 20px; } }
    #secondView article:nth-of-type(3) dl {
      display: -webkit-flex;
      /* Safari */
      display: flex;
      -webkit-flex-wrap: wrap;
      /* Safari */
      flex-wrap: wrap;
      line-height: 1.6em; }
      #secondView article:nth-of-type(3) dl dt {
        width: 42%;
        text-align: right;
        padding: 5px; }
        @media screen and (max-width: 768px) {
          #secondView article:nth-of-type(3) dl dt {
            width: 30%; } }
      #secondView article:nth-of-type(3) dl dd {
        width: 58%;
        padding: 5px;
        text-align: left; }
        @media screen and (max-width: 768px) {
          #secondView article:nth-of-type(3) dl dd {
            width: 70%; } }
    #secondView article:nth-of-type(3) .siliconWafer {
      position: absolute;
      display: block;
      background: url(../images/silicon_wafer.svg) no-repeat;
      background-size: cover; }
      #secondView article:nth-of-type(3) .siliconWafer:nth-of-type(1) {
        width: 600px;
        height: 600px;
        left: -300px;
        top: -100px;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5; }
        @media screen and (max-width: 768px) {
          #secondView article:nth-of-type(3) .siliconWafer:nth-of-type(1) {
            display: none; } }
      #secondView article:nth-of-type(3) .siliconWafer:nth-of-type(2) {
        width: 300px;
        height: 300px;
        left: 160px;
        top: 350px;
        filter: alpha(opacity=40);
        -moz-opacity: 0.4;
        opacity: 0.4; }
        @media screen and (max-width: 768px) {
          #secondView article:nth-of-type(3) .siliconWafer:nth-of-type(2) {
            width: 200px;
            height: 200px;
            left: 70%;
            top: -50px;
            filter: alpha(opacity=40);
            -moz-opacity: 0.4;
            opacity: 0.4; } }
      #secondView article:nth-of-type(3) .siliconWafer:nth-of-type(3) {
        width: 270px;
        height: 270px;
        right: 160px;
        top: 50px;
        filter: alpha(opacity=40);
        -moz-opacity: 0.4;
        opacity: 0.4; }
      #secondView article:nth-of-type(3) .siliconWafer:nth-of-type(4) {
        width: 500px;
        height: 500px;
        right: -200px;
        top: 250px;
        filter: alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6; }
        @media screen and (max-width: 768px) {
          #secondView article:nth-of-type(3) .siliconWafer:nth-of-type(4) {
            filter: alpha(opacity=20);
            -moz-opacity: 0.2;
            opacity: 0.2; } }

_::-webkit-full-page-media, _:future, :root #secondView article:nth-of-type(1) {
  background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01_ie.jpg) no-repeat bottom center;
  background-size: 100% auto;
  transition: 3s;
  transform: translate3d(0, 0, 0); }
  @media screen and (max-width: 768px) {
    _::-webkit-full-page-media, _:future, :root #secondView article:nth-of-type(1) {
      min-height: 100vh;
      background: black url(../images/ph_secondView_01_ie.jpg) no-repeat center bottom;
      background-size: 100% auto; } }

_::-webkit-full-page-media, _:future, :root #secondView article:nth-of-type(1):hover {
  background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01.jpg) no-repeat center center;
  background-size: 100% auto;
  transition: 3s;
  transform: translate3d(0, 0, 0); }
  @media screen and (max-width: 768px) {
    _::-webkit-full-page-media, _:future, :root #secondView article:nth-of-type(1):hover {
      background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01.jpg) no-repeat center bottom;
      background-size: 100% auto;
      transition: 3s;
      transform: translate3d(0, 0, 0); } }

_::-webkit-full-page-media, _:future, :root #secondView article:nth-of-type(2) .phCircle {
  background: rgba(0, 0, 0, 0) url(../images/ph_secondView_02_ie.jpg) no-repeat center center;
  background-size: cover; }

@supports (-ms-ime-align: auto) {
  #secondView article:nth-of-type(1) {
    background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01_ie.jpg) no-repeat center center;
    background-size: cover; }

  #secondView article:nth-of-type(1):hover {
    background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01.jpg) no-repeat center center; }

  #secondView article:nth-of-type(2) .phCircle {
    background: rgba(0, 0, 0, 0) url(../images/ph_secondView_02_ie.jpg) no-repeat center center;
    background-size: cover; } }
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, #secondView article:nth-of-type(1) {
    background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01_ie.jpg) no-repeat center center;
    background-size: cover; }

  *::-ms-backdrop, #secondView article:nth-of-type(2) .phCircle {
    background: rgba(0, 0, 0, 0) url(../images/ph_secondView_02_ie.jpg) no-repeat center center;
    background-size: cover; }

  /* IE11 */ }
@media all and (-ms-high-contrast: none) {
  #secondView article:nth-of-type(1) {
    background: rgba(0, 0, 0, 0) url(../images/ph_secondView_01_ie.jpg) no-repeat center center;
    background-size: cover; }

  #secondView article:nth-of-type(2) .phCircle {
    background: rgba(0, 0, 0, 0) url(../images/ph_secondView_02_ie.jpg) no-repeat center center;
    background-size: cover; }

  /* IE10 */ }
#mapView {
  width: 100%;
  height: 60vh;
  position: relative; }
  @media screen and (max-width: 768px) {
    #mapView {
      height: 100vh; } }
  #mapView #mapCnt {
    width: 100%;
    height: 100%; }
  #mapView #accessCnt {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 30px;
    background: #FFF;
    right: 50%;
    bottom: 50%;
    margin-bottom: -100px;
    margin-right: 150px;
    color: #000; }
    @media screen and (max-width: 768px) {
      #mapView #accessCnt {
        margin-right: -150px;
        bottom: 20px;
        margin-bottom: 0; } }
    #mapView #accessCnt h2 {
      font-size: 18px;
      margin-bottom: 1em; }
    #mapView #accessCnt p {
      line-height: 1.6em; }
  #mapView .fukidashi {
    color: #000; }

.fadeIn {
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  transition: .8s; }

.switch {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

footer {
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 20px; }

/*# sourceMappingURL=main.css.map */