@charset "UTF-8";
/*** THEME ***/
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold; }
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100; }
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200; }
html {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  font-size: 14px;
  font-size: 1.0014306152vw;
  line-height: 2.2857142857em;
  letter-spacing: 0.15em;
  touch-action: auto !important; }
  @media only screen and (min-width: 1398px) {
    html {
      font-size: 14px; } }
  @media only screen and (max-width: 768px) {
    html {
      font-size: 3.125vw;
      line-height: 2.4em;
      letter-spacing: 0.1em; } }
  @media only screen and (max-width: 768px) and (orientation: landscape) {
    html {
      font-size: 2vmin;
      line-height: 2.4em;
      letter-spacing: 0.1em; } }
  @media only screen and (max-width: 768px) {
    html {
      overflow-y: scroll; } }

body {
  color: #231815;
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  -webkit-text-size-adjust: 100%;
  font-weight: 500; }
  body.fixed {
    position: fixed;
    width: 100%; }

@media only screen and (min-width: 769px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px; }

  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(127, 204, 227, 0.8);
    border-radius: 0.7142857143rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); } }
@media only screen and (max-width: 768px) {
  .pc {
    display: none; } }
@media only screen and (min-width: 769px) {
  .sp {
    display: none; } }
@media print {
  .sp {
    display: none; } }
.clearfix {
  zoom: 1; }
  .clearfix::before, .clearfix::after {
    content: "";
    display: block; }
  .clearfix::after {
    clear: both; }

img, svg {
  max-width: 100%;
  height: auto; }

.wrapper {
  width: 100%;
  position: relative;
  max-width: 1398px;
  margin-left: auto;
  margin-right: auto; }
  .wrapper > .container {
    margin: 0; }
    @media only screen and (max-width: 768px) {
      .wrapper > .container {
        margin: 0 7.03125%; } }

a {
  color: #333;
  text-decoration: underline; }
  a img:not(.notrollover) {
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out; }
  a:hover {
    color: #333;
    text-decoration: none; }
    a:hover img:not(.notrollover) {
      filter: alpha(opacity=60);
      -webkit-opacity: 0.6;
      -moz-opacity: 0.6;
      opacity: 0.6; }

