@charset "UTF-8";
/* ---------------------------------------- */
.color-11 {
  color: #daaa00; }

.color-32 {
  color: #9d9d8f; }

.bg-38 {
  background-color: #fbfaf1; }

/* ---------------------------------------- */
/*
Phones (768px未満)
Tablets (768px〜991px)
Desktops (992px〜1199px)	
Desktops (1200px以上)
*/
/* ---------------------------------------- */
body {
  font-size: 13px; }
  @media screen and (min-width: 768px) {
    body {
      font-size: 16px; } }

#wrap {
  position: relative;
  width: 100%;
  height: 100%; }

header {
  position: absolute; }

ul#slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: table; }
  ul#slider h2 {
    font-size: 32px; }
    @media screen and (min-width: 768px) {
      ul#slider h2 {
        letter-spacing: -0.05em;
        font-size: 60px; } }
  @media screen and (max-width: 767px) {
    ul#slider p {
      text-align: center; }
      ul#slider p img {
        height: 12px;
        width: auto; } }
  ul#slider .container-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%; }
  ul#slider .container {
    position: relative;
    z-index: 2;
    overflow: hidden; }
  ul#slider .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center bottom;
    z-index: 1;
    transition: transform 0s ease-out;
    transform: scale(1, 1); }
  ul#slider .bg.zoom {
    transform: scale(1.15, 1.15);
    transition: transform 10s ease-out; }

#home {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; }
  #home video {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background-size: cover; }
    @media screen and (max-width: 767px) {
      #home video {
        display: none; } }
  #home h2 {
    position: relative;
    overflow: hidden;
    line-height: 28px;
    height: 28px;
    text-align: center; }
    @media screen and (min-width: 768px) {
      #home h2 {
        line-height: 40px;
        height: 40px; } }
    @media screen and (min-width: 768px) {
      #home h2 {
        line-height: 55px;
        height: 55px; } }
    @media screen and (min-width: 992px) {
      #home h2 {
        line-height: 55px;
        height: 55px; } }
    @media screen and (min-width: 1200px) {
      #home h2 {
        line-height: 66px;
        height: 66px; } }
    #home h2 img {
      position: relative;
      top: 100%;
      height: 100%;
      width: auto; }
  #home .bg-sp {
    display: none; }
  @media screen and (max-width: 768px) {
    #home .bg-sp {
      display: block;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; } }
  #home p, #home .next {
    opacity: 0; }

@media screen and (min-width: 1024px) {
  .ipad #home .bg-sp {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; } }

#philosophy {
  color: #fff;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    #philosophy h2 img {
      max-width: 70%; } }
  #philosophy .bg {
    background-image: url(../img/philosophy/bg.jpg); }
    @media screen and (max-width: 767px) {
      #philosophy .bg {
        background-image: url(../img/philosophy/bg_sp@2x.jpg); } }

#activity {
  color: #fff;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  z-index: 20;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    #activity {
      color: #333; } }
  #activity .bg {
    background-image: url(../img/activity/bg.jpg); }
    @media screen and (max-width: 767px) {
      #activity .bg {
        background-image: url(../img/activity/bg_sp@2x.jpg); } }
  @media screen and (max-width: 767px) {
    #activity p {
      color: #fff; } }

#about {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  z-index: 20;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    #about h2 img {
      max-width: 50%; } }
  #about .bg {
    background-image: url(../img/about/bg.jpg); }
    @media screen and (max-width: 767px) {
      #about .bg {
        background-image: url(../img/about/bg_sp@2x.jpg); } }

#recruit {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  z-index: 20;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    #recruit h2 img {
      max-width: 60%; } }
  #recruit .bg {
    background-image: url(../img/recruit/bg.jpg); }
    @media screen and (max-width: 767px) {
      #recruit .bg {
        background-image: url(../img/recruit/bg_sp@2x.jpg); } }

/* ---------------------------------------- */
.next {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 70px;
  height: 70px;
  margin-top: -20px;
  z-index: 1000;
  background-image: url(../asset/img/ic_next_1.svg);
  background-position: center top;
  background-repeat: no-repeat;
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600; }
  .next span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center; }
  @media screen and (max-width: 767px) {
    .next {
      width: 80px;
      height: 40px;
      margin-top: -20px;
      right: 0px;
      background-size: 16px 31px; }
      .next span {
        display: none; } }
  @media screen and (min-width: 768px) {
    .next {
      -webkit-animation-name: moveNextArrow;
      -webkit-animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      animation-name: moveNextArrow;
      animation-duration: 3s;
      animation-iteration-count: infinite; } }

.next.black {
  background-image: url(../asset/img/ic_next_2.svg);
  color: #333; }

.next:hover span {
  text-decoration: underline; }

@-webkit-keyframes moveNextArrow {
  0% {
    background-position: -100% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  10% {
    background-position: center top;
    background-size: 21px 41px; }
  90% {
    background-position: center top;
    background-size: 21px 41px; }
  100% {
    background-position: 200% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes moveNextArrow {
  0% {
    background-position: -100% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  10% {
    background-position: center top;
    background-size: 21px 41px; }
  90% {
    background-position: center top;
    background-size: 21px 41px; }
  100% {
    background-position: 200% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.prev {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 70px;
  height: 70px;
  margin-top: -20px;
  z-index: 1000;
  background-image: url(../asset/img/ic_prev_1.svg);
  background-position: center top;
  background-repeat: no-repeat;
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600; }
  .prev span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center; }
  @media screen and (max-width: 767px) {
    .prev {
      width: 80px;
      height: 40px;
      margin-top: -20px;
      left: 0px;
      background-size: 16px 31px; }
      .prev span {
        display: none; } }
  @media screen and (min-width: 768px) {
    .prev {
      -webkit-animation-name: movePrevArrow;
      -webkit-animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      animation-name: movePrevArrow;
      animation-duration: 3s;
      animation-iteration-count: infinite; } }

.prev.black {
  background-image: url(../asset/img/ic_prev_2.svg);
  color: #333; }

.prev:hover span {
  text-decoration: underline; }

@-webkit-keyframes movePrevArrow {
  0% {
    background-position: 100% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  10% {
    background-position: center top;
    background-size: 21px 41px; }
  90% {
    background-position: center top;
    background-size: 21px 41px; }
  100% {
    background-position: -200% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes movePrevArrow {
  0% {
    background-position: 100% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  10% {
    background-position: center top;
    background-size: 21px 41px; }
  90% {
    background-position: center top;
    background-size: 21px 41px; }
  100% {
    background-position: -200% top;
    background-size: 10px 41px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }