@charset "UTF-8";
/* Loading */
#loader-wrap {
  background-color: #FFF;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2500; }
  #loader-wrap #loader {
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -48%);
    transform: translate(-50%, -48%); }
    #loader-wrap #loader h1 {
      margin: 0 auto; }
    #loader-wrap #loader p {
      font-size: 76%; }

body {
  overflow: visible; }
  body.show {
    overflow: hidden; }

#header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4em 2.5vw;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  mix-blend-mode: difference; }
  #header .txt {
    display: flex;
    align-items: center; }
    #header .txt h1 {
      margin-right: 3em; }
      #header .txt h1 a {
        display: block; }
        #header .txt h1 a object {
          display: block; }
    #header .txt .desc {
      color: rgba(250, 250, 250, 0.75);
      font-size: 83%;
      line-height: 1.2em; }
  #header #menu {
    width: 2.5em;
    height: 2.5em;
    position: relative;
    z-index: 10; }
    #header #menu span {
      background: transparent;
      display: block;
      width: 100%;
      height: 1px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
      #header #menu span::before, #header #menu span::after {
        background: #FFF;
        content: '';
        position: absolute;
        right: 0;
        height: 1px;
        transform-origin: 50% 50%;
        transition: all .35s; }
      #header #menu span::before {
        top: -0.35em;
        width: 100%; }
      #header #menu span::after {
        bottom: -0.35em;
        width: 60%; }
    #header #menu.show span {
      background: transparent; }
      #header #menu.show span::before {
        top: 0;
        transform: rotate(-45deg); }
      #header #menu.show span::after {
        bottom: 0;
        width: 100%;
        transform: rotate(45deg); }

#globalNav {
  background: rgba(32, 32, 32, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -100vw;
  z-index: 5;
  transition: all .25s; }
  #globalNav.show {
    right: 0; }
  #globalNav ul {
    text-align: right;
    width: 75%; }
    #globalNav ul li {
      font-size: 200%; }
      #globalNav ul li a {
        color: #FFF;
        display: block;
        padding: 0.25em 0; }
      #globalNav ul li.contact {
        font-size: 100%;
        margin-top: 5em;
        text-align: left; }
        #globalNav ul li.contact .title {
          font-size: 120%;
          margin-bottom: 1em; }
        #globalNav ul li.contact .mail {
          display: block;
          font-size: 200%; }

#footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 2.5vw; }
  #footer .copy,
  #footer .privacypolicy {
    font-size: 78%; }
    #footer .copy a,
    #footer .privacypolicy a {
      color: #F5F5F5; }

/* Style */
#content .inner {
  padding: 16em 10vw; }
  #content .inner .title {
    color: #202020;
    display: flex;
    align-items: center; }
    #content .inner .title::before {
      background: #202020;
      content: '';
      display: inline-block;
      width: 2px;
      height: 1em;
      margin-right: 0.5em;
      margin-left: 0.5em;
      transform: rotate(30deg); }
  #content .inner .titleBox .title {
    margin-bottom: 2em; }
  #content .inner .titleBox h2 {
    color: #202020;
    font-size: 250%;
    margin-bottom: 0.25em; }
  #content .inner .titleBox h3 {
    color: #282828;
    font-size: 108%; }
#content ._flex {
  display: flex; }
