@charset "UTF-8";
/*---------------------
共通CSS
---------------------*/
html, body {
  height: 100%;
}

@media (max-width: 1400px) {
  html {
    font-size: 11px;
  }
}
@media (max-width: 960px) {
  html {
    font-size: 10px;
  }
}

/*
.slide1-wrap .slide1
{
    transform: translateX(100%);
    position: relative
}
*/
/*
.slide1
{
    transform: translateX(100%);
}
*/
#svg-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.83333;
}

@media (min-width: 769px) {
  .sp_only {
    display: none !important;
  }
}
@media (min-width: 1401px) {
  .tb_only, .pc_hide {
    display: none !important;
  }
}
@media (min-width: 961px) {
  .tbs_only {
    display: none !important;
  }
}
@media (max-width: 960px) {
  .tbs_hide {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .pc_only {
    display: none !important;
  }

  .tb_only {
    display: none !important;
  }

  .sp-center {
    text-align: center;
  }
}
@media (max-width: 1400px) {
  .wide_only {
    display: none !important;
  }
}
.drawer-hamburger {
  position: fixed;
  z-index: 4;
  left: 0;
  top: 0;
  display: block;
  box-sizing: content-box;
  width: 2rem;
  padding: 0;
  padding: 18px 9px 30px;
  -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  border: 0;
  outline: 0;
  background-color: black;
}
@media (max-width: 768px) {
  .drawer-hamburger {
    padding: 1.5rem 9px 2.5rem;
  }
}
.drawer-hamburger .sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.drawer-hamburger-icon {
  position: relative;
  display: block;
  margin-top: 0.83333rem;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
  width: 100%;
  height: 2px;
  -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  background-color: #bad80a;
}

.drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  position: absolute;
  top: -0.83333rem;
  left: 0;
  content: " ";
}

.drawer-hamburger-icon:after {
  top: 0.83333rem;
}

#header {
  width: 100%;
  height: 80px;
  padding-top: 14px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  left: 0px;
  top: 0px;
  border-bottom: solid 1px #8c8e91;
  background: white url(../img/header-bg.gif) repeat-y left top;
  z-index: 100;
}
@media (max-width: 1400px) {
  #header {
    background: white url(../img/header-bg.gif) repeat-y left top;
    background-size: 49.28571%;
  }
}
@media (max-width: 768px) {
  #header {
    background: white url(../img/sp/header-bg_sp.gif) repeat-y;
    background-size: 100%;
    height: 48px;
    padding-top: 0px;
  }
}
@media (min-width: 769px) {
  #header {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }
  #header .nav ul {
    display: flex;
    display: -webkit-flex;
    padding-top: 8px;
    padding-right: 55px;
  }
  #header .nav ul li {
    margin-left: 33px;
  }
}
@media (min-width: 769px) and (max-width: 959px) {
  #header .nav ul li {
    margin-left: 1.6rem;
  }
}
@media (min-width: 769px) {
  #header .nav ul a {
    text-decoration: none;
    color: black;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    padding: 0 2px;
    transition: 0.3s ease-out;
    cursor: pointer;
  }
}
@media (min-width: 769px) and (max-width: 959px) {
  #header .nav ul a {
    font-size: 1.45455rem;
  }
}
@media (min-width: 769px) {
  #header .nav ul a:hover {
    background: black;
    color: #bad80a;
  }
  #header .nav ul .active {
    background: black;
    color: #bad80a;
  }
}
@media (max-width: 768px) {
  #header .menu-btn {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: bold;
    text-decoration: none;
    background: black;
    color: #bad80a;
    position: absolute;
    right: 0px;
    top: 10px;
    padding: 0 5px;
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
  }
  #header .menu-btn .hide {
    display: none;
  }
  #header .menu-btn .menu-on img {
    width: 12px;
    height: auto;
  }
  #header .nav ul {
    position: absolute;
    width: 100%;
    top: 30px;
    right: -100%;
  }
  #header .nav ul li {
    background: black;
    border-bottom: solid 1px #4d4d4d;
  }
  #header .nav ul li a {
    color: white;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding-left: 15px;
    font-size: 2rem;
  }
}

.logo {
  /*
  	position: absolute;
  	left: 14px;
  	top: 14px;
  */
  padding-left: 14px;
}
@media (max-width: 768px) {
  .logo {
    width: 64.375%;
    max-width: 206px;
    padding-left: 0px;
    margin-left: -1px;
  }
  .logo img {
    width: 100%;
    height: auto;
  }
}

.scroll-content {
  overflow: hidden;
  width: 100%;
}

#footer {
  padding-bottom: 48px;
}
#footer .footer-nav {
  background: black;
  padding-top: 64px;
  padding-bottom: 50px;
  margin-top: -1px;
}
#footer .footer-nav a {
  font-family: 'Open Sans Condensed', sans-serif;
}
@media (max-width: 768px) {
  #footer .footer-nav {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
#footer .footer-nav ul {
  max-width: 736px;
  margin: auto;
  color: white;
  display: flex;
  display: -webkit-flex;
}
@media (max-width: 768px) {
  #footer .footer-nav ul {
    flex-wrap: wrap;
  }
}
@media (max-width: 1400px) {
  #footer .footer-nav ul {
    margin: auto;
    padding: 0 20px;
  }
}
@media (max-width: 768px) {
  #footer .footer-nav ul {
    padding: 0px;
  }
  #footer .footer-nav ul li:nth-child(odd) {
    border-right: solid 1px white;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
#footer .footer-nav ul li {
  margin-right: 40px;
}
@media (max-width: 768px) {
  #footer .footer-nav ul li {
    margin-right: 0px;
    width: 50%;
  }
  #footer .footer-nav ul li a {
    display: block;
    text-align: center;
    padding: 16px 0;
    border-top: solid 1px white;
  }
  #footer .footer-nav ul li .sp--border-bottom {
    border-bottom: solid 1px white;
  }
}
#footer .footer-nav ul li:last-child {
  margin-right: 0px;
}
@media (max-width: 768px) {
  #footer .footer-nav ul li:last-child a {
    border: none;
  }
}
#footer .footer-nav ul dt {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: .5em;
}
@media (max-width: 768px) {
  #footer .footer-nav ul dt {
    margin-bottom: 0px;
  }
}
#footer .footer-nav ul dt a {
  color: white;
  text-decoration: none;
  outline: none;
}
#footer .footer-nav ul dd {
  font-size: 11px;
}
@media (max-width: 768px) {
  #footer .footer-nav ul dd {
    display: none;
  }
}
#footer .footer-middle {
  background: white;
  padding: 20px;
  text-align: center;
  border-bottom: solid 1px black;
}
@media (max-width: 1400px) {
  #footer .footer-middle {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  #footer .footer-middle {
    text-align: left;
    padding: 10px 20px;
  }
}
#footer .footer-bottom {
  padding-top: 18px;
  font-family: Arial, "ＭＳ Ｐゴシック", sans-serif;
}
@media (max-width: 768px) {
  #footer .footer-bottom {
    padding-top: 13px;
  }
}
#footer .footer-bottom__menu {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
}
#footer .footer-bottom__menu li {
  display: inline-block;
  /*
              a:last-child:after
              {
                  content: none;
              }
  */
}
#footer .footer-bottom__menu li a {
  text-decoration: none;
  color: black;
  transition: 0.3s ease-out;
}
#footer .footer-bottom__menu li a:after {
  content: " | ";
}
#footer .footer-bottom__menu li a:hover {
  opacity: .8;
}
#footer .footer-bottom__menu li:last-child a:after {
  content: none;
}
#footer .copy {
  margin-top: 15px;
  text-align: center;
  margin-bottom: 30px;
}
@media (max-width: 1400px) {
  #footer .copy {
    font-size: 1rem;
    margin-bottom: 20px;
  }
}
#footer .footer-logo {
  text-align: center;
}
#footer .footer-logo img {
  width: 240px;
  height: auto;
}

/*------------------
TOP Page CSS
-------------------*/
/*
#full-slide
{
    z-index: 1;
    .sp-slides
    {
        z-index: 1;
    }
}
*/
.blackout {
  animation: blackOut 1s ease 1s alternate forwards;
}

.fadeout {
  animation: blackOut 1s ease 1s alternate forwards;
}

