@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family: "Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

ol, ul {
  list-style: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/*------------- setting ------------- */
@font-face {
  font-family: "akrobat";
  src: url("/assetsfonts/Akrobat-ExtraBold.eot");
  src: url("/assetsfonts/Akrobat-ExtraBold.eot?iefix") format("eot"), url("/assets/fonts/Akrobat-ExtraBold.woff") format("woff"), url("/assets/fonts/Akrobat-ExtraBold.ttf") format("truetype");
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.display_none {
  display: none !important;
}

.is-hover-fade {
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.is-hover-fade:hover {
  opacity: 0.7;
}

.sp-on {
  display: none;
}

.section-inner {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

.section-inner1280 {
  position: relative;
  width: 1280px;
  margin: 0 auto;
}

.wrapper {
  overflow: hidden;
}

section {
  z-index: 0;
}

/*------------- mixin ------------- */
/*------------- opening ------------- */
/*------------- pageTransition ------------- */
@-webkit-keyframes loop {
  0% {
    top: 100vh;
  }
  100% {
    top: 0;
  }
}
@keyframes loop {
  0% {
    top: 100vh;
  }
  100% {
    top: 0;
  }
}

.container {
  -webkit-transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.transition-area {
  visibility: hidden;
  position: fixed;
  left: 50%;
  margin-left: -70vw;
  top: -30vw;
  width: 130vw;
  height: 300vh;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.transition-area span {
  display: block;
  width: 130vw;
  height: 100%;
  background-color: #f4f4f4;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  -webkit-transition: all 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: all 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
}

.transition-area span:nth-child(2) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

.transition-area span:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.transition-leave .container {
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}

.transition-leave .transition-area {
  visibility: visible;
}

.transition-leave .transition-area span {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.transition-change-color .transition-area span {
  -webkit-transition-delay: initial;
          transition-delay: initial;
  background-color: #fff;
}

.transition-change-visiblity .transition-area {
  visibility: hidden;
}

.endTransition .transition-area span {
  -webkit-transition-delay: initial;
          transition-delay: initial;
  background-color: #fff;
}

/*------------- line ------------- */
@-webkit-keyframes moveLine1 {
  0% {
    left: 90%;
  }
  10% {
    left: 110%;
  }
  55% {
    left: -10%;
  }
  100% {
    left: 90%;
  }
}
@keyframes moveLine1 {
  0% {
    left: 90%;
  }
  10% {
    left: 110%;
  }
  55% {
    left: -10%;
  }
  100% {
    left: 90%;
  }
}

@-webkit-keyframes moveLine2 {
  0% {
    left: 88%;
  }
  40% {
    left: -10%;
  }
  80% {
    left: 110%;
  }
  100% {
    left: 88%;
  }
}

@keyframes moveLine2 {
  0% {
    left: 88%;
  }
  40% {
    left: -10%;
  }
  80% {
    left: 110%;
  }
  100% {
    left: 88%;
  }
}

@-webkit-keyframes moveLine3 {
  0% {
    left: 75%;
  }
  20% {
    left: 110%;
  }
  65% {
    left: -10%;
  }
  100% {
    left: 75%;
  }
}

@keyframes moveLine3 {
  0% {
    left: 75%;
  }
  20% {
    left: 110%;
  }
  65% {
    left: -10%;
  }
  100% {
    left: 75%;
  }
}

@-webkit-keyframes moveLine4 {
  0% {
    left: 71%;
  }
  25% {
    left: 110%;
  }
  75% {
    left: -10%;
  }
  100% {
    left: 71%;
  }
}

@keyframes moveLine4 {
  0% {
    left: 71%;
  }
  25% {
    left: 110%;
  }
  75% {
    left: -10%;
  }
  100% {
    left: 71%;
  }
}

@-webkit-keyframes moveLine5 {
  0% {
    left: 70%;
  }
  40% {
    left: 20%;
  }
  80% {
    left: 110%;
  }
  100% {
    left: 70%;
  }
}

@keyframes moveLine5 {
  0% {
    left: 70%;
  }
  40% {
    left: 20%;
  }
  80% {
    left: 110%;
  }
  100% {
    left: 70%;
  }
}

@-webkit-keyframes moveLine6 {
  0% {
    left: 68%;
  }
  25% {
    left: 100%;
  }
  75% {
    left: -10%;
  }
  100% {
    left: 68%;
  }
}

@keyframes moveLine6 {
  0% {
    left: 68%;
  }
  25% {
    left: 100%;
  }
  75% {
    left: -10%;
  }
  100% {
    left: 68%;
  }
}

@-webkit-keyframes moveLine7 {
  0% {
    left: 40%;
  }
  20% {
    left: -10%;
  }
  80% {
    left: 80%;
  }
  100% {
    left: 40%;
  }
}

@keyframes moveLine7 {
  0% {
    left: 40%;
  }
  20% {
    left: -10%;
  }
  80% {
    left: 80%;
  }
  100% {
    left: 40%;
  }
}

.line-area {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  opacity: 0;
  -webkit-transition: opacity 5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.3s;
  transition: opacity 5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.3s;
}

.line-area.active {
  opacity: 1;
}

.line-area .line-inner {
  width: 100%;
}

.line-area .line {
  position: fixed;
  display: block;
  top: -10vh;
  width: 1px;
  height: 130vh;
  background-color: #ebecf5;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  opacity: 0.6;
}

.line-area .line:nth-child(1n) {
  left: 95%;
  -webkit-animation: moveLine1 55s linear infinite;
          animation: moveLine1 55s linear infinite;
}

.line-area .line:nth-child(2n) {
  left: 20%;
  -webkit-animation: moveLine2 70s linear infinite;
          animation: moveLine2 70s linear infinite;
}

.line-area .line:nth-child(3n) {
  left: 40%;
  -webkit-animation: moveLine3 45s linear infinite;
          animation: moveLine3 45s linear infinite;
}

.line-area .line:nth-child(4n) {
  left: 30%;
  -webkit-animation: moveLine4 40s linear infinite;
          animation: moveLine4 40s linear infinite;
}

.line-area .line:nth-child(5n) {
  left: 0%;
  -webkit-animation: moveLine5 30s linear infinite;
          animation: moveLine5 30s linear infinite;
}

.line-area .line:nth-child(6n) {
  left: 80%;
  -webkit-animation: moveLine6 55s linear infinite;
          animation: moveLine6 55s linear infinite;
}

.line-area .line:nth-child(7n) {
  left: 20%;
  -webkit-animation: moveLine7 35s linear infinite;
          animation: moveLine7 35s linear infinite;
}

/*------------- header ------------- */
header {
  opacity: 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 500;
  -webkit-transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
}

header.active {
  opacity: 1;
}

header .section-inner {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: -webkit-transform 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: transform 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: transform 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96), -webkit-transform 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  z-index: 10;
}

header .section-inner.changeColor {
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
}

header .section-inner.changeColor .header-area {
  padding-top: 40px;
  -webkit-transition: padding-top 0.5s linear;
  transition: padding-top 0.5s linear;
}

header .section-inner.changeColor nav .navi-global li span:before {
  border-bottom: solid 2px #111;
}

header .section-inner.changeColor nav .navi-global li a {
  color: #111;
}

header .section-inner.changeColor nav .navi-global li.menu a:before {
  background: url(/assets/img/icon-arrow-bottom-black.webp) no-repeat;
  background-size: 100%;
}

header .menu-modal-area {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
}

header .menu-modal-area.changeColor .white-box {
  height: 70px;
}

header .menu-modal-area .white-box {
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 120px;
  z-index: 10;
}

header .menu-modal-area .menu-modal {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 60px;
  background-color: #f4f4f4;
}

header .menu-modal-area .menu-modal li {
  position: relative;
  margin: 0;
  padding: 0;
  letter-spacing: 1.8px;
}

header .menu-modal-area .menu-modal li a {
  display: block;
  color: #000;
  font-size: 11px;
  margin: 0 22px;
  text-decoration: none;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding-bottom: 2px;
}

header .menu-modal-area .menu-modal li a:hover:before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -2px;
  left: 0;
  border-bottom: solid 1px #111;
}

header .menu-modal-area .menu-modal li a.icon-blank:after {
  content: "";
  background: url(/assets/img/icon-blank.webp) no-repeat;
  width: 10px;
  height: 10px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: -10px;
}

header .menu-modal-area .menu-modal li:before {
  content: "/";
  background: none;
  position: absolute;
  top: 0px;
  right: -2px;
  color: #d8d8d8;
  font-size: 11px;
  line-height: 60px;
}

header .menu-modal-area .menu-modal li:last-child:before {
  display: none;
}

header.index {
  -webkit-transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96) 2s;
  transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96) 2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

header.index nav .navi-global li a {
  color: #fff;
}

header.index nav .navi-global li span:before {
  border-bottom: solid 2px #fff;
}

header.index nav .navi-global li.menu a:before {
  background: url(/assets/img/icon-arrow-bottom.webp) no-repeat;
  background-size: 100%;
}

header.index .humberger-btn span {
  background-color: #fff;
}

header .header-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 40px;
  -webkit-transition: padding-top 0.5s linear;
  transition: padding-top 0.5s linear;
  align-items: center;
}

header .header-area .logo-main img {
  width: 100%;
  height: 100%;
}

header nav .navi-global {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header nav .navi-global li {
  margin-right: 28px;
}

header nav .navi-global li:last-child {
  margin-right: 0;
}

header nav .navi-global li:hover span:before {
  width: 100%;
}

header nav .navi-global li span {
  position: relative;
  font-family: "akrobat";
}

header nav .navi-global li span:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  border-bottom: solid 2px #111;
  -webkit-transition: width 0.2s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.05s;
  transition: width 0.2s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.05s;
}

header nav .navi-global li a {
  position: relative;
  display: block;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  font-family: "akrobat";
  letter-spacing: 3.5px;
}

header nav .navi-global li a.color-black {
  color: #111;
}

header nav .navi-global li a.color-black:before {
  background: url(/assets/img/icon-arrow-bottom-black.webp) no-repeat !important;
  background-size: 100% !important;
  -webkit-transition: opacity 0.4s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.2s !important;
  transition: opacity 0.4s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.2s !important;
}

header nav .navi-global li.menu span:before {
  border-bottom: solid 2px #111;
}

header nav .navi-global li.menu a {
  padding-right: 15px;
}

header nav .navi-global li.menu a:before {
  content: "";
  position: absolute;
  background: url(/assets/img/icon-arrow-bottom-black.webp) no-repeat;
  background-size: 100%;
  width: 8px;
  height: 4px;
  right: 0;
  top: 50%;
  margin-top: -2px;
  -webkit-transition: opacity 0.4s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.2s;
  transition: opacity 0.4s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.2s;
}

.breadcrumbs {
  display: none;
}

/*------------- 404 ------------- */
.error404 .section-head:before {
  background: url(/assets/img/about/img-head.webp) no-repeat;
  background-size: 100%;
}

.error404 .section-head .text-breadcrumbs {
  display: none;
}

.error404 .section-error {
  position: relative;
  margin-top: 150px;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
}

.error404 .section-error .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: -280px;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

@media screen and (max-width: 1200px) {
  .error404 .section-error .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .error404 .section-error .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.error404 .section-error h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  text-align: center;
  font-size: 54px;
  margin-bottom: 18px;
}

.error404 .section-error h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .error404 .section-error h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .error404 .section-error h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.error404 .section-error h2 span {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.error404 .section-error h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  left: 56px;
  top: -39px;
}

@media screen and (max-width: 1200px) {
  .error404 .section-error h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .error404 .section-error h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.error404 .section-error .text-box {
  width: 440px;
  margin: 0 auto;
}

.error404 .section-error .text-box .text {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.error404 .section-error .text-box .text-content {
  text-align: center;
  font-size: 15px;
  line-height: 35px;
  margin: 45px 0;
}

.error404 .section-error .btn-back a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  margin: 0 auto;
}

.error404 .section-error .btn-back a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.error404 .section-error .btn-back a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.error404 .section-error .btn-back a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.error404 .section-error .btn-back a:hover {
  color: #111;
}

.error404 .section-error .btn-back a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .error404 .section-error .btn-back a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .error404 .section-error .btn-back a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .error404 .section-error .btn-back a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .error404 .section-error .btn-back a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .error404 .section-error .btn-back a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .error404 .section-error .btn-back a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

/*------------- footer ------------- */
footer {
  margin-top: 120px;
}

footer .top-area {
  background: url(/assets/img/bg-footer.webp) no-repeat center center;
  background-size: cover;
  height: 360px;
  padding: 72px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

footer .top-area .section-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

footer .top-area .card-area {
  position: relative;
  width: 560px;
  height: 216px;
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.12);
}

footer .top-area .card-area a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #111;
  padding: 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

footer .top-area .card-area a:before {
  content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 10px;
  background-size: 100%;
  position: absolute;
  right: 30px;
  bottom: 41px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

footer .top-area .card-area a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

footer .top-area .card-area .text-cat {
  font-size: 13px;
  font-weight: bold;
}

footer .top-area .card-area .title {
  font-family: "akrobat";
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 4px;
  margin: 24px 0;
}

footer .top-area .card-area .text-content {
  font-size: 14px;
  line-height: 28px;
  width: 440px;
}

footer .bottom-area {
  position: relative;
  background-color: #111;
  padding: 68px 0 53px 0;
}

footer .bottom-area .logo-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 70px;
  justify-content: space-between;
  /* width: 100px; */
  padding: 0 10rem;
}

footer .bottom-area .logo-box:before {
  content: "";
  border-right: solid 1px #fff;
  width: 1px;
  height: 56px;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  opacity: 0.5;
}

footer .bottom-area .logo-box:after {
  content: "";
  border-right: solid 1px #fff;
  width: 1px;
  height: 56px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  opacity: 0.5;
}

footer .bottom-area .logo-box h2 {
  position: relative;
  padding-right: 36px;
  display: block;
  width: 100px;
}

footer .bottom-area .logo-box h2:before {
  content: "";
  border-right: solid 1px #888888;
  width: 1px;
  height: 56px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  opacity: 0.5;
}

footer .bottom-area .logo-box h2 img {
  width: 100%;
  height: 100%;
}

footer .bottom-area .logo-box .text {
  color: #fff;
  font-size: 12px;
  line-height: 21.6px;
  margin-left: 36px;
}

footer .bottom-area .navi-area .navi-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 24px;
}

footer .bottom-area .navi-area .navi-box .navi-name {
  position: relative;
  width: 220px;
  margin-right: 40px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  font-family: "akrobat";
  letter-spacing: 1.75px;
}

footer .bottom-area .navi-area .navi-box .navi-name:before {
  content: "";
  border-top: solid 1px #d8d8d8;
  width: 120px;
  height: 1px;
  position: absolute;
  top: 5px;
  right: 0;
}

footer .bottom-area .navi-area .navi-box .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
}

footer .bottom-area .navi-area .navi-box .navi-title {
  color: #fff;
  font-size: 12px;
  width: 150px;
}

footer .bottom-area .navi-area .navi-box .list-navi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .bottom-area .navi-area .navi-box .list-navi a {
  position: relative;
  display: inline-block;
  color: #888888;
  font-size: 12px;
  text-decoration: none;
  padding-right: 10px;
  margin-right: 5px;
}

footer .bottom-area .navi-area .navi-box .list-navi a:hover span {
  opacity: 0.5;
}

footer .bottom-area .navi-area .navi-box .list-navi a:before {
  content: "|";
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

footer .bottom-area .navi-area .navi-box .list-navi a span {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

footer .bottom-area .navi-area .navi-box .list-navi li:last-child a:before {
  display: none;
}

footer .bottom-area .navi-area .navi-box .list-navi_global {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .bottom-area .navi-area .navi-box .list-navi_global a {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 13px;
  font-family: "akrobat";
  letter-spacing: 1.62px;
  text-decoration: none;
  padding-right: 10px;
  margin-right: 5px;
}

footer .bottom-area .navi-area .navi-box .list-navi_global a:hover span {
  opacity: 0.5;
}

footer .bottom-area .navi-area .navi-box .list-navi_global a:before {
  content: "|";
  font-size: 13px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

footer .bottom-area .navi-area .navi-box .list-navi_global a span {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  font-family: "akrobat";
}

footer .bottom-area .navi-area .navi-box .list-navi_global li:last-child a:before {
  display: none;
}

footer .bottom-area .sns-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 60px;
}

footer .bottom-area .sns-box .list-sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .bottom-area .sns-box .list-sns li {
  margin-right: 18px;
}

footer .bottom-area .sns-box .list-sns li.fb {
  width: 12px;
  height: 20px;
}

footer .bottom-area .sns-box .list-sns li.tw {
  width: 20px;
  height: 16px;
}

footer .bottom-area .sns-box .list-sns li.ins {
  width: 19px;
  height: 19px;
}

footer .bottom-area .sns-box .list-sns li.wt {
  width: 24px;
  height: 17px;
}

footer .bottom-area .sns-box .list-sns li img {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

footer .bottom-area .sns-box .list-sns li:hover img {
  -webkit-transform: rotateY(-360deg);
          transform: rotateY(-360deg);
}

footer .bottom-area .sns-box .copy {
  color: #fff;
  font-size: 12px;
  font-family: "akrobat";
  font-weight: bold;
  letter-spacing: 1.5px;
}

footer .to_top-areaPC {
  position: absolute;
  right: 53px;
  bottom: 86px;
}

footer .to_top-areaPC a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 10px;
}

footer .to_top-areaPC a:before {
  content: "";
  background: url(/assets/img/arrow-footer-to_top_PC.webp) no-repeat;
  width: 11px;
  height: 88px;
  background-size: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: -130px;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

footer .to_top-areaPC a:hover {
  opacity: 0.5;
}

footer .to_top-areaPC span {
  display: block;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  font-family: "akrobat";
  letter-spacing: 2.5px;
  font-weight: bold;
}

/* ------ main active ---- */
main.active .section-head:before {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

main.active .section-head .text-area {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

main.active .section-head .black-area .section-inner:after, main.active .section-head .black-area .section-inner:before {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

h1 {
  position: absolute;
  right: 0;
  top: 40px;
  font-size: 11px;
  color: #888888;
  letter-spacing: 1.83px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  font-weight: normal;
}

.section-head {
  padding-top: 140px;
  position: relative;
}

.section-head:before {
  content: "";
  width: 681px;
  height: 261px;
  background-size: 100%;
  position: absolute;
  top: 310px;
  right: 0;
  z-index: 10;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: opacity 0.5s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.section-head .text-area {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.7s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.5s;
  transition: opacity 0.7s cubic-bezier(0.79, 0.17, 0.15, 0.96) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.section-head .black-area {
  position: relative;
  height: 325px;
}

.section-head .black-area .section-inner {
  position: relative;
  height: 100%;
  padding: 91px 0 36px 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.section-head .black-area .section-inner:after {
  content: "";
  position: absolute;
  width: 2090px;
  height: 325px;
  background-color: #111;
  position: absolute;
  left: -1150px;
  top: 0;
  z-index: -10;
  -webkit-transform: translateX(-100vw);
          transform: translateX(-100vw);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: -webkit-transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96), -webkit-transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
}

.section-head .black-area .section-inner:before {
  content: "";
  background: url(/assets/img/bg-singleHead-tri.webp) no-repeat;
  width: 83px;
  height: 325px;
  position: absolute;
  background-size: 100%;
  left: 937px;
  top: 0;
  -webkit-transform: translateX(-100vw);
          transform: translateX(-100vw);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: -webkit-transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96), -webkit-transform 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
}

.section-head h2 {
  color: #fff;
  font-size: 50px;
  font-family: "Akrobat";
  letter-spacing: 6.25px;
}

.section-head .text-mini {
  color: #fff;
  font-size: 16px;
  margin-top: 26px;
}

.section-head .text-breadcrumbs {
  margin-top: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.section-head .text-breadcrumbs.position_change {
  margin-top: 29px;
}

.section-head .text-breadcrumbs a {
  color: #888888;
  font-size: 12px;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.section-head .text-breadcrumbs a:hover {
  opacity: 0.5;
}

.section-head .text-breadcrumbs span {
  font-size: 12px;
  margin: 0 0.5em;
  color: #888888;
}

.section-head .pict-area {
  position: absolute;
  top: 171px;
  right: 0;
  width: 681px;
}

.section-head .pict-area img {
  width: 100%;
  height: 100%;
}

/*----- service list style ----- */
.list-service {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.list-service li {
  position: relative;
  width: 560px;
  height: 360px;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 82px;
}

.list-service li:before {
  content: "";
  background: url(/assets/img/index/img-service_workship.webp) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100%;
  width: 302px;
  height: 100%;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}

.list-service li a {
  color: #111;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.list-service li a:before {
  /* content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  z-index: 50;
  left: 32px;
  bottom: 32px;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  left: initial;
  right: 32px; */
}

.list-service li a:after {
  content: "";
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
}

.list-service li.workship .title-service {
  width: 197px;
}

.list-service li.workship .title-service img {
  width: 100%;
  height: 100%;
}

.list-service li.workship:before {
  content: "";
  background: url(/assets/img/index/img-service_workship.webp) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100%;
  width: 301px;
  height: 100%;
}

.list-service li.saas:before {
  background: url(/assets/img/index/img-service_leadgrid.jpg) no-repeat;
  background-size: cover;
}

.list-service li.creative:before {
  background: url(/assets/img/index/img-service_creative.jpg) no-repeat;
  background-size: cover;
}

.list-service li.system:before {
  background: url(/assets/img/index/img-service_system.jpg) no-repeat;
  background-size: cover;
}

.list-service li.marketing:before {
  background: url(/assets/img/index/img-service_marketing.jpg) no-repeat;
  background-size: cover;
}

.list-service li.media:before {
  background: url(/assets/img/index/img-service_media.webp) no-repeat;
  background-size: cover;
}

.list-service li.consulting {
  margin-top: -250px;
  margin-left: 640px;
}

.list-service li.consulting:before {
  background: url(/assets/img/index/img-service_consulting.webp) no-repeat;
  background-size: 100%;
}

@-webkit-keyframes pagePaper {
  0% {
    -webkit-transform: rotate(15deg) translateX(0);
            transform: rotate(15deg) translateX(0);
  }
  50% {
    -webkit-transform: rotate(15deg) translateX(-10px);
            transform: rotate(15deg) translateX(-10px);
  }
  100% {
    -webkit-transform: rotate(15deg) translateX(0);
            transform: rotate(15deg) translateX(0);
  }
}

@keyframes pagePaper {
  0% {
    -webkit-transform: rotate(15deg) translateX(0);
            transform: rotate(15deg) translateX(0);
  }
  50% {
    -webkit-transform: rotate(15deg) translateX(-10px);
            transform: rotate(15deg) translateX(-10px);
  }
  100% {
    -webkit-transform: rotate(15deg) translateX(0);
            transform: rotate(15deg) translateX(0);
  }
}

.list-service li:after {
  content: "";
  background-color: #fff;
  width: 556px;
  height: 120%;
  z-index: 10;
  position: absolute;
  right: -240px;
  top: 20px;
  -webkit-transform: rotate(15deg) translateX(0);
          transform: rotate(15deg) translateX(0);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
  transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
  transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
  transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s, -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
}

.list-service li:nth-child(5n) {
  margin-bottom: 0;
}

.list-service li:nth-child(even) {
  margin-top: -250px;
}

.list-service li:hover:before {
  /* -webkit-transform: scale(1.1); */
          /* transform: scale(1.1); */
}

.list-service li:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.list-service li:hover:after {
  /* -webkit-animation: pagePaper 0.3s ease-out 0s; */
          /* animation: pagePaper 0.3s ease-out 0s; */
}

.list-service .white-box {
  position: relative;
  height: 100%;
  padding-left: 280px;
  z-index: 50;
}

.list-service .text-mini {
  font-size: 12px;
  font-weight: bold;
  padding: 38px 0 30px 32px;
}

.list-service .title-service {
  padding-left: 32px;
  font-size: 32px;
  font-family: "akrobat";
  letter-spacing: 4px;
}

.list-service .text-detail {
  width: 240px;
  font-size: 14px;
  padding-top: 28px;
  line-height: 28px;
}

/*----- blog-list ------*/
.list-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 0.6s ease 0.4s;
  transition: opacity 0.6s ease 0.4s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.list-blog li {
  width: 360px;
  height: 400px;
  background-color: #fff;
  margin-bottom: 60px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
}

.list-blog li:hover img {
  /* -webkit-transform: scale(1.1); */
          /* transform: scale(1.1); */
}

.list-blog li:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.list-blog li .thumb {
  overflow: hidden;
}

.list-blog li img {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.list-blog li a {
  position: relative;
  text-decoration: none;
  color: #111;
  width: 100%;
  height: 100%;
  display: block;
}

.list-blog li a:before {
  content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  z-index: 50;
  left: 32px;
  bottom: 32px;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  left: initial;
  right: 32px;
  bottom: 37px;
}

.list-blog li:nth-child(n + 4) {
  margin-bottom: 0;
}

.list-blog .detail-box {
  margin: 0 32px;
}

.list-blog .text-content {
  margin: 24px 0;
  font-size: 14px;
  line-height: 21px;
}

.list-blog .state-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.list-blog .date {
  color: #888888;
  font-size: 12px;
  margin-right: 32px;
  font-family: "akrobat";
  letter-spacing: 1.5px;
}

.list-blog .category {
  color: #888888;
  font-size: 12px;
  font-family: "akrobat";
  letter-spacing: 1.5px;
}

.pagenation-area .list-pagenation {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pagenation-area .list-pagenation li {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: #111;
  color: #fff;
  line-height: 60px;
  text-align: center;
  margin: 0 20px;
}

.pagenation-area .list-pagenation li.active {
  background-color: #fff;
}

.pagenation-area .list-pagenation li.active a {
  color: #111;
}

.pagenation-area .list-pagenation li.btn-prev img, .pagenation-area .list-pagenation li.btn-next img {
  width: 8px;
  height: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.pagenation-area .list-pagenation a {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  text-decoration: none;
}

/*----- section-link / about list style ----- */
.section-link.isView .list-about {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-link.isView .list-about a:after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.section-link .list-about {
  -webkit-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.section-link .list-about a:after {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}

.list-about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    justify-content: space-around;


  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.list-about li {
  position: relative;
  width: 360px;
  height: 240px;
  overflow: hidden;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.12);
}

.list-about li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100%;
  width: 360px;
  height: 100%;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.list-about li.mission:before {
  background: url(/assets/img/index/thumb-about_mission.webp) no-repeat;
  background-size: 100%;
}

.list-about li.recruit:before {
  background: url(/assets/img/thumb-link_recruit.jpg) no-repeat;
  background-size: cover;
}

.list-about li.company:before {
  background: url(/assets/img/thumb-link_company.jpg) no-repeat;
  background-size: 100%;
}

.list-about li.office:before {
  background: url(/assets/img/thumb-link_office.webp) no-repeat;
  background-size: 100%;
}

.list-about li:after {
  content: "";
  background-color: #fff;
  width: 235px;
  height: 130%;
  z-index: 10;
  position: absolute;
  left: -30px;
  top: -37px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

.list-about li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #111;
  text-decoration: none;
  overflow: hidden;
}

.list-about li a:before {
  content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  z-index: 50;
  left: 32px;
  bottom: 32px;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}

.list-about li a:after {
  content: "";
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
  transition: -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s, -webkit-transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 1.2s;
}

.list-about li .white-box {
  position: relative;
  height: 100%;
  padding-left: 32px;
  z-index: 50;
}

.list-about li .text-mini {
  font-size: 13px;
  margin-bottom: 32px;
  padding-top: 48px;
  font-weight: bold;
}

.list-about li .title-about {
  font-size: 32px;
  font-weight: bold;
  font-family: "akrobat";
  letter-spacing: 4px;
}

.list-about li:hover:before {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.list-about li:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

header .logo-main {
  width: 5vw;
}
@media screen and (max-width: 1200px) {
  .section-inner {
    width: 100%;
    padding: 0 8.3vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  header {
    height: auto;
  }
  header .section-inner.changeColor {
    -webkit-transform: translateY(-1vw);
            transform: translateY(-1vw);
  }
  header .section-inner.changeColor .header-area {
    padding-top: 4vw;
  }
  header .logo-main {
    width: 5vw;
  }
  header .logo-main img {
    width: 100%;
    height: 100%;
  }
  header nav .navi-global li {
    margin-right: 2vw;
    padding-bottom: 1.875vw;
  }
  header nav .navi-global li a {
    font-size: 0.97222vw;
    letter-spacing: 0.2vw;
  }
  header .header-area {
    padding-top: 2.55vw;
  }
  header .menu-modal-area .white-box {
    height: 8.33vw;
  }
  header .menu-modal-area .menu-modal {
    height: 4.166vw;
  }
  header .menu-modal-area .menu-modal li:before {
    line-height: 4.16vw;
  }
  header .menu-modal-area .menu-modal li a {
    font-size: 0.76389vw;
    margin: 0 1.527vw;
  }
  h1 {
    font-size: 0.76389vw;
    top: 2.77vw;
    right: 8.3vw;
  }
  .section-head {
    padding-top: 9.72vw;
  }
  .section-head:before {
    width: 47.2vw;
    height: 18.1vw;
    top: 21.52vw;
  }
  .section-head .black-area {
    height: 22.56vw;
  }
  .section-head .black-area .section-inner {
    padding: 6.3vw 8.3vw 2.5vw 8.3vw;
  }
  .section-head .black-area .section-inner:before {
    width: 5.76vw;
    height: 22.56vw;
    left: 65vw;
  }
  .section-head .black-area .section-inner:after {
    width: 145vw;
    height: 22.56vw;
    left: -79.8vw;
  }
  .section-head h2 {
    font-size: 3.47222vw;
    letter-spacing: 0.4vw;
  }
  .section-head .text-mini {
    font-size: 1.11111vw;
    margin-top: 1.8vw;
  }
  .section-head .text-breadcrumbs {
    margin-top: 6.94vw;
  }
  .section-head .text-breadcrumbs a {
    font-size: 0.83333vw;
  }
  .section-head .text-breadcrumbs span {
    font-size: 0.83333vw;
  }
  .list-service li {
    width: 38.8vw;
    height: 25vw;
    margin-bottom: 5.69vw;
  }
  .list-service li.consulting {
    margin-top: -17.3vw;
    margin-left: 52.72%;
  }
  .list-service li:nth-child(even) {
    margin-top: -17.3vw;
  }
  .list-service li:before {
    width: 20.8vw;
  }
  .list-service li:after {
    width: 38.6vw;
    right: -16.6vw;
    top: 1.38vw;
  }
  .list-service li.workship:before {
    width: 20.8vw;
  }
  .list-service li.workship .title-service {
    width: 13.6vw;
    padding-left: 2.22vw;
  }
  .list-service li a:before {
    width: 2.2vw;
    height: 0.76vw;
    bottom: 2.2vw;
    right: 2.2vw;
  }
  .list-service .title-service {
    padding-left: 2.22vw;
    font-size: 2.22vw;
    letter-spacing: 0.27vw;
  }
  .list-service .white-box {
    padding-left: 19.4vw;
  }
  .list-service .text-mini {
    font-size: 0.83vw;
    padding: 2.63vw 0 2vw 2.22vw;
  }
  .list-service .text-detail {
    width: 16.6vw;
    font-size: 0.97vw;
    padding-top: 1.94vw;
    line-height: 1.94vw;
  }
  .list-about li {
    width: 25vw;
    height: 16.6vw;
  }
  .list-about li a:before {
    width: 2.2vw;
    height: 0.76vw;
    left: 2.2vw;
    bottom: 2.2vw;
  }
  .list-about li:before {
    width: 25vw;
  }
  .list-about li:after {
    width: 16.3vw;
    left: -2vw;
    top: -2.56vw;
  }
  .list-about li .white-box {
    padding-left: 2.22vw;
  }
  .list-about li .text-mini {
    font-size: 0.9vw;
    margin-bottom: 2.22vw;
    padding-top: 3.33vw;
  }
  .list-about li .title-about {
    font-size: 2.22vw;
    letter-spacing: 0.27vw;
  }
  .list-blog li {
    width: 25vw;
    height: 27.7vw;
    margin-bottom: 4.16vw;
  }
  .list-blog li a:before {
    width: 2.2vw;
    height: 0.76vw;
    bottom: 2.5vw;
    right: 2.2vw;
  }
  .list-blog .detail-box {
    margin: 0 2.22vw;
  }
  .list-blog .text-content {
    margin: 1.66vw 0;
    font-size: 0.97vw;
    line-height: 1.45vw;
  }
  .list-blog .date {
    font-size: 0.83vw;
    margin-right: 2.22vw;
  }
  .list-blog .category {
    font-size: 0.83vw;
  }
  .pagenation-area .list-pagenation li {
    width: 4.16vw;
    height: 4.16vw;
    line-height: 4.16vw;
    margin: 0 1.38vw;
    font-size: 0.97222vw;
  }
  .pagenation-area .list-pagenation li.btn-prev img, .pagenation-area .list-pagenation li.btn-next img {
    width: 0.55556vw;
    height: 0.97222vw;
  }
  .error404 .section-error .section-inner:before {
    top: -14.8vw;
    left: -8vw;
  }
  .error404 .section-error h2:before {
    left: 12.88vw;
  }
  /*------------- footer ------------- */
  footer .top-area {
    height: 25vw;
    padding: 5vw 0;
  }
  footer .top-area .card-area {
    width: 38.88889vw;
    height: 15vw;
  }
  footer .top-area .card-area a {
    padding: 2.22vw;
  }
  footer .top-area .card-area a:before {
    width: 2.22222vw;
    height: 0.69444vw;
    right: 2.08333vw;
    bottom: 2.84722vw;
  }
  footer .top-area .card-area .text-cat {
    font-size: 0.90278vw;
  }
  footer .top-area .card-area .title {
    font-size: 2.22222vw;
    letter-spacing: 0.27778vw;
    margin: 1.666vw 0;
  }
  footer .top-area .card-area .text-content {
    font-size: 0.97222vw;
    line-height: 1.94444vw;
    width: 30.55556vw;
  }
  footer .bottom-area {
    padding: 4.72vw 0 3.68vw 0;
  }
  footer .bottom-area .logo-box {
    margin-bottom: 4.86111vw;
  }
  footer .bottom-area .logo-box:before, footer .bottom-area .logo-box:after {
    width: 0.06944vw;
    height: 3.88889vw;
  }
  footer .bottom-area .logo-box h2 {
    width: 5.27778vw;
    padding-right: 2.5vw;
  }
  footer .bottom-area .logo-box h2:before {
    width: 0.06944vw;
    height: 3.88889vw;
  }
  footer .bottom-area .logo-box h2 img {
    width: 100%;
  }
  footer .bottom-area .logo-box .text {
    font-size: 0.83333vw;
    line-height: 1.5vw;
    margin-left: 2.5vw;
  }
  footer .bottom-area .navi-area .navi-box {
    margin-bottom: 1.66667vw;
  }
  footer .bottom-area .navi-area .navi-box:nth-child(2) {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  footer .bottom-area .navi-area .navi-box .navi-name {
    width: 15.27778vw;
    margin-right: 2.77778vw;
    font-size: 0.97222vw;
    letter-spacing: 0.12153vw;
  }
  footer .bottom-area .navi-area .navi-box .navi-name:before {
    width: 8.33333vw;
    height: 0.06944vw;
    top: 0.34722vw;
  }
  footer .bottom-area .navi-area .navi-box .navi-title {
    font-size: 0.83333vw;
    width: 10.41667vw;
  }
  footer .bottom-area .navi-area .navi-box .list-navi a {
    font-size: 0.83333vw;
    padding-right: 0.69444vw;
    margin-right: 0.34722vw;
  }
  footer .bottom-area .navi-area .navi-box .list-navi a:before {
    font-size: 0.83333vw;
  }
  footer .bottom-area .navi-area .navi-box .list-navi_global a {
    font-size: 0.90278vw;
    letter-spacing: 0.1125vw;
    padding-right: 0.69444vw;
    margin-right: 0.34722vw;
  }
  footer .bottom-area .navi-area .navi-box .list-navi_global a:before {
    font-size: 0.90278vw;
  }
  footer .bottom-area .sns-box {
    margin-top: 4.16667vw;
  }
  footer .bottom-area .sns-box .list-sns li.fb {
    width: 0.83333vw;
    height: 1.38889vw;
  }
  footer .bottom-area .sns-box .list-sns li.tw {
    width: 1.38889vw;
    height: 1.11111vw;
  }
  footer .bottom-area .sns-box .list-sns li.ins {
    width: 1.31944vw;
    height: 1.31944vw;
  }
  footer .bottom-area .sns-box .list-sns li.wt {
    width: 1.66667vw;
    height: 1.18056vw;
  }
  footer .bottom-area .sns-box .copy {
    font-size: 0.83333vw;
    letter-spacing: 0.10417vw;
  }
}

@media screen and (max-width: 750px) {
  .page_title {
    display: none;
  }
  .sp-on {
    display: block;
  }
  .sp-none {
    display: none !important;
  }
  img {
    width: 100%;
  }
  .section-inner {
    padding: 0 4.8vw;
  }
  .transition-area {
    width: 150vw;
    margin-left: -112vw;
  }
  .error404 .breadcrumbs {
    display: none;
  }
  .error404 .section-head {
    margin-top: 14.93vw;
  }
  .error404 .section-error {
    margin-top: 45.33333vw;
    padding-bottom: 0;
  }
  .error404 .section-error .text-box {
    width: 100%;
  }
  .error404 .section-error .text-box .text {
    font-size: 4.26667vw;
  }
  .error404 .section-error .text-box .text-content {
    font-size: 4vw;
    line-height: 6.93333vw;
    text-align: left;
  }
  .error404 .section-error h2 {
    padding-left: 0;
  }
  .error404 .section-error h2:before {
    left: 22vw;
  }
  header {
    top: 6.4vw;
    /*----- humberger content -------- */
  }
  header .section-inner.changeColor {
    -webkit-transform: none;
            transform: none;
  }
  header .section-inner.changeColor .header-area {
    padding-top: 0;
  }
  header .header-area {
    padding-top: 0;
    display: block;
    /* width: 40px; */
  }
  header .logo-main {
    width: 15.9vw;
    padding-top: 1.5vw;
  }
  header .logo-main img {
    width: 100%;
    height: 100%;
  }
  header nav {
    display: none;
  }
  header .humberger-content {
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #111;
    z-index: 400;
    padding: 11.4vw 11.4vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transform: translateX(101vw);
            transform: translateX(101vw);
  }
  header .humberger-content nav {
    display: block;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    opacity: 0;
  }
  header .humberger-content li {
    margin-bottom: 12vw;
  }
  header .humberger-content li a {
    color: #fff;
    font-family: "akrobat";
    text-decoration: none;
    letter-spacing: 0.6vw;
    font-size: 7.46667vw;
  }
  header .humberger-content .underlayer {
    margin-top: 5.3vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  header .humberger-content .underlayer li {
    margin-bottom: 5.3vw;
  }
  header .humberger-content .underlayer li a {
    position: relative;
    color: #888888;
    padding: 0 5vw;
    font-size: 3.2vw;
  }
  header .humberger-content .underlayer li.mb0 {
    margin-bottom: 0;
  }
  header .humberger-content .underlayer li:last-child a:before {
    display: none;
  }
  header .humberger-content .underlayer li:nth-child(odd) a:before {
    content: "/";
    color: #888888;
    position: absolute;
    right: -1.2vw;
    top: 0.5vw;
    font-size: 3.5vw;
  }
  header .humberger-btn {
    position: fixed;
    top: 6.4vw;
    right: 4.8vw;
    width: 6.66vw;
    overflow: hidden;
    z-index: 500;
  }
  header .humberger-btn.changeColor span {
    background-color: #111;
  }
  header .humberger-btn span {
    display: block;
    width: 100%;
    height: 0.53vw;
    background-color: #111;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
    transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
    transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
    transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995), -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995);
    -webkit-transition-property: background-color, -webkit-transform;
    transition-property: background-color, -webkit-transform;
    transition-property: transform, background-color;
    transition-property: transform, background-color, -webkit-transform;
  }
  header .humberger-btn span:nth-child(1) {
    margin-bottom: 2.13vw;
  }
  header .humberger-btn span:nth-child(2) {
    margin-bottom: 2.13vw;
  }
  header .humberger-btn.active span {
    background-color: #fff;
  }
  header .humberger-btn.active span:nth-child(2) {
    -webkit-transform: translateX(2.6vw);
            transform: translateX(2.6vw);
  }
  header .humberger-btn.active span:nth-child(3) {
    -webkit-transform: translateX(5.4vw);
            transform: translateX(5.4vw);
  }
  .breadcrumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 6.4vw;
    line-height: 6.4vw;
    padding: 0 4.8vw;
    margin-top: 16.93vw;
    background-color: #f4f4f4;
    overflow-x: scroll;
    white-space: pre;
  }
  .breadcrumbs a {
    color: #888888;
    font-size: 12px;
    text-decoration: none;
    font-size: 2.66667vw;
  }
  .breadcrumbs span {
    color: #888888;
    font-size: 2.66667vw;
    margin: 0 0.5em;
  }
  .section-head {
    padding-top: 0;
    background-color: #111;
  }
  .section-head:before {
    width: 74.6vw;
    height: 30.1vw;
    top: 29.3vw;
  }
  .section-head .black-area {
    height: 42.6vw;
  }
  .section-head .black-area .section-inner {
    padding: 11.7vw 4.8vw 0 4.8vw;
  }
  .section-head .black-area .section-inner:before, .section-head .black-area .section-inner:after {
    display: none;
  }
  .section-head h2 {
    font-size: 6.93333vw;
    letter-spacing: 0.8vw;
  }
  .section-head .text-mini {
    font-size: 3.2vw;
    margin-top: 3.2vw;
  }
  .list-service {
    display: initial;
  }
  .list-service li {
    width: 100%;
    height: 62.4vw;
    height: 80.8vw;
    margin-bottom: 8vw;
    background-color: #fff;
  }
  .list-service li:nth-child(even) {
    margin-top: 0;
  }
  .list-service li:nth-child(3n) {
    margin-bottom: 8vw;
  }
  .list-service li.consulting {
    margin-top: 0;
    margin-left: 0;
  }
  .list-service li:before {
    width: 34.66667vw;
    height: 34.66667vw;
  }
  .list-service li:after {
    width: 37.86667vw;
    right: 28vw;
    top: -9vw;
  }
  .list-service li .title-box {
    height: 34.66667vw;
    border-bottom: solid 2px #e9e9e9;
  }
  .list-service li .white-box {
    padding: 5.86vw;
    padding: 0;
  }
  .list-service li.workship:before {
    width: 34.66667vw;
    height: 34.66667vw;
  }
  .list-service li.workship .title-service {
    padding-left: 37.33333vw;
    width: 35.4vw;
  }
  .list-service li a:before {
    width: 8.53vw;
    height: 2.9vw;
    left: initial;
    right: 5.86vw;
    bottom: 5.86vw;
  }
  .list-service .title-service {
    padding-left: 37.33333vw;
    font-size: 5.86vw;
  }
  .list-service .text-mini {
    padding-top: 8vw;
    padding-left: 37.33333vw;
    font-size: 3.2vw;
  }
  .list-service .text-detail {
    width: 100%;
    font-size: 3.2vw;
    line-height: 5.86vw;
    padding: 5.333vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .list-about {
    display: block;
  }
  .list-about li {
    width: 100%;
    height: 40.8vw;
    margin-bottom: 7.46vw;
  }
  .list-about li:after {
    width: 53.3vw;
    height: 55vw;
    left: -4vw;
    top: -8.56vw;
  }
  .list-about li:before {
    width: 100%;
  }
  .list-about li .white-box {
    padding-left: 5.86vw;
  }
  .list-about li .text-mini {
    font-size: 3.2vw;
    padding-top: 6.66vw;
    margin-bottom: 3.2vw;
  }
  .list-about li .title-about {
    font-size: 5.86667vw;
    letter-spacing: 0.9vw;
  }
  .list-about li a:before {
    width: 8.53vw;
    height: 2.66vw;
    bottom: 6.66vw;
    left: 5.86vw;
  }
  .list-blog {
    display: initial;
  }
  .list-blog li {
    width: 100%;
    height: 94.9vw;
    margin-bottom: 7.2vw;
  }
  .list-blog li a:before {
    width: 8.53vw;
    height: 0;
    padding-top: 4%;
    bottom: 4.8vw;
    right: 4.8vw;
  }
  .list-blog li:nth-child(n + 4) {
    display: none;
  }
  .list-blog .detail-box {
    margin: 0 6.66vw;
  }
  .list-blog .text-content {
    margin: 5.6vw 0 2.93vw 0;
    font-size: 3.46667vw;
    line-height: 5.6vw;
  }
  .list-blog .date {
    font-size: 3.2vw;
  }
  .list-blog .category {
    font-size: 3.2vw;
  }
  .pagenation-area {
    position: relative;
    padding-top: 24.5vw;
  }
  .pagenation-area:before {
    content: "";
    background: url(/assets/img/works/icon-dot.webp) no-repeat center center;
    width: 4vw;
    height: 12vw;
    background-size: contain;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 7.46vw;
  }
  .pagenation-area .list-pagenation li {
    width: 19.2vw;
    height: 19.2vw;
    line-height: 19.2vw;
    font-size: 3.73333vw;
  }
  .pagenation-area .list-pagenation li.btn-prev img, .pagenation-area .list-pagenation li.btn-next img {
    width: 2.13333vw;
    height: 3.73333vw;
  }
  footer {
    margin-top: 10.66667vw;
  }
  footer .to_top-area {
    width: 15.46667vw;
    height: 15.46667vw;
    margin: 0 auto;
    margin-bottom: 9.6vw;
  }
  footer .to_top-area a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #111;
    font-size: 2.66667vw;
    font-family: "akrobat";
    letter-spacing: 0.66667vw;
    text-decoration: none;
    padding-top: 12vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  footer .to_top-area a:before {
    content: "";
    background: url(/assets/img/arrow-footer-to_top.webp) no-repeat;
    width: 2.66667vw;
    height: 9.6vw;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 0;
    background-size: 100%;
  }
  footer .top-area {
    height: auto;
    padding: 10.66vw 4.8vw;
  }
  footer .top-area .section-inner {
    display: block;
  }
  footer .top-area .card-area {
    width: 100%;
    height: 50.66667vw;
    margin-bottom: 4.8vw;
  }
  footer .top-area .card-area:last-child {
    margin-bottom: 0;
  }
  footer .top-area .card-area a {
    padding: 6.4vw 5.6vw;
  }
  footer .top-area .card-area a:before {
    width: 8.53333vw;
    height: 4.26667vw;
    right: 8vw;
    bottom: 5.33333vw;
  }
  footer .top-area .card-area .text-cat {
    font-size: 3.2vw;
    letter-spacing: 0.26667vw;
  }
  footer .top-area .card-area .title {
    font-size: 5.86667vw;
    letter-spacing: 0.90667vw;
    line-height: 6.93333vw;
  }
  footer .top-area .card-area .text-content {
    width: 100%;
    font-size: 3.2vw;
    line-height: 5.6vw;
  }
  footer .bottom-area .section-inner {
    padding: 0;
  }
  footer .bottom-area .logo-box {
    display: block;
    margin-bottom: 13.6vw;
    padding: 0 4.8vw;
  }
  footer .bottom-area .logo-box:before, footer .bottom-area .logo-box:after {
    display: none;
  }
  footer .bottom-area .logo-box h2 {
    width: 13.6vw;
    margin-bottom: 4.8vw;
  }
  footer .bottom-area .logo-box h2:before {
    display: none;
  }
  footer .bottom-area .logo-box .text {
    font-size: 2.93333vw;
    line-height: 5.6vw;
    letter-spacing: 0.26667vw;
    margin-left: 0;
  }
  footer .bottom-area .navi-area .navi-box {
    display: block;
  }
  footer .bottom-area .navi-area .navi-box:first-child {
    margin-bottom: 16vw;
  }
  footer .bottom-area .navi-area .navi-box .navi-name {
    width: 100%;
    margin-right: 0;
    font-size: 5.86667vw;
    letter-spacing: 0.8vw;
    padding-left: 4.8vw;
    margin-bottom: 2.2vw;
  }
  footer .bottom-area .navi-area .navi-box .navi-name:before {
    display: none;
  }
  footer .bottom-area .navi-area .navi-box .navi-name.grey {
    color: #888888;
    border-bottom: solid 1px #292929;
    padding-bottom: 3.2vw;
    margin-bottom: 6.4vw;
  }
  footer .bottom-area .navi-area .navi-box .navi-title {
    position: relative;
    width: 100%;
    font-size: 3.73333vw;
    letter-spacing: 0.26667vw;
    height: 20vw;
    line-height: 20vw;
    background-color: #000;
    padding-left: 4.8vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  footer .bottom-area .navi-area .navi-box .navi-title.active span.line2 {
    -webkit-transform: translateY(20px) rotate(90deg);
            transform: translateY(20px) rotate(90deg);
    opacity: 0;
  }
  footer .bottom-area .navi-area .navi-box .navi-title span {
    display: block;
    position: absolute;
    width: 3.46667vw;
    height: 0.26667vw;
    background-color: #fff;
  }
  footer .bottom-area .navi-area .navi-box .navi-title span.line1 {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 4.8vw;
  }
  footer .bottom-area .navi-area .navi-box .navi-title span.line2 {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(90deg);
            transform: translateY(-50%) rotate(90deg);
    right: 4.8vw;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
    transition: -webkit-transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
    transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
    transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96), -webkit-transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
  }
  footer .bottom-area .navi-area .navi-box .item {
    display: block;
    margin-bottom: 0;
  }
  footer .bottom-area .navi-area .navi-box .item:last-child {
    margin-bottom: 0;
  }
  footer .bottom-area .navi-area .navi-box .list-navi {
    display: none;
  }
  footer .bottom-area .navi-area .navi-box .list-navi li {
    border-bottom: solid 1px #292929;
    margin: 0 4.8vw;
  }
  footer .bottom-area .navi-area .navi-box .list-navi li:last-child {
    border-bottom: none;
  }
  footer .bottom-area .navi-area .navi-box .list-navi a {
    width: 100%;
    height: 12.8vw;
    line-height: 12.8vw;
    font-size: 3.2vw;
    letter-spacing: 0.21333vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
  }
  footer .bottom-area .navi-area .navi-box .list-navi a:before {
    display: none;
  }
  footer .bottom-area .navi-area .navi-box .list-navi_global {
    padding: 0 4.8vw;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  footer .bottom-area .navi-area .navi-box .list-navi_global li {
    margin-bottom: 4.8vw;
  }
  footer .bottom-area .navi-area .navi-box .list-navi_global a {
    font-size: 4.8vw;
    letter-spacing: 0.65333vw;
    padding-right: 3vw;
    margin-right: 3vw;
  }
  footer .bottom-area .navi-area .navi-box .list-navi_global a:before {
    content: "";
    border-right: solid 1px #fff;
    width: 2px;
    height: 100%;
  }
  footer .bottom-area .sns-box {
    display: block;
    margin-top: 10.66667vw;
  }
  footer .bottom-area .sns-box .list-sns {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 17.6vw;
  }
  footer .bottom-area .sns-box .list-sns li {
    margin: 0 6.66vw;
  }
  footer .bottom-area .sns-box .list-sns li.fb {
    width: 2.66667vw;
    height: 4.26667vw;
  }
  footer .bottom-area .sns-box .list-sns li.tw {
    width: 5.33333vw;
    height: 4.53333vw;
  }
  footer .bottom-area .sns-box .list-sns li.ins {
    width: 4.8vw;
    height: 4.26667vw;
  }
  footer .bottom-area .sns-box .list-sns li.wt {
    width: 6.4vw;
    height: 4.53333vw;
  }
  footer .bottom-area .sns-box .copy {
    font-size: 3.2vw;
    letter-spacing: 0.4vw;
    text-align: center;
    padding-bottom: 10.66667vw;
  }
}

.section-summary {
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.section-summary.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.section-summary.isView .section-inner h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-summary.isView .section-inner h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-summary.isTop {
  padding-top: 85px;
  padding-bottom: 80px;
  margin-top: 200px;
  margin-bottom: 80px;
}

.section-summary .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -100px;
  left: 0;
}

@media screen and (max-width: 1200px) {
  .section-summary .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .section-summary .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.section-summary .section-inner h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: .56px;
}

.section-summary .section-inner h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .section-summary .section-inner h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .section-summary .section-inner h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.section-summary .section-inner h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  left: -46px;
  top: -59px;
}

@media screen and (max-width: 1200px) {
  .section-summary .section-inner h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .section-summary .section-inner h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.section-summary .section-inner h2 span {
  line-height: 1.5;
}

.section-summary .section-inner .text-area .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 200%;
  letter-spacing: .6px;
  margin-bottom: 35px;
}

.section-summary .section-inner .text-area .text-detail {
  font-size: 14px;
  line-height: 200%;
}

.section-summary .section-inner .text-area .text-detail a {
  color: #4F548F;
  text-decoration: underline;
}

@media screen and (max-width: 1200px) {
  .section-summary {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .section-summary.isTop {
    margin-top: 19.79vw;
    margin-bottom: 5.55vw;
  }
  .section-summary .section-inner h2 {
    font-size: 2.15278vw;
  }
  .section-summary .section-inner .text-area .title {
    font-size: 1.04167vw;
    font-weight: bold;
    margin-bottom: 2.43vw;
  }
  .section-summary .section-inner .text-area .text-detail {
    font-size: 1.04167vw;
  }
}

@media screen and (max-width: 750px) {
  .section-summary {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .section-summary.isTop {
    margin-top: 45.86vw;
    padding-top: 17vw;
    padding-bottom: 8.53vw;
  }
  .section-summary .section-inner h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
  }
  .section-summary .section-inner .text-area .title {
    font-size: 3.46667vw;
    font-weight: bold;
    margin-bottom: 5.33vw;
  }
  .section-summary .section-inner .text-area .text-detail {
    font-size: 3.46667vw;
  }
}

.section-documentList {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.section-documentList.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.section-documentList.isView .section-inner h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-documentList.isView .section-inner h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-documentList.isView .section-inner .s-documentList_list {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-documentList.isView .section-inner .section-inner_ctaArea {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-documentList.isTop {
  padding-top: 85px;
  padding-bottom: 80px;
  margin-top: 200px;
  margin-bottom: 80px;
}

.section-documentList .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: 130px;
}

@media screen and (max-width: 1200px) {
  .section-documentList .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentList .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.section-documentList .section-inner h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: 0.56px;
}

.section-documentList .section-inner h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .section-documentList .section-inner h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentList .section-inner h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.section-documentList .section-inner h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  left: -46px;
  top: -59px;
}

@media screen and (max-width: 1200px) {
  .section-documentList .section-inner h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentList .section-inner h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.section-documentList .section-inner .s-documentList_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.section-documentList .section-inner .s-documentList_list:after {
  content: "";
  display: block;
  height: 0;
  width: 360px;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item {
  width: 360px;
  height: auto;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item:hover img {
  /* -webkit-transform: scale(1.1); */
          /* transform: scale(1.1); */
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemThumb {
  overflow: hidden;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemThumb img {
  width: 100%;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent {
  padding: 20px 30px 40px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .s-documentList_itemTitle {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.56;
  margin: 5px 0;
  letter-spacing: 0.6px;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .s-documentList_itemText {
  margin: 24px 0;
  font-size: 14px;
  line-height: 186%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  min-width: auto;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:hover {
  color: #111;
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a span {
  font-weight: bold;
}

.section-documentList .section-inner .section-inner_ctaArea {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  width: auto;
  min-width: 330px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 80px;
}

.section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover {
  color: #111;
}

.section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.section-documentList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
  width: calc(100% + 20px);
}

@media screen and (max-width: 1200px) {
  .section-documentList {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .section-documentList.isTop {
    margin-top: 19.79vw;
    margin-bottom: 5.55vw;
  }
  .section-documentList .section-inner h2 {
    font-size: 2.15278vw;
  }
  .section-documentList .section-inner .s-documentList_list:after {
    content: "";
    display: block;
    height: 0;
    width: 25vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item {
    width: 25vw;
    height: auto;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent {
    padding: 1.66vw 2.22vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .s-documentList_itemTitle {
    font-size: 1.25vw;
    margin: 0.34vw 0;
    letter-spacing: 0.41vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .s-documentList_itemText {
    margin: 1.66vw 0;
    font-size: 0.97222vw;
    line-height: 186%;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a {
    width: 100%;
  }
}

@media screen and (max-width: 750px) {
  .section-documentList {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .section-documentList.isTop {
    margin-top: 45.86vw;
    padding-top: 17vw;
    padding-bottom: 8.53vw;
  }
  .section-documentList .section-inner h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
  }
  .section-documentList .section-inner .s-documentList_list:after {
    content: "";
    display: none;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item {
    width: 100%;
    height: auto;
    margin-bottom: 7.46vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item:nth-last-of-type(-n + 3) {
    margin-bottom: 7.46vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item:last-child {
    margin-bottom: 0;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent {
    padding: 5.5vw 6.4vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .s-documentList_itemTitle {
    font-size: 4.8vw;
    margin: 2.5vw 0;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .s-documentList_itemText {
    font-size: 3.46667vw;
    margin: 5.5vw 0;
    line-height: 6.93vw;
  }
  .section-documentList .section-inner .s-documentList_list .s-documentList_item .s-documentList_itemContent .list-cta > a {
    width: 100%;
  }
}

.section-documentForm {
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.section-documentForm.isTop {
  padding-top: 85px;
  padding-bottom: 80px;
  margin-top: 180px;
  margin-bottom: 80px;
}

.section-documentForm .section-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.section-documentForm .section-inner .section-innerLeft {
  width: 60%;
}

.section-documentForm .section-inner .section-innerLeft:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -200px;
  left: -100px;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

@media screen and (max-width: 1200px) {
  .section-documentForm .section-inner .section-innerLeft:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentForm .section-inner .section-innerLeft:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.section-documentForm .section-inner .section-innerLeft h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: .56px;
}

.section-documentForm .section-inner .section-innerLeft h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .section-documentForm .section-inner .section-innerLeft h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentForm .section-inner .section-innerLeft h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.section-documentForm .section-inner .section-innerLeft h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-documentForm .section-inner .section-innerLeft h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  left: -46px;
  top: -59px;
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

@media screen and (max-width: 1200px) {
  .section-documentForm .section-inner .section-innerLeft h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentForm .section-inner .section-innerLeft h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_text {
  font-size: 14px;
  line-height: 28px;
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_text a {
  color: #4F548F;
  text-decoration: underline;
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_pict {
  margin-top: 40px;
  width: 100%;
  height: auto;
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_pict img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_agenda {
  margin-top: 30px;
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_agenda .s-documentForm_agendaTitle {
  color: #888888;
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_agenda .s-documentForm_agendaList {
  margin-top: 20px;
  padding-left: 30px;
}

.section-documentForm .section-inner .section-innerLeft .s-documentForm_agenda .s-documentForm_agendaList .s-documentForm_agendaItem {
  list-style-type: disc;
  font-size: 14px;
  line-height: 183%;
  color: #888888;
}

.section-documentForm .section-inner .section-innerRight {
  width: 40%;
  margin-left: 80px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #F4F4F4;
  padding: 30px 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 16px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.required .title:after {
  content: "必須";
  width: 54px;
  height: 20px;
  line-height: 20px;
  margin-left: 20px;
  padding: 4px 16px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: normal;
  background-color: #DF4440;
  border: solid 1px #DF4440;
  border-radius: 2px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box {
  margin-top: 40px;
  display: block;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .check-policy {
  position: relative;
  display: block;
  margin-top: 40px;
  padding-left: 32px;
  line-height: 130%;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .check-policy:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: solid 1px #D0D0D0;
  content: '';
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .check-policy:after {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(45deg) translate(-6px, -6px);
          transform: rotate(45deg) translate(-6px, -6px);
  left: 7px;
  display: block;
  width: 6px;
  height: 12px;
  border-right: 2px solid #7077c1;
  border-bottom: 2px solid #7077c1;
  content: '';
  opacity: 0;
  z-index: 2;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box input {
  display: none;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box .error {
  position: absolute;
  left: 0px;
  bottom: -20px;
  font-size: 12px;
  color: #DA3B38;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box .error + input,
.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box .error + textarea {
  background-color: #FCECEB;
  border: solid 1px #DA3B38;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .title {
  position: relative;
  width: 100%;
  height: 60px;
  font-size: 14px;
  font-weight: bold;
  line-height: 60px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .select {
  width: 100%;
  font-size: 14px;
  line-height: 28px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox ::-webkit-input-placeholder {
  color: #828282;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox ::-moz-placeholder {
  color: #828282;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox :-ms-input-placeholder {
  color: #828282;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox ::-ms-input-placeholder {
  color: #828282;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox ::placeholder {
  color: #828282;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox select, .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox input[type="text"] {
  width: 100%;
  height: 60px;
  font-size: 14px;
  padding-left: 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  border: solid 1px #D0D0D0;
  outline: none;
  background: #fff;
  color: #828282;
  border-radius: 0;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox input[type="file"] {
  display: none;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox label.file {
  position: relative;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #111;
  color: #828282;
  font-size: 12px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox label.file:hover {
  cursor: pointer;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox label.file .text-option {
  white-space: pre;
  color: #111;
  position: absolute;
  left: 210px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox textarea {
  width: 560px;
  height: 307px;
  margin: 0;
  border: solid 1px #D0D0D0;
  padding: 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  color: #828282;
  background: #F4F4F4;
  font-size: 14px;
  line-height: 28px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .text-check {
  font-size: 14px;
  text-align: center;
  line-height: 28px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .text-check a {
  color: #4F548F;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black {
  margin-top: 40px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black.inActive button {
  pointer-events: none;
  opacity: .6;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black.inRecaptcha button {
  pointer-events: none;
  opacity: .6;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  letter-spacing: initial;
  width: 100%;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:hover {
  color: #111;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button span {
  font-weight: bold;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .recaptcha {
  color: #999;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  margin-top: 35px;
}

.section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .recaptcha a {
  color: #999;
}

@media screen and (max-width: 1200px) {
  .section-documentForm {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .section-documentForm.isTop {
    margin-top: 12.5vw;
    margin-bottom: 5.55vw;
  }
  .section-documentForm .section-inner .section-innerLeft h2 {
    font-size: 2.15278vw;
  }
  .section-documentForm .section-inner .section-innerLeft .s-documentForm_text {
    font-size: 1.04167vw;
    line-height: 2.43vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox {
    padding: 1.66vw 2.22vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox:before {
    left: 50%;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .title {
    height: 4.16667vw;
    font-size: 0.97222vw;
    line-height: 4.16667vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .select {
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox textarea {
    padding: 1.66vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.required .title:before {
    line-height: 1.38889vw;
    font-size: 0.76389vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.select-box:before {
    width: 0.97222vw;
    height: 0.55556vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.select-box .text-option {
    font-size: 1.2vw;
    margin-top: 1.38889vw;
    margin-left: 17.08333vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .check-policy {
    font-size: 1.2vw;
    margin-top: 1.38889vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .check-policy::after {
    top: 50%;
    -webkit-transform: rotate(45deg) translate(-6px, -6px);
            transform: rotate(45deg) translate(-6px, -6px);
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box select, .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box input[type="text"] {
    font-size: 0.97222vw;
    padding-left: 2.22222vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box .error {
    font-size: 0.83333vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button {
    width: 100%;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button span {
    font-weight: bold;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .form-privacy {
    padding: 1.66vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
}

@media screen and (max-width: 750px) {
  .section-documentForm {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .section-documentForm.isTop {
    margin-top: 26vw;
    padding-top: 17vw;
    padding-bottom: 8.53vw;
  }
  .section-documentForm .section-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-documentForm .section-inner .section-innerLeft {
    width: 100%;
  }
  .section-documentForm .section-inner .section-innerLeft h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
  }
  .section-documentForm .section-inner .section-innerLeft .s-documentForm_text {
    font-size: 4vw;
    line-height: 8vw;
  }
  .section-documentForm .section-inner .section-innerRight {
    width: 100%;
    margin-left: 0;
    margin-top: 30px;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox {
    width: 100%;
    padding: 10.66vw 6.4vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox:before {
    top: -22vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .title {
    width: 100%;
    font-size: 4vw;
    margin-bottom: 5.33333vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .select {
    width: 100%;
    font-size: 4vw;
    line-height: 5.33333vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox label.file {
    display: block;
    width: 100%;
    height: 13.33333vw;
    line-height: 13.33333vw;
    font-size: 3.46667vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox label.file .text-option {
    position: relative;
    left: initial;
    top: initial;
    -webkit-transform: none;
            transform: none;
    text-align: left;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox textarea {
    width: 100%;
    height: 40vw;
    font-size: 3.46667vw;
    padding: 5.33vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .text-check {
    text-align: left;
    font-size: 4vw;
    line-height: 8vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box {
    display: block;
    margin-bottom: 7.46667vw;
    padding-bottom: 7.46667vw;
    border-bottom: solid 1px #D0D0D0;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.required .title:before {
    right: initial;
    left: 0;
    width: 14.4vw;
    height: 5.33333vw;
    line-height: 5.33333vw;
    font-size: 2.93333vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.file-box {
    padding-bottom: 12vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.select-box:before {
    width: 3.73333vw;
    height: 2.13333vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.select-box .inner {
    display: block;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.select-box .inner:before {
    top: 69%;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.select-box .text-option {
    font-size: 3vw;
    margin-top: 2vw;
    margin-left: 0;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .inner {
    display: block;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .check-policy {
    font-size: 3vw;
    line-height: 183%;
    margin-top: 2vw;
    margin-left: 0;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box.privacy-box .check-policy::after {
    top: 50%;
    -webkit-transform: rotate(45deg) translate(-6px, -6px);
            transform: rotate(45deg) translate(-6px, -6px);
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box select, .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box input[type="text"] {
    width: 100%;
    height: 16vw;
    font-size: 3.46667vw;
    padding-left: 6.4vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .input-box .error {
    left: 0;
    bottom: 3vw;
    font-size: 2.4vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .form-privacy {
    width: 100%;
    padding: 5.33vw;
    line-height: 4vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .recaptcha {
    font-size: 2vw;
    margin-top: 4vw;
    line-height: 1.4;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black {
    margin-top: 7.46667vw;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button {
    width: 100%;
  }
  .section-documentForm .section-inner .section-innerRight .s-documentForm_formBox .btn-black button span {
    font-weight: bold;
  }
}

.section-oblongCard {
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.section-oblongCard.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.section-oblongCard.isView .section-inner h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-oblongCard.isView .section-inner h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-oblongCard.isView .section-inner .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-oblongCard.isView .section-inner .s-oblongCard_content .s-oblongCard_contentList {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-oblongCard.isView .section-inner .s-oblongCard_content .s-oblongCard_contentList a:after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.section-oblongCard.isTop {
  padding-top: 85px;
  padding-bottom: 80px;
  margin-top: 200px;
  margin-bottom: 80px;
}

.section-oblongCard .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 300%;
  top: -260px;
  left: -122px;
}

@media screen and (max-width: 1200px) {
  .section-oblongCard .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .section-oblongCard .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.section-oblongCard .section-inner h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: .56px;
}

.section-oblongCard .section-inner h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .section-oblongCard .section-inner h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .section-oblongCard .section-inner h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.section-oblongCard .section-inner h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .section-oblongCard .section-inner h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .section-oblongCard .section-inner h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.section-oblongCard .section-inner .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .section-oblongCard .section-inner .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .section-oblongCard .section-inner .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.section-oblongCard .section-inner .s-oblongCard_content {
  position: relative;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: opacity,transform;
  transition-property: opacity,transform,-webkit-transform;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card {
  position: relative;
  width: 100%;
  height: 360px;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 82px;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:nth-last-child(1) {
  margin-bottom: 0;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100%;
  width: 360px;
  height: 100%;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:after {
  content: "";
  background-color: #fff;
  width: 556px;
  height: 120%;
  z-index: 10;
  position: absolute;
  left: 300px;
  top: 20px;
  -webkit-transform: rotate(15deg) translateX(0);
          transform: rotate(15deg) translateX(0);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
  transition: -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
  transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
  transition: transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s, -webkit-transform 0.3s cubic-bezier(0.475, 0.425, 0, 0.995) 0.4s;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:hover:before {
  /* -webkit-transform: scale(1.1); */
          /* transform: scale(1.1); */
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:hover:after {
  -webkit-animation: pagePaper .3s ease-out 0s;
          animation: pagePaper .3s ease-out 0s;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card.is-first:before {
  content: "";
  background: url(/assets/img/service/dx/dx-1.webp) no-repeat;
  background-size: cover;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card.is-second:before {
  background: url(/assets/img/service/dx/dx-2.webp) no-repeat;
  background-size: cover;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card.is-third:before {
  background: url(/assets/img/service/dx/dx-3.webp) no-repeat;
  background-size: cover;
}

@keyframes pagePaper {
  0% {
    -webkit-transform: rotate(15deg) translateX(0);
            transform: rotate(15deg) translateX(0);
  }
  50% {
    -webkit-transform: rotate(15deg) translateX(-10px);
            transform: rotate(15deg) translateX(-10px);
  }
  100% {
    -webkit-transform: rotate(15deg) translateX(0);
            transform: rotate(15deg) translateX(0);
  }
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox {
  position: relative;
  height: 100%;
  padding: 30px 50px 30px 360px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 50;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardHeader {
  font-size: 28px;
  line-height: 171%;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardBoundary {
  margin-top: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 2;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardBoundary:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  height: 0;
  width: 100%;
  border-bottom: 1px solid #000;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardBoundary p {
  z-index: 3;
  padding: 0 20px;
  background-color: #fff;
  border: solid 1px #000;
  font-size: 12px;
  line-height: 217%;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent {
  margin-top: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-first .s-oblongCard_cardItemTitle {
  background-color: #F2F2F2;
  color: #828282;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second {
  margin-left: 100px;
  position: relative;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second::before {
  content: "";
  position: absolute;
  top: 60%;
  left: -50px;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  height: 16px;
  width: 20px;
  background-image: url(/assets/img/icon-arrow-bold-right.webp);
  background-repeat: no-repeat;
  background-size: contain;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second .s-oblongCard_cardItemTitle {
  background-color: #F6DE79;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem .s-oblongCard_cardItemTitle {
  padding: 4px 16px;
  font-size: 14px;
  line-height: 20px;
}

.section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem .s-oblongCard_cardItemText {
  margin-top: 15px;
  color: #888888;
  font-size: 12px;
  line-height: 186%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

@media screen and (max-width: 1200px) {
  .section-oblongCard {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .section-oblongCard.isTop {
    margin-top: 19.79vw;
    margin-bottom: 5.55vw;
  }
  .section-oblongCard .section-inner:before {
    left: -36vw;
  }
  .section-oblongCard .section-inner h2 {
    font-size: 2.15278vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card {
    height: auto;
    margin-bottom: 5.69vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:before {
    width: 26vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:after {
    width: 38.6vw;
    left: 20.8vw;
    top: 1.38vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox {
    padding-left: 26vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardHeader {
    font-size: 2.15278vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardBoundary {
    margin-top: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 2;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardBoundary:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    height: 0;
    width: 100%;
    border-bottom: 1px solid #000;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardBoundary p {
    z-index: 3;
    padding: 0 20px;
    background-color: #fff;
    border: solid 1px #000;
    font-size: 12px;
    line-height: 217%;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent {
    margin-top: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-first .s-oblongCard_cardItemTitle {
    background-color: #F2F2F2;
    color: #828282;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second {
    margin-left: 100px;
    position: relative;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second::before {
    content: "";
    position: absolute;
    top: 60%;
    left: -50px;
    -webkit-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
    height: 16px;
    width: 20px;
    background-image: url(/assets/img/icon-arrow-bold-right.webp);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second .s-oblongCard_cardItemTitle {
    background-color: #F6DE79;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem .s-oblongCard_cardItemTitle {
    padding: 4px 16px;
    font-size: 14px;
    line-height: 20px;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem .s-oblongCard_cardItemText {
    margin-top: 15px;
    color: #888888;
    font-size: 12px;
    line-height: 186%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}

@media screen and (max-width: 750px) {
  .section-oblongCard {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .section-oblongCard.isTop {
    margin-top: 45.86vw;
    padding-top: 17vw;
    padding-bottom: 8.53vw;
  }
  .section-oblongCard .section-inner h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList {
    display: initial;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card {
    width: 100%;
    height: auto;
    margin-bottom: 8vw;
    background-color: #fff;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:before {
    width: 34.66667vw;
    height: 34.66667vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card:after {
    width: 37.86667vw;
    right: 28vw;
    top: -9vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox {
    padding: 0 5.333vw 5.333vw 5.333vw;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardHeader {
    height: 34.66667vw;
    padding-left: 33.33333vw;
    font-size: 3.86vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardBoundary {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 2;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent {
    margin-top: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem {
    width: 100%;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-first .s-oblongCard_cardItemTitle {
    background-color: #F2F2F2;
    color: #828282;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second {
    margin-left: 0px;
    margin-top: 40px;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second::before {
    content: "";
    top: -20px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg);
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem.is-second .s-oblongCard_cardItemTitle {
    background-color: #F6DE79;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem .s-oblongCard_cardItemTitle {
    padding: 4px 16px;
    font-size: 14px;
    line-height: 20px;
  }
  .section-oblongCard .section-inner .s-oblongCard_content .s-oblongCard_contentList .s-oblongCard_card .s-oblongCard_cardBox .s-oblongCard_cardContent .s-oblongCard_cardItem .s-oblongCard_cardItemText {
    margin-top: 15px;
    color: #888888;
    font-size: 12px;
    line-height: 186%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}

.section-numberList {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.section-numberList.isTop {
  padding-top: 85px;
  padding-bottom: 80px;
  margin-top: 200px;
  margin-bottom: 80px;
}

.section-numberList.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.section-numberList.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-numberList.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.section-numberList.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-numberList.isView .list-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-numberList .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: -130px;
}

@media screen and (max-width: 1200px) {
  .section-numberList .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .section-numberList .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.section-numberList h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: .56px;
}

.section-numberList h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .section-numberList h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .section-numberList h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.section-numberList h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  left: -46px;
  top: -59px;
}

@media screen and (max-width: 1200px) {
  .section-numberList h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .section-numberList h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.section-numberList .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .section-numberList .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .section-numberList .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.section-numberList .list-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 42px;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: transform,opacity;
  transition-property: transform,opacity,-webkit-transform;
}

.section-numberList .list-content:after {
  content: '';
  display: block;
  width: 360px;
  height: 0;
}

.section-numberList .list-content li:nth-child(1) .header-box:after {
  content: "1";
  position: absolute;
  height: 50px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #111;
  border-radius: 50%;
  color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section-numberList .list-content li:nth-child(2) .header-box:after {
  content: "2";
  position: absolute;
  height: 50px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #111;
  border-radius: 50%;
  color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section-numberList .list-content li:nth-child(3) .header-box:after {
  content: "3";
  position: absolute;
  height: 50px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #111;
  border-radius: 50%;
  color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section-numberList .list-content li:nth-child(4) .header-box:after {
  content: "4";
  position: absolute;
  height: 50px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #111;
  border-radius: 50%;
  color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section-numberList .list-content li:nth-child(5) .header-box:after {
  content: "5";
  position: absolute;
  height: 50px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #111;
  border-radius: 50%;
  color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section-numberList .list-content li:nth-child(6) .header-box:after {
  content: "6";
  position: absolute;
  height: 50px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #111;
  border-radius: 50%;
  color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section-numberList .list-content > li {
  position: relative;
  width: 360px;
  height: auto;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 72px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.section-numberList .list-content > li:hover:before {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

.section-numberList .list-content > li:hover .title span {
  border-bottom: solid 1px #111;
}

.section-numberList .list-content > li:nth-child(n+4):nth-child(-n+6) {
  margin-bottom: 0;
}

.section-numberList .list-content .header-box {
  position: relative;
  height: auto;
  padding: 50px 30px 30px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.section-numberList .list-content .header-box .title {
  width: 100%;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: .6px;
  font-weight: bold;
  text-align: center;
}

.section-numberList .list-content .header-box .subtitle {
  margin-top: 20px;
  color: #888888;
  font-size: 12px;
  line-height: 186%;
}

.section-numberList .list-content .boundary-line {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 30px;
  z-index: 2;
}

.section-numberList .list-content .boundary-line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 0;
  border-top: solid 1px #111;
  width: 100%;
  z-index: 1;
}

.section-numberList .list-content .boundary-line p {
  font-weight: bold;
  font-size: 14px;
  line-height: 171%;
  text-align: center;
  letter-spacing: 0.1em;
  background-color: #fff;
  padding: 0 20px;
  z-index: 3;
}

.section-numberList .list-content .content-box {
  position: relative;
  padding: 20px 30px 35px 50px;
  font-size: 14px;
  line-height: 28px;
}

.section-numberList .list-content .content-box .content-list {
  list-style-type: disc;
  font-size: 12px;
  line-height: 183%;
  color: #888888;
}

@media screen and (max-width: 1200px) {
  .section-numberList {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .section-numberList.isTop {
    margin-top: 19.79vw;
    margin-bottom: 5.55vw;
  }
  .section-numberList h2 {
    font-size: 2.15278vw;
  }
  .section-numberList .text-headding {
    width: 100%;
    font-size: 1.04167vw;
  }
  .section-numberList .list-content:after {
    content: '';
    display: block;
    width: 25vw;
    height: 0;
  }
  .section-numberList .list-content.line3 li:nth-child(n+4):nth-child(-n+6) {
    margin-bottom: 5vw;
  }
  .section-numberList .list-content > li {
    width: 25vw;
    margin-bottom: 5vw;
  }
  .section-numberList .list-content .header-box {
    height: auto;
    padding: 35px 2.22vw 1.66vw 2.22vw;
  }
  .section-numberList .list-content .header-box .title {
    font-size: 1.25vw;
    line-height: 2.5vw;
  }
  .section-numberList .list-content .header-box .subtitle {
    font-size: 0.97222vw;
    line-height: 186%;
  }
  .section-numberList .list-content .boundary-line p {
    font-size: 1.25vw;
    line-height: 2.5vw;
  }
  .section-numberList .list-content .content-box {
    padding: 2.43vw 2.98vw;
  }
  .section-numberList .list-content .content-box .content-list {
    font-size: 0.97222vw;
    line-height: 183%;
  }
}

@media screen and (max-width: 750px) {
  .section-numberList {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .section-numberList.isTop {
    margin-top: 45.86vw;
    padding-top: 17vw;
    padding-bottom: 8.53vw;
  }
  .section-numberList.system01 .list-content > li {
    height: auto;
  }
  .section-numberList h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
  }
  .section-numberList .text-headding {
    font-size: 3.46667vw;
  }
  .section-numberList .list-content {
    margin-top: 11.2vw;
  }
  .section-numberList .list-content:after {
    content: '';
    display: none;
  }
  .section-numberList .list-content > li {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: auto;
    margin-bottom: 50px;
  }
  .section-numberList .list-content > li:nth-child(n+4):nth-child(-n+5) {
    margin-bottom: 50px;
  }
  .section-numberList .list-content > li:nth-last-of-type(1) {
    margin-bottom: 0;
  }
  .section-numberList .list-content .header-box {
    height: auto;
    overflow: initial;
    padding: 35px 6.4vw 5.5vw 6.4vw;
  }
  .section-numberList .list-content .header-box .title {
    font-size: 4vw;
    line-height: 1.56;
  }
  .section-numberList .list-content .header-box .subtitle {
    font-size: 3.46667vw;
    line-height: 6.93vw;
  }
  .section-numberList .list-content .boundary-line p {
    font-size: 4vw;
    line-height: 1.56;
  }
  .section-numberList .list-content .content-box {
    padding: 20px 30px 35px 50px;
  }
  .section-numberList .list-content .content-box .content-list {
    font-size: 3.46667vw;
    line-height: 6.93vw;
  }
}

.section-checklist {
  position: relative;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 80px;
}

.section-checklist.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.section-checklist.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-checklist.isView .check-area {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.section-checklist .section-inner {
  padding: 80px 0;
}

.section-checklist .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -100px;
  left: 0;
}

@media screen and (max-width: 1200px) {
  .section-checklist .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .section-checklist .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.section-checklist.isTop {
  padding-top: 85px;
  padding-bottom: 80px;
  margin-top: 200px;
  margin-bottom: 80px;
}

.section-checklist .check-area {
  margin: 0 auto;
  width: 880px;
  background-color: #fff;
  padding: 56px 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  -webkit-transition-property: opacity,-webkit-transform;
  transition-property: opacity,-webkit-transform;
  transition-property: transform,opacity;
  transition-property: transform,opacity,-webkit-transform;
}

.section-checklist .check-area .title-check {
  position: relative;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 36px;
}

.section-checklist .check-area .title-check.yellow:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -14px;
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 8px;
  height: 15px;
  background-size: 100%;
}

.section-checklist .check-area .list-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 24px;
  font-size: 15px;
}

.section-checklist .check-area .list-check li:before {
  content: "";
  background: url(/assets/img/service/system/icon-check.webp) no-repeat;
  width: 16px;
  height: 16px;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.section-checklist .check-area .list-check li span {
  font-weight: bold;
}

@media screen and (max-width: 1200px) {
  .section-checklist {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .section-checklist.isTop {
    margin-top: 19.79vw;
    margin-bottom: 5.55vw;
  }
  .section-checklist .section-inner {
    padding: 0 8.3vw;
  }
  .section-checklist .check-area {
    width: 61.1vw;
    padding: 3.88vw 5.55vw;
  }
  .section-checklist .check-area .title-check {
    font-size: 1.52778vw;
    margin-bottom: 2.5vw;
  }
  .section-checklist .check-area .list-check li {
    font-size: 1.04167vw;
    padding-left: 2vw;
    margin-bottom: 1.66vw;
  }
}

@media screen and (max-width: 750px) {
  .section-checklist {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .section-checklist.isTop {
    margin-top: 45.86vw;
    padding-top: 17vw;
    padding-bottom: 8.53vw;
  }
  .section-checklist .section-inner {
    padding: 0 4.8vw;
  }
  .section-checklist .check-area {
    width: 100%;
    padding: 11.73vw 6.66vw;
  }
  .section-checklist .check-area .title-check {
    font-size: 4vw;
    line-height: 6.66vw;
    margin-bottom: 8.53vw;
    padding-left: 3vw;
  }
  .section-checklist .check-area .title-check.yellow:before {
    top: -2vw;
    left: 0vw;
  }
  .section-checklist .check-area .list-check li {
    font-size: 3.46667vw;
    margin-bottom: 5.33vw;
    padding-left: 6.4vw;
    line-height: 6.93vw;
  }
  .section-checklist .check-area .list-check li:before {
    width: 4.26vw;
    height: 4.26vw;
    top: 2vw;
  }
}

.index {
  /*-------------- section top ---------------*/
  /*-------------- section service ---------------*/
  /*-------------- section client ---------------*/
  /*-------------- section about ---------------*/
  /*-------------- section recruit ---------------*/
  /*-------------- section blog ---------------*/
}

.index.active .section-top:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.index.active .section-top .section-inner:before {
  -webkit-transform: rotate(-15deg) translateY(0);
          transform: rotate(-15deg) translateY(0);
}

.index.active .section-top .scroll-box {
  opacity: 1;
}

.index.active .section-top .text-area .text-good {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index.active .section-top .text-area .text-good:before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.index.active .section-top .text-area .right-box {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.index.active .section-top .img-area .part {
  opacity: 1;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.index .section-top {
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin-bottom: 120px;
}

.index .section-top .section-inner {
  height: 100%;
}

.index .section-top .section-inner:before {
  content: "";
  background-color: #f6de79;
  width: 1px;
  height: 107vh;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  position: absolute;
  right: 98px;
  top: -5vh;
  -webkit-transform: rotate(-15deg) translateY(-120vh);
          transform: rotate(-15deg) translateY(-120vh);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
}

.index .section-top:before {
  content: "";
  background-color: #111;
  width: 105%;
  height: 150%;
  position: absolute;
  right: -54.5%;
  top: -47%;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
}

.index .section-top .img-area {
  position: relative;
  width: 846px;
  height: 384px;
  top: 50%;
  left: 39%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.index .section-top .img-area .part {
  position: absolute;
  bottom: 0;
  width: 165px;
  opacity: 0;
  -webkit-clip-path: inset(0 0 0 100%);
          clip-path: inset(0 0 0 100%);
  -webkit-transition: -webkit-clip-path 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: -webkit-clip-path 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: clip-path 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  transition: clip-path 1s cubic-bezier(0.79, 0.17, 0.15, 0.96), -webkit-clip-path 1s cubic-bezier(0.79, 0.17, 0.15, 0.96);
}

.index .section-top .img-area .part img {
  width: 100%;
  -webkit-transition: -webkit-transform 0.2s linear;
  transition: -webkit-transform 0.2s linear;
  transition: transform 0.2s linear;
  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
}

.index .section-top .img-area .part.part01 {
  left: 0;
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
  width: 463px;
}

.index .section-top .img-area .part.part01 img {
  height: 384px;
}

.index .section-top .img-area .part.part02 {
  width: 65px;
  left: 357px;

  top: 75px;
  
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}

.index .section-top .img-area .part.part02 img {
  height: 223px;

}

.index .section-top .img-area .part.part03 {
  left: 357px;
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}

.index .section-top .img-area .part.part03 img {
  height: 65px;
  width: 65px;
}

.index .section-top .img-area .part.part04 {
  left: 497px;
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}

.index .section-top .img-area .part.part04 img {
  height: 384px;
}

.index .section-top .img-area .part.part05 {
  width: 182px;
  left: 662px;
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}

.index .section-top .img-area .part.part05 img {
  height: 222px;
}

.index .section-top .text-area {
  position: absolute;
  width: 560px;
  left: 0;
  top: 79.4vh;
}

.index .section-top .text-area .text-good {
  float: left;
  position: relative;
  width: 175px;
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.index .section-top .text-area .text-good:before {
  content: "";
  background: url(/assets/img/index/border-good.webp) no-repeat;
  width: 32px;
  height: 104px;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 7px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.2s;
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.2s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.2s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.2s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.2s;
}

.index .section-top .text-area .text-good span {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 8px;
  font-family: "akrobat";
  display: block;
}

.index .section-top .text-area .text-good span.line1 {
  padding-left: 23px;
}

.index .section-top .text-area .text-good span.line2 {
  padding-left: 13px;
}

.index .section-top .text-area .right-box {
  width: 300px;
  float: left;
  padding-left: 15px;
  margin-top: 4px;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  opacity: 0;
  -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.index .section-top .text-area .right-box .text-detail span {
  position: relative;
  display: block;
  font-size: 16px;
  font-family: "akrobat";
  letter-spacing: 4px;
  line-height: 26px;
  padding-left: 8px;
}

.index .section-top .text-area .right-box .text-detail span.line1 {
  padding-left: 32px;
}

.index .section-top .text-area .right-box .text-detail span.line2 {
  padding-left: 16px;
}

.index .section-top .text-area .right-box .text-detail2 {
  font-size: 12px;
  color: #888888;
  margin-top: 18px;
}

.index .section-top .scroll-box {
  position: absolute;
  right: 24px;
  bottom: 208px;
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.475, 0.425, 0, 0.995) 1.8s;
  transition: opacity 0.7s cubic-bezier(0.475, 0.425, 0, 0.995) 1.8s;
}

.index .section-top .scroll-box .scroll-inner {
  position: relative;
}

.index .section-top .scroll-box .scroll-inner:before {
  content: "";
  background: url(/assets/img/index/icon-scroll.webp) no-repeat;
  width: 11px;
  height: 88px;
  background-size: 100%;
  position: absolute;
  right: 50%;
  margin-right: -5.5px;
  top: 70px;
  -webkit-animation: rotateY 3s linear 0s infinite;
          animation: rotateY 3s linear 0s infinite;
}

.index .section-top .scroll-box .text {
  font-size: 10px;
  letter-spacing: 2.5px;
  font-family: "akrobat";
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.index .section-top .scroll-box .text a {
  color: #fff;
  text-decoration: none;
}

@-webkit-keyframes rotateY {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  75% {
    -webkit-transform: rotateY(270deg);
            transform: rotateY(270deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes rotateY {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  75% {
    -webkit-transform: rotateY(270deg);
            transform: rotateY(270deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

.index .section-service {
  position: relative;
  overflow: hidden;
  padding-top: 78px;
  padding-bottom: 120px;
  margin-bottom: 120px;
}

.index .section-service.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.index .section-service.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-service.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-service.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-service.isView .list-service li {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-service.isView .list-service li a:after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.index .section-service .section-inner:before {
  content: "";
  background-color: #E6EEF6;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: -137px;
}

@media screen and (max-width: 1200px) {
  .index .section-service .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-service .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.index .section-service .list-service li {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.index .section-service h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.index .section-service h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-service h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-service h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.index .section-service h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .index .section-service h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-service h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.index .section-service .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-service .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-service .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.index .section-service .content-area {
  position: relative;
}

.index .section-service .btn-more {
  position: absolute;
  right: 0;
  bottom: 0;
}

.index .section-service .btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}

.index .section-service .btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.index .section-service .btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.index .section-service .btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.index .section-service .btn-more a:hover {
  color: #111;
}

.index .section-service .btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .index .section-service .btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .index .section-service .btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .index .section-service .btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .index .section-service .btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-service .btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .index .section-service .btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.index .section-service .btn-more a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.index .section-client {
  position: relative;
  overflow: hidden;
  padding-top: 78px;
  padding-bottom: 270px;
  margin-bottom: 120px;
}

.index .section-client.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.index .section-client.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-client.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-client.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-client.isView .btn-works,
.index .section-client.isView .btn-case-study {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-client.isView .list-logo {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-client .section-inner:before {
  content: "";
  background-color: #E6EEF6;
  width: 326px;
  height: 270%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: 22px;
}

@media screen and (max-width: 1200px) {
  .index .section-client .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-client .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.index .section-client h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.index .section-client h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-client h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-client h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.index .section-client h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .index .section-client h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-client h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.index .section-client .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-client .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-client .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.index .section-client .list-logo {
  position: absolute;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 680px;
  opacity: 0;
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.index .section-client .list-logo li {
  width: 216px;
  margin-bottom: 16px;
  margin-right: 16px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.03);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.03);
}

.index .section-client .list-logo li:nth-child(3n) {
  margin-right: 0;
}

.index .section-client .list-logo li img {
  width: 100%;
  height: 100%;
}

.index .section-client .btn-works {
  margin-bottom: 40px;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.index .section-client .btn-works a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}

.index .section-client .btn-works a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.index .section-client .btn-works a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.index .section-client .btn-works a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.index .section-client .btn-works a:hover {
  color: #111;
}

.index .section-client .btn-works a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .index .section-client .btn-works a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .index .section-client .btn-works a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .index .section-client .btn-works a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .index .section-client .btn-works a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-client .btn-works a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .index .section-client .btn-works a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.index .section-client .btn-works a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.index .section-client .btn-case-study {
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.index .section-client .btn-case-study a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}

.index .section-client .btn-case-study a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.index .section-client .btn-case-study a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.index .section-client .btn-case-study a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.index .section-client .btn-case-study a:hover {
  color: #111;
}

.index .section-client .btn-case-study a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .index .section-client .btn-case-study a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .index .section-client .btn-case-study a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .index .section-client .btn-case-study a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .index .section-client .btn-case-study a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-client .btn-case-study a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .index .section-client .btn-case-study a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.index .section-client .btn-case-study a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.index .section-about {
  position: relative;
  overflow: hidden;
  padding-top: 78px;
  padding-bottom: 176px;
  margin-bottom: 103px;
}

.index .section-about.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.index .section-about.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-about.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-about.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-about.isView .text-big-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-about.isView .list-about {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-about.isView .list-about a:after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.index .section-about:before {
  content: "";
  background: url(/assets/img/index/img-about.webp) no-repeat;
  width: 1140px;
  height: 640px;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 80px;
  z-index: -10;
}

.index .section-about .section-inner:before {
  content: "";
  background-color: #E6EEF6;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: -20px;
}

@media screen and (max-width: 1200px) {
  .index .section-about .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-about .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.index .section-about h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.index .section-about h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-about h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-about h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.index .section-about h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .index .section-about h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-about h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.index .section-about .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  margin-bottom: 38px;
}

@media screen and (max-width: 1200px) {
  .index .section-about .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-about .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.index .section-about .text-big-headding {
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 72px;
  font-weight: bold;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-about .text-big-headding {
    font-size: 1.66vw;
    line-height: 2.77vw;
    margin-bottom: 5vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-about .text-big-headding {
    font-size: 4.53333vw;
    line-height: 6.93vw;
    margin-bottom: 8vw;
  }
}

.index .section-recruit {
  position: relative;
  margin-bottom: 103px;
}

.index .section-recruit.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.index .section-recruit.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-recruit.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-recruit.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-recruit.isView .text-big-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-recruit .section-inner {
  padding-top: 78px;
  padding-bottom: 138px;
  overflow: hidden;
}

.index .section-recruit .section-inner:before {
  content: "";
  background-color: #E6EEF6;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: 390px;
}

@media screen and (max-width: 1200px) {
  .index .section-recruit .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-recruit .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.index .section-recruit .pict01 {
  position: absolute;
  left: 0;
  top: -40px;
  width: 563px;
}

.index .section-recruit .pict01 img {
  width: 100%;
  height: 100%;
}

.index .section-recruit .pict02 {
  position: absolute;
  right: 0;
  bottom: -120px;
  width: 609px;
}

.index .section-recruit .pict02 img {
  width: 100%;
  height: 100%;
}

.index .section-recruit .title-area {
  /* margin-left: 400px; */
}

.index .section-recruit h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.index .section-recruit h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-recruit h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-recruit h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.index .section-recruit h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .index .section-recruit h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-recruit h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.index .section-recruit .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-recruit .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-recruit .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.index .section-recruit .text-big-headding {
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 72px;
  font-weight: bold;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-recruit .text-big-headding {
    font-size: 1.66vw;
    line-height: 2.77vw;
    margin-bottom: 5vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-recruit .text-big-headding {
    font-size: 4.53333vw;
    line-height: 6.93vw;
    margin-bottom: 8vw;
  }
}

.index .section-recruit .btn-case-study a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}

.index .section-recruit .btn-case-study a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.index .section-recruit .btn-case-study a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.index .section-recruit .btn-case-study a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.index .section-recruit .btn-case-study a:hover {
  color: #111;
}

.index .section-recruit .btn-case-study a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .index .section-recruit .btn-case-study a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .index .section-recruit .btn-case-study a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .index .section-recruit .btn-case-study a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .index .section-recruit .btn-case-study a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-recruit .btn-case-study a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .index .section-recruit .btn-case-study a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.index .section-recruit .btn-case-study a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.index .section-blog {
  position: relative;
  overflow: hidden;
  padding-top: 78px;
  padding-bottom: 120px;
}

.index .section-blog.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.index .section-blog.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-blog.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.index .section-blog.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-blog.isView .list-blog {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.index .section-blog .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: -192px;
}

@media screen and (max-width: 1200px) {
  .index .section-blog .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-blog .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.index .section-blog h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.index .section-blog h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-blog h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-blog h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.index .section-blog h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .index .section-blog h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-blog h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.index .section-blog .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .index .section-blog .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-blog .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.index .section-blog .btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  margin: 0 auto;
  margin-top: 80px;
}

.index .section-blog .btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.index .section-blog .btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.index .section-blog .btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.index .section-blog .btn-more a:hover {
  color: #111;
}

.index .section-blog .btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .index .section-blog .btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .index .section-blog .btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .index .section-blog .btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .index .section-blog .btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .index .section-blog .btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .index .section-blog .btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.index .section-blog .btn-more a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

@media screen and (max-width: 1200px) {
  .index .section-top {
    margin-bottom: 8.33vw;
  }
  .index .section-top .section-inner:before {
    right: 14vw;
  }
  .index .section-top .img-area {
    width: 58.7vw;
    height: 26.6vw;
  }
  .index .section-top .img-area .part {
    width: 11.45vw;
  }
  .index .section-top .img-area .part.part01 img {
    height: auto;
  }
  .index .section-top .img-area .part.part02 {
    width: 4.33vw;
    left: 30.8vw;
    height: 170px;
  }
  .index .section-top .img-area .part.part02 img {
    /* height: auto; */
  }
  .index .section-top .img-area .part.part03 {
    left: 30.8vw;

  }
  .index .section-top .img-area .part.part03 img {
    height: auto;
    width: 4.33vw;
    height: 4.33vw;
  }
  .index .section-top .img-area .part.part04 {
    left: 34.5vw;
  }
  .index .section-top .img-area .part.part04 img {
    height: auto;
  }
  .index .section-top .img-area .part.part05 {
    width: 12.6vw;
    left: 45.97vw;
  }
  .index .section-top .img-area .part.part05 img {
    height: auto;
  }
  .index .section-top .text-area {
    width: 38.88vw;
    left: initial;
  }
  .index .section-top .text-area .text-good {
    width: 12.15vw;
  }
  .index .section-top .text-area .text-good:before {
    width: 2.22vw;
    height: 7.22vw;
    top: 0.69vw;
    right: -1.11vw;
  }
  .index .section-top .text-area .text-good span {
    font-size: 2.22vw;
    line-height: 2.77vw;
    letter-spacing: 0.55vw;
  }
  .index .section-top .text-area .text-good span.line1 {
    padding-left: 1.59vw;
  }
  .index .section-top .text-area .text-good span.line2 {
    padding-left: 0.9vw;
  }
  .index .section-top .text-area .right-box {
    width: 22.8vw;
    padding-left: 3.33vw;
    margin-top: 0;
  }
  .index .section-top .text-area .right-box .text-detail span {
    font-size: 1.11vw;
    letter-spacing: 0.27vw;
    line-height: 1.8vw;
    padding-left: 0.55vw;
  }
  .index .section-top .text-area .right-box .text-detail span.line1 {
    padding-left: 1.66vw;
  }
  .index .section-top .text-area .right-box .text-detail span.line2 {
    padding-left: 1.11vw;
  }
  .index .section-top .text-area .right-box .text-detail2 {
    font-size: 0.83vw;
    line-height: 1.11vw;
    margin-top: 1.94vw;
    white-space: pre;
  }
  .index .section-service {
    margin-bottom: 8.33vw;
    padding-bottom: 8.33vw;
    padding-top: 5.41vw;
  }
  .index .section-client {
    margin-bottom: 8.33vw;
    padding-bottom: 15.1vw;
    padding-top: 5.41vw;
  }
  .index .section-client .section-inner:before {
    left: 10vw;
  }
  .index .section-client .list-logo {
    width: 47.2vw;
    right: 8.3vw;
  }
  .index .section-client .list-logo li {
    width: 15vw;
    margin-bottom: 1.11vw;
    margin-right: initial;
  }
  .index .section-client {
    margin-bottom: 7.15vw;
    padding-bottom: 7.15vw;
    padding-top: 5.41vw;
  }
  .index .section-client .section-inner:before {
    left: 10vw;
  }
  .index .section-about {
    margin-bottom: 7.15vw;
    padding-bottom: 12.2vw;
    padding-top: 5.41vw;
  }
  .index .section-about:before {
    background-size: cover;
    width: 79.1vw;
    height: 44.4vw;
    top: 5.55vw;
  }
  .index .section-about .section-inner:before {
    left: 0vw;
  }
  .index .section-recruit {
    margin-bottom: 7.15vw;
  }
  .index .section-recruit .section-inner {
    padding-top: 5.41vw;
    padding-bottom: 9.58vw;
  }
  .index .section-recruit .pict01 {
    width: 39vw;
  }
  .index .section-recruit .pict02 {
    width: 42.2vw;
  }
  .index .section-recruit .title-area {
    margin-left: 27.7vw;
  }
}

@media screen and (max-width: 750px) {
  .index .btn-black {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .index .section-top:before {
    right: -65.5%;
  }
  .index .section-top .section-inner:before {
    right: -5vw;
  }
  .index .section-top .img-area {
    width: 87.2vw;
    height: 39.7vw;
    -webkit-transform: none;
            transform: none;
    left: 0;
    top: 34.1vw;
  }
  .index .section-top .img-area .part {
    width: 17vw;
  }
  /* .index .section-top .img-area .part.part01 img.rellax {
    height: 148.36px;
    width: 155px;
  }
  .index .section-top .img-area .part.part02 {
    width: 20px;
    height: 90px;
    left: 39vw;
    top: 20px;
  }
  .index .section-top .img-area .part.part02 img.rellax {
    height: 85.02px;
  }
  .index .section-top .img-area .part.part03 {
    left: 39vw;
    width: 20px;
    height: 20px;

  }
  .index .section-top .img-area .part.part03 img.rellax {
    width: 20px;
    height: 20px;
  } */
  .index .section-top .img-area .part.part01 img.rellax {
    height: 31.78vw;
    width: 44.67vw;
}

.index .section-top .img-area .part.part02 {
    width: 2.67vw; /* 20px / 750 * 100 */
    height: 12vw; /* 90px / 750 * 100 */
    left: 39vw;
    top: 2.67vw; /* 20px / 750 * 100 */
}

.index .section-top .img-area .part.part02 img.rellax {
    height: 11.34vw; /* 85.02px / 750 * 100 */
}

.index .section-top .img-area .part.part03 {
    left: 39vw;
    width: 2.67vw; /* 20px / 750 * 100 */
    height: 2.67vw; /* 20px / 750 * 100 */
}

.index .section-top .img-area .part.part03 img.rellax {
    width: 2.67vw; /* 20px / 750 * 100 */
    height: 2.67vw; /* 20px / 750 * 100 */
}



  .index .section-top .img-area .part.part04 {
    left: 51.2vw;
  }
  .index .section-top .img-area .part.part04 img.rellax {
    height: 148.36px;
  }
  .index .section-top .img-area .part.part05 {
    width: 18.9vw;
    left: 68.5vw;
  }
  .index .section-top .img-area .part.part05 img.rellax {
    height: 86.44px;
  }
  .index .section-top .text-area {
    width: 100%;
    top: 82vw;
  }
  .index .section-top .text-area .text-good {
    float: none;
    width: 33vw;
    padding-left: 13.3vw;
  }
  .index .section-top .text-area .text-good:before {
    left: 6.4vw;
    right: initial;
    top: 1vw;
    width: 7.2vw;
    height: 23.73vw;
  }
  .index .section-top .text-area .text-good span {
    font-size: 7.46vw;
    letter-spacing: 2.13vw;
    line-height: 9vw;
  }
  .index .section-top .text-area .text-good span.line1 {
    padding-left: 4.8vw;
  }
  .index .section-top .text-area .text-good span.line2 {
    padding-left: 2.93vw;
  }
  .index .section-top .text-area .right-box {
    width: 100%;
    float: none;
    margin-top: 7.2vw;
  }
  .index .section-top .text-area .right-box .text-detail span {
    font-size: 4vw;
    letter-spacing: 1vw;
    line-height: 7vw;
  }
  .index .section-top .text-area .right-box .text-detail span.line1 {
    padding-left: 0;
  }
  .index .section-top .text-area .right-box .text-detail span.line2 {
    padding-left: 0;
  }
  .index .section-top .text-area .right-box .text-detail2 {
    margin-top: 6.4vw;
    line-height: 6.1vw;
    font-size: 3.2vw;
  }
  .index .section-top .scroll-box {
    width: 11.7vw;
    right: 2vw;
    bottom: 30vh;
  }
  .index .section-top .scroll-box .text {
    font-size: 2.66667vw;
  }
  .index .section-top .scroll-box .scroll-inner:before {
    -webkit-animation: none;
            animation: none;
    width: 2.46vw;
    height: 20vw;
    top: 10vw;
  }
  .index .section-service {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .index .section-service .section-inner:before {
    left: -61vw;
  }
  .index .section-service .btn-more {
    position: relative;
  }
  .index .section-client {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .index .section-client .section-inner:before {
    left: 13vw;
  }
  .index .section-client .list-logo {
    width: 100%;
    position: relative;
    margin: 0 auto;
    margin-bottom: 7.46vw;
    right: initial;
  }
  .index .section-client .list-logo li {
    width: 28.8vw;
    margin-bottom: 2.13vw;
  }
  .index .section-client .btn-works {
    margin-bottom: 4.53vw;
  }
  .index .section-about {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .index .section-about:before {
    display: none;
  }
  .index .section-about .section-inner:before {
    left: -20vw;
  }
  .index .section-recruit {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
    overflow: hidden;
  }
  .index .section-recruit .section-inner {
    padding: 0 4.8vw;
    overflow: initial;
  }
  .index .section-recruit .section-inner:before {
    left: -12vw;
  }
  .index .section-recruit .title-area {
    margin-left: 0;
  }
  .index .section-recruit .pict {
    margin-bottom: 7.46vw;
  }
  .index .section-recruit .pict img {
    height: 100%;
  }
  .index .section-blog {
    padding-bottom: 0vw;
    padding-top: 20.8vw;
    margin-bottom: 26.6vw;
  }
  .index .section-blog .section-inner:before {
    left: -66vw;
  }
  .index .section-blog .btn-more a {
    margin: 0;
  }
  .index .scroll-top-box {
    position: relative;
    margin-bottom: 8vw;
  }
  .index .scroll-top-box a {
    text-decoration: none;
    color: #111;
  }
  .index .scroll-top-box:before {
    content: "";
    position: absolute;
    background: url(/assets/img/index/icon-scroll_sp.webp) no-repeat;
    background-size: 100%;
    width: 2.86vw;
    height: 0;
    padding-top: 17%;
    top: -19vw;
    left: 50%;
    margin-left: -2.75vw;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .index .scroll-top-box .text {
    font-size: 2.66667vw;
    font-family: "Akrobat";
    letter-spacing: 0.6vw;
    text-align: center;
  }
}

.concept .section-head:before {
  background: url(/assets/img/concept/img-head.webp) no-repeat;
  background-size: 100%;
}

.concept .section-mission {
  margin-top: 107px;
  margin-bottom: 135px;
  padding-top: 166px;
  padding-bottom: 80px;
  overflow: hidden;
}

.concept .section-mission.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.concept .section-mission.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.concept .section-mission.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.concept .section-mission.isView .text-big-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.concept .section-mission .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 300%;
  top: -230px;
  left: -200px;
}

@media screen and (max-width: 1200px) {
  .concept .section-mission .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-mission .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.concept .section-mission h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.concept .section-mission h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .concept .section-mission h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-mission h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.concept .section-mission h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  left: 206px;
}

@media screen and (max-width: 1200px) {
  .concept .section-mission h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-mission h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.concept .section-mission .text-big-headding {
  font-size: 40px;
  letter-spacing: 8px;
  font-weight: bold;
  line-height: 70px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.concept .section-mission .title-box {
  width: 770px;
  margin: 0 auto;
  text-align: center;
}

.concept .section-vision {
  position: relative;
  padding-top: 300px;
  padding-bottom: 200px;
  margin-bottom: 100px;
  overflow: hidden;
}

.concept .section-vision.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.concept .section-vision.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.concept .section-vision.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.concept .section-vision.isView .text-big-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.concept .section-vision.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.concept .section-vision:before {
  content: "";
  background: url(/assets/img/concept/bg-vision.webp) no-repeat;
  width: 63vw;
  height: 640px;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 226px;
}

.concept .section-vision .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 300%;
  width: 1500px;
  top: -500px;
  left: 747px;
}

@media screen and (max-width: 1200px) {
  .concept .section-vision .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-vision .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.concept .section-vision .pict01 {
  position: absolute;
  width: 659px;
  top: 0;
  left: 0;
}

.concept .section-vision .pict01 img {
  width: 100%;
  height: 100%;
}

.concept .section-vision h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.concept .section-vision h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .concept .section-vision h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-vision h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.concept .section-vision h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .concept .section-vision h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-vision h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.concept .section-vision .text-big-headding {
  font-size: 24px;
  line-height: 40px;
  margin-bottom: 72px;
  font-weight: bold;
  margin-bottom: 30px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .concept .section-vision .text-big-headding {
    font-size: 1.66vw;
    line-height: 2.77vw;
    margin-bottom: 5vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-vision .text-big-headding {
    font-size: 4.53333vw;
    line-height: 6.93vw;
    margin-bottom: 8vw;
  }
}

.concept .section-vision .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 532px;
  margin-bottom: 40px;
}

@media screen and (max-width: 1200px) {
  .concept .section-vision .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-vision .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.concept .section-vision .text-headding.mb0 {
  margin-bottom: 0;
}

.concept .section-vision .title-box {
  position: relative;
  padding-left: 668px;
}

.concept .section-values {
  position: relative;
  padding-top: 80px;
  padding-bottom: 108px;
  margin-bottom: 117px;
  overflow: hidden;
}

.concept .section-values.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.concept .section-values.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.concept .section-values.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.concept .section-values .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  width: 2666px;
  height: 300%;
  top: -500px;
  left: -100px;
}

@media screen and (max-width: 1200px) {
  .concept .section-values .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-values .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.concept .section-values h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  margin-left: 84px;
}

.concept .section-values h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .concept .section-values h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-values h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.concept .section-values h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .concept .section-values h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-values h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.concept .section-values .value-list .white-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  padding: 64px 84px;
  margin-bottom: 63px;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
}

.concept .section-values .value-list .white-area:last-child {
  margin-bottom: 0;
}

.concept .section-values .value-list .white-area.isView .text-no,
.concept .section-values .value-list .white-area.isView .text-title,
.concept .section-values .value-list .white-area.isView .text-detail {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.concept .section-values .value-list .white-area.isView .ask-box {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.concept .section-values .value-list .text-no {
  font-size: 25px;
  letter-spacing: 0.63px;
  font-family: "akrobat";
  -webkit-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  opacity: 0;
}

.concept .section-values .value-list .text-title {
  font-family: "akrobat";
  font-size: 32px;
  letter-spacing: 4px;
  margin: 24px 0 48px 0;
  -webkit-transition: all 0.6s ease 0.2s;
  transition: all 0.6s ease 0.2s;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  opacity: 0;
}

.concept .section-values .value-list .text-detail {
  width: 432px;
  font-size: 14px;
  line-height: 28px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  opacity: 0;
}

.concept .section-values .value-list .ask-box {
  margin-bottom: 58px;
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  opacity: 0;
}

.concept .section-values .value-list .ask-box.mb0 {
  margin-bottom: 0;
}

.concept .section-values .value-list .ask-box .title-mini {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.concept .section-values .value-list .ask-box .title-mini.yellow:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 8px;
  height: 15px;
  background-size: 100%;
}

.concept .section-values .value-list .ask-box .title-mini.black:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  background: url(/assets/img/concept/border-mini-black.webp) no-repeat;
  width: 7px;
  height: 14px;
  background-size: 100%;
}

.concept .section-values .value-list .ask-box li {
  font-size: 12px;
  line-height: 28px;
}

@media screen and (max-width: 1200px) {
  .concept .section-mission {
    margin-top: 7.43vw;
    margin-bottom: 9.375vw;
    padding-top: 11.52vw;
    padding-bottom: 5.55vw;
  }
  .concept .section-mission h2:before {
    left: 14vw;
  }
  .concept .section-mission .title-box {
    width: 53.4vw;
  }
  .concept .section-mission .text-big-headding {
    font-size: 2.77778vw;
    letter-spacing: 0.5vw;
    line-height: 4.86vw;
  }
  .concept .section-vision {
    padding-top: 20.83vw;
    padding-bottom: 13.8vw;
    margin-bottom: 6.94vw;
  }
  .concept .section-vision:before {
    width: 64.7vw;
    height: 44.4vw;
    top: 15.6vw;
  }
  .concept .section-vision .section-inner:before {
    top: -34.8vw;
    left: 59vw;
    width: 49vw;
  }
  .concept .section-vision .pict01 {
    width: 45.7vw;
  }
  .concept .section-vision .title-box {
    padding-left: 46.3vw;
  }
  .concept .section-vision .text-big-headding {
    margin-bottom: 2vw;
  }
  .concept .section-vision .text-headding {
    margin-bottom: 2.7vw;
  }
  .concept .section-values {
    padding-top: 5.55vw;
    padding-bottom: 7.5vw;
    margin-bottom: 8.12vw;
  }
  .concept .section-values .section-inner:before {
    left: -2vw;
    width: 50vw;
    top: -25vw;
  }
  .concept .section-values h2 {
    margin-left: 5.83vw;
  }
  .concept .section-values .value-list .white-area {
    padding: 4.44vw 5.83vw;
  }
  .concept .section-values .value-list .text-detail {
    width: 30vw;
    font-size: 0.97222vw;
    line-height: 1.94vw;
  }
  .concept .section-values .value-list .text-no {
    font-size: 1.73611vw;
  }
  .concept .section-values .value-list .text-title {
    font-size: 2.22222vw;
    margin: 1.66vw 0 3.33vw 0;
  }
  .concept .section-values .value-list .right-box {
    width: 35vw;
  }
  .concept .section-values .value-list .ask-box {
    margin-bottom: 4vw;
  }
  .concept .section-values .value-list .ask-box .title-mini {
    font-size: 1.11111vw;
    margin-bottom: 1.38vw;
  }
}

@media screen and (max-width: 750px) {
  .concept .section-mission {
    margin-top: 32vw;
    margin-bottom: 16vw;
    padding-top: 0;
    padding-bottom: 0;
  }
  .concept .section-mission .section-inner:before {
    display: none;
  }
  .concept .section-mission .title-box {
    width: 100%;
  }
  .concept .section-mission h2 {
    font-size: 8.26667vw;
    letter-spacing: 1vw;
  }
  .concept .section-mission h2:before {
    left: 24vw;
  }
  .concept .section-mission .text-big-headding {
    font-size: 4.53333vw;
    line-height: 8vw;
  }
  .concept .section-vision {
    padding-top: 19.4vw;
    padding-bottom: 10.1vw;
    margin-bottom: 11.46vw;
  }
  .concept .section-vision:before {
    display: none;
  }
  .concept .section-vision .section-inner:before {
    left: -60vw;
    top: -40vw;
    width: 80vw;
  }
  .concept .section-vision .title-box {
    padding-left: 0;
  }
  .concept .section-vision .text-big-headding {
    margin-bottom: 5.86vw;
  }
  .concept .section-vision .text-headding {
    margin-bottom: 9.3vw;
  }
  .concept .section-vision .pict01 {
    position: initial;
    width: 100%;
    margin-top: 7.46667vw;
  }
  .concept .section-values {
    padding-top: 19.4vw;
  }
  .concept .section-values .section-inner:before {
    width: 100vw;
    top: -53vw;
    left: -184vw;
  }
  .concept .section-values h2 {
    margin-left: 0;
  }
  .concept .section-values .value-list .white-area {
    display: block;
  }
  .concept .section-values .value-list .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 6.13vw;
  }
  .concept .section-values .value-list .text-detail {
    width: 100%;
    font-size: 3.46667vw;
    line-height: 6.93vw;
  }
  .concept .section-values .value-list .right-box {
    width: 100%;
    margin-top: 12.8vw;
  }
  .concept .section-values .value-list .text-no {
    font-size: 4.8vw;
    margin-right: 3.46vw;
    margin-bottom: 0;
  }
  .concept .section-values .value-list .text-title {
    font-size: 5.86667vw;
    margin-top: 0;
    margin-bottom: 0;
  }
  .concept .section-values .value-list .ask-box {
    margin-bottom: 4vw;
  }
  .concept .section-values .value-list .ask-box .title-mini {
    font-size: 3.46667vw;
  }
  .concept .section-values .value-list .ask-box .title-mini.yellow:before, .concept .section-values .value-list .ask-box .title-mini.black:before {
    top: -2vw;
    left: -3vw;
    width: 2.1vw;
    height: 4vw;
  }
  .concept .section-values .value-list .ask-box li {
    font-size: 3.2vw;
    line-height: 5.86vw;
  }
}

.workship .section-head:before {
  background: url(/assets/img/service/workship/img-head.webp) no-repeat;
  background-size: 100%;
}

.workship .section-content {
  margin-top: 74px;
}

.workship .section-content .workship-area {
  position: relative;
  padding: 70px 0 120px 0;
  margin-bottom: 100px;
  overflow: hidden;
}

.workship .section-content .workship-area .section-inner:after {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
}

@media screen and (max-width: 1200px) {
  .workship .section-content .workship-area .section-inner:after {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .workship .section-content .workship-area .section-inner:after {
    width: 36.5vw;
    top: -40vw;
  }
}

.workship .section-content .workship-area.workship .detail-box {
  padding-left: 70px;
}

.workship .section-content .workship-area.workship .section-inner:before {
  content: "";
  background: url(/assets/img/service/workship/img01.webp) no-repeat;
  width: 775px;
  height: 538px;
  background-size: 100%;
  position: absolute;
  right: -60px;
  top: 0;
}

.workship .section-content .workship-area.magazine .section-inner:after {
  left: 760px;
}

.workship .section-content .workship-area.magazine .detail-box {
  padding-left: 730px;
}

.workship .section-content .workship-area.magazine .section-inner:before {
  content: "";
  background: url(/assets/img/service/workship/img02.webp) no-repeat;
  width: 780px;
  height: 538px;
  background-size: 100%;
  position: absolute;
  left: -40px;
  top: 0;
}

.workship .section-content .workship-area.space .detail-box {
  padding-left: 70px;
}

.workship .section-content .workship-area.space .section-inner:before {
  content: "";
  background: url(/assets/img/service/workship/img03.webp) no-repeat;
  width: 780px;
  height: 538px;
  background-size: 100%;
  position: absolute;
  right: -60px;
  top: 0;
}

.workship .section-content .workship-area.agent .section-inner:after {
  left: 760px;
}

.workship .section-content .workship-area.agent .detail-box {
  padding-left: 730px;
}

.workship .section-content .workship-area.agent .section-inner:before {
  content: "";
  background: url(/assets/img/service/workship/img04.webp) no-repeat;
  width: 780px;
  height: 538px;
  background-size: 100%;
  position: absolute;
  left: -40px;
  top: 0;
}

.workship .section-content .workship-area .title-mini {
  font-size: 18px;
  font-weight: bold;
}

.workship .section-content .workship-area .logo-title {
  width: 350px;
  margin: 10px 0 20px 0;
}

.workship .section-content .workship-area .logo-title img {
  width: 100%;
}

.workship .section-content .workship-area .text-headding {
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
}

.workship .section-content .workship-area .text-content {
  width: 418px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 28px;
}

.workship .section-content .btn-visit {
  margin-top: 40px;
}

.workship .section-content .btn-visit a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}

.workship .section-content .btn-visit a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.workship .section-content .btn-visit a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.workship .section-content .btn-visit a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.workship .section-content .btn-visit a:hover {
  color: #111;
}

.workship .section-content .btn-visit a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .workship .section-content .btn-visit a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .workship .section-content .btn-visit a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .workship .section-content .btn-visit a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .workship .section-content .btn-visit a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .workship .section-content .btn-visit a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .workship .section-content .btn-visit a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.workship .section-content .btn-visit a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.workship .section-content .text-link {
  padding-top: 20px;
  font-size: 16px;
}

.workship .section-content .text-link a {
  color: blue;
}

@media screen and (max-width: 1200px) {
  .workship .section-content .workship-area {
    padding: 4.86vw 0 8.33vw 0;
    margin-bottom: 6.94vw;
  }
  .workship .section-content .workship-area.workship .detail-box {
    padding-left: 4.86vw;
  }
  .workship .section-content .workship-area.workship .section-inner:before {
    width: 52.4vw;
    height: 37.26vw;
    right: -4.16vw;
  }
  .workship .section-content .workship-area.magazine .detail-box {
    padding-left: 50.6vw;
  }
  .workship .section-content .workship-area.magazine .section-inner:before {
    width: 52.4vw;
    height: 37.26vw;
    left: 2.77vw;
  }
  .workship .section-content .workship-area.space .detail-box {
    padding-left: 4.86vw;
  }
  .workship .section-content .workship-area.space .section-inner:before {
    width: 52.4vw;
    height: 37.26vw;
    right: -4.16vw;
  }
  .workship .section-content .workship-area.agent .detail-box {
    padding-left: 50.6vw;
  }
  .workship .section-content .workship-area.agent .section-inner:before {
    width: 52.4vw;
    height: 37.26vw;
    left: 2.77vw;
  }
  .workship .section-content .workship-area .logo-title {
    width: 24.3vw;
    margin: .7vw 0 1.4vw 0;
  }
  .workship .section-content .workship-area .text-headding {
    font-size: 1.66667vw;
    line-height: 2.7vw;
  }
  .workship .section-content .workship-area .title-mini {
    font-size: 1.25vw;
  }
  .workship .section-content .workship-area .text-content {
    width: 29vw;
    margin-top: 1.66vw;
    font-size: 0.97222vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .workship .section-content {
    margin-top: 16vw;
    padding-top: 16vw;
  }
  .workship .section-content .workship-area .section-inner:after {
    width: 76.5vw;
    top: -40vw;
    left: -20vw;
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
  .workship .section-content .workship-area .detail-box {
    padding-top: 65vw;
  }
  .workship .section-content .workship-area.workship .detail-box {
    padding-left: 0;
  }
  .workship .section-content .workship-area.workship .section-inner:before {
    width: 91vw;
    height: 64.26vw;
    right: 3.84vw;
    top: 4vw;
  }
  .workship .section-content .workship-area.magazine .detail-box {
    padding-left: 0;
  }
  .workship .section-content .workship-area.magazine .section-inner:before {
    width: 91vw;
    height: 64.26vw;
    right: 3.84vw;
    top: 0;
  }
  .workship .section-content .workship-area.magazine .section-inner:after {
    left: -20vw;
  }
  .workship .section-content .workship-area.space .detail-box {
    padding-left: 0;
  }
  .workship .section-content .workship-area.space .section-inner:before {
    width: 91vw;
    height: 64.26vw;
    right: 3.84vw;
    top: 0;
  }
  .workship .section-content .workship-area.agent .detail-box {
    padding-left: 0;
  }
  .workship .section-content .workship-area.agent .section-inner:before {
    width: 91vw;
    height: 64.26vw;
    right: 3.84vw;
    top: 0;
  }
  .workship .section-content .workship-area.agent .section-inner:after {
    left: -20vw;
  }
  .workship .section-content .workship-area .text-content {
    width: 100%;
    font-size: 3.2vw;
    line-height: 5.86vw;
    margin-top: 5.3vw;
  }
  .workship .section-content .workship-area .title-mini {
    font-size: 3.2vw;
  }
  .workship .section-content .workship-area .text-headding {
    font-size: 4.2vw;
    line-height: 6.7vw;
  }
  .workship .section-content .workship-area .logo-title {
    width: 35.4vw;
    margin: 2vw 0 0 0;
  }
  .workship .section-content .btn-visit {
    margin-top: 10.6vw;
  }
}

/*---- system page Common ----*/
.service_underlayer .section-solution {
  position: relative;
  overflow: hidden;
  margin-top: 200px;
  margin-bottom: 80px;
  padding-top: 85px;
  padding-bottom: 80px;
}

.service_underlayer .section-solution.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_underlayer .section-solution.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer .section-solution.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer .section-solution.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer .section-solution.isView .check-area {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer .section-solution .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 922px;
  top: -200px;
  left: -200px;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-solution .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-solution .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_underlayer .section-solution .title-box {
  width: 660px;
  margin: 0 auto;
  text-align: center;
}

.service_underlayer .section-solution h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 40px;
}

.service_underlayer .section-solution h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-solution h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-solution h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_underlayer .section-solution h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  left: 46px;
  top: -50px;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-solution h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-solution h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_underlayer .section-solution .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 660px;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-solution .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-solution .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.service_underlayer .section-solution .check-area {
  width: 880px;
  margin: 0 auto;
  background-color: #fff;
  padding: 56px 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.service_underlayer .section-solution .check-area .title-check {
  position: relative;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 36px;
}

.service_underlayer .section-solution .check-area .title-check.yellow:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -14px;
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 8px;
  height: 15px;
  background-size: 100%;
}

.service_underlayer .section-solution .check-area .list-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 24px;
  font-size: 15px;
}

.service_underlayer .section-solution .check-area .list-check li:before {
  content: "";
  background: url(/assets/img/service/system/icon-check.webp) no-repeat;
  width: 16px;
  height: 16px;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.service_underlayer .section-solution .check-area .list-check li span {
  font-weight: bold;
}

.service_underlayer .section-detailList {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.service_underlayer .section-detailList.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_underlayer .section-detailList.isView .section-inner .section-inner_ctaArea {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer .section-detailList.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer .section-detailList.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer .section-detailList.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer .section-detailList.isView .list-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer .section-detailList .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: -130px;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-detailList .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-detailList .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  width: auto;
  min-width: 330px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 80px;
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover {
  color: #111;
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.service_underlayer .section-detailList .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
  width: calc(100% + 20px);
}

.service_underlayer .section-detailList h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: 0.56px;
}

.service_underlayer .section-detailList h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-detailList h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-detailList h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_underlayer .section-detailList h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  left: -46px;
  top: -59px;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-detailList h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-detailList h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_underlayer .section-detailList .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-detailList .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-detailList .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.service_underlayer .section-detailList .list-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 42px;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.service_underlayer .section-detailList .list-content.line3 li:nth-child(n + 4):nth-child(-n + 6) {
  margin-bottom: 72px;
}

.service_underlayer .section-detailList .list-content li {
  position: relative;
  width: 360px;
  height: 350px;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 72px;
}

.service_underlayer .section-detailList .list-content li:hover:before {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

.service_underlayer .section-detailList .list-content li:hover .title span {
  border-bottom: solid 1px #111;
}

.service_underlayer .section-detailList .list-content li:nth-child(n + 4):nth-child(-n + 6) {
  margin-bottom: 0;
}

.service_underlayer .section-detailList .list-content li:before {
  content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  right: 30px;
  bottom: 32px;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service_underlayer .section-detailList .list-content li a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: #111;
}

.service_underlayer .section-detailList .list-content .title-box {
  position: relative;
  height: 150px;
  border-bottom: solid 1px #e9e9e9;
  overflow: hidden;
}

.service_underlayer .section-detailList .list-content .title-box:after {
  content: "";
  width: 72px;
  height: 72px;
  position: absolute;
  left: 40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
}

.service_underlayer .section-detailList .list-content .title-box .title {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 45px;
  width: 166px;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.6px;
}

.service_underlayer .section-detailList .list-content .text-box {
  position: relative;
  padding: 35px 30px;
  font-size: 14px;
  line-height: 28px;
}

/*------------ 個別設定 ------------*/
.content .section-head:before {
  background: url(/assets/img/service/content/img-head.webp) no-repeat;
  background-size: 100%;
}

.content .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/content/icon-content1_1.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/content/icon-content1_2.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/content/icon-content1_3.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/content/icon-content1_4.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/content/icon-content1_5.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/content/icon-content1_6.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/content/icon-content2_1.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/content/icon-content2_2.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/content/icon-content2_3.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/content/icon-content2_4.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/content/icon-content2_5.webp") no-repeat;
  background-size: 100%;
}

.content .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/content/icon-content2_6.webp") no-repeat;
  background-size: 100%;
}

.system .section-head:before {
  background: url(/assets/img/service/system/img-head.webp) no-repeat;
  background-size: 100%;
}

.system .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/system/icon-system1_1.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/system/icon-system1_2.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/system/icon-system1_3.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/system/icon-system1_4.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/system/icon-system1_5.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/system/icon-system1_6.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/system/icon-system2_1.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/system/icon-system2_2.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/system/icon-system2_3.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/system/icon-system2_4.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/system/icon-system2_5.webp") no-repeat;
  background-size: 100%;
}

.system .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/system/icon-system2_6.webp") no-repeat;
  background-size: 100%;
}

.creative .section-head:before {
  background: url(/assets/img/service/creative/img-head.webp) no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative1_1.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative1_2.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative1_3.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative1_4.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative1_5.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative1_6.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative2_1.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative2_2.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative2_3.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative2_4.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative2_5.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative2_6.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system03 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative3_1.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system03 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative3_2.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system03 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative3_3.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system04 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative4_1.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system04 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative4_2.webp") no-repeat;
  background-size: 100%;
}

.creative .section-detailList.system04 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/creative/icon-creative4_3.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-head:before {
  background: url(/assets/img/service/marketing/img-head.webp) no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing1_1.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing1_2.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing1_3.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing2_1.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing2_2.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing2_3.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing2_4.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing2_5.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing2_6.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system03 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing3_1.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system03 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing3_2.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system03 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing3_3.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system03 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing3_4.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system03 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing3_5.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system03 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing3_6.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system04 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing4_1.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system04 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing4_2.webp") no-repeat;
  background-size: 100%;
}

.marketing .section-detailList.system04 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/marketing/icon-marketing4_3.webp") no-repeat;
  background-size: 100%;
}

.media .section-head:before {
  background: url(/assets/img/service/media/img-head.webp) no-repeat;
  background-size: 100%;
}

.media .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_1.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_2.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_3.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_4.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_5.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_6.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_1.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_2.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_3.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_4.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_5.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_6.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(7) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_7.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(8) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_8.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system02 .list-content li:nth-child(9) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_9.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system03 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_1.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system03 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_2.webp") no-repeat;
  background-size: 100%;
}

.media .section-detailList.system03 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_3.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-head:before {
  background: url(/assets/img/service/consulting/img-head.webp) no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting1_1.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting1_2.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting1_3.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting1_4.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting1_5.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting1_6.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting2_1.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting2_2.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting2_3.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting2_4.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting2_5.webp") no-repeat;
  background-size: 100%;
}

.consulting .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/consulting/icon-consulting2_6.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-head:before {
  background: url(/assets/img/service/media/img-head.webp) no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_1.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_2.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_3.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_4.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_5.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_6.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_1.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_2.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_3.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_4.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_5.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_6.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(7) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_7.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(8) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_8.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system02 .list-content li:nth-child(9) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_9.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system03 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_1.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system03 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_2.webp") no-repeat;
  background-size: 100%;
}

.service_design .section-detailList.system03 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_3.webp") no-repeat;
  background-size: 100%;
}

.dx .section-head:before {
  background: url(/assets/img/service/media/img-head.webp) no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_1.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_2.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_3.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_4.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_5.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/media/icon-media1_6.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_1.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_2.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_3.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_4.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_5.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_6.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(7) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_7.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(8) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_8.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system02 .list-content li:nth-child(9) .title-box:after {
  background: url("/assets/img/service/media/icon-media2_9.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system03 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_1.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system03 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_2.webp") no-repeat;
  background-size: 100%;
}

.dx .section-detailList.system03 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/media/icon-media3_3.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-head:before {
  background: url(/assets/img/service/corporate/img-head.webp) no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate1_1.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate1_2.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate1_3.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate1_4.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate1_5.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate1_6.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate2_1.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate2_2.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate2_3.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate2_4.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate2_5.webp") no-repeat;
  background-size: 100%;
}

.corporate .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/corporate/icon-corporate2_6.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-head:before {
  background: url(/assets/img/service/systemflow/img-head.webp) no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system01 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow1_1.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system01 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow1_2.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system01 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow1_3.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system01 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow1_4.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system01 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow1_5.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system01 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow1_6.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system02 .list-content li:nth-child(1) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow2_1.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system02 .list-content li:nth-child(2) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow2_2.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system02 .list-content li:nth-child(3) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow2_3.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system02 .list-content li:nth-child(4) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow2_4.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system02 .list-content li:nth-child(5) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow2_5.webp") no-repeat;
  background-size: 100%;
}

.systemflow .section-detailList.system02 .list-content li:nth-child(6) .title-box:after {
  background: url("/assets/img/service/systemflow/icon-systemflow2_6.webp") no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_underlayer .section-solution {
    margin-top: 19.79vw;
    margin-bottom: 5.55vw;
  }
  .service_underlayer .section-solution h2 {
    font-size: 2.77778vw;
  }
  .service_underlayer .section-solution h2:before {
    left: 3.12vw;
  }
  .service_underlayer .section-solution .title-box {
    width: 47.83vw;
  }
  .service_underlayer .section-solution .text-headding {
    font-size: 1.25vw;
  }
  .service_underlayer .section-solution .check-area {
    width: 61.1vw;
    padding: 3.88vw 5.55vw;
  }
  .service_underlayer .section-solution .check-area .title-check {
    font-size: 1.52778vw;
    margin-bottom: 2.5vw;
  }
  .service_underlayer .section-solution .check-area .list-check li {
    font-size: 1.04167vw;
    padding-left: 2vw;
    margin-bottom: 1.66vw;
  }
  .service_underlayer .section-detailList {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .service_underlayer .section-detailList h2 {
    font-size: 2.15278vw;
  }
  .service_underlayer .section-detailList .text-headding {
    width: 100%;
  }
  .service_underlayer .section-detailList .list-content.line3 li:nth-child(n + 4):nth-child(-n + 6) {
    margin-bottom: 5vw;
  }
  .service_underlayer .section-detailList .list-content li {
    width: 25vw;
    height: 24.3vw;
    margin-bottom: 5vw;
  }
  .service_underlayer .section-detailList .list-content .title-box {
    height: 10.416vw;
  }
  .service_underlayer .section-detailList .list-content .title-box:before {
    width: 9.93vw;
    left: -2.08vw;
    top: -2.569vw;
  }
  .service_underlayer .section-detailList .list-content .title-box:after {
    width: 5vw;
    height: 5vw;
    left: 1.11vw;
  }
  .service_underlayer .section-detailList .list-content .title-box .title {
    font-size: 1.25vw;
    width: 11.52vw;
    right: 3.125vw;
    line-height: 2.5vw;
  }
  .service_underlayer .section-detailList .list-content .text-box {
    padding: 2.43vw 2.98vw;
    font-size: 0.97222vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer .section-solution {
    margin-top: 45.86vw;
  }
  .service_underlayer .section-solution .title-box {
    width: 100%;
  }
  .service_underlayer .section-solution h2 {
    font-size: 5.6vw;
    margin-bottom: 6.4vw;
  }
  .service_underlayer .section-solution h2:before {
    left: 9.12vw;
    top: -9vw;
  }
  .service_underlayer .section-solution .text-headding {
    font-size: 3.2vw;
    margin-bottom: 6.4vw;
  }
  .service_underlayer .section-solution .check-area {
    width: 100%;
    padding: 11.73vw 6.66vw;
  }
  .service_underlayer .section-solution .check-area .title-check {
    font-size: 4vw;
    line-height: 6.66vw;
    margin-bottom: 8.53vw;
    padding-left: 3vw;
  }
  .service_underlayer .section-solution .check-area .title-check.yellow:before {
    top: -2vw;
    left: 0vw;
  }
  .service_underlayer .section-solution .check-area .list-check li {
    font-size: 3.46667vw;
    margin-bottom: 5.33vw;
    padding-left: 6.4vw;
    line-height: 6.93vw;
  }
  .service_underlayer .section-solution .check-area .list-check li:before {
    width: 4.26vw;
    height: 4.26vw;
    top: 2vw;
  }
  .service_underlayer .section-detailList {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .service_underlayer .section-detailList.system01 .list-content li {
    height: 64.26vw;
  }
  .service_underlayer .section-detailList h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
  }
  .service_underlayer .section-detailList .list-content {
    margin-top: 11.2vw;
  }
  .service_underlayer .section-detailList .list-content li {
    width: 42.66vw;
    height: 72.26vw;
  }
  .service_underlayer .section-detailList .list-content li:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.66vw;
    bottom: 6.66vw;
  }
  .service_underlayer .section-detailList .list-content .title-box {
    height: 26.6vw;
    overflow: initial;
  }
  .service_underlayer .section-detailList .list-content .title-box:before {
    display: none;
  }
  .service_underlayer .section-detailList .list-content .title-box:after {
    width: 16vw;
    height: 0;
    padding-top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .service_underlayer .section-detailList .list-content .title-box .title {
    position: absolute;
    width: 33.33vw;
    top: 34vw;
    right: initial;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    font-size: 4vw;
    line-height: 6.66vw;
  }
  .service_underlayer .section-detailList .list-content .text-box {
    display: none;
  }
}

.service_underlayer_detail .isView .text-box {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer_detail .text-box {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s, -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.service_underlayer_detail .section-head h2 {
  font-size: 40px;
}

.service_underlayer_detail .section-head h2.title_linefeed {
  line-height: 1.4;
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-head h2.title_linefeed br {
    display: none;
  }
}

.service_underlayer_detail .section-detail {
  margin-top: 80px;
  margin-bottom: 100px;
  padding-top: 60px;
  overflow: hidden;
}

.service_underlayer_detail .section-detail.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_underlayer_detail .section-detail.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer_detail .section-detail.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer_detail .section-detail .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -133px;
  left: -240px;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-detail .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-detail .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_underlayer_detail .section-detail h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 22px;
  line-height: 38px;
  letter-spacing: initial;
}

.service_underlayer_detail .section-detail h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-detail h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-detail h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_underlayer_detail .section-detail h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-detail h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-detail h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_underlayer_detail .section-detail .detail-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.service_underlayer_detail .section-detail .text-area {
  width: 560px;
}

.service_underlayer_detail .section-detail .text-area .text-detail {
  font-size: 15px;
  line-height: 35px;
  margin-bottom: 50px;
}

.service_underlayer_detail .section-detail .text-area .text-detail:last-child {
  margin-bottom: 0;
}

.service_underlayer_detail .section-detail .pict-area {
  margin-top: 120px;
}

.service_underlayer_detail .section-detail .pict-area img {
  width: 100%;
  height: 100%;
}

.service_underlayer_detail .section-detail .pict-area figure {
  width: 550px;
}

.service_underlayer_detail .section-detail .leftPict .text-area {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.service_underlayer_detail .section-detail .leftPict .pict-area {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.service_underlayer_detail .section-howto {
  margin-bottom: 160px;
}

.service_underlayer_detail .section-howto.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_underlayer_detail .section-howto.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer_detail .section-howto.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer_detail .section-howto h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 22px;
  line-height: 38px;
  letter-spacing: initial;
}

.service_underlayer_detail .section-howto h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-howto h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-howto h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_underlayer_detail .section-howto h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-howto h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-howto h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_underlayer_detail .section-howto .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  letter-spacing: 0.6px;
  margin-bottom: 35px;
}

.service_underlayer_detail .section-howto .text-detail {
  font-size: 15px;
  line-height: 35px;
  margin-bottom: 40px;
}

.service_underlayer_detail .section-service {
  padding: 40px 0 70px 0;
  margin-bottom: 80px;
  overflow: hidden;
}

.service_underlayer_detail .section-service.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_underlayer_detail .section-service.isView .section-inner .section-inner_ctaArea {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer_detail .section-service.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer_detail .section-service.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_underlayer_detail .section-service.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_underlayer_detail .section-service .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -100px;
  left: 0;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-service .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-service .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  width: auto;
  min-width: 330px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 80px;
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover {
  color: #111;
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.service_underlayer_detail .section-service .section-inner .section-inner_ctaArea .btn-black.btn-more a:hover:after {
  width: calc(100% + 20px);
}

.service_underlayer_detail .section-service h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.service_underlayer_detail .section-service h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-service h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-service h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_underlayer_detail .section-service h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-service h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-service h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_underlayer_detail .section-service .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-service .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-service .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.service_underlayer_detail .section-service .text-area .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  letter-spacing: 0.6px;
  margin-bottom: 35px;
}

.service_underlayer_detail .section-service .text-area .text-detail {
  font-size: 15px;
  line-height: 35px;
}

.service_underlayer_detail .section-service .text-area .text-detail a {
  color: #4f548f;
  text-decoration: underline;
}

/*------------ 個別設定 ------------*/
.eventsystem .section-head:before {
  background: url(/assets/img/service/system/eventsystem/img-head.webp) no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_underlayer_detail .section-head h2 {
    font-size: 2.77778vw;
  }
  .service_underlayer_detail .section-detail {
    margin-top: 5.55vw;
    margin-bottom: 6.94vw;
    padding-top: 4.16vw;
  }
  .service_underlayer_detail .section-detail h2 {
    font-size: 1.52778vw;
    line-height: 2.63vw;
  }
  .service_underlayer_detail .section-detail .text-area {
    width: 38.88vw;
  }
  .service_underlayer_detail .section-detail .text-area .text-detail {
    font-size: 1.04167vw;
    line-height: 2.43vw;
    margin-bottom: 3.47vw;
  }
  .service_underlayer_detail .section-detail .pict-area {
    margin-top: 8.33vw;
  }
  .service_underlayer_detail .section-detail .pict-area figure {
    width: 38.19vw;
  }
  .service_underlayer_detail .section-howto {
    margin-bottom: 11.1vw;
  }
  .service_underlayer_detail .section-howto h2 {
    font-size: 1.52778vw;
    line-height: 2.63vw;
  }
  .service_underlayer_detail .section-howto .title {
    font-size: 1.25vw;
    line-height: 2.43vw;
    margin-bottom: 2.43vw;
  }
  .service_underlayer_detail .section-howto .text-detail {
    font-size: 1.04167vw;
    line-height: 2.43vw;
    margin-bottom: 2.77vw;
  }
  .service_underlayer_detail .section-service {
    padding: 2.77vw 0 4.86vw 0;
    margin-bottom: 5.55vw;
  }
  .service_underlayer_detail .section-service .text-area .title {
    font-size: 1.25vw;
    line-height: 2.43vw;
    margin-bottom: 2.43vw;
  }
  .service_underlayer_detail .section-service .text-area .text-detail {
    font-size: 1.04167vw;
    line-height: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_underlayer_detail .section-head h2 {
    font-size: 4.8vw;
  }
  .service_underlayer_detail .section-detail {
    margin-top: 38.9vw;
    padding-top: 19.2vw;
  }
  .service_underlayer_detail .section-detail.mtStyleChange {
    margin-top: 10.66vw;
  }
  .service_underlayer_detail .section-detail h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.141vw;
    margin-bottom: 6.4vw;
  }
  .service_underlayer_detail .section-detail .detail-area {
    display: block;
  }
  .service_underlayer_detail .section-detail .text-area {
    width: 100%;
  }
  .service_underlayer_detail .section-detail .text-area .text-detail {
    font-size: 4vw;
    line-height: 8vw;
    margin-bottom: 9.6vw;
  }
  .service_underlayer_detail .section-detail .pict-area {
    margin-top: 6.4vw;
  }
  .service_underlayer_detail .section-detail .pict-area figure {
    width: 100%;
  }
  .service_underlayer_detail .section-howto {
    margin-top: 10.66vw;
    margin-bottom: 10.66vw;
  }
  .service_underlayer_detail .section-howto h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.141vw;
    margin-bottom: 6.4vw;
  }
  .service_underlayer_detail .section-howto .title {
    font-size: 4.8vw;
    line-height: 8.53vw;
    margin-bottom: 5.33vw;
  }
  .service_underlayer_detail .section-howto .text-detail {
    font-size: 4vw;
    line-height: 8vw;
    margin-bottom: 8vw;
  }
  .service_underlayer_detail .section-service {
    padding-top: 17vw;
    padding-bottom: 8.53vw;
  }
  .service_underlayer_detail .section-service .text-area .title {
    font-size: 4.8vw;
    margin-bottom: 5.33vw;
    line-height: 8.53vw;
  }
  .service_underlayer_detail .section-service .text-area .text-detail {
    font-size: 4vw;
    line-height: 8vw;
  }
}

.service_common .section-flow {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.service_common .section-flow.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_common .section-flow.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-flow.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-flow.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-flow.isView .list-step {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-flow .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: 130px;
}

@media screen and (max-width: 1200px) {
  .service_common .section-flow .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-flow .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_common .section-flow h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.service_common .section-flow h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_common .section-flow h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-flow h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_common .section-flow h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_common .section-flow h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-flow h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_common .section-flow .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .service_common .section-flow .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-flow .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.service_common .section-flow .list-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.service_common .section-flow .list-step li {
  width: 288px;
}

.service_common .section-flow .list-step .step {
  background: url(/assets/img/service/bg-flow_number.webp) no-repeat;
  width: 288px;
  height: 60px;
  background-size: 100%;
  color: #fff;
  font-size: 20px;
  font-family: "akrobat";
  letter-spacing: 2.5px;
  line-height: 60px;
  text-align: center;
}

.service_common .section-flow .list-step .title {
  margin: 40px 0 30px 0;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.6px;
}

.service_common .section-flow .list-step .text-box {
  padding-left: 30px;
}

.service_common .section-flow .list-step .text {
  font-size: 14px;
  line-height: 28px;
}

.service_common .section-strength {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.service_common .section-strength.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_common .section-strength.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-strength.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-strength.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-strength.isView .list-strength {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-strength .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: 130px;
}

@media screen and (max-width: 1200px) {
  .service_common .section-strength .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-strength .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_common .section-strength h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.service_common .section-strength h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_common .section-strength h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-strength h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_common .section-strength h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_common .section-strength h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-strength h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_common .section-strength .list-strength {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s, -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.service_common .section-strength .list-strength li {
  width: 570px;
  height: 376px;
  background-color: #fff;
  padding: 60px;
  margin-bottom: 60px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.service_common .section-strength .list-strength .number {
  font-size: 25px;
  font-family: "akrobat";
  letter-spacing: 0.63px;
}

.service_common .section-strength .list-strength .title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.6px;
  margin: 24px 0 34px 0;
}

.service_common .section-strength .list-strength .text {
  font-size: 14px;
  line-height: 28px;
}

.service_common .section-client {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.service_common .section-client.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_common .section-client.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-client.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-client.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-client.isView .list-client {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-client .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: 130px;
}

@media screen and (max-width: 1200px) {
  .service_common .section-client .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-client .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_common .section-client h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.service_common .section-client h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_common .section-client h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-client h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_common .section-client h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_common .section-client h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-client h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_common .section-client .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .service_common .section-client .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-client .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.service_common .section-client .list-client {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.service_common .section-client .list-client li {
  width: 184px;
  margin-bottom: 18px;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
}

.service_common .section-client .list-client li img {
  width: 100%;
  height: 100%;
}

.service_common .list-colum {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.service_common .list-colum li {
  width: 360px;
  height: 400px;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
}

.service_common .list-colum li:hover img {
  /* -webkit-transform: scale(1.1); */
          /* transform: scale(1.1); */
}

.service_common .list-colum li:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.service_common .list-colum li .thumb {
  overflow: hidden;
}

.service_common .list-colum li img {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service_common .list-colum li a {
  position: relative;
  text-decoration: none;
  color: #111;
  width: 100%;
  height: 100%;
  display: block;
}

.service_common .list-colum li a:before {
  content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  z-index: 50;
  left: 32px;
  bottom: 32px;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  left: initial;
  right: 30px;
  bottom: 32px;
}

.service_common .list-colum li:nth-child(n + 4) {
  margin-bottom: 0;
}

.service_common .list-colum li .detail-box {
  margin: 0 32px;
}

.service_common .list-colum li .client {
  font-size: 12px;
  font-weight: bold;
  margin-top: 24px;
}

.service_common .list-colum li .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.56;
  margin: 5px 0;
  letter-spacing: 0.6px;
}

.service_common .list-colum li .state-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.service_common .list-colum li .date {
  color: #888888;
  font-size: 12px;
  margin-right: 32px;
  font-family: "akrobat";
  letter-spacing: 1.5px;
  line-height: 1.5;
}

.service_common .list-colum li .category {
  color: #888888;
  font-size: 12px;
  line-height: 1.5;
  font-family: "akrobat";
}

.service_common .list-colum li .text-content {
  margin: 24px 0;
  font-size: 14px;
  line-height: 21px;
}

.service_common .btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  margin: 0 auto;
  margin-top: 60px;
}

.service_common .btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.service_common .btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.service_common .btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.service_common .btn-more a:hover {
  color: #111;
}

.service_common .btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .service_common .btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .service_common .btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .service_common .btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .service_common .btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .service_common .btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.service_common .btn-more a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.service_common .section-works {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.service_common .section-works.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service_common .section-works.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-works.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service_common .section-works.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-works.isView .list-colum {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service_common .section-works .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: 130px;
}

@media screen and (max-width: 1200px) {
  .service_common .section-works .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-works .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service_common .section-works h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.service_common .section-works h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_common .section-works h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-works h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service_common .section-works h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service_common .section-works h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-works h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service_common .section-works .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 100%;
  margin-bottom: 50px;
}

@media screen and (max-width: 1200px) {
  .service_common .section-works .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-works .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

/*---- service page ----*/
.service .section-head:before {
  background: url(/assets/img/service/img-head.webp) no-repeat;
  background-size: 100%;
}

.service .section-product {
  margin-top: 180px;
  margin-bottom: 180px;
  padding-top: 70px;
  padding-bottom: 120px;
  overflow: hidden;
}

.service .section-product.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service .section-product.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service .section-product.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service .section-product.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service .section-product.isView .list-service {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service .section-product.isView .list-service a:after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.service .section-product .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 300%;
  top: -260px;
  left: -122px;
}

@media screen and (max-width: 1200px) {
  .service .section-product .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-product .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service .section-product h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.service .section-product h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service .section-product h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-product h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service .section-product h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service .section-product h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-product h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service .section-product .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service .section-product .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-product .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.service .section-product .list-service {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

.service .section-digital {
  position: relative;
  margin-top: 180px;
  margin-bottom: 180px;
  padding-top: 70px;
  padding-bottom: 120px;
  overflow: hidden;
}

.service .section-digital.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.service .section-digital.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service .section-digital.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.service .section-digital.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service .section-digital.isView .list-service {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.service .section-digital.isView .list-service a:after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.service .section-digital .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 300%;
  top: -260px;
  left: -122px;
}

@media screen and (max-width: 1200px) {
  .service .section-digital .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-digital .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.service .section-digital h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.service .section-digital h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service .section-digital h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-digital h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.service .section-digital h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .service .section-digital h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-digital h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.service .section-digital .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service .section-digital .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-digital .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.service .section-digital .content-area {
  position: relative;
}

.service .section-digital .btn-more {
  position: absolute;
  right: 0;
  bottom: 0;
}

.service .section-digital .btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}

.service .section-digital .btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.service .section-digital .btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.service .section-digital .btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.service .section-digital .btn-more a:hover {
  color: #111;
}

.service .section-digital .btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .service .section-digital .btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .service .section-digital .btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .service .section-digital .btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .service .section-digital .btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .service .section-digital .btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .service .section-digital .btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.service .section-digital .btn-more a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.service .section-digital .list-service {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 1s ease 0.4s;
  transition: all 1s ease 0.4s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .service_common .section-flow {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .service_common .section-flow .text-headding {
    width: 100%;
  }
  .service_common .section-flow .list-step li {
    width: 20vw;
  }
  .service_common .section-flow .list-step .step {
    width: 100%;
    height: 4.16vw;
    line-height: 4.16vw;
    font-size: 1.38889vw;
    letter-spacing: 0.17vw;
  }
  .service_common .section-flow .list-step .text-box {
    padding-left: 2.08vw;
  }
  .service_common .section-flow .list-step .title {
    margin: 2.77vw 0 2.08vw 0;
    font-size: 1.25vw;
  }
  .service_common .section-flow .list-step .text {
    font-size: 0.97222vw;
    line-height: 1.94vw;
  }
  .service_common .section-strength {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .service_common .section-strength .list-strength li {
    width: 39.58vw;
    height: 26.1vw;
    padding: 4.16vw;
    margin-bottom: 4.166vw;
  }
  .service_common .section-strength .list-strength .number {
    font-size: 1.73611vw;
  }
  .service_common .section-strength .list-strength .title {
    font-size: 1.25vw;
    margin: 1.66vw 0 2.36vw 0;
  }
  .service_common .section-strength .list-strength .text {
    font-size: 0.97222vw;
    line-height: 1.94vw;
  }
  .service_common .section-client {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .service_common .section-client .text-headding {
    width: 100%;
  }
  .service_common .section-client .list-client li {
    width: 12.77vw;
  }
  .service_common .list-colum li {
    width: 25vw;
    height: 34.77vw;
  }
  .service_common .list-colum li .detail-box {
    margin: 0 2.22vw;
  }
  .service_common .list-colum li .client {
    font-size: 0.83333vw;
    margin-top: 1.66vw;
  }
  .service_common .list-colum li .title {
    font-size: 1.25vw;
    margin: 0.34vw 0;
    letter-spacing: 0.41vw;
  }
  .service_common .list-colum li .category {
    font-size: 0.83333vw;
  }
  .service_common .list-colum li .text-content {
    margin: 1.66vw 0;
    font-size: 0.97222vw;
    line-height: 1.45vw;
  }
  .service_common .section-works {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .service_common .section-works .text-headding {
    width: 100%;
  }
  .service .section-product {
    margin: 12.5vw 0;
    padding: 4.86vw 0 8.33vw 0;
  }
  .service .section-product .section-inner:before {
    left: -36vw;
  }
  .service .section-digital {
    margin: 12.5vw 0;
    padding: 4.86vw 0 8.33vw 0;
  }
  .service .section-digital .section-inner:before {
    left: -107vw;
  }
}

@media screen and (max-width: 750px) {
  .service_common .section-flow {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .service_common .section-flow .list-step {
    display: block;
  }
  .service_common .section-flow .list-step li {
    width: 100%;
    margin-bottom: 6.4vw;
  }
  .service_common .section-flow .list-step .step {
    height: 16vw;
    line-height: 16vw;
    font-size: 5.33333vw;
  }
  .service_common .section-flow .list-step .title {
    font-size: 4.8vw;
    margin: 6.4vw 0;
  }
  .service_common .section-flow .list-step .text {
    font-size: 4vw;
    line-height: 8vw;
  }
  .service_common .section-strength {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .service_common .section-strength .list-strength {
    display: block;
  }
  .service_common .section-strength .list-strength li {
    width: 100%;
    height: auto;
    margin-bottom: 7.46vw;
  }
  .service_common .section-strength .list-strength li:last-child {
    margin-bottom: 0;
  }
  .service_common .section-strength .list-strength .number {
    font-size: 4.8vw;
  }
  .service_common .section-strength .list-strength .title {
    font-size: 4vw;
  }
  .service_common .section-strength .list-strength .text {
    font-size: 3.46667vw;
    line-height: 6.93vw;
  }
  .service_common .section-client {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .service_common .section-client .list-client li {
    width: 28.8vw;
    margin-bottom: 2.13vw;
  }
  .service_common .section-works {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .service_common .list-colum li {
    width: 100%;
    height: 99.4vw;
    margin-bottom: 7.46vw;
  }
  .service_common .list-colum li:last-child {
    margin-bottom: 0;
  }
  .service_common .list-colum li a:before {
    width: 8.53vw;
    height: 2.93vw;
    bottom: 4vw;
    right: 4vw;
  }
  .service_common .list-colum li .detail-box {
    margin: 0 6.4vw;
  }
  .service_common .list-colum li .client {
    margin-top: 5.5vw;
    font-size: 3.2vw;
  }
  .service_common .list-colum li .title {
    font-size: 4.8vw;
    margin: 2.5vw 0;
  }
  .service_common .list-colum li .category {
    font-size: 3.2vw;
  }
  .service_common .list-colum li .text-content {
    font-size: 3.46667vw;
    margin: 5.5vw 0;
    line-height: 6.93vw;
  }
  .service_common .list-colum li .date {
    font-size: 3.2vw;
    margin-right: 8.53vw;
  }
  .service .section-product {
    margin-top: 26vw;
    padding-top: 18.6vw 0;
  }
  .service .section-digital .btn-more {
    position: initial;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.works.active .section-detail_image {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.works .section-head:before {
  background: url(/assets/img/works/img-head.webp) no-repeat;
  background-size: 100%;
}

.works .section-content {
  position: relative;
  overflow: hidden;
  margin-top: 178px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.works .section-content.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.works .section-content.isView .section-inner:after {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.works .section-content .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -400px;
  left: -500px;
}

@media screen and (max-width: 1200px) {
  .works .section-content .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-content .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.works .section-content .section-inner:after {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: initial;
  left: initial;
  right: -400px;
  bottom: -400px;
}

@media screen and (max-width: 1200px) {
  .works .section-content .section-inner:after {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-content .section-inner:after {
    width: 36.5vw;
    top: -40vw;
  }
}

.works .section-content .list-works {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-transition: all 1s ease 0.4s;
  transition: all 1s ease 0.4s;
}

.works .section-content .list-works li {
  width: 560px;
  height: 510px;
  margin-bottom: 80px;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
}

.works .section-content .list-works li:hover img {
  /* -webkit-transform: scale(1.1); */
          /* transform: scale(1.1); */
}

.works .section-content .list-works li:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.works .section-content .list-works li:nth-child(even) {
  margin-top: 80px;
}

.works .section-content .list-works li .thumb {
  overflow: hidden;
}

.works .section-content .list-works li img {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.works .section-content .list-works li a {
  position: relative;
  text-decoration: none;
  color: #111;
  width: 100%;
  height: 100%;
  display: block;
}

.works .section-content .list-works li a:before {
  content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  z-index: 50;
  left: 32px;
  bottom: 32px;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  left: initial;
  right: 30px;
  bottom: 32px;
}

.works .section-content .list-works li .detail-box {
  position: relative;
  margin: 0 80px;
}

.works .section-content .list-works li .detail-box:before {
  content: "";
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 30px;
  height: 88px;
  background-size: 100%;
  position: absolute;
  left: -50px;
  top: -70px;
}

.works .section-content .list-works li .client {
  font-size: 12px;
  font-weight: bold;
  margin-top: 21px;
}

.works .section-content .list-works li .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  margin: 10px 0;
  letter-spacing: 0.6px;
}

.works .section-content .list-works li .state-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.works .section-content .list-works li .date {
  color: #888888;
  font-size: 12px;
  margin-right: 32px;
  font-family: "akrobat";
  letter-spacing: 1.5px;
}

.works .section-content .list-works li .category {
  color: #888888;
  font-size: 12px;
  font-family: "akrobat";
  line-height: 1.5;
}

.works .section-content .list-works li .text-content {
  margin: 24px 0;
  font-size: 14px;
  line-height: 21px;
}

.works .section-detail_image {
  margin-top: 175px;
  -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.works .section-detail_image .main-pict {
  margin-bottom: 40px;
}

.works .section-detail_image .main-pict figure {
  width: 760px;
  margin: 0 auto;
}

.works .section-detail_image .main-pict figure img {
  width: 100%;
}

.works .section-detail_work {
  overflow: hidden;
  padding-top: 40px;
  margin-bottom: 80px;
}

.works .section-detail_work.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.works .section-detail_work.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.works .section-detail_work.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.works .section-detail_work .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: -550px;
}

@media screen and (max-width: 1200px) {
  .works .section-detail_work .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-detail_work .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.works .section-detail_work h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: 0.56px;
}

.works .section-detail_work h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .works .section-detail_work h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-detail_work h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.works .section-detail_work h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  top: 0;
}

@media screen and (max-width: 1200px) {
  .works .section-detail_work h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-detail_work h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.works .section-detail_work h2 span {
  display: block;
}

.works .section-detail_work h2 .text-mini {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 14px;
}

.works .section-detail_work h2 .text-cat {
  margin-top: 14px;
  font-size: 12px;
  color: #888888;
}

.works .section-detail_work .url-box a {
  position: relative;
  display: inline-block;
  background-color: #888888;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 1.5px;
  font-size: 12px;
  font-weight: bold;
  font-family: "akrobat";
  border-radius: 25px;
  text-align: center;
  padding: 0 14px 0 48px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.works .section-detail_work .url-box a:before {
  content: "";
  background: url(/assets/img/icon-blank-white.webp) no-repeat;
  width: 14px;
  height: 16px;
  background-size: 100%;
  position: absolute;
  left: 23px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.works .section-detail_work .text-box {
  margin-top: 60px;
}

.works .section-detail_work .text-box h3 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 35px;
}

.works .section-detail_work .text-box .text {
  font-size: 16px;
  line-height: 37px;
  margin-bottom: 40px;
}

.works .section-detail_work .text-box figure {
  width: 100%;
  margin-bottom: 40px;
}

.works .section-detail_work .text-box figure img {
  width: 100%;
}

.works .section-detail_work .text-box .text-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #454a84;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 2px;
  margin-bottom: 40px;
  padding-left: 20px;
}

.works .section-detail_work .text-box .text-link.blank:before {
  content: "";
  background: url(/assets/img/works/icon-blank-blue.webp) no-repeat;
  width: 15px;
  height: 16px;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.works .section-detail_work .text-box .text-link:after {
  content: "";
  width: 0;
  height: 1px;
  background-color: #454a84;
  position: absolute;
  left: 0;
  bottom: -1px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.works .section-detail_work .text-box .text-link:hover:after {
  width: 100%;
}

.works .section-detail_work .text-box .image-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.works .section-detail_work .text-box .image-box.sp figure {
  width: 30%;
}

.works .section-detail_work .text-box .image-box figure {
  width: 48%;
}

.works .section-detail_work .text-box a {
  position: relative;
  display: inline-block;
  color: #4f548f;
  padding-left: 15px;
  text-decoration: none;
  line-height: initial;
}

.works .section-detail_work .text-box a:before {
  content: "";
  background: url(/assets/img/icon-blank-blue.webp) no-repeat;
  width: 13px;
  height: 14px;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.works .section-detail_work .text-box a:after {
  content: "";
  width: 0;
  height: 1px;
  background-color: #454a84;
  position: absolute;
  left: 0;
  bottom: -1px;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.works .section-detail_work .text-box a:hover:after {
  width: 100%;
}

.works .section-works {
  position: relative;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 80px;
  overflow: hidden;
}

.works .section-works.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.works .section-works.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.works .section-works.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.works .section-works.isView .text-headding {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.works .section-works.isView .list-colum {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.works .section-works .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: 130px;
}

@media screen and (max-width: 1200px) {
  .works .section-works .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-works .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.works .section-works h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.works .section-works h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .works .section-works h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-works h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.works .section-works h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .works .section-works h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-works h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.works .section-works .text-headding {
  position: relative;
  width: 500px;
  margin-bottom: 70px;
  font-size: 14px;
  line-height: 28px;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  width: 100%;
  margin-bottom: 50px;
}

@media screen and (max-width: 1200px) {
  .works .section-works .text-headding {
    width: 34.7vw;
    margin-bottom: 4.86vw;
    font-size: 0.97vw;
    line-height: 1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-works .text-headding {
    width: 100%;
    font-size: 4vw;
    line-height: 6.4vw;
    margin-bottom: 7.2vw;
  }
}

.works .section-works .list-colum {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 1s ease 0.4s;
  transition: all 1s ease 0.4s;
}

.works .section-works .list-colum li {
  width: 360px;
  height: 400px;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
}

.works .section-works .list-colum li:hover img {
  /* -webkit-transform: scale(1.1); */
          /* transform: scale(1.1); */
}

.works .section-works .list-colum li:hover a:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.works .section-works .list-colum li .thumb {
  overflow: hidden;
}

.works .section-works .list-colum li img {
  width: 100%;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.works .section-works .list-colum li a {
  position: relative;
  text-decoration: none;
  color: #111;
  width: 100%;
  height: 100%;
  display: block;
}

.works .section-works .list-colum li a:before {
  content: "";
  background: url(/assets/img/icon-arrow-black.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  z-index: 50;
  left: 32px;
  bottom: 32px;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  left: initial;
  right: 30px;
  bottom: 32px;
}

.works .section-works .list-colum li:nth-child(n + 4) {
  margin-bottom: 0;
}

.works .section-works .list-colum li .detail-box {
  margin: 0 32px;
}

.works .section-works .list-colum li .client {
  font-size: 12px;
  font-weight: bold;
  margin-top: 24px;
}

.works .section-works .list-colum li .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  margin: 5px 0;
  letter-spacing: 0.6px;
}

.works .section-works .list-colum li .state-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.works .section-works .list-colum li .date {
  color: #888888;
  font-size: 12px;
  margin-right: 32px;
  font-family: "akrobat";
  letter-spacing: 1.5px;
  line-height: 1.5;
}

.works .section-works .list-colum li .category {
  color: #888888;
  font-size: 12px;
  font-family: "akrobat";
  line-height: 1.5;
}

.works .section-works .list-colum li .text-content {
  margin: 24px 0;
  font-size: 14px;
  line-height: 21px;
}

.works .section-works .btn-more {
  margin-top: 60px;
}

.works .section-works .btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  margin: 0 auto;
}

.works .section-works .btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.works .section-works .btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.works .section-works .btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.works .section-works .btn-more a:hover {
  color: #111;
}

.works .section-works .btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .works .section-works .btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .works .section-works .btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .works .section-works .btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .works .section-works .btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-works .btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .works .section-works .btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.works .section-works .btn-more a:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

@media screen and (max-width: 1200px) {
  .works .section-content {
    margin-top: 12.36vw;
    padding-top: 2.77vw;
    padding-bottom: 2.77vw;
  }
  .works .section-content .list-works li {
    width: 38.8vw;
    height: 35.41vw;
    margin-bottom: 5.55vw;
  }
  .works .section-content .list-works li .detail-box {
    margin: 0 5.55vw;
  }
  .works .section-content .list-works li .client {
    font-size: 0.83333vw;
    margin-top: 2vw;
  }
  .works .section-content .list-works li .title {
    font-size: 1.25vw;
    margin: 0.54vw;
  }
  .works .section-content .list-works li .category {
    font-size: 0.83333vw;
  }
  .works .section-detail_image {
    margin-top: 12.15vw;
  }
  .works .section-detail_image .main-pict {
    margin-bottom: 2.77vw;
  }
  .works .section-detail_image .main-pict figure {
    width: 52.77vw;
  }
  .works .section-detail_work {
    padding-top: 2.77vw;
    margin-bottom: 5.55vw;
  }
  .works .section-detail_work h2 {
    font-size: 2.15278vw;
  }
  .works .section-detail_work h2 .text-mini {
    font-size: 0.83333vw;
    margin-bottom: 0.97vw;
  }
  .works .section-detail_work h2 .text-cat {
    margin-top: 0.97vw;
    font-size: 0.83333vw;
  }
  .works .section-detail_work .url-box a {
    height: 2.77vw;
    line-height: 2.77vw;
    font-size: 0.83333vw;
    padding: 0 1.97vw 0 3.4vw;
    letter-spacing: 0.1vw;
  }
  .works .section-detail_work .url-box a:before {
    width: 0.97vw;
    height: 1.11vw;
    left: 1.59vw;
  }
  .works .section-detail_work .text-box {
    margin-top: 4.16vw;
  }
  .works .section-detail_work .text-box h3 {
    font-size: 1.52778vw;
    margin-bottom: 2.43vw;
  }
  .works .section-detail_work .text-box .text {
    font-size: 1.11111vw;
    line-height: 2.56vw;
    margin-bottom: 2.77vw;
  }
  .works .section-detail_work .text-box figure {
    margin-bottom: 2.77vw;
  }
  .works .section-detail_work .text-box .text-link {
    font-size: 1.11111vw;
    margin-bottom: 2.77vw;
    padding-bottom: 0.13vw;
  }
  .works .section-detail_work .text-box a {
    padding-left: 1.04167vw;
    font-size: 0.97222vw;
  }
  .works .section-detail_work .text-box a:before {
    width: 0.90278vw;
    height: 0.97222vw;
  }
  .works .section-works {
    padding-top: 6.94vw;
    padding-bottom: 6.94vw;
    margin-bottom: 5.55vw;
  }
  .works .section-works .text-headding {
    width: 100%;
  }
  .works .section-works .list-colum li {
    width: 25vw;
    height: 34.77vw;
  }
  .works .section-works .list-colum li .detail-box {
    margin: 0 2.22vw;
  }
  .works .section-works .list-colum li .client {
    font-size: 0.83333vw;
    margin-top: 1.66vw;
  }
  .works .section-works .list-colum li .title {
    font-size: 1.25vw;
    line-height: 2.5vw;
    margin: 0.34vw 0;
    letter-spacing: 0.41vw;
  }
  .works .section-works .list-colum li .category {
    font-size: 0.83333vw;
  }
  .works .section-works .list-colum li .text-content {
    margin: 1.66vw 0;
    font-size: 0.97222vw;
    line-height: 1.45vw;
  }
}

@media screen and (max-width: 750px) {
  .works .section-content {
    margin-top: 38.1vw;
    padding-top: 10.6vw;
    padding-bottom: 5vw;
  }
  .works .section-content .list-works {
    display: block;
  }
  .works .section-content .list-works li {
    width: 100%;
    height: auto;
    margin-bottom: 8vw;
  }
  .works .section-content .list-works li:nth-child(even) {
    margin-top: 0;
  }
  .works .section-content .list-works li:last-child {
    margin-bottom: 0;
  }
  .works .section-content .list-works li a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.4vw;
    bottom: 6.4vw;
  }
  .works .section-content .list-works li .detail-box {
    margin: initial;
    padding: 6.4vw;
  }
  .works .section-content .list-works li .client {
    font-size: 3.2vw;
    margin-top: 0;
  }
  .works .section-content .list-works li .title {
    font-size: 4.8vw;
    margin: 3.73vw 0;
    letter-spacing: initial;
  }
  .works .section-content .list-works li .category {
    font-size: 3.2vw;
  }
  .works .section-detail_image {
    margin-top: 38.6vw;
    margin-bottom: 8.53vw;
  }
  .works .section-detail_image .main-pict figure {
    width: 100%;
  }
  .works .section-detail_work {
    padding-top: 8.53vw;
    margin-bottom: 10.66vw;
  }
  .works .section-detail_work h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
  }
  .works .section-detail_work h2:before {
    top: 3vw;
  }
  .works .section-detail_work h2 .text-mini {
    font-size: 3.2vw;
    margin-bottom: 2.13vw;
  }
  .works .section-detail_work h2 .text-cat {
    font-size: 3.2vw;
    margin-top: 2.13vw;
  }
  .works .section-detail_work .url-box {
    margin-left: 7vw;
  }
  .works .section-detail_work .url-box a {
    height: 10.6vw;
    line-height: 10.6vw;
    padding: 0 2vw 0 6vw;
    font-size: 3.2vw;
    letter-spacing: 0.4vw;
  }
  .works .section-detail_work .url-box a:before {
    width: 3vw;
    height: 3vw;
  }
  .works .section-detail_work .text-box {
    margin-top: 11.2vw;
  }
  .works .section-detail_work .text-box h3 {
    font-size: 4.8vw;
    margin-bottom: 6.4vw;
    line-height: 8vw;
  }
  .works .section-detail_work .text-box .text {
    font-size: 4vw;
    line-height: 8vw;
    margin-bottom: 6.4vw;
  }
  .works .section-detail_work .text-box figure {
    margin-bottom: 6.4vw;
  }
  .works .section-detail_work .text-box .text-link {
    margin-bottom: 6.4vw;
    line-height: 8vw;
    font-size: 4vw;
  }
  .works .section-detail_work .text-box a {
    font-size: 4vw;
    padding-left: 4.26667vw;
  }
  .works .section-detail_work .text-box a:before {
    width: 4vw;
    height: 4.26667vw;
  }
  .works .section-works {
    margin-bottom: 12.5vw;
    padding-top: 20.8vw;
    padding-bottom: 9.6vw;
  }
  .works .section-works .list-colum li {
    width: 100%;
    height: 99.4vw;
    margin-bottom: 7.46vw;
  }
  .works .section-works .list-colum li:last-child {
    margin-bottom: 0;
  }
  .works .section-works .list-colum li a:before {
    width: 8.53vw;
    height: 2.93vw;
    bottom: 4vw;
    right: 4vw;
  }
  .works .section-works .list-colum li .detail-box {
    margin: 0 6.4vw;
  }
  .works .section-works .list-colum li .client {
    margin-top: 5.5vw;
    font-size: 3.2vw;
  }
  .works .section-works .list-colum li .title {
    font-size: 4.8vw;
    line-height: 8.53vw;
    margin: 2vw 0;
  }
  .works .section-works .list-colum li .category {
    font-size: 3.2vw;
  }
  .works .section-works .list-colum li .text-content {
    font-size: 3.46667vw;
    margin: 5.5vw 0;
    line-height: 6.93vw;
  }
  .works .section-works .list-colum li .date {
    font-size: 3.2vw;
    margin-right: 8.53vw;
  }
}

.about .section-head:before {
  background: url(/assets/img/about/img-head.webp) no-repeat;
  background-size: 100%;
}

.about .section-outline {
  margin-top: 190px;
  padding-top: 90px;
  padding-bottom: 80px;
  overflow: hidden;
}

.about .section-outline.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.about .section-outline.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-outline.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-outline.isView .btn-black.btn-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.about .section-outline.isView .btn-black.btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  width: 370px;
  margin-top: -30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

.about .section-outline.isView .btn-black.btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.about .section-outline.isView .btn-black.btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.about .section-outline.isView .btn-black.btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.about .section-outline.isView .btn-black.btn-more a:hover {
  color: #111;
}

.about .section-outline.isView .btn-black.btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .about .section-outline.isView .btn-black.btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-outline.isView .btn-black.btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.about .section-outline.isView .btn-black.btn-more a > span {
  font-weight: bold;
}

.about .section-outline.isView .btn-black.btn-more a:hover:after {
  width: calc(100% + 20px);
}

.about .section-outline .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: -130px;
}

@media screen and (max-width: 1200px) {
  .about .section-outline .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-outline .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.about .section-outline h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.about .section-outline h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .about .section-outline h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-outline h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.about .section-outline h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .about .section-outline h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-outline h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.about .section-outline .white-area {
  position: relative;
  background-color: #fff;
  padding: 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
}

.about .section-outline .white-area .certification {
  position: absolute;
  right: 80px;
  top: 80px;
}

.about .section-outline .white-area dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 28px;
}

.about .section-outline .white-area dt {
  width: 150px;
  min-height: 90px;
  border-top: solid 1px #111;
  font-size: 14px;
  font-weight: bold;
  margin-right: 40px;
  padding-top: 28px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.about .section-outline .white-area dd {
  width: 290px;
  border-top: solid 1px #f4f4f4;
  padding-top: 28px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 14px;
}

.about .section-outline .white-area .icon-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
}

.about .section-outline .white-area .icon-box figure {
  margin-right: 18px;
}

.about .section-outline .white-area .icon-box .icon-pp {
  width: 60px;
  height: 60px;
  padding-bottom: 9px;
}

.about .section-outline .white-area .icon-box .icon-pp img {
  width: 100%;
  height: 100%;
}

.about .section-outline .white-area .icon-box .icon-aws {
  width: 120px;
  height: 33.78px;
}

.about .section-outline .white-area .icon-box .icon-aws img {
  width: 100%;
  height: 100%;
}

.about .section-outline .white-area .list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 850px;
}

.about .section-outline .white-area .list-box .list-client:first-child {
  margin-right: 280px;
}

.about .section-outline .white-area .list-box li {
  margin-bottom: 8px;
}

.about .section-management {
  position: relative;
  margin-top: 80px;
  padding-top: 90px;
  padding-bottom: 80px;
  overflow: hidden;
}

.about .section-management.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.about .section-management.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-management.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-management .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: 130px;
}

@media screen and (max-width: 1200px) {
  .about .section-management .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-management .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.about .section-management h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
}

.about .section-management h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .about .section-management h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-management h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.about .section-management h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .about .section-management h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-management h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.about .section-management .management-area {
  background-color: #fff;
  padding: 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
          box-shadow: 16px 16px 40px 0px rgba(0, 0, 0, 0.06);
}

.about .section-management .list-member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.about .section-management .list-member li {
  width: 493px;
  margin-bottom: 56px;
}

.about .section-management .list-member .position {
  position: relative;
  font-size: 12px;
  font-weight: bold;
}

.about .section-management .list-member .position:before {
  content: "";
  background: url(/assets/img/concept/border-mini-black.webp) no-repeat;
  width: 7px;
  height: 14px;
  background-size: 100%;
  position: absolute;
  left: -10px;
  top: -10px;
}

.about .section-management .list-member .position.yellow_border:before {
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  background-size: 100%;
}

.about .section-management .list-member .name {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.6px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.about .section-management .list-member .name span {
  display: inline-block;
  margin-left: 10px;
  font-family: "akrobat";
  font-weight: bold;
}

.about .section-management .list-member .text {
  font-size: 14px;
  line-height: 28px;
}

.about .section-access {
  position: relative;
  margin-top: 80px;
  margin-bottom: 80px;
  padding-top: 90px;
  padding-bottom: 80px;
  overflow: hidden;
}

.about .section-access.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.about .section-access.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-access.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-access .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 1000px;
  top: -187px;
  left: 0;
}

@media screen and (max-width: 1200px) {
  .about .section-access .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-access .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.about .section-access h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  margin-bottom: 60px;
}

.about .section-access h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .about .section-access h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-access h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.about .section-access h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .about .section-access h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-access h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.about .section-access .access-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.about .section-access .access-area .map-box {
  width: 47.2vw;
  margin-right: 70px;
}

.about .section-access .access-area .map-box #map {
  position: relative;
  width: 100%;
  height: 362px;
}

.about .section-access .access-area .map-box #map .gmnoprint,
.about .section-access .access-area .map-box #map .gm-style-cc {
  display: none !important;
}

.about .section-access .access-area .map-box #map:before {
  content: "";
  background: url(/assets/img/about/bg-tri-map.webp) no-repeat;
  width: 101px;
  height: 360px;
  background-size: 100%;
  position: absolute;
  right: -1px;
  bottom: 0;
  z-index: 10;
}

.about .section-access .access-area .address-box .text-box {
  margin-bottom: 40px;
}

.about .section-access .access-area .address-box .text-big {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}

.about .section-access .access-area .address-box .text-small {
  font-size: 14px;
  line-height: 28px;
}

.about .section-access .access-area .btn-map a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
}

.about .section-access .access-area .btn-map a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.about .section-access .access-area .btn-map a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.about .section-access .access-area .btn-map a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.about .section-access .access-area .btn-map a:hover {
  color: #111;
}

.about .section-access .access-area .btn-map a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .about .section-access .access-area .btn-map a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .about .section-access .access-area .btn-map a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .about .section-access .access-area .btn-map a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .about .section-access .access-area .btn-map a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-access .access-area .btn-map a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .about .section-access .access-area .btn-map a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.about .text-office {
  margin-top: 187px;
  text-align: center;
  font-size: 18px;
  line-height: 42px;
}

.about .office-pict-area {
  overflow: hidden;
  margin-bottom: 80px;
  padding-top: 80px;
}

.about .office-pict-area.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.about .office-pict-area .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -187px;
  left: initial;
  right: 0;
}

@media screen and (max-width: 1200px) {
  .about .office-pict-area .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .about .office-pict-area .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.about .office-pict-area .list-office {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.about .office-pict-area .list-office li {
  width: 360px;
  height: 240px;
  margin-bottom: 60px;
}

.about .office-pict-area .list-office li:first-child {
  height: 242px;
}

.about .office-pict-area .list-office li img {
  width: 100%;
  height: 100%;
}

.about .section-office {
  position: relative;
  margin-top: 80px;
  margin-bottom: 104px;
  padding-top: 80px;
  padding-bottom: 507px;
  overflow: hidden;
}

.about .section-office.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.about .section-office.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-office.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.about .section-office:before {
  content: "";
  background: url(/assets/img/about/office/img-main.webp) no-repeat center center;
  width: 65.5vw;
  height: 715px;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 40px;
}

.about .section-office .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  height: 1000px;
  top: -187px;
  left: 0;
}

@media screen and (max-width: 1200px) {
  .about .section-office .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-office .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.about .section-office h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  margin-bottom: 60px;
}

.about .section-office h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .about .section-office h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-office h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.about .section-office h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .about .section-office h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-office h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

@media screen and (max-width: 1200px) {
  .about .section-outline {
    margin-top: 13.1vw;
    padding-top: 6.25vw;
    padding-bottom: 5.55vw;
  }
  .about .section-outline.isView .btn-black.btn-more a {
    position: relative;
    display: block;
    width: 330px;
    background-color: #111;
    color: #fff;
    font-family: "akrobat";
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    letter-spacing: 3.5px;
    height: 80px;
    line-height: 80px;
    -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
            box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    -webkit-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
    width: 28.9vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:before {
    content: "";
    background: url(/assets/img/icon-arrow-white.webp) no-repeat;
    width: 32px;
    height: 11px;
    background-size: 100%;
    position: absolute;
    top: 50%;
    margin-top: -5.5px;
    right: 32px;
    -webkit-transition: -webkit-transform 0.2s ease-out;
    transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
  }
  .about .section-outline.isView .btn-black.btn-more a:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
    transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
    right: auto;
    left: -70px;
    bottom: -60px;
  }
  .about .section-outline.isView .btn-black.btn-more a:hover:after {
    width: 350px;
    height: 350px;
    opacity: 1;
  }
  .about .section-outline.isView .btn-black.btn-more a:hover {
    color: #111;
  }
  .about .section-outline.isView .btn-black.btn-more a span {
    font-family: "akrobat";
    position: relative;
    z-index: 10;
  }
}

@media screen and (max-width: 1200px) and (max-width: 1200px) {
  .about .section-outline.isView .btn-black.btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 1200px) and (max-width: 750px) {
  .about .section-outline.isView .btn-black.btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .about .section-outline.isView .btn-black.btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

@media screen and (max-width: 1200px) {
  .about .section-outline .white-area {
    padding: 5.55vw;
  }
  .about .section-outline .white-area dl {
    line-height: 1.94vw;
  }
  .about .section-outline .white-area dt {
    width: 10.4vw;
    font-size: 0.97222vw;
    margin-right: 2.77vw;
    padding-top: 1.94vw;
    min-height: 6.25vw;
  }
  .about .section-outline .white-area dd {
    width: 20.1vw;
    padding-top: 1.94vw;
    font-size: 0.97222vw;
  }
  .about .section-outline .white-area .list-box {
    width: 59vw;
  }
  .about .section-outline .white-area .list-box li {
    margin-bottom: 0.5vw;
  }
  .about .section-outline .white-area .list-box .list-client:first-child {
    margin-right: 19.4vw;
  }
  .about .section-management {
    margin-top: 5.55vw;
    padding-top: 6.25vw;
    padding-bottom: 5.55vw;
  }
  .about .section-management .management-area {
    padding: 5.55vw;
  }
  .about .section-management .list-member li {
    width: 34.2vw;
    margin-bottom: 3.88vw;
  }
  .about .section-management .list-member .position {
    font-size: 0.83333vw;
  }
  .about .section-management .list-member .name {
    font-size: 1.25vw;
    margin-top: 0.69vw;
    margin-bottom: 1.73vw;
  }
  .about .section-management .list-member .name span {
    margin-left: 0.69vw;
  }
  .about .section-management .list-member .text {
    font-size: 0.97222vw;
    line-height: 1.94vw;
  }
  .about .section-access {
    margin-top: 5.5vw;
    margin-bottom: 5.55vw;
    padding-top: 6.25vw;
    padding-bottom: 5.55vw;
  }
  .about .section-access .access-area .map-box {
    margin-right: 4.86vw;
  }
  .about .section-access .access-area .map-box #map {
    height: 25.1vw;
  }
  .about .section-access .access-area .map-box #map:before {
    display: none;
  }
  .about .section-access .access-area .address-box .text-box {
    margin-bottom: 2.77vw;
  }
  .about .section-access .access-area .address-box .text-big {
    font-size: 0.97222vw;
    margin-bottom: 1.11vw;
  }
  .about .section-access .access-area .address-box .text-small {
    font-size: 0.97222vw;
    line-height: 1.94vw;
  }
  .about .text-office {
    margin-top: 12.98611vw;
    font-size: 1.25vw;
    line-height: 2.91667vw;
  }
  .about .section-office {
    margin-top: 5.55556vw;
    margin-bottom: 7.22222vw;
    padding-top: 5.55556vw;
    padding-bottom: 35.20833vw;
  }
  .about .section-office:before {
    top: 2.77778vw;
  }
  .about .office-pict-area {
    margin-bottom: 5.55556vw;
    padding-top: 5.55556vw;
  }
  .about .office-pict-area .section-inner:before {
    left: 50vw;
  }
  .about .office-pict-area .list-office li {
    width: 25vw;
    margin-bottom: 4.16667vw;
  }
}

@media screen and (max-width: 750px) {
  .about .section-outline {
    margin-top: 38.1vw;
    padding-top: 14.6vw;
    padding-bottom: 0;
  }
  .about .section-outline.isView .btn-black.btn-more a {
    margin-bottom: 30px;
  }
  .about .section-outline .white-area {
    padding: 10.6vw 6.66vw;
  }
  .about .section-outline .white-area dl {
    line-height: 6.93vw;
  }
  .about .section-outline .white-area dt {
    width: 21.3vw;
    font-size: 3.46667vw;
    min-height: 24vw;
    padding-top: 6.4vw;
    padding-bottom: 6.4vw;
  }
  .about .section-outline .white-area dd {
    width: 50.6vw;
    font-size: 3.46667vw;
    padding-top: 6.4vw;
    padding-bottom: 6.4vw;
  }
  .about .section-outline .white-area .certification {
    position: relative;
    top: initial;
    right: initial;
  }
  .about .section-outline .white-area .icon-box {
    display: block;
    margin-top: 4.8vw;
  }
  .about .section-outline .white-area .icon-box .icon-pp {
    width: 13.8vw;
  }
  .about .section-outline .white-area .icon-box .icon-aws {
    width: 28.2vw;
  }
  .about .section-outline .white-area .list-box {
    display: block;
    width: 50.6vw;
  }
  .about .section-outline .white-area .list-box .list-client:first-child {
    margin-right: 0;
  }
  .about .section-management {
    margin-top: 10.6vw;
    padding-top: 14.1vw;
    padding-bottom: 10.6vw;
  }
  .about .section-management .management-area {
    padding: 10.6vw 6.66vw;
  }
  .about .section-management .list-member {
    display: block;
  }
  .about .section-management .list-member li {
    width: 100%;
    margin-bottom: 10.6vw;
  }
  .about .section-management .list-member li:last-child {
    margin-bottom: 0;
  }
  .about .section-management .list-member .position {
    font-size: 3.2vw;
  }
  .about .section-management .list-member .position:before {
    width: 1.86vw;
    height: 3.46vw;
    left: -3vw;
    top: -3vw;
  }
  .about .section-management .list-member .name {
    font-size: 4.8vw;
    margin-top: 2.13vw;
    margin-bottom: 7.2vw;
  }
  .about .section-management .list-member .name span {
    font-size: 4.8vw;
    margin-left: 4.26vw;
  }
  .about .section-management .list-member .text {
    font-size: 4vw;
    line-height: 8vw;
  }
  .about .section-access {
    margin-top: 10.6vw;
    margin-bottom: 10.6vw;
    padding-top: 14.1vw;
    padding-bottom: 10.6vw;
  }
  .about .section-access h2 {
    margin-bottom: 8vw;
  }
  .about .section-access .access-area {
    display: block;
    padding: 0 4.8vw;
  }
  .about .section-access .access-area .map-box {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10.6vw;
  }
  .about .section-access .access-area .map-box #map {
    height: 51.4vw;
  }
  .about .section-access .access-area .address-box .text-box {
    margin-bottom: 10.6vw;
  }
  .about .section-access .access-area .address-box .text-big {
    font-size: 4vw;
    margin-bottom: 4.26vw;
  }
  .about .section-access .access-area .address-box .text-small {
    font-size: 4vw;
    line-height: 8vw;
  }
  .about .section-access .access-area .btn-map {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .about .text-office {
    margin-top: 39.46667vw;
    font-size: 4vw;
    line-height: 8vw;
    padding: 0 4.8vw;
  }
  .about .section-office {
    margin-top: 8.53333vw;
    padding-top: 14.13333vw;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .about .section-office .section-inner:before {
    display: none;
  }
  .about .office-pict-area {
    padding-bottom: 10.66667vw;
    margin-bottom: 10.66667vw;
  }
  .about .office-pict-area .section-inner:before {
    left: -25vw;
    height: 300vw;
  }
  .about .office-pict-area .list-office {
    display: block;
  }
  .about .office-pict-area .list-office li {
    width: 100%;
    margin-bottom: 7.46667vw;
  }
  .about .office-pict-area .list-office li:last-child {
    margin-bottom: 0;
  }
}

.blog .section-head:before {
  background: url(/assets/img/blog/img-head.webp) no-repeat;
  background-size: 100%;
}

.blog .section-blog {
  margin-top: 186px;
}

.blog .section-blog .navi-category {
  display: inline-block;
  border-top: solid 1px #d0d0d0;
}

.blog .section-blog .navi-category ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 32px;
}

.blog .section-blog .navi-category ul li {
  position: relative;
  font-size: 14px;
  margin-right: 20px;
}

.blog .section-blog .navi-category ul li.active {
  font-weight: bold;
}

.blog .section-blog .navi-category ul li.active:before {
  content: "";
  width: 100%;
  height: 6px;
  position: absolute;
  top: -35px;
  left: 0;
  background-color: #f6de79;
}

.blog .section-blog .navi-category ul li:last-child {
  margin-right: 0;
}

.blog .section-blog .navi-category ul li:first-child a {
  padding-left: 20px;
}

.blog .section-blog .navi-category ul li:first-child a:before {
  content: "";
  background: url(/assets/img/blog/icon-all.webp) no-repeat;
  width: 12px;
  height: 12px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}

.blog .section-blog .navi-category ul li a {
  display: block;
  position: relative;
  color: #000;
  text-decoration: none;
}

.blog .section-blog .list-blog {
  -webkit-transition: none;
  transition: none;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  margin-top: 90px;
}

.blog .section-blog .list-blog li:nth-child(n + 4) {
  margin-bottom: 60px;
}

.blog .section-blog .pagenation-area {
  margin-top: 60px;
}

.blog .section-blog_detail {
  margin-top: 190px;
  padding-top: 100px;
  padding-bottom: 80px;
  overflow: hidden;
}

.blog .section-blog_detail .hljs-ln {
  border: none !important;
}

.blog .section-blog_detail .hljs-ln tr {
  border-bottom: none !important;
}

.blog .section-blog_detail .hljs-ln td {
  background-color: initial !important;
  padding: 0 0 0 10px !important;
  border: none !important;
  text-align: left !important;
}

.blog .section-blog_detail .hljs-ln .hljs-ln-numbers {
  text-align: center !important;
  color: #ccc !important;
  border-right: 1px solid #ccc !important;
  vertical-align: top !important;
  padding-right: 5px !important;
}

.blog .section-blog_detail.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.blog .section-blog_detail.isView h1 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.blog .section-blog_detail.isView h1:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.blog .section-blog_detail .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -300px;
  left: -600px;
}

@media screen and (max-width: 1200px) {
  .blog .section-blog_detail .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-blog_detail .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.blog .section-blog_detail .post-area {
  width: 960px;
  margin: 0 auto;
}

.blog .section-blog_detail h1 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  display: block;
  margin-bottom: 50px;
  font-size: 31px;
  letter-spacing: 0.56px;
  line-height: 50px;
  color: #000;
}

.blog .section-blog_detail h1 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .blog .section-blog_detail h1 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-blog_detail h1 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.blog .section-blog_detail h1:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  top: 0;
}

@media screen and (max-width: 1200px) {
  .blog .section-blog_detail h1:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-blog_detail h1:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.blog .section-blog_detail .text-option {
  margin-bottom: 40px;
  font-size: 12px;
  color: #888888;
  font-weight: bold;
  letter-spacing: 1.5px;
}

.blog .section-blog_detail .text-option span {
  font-family: "akrobat";
  margin-right: 16px;
}

.blog .section-blog_detail .pict-main {
  position: relative;
  width: 100%;
}

.blog .section-blog_detail .pict-main img {
  width: 100%;
  height: 100%;
}

.blog .section-blog_detail .text-area {
  position: relative;
  width: 700px;
  margin: 0 auto;
  margin-top: 80px;
}

.blog .section-blog_detail .text-area .share-box {
  position: absolute;
  left: -120px;
  top: 0;
  width: 86px;
  padding: 0 10px;
  padding-top: 26px;
  padding-bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #f4f4f4;
  text-align: center;
}

.blog .section-blog_detail .text-area .share-box a {
  padding-left: 0;
  border-bottom: none;
}

.blog .section-blog_detail .text-area .share-box a:before {
  display: none;
}

.blog .section-blog_detail .text-area .share-box img {
  width: 100%;
  height: 100%;
}

.blog .section-blog_detail .text-area .share-box .title-share {
  font-family: "akrobat";
  font-size: 12px;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.blog .section-blog_detail .text-area .share-box li {
  padding: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.blog .section-blog_detail .text-area .share-box li:hover {
  opacity: 0.7;
}

.blog .section-blog_detail .text-area .share-box li:before, .blog .section-blog_detail .text-area .share-box li:after {
  display: none;
}

.blog .section-blog_detail .text-area table {
  border: solid 1px #000;
  margin-bottom: 25px;
}

.blog .section-blog_detail .text-area table tr:first-child td {
  background-color: #999;
}

.blog .section-blog_detail .text-area table tr:last-child {
  border-bottom: none;
}

.blog .section-blog_detail .text-area table tr {
  border-bottom: solid 1px #000;
}

.blog .section-blog_detail .text-area table tr td {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  padding: 8px 2px;
  border-right: solid 1px #000;
}

.blog .section-blog_detail .text-area table tr td:last-child {
  border-right: none;
}

.blog .section-blog_detail .text-area blockquote {
  position: relative;
  background-color: #fff;
  padding: 32px;
  border: solid 2px #f4f4f4;
  margin-bottom: 60px;
  font-size: 14px;
  line-height: 28px;
  color: #000;
}

.blog .section-blog_detail .text-area blockquote:before {
  content: "";
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 7px;
  height: 13px;
  background-size: 100%;
  position: absolute;
  left: 20px;
  top: 30px;
}

.blog .section-blog_detail .text-area ul li,
.blog .section-blog_detail .text-area ol li {
  position: relative;
  font-size: 16px;
  line-height: 37px;
  margin-bottom: 16px;
  padding-left: 1em;
}

.blog .section-blog_detail .text-area ul li:before,
.blog .section-blog_detail .text-area ol li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #999;
}

.blog .section-blog_detail .text-area ol {
  counter-reset: item;
}

.blog .section-blog_detail .text-area ol li {
  padding-left: 1.5em;
}

.blog .section-blog_detail .text-area ol li:before {
  background: none;
  top: 0;
  counter-increment: item;
  content: counter(item) ".";
  font-size: 16px;
  color: #999;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.blog .section-blog_detail .text-area p {
  font-size: 16px;
  line-height: 37px;
  margin-bottom: 36px;
}

.blog .section-blog_detail .text-area .pict {
  width: 100%;
  margin-bottom: 36px;
}

.blog .section-blog_detail .text-area .pict img {
  width: 100%;
}

.blog .section-blog_detail .text-area .profile-box {
  position: relative;
  background-color: #fff;
  padding: 32px;
  border: solid 2px #f4f4f4;
  margin-bottom: 60px;
}

.blog .section-blog_detail .text-area .profile-box:before {
  content: "";
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 7px;
  height: 13px;
  background-size: 100%;
  position: absolute;
  left: 20px;
  top: 30px;
}

.blog .section-blog_detail .text-area .profile-box .text {
  font-size: 14px;
  line-height: 28px;
  margin-bottom: 0;
}

.blog .section-blog_detail .text-area .profile-box span {
  font-weight: bold;
}

.blog .section-blog_detail .text-area h2 {
  font-size: 24px;
  line-height: 38px;
  font-weight: bold;
  padding-top: 12px;
  margin-bottom: 20px;
}

.blog .section-blog_detail .text-area h3 {
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 20px;
}

.blog .section-blog_detail .text-area h4 {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 20px;
}

.blog .section-blog_detail .text-area a {
  position: relative;
  color: #4f548f;
  text-decoration: none;
  line-height: initial;
}

.blog .section-blog_detail .text-area a:hover:after {
  width: 100%;
}

.blog .section-blog_detail .text-area .ctaarea {
  margin: 6vw auto;
  padding: 30px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
}

.blog .section-blog_detail .text-area .ctaarea .ctaarea_title {
  font-size: 18px;
  line-height: 38px;
  font-weight: bold;
  margin-bottom: 20px;
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  min-height: 80px;
  line-height: 130%;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  width: auto;
  min-width: 330px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 100px;
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:hover {
  color: #111;
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a {
    width: auto;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: unset;
    line-height: unset;
  }
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a {
    width: 66.6vw;
    height: unset;
    line-height: unset;
    font-size: 3.73333vw;
  }
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:before {
  left: calc(100% - 4.4vw);
  -webkit-transform: translateY(0) translateX(-100%);
          transform: translateY(0) translateX(-100%);
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a:hover:after {
  width: calc(100% + 20px);
}

.blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a span {
  font-weight: bold;
}

.blog .section-blog_detail .text-area .contributor-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 56px 50px;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
}

.blog .section-blog_detail .text-area .contributor-box figure {
  width: 130px;
  margin-right: 40px;
}

.blog .section-blog_detail .text-area .contributor-box figure img {
  width: 100%;
  height: 130px;
}

.blog .section-blog_detail .text-area .contributor-box .text-box {
  width: 430px;
}

.blog .section-blog_detail .text-area .contributor-box .text-box .name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 24px;
}

.blog .section-blog_detail .text-area .contributor-box .text-box .text {
  font-size: 14px;
  line-height: 28px;
  margin-bottom: 0;
}

.blog .section-related {
  padding-top: 90px;
  overflow: hidden;
}

.blog .section-related.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.blog .section-related.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.blog .section-related.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.blog .section-related .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: 0px;
}

@media screen and (max-width: 1200px) {
  .blog .section-related .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-related .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.blog .section-related h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  margin-bottom: 70px;
}

.blog .section-related h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .blog .section-related h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-related h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.blog .section-related h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
}

@media screen and (max-width: 1200px) {
  .blog .section-related h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-related h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.blog .section-related .list-blog {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
  -webkit-transition: none;
  transition: none;
}

.blog .section-related .btn-more a {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  margin: 0 auto;
}

.blog .section-related .btn-more a:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.blog .section-related .btn-more a:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.blog .section-related .btn-more a:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.blog .section-related .btn-more a:hover {
  color: #111;
}

.blog .section-related .btn-more a span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .blog .section-related .btn-more a {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .blog .section-related .btn-more a:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .blog .section-related .btn-more a:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .blog .section-related .btn-more a:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-related .btn-more a {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .blog .section-related .btn-more a:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

img.fr-fil.fr-dib {
  width: 100%;
  height: 100%;
}

.fr-img-wrap img {
  height: 100%;
}

.fr-view img.fr-dii.fr-fil {
  margin: 0 0 25px 0;
}

@media screen and (max-width: 1200px) {
  .blog .section-blog {
    margin-top: 12.91667vw;
  }
  .blog .section-blog .navi-category ul {
    padding-top: 2.22222vw;
  }
  .blog .section-blog .navi-category ul li {
    font-size: 0.97222vw;
    margin-right: 1.38889vw;
  }
  .blog .section-blog .navi-category ul li.active:before {
    height: 0.3vw;
    top: -2.4vw;
  }
  .blog .section-blog .list-blog {
    margin-top: 6.25vw;
  }
  .blog .section-blog .list-blog li:nth-child(n + 4) {
    margin-bottom: 60px;
  }
  .blog .section-blog_detail {
    margin-top: 13.19444vw;
    padding-top: 6.94444vw;
    padding-bottom: 5.55556vw;
    margin-bottom: 5.55556vw;
  }
  .blog .section-blog_detail .pict-main:before {
    width: 2.22222vw;
    height: 6.11111vw;
    bottom: -3.05556vw;
  }
  .blog .section-blog_detail .post-area {
    width: 66.66667vw;
  }
  .blog .section-blog_detail h1 {
    font-size: 2.15278vw;
    line-height: 3.47222vw;
    top: initial;
    right: initial;
  }
  .blog .section-blog_detail .text-option {
    margin-top: 2.77778vw;
    font-size: 0.83333vw;
    letter-spacing: 0.10417vw;
  }
  .blog .section-blog_detail .text-option span {
    margin-right: 1.11111vw;
  }
  .blog .section-blog_detail .text-area {
    width: 48.61111vw;
    margin-top: 5.55556vw;
  }
  .blog .section-blog_detail .text-area .share-box {
    width: 5.97222vw;
    left: -8.33333vw;
    padding: 0 0.69vw;
    padding-top: 1.80556vw;
  }
  .blog .section-blog_detail .text-area .share-box .title-share {
    font-size: 0.83333vw;
    letter-spacing: 0.10417vw;
    margin-bottom: 0.97222vw;
  }
  .blog .section-blog_detail .text-area table tr td {
    font-size: 1.11111vw;
  }
  .blog .section-blog_detail .text-area blockquote {
    padding: 2.22vw;
    margin-bottom: 4.16667vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .blog .section-blog_detail .text-area blockquote:before {
    width: 0.48611vw;
    height: 0.90278vw;
    top: 2.08333vw;
    left: 1.38889vw;
  }
  .blog .section-blog_detail .text-area ul li,
  .blog .section-blog_detail .text-area ol li {
    font-size: 1.11111vw;
    margin-bottom: 2.5vw;
    line-height: 2.56944vw;
  }
  .blog .section-blog_detail .text-area ul li:before,
  .blog .section-blog_detail .text-area ol li:before {
    top: 1vw;
  }
  .blog .section-blog_detail .text-area ol li:before {
    top: 0;
    font-size: 1.11111vw;
  }
  .blog .section-blog_detail .text-area p {
    font-size: 1.11111vw;
    margin-bottom: 2.5vw;
    line-height: 2.56944vw;
  }
  .blog .section-blog_detail .text-area .profile-box {
    padding: 2.22vw;
    margin-bottom: 4.16667vw;
  }
  .blog .section-blog_detail .text-area .profile-box:before {
    width: 0.48611vw;
    height: 0.90278vw;
    top: 2.08333vw;
    left: 1.38889vw;
  }
  .blog .section-blog_detail .text-area .profile-box .text {
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .blog .section-blog_detail .text-area h2 {
    font-size: 2vw;
    line-height: 3.16666667vw;
    margin-bottom: 2.66666667vw;
  }
  .blog .section-blog_detail .text-area h3 {
    font-size: 1.83333333vw;
    line-height: 2.5vw;
    margin-bottom: 1.66666667vw;
  }
  .blog .section-blog_detail .text-area h4 {
    font-size: 1.66666667vw;
    line-height: 2.5vw;
    margin-bottom: 1.66666667vw;
  }
  .blog .section-blog_detail .text-area a {
    font-size: 0.97222vw;
  }
  .blog .section-blog_detail .text-area a:before {
    width: 0.90278vw;
    height: 0.97222vw;
  }
  .blog .section-blog_detail .text-area .ctaarea {
    padding: 3.88vw 3.47vw;
  }
  .blog .section-blog_detail .text-area .ctaarea .ctaarea_title {
    font-size: 1.52778vw;
    line-height: 2.63889vw;
  }
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a {
    min-width: auto;
    padding: 0 80px;
  }
  .blog .section-blog_detail .text-area .contributor-box {
    padding: 3.88vw 3.47vw;
  }
  .blog .section-blog_detail .text-area .contributor-box figure {
    width: 9.02778vw;
    margin-right: 2.77778vw;
  }
  .blog .section-blog_detail .text-area .contributor-box figure img {
    height: 9.02778vw;
  }
  .blog .section-blog_detail .text-area .contributor-box .text-box {
    width: 29.86111vw;
  }
  .blog .section-blog_detail .text-area .contributor-box .text-box .name {
    font-size: 0.97222vw;
    margin-bottom: 1.66667vw;
  }
  .blog .section-blog_detail .text-area .contributor-box .text-box .text {
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .blog .section-related {
    padding-top: 6.25vw;
  }
}

@media screen and (max-width: 750px) {
  .blog .section-blog {
    margin-top: 41.33333vw;
  }
  .blog .section-blog .list-blog li:nth-child(n + 4) {
    margin-bottom: 7.2vw;
  }
  .blog .section-blog .navi-category {
    margin-bottom: 22.66667vw;
    border-top: none;
  }
  .blog .section-blog .navi-category ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .blog .section-blog .navi-category ul li {
    font-size: 4vw;
    margin-right: 8vw;
    margin-bottom: 10vw;
  }
  .blog .section-blog .navi-category ul li.active:before {
    top: initial;
    left: 0;
    bottom: -9px;
  }
  .blog .section-blog .navi-category ul li:first-child a {
    padding-left: 4.5vw;
  }
  .blog .section-blog .navi-category ul li:first-child a:before {
    width: 3vw;
    height: 3vw;
  }
  .blog .section-blog .pagenation-area {
    margin-top: 0;
  }
  .blog .section-blog_detail {
    margin-top: 38.13333vw;
    padding-top: 18.66667vw;
  }
  .blog .section-blog_detail .section-inner:before {
    width: 76.5vw;
    top: -45vw;
    left: -83vw;
    height: 800vw;
  }
  .blog .section-blog_detail .pict-main:before {
    width: 5.6vw;
    height: 15.46667vw;
    bottom: -6vw;
  }
  .blog .section-blog_detail h1 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.14133vw;
  }
  .blog .section-blog_detail .text-option {
    margin-top: 2.66667vw;
    margin-bottom: 6.93333vw;
    font-size: 3.2vw;
    letter-spacing: 0.4vw;
  }
  .blog .section-blog_detail .text-option span {
    margin-right: 4.26667vw;
  }
  .blog .section-blog_detail .post-area {
    width: 100%;
  }
  .blog .section-blog_detail .pict-main {
    width: 100vw;
    margin-left: -4.8vw;
  }
  .blog .section-blog_detail .text-area {
    width: 100%;
    margin-top: 13.33333vw;
  }
  .blog .section-blog_detail .text-area table {
    width: 100%;
  }
  .blog .section-blog_detail .text-area table tr td {
    font-size: 4vw;
  }
  .blog .section-blog_detail .text-area blockquote {
    padding: 9.33vw 8.53vw;
    margin-bottom: 10.66667vw;
    font-size: 3.46667vw;
    line-height: 6.93333vw;
  }
  .blog .section-blog_detail .text-area blockquote:before {
    width: 1.86667vw;
    height: 3.46667vw;
    top: 8vw;
    left: 5vw;
  }
  .blog .section-blog_detail .text-area ul li,
  .blog .section-blog_detail .text-area ol li {
    font-size: 4vw;
    line-height: 8vw;
    margin-bottom: 5.86667vw;
    padding-left: 5vw;
  }
  .blog .section-blog_detail .text-area ul li:before,
  .blog .section-blog_detail .text-area ol li:before {
    top: 3.2vw;
    width: 2vw;
    height: 2vw;
  }
  .blog .section-blog_detail .text-area ol li:before {
    top: 0;
    font-size: 4vw;
  }
  .blog .section-blog_detail .text-area p {
    font-size: 4vw;
    line-height: 8vw;
    margin-bottom: 5.86667vw;
  }
  .blog .section-blog_detail .text-area .pict {
    margin-bottom: 5.86667vw;
  }
  .blog .section-blog_detail .text-area .profile-box {
    padding: 9.33vw 8.53vw;
    margin-bottom: 10.66667vw;
  }
  .blog .section-blog_detail .text-area .profile-box:before {
    width: 1.86667vw;
    height: 3.46667vw;
    top: 8vw;
    left: 5vw;
  }
  .blog .section-blog_detail .text-area .profile-box .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
  }
  .blog .section-blog_detail .text-area h2 {
    font-size: 5.8vw;
    line-height: 35px;
    margin-bottom: 4.26666667vw;
  }
  .blog .section-blog_detail .text-area h3 {
    font-size: 4.8vw;
    line-height: 6.2vw;
    margin-bottom: 2.66666667vw;
  }
  .blog .section-blog_detail .text-area h4 {
    font-size: 4.6vw;
    line-height: 6.2vw;
    margin-bottom: 2.66666667vw;
  }
  .blog .section-blog_detail .text-area a {
    font-size: 4vw;
  }
  .blog .section-blog_detail .text-area a:before {
    width: 4vw;
    height: 4.26667vw;
  }
  .blog .section-blog_detail .text-area .ctaarea {
    padding: 7.2vw 9.6vw;
  }
  .blog .section-blog_detail .text-area .ctaarea .ctaarea_title {
    font-size: 4.8vw;
    line-height: 8.53333vw;
  }
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more {
    width: 100%;
  }
  .blog .section-blog_detail .text-area .ctaarea .btn-black.btn-more a {
    width: 100%;
    min-width: auto;
    padding: 0 60px;
  }
  .blog .section-blog_detail .text-area .contributor-box {
    padding: 7.2vw 9.6vw;
    margin-bottom: 10.66667vw;
  }
  .blog .section-blog_detail .text-area .contributor-box figure {
    width: 20.8vw;
    margin-right: 9.6vw;
  }
  .blog .section-blog_detail .text-area .contributor-box figure img {
    height: 20.8vw;
  }
  .blog .section-blog_detail .text-area .contributor-box .text-box {
    width: 43.73333vw;
  }
  .blog .section-blog_detail .text-area .contributor-box .text-box .name {
    font-size: 3.46667vw;
    margin-bottom: 4.26667vw;
  }
  .blog .section-blog_detail .text-area .contributor-box .text-box .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
  }
  .blog .section-blog_detail .text-area .share-box {
    position: initial;
    width: 100%;
    padding: 5.3vw;
  }
  .blog .section-blog_detail .text-area .share-box .title-share {
    font-size: 4.8vw;
    letter-spacing: 0.6vw;
    margin-bottom: 4.8vw;
  }
  .blog .section-blog_detail .text-area .share-box .list-share {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .blog .section-blog_detail .text-area .share-box .list-share li {
    width: 17.6vw;
  }
  .blog .section-related {
    margin-top: 12vw;
    padding-top: 18.66667vw;
  }
  .blog .section-related .section-inner:before {
    width: 66.5vw;
    top: -40vw;
    left: -65vw;
  }
  .blog .section-related h2 {
    margin-bottom: 10.66667vw;
  }
  .blog .list-blog li:nth-child(n + 4) {
    display: block;
  }
}

.contact .section-head:before {
  background: url(/assets/img/contact/img-head.webp) no-repeat;
  background-size: 100%;
}

.contact .section-contact {
  margin-top: 186px;
  padding-bottom: 140px;
  overflow: hidden;
}

.contact .section-contact.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.contact .section-contact .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: -500px;
}

@media screen and (max-width: 1200px) {
  .contact .section-contact .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .contact .section-contact .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.contact .section-contact .text-box {
  width: 540px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 42px;
  margin-bottom: 65px;
}

.contact .section-contact .form-box {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  padding: 96px;
  padding-bottom: 113px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
}

.contact .section-contact .form-box:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 1200px) {
  .contact .section-contact .form-box:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .contact .section-contact .form-box:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.contact .section-contact .form-box .input-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 50px;
}

.contact .section-contact .form-box .input-box.required .title:before {
  content: "必須";
  width: 54px;
  height: 20px;
  line-height: 20px;
  color: #df4440;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: solid 1px #df4440;
  position: absolute;
  right: 57px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 2px;
}

.contact .section-contact .form-box .input-box.select-box {
  display: block;
}

.contact .section-contact .form-box .input-box.select-box .inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.contact .section-contact .form-box .input-box.select-box .inner:before {
  content: "";
  background: url(/assets/img/icon-arrow-bottom-black.webp) no-repeat;
  width: 14px;
  height: 8px;
  background-size: 100%;
  position: absolute;
  right: 24px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.contact .section-contact .form-box .input-box.select-box .text-option {
  margin-top: 20px;
  margin-left: 246px;
}

.contact .section-contact .form-box .input-box.privacy-box {
  display: block;
}

.contact .section-contact .form-box .input-box.privacy-box .inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.contact .section-contact .form-box .input-box.privacy-box .check-policy {
  position: relative;
  display: block;
  margin-top: 20px;
  margin-left: 246px;
  padding-left: 32px;
}

.contact .section-contact .form-box .input-box.privacy-box .check-policy:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  border: solid 1px #d0d0d0;
  background-color: #f4f4f4;
  content: "";
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
}

.contact .section-contact .form-box .input-box.privacy-box .check-policy:after {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 0;
  left: 7px;
  display: block;
  width: 6px;
  height: 12px;
  border-right: 2px solid #7077c1;
  border-bottom: 2px solid #7077c1;
  content: "";
  opacity: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 2;
}

.contact .section-contact .form-box .input-box.privacy-box input {
  display: none;
}

.contact .section-contact .form-box .input-box.privacy-box input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.contact .section-contact .form-box .input-box .error {
  position: absolute;
  left: 246px;
  bottom: -20px;
  font-size: 12px;
  color: #da3b38;
}

.contact .section-contact .form-box .input-box .error + input,
.contact .section-contact .form-box .input-box .error + textarea {
  background-color: #fceceb;
  border: solid 1px #da3b38;
}

.contact .section-contact .form-box .title {
  position: relative;
  width: 246px;
  height: 60px;
  font-size: 14px;
  font-weight: bold;
  line-height: 60px;
}

.contact .section-contact .form-box .select {
  width: 611px;
  font-size: 14px;
  line-height: 28px;
}

.contact .section-contact .form-box ::-webkit-input-placeholder {
  color: #828282;
}

.contact .section-contact .form-box ::-moz-placeholder {
  color: #828282;
}

.contact .section-contact .form-box :-ms-input-placeholder {
  color: #828282;
}

.contact .section-contact .form-box ::-ms-input-placeholder {
  color: #828282;
}

.contact .section-contact .form-box ::placeholder {
  color: #828282;
}

.contact .section-contact .form-box select,
.contact .section-contact .form-box input[type="text"],
.contact .section-contact .form-box input[type="email"] {
  width: 560px;
  height: 60px;
  font-size: 14px;
  padding-left: 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  outline: none;
  background: #f4f4f4;
  color: #828282;
  border: solid 1px #d0d0d0;
  border-radius: 0;
}

.contact .section-contact .form-box input[type="file"] {
  display: none;
}

.contact .section-contact .form-box label.file {
  position: relative;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #111;
  color: #fff;
  font-size: 12px;
}

.contact .section-contact .form-box label.file:hover {
  cursor: pointer;
}

.contact .section-contact .form-box label.file .text-option {
  white-space: pre;
  color: #111;
  position: absolute;
  left: 210px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.contact .section-contact .form-box textarea {
  width: 560px;
  height: 307px;
  margin: 0;
  border: solid 1px #d0d0d0;
  padding: 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  background: #f4f4f4;
  font-size: 14px;
  line-height: 28px;
}

.contact .section-contact .form-box .form-privacy {
  width: 540px;
  max-height: 140px;
  background: #f4f4f4;
  border: solid 1px #d0d0d0;
  overflow-y: auto;
  padding: 1em;
  font-size: 14px;
  line-height: 28px;
}

.contact .section-contact .form-box .form-privacy p {
  margin-bottom: 16px;
}

.contact .section-contact .form-box .form-privacy .title-privacy {
  font-weight: 600;
}

.contact .section-contact .form-box .text-check {
  font-size: 14px;
  text-align: center;
  line-height: 28px;
}

.contact .section-contact .form-box .text-check a {
  color: #4f548f;
}

.contact .section-contact .form-box .btn-black {
  position: absolute;
  bottom: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.contact .section-contact .form-box .btn-black.inActive button {
  pointer-events: none;
  opacity: 0.6;
}

.contact .section-contact .form-box .btn-black.inRecaptcha button {
  pointer-events: none;
  opacity: 0.6;
}

.contact .section-contact .form-box .btn-black button {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  letter-spacing: initial;
}

.contact .section-contact .form-box .btn-black button:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.contact .section-contact .form-box .btn-black button:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.contact .section-contact .form-box .btn-black button:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.contact .section-contact .form-box .btn-black button:hover {
  color: #111;
}

.contact .section-contact .form-box .btn-black button span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .contact .section-contact .form-box .btn-black button {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .contact .section-contact .form-box .btn-black button:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .contact .section-contact .form-box .btn-black button:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .contact .section-contact .form-box .btn-black button:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .contact .section-contact .form-box .btn-black button {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .contact .section-contact .form-box .btn-black button:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.contact .section-contact .form-box .btn-black button:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.contact .section-contact .form-box .recaptcha {
  color: #999;
  font-size: 12px;
  text-align: center;
  margin-top: 35px;
}

.contact .section-contact .form-box .recaptcha a {
  color: #999;
}

.contact .confirm .form-box .title {
  line-height: initial;
}

.contact .complete {
  padding-top: 220px;
  margin-top: 0;
  padding-bottom: 0;
}

.contact .complete h2 {
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: 0.56px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .contact .section-contact {
    margin-top: 12.91667vw;
    padding-bottom: 9.72222vw;
  }
  .contact .section-contact .section-inner:before {
    left: -34.72222vw;
  }
  .contact .section-contact .text-box {
    width: 37.5vw;
    font-size: 1.25vw;
    line-height: 2.91667vw;
    margin-bottom: 4.51389vw;
  }
  .contact .section-contact .form-box {
    width: 69.44444vw;
    padding: 6.66vw;
    padding-bottom: 7.84722vw;
  }
  .contact .section-contact .form-box:before {
    left: 50%;
  }
  .contact .section-contact .form-box .title {
    width: 17.08333vw;
    height: 4.16667vw;
    font-size: 0.97222vw;
    line-height: 4.16667vw;
  }
  .contact .section-contact .form-box .select {
    width: 42.43056vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .contact .section-contact .form-box label.file {
    width: 13.88889vw;
    height: 3.47222vw;
    line-height: 3.47222vw;
    font-size: 0.83333vw;
  }
  .contact .section-contact .form-box label.file .text-option {
    left: 14.58333vw;
  }
  .contact .section-contact .form-box textarea {
    width: 38.88889vw;
    height: 21.31944vw;
    padding: 1.66vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .contact .section-contact .form-box .input-box {
    margin-bottom: 3.47222vw;
  }
  .contact .section-contact .form-box .input-box.required .title:before {
    width: 3.75vw;
    height: 1.38889vw;
    line-height: 1.38889vw;
    font-size: 0.76389vw;
    right: 3.95833vw;
  }
  .contact .section-contact .form-box .input-box.select-box:before {
    width: 0.97222vw;
    height: 0.55556vw;
  }
  .contact .section-contact .form-box .input-box.select-box .text-option {
    font-size: 1.2vw;
    margin-top: 1.38889vw;
    margin-left: 17.08333vw;
  }
  .contact .section-contact .form-box .input-box.privacy-box .check-policy {
    font-size: 1.2vw;
    margin-top: 1.38889vw;
    margin-left: 17.08333vw;
  }
  .contact .section-contact .form-box .input-box select,
  .contact .section-contact .form-box .input-box input[type="text"],
  .contact .section-contact .form-box .input-box input[type="email"] {
    width: 38.88889vw;
    height: 4.16667vw;
    font-size: 0.97222vw;
    padding-left: 2.22222vw;
  }
  .contact .section-contact .form-box .input-box .error {
    font-size: 0.83333vw;
    left: 17.08333vw;
    bottom: -1.38889vw;
  }
  .contact .section-contact .form-box .form-privacy {
    width: 35.88889vw;
    height: 21.31944vw;
    padding: 1.66vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .contact .confirm .form-box .title {
    line-height: 1.94444vw;
  }
}

@media screen and (max-width: 750px) {
  .contact .section-contact {
    margin-top: 38.66667vw;
  }
  .contact .section-contact .text-box {
    width: 100%;
    font-size: 4vw;
    line-height: 8vw;
    margin-bottom: 26.66667vw;
  }
  .contact .section-contact .form-box {
    width: 100%;
    padding: 10.66vw 6.4vw;
  }
  .contact .section-contact .form-box:before {
    top: -22vw;
  }
  .contact .section-contact .form-box .title {
    width: 100%;
    font-size: 4vw;
    margin-bottom: 5.33333vw;
  }
  .contact .section-contact .form-box .select {
    width: 100%;
    font-size: 4vw;
    line-height: 5.33333vw;
  }
  .contact .section-contact .form-box label.file {
    display: block;
    width: 100%;
    height: 13.33333vw;
    line-height: 13.33333vw;
    font-size: 3.46667vw;
  }
  .contact .section-contact .form-box label.file .text-option {
    position: relative;
    left: initial;
    top: initial;
    -webkit-transform: none;
            transform: none;
    text-align: left;
  }
  .contact .section-contact .form-box textarea {
    width: 100%;
    height: 40vw;
    font-size: 4.26667vw;
    padding: 5.33vw;
    line-height: 1.5em;
  }
  .contact .section-contact .form-box .text-check {
    text-align: left;
    font-size: 4vw;
    line-height: 8vw;
  }
  .contact .section-contact .form-box .input-box {
    display: block;
    margin-bottom: 7.46667vw;
    padding-bottom: 7.46667vw;
    border-bottom: solid 1px #d0d0d0;
  }
  .contact .section-contact .form-box .input-box:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  .contact .section-contact .form-box .input-box.required .title {
    padding-left: 17.33333vw;
  }
  .contact .section-contact .form-box .input-box.required .title:before {
    right: initial;
    left: 0;
    width: 14.4vw;
    height: 5.33333vw;
    line-height: 5.33333vw;
    font-size: 2.93333vw;
  }
  .contact .section-contact .form-box .input-box.file-box {
    padding-bottom: 12vw;
  }
  .contact .section-contact .form-box .input-box.select-box:before {
    width: 3.73333vw;
    height: 2.13333vw;
  }
  .contact .section-contact .form-box .input-box.select-box .inner {
    display: block;
  }
  .contact .section-contact .form-box .input-box.select-box .inner:before {
    top: 69%;
  }
  .contact .section-contact .form-box .input-box.select-box .text-option {
    font-size: 3vw;
    margin-top: 2vw;
    margin-left: 0;
  }
  .contact .section-contact .form-box .input-box.privacy-box .inner {
    display: block;
  }
  .contact .section-contact .form-box .input-box.privacy-box .check-policy {
    font-size: 3vw;
    margin-top: 2vw;
    margin-left: 0;
    line-height: 140%;
  }
  .contact .section-contact .form-box .input-box select,
  .contact .section-contact .form-box .input-box input[type="text"],
  .contact .section-contact .form-box .input-box input[type="email"] {
    width: 100%;
    height: 16vw;
    font-size: 4.26667vw;
    padding-left: 6.4vw;
  }
  .contact .section-contact .form-box .input-box .error {
    left: 0;
    bottom: 3vw;
    font-size: 2.4vw;
  }
  .contact .section-contact .form-box .form-privacy {
    width: 100%;
    padding: 5.33vw;
    line-height: 4vw;
    font-size: 14px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .contact .section-contact .form-box .recaptcha {
    font-size: 2vw;
    margin-top: 4vw;
    line-height: 1.4;
  }
  .contact .confirm .form-box .input-box {
    padding-bottom: 2.46667vw;
  }
  .contact .complete {
    margin-top: 0;
    padding-top: 29vw;
  }
  .contact .complete h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.14133vw;
  }
}

.privacy .section-head:before {
  background: url(/assets/img/contact/img-head.webp) no-repeat;
  background-size: 100%;
}

.privacy .section-privacy {
  margin-top: 187px;
  padding-top: 78px;
  padding-bottom: 80px;
  overflow: hidden;
}

.privacy .section-privacy.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.privacy .section-privacy.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.privacy .section-privacy.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.privacy .section-privacy.section-privacy2 {
  margin-top: 0;
}

.privacy .section-privacy .section-inner {
  width: 1000px;
}

.privacy .section-privacy .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -195px;
  left: -530px;
}

@media screen and (max-width: 1200px) {
  .privacy .section-privacy .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .privacy .section-privacy .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.privacy .section-privacy h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: .56px;
}

.privacy .section-privacy h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .privacy .section-privacy h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .privacy .section-privacy h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.privacy .section-privacy h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  top: -53px;
}

@media screen and (max-width: 1200px) {
  .privacy .section-privacy h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .privacy .section-privacy h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.privacy .section-privacy .white-area {
  padding: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
}

.privacy .section-privacy .white-area .text {
  font-size: 16px;
  line-height: 37px;
  margin-bottom: 32px;
}

.privacy .section-privacy .white-area .text.__add {
  margin-bottom: 0;
}

.privacy .section-privacy .white-area .text.--left {
  margin-bottom: 0;
}

.privacy .section-privacy .white-area .text.no_step {
  margin-bottom: 0;
}

.privacy .section-privacy .white-area h3 {
  margin-bottom: 27px;
  font-size: 18px;
  letter-spacing: .6px;
}

.privacy .section-privacy .white-area .text-big {
  font-size: 16px;
  line-height: 37px;
  font-weight: bold;
  margin-bottom: 18px;
}

.privacy .section-privacy .white-area .detail-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.privacy .section-privacy .white-area .detail-box.--left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media screen and (max-width: 750px) {
  .privacy .section-privacy .white-area .detail-box.--left {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.privacy .section-privacy .white-area .detail-box .text {
  text-align: right;
}

.privacy .section-privacy .white-area .detail-box .text.--left {
  text-align: left;
}

@media screen and (max-width: 750px) {
  .privacy .section-privacy .white-area .detail-box .text.--left {
    text-align: right;
  }
}

.privacy .section-privacy .white-area .contact-box {
  border: solid 2px #f4f4f4;
  padding: 37px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.privacy .section-privacy .white-area .contact-box.mb32 {
  margin-bottom: 32px;
}

.privacy .section-privacy .white-area .contact-box .title {
  position: relative;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
}

.privacy .section-privacy .white-area .contact-box .title:before {
  content: "";
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 7px;
  height: 13px;
  position: absolute;
  background-size: 100%;
  left: -13px;
  top: -13px;
}

.privacy .section-privacy .white-area .contact-box .text {
  margin-bottom: 0;
  line-height: 28px;
  font-size: 14px;
}

.privacy .section-privacy .white-area table {
  line-height: 37px;
  margin-bottom: 32px;
}

.privacy .section-privacy .white-area table tr:first-child th {
  background-color: #111;
  color: #fff;
  text-align: center;
  width: 400px;
  height: 70px;
  vertical-align: middle;
}

.privacy .section-privacy .white-area table tr:first-child th:first-child {
  border-right: solid 2px #F4F4F4;
}

.privacy .section-privacy .white-area table td {
  font-weight: bold;
  vertical-align: middle;
  padding: 20px 0;
  padding-left: 20px;
  border-right: solid 2px #F4F4F4;
  border-bottom: solid 2px #F4F4F4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.privacy .section-privacy .white-area table td:first-child {
  border-left: solid 2px #F4F4F4;
}

@media screen and (max-width: 1200px) {
  .privacy .section-privacy {
    margin-top: 12.91667vw;
    padding-top: 5.41667vw;
    padding-bottom: 5.55556vw;
  }
  .privacy .section-privacy .section-inner {
    width: 100%;
  }
  .privacy .section-privacy .section-inner:before {
    top: -13.54167vw;
    left: -36.80556vw;
  }
  .privacy .section-privacy h2 {
    font-size: 2.15278vw;
    letter-spacing: 0.03889vw;
  }
  .privacy .section-privacy .white-area {
    padding: 6.944vw;
  }
  .privacy .section-privacy .white-area .text {
    font-size: 1.11111vw;
    line-height: 2.56944vw;
    margin-bottom: 2.22222vw;
  }
  .privacy .section-privacy .white-area h3 {
    font-size: 1.25vw;
    margin-bottom: 1.875vw;
    letter-spacing: 0.04167vw;
  }
  .privacy .section-privacy .white-area .text-big {
    font-size: 1.11111vw;
    line-height: 2.56944vw;
    margin-bottom: 1.25vw;
  }
  .privacy .section-privacy .white-area .contact-box {
    padding: 2.56vw 2.22vw;
  }
  .privacy .section-privacy .white-area .contact-box .title {
    font-size: 0.97222vw;
    margin-bottom: 0.83333vw;
  }
  .privacy .section-privacy .white-area .contact-box .text {
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .privacy .section-privacy .white-area table {
    line-height: 2.56944vw;
    margin-bottom: 2.22222vw;
    font-size: 1.04167vw;
  }
  .privacy .section-privacy .white-area table tr:first-child th {
    width: 27.77778vw;
    height: 4.86111vw;
  }
  .privacy .section-privacy .white-area table td {
    padding: 1.38vw 0;
    padding-left: 1.38889vw;
  }
}

@media screen and (max-width: 750px) {
  .privacy .section-privacy {
    margin-top: 38.13333vw;
    padding-top: 18.66667vw;
  }
  .privacy .section-privacy .section-inner:before {
    top: -33vw;
  }
  .privacy .section-privacy h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.14133vw;
    margin-bottom: 6.4vw;
  }
  .privacy .section-privacy .white-area {
    padding: 9vw 6.4vw;
  }
  .privacy .section-privacy .white-area .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
    margin-bottom: 8vw;
  }
  .privacy .section-privacy .white-area h3 {
    font-size: 3.46667vw;
    line-height: 6.66667vw;
    margin-bottom: 4.26667vw;
    letter-spacing: 0;
  }
  .privacy .section-privacy .white-area .text-big {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
    text-indent: -1em;
    padding-left: 1em;
  }
  .privacy .section-privacy .white-area .contact-box {
    padding: 9vw 6.4vw;
  }
  .privacy .section-privacy .white-area .contact-box .title {
    font-size: 3.46667vw;
    margin-bottom: 2.13333vw;
  }
  .privacy .section-privacy .white-area .contact-box .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
  }
  .privacy .section-privacy .white-area table {
    font-size: 3.46667vw;
    line-height: 5.86667vw;
  }
  .privacy .section-privacy .white-area table tr:first-child th {
    width: 38.4vw;
    height: 18.66667vw;
  }
  .privacy .section-privacy .white-area table td {
    padding: 4.8vw;
  }
}

.sitemap .section-head:before {
  background: url(/assets/img/sitemap/img-head.webp) no-repeat;
  background-size: 100%;
}

.sitemap .section-sitemap {
  margin-top: 187px;
  padding-top: 40px;
  padding-bottom: 145px;
  overflow: hidden;
}

.sitemap .section-sitemap .section-inner {
  width: 1000px;
}

.sitemap .section-sitemap .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
  left: -600px;
}

@media screen and (max-width: 1200px) {
  .sitemap .section-sitemap .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .sitemap .section-sitemap .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.sitemap .section-sitemap .white-area {
  padding: 90px 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.03);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.03);
  background-color: #fff;
}

.sitemap .section-sitemap .white-area .title-headding {
  position: relative;
  display: inline-block;
  color: #111;
  font-size: 24px;
  letter-spacing: .8px;
  font-family: "akrobat";
  margin-bottom: 20px;
}

.sitemap .section-sitemap .white-area .title-headding:before {
  content: "";
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 7px;
  height: 13px;
  position: absolute;
  background-size: 100%;
  left: -10px;
  top: -10px;
}

.sitemap .section-sitemap .white-area .title-headding.blank:after {
  content: "";
  background: url(/assets/img/sitemap/icon-blank.webp) no-repeat;
  width: 15px;
  height: 16px;
  background-size: 100%;
  position: absolute;
  right: -24px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.sitemap .section-sitemap .white-area a {
  color: #454A84;
  text-decoration: none;
}

.sitemap .section-sitemap .white-area .list-navi li {
  position: relative;
  margin-bottom: 12px;
}

.sitemap .section-sitemap .white-area .list-navi li:before {
  content: "・";
  color: #454A84;
  position: relative;
  top: 2px;
}

.sitemap .section-sitemap .white-area .list-navi li a {
  display: inline-block;
  font-size: 12px;
}

.sitemap .section-sitemap .white-area .mix-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 70px;
}

.sitemap .section-sitemap .white-area .mix-box .navi-box {
  width: 430px;
}

.sitemap .section-sitemap .white-area .service-box a {
  color: #454A84;
  text-decoration: none;
}

.sitemap .section-sitemap .white-area .service-box .title-headding {
  display: inline-block;
  color: #111;
}

.sitemap .section-sitemap .white-area .service-box .title-service {
  margin: 20px 0;
}

.sitemap .section-sitemap .white-area .service-box .title-service a {
  font-size: 16px;
  font-weight: bold;
}

@media screen and (max-width: 1200px) {
  .sitemap .section-sitemap {
    margin-top: 12.98611vw;
    padding-top: 2.77778vw;
    padding-bottom: 10.06944vw;
  }
  .sitemap .section-sitemap .section-inner {
    width: 100%;
  }
  .sitemap .section-sitemap .white-area {
    padding: 6.25vw 6.94vw;
  }
  .sitemap .section-sitemap .white-area .mix-box {
    margin-bottom: 4.86111vw;
  }
  .sitemap .section-sitemap .white-area .mix-box .navi-box {
    width: 29.86111vw;
  }
  .sitemap .section-sitemap .white-area .title-headding {
    font-size: 1.66667vw;
    letter-spacing: 0.55556vw;
    margin-bottom: 1.38889vw;
  }
  .sitemap .section-sitemap .white-area .service-box .title-service {
    margin: 1.388vw 0;
  }
  .sitemap .section-sitemap .white-area .service-box .title-service a {
    font-size: 1.11111vw;
  }
  .sitemap .section-sitemap .white-area .list-navi li {
    margin-bottom: 0.83333vw;
  }
  .sitemap .section-sitemap .white-area .list-navi li a {
    font-size: 0.83333vw;
  }
}

@media screen and (max-width: 750px) {
  .sitemap .section-sitemap {
    margin-top: 38.13333vw;
    padding-top: 10.66667vw;
  }
  .sitemap .section-sitemap .white-area {
    padding: 26.6vw 11.73vw;
  }
  .sitemap .section-sitemap .white-area .title-headding {
    font-size: 5.86667vw;
    letter-spacing: 0.90667vw;
    margin-bottom: 4.8vw;
  }
  .sitemap .section-sitemap .white-area .title-headding:before {
    width: 2.4vw;
    height: 3.73333vw;
    left: -4vw;
    top: -2vw;
  }
  .sitemap .section-sitemap .white-area .mix-box {
    display: block;
    margin-bottom: 0;
  }
  .sitemap .section-sitemap .white-area .mix-box .navi-box {
    width: 100%;
    margin-bottom: 10.66667vw;
  }
  .sitemap .section-sitemap .white-area .list-navi li {
    margin-bottom: 4.8vw;
  }
  .sitemap .section-sitemap .white-area .list-navi li a {
    font-size: 3.46667vw;
  }
  .sitemap .section-sitemap .white-area .service-box .title-service {
    margin: 4.8vw 0;
    line-height: 6.66667vw;
  }
  .sitemap .section-sitemap .white-area .service-box .title-service a {
    font-size: 4.8vw;
  }
}

.document .section-head:before {
  background: url(/assets/img/works/img-head.webp) no-repeat;
  background-size: 100%;
}

.partner_contact .section-head:before {
  background: url(/assets/img/contact/img-head.webp) no-repeat;
  background-size: 100%;
}

.partner_contact .section-partner_contact {
  margin-top: 186px;
  padding-bottom: 140px;
  overflow: hidden;
}

.partner_contact .section-partner_contact.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.partner_contact .section-partner_contact .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  left: -500px;
}

@media screen and (max-width: 1200px) {
  .partner_contact .section-partner_contact .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .partner_contact .section-partner_contact .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.partner_contact .section-partner_contact .text-box {
  width: 540px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 42px;
  margin-bottom: 65px;
}

.partner_contact .section-partner_contact .form-box {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  padding: 96px;
  padding-bottom: 113px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
}

.partner_contact .section-partner_contact .form-box:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 1200px) {
  .partner_contact .section-partner_contact .form-box:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .partner_contact .section-partner_contact .form-box:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.partner_contact .section-partner_contact .form-box .input-box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 50px;
}

.partner_contact .section-partner_contact .form-box .input-box.required .title:before {
  content: "必須";
  width: 54px;
  height: 20px;
  line-height: 20px;
  color: #df4440;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: solid 1px #df4440;
  position: absolute;
  right: 57px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 2px;
}

.partner_contact .section-partner_contact .form-box .input-box.select-box {
  display: block;
}

.partner_contact .section-partner_contact .form-box .input-box.select-box .inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.partner_contact .section-partner_contact .form-box .input-box.select-box .inner:before {
  content: "";
  background: url(/assets/img/icon-arrow-bottom-black.webp) no-repeat;
  width: 14px;
  height: 8px;
  background-size: 100%;
  position: absolute;
  right: 24px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.partner_contact .section-partner_contact .form-box .input-box.select-box .text-option {
  margin-top: 20px;
  margin-left: 246px;
}

.partner_contact .section-partner_contact .form-box .input-box.privacy-box {
  display: block;
}

.partner_contact .section-partner_contact .form-box .input-box.privacy-box .inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.partner_contact .section-partner_contact .form-box .input-box.privacy-box .check-policy {
  position: relative;
  display: block;
  margin-top: 20px;
  margin-left: 246px;
  padding-left: 32px;
}

.partner_contact .section-partner_contact .form-box .input-box.privacy-box .check-policy:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  border: solid 1px #d0d0d0;
  background-color: #f4f4f4;
  content: "";
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
}

.partner_contact .section-partner_contact .form-box .input-box.privacy-box .check-policy:after {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 0;
  left: 7px;
  display: block;
  width: 6px;
  height: 12px;
  border-right: 2px solid #7077c1;
  border-bottom: 2px solid #7077c1;
  content: "";
  opacity: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 2;
}

.partner_contact .section-partner_contact .form-box .input-box.privacy-box input {
  display: none;
}

.partner_contact .section-partner_contact .form-box .input-box.privacy-box input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.partner_contact .section-partner_contact .form-box .input-box .error {
  position: absolute;
  left: 246px;
  bottom: -20px;
  font-size: 12px;
  color: #da3b38;
}

.partner_contact .section-partner_contact .form-box .input-box .error + input,
.partner_contact .section-partner_contact .form-box .input-box .error + textarea {
  background-color: #fceceb;
  border: solid 1px #da3b38;
}

.partner_contact .section-partner_contact .form-box .title {
  position: relative;
  width: 246px;
  height: 60px;
  font-size: 14px;
  font-weight: bold;
  line-height: 60px;
}

.partner_contact .section-partner_contact .form-box .select {
  width: 611px;
  font-size: 14px;
  line-height: 28px;
}

.partner_contact .section-partner_contact .form-box ::-webkit-input-placeholder {
  color: #828282;
}

.partner_contact .section-partner_contact .form-box ::-moz-placeholder {
  color: #828282;
}

.partner_contact .section-partner_contact .form-box :-ms-input-placeholder {
  color: #828282;
}

.partner_contact .section-partner_contact .form-box ::-ms-input-placeholder {
  color: #828282;
}

.partner_contact .section-partner_contact .form-box ::placeholder {
  color: #828282;
}

.partner_contact .section-partner_contact .form-box select,
.partner_contact .section-partner_contact .form-box input[type="text"] {
  width: 560px;
  height: 60px;
  font-size: 14px;
  padding-left: 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  outline: none;
  background: #f4f4f4;
  color: #828282;
  border: solid 1px #d0d0d0;
  border-radius: 0;
}

.partner_contact .section-partner_contact .form-box input[type="date"] {
  width: 560px;
  height: 60px;
  font-size: 14px;
  padding-left: 32px;
  padding-right: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  outline: none;
  background: #f4f4f4;
  color: #828282;
  border: solid 1px #d0d0d0;
  border-radius: 0;
}

.partner_contact .section-partner_contact .form-box input[type="file"] {
  display: none;
}

.partner_contact .section-partner_contact .form-box label.file {
  position: relative;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #111;
  color: #fff;
  font-size: 12px;
}

.partner_contact .section-partner_contact .form-box label.file:hover {
  cursor: pointer;
}

.partner_contact .section-partner_contact .form-box label.file .text-option {
  white-space: pre;
  color: #111;
  position: absolute;
  left: 210px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.partner_contact .section-partner_contact .form-box textarea {
  width: 560px;
  height: 307px;
  margin: 0;
  border: solid 1px #d0d0d0;
  padding: 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  background: #f4f4f4;
  font-size: 14px;
  line-height: 28px;
}

.partner_contact .section-partner_contact .form-box .form-privacy {
  width: 560px;
  max-height: 140px;
  background: #f4f4f4;
  border: solid 1px #d0d0d0;
  overflow-y: auto;
  padding: 1em;
  font-size: 14px;
  line-height: 28px;
}

.partner_contact .section-partner_contact .form-box .form-privacy p {
  margin-bottom: 16px;
}

.partner_contact .section-partner_contact .form-box .form-privacy .title-privacy {
  font-weight: 600;
}

.partner_contact .section-partner_contact .form-box .text-check {
  font-size: 14px;
  text-align: center;
  line-height: 28px;
}

.partner_contact .section-partner_contact .form-box .text-check a {
  color: #4f548f;
}

.partner_contact .section-partner_contact .form-box .btn-black {
  position: absolute;
  bottom: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.partner_contact .section-partner_contact .form-box .btn-black.inActive button {
  pointer-events: none;
  opacity: 0.6;
}

.partner_contact .section-partner_contact .form-box .btn-black.inRecaptcha button {
  pointer-events: none;
  opacity: 0.6;
}

.partner_contact .section-partner_contact .form-box .btn-black button {
  position: relative;
  display: block;
  width: 330px;
  background-color: #111;
  color: #fff;
  font-family: "akrobat";
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  letter-spacing: 3.5px;
  height: 80px;
  line-height: 80px;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  letter-spacing: initial;
}

.partner_contact .section-partner_contact .form-box .btn-black button:before {
  content: "";
  background: url(/assets/img/icon-arrow-white.webp) no-repeat;
  width: 32px;
  height: 11px;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5.5px;
  right: 32px;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.partner_contact .section-partner_contact .form-box .btn-black button:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  transition: 0.7s cubic-bezier(0.475, 0.425, 0, 0.995);
  right: auto;
  left: -70px;
  bottom: -60px;
}

.partner_contact .section-partner_contact .form-box .btn-black button:hover:after {
  width: 350px;
  height: 350px;
  opacity: 1;
}

.partner_contact .section-partner_contact .form-box .btn-black button:hover {
  color: #111;
}

.partner_contact .section-partner_contact .form-box .btn-black button span {
  font-family: "akrobat";
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
  .partner_contact .section-partner_contact .form-box .btn-black button {
    width: 22.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.25vw;
    height: 5.55vw;
    line-height: 5.55vw;
  }
  .partner_contact .section-partner_contact .form-box .btn-black button:before {
    width: 2.2vw;
    height: 0.76vw;
    right: 2.2vw;
    margin-top: -0.36vw;
  }
  .partner_contact .section-partner_contact .form-box .btn-black button:after {
    width: 0.69vw;
    height: 0.69vw;
    left: -4.86vw;
    bottom: -4.16vw;
  }
  .partner_contact .section-partner_contact .form-box .btn-black button:hover:after {
    width: 23.3vw;
    height: 23.3vw;
  }
}

@media screen and (max-width: 750px) {
  .partner_contact .section-partner_contact .form-box .btn-black button {
    width: 66.6vw;
    height: 16vw;
    line-height: 16vw;
    font-size: 3.73333vw;
  }
  .partner_contact .section-partner_contact .form-box .btn-black button:before {
    width: 8.53vw;
    height: 2.93vw;
    right: 6.6vw;
    margin-top: -2vw;
  }
}

.partner_contact .section-partner_contact .form-box .btn-black button:hover:before {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.partner_contact .section-partner_contact .form-box .recaptcha {
  color: #999;
  font-size: 12px;
  text-align: center;
  margin-top: 35px;
}

.partner_contact .section-partner_contact .form-box .recaptcha a {
  color: #999;
}

.partner_contact .confirm .form-box .title {
  line-height: initial;
}

.partner_contact .complete {
  padding-top: 220px;
  margin-top: 0;
  padding-bottom: 0;
}

.partner_contact .complete h2 {
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: 0.56px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .contact .section-contact {
    margin-top: 12.91667vw;
    padding-bottom: 9.72222vw;
  }
  .contact .section-contact .section-inner:before {
    left: -34.72222vw;
  }
  .contact .section-contact .text-box {
    width: 37.5vw;
    font-size: 1.25vw;
    line-height: 2.91667vw;
    margin-bottom: 4.51389vw;
  }
  .contact .section-contact .form-box {
    width: 69.44444vw;
    padding: 6.66vw;
    padding-bottom: 7.84722vw;
  }
  .contact .section-contact .form-box:before {
    left: 50%;
  }
  .contact .section-contact .form-box .title {
    width: 17.08333vw;
    height: 4.16667vw;
    font-size: 0.97222vw;
    line-height: 4.16667vw;
  }
  .contact .section-contact .form-box .select {
    width: 42.43056vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .contact .section-contact .form-box label.file {
    width: 13.88889vw;
    height: 3.47222vw;
    line-height: 3.47222vw;
    font-size: 0.83333vw;
  }
  .contact .section-contact .form-box label.file .text-option {
    left: 14.58333vw;
  }
  .contact .section-contact .form-box textarea {
    width: 38.88889vw;
    height: 21.31944vw;
    padding: 1.66vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .contact .section-contact .form-box .input-box {
    margin-bottom: 3.47222vw;
  }
  .contact .section-contact .form-box .input-box.required .title:before {
    width: 3.75vw;
    height: 1.38889vw;
    line-height: 1.38889vw;
    font-size: 0.76389vw;
    right: 3.95833vw;
  }
  .contact .section-contact .form-box .input-box.select-box:before {
    width: 0.97222vw;
    height: 0.55556vw;
  }
  .contact .section-contact .form-box .input-box.select-box .text-option {
    font-size: 1.2vw;
    margin-top: 1.38889vw;
    margin-left: 17.08333vw;
  }
  .contact .section-contact .form-box .input-box.privacy-box .check-policy {
    font-size: 1.2vw;
    margin-top: 1.38889vw;
    margin-left: 17.08333vw;
  }
  .contact .section-contact .form-box .input-box select,
  .contact .section-contact .form-box .input-box input[type="text"] {
    width: 38.88889vw;
    height: 4.16667vw;
    font-size: 0.97222vw;
    padding-left: 2.22222vw;
  }
  .contact .section-contact .form-box .input-box .error {
    font-size: 0.83333vw;
    left: 17.08333vw;
    bottom: -1.38889vw;
  }
  .contact .section-contact .form-box .form-privacy {
    width: 38.88889vw;
    height: 21.31944vw;
    padding: 1.66vw;
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .contact .confirm .form-box .title {
    line-height: 1.94444vw;
  }
}

@media screen and (max-width: 750px) {
  .contact .section-contact {
    margin-top: 38.66667vw;
  }
  .contact .section-contact .text-box {
    width: 100%;
    font-size: 4vw;
    line-height: 8vw;
    margin-bottom: 26.66667vw;
  }
  .contact .section-contact .form-box {
    width: 100%;
    padding: 10.66vw 6.4vw;
  }
  .contact .section-contact .form-box:before {
    top: -22vw;
  }
  .contact .section-contact .form-box .title {
    width: 100%;
    font-size: 4vw;
    margin-bottom: 5.33333vw;
  }
  .contact .section-contact .form-box .select {
    width: 100%;
    font-size: 4vw;
    line-height: 5.33333vw;
  }
  .contact .section-contact .form-box label.file {
    display: block;
    width: 100%;
    height: 13.33333vw;
    line-height: 13.33333vw;
    font-size: 3.46667vw;
  }
  .contact .section-contact .form-box label.file .text-option {
    position: relative;
    left: initial;
    top: initial;
    -webkit-transform: none;
            transform: none;
    text-align: left;
  }
  .contact .section-contact .form-box textarea {
    width: 100%;
    height: 40vw;
    font-size: 4.26667vw;
    padding: 5.33vw;
    line-height: 1.5em;
  }
  .contact .section-contact .form-box .text-check {
    text-align: left;
    font-size: 4vw;
    line-height: 8vw;
  }
  .contact .section-contact .form-box .input-box {
    display: block;
    margin-bottom: 7.46667vw;
    padding-bottom: 7.46667vw;
    border-bottom: solid 1px #d0d0d0;
  }
  .contact .section-contact .form-box .input-box:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  .contact .section-contact .form-box .input-box.required .title {
    padding-left: 17.33333vw;
  }
  .contact .section-contact .form-box .input-box.required .title:before {
    right: initial;
    left: 0;
    width: 14.4vw;
    height: 5.33333vw;
    line-height: 5.33333vw;
    font-size: 2.93333vw;
  }
  .contact .section-contact .form-box .input-box.file-box {
    padding-bottom: 12vw;
  }
  .contact .section-contact .form-box .input-box.select-box:before {
    width: 3.73333vw;
    height: 2.13333vw;
  }
  .contact .section-contact .form-box .input-box.select-box .inner {
    display: block;
  }
  .contact .section-contact .form-box .input-box.select-box .inner:before {
    top: 69%;
  }
  .contact .section-contact .form-box .input-box.select-box .text-option {
    font-size: 3vw;
    margin-top: 2vw;
    margin-left: 0;
  }
  .contact .section-contact .form-box .input-box.privacy-box .inner {
    display: block;
  }
  .contact .section-contact .form-box .input-box.privacy-box .check-policy {
    font-size: 3vw;
    margin-top: 2vw;
    margin-left: 0;
  }
  .contact .section-contact .form-box .input-box select,
  .contact .section-contact .form-box .input-box input[type="text"] {
    width: 100%;
    height: 16vw;
    font-size: 4.26667vw;
    padding-left: 6.4vw;
  }
  .contact .section-contact .form-box .input-box .error {
    left: 0;
    bottom: 3vw;
    font-size: 2.4vw;
  }
  .contact .section-contact .form-box .form-privacy {
    width: 100%;
    padding: 5.33vw;
    line-height: 4vw;
    font-size: 14px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .contact .section-contact .form-box .recaptcha {
    font-size: 2vw;
    margin-top: 4vw;
    line-height: 1.4;
  }
  .contact .confirm .form-box .input-box {
    padding-bottom: 2.46667vw;
  }
  .contact .complete {
    margin-top: 0;
    padding-top: 29vw;
  }
  .contact .complete h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.14133vw;
  }
}

.cookie_policy .section-head:before {
  background: url(/assets/img/contact/img-head.webp) no-repeat;
  background-size: 100%;
}

.cookie_policy .section-cookie_policy {
  margin-top: 187px;
  padding-top: 78px;
  padding-bottom: 80px;
  overflow: hidden;
}

.cookie_policy .section-cookie_policy.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.cookie_policy .section-cookie_policy.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.cookie_policy .section-cookie_policy.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.cookie_policy .section-cookie_policy .section-inner {
  width: 1000px;
}

.cookie_policy .section-cookie_policy .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -195px;
  left: -530px;
}

@media screen and (max-width: 1200px) {
  .cookie_policy .section-cookie_policy .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .cookie_policy .section-cookie_policy .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.cookie_policy .section-cookie_policy h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: .56px;
}

.cookie_policy .section-cookie_policy h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .cookie_policy .section-cookie_policy h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .cookie_policy .section-cookie_policy h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.cookie_policy .section-cookie_policy h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  top: -53px;
}

@media screen and (max-width: 1200px) {
  .cookie_policy .section-cookie_policy h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .cookie_policy .section-cookie_policy h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.cookie_policy .section-cookie_policy .white-area {
  padding: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
}

.cookie_policy .section-cookie_policy .white-area .text {
  font-size: 16px;
  line-height: 37px;
  margin-bottom: 32px;
}

.cookie_policy .section-cookie_policy .white-area .text.no_step {
  margin-bottom: 0;
}

.cookie_policy .section-cookie_policy .white-area h3 {
  margin-bottom: 27px;
  font-size: 18px;
  letter-spacing: .6px;
}

.cookie_policy .section-cookie_policy .white-area .maker_disc {
  margin-left: 45px;
}

.cookie_policy .section-cookie_policy .white-area .maker_circle {
  margin: 25px 0 0 20px;
}

.cookie_policy .section-cookie_policy .white-area .maker_circle2 {
  margin-left: 65px;
}

.cookie_policy .section-cookie_policy .white-area .maker_circle3 {
  margin-left: 20px;
  margin-bottom: 10px;
}

.cookie_policy .section-cookie_policy .white-area .maker_circle3:last-child {
  margin-bottom: 0;
}

.cookie_policy .section-cookie_policy .white-area .maker_sqare {
  margin-top: 10px;
}

.cookie_policy .section-cookie_policy .white-area .text-big {
  font-size: 16px;
  line-height: 37px;
  font-weight: bold;
  margin-bottom: 18px;
}

.cookie_policy .section-cookie_policy .white-area .detail-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.cookie_policy .section-cookie_policy .white-area .detail-box .text {
  text-align: right;
}

.cookie_policy .section-cookie_policy .white-area .contact-box {
  border: solid 2px #f4f4f4;
  padding: 37px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.cookie_policy .section-cookie_policy .white-area .contact-box.mb32 {
  margin-bottom: 32px;
}

.cookie_policy .section-cookie_policy .white-area .contact-box .title {
  position: relative;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
}

.cookie_policy .section-cookie_policy .white-area .contact-box .title:before {
  content: "";
  background: url(/assets/img/concept/border-mini-yellow.webp) no-repeat;
  width: 7px;
  height: 13px;
  position: absolute;
  background-size: 100%;
  left: -13px;
  top: -13px;
}

.cookie_policy .section-cookie_policy .white-area .contact-box .text {
  margin-bottom: 0;
  line-height: 28px;
  font-size: 14px;
}

.cookie_policy .section-cookie_policy .white-area table {
  line-height: 37px;
  margin-bottom: 32px;
}

.cookie_policy .section-cookie_policy .white-area table tr:first-child th {
  background-color: #111;
  color: #fff;
  text-align: center;
  width: 400px;
  height: 70px;
  vertical-align: middle;
  border-right: solid 2px #F4F4F4;
}

.cookie_policy .section-cookie_policy .white-area table tr:first-child th:last-child {
  border-right: none;
}

.cookie_policy .section-cookie_policy .white-area table td {
  font-weight: bold;
  vertical-align: middle;
  padding: 20px 0;
  padding-left: 20px;
  border-right: solid 2px #F4F4F4;
  border-bottom: solid 2px #F4F4F4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.cookie_policy .section-cookie_policy .white-area table td:first-child {
  border-left: solid 2px #F4F4F4;
}

.cookie_policy .section-cookie_policy .white-area table td a.table_link {
  margin: 0;
  padding: 0;
  font-size: 16px;
  vertical-align: baseline;
  background: transparent;
  color: #0000EE;
}

.cookie_policy .section-cookie_policy .white-area .os_link {
  margin: 0;
  padding: 0;
  font-size: 16px;
  vertical-align: baseline;
  background: transparent;
  color: #0000EE;
}

.cookie_policy .section-cookie_policy .white-area .text-area {
  margin-top: 2.22222vw;
}

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

@media screen and (max-width: 1200px) {
  .cookie_policy .section-cookie_policy {
    margin-top: 12.91667vw;
    padding-top: 5.41667vw;
    padding-bottom: 5.55556vw;
  }
  .cookie_policy .section-cookie_policy .section-inner {
    width: 100%;
  }
  .cookie_policy .section-cookie_policy .section-inner:before {
    top: -13.54167vw;
    left: -36.80556vw;
  }
  .cookie_policy .section-cookie_policy h2 {
    font-size: 2.15278vw;
    letter-spacing: 0.03889vw;
  }
  .cookie_policy .section-cookie_policy .white-area {
    padding: 6.944vw;
  }
  .cookie_policy .section-cookie_policy .white-area .text {
    font-size: 1.11111vw;
    line-height: 2.56944vw;
    margin-bottom: 2.22222vw;
  }
  .cookie_policy .section-cookie_policy .white-area h3 {
    font-size: 1.25vw;
    margin-bottom: 1.875vw;
    letter-spacing: 0.04167vw;
  }
  .cookie_policy .section-cookie_policy .white-area .text-big {
    font-size: 1.11111vw;
    line-height: 2.56944vw;
    margin-bottom: 1.25vw;
  }
  .cookie_policy .section-cookie_policy .white-area .contact-box {
    padding: 2.56vw 2.22vw;
  }
  .cookie_policy .section-cookie_policy .white-area .contact-box .title {
    font-size: 0.97222vw;
    margin-bottom: 0.83333vw;
  }
  .cookie_policy .section-cookie_policy .white-area .contact-box .text {
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
  .cookie_policy .section-cookie_policy .white-area table {
    line-height: 2.56944vw;
    margin-bottom: 2.22222vw;
    font-size: 1.04167vw;
  }
  .cookie_policy .section-cookie_policy .white-area table tr:first-child th {
    width: 27.77778vw;
    height: 4.86111vw;
  }
  .cookie_policy .section-cookie_policy .white-area table td {
    padding: 1.38vw 0;
    padding-left: 1.38889vw;
  }
}

@media screen and (max-width: 750px) {
  .cookie_policy .section-cookie_policy {
    margin-top: 38.13333vw;
    padding-top: 18.66667vw;
  }
  .cookie_policy .section-cookie_policy .section-inner:before {
    top: -33vw;
  }
  .cookie_policy .section-cookie_policy h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.14133vw;
    margin-bottom: 6.4vw;
  }
  .cookie_policy .section-cookie_policy .white-area {
    padding: 9vw 6.4vw;
  }
  .cookie_policy .section-cookie_policy .white-area .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
    margin-bottom: 8vw;
  }
  .cookie_policy .section-cookie_policy .white-area .text.--last {
    margin-bottom: 0;
  }
  .cookie_policy .section-cookie_policy .white-area h3 {
    font-size: 3.46667vw;
    line-height: 6.66667vw;
    margin-bottom: 2.26667vw;
    letter-spacing: 0;
  }
  .cookie_policy .section-cookie_policy .white-area h4 {
    font-size: 3.4vw;
    margin-bottom: 2.26667vw;
    letter-spacing: 0;
  }
  .cookie_policy .section-cookie_policy .white-area h5 {
    font-size: 3.2vw;
    margin-bottom: 2.26667vw;
    letter-spacing: 0;
  }
  .cookie_policy .section-cookie_policy .white-area .maker_disc {
    margin-left: 30px;
  }
  .cookie_policy .section-cookie_policy .white-area .maker_circle {
    margin: 10px 0 0 15px;
  }
  .cookie_policy .section-cookie_policy .white-area .maker_circle3 {
    margin-left: 0;
    margin-bottom: 10px;
    font-size: 13px;
  }
  .cookie_policy .section-cookie_policy .white-area .maker_circle3:last-child {
    margin-bottom: 20px;
  }
  .cookie_policy .section-cookie_policy .white-area .text-big {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
    text-indent: -1em;
    padding-left: 1em;
  }
  .cookie_policy .section-cookie_policy .white-area .contact-box {
    padding: 9vw 6.4vw;
  }
  .cookie_policy .section-cookie_policy .white-area .contact-box .title {
    font-size: 3.46667vw;
    margin-bottom: 2.13333vw;
  }
  .cookie_policy .section-cookie_policy .white-area .contact-box .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
  }
  .cookie_policy .section-cookie_policy .white-area .table_list {
    overflow-x: scroll;
    white-space: nowrap;
    margin-bottom: 20px;
  }
  .cookie_policy .section-cookie_policy .white-area table {
    font-size: 3.46667vw;
  }
  .cookie_policy .section-cookie_policy .white-area table tr:first-child th {
    width: 38.4vw;
    padding: 10px;
  }
  .cookie_policy .section-cookie_policy .white-area table td {
    padding: 10px;
  }
  .cookie_policy .section-cookie_policy .white-area table td a.table_link {
    margin: 0;
    padding: 0;
    font-size: 12px;
    vertical-align: baseline;
    background: transparent;
    color: #0000EE;
  }
  .cookie_policy .section-cookie_policy .white-area .os_link {
    margin: 0;
    padding: 0;
    font-size: 13px;
    vertical-align: baseline;
    background: transparent;
    color: #0000EE;
  }
}

.personal_info .section-head:before {
  background: url(/assets/img/contact/img-head.webp) no-repeat;
  background-size: 100%;
}

.personal_info .section-personal_info {
  margin-top: 187px;
  padding-top: 78px;
  padding-bottom: 80px;
  overflow: hidden;
}

.personal_info .section-personal_info.isView .section-inner:before {
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}

.personal_info .section-personal_info.isView h2 span {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.personal_info .section-personal_info.isView h2:before {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.personal_info .section-personal_info .section-inner {
  width: 1000px;
}

.personal_info .section-personal_info .section-inner:before {
  content: "";
  background-color: #f4f4f4;
  width: 326px;
  height: 200%;
  position: absolute;
  left: 0;
  top: -170px;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: -1;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  transition: clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s, -webkit-clip-path 1.5s cubic-bezier(0.475, 0.425, 0, 0.995) 0.2s;
  top: -195px;
  left: -530px;
}

@media screen and (max-width: 1200px) {
  .personal_info .section-personal_info .section-inner:before {
    width: 22.6vw;
    top: -11.8vw;
    left: -2vw;
  }
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .section-inner:before {
    width: 36.5vw;
    top: -40vw;
  }
}

.personal_info .section-personal_info h2 {
  position: relative;
  font-size: 60px;
  letter-spacing: 8px;
  margin-bottom: 35px;
  font-family: "akrobat";
  font-size: 31px;
  letter-spacing: .56px;
}

.personal_info .section-personal_info h2 span {
  font-family: "akrobat";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
  -webkit-transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

@media screen and (max-width: 1200px) {
  .personal_info .section-personal_info h2 {
    font-size: 4.44vw;
    letter-spacing: 0.55vw;
    margin-bottom: 2.43vw;
  }
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info h2 {
    font-size: 8.26667vw;
    padding-left: 7.46vw;
    letter-spacing: 1vw;
  }
}

.personal_info .section-personal_info h2:before {
  content: "";
  position: absolute;
  left: -56px;
  top: -39px;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  background: url(/assets/img/border-yellow.webp) no-repeat;
  width: 32px;
  height: 88px;
  background-size: 100%;
  top: -53px;
}

@media screen and (max-width: 1200px) {
  .personal_info .section-personal_info h2:before {
    width: 2.22vw;
    height: 6.11vw;
    left: -3.88vw;
    top: -1.94vw;
  }
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info h2:before {
    width: 5.33vw;
    height: 15.4vw;
    left: 0vw;
    top: -6vw;
  }
}

.personal_info .section-personal_info .white-area {
  padding: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  -webkit-box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
          box-shadow: 11px 13px 27px 6px rgba(0, 0, 0, 0.02);
}

.personal_info .section-personal_info .white-area .text {
  font-size: 16px;
  line-height: 27px;
  margin: 32px 0;
}

.personal_info .section-personal_info .white-area .text.__add {
  margin-bottom: 0;
}

.personal_info .section-personal_info .white-area .text.--left {
  margin-bottom: 0;
}

.personal_info .section-personal_info .white-area .text.no_step {
  margin-bottom: 0;
}

.personal_info .section-personal_info .white-area h3 {
  margin-bottom: 27px;
  font-size: 18px;
  letter-spacing: .6px;
}

.personal_info .section-personal_info .white-area .text-big {
  font-size: 16px;
  line-height: 37px;
  font-weight: bold;
  margin-bottom: 18px;
}

.personal_info .section-personal_info .white-area .detail-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.personal_info .section-personal_info .white-area .detail-box.--left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .detail-box.--left {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.personal_info .section-personal_info .white-area .detail-box .text {
  text-align: right;
}

.personal_info .section-personal_info .white-area .detail-box .text.--left {
  text-align: left;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .detail-box .text.--left {
    text-align: right;
  }
}

.personal_info .section-personal_info .white-area .table-box {
  border: solid 1px #333;
}

.personal_info .section-personal_info .white-area .table-box + .table-box {
  margin-top: 40px;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .table-box + .table-box {
    margin-top: 20px;
  }
}

.personal_info .section-personal_info .white-area .table-boxInner {
  width: 100%;
  line-height: 37px;
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTh1 {
  background-color: #111;
  color: #fff;
  text-align: left;
  height: 70px;
  vertical-align: middle;
  font-size: 16px;
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTh1:first-child {
  border-right: solid 1px #333;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .table-boxInner .table-boxTh1 {
    font-size: 13px;
  }
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTh2 {
  background-color: #f4f4f4;
  text-align: left;
  padding: 10px;
  vertical-align: middle;
  font-size: 16px;
  border-bottom: solid 1px #333;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .table-boxInner .table-boxTh2 {
    font-size: 13px;
    height: unset;
  }
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd1 {
  font-weight: bold;
  vertical-align: middle;
  padding: 10px;
  border-bottom: solid 1px #333;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #f4f4f4;
  font-size: 16px;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .table-boxInner .table-boxTd1 {
    font-size: 13px;
  }
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd1.left-width {
  width: 35%;
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd1:first-child {
  border-right: solid 1px #333;
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd2 {
  vertical-align: middle;
  padding: 10px;
  border-bottom: solid 1px #333;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 16px;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .table-boxInner .table-boxTd2 {
    font-size: 13px;
  }
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd2.left-width {
  width: 35%;
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd2.__fontHeight {
  line-height: 24px;
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd2:first-child {
  border-right: solid 1px #333;
}

.personal_info .section-personal_info .white-area .table-boxInner .table-boxTd3 {
  vertical-align: middle;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 16px;
  line-height: 24px;
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info .white-area .table-boxInner .table-boxTd3 {
    font-size: 13px;
  }
}

.personal_info .section-personal_info .white-area .contact-box {
  border: solid 2px #f4f4f4;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
  .personal_info .section-personal_info {
    margin-top: 12.91667vw;
    padding-top: 5.41667vw;
    padding-bottom: 5.55556vw;
  }
  .personal_info .section-personal_info .section-inner {
    width: 100%;
  }
  .personal_info .section-personal_info .section-inner:before {
    top: -13.54167vw;
    left: -36.80556vw;
  }
  .personal_info .section-personal_info h2 {
    font-size: 2.15278vw;
    letter-spacing: 0.03889vw;
  }
  .personal_info .section-personal_info .white-area {
    padding: 6.944vw;
  }
  .personal_info .section-personal_info .white-area .text {
    font-size: 1.11111vw;
    line-height: 2.56944vw;
    margin-bottom: 2.22222vw;
  }
  .personal_info .section-personal_info .white-area h3 {
    font-size: 1.25vw;
    margin-bottom: 1.875vw;
    letter-spacing: 0.04167vw;
  }
  .personal_info .section-personal_info .white-area .text-big {
    font-size: 1.11111vw;
    line-height: 2.56944vw;
    margin-bottom: 1.25vw;
  }
  .personal_info .section-personal_info .white-area .contact-box {
    padding: 2.56vw 2.22vw;
  }
  .personal_info .section-personal_info .white-area .contact-box .title {
    font-size: 0.97222vw;
    margin-bottom: 0.83333vw;
  }
  .personal_info .section-personal_info .white-area .contact-box .text {
    font-size: 0.97222vw;
    line-height: 1.94444vw;
  }
}

@media screen and (max-width: 750px) {
  .personal_info .section-personal_info {
    margin-top: 38.13333vw;
    padding-top: 18.66667vw;
  }
  .personal_info .section-personal_info .section-inner:before {
    top: -33vw;
  }
  .personal_info .section-personal_info h2 {
    font-size: 5.6vw;
    line-height: 9.6vw;
    letter-spacing: 0.14133vw;
    margin-bottom: 6.4vw;
  }
  .personal_info .section-personal_info .white-area {
    padding: 9vw 6.4vw;
  }
  .personal_info .section-personal_info .white-area .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
    margin-bottom: 8vw;
  }
  .personal_info .section-personal_info .white-area h3 {
    font-size: 3.46667vw;
    line-height: 6.66667vw;
    margin-bottom: 4.26667vw;
    letter-spacing: 0;
  }
  .personal_info .section-personal_info .white-area .text-big {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
    text-indent: -1em;
    padding-left: 1em;
  }
  .personal_info .section-personal_info .white-area .contact-box {
    padding: 9vw 6.4vw;
  }
  .personal_info .section-personal_info .white-area .contact-box .title {
    font-size: 3.46667vw;
    margin-bottom: 2.13333vw;
  }
  .personal_info .section-personal_info .white-area .contact-box .text {
    font-size: 3.46667vw;
    line-height: 6.93333vw;
  }
  .personal_info .section-personal_info .white-area .table-boxInner {
    font-size: 3.46667vw;
    line-height: 5.86667vw;
  }
}

/*!
 * froala_editor v3.2.6 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2021 Froala Labs
 */
.fr-clearfix::after {
  clear: both;
  display: block;
  content: "";
  height: 0;
}

.fr-hide-by-clipping {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.fr-view img.fr-rounded, .fr-view .fr-img-caption.fr-rounded img {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.fr-view img.fr-shadow, .fr-view .fr-img-caption.fr-shadow img {
  -webkit-box-shadow: 10px 10px 5px 0px #cccccc;
  box-shadow: 10px 10px 5px 0px #cccccc;
}

.fr-view img.fr-bordered, .fr-view .fr-img-caption.fr-bordered img {
  border: solid 5px #CCC;
}

.fr-view img.fr-bordered {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.fr-view .fr-img-caption.fr-bordered img {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.fr-view {
  word-wrap: break-word;
}

.fr-view span[style~="color:"] a {
  color: inherit;
}

.fr-view strong {
  font-weight: 700;
}

.fr-view table {
  border: none;
  border-collapse: collapse;
  empty-cells: show;
  max-width: 100%;
}

.fr-view table td {
  min-width: 5px;
}

.fr-view table.fr-dashed-borders td, .fr-view table.fr-dashed-borders th {
  border-style: dashed;
}

.fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
  background: whitesmoke;
}

.fr-view table td, .fr-view table th {
  border: 1px solid #DDD;
}

.fr-view table td:empty, .fr-view table th:empty {
  height: 20px;
}

.fr-view table td.fr-highlighted, .fr-view table th.fr-highlighted {
  border: 1px double red;
}

.fr-view table td.fr-thick, .fr-view table th.fr-thick {
  border-width: 2px;
}

.fr-view table th {
  background: #ececec;
}

.fr-view hr {
  clear: both;
  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-column-break-after: always;
     -moz-column-break-after: always;
          break-after: always;
  page-break-after: always;
}

.fr-view .fr-file {
  position: relative;
}

.fr-view .fr-file::after {
  position: relative;
  content: "\1F4CE";
  font-weight: normal;
}

.fr-view pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: visible;
}

.fr-view[dir="rtl"] blockquote {
  border-left: none;
  border-right: solid 2px #5E35B1;
  margin-right: 0;
  padding-right: 5px;
  padding-left: 0;
}

.fr-view[dir="rtl"] blockquote blockquote {
  border-color: #00BCD4;
}

.fr-view[dir="rtl"] blockquote blockquote blockquote {
  border-color: #43A047;
}

.fr-view blockquote {
  border-left: solid 2px #5E35B1;
  margin-left: 0;
  padding-left: 5px;
  color: #5E35B1;
}

.fr-view blockquote blockquote {
  border-color: #00BCD4;
  color: #00BCD4;
}

.fr-view blockquote blockquote blockquote {
  border-color: #43A047;
  color: #43A047;
}

.fr-view span.fr-emoticon {
  font-weight: normal;
  font-family: "Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";
  display: inline;
  line-height: 0;
}

.fr-view span.fr-emoticon.fr-emoticon-img {
  background-repeat: no-repeat !important;
  font-size: inherit;
  height: 1em;
  width: 1em;
  min-height: 20px;
  min-width: 20px;
  display: inline-block;
  margin: -.1em .1em .1em;
  line-height: 1;
  vertical-align: middle;
}

.fr-view .fr-text-gray {
  color: #AAA !important;
}

.fr-view .fr-text-bordered {
  border-top: solid 1px #222;
  border-bottom: solid 1px #222;
  padding: 10px 0;
}

.fr-view .fr-text-spaced {
  letter-spacing: 1px;
}

.fr-view .fr-text-uppercase {
  text-transform: uppercase;
}

.fr-view .fr-class-highlighted {
  background-color: #ffff00;
}

.fr-view .fr-class-code {
  border-color: #cccccc;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: #f5f5f5;
  padding: 10px;
  font-family: "Courier New", Courier, monospace;
}

.fr-view .fr-class-transparency {
  opacity: 0.5;
}

.fr-view img {
  position: relative;
  max-width: 100%;
}

.fr-view img.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}

.fr-view img.fr-dib.fr-fil {
  margin-left: 0;
  text-align: left;
}

.fr-view img.fr-dib.fr-fir {
  margin-right: 0;
  text-align: right;
}

.fr-view img.fr-dii {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  max-width: calc(100% - (2 * 5px));
}

.fr-view img.fr-dii.fr-fil {
  float: left;
  margin: 5px 5px 5px 0;
  max-width: calc(100% - 5px);
}

.fr-view img.fr-dii.fr-fir {
  float: right;
  margin: 5px 0 5px 5px;
  max-width: calc(100% - 5px);
}

.fr-view span.fr-img-caption {
  position: relative;
  max-width: 100%;
}

.fr-view span.fr-img-caption.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}

.fr-view span.fr-img-caption.fr-dib.fr-fil {
  margin-left: 0;
  text-align: left;
}

.fr-view span.fr-img-caption.fr-dib.fr-fir {
  margin-right: 0;
  text-align: right;
}

.fr-view span.fr-img-caption.fr-dii {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  max-width: calc(100% - (2 * 5px));
}

.fr-view span.fr-img-caption.fr-dii.fr-fil {
  float: left;
  margin: 5px 5px 5px 0;
  max-width: calc(100% - 5px);
}

.fr-view span.fr-img-caption.fr-dii.fr-fir {
  float: right;
  margin: 5px 0 5px 5px;
  max-width: calc(100% - 5px);
}

.fr-view .fr-video {
  text-align: center;
  position: relative;
}

.fr-view .fr-video.fr-rv {
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.fr-view .fr-video.fr-rv > iframe, .fr-view .fr-video.fr-rv object, .fr-view .fr-video.fr-rv embed {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fr-view .fr-video > * {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 100%;
  border: none;
}

.fr-view .fr-video.fr-dvb {
  display: block;
  clear: both;
}

.fr-view .fr-video.fr-dvb.fr-fvl {
  text-align: left;
}

.fr-view .fr-video.fr-dvb.fr-fvr {
  text-align: right;
}

.fr-view .fr-video.fr-dvi {
  display: inline-block;
}

.fr-view .fr-video.fr-dvi.fr-fvl {
  float: left;
}

.fr-view .fr-video.fr-dvi.fr-fvr {
  float: right;
}

.fr-view a.fr-strong {
  font-weight: 700;
}

.fr-view a.fr-green {
  color: green;
}

.fr-view .fr-img-caption {
  text-align: center;
}

.fr-view .fr-img-caption .fr-img-wrap {
  padding: 0;
  margin: auto;
  text-align: center;
  width: 100%;
}

.fr-view .fr-img-caption .fr-img-wrap a {
  display: block;
}

.fr-view .fr-img-caption .fr-img-wrap img {
  display: block;
  margin: auto;
  width: 100%;
}

.fr-view .fr-img-caption .fr-img-wrap > span {
  margin: auto;
  display: block;
  padding: 5px 5px 10px;
  font-size: 14px;
  font-weight: initial;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  width: 100%;
  text-align: center;
}

.fr-view button.fr-rounded, .fr-view input.fr-rounded, .fr-view textarea.fr-rounded {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.fr-view button.fr-large, .fr-view input.fr-large, .fr-view textarea.fr-large {
  font-size: 24px;
}

.fr-view ul, .fr-view ol {
  list-style-position: inside;
}

a.fr-view.fr-strong {
  font-weight: 700;
}

a.fr-view.fr-green {
  color: green;
}

img.fr-view {
  position: relative;
  max-width: 100%;
}

img.fr-view.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}

img.fr-view.fr-dib.fr-fil {
  margin-left: 0;
  text-align: left;
}

img.fr-view.fr-dib.fr-fir {
  margin-right: 0;
  text-align: right;
}

img.fr-view.fr-dii {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  max-width: calc(100% - (2 * 5px));
}

img.fr-view.fr-dii.fr-fil {
  float: left;
  margin: 5px 5px 5px 0;
  max-width: calc(100% - 5px);
}

img.fr-view.fr-dii.fr-fir {
  float: right;
  margin: 5px 0 5px 5px;
  max-width: calc(100% - 5px);
}

span.fr-img-caption.fr-view {
  position: relative;
  max-width: 100%;
}

span.fr-img-caption.fr-view.fr-dib {
  margin: 5px auto;
  display: block;
  float: none;
  vertical-align: top;
}

span.fr-img-caption.fr-view.fr-dib.fr-fil {
  margin-left: 0;
  text-align: left;
}

span.fr-img-caption.fr-view.fr-dib.fr-fir {
  margin-right: 0;
  text-align: right;
}

span.fr-img-caption.fr-view.fr-dii {
  display: inline-block;
  float: none;
  vertical-align: bottom;
  margin-left: 5px;
  margin-right: 5px;
  max-width: calc(100% - (2 * 5px));
}

span.fr-img-caption.fr-view.fr-dii.fr-fil {
  float: left;
  margin: 5px 5px 5px 0;
  max-width: calc(100% - 5px);
}

span.fr-img-caption.fr-view.fr-dii.fr-fir {
  float: right;
  margin: 5px 0 5px 5px;
  max-width: calc(100% - 5px);
}

html[data-site="uxdesign"] {
  height: 100vh;
}

body.-site--uxdesign {
  background: var(--color-base_3);
  min-width: 1240px;
}

@media screen and (max-width: 767px) {
  body.-site--uxdesign {
    min-width: auto;
  }
}

body.-site--uxdesign.-lock {
  position: fixed;
  left: 0;
  right: 0;
  top: 0%;
  bottom: 0;
}

body.-site--uxdesign h1 {
  position: static;
  right: auto;
  top: auto;
  display: block;
}

body.-site--uxdesign *,
body.-site--uxdesign *:before,
body.-site--uxdesign *:after {
  font-family: var(--font-family-ja);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body.-site--uxdesign img {
  max-width: 100%;
  vertical-align: bottom;
}

body.-site--uxdesign .-pc--none {
  display: none;
}

@media screen and (max-width: 767px) {
  body.-site--uxdesign .-pc--none {
    display: inline-block;
  }
}

body.-site--uxdesign .-sp--none {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  body.-site--uxdesign .-sp--none {
    display: none;
  }
}

body.-site--uxdesign .-no--link, body.-site--uxdesign .-link--none {
  pointer-events: none;
}

@-webkit-keyframes hideNavFadein {
  0% {
    display: none;
    opacity: 0;
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
  75% {
    display: block;
    opacity: 0;
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
  100% {
    display: block;
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes hideNavFadein {
  0% {
    display: none;
    opacity: 0;
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
  75% {
    display: block;
    opacity: 0;
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
  100% {
    display: block;
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

body.-site--uxdesign .uxdesign-c-bg {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

body.-site--uxdesign.-page--about .uxdesign-c-bg {
  background: url("/assets/img/uxdesign/about/bg-pc.svg") no-repeat left -90px top -43px/calc(100% + 90px + 148px);
}

@media screen and (max-width: 767px) {
  body.-site--uxdesign.-page--about .uxdesign-c-bg {
    background: url("/assets/img/uxdesign/about/bg-sp.svg") no-repeat left -73px top -44px/calc(100% + 73px + 123px);
  }
}

body.-site--uxdesign.-page--service .uxdesign-c-bg {
  background: url("/assets/img/uxdesign/service/bg-pc.svg") no-repeat right 0px top -43px/50% 1054px;
}

@media screen and (max-width: 767px) {
  body.-site--uxdesign.-page--service .uxdesign-c-bg {
    background: url("/assets/img/uxdesign/service/bg-sp.svg") no-repeat right 0px top -44px/calc(100% - 30px);
  }
}

.uxdesign-c-breadcrumb {
  padding: 16px 0;
  background-color: var(--color-black);
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}

.uxdesign-c-breadcrumb::-webkit-scrollbar {
  display: none;
}

.uxdesign-c-breadcrumb ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.uxdesign-c-breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--color-main_4-txt_head);
  font-size: 0.75rem;
  font-weight: 400;
}

.uxdesign-c-breadcrumb li + li:before {
  background: var(--color-main_6-txt);
  content: " ";
  display: block;
  width: 8px;
  height: 1px;
  margin: 0 6px;
}

.uxdesign-c-breadcrumb li a {
  font-weight: 400;
  text-decoration: none;
  color: var(--color-main_5-txt_head);
  font-size: 0.75rem;
}

.uxdesign-c-breadcrumb li a:hover {
  opacity: 1;
}

.uxdesign-c-button.-width--300px a {
  width: 100%;
  max-width: 300px;
}

.uxdesign-c-button.-color--purple a {
  background-color: var(--color-accent_1);
}

.uxdesign-c-button.-color--white a {
  background-color: white;
}

.uxdesign-c-button.-color--white a:hover {
  background: var(--color-main_2-btn);
}

.uxdesign-c-button.-color--white a:hover .c-button__text {
  color: white;
}

.uxdesign-c-button.-color--white a:hover .c-button__arrow svg {
  fill: white;
}

.uxdesign-c-button.-color--white a .c-button__text {
  color: var(--color-main_1-txt);
}

.uxdesign-c-button.-color--white a .c-button__arrow svg {
  fill: var(--color-main_1-txt);
}

.uxdesign-c-button.-text--ja .c-button__text {
  font-family: var(--font-family-ja);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 1px;
}

.uxdesign-c-button a {
  display: block;
  background: var(--color-main_2-btn);
  -webkit-box-shadow: 16.5688px 16.5688px 33.1376px rgba(125, 79, 254, 0.3);
          box-shadow: 16.5688px 16.5688px 33.1376px rgba(125, 79, 254, 0.3);
  border-radius: 100px;
  text-decoration: none;
  width: 260px;
  height: 64px;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.uxdesign-c-button a:hover {
  background-color: white;
}

.uxdesign-c-button a:hover .c-button__text {
  color: var(--color-main_1-txt);
}

.uxdesign-c-button a:hover .c-button__arrow {
  right: 21px;
}

.uxdesign-c-button a:hover .c-button__arrow svg {
  fill: var(--color-main_1-txt);
}

.uxdesign-c-button .c-button__text {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 140%;
  letter-spacing: 4px;
  color: #FFFFFF;
  -webkit-transition: color .3s;
  transition: color .3s;
  font-family: var(--font-family-en);
}

.uxdesign-c-button .c-button__arrow {
  -webkit-transition: right .3s;
  transition: right .3s;
  position: absolute;
  right: 27px;
  top: calc(50% - 4.5px);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.uxdesign-c-button .c-button__arrow svg {
  fill: white;
  -webkit-transition: fill .3s;
  transition: fill .3s;
}

.uxdesign-c-clientList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

.uxdesign-c-clientList .c-clientList__item {
  background-color: white;
  -webkit-box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.2);
          box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.2);
  height: 78px;
  width: calc(100% / 5 - 80px / 5);
  margin-right: 20px;
}

.uxdesign-c-clientList .c-clientList__item:nth-child(5n) {
  margin-right: 0;
}

.uxdesign-c-clientList .c-clientList__item:nth-child(n+6) {
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-clientList .c-clientList__item {
    -webkit-box-shadow: 12px 12px 24px rgba(125, 79, 254, 0.2);
            box-shadow: 12px 12px 24px rgba(125, 79, 254, 0.2);
    height: 62px;
    width: calc(50% - 15px / 2);
    margin-right: 15px !important;
  }
  .uxdesign-c-clientList .c-clientList__item:nth-child(2n) {
    margin-right: 0 !important;
  }
  .uxdesign-c-clientList .c-clientList__item:nth-child(n+3) {
    margin-top: 15px !important;
  }
}

.uxdesign-c-clientList .c-clientList__image {
  position: relative;
  height: 100%;
  width: 100%;
}

.uxdesign-c-clientList .c-clientList__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.uxdesign-c-ctaButtons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 448px;
  width: 100%;
}

.uxdesign-c-ctaButtons.-buttons--large {
  width: 528px;
  max-width: 528px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--large {
    width: 100%;
    max-width: 100%;
    display: block;
  }
}

.uxdesign-c-ctaButtons.-buttons--large a {
  height: 60px;
  width: 258px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--large a {
    height: 60px;
    width: 100%;
  }
  .uxdesign-c-ctaButtons.-buttons--large a + a {
    margin-top: 12px;
  }
}

.uxdesign-c-ctaButtons.-buttons--small {
  max-width: 420px;
}

.uxdesign-c-ctaButtons.-buttons--small a {
  height: 50px;
  width: 204px;
  width: calc(50% - 6px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--small a {
    height: 48px;
    width: calc(50% - 3.5px);
  }
}

.uxdesign-c-ctaButtons.-buttons--small a.-document .c-ctaButtons__icon {
  height: 13px;
  width: 13px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--small a.-document .c-ctaButtons__icon {
    height: 12px;
    width: 12px;
  }
}

.uxdesign-c-ctaButtons.-buttons--small a.-contact .c-ctaButtons__icon {
  height: 11px;
  width: 14px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--small a.-contact .c-ctaButtons__icon {
    height: 11px;
    width: 14px;
  }
}

.uxdesign-c-ctaButtons.-buttons--small .c-ctaButtons__icon {
  margin-right: 8px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--small .c-ctaButtons__icon {
    margin-right: 6px;
  }
}

.uxdesign-c-ctaButtons.-buttons--smallsmall {
  width: 346px;
}

.uxdesign-c-ctaButtons.-buttons--smallsmall a {
  height: 42px;
  width: 168px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--smallsmall a {
    height: 48px;
    width: calc(50% - 3.5px);
  }
}

.uxdesign-c-ctaButtons.-buttons--smallsmall a.-document .c-ctaButtons__icon {
  height: 11px;
  width: 11px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--smallsmall a.-document .c-ctaButtons__icon {
    height: 12px;
    width: 12px;
  }
}

.uxdesign-c-ctaButtons.-buttons--smallsmall a.-contact .c-ctaButtons__icon {
  height: 11px;
  width: 14px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--smallsmall a.-contact .c-ctaButtons__icon {
    height: 11px;
    width: 14px;
  }
}

.uxdesign-c-ctaButtons.-buttons--smallsmall .c-ctaButtons__icon {
  margin-right: 8px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--smallsmall .c-ctaButtons__icon {
    margin-right: 6px;
  }
}

.uxdesign-c-ctaButtons.-buttons--smallsmall .c-ctaButtons__text {
  font-size: 0.8125rem;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-buttons--smallsmall .c-ctaButtons__text {
    font-size: 0.875rem;
  }
}

.uxdesign-c-ctaButtons.-bg--dark a {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.uxdesign-c-ctaButtons.-bg--dark a.-document {
  background-color: var(--color-main_3-btn);
}

.uxdesign-c-ctaButtons.-bg--dark a.-contact {
  background-color: var(--color-accent_1);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons.-sp-bg--dark a.-document {
    background-color: var(--color-main_3-btn);
  }
  .uxdesign-c-ctaButtons.-sp-bg--dark a.-contact {
    background-color: var(--color-accent_1);
  }
}

.uxdesign-c-ctaButtons a {
  background: #36343F;
  -webkit-box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.3);
          box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.3);
  border-radius: 100px;
  height: 60px;
  width: 218px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons a {
    height: 48px;
    width: calc(50% - 3.5px);
  }
}

.uxdesign-c-ctaButtons a:hover.-document {
  background-color: white;
}

.uxdesign-c-ctaButtons a:hover.-document .c-ctaButtons__icon svg {
  fill: var(--color-main_2-btn);
}

.uxdesign-c-ctaButtons a:hover.-document .c-ctaButtons__text {
  color: var(--color-main_2-btn);
}

.uxdesign-c-ctaButtons a:hover.-contact {
  background-color: white;
}

.uxdesign-c-ctaButtons a:hover.-contact .c-ctaButtons__icon svg {
  fill: var(--color-main_7-txt);
}

.uxdesign-c-ctaButtons a:hover.-contact .c-ctaButtons__text {
  color: var(--color-main_7-txt);
}

.uxdesign-c-ctaButtons a.-document {
  background-color: var(--color-main_2-btn);
}

.uxdesign-c-ctaButtons a.-contact {
  background-color: var(--color-accent_1);
}

.uxdesign-c-ctaButtons .c-ctaButtons__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 13px;
  width: 15px;
  margin-right: 10px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons .c-ctaButtons__icon {
    height: 12px;
    margin-right: 6px;
  }
}

.uxdesign-c-ctaButtons .c-ctaButtons__icon svg {
  fill: white;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: fill .3s;
  transition: fill .3s;
}

.uxdesign-c-ctaButtons .c-ctaButtons__text {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  text-align: center;
  letter-spacing: 1px;
  color: #FFFFFF;
  -webkit-transition: color .3s;
  transition: color .3s;
  margin-bottom: 2px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-ctaButtons .c-ctaButtons__text {
    font-size: 0.8125rem;
  }
}

.uxdesign-c-footer {
  background-color: var(--color-main_1-txt);
  padding: 120px 0;
  position: relative;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer {
    padding: 80px 0 30px;
  }
}

.uxdesign-c-footer .c-footer__scroll {
  position: absolute;
  left: calc(100% - (24px + 50px));
  top: 50px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__scroll {
    left: calc(100% - (24px + 15px));
    top: 20px;
  }
}

.uxdesign-c-footer .c-footer__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__layout {
    display: block;
  }
}

.uxdesign-c-footer .c-footer__layoutLeft {
  max-width: 400px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__layoutLeft {
    max-width: 100%;
  }
}

.uxdesign-c-footer .c-footer__layoutRight {
  margin-top: 30px;
  width: calc(100% - (400px + 90px));
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__layoutRight {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 40px;
    padding-top: 40px;
  }
}

.uxdesign-c-footer .c-footer__layoutButtom {
  margin-top: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__layoutButtom {
    margin-top: 40px;
    display: block;
  }
}

.uxdesign-c-footer .c-footer__logo {
  display: inline-block;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.uxdesign-c-footer .c-footer__logo img {
  width: 253px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__logo img {
    width: 212px;
  }
}

.uxdesign-c-footer .c-footer__description {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: var(--color-main_6-txt);
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__description {
    margin-top: 30px;
    line-height: 160%;
  }
}

.uxdesign-c-footer .c-footer__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 28px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__lists {
    display: block;
  }
  .uxdesign-c-footer .c-footer__lists .c-footer__list + .c-footer__list {
    margin-top: 12px;
  }
}

.uxdesign-c-footer .c-footer__list.-list--layoutleft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  margin-top: 28px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__list.-list--layoutleft {
    display: block;
  }
}

.uxdesign-c-footer .c-footer__list.-list--layoutleft .c-footer__item {
  margin-right: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__list.-list--layoutleft .c-footer__item {
    margin-right: 0px;
  }
  .uxdesign-c-footer .c-footer__list.-list--layoutleft .c-footer__item + .c-footer__item {
    margin-top: 12px;
  }
}

.uxdesign-c-footer .c-footer__list.-list--layoutRight .c-footer__item {
  margin-right: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__list.-list--layoutRight .c-footer__item {
    margin: 0;
  }
}

.uxdesign-c-footer .c-footer__list.-list--layoutRight .c-footer__item + .c-footer__item {
  margin-top: 14px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__list.-list--layoutRight .c-footer__item + .c-footer__item {
    margin-top: 12px;
  }
}

.uxdesign-c-footer .c-footer__itemLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.uxdesign-c-footer .c-footer__itemLink:hover {
  color: var(--color-accent_1);
}

.uxdesign-c-footer .c-footer__itemLink:hover::after {
  -webkit-transform: translateX(2px);
          transform: translateX(2px);
}

.uxdesign-c-footer .c-footer__itemLink::after {
  content: "";
  display: block;
  height: 10px;
  width: 14px;
  background: url(/assets/img/uxdesign/common/footer_linkArrow.svg) no-repeat center/contain;
  margin-left: 8px;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.uxdesign-c-footer .c-footer__itemLink.-link--none {
  opacity: .5;
  pointer-events: none;
}

.uxdesign-c-footer .c-footer__itemLink.-link--none::after {
  display: none;
}

.uxdesign-c-footer .c-footer__buttons {
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__buttons {
    margin-top: 30px;
  }
}

.uxdesign-c-footer .c-footer__title {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

.uxdesign-c-footer .c-footer__title a {
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.uxdesign-c-footer .c-footer__title a:hover::after {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.uxdesign-c-footer .c-footer__title a::after {
  position: absolute;
  bottom: -0px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: white;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.uxdesign-c-footer .c-footer__companyInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 700px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__companyInfo {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.uxdesign-c-footer .c-footer__companyLogo img {
  width: 146px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__companyLogo img {
    width: 130px;
  }
}

.uxdesign-c-footer .c-footer__companyList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__companyList {
    margin: 0;
    display: block;
  }
}

.uxdesign-c-footer .c-footer__companyList .c-footer__item + .c-footer__item {
  margin-left: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__companyList .c-footer__item + .c-footer__item {
    margin-left: 0px;
    margin-top: 8px;
  }
}

.uxdesign-c-footer .c-footer__copyright {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 180%;
  letter-spacing: 2px;
  color: #FFFFFF;
  opacity: 0.3;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-footer .c-footer__copyright {
    margin-top: 40px;
    text-align: center;
  }
}

.uxdesign-c-form input,
.uxdesign-c-form button,
.uxdesign-c-form select,
.uxdesign-c-form textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

.uxdesign-c-form input:not([type="checkbox"]), .uxdesign-c-form .leadgrid-form__select select {
  height: 70px;
  border-radius: 0;
}

.uxdesign-c-form input:not([type="checkbox"]), .uxdesign-c-form textarea, .uxdesign-c-form .leadgrid-form__select select {
  color: var(--color-main_1-txt);
  background: #FFFFFF;
  -webkit-box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.2);
          box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.2);
  font-size: 1rem;
  padding: 20px 30px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form input:not([type="checkbox"]), .uxdesign-c-form textarea, .uxdesign-c-form .leadgrid-form__select select {
    padding: 20px;
  }
}

.uxdesign-c-form input:not([type="checkbox"]), .uxdesign-c-form textarea, .uxdesign-c-form .leadgrid-form__select {
  width: 70%;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form input:not([type="checkbox"]), .uxdesign-c-form textarea, .uxdesign-c-form .leadgrid-form__select {
    width: 100%;
  }
}

.uxdesign-c-form.-form--download input:not([type="checkbox"]), .uxdesign-c-form.-form--download select {
  height: 64px;
}

.uxdesign-c-form.-form--download input:not([type="checkbox"]), .uxdesign-c-form.-form--download textarea, .uxdesign-c-form.-form--download .leadgrid-form__select {
  width: 360px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form.-form--download input:not([type="checkbox"]), .uxdesign-c-form.-form--download textarea, .uxdesign-c-form.-form--download .leadgrid-form__select {
    width: 100%;
  }
}

.uxdesign-c-form.-form--download .leadgrid-form__error {
  width: calc(100% - 360px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form.-form--download .leadgrid-form__error {
    width: 100%;
  }
}

.uxdesign-c-form.-form--download .leadgrid-form__label {
  width: calc(100% - 360px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form.-form--download .leadgrid-form__label {
    width: 100%;
  }
}

.uxdesign-c-form .leadgrid-form__row + .leadgrid-form__row {
  margin-top: calc(40px - 12px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form .leadgrid-form__row + .leadgrid-form__row {
    margin-top: calc(28px - 12px);
  }
}

.uxdesign-c-form .leadgrid-form__error {
  display: block;
  width: 100%;
}

.uxdesign-c-form .leadgrid-form__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 30%;
  padding-right: 30px;
  padding-top: 22px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: 1px;
  color: #323A37;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form .leadgrid-form__label {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-right: 0;
    padding-top: 0px;
    width: 100%;
    margin-bottom: 12px;
  }
}

.uxdesign-c-form .leadgrid-form__label::before {
  border-radius: 0px;
  content: "任意";
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 100%;
  letter-spacing: 1px;
  color: #FFFFFF;
  margin: 0%;
  padding: 0%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  height: 24px;
  width: 40px;
  min-width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 30px;
  background: var(--color-main_6-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form .leadgrid-form__label::before {
    margin-left: 12px;
  }
}

.uxdesign-c-form .leadgrid-form__label.-required::before {
  content: "必須";
  background: var(--color-accent_1);
}

.uxdesign-c-form .leadgrid-form__error {
  margin-left: 30%;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form .leadgrid-form__error {
    margin-left: 0%;
  }
}

.uxdesign-c-form .c-form__agree, .uxdesign-c-form .leadgrid-form__agree {
  margin-top: 60px;
  padding-top: 60px;
  text-align: center;
  border-top: 1px solid rgba(150, 132, 186, 0.3);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form .c-form__agree, .uxdesign-c-form .leadgrid-form__agree {
    margin-top: 60px;
    padding-top: 50px;
  }
}

.uxdesign-c-form .c-form__agreeText {
  font-weight: 700;
  font-size: 15px;
  line-height: 160%;
  /* identical to box height, or 160% */
  color: var(--color-main_1-txt);
  letter-spacing: 1px;
}

.uxdesign-c-form .c-form__agreeText a {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-main_7-txt);
  text-decoration: underline;
}

.uxdesign-c-form .c-form__checkbox {
  margin-top: 30px;
}

.uxdesign-c-form .c-form__checkbox + div {
  margin: 0;
  padding: 0;
}

.uxdesign-c-form .c-form__checkbox input[type="checkbox"] {
  height: 22px;
  width: 22px;
  min-width: 22px;
  border: solid 4px rgba(122, 82, 255, 0.15);
  margin: 0;
  padding: 0;
  margin-right: 16px;
  position: relative;
}

.uxdesign-c-form .c-form__checkbox input[type="checkbox"]::after {
  content: "";
  display: block;
  height: 14px;
  width: 14px;
  background: var(--color-accent_1);
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  -webkit-transition: all .1s;
  transition: all .1s;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
}

.uxdesign-c-form .c-form__checkbox input[type="checkbox"]:checked::after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.uxdesign-c-form .privacy {
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 1px;
  color: var(--color-main_6-txt);
  margin-top: 30px;
  font-family: var(--font-family-en);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form .privacy {
    margin-top: 20px;
  }
}

.uxdesign-c-form .privacy a {
  font-weight: 500;
  color: var(--color-main_6-txt);
}

.uxdesign-c-form button[type="submit"] {
  background-color: var(--color-accent_1);
  -webkit-box-shadow: 16.5688px 16.5688px 33.1376px rgba(125, 79, 254, 0.3);
          box-shadow: 16.5688px 16.5688px 33.1376px rgba(125, 79, 254, 0.3);
  border-radius: 100px;
  height: 64px;
  width: 100%;
  max-width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 40px auto 0;
  position: relative;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-form button[type="submit"] {
    margin-top: 30px;
  }
}

.uxdesign-c-form button[type="submit"]:hover {
  background-color: white;
}

.uxdesign-c-form button[type="submit"]:hover::after {
  background-image: url(/assets/img/uxdesign/common/form_arrow-black.svg);
}

.uxdesign-c-form button[type="submit"]:hover .c-button__jaTitle {
  color: var(--color-main_1-txt);
}

.uxdesign-c-form button[type="submit"]::after {
  content: "";
  display: block;
  height: 10px;
  width: 14px;
  background: url(/assets/img/uxdesign/common/form_arrow-white.svg) no-repeat center/contain;
  position: absolute;
  right: 27px;
  top: calc(50% - 5px);
  -webkit-transition: background-image .3s;
  transition: background-image .3s;
}

.uxdesign-c-form .c-button__jaTitle {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 1px;
  color: #FFFFFF;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.uxdesign-c-form .leadgrid-form__select::before {
  display: none;
}

.uxdesign-c-form .leadgrid-form__select::after {
  content: "";
  height: 6px;
  width: 10px;
  margin: 0;
  border: none;
  -webkit-transform: none;
          transform: none;
  right: 30px;
  top: calc(50% - 3px);
  background: url(/assets/img/uxdesign/common/icon_selectArrow.svg) no-repeat center/contain;
}

.uxdesign-c-header {
  -webkit-transition: all .8s;
  transition: all .8s;
  position: fixed;
  top: 0;
  width: auto;
  background-color: transparent;
  z-index: 99;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-header {
    width: 100%;
    z-index: 103;
  }
}

.uxdesign-c-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uxdesign-c-header a {
  text-decoration: none;
}

.uxdesign-c-header .c-header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: height .6s;
  transition: height .6s;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 120px;
  padding: 0 40px 0 44px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-header .c-header__inner {
    padding: 0 20px;
    height: 73px;
    -webkit-box-align: normal;
        -ms-flex-align: normal;
            align-items: normal;
    padding: 29px 0 0 20px;
  }
}

.uxdesign-c-header .c-header__inner .c-header__logo {
  z-index: 98;
  position: relative;
  top: auto;
  right: auto;
  margin: 0;
}

.uxdesign-c-header .c-header__inner .c-header__logoLink {
  display: block;
  text-decoration: none;
  width: 194px;
  height: 43px;
  position: relative;
  -webkit-transition: all .3s;
  transition: all .3s;
  overflow: hidden;
  text-indent: 105%;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-header .c-header__inner .c-header__logoLink {
    width: 149px;
    height: 33px;
  }
}

.uxdesign-c-header .c-header__inner .c-header__logoLink::before, .uxdesign-c-header .c-header__inner .c-header__logoLink::after {
  background: url("/assets/img/uxdesign/common/logo-black.svg") no-repeat center/contain;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.uxdesign-c-header .c-header__inner .c-header__logoLink::after {
  opacity: 0;
  background-image: url("/assets/img/uxdesign/common/logo-white.svg");
}

.uxdesign-c-header .c-header__inner .c-header__logoLink.-logo--white::before {
  opacity: 0;
}

.uxdesign-c-header .c-header__inner .c-header__logoLink.-logo--white::after {
  opacity: 1;
}

/* ==================================================
mix-blend-modeをロゴにかけないために、取り急ぎ下記分離
==================================================  */
.c-header__fixedNav {
  position: fixed;
  top: 0;
  right: 430px;
  mix-blend-mode: difference;
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 101;
}

@media screen and (max-width: 767px) {
  .c-header__fixedNav {
    mix-blend-mode: normal;
    right: 0;
    padding: 0 20px;
    height: 73px;
  }
}

.c-header__fixedNav a {
  text-decoration: none;
}

.c-header__fixedNav .c-header__nav {
  display: none;
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-main_1-txt);
  z-index: 97;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.c-header__fixedNav .c-header__nav::after {
  content: "";
  display: block;
  width: 419px;
  height: 386px;
  position: fixed;
  top: -15px;
  right: -95px;
  z-index: 98;
  background: var(--color-main_1-txt) url(/assets/img/uxdesign/common/header_navBg.svg) no-repeat center/cover;
}

.c-header__fixedNav .c-header__nav .c-header__navInner {
  max-width: 500px;
  padding: 0 28px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  z-index: 99;
}

.c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList {
    display: block;
    margin: 0;
  }
}

.c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navItem {
  margin-right: 40px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navItem {
    margin: 0;
  }
}

.c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navItem.-is-page::before {
  background-color: var(--color-black);
  border-radius: 100%;
  content: "";
  display: block;
  height: 6px;
  width: 6px;
  position: absolute;
  left: calc(50% - 3px);
  bottom: calc(100% + 14px);
}

@media screen and (max-width: 767px) {
  .c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navItem.-is-page::before {
    display: none;
  }
}

.c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navParentLink {
  color: var(--color-black);
  font-weight: bold;
  font-size: 0.9375rem;
  line-height: 150%;
  letter-spacing: 0.04em;
  display: inline-block;
  position: relative;
}

@media screen and (max-width: 767px) {
  .c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navParentLink {
    color: var(--color-black);
    padding: 14px 0;
    font-size: 1.125rem;
  }
}

.c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navParentLink::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: white;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navParentLink:hover {
  opacity: 1;
}

.c-header__fixedNav .c-header__nav .c-header__navInner .c-header__navList .c-header__navParentLink:hover::after {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.c-header__fixedNav .c-header__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .c-header__fixedNav .c-header__list {
    display: none;
  }
}

.c-header__fixedNav .c-header__item + .c-header__item {
  margin-left: 36px;
}

.c-header__fixedNav .c-header__itemLink {
  position: relative;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 100%;
  letter-spacing: 1px;
  color: #DDDDDD;
  mix-blend-mode: difference;
  display: inline-block;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.c-header__fixedNav .c-header__itemLink::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #DDDDDD;
  mix-blend-mode: difference;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.c-header__fixedNav .c-header__itemLink.-is-page::after {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.c-header__fixedNav .c-header__itemLink:hover {
  opacity: 1;
}

.c-header__fixedNav .c-header__itemLink:hover::after {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}

.c-header__menuButton {
  mix-blend-mode: difference;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 104;
  opacity: 1;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(150, 132, 186, 0.2);
  border-radius: 100%;
  -webkit-transition: .3s;
  transition: .3s;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
  margin: 0;
  text-align: center;
  outline: none;
}

@media screen and (max-width: 767px) {
  .c-header__menuButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.c-header__menuButton::after {
  content: "CLOSE";
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 100%;
  text-align: center;
  letter-spacing: 1px;
  color: #FFFFFF;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 100%;
  font-family: var(--font-family-en) !important;
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  pointer-events: none;
}

.c-header__menuButton svg {
  fill: #FFFFFF;
}

.c-header__menuButton.is-active::after {
  opacity: 1;
}

.c-header__menuButton.is-active > i {
  background: var(--color-black);
}

.c-header__menuButton.is-active > i:nth-child(2) {
  opacity: 0;
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

.c-header__menuButton.is-active > i:nth-child(1) {
  -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
          transform: translate3d(0, 9px, 0) rotate(45deg);
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

.c-header__menuButton.is-active > i:nth-child(3) {
  -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg);
          transform: translate3d(0, -9px, 0) rotate(-45deg);
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

.c-header__menuButton > i {
  display: block;
  width: 50px;
  height: 1px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: white;
}

.c-header__menuButton > i:nth-child(2) {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.c-header__menuButton > i + i {
  margin-top: 8px;
}

.c-header__cta {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 102;
  padding: 38px 40px;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

@media screen and (max-width: 767px) {
  .c-header__cta {
    display: none;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px 14px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
  }
}

.uxdesign-c-headerHideNav {
  position: relative;
  padding: calc((var(--vh, 1vh) * 100) - (140px + 135px)) 0 0;
}

.uxdesign-c-headerHideNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uxdesign-c-headerHideNav a {
  color: var(--color-black);
  text-decoration: none;
}

.uxdesign-c-headerHideNav .c-headerHideNav__group {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-headerHideNav .c-headerHideNav__group {
    width: 100%;
  }
}

.uxdesign-c-headerHideNav .c-headerHideNav__group.-active {
  padding-bottom: 130px;
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
}

.uxdesign-c-headerHideNav .c-headerHideNav__groupItem + .c-headerHideNav__groupItem {
  margin-top: 28px;
}

.uxdesign-c-headerHideNav .c-headerHideNav__title {
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-headerHideNav .c-headerHideNav__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.uxdesign-c-headerHideNav .c-headerHideNav__title::after {
  background-color: var(--color-accent_1);
  content: "";
  height: 1px;
  width: calc(100% + 56px);
  position: absolute;
  left: -28px;
  bottom: -28px;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.uxdesign-c-headerHideNav .c-headerHideNav__title .c-headerHideNav__titleLink {
  position: relative;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 100%;
  letter-spacing: 2px;
  color: #FFFFFF;
  display: inline-block;
  font-family: var(--font-family-en);
}

.uxdesign-c-headerHideNav .c-headerHideNav__title .c-headerHideNav__titleLink .-service--hover {
  position: relative;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  opacity: 1;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 100%;
  letter-spacing: 2px;
  color: #FFFFFF;
  display: inline-block;
  font-family: var(--font-family-en);
}

.uxdesign-c-headerHideNav .c-headerHideNav__title .c-headerHideNav__titleLink::after {
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 100%;
  letter-spacing: 2px;
  color: #FFFFFF;
  display: inline-block;
  font-family: var(--font-family-en);
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  opacity: 0;
  content: "Service";
  background: -webkit-gradient(linear, left top, right top, from(#7349FF), color-stop(46.87%, #9B7DFF), to(#7247FF));
  background: -webkit-linear-gradient(left, #7349FF 0%, #9B7DFF 46.87%, #7247FF 100%);
  background: linear-gradient(90deg, #7349FF 0%, #9B7DFF 46.87%, #7247FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.uxdesign-c-headerHideNav .c-headerHideNav__title.-no--child .c-headerHideNav__toggleButton {
  display: none;
}

.uxdesign-c-headerHideNav .c-headerHideNav__title.-active::after {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

.uxdesign-c-headerHideNav .c-headerHideNav__title.-active .c-headerHideNav__titleLink.-service::after {
  opacity: 1;
}

.uxdesign-c-headerHideNav .c-headerHideNav__title.-active .c-headerHideNav__titleLink .-service--hover {
  opacity: 0;
}

.uxdesign-c-headerHideNav .c-headerHideNav__title.-active .c-headerHideNav__toggleButton::after {
  opacity: 0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.uxdesign-c-headerHideNav .c-headerHideNav__toggleButton {
  display: block;
  height: 14px;
  width: 14px;
  min-width: 14px;
  position: relative;
  margin-left: 10px;
  margin-top: 2px;
}

.uxdesign-c-headerHideNav .c-headerHideNav__toggleButton::before, .uxdesign-c-headerHideNav .c-headerHideNav__toggleButton::after {
  content: "";
  display: block;
  height: 2px;
  width: 14px;
  background-color: var(--color-accent_1);
  position: absolute;
  left: calc(50% - 7px);
  top: calc(50% - 1px);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.uxdesign-c-headerHideNav .c-headerHideNav__toggleButton::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.uxdesign-c-headerHideNav .c-headerHideNav__list {
  margin-top: 28px;
  padding-top: 40px;
  opacity: 0;
  display: none;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.uxdesign-c-headerHideNav .c-headerHideNav__list.-active {
  opacity: 1;
  display: block;
  -webkit-animation: hideNavFadein .7s ease-in 0s forwards;
          animation: hideNavFadein .7s ease-in 0s forwards;
}

.uxdesign-c-headerHideNav .c-headerHideNav__item {
  color: white;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 180%;
  letter-spacing: 0.01em;
}

.uxdesign-c-headerHideNav .c-headerHideNav__item:nth-child(1) {
  margin-bottom: 30px;
}

.uxdesign-c-headerHideNav .c-headerHideNav__item + .c-headerHideNav__item {
  margin-top: 20px;
}

.uxdesign-c-headerHideNav .c-headerHideNav__item a {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.uxdesign-c-headerHideNav .c-headerHideNav__item a::after {
  content: "";
  display: block;
  height: 10px;
  width: 14px;
  background: url(/assets/img/uxdesign/common/footer_linkArrow.svg) no-repeat center/contain;
  margin-left: 8px;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.uxdesign-c-headerHideNav .c-headerHideNav__item a.-arrow--none {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 180%;
}

.uxdesign-c-headerHideNav .c-headerHideNav__item a.-arrow--none::after {
  display: none;
}

.uxdesign-c-headerHideNav .c-headerHideNav__cta {
  display: none;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-headerHideNav .c-headerHideNav__cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% + 56px);
    margin: 0 -28px;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 20px 14px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: fixed;
    z-index: 102;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
}

.uxdesign-c-inner {
  max-width: calc(1200px + 40px);
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-inner {
    max-width: 500px;
  }
}

.uxdesign-c-inner.-display--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-inner.-display--flex {
    display: block;
  }
}

.uxdesign-c-inner.-width--1080px {
  max-width: calc(1080px + 40px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-inner.-width--1080px {
    max-width: 500px;
  }
}

.uxdesign-c-inner.-width--1020px {
  max-width: calc(1020px + 40px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-inner.-width--1020px {
    max-width: 500px;
  }
}

.uxdesign-c-inner.-width--940px {
  max-width: calc(940px + 40px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-inner.-width--940px {
    max-width: 500px;
  }
}

.uxdesign-c-inner.-width--840px {
  max-width: calc(840px + 40px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-inner.-width--840px {
    max-width: 500px;
  }
}

.uxdesign-c-link.-color--white a:hover::before {
  background: var(--color-main_7-txt);
}

.uxdesign-c-link.-color--white a::before {
  background: var(--color-accent_1);
}

.uxdesign-c-link.-color--white .c-link__text {
  color: #FFFFFF;
}

.uxdesign-c-link.-color--white .c-link__arrow svg {
  fill: white;
}

.uxdesign-c-link.-button--small a {
  height: 38px;
}

.uxdesign-c-link.-button--small a::before {
  height: 38px;
  width: 38px;
  top: calc(50% - 19px);
  -webkit-box-shadow: 8px 8px 18px rgba(125, 79, 254, 0.2);
          box-shadow: 8px 8px 18px rgba(125, 79, 254, 0.2);
}

.uxdesign-c-link.-button--small .c-link__text {
  padding-left: 19px;
}

.uxdesign-c-link.-text--ja .c-link__text {
  font-family: var(--font-family-ja);
  letter-spacing: 0.01em;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 130%;
}

.uxdesign-c-link a {
  position: relative;
  text-decoration: none;
  height: 60px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.uxdesign-c-link a:hover::before {
  -webkit-transform: scale(1.13333);
          transform: scale(1.13333);
  background: #CABAFF;
}

.uxdesign-c-link a::before {
  content: "";
  display: block;
  height: 60px;
  width: 60px;
  background: #D7CBFF;
  -webkit-box-shadow: 14px 14px 28px rgba(66, 61, 80, 0.5);
          box-shadow: 14px 14px 28px rgba(66, 61, 80, 0.5);
  border-radius: 100px;
  position: absolute;
  left: 0;
  top: calc(50% - 30px);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.uxdesign-c-link .c-link__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.uxdesign-c-link .c-link__text {
  color: var(--color-main_7-txt);
  position: relative;
  z-index: 2;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 100%;
  letter-spacing: 4px;
  padding-left: 30px;
  font-family: var(--font-family-en);
}

.uxdesign-c-link .c-link__arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 10px;
}

.uxdesign-c-link .c-link__arrow svg {
  fill: var(--color-main_7-txt);
}

a:hover .uxdesign-c-linkArrow {
  background: #CABAFF;
  border-color: #CABAFF;
}

a:hover .uxdesign-c-linkArrow svg {
  fill: var(--color-main_2-btn);
}

a:hover .uxdesign-c-linkArrow.-type--cta_document {
  background: var(--color-accent_1);
  border-color: var(--color-accent_1);
}

a:hover .uxdesign-c-linkArrow.-type--cta_document svg {
  fill: white;
}

.uxdesign-c-linkArrow {
  border: solid 1px rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  height: 24px;
  width: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.uxdesign-c-linkArrow svg {
  position: relative;
  right: 5px;
  -webkit-transition: all .3s;
  transition: all .3s;
  fill: white;
  z-index: 2;
}

.uxdesign-c-loading {
  background: var(--color-base_3);
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
}

body.-loaded .uxdesign-c-loading {
  -webkit-animation: hideop .5s ease 0s forwards;
          animation: hideop .5s ease 0s forwards;
}

@-webkit-keyframes hideop {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes hideop {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.uxdesign-c-logo svg {
  width: 100%;
  overflow: visible;
  height: auto;
}

.uxdesign-c-logo svg:hover * {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.uxdesign-c-logo g, .uxdesign-c-logo path {
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

.uxdesign-c-logo .parts_out-right {
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
}

.uxdesign-c-pageTitle {
  position: relative;
}

.uxdesign-c-pageTitle.-text--center {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-pageTitle.-sp-text--center {
    text-align: center;
  }
}

.uxdesign-c-pageTitle .c-pageTitle__inner {
  padding-left: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-pageTitle .c-pageTitle__inner {
    padding-left: 0px;
  }
}

.uxdesign-c-pageTitle .c-pageTitle__enWrap {
  position: relative;
  display: inline-block;
}

.uxdesign-c-pageTitle .c-pageTitle__enWrap::after {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  background-color: var(--color-accent_1);
  position: absolute;
  left: -20px;
  top: 0;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-pageTitle .c-pageTitle__enWrap::after {
    left: -16px;
    height: 8px;
    width: 8px;
  }
}

.uxdesign-c-pageTitle .c-pageTitle__enTitle {
  font-family: var(--font-family-en);
  font-weight: 700;
  font-size: 4.25rem;
  line-height: 100%;
  letter-spacing: 2px;
  background: -webkit-gradient(linear, left top, right top, color-stop(6.48%, #7349FF), color-stop(47.28%, #9B7DFF), color-stop(93.52%, #7247FF));
  background: -webkit-linear-gradient(left, #7349FF 6.48%, #9B7DFF 47.28%, #7247FF 93.52%);
  background: linear-gradient(90deg, #7349FF 6.48%, #9B7DFF 47.28%, #7247FF 93.52%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  mix-blend-mode: normal;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-pageTitle .c-pageTitle__enTitle {
    font-size: 3rem;
  }
}

.uxdesign-c-pageTitle .c-pageTitle__jaWrap {
  margin-top: 12px;
  display: block;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-pageTitle .c-pageTitle__jaWrap {
    margin-top: 6px;
  }
}

.uxdesign-c-pageTitle .c-pageTitle__jaTitle {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 140%;
  letter-spacing: 1px;
  color: var(--color-main_4-txt_head);
}

.uxdesign-c-pageTitle .c-pageTitle__description {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-pageTitle .c-pageTitle__description {
    margin-top: 30px;
  }
}

.uxdesign-c-scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: white;
}

.uxdesign-c-scroll.-footer .c-scroll__icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  position: relative;
}

.uxdesign-c-scroll.-footer .c-scroll__icon svg {
  fill: white;
}

.uxdesign-c-scroll.-footer .c-scroll__icon::after {
  border: 1px solid #666666;
}

.uxdesign-c-scroll.-footer .c-scroll__text {
  color: white;
  margin-left: 18px;
}

.uxdesign-c-scroll .c-scroll__icon {
  position: relative;
}

.uxdesign-c-scroll .c-scroll__icon svg {
  position: absolute;
  left: calc(50% - 5px);
  bottom: 8px;
  fill: var(--color-main_1-txt);
}

.uxdesign-c-scroll .c-scroll__icon::after {
  border: 1px solid rgba(150, 132, 186, 0.3);
  border-radius: 100%;
  content: "";
  display: block;
  height: 24px;
  width: 24px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-scroll .c-scroll__icon::after {
    height: 22px;
    width: 22px;
  }
}

.uxdesign-c-scroll .c-scroll__text {
  font-family: var(--font-family-en);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 130%;
  letter-spacing: 3px;
  color: var(--color-main_1-txt);
  margin-left: 8px;
}

.uxdesign-c-section {
  padding: 140px 0;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section {
    padding: 70px 0;
  }
}

.uxdesign-c-section.-section--first {
  padding-top: 240px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section.-section--first {
    padding-top: 120px;
  }
}

.uxdesign-c-section.-section--first + .uxdesign-s-cta_document {
  padding-top: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section.-section--first + .uxdesign-s-cta_document {
    padding-top: 30px;
  }
}

.uxdesign-c-section.-bg--none {
  background: transparent;
}

.uxdesign-c-section.-bg--none + .-bg--none {
  padding-top: 0;
}

.uxdesign-c-section.-bg-top--dark {
  background: -webkit-linear-gradient(left, transparent 0%, transparent 180px, var(--color-main_2-btn) 180px, var(--color-main_2-btn) 100%);
  background: linear-gradient(90deg, transparent 0%, transparent 180px, var(--color-main_2-btn) 180px, var(--color-main_2-btn) 100%);
  padding: 120px 0 120px 200px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section.-bg-top--dark {
    padding: 70px 0 220px;
    background: var(--color-main_2-btn);
  }
}

.uxdesign-c-section.-bg--dark {
  background: -webkit-linear-gradient(left, transparent 0%, transparent 120px, var(--color-main_2-btn) 120px, var(--color-main_2-btn) 100%);
  background: linear-gradient(90deg, transparent 0%, transparent 120px, var(--color-main_2-btn) 120px, var(--color-main_2-btn) 100%);
  padding: 120px 0 120px 140px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section.-bg--dark {
    padding: 70px 0 70px;
    background: var(--color-main_2-btn);
  }
}

.uxdesign-c-section.-bg--white {
  background: -webkit-linear-gradient(left, transparent 0%, transparent 120px, white 120px, white 100%);
  background: linear-gradient(90deg, transparent 0%, transparent 120px, white 120px, white 100%);
  padding: 120px 0 120px 140px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section.-bg--white {
    padding: 70px 0 70px;
    background: white;
  }
}

.uxdesign-c-section.-bg--purple {
  overflow: hidden;
  position: relative;
  padding: 120px 0 120px 140px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section.-bg--purple {
    padding: 70px 0 70px;
  }
}

.uxdesign-c-section.-bg--purple::before {
  background: -webkit-linear-gradient(329.95deg, #9474FF 0%, #7349FF 23.96%, #7247FF 76.56%, #9474FF 100%);
  background: linear-gradient(120.05deg, #9474FF 0%, #7349FF 23.96%, #7247FF 76.56%, #9474FF 100%);
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 120px;
  top: 0;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-section.-bg--purple::before {
    left: 0;
    background: -webkit-linear-gradient(279.09deg, #9474FF 0%, #7349FF 23.96%, #7247FF 76.56%, #9474FF 100%);
    background: linear-gradient(170.91deg, #9474FF 0%, #7349FF 23.96%, #7247FF 76.56%, #9474FF 100%);
  }
}

.uxdesign-c-sectionHeader {
  position: relative;
}

.uxdesign-c-sectionHeader.-text--center {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeader.-text--center .c-sectionHeader__description {
    text-align: left;
  }
}

.uxdesign-c-sectionHeader.-bg--dark .c-sectionHeader__enTitle {
  color: white;
}

.uxdesign-c-sectionHeader.-bg--dark .c-sectionHeader__jaTitle {
  color: var(--color-main_5-txt_head);
}

.uxdesign-c-sectionHeader.-bg--dark .c-sectionHeader__description {
  color: white;
  font-weight: 400;
}

.uxdesign-c-sectionHeader .c-sectionHeader__inner {
  padding-left: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeader .c-sectionHeader__inner {
    padding-left: 0px;
  }
}

.uxdesign-c-sectionHeader .c-sectionHeader__enWrap {
  position: relative;
  display: inline-block;
}

.uxdesign-c-sectionHeader .c-sectionHeader__enWrap::after {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  background-color: var(--color-accent_1);
  position: absolute;
  left: -20px;
  top: 0;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeader .c-sectionHeader__enWrap::after {
    left: -16px;
    height: 8px;
    width: 8px;
  }
}

.uxdesign-c-sectionHeader .c-sectionHeader__enTitle {
  font-weight: 600;
  font-size: 3rem;
  line-height: 140%;
  letter-spacing: 2px;
  color: var(--color-main_1-txt);
  font-family: var(--font-family-en);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeader .c-sectionHeader__enTitle {
    font-size: 2.5rem;
    line-height: 140%;
  }
}

.uxdesign-c-sectionHeader .c-sectionHeader__jaTitle {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 140%;
  letter-spacing: 1px;
  color: var(--color-main_4-txt_head);
}

.uxdesign-c-sectionHeader .c-sectionHeader__description {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeader .c-sectionHeader__description {
    margin-top: 30px;
  }
}

.uxdesign-c-sectionHeaderOnlyJa.-center .c-sectionHeaderOnlyJa__jaWrap {
  text-align: center;
}

.uxdesign-c-sectionHeaderOnlyJa.-center .c-sectionHeaderOnlyJa__description {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeaderOnlyJa.-center .c-sectionHeaderOnlyJa__description {
    text-align: left;
  }
}

.uxdesign-c-sectionHeaderOnlyJa.-onlyTitle--center .c-sectionHeaderOnlyJa__jaWrap {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeaderOnlyJa.-onlyTitle-sp--center .c-sectionHeaderOnlyJa__jaWrap {
    text-align: center;
  }
}

.uxdesign-c-sectionHeaderOnlyJa.-color--white .c-sectionHeaderOnlyJa__jaTitle {
  color: white;
}

.uxdesign-c-sectionHeaderOnlyJa.-color--white .c-sectionHeaderOnlyJa__description {
  color: white;
}

.uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__jaWrap {
  display: block;
}

.uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__jaTitle {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 180%;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__jaTitle {
    font-size: 1.5rem;
    line-height: 150%;
  }
}

.uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__description {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 14px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__description {
    margin-top: 14px;
  }
}

.uxdesign-c-serviceList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-serviceList {
    display: block;
  }
}

.uxdesign-c-serviceList .c-serviceList__item {
  width: calc(50% - 20px);
}

@media screen and (max-width: 767px) {
  .uxdesign-c-serviceList .c-serviceList__item {
    width: 100%;
  }
  .uxdesign-c-serviceList .c-serviceList__item + .c-serviceList__item {
    margin-top: 24px !important;
  }
}

.uxdesign-c-serviceList .c-serviceList__item:nth-child(n+3) {
  margin-top: 40px;
}

.uxdesign-c-serviceList .c-serviceList__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--color-main_2-btn);
  border-radius: 0px 0px 20px 0px;
  padding: 18px 40px 18px 22px;
  -webkit-transition: all .3s;
  transition: all .3s;
  text-decoration: none;
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-serviceList .c-serviceList__link {
    padding: 0px 40px 0px 18px;
    height: 70px;
  }
}

.uxdesign-c-serviceList .c-serviceList__link.-link--none {
  pointer-events: none;
}

.uxdesign-c-serviceList .c-serviceList__link.-link--none .c-serviceList__arrow {
  display: none;
}

.uxdesign-c-serviceList .c-serviceList__link:hover {
  background-color: white;
  -webkit-box-shadow: 12px 12px 28px rgba(125, 79, 254, 0.3);
          box-shadow: 12px 12px 28px rgba(125, 79, 254, 0.3);
}

.uxdesign-c-serviceList .c-serviceList__link:hover .c-serviceList__title {
  color: var(--color-main_2-btn);
}

.uxdesign-c-serviceList .c-serviceList__image {
  position: relative;
  width: 34px;
  min-width: 34px;
  margin-right: 10px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-serviceList .c-serviceList__image {
    margin-right: 15px;
  }
}

.uxdesign-c-serviceList .c-serviceList__image::after {
  content: "";
  display: block;
  padding-top: 100%;
}

.uxdesign-c-serviceList .c-serviceList__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.uxdesign-c-serviceList .c-serviceList__title {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  -webkit-transition: all .3s;
  transition: all .3s;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-serviceList .c-serviceList__title {
    font-size: 1.0625rem;
    line-height: 130%;
  }
}

.uxdesign-c-serviceList .c-serviceList__arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.uxdesign-c-serviceList .c-serviceList__text {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 15px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-serviceList .c-serviceList__text {
    font-size: 0.875rem;
    margin-top: 10px;
  }
}

.uxdesign-c-table {
  overflow: hidden;
  /* ==================================================
レイアウト・テキスト周りの調整
==================================================  */
  /* ==================================================
テーブルの強調ライン部分
==================================================  */
  /* ==================================================
コメントアウト
==================================================  */
}

.uxdesign-c-table .c-table__swipe {
  display: none;
  padding-right: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-table .c-table__swipe {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.uxdesign-c-table .c-table__swipe .c-table__swipeText {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 100%;
  letter-spacing: 2px;
  color: var(--color-accent_1);
  font-family: var(--font-family-en);
  margin-right: 6px;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-table .c-table__inner {
    overflow-x: scroll;
    margin-top: 10px;
    padding-right: 20px;
    margin-right: 20px;
  }
}

.uxdesign-c-table table {
  border-right: 1px solid rgba(178, 174, 197, 0.3);
  border-bottom: 1px solid rgba(178, 174, 197, 0.3);
  width: 100%;
}

.uxdesign-c-table td, .uxdesign-c-table th {
  min-width: 286px;
  width: 286px;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-table td, .uxdesign-c-table th {
    vertical-align: middle;
  }
}

.uxdesign-c-table td {
  padding: 24px;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 140%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  border-left: 1px solid rgba(178, 174, 197, 0.3);
  border-top: 1px solid rgba(178, 174, 197, 0.3);
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-table td {
    padding: 20px;
  }
}

.uxdesign-c-table td .term {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 160%;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
}

.uxdesign-c-table td .term.-color--purple {
  color: var(--color-accent_1);
  font-weight: 700;
}

.uxdesign-c-table td ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.uxdesign-c-table td ul li::before {
  content: "";
  width: 6px;
  min-width: 6px;
  height: 6px;
  background: var(--color-accent_1);
  margin-top: 7px;
  margin-right: 8px;
}

.uxdesign-c-table td .rate {
  text-align: center;
}

.uxdesign-c-table td .rate::before {
  content: "";
  display: block;
  height: 26px;
  margin-bottom: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.uxdesign-c-table td .rate.-excellent::before {
  background-image: url(/assets/img/uxdesign/service/feature/icon_excellent.svg);
}

.uxdesign-c-table td .rate.-great::before {
  background-image: url(/assets/img/uxdesign/service/feature/icon_great.svg);
}

.uxdesign-c-table td .rate.-good::before {
  background-image: url(/assets/img/uxdesign/service/feature/icon_good.svg);
}

.uxdesign-c-table td .rate.-fair::before {
  background-image: url(/assets/img/uxdesign/service/feature/icon_fair.svg);
}

.uxdesign-c-table th {
  font-weight: 700;
  font-size: 1rem;
  line-height: 140%;
  text-align: center;
  vertical-align: center;
  letter-spacing: 0.02em;
}

.uxdesign-c-table thead th {
  padding: 18px;
  color: white;
}

.uxdesign-c-table thead th:first-child {
  min-width: auto;
}

.uxdesign-c-table thead th:nth-child(2) {
  background: var(--color-accent_1);
}

.uxdesign-c-table thead th:nth-child(n+3) {
  border-left: solid 1px white;
  background: var(--color-main_5-txt_head);
}

.uxdesign-c-table tbody th {
  vertical-align: middle;
  min-width: auto;
  background-color: #EFEFEF;
  padding: 18px;
  border-top: solid 1px white;
}

@media screen and (max-width: 767px) {
  .uxdesign-c-table tbody th {
    padding: 18px 0;
    width: 50px;
    min-width: 50px;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 100%;
    text-align: center;
    letter-spacing: 0.02em;
  }
  .uxdesign-c-table tbody th span {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    white-space: pre;
    display: inline-block;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 100%;
    text-align: center;
    letter-spacing: 0.02em;
  }
}

.uxdesign-c-table th[colspan="2"] {
  min-width: calc(286px * 2);
}

.uxdesign-c-table td[colspan="2"] {
  min-width: calc(286px * 2);
}

.uxdesign-c-table table thead th:nth-child(2) {
  border-left: solid 5px var(--color-accent_1);
}

.uxdesign-c-table table tbody td {
  outline-offset: -10px;
}

.uxdesign-c-table table tbody td:nth-child(2) {
  position: relative;
  border-left: solid 5px var(--color-accent_1);
}

.uxdesign-c-table table tbody td:nth-child(2)::after {
  content: "";
  display: block;
  height: calc(100% + 1px);
  width: 5px;
  position: absolute;
  top: -1px;
  right: 0;
  background: var(--color-accent_1);
}

.uxdesign-c-table table tbody tr:last-child td:nth-child(2)::before {
  content: "";
  display: block;
  width: calc(100%);
  height: 5px;
  position: absolute;
  bottom: -1px;
  left: 0;
  background: var(--color-accent_1);
}

.uxdesign-about-s-header .s-header__line {
  background: var(--color-main_5-txt_head);
  opacity: 0.3;
  width: 1px;
  height: 40px;
  display: block;
  margin: 28px auto 0;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-header .s-header__line {
    margin-top: 18px;
    height: 30px;
  }
}

.uxdesign-about-s-header .s-header__descriptionTitle {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 160%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-header .s-header__descriptionTitle {
    font-size: 1.25rem;
    text-align: left;
    margin-top: 16px;
  }
}

.uxdesign-about-s-header .s-header__descriptionText {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.01em;
  margin-top: 28px;
  color: var(--color-main_1-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-header .s-header__descriptionText {
    text-align: left;
    margin-top: 18px;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point {
    overflow: hidden;
  }
}

.uxdesign-about-s-point .s-point__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap {
    display: block;
  }
}

.uxdesign-about-s-point .s-point__wrap + .s-point__wrap {
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap + .s-point__wrap {
    margin-top: 54px;
  }
}

.uxdesign-about-s-point .s-point__wrap:nth-child(odd) .s-point__wrapImage {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.uxdesign-about-s-point .s-point__wrap:nth-child(odd) .s-point__wrapText {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.uxdesign-about-s-point .s-point__wrap:nth-child(1) .s-point__wrapImage {
  width: calc(350px + 40px);
  min-width: calc(350px + 40px);
  padding-right: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(1) .s-point__wrapImage {
    width: auto;
    min-width: auto;
    padding: 0px 20px 0;
  }
}

.uxdesign-about-s-point .s-point__wrap:nth-child(1) .s-point__wrapImage .s-point__bgBack {
  right: -60px;
  top: -60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(1) .s-point__wrapImage .s-point__bgBack {
    height: 180px;
    width: 180px;
    right: -28px;
    top: -48px;
  }
}

.uxdesign-about-s-point .s-point__wrap:nth-child(2) {
  margin-top: 120px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(2) {
    margin-top: 80px;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(2) .s-point__wrapImage {
    padding: 0px 20px 0;
  }
}

.uxdesign-about-s-point .s-point__wrap:nth-child(2) .s-point__wrapImage .s-point__bgBack {
  top: -110px;
  right: -106px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(2) .s-point__wrapImage .s-point__bgBack {
    width: 243px;
    height: 229px;
    top: -88px;
    right: -73px;
  }
}

.uxdesign-about-s-point .s-point__wrap:nth-child(3) {
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(3) {
    margin-top: 80px;
  }
}

.uxdesign-about-s-point .s-point__wrap:nth-child(3) .s-point__wrapImage {
  width: calc(350px + 40px);
  min-width: calc(350px + 40px);
  padding-right: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(3) .s-point__wrapImage {
    padding: 0px 20px 0;
  }
}

.uxdesign-about-s-point .s-point__wrap:nth-child(3) .s-point__wrapImage .s-point__bgBack {
  top: -20px;
  right: 0px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrap:nth-child(3) .s-point__wrapImage .s-point__bgBack {
    height: 148px;
    width: 148px;
    right: -6px;
    top: -26px;
  }
}

.uxdesign-about-s-point .s-point__wrapImage {
  width: 350px;
  min-width: 350px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrapImage {
    min-width: auto !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__wrapText {
    margin-top: 40px;
    width: 100%;
    padding: 0 10px;
  }
}

.uxdesign-about-s-point .s-point__image {
  position: relative;
  width: 100%;
  z-index: 3;
}

.uxdesign-about-s-point .s-point__image::after {
  padding-top: 140%;
  content: "";
  display: block;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__image::after {
    padding-top: 71.2%;
  }
}

.uxdesign-about-s-point .s-point__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.uxdesign-about-s-point .s-point__bgFront {
  position: absolute;
  left: -50px;
  bottom: 50px;
  z-index: 4;
  height: 98px;
  width: 98px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__bgFront {
    left: 0px;
    bottom: 24px;
    height: 62px;
    width: 62px;
  }
}

.uxdesign-about-s-point .s-point__bgBack {
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 2;
}

.uxdesign-about-s-point .s-point__label {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 1.5px;
  color: var(--color-main_5-txt_head);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.uxdesign-about-s-point .s-point__label::after {
  content: "";
  display: block;
  height: 1px;
  width: 50px;
  background-color: rgba(150, 132, 186, 0.4);
  margin-left: 14px;
}

.uxdesign-about-s-point .s-point__title {
  margin-top: 18px;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 160%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__title {
    margin-top: 12px;
    font-size: 1.25rem;
  }
}

.uxdesign-about-s-point .s-point__text {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 180%;
  margin-top: 20px;
  letter-spacing: 0.01em;
  color: var(--color-main_6-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__text {
    margin-top: 14px;
  }
}

.uxdesign-about-s-point .s-point__linkList {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__linkList {
    display: block;
    margin-top: 30px;
  }
}

.uxdesign-about-s-point .s-point__linkItem {
  margin-right: 40px;
  margin-bottom: 18px;
}

@media screen and (max-width: 767px) {
  .uxdesign-about-s-point .s-point__linkItem {
    margin: 0;
  }
  .uxdesign-about-s-point .s-point__linkItem + .s-point__linkItem {
    margin-top: 12px;
  }
}

.uxdesign-top-s-service + .uxdesign-s-client {
  padding-top: 100px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-service + .uxdesign-s-client {
    padding-top: 80px;
  }
}

.uxdesign-s-client .s-client__contents {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-client .s-client__contents {
    margin-top: 50px;
  }
}

.uxdesign-s-complete .s-complete__title {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 160%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
  margin-top: 88px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-complete .s-complete__title {
    font-size: 1.25rem;
    text-align: left;
    margin-top: 64px;
  }
}

.uxdesign-s-complete .s-complete__description {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 28px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-complete .s-complete__description {
    text-align: left;
    margin-top: 18px;
  }
}

.uxdesign-s-complete .s-complete__button {
  margin-top: 80px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-complete .s-complete__button {
    margin-top: 60px;
  }
}

.uxdesign-s-contact .s-contact__description {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-contact .s-contact__description {
    text-align: left;
    margin-top: 50px;
  }
}

.uxdesign-s-contact .s-contact__form {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-contact .s-contact__form {
    margin-top: 50px;
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__links {
    display: block;
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 300px;
  width: calc(50% - 1px);
  position: relative;
  text-decoration: none;
  color: white;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__link {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%;
    height: 212px;
    padding: 0 30px;
  }
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__link.s-cta_aboutContents__link {
    margin-top: 1px;
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__link:hover .s-cta_aboutContents__linkBg {
  opacity: 0.95;
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__link.-link--usecase {
  background: url(/assets/img/uxdesign/cta/aboutContents/bg_usecase-pc.webp) no-repeat center/cover;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__link.-link--usecase {
    background-image: url(/assets/img/uxdesign/cta/aboutContents/bg_usecase-sp.webp);
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__link.-link--service {
  background: url(/assets/img/uxdesign/cta/aboutContents/bg_service-pc.webp) no-repeat center/cover;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__link.-link--service {
    background-image: url(/assets/img/uxdesign/cta/aboutContents/bg_service-sp.webp);
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__link.-link--none .s-cta_aboutContents__arrow {
  display: none;
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__linkInner {
  position: relative;
  z-index: 2;
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__linkBg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: var(--color-main_1-txt);
  opacity: 0.8;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__titleEn {
  font-weight: 700;
  font-size: 2.125rem;
  line-height: 100%;
  letter-spacing: 2px;
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__titleEn {
    font-size: 1.75rem;
  }
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__titleEn small {
    font-size: 1rem;
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__titleJa {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 1px;
  margin-top: 8px;
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__titleJa {
    margin-top: 4px;
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__text {
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 180%;
  margin-top: 28px;
  letter-spacing: 0.01em;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__text {
    line-height: 160%;
    margin-top: 14px;
  }
}

.uxdesign-s-cta_aboutContents .s-cta_aboutContents__arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutContents .s-cta_aboutContents__arrow {
    right: 14px;
    bottom: 14px;
  }
}

.uxdesign-s-cta_aboutService .s-cta_aboutService__wrap {
  background: #FFFFFF;
  -webkit-box-shadow: 18px 18px 48px rgba(125, 79, 254, 0.3);
          box-shadow: 18px 18px 48px rgba(125, 79, 254, 0.3);
  border-radius: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 40px 40px 40px 100px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutService .s-cta_aboutService__wrap {
    display: block;
    padding: 30px 28px 38px;
    -webkit-box-shadow: 14px 14px 38px rgba(125, 79, 254, 0.3);
            box-shadow: 14px 14px 38px rgba(125, 79, 254, 0.3);
  }
}

.uxdesign-s-cta_aboutService .s-cta_aboutService__title {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutService .s-cta_aboutService__title {
    font-size: 1rem;
    line-height: 150%;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_aboutService .s-cta_aboutService__links {
    margin-top: 20px;
  }
}

.uxdesign-s-cta_contact {
  padding-bottom: 40px;
}

.uxdesign-s-cta_contact.-page--top {
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact.-page--top {
    padding-bottom: 70px;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact .s-cta_contact__layout {
    display: block;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__layout .s-cta_contact__layoutCenter {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  width: 31.2%;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact .s-cta_contact__layout .s-cta_contact__layoutCenter {
    width: 100%;
    max-width: 230px;
    margin: 0 auto;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__layout .s-cta_contact__layoutLeft {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact .s-cta_contact__layout .s-cta_contact__layoutLeft {
    margin-top: 24px;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__layout .s-cta_contact__layoutRight {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact .s-cta_contact__layout .s-cta_contact__layoutRight {
    margin-top: 18px;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__title {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  background: -webkit-linear-gradient(0.04deg, #5A4992 0.03%, #24222C 101.45%);
  background: linear-gradient(89.96deg, #5A4992 0.03%, #24222C 101.45%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact .s-cta_contact__title {
    font-size: 1.375rem;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.02em;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__text {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact .s-cta_contact__text {
    line-height: 160%;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__link {
  background: var(--color-accent_1);
  -webkit-box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.3);
          box-shadow: 14px 14px 28px rgba(125, 79, 254, 0.3);
  border-radius: 100px;
  height: 64px;
  width: 100%;
  max-width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  margin-top: 18px;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_contact .s-cta_contact__link {
    margin: 30px auto 0;
  }
}

.uxdesign-s-cta_contact .s-cta_contact__link:hover {
  background-color: white;
}

.uxdesign-s-cta_contact .s-cta_contact__link:hover .s-cta_contact__icon svg {
  fill: var(--color-main_1-txt);
}

.uxdesign-s-cta_contact .s-cta_contact__link:hover .s-cta_contact__linkText {
  color: var(--color-main_1-txt);
}

.uxdesign-s-cta_contact .s-cta_contact__icon {
  -webkit-transition: fill .3s;
  transition: fill .3s;
}

.uxdesign-s-cta_contact .s-cta_contact__icon svg {
  fill: white;
  -webkit-transition: fill .3s;
  transition: fill .3s;
}

.uxdesign-s-cta_contact .s-cta_contact__linkText {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 30px;
  letter-spacing: 1px;
  color: #FFFFFF;
  margin-left: 10px;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.uxdesign-s-cta_document {
  padding-bottom: 90px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document {
    padding-bottom: 60px;
  }
}

.uxdesign-s-cta_document .s-cta_document__downloadList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__downloadList {
    display: block;
  }
}

.uxdesign-s-cta_document .s-cta_document__downloadLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  text-decoration: none;
  height: 220px;
  background-color: var(--color-main_1-txt);
  position: relative;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__downloadLink {
    height: 140px;
    width: 100%;
  }
}

.uxdesign-s-cta_document .s-cta_document__downloadLink:hover {
  background-color: white;
}

.uxdesign-s-cta_document .s-cta_document__downloadLink:hover:nth-child(2) {
  background-color: white;
}

.uxdesign-s-cta_document .s-cta_document__downloadLink:hover .s-cta_document__downloadItemImage img.-hover--before {
  opacity: 0;
}

.uxdesign-s-cta_document .s-cta_document__downloadLink:hover .s-cta_document__downloadItemImage img.-hover--after {
  opacity: 1;
}

.uxdesign-s-cta_document .s-cta_document__downloadLink:hover .cta_document__downloadText {
  color: var(--color-main_4-txt_head);
}

.uxdesign-s-cta_document .s-cta_document__downloadLink:nth-child(2) {
  background-color: var(--color-main_2-btn);
}

.uxdesign-s-cta_document .s-cta_document__downloadItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  text-align: center;
  width: 100%;
}

.uxdesign-s-cta_document .s-cta_document__downloadItemWrap {
  display: inline-block;
}

.uxdesign-s-cta_document .s-cta_document__downloadItemImage {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0;
}

.uxdesign-s-cta_document .s-cta_document__downloadItemImage.-gig {
  height: 20.49px;
  width: 166.6px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__downloadItemImage.-gig {
    height: 17.49px;
    width: 142.21px;
  }
}

.uxdesign-s-cta_document .s-cta_document__downloadItemImage.-uxdesign {
  height: 35.88px;
  width: 161.49px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__downloadItemImage.-uxdesign {
    height: 31.88px;
    width: 143.48px;
  }
}

.uxdesign-s-cta_document .s-cta_document__downloadItemImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.uxdesign-s-cta_document .s-cta_document__downloadItemImage img.-hover--after {
  opacity: 0;
}

.uxdesign-s-cta_document .s-cta_document__downloadText {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--color-main_6-txt);
  -webkit-transition: color .3s;
  transition: color .3s;
  margin-top: 6px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__downloadText {
    margin-top: 5px;
    font-size: 0.75rem;
  }
}

.uxdesign-s-cta_document .s-cta_document__downloadArrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__downloadArrow {
    right: 14px;
    bottom: 14px;
  }
}

.uxdesign-s-cta_document .s-cta_document__magagine {
  background-color: var(--color-main_4-txt_head);
  padding: 16px 16px 16px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__magagine {
    padding: 16px 16px 16px 24px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.uxdesign-s-cta_document .s-cta_document__magagineTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__magagineTitle {
    display: block;
  }
}

.uxdesign-s-cta_document .s-cta_document__magagineTitle .en {
  font-family: var(--font-family-en);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 140%;
  letter-spacing: 1px;
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__magagineTitle .en {
    font-size: 1.25rem;
    display: block;
    white-space: nowrap;
  }
}

.uxdesign-s-cta_document .s-cta_document__magagineTitle .ja {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 1px;
  color: var(--color-main_6-txt);
  margin-left: 14px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__magagineTitle .ja {
    font-size: 0.75rem;
    display: block;
    white-space: nowrap;
    margin: 0;
  }
}

.uxdesign-s-cta_document .s-cta_document__magagineText {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin-left: 50px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__magagineText {
    display: none;
  }
}

.uxdesign-s-cta_document .s-cta_document__magagineLink {
  background: #FFFFFF;
  -webkit-box-shadow: 16.5688px 16.5688px 33.1376px rgba(125, 79, 254, 0.2);
          box-shadow: 16.5688px 16.5688px 33.1376px rgba(125, 79, 254, 0.2);
  border-radius: 100px;
  height: 38px;
  width: 236px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  text-decoration: none;
  margin-left: auto;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-cta_document .s-cta_document__magagineLink {
    width: 122px;
  }
}

.uxdesign-s-cta_document .s-cta_document__magagineLink:hover {
  background-color: var(--color-main_2-btn);
}

.uxdesign-s-cta_document .s-cta_document__magagineLink:hover .s-cta_document__magagineLinkText {
  color: white;
}

.uxdesign-s-cta_document .s-cta_document__magagineLink:hover .s-cta_document__magagineLinkArrow svg {
  fill: white;
}

.uxdesign-s-cta_document .s-cta_document__magagineLinkText {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 140%;
  letter-spacing: 1px;
  color: var(--color-main_1-txt);
  -webkit-transition: color .3s;
  transition: color .3s;
}

.uxdesign-s-cta_document .s-cta_document__magagineLinkArrow {
  position: absolute;
  right: 14px;
  top: calc(50% - 5px);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.uxdesign-s-cta_document .s-cta_document__magagineLinkArrow svg {
  -webkit-transition: fill .3s;
  transition: fill .3s;
  fill: var(--color-main_1-txt);
}

.uxdesign-s-download .s-download__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 100px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-download .s-download__layout {
    display: block;
    margin-top: 70px;
  }
}

.uxdesign-s-download .s-download__layout::after {
  background: url(/assets/img/uxdesign/document/bg.svg) no-repeat center/contain;
  content: "";
  display: block;
  height: 612px;
  width: 622px;
  position: absolute;
  left: -150px;
  top: -70px;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-download .s-download__layout::after {
    height: 363px;
    width: calc(100% + 40px);
    left: -20px;
    right: -20px;
    top: 200px;
  }
}

.uxdesign-s-download .s-download__layoutLeft {
  width: 340px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-download .s-download__layoutLeft {
    width: 100%;
  }
}

.uxdesign-s-download .s-download__layoutRight {
  width: calc(100% - 340px);
  padding-left: 80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-download .s-download__layoutRight {
    padding-left: 0;
    margin-top: 70px;
    width: 100%;
  }
}

.uxdesign-s-download .s-download__image {
  -webkit-filter: drop-shadow(14px 14px 28px rgba(125, 79, 254, 0.2));
          filter: drop-shadow(14px 14px 28px rgba(125, 79, 254, 0.2));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  position: relative;
}

.uxdesign-s-download .s-download__image::after {
  content: "";
  display: block;
  padding-top: 66.5%;
}

.uxdesign-s-download .s-download__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.uxdesign-s-download .s-download__title {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-download .s-download__title {
    margin-top: 50px;
  }
}

.uxdesign-s-download .s-download__title .en {
  display: block;
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
  font-family: var(--font-family-en);
}

.uxdesign-s-download .s-download__title .ja {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
}

.uxdesign-s-download .s-download__description {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 180%;
  text-align: justify;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 18px;
}

.uxdesign-s-download .uxdesign-c-form .leadgrid-form__label {
  padding-right: 20px;
}

.uxdesign-s-download .uxdesign-c-form .leadgrid-form__label::before {
  margin-left: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-download .uxdesign-c-form .leadgrid-form__label::before {
    margin-left: 12px;
  }
}

.uxdesign-s-download .uxdesign-c-form .leadgrid-form__row + .leadgrid-form__row {
  margin-top: calc(30px - 12px);
}

@media screen and (max-width: 767px) {
  .uxdesign-s-download .uxdesign-c-form .leadgrid-form__row + .leadgrid-form__row {
    margin-top: calc(28px - 12px);
  }
}

.-bg--dark + .uxdesign-s-flow .uxdesign-c-inner, .-bg--white + .uxdesign-s-flow .uxdesign-c-inner, .-bg--purple + .uxdesign-s-flow .uxdesign-c-inner {
  max-width: calc(1080px + 40px);
}

@media screen and (max-width: 767px) {
  .-bg--dark + .uxdesign-s-flow .uxdesign-c-inner, .-bg--white + .uxdesign-s-flow .uxdesign-c-inner, .-bg--purple + .uxdesign-s-flow .uxdesign-c-inner {
    max-width: 500px;
  }
}

.uxdesign-s-flow .s-flow__list {
  margin-top: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  counter-reset: flowList 0;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__list {
    margin-top: 50px;
    display: block;
  }
}

.uxdesign-s-flow .s-flow__list.-length--5 .s-flow__item {
  width: calc(20% - 180px / 5);
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__list.-length--5 .s-flow__item {
    width: 100%;
  }
}

.uxdesign-s-flow .s-flow__item {
  width: calc(25% - 180px / 4);
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__item + .s-flow__item {
    margin-top: 20px;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__item:last-child .s-flow__itemLeft {
    padding-bottom: 0;
  }
}

.uxdesign-s-flow .s-flow__item:last-child .s-flow__itemLeft::after {
  display: none;
}

.uxdesign-s-flow .s-flow__itemLeft {
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemLeft {
    padding-bottom: 20px;
  }
}

.uxdesign-s-flow .s-flow__itemLeft::after {
  content: "";
  display: block;
  background: url(/assets/img/uxdesign/common/icon_sectionFlow.svg) no-repeat center/contain;
  height: 10px;
  width: 14px;
  position: absolute;
  left: calc(100% + (30px - 14px / 2));
  bottom: calc(50% - 5px);
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemLeft::after {
    left: calc(50% - 7px);
    bottom: 0;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

.uxdesign-s-flow .s-flow__itemRight {
  margin-top: 18px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemRight {
    margin-top: 0;
    margin-left: 14px;
  }
}

.uxdesign-s-flow .s-flow__itemLavelBg {
  border: solid 8px #E9E6FF;
  border-radius: 100%;
  background: var(--color-accent_1);
  height: 116px;
  width: 116px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemLavelBg {
    height: 82px;
    width: 82px;
    min-width: 82px;
  }
}

.uxdesign-s-flow .s-flow__itemLavelStep {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 100%;
  letter-spacing: 1px;
  color: #FFFFFF;
  font-family: var(--font-family-en);
  display: block;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemLavelStep {
    font-size: 0.625rem;
  }
}

.uxdesign-s-flow .s-flow__itemLavelNum {
  display: block;
  text-align: center;
  margin-top: 4px;
}

.uxdesign-s-flow .s-flow__itemLavelNum::after {
  counter-increment: flowList 1;
  content: "0" counter(flowList);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 100%;
  letter-spacing: 2px;
  color: #FFFFFF;
  font-family: var(--font-family-en);
  display: block;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemLavelNum::after {
    font-size: 1.125rem;
  }
}

.uxdesign-s-flow .s-flow__itemTitle {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 140%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemTitle {
    text-align: left;
  }
}

.uxdesign-s-flow .s-flow__itemText {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 160%;
  text-align: justify;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 14px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-flow .s-flow__itemText {
    margin-top: 6px;
  }
}

.uxdesign-s-service .uxdesign-c-sectionHeader + .s-service__contents {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-service .uxdesign-c-sectionHeader + .s-service__contents {
    margin-top: 50px;
  }
}

.uxdesign-s-service .s-service__button {
  margin-top: 80px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-s-service .s-service__button {
    margin-top: 50px;
  }
}

.uxdesign-service-s-ability .s-ability__list {
  counter-reset: serviceAbility 0;
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-ability .s-ability__list {
    margin-top: 40px;
  }
}

.uxdesign-service-s-ability .s-ability__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 30px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-ability .s-ability__item {
    display: block;
    padding: 0;
  }
}

.uxdesign-service-s-ability .s-ability__item + .s-ability__item {
  border-top: 1px solid var(--color-main_7-txt);
  margin-top: 40px;
  padding-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-ability .s-ability__item + .s-ability__item {
    padding-top: 40px;
  }
}

.uxdesign-service-s-ability .s-ability__itemLeft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100% - 600px);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-ability .s-ability__itemLeft {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
}

.uxdesign-service-s-ability .s-ability__itemLeft::before {
  counter-increment: serviceAbility 1;
  content: "0" counter(serviceAbility);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 100%;
  letter-spacing: 1.5px;
  color: var(--color-accent_1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100%;
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: #FFFFFF;
  -webkit-box-shadow: 14px 14px 28px rgba(78, 37, 192, 0.3);
          box-shadow: 14px 14px 28px rgba(78, 37, 192, 0.3);
}

.uxdesign-service-s-ability .s-ability__itemRight {
  width: 600px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-ability .s-ability__itemRight {
    width: 100%;
    margin-top: 14px;
  }
}

.uxdesign-service-s-ability .s-ability__title {
  margin-left: 20px;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 160%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-ability .s-ability__title {
    margin-left: 14px;
    line-height: 150%;
  }
}

.uxdesign-service-s-ability .s-ability__text {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

.uxdesign-service-s-about {
  background-color: white;
  padding: 0;
  position: relative;
}

.uxdesign-service-s-about .uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__description {
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-about .uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__description {
    margin-top: 14px;
  }
}

.uxdesign-service-s-about .s-about__image {
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-about .s-about__image {
    position: relative;
    width: 100%;
  }
  .uxdesign-service-s-about .s-about__image::before {
    content: "";
    display: block;
    padding-top: 61.3%;
  }
}

.uxdesign-service-s-about .s-about__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.uxdesign-service-s-about .s-about__wrap {
  width: 50%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  padding: 80px 80px 80px 0px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-about .s-about__wrap {
    width: 100%;
    padding: 50px 0px;
  }
}

.uxdesign-service-s-about .s-about__link {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-about .s-about__link {
    margin-top: 30px;
    text-align: center;
  }
}

.uxdesign-service-detail-s-header {
  position: relative;
}

.uxdesign-service-detail-s-header .s-header__pageTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-detail-s-header .s-header__pageTitle {
    padding-left: 0px;
    display: block;
    text-align: center;
  }
}

.uxdesign-service-detail-s-header .s-header__icon {
  height: 60px;
  width: 60px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-detail-s-header .s-header__icon {
    height: 40px;
    width: 40px;
    margin: 0 auto;
  }
}

.uxdesign-service-detail-s-header .s-header__icon img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.uxdesign-service-detail-s-header .s-header__title {
  font-weight: 700;
  font-size: 2.125rem;
  line-height: 180%;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
  margin-left: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-detail-s-header .s-header__title {
    font-size: 1.5rem;
    line-height: 130%;
    text-align: center;
    margin: 12px 0 0;
  }
}

.uxdesign-service-detail-s-header .s-header__bg {
  font-weight: 600;
  font-size: 11.25rem;
  line-height: 100%;
  letter-spacing: 2px;
  color: #FFFFFF;
  font-family: var(--font-family-en);
  position: absolute;
  right: 0;
  bottom: -30px;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-detail-s-header .s-header__bg {
    font-size: 4.625rem;
    letter-spacing: 1px;
    bottom: -10px;
  }
}

.uxdesign-service-s-example {
  padding-top: 240px !important;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example {
    padding-top: 150px !important;
  }
}

.uxdesign-service-s-example .s-example__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  margin-top: 60px;
  counter-reset: example 0;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__list {
    margin-top: 40px;
  }
}

.uxdesign-service-s-example .s-example__item {
  width: calc(50% - 30px);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__item {
    width: 100%;
  }
  .uxdesign-service-s-example .s-example__item + .s-example__item {
    margin-top: 40px !important;
  }
}

.uxdesign-service-s-example .s-example__item:nth-child(n+3) {
  margin-top: 60px;
}

.uxdesign-service-s-example .s-example__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__wrap {
    display: block;
  }
}

.uxdesign-service-s-example .s-example__label {
  background: var(--color-accent_1);
  border-radius: 0px 0px 18px 0px;
  height: 66px;
  width: 66px;
  min-width: 66px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__label {
    width: 88px;
    height: 36px;
    min-width: 88px;
  }
}

.uxdesign-service-s-example .s-example__labelText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 100%;
  text-align: center;
  letter-spacing: 1px;
  color: #FFFFFF;
  font-family: var(--font-family-en);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__labelText {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
  }
}

.uxdesign-service-s-example .s-example__labelText::after {
  counter-increment: example 1;
  content: "0" counter(example);
  display: inline-block;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 100%;
  text-align: center;
  letter-spacing: 1.5px;
  color: #FFFFFF;
  font-family: var(--font-family-en);
  margin-top: 3px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__labelText::after {
    margin-left: 5px;
    font-size: 1.125rem;
    letter-spacing: 1px;
    margin-top: 0px;
  }
}

.uxdesign-service-s-example .s-example__title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 160%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin-left: 24px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__title {
    margin-left: 0;
    margin-top: 12px;
    line-height: 150%;
  }
}

.uxdesign-service-s-example .s-example__text {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: var(--color-main_6-txt);
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-example .s-example__text {
    margin-top: 14px;
  }
}

.uxdesign-service-s-feature .s-feature__list {
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__list {
    margin-top: 40px;
  }
}

.uxdesign-service-s-feature .s-feature__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__item {
    display: block;
  }
}

.uxdesign-service-s-feature .s-feature__item + .s-feature__item {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__item + .s-feature__item {
    margin-top: 60px;
  }
}

.uxdesign-service-s-feature .s-feature__item:nth-child(even) .s-feature__itemLeft {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.uxdesign-service-s-feature .s-feature__item:nth-child(even) .s-feature__itemRight {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.uxdesign-service-s-feature .s-feature__itemLeft {
  width: calc(100% - (360px + 80px));
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__itemLeft {
    width: 100%;
  }
}

.uxdesign-service-s-feature .s-feature__itemRight {
  width: 360px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__itemRight {
    width: 100%;
    margin-top: 40px;
  }
}

.uxdesign-service-s-feature .s-feature__label {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 1.5px;
  color: var(--color-main_5-txt_head);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: var(--font-family-en);
}

.uxdesign-service-s-feature .s-feature__label::after {
  content: "";
  display: block;
  height: 1px;
  width: 50px;
  background-color: var(--color-main_5-txt_head);
  margin-left: 14px;
}

.uxdesign-service-s-feature .s-feature__title {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 160%;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
  margin-top: 18px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__title {
    font-size: 1.25rem;
    line-height: 150%;
    margin-top: 12px;
  }
}

.uxdesign-service-s-feature .s-feature__text {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__text {
    margin-top: 14px;
  }
}

.uxdesign-service-s-feature .s-feature__text .note {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
  opacity: 0.5;
  display: block;
  margin-top: 8px;
}

.uxdesign-service-s-feature .s-feature__image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.uxdesign-service-s-feature .s-feature__image.-has--shadow {
  -webkit-filter: drop-shadow(14px 14px 28px rgba(125, 79, 254, 0.2));
          filter: drop-shadow(14px 14px 28px rgba(125, 79, 254, 0.2));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.uxdesign-service-s-feature .s-feature__image::after {
  content: "";
  display: block;
  padding-top: 71.1%;
}

.uxdesign-service-s-feature .s-feature__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.uxdesign-service-s-feature .s-feature__linkList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  margin-top: 28px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__linkList {
    margin-top: 20px;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__linkItem + .s-feature__linkItem {
    margin-top: 10px;
  }
}

.uxdesign-service-s-feature .s-feature__linkItem:nth-child(2n) {
  margin-left: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__linkItem:nth-child(2n) {
    margin-left: 0;
  }
}

.uxdesign-service-s-feature .s-feature__table {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-feature .s-feature__table {
    margin-top: 60px;
    width: calc(100% + 20px);
  }
}

.uxdesign-service-s-header {
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header {
    padding-bottom: 60px;
  }
}

.uxdesign-service-s-header + .-bg--none {
  padding-top: 0;
}

.uxdesign-service-s-header .s-header__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__layout {
    display: block;
  }
}

.uxdesign-service-s-header .s-header__layoutLeft {
  max-width: 658px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__layoutRight {
    margin-top: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.uxdesign-service-s-header .s-header__descriptionTitle {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 160%;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__descriptionTitle {
    font-size: 1.25rem;
    text-align: left;
    margin-top: 50px;
  }
}

.uxdesign-service-s-header .s-header__descriptionText {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 180%;
  letter-spacing: 0.01em;
  margin-top: 28px;
  color: var(--color-main_1-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__descriptionText {
    text-align: left;
    margin-top: 18px;
  }
}

.uxdesign-service-s-header .s-header__images {
  height: 535px;
  width: 409px;
  position: absolute;
  right: -60px;
  top: -80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__images {
    position: relative;
    width: 247px;
    height: 325px;
    top: 0;
    right: 0;
  }
}

.uxdesign-service-s-header .s-header__image1 img, .uxdesign-service-s-header .s-header__image2 img, .uxdesign-service-s-header .s-header__image3 img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.uxdesign-service-s-header .s-header__image1 {
  position: absolute;
  right: 0;
  top: 0;
  height: 100px;
  width: 100px;
  z-index: 3;
  -webkit-filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
          filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__image1 {
    height: 68px;
    width: 68px;
  }
}

.uxdesign-service-s-header .s-header__image2 {
  position: absolute;
  right: 40px;
  top: 40px;
  height: 413px;
  width: 300px;
  z-index: 2;
  -webkit-filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
          filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__image2 {
    height: 249px;
    width: 184px;
    right: 24px;
    top: 24px;
  }
}

.uxdesign-service-s-header .s-header__image3 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 240px;
  width: 132px;
  z-index: 3;
  -webkit-filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
          filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-header .s-header__image3 {
    height: 144px;
    width: 78px;
  }
}

.uxdesign-service-s-images .s-images__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 18px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-images .s-images__list {
    display: block;
    margin-top: 24px;
  }
}

.uxdesign-service-s-images .s-images__item {
  width: calc(100% / 3 - 36px / 3);
  margin-right: 18px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-images .s-images__item {
    width: 100%;
  }
  .uxdesign-service-s-images .s-images__item + .s-images__item {
    margin-top: 30px;
  }
}

.uxdesign-service-s-images .s-images__item:last-child {
  margin-right: 0;
}

.uxdesign-service-s-images .s-images__image {
  position: relative;
}

.uxdesign-service-s-images .s-images__image::after {
  content: "";
  display: block;
  padding-top: 58%;
}

.uxdesign-service-s-images .s-images__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  left: 0;
  top: 0;
}

.uxdesign-service-s-images .s-images__text {
  margin-top: 12px;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-images .s-images__text {
    margin-top: 10px;
  }
}

.uxdesign-service-s-possible .s-possible__list {
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-possible .s-possible__list {
    margin-top: 40px;
  }
}

.uxdesign-service-s-possible .s-possible__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 30px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-possible .s-possible__item {
    display: block;
    padding: 0;
  }
}

.uxdesign-service-s-possible .s-possible__item + .s-possible__item {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 40px;
  padding-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-possible .s-possible__item + .s-possible__item {
    border: none;
    margin-top: 50px;
    padding: 0;
  }
}

.uxdesign-service-s-possible .s-possible__itemLeft {
  width: calc(100% - 630px);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-possible .s-possible__itemLeft {
    width: 100%;
  }
}

.uxdesign-service-s-possible .s-possible__itemRight {
  width: 630px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-possible .s-possible__itemRight {
    width: 100%;
    margin-top: 14px;
  }
}

.uxdesign-service-s-possible .s-possible__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

.uxdesign-service-s-possible .s-possible__title::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: var(--color-accent_1);
  margin-right: 14px;
}

.uxdesign-service-s-possible .s-possible__text {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: var(--color-main_6-txt);
}

.uxdesign-service-s-possible .s-possible__link {
  margin-top: 28px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-possible .s-possible__link {
    margin-top: 20px;
  }
}

.uxdesign-service-s-price .s-price__contents {
  border: 1px solid rgba(178, 174, 197, 0.3);
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__contents {
    margin-top: 30px;
  }
}

.uxdesign-service-s-price .s-price__detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__detail {
    display: block;
  }
}

.uxdesign-service-s-price .s-price__detail + .s-price__detail .s-price__title {
  border-top: 1px solid white;
}

.uxdesign-service-s-price .s-price__detail + .s-price__detail .s-price__description {
  border-top: 1px solid rgba(178, 174, 197, 0.3);
}

.uxdesign-service-s-price .s-price__title, .uxdesign-service-s-price .s-price__description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__title, .uxdesign-service-s-price .s-price__description {
    display: block;
  }
}

.uxdesign-service-s-price .s-price__title {
  background: #EFEFEF;
  font-weight: 700;
  font-size: 1rem;
  line-height: 140%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_1-txt);
  padding: 40px 30px;
  width: 220px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__title {
    width: 100%;
    line-height: 160%;
    padding: 18px 18px 16px;
  }
}

.uxdesign-service-s-price .s-price__description {
  padding: 30px 40px;
  width: calc(100% - 220px);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 160%;
  letter-spacing: 0.01em;
  color: var(--color-main_1-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__description {
    width: 100%;
    padding: 18px 18px 16px;
    line-height: 150%;
  }
}

.uxdesign-service-s-price .s-price__description * {
  width: 100%;
}

.uxdesign-service-s-price .s-price__description ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.uxdesign-service-s-price .s-price__description ul li.no_dot::before {
  content: none;
}

.uxdesign-service-s-price .s-price__description ul li::before {
  content: "";
  width: 6px;
  min-width: 6px;
  height: 6px;
  background: var(--color-accent_1);
  margin-top: 10px;
  margin-right: 8px;
}

.uxdesign-service-s-price .s-price__description ul + h3 {
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__description ul + h3 {
    margin-top: 18px;
  }
}

.uxdesign-service-s-price .s-price__description h3 {
  font-weight: 700;
  line-height: 180%;
  margin-bottom: 6px;
  color: var(--color-main_7-txt);
}

.uxdesign-service-s-price .s-price__cta {
  background: -webkit-gradient(linear, left top, right top, color-stop(27.6%, #EEF1FF), to(#FDEEFF));
  background: -webkit-linear-gradient(left, #EEF1FF 27.6%, #FDEEFF 100%);
  background: linear-gradient(90deg, #EEF1FF 27.6%, #FDEEFF 100%);
  border-radius: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 40px 40px 40px 100px;
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__cta {
    display: block;
    padding: 30px 28px 38px;
    margin-top: 40px;
  }
}

.uxdesign-service-s-price .s-price__ctaTitle {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 180%;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--color-main_7-txt);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__ctaTitle {
    font-size: 1rem;
    line-height: 150%;
  }
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-price .s-price__ctaLinks {
    margin-top: 20px;
  }
}

.uxdesign-service-s-purpose {
  padding-bottom: 0;
  position: relative;
  z-index: 2;
  padding-bottom: 380px !important;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-purpose {
    padding-bottom: 176px !important;
  }
}

.uxdesign-service-s-purpose .uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__description {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-purpose .uxdesign-c-sectionHeaderOnlyJa .c-sectionHeaderOnlyJa__description {
    margin-top: 30px;
  }
}

.uxdesign-service-s-purpose::before {
  content: "";
  display: block;
  width: 10px;
  position: absolute;
  height: 10px;
  left: 120px;
  top: 0;
  background: var(--color-accent_1);
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-purpose::before {
    left: 0;
  }
}

.uxdesign-service-s-purpose .s-purpose__image {
  height: 400px;
  position: absolute;
  bottom: -120px;
  right: 0;
  left: 300px;
}

@media screen and (max-width: 767px) {
  .uxdesign-service-s-purpose .s-purpose__image {
    height: 206px;
    bottom: -80px;
    left: 20px;
  }
}

.uxdesign-service-s-purpose .s-purpose__image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.uxdesign-top-s-about {
  margin-bottom: 140px;
  position: relative;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about {
    padding-left: 20px !important;
    margin-bottom: 160px;
    padding-bottom: 220px;
    background: -webkit-linear-gradient(left, transparent 0%, transparent 20px, var(--color-main_2-btn) 20px, var(--color-main_2-btn) 100%) !important;
    background: linear-gradient(90deg, transparent 0%, transparent 20px, var(--color-main_2-btn) 20px, var(--color-main_2-btn) 100%) !important;
  }
}

.uxdesign-top-s-about .uxdesign-c-inner {
  position: relative;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .uxdesign-c-sectionHeader .c-sectionHeader__inner {
    padding-left: 16px;
  }
}

.uxdesign-top-s-about .uxdesign-c-sectionHeader .c-sectionHeader__description {
  padding-left: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .uxdesign-c-sectionHeader .c-sectionHeader__description {
    padding-left: 0px;
  }
}

.uxdesign-top-s-about .s-about__link {
  margin-top: 40px;
  padding-left: 20px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .s-about__link {
    padding-left: 0px;
  }
}

.uxdesign-top-s-about .s-about__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .s-about__layout {
    display: block;
    padding-left: 30px;
  }
}

.uxdesign-top-s-about .s-about__images {
  height: 612px;
  width: 396px;
  position: absolute;
  right: 0;
  top: -10px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .s-about__images {
    width: 250px;
    height: 356px;
    right: 20px;
    top: calc(100% + 48px);
  }
}

.uxdesign-top-s-about .s-about__image1 img, .uxdesign-top-s-about .s-about__image2 img, .uxdesign-top-s-about .s-about__image3 img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.uxdesign-top-s-about .s-about__image1 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100px;
  width: 100px;
  z-index: 3;
  -webkit-filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
          filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .s-about__image1 {
    height: 68px;
    width: 68px;
  }
}

.uxdesign-top-s-about .s-about__image2 {
  position: absolute;
  left: 40px;
  top: 40px;
  height: 492px;
  width: 280px;
  z-index: 2;
  -webkit-filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
          filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .s-about__image2 {
    height: 270px;
    width: 190px;
    left: 26px;
    top: 26px;
  }
}

.uxdesign-top-s-about .s-about__image3 {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 290px;
  width: 152px;
  z-index: 3;
  -webkit-filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
          filter: drop-shadow(18px 18px 38px rgba(40, 38, 47, 0.3));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-about .s-about__image3 {
    height: 148px;
    width: 84px;
  }
}

.uxdesign-top-s-client .s-client__contents {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-client .s-client__contents {
    margin-top: 50px;
  }
}

.uxdesign-top-s-mainvisual {
  padding: 130px 0 80px;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual {
    padding: 70px 0 24px;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 160%;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: -webkit-gradient(linear, left top, right top, color-stop(1.68%, #53477C), color-stop(98.59%, #423D55));
  background: -webkit-linear-gradient(left, #53477C 1.68%, #423D55 98.59%);
  background: linear-gradient(90deg, #53477C 1.68%, #423D55 98.59%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__title {
    font-size: 1.375rem;
    line-height: 140%;
    letter-spacing: 0.02em;
    white-space: normal;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__description {
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 180%;
  letter-spacing: 1px;
  margin-top: 12px;
  color: var(--color-main_4-txt_head);
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__description {
    font-size: 0.6875rem;
    margin-top: 8px;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__btns {
  margin-top: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__btns {
    margin-top: 24px;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding-left: 80px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__layout {
    display: block;
    padding-left: 20px;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__layoutLeft {
  width: calc(39.75% + 80px);
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  padding-top: 90px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__layoutLeft {
    padding-top: 0px;
    width: 100%;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__layoutRight {
  width: 600px;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__layoutRight {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__logo {
  width: 100%;
  overflow: hidden;
  position: relative;
  right: -60px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__logo {
    right: 0;
  }
}

.uxdesign-top-s-mainvisual .s-mainvisual__scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: 38px;
  left: 120px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-mainvisual .s-mainvisual__scroll {
    position: static;
    margin-top: 30px;
    padding-left: 20px;
  }
}

.uxdesign-top-s-service {
  position: relative;
  background: url(/assets/img/uxdesign/top/service/bg.svg) no-repeat center/1956px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-service {
    padding: 70px 0 110px;
    background-image: url(/assets/img/uxdesign/top/service/bg.svg), url(/assets/img/uxdesign/top/service/bg.svg);
    background-position: top center, bottom center;
    background-repeat: no-repeat,no-repeat;
    background-size: 680px,680px;
  }
  .uxdesign-top-s-service .uxdesign-c-inner {
    background-color: white;
  }
}

.uxdesign-top-s-service .s-service__bg1, .uxdesign-top-s-service .s-service__bg2 {
  position: absolute;
  width: 181.333%;
  left: -50%;
  display: none;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-service .s-service__bg1, .uxdesign-top-s-service .s-service__bg2 {
    display: block;
    display: none;
  }
}

.uxdesign-top-s-service .s-service__bg1::before, .uxdesign-top-s-service .s-service__bg2::before {
  content: "";
  display: block;
  padding-top: 100%;
  width: 100%;
}

.uxdesign-top-s-service .s-service__bg1::after, .uxdesign-top-s-service .s-service__bg2::after {
  content: url(/assets/img/uxdesign/top/service/bg.svg);
  display: block;
  position: absolute;
  left: 0%;
  top: 0;
  width: 100%;
  height: 100%;
}

.uxdesign-top-s-service .s-service__bg1 {
  top: 0;
}

.uxdesign-top-s-service .s-service__bg2 {
  bottom: 0;
}

.uxdesign-top-s-service .s-service__bgText1 {
  position: absolute;
  left: -123px;
  top: -103px;
  -webkit-filter: drop-shadow(24px 24px 38px rgba(125, 79, 254, 0.2));
          filter: drop-shadow(24px 24px 38px rgba(125, 79, 254, 0.2));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-service .s-service__bgText1 {
    display: none;
    top: -25px;
    left: calc(100% - (137px - 42px));
  }
  .uxdesign-top-s-service .s-service__bgText1 svg {
    height: 139px;
    width: 137px;
  }
}

.uxdesign-top-s-service .s-service__bgText2 {
  position: absolute;
  right: 0px;
  bottom: -201px;
  -webkit-filter: drop-shadow(24px 24px 38px rgba(125, 79, 254, 0.3));
          filter: drop-shadow(24px 24px 38px rgba(125, 79, 254, 0.3));
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-service .s-service__bgText2 {
    bottom: -44px;
    right: calc(100% - 127px);
  }
  .uxdesign-top-s-service .s-service__bgText2 svg {
    height: 120px;
    width: 127px;
  }
}

.uxdesign-top-s-service .uxdesign-c-inner {
  position: relative;
  z-index: 2;
}

.uxdesign-top-s-service .s-service__contents {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-service .s-service__contents {
    margin-top: 50px;
  }
}

.uxdesign-top-s-service .s-service__link {
  margin-top: 80px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .uxdesign-top-s-service .s-service__link {
    margin-top: 50px;
  }
}

table{
  border-top: 1px solid #7a7a7a;

}
table , td, th {
	border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
th{
  width: 30%;

}
td{
  width: 70%;

}
tr{
  border-bottom: 1px solid #7a7a7a;
  
  
}
td, th {
  /* padding: 3px; */
  padding: 2rem 0;
	/* width: 30px; */
	/* height: 25px; */
  /* padding: 10px; */
  line-height: 30px;
}
th {
	/* background: #f0e6cc; */
  /* background-color: #F6F6F6; */
  text-align: left;
}
.even {
	/* background: #fbf8f0; */
}
.odd {
	/* background: #fefcf9; */
}
@media screen and (max-width: 767px) {
  td, th {
    padding: 3px;
    /* width: 20px; */
    height: 25px;
    padding: 10px;
    line-height: 30px;
    padding: 1.5rem 0;
    font-size: 4vw;
        line-height: 6.4vw;
  }
  th{
    width: 40%;
  }
  td{
    width: 60%;
  }
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }

}
.pc{
  display: block;
}
.sp{
  display: none;
}

.footer_logo{
  width: 6vw;
display: block;
text-decoration: none;
}

.footer_logo img{
  width: 100%;
}

.header-area{
  padding-top: 5rem;
}
@media screen and (max-width: 767px) {
  .footer_logo{
    width: 80px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 50px;
  }

  .header-area{
    padding-top: 0;
  }


}