#content .main ul {
  padding-left: 5vw; }
  #content .main ul li {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    margin: 0;
    padding-top: 37.5%;
    position: relative;
    width: 100%;
    height: auto; }
    #content .main ul li.main_01 {
      background-image: url("../images/works_img01.jpg"); }
    #content .main ul li.main_02 {
      background-image: url("../images/works_img02.jpg"); }
    #content .main ul li.main_03 {
      background-image: url("../images/works_img03.jpg"); }
    #content .main ul li.main_04 {
      background-image: url("../images/works_img04.jpg"); }
    #content .main ul li.main_05 {
      background-image: url("../images/works_img05.jpg"); }
    #content .main ul li.main_06 {
      background-image: url("../images/works_img06.jpg"); }
    #content .main ul li.main_07 {
      background-image: url("../images/works_img07.jpg"); }
    #content .main ul li.main_08 {
      background-image: url("../images/works_img08.jpg"); }
    #content .main ul li.main_09 {
      background-image: url("../images/works_img09.jpg"); }
    #content .main ul li.main_10 {
      background-image: url("../images/works_img10.jpg"); }
    #content .main ul li.main_11 {
      background-image: url("../images/works_img11.jpg"); }
    #content .main ul li .txt {
      display: flex;
      flex-wrap: wrap;
      font-size: 90%;
      position: absolute;
      left: 1em;
      bottom: 0.5em; }
      #content .main ul li .txt p::after {
        content: '｜';
        margin-left: 0.5em;
        margin-right: 0.5em; }
      #content .main ul li .txt p:last-child::after {
        display: none; }
#content .about .inner .titleBox {
  margin-bottom: 4em; }
#content .about .inner .box .en {
  display: none; }
#content .service .inner .title {
  margin-bottom: 2em; }
#content .service .inner ._flex {
  align-items: center;
  justify-content: space-between; }
#content .service .inner .desc {
  border-bottom: 1px solid #E1E1E1;
  padding-bottom: 10em;
  margin-bottom: 8em; }
  #content .service .inner .desc .box {
    width: 64%; }
    #content .service .inner .desc .box .jp {
      margin-bottom: 2em; }
#content .service .inner .service_list._flex {
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between; }
#content .service .inner .service_list .serviceBox {
  margin-top: 2em;
  margin-bottom: 2em;
  width: 45%; }
  #content .service .inner .service_list .serviceBox .stitBox {
    margin-bottom: 2em; }
    #content .service .inner .service_list .serviceBox .stitBox h3 {
      font-size: 142%;
      margin-bottom: 0.25em; }
    #content .service .inner .service_list .serviceBox .stitBox .stit {
      font-size: 95%; }
      #content .service .inner .service_list .serviceBox .stitBox .stit .small {
        font-size: 90%; }
#content .works .inner .title,
#content .company .inner .title,
#content .career .inner .title,
#content .contact .inner .title {
  margin-bottom: 4em; }
#content .works .inner ul.works_list {
  flex-wrap: wrap;
  justify-content: space-between; }
  #content .works .inner ul.works_list li {
    margin-bottom: 4em;
    width: 47.5%; }
    #content .works .inner ul.works_list li .imgBox {
      margin-bottom: 1em; }
    #content .works .inner ul.works_list li .txtBox .client {
      margin-bottom: 0.25em; }
    #content .works .inner ul.works_list li .txtBox .category {
      color: #ACACAC;
      font-size: 90%; }
#content .works .inner .moreBtn {
  text-align: center; }
  #content .works .inner .moreBtn .show_more,
  #content .works .inner .moreBtn .and_more {
    cursor: pointer;
    display: inline-block;
    padding: 1em; }
#content .company .inner .title {
  margin-bottom: 4em; }
#content .company .inner .companyBox {
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between; }
  #content .company .inner .companyBox .txtBox {
    width: 40%; }
    #content .company .inner .companyBox .txtBox ul {
      border-top: 1px solid #E1E1E1; }
      #content .company .inner .companyBox .txtBox ul li {
        border-bottom: 1px solid #E1E1E1;
        padding: 1.5em 1.5em; }
        #content .company .inner .companyBox .txtBox ul li span {
          color: #282828;
          display: inline-block;
          min-width: 8em; }
  #content .company .inner .companyBox .mapBox {
    width: 55%; }
    #content .company .inner .companyBox .mapBox iframe {
      filter: grayscale(100%);
      aspect-ratio: 16 / 9;
      width: 100%;
      height: auto; }