.slideinR2 {
  animation: slideinR2 1s ease 1s alternate forwards;
}

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
  webkit-transform: translateZ(0);
  transform: translateZ(0);
  /*
      .sp-slide1
      {
          margin-left: 0 !important;
      }
  */
}
.wrapper .intro-area {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.wrapper .intro-slideL {
  z-index: 2;
  background: url(../img/slide-partsL.png) no-repeat right bottom;
  background-size: cover;
  width: 63.57143%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  animation-duration: 2s;
  transition: 0.3s ease-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  /*
  		&:before
  		{
  			content: "";
  			background: url(../img/slide-partsL.png) no-repeat left bottom;
  			width: (290/700)*100%;
  			height: 100%;
  			background-size: cover;
  			position: absolute;
  			right: (-1) * (290/700)*100%;
  			transform:translateX(-1px);
  			@media (max-width: 990px)
  			{
  				          
  			} 
  		}
  */
}
@media (min-width: 769px) {
  .wrapper .intro-slideL {
    animation-name: slidein;
    -webkit-animation-name: slidein;
  }
}
@media (max-width: 768px) {
  .wrapper .intro-slideL {
    animation-name: slideinSp;
    -webkit-animation-name: slideinSp;
  }
}
.wrapper .intro-slideR {
  background: url(../img/slide-partsR.png) no-repeat left bottom;
  background-size: cover;
  width: 63.57143%;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  transition: 0.3s ease-out;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  z-index: 2;
}
@media (min-width: 769px) {
  .wrapper .intro-slideR {
    animation-name: slideinR;
    -webkit-animation-name: slideinR;
  }
}
@media (max-width: 768px) {
  .wrapper .intro-slideR {
    animation-name: slideinR_Sp;
    -webkit-animation-name: slideinR_Sp;
  }
}
.wrapper .slide-logo {
  width: 253px;
  height: 112px;
  margin: auto;
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 80px;
  transition: 0.3s ease-out;
  /*
  		@include animationName(logo);
  		@include animationName(logo_scale);
  		@include animationName(logo_opacity);
  		@include animationSet(1s);
  */
  /*
      animation:
      	    logo .5s ease 0s alternate forwards,
      	    logo_opacity .5s ease 0s alternate forwards
  	    ;
  */
  animation: logo 0.5s ease 0s alternate forwards, logo_scale 0.5s ease 0s alternate forwards, logo_opacity 0.5s ease 0s alternate forwards;
}
@media (max-width: 768px) {
  .wrapper .slide-logo {
    width: 50.625%;
    max-width: 126px;
  }
  .wrapper .slide-logo img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) and (min-width: 641px) {
  .wrapper .slide-logo {
    max-width: inherit;
  }
}

.wrapper .sp-arrows {
  z-index: 3;
  display: none;
}
.wrapper .sp-arrow {
  cursor: pointer;
  z-index: 3;
}
.wrapper .sp-slide1 .sp-image {
  background: url(../img/slide1-bg.gif) no-repeat left 336px top;
}
.wrapper .slide1-wrap {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wrapper .slide1-wrap img {
  height: 100%;
  transform: translateX(100%);
}
.wrapper #full-slide .slick-list {
  height: 100%;
}
.wrapper #full-slide .slick-track {
  height: 100%;
}
.wrapper .slide1-logo {
  width: 324px;
  height: auto;
  position: absolute;
  left: 176px;
  top: 39.9449%;
  opacity: 0;
}
@media (max-width: 960px) {
  .wrapper .slide1-logo {
    width: 23.14286%;
  }
}
@media (max-width: 768px) {
  .wrapper .slide1-logo {
    width: 50.625%;
    top: 60px;
    left: 20px;
    max-width: 162px;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) and (min-width: 641px) {
  .wrapper .slide1-logo {
    max-width: 324px;
  }
}

.wrapper .slide1-text {
  height: auto;
  position: absolute;
  left: 602px;
  width: 50%;
  height: 150px;
  opacity: 0;
}
@media (min-width: 769px) {
  .wrapper .slide1-text {
    top: 35%;
    margin-top: 70px;
    font-size: 24px;
    line-height: 1.6;
  }
}
@media (min-width: 769px) and (max-width: 1400px) {
  .wrapper .slide1-text {
    font-size: 1.63636rem;
    line-height: 2;
    left: 60%;
  }
}

@media (max-width: 960px) {
  .wrapper .slide1-text {
    left: 50%;
  }
}
@media (max-width: 768px) {
  .wrapper .slide1-text {
    width: 87.5%;
    height: auto;
    top: 42%;
    left: 20px;
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .wrapper .slide1-text {
    left: 200px;
    top: 100px;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) and (min-width: 641px) {
  .wrapper .slide1-text {
    left: 20px;
    font-size: 1.4rem;
  }
}

.wrapper .concept-title {
  width: 31.57143%;
  max-width: 442px;
  position: absolute;
  left: 602px;
  top: 35%;
  opacity: 0;
}
@media (max-width: 1400px) {
  .wrapper .concept-title {
    left: 60%;
  }
}
@media (max-width: 960px) {
  .wrapper .concept-title {
    left: 50%;
  }
}
@media (max-width: 768px) {
  .wrapper .concept-title {
    top: 35%;
    width: 64%;
    left: 20px;
    max-width: 221px;
  }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .wrapper .concept-title {
    left: 200px;
    top: 60px;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) and (min-width: 641px) {
  .wrapper .concept-title {
    max-width: inherit;
  }
}

.wrapper .concept-title img {
  max-width: 100%;
  height: auto;
}
.wrapper .show-delay {
  animation: show 1s ease 1s alternate forwards;
}
.wrapper .show-delay2 {
  animation: show 1s ease 1.5s alternate forwards;
}
@media (max-width: 768px) {
  .wrapper .slide1-animationH {
    animation: slide1Sp 1s ease 0s alternate forwards;
  }
}
@media (min-width: 769px) {
  .wrapper .slide1-animationH {
    animation: slideH 1s ease 0s alternate forwards;
  }
}
@media (min-width: 1401px) {
  .wrapper .slide1-animation {
    animation: slide1 1s ease 0s alternate forwards;
  }
}
@media (min-width: 769px) and (max-width: 1400px) {
  .wrapper .slide1-animation {
    animation: slide1Tb 1s ease 0s alternate forwards;
  }
}

@media (max-width: 768px) {
  .wrapper .slide1-animation {
    animation: slide1Sp 1s ease 0s alternate forwards;
  }
}
.wrapper .arrows {
  width: 100%;
  left: 0;
  top: 50%;
  bottom: 0px;
  margin-top: 0px;
  display: none;
}
.wrapper .arrows {
  position: absolute;
  height: 28px;
  z-index: 3;
  opacity: 0;
  animation: show 1s ease 2s alternate forwards;
}
.wrapper .arrows .sp-previous-arrow {
  left: 20px;
  right: auto;
}
.wrapper .arrows .sp-next-arrow {
  right: 20px;
  left: auto;
}
.wrapper .arrows .sp-arrow {
  transition: 0.3s ease-out;
}
.wrapper .arrows .sp-arrow :hover {
  opacity: .8;
}
.wrapper .slick-dots {
  position: absolute;
  bottom: 1em;
  left: 0px;
  display: none;
  opacity: 0;
  animation: show 1s ease 2s alternate forwards;
  width: 100%;
  text-align: center;
  /* Firefox */
        /*
        button
        {
            background: white;
            padding: 2px;
            border-radius: 100%;
            opacity: 1;
            line-height: 10px;
            width: 10px;
            height: 10px;
            width: 10px;
            height: 10px;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            position: relative;
            text-indent: -9999px;
            font-size: 0px;
            border: none;
            &:before
            {
                background: white;
                content: "";
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 100%;
                border: none;

                color: white;
                width: 10px;
                height: 10px;
                line-height: 12px;
                position: absolute;
                margin: auto;
                left: 0px;
                top: 0px;
                right: 0px;
                bottom: 0px;

            }  
        }
        */
}
.wrapper .slick-dots li {
  margin: 4px;
}
.wrapper .slick-dots li {
  display: inline-block;
  margin: 4px;
  height: 10px;
  width: 10px;
  /*
          	line-height: 10px;
          	height: 10px;
          	width: 10px;
          	border-radius: 50%;
  */
  position: relative;
}
.wrapper .slick-dots a {
  outline: none;
}
.wrapper .slick-dots input::-moz-focus-inner, .wrapper .slick-dots button::-moz-focus-inner {
  border: 0;
}
.wrapper .slick-dots button {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  background: white;
  border: 2px solid white;
  padding: 0px;
  font-size: 0px;
  border-radius: 100%;
  outline: none;
}
.wrapper .slick-dots button:focus, .wrapper .slick-dots a:focus {
  outline: none;
}
.wrapper .slick-dots .slick-active button {
  background: #bad80a;
  opacity: 1;
}
.wrapper .slick-dots .slick-active button {
  background: #bad80a;
}
.wrapper .slick-dots .sp-selected-button {
  background: #bad80a;
}
.wrapper .sp-arrow {
  height: 28px;
}
.wrapper .sp-previous-arrow:before,
.wrapper .sp-previous-arrow:after,
.wrapper .sp-next-arrow:before,
.wrapper .sp-next-arrow:after {
  content: '';
  position: absolute;
  width: 2px;
  height: 50%;
  background-color: #FFF;
}

/*
@keyframes z-index3 {
    from {
        z-index: 1;
    }

    to {
        opacity: 3;
    }
}
*/
/*------------------
PARTS CSS
--------------------*/
.section-text {
  width: 420px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: black;
  color: white;
  padding: 78px 60px 78px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 1401px) {
  .section-text {
    min-height: 280px;
  }
}
.section-text .post-section {
  transition: 0.3s ease-out;
}
@media (max-width: 1400px) {
  .section-text {
    width: 43.75%;
    padding: 20px;
    min-height: 50.45045%;
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .section-text {
    position: static;
    width: 100%;
    padding-bottom: 50px;
  }
  .section-text p {
    text-align: left;
  }
}
.section-text .section-sub-title {
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 18px;
  line-height: 1.4;
}
.section-text .section-sub-title a {
  text-decoration: underline;
  color: white;
  transition: 0.3s ease-out;
}
.section-text .section-sub-title .pdf:after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/icon-pdf.png) no-repeat;
  background-size: 100%;
  vertical-align: bottom;
  margin-left: 4px;
}
.section-text .section-sub-title a:hover {
  color: #bad80a;
}
@media (max-width: 1400px) {
  .section-text .section-sub-title {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .section-text .section-sub-title {
    text-align: center;
  }
}

.post-section.hide {
  display: none;
  opacity: 0;
}

.post-section.show {
  display: block;
  opacity: 1;
}

.more-link {
  font-size: 13px;
  display: inline-block;
  padding: 30px 60px;
  border: solid 1px #b6b7b8;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 355px;
  bottom: -40px;
  background: white;
  text-decoration: none;
  color: black;
}
@media (max-width: 1400px) {
  .more-link {
    left: 36.97917%;
    padding: 15px 30px;
  }
}
@media (max-width: 768px) {
  .more-link {
    left: 0px;
    right: 0px;
    max-width: 279px;
    margin: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
  }
}

/*------------------
WORKS
--------------------*/
#works {
  border-top: solid 12px #808285;
  position: relative;
  z-index: 2;
}
@media (min-width: 769px) {
  #works {
    padding-top: 390px;
    padding-left: 280px;
  }
}
@media (min-width: 769px) and (max-width: 1400px) {
  #works {
    padding-top: 27.85714%;
    padding-left: 20%;
  }
}

@media (min-width: 769px) {
  #works .list-menu {
    right: -113px;
    width: 73px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    position: absolute;
  }
}
@media (min-width: 769px) and (max-width: 1400px) {
  #works .list-menu {
    right: 20px;
  }
}