/*
==================================================

	ヘッダー

	
==================================================
*/
header {
  padding-top: 0.7142857143rem;
  min-height: 4.4285714286rem;
  background: #323232;
  z-index: 1000;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none; }
  header .logo {
    float: left;
    padding-top: 0.5714285714rem; }
    header .logo img {
      display: block;
      width: 23.2142857143rem; }
  header .rightarea {
    float: right; }
    header .rightarea .nav {
      display: inline-block;
      color: #fff; }
      header .rightarea .nav > ul {
        display: inline-block;
        vertical-align: bottom;
        list-style: none;
        font-size: 1.2857142857rem;
        line-height: 1.7142857143rem;
        letter-spacing: -0.5em;
        font-family: "Century Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
        font-weight: bold; }
        header .rightarea .nav > ul > li {
          display: inline-block;
          vertical-align: middle;
          height: 2.7142857143rem;
          letter-spacing: 0.1em;
          border-left: 0.1428571429rem solid #fff; }
          header .rightarea .nav > ul > li:first-child {
            border-left: none; }
          header .rightarea .nav > ul > li a {
            text-decoration: none;
            -webkit-transition: color 0.2s ease;
            -moz-transition: color 0.2s ease;
            -o-transition: color 0.2s ease;
            transition: color 0.2s ease;
            color: #fff;
            padding: 0.5rem 2.3571428571rem;
            display: block; }
            header .rightarea .nav > ul > li a:hover {
              color: #999; }
            header .rightarea .nav > ul > li a span {
              font-size: 0.7142857143rem;
              margin-right: 0.7142857143rem; }
        header .rightarea .nav > ul .service_menu_list {
          position: relative;
          cursor: pointer;
          padding: 0.5rem 2.3571428571rem; }
          header .rightarea .nav > ul .service_menu_list ul {
            list-style: none;
            font-size: 1rem; }
            header .rightarea .nav > ul .service_menu_list ul li {
              position: relative;
              color: #fff; }
              header .rightarea .nav > ul .service_menu_list ul li::after {
                position: absolute;
                top: 50%;
                right: 5%;
                content: '';
                display: inline-block;
                width: 0.5rem;
                height: 0.5rem;
                margin-top: -0.3571428571rem;
                border-right: 2px solid #323232;
                border-top: 2px solid #323232;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg); }
              header .rightarea .nav > ul .service_menu_list ul li a {
                padding: 1.4285714286rem 0.3571428571rem;
                text-decoration: none;
                display: block;
                color: #323232;
                -webkit-transition: color 0.2s ease;
                -moz-transition: color 0.2s ease;
                -o-transition: color 0.2s ease;
                transition: color 0.2s ease; }
                header .rightarea .nav > ul .service_menu_list ul li a:hover {
                  color: #555; }
                header .rightarea .nav > ul .service_menu_list ul li a img {
                  width: auto;
                  height: 2.4285714286rem;
                  vertical-align: top; }
            header .rightarea .nav > ul .service_menu_list ul .painter::after {
              border-right: 2px solid #ff1e23;
              border-top: 2px solid #ff1e23; }
            header .rightarea .nav > ul .service_menu_list ul .custom::after {
              border-right: 2px solid #005400;
              border-top: 2px solid #005400; }
            header .rightarea .nav > ul .service_menu_list ul .space::after {
              border-right: 2px solid #660066;
              border-top: 2px solid #660066; }
            header .rightarea .nav > ul .service_menu_list ul .website::after {
              border-right: 2px solid #4f4fff;
              border-top: 2px solid #4f4fff; }
            header .rightarea .nav > ul .service_menu_list ul .presen::after {
              border-right: 2px solid #ff6600;
              border-top: 2px solid #ff6600; }
            header .rightarea .nav > ul .service_menu_list ul .modeler::after {
              border-right: 2px solid #c30463;
              border-top: 2px solid #c30463; }
          header .rightarea .nav > ul .service_menu_list:hover .second_menu {
            top: 3.7142857143rem;
            visibility: visible;
            opacity: 1; }
          header .rightarea .nav > ul .service_menu_list .second_menu {
            visibility: hidden;
            opacity: 0;
            z-index: 9999;
            position: absolute;
            top: 3.7142857143rem;
            left: 0;
            width: 22.8571428571rem;
            background: rgba(255, 255, 255, 0.6);
            -webkit-transition: all .2s ease;
            transition: all .2s ease; }
            header .rightarea .nav > ul .service_menu_list .second_menu > li {
              position: relative; }
              header .rightarea .nav > ul .service_menu_list .second_menu > li:hover {
                background: rgba(126, 126, 126, 0.4); }
                header .rightarea .nav > ul .service_menu_list .second_menu > li:hover .third_menu_menu {
                  visibility: visible;
                  opacity: 1; }
                  header .rightarea .nav > ul .service_menu_list .second_menu > li:hover .third_menu_menu li {
                    position: relative; }
              header .rightarea .nav > ul .service_menu_list .second_menu > li .third_menu_menu {
                visibility: hidden;
                opacity: 0;
                position: absolute;
                top: 0;
                left: 100%;
                width: 100%;
                background: rgba(0, 0, 0, 0.6);
                -webkit-transition: all .2s ease;
                transition: all .2s ease; }
                header .rightarea .nav > ul .service_menu_list .second_menu > li .third_menu_menu li:hover {
                  background: rgba(0, 0, 0, 0.6); }
        header .rightarea .nav > ul.mini {
          font-size: 0.7142857143rem;
          margin-right: 3.9285714286rem; }
    header .rightarea .sidenavtoggle {
      display: inline-block;
      vertical-align: bottom;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      margin-left: 3.3571428571rem;
      margin-right: 0.5714285714rem;
      line-height: 0;
      cursor: pointer;
      margin-bottom: -0.2142857143rem; }
      header .rightarea .sidenavtoggle img {
        width: 2.1428571429rem; }
      header .rightarea .sidenavtoggle:active, header .rightarea .sidenavtoggle:hover {
        filter: alpha(opacity=50);
        -webkit-opacity: 0.5;
        -moz-opacity: 0.5;
        opacity: 0.5; }
  header .sidenav {
    position: fixed;
    z-index: 200;
    top: 0;
    right: 0;
    width: 0;
    height: 100%; }
    header .sidenav .bg {
      height: 100%;
      margin-right: 25em;
      background-color: rgba(255, 0, 0, 0);
      -webkit-transition: background-color 0.1s ease;
      -moz-transition: background-color 0.1s ease;
      -o-transition: background-color 0.1s ease;
      transition: background-color 0.1s ease; }
    header .sidenav .container {
      position: absolute;
      top: 0;
      right: -26.4285714286em;
      width: 25em;
      min-height: 100%;
      box-sizing: border-box;
      padding: 1.7857142857rem 0;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 1.0714285714em rgba(35, 24, 21, 0.25);
      -webkit-transition: right 0.3s ease;
      -moz-transition: right 0.3s ease;
      -o-transition: right 0.3s ease;
      transition: right 0.3s ease; }
      header .sidenav .container .close {
        text-align: right;
        line-height: 0;
        margin-right: 4.0714285714rem;
        position: relative;
        z-index: 1; }
        header .sidenav .container .close img {
          display: block;
          width: 2.1428571429rem;
          margin-left: auto;
          cursor: pointer;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out; }
          header .sidenav .container .close img:active, header .sidenav .container .close img:hover {
            filter: alpha(opacity=50);
            -webkit-opacity: 0.5;
            -moz-opacity: 0.5;
            opacity: 0.5; }
      header .sidenav .container .base {
        display: none;
        position: absolute;
        left: 0px;
        width: 100%;
        top: 0px;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding-top: 4em;
        padding-bottom: 4em; }
      header .sidenav .container ul.menu {
        list-style: none;
        width: 22.8571428571em;
        margin: auto;
        margin-top: 3em;
        padding-bottom: 2.1428571429rem; }
        header .sidenav .container ul.menu li {
          display: block; }
          header .sidenav .container ul.menu li:not(:first-child)::before {
            content: "";
            display: block;
            width: 0.2857142857em;
            height: 0.2857142857em;
            background-color: #fff;
            border-radius: 50%;
            margin: 0.8571428571em auto; }
          header .sidenav .container ul.menu li a {
            display: block;
            text-align: center;
            box-sizing: border-box;
            padding: 0.5714285714em;
            border: 0.1428571429em solid rgba(35, 24, 21, 0);
            border-radius: 0.6428571429em;
            text-decoration: none;
            -webkit-transition: border-color 0.2s ease;
            -moz-transition: border-color 0.2s ease;
            -o-transition: border-color 0.2s ease;
            transition: border-color 0.2s ease;
            color: #fff; }
            header .sidenav .container ul.menu li a .en {
              display: block;
              font-size: 0.8571428571em;
              line-height: 1em;
              letter-spacing: 0.2em;
              padding-bottom: 0.5em; }
            header .sidenav .container ul.menu li a .jp {
              display: block;
              font-size: 1.1428571429em;
              line-height: 1em;
              letter-spacing: 0.1em;
              padding-bottom: 1px; }
            header .sidenav .container ul.menu li a:hover {
              border-color: #231815; }
            header .sidenav .container ul.menu li a img {
              width: auto;
              height: 2.4285714286rem;
              vertical-align: top; }
  @media only screen and (max-width: 768px) {
    header {
      padding-bottom: 0; }
      header .logo {
        padding-top: 0.4rem;
        position: relative; }
        header .logo img {
          width: 20.4rem; }
      header .rightarea .nav {
        display: none; }
      header .rightarea .sidenavtoggle {
        margin-left: 0; }
        header .rightarea .sidenavtoggle img {
          width: 2.35rem; }
      header .sidenav {
        z-index: 205;
        right: -100vw;
        width: 100vw;
        font-size: 1.15rem;
        overflow: auto;
        -webkit-transition: opacity 0.3s ease;
        -moz-transition: opacity 0.3s ease;
        -o-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        filter: alpha(opacity=0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0; }
        header .sidenav .bg {
          margin-right: 100vw; }
        header .sidenav .container {
          width: 100vw;
          padding: 1.6rem 0;
          right: 0;
          background-color: rgba(0, 0, 0, 0.95); }
          header .sidenav .container .logo {
            margin-left: 2.3rem; }
          header .sidenav .container .close {
            margin-right: 2.8rem;
            margin-top: 0.1428571429rem; }
            header .sidenav .container .close img {
              width: 2.35rem; }
          header .sidenav .container .base {
            position: static;
            padding-top: 0;
            padding-bottom: 0; }
          header .sidenav .container ul.nav {
            display: block;
            background-color: #f2f2f2;
            padding: 2.5rem 0;
            list-style: none;
            letter-spacing: -0.5em;
            text-align: center;
            margin-top: 2.2rem; }
            header .sidenav .container ul.nav li {
              display: inline-block;
              vertical-align: bottom;
              font-size: 1.4rem;
              line-height: 1em;
              letter-spacing: 0.2em; }
              header .sidenav .container ul.nav li:not(:first-child)::before {
                content: "/";
                display: inline-block;
                padding: 0 1.5em; }
              header .sidenav .container ul.nav li a {
                text-decoration: none;
                -webkit-transition: color 0.2s ease;
                -moz-transition: color 0.2s ease;
                -o-transition: color 0.2s ease;
                transition: color 0.2s ease; }
                header .sidenav .container ul.nav li a:active, header .sidenav .container ul.nav li a:hover {
                  color: #999; } }
  header.active .sidenavtoggle {
    filter: alpha(opacity=0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0; }
  header.active .sidenav {
    width: 100%;
    right: 0;
    filter: alpha(opacity=100);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1; }
    header.active .sidenav .bg {
      width: 100vw;
      background-color: rgba(255, 255, 255, 0.5); }
    header.active .sidenav .container {
      right: 0; }

footer {
  width: 100%;
  height: 30px;
  background: #555;
  display: flex;
  align-items: center;
  justify-content: center; }
  footer .copyright {
    font-size: 0.7142857143rem;
    line-height: 1em;
    letter-spacing: 0.05em;
    text-align: center;
    color: #fff; }
  @media only screen and (max-width: 768px) {
    footer {
      display: none; } }