#content .career .inner,
#content .contact .inner {
  padding: 0; }
  #content .career .inner .title,
  #content .contact .inner .title {
    color: #FFF; }
    #content .career .inner .title::before,
    #content .contact .inner .title::before {
      background: #FFF; }
  #content .career .inner ._flex,
  #content .contact .inner ._flex {
    align-items: center;
    justify-content: space-between; }
    #content .career .inner ._flex .left,
    #content .contact .inner ._flex .left {
      width: 55%; }
    #content .career .inner ._flex .right,
    #content .contact .inner ._flex .right {
      width: 40%; }
#content .career {
  border-bottom: 1px solid #404040;
  margin-bottom: 10em;
  padding-bottom: 10em; }
  #content .career .inner ._flex .left p {
    margin-bottom: 1em; }
    #content .career .inner ._flex .left p:last-child {
      margin-bottom: 0; }
  #content .career .inner ._flex .right ul {
    border-top: 1px solid #ACACAC; }
    #content .career .inner ._flex .right ul li {
      border-bottom: 1px solid #ACACAC;
      color: #E0E0E0;
      padding: 1.5em 1.5em; }
      #content .career .inner ._flex .right ul li span {
        color: #FAFAFA;
        display: inline-block;
        min-width: 8em; }
#content .contact .inner ._flex .right {
  text-align: center; }
  #content .contact .inner ._flex .right a {
    color: #FFF;
    display: block;
    font-size: 225%;
    font-weight: 500; }
#content.privacy .inner {
  padding-top: 8em; }
  #content.privacy .inner .titleBox {
    margin-bottom: 4em; }
  #content.privacy .inner .box {
    margin-bottom: 4em; }
    #content.privacy .inner .box:last-child {
      margin-bottom: 0; }
    #content.privacy .inner .box h3 {
      font-size: 120%;
      font-weight: 500;
      margin-bottom: 1em; }
    #content.privacy .inner .box p {
      margin-bottom: 1em; }
      #content.privacy .inner .box p:last-child {
        margin-bottom: 0; }
    #content.privacy .inner .box ul li, #content.privacy .inner .box ol li {
      line-height: 1.8em;
      margin-top: 1em; }
    #content.privacy .inner .box ol {
      counter-reset: list-item 1;
      counter-set: list-item 0; }
      #content.privacy .inner .box ol li {
        counter-increment: list-item;
        padding-left: 1em;
        text-indent: -1em; }
        #content.privacy .inner .box ol li::before {
          content: counter(list-item) ". "; }
        #content.privacy .inner .box ol li ol li {
          padding-left: 1.5em;
          text-indent: -1.5em; }
          #content.privacy .inner .box ol li ol li::before {
            content: "(" counter(list-item) ") "; }
          #content.privacy .inner .box ol li ol li ol li {
            padding-left: 1.5em;
            text-indent: -1.25em; }
            #content.privacy .inner .box ol li ol li ol li::before {
              content: counter(list-item,upper-alpha) ". "; }

.bg_lightgray {
  background-color: #F5F5F5; }

.bg_darkgray {
  background-color: #303030;
  color: #F5F5F5; }

/* Din 2014 Font */
.din {
  font-family: din-2014, sans-serif; }

.align-center {
  text-align: center; }

.image {
  width: 100%;
  height: auto; }

.is-eventNone {
  pointer-events: none; }

.image img {
  width: 100%;
  height: auto; }

.smp {
  display: none; }

.tab-none {
  display: block; }

.tab {
  display: none; }

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: 0.8s; }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_down {
  opacity: 0;
  transform: translate(0, -20%);
  transition: 0.8s; }
  .fadeIn_down.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.slideIn_left {
  opacity: 0;
  transform: translate(-20%, 0);
  transition: 0.8s; }
  .slideIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.slideIn_right {
  opacity: 0;
  transform: translate(20%, 0);
  transition: 0.8s; }
  .slideIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn {
  opacity: 0;
  transition: 0.8s; }
  .fadeIn.is-show {
    opacity: 1; }

.slow {
  transition: 1.6s; }