@media (max-width: 768px) {
  #works .list-menu ul {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
}
#works .list-menu a {
  transition: 0.3s ease-out;
  transform: scale(1);
  display: block;
  width: 73px;
  height: 70px;
  text-indent: -9999px;
}
@media (max-width: 768px) {
  #works .list-menu a {
    width: 84px;
    height: 95.5px;
  }
}
#works .list-menu a:hover {
  transform: scale(0.9) rotate(-10deg);
}
@media (min-width: 769px) {
  #works .list-menu .works1 {
    background: url(../img/work01-off.gif) no-repeat;
    background-size: cover;
  }
  #works .list-menu .works1.active, #works .list-menu .works1:hover {
    background: url(../img/work01-on.png) no-repeat;
    background-size: cover;
  }
}
@media (max-width: 768px) {
  #works .list-menu .works1 {
    background: url(../img/sp/work01-off_sp.png) no-repeat;
    background-size: cover;
  }
  #works .list-menu .works1.active, #works .list-menu .works1:hover {
    background: url(../img/sp/work01-on_sp.png) no-repeat;
    background-size: cover;
  }
}
@media (min-width: 769px) {
  #works .list-menu .works2 {
    background: url(../img/work02-off.gif) no-repeat;
    background-size: cover;
  }
  #works .list-menu .works2.active, #works .list-menu .works2:hover {
    background: url(../img/work02-on.png) no-repeat;
    background-size: cover;
  }
}
@media (max-width: 768px) {
  #works .list-menu .works2 {
    background: url(../img/sp/work02-off_sp.png) no-repeat;
    background-size: cover;
  }
  #works .list-menu .works2.active, #works .list-menu .works2:hover {
    background: url(../img/sp/work02-on_sp.png) no-repeat;
    background-size: cover;
  }
}
@media (min-width: 769px) {
  #works .list-menu .works3 {
    background: url(../img/work03-off.gif) no-repeat;
    background-size: cover;
  }
  #works .list-menu .works3.active, #works .list-menu .works3:hover {
    background: url(../img/work03-on.png) no-repeat;
    background-size: cover;
  }
}
@media (max-width: 768px) {
  #works .list-menu .works3 {
    background: url(../img/sp/work03-off_sp.png) no-repeat;
    background-size: cover;
  }
  #works .list-menu .works3.active, #works .list-menu .works3:hover {
    background: url(../img/sp/work03-on_sp.png) no-repeat;
    background-size: cover;
  }
}
@media (min-width: 769px) {
  #works .works-bg {
    position: absolute;
    left: 0px;
    top: 0px;
  }
}
@media (max-width: 1400px) {
  #works .works-bg {
    width: 49.28571%;
    height: auto;
  }
}
@media (max-width: 768px) {
  #works .works-bg {
    vertical-align: bottom;
    width: 50%;
  }
}
#works .works-content {
  position: relative;
}
#works .works-content .section-title {
  padding-left: 132px;
}
@media (max-width: 1400px) {
  #works .works-content .section-title {
    padding-left: 16%;
    width: 28.02083%;
  }
}
@media (max-width: 768px) {
  #works .works-content .section-title {
    padding-left: 0px;
    text-align: center;
    width: 44.84375%;
    margin: auto;
    position: absolute;
    margin-top: -12.1875%;
    line-height: 1;
    left: 0px;
    right: 0px;
  }
}
@media (max-width: 768px) and (min-width: 641px) {
  #works .works-content .section-title {
    margin-top: -8%;
  }
}
@media (max-width: 768px) {
  #works .works-content .section-title img {
    vertical-align: bottom;
  }
}
#works .works-content .section-title img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#works .works-content .works-list__wrap {
  position: relative;
  padding-left: 180px;
  max-width: 780px;
}
@media (max-width: 768px) {
  #works .works-content .works-list__wrap {
    padding-left: 0px;
    background: black;
    padding-top: 13px;
  }
}
#works .works-content .works-list {
  margin-top: -4px;
  overflow: hidden;
  max-width: 778px;
  padding: 5px;
  background: black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  /*
              .works-no.animation
              {
                  animation:
              	    fadeInSp 0s ease 1s alternate forwards,
                  ;
              }
  */
}
#works .works-content .works-list .inner-box {
  position: relative;
}
@media (max-width: 1400px) {
  #works .works-content .works-list {
    width: 81.04167%;
  }
}
@media (max-width: 768px) {
  #works .works-content .works-list {
    margin-top: 8px;
    padding: 0px;
    width: 100%;
  }
  #works .works-content .works-list ul {
    overflow: hidden;
  }
}
#works .works-content .works-list .works-box {
  position: absolute;
  width: 100%;
  top: 0px;
}
#works .works-content .works-list .works-no {
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 0px;
  right: 0px;
  margin: auto;
  width: 56px;
  height: 56px;
  /*
                  opacity: 0;
                  transition: 0.3s ease-out;  
  */
}
#works .works-content .works-list li {
  float: left;
  width: 50%;
  overflow: hidden;
}
#works .works-content .works-list li img {
  border: solid 5px black;
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  #works .works-content .works-list li img {
    border: 0px;
  }
}
@media (max-width: 768px) {
  #works .works-content .works-list li:nth-child(1) img, #works .works-content .works-list li:nth-child(2) img {
    border-bottom: solid 8px;
  }
  #works .works-content .works-list li:nth-child(odd) img {
    border-right: solid 4px;
  }
  #works .works-content .works-list li:nth-child(even) img {
    border-left: solid 4px;
  }
}

