@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
#toppage {
  height: 100%; }
  #toppage #circle {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    width: 1000px;
    height: 1000px;
    transition: 1s ease; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #circle {
        width: 360px;
        height: 360px; } }
    #toppage #circle.p_main svg {
      opacity: 0.7; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle.p_main svg {
          opacity: 0.6; } }
    #toppage #circle.p_concept {
      mix-blend-mode: normal; }
      #toppage #circle.p_concept svg {
        transform: scale(1.4);
        opacity: 1; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #circle.p_concept svg {
            transform: scale(2.4); } }
    #toppage #circle.p_message svg {
      transform: scale(0.55);
      opacity: 0.5; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle.p_message svg {
          transform: scale(1); } }
    #toppage #circle.p_about svg {
      transform: scale(0.45);
      opacity: 0.27; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle.p_about svg {
          transform: scale(0.8); } }
    #toppage #circle.p_work svg {
      transform: scale(1);
      opacity: 0.27; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle.p_work svg {
          transform: scale(1.2); } }
    #toppage #circle.p_special {
      mix-blend-mode: hard-light; }
      #toppage #circle.p_special svg {
        opacity: 0.5; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #circle.p_special svg {
            transform: scale(0.9); } }
    #toppage #circle.p_culture svg {
      opacity: 0.27; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle.p_culture svg {
          transform: scale(0.8); } }
    #toppage #circle.p_last svg {
      opacity: 0; }
    #toppage #circle svg {
      display: block;
      opacity: 0.65;
      transition: 1s ease;
      transform: scale(0.5); }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle svg {
          transform: scale(1); } }
      #toppage #circle svg path {
        fill: url(#Gradient1); }
  #toppage #circle2 {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scaleX(-1);
    pointer-events: none;
    width: 1000px;
    height: 1000px;
    transition: 1s ease;
    mix-blend-mode: hard-light; }
    #toppage #circle2.p_concept svg {
      transform: scale(1.4);
      opacity: 0.2; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle2.p_concept svg {
          transform: scale(2.4); } }
    #toppage #circle2 svg {
      display: block;
      opacity: 0;
      transition: 1s ease;
      transform: scale(0.5); }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #circle2 svg {
          transform: scale(1); } }
      #toppage #circle2 svg path {
        fill: url(#Gradient1); }
  #toppage #main_visual {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden; }
    #toppage #main_visual figure {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      position: absolute;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover; }
    #toppage #main_visual h2 {
      width: 358px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin-left: -200px;
      z-index: 200; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #main_visual h2 {
          margin-left: 0px;
          width: 240px; } }
    #toppage #main_visual .btn_scroll {
      position: absolute;
      bottom: 20px;
      left: 50%;
      z-index: 120;
      transform: translate(-50%, -30px); }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #main_visual .btn_scroll {
          bottom: 50px; } }
      #toppage #main_visual .btn_scroll a {
        color: #fff;
        font-size: 1.8rem;
        letter-spacing: 0.15em;
        font-family: "Roboto", "Droid Sans", "Noto Sans JP", Arial, sans-serif;
        font-weight: 300;
        position: relative;
        display: inline-block; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #main_visual .btn_scroll a {
            font-size: 1.5rem; } }
        #toppage #main_visual .btn_scroll a:after {
          display: block;
          content: "";
          width: 1px;
          height: 80px;
          background-color: #fff;
          position: absolute;
          left: 50%;
          top: 2em; }
  #toppage #sec_concept {
    padding: 260px 0 220px;
    position: relative;
    z-index: 100; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_concept {
        padding: 180px 0 150px; } }
    #toppage #sec_concept p {
      font-size: 2.0rem;
      text-align: center;
      letter-spacing: 0.1em;
      line-height: 2.2;
      color: #fff; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_concept p {
          font-size: 1.5rem;
          letter-spacing: 0.07em; } }
  #toppage #sec_message, #toppage #sec_about {
    padding: 70px 0 120px;
    position: relative;
    z-index: 100;
    /*figure {
    	position: relative;
    	&:after {
    		display: block;
    		content: "";
    		width: 100%;
    		height: 100%;
    		background-color: #f3f3f3;
    		position: absolute;
    		left: 0;
    		top: 0;
    	}
    }*/ }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_message, #toppage #sec_about {
        padding: 50px 0 20px; } }
    #toppage #sec_message .inner, #toppage #sec_about .inner {
      position: relative; }
    #toppage #sec_message .ttl_sec_top, #toppage #sec_about .ttl_sec_top {
      position: relative;
      top: -12px; }
      #toppage #sec_message .ttl_sec_top img, #toppage #sec_about .ttl_sec_top img {
        display: inline-block;
        margin-right: 28px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_message .ttl_sec_top img, #toppage #sec_about .ttl_sec_top img {
            display: block; } }
      #toppage #sec_message .ttl_sec_top span, #toppage #sec_about .ttl_sec_top span {
        font-size: 1.4rem;
        position: relative;
        letter-spacing: 0.35em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_message .ttl_sec_top span, #toppage #sec_about .ttl_sec_top span {
            display: block;
            font-size: 1.2rem;
            margin-top: 5px; } }
    #toppage #sec_message .btn, #toppage #sec_about .btn {
      position: absolute;
      right: 10px;
      top: 360px;
      z-index: 100; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_message .btn, #toppage #sec_about .btn {
          top: 39.8vw; } }
  #toppage #sec_message .ttl_sec_top img {
    width: 312px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_message .ttl_sec_top img {
        width: 187.2px; } }
  #toppage #sec_message .ttl_sec_top span {
    top: -19px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_message .ttl_sec_top span {
        top: -10px; } }
  #toppage #sec_about .ttl_sec_top img {
    width: 234px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_about .ttl_sec_top img {
        width: 140.4px; } }
  #toppage #sec_about .ttl_sec_top span {
    top: 4px; }
  #toppage #sec_work {
    padding: 160px 0 260px;
    position: relative;
    z-index: 2; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_work {
        padding: 70px 0 90px; } }
    #toppage #sec_work .ttl_sec_top {
      margin-right: 140px;
      padding-top: 12px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_work .ttl_sec_top {
          padding-top: 0px;
          margin-right: 140px; } }
      #toppage #sec_work .ttl_sec_top img {
        width: 219px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_work .ttl_sec_top img {
            width: 131.4px; } }
      #toppage #sec_work .ttl_sec_top span {
        display: block;
        margin: 17px 0 0 10px;
        letter-spacing: 0.3em;
        font-size: 1.4rem; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_work .ttl_sec_top span {
            margin-top: 10px; } }
    #toppage #sec_work .slider_area {
      margin: 80px auto 0;
      width: 100%;
      height: 29vw; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_work .slider_area {
          margin: 40px auto 0;
          height: 60vw; } }
      #toppage #sec_work .slider_area figure {
        padding: 30px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_work .slider_area figure {
            padding: 12px; } }
    #toppage #sec_work .set_ttl {
      display: flex;
      max-width: 500px;
      margin-top: 25px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_work .set_ttl {
          justify-content: space-between; } }
  #toppage #sec_special {
    padding: 100px 0;
    position: relative; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_special {
        padding: 40px 0 50px; } }
    #toppage #sec_special:before {
      content: "";
      display: block;
      width: 100%;
      height: 75%;
      background-color: rgba(0, 175, 141, 0.35);
      position: absolute;
      left: 0;
      top: 0; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_special:before {
          height: 100%; } }
    #toppage #sec_special .ttl_sec_top {
      text-align: center;
      margin-bottom: 25px; }
      #toppage #sec_special .ttl_sec_top img {
        width: 266px;
        display: inline-block; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_special .ttl_sec_top img {
            width: 159.6px; } }
    #toppage #sec_special .box_shortstory {
      position: relative; }
      #toppage #sec_special .box_shortstory figure {
        position: relative; }
        #toppage #sec_special .box_shortstory figure .ttl_shortstory {
          width: 716px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-49%, -50%);
          z-index: 100; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            #toppage #sec_special .box_shortstory figure .ttl_shortstory {
              width: 280px; } }
      #toppage #sec_special .box_shortstory .btn {
        position: absolute;
        right: 0px;
        bottom: -40px;
        z-index: 100; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_special .box_shortstory .btn {
            bottom: 0px; } }
  #toppage #sec_culture {
    padding: 160px 0 280px;
    position: relative;
    z-index: 100; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_culture {
        padding: 100px 0 20px; } }
    #toppage #sec_culture .ttl_sec_top {
      text-align: center;
      margin-bottom: 100px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_culture .ttl_sec_top {
          margin-bottom: 110px; } }
      #toppage #sec_culture .ttl_sec_top img {
        width: 284px;
        display: inline-block; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_culture .ttl_sec_top img {
            width: 170.4px; } }
    #toppage #sec_culture p {
      font-size: 1.8rem;
      font-weight: bold;
      text-align: center;
      letter-spacing: 0.2em;
      margin-bottom: 17px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_culture p {
          font-size: 1.5rem;
          margin-bottom: 10px; } }
    #toppage #sec_culture a {
      display: block;
      position: relative; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_culture a {
          margin-bottom: 50px; } }
      #toppage #sec_culture a figure img {
        transition: 0.8s; }
      #toppage #sec_culture a .btn {
        position: absolute;
        left: 50%;
        bottom: -70px;
        transform: translate(-50%, 0); }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_culture a .btn {
            font-size: 1.6rem;
            left: auto;
            right: 0;
            bottom: 0;
            transform: translate(0, 0); } }
      #toppage #sec_culture a:hover figure img {
        transform: scale(1.2); }
  #toppage #sec_recruit {
    padding: 110px 0;
    background-color: #f6f6f6;
    position: relative;
    z-index: 100; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #toppage #sec_recruit {
        padding: 50px 25px 35px; } }
    #toppage #sec_recruit .ttl_sec_top {
      margin-top: 30px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_recruit .ttl_sec_top {
          margin-top: 0px;
          margin-bottom: 15px; } }
      #toppage #sec_recruit .ttl_sec_top img {
        width: 278px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_recruit .ttl_sec_top img {
            width: 166.8px; } }
    #toppage #sec_recruit .btn_list {
      position: relative; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #toppage #sec_recruit .btn_list {
          padding-top: 30px; } }
      #toppage #sec_recruit .btn_list:before {
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        background-color: #000;
        position: absolute;
        left: -60px;
        top: 0; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_recruit .btn_list:before {
            width: 100%;
            height: 1px;
            left: 0px; } }
      #toppage #sec_recruit .btn_list a {
        display: block;
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 2.8;
        letter-spacing: 0.1em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #toppage #sec_recruit .btn_list a {
            line-height: 2.4; } }

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