/*------------------
SOLUTION
--------------------*/
#solution {
  position: relative;
  overflow: hidden;
  padding-top: 361.31313px;
  z-index: 1;
}
@media (max-width: 768px) {
  #solution {
    padding-top: 16%;
    padding-bottom: 32%;
  }
  #solution .section-title {
    width: 90%;
    margin: auto;
  }
  #solution .section-title img {
    max-width: 100%;
  }
}
#solution .solution-content {
  padding-left: 280px;
  position: relative;
  max-width: 960px;
}
@media (max-width: 1400px) {
  #solution .solution-content {
    padding-left: 20%;
  }
}
@media (max-width: 768px) {
  #solution .solution-content {
    padding-left: 0px;
  }
}
#solution .solution-bg {
  position: absolute;
  top: -47.37374px;
  left: 678.78788px;
}
@media (max-width: 1400px) {
  #solution .solution-bg {
    width: 49.28571%;
    left: 48.48485%;
    height: auto;
  }
}
@media (max-width: 768px) {
  #solution .solution-bg {
    vertical-align: bottom;
    width: 50%;
  }
}
#solution .solution-list {
  margin-top: -10px;
}
#solution .solution-list ul {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#solution .solution-list ul .solution-info {
  padding-top: 40px;
  padding-left: 30px;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: 0.3s ease-out;
                /*
@media (max-width: 1400px)
                {
                    padding-top: 2rem;
                    padding-left: 8%;
                }
*/
}
@media (max-width: 768px) {
  #solution .solution-list ul .solution-info {
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 1rem;
    line-height: 1.6;
  }
}
#solution .solution-list ul a:hover .solution-info {
  /*background: $siteColorGreen;*/
  color: #bad80a;
}
#solution .solution-list ul a:hover .read-more, #solution .solution-list ul a:hover dd {
  color: #bad80a;
  border-color: #bad80a;
}
#solution .solution-list li {
  width: 49%;
  margin-bottom: 2%;
  height: 268.68687px;
}
@media (max-width: 768px) {
  #solution .solution-list li {
    width: 100%;
    height: 200px;
  }
}
#solution .solution-list li a {
  display: block;
  text-decoration: none;
  color: white;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Noto Sans Japanese', serif;
  /*border: solid 10px black;*/
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  font-size: 28px;
}
@media (max-width: 1400px) {
  #solution .solution-list li a {
    font-size: 2.66667rem;
  }
}
@media (max-width: 640px) {
  #solution .solution-list li a {
    font-size: 1.4rem;
  }
}
#solution .solution-list li a .read-more {
  position: absolute;
  left: 30px;
  bottom: 40px;
  display: inline-block;
  border: solid 3px white;
  padding: 6px;
  /*
                      color: black;
                      font-size: 16px;
  */
  transition: 0.3s ease-out;
  color: white;
  font-size: 14px;
}
@media (max-width: 768px) {
  #solution .solution-list li a .read-more {
    left: 30px;
    border-width: 1px;
    font-size: 12px;
    font-weight: normal;
  }
}
#solution .solution-list li a:hover {
  color: #bad80a;
}
@media (min-width: 769px) {
  #solution .solution-list li:nth-child(n+5) {
    margin-bottom: 0px;
  }
}
#solution .solution-list .solution1 a {
  background: black url(../img/solution/solution1.jpg) no-repeat right top;
  background-size: 31.94842%;
}
@media (max-width: 768px) {
  #solution .solution-list .solution1 a {
    background-size: auto 100%;
  }
}
#solution .solution-list .solution2 a {
  background: black url(../img/solution/solution2.jpg) no-repeat right top;
  background-size: 31.94842%;
}
@media (max-width: 768px) {
  #solution .solution-list .solution2 a {
    background-size: auto 100%;
  }
}
#solution .solution-list .solution3 a {
  background: black url(../img/solution/solution3.jpg) no-repeat right top;
  background-size: 31.94842%;
}
@media (max-width: 768px) {
  #solution .solution-list .solution3 a {
    background-size: auto 100%;
  }
}
#solution .solution-list .solution4 a {
  background: black url(../img/solution/solution4.jpg) no-repeat right top;
  background-size: 31.94842%;
}
@media (max-width: 768px) {
  #solution .solution-list .solution4 a {
    background-size: auto 100%;
  }
}
#solution .solution-list .solution5 a {
  background: black url(../img/solution/solution5.jpg) no-repeat right top;
  background-size: 31.94842%;
}
@media (max-width: 768px) {
  #solution .solution-list .solution5 a {
    background-size: auto 100%;
  }
}
#solution .solution-list .solution6 a {
  background: black url(../img/solution/solution6.jpg) no-repeat right top;
  background-size: 31.94842%;
}
@media (max-width: 768px) {
  #solution .solution-list .solution6 a {
    background-size: auto 100%;
  }
}

.svg-mask {
  position: absolute;
  width: 0;
  height: 0;
}

/*
.masked-element image {
  mask: url(#mask1);
}
*/
/*------------------
ABOUT
--------------------*/
#about {
  position: relative;
  overflow: hidden;
}
#about .about-link a {
  display: inline-block;
  text-decoration: none;
  background: black;
  color: #bad80a;
  font-size: 22px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 30px 0;
  width: 320px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease-out;
  line-height: 1;
  margin-top: 20px;
}
@media (max-width: 1400px) {
  #about .about-link a {
    width: 30%;
    padding: 1.5em;
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  #about .about-link a {
    width: 240px;
    padding: 15px;
    font-size: 2rem;
  }
}
#about .about-link a span:after {
  content: "";
  background: url(../img/contact/arrow.png) no-repeat left center;
  width: 15px;
  height: 20px;
  display: inline-block;
  background-size: cover;
  margin-left: 2px;
}
@media (max-width: 768px) {
  #about .about-link a span:after {
    width: 9px;
    height: 12px;
    background-size: auto 100%;
  }
}
#about .about-link a:hover {
  opacity: .8;
}
@media (min-width: 1401px) {
  #about {
    min-height: 908px;
  }
}
@media (max-width: 1400px) {
  #about {
    margin-bottom: 66px;
    overflow: hidden;
  }
  #about .section-sub-title {
    font-size: 1.2rem;
  }
  #about .more-link {
    left: 31.60714%;
    bottom: 3.23102%;
  }
}
@media (max-width: 1400px) and (max-width: 1400px) {
  #about .more-link {
    bottom: 13%;
  }
}
@media (max-width: 1400px) and (max-width: 768px) {
  #about .more-link {
    position: static;
    margin: 0 auto;
    width: 279px;
    margin-top: 25px;
  }
}
@media (max-width: 1400px) and (max-width: 768px) {
  #about .more-link__wrap {
    text-align: center;
  }
}

#about .section-text {
  position: static;
  margin-top: 20px;
  background: #4d4d4d;
}
@media (max-width: 1400px) {
  #about .section-text {
    width: 30.5%;
  }
}
@media (max-width: 768px) {
  #about .section-text {
    width: 100%;
    padding-bottom: 30px;
  }
}
#about .about-bg2 {
  position: absolute;
  top: -70px;
  left: 0px;
}
@media (max-width: 1400px) {
  #about .about-bg2 {
    width: 49.28571%;
    height: auto;
  }
}
@media (max-width: 768px) {
  #about .about-bg2 {
    vertical-align: bottom;
    width: 50%;
  }
}
#about .about-bg {
  position: absolute;
  top: 208px;
  left: 507px;
}
@media (max-width: 1400px) {
  #about .about-bg {
    left: 29.07143%;
    width: 70.64286%;
    top: 134px;
  }
}
@media (max-width: 768px) {
  #about .about-bg {
    top: 30px;
    left: -40.625%;
    width: 179.0625%;
    max-width: 573px;
    height: auto;
  }
}
#about .section-title {
  vertical-align: bottom;
  line-height: 1;
  margin-bottom: 24px;
}
@media (max-width: 1400px) {
  #about .section-title {
    width: 30.80357%;
  }
  #about .section-title img {
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 768px) {
  #about .section-title {
    width: 72.33333%;
    margin: auto;
  }
}
#about .about-content {
  padding-top: 353.53535px;
  position: relative;
  margin-left: 280px;
  z-index: 2;
}
@media (max-width: 1400px) {
  #about .about-content {
    padding-top: 21.42857%;
    margin-left: 20%;
    overflow: hidden;
    padding-bottom: 30.71429%;
  }
}
@media (max-width: 768px) {
  #about .about-content {
    padding-top: 0px;
    margin-left: 0px;
    padding: 0 10px;
    text-align: center;
    padding-bottom: 40px;
  }
  #about .about-content .graph-sp {
    height: auto;
    margin-top: 13px;
  }
  #about .about-content .graph-sp img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}
#about .graph-title__area {
  overflow: hidden;
  width: 0%;
}
#about .graph-title {
        /*
animation:
    	    graphShow 1s ease 0s alternate forwards,
	    ;
*/
}
@media (max-width: 1400px) {
  #about .graph-title {
    width: 39.01786%;
  }
}
#about .graph-wrap {
  position: absolute;
  top: 226.26263px;
  left: 427px;
  width: 345px;
  height: 595px;
}
@media (max-width: 1400px) {
  #about .graph-wrap {
    left: 38.125%;
    width: 30.80357%;
    top: 20%;
    height: 100%;
  }
  #about .graph-wrap img {
    width: 100%;
    height: auto;
  }
}
#about .graph-wrap .graph-area {
  overflow: hidden;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 0%;
}
#about .graph-wrap .graph-area.show {
  animation: graphShowIE 1s ease 0.5s alternate forwards;
}
#about .graph {
  -webkit-clip-path: polygon(0% 50%, 0% 50%, 100% 50%, 100% 50%, 0% 50%);
  clip-path: polygon(0% 50%, 0% 50%, 100% 50%, 100% 50%, 0% 50%);
        /*
animation:
    	    graphDataShow 1s ease 0s alternate forwards,
	    ;
*/
}
#about .graph-title.show {
  animation: graphShow 1s ease 0s alternate forwards;
}
#about .graph.show {
  animation: graphDataShow 1s ease 0s alternate forwards;
}
#about .graph-front_tb {
  width: 80%;
  position: absolute;
  top: 150px;
}
#about .graph-front_tb img {
  width: 100%;
  height: auto;
}
#about .graph-front, #about .map-area {
  position: absolute;
  top: 261.61616px;
  left: 470px;
}
@media (max-width: 1400px) {
  #about .graph-front, #about .map-area {
    top: 24%;
    left: 41.96429%;
    width: 51.33929%;
    height: auto;
  }
}
#about .graph-sp {
  position: relative;
}
#about .map-area img {
  width: 100%;
  height: auto;
  opacity: 0;
}
#about .map-area .map {
  position: absolute;
}
#about .map-area .map1 {
  left: 25.21739%;
  top: 46.43478%;
  width: 50.95652%;
  height: 9.56522%;
}
@media (max-width: 768px) {
  #about .map-area .map1 {
    left: 24.20701%;
    top: 41.78404%;
    width: 48.91486%;
    height: 8.6072%;
  }
}
#about .map-area .map2 {
  left: 17.21739%;
  top: 13.3913%;
  width: 8.17391%;
  height: 8.52174%;
}
@media (max-width: 768px) {
  #about .map-area .map2 {
    left: 16.52755%;
    top: 12.05008%;
    width: 7.84641%;
    height: 7.66823%;
  }
}
#about .map-area .map3 {
  left: 2.08696%;
  top: 59.30435%;
  width: 12.52174%;
  height: 5.3913%;
}
@media (max-width: 768px) {
  #about .map-area .map3 {
    left: 2.00334%;
    top: 53.36463%;
    width: 12.02003%;
    height: 4.85133%;
  }
}
#about .map-area .map4 {
  left: 42.6087%;
  top: 89.21739%;
  width: 14.08696%;
  height: 7.82609%;
}
@media (max-width: 768px) {
  #about .map-area .map4 {
    left: 40.9015%;
    top: 80.28169%;
    width: 13.52254%;
    height: 7.04225%;
  }
}
#about .map-area .map5 {
  left: 85.91304%;
  top: 60.17391%;
  width: 11.13043%;
  height: 6.26087%;
}
@media (max-width: 768px) {
  #about .map-area .map5 {
    left: 82.47078%;
    top: 54.1471%;
    width: 10.68447%;
    height: 5.6338%;
  }
}
#about .map-area .map6 {
  left: 71.47826%;
  top: 11.65217%;
  width: 7.47826%;
  height: 6.78261%;
}
@media (max-width: 768px) {
  #about .map-area .map6 {
    left: 68.61436%;
    top: 10.48513%;
    width: 7.17863%;
    height: 6.10329%;
  }
}
@media (max-width: 768px) {
  #about .map-area {
    top: 0px;
    left: 0px;
    width: 100%;
  }
  #about .map-area .map1 {
    left: 32.17391%;
    top: 56.69565%;
    width: 49.56522%;
    height: 13.91304%;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  #about .map-area .map1 {
    left: 30.88481%;
    top: 51.01721%;
    width: 47.5793%;
    height: 12.51956%;
  }
}
@media (max-width: 768px) {
  #about .map-area .map2 {
    left: 25.21739%;
    top: 28.17391%;
    width: 7.13043%;
    height: 9.04348%;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  #about .map-area .map2 {
    left: 24.20701%;
    top: 25.35211%;
    width: 6.84474%;
    height: 8.13772%;
  }
}
@media (max-width: 768px) {
  #about .map-area .map3 {
    left: 10.95652%;
    top: 73.21739%;
    width: 10.6087%;
    height: 4%;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  #about .map-area .map3 {
    left: 10.51753%;
    top: 65.88419%;
    width: 10.18364%;
    height: 3.59937%;
  }
}
@media (max-width: 768px) {
  #about .map-area .map4 {
    left: 49.73913%;
    top: 102.26087%;
    width: 12%;
    height: 5.3913%;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  #about .map-area .map4 {
    left: 47.74624%;
    top: 92.01878%;
    width: 11.5192%;
    height: 4.85133%;
  }
}
@media (max-width: 768px) {
  #about .map-area .map5 {
    left: 91.13043%;
    top: 74.78261%;
    width: 9.3913%;
    height: 2.95652%;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  #about .map-area .map5 {
    left: 87.47913%;
    top: 67.29264%;
    width: 9.01503%;
    height: 2.66041%;
  }
}
@media (max-width: 768px) {
  #about .map-area .map6 {
    left: 77.3913%;
    top: 26.95652%;
    width: 6.95652%;
    height: 6.43478%;
  }
}
@media (max-width: 768px) and (max-width: 768px) {
  #about .map-area .map6 {
    left: 74.29048%;
    top: 24.25665%;
    width: 6.6778%;
    height: 5.7903%;
  }
}

#about #svgPath {
  width: 427px;
}
#about .movie {
  position: relative;
  max-width: 1400px;
  margin: 100px auto 0;
}
@media (max-width: 768px) {
  #about .movie {
    margin-top: 24px;
  }
}
#about .movie .movie-img {
  width: 100%;
  height: auto;
}
#about .movie .movie-title {
  position: absolute;
  left: 185px;
  width: 261px;
  height: 71px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
@media (max-width: 1400px) {
  #about .movie .movie-title {
    left: 13.21429%;
    width: 18.64286%;
    height: 14.9789%;
  }
}
@media (max-width: 768px) {
  #about .movie .movie-title {
    width: 214px;
    height: 53.5px;
    left: 20px;
  }
}
#about .movie .overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
#about .movie .overlay2 {
  position: absolute;
  top: -278px;
  left: 0px;
}
@media (max-width: 1400px) {
  #about .movie .overlay2 {
    top: -58.01688%;
    width: 49.42857%;
  }
  #about .movie .overlay2 img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}
@media (max-width: 1400px) and (max-width: 768px) {
  #about .movie .overlay2 {
    top: -64px;
    width: 160px;
    vertical-align: bottom;
  }
}

@media (max-width: 1400px) and (max-width: 768px) and (min-width: 641px) {
  #about .movie .overlay2 {
    top: -20.625%;
    width: 50%;
  }
}

/*------------------
CLIENTS
--------------------*/
#clients {
  max-width: 1040px;
  margin: auto;
  padding-top: 176.06061px;
}
@media (max-width: 1400px) {
  #clients {
    padding: 0 20px;
    padding-top: 8.21429%;
  }
}
@media (max-width: 768px) {
  #clients {
    padding: 0 10px;
  }
}
#clients .section-title {
  text-align: center;
}
@media (max-width: 1400px) {
  #clients .section-title img {
    width: 22.14286%;
    height: auto;
  }
}
@media (max-width: 1400px) and (max-width: 768px) {
  #clients .section-title img {
    width: 59.375%;
  }
}

#clients .clients-list {
  margin-top: 90px;
}
@media (max-width: 1400px) {
  #clients .clients-list {
    margin-top: 6.42857%;
  }
}
#clients .clients-list ul {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-wrap: wrap;
            /*
li:nth-child(n+13)
            {
                margin-bottom: 0;
            }
*/
}
@media (max-width: 768px) {
  #clients .clients-list ul {
    align-items: center;
    /*
                    li:nth-child(3n+2)
                    {
                        margin: 0 (40/640)*100%;
                    }
    */
  }
}
#clients .clients-list ul li {
  width: 16.66667%;
  text-align: center;
  margin-bottom: 40px;
  overflow: hidden;
}
#clients .clients-list ul li img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  #clients .clients-list ul li {
    width: 33.33333%;
    margin-bottom: 10px;
  }
  #clients .clients-list ul li img {
    width: 72.22222%;
  }
}
#clients .clients-list ul li .list-area1.show {
  animation: fadeLeft 1s ease 0s alternate forwards;
}
#clients .clients-list ul li .list-area2.show {
  animation: fadeLeft 1s ease 0.5s alternate forwards;
}
#clients .clients-list ul li .list-area3.show {
  animation: fadeLeft 1s ease 1s alternate forwards;
}
#clients .align-right {
  text-align: right;
}
@media (max-width: 768px) {
  #clients .sp--align-center {
    text-align: center;
  }
}
#clients .more-link {
  position: static;
  margin-left: auto;
}
@media (max-width: 768px) {
  #clients .more-link {
    width: 279px;
  }
}

/*------------------
ACCESS
--------------------*/
#access {
  padding-top: 90px;
}
@media (max-width: 1400px) {
  #access {
    padding-top: 6.42857%;
  }
}
@media (max-width: 1400px) and (max-width: 768px) {
  #access {
    padding-top: 40px;
  }
}

#access img {
  vertical-align: bottom;
}
#access .section-title {
  margin-left: 180px;
  line-height: 1;
  margin-bottom: -2px;
}
@media (max-width: 1400px) {
  #access .section-title {
    margin-left: 12.85714%;
  }
  #access .section-title img {
    width: 21.07143%;
    height: auto;
  }
}
@media (max-width: 768px) {
  #access .section-title {
    margin-left: 0px;
    text-align: center;
  }
  #access .section-title img {
    width: 57.03125%;
    max-width: 295px;
  }
}
#access .section-title img {
  vertical-align: bottom;
}
#access .access-content {
  position: relative;
}
@media (max-width: 768px) {
  #access .access-content {
    max-height: 523px;
    overflow: hidden;
  }
}
#access .access-content .access-bgR {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
}
#access .access-content .access-bg {
  position: relative;
  width: 1133px;
}
@media (max-width: 1400px) {
  #access .access-content .access-bg {
    width: 80.92857%;
  }
}
#access .access-content .map-list {
  position: absolute;
  top: 70px;
  left: 180px;
  overflow: hidden;
  /*
             li
             {
                 background: white;
             }
  */
}
@media (max-width: 1400px) {
  #access .access-content .map-list {
    left: 12.85714%;
    width: 47.14286%;
  }
}
@media (max-width: 768px) {
  #access .access-content .map-list {
    top: 20px;
    left: 10px;
    width: 71.875%;
  }
}
#access .access-content .map-list .active {
  opacity: 1;
  transform: none;
}
#access .access-content .map-list .hide {
  display: none;
}
#access .access-content .map-list iframe {
  width: 660px;
  height: 470px;
  border: solid 10px black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: white;
}
@media (max-width: 1400px) {
  #access .access-content .map-list iframe {
    width: 100%;
    height: 388.90845px;
  }
}
@media (max-width: 768px) {
  #access .access-content .map-list iframe {
    border: solid 4px black;
  }
}
#access .access-content .map-list .map-info {
  margin-top: 16px;
}
@media (max-width: 768px) {
  #access .access-content .map-list .map-info {
    margin-top: 10px;
  }
}
#access .access-content .map-list .map-info dt {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1;
}
@media (max-width: 768px) {
  #access .access-content .map-list .map-info dt {
    font-size: 1.2rem;
  }
}
#access .access-content .map-list .map-info dd {
  font-size: 14px;
  font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif !important;
}
@media (max-width: 768px) {
  #access .access-content .map-list .map-info dd {
    font-size: 1.1rem;
  }
}
#access .access-content .map-menu {
  position: absolute;
  top: 70px;
}
@media (min-width: 1401px) {
  #access .access-content .map-menu {
    left: 1153px;
  }
}
@media (max-width: 1400px) {
  #access .access-content .map-menu {
    right: 50px;
  }
}
@media (max-width: 768px) {
  #access .access-content .map-menu {
    background: black;
    top: 20px;
    height: 388px;
    width: 73.5px;
    padding-left: 10px;
  }
  #access .access-content .map-menu a span {
    display: none !important;
  }
}
@media (max-width: 768px) and (min-width: 641px) {
  #access .access-content .map-menu {
    left: 78.125%;
  }
}
@media (max-width: 768px) and (max-width: 640px) {
  #access .access-content .map-menu {
    right: 10px;
  }
}

#access .access-content .map-menu li {
  overflow: hidden;
  margin-bottom: 5px;
}
@media (max-width: 768px) {
  #access .access-content .map-menu li {
    text-align: center;
    width: 100%;
  }
  #access .access-content .map-menu li a {
    width: 100%;
    height: 65px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.38462;
    padding-left: 7px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media (max-width: 768px) {
  #access .access-content .map-menu li a.on {
    background: url(../img/sp/access-bg_sp.png) no-repeat center center;
    background-size: contain;
  }
}
#access .access-content .map-menu a {
  color: white;
  text-decoration: none;
  display: inline-block;
  float: right;
  clear: both;
  transition: 0.3s ease-out;
}
@media (min-width: 769px) {
  #access .access-content .map-menu a {
    height: 70px;
    line-height: 70px;
    text-align: right;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
}
#access .access-content .map-menu a span {
  display: inline-block;
  width: 73px;
  height: 70px;
  margin-left: 1em;
  transition: 0.3s ease-out;
}
#access .access-content .map-menu a:hover span {
  transform: scale(0.9) rotate(-10deg);
}
#access .access-content .map-menu .link-map1 .on {
  background: url(../img/access-on01.png) no-repeat right center;
}
#access .access-content .map-menu .link-map2 .on {
  background: url(../img/access-on02.png) no-repeat right center;
}
#access .access-content .map-menu .link-map3 .on {
  background: url(../img/access-on03.png) no-repeat right center;
}
#access .access-content .map-menu .link-map4 .on {
  background: url(../img/access-on04.png) no-repeat right center;
}
#access .access-content .map-menu .link-map5 .on {
  background: url(../img/access-on05.png) no-repeat right center;
}
#access .access-content .map-menu .link-map6 .on {
  background: url(../img/access-on06.png) no-repeat right center;
}
#access .access-content .map-menu .link-map1 .off {
  background: url(../img/access-off01.png) no-repeat right center;
}
#access .access-content .map-menu .link-map1 .off:hover {
  background: url(../img/access-on01.png) no-repeat right center;
}
#access .access-content .map-menu .link-map2 .off {
  background: url(../img/access-off02.png) no-repeat right center;
}
#access .access-content .map-menu .link-map2 .off:hover {
  background: url(../img/access-on02.png) no-repeat right center;
}
#access .access-content .map-menu .link-map3 .off {
  background: url(../img/access-off03.png) no-repeat right center;
}
#access .access-content .map-menu .link-map3 .off:hover {
  background: url(../img/access-on03.png) no-repeat right center;
}
#access .access-content .map-menu .link-map4 .off {
  background: url(../img/access-off04.png) no-repeat right center;
}
#access .access-content .map-menu .link-map4 .off:hover {
  background: url(../img/access-on04.png) no-repeat right center;
}
#access .access-content .map-menu .link-map5 .off {
  background: url(../img/access-off05.png) no-repeat right center;
}
#access .access-content .map-menu .link-map5 .off:hover {
  background: url(../img/access-on05.png) no-repeat right center;
}
#access .access-content .map-menu .link-map6 .off {
  background: url(../img/access-off06.png) no-repeat right center;
}
#access .access-content .map-menu .link-map6 .off:hover {
  background: url(../img/access-on06.png) no-repeat right center;
}

/*------------------
CONTACT
--------------------*/
#common-contact {
  text-align: center;
  padding-top: 90px;
  padding-bottom: 180px;
}
@media (max-width: 768px) {
  #common-contact {
    padding: 60px 10px;
  }
  #common-contact img {
    width: 60%;
    height: auto;
    max-width: 336px;
  }
}
#common-contact .contact-text {
  font-size: 1.33333rem;
  margin: 1em 0;
}
#common-contact .contact-link a {
  display: inline-block;
  text-decoration: none;
  background: black;
  color: #bad80a;
  font-size: 24px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 30px 0;
  width: 320px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease-out;
}
@media (max-width: 768px) {
  #common-contact .contact-link a {
    width: 240px;
    padding: 15px;
    font-size: 2rem;
  }
}
#common-contact .contact-link a span:after {
  content: "";
  background: url(../img/contact/arrow.png) no-repeat left center;
  width: 15px;
  height: 20px;
  display: inline-block;
  background-size: cover;
  margin-left: 2px;
}
@media (max-width: 768px) {
  #common-contact .contact-link a span:after {
    width: 9px;
    height: 12px;
    background-size: auto 100%;
  }
}
#common-contact .contact-link a:hover {
  opacity: .8;
}

/*------------------
Animation
--------------------*/
@keyframes graphShow {
  from {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  to {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes graphDataShow {
  from {
    -webkit-clip-path: polygon(0% 50%, 0% 50%, 100% 50%, 100% 50%, 0% 50%);
    clip-path: polygon(0% 50%, 0% 50%, 100% 50%, 100% 50%, 0% 50%);
  }
  60% {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 100% 50%, 100% 50%, 0% 100%);
    clip-path: polygon(0% 0%, 0% 0%, 100% 50%, 100% 50%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes blackOut {
  from {
    background: black;
  }
  to {
    background: white;
  }
}
@-webkit-keyframes logo {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes logo {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes logo_scale {
  from {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}
@keyframes logo_opacity {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidein {
  from {
    left: 0px;
  }
  to {
    left: -60%;
  }
}
@keyframes slidein {
  from {
    left: 0px;
  }
  to {
    left: -60%;
  }
}
@keyframes slideinSp {
  from {
    left: 0px;
  }
  to {
    left: -52.85714%;
  }
}
@-webkit-keyframes slideinR {
  from {
    right: 0px;
  }
  to {
    right: -8.57143%;
  }
}
@keyframes slideinR {
  from {
    right: 0px;
  }
  to {
    right: -50%;
  }
}
@keyframes slideinR_Sp {
  from {
    right: 0px;
  }
  to {
    right: -42.85714%;
  }
}
/*
@-webkit-keyframes slideinR2 {
    from {
//         transform:translateX(0);
            //right:0px;
            right:(120/1400)*100%*(-1);
    }

    to {
//         transform:translateX((560/700)*100%);
            right:(700/1400)*100%*(-1);
    }
}

@keyframes slideinR2 {
    from {
//         transform:translateX(0);
            //right:0px;
            right:(120/1400)*100%*(-1);
    }

    to {
//         transform:translateX((560/700)*100%);
            right:(700/1400)*100%*(-1);
    }
}
*/
/*全画面スライダー*/
#full-slide {
  opacity: 0;
  background: white;
  padding-top: 80px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  /*
      animation:
  	    show 1s ease 10s alternate forwards,
      ;
  */
  /*
      @media (max-width: 1280px) and (min-height: 640px)
      {
         .sp-image
          {
              margin-left: -15% !important;
          } 			
      }
  */
  /*
      padding-top: 80px;
      position: absolute;
      top: 0px;
      left: 0px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  */
  /*
      .black-layer
      {
          width: 100%;
          height: 100%;
          background: black;
      }
  */
  /*
      img
      {
          width: 100%;
      }
  */
}
@media (max-width: 768px) {
  #full-slide {
    padding-top: 48px;
  }
  #full-slide .slick-track, #full-slide .slick-list {
    height: 100%;
  }
}
#full-slide .slide-title {
  left: 56px;
  position: absolute;
  top: 300px;
}
@media (max-width: 768px) {
  #full-slide .slide-title {
    left: 20px;
    top: 20px;
    width: 56.25%;
    height: auto;
  }
}
#full-slide .slide2-logo {
  right: 50px;
  position: absolute;
}
@media (min-width: 769px) {
  #full-slide .slide2-logo {
    top: 300px;
  }
}
@media (max-width: 768px) {
  #full-slide .slide2-logo {
    right: 20px;
    bottom: 60px;
    width: 50.625%;
    height: auto;
  }
}
#full-slide .slick-arrow {
  display: none !important;
}
#full-slide .slick-list {
  overflow: hidden;
}
#full-slide .sp-slides {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#full-slide .sp-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#full-slide .sp-image {
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}

.scroll-content {
  width: 100%;
  overflow: hidden;
}

.cursor-pointer {
  cursor: pointer;
}

.show {
  animation: show 1s ease 0s alternate forwards;
}

.sp-button {
  z-index: 3;
}

.sp-previous-arrow:before,
.sp-previous-arrow:after,
.sp-next-arrow:before,
.sp-next-arrow:after {
  content: '';
  position: absolute;
  width: 2px;
  height: 28px;
  background-color: #FFF;
}

/*
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
*/
@media (min-width: 769px) {
  .fade {
    opacity: 0;
  }

  .fadeInLeft {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }

  .fadeInUp {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }

  .fadeInUp10 {
    transform: translate3d(0, 10%, 0);
    opacity: 0;
  }

  .fadeInDown {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }

  .fadeInDown50 {
    transform: translate3d(0, -50%, 0);
    opacity: 0;
  }

  .fadeInLeft10 {
    transform: translate3d(-10%, 0, 0);
    opacity: 0;
  }

  .fadeInDown10 {
    transform: translate3d(0, -10%, 0);
    opacity: 0;
  }

  .fadeInRight {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }

  .fadeInLeft.animation {
    animation: fadeInLeft 1s ease 0s alternate forwards;
  }
}
@media (max-width: 768px) {
  .fadeInSp {
    transform: translate3d(0, -10%, 0);
    opacity: 0;
  }

  .fadeInSp.animation {
    animation: fadeInSp 1s ease 0s alternate forwards;
  }
}
.fadeInPage {
  opacity: 0;
}

/*
.fadeInLeft.on {
  transform: translate3d(-100%, 0, 0);
  opacity: 1;
  animation:
	    fadeInLeft 1s ease 0s alternate forwards,
    ;
}
*/
/*
.fadeInLeft {
  transform: translate(-100%,0);
  opacity: 0;
}
*/
@-webkit-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slide1 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(336px);
  }
}
@keyframes slide1 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(336px);
  }
}
@keyframes slide1Tb {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(24%);
  }
}
@keyframes slideH {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(6%);
  }
}
@keyframes slide1Sp {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(12%);
  }
}
@media screen and (orientation: landscape) {
  @keyframes slide1Sp {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(137px);
    }
  }
}
@keyframes graphTitleShowIE {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes graphShowIE {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}
@keyframes fadeInSp {
  from {
    transform: translateY(-10%);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}
/*下層ページCSS*/
.page #content {
  margin-top: 80px;
  padding-top: 116px;
  background: url(../img/page-bg.png) no-repeat left top;
}
@media (max-width: 1400px) {
  .page #content {
    background-size: 49.28571%;
  }
}
@media (max-width: 768px) {
  .page #content {
    background-size: 48%;
    margin-top: 48px;
    padding-top: 6.25%;
  }
}

/*Contact CSS*/
.page #content.contact-page .contact-box {
  border: solid 10px black;
  background: rgba(255, 255, 255, 0.6);
  padding: 40px;
  margin-top: -10px;
  font-size: 18px;
  min-height: 480px;
}
@media (max-width: 768px) {
  .page #content.contact-page .contact-box {
    padding: 20px;
    font-size: 1.4rem;
  }
}
@media (max-width: 1400px) {
  .page #content.contact-page #contact .section-title {
    width: 33.21429%;
    width: 90%;
    margin: auto;
    max-width: 465px;
  }
  .page #content.contact-page #contact .section-title img {
    width: 100%;
    height: auto;
  }
}
.page .content-box {
  padding-left: 180px;
  max-width: 1050px;
}
@media (max-width: 1400px) {
  .page .content-box {
    padding-left: 12.85714%;
  }
}
@media (max-width: 768px) {
  .page .content-box {
    padding-left: 0px;
  }
}
.page .submit__wrap {
  text-align: center;
  margin-top: 23px;
}
.page button {
  border: none;
  background: black;
  color: #bad80a;
  font-size: 24px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 30px 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease-out;
}
@media (max-width: 768px) {
  .page button {
    font-size: 1.6rem;
    width: 100%;
    padding: 15px 0;
  }
}
.page button span:after {
  content: "";
  background: url(../img/contact/arrow.png) no-repeat left center;
  width: 15px;
  height: 20px;
  display: inline-block;
  background-size: cover;
  margin-left: 2px;
}
@media (max-width: 768px) {
  .page button span:after {
    width: 9px;
    height: 12px;
    background-size: auto 100%;
  }
}
.page .confirm {
  width: 460px;
}
@media (max-width: 768px) {
  .page .confirm {
    max-width: 460px;
    width: 100%;
  }
}
.page .edit {
  margin-right: 40px;
  display: inline-block;
  background: #7f7f7f;
  color: white;
  font-size: 24px;
  padding: 30px 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  width: 210px;
  line-height: normal;
  text-decoration: none;
  transition: 0.3s ease-out;
}
.page .edit span:before {
  content: "";
  background: url(../img/contact/back.png) no-repeat left center;
  width: 15px;
  height: 20px;
  display: inline-block;
  background-size: cover;
  margin-right: 2px;
}
@media (max-width: 768px) {
  .page .edit span:before {
    width: 9px;
    height: 12px;
    background-size: auto 100%;
  }
}
@media (max-width: 768px) {
  .page .edit {
    width: 40%;
    max-width: 210px;
    font-size: 1.6rem;
    padding: 15px 0;
    margin-right: 20px;
  }
}
.page .submit {
  width: 210px;
}
@media (max-width: 768px) {
  .page .submit {
    width: 40%;
    max-width: 210px;
  }
}
.page button:hover, .page .edit:hover {
  opacity: .8;
}
.page .complete-title {
  font-size: 40px;
  text-align: center;
  border-bottom: solid 1px black;
  padding-bottom: 30px;
  margin-bottom: 30px;
  font-weight: bold;
  line-height: 1;
}
@media (max-width: 768px) {
  .page .complete-title {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem;
  }
}
.page .complete-text {
  width: 690px;
  margin: auto;
  font-size: 16px;
}
@media (max-width: 768px) {
  .page .complete-text {
    font-size: 1.4rem;
    width: auto;
  }
}
.page .tablebox {
  margin-top: 30px;
  width: 100%;
  font-size: 16px;
  border-bottom: solid 1px black;
}
@media (min-width: 769px) {
  .page .tablebox {
    display: table;
  }
  .page .tablebox dl {
    display: table-row;
  }
}
.page .tablebox dt, .page .tablebox dd {
  border-top: solid 1px black;
  padding: 18px 0;
  vertical-align: top;
}
@media (min-width: 769px) {
  .page .tablebox dt, .page .tablebox dd {
    display: table-cell;
  }
}
.page .tablebox dt label, .page .tablebox dt .label, .page .tablebox dd label, .page .tablebox dd .label {
  background: black;
  color: #bad80a;
  text-align: center;
  display: inline-block;
}
@media (min-width: 769px) {
  .page .tablebox dt label, .page .tablebox dt .label, .page .tablebox dd label, .page .tablebox dd .label {
    width: 205px;
  }
}
@media (max-width: 768px) {
  .page .tablebox dt label, .page .tablebox dt .label, .page .tablebox dd label, .page .tablebox dd .label {
    padding: 0 10px;
    font-size: 1.4rem;
  }
}
.page .tablebox dt input[type="text"], .page .tablebox dt input[type="email"], .page .tablebox dt .tell, .page .tablebox dd input[type="text"], .page .tablebox dd input[type="email"], .page .tablebox dd .tell {
  width: 327px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .page .tablebox dt input[type="text"], .page .tablebox dt input[type="email"], .page .tablebox dt .tell, .page .tablebox dd input[type="text"], .page .tablebox dd input[type="email"], .page .tablebox dd .tell {
    width: 100%;
  }
}
.page .tablebox dt .tell, .page .tablebox dd .tell {
  display: flex;
  display: -webkit-flex;
}
@media (min-width: 769px) {
  .page .tablebox dt .tell, .page .tablebox dd .tell {
    justify-content: space-between;
  }
}
.page .tablebox dt .tell input[type="tel"], .page .tablebox dd .tell input[type="tel"] {
  width: 92px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .page .tablebox dt .tell input[type="tel"], .page .tablebox dd .tell input[type="tel"] {
    width: 70px;
  }
}
.page .tablebox dt .tell span, .page .tablebox dd .tell span {
  display: block;
}
@media (max-width: 768px) {
  .page .tablebox dt .tell span, .page .tablebox dd .tell span {
    margin: 0 4px;
  }
}
.page .tablebox dt textarea, .page .tablebox dd textarea {
  width: 100%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px black;
  padding: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.page .tablebox dt input, .page .tablebox dd input {
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px black;
  padding: 8px;
}
.page .tablebox dt {
  width: 244px;
}
@media (max-width: 768px) {
  .page .tablebox dt {
    width: 100%;
    padding-bottom: 10px;
  }
}
@media (max-width: 768px) {
  .page .tablebox dd {
    border: none;
    padding-top: 0px;
  }
}

/*ABOUT CSS*/
.page #content.about-page .about-box {
  border: solid 10px black;
  background: rgba(255, 255, 255, 0.6);
  padding: 40px;
  padding-top: 22px;
  margin-top: -10px;
  font-size: 18px;
  min-height: 480px;
}
@media (max-width: 768px) {
  .page #content.about-page .about-box {
    padding: 20px;
    font-size: 1.4rem;
  }
}
.page #content.about-page .about-box .tablebox {
  margin-top: 0px;
  border: none;
}
.page #content.about-page .about-box .tablebox dt, .page #content.about-page .about-box .tablebox dd {
  border-top: none;
  border-bottom: solid 1px black;
}
.page #content.about-page .about-box .tablebox dt {
  border-bottom: none;
}
.page #content.about-page .about-box .tablebox dl:last-child dt, .page #content.about-page .about-box .tablebox dl:last-child dd {
  border: none;
}
@media (max-width: 1400px) {
  .page #content.about-page #page-about .section-title {
    width: 33.21429%;
    width: 90%;
    margin: auto;
    max-width: 465px;
  }
  .page #content.about-page #page-about .section-title img {
    width: 100%;
    height: auto;
  }
}
.page .about-box .tablebox dd {
  font-size: 16px;
}
@media (max-width: 768px) {
  .page .about-box .tablebox dd {
    font-size: 1.4rem;
  }
}
@media (max-width: 768px) {
  .page .about-box .sp-indent {
    padding-left: 1em;
  }
}
.page .about-box .flexbox {
  margin-bottom: 1em;
}
@media (min-width: 769px) {
  .page .about-box .flexbox {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .page .about-box .flexbox .box-right {
    margin-top: 1em;
  }
}
.page .about-box .year {
  position: relative;
}
@media (max-width: 768px) {
  .page .about-box .year {
    display: block;
  }
  .page .about-box .year:before {
    content: "・";
    position: absolute;
    left: -.9em;
  }
}
@media (max-width: 768px) {
  .page .about-box .label-list {
    line-height: 1.2;
  }
  .page .about-box .label-list .position-name {
    position: relative;
  }
  .page .about-box .label-list .position-name:before {
    content: "・";
    position: absolute;
    left: -.9em;
  }
  .page .about-box .label-list li {
    margin-bottom: 8px;
  }
}
.page .about-box .position-name {
  display: inline-block;
  width: 12em;
}
@media (max-width: 768px) {
  .page .about-box .position-name {
    display: block;
  }
}

/*SOLUTION CSS*/
@media (max-width: 768px) {
  .solution-page .content-box .section-title img {
    width: 87.65625%;
    max-width: 561px;
    height: auto;
    text-align: center;
  }
}
.solution-page .solution-box {
  border: solid 10px black;
  padding: 40px;
  padding-top: 22px;
  margin-top: -10px;
  font-size: 18px;
  padding-right: 286px;
}
@media (min-width: 769px) {
  .solution-page .solution-box {
    min-height: 480px;
  }
}
@media (max-width: 768px) {
  .solution-page .solution-box {
    padding: 10px;
    font-size: 1.4rem;
    background: rgba(255, 255, 255, 0.6);
    border-width: 5px;
  }
}
.solution-page .solution-box .solution__title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 22px;
}
@media (max-width: 768px) {
  .solution-page .solution-box .solution__title {
    font-size: 1.8rem;
    margin-bottom: 10px;
    line-height: 1.16667;
  }
}
.solution-page .solution-box .solution__sub-title {
  background: #bad80a;
  font-size: 22px;
  font-weight: bold;
  padding: 16px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .solution-page .solution-box .solution__sub-title {
    margin-bottom: 16px;
    font-size: 1.4rem;
    line-height: 1.28571;
    padding: 10px;
    position: relative;
    padding-left: 2em;
  }
  .solution-page .solution-box .solution__sub-title span {
    position: absolute;
    left: 10px;
    top: 10px;
  }
}
.solution-page .solution-box .solution__text {
  font-size: 18px;
}
@media (max-width: 768px) {
  .solution-page .solution-box .solution__text {
    font-size: 1.2rem;
    padding-right: 43.46154%;
    min-height: 170px;
  }
}
@media (min-width: 769px) {
  .solution-page .solution1 {
    background: rgba(255, 255, 255, 0.6) url(../img/solution/solution1-bg.jpg) no-repeat right 30px top 30px;
  }
}
@media (max-width: 768px) {
  .solution-page .solution1 .solution__text {
    background: url(../img/solution/solution1-bg.jpg) no-repeat right top;
    background-size: 38.46154% auto;
  }
}
@media (min-width: 769px) {
  .solution-page .solution2 {
    background: rgba(255, 255, 255, 0.6) url(../img/solution/solution2-bg.jpg) no-repeat right 30px top 30px;
  }
}
@media (max-width: 768px) {
  .solution-page .solution2 .solution__text {
    background: url(../img/solution/solution2-bg.jpg) no-repeat right top;
    background-size: 38.46154% auto;
  }
}
@media (min-width: 769px) {
  .solution-page .solution3 {
    background: rgba(255, 255, 255, 0.6) url(../img/solution/solution3-bg.jpg) no-repeat right 30px top 30px;
  }
}
@media (max-width: 768px) {
  .solution-page .solution3 .solution__text {
    background: url(../img/solution/solution3-bg.jpg) no-repeat right top;
    background-size: 38.46154% auto;
  }
}
@media (min-width: 769px) {
  .solution-page .solution4 {
    background: rgba(255, 255, 255, 0.6) url(../img/solution/solution4-bg.jpg) no-repeat right 30px top 30px;
  }
}
@media (max-width: 768px) {
  .solution-page .solution4 .solution__text {
    background: url(../img/solution/solution4-bg.jpg) no-repeat right top;
    background-size: 38.46154% auto;
  }
}
@media (min-width: 769px) {
  .solution-page .solution5 {
    background: rgba(255, 255, 255, 0.6) url(../img/solution/solution5-bg.jpg) no-repeat right 30px top 30px;
  }
}
@media (max-width: 768px) {
  .solution-page .solution5 .solution__text {
    background: url(../img/solution/solution5-bg.jpg) no-repeat right top;
    background-size: 38.46154% auto;
  }
}
@media (min-width: 769px) {
  .solution-page .solution6 {
    background: rgba(255, 255, 255, 0.6) url(../img/solution/solution6-bg.jpg) no-repeat right 30px top 30px;
  }
}
@media (max-width: 768px) {
  .solution-page .solution6 .solution__text {
    background: url(../img/solution/solution6-bg.jpg) no-repeat right top;
    background-size: 38.46154% auto;
  }
}
@media (min-width: 769px) {
  .solution-page .solution-nav {
    margin-top: 10px;
  }
}
@media (min-width: 769px) {
  .solution-page .solution-nav ul {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }
  .solution-page .solution-nav ul li {
    width: 15.90476%;
  }
  .solution-page .solution-nav ul li a {
    display: block;
    text-decoration: none;
    color: #bad80a;
    display: inline-block;
    background: black;
    text-align: center;
    width: 100%;
    transition: 0.3s ease-out;
    height: 60px;
    line-height: 60px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: bold;
  }
}
@media (min-width: 769px) and (max-width: 1050px) {
  .solution-page .solution-nav ul li a {
    font-size: 10px;
  }
}
@media (min-width: 769px) {
  .solution-page .solution-nav ul li .br-text {
    padding-top: 16px;
    line-height: 1.23077;
  }
  .solution-page .solution-nav ul li a.active {
    background: #bad80a;
    color: black;
  }
  .solution-page .solution-nav ul li a:hover {
    background: #bad80a;
    color: black;
  }
}
@media (max-width: 768px) {
  .solution-page .solution-nav ul a {
    display: block;
    color: black;
    text-decoration: none;
    background: white url(../img/allow-icon.png) no-repeat right 10px center;
    background-size: 11px;
    font-size: 1.2rem;
    padding: 8px;
    border-bottom: solid 1px black;
    font-weight: bold;
  }
  .solution-page .solution-nav ul a.active {
    background: #bad80a;
  }
}